/* ---------------- */
/*     Servicios    */
/* ---------------- */

.servicios {
    position: relative;
    display:block;
    text-align:center;
    margin-left:auto;
    margin-right:auto;

    font-size:1.32vw;
    width:100%;
    height:190em;
}

.serviciosHeader {
    position:absolute;
    top:11em;
    left:4em;

    background:url(../layout/servicios_selva.jpg) top left no-repeat;
    background-size:95%;

    width:90%;
    height:35%;

    text-align:left;
}

.serviciosHeader h1 {
    margin:0;
    padding:0;
    margin-top:-0.2em;
    margin-left:0.3em;
    font-family: TrashHand,TrashHandF,Calibri,Carlito,CarlitoF,"Open Sans","Noto Sans","Helvetica Neue",FreeSans,Helvetica,Arial,sans-serif;
    color:#4484bf;
    font-size:700%;
    line-height:1;
    font-weight:normal;
}

.serviciosHeader h3 {
    margin:0;
    margin-top:-0.4em;
    padding:0;
    margin-left:3.6em;
    color:#032544;
    font-size:160%;
    line-height:1;
    font-weight:normal;
}

.servicios h2 {
    font-family: TrashHand,TrashHandF,Calibri,Carlito,CarlitoF,"Open Sans","Noto Sans","Helvetica Neue",FreeSans,Helvetica,Arial,sans-serif;
    font-size:230%;
    font-weight:normal;
    line-height:1;
    margin:0;
}

.serviciosText {
    display:block;
    position:absolute;
    right:3.5em;
    line-height:1.22;
    font-size:115%;
    z-index:3;
    width:60%;
}

.serviciosText b {
    font-size:125%;
}


.serviciosEducativas {
    color:#429ac8;
    top:40em;
    z-index:1;
}

.serviciosEducativas h2 {
    color:#1a4b7a;
}

.serviciosEducativas::after {
	content:"";
    position:absolute;
    display:block;
    top:22em;
    left:-12em;
    background: url(../layout/servicios_educativas.jpg) top left no-repeat;
    background-size: contain;
    width:49em;
    height:16em;
    z-index:-1;
}


.serviciosCondensacion {
    color:#1fb3c9;
    top:80em;
    z-index:1;
}

.serviciosCondensacion h2 {
    color:#0b6876;
}

.serviciosCondensacion::after {
	content:"";
    position:absolute;
    display:block;
    top:19em;
    right:-3.5em;
    background: url(../layout/servicios_condensacion.jpg) top right no-repeat;
    background-size: contain;
    width:48em;
    height:12em;
    z-index:-1;
}


.serviciosExplicativas {
    color:#38d2ce;
    top:115em;
    z-index:1;
}

.serviciosExplicativas h2 {
    color:#1f9895;
}

.serviciosExplicativas::after {
	content:"";
    position:absolute;
    display:block;
    top:17em;
    left:-10.5em;
    background: url(../layout/servicios_explicativas.jpg) top left no-repeat;
    background-size: contain;
    width:42em;
    height:14em;
    z-index:-2;
}


.serviciosQuote {
    position:absolute;
    top:86.5em;
    left:17.5em;

    font-family: TrashHand,TrashHandF,Calibri,Carlito,CarlitoF,"Open Sans","Noto Sans","Helvetica Neue",FreeSans,Helvetica,Arial,sans-serif;
    font-size:2em;
    color:#11b983;

    text-align:left;
    z-index: 3;
    line-height: 1.2;
    text-indent:-0.5em;
}
.quoteOrigen {
	font: 0.5em/1.6em Calibri,Carlito,CarlitoF,"Open Sans","Noto Sans","Helvetica Neue",FreeSans,Helvetica,Arial,sans-serif;
 	display:block;
 	text-align:right;
}
.quoteOrigen::before {
	content:"– ";
}

.serviciosBrain {
    position:absolute;
    top:159em;
    left:3.4em;

    background:url(../layout/servicios_brain.png) bottom left no-repeat;
    background-size:100%;

    width:35.3em;
    height:25em;

    text-align:left;
    z-index: 3;
}

.serviciosWaterfall {
    position:absolute;
    top:32em;
    left:4.8em;

    background:url(../layout/servicios_waterfall.png) top left no-repeat;
    background-size:100%;

    width:19.55em;
    height:150em;

    text-align:left;
    z-index: 1;
}



.serviciosVideoContainer {
    display:none;
    position:absolute;
    left:10%;
    margin-top:auto;
    margin-bottom:auto;
    width:80%;
    height: 0;
    padding-bottom: 45%;    /* for 16:9 ratio -> 0.8*56.25 */
    font-size:115%;
    box-shadow: 0 0 0.5em 0.2em rgba(0, 0, 0, .5);
    z-index:12;
}

.serviciosVideo {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:13;
}

.videoClose {
    position:absolute;
    right:0;
    top:0;
    display:block;

    width:1.5em;
    height:1.5em;

    background:#1a4b7a url('../layout/video_close.svg') no-repeat;
    background-size:90% 90%;
    background-position:center;

    font-size:200%;
    color:#fff;
    text-decoration:none;
    line-height:1.5em;
    text-align:center;

    z-index:14;
}

.videoClose:hover, .videoClose:active {
    background:#1a4b7a url('../layout/video_close_hover.svg') no-repeat;
    background-size:90% 90%;
    background-position:center;
}

.servicios_videoEducativas {
    top:40em;
}

.servicios_videoCondensacion {
    top:80em;
}

.servicios_videoExplicativas {
    top:115em;
}


a.boton1, a.boton2, a.boton3 {
    position:absolute;
    dispay:block;
    width:8em;
    height:6em;
    padding-top:2em;

    font-size:120%;
    text-decoration: none;
    color:#fff;
    line-height:1.0;
    z-index:5;
}

a.boton1 {
    left:15em;
    top:44em;

    background:url(../layout/elements/sprite_servicios_boton.png) 0 0;
    background-size:300%;
}

a.boton1:hover, a.boton1:active {
    background-position: 0 -8em;
    color:#fff;
}

a.boton2 {
    left:15em;
    top:82em;

    background:url(../layout/elements/sprite_servicios_boton.png) -8em 0;
    background-size:300%;
}

a.boton2:hover, a.boton2:active {
    background-position: -8em -8em;
    color:#fff;
}

a.boton3 {
    left:15em;
    top:115em;

    background:url(../layout/elements/sprite_servicios_boton.png) -16em 0;
    background-size:300%;
}

a.boton3:hover, a.boton3:active {
    background-position: -16em -8em;
    color:#fff;
}