%h1-article {
  font-size: $size-h1s;

  @include media-breakpoint-down(md) {
    font-size: $size-h1--md;
  }
  @include media-breakpoint-down(sm) {
    font-size: $size-h1--sm;
  }
}

%h1 {
  font-size: $size-h1;

  @include media-breakpoint-down(md) {
    font-size: $size-h1--md;
  }
  @include media-breakpoint-down(sm) {
    font-size: $size-h1--sm;
  }
}

[dir=ltr] {
  @media (min-width: 992px) {
    .offset-lg-1 {
      margin-right: 8.33333%;
      margin-left: auto;
    }
  }

}

@include media-breakpoint-down(xs) {
  .col-xs-12 + .col-xs-12, .col-12 + .col-12 {
    padding-top: 3rem;
  }
}

._header-offset {
  padding-top: 12rem;
}

%stroke {
  -webkit-text-stroke: 1px currentColor;
}

.section-bg {
  @include section-overlay-mod(dark, linear-gradient(238deg, #000755 0%, #0078E1 100%), 1, multiply);
  @include section-overlay-mod(dark-cyan, linear-gradient(-78deg, #005122 0%, #000755 100%), 0.8, darken);
  @include section-overlay-mod(cyan, linear-gradient(137deg, #429147 0%, #165C99B8 100%), 1, normal);
  @include section-overlay-mod(magenta,  linear-gradient(279deg, #F07118A8 0%, rgba(105, 54, 58, 0.88) 36%, #000755 100%), 0.8, multiply);
  @include section-overlay-mod(hero-reverse, linear-gradient(263deg, #F07118A8 0%, #000755 100%), 1, normal);
  @include section-overlay-mod(blue, #000755, 0.63, normal);
}


.s-content-section {
  &.section + .s-content-section.section {
    padding-top: 0;
  }
}
.s-categories{
  >.container{
    @include media-breakpoint-down(md){
      >.row{
        margin: 0;
      }
      .cat-box.m-white{
        &:after{
          right:0;
        }
      }
    }
    @include media-breakpoint-down(sm){
      .col-6{
        padding: 0;
      }
      .cat-box {
        padding-bottom: 60vh;
        &.m-primary:after{
          border-bottom-width: 60vh;
          border-left-width: 93vw;;
        }
        &.m-white{
          .caption{
            margin-left: -10px;
          }
          &:after{
            border-right-width: 93vw;
            border-top-width: 60vh;
          }

        }
        .caption{
          top: 40%;
          h3{
            font-size: 3.5rem;
          }
        }
      }
    }
  }
}
/* The animation code */

.cat-box{
  padding-bottom: 100%;
  position: relative;
  animation-duration: 1.52s;
  .caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
    animation-duration: 1.5s;
  }
  &.m-primary{
    animation-name: slideInLeftTop;
    &:after{
      content:'';
      position: absolute;
      border-bottom: calc(($container-width / 2) - 40px) solid #0000;
      border-left: calc($container-width - 45px) solid $color-primary;
      border-right: 50vw solid #0000;
      top: 0;
      left: 0;
      z-index: 1;
      @include media-breakpoint-only(lg){
        border-bottom: 42.5vw solid #0000;
        border-left: $container-width solid $color-primary;
      }

    }

  }

  .caption{
    animation-name: slideInLeft;
    h3{
      a{color:#fff;}
      font-size: 4.5rem;
      text-transform: uppercase;
    }
  }
  &.m-white{
    animation-name: slideInRightBottom;
    &:after{
      content:'';
      position: absolute;
      border-left: 50vw solid #0000;
      border-right: calc($container-width - 45px) solid #fff;
      border-top: calc(($container-width /2) - 40px)  solid #0000;
      top: 0;
      right: -18px;
      z-index: 1
    }
    .caption {
      transform:translate(-50%,12vh);
      animation-name: slideInRight;
    }
    h3{
      a{color: $color-primary;}
    }
  }
  @include media-breakpoint-down(lg){
    &.m-primary{
      &:after{
        border-bottom: 42.5vw solid transparent;
        border-left: 90vw solid $color-primary;
      }
    }
    &.m-white{
      &:after{
        border-right: 90vw solid #fff;
        border-top: 42.5vw solid transparent;
      }

    }
  }
}
@keyframes slideInLeftTop {
  from {left: -40px;top:-40px}
  to {left: 0; top: 0}
}
@keyframes slideInRightBottom {
  from {right: -40px; bottom: -40px}
  to {right: 0;bottom: 0}
}
@keyframes slideInLeft {
  from {left: 70%}
  to {left: 50%;}
}
@keyframes slideInRight {
  from {left: 30%}
  to {left: 50%;}
}
[class*="_border-line"] {
  position: relative;
  //padding-top: 2rem;
  //padding-bottom: 2rem;
  //border-top: 2.5rem solid;
  border-bottom: .5rem solid;

  &._border-line--thin {
    border-width: 2px;
  }

  &._border-line--medium {
    border-width: 3px;
  }

  &._border-top {
    border-bottom: 0;
  }

  &._border-bottom {
    border-top: 0;
  }

  @include media-breakpoint-down(xs) {
    border-bottom-width: 5px;
  }

}

._border-line {

  position: relative;
  //padding-bottom: 2rem;
  border-bottom: .5rem solid $color-green;

  &--red {
    border-color: $color-red;
  }

  &--blue {
    border-color: $color-blue;
  }

  &--green {
    border-color: $color-green;
  }

  &--pink {
    border-color: $color-pink;
  }

  &--orange {
    border-color: $color-orange;
  }

  &--dark {
    border-color: $color-darkgrey;
  }

  &--cyan {
    border-color: $color-cyan;
  }

  @include media-breakpoint-down(xs) {
    //padding-bottom: 20px;
    border-bottom-width: 5px;
  }

}

.nav-link {
  font-size: $size-p-medium;
  color: $color-blue;
  font-weight: 400;

  i, [class="icon"] {
    margin-left: .5rem;
    font-size: 70%;
  }
}

.s-cta {

  &.section-bg {
    //@include section-overlay(linear-gradient(108deg, #F07118A8 0%, #000755 100%), 1, multiply);
    @include section-overlay(linear-gradient(-108deg, #F07118A8 0%, #000755 100%), 0.6, normal);
  }

  //padding-top: $section-padding *1.8;
  //padding-bottom: $section-padding *1.8;

  .btn {
    min-width: $btn-min-width;
  }

  @include media-breakpoint-down(sm) {
    min-height: 32rem;
    display: flex;
    align-items: center;
  }

}

.b-dropdown {

  position: relative;
  width: 100%;

  &__header {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  &__btn {
    &:hover {
      text-decoration: none;
      color: #1d1d1d;
    }

    &:before {
      content: '';
      content: "\e900";
      @include iconmoon;
      font-size: 1rem;
      position: absolute;
      left: 1.5rem;
      top: 50%;
      transform: translateY(-50%);
    }

    &:active, &:focus {
      background: #fff;
      border: 1px solid $color-hr;
      outline: none;
      color: #1d1d1d;
    }

    @extend %bootres;
    position: relative;
    display: flex;
    cursor: pointer;
    align-items: center;
    -webkit-appearance: none;
    background: #fff;
    color: #1d1d1d;
    font-weight: 400;
    text-align: right;
    padding-left: 4rem;
    padding-right: 2rem;
    border: 1px solid $color-hr;
  }

  &__pane {

    &.is-active {
      opacity: 1;
      visibility: visible;
    }

    //display: none;
    box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.14);
    opacity: 0;
    visibility: hidden;
    z-index: 50;
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    margin-top: -1px;

    color: #1d1d1d;
    background: #fff;
    border-top: 1px solid $color-hr;
  }

  &__list {
    &-itm {
      &:last-of-type {
        border: none;
      }

      &.is-active, &:hover {
        background: #F1F1F1;
      }

      position: relative;
      padding: 1.2rem 2rem;
      //border-bottom: 1px solid $color-hr;
    }
  }

  [data-collapse-title] {
    &.is-active {
      background: #F1F1F1;
    }

    cursor: pointer;
    padding: 1.2rem 2rem;
    font-size: $size-h3;
  }

  [data-collapse-body] {
    .b-dropdown__list-itm {
      &:hover, &.is-active, &:focus {
        background: none;
      }
    }

    @include chexboxSize(2.8rem, 2.8rem, 2rem);
  }

}

.row-field {

  & + .row-field {
    &--btn {
      margin-top: 1.5rem;
    }

    margin-top: 1.2rem;
  }

  input:not([type-submit]):not([type=checkbox]):not([type=radio]) {
    margin-bottom: 0;
    border: 1px solid #868686;
    border-radius: 3px;
    background: rgba(#f1f1f1, .32);
  }

  &--btn {
    margin-top: 1.5rem;
  }

  &--group {
    display: flex;
    align-items: center;

    .row-field {
      &__col {
        //flex: auto;
      }
    }

  }

  label {
    display: block;
    color: #7C7C7C;
    font-size: 1.4rem;
    margin-bottom: .5rem;
  }

  .input-group {
    //display: flex;
    position: relative;

    [class^="icon-"] {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 1.5rem;
      font-size: 1.5rem;
      pointer-events: none;
      color: $color-blue;
    }

    .icon-lock {
      font-size: 1.8rem;
    }

    [class^="icon-"] + input:not([type-submit]) {
      padding-left: 4rem;
    }
  }

}

.more-link-icn {
  &:hover {
    color: #fff;
    background: darken($color-secondary, 5%);

  }

  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background: $color-secondary;
  width: 4.9rem;
  height: 4.5rem;
  font-size: 2rem;
  @include nodecor;
}

.b-box {

  &.m-grey {
    background: $color-grey;
  }

  &.m-grey-dark {
    background: darken($color-grey, 5%);
  }

  &.m-transparent {
    background: transparent;
  }

  position: relative;
  background: $box-bg;

  &._border-line {
    .b-box__footer {
      margin-bottom: -0.5rem;
    }
  }

  &__ribbon {

    position: absolute;
    z-index: 5;
    right: 0;
    top: 2rem;

    &-itm, .b-ribbon {
      &._blue {
        background-color: $color-blue;
        color: #fff;
      }

      &._blue-light {
        background-color: $color-blue-light;
        color: #fff;
      }

      &._red {
        background-color: $color-red;
        color: #fff;
      }

      &._green {
        background-color: $color-green;
        color: #fff;
      }

      font-size: $font-size-body;
      letter-spacing: -0.32px;
      padding: .4rem .6rem .3rem 1.2rem;
      border-radius: 2rem 0 0 2rem;
    }
  }

  &__icn {
    img, svg {
      flex-basis: 0;
      max-width: 10.6rem;
      max-height: 10.6rem;
      object-fit: contain;
    }

    svg {
      flex-basis: auto;
    }

    min-height: 10.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  &__title {
    font-size: $box-size-title;

    &, a {
      color: $box-color-title;
    }

    //margin-bottom:0;
  }

  &__body {
    padding: $box-padding;
    background: $box-bg;
    font-size: $box-size-text;
    color: $box-color-text;

    .b-box__pic, .b-box__icn {
      margin-bottom: 2rem;
    }
  }

  &__footer {
    line-height: 1;
    font-size: 0;
  }

  &__txt {
    font-size: $box-size-text;
    padding-left: 22%;
    padding-right: 22%;

    p {
      font-size: 100%;
    }
  }

  p {
    line-height: 1.1;
    font-size: $box-size-text;
  }

  //mod
  &--card {

    &.has-hover {
      &:hover {
        .b-box__body {
          opacity: .6;
        }
      }

      .b-box__body {
        transition: opacity .2s ease;
      }
    }

    .b-box {
      &__pic {
        margin-bottom: 2rem;

        .responsive-media {
          > img {
            object-fit: contain;
          }
        }
      }

      &__title {
        font-size: 1.8rem;
      }
    }

    @at-root .card_spilt & {

      .b-box__body {
        padding-bottom: 4rem;
      }

      .b-box-pic {
        margin-bottom: 4rem;
      }

      .b-box__title {
        margin-bottom: 0;
        font-size: 2.4rem;
        font-weight: 700;
      }

      .b-box__title, .b-box__txt {
        text-align: initial;
      }

      .b-box__txt {
        padding-left: 0;
        padding-right: 0;

        p {
          line-height: 1.3;
        }

      }

      @include media-breakpoint-up(md) {
        height: 100%;
      }
    }
  }

  &--promo {

    min-height: 33rem;

    .b-box {
      &__icn {
        min-height: 14rem;

        img, svg {
          width: 60%;
          flex-basis: auto;
          max-width: 14rem;
          max-height: 14rem;
        }
      }

      &__title {
        font-size: 2.3rem;
        line-height: 1.21;
      }
    }

    @media screen and (max-width: 500px) {
      min-height: 0;
    }
  }

}


.responsive-media {
  position: relative;
  height: 0;
  padding-bottom: $post-image-ratio;

  > img {
    @include absoluteStretch;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  &._blog-post {
    padding-bottom: $blog-post-image-ratio;
  }
}

.b-box-list {
  @media screen and (max-width: 500px) {
    .col-6, [class^="col-"] {
      flex: 0 1 auto;

    }
    .b-box--promo {
      min-height: 0;
    }
  }

  &.card_spilt {
    > [class^=col] {
      padding-bottom: 5rem;
      padding-left: 35px;
      padding-right: 35px;
    }
  }
}

.b-box-post {

  //mode
  &--inline {

    @at-root .b-box-post-list & {
      max-width: 100%;
      min-height: 29.7rem;
    }

    display: flex;

    .b-box-post__body {
      order: -1;
      display: flex;
      flex-direction: column;
    }

    .b-box-post__title {
      margin-bottom: 1rem;
    }

    .b-box-post__txt {
      line-height: 1.875;

      p {
        line-height: 1.875;
      }
    }

    .b-box-post__pic {
      //flex-grow: 1;
      flex: 0 0 50%;
      max-width: 50%;

      .responsive-media {
        height: 100%;
        padding: 0;

        > img {
          height: 100%;
        }
      }
    }
  }

  .responsive-media {
    position: relative;
    height: 0;
    background-color: $post-bg-image;
    padding-bottom: $post-image-ratio;

    > img {
      @include absoluteStretch;
      object-fit: cover;
    }
  }

  &-list {
    .b-box-post {
      max-width: 37.4rem;
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 4rem;
    }
  }

  &__pic {

  }

  &__title {
    font-size: $post-size-title;
    color: $post-color-title;
    //margin-bottom:0;
  }

  &__body {
    padding: $post-padding;
    background: $post-bg;
    font-size: $post-size-text;
    color: $post-color-text;
  }

  &__txt {
    font-size: $post-size-text;

    p {
      font-size: 100%;
    }
  }

  .post-link {

    &:hover {
      color: $color-link-active;
    }

    &.has-icn {
      display: flex;
      //flex:  0 0 100%;
      align-items: center;

      .icn-link {
        display: inline-block;
        min-width: 2rem;
        text-align: center;
        margin-right: auto;
        font-size: 125%;
        font-weight: 700;
      }
    }

    color: $color-heading;
    font-size: 1.6rem;
  }

  p {
    line-height: 1.1;
    font-size: $post-size-text;
  }

  .more-link {
    &:hover {
      //opacity: .8;
      background: $color-secondary;
    }

    @include nodecor;
    color: #fff;
    border-radius: 1.9rem;
    background: $color-blue;
    padding: .5rem 1.6rem .7rem;
    font-size: 1.6rem;
    font-weight: 500;
  }

}

$input: 'input:not([type=submit]):not([type=checbox]):not([type=radio]):not([type=range])';
.b-form {

  &--inline {
    .b-form__body, form, .gform_fields {
      display: flex;
      align-items: baseline;
      @include media-breakpoint-down(sm) {
        flex-direction: column;
        align-items: center;
      }
    }
  }

  .btn, button {
    min-width: $btn-min-width;
    margin-right: 0.5rem;
  }

  #{$input} {
    border-width: 3px;
    border-color: $color-blue;
    border-radius: 4rem;
    height: $input-height;
    line-height: $input-height;
    @include media-breakpoint-up(xl) {
      min-width: 32rem;
    }
  }

  &__title {
  }

  .form-title {
    margin-bottom: 0;
    font-weight: 700;
  }

  &__body, .gform_fields {
    .gfield {
      //margin-bottom: 0;
      margin: .5rem;
    }
  }

  @include media-breakpoint-down(md) {
    &__title {
      flex: 0 0 100%;
      max-width: 100%;
      text-align: center;
      margin-bottom: 3rem;
    }
    &__body, .gform_wrappwe.gform_fields {
      flex: 0 0 100%;
      max-width: 100%;
    }
  }

  @include media-breakpoint-down(sm) {
    &__body, .gform_fields {
      input {
        margin-bottom: 1.5rem;

      }

      #{$input} {
        max-width: 40rem;
      }
    }
  }

}

.s-home-catalog {
  &__list {

    justify-content: center;

    .b-box-catalog {
      min-width: 18rem;
      max-width: 24rem;
    }


    .col, [class^="col"] {
      flex: 0 1 auto;
      flex: 1;
      //min-width:0;
      //width:auto;
      max-width: 24rem;
    }

    @include media-breakpoint-down(xs) {
      .col, [class^="col"] {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
      }
      .b-box-catalog {
        min-width: 10rem;

        &__body {
          padding: 1rem;
          padding-top: 0 !important;
        }

        &__pic, .b-box__icn {
          svg, img {
            max-width: 7rem;
            max-height: 7rem;
          }
        }
      }
    }
  }
}

.b-box-catalog {

  &--icn {
    .b-box-catalog__body {
      padding-top: 3rem;
    }

    .b-box-catalog__pic {
      margin-bottom: 2rem;
    }
  }

  &__body {
    padding: 5rem 3rem 4rem;
    text-align: center;
  }

  &__pic, &__icn {
    margin-bottom: 1.4rem;

    svg path, svg g {
      fill: currentColor;
    }

    svg #flash {
      stroke: currentColor;
    }
  }

  &__title {
    font-size: 2.1rem;
    letter-spacing: -0.53px;
    line-height: 1.19;
    font-weight: $font-weight-title;

    &-link {
      &:hover {
        border-color: $color-secondary;
      }

      display: inline-block;
      padding-bottom: .4rem;
      border-bottom: 2px solid transparent;
    }
  }

  &__footer {
    line-height: 1;
  }

  &__link {
    &:hover {
      background: $color-secondary;
      color: #fff;
    }

    @include nodecor;
    display: flex;
    background: lighten($color-secondary, 10%);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 400;

    i, [class="icon"] {
      padding: .75rem 2rem;
      background: $color-secondary;
      flex: 0 1 auto;
      font-size: 1.4rem;
    }

    > span {
      padding-top: .5rem;
      padding-bottom: .5rem;
      flex: 1;
      align-self: center;
      text-align: center;
    }
  }
}