/*
Theme Name: Creative Works
Theme URI: https://github.com/WordPress/twentynineteen
Author: the Creative Works team
Author URI: https://creative-works.us/
Description: Creative Works Theme.
Requires at least: WordPress 4.9.6
Version: 1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: creative works
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Creative Works is based on Underscores https://underscores.me/, (C) 2012-2018 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Variables
# Normalize
# Typography
  ## Headings
  ## Copy
# Elements
  ## Lists
  ## Tables
# Forms
  ## Buttons
  ## Fields
# Navigation
  ## Links
  ## Menus
  ## Next & Previous
# Accessibility
# Alignments
# Clearings
# Layout
# Widgets
# Content
  ## Archives
  ## Posts and pages
  ## Comments
# Blocks
# Media
  ## Captions
  ## Galleries
--------------------------------------------------------------*/
/*
 * Chrome renders extra-wide   characters for the Hoefler Text font.
 * This results in a jumping cursor when typing in both the Classic and block
 * editors. The following font-face override fixes the issue by manually inserting
 * a custom font that includes just a Hoefler Text space replacement for that
 * character instead.
 */
@font-face {
  font-family: 'proxima_nova';
  src: url(https://stg.ecologicallabs.com/wp-content/themes/creative-works/fonts/proxima_ssv/ProximaNova-Regular.otf);
}
html {scroll-behavior: smooth;}
body{margin: 0px; padding:0px; border:0px; font-family:Arial, Helvetica, sans-serif;}
div, section, img, p {transition: all 0.4s ease 0s;}
.content{width:98%; max-width:1372px; margin: 0 auto; position:relative;}
.item a:hover{text-decoration:none !important;}
#sidebar{display:none;}
 /* ====================================== MARKER ====================================== */
 .barlogo p{color:#000; text-align: center; margin-top: 10px; font-weight: bold; height: 40px;}
 .barlogo .conlogo{height: 80px; display: flex;align-content: center;align-items: center;}
 footer a{color:#fff;}
 .barlogo a{text-decoration: none !important;}
.map_box{z-index:10;}
.gslide-media{padding:0 !important; border-radius:10px;}
.gslide-media img{width:100%; height:180px}
.gslide-media h4, .gslide-media h5{padding:0 15px; font-family: 'Raleway', sans-serif; color:#005151; font-weight:bold;}
.title_market{font-family: 'Raleway', sans-serif; color:#000; font-weight:normal;}
.nav-tabs.nav-justified.navmarket > li > a{text-align:left; color:#005151; font-size:20px; font-family: 'Raleway', sans-serif; font-weight:700;}
.titlesuc h3 {text-align:left; color:#3C8677; font-size:30px; font-family: 'Raleway', sans-serif;}
.titlesuc h4 {text-align:left; color:#005151; font-size:28px; font-family: 'Raleway', sans-serif;}
.nav-tabs.navmarket > li.active > a{color:#005151;}
.cont_asia{font-family: 'Muli', sans-serif; font-size: 18px; line-height: 25px; color:#3C8677; text-align:justify;}
.mapdes h4{font-family: 'Raleway', sans-serif; color:#005151; margin-top:15px;}
.mapa{border:3px solid #005151; border-radius:10px;}
.cir{margin-right:20px; font-size:20px !Important;}
.itempdf img{border: 3px solid #0d414b;}
.spacing{margin-top:25px;}
.captiomarket{text-align:center; color:#3C8677; font-size:16px; font-family: 'Raleway', sans-serif; margin-top:15px;}
.cont_asiasu{font-family: 'Muli', sans-serif; font-size: 18px; line-height: 25px; text-align:justify;}
.separate{height:6px; width:100%; background:#005151; margin-top:15px; margin-bottom:20px; float:left; position:relative;}
.asiadir{float:left; margin-right:10px;}
.addservice{margin-top:50px;}
.img-popup{width: 100%; margin:0 auto;}
.fclose{display: none;}
 /* ====================================== MARKER ====================================== */
 /* ====================================== HEADER ====================================== */
header{width:100%;}
header .logo{width:30%; padding:0; float:left; box-sizing:border-box;}
header .logo img{width:100%;}
.navbar.stickyn{ position: fixed; z-index: 1000; top:0; transition: all 0.5s linear 0ms;}
#mega-menu-wrap-menu-1{width:90%; float:left;}
.flag{float:left; width: 10%;}
.flag img{width:45%; margin: 0 auto;}
.sticky .flag img{width:72%;}
hr{border-top: 1px solid #c1c1c1 !important;}
.btnslider{background-image: linear-gradient(to right, #125657 , #000f2c);
  color: #fff;
  padding: 10px;
  border-radius: 32px;
  float: right;
  margin: 2% 0 1%;
  transition: all .5s ease-in-out;
}
.btnslider:hover
{
  color:#000f2c;
  background:#fff;
  text-decoration: none !important;
}
.close{font-weight:300;color:#fff; opacity:1;}
.head, .middle{font-size:12px; font-style:italic;}
.modal-content .md-space1 ul{text-align:left !important;}
#Product .col-sm-2{width:14% !important;}
.navbar{
  border-radius: 0px;
  margin-bottom:0px;
  background-color: #14003f;
  /*background-image: linear-gradient(to right, #125657 , #000f2c);*/
}
#mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-flyout ul.mega-sub-menu
{
  background: #14003f;
}
.page-id-1437 .tab-03, .page-id-592 .tab-03, .page-id-596 .tab-03, .page-id-595 .tab-03, .page-id-2258 .tab-03, .page-id-292 .tab-03, .page-id-533 .tab-03{display:none;}
.modal-body{padding:15px 30px;}
.read-more-services, .brochure{float:left;}
.brochure{margin-left:25px;}
.markets{position:fixed; width:100%; z-index:10;}
.boxescroll{display:none;}
  .mapacus{margin-top:120px; position:relative; z-index:100;}
.aboutp{margin-top:50px;}
.title-page .row{margin-left: 0; margin-right: 0;}
.covid{background: transparent; border: 1px solid; padding: 10px 20px; border-radius: 32px; margin-top: 40px;}
  .covid:focus{outline: none !important;}
/* ====================================== stycky menu ====================================== */
.advancedpanorama{width:100%; height:auto;}
.col-md-6 img{width:100%; height:auto;}

@media screen and (min-width: 780px)
{
 /* #news .news-box-title
  {
    height:137px;
  }*/
  #news .news-box-content p{
    float: left;
    margin-bottom:20px;
  }
    .linc{height: 300px; display: flex; align-items: center; align-content: center;}
  .rightRs {
  right: -45px !important;
}
.leftRs
{
  left: -30px !important;
}
.sticky #mainmenu {
  width: 80%;
  float: left;
  text-align:right;

}

.sticky #mainmenu a
{
  padding: 5px 25px
}
.navbar.sticky 
{
  margin-bottom:0px;    
  width:100%;
  transition: all 300ms linear 0ms;
  
}
.navinternal{padding-bottom: 15px;}
.navmarket .title-page{margin-top: 15px;}
.sticky #mainmenu
{
  margin: 11px 0px 0px 0px;
}
  .barlogo{display:flex; align-items:center;}
  .internalban{margin-bottom:50px;}

  .asiadir{width:10%; }
  .titlebrand{height: 140px; display: flex; align-items: center; align-content: center;}
}
/* ====================================== MENU STYKY ====================================== */
/* ====================================== MAINMENU ====================================== */

.form-access{display:block; flex-wrap:wrap; align-items:center;}
.f-titleaccess{width:100%; align-items:center; font-size:17px; font-weight:normal;}
.f-inputaccess{width:100%; margin-bottom:15px;}
.f-inputaccess input[type="text"],
.f-inputaccess input[type="email"],
.f-inputaccess input[type="tel"],
#username,
#password{width:100%; padding:6px; box-sizing:border-box; height:40px; border:1px solid #ccc; border-radius:32px;}
.f-inputaccess select, .f-33-area select{border:1px solid #ccc; padding:8px 5px; height:40px; box-sizing:border-box; width:100%; background-color:#E9E9ED; border-radius:32px; margin-bottom:15px;}
.f-33-area{width:100%}
.f-33-area-center{width:100%; margin-left:0%; margin-right:0%;}
.f-33-area input, .f-33-area-center input{width:100%; padding:6px; box-sizing:border-box; height:40px; border-radius:32px; margin-bottom:15px; border:1px solid #ccc;}

.submitclass,
.user-registration-Button{
background: #fff;
color: #125657;
padding: 0 5%;
border-radius: 32px;
float: right;
margin: 0 auto;
  margin-top: 0px;
transition: all .2s ease-in-out;
border-color: #3C8677 !important;
border-width: 3px !important;
font-weight: bold;
text-transform: uppercase;
font-size: 16px;
	height:40px;
	margin-bottom:80px;
}

#mainmenu{width:70%; float:right; font-family: 'proxima_nova'; font-size: 17px; font-weight: 400; text-transform: uppercase; text-align: right; margin:25px 0px 0px 0px;}
#mainmenu ul{margin:0px; padding: 0px;}
#mainmenu li{display: inline; list-style:none; margin: 0px; padding: 0px;}
#mainmenu a{color:#fff; text-decoration: none; padding:15px 25px;}
#mainmenu .mega-menu > li > a.mega-menu-link { font-size: 12.5px !important; }
#mainmenu a:hover{background-color:#00CBEC; transition: background-color 0.9s ease; color:#fff;}
.main-menu-more{display: none;}

/* ====================================== BANNER AREA ====================================== */
#banner{width:100%; font-family: 'Raleway', sans-serif; color:#2D5298;}
#banner .slide-bg{width:100%;}
#banner .item{background-size:cover !important;}
#banner .content-slide{position:absolute; width:100%; bottom:15px;}
#banner .bg-slide-content{/*background:url(https://stg.ecologicallabs.com/wp-content/themes/creative-works/images/bg-slide.png);*/ max-width:767px; padding:15px; margin:10% 0 0 0; border-radius:2px; display:table; box-sizing:border-box;}
#banner .bg-slide-content-v2{/*background:url(https://stg.ecologicallabs.com/wp-content/themes/creative-works/images/bg-slide.png);*/ background: #fffffff7;max-width:767px; padding:15px; margin:25% 0 0 0; border-radius:2px; display:table; box-sizing:border-box;}
#banner .slide-title{font-size:60px; line-height:80px; font-weight:700; text-transform:uppercase; padding-top:12%;}
#banner .slide-subtitle{font-size:40px; line-height:35px; font-weight:300;}
#banner .slide-content{font-size:20px; line-height:25px; margin-top:15px; font-family:'Muli', sans-serif; text-align:justify; /*color:#2F685C*/ color:#000000}
#banner .carousel-indicators li{background-color:transparent; border:2px solid #fff; width:12px; height:12px; margin: auto;}
#banner .carousel-indicators .active{background-color:#fff; width:12px; height:12px;}
#banner .carousel-indicators{width:90%; left:0; margin-left:0%; margin-right:0%; text-align:right;}
.carousel-fade .next.left,.carousel-fade .prev.right,.carousel-fade .item.active { opacity: 1; }
#banner .item:nth-child(1) .slide-content{
  margin-top: 10px;
}
/* ====================================== BLOG NEWS ====================================== */
.articulo{
    width: 100%;
  padding: 3%
}
.articulo header{
  position: inherit;
}
/* ====================================== FIN BLOG NEWS ====================================== */
/* ====================================== COMPANY OVERVIEW ====================================== */
#company-overview,#company-overview2,#company-overview3{width:100%;}
#company-overview .company-l,#company-overview2 .company-l,#company-overview3 .company-l{width:45%; float:right;}
#company-overview .company-r,#company-overview2 .company-r,#company-overview3 .company-r{width:50%; float:left;}
#company-overview .company-r img,#company-overview2 .company-r img,#company-overview3 .company-r img{width:100%;}
#company-overview .title-company,#company-overview2 .title-company,#company-overview3 .title-company{font-size:38px; line-height:40px; color:#000; font-family: 'Raleway', sans-serif; font-weight:300; margin:0px 0px 25px 0px; text-align: left !important;}
/* ====================================== SERVICES ====================================== */
#services{width:100%;}
#services .tabs-l{width:60%; float:left; text-align:justify;}
#services .tabs-r{width:35%; float:right;}
#services .tabs-img{width:90%; margin:0 auto;}
#services .tabs-img img{width:100%;}

.tabs-area{width:100%; background-color:#132E5B; font-size:15px; text-transform:uppercase; font-family: 'Raleway', sans-serif; font-weight:700; color:#fff; border-top:1px solid #132e5b;}
.tabs-area li{float:left; list-style:none;  border-left:2px solid #fff; cursor:pointer;}
.tabs-area li a{padding:18px 20px; margin:0px; background:none; border:0px !important; color:#fff;}
.tabs-area li a:hover{margin:0px; background:none; border:0px !important; color:#fff;}
.tabs-area .active{background-color:#fff; color:#588577;}
.tab-content{padding:40px 0px;}

.btn-services{display:none;}

/* ====================================== TESTIMONIALS ====================================== */
#testimonials,#testimonials-sign{width:100%; font-family: 'Muli', sans-serif; background-color:#01273A; padding:30px 0px 70px 0px;}
#testimonials .testi-l,#testimonials-sign .testi-l{float:left; width:65%; background:var(--wpr-bg-58801057-f286-4a68-930c-8ddec4e8119a) no-repeat center left; font-size:17px; color:#fff; font-family: 'Muli', sans-serif; box-sizing:border-box; padding-left:150px; margin-top:10px;}
#testimonials .testi-r,#testimonials-sign .testi-r{width:30%; float:right; font-size:16px; color:#9BBBB5; font-style:italic; margin-top:10px;}
#testimonials .content,#testimonials-sign .content{max-width:1145px;}
#testimonials .testi-carousel-area,#testimonials-sign .testi-carousel-area{width:98%; position:relative; margin:0 auto; max-width:1320px;}
#testimonials .left,#testimonials-sign .left{background-image:none !important;}
#testimonials .right,#testimonials-sign .right{background-image:none !important;}
#testimonials .carousel-control,#testimonials-sign .carousel-control{max-width:50px;}


/* ====================================== NEWS ====================================== */
#news{width:100%; padding:25px 0px 60px 0px;}
#news .content{display: grid; grid-template-columns: 1fr 1fr 1fr; gap:20px;}


#news .date-area{width:100%; font-family: 'Muli', sans-serif; font-size:16px; color:#FFF; font-weight:700;}
#news .mount{width:60%; float:left;}
#news .year{width:35%; float:right; text-align:right;}
#news .date-area{padding:10px 10%; box-sizing:border-box;}
#news .news-box-content{box-sizing:border-box; padding:25px 5%; font-family: 'Muli', sans-serif; font-size:14px;}
#news .news-box-title{font-size:24px; margin-bottom:15px; float:left}
#news .box_color_id_0{background-color:#5ccae8; float:left;}
#news .box_color_id_1{background-color:#3a8397; float:left;}
#news .box_color_id_2{background-color:#14003f; float:left;}
.signature-ceo{text-align:center; width:50%; float:right; padding-top:50px;}

/* ====================================== BRANDS ====================================== */
#brands{width:100%; background-color:#fff; padding:25px 0px;}
#brands .brand-l{width:25%; float:left;}
#brands .brand-r{width:70%; float:right;}
#brands .brand-box{width:25%; float:left; line-height:105px;}
#brands .brand-box img{max-height:105px; max-width:100%;}

/* ====================================== WALL OF FAME ====================================== */
#wall-fame-area{width:100%; border:1px solid #00cc00;}
.list_icon_cases{display:flex; gap: 85px; text-align:center; padding-top:50px; padding-left: 0;}
.list_icon_cases li:hover img{  box-shadow: 0 0 0 0 rgba(52, 172, 224, 1);
  animation: pulse-blue 2s infinite; border-radius:100%; }

@keyframes pulse-blue {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(52, 172, 224, 0.7);
    
  }
  
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 15px rgba(52, 172, 224, 0);
  }
  
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(52, 172, 224, 0);
 
  }
}
.list_icon_cases li{width:100%; list-style: none;}
.list_icon_cases a{font-weight: bold; font-size:18px;}
/* ====================================== FOOTER ====================================== */
footer{width:100%; padding:50px 0px 20px 0px;}
footer .footer-l{width:30%; float:left;}
footer .footer-l2{text-align:center; padding-bottom: 20px;}
footer .footer-r{width:70%; float:right; font-family: 'Muli', sans-serif; color:#fff; margin-top:15px; display:flex;}
footer .footer-r2{width:100%; font-family: 'Muli', sans-serif; color:#fff; margin-top:15px;}
footer .footer-r-area{width:33.33%; float:left; min-height:100px; box-sizing:border-box;}
footer .footer-r-area2{width:20%; float:left; min-height:100px; box-sizing:border-box;}
footer .big-phone{font-size:24px; line-height:33px;}
footer .normal-phone{font-size:13px; line-height:21px; margin-bottom:25px;}
footer .normal-phone span{color:#7ea1ae; font-size:12px;}
footer .normal-phone strong{color:#59caea;}
footer .icon-phone{background:var(--wpr-bg-5dff88e9-fd14-4c51-9125-399cc0e15a19) no-repeat top 7px left 5px; padding:0px 0px 0px 25px;}
footer .icon-email{background:var(--wpr-bg-7eed9865-14f2-4036-8fb8-e2d5fae382c3) no-repeat top 6px left; padding:0px 0px 0px 25px;}
footer .icon-address{background:var(--wpr-bg-5100b16d-e379-464d-90c8-131dfc474c8a) no-repeat top 6px left; padding:0px 0px 0px 25px; color:#7ea1ae;}
footer .icon-market{background:var(--wpr-bg-406a1e63-1fc2-487b-b0f9-9ed3c7dab72e) no-repeat top 6px left; padding:0px 0px 0px 30px;}
footer .icon-tech{background:var(--wpr-bg-98ec118a-f9bc-4bf1-9fdb-a17d9df5a3ef) no-repeat top 6px left; padding:0px 0px 0px 30px;}
footer .footer-title{font-size:14px; text-transform:uppercase; font-weight:700; color:#fff; padding:2px 0px 0px 0px;}
.entry-footer,.post-navigation{display:none !important;}
#return-to-top {
  position: fixed;
  bottom: 60px;
  right: 20px;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.7);
  width: 50px;
  height: 50px;
  display: block;
  text-decoration: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  display: none;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 11;
}
#return-to-top i {
  color: #fff;
  margin: 0;
  position: relative;
     left: 30%;
  top: 9px;
  font-size: 30px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
/* ====================================== FOOTER POST ====================================== */

.single-post .navigation.post-navigation.sticky, .single-post .comments-area{
  display: none;
}
.single-post article{
   width: 80%;
  margin: 0 auto;
  margin-top: 80px;
}
.single-post article h1.entry-title, .single-news article h1.entry-title{
  width: 80%;
  background: #ffffffc7;
  margin: 0 auto;
  padding: 20px;
}
.single-post article .entry-meta, .single-news article .entry-meta{
  width: auto;
  margin: 0 auto;
  text-align: center;
  background: #115556e3;
  color: white !important;
  padding: 5px;
}
.single-post article .entry-meta a, .single-news article .entry-meta a{
color: white;
}
.single-post article .entry-content, .single-news article .entry-content{
  width: 80%;
  margin: 0 auto;
  margin-top: 50px;
}

/* ====================================== FOOTER POST ====================================== */

/* ====================================== COPYRIGHT ====================================== */
.border-copyright{width:95%; margin:0 auto; border-top:1px solid #135D60; margin-top:45px; margin-bottom:20px; max-height:1px;}
.copy-l{width:50%; float:left; text-align:left; color:#9BA4A9; font-size:13px; font-family: 'Muli', sans-serif;}
.copy-r{width:50%; float:right; text-align:right; color:#7C93A3; font-size:13px; font-family: 'Muli', sans-serif;}
.copy-r a{color:#7C93A3; text-decoration:none;}

/* ====================================== GENERAL ====================================== */
.padding{padding:45px 0px;}
.content-company{font-family: 'Muli', sans-serif; font-size:18px; line-height:25px; color:#303030;}
.title-area{font-family: 'Raleway', sans-serif; font-size:40px; padding:15px 0px;}
.gray{color:#575757;}
.white{color:#fff;}
.center{text-align:center;}
.left{text-align:left;}
.clear{clear: both;}
.img-responsive{width:100%}

/* ====================================== WASTE WATER TREATMENT ====================================== */
  #banner-text{overflow: hidden;}
  #water{ padding-top: 30px;}
  .it{display: block; float: left;height: 300px;background-size: cover !important; width: 100%;margin-bottom: 20px; background-position: center !important;}
  .title-page-water{ background: #e0e0e0;}
  .title-page-water h1{font-family: 'Raleway', sans-serif; color: #132c3d; font-weight: 300;font-size: 50px; text-transform: uppercase; margin-bottom:20px;}
  .tab-title{font-family: 'Raleway', sans-serif; color: #FFF; font-weight: 300;font-size: 50px; text-transform: uppercase; margin-bottom:20px;background-color:#132c3d;position:unset!important}
  .content-water {color: #FFF; font-family: 'Raleway', sans-serif; text-align:justify;}
  .content-water p {font-size: 20px; line-height: 1.5em;}
  .tab-button{font-family: 'Raleway', sans-serif; color: #132c3d; font-weight: 300;font-size: 30px; text-transform: uppercase; 
    border: 2px solid #132c3d; padding: 10px; border-radius: 30px;}
  .tab-03{height:600px; margin-top: 70px;}
  .tab-04{height:600px;}
  .list-title{font-family: 'Raleway', sans-serif;font-weight: 300;font-size: 26px;text-transform: uppercase; background-color:#517b6f;color:#fff; border-radius: 30px; padding: 5px 20px;}
  .first-line,.second-line2{padding-top:40px; padding-bottom:40px;}
  .second-line{padding-left:100px;}
  

  .detail-text{color: #005151; font-size: 20px; font-family: 'Raleway', sans-serif;font-weight: 300;}
  .product-bullets,.product-bullets2,.clear-product,.clear-product2,.labels span{font-family: 'Muli', sans-serif;}
  .product-bullets ul, .product-bullets2 ul{list-style: none;}
  .product-bullets ul li::before, .product-bullets2 ul li::before{content: "\2022"; font-weight: bold; display: inline-block; width: 1em; margin-left: -1em; color:#82a499;}
  .product-bullets li, .product-bullets2 li{text-align:left;}
  .content-ul ul, .content-ul2 ul, .content-ul3 ul{list-style: none; line-height:30px; padding-left: 0;}
.content-ul ul li, .content-ul2 ul li, .content-ul3 ul li{margin-left:3em;}
  .content-ul ul li::before, .content-ul2 ul li::before{content: "\2022"; font-weight: bold; display: inline-block; width: 1em; margin-left: -1em; color:#82a499;font-size:30px;position:absolute}
  .content-ul3 ul li::before{content: "\2022"; font-weight: bold; display: inline-block; width: 1em; margin-left: -1em; color:#82a499; font-size:30px;position:absolute;}
  .labels span{text-transform: uppercase; background-color:#517b6f;color:#fff; border-radius: 20px; padding: 5px 10px;}
  .labels{padding-top: 20px; padding-bottom:20px;}
  .clear-product{height:40px;}
  .clear-product2{height:80px;}
  .center-water{text-align:center;}
  .case-image,.case-image2{padding-top:20px;}
  .case-image{padding-left:0px;}
  .case-image2{padding-right:0px;}

  .footer-menu a{text-decoration: none; color:#7ea1ae;}
  .back-button{background-color:#FFF;}



  /* Style the tab */
  #tab{ overflow: hidden;}
  .tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #132E5B;
    font-family: 'Raleway', sans-serif;
    font-weight: bold;
    padding-left: 5%;
  }

  /* Style the buttons inside the tab */
   .tab button {
    background-color: inherit;
    color: #FFF;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 40px;
    transition: 0.3s;
    font-size: 17px;
    font-weight: 600;
    text-transform: uppercase;
  }

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

  .btn-l button:hover, .btn-r button:hover {
    background-color: #517b6f;
    color: #FFF;
    border-color: #517b6f;
    box-shadow: 10px 10px 5px #aaaaaa;
  }

  /* Create an active/current tablink class */
  .tab button.active {
    background-color: #FFF;
    color: #000;
  }
  .btn-l button.active, .btn-r button.active {
    background-color: #517b6f;
    color: #FFF;
    border-color: #517b6f;
    box-shadow: 10px 10px 5px #aaaaaa;
  }

  /* Style the tab content */
  .tabcontent {
    
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
  }

  .tabcontent2 {
    display: none;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
  }
  /* Fade in tabs */
  @-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
  }

  @keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  .contact-water{height:500px; background-size: cover; background-repeat: no-repeat;}
  .contact-water2{padding: 15% 10% 9% 10%; text-align: center;}
  .contact-water2 a{text-decoration: none; color:#fff;}
  .contact-water3{border: 2px solid #fff; padding: 10px 50px; border-radius: 40px; font-size: 40px;}
  /*READ MORE*/
  .inner-read{padding: 5px 10px;border-radius: 30px;background-color: #FFF;color: #125657;font-weight: bold;text-transform: uppercase;font-size:16px}
/*.inner-read:hover{background:linear-gradient(to right, #3C8677 , #000f2c); color:#fff;}*/

  /*.outer-read{padding: 5px 7px;border-radius: 30px;background: linear-gradient(to right, #3C8677 , #000f2c);width: 370px;text-align: center;margin:0 auto; overflow:hidden;}*/
.outer-read{padding: 3px 4px;border-radius: 30px;background: #3C8677;width: 370px;text-align: center;margin:0 auto; overflow:hidden;}
.outer-readhome{padding: 3px 4px;border-radius: 30px;background: #3C8677;width: 160px;text-align: center;margin-top:30px; overflow:hidden;}
  .readmore{text-decoration:none!important}
  

/* ====================================== ABOUT US ====================================== */
  .title-page{ background: #fff; -webkit-box-shadow: 0px 6px 5px 0px rgba(112,112,112,1);
-moz-box-shadow: 0px 6px 5px 0px rgba(112,112,112,1);
box-shadow: 0px 6px 5px 0px rgba(112,112,112,1);}
  .title-page h1{font-family: 'Raleway', sans-serif; color: #132c3d; font-weight: 300;font-size: 40px;padding: 20px 0px;margin: 0; text-transform:uppercase;}
  .about-section-01,.about-section-02,.about-section-03,.about-section-04,.about-section-05,.about-section-06,.about-section-07,.about-section-08{margin-bottom: 50px;}
  .about-section-03{padding: 60px 0;background-size: cover;background-repeat: no-repeat;}
  .about-section-03 h3{font-family: 'Raleway', sans-serif;font-size: 40px;color: white;font-weight: 300;text-align: center;text-transform: uppercase;}
  .about-section-03 .content-company,.about-section-05 .content-company{color: white; margin-top: 50px;}
  .about-section-04 b{color: #588577;text-transform: uppercase;}
  .about-section-05{padding: 50px 0;}
  
  .about-section-05 .content-company span{font-size: 20px; color: #fff;}
  .about-section-05 ul, .about-section-07 .content-company{color: white;}
  .about-section-05 ul li{list-style: none;}
  .about-section-05 ul li:before{content: "\2713";display: block;position: absolute;margin-left: -20px; color: #588577;}
  .about-section-06 h3{font-size: 48px;}
  .about-section-07 .content{padding: 20px 5px;}
  .about-section-07 h3{margin-top: 40px;}
  .about-section-05 h3,  .about-section-07 h3{color: #fff !important;}

/* ====================================== FAQ ====================================== */
.hiddentitle .content{display: none;}
.faq .panel-title a{font-size: 14px;line-height: 14px;color: #3C8677; font-family: 'Raleway', sans-serif;font-weight: 300;margin: 0px 0px 25px 0px}
.faq .panel-default > .panel-heading{background-color: #fbfbfb;border: none;border-bottom: 2px solid #3c8677;box-shadow: none;}
.faq i{float: right;}
.boxes{background:#02112d;}
.itemfaq{transition: all 0.6s; padding: 10px; color: #fff; z-index: 10;  text-align:center; cursor:pointer; display:flex; align-items: center;}
.itemfaq h4,.itemfaq h3{margin:0 auto;}
.itemfaq2{transition: all 0.6s; padding: 20px; color: #fff; text-align:center; cursor:pointer;}
.itemfaq:hover{transform: scale(0.8); z-index: 1;}
.itemfaq i{float:none; cursor:pointer;}
.itemfaq .icon{border-color: rgba(255,255,255,0); border-width: 0px; background-color:#006666; box-sizing: content-box; height: 40px; width: 40px; line-height: 40px; border-radius: 50%; color: #ffffff; font-size: 26px; margin: 0 auto; display: grid;align-items: center;}
.itemfaq2 .icon{border-color: rgba(255,255,255,0); border-width: 0px; background-color:#006666; box-sizing: content-box; height: 80px; width: 80px; line-height: 80px; border-radius: 50%; color: #ffffff; font-size: 40px; margin: 0 auto; box-shadow: 0 0 0 rgb(0, 189, 222); animation: pulse 2s infinite;}
.itemfaq:hover .icon{box-shadow: 0 0 0 rgb(0, 189, 222); animation: pulse 2s infinite;}

@-webkit-keyframes pulse {
  0% {
  -webkit-box-shadow: 0 0 0 0 rgb(0, 189, 222);
  }
  70% {
    -webkit-box-shadow: 0 0 0 10px rgb(50, 119, 159, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgb(50, 119, 159, 0);
  }
}
@keyframes pulse {
  0% {
  -moz-box-shadow: 0 0 0 0 rgb(0, 189, 222);
  box-shadow: 0 0 0 0 rgb(0, 189, 222);
  }
  70% {
    -moz-box-shadow: 0 0 0 10px rgb(50, 119, 159, 0);
    box-shadow: 0 0 0 10px rgb(50, 119, 159, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgb(50, 119, 159, 0);
    box-shadow: 0 0 0 0 rgba(50, 119, 159, 0);
  }
}

.phone-c{
	width:100%;
	padding: 7px 25px;
    box-sizing: border-box;
}

/* ======================================================================================== */
/* ======================================================================================== */
/* ======================================================================================== */
/* ====================================== RESPONSIVE ====================================== */
/* ======================================================================================== */
/* ======================================================================================== */
/* ======================================================================================== */


/* ----------------------------------------- 1380 ----------------------------------------- */

@media only screen and (max-width:1380px){
 /* ====================================== HEADER ====================================== */
header{width:100%;}
header .logo{width:30%; padding:0; float:left; }
/* ====================================== MAINMENU ====================================== */
#mainmenu{width:70%; float:right; font-size: 15px; text-align: right; margin:25px 0px 0px 0px;}
#mainmenu li{display: inline; list-style:none; margin: 0px; padding: 0px;}
#mainmenu a{color:#fff; text-decoration: none; padding:15px 15px;}


/* ====================================== SERVICES ====================================== */
#services .tabs-l{width:60%; float:left;}
#services .tabs-r{width:35%; float:right;}
#services .tabs-img{width:90%; margin:0 auto;}
#services .tabs-img img{width:100%;}

.tabs-area{width:100%; font-size:14px; font-weight:400; color:#fff;}
.tabs-area li{float:left; list-style:none;  border-left:2px solid #fff; cursor:pointer;}
.tabs-area li a{padding:15px 20px; margin:0px; background:none; border:0px !important; color:#fff;}
.tab-content{padding:40px 0px;}
}

/* ----------------------------------------- 1100 ----------------------------------------- */

@media only screen and (max-width:1100px){
/* ====================================== SERVICES ====================================== */
#services .tabs-l{width:60%; float:left;}
#services .tabs-r{width:35%; float:right;}
#services .tabs-img{width:90%; margin:0 auto;}
#services .tabs-img img{width:100%;}

.tabs-area{width:100%; font-size:13px;}
.tabs-area li{float:left; list-style:none;  border-left:2px solid #fff; cursor:pointer;}
.tabs-area li a{padding:15px 15px; }

.tab-content{padding:30px 0px;}

.signature-ceo{width:80%;}

footer .footer-r {flex-wrap: wrap;
}
}
/* ----------------------------------------- 1040 ----------------------------------------- */

@media only screen and (max-width:1040px){
 /* ====================================== HEADER ====================================== */
header{width:100%; padding-bottom:0px;}
header .logo{width:20%; padding:10px 0px 20px 0px; float:left; }

/* ====================================== MAINMENU ====================================== */
#mainmenu{width:80%; float:right; font-size: 15px; text-align: right; margin:25px 0px 0px 0px;}
#mainmenu li{display: inline; list-style:none; margin: 0px; padding: 0px;}
#mainmenu a{color:#fff; text-decoration: none; padding:15px 15px;}



/* ====================================== BANNER AREA ====================================== */
#banner{width:100%; /*color:#2D5298;*/  color:#FFFFFF;}
#banner .content-slide{position:absolute; width:100%; top:0;}
#banner .slide-subtitle{font-size:30px; line-height:35px; font-weight:300;}

#banner .bg-slide-content{background:var(--wpr-bg-5e8a83f9-a9fe-4c21-a32e-03a0bab6f3b2); max-width:767px; padding:15px; margin:5% 0 0 0; border-radius:2px; display:table; box-sizing:border-box;}
#banner .bg-slide-content-v2{/*background:url(https://stg.ecologicallabs.com/wp-content/themes/creative-works/images/bg-slide.png);*/ background: #fffffff7; max-width:767px; padding:15px; margin:5% 0 0 0; border-radius:2px; display:table; box-sizing:border-box;}
#banner .slide-content{font-size:18px; line-height:22px; margin-top:15px;}


/* ====================================== COMPANY OVERVIEW ====================================== */
/* #company-overview .company-l,#company-overview2 .company-l,#company-overview3 .company-l{width:55%; float:right;}
#company-overview .company-r,#company-overview2 .company-r,#company-overview3 .company-r{width:40%; float:left;}
#company-overview .company-r img,#company-overview2 .company-r img,#company-overview3 .company-r img{width:100%;}
#company-overview .title-company,#company-overview2 .title-company,#company-overview3 .title-company{font-size:40px; line-height:50px; color:#3C8677; font-family: 'Raleway', sans-serif; font-weight:300; margin:0px 0px 25px 0px;} */

/* ====================================== SERVICES ====================================== */
#services .tabs-l{width:60%; float:left;}
#services .tabs-r{width:35%; float:right;}
#services .tabs-img{width:90%; margin:0 auto;}
#services .tabs-img img{width:100%;}

.tabs-area{width:100%; font-size:12px;}
.tabs-area li{float:left; list-style:none;  border-left:2px solid #fff; cursor:pointer; min-height:55px; text-align:center; font-size:12px;}
.tabs-area li a{padding:10px 10px; }

.tab-content{padding:30px 0px;}

/* ====================================== BRANDS ====================================== */
#brands{width:100%; padding:20px 0px;}
#brands .brand-l{width:35%; float:left; line-height:80px;}
#brands .brand-r{width:65%; float:right;}
#brands .brand-box{width:25%; float:left; line-height:105px;}
#brands .brand-box img{max-height:105px; max-width:100%;}

/* ====================================== GENERAL ====================================== */
.padding{padding:35px 0px;}
.content-company{font-size:14px; line-height:20px;}
.title-area{font-size:35px; padding:15px 0px;}
}

/* ----------------------------------------- 920 ----------------------------------------- */

@media only screen and (max-width:920px){
 /* ====================================== HEADER ====================================== */
header{width:100%; padding-bottom:0px;}
header .logo{width:20%; padding:10px 0px 20px 0px; float:left; }
.fsection .title-company{line-height: 30px !important;}

/* ====================================== MAINMENU ====================================== */
#mainmenu{width:80%; float:right; font-size:12px; text-align: right; margin:20px 0px 0px 0px;}
#mainmenu li{display: inline; list-style:none; margin: 0px; padding: 0px;}
#mainmenu a{color:#fff; text-decoration: none; padding:15px 10px;}

/* ====================================== BANNER AREA ====================================== */
#banner{width:100%; color:#3d549b;}
#banner .content-slide{position:absolute; width:100%; top:0;}
#banner .slide-subtitle{font-size:25px; line-height:30px; font-weight:400;}

#banner .bg-slide-content{background:var(--wpr-bg-5e8a83f9-a9fe-4c21-a32e-03a0bab6f3b2); max-width:767px; padding:15px; margin:5% 0 0 0; border-radius:2px; display:table; box-sizing:border-box;}
#banner .bg-slide-content-v2{/*background:url(https://stg.ecologicallabs.com/wp-content/themes/creative-works/images/bg-slide.png);*/ background: #fffffff7; max-width:767px; padding:15px; margin:5% 0 0 0; border-radius:2px; display:table; box-sizing:border-box;}
#banner .slide-content{font-size:16px; line-height:20px; margin-top:5px;}

/* ====================================== TESTIMONIALS ====================================== */
#testimonials,#testimonials-sign{width:100%; padding:30px 0px 60px 0px;}
#testimonials .testi-l,#testimonials-sign .testi-l{float:left; width:65%; background:url(https://stg.ecologicallabs.com/wp-content/themes/creative-works/images/testimonials-dots.png) no-repeat center left; font-size:15px; color:#fff; padding-left:140px; margin-top:10px;}
#testimonials .testi-r,#testimonials-sign .testi-l{width:30%; float:right; font-size:14px; margin-top:10px;}

/* ====================================== FOOTER ====================================== */
footer{width:100%; padding:30px 0px 20px 0px;}
footer .footer-l{width:25%; float:left;}
footer .footer-r{width:65%; float:right; font-family: 'Muli', sans-serif; color:#fff; margin-top:15px;}
footer .footer-r-area{width:33.33%; float:left; min-height:100px; box-sizing:border-box;}
footer .big-phone{font-size:24px; line-height:33px;}
footer .normal-phone{font-size:13px; line-height:21px; margin-bottom:25px;}
footer .normal-phone span{color:#7ea1ae; font-size:12px;}

footer #foot_01{width:100%; float:none; clear:both;}
footer #foot_01 .normal-phone{width:50%; float:left;}
footer #foot_02,footer #foot_03{width:50%;}

footer .icon-phone{background:var(--wpr-bg-5dff88e9-fd14-4c51-9125-399cc0e15a19) no-repeat top 7px left 5px; padding:0px 0px 0px 25px;}
footer .icon-email{background:var(--wpr-bg-7eed9865-14f2-4036-8fb8-e2d5fae382c3) no-repeat top 6px left; padding:0px 0px 0px 25px;}
footer .icon-address{background:var(--wpr-bg-5100b16d-e379-464d-90c8-131dfc474c8a) no-repeat top 6px left; padding:0px 0px 0px 25px; color:#7ea1ae;}
footer .footer-title{font-size:14px; text-transform:uppercase; font-weight:700; color:#fff; padding:2px 0px 0px 0px;}

/* ====================================== COPYRIGHT ====================================== */
.border-copyright{width:95%; margin:0 auto; border-top:1px solid #135D60; margin-top:15px; margin-bottom:20px; max-height:1px;}
.copy-l{width:50%; float:left; text-align:left; color:#9BA4A9; font-size:13px; font-family: 'Muli', sans-serif;}
.copy-r{width:50%; float:right; text-align:right; color:#7C93A3; font-size:13px; font-family: 'Muli', sans-serif;}
.copy-r a{color:#7C93A3; text-decoration:none;}

}
/* ----------------------------------------- 780 ----------------------------------------- */
@media (max-width:950px){
#Product .col-sm-2{max-width:320px; width:100% !important; margin:0 auto; margin-bottom:35px;}
.product-detail h3.detail-text{font-size: 13px !important;}
  .qview{font-size:14px!important; top:30%!important; left:19% !important; width:65% !Important;}
.sub-menu li {padding: 0 18px;display: none;overflow: hidden;background-color: #f1f1f1;}
.sub-menu {background-color: #777;color: white;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;}
  .outer-read{width:265px;}
  .inner-read{font-size:12px; padding: 5px 7px;}
  .content-ul ul li::before, .content-ul2 ul li::before{margin-left: -1em;}
  .content-ul3 ul li::before{margin-left: -1em;}
  .content-ul ul li, .content-ul2 ul li, .content-ul3 ul li{margin-left:1.5em;}
  #company-overview .title-company,#company-overview2 .title-company,#company-overview3 .title-company{font-size:22px;}
  .flag{display:none;}
  .flagmo{width:13%; margin-top:15px; margin-left: 8px; float:left; display:block !important;}
  .flagmo img{width:100%;}
  .boxes{display:none;}
  .boxescroll{width: 100%; background:#02112d; z-index:100; display:block;}
   
  .itemfaq2{width:33%; padding:8px 3px; margin:0 auto; font-size:12px;}
  .itemfaq2 .icon{height:16px; width:16px; line-height:14px; font-size:11px; float:right; position:relative; display: grid; align-content: center;}
  .itemfaq2 p {float:left; color:#fff;}
  .markets{top:73px; margin-top:0px;}
  .imgstories{width: 50% !important; margin: 0 auto; margin-bottom:20px;}
  .mapacus{margin-top:60px;}

  
}
/* ----------------------------------------- 768 ----------------------------------------- */
@media only screen and (max-width:950px){
 /* ====================================== HEADER ====================================== */
header{width:100%; padding-bottom:0px; z-index:100; }
header .logo{width:70%; min-width:220px; padding:5px 0px 10px 0px; float:left; }
header .navbar-toggle{position:absolute; top:-3px; right:-18px;}
header .navbar-toggle .icon-bar{background-color:#fff; border-radius:0; height:3px; width:33px; margin-bottom:5px;}
.home .panel-group{margin-top:20px;}


/* ====================================== MAINMENU ====================================== */
#mainmenu{width:100%;}
#mainmenu li{display: block; list-style:none; margin: 0px; padding: 5px 0px; border-bottom:1px solid #fff;}
#mainmenu a{color:#666; text-decoration: none; padding:0px 10px;}
#mainmenu a:hover{background-color:#f5f5f5; transition: background-color 0.9s ease; color:#15595A;}

/* ====================================== BANNER AREA ====================================== */
#banner{width:100%; color:#3d549b;}
#banner .content-slide{position:absolute; width:100%; top:0;}
#banner .slide-subtitle{font-size:24px; line-height:30px;}

#banner .carousel-indicators{width:90%; left:0; margin-left:5%; margin-right:5%; text-align:center;}

#banner .bg-slide-content{background:url(https://stg.ecologicallabs.com/wp-content/themes/creative-works/images/bg-slide.png); max-width:600px; padding:10px; margin:5% 0 0 0; border-radius:2px; display:table; box-sizing:border-box;}
#banner .bg-slide-content-v2{/*background:url(https://stg.ecologicallabs.com/wp-content/themes/creative-works/images/bg-slide.png);*/ background: #fffffff7; max-width:600px; padding:10px; margin:0% 0 0 0; border-radius:2px; display:table; box-sizing:border-box;}
#banner .slide-content{font-size:16px; line-height:20px; margin-top:0px;}
#banner .slide-bg{min-height:350px;}
  .title-page-water h1{text-align:center;}

/* ====================================== COMPANY OVERVIEW ====================================== */
/* #company-overview .company-l,#company-overview2 .company-l,#company-overview3 .company-l{width:95%; float:none; margin:0 auto;}
#company-overview .company-r,#company-overview2 .company-r,#company-overview3 .company-r{width:95%; float:none; margin:0 auto; margin-top:25px;}
#company-overview .company-r img,#company-overview2 .company-r img,#company-overview3 .company-r img{width:100%;}
#company-overview .title-company,#company-overview2 .title-company,#company-overview3 .title-company{font-size:40px; line-height:50px; color:#3C8677; font-family: 'Raleway', sans-serif; font-weight:300; margin:0px 0px 25px 0px;} */

/* ====================================== SERVICES ====================================== */
#services .tabs-l{width:100%; float:none;}
#services .tabs-r{width:50%; float:left; padding:0px 10px 5px 0px;}
#services .tabs-img{width:100%; margin:0 auto;}
#services .tabs-img img{width:100%;}
.cont_asia{font-size:14px; line-height:20px;}
.tabs-area{width:100%; font-size:11px; border-top:0px;}
.tabs-area .content{width:100%;}
.tabs-area li{float:none; list-style:none;  border-left:0px; border-top:1px solid #2458AE; cursor:pointer; width:100%; min-height:auto; text-align:center;}
.tabs-area li a{padding:5px 0px; }

.tab-content{padding:20px 0px;}

.read-more-services{float:right;}

.btn-services{display:block; background-color:#132E5B; float:right}
.navbar-collapse{border-top:0px;}
  .codegena{margin-bottom:20px;}
  .asiadir{width:30%;}

/* ====================================== TESTIMONIALS ====================================== */
#testimonials{width:100%; padding:30px 30px 40px 30px; box-sizing:border-box;}
#testimonials .testi-l,#testimonials-sign .testi-l{float:none; width:100%; background:var(--wpr-bg-07928ddf-a2fc-4c38-b8fa-51167225c46a) no-repeat top left; font-size:15px; color:#fff;  margin-top:10px; padding:40px 0px 0px 90px;}
#testimonials .testi-r,#testimonials-sign .testi-r{width:100%; float:none; font-size:14px; margin-top:10px; box-sizing:border-box; padding-left:90px;}
#testimonials .left,#testimonials-sign .left{left:-40px;}
#testimonials .right,#testimonials-sign .right{right:-40px;}
#testimonials .carousel-control,#testimonials-sign .carousel-control{max-width:50px;}

/* ====================================== NEWS ====================================== */
#news{width:100%; padding:10px 0px 5px 0px;}
#news .content{width:100%;}
#news .news-box-area{width:100%; float:none; margin-bottom:15px;}
#news .date-area{width:100%; font-size:15px; font-weight:700;}
#news .mount{width:60%; float:left;}
#news .year{width:40%; float:right;}
#news .date-area{padding:10px 3%; box-sizing:border-box;}
#news .news-box-content{box-sizing:border-box; padding:20px 3%; font-size:14px; float:left;}
#news .news-box-title{font-size:22px; margin-bottom:10px;}

/* ====================================== BRANDS ====================================== */
#brands{width:100%; padding:20px 0px;}
#brands .brand-l{width:35%; float:left; line-height:40px;}
#brands .brand-r{width:65%; float:right;}
#brands .brand-box{width:23%; float:left; line-height:70px; margin:0% 1%; text-align:center;}
#brands .brand-box img{max-height:70px; max-width:100%;}

/* ====================================== FOOTER ====================================== */
footer{width:100%; padding:20px 0px 20px 0px;}
footer .footer-l{width:25%; float:left;}
footer .footer-r{width:65%; float:right; color:#fff; margin-top:15px;}
footer .footer-r-area{width:33.33%; float:left; }
footer .big-phone{font-size:22px; line-height:30px;}
footer .normal-phone{font-size:13px; line-height:20px; margin-bottom:25px;}
footer .normal-phone span{color:#7ea1ae; font-size:11px;}

footer #foot_01{width:100%; float:none; clear:both;}
footer #foot_01 .normal-phone{width:50%; float:left;}
footer #foot_02,footer #foot_03{width:50%;}

footer .icon-phone{background:var(--wpr-bg-5dff88e9-fd14-4c51-9125-399cc0e15a19) no-repeat top 7px left 5px; padding:0px 0px 0px 25px;}
footer .icon-email{background:var(--wpr-bg-7eed9865-14f2-4036-8fb8-e2d5fae382c3) no-repeat top 6px left; padding:0px 0px 0px 25px;}
footer .icon-address{background:var(--wpr-bg-5100b16d-e379-464d-90c8-131dfc474c8a) no-repeat top 6px left; padding:0px 0px 0px 25px; color:#7ea1ae;}
footer .footer-title{font-size:12px; padding:2px 0px 0px 0px;}

/* ====================================== COPYRIGHT ====================================== */
.border-copyright{width:95%; margin:0 auto; border-top:1px solid #135D60; margin-top:15px; margin-bottom:15px; max-height:1px;}
.copy-l{width:50%; float:left; text-align:left; font-size:12px;}
.copy-r{width:50%; float:right; text-align:right; font-size:12px;}
.copy-r a{color:#7C93A3; text-decoration:none;}

/* ====================================== GENERAL ====================================== */
.padding{padding:35px 0px;}
.content-company{font-size:14px; line-height:20px;}
.title-area{font-size:30px; padding:15px 0px;}

/* ====================================== SUB MENU ====================================== */
.sub-menu {position: absolute;margin-left: 25% !important;background-color: #e4e4e4;width: 50%;z-index: 1;box-shadow: 10px 10px 5px #aaaaaa;}
.sub-menu a {float: left;text-decoration: none;}
.sub-menu li {padding: 20px 0px !important;}
/* ====================================== MODAL ====================================== */
.bg-modal{height:90% !important;top:30px!important}
.modal-content .md-space2{margin:30px 0;}
  .itemfaq{margin-bottom:25px;}
  .imapsMapImage .imapsLabel-group{font-size: 4px; transform: translate(0, 0) scale(0.6, 0.6);}
  .imapsMapImage .imapsSprite-group{ transform: translate(0, 0) scale(0.6, 0.6);}

  .title-page h1{padding:10px;}
  .title-page h1,.title-page.internalban h1{font-size:22px;}
}
/* ----------------------------------------- 680 ----------------------------------------- */

@media only screen and (max-width:680px){
/* ====================================== FOOTER ====================================== */
footer{width:100%; padding:20px 0px 20px 0px;}
footer .footer-l{width:100%; float:none; text-align:center;}
footer .footer-r{width:100%; max-width:215px; float:none; color:#fff; margin-top:15px; margin:0 auto; margin-top:30px;}
footer .footer-r-area{width:100%; float:none; }
footer .big-phone{font-size:22px; line-height:30px;}
footer .normal-phone{font-size:13px; line-height:20px; margin-bottom:25px;}
footer .normal-phone span{color:#7ea1ae; font-size:11px;}
footer #foot_01{width:100%; float:none; clear:both;}
footer #foot_01 .normal-phone{width:100%; float:none;}
footer #foot_02,footer #foot_03{width:100%;}

/* ====================================== COPYRIGHT ====================================== */
.border-copyright{width:95%; margin:0 auto; border-top:1px solid #135D60; margin-top:15px; margin-bottom:15px; max-height:1px;}
.copy-l{width:100%; float:none; text-align:center; font-size:12px;}
.copy-r{width:100%; float:none; text-align:center; font-size:12px; margin-top:15px;}
.copy-r a{color:#7C93A3; text-decoration:none;} 

}
/* ----------------------------------------- 600 ----------------------------------------- */
@media(max-width:600px){.product-detail .img_pro img{width: 50%;}.modal-content1 h4{text-align: center;}
.bg-modal{background: linear-gradient(to right, rgba(25, 39, 65, 0.95) 0%, rgba(46, 106, 107, 0.95) 100%) !important}
  .md-space3 p{font-size:14px!important}
  .list_icon_cases{display:grid;gap:20px;padding-left:0; grid-template-columns:1fr 1fr;}
  .list_icon_cases img{width:120px;}
}

/* ----------------------------------------- 520 ----------------------------------------- */

@media only screen and (max-width:520px){
 /* ====================================== HEADER ====================================== */
header{width:100%; padding-bottom:0px; }
.addservice{margin:20px 0;}
header .logo img{min-width:auto; width:100%;}
header .navbar-toggle{top:0;}
  .variabled{display: none !important;}
  .barlogo .conlogo{height: auto;}
   .barlogo .bra3 .conlogo, .barlogo .bra4 .conlogo{height: 60px;}
   img.brand3{width: 70%; margin:0 auto;}
	#news .content{ grid-template-columns: 1fr;}
/* ====================================== MAINMENU ====================================== */
#mainmenu{font-size:13px; font-weight:400;}

/* ====================================== BANNER AREA ====================================== */
#banner{width:100%; color:#3d549b;}
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right{top:35%;}
#banner .content-slide{position:relative; width:100%;}
.carousel-indicators{bottom: unset !important; top:10px;}
#banner .slide-subtitle{font-size:20px; line-height:25px;}
#banner .carousel-indicators{width:90%; left:0; margin-left:5%; margin-right:5%; text-align:center;}
#banner .bg-slide-content{background:url(https://stg.ecologicallabs.com/wp-content/themes/creative-works/images/bg-slide.png); max-width:600px; padding:10px; margin:5% 0 0 0; border-radius:2px; display:table; box-sizing:border-box;}
#banner .bg-slide-content-v2{/*background:url(https://stg.ecologicallabs.com/wp-content/themes/creative-works/images/bg-slide.png);*/ background: #fffffff7; max-width:600px; padding:10px; margin:0 0 0 0; border-radius:2px; display:table; box-sizing:border-box;}
#banner .slide-content{font-size:14px; line-height:18px; margin-top:10px; text-align:left;}
#banner .slide-bg{min-height:340px;}
/* ====================================== COMPANY OVERVIEW ====================================== */
/* #company-overview .company-l,#company-overview2 .company-l,#company-overview3 .company-l{width:95%; float:none; margin:0 auto;}
#company-overview .company-r,#company-overview2 .company-r,#company-overview3 .company-r{width:95%; float:none; margin:0 auto; margin-top:15px;}
#company-overview .title-company,#company-overview2 .title-company,#company-overview3 .title-company{font-size:40px; line-height:40px; font-weight:300; margin:0px 0px 10px 0px;} */
/* ====================================== SERVICES ====================================== */
#services{padding-bottom:15px;}
#services .tabs-l{width:90%; margin:0 auto;}
#services .tabs-r{width:100%; float:none; padding:0px 0px 20px 0px;}
#services .tabs-img{width:100%; margin:0 auto;}
#services .tabs-img img{width:100%;}

.tabs-area{width:100%; font-size:11px; border-top:0px;}
.tabs-area .content{width:100%;}
.tabs-area li{float:none; list-style:none;  border-left:0px; border-top:1px solid #2458AE; cursor:pointer; width:100%; min-height:auto; text-align:center;}
.tabs-area li a{padding:5px 0px; }

.tab-content{padding:20px 0px 10px 0px;}

.read-more-services{float:none; text-align:center;}

.btn-services{display:block; background-color:#132E5B;}
.navbar-collapse{border-top:0px;}

/* ====================================== TESTIMONIALS ====================================== */
#testimonials,#testimonials-sign{width:100%; padding:20px 30px 30px 30px; box-sizing:border-box;}
#testimonials .testi-l,#testimonials-sign .testi-l{float:none; width:100%; font-size:14px; margin-top:10px; padding:40px 0px 0px 0px;}
#testimonials .testi-r,#testimonials-sign .testi-r{width:100%; float:none; font-size:12px; margin-top:10px; box-sizing:border-box; padding-left:0px;}

/* ====================================== NEWS ====================================== */
#news{width:100%; padding:10px 0px 5px 0px;}
#news .content{width:100%;}
#news .news-box-area{width:100%; float:none; margin-bottom:15px;}
#news .date-area{width:100%; font-size:13px; font-weight:700;}
#news .mount{width:60%; float:left;}
#news .year{width:40%; float:right;}
#news .date-area{padding:10px 7%; box-sizing:border-box;}
#news .news-box-content{box-sizing:border-box; padding:20px 7%; font-size:13px;}
#news .news-box-title{font-size:20px; margin-bottom:10px;}

/* ====================================== BRANDS ====================================== */
#brands{width:100%; padding:30px 0px;}
#brands .brand-l{width:100%; float:none; line-height:30px; text-align:center;}
#brands .brand-r{width:100%; float:none;}
#brands .brand-box{width:100%; float:none; line-height:normal; margin:25px 0; text-align:center;}
#brands .brand-box img{max-height:70px; max-width:50%}
#brands .title-area{padding:0px 0px; text-align:center;}

}
/* ----------------------------------------- 430 ----------------------------------------- */
@media only screen and (max-width: 430px){
.sub-menu {width: 80%;margin-left: 5% !important;}
.sub-menu a {padding: 2px 5px !important;color: #000 !important;}

}
/* ----------------------------------------- 380 ----------------------------------------- */

@media only screen and (max-width:380px){
/* ====================================== BANNER AREA ====================================== */
#banner .carousel-indicators{width:90%; left:0; margin-left:5%; margin-right:5%; text-align:center;}
#banner .slide-bg{min-height:310px;}

}
/* ----------------------------------------- 1441 - more ----------------------------------------- */
@media (min-width: 1441px) {
  .btn-area{padding: 0px 40px;}
  .btn-l{padding: 0 120px 0 40px;}
  .btn-r{padding: 0 40px;}
  .case-pad2{padding: 0 30px;}
  .case-title{font-size:36px !important;}
  .case-text, .detail-text {font-size:16px;}
  .content-water p {font-size: 20px; padding: 0 20px 0 50px;} 
  .contact-water2 {padding: 15% 10% 9% 10%;}  
  .image-section-22 img{height:350px;}
  .product-detail img{height:130px;}
  .tab-03,.tab-04 {height: 650px;}
  .tab-03{margin-bottom:20px !important;} 
  .water-1{padding-top:50px;}
  .water-2{padding-top:20px;}
  .modal2{top:-20%!important}
}

/* ----------------------------------------- 1440 - 1280 ----------------------------------------- */
@media (min-width: 1280px) and (max-width: 1440px) {
  .btn-area{padding: 10px 40px;}
  .btn-l{padding: 0 120px 0 40px;}
  .btn-r{padding: 0 40px;}
  .case-pad2{padding: 0 30px;}
  .case-title{font-size:36px !important;}
  .case-text, .detail-text {font-size:14px;}
  .clear-product2{height:60px;}
  .col-sm-8{padding: 0px;width: 59%;}
  .content-water p {font-size: 20px;}
  .contact-water2 {padding: 15% 10% 9% 10%;}
  .image-section-22{padding-right: 0px;}
  .image-section-22 img{height:350px;}
  .product-detail img{height:130px;}
  .product-bullets ul {padding-left:65px}
  .tab-03,.tab-04 {height: 560px;}
  .tab-03{margin-bottom:30px !important;} 
  .water-1{padding-top:50px;}
  .water-2{padding-top:20px;}
}

/* ----------------------------------------- 1279 - 1180 ----------------------------------------- */

@media (min-width: 1180px) and (max-width: 1279px) {  
  .btn-area{padding: 10px 40px;}
  .btn-l{padding: 0 120px 0 40px;}
  .btn-r{padding: 0 15px;}
  .case-pad{margin-top:150px;}
  .case-pad2{padding: 0 30px;}
  .case-title{font-size:36px !important;}
  .case-text, .detail-text {font-size:14px;}
  .clear-product,.clear-product2,.product-bullets,.product-bullets2, .product-bullets li,.product-bullets2 li, .labels span{font-size:12px;}
  .clear-product{height:30px;}
  .clear-product2{height:60px;}
  .content-water p {font-size: 20px; padding: 0 20px 0 50px;}
  .footer-r2{padding: 0 20px;}
  .image-section-22{padding-right: 0px;}
  .image-section-22 img{height:350px;}
  .labels{padding-top:10px;}
  .product-detail img{height:130px;}
  .second-line2{padding-left: 0px;}
  .tab-03,.tab-04 {height: 490px;}
  .tab-03{margin-bottom:20px !important;}
  .water-1{padding-top:50px;}
  .water-2{padding-top:20px;}
}

/* ----------------------------------------- 1179 - 1024 ----------------------------------------- */

@media (min-width: 1023px) and (max-width: 1181px) {
  .btn-area{padding: 10px 40px;}
  .btn-l{padding: 0 80px 0 0;}
  .case-pad{margin-top:30px;}
  .case-pad2{padding: 0 30px;}
  .case-title{font-size:20px !important; line-height: 30px !important;}
  .case-text,.detail-text {font-size:14px;}
  .clear-product,.clear-product2,.product-bullets,.product-bullets2, .product-bullets li,.product-bullets2 li, .labels span{font-size:12px;}
  .clear-product{height:45px;}
  .clear-product2{height:60px;}
  .content-water p {font-size: 20px; padding: 0 20px 0 40px;}
  .contact-water {height: 400px;}
  .image-section-22{padding-right: 0px;}
  .image-section-22 img{height:350px;}
  .footer-r2{padding: 0 20px;}
  .labels{padding-top:0px;}
  .labels span {font-size: 12px;}
  .product-detail img{height:130px;}
  .second-line2{padding-left: 0px;}
  .tab-03,.tab-04 {height: 460px;}
  .tab-03{margin-bottom:20px !important;}
  .tab-button {font-size: 20px;}
  .water-1{padding-top:50px;}
  .water-2{padding-top:5px;}
  #mainmenu .mega-menu > li > a.mega-menu-link{font-size:12px !important;}
  a.mega-menu-link{padding: 0px 5px 0px 5px !important;}
}

/* ----------------------------------------- 765 - 701  ----------------------------------------- */

@media (min-width: 701px) and (max-width: 765px) {
  .btn-area{padding: 0px;}
  .btn-l, .btn-r{padding: 0 56px;}
  .case-pad2{padding: 0 30px;}
  .case-title{font-size:20px !important; line-height: 30px !important; padding-top: 20px;}
  .case-text{font-size:12px;}
  .case-image,.case-image2{padding: 20px 0 0 0;}
  .case-pad{padding-top: 0px;}
  .content-water p {font-size: 20px; padding: 0 20px 0 40px;}
  .contact-water {height: 200px;}
  .contact-water2 {padding-top: 10%;}
  .contact-water3 {font-size: 22px;}
  .clear-product,.clear-product2 {font-size: 14px; height: 30px;}
  #defaultOpen2{padding: 10px 50px;}
  .detail-text {font-size: 16px;}
  .footer-r2{width: 100%; max-width: 215px; float: none; margin: 0 auto;}
  .image-section-22{padding-left: 25%; padding-right: 25%;}
  .image-section-22 img{height:350px;}
  .it{height: 300px;}
  .labels span {font-size: 12px;}
  .list-title{font-size:22px;}
  .product-detail{padding-bottom:20px;}
  .product-bullets,.product-bullets li,.product-bullets2,.product-bullets2 li {font-size:14px;}
  .second-line2{padding-left: 0px;}
  .sec2 img{padding-top:30px;}
  .sec2 img,.water-1{padding-left:60px;}
  .sec3 ul,.sec5 ul{padding-top:170px;}
  .second-line{padding-left: 0px;}  
  .tab-button {font-size: 20px; margin-bottom: 20px;}
  .tab-03,.tab-04 {height: 300px;}
  .tab-03{margin-top:15px;}
  .text-section-2{padding-left:60px;}
  .title-company{text-align: center;}
  .title-page-water h1{font-size:30px;}
  .water-2{padding-top:20px;}
}

/* ----------------------------------------- 700 - 600  ----------------------------------------- */
@media (min-width: 600px) and (max-width: 700px) {
  .btn-area{padding: 0px;}
  .btn-l, .btn-r{padding: 0 56px;}
  .case-pad2{padding: 0 30px;}
  .case-title{font-size:20px !important; line-height: 30px !important; padding-top: 20px;}
  .case-text{font-size:12px;}
  .case-image,.case-image2{padding: 20px 0 0 0;}
  .case-pad{padding-top: 0px;}
  .content-ul3 span{ padding-left:23%;}
  .content-ul3 ul li::before{padding-left: 25%; padding-right: 3%;}
  .content-water p {font-size: 18px; padding: 0 20px 0 40px;}
  .contact-water {height: 200px;}
  .contact-water2 {padding-top: 10%;}
  .contact-water3 {font-size: 22px;}
  .clear-product,.clear-product2 {font-size: 14px; height: 30px;}
  #defaultOpen2{padding: 10px 50px;}
  .detail-text {font-size: 16px;}
  .footer-r2{width: 100%; max-width: 215px; float: none; margin: 0 auto;}
  .image-section-22{padding-left: 25%; padding-right: 25%;}
  .image-section-22 img{height:350px;}
  .it{height: 300px;}
  .labels span {font-size: 12px;}
  .list-title{font-size:22px;}
  .product-detail{padding-bottom:20px;}
  .product-bullets,.product-bullets2,.product-bullets li,.product-bullets2 li {font-size:14px;}
  .second-line2{padding-left: 0px;}
  .sec2 img{padding-top:30px;}
  .sec2 img,.water-1{padding-left:60px;}
  .sec3 ul,.sec5 ul{padding-top:170px;}
  .second-line{padding-left: 0px;}  
  .tab-button {font-size: 20px; margin-bottom: 20px;}
  .tab-03{margin-top:15px;}
  .text-section-2{padding-left:60px;}
  .title-company{text-align: center;}
  .title-page-water h1{font-size:30px;}
  .water-2{padding-top:20px;}
}

/* ----------------------------------------- 599 - 430  ----------------------------------------- */
@media (min-width: 430px) and (max-width: 599px) {
  .btn-area{padding: 0px;}
  .btn-l, .btn-r{padding: 0 45px;}  
  .case-pad2{padding: 0 30px;}
  .case-title{font-size:20px !important; line-height: 30px !important; padding-top: 20px;}
  .case-text{font-size:12px;}
  .case-image,.case-image2{padding: 20px 0 0 0;}
  .case-pad{padding-top: 0px;}
  .content-ul span{ padding-left:20px;}
  .content-water p {font-size: 18px; padding: 0 20px 0 40px;}
  .contact-water {height: 200px;}
  .contact-water3 {font-size: 22px;}
  .clear-product,.clear-product2 {font-size: 14px; height: 30px;}
  .detail-text {font-size: 16px;}
  .footer-r2{width: 100%; max-width: 215px; float: none; margin: 0 auto;}
  .image-section-22{padding-left: 25%; padding-right: 25%;}
  .image-section-22 img{height:250px;}
  .it{height: 300px;}
  .labels span {font-size: 12px;}
  .list-title,.tab-button{font-size:15px; }
  .list-title{padding: 10px 10px;}
  .product-detail{padding-bottom:20px;}
  .product-bullets,.product-bullets2,.product-bullets li,.product-bullets2 li {font-size:14px;}
  .second-line,.second-line2{padding-left: 0px;}
  .sec2 img{padding-top:30px;}
  .sec3 ul,.sec5 ul{padding-top:120px;}
  .tab-03{margin-top:15px;}
  .title-page-water h1, .tab-title {font-size: 30px;}
  .title-company{text-align: center;}
  .water-2{padding-top:20px;}
  .water4{margin-top:0px !important;}
  
}

/* ----------------------------------------- 429 - 375  ----------------------------------------- */
@media (min-width: 375px) and (max-width: 429px) {
  .btn-area{padding: 0px;}
  .btn-l, .btn-r{padding: 5px 60px;}  
  .case-pad2{padding: 0 30px;}
  .case-title{font-size:20px !important; line-height: 30px !important; padding-top: 20px; text-align: left !important;}
  .case-text{font-size:12px;}
  .case-image,.case-image2{padding: 20px 0 0 0;}
  .case-pad{padding-top: 0px;}
  .content-ul span{ padding-left:10px;}
  .content-water p {font-size: 15px; padding: 0 20px 0 40px;}
  .contact-water {height: 200px;}
  .contact-water3 {font-size: 22px;}
  .clear-product,.clear-product2 {font-size: 14px; height: 30px;}
  .detail-text {font-size: 16px;}
  #defaultOpen2 {padding: 10px 40px;}
  .footer-r2{width: 100%; max-width: 215px; float: none; margin: 0 auto;}
  .image-section-22{padding-left: 25%; padding-right: 25%;}
  .image-section-22 img{height:250px;}
  .it{height: 200px;}
  .labels span {font-size: 15px; border-radius: 20px; padding: 5px 10px;}
  .list-title,.tab-button{font-size:14px; }
  .list-title{padding: 10px 10px;}
  .product-detail{padding-bottom:20px;}
  .product-bullets,.product-bullets2,.product-bullets li,.product-bullets2 li {font-size:14px;}
  .second-line2{padding-left: 0px;}
  .sec2 img{padding-top:30px;}
  .sec3 ul,.sec5 ul{padding-top:120px;}
  .second-line{padding-left: 0px;}
  .tab-03,.tab-04 {height: 172px;}
  .tab-03{margin-top:15px; margin-bottom: 35px;}
  .tab-04{margin-bottom:0px;}
  .tab button {padding: 14px 30px;}
  .title-page-water h1, .tab-title {font-size: 24px;}
  .title-company{text-align: center;}
  .water-2{padding-top:20px;}
  .water4{margin-top:0px !important;}
}

/* ----------------------------------------- 374 - 325  ----------------------------------------- */
@media (min-width: 320px) and (max-width:950px) {
  .btn-area{padding: 0px;}
  .btn-l, .btn-r{padding: 5px 60px;}  
  .case-pad2, .about-section-01{padding: 0 30px;}
  .case-title{font-size:20px !important; line-height: 30px !important; text-align: left !important;}
  .case-text{font-size:15px;}
  .case-image,.case-image2{padding: 20px 0 0 0;}
  .case-pad{padding-top: 0px;}
  .content-ul span{ padding-left:10px;}
  .content-water p {font-size: 15px; padding: 0 20px;}
  .contact-water {height: 200px;}
  .contact-water3 {font-size: 22px;}
  .clear-product {font-size: 14px; height: 30px;}
  .clear-product2 {font-size: 14px; height: 60px;}
  .detail-text {font-size: 16px;}
  #defaultOpen2{padding: 10px 40px;}
  .image-section-22{padding-left: 25%; padding-right: 25%;}
  .image-section-22 img{height:250px;}
  .it{height: 295px;}
  .labels span {font-size: 15px; border-radius: 20px; padding: 5px 10px;}
  .list-title,.tab-button{font-size:13px; }
  .list-title{padding: 10px 10px;}
  .product-detail,.tab-title{padding-bottom:10px;}
  .product-bullets,.product-bullets2,.product-bullets li,.product-bullets2 li {font-size:14px;}
  .second-line2{padding-left: 0px;}
  .sec2 img,.tab-title{padding-top:10px;}
  .sec3 ul,.sec5 ul{padding-top:90px;}
  .second-line{padding-left: 0px;}
  .tab-03,.tab-04 {height: 148px;}
  .tab-03{margin-top:15px; margin-bottom: 35px;}
  .tab-04{margin-bottom:0px;}
  .tab button {padding: 14px 25px;}
  .title-page-water h1, .tab-title {font-size: 26px;}
  .title-company{text-align: center;}
  .water-2{padding-top:20px;}
  .water4{margin-top:0px !important;}
  .content-ul ul li::before, .content-ul2 ul li::before{margin-left: -0.6em;}
}
@media (min-width: 325px) and (max-width: 375px) {
.footer-r2{width: 100%; max-width: 215px; float: none; margin: 0 auto;}
}
/* ----------------------------------------- Overflow  ----------------------------------------- */
#contact-us,#water{overflow:hidden;}

/* ----------------------------------------- Banner Product ----------------------------------------- */
@media (min-width: 1360px) and (max-width: 1440px) {
  .tab-03,.tab-04 {height: 560px;}
}

@media (min-width: 1281px) and (max-width: 1359px) {
  .tab-03,.tab-04 {height: 518px;}
}

@media (min-width: 980px) and (max-width: 1023px) {
  .tab-03,.tab-04 {height: 400px;}
  .tab-button{font-size: 24px;}
}

@media (min-width: 870px) and (max-width: 979px) {
  .tab-03,.tab-04 {height: 360px;}
  .tab-button{font-size: 24px;}
  
  .btn-area{padding: 0px 40px;}
  .btn-l{padding: 0 80px 0 0;}
  .case-pad{margin-top:30px;}
  .case-pad2{padding: 0 30px;}
  .case-title{font-size:20px !important; line-height: 30px !important;}
  .case-text,.detail-text {font-size:14px;}
  .clear-product,.clear-product2,.product-bullets,.product-bullets2, .product-bullets li,.product-bullets2 li, .labels span{font-size:12px;}
  .clear-product{height:45px;}
  .clear-product2{height:60px;}
  .content-water p {font-size: 23px; padding: 0 20px 0 40px;}
  .contact-water {height: 300px;}
  .footer-r2{padding: 0 20px;}
  .labels{padding-top:0px;}
  .labels span {font-size: 12px;}
  .product-detail img{height:130px;}
  .second-line2{padding-left: 0px;}
  .tab-03,.tab-04 {height: 460px;}
  .tab-03{margin-bottom:20px !important;}
  .tab-button {font-size: 20px;}
  .water-1{padding-top:50px;}
  .water-2{padding-top:20px;}
}

@media (min-width: 770px) and (max-width: 879px) {
  .tab-03,.tab-04 {height: 360px;}
  .tab-button{font-size: 19px;}
  .btn-area{padding: 0px 40px;}
  .btn-l{padding: 0 80px 0 0;}
  .case-pad{margin-top:30px;}
  .case-pad2{padding: 0 30px;}
  .case-title{font-size:20px !important; line-height: 30px !important;}
  .case-text,.detail-text {font-size:14px;}
  .clear-product,.clear-product2,.product-bullets,.product-bullets2, .product-bullets li,.product-bullets2 li, .labels span{font-size:12px;}
  .clear-product{height:45px;}
  .clear-product2{height:60px;}
  .content-water p {font-size: 23px; padding: 0 20px 0 40px;}
  .contact-water {height: 300px;}
  .footer-r2{padding: 0 20px;}
  .labels{padding-top:0px;}
  .labels span {font-size: 12px;}
  .product-detail img{height:130px;}
  .second-line2{padding-left: 0px;}
  .tab-03,.tab-04 {height: 460px;}
  .tab-03{margin-bottom:20px !important;}
  .tab-button {font-size: 20px;}
  .water-1{padding-top:50px;}
  .water-2{padding-top:20px;}
}

@media (min-width: 764px) and (max-width: 769px) {
  #defaultOpen2{padding: 10px 70px; margin-bottom:20px;}
  .tab-03,.tab-04 {height: 300px;}
  .tab-03{margin-top:20px;}
  .tab-button{font-size: 24px;}

}

@media (min-width: 650px) and (max-width: 700px) {
  .tab-03,.tab-04 {height: 300px;}
}

@media (min-width: 600px) and (max-width: 649px) {
  .tab-03,.tab-04 {height: 255px;}
}

@media (min-width: 540px) and (max-width: 599px) {
  #defaultOpen2{padding: 10px 40px; margin-bottom:20px;}
  .tab-03,.tab-04 {height: 240px;}
}

@media (min-width: 460px) and (max-width: 539px) {
  #defaultOpen2{padding: 10px 40px; margin-bottom:20px;}
  .tab-03,.tab-04 {height: 215px;}
}

@media (min-width: 430px) and (max-width: 459px) {
  #defaultOpen2{padding: 10px 40px; margin-bottom:20px;}
  .tab-03,.tab-04 {height: 175px;}
  .product-bullets li,.product-bullets2 li  {padding-left: 0px;}
}

@media(min-width:890px){.sitemap-posttype-brands{margin-top:-165px;padding-left:25px;}}

/* ====================================== MENU ====================================== */

.menu-item--1, .submenu-expand {
  display:none !important;
}
.sub-menu {
  display: none;
  position: absolute;
  left: 1;
  background-color: #125657;
  width: 30%;
  z-index: 1;
}
.sub-menu a:hover {
    width: 100%;
}
.sub-menu a {
  float: left;
  color: white;
  text-decoration: none;
}

.menu-item:hover .sub-menu {
  display: block;
}


@media only screen and (min-width: 1290px){
  .sub-menu a {
    padding: 10px 75px 10px 50px !important;
  }

  #modal-pro2 .md-space3{padding-top:2%}
}

@media only screen and (min-width: 800px){
  .sub-menu a:hover {
    background-color: #337ab7 !important;
    text-align: left;

  }

}



@media (min-width: 1020px) and (max-width: 1280px) {
  .sub-menu {
    width: 35%;
  }

  .sub-menu li {
    padding: 20px 0px !important;
  }
  .sub-menu a {
    padding: 5px 5px !important;
  } 
  #modal-pro2{padding-top:7%!important}
}

@media (min-width: 1081px) and (max-width: 1288px) {
  .sub-menu a {
    padding: 10px 74px !important;
  }
  #modal-product1 .md-space1,#modal-product1 .md-space3{padding-top:5%}
}

@media (min-width: 1020px) and (max-width: 1080px) {
  .sub-menu a {
    padding: 10px 55px !important;
  }
}
@media (min-width: 1240px){
.case-image22 img{padding-top:15px;}
}
@media (min-width:1100px){
.modal2{top:-21%!important}
}
@media (min-width: 1120px) and (max-width: 1239px){
.case-image22 img{padding-top:10px;}
}
@media (min-width: 800px){
  .product-bullets2 ul {
    padding-left: 30%;
  }
  .pad2 {
    float: right;
  }
  .md-space3 p{padding-top:0px}
  .modal-content1{padding-top:1%!important}
}


 /* ====================================== Modal Text ====================================== */
.modal1 {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
  z-index:99999;
}
.modal-content1 {
  background-color: transparent;
  padding: 0;
  width: 80%;
  height: auto;
  border-radius: 0.5rem 0.5rem 30px 30px;
  overflow: hidden;
  margin:0 auto
}
.modal-content1 h4, .modal-content1 ul li{color: white;text-align: center;font-weight: lighter;}
 .modal-content1 p{text-align: left; color:#fff;}
.modal-content p, .modal-content ul li{font-size: 16px !important;}
.modal-content .btn-label, .modal-content .btn-sds{
width: 60%;
  display: block;
   margin:0 auto;
  margin-top:20px;
  color: white;
  padding: 5px;
  border: 1px solid white;
  margin-bottom: 10px;
  border-radius: 50px;
  text-align:center;
}
.modal-content .md-space2{text-align:center; float:left;}
.modal-content .md-space1{text-align:left;}
.part{ white-space:normal;}
.modal-content1 h1{
margin-top: 0;
}
.modal-content1 .product-bullets ul{
  padding-left: 15px;
}
.modal-content{border:none;}
.show-modal {
  opacity: 1;
  visibility: visible;
  transform: scale(1.0);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
 /* ====================================== 404 and thank ====================================== */
.title-404{
  font-family: 'Raleway', sans-serif;
  color: #132c3d;
  font-weight: 300;
  font-size: 25px;
  text-transform: uppercase;
}

.page-404{
  background: #e0e0e0;
  padding: 40px 0px 0px 10px;
}

.thank-title{
  color: #3C8677;
  font-family: 'Raleway', sans-serif;
  font-weight: 300;
  padding-top:20px;
}
.sitemap-posttype-page{float:left;}
.product-detail .img_pro img{height: auto;width: 100%;}
.bg-modal .product-bullets{color: white;}
.product-detail h3.detail-text{font-size: 22px;font-weight: 400; text-align:center; height:85px; display:grid;}
.qview{background: #009a7ede;color: white;padding: 10px;position: absolute;display: block;text-align: center;width: 80%;margin: auto;top: 40%;left:10%;z-index: 1000;font-size: 20px;border-radius: 5px;opacity: 0;transition: all 0s;}
.product-detail:hover .qview{opacity: 1;}
/* FILTER ____________________________________________*/
.filter .page-header { background: #F3F3F3; overflow: hidden; padding-bottom:0; margin: 0; }
.filter .page-header h1 { margin-bottom: 20px; }
.filter .content { padding: 20px 0; }
.filter .page-header > .content { padding-top: 0; padding-bottom: 0; }
.filter .content article { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #F3F3F3; }
.filter .searchandfilter ul { padding: 0;  }
.filter a { color: #326d5b; }
.filter article h3 a { font-weight: normal; font-family: 'Raleway', sans-serif; font-weight: 300; }
.searchandfilter h4, input, select, button, .dropdown-menu-f li label, .ae-select {  font-family: 'Raleway', sans-serif; font-weight: 300;  }
.searchandfilter h4 { display: inline-block;  margin-right: 10px; }
.searchandfilter select { width: 250px;   }
.searchandfilter input[type=submit] { 
  background: #fff;
  border-radius: 10px;
  border: 2px solid rgb(46,99,114);
  padding: 2px 20px;
}
.dropdown-wrapper {
  height: auto;
  width: 100%;
  margin-bottom: 10px; 
}
.dropdown-wrapper .ae-select {
  padding: 8px;
  position: relative;
  border: 1px solid #ccc;
  border-radius: 10px; 
  font-size: 12px;
}
.dropdown-wrapper .ae-select.chosen { color: #333; }
.dropdown-wrapper .ae-select .down-icon,
.ae-select i {
  position: absolute;
  right: 8px;
  top: 7px;
}
.dropdown-wrapper .ae-dropdown .dropdown-menu-f {
  background: #fffef3;
  box-shadow: none;
  border-radius: 0 0 5px 5px;
  width: 100%;
  z-index: 999;
}
.dropdown-wrapper .ae-dropdown .ae-select,
.dropdown-wrapper .ae-dropdown .dropdown-menu-f > li { cursor: pointer; }
.dropdown-wrapper .ae-disabled { pointer-events: none; }
.ae-hide { display: none !important; }
ul.dropdown-menu-f { list-style-type: none; }
ul.dropdown-menu-f {
  margin: 0px;
  padding: 5px;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 9999;
}
ul.dropdown-menu-f li {
  padding: 0;
  height: 0;
  width: 0;
  display: contents; 
}
ul.dropdown-menu-f li label {
  margin: 0;
  padding: 5px 0; 
  font-size: 12px;
}
ul.dropdown-menu-f li label:hover {
  cursor: pointer;
  background: #ccc;
}
ul.dropdown-menu-f li.selected label {
  background-image: linear-gradient(to right, #125657 , #000f2c);
  color: #fff; 
  font-weight: bold;
}
ul.dropdown-menu-f li label input { visibility: hidden; }

@media only screen and (min-width:950px){
  .sticky .logo {
  width: 19%;
  padding-left:20px;
}
  .sticky .logo img {
     margin-top: 12px;
    width:100%;
}
  .modal2 .space2 {padding:5%;}
  ul.dropdown-menu-f li label, .dropdown-wrapper .ae-select { font-size: 13px;  }
  .dropdown-wrapper { width: 280px; }
  .brand3{max-width:130px; margin:0 auto;}
  .itemfaq{margin: 0 auto; text-align: center;}
  .slid6 .bg-slide-content-v2{background:rgba(255, 255, 255, 0.55) !important; margin: -38% 0 0 0 !important;}
  .tabs-area li{width:14.28%;}
  .tabs-area li a{padding: 18px 10px; text-align:center; height: 80px; display:grid; align-content:center;}
  .chartb{width:80%; margin:0 auto;}
  .imgscan{width: 70%;margin: 0 auto;}
  .home .environmental{float: left;width: 100%;}
}
  

@media only screen and (min-width:950px){
  .contsearch{width: 350px;}
  .boxsearch .fa{
  right: 25px;
top:60px;
}

  ul.dropdown-menu-f li label, .dropdown-wrapper .ae-select { font-size: 17px;  }
  .dropdown-wrapper { width: 400px; }
}
.mega-mobile-parent-nav-menu-item { display: none !important; }

/* POST PASSWORD */
.aa_loginForm { 
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 50px auto;
  padding: 60px 0 50px 0;
  text-align: center;
  width: 80%;
}
.aa_loginForm #wp-submit {
background-image: linear-gradient(to right, #125657 ,
#000f2c);
color:
#fff;
padding: 5px 30px;
border: 0;
border-radius: 32px;
margin: 0 auto;
transition: all .2s ease-in-out;
}
.aa_loginForm .input {
border: 1px solid #ccc;
border-radius: 32px;
padding: 5px 10px;
}
/*search*/
.contsearch{
  margin-left: auto;
  margin-right: 0;}
.sinp{
  border: 0px;
  border-bottom: 1px solid #fff;
  background: transparent;
  width: 0%;
  padding: 5px 0;
  outline: none;
  color: #fff;
  transition: all 0.1s ease;
}
.boxsearch .fa{
  color: #ffffff;
  position: absolute;
  right: 25px;
  font-size: 20px;
  cursor: pointer;
  font-weight: normal;
}
.boxsearch input::placeholder {
  color: #fff;
}
.sinp.active{
  width: 98%;
  padding-left: 5px;
  transition: all 0.2s 0.4s ease;
}
/*search*/

@media only screen and (min-width:920px){
  .ulfa{margin-left:28px; margin-top:10px;}
.aa_loginForm { 
  width: 50%;
}
}
.separator{width: 100%; height: 1px;background:#3C8677;float: left;margin: 40px 0;}
@media (max-width: 359px)
{
  .itemfaq2{font-size: 10px;}
  .fsection .title-company{font-size: 20px !important;}
}
@media (min-width: 520px){.variablem{display: none !important;}}
@media (min-width: 950px) and (max-width: 1024px) {
.sticky #mainmenu{width: 80%;}
.sticky .logo{width: 20%;}
  #mainmenu .mega-menu > li > a.mega-menu-link{font-size:11px !important;}
  a.mega-menu-link{padding: 0px 5px 0px 5px !important;}
  
}
@media (min-width: 1024px) and (max-width: 1280px) {

  #mainmenu .mega-menu > li > a.mega-menu-link{font-size:12px !important;}
  
}
@media (min-width: 1720px) and (max-width: 1920px)
{
  .it
  {
    height: 360px !important;
  }
}
@media (min-width: 2000px)
{
  .it
  {
    height: 500px !important;
  }
}
@media screen and (max-width:480px)
{
  .img-popup{width: 60%;}
}
@media (min-width:480px) and (max-width:778px)
{
  .img-popup{width: 50%;}

}
@media screen and (max-width: 860px)
{
  .popmake-close
  {
    right: 10px !important;
  }
  }
@media screen and (max-width: 768px)
{
  
  .ulfa{margin-left: -7px;}
  .nav-tabs.nav-justified.navmarket > li > a{ background-color: #005151; color:#fff; display: inline-block; width: 100%; }
  .nav-tabs.nav-justified > .active > a, .nav-tabs.nav-justified > .active > a:hover, .nav-tabs.nav-justified > .active > a:focus{background: #fff;color:#005151;}
  .map_controls{z-index: 10; position: relative;}
  .itemfaq2{height: 30px;}
  .fclose{display: block; margin-top: -35px; margin-right: 15px; position: relative;}
  }
  @media (min-width: 1680px)
  {
    #mainmenu .mega-menu > li > a.mega-menu-link {
      font-size: 16px !important;
  }
  .slid6 .bg-slide-content-v2
  {
    margin: -42% 0 0 0 !important;
  }
  }