section {
  padding-top: 5rem;
}

.bg-img img {
  top: 20vh;
  right: 0;
  left: 250px;
  width: 65%;
}

a {
  color: inherit;
  font-weight: bold;
}

h3 {
  color: #6F6F6F;
}

body {
  font-size: 12pt;
  font-family: 'Fira Sans', sans-serif;
  font-weight: 300;
}

.hero {
  overflow: inherit;
}

#cases, #takeaways, #launch, #prototype, #branding, #research, #process, #summary {
  margin-left: 50px;
  margin-right: 50px;
  color: #6F6F6F;
}

#cases {
  padding-top: 5rem;
}

#cases img {
  width:80%;
  float: right;
  padding: 1rem;
}

#cases img:hover {
  opacity: 0.5;
  background-color: #E0BD1D;
}

img {
  width: 100%;
}

.half-left {
  padding-left: 0;
}

li {
  display: list-item;
}

#zoom {
    transition: transform .2s; /* Animation */
}

#zoom:hover {
    transform: scale(1.5);
}

#shake img:hover {
  animation: shake 1s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
}

#blink {
  animation: blinker 1s linear infinite;
  color: #3B819D;
  font-weight: bold;
}

@keyframes blinker {
  50% {
    opacity: .2;
  }
}

#pieChart {
  width: 50%;
  margin: auto;
}

.video-responsive{
  clear: both;
  position:relative;
  left:0;
  right: 0;
  margin: auto;
}

.video-responsive iframe{


}

/* images */
.sketches {
  display: block;
  clear: both;
}
.one-seventh {
  width: 13.8%;
}

.one-fourth {
  width: 23%;
}

img .one-fourth {
  width: 100%
  padding: 1rem;
}



@media screen and (max-width: 600px) {
  .hero {
    padding: 0;
  }
  .half-left, .half-right {
    width: 100%;
  }

  #cases, #takeaways, #launch, #prototype, #branding, #research, #process, #summary {
    margin-left: 5px;
    margin-right: 5px;
  }

  #prototype .half-right {
    display: none;
  }

  .bg-img img {
    top: 155px;
    left: 175px;
  }

  #zoom:hover {
    transform: scale(1.0);
  }
}