body {
	margin: 0;
	color: #2a509a;
	font-family: 'Open Sans';
}

a {
	color: #2a509a;
	text-decoration : none;
	-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

a:hover {
	color: #9e9e9e;
}

h1 {
	font-size: 20px
}

h2 {
	font-size: 18px
}

h3 {
	font-size: 16px
}

.wrapper {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-gap: 0;
	grid-auto-rows: minmax(auto, auto);
}

.wrapper > header {
	grid-column: 1;
	grid-row: 1;
	position: relative;
	overflow: hidden;
	height: 190px;
	z-index:2;
}

.wrapper > header:before {
	content: "";
	position: absolute;
	width: 200%;
	height: 200%;
	top: -133%;
	left: -50%;
	background-color: #9e9e9e;
	-webkit-transform: rotate(-5deg);
	transform: rotate(-5deg);
	z-index:-1;
}

.wrapper > header div {
	-webkit-transform: rotate(-5deg);
	transform: rotate(-5deg);
	z-index:1;
}

.wrapper > header h1 {
	position: absolute;
    top: 100px;
	right: 25px;
	/*right: 15px;*/
    margin: 0;
    padding: 0;
	color: #ffffff;
	font-size: 19px;
	font-weight: normal;
}

.wrapper > header h1 span:first-child {
	color: #f4c400;
}

.wrapper > header h1 span:last-child {
	color: #2a509a;
}

.wrapper > header h2 {
	position: absolute;
    top: 135px;
	right: 25px;
    margin: 0;
    padding: 0;
	font-size: 19px;
	font-weight: normal;
}

.wrapper > header p {
	position: absolute;
    top: -5px;
    left: 25px;
	width: 82px;
	height: 82px;
	box-sizing: border-box;
	padding: 15px 0;
	text-align: center;
	border: 1px #ffffff solid;
	background-color: #8e8e8e;
	-webkit-transform: rotate(5deg);
	transform: rotate(5deg);
}

.wrapper > header p img {
	width: 59px;
	height: 49px;
}

.wrapper > header nav {
	position: absolute;
    left: 115px;
	box-sizing: border-box;
	-webkit-transform: rotate(5deg);
	transform: rotate(5deg);
}

.wrapper > header nav ul {
	padding: 0;
	list-style: none;
}

footer {
	grid-column: 1;
	grid-row: 3;
	padding: 15px;
	background-color: #9e9e9e;
	color: #ffffff;
}

footer a {
	color: #f4c400;
}

footer a:hover {
	color: #2a509a;
}

main {
	grid-column: 1;
	grid-row: 2;
	padding: 15px;
}

main h2 {
	color: #9e9e9e;
}

.text-yellow {
	color: #f4c400;
}

@media screen and (min-width: 768px) {
	h1 {
		font-size: 30px
	}

	h2 {
		font-size: 20px
	}

	h3 {
		font-size: 18px
	}

	.wrapper > header {
		height: 233px;
	}

	.wrapper > header h1 {
		top: 90px;
		font-size: 34px;
	}

	.wrapper > header h2 {
		top: 155px;
		font-size: 24px;
	}

	.wrapper > header p {
		width: 164px;
		height: 164px;
		padding: 30px 0;
	}
	
	.wrapper > header p img {
		width: 118px;
		height: 99px;
	}

	.wrapper > header nav {
		top: 160px;
		left: 200px;
	}

	.wrapper > header nav ul li {
		display: inline-block;
	}

	footer p {
		display: inline-block;
	}
}

@media screen and (min-width: 992px) {
	.wrapper > header h1 {
		font-size: 46px
	}

	.wrapper > header h2 {
		font-size: 32px;
	}
}

@media screen and (min-width: 1024px) {
	.wrapper > header h1 {
		top: 85px;
		font-size: 48px;
	}
}

@media screen and (min-width: 1200px) {
	.wrapper > header h1 {
		top: 70px;
		font-size: 58px;
	}
}

@media screen and (min-width: 1440px) {
	.wrapper > header h1 {
		top: 55px;
		font-size: 72px;
	}
}

@media screen and (min-width: 1920px) {
	.wrapper > header {
		height: 293px;
	}

	.wrapper > header h1 {
		top: 90px;
	}

	.wrapper > header h2 {
		top: 195px;
	}

	.wrapper > header p {
		top: 40px;
	}

	.wrapper > header nav {
		top: 200px;
	}
}

@media screen and (min-width: 2560px) {
	.wrapper > header {
		height: 343px;
	}

	.wrapper > header h1 {
		top: 120px;
	}

	.wrapper > header h2 {
		top: 235px;
	}

	.wrapper > header p {
		top: 60px;
	}

	.wrapper > header nav {
		top: 225px;
	}
}