#bloque2{
    animation-delay: 4s;
    width: 30%;
    height: auto;
    float: right;
    margin-right: 10%;
}




.boton2{
    background: transparent;
    color: white;
    border: none;
    margin-top: -1%;
    outline: 0px;
    animation-delay: 5.2s;
}

#banner{
    width: 100%;
    height: auto;
    margin-top: -8%;
    margin-bottom: 10px;
}
#contenedor{
    width: 80%;
    height: 270px;
    padding: 0px;
    margin-left: 70px;
    background-size: 100%;
    animation: banner 40s infinite;
    animation-delay: 5s;
    animation-direction: alternate;
    border-radius:10%;
    background-color: white;    
}

@keyframes banner{
    0%, 6%{
        background-image: url(../images/Colegio.png);
        background-repeat:no-repeat;

    }
    12%, 18%{
        background-image: url(../images/pauta_1.png);
        background-repeat:no-repeat;
        
    }

    18%, 24%{
        background-image: url(../images/pauta_3.png);
        background-repeat:no-repeat;

    }

    24%, 36%{
        background-image: url(../images/pauta_4.png);
        background-repeat:no-repeat;

    }
    36%, 42%{
        background-image: url(../images/pauta_5.png);
        background-repeat:no-repeat;

    }
    48%, 54%{
        background-image: url(../images/pauta_6.png);
        background-repeat:no-repeat;

    }

    54%,60%{
        background-image: url(../images/pauta_7.png);
        background-repeat:no-repeat;

    }
    60%, 66%{
        background-image: url(../images/pauta_8.png);
        background-repeat:no-repeat;

    }
    66%, 72%{
        background-image: url(../images/pauta_9.png);
        background-repeat:no-repeat;

    }
    72%, 78%{
        background-image: url(../images/pauta_10.png);
        background-repeat:no-repeat;

    }
    78%, 84%{
        background-image: url(../images/pautas_11.png);
        background-repeat:no-repeat;

    }

    84%, 90%{
        background-image: url(../images/pauta_12.jpeg);
        background-repeat:no-repeat;

    }

    90%, 96%{
        background-image: url(../images/Colegio.png);
        background-repeat:no-repeat;

    }

}

.text{
    margin-top: 1%;
    animation-delay: 5s;
    margin-bottom: 1%;
}

.link{
    color: #909497;
}
.link:hover{
    cursor: pointer;
    color:  #3498db ;
}
#logo{
    animation-delay: 1s;
}

#play{
    animation-delay: 2s;
}

#app{
    width: 98%;
    animation-delay: 3s;
}

#footer{
   margin-top: 188px;
   background: #00155c;
   text-align: center;
}
.contenedor{
    width: 40%;
    height:20%;
    margin-top: 5%;
}
.contenedor img{
    width: 100%;
    height: auto;
}
.div1 {
    width: 70%;
    height: auto;
    margin-top: 8%;
    margin-left: -55%;
}
.div{
    text-align: center;
}
.boton{
    width: 100%;
}        


@media screen and (max-width: 720px) and (min-width: 480px) and (orientation: portrait){

    #bloque2 {
        width: 100%;
        margin-top: -18%;
        /* margin-left: -40%; */
        margin-right: 6%;
    }
    #contenedor {
        width: 50%;
        height: 230px;
    }
    .div1{
        margin-left: 15%;
    }

    .encabezado{
        height: 100px;
    }
    .encabezado img{
        height: 100%;
    }
    .contenedor{
        width: 100%;
        height:700px;
        flex-direction: column;
    }
    .contenedor img{
        height: auto;
    }

}

@media screen and (max-width: 640px) and (min-width: 360px) and (orientation: portrait){

    #bloque2 {
        width: 100%;
        margin-top: -70%;
        /* margin-left: -40%; */

    }
    #contenedor {
        width: 60%;
        height: 200px;
    }
    .div1{
        margin-left: 15%;
    }

    .encabezado{
        height: 100px;
    }
    .encabezado img{
        height: 100%;
    }
    .contenedor{
        width: 100%;
        height:700px;
        flex-direction: column;
    }
    .contenedor img{
        height: auto;
    }

}

@media screen and (max-width: 641px) and (min-width: 360px) and (orientation: landscape){
    #contenedor{
        width: 90%;
        height: 200px;
    }
}        

@media screen and (max-width: 823px) and (min-width: 411px) and (orientation: portrait){

    #bloque2 {
        width: 100%;
        margin-top: -40%;
        /* margin-left: -40%; */
        margin-right: 8%;
    }
    #contenedor {
        width: 50%;
        height: 210px;
    }
    .div1{
        margin-left: 15%;
    }

    .encabezado{
        height: 100px;
    }
    .encabezado img{
        height: 100%;
    }
    .contenedor{
        width: 100%;
        height:700px;
        flex-direction: column;
    }
    .contenedor img{
        height: auto;
    }

}


@media screen and (max-width: 823px) and (min-width: 411px) and (orientation: landscape){

    #contenedor{
        width: 90%;
        height: 200px;
    }

}   

@media screen and (max-width: 1366px) and (min-width: 1024px) and (orientation: portrait){

    #bloque2 {
        width: 100%;
        margin-top: 20%;
        /* margin-left: -40%; */
        margin-right: 4%;
    }
    #contenedor {
        width: 50%;
        height: 461px;
    }
    .text{
        font-size: 25px;
    }
    .div1{
        margin-left: 15%;
    }

    .encabezado{
        height: 100px;
    }
    .encabezado img{
        height: 100%;
    }
    .contenedor{
        width: 100%;
        height:700px;
        flex-direction: column;
    }
    .contenedor img{
        height: auto;
    }

}        

@media screen and (max-width: 1022px) and (min-width: 768px) and (orientation: portrait){

    #bloque2 {
        width: 100%;
        margin-top: 20%;
        /* margin-left: -40%; */
        margin-right: 4%;
    }
    #contenedor {
        width: 50%;
        height: 370px;
    }
    .text{
        font-size: 15px;
    }
    .div1{
        margin-left: 15%;
    }

    .encabezado{
        height: 100px;
    }
    .encabezado img{
        height: 100%;
    }
    .contenedor{
        width: 100%;
        height:700px;
        flex-direction: column;
    }
    .contenedor img{
        height: auto;
    }

}   
@media screen and (max-width: 1024px) and (min-width: 768px) and (orientation: landscape){
    #contenedor{
        width: 90%;
        height: 250px;
    }
}