*,
*::before,
*::after {
  margin: 0;
  padding: 0; }

html {
  box-sizing: border-box;
  font-size: 112.5%;
  scroll-behavior: smooth; }
  @media (max-width: 56.25em) {
    html {
      /*and (orientation: landscape) */
      font-size: 106.25%; } }
  @media (max-width: 43.75em) {
    html {
      font-size: 100%; } }

.body {
  width: 100%;
  color: #f2f2f2;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .05em; }

.image {
  background-image: url("../images/background.png");
  background-color: #0e0f10;
  background-position: right;
  background-size: cover; }

.mb {
  margin-bottom: 4.16rem; }
  @media (max-width: 56.25em) {
    .mb {
      /*and (orientation: landscape) */
      margin-bottom: 3.16rem; } }

.heading-primary, .heading-secondary {
  font-family: "Barlow Semi Condensed", sans-serif;
  color: #f2f2f2;
  text-transform: uppercase; }

.about__text p, .features__text p, .features__feature > p, .hero__info, .story__text p, .video__text p {
  font-family: "Barlow Semi Condensed", sans-serif;
  color: #f2f2f2;
  margin-bottom: 1.66rem; }
  .about__text p span, .features__text p span, .features__feature > p span, .hero__info span, .story__text p span, .video__text p span {
    letter-spacing: 1px; }

.heading-primary {
  font-size: 2.7rem;
  font-weight: 600;
  margin-block-end: 1.11rem; }
  .heading-primary span:first-of-type {
    letter-spacing: .08em; }
  .heading-primary span:last-of-type {
    color: #f1c40f;
    letter-spacing: 0;
    font-weight: 400; }
  @media (max-width: 65em) {
    .heading-primary {
      font-size: 2.5rem; } }
  @media (max-width: 56.25em) {
    .heading-primary {
      /*and (orientation: landscape) */
      font-size: 2.1rem; } }

.heading-secondary {
  font-size: 1.66rem;
  text-align: center;
  font-weight: 600;
  display: grid;
  grid-template-columns: 3.33rem max-content 3.33rem;
  grid-column-gap: 1.5rem;
  align-items: center;
  justify-content: center; }
  .heading-secondary::before, .heading-secondary::after {
    content: "";
    height: 2px;
    display: block;
    background-color: #f1c40f; }
  @media (max-width: 37.5em) {
    .heading-secondary {
      grid-template-columns: 2rem max-content 2rem;
      grid-column-gap: .9rem; } }

.heading-tertiary {
  font-size: 1.33rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #020202;
  padding-top: 2.77rem; }

.about {
  padding: 5.55rem 5.8rem 5rem; }
  .about__content, .about__content-vas {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-column-gap: 6rem; }
    .about__content-vas, .about__content-vas-vas {
      padding-top: 4rem;
      align-items: initial; }
    .about__content-vas img, .about__content-vas-vas img {
      height: 20vw;
      width: auto; }
      @media (max-width: 43.75em) {
        .about__content-vas img, .about__content-vas-vas img {
          height: 30vw;
          margin-left: calc(100% - 25vw); } }
      @media (max-width: 37.5em) {
        .about__content-vas img, .about__content-vas-vas img {
          margin-left: calc(100% - 30vw); } }
    @media (max-width: 56.25em) {
      .about__content, .about__content-vas {
        /*and (orientation: landscape) */
        grid-column-gap: 3rem; } }
  .about__text a:link,
  .about__text a:visited {
    text-decoration: none;
    color: #f2f2f2;
    font-style: italic;
    font-weight: 100; }
  .about__collage {
    justify-self: end;
    max-width: 23rem; }
    .about__collage img {
      display: block;
      width: 100%;
      opacity: 0.7;
      transition: transform 0.5s, opacity 0.5s, -webkit-transform 0.5s; }
    @media (max-width: 43.75em) {
      .about__collage {
        justify-self: center;
        margin-top: 2.5rem; } }
  .about__collage img:hover {
    opacity: 1;
    transform: scale(1.05); }
  .about__collage-vas img {
    display: block;
    width: 15vw; }
  @media (max-width: 71.87em) {
    .about {
      padding: 5rem 3rem; } }
  @media (max-width: 56.25em) {
    .about {
      /*and (orientation: landscape) */
      padding: 4rem 1rem; } }
  .about blockquote {
    font-style: italic; }
    .about blockquote p {
      margin-bottom: 1.66rem; }
  .about .dashed {
    width: 150px;
    border: 1px solid #f1c40f;
    margin: 4rem auto 0; }

.btn,
.btn:link,
.btn:visited {
  border: 1px solid #f2f2f2;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: .88rem;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  display: inline-block;
  text-transform: uppercase;
  color: #f2f2f2;
  transition: all .2s; }
  .btn:hover,
  .btn:link:hover,
  .btn:visited:hover {
    border: 1px solid #f1c40f; }
  .btn:hover #note,
  .btn:link:hover #note,
  .btn:visited:hover #note {
    animation-name: tada;
    animation-duration: 2s;
    animation-timing-function: ease-out;
    color: #f1c40f; }

#note {
  display: inline-block;
  margin-left: .6rem;
  font-size: 1.11rem; }

.contact {
  padding: 0 5.8rem 5rem; }
  .contact-title {
    display: grid;
    justify-content: center;
    grid-row-gap: 2.77rem;
    grid-column-gap: 1.1rem; }
    .contact-title h2 {
      text-transform: uppercase;
      font-weight: 600; }
      @media (max-width: 43.75em) {
        .contact-title h2 {
          font-size: 1.5rem;
          text-align: center; } }
    .contact-title img {
      width: 32px;
      grid-column: 2;
      transition: all .2s; }
      @media (max-width: 43.75em) {
        .contact-title img {
          width: 26px; } }
    .contact-title p {
      grid-column: span 2;
      text-align: center; }
    @media (max-width: 43.75em) {
      .contact-title {
        grid-row-gap: 2rem;
        grid-column-gap: 1rem; } }
  .contact__wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    justify-items: center;
    align-items: center; }
    @media (max-width: 43.75em) {
      .contact__wrapper {
        grid-row-gap: 2rem; } }
  .contact__nav {
    list-style-type: none; }
    .contact__nav img {
      margin-right: .83rem;
      width: 20px;
      height: auto; }
  .contact__item--info {
    display: flex;
    align-items: flex-end;
    margin-bottom: 1.11rem; }
    .contact__item--info a:link,
    .contact__item--info a:visited {
      text-decoration: none;
      color: #f2f2f2;
      font-size: .88rem; }
      .contact__item--info a:link::after,
      .contact__item--info a:visited::after {
        content: "";
        display: block;
        width: 0;
        height: 1px;
        background-color: #f1c40f;
        transition: width .3s; }
      .contact__item--info a:link:hover::after,
      .contact__item--info a:visited:hover::after {
        width: 100%; }
  .contact li:last-child {
    display: flex; }
  @media (max-width: 43.75em) {
    .contact ul:last-child {
      grid-column: 1 / -1; } }
  .contact ul:last-child img {
    width: 100%;
    height: auto;
    margin-right: 0; }
    @media (max-width: 56.25em) {
      .contact ul:last-child img {
        /*and (orientation: landscape) */
        width: 80%; } }
  .contact .facebook:hover {
    filter: invert(12%) sepia(73%) saturate(642%) hue-rotate(351deg) brightness(97%) contrast(95%); }
  .contact .instagram:hover {
    filter: invert(12%) sepia(73%) saturate(642%) hue-rotate(351deg) brightness(97%) contrast(95%); }
  .contact .boy:hover {
    filter: invert(12%) sepia(73%) saturate(642%) hue-rotate(351deg) brightness(97%) contrast(95%);
    transform: scale(1.2); }
  @media (max-width: 71.87em) {
    .contact {
      padding: 0 3rem 5rem; } }
  @media (max-width: 56.25em) {
    .contact {
      /*and (orientation: landscape) */
      padding: 0 1rem 3rem; } }

footer {
  background-image: url("../images/background.png");
  background-color: #0e0f10;
  padding: .9rem 0; }
  footer p {
    text-align: center;
    font-size: .77rem; }

.features {
  padding: 5.55rem 5.8rem 5rem; }
  .features h4 {
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 500; }
    @media (max-width: 29.9em) {
      .features h4 {
        text-align: center; } }
  .features__content {
    display: flex;
    justify-content: space-between; }
    @media (max-width: 29.9em) {
      .features__content {
        flex-direction: column; } }
  .features__text {
    flex-basis: 43%; }
  .features__feature {
    flex-basis: 40%; }
    .features__feature > p {
      margin-top: 1.11rem; }
  .features__box {
    display: flex;
    margin-bottom: .55rem; }
    .features__box p {
      margin-left: 10px; }
    @media (max-width: 29.9em) {
      .features__box {
        margin-left: 20%; } }
  @media (max-width: 71.87em) {
    .features {
      padding: 5rem 3rem; } }
  @media (max-width: 56.25em) {
    .features {
      /*and (orientation: landscape) */
      padding: 4rem 1rem; } }
  @media (max-width: 43.75em) {
    .features {
      padding: 3rem 1rem; } }

.feature-image {
  background-image: url("../images/vasko_zuti-min.png");
  background-color: #0e0f10;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed; }
  @media (max-width: 65em) {
    .feature-image {
      background-image: url("../images/vasko-no-yellow-min.png");
      background-color: #0e0f10;
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: scroll; } }

.hero {
  padding: 1.5rem 5.8rem; }
  .hero__sub {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: center;
    grid-column-gap: 3rem;
    margin-top: 3.33rem; }
    @media (max-width: 56.25em) {
      .hero__sub {
        /*and (orientation: landscape) */
        grid-column-gap: 5rem; } }
    @media (max-width: 43.75em) {
      .hero__sub {
        grid-column-gap: 2rem; } }
    @media (max-width: 43.75em) {
      .hero__sub {
        grid-row-gap: 10rem; } }
  .hero__mockup {
    margin-top: 2.22rem;
    width: 100%;
    max-width: 23rem; }
    @media (max-width: 56.25em) {
      .hero__mockup {
        /*and (orientation: landscape) */
        width: 80%;
        justify-self: end; } }
    @media (max-width: 43.75em) {
      .hero__mockup {
        width: 90%; } }
    @media (max-width: 43.75em) {
      .hero__mockup {
        order: 2;
        justify-self: center;
        margin-top: 0;
        width: 70%; } }
    @media (max-width: 37.5em) {
      .hero__mockup {
        width: 55%; } }
  .hero .mockup {
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 0 0 1px #f1c40f;
    display: block; }
  .hero__info {
    font-size: 1.3rem;
    font-weight: 100;
    letter-spacing: 0.3px;
    margin-bottom: 2.5rem; }
  .hero__box {
    justify-self: end; }
    @media (max-width: 43.75em) {
      .hero__box {
        justify-self: center;
        margin-top: 2.22rem;
        display: flex;
        flex-direction: column;
        align-items: center; } }
  .hero__btn:link, .hero__btn:visited {
    padding: .7rem 1.8rem; }
  @media (max-width: 71.87em) {
    .hero {
      padding: 1rem 3rem; } }
  @media (max-width: 56.25em) {
    .hero {
      /*and (orientation: landscape) */
      padding: 1rem 1rem; } }

.story {
  padding: 0 5.8rem;
  background-image: url("../images/background.png");
  background-position: right;
  background-size: cover;
  background-color: #0e0f10;
  display: flex; }
  .story__content {
    flex: 0 1 50%;
    padding: 5.5rem 5% 5rem;
    display: flex;
    flex-direction: column; }
    @media (max-width: 71.87em) {
      .story__content {
        padding: 5rem 3% 5rem; } }
    @media (max-width: 43.75em) {
      .story__content {
        padding: 4rem 3% 5rem; } }
    @media (max-width: 43.75em) {
      .story__content {
        padding: 3rem 3% 4rem; } }
  .story__text p:first-of-type {
    margin-top: 2.5rem; }
  .story__text p:last-child {
    margin-bottom: 0; }
  .story__text p a:link,
  .story__text p a:visited {
    text-decoration: none;
    color: #f2f2f2;
    font-style: italic; }
  .story__text p span {
    font-style: italic; }
  @media (max-width: 71.87em) {
    .story {
      padding: 0 3rem; } }
  @media (max-width: 56.25em) {
    .story {
      /*and (orientation: landscape) */
      padding: 0; } }
  @media (max-width: 43.75em) {
    .story {
      background-position: center;
      flex-direction: column;
      padding: 0; } }

.story-testimonial {
  flex: 0 1 44%;
  padding: 10rem 5% 2% 8%;
  background-color: #f2f2f2;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 80%, 14% 72%, 0 65%); }
  .story-testimonial__text {
    color: #020202; }
  .story-testimonial__user {
    display: flex;
    justify-content: space-between;
    align-items: center; }
  .story-testimonial__box {
    flex: 0 0 50%; }
  .story-testimonial__box::before {
    content: "";
    height: 1px;
    background-color: #f1c40f;
    width: 40%;
    display: block; }
    @media (max-width: 43.75em) {
      .story-testimonial__box::before {
        width: 25%; } }
  .story-testimonial__box p:first-of-type {
    font-weight: 700;
    margin-top: .77rem; }
  @media (max-width: 71.87em) {
    .story-testimonial {
      padding: 9.5rem 3% 2% 8%; } }
  @media (max-width: 43.75em) {
    .story-testimonial {
      clip-path: polygon(70% 10%, 70% 0, 100% 0, 100% 100%, 0 100%, 0 0, 60% 0);
      padding: 5.5rem 8% 2rem; } }

blockquote {
  margin-bottom: 2.22rem;
  position: relative; }
  blockquote img {
    position: absolute;
    top: -4.4rem;
    left: -2.5rem;
    width: 4.44rem;
    display: block; }
    @media (max-width: 65em) {
      blockquote img {
        width: 4rem; } }
    @media (max-width: 43.75em) {
      blockquote img {
        left: -1.5rem; } }
  blockquote p::first-letter {
    font-size: 200%;
    line-height: 1;
    color: #f1c40f; }

.story-img {
  box-shadow: 0 0 0 1px #f1c40f;
  width: 15vw; }
  @media (max-width: 43.75em) {
    .story-img {
      width: 60%;
      margin-left: calc(100% - 80%); } }
  @media (min-resolution: 192dpi) and (min-width: 37.5em), (min-width: 125em) {
    .story-img {
      width: 60%; } }

.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(2, 2, 2, 0.8);
  box-shadow: 0 2px 2px rgba(241, 196, 15, 0.2);
  z-index: 20; }
  .sticky .header__nav {
    padding-right: 1.1%; }
  .sticky .navigation__button {
    padding-right: 2%; }

.video {
  position: relative;
  padding: 5.5rem 5.8rem;
  line-height: 0;
  margin-bottom: -1px; }
  .video__article {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40%;
    line-height: 1.5;
    background-color: #f2f2f2;
    border-radius: 2px;
    box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
    opacity: .6;
    color: #020202; }
    @media (max-width: 71.87em) {
      .video__article {
        width: 50%; } }
    @media (max-width: 37.5em) {
      .video__article {
        width: 100%; } }
  .video__text {
    padding: 2.77rem 9% 1.11rem; }
    .video__text p {
      color: #020202; }
    .video__text a:link,
    .video__text a:visited {
      text-decoration: none;
      color: #020202;
      font-style: italic;
      font-weight: 100; }
    @media (max-width: 71.87em) {
      .video__text {
        padding: 2.77rem 6% 1.11rem; } }
    @media (max-width: 56.25em) {
      .video__text {
        /*and (orientation: landscape) */
        padding: 2.77rem 4% 1.11rem; } }
  @media (max-width: 71.87em) {
    .video {
      padding: 5rem 3rem; } }
  @media (max-width: 65em) {
    .video {
      padding: 4rem 3rem; } }
  @media (max-width: 56.25em) {
    .video {
      /*and (orientation: landscape) */
      padding: 0; } }
  @media (max-width: 37.5em) {
    .video {
      background-image: url("../images/kerber.png");
      background-repeat: no-repeat;
      background-position: right;
      background-size: cover; } }

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  opacity: .7;
  overflow: hidden; }
  .bg-video__content {
    height: 100%;
    width: 100%;
    object-fit: cover; }
  @media (max-width: 37.5em) {
    .bg-video {
      display: none; } }

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap; }
  .header__nav {
    list-style-type: none;
    display: flex;
    transition: all .2s; }
    .header__nav li {
      margin-right: 2.77rem; }
      .header__nav li:last-child {
        margin-right: 0; }
    @media (max-width: 37.5em) {
      .header__nav {
        display: none;
        flex-direction: column;
        width: 100%; }
        .header__nav.show {
          display: flex;
          transform: translateX(40%); }
        .header__nav li {
          margin-right: 0;
          margin-bottom: .5rem; } }
  .header__link, .header__visited {
    display: inline-block;
    text-decoration: none;
    color: #f2f2f2;
    text-transform: uppercase;
    font-style: normal; }
    .header__link::after, .header__visited::after {
      content: "";
      display: block;
      width: 0;
      height: 1px;
      background-color: #f1c40f;
      transition: width .3s; }
    .header__link:hover::after, .header__visited:hover::after {
      width: 100%; }

.navigation__button {
  display: none;
  width: 2.5rem;
  height: 2.5rem;
  border: none;
  background-color: transparent;
  z-index: 1100;
  cursor: pointer; }
  .navigation__button-line {
    display: block;
    position: relative;
    width: 100%;
    height: 2px;
    background-color: #f2f2f2; }
    .navigation__button-line::before {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 2px;
      background-color: #f2f2f2;
      margin-top: -8px; }
    .navigation__button-line::after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 2px;
      background-color: #f2f2f2;
      margin-top: 8px; }
  .navigation__button:focus {
    outline: none; }
  @media (max-width: 37.5em) {
    .navigation__button {
      display: block; } }