#header {background-color:#2c3e50;}
#header ul li a {color:#bdc3c7;}
#header div, #header h1 {color:#fff;}
#contact {background-color:#304458;color:#e9ecee;}
#copyright {background-color:#233140;color:#959ca3;}

body {font-family:arial;}
body, #header h1, #header ul, #header ul li,#hero h2,#hero p {margin:0;}
h2,h3 {font-family:'Segoe UI Light','HelveticaNeue-Light','Helvetica Neue Light','Ubuntu Light';}	
a {text-decoration:none;outline:none}
#hero, img {image-rendering:pixelated;}
.float {overflow:hidden;width:100%;}
.left {float:left;}
.right {float:right;}

#header {overflow:hidden;width:100%}
#header div {display:none;}
#header ul, #header ul li, #ribbon {float:left}
#header h1, #header div {font-size:34px;}
#header h1 {padding:16px 0 16px 45px;}
#header ul {padding:0;}
#header ul li {font-weight:bolder;padding:28px 0 0px 45px;list-style:none;}

#hero {
	height:400px;
	background-color:#F7F9FA;
	padding:50px;
	background-repeat:no-repeat;
	background-size:100% auto;
	background-position-y:50%;
	position:relative;
}
#hero div {position:absolute;bottom:100px;width:60%;}
#hero h2 {font-size:48px;line-height:40px;line-height:60px;font-weight:400;color:#f4f4f4;}
#hero p {font-size:20px;line-height:28px;color:#c8c8c8;}

.light {background-color:#f7f9fa;}
.dark {background-color:#ecf0f1;}

.row {padding:50px;}
.row h3 {margin:0 0 20px;padding:0;font-size:40px;color:#1c2b39;font-weight:400;}
.row p {font-size:20px;color:#7f8c8d;line-height:1.6;}
.row .left,.row .right {width:47%;}
.row .left {padding-right:10px;}
.row .right {padding-left:10px;}

#contact {padding:50px;}
#contact div div {width:33%;text-align:center;}

#copyright {padding:10px 50px;text-align:center;}


@media (max-width: 1050px) {
	#header div {display:block;float:left;padding:15px 0 0 20px;}
	#ribbon {width:90%;}
	#header h1 {text-align:center;}
	#header ul {display:none;width:100%;text-align:center;height:calc(100% - 70px);overflow:auto;}
	#header ul li {display:block;float:none;padding:0 0 20px 0;}
	#ribbon:target ~ #menu {display: block;font-size:20px}

	#hero {
		background-size:auto 100%;
		background-position-x:50%;
		height:300px;
	}
	#hero h2 {font-size:30px;line-height:30px;margin-bottom:10px;}
	#hero p {font-size:16px;line-height:18px;}
	#hero div {position:absolute;bottom:10px;width:90%;padding:5px;}

	.left,.right {float:none}
	#hero, #contact, #copyright {padding:2px}
	.row {padding:50px 5px;}
	.row .left,.row .right {width:100%;padding:0;}
	.row h3, .row p, #contact div div, #copyright {text-align:center}
	.row h3 {font-size:30px;margin-top:20px}
	.row p {font-size:16px; margin:auto 10px;}
	#copyright small {display:block}

	#contact div div, #copyright small {width:100%;padding:15px 0;text-align:center}
}