<commit_before>//= require normalize-rails
//= require jquery.tipsy
//= require_self

@import "fonts";
@import "compass";
@import "html5boilerplate/base";
@import "zeroreset";
@import "colors";
@import "obshtestvo.bg/buttons";
@import "obshtestvo.bg/bits";
@import "list";
@import "html5boilerplate/almostmixins";
@import "mixins";

$navHeight: 3.75em;
$headinerCircleSize: 3em;

body {
  font-family: "obshtestvobg", "Myriad Pro", "Verdana", sans-serif;
  -webkit-font-smoothing: antialiased;
  color: $colorMainText;
  background: $colorContrastToMain;
}
strong {
  font-weight: bold;
}

%layout {
  max-width: 1000px;
  margin: 0 auto;
}

%layout-column {
  @include box-sizing(border-box);
  padding: 4%;
  padding-top: 3em;
}

%banner-link {
  @extend %standard-link;
  color: $colorHighlightLink;
  &:hover {
    color: lighten($colorHighlightLink, 25)
  }
  &:active {
    color: darken($colorHighlightLink, 5)
  }
}

%big-message {
  font-size: 2em;
  color: $colorMain;
  position: relative;
  margin-bottom: 0.8em;
  font-weight: normal;
}

%section-header {
  z-index: 2;
  h2 {
    position: relative;
    text-transform: lowercase;
    letter-spacing: -0.03em;
    text-align: center;
    color: $colorSecondary;
    line-height: 1.4em;
    font-size: 2em;
    margin: 2em 0 0em 0;
    &:before {
      width: $headinerCircleSize;
      height: $headinerCircleSize;
      line-height: $headinerCircleSize;
      text-align: center;
      content: "1";
      background: $colorSecondary;
      color: $colorContrastToMain;
      font-weight: bold;
      position: absolute;
      top: -$headinerCircleSize;
      left: 50%;
      margin-left: -$headinerCircleSize/2;
      @include border-radius(50%);
    }
  }
}

h1, h2, h3, h4, h5, h6 {
  color: $colorMain;
}

nav {
  @extend .basic-transition-mid;
  height: $navHeight;
  position: relative;
  margin-top: 8em;

  .handle {
    @extend .basic-transition-mid;
    display: none;
    position: absolute;
    top:0;
    cursor: pointer;
    left:0;
    width:$navHeight;
    height: $navHeight;
    z-index: 9;
    svg {
      fill: $white;
      width:100%;
      position: relative;
      top:3%;
      height: 100%;
    }
    &:hover svg {
      fill:$colorHighlightLink;
    }
  }

  .pattern {
    @extend .basic-transition-mid;
    background-size: cover;
    top:0;
    left:0;
    position: absolute;
    height: 100%;
    width:100%;
    opacity: 0;
  }
  ul {
    @extend %layout;
    max-width: 1200px;
    text-align: center;
    position: relative;
    text-transform: uppercase;
    font-weight: bold;
    a {
      @extend %standard-link;
      @extend .round;
      @extend .basic-transition-mid;
      color: $colorMain;
      text-decoration: none;
      display: inline-block;
      padding: 0 0.625em;
      line-height: 2.5em;
      .va {
        position: relative;
        display: block;
      }
      .sub {
        display: block;
        color: lighten(desaturate($colorMain, 40), 20);
        position: absolute;
        line-height: 1.2em;
        white-space: nowrap;
        text-transform: none;
        font-weight: normal;
        text-align: center;
        top: $navHeight/1.6;
        left:50%;
        @include transform(translateX(-50%));
        &:first-letter {
          text-transform: uppercase;
        }
      }
    }
    > li.pains a:before { content: "1" }
    > li.solution a:before { content: "2" }
    > li.myths a:before { content: "3" }
    > li.experience a:before { content: "4" }
    > li.support a:before { content: "5" }
    > li {
      display: inline-block;
      vertical-align: top;
      position: relative;
      width: 180px;
      line-height: $navHeight;
      > a:before {
        @extend %numbering;
        background: $colorSecondary;
        left:50%;
        font-size: 1.5em;
        top:-2em;
        opacity: 1;
        @include transform(translateX(-50%));
      }
    }
    > li.active {
      a {
        background: rgba($colorSecondary, 0.4);
      }
    }
  }
  &.fixed {
    display: none;
    position: fixed;
    width:100%;
    ul {
      min-width: 850px;
      > li > a:before {
        display: none;
      }
    }
    &.on {
      display: block;
      background: $colorMainDark;
      margin-top: 0;
      top:0;
      z-index: 9999;
      a {
        color: $colorContrastToMain;
        .sub {
          opacity: 0;
        }
      }
      .pattern {
        opacity: 0.4;
      }
    }
  }
}

.banner {
  min-height: 300px;
  background-color: #2f4d51;
  header {
    text-align: center;
    margin: 0 auto;
    .content {
      padding: 8% 5% 10% 5%;
    }
  }
  h1 {
    color: $colorContrastToMain;
    letter-spacing: -0.01em;
    font-size: 4.5em;
    line-height: 1.05em;
  }
  h2 {
    color: lighten($colorMain, 50);
    font-size: 1.5em;
    margin: 2em 0;
    line-height: 1.45em;
  }
  a.orange {
    font-size: 2em;
    .scroll-down-hint {
      display: block;
      width: 3em;
      text-align: center;
      position: absolute;
      bottom: -0.9em;
      left: 50%;
      margin-left: -1.5em;
      color: #FFF;
      opacity: 0.15;
      font-size: 2em;
      @include animation(bounce-arrow 1s infinite alternate ease-in-out);
    }
  }

  section.secondary {
    background-color: #191b19;
    padding: 7% 4% 3% 4%;
    font-size: 1.1em;
    ul {
      line-height: 1.5em;
      margin: 0 auto;
      padding: 0;
      list-style: none;
      overflow: hidden;
      li {
        float: left;
        width: 30%;
        margin: 0 2.4% 1% 0;
        padding: 0 2.4% 1% 0;
        border-right: 1px solid #272927;
        &:last-child {
          padding-right: 0;
          margin-right: 0;
          border-right: none;
        }
        h2 {
          margin: 0 0 0.9em 0;
          color: #388892;
        }
        p {
          color: #626f72;
          margin: 0.8em 0;
          font-size: 1.1em;
        }
      }
    }
  }

  .area-links-wrapper {
    background-color: #191b19;
    padding-top: 1%;
    position: relative;
    .overlay-content.loading {
      background-color: rgba(255, 255, 255, 0.2);
    }
    .area-links {
      text-align: center;
      .help {
        display: block;
        margin: 1em 0;
        font-size: 1.4em;
        color: #697069;
      }
      .button {
        position: relative;
        background: #108eba;
        color: white;
        text-decoration: none;
        font-size: 1.5em;
        padding: 1em;
        border-top: 3px solid transparent;
        &:hover {
          border-top-color: #ff7e00;
          background: #f7f2fc;
          color: #4f6671;
        }
        &.active {
          background: white;
          color: #607d89;
          padding: 1.1em;
          border-radius: 3px 3px 0 0;
          &:hover {
            border-top-color: white;
            cursor: default;
          }
        }
      }
    }
  }
}

@include keyframes(bounce-arrow) {
  0%  { bottom: -0.9em; }
  50% { bottom: -1.4em; }
}

.campaign-bar {
  @extend .clearfix;
  background: rgba($colorMainDark, 0.6);
  color: rgba($colorContrastToMain, 0.8);
  @include border-radius(0.0625em);
  margin: 4px;
  padding: 0.75em 0.62em 0.75em 1.85em;
  min-height: 2.25em;
  .affiliation  {
    float: left;
    padding-top: 0.62em;
    font-size: 1em;
    a{
      @extend %banner-link;
    }
  }
  .back {
    float: right;
    .button {
      margin-left: 10px;
    }
  }
}

.argumentation {
  padding-top: 2em;
  font-size: 1.5em;
  > section {
    padding-top: 2em;
    max-width: 28em;
    margin:0 auto;
    p {
      margin-bottom: 1.2em;
    }
    a:not(.button) {
      @extend %standard-link;
    }
    .heading {
      text-align: left;
      font-size: 1.5em;
      font-weight: bold;
      margin-bottom: 1em;
    }
    ul.list {
      > li {
        font-size: 0.8em;
        margin-bottom: 0.8em;
        &:before {
          content:"";
          font-size: 0.55em;
          left: -3.3em;
          top:1.48em;
        }
      }
    }
    .half {
      @extend %layout-column;
      width:50%;
      display: inline-block;
      padding-bottom: 4em;
      position: relative;
      &.conclusion p:first-child {
        font-size: 1.4em;
        color:$colorMain;
      }
      &.conclusion:before,
      &.conditions:after {
        content: "";
        position: absolute;
        width:1px;
        right:0;
        top: 0;
        bottom:0;
        background: $colorSecondaryThinPixel;
      }
      &.conclusion:before {
        right:auto;
        left:-1px;
      }
    }
  }
}

%arrow-list {
  li {
    font-size: 0.75em;
    line-height: 1.2em;
    position: relative;
    padding: 2%;
    padding-left: 2.7em;
    margin-left:-2.7em;
    background: image-url('chevron15.svg') no-repeat -0.7em 50%;
    background-size: 3.5em ;
  }
}


.argumentation > section#pains {
  @extend .clearfix;
  @extend %layout;
  padding-top: 5em;
  position: relative;
  header {
    @extend %section-header;
    h2 {
      margin: 0 0 $headinerCircleSize 0;
      &:before {
        top: 1.8em;
        z-index: 4;
      }
    }
  }
  ul {
    @extend %arrow-list;
  }
}

.argumentation > section#solution {
  @extend .clearfix;
  @extend %layout;
  position: relative;
  max-width: 37.5em;
  padding-top: 5em;
  &:before {
    content: "";
    display: block;
    position: absolute;
    left:50%;
    top:0em;
    width: 1px;
    @include transform(translateX(-1px));
    height: 4em;
    background: $colorSecondaryThinPixel;
  }
  > header {
    @extend %section-header;
    h2:before {
      content:"2";
    }
    padding-bottom: 3em;
  }
  > .requirements {
    @include box-sizing(border-box);
    border-right: none;
    font-size: 1em;
    margin-bottom: 0.6em;
    position: relative;
    left:0.2em;
    display: inline-block;
    width:68%;
    margin-left: 2.5%;
    padding-left: 1.875em;
    padding-right: 2%;
  }
  span.checklist {
    vertical-align: bottom;
    display: inline-block;
    @include box-sizing(border-box);
    width:17%;
    font-size: 0.6em;
    text-align: left;
    margin: 0 2% 1em 7.5%;
    color: lighten($colorMainText, 10);
  }
  > ul {
    clear:both;
    margin-top: 1em;
    max-width: 90%;
    font-size: 0.9em;
    margin-left: 3%;
    margin-right: 15%;
    position: relative;
    $connectorWidth: 3.7%;
    &:after {
      width:1px;
      z-index: 1;
      background: $colorSecondaryThinPixel;
      display: block;
      position: absolute;
      content: '';
      top:0;
      bottom:0;
      right:-$connectorWidth;
    }
    li {
      padding: 2%;
      font-size: 0.8em;
//      font-size: 0.9em;
      line-height: 1.2em;
      position: relative;
      padding-right: 10%;
      padding-left: 3em;
      background: image-url('chevron15.svg') no-repeat -0.7em 50%;
      background-size: 3.5em ;
      $connectorRadius: 1em;
      &:after {
        display: block;
        z-index: 3;
        content: '';
        width:$connectorWidth;
        right:-$connectorWidth;
        padding-left: 0.7em;
        position: absolute;
        top: 50%;
        margin-top:-0.4em;
        height: 100%;
        @include border-top-right-radius($connectorRadius);
        border:1px solid $colorSecondaryThinPixel;
        border-bottom:0;
        border-left:0;
      }
      &:first-child:before {
        width:1px;
        content: "";
        position: absolute;
        display: block;
        z-index: 2;
        right:-$connectorWidth;
        background: $white;
        bottom:-1em;
        top:0;
      }
    }
    .check {
      font-size: 1.5em;
      height:1em;
      width:1em;
      position: absolute;
      top:50%;
      right: 2%;
      margin-top:-0.7em;
      path {
        fill: $colorSecondary;
      }
    }
  }
}




.argumentation section#steps {
  @extend .clearfix;
  margin-top: 5em;
  padding-top: 0;
  position: relative;
  &:before {
    display: block;
    z-index: 1;
    background: red;
    content: '';
    position: absolute;
    width:1px;
    background: $colorSecondaryThinPixel;
    top:-4em;
    height:8em;
    bottom:auto;
    right:12%;
  }
  %line {
    display: block;
    z-index: 1;
    content: '';
    position: absolute;
    width:1px;
    background: $colorSecondaryThinPixel;
    top:0;
    bottom:0;
    right:12%;
  }
  %line1 {
    @extend %line;
    right:13%;
  }
  %line3 {
    @extend %line;
    right:11%;
  }
  header {
    @extend .clearfix;
    position: relative;
    padding-bottom: 5em;
    &:before, &:after {
      @extend %line;
      top:10em;
    }
    &:after {
      @extend %line3;
    }
    .line1 {
      @extend %line1;
      top:3em
    }
  }
  h3 {
    @include border-radius(50%);
    font-size: 1em;
    position: absolute;
    z-index: 2;
    right:0;
    top:3em;
    margin-right:12%;
    @include transform(translateX(50%));
    text-align: center;
    height:4.5em;
    color:$colorContrastToMain;
    width:7em;
    line-height: 1em;
    padding-top: 2.5em;
    background: $colorSecondary;
  }
  .subtitle {
    @extend %big-message;
    text-align: left;
    max-width: 26em;
    margin-right: 8em;
    margin-bottom: 0;
    font-size: 1.6em;
    line-height: 1.2em;
    left: 4%;
  }

  ul.points {
    @extend .clearfix;
  }
  ul.points > li {
    @extend %layout-column;
    font-size: 1.1em;
    line-height: 1.3em;
    position: relative;
    text-align: center;
    padding: 0 0 3em 0;
    margin: 0;
    clear: left;
    $points-font-size: 1.1em;
    $points-diameter: 2.5em;
    $content-left-spacing: 320px;
    $text-block-max-width: 16em;

    .point {
      display: block;
      margin-left: $content-left-spacing;
      text-align: center;
      // offset to the left a bit to compensate for text left alignn
      max-width: $text-block-max-width - 1;
      span {
        position: relative;
        display: block;
        height: $points-diameter;
        width: $points-diameter;
        font-weight: bold;
        font-size: $points-font-size;
        line-height: $points-diameter;
        z-index: 3;
        color: $colorContrastToMain;
        background: $colorSecondary;
        margin: 0 auto;
        @include border-radius(50%);
      }
    }
    .connect {
      display: block;
      position: absolute;
      top: $points-diameter / 2;
      left: 60%;
      font-size: $points-font-size;
      z-index: 1;
      content: '';

      &:after {
        position: relative;
        content: "";
        display: block;
        border: 1px solid $colorSecondaryThinPixel;
        border-top: 0;
        border-left: 0;
        height: 3em;
        margin-top: -3em;
        @include border-bottom-right-radius(1em);
      }
    }

    .content {
      position: relative;
      padding-top: 1.5em;

      .img {
        display: block;
        float: left;
        max-width: 250px;
        img {
          width: 100%;;
          opacity: 0.85;
        }
      }

      .essence {
        max-width: $text-block-max-width;
        display: block;
        margin-left: $content-left-spacing;
        p {
          font-size: 0.8em;
          text-align: left;
        }
      }
    }

    &:before,
    &:after { @extend %line; }
    &:after { @extend %line3; }
    .line1 { @extend %line1; }

    &.requirements {
      .connect { right: 13%; }
    }
    &.process {
      .connect { right: 12%; }
      &:before { display: none; }
    }
    &.data {
      .connect { right: 11%; }
      &:before,
      &:after { display: none; }
    }
  }
}



.argumentation > section#myths {
  max-width: 37.5em;
  margin-top: 2em;
  padding-top: 5em;
  padding-bottom: 2em;
  .content {
    max-width: 30em;
    padding-left: 10%;
    padding-right: 5%;
    margin: 0 auto;
  }
  .opposition {
    max-width: 32em;
    font-size: 0.7em;
    margin: 0 auto;
  }
  p {
    line-height: 1.2em;
  }
  .help {
    display: block;
    font-style: italic;
    font-size: 0.8em;
    padding-top: 0.2em;
    color: ligten($colorMainText, 30)
  }
  header {
    @extend %section-header;
    h2:before {
      content: "3";
    }
    padding-bottom: 2.5em;
  }
  h2.heading {
    @extend %big-message;
    padding-bottom: 1em;
  }
  h3 {
    text-align: center;
    margin-top: 3em;
    font-weight: bold;
    font-size: 1.5em;
  }
  .open-browser {
    margin-bottom: 1.2em;
    @extend .round;
    position: relative;
    font-size: 0.6em;
    padding: 2.2%;
    background: $colorMainTextLighten50;
    border: 1px solid $colorMainTextLighten40;
    img {
      float:left;
      position: absolute;
      top:50%;
      left: 2.2%;
      @include transform(translateY(-50%));
      margin-right: 3%;
    }
    h4 {
      margin-left: 100px;
      padding-left: 3%;
      margin-bottom: 0.3em;
      font-weight: bold;
      font-size: 1.4em;
    }
    p {
      padding-left: 3%;
      margin-left: 100px;
      line-height: 1.2em;
      margin-bottom: 0.8em;
      &:last-child {
        margin-bottom: 0.4em;
      }
    }
  }
  %handle {
    font-size: 0.6em;
    display: block;
    content: "";
    position: absolute;
    height: 1.55em;
    width: 1em;
    bottom: -0.2em;
  }
  .myths {
    padding-bottom: 2em;
  }
  .myth {
    @include box-sizing(border-box);
    @include border-radius(0.5em);
    font-size: 1.5em;
    width: 80%;
    padding: 3%;
    margin-top: 2em;
    margin-bottom: 0.5em;
    background: #B7DDEA;
    color: #404040;
    position: relative;
    &:before {
      @extend %handle;
      left:-0.5em;
      background: image-url("bubble-left.svg") no-repeat right top;
      background-size: 100%;
      z-index: -1;
      opacity: 0.28;
    }
  }
  .answer {
    @include box-sizing(border-box);
    @include border-radius(0.5em);
    margin-bottom: 0.5em;
    line-height: 1.2em;
    width:80%;
    margin-left: 20%;
    padding: 3%;
    background-color: #D6ECC5;
    color: #0F4B0A;
    position: relative;
    &:after {
      @extend %handle;
      font-size: 0.9em;
      right:-0.5em;
      background: image-url("bubble-right.svg") no-repeat right top;
      background-size: 100%;
      z-index: -1;
      opacity: 0.3;
    }
  }
  hr.separator {
    width: 50%;
    text-align:center;
    margin: 0 auto;
    margin-bottom: 1.2em;
  }
}

.argumentation > section#experience {
  padding-top: 5em;
  padding-bottom: 2em;

  header {
    @extend %section-header;
    h2:before {
      content: "4";
    }
    padding-bottom: 2.5em;
  }
  ul {
    @extend %arrow-list;
    padding-left: 10%;
    padding-right: 5%;
  }
}

.argumentation > section#pains {
  ul {
    @extend %arrow-list;
    padding-left: 10%;
    padding-right: 5%;
  }
}

.argumentation > section#support {
  padding-top: 5em;

  header {
    @extend %section-header;
    h2:before {
      content: "5";
    }
  }
  .act {
    margin-top: 2em;
    text-align: center;
    .button {
      display: block;
      width: 100%;
      font-size: 1.6em;
      margin: 1em 0 1.5em 0;
      padding: 0.3em 0;
    }
    form {
      max-width: 550px;
      margin: 0 auto;
      text-align: left;
      margin-bottom: 3em;
      padding: 0.5em;
    }
  }
}

.overlay-container {
  position: relative;
}

.overlay-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0.1em;
  z-index: 200;
  &.loading {
    background: rgba(255, 255, 255, 0.7) image-url('spinner.gif') 50% 50% no-repeat;
  }
  &.success {
    background: rgba(14, 121, 2, 0.9);
    padding: 3em 2em;
    p {
      color: #fff;
      text-align: center;
      font-size: 1.4em;
      margin: 1em 0;
      small { font-size: 0.6em; }
      a { color: #1CC2E2; }
    }
  }
}


// Flash alerts
.flash-message {
  padding: 0.8em 1.6em;
  margin: 0;
  &.notice {
    background-color: #7bb773;
    color: #21361f;
  }
  &.alert {
    background-color: #ddb4a2;
    color: #602328;
  }
}

// Simple form styles
.simple_form {
  .input {
    margin-bottom: 0.8em;
  }
  label {
    display: block;
  }
  input.string {
    width: 100%;
    margin: 0.2em 0;
    padding: 0.2em 0.5em;
    box-sizing: border-box;
  }
  .boolean {
    input {
      margin-right: 0.3em;
      vertical-align: middle;
    }
    label {
      display: inline;
    }
  }
  .field_with_errors {
    color: #cb0015;
    input {
      border-color: #ff1a2c;
      border-style: solid;
    }
  }
}

abbr {
  border-bottom: 1px dashed #5b6159;
  cursor: help;
}

header.main {
  section {
    max-width: 42em;
    margin: 0 auto;
  }
  background-color: #2f4d51;
  padding: 0.8em 1.6em;
  margin: 0;
  overflow: hidden;
  h1 {
    float: left;
    a { color: #FFF; text-decoration: none; font-size: 1.8em; }
  }
  .button { float: right; }
}

footer {
  background-color: #171819;
  padding: 3em 0;
  text-align: center;
  color: #5d5f5e;
  p {
    margin: 1em 0;
    padding: 0;
    line-height: 1.4em;
  }
  a {
    color: #a5a3ab;
    text-decoration: none;
    &:hover {
      color: #72b53f;
    }
  }
  .obshtestvo {
    margin: 2.5em;
    color: #48484a;
    img {
      @include filter(grayscale(100%));
      @include opacity(0.5);
      @extend .basic-transition-2x;
      &:hover {
        @include filter(grayscale(0%));
        @include opacity(1);
      }
    }
  }
}

.tipsy {
  font-size: 14px;
}
.tipsy-inner {
  padding: 0.6em 0.8em;
  text-align: left;
}

@import "responsive";
@import "html5boilerplate/optional";
@import "html5boilerplate/print";
<commit_msg>Fix the mobile menu handle on some Android browsers<commit_after>//= require normalize-rails
//= require jquery.tipsy
//= require_self

@import "fonts";
@import "compass";
@import "html5boilerplate/base";
@import "zeroreset";
@import "colors";
@import "obshtestvo.bg/buttons";
@import "obshtestvo.bg/bits";
@import "list";
@import "html5boilerplate/almostmixins";
@import "mixins";

$navHeight: 3.75em;
$headinerCircleSize: 3em;

body {
  font-family: "obshtestvobg", "Myriad Pro", "Verdana", sans-serif;
  -webkit-font-smoothing: antialiased;
  color: $colorMainText;
  background: $colorContrastToMain;
}
strong {
  font-weight: bold;
}

%layout {
  max-width: 1000px;
  margin: 0 auto;
}

%layout-column {
  @include box-sizing(border-box);
  padding: 4%;
  padding-top: 3em;
}

%banner-link {
  @extend %standard-link;
  color: $colorHighlightLink;
  &:hover {
    color: lighten($colorHighlightLink, 25)
  }
  &:active {
    color: darken($colorHighlightLink, 5)
  }
}

%big-message {
  font-size: 2em;
  color: $colorMain;
  position: relative;
  margin-bottom: 0.8em;
  font-weight: normal;
}

%section-header {
  z-index: 2;
  h2 {
    position: relative;
    text-transform: lowercase;
    letter-spacing: -0.03em;
    text-align: center;
    color: $colorSecondary;
    line-height: 1.4em;
    font-size: 2em;
    margin: 2em 0 0em 0;
    &:before {
      width: $headinerCircleSize;
      height: $headinerCircleSize;
      line-height: $headinerCircleSize;
      text-align: center;
      content: "1";
      background: $colorSecondary;
      color: $colorContrastToMain;
      font-weight: bold;
      position: absolute;
      top: -$headinerCircleSize;
      left: 50%;
      margin-left: -$headinerCircleSize/2;
      @include border-radius(50%);
    }
  }
}

h1, h2, h3, h4, h5, h6 {
  color: $colorMain;
}

nav {
  @extend .basic-transition-mid;
  height: $navHeight;
  position: relative;
  margin-top: 8em;

  .handle {
    @extend .basic-transition-mid;
    display: none;
    position: absolute;
    top:0;
    cursor: pointer;
    left:0;
    width:$navHeight;
    height: $navHeight;
    z-index: 9;
    svg {
      display: block;
      fill: $white;
      width:100%;
      position: relative;
      top:3%;
      height: 100%;
    }
    &:hover svg {
      fill:$colorHighlightLink;
    }
  }

  .pattern {
    @extend .basic-transition-mid;
    background-size: cover;
    top:0;
    left:0;
    position: absolute;
    height: 100%;
    width:100%;
    opacity: 0;
  }
  ul {
    @extend %layout;
    max-width: 1200px;
    text-align: center;
    position: relative;
    text-transform: uppercase;
    font-weight: bold;
    a {
      @extend %standard-link;
      @extend .round;
      @extend .basic-transition-mid;
      color: $colorMain;
      text-decoration: none;
      display: inline-block;
      padding: 0 0.625em;
      line-height: 2.5em;
      .va {
        position: relative;
        display: block;
      }
      .sub {
        display: block;
        color: lighten(desaturate($colorMain, 40), 20);
        position: absolute;
        line-height: 1.2em;
        white-space: nowrap;
        text-transform: none;
        font-weight: normal;
        text-align: center;
        top: $navHeight/1.6;
        left:50%;
        @include transform(translateX(-50%));
        &:first-letter {
          text-transform: uppercase;
        }
      }
    }
    > li.pains a:before { content: "1" }
    > li.solution a:before { content: "2" }
    > li.myths a:before { content: "3" }
    > li.experience a:before { content: "4" }
    > li.support a:before { content: "5" }
    > li {
      display: inline-block;
      vertical-align: top;
      position: relative;
      width: 180px;
      line-height: $navHeight;
      > a:before {
        @extend %numbering;
        background: $colorSecondary;
        left:50%;
        font-size: 1.5em;
        top:-2em;
        opacity: 1;
        @include transform(translateX(-50%));
      }
    }
    > li.active {
      a {
        background: rgba($colorSecondary, 0.4);
      }
    }
  }
  &.fixed {
    display: none;
    position: fixed;
    width:100%;
    ul {
      min-width: 850px;
      > li > a:before {
        display: none;
      }
    }
    &.on {
      display: block;
      background: $colorMainDark;
      margin-top: 0;
      top:0;
      z-index: 9999;
      a {
        color: $colorContrastToMain;
        .sub {
          opacity: 0;
        }
      }
      .pattern {
        opacity: 0.4;
      }
    }
  }
}

.banner {
  min-height: 300px;
  background-color: #2f4d51;
  header {
    text-align: center;
    margin: 0 auto;
    .content {
      padding: 8% 5% 10% 5%;
    }
  }
  h1 {
    color: $colorContrastToMain;
    letter-spacing: -0.01em;
    font-size: 4.5em;
    line-height: 1.05em;
  }
  h2 {
    color: lighten($colorMain, 50);
    font-size: 1.5em;
    margin: 2em 0;
    line-height: 1.45em;
  }
  a.orange {
    font-size: 2em;
    .scroll-down-hint {
      display: block;
      width: 3em;
      text-align: center;
      position: absolute;
      bottom: -0.9em;
      left: 50%;
      margin-left: -1.5em;
      color: #FFF;
      opacity: 0.15;
      font-size: 2em;
      @include animation(bounce-arrow 1s infinite alternate ease-in-out);
    }
  }

  section.secondary {
    background-color: #191b19;
    padding: 7% 4% 3% 4%;
    font-size: 1.1em;
    ul {
      line-height: 1.5em;
      margin: 0 auto;
      padding: 0;
      list-style: none;
      overflow: hidden;
      li {
        float: left;
        width: 30%;
        margin: 0 2.4% 1% 0;
        padding: 0 2.4% 1% 0;
        border-right: 1px solid #272927;
        &:last-child {
          padding-right: 0;
          margin-right: 0;
          border-right: none;
        }
        h2 {
          margin: 0 0 0.9em 0;
          color: #388892;
        }
        p {
          color: #626f72;
          margin: 0.8em 0;
          font-size: 1.1em;
        }
      }
    }
  }

  .area-links-wrapper {
    background-color: #191b19;
    padding-top: 1%;
    position: relative;
    .overlay-content.loading {
      background-color: rgba(255, 255, 255, 0.2);
    }
    .area-links {
      text-align: center;
      .help {
        display: block;
        margin: 1em 0;
        font-size: 1.4em;
        color: #697069;
      }
      .button {
        position: relative;
        background: #108eba;
        color: white;
        text-decoration: none;
        font-size: 1.5em;
        padding: 1em;
        border-top: 3px solid transparent;
        &:hover {
          border-top-color: #ff7e00;
          background: #f7f2fc;
          color: #4f6671;
        }
        &.active {
          background: white;
          color: #607d89;
          padding: 1.1em;
          border-radius: 3px 3px 0 0;
          &:hover {
            border-top-color: white;
            cursor: default;
          }
        }
      }
    }
  }
}

@include keyframes(bounce-arrow) {
  0%  { bottom: -0.9em; }
  50% { bottom: -1.4em; }
}

.campaign-bar {
  @extend .clearfix;
  background: rgba($colorMainDark, 0.6);
  color: rgba($colorContrastToMain, 0.8);
  @include border-radius(0.0625em);
  margin: 4px;
  padding: 0.75em 0.62em 0.75em 1.85em;
  min-height: 2.25em;
  .affiliation  {
    float: left;
    padding-top: 0.62em;
    font-size: 1em;
    a{
      @extend %banner-link;
    }
  }
  .back {
    float: right;
    .button {
      margin-left: 10px;
    }
  }
}

.argumentation {
  padding-top: 2em;
  font-size: 1.5em;
  > section {
    padding-top: 2em;
    max-width: 28em;
    margin:0 auto;
    p {
      margin-bottom: 1.2em;
    }
    a:not(.button) {
      @extend %standard-link;
    }
    .heading {
      text-align: left;
      font-size: 1.5em;
      font-weight: bold;
      margin-bottom: 1em;
    }
    ul.list {
      > li {
        font-size: 0.8em;
        margin-bottom: 0.8em;
        &:before {
          content:"";
          font-size: 0.55em;
          left: -3.3em;
          top:1.48em;
        }
      }
    }
    .half {
      @extend %layout-column;
      width:50%;
      display: inline-block;
      padding-bottom: 4em;
      position: relative;
      &.conclusion p:first-child {
        font-size: 1.4em;
        color:$colorMain;
      }
      &.conclusion:before,
      &.conditions:after {
        content: "";
        position: absolute;
        width:1px;
        right:0;
        top: 0;
        bottom:0;
        background: $colorSecondaryThinPixel;
      }
      &.conclusion:before {
        right:auto;
        left:-1px;
      }
    }
  }
}

%arrow-list {
  li {
    font-size: 0.75em;
    line-height: 1.2em;
    position: relative;
    padding: 2%;
    padding-left: 2.7em;
    margin-left:-2.7em;
    background: image-url('chevron15.svg') no-repeat -0.7em 50%;
    background-size: 3.5em ;
  }
}


.argumentation > section#pains {
  @extend .clearfix;
  @extend %layout;
  padding-top: 5em;
  position: relative;
  header {
    @extend %section-header;
    h2 {
      margin: 0 0 $headinerCircleSize 0;
      &:before {
        top: 1.8em;
        z-index: 4;
      }
    }
  }
  ul {
    @extend %arrow-list;
  }
}

.argumentation > section#solution {
  @extend .clearfix;
  @extend %layout;
  position: relative;
  max-width: 37.5em;
  padding-top: 5em;
  &:before {
    content: "";
    display: block;
    position: absolute;
    left:50%;
    top:0em;
    width: 1px;
    @include transform(translateX(-1px));
    height: 4em;
    background: $colorSecondaryThinPixel;
  }
  > header {
    @extend %section-header;
    h2:before {
      content:"2";
    }
    padding-bottom: 3em;
  }
  > .requirements {
    @include box-sizing(border-box);
    border-right: none;
    font-size: 1em;
    margin-bottom: 0.6em;
    position: relative;
    left:0.2em;
    display: inline-block;
    width:68%;
    margin-left: 2.5%;
    padding-left: 1.875em;
    padding-right: 2%;
  }
  span.checklist {
    vertical-align: bottom;
    display: inline-block;
    @include box-sizing(border-box);
    width:17%;
    font-size: 0.6em;
    text-align: left;
    margin: 0 2% 1em 7.5%;
    color: lighten($colorMainText, 10);
  }
  > ul {
    clear:both;
    margin-top: 1em;
    max-width: 90%;
    font-size: 0.9em;
    margin-left: 3%;
    margin-right: 15%;
    position: relative;
    $connectorWidth: 3.7%;
    &:after {
      width:1px;
      z-index: 1;
      background: $colorSecondaryThinPixel;
      display: block;
      position: absolute;
      content: '';
      top:0;
      bottom:0;
      right:-$connectorWidth;
    }
    li {
      padding: 2%;
      font-size: 0.8em;
//      font-size: 0.9em;
      line-height: 1.2em;
      position: relative;
      padding-right: 10%;
      padding-left: 3em;
      background: image-url('chevron15.svg') no-repeat -0.7em 50%;
      background-size: 3.5em ;
      $connectorRadius: 1em;
      &:after {
        display: block;
        z-index: 3;
        content: '';
        width:$connectorWidth;
        right:-$connectorWidth;
        padding-left: 0.7em;
        position: absolute;
        top: 50%;
        margin-top:-0.4em;
        height: 100%;
        @include border-top-right-radius($connectorRadius);
        border:1px solid $colorSecondaryThinPixel;
        border-bottom:0;
        border-left:0;
      }
      &:first-child:before {
        width:1px;
        content: "";
        position: absolute;
        display: block;
        z-index: 2;
        right:-$connectorWidth;
        background: $white;
        bottom:-1em;
        top:0;
      }
    }
    .check {
      font-size: 1.5em;
      height:1em;
      width:1em;
      position: absolute;
      top:50%;
      right: 2%;
      margin-top:-0.7em;
      path {
        fill: $colorSecondary;
      }
    }
  }
}




.argumentation section#steps {
  @extend .clearfix;
  margin-top: 5em;
  padding-top: 0;
  position: relative;
  &:before {
    display: block;
    z-index: 1;
    background: red;
    content: '';
    position: absolute;
    width:1px;
    background: $colorSecondaryThinPixel;
    top:-4em;
    height:8em;
    bottom:auto;
    right:12%;
  }
  %line {
    display: block;
    z-index: 1;
    content: '';
    position: absolute;
    width:1px;
    background: $colorSecondaryThinPixel;
    top:0;
    bottom:0;
    right:12%;
  }
  %line1 {
    @extend %line;
    right:13%;
  }
  %line3 {
    @extend %line;
    right:11%;
  }
  header {
    @extend .clearfix;
    position: relative;
    padding-bottom: 5em;
    &:before, &:after {
      @extend %line;
      top:10em;
    }
    &:after {
      @extend %line3;
    }
    .line1 {
      @extend %line1;
      top:3em
    }
  }
  h3 {
    @include border-radius(50%);
    font-size: 1em;
    position: absolute;
    z-index: 2;
    right:0;
    top:3em;
    margin-right:12%;
    @include transform(translateX(50%));
    text-align: center;
    height:4.5em;
    color:$colorContrastToMain;
    width:7em;
    line-height: 1em;
    padding-top: 2.5em;
    background: $colorSecondary;
  }
  .subtitle {
    @extend %big-message;
    text-align: left;
    max-width: 26em;
    margin-right: 8em;
    margin-bottom: 0;
    font-size: 1.6em;
    line-height: 1.2em;
    left: 4%;
  }

  ul.points {
    @extend .clearfix;
  }
  ul.points > li {
    @extend %layout-column;
    font-size: 1.1em;
    line-height: 1.3em;
    position: relative;
    text-align: center;
    padding: 0 0 3em 0;
    margin: 0;
    clear: left;
    $points-font-size: 1.1em;
    $points-diameter: 2.5em;
    $content-left-spacing: 320px;
    $text-block-max-width: 16em;

    .point {
      display: block;
      margin-left: $content-left-spacing;
      text-align: center;
      // offset to the left a bit to compensate for text left alignn
      max-width: $text-block-max-width - 1;
      span {
        position: relative;
        display: block;
        height: $points-diameter;
        width: $points-diameter;
        font-weight: bold;
        font-size: $points-font-size;
        line-height: $points-diameter;
        z-index: 3;
        color: $colorContrastToMain;
        background: $colorSecondary;
        margin: 0 auto;
        @include border-radius(50%);
      }
    }
    .connect {
      display: block;
      position: absolute;
      top: $points-diameter / 2;
      left: 60%;
      font-size: $points-font-size;
      z-index: 1;
      content: '';

      &:after {
        position: relative;
        content: "";
        display: block;
        border: 1px solid $colorSecondaryThinPixel;
        border-top: 0;
        border-left: 0;
        height: 3em;
        margin-top: -3em;
        @include border-bottom-right-radius(1em);
      }
    }

    .content {
      position: relative;
      padding-top: 1.5em;

      .img {
        display: block;
        float: left;
        max-width: 250px;
        img {
          width: 100%;;
          opacity: 0.85;
        }
      }

      .essence {
        max-width: $text-block-max-width;
        display: block;
        margin-left: $content-left-spacing;
        p {
          font-size: 0.8em;
          text-align: left;
        }
      }
    }

    &:before,
    &:after { @extend %line; }
    &:after { @extend %line3; }
    .line1 { @extend %line1; }

    &.requirements {
      .connect { right: 13%; }
    }
    &.process {
      .connect { right: 12%; }
      &:before { display: none; }
    }
    &.data {
      .connect { right: 11%; }
      &:before,
      &:after { display: none; }
    }
  }
}



.argumentation > section#myths {
  max-width: 37.5em;
  margin-top: 2em;
  padding-top: 5em;
  padding-bottom: 2em;
  .content {
    max-width: 30em;
    padding-left: 10%;
    padding-right: 5%;
    margin: 0 auto;
  }
  .opposition {
    max-width: 32em;
    font-size: 0.7em;
    margin: 0 auto;
  }
  p {
    line-height: 1.2em;
  }
  .help {
    display: block;
    font-style: italic;
    font-size: 0.8em;
    padding-top: 0.2em;
    color: ligten($colorMainText, 30)
  }
  header {
    @extend %section-header;
    h2:before {
      content: "3";
    }
    padding-bottom: 2.5em;
  }
  h2.heading {
    @extend %big-message;
    padding-bottom: 1em;
  }
  h3 {
    text-align: center;
    margin-top: 3em;
    font-weight: bold;
    font-size: 1.5em;
  }
  .open-browser {
    margin-bottom: 1.2em;
    @extend .round;
    position: relative;
    font-size: 0.6em;
    padding: 2.2%;
    background: $colorMainTextLighten50;
    border: 1px solid $colorMainTextLighten40;
    img {
      float:left;
      position: absolute;
      top:50%;
      left: 2.2%;
      @include transform(translateY(-50%));
      margin-right: 3%;
    }
    h4 {
      margin-left: 100px;
      padding-left: 3%;
      margin-bottom: 0.3em;
      font-weight: bold;
      font-size: 1.4em;
    }
    p {
      padding-left: 3%;
      margin-left: 100px;
      line-height: 1.2em;
      margin-bottom: 0.8em;
      &:last-child {
        margin-bottom: 0.4em;
      }
    }
  }
  %handle {
    font-size: 0.6em;
    display: block;
    content: "";
    position: absolute;
    height: 1.55em;
    width: 1em;
    bottom: -0.2em;
  }
  .myths {
    padding-bottom: 2em;
  }
  .myth {
    @include box-sizing(border-box);
    @include border-radius(0.5em);
    font-size: 1.5em;
    width: 80%;
    padding: 3%;
    margin-top: 2em;
    margin-bottom: 0.5em;
    background: #B7DDEA;
    color: #404040;
    position: relative;
    &:before {
      @extend %handle;
      left:-0.5em;
      background: image-url("bubble-left.svg") no-repeat right top;
      background-size: 100%;
      z-index: -1;
      opacity: 0.28;
    }
  }
  .answer {
    @include box-sizing(border-box);
    @include border-radius(0.5em);
    margin-bottom: 0.5em;
    line-height: 1.2em;
    width:80%;
    margin-left: 20%;
    padding: 3%;
    background-color: #D6ECC5;
    color: #0F4B0A;
    position: relative;
    &:after {
      @extend %handle;
      font-size: 0.9em;
      right:-0.5em;
      background: image-url("bubble-right.svg") no-repeat right top;
      background-size: 100%;
      z-index: -1;
      opacity: 0.3;
    }
  }
  hr.separator {
    width: 50%;
    text-align:center;
    margin: 0 auto;
    margin-bottom: 1.2em;
  }
}

.argumentation > section#experience {
  padding-top: 5em;
  padding-bottom: 2em;

  header {
    @extend %section-header;
    h2:before {
      content: "4";
    }
    padding-bottom: 2.5em;
  }
  ul {
    @extend %arrow-list;
    padding-left: 10%;
    padding-right: 5%;
  }
}

.argumentation > section#pains {
  ul {
    @extend %arrow-list;
    padding-left: 10%;
    padding-right: 5%;
  }
}

.argumentation > section#support {
  padding-top: 5em;

  header {
    @extend %section-header;
    h2:before {
      content: "5";
    }
  }
  .act {
    margin-top: 2em;
    text-align: center;
    .button {
      display: block;
      width: 100%;
      font-size: 1.6em;
      margin: 1em 0 1.5em 0;
      padding: 0.3em 0;
    }
    form {
      max-width: 550px;
      margin: 0 auto;
      text-align: left;
      margin-bottom: 3em;
      padding: 0.5em;
    }
  }
}

.overlay-container {
  position: relative;
}

.overlay-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0.1em;
  z-index: 200;
  &.loading {
    background: rgba(255, 255, 255, 0.7) image-url('spinner.gif') 50% 50% no-repeat;
  }
  &.success {
    background: rgba(14, 121, 2, 0.9);
    padding: 3em 2em;
    p {
      color: #fff;
      text-align: center;
      font-size: 1.4em;
      margin: 1em 0;
      small { font-size: 0.6em; }
      a { color: #1CC2E2; }
    }
  }
}


// Flash alerts
.flash-message {
  padding: 0.8em 1.6em;
  margin: 0;
  &.notice {
    background-color: #7bb773;
    color: #21361f;
  }
  &.alert {
    background-color: #ddb4a2;
    color: #602328;
  }
}

// Simple form styles
.simple_form {
  .input {
    margin-bottom: 0.8em;
  }
  label {
    display: block;
  }
  input.string {
    width: 100%;
    margin: 0.2em 0;
    padding: 0.2em 0.5em;
    box-sizing: border-box;
  }
  .boolean {
    input {
      margin-right: 0.3em;
      vertical-align: middle;
    }
    label {
      display: inline;
    }
  }
  .field_with_errors {
    color: #cb0015;
    input {
      border-color: #ff1a2c;
      border-style: solid;
    }
  }
}

abbr {
  border-bottom: 1px dashed #5b6159;
  cursor: help;
}

header.main {
  section {
    max-width: 42em;
    margin: 0 auto;
  }
  background-color: #2f4d51;
  padding: 0.8em 1.6em;
  margin: 0;
  overflow: hidden;
  h1 {
    float: left;
    a { color: #FFF; text-decoration: none; font-size: 1.8em; }
  }
  .button { float: right; }
}

footer {
  background-color: #171819;
  padding: 3em 0;
  text-align: center;
  color: #5d5f5e;
  p {
    margin: 1em 0;
    padding: 0;
    line-height: 1.4em;
  }
  a {
    color: #a5a3ab;
    text-decoration: none;
    &:hover {
      color: #72b53f;
    }
  }
  .obshtestvo {
    margin: 2.5em;
    color: #48484a;
    img {
      @include filter(grayscale(100%));
      @include opacity(0.5);
      @extend .basic-transition-2x;
      &:hover {
        @include filter(grayscale(0%));
        @include opacity(1);
      }
    }
  }
}

.tipsy {
  font-size: 14px;
}
.tipsy-inner {
  padding: 0.6em 0.8em;
  text-align: left;
}

@import "responsive";
@import "html5boilerplate/optional";
@import "html5boilerplate/print";

{'fraction_non_alphanumeric': 0.14176065896007864, 'fraction_numerical': 0.042355033462816494, 'mean_word_length': 1.8660049627791564, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5649148', 'n_tokens_mistral': 17040, 'n_tokens_neox': 15714, 'n_words': 3310}