/*
    font-family: 'Raleway', sans-serif; body
    font-family: 'Crimson Text', serif; heading

    Gold:       #fcd140     rgba(252,209,64,1)
    green:      #b3bd35     rgba(179,189,53,1) 
    blue:       #007cbb     rgba(0,124,187,1)
    dark Gray   #585858     rgba(88,88,88,1)
*/

/*#region to the top*/
#toTheTop a, #toTheTop a:active, #toTheTop a:focus {
    color: #FFF;
}

#toTheTop a:hover {
    color: #585858
}

.to-top-btn {
    position: fixed;
    bottom: 30px;
    right: 20px;
    height: 40px;
    font-size: 1em;
    text-decoration: none;
    background: #fcd140;
    color: #FFF;
    padding: .5rem .5rem 0 .5rem;
    border-radius: 7px;
    display: none;
    z-index: 800;
    opacity: .9;
}

.to-top-btn:hover, .to-top-btn:active, to-top-btn:focus {
    color: #585858;
}
/*#endregion*/

/*#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: #fcd140;
    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: #fcd140;
        -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: #fcd140;
        -webkit-transform: rotate(-135deg);
        -moz-transform: rotate(-135deg);
        -o-transform: rotate(-135deg);
        transform: rotate(-135deg)
    }

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

    #theMobileNavigation a {
        color: #fff;
    }

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

    #theMobileNavigation.open {
        width: 0
    }

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

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

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


/*#region main navigation*/
#topNavContainer {
    border-bottom: 1px solid #000;
    background: #585858;
    position: fixed;
    z-index: 900;
    width: 100%;
    height:140px;
    overflow:hidden;
    transition:height .25s ease-in-out
}

#navspacer {
    height: 135px;
}

#topNavLeft {
    padding:1rem;
    text-align: center;
}

#topNavLeft a {
    color: #FFF;
}
#topNavTopBottom {    
    color: #FFF;
    font-family: 'Raleway', sans-serif;
    padding: 1rem 0;
}

#topNavTopBottom ul {
    padding-top: 2.25rem;
    text-align: right;
    display: inline-block;
    list-style: none;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    transition: all .25s ease-in-out;
}

#topNavTopBottom ul li {
    display: inline-block;
    text-align: center;
    padding: 0 1.5rem;
    border-right: 1px solid #808080;
}

#topNavTopBottom ul li:last-of-type {
    border-right: none;
    padding-right: 8rem;
}
   

#topNavTopBottom ul li a {
    color: #FFF;
    font-size: 1.5rem;
    font-weight: 600;
}

#topNavTopBottom ul li a:hover {
    color: #fcd140
}

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

#topNavTopBottom ul li:hover a:hover::after {
    transform: scaleX(1);
}

#topNavContainer img {
    width:400px;
    position: relative;
    transition: all .25s ease-in-out;
}
.mainScroll {
    height: 70px !important;
}
.mainScroll img {
    
}
.mainScroll img {
    top:-.5rem;
    width: 200px !important;
}
.mainScroll ul {
    padding-top: .15rem !important;
}

/*#endregion*/

/*#region break points*/
@media(max-width:1700px) {
    #topNavTopBottom ul li:last-of-type {
        padding-right: 4rem;
    }
}

@media(max-width:1620px) {
    #topNavContainer {      
        height: 125px;
    }
    #navspacer {
        height: 125px;
    }
    #topNavContainer img {
        width: 350px;
    }
    #topNavTopBottom ul {
        padding-top: 2rem;
    }    
    #topNavTopBottom ul li a {
        font-size: 1.25rem;
    }
    .mainScroll ul {
        padding-top: .2rem !important;
    }
}

@media(max-width:1420px) {
    #topNavTopBottom ul li:last-of-type {
        padding-right: 3rem;
    }
    #topNavTopBottom ul li {
        padding: 0 1rem;
    }
}

@media(max-width:1300px) {
    #topNavTopBottom ul li {
        padding: 0 .75rem;
    }
    #topNavTopBottom ul li:last-of-type {
        padding-right: 2rem;
    }
    #topNavTopBottom ul li a {
        font-size: 1.15rem;
    }
}

@media(max-width:1175px) {
    #topNavTopBottom ul li {
        padding: 0 .5rem;
    }
    #topNavTopBottom ul li a {
        font-size: 1.05rem;
    }
}

/*lets go mobile*/
@media(max-width:1023px) {
    #topNavLeft {
        width: 100%;
        text-align: left;
        padding: 1rem 1rem .75rem 2rem;
    }

    #topNavRight {
        width: 0
    }

    #main-navigation {
        display: none;
    }

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

    #mobileOpenClose {
        display: block
    }

    
}

@media(max-width:500px) {
    #topNavContainer img {
        width: 250px;
    }
    #topNavContainer {
        height: 100px;
    }
    #navspacer {
        height: 100px;
    }
}

/*#endregion*/