/*GENERALES*/

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

@font-face {
    font-family: 'robotoregular';
    src: url('../font/roboto-Regular-webfont.eot');
    src: url('../font/roboto-Regular-webfont.eot') format('embedded-opentype'),
         url('../font/roboto-Regular-webfont.woff2') format('woff2'),
         url('../font/roboto-Regular-webfont.woff') format('woff'),
         url('../font/roboto-Regular-webfont.ttf') format('truetype'),
         url('../font/roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;}

@font-face {
	font-family: 'robotobold_condensed';
    src: url('../font/roboto-boldcondensed-webfont.eot');
    src: url('../font/roboto-boldcondensed-webfont.eot') format('embedded-opentype'),
         url('../font/roboto-boldcondensed-webfont.woff2') format('woff2'),
         url('../font/roboto-boldcondensed-webfont.woff') format('woff'),
         url('../font/roboto-boldcondensed-webfont.ttf') format('truetype'),
         url('../font/roboto-boldcondensed-webfont.svg#robotobold_condensed') format('svg');
    font-weight: normal;
    font-style: normal;
	}

html{font-family: robotoregular, robotobold_condensed, calibri; font-size: 16px;}

h1{color: #008494; font-size: 7em; font-family: robotobold_condensed; text-shadow: 2px 2px 3px #000;}
h2{font-size: 2.5em; line-height: 1.2em; margin: 1% 0;}
h3{font-size: 2.2em; font-family: robotobold_condensed; color: #fff; text-shadow: 2px 2px 3px #000;}
p {font-size: 1.1em;}
.destacado{font-size: 1.3em;}
.bold{font-weight: bold;}

/*COLOR*/

.cesd{color:#1D9F7F;}
.issd{color:#008494;}
.asd{color:#004A6E;}
.fsd{color:#154194;}
.dis{color:#E4003A;}
.tel{color:#EA5A0B;}
.web{color:#D6007E;}
.gem{color:#F7A600;}
.asc{color:#764896;}
.secu{color:#AFCA0A;}
.secre{color:#C83664;}
.ofi{color:#4AA0AE;}
.gris{color:#777;}
.grisclaro{color:#aaa;} 
.grisoscuro{color:#444;}
.blanco{color:#fff;}
.negro{color:#000;}

/*TOP REDES*/

.top{width: 100%; background: #111; height: 30px; padding: 5px 3%; color: #fff; font-size: 0.8em; position: fixed; box-shadow: 0 3px 3px rgba(0,0,0,0.2);}

.contacto ul, .redes ul{list-style: none;}
    .contacto ul li{display: inline-block;}

    .contacto span{color:#fff; border-radius: 50%; background: #008494; padding: 5px; margin: 0 5px 0 10px;}
    .redes span{color:#fff; border-radius: 50%; background: #008494; padding: 5px; margin: 0 0 0 5px; transition: all 0.5s ease;}
    .redes span:hover{background: #bbb;}

    .contacto{float:left;}
    .redes{float: right;}

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

/*LOGO*/

.logo{float: left; background: #333; height: 70px;}

/*MENU*/

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

/*PORTADA*/

.portada img{text-align: center; margin: 0 auto; margin-left: 30%; margin-top: 40px;}

		.portada h1{line-height: 0.8em; text-transform: uppercase; margin:-30px 0 0 0;}
		.portada h1 span{font-size: 0.25em; color: #fff; line-height: 1.5em;}
        .portada h3{margin-top: 3%;}

		div.inscribite{background: #008494; padding: 20px; text-align: center; margin-top: 30px; cursor: pointer; transition: all 0.5s ease; font-size: 1.5em; color: #fff; width: 250px; font-family: robotobold_condensed;}

        div.inscribite span{font-size: 0.85em; margin-right: 7px; display: none;}

        div.inscribite:hover{background: #aaa; border-radius: 10px; transition: all 0.5s ease;}
            div.inscribite:hover span{display: inline;}


/*COLUMNA IZQUIERDA*/

    .izq{width: 65%; padding: 4% 3% 4% 3%; float: left; background: #008494; color: #fff; height: 1600px;}
        .izq h2{font-family: robotobold_condensed; color: #fff;}
            h2 span{font-size: 0.6em; margin-right: 6px; color: #333;}

        .izq ul{list-style: none;}

    .izq article {border-bottom: 1px solid #fff; padding: 0 0 4% 0;}

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

    #contenido ul li span{margin-right: 4px; font-size: 0.8em; color: #333;}


        .video{width: 100%;height: 450px;}

/*CONTACTO CELULAR*/

.contactocelu{float:left; width: 100%; height: auto; padding: 1% 2%; background: #ccc; display: none;}
.contactocelu ul{list-style: none; font-family: robotobold_condensed; text-align: center; text-transform: uppercase; line-height: 2em; color: #444;}

    .iconocontactocelu {color:#fff; border-radius: 50%; background: #008494; padding: 5px; margin: 0 0 0 5px; transition: all 0.5s ease;}
    .iconocontactocelu:hover {background: #333;}
    
/*COLUMNA DERECHA*/

    .der{width: 35%; padding: 3% 3%; float: right; background: #333; z-index: 1; color: #fff; height: 1600px;}
        .der h2{font-family: robotobold_condensed;}
        .der ul{list-style: none;}

/*DISERTANTES*/

.disertantes{background: blue; height: 500px; padding: 50px;}
	.disertantes img{width: 200px; height: 200px; border-radius: 50%; float: left;}

/*FORMULARIO*/

.formulario{border-bottom: 1px solid #fff; padding-bottom: 2%; margin-bottom: 2%;}

    form input[type=text], input[type=email]{width: 100%; height: 35px; margin-bottom: 10px; padding: 5px; border: 1 solid #008494; font-family: robotoregular;}
        
        form .numero input:first-of-type{float:left; width: 30%; margin-right: 2%;}
        form .numero input:last-of-type{float:left; width: 68%;}

    form textarea{width: 100%; height: 250px; padding: 5px; margin-bottom: 5px; font-family: robotoregular;}

    form input[type=submit]{width: 100%; padding: 15px; background: #008494; transition: all 0.5s ease; color: #fff; font-size: 1.3em; font-family: robotobold_condensed; margin-bottom: 5px; cursor: pointer;}
    form input[type=submit]:hover{background: #aaa; border-radius: 10px;}

    form span{font-size: 0.8em;}

/*MAPA DE GOOGLE*/

.mapa {padding-bottom: 2%;}
.map{border:0; width: 100%; height: 500px; padding: 2% 0;}
    .mapa p{font-size: 1em;}

/*FOOTER*/

footer{width: 100%; float:left; background: #fff; display: none;}

/*COPY*/

.copy{float: left; width: 100%; background: #111; font-size: 0.7em; color: #fff; text-align: center; padding: 7px; font-family: robotobold_condensed;}

/*MEDIA QUERIES*/

@media screen and (max-width: 1200px) {
    h1{font-size: 6.5em;}
    h3{font-size: 2em;}
}


@media screen and (max-width: 1000px) {
    .izq{width: 100%; height: auto;}
    .der{width: 100%; padding: 3%; float: left; height: auto;}
    .map{height: 400px;}
}

@media screen and (max-width: 900px) {
    
    h1{font-size: 5em;}
    h3{font-size: 1.8em;}
        .portada h1 span{font-size: 0.2em;}
    .portada > div{width: 70%;}
    .video{height: 400px;}
}

@media screen and (max-width: 700px) {
    .top{display:none;}
    .map{height: 350px;}
    .portada > div{width: 90%;}
    .portada{height: 100%; min-height: auto; padding-bottom: 15%; padding-top:0;}

    .portada{background-image: url(../img/portada700.jpg); min-height: 680px;}
    .video{height: 350px;}

    .contactocelu{display: block;}
}

@media screen and (max-width: 560px) {
    
    h1{font-size: 4.5em;}
    h2{font-size: 2em;}
    h3{font-size: 1.6em;}
}


@media screen and (max-width: 480px) {
    
    .portada > div{width: 94%;}
    h1{font-size: 3.8em;}
    h2{font-size: 2em;}
    h3{font-size: 1.6em;}
    .portada{background-image: url(../img/portada480.jpg); min-height: 600px;}
    .video{height: 300px;}
}

@media screen and (max-width: 360px) {
        form .numero input:first-of-type{width: 100%; margin-right: 0;}
    form .numero input:last-of-type{width: 100%;}
    h1{font-size: 3.1em;}
        .portada h1 span{font-size: 0.3em;}
    h2{font-size: 1.8em;}
    h3{font-size: 1.5em;}
    .portada img{width: 260px; margin-bottom: 10px;}
    p {font-size: 1em;}
    form textarea{height: 200px;}
    .video{height: 250px;}
}

/*-----------------------------------BOTÓN IR ARRIBA------------------------*/

.irarriba {padding:15px; background:#aaa; font-size:20px; color:#fff; cursor:pointer; position: fixed; bottom:20px; right:20px; border-radius:15px; transition: all 0.5s ease;}

    .irarriba:hover{border-radius: 50%; background: #666;}

        h1 span{color:red; margin-right: 20px;font-size: 40px;}