body { font: 1rem "Open Sans", sans-serif }

.skew   {
          transform: translateZ(0) skewY(-5deg);
          box-shadow: inset 0 -70px 160px -75px rgba(21,22,36,.1), 0 -70px 160px -75px rgba(21,22,36,.1);}
.skew-1   {
          transform: translateZ(0) skewY(5deg);
          box-shadow: inset 0 70px -160px 75px rgba(21,22,36,.1), 0 70px -160px 75px rgba(21,22,36,.1);}
.skew-2   {
          transform: translateZ(0) skewY(-4deg);
          box-shadow: inset 0 -70px 160px -75px rgba(21,22,36,.1), 0 -70px 160px -75px rgba(21,22,36,.1);}
/* Typography */
h1, h2, h3, h4, h5,
.login--wrapper--forms h1 {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  -ms-hyphens: manual;
  -moz-hyphens: manual;
  -webkit-hyphens: manual;
  hyphens: manual; }

h2 {
  font-size: 2rem;
  font-weight: 700;}

h5 {
  font-size: 1rem;
  color: #A4B2B2;
  text-align: center; }

p { line-height: 1.5em }

.left {
  text-align: left!important;
}

iframe { width: 100% !important }

.text__introduction {
  font-weight: 400;
  margin-bottom: 2rem;
  color: #002846;
  font-size: 1.25rem;
  line-height: 1.5em;
  text-align: center; }

  @media (max-width: 60rem) { .text__introduction { font-size: 1rem; } }

  .text__introduction-sub {
  font-weight: 400;
  margin-bottom: 2rem;
  color: #002846;
  font-size: 1.1rem;
  line-height: 1.5em;
  text-align: left; }

  @media (max-width: 60rem) { .text__introduction-sub { font-size: 1rem; } }

/* Headlines */
.headline {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 2rem; }

  @media (max-width: 60rem) {
    .headline {
      font-size: 2rem;
      margin-bottom: 2rem;
    }
  }

  /* Headlines */
.headline-2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem; }

  @media (max-width: 60rem) {
    .headline-2 {
      font-size: 1.5rem;
      margin-bottom: 2rem;
    }
  }

.blue-headline {
  color: #002846;
}

@media (max-width: 60rem) { .hide-mobile {display: none} }

/* Headline colors */
.section--white .headline, .section--white .headline-2 { color: #002846;
                            text-align: center; }
.section--light-blue .headline, .section--red .headline-2 { color: #FFFFFF; }
.section--blue  .headline, .section--blue  .headline-2 { color: #FFFFFF;
                            text-align: center; }
.section--light-grey  .headline, .section--light-grey  .headline-2 { color: #002846;
                            text-align: center; }
.section--gray  .headline, .section--gray  .headline-2 { color: #002846;
                            text-align: center; }

.section--light-blue .headline, .section--lighe-blue .headline-2 { text-align: center; margin-bottom: 2em; }

.white {
  color: white;
}

/* Sections */
.section {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* center the content in the containers */
  padding: 12.5rem 0; }

  @media (max-width: 60rem) { .section { padding: 6rem 0; } }

/* Section background colors */
.section--white { background-color: #FFFFFF }
.section--light-blue {     background-image: linear-gradient(190deg,#2983FB,#1353B9);
box-shadow:0 135px 70px 130px rgba(25,97,204,1);}
.section--light-grey { background-color: #F7F8FB }
.section--blue  { background-color: #002846}
.section--gray  {
  background-color: #F4F5F5;
     -webkit-box-shadow: 0px 85px 29px 73px rgba(244,245,245,1);
    -ms-box-shadow: 0px 85px 29px 73px rgba(244,245,245,1);
}
.section--intro { background: center center / cover no-repeat #2983FB url(/img/bg__login--hero.jpg) ; /* The background image */ }

.section--intro {
  display: block;
}

 .section--light-grey .section__participate .text__introduction, .section__participate li {
  color: #002846;
 }
/* Content containers */
.section__content {
  box-sizing: border-box;
  flex-direction: column;
  display: flex;
  flex: 0 0 auto;
  padding: 0 5rem; }

.section__content-1 {
      align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 70%; }

@media (max-width: 72.5rem) { .section__content { padding: 0 2rem; } }
@media (max-width: 72.5rem) { .section__content-1 { padding: 0 2rem; } }

.unskew {
    transform: translateZ(0) skewY(5deg);
}

.unskew-1 {
    transform: translateZ(0) skewY(-5deg);
}

.unskew-2 {
    transform: translateZ(0) skewY(4deg);
}

.section--challenge {
    position: relative;
    transform: translateY(-6rem) skewY(-5deg);
    z-index: 2;
}

/* Row Content Container  */
.section__content--row   { flex-direction: row;  }

/* Content containers' width */
.section__content--wide     { flex-basis: 72.5rem  }   /* 1000px + 160px padding */
.section__content--narrow   { flex-basis: 60.0rem }    /*  800px + 160px padding */

.section__participate .section__content--narrow {
  flex-basis: 60rem;
}

/* EDGE FIX */
.max-width{
  max-width: 800px;
}

.section__why-should .section__content-1, .section__participate .section__content-1 {
  align-items: unset;
}

@media (max-width: 72.5rem) {
  .section__content--wide   { flex-basis: 100%  }
}

@media (max-width: 60rem)   {
  .section__content--wide,
  .section__content--narrow {
    flex-basis: 100%;  }
}

/* NAVIGATION */
.navigation {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  padding:.7rem 0;
  position: fixed;
  z-index: 5;
  transition: background-color 0.2s ease-in-out;
  width: 100%; }

  .navigation--scrolled { background-color: #002846; }

  .navigation--scrolled .navigation__button--text {color: white;}
  .navigation--scrolled .navigation__logo path {
    background-color: #002846!important;
  }


.navigation__links {
  align-items: center;
  display: flex }

.navigation__link {
  color: #FFFFFF;
  font-size: 1rem;
  letter-spacing: 0.125rem;
  margin-right: 2rem;
  transition:all 0.2s ease; }

  @media (max-width: 55rem) { .navigation__link { display: none } }

  @media (max-width: 60rem) {
    .navigation__link {
      font-size: 0.875rem;
      margin-right: 1rem;
    }
  }

  .navigation__link:last-child { margin-right:0;  }

.navigation__link:hover { color: #fff; }

.navigation__logo { margin-right: 2rem; }

  @media (max-width: 60rem) {.navigation__logo img {height: 1em; display: none;}}
    @media (max-width: 60rem) {.navigation__logo { margin-right: 0;}}

.navigation__buttons {
  margin-left: auto;
  align-items:center;
  display: flex }

  @media (max-width: 60rem) {.navigation__buttons  a { font-size: 0.8em; text-align: center } }

.navigation__button {
  font-weight: 700;
  transition: all 0.2s ease; }

.navigation__button:hover {text-decoration: none;}

.navigation__button--text {
  margin-right: 2rem;
  color:#fff;
  font-weight: 700; }

.navigation__button--text:hover { color: #FFFFFF }

.navigation__button--ghost {
  color: white;
  border-radius: 0.25rem;
  background-color: #2983FB;
  padding: 0.5rem 2rem ; }

  @media (max-width: 60rem) { .navigation__button--ghost { padding:0.5rem 0.5rem; } }

.navigation__button--ghost:hover {
  background-color: white;
  color: #2983FB; }


/* LOGOS */
.logos {
  align-items: center;
  flex-wrap: wrap;
  display: flex;
  justify-content: center; }

.logo {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 20%;
  padding: 1rem;
  margin-bottom: 2rem; }

.logo img {
  align-self: flex-start;
  max-width: 8rem; }

@media (max-width: 60rem) { .logo img { max-width: 4rem; } }

/* INTRO */
@media (max-width: 72.5rem) {
  .section__content--intro {
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
}

.intro__headline { flex: 1 0 50%; text-align: center;}


.section__why-should p{
    margin-bottom: 1rem!important;
}

.section--hero {
      background: #71A7ED;
    background-image: url(../img/bg__login--hero.jpg);
    background-image: url(../img/bg__login--hero.jpg), linear-gradient(#000229, #71A7ED);
    background-position: center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    height: calc(100vh + 8rem);
    justify-content: center;
}

.hero__text {
    animation: fadeInScaleUP .4s .2s cubic-bezier(0.785, 0.135, 0.15, 0.86) both;
    opacity: 0;
    margin-bottom: 4rem;
    height: 26rem;
}

@media (max-width: 60rem) { .hero__text  {     height: 14rem; } }


  @media (max-width: 72.5rem) { .intro__headline { flex: 0 0 auto; } }

  .intro__title {
    color: #fff;
    font-size: 4.5rem; }

    @media (max-width: 60rem) {
      .intro__title {
        font-size: 3rem;
        margin-bottom: 2rem;
      }
    }

    @media (max-width: 60rem) { .intro__title { font-size: 2rem; } }

@media (max-width: 60rem) { .intro__logo { display: none } }

.intro__cta {
  margin-top: auto;
  padding-left: 5rem;
  flex: 0 1 auto; }

  @media (max-width: 60rem) {
    .intro__cta {
      display: flex;
      flex-direction: column;
      padding-left: 0rem;
    }
  }

  @media (max-width: 60rem) { .intro__cta button { align-self: center; } }

  .intro__cta p,
  .intro__cta h5 { color: #fff }

/*WHY ICONS*/
.why-icons{
  margin-top: 4em;
}
/* CHALLENGE */
.section__challenge  {margin-bottom: -24rem ;}

/* Add some spacing to the text on the top of the logos */
.section__challenge h5 { margin-top: 5rem; }

/* Challenge: Video */
/* Add some spacing to the logos on the of the videos */
.video {
  margin: 8rem 0 0;
  display: flex;
  justify-content: center; }

/* PARTICIPATE */
/* Make room for the overlapping video from the previous section */
.section__participate { padding-top: 14rem; }

  @media (max-width: 60rem) { .section__participate { padding-top: 6rem; } }

.section__participate ul {
  max-width: 800px;
  margin-left: 1em;
  margin-bottom: 1.5em;
}
.section__participate li {
  color: #002846;
  list-style: square;
  margin-left: 1em;
  text-align: left;
  margin-bottom:1em;
  font-size: 1.1em;
}

.section__participate-list { margin-top:2em;}

.section__participate-list p{
  font-weight: 400;
  margin-bottom: 1.5rem;
  color: #002846;
  font-size: 1.1rem;
  line-height: 1.5em;
  text-align: left;
}

.section__participate .text__introduction {
  margin-bottom: 0;
  max-width: 800px;
  margin: 0 auto;
}
.section--challenge .text__introduction {
  max-width: 1000px;
}

.participate-sections {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

  @media (max-width: 60rem) {

    .participate-sections {
    flex-direction: column;
    max-width: 500px;
    margin: 0 auto;
    }
  }

.participate-section {
  display: flex;
  margin: 4em 2em 0 0;
  border-radius: 0.5em;
  flex-direction: column;
  background-color: white;
  box-shadow: 0 0 80px 0 rgba(21,22,36,.2); /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
  -webkit-box-shadow: 0 0 80px 0 rgba(21,22,36,.2);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:  0 0 80px 0 rgba(21,22,36,.2);  /* Firefox 3.5 - 3.6 */
}

  @media (max-width: 60rem) { .participate-section{    margin: 1em 0;} }


.participate-section p {
  padding: 2em;
  font-size: 1.1rem;
}

.participate-section img {
  align-items: center;
}



.inspiration-boxes {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
}
  @media (max-width: 60rem) { .inspiration-boxes{  flex-direction: column;} }

.inspiration-box {
    flex-wrap: wrap;
    margin-top: 5em;
    margin-right: 2em;
    border-radius: 0.5em;
    padding: 4em;
    background-color: white;
    box-shadow: 0 0 80px 0 rgba(21,22,36,.2); /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
    -webkit-box-shadow: 0 0 80px 0 rgba(21,22,36,.2);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:  0 0 80px 0 rgba(21,22,36,.2);  /* Firefox 3.5 - 3.6 */
}

.inspiration-box:last-child {
  margin-right: 0;
}

  @media (max-width: 60rem) { .inspiration-box{  padding: 2em; margin: 2em 0 0;  } }

    @media (max-width: 60rem) {   .inspiration-box:last-child{ margin-top: 2em;  } }

.participate__item {
  display: flex;
  margin-bottom: 6.5rem; }

  @media (max-width: 60rem) { .participate__item { margin-bottom: 3rem; } }

.participate__item:last-child { margin-bottom: 13rem; } /* add a some extra margin on the last item, so that we create some nice distance to the slider */

  @media (max-width: 60rem) { .participate__item:last-child { margin-bottom: 6rem; } }

/* Add a little space to the text */
.participate__icon { margin-right: 2.5rem;}

  @media (max-width: 60rem) {
    .participate__icon {
      margin-right: 1rem;
      height: 2rem;
    }
  }

.participate__text {
  color: #fff;
  font-size: 2rem;
  font-weight: 600;  }

  @media (max-width: 60rem) { .participate__text { font-size: 1.25rem; } }

/* Participate: Slider */
.section__content--slider {
  max-width: 72.5rem;
  padding: 4rem 0 0 0;
}

  @media (max-width: 72.5rem) { .section__content--slider { max-width: 90%; } }
  @media (max-width: 60rem) { .section__content--slider { padding: 0; } }

/* Overwrite the default rule for the slick slider */
.slick-initialized .slick-slide { display: flex !important; justify-content: center; }

/* The prev/next buttons for the slider */
.slick-prev,
.slick-next {
  box-shadow: none;
  width: 2rem;
  height: 2rem; }

.slick-prev { left: -2.5rem }
.slick-next { right: -2.5rem }

.slick-prev:before,
.slick-next:before {
  line-height: 2.25rem;
  color: #002846;
  font-size: 2rem;
}

/* JURY */
.jury {
  display: flex;
  justify-content: center;
  padding: 0 0 4rem;
}

  @media (max-width: 60rem) { .jury { flex-direction: column; } }

/*Banner for people*/
.banner-profile {
  text-align:center;
  display: flex;
  padding:0 1rem;
  flex-direction: column;
  flex: 0 0 calc(33% - 2rem);
  flex-basis: calc(33% - 2rem); /* IE 11 support */
}

.banner-profile--4 {
  flex: 0 0 calc(25% - 2rem);
  flex-basis: calc(25% - 2rem); /* IE 11 support */
}

  @media (max-width: 60rem) {
    .banner-profile,
    .banner-profile--4
     {
      flex-basis: 100%;
      margin: 0rem;
    }
  }

.banner-profile img {
  margin: 2rem auto;
  height: 10rem;
  width: 10rem;
}

.banner-profile p {
  font-weight: 400;
  color: #002846;
  font-size:1.25rem;
  line-height: 1.5em;
}

.banner-profile__title        { flex: 0 1 8rem;}
.banner-profile__name         { flex: 0 1 6rem;}
.banner-profile__description  { flex: 1 1 auto;}

@media (max-width: 60rem) {
.banner-profile__title,
.banner-profile__name         { flex-basis: auto; margin-bottom: 1rem;}
 }

/*Info table*/
/* Information table */
.info-video {
  margin: 4em;
}

.info-tables {
  margin: 2em 0;
}

.info-table {
  display: flex;
  justify-content: center;
  width: 100%;
}

.table-text-same-height {
  margin-bottom: 1em;
  margin-top: 2em!important;
  height: 1em;
}

.push-bottom {
  margin-bottom: auto;
}

  @media (max-width: 700px) { .info-table { flex-wrap: wrap; } }

.info__text { max-width: 50% }

  @media (max-width: 768px) { .info__text { max-width: 100% } }

.info-table__item {
  align-items: center;
  display: flex;
  flex-direction: column;
  flex: 0 1 33%;
  padding: 3rem 2rem 2rem;
  margin-right: 1em;
  border-radius: 0.5em;
  background-color: white;
    justify-content: space-between;
      box-shadow: 0 0 80px 0 rgba(21,22,36,.2); /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
    -webkit-box-shadow: 0 0 80px 0 rgba(21,22,36,.2);  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow:  0 0 80px 0 rgba(21,22,36,.2);  /* Firefox 3.5 - 3.6 */

}

.info-table__item:last-child {
  margin-right: 0;
}

  @media (max-width: 700px) {
    .info-table__item {
      flex: 0 1 100%;
      margin-bottom: 4rem;
    }
  }

/* Center the icon */
.info-table__icon {
  margin-bottom: auto;
  margin-top: auto; }

.info-table__icon img { width: 5rem;   flex-grow: 1;}

/* Locate the text at the bottom */
.info-table__text {
  color: #425563;
  padding: 0.5rem;
  margin-top: auto;
  width: 100%;
  font-size: 1rem;
}

.footer__logo {
  height: 1.1rem;
}

.participate-bold {
font-weight: 900;
}

.participate-section {
    background: #fff;
    box-shadow: 0 0 80px 0 rgba(21,22,36,.2);
    border-radius: 8px;
    color: #002846;
    margin-bottom: 8rem;
    flex-basis: 100%;
}

/* Quote */
.quote { margin-bottom: 2rem; }
.quote__text {
  color: #FFFFFF;
  font-size: 2rem;
  font-style: italic;
  font-weight: 600;
  margin-bottom: 2rem; }

  @media (max-width: 60rem) { .quote__text { font-size: 1.25rem; } }

.quote__image {
  /* Because the overflow is hidden on one of the parent containers, we use transform to relocate the image, so that we can apply a visible drop shadow */
  transform: translate(1rem, 0rem);
  box-shadow: -1rem 1rem 0 #042827;
  display: flex;
  flex: 0 0 22.5rem;
  height: 22.5rem;
  margin-right:5rem;
  width: 22.5rem; }

  @media (max-width: 72.5rem) {
    .quote__image {
      height: 16.5rem;
      flex: 0 0 16.5rem;
      width: 16.5rem;
    }
  }

  @media (max-width: 60rem) {
    .quote__image {
      border-radius: 4rem;
      box-shadow: none;
      height: 4rem;
      flex: 0 0 4rem;
      margin-right: 2rem;
      width: 4rem;
    }
  }

.quote__cite {
  font-weight: 600;
  font-size:1.25rem;
  display: flex;
  flex-direction: column; }

  @media (max-width: 60rem) { .quote__cite { font-size: 0.75rem; } }

.quote__name { color: #ffffff;}
.quote__role { color: #64B794; }

/* Dots */
.slick-dots li button {
  box-shadow: none !important;
  border:0.125rem solid #fff !important; }

.slick-dots li.slick-active button { background-color: #fff  }

.slick-dots li button:before { display: none }

/* LOOKING FOR */
.fields {
  justify-content: space-around;
  display:  flex;
  flex-wrap: wrap ;}

.field {
  align-items: center;
  background-color: #fff;
  box-shadow: 0 1px 3px 1px #CCD4D4;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 0 0 17.5rem;
  height: 17.5rem;
  justify-content: center;
  margin-bottom: 4rem;
  padding: 1rem; }

.field__title {
  color: #FFAC35;
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  width: 100%; /* make sure that the text wraps in IE11 */}

.field__icon { margin-bottom: 2rem; }

/* CTA */
.section--cta .button { align-self: center; }

/* PROCESS */
.process {
  display: flex;
  flex-direction: column;
  margin-left: 5em;
}

  @media (max-width: 60rem) {
    .process {
      margin-left: unset;
    }
  }

.process__step {
  color: #fff;
  display: flex;}

.process__date {
  margin-top: 5px;
  flex: 0 0 16rem;
  font-size: 1.5rem;
  font-style: italic; }

  @media (max-width: 60rem) {
    .process__date {
      font-size: 0.875rem;
      flex: 0 0 6rem;
    }
  }

.process__gfx {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 0 4rem 0 2rem;
  flex: 0 0 1rem; }

  @media (max-width: 60rem) { .process__gfx { padding: 0 1rem ; } }

.process__dot {
  background-color: #002846;
  height: 1rem;
  width: 1rem;
  border-radius: 50%;
}

  @media (max-width: 60rem) {
    .process__dot {
      height: 0.625rem;
      width: 0.625rem; }
  }

.process__line {
  background-color: #fff;
  width: 0.125rem; }

.process__line--short { height: 1rem; }

  @media (max-width: 60rem) { .process__line--short { height: 0.375rem; } }

.process__line--long  { flex: 1 1 auto; /* Make sure the line takes up the entire available height */ }


.process__info { flex: 0 1 auto }

.move-up {
  margin-top: -1em;
}

.process__text {
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 4rem;}

.process__title {
  margin-bottom: 0.5em;
}

.process__info ul{
  margin-bottom: 4rem;
}

.process__info ul li{
  font-size: 1.2rem;
  list-style:square;
  margin-left: 1em;
  margin-bottom: 1em;
}

  @media (max-width: 60rem) { .process__text { font-size: .875rem; } }
  @media (max-width: 60rem) { .process__title { font-size: 1rem; } }

/* FAQ */
/* The FAQ item container */
.faq {
  margin: 0 -6em;
  display: flex;
}
@media (max-width: 1183px) {
  .faq {
    flex-wrap: wrap;
    margin: 0 auto;
  }
}

.faq__col {
  padding: 2rem 2rem 2rem 0;
  flex: 0 0 50%;
  max-width: 580px;
}

@media (max-width: 969px) {
  .faq__col {
    padding: 0;
    flex: 100%;
  }
}

.faq__item {
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-bottom: 2.5rem;
}

.faq__item:hover { text-decoration: none }

/* The question */
.faq__question {
  background-color: #FFFFFF;
  color: #4B5050;
  display: flex;
  font-size: 1.25rem;
  font-weight: 600;
  justify-content: space-between;
  padding: 2rem;
  transition: background-color 0.2s ease-in-out; }

.faq__question:hover { text-decoration: none; }

/* The answer */
.faq__answer {
  color: #4B5050;
  background-color: #fff;
  border-top: 1px solid rgba(111, 98, 89, 0.1);
  display: none;
  padding: 1rem 2rem; }

.faq__answer h3 {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.5rem; }

.faq__answer p {
  font-size: 1rem;
  margin-bottom: 0.5rem; }

.faq__answer ul { margin-bottom: .5rem; }

.faq__answer p:last-child,
.faq__answer ul:last-child { margin-bottom: 0 }
.faq__answer ul li { list-style: square; margin-left: 1em;}

/* The arrow */
.faq__arrow {
  align-items: center;
  display: flex;
  flex: 0 0 1.5rem;
  margin-left: 0.5rem; }

.faq__arrow img { height: .75rem; }

/* Open version of the question item */
.faq__item--open .faq__question {
  background-color: rgba(111, 98, 89, 0.05);
  color: #000; }

/* Turn the arrow upside-down when showing the question */
.faq__item--open .faq__arrow img { transform: rotate(180deg); }

/* Show the answer */
.faq__item--open .faq__answer { display: block; }


.faq__list li {
  margin-bottom: 0.5rem;
}

.wirecard-video {
  margin-top: 2em;
}

/*


OLD CUSTOM


*/



/* Change the direction of the grid */
.login--wrapper {
  background: center center / cover no-repeat #002846 url(/img/bg__login--hero.jpg) ; /* The background image */
  width: 100%;
  min-height: 80vh;
}

   @media (max-width: 60rem) { .login--wrapper { background-image: none; } }


/* Move the aside on top */
.login--wrapper--aside { display: none; }

/* Center the login forms and the content in the aside */
.login--wrapper--forms,
.custom-aside-container {
  flex: 0 1 auto;
  margin-top: 0;
  margin: 0 auto;
  max-width: 70rem;
  padding: 8rem 2rem 2rem; }

  @media (max-width: 60rem) {
    .login--wrapper--forms,
    .custom-aside-container {
      padding: 2rem 1rem;
      max-width: none;
    }
  }

.login--box--form {
  box-shadow: 1rem 1rem 1rem rgba(21,22,36,0.25);
  border-radius: .25rem;
  padding: 3rem 2rem 2rem;
  background-color: #fff; }

/* Decrease the size of the individual login forms */
.login--box--form,
.login-spec  {
  margin: 0 auto;
  max-width: 30rem }

  @media (max-width: 60rem) {
    .login--box--form {
      box-sizing: border-box;
      padding: 1rem;
      max-width: 100%;
      width: 100%;
    }
  }

@media (max-width: 60rem) { .login--spec { max-width: none; } }

.login--wrapper--footer { margin-top: 5rem; }


/* FOOTER */


/* Hide the call to action login and registration up text */
.signup--cta { display: none }

/* Make sure you can see the footer links */
.footer__content a       { color: rgba(255,255,255,0.5); }
.footer__content a:hover { color: rgba(255,255,255,1); }

/* CUSTOM FORMS & INPUTS */
.g-recaptcha { margin-bottom: 1rem; }



/* Put first and last name on top of each other */
.signup--input-fname { margin-right: 0;  }
.signup--input-fname,
.signup--input-lname,
.signup--input-email,
.signup--input-password { flex: 100%; }

/* Re-arrange the submit container */
.login--box--submit {
  align-items: flex-start;
  flex-direction: column; }

.login--box--submit--info { order: 2 }

/* Make the submit button span the full width*/
.login--box--submit .button {
  margin-bottom: 1rem;
  width: 100% }

/* Separate the info on troubles logging in a little for the other content */
.login__message--info {
  border-top: 1px solid #fff;
  margin-top: 1rem;
  padding-top: 1rem; }

/* Custom submit button */
.button {
  color: white;
    border-radius: 0.25rem;
    background-color: #2983FB;
    padding: 1rem 2rem;}

/* Make sure all buttons are using Open Sans */
button,
.button,
a.button {
  font-family: "Open Sans", sans-serif;
  font-weight: 600; }

.button:hover {
  color: #2983FB;
  background-color: white }




/* COOKIE */
.cookie {
  background-color: #fff;
  bottom: 1rem;
  box-shadow: 0 0 5rem rgba(21,22,36,0.24);
  box-sizing: border-box;
  flex-direction: column;
  left: 1rem;
  max-width: 25rem;
  padding: 2rem;
  position: fixed;
  z-index: 10;
}

@media (max-width: 60rem) { .cookie{ bottom: 0rem; padding: 1rem; left:0rem; } }

.cookie button { font-size: 0.875rem }

.nr-modal-content {
  padding: 2rem;
  text-align: left;
}