/*COLORES USADOS EN LA WEB:
VERDE OSCURO -  rgb(20,155,136);
VERDE CLARO -   rgb(72,189,169);
AMARILLO-       rgb(249,255,1);
NEGRO-          rgb(255,255,255);
BLANCO-         rgb(0,0,0);
LA FUENTE USADA PARA TEXTO ES LA */
* { padding:0;/*se pone para que sirva para todos los navegadores
    y asi resetea los valores del navegador y nos funcione el margin*/
        margin:0;
    }
    @font-face {
      font-family: 'antonregular';
      src: url('fuentes/anton-regular-webfont.eot');
      src: url('fuentes/anton-regular-webfont.eot?#iefix') format('embedded-opentype'),
           url('fuentes/anton-regular-webfont.woff2') format('woff2'),
           url('fuentes/anton-regular-webfont.woff') format('woff'),
           url('fuentes/anton-regular-webfont.ttf') format('truetype'),
           url('fuentes/anton-regular-webfont.svg#antonregular') format('svg');
      font-weight: normal;
      font-style: normal;
    
    }
    
    @font-face {
      font-family: 'fredoka_oneregular';
      src: url('fuentes/fredokaone-regular-webfont.eot');
      src: url('fuentes/fredokaone-regular-webfont.eot?#iefix') format('embedded-opentype'),
           url('fuentes/fredokaone-regular-webfont.woff2') format('woff2'),
           url('fuentes/fredokaone-regular-webfont.woff') format('woff'),
           url('fuentes/fredokaone-regular-webfont.ttf') format('truetype'),
           url('fuentes/fredokaone-regular-webfont.svg#fredoka_oneregular') format('svg');
      font-weight: normal;
      font-style: normal;
    
    }
    
        
    
     @font-face {
        font-family: 'latoregular';
        src: url('fuentes/lato-regular-webfont.eot');
        src: url('fuentes/lato-regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('fuentes/lato-regular-webfont.woff2') format('woff2'),
             url('fuentes/lato-regular-webfont.woff') format('woff'),
             url('fuentes/lato-regular-webfont.ttf') format('truetype'),
             url('fuentes/lato-regular-webfont.svg#latoregular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    @font-face {
      font-family: 'robotoregular';
        src: url('fuentes/roboto-regular-webfont.eot');
        src: url('fuentes/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('fuentes/roboto-regular-webfont.woff2') format('woff2'),
             url('fuentes/roboto-regular-webfont.woff') format('woff'),
             url('fuentes/roboto-regular-webfont.ttf') format('truetype'),
             url('fuentes/roboto-regular-webfont.svg#robotoregular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    @font-face {
        font-family: 'montserratregular';
        src: url('fuentes/montserrat-regular-webfont.eot');
        src: url('fuentes/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
             url('fuentes/montserrat-regular-webfont.woff2') format('woff2'),
             url('fuentes/montserrat-regular-webfont.woff') format('woff'),
             url('fuentes/montserrat-regular-webfont.ttf') format('truetype'),
             url('fuentes/montserrat-regular-webfont.svg#montserratregular') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    @font-face {
        font-family: 'montserratsemibold';
        src: url('fuentes/montserrat-semibold-webfont.eot');
        src: url('fuentes/montserrat-semibold-webfont.eot?#iefix') format('embedded-opentype'),
             url('fuentes/montserrat-semibold-webfont.woff2') format('woff2'),
             url('fuentes/montserrat-semibold-webfont.woff') format('woff'),
             url('fuentes/montserrat-semibold-webfont.ttf') format('truetype'),
             url('fuentes/montserrat-semibold-webfont.svg#montserratsemibold') format('svg');
        font-weight: normal;
        font-style: normal;
    
    }
    
    
    p {
    
        font-family:'robotoregular';
        font-size:18px;
    
    }
    /*FOOTER*/
    
    
    .piedepagina {
      height:100%;
      background-color:black;
      }
    
      .titulofooter{
    
        color:rgb(20,155,136);
        text-align: center;
        font-size: 25px;
        font-family: 'montserratsemibold';
        padding-top: 20px;
      }
    
    ul.pie1 {
    
        margin-top:80px;
        font-size:14px;
      text-align:left;
        
    }
    
    ul {
    
      list-style-image: url('img/botonli.gif');
      margin-left:30px;
    }
    
    li {
        
        color:rgb(20,155,136);
      
        /*margin-left:20px;*/
        /*float:left;*/
        /*list-style:none;*/
        
        }
    
      /*FIN FOOTER*/
    
     h1.entrenos {
    
      color:rgb(20,155,136);
      margin-bottom: 25px;
    
    
     }
    
    h3 {
        font-size:45px;
        font-family: 'robotoregular';
        color:rgb(20,155,136);
        text-align:left;
      margin-left: 30px;
        margin-top:60px;
        margin-bottom:30px;
    }
    
    th {
    
      color:rgb(20,155,136);
      text-align: center;
     
    
      
    }
    
    tr{
      height:50px;
    }
    
    
    
    .cabtablaindi{
    
      color:rgb(249,255,1);
    
    }
    
    td{
    
      text-align: center;
     
    }
    
    table{
    
      width:100%;
      font-family:'robotoregular';
      
     
    
    } 
    
    table, th, td {
      border: 2px solid rgb(20,155,136);;
      border-collapse: collapse;
    }
    
    
    
    
    /*hr sirve para hacer una rayita que usaremos de
    separador ó en medio de las dos rayas poner un titulo
    */
    hr.rayitatitulos {
    
      display: block;
      margin-top: 0.5em;
      margin:0 auto;
      width:60%;
        border-color:rgb(249,255,1);
      border-width: 6px;
    }
    
    hr {
        margin-top:60px;
        border-width:10px;
        border-color:#6f3737;
    }
    
    
    
        
    a {
        font-family:'robotoregular';
        color:#11833e;
        font-weight:bolder;
        text-decoration:none;
    }
    
    .clarito {
    
      color:rgb(72,189,169);
    }
    
    
    
    
    body {
        background-color:whitesmoke;
    }
    
    
        
    
        
    #container-fluid {
    
        width:100%;
        height:auto;
        
        }
        
    
   
    
    
    a:hover {
     color: rgb(249,255,1);
    }
    
    
    .fototexto {
        
        width:100%;
        height:auto;
        margin:80px 0px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
     
    img.centrarfoto {
        
        width:100%;
        height:auto;
        margin:0 auto;
    }
    
    /*CSS AÑADIDO NUEVO*/
    
    .titulo_principal {
    
      display:flex;
      align-items:center;
    }
    
    
   
    /* CSS PARTE DERECHA DEL BACKGROUND DE CABECERA*/
    
    .botonescabecera{
      
      height:120px;
      background-color: rgb(72,189,169);
      display:flex;
      align-items: center;
      justify-content:space-around;
    }
    
    a.button{
    
      display:inline-block;
      font-size: 15px;
      border-radius: 10px solid rgb(255,255,255);
      color:#ffffff;
      padding:15px 32px;
      text-align:center;
      text-decoration: none;
      box-shadow: 0 0 30px rgb(249,255,1);
      
      
      }
      
      .button:active{
      
        background-color:rgb(249,255,1);
        transform: translateY(4px);
      }
      
      .button:hover{
      
        background-color: rgb(249,255,1);
        color:#ffffff;
        box-shadow: 0 0 40px rgb(255,255,255);
      }
    
    .card img {
       margin-top: 20px;
       
    }
    
    .tarjetasentrenadores{
    
      height: 100%;
      background-color: coral;
      margin-bottom: 40px;
    
    }
    
    .entrenadores {
    
      
      margin-bottom: 150px;
      margin-top: 70px;
    }
    
    .segundoentrenador {
    
      
      display:flex;
      justify-content: center;
      align-items: center;
      
    
    }
    
    .entrenador{
    
      width:300px;
      height:500px;
      display:flex;
      justify-content: center;
      align-items: center;
      background-color: rgb(72,189,169);
      color:#ffffff;
    }
    
    
    .redondeo{
    
        width:250px;
        height:250px;
        border-radius:150px;
    }
    
    h3.entrenadores{

      margin-bottom: 20px;
    }
    
    
    /*.apuntate{
    
        width:500px;
        height:200px;
        background-color:rgb(250,70,45);
        opacity:0.8;
      font-family: 'montserratregular';
      font-weight: bolder;
      
        
    } */
    
    #logo_menu {
    
        width:100%;
        height:100px;
        background-color: #11833e;
        
    }
    .logo{
    
        background-color: chartreuse;
        height:100px;
    
    }
    
    .logo_imagen{
    
        
        height:100px;
    }

   

 .imagen_escuela{
  background-image: url('img/materialpadel.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  object-fit: cover; /* para ajustar la imagen sin deformarla */
  height:300px;

 }

 .contenedor_escuela {

  width: 100%;
  height: 300px; /* altura del contenedor */
  overflow: hidden; /* para ocultar cualquier contenido que sobresalga */
  margin-top: 100px;
  margin-bottom:80px;
  background-color: #d6d6d6;
   

 }

 /*tarjetas primeros pasos*/

 .primeros_pasos{

  margin-bottom: 80px;

 }

 .image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.container:hover .image {
  opacity: 0.3;
}

.container:hover .middle {
  opacity: 1;
}

.text {
  background-color: rgb(20,155,136);
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}

 /*fin tarjetas primeros pasos*/

    
    
    
    
    /* MENU NAVEGACION*/
    
    .main-header {
        
        height: 100px;
        
        display: flex;
        /*justify-content: space-between;*/
        justify-content:right;
        align-items: center;
        /*background-color:blue;*/
        padding: 0 0.4rem;
      }
      
       
      .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100%;
        margin-left: -100%;
        transition: all 0.2s linear;
        /*backgrouncolor:rgb(20,155,136);*/
        z-index: 100;
      }
      
      .main-nav.show {
        margin-left: 0;
      }
      /*background donde aparecen los enlaces del menu cuando estamos en pantallas pequeñas*/
      .nav-links {
        background-color: rgb(250, 250, 250);
        display: flex;
        flex-direction: column;
        width: 80%;
        height: 100%;
        align-items: center;
        justify-content: flex-start;
      }
      
      .link-item {
        margin-top: 2rem;
        color: #25A28D;
        text-decoration: none;
        font-weight: bold;
        position: relative;
      }
      
      .link-item::after {
        position: absolute;
        content: "";
        background-color:#25A28D;
        bottom: -5px;
        left: 0;
        width: 0%;
        height: 3px;
        transition: 0.3s ease all;
      }
      
      .link-item:hover::after {
        width: 100%;
      }
      
      .button-menu {
    
        z-index: 200;
        width: 40px;
        height: 40px;
        border: none;
        display: flex;
        background: none;
        flex-direction: column;
        align-items: center;
        justify-content:center;
        cursor: pointer;
        
      }
      /* esta son las rayitas del span*/
      .button-menu span {
        width: 37px;
        height:4px;
        margin-bottom: 5px;
        position: relative;
        background:#25A28D;
        border-radius: 3px;
        border-color: purple;
        transform-origin: 4px 0px;
        transition: all 0.2s linear;
        
       
      }
      /* para hacer el ASPA DEL CIERRE DEL MENU HAMBURGUESA*/
      .button-menu.close span {
        opacity: 1;
        transform: rotate(45deg) translate(0px, 0px);
       
        background: #ffffff;
       
      }
      
      .button-menu.close span:nth-child(2) {
        transform: rotate(-45deg) translate(-8px, 5px);
        
      }
      
      .button-menu.close span:nth-child(3) {
        display: none;
      }
      
      
      @media screen and (min-width: 700px) {
        .button-menu {
          display: none;
        }
        
        /*.main-logo {
          flex-basis: 30%;
        }*/
    
    
      
        .main-nav {
          position: static;
          margin-left: 0;
          flex-basis: 70%;
          height: 100%;
            width:100%;
        }
      
        .nav-links {
          width:100%;
          flex-direction: row;
          flex-wrap: nowrap;
          align-items: center;
          justify-content: center;
          background: white;
        }
      
        .link-item {
          display: inline-block;
          margin-top: 0;
          margin-right: 2rem;
        }
      }
     
      .logo_hamburguesa {
    
        display:none;
    
      }
   

    
      /*POLITICA DE COOKIES*/
      #mensajeCookies {
        position: fixed;
        bottom: -100px;
        left: 0;
        right: 0;
        padding: 10px;
        background-color: #f0f0f0;
        text-align: center;
        display: none;
        transition: bottom 0.5s ease-in-out;
      }
      
      #mensajeCookies p {
        display: inline-block;
        margin: 0;
        padding: 5px 10px;
      }
      
      #mensajeCookies button {
        display: inline-block;
        margin: 0 10px;
        padding: 10px 20px;
        background-color: rgb(72,189,169);
        color: white;
        border: none;
        border-radius: 3px;
        cursor: pointer;
      }

      .texto_valores{

        height:100px;
        margin-bottom:50px;
        background-color:#E5E7E9;
        
      }

      .titulo_valores {
        height:100px;
        
      }
      .texto_valores_escuela{

     
        height:100px;
      
       
       
                    
      }

      .titulo_allpadel h1{

        font-family:'robotoregular';
        font-size:30px;
        color: rgb(20,155,136);
        text-decoration-line:underline;
     

      }

      

      span.texto_color_corporativo {

        color:rgb(20,155,136);
        font-size:22px;
        font-weight: bolder;
        margin-right:10px;
        
        
      }

      .videos_mejores_jugadas {

        margin-bottom: 80px;
      }

      .calendariowpt {

      display: flex;
      justify-content: center;
      align-items: center;
      height:auto;
      margin-bottom: 30px;

      }

      

     




   
    /*   ***** MEDIA QUERIES ****************/
    /*MEDIA QUERIES PARA DISPOSITIVOS TIPO TABLETS O SIMILARES*/
    @media screen and (max-width: 992px) {
    
      h2.llamamiento_linea2{
    
        margin-top:5.1vh;
      }
    
    
    }
    
    /*MEDIA QUERIES PARA DISPOSITIVOS MEDIANOS*/
    
    
      @media screen and (max-width: 700px) {
        
       
        .partederecha{
    
            display:none;
        }
    
        .main-header {
    
            height: 150px;
        }
    
      .main-nav {
        background-color:rgb(20,155,136);
       
      }
    
      
    .logo_hamburguesa {
    
      display:flex;
      margin-top:80px;
    }

    .distancia {
      margin-bottom:30px;
   }
      
        
        }

        /*MEDIA QUERIES PARA DISPOSITIVOS PEQUEÑOS DE 480PX*/

        @media screen and (max-width: 480px) {

          .contenedor_escuela {

            margin-bottom:0px;
          }

          .titulo_valores {
            height:50px;
            
          }
          
    
         .titulo_valores .titulo_escuela h1{
    
            font-family:'robotoregular';
            font-size:25px;
            text-align: right;
            text-decoration-line:underline;
    
          }
    
          
    
          span.texto_color_corporativo {
    
            color:rgb(20,155,136);
            font-size:16px;
            font-weight: bolder;
            margin-right:10px;
            
            
          }



          .precios_escuela {

            margin-bottom:1100px;
          }

                        
          .imagen_escuela{
            background-image: url('img/materialpadel.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            object-fit: cover; /* para ajustar la imagen sin deformarla */
            height:300px;
            margin-top:20px;
          
           }

           .logo_hamburguesa {
    
            display:flex;
            margin-top:80px;
          }

          .distancia {
            margin-bottom:30px;
         }

         

         
          
        }