/*
Nombre del tema: UX
Direccion URL: www.vauxmedia.com
Descripcion: Plantilla desarrollada por VauxMedia
Version: 2.0.0
Author: VauxMedia / Interactive Agency
Author URI: http://www.vauxmedia.com
*/

@import "css/reset.css";
@import "css/typography.css";
@import "css/forms.css";
/* @end */

html{display : block; overflow : hidden ; height : 100%; width : 100%; padding : 0; margin : 0;}
body{font-family: "HelveticaNeue Roman", Helvetica, Arial, sans-serif; display : block; overflow : hidden ; height : 100%; width : 100%; padding : 0; margin : 0;	position:relative; background-position: 49.5% 49.5%; font-size: 11px;font-style: normal;}

/*links and link hovers*/
* a, li a, p a{text-decoration: none; color: #808080;}
* a:hover, * a:hover *, li a:hover, p a:hover, .selectbox:hover{ text-decoration: none; cursor:pointer; color: #000}			
/* @group content */
#top{position:absolute;width: 100%;overflow:hidden ;z-index : 120}
#logo{ z-index: 99998}
#logo a {float: left; margin-top: 25px; margin-left: 25px; background: url(img/logo_black.png) no-repeat; height: 12px; width: 45px;position: absolute; outline:none; text-indent: -9999px; display: block;}
#search{background: url(img/interactive-agency.png) no-repeat; text-indent: -9999px; width:100px;height:18px; float: right; margin-top: 23px; margin-right: 20px;display: block;}
#menu {background: url(img/menu.png) no-repeat;width:35px; height:28px;z-index: 9998; position: absolute; margin-top: 150px; cursor: pointer; margin-left: 25px; text-indent: -9999px}
#box {margin:0px;height: 360px;width:100px;background: transparent;z-index: 9998; position: absolute;top: 0px;}
#box-outer {overflow: hidden;height: 360px;width: 2000px;position: absolute;top: 170px;}
#box ul {margin-left: 30px; display: none}
#box li {font-family: "Helvetica Neue", Arial, sans-serif; float:left;clear:both}
#box li a { letter-spacing: -5px; font-size: 90px; line-height: 80px; font-weight: bold; color:#000; float:left; display:block; clear:left; opacity:0.6; text-decoration: none;filter:alpha(opacity=60);-moz-opacity:0.6}
#box li a:hover{opacity:1}
#box li a.active {opacity:1}
.disciplinas{bottom: 30px; border-bottom-color: #000; border-bottom-style: solid; float: left; border-bottom-width: 1px; margin-left: 2000px; width: 2000px; position: relative}
.ofrecimientos{bottom: 30px; border-bottom-color: #000; border-bottom-style: solid; float: left; border-bottom-width: 1px; margin-left: 2000px; width: 2000px; position: relative}
.portafolio{bottom: 30px; border-bottom-color: #000; border-bottom-style: solid; float: left; border-bottom-width: 1px; margin-left: 2000px; width: 2000px; position: relative}
.agencia{bottom: 30px; border-bottom-color: #000; border-bottom-style: solid; float: left; border-bottom-width: 1px; margin-left: 2000px; width: 2000px; position: relative}
.white{color: #fff !important}
.black{color: #000 !important}

.clear{float:left;clear:both;padding-bottom: 0px;}	

#container{position:fixed;left : 0px;right : 0px;top : 0px;bottom : 0px;overflow:hidden ;white-space:nowrap;border-left : 0px solid #004a8f;}
#pagestatus{
			position:absolute;
			left : 50%;
			top : 50%;
			width : 150px;
			text-align:center;
			margin-left : -75px;
			margin-top : -17px;			
			z-index:90;
			font-size : 34px;
			line-height:34px;
			font-weight:400 ;
			color : #fff;
			opacity:0.7;
			}


.intro{
			display : block ;
			position:relative;
			right : 60px;
			width : 136px;
			z-index:200;
			text-align:left ;
			}
 
.intro ul{
			display:block ;
			margin : 0;
			padding:0;
			list-style:none ;
			position:relative;
			}
 
.intro li{
			margin : 0 0 5px 0;
			font-size : 10px;
			line-height:11px;
			float : left ;
			}
.intro li span{
			float : left;
			width : 30px;
			margin-left:12px;
			font-weight:bold ;	
			
			}
.intro li a{		
			color : #000;
			float : left;
			width : 94px;
			white-space:normal ;
			overflow : hidden;
			
			}
 
.intro#portfolio_shortlist{
			background : url(../img/cases-bg.png);
			top : 180px;
			padding-bottom : 10px;
			}
 
.intro#portfolio_shortlist h3{
			display : block ;
			overflow:hidden;
			height : 32px;
			text-indent:-999px;
			margin : 0;
			}
 
.intro#portfolio_shortlist h3 a{
			display : block ;
			overflow:hidden;
			height : 32px;
			text-indent:-999px
			}
 
.intro#portfolio_shortlist a{
			margin-left : 12px;
			width : 114px;
			}
 
.intro#blog_shortlist{
			background : url(../img/blogt-bg.png);
			top : 40px;
			padding : 0 0 10px 0;
			}
 
.intro#blog_shortlist h3{
			display : block ;
			overflow:hidden;
			height : 64px;
			text-indent:-999px;
			margin : 0;
			}
 
.intro#blog_shortlist h3 a{
			display : block ;
			overflow:hidden;
			height : 64px;
			text-indent:-999px
			}

#container .loading .content{display:none ;}


/* @end */

/* @group portfolio */

/* @group navigatie */


/* @end */

#pf-checker a{
			display:block ;
			position:absolute;
			font-size : 100px;
			text-align:center ;
			text-indent:-9999px;
			color : #fff;
			width : 48px;
			cursor:pointer ;
			opacity : 0.6;
			}

#pf-checker a:hover{
			opacity :1;
			}
#pf-checker a span{
			position:absolute;
			display : block ;
			width : 48px;
			}

#pf-checker a#previousimage span{
			top : 0px;
			left : 10px;
			bottom : 0px;		
			background: url(img/nav_left_black.png) no-repeat left center;		
			}
#pf-checker a#nextimage span{
			top : 0px;
			right : 10px;
			bottom : 0px;	
			background:url(img/nav_right_black.png) no-repeat right center;
			}
#pf-checker a#previousimage{
			top : 0px;
			left : 0px;
			bottom : 0px;
			}

#pf-checker a#nextimage{
			top : 0px;
			right : 0px;
			bottom : 0px;
			}

#pf-checker a#nextimage.inactive,#pf-checker a#previousimage.inactive{
			display:none ;
			}

#pf-checker{
			position:absolute;
			top : 0px;
			right:0px;
			bottom : 0px;
			left : 0px;
			z-index : 25;
			/*
			//background : url(../img/checker.png);
			*/
			}

	/*
.ie #pf-checker{
			background : url(../img/checker-no-repeat.png);
			}
*/

/* @end */
#bodymask{
			position:absolute;
			left : 0px;
			top : 0px;
			bottom : 0px;
			width : 100%;
			overflow:hidden ;
			margin : 0;
			padding:0;
			background : #000;			
			z-index : 999;
			}
#container{
			background-color: #fff;
			position:absolute;
			left : 0px;
			right : 0px;
			top : 0px;
			bottom : 0px;
			overflow:visible ;
			white-space:nowrap;
			}
#rails{	
			width : 20000px;
			}

#rails .pagecurrent{
			position:absolute;
			}

#rails div.imagecontainer{
			position:absolute;
			overflow:hidden;
			}

#rails div.imagecontainer .embmovie{
			position:absolute;
			z-index:1000;
			left : 50%;
			top : 60px;
			display : none;
			background : #000;
			width : auto;
			overflow:visible;
			text-align:left ;
			}

#rails div.imagecontainer .embmovie .closemovie{
			display:block;
			background-image : url(img/closevideo.png) ;
			width : 14px;
			height : 14px;
			overflow:hidden;
			margin-bottom : 10px;
			position:relative;
			z-index:1000;
			opacity : 1;
			
			}

#rails div.imagecontainer .embmovie object{
			display : block ;
			overflow : hidden ;
			margin : 0;
			padding:0;
			}
			
#rails div.imagecontainer h1{position: absolute; margin-left: 20px; margin-top: 200px;overflow :hidden;padding:0;z-index: 9000}			

/* @group moviebtn */

.movieBtn{
			display:block ;
			position:absolute;
			z-index:999;
			top : 260px;
			left : 50%;
			width : 250px;
			padding : 20px 0;
			text-align:center;
			margin-left : -125px;
			font-size : 18px;
			line-height:18px;
			height : 18px;
			font-weight:100 ;
			background : url(img/opacity/000_08.png);
			}

.movieBtn .bold{
			font-weight:500 ;
			}

.movieBtn:hover{
			color:#fff;
			font-weight:100 ;			
			background : url(img/opacity/000_09.png);
			text-decoration:none ;
			}

.webkit .movieBtn, .gecko .movieBtn{
			-moz-border-radius: 5px;
			-moz-box-shadow:0px 0px 5px #000;
			-webkit-border-radius: 5px;
			-webkit-box-shadow:0px 0px 5px #000;
			}

.webkit .movieBtn:hover, .gecko .movieBtn:hover{
			-moz-border-radius: 5px;
			-moz-box-shadow:0px 0px 2px #000;
			-webkit-border-radius: 5px;
			-webkit-box-shadow:0px 0px 5px #000;
			font-weight:100 ;			
			text-decoration:none ;
			}




/* @end */

#rails div.imagecontainer img{
			position:absolute;
			overflow:hidden;
			}

/* @end */

/* @group information-bar */

/* @group TYPE */

.info p{
			font-family: "HelveticaNeue Roman", Arial, sans-serif;
			font-style: normal;
			color:#000;
			font-weight: normal ;
			font-size: 12px;
			line-height: 14px;
			white-space: normal;
			width: auto;
			margin:10px 0px 20px 20px;
			}

.info h2{
			color: #000;
			font-weight: normal ;			
			letter-spacing: -0.05em;
			font-size:40px;
			line-height:40px;
			margin:20px 20px 12px 20px;
						}
			

 .info h3{
			color : rgb(45,147,255);
			color: rgba(45,147,255,0.75) ;			
			font-weight:bold ;
			font-weight:100 ;
			font-size : 24px;
			letter-spacing:0.08em;
			line-height:36px;
			margin:20px 20px 10px 20px;
			}

.info .h4{
			font-weight:bold ;
			font-weight:200 ;
			letter-spacing:;
			font-size : 22px;
			line-height:36px;
			margin:20px 20px 10px 20px;
			}

p .highlight{
			font-weight:bold ;
			background:none ;
			}
#container .content .twocolumnw p{
			width : auto ;
			}
 .info p a{
			color: #fff ;
			}

 .info p a:hover{
			position: relative;
			text-decoration : none ;
			color: #fff;  z-index: 6;
			}

/* @end */

.info{
			position:absolute;
			height : auto;
			overflow:hidden ;
			left : 0px;
			right : 0px;
			bottom:0px;
			z-index : 100;
			background-repeat: repeat; background-image: url(img/bg-menu-white.png);
			}

#container .info .minimize {
			position : absolute;
			right : 0px;
			top: 0px;
			display:block ;
			padding : 30px;
			cursor:pointer;
			}

#container .info .minimize span{
			display:block ;
			text-indent:-9999px;
			width : 16px;
			height : 3px;
			border-bottom-width : 3px;
			border-bottom-style : solid;	
			cursor:pointer;		
			}

#container .info .minimize.open span{
			border-bottom-width : 3px;
			border-bottom-style : solid;
			border-left-width : 0px;
			border-left-style : solid;
			border-right-width : 0px;
			border-right-style : solid;
			border-top-width : 0px;
			border-top-style : solid;				
			}

#container .info .minimize.closed span{
			display:block ;
			text-indent:-9999px;
			width : 16px;
			height : 10px;
			border-bottom-width : 1px;
			border-bottom-style : solid;
			border-left-width : 1px;
			border-left-style : solid;
			border-right-width : 1px;
			border-right-style : solid;
			border-top-width : 3px;
			border-top-style : solid;			
			}

.info.loading{
			left: 0px;
			top: 0px;
			position: absolute;
			z-index: 10001;
			background-image : url(img/loader.gif);
			background-repeat: no-repeat;}

#container .content{
			overflow:hidden ;
			white-space:nowrap;
			z-index:500;
			width : 80%;
			position:relative;
			}
			
#container .content .twocolumnw.col1{
			float : left ;
			width : 380px;
			padding-right : 10px;
			}

#container .content .twocolumnw.col2{
			float : left ;
			width : 360px;
			padding-right : 10px;
			}
			
#container .content .col1{
			float : left ;
			width : 200px;
			padding-right : 10px;
			}

#container .content .col2{
			float : left ;
			width : 200px;
			padding-right : 10px;
			}
#container .content .col3{
			float : left ;
			width : 200px;
			padding-right : 10px;
			}

/* @end */
/* @group resize-status */
#resize-status p{
			margin-left: auto;
			margin-bottom: 0;
			margin-right: auto;
			margin-top: 0;
			background: url(img/logo_white.png) no-repeat;
			text-indent: -9999px;
			display : block;
			width : 88px;
			position:relative;
			top : 50%;
			bottom: 50%;
			opacity:0.60			
			}

#resize-status{
			background-color: #000;
			position:absolute;
			top:0px;
			left : 0px;
			right : 0px;
			bottom : 0px;
			z-index : 10000;
			color:#333;
			font-size : 24px;
			text-align:center ;
			display : none ;			
			}