/* Generated by Font Squirrel (https://www.fontsquirrel.com) on June 26, 2016 */



@font-face {
    font-family: 'open_sansregular';
    src: url('opensans-regular-webfont.woff2') format('woff2'),
         url('opensans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'open_sanssemibold';
    src: url('opensans-semibold-webfont.woff2') format('woff2'),
         url('opensans-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'playfair_displayblack';
    src: url('playfairdisplay-black-webfont.woff2') format('woff2'),
         url('playfairdisplay-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*ESTILOS*/

*{
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
    text-align: center;
 }

body{
    background-color: whitesmoke;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100vw;
}


a{
    text-decoration: none;
    }

.backgroundimage{ 
    background-image: url(../images/tapa.JPG);
    background-size: cover;
    height: 100vh;
    width: 100vw;
  
  

}
.contenedor{
    margin-left:15%;
    margin-right:15%;
    
}


/*ICONOS*/

.social{
        display: block;
        padding-top: 3em;
        float: right;
        }

#facebook{
        width: 1.5em;
        height: 1.5em;
        margin-left: 0.4em;
                }

#facebook:hover {
   content: url(../images/facebook-logo.png);
}

#instagram{
        width: 1.5em;
        height: 1.5em;
    margin-left: 0.4em;
        }

#instagram:hover {
   content: url(../images/instagram-logo.png);
}

#behance{
        width: 1.5em;
        height: 1.5em;
    margin-left: 0.4em;
        }

#behance:hover {
   content: url(../images/behance-logo.png);
}


/*HEADER*/

 h1{
    font-family: 'playfair_displayblack', serif;
    font-size:2.5em;
    font-style: sans;
    color: whitesmoke;
    margin-top: 2em;
}

h2{
    font-family: 'playfair_displayblack', serif;
    font-size: 2em;
    color:#5a5858;}
    
h3{
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2em;
    font-weight: 600;
    color:#3e3e3e;
}

h4{
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    font-weight: 600;
    color:#3e3e3e;
    
}

p{
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    font-weight: 400;
    color:#3e3e3e;
    
}

/*MENU*/



.dropdown a{
    font-family:'Open Sans', sans-serif;
    font-weight: 600;
    font-size:0.9em;
    color: whitesmoke;
    padding: 1em;
    }

.dropdown a:hover{
    transform: translate(0,-0.5em);
    -webkit-transform: translate(0,-0.5em);
    -o-transform: translate(0,-0.5em); 
    -moz-transform: translate(0,-0.5em);
}

.smoothScroll img:hover{
    transform: translate(0,-0.5em);
    -webkit-transform: translate(0,-0.5em);
    -o-transform: translate(0,-0.5em); 
    -moz-transform: translate(0,-0.5em);
}


.activo:hover {
               color:whitesmoke; 
               border-style: solid;
               padding: 1em;
               border-color: whitesmoke;
                }




/*MAIN*/

.cbutton{
    height: 50vh;
    width: 100%;
    position: relative;
    
}

.cbutton a{
    
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size:0.8em;
    color: whitesmoke;
    border-style: solid;
    padding: 1em;
    border-color: whitesmoke;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
}


.cbutton a:hover{
    
     
    font-size:0.8em;
    color: #333333;
    border-style: solid;
    padding: 1em;
    background-color: whitesmoke;
}


#principal{
        max-width: 100%;
        height: auto;
        position: center;
     
}

.sobremi{
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 8%;
    padding-bottom: 8%;
    
    
  
    
}

.yo{
    width: 12em;
    height: 12em;
        
}

.historialacademico{
    padding-left: 15%;
    padding-right: 15%;
    padding-top: 8%;
    padding-bottom: 8%;
    border-bottom: 2px;
    background-color: #b5b5b5;
    height: 100vh;
    
}


.portfolio{
    margin-left: 15%;
    margin-right: 15%;
    padding-top: 8%;
    padding-bottom:8%;
    
}



#item1{
    height: 12em;
    width: 12em;
    background-color: black;
    background-image: url(../images/tapa.JPG);
    background-size: cover;
    background-position: center; 
}

#item2{
    height: 12em;
    width: 12em;
    background-color: black;
    background-image: url(../images/tipoplotfinal.jpg);
    background-size: cover;
    background-position: center; 
}
#item3{
    height: 12em;
    width: 12em;
    background-color: black;
    background-image: url(../images/asdada.jpg);
    background-size: cover;
    background-position: center; 

}

.itemPortfolio a figcaption p{
    font-family: 'Open Sans', sans-serif;
    font-size: 0.9em;
}


figcaption{
    background: rgba(0,0,0,0.8);
	display: table;
    height: 100%;
    width: 100%;
	opacity: 0;
	right: 0;
	top: 0;
	z-index: 1;
    padding: 1em;

}

figcaption p{
	display: table-cell;
	vertical-align: middle;
    color: whitesmoke;
    font-size: 1em;
}

figcaption:hover{
	opacity: 1;
}

.uparrow{
    height: 3em;
    width: 3em;
}


/*PIÉ*/

#footer {
        background-color:#333333;
            padding-left: 15%;
            padding-right: 15%;
            padding-top: 3em;
            padding-bottom: 3em;
            }

#footer h6{
        font-family:'Open Sans', sans-serif;
        font-weight: 600;
        font-size: 0.7em;
        color: whitesmoke;
        }

#footer p{
        font-family:'Open Sans', sans-serif;
        font-size: 0.7em;
        color: whitesmoke;
        }




/*****************************FLEXBOX*****************************/


/*MOBILE*/
@media screen and (min-width: 15em){

    
    .masterhead{
    display: block;
    width: 100%;
    height: 35%;
}

    header{
    padding-top: 3em;
    
   
}

h1{padding-bottom: 0.1em;
    padding-top: 1em;}

.dropdown{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    text-align: center;
    margin: auto;
}

.dropdown a{
    margin-top:1em;
}

 .wrap{display: -webkit-box;display: -ms-flexbox;display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    margin: auto;
    width: 12em;
    }

.itemPortfolio{margin-bottom: 1em;}    

}


/*IPAD*/
@media screen and (min-width: 40em){
    
    .dropdown{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
        
}

.dropdown a{
    
    margin-left: 2em;
    margin-top:1em;
}

    .wrap{display: -webkit-box;display: -ms-flexbox;display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: auto;    
    }
    
.itemPortfolio{margin-left: 1em;
    width: 12em;
    height: 12em;
        
    }    
}

/*WEB*/
@media screen and (min-width: 60em){
    
    
}