/*Generales*/

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

:root{

	/*Colores*/
	--principal:#67cfff;
	--secundario:rgba(54,255,202,1);
	--asd:#004A6E;
	--issd:#008494;
	--cesd:#5F9E82;
	--sd:#154194;
	--negro:#000;
	--blanco:#fff;
	--grisclaro:#ddd;
	--gris:#777;
	--grisoscuro:#333;

	/*Tipografías*/
	--fuente1:'Roboto', sans-serif;
	--fuente2:'Roboto Condensed', sans-serif;;
}

html{font-family:var(--fuente1); font-size:16px; text-rendering: optimizeLegibility;}

/*--=============================================*/

/*Jerarquías tipográficas*/
h1{
    font-size  : 5.2em;
    font-family: var(--fuente2);
    font-weight: 900;
    line-height   : 0.8em; 
    text-transform: uppercase; 
    padding: 15px 0;
    border-bottom: 12px solid transparent;
    border-image: linear-gradient(90deg, rgba(0,171,255,1) 0%, rgba(54,255,202,1) 100%);
    border-image-slice: 1;
}

h1.title{
	background             : url("../img/fondotxt.png") repeat;
	color                  : transparent;
    background-clip: text;
	-webkit-background-clip: text;
}

    h1.title p{
        font-size  : .6em;
        font-weight: 300;
    }

h2{
    font-size  : 2em;
    color      : #004d6f;
    line-height: 1.2em;
    font-weight: 300;
    margin     : 1% 0;
}

h3{
font-size  : 1.3em;
color      : #fff;
text-shadow: 1px 1px 2px #000;
font-weight: 300;
line-height: 1.3;
}

h4{
font-size  : 1.6em;
color      : var(--principal);
text-shadow: 2px 2px 3px rgba(0,0,0,.3);
font-weight: 200;
margin: 15px 0;
}

h5{
font-size  : 1.8em;
color      : #fff;
font-weight: 200;
margin: 1.5em 0 0 0;
text-transform: none;
}

        @media screen and (max-width: 480px){
            h5{margin: .5em 0 0 0;}
        }

p{
font-size: 1em;
font-weight: 300;
}

/*--=============================================*/

/*Generales*/
.destacado{
        background: rgb(130,214,255);
        background: linear-gradient(90deg, rgba(130,214,255,1) 0%, rgba(54,255,202,1) 100%);
        background-repeat  : no-repeat;
        background-size    : 100% 0.1em;
        background-position: 0 88%;
        transition         : background-size 0.25s ease-in;
        font-size          : 1.1em;
        color: var(--negro) !important;
    }
    
    .destacado:hover {
        background-size: 100% 88%;
  }

.bold{font-weight: bold;}
.sinmargen{margin-left: 0 !important;}

/*TOP REDES*/
.top{
    width     : 100%;
    background: #000;
    height    : 30px;
    padding   : 8px 5px 0 5px;
    color     : #fff;
    font-size : 0.8em;
    position  : fixed;
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
    z-index   : 200;
    }

    .contacto{
        float      : left;
        margin-left: 3%;
    }

    	    .contacto ul li a, .contacto ul li a:visited{
		        color:var(--blanco);
		        transition: all .4s ease;
		    }

			    .contacto ul li a:hover{
			        color:var(--principal);
			    }


    .redes{float: right;}
    .contacto ul, .redes ul{list-style: none;}
    .contacto ul li{display: inline-block;}
    .contacto span{
        color        : #fff;
        border-radius: 50%;
        background   : var(--principal);
        padding      : 5px;
        margin       : 0 5px 0 10px;
        }
    .redes span{
        color        : #fff;
        border-radius: 50%; 
        background   : var(--principal); 
        padding      : 5px; 
        margin       : 0 0 0 5px; 
        transition   : all 0.5s ease;
        }
    .redes span:hover{background: var(--asd);}


/*Logo*/
.logo{
    float     : left; 
    height: 70px;
    width: auto;
}

/*Menu*/
nav.menu{
    float     : right;
    background: #555;
    height    : 70px;
}
	nav.menu ul{list-style: none;}
	nav.menu ul li{display: inline-block;}

/*Portada*/
    .headervideo{
        position : absolute;
        top      : 0;
        z-index  : -10;
        width    : 100%;
        height   : 700px;
    }

    .headervideo video{
        background-repeat: no-repeat;
        width            : 100%;
        position         : fixed;
    }

    .headervideo img{
        background-repeat: no-repeat;
        width            : 100%;
        position         : fixed;
    }

        #escritorio{display: block;}
        #tablet{display: none;}
        #celular{display: none;}

    .videoportada{
        width   : 100%;
        position: relative;
    }

    .headervideo{
	    position : absolute;
	    top      : 0;
	    z-index  : -10;
	    width    : 100%;
	    height   : 700px;
	}

	.portada{
	    background: rgba(0,0,0,0.8);
	    background: -moz-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
	    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,0.8)), color-stop(100%, rgba(0,0,0,0)));
	    background: -webkit-linear-gradient(left, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
	    background-position  : center; 
	    background-size      : cover; 
	    height               : 100%; 
	    min-height           : 720px; 
	    background-attachment: fixed; 
	    padding-top          : 30px;
	    overflow             : hidden;
	}


	    .portada img{
	        margin: 3% 0;
	    }

		.portada > div{
	        width      : 45%;
	        z-index    : 500;
	        margin-left: 3%;
	    }

        .portada h3{
            margin: 3% 0;
        }

        .logo-extra{
            width: 200px;
            background: var(--blanco);
            padding: 10px;
            margin: 0 !important;
            border-radius: 25px;
            float: left;
        }

        .texto-extra{
            color: var(--blanco);
            font-size: 1em;
            float: left;
            margin: 10px 0 0 10px;
        }

            @media screen and (max-width: 480px){
                .logo-extra{
                    width: 150px !important;
                    margin-bottom: 25px !important;
                }

                .texto-extra{
                    margin: -15px 0 25px 0;
                    font-size: .9em;
                }
            }



/*Columnas*/
.columnas{
    width  : 100%;
    display: grid;
    grid-template-columns: 2fr 1fr;
}

    .columnas p b{
       color: var(--asd);
    }

/*Columna Izquierda*/
section.izq{
    grid-column: 1/2;
    padding   : 5% 10% 5% 5%;
    background: rgba(221,221,221,1);
    background: -moz-linear-gradient(left, rgba(221,221,221,1) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(221,221,221,1)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(left, rgba(221,221,221,1) 0%, rgba(255,255,255,1) 100%);
    color     : #000; 
}
    section.izq article {
        border-bottom: 1px solid #ccc;
        padding      : 1% 0 3% 0;
    }


    section.izq h2 span{
        font-size   : .5em;
        margin: 0 6px 10px 0;
        color       : #777;
    }

    section.izq ul{
        list-style : none;
        font-weight: 300;
        line-height: 1.35em;
    }

        section.izq ul li{
            font-size: 1em;
            margin-bottom: 0.3em;
        }
        
            section.izq ul li span{
                font-size   : 0.8em;
                margin-right: 5px;
                color       : var(--asd);
            }


            section.izq ul li a,
            section.izq ul li a:visited{
                color: var(--asd);
                }

                section.izq ul li a:hover{
                    color: var(--grisoscuro);
                    }

/* Modulos, Unidades o Temas */

        section.izq article ul > p{
            margin: 22px 0 2px 0;
        }

        section.izq article ul > p:first-of-type{
            margin-top: 10px;
        }




          /* Crear iconos antes para cada item de la lista */

          section.izq article#usuario ul li:before,
          section.izq article#contenido ul li:before,
          section.izq article#requisitos ul li:before,
          section.izq article#objetivos ul li:before,
          section.izq article#materiales ul li:before,
          section.izq article#informacion ul li:before {
              font-family: 'iconos' !important;
              speak: none;
              font-style: normal;
              font-weight: normal;
              font-variant: normal;
              text-transform: none;
              line-height: 1;
              /* Better Font Rendering =========== */
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: grayscale;
              /* Tipo de icono */
              content: "\ea52";
              font-size   : 0.8em;
              margin-right: 5px;
              color       : var(--asd);
          }

              section.izq  ul > ul li:before{
                  margin-left: 18px;
              }


              section.izq article#usuario ul > ul li:before,
              section.izq article#contenido ul > ul li:before,
              section.izq article#requisitos ul > ul li:before,
              section.izq article#objetivos ul > ul li:before,
              section.izq article#materiales ul > ul li:before,
              section.izq article#informacion ul > ul li:before {
                  font-family: 'iconos' !important;
                  speak: none;
                  font-style: normal;
                  font-weight: normal;
                  font-variant: normal;
                  text-transform: none;
                  line-height: 1;
                  /* Better Font Rendering =========== */
                  -webkit-font-smoothing: antialiased;
                  -moz-osx-font-smoothing: grayscale;
                  /* Tipo de icono */
                  content: "\ea10";
                  font-size   : 0.8em;
                  margin-right: 5px;
                  color       : var(--gris);
              }

        #informacion ul span{
            margin-right: 5px;
            color       : #004d6f;
        }

        .video{
            width : 100%;
            height: 450px;
            margin-bottom: 20px;
        }

    .descarga, .descarca:visited{
        color        : #004d6f;
        font-size    : 1.2em;
        font-weight  : 700;
        background   : #fff;
        padding      : 20px;
        margin-top   : 15px;
        width        : 340px;
        cursor       : pointer;
        transition   : all .3s ease;
        text-align   : center;
        border-radius: 10px;
        border: solid 1px #004d6f;
    }

    .descarga:hover{
        color     : #222;
        background: #aaa;
    }

    .descarga span{
        color    : #333;
        font-size: .8em;
    }


/*CONTACTO CELULAR*/

.contactocelu{
    float     : left;
    width     : 100%;
    height    : auto;
    padding   : 55px 2% 50px 2%;
    background: #333;
    display   : none;
}

    .contactocelu ul{
        list-style    : none;
        font-family   :  var(--fuente2);
        text-align    : center;
        text-transform: uppercase;
        line-height   : 2.5em;
        color         : var(--blanco);
    }

    .contactocelu ul li span{
        margin-right: 7px;
        color: var(--principal);
        font-size: .9em;
    }

        .contactocelu ul li a, .contactocelu ul li a:visited {
	        color: #fff;
	        transition: all .3s ease;
	    }

        .contactocelu ul li a:hover {
	        color: var(--principal);
	    }

        .iconocontactocelu{
            color        :#fff;
            border-radius: 50%;
            background   : #111;
            padding      : 5px;
            margin       : 0 0 0 5px;
            transition   : all 0.5s ease;
        }

        .iconocontactocelu:hover{
            background: var(--asd);
            color:var(--blanco);
        }
    
/*COLUMNA DERECHA*/
    section.der{
        grid-column: 2/-1;
        padding   : 3% 3%;
        float     : right;
        background: rgba(0,39,56,1);
        background: -moz-linear-gradient(left, rgba(0,39,56,1) 0%, rgba(0,78,111,1) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,39,56,1)), color-stop(100%, rgba(0,78,111,1)));
        background: -webkit-linear-gradient(left, rgba(0,39,56,1) 0%, rgba(0,78,111,1) 100%);
        z-index   : 1;
        color     : #fff;
    }
        section.der h2{font-family:  var(--fuente2);}
        section.der ul{list-style: none;}

/*FORMULARIO*/

.formulario{
    position  : fixed;
    background: rgba(0,39,56,.8);
    background: -moz-linear-gradient(left, rgba(0,39,56,.8) 0%, rgba(0,78,111,.8) 80%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,39,56,.8)), color-stop(100%, rgba(0,78,111,.8)));
    background: -webkit-linear-gradient(left, rgba(0,39,56,.8) 0%, rgba(0,78,111,.8) 80%);
    width     : 28%;
    padding   : 1% 2% 1% 2%;
    z-index   : 1000;
    top       : 8%;
    right     : 2%;
}

/*contenedor whatsapp*/
    .limitador{
        width: 100%;
        overflow: hidden;
    }

    .whatsapp{
        width      : 100%;   
        padding    : 12px 0;
        text-align : center;
        background : rgba(18,140,126,1);
        background : -moz-linear-gradient(left, rgba(18,140,126,1) 0%, rgba(37,211,101,1) 100%);
        background : -webkit-gradient(left top, right top, color-stop(0%, rgba(18,140,126,1)), color-stop(100%, rgba(37,211,101,1)));
        background : -webkit-linear-gradient(left, rgba(18,140,126,1) 0%, rgba(37,211,101,1) 100%);
        color      : #fff;
        transition : all .5s ease;
        font-weight: bold;
        text-shadow: 1px 1px 2px rgba(0,0,0,.2);
    }

    .formulario ul li {
        width  : 100%;
        display: block;
    }


/*Animación para tres numeros de telefonos*/

   .formulario ul{
        list-style-type: none;
        display        : flex;
        width          : 500%;
        animation      : cuatronumeros 5s infinite;
    }


        @keyframes tresnumeros {
            0%{margin-left: 0;}
            33.3%{margin-left: 0;}
            
            33.31%{margin-left: -100%;}
            66.6%{margin-left: -100%;}
            
            66.61%{margin-left: -200%;}
            99.99%{margin-left: -200%;}

            /*div vacio para que se mantenga el ultimo teléfono*/
            100%{margin-left: -200%;}
            100%{margin-left: -200%;}
        }

/*Animación para cuatro numeros de telefonos*/

    .formulario ul{
        list-style-type: none;
        display        : flex;
        width          : 500%;
        animation      : cuatronumeros 5s infinite;
    }

    
	    @keyframes cuatronumeros {
	        0%{margin-left: 0;}
	        25%{margin-left: 0;}
	        
	        25.01%{margin-left: -100%;}
	        50%{margin-left: -100%;}
	        
	        50.01%{margin-left: -200%;}
	        75%{margin-left: -200%;}

	        75.01%{margin-left: -300%;}
	        99.99%{margin-left: -300%;}

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


    .whatsapp:hover{
        cursor: pointer;
        letter-spacing: .05em;
    }

    form {
        width: 100%;
        margin-top: 5px;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 5px;
        align-items: center;
    }

    form input[type=text], input[type=email] {
        grid-column: 1/-1;
        height       : 30px;
        margin-bottom: 5px;
        padding      : 5px;
        border       : 1 solid var(--principal);
        border-radius: 5px;
        color        : #004d6f;
        font-size    : .8em;
    }

    form select {
        grid-column: 1/-1;
        height       : 70px;
        margin-bottom: 5px;
        padding      : 5px;
        border       : 1 solid var(--principal);
        border-radius: 0 5px 0 5px;
        color        : #777;
        font-size    : .9em;
    }

        form input[name="nombre"]{
            grid-column: 1/7;
        }

            form input[name="apellido"]{
                grid-column: 7/-1;
            }

        form p.cod{
            grid-column: 1/2;
            color: #fff;
            justify-self: center;
        }

            form input[name="codcelular"]{
                grid-column: 2/6;
            }

                form p.telefono{
                    grid-column: 6/7;
                    color: #fff;
                    justify-self: center;
                }

                    form input[name="telefono"]{
                        grid-column: 7/-1;
                    }


    form textarea{
        grid-column:   1/-1;
        height       : 90px;
        padding      : 5px;
        margin-bottom: 4px;
        color        : #004d6f;
        font-size    : .8em;
        border-radius: 5px;
        font-family: var(--fuente1);
    }

    form input[type=submit]{
        grid-column:   1/-1;
        text-align: center;
        padding    : 12px;
        background : linear-gradient(90deg, rgba(0,171,255,1) 0%, rgba(54,255,202,1) 100%);
        transition : all 0.5s ease;
        color      : #fff;
        font-size  : 1.1em;
        font-family: var(--fuente2);
        margin     : 4px 0;
        cursor     : pointer;
        transition: all .5s ease;
        text-transform: uppercase;
        text-shadow: 1px 1px 2px rgba(0,0,0,.2);
        letter-spacing: .05em;
    }

    form input[type=submit]:hover{
        background   : linear-gradient(90deg, rgba(54,255,202,1) 0%, rgba(0,171,255,1) 50%, rgba(54,255,202,1) 100%);
        border-radius: 10px;
        font-weight  : 700;
        letter-spacing: .15em;
    }

    form input[type=text]:focus, 
    form input[type=email]:focus, 
    form textarea:focus{
        background   : #F5F9FA;
        border: 2px solid #60D7AC;
        }

    form input[type=text]:focus, 
    form input[type=email]:focus, 
    form textarea:focus{
        background   : #F5F9FA;
        border: 2px solid #60D7AC;
    }

        ::-webkit-input-placeholder { color: #888;} 
        :-moz-placeholder { /* Firefox 18- */ color: #888;} 
        ::-moz-placeholder { /* Firefox 19+ */ color: #888;} 
        :-ms-input-placeholder { color: #888;}

        textarea:focus::-webkit-input-placeholder, input:focus::-webkit-input-placeholder { color: #bbb; } 
        textarea:focus:-moz-placeholder,input:focus:-moz-placeholder { /* Firefox 18- */ color: #bbb; } 
        textarea:focus::-moz-placeholder,input:focus::-moz-placeholder { /* Firefox 19+ */ color: #bbb; } 
        textarea:focus:-ms-input-placeholder,input:focus:-ms-input-placeholder { color: #bbb; }

        textarea:hover::-webkit-input-placeholder, input:hover::-webkit-input-placeholder { color: #333; } 
        textarea:hover:-moz-placeholder,input:hover:-moz-placeholder { /* Firefox 18- */ color: #333; } 
        textarea:hover::-moz-placeholder,input:hover::-moz-placeholder { /* Firefox 19+ */ color: #333; } 
        textarea:hover:-ms-input-placeholder,input:hover:-ms-input-placeholder { color: #333; }

    form span{font-size: 0.8em;}

	.g-recaptcha{
	    opacity: 0.9;
	    grid-column: 1/-1;
	}


/*MAPA DE GOOGLE*/
.mapa{
    margin-top: 2%;
}

	.map{
	    border : 0;
	    width  : 100%;
	    height : 500px;
	    padding: 2% 0;
	}

    .mapa p{font-size: 1em;}

/*FOOTER*/
footer{
    width      : 100%;
    float      : left;
    background : #111;
    font-size  : .8em;
    color      : #fff;
    text-align : center;
    padding    : 7px;
}

/*BOTÓN IR ARRIBA*/
.irarriba {
    padding      : 15px;
    background   : #ddd;
    font-size    : 20px;
    color        : var(--asd);
    cursor       : pointer;
    position     : fixed;
    bottom       : 20px;
    right        : 20px;
    border-radius: 50%;
    transition   : all .5s ease;
    z-index      : 3000;
    }

.irarriba:hover{
    background   : #222;
    color        : var(--principal);
    }


/*=======================================================*/
/*=======================================================*/


/*MEDIA QUERIES*/
@media screen and (max-width: 1366px) {
    h1{font-size: 5em;}
    /*.columnas{grid-template-columns: 2fr 1.2fr;}*/
    form textarea{height: 70px;}
}


@media screen and (max-width: 1280px) {
    .portada > div{
        width: 55%;
    }

    .formulario{top:6%;}
    form textarea{height: 70px;}
    .whatsapp{padding: 10px 0;}
    .portada{min-height: 650px;}
}

@media screen and (max-width: 1024px) {
    .top{z-index: 100;}

    .portada{
        min-height: 600px;
    }

        .portada > div{
            width: 75%;
        }

        .portada p.left{
        font-size: .8em;
        padding  : 25px 10px;
        }

    .formulario{
        width   : 100%;
        position: relative;
        right   : 0;
        padding: 3% 12%;
        border-radius: 0;
        z-index: 0;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        align-items: center;
        background: rgba(0,39,56,1);
        background: -moz-linear-gradient(left, rgba(0,39,56,.95) 0%, rgba(0,78,111,.8) 80%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,39,56,.95)), color-stop(100%, rgba(0,78,111,.8)));
        background: -webkit-linear-gradient(left, rgba(0,39,56,.95) 0%, rgba(0,78,111,.8) 80%);
    }

        .formulario .limitador{
            width: 50%;
            grid-column: 1 / -1;
            grid-row: 3 / -1;
        }

        .formulario h4{
           grid-column: 1 / -1;
           grid-row: 1/2;
           margin-top: 0;
        }

        .formulario form{
            grid-column: 1 / -1; 
            grid-row: 2/3;
            border-bottom: 1px solid rgba(255,255,255,.2);
            padding-bottom: 15px;
            margin-bottom: 18px;
        }

            form input[type=submit]{
                grid-column:   7/-1;
                align-self: stretch; 
            }

            .g-recaptcha{
                grid-column: 1/7;
            }

    .whatsapp{
        padding:20px;
    }

    section.izq{
        grid-column: 1/-1;
        padding: 5%;
    }

    .der{
        display: none;
    }

    .map{height: 400px;}
}

@media screen and (max-width: 900px) {
    h1{font-size: 4em;}
    h3{font-size: 1.2em;}
    h5{font-size: 1.6em;}
    .video{height: 400px;}
    #escritorio{display: none;}
    #tablet{display: block;}
    .portada{min-height: 650px;}
        .portada > div{
            width: 80%;
        }
    .formulario{
        padding: 3% 6%;
    }
}

@media screen and (max-width: 720px) {
    .top{display:none;}
    .map{height: 350px;}
    .portada > div{width: 90%;}
    .video{height: 350px;}
    .contactocelu{display: block;}

        section.izq article {
            padding      : 6% 0;
        }
}

@media screen and (max-width: 560px) {
    h1{font-size: 3.5em; border-bottom: 9px solid transparent;}
    h2{font-size: 1.7em;}
    h4{text-align: center;}
    
    .formulario{
        padding: 6%;
    }

        form input[type=submit]{
            grid-column:   1/-1;
            padding: 24px 12px;
        }

        .g-recaptcha{
            grid-column: 1/-1;
        }

        .formulario .limitador{
            width: 70%;
            justify-self: center;
        }

        .destacado{font-size : 1.05em;}
}


@media screen and (max-width: 480px) {
    h2 {
        font-size: 1.5em;
        margin-bottom: 15px;
    }
    .portada > div{width: 90%; margin: 0 5%;}
    .portada img{width: 260px;}
    .headervideo img{top: -100px;}
    #tablet{display: none;}
    #celular{display: block;}
    .portada{min-height: 600px;}
        .video{height: 300px;}

    section.izq article {
        padding      : 10% 0;
    }

}

@media screen and (max-width: 360px) {
    
    h1{font-size: 3em;}

    .titulolargo{
        font-size: 2.65em;
    }

        .titulolargo p{
            font-size: .7em !important;
            margin-top: 5px;;
        }

        form input[name="nombre"]{
            grid-column: 1/-1;
        }

            form input[name="apellido"]{
                grid-column: 1/-1;
            }

        form input[type=text], input[type=email] {
            height       : 35px;
            margin-bottom: 4px;
            font-size    : .85em;
        }


        form p.cod{
            grid-column: 1/2;
            color: #fff;
            justify-self: center;
        }

            form input[name="codcelular"]{
                grid-column: 2/6;
            }

                form p.telefono{
                    grid-column: 6/7;
                    color: #fff;
                    justify-self: center;
                }

                    form input[name="telefono"]{
                        grid-column: 7/-1;
                    }

    form input[type=submit]{
        padding: 20px 12px;
    }
    form textarea{height: 90px;}
    .formulario .limitador {width: 100%;}


    .portada {
        background: rgba(0,0,0,.7);
        background: -moz-linear-gradient(left, rgba(0,0,0,.8) 0%, rgba(0,0,0,.3) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,0,0,.7)), color-stop(100%, rgba(0,0,0,.3)));
        background: -webkit-linear-gradient(left, rgba(0,0,0,.7) 0%, rgba(0,0,0,.3) 100%);
    }
        .portada img{width: 240px; margin-bottom: 25px;}
        .headervideo img{top: 0;}

            .video{height: 250px;}

        .map{height: 420px; margin-top: 12px;}

    footer{padding: 25px;}


}