@charset "utf-8";

@import url(https://fonts.googleapis.com/css?family=Varela);
* { font-family: varela; } 
* { margin: 0 ; padding: 0 ; } 
* { box-sizing: border-box }
body { background:#1BE7DC; }

img {
    
    border-radius:50%;
    margin-right: 20px;
    margin-bottom: 20px;
    float: left;
    max-width: 30%;
    
 
   

}
.menu_bar {
    display: none;
}

header, .main, footer {
        
        width:90%; 
        margin:auto; 
        max-width:1000px;}

header nav { 
    background:#024959;
    overflow: hidden;} 

header nav ul { 
    list-style: none;}

header nav ul li {
    float: left; }

header nav ul li a {
    padding: 10px 20px;
    display: block;
    text-decoration: none;
    color:white;
}

header nav ul li span {
    margin-right: 10px; }

header nav ul li a:hover {
    background:#037E8C; }

.main .presentacion { 
    width:68%;
    float: left;
    margin-right:2%;
    padding-bottom:15px;
   
}
    


.main .presentacion article {
    padding:20px;
    margin-bottom:20px;
  
    background:#39C0BA;
    overflow: hidden;
    
}

.main .presentacion .avatar {
   
    margin-bottom:20px;
    }


.portfolio {
    padding:20px;
    margin-bottom:20px;
    background:#39C0BA; 
    
}

.cronicas {
    padding:20px;
    margin-bottom:20px;
    background:#39C0BA; 
    
}

.solicitud {
    padding:20px;
    margin-bottom:20px;
    background:#39C0BA; 
    
}

aside {
    
    width:30%;
    background:#024959;
    float: left;
    padding:20px;
    box-sizing: border-box;
    font-size: 12px;
    color:#1BE7DC;

}

footer {

    background:#024959;
    clear:both;
    padding:10px 0px;
    text-align: center;
    color:#1BE7DC;
    

}

@media screen and (max-width:800px){
    header nav {
        width: 70%;
        height: 100%;
        left: -100%;
        margin: 0;
        position: fixed;
     }
    
    header nav ul li {
        display: block;
        float: none;
        border-bottom:1px solid rgba(255,255,255, .3);
    }
        
    .menu_bar {
        display: block;
        width: 100%;
        background:#CCC;
    }
    
    .menu_bar .bt_menu {
        display: block;
        padding: 20px;
        background:#024959;
        color:#fff;
        text-decoration: none;
        font-weight: bold;
        font-size:25px; 
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing: border-box;
    
    }
    
    .menu_bar span {
        float: right;
        font-size:40px;
    
    
    }


    
}

@media screen and (max-width:550px){
    
    .main .presentacion { 
    width:90%;
    float: left;
    margin-right:2%;
    padding-bottom:15px;
   
}
    
    aside {
        width: 100%;
        color:white;
    }
    
    footer {
        width: 80%;
        background:black;
        margin: auto;
        padding: 15px;
        font-size: 0.8em;
        
    }




}