* { /* con margin y paddin le quitamos todos los margenes a la web*/
    margin: 0%;
    padding: 0;
    border-radius: 8px;
}
 

body {
    background-image: url(imagen/blueaa.jpg);
   /* background: rgb(58, 83, 139); color de fondo de la web
    color: rgb(22, 48, 102);*/
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   }
 
.contenedor {
    width: 90%;         /* el ancho del contenedor*/
    max-width: 1200px;  /* y este es el ancho máximo puede variar*/
    margin: 20px auto;  /* margen arriba y abajo y "auto" para centrar la web*/
    display: grid;      /* esto formatea el gri*/
    grid-gap: 10px;         /* margen entre las columnas y filas*/
    grid-template-columns: repeat(4, 1fr); /* 3 columnas de un mismo tamaño*/
    grid-template-rows: repeat(7, auto);
    grid-template-areas: "header header header header"
                         "contenido contenido sidebar sidebar" 
                         "widget-1 widget-1 widget-1 widget-1"
                        "widget-6 widget-6 widget-6 widget-6"
                         "footer footer footer footer";
}
.contenedor > div,
.contenedor .header,
.contenedor .contenido,
.contenedor .sidebar,
.contenedor .widget-1,
.contenedor .widget-6,
.contenedor .footer { 
    padding: 0px;
        border-radius: 4px; } 

/*1° FILA DE CABEZERA DE 4 COLUMNAS*/
.contenedor .header {
    background: #828792;
    grid-area: header;
    overflow: hidden;
}

/*1° COLUMNA DERECHA DE CONTENIDO DE 2 COLUMNAS*/

.contenedor .contenido {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 15x;
    background: rgb(69, 173, 233);
    grid-area: contenido;
    color: rgb(27, 37, 88);
    /*color de texto del contenidoy*/
}

.menu {
    position: relative; 
    margin-left: 5%;
    /*Margen IZQ de la imagen del menu principal*/
}

.tesi {
    width: 95%;
    /*tamaño de la imagen debajo del menu*/
    margin: 0 auto;
}

.inscripcion {
    text-align: center;
    color: aqua;
}

.inscripcion word {
    width: 10%;
    max-width: 20px;
    max-height: 20px;
}

.contenido .word img {
    width: 20%;
    /* tamaño de la imagen del icono word*/
}

.contenido .lab img {
    width: 98%;
    /* tamaño de la imagen del laboratorio*/
    margin: 0 4px; /* centra la imagen*/
}
.contenido .logo img{
    width: 97%; 
    margin: 0 5px;
}

.contenedor .sidebar {
    background: orange;
    grid-area: sidebar;
    text-align: center;
    color: rgb(85, 72, 72);
}

.sidebar img{
    width: 95%;
} 

/*hacer que el video sea responsive*/
.video {
    position: relative;
    padding-bottom: 120%;
    padding-top: 0px;
    height: 0;
    overflow: hidden; } 
    
    
.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-left: 0%; }

/* segundo video responsive*/

    .video1 {
        position: relative;
        padding-bottom: 165%; /* Tamaño del video*/
        padding-top: 0px;
        height: 0;
        overflow:hidden } 
        
        
    .video1 iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        margin-left: 0%; } /* posicion del video (1zq-der)*/


/* Fin de hacer que el video sea responsive*/

.contenedor .widget-1{ 
    grid-area: widget-1;
    text-align: left;}

.contenedor .widget-2 {
    grid-area: widget-2;
    text-align: center;}
    
/* como hacer varias imagenes y videos mp4 responsive  
    .container1 {
        background: rgb(31, 55, 111);
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;

         
    flex-flow: wrap;
    justify-content: center;} */

     
            
 
 .container1 img {
    width: 95%; 
     padding: 0;
     
    }

 .container1 video {
     width: 100%; 
    }
.contenedor .widget-3 {
    grid-area: widget-3;
    text-align: center;}

.contenedor .widget-4 {
    grid-area: widget-4;
    text-align: center;
    width: 98%;
    margin: 6px;
}

.contenedor .widget-5 {
    grid-area: widget-5;
    text-align: center;
    width: 98%;}
  
.contenedor .widget-6 {
    grid-area: widget-6;
    text-align: center;  }

.video2 video{
 width: 100%;
margin: auto;
        }

.contenedor .footer { 
    grid-area: footer;
    text-align: center;
        }

.footer img{
    width: 100%;
    margin: 0 4px;
    
}
/*
@media screen and (max-width: 720px) {
 
    .contenedor {
 grid-template-areas:
    "header header header header"
    "contenido contenido contenido contenido"
    "sidebar sidebar sidebar sidebar" 
    "widget-1 widget-1 widget-1 widget-1" 
    "widget-2 widget-2 widget-2 widget-2"
    "widget-3 widget-3 widget-3 widget-3"
    "widget-4 widget-4 widget-4 widget-4"
    "widget-5 widget-5 widget-5 widget-5"
    "widget-6 widget-6 widget-6 widget-6";
 
    }
 

.contenedor .image {
            width: 90%;
            margin: 0 auto; } 
}*/
 

@media screen and (max-width: 630px) {

    .contenedor {
        grid-template-areas:
            "header header header header"
            "contenido contenido contenido contenido"
            "sidebar sidebar sidebar sidebar"
            "widget-1 widget-1 widget-1 widget-1"
            "widget-2 widget-2 widget-2 widget-2" 
            "widget-6 widget-6 widget-6 widget-6"
            "footer footer footer footer";
    }


    .contenedor .image {
        width: 90%;
        margin: 0 auto;
    }
}