@font-face {
        font-family: monserrat;
        src: url(txt/Montserrat-Bold.ttf);
}


body {background-color: #111;
        margin: 0;
        height: 100%;
        width: 100%;
        
}

header { display: flex;
        align-items: center;
        flex-direction: column;
        margin-bottom: 10%;
        margin-top: 2%;}

.Titulo-header {
        text-align: center;
}

h1, h2  { color: #ffffff;
        font-family: monserrat;
        margin: 0;
        padding: 2%;
        min-width: 100%;
}

.LOGO {
        width: 15vw;

        }
video {width: 100%;
        height: 100%;
        cursor: pointer;
        }

main{   
        height: 100%;
        width: 100%;
        display: grid;
        margin-bottom: 20%;
        
        
}

div { padding: 5px;}

.video {
        grid-column-start: 1;
        grid-column-end: 65;
        grid-row-end: 2 ;
        padding-top: 0;
        padding-right: 2%;
        
}

.video2 {
        grid-column-start: 64;
        grid-column-end: 100;
        grid-row-end: 2 ;
        padding-top: 0;
        padding-left: 1.2%;

}


.video3 {
        grid-row-start: 2;
        grid-row-end: 80;
        grid-column-start: 1;
        grid-column-end: 40;
        padding-top: 0;
}

.video4 {
        grid-row-start: 2;
        grid-row-end: 30;
        grid-column-start: 40;
        grid-column-end: 100;
        padding-top: 0;
}

.video5 {
        grid-row-start: 40;
        grid-row-end:80;
        grid-column-start: 40;
        grid-column-end: 100;
        padding-top: 0;
}



.quiensoy {
        
        background: linear-gradient(#031c5c, #06194b, #111);
        display: flex;
        padding-left: 5%;
        padding-right: 5%;
        align-items: center;
        margin-bottom: 20%;

}


.LOGO2 {
        width: 50%;

        
}

.presentacion {
        font-family: monserrat;
        color: #ffffff;
        margin-left: 5%;
        font-size: 2vw;
}





footer {
        background-color: #031c5c;
        height: 300px;
        display: flex;
        flex-direction: column;        
        align-items: center;
        font-family: montserrat;
        color: #ffffff;
        position: relative;
}

h3{
        font-size: 200%;
}


.mail{
        justify-items: center;
        margin-bottom: 2%;
        
}

a{
        text-decoration: none; 
        color: inherit;
        transition: 0.3s;
        font-size: 100% ;
        user-select: text;
}

.contacto-link:hover:hover {
        
        text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.5);
        font-size: 102%;
        transition: 0.2s;
        color: rgb(199, 197, 197);
}

.final-footer{
        color: #0651a7;
        margin-bottom: 1%;
        position: absolute;
        bottom: 0;
        font-weight: 700;
        text-shadow: none;


}

.div-mail{
        padding: 0;
        font-weight: 700;
}

.div-mail:hover{
        color: #ffffff;
}


@media (max-width: 500px) {
        .LOGO {
                width: 30vw;
        }

        .LOGO2 {
                width: 30vw;
        }
}

@media (min-width: 500px) and (max-width: 800px) {
        .LOGO {
                width: 20vw;
        }
}