*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "raleway";
}
.body{
    background: #0B1416;
}
.boton{
    font-weight: 500;
    font-size: 16px;
    text-decoration: none;

}

.header{
    display: flex;
    justify-content: flex-end;
    align-items:baseline;
    padding: 20px 10%;
}

.logo{
    cursor: pointer;
    margin-right: auto;
}
.nav-links{
    list-style: none;
   
}
.nav-links li{
    
    display: inline-block;
    padding: 0px 10px;
}
.nav-links li a {
    text-decoration: none;
    font-weight:lighter;
    font-size: 1.5em;
    transition: all 0.3s ease 0s;
    color: #fafafa;

}
.nav-links li a:hover{
    color: #fafafa;
    font-weight: 700;

}
.boton{
    font-size: 1.5rem;
    font-weight:normal;
    background-color: #fafafa;
    padding: 4px 15px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    color: #0B1416;
    transition: all 0.3s ease 0s;
}

.boton:hover{
    background-color: #fafafa;
    font-weight: 700;
}

.main_index {
    padding-left: 20%;
    
}
.main_index img{
    max-width: 75%;
}

section{
    padding: 25px 10%;
}
/*Estilo contenido*/

/*contenido 1*/
.mundo-ecos{
    text-align: center;
    color: #fafafa;
}

.img-instagram{
    padding-top: 100px;
    display: flex;
    justify-content:space-evenly;        
}
.waterfall img{
    border-radius: 15%;
}
.experimentlarge img{
    border-radius: 15%;
}
.match img{
    border-radius: 15%;
}
.waterfall img:hover{
    width: 245px;
    transition: all 0.3s ease 0s;
}
.experimentlarge img:hover{
    width: 245px;
    transition: all 0.3s ease 0s;
}

.match img:hover{
    width: 245px;
    transition: all 0.3s ease 0s;
}
.link-instagram{
    text-align: center;
    
}
.link-instagram a{
    color: #fafafa;
}
.content_1{
    padding-top: 100px;
}
.etiqueta_1{
    display: flex;
    justify-content: space-around;
   
}
/*aqui es donde iran las imagenes de Aiko*/
.img-1{   
    /*background-color: #fafafa;
    padding: 23px;
    color: #0B1416;*/
    border-radius: 10px;
    align-items: center;
    max-width: 20%;
}
.content_1 h3{
    font-size: 30px;
    color:#fafafa;
    padding-left: 5rem;
    font-weight: bold;
}
.etiqueta_1 p{
    width: 35rem;
    font-size: 28px;
    color: #fafafa;
}

/*contenido 2*/
.etiqueta_2{
    padding-top: 100px;
    display: flex;
    justify-content: space-around;
   
}

.img-2{
    /*background-color: #fafafa;
    padding: 23px;*/
    color: #0B1416;
    border-radius: 10px;
}
.etiqueta_2 div h3{
    font-size: 30px;
    font-weight: 800;
    color:#fafafa;
    
}
.etiqueta_2 div p{
    width: 35rem;   
    font-size: 28px;
    color: #fafafa;
}

/*estilo apartado personajes*/
.personajes {
    padding-top: 100px;
}
.personajes h1{
    font-size: 60px;
    color: #fafafa;
    padding: 40px;
    
}
.seccion-1{
    display: flex;
    justify-content: space-between;
    align-items:flex-start;
}

.seccion-2{
    padding-top: 10%;
    display: flex;
    justify-content:space-around; /*alinear en lo vertical "///" */
    align-items: flex-start; /*alinear en lo horizontal "- - -" */
}

/*Tarjeta Leder*/
.caja-leder h4{
    font-size: 22px;
    padding-bottom: 10px;
    font-weight: bold;
} 
.leder{
    width: 16rem;
    background-color: #fafafa;
    justify-content: space-between;
    border-radius: 50px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.img-fondo-leder{
    background-color: #55B68D;
    border-radius: 50px;
}
.leder img{    
    margin-left:auto ;
    margin-right: auto;
    display: block;    
}

.caja-leder{
    background-color: #fafafa;
    padding:30px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;    
}

/*Tarjeta Isin*/
.caja-isin h4{
    font-size: 22px;
    padding-bottom: 10px;
    font-weight: bold;
} 
.isin{
    width: 18rem;
    background-color: #fafafa;
    justify-content: space-between;
    border-radius: 50px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.img-fondo-isin{
    background-color: #55B68D;
    border-radius: 50px;
}
.isin img{    
    margin-left:auto ;
    margin-right: auto;
    display: block;    
}

.caja-isin{
    background-color: #fafafa;
    padding:30px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;    
}

/*tarjeta akamai*/
.caja-akamai h4{
    font-size: 22px;
    padding-bottom: 10px;
    font-weight: bold;
} 
.akamai{
    width: 18rem;
    background-color: #fafafa;
    justify-content: space-between;
    border-radius: 50px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.img-fondo-akamai{
    background-color: #55B68D;
    border-radius: 50px;
}
.akamai img{    
    margin-left:auto ;
    margin-right: auto;
    display: block;    
}

.caja-akamai{
    background-color: #fafafa;
    padding:30px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;    
}
/*tarjeta zatli*/
.caja-zatli h4{
    font-size: 22px;
    padding-bottom: 10px;
    font-weight: bold;
} 
.zatli{
    width: 18rem;
    background-color: #fafafa;
    justify-content: space-between;
    border-radius: 50px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.img-fondo-zatli{
    background-color: #55B68D;
    border-radius: 50px;
}
.zatli img{    
    margin-left:auto ;
    margin-right: auto;
    display: block;    
}

.caja-zatli{
    background-color: #fafafa;
    padding:30px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;    
}

/*tarjeta powa*/
.caja-powa h4{
    font-weight: bold;
    font-size: 22px;
    padding-bottom: 10px;
} 
.powa{
    width: 18rem;
    background-color: #fafafa;
    justify-content: space-between;
    border-radius: 50px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.img-fondo-powa{
    background-color: #55B68D;
    border-radius: 50px;
}
.powa img{    
    margin-left:auto ;
    margin-right: auto;
    display: block;    
}

.caja-powa{
    background-color: #fafafa;
    padding:23px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;    
}

/*hover tarjetas*/
.leder:hover{
    width: 20rem;
    background-color: #fafafa;
    justify-content: space-between;
    border-radius: 50px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    transition: all 0.3s ease 0s;
}

.isin:hover{
    width: 20rem;
    background-color: #fafafa;
    justify-content: space-between;
    border-radius: 50px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    transition: all 0.3s ease 0s;
}
.akamai:hover{
    width: 20rem;
    background-color: #fafafa;
    justify-content: space-between;
    border-radius: 50px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    transition: all 0.3s ease 0s;
}

.zatli:hover{
    width: 20rem;
    background-color: #fafafa;
    justify-content: space-between;
    border-radius: 50px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    transition: all 0.3s ease 0s;
}

.powa:hover{
    width: 20rem;
    background-color: #fafafa;
    justify-content: space-between;
    border-radius: 50px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    transition: all 0.3s ease 0s;
}
/*formulario*/

.form-register{
    width: 900px;
    display: inline-block;
    justify-content: space-around;
    padding-left: 13rem;
    padding-top: 10rem;
    padding-bottom: 10rem;
}

.field{
    margin-top: 15px;
    background-color: #fafafa;
    width: 100%;   
    padding-left: 10px;
    padding-right: 40px;
    padding-top: 40px;
    padding-bottom: 100px;
    border-radius: 25px;
    border: 0px;
    outline: none;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.input{
    margin-top: 20px;
    background-color: #fafafa;
    width: 100%;
    padding-left: 10px;
    padding-right: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 25px;
    border-color: white;
    border: 0px;
    outline: none;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.submit{
    margin-top: 20px;
    background-color: #55B68D;
    border: none;
    padding: 20px;
    font-size: 25px;
    font-weight: bold;
    color: #fafafa;
    border-radius: 25px;
    padding-left: 35px;
    padding-right: 35px;
}
.form-register p{
    font-size: 40px;
    font-weight: bold;
    color: #55B68D;
}

/*Footer*/
.footer-basic {
    padding:40px 0;
    background-color:#ffffff;
    color:#4b4c4d;
  }
  
  .footer-basic ul {
    padding:0;
    list-style:none;
    text-align:center;
    font-size:18px;
    line-height:1.6;
    margin-bottom:0;
  }
  
  .footer-basic li {
    padding:0 10px;
  }
  
  .footer-basic ul a {
    color:inherit;
    text-decoration:none;
    opacity:0.8;
  }
  
  .footer-basic ul a:hover {
    opacity:1;
  }
  
  .footer-basic .social {
    text-align:center;
    padding-bottom:25px;
  }
  
  .footer-basic .social > a {
    font-size:24px;
    width:40px;
    height:40px;
    line-height:40px;
    display:inline-block;
    text-align:center;
    border-radius:50%;
    border:1px solid #ccc;
    margin:0 8px;
    color:inherit;
    opacity:0.75;
  }
  
  .footer-basic .social > a:hover {
    opacity:0.9;
  }
  
  .footer-basic .copyright {
    margin-top:15px;
    text-align:center;
    font-size:13px;
    color:#aaa;
    margin-bottom:0;
  }