html, body{
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img{
	display: block;
}

@font-face {
  font-display: swap; 
  font-family: 'Signika';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/signika-v29-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap; 
  font-family: 'Signika';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/signika-v29-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
  font-family: 'Signika', sans-serif;
  background: #fff;
  color: #222;
  line-height: 1.5;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover{
  text-decoration: underline;
}
img {
  max-width: 100%;
  display: block;
}

header {
  background: #000;
}

header .inside {
  max-width: 1100px;
  margin: auto;

  display: flex;
  align-items: center;
  justify-content: center;
}

header img:first-child {
  width: 10vw;
}

header img:last-child {
 	width: 50vw;
}

main {
  max-width: 1100px;
  margin: auto;
  padding: 3rem 1.5rem;
}

.contact img {
 width: 100%;
 max-width: 660px;
 flex-shrink: 0;
}

.contact{
	display: flex;
    align-items: center;
    gap: 70px;
}

.contact h2{
	text-transform: uppercase;
	font-size: 36px;
}

.contact p {
	margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;

  font-size: 1.1rem;
}

.contact a {
  background: #111;
  color: white;

  padding: 0.9rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  transition: 0.2s ease;
  gap: 20px;
}

.contact a:hover {
  transform: translateY(-2px);
  background: #333;
}

.contact a img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.flyer h2 {
  	text-align: center;
  	margin-bottom: 2rem;
 	text-transform: uppercase;
	font-size: 36px;
}

.flyer > div{
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

img.flyer {
  width: 100%;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  transition: 0.25s ease;
  cursor: pointer;
  width: calc(50% - 10px);
}

footer {
  background: #111;
  color: white;

  text-align: center;
  padding: 2rem 1rem;

  margin-top: 4rem;
}

footer a {
  opacity: 0.8;
  transition: 0.2s ease;
}

footer a:hover {
  opacity: 1;
}

@media (max-width: 1024px) {
 header img:first-child{
 	width: 15vw;
 }
 header img:last-child{
 	width: 80vw;
 }
 .contact{
 	flex-direction: column;
 	margin-bottom: 50px;
 }
 .flyer > div img{
 	width: 100%;
 }
}

@media (max-width: 560px) {
	header .inside{
		flex-direction: column;
		align-items: center;
	}
	 header img:first-child{
	 	width: 20vw;
	 }
	 header img:last-child{
	 	width: 100vw;
	 }

	 .flyer h2,
	 .contact h2{
	 	text-align: center;
	 	font-size: 30px;
	 }
}