/* RESPONSIVENESS */


	/* 2 COLUMN LAYOUT */
@media only screen and (min-width: 768px) and (max-width: 960px) {

	#wrapper {
		width: 100%;
		margin: 5%;
	}

	.header {
		clear: both;
		width: 90%;
		margin: 0% 1% 0% 1%;
		padding-right: 1%;
		border-bottom: 1px solid #f0f0f0;
	/*	border: red solid thin;	*/
	}

	.header nav { 
		float:right;
		padding: 1% 2% 1% 0%;
		margin: 0% 0% 0% 0%;
		font-size: 1em;
	/*	border: red solid thin;	*/
	}

	nav ul.menu li { 
	display: block;
	}

	#feature img {
		display: block;
		width: 90%;
		height: auto;
		line-height: 0;
		padding: 0;
		margin: 2% 5% 0% 1%;
	/*	border: red solid thin;	*/
	}


	#main {
		width: 90%;
		clear: both;
		border-bottom: 1px solid #f0f0f0;
	}

	#main h3 {
		width: 80%;
	/*	border: red solid thin;	*/
	}

	.col-1, .col-2, .col-3 {
		width: 90%;
		float: left;
		padding: 0% 0% 0% 0%;
		margin: 1% 1% 5% 5%;
		text-align: justify;
		background-color: #dedede;
		border: solid #dedede thin;
	/*	border: red solid thin;	*/
	}

	.col-1 img, .col-2 img, .col-3 img {
		width: 50%;
		float: left;
		margin-top: : 30%;
		margin-bottom: 0%;
		margin-right: 5%;
		padding: 10% 0% 10% 0%;
		border: solid #efefef 2px;
	/*	border: red solid thin;	*/
	}

	.col-1 h3, .col-2 h3, .col-3 h3 {
		text-align: center;
		padding-right: 10%; 
		padding-left: 10%;
		/*	border: red solid thin;	*/
		font-size: 15pt;
	}

	.col-1 article p, .col-2  article p, .col-3 article p {
		width: 70%;
		/*float: left;*/	
		/*margin-left: 15px;*/
		/*	border: red solid thin;	*/
		padding: 0% 0% 0% 20%;
		margin: 0% 0% 0% 8%;
		text-align: justify;
	}

	footer {
		/*	border-top: 1px solid #f0f0f0; */
		width: 90%;
		margin: 0% 2% 0% 0%;
		padding-right: 5%;
		clear: both;
		/*	border: red solid thin;	*/
	}

}

	
	/* 1 COLUMN LAYOUT */
@media only screen and (min-width: 320px) and (max-width: 767px) {

#wrapper {
	width: 90%;

	}

.header h1.logo {
	padding-top: 5%;
	font-size: 20pt;
	}

.header {
	clear: both;
	width: 90%;
	padding: 0% 10% 0% 0%;
	border-bottom: 1px solid #f0f0f0;
/*	border: red solid thin;	*/
	}

.header nav {
	float: left;
	position: relative;
	clear: both;
	padding: 0% 0% 2% 0%;
	font-size: 0.6em;
/*	border: red solid thin;	*/
	}


nav ul.menu li {
	display: block;
	position: relative;
	font-size: 0.85em;
/*	border: red solid thin;	*/
	}

ul.menu .sub-menu {
	padding: 0% 0% 0% 5%;
	margin: 0% 5% 0% 5%;
/*	border: red solid thin;	*/
	}

ul.menu .sub-menu a {
	-webkit-column-count:2;
	-moz-column-count:2;
	column-count: 2;
	width: 50%;
	padding: 0;
	margin: 0;
	}

#feature img {
	display: block;
	width: 90%;
	padding: 3% 0% 3% 0%;
	margin: auto;
/*	border: red solid thin;	*/
	}

#main {
	width: 100%;
	clear: both;
	border-top: 1px solid #f0f0f0;
	padding-bottom: 0%;
/*	border: red solid thin;	*/
	}

h2 {
	font-size: 15pt;
	}
	
.col-1, .col-2, .col-3 {
	width: 90%;
	display: block;
	padding: 0% 0.9% 0% 0%;
	margin: 1% 1% 8% 4%;
	background: #dedede;
/*	border: red solid thin;	*/
	}

.col-1 img, .col-2 img, .col-3 img {
	display: block;
	width: 90%;
	padding: 2% 5.5% 2% 5.5%;
	margin:0% 0% 2% 0%;
	}

.col-1 h3, .col-2 h3, .col-3 h3 {
	text-align: left;
	font-size: 12pt;
/*	border: red solid thin;	*/
	}


.col-1 article p, .col-2  article p, .col-3 article p {
	width: 83%;
	margin: 0% 0% 3% 6%;
	padding: 0% 3% 0% 1%;
	font-size: 10pt;
/*	border: red solid thin;	*/
	}

footer {
	width: 100%;
/*	border: red solid thin;	*/
	}
}