@charset "utf-8";
/* CSS Document */

body {font-family:'Oswald', Helvetica, Segoe, Arial, sans-serif; font-weight:400; color:#FFF; background:#000; padding:30px;}

h1 {font-size:1.5em; line-height:1.5em; font-weight:700; color:#FFF; text-transform:uppercase;}

h2 {/*font-size:25px; */ line-height:30px; font-weight:700; color:#FFF; text-transform:uppercase;}

h3 {font-size:18px; line-height:25px; font-weight:700; color:#FFF; text-transform:uppercase;}

h4 {font-size:18px; line-height:25px; font-weight:400; color:#FFF;}  

p {font-size:14px; line-height:18px; font-weight:400;}

/* CLASES ESPECIALES */
.clearfix:after {visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0;}
.clearfix {display:inline-table;}
* html .clearfix {height: 1%;}
.clearfix {display:block;}
.contenedor {/*width:960px;*/ padding:0 15px; margin:0 auto;}

/* DIVS GENERALES */
#pagina {width:100%; background-image:url(imagenes/fondo4.jpg);  background-size:100%; border-radius:30px; position:relative; background-repeat:repeat-y}
header {width:100%; height:100px; padding:30px 0; background-color:black; 
border-top-left-radius:30px; border-top-right-radius:30px; position:relative;}

nav {width:100%; padding:30px 0; position:relative;}

section {width:100%; padding-bottom:30px; margin-left: 20%}
footer {width:100%; padding-top:30px;}

/* HEADER */
header .titulos {height:100px; float:left; position:relative; margin-left: 30%}
header .redes {height:30px; padding:35px 0; list-style:none; float:right; position:relative;}
header .redes li {display:inline; width:30px; height:30px; padding:0; border:0; margin:0 0 0 5px;}
header .redes li a {display:inline; width:30px; height:30px; padding:0; margin:0;}
header .redes li a i {font-size:30px;}
header .redes li a:link i, header .redes li a:visited i {color:#FFF;}
header .redes li a.facebook:hover i, header .redes li a.facebook:active i {color:magenta;}
header .redes li a.twitter:hover i, header .redes li a.twitter:active i {color:magenta;}
header .redes li a.linkedin:hover i, header .redes li a.linkedin:active i {color:magenta;}
header .redes li a.youtube:hover i, header .redes li a.youtube:active i {color:magenta;}

/* NAV */
.nav { position: relative; margin-left: 30%}
nav {z-index:10; }
nav ul > li {float:left; margin-right:10px;}
nav ul li a {background:#000; color:#FFF; display:block; border-radius:17.25px; font-size:15px; text-transform:uppercase; line-height:15px; height:15px; padding:10px 30px; text-decoration:none;}
nav ul li a:link, nav ul li a:visited {background:#000; color:#FFF;}
nav ul li a:hover, nav ul li a:active {background:#000; color:#FFEB00;}
nav ul li ul {display:none; padding-top:5px; position:absolute;}
nav ul li:hover > ul {display:block;}
nav ul li ul li {display:block; margin-bottom:5px; float:none; position:relative;}
nav ul li ul li a:link, nav ul li ul li a:visited {background:url(imagenes/submenu_bkg.png) repeat; color:#000;}
nav ul li ul li a:hover, nav ul li ul li a:active {background:#FFEB00; color:#000;}




/* FOOTER */
footer hr {color: #FFEB00; width:950px;}
footer  small {font-family:Helvetica Neue, Segoe UI, Arial, sans-serif; font-size:10px; line-height:11px; font-weight:normal;}
footer img {width: 85px; float:left; margin-right:10px; padding: 5px; }








/* SECTION */

#bienvenido { clear: both; }

section#contenido article {width:283px; padding:15px; margin-right:10px; float:left; position:relative; color:#FFF !important; border-radius:15px;}
section#contenido article:last-child {margin-right:0 !important;}
section#contenido article {background:#000; color:#FFF;}
section#contenido article:hover {background:#FFEB00; color:#000 !important;}
section#contenido article h2, section#contenido article h3, section#contenido article h4 {color:#FFF;}
section#contenido article:hover h2, section#contenido article:hover h3, section#contenido article:hover h4 {color:#000;}
section#contenido article img, video {width:283px !important; margin:15px 0;}



/* Media Queries */



@media all and (min-width: 640px) {
    
h1 {font-size:50px; line-height:50px;}
    
h2 {font-size:20px;}
}

@media all and (min-width: 960px) {
    
h1 {font-size:70px; line-height:70px;}
    
h2 {font-size:25px;}
}