* {
	box-sizing: border-box;
}

body,
html {
	background: #292E36;
	font-family: 'Open Sans', sans-serif;
	height: 100%;
	width: 100%;
}

body {
	font-size: 14px;
}

.s-show-mobile {
	display: block;
}
.s-hide-mobile {
	display: none !important;
}

img {
	max-width: 100%;
}

.wrapper {
	position: absolute;
	top: 0; left: 0;
	height: 100%;
	width: 100%;
	padding: 10px;
}

.inner {
	position: relative;
	height: 100%;
	width: 100%;
}

.corner {
	background-image: url(../corners.png);
	position: absolute;
	height: 38px;
	width: 38px;
	background-size: 76px 76px;
	display: block;
}
.corner:first-of-type {
	top: 0;
	left: 0;
	background-position: left top;
}
.corner:nth-of-type(2) {
	top: 0;
	right: 0;
	background-position: right top;
}
.corner:nth-of-type(3) {
	bottom: 0;
	right: 0;
	background-position: right bottom;
}
.corner:nth-of-type(4) {
	bottom: 0;
	left: 0;
	background-position: left bottom;
}


.content {
	color: #fff;
	max-width: 370px;
	margin: 0 auto;
	padding: 30px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.content h1,
.content h2,
.content h3,
.content p {
	font-size: 1em;
	letter-spacing: .025em;
	margin: 0;
	line-height: 1.7;
}

.content p {
	font-weight: 300;
	letter-spacing: 0;
}

.content h1 {
	color: #0F7CCA;
	text-transform: uppercase;
}

.content a {
	color: inherit;
	text-decoration: none;
}
.content a:hover {
	color: #0F7CCA;
}

.content > *:not(img) {
	display: block;
	padding: 0 0 0 18.2%;
}

.content__brand {
	margin: 15px 0;
	display: block;
	vertical-align: top;
}



@media (min-width: 768px) {
	body {
		font-size: 25px;
	}

	.s-show-mobile {
		display: none !important;
	}
	.s-hide-mobile {
		display: block !important;
	}

	.wrapper {
		padding: 25px;
	}

	.corner {
		height: 115px;
		width: 115px;
		background-size: 230px 230px;
	}

	.content {
		padding: 50px;
		max-width: 940px;
	}

	.content__brand {
		margin: 40px 0;;
	}
}