/*  ----- FONTS ------ */

			@font-face {
			    font-family: 'myriad_web_proregular';
			    src: url('../fonts/myriadwebpro-webfont.eot');
			    src: url('../fonts/myriadwebpro-webfont.eot?#iefix') format('embedded-opentype'),
			         url('../fonts/myriadwebpro-webfont.woff') format('woff'),
			         url('../fonts/myriadwebpro-webfont.ttf') format('truetype'),
			         url('../fonts/myriadwebpro-webfont.svg#myriad_web_proregular') format('svg');
			    font-weight: normal;
			    font-style: normal;

			}


			/*  ----- INDEX ------ */
			
			#index{
				background: url(../images/bg-2.png);
				z-index: -150;
			}

			#bgIndex {
				background: -moz-linear-gradient(left,  rgba(0,0,0,0.30) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.30) 99%, rgba(0,0,0,0.30) 100%); 
				background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0.30)), color-stop(50%,rgba(0,0,0,0)), color-stop(99%,rgba(0,0,0,0.30)), color-stop(100%,rgba(0,0,0,0.30))); 
				background: -webkit-linear-gradient(left,  rgba(0,0,0,0.30) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.30) 99%,rgba(0,0,0,0.30) 100%); 
				background: -o-linear-gradient(left,  rgba(0,0,0,0.30) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.30) 99%,rgba(0,0,0,0.30) 100%); 
				background: -ms-linear-gradient(left,  rgba(0,0,0,0.30) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.30) 99%,rgba(0,0,0,0.30) 100%); 
				background: linear-gradient(to right,  rgba(0,0,0,0.30) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.30) 99%,rgba(0,0,0,0.30) 100%); 
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#a6000000',GradientType=1 ); 
				top:0px;
				height: 2000px;
				z-index: -100;
			}

			#logo{
				background: url(../images/varo-logo.png) no-repeat;
				position:absolute;
				margin:0 auto;
				width: 300px;
				height: 188px;
				top:50%;
				left: 50%;
				margin-left: -150px;
				margin-top: -104px;
				z-index: 100;
			}

			#entrar{
				text-indent: -10000px;
			}

			/*  ----- INDEX ------ */





			/*  ----- GENERAL ------ */

			body {
				background-color: gray;
				margin:0px auto;
				padding: 0;
				font-family: "Trebuchet MS", sans-serif;
				overflow: hidden;
				overflow-y: visible;
				min-height: 100%;
			}

			/*#bgHome img.fondo{min-height: 100%; position:relative; display: block;}*/
			/*#bgPhoto img.fondo{width: 100%; position:relative; display: block;}*/
			/*.fondo{height: 1200px; width: 1920px;  position:relative; display: block; top: 0; left: 50%; margin-left: -960px; }*/
			.fondo {
				 position: fixed; top: 0; left: 0;
			}

			.bgwidth { width: 100%; }
			.bgheight { height: 100%; }
			/*#bgContact img.fondo{width: 100%; position:relative; display: block;}*/


			.board {
				height: 680px;
				position: fixed;
				left: 50%;
				bottom:0px;
			}

			#boardHome {
				width: 913px;
				background: url(../images/board-1-2.png); 
				background-repeat: no-repeat;
				margin-left: -420px;
			}

			#boardPhoto {
				width: 950px;
				background: url(../images/board-2-2.png); 
				background-repeat: no-repeat;
				margin-left: -430px;
			}

			#boardDesign {
				width: 904px;
				background: url(../images/board-3-2.png); 
				background-repeat: no-repeat;
				margin-left: -400px;
			}

			#boardContact {
				background: url(../images/board-4.png); 
				width: 817px; 
				background-repeat: no-repeat;
				margin-left: -420px;
			}


			header, footer, section, nav {
				display: block;
			}


			nav ul {
				list-style-type: none;
			}


			nav ul a {text-decoration: none; color:white;}
			nav ul a:link {text-decoration: none; color:white;}
			nav ul a:hover {text-decoration: none; color:gray;}
			nav ul a:active {text-decoration: none; color:gray;}
			nav ul a:visited {text-decoration: none; color:white;}

			/*  ----- GENERAL ------ */



			/*  ----- MENU ------ */
			.menu{
				width: 600px;
				height: 116px;
				color:white;
				text-transform: uppercase;
				padding-top: 45px;
				padding-left: 140px;
				-webkit-transform: rotate(-2deg); 
				-moz-transform: rotate(-2deg);
				text-shadow: 2px 2px 2px #000;
				font-size: 15pt;
				letter-spacing: 1px;
				float: left;
			}

			#boardPhoto .menu {padding-left: 160px;}

			#boardDesign .menu {padding-left: 130px;}

			#boardContact .menu{padding-left: 175px}

			.menu li{
				padding-right: 40px;
			}


			.menu .lista{
				float:left;
			}

			/*  ----- MENU ------ */





			/*  ----- CONTENIDO ------ */

			.contenido{
				width: 605px;
				height: 450px;
				margin-left: 80px;
				padding-left: 20px;
				float: left;
				font-family: "myriad_web_proregular";
				margin-top: 5px;
			}


			#boardDesign .contenido{margin-left: 50px;}
			#boardContact .contenido{padding-left: 50px; margin-left: 100px; margin-top: 25px;}

			#welcome{
				width:113px;
				height: 68px;
				background-image: url(../images/welcome.png);
				background-repeat: no-repeat;
				float:left;
				text-indent: -9000px;
				opacity: 0.6;
				filter: alpha(opacity=60);
				margin-right: 4px;
			}

			.contenido h1{
				color:white; 
				opacity: 0.6;
				filter: alpha(opacity=60);
				text-transform: uppercase;
				font-size: 25pt;
				margin-top:5px;
				font-weight: bolder;
			} 

			.contenido header{
				color:white;
				text-transform: uppercase;
				font-size: 20pt;
				font-weight: bolder;
				text-shadow: 2px 2px 2px #000;
			}


			.contenido .centrada{text-align: center; margin-left: -20px;}

			.contenido p{
				color:black;
				font-size: 18pt;
				margin-top: 5px;
			}

			#slogan{
				text-align: right;
				width: 190px;
				height: 118px;
				margin-left: 400px;
				margin-top: -50px;
				background-image: url(../images/varo-logo2.png);
			}

			#slogan span{font-weight: 900;}

			#slogan #design{font-size: 36pt;}

			#marca{
				text-transform: uppercase;
				color: white;
				opacity: 0.5;
				filter:alpha(opacity=50);
				font-size: 30pt;
				font-weight: bold;
				float: left;
			}


			/*  ----- CONTENIDO ------ */




			/*  ----- FOLLOW ------ */

			#fContact{
				list-style: none;
				margin-top: -53px;
				margin-left: 295px;
				text-indent: -90000px;

			}

			#fContact li{
				margin-bottom: 3px;
			}

			#fContact a{
				text-decoration: none; 
				background-image: url(../images/follow-contact.png);
				display: block;
				width: 20px;
				height: 20px;
			}

			#fContact a:hover{opacity: 0.7;filter:alpha(opacity=70);}

			#fContact #twContact {background-position: -21px 0px;}
			#fContact #frContact {background-position: -21px -21px;}



			.follow{
				text-indent: -90000px;
				width: 180px;
				height: 147px;
				position:absolute;
				margin-top: 340px;
				right: 10px;
			}


			.follow a{
				background-image:url(../images/follow.png);
				display: block;
				margin-left: 10px;
				float: left;
				text-decoration: none; 
			}

			.follow .fb{width:25px; height:46px; background-position: 0px 193px;}
			.follow .tw{width:37px; height:50px;background-position: -32px 196px; margin-left: 55px;}
			.follow .flickr{width:30px; height:38px;background-position: -74px 90px;margin-top: 30px;}
			

			.follow  a:hover{opacity: 0.7;filter:alpha(opacity=70);}


			.fHome .fb{margin-top: 7px; margin-left: 8px;}
			.fPhoto .fb{margin-top:9px;margin-left: 10px;}
			.fDesign .fb, .fContact .fb{margin-top:10px;margin-left: 13px;}

			.fHome .tw{margin-top: 8px; }
			.fDesign .tw, .fContact .tw, .fPhoto .tw{margin-top:10px;}

			.fHome .flickr{margin-left: 94px; }
			.fPhoto .flickr{margin-left: 96px; }
			.fDesign .flickr, .fContact .flickr{margin-left: 98px; }


			/*  ----- FOLLOW ------ */




			/*  ----- GRID ------ */

			.grid{
				/*height: 348px;*/
				margin-left: 10px;
			}

			.grid a{
				width:100px;
				height: 100px;
				float:left;
				margin-right: 12px;
				margin-bottom: 9px;
				border:3px white solid;
				overflow: hidden;
			}

			.grid img{
				display: block;	
				width: 100px;
				height: 100px;
			}

			.categorias{
				float: left;
				margin-right: 10px;
				margin-left: -40px;
			}

			.categorias li{
				line-height: 30px;
				text-transform: uppercase;
				font-weight: bold;
				text-shadow: 2px 2px 2px #000;
				font-size: 15pt;
			}

			.categorias li a:hover, .categorias li a:active{opacity:0.4;filter: alpha(opacity=40);color: white;}

			/*  ----- GRID ------ */





			/*  ----- FOOTER ------ */
			footer{
				font-family: "myriad_web_proregular";
				color:white;
				font-size: 10pt;
				width: 750px;
				height: 45px;
				position:fixed;
				bottom:0px;
				text-align: center;
				left: 50%;
				margin-left: -405px;
				text-transform: uppercase;

			}

			#footD {margin-left: -440px;}


#scrolldesign { width: 520px; float: left; margin: 20px 0 10px; }
#scrolldesign .viewport { width: 500px; height: 343px; overflow: hidden; position: relative; }
#scrolldesign .overview { list-style: none; position: absolute; left: 0; top: 0; }
#scrolldesign .thumb .end,
#scrolldesign .thumb { background-color: #e2e2e2; }
#scrolldesign .scrollbar { position: relative; float: right; width: 15px; }
#scrolldesign .track { background-color: none; height: 100%; width:13px; position: relative; padding: 0 1px; }
#scrolldesign .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#scrolldesign .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#scrolldesign .disable{ display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }



#scrollphoto { width: 403px; float: left; margin: 20px 0 10px; }
#scrollphoto .viewport { width: 383px; height: 343px; overflow: hidden; position: relative; }
#scrollphoto .overview { list-style: none; position: absolute; left: 0; top: 0; }
#scrollphoto .thumb .end,
#scrollphoto .thumb { background-color: #e2e2e2; }
#scrollphoto .scrollbar { position: relative; float: right; width: 15px; }
#scrollphoto .track { background-color: none; height: 100%; width:13px; position: relative; padding: 0 1px; }
#scrollphoto .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#scrollphoto .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#scrollphoto .disable{ display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }