#product-banner{   background: url(../images/beverage-banner.png) center top no-repeat;  height: 420px;margin-top:0%; position: relative;    background-size: cover;}

/* #product-banner:hover{background: url(../images/beverage-banner-blk.png) center top no-repeat; background-size: cover;}
*/
#product-banner  .chevron {  position: absolute; width: 10px; height: 2px; opacity: 0; transform: scale3d(0.5, 0.5, 0.5);  animation: move 3s ease-out infinite;}

 #product-banner .chevron:first-child {  animation: move 3s ease-out 1s infinite;}

.chevron:nth-child(2) { animation: move 3s ease-out 2s infinite;}

 #product-banner .chevron:before, #product-banner .chevron:after {  content: ' '; position: absolute; top: 0; height: 100%; width: 51%;  background: #fff;}

 #product-banner .chevron:before {  left: 0; transform: skew(0deg, 30deg);}

 #product-banner .chevron:after { right: 0; width: 50%;  transform: skew(0deg, -30deg);}


@keyframes move {

  25% {

    opacity: 1;
  }

  33% {

    opacity: 1;

    transform: translateY(30px);

  }

  67% {

    opacity: 1;

    transform: translateY(40px);

  }

  100% {

    opacity: 0;

    transform: translateY(55px) scale3d(0.5, 0.5, 0.5);

  }

}


@keyframes pulse {

  to {

    opacity: 1;

  }

}



#product-banner .container-fluid{width: 80%;}

#product-banner h2{color: white!important; margin-top: 150px; font-weight: 400;    font-size: 2em; margin-bottom: 20px}

#content .bord h2 strong{font-weight: 800;}

#product-banner p{color: white!important;width: 35%!important;line-height: 1.4!important;        font-size: 14px;  border-bottom: 2px solid #00a94f; padding-bottom: 10px;}

#product-banner p:after{ content: "";position: absolute;  top: 223px;  left: 35%;  width: 20px;  height: 20px; background: #fff; right: 0px;  border-radius: 50px;}

#product-banner .line{width: 34%;height: 2px;background: #00a94f;   margin-bottom: 15px;margin-top: 15px; display: none;}

#content .container-fluid{width:75%;background: #ffffff87; padding: 50px; border: 1px solid #cccccc}

#content{padding-top: 0px;padding-bottom: 100px; background: #f6f6f6;}

#content h4{text-align: center;color: #1f1d1d; margin-top: 20px;    font-weight: 400; text-transform: capitalize;}

#content .top h4{text-align: left;color: #1f1d1d; margin-top: 20px;    margin-bottom: 20px; font-size: 1.5em;  font-weight: 500; text-transform: uppercase;}

#content .top{    margin-top: 50px;}

.read-more-state { display: none;}

.read-more-target { opacity: 0; max-height: 0; font-size: 0; transition: .25s ease;}

.read-more-state:checked ~ .read-more-wrap .read-more-target { opacity: 1; font-size: inherit; max-height: 999em;}

.read-more-state ~ .read-more-trigger:before {
  content: 'Show more';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Show less';
}

.read-more-trigger { cursor: pointer; display: inline-block; padding: 0 .5em; color: #666; font-size: .9em; line-height: 2; border: 5px solid #00a94f; border-radius: .25em; margin-bottom: -2px;}

.snip1305 { position: relative; overflow: hidden;  width: 100%; color: #000000; text-align: center;}

.snip1305 * { -webkit-box-sizing: border-box;  box-sizing: border-box; -webkit-transition: all 0.6s ease; transition: all 0.6s ease;}

.snip1305 img { opacity: 1; width: 100%;}

.snip1305:after, .snip1305:before { background: #000; width: 0; height: 0;  position: absolute; content: ''; opacity: 0.5; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; z-index: 1;}

.snip1305:after { top: 0; left: 0;}

.snip1305:before { right: 0; bottom: 0;}

.snip1305 figcaption {  position: absolute;  top: 40%; left: 0;  width: 100%;  -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 2;}

.snip1305 h2, .snip1305 p { margin: 0; width: 100%; opacity: 0;}

.snip1305 p { padding:5px;  font-size: 13px!important;text-align: center!important;  margin-top: 0px!important; background: #00a94f;  width: 50%; margin: auto; color: white!important;}

.snip1305 a{color: white;text-decoration: none!important;}

.snip1305 a {  left: 0;  right: 0;  top: 0;  bottom: 0;  position: absolute; z-index: 2;}

.snip1305:hover img,

.snip1305.hover img { -webkit-filter: grayscale(100%); filter: grayscale(100%);}

.snip1305:hover:after, .snip1305.hover:after, .snip1305:hover:before, .snip1305.hover:before {  width: 100%; height: 100%;}

.snip1305:hover figcaption h2, .snip1305.hover figcaption h2, .snip1305:hover figcaption p, .snip1305.hover figcaption p { -webkit-transition-delay: 0.2s; transition-delay: 0.2s;}

.snip1305:hover figcaption h2, .snip1305.hover figcaption h2 { opacity: 1;}

.snip1305:hover figcaption p,

.snip1305.hover figcaption p { opacity:1; }

#top .container-fluid{width: 75%;}

#top .pro-w {width: 80%; float: left; margin-top: 20px;}
#top .pro-w a{margin-right: 8px}
#top .pro-w a.r-d-j{margin-left: 8px}
#top .pro-arr {width: 20%; float: right; margin-top:8px;}

#top .pro-arr .left-ar{background: url(../images/arw-lft.png)center top no-repeat;    width: 15px; height: 30px; float: right; background-size: cover;    margin-right: 20px;}

#top .pro-arr .riht-ar{background: url(../images/arw-rgt.png)center top no-repeat;   width: 15px; height: 30px;  float: right; background-size: cover;}

#top .pro-arr .left-ar:hover{background: url(../images/arw-rgt-1.png)center top no-repeat; width: 15px;height: 30px;background-size: cover;}

#top .pro-arr .riht-ar:hover{background: url(../images/arw-lft-1.png)center top no-repeat; width: 15px;height: 30px;background-size: cover;}

#top{ background: #f6f6f6;color:#00a94f;; padding-top: 40px;padding-bottom: 20px}

#top img{ float: right; margin: 0px 10px}

.fis{width: 100%;border-radius: 20px;    height: 400px!important;}

.scr-ll{ height: 400px!important; overflow-y:scroll; }

#content h6{  margin-top: 15px;  font-weight: 500; font-size: 1.1em; text-align: left;  color: #1f1d1d;line-height: 1.4;margin-bottom: 15px; }

#content button.bo-sx-g{ border: 1px solid #e2e2e2; padding: 12px 20px; color: #252525;  margin: 0px 10px 10px 0px; background: transparent; border-radius: 10px }

#content button.bo-sx-g:hover{ border: 1px solid #00a94f; color: #ffffff; background: #00a94f; }

#content  h2{ text-align: left;color: #1f1d1d; margin-top: 20px;  font-weight: 500; text-transform: capitalize; font-size: 2em;    margin-bottom: 26px;}

#content  h2 strong{ text-transform: capitalize; font-weight: 600; font-size: 1em;  padding: 0px;  border-radius: 10px 1px 10px 10px;}

#content  p{  font-weight: 400!important; line-height: 28px;  font-size: 14px;  margin-top: 10px; text-align: justify;}

#content { }

#top a{color:#1f1d1d ;text-decoration: none;    font-weight: 400;font-size: 1em;}

#top a:hover{color: #00a94f;}

#top .active{color: #00a94f; background-color:transparent;}

/* Style the tab */
.tab { border: 0px solid #ccc; background-color: transparent; box-shadow: 0 0rem 0rem #00000080;padding: 0px;    width: 24%; float: left;margin-top: 0%;}

/* Style the buttons inside the tab */
.tab button { display: inherit; background: rgba(27, 31, 43, 0.8); border: 2px solid rgba(224,232,240,.3); border-radius: 5px;  color: #fff; padding: 15px 15px 15px 50px; width: 100%;  position: relative; outline: none;  text-align: left; cursor: pointer; transition: 0.3s; font-size: 18px;    margin-bottom: 10px; font-weight: 500;    font-family: 'Open Sans', sans-serif!important;}

/* Change background color of buttons on hover */
.tab button:hover { background-color: #00a94f;}

/* Create an active/current "tab button" class */
.tab button.active { background-color: #00a94f; margin-bottom: 0px;  border-bottom: 0px solid rgba(224,232,240,.3); border-radius: 5px 5px 0px 0px;}

.tab .tablinks:before{    content: "";  width: 12px;  height: 2px; position: absolute;  top: 27px;  left: 25px; background: #fff;}

.tab .tablinks:after{    content: ""; width: 2px;  height: 12px; position: absolute; top: 22px;  left: 30px;  background: #fff;}

.tab .tablinks.active:before{width: 12px; height: 2px;}

.tab .tablinks.active:after{width: 0px; height: 0px;}

.tab .tablinks.remove{background-color: #00a94f;}

.tab .tablinks.remove:before{width: 0px; height:0px;}

.tab .tablinks.remove:after{width: 0px; height: 0px;}

.tab .tablinks.add{background-color: #00a94f;}

.tab .tablinks.add:hover{background-color:  rgba(27, 31, 43, 0.8);}

/* Style the tab content */
.tabcontent {width: 100%; padding: 0px 0px; border: 2px solid rgba(224,232,240,.3); overflow-y: scroll; border-left: none;border-radius: 5px; height: 200px;margin-bottom: 10px;background: #27282b;border-top: 0px solid rgba(224,232,240,.3);border-radius: 0px 0px 5px 5px ;
}
.tabcontent ul{list-style-type: none; padding: 0px; margin-bottom: 0px;}

.tabcontent ul li {    display: block; padding: 15px 15px 15px 50px; font-size: 16px; color: rgba(175,190,209,.8); line-height: 18px; position: relative; cursor: pointer;  font-family: 'Open Sans', sans-serif!important;}

.tabcontent ul li:hover{ background-color: #41434a; color: #fff;}

.tabcontent ul li a{  color: rgba(175,190,209,.8) !important }

.tabcontent ul li.active a{  color: #fff!important }

.tabcontent ul li.active{ background-color: #41434a!important;color: #fff!important; }

.tabcontent::-webkit-scrollbar {  width: .2em;}
 
.tabcontent::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);}
 
.tabcontent::-webkit-scrollbar-thumb { background-color: #fff; outline: 1px solid slategrey; border-radius: 50px}

.quick{float: left;width: 70%; margin-left: 40px;position: relative;}

.quick .enq{float: left;width:77%;}

.quick h3{margin-top: 0px; border-left: 5px solid #00a94f;     padding: 10px; padding-left: 20px; color: #191919; font-weight: 500; margin-bottom: 15px; float: left;width:77%;}

.quick input {  width: 100%;  border: solid #cbd7de 1px;  border-radius: 4px; padding: 10px;  margin-bottom: 5px; margin-top: 5px;}

.quick textarea { width: 100%; border: solid #cbd7de 1px; border-radius: 4px; padding: 10px; margin-bottom: 20px; margin-top: 5px;height: 100px;}

.quick .btn-default {    position: absolute;color: #fff; background-color: #00a94f; border-color: #00a94f;     top: 300px;   right: 3%;}

.quick .btn {  display: inline-block; padding: 10px 25px; margin-bottom: 0; font-size: 17px; font-weight: normal; line-height: 1.42857143; text-align: center;  white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent;  border-radius: 4px; font-family: 'Open Sans', sans-serif!important;}

.quick .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {  color: #fff;  background-color: #05793b;  border-color: #05793b;}


#myImg {/* filter: url(filters.svg#grayscale); Firefox 3.5+  filter: gray;  IE5+  -webkit-filter: grayscale(1);  Webkit Nightlies & Chrome Canary */  -webkit-transition: all .8s ease-in-out;  }

.crosshair {}

#myImg:hover {filter: none;   -webkit-filter: grayscale(0);  -webkit-transform: scale(1.01);cursor: crosshair;}

/* The Modal (background) */
.modal {  display: none; /* Hidden by default */ position: fixed; /* Stay in place */  z-index: 1; /* Sit on top */  padding-top: 60px; /* Location of the box */  left: 0;  top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */}
/* Modal Content (image) */

.modal-content { margin: auto; display: block;  width: 100%; max-width: 900px;}

/* Caption of Modal Image */
#caption { margin: auto;  display: block; width: 80%;  max-width: 700px; text-align: center; color: #ccc;  padding: 10px 0;  height: 150px;}

/* Add Animation */
.modal-content, #caption {   -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s;    height: 540px; background: transparent;}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.modal .close {  position: absolute;  top: 55px; right: 240px;  color: #00a94f!important;  font-weight: bold;  transition: 0.3s;font-size: 50px!important;  opacity: 1;  z-index: 9;}

.modal .close:hover, .modal .close:focus {  color: #bbb; text-decoration: none;  cursor: pointer;}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}


.mySlides {display: none}

img {vertical-align: middle;   }


/* Slideshow container */
.slideshow-container { max-width: 1000px; position: relative;  margin: auto;}

/* Next & previous buttons */
.prev, .next { cursor: pointer;  position: absolute; top: 96%!important;  width: auto; padding: 8px; margin-top: -22px; color: #ccc!important; font-weight: 400; font-size: 22px!important; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none;}

/* Position the "next button" to the right */
.next { right: 0; border-radius: 3px 0 0 3px;}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {  color: #00a94f!important;}

/* Caption text */
.text { color: #f2f2f2; font-size: 15px; padding: 8px 12px;  position: absolute; bottom: 8px;  width: 100%; text-align: center;}

/* Number text (1/3 etc) */
.numbertext { color: #f2f2f2;  font-size: 12px;  padding: 8px 12px; position: absolute; top: 0;}

/* The dots/bullets/indicators */
.dot { cursor: pointer;  height: 10px;  width: 10px;  margin: 0 2px; background-color: #bbb;  border-radius: 50%;  display: inline-block;  transition: background-color 0.6s ease;}

.dood .active, .dot:hover {  background-color: #00a94f;}

/* Fading animation */
.fade {  -webkit-animation-name: fade;  -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s;opacity: 1;}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}


/*imlZFX*/
.mySlides .modal {z-index:1; display:none;padding-top:10px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.8)}

.mySlides .modal-content{margin: auto;display: block;  position: absolute; top: 50%; left: 50%;  transform: translate(-50%, -50%);}


.mySlides .modal-hover-opacity {opacity:1;filter:alpha(opacity=100);-webkit-backface-visibility:hidden}

.mySlides .modal-hover-opacity:hover {opacity:0.80;filter:alpha(opacity=60);-webkit-backface-visibility:hidden}

.mySlides .close {text-decoration:none;float:right;font-size:24px;font-weight:bold;color:white}

.mySlides .modal-content, #caption {    -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s;  animation-name: zoom;   animation-duration: 0.6s;}


@-webkit-keyframes zoom {
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}










.button { font-size: 1em; padding: 10px; color: #fff; border: 2px solid #06D85F;  border-radius: 20px/50px; text-decoration: none; cursor: pointer;  transition: all 0.3s ease-out;}

.button:hover {  background: #06D85F;}

.overlay {-webkit-animation-name: fade; -webkit-animation-duration: 1.5s;  animation-name: fade;  animation-duration: 1.5s;}

.overlay {  position: fixed;  top: 0;  bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms;visibility: hidden; opacity: 0;    z-index: 999;width: 100%;  height: 100%;}

.overlay:target { visibility: visible; opacity: 1;-webkit-animation-name: fade; -webkit-animation-duration: 1.5s; animation-name: fade; animation-duration: 1.5s;}

.popup { margin: 70px auto; padding: 20px; background: #fff; border-radius: 5px; width: 30%; position: relative; transition: all 5s ease-in-out;  -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom;   animation-duration: 0.6s;}

.popup h2 { margin-top: 0; color: #333; font-family: Tahoma, Arial, sans-serif;}

.popup .close {  position: absolute; top: 20px!important; right: 30px; transition: all 200ms;  font-size: 30px!important; font-weight: bold; text-decoration: none;  color: #333!important;  margin-top: 0px!important; opacity: .5;}

.popup .close:hover { color: #06D85F;}

.popup .content { max-height: 30%;  overflow: auto;}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}










.modal-container { margin: 60px auto; padding-top: 0px; position: relative; width: 160px; }

.modal-container .modal-btn { display: block; margin: 0 auto; color: #fff; width: 160px; height: 50px; line-height: 50px; background: #446CB3; font-size: 22px; border: 0;border-radius: 3px; cursor: pointer; text-align: center; box-shadow: 0 5px 5px -5px #333; transition: background 0.3s ease-in;}

.modal-container .modal-btn:hover {background: #365690;}

.modal-container .modal-content,.modal-container .modal-backdrop { height: 0; width: 0; opacity: 0;  visibility: hidden; overflow: hidden; cursor: pointer;  transition: opacity 0.2s ease-in;}

.modal-container .modal-close {  color: #aaa;  position: absolute; right: 5px;  top: 5px; padding-top: 3px; background: #fff; font-size: 16px;  width: 25px;  height: 25px;  font-weight: bold;  text-align: center;  cursor: pointer;}

.modal-container .modal-close:hover {  color: #333;}

.modal-container .modal-content-btn { position: absolute; text-align: center; cursor: pointer; bottom: 20px; right: 30px; background: #446CB3;  color: #fff; width: 50px;  border-radius: 2px; font-size: 14px;  height: 32px;  padding-top: 9px; font-weight: normal;}

.modal-container .modal-content-btn:hover { color: #fff; background: #365690;}

.modal-container #modal-toggle { display: none;}

.modal-container #modal-toggle.active ~ .modal-backdrop, .modal-container #modal-toggle:checked ~ .modal-backdrop { background-color: rgba(0, 0, 0, 0.6); width: 100vw;  height: 100vh; position: fixed; left: 0; top: 0; z-index: 9; visibility: visible; opacity: 1; transition: opacity 0.2s ease-in;}

.modal-container #modal-toggle.active ~ .modal-content, .modal-container #modal-toggle:checked ~ .modal-content { opacity: 1; background-color: #fff; max-width: 400px; width: 400px; height: 280px; padding: 10px 30px; position: fixed; left: calc(50% - 200px);top: 12%;border-radius: 4px;  z-index: 999; pointer-events: auto; cursor: auto;  visibility: visible; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6);}

@media (max-width: 400px) {
  .modal-container #modal-toggle.active ~ .modal-content, .modal-container #modal-toggle:checked ~ .modal-content {
    left: 0;
  }
}


/*Image gallery*/
#img-gallery{width: 65%;  float: left;     margin-left: 25px;  margin-bottom: 60px;}

#img-gallery .container{width: 100%; max-width: 100%; padding: 0;}

#img-gallery .scr-ll{height: 140px !important;}

.magnific-img{position: relative;}

.magnific-img img { transition: all .2s ease; }

 img.mfp-img {   border-radius: 20px 0px 0px 20px;}

.magnific-img img:hover{ transform: scale(1.1); }

#img-gallery a{ outline: 0 !important;}

.magnific-img img { width: 100%; height: auto;     border-radius: 20px 0 0 20px;}

.mfp-bottom-bar,*{ font-family: 'Abel', sans-serif;}

.magnific-img { display: inline-block;  width: 32.3%;     overflow: hidden; transition: all 1.5s ease 0s;}

#img-gallery a.image-popup-vertical-fit { cursor: -webkit-zoom-in; position: relative;
}

.mfp-with-zoom .mfp-container,.mfp-with-zoom.mfp-bg { opacity: 0; -webkit-backface-visibility: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}

.mfp-with-zoom.mfp-ready .mfp-container {  opacity: 1;}

.mfp-with-zoom.mfp-ready.mfp-bg {  opacity: 0.98;}

.mfp-with-zoom.mfp-removing .mfp-container,.mfp-with-zoom.mfp-removing.mfp-bg { opacity: 0;}

.mfp-arrow-left:before { border-right: none !important;}

.mfp-arrow-right:before {   border-left: none !important;}

#img-gallery button.mfp-arrow, .mfp-counter {  opacity: 0 !important; transition: opacity 200ms ease-in, opacity 2000ms ease-out;}

.mfp-container:hover button.mfp-arrow, .mfp-container:hover .mfp-counter{  opacity: 1 !important; }


/* Magnific Popup CSS */
.mfp-bg { top: 0;left: 0;  width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; }

.mfp-wrap { top: 0; left: 0; width: 100%;  height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; }

.mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box; }

.mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }

.mfp-align-top .mfp-container:before { display: none; }

.mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; }

.mfp-inline-holder .mfp-content,.mfp-ajax-holder .mfp-content {width: 100%;cursor: auto; }

.mfp-ajax-cur {cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out;     background: none; border: 0;}

.mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; }

.mfp-auto-cursor .mfp-content { cursor: auto; }

.mfp-close,.mfp-arrow,.mfp-preloader,.mfp-counter {  -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.mfp-loading.mfp-figure { display: none; }

.mfp-hide { display: none !important; }

.mfp-preloader {  color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; }

.mfp-preloader a { color: #CCC; }

.mfp-preloader a:hover { color: #FFF; }

.mfp-s-ready .mfp-preloader { display: none; }

.mfp-s-error .mfp-content { display: none; }

#img-gallery button.mfp-close,#img-gallery button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; box-shadow: none; touch-action: manipulation; }

#img-gallery button::-moz-focus-inner { padding: 0; border: 0; }

.mfp-close { border: 1px solid #333; padding: 0 0 10px 10px; width: 40px; height: 40px; line-height: 40px; position: absolute; right: 10px; top: 10px; text-decoration: none; text-align: center; opacity: 1;/* padding: 0 0 18px 10px;*/  color: #333;font-style: normal;  font-size: 28px; }

.mfp-close:hover, .mfp-close:focus {  opacity: 1; }

/*.mfp-close:active { top: 1px; }*/

.mfp-close-btn-in .mfp-close { color: #333; }

.mfp-image-holder .mfp-close,.mfp-iframe-holder .mfp-close {color: #333 !important; right: 10px; text-align: right; padding-right: 10px; border: 1px solid #333 !important; }

.mfp-counter {    display: none; position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; }

.mfp-arrow {z-index: 9999; position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -20px; padding: 0; width: 40px; height: 40px; -webkit-tap-highlight-color: transparent;border: 1px solid #333 !important; }

/*.mfp-arrow:active { margin-top: -54px; }*/
  
.mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; }

.mfp-arrow:after {content: ''; display: block width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: -4px; margin-left: 35px; border: medium inset transparent; }

.mfp-arrow:after { border-top-width: 7px; border-bottom-width: 7px; top: 16px; }

.mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; }

.mfp-arrow-left { right: 40%;  background: none; }

.mfp-arrow-left:after {border-right: 10px solid #333; margin-left: 10px; }

.mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3F3F3F; }

.mfp-arrow-right {right: 22%; border: 0; background: none; }

.mfp-arrow-right:after { border-left: 10px solid #333; margin-left: 14px; }

.mfp-arrow-right:before { border-left: 27px solid #3F3F3F; }

.mfp-iframe-holder { padding-top: 40px;  padding-bottom: 40px; }

.mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; }

.mfp-iframe-holder .mfp-close { top: -40px; }

.mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; }

.mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; }

/* Main image in popup */
#img-gallery img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure { line-height: 0; }

.mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; }

.mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; }

.mfp-figure figure { margin: 0; width: 60%; }

.magnific-img h3{display: none;}

.mfp-figure figure h3{display: block;}

.mfp-bottom-bar {  position: absolute;     bottom: 15px;cursor: auto; right: 0; width: 40%; padding-left: 10px; }

.mfp-title { text-align: left;line-height: 18px; color: #333; word-wrap: break-word; padding-right: 36px; }

.mfp-image-holder .mfp-content { max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer;background: #eae9e6;     border-radius: 20px 0px 0px 20px;}

#img-gallery a.image-popup-vertical-fit .overlay-image{ background: rgba(0,0,0,0);
    background: -moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.76) 100%);
    background: -webkit-gradient(left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,0.76)));
    background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.76) 100%);
    background: -o-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.76) 100%);
    background: -ms-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.76) 100%);
    background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.76) 100%);
    position: absolute;
   top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
    padding: 0 20px 20px;
    transform: translateY(100%);
    transition: all .2s ease; }

#img-gallery a.image-popup-vertical-fit .overlay-image:hover {
  opacity: 1;
}

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {

  .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; }

  .mfp-img-mobile img.mfp-img { padding: 0; }

  .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; }

  .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; }

  .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box; }
  
  .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; }

  .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; }

  .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } }

@media all and (max-width: 900px) {
  .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); }

  .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; }

  .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; }

  .mfp-container {padding-left: 6px; padding-right: 6px; }

  .mfp-image-holder .mfp-content {
    max-width: 75%;
}

}















@media only screen and (min-width : 1920px) and (max-width : 2560px){

#product-banner p {font-size: 16px;}
#img-gallery .scr-ll {height: 200px !important;}
#img-gallery {width: 70%;}
.modal-content, #caption {height: 800px;}
.modal-content {max-width: 1400px;}
.modal {padding-top: 80px;}
.mySlides .close {top: 90px; right: 276px;}


}

@media only screen and (min-width : 1600px) and (max-width : 1919px){


#img-gallery {width: 73%;}
#img-gallery .scr-ll {height: 175px !important;}
.quick .enq {width: 73%;}


}

@media only screen and (min-width : 1440px) and (max-width : 1599px){


#product-banner p {width: 40%!important;}
#product-banner p:after {top: 207px; left: 39%;}
#product-banner h2{font-size: 1.8em; margin-bottom: 10px;}

#content .txt p {text-align: left; line-height: 27px; font-size: 15px;}

#img-gallery .scr-ll { height: 150px !important;}
#img-gallery {width: 73%;}
.quick .enq{width: 70%;}

}

@media only screen and (min-width : 1366px) and (max-width : 1439px){

#product-banner p{width: 43%!important; font-size: 14px;}
#product-banner h2{margin-bottom: 10px; font-size: 1.8em;}
#product-banner p:after{top: 207px; left: 43%;}

#content h4{font-size: 16px;}
#content .txt p {text-align: left; line-height: 25px; font-size: 14px;}
#content{padding-top: 0px; padding-bottom: 70px;}

.snip1305 p{font-size: 13px;}
.read-more-trigger{border: 3px solid #00a94f;}
.fis{height: 300px!important;}
.scr-ll{height: 350px!important;}
.tab{width: 30%; margin-top: 0%; }
.tab button{font-size: 15px; padding: 12px 15px 12px 50px;}
.tabcontent ul li{font-size: 14px; padding: 12px 15px 12px 50px;}
.tab .tablinks:before{top: 23px; left: 25px;}
.tab .tablinks:after{ top: 18px; left: 30px;}

.quick{width: 65%;}
.quick .btn{font-size: 15px; }
.quick input{ font-size: 13px;}
.quick h3{font-size: 22px; width: 70%;}
.quick .enq{width: 70%;}

.popup{width: 70%; height: 60vh;}
.popup .popup-content1{width: 30%; float: left;}
.popup .popup-content2{width: 70%; float: left;}


} 

@media only screen and (min-width : 1280px) and (max-width : 1365px){

#product-banner p{width:46%!important;}
#product-banner h2{font-size: 1.8em; margin-bottom: 10px;}
#product-banner p:after{top: 207px; left: 45%;}

.quick .enq{width: 65%;}

}

@media only screen and (min-width : 1200px) and (max-width : 1365px){

#product-banner p:after{top: 207px; left: 49%;}
#product-banner p{width:50%!important;}
#product-banner h2{font-size: 1.8em; margin-bottom: 10px;}
#product-banner p{width: 75%;}

#content h4{font-size: 15px; margin-top: 15px;}
#content .txt p {font-size: 14px; text-align: left; line-height: 24px;}
#content{padding-top: 15px; padding-bottom: 60px;}

#img-gallery{margin-left: 10px;}
#img-gallery{width: 70%; margin-left: 20px; margin-bottom: 40px;}

.tab button{font-size: 15px; padding: 12px 12px 12px 40px;}
.tab .tablinks:before{top: 22px; left: 15px;}
.tabcontent ul li{padding: 12px 12px 12px 40px; font-size: 15px; }
.tab .tablinks:after{top: 17px; left: 20px;}
.tab button{padding: 10px 10px 10px 45px; font-size: 15px;}
.tabcontent ul li{padding: 10px 10px 10px 45px;}

.magnific-img{width: 31%;}
.magnific-img{width: 30%;}

.quick{margin-left: 25px;}
.quick .enq{width: 65%;}

.snip1305 p{font-size: 13px;}
.read-more-trigger{border: 3px solid #00a94f;}

}

@media only screen and (min-width : 1024px) and (max-width : 1199px){

#product-banner p{width:98%;}
#product-banner p{width:58%!important;}
#product-banner h2{font-size: 1.8em; margin-bottom: 10px;}
#product-banner p:after{top: 207px; left: 57%;}
#product-banner p{width: 60%;}

#content .txt h4 {font-size: 22px;}
#content .container-fluid{width: 85%;}
#content{padding-top: 10px; padding-bottom: 60px;}
#content h4{font-size: 14px; margin-top: 15px;}
#content h2{font-size: 26px;}
#content .txt p {font-weight: 300; text-align: left; line-height: 25px; font-size: 14px; text-align: left;}

#top .container-fluid {width: 85%;}
#top .pro-w {width: 90%;}
#top .pro-arr {width: 10%;}

#img-gallery{width: 70%; margin-left: 20px; margin-bottom: 40px;}

.tab button{padding: 10px 10px 10px 45px; font-size: 15px;}
.tabcontent ul li{padding: 10px 15px 10px 45px; font-size: 15px; font-weight: 400;}
.tab .tablinks:before{top: 20px; left: 18px;}
.tab .tablinks:after{top: 15px; left: 23px;}

.read-more-trigger{border: 3px solid #00a94f;}
.quick .enq{width: 64%;}
.snip1305 p{font-size: 12px;}
.magnific-img{width: 30%;}


}

@media only screen and (min-width : 768px) and (max-width :1023px){

#product-banner p {width: 85%;}
#product-banner p {width:78%!important;}
#product-banner h2 {font-size: 1.8em; margin-bottom: 10px;}
#product-banner p:after {top: 57px; left: 75%;}
#product-banner .line {margin-left: -39%;}
#product-banner p {width: 100%;}

#content p {line-height: 27px;}
#content h6 {margin-top: 10px;}
#content {padding-top: 0px; padding-bottom: 50px;}
#content h6 {line-height: 25px;} 
#content h4 {margin-bottom: 20px;}
#content .top {margin-top: 20px;}
#content .container-fluid {padding: 30px; width: 80%;}

#top .container-fluid {width: 80%;}
#top img {width: 3%;}
#top .pro-w {width: 65%;}
#top .pro-w{width: 85%;}
#top .pro-arr {width: 15%;}

#img-gallery .scr-ll { height: 188px !important;}
#img-gallery .scr-ll {overflow: scroll;}
#img-gallery {width: 57%; overflow: hidden; margin-left: 10px;}

.tab .tablinks:after {top: 15px; left: 20px;}
.tab {width: 40%;}
.tab .tablinks:before{top: 20px; left: 15px;}
.tab button {padding: 10px 10px 10px 35px;}
.tabcontent ul li {padding: 10px 10px 10px 35px; font-size: 14px;}
.tab button {font-size: 15px;}

.quick {width: 54%; margin-left: 20px;}
.quick .enq {width: 100%;}
.quick .btn-default {position: inherit;}
.quick h3 {width: 100%;}
.quick input {padding: 6px; margin-bottom: 3px; margin-top: 3px;}
.quick textarea {height: 75px;}
.quick .btn {padding: 8px 20px; font-size: 15px;}
.magnific-img{width: 48%; display: block;}



}

@media only screen and (min-width : 150px) and (max-width : 767px){

#product-banner .container-fluid {width: 80%;}
#product-banner p {width:100% !important;}
#product-banner p:after {top: 77px; left: 96%;}
#product-banner h2 { margin-top: 125px; margin-bottom: 10px; font-size: 1.8em;}
#product-banner {height: 350px;}

#content .txt h6 {text-align: center; font-weight: 400; font-size: 15px; text-align: left; color: #bbb7b7;}
#content p {line-height: 25px;}
#content h2 {font-size: 20px;}
#content h3 {font-size: 20px;}
#content h6 {line-height: 23px; margin-top: 10px;}
#content .txt h4 {font-size: 22px;}
#content .txt p {text-align: justify; line-height: 24px; font-size: 13px;}
#content {padding-top: 20px; padding-bottom: 50px;}
#content .top {margin-top: 20px;}
#content h4{margin-bottom: 15px; margin-top: 15px; font-size: 17px;}
#content .container-fluid {width: 80%; padding: 20px;}

#top a {font-size: 14px;}
#top img {width: 6%;}
#top .pro-w{width: 100%; margin-top: 0;}

#header {padding-bottom: 0px;}
#img-gallery{overflow: hidden; width: 100%; margin-left: 5px;}

.tab button{font-size: 15px;}
.tab{width: 100%;}
.tabcontent ul li{font-size: 15px; font-weight: 400;}

.quick h3{width: 100%;}
.quick{width: 100%; margin-left: 0;}
.quick .enq{width: 100%;}
.quick .btn-default{position: inherit;}
.magnific-img{display: block;}
.fis{height: 220px!important;}




}

@media only screen and (max-width : 375px){


}  

@media only screen and (max-width : 320px){

#product-banner h2{font-size: 22px;}
#product-banner p:after {top: 74px; left: 94%;} 

}