*{margin: 0; padding:0;}

@font-face {font-family:"trade"; src:url ("fuentes/trade.ttf"), url("fuentes/trade.eot"), url("fuentes/trade.otf");}
@font-face {font-family:"gill"; src: url("fuentes/gill2.ttf"), url("fuentes/gill.eot"), url("fuentes/gill.otf");}
@font-face {font-family:"chalet"; src: url("fuentes/chalet.ttf"), url("fuentes/chalet.eot"), url("fuentes/chalet.otf");}
@font-face {font-family:"century"; src: url("fuentes/century.ttf"), url("fuentes/century.eot"), url("fuentes/century.otf");}
@font-face {font-family:"AGENCYR"; src: url("fuentes/AGENCYR.ttf"), url("fuentes/AGENCYR.eot"), url("fuentes/AGENCYR.otf");}

@font-face {font-family:"trade"; src: url("fuentes/trade.ttf"), url("fuentes/trade.eot"), url("fuentes/trade.otf");}

{font-size:16px}


.foo  {widht:10%;padding:1%;margin-left:7.8%;margin-top:1%; position: relative;font-family:"trade";height:70%;width: 25%;}

.col-1 {position: absolute;}
.col-3 {widht:10%;padding:1%; position: relative;width:20%;height:23%;margin-left:61%;margin-top:-47.9%; font-family: "trade";font-size:0.9rem;font-weight: 100;}

.curso {font-size:1rem;line-height:normal; background: #000000;color: #ffffff;padding-top:11px;padding-bottom: 11px; text-align:center;}

.col-2 {widht:10%;padding:1%; position: relative;width:20%;height:23%;margin-left:37%;margin-top:2%; font-family:"trade";font-size:0.9rem;font-weight: 100;}

.h4 {font-size:1rem;line-height:normal; background: #000000;color: #ffffff;padding-top:11px;padding-bottom: 11px; text-align:center;font-family: "trade"; font-weight: 200;}

.boton { 
    width: 20%;
    height: 6%;
    background: #000000;
    color: #ffffff;
    font-family: "trade";
    font-size: 1rem;
    font-weight: 400;
    margin-left: 37%;
    margin-top: 40.7%;
    padding: 1%;
}


.hobbies {font-size:1rem;line-height:normal; background: #000000;color: #ffffff;padding-top:11px;padding-bottom: 11px; text-align:center;font-family: "trade"; font-weight: 200;}
.materias {font-size:1rem;line-height:normal; background: #000000;color: #ffffff;padding-top:11px;padding-bottom: 11px; text-align:center;}

.contenedor { max-height: 960px; margin: 0 auto 0 auto;}

header { widht:100%; min-height: 200px;background:#ffffff;}

section { widht:100%; background: #999999;height: 20%;}

section article { width:36%;height:20%; min-height:200px;background: #f3f3f3;}

.footer {font-family: "trade"; font-size: 1rem; font-weight: 200; text-align: center;padding: 2%;}

.nombre {
    overflow: auto;
    padding:3%;
    border:1px solid #000000;margin-top:-39%;margin-left:-62%; position: absolute;width:91%;height:74%;
}
.ancho1 {widht:10%;padding:1%;margin-left:37%;margin-top:-57.2%; position: relative;width:20%;height: 42%;font-family: "trade";font-size:0.9rem;font-weight: 100;}

.ancho2 {padding:1%;widht:40%; margin-left:44.8%;position: relative; }


.meli{width:36%;margin-left:40%;}
.nav {
    height: 63%;
    width: 32%;
    border: 1px solid #000;
    margin-top:5%;
}


.nav2 {
    height: 63%;
    width: 32%;
    border: 1px solid #000;
    margin-top:9%;
}
.ul {font-family: "trade";
    background-color: #000000;color: #ffffff;
    text-align: center;
    height:22%; width:86%;text-align: center;
    padding:3%;
    font-size:1rem;
    position: relative;
    margin-left: 29px;
    text-transform: uppercase;
    margin-top: 33%;
    cursor: pointer;
}

.cuadrado-verde {
    clear: both;
    overflow: auto;
    padding:5%;
    border:1px solid #000000;
}

section a:hover {list-style-type: none; text-decoration: none; background: #ffffff; color: black;}
.cuadrado_negro {margin-right:8%;
    height:16%;
    width: 9%;
    border: 1px solid #000;
    float:right;
    margin-left:1.2%;
}
.cuadrado_con_texto {font-family: "trade";
    background-color: #000000;color: #ffffff;
    line-height:140%;
    height:22%; width:150%;text-align: center;
    padding:1%;
    font-size:1rem;
    position: relative;
    margin-left: 29px;
    text-transform: uppercase;
    margin-top: 33%;
    cursor: pointer;
}


.vn23der
{width:18%; font-family:"trade"; font-size:6rem;font-weight:700;position: relative; float: right;padding-left:1%;border: 2px solid#000000;text-align: center;margin-left: 2%;}

.vn23izq
{font-family:"trade"; font-size:6rem;font-weight:700;position: relative; float:left;width:20%;padding-top:1%;margin-left: 2%;background:#000000;color: #ffffff;text-align: center;}



.aside
{width:12%;height:14%;  margin-top:6%;background:#f3f3f3;  position: relative;
   float: right;margin-right:17%;}
#footer{
    width: 66%;
    position: absolute;
    margin-top:7px;
    right: 0;
    height: 0px;
}
.red_abajo {
    position: relative;
   float: right;margin-right:11%;margin-top:1%;
}
.social {
    width: 40px;
    height: 40px;
    display: inline-block;
    margin-right: 0;
    position: relative;
}
.ic {
    position: absolute;
    width: 31px;
    height: 31px;
    background: #231f20;
    transform: rotate(45deg);
    transform-origin: 50% 50%;
    -ms-transform: rotate(45deg);
    -ms-transform-origin: 50% 50%;
    -webkit-transform: rotate(45deg);
    -webkit-transform-origin: 50% 50%;
    transition: 0.45s;
    -webkit-transition: 0.45s;
    -moz-transition: 0.45s;
    left: 6px;
    top: 8px;
}
@media screen and (max-width:1690px)
{.ancho1 {margin-top:-48.9%;}  .col-3{margin-top:-39.9%;}
    
    
    @media screen and (min-height:900px){.boton{margin-top: 31.5%;} } 



@media screen and (max-width:1366px)
{
.ancho1 {margin-top:-61.6%;}     .col-3{margin-top:-47.9%;}   }




@media screen and (max-width:960px)
{ section {max-height: 50%; max-width: 50%;}
        
        .col-2 {width:43%;height:23%;margin-left:38%;
        margin-top:2.5%;}
.col-3 {height:23%;margin-left:60.8%;margin-top:-85.7%;}
        
  .ancho1 {widht:10%;padding:1%;margin-left:38%;margin-top:-85.8%; position: relative;width:20%;height: 47%;font-family: "trade";font-size:0.9rem;font-weight: 100;}      
   .foo  {width:27%;
        margin-left:7.8%;
        margin-top:2%;height:74%; 
        } 
        .aside {width:22%;height:12%;margin-top:-38.5%;margin-right:17%;}
        .red_abajo {
    position: relative;
   float: right;margin-right:16%;margin-top:1%;
} 
    .footer{font-size: 0.8rem;width:93%;}
    
    .cuadrado_con_texto {font-family: "trade";
    background-color: #000000;color: #ffffff;
    line-height:100%;
    height:20%; width:157%;text-align: center;
    padding:11%;
    font-size:0.8rem;
    position: relative;
    margin-left:1px;
    text-transform: uppercase;
    margin-top:26%;
    cursor: pointer;
}
    
    
    }
@media screen and (max-width:1280px)
{ section {min-height: 100%;}


@media screen and (max-width:800px)
{ aside {width:20%;height:12%;margin-top:-37%;margin-right:17%;}
    .foo  {width:40%;
        margin-left:3.8%;
        margin-top:1%; 
        }

.col-2 {height:23%;margin-left:48.3%;margin-top:4%;}

.col-3 {display:none;}
 .hobbies {display:none;}   
    .cuadrado_negro {margin-right:20%;
    height:9%;
    width:12%;
    border: 1px solid #000;
    float:left;
    margin-top:9%;padding: 20px;

    
    }
    .nombre {
    overflow: auto;
    padding:3%;
    border:1px solid #000000;
    margin-top:-66%;margin-left:-117%; position: absolute;width:145%;height:77%;
}
    .ancho2 {margin-top: 10%; margin-left:47%;}
    .ancho1 { margin-top:-97.3%; margin-left:48.5%;}
    

.meli{width:61%;margin-left:111px;
    margin-top: 8px;}
.nav {
    height:61%;
    width: 76%;
    border: 1px solid #000;
    margin-top:9%;
}


.nav2 {
    height: 56%;
    width:88%;
    border: 1px solid #000;
    margin-top:9%;margin-left: 51px;
}
.ul {font-family: "trade";
    background-color: #000000;color: #ffffff;
    text-align: center;
    height:15%; width:61%;
    text-align: center;
    padding:4%;
    font-size:1rem;
    position: relative;
    margin-left: 26px;
    text-transform: uppercase;
    margin-top: 27%;
    cursor: pointer;
}
    .cuadrado-verde {
    
    padding:2%;
    border:1px solid #000000;width:98%;
}


.cuadrado_con_texto {font-family: "trade";
    background-color: #000000;color: #ffffff;
    line-height:32%;
    height:22%; width:250%;text-align: center;
    padding:32%;
    font-size:0.8rem;
    position: relative;
    margin-left:2px;
    text-transform: uppercase;
    margin-top: 0%;
    cursor: pointer;
}


.vn23der
{width:40%; font-family:"trade"; font-size:5rem;font-weight:700;position: relative; float: right;padding-left:1%;border: 2px solid#000000;text-align: center;margin-left:0%;}

.vn23izq
{font-family:"trade"; font-size:1rem;font-weight:700;position: relative; float:left;width:40%;padding-top:1%;margin-left: 6%;background:#000000;color: #ffffff;text-align: center;}

   

}