/* reset browser styles */

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
 padding: 0;
 margin: 0;
 font-size: 100%;
 font-weight: normal;
}

ol { margin-left: 1.4em; list-style: decimal;}
ul { margin-left: 1.4em; list-style:square;}
img {border: 0;}
input[type="text"], input[type="password"], input[type="email"], textarea, select { outline: none;}
/* end reset browser styles */



body {
	font-family: 'Open Sans', sans-serif;
	font-size:14px;
	margin: 0; 
	padding: 0;
	text-align: left; 
	color: #4D4D4D;
	background:#EAEDF2;
	}
.clear { clear:both}	
header { margin:2% 0; background:#000; position:relative; font-family: 'Merriweather Sans', sans-serif;}
.wrap { max-width:1150px; margin:0 auto; position:relative}
header h2 {font-family: 'Merriweather Sans', sans-serif; font-size:23px; color:#fff}
header h1 {font-family: 'Merriweather Sans', sans-serif; font-size:40px; color:#fff}
header img { position:absolute; top:-10%; left:0}
header .cont { float:left; text-align:left; display:table-cell; vertical-align:middle; padding:2% 0; margin-left:15%}

.main { margin:5% 0 0}

.col1 { width:24%; float:left;}
.col2 { width:35%; float:left; margin-left:3%}
.col3 { width:35%; float:right; margin-left:3%}

.personas { background:#EC1B2E; text-align:center; padding:1% }
.personas img { margin:3% 0}
.personas h3 { color:#fff; font-size:17px; margin:3% 0; line-height:20px}
.personasnum { background:#fff; text-align:center; font-weight:700; font-size:47px; padding:3% 0 }

.mod {background:#fff; text-align:center; position:relative; padding:8% 5%; margin:13% 0}

.mod1 { background:#fff; text-align:center; position:relative; padding:5% 0; margin-bottom:9%}
.mod2 { background:#fff; text-align:center; position:relative; padding:1% 0; margin-bottom:9%}
.piechart1 { position:relative}
span.txt { position:absolute; top:55%; left:0;  font-size:15px; left:0; right:0; margin-left:auto; margin-right:auto; color:#C0C0C0}

.pro_bar { width:90%; margin:5%}
.pro_bar h5 { text-align:left; margin:1.5% 0}

.mod input { font-size:20px; width:90%}
.mod input.buscar { background:#EC1B2E; text-align:center; color:#fff; border:none; margin:5% auto; width:80%}
.mod table { width:80%; margin:0 auto}
.mod span.tit { width:80%; display:block; margin:0 auto}
img.fb { margin-right:10px}
span.num1 { font-size:47px; vertical-align:middle; color:#EB1B2D; font-weight:bold}

footer { background:#fff; padding-bottom:2%}
footer ul { padding:2% 0; margin-left:-1%; }
footer ul li { background:#EAEDF2; list-style:none; display:inline-block; width:20%; margin:0 1.3%; padding:1%; text-align:center; vertical-align:top; min-height:150px}
footer ul li:last-child { margin-right:0}
footer ul li h3 { font-size:20px; margin:2% 0; line-height:25px}

.box { background:#fff; padding:2%; width:96%; margin:2% 0; position:relative}
.box  h1 { font-size:14px; color:#4D4D4D; text-transform:uppercase; font-weight:bold}
.box  h1 img { margin-right:5px}

button.fil-toggle { width:60px; height:10px; background-color: transparent; border:none; display:block; position:absolute; right:2%; top:20px; cursor:pointer}
button.fil-toggle.active { background:url(../img/abrir.png) no-repeat}
button.fil-toggle.noactive { background:url(../img/cerrar.png) no-repeat}

.busqueda { width:90%; margin:2% auto}
.busqueda label { margin:10px 0;}
.busqueda label span { width:60px; display:inline-block; text-align:right; margin:10px 0; vertical-align:middle; line-height:14px}
.busqueda label:nth-child(odd) { text-align:right; padding-right:10px}
.busqueda input { width:140px; height:30px; border:1px solid #ccc; padding:0 2%; margin-left:5px}
.busqueda input[type="submit"] { background:#EB1B2D; color:#fff; border:none; font-size:14px; cursor:pointer}

.cant {position:absolute; right:2%; top:20px; cursor:pointer}
ul.results { border-bottom:1px solid #CCC; margin:1% auto; padding:1% 0; width:94%; }
ul.results li { display:inline-block; border-right:1px solid #CCC; padding:0 5px}
ul.results li:first-child { background:url(../img/dotred.png) no-repeat left center; padding-left:15px}
ul.results li:last-child { border-right:none}
ul.results li.tel { background:url(../img/ic-tel2.png) no-repeat left center; padding-left:20px}
ul.results li.mail { background:url(../img/ic-mail2.png) no-repeat left center; padding-left:20px}
ul.results li.cal { background:url(../img/ic-cal2.png) no-repeat left center; padding-left:20px}
ul.results li.dir { background:url(../img/ic-dir2.png) no-repeat left center; padding-left:20px}

ul#pager { margin:2% auto; text-align:center}
ul#pager li { display:inline-block}
ul#pager li a { color:#4D4D4D; text-decoration:none; font-family: 'Merriweather Sans', sans-serif;}
ul#pager li a.active { color:#EB1B2D}

.filtros { width:90%; margin:2% auto; line-height:40px;}
.filtros label { padding-top:10px}
.filtros input { width:160px; height:30px; border:1px solid #ccc; padding:0 1%; margin:0 1% 0}
.filtros select, .busqueda select{ width:160px; height:30px; border:1px solid #ccc; padding:0 2% 0 0; margin: 0 1% 0  }
.filtros select, .busqueda select {
display: inline-block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none; 
  background: url("../img/sel-arr.png") no-repeat #fff center right;
}

.filtros input.date { background:url(../img/ic-cal2.png) no-repeat 5px 8px; padding-left:30px; width:70px}
.filtros input[type="submit"] { background:#EB1B2D; color:#fff; border:none; font-size:14px; cursor:pointer}

span.comp { display:block; font-size:14px; font-weight:normal; color:#4d4d4d; font-family: 'Merriweather Sans', sans-serif;}
span.comp span.num { font-size:16px} 

.mod2.ubi .counters1 { padding-left:50px;}
.mod2.ubi { background:url(../img/ic-ubi.png) no-repeat top left #fff}
.mod2.ubi .counters1 span.postal { position:absolute; top:5%; right:10%; text-align:left; width:50px}
img.iso { vertical-align:middle; margin-right:10px}

.pro_bar .comp { position:absolute; right:50px; top:-2px; font-size:16px }

.graf { width:200px; margin:10% auto; position:relative; border-bottom:5px solid #CBCBCB; text-align:left}
.bar { width:40px; height:130px; position:relative; margin:0 10%; float:left}
.bar .prog { background:#EB1B2D; width:100%; position:absolute; bottom:0}
.barnum { font-size:40px; color:#4D4D4D; position:absolute; top:0; left:120%; width:100px; text-align:left; line-height:40px }
.barnum span { font-size:12px; display:block; line-height:12px}
.bar2 { width:40px; height:130px; position:relative; float:right; margin-right:20% }
.bar2 .prog { background:#DCDCDC; width:100%; position:absolute; bottom:0}
.barnum2 { font-size:20px; color:#4D4D4D; position:absolute; bottom:0; left:120%;  text-align:left; line-height:16px}
.barnum2 span { font-size:12px; display:block}

ul.aereas { text-align:left; margin:30px auto; width:96%; padding:0 0 2%}
ul.aereas li { list-style:none; display:block; padding-left:30px; position:relative; margin:5% 0}
ul.aereas li img { position:absolute; left:0}
ul.aereas li span { color:#CBCBCB; font-size:12px}
ul.aereas li:first-child { font-size:16px}
ul.aereas li:first-child span { font-size:13px}

.mod1 span.tit5 { display:inline-block; width:45%}
.counters1.rs { float:right; width:40%}
.counters1.rs span.num1 { color:#4d4d4d; font-size:30px; font-weight:normal}
.counters1.rs img.fb { width:35px; vertical-align:middle}

a.ver { background: #eb1b2d none repeat scroll 0 0; border: medium none; color: #fff; cursor: pointer; font-size: 15px; text-align:center; width:100%; text-transform:uppercase; padding:5% 0; display:inline-block}
a.ver img { vertical-align:middle; margin-right:10px}

.col70 { width:62%; float:left; background:#fff; padding:2%; vertical-align:top}
.col30 { width:30%; float:right;  vertical-align:top; text-align:center}

.col70 h1 img { vertical-align:middle; margin-right:10px}
.col70 h2 { margin:2% 0; text-align:center}

.col30 .mod {background:#fff; padding:5% ; margin:0 0 8% }
.col30 h1 { font-size:40px; font-family:"Merriweather Sans",sans-serif; font-weight:bold}
.col30 h1 img { vertical-align:middle}
.col30 h2 { font-size:16px; margin:2% 0}
.col30 h2 span { display:block; font-size:14px}
.col30 h3 { text-align:left; font-weight:bold; text-transform:uppercase}
.col30 h3 img { vertical-align:middle; margin-right:5px}

ul.tribs { margin:10% 5%; text-align:center}
ul.tribs li { display:inline-block; width:45%; list-style:none; font-family:"Merriweather Sans",sans-serif; text-align:left; margin:2% 0}
ul.tribs li ul { margin:5% 0}
ul.tribs li ul li { display:block; line-height:20px}

ul.tribs li ul li:before {margin-right:10px; font-size:30px; content:'\25A0';}
li.Sa:before {color:#776500; }
li.Sm:before {color:#C1AB5F }
li.Sb:before {color:#E1D19F; }
li.GBa:before {color:#E1012B; }
li.GBm:before {color:#E74F6F }
li.GBb:before {color:#F7DBD1; }
li.Ca:before {color:#009F7B; }
li.Cm:before {color:#91C795 }
li.Cb:before {color:#DBE7DB; }
li.GSa:before {color:#A55585; }
li.GSm:before {color:#D5A1B9}
li.GSb:before {color:#F7E1E7 }

#estadio { text-align:center; position:relative; padding-bottom:10%}
#estadio h3 { position:absolute}
#estadio h3.tit-t { position:relative; margin:5% 0}
#estadio h3.tit-b { bottom:5%; left: 0; right: 0; margin-left: auto; margin-right: auto;}
#estadio h3.tit-l {-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg); left:-10%; top:50%;}
#estadio h3.tit-r {-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); right:-10%; top:50%;}

#estadio h5 { position:absolute; color:#000; font-size:11px; }
#estadio h5.tit-t { top:-30%; left: 0; right: 0; margin-left: auto; margin-right: auto;}
#estadio h5.tit-b { bottom:-30%; left: 0; right: 0; margin-left: auto; margin-right: auto;}
#estadio h5.tit-l {-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg); left:-30%; top:50%;}
#estadio h5.tit-r {-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); right:-30%; top:50%;}

#seleccion { background:#EB1B2D; border:3px solid #fff; text-align:center; position:absolute; top:41%; left: 0; right: 0; margin-left: auto; margin-right: auto; display:inline-block; width:26%; color:#fff; padding:2% 0}
#seleccion span.num {font-family:"Merriweather Sans",sans-serif; font-size:45px; line-height:50px; font-weight:bold}
#seleccion img { vertical-align:middle; margin-top:-10%}

.fil2 { margin:1% 0;}
.fil2 li { font-size:0px; list-style:none; display:inline; margin-right:20px}
.fil2 li span { font-size:14px; margin-right:10px}
.fil2 input {display:none;}
.fil2 input + label {color: #4F4F4F; font-size:15px; background-color:#CFCFCF; height:30px; line-height:30px; padding:2px 2%; border:1px solid #ccc; cursor:pointer}
.fil2 input:checked + label {background-color:#DC4740; color:#fff}
.fil2 .fa { font-size:20px !important}
.fil2 input + label span,
.fil2 input:checked + label  {
  -webkit-transition:background-color 0.4s linear;
  -o-transition:background-color 0.4s linear;
  -moz-transition:background-color 0.4s linear;
  transition:background-color 0.4s linear;
}

.box h1 i{ color:#eb1b2d; font-size:20px; width:25px}
.box h1 { padding-left:1%}
 a.salir {color:#eb1b2d; text-decoration:none}

button.ver {
    background: #eb1b2d none repeat scroll 0 0;
    border: medium none;
    color: #fff;
    cursor: pointer;
    font-size: 15px;
    padding: 5% 0;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}
.resp-form { display:none}
body.login { background:url(../img/bg-login.jpg) no-repeat top center; background-size:100% auto; background-color:#000000; }
#login { max-width:250px; margin:10% auto}
#login label { display:block; margin:2% 0 4%; color:#fff;}
#login label input { height:25px; width:100%}
#login input.entry { background:#BC403C; color:#fff; text-align:center; cursor:pointer; display:block; margin:10% auto; max-width:130px; border:none; height:25px; line-height:25px; font-size:16px; }

@media (max-width: 600px) {
.wrap { padding:5%}
.col1, .col2, .col3 { float:none; width:100%; margin:1% 0} 	
header img { width:80px; position:relative}
header .cont { float:none; margin:0;}
header .cont h2 { font-size:20px}
header .cont h1 { font-size:25px}
footer ul li { display:block; width:98%; margin:3% 0}

.busqueda { margin:10% auto;  width:80%}
.busqueda input[type="submit"] { margin:5% auto; display:block}

#collapse2 { margin:10% auto}
.filtros { }
.filtros label { display:inline-block; width:100%; padding:5px 0}
.filtros label span { width:80px; line-height:14px; vertical-align:middle}
.filtros label label { width:auto; }
.fil2 li{ display:block; margin:5% 0}
.fil2 input + label { padding:2% 5%; margin:2% 0; width:90% !important}
.filtros label.nac { width:100%}
.filtros label.nac span:after {content:"\a";white-space: pre;}
.filtros label.ot4:before {content:"\a"; white-space: pre;}
.filtros input[type="submit"] { display:block; margin:0 auto}

.col70 { width:96%}
.col30 { width:100%; margin:10% 0}
#seleccion { position:relative; width:80%; margin:10% auto}
#seleccion h5 { display:none}
#estadio { padding-bottom:0}
#estadio h3 { font-size:10px}
#estadio h3.tit-l { left:-15%; top:35%}
#estadio h3.tit-r { right:-18%; top:35%}
#estadio h3.tit-b { top:68%}
.resp-form { display:block; text-align:center; padding:5% 0}
}