#product-banner{background: url(../images/icecream-body.jpg) center top no-repeat; height: 420px;margin-top:0%; position: relative; background-size: cover; transition: all 1.5s ease 0s;}
#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: 180px; font-weight: 400; font-size: 2.5em; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 2px solid #00a94f; display: inline-block;}
#product-banner h2 a {color: white!important;}
#content .bord h2 strong{font-weight: 800;}

.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 .container-fluid{width:80%;/* background: #ffffff87; padding: 50px; border: 1px solid #cccccc;*/}
#content{padding-top: 0px; padding-bottom: 100px; background: #fff;}
#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: 70px;}
#content .bk {background: #f6f6f6; padding: 50px;}
#content .bk1 {background: #f6f6f6; padding: 35px 35px 100px;}
.align-items-center {-ms-flex-align: center!important; align-items: center!important; display: flex;}

#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: #005cb9; margin-top: 0px; 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 {color: #656569!important; font-weight: 400!important; line-height: 28px; font-size: 14px; margin-top: 10px;}
#content h3 {width: 100%; margin-top: 0px; color: #005cb9; font-size: 24px; font-weight: 400;}
#content .a {padding-inline-start: 18px; margin-bottom: 10px;}
#content .a li {color: #656569; list-style-type: disc; line-height: 28px; font-family: 'Cairo', sans-serif; font-size: 14px;}
#content .zoom{overflow: hidden; border-radius: 20px;}
#content .zoom img {transition-duration: 4s; margin: 0 auto; display: block;}
#content .zoom img:hover {-webkit-transform: scale(1.08); cursor: crosshair;}
#content .b li {list-style-type: circle;}
#content .c li {list-style-type: square;}
#content .to {margin-top: 50px;}
#content .ic {width: 20%; float: right;}
#content .ic i {font-size: 50px; color: #97a4af;}
#content .te {width: 80%; float: right;}

.topgreen_arc {position: absolute; width: 100%; height: 7rem; background: #fff; margin-top: 2.125rem; left: 0; -webkit-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg);}
.topgreen_arc1 {position: absolute; width: 100%; height: 7rem; background: #fff; margin-top: -3.875rem; left: 0; -webkit-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg);}

#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%;}
.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: 'Cairo', sans-serif !important;}
.tab button:hover {background-color: #00a94f;}
.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{background-image: linear-gradient( 0deg , #353535, #525252); 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: 'Cairo', sans-serif !important;}
.tabcontent ul li:hover{background-image: linear-gradient( 0deg , #282828, #030303); 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-image: linear-gradient( 0deg , #282828, #030303); 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: 20px; position: relative; background: #f3f3f3; padding: 35px;}

.quick .enq{float: left;width:77%;}
.quick h3{margin-top: 0px; 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: 'Cairo', sans-serif !important;}
.quick .btn {background: #00a94f; margin-top: 12px; float: right;}
.quick .btn a {color: #fff!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;}
#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;}
.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;}
.next {right: 0; border-radius: 3px 0 0 3px;}
.prev:hover, .next:hover {color: #00a94f!important;}
.text {color: #f2f2f2; font-size: 15px; padding: 8px 12px; position: absolute; bottom: 8px; width: 100%; text-align: center;}
.numbertext {color: #f2f2f2; font-size: 12px; padding: 8px 12px; position: absolute; top: 0;}
.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: 20px; margin-bottom: 40px;}
#img-gallery .container{width: 100%; max-width: 100%; padding: 0;}
#img-gallery .scr-ll{height: 145px !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;}
.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; color: #333; font-style: normal; font-size: 28px;}
.mfp-close:hover, .mfp-close:focus {opacity: 1;}


.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: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;}
.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){
#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 h2{font-size: 2em; 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 h2{font-size: 2em; margin-bottom: 10px;}

#content h4{font-size: 16px;}
#content .txt p {text-align: left; line-height: 25px; font-size: 14px;}
#content{padding-top: 70px; 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;}

#img-gallery{width: 67.7%;}
.quick{width: 67.7%;}
.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 h2{font-size: 1.8em; margin-bottom: 10px;}

.quick .enq{width: 65%;}
#img-gallery{width: 72%;}
.quick{width: 73%;}

}

@media only screen and (min-width : 1200px) and (max-width : 1365px){
#product-banner h2{font-size: 1.8em; margin-bottom: 10px;}

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

#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: 32%;}

.quick{margin-left: 25px;}
.quick .enq{width: 65%;}
#img-gallery{width: 72.8%;}
.quick{width: 72.8%;}

.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 h2{font-size: 1.8em; margin-bottom: 10px;}

#content .txt h4 {font-size: 22px;}
#content .container-fluid{width: 85%;}
#content{padding-top: 60px; 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%;}
.quick{width: 73.1%;}

#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 h2{font-size: 1.8em; margin-bottom: 10px;}

#content p {line-height: 27px;}
#content h6 {margin-top: 10px;}
#content {padding-top: 50px; padding-bottom: 50px;}
#content h6 {line-height: 25px;} 
#content h4 {margin-bottom: 20px;}
#content .top {margin-top: 50px;}
#content .bk1 {padding: 35px;}
#content .container-fluid {width: 80%;}
#content .bk {padding: 35px;}
#content p {margin-top: 12px;}
#content h3 {margin-top: 20px;}
#content .to {margin-top: 0px;}
.topgreen_arc1 {display: none;}
#content .add .a {margin-top: 0px; margin-bottom: 20px;}
#content .add h3 {margin-top: 0px;}
.align-items-center {display: block;}

#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 h2 {margin-top: 160px; margin-bottom: 10px; font-size: 1.8em;}
#product-banner {background: url(../images/mb-banner/icecream-body.jpg) center top no-repeat; height: 350px;}
#product-banner h2 {border: none;}

#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: 50px; padding-bottom: 50px;}
#content h4{margin-bottom: 15px; margin-top: 15px; font-size: 17px;}
#content .top {margin-top: 50px;}
#content .bk {padding: 20px;}
#content .bk1 {padding: 20px;}
#content .bk1 h3 {margin-top: 0px;}
#content .ic i {font-size: 30px;}
#content .container-fluid {width: 85%;}
#content p {margin-top: 12px; text-align: justify;}
#content h3 {margin-top: 20px;}
#content .to {margin-top: 0px;}
#content .add .a {margin-top: 0px; margin-bottom: 20px;}
#content .add h3 {margin-top: 0px;}
.align-items-center {display: block;}
.topgreen_arc1 {display: none;}

#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%;} 

}