*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    font-family: 'lora';
    align-content: center;
    
}*/

body{
    font-family: 'Lora';
    height: auto;
    

}
.body{
    font-family: 'Lora';
    background: url(../images/fondo.jpg);
    background-repeat: repeat;
    height: auto;
    flex-wrap: wrap;
}

.body::before{
    content:"";
    background-image: linear-gradient(to top, #9890e3 0%, #b1f4cf 100%);
    width: 100%;
    min-height: 100%;
    height: 100%;
    position: fixed;
    opacity: 0.5;
    display: flex;
    top:0;
    left: 0;
    bottom: 0;
    z-index: -1;
    /* el z-index lo que hizo fue resolverme el gradiente que me afectaba todo el body, poniendolo por debajo de todo por eso es -1 */
}

h2 {
    display: block;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0em;
    margin-inline-end: 0em;
    font-weight: bold;
}

nav{
    padding: 1%;
    height: 5em;
    font-size: 1em;
    font-weight: 600;
    width: auto;
    background-color: #8ac5a4;
}
nav ul{
    float: right;
    width: 100%;
    text-align: right;
}

nav li{
    display: inline;
    margin-left: 1%;
    margin-right: 1%;
    letter-spacing: 0.1em;
    cursor: pointer;
    text-transform: uppercase;
    list-style-type: none;
    
}

nav ul li a{
    color: white;
    text-decoration: none;
}

iframe{
    width: 522px;
    height: 300px;
}

.navegacion a{
    margin-top: 3%;
    margin-left: 1%;
    margin-right: 1%;
    letter-spacing: 0.1em;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
}

.navegacion a, a:hover{
    color: black;
    font: bolder;
}

.checkbtn{
    font-size:2em;
    color: white;
    float: right;
    line-height: 80px;
    margin-right: 2em;
    cursor: pointer;
    display: none;
}
#check{
    display: none;
}

/* clase superdiv para las imagenes en flex y sus respectivos textos en el index */
.superdiv{
    height: auto;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    padding: 0.5em;
    justify-content: space-around;
    flex-flow: row wrap;
    align-content: center;
}


.superdiv p{
    text-align: inherit;
    margin: auto;
    font-weight: bold;
    display: inline-block;
    position: relative;
}


#a{
    order:1;
    display: inline-flex;
    padding: 1em;
    font-size: 1.3em;
    width: 70%;
    border-radius: 20px;
    box-sizing: content-box;
    position: relative;
    
}

#a img{
    margin-right: 2em;

}


#b{
    order:2;
    display: inline-flex;
    padding: 7px;
    font-size: 20px;
    width: 70%;
    border-radius: 20px;
    box-sizing: content-box;
    position: relative;
}

#b img{
    margin-left: 2em;

}

#c{
    order:3;
    display: inline-flex;
    padding: 7px;
    font-size: 20px;
    width: 70%;
    border-radius: 20px;
    box-sizing: content-box;
    align-content: center;
    position: relative;
}

#c img{
    margin-right: 2em;
    

}

/* Forma que le di a las imagenes dentro del superdiv */
.shape {
    display: flex;
    width: 250;
    height: 250;
    border: 5px solid #9d95e3;
    border-radius: 30px 30px 30px 30px;
    
}


/* Logo al lado del H1 titulo principal de la pagina */

.imageNav{
width: 100%;
height: 7em;
background-image: linear-gradient(to top, rgba(255,0,0,0), rgb(236, 236, 236));
background-size: cover;
}
.imageNav img{
    float: left;
    width: 5.5em;
    height: 5.5em;
    margin-left: 2em;
    margin-top: 0.5em;
}

/* Titulo principal de la pagina */
    .casititulo{
        float:left;
        margin-left:1em;
        font-weight: bold;
        font-size: 2.7em;
        
    }
    

/* Propiedades de la clase del segundo titulo > Una mujer puede Jugar con espadas?  */
    .segundotitulo{
        align-content: center;
        text-align: center;
        margin: 0;        
    }

    .segundotitulo h2{
        text-align: center;
        font-size: 2em ;
        padding-top: 1em;
    }

    .segundotitulo p{
        text-align: center;
        padding: 20px;
        margin-right: 20%;
        margin-left: 20%;
    }

    .segundotitulo table{
        align-content: center;
        margin: auto;
        padding: 4em;
        
    }

    .segundotitulo th {
        background-color: rgba(162, 151, 231, 0.5);
        width: 10em;
        padding: 1em;
        }
    .segundotitulo td{
        padding: 0.5em;
    }

    .fondo_traslucido {
        margin: 1em 10em 3em 15em;
        width: 70%;
        padding: 0;
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 20px;
        margin-right: 20em;
    }



/* Contenedor de Girls - grid*/
.contenedor{
    display: grid;
    grid-template-columns: 20em 20em 20em;
    grid-template-rows: 23em 23em 23em;
    margin-top: 4%;
    box-sizing: content-box;
    margin: 1em 15em 3em 15em;
    text-align: center;
    justify-content: center;
}

.contenedor > div{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.contenedor figure{
    overflow: hidden;
    cursor: pointer;
    position: relative;
    width: 15.5em;
    height: 100%;
    align-items: center;
    margin-left: 10%;
    margin-right: 10%;
}


.contenedor figure img{
    transition: all 500ms ease-out;
    width: 15.5em;
}

.contenedor figure .capa{
    top: 0;
    background: rgba(162, 151, 231, 0.5);
    transition: all 500ms ease-out;
    opacity: 0;
    visibility: hidden;
    text-align: center;
    width: 15.5em;
    height: 89%;
    border: 5px;
    border-radius: 30px 30px 30px 30px;
    padding: auto;
    position: absolute;
    
}

.contenedor figure:hover > .capa{
    opacity: 1;
    visibility: visible;
}

.contenedor figure .capa h3{
    color: white;
    font-weight: 300;
    margin-bottom: 50%;
    transition: all 500ms ease-in-out;
    margin-top: 60%;
    text-shadow: 1px 1px 2px black;
    position: relative;
    padding: 0;
}

.shape2 {
    display: grid;
    border: 6px solid #9d95e3;
    border-radius: 30px 30px 30px 30px;
    padding: auto;
    align-items: center;
}
/* Slider de aboutme*/

.slider{
    width: 95%;
    margin: auto;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 10%;
}

.slider ul{
    padding: 0;
    display: flex;
    width: 400%;
    animation: cambio 15s infinite alternate;
    margin-bottom: 10%;
}

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

.slider img{
    width: 40%;
    height: auto;
}

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

/* formulario de contacto */

.wrapper{
    position: relative;
    margin: auto; 
    display: flex;
    width: 100%;
    max-width: 40em;
    background:rgb(138 197 164);
    padding: 3em;
    border-radius: 1.2em;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.wrapper .title h1 {
    color: black;
    text-align: center;
    margin-bottom: 25px;
}

.contact-form{
        display: flex;
}


.input-fields{
    display: flex;
    flex-direction: column;
    margin-right: 4%;
    }

    .input-fields,
    .msg{
        width: 50%;
    }

.input-fields .input,
.msg textarea{
    margin: 1em 0;
    background: transparent;
    border: 0;
    border-bottom: 2px solid black;
    padding: 1em;
    color: black;
    width: 100%;
}

.msg textarea{
    height: 4em;
    width: 20em;
}
::-webkit-input-placeholder{
    /* para Chrome, opera o safari*/
    color: white;
}

::-moz-input-placeholder{
    /* para firefox 19 */
    color: white;
}

::-ms-input-placeholder{
    /* para IE 10+ */
    color: white;
}

.btn{
    background: #9d95e3;
    text-align: center;
    padding: 15px;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
}

.msg textarea{
    height: 80px;
}
.input-fields,
msg{
    width: 100%;
}

/* Propiedades del footer */
.pie{
    text-align:center;
    margin-bottom: 5px;
    margin-top: 5px;
    width: 100%;
    padding: 1px;
    background-color: rgba(156, 124, 231, 0.7);
}

.pie p{
    color: white;
    margin: 10px;
    margin-top: 0;

}

.pie i{
    color: white;
    font-size: 25px;

}

.pie img{
    width: auto;
    max-width: 5%;
}




    @media screen and (max-width: 950px){
    .checkbtn{
        display: block;
    }
    nav ul{
        position: fixed;
        width: 100%;
        height: 100vh;
        background: #9890e3;
        top: 4em;
        left: -100%;
        text-align: center;
        transition: all 0.7s;
        z-index: 10;
    }

    nav, ul, li{
        display: block;
        margin: 0px 0;
        line-height: 30px;
    }

    nav ul, li, a{
        font-size: 20px;
        display: block;
        text-align: center;
    }

    a:hover, a.navigacion{
        background: none;
        color: grey;
    }

    #check:checked ~ ul{
        left: 0;
    }

    .fondo_traslucido{
        margin: 1em 5em 3em 7em;
    }

    .contenedor{
        display: block;
        margin-bottom: 1em;
        margin-left: 4em;
        margin-right: 4em;
    }

    .contenedor figure .capa{
        height: 100%;
        width: 100%;
        margin-bottom: 2em;
    }

    iframe{
        width: 417px;;
        height:240px;
    }

    @media screen and (max-width: 800px) {
        .body2, .contact-form {   
        flex-direction: column;
        }
        .imageNav img{
            width: 4.8em;
            height: 4.8em;
        }
        h1.casititulo{
            font-size: 2.2em;
        }
        pre.casititulo{
            font-size: 0.4em;
        }
        #a, #b, #c{
            flex-direction: column;
            
        }
        .fondo_traslucido{
            margin: 1em 5em 3em 7em;
        }
        .shape2{
            border: 4px solid #9d95e3;
            border-radius: 20px 20px 20px 20px;
        }

        .contenedor figure .capa{
            height: 17em;
            width: 12em;
            margin-bottom: 2em;
        }
        img.shape2, .contenedor figure img{
                width: 12em;
                height: 17em;
                margin-bottom: 2em;
        }

        .segundotitulo p, table{
            font-size: 0.9em;
        }
        .segundotitulo h2, h1{
            font-size: 1.7em;
        }
        h2.segundotitulo{
            font-size: 1.3em
        }
        
    }

    @media screen and (max-width: 650px) {
        iframe{
            width: 334px;;
            height:192px;
        }
    }

        @media screen and (max-width: 420px) {
            h2.segundotitulo{
                font-size: 1em;
            }
            iframe{
                width: 260px;;
                height:152px;
            }
            #a, #b, #c{
                display:block;
        padding: 7px;
        width: 70%;
        border-radius: 20px;
        box-sizing: content-box;
        
            }
        }
}