/*
This css class is dedicated to the main navigation on the site both mobile and main.
This includes when the site switches from the standard navigation to the mobile one
*/
.form {
    padding: 0px 0px 0px;
  }
.form-search-input {
    width: 0px;
    border: 0;
    outline: 0;
    padding: 0px 0px 0px 0px;
    color: black;
    transition: all 0.5s;
}
.search-input-open {
    width: 250px !important;
    padding: 0px 0px 0px 20px !important;
    display: initial !important;
} 
.form-search-submit {
    display: inline-block;
    width: 55px;
    border: 0;
    outline: 0;
    color: white;
    cursor: pointer;
    text-align: center;
}
header a {
    font-weight: 600 !important;
    font-size: 15px !important;
    font-family: Open Sans !important;
    text-transform: uppercase;
}
.nav-image{
    background-image: url("../Assets/Images/Products/newsearchlight/productpage_header.png");
    background-repeat: no-repeat;
    background-position-y: -860px;
    background-size: 100%;
    padding-bottom: 160px;
}
li.dropdown a.btn{
    color: white!important;
}
#desktop{
    display: unset;
}
#mobile{
    display: none;
}
/* Modified scaling for large or zoomed out screens */
/*@media only screen and (min-width:2150px){
    .nav-image{
        background-repeat: no-repeat;
        background-position-y: -1000px;
        background-size: 100%;
        padding-bottom: 160px;
    }
*/
.scaling-test{color:darkgreen;background-color: white;font-size: medium;}

@media only screen and (min-width:2900px){
    .nav-image{
        background-image: none;
    }
}
@media only screen and (max-width:2900px) and (min-width:2800px){
    .nav-image{
        background-position-y: -1350px;
    }
    .scaling-test{
        color:tomato;
        padding-bottom: 160px;
    }
}
@media only screen and (max-width:2800px) and (min-width:2600px){
    .nav-image{
        background-position-y: -1300px;
    }
    .scaling-test{
        color:tomato;
        padding-bottom: 160px;
    }
}
@media only screen and (max-width:2600px) and (min-width:2500px){
    .nav-image{
        background-position-y: -1200px;
    }
    .scaling-test{
        color:tomato;
        padding-bottom: 160px;
    }
}
@media only screen and (max-width:2500px) and (min-width:2430px){
    .nav-image{
        background-position-y: -1150px;
    }
    .scaling-test{
        color:tomato;
        padding-bottom: 160px;
    }
}
@media only screen and (max-width:2430px) and (min-width:2340px){
    .nav-image{
        background-position-y: -1100px;
    }
    .scaling-test{
        color:green;
        padding-bottom: 160px;
    }
}
@media only screen and (max-width:2340px) and (min-width:2230px){
    .nav-image{
        background-position-y: -1050px;
        padding-bottom: 160px;
    }
    .scaling-test{
        color:yellowgreen;
    }
}
@media only screen and (max-width:2229px) and (min-width:2149px){
    .nav-image{
        background-position-y: -1040px;
    }
    .scaling-test{
        color:blue;
    }
}
@media only screen and (max-width:2149px) and (min-width:2050px){
    .nav-image{
        background-position-y: -970px;
        padding-bottom: 160px;
    }
}
@media only screen and (max-width:2049px) and (min-width:1940px){
    .nav-image{
        background-position-y: -920px;
        padding-bottom: 160px;
    }
}
@media only screen and (max-width: 1840px){
    .nav-image{
        background-position-y: -820px;
        padding-bottom: 160px;
    }
}
@media only screen and (max-width: 1760px){
    .nav-image{
        background-position-y: -780px;
        padding-bottom: 160px;
    }
}
@media only screen and (max-width: 1690px){
    .nav-image{
        background-position-y: -740px;
        padding-bottom: 160px;
    }
}
@media only screen and (max-width: 1590px){
    .nav-image{
        background-position-y: -680px;
        padding-bottom: 160px;
    }
}
@media only screen and (max-width: 1500px){
    .nav-image{
        background-position-y: -610px;
        padding-bottom: 160px;
    }
}
@media only screen and (max-width: 1420px){
    .nav-image{
        background-position-y: -560px;
        padding-bottom: 160px;
    }
}
@media only screen and (max-width: 1320px){
    .nav-image{
        background-position-y: -505px;
        padding-bottom: 160px;
    } 
}
@media only screen and (max-width: 1200px){
    .nav-image{
        background-position-y: -430px;
        padding-bottom: 160px;
    }
}
@media only screen and (max-width: 1040px){
    .nav-image{
        background-position-y: -400px;
        padding-bottom: 160px;
    }
}
@media only screen and (max-width: 990px){
    a.btn.mobile-nav-color{
        color: black!important;
    }
    li.dropdown a.btn{
        color: black!important;
    }
    .nav-image{
        background-position-y: -350px;
        padding-bottom: 160px;
    }
    
}
@media only screen and (max-width: 890px){
    .nav-image{
        background-position-y: -280px;
        padding-bottom: 160px;
    }
}
@media only screen and (max-width: 742px){
.nav-image{
    background-position-y: -200px;
    padding-bottom: 160px;
}
}
@media only screen and (max-width: 610px){
    .nav-image{
        background-position-y: -150px;
        padding-bottom: 160px;
    }
}
@media only screen and (max-width: 490px){
    .nav-image{
        background-position-y: -100px;
        padding-bottom: 160px;
    }
}
@media only screen and (max-width: 428px){
    .nav-image{
        background-position-y: -50px;
        padding-bottom: 160px;
    }
}
@media only screen and (max-width: 370px){
    .nav-image{
        background-position-y: -80px;
        padding-bottom: 160px;
    }
    em.secondary-nav{
        font-size: .6em!important;
    }
}
@media only screen and (max-width: 350px){
    .nav-image{
        background-position-y: 0px;
        padding-bottom: 160px;
    }
    em.secondary-nav{
        font-size: .6em!important;
    }
}