@import url("https://fonts.googleapis.com/css2?family=Asap&display=swap");

@import url("https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300i,700");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Open Sans Condensed',sans-serif;font-display: swap;
  
}
a.botones-agencia {
    font-family: inherit!important;
    font-size: 20px!important;
    background: #000;
    color: #fff!important;
    padding: 10px 20px;
    display: block;
    float: left;
    line-height: 50px;
}

button.cc-nb-okagree, button.cc-nb-reject, button.cc-cp-foot-save {
    background: #000!important;
}
@font-face{ font-family:'cop'; font-display: block; src:url(cop.eot) format('eot'),url('cop.eot?#iefix') format('embedded-opentype'),url(cop.woff) format('woff'),url(cop.ttf) format('truetype');font-weight:400;font-style:normal; font-display: swap;}
body {
  background:#fff;overflow-x: hidden; /* Hide horizontal scrollbar */
}
a{color:#000; text-decoration:none;}
section{margin:50px;}
p{text-align: justify; font-size: 18px; margin-bottom:20px;}
.p{text-align: justify; font-size: 18px; margin-bottom:20px;}
h1{font-size: 20px;   font-family: 'Open Sans Condensed',sans-serif;   font-weight: normal;}
 h1.agencia-h{font-size: 30px;   font-family: 'Open Sans Condensed',sans-serif;   font-weight: bolder;}
 h2.agencia-h{font-size: 20px;   font-family: 'Open Sans Condensed',sans-serif;   font-weight: normal; margin-bottom:20px}
#cabecera{height:200px; width:100%; /*background-color:#000;*/ margin-bottom:50px}
#cabecera-home{height:200px; width:100%; position:absolute; margin-bottom:50px; z-index:9999}
#cabecera-proyectos {height: 80px;width: 100%;margin-bottom: 50px;z-index: 9999;}
#logo{margin:50px; float:left}
.pie{background:#2f2f2f;    width: 100%;}
.pie-contenido{text-align:center; margin:0 auto; padding:50px 25px 100px 25px;max-width:800px; width:100% }
.pie-alone{color:#ffff00; font-family: 'cop'; font-size: 25px; margin-bottom:50px}
.pie1{color:#d5d5d5; text-align:left;   /*font-family: 'cop'; font-size: 34px;    line-height: 35px;*/    margin: 0; width:50%; float:left; font-size: 14px;    line-height: 16px;}
.pie2{color:#d5d5d5;text-align:right;    font-size: 14px;    line-height: 16px;    margin: 0; width:50%; float:left}
.pie2 a{color:#d5d5d5;}.pie1 a{color:#d5d5d5;}
.youknow{font-size:20px;}
.cop{font-family:'cop';}
.coph1{font-family: 'cop';    font-size: 34px;    line-height: 46px;    margin: 0;}
.buenas-practicas{font-weight:bolder; font-size: 34px;    line-height: 46px;    margin: 0;}
.coph2{font-family: 'cop';    font-size: 19px;    line-height: 50px;    margin: 0;}
.coph2 a:hover{color: #999;}
video.flex-container-video {    width: 100%;     height: inherit;}
#video img{position:absolute; z-index:-9}
#video{height:calc(100vh - 100px); background:#000;  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;}
#servicio{display:grid}
#marcas{background:#ffff00; padding:50px 0; margin-bottom:50px; text-align:center; float: left;width: 100%;}
.masproyectos{font-family: 'cop';    font-size: 19px; background-color:#fff; color:#fff;margin: 0;float: left;
    width:100%;text-align: center;padding: 50px;}
.masproyectos a{color:#000;     font-family: 'FontAwesome';    font-size: 35px;}
.masproyectos a:hover{color:#ffff00;}
.mashome{font-family: 'cop';    font-size: 19px; background-color:#000; color:#fff;margin: 0;float: left;
    width:100%;text-align: center;padding: 50px;}
.mashome a{color:#fff;     font-family: 'FontAwesome';    font-size: 35px;}
.mashome a:hover{color:#ffff00;}
.marca{width: 25%;    float: left;    margin: 25px 0;    text-align: center;}
#marcas img{margin:20px 0;}
ul {    padding-left: 40px;}
#columnas {    display: flex;}
#columna-bloque-1 {       width: calc(50% - 100px);    display: inline-block;    float: left;
    display: flex;    flex-direction: column;}
#columna-bloque-medio {width: calc(100% - 100px);    max-width: 1000px;    margin: 0 auto;}
#columna-bloque-medio video{width:100%; margin-top:50px}
#columna-bloque-2 {       width: calc(50% - 100px);    display: inline-block;    float: right;}
#columna-bloque-3 {       width: calc(50% - 100px);    display: inline-block;    float: right;}


#agencia-bloque-1 {       width: calc(50% - 25px);    display: inline-block;    float: left;
        flex-direction: column;}
	 #agencia-bloque-2 img{width:50%; padding:20px; float:left}
#agencia-bloque-2 {       width: calc(50% - 25px);    display: inline-block;    float: right;}

.gris{background:url(../img/gris.jpg) repeat center center; margin:0; }
.color-gris{background:url(../img/gris.jpg) repeat center center;  }
.gris-politica{background:url(../img/gris.jpg) repeat center center;margin:0; padding:50px; margin-bottom: 0!important;  }
.gris-politica-texto{color:#fff; padding-top:199px!important; background:url(../img/gris.jpg) repeat center center;margin:0; padding:50px; margin-bottom: 0!important;  }
.gris-claro{background-color:#f5f5f5; margin:0; /*padding: 100px 0;*/}
.blanco{background-color:#f5f5f5; margin:0;}
.contemporanea{background:url(../img/c.png) no-repeat center center;-webkit-background-size:contain;-moz-background-size:contain;-o-background-size:contain;background-size:contain; max-width: 1000px; min-height:100vh;    margin: 0 auto; position:relative; padding: 100px;display: flex;    align-items: center;    justify-content: center;}

.innovacion{background:url(../img/i.png) no-repeat center center;-webkit-background-size:contain;-moz-background-size:contain;-o-background-size:contain;background-size:contain; max-width: 1000px; min-height:100vh;    margin: 0 auto; position:relative; padding: 100px;display: flex;    align-items: center;    justify-content: center;}
/*.agencia{background:url(../img/a.png) no-repeat center center;-webkit-background-size:contain;-moz-background-size:contain;-o-background-size:contain;background-size:contain; max-width: 1000px; min-height:100vh;    margin: 0 auto; position:relative; padding: 100px;}*/
.agencia{background:url(../img/a.png) no-repeat center center;-webkit-background-size:contain;-moz-background-size:contain;-o-background-size:contain;background-size:contain;max-width: 1000px; min-height:100vh;    margin: 0 auto; position:relative; padding: 100px; display: flex;    align-items: center;    justify-content: center;}
.full{background:url(../img/f.png) no-repeat center center;-webkit-background-size:contain;-moz-background-size:contain;-o-background-size:contain;background-size:contain; max-width: 1000px; min-height:100vh;    margin: 0 auto; position:relative; padding: 100px;display: flex;    align-items: center;    justify-content: center;}

.agencia-texto-gris, .agencia-texto-blanco{}
.agencia-texto-gris, .agencia-texto-blanco{text-align: justify;/*top: 50%;*/width: 70%;/*float: right;transform: translate(0%, 25%);*/}
.agencia-texto-blanco p{color:#fff;}

.titular-agencia-gris{font-family: 'cop';    font-size: 34px;    line-height: 46px;    margin: 0; margin-bottom: 30px; text-align:right}
.marcado-agencia-gris{font-family: 'cop';font-size: 34px; background-color:#000; color:#fff; padding:2px 5px; width: fit-content;}
.marcado-agencia-blanco{font-family: 'cop';font-size: 34px; background-color:#fff; color:#000!important; padding:2px 5px; width: fit-content; margin-bottom:0!important}
p#aparecer-innovacion {display: initial; font-family: 'cop';font-size: 34px;}
p#aparecer-agencia {display: initial; font-family: 'cop';font-size: 34px;}
.cop-agencia{font-family: 'cop';font-size: 34px;}
.titular-agencia-blanco{font-family: 'cop'; color:#fff; font-size: 34px;    line-height: 46px;    margin: 0; margin-bottom: 30px; text-align:right}
.container-mask {
width: 100%;
    
}
.valores{border-bottom:2px solid #fae13e; max-width:1200px; margin:0 auto;}
.valores img{width:100%; margin:50px 0 }
.valores-texto{max-width:1000px; margin:0 auto;margin-bottom:20px;/*margin-bottom:50px;*/font-size:25px; text-align:center}
.valores h1{text-align:center; padding:50px; font-size:24px }
.container-mask video{margin-top: 0!important;}
.container-mask .mask {
    width: 100%;
    height: auto;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    z-index: 100;
    overflow: hidden;}
	.container-mask .mask img {
    width: 101%;
    height: auto;
    position: absolute;
    margin: 0 auto;}

.fondo_consultoria{background:url(../img/consultoria-estrategia.jpg) no-repeat center center;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}
.fondo_marketing{background:url(../img/marketing-publicidad.jpg) no-repeat center center;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}
.fondo_ecommerce{background:url(../img/e-commerce.jpg) no-repeat center center;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}
.fondo_fotografia{background:url(../img/fotografia-video.jpg) no-repeat center center;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}

.partner{margin:20px 0}
a.overview {
    background-color: #ffff00; line-height: 80px;    padding: 10px 15px 10px 15px;    color: #000;    font-weight: bold;}

.cabecera-agencia{background:url(../img/agencia-you.jpg) no-repeat center center;-webkit-background-size: cover;
  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover; width:100%; height:300px; margin: 50px 0;}


#servicios {width: calc(100% - 100px);    max-width: 800px;padding-bottom: 50px;margin: 0 auto; text-align:center}
.servicios-blanco{color:#fff;}
.marcado-blanco{background-color:#fff; color:#000; padding:1px 4px;}
.marcado-amarillo{background-color:#ffff00; color:#000; padding:1px 4px;}
.marcado-gris{background-color:#2B2B2B; color:#fff; padding:1px 4px;}
.marcado-gris2{background-color:#2B2B2B; color:#ffff00; padding:1px 4px;}
.marcado-practicas{font-weight:bolder; text-decoration:underline;}
.titular-servicios-blanco{font-family: 'cop'; color:#fff; font-size: 35px;    line-height: 50px;    margin: 0; margin-bottom: 30px; }
.titular-politica-blanco{font-family: 'cop'; color:#fff; font-size: 60px;    line-height: 80px;    margin: 0; margin-bottom: 30px; }
.titular-servicios-gris{font-family: 'cop';    font-size: 35px;    line-height: 50px;    margin: 0; margin-bottom: 30px; }
.titular-politica-gris{font-family: 'cop';    font-size: 60px;    line-height: 80px;    margin: 0; margin-bottom: 30px; }
.titular-marcado-blanco{font-family: 'cop';background-color:#fff; color:#000; padding:1px 4px;}
.titular-marcado-amarillo{font-family: 'cop';background-color:#ddd; color:#000; padding:1px 4px;}
.marcado-amarillo{;background-color:#ddd; color:#000; padding:1px 4px;}
.titular-marcado-gris{font-family: 'cop';background-color:#2B2B2B; color:#fff; padding:1px 4px;}
.logo-servicios{padding-top: 50px;width: 100%;max-width: 500px;float: left;margin: 0 auto;}

.will{width: 50%; display: inline-block; float: left;}

.crossfade{max-height: 800px;
    position: relative;
    min-height: 500px;}
.crossfade > figure {
  animation: imageAnimation 15s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  color: transparent;
  height: 100%;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 0;
}

.overview{display: block;
    padding: 20px;
    width: 100%;
    margin: 0 auto;
    font-family: 'Open Sans Condensed', sans-serif;
    -webkit-appearance: none;
    border-radius: 0px;
    background-color: #ffff00;
    color: #000;
    float: left;
    text-align: center; font-weight:bolder}
.element1 {
  animation: pulse 3s infinite;
}

.fondo_fotografia{background:url(../img/fotografia-video.jpg) no-repeat center center;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}
.columnas{display:flex;}

/* The animation code */
@keyframes flecha {
  0%   { top:0px;}
  50%  {top:20px;}
  100% {top:0px;}
}

/* The element to apply the animation to */
#flecha {
  width: 30px;
  height: 20px;
  position: relative;
      margin-bottom: 50px;
	  margin:0 auto;
 animation-iteration-count: infinite;
  animation-name: flecha;
  animation-duration: 2s;
}





 
@keyframes pulse {
  0% {
    background-color: #ddd;
  }
  50% {
    background-color: #ffffff;
  }
  100% {
    background-color: #ddd;
  }
}

.element2 {
  animation: pulse2 3s infinite;
}
 
@keyframes pulse2 {
  0% {
    background-color: #ddd;
	color:#000;
  }
  50% {
    background-color: #000;
	color:#fff;
  }
  100% {
    background-color: #ddd;
	color:#000;
  }
}

.crossfade > figure:nth-child(1) {
  background-image: url('../img/refran01.jpg');
}
.crossfade > figure:nth-child(2) {
  animation-delay: 3s;
  background-image: url('../img/refran02.jpg');
}
.crossfade > figure:nth-child(3) {
  animation-delay: 6s;
  background-image: url('../img/refran03.jpg');
}
.crossfade > figure:nth-child(4) {
  animation-delay: 9s;
  background-image: url('../img/refran04.jpg');
}
.crossfade > figure:nth-child(5) {
  animation-delay: 12s;
  background-image: url('../img/refran05.jpg');
}

@keyframes imageAnimation {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
  }
  8% {
    animation-timing-function: ease-out;
    opacity: 1;
  }
  17% {
    opacity: 1
  }
  25% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}








.will{width: 10%;}

@media screen and (max-width: 600px)
{
.termsfeed-com---nb-simple {
    max-width: 600px!important; 
	    max-width: 300px!important;
    position: fixed!important;
    left: 0!important;
}
}
@media screen and (max-width: 600px) {
    #servicio, #agencia{height:inherit!important}
}

@media (max-width: 1000px) {
	
	#agencia-bloque-1{width:100%;}
	#agencia-bloque-2{width:100%}
	.will{width: 50%; display: inline-block; float: left;}
	/*#servicio, #agencia{height:100vh}*/
	/*.agencia-texto-blanco{text-align:justify;position: absolute;right: 50%;top: 50%;transform: translate(-20%, -50%); color:#fff}
	.agencia-texto-gris{text-align:justify;position: absolute;right: 50%;top: 50%;transform: translate(-50%, -50%); width:70%}*/
#logo img{height:50px;}#logo {    margin: 25px;}
#cabecera{height:100px;}
	/*.agencia-texto-gris, .agencia-texto-blanco{transform: translate(-10%, -50%); right:inherit}*/
	.contemporanea, .agencia, .innovacion, .full{padding:100px 0;}
	.crossfade{min-height:400px;}
	.marca{width: 100%;}
	#columnas{display:inherit;}
	.columnas{display:inherit;}
	#columna-bloque-1, #columna-bloque-2, #columna-bloque-3{width:calc(100% - 100px)}
	 #columna-bloque-2{height: 300px;}
	 #columna-bloque-3{height: 400px;    margin-top: 0;}
	 #map{height: 300px!important; width:calc(100% - 100px)!important;}
  #video {height: calc(100vh - 350px);}
  section .text-container {
    flex-direction: column;
  }
}

.reveal {
  position: relative;
  opacity: 0;
}

.reveal.active {
  opacity: 1;
}
.active.fade-bottom {
  animation: fade-bottom 1s ease-in;
}
.active.fade-left {
  animation: fade-left 1s ease-in;
}
.active.fade-right {
  animation: fade-right 1s ease-in;
}
@keyframes fade-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}