/* ================= Celular girado ==================== */
@media screen and (min-width:480px){
    /*Seccion Estudiar en Santo Domingo*/
    #estudiar-sd{
        grid-template-columns: repeat(2, 1fr);
    }
    /*columnas*/
    section.der{
        padding: 40px 10% 0 10%;
    }
        /*galeria de fotos*/
        section.izq article#galeria-fotos{
            grid-template-columns: 1fr 1fr;
        }
    /*Portadas*/
    .portada{
        padding: 0 6vw;
        background-size: cover;
        background-repeat: no-repeat;
	}
}

/* ================= Tablet ==================== */
@media screen and (min-width:560px){
	/*Header*/
	#nav-toggle {
		display: none;
	}
	#ocultar-menu{
		display: grid;
	}
    /*Seccion Contenidos*/
    #plan-de-estudio .columna-2{
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 0 35px;
    }
    /*Seccion Galeria*/
    #galeria section{
        grid-template-columns: repeat(2,1fr);
        padding: 40px;
    }
    /*Seccion Estudiar en Santo Domingo*/
    #estudiar-sd{
        grid-template-columns: repeat(3, 1fr);
    }
    /*Seccion FAQ*/
    #faq div {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-flow: row;
        grid-gap: 0 40px;
    }
        #faq div h2,
        #faq div p{
            grid-column: 1/-1;
        }
        #faq div ul{
            margin-top: 25px;
        }
}

/* ================= Escritorio ==================== */
@media screen and (min-width:768px){
    /*Header*/
    header{
        overflow: visible;
    }
    /*categoria*/
    #cursos-menu{
        pointer-events: auto;
    }
    .menu nav .sub-menu{
        right: 0;
        width: auto;
        min-width: 250px;
        position: absolute;
    }
        .menu nav .sub-menu > li .sub-menu{
            position: absolute;
            left: 100%;
            top: 0;
            min-width: 280px;
            display: none;
        }
            .menu nav div:hover > .sub-menu{
                display: block;
                transition: all .2s ease-out;
            }
                .menu nav .sub-menu > li:hover .sub-menu{
                    display: block;
                }
            .menu nav div > .sub-menu::before{
                content: "";
                width: 0 !important;
                height: 0;
                border: 0 solid transparent;
                border-right-width: 12px;
                border-left-width: 12px;
                display: block;
                position: absolute;
                top: -12px;
                left: 200px;
            }
                .menu nav .sub-menu li a,
                .menu nav .sub-menu > li .sub-menu li a,
                .menu nav .sub-menu li label{
                    padding: 13px 20px;
                }
                    .menu nav .sub-menu > li > label{
                        border-bottom: 0;
                        display: block;
                    }
    #informacion-top{
        width     : 100%;
        height    : 30px;
        padding   : 6px 3%;
        z-index   : 1000;
        max-width: 1280px;
        margin: 0 auto;
        display: block;
    }
    /*Columnas*/
    section.izq article {
        padding: 25px 0 35px 0;
    }
        #plan-de-estudio .columna-2 div:nth-of-type(1) .unidad-titulo,
        #plan-de-estudio .columna-2 div:nth-of-type(2) .unidad-titulo{
            margin: 0 0 5px 0;
        }
        /*tarjeta*/
        .tarjeta-landing > div.portada-chica{
            height: 220px;
        }
    /*Whatsapp*/
    .whatsapp{
        padding: 12px 0;
    }
    /*Boton Whatsapp + Contacto*/
    #btn-fixed {
        bottom: auto;
        top: 48vh;
    }
}

@media screen and (min-width:1024px) {
    /*Columnas*/
    section.izq{
        grid-column: 1/2;
        grid-row: 1/2;
        padding   : 20px 4%;
    }
        #requisitos {
            display: grid;
            grid-gap: 0 20px;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, auto);
            grid-auto-flow: column;
        }
            #requisitos h2{
                grid-column: 1/-1;
            }
    section.der{
        grid-column: 2/-1;
        padding: 0;
        position: relative;
        margin-bottom: 60px;
    }
        .contenidos{
            grid-template-columns: 1fr 400px;
        }
    /* Tarjeta */
    .tarjeta-landing{
        right: 10px; /*Usamos mismo valor*/
        top: 20px;
    }
    .tarjeta-fixed{
        margin-left: -10px; /*Usamos mismo valor*/
        position: sticky;
        top: 80px;
        max-width: 400px;
        width: 100%;
    }
}
/*==================== Pantallas grandes ==================== */
@media screen and (min-width:1280px){
    /*Tarjeta*/
    .tarjeta-fixed{
        right: calc(50vw - 640px);
    }
}

/*==================== Solo para notebooks, con altura baja ==================== */
@media screen and (min-width:1280px) and (max-height:700px){
}