@charset "utf-8";

/* RESET */
/*
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.9.0
*/

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}a{text-decoration:none; color:inherit}a:hover{text-decoration:none; color:inherit}

/* CSS Document */

/*
========================================================================================= GENERALES 
*/

html, body{
	width:100%;
	margin:0;
	padding:0;
}


html{
	background:#F3F3F3;
}

body{
	font-size:14px;
	color:#999;
	font-family: 'Open sans', sans-serif;
}

.safe_area{
	width:960px;
	margin:0 auto;
	clear:both;
}

header{
	background:url(../images/layout/backgrounds/header.png) center top no-repeat;
	height:70px;
	overflow:hidden;
	position:relative;
	z-index:100;
}

#logo{
	display:block;
	float:left;
	background:url(../images/layout/logo.png) no-repeat top left;
	width:170px;
	height:42px;
	margin-top:10px;
}

header nav{
	width:600px;
	float:right;
	text-align:right;
}

header nav a{
	background:url(../images/layout/backgrounds/opcion_header.png) no-repeat -10px 0;
	padding:35px 20px 10px;
	display:inline-block;
    -webkit-transition: all 600ms ease;
       -moz-transition: all 600ms ease;
   float:right;
}


header nav a div{
	width:130px;
	height:64px;
	position:absolute;
	margin-left:-20px;
	top:0;
}



header nav a:hover{
	background-color:#B0CCCA;
	color:#FFF;
	text-shadow:3px 3px 5px #4E7875;
	opacity:0.8;
	padding:30px 20px 15px;
}

#content{
	min-height:200px;
}


footer{
	background:url(../images/layout/backgrounds/reparador_foofter.png) repeat-x top #666;
	padding:50px 0;
	color:#CECECE;
}


footer nav{
	text-align:center;
	background:url(../images/layout/backgrounds/menu_footer.png) center top  no-repeat;
	padding:10px 0 0 0;
	margin:50px 0 0 0;
}

footer nav a{
	font-size:11px;
	display:inline-block;
	border-left:1px solid #999999;
	color:#FFF;
	padding:0 20px;
	line-height:10px;
    -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;	
}

footer nav a:first-child{
	border-left:none;
}

.fb_title{
	font-size:16px;
	font-weight:bold;
	background:url(../images/layout/icons/facebook.png) no-repeat left top;
	height:25px;
	padding:3px 0 0 30px;
	position:relative;
	left:-30px;
}

.tw_title{
	font-size:16px;
	font-weight:bold;
	background:url(../images/layout/icons/twitter.png) no-repeat left top;
	height:25px;
	padding:3px 0 0 30px;
	position:relative;
	left:-30px;
	color:#00CCFF;
}

.fecha_footer{
	color:#999;
	font-size:12px;
	margin:10px 0;
}

.texto_fb{
	font-size:14px;
	margin-bottom:10px;
}

.texto_fb a{
	color:#6079AC;
    -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;	
}

.twitter-timeline{
	display:none;
}

.twtr-doc{
	margin:0 auto;
}

.twtr-widget{
	background:#666666;
	padding:20px 0;
	border:0;
}

.twtr-bd{
	border:0 !important;
}


.clear{
	clear:both;
}

.column_1_3{
	width:33%;
}

.column_1_4{
	width:25%;
}

.column_2_3{
	width:66%;
}

.left{
	float:left;
}
.right{
	float:right;
}

.separador_top{
	background:url(../images/layout/props/separador_top.png) no-repeat center;
	height:13px;
}

.separador_top2{
	background:url(../images/layout/props/separador_top2.png) no-repeat center;
	height:13px;
	position:relative;
	z-index:10;
	margin-bottom:-13px;
}

.separador_bottom{
	background:url(../images/layout/props/separador_bottom.png) no-repeat center;
	height:13px;
}


.titulo_seccion{
	margin:20px 0;
}

.titulo_seccion h2{
	font-weight:300;
	display:inline-block;
	padding-right:10px;
	border-right:1px solid #999;
	font-size:24px;
}


.titulo_seccion h3{
	font-weight:300;
	display:inline-block;
	padding-left:10px;
	font-size:16px;
}


/*
=========================================================================== HOME
*/

#imageLoaderSplashArea
{
	width: 300px;
	margin: auto;
	position:absolute;
	left:0;
	right:0;
	top:45%;
	text-align:center;
}

#imageLoaderSplashArea .splashScreenImage
{
	border: none;
}

#scroll_disp{
	position:fixed;
	z-index:1000;
}

#logo_big{
	width:273px;
	height:90px;
	background:url(../images/layout/logo_big.png) no-repeat center;
	position:absolute;
	top:100px;
	left:0;
	right:0;
	margin:0 auto;
	z-index:502;
	display:none;	
}

#texto_inicio{
	position:fixed;
	z-index:501;
	font-size:30px;
	font-weight:300;
	color:#4C4A4D;
	line-height:30px;
	display:none;	
}

#animacion{
	width:100%;
	height:100%;
	background:url(../images/render/rubik1.jpg) no-repeat center #FFF;
	position:fixed;
	z-index:500;
	top:0;
	left:-200px;
	display:none;
}

.alto_animacion{
	height:1300px;
	width:100%;
}

.temp_slide{
	height:490px;
	display:block;
	background:#FFF;
	position:relative;
	z-index:500;
}

#continuar{
	background:url(../images/layout/buttons/down.png) no-repeat center;
	display:block;
	width:47px;
	height:47px;
	margin:0 auto 0;
	position:fixed;
	z-index:501;
	display:none;	
}

#rubik_shadow{
	width:780px; 189px;
	margin:0 auto;
	position:fixed;
	z-index:510;
	top:50%;
	left:0;
	right:0;
	margin-top:-91px;
	display:none;
}


.shadow {
	width: 100%;
	height: 150px;
	position: relative;
	margin-top: -89px;
	background: transparent url(../images/home/shadow.jpg) no-repeat bottom center;
	z-index: -1;
	display: none;
}


.next_button{
	display:block;
	padding-bottom:16px;
	background:url(../images/layout/buttons/next.png) no-repeat bottom right;
}

.next_button:hover{
	opacity:0.7;
}




#slide{
	width:100%;
	height:430px;
	overflow:hidden;
	position:relative;
	top:-8px;
	margin-bottom:-8px;
	z-index:1;
}

#slide a{
	width:100%;
	height:430px;
	float:left;
}



#slide .items{
	width:20000em;
	position:relative;
	clear:both;
}

#slide .items div{
	float:left;
	width:100%;
}



/* position and dimensions of the navigator */
.navi {
	width:320px;
	height:20px;
	position:relative;
	text-align:center;
	cursor:pointer;
	z-index:10;
	top:-50px;
}

.navi a {
	width:10px;
	height:10px;
	margin:3px;
	background:url(../images/layout/props/navigator.png) 0 0 no-repeat;
	display:inline-block;
	font-size:1px;
}

.navi a:hover {
	background:url(../images/layout/props/navigator.png) 0 -10px no-repeat;
}

.navi a.active {
	background:url(../images/layout/props/navigator.png) 0 -20px no-repeat;
}

#slide_left{
	width:60px;
	height:60px;
	position:relative;
	float:left;
	margin-top:-215px;
	cursor:pointer;
	text-align:left;
	z-index:2;
}

#slide_right{
	width:60px;
	height:60px;
	position:relative;
	float:right;
	margin-top:-115px;
	cursor:pointer;
	text-align:right;
	z-index:2;
	
}

#slide_next{
	display:block;
	width:47px;
	height:267px;
	z-index:3;
	float:right;
}

#slide_prev{
	display:block;
	width:47px;
	height:267px;	
	z-index:3;
}

#slide_prev_visible{
	width:47px;
	height:47px;
	position:absolute;
	top:480px;
	left:0;
	cursor:pointer;
	z-index:2;
    -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;		
	
}

#slide_next_visible{
	width:47px;
	height:47px;
	position:absolute;
	top:480px;
	right:0;
	cursor:pointer;
	z-index:2;
    -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;		
	
}
#slide_next_visible:hover, #slide_prev_visible:hover{
	opacity:0.8;
}


.nav-arrows{
	background:url(../images/home/lineas.png) center;
	height:433px;
	z-index:510;
	position:relative;
	top:-500px;
	margin-bottom:-400px;
	overflow:hidden;
}

.arrows_wrapper{
	width:960px;
	margin:0 auto;
}

#next_arrow{
	background:url(../images/home/next.png) no-repeat center right;
	width:153px;
	height:433px;
	float:right;
	display:block;
}

#prev_arrow{
	background:url(../images/home/prev.png) no-repeat center left;
	width:153px;
	height:433px;
	float:left;
	display:block;	
}


.navi_home{
	text-align:center;
	position:relative;
	top:-30px;
	z-index:2;
	margin-bottom:-50px;
}

.navi_home a {
	width:16px;
	height:16px;
	margin:3px;
	background:url(../images/layout/props/navigator.png) 0 0 no-repeat;
	display:inline-block;
	font-size:1px;
	cursor:pointer;
}

.navi_home a:hover {
	background-position:0 -16px;      
}

.navi_home a.active {
	background-position:0 -32px;      
}


#navegation_home{
	width:960px;
	margin:-30px auto 15px;
	position:relative;
}


.servicio{
	width:230px;
	height:350px;
	float:left;
	text-align:center;
}

.servicio h3{
	color:#4C4A4C;
	font-weight:600;
	padding:20px 0 10px;
}

.servicio p{
	text-align:left;
}

.plus{
	height:300px;
	float:left;
	width:55px;
	background:url(../images/layout/props/plus.png) no-repeat 0 70px;
	margin: 0 40px;
}


.clientes{
	background:#2F2F2F;
	padding:50px 0;
}



#slide_marcas{
	background:url(../images/layout/backgrounds/logos_slide.png) no-repeat center top;
	width:702px;
	height:104px;
	overflow:hidden;
	margin:100px auto 0;
}

#marcas_warpper{
	width:99999em;
	position:relative;
	left:0;
}

.item_marcas{
	width:702px;
	height:104px;
	float:left;
}

.marca{
	display:block;
	width:117px;
	height:99px;
	float:left;
	opacity:0.2;
	
    -webkit-transition: all 800ms ease;
       -moz-transition: all 800ms ease;		

}

.marca:hover{
	background:url(../images/layout/backgrounds/marca.png) top left no-repeat;
	opacity:1;	
}

.nav_marcas{
	position:relative;
	top:-100px;
	width:800px;
	margin:0 auto 100px;
}

#marcas_prev{
	height:99px;
	width:20px;
	display:block;
	background:url(../images/layout/buttons/marcas_prev.png) no-repeat center;
	float:left;
}

#marcas_next{
	height:99px;
	width:20px;
	display:block;
	background:url(../images/layout/buttons/marcas_next.png) no-repeat center;
	float:right;
}



.meny {
	display: none;
	overflow: auto;
	background: #333;

	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
	.meny ul {
		margin-top: 10px;
	}
		.meny ul li {
			display: inline-block;
			width: 200px;
			list-style: none;
			font-size: 20px;
			padding: 3px 10px;
		}
			.meny ul li:before {
				content: '-';
				margin-right: 5px;
				color: rgba( 255, 255, 255, 0.2 );
			}

/**
 * Hint graphic that appears while menu is inactive
 */
.meny-arrow {
	position: absolute;
	z-index: 10;

	border: 0 solid transparent;

	-webkit-transition: opacity 0.4s ease 0.4s; 
	   -moz-transition: opacity 0.4s ease 0.4s; 
	    -ms-transition: opacity 0.4s ease 0.4s; 
	     -o-transition: opacity 0.4s ease 0.4s; 
	        transition: opacity 0.4s ease 0.4s;
}
	.meny-left .meny-arrow {
		left: 14px;
		top: 50%;
		margin-top: -16px;
		border-left: 16px solid #333;
	}
	.meny-right .meny-arrow {
		right: 14px;
		top: 50%;
		margin-top: -16px;
		border-right: 16px solid #333;
	}
	.meny-top .meny-arrow {
		left: 50%;
		top: 14px;
		margin-left: -16px;
		border-top: 16px solid #333;
	}
	.meny-bottom .meny-arrow {
		left: 50%;
		bottom: 14px;
		margin-left: -16px;
		border-bottom: 16px solid #333;
	}
	.meny-active .meny-arrow {
		opacity: 0;

		-webkit-transition: opacity 0.2s ease; 
		   -moz-transition: opacity 0.2s ease; 
		    -ms-transition: opacity 0.2s ease; 
		     -o-transition: opacity 0.2s ease; 
		        transition: opacity 0.2s ease;
	}

/**
 * Main contents area
 */
.contents {
	background: #f3f3f3;
	width: 100%;
	height: 100%;
	overflow-y: auto;

	-webkit-overflow-scrolling: touch;

	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}




/*
======================================================= // PROYECTOS
*/

.submenu{
	margin:30px 0;
	font-weight:lighter;
}



.submenu a{
	display:inline-block;
	padding:5px 20px;
	color:#CCC;
    -webkit-transition: all 800ms ease;
       -moz-transition: all 800ms ease;		
}

.submenu a:hover{
	color:#FC9A1E;
}

.submenu.left a:first-child{
	border-right:1px solid #CCC;
	padding-left:0;
}

.titule_sub{
	display:inline-block;
	margin:30px 0;	
	padding:5px 20px;
	border-right:1px solid #CCC;
	font-weight:lighter;
	color:#666;	
}

.sub_selected{
	color:#666 !important;
}

.ultimo_proyecto{
	position:relative;
	z-index:1;
    -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;		
}

.ultimo_proyecto:hover{
	opacity:0.5;
}

.listado_proyectos{
	margin-bottom:20px;
}

.listado_proyectos a{
	margin:12px 12px 0 0;
	display:block;
	width:312px;
	height:187px;
	float:left;
	overflow:hidden;
    -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;		
}

.listado_proyectos a:hover{
	opacity:0.5;
}

.listado_proyectos .tumb_right{
	float:right !important;
	clear:right;
	margin-right:0;
}


.no_right{
	margin-right:0 !important;
}


.big_tumb{
	width:635px !important;
	height:386px !important;
}

.big_tumb.right{
	float:right !important;
	margin-right:0 !important;
}


.contenedor_detalle{
	background:#FFF;
}

.contenedor_detalle .flip_page{
	background: url(../images/layout/backgrounds/fold.png) repeat-x center #F3F3F3;
}

#detalle_proyecto{
	height:880px;
	width:100%;
	display:none;
}

.loading_project{
	background:url(../images/splashScreenImage.gif) no-repeat center;
}

#boton_sitio{
}


.shadow_project{
	width:960px;
	height:540px;
	background:url(../images/layout/backgrounds/shadow_slide.png) no-repeat top left;
	pointer-events: none;
	margin-bottom:-540px;
	position:relative;
	z-index:10;
}

#slide_project{
	width:960px;
	height:540px;
	background:#9CB5B3;
	overflow:hidden;
}

.slide_proyecto_wrapper{
	width:960px;
	height:540px;
	background:url(../images/layout/backgrounds/bg_slide.png) no-repeat top left;
	overflow:hidden;
	padding:8px;
	position:relative;
	left:-10px;
	float:left;
}

.submenu .selected{
	color:#FC9A1E;
}

.slide_project_nav{
	width:978px;
	position:relative;
	top:250px;
	z-index:20;
	margin-bottom:-250px;
	float:left;
	height:39px;
	overflow:hidden;
	left:-11px;
}

.slide_project_nav .left{
	background:url(../images/layout/buttons/project_prev.png) no-repeat left top;
	width:26px;
	height:39px;
	position:relative;
    -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;			
}

.slide_project_nav .right{
	background:url(../images/layout/buttons/project_next.png) no-repeat right top;
	width:26px;
	height:39px;
	position:relative;
    -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;			
}


.slide_project_nav .left:hover, .slide_project_nav .right:hover{
	top:2px;

}

#slide_projects{
	position:relative;
	top:0;
	left:0;
	width:99999em;
}

.item_slide{
	width:960px;
	height:540px;
	float:left;
}




.info_proyecto{
}

.info_proyecto h1{
	font-size:32px;
	font-weight:lighter;
	margin-bottom:10px;
	color:#666;
}

.info_proyecto h2{
	font-size:18px;
	margin:0 0 20px;
	color:#666;
}


.info_proyecto li{
	background:url(../images/layout/props/ok_bullet.png) no-repeat center left;
	padding-left:25px;
}

.prev_project{
	background:url(../images/layout/buttons/left.png) no-repeat center left;
	padding-left:20px !important;
}

.next_project{
	background:url(../images/layout/buttons/right.png) no-repeat center right;
	padding-right:20px !important;
}

.close_project{
	background:url(../images/layout/buttons/close.png) no-repeat center left;
	padding-left:20px !important;	
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 1200px) {

/*	.safe_area{
		width:700px;
		margin:0 auto;
		clear:both;
	}*/

}

/* for 700px or less */
@media screen and (max-width: 700px) {

/*	.safe_area{
		width:480px;
		margin:0 auto;
		clear:both;
	}*/
}

/* for 480px or less */
@media screen and (max-width: 480px) {
/*	.safe_area{
		width:100%;
		margin:0 auto;
		clear:both;
	}*/
}