@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=IM+Fell+Great+Primer');

html, body 	{ margin: 0; padding: 0; font-family: 'IM Fell Great Primer', serif; font-size: 22px; color: #000;}
img 		{ border: 0;}
#logo, #footer, #mbh { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease; transition: all 0.2s ease;}

.slides-navigation a 		{ font-size: 3em; color: #8D8F94; text-decoration: none;}
.slides-navigation a:hover 	{ font-size: 3em; color: #000000;}
.slides-pagination 			{ display: none;}

#header					{ position: absolute; z-index: 3; top: 0; text-align: center; width: 80%; margin: 0 10%;}
#logo						{ max-width: 400px;}

#list						{ position: relative; width: 50%; max-width: 800px; min-width: 300px; margin: 2em auto; padding: 1em; background-color: #fff; border: 1px solid #8D8F94; text-align: center; line-height: 1.5em; z-index: 1;}
#list a, #list a:hover, #list a:active, #list a:visited { color: #8D8F94; text-decoration: none;}

#footer					{ position: absolute; z-index: 3; bottom: 0; text-align: center; width: 100%;}
#footer a { display: inline-block; background-color: #8D8F94; color: #fff; text-decoration: none; margin: 0; padding: .6em 2em;}
#footer a:hover, #footer a:active, #footer a:visited { background-color: #8D8F94; color: #fff; text-decoration: none;}

#mbh 						{ position: absolute; z-index: 3; bottom: 5%; text-align: center; right: 5%;}

@media screen and (max-width:1024px) { 
	html, body 	{ font-size: 20px;}
	#logo		{ max-width: 350px;}
	#mbh 		{ position: absolute; z-index: 3; bottom: 15%; width: 100%; right: 0; text-align: center;}
}

@media screen and (max-width:768px) { 
	html, body 	{ font-size: 18px;}
	#logo		{ max-width: 350px;}
	#footer a	{ padding: .8em 1.2em;}
}

@media screen and (max-width:640px) { 
	html, body 	{ font-size: 16px;}
	#logo		{ max-width: 200px;}
	#footer a	{ padding: 1em 1em;}
}