/*** RESETS ***/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { margin: 0; padding: 0; border: 0; font-style: inherit; font-size: 100%; font-family: inherit;}
ul, ol{list-style:none}
/* Remove annoying border on linked images. */
a img{ border: none}
/*saca bordes naranjas en chrome etc*/
*:focus{outline: none}

/*** FIXES ***/
.clfix:after{visibility:hidden; display:block; content:"."; clear:both; height:0} /*clearfix*/
.clfix{display:block}
ol{margin-left:2em} /*Fixes incorrect placement of numbers in ol's in IE6/7*/

/*** GENERALES ***/
body{width:100%; height:100%; background:#8a8a8a; font-size:1em; font-family: 'Roboto', sans-serif; color:#767676}

p{padding-bottom:8px; text-align:left; line-height:1.6em}
a {color:#767676; text-decoration:none; -moz-transition:color 300ms ease; -webkit-transition:color 300ms ease; -o-transition:color 300ms ease; transition:color 300ms ease}
a:hover {color:#333; text-decoration:underline}

h1{ font-size:1.8em; color:#333; font-weight:normal; padding:5px 0}
h2{ font-size:1.5em; color:#d87b2f; font-weight:normal; padding:10px 0}
h3{ font-size:1em; color:#333; font-weight:normal; padding:5px 0}
h4{ font-size:1em; color:#333; font-weight:normal; padding:5px 0}


/* Generales */
.wrapper{width:100%; margin:0 auto; background:#FFF}
.content{max-width:1366px; margin:0 auto; position:relative}
.lista{list-style:inside disc; line-height:1.4em}

/* header */
header{height:600px; background: #CCC}
header .content{margin:0 auto}
.accion{width:100%; position:absolute; top:280px; letter-spacing:4px; z-index:1000; color:#FFF; font-size:1.1em; text-align:center}
.accion h1{font-size:1.2em; color:#FFF; text-align:center; padding:0 20px}
.accion p{text-align:center; padding:0 20px 35px}
.accion a{background:rgba(255,255,255,.3); color:#FFF; padding:10px 30px; letter-spacing:1px; border:1px solid rgba(255,255,255,.8); -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px}
.accion a:hover{background:rgba(255,255,255,.8); color:#d87b2f; text-decoration:none}

.btn-izq{ float:left; position:absolute; left:20px; top:20px; z-index:222}
.btn-izq li, .btn-der li{ display:inline-block}
.btn-izq li a, .btn-der li a{ padding:8px 20px; color:#FFF; margin:5px; background:rgba(255,255,255,.2); display:block; -moz-border-radius: 17px; -webkit-border-radius: 17px; border-radius: 17px}
.btn-izq li a:hover, .btn-der li a:hover{ background:#FFF; color:#d87b2f; text-decoration:none}
.btn-der{ float:right; position:absolute; right:20px; top:20px; z-index:222}

.logo{position: absolute; margin: 60px 0 0 -90px; z-index: 1000; width: 180px; left: 50%}
.slide1, .slide2{ position:absolute; background:url(img/slide_01.jpg) center center; width:100%}
.slide2{background:url(img/slide_02.jpg) center center}

.bg-gray{ background:#EAEAEA}
.bg-orange{ background:#d87b2f}
.bg-orange h1{color:#FFF}

.img-faja{background: url(img/faja.jpg) no-repeat left center; float:right !important; background-size:cover; margin:0 !important; height:380px; width:50% !important}
.cont-faja{width:42% !important; padding:3%; float:right !important; max-width:500px}

.img-faja2{background: url(img/faja.jpg) no-repeat right center; float:left !important; background-size:cover; margin:0 !important; height:380px; width:50% !important}
.cont-faja2{width:43% !important; padding:3%; max-width:500px}

.elclub .img-faja{height:540px}
.galeria a img{width:23.5%; border:3px solid #FFF}
.galeria a img:hover{border-color:#b0afaf}

.inter header{height:100px; background:#888;}
.logo-h{position: absolute; margin: 20px 0 0 0; z-index: 1000; width: 255px; left: 20px}
.inter header .btn-der{top:35px}

/* footer */
footer, .footer{background: #8A8A8A; position:relative; border-top:5px solid #d87b2f}
footer .content{ text-align:left; padding:20px 0 30px; margin:0 auto; color:#CCC}
footer .content a{color:#b0afaf}
footer .content a:hover{color:#FFF}
footer ul li{display:inline; padding-right:10px}
footer .cont-faja{color:#CCC; font-size:.9em}
footer .cont-faja a{color:#FFF}
footer ul, footer p{padding:0 0 20px}

a.firma{position:absolute; color:#222; right:28px; bottom:20px; font-size:.7em}

/* paddings margins - microestilos*/
.pa20{padding:20px} .pa10{padding:10px} .pa5{padding:5px}
.ma20{margin:20px} .ma10{margin:10px} .ma5{margin:5px}
.mostrar{display:block} .ocultar{display:none}
.cl_b{clear:both;} .cl_l{clear:left;} .cl_r{clear:right}
.ta_l{text-align:left} .ta_r{text-align:right} .ta_c{text-align:center}  .ta_j{text-align: justify} 
.fl_r{float:right} .fl_l{float:left}
.rad{-moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px}
.trans, .btn, .galeria a img:hover, input[type=button]:hover, input[type=button], .btn-izq li a, .btn-der li a{-moz-transition:all 300ms ease; -webkit-transition:all 300ms ease; -o-transition:all 300ms ease; transition:all 300ms ease}

.btn{ border:1px solid #d87b2f; background:rgba(255,255,255,.3); color:#d87b2f; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; padding:7px 20px}
.btn:hover{text-decoration:none; background:#d87b2f; color:#FFF}

/* forms */
input, select, textarea{ border:1px solid #FFF; width:90%; background:#F5F5F5; clear:both; margin:0 0 4px; float:left; padding:10px 5px; font-family:inherit; font-size:1em}
input[type=button]{ background:#CCC; padding:6px 8px; cursor:pointer; margin-top:2%}
input[type=button]:hover{background:#333; color:#FFF}
textarea{ height:120px}
select:focus { outline: none}
.dropdown{ clear:both; overflow:hidden; float:left; padding-right:10px}
.dropdown select { width:125%; border: 0 !important; -webkit-appearance: none; -moz-appearance: none; background: url("img/arrow.png") 91% center no-repeat; text-indent: 0.5px; text-overflow:""}
label{float:left; width:100%}
.nota{font-size:.8em; font-style:italic; color:#666; padding:5px; display:inline}


/* columnas */
.section {	clear: both; overflow:hidden;	padding: 0px;	margin: 0px}
.group:before,.group:after {    content:"";    display:table;}
.group:after {    clear:both;}
.group {    zoom:1; /* For IE 6/7 (trigger hasLayout) */}
.col {display: block;float:left;margin: 1% 0 1% 2%}
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */

.span_1 {width: 100%}
.span_2 {width: 49%}
.span_3 {width: 32%}
.span_3_2 {width: 66%}
.span_4 {width: 23.5%}
.span_5 {width: 18.4%}

.col_center{max-width:600px; margin:0 auto; text-align:center; padding:60px 30px}

/* de menos de 1366px*/
@media only screen and (max-width: 1365px) {
	.content{width:1200px}
}

/* de menos de 1280px*/
@media only screen and (max-width: 1279px) {
	.content{width:960px}
}

/* de menos de 1024px*/
@media only screen and (max-width: 1023px) {
	.content{width:730px}
	body{font-size:1em}
	
	.btn-izq li a, .btn-der li a{ padding:8px 15px; font-size:.9em}
	.logo-h{width:130px; margin: 10px 0px 0px -62px; left:50%}
	
	.bg-orange h1{ text-align:center}
	.img-faja, .cont-faja, .img-faja2, .cont-faja2{width:84% !important; padding:8%}
	.img-faja2, .inter .img-faja{height:150px}
	.cont-faja2, .inter .cont-faja{text-align:center}
	.cont-faja, .cont-faja2{ max-width:100% !important; padding: 3% 8% 7%}
}

/* de menos de 768px*/
@media only screen and (max-width: 767px) {
	.content{width:450px}
	body{font-size:.85em}
	.span_4{ width:49%; margin-left:0}
	.span_4:nth-child(2n+2){margin: 1% 0 1% 2%}
	
	.logo{ width:120px; margin:120px 0px 0px -55px;}
	.accion{ top:180px}
	.accion h1 {font-size: 1.1em; padding:10px 0}
	header{ height:470px}
	footer ul, footer p{ text-align:center}
	input, select, textarea{ width:95%}
	.span_1, .span_2, .span_3, .span_3_2, .span_4, .span_5{ width:100%; margin:1% 0 !important}
	.galeria a img{width:98%}
	.telef{ padding:0 0 20px 0}
}


/* de menos de 480px, minimo 320px*/
@media only screen and (max-width: 479px) {
	.content{width:300px; min-width:300px} 
	
	.btn-izq, .btn-der{ width:88%; text-align:center}
	.btn-izq li a, .btn-der li a{padding: 7px 12px}
	.btn-der{width:100% !important; top:50px !important; right:0; text-align:center}
	.btn-izq{margin-bottom:5px}
	.btn-der{ top:60px}
	.accion{letter-spacing:1px}
	.logo{margin:165px 0px 0px -55px}
	.accion{ top:245px}
	header{ height:540px}
	.inter header {height: 140px}