@charset "UTF-8";
/*Fuentes*/
@font-face {
    font-family:'Bebas-Bold';
    src:url(../fonts/BebasNeue-Bold.ttf);
}
@font-face {
    font-family:'Bebas-Book';
    src:url(../fonts/BebasNeue-Book.otf);
}
@font-face {
    font-family:'Bebas-Light';
    src:url(../fonts/BebasNeue-Light.otf);
}
@font-face {
    font-family:'Bebas-Regular';
    src:url(../fonts/BebasNeue-Regular.otf);
}
@font-face {
    font-family:'Bebas-Thin';
    src:url(../fonts/BebasNeue-Thin.otf);
}
@font-face {
    font-family:'Gilroy-ExtraBold';
    src:url(../fonts/Gilroy-ExtraBold.otf);
}
@font-face {
    font-family:'Gilroy-Light';
    src:url(../fonts/Gilroy-Light.otf);
}
@font-face {
    font-family:'MM';
    src:url(../fonts/Montserrat-Medium.otf);
}

/*Fuentes*/
* {
    box-sizing: border-box;
}
body {
    background-color: #ccc;
    color: #454545;
}
.contenedor {
    width: 90%;
    max-width: 1344px;
    background-color: #fff;
    margin: auto;
}
.nov900px {
    max-width: 900px;
    width: 90%;
    margin: auto;
}
.mil100px {
    max-width: 1100px;
    width: 90%;
    margin: auto;
}
.clearfix {
    display: block;
    clear: both;
}
header {
    background-color: #454545;
    float: left;
    width: 100%;
    padding: 1.2em 1em;
    position: relative;
}
section {
    width: 100%;
    float: left;
    padding: 5.625em 0;
    position: relative;
    clear: both;
}
header img {
    width: 164px;
    height: 93px;
}
nav {
    float: right;
    width: 80%;
    padding: 1.3em 0;
}
nav a {
    text-decoration:none;
    color: #fff;
    font-family:'Bebas-Book';
    font-weight: 200;
    display: block;
    text-align: center;
    font-size: 1.34em;
    transition: all .5s ease;
}
nav a:hover {
    color:#FFCB45;
}
nav li {
    display: block;
    float: left;
    width: 12.66%;
}
li.fbs {
    background-image: url(../svg/circulo-social.svg);
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    top: -6px;
}
li.fbs img {
    margin-top: .4em;
    width: 8px;
    height: 18px;
}
li.fbs:nth-child(2) img {
    width: 13px;
    height: 13px;
    margin-top: .5em;
}
#s1 {
    background-image: url(../images/Web01.jpg);
    background-size: cover;
    background-position: top right;
    height: 80vh;
}
h1 {
    font-family: 'Bebas-Book';
    font-size: 2.07em;
    text-align: center;
    float: left;
    position: relative;
    top: 10vh;
}
.bold {
    font-family:'Bebas-Bold';
}
.regular {
    font-family:'Bebas-Regular';
}
article {
    float: left;
}
section#s2 {
    background-color: #fff;
}
.sesenta {
    width:60%;
    padding: 0 0 5.5em 2.2em;
}
.sesenta ul {
    padding: 0;
}
.cuarenta {
    width:40%;
    padding: 0 2em 5.5em  0;
}
.cuarenta img {
    max-width: 100%;
    width: 100%;
    height: auto;
    box-shadow: #dcdcdc 5px 5px 15px;
}
.veinte {
    width:20%;
    height: 50vh;
}
.ochenta {
    width:80%;
    position: relative;
    z-index: 101;
    padding: 0 1em;
}
.cincuenta {
    width:50%;
}
h2, h4 {
    font-size: 2.92em;
    font-family:'Bebas-Book';
    letter-spacing: 1px;
    clear: both;
}
section#s2 li {
    font-family:'Gilroy-Light';
    margin-bottom: 1em;
    font-size: 1.04em;
}
.underline {
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-color: #fee300;
}
.servicio {
    width: 50%;
    float: left;
}
.servicio h3 {
    font-family:'Bebas-Book';
    font-size: 1.37em;
    position: relative;
}
.servicio p, .servicio li {
    font-family:'Gilroy-Light';
    font-size: 0.911em;
}
.servicio p {
/*    text-align: justify;*/
}
.servicio ul {
    padding-left: 2em;
}
.servicio li {
    list-style: none;
    margin-bottom: .2em !important;
}
.servicio li span {
    background-color: #fee300;
    font-size: 0.911em;
    padding: 0 .5em;
}
section#s2::after {
    content: "";
    display: block;
    width: 283px;
    height: 515px;
    background-image: url(../images/Web09.jpg);
    position: absolute;
    bottom: -37px;
    left: 0;
    z-index: 100;
    box-shadow: rgba(0,0,0,.3) 5px 5px 15px;
}
.servicio h3::before {
    content: "";
    display: block;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.frp::before {
    width: 19px;
    height: 15px;
    background-image: url(../images/arrows/Relaciones-publicas.png);
    top: 7px;
    left: -27px;
}
.fi::before {
    width:23px;
    height:19px;
    background-image: url(../images/arrows/Investigacion-de-mercados.png);
    top: -4px;
    left: -29px;
}
.fpa::before {
    width:15px;
    height:25px;
    background-image: url(../images/arrows/Produccion-audiovisual.png);
    top: 9px;
    left: -20px;
}
.fbr::before {
    width:17px;
    height:27px;
    background-image: url(../images/arrows/Branding.png);
    top:-14px;
    left:-22px;
}
.fdi::before {
    width:19px;
    height:15px;
    background-image: url(../images/arrows/Diseno-grafico.png);
    top:6px;
    left:-29px;
}
.fdd::before {
    width:17px;
    height:27px;
    background-image: url(../images/arrows/Desarrollo-web.png);
    top:-18px;
    left:-19px;
}
.fpm::before {
    width:23px;
    height:19px;
    background-image: url(../images/arrows/Planeacion-de-medios.png);
    top:-4px;
    left:-31px;
}
.fmkt::before {
    width:15px;
    height:25px;
    background-image: url(../images/arrows/Marketing-Digital.png);
    top:10px;
    left:-17px;
}
.fred::before {
    width:19px;
    height:15px;
    background-image: url(../images/arrows/Redes-sociales.png);
    top:6px;
    left:-27px;
}
section#s3 {
    background-image: url(../images/Web03.jpg);
    background-size: cover;
    background-position: top left;
}
section#s3 .servicio {
    width: 33.33%;
    padding: 0 .5em;
}
section#s3 .servicio li span {
    background-color: #fff;
}
section#s3 .layout {
    width: 50%;
}
section#s4 {
    padding: 0;
    background-color: #fff;
}
#mosaico img {
    display: block;
    float: left;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}
#mosaico figure {
    float:left;
    width: 50%;
    margin: 0;
    position: relative;
}
figcaption {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #ffcc00;
    z-index: 2;
    opacity: 0;
    transition: all .5s ease;
}
#mosaico figure:hover figcaption {
    opacity: .4;
}
#mosaico img:nth-child(1) {
    border-right: 1px solid transparent;
    border-bottom: 1px solid transparent;
}
#mosaico img:nth-child(2) {
    border-left: 1px solid transparent;
    border-bottom: 1px solid transparent;
}
#mosaico img:nth-child(3) {
    border-right: 1px solid transparent;
    border-top: 1px solid transparent;
}
#mosaico img:nth-child(4) {
    border-left: 1px solid transparent;
    border-top: 1px solid transparent;
}
section#s4 p {
    font-family:'Gilroy-Light';
    font-size: 1.06em;
}
article.cincuenta div {
    padding-left: 19%;
    padding-right: 1%;
    padding-top: 5.625em;
    padding-bottom: 0;
}
section#s5 {
    background-image: url(../images/Web08.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
    padding-bottom: 20em !important;
}
#proy img {
    display: block;
    height: auto;
    float: left;
}
#proy div#lvl-1 img {
    width: 20%;
}
#proy div#lvl-2 img {
    width: 25%;
}
#proy div#lvl-3 img {
    width: 20%;
}
footer {
    background-color: #454545;
    padding: 2.75em 0 0;
    float: left;
    width: 100%;
}
#contacto {
    width: 50%;
    float: left;
    position:relative;
    left:50%;
    padding-left: 1em;
}
#mapa {
    width: 50%;
    float: left;
    position:relative;
    left: -50%;
    padding-right: 1em;
}
footer h4 {
    margin: 0;
    color: #fff;
    float: left;
}
footer h4 + span {
    font-family:'Gilroy-Light';
    font-size: 1.04em;
    color: #fff;
    float: left;
    display: block;
    padding-top: .3em;
    padding-left: .5em;
}
footer input, textarea {
    display: block;
    margin-bottom: .5em;
    width: 85%;
    outline: none;
    border: none;
    font-family:'Gilroy-ExtraBold';
    font-size: 1.06em;
}
footer input {
    padding: .5em .3em;
}
footer textarea {
    padding: .5em .3em;
    height: 110px;
}
footer p {
    font-family:'Gilroy-Light';
    font-size: 1.06em;
    color:#fff;
    line-height: 1.2em;
}
#subfooter {
    background-color: #ffcc00;
    padding: 2.2em 0;
    margin-top: 1em;
    position: relative;
}
#subfooter p {
    color: #454545;
    text-align: center;
    font-family: 'MM';
    font-size: 0.75em;
}
#social {
    position: absolute;
    top: -67px;
    right: 42px;
}
#social img {
    width: 20px;
    height: 20px;
    display: block;
    margin: .5em auto 0;
}
#social a {
    background-image: url(../svg/circulo-social.svg);
    display: block;
    float: left;
    width: 35px;
    height: 35px;
    margin: .3em;
}
#hamburguesa {
    display: none;
}
#s2-3 {
    display: none;
}
#proy-mov  {
    display: none;
}
.fixed-social {
    display: none;
}
#link-m  {
        display: none;
    }
#link-d {
        display: block;
    }

@media screen and (max-width:1024px) {
    
    #hamburguesa {
        display: block;
        width: 32px;
        height: 32px;
        padding: .2em;
        position: absolute;
        top: 48px;
        right: 17px;
    }
    .open {
        height:206px !important;
    }
    #hamburguesa span {
        display: block;
        height: 4px;
        background-color: #FFCB45;
        margin-bottom: 4px;
        border-radius: 2px;
        transition: all .5s ease;
    }
    .inner-move {
        margin-bottom:6px !important;
    }
    nav {
        float: none;
        clear: both;
        width: 100%;
        height: 0px;
        overflow: hidden;
        padding: 0;
        transition: all .5s ease;
    }
    nav ul {
        padding: 0;
    }
    nav li {
        display: block;
        float: none;
        width:100% !important;
    }
    nav a {
        text-align: right;
    }
    #redes {
        display: block;
        width: 75px !important;
        float: right !important;
        position: relative;
        top: 10px;
    }
    #redes li {
        float: left;
    }
    #redes a {
        text-align: center;
    }
    header {
        padding: 1.2em;
    }
    article.cincuenta div {
        padding-left: 9%;
        padding-top: 1.625em;
    }
    #social {
        display: none;
    }
    .fixed-social {
        display: block;
        background-color: #454545;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 45px;
        z-index: 9999;
    }
    .redes {
        width: 80px;
        position: absolute;
        right: .5em;
        bottom: 0;
        
    }
    .redes a {
        float: left;
        display: block;
        margin:0 .2em;
        width: -webkit-calc(50% - .4em);
    }
    #link-m {
    display: none;
}
    footer {
        padding-bottom: 45px;
    }
}
@media screen and (max-width:1023px) {
    #arrow {
        display: block;
        margin: 0 auto 2em;
        width: 120px;
        clear: both;
    }
    #link-m  {
        display: none;
    }
    #link-d {
        display: block;
    }
    #s1 {
        height: 50vh;
        padding-top: 0;
    }
    h1 {
        top: 7vh;
    }
    h1 br {
        display: none;
    }
    section#s2::after {
        display: none;
    }
    .veinte {
        width: 10%;
    }
    .ochenta {
        width: 90%;
    }
    article.cincuenta div {
        padding-top: 0;
    }
    section#s4 p br {
        display: none;
    }
    #contacto, #mapa  {
        width: 100%;
        left: 0;
        padding: 0;
    }
    footer input, textarea {
        width: 100%;
    }
}
@media screen and (max-width:767px) {
     #link-m  {
        display: block;
    }
    #link-d  {
        display: none;
    }
    .contenedor {
        width: 98%;
    }
    #s1 {
        height: 57vh;
        background-position: top left;
    }
    h1 {
        top: 14vh;
    }
    #s2 article {
        width: 100%;
    }
    #s2 .cuarenta, .veinte {
        display: none;
    }
    h2 {
/*        margin-top: 0;*/
        text-align: center;
    }
    .cincuenta h2, #s5 h2, #s2 h2 {
        margin-top: 0;
    }
    .nov900px {
        width: 95%;
    }
    .sesenta {
        padding: 0;
    }
    .sesenta ul {
        padding:0 0 0 2.2em;
/*        padding:0 0 5.5em 2.2em*/
    }
    #s3, #desktop, .bx-pager {
        display: none;
    }
    #s2-3 {
        display: block;
        background-color: #fff;
        padding-top: 0;
        padding-bottom: 4em;
    }
    section#s2-3::before, section#s2-3::after, #s4::after {
        content: "";
        display: block;
        height: 300px;
        background-size: cover;
/*        background-attachment: fixed;*/
    }
    section#s2-3::before {
        background-position:center;
        background-image: url(../images/bg-mob/escalera-a.jpg);
    }
    section#s2-3::after {
        background-position:center;
        background-image: url(../images/bg-mob/sillon.jpg);
    }
    .servicio {
/*        width: 100% !important;*/
        padding: 0 1em;
    }
    .bx-wrapper {
        margin: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
    }
    .cincuenta {
        width: 100%;    
    }
    article.cincuenta div {
        padding: 0;
    }
    section#s4 p {
        width: 95%;
        margin:0 auto 3em;
    }
    #mosaico figure {
        width: 100%;
    }
    #mosaico figure {
        display: none;
    }
    #s4::after {
        background-image: url(../images/bg-mob/silla.jpg);
        clear: both;
    }
    #proy {
        display: none;
    }
    #proy-mov {
        display: block;
        max-width: 425px;
        width: 100%;
        margin: auto;
    }
/*Flechas servicios*/
    .servicio h3 {
        display: inline-block;
    }
    .servicio h3::before {
        display:block;
        -webkit-transform:rotateY(180deg);
        left: inherit;
    }
    .frp::before {
        right: -27px;
    }
    .fi::before {
        right: -29px;
    }
    .fpa::before {
        right: -20px;
    }
    .fbr::before {
        right:-22px;
    }
    .fdi::before {
        right:-29px;
    }
    .fdd::before {
        right:-19px;
    }
    .fpm::before {
        right:-31px;
    }
    .fmkt::before {
        right:-17px;
    }
    .fred::before {
        right:-27px;
    }
    .servicio br {
        display: none;
    }
}
@media screen and (max-width:424px) {
    h1 {
        top: 12vh;
    }
    footer h4 {
        float: none;
    }
    footer h4 + span {
        padding: 0 0 .6em;
    }
}