@import 'https://fonts.googleapis.com/css?family=Sintony';
* { box-sizing: border-box; }

body { padding: 0; margin: 0; font-family: "Sintony", sans-serif;}

.main {}

.menu {width:100vw; height:40px; overflow: hidden; background-color: white;; border-bottom:solid 2px black;
    display: flex; justify-content: center; align-items: center;
    position: fixed; top: 0; text-align: center; z-index:15;}
/* {width:100vw; height:auto;display: flex; justify-content: center; position: absolute; top:0;} */
.menu a {font-size: 1.2rem; font-weight: bold; color:black; padding:2%;}
.menu :hover {color:rgb(9, 94, 34); font-weight: 800;}

.header {}

.logo {width:100%; height:auto; min-height:210px;  display: flex; padding-top:5%;
    justify-content:center; align-items: center; border-bottom:solid 2px black;}
.logo img {width:100%;}

.intro {width:100%; height:auto; font-size: 1.1rem; color: black;}
.intro H1 {width:100%; height:auto; display: flex; text-align: center; justify-content: center; align-items: center;}
.intro H3 {width:100%; height:auto; display: flex; text-align: center; justify-content: center; align-items: center;
    padding-left:2%; padding-right:2%;}
.intro H4 {font-size: 2.4rem;  text-align: center; padding-left:2%; padding-right:2%;}
.intro H4 a {color:red;}
.circle {width:5px; height:5px; border-radius: 50%; color: blue;}

.contact_container {width:100%; height:auto; padding-top:5%; padding-bottom:10%;
    display: flex; text-align: center; justify-content: center; align-items: center; }
.contact {text-align: left; font-size: 1.3rem;;}

.container {}
.gallery {}
.gallery img {}


.row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
  }
  
  /* Create four equal columns that sits next to each other */
  .column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
  }

  .column p {text-align: center; font-size: 1.6rem;; font-weight: bold;}
  
  .column img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
  }
  
  /* Responsive layout - makes a two column-layout instead of four columns */
  @media screen and (max-width: 800px) {
    .column {
      -ms-flex: 50%;
      flex: 50%;
      max-width: 50%;
    }
  }
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    .column {
      -ms-flex: 100%;
      flex: 100%;
      max-width: 100%;
    }
  }

  @media only screen and (max-width:500px) {
    .menu {height:30px; transition-duration: 5s; transition-delay: 2s;}
    .menu a {font-size: 0.8rem; font-weight: 600; transition-duration: 5s; transition-delay: 2s;}
    .contact {font-size: 0.9rem; font-weight: 600;}
    .logo img {width:120vw; display:flex; justify-content: center; align-items: center; text-align: center;}

  }