@charset "UTF-8";

/*Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*Reset ends*/

body{
	max-width: 2000px;
	margin: 0 auto;
}
main {
    background: #fff;
	padding: 20px;
	margin: 80% 0 0 0;
  }


header {
	overflow: hidden;
	padding: 10px;	
	top: 0;
	background: #fff;
	width: 100%;
}
header h1{
	float: left;
	width: 80px;
}
header .language{
	font-family: 'GothamMedium';
	float: right;
	color: #000;
	font-size: 18px;
	padding: 42px 20px;
}
header h2{
	float: left;
	margin: 0;
}
header h2:last-child{
	margin: 0 0 0 20px;
}

header h2 a{
	color: #a6a6a6;
	text-decoration: none;
}
header h2 a:hover{
	color: #000;
	text-decoration: underline;
}

.video-intro{
	position: fixed;
	z-index: -100;
	top: 105px;
}
.video-intro video{
	position: fixed;

}
.sentence-intro h1{
	grid-column: span 3;
	position: fixed;
	font-family: 'GothamMedium';
	color: #fff;
	font-size: 1.25em;
	padding: 16% 0;
	text-align: center;
	width: 100%;
	margin: 0 auto;
	height: 15px;
	background: #1c1c1c;
}
.cell2x1.discovery{
	background: url("../images/Discovery.jpg") no-repeat content-box;
	background-size: 125% auto;
	background-position: center;	
}
.cell1x1.uforia{
	background: url("../images/uforia.jpg") no-repeat content-box;
	background-size: 205% auto;
	background-position: center;	
}
.cell1x1.univision{
	background: url("../images/univision1.jpg") no-repeat content-box;
	background-size: 100% auto;
	cursor: pointer;	
	background-position: center;: 
}
.cell1x1.quot{
	background: url("../images/quot.jpg") no-repeat content-box;
	background-size: 120% auto;
	background-position: center;: 	
}
.cell1x1.nike{
	background: url("../images/nike1.jpg") no-repeat content-box;
	background-size: 100% auto;	
}
.cell3x1.especiales{
	background: url("../images/especiales1.jpg") no-repeat center;
	background-size: 100% auto;	

}
.cell2x1.eltiempo{
	background: #f9f9f9 url("../images/eltiempo.jpg") no-repeat content-box;
	background-size: 100% auto;	
}
.cell1x1.vouch{
	background: url("../images/vouch.jpg") no-repeat content-box;
	background-size: 100% auto;	
}
.cell1x1.donjuan{
	background: url("../images/donjuan1.jpg") no-repeat -110px -130px ;
	background-size: 150% auto;	
	margin: 0;
}
.cell1x1.empanaderia{
	background: #f9f9f9 url("../images/empanaderia.jpg") no-repeat -70px;
	background-size: 130% auto;	
}
.cell1x1.futbolred{
	background: url("../images/futbolred1.jpg") no-repeat;
	background-size: 200%;
    background-position: -280px -100px;	
}
.cell1x1.et-express{
	background: url("../images/et-express1.jpg") no-repeat -210px -80px;
	background-size: 200%;	
	margin: 0;
}
section{
	margin: 20px 0;
}
section.cell a{
	background-color:rgba(0, 0, 0, 0.3);
	display: block;
	cursor: pointer;
	-webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}
section a h3{
	font-family: 'GothamMedium';
	color: #ffffff;
	background: #000000;
	padding: 10px;
	margin: 0;
	float: left;
	height: 15px;
	text-transform: uppercase;
}
section a p{
    font-family: 'Courier';
    float: left;
    background: #fff;
    color: #000;
    margin: -5px 0 0 10px;
    padding: 10px 20px;
    text-transform: none;
}
section p.learn{
    font-family: 'GothamMedium';
    color: #ffffff;
    background: none;
    font-size: 12px;
    width: 70%;
    text-align: center;
    margin: 10px auto 0;
}
section span.logo-client{
	opacity: 1;
	width:50px;
	height: 50px;
	background: red;
	position: absolute;
	display: block;
}
.discovery span.logo-client{
	background: url("../images/Discovery-Logo.png") no-repeat content-box;
	background-size: 100% auto;
}
.uforia span.logo-client, .univision span.logo-client{
	background: url("../images/Univision-Logo.png") no-repeat content-box;
	background-size: 100% auto;
}
.quot span.logo-client{
	background: url("../images/Quot-Logo.png") no-repeat content-box;
	background-size: 100% auto;
}
.nike span.logo-client{
	background: url("../images/Nike-Logo.png") no-repeat content-box;
	background-size: 100% auto;
}
.eltiempo span.logo-client, .especiales span.logo-client, .et-express span.logo-client{
	background: url("../images/ElTiempo-Logo.png") no-repeat content-box;
	background-size: 100% auto;
}
.vouch span.logo-client{
	background: url("../images/vouch-Logo.png") no-repeat content-box;
	background-size: 100% auto;
}
.donjuan span.logo-client{
	background: url("../images/donjuan-Logo.png") no-repeat content-box;
	background-size: 100% auto;
}
section a:hover{
	cursor: pointer; ;
	opacity: 1;
}
section.cell2x2 a{
	padding: 24% 15% 50% 15%;
	width: 70%;
}
section.cell1x2 a{
	padding: 50% 15%;
    width: 70%;
}

section.cell1x1 a{
    padding: 16% 18% 50.1% 18%;
    width: 64%;
}
section.cell3x1 a{
    padding: 10% 0% 13% 36%;
    width: 64%;
}
section.cell2x1 a{
    padding: 10% 15% 45%;
    width: 70%;
}
section.univision a h3{
	/*background: #9012d8;*/
}
section.quot a h3{
	/*background: #1d3649;*/
}
footer{
	background: #FFF;
	overflow: hidden;
	width: 100%;
}
footer h4{
	font-family: 'GothamMedium';
	color: #000;
	font-size: 3em;
	margin: 0 0 40px 0;
}
address{
	padding: 50px 0;
	float: right;
	text-transform: none;
}
address a span{
	color: #000;
	margin: 0 10px 0 0;
	text-transform: uppercase; 
}
address a {
	font-family: 'Courier';
	color: #393939;
	margin: 10px 0;
	display: block;
	text-decoration: none;
}
address p {
	font-family: 'Courier';
	color: #b0b0b0;
}


@media (min-width: 600px) {
	header h1{
	width: 100px;
	}
main {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 24px;
	margin: 36% 0 0 0;
  }
  section {
  	margin: 0;
  }
  .cell2x2 {
     grid-column: span 2;
     grid-row: span 2;
  }
  .cell1x2 {
     grid-row: span 2;
  }
  .cell2x1 {
     grid-column: span 2;
     grid-row: span 1;
  }
   .cell1x1 {
     grid-column: span 1;
     grid-row: span 1;
  }
 .cell3x1 {
     grid-column: span 3;
     grid-row: span 1;
  }
.video-intro{
	display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    top: 65px;
}
.video-intro:hover{
	cursor: url("../images/cursor-down.png"), auto;
}
.video-intro video{
	grid-column: span 3;
}
/*.video-intro:hover:after{
	content: "\2195";
	color: #FFF;
}*/
.sentence-intro h1{
	grid-column: span 3;
	position: fixed;
	font-family: 'GothamMedium';
	color: #fff;
	font-size: 1.75em;
	padding: 19% 0;
	text-align: center;
	width: 100%;
	margin: 0 auto;
	height: 15px;
}
section.cell a{
	opacity: 0;
	background: #1c1c1c;
	display: block;
	cursor: pointer;
	-webkit-transition: opacity 1s;
    transition: opacity 1s;
}
section a h3{
	font-family: 'GothamMedium';
	color: #ffffff;
	background: #000000;
	padding: 10px;
	margin: 0;
	float: left;
	height: 15px;
	text-transform: uppercase;
}
section a p{
    font-family: 'Courier';
    float: left;
    background: #fff;
    color: #000;
    margin: -5px 0 0 10px;
    padding: 10px 20px;
    text-transform: none;
}
section p.learn{
    font-family: 'GothamMedium';
    color: #ffffff;
    background: none;
    font-size: 12px;
    width: 70%;
    text-align: center;
    margin: 40px auto 0;
}
section a:hover{
	cursor: pointer; ;
	opacity: 1;

}

section.cell2x2 a, section.cell2x2 div{
	padding: 31.4% 35%;
	width: 30%;
}
section.cell1x2 a, section.cell1x2 div{
	padding: 64% 15%;
    width: 70%;
}

section.cell1x1 a, section.cell1x1 div{
    padding: 20% 18% 38.1% 18%;
    width: 64%;
}
section.cell2x1 a, section.cell2x1 div{
    padding: 10.5% 34.5% 18.3%;
    width: 31%;
}
section.univision a h3{
	/*background: #9012d8;*/
}
section.quot a h3{
	/*background: #1d3649;*/
}
address{
	padding: 50px;
	float: right;
	text-transform: none;
}
}