@font-face {
	font-family: montserrat;
	src:  url(../font/Montserrat-Regular.ttf);
}



body {
    display: grid;
    height: 100vh;
    grid-template-rows: auto 1fr auto;
  }
  
  header {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #eee;
    font-family: montserrat;
  }

  header > h1 {
      font-weight: normal;
      color: #3EB650;
  }

  header > .contact {
      display: flex;
      align-items: center;
  }

  @media only screen and (max-width: 800px) {
    header > .contact {
      display: none;
    }

    .maintext {
      padding: 2rem !important;
    }
  }
  
  main {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23999999' fill-opacity='0.38' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  }

  .header {
	font-family: montserrat;
	background: linear-gradient(0deg, rgba(69, 69, 69, 0.51), rgba(69, 69, 69, 0.51)), url("../img/header.jpg");
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 700px;
	display: flex;
	justify-content: center;
  align-items: center;
  text-align: center;
	color: white;
}

.header > h2 {
	font-weight: normal;
	font-size: 2em;
}

.infoboxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .box {
    flex: 1 1 150px;
    margin: 5px;
    font-size: 1.5rem;
    text-align: center;
    padding: 2rem;
    border: 1px solid #eee;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  }
  
  footer {
    border-top: 1px solid #eee;
    padding: 2rem;
    text-align: center;
  }
  
  body {
    font-family: system-ui, sans-serif;
  }


.content {
    display : flex;
    flex-direction: column;
    padding: 0 0 1rem 0;
    /* padding: 1rem 5rem 5rem 5rem; */
}

.content > .row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    line-height: 2rem;
}

.content > .row > * {
    flex: 1 1 150px;
    padding: 1rem;
    align-self: center;
}

.content > .row > .img-wrapper {
    display: flex;
    justify-content: center;
}

.content > .row > .img-wrapper > img{
  max-width: 100%;
  max-height: 100%;
}


/* .content > .row > .img {
} */