.html
{
  height: 100%;
  max-width: 100%
}

/* whatssap */

.whatsapp {
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    right:40px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:30px;
    z-index:100;
  }
  
  .whatsapp-icon {
    margin-top:13px;
  }


/* GENERAL */



body{
	min-height:100vh;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: medium; 
    font-style: normal; 
    background-color: #F8F4DE; 
    
    min-height: 100%;
    display: flex;
    flex-direction: column;

}


.slide{
    width:100%;
    margin: auto;
    position: relative;
    display: inline-block;
    text-align: center;
    overflow: hidden;
    }

.slide ul {
  display: flex;
  padding: 0%; 
  width: 400%;  

  animation: cambio 20s infinite;
  animation-direction: alternate;
  animation-timing-function: linear;
  }

.slide li {
  width: 100%;
  list-style: none;
  }  

.slide img {
  width: 100%;
  }

  @keyframes cambio {
    0%  {margin-left: 0;}
    20% {margin-left: 0;}
  
    25% {margin-left: -100%;}
    45% {margin-left: -100%;}

    50% {margin-left: -200%;}
    70% {margin-left: -200%;}

    75% {margin-left: -300%;}
   100% {margin-left: -300%;}
  }


.centrado{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: apparat,sans-serif;
        font-weight: 700;
        font-style: italic;
        font-size: 1.3em;
        color: white;
        text-shadow: 1px  0px 0px black,
               0px  1px 0px black,
              -1px  0px 0px black,
               0px -1px 0px black;
        }

  /* ALINEACIÓN TEXTO ENTRENAMIENTO GRUPAL */ 
 
  
  .group {
  text-align: left;  
  }

  .videos {
    text-align: left;  
  }  
  
  .entre{
    color:#066938;  
    font-size:1.5em;
    font-family: effra,sans-serif;
    font-weight: 700; 
    font-style: normal;
    text-align: left;
  }

  /* ALINEACIÓN TEXTO POTENCIA */ 
 
  
  .potencia {
    text-align: left; 
    margin-left: 3%; 
    }
  
    .foros {
      text-align: left;  
      margin-left: 3%;
    }  
    
    .power{
      color:#066938;  
      font-size:1.5em;
      font-family: effra,sans-serif;
      font-weight: 700; 
      font-style: normal;
      text-align: left;
      margin-left: 3%;
      margin-right: 4%;
    }  

/* ALINEACIÓN TEXTO POTENCIA */ 

.entrenamientos { 
  margin-top: 10%;
}

h1{
    line-height: 1em;
}

h3{
  font-family: darkmode-on,sans-serif;
  font-style: normal;
  font-size: 1.5em;
  color: rgb(5, 5, 80);
  text-align: center;
}

h4{
  font-family: bungee,sans-serif;
      font-weight: 400;
      font-style: normal;
      font-size: 0.90em;
      color: #c96100;
      text-align: center;
  }

.ancho{
    width: 100%;
}


.column {
    float: left;
    width: 50%;
    text-align: left;
  }

  /* IMAGENES GRANDES */   
.grupal {
  border-radius: 5%;
  border:solid 5px;
  border-color: rgb(233, 140, 0);
  width: 90%;
  margin-bottom: 10%;
  margin-left: 2%;
  }

  .run {
    border-radius: 5%;
    border:solid 5px;
    border-color: rgb(233, 140, 0);
    width: 90%;
    margin-bottom: 10%;
    margin-right: 2%;
    }  

  /* IMAGENES GRANDES */       

  .columna {
  text-align: center;
  width: 50%;
  float: left;
  margin-top: 10%;
}


.redondas {
  border-radius: 50%;
  border: solid 2px;
  border-color: rgb(22, 22, 94);
  width: 30%;
 }


  
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }






/* NAV */

nav.navigation{
	  position:relative; 
    height: 126px;
    background-image: url("../img/fondo-menu.jpg");
    background-repeat: no-repeat;
    background-size: cover; 
    font-family: darkmode-on,sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.5em;
}

.nav-logo{
	float:left;
	height:100px;
	line-height:50px;
	padding:20px 20px;
}
ul.nav-menu, ul.nav-menu li, ul.nav-menu li a{
	float:left;
}
ul.nav-menu{
	padding-left:10px;
    float: right;
    list-style: none;    
}

ul.nav-menu li a{
	height:100px;
    line-height: 90px;
    padding: 0 50px;
	color:#ffffff;
	text-decoration:none;
}
ul.nav-menu li a:hover{
	color:#066938;
}
.nav-toggle{
	position:absolute;
	top:0;
	right:0;
	width:50px;
	height:100px;
	background-color:#11999e;
	cursor:pointer;
}
span.icon-bar{
	position:absolute;
	right:12px;
	display:block;
	width:26px;
	height:2px;
	background-color:#ffffff;
}
.icon-bar:nth-child(1){
  top:17px;
}
.icon-bar:nth-child(2){
  top:24px;
}
.icon-bar:nth-child(3){
  top:31px;
}
.nav-overlay{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-color:rgba(0,0,0,0.5);
	z-index:1;
	opacity:0;
	visibility:hidden;
}
.nav-overlay.active{
	opacity:1;
	visibility:visible;
}

/* SITE CONTAINER */

.site-container {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #F8F4DE;
    font-size: 16px;
    font-weight: 300;
    line-height: 20px;
}

.site-container p {
    margin: 10px 0;
    background: transparent;
    padding-top: 1em;
    padding-left: 2em;
    padding-right: 2em;
}



span.icon-bar{
	-webkit-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

/* ICON BARS ANIMATION */

.nav-toggle.active .icon-bar:nth-child(1){
	top:24px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}
.nav-toggle.active .icon-bar:nth-child(2){
	width:0;
}
.nav-toggle.active .icon-bar:nth-child(3){
	top:24px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.nav-toggle{
	display:none;
}

footer{
  
  background: #5C8267;
  height: auto;
  width: 100vw;
  font-family: darkmode-on,sans-serif;
  padding-top: 40px;
  color: #fff;
  margin-top: auto;
}
.footer-content{
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
}
.footer-content h3{
  font-size: 1.8rem;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 3rem;
  color: #fff;
}
.footer-content p{
  margin: auto;
  text-align: center;
  line-height: 28px;
  font-size: 14px;
}
.socials{
  list-style: none;
  display: flex;
  text-align: center;
}
.socials li{
  margin: 0 10px;
}
.socials a{
  text-decoration: none;
  color: #fff;
}
.socials a i{
  font-size: 1.1rem;
  transition: color .4s ease;

}
.socials a:hover i{
  color: #066938;
}

.footer-bottom{
  background: #55775e;
  width: 100vw;
  padding: 20px 0;
  text-align: center;
}
.footer-bottom p{
  font-size: 14px;
  word-spacing: 2px;
  text-transform: capitalize;
}
.footer-bottom span{
  text-transform: uppercase;
  opacity: .4;
  font-weight: 200;
}


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

    .column {
        width: 100%;
      }

      .columna {
        width: 100%;
      }

    .centrado{
        font-size: 0.5em;
        color: red;
    

}


	ul.nav-menu{
		position:absolute;
		top:50px;
		width:100%;
		height:0;
		padding:0;
		overflow:hidden;
	}
	ul.nav-menu.active{
		height:auto;
	}
	ul.nav-menu li{
		width:100%;
	}
	ul.nav-menu li a{
		width:100%;
		padding:0;
		text-align:center;
		background-color:#2c2c2c;
	}
	ul.nav-menu li a:hover{
		background-color:#1c1c1c;
	}
	.nav-toggle{
		display:block;
	}