/*  GRID OF THREE   ============================================================================= */



body { padding:2em; font : 100%/1.1 'Roboto', sans-serif; font-size: 1.38em;

		text-decoration: none; color: #676760;

}

.span_logo {
	width: 200px; 
}	

.span_3_of_3 {
	width: 100%; 
}

.span_2_of_3 {
	width: 66.434%;
}

.span_1_of_3 {
	width: 32.866%;
}

.span_pad {
	width: 0.7%; 
}

.span_pad_menu {
	width: 0.7%; 
	height: 105px;
}

.span_1_of_2 {
	width: 45%;
	/*total of 98%*/
}

.span_2_of_2 {
	width: 55%;
	vertical-align: bottom;
	text-align: right;
}

.span_half {
	width: 49.8%;
}

.span_pad_half {
	width: 0.4%;
}

/*  GO HALF WIDTH AT LESS THAN 1400 PIXELS */

@media only screen and (max-width: 1400px) {

	.span_half {
	width: 100%;
	}

	.span_pad_half {
	width: 0%; 
	}	

	.top-menu li {
		padding: 0 10px;
	}

}

/*  GO FULL WIDTH AT LESS THAN 1000 PIXELS */

@media only screen and (max-width: 1150px) {

	.span_1_of_2 {
		width: 100%;
	}

	.span_2_of_2 {
		width: 100%;
		text-align: left;
	}

	.span_pad_menu {
	width: 0%; 
	}

	.top-menu {
		text-align: left;
	}

	.top-menu li {
		padding: 0 10px;
	}

	.top-menu li:first-of-type {
		padding-left: 0;
	}
	.top-right {
		position:relative;
		top: 0px;
	}
}

/*  GO FULL WIDTH AT LESS THAN 650 PIXELS */

@media only screen and (max-width: 800px) {

	.span_3_of_3 {
		width: 100%; 
	}

	.span_2_of_3 {
		width: 100%; 
	}

	.span_1_of_3 {
		width: 100%; 
	}

	.span_pad {
	width: 0%; 
	}

	.top-right {
		position:relative;
		top: 0px;
	}

	.top-menu {
		text-align: left;
	}
	


	.top-menu li {
		padding: 0 5px;
	}

	.top-menu li:first-of-type {
		padding-left: 0;
	}
}

/*  CHANGE MENU TEXT TO A % */

@media only screen and (max-width: 670px) {

body { font-size: 3.3vw;

 	}

.span_logo {
	width: 33%; 
}

.top-menu {
	text-align: left;
}
.top-menu a {
	font-size: 14px;
}

.top-menu li {
	padding: 0 5px;
}

.top-menu li:first-of-type {
	padding-left: 0;
}
.top-right {
	position:relative;
	top: 0px;
}

}