@font-face {
    font-family: idealist;
    src: url(IdealistSansLight.otf)}
#home {width: 50%;
		background-color: #ffffff;
		padding: 8%;
		padding-top: 3%;
		margin: auto;
		/**margin-top: 8%;**/
		margin-bottom: 12%;
		/**vertical-align: 50%;**/
		font-family: "idealist", Arial, sans-serif;
		box-shadow: 10px 10px 5px #888888}
#container {}
#learn{background-color: #c7c7c7; 
		text-align: center;
		}
#learn:hover {background-color: #d7d7d7;}
body {padding: 10px;
	 	  }
p{font-family: idealist;
	margin:5%;}
h1{font-size:
	}
h2{font-weight: 100;
	
	color: #555555;}
img.mainlogo {margin: 30px; 
margin-left: 0px}
h2.mainh2 {padding-top: 15px;}
html {background-color: #d3d3d3;}
a{ 	color: black;
	text-decoration: none;
	outline: 0;}

/** MOBILE SIZING **/

@media only screen and (min-width: 1108px) {
	#home { width: 975px;
			height: 300px;
			margin-right: 20px;}
	#container {width: 1175px;
			height: 300px;
			margin: 0 auto;}
}

@media only screen and (min-width: 1080px) and (max-width: 1107px){
	img.mainlogo{ margin-right: 72px;}}
	
@media only screen and (max-width: 859px) {
	img.mainlogo {max-width:100%;
		height:auto;}
}

@media only screen and (max-width: 658px) {
	img.mainlogo {max-width:50%;
		height:auto;
		margin: 0px;
		margin-right: 10px;
		
		padding: 0px;}
	h2.mainh2 {padding-top: 0px;
			   margin-top: 0px;
			   font-size: 18px;}
	#home { width: 75%;		}
}

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

img.mainlogo{display: none;}
h2.mainh2 {font-size: 24px;}}