/* ========== GENERAL ========== */
* {
    margin: 0;
    padding: 0;
}

.wrapper {
    width: 100%;
}
a {
    transition: color 0.2s ease-in-out;
    /*box-shadow: 0px -2px 0px 0px inset black;*/
}
a:hover {
    color: var(--sec-color);
    /*animation: linkhover 0.25s ease-in-out forwards;*/
}
/*@keyframes linkhover {
    from {box-shadow: 0px 0px 0px 0px inset black;}
    to {box-shadow: 0px -4px 0px 0px inset black;}
}*/
hr {
    background: var(--text-color);
    border: 0;
}
.opacity {
    opacity: 0.5;
}
.image {
    width: 100%;
    height: auto;
}

@view-transition {
  navigation: auto;
}

/* Animation */
    .ani-one {
        opacity: 0;
        animation-name: ani-one;
        animation-duration: 1.5s;
        animation-delay: 0s;
        animation-fill-mode: forwards;
    }

    @keyframes ani-one {
      from {transform: translatey(30%); opacity: 0;}
      to {transform: translatey(0px); opacity: 100;}
    }
    
    .ani-two {
        opacity: 0;
        animation-name: ani-two;
        animation-duration: 1.5s;
        animation-delay: 0.2s;
        animation-fill-mode: forwards;
    }

    @keyframes ani-two {
      from {transform: translatey(30%); opacity: 0;}
      to {transform: translatey(0px); opacity: 100;}
    }

    .ani-three {
        opacity: 0;
        animation-name: ani-three;
        animation-duration: 1.5s;
        animation-delay: 0.7s;
        animation-fill-mode: forwards;
    }

    @keyframes ani-three {
      from {transform: translatey(30%); opacity: 0;}
      to {transform: translatey(0px); opacity: 100;}
    }

    .ani-four {
        opacity: 0;
        animation-name: ani-four;
        animation-duration: 1.5s;
        animation-delay: 1.2s;
        animation-fill-mode: forwards;
    }

    @keyframes ani-four {
      from {transform: translatey(10%); opacity: 0;}
      to {transform: translatey(0px); opacity: 100;}
    }

    .ani-five {
        opacity: 0;
        animation-name: ani-four;
        animation-duration: 1.2s;
        animation-fill-mode: forwards;
    }

    @keyframes ani-five {
      from {transform: translatey(10%); opacity: 0;}
      to {transform: translatey(0px); opacity: 100;}
    }

/* ========== DESKTOP ========== */
@media only screen and (min-width: 769px) {
    h1 {
        font-size: 6vw;
        font-weight: 400;
        letter-spacing: -0.4vw;
        line-height: normal;
        margin: 0px;
    }
    h2 {
        font-size: 4vw;
        font-weight: 400;
        letter-spacing: -0.15vw;
        line-height: normal;
        margin: 0px;
    }
    h3 {
        font-size: 3.8vw;
        font-weight: 400;
        letter-spacing: -0.20vw;
        line-height: normal;
        margin: 0px;
    }
    h4 {
        font-size: 2vw;
        font-weight: 400;
        letter-spacing: -0.05vw;
        line-height: normal;
        margin: 0px;
    }
    .plarge {
        font-size: 2.75vw;
        font-weight: 400;
        letter-spacing: -0.1vw;
        line-height: normal;
        margin: 0;
    }
    p {
        font-size: 2vw;
        font-weight: 400;
        letter-spacing: -0.075vw;
        line-height: normal;
        margin: 0;
    }
    .labelhead {
        font-size: 1vw;
        font-weight: 400;
        letter-spacing: normal;
        text-transform: uppercase;
        line-height: normal;
        margin: 0 0 2% 0;
    }
    .date {
        font-size: 1.5vw;
        letter-spacing: -0.05vw;
        line-height: normal;
    }
    .label {
        font-size: 1vw;
        letter-spacing: -0.01vw;
        line-height: normal;
    }
    .hr-style {
        margin-top: 8%;
    }
    .ani-two2 {
        opacity: 0;
        animation-name: ani-two;
        animation-duration: 1.5s;
        animation-delay: 0.2s;
        animation-fill-mode: forwards;
    }

    @keyframes ani-two {
      from {transform: translatey(60%); opacity: 0;}
      to {transform: translatey(0px); opacity: 100;}
    }
}

/* ========== MOBILE ========== */
@media only screen and (max-width: 768px) {
    h1 {
        font-size: 11vw;
        font-weight: 400;
        letter-spacing: -0.5vw;
        line-height: normal;
        margin: 0px;
    }
    h2 {
        font-size: 9vw;
        font-weight: 400;
        letter-spacing: -0.25vw;
        line-height: normal;
        margin: 0px;
    }
    h3 {
        font-size: 8vw;
        font-weight: 400;
        letter-spacing: -0.20vw;
        line-height: normal;
        margin: 0px;
    }
    h4 {
        font-size: 5vw;
        font-weight: 400;
        letter-spacing: -0.1vw;
        line-height: normal;
        margin: 0px;
    }
    .plarge {
        font-size: 7vw;
        font-weight: 400;
        letter-spacing: -0.2vw;
        line-height: normal;
        margin: 0;

    }
    p {
        font-size: 5.5vw;
        font-weight: 400;
        letter-spacing: -0.02vw;
        line-height: normal;
        margin: 0;
    }
    .labelhead {
        font-size: 3.5vw;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: -0.02vw;
        line-height: normal;
        margin: 0 0 4% 0;
    }
    .label {
        font-size: 4vw;
        letter-spacing: -0.1vw;
        line-height: normal;
        margin: 0;
    }
    .date {
        font-size: 3.8vw;
        letter-spacing: 0.1vw;
        line-height: normal;
        margin: 0;
    }
    .hr-style {
        margin-top: 16%;
    }

    .clients-width .col-2 {
        width: 31% !important;
    }
    .ani-two2 {
        opacity: 0;
        animation-name: ani-two;
        animation-duration: 1.5s;
        animation-delay: 0.2s;
        animation-fill-mode: forwards;
    }

    @keyframes ani-two {
      from {transform: translatey(90%); opacity: 0;}
      to {transform: translatey(0px); opacity: 100;}
    }
}