@import url(https://fonts.googleapis.com/css?family=Quattrocento+Sans:400,700|Open+Sans);

body {
margin: 0px;
padding: 0px;
text-align: center;
font-family: 'Quattrocento Sans', sans-serif;
font-size: 18px;
font-weight: 400;
color: #464646;
line-height: 24px;
}

a {
color: #4770a8;
text-decoration: none;
}

.inner {
max-width: 840px;
width: 96%;
padding: 0px 2% 0px 2%;
margin: 0px auto;
position: relative;
text-align: left;
}

#header {
width: 100%;
border-top: 20px solid #87c440;
background-color: #000000;
text-align: center;
position: relative;
}

#header .inner {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}

@media (max-width: 740px) {
#header .inner {
position: relative;
text-align: center;
padding: 30px 0px 30px 0px;
}
}

#header img {
display: block;
margin: 0px auto;
width: 100%;
height: auto;
max-width: 1100px;
}

@media (max-width: 740px) {
#header img {
display: none;
}
}

#logo {
position: absolute;
left: 2%;
top: 15%;
}

@media (max-width: 880px) {
#logo {
position: absolute;
left: 2%;
top: 5%;
}
}

@media (max-width: 740px) {
#logo {
position: static;
margin: 0px auto 20px auto;
display: inline-block;
}
}

#logo img {
width: 282px;
height: auto;
margin: 0px;
}

@media (max-width: 740px) {
#logo img {
display: block;
width: 100%;
max-width: 400px;
}
}

#slogan {
position: absolute;
left: 2%;
top: 60%;
font-family: 'Quattrocento Sans', sans-serif;
font-size: 21px;
font-weight: 400;
color: #ffffff;
text-transform: none;
line-height: 21px;
max-width: 400px;
margin: 0px auto;
}

@media (max-width: 740px) {
#slogan {
position: static;
text-align: left;
}
}

#slogan h3 {
padding: 0px;
margin: 0px;
font-family: 'Quattrocento Sans', sans-serif;
font-size: 28px;
font-weight: 700;
color: #ffffff;
text-transform: uppercase;
line-height: 28px;
}

#content {
padding: 30px 0px 30px 0px;
}

#content h1 {
font-family: 'Quattrocento Sans', sans-serif;
font-size: 28px;
font-weight: 400;
color: #72af42;
text-transform: uppercase;;
}

#content img {
margin: 0px 20px 0px 0px;
max-width: 100%;
}

#bottom {
background-color: #72af42;
padding: 50px 0px 50px 0px;
font-family: 'Quattrocento Sans', sans-serif;
font-size: 21px;
font-weight: 400;
color: #ffffff;
line-height: 40px;
}

@media (max-width: 800px) {
#bottom .inner {
width: auto;
display: inline-block;
}
}

#bottom img {
height: 27px;
width: auto;
margin: 0px 0px 0px 20px;
}

#bottom a.volunteer, #bottom a.resume {
font-family: 'Quattrocento Sans', sans-serif;
font-size: 17px;
font-weight: 700;
color: #ffffff;
border: 2px solid #ffffff;
display: block;
line-height: 40px;
width: 220px;
text-align: center;
text-transform: uppercase;
}

#bottom a.volunteer {
position: absolute;
right: 260px;
top: 0px;
}

@media (max-width: 800px) {
#bottom a.volunteer {
position: static;
margin: 20px 0px 0px 0px;
}
}

#bottom a.resume {
position: absolute;
right: 20px;
top: 0px;
}

@media (max-width: 800px) {
#bottom a.resume {
position: static;
margin: 20px 0px 0px 0px;
}
}

#footer {
background-color: #136f4e;
padding: 50px 0px 50px 0px;
overflow: hidden;
}

#footer .inner {
display: table;
vertical-align: middle;
}

@media (max-width: 800px) {
#footer .inner {
display: block;
}
}

#adresse {
display: table-cell;
font-family: 'Quattrocento Sans', sans-serif;
font-size: 18px;
font-weight: 400;
color: #ffffff;
line-height: 21px;
vertical-align: middle;
}

@media (max-width: 800px) {
#adresse {
display: block;
margin: 0px 0px 30px 0px;
}
}

#adresse h4 {
padding: 0px;
margin: 0px;
font-family: 'Quattrocento Sans', sans-serif;
font-size: 24px;
font-weight: 700;
color: #ffffff;
}

#adresse a {
color: #ffffff;
}

#footer-text {
display: table-cell;
width: 460px;
font-family: 'Quattrocento Sans', sans-serif;
font-size: 16px;
font-weight: 400;
color: #ffffff;
line-height: 21px;
vertical-align: middle;
}

@media (max-width: 800px) {
#footer-text {
display: block;
}
}