/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
   Estos estilos resetean los estilos aplicados por defecto en los distintos navegadores para obtener una apariencia similar en todos ellos.
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*///////////// Fin del reset de Eric Meyer //////////////////////*/

/* 	Modifica el modelo de cajas (box-model) 
	creando los márgenes interiores (padding) 
	y exteriores (margin) dentro de las medidas del elemento
*/
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

/* 	Evita que las imágenes aumenten de tamaño al aplicarles márgenes.
	Referencia a ésta situación en los comentarios de:
	https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
*/
img { box-sizing: content-box; }

/* 	Esta declaración obliga a los elementos a constreñir su ancho
	al ancho del elemento que los contiene. Permitiendo así que 
	regulen su tamaño aún cuando se modifique el tamaño del visor
*/
img,
embed,
object,
video {
	max-width: 100%;
}

/* Estos estilos establecen las características del visor en dispositivos móviles */
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }


/*
	ADELANTE CON LA METRALLA (⌐■_■)--︻╦╤─ - - - (╥﹏╥) 
*/

body { 
	font-family: 'Lato', sans-serif;
	-webkit-animation:fadein 1s; animation:fadein 1s
 }
@-webkit-keyframes fadein { from {opacity:0} to {opacity:1} }
@keyframes fadein { from {opacity:0} to {opacity:1} }
#fondo_portada{
	background-color: white;
	position: absolute;
	z-index: 4;
	width: 100vw;
	height: 100vh;
	-webkit-transition: all 500ms ease-out 1.7s;
    -moz-transition: all 500ms ease-out 1.7s;
    -o-transition: all 500ms ease-out 1.7s;
    transition: all 500ms ease-out 1.7s;
}
#portada{
	width: 200px;
	position: absolute;
	z-index: 5;
	top: 50%;
	left: 50%;
	-webkit-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
	cursor: pointer;
}
.desaparece{
	opacity:0;
	z-index: 0 !important;
}
#navegador{
	position: relative;
	margin: 0 auto;
	width: 90vw;
	max-width: 900px;
}
#pagina{
	position: relative;
	margin: 20px auto 0 auto;
	width: 90vw;
	max-width: 900px;
	height: 90vh;
}
a{
	color: #B45E0F;
	text-decoration: none;
	font-family: 'Ubuntu Mono', monospace ;
}

a:hover{
	color: #ACAFB0;
}
.interior{
	color: rgba(180,94,15,0.8);
	font-family: 'Lato', sans-serif;
}
p{
	line-height: 1.2;
}
h1{
	color: rgba(180,94,15,0.8);
	border: 1px solid rgba(180,94,15,0.8);
	text-align: center;
	font-size: 1.5em;
	font-weight: 300;
	margin: 20px 0 10px;
	text-transform: uppercase;
	padding: 10px;
}
.flecha{
	position: absolute;
	top: 10px;
	color: rgba(180,94,15,0.8);
	cursor: pointer;
	display: inherit;
}
.derecha{
	left: 20px;
}
.cerrar{
	position: absolute;
	right: 0px;
	color: rgba(180,94,15,0.8);
	cursor: pointer;
	margin-top: 20px;
}



/*********************************
 Estilos de Formación
*********************************/

.formacion{
	font-weight: 300;
	text-align: justify;
	display: inline-block;
}
.horas,
.universidad{
	color: #ACAFB0;
}
.datos p,
.formacion p{
	margin-bottom: 10px;
}

/*********************************
 Estilos de Aptitudes
*********************************/
.aptitudes,
.datos{
	width: 49%;
}
.datos{
	 display: inline-block;
  float: left;
}
.aptitudes{
	text-align: justify;
	padding-bottom: 20px;
	float: right;
	display: inline-block;
}
.datos .titulo,
.aptitudes .titulo{
	font-family: 'Ubuntu Mono', monospace ;
	color: #ACAFB0;
}


/*********************************
 Estilos de experiencia laboral
*********************************/
.experiencia{
	width:60%;
	padding: 20px;
	float: right;
}
.experiencia .titulo{
	color: black;
	text-transform: uppercase;
	text-align: center;
	width: 100%;
	font-size: 2.2em;
	
}


/*********************************
 Estilos de Programación
*********************************/
.programacion,
.arqueologia,
.gestion{
	padding-top: 1px;
}
.fecha{
	color: #ACAFB0;
	font-size: 0.8em;
}
.tecnologias,
.funcion{
	font-family: 'Ubuntu Mono', monospace ;
	color: #ACAFB0;
	font-size: 0.8em;
}
.programacion p{
	margin-bottom: 5px;
}





.empresa{
	color: #ACAFB0;
	font-family: 'Ubuntu Mono', monospace ;
}



/*
/////////////////////////
//////////////////////////////////
////////////////////////////////////
*/
/* Here's where our carousel begins, with the main wrapper being
relatively positioned, so that our absolutely positioned items are
in the right place. */
.carousel-wrapper {
  position: relative;
}
  /* Our absolutely positioned carousel items span the width and
  height of its parent. We're making them transparent by default so
  that they fade in when we cycle through them using the arrow links. */
.carousel-wrapper  .carousel-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}


/* Let's set our jump link targets display: none; so that we're not
  making the browser jump to the top of the carousel whenever a user
  clicks on one of our arrow links. This attribute selector will target
  any element whose id starts with 'target-item'. */
  .carousel-wrapper [id^="target-item"] {
    display: none;
  }

  /* So, up above we made all our carousel items transparent, which means
  that on page-load, we'd have a big empty box where our carousel should be.
  Let's set our first item's opacity to 1 so that it displays instead. Also,
  we're setting its z-index to 2, so that it's positioned on top of the
  other carousel items. */
  .item-1 {
    z-index: 2;
    opacity: 1;
  }

  /* But we don't want the first item to ALAWYS be opacity: 1; otherwise
  it would peek through when cycling between items two and above. */
  .carousel-wrapper *:target ~ .item-1 {
    opacity: 0;
  }

  /* ...but if #target-item-1 is targeted, well we do want the first item
  to show up, so we're selecting it with the ~ sibling selector and
  setting its opacity to 1 again :-) */
  #target-item-1:target ~ .item-1 {
    opacity: 1;
  }

  /* If any other target-item-# is targeted, let's select it using the sibling
  selector, make it fade in, and place it on top of the pile using z-index: 3.
  Here's where you'd add more target items if your carousel has more than three
  items. It might be worth adding like 10 items right off the bat. */
  #target-item-2:target ~ .item-2, #target-item-3:target ~ .item-3, #target-item-4:target ~ .item-4, #target-item-5:target ~ .item-5 {
    z-index: 3;
    opacity: 1;
  }