:root {
  --bg-color: #333333;
}

body > .grid {
  height: 100%;
}

body, #new-quote-button {
  -webkit-transition: background 0.5s ease-in-out;
  -moz-transition: background 0.5s ease-in-out;
  -ms-transition: background 0.5s ease-in-out;
  -o-transition: background 0.5s ease-in-out;
  transition: background 0.5s ease-in-out;
}

body, #new-quote-button {
  background-color: var(--bg-color);
}

.column {
  max-width: 550px;
  width:90%;
}

.quote-wrapper {
  overflow: hidden;
  -webkit-transition: height 0.5s ease-in-out;
  -moz-transition: height 0.5s ease-in-out;
  -ms-transition: height 0.5s ease-in-out;
  -o-transition: height 0.5s ease-in-out;
  transition: height 0.5s ease-in-out;
}

.quote-parent {
  padding: 15px;
  opacity: 0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -ms-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;

}

.quote-parent.active {
  opacity: 1;
}

.quote-text {
  font-size: 22px;
}

.quote-author {
  display: block;
  padding:15px;
  font-size: 16px;
  text-align: right;
}

.fa.fa-quote-left, .fa.fa-quote-right {
  color: var(--bg-color);
}

.action-buttons {
  text-align: left;
}

.action-buttons > a {
  color: var(--bg-color);
}

.action-buttons > a {
  cursor: pointer;
  -webkit-transition: color 0.5s ease-in-out, opacity 0.5s ease-in-out;
  -moz-transition: color 0.5s ease-in-out, opacity 0.5s ease-in-out;
  -ms-transition: color 0.5s ease-in-out, opacity 0.5s ease-in-out;
  -o-transition: color 0.5s ease-in-out, opacity 0.5s ease-in-out;
  transition: color 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

div[data-action="new-quote"] {
  color: #fff !important;
  background-color: var(--bg-color) !important;
  -webkit-transition: background-color 0.5s ease-in-out, opacity 0.5s ease-in-out !important;
  -moz-transition: background-color 0.5s ease-in-out, opacity 0.5s ease-in-out !important;
  -ms-transition: background-color 0.5s ease-in-out, opacity 0.5s ease-in-out !important;
  -o-transition: background-color 0.5s ease-in-out, opacity 0.5s ease-in-out !important;
  transition: background-color 0.5s ease-in-out, opacity 0.5s ease-in-out !important;
}

.action-buttons > a:hover, div[data-action="new-quote"]:hover {
  opacity: 0.8;
}

.fa-stack {
  height:0;
  bottom:32px;
  font-size:1.5em;
}

.share-twitter::before,.share-twitter::after {
  bottom:226% !important;
}

.signature {
  position: relative;
  height: 0;
  top: 2em;
  color: #fff;
}

.signature a {
  color: #fff;
}