<commit_before>//= require normalize-rails
//= 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";

$navHeight: 3.75em;

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;
}

$headinerCircleSize: 3em;
%section-header {
  padding-left:50%;
  z-index: 2;
  h2 {
    position: relative;
    padding-left: $headinerCircleSize*0.7;
    text-transform: lowercase;
    letter-spacing: -0.03em;
    text-align: left;
    color:$colorSecondary;
    height: $headinerCircleSize;
    line-height: $headinerCircleSize*0.9;
    font-size: 2em;
    &:before {
      width:$headinerCircleSize;
      height:$headinerCircleSize;
      line-height: $headinerCircleSize;
      text-align: center;
      content: "1";
      background: $colorSecondary;
      color:$colorContrastToMain;
      font-weight: bold;
      position: absolute;
      top:0;
      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 {
  overflow: hidden;
  min-height: 300px;
  background-color: #2f4d51;
  @include background-size(cover);
  header {
    text-align: center;
    padding: 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;
  }
  div.area-links {
    text-align: center;
    .button {
      background: #108eba;
      color: white;
      text-decoration: none;
      font-size: 1.5em;
      padding: 1em;
      &.active {
        background: white;
        color: #607d89;
        padding: 1.1em;
      }
    }
  }
}

.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: 4em;
  position: relative;
  header {
    @extend %section-header;
  }
  ul {
    @extend %arrow-list;
  }
}

.argumentation > section#solution {
  @extend .clearfix;
  @extend %layout;
  position: relative;
  max-width: 37.5em;
  padding-top: 4em;
  &: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: 4em;
  }
  > .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: 4em;
  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: 0.8em;
    line-height: 1.3em;
    position: relative;
    text-align: center;
    padding: 0 0 3em 0;
    .content {
      @extend .clearfix;
      max-width: 30em;
      margin: 0 auto;
      position: relative;
    }
    .essence {
      position: relative;
      text-align: left;
      width: 70%;
      left: 50%;
      margin-left: -5em;
    }
    &:before, &:after {
      @extend %line;
    }
    &:after {
      @extend %line3;
    }
    .line1 {
      @extend %line1;
    }
    .connect {
      display: block;
      z-index: 1;
      content: '';
      width: 25%;
      right: 12%;
      bottom: 101%;
      position: absolute;
      padding-bottom: 2px;

      &:after {
        position: relative;
        top: 1.575em;
        height: 3.15em;
        content: "";
        display: block;
        border: 1px solid $colorSecondaryThinPixel;
        border-top: 0;
        border-left: 0;
        @include border-bottom-right-radius(1em);
        //      padding-top: 0.7375em;
        //      padding-bottom: 1px;
      }
    }
    .point {
      display: block;
      z-index: 1;
      right: 2%;
      color: $colorContrastToMain;
      font-weight: bold;
      background: $colorSecondary;
      top: -1%;
      position: absolute;
      font-size: 1.5em;
      height: 1.5em;
      width: 1.5em;
      line-height: 1.5em;
      border: 0.3em solid $white;
      @include border-radius(50%);
      &:after {
        content: "";
        display: block;
        position: absolute;
        top: 0.65em;
        right: -0.3em;
        height: 1px;
        border-bottom: 1px solid $colorSecondaryThinPixel;
        width: 0.3em;
      }
    }
    .cover {
      position: relative;
      margin-bottom: 2em;
    }
    .img {
      display: inline-block;
      z-index: 2;
      position: relative;
    }
    img {
      width: 100%;;
      max-width: 280px;
      display: block;
      position: relative;
      z-index: 1;
    }
    &.requirements {
      .connect {
        right:13%;
      }
      .cover {
        margin-bottom: 1em;
      }
    }
    &.process {
      &:before {
        display: none;
      }
    }
    &.data {
      &:before, &:after {
        display: none;
      }
      .point {
        top: -6%;
        right: 0;
      }
      .connect {
        bottom: 106%;
        width: 30%;
        padding-bottom: 1px;
        right: 11%;
        &:before {
          z-index: 0;
          content: "";
          position: absolute;
          height: 100%;
          right: 0;
          bottom: -1.6em;
          width: 1px;
          background: $white;
        }
      }
      .quick-info {
        top:-11em;
        right: 58%
      }
      .essence {
        text-align: left;
        position: relative;
        left: 50%;
        width: 50%;
        padding: 5% 0 0 7%;
        margin-top: -9.5em;
        margin-left:0;
      }
    }
  }
}



.argumentation > section#myths {
  max-width: 37.5em;
  margin-top: 2em;
  padding-top: 4em;
  padding-bottom: 4em;<commit_msg>Rearrange the diagrams and text of the solution offer<commit_after>//= require normalize-rails
//= 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";

$navHeight: 3.75em;

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;
}

$headinerCircleSize: 3em;
%section-header {
  padding-left:50%;
  z-index: 2;
  h2 {
    position: relative;
    padding-left: $headinerCircleSize*0.7;
    text-transform: lowercase;
    letter-spacing: -0.03em;
    text-align: left;
    color:$colorSecondary;
    height: $headinerCircleSize;
    line-height: $headinerCircleSize*0.9;
    font-size: 2em;
    &:before {
      width:$headinerCircleSize;
      height:$headinerCircleSize;
      line-height: $headinerCircleSize;
      text-align: center;
      content: "1";
      background: $colorSecondary;
      color:$colorContrastToMain;
      font-weight: bold;
      position: absolute;
      top:0;
      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 {
  overflow: hidden;
  min-height: 300px;
  background-color: #2f4d51;
  @include background-size(cover);
  header {
    text-align: center;
    padding: 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;
  }
  div.area-links {
    text-align: center;
    .button {
      background: #108eba;
      color: white;
      text-decoration: none;
      font-size: 1.5em;
      padding: 1em;
      &.active {
        background: white;
        color: #607d89;
        padding: 1.1em;
      }
    }
  }
}

.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: 4em;
  position: relative;
  header {
    @extend %section-header;
  }
  ul {
    @extend %arrow-list;
  }
}

.argumentation > section#solution {
  @extend .clearfix;
  @extend %layout;
  position: relative;
  max-width: 37.5em;
  padding-top: 4em;
  &: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: 4em;
  }
  > .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: 4em;
  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;
    .content {
      position: relative;
      margin-left: 320px;
      max-width: 19em;
      padding-top: 3em;
      font-size: 0.8em;
    }
    .essence {
      position: relative;
      text-align: left;
    }
    &:before, &:after {
      @extend %line;
    }
    &:after {
      @extend %line3;
    }
    .line1 {
      @extend %line1;
    }
    .connect {
      display: block;
      z-index: 1;
      content: '';
      bottom: 101.7%;
      position: absolute;
      padding-bottom: 2px;
      width: 215%;

      &:after {
        position: relative;
        top: 1.575em;
        height: 3.15em;
        content: "";
        display: block;
        border: 1px solid $colorSecondaryThinPixel;
        border-top: 0;
        border-left: 0;
        @include border-bottom-right-radius(1em);
        //      padding-top: 0.7375em;
        //      padding-bottom: 1px;
      }
    }
    .cover {
      position: relative;
      margin-bottom: 2em;
      float: left;
    }
    .img {
      display: inline-block;
      z-index: 2;
      position: relative;
      img {
        width: 100%;;
        max-width: 250px;
        display: block;
        position: relative;
        z-index: 1;
        opacity: 0.2;
        padding-top: 25%;
      }
    }
    .point {
      display: block;
      z-index: 1;
      right: -10%;
      color: $colorContrastToMain;
      font-weight: bold;
      background: $colorSecondary;
      top: -1%;
      position: absolute;
      font-size: 1.4em;
      height: 1.5em;
      width: 1.5em;
      line-height: 1.5em;
      border: 0.3em solid $white;
      @include border-radius(50%);
      &:after {
        content: "";
        display: block;
        position: absolute;
        top: 0.65em;
        right: -0.3em;
        height: 1px;
        border-bottom: 1px solid $colorSecondaryThinPixel;
        width: 0.3em;
      }
    }
    $baseLineWidth: -213%;
    $spacingBetweenLines: 3.7%;
    &.requirements {
      .connect {
        right: $baseLineWidth;
      }
    }
    &.process {
      .connect {
        right: $baseLineWidth - $spacingBetweenLines;
      }
      &:before {
        display: none;
      }
    }
    &.data {
      .connect {
        right: $baseLineWidth - 2 * $spacingBetweenLines;
      }
      &:before, &:after {
        display: none;
      }
    }
  }
}



.argumentation > section#myths {
  max-width: 37.5em;
  margin-top: 2em;
  padding-top: 4em;
  padding-bottom: 4em;
{'fraction_non_alphanumeric': 0.1391990419499137, 'fraction_numerical': 0.03543376422105597, 'mean_word_length': 1.8658524275764612, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 41, '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': '5649149', 'n_tokens_mistral': 10903, 'n_tokens_neox': 10135, 'n_words': 2082}