/*---------------------------------------------------------*/
/*  COMMON STYLES                                          */
/*---------------------------------------------------------*/
body {
	position: relative;
	padding: 0;
	margin: 0;
	min-height: 100vh;
	color: #000000;
	overflow-x: hidden;
	font-size: 100%;
	background-color: #ffffff;
	font-family: 'CenturyGothic-Bold';
}

a, a:hover, a:link, a:visited, a:active {text-decoration: none; outline: none;}
li {list-style: none;}

h1, h2, h3, h4, h5, h6 {font-weight: normal; margin: 0;}
p{margin: 0;}

/*---------------------------------------------------------*/
/*  STYLES FOR LANDSCAPE                                   */
/*---------------------------------------------------------*/
.landscape {display: none;}
.landscape {width: 100%; height: 100vh; top: 0; left: 0; position: fixed; z-index: 9999999; background-color: #333;}
.mobileAnim {width: 220px; height: 94px; position: absolute; left: 50%; top: 50%; margin-left: -110px; margin-top: -47px;}
.gif {width: 60px; height: 60px; margin: auto;}
.gif img {width: 100%;}
.mobileAnim p {text-align: center; margin-top: 10px; color: #FFF;}

/*---------------------------------------------------------*/
/*  STYLES FOR DESKTOP VERSION (ALIGN CONTENT CENTER)      */
/*---------------------------------------------------------*/
.desktopBg {
	width: 360px !important;
	height: 640px !important;
	position: absolute  !important;
	top: 50% !important;
	margin-top: -320px !important;
	left: 50% !important;
	margin-left: -180px !important;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.7);
}

/*---------------------------------------------------------*/
/*  GERAL                                                  */
/*---------------------------------------------------------*/
.content {
	width: 100%;
	max-width: 415px;
	height: 100vh;
	max-height: 736px;
	position: relative;
	margin: auto;
	display: block;
	overflow: hidden;
	background-color: #000000;
}

.light{ font-family: 'CenturyGothic';}

.loading{
	width: 1px;
	height: 1px;
	position: absolute;
	z-index: 0;
	opacity: 0;
}

.loading img{
	width: 1px;
}

.intro{
	position: absolute;
	z-index: 3;
	width: 100%;
	height: 100%;
	overflow: hidden;
	top: 0px;
	left: 0px;
}

.background1{
	opacity: 1;
	position: absolute;
	z-index: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	top: 0px;
	left: 0px;
	background: url("../images/slide1.jpg"), #F0F0F0;
	background: url("../images/slide1.jpg"), -webkit-linear-gradient(left, #E6E6E6 , #F0F0F0);
	background: url("../images/slide1.jpg"), -o-linear-gradient(right, #E6E6E6 , #F0F0F0);
	background: url("../images/slide1.jpg") ,-moz-linear-gradient(right, #E6E6E6 , #F0F0F0)
	background: url("../images/slide1.jpg"), linear-gradient(to right, #E6E6E6 , #F0F0F0);
  background-position: top center, bottom center;
  background-repeat: no-repeat, no-repeat;
	background-size: contain, cover;
}

.background2{
	opacity: 0;
	position: absolute;
	z-index: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	top: 0px;
	left: 0px;
	background: url("../images/slide2.jpg"), #F5F5F5;
	background: url("../images/slide2.jpg"), -webkit-linear-gradient(left, #ECECEA , #F5F5F5);
	background: url("../images/slide2.jpg"), -o-linear-gradient(right, #ECECEA , #F5F5F5);
	background: url("../images/slide2.jpg") ,-moz-linear-gradient(right, #ECECEA , #F5F5F5)
	background: url("../images/slide2.jpg"), linear-gradient(to right, #ECECEA , #F5F5F5);
  background-position: top center, bottom center;
  background-repeat: no-repeat, no-repeat;
	background-size: contain, cover;
}

.background3{
	opacity: 0;
	position: absolute;
	z-index: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	top: 0px;
	left: 0px;
	background: url("../images/slide3.jpg"), #F4F4F2;
	background: url("../images/slide3.jpg"), -webkit-linear-gradient(left, #EBEBEB , #F4F4F2);
	background: url("../images/slide3.jpg"), -o-linear-gradient(right, #EBEBEB , #F4F4F2);
	background: url("../images/slide3.jpg") ,-moz-linear-gradient(right, #EBEBEB , #F4F4F2)
	background: url("../images/slide3.jpg"), linear-gradient(to right, #EBEBEB , #F4F4F2);
  background-position: top center, bottom center;
  background-repeat: no-repeat, no-repeat;
	background-size: contain, cover;
}

.intro .header{
	position: absolute;
	z-index: 1;
	width: 200px;
	top: 10px;
	left: 10px;
	font-size: 32px;
	letter-spacing: 2px;
	line-height: 38px;
	color: #FFF;
	text-transform: uppercase;
}

.intro .footer{
	position: absolute;
	z-index: 1;
	right: 10px;
	bottom: 70px;
}

.intro .footer p{
	float: left;
	margin-top: 178px;
	font-size: 34px;
	line-height: 36px;
	text-align: right;
	color: #5a8139;
	text-transform: uppercase;
	/*text-shadow: 2px -1px 2px white;*/
}

/*.depende{ color: #428331;}
.de{ color: #088B38;}
.ti{ color: #173F22;}*/

.depende{ color: #5a8139;}
.de{ color: #6eaa40;}
.ti{ color: #4d893f;}

.intro .footer img{
	float: right;
	height: 280px;
}

.btn-intro{
	position: absolute;
	z-index: 2;
	width: 280px;
	height: 45px;
	left: 50%;
	bottom: 45px;
	margin-left: -140px;
	background: #AD2D30;
	font-size: 16px;
	color: #FFF;
	text-transform: uppercase;
	text-align: center;
}

.btn-intro p{
	position: relative;
	top: 50%;
	margin-top: -8px;
}

.motion{
	display: none;
	position: absolute;
	z-index: 2;
	width: 100%;
	height: 100%;
	overflow: hidden;
	top: 0px;
	left: 0px;
	background: url("../images/anim/1.jpg") center center no-repeat;
	background-size: initial;
}

.motion .dropzone{
    width: 80%;
    height: 250px;
    position: absolute;
    top: 100px;
    left: 10%;
    z-index: 100000;
    display: none;
}

.title_motion{
	width: 90%;
	margin: 0px auto;
	padding-top: 20px;
  font-size: 16px;
	letter-spacing: 2px;
	line-height: 27px;
  color: #5a8139;
  text-transform: uppercase;
  text-align: center;
}

.title_motion span{
  font-size: 32px;
}

.title_motion_final{
	display: none;
	width: 90%;
	margin: 0px auto;
	padding-top: 10px;
	font-size: 21px;
	letter-spacing: 2px;
	line-height: 24px;
  color: #5a8139;
  text-align: center;
}

.title_motion_final span{
  font-size: 32px;
	line-height: 40px;
	text-transform: uppercase;
}

.motion .footer{
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 125px;
	bottom: 0px;
	background: url("../images/footer.png") top center no-repeat;
	background-size: cover;
}

.menuIngredientes{
	position: absolute;
	width: 270px;
	left: 50%;
	bottom: 30px;
	margin-left: -135px;
}

.ingrediente{
	float: left;
	width: 70px;
	height: 70px;
	background: url("../images/circle-off.png") center center no-repeat;
	background-size: cover;
	margin: 0px 10px;
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
}

.ingrediente img{
	position: relative;
	width: 45px;
	left: 50%;
	margin-left: -23px;
	padding: 12px 0px;
}

.menuHome{
	display: none;
	position: absolute;
	width: 100%;
	height: 45px;
	bottom: 34px;
}

.btn{
	position: absolute;
	width: 150px;
	height: 45px;
	background: #AD2D30;
}

.btnVideo{ left: 0px;}
.btnSaberMas{ right: 0px;}

.btn p{
	position: relative;
	top: 50%;
  margin-top: -8px;
	margin-left: 10px;
  margin-right: 7px;
	float: left;
	font-size: 16px;
	color: #FFF;
	text-transform: uppercase;
}

.btn img{
	position: relative;
	float: left;
	width: 30px;
	top: 50%;
	margin-top: -15px;
}

.btnVideo img{ margin-top: -12px;}

.logo{
	position: relative;
	width: 280px;
	top: 20px;
	left: 50%;
	margin-left: -140px;
}

.video{
	opacity: 0;
	position: absolute;
	z-index: 0;
	width: 100%;
	height: 100%;
	background-image: url("../images/backgroundVideo2.png");
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: cover;
}

.btnVolver{
	position: absolute;
	z-index: 2;
	width: 200px;
	height: 50px;
	top: 20px;
}

.btnVolver p{
	font-size: 16px;
	color: #FFF;
	margin-left: 20px;
}

.btnVolver hr{
	width: 80px;
	background: #FFF;
	margin-top: 5px;
}

.slide{
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}

.slick-dots {
  bottom: 25px !important;
}

video{ width: 100%; height: 100vh;}

.product{
	position: absolute;
	width: 110%;
	bottom: 0px;
	right: 0px;
}

.bottle-video{
	position: absolute;
	z-index: 2;
	width: 80px;
	right: 10px;
	bottom: 0px;
}


.info{
	position: absolute;
	z-index: 20;
	width: 90%;
	left: 50%;
	bottom: 5px;
	margin-left: -45%;
	font-size: 9px;
	color: #000;
	text-align: center;
}

/*---------------------------------------------------------*/
/*  MEDIA QUERIES                                          */
/*---------------------------------------------------------*/
/*----------- DESKTOP --------------------*/
@media screen and (min-width: 421px) {
	.title_motion { padding-top: 15px; font-size: 18px; line-height: 38px;}
	.title_motion span { font-size: 38px;}
	.motion .footer { height: 150px;}
	.menuIngredientes { zoom: 110%; bottom: 30px;}
	.title_motion_final{ font-size: 24px; line-height: 30px;}
	.title_motion_final span{ font-size: 42px;}
	.menuHome { zoom: 115%; bottom: 32px;}
	video { width: 100%; height: 100%; margin-top: 28%;}
}

/*----------- Iphone 6 Plus --------------------*/
@media screen and (min-width: 321px) and (max-width: 420px) and (min-height: 671px) and (max-height: 740px){
	.title_motion { padding-top: 30px; font-size: 18px; line-height: 38px;}
	.title_motion span { font-size: 38px;}
	.title_motion_final{ font-size: 26px; line-height: 32px;}
	.motion .footer { height: 150px;}
	.menuIngredientes { zoom: 110%; bottom: 30px;}
	.title_motion_final{ font-size: 24px; line-height: 32px; margin-top: 15px;}
	.title_motion_final span{ font-size: 42px;}
	.menuHome { zoom: 115%; bottom: 32px;}
}

/*----------- Iphone 6 --------------------*/
@media screen and (min-width: 321px) and (max-width: 420px) and (min-height: 625px) and (max-height: 670px){
	.title_motion { padding-top: 25px; font-size: 18px; line-height: 38px;}
	.title_motion span { font-size: 38px;}
	.motion .footer { height: 150px;}
	.menuIngredientes { zoom: 110%; bottom: 30px;}
	.title_motion_final{ font-size: 16px; line-height: 30px; margin-top: 15px;}
	.title_motion_final span{ font-size: 42px;}
	.menuHome { zoom: 115%; bottom: 32px;}
}

@media screen and (min-width: 321px) and (max-width: 420px) and (min-height: 461px) and (max-height: 624px){
	.title_motion_final{ font-size: 21px; line-height: 25px;}
	.menuHome { zoom: 107%; bottom: 30px;}
}



/*---------------- outros devices --------------------*/
@media screen and (max-height: 550px){
	.motion { background-size: cover;}
	.background1, .background2, .background3{ background-position: 0px -50px, bottom center; background-size: 100%, cover;}
}

@media screen and (max-height: 500px){
	.video{ background-image: url("../images/backgroundVideo2.png");}
}

@media screen and (max-height: 460px){
	.logo { width: 200px; margin-left: -100px;}
	.background1, .background2, .background3{ background-size: cover, cover;}
	.intro .footer p, .depende, .de, .ti{ color: #FFF; text-shadow: 2px -1px 2px transparent;}
}

@media screen and (max-height: 430px) {
	.footer { zoom: 80%;}
	.menuHome { bottom: 30px; zoom: 120%;}
	.product{ display: none;}
	.intro .footer { bottom: 100px;}
}

/*----------- Iphone 4 browser --------------------*/
@media screen and (max-height: 400px) {
	.content{ height: 400px; overflow-y: scroll;}
	.info { bottom: 2px; font-size: 7px;}
	.intro .footer { bottom: 230px;}
	.footer { height: 145px;}
	.menuIngredientes { bottom: 25px;}
	.slick-dotted.slick-slider { margin-bottom: 0px !important;}
	.menuHome { bottom: 28px;}
}