* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

body {
    font-family: 'Nunito', sans-serif;
}

header {
    /* padding: 20px; */
}

nav.menumobile {
    width: 100%;
    text-align: center;
    display: none;
}

.logomobile {
    text-align: left;
    padding: 10px;
    background: #ffffff;
    width: 240px;
}

header.menumobile .logomobile img {
    height: auto;
}

.burger {
    background: url('../images/open.png');
    height: 40px;
    width: 40px;
    position: absolute;
    background-size: 40px;
    top: 25px;
    right: 30px;
    margin: 10px;
    cursor: pointer;
}

.burgerclose {
    background: url('../images/close.png');
    background-size: 40px;
}

.seccionesmobile {
    position: absolute;
    width: 100%;
    z-index: 99999999999999999999;
    background: #1e2d3b;
}

.seccionesmobile ul {}

.seccionesmobile ul li {
    padding: 12px;
    border-bottom: 1px solid #333;
}

.seccionesmobile ul li a {
    color: #FFF;
    text-transform: uppercase;
    text-decoration: none;
}

.oculto {
    display: none;
}

nav.menu {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

nav.menu .secciones ul {
    list-style: none;
}

nav.menu .secciones ul li {
    display: inline-block;
    padding-top: 45px;
}

nav.menu .secciones ul li a {
    text-decoration: none;
    color: #FFF;
    text-transform: uppercase;
    font-size: 15px;
    margin: 0px 20px 0 20px;
}

nav.menu .secciones ul li a:hover {
    color: #bdbdbd;
    border-bottom: 5px solid #fda923;
    padding-bottom: 5px;
}

nav.menu .secciones {
    margin-right: 50px;
}

section.parallax {
    height: auto;
    /* background: #000; */
    text-align: center;
    margin-bottom: 100px;
    padding-top: 120px;
}

section.parallax video {
    /* position: absolute; */
    width: 100%;
    /* height: auto; */
}

section.parallax h1 {
    padding-top: 30px;
    font-size: 60px;
    padding: 70px 0;
    text-transform: uppercase;
    color: #FFF;
    position: absolute;
    z-index: 9;
    width: 100%;
}

section.parallax .arrow {
    position: absolute;
    width: 100%;
    padding-top: 50px;
    cursor: pointer;
}

section.servicios {
    text-align: center;
    margin-bottom: 100px;
}

section.servicios h1 {
    text-transform: uppercase;
    color: #d2d2d2;
    font-size: 50px;
    margin-bottom: 10px;
}

section.servicios .container {
    width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 20px;
}

section.servicios .linea {
    height: 7px;
    background: orange;
    width: 100px;
    margin: 0 auto;
}

section.servicios article.item {
    width: 300px;
    margin: 10px;
    background: #f7f7f7;
}

section.servicios article.item .image {}

section.servicios article.item .title {
    text-align: left;
    padding: 20px 0 0 20px;
    font-size: 20px;
    font-weight: 600;
    color: #323683;
}

section.servicios article.item .info {
    text-align: left;
    padding: 20px;
    color: #656565;
}

section.nosotros {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    background: #fafafa;
}

section.nosotros .info {
    width: 50%;
    margin-left: 0%;
}

section.nosotros .info .container {
    width: 50%;
    margin: 100px 0 100px 40%;
}

section.nosotros .image {
    width: 50%;
}

section.nosotros .info .title {
    text-transform: uppercase;
    color: #d2d2d2;
    font-size: 50px;
    margin-bottom: 10px;
}

section.nosotros .info .linea {
    height: 7px;
    background: orange;
    width: 100px;
    margin-bottom: 20px;
}

section.nosotros .info .text {
    font-size: 19px;
}

section.data {
    padding: 40px;
    background: orange;
    color: #FFF;
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
}

section.data .item {
    padding: 0 40px;
    text-align: center;
}

section.data .item:nth-child(2) {
    border-left: 2px solid white;
    border-right: 2px solid white;
}

section.data .item:nth-child(4) {
    border-left: 2px solid white;
}

section.data .number {
    font-size: 50px;
    font-weight: 700;
}

section.data .info {
    color: #1e62a9;
    font-weight: 700;
    font-size: 18px;
}

section.proyectos {
    text-align: center;
    margin-bottom: 70px;
}

section.proyectos h1 {
    text-transform: uppercase;
    color: #d2d2d2;
    font-size: 50px;
    margin-bottom: 10px;
    margin-top: 100px;
}

section.proyectos .linea {
    height: 7px;
    background: orange;
    width: 100px;
    margin: 0 auto;
    margin-bottom: 70px;
}

section.proyectos .container {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 940px;
    margin: 0 auto;
    flex-wrap: wrap;
    /* position: relative; */
}

section.proyectos .container .imagen {
    margin-bottom: 20px;
    position: relative;
}


/* Clientes */

section.clientes {
    text-align: center;
    background: #fafafa;
    padding: 50px;
}

section.clientes h1 {
    text-transform: uppercase;
    color: #d2d2d2;
    font-size: 50px;
    margin-bottom: 10px;
}

section.clientes .linea {
    height: 7px;
    background: orange;
    width: 100px;
    margin: 0 auto;
}

section.clientes .container {
    width: 80%;
    margin: 0 auto;
}

section.clientes .container img {
    height: 90px;
    padding: 20px;
    cursor: pointer;
    -webkit-filter: grayscale(100%);
    /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(100%);
    /* FF 35+ */
}

section.clientes .container img:hover {
    transition: filter .5s ease-in-out;
    -webkit-filter: grayscale(0%);
    /* Ch 23+, Saf 6.0+, BB 10.0+ */
    filter: grayscale(0%);
    /* FF 35+ */
}


/* Contacto */

section.contacto {
    width: 1000px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 100px;
}

section.contacto h1 {
    text-transform: uppercase;
    color: #d2d2d2;
    font-size: 50px;
    margin-bottom: 10px;
    margin-top: 100px;
}

section.contacto .linea {
    height: 7px;
    background: orange;
    width: 100px;
    margin: 0 auto;
    margin-bottom: 50px;
}

section.contacto .mapa {
    width: 1000px;
    margin: 0 auto;
    height: 350px;
}

section.contacto .container {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

section.contacto .container .form {
    width: 45%;
    text-align: left;
}

section.contacto .container .form .title {
    font-size: 25px;
    font-weight: 700;
    padding: 20px 0;
}

section.contacto .container .form .info {
    padding-bottom: 20px;
    font-size: 16px;
}

section.contacto .container .form .inputs {}

section.contacto .container .form .inputs input {
    width: 100%;
    padding: 10px;
    background: #f5f5f5;
    color: #8a8a8a;
    border: 0px;
}

section.contacto .container .form .inputs textarea {
    width: 100%;
    height: 200px;
    padding: 10px;
    background: #f5f5f5;
    color: #8a8a8a;
    border: 0px;
}

section.contacto .container .form .inputs button {
    border: 0px;
    padding: 10px 20px;
    color: #FFF;
    background: #172154;
}

section.contacto .container .form .inputs button:hover {
    background: #394aa0;
    cursor: pointer;
}

section.contacto .container .oficina {
    width: 45%;
    text-align: left;
    /* padding-left: 20px; */
}

section.contacto .container .oficina .title {
    font-size: 25px;
    font-weight: 700;
    padding: 20px 0;
}

section.contacto .container .oficina .direccion {
    font-size: 30px;
    font-weight: 300;
}

section.contacto .container .oficina .provincia {
    font-size: 20px;
}

section.contacto .container .oficina .datos {
    font-size: 18px;
}

section.contacto .container .oficina .linea2 {
    height: 7px;
    background: orange;
    width: 100px;
    margin-top: 20px;
}

footer {}


/* Parallax */

.parallax_section {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: 100% 100%;
    position: relative;
}

.parallax_image_first {
    background-image: url('../images/man.webp');
}

.parallax_image_second {
    background: url('../images/video.mp4');
}


/* Bounce */

.bounce {
    -webkit-animation-name: bounce;
    -moz-animation-name: bounce;
    -o-animation-name: bounce;
    animation-name: bounce;
}

.animated-arrow {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    animation-fill-mode: both;
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -ms-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
}

@-webkit-keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        -webkit-transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-30px);
    }
    60% {
        -webkit-transform: translateY(-15px);
    }
}

@-moz-keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        -moz-transform: translateY(0);
    }
    40% {
        -moz-transform: translateY(-30px);
    }
    60% {
        -moz-transform: translateY(-15px);
    }
}

@-o-keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        -o-transform: translateY(0);
    }
    40% {
        -o-transform: translateY(-30px);
    }
    60% {
        -o-transform: translateY(-15px);
    }
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-30px);
    }
    60% {
        transform: translateY(-15px);
    }
}


/* nav */

#global-nav {
    position: fixed;
    top: 0;
    z-index: 9999;
    height: 120px;
    width: 100%;
    background: #1e2d3b;
    color: #fff;
    line-height: 30px;
}

.scrolled-nav {
    height: 90px !important;
    line-height: 0px !important;
    font-size: 10px;
}

.menulogo {
    height: 84px;
}

.menulogo2 {
    height: 50px;
}

.logo {
    background: #ffffff;
    padding: 13px;
}

.logo2 {
    padding: 20px;
}


/* Gallery */

section.proyectos .image {
    opacity: 1;
    display: block;
    width: 100%;
    height: auto;
    transition: .5s ease;
    backface-visibility: hidden;
}

section.proyectos .middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

section.proyectos .imagen:hover .image {
    opacity: 0.3;
}

section.proyectos .imagen:hover .middle {
    opacity: 1;
}

section.proyectos .text {
    background-color: #d2d2d2;
    color: black;
    font-size: 16px;
    padding: 16px 32px;
}


/* Responsive */

@media screen and (max-width: 1300px) {
    section.parallax h1 {
        font-size: 50px;
    }
    section.contacto .mapa {
        width: 100%;
    }
    section.nosotros .info .container {
        margin: 100px 0 100px 25%;
    }
}

@media screen and (max-width: 1000px) {
    section.parallax {
        height: auto;
    }
    section.servicios {
        padding-top: 0px;
    }
    section.servicios .container {
        width: 100%;
        justify-content: center;
    }
    section.nosotros .info .container {
        width: 70%;
        margin: 100px 0 100px 20%;
    }
    section.proyectos .container {
        display: flex;
        justify-content: center;
        flex-direction: row;
        width: 100%;
        margin: 0 auto;
        flex-wrap: wrap;
        /* position: relative; */
    }
    section.data {
        padding: 40px;
        background: orange;
        color: #FFF;
        display: flex;
        justify-content: center;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
    }
    section.contacto {
        width: 100%;
    }
    section.contacto .container {
        width: 80%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
    }
}

@media screen and (max-width: 900px) {
    #global-nav {
        display: none;
    }
    nav.menumobile {
        display: block;
        background: #1e2d3b;
    }
    section.parallax {
        padding-top: 0px;
    }
    section.data {
        flex-wrap: wrap;
    }
    section.data .item:nth-child(4) {
        border-left: 0px solid white;
    }
    section.parallax h1 {
        font-size: 30px;
    }
    section.nosotros .info .text {
        font-size: 14px;
    }
    section.servicios article.item .info {
        font-size: 14px;
    }
    section.nosotros .info {
        width: 100%;
        margin-left: 0%;
    }
    section.nosotros {
        flex-direction: row;
        flex-wrap: wrap;
    }
    section.nosotros .info .container {
        width: 100%;
        margin: 0px;
        padding: 60px
    }
    section.nosotros .image {
        width: 50%;
    }
}

@media screen and (max-width: 500px) {
    section.parallax h1 {
        font-size: 15px;
    }
    section.parallax h1 {
        padding: 30px 0;
    }
    section.parallax {
        margin-bottom: 20px;
    }
    section.servicios h1 {
        font-size: 28px;
    }
    section.nosotros .info .title {
        font-size: 28px;
    }
    section.data .item:nth-child(2) {
        border-left: 0px solid white;
        border-right: 0px solid white;
    }
    section.servicios {
        margin-bottom: 35px;
    }
    section.proyectos h1 {
        font-size: 28px;
    }
    section.clientes h1 {
        font-size: 28px;
    }
    section.contacto h1 {
        font-size: 28px;
    }
    section.contacto .container {
        flex-direction: column;
    }
    section.contacto .container .form {
        width: 100%;
    }
    section.contacto .container .oficina {
        width: 100%;
    }
    section.clientes .container .ib {
        height: 70px;
    }
    section.data .item {
        padding: 0 0px;
        width: 150px;
        text-align: center;
    }
    section.data {
        padding: 20px;
    }
    section.clientes {
        padding: 50px 0px;
    }
    section.clientes .container {
        width: 100%;
    }
    section.clientes .container img {
        height: 70px;
    }
    .burger {
        right: 9%;
    }
}

@media screen and (max-width: 350px) {
    .burger {
        right: 3%;
    }
}