:root{
    --bgRojo: #d90a2c;
    --bgNegro: #17161a;
    --bgNegroB: #1a191d;
    --clBlanco : #ffffff;
    --transCl: rgba(23,22,26,0.08);
    --paddingNone : 0px 0px;
    --fontSize: calc(1em + (1.5125 - 1) * ((100vw - 20em) / (80 - 20)));
    --lineHeight: calc(1.18em + (1.53 - 1) * ((100vw - 20em) / (80 - 20)));
    --boxedWidth: calc(100vw * 0.8);
    --sectPa: calc(100vh * 0.15) 0;
    --cP: 50%;
    --cT: -50%;
    --fullFont: normal 700 var(--fontSize)/var(--lineHeight) "Space Grotesk Bold", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" ;
    --y:100px;

  }

html *{
    box-sizing: border-box;
}


:is(section, header, main, footer, nav, div){
    position: relative;
}



body{
    background:var(--bgNegro);
    padding:var(--paddingNone);
    margin:var(--paddingNone);
    font-size:var(--fontSize);
    line-height: var(--lineHeight);
    font-family: "Space Grotesk Bold", -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    box-sizing: border-box;
}

i{display:none}

body.icons-loaded{display: inherit;}

body.onEnterMenu{overflow-x:hidden;}

body::-webkit-scrollbar {
  background: rgba(0,0,0,.1);
  width: 1px;
  -webkit-border-radius: 1px;
  border-radius: 1px;
}

body::-webkit-scrollbar-track{
  background:var(--bgNegroB);
}


body::-webkit-scrollbar-thumb{
  background: var(--bgRojo);
  -webkit-border-radius: 1px;
  border-radius: 1px;
}

.fullvhmenu{position:absolute;top:0;overflow:hidden;height:100vh;width:80vw;background:var(--bgNegro);position:absolute;z-index:5;left:-100vw;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;}

article{-webkit-transition:transform 0.5s ease-in-out, filter 1.2s ease-in-out;
  -moz-transition: transform 0.5s ease-in-out, filter 1.2s ease-in-out;
  -o-transition: transform 0.5s ease-in-out, filter 1.2s ease-in-out;
  transition: transform 0.5s ease-in-out, filter 1.2s ease-in-out}
body.onEnterMenu{overflow-x:hidden}
article.onEnterMenu{transform: translate(75vw,0);filter: grayscale(1);}

.global-nav.onEnterMenu{z-index:6;}
.global-nav.onEnterMenu a.button{background:var(--bgRojo)}
.fullvhmenu.onMove{top:0;left:0;}
.fullvhmenu.onEnterMenu{transform:none;}
.the-menu{opacity:0;width:75%;margin-left:auto;left:-75vw;margin-right:auto;padding-left:0;list-style:none;display:table;font-size:150%;font-weight:700;color:#fff;z-index:2;line-height: normal;-webkit-transition:all 2.2s ease-in-out ;-moz-transition:all 2.2s ease-in-out;transition:all 2.2s ease-in-out}
.fullvhmenu.onEnterMenu .the-menu{opacity:1}
/*
article.onEnterMenu{
  transform:scale(0.5)
}*/

/* Perspectiva, pasamos
article.onEnterMenu{
  -webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
margin: 1em;
-webkit-perspective: 1000px;
perspective: 1000px;
/*transform: skewY(100000);
transform: skewY(-10deg) translate(10%,140px);
}*/

header{
    min-height:calc(100vh - 120px);
    background:var(--bgRojo);
    overflow:hidden;
    height:auto;
    position: relative; /* < Safari Bug */
}

.boxed{
    width: var(--boxedWidth);
    margin-left:auto;
    margin-right:auto;
}

.centered{
    position: absolute;
    left: var(--cP);
    top: var(--cP);
    transform: translate(-50%, -50%);
}
img{max-width:100%;height:auto}

a{color:var(--clBlanco);text-decoration:none}

/* Tipo */

h1,h3,h3,h4,h5,h6{
    font: var(--fullFont);
    font-weight: 700;
}
h1{font-size: 175%;color:var(--clBlanco);line-height: 0.89em;}
.zUp{z-index:2}
.toUpper{text-transform: uppercase;}

.inHeaderInfo{padding-bottom:10%}
.infoHeader *{margin:0; color:var(--clBlanco);}

.bigHeaderText{
    font-size: 1650%;
    line-height:0.7em;
    margin:var(--paddingNone);
    padding:var(--paddingNone);
    z-index:0;
    color: var(--transCl);
    width: calc(100vh * 0.8);
}

.centered.bigHeaderText{
    width: calc(var(--cP) * 2.2);
    top: calc(var(--cP) * 1.5);
    left: calc(var(--cP) * 0.8);
    transform-origin: left;
    transform: translate(var(--cT), var(--cT)) rotate(-20deg) ;
    font: normal 900 calc(var(--fontSize) * 14.7)/0.79em "Poppins";
    letter-spacing: 12px; 
}
.onTopHeader{font-size:50%;opacity:0.8}

.marginLeft{margin-left:20px;padding-top:35px}

.infoHeader{padding-right:4%}
.flexbox{display: flex;flex-direction: row;justify-content: space-evenly;align-items: center;}
.button-header{flex:1;text-align: center;}
.play{display:table;width:42px;height:42px;background-color: var(--bgNegro);border-radius:50%;position:relative;top:var(--cP);left:var(--cP);transform:translate(var(--cT),var(--cT));margin-top:10px;animation: zoompulse 1.5s infinite;-webkit-animation: zoompulse 1.5s infinite;-webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 1.5s;
    -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 1.5;
    transition: all cubic-bezier(0.4, 0, 0.2, 1) 1.5s;}
.play i{position:absolute;top:var(--cP);left:var(--cP);transform:translate(var(--cT),var(--cT));margin-left:2px;}
.play:before{content:"";position:absolute;left:-10px;top:-10px;height:62px;width:62px;background:var(--bgNegroB);border-radius:50%;opacity:0.15;animation: pulse 1.5s infinite;-webkit-animation: pulse 1.5s infinite;-webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 1.5s;
    -o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 1.5;
    transition: all cubic-bezier(0.4, 0, 0.2, 1) 1.5s;}

nav{z-index: 2;position: relative;}


nav ul{padding:0;list-style: none;display: flex;flex-direction: row;justify-content: space-evenly;align-items: center;}
.menu{flex:1;text-align: center;}
.burger{text-align: left;}
.button{text-align:right}

nav a{font-size: 80%;}


/* menu */

.burguer label{
    display:flex;
     flex-direction:column;
     width:30px;
     cursor:pointer;
   }
   
   .burguer label span{
     background: #fff;
     border-radius:3px;
     height:2px;
     margin: 2px 0;
     transition: .4s  cubic-bezier(0.68, -0.6, 0.32, 1.6);
   
   }
   
   
   .burguer label span:nth-of-type(1){
     width:50%;
     
   }
   
   .burguer label span:nth-of-type(2){
     width:100%;
   }
   
   
   .burguer label span:nth-of-type(3){
     width:75%;
    
   }
   
   
   .burguer label input[type="checkbox"]{
     display:none;
   }
   
   
   .burguer label input[type="checkbox"]:checked ~ span:nth-of-type(1){
     transform-origin:bottom;
     transform:rotatez(45deg) translate(4px,5px);
     width:100%;
   }
   
   
   .burguer label input[type="checkbox"]:checked ~ span:nth-of-type(2){
     
     transform-origin:top;
     transform:rotatez(-45deg)
   }
   
   
   .burguer label input[type="checkbox"]:checked ~ span:nth-of-type(3){
     
     transform-origin:bottom;
     width:50%;
     opacity:0
   
   }
a.button{background:var(--bgNegro);transition:all 0.3s linear;border:1px solid transparent;padding:10px 15px;font-size:60%;border-radius: 5px;}
a.button:hover{background:var(--bgRojo);border:1px solid #fff}
/* Main */
.metro-grid, nav:not(.footer-nav), .weDo{width:var(--boxedWidth);margin-left:auto;margin-right:auto}
.metro-grid{margin-top:calc((-100vh * 0.15));padding-bottom:calc(100vh * 0.15)}
.flexbox.metro-grid, .flexbox.weDo, .accordionSection .flexbox{display: -webkit-box;display: -moz-box;display: box;display: -webkit-flex;display: -moz-flex;display: -ms-flexbox;display: flex;display: -webkit-box;display: -webkit-flex;
-webkit-flex-direction: row;-ms-flex-direction: row;display: -ms-flexbox;flex-direction: row;flex-wrap: wrap;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;justify-content: flex-start;}
.grid__item{min-height:calc(100vh / 3.5);height:auto;border-radius:5px;background-size:cover;background-position:center center;margin-bottom:20px;background-repeat: no-repeat;filter: grayscale(100%);width:100%;padding:2% 3%;overflow:hidden;-webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.5s;-o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.5;transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.5s;opacity:0;margin-top:120px;transform:scale(0.2)}
.grid__item.toLoadBg{margin-top:0;opacity:1;transform: scale(1);}
.grid__item *, .weDo *, .colGrids *{color:var(--clBlanco)}
.moreDetails{margin-top:-120px;transition:all ease-in-out 0.5s;display: table;border:1px solid var(--clBlanco);padding:0.5vw 1vw;border-radius: 50%;}
.grid__item:hover{transform: scale(1.2);z-index:3;box-shadow:  3px 3px 12px #3a3a3e,3px -3px 12px #46464c;}
.grid__item:hover .bgContrast{background: linear-gradient(145deg,rgba(0,0,0,0.22),rgba(0,0,0,0.12));}
.grid__item:hover .moreDetails{margin-top:0}
.grid__item:hover{filter:none;-webkit-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.5s;-o-transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.5;transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.5s;}
.grid__item .button-wrapper{position:absolute !important;top:var(--cP);left:var(--cP);transform:translate(var(--cT),var(--cT));display: block;}
.grid__item__title{position:absolute;bottom:10%;margin:0;line-height: normal;}
.grid__item__title small{font-weight: 200;font-size:75%}
.bgContrast{z-index:1;width:100%;height:100%;background:linear-gradient(180deg, rgba(23, 22, 26, 0), rgba(23, 22, 26, 0.4));display: block;position: absolute;top:0;left:0}
.roundedCorners{border-radius:5px}
.blackContrast{background-color: var(--bgNegroB);padding:var(--sectPa)}
.weDo div{display:block;width:100%}
.limitWidth{display: block;width:100%;overflow-x: scroll;scrollbar-width:none;-ms-overflow-style: none;}
.limitWidth::-webkit-scrollbar{display:none}
.flexbox.colGrids{display:block;width:100%;display: flex;flex-flow: no-wrap;min-width:calc((100vw * 0.95) * 4);cursor: grab;}
.colGrids__item{background-color:rgba(23,22,26,.55);background-blend-mode:overlay;display:block;width:calc(100vw * 0.95);display:block;display: inline;float:left;background-repeat: no-repeat;background-size: cover;padding: 2% 3%;}
.colGrids__item .toUpper{margin:0;line-height:0.2em;}
.colGrids__item__title{margin-top:0;margin-bottom:calc(100vh / 3.6);line-height:normal;margin-top:20px;font-size:110%}
.smallText{font-size:75%;margin-bottom:0;padding-bottom:0}
.clients .flexbox.weDo{align-items: flex-start;}
.clientsList{list-style: none;padding:0; -moz-column-gap: 40px;column-gap: 40px;-moz-column-count: 4;column-count: 4;margin-top:40px}
.clientList__col{margin-bottom:40px}
:is(.parallax,.parallax-wrapper){position: inherit;}
.parallax-wrapper{overflow: hidden;background-color: var(--bgNegroB);}
.parallax{ background-size: cover;background-position: center;background-blend-mode: overlay;background-color: rgba(0,0,0,0.35);transition: all linear 0.1s;}
.testimonials-wrapper{padding:calc(100vh * 0.55) 30%;margin-left:auto;margin-right:auto;}
.testimonials-wrapper .limitWidth{background:rgba(23,22,26,0.98)}
.secondCol *{color:rgba(255,255,255,.75)}
.blackContrast.special{padding:40px 0 20px 0}
.blackContrast.special h3{margin-top:0}
.blackContrast.special .secondCol{height: 0;}
.accordionSection{width:100%;background-color: var(--bgNegro);}
.accordionSection * {color:#fff}
.accordionSection .flexbox{min-height:calc(100vh * 0.45);background:var(--bgNegroB)}
.image-col{height:100%;width:calc(100vw * 0.55);}
.image-col img{width:100%}
.redCol{background:#d90a2c;padding:80px 0;margin-top:-7px;overflow:hidden;position:relative/* < Safari Bug */}
.redCol *{max-width:calc(100vw * 0.8);margin-left: auto;margin-right:auto}
.redCol .bigHeaderText{transform: scale(0.5) rotate(315deg) translate(65%,-80%);color:var(--transCl);opacity:0.5;position:absolute/* < Safari Bug */}
.redCol h3, .redCol div{position: relative;z-index:2}
.image-col, .redCol{width:100%}
.image-col{position: relative;}
.image-col .button-wrapper{position:absolute;top:50%;left:50%;transform:translate(var(--cT),var(--cT));}
.accordion-title{font-size:90%}
.accordion-toggle{display: block;}
.accordion-content{font-size:85%;opacity:0.75;margin-left:50px;-webkit-transition: all 0.5s ease-in-out ;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.accordion-content:not(.active) {display: none;}
.accordion-content.active{display: block;margin-left:0}
.plyr__controls button{margin-bottom:0}
.plyr__control{background:var(--bgNegro)}
.plyr__control:hover{background: var(--bgRojo) !important;}
.plyr__progress input[type=range], .plyr--full-ui input[type=range]{color:var(--bgRojo)}
.blackContrast.contactus{padding: 40px 0}
.contactus h3{margin-top:0}
.contactus .onTopHeader{margin-bottom:0}
.contactus .secondCol *{color:#fff}
label small, .contactus .weDo .secondCol p.small, button, .copyright p{color:rgba(255,255,255,.75);font-size: 80%;margin-bottom:20px;line-height: normal;}
.contactus .weDo .secondCol p.small{margin-bottom: 40px;}
input[type=select],input[type=text],input[type=tel],input[type=email],select{display:block;width:100%;background-color: rgba(255,255,255,.05);border-radius: 5px;outline: none;padding: 14px 13px;-webkit-appearance: none;-moz-appearance: none;border:0;color:rgba(255,255,255,.55) !important;font-size: 85%;margin:5px 0 10px 0;}
input:invalid {border-color:var(--bgRojo)}
.contactus .weDo .secondCol{margin-top:80px}
.spinner-right{position: relative;overflow:hidden;padding-top:20px}
button{-webkit-appearance: none;-moz-appearance: none;border:0;background: var(--bgRojo);color:#fff;outline:0;padding:15px 25px;border-radius:5px;cursor:pointer}
form button{color:#fff;transition:all 0.3s linear;border:1px solid transparent}
form button:hover{background:var(--bgNegro);border-left:1px solid #fff;border-bottom:1px solid #fff;border-right-color:#3a3a3e;border-top-color: #3a3a3e;}
.footercols{padding: var(--sectPa);width:calc(100% + (40px *3))}
footer{overflow:hidden;position: relative;background:var(--bgNegro)}
footer .bigHeaderText{color:var(--bgNegroB);transform: scale(1.1) rotate(315deg) translate(-45%,-15%);position: absolute;/* < Safari Bug */}
.footer-wrapper{width: var(--boxedWidth);margin-left: auto;margin-right: auto;position:relative;z-index: 2;display: -webkit-box;display: -moz-box;display: box;display: -webkit-flex;display: -moz-flex;display: -ms-flexbox;display: flex;display: -webkit-box;display: -webkit-flex;
  -webkit-flex-direction: row;-ms-flex-direction: row;display: -ms-flexbox;flex-direction: row;flex-wrap: wrap;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;justify-content: space-evenly;}
  .footercol{box-sizing: border-box;padding:4% 0 0 0;width:100%}
  footer .svg-logo{margin:1.33em 0 2.66em 0 ;}
  .footercol p.margins{margin:1.33em 0 2.66em 0 ;}
.footercol *:not(input,button){color:#fff;line-height: normal;}
.footercol h4{font-weight: 600;font-size:80%}
.footercol p{opacity:0.75;font-size:80%}
.copyright{padding:30px 40px;border-top:1px solid rgba(255,255,255,0.1)}

.copyright i{animation: pulse 1.5s infinite;-webkit-animation: pulse 1.5s infinite;color:var(--bgRojo)}
.loader,
.loader:after {
  border-radius: 50%;
  width: 3em;
  height: 3em;
  display: block;
  position: absolute;
  right: 0;
  top: 20px;
}
.loader{
  margin: 20px 0 0;
  font-size: 10px;
  position: absolute;
  text-indent: -9999em;
  border-top: 0.5em solid rgba(217,10,44, 0.2);
  border-right: 0.5em solid rgba(217,10,44, 0.2);
  border-bottom: 0.5em solid rgba(217,10,44, 0.2);
  border-left: 0.5em solid #d90a2c;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
  top: 0;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
   /* animations */
   .play:hover,  .play:hover:before{
    --webkit-animation: none;
  }
  
  @-webkit-keyframes zoompulse {
    0% {
     opacity:1
    }
    75% {
       opacity:0.75
    }
    95% {
        opacity:0.9;
    }
  }

  @-webkit-keyframes pulse {
    0% {
      opacity:0.1;
    }
    50% {
      opacity:0.3;
    }
      75% {
      opacity: 0.2;
    }
  }

  .cursor {
    position: fixed;
    background-color: rgba(255, 255, 255,0.7);
    width: 10px;
    height: 10px;
    border-radius: 100%;
    z-index: 1;
    transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
    user-select: none;
    pointer-events: none;
    z-index: 10000;
    transform: scale(1);
    display: none;
  }
  .cursor.active {
    opacity: 1;
    transform: scale(0);
    display: none;
  }
  .cursor.menu-active {
    opacity: 1;
    transform: scale(0);
  }
  .cursor.hovered {
    opacity: 1;
  }
  
  .cursor-follower {
    position: fixed;
    border: 1px solid rgba(255, 255, 255, 0.7);
    width: 30px;
    height: 30px;
    border-radius: 100%;
    z-index: 1;
    transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) hoverLink;
    user-select: none;
    pointer-events: none;
    z-index: 10000;
    transform: translate(2px, 2px);
    display: none;
  }
  .cursor-follower.active {
    opacity: 1;
    transform: scale(3);
    animation: hoverLink 1.5s infinite;
    
  }
  .cursor-follower.menu-active {
    opacity: 1;
    transform: scale(3);
    
  }
  .cursor-follower.hovered {
    opacity: 1;
    
  }



  @-webkit-keyframes hoverLink {
    0% {
      opacity:1;
      transform:scale(1)
    }
    50% {
      opacity:0.75;
      transform:scale(3)
    }
    100% {
      opacity:1;
      transform:scale(1)
    }
  }
  span.ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 600ms linear;
    background-color: rgba(255, 255, 255, 0.7);
  }

  @keyframes ripple {
    to {
      transform: scale(4);
      opacity: 0;
    }
  }
  
  /* Corregir vista horizontal móvil */
  @media (max-height: 480px) and (orientation: landscape) {
    header{min-height:calc(100vh * 1.2)}
    .grid__item{min-height:calc(100vh - 40px);}
    .grid__item:hover{transform:scale(1)}
}