*{margin: 0; padding: 0}

body {font-family: 'Roboto', sans-serif, Arial; background: #fff; max-width: 960px; margin: 0 auto 0 auto}

/* Header */

.logovilo {position: relative; float: left; width: 25%;}
.menubanner {background-image: url(imagenes/backheader.jpg); position: relative; float: right; width: 75%;}
header {width: 100%}

header nav { width: 100%; height: 120px ; padding-left: 10%}
header nav ul {list-style-type: none; padding-top: 9%}
header nav ul li {display: inline; padding-left: 5px;}
header nav ul li a {text-decoration: none;}
.menupills { background-color: #ccffff; color: #ff3333; font-size: 11px; padding: 2%; border-radius: 10px}
.iconredes {margin-bottom: -1%}

a.menupills:hover {background-color: #ffcccc;}
a.menupills:active {background-color:  #ffcccc;}


/* Section */

section {width: 75%; min-height: 800px; background: #fff; position: relative; float: right}
.bordesredondeados {border-radius: 5px}

/* Article 1 - Banner */

.banner {margin-left: 10%; margin-top: 3%; position: relative; float: left; width: 100%}
.buttonbanner {position: absolute; top: 84%; left: 11%; border-radius: 5px} 


/* Article 2 - Informate */

.informate {position: relative; float: left; width: 47%;  margin-left: 10%; margin-top: 20px;}
.linea {border-color: #ff3333; border-style: solid;}
.tituloshome {font-family: 'Roboto Slab', serif; font-weight: 700; margin-bottom: 10px; color:  #ff3333}
.iconmas {position: absolute; top: 0px; right: 0px}
.texto {font-size: 9px; color: #666666}
.titnoticias {font-family: 'Roboto Slab', serif; color: #666666; font-size: 21px; font-weight: 700; line-height: 21px; margin-bottom: 8px}
.titnoticias2 {font-family: 'Roboto Slab', serif; color: #666666; font-size: 15px; font-weight: 700; line-height: 21px}
.xleft {position: relative; float: left; width: 52%}
.margin5 {margin-top: 5%}
.margin10 {margin-top: 10%}

/* Article 3 - Pone Play */

.poneplay {width: 28%; position: relative; float: left; margin-top: 20px; margin-left: 3%}
.iconplay {position: absolute; top: 44%; left: 36%}


/* Article 4 - Galeria de Imagenes */

.galeria {position: relative; float: left; width: 78%;  margin-left: 10%; margin-top: 20px;}
.flechaleft { margin-bottom: 8%; margin-right: 1%;}
.flecharight {margin-bottom: 8%; margin-left: 1%}
.margingaleria {margin-top: 4%}


/* Aside */

aside {width: 25%; min-height: 300px; position: relative; float: left}
.chat {margin-left: 10%; margin-top: 12%}
.buttonregistry {position: absolute; top: 80%; right: 15%}
.tituloaside {font-family: 'Roboto Slab', serif; font-weight: 700; margin-bottom: 10px; color:  #ff3333; font-size: 12px}
.artleft {position: relative; float: left; width: 100%}
.comenta {width: 90%; margin-left: 10%}
.circulo {border-radius: 40px}
.titulochat {font-size: 15px; color: black}
.yleft {position: relative; float: left; width: 40%; height: 80px}
.yright {position: relative; float: right;   width: 60%; height: 76px; margin-top: 4%}
.iconmasaside {position: absolute; top: -5px; right: 0px}

/* Footer */

footer {width: 100% ; height: 30px; background-image: url(imagenes/backfooter.jpg)}
.separador {clear: both}
.piepagina {font-size: 10px; color: #fff; text-align: left; font-family: 'Roboto'; text-decoration: none; margin-left: 30px; font-weight: 400}