html, body{
    margin: 0px;
    padding: 0px;
}

.fondo{
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    padding-bottom: 30px;
    z-index: 8000;
    position: absolute;
}

.imgfondo{
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: 0;
    top: 0px;
    left: 0px;
}

.fondo h1{
    margin: 0px;
    color: white;
    text-align: center;
    padding: 5%;
    box-sizing: border-box;
    font-size: 4em;
    font-family: "Arvo";
}

.fotos{
    width: 90%;
    margin: 10px auto;
    background-color: rgba(255, 255, 255, 0.9);
    box-sizing: border-box;
    padding: 1%;
    border-radius: 8px;
}

.foto{
    width: 31%;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 2px;
    border: solid 3px #fff;
    padding-bottom: -10px;
    display: inline-flex;
    margin: 1%;
}

.foto img{
    width: 100%;
    cursor: pointer;
}
.textofoto{
    background-color: white;
    padding: 5px 10px;
    margin-top: -10px;
    font-family: "Roboto";
    font-size: 1.1em;
    text-align: center;
}


#imagengrande{
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100vh;
    display: none;
    z-index: 9000;
}


.contenedorimagengrande{
    background-color: white;
    width: 70%;
    margin: 2% auto;
    box-sizing: border-box;
}


.contenedorimagengrande img{
    width: 98%;
    margin: 1%;
}

.cerrarboton{
    width: 40px;
    height: 40px;
    padding: 10px;
    line-height: 20px;
    text-align: center;
    box-sizing: border-box;
    background-color: #EEE;
    color: black;
    border-radius: 50%;
    position: absolute;
    top: 10px;
    cursor: pointer;
    right:9%;
    box-shadow: 0px 0px 10px 0px white;
}

.volver{
    text-align: center;
    padding: 5% 0px;
}

.volver a{
    color: white;
    text-decoration: none;
    font-size: 2em;
    opacity: 0.5;
    font-family: "Roboto";
    transition: all ease 500ms;
    width: 100%;
    text-align: center;
}

.volver a:hover{
    opacity: 1;
}


@media (max-width: 900px){
    .foto{
        width: 47%;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 2px;
        border: solid 3px #fff;
        padding-bottom: -10px;
        display: inline-flex;
        margin: 1%;
    }

    .contenedorimagengrande{
        background-color: white;
        width: 100%;
        margin: 10vh auto;
        box-sizing: border-box;
    }


    .cerrarboton{
        width: 40px;
        height: 40px;
        padding: 10px;
        line-height: 20px;
        text-align: center;
        box-sizing: border-box;
        background-color: #EEE;
        color: black;
        border-radius: 50%;
        position: absolute;
        top: 10vh;
        cursor: pointer;
        right:0px;
        box-shadow: 0px 0px 10px 0px white;
    }
}

@media (max-width: 500px){

    .foto{
        width: 47%;
        height: 10%;
        box-sizing: border-box;
        overflow: hidden;
        border-radius: 2px;
        border: solid 3px #fff;
        padding-bottom: -10px;
        display: inline-flex;
        margin: 1%;
    }

    .foto img{
        width: 100%;
        cursor: pointer;
        height: 60%;
    }

    .contenedorimagengrande{
        background-color: white;
        width: 100%;
        margin: 25vh auto;
        box-sizing: border-box;
    }


    .cerrarboton{
        width: 40px;
        height: 40px;
        padding: 10px;
        line-height: 20px;
        text-align: center;
        box-sizing: border-box;
        background-color: #EEE;
        color: black;
        border-radius: 50%;
        position: absolute;
        top: 15vh;
        cursor: pointer;
        right:0px;
        box-shadow: 0px 0px 10px 0px white;
    }
}