@font-face { font-family: Bilbao ExtraLight; src: url(../fonts/Bilbao/Bilbao-ExtraLight.otf); font-display: swap}
@font-face { font-family: Bilbao Light; src: url(../fonts/Bilbao/Bilbao-Light.otf); font-display: swap}
@font-face { font-family: Bilbao; src: url(../fonts/Bilbao/Bilbao-Regular.otf); font-display: swap}
@font-face { font-family: Bilbao BoldItalic; src: url(../fonts/Bilbao/Bilbao-BoldItalic.otf); font-display: swap}
@font-face { font-family: BilbaoBold; src: url(../fonts/Bilbao/Bilbao-Bold.otf); font-display: swap}
@font-face { font-family: Bilbao SemiBold; src: url(../fonts/Bilbao/Bilbao-SemiBold.otf); font-display: swap}
@font-face { font-family: Bilbao ExtraBold; src: url(../fonts/Bilbao/Bilbao-ExtraBold.otf); font-display: swap}
@font-face { font-family: Bilbao ExtraBoldItalic; src: url(../fonts/Bilbao/Bilbao-ExtraBoldItalic.otf); font-display: swap}
@font-face { font-family: Bilbao Regular; src: url(../fonts/Bilbao/Bilbao-Regular.otf); font-display: swap}
@font-face { font-family: Bilbao Medium; src: url(../fonts/Bilbao/Bilbao-Medium.otf); font-display: swap}
@font-face { font-family: Bilbao-Black; src: url(../fonts/Bilbao/Bilbao-Black.otf); font-display: swap}
.agencia_marketing{
    font-family: Bilbao-Black;
    font-weight: 900;
    font-size: 210px;
    line-height: 170px;
    color: rgba(255, 255, 255, 0.11);
    position: absolute;
    left: 14.4%;
    top: 26.4%;
}
.salto_lottie{
    cursor:pointer;
}
.margen{
    margin-left: 7.8%;
    margin-right: 7.8%;
}
.logo_lottie{
    width: 65px;height: 100px;margin-top: 20px;
}
.flecha {
    width: 15%;
    height: 4em;
    -webkit-mask-image: url(../images/enviar.svg);
    margin-left: 0%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 60%;
    background: gray;
    display: none;
}

.div_servicios{
    display: flex;height: 7em;align-items: initial;
}
.avanzar{
    width: 3%;-webkit-mask-image: url(../images/assets/avanzar.svg);-webkit-mask-repeat: no-repeat;-webkit-mask-size: 100%;background: #fff;height:3em;
}
.avanzar:hover{
    background: linear-gradient(0deg, #FF4472 4.31%, #DA4C8E 52.47%, #A757AE 94.11%, #5767DD 121.73%);cursor:pointer;
}
.volver{
    width: 3%;-webkit-mask-image: url(../images/assets/volver.svg);-webkit-mask-repeat: no-repeat;-webkit-mask-size: 100%;background: #fff;height:3em;
}
.volver:hover{
    background: linear-gradient(0deg, #FF4472 4.31%, #DA4C8E 52.47%, #A757AE 94.11%, #5767DD 121.73%);cursor:pointer;
}
.span_flecha{
    font-family: Bilbao;
    font-weight: bold;
    font-size: 16px;
    line-height: 30px;
    letter-spacing: 0.2em;
    color: rgba(255, 255, 255, 0.4);
    margin-left:60px;
    display:none;
}
.content_flecha{
    display:flex; align-items:flex-start;
}
.whats_flotante{
    width:50% !important;
    z-index:1;
}
.aura {
  cursor:none;
}
.growth_title{
    font-family:Bilbao ExtraBold;
    font-weight: 900;
    font-size: 96px;
    line-height: 75px;
    color: transparent;
    -webkit-text-stroke: 2.5px #fff !important;
    display:inline-block;
    position:relative;
}

.growth_title::before {
    position:absolute;
    content:attr(data-text) !important;
    color:transparent !important;
    -webkit-text-stroke: 2.5px #FF4472 !important;
    clip-path: circle(80px at var(--x,-100%) var(--y,-100%));
}

.agency_title{
    font-family:Bilbao ExtraBold;
    font-weight: 900;
    font-size: 96px;
    line-height: 75px;
    margin-left:-100px;
    color: transparent;
    -webkit-text-stroke: 2.5px #fff !important;
    -webkit-background-clip: text;
    display:inline-block;
    position:relative;
}

.agency_title::before {
    position:absolute;
    content:attr(data-text) !important;
    color: #000;
    -webkit-text-stroke: 5.5px transparent;
    background: -webkit-linear-gradient(89deg, #5767DD 0%, #A757AE 42.71%, #DA4C8E 79.17%, #FF4472 100%);
    -webkit-background-clip: text;
    clip-path: circle(80px at var(--x,-100%) var(--y,-100%));
    width:120%; height:105%;
}

.growth_title2{
    font-family:Bilbao ExtraBold;
    font-weight: 900;
    font-size: 96px;
    line-height: 75px;
    margin-left:30px;
}
.partner_title{
    font-family:Bilbao ExtraBold;
    font-weight: 900;
    font-size: 96px;
    line-height: 75px;
    margin-left:210px;
}
.growth_title3{
    font-family:Bilbao ExtraBold;
    font-weight: 900;
    font-size: 40px;
    line-height: 75px;
    background:#fff;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left:10px;
}
.growth_title3::before {
    position:absolute;
    content:attr(data-text) !important;
    background:#FF4472;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    clip-path: circle(80px at var(--x,-100%) var(--y,-100%));
}
.hacking_title{
    font-family:Bilbao ExtraBold;
    font-weight: 900;
    font-size: 40px;
    line-height: 75px;
    background:#fff;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-left:10px;
}
.hacking_title::before {
    position:absolute;
    content:attr(data-text) !important;
    background:#FF4472;
    background:linear-gradient(0deg, #5767DD 0%, #A757AE 72.71%, #DA4C8E 79.17%, #FF4472 100%);
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    clip-path: circle(80px at var(--x,-100%) var(--y,-100%));
}
.growth_row2{
    margin-top:-210px !important;
}
.hacking_row{
    margin-top:-40px !important;
}
.vermas{
    background: linear-gradient(95.66deg, #FF4472 4.31%, #DA4C8E 52.47%, #A757AE 94.11%, #5767DD 121.73%);border-radius: 60px;
    font-family: Bilbao;
    font-style: normal;
    font-weight: 900;
    font-size: 14px;
    line-height: 75px;
    letter-spacing: 0.5em;
    color: #fff;
    width: 190px;
    height: 38px;
    display:grid;
    align-content:center;
    border:none;
}
.growth{
    font-family: Bilbao;
    font-size: 87px;
    line-height: 30px;
    color: #FFFFFF;
}
.hacking{
    font-family: Bilbao;
    font-size: 36px;
    line-height: 30px;
    color: #FFFFFF;
}
.todos_proyectos{
    font-family: Bilbao;
    font-size: 36px;
    line-height: 30px;
    color: #FFFFFF;
}
.mas{
    font-weight: 900 !important;
    font-size: 14px !important;
    letter-spacing: 0.5em !important;
}
.parrafo{
    font-family: Bilbao;
    font-size: 18px;
    line-height: 28px;
    text-align: justify;
    letter-spacing: 0.03em;
    color: #FFFFFF;
}
a:hover{
    text-decoration:none !important;
}

td{
    padding: 0px !important;
}
th{
    padding-left:0px !important;
}
*{
    padding: 20;
    margin: 20;
    color:white;
}
.topnav {
    text-align: right;
    width:100%;
    float:right !important;
    background: #000;
}
nav{
    display:inline-block;
    list-style-type: none;
}
.topnav a {
    text-align: center;
    padding: 5px 0px;
    margin-left:46px;
    text-decoration: none;
    font-family: Bilbao ExtraLight;
    color: #fff;
    cursor: pointer;
}
.topnav span{
    font-family: Bilbao ExtraLight;
    font-size: 20px;
    color: #fff;
    margin-left: 0px;
}
.topnav i{
    margin-left: 20px;
    margin-top: 1%;
}
.topnav img{
    margin-left: 20px;
    margin-right: 50px;
    margin-top: -12px;
}
.topnav .icon {
    display: none;
}
.logo{
    float: left;
    margin: 30px 100px !important;
    width: 20%;
}

.facebook{
    width:2% !important;
}
#facebook{
    width:10%;margin-top: -5%;margin-left: 5%;
}

span{
    font-family:Bilbao;
    font-size:18px;
}
.titulo_formulario{
    font-family:Bilbao Light;
    font-size: 61px;
    line-height: 150px;
}
#contacto{
    background: linear-gradient(95.66deg, #FF4472 4.31%, #DA4C8E 52.47%, #A757AE 94.11%, #5767DD 121.73%) !important;
    z-index:2 !important;
}
.form-control{
    background:none;
    border-top:none;
    border-right:none;
    border-left:none;
    margin-bottom:50px;
    font-family: Bilbao;
    font-size:18px;
    box-shadow:none !important;
    font-family:Bilbao;
    color:white !important;
    border-radius: 0px;
    width:100% !important;
}
label{
    font-family:Bilbao;
    font-size:14px;
    letter-spacing: 0.5em;
}
input:focus{
    outline: none !important;
    background:none !important;
    box-shadow:none !important;
}
textarea:focus{
    outline: none !important;
    background:none !important;
    box-shadow:none !important;
}
.enviar{
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 60px;
    float:right;
    font-family:Bilbao;
    font-size:14px;
    letter-spacing: 0.5em;
    color:white;
    display:grid;
    align-content:center;
    width: 190px;
    height: 38px;
}
.enviar:hover{
    color:white;
}
#footer{
    background:#000; z-index: 1;
}

.footer_title{
    font-family:Bilbao SemiBold;
    font-size:13px;
    letter-spacing: 0.08em;
    color: #E5E5E5;
}
.footer_text1{
    font-family: Bilbao ExtraBold;
    font-size:14px;
    letter-spacing: 0.35em;
}
.footer_text2{
    font-family: Bilbao ExtraBold;
    font-size:12px;
    letter-spacing: 0.35em;
}
.w-100{
    width:100% !important;
}
.mr-md-5{ margin-right:5% !important;}
.ml-md-80{ margin-left:8% !important; }
.mr-md-80{ margin-right:8% !important; }
.ml-2-1{margin-left:2.1% !important;}
.mt-1{ margin-top:1% !important; }
.mt-2{ margin-top:2% !important; }
.mt-5{ margin-top:5% !important; }
.mt-8{ margin-top:8% !important; }
.mt-10{ margin-top:10% !important; }
.mt-15{ margin-top:15% !important; }
.mt-20{ margin-top:20% !important;; }
.mb-20{ margin-bottom:20% !important; }
.mb-10{ margin-bottom:10% !important; }
.mb-8{ margin-bottom:8% !important; }
.mb-5{ margin-bottom:5% !important; }
.mb-3{ margin-bottom:3% !important; }
.mb-2{ margin-bottom:2% !important; }
.mb-1{ margin-bottom:1% !important; }
.div_redes{
    text-align:center !important; margin-top:5px;
}
.redes{
    width:30%;
}
.salto{
    width: 65px; height: 65px; background:transparent;margin-top:20px;
}


.a{position: relative; font-weight: 600; text-decoration: none; color: white; opacity: 1; transition: opacity 0.3s cubic-bezier(0.51, 0.92, 0.24, 1); }
.a::after {
	 --scale:0; content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 2px;
	 background: linear-gradient(90.03deg, #FF4472 14.28%, #A757AE 67.25%, #5767DD 98.35%);
	 transform: scaleX(var(--scale)); transform-origin: var(--x) 50%; transition: transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1);
}
.a:hover::after{ --scale:1; }

.a_modal{position: relative; font-weight: 600; text-decoration: none; color: white; opacity: 1; transition: opacity 0.3s cubic-bezier(0.51, 0.92, 0.24, 1); }
.a_modal::after {
	 --scale:0; content: ''; position: absolute; left: 0; right: 0; top: 115%; height: 2px;
	 background: #fff;
	 transform: scaleX(var(--scale)); transform-origin: var(--x) 50%; transition: transform 0.3s cubic-bezier(0.51, 0.92, 0.24, 1);
}
.a_modal:hover::after{ --scale:1; }



/* SERVICIOS */
.servicios_title{
    font-family: Bilbao;
    font-size: 36px;
    line-height: 30px;
    color: #FFFFFF;
}
.servicios{
    font-family: Bilbao Regular;
    font-size: 87px;
    line-height: 35px;
        color: #FFFFFF;
}
.servicios:hover{
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
}
.servicio{
    font-family: Bilbao Regular;
    font-size: 87px;
    line-height: 35px;
    color: rgba(255, 255, 255, 0.4);
}
.servicio_numero{
    font-family: Bilbao ExtraLight;
    font-weight: 300;
    font-size: 72px;
    line-height: 30px;
    color: #FFFFFF;
}
.servicio_text{
    font-family: Bilbao Medium;
    font-size: 26px;
    line-height: 36px;
    color: #fff;
}
.servicio_subtext{
    font-family: Bilbao Light;
    font-size: 20px;
    line-height: 32px;
    color: #fff;
}
.opacidad{
  animation: fadeIn 4s;
  -webkit-animation: fadeIn 4s;
  -moz-animation: fadeIn 4s;
  -o-animation: fadeIn 4s;
  -ms-animation: fadeIn 4s;
}
.transicion {
  animation: fadeIn 4s;
  -webkit-animation: fadeIn 4s;
  -moz-animation: fadeIn 4s;
  -o-animation: fadeIn 4s;
  -ms-animation: fadeIn 4s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
.servicios_menu{
    font-family: Bilbao ExtraLight;
    font-size: 11px;
    line-height: 15px;
    color: #fff;
}
.servicios_menu:hover{
    cursor: pointer;
}
.growth_lottie{
    width: 120px; height: 120px;margin-top:-42px !important;
}

.frase{
    font-family: Bilbao;
    font-size: 36px;
    line-height: 25px;
    letter-spacing: 0.05em;
    color: #FFFFFF;
}
.somos_title{
    font-family: Bilbao;
    font-size: 87px;
    line-height: 100px;
    color: #FFFFFF;
    display:block;
    margin-top:0px;
    margin-bottom:30px;
}
.somos_content{
    font-family: Bilbao;
    font-size: 20px;
    line-height: 32px;
    text-align: justify;
    color: #FFFFFF;
    display:block;
}
.frase2{
    font-family: Bilbao Light;
    font-size: 18px;
    line-height: 72px;
    color: #FFFFFF;
}
.somos_title2{
    font-family: Bilbao Regular;
    font-size: 72px;
    line-height: 82px;
    color: #FFFFFF;
    display:block;
    margin-bottom:30px;
}
.somos_title3{
    font-family: Bilbao Medium;
    font-size: 36px;
    line-height: 25px;
    letter-spacing: 0.27em;
    color: #FFFFFF;
}
.somos_subtitle{
    font-family: Bilbao;
    font-weight: bold;
    font-size: 18px;
    line-height: 72px;
    letter-spacing: 0.5em;
    color: #C4C4C4;
}
.onestop{
    font-family: BilbaoBold;
    font-size: 18px;
    line-height: 38px;
    letter-spacing: 0.5em;
    color: #C4C4C4;
}
.recientes{
    font-family: BilbaoBold;
    font-size: 18px;
    line-height: 38px;
    letter-spacing: 0.5em;
    color: #C4C4C4;
}
.xikneki2{
    font-family: Bilbao ExtraBoldItalic;
    font-weight: 900;
    font-size: 14px;
    line-height: 75px;
    letter-spacing: 5.5em;
    color: #FFFFFF;
}
.bigtitle{
    font-family: Bilbao;
    font-size: 138px;
    line-height: 125px;
    color: #FFFFFF;
}
.subtitle{
    font-family: Bilbao;
    font-size: 36px;
    line-height: 150px;
    letter-spacing: 0.05em;
    color: #FFFFFF;
}
.paginacion{
    font-family: Bilbao Bold;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: 0.2em;
    color: #FFFFFF;
}
.hr_paginacion{
    width:100%;margin-left:20px;margin-right:20px;
}
.flecha_proyectos{
    width: 12%;
    height: 4em;
    -webkit-mask-image: url(../images/assets/flecha.svg);
    margin-left: 5%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    background: gray;
    display: block !important;
}
.flecha_proyectos:hover{
    background: linear-gradient(0deg, #FF4472 4.31%, #DA4C8E 52.47%, #A757AE 94.11%, #5767DD 121.73%);cursor:pointer;
}
.flecha_growth{
    width: 12%;
    height: 4em;
    -webkit-mask-image: url(../images/assets/flecha.svg);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100%;
    background: gray;
    display: block !important;
    transform: scaleX(-1);
    margin-top: -8% !important;
}
.flecha_growth:hover{
    background: linear-gradient(0deg, #FF4472 4.31%, #DA4C8E 52.47%, #A757AE 94.11%, #5767DD 121.73%);cursor:pointer;
}
.proyectos_subtitle{
    font-family: Bilbao Light;
    font-size: 13px;
    line-height: 75px;
    color: rgba(255, 255, 255, 0.6);
}
.proyectos_title{
    font-family: Bilbao Regular;
    font-size: 20px;
    line-height: 75px;
    color: #FFFFFF;
    display: block !important;
    margin-top: -30px;
}
.proyectos_foto{
    width: 95.1%;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
}
.proyectos_foto:hover {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    cursor:pointer !important;
}
.carousel-control-prev-portafolio {
    position: absolute; top: 0; bottom: 110px; right: 50px !important; z-index: 1; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; width: 20%;
}
.carousel-control-next-portafolio {
    position: absolute; top: 0; bottom: 110px; left: 50px !important; z-index: 1; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; width: 20%;
}
.carousel-control-prev-icon {
    background-image: url(http://xikneki.com/images/assets/retroceder_portafolio.svg);
    width:30px; height: 30px;
}
.carousel-control-next-icon {
    background-image: url(http://xikneki.com/images/assets/avanzar_portafolio.svg);
    width:30px; height: 30px;
}
.proyecto_size{
    width:95.1% !important;
}
.proyectos_title_size{
    width:108%;
}
hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
}

.non-selectable {
   -moz-user-select: none; 
   -webkit-user-select: none;
    -ms-user-select: none;
   user-select: none; 
}

@media only screen and (min-width: 1300px) and (max-width: 1400px){
    .agencia_marketing {
        font-size: 147px;
        line-height: 113px;
        position: absolute;
        top: 40%;
    }
    .growth_title {
        font-size: 70px;
        line-height: 50px;
        margin-left: 40px;
    }
    .agency_title {
        font-size: 71px;
        line-height: 50px;
        margin-left: -40px;
    }
    .growth_title2 {
        font-size: 71px;
        line-height: 62px;
        margin-left: 104px;
    }
    .partner_title {
        font-size: 71px;
        line-height: 43px;
        margin-left: 235px;
    }
    .growth_title3 {
        font-size: 15px;
        line-height: 50px;
        margin-left: -35px;
        margin-top: 65px;
        display: block;
    }
    .hacking_title {
        font-size: 15px;
        line-height: 50px;
        margin-left: -35px;
        margin-top: 7px;
        display: block;
    }
    .growth_title::before {
        clip-path: circle(60px at var(--x,-100%) var(--y,-100%));
    }
    .growth_title3::before {
        clip-path: circle(60px at var(--x,-100%) var(--y,-100%));
    }
    .hacking_title::before {
        clip-path: circle(60px at var(--x,-100%) var(--y,-100%));
    }
    .agency_title::before {
        clip-path: circle(60px at var(--x,-100%) var(--y,-100%));
    }
    .somos_title {
        font-family: Bilbao;
        font-size: 65px;
        line-height: 80px;
    }
}


@media only screen and (min-width: 300px) and (max-width: 720px) {
    .agencia_marketing{
        font-size: 55px;
        line-height: 50px;
        position: absolute;
        left: 5.5%;
        top: 33%;
    }
    .logo_lottie{
        width: 35px;height: 50px;margin-left: 0px;margin-top: 20px;
    }
    .growth_title{
        font-size: 48px;
        margin-left:100px;
        color: transparent;
        -webkit-text-stroke: 2.5px #FF4472;
    }
    .growth_title::before {
        position:absolute;
        content:none;
        color:transparent !important;
        -webkit-text-stroke: 2.5px #FF4472 !important;
        clip-path: none;
    }
    .agency_title{
        font-size: 48px;
        margin-left:50px;
    }
    .agency_title_movil{
        font-family:Bilbao ExtraBold;
        font-weight: 900;
        line-height: 75px;
        font-size: 48px;
        margin-left:-80px;
        margin-top:5px;
        text-align:center;
        background: -webkit-linear-gradient(270deg, #5767DD 0%, #A757AE 42.71%, #DA4C8E 79.17%, #FF4472 100%);
        -webkit-background-clip: text;
        -webkit-text-stroke: 4.5px transparent;
        color: #000;
    }
    .growth_title2{
        font-size: 48px;
        margin-left:20px;
    }
    .partner_title{
        font-size: 48px;
        margin-left:110px;
    }
    .growth_title3{
        font-size: 20px;
        margin-left:10px;
    }
    .growth_title3::before {
        position:absolute;
        content:none;
        background:#FF4472;
        color: transparent;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        clip-path: none;
    }
    .hacking_title{
        font-size: 20px;
        margin-left:10px;
    }
    .hacking_title::before {
        position:absolute;
        content:none;
        background:#FF4472;
        background:linear-gradient(0deg, #5767DD 0%, #A757AE 72.71%, #DA4C8E 79.17%, #FF4472 100%);
        color: transparent;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        clip-path: none;
    }
    .agency_row{
        margin-top:-40px !important;
    }
    .growth_row1{
        margin-top:-35px !important;
    }
    .partner_row{
        margin-top:-40px !important;
    }
    .growth_row2{
        margin-top:-140px !important;
        margin-left:220px;
    }
    .hacking_row{
        margin-top:-57px !important;
        margin-left:220px;
    }
    .growth{
        font-size: 43.5px;
        line-height: 15px;
    }
    .hacking{
        font-size: 18px;
        line-height: 15px;
    }
    .todos_proyectos{
        font-size: 15px;
        line-height: 12px;
    }
    .mas{
        font-size: 10px;
    }
    .bigtitle{
        font-size: 66px;
        line-height: 62.5px;
    }
    .subtitle{
        font-size: 18px;
        line-height: 75px;
        letter-spacing: 0.025em;
    }
    .titulo_formulario{
        font-size: 29.5px;
        line-height: 75.5px;
    }
    .w-100{
        width:100% !important;
    }
    label{
        font-size:12px;
    }
    .vermas{
        font-size: 12px;
        width: 140px;
        height: 30px;
    }
    .enviar{
        font-size:12px;
        width: 140px;
        height: 30px;
    }
    .footer_title{
        font-size:13px;
    }
    .footer_text1{
        font-size:14px;
    }
    .footer_text2{
        font-size:12px;
    }
    .topnav {
        margin-right:0px;
    }
    .topnav a {display: none;}
    .topnav a.icon {
        position: absolute;
        display: block;
        top: 25px;
        right: -24px;
        width: 15%;
    }
    .topnav.responsive {
        position: absolute;
        margin-bottom: 0%;
        right:0px;
        height: 0px;
    }
    .topnav.responsive a.icon {
        position: absolute;
        top: 25px !important;
        right: 0px !important;
        width: 15%;
    }
    .topnav span {
        font-size: 15px;
    }
    .topnav.responsive a {
        float: none;
        display: block;
        text-align: right;
        width:80%;
        margin-bottom: -5px;
        margin-right: 0px;
    }
    .a_nosotros{
        margin-top:20px;
    }
    .logo{
        float: left;
        margin: 25px 50px !important;
        width:8%;
        position: absolute;
        top:0;
        z-index: 1;
    }
    .topnav img{
        margin-left: 0px;
        margin-right: 0px;
        margin-top: 0px;
        width: 8%;
    }
    #footer{
        margin-bottom:30px;
        z-index:1 !important;
    }
    .div_redes{
        text-align:left !important; margin-top:40px; 
    }
    .ubicacion{
        margin-top:10px; margin-left:60px;
    }
    .info_contacto{
        margin-top:10px; margin-left:60px;
    }
    .formatos{
        margin-top:10px;
    }
    .formato{
        margin-left:60px;
    }
    .redes{
        width:25%;
        margin-bottom:10% !important; margin-left:60px;
    }
    .salto{
        width: 75px; height: 75px;
    }
    .a::after {
        background:none;
    }
    .whats_flotante{
        width:300% !important;
        z-index:1;
    }
    .div_whats{
        z-index:1;
        left:15px;
        bottom: 0px;
    }
    .servicios_title{ font-size: 18px; line-height: 15px;}
    .servicios{ font-size: 25px; line-height: 10px;}
    .servicio{font-size:34px;line-height: 10px;}
    .servicio_numero{ font-size: 36px; line-height: 15px;}
    .servicio_text{font-size:13px;line-height: 18px;}
    .servicio_subtext{font-size:10px;line-height: 18px;}
    .avanzar{width: 12%;}
    .volver{width: 12%;}
    .span_flecha{
        font-size: 8px;
        line-height: 20px;
        letter-spacing: 0.1em;
        margin-left:30px;
        display:block !important;
    }
    
    .div_servicios{height: 3em;}
    .flecha{ width: 13%; margin-left: 5px; display: block !important; height: 2em;}
    
    .growth_lottie{
        width: 60px; height: 60px;margin-top:-21px !important;
    }
    .frase{
        font-size: 18px;
        line-height: 12.5px;
        letter-spacing: 0.025em;
    }
    .somos_title{
        font-size: 35px;
        line-height: 48px;
        display:block;
        margin-top:13.5px;
        margin-bottom:30px;
    }
    .somos_content{
        font-size: 10px;
        line-height: 16px;
    }
    .somos_title2{
        font-size: 36px;
        line-height: 41px;
        display:block;
        margin-bottom:15px;
    }
    .somos_subtitle{
        font-size: 9px;
        line-height: 36px;
        letter-spacing: 0.25em;
    }
    .frase2{
        font-size: 10px;
        line-height: 36px;
    }
    .somos_title3{
        font-size: 18px;
        line-height: 12.5px;
        letter-spacing: 0.135em;
        color: #FFFFFF;
    }
    .ml-40{ margin-left:4% !important; }
    .mr-40{ margin-right:4% !important; }
    .ml-10{ margin-left:2% !important; }
    .mr-10{ margin-right:2% !important; }
    .onestop{
        font-size: 9px;
        letter-spacing: 0.25em;
        line-height: 17px;
    }
    .recientes{
        font-size: 11px;
        letter-spacing: 0.25em;
        line-height: 21px;
    }
    .xikneki2{
        font-size: 7px;
        line-height: 37.5px;
        letter-spacing: 2.25em;
    }
    .parrafo{
        font-size: 9px;
        line-height: 14px;
        letter-spacing: 0.015em;
    }
    .paginacion{
        font-size: 9px;
        line-height: 15px;
        letter-spacing: 0.1em;
    }
    .hr_paginacion{
        width:100%;margin-left:10px;margin-right:10px;
    }
    .proyectos_foto{
        width:100% !important;
        filter: none;
        -webkit-filter: none;
        -moz-filter: none;
    }
    .proyecto_size{
        width:100% !important;
    }
    .flecha_proyectos{
        width: 90%;
    }
    .flecha_growth{
        width: 10%;
    }
    #contacto{
        z-index:2 !important;
    }
    .a_modal::after {
    	 background: none;
    	 transform: none;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) { 
    .logo_lottie{
        width: 50px;height: 50px;margin-left: 30px;margin-top: 20px;
    }
    .salto {
        width: 50px;
        height: 50px;
        animation:none;
    }
    .growth_title3{
        margin-left: 20px !important;
    }
    .hacking_title{
        margin-left: 20px !important;
    }
    .growth_lottie {
        margin-top: -18px !important;
    }
}


@media only screen and (max-width: 375px) {
    .agencia_marketing{
        font-size: 45px;
        line-height: 40px;
        position: absolute;
        left: 10%;
        top: 33%;
    }
    .growth_title{
        font-size: 38px;
        margin-left:100px;
        line-height: 65px;
    }
    .agency_title_movil {
        font-size: 38px;
        margin-left: -50px;
        line-height: 65px;
    }
    .growth_title2 {
        font-size: 38px;
        margin-left: 35px;
        line-height: 65px;
    }
    .partner_title {
        font-size: 38px;
        margin-left: 105px;
        line-height: 65px;
    }
    .hacking_row{
        margin-top:15px !important;
    }
    .hacking_title {
        font-size: 15px;
        margin-top: 22px;
        margin-left: -15px;
        line-height: 65px;
        position: absolute;
    }
    .hacking_title::before {
        position:absolute;
    }
    .growth_title3 {
        font-size: 15px;
        margin-top: 24px;
        margin-left: -15px;
        line-height: 65px;
        position: absolute;
    }
    .growth_title3::before {
        position:absolute;
    }
    .xikneki {
        font-size: 9.5px;
        margin-left: 0%;
        display:block;
        margin-top:50px;
    }
    #xikneki {
        margin-top:-50px;
    }
    .servicios {
        font-size: 22px;
        line-height: 10px;
    }
    .flecha {
        margin-left: 10px;
    }
    .salto {
        width: 50px;
        height: 50px;
    }
    .div_volver {
        width: 45% !important;
    }
    .redes {
        margin-left: 0px;
    }
    .facebook_typ {
        width: 105% !important;
    }
    .redes {
        margin-left: 60px;
    }
    .todos_proyectos{
        font-size: 13px;
        line-height: 12px;
    }
    .topnav span {
        font-size: 15px;
    }
    .topnav.responsive a {
        width: 77%;
        margin-bottom: -10px;
    }
    
    .topnav a.icon {
        top: 35px;
    }
    .topnav.responsive a.icon {
        top: 23px !important;
    }
    .flecha_proyectos{
        width: 100%;
    }
    .flecha_growth{
        width: 10%;
    }
    .onestop{
        font-size: 9px;
        letter-spacing: 0.25em;
        line-height: 17px;
    }
}  


@media only screen and (max-width: 320px) {
    .agencia_marketing {
        font-size: 35px;
        line-height: 30px;
        position: absolute;
        left: 16%;
        top: 34%;
    }
    .growth_title {
        font-size: 30px;
        margin-left: 100px;
        line-height: 60px;
    }
    .agency_title_movil {
        font-size: 30px;
        margin-left: -24px;
        line-height: 62px;
    }
    .growth_title2 {
        font-size: 30px;
        margin-left: 50px;
        line-height: 60px;
    }
    .partner_title {
        font-size: 30px;
        margin-left: 105px;
        line-height: 67px;
    }
    .growth_title3 {
        font-size: 10px;
        margin-top: 35px;
        margin-left: -40px;
        line-height: 65px;
        position: absolute;
    }
    .hacking_title {
        font-size: 10px;
        margin-top: 29px;
        margin-left: -40px;
        line-height: 65px;
        position: absolute;
    }
    .div_servicios {
        height: 2em;
    }
    .servicios {
    	font-size: 20px;
    	line-height: 0px;
    }
    .flecha {
    	height: 2em;
    }
    .todos_proyectos {
    	font-size: 12px;
    }
    .flecha_proyectos {
    	margin-top: 25% !important;
    }
    .footer_title {
    	font-size: 10px;
    }
    .footer_text1 {
    	font-size: 11px;
    }
    .modal_title {
    	font-size: 15px !important;
    }
    .cargar {
    	font-size: 13px;
    }
    .cargar_btn {
    	width: 7%;
    }
}


.slideUp {
    opacity: 0;
    transform: translateY(30%);
    transition: transform 2s .25s cubic-bezier(0,1,.3,1), opacity .3s .25s ease-out;
    will-change: transform, opacity;
}

.slideUp.is-visible {
    opacity: 1;
    transform: translateY(0%);
}

.transicion {
    visibility: visible;
    animation: slideup 2s, opacity .3s .25s ease-out;
}

@keyframes slideup {
    from { bottom: 30%; transform: translateY(30%); opacity: 0; transition: transform 2s .25s cubic-bezier(0,1,.3,1), opacity .3s .25s ease-out; will-change: transform, opacity;}
    to { top: 0%; transform: translateY(0%); opacity: 1; }
}


_::-webkit-full-page-media, _:future, :root #lottie1_safari {
    display:block !important;
}

_::-webkit-full-page-media, _:future, :root #lottieplayer1 {
    display:none !important;
}

_::-webkit-full-page-media, _:future, :root .agencia_marketing {
    position: absolute;
    top: 25.7%;
    color: rgba(255, 255, 255, 0.07);
}


html::before {
    content:"";
    position:fixed;
    width:100px;
    height:100px;
    background:#000;
    border-radius:50%;
    top:var(--y,0);
    left:var(--x,0);
    transform:translate(-50%,-50%);
    z-index:-2;
}