* {
    box-sizing: border-box;
}

htmL {
    height: 100vh;
    font-family: Verdana;
    background: rgb(252,247,241);
}

body {
    height: 100%;
    margin: 0;
}

.grid-container {
    height: 100%;
    display: grid;
    grid-template-areas: 
        'header header header header'
        'maintenance maintenance maintenance maintenance'
        'left left right right'
        'footer footer footer footer';
}

.header {
    grid-area: header;
    padding-right: 5%; 
    padding-left: 5%;
    background: rgb(132,110,99);
    text-align: left;
}

.maintenance {
    grid-area: maintenance;
    text-align: center;
}

.left_padding {
    grid-area: left_padding;
}

.right_padding {
    grid-area: right_padding;
}

.left {
    grid-area: left;
    text-align: center;
}

.left > img {
    height:80%;
}

.right {
    grid-area: right;
}

.right > iframe {
    display: block;
    margin: auto;
    margin-top: 10%;
}

.right > ul {
    margin: auto;
    margin-top: 5%;
    margin-left: 10%;
    margin-right: 10%;
    padding-left: 20px;
    list-style: none;
}

.right > ul > li {
    margin-bottom: 10px;
}

.right > ul > li:nth-child(1)::before {
    font-family: 'FontAwesome';
    content: '\f041';
    margin: 0 18px 0 -12px;
}

.right > ul > li:nth-child(2)::before {
    font-family: 'FontAwesome';
    content: '\f0e0';
    margin: 0 15px 0 -15px;
}

.right > ul > li:nth-child(3)::before {
    font-family: 'FontAwesome';
    content: '\f095';
    margin: 0 16px 0 -14px;
}

.footer {
    grid-area: footer;
    background: rgb(132,110,99);
    padding: 10px;
}

.footer-grid {
	display: grid;
	grid-row-gap: 10px;
	grid-template-areas: 
		'footer-text . . . . . widget'
}

.footer-text {
    grid-area: footer-text;
	text-align: right;
	margin: auto;
}

.widget-albo {
    grid-area: widget;
	text-align: right;
	margin: auto;
}

@media (max-width: 600px) {
    .header {
        grid-area: header;
        background: rgb(132,110,99);
        text-align: center;
    }
    .grid-container {
        grid-template-areas: 
            'header header header header'
            'maintenance maintenance maintenance maintenance'
            'right right right right'
            'left left left left'
            'footer footer footer footer';
    }
	.footer-grid {
        grid-template-areas: 
            'widget'
            'footer-text'
		
    }
}