.padding-lr{
    padding-right: 20px;
    padding-left: 20px;
}


/***********************************/
/*HEADER
/***********************************/
.header-top{
    padding: 0 15px;
}
.email-social{
    margin-left: 15px;
}
.email-social a{
    color: #000;
    margin: 0 10px;
}

.header-top-right a{
    color: #000;
    text-decoration: none;
    display: inline-block;
    padding: 9px 0 9px;
}

.header-bottom-menu li{
    white-space: nowrap;
    text-align: center;
}

.header-bottom-menu li a{
    text-decoration: none;
    color: #000;
    display: block;
    background: #ebebeb;
    padding: 10px;
    font-weight: bold;
}
/* change for quick deals */
.header-bottom-menu li .quickdeal{
    background: #CB0000 !important;
    color: #fff !important;
}

.header-bottom-menu li a:hover{
    color: #fff;
   background: #CB0000;
}
.header-bottom-menu li .quickdeal:hover{
   background: #ebebeb !important;
   color: #000 !important;
}


/**************************
 * HOME PAGE
 * ***************************/

.section-hero{
    padding: 50px 7px;
}


.section-hero-updated{
    padding: 0 7px 30px 7px;
}
.img-border a{
    display: block;
    height: 100%;
    text-decoration: none;
    color: #fff;        
    box-shadow: 0 0 0 1px transparent;
}

#alt-caption{
    position: relative; 
    bottom: -8px;
}

.top-two-div-wrap {
    display: grid;
    grid-template-columns: 100%;
/* 
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    grid-gap: 15px;
     */
}


.grid-wrap{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    grid-gap: 15px;
}

.grid-wrap-l3{
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}

.img-border img{
    display: inline-block;
    mix-blend-mode: darken;
}

.img-border h4{
    background: #2D7854;
    color: #fff;
    text-transform: uppercase; 
    margin: 0;
    padding: 10px;
}   

.img-border a:hover h4,
.img-border h4:hover{
    background: #cb0000;
    color: #fff;
}

.img-border a:hover{
    box-shadow: 0 0 0 1px #cb0000;
}

.double-span{
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
}


.section-rackings-updated{
    padding: 35px 15px 0; 
}


.section-rackings{
    padding: 60px 15px 0; 
}

.s-img-div{
    width: 100%;
}


.header-notice a{
    background: #cb0000;
    color: #ffffff;
    padding: 10px;
    font-weight: 300;
    text-decoration: none;        
    display: block;
    text-align: center;
}

/*ABOUT US*/
.about-us{
    padding: 20px;
    display: grid;
    grid-gap: 25px;    
}


.about-us h1{
    font-weight: 500;
}
.about-us h2{
    margin-top: 30px;
    font-weight: 500;
    margin-bottom: 5px;
}

.side-bar .img-border{
    max-width: 460px;
    margin: auto;
}


/**********************
 * QUOTES AND SITE VISIT
 * *********************/
.site-visits-form{
    margin: 20px 0 50px ;
    grid-gap: 20px;
}


.site-visits-form,
.form-submit,
.captcha{
    display: grid;
    
}

.form-submit{
    margin-top: 25px;
}

.captcha input[type="text"]{
    display: block; 
    width: 100%;
    border-radius: 48px;
    height: 30px;
    border: 1px solid #D1D1D1;
    padding: 2px;
    font-size: .7rem;
    text-align: center;
}

.form-submit,
.captcha{
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
    align-items: center;
    justify-content: center;
}

.form-inputs label{
    display: block;
    font-weight: 600;
}

.form-inputs input[type="text"],
.form-inputs input[type="email"]{
    display: block;    
    width: 100%;
    border: 1px solid #D1D1D1;
    padding: 0 15px;
    border-radius: 48px;
    height: 50px;
}

.form-inputs input[type="text"]:focus,
.form-inputs input[type="email"]:focus{
    border: 1px solid #e3e3e3;
}

.form-submit button[type="submit"] {
    background: #CB0000;
    display: block;    
    width: 100%;
    border-radius: 48px;
    height: 50px;
    text-transform: uppercase;
}

/***************************
 * CATALOGUES
 **************************/
.catalogues h3{
    color: #000;
    font-weight: 600;
}
 .catalogues-top{
     display: grid;
     align-items: center;
     justify-content: center;
     grid-gap: 20px;    
 }

.sorter{
    transform: translateX(15%);
 }
 .sorter label{
    font-weight: 600;
 }
 .sorter select{
    display: inline-block;    
    width: 70%;
    border: 1px solid #D1D1D1;
    padding: 0 15px;
    border-radius: 48px;
    height: 50px;
 }

 .catalogues a{
    display: block;
    border: 1px solid #d1d1d1;
    text-align: center;
 } 

   
 .spotlightImageUpdated {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

 .catalogues img{
    display: inline-block;
    margin: 20px auto;
 }

 .grid3-wrap{
    display: grid;
    align-items: center;
    justify-content: center;
    grid-gap: 20px;
 }



 .top-title-icons{
     display: grid;
     align-items: center;
     justify-content: center; 
     grid-gap: 20px;
     margin-bottom: 40px;
 } 

 .top-title-icons h2{
     font-weight: 600;
 }

.left-scroll-box{
    width: 98%;
}

.leftTextBoxForProduts {
    width: 60%;
}

.top-title-icons .hero-icons{
    display: grid;
    align-items: center;
    justify-content: center; 
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    text-align: center;
    border: 1px solid #D1D1D1;
    background: #f4f4f4;
    padding: 15px;
    height: 198px;
}

.top-title-icons .hero-icons h4{
    font-weight: 600;
    margin-top: 8px;
}


@media screen and (min-width: 768px){
    .header-bottom-menu{
         display: grid!important;
         grid-template-columns: repeat(7, 1fr);
         align-items: center;
         justify-content: center;
         font-size: 0.9rem;  
     }

    /*
        .good-to-talk,
        .phone
    */
    
    .email-social
    {
        margin-left: 15px;
    }

     .about-us{
        grid-template-columns: 2fr 1fr;
        
    }

    .site-visits-form{
        grid-template-columns: repeat(2, 1fr);
    }

    .catalogues-top{
        grid-template-columns: 2fr 1fr;
    }

     .grid3-wrap{
         grid-template-columns: repeat(2, 1fr);
     }

     .top-title-icons{
        grid-template-columns: 1fr 2fr;
        
     }
}



@media screen  and (min-width: 868px){

.top-two-div-wrap {
   
    grid-template-columns: 50% 50%;
    grid-gap: 15px;
    padding-right: 15px;
}
}

@media screen  and (min-width: 992px){
 .header-bottom-menu a{
     font-size: 1.2rem;
 }
}

@media screen and (min-width: 1080px){
 .grid3-wrap{
     grid-template-columns: repeat(3, 1fr);
 }

 .about-us{
     grid-template-columns: 3fr 1fr;
 }

    .good-to-talk,
    .email-social,
    .phone{
        margin-left: 15px;
    }

    .good-to-talk,
    .email-social,
    .phone{
        margin-left: 15px;
    }
}

@media screen  and (max-width: 868px){
    .mr-bottom {
        margin-bottom: 16px;
    }
}

@media screen  and (max-width: 767px){
     .header-bottom-menu{
         display: none;          
     }
}

@media screen and (max-width: 640px) {
    .grid-wrap{
      grid-template-columns: 100%;
    }

    .double-span{
      grid-column: inherit;
      grid-row: inherit;
    }

}

@media screen and (max-width: 376px){
    video{
        width: 50%;
    }

    .spotlightVideo {
        width: 100%!important;
    }
}

@media screen and (max-width: 388px){
    video{
        width:50%;
    }
}

@media screen and (max-width: 393px){
    video{
        width:50%;
    }

    .spotlightVideo {
        width: 100%!important;
    }
}

@media screen and (max-width: 412px){
    video{
        width:100%;
    }

    .spotlightVideo {
        width: 100%!important;
    }
}

@media screen and (max-width: 416px){
    video{
        width:100.1%;
    }

    .dummy-text{
        font-size: 13px;
    }

    .spotlightVideo {
        width: 100%!important;
    }

    .section-hero,.section-hero-update {
        padding: 20px 7px;
    }

    
  
  
    .spotlightVideo {
        width: 100%!important;
    }
}

@media screen and (min-width:535px) and (max-width:555px){
    .spotlightVideo {
        width: 100%!important;
    }
}



@media screen and (min-width:640px) and (max-width:666px){
    .s-img-div{
     height: 83%;
     
    }
    .s-img-h{
     height: 17%;
    }
 }

 
@media screen and (min-width:661px) and (max-width:716px){
    .s-img-div{
     height: 84%;
     
    }
    .s-img-h{
     height: 16%;
    }
 }


 
@media screen and (min-width:717px) and (max-width:867px){
    .s-img-div{
     height: 85%;
     
    }
    .s-img-h{
     height: 15%;
    }
 }




@media screen and (min-width:765px) and (max-width:822px){
    .racking-box{
        height: 625px;
    }

    .section-hero, .section-hero-update {
        padding: 4px 7px;
    }

    .spotlightVideo {
        margin-top: -128px;
    }

}

/* 
@media screen and (min-width:867px) and (max-width:868x){
    .img-div{
        height: 84%;
    }
    
 } */
 



 @media screen and (min-width:868px) and (max-width:868px){
    .img-div-1{
        height: 92%;
    }
    
 }


@media screen and (min-width:868px) and (max-width:910px){
    .img-div{
        height: 88%;
    }
    
 }



@media screen and (min-width:868px) and (max-width:900px){
    .s-img-div{
     height: 80%;
     
    }
    .s-img-h{
     height: 20%;
    }
 }

 
 
@media screen and (min-width:901px) and (max-width:1050px){
    .s-img-div{
     height: 81%;
     
    }
    .s-img-h{
     height: 19%;
    }
 }
 
 
@media screen and (min-width:911px) and (max-width:1044px){
    .img-div{
        height: 88.5%;
    }
    
 }

 @media screen and (min-width:1045px) and (max-width:1083px){
    .img-div{
        height: 89%;
    }
    
 }

 
 @media screen and (min-width:1084px) and (max-width:1150px){
    .img-div{
        height: 89.5%;
    }
    
 }



 
@media screen and (min-width:1051px) and (max-width:1203px){
    .s-img-div{
     height: 82%;
     
    }
    .s-img-h{
     height: 18%;
    }
 }
 

@media screen and (min-width:1151px) and (max-width:1264px){
    .img-div{
        height: 90.5%;
    }
    
 } 


 
@media screen and (min-width:1265px) and (max-width:1365px){
    .img-div{
        height: 91%;
    }
    
 }
 
@media screen and (min-width:1204px) and (max-width:1281px){
    .s-img-div{
     height: 79%;
     
    }
    .s-img-h{
     height: 21%;
    }
 }

 
@media screen and (min-width:1282px){
    .s-img-div{
     height: 81%;
     
    }
    .s-img-h{
     height: 19%;
    }
 }


@media screen and (min-width:1366px){
    .img-div{
        height: 91.5%;
    }
    
 }

@media screen and (max-width:822px){
    .playPauseContainer{
        display:none!important;
    }
}

@media screen and (min-width: 768px){
    video{
        width:38%;
    }

    .video-width{
        width:80% !important;
    }

    .dummy-text{
        width: 100%;
        background-color: #2D7854;
        margin-left: 3px;
    }

    .video-container{
        position: relative;
    }

    .video-container h4{
        position: absolute;
        bottom: 0px;
        width: 100%;
    } 

    .cycle-slideshow{
        position: absolute;
        bottom: 52px;
        text-align: initial!important;
        display: flex;
    }

    .playPauseContainer{
        position: absolute;
        top: 2%;
        left: 11%;
    }
}

    .dummy-text li{
        list-style: disc;
        text-align: left;
        margin-left: 30px;
        color: #000000;
    }

    .video-container-updated{
        background: #ffffff;

    }

    .video-container{
        background: #ffffff;
    }


  
    .spotlightImage {
        width: 67%;
        margin-right: auto;
        margin-left: auto;
    }

    .spotlightVideo {
        width: 100%;
        margin-right: auto;
        margin-left: auto;
    }

    .playPauseContainer img{
        width: 18%;
    }

    .show{
        display: block;
    }

    .hide{
        display: none!important;
    }

    .disable-pointer-click{
        pointer-events: none;
    }