@charset "utf-8";
/* CSS Document */

body{margin: 0; padding: 0;}

a{
	text-decoration: none;
}

#container{
	position: absolute;
	width: 100%;
	height: 100%;
}

h1{
	font-family: 'HelveticaNeueLTPro-Md';
	color: white;
}

p{
	font-family: 'HelveticaNeueLTStd_Lt';
	color: white;
}

header{
	position: fixed;
	width: 100%;
	height: 70px;
	background-color: white;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
	z-index: 300;
}

section{
	position: absolute;
	width: 1300px;
	height: 100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
}

#logo{
	width: 30%;
	height: 100%;
	float: left;
}

#header-logoPlugyn{
	position: absolute;
	width: auto;
	height: 50px;
	left: 50px;
	top: 50%;
	transform: translateY(-50%);
}


/*=================================================================================
NAV
=================================================================================*/

nav{
	width: 70%;
	height: 100%;
	float: right;
	z-index: 400;
}

#btn-menuMobile{
	display: none;
}

nav p{
	font-family: 'HelveticaNeueLTStd_Lt';
	font-size: 18px;
	text-align: center;
	margin-top: 20px;
	color: gray;
}

nav p:hover{
	font-family: 'HelveticaNeueLTStd_Lt';
	font-size: 18px;
	text-align: center;
	margin-top: 20px;
	color: white;
}

#btn-login{
	position: relative;
	width: 20%;
	height: 100%;
	float: left;
}

#btn-login:hover{
	position: relative;
	width: 20%;
	height: 100%;
	float: left;
	background-color: red;
}

#btn-soluciones{
	position: relative;
	width: 20%;
	height: 100%;
	float: left;
}

#btn-soluciones:hover{
	position: relative;
	width: 20%;
	height: 100%;
	float: left;
	background-color: #ff5233;
}

#btn-anunciantes{
	position: relative;
	width: 20%;
	height: 100%;
	float: left;
}

#btn-anunciantes:hover{
	position: relative;
	width: 20%;
	height: 100%;
	float: left;
	background-color: #cc1f2d;
}

#btn-red{
	position: relative;
	width: 20%;
	height: 100%;
	float: left;
}

#btn-red:hover{
	position: relative;
	width: 20%;
	height: 100%;
	float: left;
	background-color: #731630;
}

#btn-contacto{
	position: relative;
	width: 20%;
	height: 100%;
	float: left;
}

#btn-contacto:hover{
	position: relative;
	width: 20%;
	height: 100%;
	float: left;
	background-color: #40152a;
}


/*=================================================================================
MENU SIDE
=================================================================================*/

#menu-side{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 200;
}

#menu-side-menu{
	position: absolute;
	width: 20%;
	height: 100%;
	right: 0px;
	background-color: #731630;
}

#menu-side-menuinside{
	position: absolute;
	width: 100%;
	height: auto;
	left: 0px;
	top: 55%;
	transform: translateY(-50%);
}

.menu-side-items{
	position: relative;
	width: 100%;
	height: 30px;
	margin-top: 4px;
}

.menu-side-items-title{
	position: relative;
	width: 100%;
	height: 30px;
	margin-top: 4px;
	background-color: #ff5233;
}

.menu-side-items:hover{
	position: relative;
	width: 100%;
	height: 30px;
	margin-top: 4px;
	background-color: #ff5233;
}

.menu-side-items h1{
	margin: 0;
	padding: 0;
	font-family: 'HelveticaNeueLTPro-Md';
	text-align: right;
	font-size: 24px;
	color: white;
	margin-right: 60px;
}

.menu-side-items-title h1{
	margin: 0;
	padding: 0;
	font-family: 'HelveticaNeueLTPro-Md';
	text-align: right;
	font-size: 24px;
	color: white;
	margin-right: 60px;
	text-decoration: none;
}

.menu-side-items p{
	margin: 0;
	padding: 0;
	font-family: 'HelveticaNeueLTStd_Lt';
	text-align: right;
	font-size: 18px;
	color: white;
	margin-right: 60px;
}


/*=================================================================================
DESKTOP
=================================================================================*/

#desktop{
	position: relative;
	width: 100%;
	height: 600%;
}

.desktop-img{
	position: relative;
	width: 80%;
	height: 80%;
	float: left;
}

.desktop-screen{
	position: absolute;
	width: 677px;
	height: 450px;
	left: 50%;
	top: 120px;
	transform: translateX(-50%);
	z-index: 300;
}

.desktop-imgDesk{
	position: absolute;
	width: 100%;
	height: 100%;
}

.desktop-video{
	position: absolute;
	width: 660px;
	height: auto;
	left: 9px;
	top: 70px;
}

.desktop-text{
	position: relative;
	width: 80%;
	height: 20%;
	float: left;
}

.desktop-text-text{
	position: absolute;
	width: 50%;
	height: auto;
	right: 0px;
	top: 50%;
	transform: translateY(-50%);
}

.desktop-text-bg{
	position: absolute;
	width: 120%;
	height: 90%;
	left: -40%;
	background-color: #ff5233;
}

.desktop-text-bg-corner{
	position: absolute;
	width: auto;
	height: 100%;
	left: 99.9%;
	top: 0px;
}

.desktop-menu{
	position: absolute;
	width: 20%;
	height: 100%;
	right: 0px;
}

#desktop-brandroll{
	width: 100%;
	height: 100vh;
}

#desktop-preroll{
	width: 100%;
	height: 100vh;
}

#desktop-siteroll{
	width: 100%;
	height: 100vh;
}

#desktop-parallax{
	width: 100%;
	height: 100vh;
}

#desktop-richmedia{
	width: 100%;
	height: 100vh;
}

#desktop-videoinbanner{
	width: 100%;
	height: 100vh;
}


/*=================================================================================
MOBILE
=================================================================================*/

#mobile{
	position: relative;
	width: 100%;
	height: auto;
}

.mobile-img{
	position: relative;
	width: 40%;
	height: 100%;
	float: left;
}

.mobile-screen{
	position: absolute;
	width: 338px;
	height: 650px;
	left: 50%;
	top: 100px;
	transform: translateX(-50%);
	z-index: 300;
}

.mobile-imgMob{
	position: absolute;
	width: 100%;
	height: 100%;
}

.mobile-video{
	position: absolute;
	width: 257px;
	height: auto;
	left: 44px;
	top: 84px;
}

.mobile-text{
	position: relative;
	width: 40%;
	height: 100%;
	float: left;
}

.mobile-text-text{
	position: absolute;
	width: 25%;
	height: auto;
	right: 5%;
	top: 50%;
	transform: translateY(-50%);
}

.mobile-text-bg{
	position: absolute;
	width: 230%;
	height: 40%;
	left: -150%;
	top: 50%;
	transform: translateY(-50%);
	background-color: #ff5233;
}

.mobile-text-bg-corner{
	position: absolute;
	width: auto;
	height: 100%;
	left: 99.9%;
	top: 0px;
}


.mobile-menu{
	position: absolute;
	width: 20%;
	height: 100%;
	right: 0px;
}

#mobile-abstract{
	width: 100%;
	height: 100vh;
}

#mobile-mobileroll{
	width: 100%;
	height: 100vh;
}

#mobile-mobinad{
	width: 100%;
	height: 100vh;
}

#mobile-nativo{
	width: 100%;
	height: 100vh;
}

#mobile-pushad{
	width: 100%;
	height: 100vh;
}

#mobile-richmedia{
	width: 100%;
	height: 100vh;
}

#mobile-video360{
	width: 100%;
	height: 100vh;
}