/* (A) GOOGLE MATERIAL ICONS - https://fonts.google.com/icons */
@font-face{font-family:"Material Icons";src:url(maticon.woff2) format("woff2")}
.mi{font-family:"Material Icons";font-size:28px;font-weight:400;font-style:normal;text-decoration:none;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased}

/* (B) WHOLE PAGE */
* {
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
}
html, body {
  position: relative;
  padding: 0; margin: 0;
}
.hide { display: none !important; }
.btn {
  display: flex;
  align-items: center; justify-content: center;
  width: 60px; height: 60px;
  color: #fff;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.btnsm {
  font-size: 24px;
  width: 50px; height: 50px;
}
#galBack, #aboutCX { background: rgba(255, 65, 65, 0.4); }

/* (C) MAIN CAMERA VIEW */
/* (C1) SHARED WRAPPERS */
#camWrap {
  position: relative;
  background: #000;
}
#camWrap, #camFeed, #camFlash { width: 100vw; height: 100vh; }
#camFeed, #camControls, #camFlash { position: absolute; }
#camFeed {
  object-fit: contain;
  z-index: 1;
}

/* (C2) CAMERA CONTROLS */
#camControls {
  display: flex; z-index: 2;
  align-items: center; justify-content: center;
  width: 100%; padding: 10px;
  bottom: 10px; left: 0;
}
#camControls .mi { margin: 0 20px; }
@media (orientation: landscape) {
  #camControls {
    flex-direction: column;
    width: auto; height: 100vh;
    bottom: auto; left: auto; right : 10px;
  }
  #camControls .mi { margin: 20px 0; }
}

/* (C3) SCREEN FLASH EFFECT */
#camFlash {
  z-index: 3;
  transition: opacity 0.1s;
  visibility: hidden;
  opacity: 0;
  background: #fff;
}
#camFlash.show {
  visibility: visible;
  opacity: 1;
}

/* (D) GALLERY VIEW */
/* (D1) WRAPPER + BACK */
#galWrap {
  background: #000;
  min-height: 100vh;
}
#galHead {
  padding: 10px;
}

/* (D2) GALLERY ITEMS */
#galPics {
  display: grid;
  grid-gap: 10px; padding: 10px;
  grid-template-columns: repeat(2, 1fr);
}
#galPics img {
  width: 100%;
  object-fit: cover;
}
#galPics .pic {
  position: relative;
}
#galPics .control {
  display: flex;
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
}
#galPics .control .btn {
  margin: 5px;
}

/* (X) ABOUT VIEW */
#aboutWrap {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  background: #fff;
}
#aboutCX {
  position: absolute;
  top: 10px; left: 10px;
}
#aboutHead {
  width: 100%;
  max-height: 450px;
  object-fit: contain;
}
#aboutLinks {
  padding: 20px;
}