@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Staatliches|Teko:300|Tulpen+One|Wire+One|Work+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
*{
    margin:0px;
    padding:0px;
    box-sizing: border-box;
}

nav{
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #000;
    font-family: 'Poppins', sans-serif;
}


.nav-links{
    display: flex;
    width:30%;
}
.nav-links li{
    list-style: none;
}

.nav-links{list-style:none;font-size: 20px;margin-bottom: 0;float:left;width:100%;position:relative;z-index:5;border: none;font-family: 'Teko';}
.nav-links li{float:left;margin-right:0px;position:relative;border-top: 1px solid #690000;}
.active {background-image: linear-gradient(#690000, #9b0000 ,#690000);color: white;}
.nav-links a{display:block;padding:15px 20px;color:#ffffff !important;text-decoration:none;line-height: 70px;}
.nav-links a:hover{color:#f1f1f1 !important;background-image: linear-gradient(#690000, #9b0000 ,#690000);text-decoration:none;transition: ease-in .5s;}
/*--- DROPDOWN ---*/
.nav-links ul,ul.nav-links li:hover ul li ul{list-style:none;position:absolute;display: none;}
.nav-links ul li{padding-top: 0px;float:none;}
.nav-links ul a{white-space:nowrap;min-width: 200px;line-height: 20px;}
.nav-links li:hover ul {display: block;left: 0;z-index: 10;}
.nav-links li ul li:hover ul {display: block;top: 0;left:100%;z-index: 10}
.nav-links li:hover a{background:#9b0000 !important;text-decoration:none;}

.nav-links li:hover ul a{ 
      text-decoration:none;
  }
.nav-links li:hover ul li a:hover{ 
      background:#690000 !important;
  box-shadow: 3px 3px 6px #000000 inset;transition: .3s;
  }

.burger{
    display: none;
    cursor: pointer;
}
.burger div{
    width: 25px;
    height: 3px;
    background-color:#f1f1f1;
    margin:5px;
    transition: all 0.3s ease;
}



/*Mobile & Tablet zone*/
@media screen and (max-width:1024px){

    .email-form,.d{display: none;}
    body{overflow-x: hidden;}

    .logo{width:60%;height:50px;background: #000;text-align: left;position: relative;}
    .logo img{width:auto;height:100%;padding:0px;margin: 0;position: absolute;left: 0;top: 0;;}
    .nav-links{position: absolute;right: 0px;height: auto;top:50px;background-color:#9b0000;display: flex;flex-direction: column;align-items: center;width:100%;transform: translateX(100%);transition: transform 0.5s ease-in;}
    .nav-links li{opacity: 0;width:100%;}
    .nav-links a{padding:0 20px;line-height: 50px;}
    .burger{display: block;}

    .w3-display-container{width:200%;min-height:50vh;max-height: 50vh;transform: translateX(-25%);}
    .mySlides {display:none;width:auto;margin:0;padding:0;height:50vh;margin-top:0%;object-fit: cover;overflow: hidden;}
   
    .content{width:100%;margin:0;padding:5px;min-height: 60vh;}
    .content h1{font-size:20px;}
    .content p{font-size:12px}
   
    .img-with-border{width:100%;height: auto;}
    
    .content .tables{text-align: center;margin: 0;padding:0;width:100%; }
    .content .tables .spray-table{width:100%;margin:0%;table-layout: fixed;display: inline-block;border:none;border-radius:5px;padding:0px;border-collapse: collapse;box-shadow: 4px 4px 8px rgba(0, 0, 0, .7);}
    .content .tables .spray-table th{background:#9b0000;padding:5px;font-size: .7em;font-family: 'Staatliches', cursive;}
    .content .tables .spray-table td{ width: 20%;padding: 3px;text-align: left;background:#ddd;color:#000;border-bottom:1px solid #ccc;font-size: 16px;}
    .content .tables .spray-table tr{width:100%;}
    .content .tables .spray-table tr:hover{opacity: .8;}
    .content .tables img{margin:50px 100px; box-shadow: 4px 4px 8px rgba(0, 0, 0, .7);border:2px ridge #000;}
    .content .tables .spray-table .thtr:hover{opacity: 1}
  
    .g-container{width:100%;padding:5% 0% 5% 0%;text-align: justify;-webkit-column-count: 1;-webkit-column-gap:10px;-moz-column-count:1;-moz-column-gap:10px;column-count:1;column-gap:10px;}


    .left-div{width:100%;display: block;text-align: left;padding:5px;min-height: auto;background: rgba(0, 0, 0, .7);}
    .left-div a{text-decoration: none;color:#ccc;padding:0px 6px;}
    .left-div a:hover{text-decoration: none;color:#9b0000;}
    .right-div{width:100%;display: block;text-align: center;vertical-align: top; padding:5px;min-height: 40vh;background: rgba(0, 0, 0, .7);}
    .right-div .email-form{display: block;text-align: center;width: 100%;}    
  
    .gmap{width: 100%;text-align: center; overflow:hidden;padding-bottom:56.25%;position:relative;height:0;}
    .m{display: block;left:0;top:0;height:100%;width:100%;position:absolute;}
    .srv{display: block;width:100%;margin: 30px 0px;}
    .srv-item{width:100%;text-align: left;padding:0 0 0 30px;}
    .srv-item h4{color: #ffffff;margin:0;padding:0;font-family: 'Open Sans Condensed', sans-serif;display: inline-block;font-size:16px;vertical-align: top;transform: translateY(30px);}
    .imgbtn{width:75px;height:75px;border: 2px ridge #9b0000;border-radius: 50%;background:#000;opacity: .9  ;padding:0;margin:0;  box-shadow: 2px 2px 20px rgba(200, 0, 0, .7);display: inline-block;}
    
    .footer{width:100%;margin:0;background:#000;border-top:1px solid #3f3f3f;color:#f1f1f1;padding:5%;font-family: 'Open Sans Condensed', sans-serif;font-size: 1em;text-shadow: 2px 2px 4px rgba(0,0,0,0.5);text-align: center;}
    .contact-info{width:100%;display: inline-block;text-align: left;padding-left:0%;vertical-align: top;}
    .contact-info p{font-size: 14px;}

    .box{width:70%;margin:0% 15%;background:#555;border: 1px solid #777;border-radius: 10px;padding:20px;text-align: center;}
    .box-btn{padding:5px 10px;border-radius: 5px;background-image: linear-gradient(#690000, #9b0000 ,#690000);border:1px ridge #1f1f1f;margin:0;color:#fff;display: inline-block;vertical-align: middle;}
    .box-btn:hover{opacity: .8;cursor: pointer;}
    .box-btn a{text-decoration: none;color: #fff;font-weight: bold;}
    .box-h2{display: inline-block;font-size: larger;}
    .specials-img{display: none;}

}





















.nav-active{
    transform: translateX(0%);
}

@keyframes navLinkFade{
    from{
        opacity: 0;
        transform: translateX(50px);
    }
    to{
        opacity: 1;
        transform: translateX(0px);
    }
}

.toggle .line1{
    transform: rotate(-45deg) translate(-5px,6px);
}
.toggle .line2{
    opacity: 0;
}
.toggle .line3{
    transform: rotate(45deg) translate(-5px,-6px);
}