/* Landing - Stylesheet

	 info@alwaysawake.be

*/

/* Basics */

@import url(https://fonts.bunny.net/css?family=barlow:400,400i,600,700,700i);

html { color: #156075; font-family: 'Barlow', Arial, sans-serif; font-weight: normal; font-size: 14px; width: 100%; height: 100%; margin: 0px; padding: 0px; }
body { margin: 0px; padding: 0px; height: 100%;	background: #4891AE; background-size: cover; }
img { border: 0; display: block; }
h1, h2, h3, p, a { padding: 0; margin: 0; font-weight: normal; }
b, strong { font-weight: 700; }
a { color: #156075; text-decoration: none; }
a:hover { color: #6DA7BE; }
.clear { clear: both; }
.responsive-show { display: none !important; }

#bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #4891AE; background-size: cover; }
#cn { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: stretch; }
main { position: relative; width: 100%; margin: auto; display: flex; align-items: center; align-content: center; }
.flexbox-centered { position: relative; padding: 80px; background: #DBE9EF; box-shadow: 0px 0px 40px -30px #156075; margin: auto; max-width: 60vw; box-sizing: border-box; }
#logo { position: relative; display: block; text-align: center;}
#logo img { position: relative; display: inline-block; max-width: 80%; height: auto; }
#caption { position: relative; display: block; padding: 40px 0px 0px 0px; text-align: center; }
#caption p, #caption p a { font-size: 15px; font-weight: 600; }
#caption p { position: relative; }
#caption p.kbo { font-weight: 400; font-size: 14px; padding-top: 30px; }
#caption p:not(:last-child) { padding-bottom: 10px; }

footer { flex: none; width: 100%; text-align: center; box-sizing: border-box; padding: 0px; }
#social { position: relative; }
#social .icon { position: relative; text-align: center; display: inline-block; margin: 5px; z-index: 11; }
#social .icon i { display: inline-block; font-size: 32px; color: #fff; background: rgba(0,0,0,0.6); text-align: center; width: 32px; padding: 24px; border-radius: 50%; -webkit-border-radius: 50%; transition: all 400ms linear; }
#social .icon:hover i { background: #DE92BD; transition: all 100ms linear; }

@media only screen and (min-width: 1400px) {
	#caption p, #caption p a { font-size: 24px; }
	#caption p i { top: 8px; }
}

@media only screen and (max-width: 1400px) and (orientation: landscape) {
	.flexbox-centered { max-width: 50vw; }
}

@media only screen and (max-width: 820px) {
	.flexbox-centered { padding: 40px; max-width: 90vw; }
	#logo img { width: 240px; }
}

@media only screen and (min-width:640px) and (max-width: 800px) {
	.responsive-hide { display: none; }	
}

@media only screen and (max-width: 640px) {
	.responsive-hide { display: none !important; }
}