/*FUENTES*/

/*NATURA SANS*/

/* This stylesheet generated by Transfonter (https://transfonter.org) on March 4, 2017 6:59 PM */

@font-face {
	font-family: 'NaturaSansWeb';
	src: url('../fuente/naturasans/NaturaSansWeb-Light.eot');
	src: url('../fuente/naturasans/NaturaSansWeb-Light.eot?#iefix') format('embedded-opentype'),
		url('../fuente/naturasans/NaturaSansWeb-Light.woff') format('woff'),
		url('../fuente/naturasans/NaturaSansWeb-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'NaturaSansWeb';
	src: url('../fuente/naturasans/NaturaSansWeb-Bold.eot');
	src: url('../fuente/naturasans/NaturaSansWeb-Bold.eot?#iefix') format('embedded-opentype'),
		url('../fuente/naturasans/NaturaSansWeb-Bold.woff') format('woff'),
		url('../fuente/naturasans/NaturaSansWeb-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'NaturaSansWeb';
	src: url('../fuente/naturasans/NaturaSansWeb-Regular.eot');
	src: url('../fuente/naturasans/NaturaSansWeb-Regular.eot?#iefix') format('embedded-opentype'),
		url('../fuente/naturasans/NaturaSansWeb-Regular.woff') format('woff'),
		url('../fuente/naturasans/NaturaSansWeb-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'NaturaSansWeb';
	src: url('../fuente/naturasans/NaturaSansWeb-Regular_1.eot');
	src: url('../fuente/naturasans/NaturaSansWeb-Regular_1.eot?#iefix') format('embedded-opentype'),
		url('../fuente/naturasans/NaturaSansWeb-Regular_1.woff') format('woff'),
		url('../fuente/naturasans/NaturaSansWeb-Regular_1.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'NaturaSansWeb';
	src: url('../fuente/naturasans/NaturaSansWeb-Bold_1.eot');
	src: url('../fuente/naturasans/NaturaSansWeb-Bold_1.eot?#iefix') format('embedded-opentype'),
		url('../fuente/naturasans/NaturaSansWeb-Bold_1.woff') format('woff'),
		url('../fuente/naturasans/NaturaSansWeb-Bold_1.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'NaturaSansWeb';
	src: url('../fuente/naturasans/NaturaSansWeb-Light_1.eot');
	src: url('../fuente/naturasans/NaturaSansWeb-Light_1.eot?#iefix') format('embedded-opentype'),
		url('../fuente/naturasans/NaturaSansWeb-Light_1.woff') format('woff'),
		url('../fuente/naturasans/NaturaSansWeb-Light_1.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'NaturaSansWeb';
	src: url('NaturaSansWeb-Regular_2.eot');
	src: url('NaturaSansWeb-Regular_2.eot?#iefix') format('embedded-opentype'),
		url('NaturaSansWeb-Regular_2.woff') format('woff'),
		url('NaturaSansWeb-Regular_2.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'NaturaSansWeb';
	src: url('../fuente/naturasans/NaturaSansWeb-Bold_2.eot');
	src: url('../fuente/naturasans/NaturaSansWeb-Bold_2.eot?#iefix') format('embedded-opentype'),
		url('../fuente/naturasans/NaturaSansWeb-Bold_2.woff') format('woff'),
		url('../fuente/naturasans/NaturaSansWeb-Bold_2.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'NaturaSansWeb';
	src: url('../fuente/naturasans/NaturaSansWeb-Light_2.eot');
	src: url('../fuente/naturasans/NaturaSansWeb-Light_2.eot?#iefix') format('embedded-opentype'),
		url('../fuente/naturasans/NaturaSansWeb-Light_2.woff') format('woff'),
		url('../fuente/naturasans/NaturaSansWeb-Light_2.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

/*NATURA SCRIPT*/

/* This stylesheet generated by Transfonter (https://transfonter.org) on March 4, 2017 7:32 PM */

@font-face {
	font-family: 'Natura Script';
	src: url('../fuente/naturascript/NaturaScript.eot');
	src: url('../fuente/naturascript/NaturaScript.eot?#iefix') format('embedded-opentype'),
		url('../fuente/naturascript/NaturaScript.woff') format('woff'),
		url('../fuente/naturascript/NaturaScript.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/*FIN DE FUENTE*/

html {
	height: 100%;
	font-size: 100%;
}

body 
{
	background-image: url(../img/bg.jpg);
	background-size: 100% auto;
	background-repeat: repeat-y;
	min-height: 100%;
	-webkit-font-smoothing: antialiased;
	font-weight:300;
	letter-spacing:-1px;
	font-weight:bold;
	color: #fff;
	font-family: 'NaturaSansWeb' ,Arial !important;
}

#bg1
{
	background-image:url(../img/bg1.png);
	background-repeat: no-repeat;
	background-size: 140px auto;
	background-position: left top;
	
}

#bg2
{
	background-image:url(../img/bg2.png);
	background-repeat: no-repeat;
	background-size: 140px auto;
	background-position: right top;
	
}

#bg3
{
	background-image: url(../img/bg3.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center bottom;
	text-align: center;
	padding-top: 50px;
	padding-bottom: 690px;
}

h1
{
	margin: auto !important;
	background-image:url(../img/title.png);
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position: center top;
	width: 300px;
	height: 150px;
	
}
h2
{
	line-height: 120% !important;
	color: #FFF !important;
	font-size: 28px !important;
}


.copete 
{
	text-align: center;
}
.copete p
{
	max-width: 600px;
	line-height: 120%;
	color: #FFF;
	font-size: 18px;
	font-weight: normal;
	margin: 20px auto 40px auto;
}


.copete .frase{
	font-style:italic;
	background-color: rgba(0, 0, 0, 0.3);
	margin: 0px auto;
	padding: 20px 25px;
}

.row
{
	text-align: center;
	
}

h1 span
{
	display: none;
}
.clear
{
	clear: both;	
}

.material{
border-top: 3px dashed #fff;
padding: 40px 0;
margin: 0 0 20px;
overflow: hidden;
width: 100%;
height: 470px;
}


/* cuaderno */


.cuaderno a
{
	display: block;
}

.cuaderno a img
{
	width: 100%;
	 -webkit-transition: all .5s; /* Safari */
    transition: all .5s;
	height: auto;
	max-width: 280px;
}
.cuaderno a:hover img
{
	 transform: rotate(2deg);
}

/* storytelling */



.story #story 
{
	position: absolute;
	top: 0; 
	left: 20px;
	margin: auto;
	display: block;
	width: 70%;
}


.story  #story img
{
	  
	-webkit-transition: all .5s; /* Safari */
    transition: all .5s;
	width: 100%;
	height: auto;
	max-width: 280px;
}
.story  #story:hover 
{
	 
	z-index: 300;
}
.story  #story:hover img
{
	  
	transform: rotate(-5deg);
	
}


.story #storypostit 
{
	position: absolute;
	top: 0; 
	left: 0px;
	width: 50%;

}
.story #storypostit  img
{
	max-width: 200px;
	width: 100%;

}
/* libros */

.libros a
{
	display: block;
	width: 70%
	
}

.libros  a img
{
	  
	-webkit-transition: all .5s; /* Safari */
    transition: all .5s;
}


.libros #libro1 
{
	position: absolute;
	top: 70px; 
	left: 0;

}

.libros #libropostit 
{
	position: absolute;
	top: 0; 
	left: 50px;
	

}
.libros #libro2 
{
	position: absolute;
	top: 0; 
	right: 0;

}

.libros #libropostit 
{
	width: 50%;
}

.libros #libropostit img
{
	width: 100%;
	height: auto;
	max-width: 200px;
}
.libros #libro1 img
{
	width: 100%;
	height: auto;
		transform: rotate(15deg);
	max-width: 200px;
}
.libros #libro2 img
{
	width: 100%;
	height: auto;
	transform: rotate(-20deg);
max-width: 200px;
}

.libros #libro1:hover
{
	z-index: 300;
}
.libros #libro2:hover
{
	z-index: 300;
}
.libros #libro1:hover img
{
			transform: rotate(19deg);

}
.libros #libro2:hover img
{
	transform: rotate(-23deg);
}

.acciones{
overflow:hidden;

}

.acciones .form-control{
	width:45%;
	float:left;
	margin:0 2%;
}

.acciones textarea.form-control{
	width: 94%;
	resize:none;

}

.acciones label{
	margin: 20px 2% 10px;
}

/* Encuentro */
.atributos #encuentro 
{
	position: absolute;
	top: 100px; 
	left: 100px;
	margin: auto;
	display: block;
	width: 70%;
}


.atributos  #encuentro img
{
	  
	-webkit-transition: all .5s; /* Safari */
    transition: all .5s;
	width: 100%;
	height: auto;
	max-width: 280px;
}
.atributos  #encuentro:hover 
{
	 
	z-index: 300;
}
.atributos  #encuentro:hover img
{
	  
	transform: rotate(-5deg);
	
}


.atributos #encuentropostit 
{
	position: absolute;
	top: 90px;
	left: 230px;
	width: 50%;

}
.atributos #encuentropostit  img
{
	max-width: 200px;
	width: 100%;
}

/* Atributos */
.atributos #atributos 
{
	position: absolute;
	top: 0; 
	left: 20px;
	margin: auto;
	display: block;
	width: 70%;
}


.atributos  #atributos img
{
	  
	-webkit-transition: all .5s; /* Safari */
    transition: all .5s;
	width: 100%;
	height: auto;
	max-width: 280px;
}
.atributos  #atributos:hover 
{
	 
	z-index: 300;
}
.atributos  #atributos:hover img
{
	  
	transform: rotate(-5deg);
	
}


.atributos #atributospostit 
{
	position: absolute;
	top: 0; 
	left: 0px;
	width: 50%;

}
.atributos #atributospostit  img
{
	max-width: 200px;
	width: 100%;
}
/* claves */
.atributos #claves 
{
	position: absolute;
	top: 70px;
	left: 60px;
	margin: auto;
	display: block;
	width: 65%;
}


.atributos  #claves img
{
	  
	-webkit-transition: all .5s; /* Safari */
    transition: all .5s;
	width: 100%;
	height: auto;
	max-width: 280px;
}
.atributos  #claves:hover 
{
	 
	z-index: 300;
}
.atributos  #claves:hover img
{
	  
	transform: rotate(-5deg);
	
}


.atributos #clavespostit 
{
position: absolute;
top: 26px;
left: 20px;
width: 50%;
}
.atributos #clavespostit  img
{
	max-width: 200px;
	width: 100%;
}



/* libros */

.tarjeton a
{
	display: block;
	width: 60%;
	
}

.tarjeton  a img
{
	  
	-webkit-transition: all .5s; /* Safari */
    transition: all .5s;
}


.tarjeton #tarjeton1 
{
	position: absolute;
	top: 70px; 
	left: 0;

}

.tarjeton #tarjetonpostit 
{
	position: absolute;
	top: 0; 
	left: 50px;
	

}

.tarjeton #tarjeton2 
{
	position: absolute;
	top: 0; 
	right: 0;

}

.tarjeton #libropostit 
{
	width: 50%;
}

.tarjeton #tarjetonpostit  img
{
	height: auto;
	max-width: 200px;
	width: 100%;
}

.tarjeton #tarjeton1 img
{
	width: 100%;
	height: auto;
		transform: rotate(15deg);
	max-width: 250px;
}
.tarjeton #tarjeton2 img
{
	width: 100%;
	height: auto;
	transform: rotate(-20deg);
max-width: 200px;
}

.tarjeton #tarjeton1:hover
{
	z-index: 300;
}
.tarjeton #tarjeton2:hover
{
	z-index: 300;
}
.tarjeton #tarjeton1:hover img
{
			transform: rotate(19deg);

}
.tarjeton #tarjeton2:hover img
{
	transform: rotate(-23deg);
}


.yocomomarca{
	border-top: 3px dashed #fff;
	padding: 40px 0;
}

/*HERRAMIENTAS DE CONTACTO*/

.herra_contacto{
	padding: 40px 0;
overflow: hidden;
width: 100%;
height: 400px;
border-top: 3px dashed #fff;
}


/*Fomentar*/
.fomentar #fomentar 
{
	position: absolute;
	top: 0; 
	left: 20px;
	margin: auto;
	display: block;
	width: 70%;
}


.fomentar  #fomentar img
{
	  
	-webkit-transition: all .5s; /* Safari */
    transition: all .5s;
	width: 100%;
	height: auto;
	max-width: 280px;
}
.fomentar  #fomentar:hover 
{
	 
	z-index: 300;
}
.fomentar  #fomentar:hover img
{
	  
	transform: rotate(-5deg);
	
}


.fomentar #fomentarpostit 
{
	position: absolute;
	top: 0; 
	left: 0px;
	width: 50%;

}
.fomentar #fomentarpostit  img
{
	max-width: 200px;
	width: 100%;

}

/*Empatia*/

.empatia a
{
	display: block;
	width: 100%;
	
}

.empatia  a img
{	  
	-webkit-transition: all .5s; /* Safari */
    transition: all .5s;
	width: 100%;
	height: auto;
	max-width: 388px;
}


.empatia #empatia
{
	position: absolute;
	top: 0px; 
	left: 0;

}

.empatia #empatiapostit 
{
	position: absolute;
	top: 0; 
	left: 50px;
}

.empatia #empatiapostit  img
{
	max-width: 200px;
	width: 100%;

}

.empatia #empatia:hover
{
	z-index: 300;
}

.empatia #empatia:hover img
{
			transform: rotate(19deg);

}

/*HERRAMIENTAS DE CONTACTO*/

.herra_gestion{
	padding: 70px 0;

}


/*buenas Decisiones*/

.buenas_dec a
{
	display: block;
	width: 100%;
	
}

.buenas_dec  a img
{	  
	-webkit-transition: all .5s; /* Safari */
    transition: all .5s;
	width: 100%;
	height: auto;
	max-width: 280px;
}


.buenas_dec #buenas_dec
{
	position: absolute;
	top: 30px; 
	left: 0;

}

.buenas_dec #buenas_decpostit 
{
	position: absolute;
	top: 0; 
	left: 50px;
}

.buenas_dec #buenas_decpostit  img
{
	max-width: 200px;
	width: 100%;

}

.buenas_dec #buenas_dec:hover
{
	z-index: 300;
}

.buenas_dec #buenas_dec:hover img
{
			transform: rotate(19deg);

}



@media only screen and (max-width: 1200px) {
	.atributos #encuentropostit {
		left: 185px;
	}

}
@media only screen and (max-width: 990px) {
	.atributos #encuentro {
		left: 40px;
	}
	.atributos #encuentropostit {
		left: 140px;
	}
	.buenas_dec #buenas_decpostit img {
		max-width: 150px;
	}
	
	.buenas_dec a img {	
		max-width: 200px;
	}
	
	.tarjeton #tarjetonpostit img {
		max-width: 140px;
	}
	.material {
		height: 380px;
	}
}


@media only screen and (max-width: 768px) {
#bg1
{
	background-position: left center;
	
}

#bg2
{
	background-position: right center;
	
}
	
	#bg3
{
	background-size: 200% auto;	
	}
	
	.material {
		height: 1200px;
	}
	
	.tarjeton{
		margin: 50px 0 0;
	}
	
	.story,.libros,.cuaderno, .atributos, .fomentar, .empatia, .buenas_dec
	{
		height: 400px;
	}
	.tarjeton{
		height: 300px;
	}
	.story #story, .fomentar #fomentar
	{
		position: relative;
	}
	.story #storypostit, .fomentar #fomentarpostit
	{
		left: 30px;
	}
	.libros #libro1
	{
		left: 60px;
	}
	.atributos #encuentro {
		left: 90px;
	}
	.atributos #encuentropostit {
		left: 260px;
	}
	.cuaderno{
		margin: 30px 0 0;
	}
	.tarjeton #tarjetonpostit img {
		max-width: 200px;
	}	
	.tarjeton a {
		width: 80%;
	}
	/*.tarjeton #tarjeton1 img {

		max-width: 220px;
	}
	*/
	.tarjeton #tarjeton2 img {
		max-width: 220px;
	}
	.empatia #empatia img {

		max-width: 420px;
	}
	
	.tarjeton #tarjetonpostit {
		left: 250px;
	}

	.buenas_dec #buenas_decpostit img {
		max-width: 200px;
	}
	.buenas_dec  a img
	{	  
		max-width: 280px;
	}
	.buenas_dec #buenas_decpostit {
		left: 200px;	
	}
}
@media only screen and (max-width: 570px) {
	h2{
		font-size: 25px !important;
	}	
	.tarjeton #tarjetonpostit {
		left: 150px;
	}
}
@media only screen and (max-width: 490px) {
	#bg3{
		padding-bottom: 200px;	
	}
	.atributos #atributospostit img {
		max-width: 150px;
	}
	.atributos #encuentropostit {
		left: 220px;
	}

	.atributos #encuentropostit img {
		max-width: 150px;
	}


}

@media only screen and (max-width: 400px) {
	#bg3{
		padding-bottom: 140px;	
	}
	
	.tarjeton #tarjetonpostit {
		left: 90px;
	}
	.atributos #encuentropostit {
		left: 170px;
	}
	.atributos #encuentropostit img {
		max-width: 125px;
	}

}