#logo {
	width: 230px;
	position: relative;
	z-index: 2;
	margin-bottom: 5%;
}
#logo svg {
	fill: #fff;
	display: block;
}

body {
	font-family: 'The Sans';
	font-size: 1.1em;
	line-height: 1.7;
	font-weight: 300;
	background: #9b907c;
	color: #fff;
}

.popup-content {
	box-sizing: border-box;
	padding: 1em;
}

.popup-content h2 {
	font-size: 2em;
	margin-bottom: .3em;
	color: #9b907c;
	font-weight: 400;
	font-family: "joehand"
}

.popup {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 90%;
	background: rgba(255, 255, 255, .85);
	color: #9b907c;
	z-index: 5;
}

.shadow {
	filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, .6));
}

ul {
	list-style-type: none;
  }

.text-blue {
	color: blue;
}

.text-red {
	color: red;
}

.text-brown {
	color: brown;
}

.fas {
	text-align:center;
	display: inline-block;
	width: 2rem;
}

.container {
	margin: auto;
}

img {
	max-width: 100%;
	height: auto;
	border-radius: 1%;
}

.cont {display: inline-block; vertical-align: middle; position: relative}

.header {
	font-size: 2em;
	margin-bottom: .3em;
	font-weight: 400;
	font-family: "joehand";
	text-align: center;
}

canvas {
	background-color: #fff;
	padding: 1rem;
	width: 80% !important;
	margin: auto;
	margin-bottom: 1rem;
}

@media (min-width:10px) {
	.container {
		max-width: 540px;
	}
	.landscape {
		display: none;
	}
		
	.portrait {
		display: block;
	}

	.popup {
		max-width: 190px;
		font-size: 0.8em
	}

	.p1 {
		top: 25%;
		left: 35%;
	}

	.p2 {
		top: 50%;
		left: 35%;
	}

	.p3 {
		top: 75%;
		left: 35%;
	}

	.popup-content h2 {
		font-size: 1.5em;
		margin-bottom: .1em;
		font-weight: 250;
	}

	body {
		font-size: 1em;
		line-height: 1.2;
		font-weight: 150;
	}
	#logo {
		margin: auto;
		margin-bottom: 5%;
		left: 0px;
		top: 0px;
	}

}

@media (min-width:768px) {
	.container {
		max-width: 720px
	}
	
}

@media (min-width:992px) {
	.container {
		max-width: 960px
	}
	.landscape {
		display: block;
	}
		
	.portrait {
		display: none;
	}

	.popup {
		max-width: 255px;
		font-size: 1em
	}

	.p1 {
		top: 55%;
		left: 25%;
	}

	.p2 {
		top: 55%;
		left: 50%;
	}

	.p3 {
		top: 55%;
		left: 75%;
	}

	.popup-content h2 {
		font-size: 2em;
		margin-bottom: .3em;
		font-weight: 400;
	}
	
	body {
		font-size: 1.1em;
		line-height: 1.7;
		font-weight: 300;
	}
	#logo {
		margin: 0%;
		margin-bottom: 2.5%;
		left: 20px;
		top: 20px;
	}
}

@media (min-width:1200px) {
	.container {
		max-width: 1200px
	}
}

@media (min-width:1600px) {
	.container {
		max-width: 1600px
	}
}

@font-face {
	font-family: 'The Sans';
	src: url(../fonts/thesansot3-webfont.eot);
	src: url('../fonts/thesansot3-webfont.eot?#iefix') format('embedded-opentype'), url(../fonts/thesansot3-webfont.woff) format('woff'), url(../fonts/thesansot3-webfont.ttf) format('truetype'), url('../fonts/thesansot3-webfont.svg#thesansot3_light') format('svg');
	font-weight: 300;
	font-style: normal
}

@font-face {
	font-family: 'The Sans';
	src: url(../fonts/thesansot3i-webfont.eot);
	src: url('../fonts/thesansot3i-webfont.eot?#iefix') format('embedded-opentype'), url(../fonts/thesansot3i-webfont.woff) format('woff'), url(../fonts/thesansot3i-webfont.ttf) format('truetype'), url('../fonts/thesansot3i-webfont.svg#thesansot3_light_italic') format('svg');
	font-weight: 300;
	font-style: italic
}

@font-face {
	font-family: 'The Sans';
	src: url(../fonts/thesansot5-webfont.eot);
	src: url('../fonts/thesansot5-webfont.eot?#iefix') format('embedded-opentype'), url(../fonts/thesansot5-webfont.woff) format('woff'), url(../fonts/thesansot5-webfont.ttf) format('truetype'), url('../fonts/thesansot5-webfont.svg#thesansot5_plain') format('svg');
	font-weight: 500;
	font-style: normal
}

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

@font-face {
	font-family: 'The Sans';
	src: url(../fonts/thesansot7-webfont.eot);
	src: url('../fonts/thesansot7-webfont.eot?#iefix') format('embedded-opentype'), url(../fonts/thesansot7-webfont.woff) format('woff'), url(../fonts/thesansot7-webfont.ttf) format('truetype'), url('../fonts/thesansot7-webfont.svg#thesansot7_bold') format('svg');
	font-weight: 700;
	font-style: normal
}

@font-face {
	font-family: 'joehand';
	src: url(../fonts/joehand3-webfont.woff2) format('woff2'), url(../fonts/joehand3-webfont.woff) format('woff');
	font-weight: 400;
	font-style: normal
}

@font-face {
	font-family: 'the_sans_black-italic';
	src: url(../fonts/thesans_black_italic-webfont.woff2) format('woff2'), url(../fonts/thesans_black_italic-webfont.woff) format('woff');
	font-weight: 400;
	font-style: normal
}

@font-face {
	font-family: 'The Sans Bold Italic';
	src: url(../fonts/thesans-bold-italic-webfont.woff2) format('woff2'), url(../fonts/thesans-bold-italic-webfont.woff) format('woff');
	font-weight: 400;
	font-style: normal
}