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

* { box-sizing: border-box; }

html, body {
padding: 0;
margin: 0;
scroll-behavior: smooth;
scrollbar-width:none; 
scrollbar-color:rgb(0, 0, 0);
font-family: "Sintony", sans-serif; }

H4 {font-size: 16px; font-weight:600; font-family: "Quicksand", sans-serif;}

#site_closed {
width:100%;
height:100%;
display: grid;
justify-content: center; align-items: center;
}

#wrapper {
width:100vw;
height:100%; }

#wrapper img {
display: flex;
justify-content: center; align-items: center; text-align: center;}

#container {
display: grid;
grid-template-columns:auto;
grid-template-rows:auto;
grid-template-areas:
'header'
'grid'; }

header {
width:100%;
height:20vh; object-fit: contain;
grid-area: header;
position: fixed;
top:0;
z-index:99;
background-color: white;
border-bottom:1px solid black;
display: grid;
grid-template-columns: auto;
grid-template-rows: auto;
grid-template-areas: 
'header_menu'
'mobile-menu'
'header_logo' ; }

  .mobile-menu {display:none;}

  .header_menu {
  width:100%;
  height:5vh;
  grid-area: header_menu;
  display: flex;
  justify-content: center; align-items: center; text-align: center; }

  .header_menu a {
  padding-left:1%; padding-right:1%;
  font-size:22px;
  font-weight:700;
  text-decoration: none;   
  font-family: "Play", sans-serif; }

  .header_logo {
  width:100%;
  height:15vh;
  grid-area: header_logo;
  display: flex; justify-content: center;}

  .header_logo img {
  width:100%; height:100%; object-fit: contain;
  display: flex; justify-content: center; text-align: center;}

#grid {
width:100%;
grid-area: grid;
position:absolute;
top:20vh;
display: grid;
grid-template-columns: 100%;
grid-template-rows: auto;
grid-template-areas: 
'text_area'
'gallery_section';}

.text_area {
width:100%;
margin-top:1vh;
grid-area: text_area;
display: block;
justify-content: center; align-items: center; text-align: center; }

  .text_area H1 {
  color:#333;
  font-family: "Play", sans-serif; }

  .text_area P {
  font-size: 20px;;
  color:#333;
  font-family: "Play", sans-serif; }

.gallery_section {
grid-area: gallery_section;
display: flex;
justify-content: center; align-items: center; text-align: center; }


.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%; }

.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;;}
  

/* Responsive layout - makes a two column-layout instead of four columns */
/* Responsive layout - makes a two column-layout instead of four columns */

@media screen and (max-width: 800px) {



.header_menu a { font-size:2.5vw; }

.mobile-menu {display: none;}

.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 */
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {

.main {background-color: blue;}

  .header_logo {
  width:100%;
  height:auto;
  grid-area: header_logo;
  display: flex; justify-content: center; align-items: center; }

  .header_logo img {
  width:100%;
  height:100%;
  display: flex; justify-content: center; align-items: center; }


#grid {top:20vh;}


.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%; }

.mobile-menu {
  grid-area: mobile-menu;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 16px;
  top: 0;
  background-color: #27ae60; border-bottom: 1px solid black;;
  left: 0;
  right: 0;
  height: 50px;
  z-index: 9999999; }

.mobile-menu__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 30px;
  cursor: pointer;
  transition: 0.4s; }

.mobile-menu__icon {
  display: block;
  position: relative;
  background: white;
  width: 90%;
  height: 4px;
  transition: 0.4s; }

.mobile-menu__icon::after, .mobile-menu__icon::before {
  content: "";
  display: block;
  position: absolute;
  background: white;
  width: 100%;
  height: 4px;
  transition: 0.4s; }

.mobile-menu__icon::after {
  top: 8px; }

.mobile-menu__icon::before {
  top: -8px; }

.mobile-menu__container {
  position: fixed;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  top: 50px;
  left: 0;
  right: 0;
  z-index: 999;
  height: 0;
  opacity: 1;
  transition: 0.5s;
  transition-delay: 0.2s;
  overflow: hidden;
  background-color: #27ae60; }

.mobile-menu__list {
  transition: 0.5s;
  transition-delay: 0.5s;
  list-style: none;
  padding-left: 0;
  margin-top: -50px; }

.mobile-menu__item {
  font-size: 26px;
  padding-bottom: 15px; }

.mobile-menu__link {
  text-decoration: none;
  color: #fff; }

.mobile-menu__checkbox {
  display: none; }

.mobile-menu__checkbox:checked ~ .mobile-menu__nav {
  opacity: 1;
  transition-delay: 0s; }

.mobile-menu__checkbox:checked ~ .mobile-menu__container {
  height: 100%;
  transition-delay: 0s; }

.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon {
  background: transparent; }

.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::before, .mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::after {
  top: 0; }

.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg); }

.mobile-menu__checkbox:checked ~ .mobile-menu__btn .mobile-menu__icon::before {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg); }

}



@media only screen and (max-width:500px) {

.contact {font-size: 0.9rem; font-weight: 600;}

}



@media only screen and (max-width:400px) {

header { width:100%; height:15vh; }

#grid {top:15vh;}

.contact {font-size: 0.9rem; font-weight: 600;}

}