﻿@font-face {
    font-family: 'OpenSans-Regular';
    src: url('../Fonts/OpenSans-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'OpenSans-Light';
    src: url('../Fonts/OpenSans-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'OpenSans-Bold';
    src: url('../Fonts/OpenSans-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'OpenSans-ExtraBold';
    src: url('../Fonts/OpenSans-ExtraBold.ttf') format('truetype');
}

/*HEADER*/
.page-wrap {
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
    justify-content: center;
    align-items: center;
}
.MainTitle {
    width: 50%;
    text-align: right;
    padding-right: 45px;
}
    .MainTitle .FirstWord {
        font-style: italic;
        font-family: 'OpenSans-regular';
        font-size: calc(30px + (55 - 30) * ((100vw - 300px) / (1600 - 300)));
    }
    .MainTitle .SecondWord {
        font-family: OpenSans-bold;
        font-size: calc(30px + (55 - 30) * ((100vw - 300px) / (1600 - 300)));
    }
.Address {
    width: 50%;
    font-family: OpenSans-Regular;
    font-size: calc(10px + (13 - 10) * ((100vw - 300px) / (1600 - 300)));
}

/*CONTENT*/
.MainContent {
    width: 100%;
    padding-top: 40px;
}
.ListItems {
    margin: 0 auto;
    text-align: left;
    width: 50%;
}
.Items {
    padding: 5px;
    font-family: OpenSans-Regular;
    font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
}
@media screen and (max-width: 550px) {
    .MainTitle {
        width: 95%;
    }

    .ListItems {
        width: 95%;
    }
}

footer {
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
    justify-content: center;
    align-items: center;
}
.wrapper {
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    font-family: OpenSans-bold;
    font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1600 - 300)));
}
@media screen and (max-width: 550px) {
    .wrapper {
        display: block;
    }
        .wrapper div {
            padding: 10px;
        }
}