* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

main {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}

.header {
    display: flex;
    flex-flow: row nowrap;
    border-bottom: solid 1px #e0e0e0;
}

.item1 {
    flex: 1 1 auto;
}

.item1 h1 {
    font-size: 50px;
    text-align: center;
}


.item2 {
    flex: 5 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item2 a,
.item2 img,
.item2 input {
    margin: 0 5px;
}

.item3 {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.respmenu {
    display: none;
}

.respmenu input[type="checkbox"],
.respmenu .fa-bars,
.respmenu .fa-times {
    position: absolute;
    box-sizing: border-box;
    width: 48px;
    height: 48px;
}

.respmenu .fa-bars,
.respmenu .fa-times {
    font-size: 48px;
    pointer-events: none;
}

.respmenu input[type="checkbox"] {
    opacity: 0;
}

.respmenu {
    background: #e8e9eb;
    min-height: 48px;
    position: relative;

}

.respmenu nav {
    display: none;
}

.respmenu input:checked~nav {
    display: block;
    position: absolute;
    top: 48px;
    right: 0px;
}

.respmenu input:checked~.fa-bars {
    display: none;
}

.respmenu input:not(:checked)~.fa-times {
    display: none;
}

.respmenu a {
    color: black;
    text-decoration: none;
    display: block;
    padding: 10px 20px;
    border-bottom: 2px solid #456789;
    width: 40vw;
    background: #dbdada;
}

nav {
    display: flex;
    flex-flow: row nowrap;
    border-bottom: solid 1px #e0e0e0;
    box-shadow: 0 1.5px 6px rgba(0, 0, 0, 1), 0 1.5px 6px rgba(0, 0, 0, 0.3);
}

.redes-sociales {
    display: none;
}

.item4 {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item4 a {
    margin: 0 5px;
}

.item5 {
    flex: 5 1 auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.item6 {
    background-color: rgb(255, 255, 255);
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item6 a {
    margin: 0 5px;
}

.container1 {
    width: 90%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    padding: 10px;
}

.subcontainer1 {
    flex: 3 1 60%;
}

.content1 {
    padding: 10px;
}

.content1 img {
    width: 100%;
}

.subcontainer2 {
    flex: 1 1 40%;
}


.content2 {
    flex: 1 1 auto;
    padding: 10px;
}

.content2 img {
    width: 100%;
    object-fit: cover;
}

span {
    color: #0289cb;
    font-size: 1.2em;
}

a {
    text-decoration: none;
    color: inherit;
    font: inherit;
    vertical-align: baseline;
}

a:hover {
    color: #0289cb;
}

.container2 {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    width: 90%;
    padding: 10px;
}

.content3,
.content4,
.content5,
.content6 {
    flex: 1 1 15%;
    padding: 10px;
}

.content3 img,
.content4 img,
.content5 img,
.content6 img {
    width: 100%;
    object-fit: cover;
}

.container3 {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    width: 90%;
    padding: 10px;
}

.subcontainer3 {
    flex: 1 1 40%;
}

.subcontainer4 {
    flex: 1 1 30%;
}

.subcontainer5 {
    flex: 1 1 30%;
}

.content7,
.content8,
.content9,
.content10,
.content11,
.content12 {
    padding: 10px;
}

.content7 img,
.content8 img {
    width: 100%;
    object-fit: cover;
}

.content9,
.content10,
.content11 {
    border-bottom: solid 1px rgb(0, 0, 0, 0.2);
}

.container4 {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    width: 90%;
    padding: 10px;

}

.content13,
.content14,
.content15,
.content16,
.content17,
.content18,
.content19,
.content20 {
    flex: 1 1 25%;
    padding: 10px;
}

.content13 img,
.content14 img,
.content15 img,
.content16 img,
.content17 img,
.content18 img,
.content19 img,
.content20 img {
    width: 100%;
    object-fit: cover;
}

.footer {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-top: solid 1px rgb(0, 0, 0, 0.8);
}

.footer a,
.footer p {
    font-size: 1.2em;
}

@media screen and (max-width: 768px) {
    main {
        flex-flow: column nowrap;
    }

    .header {
        flex-flow: column nowrap;
    }

    .item1 {
        flex: 1 1 auto;
    }

    .item2 {
        flex: 1 1 auto;
    }

    .item2 img {
        width: 24px;
        height: 38px;
    }

    .item3 {
        flex: 1 1 auto;
    }

    .respmenu {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
    }

    nav {
        flex-flow: column wrap;
    }

    .redes-sociales {
        display: block;
    }

    .item4 {
        display: none;
    }

    .item4 img {
        width: 24px;
        height: 24px;
    }

    .item5 {
        display: none;
    }

    .item6 {
        flex: 1 1 auto;
    }

    .item6 img {
        width: 24px;
        height: 24px;
    }

    img {
        width: 100%;
        height: 300px;
        object-fit: cover;
    }

    .container1 {
        flex-flow: column nowrap;
    }

    .subcontainer1 {
        flex: 1 1 100%;
    }

    .subcontainer2 {
        flex: 1 1 100%;
    }

    .container2 {
        flex-flow: column nowrap;
    }

    .content3,
    .content4,
    .content5,
    .content6 {
        flex: 1 1 100%;
    }

    .container3 {
        flex-flow: column nowrap;
    }

    .container4 {
        flex-flow: column nowrap;
    }

    .content13,
    .content14,
    .content15,
    .content16,
    .content17,
    .content18,
    .content19,
    .content20 {
        flex: 1 1 100%;
    }
}

@media screen and (max-width: 480px) {
    img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }
}