body {
  background: #ECEDED;
}



button, .button {
  background-color: #16A6AD;
}

button:hover, button:focus, .button:hover, button:focus {
  background-color: #128A90;
}

a {
  color: #16A6AD;
}

a:hover, a:focus {
  color: #128A90;
}

.chris-drawing {
  max-height: 525px;
}

.chris-real {
  border-radius: 50%;
}

.intro {
  height: 100vh;
  width: 100%;
  display: table;
}

.intro .inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.intro .button {
  margin-top: 2vh;
}

.detailed-intro {
  padding: 15px 0 0;
}

.heart {
  color: #CB3E57;
}

.initially-hidden {
  opacity: 0;
  pointer-events: none;
  -webkit-transition: 1s ease-out opacity;
  transition: 1s ease-out opacity;
}

.initially-hidden.long {
  -webkit-transition: 3s ease-out opacity;
  transition: 3s ease-out opacity;
}

.initially-hidden.visible {
  opacity: 1;
  pointer-events: auto;
}

.thumbnail {
  position: relative;
  -webkit-transition: 0.5s ease-out all;
  transition: 0.5s ease-out all;
  border: 1px solid transparent;
}

.thumbnail-text {
  position: absolute;
  bottom: -50px;
  left: 0;
  pointer-events: none;
  opacity: 0;
  width: 100%;
  text-align: center;
  background: rgba(0,0,0,0.6);
  line-height: 50px;
  color: #f5f5f5;
  -webkit-transition: 0.5s ease-out all;
  transition: 0.5s ease-out all;
}

.thumbnail:hover {
  border-color: rgba(0,0,0,0.6);
}

.thumbnail:hover .thumbnail-text {
  bottom: 0;
  opacity: 1;
}

input[type=text], textarea {
  -webkit-transition: 0.5s ease-out all;
  transition: 0.5s ease-out all;
}

.notcool {
  background-color: #E86A6A !important;
}

.footer-copyright, .footer-social-media {
  font-size: 3em;
}

#footer {
  background-color: #E4E4E4;
  padding: 50px 0 30px; 
}

#footer h5 {
  color: #8B9696;
}

@media only screen and (max-width: 1025px) {
  .text-right {
    text-align: center !important;
  }

}

@media only screen and (max-width: 640px) {
  .button.large {
    width: 100%;
  }
}