@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'Brunabold';
    src: url('../fonts/bruna-bold-webfont.woff2') format('woff2'),
         url('../fonts/bruna-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Brunabold_Italic';
    src: url('../fonts/bruna-bolditalic-webfont.woff2') format('woff2'),
         url('../fonts/bruna-bolditalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BrunaItalic';
    src: url('../fonts/bruna-italic-webfont.woff2') format('woff2'),
         url('../fonts/bruna-italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Bruna';
    src: url('../fonts/bruna-regular-webfont.woff2') format('woff2'),
         url('../fonts/bruna-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'BrunaThin';
    src: url('../fonts/bruna-thin-webfont.woff2') format('woff2'),
         url('../fonts/bruna-thin-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'BrunaThin_Italic';
    src: url('../fonts/bruna-thinitalic-webfont.woff2') format('woff2'),
         url('../fonts/bruna-thinitalic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


*{ margin:0; padding:0; scroll-behavior: smooth; font-family: 'Bruna'; font-size:16px; text-align:justify}
body{ font-family: 'raleway'; }
#header{
	width: 100%;
	height:100px;
	padding-left:0;
	position:fixed;
	z-index:1000; background:white;box-shadow: 0 0 5px 0 rgb(0, 0, 0, 0.2);
	}

.head{ height:60px}




/** MENÚ **/
#menu__toggle {opacity: 0;}
#menu__toggle:checked + .menu__btn > span {transform: rotate(45deg);}
#menu__toggle:checked + .menu__btn > span::before {top: 0;transform: rotate(0deg);}
#menu__toggle:checked + .menu__btn > span::after {top: 0;transform: rotate(90deg);}
#menu__toggle:checked ~ .menu__box {right: 0 !important; background:white}
.menu__btn {position: fixed;top: 30px;right: 45px;width: 26px; height: 26px;cursor: pointer; z-index: 1;}
.menu__btn > span, .menu__btn > span::before, .menu__btn > span::after {display: block;position: absolute;width: 100%;height: 2px; background-color: #0040c1; transition-duration: .25s;}
.menu__btn > span::before { content: '';top: -8px;}
.menu__btn > span::after {  content: '';top: 8px;}
.menu__box { display: block;  position: fixed;  top: 0;  right: -100%;  width: 300px;  height: 100%;  margin: 0;  padding: 65px 0;  list-style: none; transition-duration: .25s; border-radius:10px 0 0 10px; box-shadow: 10px 10px 20px black;}
.menu__box li{ list-style:none}

/* Acordion */
.cd-accordion{background:hsl(218, 7%, 32%);background:var(--cd-color-1);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;box-shadow:0 1px 8px rgba(0, 0, 0, .1), 0 16px 48px rgba(0, 0, 0, .1), 0 24px 60px rgba(0, 0, 0, .1);box-shadow:var(--shadow-lg); font-family: 'ralewaybold'; color:white}
.cd-accordion--animated .cd-accordion__label::before{transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s, -webkit-transform .3s}
.cd-accordion__sub{display:none;overflow:hidden; padding-top:20px}
.cd-accordion__sub--is-visible{display:block; }
.cd-accordion__item{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.cd-accordion__input{position:absolute;opacity:0}
.cd-accordion__label{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0.75em 1.25em;padding:var(--space-sm) var(--space-md);background:hsl(218, 7%, 32%);background:var(--cd-color-1);--color-shadow: lightness(hsl(218, 7%, 32%), 1.2);--color-shadow: lightness(var(--cd-color-1), 1.2);box-shadow:inset 0 -1px lightness(hsl(218, 7%, 32%), 1.2);box-shadow:inset 0 -1px var(--color-shadow);color:hsl(0, 0%, 100%);color:var(--color-white)}
.cd-accordion__label span{-ms-flex-order:3;order:3}
.cd-accordion__label:hover{background:hsl(218, 7%, 35.2%);background:hsl(var(--cd-color-1-h), var(--cd-color-1-s), calc(var(--cd-color-1-l)*1.1))}
.cd-accordion__label::after,.cd-accordion__label--icon-folder::before{}
.cd-accordion__label--icon-folder::before{-ms-flex-order:1;order:1}
.cd-accordion__label::after{-ms-flex-order:2;order:2}
.cd-accordion__label--icon-folder::before{background-position:0 0;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}
.cd-accordion__label--icon-folder::after{background-position:-16px 0}
.cd-accordion__label--icon-img::after{background-position:-48px 0}
.cd-accordion__input:checked+.cd-accordion__label::before{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0)}
.cd-accordion__input:checked+.cd-accordion__label::after{background-position:-32px 0}
.cd-accordion__input:checked ~ .cd-accordion__sub{display:block}
.cd-accordion__sub--l1 .cd-accordion__label{background:hsl(218, 7%, 20.8%);background:hsl(var(--cd-color-1-h), var(--cd-color-1-s), calc(var(--cd-color-1-l)*0.65));--color-shadow: lightness(hsl(218, 7%, 32%), 0.85);--color-shadow: lightness(var(--cd-color-1), 0.85);box-shadow:inset 0 -1px lightness(hsl(218, 7%, 32%), 0.85);box-shadow:inset 0 -1px var(--color-shadow);padding-left:calc(1.25em + 16px);padding-left:calc(var(--space-md) + 16px)}
.cd-accordion__sub--l1 .cd-accordion__label:hover{background:hsl(218, 7%, 24%);background:hsl(var(--cd-color-1-h), var(--cd-color-1-s), calc(var(--cd-color-1-l)*0.75))}
.cd-accordion__item:last-child .cd-accordion__label{box-shadow:none}
.cd-accordion__sub--l2 .cd-accordion__label{padding-left:calc(1.5em + 32px);padding-left:calc(var(--space-md) + var(--space-xxxs) + 32px)}
.cd-accordion__sub--l3 .cd-accordion__label{padding-left:calc(1.5em + 48px);padding-left:calc(var(--space-md) + var(--space-xxxs) + 48px)}

.cd-accordion li{ padding-left:20px; padding-bottom:20px}
.cd-accordion a, .cd-accordion__label--icon-folder{ color:#0040c1; text-decoration:none; -webkit-transition: color 0.3s; /* For Safari 3.0 to 6.0 */transition: color 0.3s; /* For modern browsers */}
.cd-accordion span{ color: #00b01a; padding-left:10px}
.cd-accordion a:hover, .cd-accordion__label--icon-folder:hover{ color: #3e9fff}
.cd-accordion__item:last-child{ padding-bottom:0 !important}
.cd-accordion .item-active{font-family: 'Bruna';}


h1{ width:130px; height:80px; background:url(../images/PlanetaAzulLogo.svg) no-repeat; background-size:95%; text-indent:-2500px; float:left; margin:20px 0 0 20px; transition-duration:.25s;  padding-left:20px}
h1:hover{ background-size:100%; transition-duration:.25s ;}
h1 a{ display:block;width:130px; height:80px}
.h1PA{ background:url(../images/Logo-Planeta-Azul.png) no-repeat}
.desktop{ display:block}
.mobile{ display:none}
b{font-family: 'Brunabold';}


.menu-desk { float:left; color:#0040c1; padding-left:25px; padding-top:25px}
.menu-desk li{ list-style:none; float:left;text-align:center; padding:0 10px}
.menu-desk a{ color:#0040c1; text-decoration:none}
.menu-desk a:hover {color:#3e9fff;transition: 0.5s;}
.menu-desk .active{font-family: 'Brunabold';}


.nav{
	margin-top:15px;
}

.nav__list{
	float: left;
	list-style: none;
	margin: 0;
	padding: 20px 0 0 0;
	position: relative;
	margin-left:0px;
	width:calc(100% - 170px);
	display:flex;
	justify-content:space-evenly
}

.nav__list a{
	display:block;
	color:#0040c1;
	text-decoration:none;
	padding:0 12px; transition: 0.5s;
	font-size:14px;
	
}
.nav__list a:hover{color:#3e9fff;transition: 0.5s;
	
}

.nav__list li{
	position: relative;
	float:  left;
	margin: 0;
	padding: 0;
}

.nav__list li:hover{color:#3e9fff;
}

.nav__list ul{
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background-color: #fff;
	padding: 5px 0 0 0;
	list-style: none;
	box-shadow: 1px 14px 18px -5px rgba(0,0,0,0.2);
}

.nav__list ul li{
	float: none;
	width: 200px;
	text-align:center
}

.nav__list ul a{
	line-height: 120%;
	padding: 10px 15px;
}

.nav__list ul ul{
	position: absolute;
	top: 0;
	left: 50%;
	background-color: #fff;
}

.nav__list li:hover > ul{
	display: block;
}

.rrss{ margin-left:5% !important} 


.menu-nuevo-dsk {
  list-style-type: none;
  margin: 0;
  padding: 30px 0 0 0;
  overflow: hidden;
  
}

.menu-nuevo-dsk li {
  float: left;
  
}

.menu-nuevo-dsk li a, .dropbtn {
  display: inline-block;
  color:#0040c1;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size:16px
}

.menu-nuevo-dsk li a:hover, .menu-nuevo-dsk .dropdown:hover .dropbtn {
  color:#3e9fff
}

.menu-nuevo-dsk li.dropdown {
  display: inline-block;
}

.menu-nuevo-dsk .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  color:#0040c1;
}

.menu-nuevo-dsk .dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  color:#0040c1;
}

.menu-nuevo-dsk .dropdown-content a:hover {}

.menu-nuevo-dsk .dropdown:hover .dropdown-content {
  display: block;
}




section{ width:100% !important; height:auto; clear:both !important; display:inline-block}
.section-padding{width:cal(100% - 20px); height:cal(100% -20px); padding:10px}

.banners{display:block; clear:both; margin-top:80px; height:800px; display:inherit}


.videosection{ width:100%; height:calc(95vh - 100px); margin-top:100px}
.videosection-comerial{ width:100%; height:calc(95vh - 100px); margin-top:0}
.no-margintop{ margin-top:0}


.hidroactive{ background:url(../images/bg-hidractive.jpg) top center; background-size:cover; padding-top:100px}


.content{ width:1200px; height:auto; margin:0 auto; display:flex}
.midcontent{ width:50%; float:left}

.hidractivetitle{ background:url(../images/hidractive-logo.png); width:300px; height:34px; text-indent:-2500px; margin-top:190px; margin-left:100px}
.hidractivep{ padding:0 100px; padding-top:20px; text-align:justify}


.hidroactive-products{ background:url(../images/bg-productos-Iso.jpg) top center; background-size:cover; padding-top:100px; padding-bottom:30px}

.informacion-nutrimental{ width:65%; margin:0 auto; background:white; padding:20px; border-radius:10px;box-shadow: 10px 10px 20px rgb(0, 0, 0, 0.3);}
.informacion-nutrimental h3{font-family: 'Brunabold'; font-size:36px; text-align:center; line-height:30px; padding-bottom:10px; border-bottom:1px solid black}
.informacion-nutrimental ul{ width:100%; height:auto; list-style:none; margin:0; padding:5px 0 0 0; display:flex}
.informacion-nutrimental p{ padding-top:5px}
.informacion-nutrimental ul li{ width:60%; float:left}
.informacion-nutrimental ul li:nth-child(2){ width:40%; text-align:right}
.informacion-nutrimental .legal{ font-size:11px;}
.productshoot{ width:100%; text-align:center;}
.productshoot img{width:300;height:584; margin:0 auto 25px  auto!important}
.productshoot ul{list-style:none; width:100%}
.productshoot li{ width:50%; float:left}
.ingredientes{ width:65%; margin:0 auto; padding:20px; margin-top:20px; text-align:justify}

.border1{ padding-bottom:5px; border-bottom:solid 1px black}
.border2{ padding-bottom:5px; border-bottom:solid 2px black}
.border4{ padding-bottom:5px; border-bottom:solid 4px black}


.sabor-list{border:solid 1px #f2f2f2; border-radius:10px; width:200px !important; height:55px; padding:5px; background:#f2f2f2; display:block; margin-bottom:5px; margin-top:5px}
.sabor-lis-img{width:50px !important}
.sabor-list-txt{padding-top:17px; color:black; width:150px !important}

.sabor-list-active{border:solid 1px #999999; border-radius:10px; width:200px !important; height:55px; padding:5px; background:white; display:block}s
.sabor-list-active .sabor-list-txt{padding-top:17px; color:black; width:150px !important}

.map{background:url(../images/bg-Map.jpg) top center; background-size:contain; padding-top:20px; padding-bottom:20px; min-height:750px}


.contactpoints{ width:85%; margin:0 auto; background:white; padding:100px 20px; border-radius:10px;box-shadow: 10px 10px 20px rgb(0, 0, 0, 0.3); margin-top:20%}
.contactpoints h3{font-family: 'Brunabold'; font-size:44px; text-align:center; line-height:34px; padding-bottom:10px;color:#0040C1; text-transform:uppercase; text-align:center; margin-bottom:25px}
.contactpoints h4{font-family: 'Brunabold'; font-size:20px; }

.directions{ background:#ECECEC; border-radius:20px; width:cal(100% -20px); padding:0 10px 5px 10px; display:flex; height:35px; margin-bottom:10px; margin-top:10px}
.directions li{ list-style:none; float:left;}
.first{font-size:16px; padding-top:10px; width:40%}
.mini {font-size:11px; padding-top:5px; width:100%}
.mini2 {font-size:11px; padding-top:10px; width:60%}
.mini option{ border:none; margin-top:5px !important}
.mini a{ text-indent:; color:black; font-size:12px; text-decoration:none}
.option{font-size:16px !important; font-family: 'Bruna'; border:none; margin-top:5px !important; width:100%}
input{ border:none; outline:none; width:100%}
textarea{border:none; outline:none; width:100%; min-width:100%; min-height:100px; max-height:100px}
.mini span{ color:#0C0}

.feedInsta{background:url(../images/bg-azul.jpg) top center; background-size:cover; padding-top:20px; padding-bottom:80px; min-height:auto}
.feed{ width:600px; height:auto; padding:25px; border-radius:20px; background:white; margin:-50px auto 0 auto}
.feed ul{ width:100%; list-style:none; display:flow-root}
.feed ul li{ width:calc(33.3% - 10px); padding:5px; float:left;}
.feed img{ width:100%; height:auto;}


.footer{ padding-top:25px; padding-bottom:25px}
.footer h3{ background:url(../images/Logo-Planeta-Azul-monocromatico.png); width:100px; height:90px; text-indent:-2500px; margin:0 auto}
.footer .h3pa{ background:url(../images/Logo-Planeta-Azul-BW.png);}
.menufooter{margin:0 auto; display:flex; justify-content:center; width:100%; padding:0; margin-top:20px}
.menufooter li{ text-align:left}
.menufooter a{color:#7d7d7d; font-size:14px}
.menufooter span{color:#7d7d7d; font-size:11px}
.menufooter span a{color:#7d7d7d; font-size:11px}
.menufooter br{ margin-bottom:10px}


/**********************************************************************************************************************/

/* Add padding and center-align text to the container */
.container {
  padding: 16px;
  text-align: center;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1001; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.5);
  padding-top: 50px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Style the horizontal ruler */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
 
/* The Modal Close Button (x) */
.close {
  position: absolute;
  right: 35px;
  top: 5px;
  font-size: 30px;
  font-weight: bold;
  color: #f1f1f1;
}

.close:hover,
.close:focus {
  color: #f44336;
  cursor: pointer;
}

/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

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

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}


/**********************************************************************************************************************/

#text{
  position: absolute;
  top: 40%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  width:100%;
}
.informacion-nutrimentalmob{ width:80%; color:black !important; height:auto; margin-bottom:150px}
.displayoverlay{ width:200px; text-align:center; margin:20px auto !important; padding:10px; border:solid 2px #666; border-radius:20px;}


.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
background-position: center;
background-size: cover;
}


.swiper-slide h2{text-align:center; margin-top:50px !important; background:url(../images/Planeta-Azul-MedColor.png); width:100px; height:90px; text-indent:-2500px; margin:0 auto}
.swiper-slide .logoblanco{ background:url(../images/Planeta-Azul-MedBlanco.png)}
.swiper-slide h3{font-family: 'Brunabold'; text-align:center; margin-top:20px; font-size:60px; line-height:50px}
.color-azul{ color:#0040c1}
.color-blanco{color:white}
.color-rosa{ color:#d60064}
.color-verde{ color:#078700}
.color-naranja{ color:#eb7200}
.pagination-middle{ width:200px; margin:0 auto !important; position:relative !important; top:20px}
.pagination-middle span{ margin-left:5px; margin-right:5px; }
.swiper-pagination .pagination-middle-blue{ width:200px; margin:0 auto}
.swiper-pagination .pagination-middle-blue span{ border:solid 1px #0040c1}

.pagination-middle-azul span{ border:solid 1px #0040c1; background:none}
.pagination-middle-azul .swiper-pagination-bullet-active{ background:#0040c1}

.pagination-middle-blanco span{ border:solid 1px #FFF; background:none}
.pagination-middle-blanco .swiper-pagination-bullet-active{ background:#FFF}

.pagination-middle-rosa span{ border:solid 1px #d60064; background:none}
.pagination-middle-rosa .swiper-pagination-bullet-active{ background:#d60064}

.pagination-middle-verde span{ border:solid 1px #078700; background:none}
.pagination-middle-verde .swiper-pagination-bullet-active{ background:#078700}

.pagination-middle-naranja span{ border:solid 1px #eb7200; background:none}
.pagination-middle-naranja .swiper-pagination-bullet-active{ background:#eb7200}


.swiper-button-prev{ width:120px; height:134px; background:none; margin-left:100px}
.swiper-button-next{ width:120px; height:134px; background:none; margin-right:100px}

.product-banner{position:fixed; bottom:0; margin-left:calc(50% - 350px); width:700px; height:auto}
.product-banner-mobile{position:absolute; bottom:0; width:300px; height:auto; margin-left:calc(50% - 150px)}




.agua-family{ background:url(../images/bg-aguas-int.jpg) top center; background-size:100% 100%; padding-top:0px; height:calc(100vh - 50px)}
.family-agua{ width:70%; float:left}
.family-agua li{ width:33.3%; float:left; list-style:none; margin-bottom:15px}
.family-agua li img{ margin:0 auto !important; width:110px; height:110px;}
.sample-size{width:75% !important; height:auto; margin:0 auto}
.boton-size{text-align:center; background:#0047BA; padding:10px 20px; border-radius:25px; font-family: 'Brunabold'; color:white; font-size:20px; margin-bottom:30px; margin-top:20px; width:200px; list-style:none}
.textos-size{float:left; clear:both}
.text-size{ width:70%; list-style:none; font-size:16px}

.unoymediolitros{background:url(../images/productos/agua/15litros-thumb.png); display:block; text-indent:-5000px; width:110px; height:110px}
.unoymediolitros:hover{ background:url(../images/productos/agua/15litros-thumb-active.png)}
.unoymediolitros-active{ background:url(../images/productos/agua/15litros-thumb-active.png);width:110px; height:110px; text-indent:-3000px}

.mediolitro{background:url(../images/productos/agua/500ml-thumb.png); display:block; text-indent:-5000px; width:110px; height:110px}
.mediolitro:hover{ background:url(../images/productos/agua/500ml-thumb-active.png)}
.mediolitro-active{ background:url(../images/productos/agua/500ml-thumb-active.png);width:110px; height:110px; text-indent:-3000px}

.cincolitros{ background:url(../images/productos/agua/5litros-thumb.png); display:block; text-indent:-5000px; width:110px; height:110px;}
.cincolitros:hover{ background:url(../images/productos/agua/5litros-thumb-active.png)}
.cincolitros-active{background:url(../images/productos/agua/5litros-thumb-active.png);width:110px; height:110px; text-indent:-3000px}

.ochovasos{ background:url(../images/productos/agua/8vasos-thumb.png); text-indent:-5000px; display:block; width:110px; height:110px}
.ochovasos:hover{ background:url(../images/productos/agua/8vasos-thumb-active.png)}
.ochovasos-active{background:url(../images/productos/agua/8vasos-thumb-active.png);width:110px; height:110px; text-indent:-3000px}

.sport{ background:url(../images/productos/agua/sport-thumb.png); display:block; text-indent:-5000px; width:110px; height:110px}
.sport:hover{ background:url(../images/productos/agua/sport-thumb-active.png)}
.sport-active{background:url(../images/productos/agua/sport-thumb-active.png);width:110px; height:110px; text-indent:-3000px}

.botellon{ background:url(../images/productos/agua/botellon-thumb.png); display:block; text-indent:-5000px; width:110px; height:110px}
.botellon:hover{ background:url(../images/productos/agua/botellon-thumb-active.png)}
.botellon-active{background:url(../images/productos/agua/botellon-thumb-active.png);width:110px; height:110px; text-indent:-3000px}

h3.greentext{ font-size:58px; margin-top:70px;font-family: 'Brunabold'; text-transform:uppercase; line-height:50px; margin-bottom:30px;}
p.greentext{ width:54% !important; margin-bottom:15px !important; font-size:16px}
.greentext{ color:#007938}
.greenbotton{ background:#007938; margin-top:25px; font-size:20px; text-decoration:none; display:inherit}
.titlegreenrecicled{margin-top:200px}

.imgreciclada{margin-top:-100px}
.botella-reciclada{width:450px; height:521px}


.aguas-saborizadas{ padding:100px 0 50px 0}
.saborizadas-title{ font-size:60px; font-family: 'Brunabold'; text-align:center; text-transform:uppercase; color:#0040c1; margin-top:60px; margin-bottom:50px; line-height:50px}

.tituloagua{font-size: 60px;
  font-family: 'Brunabold';
  text-align: center;
  text-transform: uppercase;
  color: #0147BA;
  margin-top: 60px;
  margin-bottom: 50px;
  line-height: 50px; width:100%; clear:both}



.hvr-buzz:hover {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
	-webkit-animation-name: hvr-buzz;
  animation-name: hvr-buzz;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  transition:2s;
}

#loading{ position:fixed; top:0; left:0; background:white; width:100%; height:100%; display:flex; justify-content:center; align-content:center; z-index:10000}



.contacto{ background:url(../images/bg-contactanos.jpg) top center; background-size:cover; padding-top:100px; padding-bottom:100px}

.input{ border:none;font-size: 16px !important;font-family: 'Bruna'; background:#ECECEC; color:black}
select{ background:#ECECEC;}
.enviar{ background:#023689; font-family: 'Bruna'; font-size:16px;letter-spacing:2px; text-align:center; width:100%; color:white; border:none; border-radius: 20px; padding:10px 0; margin-top:20px}


@-webkit-keyframes hvr-buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
@keyframes hvr-buzz {
  0% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}
.swiper-slide-active .hvr-buzz {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
	-webkit-animation-name: hvr-buzz;
  animation-name: hvr-buzz;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite; transition:2s;
}

.naranja{background: rgb(248,212,113); background: linear-gradient(0deg, rgba(248,212,113,1) 0%, rgba(249,223,162,1) 50%, rgba(249,228,183,1) 100%); width:80%; height:auto; margin:0 10%;transition: 0.5s; border-radius:20px; padding-bottom:30px}
.naranja p{font-family: 'Brunabold'; color:#E68D02; text-align:center;font-size:20px}
.naranja:hover{ width:90%; margin:0 5px; background-size:70% auto; background-position:top center}
.naranja img{ width:70%; height:auto; margin:0 15%; margin-top:50px;}
.naranjas:hover{ width:100%; margin:0 }
.naranjas{transition: 1s;}
.naranjas:hover{background:url(../images/productos/saborizadas/naranjas.png); background-size:100% 100%; background-size:contain}

.toronja{background: rgb(249,175,204); background-color: linear-gradient(0deg, rgba(249,175,204,1) 0%, rgba(253,201,215,1) 50%, rgba(253,211,220,1) 100%);width:80%; height:auto; margin:0 10%;transition: 0.5s; border-radius:20px;padding-bottom:30px;}
.toronja p{font-family: 'Brunabold'; color:#C73C66; text-align:center; font-size:20px}
.toronja img{ width:70%; height:auto; margin:0 15%; margin-top:50px;}
.toronja:hover{ width:100%; margin:0; }
.toronjas{transition: 1s;}
.toronjas:hover{background:url(../images/productos/saborizadas/toronjas.png); background-size:100% 100%; background-size:contain}


.limon{background: rgb(179,213,110); background: linear-gradient(0deg, rgba(179,213,110,1) 0%, rgba(195,221,142,1) 50%, rgba(205,226,164,1) 100%); width:80%; height:auto; margin:0 10%;transition: 0.5s; border-radius:20px;padding-bottom:30px}
.limon p{font-family: 'Brunabold'; color:#0E7415; text-align:center; font-size:20px}
.limon:hover{ width:90%; margin:0 5px; background-size:70% auto; background-position:top center}
.limon img{ width:70%; height:auto; margin:0 15%; margin-top:50px;}
.limones:hover{ width:100%; margin:0; }
.limones{transition: 1s;}
.limones:hover{background:url(../images/productos/saborizadas/limones.png); background-size:100% 100%; background-size:contain}

.saboriazadas-int{ width:910px; clear:both; display:flex; margin:0 auto}
.saboriazadas-int .divint33{ width:33.3%; float:left}


.mermeladascont{ background:url(../images/bg-bon-internna.png) top center; background-size:100% 100%; padding-top:50px; height:calc(100vh - 200px)}
.saborizadas-title{ color:#FBBD14}
.contentmax{ width:910px; height:auto; margin:0 auto}
.contentmax div{ width:25%; float:left; transition: 1s;}
.contentmax div img{ width:80%; height:auto; margin:0 10%;transition: 1s;} 
.contentmax div:hover img{ width:90%; margin:0 5%; height:auto; margin:0;transition: 1s;}
 
.guayaba{ background:#EDA296; width:50%; margin:0 auto; font-family: 'Brunabold'; color:white; border-radius:20px; padding:10px; text-align:center; font-size:20px}
.mango{ background:#FFC578;width:50%; margin:0 auto; font-family: 'Brunabold'; color:white; border-radius:20px; padding:10px; text-align:center; font-size:20px}
.fresa{ background:#EFB9C6; width:50%; margin:0 auto; font-family: 'Brunabold'; color:white; border-radius:20px; padding:10px; text-align:center; font-size:20px}
.pina{ background:#FFD07D; width:50%; margin:0 auto; font-family: 'Brunabold'; color:white; border-radius:20px; padding:10px; text-align:center; font-size:20px}


.naranjazumo{font-family: 'Brunabold'; color:white; padding:10px 20px; text-align:center; font-size:16px; background:#FDB400; border-radius:20px; width:50%; margin-left:18%; margin-top:20px}
.tropicalzumo{font-family: 'Brunabold'; color:white;padding:10px 20px; text-align:center;font-size:16px; background:#bd1f0e; border-radius:20px; width:50%; margin-left:18%; margin-top:20px}
.greenzumo{font-family: 'Brunabold'; color:white;padding:10px 20px; text-align:center; font-size:16px; background:#A0AF31; border-radius:20px; width:50%; margin-left:18%; margin-top:20px}

.divint33 .imagetres{ width:70%; height:auto;transition: 1s; margin:0 15%}
.divint33 .imagetres:hover{ width:90%; margin:0 5px}


.box-zumos{box-shadow: 5px 1px 5px rgb(0, 0, 0, 0.2); text-align:center; border-radius:20px; width:95%; padding:50px 0}


.marcas{ height:calc(100vh - 110px); display:inline-block; margin-top:100px; width:100%}
.marcas div{ width:25%; float:left; height:100%}
/*.marcas div:nth-child(2){ width:34%;}*/

.marca-hidractive{background:white; transition:1s}
.marca-hidractive:hover{background: rgb(255,255,255);background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(216,226,255,1) 50%, rgba(178,198,255,1) 100%) ;transition:1s}
.marca-hidractive h3{background:url(../images/productos/marcas/hidractive.png); width:180px; height:144px; background-size:cover; text-indent:-5000px; margin:0 auto; margin-top:50%; transition:0.7s;}
.marca-hidractive:hover h3{ width:200px; height: 160px; transition:0.7s;}


.marca-planetaazul{background:white; transition:1s linear 25ms}
.marca-planetaazul:hover{background: rgb(255,255,255);background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(214,237,249,1) 50%, rgba(155,219,243,1) 100%); transition:1s linear 25ms}
.marca-planetaazul h3{background:url(../images/productos/marcas/planeta-azul.png); width:180px; height:144px; background-size:cover;text-indent:-5000px; margin:0 auto; margin-top:50%;transition:0.7s;}
.marca-planetaazul:hover h3{ width:200px; height: 160px; transition:0.7s;}


.marca-bon{background:white; transition:1s linear 25ms}
.marca-bon:hover{background: rgb(255,255,255);background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,240,207,1) 50%, rgba(255,224,160,1) 100%);transition:1s linear 25ms}
.marca-bon h3{background:url(../images/productos/marcas/bon.png); width:180px; height:144px; text-indent:-5000px; background-size:cover; margin:0 auto; margin-top:50%;transition:0.7s;}
.marca-bon:hover h3{ width:200px; height: 160px; transition:0.7s;}

.marca-nuvi{background:white; transition:1s linear 25ms}
.marca-nuvi:hover{background: rgb(120,187,75);background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(204,217,196,1) 50%, rgba(165,216,130,1) 100%);transition:1s linear 25ms}
.marca-nuvi h3{background:url(../images/productos/marcas/nuvi.png); width:180px; height:144px; text-indent:-5000px; background-size:cover; margin:0 auto; margin-top:50%;transition:0.7s;}
.marca-nuvi:hover h3{ width:200px; height: 160px; transition:0.7s;}


.centralazul{text-align:center; background:#0047BA; padding:10px 10px; border-radius:25px; font-family: 'Brunabold'; color:white; font-size:18px; width:auto; list-style:none; margin:0 auto; display:inherit; width:200px; text-decoration:none; margin-top:20px}
.centralblanco{text-align:center; background:white; padding:10px 10px; border-radius:25px; font-family: 'Brunabold'; color:#0047BA; font-size:18px; width:auto; list-style:none; margin:0 auto; display:inherit; width:200px; text-decoration:none; margin-top:20px}
.centralverde{text-align:center; background:#078700; padding:10px 10px; border-radius:25px; font-family: 'Brunabold'; color:white; font-size:18px; width:auto; list-style:none; margin:0 auto; display:inherit; width:200px; text-decoration:none; margin-top:20px}
.centralrosa{text-align:center; background:#D60064; padding:10px 10px; border-radius:25px; font-family: 'Brunabold'; color:white; font-size:18px; width:auto; list-style:none; margin:0 auto; display:inherit; width:200px; text-decoration:none; margin-top:20px}
.centralnaranja{text-align:center; background:#EB7200; padding:10px 10px; border-radius:25px; font-family: 'Brunabold'; color:white; font-size:18px; width:auto; list-style:none; margin:0 auto; display:inherit; width:200px; text-decoration:none; margin-top:20px}

.quartercontent{ width:25%; text-align:center !important}
.quartercontent img{ width:70%; height: auto; margin:0 auto; transition: 1s;}
.quartercontent img:hover{ width:80%; transition: 1s;}

#loading{transition: 20s;}


.swiper-videos{ width:100%; height:auto; padding:100px 0;}
.greenbotton a:hover{ text-decoration:none; color:white !important}

#aless-chat>iframe {
      border-radius: 16px;
      display: block;
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 255px;
      height: 95px;
      max-height: 100%;
      opacity: 1;
      color-scheme: none;
      background: transparent;
      margin: 0px;
      max-width: 100vw;
      transform: translateY(0px);
      transition: none 0s ease 0s !important;
      visibility: visible;
      z-index: 999999999 !important;
    }
	  
	  
.nuestragete-bg{ background:url(../images/bg-nuestra-gente.jpg) top center; background-size:cover; padding-top:100px; height:100vh}	
.whitetxth3{text-align:left !important; text-transform:none; font-size:60px !important; color:white !important; line-height:50px !important}
.whitetxt{text-align:justify !important; font-size:16px !important; padding-bottom:12px !important; color:white !important}
.calidad{ width:100%; padding:50px 0; background:#023689; text-align:center}
.calidad a{ background:white; color:#023689; padding:15px; border-radius:20px; text-decoration:none; font-family: 'Bruna'; font-size:16px}


.liderazgo{ min-height:700px; height:100vh; margin-top:100px}
.director-general{ width:60%; float:left; background:url(../images/DiegoFreire.jpg) top left no-repeat; height:100%; background-size:90% auto}
.director-general h3{ font-size:60px; color:white; font-family: 'Brunabold'; padding-left:17%; padding-top:10%; line-height:50px}
.director-general p{ font-size:16px; color:white; font-family: 'Bruna'; padding-left:17%; line-height:15px; padding-top:15px;}

.caracteristicas-lider{ width:40%; float:left}
.caracteristicas-lider h3{ font-size:60px; color:white; font-family: 'Brunabold'; line-height:50px; color:#023689; text-transform:uppercase; padding-top:17%}
.caracteristicas-lider p{color:#023689; padding-top:15px}

.voluntariado{ background:url(../images/bg-voluntariado.jpg) top center; background-size:cover; padding-top:100px; height:100vh; min-height:800px}
.fotos-voluntarios{ width:60%; float:left; height:auto}
.fotos-voluntarios ul{ margin:0; padding:0; list-style:none; height:auto; width:100% !important; margin-top:30%;}
.fotos-voluntarios ul li{ float:left; width:20%; text-align:center; }
.fotos-voluntarios img{width:80%; height:auto; transition-duration: .25s;}
.fotos-voluntarios img:hover{ width:90% !important; transition-duration: .25s;}


.titulo-carreras{font-size:60px;font-family: 'Brunabold';text-align:center; color:#023689; line-height:50px}
.texto-carreras{font-family:15px; text-align: center; font-family:'Bruna'; padding-top:50px}
.list-carreras{width:1020px; height:500px; margin:50px auto 0 auto}
.list-carreras li{ float:left; width:500px; height:500px; list-style:none}
.list-carreras li:first-child{ margin-right:20px}
.list-carreras li H4{ font-size:20px; font-family: 'Brunabold'; color:#023689; text-align:center; background-color:#ccc;}
.list-carreras li H4:hover{ color:#ccc; background-color:#023689;}
.list-carreras li a{ width:100%; height:100%; display:block; text-decoration:none}
.nosotros1{filter: brightness(50%); }
.nosotros1:hover{filter: brightness(100%); }
.nosotros2{filter: brightness(50%); }
.nosotros2:hover{filter: brightness(100%); }
.nosotros1 h4, .nosotros2 h4{ padding:30px 0}


.identidad-bg{ background:url(../images/bg-burbujas.jpg); background-size:cover; padding:100px 0}
.identidad{ width:910px; height:auto; margin:0 auto}
.identidad li{ width:450px; float: left; list-style:none}
.identidad li:first-child{ margin-right:10px}
.identidad h3{ margin:0; padding:0; font-family: 'Brunabold'; color:#023689; font-size:40px; padding-top:15%}
.identidad p{ text-align:justify}

.vision{ background:#f5f7fa; padding:50px 0}
.vision ul{width:910px; height:auto; margin:0 auto}
.vision ul li{ width:445px; float: left; list-style:none}
.vision ul li:first-child{ margin-right:20px}
.vision h3{ font-size:30px; font-family: 'Brunabold'}
.vision p{ font-size:16px; padding-top:20px; text-align:justify}

.valores-cont{ padding:100px 0}
.valores-cont h3{ font-size:30px; font-family: 'Brunabold'; text-align:center; margin-bottom:20px}
.valor { width:1000px; margin:0 auto}
.valor li{list-style:none; float:left; padding-top:20px}
.valor-1{ padding:0 10px; width:230px}
.valor-2{ padding:0 10px; width:230px}
.valor-3{ padding:0 10px; width:230px}
.valor-4{ padding:0 10px; width:230px}
.valor h4{ font-size:18px; font-family:'Brunabold'; text-align:center; padding-bottom:15px}

.capital-humano{  background:url(../images/burbujasgris.jpg); background-size:cover; padding:100px 0}
.capital-humano h3{ margin:0; padding:0; font-family: 'Brunabold'; color:#023689; font-size:40px; text-align:center}
.capital-humano p{ width:910px; margin:0 auto; font-size:16px; padding-top:30px}


.top-firma{margin-top:-100px; text-align:center}
.firma{margin:0 auto; width:700px; height:auto}

.certificaciones{padding:100px 0}
.certificaciones h3{ margin:0; padding:0; font-family: 'Brunabold'; color:#023689; font-size:40px; text-align:center}

.excelencia{width:900px; height:auto; margin:0 auto; padding-top:50px; padding-bottom:50px}
.excelencia li{ list-style:none; float:left; padding-bottom:25px; margin:0; }
.excelencia .excel-img{ width:200px; clear:both !important}
.excelencia .excel-txt{ width:650px; padding-left:50px}

.sobrenosotros-bg{ background:url(../images/sobrenosotros-bg.jpg) top center; background-size:cover; padding-top:100px; height:100vh}	


.titulos-canal{ border-left:4px solid #FFBC3D; padding:10px; margin-top:20px; height:40px}
.servicios{ background:url(../images/bg-burbujas.jpg); background-size:cover; padding:50px 0}
.list-services{ width:910px; height:auto; margin:50px auto 0 auto}
.list-services .service{ float:left; list-style:none; width:50%; text-align:center}
.list-services .service a{ display:block; width:50%; margin:0 auto; cursor:pointer; font-family: 'Brunabold'; font-size:20px; line-height:20px} 
.list-services .service a:hover, .list-services li a:focus{ background:#DF7A02}
.list-services .boton-services{ background:#FFBC3D; padding:20px; border-radius:50px; color:white}
#stickers{ height:100px}
#stickers::before{ display:block; width:300px; height:332px; content: url(../images/sticker-abre-facil.png); position:absolute; left:50px}
#stickers::after{ display:block; width:300px; height:332px; content: url(../images/sticker-stand.png); position:absolute; right:50px; margin-top:-100px}




.services-detail{ text-align:left; border-left:3px solid #DF7A02; margin-top:30px; margin-right:25px}
.services-detail li{list-style:none; padding-bottom:25px; padding-left:15px; padding-top:15px}
.services-detail li::before{ position:absolute;  width:15px; height:15px; content:url(../images/yellow-dot-list.png); display: inline-block; margin-left:-24px}
.negocio{ width:1000px; margin:0 auto;margin-top:-50px}
.negocio li{ width:31%; float:left; margin:0 1%; list-style:none; text-align:center}
.negocio h3{z-index:10; position:relative}
.negocio li p{ padding:0 15px; background:#eee; margin-top:-50px; z-index:1; position:relative; border-radius:15px; min-height:100px; padding-top:50px}
.dot1{width:120px; height:95px; margin:0 auto; background:url(../images/yellow-dot-1.png) no-repeat; background-size:cover; text-align:center; font-family: 'Brunabold'; font-size:45px; color:white; padding-top:25px}
.dot2{width:120px; height:95px; margin:0 auto; background:url(../images/yellow-dot-2.png) no-repeat; background-size:cover; text-align:center; font-family: 'Brunabold'; font-size:45px; color:white; padding-top:25px}
.dot3{width:120px; height:95px; margin:0 auto; background:url(../images/yellow-dot-3.png) no-repeat; background-size:cover; text-align:center; font-family: 'Brunabold'; font-size:45px; color:white; padding-top:25px}
.borders-negocio{ border-left:3px solid #FFBC3D; border-right:3px solid #FFBC3D}
.reconocimientos{ width:1200px; height:auto; margin:0 auto; margin-top:50px}
.reconocimientos .reconocimineto{ width:30%; height:auto; margin:0 1.5%; float:left; box-shadow: 10px 10px 20px rgb(0, 0, 0, 0.2); border-radius:25px; text-align:center; padding-bottom:25px; padding-top:15px}
.reconocimientos .reconocimineto h4{ width:80%; font-family: 'Brunabold'; font-weight:bold; color:#023689; padding:0 10%; min-height:50px; font-size:16px}
.reconocimientos .reconocimineto p{ width:80% ; margin:0 10%; padding:0 !important;text-align:justify; }
.reconocimientos .reconocimineto img{ width:80%; height:auto; margin:0 auto; margin-bottom:15px; border-bottom:3px solid #023689;}

.reconocimientos .reconocimineto-min{ width:22%; height:auto; margin:0 1.5%; float:left; box-shadow: 10px 10px 20px rgb(0, 0, 0, 0.2); border-radius:30px; text-align:center; padding-bottom:25px; padding-top:0px}
.reconocimientos .reconocimineto-min h4{ width:80%; font-family: 'Brunabold'; font-weight:bold; color:#023689; padding:0 10%; min-height:50px; font-size:16px; text-align:center}
.reconocimientos .reconocimineto-min p{ width:90% ; margin:0 5%; padding:0 !important;text-align:center; }
.reconocimientos .reconocimineto-min img{ width:80%; height:auto; margin:0 auto; margin-bottom:15px; border-bottom:3px solid #023689; cursor: pointer !important}


.w3-hide{ display:none}
.w3-show{ display:block !important}
#Exclusivas{ position:relative}
#Exclusivas::after{ content:url(../images/after-botellas.png); width:200px; height:555px; display:block; position:absolute; right:50px; margin-top:-100px}
#Crecimiento{ position:relative; padding-top:50px}
#Crecimiento::before{content: url(../images/before-botellas.png); width:200px; height:555px; display:block; position:absolute; left:-250px; margin-top:-200px}
.texto-botellas{padding-top:30px;text-align:center; width:910px; margin:0 auto}
.buttons-botellas{ width:910px; margin:0 auto; padding:50px 0;}
.buttons-botellas li{ float:left; width:33%; list-style:none}
.buttons-botellas li p{ width:80%; height:50px; margin:0 auto; text-align:center; padding:10px; background-color:#FFBC3D; border-radius:25px;font-family: 'Brunabold'; font-size: 20px; color:white; line-height:20px}
.boton-oneline{ padding-top:20px}
.buttons-botellas2{ width:606px; padding-bottom:120px}
.buttons-botellas2 li{ float:left; width:50%; list-style:none}
.buttons-botellas2 li p{ width:80%; height:50px; margin:0 auto; text-align:center; padding:10px; background-color:#FFBC3D; border-radius:25px;font-family: 'Brunabold'; font-size: 20px; color:white; line-height:20px}

.ListPartners{ width:910px; margin:0 auto; padding-bottom:70px; display: flow-root;}
.ListPartners li{ float:left; list-style:none; width:20%; text-align:center}
.breakpartners{ clear:both;  padding-left:10%}


.maps{ margin-top:-20px}
.infomap {box-shadow: 10px 10px 20px rgb(0, 0, 0, 0.2); border-radius:15px; padding:20px; background:white; width:30%; height:auto; position: absolute; top:300px; left:100px}
.infomap h3{font-family: 'Brunabold'; font-size:25px; text-align:center; line-height:normal}
.infomap h5{font-family: 'Bruna'; font-size:14px; font-weight:normal; text-align:center;line-height:normal}
.infomap ul{ background:#efeff2; border-radius:15px; padding:10px; width:calc(100% - 20px); height:auto; display:flex; margin-bottom:20px; clear:both; margin-top:15px}
.infomap ul li{ float:left; list-style:none;}
.infomap .tituloinfo{ padding-right:20px;font-weight:bold}


.testimonialbg{ background:url(../images/bg-burbujas.jpg); background-size:cover}
.talent{color:#023689; font-size:80px !important; line-height:60px; vertical-align:central; margin-top:20%}
.testimoniales h3{font-family: 'Brunabold'; font-size:60px; text-align:center; line-height:50px; padding-bottom:80px; padding-top:50px;  color:#023689}
.testimonial1{ width:330px; height:414px; padding:200px 500px 0 80px; margin:0 auto; background:url(../images/blue-talent1.jpg); background-size:cover; color:white; }
.testimonial1 p{ padding-bottom:20px; border-left:3px solid #FFF; padding-left:20px; font-size:16px}

.testimonial2{ width:360px; height:454px; background:url(../images/blue-talent2.jpg); background-size:cover; color:white; margin:100px auto; padding:160px 100px 0 450px}
.testimonial2 p{ padding-bottom:20px; border-left:3px solid #FFF; padding-left:20px; font-size:16px}

.testimonial3{ width:300px; height:354px; padding:260px 510px 0 100px; margin:0 auto; background:url(../images/blue-talent3.jpg); background-size:cover; color:white; }
.testimonial3 p{ padding-bottom:20px; border-left:3px solid #FFF; padding-left:20px; font-size:16px}

.testimonial4{ width:300px; height:374px; background:url(../images/blue-talent4.jpg); background-size:cover; color:white; margin:100px auto; padding:240px 100px 0 510px}
.testimonial4 p{ padding-bottom:20px; border-left:3px solid #FFF; padding-left:20px; font-size:16px}

.testimonial5{ width:300px; height:414px; padding:200px 510px 0 100px; margin:0 auto; background:url(../images/blue-talent5.jpg); background-size:cover; color:white; margin-bottom:50px}
.testimonial5 p{ padding-bottom:20px; border-left:3px solid #FFF; padding-left:20px; font-size:16px}



.form-talent{ width:910px; height:auto; margin:0 auto}
.form-talent h3{font-family: 'Brunabold';
  font-size: 50px;
  text-align: center;
  line-height: 50px;
  color: #023689;}
.form-talent ul{ width:600px; margin:30px auto 0 auto; padding:0}
.form-talent ul li{ list-style:none; margin-bottom:15px}
input[type="checkbox"] { width:auto}
.form-talent-input{ border:solid 2px #e8e8e8; background:#f7f7f7; font-family:'Bruna'; font-size:16px; padding:10px; border-radius:10px}
.form-talent-input:focus, .form-talent-input:hover{border:solid 2px #023689}
.form-talent textarea{ min-height:200px; max-height:200px; overflow:hidden; border:solid 2px #e8e8e8; background:#f7f7f7; font-family:'Bruna'; font-size:16px; padding:10px; border-radius:10px}
.form-talent textarea:hover, .form-talent textarea:focus{border:solid 2px #023689}
input[type=file]{ width:70%; margin:0 auto; text-align:center; margin-top:10px}
input[type=file]::file-selector-button {
  border: 2px solid #023689;
  padding: 10px;
  border-radius: 10px;
  background-color: #023689;
  transition: 1s;
  color:white
}



.filtros{ background:#023689; padding:50px 0}
.filtroscontent{ width:910px; height:auto; margin:0 auto; color: white}
.filtroscontent h3{ text-align:center; font-size:30px; font-family:'Brunabold'}
.filtroscontent ul{ width:100%; list-style:none; margin-bottom:25px; clear: both; display:flex}
.filtroscontent ul li{ list-style:none; float:left; width:31%; padding:0 1%; text-align:left; margin-top:25px}
.filtroscontent ul li select, .filtroscontent ul li input{ border-radius:25px; border:none; color:white; color:#023689; font-family:'Bruna'; width:80%; padding:10px; margin-top:15px}

.boton-filtro{ padding:10px; background:white; color:#023689; border:none; border-radius:15px; margin-left:10px}

.promesas h3{font-family: 'Brunabold'; font-size:60px; text-align:center; line-height:50px; padding-bottom:80px; padding-top:50px;  color:#023689}
.promesa{ width:1000px; margin:0 auto}
.promesa li{ list-style:none; float:left; width:calc(20% - 20px); padding:0 10px; text-align:center}
.promesa p{ text-align:center; font-size:16px}

.compromiso{ width:1200px; padding:100px 0; margin:0 auto; text-align:center}
.compromiso h3{font-family: 'Brunabold'; font-size:60px; color:#023689; text-transform:uppercase; line-height:60px}
.compromiso p{ padding-top:30px}

.manati{ background:url(../images/manati.jpg) no-repeat; background-size:cover; height:113vh; margin-top:100px}
.manatitxt{ width:550px; padding-left:46%; color:white}
.manatitxt h3{ font-family:'Brunabold'; font-size:60px; line-height:50px; padding-top:23%}
.manatitxt p{ margin-top:20px}
.compromisos{ width:23%; height:auto; float:left; margin:1%; box-shadow: 0 0 5px 0 rgb(0, 0, 0, 0.2); border-radius:10px;; padding-bottom:25px; background:white; text-align:center }
.compromisos h4{ padding-top:20px; height:50px; text-align:center  !important}
.compromisos .h4heigh{ height:70px}
.compromisos a{ border:solid 1px #999; padding:10px; border-radius:20px; margin-top:15px; display:block; width:50%; margin:0 auto; text-decoration:none; color:black}
.compromisos p{ text-align: justify}
.modal-button{ text-align:center}

.accordion{color: #000; cursor: pointer; transition: 0.4s; background:none;  border:solid 1px #999; padding:10px; border-radius:20px; margin-top:15px; display:block; width:50%; margin:0 auto; text-decoration:none; color:black; text-align:center}
.actived, .accordion:hover{background:none;}
.accordion:after{content: 'Leer más';  color: #777; text-align:center;}
.actived:after{content: "Cerrar";}
.panel {padding:0 10px; background-color: white; max-height:0; overflow:hidden; transition:max-height 0.2s ease-out; text-align:justify}
.pilares{font-size:46px; line-height:40px; margin-top:0; margin-bottom:0}


.objetivos{ padding:0 0 50px 0; background:#f7f9fb; margin-top:50px}
.objetivos ul{ width:100%; height:auto; margin-bottom:50px; display:flex}
.objetivos ul li{ list-style:none; float:left; width:50%;}
.objetivosdescription{ float:right !important; width:490px; padding-right:100px}
.objetivosdescription h3{ font-family:'Brunabold'; font-size:60px; line-height:60px; padding-bottom:20px;  padding-top:20%; color:#023689}
.objetivosdescription p{ padding-top:20px;}
.objetivosimg{ width:100px; height:auto; margin-top:20px}

.greentitle{ font-size:92px !important; line-height:70px; color:#5b8f21}
.greentitle span{ font-size:60px; line-height:55px; font-family:'Brunabold'}
.partners{ width:100%; margin:0 auto}
.partners li{ list-style:none; float:left; width:25%}

.mapadirection{border:0; width:100%; height:100vh;}


.exhibidores{ background:#ebf4fa; padding:50px 0; display:none}
.exhibidores ul{ width:1000px; margin:0 auto;}
.exhibidores ul li{ float:left; list-style:none; width:50%; text-align:center}
.exhibidores ul li img{ width:80%; height:auto;}

.privadasyexclusivas{ margin:50px 0; display:none}
.marcas-privadas{ height:auto; background:#f7f7f7; text-align:center; padding:50px 0}
.marcas-privadas h3{text-align:center; font-size:60px; font-family:'Brunabold'; line-height:50px; color:#ffbc3d}
.marcas-privadas p{text-align:center; padding-top:20px}
.marcas-privadas ul{ width:720px; margin:0 auto; height:auto; clear: both !important; margin-top:30px; padding-bottom:30px}
.marcas-privadas ul li{ float:left; width:33%; list-style:none; text-align:center}
.marcas-privadas a{background:#ffbc3d; width:auto; height:auto; margin: 0 auto; cfont-family: 'Brunabold';padding: 20px; border-radius: 50px; color: white;text-decoration:none}
.content-privadas{ width:700px; margin:0 auto; background:#efefef; border-radius:20px; padding:20px; margin-top:20px; }
.content-privadas::after{ width:169px; height:500px; content:url(../images/botellas.png); position:absolute; margin-left:300px; margin-top:-250px}

.marcas-exclusivas{height:auto; background:#f7f7f7; text-align:center; padding:50px 0; margin-top:50px}
.content-exclusivas{ width:700px; margin:0 auto; background:#efefef; border-radius:20px; padding:20px; margin-top:20px; }
.content-exclusivas::before{ width:224px; height:500px; content:url(../images/botellas2.png); position:absolute; margin-left:-300px; margin-top:-200px}



@media only screen and (max-width: 1366px){
	
	
	}
@media only screen and (max-width: 1200px){
	.reconocimientos{ width:100%;}
	.reconocimientos .reconocimineto{ width:90%; margin:0 5% 50px 5%; float: inherit;}
	.reconocimientos .reconocimineto-min{ width:90%; margin:0 5% 50px 5%; float: inherit;}
	
	}
@media only screen and (max-width: 910px){
	.banners{ height:90vh !important}
	.desktop{ display:none}
	.mobile{ display:block}
	.videosection{ width:100%; height:auto;}
	.content{ width:100%; height:auto; margin:0 auto; display:inline-block}
	.midcontent{ width:100%; float: inherit}
	.hidractivetitle{margin:50px auto 0 auto}
.hidractivep{ width:350px; margin:20px auto 0 auto; padding:0}
	.marileidyimg{ width:90%; height:auto; margin:0 auto}
	.feed{ width:calc(90% - 50px); height:auto; padding:25px; border-radius:20px; background:white; margin:-50px auto 0 auto}
	.productshoot .largeproduct{ width:300px; height:584px; margin:0 auto}
	.menufooter { width:100%; display:inherit; padding-bottom:50px}
	.menufooter li{ width:90% !important; display:block; padding-bottom:10px}
	.menufooter span{ padding-left:10px}
	.sabor-list{width:170px !important;}
	.sabor-list-txt{width:120px !important}
	.hidroactive-products{ background-repeat:repeat}
	.contactpoints{ width:90%;}
	.first{width:48%; font-size:16px}
	.mini {font-size:11px; padding-top:5px; width:100%}
	.mini2 {font-size:11px; padding-top:10px; width:50%}
	.directions{margin-bottom:15px; margin-top:15px}
	.swiper-slide h3{font-size:30px; line-height:25px}
	.agua-family{ padding-top:20px; height:auto !important; display:inline flow-root list-item; margin-bottom:50px}
	.family-agua{ width:90%; margin-left:5%}
	.family-agua{ text-align:center}
	.boton-size{ margin:0 auto 20px auto !important}
	.text-size{ width:90%; margin-left:5%; text-align:justify}
	.sample-size{width:45%}
	.imgreciclada{margin-top:0; width:80%; height:auto; margin-right:10%}
	h3.greentext{ font-size:50px; width:90%; margin:0 5%; text-align:center; clear:both}
	p.greentext{ width:90% !important; margin:5%; clear:both}
	.saboriazadas-int{ width:100%; clear:both; display:flex; margin:0 auto}
	.saborizadas-title{ font-size:50px}
	.mermeladascont{ height:auto}
	.contentmax{ width:100%; height:auto; margin:0 auto}
	.contentmax div{ width:33.3%; float:left; transition: 1s; min-height:35vh}
	.mermeladascont{padding-top:0; margin-top:0}
	.marcas{ height:100% !important; margin-top:100px; width:100%;}
	.marcas div{ width:100%; float:left; height:25vh}
	.marcas div:nth-child(2){ width:100%; height:25vh}
	.marca-hidractive h3{margin-top:7vh; width:150px; height:120px;background-size:cover}
	.marca-planetaazul h3{margin-top:7vh; width:150px; height:120px; background-size:cover}
	.marca-bon h3{margin-top:7vh; width:150px; height:120px; background-size:cover}
	.marca-nuvi h3{margin-top:7vh; width:150px; height:120px; background-size:cover}
	.quartercontent{ width:50%; float:left; text-align:center !important; margin-bottom:25px}
	.quartercontent img{ width:70%; height: auto; margin:0 auto; }
.quartercontent img:hover{ width:70%;}
.nuestragete-bg{ background-position: right;}
.liderazgo{ height:auto}	
.director-general{ width:100%; float:inherit; min-height:400px; background:url(../images/DiegoFreireMobb.jpg); background-size:cover}
.director-general h3{ font-size:50px;line-height:40px; padding-left:3% !important; padding-top:5%}
.director-general p{ padding-left:3% !important}
.caracteristicas-lider{ width:100%; float:inherit}
.center { width:320px; margin:0 auto; padding-bottom:30px}
.fotos-voluntarios{ width:100%; float:inherit; height:auto}
.fotos-voluntarios ul{ margin:0; padding:0; list-style:none; width:100% !important; display:flex; justify-content:center }
.fotos-voluntarios ul li img{width:90%; height:auto}
.voluntariado{ height:100%}
.whitetxth3{font-size:48px !important; }
.list-carreras{width:100%; height:auto;}
.list-carreras li{ float:inherit; width:100%; height:300px; list-style:none; clear:both}
.list-carreras li:first-child{ margin-right:none; margin-bottom:20px}
.list-carreras li H4{ padding-top:30%}
.titulo-carreras{font-size:45px; line-height:40px}
.texto-carreras{ padding:50px 20px 0 20px}

.identidad-bg{padding:50px 0}
.identidad{ width:100%}
.identidad li{ width:100%; float: inherit; clear:both}
.identidad li:first-child{ margin-right:0}
.identidad h3{padding-top:0; text-align:center; padding-bottom:30px}
.identidad p{padding:0 20px}

.vision ul{width:100%; height:auto; margin:0 auto}
.vision ul li{ width:100%; float: inherit; clear:both}
.vision ul li:first-child{ margin-right:0; padding-bottom:30px}
.vision h3{ text-align:center}
.vision p{padding:0 20px}
.vision .parrafo-vision{ padding-bottom:20px !important}

.valores-cont{ padding:30px 0}
.valor { width:100%}
.valor li{list-style:none; float:inherit; padding-top:20px; padding-bottom:20px}
.valor-1{padding:0; width:90%; text-align:center; margin:0 auto}
.valor-2{padding:0; width:90%; text-align:center; margin:0 auto}
.valor-3{padding:0; width:90%; text-align:center; margin:0 auto}
.valor-4{padding:0; width:90%; text-align:center; margin:0 auto}
.valor-1 h4,.valor-2 h4, .valor-3 h4,.valor-4 h4 { text-align:center; padding-top:20px}
.valor img{ margin:0 auto !important}
.valor p{ padding:0 20px}

.capital-humano{padding:50px 0}
.capital-humano p{ width:auto; font-size:16px; padding:30px 20px 0 20px; text-align:justify}
.top-firma{margin-top:-50px}
.firma{margin:0 auto; width:95%; height:auto}

.excelencia{width:95%; margin:0 auto}
.excelencia li{ float:inherit; padding-bottom:0;}
.excelencia .excel-img{ width:100%; text-align:center}
.excelencia .excel-img img{ width:90%; height:auto; margin:0 auto}
.excelencia .excel-txt{ width:90%; padding-bottom:15px; padding-left:0; margin:0 auto}

.sobrenosotros-bg{ background:url(../images/sobrenosotros-bg.jpg) top certer}	

.list-services{ width:100%; height:auto; margin:50px auto 0 auto}
.list-services .service{ float:inherit; width:100%}
.services-detail{ width:88%; margin:0 5%}
.boton-services-mob{ margin-top:20px}
.negocio{width:100%; margin-top:-50px}
.negocio li{width:80%; float:inherit; padding:0 0 50px 0; margin:0 auto !important}
.borders-negocio{ border:none}


.infomap {width:90%; margin:0 auto;  height:auto; position: inherit; top:inherit; left:inherit; float:inherit}
.mapmob{ float:right !important}
.talent{margin-top:2px}

.imgtestimonial{margin:0 auto; width:320px; height:auto; margin-bottom:30px}
.testimonial1{ width:90%; height:auto; padding:0; margin:0 auto; background:none; color:white; color:#000}
.testimonial1 p{ padding-bottom:20px; border-left:none; padding-left:0; font-size:16px; text-align:justify}
.testimonial2{width:90%; height:auto; padding:0; margin:0 auto; background:none; color:white; color:#000}
.testimonial2 p{ padding-bottom:20px; border-left:none; padding-left:0; font-size:16px; text-align:justify}
.testimonial3{ width:90%; height:auto; padding:0; margin:0 auto; background:none; color:white; color:#000}
.testimonial3 p{ padding-bottom:20px; border-left:none; padding-left:0; font-size:16px; text-align:justify}
.testimonial4{width:90%; height:auto; padding:0; margin:0 auto; background:none; color:white; color:#000}
.testimonial4 p{ padding-bottom:20px; border-left:none; padding-left:0; font-size:16px; text-align:justify}
.testimonial5{ width:90%; height:auto; padding:0; margin:0 auto; background:none; color:white; color:#000;}
.testimonial5 p{ padding-bottom:20px; border-left:none; padding-left:0; font-size:16px; text-align:justify}
.filtroscontent ul{ display:inherit}
.filtroscontent ul li{float:inherit; width:90%; padding:0 5%}
.filtroscontent{ width:100%;}
.filtroscontent ul li input{ width:95%; padding:10px; margin-top:15px}
.filtroscontent ul li select{ width:100%; padding:10px; margin-top:15px}
.boton-filtro{ margin-left:25px}



.promesa{ width:100%}
.promesa li{float:inherit; width:90%; padding:0 5%; margin-bottom:50px} 


.compromiso{ width:90%; padding:50px 5% 50px 5%; margin:0 auto; text-align:center}
.compromiso h3{ font-size:45px; line-height:45px}
.manati{ background:none; height:auto}
.manati h3{ font-size:50px; margin-top:0; padding-top:20px;color:#023689}
.manatitxt{ width:90%; padding:0 5%; color:black}
.pilares{font-size:41px  !important; line-height:40px !important}
.compromisos{ width:90%; float:inherit; margin:0 auto; margin-bottom:30px}

.objetivos{ padding:0 0 50px 0; background:#f7f9fb; margin-top:50px}

.objetivos ul li{ list-style:none; float:left; width:90%; padding:0 5%}
.objetivosdescription{ float:right !important; width:100%; padding-right:0}
.objetivosdescription h3{ font-family:'Brunabold'; font-size:41px; line-height:40px; padding-bottom:0px;  padding-top:0; color:#023689}
.objetivosdescription p{ padding-top:20px;}
.objetivosimg{ width:100px; height:auto; margin-top:20px}
.partners{ width:100%; margin:0 auto}
.partners li{ list-style:none; float:left; width:70%; margin:0 15% 25px 15%}


.botella-reciclada{width:100%; height:auto}
.titlegreenrecicled{margin-top:0px}
.form-talent{ width:90%; margin:0 5%; padding:0}
.form-talent ul{ width:100%}
.form-talent-input{ width:calc(100% - 20px) !important;}
.form-talent textarea{ width:calc(100% - 20px) !important; min-width:inherit; max-width:inherit}
.contactpointsmob{ padding-bottom:0}
.mapadirection{height:50vh;}

#stickers::before{ display:none}
#stickers::after{ display:none}
#Exclusivas::after{ display:none}
#Crecimiento::before{display:none}
.texto-botellas{ width:90%; padding:20px 5% 0 5%}
.buttons-botellas{ width:90%; margin:0 5%; padding-bottom:0}
.buttons-botellas li{ width:100%; float:inherit; padding-bottom:30px}
.buttons-botellas2{ width:90%; margin:0 5%;}	


.ListPartners{ width:90%; margin:0 5%}
.ListPartners li{ float:left; list-style:none; width:50%; text-align:center}
.breakpartners{ clear:inherit;  padding-left: inherit}

.nosotros2, .nosotros1{height:auto !important; margin:0 !important}
.nosotros1 h4, .nosotros2 h4{ padding:30px 0 !important; margin:0 !important}
	
@media only screen and (max-width: 650px){
	}
	
	
	  





.rotate-center:hover{-webkit-animation:rotate-center .6s ease-in-out both;animation:rotate-center .6s ease-in-out both}
/* ----------------------------------------------
 * Generated by Animista on 2024-6-25 23:10:38
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes rotate-center{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate-center{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}