/*
    font-family: proxima-nova, sans-serif; //body
    font-family: proxima-nova-condensed, sans-serif;
    font-family: jubilat, serif; //titles
    font-family: jubilat-thin, serif; 

    teal:       #8ED1C0     rgba(142,209,192,1)
    light blue  #C5E7E7     rgba(197,231,231,1)
    red:        #EF3E39     rgba(239,62,57,1)
    yellow:     #FFD65C     rgba(255,214,92,1)    
    dark gray:  #3C3C3D     rgba(60,60,61,1)
    navy:       #05415d     rgba(5,65,93,1)
*/

/*#region master page*/
#sectionTopNav tbody {
    border: none;
    background-color: transparent;
}
/*#endregion*/

/*#region to the top*/
#toTheTop a {
    color: #EF3E39;
}
.to-top-btn {
    position: fixed;
    bottom: 40px;
    right: 20px;
    height: 38px;
    text-decoration: none;
    background-color: #C5E7E7;
    color: #EF3E39;
    padding: .5rem;
    border-radius: 7px;
    display: none;
    z-index: 100;
    opacity: .98;
}
.to-top-btn:hover, .to-top-btn:active, to-top-btn:focus {
    background-color: rgba(255,214,92,1);
}
/*#endregion to the top*/

/*#region scroll menu*/
#scrollDesktopMenu {
    display: block;
    width: 100%;
    position: fixed;
    top: -1px;
    left: 0;
    z-index: 50;
    background: #FFF;
    overflow: hidden;
    transition: height .75s ease-in-out;
    border-bottom: none;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.5);
    box-shadow: 0 0 10px rgba(0,0,0,.5);   
}
    #scrollDesktopMenu img {
        padding: 1rem 0 1rem 0rem; /* I changed this CR */
    }
/*#endregion scroll menu*/

/*#region nav container*/
    #navContainerOuter {
        padding: 1.35rem 0 0rem 0;
    }    
    #navContainerLogo {
        padding-left:1.0625rem;
        width:90%
    }
    #navContainerMenu {
        padding-right: 1.0625rem;
        width:10%;
    }
/*#endregion*/

/*#region menu open/close */
#nav-icon-circle {
    position: fixed;
    top: 13px;
    -webkit-transform: translateX(145%);
    -moz-transform: translateX(145%);
    -o-transform: translateX(145%);
    transform: translateX(145%);
    background: #FFF;
    border: 2px solid #EF3E39;
    z-index: 1010;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
}
#nav-icon-circle.open {
    background: #C5E7E7;
    border: 1px solid #C5E7E7;
}
.nav-icon {
    font-size: 1.5rem;
    margin-left: .65rem !important;
}
#mobileOpenClose {
    display: block
}
#nav-icon span {
    display: block
}
#nav-icon {
    width: 1.875rem;
    height: 1.875rem;
    position: fixed;
    -webkit-transform: translate(12px, 16px) rotate(0);
    -moz-transform: translate(12px, 16px) rotate(0);
    -o-transform: translate(12px, 16px) rotate(0);
    transform: translate(12px, 16px) rotate(0);    
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    z-index: 1010
}
#nav-icon span {
    position: absolute;
    height: 3px;
    width: 100%;
    background: #EF3E39;
    border-radius: 4px;
    opacity: 1;
    right:.08rem;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out
}
#nav-icon span:nth-child(1) {
    top: 0
}
#nav-icon span:nth-child(2) {
    top: .6rem
}
#nav-icon span:nth-child(3) {
    top: 1.2rem
}
#nav-icon.open span:nth-child(1) {
    top: .6rem;
    background: #EF3E39;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg)
}
#nav-icon.open span:nth-child(2) {
    opacity: 0;
    left: -45px
}
#nav-icon.open span:nth-child(3) {
    top: .6rem;
    background: #EF3E39;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg)
}
/*#endregion*/

/*#region navigation*/
#theMobileNavigation {
    display: none;
    top: 0;
    height: 100vh;
    width: 100%;
    position: fixed;
    right: 0;
    overflow-x: hidden;
    border-left: 0px solid #fff;
    opacity: 0;
    transition: all .75s ease-in-out;
}
#theMobileNavigation.open {
    display: block;
    z-index: 100;
    opacity: 1;
    transition: opacity .75s ease-in-out;
    /*
        opacity: .95;
        transition: opacity .75s ease-in-out;
    */
}
#theMobileOverlay {
    width: 100%;
    height: 100%;
    background: url(/img/odney-pattern3.png) no-repeat bottom right;
    background-size: 75%;
    background-color: rgba(239,62,57,1);
/*    color: rgba(239,62,57,1); */
}
#navOverLogo {
    padding:2rem;
}
#navOverLogo img {
    width: 220px;
}

#theMobileNavContainer {
    padding-top: 1rem;
}
#theMobileNavigation a {
    color: rgba(255,255,255,1);
}
#theMobileNavigation a:hover, #theMobileNavigation a:focus, #theMobileNavigation a:active, #theMobileNavigation ul li a:hover {
    color: #C5E7E7;
}

#theMobileNavigation ul {
    list-style-type: none;
    margin-right: 1rem;
}

#theMobileNavigation ul li {
    text-align: right;
    padding: .5rem .5rem 0 .5rem;
}  

#theMobileNavigation ul li a {
    font-size: 3rem;
    font-weight: bold;
    color: rgba(255,255,255,1);
    text-decoration: none;
}
    
#theMobileNavigation.open ul li {
    -webkit-animation: fade-in-move-up .15s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fade-in-move-up .15s; /* Firefox < 16 */
    -ms-animation: fade-in-move-up .15s; /* Internet Explorer */
    -o-animation: fade-in-move-up .15s; /* Opera < 12.1 */
    animation: fade-in-move-up .15s;
    animation-fill-mode: both;
}
#theMobileNavigation.open ul li:nth-child(1) {
    animation-delay: .15s;
    -webkit-animation-delay: .15s;        
}

#theMobileNavigation.open ul li:nth-child(2) {
    animation-delay: .25s
}

#theMobileNavigation.open ul li:nth-child(3) {
    animation-delay: .35s
}

#theMobileNavigation.open ul li:nth-child(4) {
    animation-delay: .45s
}

#theMobileNavigation.open ul li:nth-child(5) {
    animation-delay: .55s
}
#theMobileNavigation.open ul li:nth-child(6) {
    animation-delay: .65s
}
/*#endregion*/

/*#region additional content*/

#theMobileNavContent {
    padding: 2rem;
    color: rgba(255,255,255,1);
    font-size: 1.5rem;
}
#theMobileNavContent h2, #theMobileNavContent h3 {
    font-weight: 700;
    
}
    #theMobileNavContent h3 {
        margin-top: 5rem;
        line-height: 1.25;
    }
/*#endregion */

/*#region media points*/
@media(max-width:1600px) {
    #theMobileOverlay {
        background-size: 100%;
    }
    #nav-icon-circle {
        right: 3.25rem;
        width: 3rem;
        height: 3rem;
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0);
    }
    #nav-icon {
        width: 1.5rem;
    }
    #nav-icon span {
        height: 2px;
    }
    #nav-icon span:nth-child(1) {
        top: -.10rem;
    }
    #nav-icon span:nth-child(2) {
        top: .35rem;
    }
    #nav-icon span:nth-child(3) {
        top: .8rem;
    }
    #nav-icon.open span:nth-child(1),#nav-icon.open span:nth-child(3) {
        top: .4rem;
    }
    #theMobileNavigation ul {        
        margin-right: 2rem;
    }
    #navContainerLogo {
        padding-left: 1.5rem;
    }
    #navContainerLogo img {
        width:130px;
    }
}

@media(max-width:1023px) {
    #theMobileOverlay {
        background-size: 125%;
    }
    #theMobileNavigation ul li a {
        font-size: 2.7rem;
    }
    #theMobileNavContent {       
        font-size: 1.275rem;
    }
    #theMobileNavContent h2 {
        font-size:2.25rem;
    }
    #theMobileNavContent h3 {
        font-size: 1.75rem;
    }    
}
@media(max-width:830px) {
    #navContainerLogo img {
        width: 110px;
    }
    #theMobileOverlay {
        background-size: 150%;
    }
    #theMobileNavigation ul li a {
        font-size: 2.43rem;
    }

    #theMobileNavContent {
        font-size: 1.1475rem;
    }

    #theMobileNavContent h2 {
        font-size: 2.025rem;
    }

    #theMobileNavContent h3 {
        font-size: 1.577rem;
    } 
}
@media(max-width:639px) {
    #navContainerLogo {
        padding-left: 1.25rem;
    }
    #navContainerLogo img {
        width: 94px;
    }
    #nav-icon-circle {
        right: 2.25rem;
        width: 2.5rem;
        height: 2.5rem;
    }
    #nav-icon {
        width: 1.25rem;
    }
    #nav-icon span {
        height: 2px;
        right: .23rem;
    }
    #nav-icon span:nth-child(1) {
        top: -.25rem;
    }
    #nav-icon span:nth-child(2) {
        top: .125rem;
    }
    #nav-icon span:nth-child(3) {
        top: .5rem;
    }
    #nav-icon.open span:nth-child(1), #nav-icon.open span:nth-child(3) {
        top: .2rem;
    }

    #theMobileOverlay {
        background-size: 175%;
    }
    #navOverLogo {
        padding: 1.25rem 1rem 1rem 1.5rem;
    }
    #navOverLogo img {
        width: 150px;
    }
    #theMobileNavigation ul {       
        margin: 1rem 0 0 0;
    }
    #theMobileNavigation ul li {
        text-align: center;
        padding: 0;
    }
    #theMobileNavigation ul li a {
        font-size: 1.75rem;
    }

    #theMobileNavContent {
        padding-top:1rem;
        font-size: 1.15rem;
        text-align:center;
    }        

    #theMobileNavContent h2 {
        font-size: 1.75rem;
        color: #C5E7E7;
        margin-top: 2rem;
    }

    #theMobileNavContent h3 {
        font-size: 1.45rem;
        color: #C5E7E7;
        margin-top: 2rem;
    } 
}
@media(max-width:430px) {
    #theMobileNavContent h3 {        
        margin: 2rem 2rem 0 2rem;
    }
    #theMobileOverlay {       
        background-size: 230%;       
    }
}
@media(max-height:750px) {
    #theMobileNavigation ul li a {
        font-size: 1.5rem;
    }
    #theMobileNavContent h2 {
        margin-top: 1rem;
        font-size: 1.5rem;
    }
    #theMobileNavContent h3 {
        font-size: 1.5rem;           
    }
}
    /*#endregion*/