body {padding-top:50px; background: url(../img/fondo.jpg) no-repeat center top fixed; font-family: 'Roboto', sans-serif; }
a img {border:0}
ul,li  {margin:0; padding:0; list-style: none;}
.container {max-width:960px; margin: 0 auto; position:relative;}/*usar max-width en sitios resonsible*/
.clear {clear:both}
/* header */
header{position: relative;}
h1{background: url(../img/marca.png); width:315px; height:34px;}/*sin alto no se ve*/
h1 span{display:none;} /*ocultar el texto*/
h2 { font-size: 18px; text-align: center; font-family: 'Cousine', sans-serif; font-weight:normal;}
p {font-size:16px; color:#000; }


/*botones*/
nav {text-align:center; position:absolute; width:100%; bottom:-65px}
nav li {display:inline-block; height:138px; width:138px; border-radius: 50%;-webkit-box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.5); box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, 0.5); -moz-transform: rotate(360deg); -webkit-transform:  rotate(360deg) ; -o-transform:  rotate(360deg) ; -ms-transform:rotate(360deg) ; transform:  rotate(360deg) ; }
nav a {display:block; background:#666; height:90px; width:130px; border-radius: 50%; font-family: 'cousine'; font-size: 20px; color:#fff; text-decoration: none; vertical-align: top; padding-top: 40px; border: 4px #fff outset;-webkit-transition: all 1s linear; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1s linear; transition: all 1s linear;}
.quienes{background: red}
.ultima{background: purple}
.proxima{background: blue}
.sumate{background: green}
nav a:hover {-moz-transform: rotate(360deg) ;
          -webkit-transform: rotate(360deg) ;
          -o-transform:  rotate(360deg) ;
          -ms-transform: rotate(360deg) ;
          transform:  rotate(360deg) ; }
		  
		  
/*section*/
section {margin-top: 90px; min-height:250px;}
.video-a {float:left; width: 49%;} /* si se pone al 100% ocupa todo el ancho del div q lo contiene*/
.video-b {float: right; width: 49%;}
.epigrafe  {font-size:16px; color:#000; background:url(../img/video_icon.png) no-repeat; height: 24px; padding-left: 27px;}
.epigrafe span {font-size:20px; color: red;}

/* aside */
aside ul{font-size: 0;} /* se pone font-size:0 para quitarle el espacio entre las li*/
aside li {width:16%; height:100px; display:inline-block; margin-right:0.8%; text-align: center;} /*tambien se puede poner float y un clear debajo*/
aside li:last-child {margin-right:0;} /*ultimo elemento*/
aside li a {font-size: 12px; text-decoration:none; color: #000; }

.colizquierda {float:left; width: 49%;}
.colderecha {float: right; width: 49%;}

table { width:100%; border: 1px solid #bab8b8; border-collapse: collapse;}
td {background:#fff; padding:3px; border: 1px solid #bab8b8; }
th {background:#ccc;border: 1px solid #bab8b8; }


/* footer */
footer {text-align: center; border-top: 2px dotted #006600; margin-top: 30px; padding-top: 20px;}
footer img { width: 181px; height: 59px;}
.facebook {background: url(../img/facebook.png) no-repeat center top; width: 27px; height:28px; display: inline-block;}
.facebook:hover {background: url(../img/facebook.png) no-repeat center bottom; }
.redes {position: absolute; top: 0; right:0;}
.redes span {display:none;}
.youtube {background: url(../img/youtube.png) no-repeat center top; width:70px; height: 29px; display: inline-block;}
.youtube:hover  {background: url(../img/youtube.png) no-repeat center bottom;}


img {width:100%; height:auto;}

.contenido  {background: url(../img/contenido.png) no-repeat center bottom; width:32px; height:32px; display:inline-block; float:right; margin-top: -40px;}
.contenido span {display:none;}

/* media */
@media screen and (max-width: 668px){
nav {bottom:-50px}
nav a {height:73px; width:98px; padding-top:25px; font-size:14px;}
nav li {height:105px; width:105px}
section {margin-top: 70px;}
.colizquierda, .colderecha  {float:none; margin: 20px auto; width: 80%;}
.textos { -webkit-column-count: 2; -webkit-column-gap:20px; -webkit-column-rule: 1px solid #000;
		-moz-column-count: 2; -moz-column-gap:20px; -moz-column-rule: 1px solid #000;}
}
@media screen and (max-width: 560px){
aside {display:none;}
.redes {position: static; margin: 30px auto; width:115px;} /*para centrar con margin:0 auto; se necesita tener un ancho- por ser de bloque y ocupar el 100%*/ 
footer { display: none;}
h1{background: url(../img/marca_320.png); width:144px; height:47px; margin: 0 auto 25px auto;}/*sin alto no se ve*/
h2 {font-size: 16px; padding: 10px 20%;}
.video-a,.video-b {float:none; margin: 0 auto; width: 80%;}

.epigrafe  {font-size:14px; display: inline-block;  margin: 15px auto 20px auto} /* display:inline-block para centrar los epigrafes, poniendo text:aling:center al elemento contenedor, en este caso article*/
article {text-align: center;}
.epigrafe span {font-size:16px;}

}

@media screen and (max-width: 480px){
header img {display:none}
body {background: none;}
nav { position:static; width:100%; margin: 0 auto;}
section {margin-top:30px;}
nav span{display:block;}
.textos { -webkit-column-count: 2!important; -webkit-column-gap:20px!important; -webkit-column-rule: 1px solid #000!important;
		-moz-column-count: 2!important; -moz-column-gap:20px!important; -moz-column-rule: 1px solid #000!important;}
}

/*paginas interiores*/
#interior h2 {font-size:25px;}
.textos p:first-child {margin:0} /*primer elemento*/
.textos p {font-size:14px;}
.textos { -webkit-column-count: 3; -webkit-column-gap:20px; -webkit-column-rule: 1px solid #000;
		-moz-column-count: 3; -moz-column-gap:20px; -moz-column-rule: 1px solid red;}
.tit{color:red; text-align:left;}

.galeria ul{font-size: 0;} /* se pone font-size:0 para quitarle el espacio entre las li*/
.galeria li {width:16%; height:100px; display:inline-block; margin-right:0.8%; text-align: center;} /*tambien se puede poner float y un clear debajo*/
.galeria  li:last-child {margin-right:0;} /*ultimo elemento*/

/*formulario*/

.formulario {width:47%; margin:0 auto}
textarea{width:100%}
.campos {height:25px; width:100%}

.boton {background:#CCC; width:130px; height:45px; border:1px solid #FFF; font-size:20px; color:#333}
.boton:hover {background:red; color:#FFF; -webkit-transition: background 1s ease; -moz-transition: background 1s ease;-ms-transition: background 1s ease; -o-transition: background 1s ease; transition: background 1s ease;}

iframe {max-width:100%; width:470px; height: 264px;}