*{font-family: lato, sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;}

/*header*/


header{display: flex;
background-color: #434142;
justify-content: center;
align-items: center;
width: 100%;
}

.grupo{display: flex;
list-style: none;
justify-content: space-around;
width: 100vw;
flex-wrap: wrap;}

.grupo li{display: flex;
    align-items: center;
    height: 3em;
   list-style: none;
}

.cajasnombres{color: #daa020;
padding: 0 1em 0 1em;
text-decoration: none;
transition: all 0.3s;
align-items: center;
font-weight: 300;
margin: auto;}


.vm02{font-weight: bold;
color: #97c1af;}

.cajasnombres:hover{color: #eeebcd;}

#x{display: none;}

header > ul > li > a {display: none;}


/*Fin header*/

/********************Main*******************/

body {background-color: #000000; 
background-image: url(img/fondo-01.svg); background-size: cover;
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: space-between; 
margin: auto;}

main{width: 100%;
max-width: 1280px;
margin: auto;}


/****************Título*******************/

.tituloyredes{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
width: 98%;
margin: auto;
margin-top: 1em;
flex-wrap: wrap;
}


h1{color: #eeebcd;  font-weight: lighter;
font-size: 4em; text-align: center;
}

h1 span{color: #97c1af;
    font-weight: bold;}



/**************Mis datos****************/

.contenedortextoeimagen {display: flex; 
justify-content: space-between;
align-items: center;
width: 98%;
margin: auto;
margin-top: 1em;
flex-wrap: wrap;}

.figureimagen{width: 21em;
border-radius: 10px;
margin-bottom: .5em;
overflow: hidden;}

.mifoto {width: 100%}

.sinimagen{display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: .5em;
flex-wrap: wrap;}

article{max-width: 56em;}

article p{font-size: .9em;
    color: #eeebcd;}


h2 {color: #ccaa64;
font-weight: lighter;
text-align: left;}

h3 {color: #97c1af;
font-weight: normal;
text-align: left;}

.divmaterias{display: flex;
flex-direction: row;
width: 65%;
justify-content: space-between;
margin-top: 1.5em;
flex-wrap: wrap;}

.apro{display: flex;
flex-direction: column;
justify-content: flex-start;
width: 50%;
flex-wrap: wrap;}


.primeroysegundo{display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
margin-top: 1em;}


.cursan{display: flex;
flex-direction: column;
}

.tercero{margin-top: 1em;}

.materias{font-weight: lighter; text-align: left;
color: #eeebcd; text-decoration: none;
font-size: 1em;
list-style: none;
padding: .3em 0 .3em 0;}

.link{font-weight: bold;
background-color: #daa020; color: #eeebcd;
text-decoration: none;
padding: 1em;
border-radius: 10px;
margin-right: 1em }


.link:hover{background-color: #eeebcd; color: #daa020;}


/**************Ultimo Section******************/


.ultimosection{border-top: 1px solid #daa020;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: auto;
margin-top: 2em;
margin-bottom: 1em;
width: 100%;
flex-wrap: wrap;}

.ultimodiv{display: flex;
flex-direction: row;
justify-content: space-between;;
align-items: center;
margin-top: .5em;
margin: auto;
width: 98%;
flex-wrap: wrap;}

h4{color: aliceblue;
text-align: center;
margin-bottom: .5em;}

.divcomitente{width: 49%;
margin-bottom: .5em;
}

.comitente{color: #97c1af;
font-size: .9em;
text-align: justify;
 }

.datos{width: 49%;
    margin-bottom: .5em}


.datos p{ font-size: .9em;
color: #daa020}



/***************Footer**************/
footer{background-color: #000000;
padding: 1em;
width: 100%;}

footer p {font-size: .7em;
         color: #3b3b3b;
          width: 95%;
margin: auto;}


/***************RESPONSIVE HEADER****************/  
    
@media (max-width: 852px) {main{width: 100%;
    margin: auto;}
    
    
    

    
header{justify-content: flex-start;

}    
    
.grupo{display: flex;
flex-direction: column;
list-style: none;
justify-content: center;
align-items: center;
width: 50vw;
flex-wrap: wrap;
    margin: auto;}
    
    .grupo li{
        width: 11em;}
    
    

    
    
header > ul {
    display: flex;
}

header > ul > li {
    width: 2em;
    height: 2em;
    display: flex;

}
    
    
.icono{width: 20px;}

header > ul > li > a {
    width: 100%;
    height: 100%;
    background-color: #97c1af;
    color: black;
    text-decoration: none;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    

}


/* menu desplegable */

header nav {
    background-color: rgba(0,0,0,0.85);
    position: fixed;
    left: -100vw;
    top: 0;
    height: 100vh;
    min-width: 100vw;
    transition: all .6s ease;
    z-index: 999;
}



header nav:target {
    left: 0;
    
    transition: all .6s ease;
}



header nav a {
    color: rgba(255,255,255,.75);
    display: block;
    padding: .5em 1em;
    text-align: center;
    text-decoration: none;
}

header nav a:hover {
    color: white;
}

#x {display: block;
    
    position: absolute;
    left: 0;
    top: 0;
}}




/**************RESPONSIVE 1*****************/ 

@media (max-width: 1279px) {
     
 .contenedortextoeimagen {display: flex; 
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 98%;
margin: auto;
margin-top: 1em;
flex-wrap: wrap;}


.sinimagen{display: flex;
flex-direction: column;
justify-content: space-between;
width: 70%;
flex-wrap: wrap;}
    
    
.texto {display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin: auto;}
    
.sinimagen .texto article {max-width: 49%;}


.divmaterias{display: flex;
flex-direction: row;
width: 66%;
justify-content: space-between;
margin-top: 1.5em;
flex-wrap: wrap;
}

.apro{display: flex;
flex-direction: row;
justify-content: space-between;
width: 19em;
flex-wrap: wrap;}


.primeroysegundo{display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
margin-top: 1em;}
    
    
.ultimosection{width: 98%;}

.ultimodiv{display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: .5em;
margin-bottom: .5em;
width: 98%;
flex-wrap: wrap;}

.divcomitente{width: 49%;
margin-bottom: .5em;
}


.comitente{color: #97c1af;
font-size: .9em;
text-align: justify;
 }

.datos{width: 49%;}

.datostitulo{font-size: 1em;}

.datos p{ font-size: .9em;
color: #daa020} }

/*****************RESPONSIVE 2******************/ 

@media (max-width: 1170px) {
    
main{width: 100%;
margin: auto;}
    
.tituloyredes{
display: flex;
flex-direction: row;
justify-content: center;
align-items: baseline;
margin: auto;
margin-top: 1em;
flex-wrap: wrap;
}

    
.redesdiv{margin-left: .5em;}
    
h1 span{flex-wrap: wrap;}
    
    
.contenedortextoeimagen {display: flex; 
flex-direction: column;
width: 75%;
}

.sinimagen{display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
flex-wrap: wrap;}

.texto {display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin: auto;}
    
.sinimagen .texto article {max-width: 49%;}    


h2 {color: #ccaa64;
font-weight: lighter;
text-align: center;;}

h3 {color: #97c1af;
font-weight: normal;
text-align: left;}

.divmaterias{display: flex;
flex-direction: row;
width: 100%;
justify-content: space-between;
flex-wrap: wrap;
margin: auto;}

.apro{display: flex;
flex-direction: column;
justify-content: flex-start;
width: 55%;
flex-wrap: wrap;}
    
.ultimosection{border-top: 1px solid #daa020;
    display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin: auto;
margin-top: 2em;
margin-bottom: 1em;
margin: auto;
width: 75%;
flex-wrap: wrap;}

.ultimodiv{display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin-top: .5em;
margin-bottom: .5em;
width: 98%;
flex-wrap: wrap;}

.divcomitente{width: 100%;
margin-bottom: .5em;
}

.datos{ width: 100%;}

.datos p{ font-size: .9em;
    color: #daa020}}
    
/***************RESPONSIVE 3****************/  
    
@media (max-width: 930px) {main{width: 100%;
margin: auto;}
    
.tituloyredes{
display: flex;
flex-direction: row;
justify-content: center;
align-items: baseline;
width: 70%;
margin: auto;
margin-top: 1em;
flex-wrap: wrap;}

    
.redesdiv{margin: auto;}
    
h1 span{flex-wrap: wrap;}
    
    
.contenedortextoeimagen {display: flex; 
flex-direction: column;
width: 70%;}

.sinimagen{display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
flex-wrap: wrap;}

.texto {display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin-bottom: 1em;
max-width: 95%;
margin: auto;}
    
.sinimagen .texto article {max-width: 100%;
    text-align: justify;
    margin: auto;}    


h2 {color: #ccaa64;
font-weight: lighter;
text-align: center;
margin-top: 1em;}

h3 {color: #97c1af;
font-weight: normal;
text-align: center;}

.divmaterias{display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;

flex-wrap: wrap;}

.apro{display: flex;
flex-direction: column;
justify-content: center;}
    
.primeroysegundo{display: flex;
flex-direction: column;
justify-content: center;
align-items: center;}
    
.primero{margin-bottom: .5em;}

.materias{text-align: center;}

.ultimosection{border-top: 1px solid #daa020;
margin-top: 2em;
margin-bottom: 1em;
    width: 70%;}}
    
    
/***************RESPONSIVE 4 ****************/  
    
@media (max-width: 520px) {main{width: 100%;
    margin: auto;}
    
 .contenedortextoeimagen {display: flex; 
flex-direction: column;
width: 95%;}
    
h1{font-size: 3.5em;}
    
.figureimagen{width: 18em;}

.sinimagen{display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
flex-wrap: wrap;}

.texto {display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
margin: auto;
}
    
.sinimagen .texto article {max-width: 100%;
    text-align: justify;}    


h2 {color: #ccaa64;
font-weight: lighter;
text-align: center;;}

h3 {color: #97c1af;
font-weight: normal;
text-align: center;}

.divmaterias{display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
flex-wrap: wrap;}

.apro{display: flex;
flex-direction: column;
justify-content: center;}
    
.primeroysegundo{display: flex;
flex-direction: column;
justify-content: center;
align-items: center;}
    
.primero{margin-bottom: .5em;}

.materias{text-align: center;}

.ultimosection{border-top: 1px solid #daa020;
margin-top: 2em;
margin-bottom: 1em;
    width: 95%;}}
 
  


/**********Portfolio*****************/

.bloque {display: flex;
justify-content: space-between;
margin-top: 1em;
padding: 1em;
flex-wrap: wrap;}

.f1{display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;}

.afiche{border-radius: 10px;
width: 12em; height: auto;
display: flex;}

figcaption{color: #daa020; font-weight: lighter;
margin: 0.5em}

figcaption span{font-weight: bold}

.botones{margin-bottom: 1em;
width: 10.8em;
margin: auto;
margin-top: 1em;
margin-bottom: 1em;
}

.linkpor{font-weight: bold;
background-color: #daa020; color: #eeebcd;
text-decoration: none;
padding: 1em;
border-radius: 10px;
margin-right: 1em;}

.linkpor:hover{background-color: #eeebcd; color: #daa020;}


/***************RESPONSIVE PORTFOLIO ****************/  
    
@media (max-width: 843px) {main{width: 100%;
    margin: auto;}
    
    .bloque {width: 70%;
    margin: auto;}}


/***************RESPONSIVE PORTFOLIO 1 ****************/  
    
@media (max-width: 610px) {main{width: 100%;
    margin: auto;}
    
.bloque {justify-content: center;
width: 50%;}

.f1{display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;}

.afiche{border-radius: 10px;
width: 12em; height: auto;
display: flex;}
    
    
    figcaption{color: aquamarineñ}

}