/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select,textarea{margin:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}img,embed,iframe,object,audio,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0;text-align:left}

.root {
	display: flex;
	min-height: 100vh;
}
.root > section {
	flex: 1;
	width: 100%;
}

.root > section:nth-child(1) {
	min-width: 525px;
    max-width: 645px;
}


.sp {
	display: flex;
	flex-direction: column;
} 

.sp > header, 
.sp > main,
.sp > footer {
	padding-right: 120px;
	padding-left: 120px;
}

.sp > header {
	padding-top: 80px;
} 
.sp > main {
	flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-bottom: 30px;
	padding-top: 50px;
} 
.sp > footer {
	display: flex;
	height: 75px;
} 
.sp h3{
	color: #fff;
	font-size: 1.3em;
	font-style: italic;
	font-family: 'Raleway', sans-serif;
	padding-bottom: 1.2em;
} 
.sp h1{
	color: #fff;
	font-size: 2.3em;
	font-family: 'Raleway', sans-serif;
	padding-bottom: 1.2em;
	font-weight: bold;
} 
.sp p{
	color: #fff;
	font-family: 'Raleway', sans-serif;
} 
.sp a{
	color: #fff;
	font-family: 'Raleway', sans-serif;
} 
.sp .button {
	display: block;
	text-decoration: none;
	text-align: center;
	background-color: #fff;
	border-radius: 20px;
	padding: 15px 0;
	width: 200px;
}
.sp a.button {
	color: #000;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.8em;
}
.header-logo {
	max-width: 400px;
}

.header-logo.xl {
	width: 100%;
}

.header-logo.sm {
	display: none;
	max-height: 150px;
	max-width: 195px;
}

.bg-main-color {
	background-color: #0c7f40;
}
.bg-image {
	background-image: url('../resources/bg.jpg');
	background-position: center right;
	background-size: cover;
}

.sp > footer > p {
	font-size: 0.9em;
}
.sp > footer > p > a {
	margin-left: 20px;
	font-size: 1.2em;
}

.sp > footer {
	display: flex;
	padding-bottom: 40px;
}
.sp > footer > .sp-logo,
.sp > footer > p {
	flex: 1;
	align-self: center;
}
.sp > footer > .sp-logo > a {
	float: right;
}
.sp > footer > .sp-logo > a > img {
	height: 50px;
}

@media only screen and (max-width: 1400px) {
    .sp > header, 
	.sp > main,
	.sp > footer {
		padding-right: 80px;
		padding-left: 80px;
	}
	.sp > header {
		padding-top: 40px;
	}
}

@media only screen and (max-width: 930px) {
    .bg-main-color {
		background: linear-gradient(rgba(12, 127, 64, 0.9), rgba(12, 127, 64, 0.9)), 			
			url(../resources/bg.jpg);
		background-position: center right;
		background-size: auto 100%;
	}
	.root > section:nth-child(1) {
		min-width: auto;
		max-width: 100%;
	}
	.root > section:nth-child(2) {
		display: none;
	}
}

@media only screen and (max-width: 560px) {
	.sp .button {
		width: auto;
	}
	
	.sp > main {
		padding-top: 20px;
	}
	.sp > footer {
		height: 50px;
	}
}

@media only screen and (max-width: 500px) {
	.sp > header, 
	.sp > main,
	.sp > footer {
		padding-right: 40px;
		padding-left: 40px;
	}
	
	.sp h1{
		font-size: 2em;
	}
}

@media only screen and (max-width: 400px) {
	.sp > header, 
	.sp > main,
	.sp > footer {
		padding-right: 20px;
		padding-left: 20px;
	}
}