/* To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. */ /*      Created on : 08-oct-2015, 11:29:25     Author     : WEBMASTER, INGESIST */ /* Style the Image Used to Trigger the Modal */ @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700'); @import url('https://fonts.googleapis.com/css?family=Pathway+Gothic+One'); *{     margin: 0;     padding: 0; }  body{     font-family: 'Open Sans', sans-serif;     letter-spacing: normal; }  .header{     background:transparent; }  .con-borde{     border-bottom: #555 solid medium; }  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {     font-family: 'Pathway Gothic One', sans-serif;     display: block;     font-weight: 400;  }  figcaption>h2 {      font-weight: 400;     font-size: 28px;     text-transform: uppercase; }  /* +++++++++++ NAVBAR SUPERIOR +++++++++++ */  .navbar-sup {     background: #0095a6;     height: 50px;     z-index: 3000;     font-family: 'Pathway Gothic One', sans-serif;     font-weight: 400;     text-transform: uppercase;     font-size: 22px;     margin:0px;     padding:0px; }  @media (min-width:1000px)and (max-width:1200px){     .navbar-sup {         font-size: 20px;     } }  #owl{     top: 50px; } /* --------- brand ------------ */ .navbar-sup .navbar-brand{     color: #F3F2F0;     background: #333;       margin-top: 10px;     margin-bottom: -5px; } .navbar-sup .navbar-brand:hover, .navbar-sup .navbar-brand:focus {     color: #5e5e5e; } .navbar-sup .navbar-brand .fa{     line-height: 0.7; } /* ---------- menu ---------- */  .navbar-sup .navbar-nav > li > a {     color: #fff ; } .navbar-sup .navbar-nav > li > a:hover, .navbar-sup .navbar-nav > li > a:focus {     color:#333333;     background-color: transparent; } @media(max-width:1000px){     .navbar-sup .navbar-nav {         color: #fff ;         background: rgba(0,149,166,0.8);     }     .navbar-sup .navbar-nav > li > a:hover,     .navbar-sup .navbar-nav > li > a:focus {         color:#333333;         background: #0095a6;     }     .navbar-sup .navbar-nav{         margin-top:0px;         margin-bottom:0px;     } } /* ------- toggle --------- */ .navbar-sup .navbar-toggle {     border-color: #ddd; } .navbar-sup .navbar-toggle:hover, .navbar-sup .navbar-toggle:focus {     background-color: #ddd; } .navbar-sup .navbar-toggle .icon-bar {     background-color: #fff; } .navbar-sup .navbar-collapse, .navbar-sup .navbar-form {     border-color: #e7e7e7; } .navbar-sup .navbar-nav > .open > a, .navbar-sup .navbar-nav > .open > a:hover, .navbar-sup .navbar-nav > .open > a:focus {     color: #555;     background-color: #e7e7e7; }  /*  +++++++++++ OTROS ELEMENTOS DE MENÚ DE NAVEGACIÓN ++++++++++++++++ */ .navbar-sup .navbar-right{     display: block !important; } .navbar-sup .navbar-nav > li > a.acceso{     background: #333333;     color: #ffffff;     font-size: 22px; }  .navbar-sup .navbar-nav > li > a.acceso:hover, .navbar-sup .navbar-nav > li > a.acceso:focus {     color: #5e5e5e;     text-decoration: none; }  /* Efecto rotación */ @media(min-width:1000px ){     .navbar-sup .navbar-nav > li > a.giro,     .navbar-sup .navbar-nav > li > a.giro:visited{         color: #fff;         margin: auto 0px auto 5px ;     }     .navbar-sup .navbar-nav > li > a.giro:hover{         color:#5e5e5e;         -webkit-transform: rotate(-360deg);         -webkit-transition: all 0.8s ease-in-out 0s;         -moz-transform: rotate(-360deg);         -moz-transition: all 0.8s ease-in-out 0s;         -o-transform: rotate(-360deg);         -o-transition: all 0.8s ease-in-out 0s;         -ms-transform: rotate(-360deg);         -ms-transition: all 0.8s ease-in-out 0s;          transform: rotate(-360deg);         transition: all 0.8s ease-in-out 0s;     } } .activo{     text-decoration: underline !important; } /*  +++++++++++ FOOTER ++++++++++++++++ */  .footer{     font-size: 0.9em;     background: #F2F2F2 none repeat scroll 0% 0%;     border-top:1px solid #E3E3E3;     padding: 15px 0px;     margin: 30px 0px 0px; } .footer p{     font-size: 12px;     color: #797979;     font-weight: 400;     line-height: 19px; } /* +++++++++++++ MAPA ++++++++++++++++ */  #map {     height:220px;     width: available;     margin: 0;     padding: 0;     margin-top: 30px; } .gm-style-iw * {     display: block;     width: 100%; } .gm-style-iw h4, .gm-style-iw p {     margin: 0;     padding: 0; } .gm-style-iw a {     color: #4272db; } /*  +++++++++++ OTROS ++++++++++++++++ */ .imp-link{     color:#5b3a73;     font-weight: 600;     padding-top: 20px;     font-size: 1.6em; } .imp-link a{     color:#0095a6;     font-weight: 600;     font-size: 110%; } .imp-link a:hover{     font-size:100%;     text-decoration: none; }    p span .displaynone { display:none; }  /* Slider */  .fullwidth {     width: 100%;     margin-left: auto;     margin-right: auto;     max-width: available;/* initial */ }  .slider { margin: 0; } .slider .slide { width: 100%; height: 100%; }  .slick-prev {     left: 0;     background: red; } .slick-next {     right: 0;     background: red; } .slick-dots {     bottom: 0px;     margin-left: 0; /* Fixes the visible horizontal scroll bar */ }  /* texto */ .wt {     color: #fff; } .b{     font-weight: bolder; } .l {     font-size: larger; } .arriba{     margin-top: -10px; } .margen-dcho {     margin-right:10px; } .margen-izdo{     padding-left: 10%; }  .separador{     height:50px;     width: available; } .destacado{     text-decoration: underline;     font-weight:bold; } /* ++++++++++++++ HR ++++++++++++++++++++ */  hr {border: 0; border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; height:0;margin-bottom: 60px;margin-top: 80px; border-style: solid;} .decorated, .decorated-1, .decorated-2, .decorated-3, .decorated-5,.texto-extras,.texto-contacto,.texto-tambien,.texto-natacion,.texto-fitness,.texto-cumple,.texto-campus,.texto-galeria,.texto-empresas,.texto-servicios{border: 0; border-top: 1px solid #0095a6; border-bottom: 2px solid #0095a6; height:0; border-style: solid; text-align:center;} .decorated-4{border: 0; border-top: 1px solid #0095a6; border-bottom: 2px solid #0095a6; height:0; border-style: solid; text-align:left;} .decorated:after {position: relative; top: -18px; content: url(../img/iconos/pin.jpg);height: 44px;padding: 7px;} .decorated-1:after {position: relative; top: -18px; content: url(../img/iconos/nadador.png);height: 44px;padding: 7px;} .decorated-2:after {position: relative; top: -22px; content: url(../img/iconos/fitness.jpg);height: 44px;padding: 7px;} .decorated-3:after {position: relative; top: -22px; content: url(../img/iconos/fiesta.jpg);height: 44px;padding: 7px;} .decorated-4:after {position: relative; top: -22px; content: url(../img/iconos/empresa.jpg);height: 44px;padding: 7px;} .decorated-5:after {position: relative; top: -22px; content: url(../img/iconos/galeria.jpg);height: 44px;padding: 7px;} hr.texto-extras{margin-top: 0px !important;} .texto-extras:after {position: relative; top:-17px; content:"SERVICIOS ADICIONALES";font-family: 'Open Sans Condensed', sans-serif; font-size: 20px; font-weight: 800;line-height: 34px; color: #aaa;background: #fff;padding: 10px;} .texto-contacto:after {position: relative; top:-17px; content:"CONTÁCTANOS CON UN CLICK...";font-family: 'Open Sans Condensed', sans-serif; font-size: 30px; font-weight: 800;line-height: 34px; color: #aaa;background: #fff;padding: 10px;} .texto-tambien:after {position: relative; top:-17px; content:"... O TAMBIÉN";font-family: 'Open Sans Condensed', sans-serif; font-size: 20px; font-weight: 800;line-height: 34px; color: #aaa;background: #fff;padding: 10px;} .texto-natacion:after {position: relative; top:-17px; content:"NATACIÓN";font-family: 'Open Sans Condensed', sans-serif; font-size: 30px; font-weight: 800;line-height: 34px; color: #aaa;background: #fff;padding: 10px;} .texto-fitness:after {position: relative; top:-17px; content:"FITNESS";font-family: 'Open Sans Condensed', sans-serif; font-size: 30px; font-weight: 800;line-height: 34px; color: #aaa;background: #fff;padding: 10px;} .texto-cumple:after {position: relative; top:-17px; content:"CUMPLEAÑOS";font-family: 'Open Sans Condensed', sans-serif; font-size: 30px; font-weight: 800;line-height: 34px; color: #aaa;background: #fff;padding: 10px;} .texto-campus:after {position: relative; top:-17px; content:"CAMPUS";font-family: 'Open Sans Condensed', sans-serif; font-size: 30px; font-weight: 800;line-height: 34px; color: #aaa;background: #fff;padding: 10px;} .texto-empresas:after {position: relative; top:-17px; content:"EMPRESAS";font-family: 'Open Sans Condensed', sans-serif; font-size: 30px; font-weight: 800;line-height: 34px; color: #aaa;background: #fff;padding: 10px;} .texto-galeria:after {position: relative; top:-17px; content:"GALERÍA";font-family: 'Open Sans Condensed', sans-serif; font-size: 30px; font-weight: 800;line-height: 34px; color: #aaa;background: #fff;padding: 10px;} .texto-servicios:after{position: relative; top:-17px; content:"OTROS SERVICIOS";font-family: 'Open Sans Condensed', sans-serif; font-size: 30px; font-weight: 800;line-height: 34px; color: #aaa;background: #fff;padding: 10px;} /* ++++++++++++++++ IMAGENES ++++++++++++++ */ .panel img{     width: 150px; } .horario{     max-width: available; } .img-effect {     text-decoration: none;     display: block;     opacity: 1;     -webkit-transform: scale(1,1);     -webkit-transition-timing-function: ease-out;     -webkit-transition-duration: 250ms;     -moz-transform: scale(1,1);     -moz-transition-timing-function: ease-out;     -moz-transition-duration: 250ms; } .img-effect:hover {     opacity: .7;     -webkit-transform: scale(0.95,0.95);     -webkit-transition-timing-function: ease-out;     -webkit-transition-duration: 250ms;     -moz-transform: scale(0.98,0.98);     -moz-transition-timing-function: ease-out;     -moz-transition-duration: 250ms;     position: relative;  }  .sombra{     box-shadow: 2px 2px 5px #999;     -webkit-box-shadow: 2px 2px 5px #999;     -moz-box-shadow: 2px 2px 5px #999;     filter: shadow(color=#999999, direction=135, strength=2); } figure{     background: #F3F4F3; } figure img{     padding: 3px; }  figcaption p{     color: #777;     font-weight:500;     padding-left: 10px;      padding-right: 10px;  } figcaption hr{border: 0; border-top: 1px solid #ddd; border-bottom: 2px solid #ddd; height:0; border-style: solid;} .servicios {     padding: 0;     max-height: 100px;     width: 130px; } .servicios img{     height: 70px;     text-align: center; } #inicio{     position: relative;     top:10px; } .max-ancho{     width: 100%;     height: auto; }  /*   ++++++++++++++ FORMULARIO +++++++++++++++  */ #contact{     padding:0; }  .contact-text{     margin:45px auto; }  .mail-message-area{     width:100%;     padding:0 15px; }  .mail-message{     width: 100%;     height: 30px;     background:rgba(255,255,255, 0.8) !important;     -webkit-transition: all 0.7s;     -moz-transition: all 0.7s;     transition: all 0.7s;     margin:0 auto;     border-radius: 0; }  .not-visible-message{     height:0px;     opacity: 0; }  .visible-message{     height:auto;     opacity: 1;     margin:25px auto 0; }  /* Input Styles */  .form{     width: 100%;     padding: 15px;     background:#f8f8f8;     border:1px solid rgba(0, 0, 0, 0.075);     margin-bottom:25px;     color:#727272 !important;     font-size:13px;     -webkit-transition: all 0.4s;     -moz-transition: all 0.4s;     transition: all 0.4s; }  .form:hover{     border:1px solid #8BC3A3; }  .form:focus{     color: white;     outline: none;     border:1px solid #8BC3A3; }  .textarea{     height: 200px;     max-height: 200px;     max-width: 100%; }  /* Generic Button Styles */  .button{     padding:8px 12px;     background:#0A5175;     display: block;     width:120px;     margin:10px 0 0px 0;     border-radius:3px;     -webkit-transition: all 0.3s;     -moz-transition: all 0.3s;     transition: all 0.3s;     text-align:center;     font-size:0.8em;     box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);     -moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);     -webkit-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10); }  .button:hover{     background:#343e93;     color:white; }  /* Send Button Styles */  .form-btn{     width:180px;     display: block;     height: auto;     padding:15px;     color:#fff;     background:#8BC3A3;     border:none;     border-radius:3px;     outline: none;     -webkit-transition: all 0.3s;     -moz-transition: all 0.3s;     transition: all 0.3s;     margin:auto;     box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);     -moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);     -webkit-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10); }  .form-btn:hover{     background:#5986a9;     color: white;     border:none; }  .form-btn:active{     opacity: 0.9; } .enlace{     text-decoration: underline; } .semibold{     font-weight: 600; } .modal{     z-index: 4000; }  .otros{ 	padding: 18px; 	font-size: 0.8em; }

<!DOCTYPE html > <html lang="es">     <head>                  <meta charset="utf-8">         <meta http-equiv="X-UA-Compatible" content="IE=edge">         <meta name="viewport" content="width=device-width, initial-scale=1">         <meta property="og:image" content="img/logos/logo-min.png">         <meta name="robots" content="index, follow" >         <meta name="googlebot" content="NOODP, follow">         <!-- Favicon -->         <link rel="apple-touch-icon" sizes="57x57" href="img/favicon.ico/apple-icon-57x57.png">         <link rel="apple-touch-icon" sizes="60x60" href="img/favicon.ico/apple-icon-60x60.png">         <link rel="apple-touch-icon" sizes="72x72" href="img/favicon.ico/apple-icon-72x72.png">         <link rel="apple-touch-icon" sizes="76x76" href="img/favicon.ico/apple-icon-76x76.png">         <link rel="apple-touch-icon" sizes="114x114" href="img/favicon.ico/apple-icon-114x114.png">         <link rel="apple-touch-icon" sizes="120x120" href="img/favicon.ico/apple-icon-120x120.png">         <link rel="apple-touch-icon" sizes="144x144" href="img/favicon.ico/apple-icon-144x144.png">         <link rel="apple-touch-icon" sizes="152x152" href="img/favicon.ico/apple-icon-152x152.png">         <link rel="apple-touch-icon" sizes="180x180" href="img/favicon.ico/apple-icon-180x180.png">         <link rel="icon" type="image/png" sizes="192x192"  href="img/favicon.ico/android-icon-192x192.png">         <link rel="icon" type="image/png" sizes="32x32" href="img/favicon.ico/favicon-32x32.png">         <link rel="icon" type="image/png" sizes="96x96" href="img/favicon.ico/favicon-96x96.png">         <link rel="icon" type="image/png" sizes="16x16" href="img/favicon.ico/favicon-16x16.png">          <!--css -->         <link href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">         <link rel="stylesheet" href="css/bootstrap/bootstrap-mod.css">         <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">          <!-- Slider -->         <link rel="stylesheet" href="layerslider/css/layerslider.css" type="text/css">         <link rel="stylesheet" href="layerslider/css/style.css" type="text/css"> 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>         <!--[if lt IE 9]>                 <script src="layerslider/js/html5.js"></script>         <![endif]-->          <!-- Owl Carousel Assets -->         <link href="owl-carousel/owl.carousel.css" rel="stylesheet">         <link href="owl-carousel/owl.theme.css" rel="stylesheet">         <link href="owl-carousel/owl.transitions.css" rel="stylesheet">         <!--mis estilos -->         <link rel="stylesheet" href="css/styles.css"> 		<script> 			$  (document).ready(function() { 				$  ("#desplegable1").css('display','none'); 				$  ("#desplegable2").css('display','none');  				$  (".infantil").mouseover(function() { 					$  ("#desplegable1").show('slow'); 				});  				$  (".infantil").mouseleave(function() { 					$  ("#desplegable1").hide('slow'); 				}); 				 				$  (".infantil").hover( 					function(){ 						$  ("#desplegable1").css({"background-color":"#0095a6"}); 					}	 				); 				 				$  (".otros").mouseover(function() { 					$  ("#desplegable2").show('slow'); 				});  				$  (".otros").mouseleave(function() { 					$  ("#desplegable2").hide('slow'); 				}); 				 				$  (".otros").hover( 					function(){ 						$  ("#desplegable2").css({"background-color":"#0095a6"}); 					}	 				); 			}); 		</script>         <style type="text/css" media="screen">             .ls-layer,             .ls-layer * {                 font-family: 'Pathway Gothic One', sans-serif;                 font-weight: normal;                 text-shadow: none !important;                 font-size: 30px;                 color:#333;                 top:50px;             }              .ls-s-1 {                 border-radius: 100px;                 -moz-border-radius: 100px;                 -webkit-border-radius: 100px;                 font-weight: normal;             }             .bg-translucido{                 background: #fff;                 opacity: .50; /* Standard: FF gt 1.5, Opera, Safari, CSS3 */                 filter: alpha(opacity=50); /* IE lt 8 */                 -ms-filter: "alpha(opacity=50)"; /* IE 8 */                 -khtml-opacity: .50; /* Safari 1.x */                 -moz-opacity: .50; /* FF lt 1.5, Netscape */             }              .plus,             .plus2 {                 text-align: center;                 width: 50px;                 height: 50px;                  font-size: 50px;                 line-height: 50px;                 background: #eee;             }              .plus {                 color: #3b173d;             }              .plus2 {                 color: #1e73be;             }              .text,             .text2 {                 margin: 0px;                 display: inline-block !important;                 padding: 5px 20px 5px 10px;             }              .text {                 color: #333;                 background: rgba(255,255,255,0.8);                 border-radius: 0px !important;             }              .text2 {                 color: #1e73be;             }          </style>     </head>     <body>         <!--Barra superior todo lo ancho de la página. Fuera del container principal-->         <div class="header">             <nav class="navbar navbar-sup navbar-fixed-top">                 <div class="container">                     <div class="navbar-header">                         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navegacion">                             <span class="icon-bar"></span>                             <span class="icon-bar"></span>                             <span class="icon-bar"></span>                         </button>                         <a class="navbar-brand" href="index.html">                             <i class="fa fa-bookmark-o fa-2x"></i>                         </a>                     </div>                     <div class="navbar-collapse collapse text-center">                         <ul class="nav navbar-nav navbar-left">                             <li><a href="natacion.html">NATACIÓN</a></li>                             <li><a href="/Easo/index.html">ESCUELA</a></li> 							<li><a href="fitness.html">FITNESS</a></li> 							 							<!-- Desplegable infantil -->                             <li class="infantil"><a href="infantil.html">INFANTIL</a> 								<ul id="desplegable1"> 									<li><a href="#" style="color:#FFFFFF;">&nbsp;&nbsp;EXTRAESCOLARES&nbsp;&nbsp;</a></li> 									<li><a href="#" style="color:#FFFFFF;">VACACIONES</a></li> 								</ul>   							</li> 							                             <li><a href="cumpleaños.html">CUMPLEAÑOS</a></li>                             <li><a href="bienestar.html">BIENESTAR</a></li>                             <li><a href="galeria.html">GALERÍA</a></li> 							 							<!--Desplegable para: colegios y empresas.--> 							<!--<li><a href="colegios.html">COLEGIOS</a></li>                             <li><a href="empresas.html">EMPRESAS</a></li>--> 							<i class="fa fa-bars fa-lg otros" style="color:#FFFFFF;"> 								<li class="otros"> 									<ul id="desplegable2"> 										<li><a href="#" style="color:#FFFFFF;">COLEGIOS</a></li> 										<li><a href="#" style="color:#FFFFFF;">EMPRESAS</a></li> 									</ul> 								</li> 							</i>                          </ul>                         <ul class="nav navbar-nav navbar-right">                             <li><a class="acceso" href="area-clientes.html" title="area clientes">ACCESO A CLIENTES</a></li>                             <li><a class="giro" href="https://www.facebook.com/escolapioscentrodeportivo/?fref=ts" ><i class="fa fa-facebook fa-lg"></i></a></li> 							<li><a class="giro" href="contacto.html"><i class="fa fa-home fa-lg"></i></a></li>                             <li>                                 <a role="button" class="giro hidden-xs" data-container="body" data-toggle="popover" data-placement="bottom" data-content="601004597" data-original-title="WHATSAPP:" title="WHATSAPP:"><i class="fa fa-whatsapp fa-lg"></i></a>                                              <a class="giro visible-xs" href="whatsapp://send?text=URL" title="whatsapp"><i class="fa fa-whatsapp fa-lg"></i></a>                             </li>                         </ul>                     </div>                 </div>             </nav>          <!-- Zona script-->         <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>         <script src="script/bootstrap/bootstrap.min.js"></script>         <script src="script/bootstrap/npm.js"></script>     </body> </html>