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

*{
	padding:0;
	margin:0;
	font-family:Arial, Helvetica, sans-serif;
}



#clear{
	clear:both;
}
#page{
	@include clearfix;
	margin:auto;
	width:916px;
	height:515px;
	overflow:hidden;
	/*
	overflow-x:hidden;
	overflow-y:visible;
	
	background-image: url(../images/marvin_tejada_bg.jpg);
	background-position: center top;	
	background-repeat:  repeat;
	background-attachment:fixed;
	*/
}
#page::before {
    content: ' ';
    position: fixed;
	width:916px;
	height:515px;
    overflow:hidden;
	top: 60px;
    background: url('../images/marvin_tejada_bg.jpg');
	background-position: center top;	
	background-repeat:  repeat;
	background-size:916px 515px;
    will-change: transform; 
    z-index: -1;
}
#pin{
	width:100%;
	text-align:center;
	
}

#menu{
	top:0px;
	left:0px;
	width:100%;
	height:60px;
	font-size:14px;
	font-weight:400;
	position:fixed;
	z-index:999;
	background-color:#fff;
	padding-top:0px;
}
.padd{
	padding:60px 10px 60px 10px;
}
.padd_logo{
	padding:40px 0 40px 0;
}
#menu ul{
	width:460px;
	margin:auto;
	margin-top:0px;
	padding-top:15px;
}
#menu ul li{
	list-style:none;
	float:left;
	padding:10px 20px 10px 20px;
}
#menu ul li a:link{
	color:#000;
	text-decoration:none;
	cursor:pointer;
}
#menu ul li a:visited{
	color:#000;
	text-decoration:none;
	cursor:pointer;
}
#menu ul li a:hover{
	color: #666;
	text-decoration:none;
	cursor:pointer;
}
#menu ul li a:active{
	color:#000;
	text-decoration:none;
	cursor:pointer;
}
#sep{
	margin-top:60px;
}
#lobby_video, #digital_video, #cinema_video, #vista_video, #analog_video{	
	margin:auto;
	width:100%;
	text-align:center;
	margin:60px 0 60px 0;
	z-index:50;
}

#logo{
	background-color:#fff;
	width:916px;
	margin:auto;
	text-align:center;
}
#logo img{
	height:150px;
}
#menu_movil{
	display:none;
}
.mpadd{
	padding-top:20px;
}

#contacto{
	width:500px;
	margin:auto;
	text-align:left;
	/*background:hsla(0, 0%, 0%, 0.9);*/
}
#contacto label{
	color:#000;
	font-size:14px;
}
#contacto input{
	width:98%;
	height:25px;
	margin-bottom:10px;
	padding:0 5px 0 5px;
	
	border:thin;
	border-style:solid;
	border-color:#ccc;
	color:#999;
	font-style:italic;
	font-size:13px;
	background-color:#F5F5F5;
}
#contacto textarea{
	width:98%;
	height:30px;
	padding:5px 5px 5px 5px;
	
	border:thin;
	border-style:solid;
	border-color:#ccc;
	margin-bottom:10px;
	color:#999;
	font-style:italic;
	font-size:13px;
	background-color:#F5F5F5;
}
.btn{
	width:150px!important;
	height:30px!important;
	background-color:#fff!important;
	color:#000!important;
	
	border:thin!important;
	border-style:solid!important;
	border-color:#000!important;
	cursor:pointer;
	font-style:normal!important;
}
.separa{
	padding:10px;
}

@-webkit-keyframes fadet {
	0% { opacity: 1;}
	50% {opacity: 1;}
	100% { opacity: 0;}
}
@keyframes fadet {
	0% { opacity: 1;}
	50% {opacity: 1;}
	100% { opacity: 0;}
}

.hide{
    display: none;
}

.ajaxgif{
	margin:0 20px 0 0;
}
.msg{
	font-size:14px;
	line-height:14px;
    color: #fff;
    font-weight:100;
	display:none;
	text-align:center;
	padding:4px;	
	width:90%;
	background:#fff;
	display:none;
	margin:auto;
	opacity: 1;
}
.msg_ok{
    background:#589D05;
	display:block;
}
.msg_error{
    background:red;
	display:block;
}
#f1, #f2, #f3, #f4{
	display:none;
	color:#F00;
	width:100%;
	margin:auto;
	font-size:10px;
	margin-bottom:5px;
}
.trp{	
	-webkit-animation: fadet 5s ease-out 1;
	-moz-animation: fadet 5s ease-out 1;
	-o-animation: fadet 5s ease-out 1;
	-ms-animation: fadet 5s ease-out 1;
	animation: fadet 5s ease-out 1;
	opacity: 0;
}

#social{
	width:100%;
	text-align:center;
	margin-top:25px;
}
#social img{
	padding:5px;
}

#form_send{
	background-color:#fff;
	width:916px;
	height:500px;
	margin:auto;
}

img.bottom_graphic{
	width:100%;
	max-width:2048px;
}

/************************************************************************************/
/**********RESPONSIVE***********************************************************************************************************************************/
/************************************************************************************/


@media only screen and (min-width : 300px) and (max-width : 480px){
	#lobby_video, #digital_video, #cinema_video, #vista_video, #analog_video{	

	margin:0;
}
	#page{
		margin:auto;
		width:90%;
		height:390px;
	}
	#page::before {
		content: ' ';
		position: fixed;
		width:90%;
		height:390px;
		overflow:hidden;
		top: 65px;
		background: url('../images/marvin_tejada_bg.jpg');
		background-position: center top;	
		background-repeat:  repeat;
		background-size:916px 515px;
		will-change: transform; 
		z-index: -1;
	}
	iframe{
		width:90%;
		max-width:500px;
	}
	#menu_movil{
		display:block;
		width:50px;
		height:50px;
		text-align:center;
		cursor:pointer;
		margin:auto;
	}
	#menu{
		top:0px;
		left:0px;
		width:100%;
		height:60px;
		font-size:18px;
		font-weight:400;
		position:fixed;
		z-index:999;
		background-color:#fff;
		padding-top:0px;
	}
	#menu:hover ul{
		max-height:230px;
	}
	#menu ul{
		width:100%;
		background-color:hsla(360, 100%, 100%, 0.9);
		text-align:center;
		
		max-height:0px;
		overflow:hidden;
		
		-webkit-transition:max-height 0.4s linear;
		-moz-transition:max-height 0.4s linear;
		transition:max-height 0.4s linear;
	}
	#menu ul li{
		list-style:none;
		float:none;
		padding:10px;
	}
	#logo{
		width:100%;
	}
	#logo img{
		height:80px;
	}
	.padd_logo{
		padding:10px 0 10px 0;
	}
	#sep {
		margin-top: 65px;
	}
	#form_send{
		width:100%;
		height:500px;
	}
	#contacto{
		width:90%;
	}
	#contacto input{
		width:95%;
	}
	#contacto textarea{
		width:95%;
	}
	
	#social img{
		height:25px;
	}
	
}

@media only screen and (min-width : 360px) and (max-width : 640px){
	#page{
		margin:auto;
		width:90%;
		height:415px;
	}
	#page::before {
		content: ' ';
		position: fixed;
		width:90%;
		height:415px;
		overflow:hidden;
		top: 65px;
		background: url('../images/marvin_tejada_bg.jpg');
		background-position: center top;	
		background-repeat:  repeat;
		background-size:916px 515px;
		will-change: transform; 
		z-index: -1;
	}
	iframe{
		width:90%;
		max-width:500px;
	}
	#menu_movil{
		display:block;
		width:50px;
		height:50px;
		text-align:center;
		cursor:pointer;
		margin:auto;
	}
	#menu{
		top:0px;
		left:0px;
		width:100%;
		height:60px;
		font-size:18px;
		font-weight:400;
		position:fixed;
		z-index:999;
		background-color:#fff;
		padding-top:0px;
	}
	#menu:hover ul{
		max-height:230px;
	}
	#menu ul{
		width:100%;
		background-color:hsla(360, 100%, 100%, 0.9);
		text-align:center;
		
		max-height:0px;
		overflow:hidden;
		
		-webkit-transition:max-height 0.4s linear;
		-moz-transition:max-height 0.4s linear;
		transition:max-height 0.4s linear;
	}
	#menu ul li{
		list-style:none;
		float:none;
		padding:10px;
	}
	#logo{
		width:100%;
	}
	#logo img{
		height:90px;
	}
	.padd_logo{
		padding:30px 0 30px 0;
	}
	#sep {
		margin-top: 65px;
	}
	#form_send{
		width:100%;
		height:600px;
	}
	#contacto{
		width:90%;
	}
	#contacto input{
		width:95%;
	}
	#contacto textarea{
		width:95%;
	}
}

@media only screen and (min-width : 768px) and (max-width : 1024px){
	#page{
		margin:auto;
		width:720px;
	}
	#page::before {
		content: ' ';
		position: fixed;
		width:720px;
		height:515px;
		overflow:hidden;
		top: 65px;
		background: url('../images/marvin_tejada_bg.jpg');
		background-position: center top;	
		background-repeat:  repeat;
		background-size:916px 515px;
		will-change: transform; 
		z-index: -1;
	}
	#menu_movil{
		display:block;
		width:50px;
		height:50px;
		text-align:center;
		cursor:pointer;
		margin:auto;
	}
	#menu{
		top:0px;
		left:0px;
		width:100%;
		height:60px;
		font-size:18px;
		font-weight:400;
		position:fixed;
		z-index:999;
		background-color:#fff;
		padding-top:0px;
	}
	#menu:hover ul{
		max-height:230px;
	}
	#menu ul{
		width:100%;
		background-color:hsla(360, 100%, 100%, 0.9);
		text-align:center;
		
		max-height:0px;
		overflow:hidden;
		
		-webkit-transition:max-height 0.4s linear;
		-moz-transition:max-height 0.4s linear;
		transition:max-height 0.4s linear;
	}
	#menu ul li{
		list-style:none;
		float:none;
		padding:10px;
	}
	#logo{
		width:100%;
	}
	#logo img{
		height:150px;
	}
	.padd_logo{
		padding:30px 0 30px 0;
	}
	#sep {
		margin-top: 65px;
	}
	#form_send{
		width:100%;
		height:1500px;
	}	
	#sep {
		margin-top: 65px;
	}
	
	
}
@media only screen and (min-width : 800px) and (max-width : 1280px){
	#form_send{
		width:100%;
		height:100px;
	}
}
@media only screen and (min-width : 600px) and (max-width : 1280px){
	#form_send{
		width:100%;
		height:1200px;
	}
}
@media only screen and (min-width : 900px) and (max-width : 1920px){
	#form_send{
		width:100%;
		height:2200px;
	}
}

@media only screen and (min-width : 1921px) and (max-width : 2500px){
	#form_send{
		width:100%;
		height:3000px;
	}
}