/*
history
09/11/24 (JC) CFCOOP-10297 - color changes 
*/
/* /////////////////// */
/* Bootstrap overrides */
.navbar {
    margin-bottom: 0px;
    border-radius: 0px;
    background-color: transparent;
}
.navbar-inverse .navbar-nav > li > a:hover, 
.navbar-inverse .navbar-nav > li > a:focus {
    color: #ffffff;
}
a {
    color: #804033;
}
a:hover {
    color: #804033;
}
@media (min-width: 768px){
    .navbar > .container .navbar-brand, 
    .navbar > .container-fluid .navbar-brand {
         margin-left: 0px; 
    }    
}
@media (min-width: 1300px){
    .container {
        width: 1280px;
    }
}


/*******************************************/
/* Global */
    html { 
       background-color: white; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    body {
        background-color: transparent;
        font-family: "Genesis Sans Text";
        font-size: 14px;
    }
    #main-container {
        border: 1px solid #010101;
        
        background-color: #010101;
    }
    header {
    }
    header .firstLevelNav {
    }
    header .firstLevelNav .navbar-brand {
        height: auto;
        margin-top: 21px;
        margin-left: 15px; 
        padding: 0px;
    }

    header .firstLevelNav .navbar-header {
        height: 94px;
        font-family: "Genesis Sans Head";
        font-size: 22px;
    }
    header .firstLevelNav .navbar-header .navbar-text {
        font-family: 'Genesis Sans Text'; 
		font-size: 18px; 
        color: #fff;
        margin-top: 35px;
    }   
    header .firstLevelNav .navbar-collapse {
        font-weight: bold;
    }    
    header .firstLevelNav .navbar-collapse {
        text-transform: uppercase;
    }   
    header .firstLevelNav .navbarSeperators{
        color: #9d9d9d; 
        position: relative;
        display: block;
        padding-top: 15px;
        padding-bottom: 15px;
        line-height: 20px;
    }

    main {
        background: url(/includes/hyundaigen/img/compliance_content_bg.jpg) no-repeat top right; 
        min-height:525px;
        padding-bottom: 30px;
    }
    footer {
        color: #b6b6b6;
        text-align: center;
        font-size: 11px;
        opacity: 0.6;
        margin: 1em auto 1em;
    }
    footer .copy {
        font-size: 10px;
        padding-bottom: 1em;
    }
    footer .copyright, footer .reserved {
        font-size: 10px;
    }
@media (min-width: 768px){
    header .firstLevelNav .navbar-collapse {
        margin-top: 42px;
    }    
    #main-container {
        margin-top: 45px;
    }
    header .firstLevelNav {
        height: 95px;
    }
} 





/*******************************************/
/* Header */
header .secondLevelNav {
    display: none;
}
header .secondLevelNav div {
    float: left;
    height: 100%;
    padding:  0px 8px;
    display: table;
    text-align: center;
}
header .secondLevelNav div:first-of-type {
    padding-left: 15px;
}
header .secondLevelNav span {
    display: table-cell;
    vertical-align: middle;    
}
header .secondLevelNav a {
    
    color: #3c3c3c;
    display: table-cell;
    vertical-align: middle;header .secondLevelNav {
    display: none;
}
@media (min-width: 768px){
    header .secondLevelNav {
        font-family: "Genesis Sans Head";
        height: 45px;
        background-color: #c2c2c2;
        color: #3c3c3c;
        display: table;
        width: 100%;
    }
} 
@media (min-width: 992px){  
    header .secondLevelNav div.seperation {
        padding:  0px 15px;
    }
} 
@media (min-width: 1200px){

}  
}
@media (min-width: 768px){
    header .secondLevelNav {
        font-family: "Genesis Sans Head";
        height: 45px;
        background-color: #c2c2c2;
        color: #3c3c3c;
        display: table;
        width: 100%;
    }
} 
@media (min-width: 992px){  
    header .secondLevelNav div.seperation {
        padding:  0px 15px;
    }
} 
@media (min-width: 1200px){

}  




/*******************************************/
/* Main */
    main .boxContainer {
        margin-left: 15px;
    }
    main .infoBox {
        background: rgba(39,39,39,0.45);
        width: auto; 
        height: auto; 
        margin: 1em;
        margin-left: 0px;
        font-size: 15px;
        color: #fff;
        padding: 20px;
    }
    main .infoBox div:first-of-type {
        border-bottom: 1px solid #9a9a9a;
        margin-bottom: 1em;
    }
    main .infoBox div:nth-of-type(2)  {
        padding-right: 5px;
    }
    main .infoBox h2 {
        font-family: "Genesis Sans Head";
        font-size: 24px;
        margin-top: 0px;
        line-height: 1.5;
        color: #cacaca;
    }
    main .infoBox h3 {
        font-family: "Genesis Sans Head";
        font-size: 20px;
        margin-top: 0px;
        color: #cacaca;
    }
    main .infoBox p {
        margin: 1em 0 10px;
    }
    main .infoBox a {
        font-weight: bold;
        color: #a36b4f;
    }
    

    main .callToActionBox {
        background: rgba(192,192,192,0.9);
        padding: 1em;
        margin-right: 15px;
        margin-top: 1em;
    }
    main .callToActionBox h3 {
        font-family: "Genesis Sans Head";
        font-size: 20px;
        margin-top: 0px;
    }
    main .callToActionBox .glyphicon {
        font-size: .75em;
    }
@media (min-width: 768px){
    main .infoBox {
        width: 640px; 
        height: 220px; 
        margin-top: 70px;
    }
    main .infoBox div:first-of-type {
        border-right: 1px solid #9a9a9a;
        border-bottom-width: 0px;
    } 
    main .callToActionBox {
        float: left;
        width: 31.2%;
        height: 155px;
        margin-top: 20px;
    }    
} 
@media (min-width: 992px){
    main .callToActionBox {
        float: left;
        width: 31.75%;
        height: 140px;
        margin-top: 35px;
    }    
} 
@media (min-width: 1200px){
    main .infoBox a {
        color: #ffffff;
    }
    main .callToActionBox {
        float: left;
        width: 32%;
        height: 120px;
        margin-top: 55px;
    }    
}  