/* ==========================================================================
	Utility classes
   ========================================================================== */

.float--left{
  float:left;
}

.float--right{
  float:right;
}

.force-left{
  margin-right: auto !important;
}

.force-right{
  margin-left: auto !important;
}

.w--50{
  width:50%;
}

.ls--s{
  letter-sapcing:0.01em;
}

.ls--m{
  letter-spacing:0.03em;
}

.ls--l{
  letter-spacing:0.05em;
}

.lh--s{
  line-height:1.1em;
}

.lh--m{
  line-height:1.3em;
}


/* ==========================================================================
	Header
   ========================================================================== */

.page-header__logo{
  width:121px;
  display: none;
}

.header__logo--short {
  width: 36px;
  height: 28px;
}

.page-header--blue .page-header__logo path{
  fill:#03a9f4;
}

.signup--middle {
  display: none;
}

/* ==========================================================================
	Footer
   ========================================================================== */

.footer svg {
  height: 24px;
  width: 24px;
  fill: #aaa;
}

.footer--plain{
  padding-top:150px;
  background:#F7FAFB;
  color:#21242b;
}

.footer__link {
  min-width: 50px;
  display: inline-block;
}

.footer__link:hover {
  color: #fff;
  text-decoration: underline;
}

.footer--plain .footer__link:hover {
  color: #21242b;
}

.footer__text {
  color: #999;
}

.footer__text span {
  margin-bottom: 8px;
  display: block;
}

.footer__text div {
  margin-bottom: 24px;
}

.footer__text a:hover {
  color: #333;
}

.facebook:hover svg {
  fill: #3b5998;
}

.twitter:hover svg {
  fill: #55acee;
}

.instagram:hover svg {
  fill: #125688;
}

.wakelet:hover svg {
  fill: #03a9f4;
}


  /* ==========================================================================
      Banner Blocks
     ========================================================================== */

.main-banner {
  height: 70vh!important;
}

.banner{
  height: 70vh;
  padding-top: 200px;
}

.media__banner {
  padding: 60px 0;
}

.banner--slider{
  background-image:url('../images/bg-banner.jpg');
}

.banner--bg{
  background-size:cover;
  padding: 130px 0;
  height: auto;
}

.min-height {
  min-height: 606px;
}

.banner--skydiver p {
  line-height: 0.8;
}

.banner--skydiver span{
  padding-left: 3px;
}

.banner--bg--skydiver {
  background: url('../images/bg-skydivers.jpg') no-repeat center;
  background-size: cover;
}

.banner--bg--speedboat{
  background-image:url('../images/bg-speedboat.jpg');
}

.banner--bg--forest{
  background-image:url('../images/bg-forest.jpg');
}

.banner--bg--desert{
  background-image:url('../images/bg-desert.jpg');
}

.banner--bg--mountain{
  background-image:url('../images/bg-mountain.jpg');
}

.banner--bg--stars{
  background-image:url('../images/bg-stars.jpg');
}

.banner--bg--crowd{
  background-image:url('../images/bg-crowd.jpg');
}

.banner--side-text{
  display:flex;
}

.banner--side-text--righ > div{
  margin-le
}

.banner--side-text .banner__content{
  max-width:600px;
  padding:0 32px;
  margin:0;
}

.banner--controls{
  padding: 170px 0 70px 0!important
}

.banner--empty {
  background: url('../../../styles/legal-banner.jpg') no-repeat center bottom;
  background-size: cover;
}

.banner__content{
  max-width:850px;
  margin:0 auto;
}

.banner__controls{
  margin-top: 60px;
}

.banner__controls .btn {
  margin-left: 4px;
  margin-right: 4px;
}

.banner__controls .btn.active{
  background:#03a9f4;
  color:#ffffff;
}

.btn {
  display: inline-block;
  border-radius: 3px;
  height: 38px;
  padding: 0.45em 1em;
  line-height: 20px;
  font-weight: 600;
}

.btn--inverse:hover {
  color: #fff;
}

.banner__overlay {
  background: rgba(0,0,0,0.3);
}

/* ==========================================================================
	Grid Blocks
   ========================================================================== */

.block-grid__column{
  background:#ffffff;
  width: 100%;
  align-items:center;
}

.block-grid__column--bordered{
  border-right:1px solid #EEEEEE;
}

.block-grid__column--dark{
  background:#F7FAFB;
}

.block-grid__column--bg{
  background-size:cover;
  height: 300px;
}

.block-grid__column--bg--1 {
  background-image:url('../images/about1.jpg');
}

.block-grid__column--bg--2 {
  background-image:url('../images/about2.jpg');
}

.block-grid__column--bg--3 {
  background-image:url('../images/about3.jpg');
}

.block-grid__column--bg--4 {
  background-image:url('../images/about4.jpg');
}

.block-grid__content{
  max-width:600px;
  padding: 56px 16px;
  margin: auto;
}

.block-grid__content p {
  max-width: 460px;
  width: 100%;
}

.block-grid__image{
  max-width: 300px;
  height: 250px;
}

.block-grid__image--wide{
  width: 100%;
  max-width:500px;
}

.block-grid__content.wakelet-web {
  padding: 40px 40px 0;
}


/* ==========================================================================
	Tabs Blocks
   ========================================================================== */

.faux-avatar{
  background:#EEEEEE;
  border-radius:50%;
  width:36px;
  height:36px;
  display:inline-block;
}

.tabs-block{
  background:#03a9f4;
  padding:70px 0;
}

.tabs-block__title{
  margin-bottom:70px;
  color:#ffffff;
}

.wake__title {
  width: calc(100% - 48px);
}

.tabs-block__controls{
  margin-bottom:50px;
}

.tabs-block__controls > div {
  width: 100%;
}

.tabs-block__controls .btn {
  width: 100%;
  margin-bottom: 8px;
}

.tabs-block__page{
  background:#EEE;
  max-width:1150px;
  margin:0 auto;
}

.tabs-block__header{
  padding:10px 20px;
  background: #ffffff;
}

.tabs-block__logo{
  width:180px;
  height:auto;
}

.tabs-block__logo path{
  fill: #03a9f4;
}

.tabs-block__tab{
  display:none;
  opacity:0;
}

.tabs-block__tab:first-child{
  display:block;
  opacity:1;
}

.tabs-block__outro{
  color:#ffffff;
}

.polaroids{
  width:calc(100% + 24px);
  margin-left:-12px;
}

.polaroids__item{
  width: 100%;
  padding:0 12px;
  margin-bottom:24px;
  float:left;
}

.polaroids__image img{
  border-radius: 2px 2px 0 0;
  width:100%;
}

.polaroids__info {
  background: #ffffff;
  border-radius: 0 0 2px 2px;
  padding: 12px;
}

.polaroids__info img {
  width: 100%;
}

/* ==========================================================================
	General Content Blocks
   ========================================================================== */

.general-content{
  padding-top:75px;
  border-top:1px solid #EEEEEE;
}

.general-content__wrapper{
  max-width:1200px;
  margin:0 auto;
  display:flex;
}

.general-content__navigation {
  display: none;
  width:35%;
  position: relative;
}

.general-content__navigation--top .general-content__links{
  position: fixed;
  top:20px;
}

.general-content__navigation--bottom{
  align-self: flex-end;
}

.general-content__links{
  list-style:none;
}

.general-content__link.active{
  color:#03a9f4;
  font-weight: 600;
}

.general-content__content{
  width: 100%;
}

.general-content__content a {
  color: #03a9f4;
}

.general-content__content a:hover {
  text-decoration: underline;
}

.general-content__heading{
  color:#03a9f4;
}

.press-page {
  background: url("https://d24d0q8inqu2q.cloudfront.net/images/press-bg.jpg") no-repeat center;
  background-size: cover;
}

@media all and (max-width: 599px) {

  .banner__controls .btn {
    font-size: 14px;
    line-height: 24px;
  }

}

@media all and (min-width: 600px) {

  .media__banner {
    padding: 130px 0;
  }

  .tabs-block__controls > div {
    width: auto;
  }

  .tabs-block__controls .btn {
    width: auto;
  }

  .polaroids__item {
    width: 50%;
  }

  .block-grid__image{
    height: 390px;
  }

  .header__logo--short {
    display: none;
  }

  .page-header__logo {
    display: block;
  }

  .signup--middle {
    display: block;
  }

  .signup--small {
    display: none;
  }

  .footer__text span, .footer__text div {
    margin-bottom: 0;
    display: inline-block;
  }

  .banner--side-text .banner__content.ingenious {
    padding-left: 110px;
  }

  .banner--side-text .banner__content {
    padding: 0 60px;
  }

  .banner--skydiver div {
    width: 330px;
  }

  .block-grid__content.wakelet-web {
    padding: 0;
  }

  .block-grid__column--dark{
    border-top:1px solid #EEEEEE;
    border-bottom:1px solid #EEEEEE;
  }

  .block-grid__content--wide{
    padding:175px 40px;
  }

  .banner__controls .btn {
    margin-left: 16px;
    margin-right: 16px;
  }

  .banner {
    height: auto;
    padding: 250px 0;
  }

  .banner--bg {
    padding: 230px 0;
  }

  .block-grid__content {
    padding:60px 95px;
  }

  .block-grid__column {
    width: 50%;
  }

  .solutions {
    min-height: 525px;
  }

  .solutions div {
    max-width: 600px;
    width: 100%;
  }

  .solutions.block-grid__content p {
    max-width: 600px;
  }

  .block-grid__column--bg {
    height: auto;
  }

  .block-grid--tall{
    min-height:525px;
  }

  .block-grid{
    display: inline-block;
    width: 100%;
  }

  .block-grid__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .footer__social {
    padding-left: 24px;
  }

}

@media all and (min-width: 960px) {

  .banner--control {
    padding: 250px 0 75px 0!important;
  }

  .general-content__navigation {
    display: inline-block;
  }

  .general-content__content {
    width: 75%;
  }

  .polaroids__item {
    width: 33.3333%;
  }

}