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

body {
	background-color: black;
				font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif; 
				font-variant: normal;
				color: #FFFFFF;
				margin: 0;
				margin-top: 20px;
			} 
article {
	margin:auto;
	width:66%;
}
			
			h1 {
				text-align: left;
				font-size: 30px;
				color: #FFFFFF;
			}
			p {

			}
			img {
			
			}
			.copyright {
				margin: 20px;
				font-size: 10px;
			}
header {
				width: 100%;
				left: auto;
				right: auto;
				margin: 20px;
				text-align: center;
				
			}
section {
				max-width: 506px;
				padding: 20px;
				margin-left: auto;
				margin-right: auto;
			}

.logo {
				display: block;
				width:100%;
				max-width:652px;
				margin:auto;

			}
.social{
				display: block;
				float: left;
}
.facebook{
				float: left;
				width: 20px;
				margin-left: 20px;
}
.twitter{
				float: left;
				width: 40px;
				margin-left: 20px;
}
.instagram{
				float: left;
				width: 40px;
				margin-left: 20px;
}

nav {
	height:32px;
	width:652px;
	margin:auto;
}

ul {
	margin:auto;
	width:100%;
    list-style-type: none;
    margin: 0;
    left-margin: 10;
    padding: 10;
}

li {
    float: left;
}

a {
    display: block;
    width: 120px;
    color: white;
    text-decoration: none;
}
#left {
			    background-color:#000000;
			    font-color:#FFFFFF;
			    width:45%;
			    float:left;
			    margin-left: 50px;
			    padding:5px;	      
}
#right {
    background-color:#000000;
    font-color:#FFFFFF;
    width:45%;
    float:left;
    padding:5px;	 	 
}

.active {
	font-weight: bold;
}

a:hover {text-decoration: underline;}

}

/*mobile start here */

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

			body {
	background-color: black;
				font-family: 'Century Gothic', 'CenturyGothic', 'AppleGothic', sans-serif; 
				font-variant: normal;
				color: #FFFFFF;
				margin: 0;
				margin-top: 20px;
			} 
			h1 {
				text-align: left;
				font-size: 30px;
				color: #FFFFFF;
			}
			p {

			}
			img {
				max-width: 100%
				height: auto;
				width: auto\9; /*ie8*/
			}
			.copyright {
				margin: 20px;
				font-size: 12px;
			}
			.site-header {
				width: 652;
				left: auto;
				right: auto;
				margin: 20px;
				text-align: center;
				
			}
			.main {
				width:90%;

			}
.logo {
				display: block;
				width:96%;
				max-width: 652px;
				margin: auto;

			}
.facebook{
				float: left;
				width: 20px;
				margin-left: 20px;
}
.twitter{
				float: left;
				width: 40px;
				margin-left: 20px;
}
.instagram{
				float: left;
				width: 40px;
				margin-left: 20px;
			}
nav {
		width:100%;
}

ul {
	margin:auto;
	width:100%;
    list-style-type: none;
    margin:0;
    left-margin: 10;
    padding: 10;
}

li {
    float: none;
	line-height: 200%;
    font-size:1rem;
    border-bottom:thin gray solid;
}

a {
    display: block;
    width: 120px;
    color: white;
    text-decoration: none;
}

.active {
	font-weight: bold;
}
#right {
	clear:both;
	width:100%;
	margin-left: 30px;
}
#left {
	width:100%;
	margin-left: 30px;
}

a:hover {text-decoration: underline;}
		}


section {
			width: 90%;
			margin-left: auto;
			margin-right: auto;
		}