/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Copyright (c) 2014, All rights reserved.
 * Stylesheet/Hoja de Estilos: styles
 * Project/Projecto: Septiembre 2014 - 64A films.
 * Author: Jesus Piedrahita, Mottif - jesus.piedrahita@mottif.com / www.mottif.com
 *  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

/*Generales*/
html,
body{
	height: 100%;
	background-color: #071023;
}
a{color:#FFFFFF;}
p{margin-bottom: 10px;}

/*Contenedor principal*/
.wrapper{
	width: 100%;
	min-height:100%;
	position: relative;
	box-sizing:border-box;
	color: #FFFFFF;
	font-size:1em;
	/*overflow:hidden;*/
}

/*Home*/
.wrapper.home{
	background-image: url(../images/site/back_dos.png),url(../images/site/back_uno.png);
	background-repeat: repeat, repeat;
}
.wrapper.home section{
	max-width: 615px;
	margin:0px auto;
	text-align: center;
	font-family: 'Roboto Slab', serif;
	font-weight: 300;
	font-size: 1.8em;
	letter-spacing: 0.08em;
	line-height: 1.5em;
	padding: 0px 0px 30px;
	position: relative;
	transition: top 0.5s ease;
}
.wrapper.home section h1{
	margin-bottom: 30px;
}
.wrapper.home section a.iniciar{	
	display:block;
	width: 100px;
	height:97px;
	margin: 30px auto 0px;
	position:relative;
	font-family: 'Roboto Slab', serif;
	font-weight: 700;
	font-size: 14px;
	box-sizing: border-box;
	padding:0px;
	background-image: url(../images/site/iniciar.png);
	background-position: top center;
	background-repeat: no-repeat;
	text-indent: -9999px;
	transition: background-position 0.5s ease;
}
.wrapper.home section a.iniciar:hover{
	background-position: bottom center;
}

/*Instrucciones*/
.overlay{
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
	box-sizing: border-box;
	z-index: 50;
	background: none;
	cursor:pointer;
	font-size: 1em;
}
.instruction{
	box-sizing:border-box;
	background: #071023;
	color: #FFFFFF;
	font-family: 'Josefin Slab', serif;
	font-size: 2em;
	letter-spacing: 0.07em;
	width: 315px;
	padding: 8px 10px 10px 50px;
	position:absolute;
	opacity:0;
}
.instruction p{	
	font-weight: 600;
	margin:0px;
}
.instruction span.triangle{
	display:block;
	width:26px;
	height:26px;
	background:url(../images/site/tri.png) no-repeat center;
	position:absolute;
}
.instruction span.num{
	display:block;
	width: 35px;
	height:35px;
	overflow:hidden;
	text-align: center;
	background:url(../images/site/inst.png) center no-repeat;
	font-weight: 700;
	box-sizing: border-box;
	padding: 10px 0px;
	font-size: 0.85em;
	position:absolute;
	top: 8px;
	left:8px;
}
.instruction#one{left: 10%;top: 170px;width:296px;transition:opacity 0.5s ease-in 0.6s;}
.instruction#two{right: 70px;top: 50%;width:299px;transition:opacity 0.5s ease-in 0.3s;}
.instruction#one .triangle{left:-10px;top:35px;}
.instruction#two .triangle{right:-12px;top:30px;}

.overlay.visible{background:rgba(0,0,0,0.2);}
.overlay.visible .instruction#one{opacity:1;transition:opacity 0.5s ease-in;}
.overlay.visible .instruction#two{opacity:1;transition:opacity 0.5s ease-in 0.3s;}

/*Interna*/
/*menu top (iconos)*/
header{
	width: 100%;
	background-image: url(../images/site/back_dos.png),url(../images/site/back_uno.png);
	background-repeat: repeat, repeat;
	box-sizing: border-box;
	position: relative;
	z-index: 10;
	/*border: 1px solid transparent;*/
	overflow: hidden;
}
.title{
	position: absolute;
	left:25px;
	top:50%;
	margin-top: -28px;
	background:url(../images/site/logo.png) no-repeat center center;
	text-indent: -9999px;
	width: 290px;
	height: 56px;
}
header ul{
	width: 100%;
	text-align: right;
	margin: 20px 0px;
	box-sizing: border-box;
}
header ul li{
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	margin: 0px 10px;
	position:relative;
}
header ul li a{
	display: block;
	font-family: 'Roboto Slab', serif;
	font-weight: 700;
	font-size: 1.3em;
	letter-spacing:0.2em;
}
header ul li a#retos{color:#2FACC7;}
header ul li a#afectos{color:#FF655A;}
header ul li a#triunfos{color:#99CC8A;}
header ul li a#obstaculos{color:#F1435C;}
header ul li a#viajes{color:#48C5A4;}
header ul li a#contexto{color:#894C87;}
header ul li a span{
	display: inline-block;
	vertical-align: middle;
}
header ul li a span.name{
	width:0px;
	overflow:hidden;
	margin-right: 5px;
	transition: width 0.5s ease;
}
header ul li a#retos span.icon,
header ul li a#afectos span.icon,
header ul li a#triunfos span.icon,
header ul li a#obstaculos span.icon,
header ul li a#viajes span.icon,
header ul li a#contexto span.icon{
	width: 60px;
	height: 60px;
	background-repeat:no-repeat;
	background-position:bottom center;
	margin: 0px;
	transition: background-position 0.5s ease;
}
header ul li a#retos span.icon{
	background-image:url(../images/site/retos.png);
}
header ul li a#afectos span.icon{
	background-image:url(../images/site/afectos.png);
}
header ul li a#triunfos span.icon{
	background-image:url(../images/site/triunfos.png);
}
header ul li a#obstaculos span.icon{
	background-image:url(../images/site/obstaculos.png);
}
header ul li a#viajes span.icon{
	background-image:url(../images/site/viajes.png);
}
header ul li a#contexto span.icon{
	background-image:url(../images/site/contexto.png);
}
/*hover y active link*/
header ul li a.activo span.name{
	width: auto;
	transition: width 0.5s ease;
}
header ul li a.activo#retos span.name{width: 45px;}
header ul li a.activo#afectos span.name{width: 62px;}
header ul li a.activo#triunfos span.name{width: 70px;}
header ul li a.activo#obstaculos span.name{width: 92px;}
header ul li a.activo#viajes span.name{width: 52px;}
header ul li a.activo#contexto span.name{width: 74px;}
header ul li a:hover span.icon,
header ul li a.activo span.icon{
	transition: background-position 0.5s ease;
	background-position:top center !important;
}

header ul li a span.tri{
	display: block;
	width: 30px;
	height: 14px;
	position: absolute;
	bottom: -100%;
	right: 15px;
	transition: bottom 1s ease-out;
}
header ul li a#retos span.tri{background:url(../images/site/tri_menu_1.png) no-repeat top center;}
header ul li a#afectos span.tri{background:url(../images/site/tri_menu_2.png) no-repeat top center;}
header ul li a#triunfos span.tri{background:url(../images/site/tri_menu_3.png) no-repeat top center;}
header ul li a#obstaculos span.tri{background:url(../images/site/tri_menu_4.png) no-repeat top center;}
header ul li a#viajes span.tri{background:url(../images/site/tri_menu_5.png) no-repeat top center;}
header ul li a#contexto span.tri{background:url(../images/site/tri_menu_6.png) no-repeat top center;}
header ul li a.activo span.tri{
	bottom: -20px;
}

/*iconos desactivados*/
header ul li.lock a{
	opacity: 0.4;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
	cursor:inherit;
}
header ul li.lock a:hover span.icon{
	background-position: center bottom !important;
}

/*div contenido*/
.content{
	position: absolute;
	height: 100%;
	/*height: auto;*/
	width: 100%;
	left: 0px;
	right: 0px;
	top: 0;
	box-sizing: border-box;
	padding-top: 100px;
}

/*estilos generales para seccion left y right*/
.left,
.right{
	display:inline-block;
	vertical-align:top;
	box-sizing: border-box;
	position: relative;
	height: 100%;
	overflow:hidden;
	padding:0px;
	margin:0px;
}

/*seccion left*/
.left{
	width: 40%;
	background-color: #FFFFFF;
}
/*seccion right*/
.right{
	width: 60%;
	background-image:url(../images/site/back_dos.png);
	background-repeat: repeat;
	padding-bottom: 80px;
}

/*menu años*/
#years{
	box-sizing: border-box;
	height:100%;
	width: 20%;
	font-family: 'Roboto Slab', serif;
	font-weight: 300;
	text-align: center;
	font-size: 2em;
	letter-spacing:0.1em;
	line-height:1em;
	overflow: hidden;
	background: #071023 url(../images/site/back_uno.png) repeat;
	position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
}
#years.close{overflow:auto;}
#years li{border-bottom: 1px solid #39404F;}
#years li:last-child{border:none;}
#years li a{
	display: block;
	box-sizing: border-box;
	padding: 6px 0px;
	line-height: 0.7em;
}
#years li a:hover{
	background-color: rgba(255,255,255,0.06);
}
#years li a:active{
	background-color: rgba(255,255,255,0.31);
}
#years li a.activo{
	background:#FFAC2A url(../images/site/back_dos.png) repeat;
}
#years .scroll_pane{
	height:84%;
	background: #071023;
}
#years .up_year,
#years .down_year{
	display:block;
	height: 8%;
	width:100%;
	background-repeat: no-repeat, no-repeat;
	transition: background-position 0.3s ease;
	text-indent: -9999px;
}
#years .down_year{
	background-image:url(../images/site/fdown.png), url(../images/site/fdownh.png);
	background-position:center, center 200%;
	border-top: 1px solid #39404F;
}
#years .up_year{
	background-image:url(../images/site/fup.png),url(../images/site/fuph.png);
	background-position:center, center -100%;
	border-bottom: 1px solid #39404F;
}
#years .down_year:hover,
#years .up_year:hover{
	background-position: center, center;
	transition: background-position 0.3s ease;
}

/*contenido texto left*/
.text_years{
	box-sizing: border-box;
	height:100%;
	width: 80%;
	position: relative;
	padding-bottom: 50px;
	margin-left:20%;
}

/*Texto slide left*/
.text_left{
	box-sizing: border-box;
	width:100%;
	text-align: center;
	color: #000000;
	font-size:1em;
	position:relative;
	transition: top 0.5s ease;
}
.text_left h1,
.text_left h2,
.text_left h3{
	width:80%;
	margin: 0px auto;
	overflow:hidden;
}
.text_left h1 span,
.text_left h2 span,
.text_left h3 span{
	display: block;
}
.text_left h2 span{
	padding: 35px 0px 25px 0px;
}
.text_left h1{
	font-family: 'Roboto Slab', serif;
	font-weight: 300;
	font-size: 11em;
	transition: color 1s linear;
	line-height: 0.9em;
}

.text_left h1 span{
	line-height:0.5em;
	padding:50px 0px;
}
.text_left h2{
	font-family: 'Roboto Slab', serif;
	font-weight: 300;
	font-size: 3em;
	line-height: 1em;
	border-top-style: solid;
	border-top-width: 1px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	transition: border-color 1s ease, color 1s linear;
	
	border-top-color: black;
	border-bottom-color: black;
}
.text_left h2 big{
	font-family: 'Roboto Slab', serif;
	font-weight: 300;
	font-size: 1.5em;
}
.text_left h3{
	font-family: 'Roboto Slab', serif;
	font-weight: 300;
	font-size: 1.8em;
	transition: color 1s linear;
}
.text_left .logo{
	display: block;
	margin:30px auto 8px;
	width: 60px;
	height:60px;
	overflow:hidden;
	box-sizing: border-box;
	background-image:url(../images/site/logos.png);
	background-repeat: no-repeat;
	background-position: center 0px;
	transition: background-position 1s ease;
}

/*flechas slide left y right*/
#left,
#right{
	z-index:15;
	position:absolute;
	top: 50%;
	margin-top: -34px;
	width: 50px;
	height: 68px;
	text-indent:-9999px;
	transition: background-color 0.5s ease;
}
#left{
	left:0px;
	background: url(../images/site/left.png) no-repeat center rgba(255,255,255,0.2);
}
#right{
	right:0px;
	background: url(../images/site/right.png) no-repeat center rgba(255,255,255,0.2);
}
#left:hover,
#right:hover{
	background-color: rgba(255,255,255,0.4);
}

/*ocultar/mostrar texto*/
#only_image{
	box-sizing:border-box;
	z-index: 15;
	position:absolute;
	display:block;
	width:120px;
	padding:25px 0px 6px;
	text-align: center;
	bottom:0px;
	left:50%;
	margin-left: -60px;
	font-family: 'Roboto Slab', serif;
	font-weight: 400;
	letter-spacing:0.08em;
	font-size: 1.15em;
	background: url(../images/site/t.png) no-repeat center 7px rgba(255,255,255,0.2);
	transition: background-color 0.5s ease,background-position 0.5s ease, bottom 1s ease;
}
#only_image:hover{
	background-color: rgba(255,255,255,0.4);
}
#only_image.visible{	
	background-position: center -79px;
}

/*div textura*/
.textura{
	z-index: 10;
	position: absolute;
	left: 0px;
	top: 10px;
	right: 0px;
	bottom: 0px;
	box-sizing: border-box;
	background-image:url(../images/site/back_tres.png);
	background-repeat: repeat;
}

/*Texto slide right*/
.text_right{
	width: 60%;
	max-width: 600px;
	margin:0 auto;
	text-align:center;
	font-size:1em;
	letter-spacing: 0.08em;
	position:relative;
	z-index:15;
	transition: top 0.5s ease;
}
.date{
	border:1px solid #FFFFFF;
	min-width: 150px;
	margin:0px auto;
	display: inline-block;
	box-shadow: 0px 0px 2px rgba(0,0,0,0.2), inset 0px 0px 2px rgba(0,0,0,0.2);
}
.date h2{
	font-family: 'Roboto Slab', serif;
	font-weight: 300;
	font-size: 9em;
	overflow:hidden;
}
.date h3{
	text-transform: uppercase;
	font-family: 'Roboto Slab', serif;
	font-weight: 400;
	font-size: 2.2em;
	border-top: 1px solid #FFFFFF;
	box-shadow: 0px -1px 1px rgba(0, 0, 0, 0.2), inset 0px 1px 1px rgba(0, 0, 0, 0.2);
	overflow:hidden;
}
.date h2 span,
.date h3 span,
.desc p{
	display:block;
}
.desc {
	border-top: 1px solid rgba(255,255,255,0.3);
	border-bottom: 1px solid rgba(255,255,255,0.3);
	margin:40px auto 0px;
	font-family: 'Roboto Slab', serif;
	font-weight: 400;
	font-size: 1.8em;
	overflow:hidden;
}
.desc p{padding: 50px 0px 40px;}
.color,
.image{
	position:absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
}
.color{
	background-image:url(../images/site/back_dos.png);
	background-repeat: repeat;
	transition: background-color 0s linear 1s;
}
.image{
	top:10px;
	background-repeat:no-repeat;
	background-position:top left;
	background-size:cover;
}


/*Estilo para cada item de menu*/
/*Retos*/
.text_left.retos{
	color: #2EACC6;
}
.text_left.retos h2{
	border-top-color: #2EACC6;
	border-bottom-color: #2EACC6;
}
.text_left.retos .logo{
	background-position: center 0px;
}
.right.retos .color,
.right.retos{
	background-color:#2FACC7;
}

/*Afectos*/
.text_left.afectos{
	color: #FF6559;
}
.text_left.afectos h2{
	border-top-color: #FF6559;
	border-bottom-color: #FF6559;
}
.text_left.afectos .logo{
	background-position: center -70px;
}
.right.afectos .color,
.right.afectos{
	background-color:#FF655A;
}

/*Triunfos*/
.text_left.triunfos{
	color: #99CC8A;
}
.text_left.triunfos h2{
	border-top-color: #99CC8A;
	border-bottom-color: #99CC8A;
}
.text_left.triunfos .logo{
	background-position: center -140px;
}
.right.triunfos .color,
.right.triunfos{
	background-color:#92CA8F;
}

/*Obstaculos*/
.text_left.obstaculos{
	color: #F1435C;
}
.text_left.obstaculos h2{
	border-top-color: #F1435C;
	border-bottom-color: #F1435C;
}
.text_left.obstaculos .logo{
	background-position: center -210px;
}
.right.obstaculos .color,
.right.obstaculos{
	background-color:#F1435C;
}

/*Viajes*/
.text_left.viajes{
	color: #47C5A4;
}
.text_left.viajes h2{
	border-top-color: #47C5A4;
	border-bottom-color: #47C5A4;
}
.text_left.viajes .logo{
	background-position: center -280px;
}
.right.viajes .color,
.right.viajes{
	background-color:#49C5A4;
}

/*Contexto*/
.text_left.contexto{
	color: #884C86;
}
.text_left.contexto h2{
	border-top-color: #884C86;
	border-bottom-color: #884C86;
}
.text_left.contexto .logo{
	background-position: center -350px;
}
.right.contexto .color,
.right.contexto{
	background-color:#894C87;
}


/*Diseño responsive width menor a 768px
@media screen and (max-width: 769px){
	header{
		padding-top: 40px;
	}
	.title{
		margin-top:0px;
		top:10px;
		left:50%;
		margin-left:-142px;
	}
	.content{
		padding-top:140px;
	}
	.left,.right{width:100%;height:100%;}
}*/


/* footer */
.footer {
	/* position: absolute; */
	bottom: 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	float: left;
	text-align: left;
	font-weight: normal;	
	clear: both;
	font-size: 11px;
	color: rgb(255, 255, 255, 0.3);
	height: 60px;
	margin: auto;
	padding: 20px 20px 10px 20px;
	text-align: center;
	width: 100%;
	max-width: 900px;
	margin-left: calc(50% - 450px);
}

.footer p{
	margin: 0px;
}

.footer a, .footer a:hover, .footer a:visited, .footer a:link {
	color: rgb(255, 255, 255, 0.6);
	background: none;
	text-decoration: none;
	font-weight: bold;
	display: block;
	margin-top: 0px;
}
.footer .column0 {
	text-align: left;
	float: left;
	width: 8%;
	margin: 0 5px;
}
.footer .columnA {
	text-align: left;
	float: left;
	width: 33%;
	margin: 0 5px;
}
.footer .columnB {
	text-align: left;
	float: left;
	width: 30%;
	margin: 0 5px;
}
.footer .columnC {
	text-align: left;
	float: right;
	width: 30%;
	margin: 0px 0px 0px;
}

.menuA{
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;	
	color: #f1e8c7;
	text-decoration: none;
}

.menuA:hover{
	color: #fff;
}

.menuB{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	font-weight: bold;
	color: #f1e8c7;
	text-decoration: none;
}

.menuB:hover{
	color: #fff;
}

.menuBack{
	border-radius: 18px;
	color: #f1e8c7;
	background-color: #817F66;
	padding: 10px;
}

.protoText{
	height: calc(65vh - 250px);
	overflow: auto;
}


.pieFoto1{
	color: #000000;
	font-size: 11px;
	padding: 5px;
	width: calc(100% - 11px); 
	background-color: rgb(255, 255, 255, 0.8);
	position: relative; 
	
}