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

body{
    max-width: 100%;
    height: auto;
    background-color: #f7f8ff;
}

main{
    max-width: 1200px;
    height: auto;
    margin: auto;
    padding: auto;
    align-content: center;
}

.portada{
    width: 100%;
    height: 300px;
    display: flex;
    align-items: baseline;
    overflow: hidden;
    padding: auto;
}

.portada img{
    width: 100%;
}

article {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    grid-template-areas:
    "uno uno dos dos"
    "tres cuatro cuatro cuatro";
    width: auto;
    height:auto;
    margin:0;
    padding: 0;
}

.historia{
    grid-area: uno;
    width: 100%;
    height: auto;
    padding: 0;
    margin-left: 0;
    margin-top: 10px;
    margin-right: 0;
    margin-bottom: 20px;
    justify-content: center;
    align-items: center;
}

.historia h1{
    width: 100%;
    height: auto;
    font-size: 36px;
    font-family: "Source Serif Pro";
    text-align: center;
    color: #0082e6;
}

.contenedor-imagen{
    width: auto;
    height: auto;
    margin-left: 0;
    margin-top: 0px;
    margin-right: 0;
    margin-bottom: 20px;
    padding: 0;
    display: flex;
    justify-content: center;
}

.contenedor-imagen img{
    position: absolute;
    width: 540px;
    height: auto;
    overflow: hidden;
    border-radius: 20px;
    margin: 0;
    padding: 0;
    box-shadow: 5px 5px 10px rgba(0, 130, 230, 0.4);
}

.contenedor-imagen button{
    position: relative;
    margin-top: 490px;
    margin-left: 400px;
}

button{
    width: 120px;
    height: 40px;
    border-radius: 20px;
    background-color: #8fd1ee;
}

button a{
    text-decoration: none;
    font-family: "Source Sans 3";
    font-size: 16px;
    text-align: center;
    color: #252525;
}

.btn{
    border: 0;
}

button:hover{
    background-color: #ffac47;
    font-weight: bolder;
}

.nuestro-centro{
    grid-area: dos;
    width: 100%;
    height: auto;
    justify-items: center;
    padding: 0;
    margin-left: 0;
    margin-top: 10px;
    margin-right: 0;
    margin-bottom: 20px;
}

.nuestro-centro h1{
    width: 100%;
    height: auto;
    font-size: 36px;
    font-family: "Source Serif Pro";
    text-align: center;
    color: #0082e6;
}

.contenedor-miniaturas{
    width: fit-content;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
    "a b"
    "c d";
    margin:0;
    padding: 0;
    gap: 40px;
    justify-content: space-evenly;
}

.miniatura-1{
    grid-area: a;
}
.miniatura-2{
    grid-area: b;
}
.miniatura-3{
    grid-area: c;
}
.miniatura-4{
    grid-area: d;
}

.contenedor-miniaturas img{
    width: auto;
    height: 250px;
    overflow: hidden;
    border-radius: 20px;
    margin: 0;
    padding: 0;
    opacity: 60%;
    box-shadow: 5px 5px 10px rgba(0, 130, 230, 0.4);
}

.contenedor-miniaturas img:hover{
    transform: scale(1.05);
    opacity: 100%;
}

.btn-nuevos-cursos{
    grid-area: tres;
    width: 100%;
    height: 300px;
    margin-left: 20px;
    margin-right: 0;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-nuevos-cursos img{
    width: fit-content;
    height: 280px;
    overflow: hidden;
    border-radius: 20px;
    margin: 0;
    padding: 0;
    box-shadow: 5px 5px 10px #0082e666;
}

.btn-nuevos-cursos img:hover{
    border: 2px solid #ffac47
}

/*SLIDER*/

.slider-box{
    grid-area: cuatro;
    width: 100%;
    height: 300px;
    margin: 0;
    padding-left: 0;
    padding-top: 20px;
    padding-right: 0;
    padding-bottom: 0;
    justify-content: center;
    justify-items: center;
    align-items: center;
}

.slider-box h2{
    width: 760px;
    height: 40px;
    font-family: "Source Sans 3";
    text-align: center;
    align-content: center;
    margin: 0;
    padding: 0;
    background-color: #4862ff;
    color: white;
}

.slider {
    width:800px;
    height: 300px;
    /* max-width: 550px; */
    margin: 0;
    padding: 0;
    overflow: hidden;
}


.slider-box .slider ul {
    display: flex;
    padding: 0;
    width: 800px;
    height: auto;
    animation: slide 20s infinite alternate ease-in-out;
}

.slider-box .slider li {
    width: 100%;
    height: auto;
    list-style: none;
    position: relative;
    margin-left: 40px;
    margin-right: 40px;

}

.slider-box .slider img {
    width: 720px;
    height: auto;
    padding: 20px;
}

@keyframes slide {
    0% {
        margin-left: 0;
    }

    20% {
        margin-left: 0;
    }

    25% {
        margin-left: -100%;
    }

    45% {
        margin-left: -100%;
    }

    50% {
        margin-left: -200%;
    }

    70% {
        margin-left: -200%;
    }

    75% {
        margin-left: -300%;
    }

    100% {
        margin-left: -300%;
    }
}

/* MODAL */

.ful-img {
    display: none;
    /* oculto por defecto */
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.ful-img span {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.ful-img img {
    width: auto;
    height: 95%;
}