/* GENERAL */
* { 
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background: rgb(2, 2, 39);
}

/* GALLERY -------------------------------------------------------------------------- */
h2 {
    color: #efe7b8;
margin-top: 1em;
font-size: 3em !important;
}
.gallery {
  line-height:0;
  -moz-column-count:4;
  -moz-column-gap:5px;
  column-count:4;
  column-gap:5px;
/*   max-width: auto; */
  margin: 3em 4em 3em 4em;
  overflow: visible;
}

.gallery img {
  width: 100% !important;
  height: auto !important;
  border: none;
  object-fit: contain;
  position: relative;
  margin-bottom: 5px;
}

/* RESPONSIVE DESING */
@media (max-width: 1200px) {
    .gallery {
     -moz-column-count:    4;
     -webkit-column-count: 4;
     column-count:         4;
    }
 }
 @media (max-width: 1000px) {
    .gallery {
     -moz-column-count:    3;
     -webkit-column-count: 3;
     column-count:         3;
    }
 }
 @media (max-width: 800px) {
    .gallery {
     -moz-column-count:    2;
     -webkit-column-count: 2;
     column-count:         2;
    }
 }
 @media (max-width: 400px) {
    .gallery {
     -moz-column-count:    1;
     -webkit-column-count: 1;
     column-count:         1;
    }
 }
/* RESPONSIVE DESING */

.gallery img:hover {
  z-index: 9;
  transform: scale(1.3);
  -webkit-box-shadow: 4px -1px 102px 26px rgba(255,128,0,0.83);
  -moz-box-shadow: 4px -1px 102px 26px rgba(255,128,0,0.83);
  box-shadow: 4px -1px 102px 26px rgba(255,128,0,0.83);
  /* linear | ease | ease-in | ease-out | ease-in-out */
  transition: transform ease 0.5s;
}

/* (F) FULLSCREEN MODE */
.gallery img.full {
  position: fixed;
  top: 0; left: 0; z-index: 999;
  width: 100vw; height: 100vh;
  object-fit: fit;
  background: rgba(0, 0, 0, 0.7);
}
.gallery img.full:hover {
  z-index: 999;
  transform: none;
}

/* GALLERY -------------------------------------------------------------------------- */

/* SCROLL UP */
#scrollup {
    display: flex;
    justify-content: center;
}
#scrollToTopButton {
    width: 10%;
    cursor: pointer;
}
.bounce-top {
	-webkit-animation: bounce-top 1.5s both infinite;
	        animation: bounce-top 1.5s both infinite;
}
@-webkit-keyframes bounce-top {
    0% {
      -webkit-transform: translateY(-45px);
              transform: translateY(-45px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
      opacity: 1;
    }
    24% {
      opacity: 1;
    }
    40% {
      -webkit-transform: translateY(-24px);
              transform: translateY(-24px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    65% {
      -webkit-transform: translateY(-12px);
              transform: translateY(-12px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    82% {
      -webkit-transform: translateY(-6px);
              transform: translateY(-6px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    93% {
      -webkit-transform: translateY(-4px);
              transform: translateY(-4px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    25%,
    55%,
    75%,
    87% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    100% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
      opacity: 1;
    }
  }
  @keyframes bounce-top {
    0% {
      -webkit-transform: translateY(-45px);
              transform: translateY(-45px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
      opacity: 1;
    }
    24% {
      opacity: 1;
    }
    40% {
      -webkit-transform: translateY(-24px);
              transform: translateY(-24px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    65% {
      -webkit-transform: translateY(-12px);
              transform: translateY(-12px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    82% {
      -webkit-transform: translateY(-6px);
              transform: translateY(-6px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    93% {
      -webkit-transform: translateY(-4px);
              transform: translateY(-4px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    25%,
    55%,
    75%,
    87% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    100% {
      -webkit-transform: translateY(0px);
              transform: translateY(0px);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
      opacity: 1;
    }
  }
/* SCROLL UP */


/* FOOTER --------------------------------------------------------------------------- */
#footer {
    color: #efe7b8;
}
#copyright {
    letter-spacing: 1px;
    font-family: "Chelsea Market", cursive;
}
.footer-container a {
    font-family: "Chelsea Market", cursive;
color: #ff8000;
}
.footer-container a:hover {
color: rgb(255, 68, 0);
font-size: 101%;
}
.footer-container a:visited {
    color: rgb(255, 68, 0);
}
/* FOOTER --------------------------------------------------------------------------- */

/* MENU */
.contact {
margin-left: 50% !important;
}
.menu__link img {
  width: 20%;
display: block;
margin: auto;
}
/* MENU */

@media only screen and (max-width: 600px) {
        .menu {
        display: flex;
        flex-direction: column;
        align-self: center;
        justify-content: center;
        align-items: center;
        }
        .menu__link {
                display: flex;
                align-self: center;
                justify-content: center;
                align-items: center;

        }
        .contact {
                margin: 0 !important;
        }
}