@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800');

* {
	box-sizing: border-box;
}

body {
	margin:0;
	font-family: 'Open Sans', sans-serif;
	font-size:10px;
	color:#363636;
	font-weight:300;
}
strong {
	font-weight:700;
}
input, textarea {
    box-shadow: none !important;
    outline: none;
}

a { text-decoration:none; }

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    margin: 0;
}

img {
	max-width:100%;
}
.table { display: table; }
.cell { display: table-cell; vertical-align: middle; }
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently */
}

#loading {
	position: fixed;
	z-index: 1001;
	background: rgba(0,0,0,0.9);
	left: 0; top: 0; width: 100%; height: 100%;
}
#loading svg {
	content: "";
	display: block;
	background: center no-repeat;
	background-size: cover;
	position: absolute;
	width: 70px; height: 70px;
	left: 50%; top: 50%;
	margin-left: -35px; margin-top: -35px;
}
#loading svg .st0{
	fill:#FFFFFF;
	transform-origin: 35px 35px;
	-webkit-animation-name: loadinganim;
    -webkit-animation-duration: 1s;
    animation-name: loadinganim;
    animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
@keyframes loadinganim {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#boton-menu-mobile {
	padding: 15px;
	background: #000000;
	position: fixed;
	top: 20px; right: 20px;
	z-index: 1000;
	cursor: pointer;
	display: none;
}
#boton-menu-mobile .st0{fill:#FFFFFF;}

#boton-menu-mobile.activo {
	background: #cc0000;
}

#menu-mobile.activo {
	transform: translateY(0%);
}
#menu-mobile {
	position: fixed;
	z-index: 999;
	left: 0; top: 0; width: 100%; height: 100%;
	overflow-y: auto;
	background: #000000;
	transform: translateY(-100%);
	transition: all 0.6s;
	display: none;
}
#menu-mobile div {
	padding: 100px 0 80px;
}
#menu-mobile .botonmenu {
	display: block;
	padding: 20px;
	text-align: center;
	font-size : 20px;
	letter-spacing : 1.13px;
	color : #FFFFFF;
	text-transform: uppercase;
}
#menu-mobile span.botonmen,
#menu-mobile .botonmenu.activo {
	color : #CC0000;
}

.popupContainer {
	background: rgba(26,26,26,0.9);
	position: fixed;
	left: 0; top: 0;
	width: 100%; height: 100%;
	overflow-y: auto;
	display: none;
}
.popupContainer .overlay {
	position: absolute;
	cursor: pointer;
	left: 0; top: 0;
	width: 100%; height: 100%;
	cursor: pointer;
}
.popupContainer .table {
	width: 100%; height: 100%;
}
.popupContainer .table .cell {
	display: table-cell; vertical-align: middle;
	text-align: center;
	position: relative;
}
.popupContainer .popup {
	display: inline-block;
	background: #ffffff;
	width: 100%;
	max-width: 1000px;
	padding: 2px;
	box-sizing: border-box;
	min-height: 300px;
	position: relative;
	z-index: 10;
}
.popupContainer .popup .cerrar {
	position: absolute;
	top: 2px; right: 2px;
	width: 64px; height: 64px;
	background: url(images/botonCerrar.png) center no-repeat #2297d8;
	transition: all 0.2s;
	cursor: pointer;
}
.popupContainer .popup .cerrar:hover {
	background-color: #1a1a1a;
}

#navegacion {
    display: block;
    position: fixed;
    left: 40px; top: 0; height: 100%; line-height: 100%; vertical-align: middle;
    z-index: 100;
}
#navegacion .table {
    height: 100%;
}
#navegacion .boton {
    display: block;
    width: 22px; height: 22px;
    border: 1px solid #ef4b2b;
    padding: 5px;
    border-radius: 100000px;
    transition: all 0.3s;
    margin: 20px;
    cursor: pointer;
}
#navegacion .boton::before {
    content: "";
    display: block;
    width: 100%; height: 100%;
    background: #ef4b2b;
    border-radius: 100000px;
}
#navegacion .boton.activo {
    transform: scale(1.5);
    padding: 3px;
}


.seccion {
    position: fixed;
    left: 0; top: 0;
    width: 100%; height: 100%;
}
.seccion .table {
	width: 100%; height: 100%;
}
.seccion .table .cell {
	display: table-cell; vertical-align: middle;
	text-align: left;
	position: relative;
}
.container {
    width: 100%;
	max-width:1620px;
    padding: 40px 80px 80px 80px;
	margin:auto;
	text-align:left;
	position:relative;
}

.mousealerta svg .st0{
    fill:none;stroke:#EF4B2B;stroke-width:2;stroke-miterlimit:10;
    transition: all 0.3s;
}
.mousealerta {
    position: absolute;
    left: 0; bottom: 0px;
    width: 100%;
    text-align: center;
    z-index: 1;
}
.mousealerta svg {
    display: inline-block;
    cursor: pointer;
}
.mousealerta svg:hover .st0 {
    stroke: #34323f;
}
.mousealerta svg:hover .flecha {
    transform: translateY(7px);
}

#contact .mousealerta {
    bottom: 40px;
    pointer-events: none;
}
#contact .mousealerta svg {
    pointer-events: auto;
}

#contact .mousealerta svg:hover .st0 {
    stroke: #ffffff;
}
#contact .mousealerta svg:hover .flecha {
    transform: translateY(-7px);
}

/*  ---------- HOME ---------- */

#home {
    background: #ecebf2;
}

#home .col {
    display: inline-block; vertical-align: middle;
    width: 50%;
}
#home .col.izq {
    width: 45%;
}
#home .col.der {
    width: 55%;
    text-align: center;
    position: relative;
}
#home .logo {
    display: block;
    margin-bottom: 55px;
}

#home h1 {
    font-size : 99px;
    line-height : 109.93px;
    color : #3E3D4C;
    font-weight: 800;
    margin-bottom: 30px;
}
#home h1 strong {
    color : #ef4b2b;
    font-weight: 800;
}

#home p {
    font-size : 26px;
    line-height : 42px;
    letter-spacing : 0.65px;
    color : #525263;
    margin: 0 0 50px 0;
}
#home p strong {
    color: #ef4b2b;
}

#home .fondo {
    position: absolute;
    width: 930px; height: 930px;
    top: 50%; margin-top: -500px;
    left: 50%; margin-left: -465px;
    transform: translateX(43%);
}
#home .fondo .circulo {
    width: 100%; height: 100%;
    position: absolute;
    left: 0; top: 0;
    background: #e8e6ef;
    border-radius: 1000000px;
    transform-origin: center center;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
#home .fondo .circulo.c1 {
    animation-name: homecirculo1;    
}
#home .fondo .circulo.c2 {
    transform: scale(1.45);
    background: #ecebf2;
    animation-name: homecirculo2;
    animation-delay: 0.2s;
}
#home .fondo .circulo.c3 {
    transform: scale(1.90);
    animation-name: homecirculo3;
    animation-delay: 0.4s;
}
#home .fondo .circulo.c4 {
    transform: scale(2.35);
    background: #ecebf2;
    animation-name: homecirculo4;
    animation-delay: 0.6s;
}
#home .fondo .circulo.c5 {
    transform: scale(2.90);
    animation-name: homecirculo5;
    animation-delay: 0.8s;
}

@keyframes homecirculo1 {
    0% { transform: scale(1); }
    30% { transform: scale(0.9); }
    50% { transform: scale(1.2); }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
@keyframes homecirculo2 {
    0% { transform: scale(1.45); }
    30% { transform: scale(1.35); }
    50% { transform: scale(1.65); }
    70% { transform: scale(1.55); }
    100% { transform: scale(1.45); }
}
@keyframes homecirculo3 {
    0% { transform: scale(1.90); }
    30% { transform: scale(1.80); }
    50% { transform: scale(2.1); }
    70% { transform: scale(2); }
    100% { transform: scale(1.90); }
}
@keyframes homecirculo4 {
    0% { transform: scale(2.35); }
    30% { transform: scale(2.25); }
    50% { transform: scale(2.55); }
    70% { transform: scale(2.45); }
    100% { transform: scale(2.35); }
}
@keyframes homecirculo5 {
    0% { transform: scale(2.90); }
    30% { transform: scale(2.80); }
    50% { transform: scale(3.1); }
    70% { transform: scale(3); }
    100% { transform: scale(2.90); }
}

.botonContacto {
    display: inline-block;
    background: #ef4b2b;
    border: none;
    border-radius: 1000000px;
    transition: all 0.3s;
    cursor: pointer;
    padding: 0;
}
.botonContacto span {
    display: inline-block; vertical-align: middle;
    padding: 15px 20px 15px 30px;
    font-weight : 700;
    font-size : 29px;
    letter-spacing : 1.45px;
    color : #FFFFFF;
    transition: all 0.3s;
}
.botonContacto .der {
    background: #e2351e;
    padding: 15px 30px 15px 15px;
    border-radius: 0 1000px 1000px 0;
    transition: all 0.3s;
}
.botonContacto svg {
    display: block;
}
.botonContacto svg .st0 {
    fill:#FFFFFF;
    transition: all 0.3s;
}

.botonContacto:hover {
    background: #ffffff;
}
.botonContacto:hover span {
    color: #ef4b2b;
    padding: 15px 20px 15px 40px;
}
.botonContacto:hover .der {
    background: #ffffff;
    padding: 15px 40px 15px 15px;
}
.botonContacto:hover svg .st0 {
    fill:#ef4b2b;
}

#home_ilustracion {
    width: 786px;
    max-width: 100%;
}
#home_ilustracion .st0{clip-path:url(#SVGID_2_);fill:#EF4B2B;}
#home_ilustracion .mask{clip-path:url(#SVGID_2_);}
#home_ilustracion .st2{opacity:0.15;fill:#34323F;}
#home_ilustracion .st3{opacity:0.27;fill:#FFFFFF;}
#home_ilustracion .st4{fill:#34323F;}
#home_ilustracion .st5{fill:#23222B;}
#home_ilustracion .st6{fill:#E5B095;}
#home_ilustracion .st7{fill:#D89E84;}
#home_ilustracion .st8{fill:none;stroke:#EF4B2B;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
#home_ilustracion .st9{fill:#262530;}
#home_ilustracion .st10{fill:#1F1E26;}
#home_ilustracion .st11{fill:#3E3D4C;}
#home_ilustracion .st12{opacity:0.8;fill:#FFFFFF;}
#home_ilustracion .st13{opacity:0.5;}
#home_ilustracion .st14{fill:none;stroke:#34323F;stroke-width:1.6275;stroke-miterlimit:10;}
#home_ilustracion .st15{fill:none;stroke:#34323F;stroke-width:0.5798;stroke-miterlimit:10;stroke-dasharray:2.1173,2.1173;}
#home_ilustracion .st16{fill:none;stroke:#34323F;stroke-width:1.8946;stroke-miterlimit:10;}
#home_ilustracion .st17{fill:#FFFFFF;stroke:#34323F;stroke-width:1.8946;stroke-miterlimit:10;}
#home_ilustracion .st18{fill:#EF4B2B;}
#home_ilustracion .st19{fill:none;stroke:#34323F;stroke-width:0.5616;stroke-miterlimit:10;stroke-dasharray:2.0512,2.0512;}
#home_ilustracion .st20{fill:none;stroke:#34323F;stroke-width:2;stroke-miterlimit:10;}
#home_ilustracion .st21{opacity:0.6;fill:#FFFFFF;}
#home_ilustracion .st22{fill:#E8E6EF;}
#home_ilustracion .st23{fill:none;stroke:#34323F;stroke-width:1.8354;stroke-miterlimit:10;}
#home_ilustracion .st24{fill:#EF4B2B;stroke:#34323F;stroke-width:1.8354;stroke-miterlimit:10;}
#home_ilustracion .st25{fill:#FFFFFF;stroke:#34323F;stroke-width:1.8354;stroke-miterlimit:10;}
#home_ilustracion .st26{fill:#4A485B;stroke:#34323F;stroke-width:1.8354;stroke-miterlimit:10;}
#home_ilustracion .st27{opacity:0.1; fill:#FFFFFF;}
#home_ilustracion .todos{ clip-path:url(#SVGID_4_); }

#home_ilustracion #brazo1 {
    transform-origin: 483px 382px;
    animation-name: brazo1;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
#home_ilustracion #brazo1 #brazo1_antebrazo {
    transform-origin: 357px 459px;
    animation-name: brazo1_antebrazo;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

@keyframes brazo1 {
    0% { transform: rotate(0);}
    5% { transform: rotate(0);}
    20% { transform: rotate(18deg); }
    25% { transform: rotate(18deg); }
    40% { transform: rotate(10deg); }
    45% { transform: rotate(10deg); }
    60% { transform: rotate(18deg); }
    65% { transform: rotate(18deg); }
    80% { transform: rotate(10deg); }
    85% { transform: rotate(10deg); }
    100% { transform: rotate(0deg); }
}
@keyframes brazo1_antebrazo {
    0% { transform: rotate(0);}
    5%  { transform: rotate(0);}
    20% { transform: rotate(-38deg); }
    25% { transform: rotate(-38deg); }
    40% { transform: rotate(-15deg); }
    45% { transform: rotate(-15deg); }
    60% { transform: rotate(-13deg); }
    65% { transform: rotate(-13deg); }
    80% { transform: rotate(-22deg); }
    85% { transform: rotate(-22deg); }
    100% { transform: rotate(0deg); }
}

#home_ilustracion #reflejos #ref1,
#home_ilustracion #reflejos #ref2,
#home_ilustracion #reflejos #ref3 {
    animation-name: reflejos;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
@keyframes reflejos {
    0% { transform: translateX(0);}
    20% { transform: translateX(150px);}
    20.1% { opacity: 0; }
    20.2% { transform: translateX(-100px);}
    20.3% { opacity: 0.1; }
    40% { transform: translateX(0px);}
}

#fondo #edificios {
    animation-name: edificios;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes edificios {
    0% { transform: translateX(0);}
    100% { transform: translateX(-649px);}
}

#fondo #nubes {
    animation-name: nubes;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes nubes {
    0% { transform: translateX(0);}
    100% { transform: translateX(-840px);}
}


#ventana1 #grafico1 {
    transform-origin: 232px 99.88px;
    animation-name: ventana1grafico1;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
@keyframes ventana1grafico1 {
    0% { transform: rotate(0deg);}
    20% { transform: rotate(0deg);}
    30% { transform: rotate(180deg);}
    60% { transform: rotate(180deg);}
    70% { transform: rotate(270deg);}
    90% { transform: rotate(270deg);}
    100% { transform: rotate(0deg);}
}

#ventana1 #grafico2 {
    transform-origin: 337.709px 99.88px;
    animation-name: ventana1grafico2;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
@keyframes ventana1grafico2 {
    0% { transform: rotate(0deg);}
    20% { transform: rotate(0deg);}
    30% { transform: rotate(-90deg);}
    60% { transform: rotate(-90deg);}
    70% { transform: rotate(90deg);}
    90% { transform: rotate(90deg);}
    100% { transform: rotate(0deg);}
}

#ventana2 #barra1 { transform-origin: 101.143px 399.779px; animation-name: ventana2barra1; }
#ventana2 #barra2 { transform-origin: 122.517px 399.779px; animation-name: ventana2barra2; }
#ventana2 #barra3 { transform-origin: 143.891px 399.779px; animation-name: ventana2barra3; }
#ventana2 #barra4 { transform-origin: 165.265px 399.779px; animation-name: ventana2barra4; }
#ventana2 #barra5 { transform-origin: 186.64px 399.779px; animation-name: ventana2barra5; }
#ventana2 #barra6 { transform-origin: 208.014px 399.779px; animation-name: ventana2barra6; }

#ventana2 #barra1, #ventana2 #barra2, #ventana2 #barra3, #ventana2 #barra4, #ventana2 #barra5, #ventana2 #barra6 {
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes ventana2barra1 {
    0% { transform: scaleY(1); }
    15% { transform: scaleY(1); }
    25% { transform: scaleY(1.5); }
    40% { transform: scaleY(1.5); }
    50% { transform: scaleY(2); }
    65% { transform: scaleY(2); }
    75% { transform: scaleY(0.5); }
    90% { transform: scaleY(0.5); }
    100% { transform: scaleY(1); }
}
@keyframes ventana2barra2 {
    0% { transform: scaleY(1); }
    15% { transform: scaleY(1); }
    25% { transform: scaleY(1.2); }
    40% { transform: scaleY(1.2); }
    50% { transform: scaleY(0.5); }
    65% { transform: scaleY(0.5); }
    75% { transform: scaleY(1.6); }
    90% { transform: scaleY(1.6); }
    100% { transform: scaleY(1); }
}
@keyframes ventana2barra3 {
    0% { transform: scaleY(1); }
    15% { transform: scaleY(1); }
    25% { transform: scaleY(3); }
    40% { transform: scaleY(3); }
    50% { transform: scaleY(5); }
    65% { transform: scaleY(5); }
    75% { transform: scaleY(2); }
    90% { transform: scaleY(2); }
    100% { transform: scaleY(1); }
}
@keyframes ventana2barra4 {
    0% { transform: scaleY(1); }
    15% { transform: scaleY(1); }
    25% { transform: scaleY(0.5); }
    40% { transform: scaleY(0.5); }
    50% { transform: scaleY(2); }
    65% { transform: scaleY(2); }
    75% { transform: scaleY(1.5); }
    90% { transform: scaleY(1.5); }
    100% { transform: scaleY(1); }
}
@keyframes ventana2barra5 {
    0% { transform: scaleY(1); }
    15% { transform: scaleY(1); }
    25% { transform: scaleY(1.2); }
    40% { transform: scaleY(1.2); }
    50% { transform: scaleY(1.4); }
    65% { transform: scaleY(1.4); }
    75% { transform: scaleY(0.3); }
    90% { transform: scaleY(0.3); }
    100% { transform: scaleY(1); }
}
@keyframes ventana2barra6 {
    0% { transform: scaleY(1); }
    15% { transform: scaleY(1); }
    25% { transform: scaleY(0.5); }
    40% { transform: scaleY(0.5); }
    50% { transform: scaleY(1.1); }
    65% { transform: scaleY(1.1); }
    75% { transform: scaleY(0.2); }
    90% { transform: scaleY(0.2); }
    100% { transform: scaleY(1); }
}


#home .col.der .circulos {
    position: absolute;
    left: 0; top: 0; width: 100%; height: 100%;
    transform: translate(65px, -20px);
}
#home .col.der .circulos .circulo {
    position: absolute;
    width: 96px; height: 96px;
    left: 50%; top: 50%;
    margin-left: -48px; margin-top: -48px;
    background: #ffffff;
    border-radius: 100000px;
}
#home .col.der .circulos .circulo.c1 {
    margin-left: 230px; margin-top: -238px;
    background: #34323f;
}
#home .col.der .circulos .circulo.c2 {
    width: 47px; height: 47px;
    margin-left: 280px; margin-top: -343px;
    background: #ef4b2b;
}
#home .col.der .circulos .circulo.c3 {
    width: 30px; height: 30px;
    margin-left: 142px; margin-top: -368px;
}
#home .col.der .circulos .circulo.c4 {
    width: 27px; height: 27px;
    margin-left: -410px; margin-top: -193px;
}
#home .col.der .circulos .circulo.c5 {
    width: 47px; height: 47px;
    margin-left: -380px; margin-top: 166px;
    background: #34323f;
}
#home .col.der .circulos .circulo.c6 {
    width: 23px; height: 23px;
    margin-left: -410px; margin-top: 232px;
    background: #ef4b2b;
}



/*  ---------- ABOUT US ---------- */

#about {
    background: #ffffff;
}

#about .col {
    display: inline-block; vertical-align: middle;
    width: 50%;
}
#about .parte1 .col.izq {
    width: 30%;
    padding-right: 40px;
}
#about .parte1 .col.der {
    width: 70%;
    text-align: center;
    position: relative;
}

#about .parte1 .col.der svg {
    max-width: 100%;    
}

#about .parte1 .col.izq h2 {    
    font-size : 74px;
    line-height : 109.93px;
    color : #34323F;
}
#about .parte1 .col.izq h2 strong {
    font-weight: 800;
    color: #ef4b2b;
}
#about .parte1 .col.izq p {
    font-size : 26px;
    line-height : 42.06px;
    letter-spacing : 0.65px;
    color : #525263;
}
#about .parte1 .col.izq p strong {
    color: #ef4b2b;
}

#about_ilustracion .st0{fill:#34323F;}
#about_ilustracion .st1{fill:#EF4B2B;}
#about_ilustracion .st2{opacity:0.2;fill:#000000;}
#about_ilustracion .st3{fill:#C8C5D6;}
#about_ilustracion .st4{fill:#AFACBF;}
#about_ilustracion .st5{fill:#E8E6EF;}
#about_ilustracion .st6{fill:#E03A24;}
#about_ilustracion .st7{fill:#FFFFFF;}
#about_ilustracion #compuinterior .mask{clip-path:url(#about_SVGID_2_);}
#about_ilustracion .st9{opacity:0.5;}
#about_ilustracion .st10{fill:none;stroke:#34323F;stroke-width:1.1363;stroke-miterlimit:10;}
#about_ilustracion .st11{fill:none;stroke:#AFACBF;stroke-width:1.0965;stroke-miterlimit:10;}
#about_ilustracion #mobileinterior .mask{clip-path:url(#about_SVGID_4_);}
#about_ilustracion #tabletinterior .mask{clip-path:url(#about_SVGID_6_);}
#about_ilustracion .st14{fill:none;stroke:#34323F;stroke-width:0.8112;stroke-miterlimit:10;}
#about_ilustracion .st15{fill:none;stroke:#34323F;stroke-width:0.7891;stroke-miterlimit:10;}
#about_ilustracion .st16{opacity:0.1;fill:#E8E6EF;}

#about_ilustracion #compuinterior #ventana{
    animation-name: aboutCompuInterior;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
@keyframes aboutCompuInterior {
    0% { transform: translateY(0); }
    55% { transform: translateY(0); }
    60% { transform: translateY(200px); opacity: 1; }
    60.2% { opacity: 0; }
    60.4% { transform: translateY(-200px); }
    60.6% { opacity: 1; }
    70% { transform: translateY(0px); }
}

#about_ilustracion #mobileinterior #ventana_1_{
    animation-name: aboutMobileinterior;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-delay: 0.5s;
}
@keyframes aboutMobileinterior {
    0% { transform: translateY(0); }
    55% { transform: translateY(0); }
    60% { transform: translateY(-100px); opacity: 1; }
    60.2% { opacity: 0; }
    60.4% { transform: translateY(100px); }
    60.6% { opacity: 1; }
    70% { transform: translateY(0px); }
}

#about_ilustracion #tabletinterior .ventana {
    animation-name: aboutTabletinterior;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-delay: 1s;
}
@keyframes aboutTabletinterior {
    0% { transform: translateY(0); }
    55% { transform: translateY(0); }
    60% { transform: translateY(200px); opacity: 1; }
    60.2% { opacity: 0; }
    60.4% { transform: translateY(-200px); }
    60.6% { opacity: 1; }
    70% { transform: translateY(0px); }
}

#about_ilustracion #compucolores rect {
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-name: compucoloresColor;
}
#about_ilustracion #compucolores #color3 { animation-delay: 0.3s; }
#about_ilustracion #compucolores #color2 { animation-delay: 0.6s; }
#about_ilustracion #compucolores #color6 { animation-delay: 0.9s; }
#about_ilustracion #compucolores #color4 { animation-delay: 1.2s; }
#about_ilustracion #compucolores #color5 { animation-delay: 1.5s; }

@keyframes compucoloresColor {
    0% { opacity: 1; }
    40% { opacity: 1; }
    55% { opacity: 0; }
    70% { opacity: 1; }
}

#about .parte2 {
    margin-bottom: 40px;
}
#about .parte2 .col.izq {
    vertical-align: top;
}
#about .parte2 .col.izq {
    width: 23%;
    padding-right: 20px;
    padding-top: 35px;
}
#about .parte2 .col.der {
    width: 77%;
    position: relative;
    padding-left: 55px;
}
#about .parte2 .col.der .check {
    position: absolute;
    left: 0; top: 35px;
    width: 60px; height: 60px;
    background: url(images/about_items_check.png) center no-repeat;
    background-size: cover;
    
}
#about .parte2 .col.der .scroll {
    position: relative;
    width: 100%;
    /*min-width: 860px;*/
}
#about .parte2 .col.izq h3 {
    font-size : 42px;
    color : #34323F;
    font-weight: 400;
    margin-bottom: 15px;
}
#about .parte2 .col.izq h3 strong {
    color: #ef4b2b;
    font-weight: 800;
}
#about .parte2 .col.izq p {
    font-size : 26px;
    line-height : 42.06px;
    letter-spacing : 0.65px;
    color : #525263;
    margin: 0;
}
#about .parte2 .col.izq p strong {
    color : #ef4b2b;
}

#about .parte2 .col.der .item {
    display: inline-block;
    vertical-align: top;
    width: 25%;
    text-align: center;
    position: relative;
}
#about .parte2 .col.der .item::before {
    content: "";
    display: block;
    position: absolute;
    left: 0; top: 64px;
    width: 100%; height: 1px;
    background: url(images/about_items_linea.png);
}
#about .parte2 .col.der .item:last-of-type::before {
    width: 50%;
}
#about .parte2 .col.der .item svg {
    display: block;
    margin: 0 auto 20px;
    width: 130px;
    height: 130px;
    position: relative;
}
#about .parte2 .col.der .item svg.i1 .st0{fill:#EF4B2B;}
#about .parte2 .col.der .item svg.i1 .st1{opacity:0.2;fill:#34323F;}
#about .parte2 .col.der .item svg.i1 .st2{fill:#E8E6EF;}
#about .parte2 .col.der .item svg.i1 .st3{opacity:0.5;}
#about .parte2 .col.der .item svg.i1 .st4{fill:none;stroke:#34323F;stroke-width:1.7308;stroke-miterlimit:10;}
#about .parte2 .col.der .item svg.i1 .st5{fill:#34323F;}
#about .parte2 .col.der .item svg.i1 .st6{fill:#FC4C6A;}
#about .parte2 .col.der .item svg.i1 .st7{fill:#E8E6EF;}
#about .parte2 .col.der .item svg.i1 .st8{fill:#40404C;}
#about .parte2 .col.der .item svg.i1 .st9{fill:#FFFFFF;}
#about .parte2 .col.der .item svg.i1 .st10{fill:#EF4B2B;}
#about .parte2 .col.der .item svg.i1 .st11{fill:none;stroke:#34323F;stroke-width:4.7062;stroke-miterlimit:10;}


#about .parte2 .col.der .item svg.i2 .st0{fill:#34323F;}
#about .parte2 .col.der .item svg.i2 .st1{opacity:0.2;fill:#000000;}
#about .parte2 .col.der .item svg.i2 .st2{fill:#FFFFFF;}
#about .parte2 .col.der .item svg.i2 .st3{fill:#EF4B2B;}
#about .parte2 .col.der .item svg.i2 .st4{fill:none;stroke:#34323F;stroke-width:4.7062;stroke-miterlimit:10;}
#about .parte2 .col.der .item svg.i2 .st5{fill:#878691;}
#about .parte2 .col.der .item svg.i2 .st6{fill:#C8C5D6;}
#about .parte2 .col.der .item svg.i2 .st7{fill:#EDBF2E;}
#about .parte2 .col.der .item svg.i2 .st8{opacity:0.5;fill:#FFFFFF;}

#about .parte2 .col.der .item svg.i3 .st0{fill:#D6321D;}
#about .parte2 .col.der .item svg.i3 .st1{fill:#EF4B2B;}
#about .parte2 .col.der .item svg.i3 .st2{fill:none;stroke:#E8E6EF;stroke-width:1.077;stroke-miterlimit:10;stroke-dasharray:2.058,2.0583;}
#about .parte2 .col.der .item svg.i3 .st3{fill:#E8E6EF;}
#about .parte2 .col.der .item svg.i3 .st4{fill:#FFFFFF;}
#about .parte2 .col.der .item svg.i3 .st5{fill:#EF4B2B;}
#about .parte2 .col.der .item svg.i3 .st6{fill:none;stroke:#34323F;stroke-width:4.7062;stroke-miterlimit:10;}
#about .parte2 .col.der .item svg.i3 .st7{fill:#1F1E26;}
#about .parte2 .col.der .item svg.i3 .st8{fill:#34323F;}
#about .parte2 .col.der .item svg.i3 .st9{fill:#0E0D11;}
#about .parte2 .col.der .item svg.i3 .st10{opacity:0.1;fill:#FFFFFF;}

#about .parte2 .col.der .item svg.i4 .st0{fill:#34323F;}
#about .parte2 .col.der .item svg.i4 .st1{}
#about .parte2 .col.der .item svg.i4 .st2{fill:none;stroke:#74728C;stroke-width:0.75;stroke-miterlimit:10;stroke-dasharray:2.379,2.3794;}
#about .parte2 .col.der .item svg.i4 .st3{fill:none;stroke:#74728C;stroke-width:2.9203;stroke-miterlimit:10;}
#about .parte2 .col.der .item svg.i4 .st4{fill:#FFFFFF;}
#about .parte2 .col.der .item svg.i4 .st5{fill:#74728C;}
#about .parte2 .col.der .item svg.i4 .st6{fill:#AFACBF;}
#about .parte2 .col.der .item svg.i4 .st7{fill:#9D9CAD;}
#about .parte2 .col.der .item svg.i4 .st8{fill:#D6321D;}
#about .parte2 .col.der .item svg.i4 .st9{opacity:0.5;fill:#BF1F13;}
#about .parte2 .col.der .item svg.i4 .st10{fill:#EF4B2B;}
#about .parte2 .col.der .item svg.i4 .st11{fill:#E8E6EF;}
#about .parte2 .col.der .item svg.i4 .st12{opacity:0.15;fill:#E8E6EF;}
#about .parte2 .col.der .item svg.i4 .st13{fill:none;stroke:#34323F;stroke-width:4.7062;stroke-miterlimit:10;}


#about .parte2 .col.der .item h4 {
    font-size : 25px;
    letter-spacing : 0.63px;
    color : #34323F;
    font-weight: 400;
}
#about .parte2 .col.der .item h4 strong {
    color: #ef4b2b;
    font-weight: 800;
}

#about .parte2 .col.der .item svg.i1 .elemento,
#about .parte2 .col.der .item svg.i3 .elemento {
    animation-name: about_item_elemento_anim;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
#about .parte2 .col.der .item svg.i2 .elemento,
#about .parte2 .col.der .item svg.i4 .elemento {
    animation-name: about_item_elemento_anim2;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

@keyframes about_item_elemento_anim {
    0% { transform: translateY(-5px); }
    50% { transform: translateY(5px); }
    100% { transform: translateY(-5px); }
}
@keyframes about_item_elemento_anim2 {
    0% { transform: translateY(5px); }
    50% { transform: translateY(-5px); }
    100% { transform: translateY(5px); }
}
#about .parte2 .col.der .item svg .circulo,
#about .parte2 .col.der .item svg .elemento,
#about .parte2 .col.der .item svg .check {
    transition: all 0.3s;
    transform-origin: center;
}
#about .parte2 .col.der .item:nth-child(1) svg .circulo {
    clip-path: circle(48px at 58px 67px);
}
#about .parte2 .col.der .item:nth-child(1):hover svg .circulo {
    clip-path: circle(58px at 58px 67px);
}
#about .parte2 .col.der .item:nth-child(2) svg .circulo,
#about .parte2 .col.der .item:nth-child(3) svg .circulo {
    clip-path: circle(48px at 58px 58px);
}
#about .parte2 .col.der .item:nth-child(2):hover svg .circulo,
#about .parte2 .col.der .item:nth-child(3):hover svg .circulo {
    clip-path: circle(58px at 58px 58px);
}
#about .parte2 .col.der .item:nth-child(4) svg .circulo {
    clip-path: circle(48px at 75.656px 58.161px);
}
#about .parte2 .col.der .item:nth-child(4):hover svg .circulo {
    clip-path: circle(58px at 75.656px 58.161px);
}


/*  ---------- CONTACT ---------- */

#contact {
    background: #34323f;
    overflow: hidden;
}

#contact .parte1 {
    margin-top: -130px;
}

#contact .col {
    display: inline-block; vertical-align: middle;
    width: 50%;
}

#contact .parte1 .col.izq {
    width: 55%;
    padding-right: 0px;
    position: relative;
    z-index: 1;
}
#contact .parte1 .col.der {
    width: 45%;
    position: relative;
    text-align: center;
}
#contact .parte1 .col.izq h2 {
    font-size : 74px;
    line-height : 109.93px;
    color : #EF4B2B;
    font-weight: 800;
    padding: 17px;
}
#contact .parte1 .col.izq .linea {
    padding: 20px 17px;
    display: inline-block; width: 100%;
    position: relative;
}
#contact .parte1 .col.izq .linea.mitad { width: 50%; }
#contact .parte1 .col.izq .linea input[type="text"],
#contact .parte1 .col.izq .linea input[type="email"],
#contact .parte1 .col.izq .linea textarea {
    font-family: 'Open Sans', sans-serif;
    font-size : 19px;
    letter-spacing : 0.48px;
    font-weight: 300;
    color : #ffffff;
    border: 1px solid #9a98a3;
    border-radius: 100000px;
    padding: 15px 30px;
    background: #34323f;
    display: block;
    width: 100%;
    transition: all 0.3s;
}
#contact .parte1 .col.izq .linea textarea {
    border-radius: 23px;
    height: 180px;
}
#contact .parte1 .col.izq .linea input[type="text"]:focus,
#contact .parte1 .col.izq .linea input[type="email"]:focus,
#contact .parte1 .col.izq .linea textarea:focus {
    background: #c9c6d4;
    border-color: #c9c6d4;
    color: #292833;
}
#contact .parte1 .col.izq .linea .mensaje {
    position: absolute;
    display: none;
    top: 100%; margin-top: -15px;
    left: 17px; right: 17px;
    font-size : 12px;
    letter-spacing : 1.8px;
    text-transform : uppercase;
    color : #FFFFFF;
    background: #ef4b2b;
    padding: 5px 10px;
    border-radius: 5px;
}
#contact .parte1 .col.izq .linea .mensaje::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 100%;
    left: 30px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 11px 15px 11px;
    border-color: transparent transparent #ef4c2b transparent;
}

#contact .parte1 .col.der .circulo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 724px; height: 724px;
    margin-top: -362px;
    margin-left: -362px;
    border-radius: 100000px;
    background: #312f3b;
    transform-origin: center center;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
#contact .parte1 .col.der .circulo.c1 {
    transform: scale(1);
    animation-name: contactocirculo1;
    animation-delay: 0s;
}
#contact .parte1 .col.der .circulo.c2 {
    transform: scale(1.5);
    background: #34323f;
    animation-name: contactocirculo2;
    animation-delay: 0.5s;
}
#contact .parte1 .col.der .circulo.c3 {
    transform: scale(2);
    animation-name: contactocirculo3;
    animation-delay: 1s;
}

#contact footer {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    padding: 0;
    background: #292833;
    z-index: 1;
}
#contact footer .container {
    padding-top: 40px; padding-bottom: 40px;    
}
#contact footer .col {
    display: inline-block; vertical-align: middle;
    width: 50%;
}
#contact footer .col.izq {
    text-align: left;
}
#contact footer .col.der {
    text-align: right;
}
#contact footer .col .logo, #contact footer .col .info {
    display: inline-block; vertical-align: middle;
}
#contact footer .col .logo {
    padding: 5px 20px 5px 0;
    border-right: 1px solid #c8c5d6;
}
#contact footer .col .info {
    padding-left: 20px;
    font-size : 15px;
    line-height: 28px;
    letter-spacing : 0.38px;
}

#contact footer .col .info p {
    color : #E8E6EF;
    margin: 0;
}
#contact footer .col .info a {
    display: block;
    font-weight : 600;
    color : #EF4B2B;
    transition: all 0.3s;
}
#contact footer .col .info a:hover {
    color: #ffffff;
}



@keyframes contactocirculo1 {
    0% { transform: scale(1); }
    30% { transform: scale(0.9); }
    50% { transform: scale(1.2); }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
@keyframes contactocirculo2 {
    0% { transform: scale(1.5); }
    30% { transform: scale(1.4); }
    50% { transform: scale(1.7); }
    70% { transform: scale(1.6); }
    100% { transform: scale(1.5); }
}
@keyframes contactocirculo3 {
    0% { transform: scale(2); }
    30% { transform: scale(1.9); }
    50% { transform: scale(2.2); }
    70% { transform: scale(2.1); }
    100% { transform: scale(2); }
}




#contact .parte1 .col.der svg {
    position: relative;
    margin-top: 10px;
    width: 670px;
}

#contact_ilustracion .st0{fill:#E8E6EF;}
#contact_ilustracion .st1{opacity:0.08;fill:#34323F;}
#contact_ilustracion .st2{fill:none;stroke:#EF4B2B;stroke-width:4.115;stroke-linecap:round;stroke-miterlimit:10;}
#contact_ilustracion .st3{opacity:0.15;fill:#34323F;}
#contact_ilustracion .st4{fill:#EF4B2B;}
#contact_ilustracion .st5{fill:#CC2619;}
#contact_ilustracion .st6{fill:#34323F;}
#contact_ilustracion .st7{fill:#FFFFFF;}
#contact_ilustracion .st8{opacity:0.5;}
#contact_ilustracion .st9{fill:none;stroke:#34323F;stroke-width:4;stroke-miterlimit:10;}
#contact_ilustracion .st10{fill:#E2351E;}


#contact_ilustracion .lineas {
    animation-name: contact_ilus_lineas;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#contact_ilustracion .lineas_mask {
    clip-path: circle(236px at 100px 443px);
    transform-origin: center;
}

@keyframes contact_ilus_lineas {
    0% { transform: translateY(0px); }
    100% { transform: translateY(225px); }
}


#contact_ilustracion .papel {
    animation-name: contact_ilus_papel;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}

@keyframes contact_ilus_papel {
    0% { transform: translateY(0px); }
    70% { transform: translateY(0px); }
    85% { transform: translateY(-30px); }
    100% { transform: translateY(0px); }
}

/* --- Controlamos los altos ---*/

@media (max-height: 850px) {
    #home .col.izq {
        width: 55%;
        padding-right: 80px;
    }
    #home .col.der {
        width: 45%;
    }
    #home h1 {
        font-size: 79px;
        line-height: 80px;
    }
}

@media (max-height: 800px) {
    #about .parte1 .col.izq {
        width: 40%;
    }
    #about .parte1 .col.der {
        width: 60%;
    }
    #about .parte1 .col.izq h2 {
        font-size: 60px;
        line-height: 70px;
    }
    #about .parte2 .col.izq h3 {
        font-size: 36px;
    }
    #about .parte2 .col.izq p {
        font-size: 23px;
        line-height: 33px;
    }
}

@media (max-height: 750px) {
    
    .seccion {
        position: relative;
        left: 0; top: 0;
        width: 100%; height: 100%;
        overflow: hidden;
    }
    #navegacion {
        display: none;
    }
    
    .mousealerta {
        display: none;
    }
    
    #home h1 {
        font-size: 84px;
        line-height: 95px;
    }
    /*#home_ilustracion {
        width: 100%;
    }*/
    
    #about .parte1 .col.izq h2 {
        font-size: 54px;
    }
    #about .parte1 .col.izq p {
        font-size: 20px;
    }
    #about .parte2 .col.izq h3 {
        font-size: 36px;
    }
    #about .parte2 .col.izq p {
        font-size: 22px;
    }
    
    #contact .parte1 .col.izq h2 {
        font-size: 50px;
        line-height: normal;
        padding: 10px;
    }
    #contact .parte1 .col.izq .linea {
        padding: 15px 10px;
    }
    #contact .parte1 .col.izq .linea input[type="text"], #contact .parte1 .col.izq .linea input[type="email"], #contact .parte1 .col.izq .linea textarea {
        font-size: 15px;
        padding: 10px 20px;
    }
    #contact .parte1 .col.izq .linea .mensaje {
        margin-top: -11px;
        padding: 3px 10px;
        font-size: 10px;
    }
    #contact .parte1 .col.izq .linea .mensaje::before {
        border-width: 0 9px 9px 9px;
    }
    #contact .parte1 .col.izq .linea textarea {
        height: 160px;
    }
    
    .botonContacto span,
    .botonContacto:hover span {
        font-size: 22px;
        padding: 8px 20px 8px 30px;
    }
    .botonContacto svg {
        width: 28px;
    }
    .botonContacto .der,
    .botonContacto:hover .der {
        padding: 5px 30px 5px 15px;
    }
    #contact .parte1 .col.der svg {
        width: 570px;
    }
    
    #contact .parte1 {
        margin-top: 0;
    }
    
    #contact footer {
        position: relative;
        bottom: auto;
    }
    
}


@media (max-height: 600px) {
    
    
    
}



/* --- Controlamos los anchos ---*/

@media (max-width: 1700px) {
    
    #navegacion {
        left: 10px;
    }
    .container {
        padding-left: 100px;
    }
    
}



@media (max-width: 1500px) {
    #about .parte1 .col.izq {
        width: 50%;
        
    }
    #about .parte1 .col.der {
        width: 50%;
    }
    #about .parte1 .col.izq h2 {
        font-size: 60px;
        line-height: 65px;
    }
    #about .parte1 .col.izq p {
        font-size: 21px;
        line-height: 36.06px;
    }
    #about .parte2 .col.izq h3 {
        font-size: 35px;
    }
    #about .parte2 .col.izq p {
        font-size: 22px;
        line-height: 35px;
    }
    #home h1 {
        font-size: 84px;
        line-height: 90px;
    }
}

@media (max-width: 1400px) {
	#home .col.izq,
    #home .col.der {
        width: 50%;
    }
    #about .parte2 .col.izq,
    #about .parte2 .col.der {
        text-align: left;
        width: 100%;
    }
    #about .parte2 .col.izq {
        padding: 0 0 20px 0;
    }
}

@media (max-width: 1300px) {
    #home .col.izq {
        padding-right: 40px;
    }
    #home h1 {
        font-size: 76px;
        line-height: 80px;
    }
}

@media (max-width: 1200px) {
    
    .seccion {
        position: relative;
        left: 0; top: 0;
        width: 100%; height: 100%;
        overflow: hidden;
    }
    .mousealerta {
        display: none;
    }
    
	#home .col.izq,
    #home .col.der {
        width: 100%;
        text-align: center;
    }
    #home .col.izq {
        padding-bottom: 40px;
        padding-right: 0;
    }
    #home .logo {
        display: inline-block;
    }
    
    #about .parte1 .col.izq,
    #about .parte1 .col.der,
    #about .parte2 .col.izq,
    #about .parte2 .col.der {
        text-align: center;
        width: 100%;
    }
    #about .parte1 .col.der {
        padding-bottom: 40px;
    }
    #home_ilustracion {
        width: 600px;
        margin-left: -55px;
    }
    #contact .parte1 .col.der svg {
        width: 100%;
    }
    #home h1 {
        font-size: 63px;
        line-height: 65px;
    }
    #about .parte1 .col.izq {
        padding-right: 0;
    }
    
    #contact .parte1 {
        margin-top: 0;
    }
    #contact footer {
        position: relative;
    }
    
    #navegacion {
        display: none;
    }
    
}

@media (max-width: 1000px) {
    #about .parte2 .col.der .check {
        display: none;
    }
    #about .parte2 .col.der {
        padding-left: 0;
    }
    #about .parte2 .col.der .item {
        width: 50%;
    }
    #about .parte2 .col.der .item::before {
        display: none;
    }
    #about .parte2 .col.der .scroll {
        max-width: 480px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    #contact .parte1 .col.izq {
        width: 100%;
    }
    #contact .parte1 .col.der {
        display: none;
    }
    
    #contact footer .col.izq,
    #contact footer .col.der {
        text-align: center;
        width: 100%;
    }
    
    #contact footer .col .logo {
        border: none;
        display: block;
        padding-bottom: 10px;
    }
    #contact footer .col .info {
        padding-left: 0;
    }
    
    #contact footer .col.izq {
        padding-bottom: 40px;
    }
    #contact .parte1 .col.izq {
        text-align: center;
    }
}

@media (max-width: 800px) {
    #home_ilustracion {
        margin-left: 0;
    }
}

@media (max-width: 700px) {
    .container {
        padding-left: 40px; padding-right: 40px;
    }
    #home_ilustracion {
        width: 100%;
    }
    #contact .parte1 .col.izq .linea.mitad {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .botonContacto span,
    .botonContacto:hover span {
        font-size: 22px;
        padding: 8px 20px 8px 30px;
    }
    .botonContacto svg {
        width: 28px;
    }
    .botonContacto .der,
    .botonContacto:hover .der {
        padding: 5px 30px 5px 15px;
    }
    #contact .parte1 .col.der svg {
        width: 570px;
    }
}

@media (max-width: 500px) {
    .container {
        padding-left: 20px; padding-right: 20px;
    }
    #about .parte2 .col.der .item {
        width: 100%;
    }
    #home h1 {
        font-size: 53px;
        line-height: 55px;
    }
    #home p {
        font-size: 21px;
        line-height: 36px;
        margin: 0 0 36px 0;
    }
    
}


@media (max-width: 500px) {
    #home h1 {
        font-size: 46px;
        line-height: 54px;
    }
}