/* 5. Start of header block */
header {
    width: 100%;
}

.clear {
    clear: both;
    content: '';
    display: block;
}

#header_elements {
    background: #1e1e1e;
}

.wrapper {
    margin: 0 auto;
    width: 960px;
}

.header-primary{
    background-color: black;
    color: white;
    padding: 20px 0px 20px 0px;
}

.header-primary > .wrapper {
    width: 1058px;
    background: black;
    position: relative;
}

.header-primary > .wrapper > div {
    display: inline-block;
}

.header-links{
    position: absolute;
    right: -15px;
    top: 10px;
}

.header-links > a{
    margin-right: 15px;
    color: white;
    font-family: Arial;
    font-size: 14px;
}

.header-links > a:hover{
    color: gray;
}

.header-links > span{
    margin-right: 15px;
    color: white;
    font-family: Arial;
    font-size: 14px;
}

/* 5.1 Start of: Logo styling */
header h1 {
    float: left;
    width: 149px;
    margin: 22px 0 0 0;
    text-indent: -999em;
}

.primary-logo-container{
    margin-right: 3%;
    display: inline-block;
}

.slogan-container{
    position: absolute;
    top: 30%;
}
/* 5.1 End of: Logo styling */

/* 5.2 Start of: Top navigation elements */
#header_elements nav {
    display: inline-block;
    /*margin: 8px 0 0 215px;*/
    /*margin: 8px 0 0 130px;*/
    margin: 8px 0 0 30px;
}

@-moz-document url-prefix() {
    #header_elements nav {
        margin: 8px 0 0 16px;
    }
}

#header_elements nav .caret {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px dashed;
    display: inline-block;
    height: 0;
    margin-left: 2px;
    margin-top: 5px;
    vertical-align: top;
    width: 0;
}



#header_elements nav > ul > .liRegion {
    padding: 0 0 0 17px;
    left: 0;
    position: relative;
    top: 0;
}

    #header_elements nav > ul > .liRegion a {
        cursor: pointer;
    }

        #header_elements nav > ul > .liRegion a.active .caret {
            border-bottom: 6px dashed;
            border-top: 0;
        }

#header_elements nav ul .liRegion .regions {
    width: 146px;
    background-image: none;
    left: 18px;
    position: absolute;
    top: 22px;
    z-index: 2147483647;
    display: none;
}

    #header_elements nav ul .liRegion .regions li {
        display: block;
        background-color: #fff;
        background-image: none;
        width: 86%;
        border-bottom: 1px solid #c9c9c9;
        padding: 0 10px;
    }

        #header_elements nav ul .liRegion .regions li a {
            display: block;
            padding: 9px 0;
            color: #333;
        }

            #header_elements nav ul .liRegion .regions li a:hover {
                color: #c9c9c9;
            }

a {
    color: #00b6ce;
}

ul {
    list-style: none;
}

#header_elements ul li {
    background: url(../images/nav_separator.png) left 2px no-repeat;
    float: left;
    font-size: 11px;
    font-weight: bold;
    list-style-type: none;
    padding: 0 17px 0 17px;
    text-transform: capitalize;
}

    #header_elements ul li:first-child {
        background: none;
    }

    #header_elements ul li a {
        color: #818181;
    }
/* 5.2 End of: Top navigation elements */

/* 5.3 Start of: Top search box */
#header_elements #search {
    background: none repeat scroll 0 0 #505050;
    float: right;
    width: 240px;
}

#search_box_text {
    background-color: #505050;
    border: 0 none;
    color: #bababa;
    font-size: 12px;
    margin: 0 0 0 10px;
    outline: medium none;
    padding: 8px 0 7px;
    width: 195px;
}

#search_img {
    float: right;
    height: 21px;
    margin: 9px 7px 0 0;
    width: 16px;
    cursor: pointer;
    text-indent: -9999px;
}

.search-container{
    display: inline-block;
    position: absolute;
    bottom: -43px;
    right: 0px;
    font-family: "TradeGothicW01-BoldCn20 675334";
}

.search-bar{
    outline: none;
    width: 215px;
    height: 36px;
    border: 0px;
    color: #7e8083;
    padding: 0px 10px 0px 10px;
    background: #3d3d3d;
    background-position: 95% 50%;
    font-family: "TradeGothicW01-BoldCn20 675334";
    font-size: 18px;
}

.search-bar:focus::-webkit-input-placeholder {
    font-family: "TradeGothicW01-BoldCn20 675334";
    font-size: 18px;
}

.search-bar-img{
    width: 36px;
    height: 36px;
    background: #3d3d3d url(/Presentation/includes/images/search_icon.png) no-repeat;
    background-position: center;
    display: inline-block;
    vertical-align: top;
    margin-left: -5px;
}

/* 5.3 End of: Top search box */

/* 5.4 Start of Main Navigation */
#navigation_elements {
    background: #1e1e1e url(/Presentation/includes/images/background-merged.png) repeat;
    font-family: Oswald;
    border-bottom: 5px solid rgb(0, 151, 219);
}

    #navigation_elements .wrapper {
        width: 1058px;
        background: #1e1e1e;
        position: relative;
    }

header h1 {
    float: left;
    margin: 22px 0 0 45px;
    text-indent: -999em;
    width: 175px;
}

#navigation_elements h1 a {
    float: left;
    height: 60px;
    width: auto;
}

    #navigation_elements h1 a > img {
        display: block;
    }

#navigation_elements nav {
    float: left;
    /*margin: 10px 0 0 49px;*/
    /* margin: 10px 0 0 10px; */
    position: relative;
    max-width: 930px;
    color: white;
}

#navigation_elements #navLinks > li {
    display: inline;
    float: left;
    font-size: 18px;
    line-height: 20px;
    padding: 17px 14px 15px 0px;
    width: auto;
    margin-right: 30px;
}

#navigation_elements #navLinks > li > ul {
    background-color: #3d3d3d;
    right: auto !important;
}

    #navigation_elements #navLinks > li > a {
        color: #fff;
    }

    #navigation_elements #navLinks > li > ul a:hover, #navigation_elements #navLinks > li > ul a:focus {
        color: #a4a6a7;
    }

#navigation_elements #navLinks li.active > a.forecolor {
    color: #a4a6a7;
}

#navigation_elements #navLinks li.active > ul a.forecolor {
    color: #a4a6a7;
}

    #navigation_elements #navLinks li.active > ul a.forecolor:hover {
        color: #fff;
    }

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
    
    /* The container <div> - needed to position the dropdown content */
    .portal-dropdown {
        display: inline-block;
        margin-right: 15px;
        color: white;
        font-family: Arial;
        font-size: 14px;
        cursor: pointer;
    }
    
    /* Dropdown Content (Hidden by Default) */
    .portal-dropdown-content {
    display: none;
    position: absolute;
    background-color: #3d3d3d;
    min-width: 130px;
    z-index: 2;
    top:18px;
}

    /* Links inside the dropdown */
    .portal-dropdown-content a {
        color: #fff;
        padding: 8px 16px;
        text-decoration: none;
        display: block;
        border-bottom: 5px solid #1f1f1f;
    }
    
    /* Change color of dropdown links on hover */
    .portal-dropdown-content a:hover {
        color: gray;
    }
    
    /* Show the dropdown menu on hover */
    .portal-dropdown:hover .portal-dropdown-content {
    display: block;
    }

.portal-dropdown:focus .portal-dropdown-content {
    display: block;
}
    /* Change the background color of the dropdown button when the dropdown content is shown */
    .portal-dropdown:hover .portal-dropbtn {
    background-color: #3e8e41;
      }
.portal-dropdown:focus .portal-dropbtn {
    background-color: #3e8e41;
}
.arrow-right {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid white;
    position: absolute;
    right: 12px;
    top: 40%;
}

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid white;
    display: inline-block;
    padding-bottom: 1px;
  }

.flyout-menu{
    color: white;
    display: none;
    position: absolute;
    top: 0px;
    white-space: nowrap;
    padding: 18px 18px 18px 30px;
}

.flyout-link{
    padding: 0px !important;
}

.primary-nav-blue, .flyout-primary-nav-blue{
    background: linear-gradient(to right, #19b7b3 0%,#19b7b3 10px,#3d3d3d 10px,#3d3d3d 100%);
}
.blue-full{
    background: #19b7b3 !important;
}

.primary-nav-yellow, .flyout-primary-nav-yellow{
    background: linear-gradient(to right, #ffd223 0%,#ffd223 10px,#3d3d3d 10px,#3d3d3d 100%);
}
.yellow-full{
    background: #ffd223 !important;
}

.primary-nav-green, .flyout-primary-nav-green{
    background: linear-gradient(to right, #7eca4d 0%,#7eca4d 10px,#3d3d3d 10px,#3d3d3d 100%);
}
.green-full{
    background: #7eca4d !important;
}

.primary-nav-orange, .flyout-primary-nav-orange{
    background: linear-gradient(to right, #f58820 0%,#f58820 10px,#3d3d3d 10px,#3d3d3d 100%);
}
.orange-full{
    background: #f58820 !important;
}

.primary-nav-black, .flyout-primary-nav-black{
    background: linear-gradient(to right, black 0%, black 10px,#3d3d3d 10px,#3d3d3d 100%);
}

.black-full{
    background: black !important;
}

.primary-nav-purple, .flyout-primary-nav-purple{
    background: linear-gradient(to right, #9b1d51 0%,#9b1d51 10px,#3d3d3d 10px,#3d3d3d 100%);
}
.purple-full{
    background: #9b1d51 !important;
}

.primary-nav-gray, .flyout-primary-nav-gray{
    background: linear-gradient(to right, #797b7e 0%,#797b7e 10px,#3d3d3d 10px,#3d3d3d 100%);
}
.gray-full{
    background: #797b7e !important;
}

.non-flyout-section{
    background: linear-gradient(to right, #0097db 0%,#0097db 10px,#3d3d3d 10px,#3d3d3d 100%);
}

.primary-nav-header{
    display: inline-block;
}

    .primary-nav-header > a {
        color: inherit;
    }

.non-flyout-section > .flyout-link:hover > .sub-menu-title{
    color: gray;
}

.non-flyout-section > .flyout-link:focus {
    color: gray !important;
}

.sub-menu-title> a{
    color: #fff;
}

.sub-menu-title{
    display: inline-block;
    margin-left: 10%;
    font-size: 14px;
    font-family: Arial;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.29;
    letter-spacing: -0.5px;
    color: #ffffff;
    text-transform: none;
}

.border-separator{
    border-bottom: 1px solid #4e4f50;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.flyout-leveltwo{
    display: inline-block;
    width: 190px;
    vertical-align: top;
    margin-right: 20px;
    white-space: normal;
}

.flyout-leveltwo > .flyout-header {
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-family: inherit;
    font-weight: 400;
    color: #ffffff;
    font-size: 18px;
    text-transform: uppercase;
}

.flyout-leveltwo > .flyout-header , .flyout-leveltwo > ul > li{
    border-bottom: 1px solid #4e4f50;
}

.flyout-leveltwo > ul > li{
    white-space: initial;
    /* word-break: break-all; */
}

.level-two-link{
    color: #ffffff !important;
}

.level-two-link:hover{
    color: #ffffff !important;
}

.flyout-leveltwo > ul > li {
    font-family: "TradeGothic-Cn18", Arial Narrow, sans-serif;
    font-size: 14px;
    font-weight: normal !important;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.25;
    letter-spacing: normal;
    color: #d1d5d8;
}

.flyout-leveltwo > ul > li{
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.flyout-leveltwo > ul > li > a{
    color: #fff;
}

.flyout-leveltwo.border-separator > a{
    color: #fff;
}


.mega-menu {
    position: absolute;
    z-index: 999999;
    min-width: 220px;
    max-width: 930px;
    display: none;
}

    .mega-menu > li {
        border-bottom: 5px solid #1f1f1f;
        padding-bottom: 7px;
        padding-top: 7px;
        position: relative;
    }

        .mega-menu > li > a {
            color: #fff;
            font-size: 16px;
            font-weight: normal;
            padding: 6px 22px 0;
            display: block;
        }

.mega-sub-menu {
    padding-left: 35px;
}

    .mega-sub-menu > li > a {
        font-size: 14.5px;
        color: #fff;
        font-weight: normal;
        text-transform: none;
        display: block;
    }
/* 5.4 End of Main Navigation */
/* 5. End of header block */

/* 6. Start of footer block */
footer {
    width: 100%;
    position: relative !important;
}

.footer-lower-bar{
    background: black;
    color: #797b7e;
    padding-top: 22px;
    padding-bottom: 22px;
}

.footer-lower-bar > .wrapper{
    width: 1058px;
    margin: 0 auto;
    position: relative;
}

.footer-links{
    display: inline-block;
    position: absolute;
    top: 6px;
}

.footer-links > a, .footer-pipe{
    margin-right: 20px;
    color: #797b7e;
    font-size: 12px;
}

.footer-pipe{
    color: #d1d4d8;
}

.site-rights{
    position: absolute;
    right: 0px;
    top: 6px;
    color: #797b7e;
    font-size: 12px;
}

.footer-section-five > div{
    font-size: 14px;
    margin-bottom: 4px;
}