@charset "UTF-8";
/* CSS Document */

/*CSS Reset:*/
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}

/*Clearfix:*/
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.cf { zoom: 1; }
.clear { clear: both;	}

/* border-box so that border widths aren't added to the total width of the element: */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}



/* ==========================================================================
   Some general layout rules
   ========================================================================== */

body {
	font-family: 'ProximaNovaRegular';
}

#container {
	width: 90%;
	max-width: 1200px;	
	margin: 0px auto 0px auto;
	background-color: #EFEFEF;
	position: relative;
}

p {
	padding: 30px 10px;	
}
div { transition: 0.9s; }



/* ==========================================================================
   Fluid grid rules
   ========================================================================== */


.one_unit {
	width: 12.667%;
	margin: 2%;
	float: left;	
	background-color: #CCC;	
}
.two_unit {
	width: 29.333%;
	margin: 2%;
	float: left;	
	background-color: #CCC;
}
.four_unit {
	width: 62.666%;	
	margin: 2%;
	float: left;
	background-color: #CCC;
}
.five_unit {
	width: 79.333%;	
	margin: 2%;
	float: left;
	background-color: #CCC;
}
.six_unit {
	width: 96%;	
	margin: 2%;
	background-color: #CCC;
}

.show-1 { display: none; }
.show-2 { display: none; }



.guides {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	color: #0099ff;
	font-size: 13px;
	text-align: center;
}
.guide-margin {
	border-left: 1px solid #0099ff;
	height: 100%;
	width: 2%;
	float: left;
	padding: 2px 0px;
}
.guide-margin-right {
	border-right: 1px solid #0099ff;

}
.guide-column {
	border-left: 1px solid #0099ff;
	height: 100%;
	float: left;
	width: 12.66%;
	position: relative;
}




/* ==========================================================================
   Media Queries for tablets
   ========================================================================== */
   
@media (max-width: 768px) {
	
.one_unit {
	width: 29.333%;
	background-color: #999;	
}
.five_unit {
	width: 62.666%;
	background-color: #999;	
}
.show-1 { display: block; }
	
}
   
  
 /* ==========================================================================
   Media Queries for smartphones
   ========================================================================== */  

@media (max-width: 510px) {
	
.one_unit {
	width: 96%;
	float: none;	
	background-color: #666;		
}
.two_unit {
	width: 96%;
	float: none;	
	background-color: #999;	
}
.four_unit {
	width: 96%;
	float: none;	
	background-color: #999;
}
.five_unit {
	width: 96%;
	float: none;	
	background-color: #666;
}

.show-2 { display: block; }


}