/* reglas generales*/
@media screen and (min-width:20em); 
*{
font-family: sans-serif;
    max-width:300px;
    max-height: 480px;
}

body {background-color:#333333; 
background-image:url(../img/fondo.jpg);
background-repeat: no-repeat;
background-size: auto;
justify-content: center;
} 

.fondo{
background-image: url(../img/body-01.jpg);
background-repeat: no-repeat;
background-size: auto;
justify-content: center; 
max-width: 100%;
}



.notif{
    position: absolute;
    height: 3em;
    width: 3em;
    top:0;
    margin-left: 14em;
}
.libreria{
    position: absolute;
    height: 3em;
    width: 15em;
    top:0;
}
.libreria img{
    width: 12em;
    margin-top: 0.5em;
}
.avis{
    position: absolute;
    background-color: red;
    color: white;
    height: 1.4em;
    text-align: center;
    padding-top: 0.4em;
    width: 1.6em;
    top:0;
    margin-left: 15.4em;
border-radius: 50%;
overflow: hidden;
}




/* index*/

.fondo{
display: flex   
}

.inicio{
display: block

}
.inico figure img{
margin-top: 7em;
    
}

.item{
display: block;
background-color:white;   
border-bottom-style:outset;
color: #000000;
margin: 0em 3em 1em 3em;  
justify-content: center;
text-align: center;
padding-bottom: 1em;
padding-top: 1em;
   
font-family:sans-serif;
    box-shadow: 0 0 0.5em  black;
}

.boton{
    justify-content: center;
    text-align: center;
    text-decoration: none;
    color: black;
    padding-right: 4em;
    font-size: 16px;
}

.item:hover{
    background-color: #333333;
    color:white;
}
/*menu*/
.uno{
    display: flex;
    flex-direction: row;
}

.contenedor{
    display: flex;
flex-direction: column;
    align-content: space-between;
}


.op{
display: flex;
flex-direction: row;
    width: 7em;
    height: 11em;
}

.uno img{
width: 5em;
top: 0;}


.item1{
display: block;
margin-top: 3em;
margin-left: 0.2em;
padding-bottom: 1em;
padding-top: 1em;
font-family:sans-serif;
box-shadow: 0 0 2px  black;
background-color:#1a7676;   
    box-sizing: content-box;
        width: 8em;
    height: 9em;
    margin-right: 1em;

}

.item2{
    margin-top: 3em;

margin-bottom: -2em;
margin-right: 0em;
margin-left: 0em;
padding-bottom: 1em;
padding-top: 1em;
font-family:sans-serif;
box-shadow: 0 0 2px  black;
background-color:white; 
    box-sizing: content-box;
width: 8em;
    height: 9em;
}

.itemdos{
    margin-top: -1em;

margin-bottom: 0em;
margin-right: 1em;
margin-left: 0.2em;
padding-bottom: 1em;
padding-top: 1em;
font-family:sans-serif;
box-shadow: 0 0 2px  black;
background-color:white; 
    box-sizing: content-box;
width: 8em;
    height: 9em;
}


.item4{
    margin-top: -1em;
margin-bottom: 0.5em;
    box-sizing: content-box;
margin-right: 0em;
margin-left: 0em;
padding-bottom: 1em;
padding-top: 1em;
font-family:sans-serif;
box-shadow: 0 0 2px  black;
background-color:#1a7676; 
            width: 8em;
    height: 9em;
}

.boton2{
    text-align: center;
    text-decoration: none;
    color: #000000;
    padding-right: 2em;
    font-size: 16px;
    width: 100%;
    margin: 0 1px 0 1px;
    
}
 .item2:hover{
    box-sizing: content-box;
     background-color:#333333;   
    color: white;
}
 .itemdos:hover{
    box-sizing: content-box;
     background-color:#333333;   
    color: white;
}
 .item4:hover{
    box-sizing: content-box;
     background-color:#333333;   
    color: white;
}
 .item1:hover{
    box-sizing: content-box;
     background-color:#333333;   
    color: white;
}
/*comentarios*/

.item5{
margin-top: 4em;
margin-bottom: -1em;
margin-right: 0em;
margin-left: -0.5em;
padding-bottom: 1em;
text-align: center;
padding-top: 1em;
font-family:sans-serif;
box-shadow: 0 0 2px  black;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
background-color:#333333;   
color: white
}

.com{
border-bottom: dotted 2px beige;
max-width: 21em;
display: flex;
flex-direction: row;
}

article p{
font-size: 8pt;
max-width: 21em;
color:beige
}

article{
margin-top: 3em; 
margin-bottom: 0%;
}

article .item3{
margin-left: -2em; 
margin-bottom: -3em;
margin-top: 1em;
}

article .com .item3 figure img{
margin-top: -0.5em;
margin-bottom: 3em;
}

/*perfil*/
.perfil{
display: flex;
}

.item3{
display: block;
margin-left: 0em;
margin-top: 2em;
}

.item3 img{
max-width: 100%;
height: auto;
}

h1{
color:beige;
margin-left: -1em;
margin-top: 2em;
}

h3{
background-color: white;
color:#333333;
margin-top: 4em;
margin-bottom: 0em;
margin-right: 0em;
margin-left: -0.5em;
padding: 0.5em;
font-size: 1em;
 width: 100%;
}

.item3 figure img{
border-radius: 50%;
overflow: hidden;
max-width: 50vw;
margin: 1em auto;
box-shadow: 0 0.35em 0.5em 0;
margin-left: 0em;
}

section ul li{
font-size: 11pt;
color:white;
}

/* transito*/
.item6{
margin-top: 4em;
margin-bottom: -3em;
margin-right: 0em;
margin-left: -0.5em;
padding-bottom: 1em;
text-align: center;
padding-top: 1em;
font-family:sans-serif;
box-shadow: 0 0 2px  black;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
background-color:#333333;   
color: white
}

main .item2{
margin-top: 3.5em;
margin-bottom: -2em;
}

main .item3{
margin-bottom: -4em;
}

main .item3 h1{
margin-top: 1.8em;
}

/*proceso*/
.proceso{
    
}

.proceso figure {
margin-top: 3em;
overflow: hidden;
width: 100%;
margin-left: 1.5em;
}