@import url('https://fonts.googleapis.com/css?family=Kreon:700|Raleway');
@import url('https://fonts.googleapis.com/css?family=Rubik:400,500,900');
@font-face {
  font-family: 'soho';
  src: url("../fonts/SohoStd-Bold.otf");
  font-weight:normal;
  font-style: normal;
}

.madre{
width: 320px;
height:568px;
overflow: none;
}
.madref{
width: 320px;
height:568px;
overflow: none;
background-color: #fedfae;
}
.madrefu{
    width: 320px;
    height:568px;
    padding: 50%;
}

.grande{
    background-color: black;
}
.grade{
    background-color: #fedfae;
    width: 320px;
    height: 568;
    padding-top: 7em;
    align-content: center;
    justify-content: center;
}

.formu{
    padding: 0.5em;
}

.logon{
    padding-top:50px;
}

* {
margin:0;
padding:0;
}
 
body {

font-family: 'Rubik', sans-serif;
font-weight: 500;
width: 320px;
height: 568px;
}
 
header {
width:100%;
}
 
header nav {
width:90%;
max-width:1000px;
margin:20px auto;
background:#ffb100;
}
 
.menu_bar {
display:none;
}
 
header nav ul {
overflow:hidden;
list-style:none;
}
 
header nav ul li {
float:left;
}
 
header nav ul li a {
color:#343434;
padding:20px;
display:block;
text-decoration:none;
}
 
header nav ul li span {
margin-right:10px;
}
 
header nav ul li a:hover {
background:#037E8C;
}
 
section {
padding:0px;
font-family: 'sohobold';
}
 
@media screen and (max-width:800px ) {
header nav {
width:80%;
height:100%;
left:-100%;
margin:0;
position: fixed;
}
 
header nav ul li {
display:block;
float:none;
border-bottom:1px solid rgba(255,255,255, .3);
}
 
.menu_bar {
display:block;
width:100%;
background:#ccc;
}
 
.menu_bar .bt-menu {
display:block;
padding:20px;
background:#3b3b3b;
color:#fff;
text-decoration:none;
font-weight: bold;
font-size:25px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
 
.menu_bar span {
float:right;
font-size:40px;
}
    
.button {
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    border-radius: 15px;
	background:#f5BB07;
	color:#1f1e1e;
	display:inline-block;
	font-size:1.25em;
	margin:0 auto;
    align-content: center;
	padding:10px 0;
	text-align:center;
	width:200px;
	text-decoration:none;
	box-shadow:0px 3px 0px #373c3c;
    border: 2px solid #CA4F23;
   
}
    
    .botton {
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    border-radius: 15px;
	background:#ffb100;
	color:#464545;
	display:inline-block;
	font-size:1.25em;
	margin:40% 0 0 0;
    align-content: center;
	padding:10px 0;
	text-align:center;
	width:200px;
	text-decoration:none;
	box-shadow:0px 3px 0px #373c3c;
    border: 2px solid #CA4F23;
}
   
    .beton {
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    border-radius: 15px;
	background:#ffb100;
	color:#464545;
	display:inline-block;
	font-size:1.25em;
	margin:15% 0 0 0;
    align-content: center;
	padding:10px 0;
	text-align:center;
	width:200px;
	text-decoration:none;
	box-shadow:0px 3px 0px #373c3c;
    border: 2px solid #CA4F23;
        
}  
   
      .bitton{
    font-family: 'Rubik', sans-serif;
    font-weight: 500;
    border-radius: 15px;
	background:#ffb100;
	color:#464545;
	display:inline-block;
	font-size:1.25em;
	margin:20% 0 0 0;
    align-content: center;
	padding:10px 0;
	text-align:center;
	width:200px;
	text-decoration:none;
	box-shadow:0px 3px 0px #373c3c;
    border: 2px solid #CA4F23;
        
}  
    
    .for{
        width: 320px;
        padding: 1em;
        margin: 10%;
        background-color: #fedfae;
    }    
    
    .centro{
    height:63.5%;
    width: 60%;
    align-content: center;
    float:left;
    padding-top: 9em;

    }
    
    .izq {
        float:left;
        padding-top: 13em;
        width: 20%;
        height:63.5%;
    
    }
    
    .der{
        height:63.5%;
        float:left;
        padding-top: 13em;
        width: 20%;
    }
    
    .padre{
        background-image: url(../img/tenis.png);
    }
    
    .rutinas{
        height:50%;
        background-image: url(../img/pesas.jpg);
    }
    
    .dietas{
        height:50%;
        background-image: url(../img/comida.jpg);
    }
    
     h3{
        color:#ffb100;
        font-size: 2em;
        font-family: 'Rubik', sans-serif;
        font-weight: 900
    }
    
    h4{
        font-family: 'Rubik', sans-serif;
        font-weight: 500;
        font-size: 1em;
        color: aliceblue;
        
    }
    
    .pesas{
        color:#fff;
        text-decoration: none;
        text-align: center;
        font-family: 'soho', serif;
        font-size: 2.5em;
        padding-top: 9em;
        
    }
    
    .selector{
        height:100%;
        background-image: url(../img/gym.png);}
     .giu{
        height:100%;
        background-color: #fedfae;
        }   
    }
     .selecton{
        height:100%;
        background-image: url(../img/dietas.png);
    }
    
     .selectore{
       
        height:100%;
        background-image: url(../img/gimnasioa2.png);
    
    }
    li{
        font-family: 'Raleway', sans-serif;
        font-size: 1.1em;
        color: #fff;
        text-align: left;
    
    }
    p{
        font-family: 'Rubik', sans-serif;
        font-size: 1em;
        color: #343434;
        text-align: center;
    
        
    }
   
input[type="text"],
input[type="password"],
input[type="mail"],
input[type="number"] {
    border: 1px solid #fff;
    background:#FFF;
    padding:20px;
    width: 70%;
    margin-bottom: 5px;
    border-radius: 5px;
    height: 45px;
    color: #fff;
	outline: none;
    align-items: center;
}
    
    .registrate{
        padding:0.5em;
    }
    .enviar{
        padding: 0.5em;
    }

.mariano{
    background-color: #fedfae;
    height: 45%;
    position: relative;
}
.marizq{
    
    position: absolute;
    width: 40%;
    height: 40%;
    float: left;
    padding: 10% 5% 5% 5%;
}

.marizq1{
    
    position: absolute;
    width: 40%;
    height: 40%;
    float: left;
    padding: 5% 5% 5% 5%;
}

.marder{

    position: absolute;
    width: 40%;
    height: 40%;
    float: left;
    left: 10em;
    padding: 10% 5% 5% 5%;
}

.marder1{

    position: absolute;
    width: 40%;
    height: 40%;
    float: left;
    left: 10em;
    padding: 5% 5% 5% 5%;
}

.marabajo{
    
    position: absolute;
    top:8.9em;
    width: 80%;
    height: 45%;
    text-align: center;
    padding: 5% 10% 0 10%;
    
}

.marabajo1{
    
    position: absolute;
    top:8.9em;
    width: 80%;
    height: 45%;
    text-align: center;
    padding: 10% 10% 0 10%;
    
}

.turno{
    background-color: #fedfae;
    text-align: center;
    height: 100%;
    padding-top: 2em;
    
}

.conten{
    background-color: #fedfae;
    position: relative;
    height: 21.5%;
    
    }

.uno{
    
    position: absolute;
    width: 50%;
    height: 100%;
    padding: 5% 10% 5% 10%;
    }

.dos{
    
    position: absolute;
    width: 50%;
    height: 100%;
    float: left;
    left:10em;
    padding: 5% 10% 5% 10%;
    }

.tenis{
    background-image: url(../img/tenis.png);
    height: 568px;
    
}

.basquet{
    background-image: url(../img/basquet.png);
    height: 568px;
    
}
.atletismo{
    background-image: url(../img/atletismo.png);
    height: 568px;
    
}
.natacion{
    background-image: url(../img/natacion.png);
    height: 568px;
    
}
.futbol{
    background-image: url(../img/futbol.png);
    height: 568px;
    
}
.fav{
    background-image: url(../img/favoritos.png);
    height: 568px;
    
}
.populares{
    background-image: url(../img/populares.png);
    height: 568px;
    
}
.logros{
    background-image: url(../img/metas.png);
    height: 568px;
    
}