@media (min-width: 768px) {
    .button-group {
        width: 850px;
    }
}

@media (max-width: 2000px) {

    html,
    body {
        font-size: 16px;
    }
}

@media (max-width: 1200px) {

    html,
    body {
        font-size: 14px;
    }

    #logo {
        width: 250px;
    }

    #logo #logo-saludo {
        bottom: 28%;
    }
}

@media (max-width: 1024px) {

    html,
    body {
        font-size: 11px;
    }

    #logo {
        width: 200px;
    }

    #logo #logo-saludo {
        bottom: 22%;
        font-size: 5.5rem;
    }

    .button-group {
        position: relative;
    }

    .floti-floti {
        max-width: 30rem;
    }

    /* GRANITO */
    #cama {
        right: -14rem;
    }

    /* EDICIONES ANTERIORES */
    #ediciones-anteriores {
        max-width: 735px;
    }

    /* AVISO INSCRIPCIONES */
    #aviso-inscripciones {
        right: 46%;
        top: -10%;
    }

    #aviso-inscripciones svg {
        margin: 0 auto;
        width: 400px;
        height: 400px;
        left: 14%;
    }
}

@media (max-width: 767px) {
    html {
        font-size: 12px;
    }

    #formas-fondo,
    #parallax-foreground,
    .floti-floti {
        display: none;
    }

    #parallax-foreground,
    #parallax-background {
        height: 100%;
    }

    #parallax-background .layer1 {
        background-size: cover;
    }

    main {
        padding-bottom: 6rem;
        max-width: 100%;
    }

    header {
        left: 0;
        bottom: 3rem;
        transform: none;
    }

    #logo {
        width: 150px;
    }

    #logo #logo-saludo {
        font-size: 4rem;
        bottom: 16%;
    }

    #titulin-pagina {
        position: relative;
        height: auto;
        margin-bottom: 30px;
    }

    #titulin-pagina h1,
    .pagina-basica h1 {
        font-size: 5rem;
    }

    h2 {
        font-size: 2.15rem;
    }

    body:not(.home):not(.pagina-basica) main {
        margin-top: 150px;
    }

    .seccion-blob {
        background: var(--azul-claro);
        padding: 1rem 2rem;
        height: auto;
        border-radius: 2rem;
        max-width: 500px;
        margin: 30px 15px;
        width: calc(100% - 30px);
    }

    .seccion-blob p {
        font-size: 2rem !important;
    }

    #main-menu {
        right: 15px;
    }

    #main-menu .open-menu,
    #main-menu .close-menu,
    #formulario-contacto #close-form {
        font-size: 3rem;
    }

    #main-menu-content {
        /* bottom: 0;right: 0; */
        width: 100vw;
        height: 100vh;
        right: -15px;
        bottom: -3rem;
    }

    #main-menu-content li a {
        font-size: 2rem;
    }

    #main-menu-content li a .aclaracion {
        font-size: .5em;
    }

    /* HOME */
    #portada {
        height: auto;
        overflow: visible;
        padding-top: 10rem;
    }

    #portada .content {
        flex-direction: column-reverse;
        padding: 1rem;
    }

    #portada .button-group {
        position: relative;
        bottom: auto;
    }

    .fechas,
    #portada .claim {
        margin: 0;
    }

    .fechas {
        text-align: center;
        font-size: 2.5rem;
    }

    #portada .claim {
        width: auto;
        font-size: 2.5rem;
    }

    #portada .claim p {
        padding: 0;
    }

    #portada .fondo-claim {
        display: none;
    }

    #streaming,
    #saludo,
    #saludo-ampliacion .text-content {
        background: var(--azul-claro);
        padding: 1rem 2rem;
        height: auto;
        border-radius: 2rem;
        max-width: 500px;
        margin: 30px auto;
    }

    #streaming p,
    #saludo p,
    #saludo-ampliacion p {
        max-width: 100%;
        font-size: 1.5rem;
    }


    #streaming .text-content,
    #saludo .text-content {
        padding: 1rem 2rem;
    }


    #streaming,
    #saludo,
    #saludo-ampliacion {
        height: auto;
    }

    /* PROGRAMA */
    .programa-page #viernes,
    .programa-page #sabado,
    .programa-page #domingo {
        border-radius: 2rem;
        padding: 1rem 2rem !important;
        max-width: 500px;
        margin: 30px 15px;
    }

    .programa-page #viernes {
        background: var(--azul-claro);
    }

    .programa-page #sabado {
        background: var(--rosa-claro);
    }

    .programa-page #domingo {
        background: var(--azul-oscuro);
    }

    .estrella {
        display: flex;
        margin: 1rem auto 0;
        justify-content: center;
        align-content: center;
        align-items: center;
    }

    body .estrella .content {
        width: auto;
        position: relative;
        background: transparent;
        opacity: 1;
        z-index: 0;
        display: inline-block;
    }

    .estrella .content .a {
        padding: 0 1rem;
    }

    .estrella:hover .content,
    .estrella .content .a:hover {
        width: auto;
    }

    body #domingo .estrella .content,
    body #domingo .estrella .content a {
        color: var(--rosa);
    }

    .programa-page .button-group.centradico {
        margin-top: 5rem;
    }

    /* TU GRANITO DE ARENA */
    body:not(.home) main.contacto {
        margin-top: 6rem;
    }

    #tu-granito-de-arena,
    #dormir-arriba,
    #tengo-algo-que-decir {
        border-radius: 2rem;
        padding: 1rem 2rem !important;
        max-width: 500px;
        margin: 30px 15px;
    }

    #tu-granito-de-arena {
        background: var(--azul-claro) !important;
    }

    #dormir-arriba {
        background: var(--azul-oscuro) !important;
    }

    #tengo-algo-que-decir {
        background: var(--rosa-claro) !important;
    }

    /* PONENTES */
    .ponentes-page #intro {
        background: var(--azul-oscuro);
        padding: 1rem 2rem;
        height: auto;
        border-radius: 2rem;
        max-width: 95%;
        margin: 30px auto;
        width: 95%;
    }

    .ponentes {
        max-width: 100%;
        width: 100%;
    }

    .ponente .foto {
        position: relative;
        top: 1rem !important;
        left: auto !important;
        right: auto !important;
        margin-bottom: 3rem;
        width: 150px;
        height: 150px;
    }

    .ponente.seccion-blob {
        padding: 1rem 2rem !important;
        max-width: calc(100% - 30px);
    }

    .ponente h2 a {
        font-size: .6em;
    }

    /* EDICIONES ANTERIORES */
    .ediciones-page #intro {
        background: var(--rosa-claro);
        padding: 1rem 2rem;
        height: auto;
        border-radius: 2rem;
        max-width: 95%;
        margin: 30px auto;
        width: 95%;
    }

    .ediciones-page #ediciones-anteriores .edicion.seccion-blob {
        background: var(--azul-claro) !important;
        padding: 2rem 2rem 1rem !important;
        height: auto;
        border-radius: 2rem;
        max-width: 500px;
        margin: 1rem 15px !important;
        width: calc(100% - 30px);
        max-width: 100% !important;
    }

    /* CONCLUSIONES */
    .conclusiones-page .seccion-blob {
        padding: 2rem 2rem 1rem !important;
        height: auto;
        border-radius: 2rem;
        max-width: 500px;
        margin: 1rem 15px !important;
        width: calc(100% - 30px);
        max-width: 100% !important;
    }

    .conclusiones-page #intro {
        padding: 2rem 2rem 1rem !important;
        height: auto;
        border-radius: 2rem;
        max-width: 500px;
        margin: 1rem 15px !important;
        width: calc(100% - 30px);
        max-width: 100% !important;
        background: var(--azul-oscuro) !important;
    }

    .conclusiones-page #video {
        margin-top: 5rem !important;
        background: var(--azul-claro) !important;
    }

    .conclusiones-page #video iframe {
        max-width: 100%;
    }

    .conclusiones-page #recursos {
        background: var(--rosa-claro) !important;
    }

    .conclusiones-page .presentacion a {
        text-decoration: none !important;
    }

    /* PAGINA BASICA */
    .pagina-basica main {
        margin-top: 9rem;
    }

    /* FOOTER */
    footer {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        margin-top: 30px;
        height: auto;
        margin-bottom: 150px;
        z-index: 0;
    }

    .footer-nav ul {
        flex-direction: column;
        align-items: center;
    }

    .footer-nav ul a {
        margin: 4px .25rem;
        text-align: center;
        display: block;
    }

    /* AVISO INSCRIPCIONES */
    #aviso-inscripciones {
        position: relative;
        top: auto;
        right: auto;
        width: 95%;
        height: auto;
        margin: 4rem auto 2rem;
    }

    #aviso-inscripciones .aviso-text-content {
        max-width: 100%;
        padding: 2rem 5rem;
        transform: none;
        background: rgb(0, 255, 255);
        background: linear-gradient(45deg, rgba(0, 255, 255, 1) 14%, rgba(0, 4, 148, 1) 100%);
        border-radius: 20rem;
    }

    #aviso-inscripciones .aviso-text-content p {
        margin-bottom: 1rem;
        margin-top: 0;
    }

    #aviso-inscripciones svg {
        display: none;
    }
}