body,html {
  margin:0;
  padding:0;
  font-family:Helvetica, sans-serif;
  background:#000;
}

.topbar, .bottombar {
  height:12px;
}

.topbar { background:#4A2A1A; }
.bottombar { background:#C8A15A; }

.flip-container { perspective:1000px; }
.flipper {
  position:relative;
  transition:0.8s;
  transform-style:preserve-3d;
}

.front, .back {
  position:absolute;
  width:100%;
  backface-visibility:hidden;
  min-height:100vh;
  top:0; left:0;
}

/* HERO */
.hero-section {
  background:linear-gradient(#3A2416,#000000);
  text-align:center;
  padding:40px 0;
}
.hero-img {
  width:90%;
  max-width:900px;
  cursor:pointer;
  display:block;
  margin:auto;
}

/* CONTACT */
.back { transform:rotateY(180deg); }

.flip-container.flip .flipper {
  transform:rotateY(180deg);
}

.contact-section {
  background:linear-gradient(#C69A4A,#3A2416);
  padding-top:60px;
  text-align:center;
}

.contact-box {
  background:#000;
  border:2px solid #C8A15A;
  border-radius:10px;
  width:85%;
  max-width:420px;
  margin:auto;
  padding:40px;
  color:#C8A15A;
  box-shadow:0 0 20px rgba(0,0,0,0.5);
  cursor:pointer;
}

.contact-box h1 {
  margin-top:0;
  margin-bottom:20px;
}

.email a {
  color:#f0e7c0;
  text-decoration:none;
  font-size:22px;
  transition:0.2s ease;
}
.email a:hover {
  color:#ffe9a6;
  text-shadow:0 0 10px #ffdd88;
}
hr {
  border:0;
  border-top:1px solid #C8A15A;
  width:40%;
  margin:20px auto;
}