@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900");
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");
h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: 1px;
  color: #ffffff;
  max-width: 900px; }
  @media (min-width: 320px) and (max-width: 767px) {
    h1 {
      font-size: 30px; } }
  @media (min-width: 768px) and (max-width: 1279px) {
    h1 {
      font-size: 30px; } }
  @media (min-width: 1280px) and (max-width: 1499px) {
    h1 {
      font-size: 80px; } }
  @media (min-width: 1500px) {
    h1 {
      font-size: 80px; } }

h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #3e4c5b;
  margin: 0 0 15px; }
  @media (min-width: 320px) and (max-width: 767px) {
    h2 {
      font-size: 22px; } }
  @media (min-width: 768px) and (max-width: 1279px) {
    h2 {
      font-size: 26px; } }
  @media (min-width: 1280px) and (max-width: 1499px) {
    h2 {
      font-size: 28px; } }
  @media (min-width: 1500px) {
    h2 {
      font-size: 36px; } }

h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #ffffff; }

.Small-Medium, .text p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: 26px;
  letter-spacing: normal;
  color: #9aa8b6; }
  @media (min-width: 320px) and (max-width: 767px) {
    .Small-Medium, .text p {
      font-size: 14px; } }
  @media (min-width: 768px) and (max-width: 1279px) {
    .Small-Medium, .text p {
      font-size: 14px; } }
  @media (min-width: 1280px) and (max-width: 1499px) {
    .Small-Medium, .text p {
      font-size: 16px; } }
  @media (min-width: 1500px) {
    .Small-Medium, .text p {
      font-size: 18px; } }

.page-headings {
  font-family: 'Montserrat', sans-serif;
  font-size: 48px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  color: #000000; }

a, a:hover {
  text-decoration: none; }

* {
  -webkit-font-smoothing: subpixel-antialiased; }

html, body {
  height: 100%;
  min-height: 100%;
  background: #F7F7F7;
  color: #3e4c5b;
  font-family: 'Montserrat', sans-serif; }

h1::-moz-selection, h2::-moz-selection, h3::-moz-selection, h4::-moz-selection, h5::-moz-selection, h6::-moz-selection, p::-moz-selection, a::-moz-selection, i::-moz-selection, span::-moz-selection, ul::-moz-selection, li::-moz-selection {
  background: #3e4c5b;
  color: #fff; }
h1::selection, h2::selection, h3::selection, h4::selection, h5::selection, h6::selection, p::selection, a::selection, i::selection, span::selection, ul::selection, li::selection {
  background: #3e4c5b;
  color: #fff; }

.container-fluid {
  max-width: 1400px; }

.codespace-wrapper {
  margin: 50px 0; }
  .codespace-wrapper .row, .codespace-wrapper .col-sm {
    margin: 0; }

.codespace {
  font-weight: 900;
  letter-spacing: 1px; }
  .codespace span {
    margin: 0 0 0 2px;
    font-weight: 300; }

.codespace-form i {
  font-size: 18px;
  margin: 0 5px 0 0;
  transition: all .3s ease; }
.codespace-form a {
  padding: 2px;
  font-size: 22px;
  text-align: center;
  border-bottom: solid 3px #61788e;
  transition: all .3s ease; }
.codespace-form:hover a, .codespace-form:hover i {
  color: #3e4c5b; }
.codespace-form:hover i {
  margin: 0 10px 0 0; }
@media (min-width: 320px) and (max-width: 767px) {
  .codespace-form i, .codespace-form a {
    font-size: 14px; } }
@media (min-width: 768px) and (max-width: 1279px) {
  .codespace-form i, .codespace-form a {
    font-size: 14px; } }
@media (min-width: 1280px) and (max-width: 1499px) {
  .codespace-form i, .codespace-form a {
    font-size: 16px; } }
@media (min-width: 1500px) {
  .codespace-form i, .codespace-form a {
    font-size: 18px; } }

.jumbotron {
  margin: 0;
  color: #fff;
  position: relative;
  border-radius: 0;
  background: url("img/header.png") no-repeat 50% 50%;
  background-size: cover; }
  .jumbotron:before {
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    content: '';
    height: 100px;
    display: block;
    position: absolute;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=0);
    /* IE6-9 */ }
  .jumbotron .container, .jumbotron .row {
    height: 100%; }
  .jumbotron .row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 30px; }
  .jumbotron span {
    margin: 0 0 30px;
    display: inline-block;
    border-bottom: solid 2px #fff; }
  @media (min-width: 320px) and (max-width: 767px) {
    .jumbotron {
      height: 400px; }
      .jumbotron h1 {
        margin: 0 0 30px; } }
  @media (min-width: 768px) and (max-width: 1279px) {
    .jumbotron {
      height: 400px; }
      .jumbotron h1 {
        margin: 0 0 30px; } }
  @media (min-width: 1280px) and (max-width: 1499px) {
    .jumbotron {
      height: 600px; }
      .jumbotron h1 {
        margin: 0 0 40px; } }
  @media (min-width: 1500px) {
    .jumbotron {
      height: 800px; }
      .jumbotron h1 {
        margin: 0 0 50px; } }
  .jumbotron .codespace-form a {
    color: #fff;
    border-color: #fff; }
  .jumbotron .codespace-form:hover a, .jumbotron .codespace-form:hover i {
    color: #fff; }
  .jumbotron .q4 {
    font-size: 12px;
    bottom: 100px;
    right: 100px;
    position: absolute;
    width: 150px;
    height: 150px;
    color: white;
    background: #37ba92;
    border-radius: 100%;
    text-align: center;
    text-transform: uppercase;
    padding: 40px 20px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    -ms-transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg); }
    .jumbotron .q4 span {
      display: block;
      border: 0;
      margin: 0;
      font-size: 25px; }
    @media (min-width: 320px) and (max-width: 767px) {
      .jumbotron .q4 {
        right: 20px;
        width: 100px;
        height: 100px;
        bottom: -55px;
        padding: 30px 20px; }
        .jumbotron .q4 span {
          font-size: 16px; } }
    @media (min-width: 768px) and (max-width: 1279px) {
      .jumbotron .q4 {
        right: 50px;
        width: 100px;
        height: 100px;
        bottom: -55px;
        padding: 30px 20px; }
        .jumbotron .q4 span {
          font-size: 16px; } }
  .jumbotron .header-twitter-icon {
    z-index: 1;
    left: 20px;
    width: 20px;
    height: 20px;
    bottom: 20px;
    position: absolute;
    transition: all .1s ease;
    background: url(img/icon-twitter.svg) no-repeat 50% 50%;
    background-size: cover; }
    .jumbotron .header-twitter-icon:hover {
      width: 22px;
      height: 22px;
      bottom: 19px;
      left: 19px;
      opacity: 0.8; }
  .jumbotron .header-facebook-icon {
    z-index: 1;
    left: 20px;
    width: 20px;
    height: 20px;
    bottom: 60px;
    position: absolute;
    transition: all .1s ease;
    background: url(img/icon-facebook.svg) no-repeat 50% 50%;
    background-size: cover; }
    .jumbotron .header-facebook-icon:hover {
      width: 22px;
      height: 22px;
      bottom: 59px;
      left: 19px;
      opacity: 0.8; }

.navbar {
  top: 0;
  z-index: 9999;
  width: 100%;
  padding: 20px;
  position: absolute; }
  .navbar .navbar-toggler {
    outline: none; }
  .navbar .navbar-nav {
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: self-end;
    justify-content: flex-end; }
    .navbar .navbar-nav .nav-link {
      color: #fff;
      font-weight: 500;
      text-transform: uppercase; }
      @media (min-width: 320px) and (max-width: 767px) {
        .navbar .navbar-nav .nav-link {
          font-size: 14px;
          margin: 0; } }
      @media (min-width: 768px) and (max-width: 1279px) {
        .navbar .navbar-nav .nav-link {
          font-size: 14px;
          margin: 0 7px; } }
      @media (min-width: 1280px) and (max-width: 1499px) {
        .navbar .navbar-nav .nav-link {
          font-size: 14px;
          margin: 0 10px; } }
      @media (min-width: 1500px) {
        .navbar .navbar-nav .nav-link {
          font-size: 16px;
          margin: 0 10px; } }
  .navbar .active a {
    border-bottom: 2px solid white; }

.navbar-collapse.show, .navbar-collapse.collapsing {
  z-index: 999;
  padding: 20px 0;
  position: relative; }

.mobile-nav-out .navbar {
  background: #353535;
  transition: all .4s ease; }

footer {
  padding: 50px;
  font-size: 14px;
  color: #61788e;
  background: #fff; }
  footer p {
    font-weight: 700;
    margin: 10px 0 0 0;
    display: inline-block; }
  footer .codespace {
    margin: 0 50px 0 0; }
  footer .codespace-form {
    text-align: center;
    margin: 50px auto 100px; }
    footer .codespace-form a {
      color: #61788e; }

.slack-banner {
  color: #fff;
  margin: 0 auto 50px;
  max-width: 800px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  background: #ececec;
  display: block;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  transition: all .3s ease;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .slack-banner .slack-logo {
    height: 120px;
    width: 60%;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    display: inline-block;
    background: url(img/slack-logo.svg) no-repeat 50%;
    background-size: contain; }
  .slack-banner .slack-text {
    width: 40%;
    height: 120px;
    padding: 25px 5%;
    font-size: 21px;
    line-height: 24px;
    -webkit-border-radius: 0 10px 10px 0;
    -moz-border-radius: 0 10px 10px 0;
    border-radius: 0 10px 10px 0;
    background: #37ba92;
    transition: all .3s ease;
    display: inline-block; }
    .slack-banner .slack-text u {
      font-size: 14px;
      display: block;
      margin: 3px 0 0 0;
      text-decoration: none; }
  @media (min-width: 320px) and (max-width: 767px) {
    .slack-banner {
      display: block; }
      .slack-banner .slack-logo {
        width: 100%;
        padding: 25px 10%;
        -webkit-border-radius: 10px 10px 0 0;
        -moz-border-radius: 10px 10px 0 0;
        border-radius: 10px 10px 0 0; }
      .slack-banner .slack-text {
        width: 100%;
        padding: 25px 10%;
        text-align: center;
        -webkit-border-radius: 0 0 10px 10px;
        -moz-border-radius: 0 0 10px 10px;
        border-radius: 0 0 10px 10px; } }
  @media (min-width: 768px) and (max-width: 1279px) {
    .slack-banner .slack-logo, .slack-banner .slack-text {
      width: 50%;
      padding: 25px 10%; } }
  .slack-banner:hover {
    color: #fff; }
    .slack-banner:hover .slack-text {
      background: #38c49c; }

.intro {
  padding: 0 30px;
  margin: 50px 0; }
  .intro p {
    font-size: 18px; }
  .intro .codespace {
    margin: 0;
    font-size: 30px; }
  @media (min-width: 768px) and (max-width: 1279px) {
    .intro .col-sm {
      display: block; } }

.codespace-wrapper .workplace .background {
  background: url("img/werkplekken.png") no-repeat center center;
  background-size: cover; }
.codespace-wrapper .relax .background {
  background: url("img/play.jpg") no-repeat center center;
  background-size: cover; }
.codespace-wrapper .benefits .background {
  background: url("img/benefits.jpg") no-repeat center center;
  background-size: cover; }
@media (min-width: 320px) and (max-width: 767px) {
  .codespace-wrapper .workplace, .codespace-wrapper .relax, .codespace-wrapper .benefits {
    margin: 0 0 20px; } }
.codespace-wrapper .workplace .background, .codespace-wrapper .relax .background, .codespace-wrapper .benefits .background {
  min-height: 300px; }
.codespace-wrapper .workplace .text, .codespace-wrapper .workplace .background, .codespace-wrapper .relax .text, .codespace-wrapper .relax .background, .codespace-wrapper .benefits .text, .codespace-wrapper .benefits .background {
  background-color: #fff; }
  @media (min-width: 320px) and (max-width: 767px) {
    .codespace-wrapper .workplace .text, .codespace-wrapper .workplace .background, .codespace-wrapper .relax .text, .codespace-wrapper .relax .background, .codespace-wrapper .benefits .text, .codespace-wrapper .benefits .background {
      padding: 10%; } }
  @media (min-width: 768px) and (max-width: 1279px) {
    .codespace-wrapper .workplace .text, .codespace-wrapper .workplace .background, .codespace-wrapper .relax .text, .codespace-wrapper .relax .background, .codespace-wrapper .benefits .text, .codespace-wrapper .benefits .background {
      padding: 50px; } }
  @media (min-width: 1280px) and (max-width: 1499px) {
    .codespace-wrapper .workplace .text, .codespace-wrapper .workplace .background, .codespace-wrapper .relax .text, .codespace-wrapper .relax .background, .codespace-wrapper .benefits .text, .codespace-wrapper .benefits .background {
      padding: 50px 100px; } }
  @media (min-width: 1500px) {
    .codespace-wrapper .workplace .text, .codespace-wrapper .workplace .background, .codespace-wrapper .relax .text, .codespace-wrapper .relax .background, .codespace-wrapper .benefits .text, .codespace-wrapper .benefits .background {
      padding: 75px 150px; } }
.codespace-wrapper .workplace .text a, .codespace-wrapper .relax .text a, .codespace-wrapper .benefits .text a {
  color: #61788e;
  padding: 20px 0;
  transition: all .3s ease; }
  .codespace-wrapper .workplace .text a i, .codespace-wrapper .relax .text a i, .codespace-wrapper .benefits .text a i {
    margin: 0 5px 0 0;
    transition: all .3s ease; }
  .codespace-wrapper .workplace .text a:hover i, .codespace-wrapper .relax .text a:hover i, .codespace-wrapper .benefits .text a:hover i {
    margin: 0 10px 0 0; }
@media (min-width: 320px) and (max-width: 767px) {
  .codespace-wrapper .workplace .text a, .codespace-wrapper .workplace .text a i, .codespace-wrapper .relax .text a, .codespace-wrapper .relax .text a i, .codespace-wrapper .benefits .text a, .codespace-wrapper .benefits .text a i {
    font-size: 14px; } }
@media (min-width: 768px) and (max-width: 1279px) {
  .codespace-wrapper .workplace .text a, .codespace-wrapper .workplace .text a i, .codespace-wrapper .relax .text a, .codespace-wrapper .relax .text a i, .codespace-wrapper .benefits .text a, .codespace-wrapper .benefits .text a i {
    font-size: 14px; } }
@media (min-width: 1280px) and (max-width: 1499px) {
  .codespace-wrapper .workplace .text a, .codespace-wrapper .workplace .text a i, .codespace-wrapper .relax .text a, .codespace-wrapper .relax .text a i, .codespace-wrapper .benefits .text a, .codespace-wrapper .benefits .text a i {
    font-size: 16px; } }
@media (min-width: 1500px) {
  .codespace-wrapper .workplace .text a, .codespace-wrapper .workplace .text a i, .codespace-wrapper .relax .text a, .codespace-wrapper .relax .text a i, .codespace-wrapper .benefits .text a, .codespace-wrapper .benefits .text a i {
    font-size: 18px; } }
@media (min-width: 1280px) and (max-width: 1499px) {
  .codespace-wrapper .benefits .text {
    padding: 75px; } }
@media (min-width: 1500px) {
  .codespace-wrapper .benefits .text {
    padding: 75px; } }
.codespace-wrapper .benefits ul {
  margin: 40px 0;
  padding: 0; }
  .codespace-wrapper .benefits ul li {
    list-style: none;
    margin: 0 0 20px;
    padding: 0 0 0 40px;
    background: url("img/icon-checkmark.svg") no-repeat left top;
    background-size: 25px; }
    .codespace-wrapper .benefits ul li .title {
      font-size: 16px;
      font-weight: bold;
      display: block; }
    .codespace-wrapper .benefits ul li .info {
      font-size: 14px;
      font-weight: 300; }
  @media (min-width: 1280px) and (max-width: 1499px) {
    .codespace-wrapper .benefits ul {
      width: 550px;
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
      -webkit-column-gap: 40px;
      -moz-column-gap: 40px;
      column-gap: 40px; }
      .codespace-wrapper .benefits ul li {
        padding: 0 0 0 40px;
        background-size: 25px; } }
  @media (min-width: 1500px) {
    .codespace-wrapper .benefits ul {
      width: 550px;
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
      -webkit-column-gap: 40px;
      -moz-column-gap: 40px;
      column-gap: 40px; }
      .codespace-wrapper .benefits ul li {
        padding: 0 0 0 50px;
        background-size: 35px; } }

.home .membership-plans .plan-text {
  padding: 20px 30px 50px 30px; }

.home .membership-plans .space-icon {
  width: 100px;
  display: block;
  margin: 0 auto; }

.pricing-page .jumbotron {
  background: url("img/background-pricing.jpg") no-repeat center center;
  background-size: cover; }
  .pricing-page .jumbotron .row {
    z-index: 1;
    position: relative; }
  .pricing-page .jumbotron:after {
    content: '';
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.5); }
  @media (min-width: 320px) and (max-width: 767px) {
    .pricing-page .jumbotron {
      height: 400px; }
      .pricing-page .jumbotron h1 {
        margin: 0 0 30px; } }
  @media (min-width: 768px) and (max-width: 1279px) {
    .pricing-page .jumbotron {
      height: 400px; }
      .pricing-page .jumbotron h1 {
        margin: 0 0 30px; } }
  @media (min-width: 1280px) and (max-width: 1499px) {
    .pricing-page .jumbotron {
      height: 500px; }
      .pricing-page .jumbotron h1 {
        margin: 0 0 40px; } }
  @media (min-width: 1500px) {
    .pricing-page .jumbotron {
      height: 500px; }
      .pricing-page .jumbotron h1 {
        margin: 0 0 50px; } }

.membership-plans {
  margin: 75px 0; }
  .membership-plans .page-headings {
    display: block;
    color: #3e4c5b;
    font-size: 30px;
    margin: 0 0 50px;
    text-transform: uppercase;
    text-align: center; }
  .membership-plans .all-memberships {
    display: block;
    color: #3e4c5b;
    font-size: 14px;
    margin: 30px 0 0;
    text-transform: uppercase;
    text-align: center; }
    .membership-plans .all-memberships i {
      font-size: 18px;
      margin: 0 5px 0 0;
      transition: all .3s ease; }
    .membership-plans .all-memberships:hover i {
      margin: 0 10px 0 0; }
  .membership-plans .plan-text {
    margin: 0 0 20px;
    padding: 50px 30px;
    background: #fff; }
    .membership-plans .plan-text h4 {
      height: 45px;
      text-align: center;
      font-size: 22px;
      font-weight: bold; }
      .membership-plans .plan-text h4 span {
        font-size: 16px !important;
        margin: 5px 0 0 !important; }
    .membership-plans .plan-text span {
      margin: 15px auto -30px;
      text-align: center;
      display: block;
      font-size: 12px;
      text-transform: uppercase;
      opacity: 0.5;
      color: #9aa8b6; }
    .membership-plans .plan-text h5 {
      margin: 30px 0 30px;
      font-size: 20px;
      text-align: center;
      color: #9aa8b6; }
    .membership-plans .plan-text .plan-intro {
      font-size: 14px;
      font-weight: bold;
      margin: 30px 0 15px; }
    .membership-plans .plan-text .plan-items {
      font-size: 14px;
      font-weight: 300;
      line-height: 30px; }

.add-ons {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  transition: all .3s ease;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .add-ons .plan-text {
    color: white;
    background: #444;
    padding: 40px 30px; }
    .add-ons .plan-text h5 {
      margin: 10px 0 30px; }

.franchise-opportunities {
  margin: 100px 0;
  text-align: center; }
  .franchise-opportunities img {
    display: block;
    max-width: 80%;
    margin: 0 auto; }
    @media (min-width: 320px) and (max-width: 767px) {
      .franchise-opportunities img {
        max-width: 100%; } }
  .franchise-opportunities .franchise-link {
    display: block;
    color: #3e4c5b;
    font-size: 18px;
    margin: 30px 0 0;
    text-transform: uppercase;
    text-align: center; }
    .franchise-opportunities .franchise-link a {
      color: #61788e;
      border-bottom: solid 2px #61788e; }
    @media (min-width: 320px) and (max-width: 767px) {
      .franchise-opportunities .franchise-link {
        font-size: 15px; } }

.contact-page .contact-us .background {
  background: url("img/background-contact4.jpg") no-repeat center center;
  background-size: cover; }
@media (min-width: 320px) and (max-width: 767px) {
  .contact-page .contact-us {
    margin: 0 0 20px; } }
.contact-page .contact-us .background {
  min-height: 300px; }
.contact-page .contact-us .text, .contact-page .contact-us .background {
  background-color: #fff; }
  @media (min-width: 320px) and (max-width: 767px) {
    .contact-page .contact-us .text, .contact-page .contact-us .background {
      padding: 10%; } }
  @media (min-width: 768px) and (max-width: 1279px) {
    .contact-page .contact-us .text, .contact-page .contact-us .background {
      padding: 50px; } }
  @media (min-width: 1280px) and (max-width: 1499px) {
    .contact-page .contact-us .text, .contact-page .contact-us .background {
      padding: 50px 100px; } }
  @media (min-width: 1500px) {
    .contact-page .contact-us .text, .contact-page .contact-us .background {
      padding: 75px 150px; } }
.contact-page .contact-us .text a {
  color: #61788e;
  padding: 20px 0;
  transition: all .3s ease; }
  .contact-page .contact-us .text a i {
    margin: 0 5px 0 0;
    transition: all .3s ease; }
  .contact-page .contact-us .text a:hover i {
    margin: 0 10px 0 0; }
@media (min-width: 320px) and (max-width: 767px) {
  .contact-page .contact-us .text a, .contact-page .contact-us .text a i {
    font-size: 14px; } }
@media (min-width: 768px) and (max-width: 1279px) {
  .contact-page .contact-us .text a, .contact-page .contact-us .text a i {
    font-size: 14px; } }
@media (min-width: 1280px) and (max-width: 1499px) {
  .contact-page .contact-us .text a, .contact-page .contact-us .text a i {
    font-size: 16px; } }
@media (min-width: 1500px) {
  .contact-page .contact-us .text a, .contact-page .contact-us .text a i {
    font-size: 18px; } }
.contact-page .jumbotron {
  background: url("img/background-contact2.jpg") no-repeat left center;
  background-size: cover; }
  .contact-page .jumbotron .row {
    z-index: 1;
    position: relative; }
  .contact-page .jumbotron:after {
    content: '';
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.5); }
  @media (min-width: 320px) and (max-width: 767px) {
    .contact-page .jumbotron {
      height: 400px; }
      .contact-page .jumbotron h1 {
        margin: 0 0 30px; } }
  @media (min-width: 768px) and (max-width: 1279px) {
    .contact-page .jumbotron {
      height: 400px; }
      .contact-page .jumbotron h1 {
        margin: 0 0 30px; } }
  @media (min-width: 1280px) and (max-width: 1499px) {
    .contact-page .jumbotron {
      height: 500px; }
      .contact-page .jumbotron h1 {
        margin: 0 0 40px; } }
  @media (min-width: 1500px) {
    .contact-page .jumbotron {
      height: 500px; }
      .contact-page .jumbotron h1 {
        margin: 0 0 50px; } }
.contact-page .mail-link {
  color: #9aa8b6; }
.contact-page form label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-style: normal;
  font-stretch: normal;
  line-height: 26px;
  letter-spacing: normal;
  color: #61788e; }

.contact-us #mc_embed_signup textarea, .contact-us #mc_embed_signup input {
  outline: none; }

.contact-us #mc_embed_signup textarea {
  width: 100%;
  max-width: 100%;
  height: 150px;
  max-height: 150px;
  border: 1px solid #abb0b2;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px; }

.contact-us #mc_embed_signup div#mce-responses {
  padding: 0;
  margin: 0; }

.btn-primary, .contact-us #mc_embed_signup .button {
  color: #fff;
  height: auto;
  font-weight: 300;
  padding: 10px 20px;
  text-transform: uppercase;
  background-color: #61788e;
  border-color: #61788e; }
  .btn-primary:hover, .contact-us #mc_embed_signup .button:hover {
    background-color: #9aa8b6;
    border-color: #9aa8b6; }
  .btn-primary:focus, .btn-primary .focus, .contact-us #mc_embed_signup .button:focus, .contact-us #mc_embed_signup .button .focus {
    box-shadow: none; }

.form-control {
  font-weight: 300; }
  .form-control:focus {
    color: #495057;
    border-color: #9aa8b6;
    box-shadow: 0 0 0 0.2rem rgba(154, 168, 182, 0.25); }

textarea {
  height: 100px;
  max-height: 100px; }

.spaces-page .jumbotron, .events-page .jumbotron {
  background: url("img/background-contact2.jpg") no-repeat left center;
  background-size: cover; }
  .spaces-page .jumbotron .row, .events-page .jumbotron .row {
    z-index: 1;
    position: relative; }
  .spaces-page .jumbotron:after, .events-page .jumbotron:after {
    content: '';
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.5); }
  @media (min-width: 320px) and (max-width: 767px) {
    .spaces-page .jumbotron, .events-page .jumbotron {
      height: 400px; }
      .spaces-page .jumbotron h1, .events-page .jumbotron h1 {
        margin: 0 0 30px; } }
  @media (min-width: 768px) and (max-width: 1279px) {
    .spaces-page .jumbotron, .events-page .jumbotron {
      height: 400px; }
      .spaces-page .jumbotron h1, .events-page .jumbotron h1 {
        margin: 0 0 30px; } }
  @media (min-width: 1280px) and (max-width: 1499px) {
    .spaces-page .jumbotron, .events-page .jumbotron {
      height: 500px; }
      .spaces-page .jumbotron h1, .events-page .jumbotron h1 {
        margin: 0 0 40px; } }
  @media (min-width: 1500px) {
    .spaces-page .jumbotron, .events-page .jumbotron {
      height: 500px; }
      .spaces-page .jumbotron h1, .events-page .jumbotron h1 {
        margin: 0 0 50px; } }
.spaces-page .workspace .background, .events-page .workspace .background {
  background: url("img/werkplekken.png") no-repeat center center;
  background-size: cover; }
.spaces-page .workspace .background.voorzieningen-background, .events-page .workspace .background.voorzieningen-background {
  background: url("img/background-spaces.jpg") no-repeat center center;
  background-size: cover; }
.spaces-page .workspace .background.lunch-background, .events-page .workspace .background.lunch-background {
  background: url("img/background-lunch.jpg") no-repeat center center;
  background-size: cover; }
@media (min-width: 320px) and (max-width: 767px) {
  .spaces-page .workspace, .spaces-page .workspace-items, .events-page .workspace, .events-page .workspace-items {
    margin: 0 0 20px; } }
.spaces-page .workspace .background, .spaces-page .workspace-items .background, .events-page .workspace .background, .events-page .workspace-items .background {
  min-height: 300px; }
.spaces-page .workspace .text, .spaces-page .workspace .background, .spaces-page .workspace-items .text, .spaces-page .workspace-items .background, .events-page .workspace .text, .events-page .workspace .background, .events-page .workspace-items .text, .events-page .workspace-items .background {
  background-color: #fff; }
  @media (min-width: 320px) and (max-width: 767px) {
    .spaces-page .workspace .text, .spaces-page .workspace .background, .spaces-page .workspace-items .text, .spaces-page .workspace-items .background, .events-page .workspace .text, .events-page .workspace .background, .events-page .workspace-items .text, .events-page .workspace-items .background {
      padding: 10%; } }
  @media (min-width: 768px) and (max-width: 1279px) {
    .spaces-page .workspace .text, .spaces-page .workspace .background, .spaces-page .workspace-items .text, .spaces-page .workspace-items .background, .events-page .workspace .text, .events-page .workspace .background, .events-page .workspace-items .text, .events-page .workspace-items .background {
      padding: 40px; } }
  @media (min-width: 1280px) and (max-width: 1499px) {
    .spaces-page .workspace .text, .spaces-page .workspace .background, .spaces-page .workspace-items .text, .spaces-page .workspace-items .background, .events-page .workspace .text, .events-page .workspace .background, .events-page .workspace-items .text, .events-page .workspace-items .background {
      padding: 50px 40px; } }
  @media (min-width: 1500px) {
    .spaces-page .workspace .text, .spaces-page .workspace .background, .spaces-page .workspace-items .text, .spaces-page .workspace-items .background, .events-page .workspace .text, .events-page .workspace .background, .events-page .workspace-items .text, .events-page .workspace-items .background {
      padding: 75px 40px; } }
.spaces-page .workspace .text:nth-child(4n):after, .spaces-page .workspace-items .text:nth-child(4n):after, .events-page .workspace .text:nth-child(4n):after, .events-page .workspace-items .text:nth-child(4n):after {
  display: none; }
.spaces-page .workspace .text:after, .spaces-page .workspace-items .text:after, .events-page .workspace .text:after, .events-page .workspace-items .text:after {
  content: '';
  width: 1px;
  height: 60%;
  background: #e4e4e4;
  position: absolute;
  top: 20%;
  right: 0; }
@media (min-width: 320px) and (max-width: 767px) {
  .spaces-page .workspace .text:before, .spaces-page .workspace-items .text:before, .events-page .workspace .text:before, .events-page .workspace-items .text:before {
    content: '';
    width: 60%;
    height: 1px;
    background: #e4e4e4;
    position: absolute;
    left: 20%;
    bottom: 0; } }
@media (min-width: 768px) and (max-width: 1279px) {
  .spaces-page .workspace .text:nth-child(-n+4):before, .spaces-page .workspace-items .text:nth-child(-n+4):before, .events-page .workspace .text:nth-child(-n+4):before, .events-page .workspace-items .text:nth-child(-n+4):before {
    content: '';
    width: 60%;
    height: 1px;
    background: #e4e4e4;
    position: absolute;
    left: 20%;
    bottom: 0; } }
@media (min-width: 1280px) and (max-width: 1499px) {
  .spaces-page .workspace .text:nth-child(-n+4):before, .spaces-page .workspace-items .text:nth-child(-n+4):before, .events-page .workspace .text:nth-child(-n+4):before, .events-page .workspace-items .text:nth-child(-n+4):before {
    content: '';
    width: 60%;
    height: 1px;
    background: #e4e4e4;
    position: absolute;
    left: 20%;
    bottom: 0; } }
@media (min-width: 1500px) {
  .spaces-page .workspace .text:nth-child(-n+4):before, .spaces-page .workspace-items .text:nth-child(-n+4):before, .events-page .workspace .text:nth-child(-n+4):before, .events-page .workspace-items .text:nth-child(-n+4):before {
    content: '';
    width: 60%;
    height: 1px;
    background: #e4e4e4;
    position: absolute;
    left: 20%;
    bottom: 0; } }
.spaces-page .workspace .text.voorzieningen:before, .spaces-page .workspace-items .text.voorzieningen:before, .events-page .workspace .text.voorzieningen:before, .events-page .workspace-items .text.voorzieningen:before {
  content: '';
  width: 60%;
  height: 1px;
  background: #e4e4e4;
  position: absolute;
  left: 20%;
  top: 0; }
.spaces-page .workspace .text a, .spaces-page .workspace-items .text a, .events-page .workspace .text a, .events-page .workspace-items .text a {
  color: #61788e;
  padding: 20px 0;
  transition: all .3s ease; }
  .spaces-page .workspace .text a i, .spaces-page .workspace-items .text a i, .events-page .workspace .text a i, .events-page .workspace-items .text a i {
    margin: 0 5px 0 0;
    transition: all .3s ease; }
  .spaces-page .workspace .text a:hover i, .spaces-page .workspace-items .text a:hover i, .events-page .workspace .text a:hover i, .events-page .workspace-items .text a:hover i {
    margin: 0 10px 0 0; }
@media (min-width: 320px) and (max-width: 767px) {
  .spaces-page .workspace .text a, .spaces-page .workspace .text a i, .spaces-page .workspace-items .text a, .spaces-page .workspace-items .text a i, .events-page .workspace .text a, .events-page .workspace .text a i, .events-page .workspace-items .text a, .events-page .workspace-items .text a i {
    font-size: 14px; } }
@media (min-width: 768px) and (max-width: 1279px) {
  .spaces-page .workspace .text a, .spaces-page .workspace .text a i, .spaces-page .workspace-items .text a, .spaces-page .workspace-items .text a i, .events-page .workspace .text a, .events-page .workspace .text a i, .events-page .workspace-items .text a, .events-page .workspace-items .text a i {
    font-size: 14px; } }
@media (min-width: 1280px) and (max-width: 1499px) {
  .spaces-page .workspace .text a, .spaces-page .workspace .text a i, .spaces-page .workspace-items .text a, .spaces-page .workspace-items .text a i, .events-page .workspace .text a, .events-page .workspace .text a i, .events-page .workspace-items .text a, .events-page .workspace-items .text a i {
    font-size: 16px; } }
@media (min-width: 1500px) {
  .spaces-page .workspace .text a, .spaces-page .workspace .text a i, .spaces-page .workspace-items .text a, .spaces-page .workspace-items .text a i, .events-page .workspace .text a, .events-page .workspace .text a i, .events-page .workspace-items .text a, .events-page .workspace-items .text a i {
    font-size: 18px; } }
.spaces-page .workspace-items .space-icon, .events-page .workspace-items .space-icon {
  width: 100px;
  display: block;
  margin: 0 auto; }
.spaces-page .workspace-items h2, .events-page .workspace-items h2 {
  text-align: center;
  font-size: 22px;
  letter-spacing: 1px; }

.events-page .jumbotron {
  background: url("img/background-events.jpg") no-repeat left center;
  background-size: cover;
  text-shadow: 0px 0px 19px rgba(0, 0, 0, 0.46); }

.events-page .workspace .background.event-background {
  background: url("img/background-event.jpg") no-repeat center center;
  background-size: cover; }

.events-page .workspace .background.event1-background {
  background: url("img/background-event1.jpg") no-repeat center center;
  background-size: cover; }

.events-page .workspace .background.event3-background {
  background: url("img/background-event3.jpg") no-repeat center center;
  background-size: cover; }