styles.css

@font-face {
  font-family: 'Roboto', sans-serif;
  font-family: 'Abril Fatface', cursive; }
body {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  background-color: #f2f2f2;
  color: #333; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Abril Fatface', cursive;
  letter-spacing: 1px;
  font-weight: 400;
  margin: 0; }

h1 {
  font-size: 80px; }

h3 {
  font-size: 36px; }

header {
  margin-bottom: 40px; }

.input label, .input form {
  display: inline-block;
  font-size: 13px; }

.results-card {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  visibility: visible;
  opacity: 1;
  transition: visibility 0s linear 0.5s, opacity 0.5s ease 1s, transform 0.5s ease 1s; }
  .results-card .results-image, .results-card .results {
    flex-grow: 1; }
  .results-card .results-image {
    width: 50%; }
    .results-card .results-image img {
      width: 100%; }
  .results-card .results {
    padding: 40px; }
    .results-card .results h3, .results-card .results .result {
      padding: 10px 0; }

.color-palette {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  transition: visibility 0s linear 0.75s, opacity 0.5s ease 1.25s, transform 0.5s ease 1.25s; }
  .color-palette .color-tile {
    padding: 20px;
    margin: 20px 10px;
    border-radius: 3px;
    text-align: center;
    font-weight: 600;
    color: #fff;
    flex-grow: 1; }
    .color-palette .color-tile:first-of-type {
      margin-left: 0; }
    .color-palette .color-tile:last-of-type {
      margin-right: 0; }

@media only screen and (max-width: 721px) {
  .results-card {
    flex-direction: column; }
    .results-card .results-image {
      width: 100%; }

  .color-palette {
    flex-direction: column; }
    .color-palette .color-tile {
      margin-bottom: 0;
      margin-left: 0;
      margin-right: 0;
      padding: 10px; } }
.text-center {
  text-align: center; }

.hidden {
  visibility: hidden;
  opacity: 0; }

.display-none {
  display: none; }

.slide-up {
  transform: translateY(20px); }

.images .concept-name {
  font-size: 48px; }
.images .image-block {
  display: inline-block; }
  .images .image-block img {
    display: block;
    width: 200px; }
  .images .image-block span {
    font-size: 18px;
    text-align: left; }

#instafeed img {
  width: 200px; }

/*# sourceMappingURL=styles.css.map */