/*  MEDIA QUERIES  ================================================= */
@media only screen and (max-width: 600px) { /* full width if -600px */
	.span_2_of_2 { /* 2 columns */
		width: 100%; 
	}
	.span_1_of_2 {
		width: 100%; 
	}

	.span_3_of_3 { /* 3 columns */
		width: 100%; 
	}
	.span_2_of_3 {
		width: 100%; 
	}
	.span_1_of_3 {
		width: 100%;
	}
	
	.span_4_of_4 { /* 4 columns */
		width: 100%; 
	}
	.span_3_of_4 {
		width: 100%; 
	}
	.span_2_of_4 {
		width: 100%; 
	}
	.span_1_of_4 {
		width: 100%; 
	}

	#header-container { /* header & nav */
		position: relative;		
	}	

	#header nav {
		float: left;
		clear: left;
		margin: 0 0 10px; 
		width: 100%;
	}	

	#header nav ul li {
		background: #222222;
		border-radius: 2px;
		display: block;
		margin: 1% 10% 1% 10%;
	}

	#header nav ul li a {
		display: block;
		padding: 10px;
		text-align: center;
	}

	.cb-slideshow {
	}
	
	#hero-image { /* hero image */
		margin-top: 0;
		height: 20em;
	}

	#logo img {
		margin: 6% auto 0 auto;
		width: 40%;
		height: auto;
	}

	#hero-text h1 {
		font-size: 40px;
	}

	#direccion {
		text-align: center;
	}

	input, textarea {
		width: 90%;
	}

	#textAreaForm {
	width: 90%;
}

}

@media only screen and (min-width: 600px) {

	#header nav { /* navigation */
	float: right;
	margin: 1.2rem 1% auto 0; 
}

	#header nav ul li {
	display: inline;
	margin-left: 1em;
	font-weight: bold;
	font-family: 'Lato', sans-serif;
	font-size: 0.7em;
}

	#hero-image {
	width: 100%;
	height: 30rem;
	float: left;
	margin: 3rem 0 0 0;
	overflow: hidden;
}

	#logo img {
	margin: 4% auto 0 auto;
	width: 50%;
	height: auto;
	}
}

@media only screen and (min-width: 725px) {

	#header nav { /* navigation */
	float: right;
	margin: 1.2rem 1% auto 0; 
}

	#header nav ul li {
	display: inline;
	margin-left: 1em;
	font-weight: bold;
	font-family: 'Lato', sans-serif;
	font-size: 1em;
}

	#hero-image {
	width: 100%;
	height: 30rem;
	float: left;
	margin: 3rem 0 0 0;
	overflow: hidden;
}

	#logo img {
	margin: 4% auto 0 auto;
	width: 50%;
	height: auto;
	}
}

@media only screen and (min-width: 900px) {

	#hero-image {
	width: 100%;
	height: 30rem;
	float: left;
	margin: 3rem 0 0 0;
	overflow: hidden;
}

	#logo img {
	margin: 3% auto 0 auto;
	width: 35%;
	height: auto;
	}
}

@media only screen and (min-width: 1000px) {

	#hero-image {
	width: 100%;
	height: 30rem;
	float: left;
	margin: 3rem 0 0 0;
	overflow: hidden;
}

	#logo img {
	margin: 1% auto 0 auto;
	width: 35%;
	height: auto;
	}
}

@media only screen and (min-width: 1330px) {

	#hero-image {
	width: 100%;
	height: 40rem;
	float: left;
	margin: 3rem 0 0 0;
	overflow: hidden;
}

	#logo img {
	margin: 2% auto 0 auto;
	width: 40%;
	height: auto;
	}
}