/**
 * google-material-color v1.1.0
 * https://github.com/danlevan/google-material-color
 */
.vertical-align, .hero__content, .insert__quote, .service__icon, .thumbnail__info {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); }

.box-shadow, .btn, .btn--fab, .card, header, .list--nav {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }

.box-shadow--active {
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); }

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/*---------------------------------*\
  Base
\*---------------------------------*/
html,
body {
  width: 100%;
  height: 100%; }

html {
  font-size: 1rem;
  -ms-touch-action: manipulation;
  touch-action: manipulation; }

body {
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background-color: white; }

a {
  text-decoration: none;
  color: #999;
  transition: color 0.2s cubic-bezier(0.4, 0, 1, 1); }
  a:focus, a:hover {
    color: #333; }

blockquote,
h1,
h2,
h3,
h4,
h5,
p {
  margin-right: auto;
  margin-bottom: 1.3rem;
  margin-left: auto;
  max-width: 31.25rem; }

blockquote {
  margin-bottom: 1.3rem; }

footer {
  width: 100%; }

html {
  font-size: 1em; }

h1,
h2,
h3,
h4,
h5 {
  margin-top: 1.414rem;
  margin-bottom: .5rem;
  font-weight: inherit;
  line-height: 1.2; }

h1 {
  margin-top: 0;
  font-size: 2.369rem;
  /*3.157em*/ }

h2 {
  font-size: 1.777rem;
  /*2.369rem*/ }

h3 {
  font-size: 1.333rem;
  /*1.777ren*/ }

p {
  font-weight: 300;
  color: #888; }

section {
  padding-top: 4rem;
  padding-bottom: 4rem; }

small {
  font-size: .75rem; }

/*---------------------------------*\
  Grid System
\*---------------------------------*/
html {
  box-sizing: border-box; }

*,
:after,
:before {
  box-sizing: inherit; }

.column,
.columns,
.container {
  width: 100%; }

.container:after,
.row:after {
  display: table;
  clear: both;
  content: ""; }

.container {
  position: relative;
  padding: 0 20px;
  margin: 0 auto;
  max-width: 960px; }

.column,
.columns {
  float: left; }

@media (min-width: 400px) {
  .container {
    padding: 0;
    width: 85%; } }
@media (min-width: 768px) {
  /*550px*/
  .container {
    width: 80%; }

  .column,
  .columns {
    margin-left: 4%; }

  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns {
    width: 4.66666666667%; }

  .two.columns {
    width: 13.3333333333%; }

  .three.columns {
    width: 22%; }

  .four.columns {
    width: 30.6666666667%; }

  .five.columns {
    width: 39.3333333333%; }

  .six.columns {
    width: 48%; }

  .seven.columns {
    width: 56.6666666667%; }

  .eight.columns {
    width: 65.3333333333%; }

  .nine.columns {
    width: 74%; }

  .ten.columns {
    width: 82.6666666667%; }

  .eleven.columns {
    width: 91.3333333333%; }

  .twelve.columns {
    margin-left: 0;
    width: 100%; }

  .one-third.column {
    width: 30.6666666667%; }

  .two-thirds.column {
    width: 65.3333333333%; }

  .one-half.column {
    width: 48%; }

  .offset-by-one.column,
  .offset-by-one.columns {
    margin-left: 8.66666666667%; }

  .offset-by-two.column,
  .offset-by-two.columns {
    margin-left: 17.3333333333%; }

  .offset-by-three.column,
  .offset-by-three.columns {
    margin-left: 26%; }

  .offset-by-four.column,
  .offset-by-four.columns {
    margin-left: 34.6666666667%; }

  .offset-by-five.column,
  .offset-by-five.columns {
    margin-left: 43.3333333333%; }

  .offset-by-six.column,
  .offset-by-six.columns {
    margin-left: 52%; }

  .offset-by-seven.column,
  .offset-by-seven.columns {
    margin-left: 60.6666666667%; }

  .offset-by-eight.column,
  .offset-by-eight.columns {
    margin-left: 69.3333333333%; }

  .offset-by-nine.column,
  .offset-by-nine.columns {
    margin-left: 78%; }

  .offset-by-ten.column,
  .offset-by-ten.columns {
    margin-left: 86.6666666667%; }

  .offset-by-eleven.column,
  .offset-by-eleven.columns {
    margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns {
    margin-left: 34.6666666667%; }

  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns {
    margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns {
    margin-left: 52%; } }
@media print {
  *,
  *:before,
  *:after {
    text-shadow: none !important;
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important; }

  a,
  a:visited {
    text-decoration: underline; }

  a[href]:after {
    content: " (" attr(href) ")"; }

  abbr[title]:after {
    content: " (" attr(title) ")"; }

  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: ""; }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }

  thead {
    display: table-header-group; }

  tr,
  img {
    page-break-inside: avoid; }

  img {
    max-width: 100% !important; }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }

  h2,
  h3 {
    page-break-after: avoid; } }
/*---------------------------------*\
  Blog
\*---------------------------------*/
.blog__photo img {
  height: 250px; }

/*---------------------------------*\
  Buttons
\*---------------------------------*/
.btn {
  padding: .5rem 1rem;
  margin: 0.25rem;
  min-width: 4rem;
  height: 2.25rem;
  text-transform: uppercase;
  color: #fff;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 1, 1); }
  .btn:focus, .btn:hover {
    color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
  .btn:active {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }

.btn__container {
  text-align: center; }

.btn--center {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.btn--success {
  background: #2196f3; }
  .btn--success:focus, .btn--success:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
  .btn--success:active {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }

.btn--ghost {
  color: #333;
  background-color: transparent;
  border: 2px solid #333;
  box-shadow: none; }
  .btn--ghost:focus, .btn--ghost:hover {
    color: #fff;
    background-color: #333;
    box-shadow: none; }

.btn--ghost--light {
  color: #999;
  border: 2px solid #999; }
  .btn--ghost--light:focus, .btn--ghost--light:hover {
    color: #fff;
    background-color: #333;
    border: 2px solid #333;
    box-shadow: none; }

.btn--good {
  background: #4caf50; }
  .btn--good:focus, .btn--good:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
  .btn--good:active {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }

.btn--fab {
  display: block;
  color: #fff;
  border-radius: 50%;
  font-size: 1.5rem;
  text-align: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 1, 1); }
  .btn--fab:focus, .btn--fab:hover {
    color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
  .btn--fab:active {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }

.btn--fab--abs {
  position: absolute;
  top: -2.5rem;
  right: 0;
  left: 0;
  margin: auto; }

.btn--fab--big {
  padding: 1rem;
  width: 3.5rem;
  height: 3.5rem; }

.btn--fab--footer {
  background: #1565c0; }

.btn--fab--medium {
  padding: .75rem;
  width: 3rem;
  height: 3rem;
  font-size: 1.5rem; }

.btn--fab--small {
  padding: .35rem;
  width: 2.5rem;
  height: 2.5rem; }

.btn__icon {
  width: 2rem;
  height: 2rem; }

.btn__icon--small {
  width: 1.5rem;
  height: 1.5rem; }

/*---------------------------------*\
  Cards
\*---------------------------------*/
.card {
  z-index: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 1rem;
  width: 20.625rem;
  height: 12.5rem;
  font-size: 1rem;
  border-radius: 2px;
  transition: box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1); }

.card__cover {
  height: 11.625rem; }

.card__title {
  font-size: 1.5rem;
  text-font-weight: 300;
  transform-origin-x: 10.3125rem;
  transform-origin-y: 3.5rem;
  text-transform-origin-x: 9.3125rem;
  text-transform-origin-y: 3rem;
  -webkit-perspective-origin: 10.3125rem 3.5rem;
  perspective-origin: 10.3125rem 3.5rem; }

.card__text {
  height: 1.125rem;
  font-size: 0.8125rem; }

/*---------------------------------*\
  Case Study
\*---------------------------------*/
.case__image {
  width: 100%;
  max-width: 100%; }

/*---------------------------------*\
  Columns
\*---------------------------------*/
.col--4 {
  width: 100%;
  min-height: 1px; }
  @media screen and (min-width: 34.375rem) {
    .col--4 {
      width: 50%; } }
  @media screen and (min-width: 60rem) {
    .col--4 {
      width: 33.3333333333%; } }

.col--3 {
  width: 100%;
  min-height: 1px; }
  @media screen and (min-width: 30rem) {
    .col--3 {
      width: 50%; } }
  @media screen and (min-width: 60rem) {
    .col--3 {
      width: 25%; } }

.col--2 {
  width: 100%;
  min-height: 1px; }
  @media screen and (min-width: 34.375rem) {
    .col--2 {
      width: 50%; } }

/*---------------------------------*\
  Divider
\*---------------------------------*/
.divider {
  margin-top: 1rem;
  margin-bottom: 1rem;
  height: 1px;
  background-color: #ddd;
  border: 0; }

.divider--big {
  width: 100%; }

.divider--small {
  max-width: 3rem; }

/*---------------------------------*\
  Footer
\*---------------------------------*/
footer {
  position: relative;
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-top: 2rem;
  background-color: #0d47a1; }

.footer__copy {
  float: left;
  margin-bottom: 0;
  color: #fff;
  line-height: 1.5rem; }

/*---------------------------------*\
  Forms
\*---------------------------------*/
.form {
  margin-right: auto;
  margin-left: auto;
  max-width: 24rem; }

.form__container {
  position: relative; }
  @media screen and (min-width: 30rem) {
    .form__container:nth-of-type(n+2) {
      margin-left: 2rem; } }
  @media screen and (max-width: 30rem) {
    .form__container {
      width: 100%; } }

.form__label {
  position: absolute;
  top: .35rem;
  font-size: 0.875rem;
  color: #9e9e9e;
  transition: top 0.2s cubic-bezier(0.4, 0, 1, 1); }
  @media screen and (max-width: 30rem) {
    .form__label {
      left: 0; } }

.form__element {
  position: relative;
  z-index: 2;
  padding: .5rem;
  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
  background-color: transparent;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  border-bottom: 1px solid #ededed;
  outline: 0; }
  .form__element:focus + .form__label {
    top: -1rem; }
  @media screen and (max-width: 30rem) {
    .form__element {
      width: 100%; } }

.container__message,
.form__message {
  width: 100%; }

.form__message {
  resize: none; }

/*---------------------------------*\
  Header
\*---------------------------------*/
header {
  position: relative;
  z-index: 3; }

/*---------------------------------*\
  Helper Classes
\*---------------------------------*/
.no-js .lazy,
.item--hidden {
  display: none;
  visibility: hidden; }

.item--blank {
  height: 23px; }


*[hidden] {
  display: none; }

.section-overlap {
  position: relative;
  z-index: 2;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }

/*---------------------------------*\
  Hero
\*---------------------------------*/
.sec--hero {
  height: 30rem;
  color: #fff;
  background-image: url(../image/header-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; }

.sec--hero > .container {
  height: 100%; }

.hero__content {
  margin-right: auto;
  margin-left: auto;
  max-width: 31.25rem; }

.hero__pitch {
  margin-top: 2rem;
  margin-bottom: 2rem;
  color: #fff; }

.hero--about,
.hero--case-study,
.hero--services {
  position: relative; }

.hero--about {
  background-image: url(../images/Arden--flickr-overlooking-amsterdam-panorama.jpg); }

.hero--case-study {
  background-image: url(../images/case-study__hero.jpg); }

.hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); }

.hero--services {
  background-image: url(../images/computer-code.jpeg); }

/*---------------------------------*\
  Icons
\*---------------------------------*/
.icon {
  color: #a7cef7;
  cursor: pointer;
  transition: color 0.2s cubic-bezier(0.4, 0, 1, 1); }
  .icon:focus, .icon:hover {
    color: #fff; }

.icon--medium {
  width: 100%;
  max-width: 50%; }
  @media screen and (min-width: 34.375rem) {
    .icon--medium {
      max-width: 70%; } }
  @media screen and (min-width: 48rem) {
    .icon--medium {
      max-width: 50%; } }

.icon--menu {
  float: right;
  position: relative;
  z-index: 1; }

.icon--small {
  display: block;
  margin-right: auto;
  margin-bottom: 1rem;
  margin-left: auto;
  max-width: 7.8125rem; }

/*---------------------------------*\
  Inserts
\*---------------------------------*/
.insert {
  position: relative;
  width: 100%;
  min-height: 16rem; }

.insert__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.65); }

.insert__quote {
  font-style: italic;
  color: rgba(255, 255, 255, 0.75);
  text-align: center; }

.insert--image,
.insert--video {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover; }

.insert--bike {
  background-image: url(../images/insert__Dustin-Gaffke---flickr-Big-City-Bicycle.jpg); }

.insert--city {
  background-image: url(../images/insert__U7Fc1sy5SCUDIu4tlJY3_NY_by_PhilippHenzler_philmotion.de.jpg); }

.insert--city1 {
  background-image: url(../image/insert__Andres-Nieto-Porras---flickr-New-York-City.jpg); }

.insert--city2 {
  background-image: url(http://www.alexdevero.com/demos/template--material/images/insert__Carlo-Mirante---flickr-Vatican-City.jpg); }

.insert--map {
  height: 20rem; }

/*---------------------------------*\
  Lists
\*---------------------------------*/
.list {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.list--big {
  font-size: 1.5rem; }

.list--center {
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center; }

.list--end {
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end; }

.list--contact {
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column; }

.list--media li:nth-child(n+2) {
  margin-left: 1rem; }

.list--footer a {
  color: #a7cef7; }
  .list--footer a:focus, .list--footer a:hover {
    color: #fff; }

.list--nav {
  position: absolute;
  top: -.5rem;
  right: -.5rem;
  overflow: hidden;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 10rem;
  height: 0;
  background-color: #fff;
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1); }

.list--nav li:nth-child(n+2) {
  margin-top: .5rem; }

.list--timeline {
  margin-top: 3rem;
  margin-bottom: 1rem;
  font-weight: 300; }
  @media screen and (max-width: 40.5625rem) {
    .list--timeline {
      margin-right: auto;
      margin-left: auto;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      max-width: 170px; } }

.list--timeline li {
  position: relative;
  font-size: .85rem;
  color: #ddd; }
  @media screen and (max-width: 40.5625rem) {
    .list--timeline li {
      text-align: center; } }

@media screen and (min-width: 40.625rem) {
  .list--timeline li:nth-child(n+2) {
    margin-left: 7rem; } }

.list--timeline li:nth-child(n+2):before {
  content: "";
  position: absolute;
  top: -33%;
  left: 30%;
  width: 3rem;
  height: 2px;
  background-color: #2196f3;
  transform: rotate(90deg); }
  @media screen and (min-width: 40.625rem) {
    .list--timeline li:nth-child(n+2):before {
      top: 45%;
      left: -7rem;
      width: 7rem;
      transform: rotate(0deg); } }

.timeline__title {
  width: 7rem;
  color: #999; }
  @media screen and (min-width: 40.625rem) {
    .timeline__title {
      position: absolute;
      top: -1.25rem;
      left: -3rem;
      text-align: center; } }

@media screen and (max-width: 40.625rem) {
  .list--timeline .fa-circle-o:before {
    content: " \f068 "; } }
.list--timeline .fa-circle-o {
  color: #2196f3; }

.timeline__date {
  color: #999; }
  @media screen and (min-width: 40.625rem) {
    .timeline__date {
      position: absolute;
      top: 1.25rem;
      left: -.5rem; } }

@media screen and (max-width: 40.625rem) {
  .list--timeline {
    flex-direction: column; }

  .list--timeline li {
    width: 8rem;
    height: 5rem;
    margin: auto;
    text-align: center;
    padding: .5rem;
    border: 1px solid; }

  .list--timeline li:nth-child(n+2) {
    margin-top: 3rem;
    margin-right: auto;
    margin-left: auto; }

  /*
  .list--timeline li:nth-child(n+2):before {
    content: "";
    position: absolute;
    top: -33%;
    left: 30%;
    width: 3rem;
    height: 2px;
    background-color: palette(blue);
    transform: rotate(90deg);
  }*/
  .timeline__title,
  .timeline__date {
    position: static;
    display: block; } }
/*---------------------------------*\
  Logo
\*---------------------------------*/
.logo__container {
  float: left; }

.logo__title {
  margin: 0;
  font-size: 1rem; }

.logo__title a {
  color: #fff; }

.logo__title span {
  vertical-align: super; }

/*---------------------------------*\
  Map
\*---------------------------------*/
.map__overlay {
  position: absolute;
  width: 100%;
  height: 100%; }

.map__iframe {
  width: 100%;
  height: 100%; }

/*---------------------------------*\
  Navigation
\*---------------------------------*/
.nav--main {
  position: relative;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background: #2196f3; }

.nav--social {
  padding-top: .5rem;
  padding-bottom: .5rem;
  background: #1e88e5; }

.nav__checkbox:checked + label {
  color: #999; }
  .nav__checkbox:checked + label:focus, .nav__checkbox:checked + label:hover {
    color: #333; }

.nav__checkbox:checked ~ .list--nav {
  padding: .75rem;
  height: auto;
  opacity: 1; }

/*---------------------------------*\
  Rows
\*---------------------------------*/
.row--flex {
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  max-width: 90rem; }

.row--form {
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between; }

.row--reverse {
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }

/*---------------------------------*\
  Services
\*---------------------------------*/
.services__wrapper {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: baseline;
  -ms-flex-align: baseline;
  align-items: baseline; }

.services__block .col--2 {
  position: relative; }

@media screen and (max-width: 34.375rem) {
  .service__icon {
    position: static;
    transform: translateY(0); } }
@media screen and (min-width: 34.375rem) {
  .service__icon {
    position: absolute;
    right: 0;
    left: 0; } }

.services__icon {
  margin-right: .5rem; }

.service__icon {
  text-align: center; }

.service__icon i {
  font-size: 10rem; }

/*---------------------------------*\
  Team
\*---------------------------------*/
.team__photo img {
  display: block;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  max-width: 250px;
  border-radius: 50%; }

@media screen and (max-width: 34.375rem) {
  .team__name,
  .team__title {
    text-align: center; } }

.team__title {
  margin-top: 1rem;
  margin-bottom: 1rem; }

@media screen and (max-width: 34.375rem) {
  .team__bio .list--media {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center; } }

/*---------------------------------*\
  Thumbnails
\*---------------------------------*/
.thumbnail__inner {
  position: relative;
  display: block;
  overflow: hidden;
  max-height: 15.8125rem; }

.thumbnail__overlay {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.4, 0, 1, 1); }
  .thumbnail__overlay:focus, .thumbnail__overlay:hover, .thumbnail__overlay:active {
    opacity: 1; }

.thumbnail__info {
  position: absolute;
  width: 100%;
  text-align: center;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  transition: all 0.2s cubic-bezier(0.4, 0, 1, 1); }

.thumbnail__overlay:hover > .thumbnail__info {
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%); }

.thumbnail__title--small {
  font-size: 1.314rem; }

.thumbnail__info hr {
  background-color: #2196f3; }

.thumbnail__excerpt {
  padding-right: .5rem;
  padding-left: .5rem;
  color: #333; }

.thumbnail__excerpt--small {
  font-size: .85rem; }

.thumbnail__image {
  width: 100%; }

.thumbnail--blog,
.thumbnail--blog .thumbnail__inner {
  overflow: hidden; }
  @media screen and (max-width: 59.9375rem) {
    .thumbnail--blog,
    .thumbnail--blog .thumbnail__inner {
      max-height: 16.875rem; } }
  @media screen and (min-width: 60rem) {
    .thumbnail--blog,
    .thumbnail--blog .thumbnail__inner {
      max-height: 12.5rem; } }

.thumbnail--portfolio,
.thumbnail--portfolio .thumbnail__inner {
  max-height: 15.5rem; }
  @media screen and (min-width: 30rem) {
    .thumbnail--portfolio,
    .thumbnail--portfolio .thumbnail__inner {
      max-height: 19.4375rem; } }
  @media screen and (min-width: 60rem) and (max-width: 70.9375rem) {
    .thumbnail--portfolio,
    .thumbnail--portfolio .thumbnail__inner {
      max-height: 11.25rem; } }
  @media screen and (min-width: 71rem) {
    .thumbnail--portfolio,
    .thumbnail--portfolio .thumbnail__inner {
      max-height: 13.1875rem; } }
  @media screen and (min-width: 85.375rem) {
    .thumbnail--portfolio,
    .thumbnail--portfolio .thumbnail__inner {
      max-height: 15.8125rem; } }

/*---------------------------------*\
  Typography
\*---------------------------------*/
.heading--primary {
  text-transform: uppercase; }

.heading--secondary {
  color: #666; }

.heading--tertiary {
  color: #999; }

.link--light {
  color: #a7cef7; }
  .link--light:focus, .link--light:hover {
    color: #fff; }

.text--bold {
  font-weight: bold; }

.text--center {
  text-align: center; }

.text--italic {
  font-style: italic; }

.text--light {
  font-weight: 300; }

.text--medium {
  font-size: 1.25rem; }

.text--small {
  font-size: .75rem; }
  .margin-top-medium{
    margin-top: 10%;
  }

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