@import url("https://fonts.googleapis.com/css?family=Titillium+Web:400,700&display=swap");
*,
*::before,
*::after {
  box-sizing: border-box; }

body {
  font-family: "Titillium Web", sans-serif; }

/* Carousel */
.carouselN {
  min-height: 93vh;
  display: grid;
  grid-template-rows: 1fr 3fr 1.5fr;
  grid-template-columns: 50px 1fr 1fr 1fr 1fr 50px;
  row-gap: 2vh;
  position: relative; }

.progress-bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 5px;
  width: 100%; }
  .progress-bar__fill {
    width: 0;
    height: inherit;
    background: #00ff21;
    transition: all 0.16s; }
  .progress-bar--primary {
    z-index: 2; }

.main-post-wrapper {
  grid-row: 1 / 4;
  grid-column: 1 / 7;
  position: relative; }

.slides {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden; }

.main-post {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  /*&__description {
        font-weight: 700;
        font-size: 2em;
        line-height: 1.25;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
        overflow: hidden;
    }*/ }
  .main-post__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    bottom: 0; }
    .main-post__image img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: fill; }
    .main-post__image::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
  .main-post__content {
    position: absolute;
    top: 40%;
    left: 4%;
    transform: translateY(-40%);
    color: #fff;
    width: 90%; }
  .main-post__tag-wrapper {
    margin: 0;
    display: inline-flex;
    overflow: hidden; }
  .main-post__tag {
    font-size: 0.95em;
    background: #0c6121;
    padding: 8px 8px; }
  .main-post__title {
    font-weight: 700;
    font-size: 1.95em;
    line-height: 1.25;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    overflow: hidden; }
  .main-post__link {
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: inline-flex;
    align-items: center; }
    .main-post__link-text {
      font-size: 0.9em; }
    .main-post__link-icon--arrow {
      margin-left: 12px; }
    .main-post__link-icon--play-btn {
      margin-right: 12px; }

.main-post__link:hover .main-post__link-text,
.main-post__link:hover .main-post__link-icon--arrow path {
  color: #00ff21;
  stroke: #00ff21; }

.main-post--active {
  top: 0;
  z-index: 1;
  transition: top 0.9s 0.4s ease-out; }

.main-post--not-active {
  top: 100%;
  z-index: 0;
  transition: top 0.75s 2s; }

.main-post.main-post--active .main-post__tag-wrapper {
  width: 25%;
  transition: all 0.98s 1.9s; }

.main-post.main-post--not-active .main-post__tag-wrapper {
  width: 0;
  transition: width 0.3s 0.2s; }

.main-post.main-post--active .main-post__title {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s 1.42s, transform 0.5s 1.4s; }

.main-post.main-post--not-active .main-post__title {
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.2s 0.35s, opacity 0.5s 0.2s; }

.main-post.main-post--active .main-post__link {
  opacity: 1;
  transition: opacity 0.9s 2.2s; }

.main-post.main-post--not-active .main-post__link {
  opacity: 0;
  transition: opacity 0.5s 0.2s; }

.posts-wrapper {
  grid-row: 3 / 4;
  grid-column: 3 / 6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 14px;
  z-index: 1; }

.post {
  background: rgba(14, 13, 14, 0.6);
  opacity: 0.3;
  color: #fff;
  position: relative;
  padding: 16px 20px;
  /*&__description {
        font-weight: 400;
        font-size: 1em;
        line-height: 1.5;
    }*/ }
  .post__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8em; }
  .post__tag {
    color: #80837e; }
  .post__title {
    font-weight: 400;
    font-size: 0.95em;
    line-height: 1.5; }
  .post--active {
    opacity: 1;
    background: rgba(14, 13, 14, 0.75); }
  .post:not(.post--active) {
    pointer-events: none; }

.hide-on-mobile {
  display: none; }

@media screen and (min-width: 768px) {
  .main-post__title {
    font-size: 2.9em; }
  /*.main-post__description {
        font-size: 3.2em;
    }*/ }

@media screen and (min-width: 1024px) {
  .hide-on-mobile {
    display: grid; }
  .posts-wrapper {
    grid-column: 2 / 6; }
  .hide-on-desktop {
    display: none; } }

@media screen and (min-width: 1440px) {
  .main-post__content {
    width: 45%; }
  .posts-wrapper {
    grid-column: 3 / 6; } }

@media (min-width: 768px) and (max-width: 991px) {
  .carouselN {
    min-height: 50vh; }
  /*.main-post__content{
        top: 40%;
    }*/ }

@media (min-width: 411px) and (max-width: 767px) {
  .carouselN {
    min-height: 50vh; }
  /*.main-post__content {
        top: 40%;
    }*/ }

@media (min-width: 360px) and (max-width: 410px) {
  .carouselN {
    min-height: 50vh; }
  /*.main-post__content {
        top: 40%;
    }*/ }

@media (min-width: 320px) and (max-width: 359px) {
  .carouselN {
    min-height: 50vh; }
  /*.main-post__content {
        top: 40%;
    }*/ }

/* CheckBox */
/*.styled-input-single {
    position: relative;
    padding: 20px 0 20px 40px;
    text-align: left;

    label {
        cursor: pointer;

        &:before,
        &:after {
            content: '';
            position: absolute;
            top: 50%;
            border-radius: 50%;
        }

        &:before {
            left: 0;
            width: 30px;
            height: 30px;
            margin: -15px 0 0;
            background: #f7f7f7;
            box-shadow: 0 0 1px grey;
        }

        &:after {
            left: 5px;
            width: 20px;
            height: 20px;
            margin: -10px 0 0;
            opacity: 0;
            background: #37b2b2;
            transform: translate3d(-40px, 0, 0) scale(0.5);
            transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
        }
    }

    input[type="radio"],
    input[type="checkbox"] {
        position: absolute;
        top: 0;
        left: -9999px;
        visibility: hidden;

        &:checked + label {
            &:before {
            }

            &:after {
                transform: translate3d(0, 0, 0);
                opacity: 1;
            }
        }
    }
}

.styled-input--square {
    label {
        &:before,
        &:after {
            border-radius: 0;
        }
    }
}

.styled-input--rounded {
    label {
        &:before {
            border-radius: 10px;
        }

        &:after {
            border-radius: 6px;
        }
    }
}

.styled-input--diamond {
    .styled-input-single {
        padding-left: 45px;
    }

    label {
        &:before,
        &:after {
            border-radius: 0;
        }

        &:before {
            transform: rotate(45deg);
        }
    }

    input[type="radio"],
    input[type="checkbox"] {

        &:checked + label {
            &:after {
                transform: rotate(45deg);
                opacity: 1;
            }
        }
    }
}*/
/* --------------------------------------------------------------------------------------------------- */
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
  input[type='checkbox'],
  input[type='radio'] {
    --active: #275EFE;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, 0.3);
    --border: #BBC1E1;
    --border-hover: #275EFE;
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 20px;
    outline: none;
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0;
    cursor: pointer;
    border: 1px solid var(--bc, var(--border));
    background: var(--b, var(--background));
    transition: background .3s, border-color .3s, box-shadow .2s; }
    input[type='checkbox']:after,
    input[type='radio']:after {
      content: '';
      display: block;
      left: 0;
      top: 0;
      position: absolute;
      transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s); }
    input[type='checkbox']:checked,
    input[type='radio']:checked {
      --b: var(--active);
      --bc: var(--active);
      --d-o: .3s;
      --d-t: .6s;
      --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2); }
    input[type='checkbox']:disabled,
    input[type='radio']:disabled {
      --b: var(--disabled);
      cursor: not-allowed;
      opacity: 1;
      --border-color: whitesmoke;
      --border-color-checked: whitesmoke;
      background: #0c6121; }
      input[type='checkbox']:disabled:checked,
      input[type='radio']:disabled:checked {
        --b: var(--disabled-inner);
        --bc: var(--border); }
      input[type='checkbox']:disabled + label,
      input[type='radio']:disabled + label {
        cursor: not-allowed; }
    input[type='checkbox']:hover:not(:checked):not(:disabled),
    input[type='radio']:hover:not(:checked):not(:disabled) {
      --bc: var(--border-hover); }
    input[type='checkbox']:focus,
    input[type='radio']:focus {
      box-shadow: 0 0 0 var(--focus);
      outline: 0; }
    input[type='checkbox']:not(.switch),
    input[type='radio']:not(.switch) {
      width: 21px; }
      input[type='checkbox']:not(.switch):after,
      input[type='radio']:not(.switch):after {
        opacity: var(--o, 0); }
      input[type='checkbox']:not(.switch):checked,
      input[type='radio']:not(.switch):checked {
        --o: 1; }
    input[type='checkbox'] + label,
    input[type='radio'] + label {
      font-size: 14px;
      line-height: 21px;
      display: inline-block;
      vertical-align: top;
      cursor: pointer;
      margin-left: 4px; }
  input[type='checkbox']:not(.switch) {
    border-radius: 7px; }
    input[type='checkbox']:not(.switch):after {
      width: 5px;
      height: 9px;
      border: 2px solid var(--active-inner);
      border-top: 0;
      border-left: 0;
      left: 7px;
      top: 4px;
      transform: rotate(var(--r, 20deg)); }
    input[type='checkbox']:not(.switch):checked {
      --r: 43deg; }
  input[type='checkbox'].switch {
    width: 38px;
    border-radius: 11px; }
    input[type='checkbox'].switch:after {
      left: 2px;
      top: 2px;
      border-radius: 50%;
      width: 15px;
      height: 15px;
      background: var(--ab, var(--border));
      transform: translateX(var(--x, 0)); }
    input[type='checkbox'].switch:checked {
      --ab: var(--active-inner);
      --x: 17px; }
    input[type='checkbox'].switch:disabled:not(:checked):after {
      opacity: .6; }
  input[type='radio'] {
    border-radius: 50%; }
    input[type='radio']:after {
      width: 19px;
      height: 19px;
      border-radius: 50%;
      background: var(--active-inner);
      opacity: 0;
      transform: scale(var(--s, 0.7)); }
    input[type='radio']:checked {
      --s: .5; } }

/* ------------------------------------------------------------------------------------------------ */
/*.checkbox {
    --background: #fff;
    --border: #D1D6EE;
    --border-hover: #BBC1E1;
    --border-active: #1E2235;
    --tick: #fff;
    position: relative;

    input,
    svg {
        width: 21px;
        height: 21px;
        display: block;
    }

    input {
        -webkit-appearance: none;
        -moz-appearance: none;
        position: relative;
        outline: none;
        background: var(--background);
        border: none;
        margin: 0;
        padding: 0;
        cursor: pointer;
        border-radius: 4px;
        transition: box-shadow .3s;
        box-shadow: inset 0 0 0 var(--s, 1px) var(--b, var(--border));

        &:hover {
            --s: 2px;
            --b: var(--border-hover);
        }

        &:checked {
            --b: var(--border-active);
        }
    }

    svg {
        pointer-events: none;
        fill: none;
        stroke-width: 2px;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke: var(--stroke, var(--border-active));
        position: absolute;
        top: 0;
        left: 0;
        width: 21px;
        height: 21px;
        transform: scale(var(--scale, 1)) translateZ(0);
    }

    &.path {
        input {
            &:checked {
                --s: 2px;
                transition-delay: .4s;

                & + svg {
                    --a: 16.1 86.12;
                    --o: 102.22;
                }
            }
        }

        svg {
            stroke-dasharray: var(--a, 86.12);
            stroke-dashoffset: var(--o, 86.12);
            transition: stroke-dasharray .6s, stroke-dashoffset .6s;
        }
    }

    &.bounce {
        --stroke: var(--tick);

        input {
            &:checked {
                --s: 11px;

                & + svg {
                    animation: bounce .4s linear forwards .2s;
                }
            }
        }

        svg {
            --scale: 0;
        }
    }
}

@keyframes bounce {
    50% {
        transform: scale(1.2);
    }

    75% {
        transform: scale(.9);
    }

    100% {
        transform: scale(1);
    }
}
*/