/* ---------------- */
/*     Nosotros     */
/* ---------------- */

.siteNosostros {
    background:#c0ede9 url(../layout/nosotros_background.png) fixed;
    background-size:50%;
    background-overflow: visible;
    width:100%;
}

.nosotrosContainer {
    background: linear-gradient(0deg, rgba(8, 171, 159, 1), rgba(54, 187, 178, 1), rgba(192, 237, 233, 1), rgba(192, 237, 233, 0.8), rgba(192, 237, 233, 0), rgba(192, 237, 233, 0.8));
    with:100%;
    display:block;
    overflow:hidden;
}

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

    font-size:1.32vw;
    width:100%;
    /*height:233em;*/
}

.nosotrosEgg {
    position:relative;
    /*top:20em;*/
    /*background: linear-gradient(135deg, #c4e6e4, #7fddda, #5dd8d5, #39d3cf, #2da3a0);*/
    background: linear-gradient(135deg, #f5fffe, #69dad7, #39d3cf, #38cfcb, #2ea7a4);
    box-shadow: 1em 1em 2em 0.5em rgba(0, 0, 0, .3);

    width:70em;
    height:140em;
    margin-left:auto;
    margin-right:auto;
    top:18em;

    border-radius:33em;
    display:inline-block;
}

.nosotrosEgg::before {  /* nosotros eye */
    content:"";
    display:block;
    position:absolute;
    margin-left:27.5em;
    margin-top:-7em;
    background:url(../layout/nosotros_eye2.png) no-repeat;
    background-size:contain;
    width:15em;
    height:15em;
}

.nosotrosEgg h1 {
    font-family: TrashHand,TrashHandF,Calibri,Carlito,CarlitoF,"Open Sans","Noto Sans","Helvetica Neue",FreeSans,Helvetica,Arial,sans-serif;

    display:inline-block;
    text-align:left;
    margin:0;
    padding:0;

    position:absolute;
    left:0.46em;
    top:-1.45em;

    color:#074946;
    font-size:720%;
    line-height:1;
    font-weight:normal;
}

.nosotrosEgg h1::after {    /* nosotros arrow */
    content:"";
    display:block;
    position:absolute;
    right:-0.95em;
    top:0.25em;
    background:url(../layout/nosotros_arrow.svg) no-repeat;
    background-size:contain;
    width:0.8em;
    height:0.5em;
}

p.nosotros1 {      /* diseñamos y desarrollamos */
	position: absolute;
    display:inline-block;
    left:10em;
	top:2.5em;
    font-size:380%;
    text-transform:uppercase;
    line-height:0.5;
    color:#052825;
}

p.nosotros1::before {
    content:"";
    display:block;
    position:absolute;
    left:-7.5em;
    top:-1.7em;
    width:6.5em;
    height:6em;
    background:url(../layout/nosotros_teamDesarrollo.png) no-repeat;
    background-size:contain;
}


p.nosotros2 {      /* todo tipo de instrumentos conceptuales comunicacionales */
    position: absolute;
    display:inline-block;
    left:1.5em;
    top:10em;
    font-size:380%;
    line-height:0.8;
    width:6em;
    text-align:center;
}

p.nosotros2::after {
    content:"";
    display:block;
    position:absolute;
    right:-9.5em;
    top:-1.8em;
    width:8em;
    height:6em;
    background:url(../layout/nosotros_teamTodoTipo.svg) no-repeat;
    background-size:contain;
}

p.nosotros3 {      /* que facilitan el trabajo ... */
    position: absolute;
    display:inline-block;
    left:3.6em;
    top:13em;
    font-size:480%;
    text-align:right;
    line-height:0.5;
}

p.nosotros4 {      /* Aprendizaje Capacitación Cnocimientos específicos */
    position:absolute;
    display:block;
    left:0;
    top:12.4em;
    width:100%;
    padding-top:3em;

    font-size:590%;
    letter-spacing:-0.03em;
    text-transform: uppercase;
    line-height:1.0;

    background:url(../layout/nosotros_teamIdeas.png) top no-repeat;
    background-size:contain;
}

p.nosotros5 {      /* Como lo hacemos... */
    position:absolute;
    display:block;
    width:100%;
    left:0;
    top:30em;
    line-height:0.6;

    padding-bottom:9.5em;

    font-size:380%;

    background:url(../layout/nosotros_clientes.png) bottom no-repeat;
    background-size:90%;
}

p.nosotros_identificamos {
    width:100%;
    margin-top:11em;
    
    color:#daf7f4;
    font-size:380%;
    font-weight:bold;
    text-transform: uppercase;
    text-align:center;
    line-height:0.7;
}

p.nosotros_identificamos::after {
    content:"";
    display:block;
    width:4.5em;
    height:2.3em;
    margin-top:0.2em;
    margin-left:auto;
    margin-right:auto;

    background:url(../layout/nosotros_puzzle_3.png) top no-repeat;
    background-size:contain;
}

div.nosotros_spread {
    position:relative;
    display:flex;
    flex-direction: row;
    width:90%;    
    margin-top:-6em;
    margin-left:auto;
    margin-right:auto;
}

p.nosotros_coyunturas {
    display:inline-block;    
    flex:3;
    position:relative;
    clear:none;
    
    font-size:380%;
    text-transform: uppercase;
    text-align:center;
    line-height:0.4;
}

span.nosotros_lasCoyunturas, span.nosotros_losAspectos, p.nosotros_y {
    color:#074946;
    font-weight:bold;
    line-height:0.2;
}

span.nosotros_masRelevantes, span.nosotros_masImportantes {
    font-family: TrashHand,TrashHandF,Calibri,Carlito,CarlitoF,"Open Sans","Noto Sans","Helvetica Neue",FreeSans,Helvetica,Arial,sans-serif;
    font-weight:normal;
    font-size:70%;

    color:#edf7f5;
    line-height:0.2;
}


p.nosotros_y {
    display:inline-block;    
    flex:1;
    position:relative;
    clear:none;
    
    font-size:380%;
    text-transform: uppercase;
    text-align:center;
    line-height:0.4;
}

p.nosotros_aspectos {
    display:inline-block;    
    flex:3;
    position:relative;
    clear:none;
    
    font-size:380%;
    text-transform: uppercase;
    text-align:center;
    line-height:0.4;
}


.nosotros_puzzleBorder {
    padding-top:5em;

    background:#08ab9f;
    position:relative;
    display:flex;
    flex-direction:row;
    width:100%;
    font-size:1.32vw;
    overflow:visible;
}

.puzzlespacer {
    display:block;
    flex:1 1 auto;
    width:0;
}

.puzzlespacer_left {
    background:url('../layout/nosotros_puzzle_continuous_left.png') bottom right repeat-x;
    background-size:14.1em;
}

.puzzlespacer_right {
    background:url('../layout/nosotros_puzzle_continuous_right.png') bottom left repeat-x;
    background-size:14.0em;
}

div.nosotros_puzzleBorder_center {
    position:relative;

    display:block;
    flex:0 0 auto;
    height:26em;

    margin-left:auto;
    margin-right:auto;
}


div.nosotros_proponemos {
    display:block;
    position: relative;
    margin-left:auto;
    margin-right:auto;
    top:0.5em;
    width:10em;
    height:4em;
    
    text-align:left;
    font-size:340%;
    line-height:0.5;

    z-index:4;
}

div.nosotros_cada{
    display:inline-block;
    position:absolute;
    margin-left:0.2em;
    margin-top:0.28em;
    
    text-align:right;
    font-size:100%;
    line-height:0.5;
}

div.nosotros_puzzle_parallax01 {
    position:absolute;
    display:block;

    top:-10em;
    left:3.8em;

    width:6em;
    height:10em;

    background:url(../layout/nosotros_puzzle_parallax01.png) top no-repeat;
    background-size:contain;

    transition:none;

    z-index:1;
}

div.nosotros_puzzle_parallax02 {
    position:absolute;
    display:block;

    top:-7em;
    left:11em;

    width:6em;
    height:6em;

    background:url(../layout/nosotros_puzzle_parallax02.png) top no-repeat;
    background-size:contain;

    transition:none;

    z-index:1;
}

div.nosotros_puzzle_parallax03 {
    position:absolute;
    display:block;

    top:-7em;
    right:5em;

    width:6em;
    height:6em;

    background:url(../layout/nosotros_puzzle_parallax03.png) top no-repeat;
    background-size:contain;

    transition:none;

    z-index:1;
}

div.nosotros_puzzle_parallax04 {
    position:absolute;
    display:block;

    top:-6em;
    right:12em;

    width:6em;
    height:6em;

    background:url(../layout/nosotros_puzzle_parallax04.png) top no-repeat;
    background-size:contain;

    transition:none;

    z-index:1;
}

div.nosotros_puzzle_parallax05 {
    position:absolute;
    display:block;

    top:-2em;
    right:4.9em;

    width:9.5em;
    height:9.5em;

    background:url(../layout/nosotros_puzzle_parallax05.png) top no-repeat;
    background-size:contain;

    transition:none;

    z-index:2;
}

div.nosotros_puzzle_parallax06 {
    position:absolute;
    display:block;

    top:-4em;
    right:-2.3em;

    width:6em;
    height:6em;

    background:url(../layout/nosotros_puzzle_parallax06.png) top right no-repeat;
    background-size:contain;

    transition:none;

    z-index:2;
}

div.nosotros_puzzle_parallax07 {
    position:absolute;
    display:block;

    top:-5em;
    left:-3.05em;

    width:6em;
    height:6em;

    background:url(../layout/nosotros_puzzle_parallax07.png) top right no-repeat;
    background-size:contain;

    transition:none;

    z-index:2;
}

div.nosotros_puzzle_parallax08 {
    position:absolute;
    display:block;

    top:-2em;
    left:0.3em;

    width:6em;
    height:6em;

    background:url(../layout/nosotros_puzzle_parallax08.png) top right no-repeat;
    background-size:contain;

    transition:none;

    z-index:1;
}

div.nosotros_puzzle_big {
    position:absolute;

    display:block;
    width:100%;
    height:26em;

    bottom:0;
    left:0;

    background:url(../layout/nosotros_puzzle_big2.png) bottom no-repeat;
    background-size:contain;

    z-index:5;
}


.nosotrosSky {
	position: relative;
    background-color:#fff;
    display:block;
    width:100%;
    font-size:100%;
    padding-top:1em;
    padding-bottom:3em;
    overflow:hidden;
}

.nosotrosSkyContainer {
    with:100%;
    display:block;
    margin-left:auto;
    margin-right:auto;
    font-size:1.32vw;
}

.city_bienSea {
    font-family: TrashHand,TrashHandF,Calibri,Carlito,CarlitoF,"Open Sans","Noto Sans","Helvetica Neue",FreeSans,Helvetica,Arial,sans-serif;
    color:#27726b;

    font-size:300%;
}

.cityTerminos {
    display:flex;
    flex-direction:row;
    margin-left:auto;
    margin-right:auto;
    line-height:0;
    font-size:100%;
    width:90%;

    padding-bottom:3em;
}

.city_lenguaje, .city_contenidos, .city_tecnica {
    flex:1;
    display:inline-block;

    margin:0;

    color:#074946;
    text-transform:uppercase;
    font-weight:bold;
    font-size:250%;
    line-height:1;
}

.city_lenguaje::before, .city_contenidos::before, .city_tecnica::before {
    content:"";
    display:block;
    width:3em;
    height:3em;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0.4em;
}

.city_lenguaje::before {
    background:url(../layout/nosotros_lenguaje_circle.png) bottom no-repeat;
    background-size:contain;
}

.city_contenidos::before {
    background:url(../layout/nosotros_contenidos_circle.png) bottom no-repeat;
    background-size:contain;
}

.city_tecnica::before {
    background:url(../layout/nosotros_tecnica_circle.png) bottom no-repeat;
    background-size:contain;
}

.city_lenguaje::after, .city_contenidos::after, .city_tecnica::after {
    content:"";
    display:block;
    width:5.5em;
    height:4.2em;
    margin-left:auto;
    margin-right:auto;
    margin-top:0.4em;
}

.city_lenguaje::after {
    background:url(../layout/nosotros_lenguaje_illustration.png) bottom no-repeat;
    background-size:contain;
}

.city_contenidos::after {
    background:url(../layout/nosotros_contenidos_illustration.png) bottom no-repeat;
    background-size:contain;
}

.city_tecnica::after {
    background:url(../layout/nosotros_tecnica_illustration.png) bottom no-repeat;
    background-size:90%;
}



.sky_parallax {
    margin-top:8em;
	position:relative;
	height:70em;
}

.city_rocket {
    background:url(../layout/nosotros_rocket.png) top no-repeat;
    background-size:contain;

    position:absolute;
    top:26em;
	right:14em;

    width:60%;
    height:50em;

    z-index:5;
}

.city_cloud1 {
    background:url(../layout/nosotros_cloud1.svg) bottom no-repeat;
    background-size:contain;

    position:absolute;
    top:2em;
	right:-3em;

    width:100%;
    height:28em;

    line-height:0;

    z-index:1;
}

.city_cloud2 {
    background:url(../layout/nosotros_cloud2.svg) bottom no-repeat;
    background-size:contain;

    position:absolute;
    top:50em;
	left:17em;

    width:20%;
    height:10em;

    z-index:1;
}

.city_cloudText1 {
	position:absolute;
	top:3.6em;
	left:4.4em;
	display:inline-block;

	font-size:380%;
	line-height:0.2;
	text-align:left;

	z-index:3;
}

.city_cloudText2 {
	position:absolute;
	top:14em;
	left:11em;
	display:inline-block;

	font-size:380%;
	line-height:0.5;
	text-align:right;

	z-index:3;
}



.nosotrosCity {
	position:relative;
    background:linear-gradient(180deg, #fff, #66cbc4);
    display:block;
    width:100%;
    font-size:100%;
}

.nosotrosCityContainer {
	position:relative;
    with:100%;
    display:block;
    margin-left:auto;
    margin-right:auto;
    font-size:1.32vw;
}

.city_edificios {
    background: url(../layout/nosotros_city.png) 0 44.6em no-repeat;
    background-size:contain;

    position:relative;

	width:100%;
    height:78em;

    z-index:1;
}

.city_tower {
    background:url(../layout/nosotros_city_tower.png) top center no-repeat;
    background-size:contain;

    position:absolute;
    top:0;
	left:33.8em;

    width:13.2em;
    height:65em;

    z-index:2;
}

.city_cloud3 {
    background:url(../layout/nosotros_cloud3.svg) bottom no-repeat;
    background-size:contain;

    position:absolute;
    top:3.6em;
	right:3em;

    width:38%;
    height:13em;

    z-index:3;
}

.city_cloud4 {
    background:url(../layout/nosotros_cloud4.svg) bottom no-repeat;
    background-size:contain;

    position:absolute;
    top:12em;
	left:14.5em;

    width:28%;
    height:13em;

    z-index:1;
    transition: none;
}

.city_cloudText3 {
	position:absolute;
	top:1.8em;
	left:1.4em;
	display:inline-block;

	font-size:420%;
	line-height:0.4;
	text-align:left;

	z-index:4;
}

.city_cloudText4 {
	position:absolute;
	top:5.8em;
	right:0.5em;
	display:inline-block;

	font-size:380%;
	line-height:0.4;
	text-align:left;

	z-index:4;
}

.city_cloudText5 {
	position:absolute;
	top:27.5em;

	width:100%;

	font-size:240%;
	text-align:center;
	line-height:0.5;
}


.nosotrosWhite {
	position:relative;
    background:#fff;
    display:block;
    width:100%;
    font-size:100%;
}

.nosotrosWhiteContainer {
	position:relative;
    with:100%;
    display:block;
    margin-left:auto;
    margin-right:auto;
    font-size:1.32vw;
    height:40em;
}

.city_cloudText6 {
	position:absolute;
	top:-0.8em;

	width:100%;	/* must be same width as city_cloudText5 */

	font-size:240%;

	text-align:center;
	line-height:0.5;
}

.city_logo {
	position:absolute;
	top:3em;

	width:100%;	/* must be same width as city_cloudText5 */

	font-size:240%;
	text-align:center;
}

.city_logo img {
	width:10em;
	height:auto;
}

.parallax {
    transition: all .25s ease-out;
}