@import url("reset-type.css");

body {
    font-family: FuturaStdBook, sans-serif;
    color: #333;
    font-size: 16px;
}

#page { width: 960px; margin: auto; }
a { color: #017c8d; }

/* Header */
header { height: 110px; padding-top: 15px; position: relative; }
.logo { display: block; position: relative; }
.logo img { width: 90px; }
.logo h1 {
    color: #5d5d5d;
    text-transform: uppercase;
    font-size: 24px;
    position: absolute;
    top: 41px;
    left: 42px;
}
.logo h2 {
    font-family: FuturaStdLightCondensedObliqu;
    color: #5d5d5d;
    font-size: 24px;
    position: absolute;
    top: 70px;
    left: 80px;
}
header nav {
    width: 480px;
    position: absolute;
    bottom: 0;
    right: 0;
    background: #ccc;
}
header nav ul { display: flex; padding-left: 10px; }
header nav a {
    display: block;
    text-transform: uppercase;
    color: #e66b5b;
    font-family: FuturaStdBoldCondensed;
    font-size: 24px;
    padding: 10px;
}
header nav a:hover { color: #017c8d; }

/* Map */
#map { height: 454px; position: relative; }
#map img, #small-map img { display: block; }
#small-map { height: 117px; }
#map a {
    display: block;
    width: 100%;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: 15px;
    font-family: FuturaStdBoldCondensed;
    font-size: 24px;
    color: #bdbf55;
}
#map a:hover { color: #e66b5b; }

/* Four columns */
#top { display: flex; }
.col { width: 200px; padding: 20px; }
#top .col {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
#top p {
    text-align: center;
    font-family: FuturaStdLightCondensed;
    font-size: 24px;
    line-height: 1.5em;
}
.people { background: #bebe55; }
.technology { background: #e66b5b; }
.solutions { background: #8ac4c5; }
.projects { background: #017c8d; }

/* Home page content */
#content { background: #ccc; padding: 30px 30px 30px 0; }
#content article { display: flex; gap: 30px; }
#content img { width: 480px; align-self: flex-start; }
.project-text { flex: 1; }
#content h1, #middle h1 {
    font-family: FuturaStdBoldCondensed;
    font-size: 30px;
    margin-bottom: .5em;
    color: #5c5c5c;
}
#content p, #middle p { margin-bottom: 1em; line-height: 1.5em; }

/* Inner pages */
#middle { display: flex; }
#middle aside { background: #ccc; padding-bottom: 30px; }
#maincontent { background: #eee; }
.thirds-layout aside { width: 320px; }
.thirds-layout #maincontent { width: 640px; }
#middle article { padding: 20px; }
#maincontent img { margin-bottom: 20px; }

/* Newsletter */
#newsletter { display: flex; }
#newsletter input[type="text"] {
    flex: 1;
    min-width: 0;
    border: 2px solid #5c5c5c;
    border-right: none;
    padding: 8px;
    height: 20px;
}
#newsletter input[type="submit"] {
    width: 15%;
    text-align: center;
    font-family: FuturaStdBoldCondensed;
    border: 2px solid #5c5c5c;
    background: #017c8d;
    color: #ebebeb;
    height: 40px;
    font-size: 20px;
}
#newsletter input::placeholder { font-family: FuturaStdLightCondensedObliqu; }

/* Projects */
.half-layout aside, .half-layout #maincontent { width: 480px; }
.half-layout aside .people,
.half-layout aside .technology,
.half-layout aside .solutions { display: flex; gap: 20px; }
.globe { width: 150px; align-self: flex-start; }
.globe-text { flex: 1; }
#maincontent h2 {
    font-family: FuturaStdBoldCondensed;
    font-size: 24px;
    margin-bottom: .2em;
    text-transform: uppercase;
}
#maincontent .date { font-family: FuturaStdLightCondensedObliqu; }

/* Footer */
footer {
    display: flex;
    background: #5c5c5c;
    padding: 30px 0;
    color: #ebebeb;
}
footer a, footer .logo h1 { color: #ebebeb; }
footer p, footer li { margin-bottom: 1em; }