/*
COLORS FROM PALM & Built-RITE LOGOS:
Blue:   #01218D
Green:  #00B283
*/

body {
    background-color: #01218D;
    color: #01218D;
}

a {
    color: #00B283;
}

h1 {
    margin-bottom: 25px;
}

h2 {
    margin-bottom: 25px;
}

h4 {
    margin-top: 10px;
}

nav.navbar-custom {
    background-color: #01218D;
}

#FullWidthContentArea {
    background-color: #5D5D5D;
    padding: 0px;
    margin: 0px;
}

#MainContentAreaOuterDiv {
    background-color: white;
    min-height: 550px;
    border-style: solid;
    border-color: #00B283;
    border-width: 0px;
    border-bottom-width: 10px;
}

#LogoRow {
    background-color: white;
    border-style: solid;
    border-color: #01218D;
    border-width: 0px;
    border-bottom-width: 10px;
    color: #00B283;
}

#LogosCell {
    padding: 20px;
}

#ProgramNamesDiv {
    background-color: #00B283;
    color: white;
    padding-top: 10px;
}

#PALMFirmName {
    font-size: 110%;
    font-weight: bold;
}

#BRFirmName {
    font-size: 110%;
}

#ContentAreaWithPadding {
    width: 100%;
    margin-top: 25px;
    margin-bottom: 25px;
    margin-left: 30px;
    margin-right: 30px;
}


@media only screen and (max-width: 768px ) {
    .container {
        max-width: 100%;
    }
}

#Footer {
    margin-top: 20px;
    margin-bottom: 20px;
    color: white;
}

#FooterNavLinksDiv a {
    color: white;
    font-size: 88%;
    padding-left: 8px;
    padding-right: 8px;
}

    #FooterNavLinksDiv a:hover {
        text-decoration: underline;
    }


/* ********************************* N A V B A R   C L A S S E S ********************************************* */

/* Good navbar reference: https://medium.com/wdstack/bootstrap-4-custom-navbar-1f6a2da5ed3c */
/* Navbar background color */
.navbar-custom {
    background-color: #005097;
}

    /* Navbar nav links color and size */
    .navbar-custom .navbar-nav .nav-link {
        color: white;
        font-size: 110%;
    }

    /*Color of navbar active link and hovered links */
    .navbar-custom .nav-item.active .nav-link,
    .navbar-custom .nav-item .nav-link:active,
    .navbar-custom .nav-item .nav-link:focus,
    .navbar-custom .nav-item:hover .nav-link {
        color: yellow;
    }

/* These two rules below are used to modify the color of the hamburger icon */
.custom-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler .navbar-toggler {
    border-color: rgb(255,255,255);
}

/* Adjust spacing between nav links */
.navbar-nav > li {
    padding-right: 20px;
}
/* End of Navbar classes ************************************************************************************************************************************** */



/* ********************************* M E D I A   Q U E R I E S ********************************************* */
/* Media queries to adjust font sizing at different viewport widths ******************************************************************************************* */

/* 
Extra small devices (portrait phones, less than 576px) 
No media query since this is the default in Bootstrap because it is "mobile first"
*/

/* Small devices (phones) */
@media (min-width: 300px) {
    #ProgramNamesDiv {
        height: 95px;
    }

    #PALMFirmName {
        font-size: 115%;
    }

    #BRFirmName {
        font-size: 110%;
    }
}

/* Small devices (phones) */
@media (min-width: 560px) {
    #ProgramNamesDiv {
        height: 85px;
    }

    #PALMFirmName {
        font-size: 145%;
    }

    #BRFirmName {
        font-size: 140%;
    }
}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
    #ProgramNamesDiv {
        height: 95px;
    }

    #PALMFirmName {
        font-size: 165%;
    }

    #BRFirmName {
        font-size: 165%;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    #ProgramNamesDiv {
        height: 125px;
        padding-top: 17px;
        line-height: 2;
    }

    #PALMFirmName {
        font-size: 135%;
    }

    #BRFirmName {
        font-size: 135%;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    #ProgramNamesDiv {
        padding-top: 10px;
        line-height: 2;
    }

    #PALMFirmName {
        font-size: 165%;
    }

    #BRFirmName {
        font-size: 165%;
    }
}