#activity {
  margin: 1em auto;
}
.box {
  border: 1px solid #FFF;
  border-radius: 6px;
  cursor: pointer;
  font-size: .9em;
  font-weight: bold;
  margin-bottom: 1em;
  padding: 4em 2em;
}

.box:hover {
  opacity: .8;
}

#image-container.active .photo .box {
  padding: 2em 2em;
  transition: all 600ms ease;
}

.box-1 {
  background-color: #D9EDF7;
  border-color: #BCE8F1;
  color: #31708F;
}

.box-2 {
  background-color: #DFF0D8;
  border-color: #D6E9C6;
  color: #3C763D;
}

.box-3 {
  background-color: #FFD3BB;
  border-color: #F6C2A5;
  color: #D64B00;
}

.popover {
  background-color: #333;
  color: #FFF;
}

.popover.top>.arrow:after {
  border-top-color: #333;
}

#text-entry-container {
  min-height: 8em;
  height: auto;
}

.noscroll {
  overflow: hidden;
}

#footer-text {
  margin: 5px 0;
}


/* Tablet */
@media(min-width: 768px){

  .box {
    font-size: 1.1em;
  }

}

/* Desktop */
@media(min-width:992px){

  .box {
    font-size: 1.3em;
  }

}

/* Large Desktop */
@media(min-width:1200px){

  .box {
    font-size: 1.5em;
  }

}

/* Print */
@media print {

  .hide-on-print {
    display: none;
  }

  .btn {
    display: none;
  }

}