@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&display=swap');

:root{
	--bg1: #ededed;
	--bg2: #fff;
	--bg3: #007fc9;
	--color1: #000;
	--color2: #fff;
}

*{ margin: 0; padding: 0; }

body{ background-color: var(--bg1); font-family: "Lato", sans-serif; color: var(--color1); font-size: 16px; }

header{ display: flex; justify-content: center; align-items: center; padding: 70px 0; background-color: var(--bg2); }
header img{ display: block; width: 60%; max-width: 407px; }

.banner{ width: 100%; padding: 30px 0; text-align: center; text-transform: uppercase; color: var(--color2); background-color: var(--bg3); }
.banner h1, .banner h2{ font-size: 1.875em; }
.banner h1{ font-weight: regular; }
.banner h2{ font-weight: lighter; }

.wrap{  box-sizing: border-box; padding: 0 4%; width: 92%; margin: 0 auto; max-width: 1280px; }

main p{ padding: 70px 0; font-size: 1em; text-align: center; }
main .buttons{ text-align: center; width: 100%; margin-bottom: 100px; }

.button{ display: inline-block; padding: 20px 60px; background-color: var(--color2); margin: 10px 5px; }
main a{ font-size: 0.875em; font-weight: bold; text-decoration: none; text-transform: uppercase; color: var(--color1); }
.button img{ height: 25px; width: auto; margin-right: 10px; margin-bottom: -10px; }

footer{ text-align: center; margin-bottom: 30px; }
footer p, footer a{ display: block; margin: 10px 0; text-decoration: none; color: var(--color1); font-size: 13px; font-weight: normal; }

@media screen and (min-width: 768px){
	footer .wrap p:not(:first-child)::after, footer .wrap a:not(:first-child)::after{ content: '.'; position: absolute; bottom: 0; left: -20px; transform: translateX(-50%); }
	footer p, footer a{ position: relative; display: inline-block; margin: 0 20px; }
}