audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}

body, html {
	height: 100%;
	width: 100%;
}

*, *:after, *:before { 
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box; 
}

.clearfix:before, 
.clearfix:after { 
	content: ''; 
	display: table; 
}

.clearfix:after { 
	clear: both; 
}
body {
	background: #e7eaec;
	font-family: 'Montserrat', sans-serif;
}
a {
	text-decoration: none;
	outline: none;
}
a:hover {
	color: rgba(0,0,0,0.6);
	text-decoration: none;
	outline: none;
}
a:focus {	
	text-decoration: none;
	outline: none;
}
.active,
.active a {
	color: #ffc984 !important;
}
.active a {
	text-decoration: underline;
}
h2 {
	padding: 0 10px;
  margin: 20px 0 0;  
  border-bottom: 1px dashed #ccc;
}

h1 {
	margin: 0;
	font-size: 27px;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: center;
	margin-top: 10px;
}
ul li {
	display: inline-block;
	width: 110px;
	font-weight: 600;
	text-align: center;
}
ul li a {
	color: #fff;
}
ul li span {
	display: block;
	font-size: 11px;
	font-weight: normal;
}
.container {
	width: 1000px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: row;
	align-items: center;
}
.container section {
	width: 600px;
	box-sizing: border-box;
	padding: 35px 10px;	
  box-shadow: -2px 0 8px #ccc;
}

.container section:first-of-type {
	box-shadow: 10px 0px 3px 1px #5f5f5f;
  z-index: 50;
}

.container section:last-of-type {
	width: 400px;
	height: 230px;
	align-items: center;
	align-content: center;
	justify-content: center;
	display: flex;
	flex-direction: column;
	background: #6284d4;
	box-shadow: none;
	color: #fff;
}


#howto {
  margin: 10px auto;
  font-size: 13px;
}
#howto h2 {
  border-bottom: 1px dashed #ccc;
  margin: 50px auto 75px;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.7);
}
#howto h3 {
  font-size: 19px;
  text-align: left;
  font-weight: 700;
  margin: 0;
}
#howto p {
	margin: 0;
}
#howto pre {
  display: flex;
  margin: 10px auto 70px !important;
}

footer {
	text-align: center;
	color: #fff;
	padding: 10px 0;
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	background: #6284d4;
	font-size: 14px;
}
footer a {
  color: #fff !important;
  text-decoration: none;
}
footer a:hover {
  color: #191919 !important;
  text-decoration: none;
  -moz-transition: all 0.15s linear;
  -webkit-transition: all 0.15s linear;
  -ms-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  transition: all 0.15s linear;
}

@media screen and (max-width: 1000px){
	.container {
		width: 100%;
		flex-direction: column;
	}
	.container section:first-of-type { 
		box-shadow: none; 
	}
}
@media screen and (max-width: 718px) {
	.container section {
		width: 100%; 
		padding: 10px 15px; 
	}
}
@media screen and (max-width: 420px) {
	.container {
		position: relative;
		margin: 0px auto;
		box-sizing: border-box; 
	}

}