SW-7852 Added: Styling for the link in the footer

.footer-main {
	.unitize(24, 16, padding-top);
	background: #fff;

	.footer--column {
		.unitize-padding(0, 20, 0, 20, 16);
		border-top: 1px solid @borderColor;

		&.is--last {
			border-bottom: 1px solid @borderColor;
		}
	}

	.column--headline {
		.user-select(none);
		color: @primaryColor;

		&.is--active::after {
			content: '-';
		}

		&::after {
			.unitize-margin(-3.5, 0, 0, 0, 16);
			.unitize(24, 16);
			color: @primaryTextColor;
			content: '+';
			font-weight: bold;
			float: right;
		}
	}

	.column--content {
		display: none;

		&.is--active {
			display: block;
		}
	}

	.footer--bottom {
		.unitize(12, 16);
		.unitize-padding(0, 12, 0, 12, 12);
		text-align: center;
	}
	.footer--logo {
		color: #00b7e3;
		text-shadow: 1px 1px 1px @lightTextColor;
		.unitize(28, 12);
	}

	.navigation--list {
		.unitize-padding(0, 0, 16, 0, 16);
	}
	.navigation--entry {
		.unitize-padding(10, 0, 10, 0, 16);
	}
	.navigation--link {
		color: @darkTextColor
	}
}

.footer-main {
	.unitize(24, 16, padding-top);
	background: #fff;

	.footer--column {
		.unitize-padding(0, 20, 0, 20, 16);
		border-top: 1px solid @borderColor;

		&.is--last {
			border-bottom: 1px solid @borderColor;
		}
	}

	.column--headline {
		.user-select(none);
		color: @primaryColor;

		&.is--active::after {
			content: '-';
		}

		&::after {
			.unitize-margin(-3.5, 0, 0, 0, 16);
			.unitize(24, 16);
			color: @primaryTextColor;
			content: '+';
			font-weight: bold;
			float: right;
		}
	}

	.column--content {
		display: none;

		&.is--active {
			display: block;
		}
	}

	.footer--bottom {
		.unitize(12, 16);
		.unitize-padding(0, 12, 0, 12, 12);
		text-align: center;
	}
	.footer--logo {
		color: #00b7e3;
		text-shadow: 1px 1px 1px @lightTextColor;
		.unitize(28, 12);
	}
}


Fix spinner

Fix spinner

i {
  &.ico {
    .flexy(center, center);
    svg {
      width: @baseFontSize;
      height: @baseFontSize;
      // &.busy-light,
      &.spinner {
        .animation(clockwise 600ms infinite linear);
        .animation-bezier(0.42, 0, 0.58, 1);
        fill: @grayLighter;
      }
      fill: none;
    }
    .ico-logo {
      fill: @blueDark;
    }
    .ico-pass {
      fill: @green;
    }
    .ico-fail {
      fill: @redLight;
    }
    .ico-queued {
      fill: @grayLight;
    }
    .slim_circle {
      stroke-linecap: round;
      stroke-width: 20;
    }
  }
}

i {
  &.ico {
    .flexy(center, center);
    svg {
      width: @baseFontSize;
      height: @baseFontSize;
      // &.busy-light,
      &.spinner {
        .animation(clockwise 600ms infinite linear);
      }
      &.spinner {
        .animation-bezier(0.42, 0, 0.58, 1);
      }
      fill: none;
    }
    .ico-logo {
      fill: @blueDark;
    }
    .ico-pass {
      fill: @green;
    }
    .ico-fail {
      fill: @redLight;
    }
    .ico-queued {
      fill: @grayLight;
    }
    .slim_circle {
      stroke-linecap: round;
      stroke-width: 20;
    }
  }
}


MozillaFoundation/plan#246 make the animations EVEN BETTER.

@new-grey: #4F5F66;

#home-splash {
  color: @new-grey;
  font-size: 1.6rem;
  h2 {
    font-size: 4.4rem;
    font-weight: 500;
    letter-spacing: -0.04rem;
    @media screen and (min-width: @screen-md-min) {
      font-size: 5.2rem;
    }
  }
  h3 {
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
  }
  h4 {
    font-size: 2rem;
  }
  footer {
    text-align: center;
  }
  &.variant-2, &.variant-4 {
    .home-blue {
      @media @standard-def {
        background-image: url('/img/home/background-variant.jpg');
      }
      @media @retina {
        background-image: url('/img/home/background-variant@2x.jpg');
      }
    }
  }
}

.home-panel, .home-values, .home-jump-in, .home-footer {
  padding: 5rem 0;
  h2 {
    text-shadow: 0 0 0.1rem fade(@black, 50);
  }
  h4 {
    margin-bottom: 0.6rem;
  }
  .lead {
    text-align: center;
    font-size: 1.8rem;
    @media screen and (min-width: @screen-sm-min) {

      font-size: 2rem;
    }
  }
  .btn {
    width: 100%;
    position: relative;
    margin: 1.6rem 0 0 0;
    padding: 1.3rem 1.5rem 1.1rem 1.5rem;
    background: @yellow;
    color: #4B5B62;
    border: transparent;
    border-radius: 0.3rem;
    box-shadow: 0 0.4rem 0 #C4A74F, inset 0 0.1rem 0 rgba(255,255,255,0.5);
    text-transform: uppercase;
    vertical-align: baseline;
    font-weight: 600;
    letter-spacing: 0.1rem;
    line-height: 1.42857;
    @media screen and (min-width: @screen-xs-min) {
      width: auto;
      margin: 0 0 0 1rem;
    }
    &:hover {
      top: 0.2rem;
      box-shadow: 0 0.2rem 0 #C4A74F, inset 0 0.1rem 0 rgba(255,255,255,0.5);
    }

    &:active {
      top: 0.4rem;
      box-shadow: inset 0 0.1rem 0.1rem rgba(0,0,0,0.2);
    }
  }
}

.home-blue {
  background-color: #0086CC;
  @media @standard-def {
    background-image: url('/img/home/background.jpg');
  }
  @media @retina {
    background-image: url('/img/home/background@2x.jpg');
  }
}

.home-green {
  background-color: #58B093;
  @media @standard-def {
    background-image: url('/img/home/green-background.jpg');
  }
  @media @retina {
    background-image: url('/img/home/green-background@2x.jpg');
  }
}

.home-panel {
  padding: 6rem 0;
  @media screen and (min-width: @screen-md-min) {
    padding: 10rem 0;
  }
  @media screen and (min-width: @screen-lg-min) {
    padding: 12rem 0;
  }
  color: @white;
  background-size: cover;
  text-align: center;
  @media screen and (min-width: @screen-sm-min) {
    text-align: left;
  }
  .lead {
    max-width: 100%;
    @media screen and (min-width: @screen-sm-min) {
      text-align: left;
      max-width: 38rem;
    }
  }
  form {
    margin: 0 auto;
    @media screen and (min-width: @screen-sm-min) {
      margin: 0;
    }
  }
  input[type="email"] {
    width: 100%;
    border: transparent solid 0;
    border-radius: 0.3rem;
    color: @grey;
    padding: 1.1rem 1.5rem 1.3rem 1.5rem;
    @media screen and (min-width: @screen-xs-min) {
      width: auto;
    }
  }
  section {
    margin-top: 1rem;
    @media screen and (min-width: @screen-sm-min) {
      margin-top: 0;
      padding-left: 5rem;
    }
    @media screen and (min-width: @screen-md-min) {
      margin-left: 5rem;
      padding-left: 1.5rem;
    }
    @media screen and (min-width: @screen-lg-min) {
      margin-left: 2.5rem;
      padding-left: 1.5rem;
    }
  }
}

.devices {
  margin: 2rem auto 3rem;
  max-width: 40rem;
  position: relative;

  @media screen and (min-width: @screen-md-min) {
    margin-top: 0;
  }

  img {
    display: block;
    position: absolute;
  }

  .desktop {
    position: static;
    @media screen and (min-width: @screen-sm-min) {
      position: relative;
      top: 2.5rem;
    }
  }

  .tablet {
    bottom: -2rem;
    max-width: 56%;
    right: -0.2rem;
    @media screen and (min-width: @screen-sm-min) {
      bottom: -3.6rem;
      right: -1rem;
    }
    @media screen and (min-width: @screen-md-min) {
      bottom: -4rem;
      right: -3.3rem;
    }
  }

  .mobile {
    bottom: -0.6rem;
    left: 2.3rem;
    max-width: 19%;
    @media screen and (min-width: @screen-sm-min) {
      left: 1.4rem;
      bottom: -2.9rem;
    }
    @media screen and (min-width: @screen-md-min) {
      bottom: -2.8rem;
      left: 2.5rem;
    }
  }
}

.home-values {
  background: @white;
  .row {
    margin-top: 0rem;
    @media screen and (min-width: @screen-md-min) {
      margin-top: 6rem;
    }
  }
}

.values-list {
  list-style: none;
  padding-left: 5rem;
  li {
    margin-bottom: 2rem;
    position: relative;
    @media screen and (min-width: @screen-sm-min) {
      margin-bottom: 5rem;
    }
    &::before {
      left: -4.5rem;
      position: absolute;
      top: 0.4rem;
    }
  }
}

.value-free {
  &::before {
    content: url('/img/home/free-sm-icon.svg');
  }
}

.value-local {
  &::before {
    content: url('/img/home/local-sm-icon.svg');
  }
}

.value-more-than-code {
  &::before {
    content: url('/img/home/morethancode-sm-icon.svg');
  }
}

.home-globe {
  img {
    display: block;
    margin: 5rem auto;
    @media screen and (min-width: @screen-sm-min) {
      margin: 0 auto;
      transform: translateY(55%);
    }
    @media screen and (min-width: @screen-md-min) {
      // display: block;
      margin: 0 auto;
      transform: translateY(20%);
    }
  }
}

.home-jump-in {
  background: darken(@white, 6.25%);
  text-align: center;
  .row {
    margin-top: 5rem;
  }
  ul {
    list-style: none;
    padding-left: 0;
  }
  li {
    margin-bottom: 5rem;
    @media screen  and (min-width: @screen-sm-min) {
      margin-bottom: 0;
    }
  }
  figure {
    margin-bottom: 3rem;
    transition: all 0.18s ease-in;
    &:hover {
      transform: scale(1.1);
    }
  }
}

// A/B styles

#page-home {
  .variant-2 .home-panel {
    h2 {
      font-size: 6.2rem;
    }
  }
  .variant-4 .home-panel {
    h2 {
      font-size: 6.2rem;
      max-width: 100%;
      @media screen and (min-width: @screen-md-min) {
        max-width: 56rem;
      }
    }
    .lead {
      max-width: 100%;
      @media screen and (min-width: @screen-md-min) {
        max-width: 42rem;
      }
    }
  }
  .variant-6 .home-panel {
    padding: 0;
    .container {
      width: 100%;
      padding: 0;
    }
    text-align: center;
    .onboarding-section {
      padding: 0;
      margin: 0;
    }
    div {
      display: inline-block;
      width: 100%;
      @media screen and (min-width: @screen-sm-min) {
        width: auto;
      }
    }
    .onboarding-step-2 {
      padding: 0 2rem;
      margin-bottom: 2rem;
      @media screen and (min-width: @screen-xs-min) {
        padding: 0 5rem;
        width: 52.2rem;
      }
      @media screen and (min-width: @screen-md-min) {
        width: auto;
        padding: 5rem;
      }
      .onboarding-published-content {
        img {
          visibility: hidden;
        }
        font-size: 0.08rem;
        .onboarding-published-text {
          position: absolute;
          font-family: "Fira Sans";
          font-size: 6.4rem;
          font-weight: bold;
          line-height: 1;
          left: 22%;
          top: 43.5%;
          right: 10%;
          margin: 0;
          text-align: left;
          width: auto;
          bottom: 46%;
        }
        position: relative;
        background: url('/img/home/HeartPreview@2x.png');
        background-size: cover;
        width: 100%;
        @media screen and (min-width: @screen-md-min) {
          width: 32.2rem;
        }
      }
      a {
        color: white;
        text-decoration: underline;
      }
      .onboarding-checkbox-container {
        position: relative;
        text-align: left;

        @media screen and (min-width: @screen-xs-min) {
          display: block;
        }
        input {
          cursor: pointer;
        }
        div,
        label {
          position: absolute;
          width: auto;
          padding: 0 2.3rem 0 1rem;
          margin: 0;
          font-size: 1.3rem;
          @media screen and (min-width: @screen-xs-min) {
            font-size: 1.7rem;
          }
        }
      }
      form {
        margin-top: 3rem;
      }
      div {
        margin: 3rem 0;
        font-size: 1.7rem;
        &.onboarding-final-message {
          margin-top: 1rem;
          margin: 0;
        }
        &.onboarding-left-panel {
          margin: 0;
          @media screen and (min-width: @screen-xs-min) {
            text-align: left;
            width: 43.3rem;
          }
          @media screen and (min-width: @screen-md-min) {
            float: left;
            margin-right: 15rem;
          }
        }
      }
    }
    .onboarding-step-1 {
      padding-top: 7rem;
      padding-bottom: 7rem;
      @media screen and (min-width: @screen-xs-min) {
        padding-top: 13rem;
        padding-bottom: 3.6rem;
      }
      .onboarding-tooltip-container {
        opacity: 0;
        transition: opacity 1s ease 1s;
        &.fade-in {
          opacity: 1;
        }
      }
      .onboarding-tooltip {
        position: relative;
        font-size: 2.1rem;
        width: auto;
        margin-top: 3rem;
        color: #FFCD36;
        font-weight: bold;
        display: inline-block;
        max-width: 19rem;
        margin-left: 2.6rem;

        @media screen and (min-width: @screen-sm-min) {
          width: auto;
          margin-left: 3rem;
          max-width: none;
        }
      }
      .onboarding-arrow {
        position: absolute;
        top: -1.9rem;
        left: -3rem;
      }
      .onboarding-text-content {
        font-family: "Fira Sans";
        font-size: 6.4rem;
        min-height: 6.4rem;
        font-weight: bold;
        line-height: 1;
        display: block;
        div {
          @media screen and (min-width: @screen-sm-min) {
            float: left;
          }
        }
        .onboarding-input-container {
          position: relative;
          height: 6.1rem;
          max-width: 26.3rem;
          @media screen and (min-width: @screen-xs-min) {
            max-width: 30.3rem;
            margin-left: 1rem;
          }
          @media screen and (min-width: @screen-sm-min) {
            max-width: 57.3rem;
          }
          @media screen and (min-width: @screen-md-min) {
            max-width: 67.3rem;
          }
          @media screen and (min-width: @screen-lg-min) {
            max-width: 87.3rem;
          }
          .onboarding-input {
            border: none;
            background: transparent;
            width: 100%;
            text-align: center;
            height: 10.1rem;
            margin-top: -2.2rem;
            font-size: 3.4rem;

            &:focus {
              outline: 0;
            }
            @media screen and (min-width: @screen-sm-min) {
              text-align: left;
            }

            @media screen and (min-width: @screen-sm-min) {
              font-size: 6.4rem;
              margin-top: -9rem;
            }
          }
          .onboaring-input-underline {
            position: absolute;
            height: 1px;
            background: white;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0.7;
          }
        }
      }
      .onboarding-next-button {
        margin-top: 3.4rem;
        @media screen and (min-width: @screen-sm-min) {
          float: right;
          margin-top: 3.6rem;
        }
        width: 9rem;
      }
    }
  }
}

// Privacy day!

@privacyred: #dd4d58;
@privacygrey: #efefef;

.home-privacy-day {
  background-color: darken(@white, 6.25%);
  background-size: 30rem;
  @media @standard-def {
    background-image: url('/img/home/background-privacy.png');
  }
  @media @retina {
    background-image: url('/img/home/background-privacy@2x.png');
  }
  color: @privacyred;
  padding: 5rem 0 6rem;
  text-align: center;

  h2 {
    margin-bottom: 2rem;
  }

  h4 {
    color: @grey;
    font-weight: 200;
    margin-bottom: 2rem;
  }

  .btn {
    border: transparent;
    border-radius: 0.3rem;
    box-shadow: 0 0.4rem 0 @darkgreen, inset 0 0.1rem 0 rgba(255, 255, 255, 0.5);
    font-weight: 600;
    letter-spacing: 0.1rem;
    line-height: 1.42857;
    padding: 1.3rem 1.5rem 1.1rem 1.5rem;
    position: relative;
    text-transform: uppercase;

    &:hover, &:focus {
      box-shadow: 0 0.2rem 0 @darkgreen, inset 0 0.1rem 0 rgba(255, 255, 255, 0.5);
      background-color: @brand-primary;
      top: 0.2rem;
    }
    &:active {
      box-shadow: inset 0 0.1rem 0.1rem rgba(0, 0, 0, 0.2);
      top: 0.4rem;
    }
  }
}

.privacy-eye {
  height: 7.5rem;
  margin: 1.5rem auto;
  position: relative;
  z-index: 300;
  width: 7.5rem;

  h6, p {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  h6 {
    font-size: 0.9em;
    font-weight: 600;
    margin: 0;
    position: relative;
    top: -0.2rem;
  }

  p {
    font-size: 0.7em;
    font-weight: 400;
    position: relative;
    top: 0.1rem;
  }

  a {
    &:link, &:visited, &:hover, &:active, &:focus {
      color: @privacyred;
    }
  }

  svg {
    height: 7.5rem;
    position: relative;
    left: -0.1rem;
    top: -1.7rem;
    width: 8rem;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .front {
    background-color: @privacyred;
    float: none;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    width: inherit;
    -webkit-transform: rotateY(0deg) translateZ(0.1rem);
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg);

    &::before, &::after {
      z-index: -1;
    }

    &::before {
      border-bottom: 2.15rem solid @privacyred;
      top: -2rem;
    }

    &::after {
      border-top: 2.15rem solid @privacyred;
      bottom: -2rem;
      left: 0;
    }
  }
  .back {
    background-color: @privacygrey;
    float: none;
    left: 0;
    height: inherit;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: -1;
    -webkit-transform: rotateY(-180deg) translateZ(0.1rem);
    -moz-transform: rotateY(-180deg);
    transform: rotateY(-180deg);

    &::before, &::after {
      left: 0;
      z-index: -2;
    }

    &::before {
      border-bottom: 2.15rem solid @privacygrey;
      top: -2rem;
    }

    &::after {
      border-top: 2.15rem solid @privacygrey;
      bottom: -2rem;
    }
  }

  .front, .back {
    border-style: solid;
    border-width: 0;
    border-left-color: transparent;
    border-right-color: transparent;
    margin: 2.165rem 0;
    height: 5rem;
    width: 8rem;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;

    &::before {
      border-bottom-width: 2.4rem;
      top: -2.3rem;
    }
    &::after {
      border-top-width: 2.4rem;
      bottom: -2.3rem;
    }
    &::before, &::after {
      content: '';
      background-color: transparent;
      border-left: 4rem solid transparent;
      border-right: 4rem solid transparent;
      left: 0;
      height: 0;
      position: absolute;
      width: 0;
    }
  }
}

.privacy-svg {
  display: none;
  &.show {
    display: block;
  }
}
.privacy-gif {
  display: block;
  &.hide {
    display: none;
  }
}

@media screen and (min-width: @screen-md-min) {
  .home-privacy-day {
    padding: 4.5rem 0 5rem;

    h2 {
      margin: 0;
    }
    h4 {
      margin-top: 1.4rem;
      font-weight: 400;
    }
    .btn-primary {
      margin-top: 2rem;
    }
  }
  .privacy-eye {
    height: 8rem;
    float: left;
    position: absolute;
    top: 9rem;
    right: 1%;
    &:hover {
      .front {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        transform: rotateY(180deg);
      }
      .back {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
      }
    }
  }

  a {
    &:link, &:visited, &:hover, &:active, &:focus {
      .privacy-eye {
        color: @privacyred;
      }
    }
  }
}

@media screen and (min-width: @screen-lg-min) {
  .privacy-eye {
    right: 10%;
  }
}

@media screen and (min-width: 118.75em) {
  .privacy-eye {
    right: 20%;
  }
}

#iris-pupil {
  position: relative;
}

.eyelid {
  border-radius: 50%;
  height: 110%;
  margin: 0 auto;
  position: relative;
  width: 69%;
  overflow: hidden;
  -webkit-animation: blinking-eye 7s infinite;
  -o-animation: blinking-eye 7s infinite;
  -moz-animation: blinking-eye 7s infinite;
  animation: blinking-eye 7s infinite;
}

.sclera {
  background: @white;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: relative;
}

.iris {
  background: #443F27;
  border-radius: 50%;
  height: 65%;
  width: 65%;
  padding: 12%;
  position: relative;
  top: 17.5%;
  left: 17.5%;
  -webkit-animation: searching-eye 7s infinite;
  -o-animation: searching-eye 7s infinite;
  -moz-animation: searching-eye 7s infinite;
  animation: searching-eye 7s infinite;
}

.pupil {
  background: @black;
  border-radius: 50%;
  height: 100%;
  width: 100%;
  position: relative;
}

.pupil::after {
  display: block;
  content: '';
  background: @white;
  border-radius: 50%;
  height: 32%;
  width: 32%;
  position: absolute;
  top: 10%;
  right: 10%;
}

@-webkit-keyframes blinking-eye {
  0%, 90%, 100% {
    height: 110%;
    top: -4%;
  }
  95% {
    height: 2%;
    top: 44%;
  }
}

@-o-keyframes blinking-eye {
  0%, 90%, 100% {
    height: 110%;
    top: -4%;
  }
  95% {
    height: 2%;
    top: 44%;
  }
}

@-moz-keyframes blinking-eye {
  0%, 90%, 100% {
    height: 110%;
    top: -4%;
  }
  95% {
    height: 2%;
    top: 44%;
  }
}

@keyframes blinking-eye {
  0%, 90%, 100% {
    height: 110%;
    top: -4%;
  }
  95% {
    height: 2%;
    top: 44%;
  }
}

@-webkit-keyframes searching-eye {
  0%, 85.714285716%, 100% {
    top: 17.5%;
    left: 17.5%;
  }
  14.285714286% {
    top: 17.5%;
    left: 8%;
  }
  28.571428572% {
    top: 30%;
    left: 8%;
  }
  42.857142858% {
    top: 30%;
    left: 30%;
  }
  57.142857144% {
    top: 8%;
    left: 30%;
  }
  71.42857143% {
    top: 8%;
    left: 8%;
  }
  85.7142857% {
    top: 0;
    left: 17.5%;
  }
}

@-o-keyframes searching-eye {
  0%, 85.714285716%, 100% {
    top: 17.5%;
    left: 17.5%;
  }
  14.285714286% {
    top: 17.5%;
    left: 8%;
  }
  28.571428572% {
    top: 30%;
    left: 8%;
  }
  42.857142858% {
    top: 30%;
    left: 30%;
  }
  57.142857144% {
    top: 8%;
    left: 30%;
  }
  71.42857143% {
    top: 8%;
    left: 8%;
  }
  85.7142857% {
    top: 0;
    left: 17.5%;
  }
}

@-moz-keyframes searching-eye {
  0%, 85.714285716%, 100% {
    top: 17.5%;
    left: 17.5%;
  }
  14.285714286% {
    top: 17.5%;
    left: 8%;
  }
  28.571428572% {
    top: 30%;
    left: 8%;
  }
  42.857142858% {
    top: 30%;
    left: 30%;
  }
  57.142857144% {
    top: 8%;
    left: 30%;
  }
  71.42857143% {
    top: 8%;
    left: 8%;
  }
  85.7142857% {
    top: 0;
    left: 17.5%;
  }
}

@keyframes searching-eye {
  0%, 85.714285716%, 100% {
    top: 17.5%;
    left: 17.5%;
  }
  14.285714286% {
    top: 17.5%;
    left: 8%;
  }
  28.571428572% {
    top: 30%;
    left: 8%;
  }
  42.857142858% {
    top: 30%;
    left: 30%;
  }
  57.142857144% {
    top: 8%;
    left: 30%;
  }
  71.42857143% {
    top: 8%;
    left: 8%;
  }
  85.7142857% {
    top: 0;
    left: 17.5%;
  }
}

@new-grey: #4F5F66;

#home-splash {
  color: @new-grey;
  font-size: 1.6rem;
  h2 {
    font-size: 4.4rem;
    font-weight: 500;
    letter-spacing: -0.04rem;
    @media screen and (min-width: @screen-md-min) {
      font-size: 5.2rem;
    }
  }
  h3 {
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
  }
  h4 {
    font-size: 2rem;
  }
  footer {
    text-align: center;
  }
  &.variant-2, &.variant-4 {
    .home-blue {
      @media @standard-def {
        background-image: url('/img/home/background-variant.jpg');
      }
      @media @retina {
        background-image: url('/img/home/background-variant@2x.jpg');
      }
    }
  }
}

.home-panel, .home-values, .home-jump-in, .home-footer {
  padding: 5rem 0;
  h2 {
    text-shadow: 0 0 0.1rem fade(@black, 50);
  }
  h4 {
    margin-bottom: 0.6rem;
  }
  .lead {
    text-align: center;
    font-size: 1.8rem;
    @media screen and (min-width: @screen-sm-min) {

      font-size: 2rem;
    }
  }
  .btn {
    width: 100%;
    position: relative;
    margin: 1.6rem 0 0 0;
    padding: 1.3rem 1.5rem 1.1rem 1.5rem;
    background: @yellow;
    color: #4B5B62;
    border: transparent;
    border-radius: 0.3rem;
    box-shadow: 0 0.4rem 0 #C4A74F, inset 0 0.1rem 0 rgba(255,255,255,0.5);
    text-transform: uppercase;
    vertical-align: baseline;
    font-weight: 600;
    letter-spacing: 0.1rem;
    line-height: 1.42857;
    @media screen and (min-width: @screen-xs-min) {
      width: auto;
      margin: 0 0 0 1rem;
    }
    &:hover {
      top: 0.2rem;
      box-shadow: 0 0.2rem 0 #C4A74F, inset 0 0.1rem 0 rgba(255,255,255,0.5);
    }

    &:active {
      top: 0.4rem;
      box-shadow: inset 0 0.1rem 0.1rem rgba(0,0,0,0.2);
    }
  }
}

.home-blue {
  background-color: #0086CC;
  @media @standard-def {
    background-image: url('/img/home/background.jpg');
  }
  @media @retina {
    background-image: url('/img/home/background@2x.jpg');
  }
}

.home-green {
  background-color: #58B093;
  @media @standard-def {
    background-image: url('/img/home/green-background.jpg');
  }
  @media @retina {
    background-image: url('/img/home/green-background@2x.jpg');
  }
}

.home-panel {
  padding: 6rem 0;
  @media screen and (min-width: @screen-md-min) {
    padding: 10rem 0;
  }
  @media screen and (min-width: @screen-lg-min) {
    padding: 12rem 0;
  }
  color: @white;
  background-size: cover;
  text-align: center;
  @media screen and (min-width: @screen-sm-min) {
    text-align: left;
  }
  .lead {
    max-width: 100%;
    @media screen and (min-width: @screen-sm-min) {
      text-align: left;
      max-width: 38rem;
    }
  }
  form {
    margin: 0 auto;
    @media screen and (min-width: @screen-sm-min) {
      margin: 0;
    }
  }
  input[type="email"] {
    width: 100%;
    border: transparent solid 0;
    border-radius: 0.3rem;
    color: @grey;
    padding: 1.1rem 1.5rem 1.3rem 1.5rem;
    @media screen and (min-width: @screen-xs-min) {
      width: auto;
    }
  }
  section {
    margin-top: 1rem;
    @media screen and (min-width: @screen-sm-min) {
      margin-top: 0;
      padding-left: 5rem;
    }
    @media screen and (min-width: @screen-md-min) {
      margin-left: 5rem;
      padding-left: 1.5rem;
    }
    @media screen and (min-width: @screen-lg-min) {
      margin-left: 2.5rem;
      padding-left: 1.5rem;
    }
  }
}

.devices {
  margin: 2rem auto 3rem;
  max-width: 40rem;
  position: relative;

  @media screen and (min-width: @screen-md-min) {
    margin-top: 0;
  }

  img {
    display: block;
    position: absolute;
  }

  .desktop {
    position: static;
    @media screen and (min-width: @screen-sm-min) {
      position: relative;
      top: 2.5rem;
    }
  }

  .tablet {
    bottom: -2rem;
    max-width: 56%;
    right: -0.2rem;
    @media screen and (min-width: @screen-sm-min) {
      bottom: -3.6rem;
      right: -1rem;
    }
    @media screen and (min-width: @screen-md-min) {
      bottom: -4rem;
      right: -3.3rem;
    }
  }

  .mobile {
    bottom: -0.6rem;
    left: 2.3rem;
    max-width: 19%;
    @media screen and (min-width: @screen-sm-min) {
      left: 1.4rem;
      bottom: -2.9rem;
    }
    @media screen and (min-width: @screen-md-min) {
      bottom: -2.8rem;
      left: 2.5rem;
    }
  }
}

.home-values {
  background: @white;
  .row {
    margin-top: 0rem;
    @media screen and (min-width: @screen-md-min) {
      margin-top: 6rem;
    }
  }
}

.values-list {
  list-style: none;
  padding-left: 5rem;
  li {
    margin-bottom: 2rem;
    position: relative;
    @media screen and (min-width: @screen-sm-min) {
      margin-bottom: 5rem;
    }
    &::before {
      left: -4.5rem;
      position: absolute;
      top: 0.4rem;
    }
  }
}

.value-free {
  &::before {
    content: url('/img/home/free-sm-icon.svg');
  }
}

.value-local {
  &::before {
    content: url('/img/home/local-sm-icon.svg');
  }
}

.value-more-than-code {
  &::before {
    content: url('/img/home/morethancode-sm-icon.svg');
  }
}

.home-globe {
  img {
    display: block;
    margin: 5rem auto;
    @media screen and (min-width: @screen-sm-min) {
      margin: 0 auto;
      transform: translateY(55%);
    }
    @media screen and (min-width: @screen-md-min) {
      // display: block;
      margin: 0 auto;
      transform: translateY(20%);
    }
  }
}

.home-jump-in {
  background: darken(@white, 6.25%);
  text-align: center;
  .row {
    margin-top: 5rem;
  }
  ul {
    list-style: none;
    padding-left: 0;
  }
  li {
    margin-bottom: 5rem;
    @media screen  and (min-width: @screen-sm-min) {
      margin-bottom: 0;
    }
  }
  figure {
    margin-bottom: 3rem;
    transition: all 0.18s ease-in;
    &:hover {
      transform: scale(1.1);
    }
  }
}

// A/B styles

#page-home {
  .variant-2 .home-panel {
    h2 {
      font-size: 6.2rem;
    }
  }
  .variant-4 .home-panel {
    h2 {
      font-size: 6.2rem;
      max-width: 100%;
      @media screen and (min-width: @screen-md-min) {
        max-width: 56rem;
      }
    }
    .lead {
      max-width: 100%;
      @media screen and (min-width: @screen-md-min) {
        max-width: 42rem;
      }
    }
  }
  .variant-6 .home-panel {
    padding: 0;
    .container {
      width: 100%;
      padding: 0;
    }
    text-align: center;
    .onboarding-section {
      padding: 0;
      margin: 0;
    }
    div {
      display: inline-block;
      width: 100%;
      @media screen and (min-width: @screen-sm-min) {
        width: auto;
      }
    }
    .onboarding-step-2 {
      padding: 0 2rem;
      margin-bottom: 2rem;
      @media screen and (min-width: @screen-xs-min) {
        padding: 0 5rem;
        width: 52.2rem;
      }
      @media screen and (min-width: @screen-md-min) {
        width: auto;
        padding: 5rem;
      }
      .onboarding-published-content {
        img {
          visibility: hidden;
        }
        font-size: 0.08rem;
        .onboarding-published-text {
          position: absolute;
          font-family: "Fira Sans";
          font-size: 6.4rem;
          font-weight: bold;
          line-height: 1;
          left: 22%;
          top: 43.5%;
          right: 10%;
          margin: 0;
          text-align: left;
          width: auto;
          bottom: 46%;
        }
        position: relative;
        background: url('/img/home/HeartPreview@2x.png');
        background-size: cover;
        width: 100%;
        @media screen and (min-width: @screen-md-min) {
          width: 32.2rem;
        }
      }
      a {
        color: white;
        text-decoration: underline;
      }
      .onboarding-checkbox-container {
        position: relative;
        text-align: left;

        @media screen and (min-width: @screen-xs-min) {
          display: block;
        }
        input {
          cursor: pointer;
        }
        div,
        label {
          position: absolute;
          width: auto;
          padding: 0 2.3rem 0 1rem;
          margin: 0;
          font-size: 1.3rem;
          @media screen and (min-width: @screen-xs-min) {
            font-size: 1.7rem;
          }
        }
      }
      form {
        margin-top: 3rem;
      }
      div {
        margin: 3rem 0;
        font-size: 1.7rem;
        &.onboarding-final-message {
          margin-top: 1rem;
          margin: 0;
        }
        &.onboarding-left-panel {
          margin: 0;
          @media screen and (min-width: @screen-xs-min) {
            text-align: left;
            width: 43.3rem;
          }
          @media screen and (min-width: @screen-md-min) {
            float: left;
            margin-right: 15rem;
          }
        }
      }
    }
    .onboarding-step-1 {
      padding-top: 7rem;
      padding-bottom: 7rem;
      @media screen and (min-width: @screen-xs-min) {
        padding-top: 13rem;
        padding-bottom: 3.6rem;
      }
      .onboarding-tooltip-container {
        opacity: 0;
        transition: opacity 1s ease 1s;
        &.fade-in {
          opacity: 1;
        }
      }
      .onboarding-tooltip {
        position: relative;
        font-size: 2.1rem;
        width: auto;
        margin-top: 3rem;
        color: #FFCD36;
        font-weight: bold;
        display: inline-block;
        max-width: 19rem;
        margin-left: 2.6rem;

        @media screen and (min-width: @screen-sm-min) {
          width: auto;
          margin-left: 3rem;
          max-width: none;
        }
      }
      .onboarding-arrow {
        position: absolute;
        top: -1.9rem;
        left: -3rem;
      }
      .onboarding-text-content {
        font-family: "Fira Sans";
        font-size: 6.4rem;
        min-height: 6.4rem;
        font-weight: bold;
        line-height: 1;
        display: block;
        div {
          @media screen and (min-width: @screen-sm-min) {
            float: left;
          }
        }
        .onboarding-input-container {
          position: relative;
          height: 6.1rem;
          max-width: 26.3rem;
          @media screen and (min-width: @screen-xs-min) {
            max-width: 30.3rem;
            margin-left: 1rem;
          }
          @media screen and (min-width: @screen-sm-min) {
            max-width: 57.3rem;
          }
          @media screen and (min-width: @screen-md-min) {
            max-width: 67.3rem;
          }
          @media screen and (min-width: @screen-lg-min) {
            max-width: 87.3rem;
          }
          .onboarding-input {
            border: none;
            background: transparent;
            width: 100%;
            text-align: center;
            height: 10.1rem;
            margin-top: -2.2rem;
            font-size: 3.4rem;

            &:focus {
              outline: 0;
            }
            @media screen and (min-width: @screen-sm-min) {
              text-align: left;
            }

            @media screen and (min-width: @screen-sm-min) {
              font-size: 6.4rem;
              margin-top: -9rem;
            }
          }
          .onboaring-input-underline {
            position: absolute;
            height: 1px;
            background: white;
            bottom: 0;
            left: 0;
            right: 0;
            opacity: 0.7;
          }
        }
      }
      .onboarding-next-button {
        margin-top: 3.4rem;
        @media screen and (min-width: @screen-sm-min) {
          float: right;
          margin-top: 3.6rem;
        }
        width: 9rem;
      }
    }
  }
}

// Privacy day!

@privacyred: #dd4d58;
@privacygrey: #efefef;

.home-privacy-day {
  background-color: darken(@white, 6.25%);
  background-size: 30rem;
  @media @standard-def {
    background-image: url('/img/home/background-privacy.png');
  }
  @media @retina {
    background-image: url('/img/home/background-privacy@2x.png');
  }
  color: @privacyred;
  padding: 5rem 0 6rem;
  text-align: center;

  h2 {
    margin-bottom: 2rem;
  }

  h4 {
    color: @grey;
    font-weight: 200;
    margin-bottom: 2rem;
  }

  .btn {
    border: transparent;
    border-radius: 0.3rem;
    box-shadow: 0 0.4rem 0 @darkgreen, inset 0 0.1rem 0 rgba(255, 255, 255, 0.5);
    font-weight: 600;
    letter-spacing: 0.1rem;
    line-height: 1.42857;
    padding: 1.3rem 1.5rem 1.1rem 1.5rem;
    position: relative;
    text-transform: uppercase;

    &:hover, &:focus {
      box-shadow: 0 0.2rem 0 @darkgreen, inset 0 0.1rem 0 rgba(255, 255, 255, 0.5);
      background-color: @brand-primary;
      top: 0.2rem;
    }
    &:active {
      box-shadow: inset 0 0.1rem 0.1rem rgba(0, 0, 0, 0.2);
      top: 0.4rem;
    }
  }
}

.privacy-eye {
  height: 7.5rem;
  margin: 1.5rem auto;
  position: relative;
  z-index: 300;
  width: 7.5rem;

  h6, p {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  h6 {
    font-size: 0.9em;
    font-weight: 600;
    margin: 0;
    position: relative;
    top: -0.2rem;
  }

  p {
    font-size: 0.7em;
    font-weight: 400;
    position: relative;
    top: 0.1rem;
  }

  a {
    &:link, &:visited, &:hover, &:active, &:focus {
      color: @privacyred;
    }
  }

  svg {
    height: 7.5rem;
    position: relative;
    left: -0.1rem;
    top: -1.9rem;
    width: 8rem;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .front {
    background-color: @privacyred;
    float: none;
    height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    width: inherit;
    -webkit-transform: rotateY(0deg) translateZ(0.1rem);
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg);

    &::before, &::after {
      z-index: -1;
    }

    &::before {
      border-bottom: 2.15rem solid @privacyred;
      top: -2rem;
    }

    &::after {
      border-top: 2.15rem solid @privacyred;
      bottom: -2rem;
      left: 0;
    }
  }
  .back {
    background-color: @privacygrey;
    float: none;
    left: 0;
    height: inherit;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: -1;
    -webkit-transform: rotateY(-180deg) translateZ(0.1rem);
    -moz-transform: rotateY(-180deg);
    transform: rotateY(-180deg);

    &::before, &::after {
      left: 0;
      z-index: -2;
    }

    &::before {
      border-bottom: 2.15rem solid @privacygrey;
      top: -2rem;
    }

    &::after {
      border-top: 2.15rem solid @privacygrey;
      bottom: -2rem;
    }
  }

  .front, .back {
    border-style: solid;
    border-width: 0;
    border-left-color: transparent;
    border-right-color: transparent;
    border-radius: 0.4rem;
    margin: 2.165rem 0;
    height: 5rem;
    width: 8rem;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;

    &::before {
      border-bottom-width: 2.4rem;
      top: -2.3rem;
    }
    &::after {
      border-top-width: 2.4rem;
      bottom: -2.3rem;
    }
    &::before, &::after {
      content: '';
      background-color: transparent;
      border-left: 4rem solid transparent;
      border-right: 4rem solid transparent;
      left: 0;
      height: 0;
      position: absolute;
      width: 0;
    }
  }
}

.privacy-svg {
  display: none;
  &.show {
    display: block;
  }
}
.privacy-gif {
  display: block;
  &.hide {
    display: none;
  }
}

@media screen and (min-width: @screen-md-min) {
  .home-privacy-day {
    padding: 4.5rem 0 5rem;

    h2 {
      margin: 0;
    }
    h4 {
      margin-top: 1.4rem;
      font-weight: 400;
    }
    .btn-primary {
      margin-top: 2rem;
    }
  }
  .privacy-eye {
    height: 8rem;
    float: left;
    position: absolute;
    top: 9rem;
    right: 1%;
    &:hover {
      .front {
        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        transform: rotateY(180deg);
      }
      .back {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
      }
    }
  }

  a {
    &:link, &:visited, &:hover, &:active, &:focus {
      .privacy-eye {
        color: @privacyred;
      }
    }
  }
}

@media screen and (min-width: @screen-lg-min) {
  .privacy-eye {
    right: 10%;
  }
}

@media screen and (min-width: 118.75em) {
  .privacy-eye {
    right: 20%;
  }
}

#iris-pupil {
  position: relative;
}

.eyelid {
  border-radius: 50%;
  height: 5.3rem;
  margin: 0 auto;
  position: relative;
  top: -0.5rem;
  width: 5.3rem;
  overflow: hidden;
  -webkit-animation: blinking-eye 7s infinite;
  -o-animation: blinking-eye 7s infinite;
  -moz-animation: blinking-eye 7s infinite;
  animation: blinking-eye 7s infinite;
}

.sclera {
  background: @white;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: relative;
}

.iris {
  background: #443F27;
  border-radius: 50%;
  height: 65%;
  width: 65%;
  padding: 12%;
  position: relative;
  top: 17.5%;
  left: 17.5%;
  -webkit-animation: searching-eye 7s infinite;
  -o-animation: searching-eye 7s infinite;
  -moz-animation: searching-eye 7s infinite;
  animation: searching-eye 7s infinite;
}

.pupil {
  background: @black;
  border-radius: 50%;
  height: 100%;
  width: 100%;
  position: relative;
}

.pupil::after {
  display: block;
  content: '';
  background: @white;
  border-radius: 50%;
  height: 32%;
  width: 32%;
  position: absolute;
  top: 10%;
  right: 10%;
}

@-webkit-keyframes blinking-eye {
  0%, 90%, 100% {
    height: 5.3rem;
    top: -0.5rem;
  }
  95% {
    height: 0.2rem;
    top: 2.05rem;
  }
}

@-o-keyframes blinking-eye {
  0%, 90%, 100% {
    height: 5.3rem;
    top: -0.5rem;
  }
  95% {
    height: 0.2rem;
    top: 2.05rem;
  }
}

@-moz-keyframes blinking-eye {
  0%, 90%, 100% {
    height: 5.3rem;
    top: -0.5rem;
  }
  95% {
    height: 0.2rem;
    top: 2.05rem;
  }
}

@keyframes blinking-eye {
  0%, 90%, 100% {
    height: 5.3rem;
    top: -0.5rem;
  }
  95% {
    height: 0.2rem;
    top: 2.05rem;
  }
}

@-webkit-keyframes searching-eye {
  0%, 85.714285716%, 100% {
    top: 17.5%;
    left: 17.5%;
  }
  14.285714286% {
    top: 17.5%;
    left: 8%;
  }
  28.571428572% {
    top: 30%;
    left: 8%;
  }
  42.857142858% {
    top: 30%;
    left: 30%;
  }
  57.142857144% {
    top: 8%;
    left: 30%;
  }
  71.42857143% {
    top: 8%;
    left: 8%;
  }
  85.7142857% {
    top: 0%;
    left: 17.5%;
  }
}

@-o-keyframes searching-eye {
  0%, 85.714285716%, 100% {
    top: 17.5%;
    left: 17.5%;
  }
  14.285714286% {
    top: 17.5%;
    left: 8%;
  }
  28.571428572% {
    top: 30%;
    left: 8%;
  }
  42.857142858% {
    top: 30%;
    left: 30%;
  }
  57.142857144% {
    top: 8%;
    left: 30%;
  }
  71.42857143% {
    top: 8%;
    left: 8%;
  }
  85.7142857% {
    top: 0%;
    left: 17.5%;
  }
}

@-moz-keyframes searching-eye {
  0%, 85.714285716%, 100% {
    top: 17.5%;
    left: 17.5%;
  }
  14.285714286% {
    top: 17.5%;
    left: 8%;
  }
  28.571428572% {
    top: 30%;
    left: 8%;
  }
  42.857142858% {
    top: 30%;
    left: 30%;
  }
  57.142857144% {
    top: 8%;
    left: 30%;
  }
  71.42857143% {
    top: 8%;
    left: 8%;
  }
  85.7142857% {
    top: 0%;
    left: 17.5%;
  }
}

@keyframes searching-eye {
  0%, 85.714285716%, 100% {
    top: 17.5%;
    left: 17.5%;
  }
  14.285714286% {
    top: 17.5%;
    left: 8%;
  }
  28.571428572% {
    top: 30%;
    left: 8%;
  }
  42.857142858% {
    top: 30%;
    left: 30%;
  }
  57.142857144% {
    top: 8%;
    left: 30%;
  }
  71.42857143% {
    top: 8%;
    left: 8%;
  }
  85.7142857% {
    top: 0%;
    left: 17.5%;
  }
}


updated app bar to account for new typography

.app-bar {
	width: 100%;
	background-color: @app-bar-color;

	.paper-container {
		padding-left: @desktop-gutter;
		padding-right: @desktop-gutter;
	}

	.app-bar-title {
		margin: 0;
		.font-style-headline;
		padding-top: 0;
		color: @app-bar-text-color;
		line-height: @desktop-keyline-increment;
	}
}

.app-bar {
	width: 100%;
	background-color: @app-bar-color;

	.paper-container {
		padding-left: @desktop-gutter;
		padding-right: @desktop-gutter;
	}

	.app-bar-title {
		margin: 0;
		.font-style-headline;
		color: @app-bar-text-color;
		line-height: @desktop-keyline-increment;
	}
}


updated syle.less yet again

updated syle.less yet again

// get the page ready
@import (less) '~bootstrap/dist/css/bootstrap.css';

@font-face {
    font-family: 'ApercuPro';
    src: url('../../media/apercu_regular_pro.otf');
}

@font-face {
    font-family: 'ApercuPro-Bold';
    src: url('../../media/apercu-bold-pro.otf');
    // src: url('../../media/apercu-light-pro.otf');
    // src: url('../../media/apercu-medium-pro.otf');
    // src: url('../../media/apercu-mono-bold-pro.otf');
    // src: url('../../media/apercu-mono-pro.otf');
}

@font-face {
    font-family: 'font-awesome';
    src: url('../../media/fontawesome-webfont.ttf');
}

* { outline: none; box-sizing: border-box; padding-left: 0; padding-right: 0; }
body { padding: 0; margin: 0; }
html, body {
  font-family: "ApercuPro";
  // height: 100%;
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  color: white;
  background-color: black;
  // overflow: hidden;
  // padding-top: 50px;
  margin: 0 0 27px; /* bottom = footer height */
}

.root-class-style {
  justify-content: center;
  display: flex;
  text-align: center;
  vertical-align: middle;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  width: 100vw;
  height: calc(100% - 60px);
}

.navBar {
  min-height: 60px;
  background-color: #F44336;
  margin-bottom: 15px;
  // width: inherit;
}

.introContainer {
  width: inherit;
  text-align: center;
  vertical-align: middle;
  padding: 0px;
  height: 100%;
  width: 90%;
  min-width: 400px;
  max-width: 600px;
  margin: auto auto;
}

.zipCodeEntry {
  height: 50%;
  display: flex;
  align-items: center;
  vertical-align: middle;
  justify-content: center;
  text-align: center;
  padding: 0px;
  color: black;
}

.congress-person-table {
  height: 100%;
//  margin: 50px auto;
  display: flex;
  width: 90%;
  min-width: 400px;
  max-width: 600px;
  margin: auto auto;
}

.congress-person-row {
  border-bottom: 1px solid #FAFAFA;
  min-width: 400px;
  width: 100%;
  // height: 130px;
}

.congress-person-row-red {
  .congress-person-row;
  background-color: #F44336;
}

.congress-person-row-blue {
  .congress-person-row;
  background-color: #2196F3;
}

.congress-person-row-green {
  .congress-person-row;
  background-color: green;
}

.congress-person-row-pic-container {
  padding: 0px;
  min-height: 85px;
  width: auto;
  height: auto;
  margin: auto;
}

.congress-person-row-pic-image {
  padding: 5px;
  display: block;
  max-width: 60px;
  max-height: 85px;
  border-radius: 20%;
  width: auto;
  height: auto;
  margin: auto;
}

.congress-person-row-name {
  text-align: left;
  font-size: 20px;
  font-family: "ApercuPro-Bold";
}

.congress-person-row-party {
  text-align: left;
  font-size: 18px;
}

.congress-person-row-icons {
  font-size: 36px;
  font-family: FontAwesome;
  text-align: justify;
	text-align-last: justify;
  padding-left: 20px;
  padding-right: 20px;
}

.congress-person-row-disclosure {
  font-size: 36px;
  // margin-top: 50%;
  // height: 50%;
  // display: block;
  vertical-align: middle;
  align-items: center;
  // float: none;
  width: auto;
  height: auto;
  margin: auto;
  border-left: 1px solid #FAFAFA;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

footer {
    background-color: #2196F3;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 27px;
    width: 100%;
    overflow:hidden;
}

// get the page ready
@import (less) '~bootstrap/dist/css/bootstrap.css';

@font-face {
    font-family: 'ApercuPro';
    src: url('../../media/apercu_regular_pro.otf');
}

@font-face {
    font-family: 'ApercuPro-Bold';
    src: url('../../media/apercu-bold-pro.otf');
    // src: url('../../media/apercu-light-pro.otf');
    // src: url('../../media/apercu-medium-pro.otf');
    // src: url('../../media/apercu-mono-bold-pro.otf');
    // src: url('../../media/apercu-mono-pro.otf');
}

@font-face {
    font-family: 'font-awesome';
    src: url('../../media/fontawesome-webfont.ttf');
}

* { outline: none; box-sizing: border-box; padding-left: 0; padding-right: 0; }
body { padding: 0; margin: 0; }
html, body {
  font-family: "ApercuPro";
  // height: 100%;
  width: 100%;
  min-height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  color: white;
  background-color: black;
  // overflow: hidden;
  // padding-top: 50px;
  margin: 0 0 27px; /* bottom = footer height */
}

.root-class-style {
  justify-content: center;
  display: flex;
  text-align: center;
  vertical-align: middle;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  width: 100vw;
  height: calc(100% - 60px);
}

.navBar {
  min-height: 60px;
  background-color: #F44336;
  margin-bottom: 15px;
  // width: inherit;
}

.introContainer {
  width: inherit;
  text-align: center;
  vertical-align: middle;
  padding: 0px;
  height: 100%;
}

.zipCodeEntry {
  height: 50%;
  display: flex;
  align-items: center;
  vertical-align: middle;
  justify-content: center;
  text-align: center;
  padding: 0px;
  color: black;
}

.congress-person-table {
  height: 100%;
//  margin: 50px auto;
  display: flex;
  width: 90%;
  min-width: 400px;
  max-width: 600px;
  margin: auto auto;
}

.congress-person-row {
  border-bottom: 1px solid #FAFAFA;
  min-width: 400px;
  width: 100%;
  // height: 130px;
}

.congress-person-row-red {
  .congress-person-row;
  background-color: #F44336;
}

.congress-person-row-blue {
  .congress-person-row;
  background-color: #2196F3;
}

.congress-person-row-green {
  .congress-person-row;
  background-color: green;
}

.congress-person-row-pic-container {
  padding: 0px;
  min-height: 85px;
  width: auto;
  height: auto;
  margin: auto;
}

.congress-person-row-pic-image {
  padding: 5px;
  display: block;
  max-width: 60px;
  max-height: 85px;
  border-radius: 20%;
  width: auto;
  height: auto;
  margin: auto;
}

.congress-person-row-name {
  text-align: left;
  font-size: 20px;
  font-family: "ApercuPro-Bold";
}

.congress-person-row-party {
  text-align: left;
  font-size: 18px;
}

.congress-person-row-icons {
  font-size: 36px;
  font-family: FontAwesome;
  text-align: justify;
	text-align-last: justify;
  padding-left: 20px;
  padding-right: 20px;
}

.congress-person-row-disclosure {
  font-size: 36px;
  // margin-top: 50%;
  // height: 50%;
  // display: block;
  vertical-align: middle;
  align-items: center;
  // float: none;
  width: auto;
  height: auto;
  margin: auto;
  border-left: 1px solid #FAFAFA;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

footer {
    background-color: #2196F3;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 27px;
    width: 100%;
    overflow:hidden;
}


top-right menu color change

top-right menu color change

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot');
	src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon.woff') format('woff'),
		url('../fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-size: @icon-size;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;

	// Better Font Rendering
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:active {
	color: @pressed-button;
}

.icon-menu:before {
	content: "\e600";
	color: @inactive-button;
}
.icon-selection-empty {
	content: "\e601";
	color: @inactive-button;
}
.icon-selection-checked {
	content: "\e602";
	color: @inactive-button;
}
.icon-plus:before {
	content: "\e603";
	color: @inactive-button;
}
.icon-i:before {
	content: "\e604";
}
.icon-home:before {
	content: "\e605";
}
.icon-arrow-left:before {
	content: "\e60c";
}
.icon-arrow-right:before {
	content: "\e606";
	font-size: @slide-indicator-width;
}
.icon-tasks:before {
	content: "\e607";
}
.icon-notes:before {
	content: "\e608";
}
.icon-inbox:before {
	content: "\e609";
}
.icon-logo_only:before {
	content: "\e60a";
}
.icon-logo_with_text:before {
	content: "\e60b";
	font-size: @banner-logo-size;
}

@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon.eot');
	src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon.woff') format('woff'),
		url('../fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-size: @icon-size;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;

	// Better Font Rendering
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

[class^="icon-"]:active {
	color: @pressed-button;
}

.icon-menu:before {
	content: "\e600";
}
.icon-selection-empty {
	content: "\e601";
	color: @inactive-button;
}
.icon-selection-checked {
	content: "\e602";
	color: @inactive-button;
}
.icon-plus:before {
	content: "\e603";
	color: @inactive-button;
}
.icon-i:before {
	content: "\e604";
}
.icon-home:before {
	content: "\e605";
}
.icon-arrow-left:before {
	content: "\e60c";
}
.icon-arrow-right:before {
	content: "\e606";
	font-size: @slide-indicator-width;
}
.icon-tasks:before {
	content: "\e607";
}
.icon-notes:before {
	content: "\e608";
}
.icon-inbox:before {
	content: "\e609";
}
.icon-logo_only:before {
	content: "\e60a";
}
.icon-logo_with_text:before {
	content: "\e60b";
	font-size: @banner-logo-size;
}


feat(curtana): link style button

feat(curtana): link style button

//
// Reset
// --------------------------------------------------

*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
  text-size-adjust: none;
  text-rendering: optimizelegibility;
  image-rendering: optimizequality;
  // TODO: You have to speicify background color for `html` in order to
  //       make `-webkit-filter` work
  // Link: https://bugs.chromium.org/p/chromium/issues/detail?id=591015
  // Date: Mar 1, 2016, 5:41 PM
  background: @background-color;
}

body {
  padding: 0 @space-lg;
  margin: 0 auto 0;
  font-family: @fontstack-default;
  font-size: @font-size;
  line-height: @line-height;
  color: @text-color;
  background: @background-color;
  transition: all .2s ease;
  font-feature-settings: @font-features;

  @media (max-width: @breakpoint-md) {
    .padding-offset(@space-md, @space-md);
    font-size: (@font-size * 1.4);
  }

  @media (max-width: @breakpoint-sm) {
    .padding-offset(@space-sm, @space-sm);
    font-size: (@font-size * 2.4);
  }

  @media (max-width: @breakpoint-xs) {
    font-size: (@font-size * 3.2);
  }
}

// Reset fonts for relevant elements
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

// Reset unusual Firefox-on-Android default style.
// See https://github.com/necolas/normalize.css/issues/214
button,
input,
select[multiple],
textarea {
  background-image: none;
}

// Reset common elements
a, button {
  color: @text-color;
  text-decoration: none;
  transition: color .5s ease, border-color .5s ease, background .5s ease, opacity 1.5s ease;

  &:hover,
  &:focus {
    transition: color .1s ease, border-color .1s ease, background .1s ease, opacity .1s ease;
    text-decoration: underline;
    text-decoration-skip: ink;
  }

  &[disabled] {
    opacity: .4;
    cursor: not-allowed;
  }
}

button {
  appearance: none;
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
}

img, hr {
  border: 0;
}

del {
  text-decoration: line-through;
}

::selection {
  background: fade(@link-color, 10%);
}

::placeholder {
  color: @text-color;
  opacity: .2;

  :focus& {
    color: @link-color;
  }
}

//
// Reset
// --------------------------------------------------

*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
  text-size-adjust: none;
  text-rendering: optimizelegibility;
  image-rendering: optimizequality;
  // TODO: You have to speicify background color for `html` in order to
  //       make `-webkit-filter` work
  // Link: https://bugs.chromium.org/p/chromium/issues/detail?id=591015
  // Date: Mar 1, 2016, 5:41 PM
  background: @background-color;
}

body {
  padding: 0 @space-lg;
  margin: 0 auto 0;
  font-family: @fontstack-default;
  font-size: @font-size;
  line-height: @line-height;
  color: @text-color;
  background: @background-color;
  transition: all .2s ease;
  font-feature-settings: @font-features;

  @media (max-width: @breakpoint-md) {
    .padding-offset(@space-md, @space-md);
    font-size: (@font-size * 1.4);
  }

  @media (max-width: @breakpoint-sm) {
    .padding-offset(@space-sm, @space-sm);
    font-size: (@font-size * 2.4);
  }

  @media (max-width: @breakpoint-xs) {
    font-size: (@font-size * 3.2);
  }
}

// Reset fonts for relevant elements
input,
button,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

// Reset unusual Firefox-on-Android default style.
// See https://github.com/necolas/normalize.css/issues/214
button,
input,
select[multiple],
textarea {
  background-image: none;
}

// Reset common elements
a, button {
  color: @text-color;
  text-decoration: none;
  transition: color .5s ease, border-color .5s ease, background .5s ease, opacity 1.5s ease;

  &:hover,
  &:focus {
    transition: color .1s ease, border-color .1s ease, background .1s ease, opacity .1s ease;
    text-decoration: underline;
    text-decoration-skip: ink;
  }

  &[disabled] {
    opacity: .4;
    cursor: not-allowed;
  }
}

img, hr {
  border: 0;
}

del {
  text-decoration: line-through;
}

::selection {
  background: fade(@link-color, 10%);
}

::placeholder {
  color: @text-color;
  opacity: .2;

  :focus& {
    color: @link-color;
  }
}


Fixed behaviour of sign in modal in client

@import "bootstrap/mixins";

/* SITE SPECIFIC STYLES */
.factlink-site .new-session {
  border: 1px solid @baseBorderColor;
  border-radius: 5px;
  padding: 20px;
  background: white;
  margin: 0 auto 150px;
  float: none;
  width: 700px;

  > img { display: none; }

  .with-credentials {
    .form-box {
      width: 270px;

      input[type=text], input[type=password] {
        width: 100%; /* translates to 270px width (padding) */
      }
    }
  }

  .with-social {
    a {
      margin-left: 60px;
    }
  }
}
/* / SITE SPECIFIC STYLES */

/* CLIENT SPECIFIC STYLES */
.client .new-session {
  .with-credentials {
    .form-box {
      width: 230px;

      input[type=text], input[type=password] {
        width: 100%;
      }
    }
  }

  .with-social {
    a {
      margin-left: 35px;
    }
  }
}
/* / CLIENT SPECIFIC STYLES */

.new-session {
  .white-block-with-shadow();
  visibility: visible;
  width: @factNewAndSignInWidth;
  margin: 20px auto;
  padding: 15px;
  cursor: auto;

  > h1 {
    font-size: @heading1FontSize;
    margin-bottom: 0;
  }

  > form > a {
    font-weight: bold;
  }

  .with-credentials {
    float: left;
    width: 50%;
    padding-right: 15px;
    margin-bottom: 25px;
    .box-sizing(border-box);

    .form-box {
      input[type=checkbox] {
        margin: -3px 7px 0 0;
      }

      label {
        display: inline-block;
        color: #555;
        margin: 8px 0 0 0;
      }
    }
  }

  .with-social {
    float: left;
    width: 50%;
    padding-left: 15px;
    .box-sizing(border-box);

    a {
      .box-sizing(border-box);
      margin-bottom: 9px;

      > i {
        background: image-url('base/sign_in_bar/social.png') no-repeat;
        display: inline-block;
        width: 17px;
        height: 17px;
        line-height: 17px;
        vertical-align: text-top;
        margin: 1px 5px 0 0;
      }

      &.twitter > i {
        background-position: 0 0;
      }

      &.facebook > i {
        background-position: -17px 0;
      }
    }
  }

  .separator {
    width: 0;
    height: 120px;
    border-right: 1px solid @baseBorderColor;
    position: absolute;
    left: 50%;
    margin-left: -1px;

    > span {
      padding: 7px 0 9px;
      position: absolute;
      top: 50%;
      margin: -16px 0 0 -7px;
      background: white;
      z-index: 100;
      font-size: @heading1FontSize;
      color: #555;
    }
  }
}

@import "bootstrap/mixins";

/* SITE SPECIFIC STYLES */
.factlink-site .new-session {
  border: 1px solid @baseBorderColor;
  border-radius: 5px;
  padding: 20px;
  background: white;
  margin: 0 auto 150px;
  float: none;
  width: 700px;

  > img { display: none; }

  .with-credentials {
    .form-box {
      width: 270px;

      input[type=text], input[type=password] {
        width: 100%; /* translates to 270px width (padding) */
      }
    }
  }

  .with-social {
    a {
      margin-left: 60px;
    }
  }
}
/* / SITE SPECIFIC STYLES */

/* CLIENT SPECIFIC STYLES */
.client .new-session {
  .with-credentials {
    .form-box {
      width: 230px;

      input[type=text], input[type=password] {
        width: 100%;
      }
    }
  }

  .with-social {
    a {
      margin-left: 35px;
    }
  }
}
/* / CLIENT SPECIFIC STYLES */

.new-session {
  .white-block-with-shadow();
  visibility: visible;
  width: @factNewAndSignInWidth;
  margin: 0 auto;
  padding: 15px;

  > h1 {
    font-size: @heading1FontSize;
    margin-bottom: 0;
  }

  > form > a {
    font-weight: bold;
  }

  .with-credentials {
    float: left;
    width: 50%;
    padding-right: 15px;
    margin-bottom: 25px;
    .box-sizing(border-box);

    .form-box {
      input[type=checkbox] {
        margin: -3px 7px 0 0;
      }

      label {
        display: inline-block;
        color: #555;
        margin: 8px 0 0 0;
      }
    }
  }

  .with-social {
    float: left;
    width: 50%;
    padding-left: 15px;
    .box-sizing(border-box);

    a {
      .box-sizing(border-box);
      margin-bottom: 9px;

      > i {
        background: image-url('base/sign_in_bar/social.png') no-repeat;
        display: inline-block;
        width: 17px;
        height: 17px;
        line-height: 17px;
        vertical-align: text-top;
        margin: 1px 5px 0 0;
      }

      &.twitter > i {
        background-position: 0 0;
      }

      &.facebook > i {
        background-position: -17px 0;
      }
    }
  }

  .separator {
    width: 0;
    height: 120px;
    border-right: 1px solid @baseBorderColor;
    position: absolute;
    left: 50%;
    margin-left: -1px;

    > span {
      padding: 7px 0 9px;
      position: absolute;
      top: 50%;
      margin: -16px 0 0 -7px;
      background: white;
      z-index: 100;
      font-size: @heading1FontSize;
      color: #555;
    }
  }
}


fix css

fix css


white space pre

white space pre

.content {
 position: fixed;
 top: 0;
 left: 0;
 right: 300px;
 bottom: 0;

 table {
  width: 100%;
  table-layout: fixed;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;

  th {
   padding: 0;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: pre;
  }

  td {
   padding: 0;
   border-bottom: 1px solid #f5f5f5;
   font-family: monospace;
   line-height: 19px;
   height: 19px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
  }

  th.hgc {
   background: #ddd;
  }
  td.hgc {
   background: #ddd;
  }
  tr.hgr {
   background: #ddd;
  }
  td.hg {
   background: #999;
  }
 }

 .table-body-wrapper {
  overflow-y: auto;
 }
}

.sidebar {
 position: fixed;
 top: 0;
 right: 0px;
 bottom: 0;
 width: 300px;
 padding-left: 20px;
 box-sizing: border-box;
 border-left: 20px solid #eee;
 button {
  display: block;
  margin: 10px auto;
 }
}

.content {
 position: fixed;
 top: 0;
 left: 0;
 right: 300px;
 bottom: 0;

 table {
  width: 100%;
  table-layout: fixed;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;

  th {
   padding: 0;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
  }

  td {
   padding: 0;
   border-bottom: 1px solid #f5f5f5;
   font-family: monospace;
   line-height: 19px;
   height: 19px;
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
  }

  th.hgc {
   background: #ddd;
  }
  td.hgc {
   background: #ddd;
  }
  tr.hgr {
   background: #ddd;
  }
  td.hg {
   background: #999;
  }
 }

 .table-body-wrapper {
  overflow-y: auto;
 }
}

.sidebar {
 position: fixed;
 top: 0;
 right: 0px;
 bottom: 0;
 width: 300px;
 padding-left: 20px;
 box-sizing: border-box;
 border-left: 20px solid #eee;
 button {
  display: block;
  margin: 10px auto;
 }
}


Adapted old css to less syntax

Adapted old css to less syntax


auth prototype: add transition

auth prototype: add transition

@border-style: 1px solid #556980;

.handler.auth {
    opacity: 1;
    transition: opacity 1s ease-in;

    margin: auto;
    text-align: center;
    background: #fff;
    height: 25rem;
    border-radius: 5rem;

    button {
        background: #fff;
        width: 7rem;
    }

    div, button {
        margin: .5rem;
    }

    button, .input-wrapper, .input-wrapper input {
        border-radius: .5rem;
        height: 2rem;

        font-size: 1.25rem;
    }

    button, .input-wrapper input {
        border: @border-style;
    }

    a {
        margin: .5rem 0 0 0;
        color: #000;
        display: block;
    }
}

@border-style: 1px solid #556980;

.handler.auth {
    margin: auto;
    text-align: center;
    background: #fff;
    height: 25rem;
    border-radius: 5rem;

    button {
        background: #fff;
        width: 7rem;
    }

    div, button {
        margin: .5rem;
    }

    button, .input-wrapper, .input-wrapper input {
        border-radius: .5rem;
        height: 2rem;

        font-size: 1.25rem;
    }

    button, .input-wrapper input {
        border: @border-style;
    }

    a {
        margin: .5rem 0 0 0;
        color: #000;
        display: block;
    }
}


freature(animation): show that something happend on the page

.mod-navigation-container {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 3;
	width: 100%;
	margin: 0 auto;
}

.mod-navigation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 425px;
	height: @s2-headerHeight-s;
	padding: 0 12px;
	margin: 0 auto;
	background: @s2-darkblack;

	// some visualisation to show that something on the page happend
	&::after {
		content: '';
		height: 2px;
		width: 0;
		background-color: #fff;
		position: absolute;
		bottom: -2px;
		left: 0;

		animation: shake 2s linear 1s;
	}

	@media @s2-mq-window-tablet {
		max-width: @s2-MaxPageWidth;
		padding: 0 30px;
	}
	[data-navigation-state] {
		position: fixed;
		top: 0;
		left: 0;
		visibility: hidden;
		width: 0;
		height: 0;
		transform: translate(-100%, -100%);
	}
}

@keyframes shake {
	0% {
		width: 0;
	}

	50% {
		width: 100%;
		opacity: 1;
	}

	100% {
		width: 100%;
		opacity: 0;
	}
}

.logo,
.burger {
	display: flex;
	align-items: center;
	position: relative;
	z-index: 2;
	height: 40px;
	font-size: 0;
	fill: @s2-white;

	[data-theme="green"] & {
		fill: inherit;
	}
}

.logo {
	justify-content: start;
	margin-right: inherit;
}

.burger {
	width: 40px;
	margin-right: -10px;
	justify-content: center;
	cursor: pointer;
}

.layer-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 24px;
	height: 20px;
}

.layer {
	position: absolute;
	left: 0;
	right: 0;
	display: block;
	width: 100%;
	height: 3px;
	background: @s2-white;
	border-radius: 1px;
	transition: 150ms all;
	&:first-child {
		top: 0;
	}
	&:nth-child(2),
	&:nth-child(3) {
		top: 8.5px;
	}
	&:last-child {
		bottom: 0;
	}

	[data-theme="green"] & {
		background: @s2-black;
	}
}

.nav {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transform: translateY(-100%);
	background: transparent;
	transition: background-color 300ms 300ms ease-in-out,
		transform 1ms 600ms;
}

.mainnav {
	width: 100%;
	height: 100%;
	max-width: 425px;
	margin: 40px auto;
	padding: 40px 12px 80px;
	overflow: hidden;
	@media @s2-mq-window-tablet {
		max-width: @s2-MaxPageWidth;
		padding: 40px 30px 40px 30px;
	}
}

.mainnav-item {
	margin-left: auto;
	text-align: right;
	font-size: 42px;
	line-height: 52px;
	padding: 0 0 10px 0;
	color: @s2-white;

	& > a {
		font-weight: bold;
	}
	a {
		display: inline-block;
		transform: translate(30%, 20%);
		opacity: 0;
		transition: 200ms ease-in-out transform,
			150ms ease-in-out opacity;
	}
	a:hover {
		color: inherit;
	}
	&:first-child {
		a {
			transition-delay: 100ms;
		}
	}
	&:nth-child(2) {
		a {
			transition-delay: 150ms;
		}
	}
	&:nth-child(3) {
		a {
			transition-delay: 200ms;
		}
	}
	&:nth-child(4) {
		a {
			transition-delay: 250ms;
		}
	}
	@media @s2-mq-window-tablet {
		font-size: 50px;
	}
}

.aboutnav {
	color: @s2-white;
	padding: 20px 0;
}

.aboutnav-item {
	font-size: 28px;
	line-height: 42px;
	a {
		transform: translate(30%, 20%);
		opacity: 0;
		transition: 200ms ease-in-out transform,
			150ms ease-in-out opacity;
	}
	&:first-child {
		a {
			transition-delay: 85ms;
		}
	}
	&:nth-child(2) {
		a {
			transition-delay: 135ms;
		}
	}
	&:nth-child(3) {
		a {
			transition-delay: 185ms;
		}
	}
	&:nth-child(4) {
		a {
			transition-delay: 235ms;
		}
	}
}

[data-navigation-state]:checked {
	~ .burger {
		.layer {
			background: @s2-white;
		}
		.layer:first-child {
			transform: scaleX(0) translateY(8.5px);
		}
		.layer:last-child {
			transform: scaleX(0) translateY(-8.5px);
		}
		.layer:nth-child(2) {
			transform: rotate(-45deg);
		}
		.layer:nth-child(3) {
			transform: rotate(45deg);
		}
	}
	~ .nav {
		transform: none;
		transition: background-color 300ms ease-in-out;
		background-color: fadeout(#16181e, 10%);
		.mainnav {
			overflow: auto;
		}
		.mainnav-item {
			a {
				opacity: 1;
				transform: none;
			}
		}
	}
}

.mod-navigation-container {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 3;
	width: 100%;
	margin: 0 auto;
}

.mod-navigation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	max-width: 425px;
	height: @s2-headerHeight-s;
	padding: 0 12px;
	margin: 0 auto;
	background: @s2-darkblack;
	@media @s2-mq-window-tablet {
		max-width: @s2-MaxPageWidth;
		padding: 0 30px;
	}
	[data-navigation-state] {
		position: fixed;
		top: 0;
		left: 0;
		visibility: hidden;
		width: 0;
		height: 0;
		transform: translate(-100%, -100%);
	}
}

.logo,
.burger {
	display: flex;
	align-items: center;
	position: relative;
	z-index: 2;
	height: 40px;
	font-size: 0;
	fill: @s2-white;

	[data-theme="green"] & {
		fill: inherit;
	}
}

.logo {
	justify-content: start;
	margin-right: inherit;
}

.burger {
	width: 40px;
	margin-right: -10px;
	justify-content: center;
	cursor: pointer;
}

.layer-wrapper {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 24px;
	height: 20px;
}

.layer {
	position: absolute;
	left: 0;
	right: 0;
	display: block;
	width: 100%;
	height: 3px;
	background: @s2-white;
	border-radius: 1px;
	transition: 150ms all;
	&:first-child {
		top: 0;
	}
	&:nth-child(2),
	&:nth-child(3) {
		top: 8.5px;
	}
	&:last-child {
		bottom: 0;
	}

	[data-theme="green"] & {
		background: @s2-black;
	}
}

.nav {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transform: translateY(-100%);
	background: transparent;
	transition: background-color 300ms 300ms ease-in-out,
		transform 1ms 600ms;
}

.mainnav {
	width: 100%;
	height: 100%;
	max-width: 425px;
	margin: 40px auto;
	padding: 40px 12px 80px;
	overflow: hidden;
	@media @s2-mq-window-tablet {
		max-width: @s2-MaxPageWidth;
		padding: 40px 30px 40px 30px;
	}
}

.mainnav-item {
	margin-left: auto;
	text-align: right;
	font-size: 42px;
	line-height: 52px;
	padding: 0 0 10px 0;
	color: @s2-white;

	& > a {
		font-weight: bold;
	}
	a {
		display: inline-block;
		transform: translate(30%, 20%);
		opacity: 0;
		transition: 200ms ease-in-out transform,
			150ms ease-in-out opacity;
	}
	a:hover {
		color: inherit;
	}
	&:first-child {
		a {
			transition-delay: 100ms;
		}
	}
	&:nth-child(2) {
		a {
			transition-delay: 150ms;
		}
	}
	&:nth-child(3) {
		a {
			transition-delay: 200ms;
		}
	}
	&:nth-child(4) {
		a {
			transition-delay: 250ms;
		}
	}
	@media @s2-mq-window-tablet {
		font-size: 50px;
	}
}

.aboutnav {
	color: @s2-white;
	padding: 20px 0;
}

.aboutnav-item {
	font-size: 28px;
	line-height: 42px;
	a {
		transform: translate(30%, 20%);
		opacity: 0;
		transition: 200ms ease-in-out transform,
			150ms ease-in-out opacity;
	}
	&:first-child {
		a {
			transition-delay: 85ms;
		}
	}
	&:nth-child(2) {
		a {
			transition-delay: 135ms;
		}
	}
	&:nth-child(3) {
		a {
			transition-delay: 185ms;
		}
	}
	&:nth-child(4) {
		a {
			transition-delay: 235ms;
		}
	}
}

[data-navigation-state]:checked {
	~ .burger {
		.layer {
			background: @s2-white;
		}
		.layer:first-child {
			transform: scaleX(0) translateY(8.5px);
		}
		.layer:last-child {
			transform: scaleX(0) translateY(-8.5px);
		}
		.layer:nth-child(2) {
			transform: rotate(-45deg);
		}
		.layer:nth-child(3) {
			transform: rotate(45deg);
		}
	}
	~ .nav {
		transform: none;
		transition: background-color 300ms ease-in-out;
		background-color: fadeout(#16181e, 10%);
		.mainnav {
			overflow: auto;
		}
		.mainnav-item {
			a {
				opacity: 1;
				transform: none;
			}
		}
	}
}