@import url(http://fonts.googleapis.com/css?family=Lora:400italic,700italic);

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */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;}

@import url(http://fonts.googleapis.com/css?family=Lora:400italic,700italic);

body{
    width: 100%;
    height: 950px;
    box-sizing: border-box;
    font-family: 'Lora', sans-serif;
    font-style: italic;

    
}

header{
    width: 100%;
    line-height: 2.5em;
    clear: both;
    padding: 0.25em 1em;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 99;    
}

 
nav {
    clear: both;
    height: 2.6em;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    border-bottom: 2px solid black;
    background-color: #fff0f9;  
    z-index: 99;
}

nav ul {
    margin: 0 auto;
    text-align: center;
}

nav ul li {   
    list-style: none;
    display: inline-block;    
}

header li a{
    text-decoration: none;
    padding: 0.5em;
    text-align: center;
    color: black;
    font-weight: 600;
}

a{
    text-decoration: none;
    
}

nav li a:hover{
    color: #f0bbdb;
}





section{
    width: 900px;
    height: 800px;
    margin: auto;
    margin-top: -5.5px;
    background-image: url(imagenes/secret.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
}

.bio{
    background-image: url(imagenes/me.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 25%;
    height: 200px;
    float: left;
    overflow:hidden;
}

.materias{
    clear: both;
    background-color: #dbcdba;
    width: 25%;
    height: 200px;
    float: left;
    background-image: url(imagenes/fadu.jpg);
    background-size: 150%;
    background-repeat: no-repeat;
}

.links{
    background-image: url(imagenes/conecciones.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    float: left;
    background-color: #bcab95;
    width: 25%;
    height: 400px;
    position: relative;
    top: -200px;
}

.propuesta-proa{
    background-image: url(imagenes/bocetos_logo.png);
    background-size: 130%;
    background-repeat: no-repeat;
    float: left;
    background-color: #b79b76;
    width: 50%;
    height: 400px;
    position: relative;
    top: -200px;
}

.img-cv{
    background-image: url(imagenes/heroina2.jpg);
    background-size: 102%;
    background-repeat: no-repeat;
    background-position: -10px -9px;
    float: left;
    background-color: #b79b76;
    width: 50%;
    height: 400px;
    position: relative;
    top: -200px;
}

.cat{
    background-image: url(imagenes/kitty2.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 25%;
    height: 200px;
    float: left;
    position: relative;
    top: -200px;
}

.contact{
    background-image: url(imagenes/mail2.jpg);
    background-size: 130%;
    background-repeat: no-repeat;
    width: 25%;
    height: 200px;
    float: left;
    position: relative;
    top: -200px;
}

#video{
    width: 50%;
    height: 200px;
    float: left;
    position: relative;
    top: -200px;
}

h2{
    padding: 0.1em;
    border-bottom: 1px solid black;
    margin: 1em 1em;
    display: none;
    color: black;
}

h3{
    font-weight: 700;
}

p{
    line-height: 20px;
}



/*HOVERS PPLES*/

.bio:hover{
    background-image: none;
    background-color: rgba(255, 240, 249, 0.24);   
}

.bio:hover h2{
    display: block;
}

.materias:hover{
    background-image: none;
    background-color: rgba(255, 240, 249, 0.24);   
}

.materias:hover h2{
    display: block;
}

.links:hover{
    background-image: none;
    background-color: rgba(255, 240, 249, 0.24);   
}

.links:hover h2{
    display: block;
}

.propuesta-proa:hover{
    background-image: none;
    background-color: rgba(255, 240, 249, 0.24);   
}

.propuesta-proa:hover h2{
    display: block;
}

.img-cv:hover{
    background-image: none;
    background-color: rgba(255, 240, 249, 0.24);   
}

.img-cv:hover h2{
    display: block;
}

.cat:hover{
    background-image: none;
    background-color: rgba(255, 240, 249, 0.24);   
}

.cat:hover h2{
    display: block;
}

.contact:hover{
    background-image: none;
    background-color: rgba(255, 240, 249, 0.24);   
}

.contact:hover h2{
    display: block;
}

#video:hover{
    opacity: 0.5;  
}


.propuesta-proa a{ /*link selector externo*/
    display: block;
    height: 400px;
    width: 100%;
    color: black;    
}

.propuesta-proa a:last-child{ /*link selector interno*/
    display: block;
    height: 400px;
    width: 100%;
    position: relative;
    top: 0px;
    color: white;
}


.img-cv a{ /*link selector externo*/
    display: block;
    height: 200px;
    width: 100%;
    color: black;
    position: relative;
    top: 0px;
}
   
.img-cv a:last-child{ /*link selector interno*/
    display: block;
    height: 400px;
    width: 100%;
    position: relative;
    top: 0px;
    color: white;
}


.contact a{ /*link selector externo*/
    display: block;
    height: 200px;
    width: 100%;
    color: black;    
}
   
.contact a:last-child{ /*link selector interno*/
    display: block;
    height: 200px;
    width: 100%;
    color: white;
}


.links a{ /*link selector externo*/
    display: block;
    height: 400px;
    width: 100%;
    color: black;    
}

.links a:last-child{ /*link selector interno*/
    display: block;
    height: 400px;
    width: 100%;
    position: relative;
    top: -400px;
    color: white;
}



/*collapse*/


/*bio*/
.show {
    display: none;
}

.hide:target + .show {
    display: block;
}

.hide:target {
    display: none;
}

.hide:target ~ .bio { /*aca se ve el Go Back*/
    display: block;
    height: 200px;
    width: 25%;
    background-color: #4d504f;
}

.bio.hide a{ /*link selector externo*/
    display: block;
    height: 200px;
    width: 100%;
    color: black;    
}
   
.bio.show a:last-child{ /*link selector interno*/
    display: block;
    height: 200px;
    width: 100%;
    color: white;
}

.bio div img.back{
    position: absolute;
    width: 15%;
    top: 130px;
    right: 10%;
    z-index: 2;
    min-width: 30px;
}

.bio div img.love{
    position: absolute;
    width: 100px;
    top: 680px;
    right: 4%;
    z-index: 2;
    min-width: 30px;
}


.bio div img.back{
    position: absolute;
    width: 15%;
    top: 130px;
    right: 10%;
    z-index: 2;
    min-width: 30px;
}

.bio div:first-child{
    position: relative;
    display: block;
    height: 200px;
    width: 100%;
    background-color: #414141;
    z-index: 2;
}

.bio div:last-child{
    z-index: 1;
    display: block;
    width: 900px;
    float: right;
    position: absolute;
    top: 46px;
    height: 800px;
    background-color: #fcfcfc;
    color: black;
}

.bio div h1{
    float: right;
    padding: 2em 1em 0.5em 1em;
    font-size: 2em;
    width: 50%;
    text-align: right;
}

.bio div h3{
    font-size: 1em;
    clear: both;
    float: right;
    width: 50%;
    padding: 1em 2em;
    text-align: right;
}

.bio div p{
    clear: both;
    float: right;
    width: 50%;
    padding: 1em 2em;
    text-align: right;
}





/*MATERIAS*/
.mat-in {
    display: none;
}

.mat-out:target + .mat-in {
    display: block;
}

.mat-out:target {
    display: none;
}

.mat-out:target ~ .materias { /*aca se ve el Go Back*/
    clear: both;
    display: block;
    height: 200px;
    width: 25%;
    background-color: #4d504f;
}

mat-out:target ~ .materias:last-child{
    
}


.materias.mat-out a{ /*link selector externo*/
    display: block;
    height: 200px;
    width: 100%;
    color: black;
    
}
   
.materias.mat-out a:last-child{ /*link selector interno*/
    display: block;
    height: 200px;
    width: 100%;
    color: black;
    position: relative;
    top:-200px;

}
.materias.mat-out a:first-child{ /*link selector interno*/
    display: block;
    height: 200px;
    width: 100%;
    color: white;
}

.materias div img.back{
    position: absolute;
    top: 140px;
    width: 15%;
    right: 10%;
    z-index: 2;
    min-width: 30px;
}

.materias div:first-child{
    position: relative;
    display: block;
    height: 200px;
    width: 100%;
    background-color: #414141;
    z-index: 2;
}

.materias div:last-child{
    z-index: 1;
    display: block;
    width: 900px;
    float: right;
    position: absolute;
    top: 46px;
    height: 800px;
    background-color: #fcfcfc;
    color: black;
}

.materias div h1{
    float: right;
    padding: 2em 1em 0.5em 1em;
    font-size: 2em;
    width: 50%;
    text-align: right;
}

.materias div .externo{
    clear: both;
    float: right;
    width: 50%;
    padding: 1em 2em;
    text-align: right;
    line-height: 40px;
}

.materias div .externo li{
    line-height: 20px;
}




footer{
    position: relative;
    top: -200px;
    clear: both;
    width: 900px;
    margin: auto;
    text-align: center;
    padding: 1em 0em;
    font-size: 15px;
    line-height: 18px;
    color: #bcbcbc;
}