/*
    -- primary --
    Navy:           #001C33     rgba(0,28,51,1)
    Teal:           #032B29     rgba(3,43,41,1)
    Blue:           #1FB5D9     rgba(31,181,217,1)
    Green:          #8CCC29     rgba(140,204,41,1)
    Light Blue:     #9EE0F0     rgba(158,224,240,1)
    Light Green:    #BAE58A     rgba(186,229,138,1)

    -- secondary --
    Maroon:         #820033     rgba(130,0,51,1)
    Orange:         #FF690F     rgba(255,105,15,1)
    Charcoal:       #262629     rgba(38,38,41,1)
    Grey:           #878787     rgba(135,135,135,1)
    light Grey      #BFBFBF     rgba(191,191,191,1)

    font-family: "ff-good-headline-web-pro", sans-serif; //headlines 400 | 600 | 700
    font-family: "fairplex-wide", serif; // 400 | 500 
*/

#toTheTop a {
    color: #FFF;
}

#toTheTop a:hover, .to-top-btn:hover, .to-top-btn:active, to-top-btn:focus {
    color: #FF690F;
}

.to-top-btn {
    position: fixed;
    bottom: 40px;
    right: 20px;
    height: 38px;
    text-decoration: none;
    background-color: rgba(140,204,41,.95);
    color: #FFF;
    padding: .5rem;
    border-radius: 7px;
    display: none;
    z-index: 1100;
    opacity: .9;
}

#top-navagation-container {
    padding: 0 2rem;
    background: #262629;    
}

#topNav_imgLogo {
    width: 30%;
}
#topNav_imgLogo img {
    width: 470px;
}

#main-navigation {
    text-align: right;
    width: 70%;
}

#top-navagation-container table {
    height: 100%;
    vertical-align: middle;
}

#main-navigation ul {
    display: inline-block;
    list-style: none;
    margin-left: 0;
}
    #main-navigation ul li {
    font-family: 'KnockoutHTF49-LiteweightRegular', 'ff-good-headline-web-pro', sans-serif;       
    padding-top: 1rem;
    display: inline-block;
    font-size: 1.25rem;
    letter-spacing:1px;
    margin-right: 4rem;  
    text-transform:uppercase;
}

#main-navigation ul li:last-of-type {
    margin-right: 0;
}

#main-navigation ul li a {
    color: #FFF;
    width: 100%;    
    display: block;
}

#main-navigation ul li a:hover {
    color: #FF690F;
}

#main-navigation ul li a::after {
    display: block;
    content: '';
    border-bottom: solid 1px #FFF;
    transform: scaleX(0);
    transition: transform 250ms ease-in-out
}

#main-navigation ul li a:hover::after {
    transform: scaleX(1)
}

.activeSection {
    color: #FF690F !important;
}

.activeSection::after {
    transform: scaleX(1) !important;
}


/*#region menu open/close */
    .nav-icon {
        font-size: 1.5rem;
        margin-left: .65rem !important;
    }   

    #mobileOpenClose {
        display: none
    }

    #nav-icon span {
        display: block
    }

    #nav-icon {
        width: 1.875rem;
        height: 1.875rem;
        position: fixed;
        top: 2rem;
        right: 2rem;
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        transform: 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: 4px;
            width: 100%;
            background: #FF690F;
            border-radius: 4px;
            opacity: 1;
            left: 0;
            -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: .625rem
    }

    #nav-icon span:nth-child(3) {
        top: 1.25rem
    }

    #nav-icon.open span:nth-child(1) {
        top: .625rem;
        background: #FFF;
        -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: .625rem;
        background: #FFF;
        -webkit-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        transform: rotate(-135deg)
    }

    #theMobileNavigation {
        background-color: rgba(0,28,51,.98);
        height: 150%;
        width: 0;
        position: fixed;
        top: 0;
        right: 0;
        overflow-x: hidden;
        transition: .25s;
        z-index: 1005;
        padding-top: 2em;
        border-left: 0px solid #fff;
    }

    #theMobileNavigation a {
        color: #fff;
    }

    #theMobileNavigation a:hover, #theMobileNavigation a:focus, #theMobileNavigation a:active, #theMobileNavigation ul li a:hover {
        color: #FF690F;
    }

    #theMobileNavigation.open {
        width: 0
    }

    #theMobileNavigation ul {
        list-style-type: none;
        padding-top: 3.5rem;
        margin-right: 1.25rem;
    }

    #theMobileNavigation ul li {
        text-align: left;
        padding: .5rem .5rem .5rem 2rem;
        border-bottom: 1px solid #777
    }

    #theMobileNavigation ul li a {
        font-size: 1.3rem;
        color: #FFF;
        text-decoration: none;
    }
/*#endregion*/



/*#region scroll*/
#scrollDesktopMenu, #scrollDesktopMenuMobile {
    height: 0;
    background-color: rgba(255,255,255,1);
    width: 100%;
    left: 0;
    top: 0;
    position: fixed;
    overflow: hidden;
    z-index: 1000;
    border-bottom: 1px solid #8CCC29;
    display: block;
    white-space: nowrap;
    font-size: 0
}

#scrollDesktopMenu {
    -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);
    transition: all 1s;
}

#scrollDesktopLogo, #scrollDesktopNav {
    display:inline-block
}
#scrollDesktopLogo {    
    height: 100%;
    width:25%;
}
#scrollDesktopNav {
    height: 100%;
    text-align: right;
    width: 74%;
}

#scrollDesktopMenu {
    padding-left:2rem;
}

#scrollDesktopMenu table {
    height: 100%;
    vertical-align: middle;
    margin: 0;
}
#scrollDesktopMenu img {
    width:300px;
}

#scrollDesktopMenu ul {
    width: 74%;
    list-style: none;
    text-align: right;
    position:absolute;
    top:1.5rem;
    padding-right:2rem;
}
    #scrollDesktopMenu ul li {
        font-family: 'KnockoutHTF49-LiteweightRegular', 'ff-good-headline-web-pro', sans-serif;
        display: inline-block;
        padding-right: 2rem;
        text-transform:uppercase;
    }

#scrollDesktopMenu ul li a {
    color: #0B2532 !important;
    font-size: 1.25rem;
    text-shadow: none !important;
}

#scrollDesktopMenu ul li a:hover {
    color: #FF690F !important;
}

#scrollDesktopMenuMobile {
    -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);
    transition: all .2s;
    border-bottom: 1px solid #FFF;
    display: none
}



#scrollDesktopMenuMobile img {
    width: 175px;
    margin: .75rem
}





/*#endregion*/

/*#region media points*/
@media(max-width:1680px) {
    #topNav_imgLogo img {
        width: 480px;
    }
}
@media(max-width:1600px) {
    #main-navigation ul li {
        margin-right: 2rem;
        font-size: 1.2rem;
    }
}
@media(max-width:1450px) {
    #topNav_imgLogo img {
        width: 400px;
    }
}
@media(max-width:1360px) {    
    #main-navigation ul li {
        font-size: 1.15rem;
        margin-right: 1.25rem;
    }
    #scrollDesktopMenu ul li a {
        color: #0B2532 !important;
        font-size: 1.15rem;
        text-shadow: none !important;
    }
}


/*let's go mobile*/
@media(max-width:1236px) 
{
    #topNav_imgLogo {
        width: 80%;        
    }
    #topNav_imgLogo img {
        width:350px;
    }
    #main-navigation {
        width: 20%;
    }    
    #main-navigation, #scrollDesktopNav {
        display: none;
    }

    #theMobileNavigation.open {
        width: 350px;
        border-left: 1px solid #fff;
        max-width: 100%;
    }    

    #mobileOpenClose {
        display: block
    }
    #scrollDesktopLogo {
        width: 100%;
    }
}
@media(max-width:636px) {
    #top-navagation-container {
        padding: 0 1rem;
        border-bottom: 2px solid #8CCC29;
    }
    #scrollDesktopMenu {
        padding-left: .5rem;
    }
}
@media(max-width:500px) {
    tbody th, tbody td {
        padding: 0.5rem 0.625rem;
    }
    #topNav_imgLogo img {
        width: 300px;
    }
}
@media(max-width:400px) {
    #top-navagation-container {
        padding: 0 .5rem;        
    }
    #topNav_imgLogo img, #scrollDesktopMenu img {
        width: 250px;
    }    
}
/*#endregion*/