@font-face {
    font-family: "Roboto";
    src: url('fuentes/Roboto-Regular.ttf') format("truetype");
}
@font-face {
    font-family: "Roboto-Medium";
    src: url('fuentes/Roboto-Medium.ttf') format("truetype");
}
@font-face {
    font-family: "Roboto-Black";
    src: url('fuentes/Roboto-Black.ttf') format("truetype");
}
@font-face {
    font-family: "Roboto-Light";
    src: url('fuentes/Roboto-Light.ttf') format("truetype");
}
@font-face {
    font-family: "Myriad-Pro";
    src: url('fuentes/Myriad.ttf') format("truetype");
}
* {
	margin:0;
	padding:0;
	font-family: "Myriad-Pro";
}
header {
	width:100%;
	position:absolute;
	z-index:1001;
	font-family: "Roboto";
	
}
.info-m {
	position:absolute;
	width:100%;
	z-index:2001;
}
/*Sl*/
#slider1_container {
	position: relative; 
	margin: 0 auto;
    top: 0px; 
	left: 0px; 
	width: 1600px; 
	height: 770px; 
	overflow: hidden;
}

.social {
	position: fixed; 
	left: 0; 
	top: 40vh; 
	z-index: 2000; 
}
 
.social ul {
	list-style: none;
}
 
.social ul li a {
	display: inline-block;
	color:#fff;
	background: #000;
	padding: 15px 20px;
	font-size:18px;
	text-decoration: none;
	-webkit-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	transition:all 500ms ease; 
}
 
.social ul li .icon-facebook {background:#3b5998;} 
.social ul li .icon-play3 {background: #b3b3b3;}
.social ul li .icon-file-pdf {background: #666666;}
.social ul li .icon-download {background: #4d4d4d;}
.social ul li .icon-mail {background: #666666;}

.social ul li a:hover {
	background: #000; 
	padding: 15px 40px; 
}









#loading {
	position: absolute; 
	top: 0px; 
	left: 0px;
}
#loading2 {
	filter: alpha(opacity=70); 
	opacity: 0.7; 
	position: absolute; 
	display: block;
    top: 0px; 
	left: 0px; 
	width: 100%; 
	height: 100%;
}
#loading3 {
	position: absolute; 
	display: block; 
	background: url(../images/loading.gif) no-repeat center center;
    top: 0px; 
	left: 0px; 
	width: 100%; 
	height: 100%;
}
#slides {
	cursor: move; 
	position: absolute; 
	left: 0px; 
	top: 0px; 
	width: 1600px;
    height: 770px; 
	overflow: hidden;
}
#caption {
	position: absolute; 
	width: 445px; 
	height: 300px; 
	top: 100px; 
	left: 600px;
}
#phone {
	position: absolute; 
	width: 445px; 
	height: 300px; 
	top: 0px; 
	left: 0px;
}
#img_caption {
	position: absolute; 
	width: 102px; 
	height: 78px; 
	top: 70px; 
	left: 130px;
}
#text {
	position: absolute; 
	width: 80px; 
	height: 53px; 
	top: 153px; 
	left: 163px;
}
#fruit {
	position: absolute; 
	width: 140px; 
	height: 90px; 
	top: 60px; 
	left: 220px;
}
#navigator {
	position: absolute; 
	width: 200px; 
	height: 155px; 
	top: 57px; 
	left: 121px; 
}
#caption2 {
	position: absolute; 
	width: 470px; 
	height: 220px; 
	top: 120px; 
	left: 650px;
}
#caption2_img {
	position: absolute; 
	width: 470px; 
	height: 220px; 
	top: 0px; 
	left: 0px;
}
#caption2_img1 {
	position: absolute; 
	width: 379px; 
	height: 213px; 
	top: 4px; 
	left: 45px;
}
#caption2_img2 {
	position: absolute; 
	width: 379px; 
	height: 213px; 
	top: 4px; 
	left: 45px;
}
#caption2_img_point {
	position: absolute; 
	width: 257px; 
	height: 300px; 
	top: 80px; 
	left: 200px;
}
#caption2_nav_horizontal {
	position: absolute; 
	width: 379px; 
	height: 213px; 
	top: 4px; 
	left: 45px;
}
#titulo {
	position: absolute; 
	width: 480px; 
	height: 120px; 
	top: 30px; 
	left: 30px; 
	padding: 5px;
    text-align: left; 
	line-height: 60px; 
	text-transform: uppercase; 
	font-size: 50px;
    color: #FFFFFF;
}
#titulo2 {
	position: absolute; 
	width: 480px; 
	height: 120px; 
	top: 30px; 
	left: 30px; 
	padding: 5px;
    text-align: left; 
	line-height: 60px; 
	text-transform: uppercase; 
	font-size: 50px;
    color: #FFFFFF;
}
#titulo3 {
	position: absolute; 
	width: 480px; 
	height: 120px; 
	top: 30px; 
	left: 30px; 
	padding: 5px;
    text-align: left; 
	line-height: 60px; 
	text-transform: uppercase; 
	font-size: 50px;
    color: #FFFFFF;
}
#leyenda {
	position: absolute; 
	width: 480px; 
	height: 120px; 
	top: 300px; 
	left: 30px; 
	padding: 5px;
    text-align: left; 
	line-height: 36px; 
	font-size: 30px;
    color: #FFFFFF;
}
#leyenda2 {
	position: absolute; 
	width: 640px; 
	height: 144px; 
	top: 308px; 
	left: 274px; 
	padding: 5px;
    text-align: left; 
	line-height: 36px; 
	font-size: 50px;
    color: #FFFFFF;
}
#leyenda3 {
	position: absolute; 
	width: 480px; 
	height: 120px; 
	top: 300px; 
	left: 30px; 
	padding: 5px;
    text-align: left; 
	line-height: 36px; 
	font-size: 30px;
    color: #FFFFFF;
}
#leyenda4 {
	position: absolute; 
	width: 683px; 
	height: 75px; 
	top: 179px; 
	left: 875px; 
	padding: 5px;
    text-align: left; 
	line-height: 36px; 
	font-size: 50px;
    color: #FFFFFF;
}
/*Bullet Navigator Skin Begin 
             jssor slider bullet navigator skin 21 css */
            /*
            .jssorb21 div           (normal)
            .jssorb21 div:hover     (normal mouseover)
            .jssorb21 .av           (active)
            .jssorb21 .av:hover     (active mouseover)
            .jssorb21 .dn           (mousedown)
            */
            .jssorb21 div, .jssorb21 div:hover, .jssorb21 .av
            {
                background: url(../images/b21.png) no-repeat;
                overflow:hidden;
                cursor: pointer;
            }
            .jssorb21 div { background-position: -5px -5px; }
            .jssorb21 div:hover, .jssorb21 .av:hover { background-position: -35px -5px; }
            .jssorb21 .av { background-position: -65px -5px; }
            .jssorb21 .dn, .jssorb21 .dn:hover { background-position: -95px -5px; }


/*Arrow Navigator Skin Begin 
             jssor slider arrow navigator skin 21 css */
            /*
            .jssora21l              (normal)
            .jssora21r              (normal)
            .jssora21l:hover        (normal mouseover)
            .jssora21r:hover        (normal mouseover)
            .jssora21ldn            (mousedown)
            .jssora21rdn            (mousedown)
            */
            .jssora21l, .jssora21r, .jssora21ldn, .jssora21rdn
            {
            	position: absolute;
            	cursor: pointer;
            	display: block;
                background: url(../images/a21.png) center center no-repeat;
                overflow: hidden;
            }
            .jssora21l { background-position: -3px -33px; }
            .jssora21r { background-position: -63px -33px; }
            .jssora21l:hover { background-position: -123px -33px; }
            .jssora21r:hover { background-position: -183px -33px; }
            .jssora21ldn { background-position: -243px -33px; }
            .jssora21rdn { background-position: -303px -33px; }
			
			
#jssorb21 {
	position: absolute; 
	bottom: 26px; 
	left: 6px;
}
#prototype {
	POSITION: absolute; 
	WIDTH: 19px; 
	HEIGHT: 19px; 
	text-align:center; 
	line-height:19px; 
	color:White; 
	font-size:12px;
	margin-top:-30px;
}
/*Fin Sl*/
.c-menu {
	width:79%;
	max-width: 1250px;
	margin: 0 auto;
}
#menu {
	width:100%;
	height:88px;
	float:left;
	background-color:#1b3c2e;
	margin-top:-1px;
}

/* --- Clase que agregaremos cuando el usuario haga scroll --- */
.menu-fixed {
	padding-top:20px;
	margin: 0 auto;
	position:fixed;
	z-index:1000;
	top:0;
	left:0;
	width:100%;
	height:48px;
	box-shadow:0px 4px 3px rgba(0,0,0,.5);
	background-color:#1b3c2e;
	padding-top:2%;
}
/**/
.contenedor {
	width:100%;
	margin: 0 auto;
	padding-top:2%;
}
#nav li {
	display: inline-block;
	text-align:center;
}
#lt-menu {
	width:12%;
	font-family: "Roboto-Light";
	font-family:16px;
}
#lt-menu a {
	text-decoration:none;
	color:#ffffff;
}
#lt-menu a:hover {
	text-decoration:none;
	color:#5d804c;
	font-family: "Roboto-black";
}
#lt-menu a:focus {
	text-decoration:none;
	color:#5d804c;
	font-family: "Roboto-black";
}
#img-menu {
	width:1%;
}
#img-menu img {
	vertical-align:middle;
}
#nosotros {
	width:100%;
	float:left;
}
.n-contenedor {
	width:79%;
	max-width: 1250px;
	margin: 0 auto;
	display: flex;
  	display: -webkit-flex;
  	flex-flow: row wrap;
  	-webkit-flex-flow: row wrap;
}
.espacio {
	width:100%;
	height:100px;
}
.espacio1 {
	width:100%;
	height:100px;
}
.espacio2 {
	width:100%;
	height:100px;
}
.nosotros, .mision, .vision {
  	width: 33.3%;
}
.nosotros h1, .mision h1, .vision h1 {
  	font-family: "Roboto-Black";
	text-align:center;
	color:#2d2d2d;
}
.nosotros p, .mision p, .vision p {
  	font-family: "Myriad-Pro";
	text-align:justify;
	padding:7%;
	color:#575757;
	font-size:16px;
}
#responsabilidad {
	width:100%;
	background-color:#ff7612;
	float:left;
}
.r-contenedor {
	width:79%;
	max-width: 1250px;
	margin: 0 auto;
	display: flex;
  	display: -webkit-flex;
  	flex-flow: row wrap;
  	-webkit-flex-flow: row wrap;
}
.respo1 {
	width:52%;
}
#img-respo2 {
	display:none;
}
.respo1 img {
	display:block;
}
.respo2 {
	width:48%;
}
.respo2 h1 {
  	font-family: "Roboto-Black";
	text-align:left;
	color:#ffffff;
	line-height:30px;
	padding:10px;
	margin-top:15%;
	margin-left:10%;
}
.respo2 p {
  	font-family: "Myriad-Pro";
	text-align:justify;
	padding:10px;
	color:#FFFFFF;
	font-size:16px;
	margin-left:10%;
}
#reconocimiento {
	width:100%;
	float:left;
}
.rec-espacio {
	width:100%;
	height:70px;
}
.rec-contenedor {
	width:61%;
	max-width: 975px;
	margin: 0 auto;
}
.rec-contenedor h1 {
  	font-family: "Myriad-Pro";
	text-align:center;
	color:#1b3c2e;
}
#rec-texto1 {
  	font-family: "Myriad-Pro";
	font-weight:bold;
	text-align:center;
	font-size:16px;
	color:#1b3c2e;
}
#rec-texto2 {
  	font-family: "Myriad-Pro";
	text-align:center;
	font-size:16px;
	color:#454D43;
	margin-top:4%;
}
#productos {
	width:100%;
	float:left;
}
#bnr2 {
	display:none;
}
.p-vermas {
	position:absolute;
	z-index:2;
	margin-left:70%;
	margin-top:5%;
	text-align:center;
}
#txt-p-vermas {
	font-family: "Roboto-Black";
	color:#FFFFFF;
	text-align:center;
	font-size:25px;
}
#txt-p-vermas2 {
	font-family: "Roboto-Light";
	color:#FFFFFF;
	text-align:center;
	font-size:23px;
}
#txt-p-vermas3 {
	font-family: "Roboto-Black";
	color:#FFFFFF;
	text-align:center;
	font-size:16px;
}
#txt-p-vermas3 a {
	text-decoration: none;
	color:#FFFFFF;
}
#txt-p-vermas4 {
	font-family: "Roboto-Black";
	color:#FFFFFF;
	text-align:center;
	font-size:16px;
}
#txt-p-vermas4 a {
	text-decoration: none;
	color:#FFFFFF;
}
#ver {
	position:absolute;
	margin-top:-6%;
}
#ver2 {
	position:absolute;
	margin-top:-6%;
}
.p-contenedor {
	width:79%;
	max-width: 1250px;
	height:630px;
	margin: 0 auto;
	display: flex;
  	display: -webkit-flex;
  	flex-flow: row wrap;
  	-webkit-flex-flow: row wrap;
}
.p-espacio {
	width:100%;
	height:100px;
}
.spirulina1, .spirulina2, .spirulina3 {
  	width: 31%;
	text-align:center;
	color:#5D804C;
}
.spirulina1 img, .spirulina2 img, .spirulina3 img {
	display:block;
}
.spirulina1, .spirulina2, .spirulina3 {
  	font-family: "Myriad-Pro";
	text-align:justify;
	padding:10px;
	color:#575757;
	font-size:16px;
}
.cuadro {
	width:100%;
	border:#6b463d 2px solid;
	font-family: "Roboto-Black";
	font-size:16px;
	text-align:center;
	color:#6b463d;
	padding:5px;
}
.g-barra {
	width:20%;
	height:8px;
	background-color:#6b463d;
	margin: 0 auto; 
	margin-top:10%;
}
#jbnr2 {
	display:none;
}
#p-texto {
	text-align:center;
	font-family: "Myriad-Pro";
	padding:10px;
	color:#575757;
	font-size:16px;
	margin-top:10%;
}
.compra {
	width:100%;
	background-color:#5f3329;
	padding-top: 1px;
  	padding-bottom: 45px;
 
} 
#btn-comunicate {
	width:262px;
	border: 1px solid #FFFFFF;
	position:relative;
	z-index:1;
	color:#FFFFFF;
	font-family: "Roboto";
	font-size:20px;
	padding-top: 14px;
  	padding-right: 0px;
  	padding-bottom: 14px;
  	padding-left: 0px;
	margin:0 auto;
	margin-top:4%;
	transition: all 500ms ease;
	text-align:center;
	background: #1b3c2e;
}
#btn-comunicate:hover {
	 background: #FFFFFF;
	 color: #5D804C;
	 border: 1px solid #5D804C;
}
.compra a {
	text-decoration:none;
}
#spirulina {
	width:100%;
	float:left;
}
.s-contenedor {
	width:79%;
	max-width: 1250px;
	margin: 0 auto;
	display: flex;
  	display: -webkit-flex;
  	flex-flow: row wrap;
  	-webkit-flex-flow: row wrap;
}
.s-contenido1 {
	width: 44%;
	text-align: left;
}
.s-contenido1 h1 {
	color:#1b3c2e;
	font-family: "Roboto-Black";	
}
.s-contenido1 p {
	color:#575757;
	font-family: "Myriad-Pro";
	margin-top:15px;
	padding-right:50px;
	text-align:justify;
}
.s-contenido2 {
	width:28%;
}
.s-contenido3 {
	width:28%;
}
.tabla1 {
	width:90%;
	height:18px;
	border:1px solid #727176;
	border-collapse:collapse;
	padding:1px;
	font-size:14px;
	color:#727176;
	font-family: "Myriad-Pro";
}
.tabla1 th {
	border:1px solid #727176;
	padding:1px;
}
.tabla1 td {
	border: 1px solid #727176;
	padding: 1px;
	padding-left:5px;
}
.tabla2 {
	width:90%;
	height:18px;
	border:1px solid #727176;
	border-collapse:collapse;
	padding:1px;
	font-size:14px;
	color:#727176;
	font-family: "Myriad-Pro";
}
.tabla2 th {
	border:1px solid #727176;
	padding:1px;
}
.tabla2 td {
	border: 1px solid #727176;
	padding: 1px;
	padding-left:5px;
}
#t-right {
	text-align:right;
	padding-right:5px;
}
#cabezera {
	background-color:#1b3c2e;
	color:#FFFFFF;
}
#beneficios {
	width:100%;
	float:left;
}
.b-contenedor {
	width:79%;
	max-width: 1250px;
	margin: 0 auto;
	display: flex;
  	display: -webkit-flex;
  	flex-flow: row wrap;
  	-webkit-flex-flow: row wrap;
}
.b-titulo {
	width:100%;
	text-align:center;
	color:#1b3c2e;
	font-family: "Roboto-Black";
	margin-top:10%;
}
#mejora-m, #reduce-m, #incrmenta-m, #regula-m {
	display:none;
}
.c1, .c2, .c3, .c4 {
  width: 50%;
}
.c1 img, .c2 img, .c3 img, .c4 img {
	display:block;
}
.pop-contenedor {
	width:100%;
	max-width: 1250px;
	margin: 0 auto;
	display: flex;
  	display: -webkit-flex;
  	flex-flow: row wrap;
  	-webkit-flex-flow: row wrap;
}
.pop-cabezera {
	width:100%;
	background:url(../images/cabezera1.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	display: flex;
  	display: -webkit-flex;
  	flex-flow: row wrap;
  	-webkit-flex-flow: row wrap;
}
.pop-cabezera2 {
	width:100%;
	background:url(../images/cabezera2.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	display: flex;
  	display: -webkit-flex;
  	flex-flow: row wrap;
  	-webkit-flex-flow: row wrap;
}
.pop-cabezera3 {
	width:100%;
	background:url(../images/cabezera3.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	display: flex;
  	display: -webkit-flex;
  	flex-flow: row wrap;
  	-webkit-flex-flow: row wrap;
}
.pop-cabezera4 {
	width:100%;
	background:url(../images/cabezera4.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	display: flex;
  	display: -webkit-flex;
  	flex-flow: row wrap;
  	-webkit-flex-flow: row wrap;
}
.pop-cabezera img {
	vertical-align:middle;
}
.pop-cabezera2 img {
	vertical-align:middle;
}
.pop-cabezera3 img {
	vertical-align:middle;
}
.pop-cabezera4 img {
	vertical-align:middle;
}
.pop-cabezera-1 {
	width:20%;
	font-family: "Roboto-Black";
	color:#FFFFFF;
}
.pop-cabezera-1 h1 {
	padding-top:20px;
	margin-top:5px;
	float:right;
}
.pop-cabezera-2 {
	width:60%;
}
.pop-cabezera-2 img {
	padding:20px;
}
.pop-cabezera-3 {
	width:20%;
}
.pop-cabezera-3 img {
	padding-top:27px;
}
#back {
	vertical-align:middle;
}

.pop-c1, .pop-c2, .pop-c3, .pop-c4, .pop-c5, .pop-c5, .pop-c6, .pop-c7, .pop-c8 {
	width:49.7%;
	border: 1px solid #B1B8A1;
}
.pop-c1 h4, .pop-c2 h4, .pop-c3 h4, .pop-c4 h4, .pop-c5 h4, .pop-c5 h4, .pop-c6 h4, .pop-c7 h4, .pop-c8 h4 {
	color:#5D804C;
	font-family: "Roboto-Black";
	padding:10px;
}
.pop-c1 p, .pop-c2 p, .pop-c3 p, .pop-c4 p, .pop-c5 p, .pop-c5 p, .pop-c6 p, .pop-c7 p, .pop-c8 p {
	color:#575757;
	font-family: "Myriad-Pro";
	padding:10px;
}


/**
 * Material Modal CSS
 */
.modal {
  will-change: visibility, opacity;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1000;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  -webkit-transition-delay: $modal-delay;
          transition-delay: $modal-delay;
}
.modal--active {
  visibility: visible;
  opacity: 1;
}
.modal--align-top {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.modal__bg {
  background: transparent;
}
.modal__dialog {
  max-width: 1250px;
  padding: 1.2rem;
}
.modal__content {
  will-change: transform, opacity;
  position: relative;
  padding: 2.4rem;
  background: #ffffff;
  background-clip: padding-box;
  box-shadow: 0 12px 15px 0 rgba(0,0,0,0.25);
  opacity: 0;
  -webkit-transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}
.modal__content--active {
  opacity: 1;
}
.modal__close {
  z-index: 1100;
  cursor: pointer;
}
#ver-regula {
	width:80%;
	height: auto;
}
.modal__trigger {
  position: absolute;
  margin-left:33%;
  margin-top:-4%;
  display: block;
  color: rgba(0,0,0,0.7);
  line-height: 1;
  cursor: pointer;
  
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.modal__trigger--active {
  z-index: 10;
}
.modal__trigger:hover {

}
#modal__temp {
  will-change: transform, opacity;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  -webkit-transform: none;
          transform: none;
  opacity: 1;
  -webkit-transition: opacity 0.1s ease-out, -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.1s ease-out, -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: opacity 0.1s ease-out, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/**
 * Demo specific CSS
 */

.demo-btns header {
  padding: 7vh 10vw;
  background: #ffebee;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.demo-btns header h1 {
  margin: 0;
  color: rgba(0,0,0,0.54);
  font-weight: 300;
}
.demo-btns .info {
  background: #f44336;
  padding: 3vh 10vw;
  height: 70vh;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-flow: column wrap;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
}
.demo-btns p {
  text-align: center;
  color: #fff;
}
.demo-btns .link {
  font-size: 20px;
}
.demo-btns .modal__trigger {
  margin-right: 3px;
}
@media (max-width: 640px) {
  .demo-btns .modal__trigger {
    margin-bottom: 0.8rem;
  }
}
.demo-close {
  position: absolute;
  top: 0;
  right: 0;
  margin: 1.2rem;
  padding: 0.6rem;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.demo-close svg {
  width: 24px;
  fill: #fff;
  pointer-events: none;
  vertical-align: top;
}
.demo-close:hover {
  background: rgba(0,0,0,0.6);
}
.logo {
  position: fixed;
  bottom: 3vh;
  right: 3vw;
  z-index: 2;
}
.logo img {
  width: 45px;
  -webkit-transform: rotate(0);
          transform: rotate(0);
  -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.logo img:hover {
  -webkit-transform: rotate(180deg) scale(1.1);
          transform: rotate(180deg) scale(1.1);
}


/*
  EFECTO FLIP
=================*/

/* Contenedor - Asignamos perspectiva */
.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
  border: 1px solid #ffffff; /* Border */

  /* Compatibilidad Firefox -IE */
  -moz-transform-style: preserve-3d;
  -moz-transform: perspective(1000px);
  -ms-transform-style: preserve-3d;
  -ms-transform: perspective(1000px);
}

.flip-container, .front, .back {
	width:100%;
	height:320px;
}

.flipper {
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;

  -moz-transition: 0.6s;
  -moz-transform: perspective(1000px);
  -moz-transform-style: preserve-3d;

  -ms-transition: 0.6s;
  -ms-transform-style: preserve-3d;

  transition: 0.6s;
  transform-style: preserve-3d;

  position: relative;
}

.front, .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;

  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;

  -moz-transition: 0.6s;
  -moz-transform-style: preserve-3d;

  -o-transition: 0.6s;
  -o-transform-style: preserve-3d;

  -ms-transition: 0.6s;
  -ms-transform-style: preserve-3d;

  transition: 0.6s;
  transform-style: preserve-3d;

  position: absolute;
  top: 0;
  left: 0;
}

.front {
  -webkit-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  z-index: 2;
}

.back {
   -webkit-transform: rotateY(-180deg);
      -moz-transform: rotateY(-180deg);
       -ms-transform: rotateY(-180deg);
           transform: rotateY(-180deg);
}

/* Hover - Toggle */
.flip-container:hover .front,
.flip-container.hover .front {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip-container:hover .back,
.flip-container.hover .back {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

/* Vertical */
.vertical.flip-container {
  position: relative;
}

.vertical.flip-container .flipper{
  /* Transform-origin: http://vagabundia.blogspot.com/2011/07/que-es-transform-origin.html */
  -webkit-transform-origin: 100% 200px;
     -moz-transform-origin: 100% 200px;
      -ms-transform-origin: 100% 200px;
          transform-origin: 100% 200px;
}

.vertical .back {
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

.vertical.flip-container:hover .back {
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}

.vertical.flip-container:hover .front {
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

/***Fin Flip****/
#consumo {
	width:100%;
	height:auto;
	float:left;
}
#c-contenedor {
	width:100%;
	background-color:#1b3c2e;
	padding-top: 1px;
  	padding-bottom: 45px;

}
#consumo h1{
	color:#ffffff;
	text-align:center;
	font-family: "Roboto-Black";
	margin-top:4%;
}
#consumo p{
	color:#ffffff;
	text-align:center;
	font-family: "Myriad-Pro";
	padding:10px;
	
}
#video1 {
	position:absolute;
	width: 100%;
	height: auto;
	z-index: -10;
	visibility: visible;
}
#video1 {
	position:absolute;
	width: 100%;
	height: auto;
	z-index: -10;
	visibility: visible;
}
#d-consumo {
	width:100%;
	height:auto;
	float:left;
	margin-top:13%;
}
#acordion-contenedor {
	width:79%;
	max-width: 1250px;
	margin: 0 auto;
}
.c-espacio {
	width:100%;
	height:40px;
}
#acordion-contenedor h1 {
	color:#1b3c2e;
	text-align:center;
	font-family: "Roboto-Black";
}

/*----- Accordion -----*/
.accordion, .accordion * {
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box;
}
 
.accordion {
    overflow:hidden;
    box-shadow:0px 1px 3px rgba(0,0,0,0.25);
    border-radius:3px;
    background:#ffffff;
	border:1px solid #929d80;
}
 
/*----- Section Titles -----*/
.accordion-section-title {
    width:100%;
    padding:15px;
    display:inline-block;
    border-bottom:1px solid #ffffff;
    background:#1b3c2e;
    transition:all linear 0.15s;
    color:#ffffff;
	font-family: "Roboto-black";
	text-align:center;
	text-decoration:none;
}
.accordion-section-title.active, .accordion-section-title:hover {
    background:#5f3329;
    /* Type */
    text-decoration:none;
}
 
.accordion-section:last-child .accordion-section-title {
    border-bottom:none;
}
 
/*----- Section Content -----*/
.accordion-section-content {
    padding:15px;
    display:none;
}
.accordion-section-content p {
	width:80%;
	text-align:center;
	margin: 0 auto;
	font-family: "Myriad-Pro";
}
#t-consumo {
	width:100%;
	height:auto;
	float:left;
	background-color:#c8d8b9;
}
.t-contenedor {
	width:79%;
	max-width: 1250px;
	margin: 0 auto;
	display: flex;
  	display: -webkit-flex;
  	flex-flow: row wrap;
  	-webkit-flex-flow: row wrap;
}
.t-titulo {
	width:100%;
}
.t-titulo h1 {
	color:#454d43;
	font-family: "Roboto-Black";
	text-align:center;
	margin-top:5%;
	padding-bottom:40px;
}
.t1, .t2 {
	width:50%;
}
.tabla3 {
	width:90%;
	height:18px;
	border:1px solid #727176;
	border-collapse:collapse;
	padding:1px;
	font-size:14px;
	color:#727176;
	font-family: "Myriad-Pro";
	text-align:center;
}
.tabla3 th {
	border:1px solid #727176;
	padding:1px;
}
.tabla3 td {
	border: 1px solid #727176;
	padding: 1px;
	padding-left:5px;
	width:50%;
}
.tabla4 {
	width:90%;
	height:18px;
	border:1px solid #727176;
	border-collapse:collapse;
	padding:1px;
	font-size:14px;
	color:#727176;
	font-family: "Myriad-Pro";
	text-align:center;
}
.tabla4 th {
	border:1px solid #727176;
	padding:1px;
}
.tabla4 td {
	border: 1px solid #727176;
	padding: 1px;
	padding-left:5px;
}
#t-right {
	text-align:right;
	padding-right:5px;
}

#contacto {
	width:100%;
	background-color:#FFFFFF;
	float:left;
}
#m-contacto {
	margin-top:-74px;
	position:absolute;
}
.c-contenedor2 {
	width:79%;
	max-width:1250px;
	text-align:center;
	margin: 0 auto;
}
.c-contenedor2 h1{
	font-family: "Roboto-Black";
	color:#548047;
	margin-top:50px;
}
.c-contenedor2 p{
	font-family: "Roboto";
	color:#273d1c;
	font-size:16pt;
}
.l-form {
	width:50%;
	float:left;
	font-family: "Roboto";
}
.r-form {
	width:50%;
	float:left;
	font-family: "Roboto";
}
#name {
    border: 1px solid #5d804c;
	width:80%;
	height:35px;
	background-color:#FFFFFF;
	padding-left:5px;
	margin-top:40px;
	font-size:16px;
}
#correo {
	border: 1px solid #5d804c;
	width:80%;
	height:35px;
	background-color:#FFFFFF;
	padding-left:5px;
	margin-top:40px;
	font-size:16px;
}
#ciudad {
	border: 1px solid #5d804c;
	width:80%;
	height:35px;
	background-color:#FFFFFF;
	padding-left:5px;
	margin-top:40px;
	font-size:16px;
}
#telefono {
	border: 1px solid #5d804c;
	width:80%;
	height:35px;
	background-color:#FFFFFF;
	padding-left:5px;
	margin-top:40px;
	font-size:16px;
}

#contacto textarea{
	border: 1px solid #5d804c;
	text-decoration:none;
	width:89%;
	height:123px;
	padding:10px;
	background-color:#FFFFFF;
	margin-top:40px;
	font-size:16px;
}

#contacto input[type=submit]
{
	font-family: "Roboto";
	-webkit-appearance: none;
	background-color:#548047;
	color:#FFFFFF;
	font-weight:bold;
	height:40px;
	width:20%;
	font-size:20px;
	border: 0px solid white;
	font-family:Calibri;
	margin-top:40px;
}
#contacto input[type=submit]:hover
{
	background-color:#FFFFFF;
	color:#273d1c;
	border: 1px solid #273d1c;
}
.mapa {
	width:100%;
	height:auto;
	float:left;
}
#mapa {
	width:100%;
	height:400px;
}

footer {
	width:100%;
	height:auto;
	float:left;
	background-color:#1b3c2e;
}
.fcontenedor {
	width:31%;
	max-width:490px;
	margin:0 auto;
	margin-top:5%;
	font-family: "century-gothic";
	display: flex;
  	display: -webkit-flex;
  	flex-flow: row wrap;
  	-webkit-flex-flow: row wrap;
}
.fizq {
	width:50%;
}
.fder {
	width:50%;
}
#logo_kalimet {
	width:100%;
	margin-top:-4%;
}
#logo_ekka {
	width:100%;
	margin-left:-9%;
}
#derechos {
	width:100%;
	padding-top:5%;
	padding-bottom:5%;
	color:#4d4d4d;
	font-size:16px;
	text-align:center;
}
.libro {
	width:100%;
	text-align:center;
	color:#000000;
	font-size:16px;
}

@media screen and (max-width: 1360px) {
	.flip-container, .front, .back {
		width:100%;
		height:300px;
	}
	
}

@media screen and (max-width: 1200px) {
	.cuadro {
		font-size:14px;
	}
	.p-contenedor {
		width:98%;
	}
	.r-contenedor {
		width:100%;
	}
	.respo2 h1 {
		padding-left:20px;
		padding-right:20px;
		margin-left:0%;
	}
	.respo2 p {
		padding-left:20px;
		padding-right:20px;
		margin-left:0%;
	}
}
@media screen and (max-width: 800px) {
	#menu {
		display:none;
	}
	.espacio1 {
		order: 1;
    	-webkit-order: 1;
	}
	.nosotros {
		width: 50%;
		order: 2;
    	-webkit-order: 2;
	}
	.vision {
		width: 50%;
		order: 3;
    	-webkit-order: 3;
	}
	.mision {
		width: 100%;
		order: 4;
    	-webkit-order: 4;
	}
	.espacio2 {
		order: 5;
    	-webkit-order: 5;
	}
	.respo2 h1 {
		margin-top:2%;
		font-size:18px;
	}
	.respo2 p {
		font-size:12px;
	}
	#img-respo1 {
		display:none;
	}
	#img-respo2 {
		display:block;
	}
	.respo1 {
		width:38%;
	}
	.respo2 {
		width:62%;
	}
	#reconocimiento {
		display:none;
	}
	#bnr1 {
		display:none;
	}
	#bnr2 {
		display:block;
	}
	.p-vermas {
		display:none;
	}
	.spirulina1, .spirulina2 {
		width: 46.5%;
	}
	.spirulina3 {
		width: 46.5%;
		margin: 0 auto;
	}
	.p-contenedor {
		height:auto;
	}
	#jbnr1 {
		display:none;
	}
	#jbnr2 {
		display:block;
	}
	
	.s-contenido1 {
		width: 100%;
		text-align: left;
	}
	.s-contenido1 h1 {
		color:#5D804C;
		font-family: "Roboto-Black";	
	}
	.s-contenido1 p {
		color:#575757;
		font-family: "Myriad-Pro";
		margin-top:15px;
		padding-right:0px;
		text-align:justify;
	}
	.s-contenido2 {
		width:50%;
		margin-top:5%;
	}
	.s-contenido3 {
		width:50%;
		margin-top:5%;
	}
	.b-contenedor {
		width:96%;
		max-width: 1250px;
		margin: 0 auto;
		display: flex;
		display: -webkit-flex;
		flex-flow: row wrap;
		-webkit-flex-flow: row wrap;
	}
	#ver-regula {
		width:60%;
		height: auto;
	}
	.modal__trigger {
	  margin-left:37%;
	  margin-top:-6%;
	}
	#consumo {
		background:url(../images/contraindicaciones.jpg) no-repeat center center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
	}
	#consumo h1{
		margin-top:4%;
		font-size:20px;
	}
	#consumo p{
		padding:15px;
		
	}
	#acordion-contenedor {
		width:96%;
		max-width: 1250px;
		margin: 0 auto;
	}
	.t-contenedor {
		width:96%;
		max-width: 1250px;
		margin: 0 auto;
	}
	.c-contenedor2 {
		width:96%;
		max-width:1250px;
	}
	.left {
		width:35%;
		float:left;
	}
	.center {
		width:65%;
		float:left;
		font-family: "Roboto";
	}
	.right {
		width:100%;
		float:left;
		text-align:center;
	}
	#l-grupo {
		margin-top:8%;
		float:none;
		margin-right:0;
		
	}
	#derechos {
		float:none;
		margin-right:0;
		color:#FFF;
		font-family: "Roboto";
		font-size:12px;
		margin-top:46%;
		text-align:center;
	}
	.pop-cabezera-1 {
		width:30%;
	}
	.pop-cabezera-2 {
		width:50%;
	}
	.pop-cabezera-3 {
		width:20%;
	}
	.pop-c1, .pop-c2, .pop-c3, .pop-c4, .pop-c5, .pop-c5, .pop-c6, .pop-c7, .pop-c8 {
		width:49.5%;
		border: 1px solid #B1B8A1;
	}
	.pop-c1 h4, .pop-c2 h4, .pop-c3 h4, .pop-c4 h4, .pop-c5 h4, .pop-c5 h4, .pop-c6 h4, .pop-c7 h4, .pop-c8 h4 {
		padding:8px;
	}
	.pop-c1 p, .pop-c2 p, .pop-c3 p, .pop-c4 p, .pop-c5 p, .pop-c5 p, .pop-c6 p, .pop-c7 p, .pop-c8 p {
		padding:8px;
	}
	.mision p {
		font-family: "Myriad-Pro";
		text-align:justify;
		padding:3%;
		color:#575757;
		font-size:16px;
	}
	#f-logo {
		margin-top:7%;
		margin-left:20%;
	}
	#video1 {
		display:none;
	}
}

@media screen and (max-width: 480px) {
	.left {
		width:100%;
		text-align:center;
	}
	.center {
		width:100%;
		text-align:center;
	}
	#f-lista {
		margin-top:2%;
	}
	.right {
		width:100%;
	}
	.pop-c1, .pop-c2, .pop-c3, .pop-c4, .pop-c5, .pop-c5, .pop-c6, .pop-c7, .pop-c8 {
		width:98%;
		border: 1px solid #B1B8A1;
	}
	#slider1_container {
		width: 480px; 
		height: 400px; 
	}
	#slides {
		width: 480px; 
		height: 360px; 
	}
	.nosotros {
		width: 100%;
		order: 2;
    	-webkit-order: 2;
	}
	.vision {
		width: 100%;
		order: 3;
    	-webkit-order: 3;
	}
	.mision {
		width: 100%;
		order: 4;
    	-webkit-order: 4;
	}
	.respo1 {
		display:none;
	}
	.respo2 {
		width:100%;
	}
	.spirulina1, .spirulina2, .spirulina3 {
		width: 85%;
		margin: 0 auto;
	}
	#btn-comunicate {
		width:200px;
		font-size:16px;
		margin-top:10%;
	}
	.s-contenido1 h1 {
		font-size:20px;
	}
	.espacio {
		height:50px;
	}
	.s-contenido2 {
		width:100%;
		margin-top:10%;	
	}
	.s-contenido3 {
		width:100%;
		margin-top:10%;
	}
	.tabla1 {
		width:100%;
	}
	.tabla2 {
		width:100%;
	}
	.c1, .c2, .c3, .c4 {
	  width: 100%;
	}
	#mejora, #reduce, #incrmenta, #regula {
		display:none;
	}
	#mejora-m, #reduce-m, #incrmenta-m, #regula-m {
		display:block;
	}
	.b-contenedor {
		width:80%;
	}
	.modal__trigger {
	  margin-left:57%;
	  margin-top:-14%;
	}
	.t1, .t2 {
		width:100%;
	}
	.tabla3 {
		width:100%;
	}
	.tabla4 {
		width:100%;
		margin-top:5%;
	}
	.l-form {
		width:100%;
	}
	.r-form {
		width:100%;
	}
	#f-logo {
		margin-left:1%;
	}
	#contacto input[type=submit]
	{
		width:30%;
		font-size:16px;
		margin-top:30px;
	}
	.nosotros h1, .mision h1, .vision h1 {
		font-size:18px;
	}
	.espacio1 {
		height:20px;
	}
	.espacio2 {
		height:40px;
	}
	.nosotros, .mision, .vision {
		margin-top:5%;
	}
	.pop-cabezera-1 {
		width:65%;
	}
	.pop-cabezera-2 {
		width:25%;
	}
	.pop-cabezera-3 {
		width:10%;
	}
	.pop-cabezera-1 h1 {
		padding-top:20px;
		margin-top:12px;
		float:right;
		font-size:20px;
	}
	.pop-c1 h4, .pop-c2 h4, .pop-c3 h4, .pop-c4 h4, .pop-c5 h4, .pop-c5 h4, .pop-c6 h4, .pop-c7 h4, .pop-c8 h4 {
		padding:8px;
		font-size:12px;
	}
	.pop-c1 p, .pop-c2 p, .pop-c3 p, .pop-c4 p, .pop-c5 p, .pop-c5 p, .pop-c6 p, .pop-c7 p, .pop-c8 p {
		display:none
	}
	.nosotros p, .mision p, .vision p {
		padding:5%;
	}
	.pop-cabezera, .pop-cabezera2, .pop-cabezera3, .pop-cabezera4 {
		height:70px;
	}
}