﻿
.column1{
	float:left;
	width: 24%;
	text-align:center;	
}

.subcolumn1outer{
	margin:0 auto;
	width: 75%;
	border:thin;
	border-style:solid;
	border-color:black;
	text-align:center;
	margin-top:40px;
	min-height:400px;
	background:#F0F0F0;
	padding:2px;
}	

.subcolumn1{
	height:100%;
	margin:0 auto;
	width: 100%;
	font-size:large;
	text-align:center;
}

.column2{
	float:left;
	width: 34%;
	background:white;
	padding:2%;
}

.col2{
	width:100%;
	text-align:center;
	margin-bottom:40px;
}

.col2 img{
	width:85%;
}

.col3{
	width:100%;
	text-align:center;
	margin-bottom:40px;
}

.col3 img{
	width:85%;
	margin-top:20px;
}

.column3{
	float:left;
	width: 34%;
	padding:2%;
}

.content{
	width:92%;
	text-align:justify;
	margin:0 auto 50px;
	clear:both;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {
	
.column1 {
	width: 26%;
	padding: 1% 4%;	
}
	
.subcolumn1outer{
	margin:0 auto;
	width: 95%;
	border:thin;
	border-style:solid;
	border-color:black;
	text-align:center;
	margin-top:40px;
	min-height:400px;
	background:#F0F0F0;
	padding:2px;
}	

.column2 {
	width: 56%;
	padding: 1% 4%;
	margin: 0px 0px 5px 5px;
	float: right;
}
	
.column3 {
	clear: both;
	padding: 1% 4%;
	width: auto;
	float: none;
}

/* for 700px or less */
@media screen and (max-width: 600px) {
	
.column1 {
	width: auto;
	float: none;
	display: none;
}
	
.column2 {
	width: auto;
	float: none;
	margin-left: 0px;
}
	
.column3 {
	width: auto;
	float: none;
}

.content {
	text-align:justify;
}

/* for 480px or less */
@media screen and (max-width: 480px) {

.column1 {
	display: none;
}

.col2 img{
	width:100%;
}

.col3 img{
	width:100%;
}

