body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }

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

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

body { 
	font-family: 'AmericanTypewriterRegular', Helvetica, Arial, sans-serif; 
	background: url(images/body-bg.jpg) repeat;
	}

/*general styles*/
p, h1, h2, small {
	color: #393737;
}

p {
	font-size: 18px;
	font-weight: normal;
	margin-top: 7px;
	margin-bottom: 7px;
	text-shadow: 0px 1px 0px #fff;
}

h3 {
	font-family: 'Barber3Regular';
	font-size: 48px;
	font-weight: normal;
	text-shadow: 0px 1px 0px #fff;
	color: #ba323c;
}

h4 {
	font-family: 'AmericanTypewriterRegular';
	font-size: 30px;
	font-weight: normal;
	line-height: 1.0em;
	text-shadow: 0px 1px 0px #fff;
	color: #312f2f;
	margin-bottom: 5px;
}

h5 {
	color: #393737;
	font-weight: normal;
	text-shadow: 0px 1px 0px #fff;
}

.container { 
	width: 5680px;
	}
	
	/*transitions*/
	nav h1 a, ul li a, a.cta, a.group img:hover, .iframe img:hover, .Submit {
		transition: all 0.3s linear;
		-o-transition: all 0.3s linear;
		-webkit-transition: all 0.3s linear;
		-moz-transition: all 0.3s linear;
	}
/*end general styles*/
	
/*header*/
header {
	width: 7680px;
	height: 177px;
	background: url(images/header-bg.jpg) repeat fixed;
	border-bottom: solid 1px #cfcfcf;
	padding: 20px 0px 0px 100px;
	position: fixed;
	opacity: 0.9;
	}
	nav {
		height: 177px;
		}
		nav h1 {
			float: left;
			}
			nav h1 a {
				display: block;
				width: 174px;
				height: 176px;
				text-indent: -9999px;
				background: url(images/versusestudio.png) no-repeat;
			}
			nav h1 a:hover { background-position: 0px 2px; }
		
			#menu {
				margin-left: 30px;
				float: left;
			}
			nav ul {
				width: 675px;
				height: 132px;
				list-style: none;
				}
				nav ul li {
					float: left;
				}
				nav ul li.separator {
					width: 6px;
					height: 132px;
					padding-right: 20px;
					}
					nav ul li a {
						font-family: 'AmericanTypewriterRegular';
						font-size: 60px;
						color: #333132;
						display: block;
						width: 165px;
						height: 80px;
						text-decoration: none;
						text-shadow: 0px 1px 0px #fff;
						line-height: 0.5em;
						margin: 12px 12px -30px 12px;
						padding: 30px 0px 0px 10px;
						-webkit-border-radius: 15px;
						-moz-border-radius: 15px;
						border-radius: 15px;
						}
						nav ul li a span {
							font-size: 16px;
						}
						nav ul li a:hover, a.active { background: #d6d7d9; }
						
						.active.zero { background: url(images/versusestudio.png) no-repeat; }
						.active.zero:hover { background-position: 0px 2px; }
/*end header*/

/*main content*/				
article {
	height: 455px;
	border-bottom: solid 1px #cfcfcf;
	padding-top: 177px;
	}
	#inner {
		margin-top: 21px;
		padding-top: 20px;
		height: 425px;
		border-top: solid 1px #fff;
		}
		section {
			width: 1180px;
			height: 380px;
			float: left;
			padding: 10px 0px 0px 100px;
			border-right: solid 1px #b5b5b5;
		}
		.last {
			width: 930px;
			height: 400px;
			border-right: none;
		}
		section#versus {
			padding-left: 370px;
			}
			section#versus p {
				width: 316px;
				text-shadow: 0px 1px 0px #fff;
				font-weight: normal;
				color: #312f2f;
				margin: 10px 0px 0px 55px;
				}
				section#versus p a {
					text-decoration: none;
					color: #312f2f;
					}
					section#versus p a:hover { color: #ae323b; }

	/*uno*/					
		#mezcla {
			width: 405px;
			height: 380px;
			float: left;
		}
		#text {
			width: 420px;
			height: 320px;
			padding: 50px 0px 0px 60px;
			float: left;
			}
			#text hgroup h3 {
				line-height: 1.1em;
				margin-bottom: 10px;
			}
			#text p {
				width: 355px;
			}
			a.cta {
				display: block;
				width: 340px;
				height: 17px;
				font-size: 16px;
				text-align: center;
				text-decoration: none;
				color: #312f2f;
				-webkit-border-radius: 15px;
				-moz-border-radius: 15px;
				border-radius: 15px;
				background: #d6d7d9;
				margin-top: 10px;
				padding: 10px 5px;
				}
				a.cta:hover { color: #ae323b; }
	/*end uno*/

	/*dos*/
		#sub-menu {
			width: 200px;
			height: 360px;
			padding-top: 20px;
			float: left;
			}
			#sub-menu p {
				margin-top: 10px;
			}
			#sub-menu .cta {
				width: 170px;
				text-align: left;
				padding-left: 20px;
			}
			
			ul#services {
				list-style: none;
				}
				#services li a {
					display: block;
					width: 175px;
					height: 28px;
					text-decoration: none;
					text-shadow: 0px 1px 0px #fff;
					color: #312f2f;
					-webkit-border-radius: 15px;
					-moz-border-radius: 15px;
					border-radius: 15px;
					background: #d6d7d9;
					padding: 12px 0px 0px 20px;
					margin-top: 15px;
					}
					#services li a:hover { color: #ae323b; }
					#services li .selected { width: 195px; color: #ae323b; }
					
		.thumbnails {
			width: 670px;
			height: 400px;
			padding-left: 30px;
			float: left;
		}
		.gallery-thumb a {
			width: 98px;
			height: 72px;
			-webkit-border-radius: 5px;
			-moz-border-radius: 5px;
			border-radius: 5px;
			margin: 5px;
			float: left;
			background: url(images/portafolio/see-icon.png) no-repeat;
			}
			a.group img:hover, .iframe img:hover { opacity: 0.2; }
			
			.gallery-images {
				display: none;
			}
			
			#wb, #ed, #ft {
				display: none;
			}
			
	/*end dos*/
	
	/*tres*/
	#left {
		width: 400px;
		height: 390px;
		float: left;
		}
		#left input {
			width: 375px;
			height: 60px;
			font-family: 'AmericanTypewriterRegular';
			font-size: 30px;
			font-weight: normal;
			color: #312f2f;
			background: #d6d7d9;
			border: solid 1px #f0f1f2;
			padding-left: 5px;
			-moz-border-radius:5px;
			-webkit-border-radius:5px;
			border-radius:5px;
		}
		#left span {
			font-size: 12px;
			font-weight: normal;
			color: #312f2f;
		}
		label {
			font-size: 30px;
			color: #312f2f;
			text-shadow: 0px 1px 0px #fff;
		}
		#left span.error { color: #e10e31; }
		
		#right {
			width: 430px;
			height: 390px;
			float: left;
			padding-left: 55px;
		}
		textarea {
			width: 370px;
			height: 195px;
			max-width: 380px;
			max-height: 195px;
			font-family: 'AmericanTypewriterRegular';
			font-size: 30px;
			font-weight: normal;
			color: #312f2f;
			background: #d6d7d9;
			border: solid 1px #f0f1f2;
			padding-left: 5px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px;
		}
		.Submit {
			width: 380px;
			height: 105px;
			background: url(images/enviar.png) no-repeat;
			border :none;
			text-indent: -9999px;
			cursor: pointer;
			}
			.Submit:hover { background-position: 0px -105px; }
		
		.echo {
			padding: 10px;	
			background: #ae323b;
			z-index: 1000;
			position: relative;
			top: 200px;
			left: 370px;
			float: left;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px;
			opacity: 0.9;
			}
			.echo p {
				font-family: 'AmericanTypewriterRegular';
				font-size: 22px;
				color: #fff;
				margin-top: 5px;
				text-shadow: 0px -1px 0px #530c11;
			}
	/*end tres*/
	
/*end main-content*/

/*footer*/
footer {
	width: 5580px;
	height: 200px;
	border-top: solid 1px #fff;
	padding: 50px 0px 0px 100px;
	}
	.footer-content, .gap {
		width: 1280px;
		height: 155px;
		float: left;
		margin-right: 82px;
	}
	
	footer .col {
		width: 200px;
		padding-left: 30px;
		float: left;
	}
	footer #logo {
		height: 100px;
		border-right: solid 1px #b5b5b5;
		}
		footer #logo a {
			display: block;
			width: 133px;
			height: 90px;
			text-indent: -9999px;
			background: url(images/versus-small.png) no-repeat;
		}
		
	footer #info {
		height: 90px;
		padding-top: 10px;
	}

	footer #tel {
		height: 85px;
		padding-top: 15px;
		border-right: solid 1px #b5b5b5;
		}
		footer #tel h2 {
			font-size: 36px;
			font-weight: bold;
			text-shadow: 0px 1px 0px #fff;
			line-height: 0.9em;
		}
	
	footer #social ul {
		list-style: none;
		}
		#social ul li a {
			display: block;
			width: 142px;
			height: 38px;
			text-indent: -9999px;
			}
			
		a#bl {
			margin-top: -15px;
			background: url(images/versus-blog.png) no-repeat;
			}
		a#tw {
			margin-top: 8px;
			background: url(images/versus-twitter.png) no-repeat;
			}
		a#fb {
			margin-top: 8px;
			background: url(images/versus-facebook.png) no-repeat;
			}
			#social ul li a:hover { background-position: 0px -38px; }
/*end footer*/