body {
font-family: 'Raleway', sans-serif;
font-weight:400;
font-size:17px;
margin:0;
padding:0;
}

.clear {
clear:both;
}

.wrap {
width:100%;
max-width:1260px;
display:block;
margin:0 auto;
padding:100px 0;
}

#upper {
background: #e69d45;
color:#fff;
}


#upper .logotype{
width:186px;
float:left;
margin:100px 70px;
}

#upper .logomark{
width:109px;
float:right;
margin:50px;
}

#upper .header {
width:35%;
text-align:right;
display:inline-block;
padding: 0 30px 0 0;
}

#upper .header h1 {
font-family: 'Abril Fatface', cursive;
line-height:1;
font-size:65px;
font-weight:400;
margin:0;
}

#upper .header h2 {
font-family: 'Didact Gothic', sans-serif;
line-height:1;
font-size:40px;
font-weight:400;
margin:0;
}

#upper .text {
width:45%;
display:inline-block;
line-height:1.5;
font-weight:400;
}

#lower {
background:#fff;
color:#525355;
}

#lower h2 {
text-align:center;
color:#e69d45;
text-transform:uppercase;
font-weight:600;
}


#lower .grid {
margin:50px auto;
text-align:center;
}

#lower .grid div {
width:90%;
max-width:230px;
display:inline-block;
margin:50px;
text-align:center;
vertical-align:top;
font-weight:400;
}

#lower .grid div img {
width:128px;
}

#lower .grid div h3 {
text-align:center;
color:#e69d45;
margin-bottom: 5px;
text-transform:uppercase;
font-weight:600;
}

#lower .grid div a {
text-decoration:none;
color:#525355;
}

#lower .grid div h3 a {
color:#e69d45;
}

#lower .grid div a:hover {
opacity:0.6;
}

@media only screen and (max-width: 767px) {

#upper .logotype{
width:136px;
margin:60px 20px 20px 20px;
}

#upper .logomark{
width:59px;
margin:40px 20px 20px 20px;
}

#upper .header {
width:90%;
text-align:center;
display:block;
margin:10px auto;
padding: 10px 0;
}

#upper .text {
width:90%;
text-align:center;
display:block;
margin:10px auto;
padding: 10px 0;
}

}

@media only screen and (max-width: 480px) {

#lower .grid div {
display:block;
margin:50px auto;
}

}