@chaset "utf-8";
*{  padding: 0;
    margin: 12;}
@import url(https://fonts.googleapis.com/css?family=Lobster+Two:400,700)
    
*{box-sizing: border-box}

h1 {font-family: 'Lobster Two', cursive;
    font-size: 1.1em;
    font-family:"Lobster", "Arial", sans-serif;
    text-align: center;}
h2{
    font-size: 1em;
    letter-spacing: 3px;
    text-align: center;}
h3{
    font-size: 1.2em;
    margin-bottom: 1em;}
h4{
 font-size: 1em;}

body {
    font-family: "Arial", sans-serif;
    color: black;
    background-image: url(imagenes/fondo.png);
    background-repeat:round;
    background-position: center;
    background-size: auto;}}

header {
    background-color: lavenderblush;
    }
li{list-style: none;}

ul{list-style: none;}

#header{
    width: 100%;
    margin: auto;
}

.nav > li{
    float:left;
}

main {
    margin-top: 10px;
    background-color: floralwhite;
    padding: 0.5em;
}

footer {
    background-color: thistle;
    overflow: hidden;
    clear: both;
    padding: 1em;
    text-align: center;}

.nav li a{
    background-color: lavender;
    color: purple;
    text-decoration: none;
    padding: 10px 12px;
    display: block;
}

 .nav li a:hover {
     background-color: floralwhite;
     color: brown;
     -webkit-transition-duration: 0.4s;
     transition-duration: 0.4s;}
			
.nav li ul {
				display:none;
				position:absolute;
				min-width:140px;
}
			
.nav li:hover > ul {
				display:block;}
			
.nav li ul li {
position:relative;
}

.nav li ul li ul {
				right:-183px;
				top:4px;
}

nav ul li a{
    color: lavender;
    border-bottom-style:groove;
    border-color: lavender;
    background-blend-mode: color-burn;
    width: 100%;
    display: inline-block;
    text-decoration: none;
   
} 
nav ul li a:hover{
    color: darkslateblue;
    background-color: snow;
   
}
nav ul li{
     display: inline-block;
    
}
.cajaizq{
    float: left;
    margin-right: 1em;
    padding: 0.5em;
width: 30%;
}

#sofi img{
        height: 20em;
        border-radius: 30em;}

.contenedor{
    width: 100%;
    max-width: 80em;
    margin: auto;
    overflow: hidden;}

.fondo{
background-image: url(imagenes/fondo.png);
background-repeat: no-repeat;
background-position: center;
background-size: cover;}

.arriba{
    overflow: hidden;
    margin-bottom: 1em;
    width: 100%;}

.dgpc{float: left;}

.textoarriba{
    padding: 0.5rem;
    margin: 1rem;
    text-align: center;
    float: left;}

.uba{float: left;}

.barra{
    border: solid thin white;
    border-radius: 4px;
    padding-bottom: 0.2em;
    margin-right: 1.3em;
    width: 30%;
    text-align: center;
    float: right;
    margin-bottom: 0.1em;
    transition: all 0.5s;
    cursor: pointer;
    display: inline-block;
    padding-top: 0.2em;}

.barra ul li a{
    font-size: 0.8em;}

.descripcion{
    text-align: left;
    float: right;
    margin-bottom: 0.1em;
    padding: 1em;}

.medio{
    text-align: left;
    float: left;
    margin-bottom: 1em;
    padding: 0.5em;
    margin-top: 15em;
    margin-left: 3em;
    margin-right: 3em;
    width:25%;}

.derecha {
    background-color: lavender;
    float: left;
    margin-top: 15em;
    width: 25%;
    padding: 0.5em;}

/*/////responsive/////*/
@media screen and (min-width:480px) {
    header{
        background-color: lavenderblush;
        border-bottom-color: lavenderblush;
    }
         main {
    background-color: floralwhite;
    }
    footer {
    background-color: thistle;
    }
    aside {
    background-color: lavender;
    }
    nav ul li{
    display: inline-block;
    width: 24.65%;
    }
}
@media screen and (min-width:768px) {
    header{
        background-color: lavenderblush;
        border-bottom-color: lavenderblush;
    }    
    main{
        background-color: floralwhite;
        width: 75%;
        float: left;
    }
    .derecha {
    background-color: lavender;
    width: 25%;
    float: left;
    }
    nav ul li{
        text-align: center;
        width: 24.65%;
    }