/* ================================================
   FONT FACE
   ============================================== */

@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light+Two&display=swap');
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i');

/* =================================================
   GENERAL
   ============================================== */
	body {
		background-color:#FFF;
		margin: 0px;
		padding: 0px;
		font-family: 'Shadows Into Light Two', cursive;
		font-size: 18px;
		font-weight: 300;
		line-height:28px;
		color:#000;
		height:100%;
		}
	html { -webkit-text-size-adjust: 100%; }
	img { border: 0px; }
	strong { font-weight: bold; }
	a {	text-decoration: none; color:#000; }
	p { padding:0; margin: 0}


/* =================================================
   TOP
   ===============================================*/
	#encabezado_home {
		width: 100%;
		position:fixed;
		z-index:10;
		background-color: #D8D158;
		}
	#encabezado_home .logo_home {
		float:left;
		padding:30px 0px 0px 0px;
		width:90%;
		text-align:center;
		}
	#encabezado {
		width: 100%;
		position:fixed;
		z-index:10;
		background-image:url(../img/back_top.png);
		background-repeat: no-repeat;
		background-position: left bottom;
		}
	#encabezado .logo {
		float:right;
		padding:15px 60px 25px 0px;
		}
	#menucito {
		position:fixed;
		right:0px;
		padding:25px 25px 0px 0px;
		}

/* ===============================================
   FOOT
   ============================================= */
	#foot {
		width: 100%;
		float:left;
		font-family: 'Roboto Condensed', sans-serif;
		font-size:11px;
		line-height:normal;
		text-align:center;
		}
	#foot .main {
		width:100%;
		padding: 20px 0px;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		justify-content: center;
		align-items: center;
		}
	#foot .main .redes {
		padding:10px;
		display:table-cell;
		vertical-align:middle;
		}

/* =============================================
   SECCIONES
   =========================================== */
.main {
	width:85%;
	padding-top:0px;
	margin:0 auto;
	overflow:auto;
	}
h1, h2, h3 {
	line-height:normal;
	font-weight: bold;
	color:#A69F39;
	margin:0;
	}
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 20px; }

#vacia { position:relative; left:0px; top:0px; z-index:1; }

.grafismo_back {
	background-position: right 50px;
	background-image: url(../img/back_grafismo.gif);
	background-attachment: fixed !important;
	background-repeat: no-repeat;
	}


/* =============================================
   CONTENIDOS
   =========================================== */
/* Home -------------------------------*/
#inicio {
	width:100%;
	height:100%;
	padding-top:120px;
	-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
	}
#inicio #recuadro {
	width:85%;
	min-height:300px;
	background-image: url(../img/back_home.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size:95% auto;
	padding:15px;
	text-align:center;
	margin:0 auto;
	-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
    }
#inicio #recuadro img {
	width:90%;
	height:auto;
	margin:0 auto;
    }

/* Tabare -------------------------------*/
#tabare {
	width:100%;
	padding:100px 0px 30px 0px;
	}
#tabare .main img {
	width:80%;
	height:auto;
	padding:10px 0px 20px 0px;
	}

/* Personajes -------------------------------*/
#personajes {
	width:100%;
	padding:90px 0px 30px 0px;
	background-image:url(../img/back_personajes.png);
	background-attachment: fixed !important;
	background-repeat: repeat-x;
	}
#personajes .main img {
	width:100%;
	height:auto;
	padding:10px 0px 20px 0px;
	}
#personajes .main .img2 {
	display:block;
	width:80%;
	height:auto;
	padding:10px 0px 20px 0px;
	margin:0 auto;
	}
#personajes .main .titulo {
	color:#A69F39;
	}
#personajes .main .destacado,
#historietas .main .destacado,
#animaciones .main .destacado {
	color:#F15A24;
	}

/* Historietas -------------------------------*/
#historietas {
	width:100%;
	padding:100px 0px 30px 0px;
	background-image:url(../img/back_historietas.png);
	background-attachment: fixed !important;
	background-repeat: repeat-x;
	}
#historietas .encabezado {
	width:100%;
	padding:15px 20px;
	-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
	text-align:right;
	background-image:url(../img/back_historietas-recuadro.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size:100% auto;
	}
#historietas .main h1,
#historietas .main h3,
#historietas .main .titulo {
	color:#603813;
	}
#historietas #personaje {
	position:absolute;
	top:80px;
	left:0px;
	}
#historietas #personaje2 {
	position:absolute;
	top:30px;
	left:0px;
	}
#historietas #personaje3 {
	position:absolute;
	top:50px;
	left:0px;
	}
#historietas .main img {
	width:100%;
	height:auto;
	padding:0px 0px 20px 0px;
	}
.ampliar {
	text-align:center;
	font-size:12px;
	font-family: 'Roboto Condensed', sans-serif;
	}

/* Humor -------------------------------*/
#humor {
	width:100%;
	padding:120px 0px 30px 0px;
	background-image:url(../img/back_humor.png);
	background-attachment: fixed !important;
	background-repeat: repeat-x;
	}
#humor #personaje {
	position:absolute;
	top:-50px;
	left:50px;
	}
#humor .main {
	padding:20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-image:url(../img/back_humor-recuadro.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size:100% auto;
	text-align:center;
	}
#humor .main img {
	width:90%;
	height:auto;
	padding:0px 0px 20px 0px;
	}
#humor .main h1 {
	color:#1B6289;
	text-align:right
	}

/* Publicaciones -------------------------------*/
#publicaciones {
	width:100%;
	padding:100px 0px 30px 0px;
	background-image:url(../img/back_publicaciones.png);
	background-attachment: fixed !important;
	background-repeat: repeat-x;
	}
#publicaciones .main h3,
#animaciones .main h3 {
	color:#000;
	}
#publicaciones .main .recuadro,
#animaciones .main .recuadro {
	padding:20px 20px 10px 20px;
	margin:10px 0px 0px 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-image:url(../img/back_publicaciones-recuadro1.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size:100% auto;
	text-align:center;
	font-size:15px;
	line-height:normal;
	}
#publicaciones .main .recuadro_foot,
#animaciones .main .recuadro_foot {
	padding:20px;
	margin:0px 0px 10px 0px;
	background-image:url(../img/back_publicaciones-recuadro2.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size:100% auto;
	}
#publicaciones .main img {
	width:85%;
	height:auto;
	padding:0px 0px 10px 0px;
	}
	video {
  width: 100%    !important;
  height: auto   !important;
}
#publicaciones .main .destacado {
	color:#F15A24;
	font-size:18px;
	}

/* Animaciones -------------------------------*/
#animaciones {
	width:100%;
	padding:100px 0px 30px 0px;
	background-image:url(../img/back_animaciones.png);
	background-attachment: fixed !important;
	background-repeat: repeat-x;
	}

#animaciones .main video {
	width: 100%    !important;
	height: auto   !important;
	}
#animaciones .main .copy {
	text-align:center;
	font-size:15px;
	line-height:normal;
	}
#animaciones .main .slide {
	min-height:250px;
	}

/* Contacto -------------------------------*/
#contacto {
	width:100%;
	padding:100px 0px 0px 0px;
	}
#contacto .main {
	padding:0px 0px 30px 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-image:url(../img/back_contacto-recuadro.png);
	background-repeat: no-repeat;
	background-position: right 15px;
	background-size:95% auto;
	}
#contacto .main .txt {
	padding:0px 30px 100px 0px;
	}
#contacto #personaje {
	position:absolute;
	top:125px;
	right:50px;
	}

input, textarea, select, button {
	font-family: 'Roboto Condensed', sans-serif;
	font-size:16px;
	}
.form-campo,
.form-txtarea {
	display:block;
	padding:15px;
	color:#000;
	border:none;
	margin:0px auto 10px auto;
	width:100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-image: url(../img/back_formulario-contacto.png);
	background-repeat: no-repeat;
	background-size:100% 100%;
	}
.form-campo { }
.form-txtarea {
	height:150px;
	background-image: url(../img/back_formulario-contacto2.png);
	}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color:#000;
	opacity: 1; /* Firefox */
	}
.btn_enviar {
	font-family: 'Shadows Into Light Two', cursive;
	font-size: 18px;
	font-weight:bold;
	width:100%;
	color:#000;
	text-align:right;
	border-style: none;
	background-image: url(../img/back_formulario-send.png);
	background-repeat: no-repeat;
	background-size:100% 100%;
	background-color:transparent;
	padding:10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

/* Tienda -------------------------------*/
#tienda {
	width:100%;
	padding:100px 0px 0px 0px;
	}
#tienda .main {
	padding:0px 0px 30px 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-image:url(../img/back_tienda-recuadro.png);
	background-repeat: no-repeat;
	background-position: right 70px;
	background-size:95% auto;
	}
#tienda .main h1 {
	text-align:right;
	}
#tienda .main .txt {
	padding:110px 20px 50px 0px;
	}
#tienda #personaje {
	position:absolute;
	top:0x;
	left:10px;
	}
#tienda .main .producto {
	width:48%;
	background-attachment: scroll;
	background-image: url(../img/back_tienda-productos.png);
	background-repeat: no-repeat;
	background-size:100% auto;
	padding:15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
#tienda .main .producto img {
	width:100%;
	height:auto;
	}
.colum_izq { float: left; }
.colum_der { float: right; }

#tienda .main .ampliar {
	clear:both;
	width:100%;
	display:block;
	margin:5px 0px;
	}