/*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;
	
	}
	

img.centrarfondo {
	width:100%;
	height:auto;
  margin:0 auto;  
    }
	
	


.posicion {
	position: fixed;
    top: 0;
    width:100%;
    
}


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;
}


.pruebaimagendefondo{

	  width: 100%;
    height: 800px;
    background-image: url('img/portada1.png');
    background-size: 100% 100%;
    
    
	
	
}

/* CSS PARTE DERECHA DEL BACKGROUND DE CABECERA*/
.partederecha {

	background-color: gold;
	height:660px;
  

 
    

}

.up {

  
  height:330px;
  background-color:purple;
 
  
}

.llamamiento{

  /*width:800px;
  height:250px;*/
  width:60vw ;
  height:30.4vh;
  background-color:rgb(72,189,169);
  opacity:0.8;
  font-family: 'montserratregular';
  font-weight: bolder;
  text-align: center;
  
  
  
  } 
  
  h2.llamamiento_linea2{
  
  color: rgb(249,255,1);
  font-family: 'fredoka_oneregular';
  font-weight: bolder;
  font-size: 2.19vw;
  margin-top: 2.8vh;
  
  }
    
  h1.llamamiento_linea1{
  
  color:rgb(255,255,255);
  align-items: center;
  font-family: 'montserratregular';
  font-size: 1.8vw;
  /*font-size: 25px;*/
  font-weight: bolder;
 /* margin-top:2.19vw;/*30px;*/
  margin-top:5vh;
  
  }
  
  span.pistapadel{
  
  font-family: 'fredoka_oneregular';
  font-weight: bolder;
  font-size:3.6vw;
  /*font-size:50;*/
  color:rgb(249,255,1);
  
  }



.down {

	
	width:100%;
	height:330px;
	background-color:blue;
  
  
  
}

.apuntate{

	width:500px;
	height:280px;
	background-color:rgb(250,70,45);
	opacity:0.8;
 
  
	
} 

.colocate{

  height:140px;
  display:flex;
  align-items: center;
  background-color:goldenrod;
}

.tituloprecio{
  
  height:120px;
  background-color: rgb(72,189,169);
  display:flex;
  align-items: center;
  justify-content: center;
  /*margin-top: 10px;*/
  
}
h1.precio {

  color: #ffffff;
  text-shadow: 0 0 40px #fff;
  font-weight: bolder;
  font-family: 'montserratregular';
  font-weight: bolder;
  font-size: 30px;

}

.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:#E5E7E9;
  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;
}



/*.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;
}




/* MENU NAVEGACION*/

.main-header {
	
    height: 100px;
	
    display: flex;
    /*justify-content: space-between;*/
    justify-content:right;
   	align-items: center;
    /*background-color:pink;*/
    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;
    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;

  }
  
/*   ***** MEDIA QUERIES ****************/

/*media querie para dispositivos tipo tablets y 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;
}
  
	
	}

  /*MEDIA QUERIES PARA DISPOSITIVOS PEQUEÑOS UNOS 480PX*/
  @media screen and (max-width: 480px) {

    .segundoentrenador{

      margin-bottom: 30px;
     }
    
  }


  /*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;
  }