header {
  width: 100%;
  height: 100vh;
  background-position: center;
  background-size: cover;
  padding: 10px; }
  header.marcopolo {
    background-image: url("../images/marcopolo_landscape.jpg"); }
  header.messaging {
    background-image: url("../images/messaging_landscape.jpg"); }
  header.hairsalon {
    background-image: url("../images/hairsalon_landscape.jpg");
    background-position: bottom; }
  header.album {
    background-image: url("../images/album_landscape.jpg"); }

@media (max-width: 767px) and (orientation: portrait) {
  header {
    height: 80vh; }
    header.marcopolo {
      background-image: url("../images/marcopolo_portrait.jpg"); }
    header.messaging {
      background-image: url("../images/messaging_portrait.jpg"); }
    header.hairsalon {
      background-image: url("../images/hairsalon_portrait.jpg"); }
    header.album {
      background-image: url("../images/album_portrait.jpg"); } }

.dots {
  display: block;
  padding: 40px 35px 30px;
  left: 0;
  right: 0;
  text-align: center;
  margin-top: 20px;
  color: #333;
  font-size: 13px; }
  .dots span {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 5px;
    display: inline-block;
    width: 20px;
    height: 25px;
    text-align: center;
    cursor: pointer; }
    .dots span:hover {
      color: #333; }
    .dots span.active {
      color: #000;
      margin-bottom: 10px;
      border-bottom: 1px solid #000;
      font-weight: 700; }
    .dots span:last-of-type {
      margin-right: 20px; }

.play-control {
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 5px;
  display: inline-block;
  color: #000; }
  .play-control .play,
  .play-control .stop {
    width: 20px;
    height: 25px;
    text-align: center;
    cursor: pointer; }
  .play-control .play {
    display: none; }
  .play-control:hover {
    color: #333; }

.project-description {
  padding: 40px 35px 30px;
  color: grey;
  font-size: 13px;
  letter-spacing: .2px; }

.my-btn {
  color: #000;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 11px;
  font-weight: 600; }
  .my-btn:hover {
    color: #333;
    text-decoration: none; }