@font-face {
    font-family: 'Clear';
    src: url('../fonts/clearsans-thin.woff') format('woff');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Clear';
    src: url('../fonts/clearsans-light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Clear';
    src: url('../fonts/clearsans-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Clear';
    src: url('../fonts/clearsans-italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Clear';
    src: url('../fonts/clearsans-medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'clear_sans_mediumitalic';
    src: url('../fonts/clearsans-mediumitalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Clear';
    src: url('../fonts/clearsans-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Clear';
    src: url('../fonts/clearsans-bolditalic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
}

html {
height: 100%;
box-sizing: border-box;
}

*, *::before, *::after {
box-sizing: inherit;
}

body {
min-height: 100%;
margin: 0;
padding: 0;
font: 400 18px/1.4 "Clear", sans-serif;
color: #000;
background-color: #f4f4f4;
}

.wrapper {
min-height: 100vh;
display: grid;
grid-auto-rows: auto 1fr;
}

header {
padding: 40px 0;
font-size: 0.889em;
font-weight: 500;
color: #fff;
text-transform: uppercase;
background-color: #8e0407;
}
main {
padding: 1.25em 2.5em;
display: flex;
place-items: center center;
background: url(../assets/background1.jpg) no-repeat center top;
background-size: cover;
}

.column_width {
max-width: 800px;
margin: 0 auto;
padding: 0 40px;
text-align: center;
}
.column_width.text {
padding: 2.5em;
background-color: rgba(255, 255, 255, 0.8);
}
.column_width.text p:last-child {
margin-bottom: 0;
}


img {
display: block;
margin: 0 auto;
}
.logo {
width: 300px;
}
.location {
height: 1.889em;
}

a {
color: #8e0407;
text-decoration: none;
}
a:hover,
a:focus {
color: #333;
}

h3 {
margin: 0 1em;
font-size: 1.111em;
line-height: normal;
}


@media all and (max-width: 1023px) {

.logo {
width: 220px;
}

}
@media all and (max-width: 479px) {

body {
font-size: 16px;
}
main {
padding: 1.25em 1em;
}

.column_width.text {
padding: 2em;
}

}