@font-face {
	font-family: 'gilroy';
	src: url('font/gilroy-light-webfont.woff2') format('woff2'),
		 url('font/gilroy-light-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'gilroy';
	src: url('font/gilroy-bold-webfont.woff2') format('woff2'),
		 url('font/gilroy-bold-webfont.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}
body {
	font-family: 'gilroy';
}
* {
	margin:0;
	padding:0;
}
.ancho {
	max-width:1400px;
	margin:auto;
}
#header {
	background:#000;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:9999;
}
#header li a {
	color:#D2E19C;
	text-decoration:none;
}
#header .ancho {
	padding:1.25rem 0;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
#header .menu {
	display:flex;
	align-items:center;	
	justify-content:space-between;
	width:500px;
}
.seccion {
	min-height:100vh;
}
#home {
	/*background:url('img/home.png') center center no-repeat;
	background-size:cover;*/
	overflow:hidden;
}
#filminas {
	position:relative;
	background:url('img/impul.png') 100% 70% no-repeat #fff;
	background-size:12% auto;
}
#filminas > div {	
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:block;
	display:none;
}
#filminas > div#impulsamos {
	display:block;
}
#filminas > div > div {	
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	height:100%;
}
#impulsamos {
	background:url('img/impul.png') 100% 70% no-repeat #fff;
	background-size:12% auto;
}
#paramarcas {
	background:url('img/impul.png') 100% 70% no-repeat #fff;
	background-size:12% auto;
}
#hacemos {
	background:url('img/impul.png') 100% 70% no-repeat #000;
	background-size:12% auto;
	color:#fff;
}
#ybien {
	background:url('img/impul.png') 100% 70% no-repeat #9EC900;
	background-size:12% auto;
}
#filminas p {
	font-weight:bold;
	width:80%;
}
#impulsamos p, #paramarcas p {
	max-width:1000px;
}
#hacemos p {
	max-width:800px;
}
#ybien p {
	max-width:600px;
}
#servicios {
	display:flex;
	color:#fff;
}
.seccion#servicios {
	min-height:50vh
}
#servicios h3 {
	margin-bottom:1rem;
	transform:translate(20%,0);
	/*opacity:0;*/
	transition:0.5s , 0.5s opacity;
}
#servicios.visible h3 {
	transform:translate(0%,0);
	opacity:1
}
#servicios li {
	list-style:none;
	font-weight:bold;
/*	overflow:hidden;*/
}
#servicios li span {
	opacity:0;
	display:block;
	transform:translate(0,-100%);
	transition:0.5s transform, 0.5s opacity;
}
#servicios.visible li span {
	opacity:1;
	display:block;
	transform:translate(0,0%);
}
#servicios.visible li:nth-child(1) span {
	transition-delay:0.5s;
}
#servicios.visible li:nth-child(2) span {
	transition-delay:0.8s;
}
#servicios.visible li:nth-child(3) span {
	transition-delay:1.3s;
}
#servicios.visible li:nth-child(4) span {
	transition-delay:1.6s;
}
#servicios.visible li:nth-child(5) span {
	transition-delay:1.9s;
}
#servicios li span:before {
	content:'. ';
}
#servicios > div {
	padding:1rem;
	box-sizing:border-box;
	width:33.33%;
	display:flex;
	justify-content:flex-start;
	align-items:flex-start;
	padding: 5% 3%;
	box-sizing:border-box;
	background-image:url('img/impul.png');
	background-position: 100% 70%;
	background-repeat: no-repeat;
	background-size:25% auto;
}
#activaciones {
	background-color:#573B8F;
}
#creatividad {
	background-color:#E62886;
}
#digital {
	background-color:#6DC3C2;
}
.p {
    display: inline-block;
    overflow: hidden;	
}
.p>span {
    display: inline-block;
	transform: translate(0px, 100%);
	transition:	0.2s transform;
}
.verd {
	color:#9EC900;
}
.carita {
	position:relative;
}
.carita:after {
	content:'';
	background:url('img/risa.png') center center no-repeat;
	background-size:contain;
	width:115px;
	max-width:60%;
	height:60px;
	position:absolute;
	top:75%;
	left:0%;
}
#ybien .carita:after {				
	background-image:url('img/risa2.png');
}
#oficinas .carita:after {
	width:60px;				
}
#oficinas .hueco {
	height:80px;
}
.carita0.carita:after {
	left:0%
}
.carita13.carita:after {
	left:13%
}
.carita45.carita:after {
	left:40%
}
.carita68.carita:after {
	left:68%
}
.carita30.carita:after {
	left:30%
}
#filminas .carita68.carita:after {
	max-width:30%;
}

#reels {
	overflow-x:hidden;
	position:relative;
}
#marcoreel {
	display:flex;
	width:1000%;
}
#marcoreel > div {
	width:2.3%;
	min-width:200px;
	background-size:100% auto;
}
#marcoreel > div video, #marcoreel > div img {
	display:block;
	aspect-ratio: 410/729;
	width:100%;
	opacity:0;
	transition:0.6s opacity;
}
#marcoreel > div.act video, #marcoreel > div.act img {
	opacity:1;
}
#reelsizq, #reelsder {
	position:absolute;
	top:50%;
	transform:translate(0,-50%);
	width:40px;
	height:40px;
	display:block;
	cursor:pointer;
}
#reelsizq {
	background:url('img/casos_i.png') center center no-repeat;
	background-size:contain;
	left:2%;
}
#reelsder {
	background:url('img/casos_d.png') center center no-repeat;
	background-size:contain;
	right:2%;
}
#descubri {
	background:#9EC900;
	padding:4vh 0;
	display:block;
	font-weight:bold;
	display:flex;
	justify-content:center;
	align-items:center;
	flex-grow:1;
	color:inherit;
	text-decoration:none;
	transition:0.6s background;
}
#descubri svg {
	margin-left:1rem;
	width:29px;
}
#descubri:hover {
	background:#d2e19c;
}

#casos {
	display:flex;
	flex-direction:column;
}
#casos > div, #casos > a {
	width:100%;
}
.titulo {
	padding:4rem 0 2rem 0;
	text-align:center;
}
.titulo.blanco {
	color:#fff;
}
#marcascont {
	margin-top:10vh;
	width:100%;
}
#marcas {
	overflow-x:hidden;
	max-width:100vw;
	width:100%;
}
#marcomarcas {
	width:1000%;
	display:flex;
	align-items:center;
}
#marcomarcas img {
	display:block;
	margin:2rem;
}
#eqmarc {
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	align-items:center;
}
#eqmarc > div {
	width:100%;
}
#oficinas {
	background:#D2E19C;
	padding:5vh 0;
}
#oficinas p {
	text-align:center;
	font-weight:bold;
	padding-bottom:2rem
}
#realfooter #logofoot {
	width:300px;
}
#realfooter {
	background:#000;
	padding:5vh 0;
	color:#D2E19C;
}
#realfooter > div {
	display:flex;
	justify-content:space-around;
	align-items:flex-end;
	width:100%;
}
#redes a {
	display:inline-block;
	margin-right:15%;
}
#redes a:last-child {
	margin-right:0;
}
#footer {
	display:flex;
	flex-direction:column;
}
#footer > div {
	flex-grow:1;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	width:100%;
	box-sizing: border-box;
	min-height:50vh;
}
#videohome {
	width:100vw;
	height:100vh;
	object-fit: cover;
	display:block;
}
#videohomemob {
	width:100vw;
	height:100vh;
	object-fit: cover;
	display:none;
}
/*
.mascara {
	mask-image: url(img/risamask.svg);
	mask-position: 60% 110%;
	mask-repeat: no-repeat;
	mask-size: 10%;
	transition:1s mask;
}
.mascara:hover {
	mask-size: 1000%;
}
*/
#equipo {
	/*background:url('img/equiporefe.png') center center no-repeat;
	background-size:contain;*/
	position:relative;
	width:100%;
	background-size:contain;
	max-width:600px;
	margin:auto;
}
#equipo:before {
	content:'';
	display:block;
	padding-top:65%;
}
.bola {
	padding:0.23rem;
	border-radius:100vw;
	aspect-ratio:1;
	position:absolute;
	transform:translate(-50%,-50%);
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	text-align:center;
	transition:0.8s width, 0.8s font-size, 0.8s background-color;
	width:0%;
	font-size:0rem;
	box-sizing:border-box;
	cursor:pointer;
	user-select: none;
}
.bola.abierta {
	width:15%;
	font-size: 0.8rem;
}
.bola.abierta.grande {
	width:17%;
}
.bola.verde {
	background:#9EC900;
}
.bola.celeste {
	background:#6DC3C2;
}
.bola.rosa {
	background:#E62886;
}
.bola.violeta {
	background:#573B8F;
}
#master {
	background:#9EC900;
	top:50%;
	left:50%;
	width:20%;
	padding:1rem;
}
#logofooter {
	display:block;
	width:300px;
}
#master img {
	width:100%;
}
#bola-productores     { left: 62%; top: 10%; }
#bola-pm              { left: 47%; top: 20%; }
#bola-directores      { left: 69%; top: 33%; }
#bola-proveedores     { left: 85%; top: 31%; }
#bola-deposito        { left: 79%; top: 54%; }
#bola-ambientadores   { left: 85%; top: 83%; }
#bola-disenadores     { left: 30%; top: 31%; }
#bola-renders         { left: 14%; top: 39%; }
#bola-creativos       { left: 28%; top: 57%; }
#bola-compras         { left: 67%; top: 72%; }
#bola-administracion  { left: 55%; top: 90%; }
#bola-legales         { left: 40%; top: 78%; }
#bola-sistemas        { left: 21%; top: 82%; }
@media (max-width:1400px) {
	.ancho {
		margin:0 15px;
	}
}
@media (max-width: 700px) {
	.seccion {
		min-height:60vh;
	}
	#videohome {
		display:none;
	}
	#videohomemob {
		display:block;
	}
    #hamburguesa {
        display: block;
        width: 32px;
        height: 32px;
        background: url(img/blanco.png);
        float: right;
        margin: 10px;
    }
	#header .menu {
		position:absolute;
		left:0;
		width:100%;
		top:100%;
		background:#333;
		text-align:center;
		flex-direction:column;
		display:none;
	}
	#header li a {
		padding: 1.5rem;
		display: block;
	}
	#marcoreel > div { 
		width:5%;
	}
	#filminas p {
		/*text-align:center;*/
	}
	#oficinas p {
		line-height:200%;
		padding-bottom:0;
	}
	#oficinas .carita:after {
		top:90%;
		height:22px;
	}
	#oficinas p span {
		display:none;
	}
	#oficinas p a {		
		display:block;
		margin-top:10%
	}
	#realfooter > div {
        display: block;
        max-width: 90%;
        margin: auto;
		text-align:center;		
	}
	#realfooter #logofooter {
		max-width:100%;
	}
	#equipo:before {
		padding-top:130%;
	}
	#master {
		background:#9EC900;
		top:50%;
		left:50%;
		width:40%;
		padding:1rem;
	}
	.bola.abierta {
		font-size: 0.8rem;
	}
	#servicios {
		flex-direction:column;
	}
	#servicios > div {
		width:100%;
		flex-grow:1;
	}	
	#filminas, #impulsamos,#hacemos,#ybien,#paramarcas {
		background-position:100% 85%;
		background-size:35% auto;
	}
	.titulo {
		padding:1rem 0;
	}
	#logofooter {
		width:60%;
		margin:auto;
	}
	#footer > div {
		min-height:auto;
		padding:3vh 0;
	}
	#master {
		width:35%;
	}
	.bola.abierta {
		width:27%;
	}
	.bola.abierta.grande {
		width:30%;
	}
	#bola-productores     { left: 64%; top: 10%; }
	#bola-pm              { left: 41%; top: 24%; }
	#bola-directores      { left: 72%; top: 31%; }
	#bola-proveedores     {	left: 91%; top: 15%; }
	#bola-deposito        { left: 90%; top: 54%; }
	#bola-ambientadores   { left: 90%; top: 87%; }
	#bola-disenadores     { left: 15%; top: 12%; }
	#bola-renders         { left: 10%; top: 37%; padding: 1rem; }
	#bola-creativos       { left: 15%; top: 58%; padding: 1rem; }
	#bola-compras         { left: 70%; top: 72%; padding: 0.8rem; }
	#bola-administracion  { left: 61%; top: 94%; }
	#bola-legales         { left: 43%; top: 78%; padding: 0.6rem; }
	#bola-sistemas        { left: 14%; top: 82%; padding: 0.6rem; }
	#redes {
		margin-top:10px;
		line-height:150%;
	}
	#redes a svg {
		width:16px;
		height:16px;
	}
	
}
#filminas .act .p>span {
	transform:translate(0,0%);
}
.palabra {
	white-space: nowrap;
}
#filminas .carita:after {
	opacity:0;
	transition:0.2s opacity;
}
#filminas .act .carita:after {
	opacity:1;
}
.p.d1>span, .palabra.d1:after {transition-delay:0.02s !important}.p.d2>span, .palabra.d2:after {transition-delay:0.04s !important}.p.d3>span, .palabra.d3:after {transition-delay:0.06s !important}.p.d4>span, .palabra.d4:after {transition-delay:0.08s !important}.p.d5>span, .palabra.d5:after {transition-delay:0.1s !important}.p.d6>span, .palabra.d6:after {transition-delay:0.12s !important}.p.d7>span, .palabra.d7:after {transition-delay:0.14s !important}.p.d8>span, .palabra.d8:after {transition-delay:0.16s !important}.p.d9>span, .palabra.d9:after {transition-delay:0.18s !important}.p.d10>span, .palabra.d10:after {transition-delay:0.2s !important}.p.d11>span, .palabra.d11:after {transition-delay:0.22s !important}.p.d12>span, .palabra.d12:after {transition-delay:0.24s !important}.p.d13>span, .palabra.d13:after {transition-delay:0.26s !important}.p.d14>span, .palabra.d14:after {transition-delay:0.28s !important}.p.d15>span, .palabra.d15:after {transition-delay:0.3s !important}.p.d16>span, .palabra.d16:after {transition-delay:0.32s !important}.p.d17>span, .palabra.d17:after {transition-delay:0.34s !important}.p.d18>span, .palabra.d18:after {transition-delay:0.36s !important}.p.d19>span, .palabra.d19:after {transition-delay:0.38s !important}.p.d20>span, .palabra.d20:after {transition-delay:0.4s !important}.p.d21>span, .palabra.d21:after {transition-delay:0.42s !important}.p.d22>span, .palabra.d22:after {transition-delay:0.44s !important}.p.d23>span, .palabra.d23:after {transition-delay:0.46s !important}.p.d24>span, .palabra.d24:after {transition-delay:0.48s !important}.p.d25>span, .palabra.d25:after {transition-delay:0.5s !important}.p.d26>span, .palabra.d26:after {transition-delay:0.52s !important}.p.d27>span, .palabra.d27:after {transition-delay:0.54s !important}.p.d28>span, .palabra.d28:after {transition-delay:0.56s !important}.p.d29>span, .palabra.d29:after {transition-delay:0.58s !important}.p.d30>span, .palabra.d30:after {transition-delay:0.6s !important}.p.d31>span, .palabra.d31:after {transition-delay:0.62s !important}.p.d32>span, .palabra.d32:after {transition-delay:0.64s !important}.p.d33>span, .palabra.d33:after {transition-delay:0.66s !important}.p.d34>span, .palabra.d34:after {transition-delay:0.68s !important}.p.d35>span, .palabra.d35:after {transition-delay:0.7s !important}.p.d36>span, .palabra.d36:after {transition-delay:0.72s !important}.p.d37>span, .palabra.d37:after {transition-delay:0.74s !important}.p.d38>span, .palabra.d38:after {transition-delay:0.76s !important}.p.d39>span, .palabra.d39:after {transition-delay:0.78s !important}.p.d40>span, .palabra.d40:after {transition-delay:0.8s !important}.p.d41>span, .palabra.d41:after {transition-delay:0.82s !important}.p.d42>span, .palabra.d42:after {transition-delay:0.84s !important}.p.d43>span, .palabra.d43:after {transition-delay:0.86s !important}.p.d44>span, .palabra.d44:after {transition-delay:0.88s !important}.p.d45>span, .palabra.d45:after {transition-delay:0.9s !important}.p.d46>span, .palabra.d46:after {transition-delay:0.92s !important}.p.d47>span, .palabra.d47:after {transition-delay:0.94s !important}.p.d48>span, .palabra.d48:after {transition-delay:0.96s !important}.p.d49>span, .palabra.d49:after {transition-delay:0.98s !important}.p.d50>span, .palabra.d50:after {transition-delay:1s !important}.p.d51>span, .palabra.d51:after {transition-delay:1.02s !important}.p.d52>span, .palabra.d52:after {transition-delay:1.04s !important}.p.d53>span, .palabra.d53:after {transition-delay:1.06s !important}.p.d54>span, .palabra.d54:after {transition-delay:1.08s !important}.p.d55>span, .palabra.d55:after {transition-delay:1.1s !important}.p.d56>span, .palabra.d56:after {transition-delay:1.12s !important}.p.d57>span, .palabra.d57:after {transition-delay:1.14s !important}.p.d58>span, .palabra.d58:after {transition-delay:1.16s !important}.p.d59>span, .palabra.d59:after {transition-delay:1.18s !important}.p.d60>span, .palabra.d60:after {transition-delay:1.2s !important}.p.d61>span, .palabra.d61:after {transition-delay:1.22s !important}.p.d62>span, .palabra.d62:after {transition-delay:1.24s !important}.p.d63>span, .palabra.d63:after {transition-delay:1.26s !important}.p.d64>span, .palabra.d64:after {transition-delay:1.28s !important}.p.d65>span, .palabra.d65:after {transition-delay:1.3s !important}.p.d66>span, .palabra.d66:after {transition-delay:1.32s !important}.p.d67>span, .palabra.d67:after {transition-delay:1.34s !important}.p.d68>span, .palabra.d68:after {transition-delay:1.36s !important}.p.d69>span, .palabra.d69:after {transition-delay:1.38s !important}.p.d70>span, .palabra.d70:after {transition-delay:1.4s !important}.p.d71>span, .palabra.d71:after {transition-delay:1.42s !important}.p.d72>span, .palabra.d72:after {transition-delay:1.44s !important}.p.d73>span, .palabra.d73:after {transition-delay:1.46s !important}.p.d74>span, .palabra.d74:after {transition-delay:1.48s !important}.p.d75>span, .palabra.d75:after {transition-delay:1.5s !important}.p.d76>span, .palabra.d76:after {transition-delay:1.52s !important}.p.d77>span, .palabra.d77:after {transition-delay:1.54s !important}.p.d78>span, .palabra.d78:after {transition-delay:1.56s !important}.p.d79>span, .palabra.d79:after {transition-delay:1.58s !important}.p.d80>span, .palabra.d80:after {transition-delay:1.6s !important}.p.d81>span, .palabra.d81:after {transition-delay:1.62s !important}.p.d82>span, .palabra.d82:after {transition-delay:1.64s !important}.p.d83>span, .palabra.d83:after {transition-delay:1.66s !important}.p.d84>span, .palabra.d84:after {transition-delay:1.68s !important}.p.d85>span, .palabra.d85:after {transition-delay:1.7s !important}.p.d86>span, .palabra.d86:after {transition-delay:1.72s !important}.p.d87>span, .palabra.d87:after {transition-delay:1.74s !important}.p.d88>span, .palabra.d88:after {transition-delay:1.76s !important}.p.d89>span, .palabra.d89:after {transition-delay:1.78s !important}.p.d90>span, .palabra.d90:after {transition-delay:1.8s !important}.p.d91>span, .palabra.d91:after {transition-delay:1.82s !important}.p.d92>span, .palabra.d92:after {transition-delay:1.84s !important}.p.d93>span, .palabra.d93:after {transition-delay:1.86s !important}.p.d94>span, .palabra.d94:after {transition-delay:1.88s !important}.p.d95>span, .palabra.d95:after {transition-delay:1.9s !important}.p.d96>span, .palabra.d96:after {transition-delay:1.92s !important}.p.d97>span, .palabra.d97:after {transition-delay:1.94s !important}.p.d98>span, .palabra.d98:after {transition-delay:1.96s !important}.p.d99>span, .palabra.d99:after {transition-delay:1.98s !important}