/*---------- Import fonts ----------*/
@import url("https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700&display=swap");
.supidc {
vertical-align: super; }
/*superindice*/
.subidc {
vertical-align: sub; }
/*subindice*/
/*---------- VARIABLES ----------*/
/*===== Media Query ======*/
/*===== Colors - Branding ======*/
/*===== Gray Scale ======*/
/*===== Texturas ======*/
/*===== Tipografia ======*/
/*---------- Mixins ----------*/
/*===== Media Query ======*/
/*===== Backgrounds ======*/
/*---------- Keyframes for animations ----------*/
@-webkit-keyframes progress {
from {
stroke-dashoffset: 175.9295; }
to {
stroke-dashoffset: 0; } }
@keyframes progress {
from {
stroke-dashoffset: 175.9295; }
to {
stroke-dashoffset: 0; } }
@-webkit-keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
70% {
-moz-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
-webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
100% {
-moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
70% {
-moz-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
-webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
100% {
-moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }
@-webkit-keyframes jump_scroll_rotation {
0% {
-webkit-transform: rotate(90deg) translateX(0);
transform: rotate(90deg) translateX(0); }
20% {
-webkit-transform: rotate(90deg) translateX(5px);
transform: rotate(90deg) translateX(5px); }
40% {
-webkit-transform: rotate(90deg) translateX(0);
transform: rotate(90deg) translateX(0); } }
@keyframes jump_scroll_rotation {
0% {
-webkit-transform: rotate(90deg) translateX(0);
transform: rotate(90deg) translateX(0); }
20% {
-webkit-transform: rotate(90deg) translateX(5px);
transform: rotate(90deg) translateX(5px); }
40% {
-webkit-transform: rotate(90deg) translateX(0);
transform: rotate(90deg) translateX(0); } }
@-webkit-keyframes jump_scroll {
0% {
-webkit-transform: translateY(0);
transform: translateY(0); }
20% {
-webkit-transform: translateY(5px);
transform: translateY(5px); }
40% {
-webkit-transform: translateY(0);
transform: translateY(0); } }
@keyframes jump_scroll {
0% {
-webkit-transform: translateY(0);
transform: translateY(0); }
20% {
-webkit-transform: translateY(5px);
transform: translateY(5px); }
40% {
-webkit-transform: translateY(0);
transform: translateY(0); } }
@-webkit-keyframes line_scroll {
0% {
height: 0;
-webkit-animation-duration: 2s;
animation-duration: 2s; }
90% {
-webkit-transform: translatey(100%);
transform: translatey(100%);
-webkit-animation-duration: 1s;
animation-duration: 1s; }
99% {
height: 100%;
-webkit-transform: translatey(100%);
transform: translatey(100%); }
100% {
height: 100%;
-webkit-transform: translatey(105%);
transform: translatey(105%); } }
@keyframes line_scroll {
0% {
height: 0;
-webkit-animation-duration: 2s;
animation-duration: 2s; }
90% {
-webkit-transform: translatey(100%);
transform: translatey(100%);
-webkit-animation-duration: 1s;
animation-duration: 1s; }
99% {
height: 100%;
-webkit-transform: translatey(100%);
transform: translatey(100%); }
100% {
height: 100%;
-webkit-transform: translatey(105%);
transform: translatey(105%); } }
@-webkit-keyframes inputHighlighter {
from {
background: #5264AE; }
to {
width: 0;
background: transparent; } }
@-moz-keyframes inputHighlighter {
from {
background: #5264AE; }
to {
width: 0;
background: transparent; } }
@keyframes inputHighlighter {
from {
background: #5264AE; }
to {
width: 0;
background: transparent; } }
@-webkit-keyframes scroller {
0% {
-webkit-transform: translateY(-80px);
transform: translateY(-80px); }
100% {
-webkit-transform: translateY(200px);
transform: translateY(200px); } }
@keyframes scroller {
0% {
-webkit-transform: translateY(-80px);
transform: translateY(-80px); }
100% {
-webkit-transform: translateY(200px);
transform: translateY(200px); } }
/*---------- RESET ----------*/
* {
padding: 0;
margin: 0; }
body {
overflow-x: hidden !important;
}
.grid-container {
max-width: 83vw; }
@media only screen and (min-width: 1200px) and (max-width: 1919px) {
.grid-container {
max-width: 82vw; } }
@media only screen and (max-width: 639px) {
.grid-container {
max-width: 94vw; } }
section, .section-div {
margin: 0;
padding: 0;
width: 100%;
display: block;
background-size: cover;
background-position: 50% 50%; }
.pad-und-lg {
padding: 100px 0 100px 0; }
.pad-und-md {
padding: 70px 0 70px 0; }
.pad-und-sm {
padding: 40px 0 40px 0; }
.pad-und-xs {
padding: 20px 0 20px 0; }
.pad-und-xxs {
padding: 10px 0 10px 0; }
.display-none {
display: none; }
.modal_menu_mobile {
position: fixed;
top: 0;
width: 100%;
height: 100vh;
background: #084887 !important;
z-index: -1;
opacity: 0;
-webkit-transition: all 300ms;
-o-transition: all 300ms;
transition: all 300ms;
padding-top: 6rem; }
.modal_menu_mobile .contenido {
opacity: 0;
-webkit-transition: all 300ms;
-o-transition: all 300ms;
transition: all 300ms; }
.modal_menu_mobile .contenido ul li {
margin-bottom: 1rem; }
.modal_menu_mobile .contenido ul li a {
color: white; }
.modal_menu_mobile header {
background: #084887 !important;
top: -2px;
display: none; }
.modal_menu_mobile header img {
width: 2.2rem; }
.modal_menu_mobile header .burguer_menu:after, .modal_menu_mobile header .burguer_menu:before {
background-color: white; }
.modal_menu_mobile.is-active {
z-index: 999;
opacity: 1; }
.modal_menu_mobile.is-active header {
background: #084887 !important;
display: block; }
.modal_menu_mobile.is-open .contenido {
opacity: 1; }
html {
scroll-behavior: smooth; }
.header {
position: fixed;
top: 0;
width: 100%;
z-index: 99;
-webkit-transition: all 300ms;
-o-transition: all 300ms;
transition: all 300ms;
background-color: transparent; }
.header .grid-x {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
.header img {
width: 60%; }
.header .menu .item-menu a {
color: #084887;
-webkit-transition: all 300ms;
-o-transition: all 300ms;
transition: all 300ms; }
.header .menu .item-menu:hover a {
font-weight: bold; }
.header .burguer_menu {
width: 50px;
height: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column; }
.header .burguer_menu:after, .header .burguer_menu:before {
content: '';
width: 74%;
height: 2px;
background-color: #084887;
-webkit-transition: all 300ms;
-o-transition: all 300ms;
transition: all 300ms; }
.header .burguer_menu:before {
margin-bottom: 8px; }
.header .burguer_menu.is-active:after {
-webkit-transform: rotate(45deg) translateY(-4px);
-ms-transform: rotate(45deg) translateY(-4px);
transform: rotate(45deg) translateY(-4px); }
.header .burguer_menu.is-active:before {
-webkit-transform: rotate(-45deg) translateY(6px) translateX(-3px);
-ms-transform: rotate(-45deg) translateY(6px) translateX(-3px);
transform: rotate(-45deg) translateY(6px) translateX(-3px); }
.header.is-active {
background-color: white !important; }
@media only screen and (max-width: 639px) {
.header .logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; } }
.banner {
width: 100%;
height: 100vh;
padding-top: 10rem;
position: relative; }
.banner h1 {
margin-bottom: 1rem;
color: #084887; }
.banner h5{
margin-bottom: 3rem;
font-family: "Poppins", sans-serif;
font-size: 26px;
color: #084887;
}
@media only screen and (max-width: 639px) {
.banner{
height: 50vh;
}
.banner h5{
font-size: 16px;
}}
.banner p {
color: #084887; }
.banner .image_banner {
background-size: cover;
background-position: center;
background-image: url("../../images/imagen_banner.jpg");
width: 60%;
height: 100%;
position: absolute;
right: 0;
top: 0; }
@media only screen and (max-width: 639px) {
.banner {
padding-top: 6rem;
height: unset; } }
.bloques {
width: 100%;
padding-top: 10rem;
position: relative;
height: 100vh;}
@media only screen and (max-width: 639px) {
.bloques{
height: 50vh;
}
}
.bloquedos h1 {
width: 70%;
margin-top: 20px;
color: #f0742b; }
.bloquedos .image_bloquedos {
width: 32%;
position: absolute; }
.bloquedos .rectangle {
position: absolute;
right: 0;
z-index: -1;
margin-top: 35px;
margin-left: -8%; }
.bloquedos{
height: 75vh;
}
@media only screen and (max-width: 639px) {
.bloquedos {
padding-top: 0rem;
height: 50vh;
}
.bloquedos .small-12:nth-child(1) {
position: relative; }
.bloquedos h1 {
width: 100%;
margin-top: 4rem;
margin-right: 0;
margin-left: 0; }
.bloquedos .image_bloquedos {
position: unset;
width: 70%; }
.bloquedos .rectangle {
top: 18px;
right: 0;
margin-top: unset;
margin-left: unset;
width: 56%;
height: 83%; } }
.bloquetres h1 {
width: 70%;
color: #084887; }
.bloquetres p {
margin-top: 30px;
width: 85%;
color: #084887; }
@media only screen and (max-width: 639px) {
.bloquetres {
margin-bottom: 4rem;
padding-top: 6rem;
} }
.contact {
padding-top: 6rem;
margin-bottom: 2rem; }
.contact h1 {
width: 70%;
color: #084887; }
.contact input.input {
border: none;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0;
border-bottom: 1px solid #084887;
padding-left: 0;
color: #084887;
margin-bottom: 30px;
font-family: "Nunito Sans", sans-serif; }
.contact input.input::-webkit-input-placeholder {
color: #084887; }
.contact input.input:-ms-input-placeholder {
color: #084887; }
.contact input.input::-ms-input-placeholder {
color: #084887; }
.contact input.input::placeholder {
color: #084887; }
.contact textarea {
width: 80%;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
border-radius: 0;
border-bottom: 1px solid #084887;
padding-left: 0;
color: #084887;
margin-bottom: 30px;
font-family: "Nunito Sans", sans-serif; }
.contact textarea::-webkit-input-placeholder {
color: #084887; }
.contact textarea:-ms-input-placeholder {
color: #084887; }
.contact textarea::-ms-input-placeholder {
color: #084887; }
.contact textarea::placeholder {
color: #084887; }
.contact form {
padding-top: 1rem; }
@media only screen and (max-width: 639px) {
.contact form .grid-container {
padding: 0; }
.contact textarea {
width: 100%; } }
.data {
margin-top: 5rem;
color: #084887; }
.data span {
font-weight: bold; }
.data span.title {
font-size: 14px; }
.h1-poppins {
font-family: "Poppins", sans-serif;
font-size: 50px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 1.3px; }
@media only screen and (max-width: 639px) {
.h1-poppins {
font-size: 36px; } }
.h2-poppins {
font-family: "Poppins", sans-serif;
font-size: 28px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 1.3px; }
@media only screen and (max-width: 639px) {
.h2-poppins {
font-size: 24px; } }
.p-poppins, .expertise .image-icon span {
font-family: "Poppins", sans-serif;
font-size: 14px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.75;
letter-spacing: 0.3px; }
@media only screen and (max-width: 639px) {
.p-poppins{
font-size: 12px;
}
}
.item-menu {
font-family: "Poppins", sans-serif;
font-size: 14px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.3px; }
.h1-bloquedos {
font-family: "Poppins", sans-serif;
font-size: 40px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.42;
letter-spacing: 1px; }
@media only screen and (max-width: 639px) {
.h1-bloquedos {
font-size: 28px; } }
.h1-bloquetres {
font-family: "Poppins", sans-serif;
font-size: 53px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 1.3px; }
@media only screen and (max-width: 639px) {
.h1-bloquetres {
font-size: 32px; } }
.rectangle {
width: 56%;
height: 57%;
opacity: 0.11;
background-image: -webkit-gradient(linear, left top, right top, from(rgba(19, 126, 188, 0.3)), to(#084887));
background-image: -webkit-linear-gradient(left, rgba(19, 126, 188, 0.3), #084887);
background-image: -o-linear-gradient(left, rgba(19, 126, 188, 0.3), #084887);
background-image: linear-gradient(to right, rgba(19, 126, 188, 0.3), #084887); }
.h1-contacto {
font-family: "Poppins", sans-serif;
font-size: 50px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 1.3px; }
@media only screen and (max-width: 639px) {
.h1-contacto {
font-size: 36px; } }
input.input {
width: 80%;
font-size: 14px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.3px; }
@media only screen and (max-width: 639px) {
input.input {
width: 100%; } }
input.button {
font-family: "Poppins", sans-serif;
font-size: 16px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: 0.8px; }
.button {
width: 25%;
height: 40px;
background-color: #084887;
border-radius: 0;
padding: 0;
margin-top: 30px; }
@media only screen and (max-width: 639px) {
.button {
width: 100%; } }
.data {
width: 80%;
font-size: 12px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.75;
letter-spacing: 0.3px; }
.differentiators {
width: 100%;
height: 50rem;
background-color: #084887;
padding-top: 8rem;
position: relative; }
.differentiators h1 {
margin-bottom: 6rem;
color: white; }
.differentiators ul li {
margin-bottom: 2rem;
color: white;
width: 88%;
margin-top: 12px; }
.differentiators img {
width: 82%;
position: relative;
z-index: 1; }
.differentiators:after {
content: '';
width: 56%;
height: 34rem;
background: rgba(0, 0, 0, 0.08);
z-index: 0;
position: absolute;
bottom: 4%;
right: 0; }
@media only screen and (max-width: 639px) {
.differentiators {
padding-top: 6rem;
height: 44rem; } }
.expertise {
width: 100%;
background-color: #084887;
padding-top: 8rem;
position: relative; }
.expertise h1 {
margin-bottom: 6rem;
color: white; }
.expertise .image-icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-bottom: 6rem;
position: relative; }
.expertise .image-icon img {
margin-bottom: 12px; }
.expertise .image-icon span {
color: white;
text-align: center; }
.expertise .image-icon span:after {
content: '';
position: absolute;
-o-object-fit: contain;
object-fit: contain;
opacity: 0.21;
background-color: #ffffff;
border-radius: 100%; }
.expertise .image-icon:after, .expertise .image-icon:before {
content: '';
position: absolute;
-o-object-fit: contain;
object-fit: contain;
opacity: 0.21;
background-color: #ffffff;
border-radius: 100%; }
.expertise .image-icon.icon-1:after {
width: 36px;
height: 36px;
top: 1%; }
.expertise .image-icon.icon-1:before {
width: 22px;
height: 22px;
top: 28%;
right: 34%; }
.expertise .image-icon.icon-1 span:after {
width: 12px;
height: 12px;
top: 56%;
right: 40%; }
.expertise .image-icon.icon-2::after {
width: 22px;
height: 22px;
top: 22%;
left: 38%; }
.expertise .image-icon.icon-3::after {
width: 46px;
height: 46px;
bottom: 42%;
right: 36%; }
.expertise .image-icon.icon-4:after {
width: 32px;
height: 32px;
top: 32%;
right: 36%; }
.expertise .image-icon.icon-5:after {
width: 32px;
height: 32px;
top: 26%;
right: 54%; }
.expertise .image-icon.icon-5:before {
width: 22px;
height: 22px;
top: 0%;
left: 42%; }
.expertise .image-icon.icon-6:after {
width: 6px;
height: 6px;
top: -18%;
right: 42%; }
.expertise .image-icon.icon-6:before {
width: 10px;
height: 10px;
top: -28%;
right: 38%; }
.expertise .image-icon.icon-7:after {
width: 30px;
height: 30px;
top: 28%;
left: 44%; }
.expertise .image-icon.icon-8:after {
width: 40px;
height: 40px;
top: 16%;
left: 44%; }
.expertise .image-icon.icon-9:after {
width: 50px;
height: 50px;
top: -6%;
right: 32%; }
.expertise .image-icon.icon-10:after {
width: 40px;
height: 40px;
top: 8%;
left: 34%; }
.bloque_info_logos {
width: 100%;
height: 44rem;
background-color: #084887;
position: relative;
padding-top: 8rem; }
.bloque_info_logos p, .bloque_info_logos ul, .bloque_info_logos li {
color: white;
margin-bottom: 2rem; }
.bloque_info_logos .imagen {
text-align: center;
position: relative; }
.bloque_info_logos .imagen img {
width: 80%;
position: relative;
z-index: 1; }
.bloque_info_logos .imagen .float_imagen {
position: absolute;
bottom: -12rem;
left: -8rem; }
.bloque_info_logos .imagen .float_imagen img {
width: 40%; }
.bloque_info_logos:after {
content: '';
width: 55%;
height: 34rem;
background: rgba(0, 0, 0, 0.08);
z-index: 0;
position: absolute;
bottom: 16%;
left: 0; }
@media only screen and (max-width: 639px) {
.bloque_info_logos {
padding-top: 5rem; } }
.precontacto {
width: 100%;
height: 44rem;
background-color: #084887;
position: relative;
padding-top: 12rem; }
.precontacto ul li {
color: white;
margin-bottom: 2rem; }
.precontacto img {
position: relative;
z-index: 1; }
.precontacto:after {
content: '';
width: 56%;
height: 30rem;
background: rgba(0, 0, 0, 0.08);
z-index: 0;
position: absolute;
bottom: 11%;
right: 0; }
@media only screen and (max-width: 639px) {
.precontacto {
height: 34rem;
padding-top: 4rem;
padding-bottom: 4rem; } }
.clients {
width: 100%;
padding-top: 8rem; }
.clients h1 {
color: #084887;
margin-bottom: 0rem; }
.clients h5{
margin-bottom: 6rem;
font-family: "Poppins", sans-serif;
font-size: 26px;
color: #084887;
}
@media only screen and (max-width: 639px) {
.clients h5{
font-size: 16px;
}}
.clients .client-logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 6rem; }
@media only screen and (max-width: 639px) {
.clients img {
width: 60%; } }
.footer {
height: 8rem;
background-color: #F6F6F6;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center; }
.footer .grid-container {
width: 100%; }
.footer .grid-container a, .footer .grid-container p {
color: #767676; }
.footer .copy {
text-align: right; }
@media only screen and (max-width: 639px) {
.footer {
height: 12rem; }
.footer .copy {
margin-top: 1rem;
text-align: left; }
.footer .copy p {
margin-bottom: 0; } }
/*# sourceMappingURL=main.css.map */