/* stylesheet for navigation specific css*/
.headerGrad {
    background: -moz-linear-gradient(0% 0% -27.77deg,rgba(125, 207, 237, 1) 0.09%,rgba(121, 205, 237, 1) 0.81%,rgba(84, 184, 234, 1) 8.61%,rgba(54, 168, 231, 1) 16.78%,rgba(30, 155, 229, 1) 25.32%,rgba(13, 145,
        228, 1) 34.38%,rgba(3, 140, 227, 1) 44.32%,rgba(0, 138, 227, 1) 56.78%,rgba(0, 44, 91, 1) 100%);
    background: -webkit-linear-gradient(-27.77deg, rgba(125, 207, 237, 1) 0.09%, rgba(121, 205, 237, 1) 0.81%, rgba(84, 184, 234, 1) 8.61%, rgba(54, 168, 231, 1) 16.78%, rgba(30, 155, 229, 1) 25.32%, rgba(13, 145,
        228, 1) 34.38%, rgba(3, 140, 227, 1) 44.32%, rgba(0, 138, 227, 1) 56.78%, rgba(0, 44, 91, 1) 100%);
    background: -webkit-gradient(linear,0% 0% ,0.88% -0.47% ,color-stop(0.0009,rgba(125, 207, 237, 1) ),color-stop(0.0081,rgba(121, 205, 237, 1) ),color-stop(0.0861,rgba(84, 184, 234, 1) ),color-stop(0.1678,rgba(54,
        168, 231, 1) ),color-stop(0.2532,rgba(30, 155, 229, 1) ),color-stop(0.3438,rgba(13, 145, 228, 1) ),color-stop(0.4432,rgba(3, 140, 227, 1) ),color-stop(0.5678,rgba(0, 138, 227, 1) ),color-stop(1,rgba(0, 44, 91, 1) ));
    background: -o-linear-gradient(-27.77deg, rgba(125, 207, 237, 1) 0.09%, rgba(121, 205, 237, 1) 0.81%, rgba(84, 184, 234, 1) 8.61%, rgba(54, 168, 231, 1) 16.78%, rgba(30, 155, 229, 1) 25.32%, rgba(13, 145, 228, 1)
        34.38%, rgba(3, 140, 227, 1) 44.32%, rgba(0, 138, 227, 1) 56.78%, rgba(0, 44, 91, 1) 100%);
    background: -ms-linear-gradient(-27.77deg, rgba(125, 207, 237, 1) 0.09%, rgba(121, 205, 237, 1) 0.81%, rgba(84, 184, 234, 1) 8.61%, rgba(54, 168, 231, 1) 16.78%, rgba(30, 155, 229, 1) 25.32%, rgba(13, 145, 228, 1)
        34.38%, rgba(3, 140, 227, 1) 44.32%, rgba(0, 138, 227, 1) 56.78%, rgba(0, 44, 91, 1) 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#7DCFED', endColorstr='#002C5B' ,GradientType=0)";
    background: linear-gradient(117.77deg, rgba(125, 207, 237, 1) 0.09%, rgba(121, 205, 237, 1) 0.81%, rgba(84, 184, 234, 1) 8.61%, rgba(54, 168, 231, 1) 16.78%, rgba(30, 155, 229, 1) 25.32%, rgba(13, 145, 228, 1)
        34.38%, rgba(3, 140, 227, 1) 44.32%, rgba(0, 138, 227, 1) 56.78%, rgba(0, 44, 91, 1) 100%);
    opacity: 0.8;
    filter: alpha(opacity=80) progid:DXImageTransform.Microsoft.Alpha(opacity=80) progid:DXImageTransform.Microsoft.gradient(startColorstr='#7DCFED',endColorstr='#002C5B' , GradientType=1);
}




/* stylesheet for navigation specific css*/

#navTop {
    position: fixed;
    z-index: 50;
    width: 100%;
    top: 0;
    height: 30px;
}
#navTopNavList {
    padding-right: 4%;
}
.navTopListItem {
    display: inline-block;
    height: 100%;
    transition: .3s;
}
.navTopListItem:hover {
    background-color: #595959;
    transition: .3s;
}
.navTopListItemLink {
    display: flex;
    align-items: center;
    padding: 0px 20px;
    color: #A3A3A3 !important;
    height: 100%;
}



#nav {
    width: 100%;
    position: fixed;
    z-index: 50;
    top: 30px; /*compensate for #navTop*/
    left: 0px;
    right: 0px;
    background: url(../images/assets/texture/white_wall_hash.png);
    background-repeat: repeat;
    background-position: center;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    transition: .3s;
    height: 100px;
    border-bottom: solid #d6d6d6 1px;
}

#navLogoWrapper {
    display: none;
    position: absolute;
    left: 8%;
    z-index: 5;
    height: 100%;
}

#navLogoWrapperBig {
    position: absolute;
    left: 4%;
    top: -30px;
    z-index: 5;
}

#navLogoBig {
    max-width: 440px;
    width: 100%;
    display: block;
    transition: .6s;
}

#navLinkWrapper {
    height: 100%;
}

#navLinkListWrapper {
    max-width: 70%;
    margin-right: 3%;
    list-style-type: none;
    transition: .3s;
}

.navLinkListItem {
    height: calc(100% - 4px);
}

.navLinkListItem:hover .navLinkItemInner {
    color: #333;
}

.navLinkListItem:hover .navLinkItemInner:after {
    width: 100%;
}

.navLinkItemInner:after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #333;
    transition: width .3s;
}

.navLinkItemInner {
    display: block;
    width: 100%;
    height: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

.navLink { 
    display: flex;
    align-items: center;
    padding: 27px 30px 23px 30px;
    transition: .3s;
    position: relative;
    z-index: 100;
}
.navLink:hover {
    color: #333;
}



.navDropdownWrapper {
    position: relative;
    background-color: rgba(34, 39, 42, 0);
    transition: .3s;
}
.navDropdownWrapper:hover {
    background-color: transparent;
    transition: .3s;
}
.navDropdownWrapper .navLink:hover {
    color: #333;
}

.navDropdown {
    position: absolute;
    left: 0;
    text-align: left;
    display: inline-block;
    background: url(../images/assets/texture/white_wall_hash.png);
    width: 200px;
    list-style-type: none;
    max-height: 0px;
    overflow: hidden;
    transition: .3s;
}

.navDropdownWrapper:hover .navDropdown {
    background-repeat: repeat;
    background-position: center;
    max-height: 800px;
    padding-bottom: 15px;
    transition: .3s;
    transition-delay: .15s;
    box-shadow: 0px 3px 0px 1px #d6d6d6;
}

.navLinkListItem:hover .navDropdownLink {
    transition: .3s;
}

.navLinkListItem:hover .navBreakerBarWrapper {
    transition: .3s;
}

.navBreakerBar {
    width: 35px;
    height: 2px;
    background-color: #A3A3A3;
    padding-left: 30px;
    transition: .3s;
}

#navServices {
    cursor: default;
}

.navDropdownWrapper .navLinkItemInner:after {
    background-color: transparent;
}

.navDropdownWrapper:hover .navLinkItemInner:after {
    content: '';
    background-color: transparent;
}
.navBreakerBarWrapper {
    height: 2px;
    overflow: hidden;
    margin-bottom: 20px;
}

.navDropdownLink {
    display: block;
    width: 100%;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 15px;
    padding-right: 15px;
}

.navShrink {
    height: 70px !important;
    transition: .3s;
}




@media (max-width: 1800px) {
    #nav {
        height: 70px;
    }
    #navLogoWrapperBig {
        left: 0%;
    }
    #navLogoBig {
        max-width: 335px;
    }

    #navLinkListWrapper {
        max-width: 1199px;
    }
    .navLink {
        padding: 20px 20px 20px 20px;
    }

    .navLinkListItem .navLink {
        padding: 20px 25px 20px 25px;
    }
    .navDropdownLink {
        padding-left: 15px;
        padding-right: 15px;
    }
    .navBreakerBarWrapper {
        max-width: 30px;
        margin: 0 auto 20px auto;
    }
}
@media (max-width: 1600px) {
    #navLogoBig {
        max-width: 300px;
    }
    .navLink:after {
        height: 56px;
    }
    #navLogoWrapper {
        left: 30px;
    }
}

@media (max-width: 1400px) {
    #navLogo {
        max-width: 285px;
        display: block;
    }
    #navLogoBig {
        display: none;
    }
    
    .navLinkListItem .navLink {
        padding: 20px 10px 20px 10px;
    }
}

@media (max-width: 1199px) {
    #navLogo {
        max-width: 240px;
        display: block;
        transition: .3s;
    }
    
    .navLinkItemInner {
        padding-left: 5px;
        padding-right: 5px;
    }
    #navLinkListWrapper {
        margin-right: 0%;
    }
    #navTopNavList {
        padding-right: 0%;
    }
    .navDropdownWrapper:hover .navDropdown {
        padding-bottom: 20px;
    }
    .navLinkListItem .navLink {
        padding: 20px 15px 20px 15px;
    }
}

@media (max-width: 991px) {
    #navTop {
        display: none;
    }
    #nav {
        position: fixed;
        top: 0px;
        height: 82px;
    }
    .navLogoShrink {
        max-width: 185px !important;
        transition: .3s;
    }
    .navShrink {
        height: 60px !important;
        transition: .3s;
    }

    #navLogoWrapper {
        left: 0%;
    }
    #navLogoWrapperBig {
        top: 0px;
    }

    #navLinkWrapper {
        width: 60px;
        margin-left: auto;
    }

    #navLinkListWrapper {
        display: none;
    }

    /* The side navigation menu */
    .sidenav {
        display: block;
        height: 100vh; /* 100% Full-height */
        width: 100%;
        max-width: 500px;
        position: fixed; /* Stay in place */
        z-index: 100; /* Stay on top */
        top: 0;
        right: -500px;
        overflow-x: hidden; /* Disable scroll */
        padding-top: 0px; /* Place content 60px from the top */
        padding-bottom: 50px;
        transition: 0.3s; /* 0.3 second transition effect to slide in the sidenav */
        background: url(../images/assets/texture/white_wall_hash.png);
        background-repeat: repeat;
        background-position: center;
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    }

    /* The navigation menu links */
    .sidenav  .mobileNavLink {
        padding: 30px 25px 30px 75px;
        text-decoration: none;
        transition: 0.3s;
        color: #333;
    }

    .sidenav  .mobileNavLink:hover, .sidenav  .mobileNavLink:hover .cls-1 {
        background-color: #AAD037;
        transition: 0.3s
    }

    /* When you mouse over the navigation links, change their color */
    .sidenav  .mobileNavLink:hover {
        background-color: #efefef;
    }

    /* Position and style the close button (top right corner) */
    .sidenav .closebtn {
        position: absolute;
        top: 25px;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }

    #mobileNavLogo {
        width: 130px;
        height: 59px;
        position: relative;
        top: 0px;
        left: 75px;
        margin-top: 15px;
        margin-bottom: 30px;
    }


    .mobileNavDropdownWrapper {
        height: 100%;
        width: 100%;
        display: block;
        position: absolute;
        top: 50%;
        left: 40%;
        transform: translateY(-50%);
        cursor: pointer;
    }

    .mobileNavDropdownArrow {
        width: 25px;
        height: 14px;
        position: absolute;
        top: 50%;
        left: 10%;
        transform: translateY(-50%);
        cursor: pointer;
        transition: .3s;
    }

    .mobileArrowRotate {
        transform: rotateX(180deg) translateY(50%) !important;
        transition: .3s;
    }

    .mobileNavBreakerBarWrapper {
        height: 2px;
        overflow: hidden;
        margin-bottom: 20px;
        margin-left: 100px;
    }

    .mobileNavBreakerBar {
        width: 35px;
        height: 2px;
        background-color: #A3A3A3;
        padding-left: 30px;
    }

    .mobileNavDropdownLink {
        display: block;
        width: 100%;
        padding-top: 8px;
        padding-bottom: 8px;
        padding-left: 100px;
        padding-right: 35px;
    }

    .mobileNavDropdownLink:hover, .mobileNavDropdownLink:focus {
        color: #333;
    }

    #navWrapper {
        position: absolute;
        z-index: 25;
        width: 100%;
        transition: 0.3s;

    }

    #navHamburgerWrapper {
        display: block;
        cursor: pointer;
        position: relative;
        transition: 0.3s;
        transition: 0.3s;
        height: 60px;
    }

    #navHamburger {
        width: 35px;
        height: 35px;
        margin: 12px 12px;
        margin-left: auto;
        transition: 0.3s;
    }

    #navCloseWrapper {
        padding: 15px 20px;
        cursor: pointer;
        position: absolute;
        right: 0px;
        height: 64px;
    }

    #navClose {
        cursor: pointer;
        width: 35px;
        height: 35px;
    }

    #navContactInfo {
        padding-left: 75px;
        margin-top: 40px;
    }
}

@media (max-width: 767px) {
    .sidenav .mobileNavLink {
        padding: 25px 25px 25px 75px;
    }
}

@media (max-width: 479px) {
    .sidenav .mobileNavLink {
        padding: 15px 25px 15px 35px;
    }

    .mobileNavBreakerBarWrapper {
        margin-left: 50px;
    }

    .mobileNavDropdownLink {
        padding-left: 50px;
    }

    .mobileNavDropdownWrapper {
        left: 50%;
    }

    #mobileNavLogo {
        left: 30px;
    }

    #navContactInfo {
        padding-left: 50px;
    }
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav .mobileNavLink {font-size: 18px;}
}