/* Fonts */
@import 'fonts/stylesheet.css';
/* @import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); */

@font-face {
	font-family: 'omnes';
    src: url('fonts/omnes-webfont.eot');
    src: url('fonts/omnes-webfontd41d.eot?#iefix') format('embedded-opentype'),
         url('fonts/omnes-webfont.woff') format('woff'),
         url('fonts/omnes-webfont.ttf') format('truetype'),
         url('fonts/omnes-webfont.html#AnimalsNormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	font-family: 'omnes', Calibri, Arial, sans-serif;
	font-size: 100%;
	-webkit-font-smoothing: antialiased;
	background-color: #e0e0e0;
	padding: 0;
	margin: 0;
	height: 100%;
}

h2,h3,h4 {
	max-width: 82%;
	margin: auto;
}

p {
	max-width: 82%;
	margin: auto;
	text-indent: 2em;
}


li {
	max-width: 76%;
	margin: auto;
}

ul {
	margin: 4px auto 4px auto;
}

.card {
	max-width: 50%;
	margin : 80px auto 0 auto;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
	padding: 65px 5px 65px 5px;
	background-color: #fff;
	border-radius: 7px;
	box-sizing: border-box;
}

#topbar {
	position: absolute; 
	z-index: -1; 
	height: 200px; 
	top: 0px;
	left: 0px; 
	right: 0px; 
	background: #757575;
}

#bottombar {
	margin : 1.5%;
}

/* * * * ALT * * * */
@media screen and (max-height: 1020px) and (max-width: 850px) {

	body {
		font-size: 70%;
	}


	#topbar {
		background: #e0e0e0;
	}
	
	.card {
		max-width: 100%;
		margin : 1.5%;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
		padding: 25px 2px 25px 2px;
		background-color: #fff;
		border-radius: 7px;
		box-sizing: border-box;
	}
}

@media screen and (max-height: 1020px) and (max-width: 850px) and (orientation: landscape) {
	
	body {
		font-size: 70%;
	}


	#topbar {
		background: #e0e0e0;
	}
	
	.card {
		max-width: 82%;
		margin : 60px auto 0 auto;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
		padding: 35px 2px 35px 2px;
		background-color: #fff;
		border-radius: 7px;
		box-sizing: border-box;
	}
}

@media screen and (min-height: 1020px) and (max-height: 1366px) and (min-width: 764px) and (orientation: portrait) {
	
	.card {
		max-width: 82%;
		margin : 70px auto 0 auto;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
		padding: 35px 2px 35px 2px;
		background-color: #fff;
		border-radius: 7px;
		box-sizing: border-box;
	}
}


@media screen and (min-width: 1020px) and (max-width: 1366px) and (min-height: 764px) and (orientation: landscape) {
	
	.card {
		max-width: 82%;
		margin : 90px auto 0 auto;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
		padding: 35px 2px 35px 2px;
		background-color: #fff;
		border-radius: 7px;
		box-sizing: border-box;
	}

}