@font-face {
    font-family: 'HelveticaNeue';
    src: local('HelveticaNeue'),
         url('HelveticaNeue.woff') format('woff'),
         url('HelveticaNeue.ttf') format('truetype'),
         url('HelveticaNeue') format('svg');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'HelveticaNeueBold';
    src: local('HelveticaNeueBold'),
         url('HelveticaNeueBold.woff') format('woff'),
         url('HelveticaNeueBold.ttf') format('truetype'),
         url('HelveticaNeueBold') format('svg');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'HelveticaNeueLight';
    src: local('HelveticaNeueLight'),
         url('HelveticaNeueLight.woff') format('woff'),
         url('HelveticaNeueLight.ttf') format('truetype'),
         url('HelveticaNeueLight') format('svg');
    font-weight: normal;
    font-style: normal;}

@font-face {
    font-family: 'HelveticaNeueMedium';
    src: local('HelveticaNeueMedium'),
         url('HelveticaNeueMedium.woff') format('woff'),
         url('HelveticaNeueMedium.ttf') format('truetype'),
         url('HelveticaNeueMedium') format('svg');
    font-weight: normal;
    font-style: normal;}

@font-face {
  font-family: Mackling-italink;
  src: url('/misc/fonts/Monotype-MacklinDisplay-Bold-Italic.otf');
  /*src: url('/misc/fonts/Monotype-MacklinDisplay-Bold-Italic') format('otf');*/
}

@font-face {
  font-family: Mackling-bold;
  src: url('/misc/fonts/Monotype-Macklin-Display-Bold.otf');
  /*src: url('/misc/fonts/Monotype-Macklin-Display-Bold') format('otf');*/
}


h1, h2, h3, h4{
    font-family: 'HelveticaNeueBold', Helvetica, Arial, sans-serif;}


.container-fluid{
    padding-right: 0px;
    padding-left: 0px;}

html, body {
    height: 100%;
    margin: 0;}


/* Video Overlay */

#player, .fallback, body, html, iframe{
    overflow: visible;}

iframe{
    height: 100vh;
    width: 100vw;
    display: block;
    position: fixed;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    border: none;
    margin: 0;
    padding: 0;
    margin-top: -5%;}

/*#overlay {
height:84%;
background-color:rgba(0,0,0,.65);
left:0;
position:relative;
top:0;
transition:background-color 300ms ease;
width:100%;}*/

/* Hero Video + Fallback */

.video {
  width:100%; 
  height:100vh;
}

.g10-banner {
  width:100%; 
  height:100vh; 
  bottom: 0;
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  padding-top: 70vh;
  /*background-image: url('/misc/img/site/fondo_G10.jpg'); 
  background-size:cover; 
  background-position:top center;
  background-repeat:no-repeat;*/
}

.g10log {
  width:100px;
  margin-top:10%;
  margin-left:10%;
}

.padText{
  padding-left:5%;
}

.g10-banner-text{
  font-family:Mackling-italink;
  font-size:40px;
  color:#fff;
  margin-top:40%;
  line-height:35px;
}

.g10-banner-text strong {
  font-family:Mackling-bold;
   color:#cbcf2d;
}

.g10-button {
  padding:10px;
  background:#cbcf2d;
  color:#fff;
  margin-right:20px;
  border-radius:5px;
  border:0;
}

.vidma {
      margin-left:5%;
}

#hero-vid{
bottom:0;
position:fixed;
right:0;
left: 0;
top: 0;
margin: auto;
/*margin-left: -5%;*/
width: 100%;
background: #232323;
cursor: pointer;}


#hero-pic {
display:block;
height:auto;
width:100%;}

#state {
bottom:0;
cursor:pointer;
font-size:2.25rem;
left:0;
line-height:1;
padding:2rem 2.5rem 1.65rem;
position:absolute;}

#content {
    background-color: #fff;
    position: relative;
    z-index: 1000;
    margin-top: 55%;}

/*.vid-warpper {
            width: 100vw;
            height: 100vh;
            overflow:hidden;
        }*/
        
        #mute-video {
            position: fixed; 
            width: 40px; 
            height: 40px; 
            background-color: darkseagreen; 
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: white; 
            font-size: 20px;
            text-align: center;
            bottom: 3rem; 
            right: 3rem; 
            border-radius: 90px;
            z-index: 10; 
            cursor: pointer;
        }
        
        #mute-video:hover {
            background-color: yellowgreen;
        }
        
.landing {
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: #232323;
        }

.viewmobs {
  display:none;
}

/* Media Queries */

@media only screen and (max-width:768px) {
    #overlay { height:auto; }
}


/* Visibility Helpers */

@media only screen and (min-width:769px) {
    .visible-mobile,.visible-tablet,.hidden-desktop { display:none !important; }
}

@media only screen and (min-width:480px) and (max-width:768px) {
    .visible-mobile,.hidden-tablet,.visible-desktop { display:none !important; }
}

@media only screen and (max-width:479px) {
    .hidden-mobile,.visible-tablet,.visible-desktop { display:none !important; }
}

/*
 * Custom styles
 */
.navbar-brand {
    font-size: 24px;}

.navbar-container {
    padding: 20px 0 20px 0;}

.navbar.navbar-fixed-top.fixed-theme {
    background-color: #343434;
    border-color: transparent;
    box-shadow: 0 0 5px rgba(0,0,0,.8);
    padding-top: 1%;}


.navbar-brand.fixed-theme {
    font-size: 18px;}

.navbar-container.fixed-theme {
    padding: 0;}

.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
    background: transparent;}

.navbar-brand.fixed-theme,
.navbar-container.fixed-theme,
.navbar.navbar-fixed-top.fixed-theme,
.navbar-brand,
.navbar-container{
    transition: 0.8s;
    -webkit-transition:  0.8s;}

.navbar.navbar-fixed-top.fixed-theme #logo{
    margin-top: 10px;
    margin-bottom: 7px;}

.navbar.navbar-fixed-top.fixed-theme .foco{
    width: 80%;}

.navbar.navbar-fixed-top.fixed-theme.white{
    background-color: #fff;}

#logo{
    margin-top: 2%;}

#menu{
    background-color: #343434;
    height: 1500px;
    transition: 2.8s;
    -webkit-transition:  2.8s;}

.mega{
    position: absolute;
    margin-top: 12%;}

.mega h1{
    color: rgba(75, 75, 84, 0.2);
    font-size: 47rem;}

.burguer{
    color: #fff;
    cursor: pointer;
    float: right;}

.burguer i {
    margin-top: 8%;}

.burguer > i:hover,
.burguer > i:focus,
.burguer > i:active{
    color: #cbcf2d;}

.burguer2{
    color: #343434;
    cursor: pointer;}

.burguer2 i {
    margin-top: 8%;}

.burguer2 > i:hover,
.burguer2 > i:focus,
.burguer2 > i:active{
    color: #cbcf2d;}

.cross {
    color: #fff;
    font-size: 26px;
    font-weight: bold;}

.cross:hover,
.cross:focus,
.cross:active{
    color: #cbcf2d;
    text-decoration: none;}

.navbar.navbar-fixed-top.fixed-theme .burguer i {
    margin-top: 7px;}

.smedia{
    padding: 0px;}

.smedia li{
    display: inline;}

.smedia li a {
    color: #fff;}

.smedia li a:hover,
.smedia li a:active,
.smedia li a:focus{
    color: #ccd02d;}

.smedia li i{
    font-size: 43px;
    margin-right: 36px;
    margin-top: 16px;}

.cruz{
    text-align: right;}

/******** PARALLAX *********/

.parallax {
    min-height: 1100px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;    
    background-image: url("fondos/Generador%20Estudio%202018.mp4");}

.parallax1 {
    min-height: 300px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;    
    background-image: url("fondos/parallax1.jpg");}

.parallax2 {
    min-height: 300px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;    
    background-image: url("fondos/parallax2.jpg");}

.parallax3 {
    min-height: 300px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;    
    background-image: url("fondos/parallax5.jpg");}

.parallax4 {
    min-height: 300px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;    
    background-image: url("fondos/parallax4.jpg");}

.parallax5 {
    min-height: 300px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;    
    background-image: url("fondos/parallax1.jpg");}



/**********/

.interior{
        padding-top: 11%;}

.interior > ul > li{
    list-style: none;
    padding: 8px;}

.interior > ul > li > a{
    color: #fff;
    text-decoration: none;
    font-family: 'HelveticaNeueBold', Helvetica, Arial, sans-serif;
    font-size: 36px;}

.interior > ul > li > a:hover, 
.interior > ul > li > a:focus,
.interior > ul > li > a:active{
    color: #cbcf2d !important;
    border-bottom: 1px solid;
    padding-bottom: 4px;}

.interior > ul{
    padding-left: 8%;
    position: absolute;}

#portfolio-container{
    padding-top: 30px;
    padding-bottom: 10%;
    background: #e8e8e8;}

.toolbar{
    padding-bottom: 25px;
    padding-top: 20px;}

/*#portfolio-container .active {
    background-color: #cbcf2d !important;}*/

.porta{
    font-family: 'HelveticaNeueBold', Helvetica, Arial, sans-serif;
    color: #343434;}

#portfolio-container .tile { 
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease;}

#portfolio-container .scale-anm {
  transform: scale(1);}


#portfolio-container .tile img {
    max-width: 100%;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;}

#portfolio-container .btn {
    font-size: 19px;
    font-weight: normal;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    line-height: normal;
    padding: 5px 10px;
    margin: 0;
    height: auto;
    border: none;
    vertical-align: middle;
    -webkit-appearance: none;
    color: #3c3c3b;
    background-color: rgba(0, 0, 0, 0);
    font-family: 'HelveticaNeueLight', Helvetica, Arial, sans-serif;}

#portfolio-container .btn:hover {
    text-decoration: underline;
    background-color:transparent;}

#portfolio-container .btn:focus {
  outline: none;
  border-color: var(--darken-2);
  box-shadow: 0 0 0 3px var(--darken-3);}
/*Portfolio===============================*/


#portfolio-container .active {
   background-color:#cbcf2d;
    color:#fff;
    outline: 0;
    box-shadow: none; }

#portfolio-container .active:active{
   background-color:#cbcf2d;
    color:#fff;
    outline: 0;
    box-shadow: none; }

.one{
    margin-top: 10px;}

.one > div:first-child{
    padding-left: 0px;
    padding-right: 4px;}

.one > div:nth-child(2){
    padding-left: 6px;
    padding-right: 0px;}

.one > div:nth-child(2) > div:first-child{
    padding: 0px;
    padding-bottom: 5px;}

.one > div:nth-child(2) > div:nth-child(2){
    padding: 0px;
    padding-top: 5px;}

.one > div:nth-child(2) > div > div:first-child{
    padding-right: 5px;
    padding-left: 0px;}

.one > div:nth-child(2) > div > div:nth-child(2){
    padding-right: 0px;
    padding-left: 5px;}

.one > div > img,
.one > div > div > div > img{
    cursor: pointer;}

.two{
    margin-top: 10px;}

.two > div:first-child{
    padding-right: 8px;
    padding-left: 0px;}

.two > div:first-child > div:first-child,
.two > div:nth-child(3) > div:first-child{
    padding: 0px;
    padding-bottom: 5px;}

.two > div:first-child > div:nth-child(2),
.two > div:nth-child(3) > div:nth-child(2){
    padding: 0px;
    padding-top: 5px;}

.two > div:nth-child(2){
    padding-left: 2px;
    padding-right: 2px;}

.two > div:nth-child(3){
    padding-left: 8px;
    padding-right: 0px;}

.two > div > img,
.two > div > div > img{
    cursor: pointer;}

.zero{
    padding: 0px;}

.space{
    padding-top: 12%;
    padding-bottom: 20%;}

.call{
    color: #ccd02d;
    font-size: 38px;
    line-height: 1.2;
    margin-top: -5%;}

.explain p{
    font-family: 'HelveticaNeue', Helvetica, Arial, sans-serif;
    font-size: 25px;
    line-height: 1.3;
    margin-bottom: 25px;
    color: #3c3c3b;}

.top{
    margin-top: 5%;}

.btn-gene{
    border: 1px solid transparent;
    border-radius: 15px;
    color: #fff;
    background-color: #ccd02d;
    border-color: transparent;
    margin-right: 30px;
    text-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;}

.btn-gene a {
    color: #fff;}

.btn-gene a:hover,
.btn-gene a:focus,
.btn-gene a:active{
    text-decoration: none;}

.btn-gene:hover, .btn-gene:focus, .btn-gene:active{
    background-color: #3c3c3b;  
    color: #fff;}

.btn-gene2{
    border-radius: 15px;
    color: #3c3c3b;
    background-color: #fff;
    border-color: #ccd12c;
    margin-right: 30px;
    text-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;}

.btn-gene2 > a{
    color: #3c3c3b;}

.btn-gene2:hover, .btn-gene2:focus, .btn-gene2:active{
    background-color: #3c3c3b;  
    color: #fff;
    border-color: transparent;}

.btn-gene2:hover > a, .btn-gene2:focus > a, .btn-gene2:active > a{
    color: #fff;
    text-decoration: none;}

.servicios{
    padding-top: 9%;
    padding-bottom: 10%;}

.found{
    font-size: 36px;
    margin-bottom: 15%;}

.servs > li{
    list-style: none;
    margin-bottom: 5px;}

.servs > li > a{
    color: #3c3c3b;
    font-size: 20px;}

.servs > li > a:focus, 
.servs > li > a:hover, 
.servs > li > a:active{
    text-decoration: none;}

.cip > a{
    color: #ccd02d !important;}

.soon{
    cursor: pointer;}

.soon > a{
    color: #3c3c3b;
    font-size: 20px;}

.soon2{
    cursor: pointer;}

.soon2 > a{
    color: #ccd02d !important;
    font-size: 20px;}


.iconos{
    margin-top: 7%;
    margin-bottom: 6%;}

.iconos > li{
    display: inline;
    margin-right: 20px;}

.iconos img{
    width: 10%;}

#informe{
    margin-top: 8%;
    border: 1px solid #ccd02d;
    padding-top: 4%;
    padding-bottom: 5%;
    height: 275px;
    max-height: 275px;}

#informe:after {
  border-right: 10px solid #fff;}

#informe:before {
  border-right: 10px solid #ccc;}

#informe:after {
  content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-right: 10px solid white;
    position: absolute;
    top: 80px;
    margin-top: 1px;
    left: 6px;
    z-index: 3;}

#informe:before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-right: 10px solid rgb(203, 207, 45);
    position: absolute;
    top: 98px;
    margin-top: -17px;
    margin-left: 17px;
    left: -12px;
    z-index: 3;}

/*********/

#mkt{
    margin-top: 8%;
    border: 1px solid #ccd02d;
    padding-top: 4%;
    padding-bottom: 5%;
    height: 275px;
    max-height: 275px;}

#mkt:after {
  border-right: 10px solid #fff;}

#mkt:before {
  border-right: 10px solid #ccc;}

#mkt:after {
  content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-right: 10px solid white;
    position: absolute;
    top: 121px;
    margin-top: 1px;
    left: 6px;
    z-index: 3;}

#mkt:before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-right: 10px solid rgb(203, 207, 45);
    position: absolute;
    top: 139px;
    margin-top: -17px;
    margin-left: 17px;
    left: -12px;
    z-index: 3;}

/*********/

#brand{
    margin-top: 8%;
    border: 1px solid #ccd02d;
    padding-top: 4%;
    padding-bottom: 5%;
    height: 275px;
    max-height: 275px;}

#brand:after {
  border-right: 10px solid #fff;}

#brand:before {
  border-right: 10px solid #ccc;}

#brand:after {
  content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-right: 10px solid white;
    position: absolute;
    top: 154px;
    margin-top: 1px;
    left: 6px;
    z-index: 3;}

#brand:before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-right: 10px solid rgb(203, 207, 45);
    position: absolute;
    top: 172px;
    margin-top: -17px;
    margin-left: 17px;
    left: -12px;
    z-index: 3;}


/*********/

#expe{
    margin-top: 8%;
    border: 1px solid #ccd02d;
    padding-top: 4%;
    padding-bottom: 5%;
    height: 275px;
    max-height: 275px;}

#expe:after {
  border-right: 10px solid #fff;}

#expe:before {
  border-right: 10px solid #ccc;}

#expe:after {
  content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-right: 10px solid white;
    position: absolute;
    top: 186px;
    margin-top: 1px;
    left: 6px;
    z-index: 3;}

#expe:before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-right: 10px solid rgb(203, 207, 45);
    position: absolute;
    top: 204px;
    margin-top: -17px;
    margin-left: 17px;
    left: -12px;
    z-index: 3;}

/*********/

#medios{
    margin-top: 8%;
    border: 1px solid #ccd02d;
    padding-top: 4%;
    padding-bottom: 5%;
    height: 275px;
    max-height: 275px;}

#medios:after {
  border-right: 10px solid #fff;}

#medios:before {
  border-right: 10px solid #ccc;}

#medios:after {
  content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-right: 10px solid white;
    position: absolute;
    top: 221px;
    margin-top: 1px;
    left: 6px;
    z-index: 3;}

#medios:before {
    content: " ";
    display: block;
    width: 0;
    height: 0;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    border-right: 10px solid rgb(203, 207, 45);
    position: absolute;
    top: 239px;
    margin-top: -17px;
    margin-left: 17px;
    left: -12px;
    z-index: 3;}

.tab-content > div > ul > li{
    list-style: none;
    font-size: 16px;
    margin-bottom: 5px;}


.clients{
    background-color: #333333;
    padding-top: 5%;
    padding-bottom: 5%;}

.our{
    color: #ccd02d;}

.minis{
    margin-top: 3%;}

.lg{
    margin: auto;
    margin-bottom: 15px;
    display: block;
    text-align: center;
    padding: 0;
}

.lg > li{
    display: inline;
    margin-left: 1.5em;
    margin-right: 1.5em;}

.lg > li > img{
    width: 120px;}

.door{
    padding-top: 10%;
    padding-bottom: 10%;
    background-color: rgba(52, 52, 52, 0.6);}

.retos{
    color: #fff;
    font-size: 60px;
    text-align: center;}

.open{
    margin-bottom: 3%;
    color: #ccd02d;
    padding-top: 5%;}

.generadores{
    margin-bottom: 2%;}

.puesto{
    font-size: 14px;
    margin-top: 0px;}

.name{
    margin-bottom: 0px;
    font-size: 20px;
    color: #ccd02d;
    margin-top: 15px;}

.bio{
    font-size: 12px;
    padding-right: 35px;}

.retratoscontover {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.retratos{
    filter: grayscale();
    transition: 1.8s all ease-in-out;
      -webkit-transition: all 1.8s ease-in-out;
    cursor: pointer;}

.retratos:hover {
    transform: scale(1.2);
}

/***** CARRUSEL PORTAFOLIO **********/

.titulo-in{
    padding-top: 8%;
    padding-bottom: 0%;
    padding-left: 0px;}

.titulo-in > h3{
    color: #ccd02d;
    font-size: 47px;
    margin-top: 0px;}

.titulo-in > h4{
    font-size: 24px;
    margin-top: 0%;
    color: #343434;}

.photos{
    margin-top: 3%;}

.m-photo{
    margin-bottom: 5%;}

.m-photo img{
    margin: auto;}

.description{
    font-size: 16px;
    margin-bottom: 0%;
    color: #343434;}

.description1{
    margin-bottom: 3%;
    font-size: 16px;
    color: #343434;}

.pages{
    color: #343434;
    font-family: 'HelveticaNeueBold', Helvetica, Arial, sans-serif;}

.pages:hover,
.pages:focus,
.pages:active{
    color: #343434;}

/******* CARRUSEL PREMIOS ******/

.historia{
    padding-top: 5%;
    padding-bottom: 5%;}

.tell{
    margin-bottom: 3%;}

.tell h1{
    color: #ccd02d;}

/* carousel */
.media-carousel {
  margin-bottom: 0;
  padding: 0 40px 30px 40px;}

.media-carousel .carousel-control.left {
  left: 0;
  background-image: none;
  background: none;
  border: none;
  border-radius: none;
  height: 40px;
  width : 40px;}

.media-carousel .carousel-control.right {
  right: 0;
  background-image: none;
  background: none;
  border: none;
  border-radius: none;
  height: 40px;
  width : 40px;}

.media-carousel .carousel-control:hover,
.media-carousel .carousel-control:focus,
.media-carousel .carousel-control:active{
    color: #ccd02d;
}

.media-carousel .carousel-indicators {
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;}

.media-carousel .carousel-indicators li {
  background: #c0c0c0;}

.media-carousel .carousel-indicators .active {
  background: #333333;}

.thumbnail {
    background-color: transparent;
    border: none;
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-bottom: 0px;}*/

.middle{
    margin-top: 3%;}

.text{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    padding-left: 12%;
    padding-right: 12%;
    margin-top: -5%;}

.which{
    padding-left: 0px;
    margin-top: 10%;}

.which li{
    display: inline;
    margin-right: 5%;}

.which li img{
    width: 31%;}

/*.four{
    width: 19% !important;}*/

.other{
    width: 15%;
    margin: auto;
    display: block;}

.award{
    height: 400px;}

.award img{
    cursor: pointer;}

/***** CARRUSEL GALERÍA **********/

.modal.in .modal-dialog{
    width: 100%;
    margin: 0px;}

.carousel-indicators {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  width: 60%;
  z-index: 15;
  margin: 0;
  padding: 0 25px 25px 0;
  text-align: right;}

.carousel-control{
    top: 45%;
    color: #3d3c3b;
    text-shadow: none;
    opacity: 1;}

.section-black {
    background-color: #3d3c3b;
    color: #555;
    padding-top: 0% !important;
    padding-left: 0% !important;
    padding-right: 0% !important;
    height: 1100px;
    background-attachment: fixed;}

.bloque{
    margin-top: 40%;
    color: #fff;}

.old-school{
    font-style: italic;}

#gallery .carousel-inner .item img{
    margin: auto;
    width: 700px;}

#gallery2 .carousel-inner .item img{
    margin: auto;
    width: 700px;}

#gallery3 .carousel-inner .item img{
    margin: auto;
    width: 700px;}

#gallery4 .carousel-inner .item img{
    margin: auto;
    width: 700px;}

#gallery5 .carousel-inner .item img{
    margin: auto;
    width: 700px;}

#gallery6 .carousel-inner .item img{
    margin: auto;
    width: 700px;}

#gallery7 .carousel-inner .item img{
    margin: auto;
    width: 700px;}

#gallery8 .carousel-inner .item img{
    margin: auto;
    width: 700px;}

#gallery9 .carousel-inner .item img{
    margin: auto;
    width: 700px;}

#gallery10 .carousel-inner .item img{
    margin: auto;
    width: 700px;}

#gallery11 .carousel-inner .item img{
    margin: auto;
    width: 700px;}

#gallery12 .carousel-inner .item img{
    margin: auto;
    width: 700px;}

.contenedor{
    padding-top: 4%;
    margin-top: 2%;}

.modal-backdrop.in{
    position: initial;}

.abajo {
    padding: 0px;}

.puesto2{
    font-size: 18px;
    margin-top: 0px;
    margin-bottom: 0px;}

.name2{
    margin-bottom: 0px;
    font-size: 30px;
    color: #ccd02d;
    margin-top: 15px;}

.bio2{
    font-size: 14px;
    padding-right: 35px;}

.woods{
    margin-top: 6px;
    margin-bottom: 20px;
    opacity: 0.2;
    margin-right: 10%;}

.cierre{
    font-size: 21px;
    font-weight: 500;
    color: #fff;
    text-shadow: none;
    opacity: .6;
    margin-top: 2%;}

.cierre:hover,
.cierre:active,
.cierre:focus{
    color: #ccd02d;
    opacity: 1;}

.bubble{
    padding: 0px;}

.bubble .carousel-control.right{
    background-image: none;
    background-image: none;
    background-image: none;
    background-image: none;}

.bubble .carousel-control.left{
    background-image: none;
    background-image: none;
    background-image: none;
    background-image: none;}

/*++************ FOOTER *************/
.footer{
    background: #343434;
    position: relative;}

.form-control {
    color: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 2px;
    opacity: 0.6;
    background-color: transparent;}

.form-horizontal .control-label{
    font-weight: 200;}

.forma{
    color: #fff;
    padding-top: 3%;
    padding-bottom: 10%;}

.contacto{
    padding-top: 8%;}

.contacto > h2{
    color: #fff;}

.datos{
    border-left: 1px solid #9e9e9e;
    padding-left: 5%;
    font-weight: 200;}

.mto > a{
    color: #fff;}

.btn-send {
    color: #fff;
    background-color: transparent;
    border-color: #9e9e9e;
    text-shadow: none;
    font-weight: 200;
    border-radius: 2px;
    box-shadow: none;
    text-shadow: none;}

.btn-send:hover, .btn-send:focus, .btn-active {
    color: #343434;
    background-color: #ccd02d;
    border-color: #343434;}

.social{
    padding: 0px;}

.social li{
    display: inline;}

.social li a {
    color: #fff;}

.social li a:hover,
.social li a:active,
.social li a:focus{
    color: #ccd02d;}

.social li i{
    font-size: 25px;
    margin-right: 10px;
    margin-top: 16px;}


/************** AGENCY LIFE SECTION***************/

#agency .tile { 
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease;}

#agency .scale-anm {
  transform: scale(1);}


#agency .tile img {
    max-width: 100%;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;}

#agency{
    padding-top: 6%;
padding-bottom: 5%;}

.life{
    padding-left: 10%;
    margin-bottom: 1%;}

.life h1 {
   color: #343434;}

.life span {
   font-family: 'HelveticaNeueLight', Helvetica, Arial, sans-serif;
    color: #ccd02d;} 

/*********** MANIFESTUM *********/

#container {
  overflow-y:scroll;
  overflow-x:hidden;
  transform: rotate(270deg) translateX(-100%);
  transform-origin: top left;
  background-color:#999;
  position:absolute;
  width:100vh;
  height:100vw;
}
#container2 {
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  white-space:nowrap;
  /*font-size:0;*/
}

/*.manifiesto{
    overflow: auto;
    white-space: nowrap;}*/

.manifiesto > div{
    display: inline-block;
   margin-left: -4px;}

.manifiesto > div > div{
    padding: 0px;
    height: 100vw;}

.manifiesto > div > div > img{
    height: 58%;}

.mani1, 
.mani2, 
.mani3,
.mani5,
.mani7,
.mani8{
    width: 100vh;
    height: 100vw;}

.mani1, 
.mani7{
    background-color: #333333;}

.mani2, 
.mani8{
    background-color: #B0CF3E;}

.mani3{
    background-color: #E6E6E6;}

.mani4{
    background-color: #efeff1;
    width: 75vh;
    height: 100vw;}

.mani5, 
.mani6{
    background-color: #B3B3B3;}

.primero,
.dreams,
.stop{
    padding-top: 35%;
    padding-left: 15%;}

.primero > p:first-child{
    color: #B0CF3E;
    font-size: 3rem;
    font-family: "HelveticaNeueBold", Helvetica, Arial, sans-serif;
    margin-bottom: 0px;}

.primero > p:nth-child(2){
    color: #fff;
    font-family: 'HelveticaNeueLight', Helvetica, Arial, sans-serif;
    font-size: 5rem;
    line-height: 1.15;}

.dreams > p:nth-child(2){
    color: #fff;
    font-size: 8rem;
    font-family: "HelveticaNeueBold", Helvetica, Arial, sans-serif;
    line-height: 0.9;}

.dreams > p:first-child,
.stop > p:first-child,
.believe > p:first-child,
.stop > p:nth-child(2){
    color: #333333;}

.detalle > p:first-child,
.smile > div > p:nth-child(2),
.alone > p:first-child,
.alone > p:nth-child(2){
    color: #fff;}

.dreams > p:first-child,
.stop > p:first-child,
.detalle > p:nth-child(2),
.alone > p:nth-child(2),
.believe > p:nth-child(2),
.smile > div > p:first-child{
    font-family: 'HelveticaNeueLight', Helvetica, Arial, sans-serif;
    font-size: 3rem;
    margin-bottom: 0px;}

.believe > p:first-child,
.stop > p:nth-child(2),
.detalle > p:first-child,
.smile > div > p:nth-child(2),
.alone > p:first-child{
    font-size: 6rem;
    font-family: "HelveticaNeueBold", Helvetica, Arial, sans-serif;
    line-height: 1;}

.believe{
    padding-top: 51%;
    margin-left: -12%;}

.alone {
    padding-top: 12%;}

.detalle{
    padding-top: 39%;
    color: #fff;
    padding-left: 18%;}

.smile{
    padding-top: 25% !important;
    padding-left: 8% !important;}

.mani5 > div:first-child{
    padding-top: 26%;
    margin-left: 10%;}

.smile > div:nth-child(2){
    margin-top: 11%;
    margin-left: 7%;
    z-index: 100;}

.arrow {
    text-align: center;
    margin: 8% 0;
    color: #fff;
    margin-top: 22%;
    font-size: 5rem;}

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;}

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


.left-in{
  animation: animationFrames linear 4s;
  animation-iteration-count: 1;
animation-delay: 9500s ;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animationFrames linear 2s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: animationFrames linear 2s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: animationFrames linear 2s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: animationFrames linear 2s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/

}

@keyframes animationFrames{
  0% {
    opacity:0.05;
    transform:  translate(-91px,0px)  ;
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px)  ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    opacity:0.05;
    -moz-transform:  translate(-91px,0px)  ;
  }
  100% {
    opacity:1;
    -moz-transform:  translate(0px,0px)  ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    opacity:0.05;
    -webkit-transform:  translate(-91px,0px)  ;
  }
  100% {
    opacity:1;
    -webkit-transform:  translate(0px,0px)  ;
  }
}

@-o-keyframes animationFrames {
  0% {
    opacity:0.05;
    -o-transform:  translate(-91px,0px)  ;
  }
  100% {
    opacity:1;
    -o-transform:  translate(0px,0px)  ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    opacity:0.05;
    -ms-transform:  translate(-91px,0px)  ;
  }
  100% {
    opacity:1;
    -ms-transform:  translate(0px,0px)  ;
  }
}

/**********/

.backo{
    background: #fff;}

.backo .modal-header{
    position: sticky;
    position: -webkit-sticky;
    z-index: 2000;
    border-bottom: none;
    top: 14%;}

.luck{
    margin-left: 6%;}

.luck .close {
    opacity: .6;}

/********** AGENCY LIFE **********/

.agency > div{
    display: inline-block;
   margin-left: -4px;}

.collage{
    padding: 0px;
    height: 100vw;
    width: 70vw;}

.collage > div{
    padding: 0px;}

.arrow2 {
    text-align: center;
    margin: 8% 0;
    color: #fff;
    margin-top: 12%;
    font-size: 5rem;}

.alife > p > span{
    font-family: 'HelveticaNeueBold', Helvetica, Arial, sans-serif;}

.alife > p:first-child{
    color: #B0CF3E;
    font-size: 3rem;
    font-family: "HelveticaNeueBold", Helvetica, Arial, sans-serif;
    margin-bottom: 0px;}

.alife > p:nth-child(2){
    color: #fff;
    font-family: 'HelveticaNeueLight', Helvetica, Arial, sans-serif;
    font-size: 5rem;
    line-height: 1.27;}

.alife > p:nth-child(3){
    color: #fff;
    font-family: 'HelveticaNeueLight', Helvetica, Arial, sans-serif;
    font-size: 2rem;
    font-style: italic;}

.alife{
    padding-top: 35%;
    padding-left: 15%;}

.alife,
.create,
.imagine{
    padding-top: 50%;
    padding-left: 10%;}

.details{
    padding-top: 55%;
    padding-left: 10%;}

.made,
.better{
    padding-top: 55%;
    padding-left: 5%;}

.sabor{
    padding-top: 55%;
    padding-left: 15%;}

.details > p:first-child{
    font-family: 'HelveticaNeueLight', Helvetica, Arial, sans-serif;
    font-size: 3rem;
    margin-bottom: 0px;
    color: #333333;
    line-height: 1.02;}

.details > p:nth-child(2){
    color: #fff;
    font-size: 8rem;
    font-family: "HelveticaNeueBold", Helvetica, Arial, sans-serif;
    line-height: 0.9;}

.details > p:nth-child(3){
    font-family: 'HelveticaNeueLight', Helvetica, Arial, sans-serif;
    font-size: 2rem;
    font-style: italic;}

.create{
    color: #333333;}

.create > p:first-child{
    font-size: 6rem;
    font-family: "HelveticaNeueBold", Helvetica, Arial, sans-serif;
    line-height: 1.2;}

.create > p > span{
    font-family: 'HelveticaNeueLight', Helvetica, Arial, sans-serif;
    background-color: #B0CF3E;
    color: #fff;}

.create > p:nth-child(2){
    font-family: 'HelveticaNeueLight', Helvetica, Arial, sans-serif;
    font-size: 2rem;
    margin-bottom: 0px;
    font-style: italic;}

.imagine > p:first-child{
    font-size: 8rem;
    font-family: "HelveticaNeueBold", Helvetica, Arial, sans-serif;
    color: #B0CF3E;
    line-height: 1;
    margin-bottom: 0px;}

.imagine > p:nth-child(2){
    color: #fff;
    font-size: 4.5rem;
    font-family: "HelveticaNeueLight", Helvetica, Arial, sans-serif;
    margin-bottom: 2rem;
    line-height: 1.05;}

.imagine > p:nth-child(3){
    font-family: 'HelveticaNeueLight', Helvetica, Arial, sans-serif;
    font-size: 2rem;
    margin-bottom: 0px;
    font-style: italic;
    color: #fff;}

.made > p:first-child,
.made > p:nth-child(2){
    font-family: 'HelveticaNeueLight', Helvetica, Arial, sans-serif;
    font-size: 3rem;
    margin-bottom: 15px;
    color: #333333;}

.made > p > span{
    color: #fff;
    font-size: 8rem;
    font-family: "HelveticaNeueBold", Helvetica, Arial, sans-serif;
    line-height: 0.9;
    background-color: #B0CF3E;}

.queen{
    color: #333333 !important;
    background-color: transparent !important;}

.made > p:nth-child(3){
    font-family: 'HelveticaNeueLight', Helvetica, Arial, sans-serif;
    font-size: 2rem;
    margin-bottom: 0px;
    font-style: italic;
    margin-top: 3.8rem;}

.better > p:first-child{
    font-family: 'HelveticaNeueLight', Helvetica, Arial, sans-serif;
    font-size: 7rem;
    margin-bottom: 2rem;
    color: #333;
    line-height: 1.05;}

.better > p:nth-child(2){
    font-family: 'HelveticaNeueLight', Helvetica, Arial, sans-serif;
    font-size: 2rem;
    margin-bottom: 0px;
    font-style: italic;}

.better > p > span{
    font-family: 'HelveticaNeueBold', Helvetica, Arial, sans-serif;
    color: #fff}

.sabor > p{
    font-family: 'HelveticaNeueLight', Helvetica, Arial, sans-serif;
    color: #fff;
    font-size: 5rem;
    line-height: 1;}

.dde{
    font-family: 'HelveticaNeueBold', Helvetica, Arial, sans-serif;
    color: #fff;
    font-size: 6rem;}

.chab{
    font-family: 'Cookie', cursive;
    line-height: 0.7;
    font-size: 14rem;
    color: #B0CF3E;}

.nope{
    padding: 0px;}

.age1, 
.age2, 
.age3{
    width: 80vh;
    height: 100vw;}

.age1{
    background-color: #333333;}

.age2{
    background-color: #B0CF3E;}

.age3{
    background-color: #E6E6E6;}

/*********** botones modal *********/
.btn-next{
    border: 1px solid transparent;
    border-radius: 15px;
    color: #fff;
    background-color: #ccd02d;
    border-color: transparent;
    margin-right: 30px;
    text-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;}

.btn-next a {
    color: #fff;}

.btn-next a:hover,
.btn-next a:focus,
.btn-next a:active{
    text-decoration: none;}

.btn-next:hover,
.btn-next:focus, 
.btn-next:active{
    background-color: #3c3c3b;  
    color: #fff;}

.btn-next2{
    border-radius: 15px;
    color: #fff;
    background-color: #3c3c3b;
    text-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;}

.btn-next2 > a{
    color: #fff;}

.btn-next2:hover, 
.btn-next2:active{
    background-color: #3c3c3b;  
    color: #fff;
    border-color: transparent;}

.btn-next2:hover > a, 
.btn-next2:focus > a, 
.btn-next2:active > a{
    color: #fff;
    text-decoration: none;}

.m-photo video{
    width: 100%;}


/***************** MEDIA QUERIES ***************/




@media screen and (max-width: 1440px) {
    
    .derecho{
        padding-right: 14%;}
    
    .section-white {
    padding-top: 2% !important;}
    
    .manifiesto > div > div > img{
    height: 68%;}
    
     .collage{
    width: 90vw;}
    

    }

@media screen and (max-width: 1024px) {
    
    .interiores{
    width: 100%;}

    .annual{
    width: 80%;
    margin-top: 4%;}
    
    .logos-in {
    width: 20%;
    margin-top: -3%;}
    
    .abajo {
    margin-bottom: 1%;}
    
    .bubble{
    margin-left: 20%;}
    
    .bloque {
    margin-top: 1%;
    width: 75%;
    margin-left: 9%;
    text-align: center;}
    
    .believe{
    padding-top: 39%;
    margin-left: -14%;}
    
    .mani5 > div:first-child{
    padding-top: 25%;}
    
    .manifiesto > div > div > img {
    height: 96%;}
    
    .believe {
    margin-left: -11%;}  
    
    #overlay {
    height: 60%;}
    
    .collage {
    width: 127vw;}
    
    .luck {
    margin-left: -4%;}
}

@media screen and (max-width: 991px) {

.manifiesto > div > div > img {
    height: 100%;}
    
    .award {
    height: 300px;}
    
    .one {
    margin-top: 5px;}
    
    .one > div:first-child {
    padding-right: 0px;}
    
    .one > div:nth-child(2) {
    padding-left: 0px;}
    
    .one > div:nth-child(2) > div:first-child {
    padding: 0px;
    padding-bottom: 5px;
    margin-top: 10px;}
    
    .one > div:nth-child(2) > div > div:first-child {
    padding-right: 5px;
    padding-left: 0px;}
    
    .one > div:nth-child(2) > div > div:nth-child(2) {
    padding-right: 0px;
    padding-left: 5px;}
    
    .one > div:nth-child(2) > div:nth-child(2) {
    padding: 0px;
    padding-top: 5px;}
    
    .two {
    margin-top: 10px;}
    
    .two > div:first-child {
    padding-right: 0px;}
    
    .two > div:first-child > div:first-child, 
    .two > div:nth-child(3) > div:first-child {
    padding: 0px;
    padding-bottom: 5px;
    padding-right: 5px;}
    
    .two > div:nth-child(2) {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 5px;}
    
    .two > div:nth-child(3) {
    padding-left: 0px;
    padding-top: 10px;}

    .two > div:nth-child(3) > div:nth-child(2){
    padding-left: 5px;
    padding-top: 0px;}

    .two > div:first-child > div:nth-child(2){
    padding-left: 5px;
    padding-top: 0px;
    padding-bottom: 5px;}

    .iconos {
    margin-top: 3%;
    margin-bottom: 0%;}

    .thiss{
    margin-top: 19%;}

    .found {
    margin-bottom: 3%;}

    #portfolio-container .btn {
    font-size: 15px;}

    .toolbar {
    padding-top: 7px;}
    
    .lg {
    padding-left: 5%;}
    
    .lg > li > img {
    width: 20%;}
    
    .alife, .create, .imagine {
    padding-top: 60%;
    padding-left: 6%;}
    
    .alife > p:nth-child(2) {
    font-size: 4.5rem;}
    
    .age1, .age2, .age3 {
    width: 59vh;
    height: 126vw;}
    
    .details > p:first-child {
    font-size: 2.5rem;}
    
    .details > p:nth-child(2) {
    font-size: 7rem;}
    
    .create > p:first-child {
    font-size: 5.5rem;}
    
    .imagine > p:nth-child(2) {
    font-size: 4rem;}
    
    .imagine > p:first-child {
    font-size: 7rem;}
    
    .made, .better {
    padding-top: 65%;}
    
    .better > p:first-child {
    font-size: 5rem;
    line-height: 1;}
    
    .made > p:first-child,
    .made > p:nth-child(2) {
    font-size: 2.5rem;}
    
    .made > p > span {
    font-size: 5rem;}
    
    .sabor {
    padding-top: 65%;
    padding-left: 10%;}
    
    .sabor > p {
    font-size: 4rem;}
    
    .dde {
    font-size: 5rem;}
    
    .chab {
    font-size: 12rem;}
    
    .collage {
    width: 169vw;
    height: 126vw;}
    
    .bubble {
    margin-left: 0;}
    
    .section-black {
    height: 1200px;}
    
    .bloque {
    width: 100%;
    margin-left: 0;}
    
    #portfolio-container .btn {
    margin-bottom: 0px;
    padding: 6px;
    font-size: 14px;}
    
    .call {
    font-size: 36px;}
    
    .titulo-in > h3 {
    font-size: 36px;}
    
    .titulo-in > h4 {
    font-size: 20px;}
}

@media screen and (max-width: 768px) {
  .section-white {
     padding: 1.5em 0;}
    
    .burguer i {
    margin-top: 4%;
    font-size: 25px;}
    
    .interior > ul > li {
    padding: 5px;}
    
    .interior > ul > li > a {
    font-size: 30px;}
    
    .smedia li i {
    font-size: 35px;
    margin-right: 13px;
    margin-top: 8px;}
    
    .mega h1 {
    font-size: 19rem;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);}
    
    .mega {
    text-align: left;
    margin-left: -35%;}
    
    #portfolio-container .btn{
    margin-bottom: 10px;}
    
    .top {
    padding-left: 0px;}
    
    .servicios {
    padding-top: 5%;}
    
    .found {
    margin-bottom: 7%;}
    
    .iconos {
    margin-top: 0%;
    margin-bottom: 2%;}
    
    .servs{
        margin-top: -7%;}
    
    #service{
        padding-bottom: 11%;}
    
    #informe:before {
        top: 86px;}
    
    #informe:after {
        top: 68px;}
    
    #mkt:before {
        top: 119px}
    
    #mkt:after {
        top: 101px;}
    
    #brand:before {
        top: 178px;}
    
    #brand:after {
       top: 160px;}
    
    #expe:before {
        top: 207px;}
    
    #expe:after {
        top: 189px;}
    
    #medios:before {
       top: 244px;}
    
    #medios:after {
        top: 226px;}
    
    .parallax2 {
    min-height: 250px;}
    
    .our {
    margin-top: 10px;}
    
    .puesto {
    margin-bottom: 5px;}
    
    .datos {
    padding-left: 1%;}
    
    .raya{
    margin-top: 1%;}
    
    .cruz{
    margin-top: 1%;}
    
    .drums{
        margin-top: 3%;}
    
    .annual {
        width: 100%;}
    
    .abajo {
    margin-bottom: 2%;}
    
    .cierre{
        margin-top: 6%;}
    
    .mani1,
    .mani2,
    .mani3,
    .mani4,
    .mani5,
    .mani7,
    .mani8{
        height: 128vw;}
    
    .manifiesto > div > div {
    height: 128vw;}
    
    #overlay {
    height: auto;}
    
    .space {
    text-align: center;}
    
    .found {
    text-align: center;}
    
    .btn-gene2 {
    margin-right: 0px;}
    
}


@media screen and (max-width: 767px) {
    .manifiesto > div {
    display: flex;
    margin-left: 0px;}
    
    .primero > p:nth-child(2){
    font-size: 30px;}
    
    .dreams, .stop, .detalle {
    padding-left: 5%;
    padding-top: 15%;}
    
    .primero{
    padding-left: 5%;
    padding-top: 17%;}
    
    .dreams > p:first-child, 
    .stop > p:first-child, 
    .detalle > p:nth-child(2), 
    .alone > p:nth-child(2), 
    .believe > p:nth-child(2), 
    .smile > div > p:first-child{
        font-size: 2rem;}
    
    .dreams > p:nth-child(2) {
        font-size: 6rem;}
    
    .believe > p:first-child, 
    .stop > p:nth-child(2), 
    .detalle > p:first-child, 
    .smile > div > p:nth-child(2), 
    .alone > p:first-child{
        font-size: 4rem;}
    
    .believe {
    padding-top: 15%;
    margin-left: 3%;}
    
    .mani6 {
    background-color: transparent;}
    
    .mani5 > div:first-child {
    padding-top: 5%;
    padding-left: 5%;
    margin-left: 0;}
    
    .alone{
    padding-top: 1%;}
    
    .smile > div:nth-child(2) {
    margin-top: 3%;
    margin-left: 0%;}
    
    .smile {
    padding-top: 5% !important;
    padding-left: 5% !important;}
    
    .believe > p:first-child,
    .believe > p:nth-child(2){
        color: #fff;}
    
    .mani4 {
    background-color: #333333;}
    
    #container {
    transform: none;
    position: initial;
    width: 100%;
    height: auto;}
    
    #container2 {
    transform: none;}
    
    .mani1,
    .mani2, 
    .mani3, 
    .mani4, 
    .mani5, 
    .mani7, 
    .mani8 {
    height: 100vw;}
    
    .manifiesto > div > div {
    height: 100vw;}
    
    .award{
    height: 500px;}
    
    .burguer i {
    font-size: 22px;}
    
    .raya{
    text-align: right;
    margin-top: 1%} 
    
    #portfolio-container .btn {
    font-size: 14px;}
    
    .one > div:nth-child(2) > div:first-child {
    padding-bottom: 0px;}
    
    .one > div:nth-child(2) > div > div:first-child{
    padding: 0px;}
    
    .one > div:nth-child(2) > div > div:nth-child(2) {
    padding: 0px;
    margin-top: 10px;}
    
    .one > div:nth-child(2) > div:nth-child(2) {
    padding-top: 0px;
    margin-top: 10px;}
    
    .two > div:nth-child(3) > div:nth-child(2) {
    padding-top: 0px;
    padding-left: 0px;
    margin-top: 10px;}
    
    .two > div:first-child > div:first-child,
    .two > div:nth-child(3) > div:first-child {
    padding-bottom: 0px;
    padding-right: 0px;}
    
    .two > div:nth-child(3),
    .two > div:nth-child(2){
    padding-top: 0px;
    margin-top: 10px;}
    
    .two > div:first-child > div:nth-child(2) {
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-top: 10px;}
    
    .two > div:first-child > div:first-child,
    .two > div:nth-child(3) > div:first-child {
    padding: 0px;
    padding-bottom: 0px;
    padding-right: 0px;}
    
    .call {
    font-size: 36px;
    line-height: 1;}
    
    .door {
    background-color: rgba(52, 52, 52, 0.6);
    height: 300px;
    padding: 11%;}
    
    .retos {
    font-size: 36px;}
    
    #portfolio-container {
        padding-top: 3px;}
    
     .cross {
    font-size: 22px;}
    
    .agency > div {
    display: grid;
    margin-left: 0px;}
    
    .collage{
    width: 100%;
    height: auto;}
    
    .alife > p:nth-child(2) {
    font-size: 3rem;}
    
    .age1, .age2, .age3 {
    height: auto;
    width: 100%;}
    
    .alife{
    padding-top: 22%;
    padding-left: 4%;
    padding-bottom: 9%;}
    
    .alife > p:nth-child(3) {
    font-size: 1.5rem;}
    
    .details {
    padding-top: 15%;
    padding-left: 5%;
    padding-bottom: 12%;}
    
    .details > p:first-child {
    font-size: 2rem;}
    
    .details > p:nth-child(2) {
    font-size: 5.5rem;}
    
    .details > p:nth-child(3) {
    font-size: 1.5rem;}
    
    .imagine {
    padding-top: 10%;
    padding-left: 4%;
    padding-bottom: 10%;}
    
    .imagine > p:first-child {
    font-size: 5rem;}
    
    .imagine > p:nth-child(2) {
    font-size: 2.5rem;
    padding-left: 8%;
    line-height: 1.1;}
    
    .imagine > p:nth-child(3) {
    font-size: 1.5rem;
    padding-left: 8%;}
    
    .create {
    padding-top: 13%;
    padding-left: 5%;
    padding-bottom: 10%;}
    
    .create > p:first-child {
    font-size: 4rem;}
    
    .create > p:nth-child(2) {
    font-size: 1.5rem;}
    
    .better > p:first-child {
    font-size: 4rem;
    margin-bottom: 1rem;}
    
    .better,
    .made{
    padding-top: 12%;
    padding-bottom: 10%;}
    
    .better > p:nth-child(2) {
    font-size: 1.5rem;}
    
    .made > p:first-child, 
    .made > p:nth-child(2) {
    font-size: 2rem;
    margin-bottom: 2px;}
    
    .made > p > span {
    font-size: 4rem;}
    
    .made > p:nth-child(3) {
    font-size: 1.5rem;
    margin-top: 1.5rem;}
    
    .sabor > p {
    font-size: 3.5rem;}
    
    .sabor {
    padding-top: 12%;
    padding-bottom: 10%;}
    
    .dde {
    font-size: 4.3rem;}
    
    .chab {
    font-size: 10rem;}
    
    .parallax,
    .parallax1,
    .parallax2,
    .parallax3,
    .parallax4,
    .parallax5{
    background-attachment: initial;}
    
    .which li img {
    width: 20%;}
    
    .contenedor {
    padding-top: 7%;}
    
    .interior > ul > li {
    padding: 3px;}
    
    .interior > ul > li > a {
    font-size: 20px;}
    
    .smedia li i {
    font-size: 22px;}
    
    .generadores {
    text-align: center;}
    
    #portfolio-container .btn {
    padding: 3px;
    margin-bottom: 8px;
    font-size: 13px;}
    
    .toolbar {
    padding-top: 2px;
    padding-bottom: 10px;}
    
    .porta {
    margin-bottom: 5px;}
    
    #portfolio-container .active {
    background-color: transparent;
    color: #cbcf2d;
    text-decoration: underline;}
    
    #portfolio-container {
    text-align: center;}
    
    #portfolio-container .active:active {
    background-color: transparent;
    color: #cbcf2d;}
    
    .name {
    margin-top: 3%;}
    
    .puesto {
    margin-bottom: 8%;}
    
    .titulo-in > h3 {
    font-size: 25px;}
    
    .titulo-in > h4 {
    font-size: 16px;}
}


@media screen and (max-width: 767px) {
  .g10-banner {
      height:450px; 
      position:fixed;
    }
  
     .g10log {
      width:100%;
      margin-top:60px;
      margin-left:10px;
    }

    .g10-banner-text {
      font-size:30px;
      color:#fff;
      margin-top:100px;
      margin-left:40%;
      line-height:25px;
    }
  
    .viewnavt {
      display:none;
    }
  
    .viewmobs {
      display:flex;  
    }
  
}

@media screen and (max-width: 588px) {
  .g10-banner {
      height:500px; 
      position:fixed;
    }
  
     .g10log {
      width:100%;
      margin-top:60px;
      margin-left:10px;
    }

    .g10-banner-text {
      font-size:25px;
      color:#fff;
      margin-top:140px;
      margin-left:40%;
      line-height:20px;
    }
  
}

@media screen and (max-width: 532px) {
  .g10-banner {
      height:275px; 
      position:relative;
      /*margin-top: 200px;*/
      padding-top: 30vh;
    }
  
     .g10log {
      width:100%;
      margin-top:60px;
      margin-left:10px;
    }

    .g10-banner-text {
      font-size:25px;
      color:#fff;
      margin-top:150px;
      margin-left:40%;
      line-height:22px;
    }
  
    #content {
      background-color: #fff;
      position: relative;
      z-index: 1000;
      margin-top: 0; 
    }
    
  
}


@media screen and (max-width: 425px) {
    
    .go-down{
    margin-top: 2%;
    border: 1px solid #ccd02d;
    padding-top: 6%;
    padding-bottom: 7%;
    height: 200px;
    max-height: 200px;
    margin-bottom: 7%;
    padding-left: 7%;}
    
    .go-down > li {
        list-style: none;}
    
    .servs > li > a:focus, 
    .servs > li > a:hover, 
    .servs > li > a:active{
        text-decoration: none;}
    
    .navbar.navbar-fixed-top.fixed-theme .raya{
    margin-top: 0%;}
    
    .ports{
        padding-left: 15%;}
    
    .square{
    padding-left: 15%;
    padding-right: 15%;}
    
    .three {
    padding-left: 0px;
    padding-right: 0px;}
    
    .four {
    padding-left: 0px;
    padding-right: 0px;}
    
    .rig {
    padding-right: 0px;}
    
    .lef {
    padding-left: 0px;}
    
    .space {
    padding-top: 12%;
    padding-bottom: 16%;}
    
    .explain{
        margin-top: 5%;}
    
    .explain p {
    font-size: 20px;
    margin-bottom: 20px;}
    
    .way{
    padding-left: 10%;
    padding-right: 10%;}
    
    .iconos {
    margin-top: 4%;
    margin-bottom: 2%;
    padding-left: 0px;}
    
    .iconos > li {
    margin-right: 15px;}
    
    .iconos img {
    width: 15%;}
    
    .tell {
    margin-bottom: 0%;
    padding-left: 10%;
    padding-right: 10%;}
    
    .media-carousel {
    margin-top: 0px;}
    
    .bio {
    margin-bottom: 15%;}
    
    .datos {
    border-left: none;
    margin-top: 13%;}
    
    .text {
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 15px;}
    
    .mega {
    margin-left: -30%;
    margin-top: 36%;}
    
    #logo {
    margin-top: 4%;}
    
    .servs {
    margin-top: 6%;
    padding-left: 0px;}
    
    .servs > li {
    margin-bottom: 6%;}
    
    .servs > li > img{
    width: 11%;
    margin-top: -7px;
    margin-right: 10px;}
    
    
    .drums {
    margin-top: 6%;}
    
    .nothing{
    padding-left: 0px;}
    
    .annual {
    margin-top: 8%;}
    
    .arros{
    font-size: 25px !important;}
    
    .logos-in {
    width: 35%;}
    
    .bubble {
    margin-left: 0%;}
    
    .cierre {
    margin-top: 9%;}
    
    .snow{
    font-size: 30px !important;}
    
    .abajo {
    margin-bottom: 5%;}
    
    .bio2 {
    padding-right: 10px;}
    
    .backo .modal-header {
    top: 10%;}
    
    .g10-banner {
     
      max-height:240px; 
      position:relative;
      padding-top: 20vh;
    }
  
     .g10log {
      width:100%;
      margin-top:60px;
      margin-left:10px;
    }

    .g10-banner-text{
      font-size:20px;
      color:#fff;
      margin-top:140px;
      margin-left:70px;
      line-height:20px;
    }
  
    .padText{
      padding-left:20px;
    }
  
    #content {
      background-color: #fff;
      position: relative;
      z-index: 1000;
      margin-top: 0; 
    }
    
    .vidma {
      margin-left:-4%;
    }
}

@media screen and (max-width: 375px) {

    .interior > ul {
    padding-left: 5%;}
    
    .name2 {
        font-size: 25px;}
    
    .puesto2 {
        font-size: 16px;}
    
    .woods {
        margin-bottom: 15px;}
    
    .section-black {
    height: 860px;}
    
    .primero, 
    .dreams, 
    .stop, 
    .detalle,
    .believe{
    padding-left: 2%;
    padding-top: 13%;}
    
    .believe {
    margin-left: 0px;}
    
    .mani5 > div:first-child {
    padding-top: 2%;
    padding-left: 2%;}
    
    .smile {
    padding-top: 2% !important;
    padding-left: 2% !important;}
    
    .award {
    height: 400px;}
    
    .better > p:first-child {
    font-size: 3.2rem;}
    
    .create > p:first-child {
    font-size: 3.5rem;}
    
    .made > p > span {
    font-size: 3.5rem;}
    
    .made > p:first-child, 
    .made > p:nth-child(2) {
    font-size: 1.5rem;}
    
    .mega {
    margin-top: 67%;}
    
    .porta,
    .call,
    .found,
    .tell h1,
    .open h1,
    .our,
    .retos{
        font-size: 30px;}
    
    .door {
    height: 200px;
    padding: 4%;}
    
    .parallax5 {
    min-height: 200px;}
    
}

@media screen and (max-width: 320px) {
    .cross {
    font-size: 18px;}
    
    .burguer i {
    font-size: 18px;}
    
    .interior > ul > li {
    padding: 3px;}
    
    .interior {
    padding-top: 10%;}
    
    .mega {
    margin-top: 84%;}
    
    .btn-gene{
    margin-bottom: 20px;}
    
    .call {
    line-height: 1;}
    
    .go-down {
    height: 240px;
    max-height: 240px;
    padding-right: 15px;}
    
    .section-black {
    height: 820px;}
    
    .primero > p:first-child {
    font-size: 2rem;
    margin-bottom: 5px;}
    
    .primero > p:nth-child(2) {
    font-size: 24px;}
    
    .dreams > p:first-child, 
    .stop > p:first-child, 
    .detalle > p:nth-child(2), 
    .alone > p:nth-child(2), 
    .believe > p:nth-child(2), 
    .smile > div > p:first-child{
        font-size: 16px;}
    
    .dreams > p:nth-child(2) {
    font-size: 4rem;}
    
    .believe > p:first-child,
    .stop > p:nth-child(2),
    .detalle > p:first-child,
    .smile > div > p:nth-child(2),
    .alone > p:first-child{
    font-size: 25px;
    line-height: 1.1;}
    
    .mani5 > div:first-child {
        padding-top: 1%;}
    
    .award {
        height: 300px;}

   

}


@media screen and (min-width: 992px) {
  .container {
    max-width: 930px;
  }

}


/**** boostrap hack *******/
.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0!important;
    background-color: #000;
}
/*LAST FIXES*/
#oneOne, #twoOne{
    margin-right: 0!important;
    margin-left: 0!important;
}

#threeOne, #fourOne{
    padding: 0!important;
}


@media screen and (max-width: 500px) {
    #hero-vid{
        margin: 0;
    }
    .landing{
        height: auto;
    }
    
    .video {
      width:100%; 
      height:auto;
    }
}