@media (min-width: 768px) {
    header .mobile {
        display: none;
    }
    header .container {
        height: 100%;
        position:relative;
        z-index: 4;
        background-color: inherit;
    }
    header#nav {
        height: var(--header-max);
        transition: height 0.3s ease-in-out;
    }
    .scrolled header#nav {
        height: var(--header-min);
    }
    header#nav .container>* {
        width: calc(100% / 3);
    }
    header#nav nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        transform: translateY(0);
        pointer-events: all;
        opacity: 1;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        width: calc(100% / 3);
    }
    header#nav nav ul {
        list-style: none;
        padding: 0 20% 0 0;
        margin: 0;
        width: 100%;
    }
    header#nav nav ul li {
        display: inline-block;
    }
    header#nav nav ul li:not(:first-child) {
        margin-left: 1.5rem;
    }
    header#nav nav a {
        font-size: 1.4rem;
        line-height: 2rem;
        position: relative;
    }
    header#nav nav a::after {
        content: '';
        display: block;
        position: absolute;
        top: calc(100% + 0.25rem);
        height: 6px;
        width: 100%;
        background: var(--red);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.3s ease-in-out;
    }
    header#nav nav a:hover::after,
    header#nav nav a:focus::after,
    header#nav nav a:active::after,
    header#nav nav a.active::after {
        transform: scaleX(1);
    }
    header#nav .contact {
        text-align: right;
        transform: translateY(0);
        pointer-events: all;
        opacity: 1;
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        width: calc(100% / 3);
    }
    header#nav .contact a {
        display: block;
        transition: color 0.2s ease-in-out;
    }
    header#nav .contact a:hover,
    header#nav .contact a:focus,
    header#nav .contact a:active {
        color: var(--red);
    }
    header#nav .contact a.email,
    header#nav .contact a.tel {
        font-weight: 700;
        font-size: 1.875rem;
        line-height: 2.1875rem;
        letter-spacing: -0.006875rem;
    }
    header#nav .contact a.email {
        font-weight: 300;
    }
    main {
        padding-top: var(--header-max);
    }
    .toplogo svg {
        /* height: 3.88rem; */
        width: 25rem;
        margin: 0 auto;
    }
    .toplogo svg .tlc {
        opacity: 1;
        transform: scale(1);
        transform-origin: 20% 50%;
        transition: transform 0.15s ease-out, opacity 0.2s ease-in;
        transition-delay: 0.2s;
    }
    .toplogo svg path:not(.tlc) {
        opacity: 1;
        transition: opacity 0.2s ease-out;
        transition-delay: 0.3s;
    }
    .scrolled .toplogo svg .tlc {
        transform: scale(0);
        opacity: 0;
        transition-delay: 0.1s;
    }
    .scrolled .toplogo svg path:not(.tlc) {
        opacity: 0;
        transition-delay: 0.1s;
    }
    .scrolllogo {
        opacity: 0;
        transition: opacity 0.15s ease-in-out;
        transition-delay: 0.15s;
    }
    .scrolllogo svg {
        overflow: visible;
    }
    .scrolled .scrolllogo {
        left: 50%;
        top: calc( var(--header-min) / 2 );
        transform: translate(-50%, -50%);
        opacity: 1;
    }
    #inmdot-1,
    #inmdot-3,
    #inmdot-5,
    #inmdot-7,
    #inmdot-9,
    #inmdot-11,
    #inmdot-14,
    #inmdot-17,
    #inmdot-20,
    #inmdot-23 {
        transition: transform 0.6s ease-out;
        transition-delay: 0.2s;
    }

    
    #inmdot-23 {
        transform: translate(0,-4.1rem);
        transition-delay: 0.1s;
    }

    #inmdot-1 {
        transform: translate(-1.5rem,-5rem);
        transition-delay: 0.13s;
    }
    #inmdot-3 {
        transform: translate(1.5rem,-5rem);
        transition-delay: 0.13s;
    }

    #inmdot-5 {
        transform: translate(-2.5rem,-5.2rem);
        transition-delay: 0.16s;
    }
    #inmdot-7 {
        transform: translate(0,-5.2rem);
        transition-delay: 0.16s;
    }
    #inmdot-9 {
        transform: translate(2.5rem,-5.2rem);
        transition-delay: 0.16s;
    }

    #inmdot-11 {
        transform: translate(-4rem,-5.4rem);
        transition-delay: 0.2s;
    }
    #inmdot-14 {
        transform: translate(-2rem,-5.4rem);
        transition-delay: 0.2s;
    }
    #inmdot-17 {
        transform: translate(2rem,-5.4rem);
        transition-delay: 0.2s;
    }
    #inmdot-20 {
        transform: translate(4rem,-5.4rem);
        transition-delay: 0.2s;
    }

    .scrolled #inmdot-1,
    .scrolled #inmdot-3,
    .scrolled #inmdot-5,
    .scrolled #inmdot-7,
    .scrolled #inmdot-9,
    .scrolled #inmdot-11,
    .scrolled #inmdot-14,
    .scrolled #inmdot-17,
    .scrolled #inmdot-20,
    .scrolled #inmdot-23 {
        transform: translate(0,0);
    }

    header#nav .subnav {
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        transform: translateY(0);
        transition: transform 0.6s ease-in-out;
        transition-delay: 0.15s;
        background-color: rgba(var(--off-white), 0.9);
        backdrop-filter: blur(0.5rem);
        z-index: 3;
        border: 0.4rem solid rgba(var(--background-rgb), 0.06);
    }
    [data-theme="dark"] header#nav .subnav {
        background-color: rgba(var(--dark-rgb), 0.9);
    }
    .scrolled header#nav .subnav {
        transform: translateY(100%);
        transition-delay: 0.35s;
    }
    header#nav .subnav .container {
        width: 100%;
        background: transparent;
    }
    header#nav .subnav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    header#nav .subnav ul li {
        display: block;
    }
    header#nav .subnav a {
        font-weight: 400;
        font-size: 1.375rem;
        line-height: 2.1875rem;
        letter-spacing: 0;
        transition: color 0.2s ease-in-out;
    }
    header#nav .subnav a:hover,
    header#nav .subnav a:focus,
    header#nav .subnav a:active {
        color: var(--red);
    }

    footer#footer .bigfoot,
    footer#footer .details {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    footer#footer .details {
        padding-top: 2rem;
    }
    footer#footer .bigfoot .contact,
    footer#footer .bigfoot .contact address,
    footer#footer .bigfoot .contact a {
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .mobile-menu-active .mobile-overlay {
        display: none;
    }
    footer#footer .bigfoot .contact,
    footer#footer .bigfoot .contact address,
    footer#footer .bigfoot .contact a {
        text-align: right;
    }
    .accreditations,
    footer#footer .bigfoot .contact,
    footer#footer .logo {
        padding-bottom: 0;
    }
    .accreditations {
        order: 2;
    }
    footer#footer nav ul li {
        display: inline-block;
        position: relative;
        padding: 0 0.5rem 0 0;
    }
    footer#footer nav ul li:not(:first-child) {
        padding: 0 0.5rem;
    }
    footer#footer nav ul a {
        text-decoration: none;
        line-height: 1;
    }
    footer#footer nav ul li:not(:last-child)::before {
        content: '|';
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        color: var(--dark);
        transform: translateX(100%);
    }
    .btn {
        min-height: 4.5rem;
        font-size: 2.25rem;
        line-height: 1;
        letter-spacing: -0.01rem;
    }
    #hero {
        padding-bottom: 5rem;
    }
    .container {
        z-index: initial;
    }
    #hero .container {
        z-index: unset;
    }
    h1 span:first-child {
        z-index: 4;
    }
    #hero p {
        width: 68%;
        max-width: 68%;
        margin: 0 0 2.5rem;
        font-size: 1.5rem;
        line-height: 2rem;
        z-index: 6;
    }
    p.big  {
        order: 3;
        font-size: 3rem;
        line-height: 3.5rem;
        letter-spacing: -0.01rem;
    }
    #hero .buttons {
        order: 2;
        margin-bottom: 8rem;
    }
    h1 span {
        z-index: 4;
    }
    h1 span:last-child {
        font-weight: 200;
        z-index: 6;
    }
    #about .container.about {
        flex-direction: row;
        align-items: unset;
    }
    #about .container.about img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    #about .container.about>div {
        flex: 1;
        width: 50%;
    }
    #about .container.about>div:first-child {
        order: 1;
        padding-right: 1rem;
    }
    #about .container.about>div:last-child {
        order: 2;
        padding-left: 1rem;
    }
}