:root {
  --mainColor: #ffffff;
}

body, html {
  height: 100%;
  margin: 0;
  background-color: #E1E8E3;
}

div.nav > a {
  color: var(--mainColor);
  text-decoration: none;
}

div.nav > a:hover {
  color: transparent;
  -webkit-text-stroke: 1px var(--mainColor);
}

@supports not(-webkit-text-stroke: 1px red) {
  div.nav > a:hover {
    text-shadow:
      3px 3px 0 var(--mainColor),
      -1px -1px 0 var(--mainColor),
      1px -1px 0 var(--mainColor),
      -1px 1px 0 var(--mainColor),
      1px 1px 0 var(--mainColor);
  }
}

h1 {
  color: #843FAA;
  font-size: 3vw;
  font-family: 'Oswald', sans-serif;
}

h2 {
  font-size: 2vw;
  font-family: 'Oswald', sans-serif;
  text-align: center;
  border-top: 5px solid black;
}

p{
  text-align: center;
  font-family: 'Lato', sans-serif;
}

.bg {
  /* The image used */
  background-image: url("images/background.jpg");

  /* Full height */
  height: 100%;

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg2{
  background-color: #E1E8E3;
}

.contact {
  color: #00d9ff;
  font-family: 'Montaga', serif;

}

.logo {
  font-size: 2vw;
  text-decoration: none;
}

.nav {
  color: white;
  font-size: 1.7vw;
  font-family: 'Oswald', sans-serif;
  padding-top: 10px;
}
.nav a {
  color:white;
  text-decoration: none;
}

.insta {
  font-size: 1.7vw;
  font-family: 'Oswald', sans-serif;
  padding-top: 10px;
  font-weight: bold;
}

.insta a {
  text-decoration: none;
}

.slogan {
  font-size: 5vw;
  color: white;
  text-transform: uppercase;
  font-family: 'Molle', cursive;
  margin: 50px auto 10px auto;
  width: 50%;

}
.text {
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  padding: 16px 32px;
}
.container:hover .image {
  opacity: 0.8;
}

.container:hover .middle {
  opacity: 1;
}
.middle {
  transition: .5s ease;
  opacity: 0.8;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.image {
  opacity: 1;
  display: block;
  width: 95%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}
table { border-collapse: collapse; }

tr, td, th { padding: 0; }

* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 33.33%;
  padding: 50px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
div.gallery {
  transition: transform .2s;
}

div.gallery:hover {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.5);
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}

* {
  box-sizing: border-box;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}