/*reset*/

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-style: none;

}
/*endreset*/

main .mastermemo {
    width: 100%;
    
}
/*Imagen de fondo*/

main img {
    display: block;
    opacity: 0.6;
    position: absolute;
    left: 0;
    top: 42px;
    width: 100%;
    height: 100%;
    height: auto;
}


/*Header*/

header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-style: italic;
    color: azure;
    background-color: rgb(214, 16, 16);
    border-bottom: 5px;
    border-color: black;
    border-bottom-style: solid;

}

/*configuracion main*/

main section .contenedormemo {
    position: relative;
    display: flex;
    margin: auto;
    width: 80%;
    flex-wrap: wrap;
    flex-direction: row;
    text-decoration: none;
    justify-content: center;
    text-align: center;
    align-items: center;
}

main section .contenedormemo a {
    display: flex;
    justify-content: center;
}

main section .contenedormemo a:link {
    text-decoration: none;
    background-color: rgb(250, 103, 103);
    padding: 30px 70px;
    font-size: 25px;
    border-radius: 5px;
    display: flex;


}

/*Tarjeta 1*/

main section .contenedormemo .caja1 {
    order: 3;
    width: 25%;
    padding: 50px
}

main section .contenedormemo .caja1 a {
    text-decoration: none;
    padding: 30px 70px;
    border-radius: 5px;
    color: black;

}

main section .contenedormemo .caja1 a:visited {
    background-color: rgb(142, 142, 196);
}

main section .contenedormemo .caja1 a:hover{
    background-color: rgb(142, 142, 196);
}

/*Tarjeta 2*/


main section .contenedormemo .caja2 {
    order: 8;
    width: 25%;
    padding: 50px
}

main section .contenedormemo .caja2 a {
    text-decoration: none;
    padding: 30px 70px;
    border-radius: 5px;
    font-size: 25px;
    color: black;
}

main section .contenedormemo .caja2 a:visited {
    background-color: rgb(142, 142, 196);
}

main section .contenedormemo .caja2 a:hover{
    background-color: rgb(142, 142, 196);
}


/*Tarjeta 3*/


main section .contenedormemo .caja3 {
    order: 12;
    width: 25%;
    padding: 50px
}

main section .contenedormemo .caja3 a {
    text-decoration: none;
    padding: 30px 70px;
    border-radius: 5px;
    font-size: 25px;
    color: black;
}

main section .contenedormemo .caja3 a:visited {
    background-color: rgb(88, 178, 190);
}

main section .contenedormemo .caja3 a:hover{
    background-color: rgb(88, 178, 190);
}


/*Tarjeta 4*/

main section .contenedormemo .caja4 {
    order: 6;
    width: 25%;
    padding: 50px
}

main section .contenedormemo .caja4 a {
    text-decoration: none;
    padding: 30px 70px;
    border-radius: 5px;
    font-size: 25px;
    color: black;
}

main section .contenedormemo .caja4 a:visited {
    background-color: rgb(88, 178, 190);
}

main section .contenedormemo .caja4 a:hover{
    background-color: rgb(88, 178, 190);
}


/*Tarjeta 5*/

main section .contenedormemo .caja5 {
    order: 10;
    width: 25%;
    padding: 50px
}

main section .contenedormemo .caja5 a {
    text-decoration: none;
    padding: 30px 70px;
    border-radius: 5px;
    font-size: 25px;
    color: black;
}

main section .contenedormemo .caja5 a:visited {
    background-color: rgb(93, 160, 66);
}

main section .contenedormemo .caja5 a:hover{
    background-color: rgb(93, 160, 66);
}

/*Tarjeta 6*/

main section .contenedormemo .caja6 {
    order: 11;
    width: 25%;
    padding: 50px
}

main section .contenedormemo .caja6 a {
    text-decoration: none;
    padding: 30px 70px;
    border-radius: 5px;
    font-size: 25px;
    color: black;
}

main section .contenedormemo .caja6 a:visited {
    background-color: rgb(93, 160, 66);
}

main section .contenedormemo .caja6 a:hover{
    background-color: rgb(93, 160, 66);
}

/*Tarjeta 7*/

main section .contenedormemo .caja7 {
    order: 7;
    width: 25%;
    padding: 50px
}

main section .contenedormemo .caja7 a {
    text-decoration: none;
    padding: 30px 70px;
    border-radius: 5px;
    font-size: 25px;
    color: black;
}

main section .contenedormemo .caja7 a:visited {
    background-color: rgb(210, 223, 138);
}

main section .contenedormemo .caja7 a:hover{
    background-color: rgb(210, 223, 138);
}

/*Tarjeta 8*/

main section .contenedormemo .caja8 {
    order: 9;
    width: 25%;
    padding: 50px
}

main section .contenedormemo .caja8 a {
    text-decoration: none;
    padding: 30px 70px;
    border-radius: 5px;
    font-size: 25px;
    color: black;
}

main section .contenedormemo .caja8 a:visited {
    background-color: rgb(210, 223, 138);
}

main section .contenedormemo .caja8 a:hover{
    background-color: rgb(210, 223, 138);
}

/*Tarjeta 9*/

main section .contenedormemo .caja9 {
    order: 2;
    width: 25%;
    padding: 50px
}

main section .contenedormemo .caja9 a {
    text-decoration: none;
    padding: 30px 70px;
    border-radius: 5px;
    font-size: 25px;
    color: black;
}

main section .contenedormemo .caja9 a:visited {
    background-color: rgb(51, 54, 202);
}

main section .contenedormemo .caja9 a:hover{
    background-color: rgb(51, 54, 202);
}

/*Tarjeta 10*/

main section .contenedormemo .caja10 {
    order: 1;
    width: 25%;
    padding: 50px;
    
}

main section .contenedormemo .caja10 a {
    text-decoration: none;
    padding: 30px 70px;
    border-radius: 5px;
    font-size: 25px;
    color: black;
}

main section .contenedormemo .caja10 a:visited {
    background-color: rgb(51, 54, 202);
}

main section .contenedormemo .caja10 a:hover{
    background-color: rgb(51, 54, 202);
}

/*Tarjeta 11*/

main section .contenedormemo .caja11 {
    order: 5;
    width: 25%;
    padding: 50px
}

main section .contenedormemo .caja11 a {
    text-decoration: none;
    padding: 30px 70px;
    border-radius: 5px;
    font-size: 25px;
    color: black;
}

main section .contenedormemo .caja11 a:visited {
    background-color: rgb(212, 68, 188);
}

main section .contenedormemo .caja11 a:hover{
    background-color: rgb(212, 68, 188);
}

/*Tarjeta 12*/

main section .contenedormemo .caja12 {
    order: 4;
    width: 25%;
    padding: 50px
}

main section .contenedormemo .caja12 a {
    text-decoration: none;
    padding: 30px 70px;
    border-radius: 5px;
    font-size: 25px;
    color: black;
}

main section .contenedormemo .caja12 a:visited {
    background-color: rgb(212, 68, 188);
}

main section .contenedormemo .caja12 a:hover{
    background-color: rgb(212, 68, 188);
}

footer {
    position: fixed;
    right: 0;
    bottom: 0;
    margin: 30px;
}

/*Responsive 0px - 767px -> Phone*/
@media screen AND (max-width: 767px) {

    main section .contenedormemo {
        width: 100%;
    }


    main section .contenedormemo .caja1 {
        width: 25%;
        padding: 50px
    }

    main section .contenedormemo .caja1 a {
        text-decoration: none;
        padding: 15px 45px;
    }

    main section .contenedormemo .caja2 a {
        text-decoration: none;
        padding: 15px 45px;
    }

    main section .contenedormemo .caja3 a {
        text-decoration: none;
        padding: 15px 45px;
    }

    main section .contenedormemo .caja4 a {
        text-decoration: none;
        padding: 15px 45px;
    }

    main section .contenedormemo .caja5 a {
        text-decoration: none;
        padding: 15px 45px;
    }

    main section .contenedormemo .caja6 a {
        text-decoration: none;
        padding: 15px 45px;
    }

    main section .contenedormemo .caja7 a {
        text-decoration: none;
        padding: 15px 45px;
    }

    main section .contenedormemo .caja8 a {
        text-decoration: none;
        padding: 15px 45px;
    }

    main section .contenedormemo .caja9 a {
        text-decoration: none;
        padding: 15px 45px;
    }

    main section .contenedormemo .caja10 a {
        text-decoration: none;
        padding: 15px 45px;
    }

    main section .contenedormemo .caja11 a {
        text-decoration: none;
        padding: 15px 45px;
    }

    main section .contenedormemo .caja12 a {
        text-decoration: none;
        padding: 15px 45px;
    }
}