/* Fonts & Spaces */
@xsmall-font: 10px;
@small-font: 12px;
@mid-font: 14px;
@large-font: 18px;
@xlarge-font: 24px;
@title-font: 55px;

@small-line-height: 1;
@medium-line-height: 1.5;
@big-line-height: 2;

@height: 50rem;
@svg-size: 100%;

.absolute() {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.svg() {
    fill: none;
    stroke: @light-color;
    stroke-width: 2px;
}

/* Family Font */
@font-face {
    font-family: "Archivo Expanded ExtraLight";
    src: url(../fonts/Archivo_Expanded-ExtraLight.woff2);
}

@font-face {
    font-family: 'Archivo Expanded Light', sans-serif;
    src: url(../fonts/Archivo_Expanded-Light.woff2);
}

@font-face {
    font-family: 'Archivo Expanded', sans-serif;
    src: url(../fonts/Archivo_Expanded-Regular.woff2);
}

@font-face {
    font-family: 'Archivo Expanded Medium', sans-serif;
    src: url(../fonts/Archivo_Expanded-Medium.woff2);
}

@font-face {
    font-family: 'Archivo Expanded SemiBold', sans-serif;
    src: url(../fonts/Archivo_Expanded-SemiBold.woff2);
}

@font-face {
    font-family: 'Archivo Expanded Black', sans-serif;
    src: url(../fonts/Archivo_Expanded-Black.woff2);
}


@font-family: 'Archivo Expanded', sans-serif;
@extra-light-font: 'Archivo Expanded ExtraLight', sans-serif;
@light-font: 'Archivo Expanded Light', sans-serif;
@medium-font: 'Archivo Expanded Medium', sans-serif;
@semi-bold-font: 'Archivo Expanded SemiBold', sans-serif;
@black-font: 'Archivo Expanded Black', sans-serif;

/* Colours */
@accent-color: #0142FE;
@white-color: #FFFFFF;
@light-color: #EBEBE9;
@light-mid-color: #DCDCDC;
@mid-color: #8595EE;
@dark-mid-color: #AAAAAA;
@dark-color: #161825;

/* Border */
@border-radius: 15px;
@small-border-radius: 5px;
@big-border-radius: 45px;

/* Animations */
@transition: all 0.5s ease-in-out;

/* General Styles */
html {
    scroll-behavior: smooth;
}
/* * {
    cursor: none !important;
    @media screen and (max-width: 845px) {
        cursor: auto !important;
    }
} */
/* * {
    cursor: none;
    @media screen and (max-width: 845px) {
        cursor: auto;
    }
} */

/* @media screen and (max-width: 845px) {
    .cursor-mobile {
        display: none !important;
    }
} */


body {
    padding: 0;
    color: @white-color;
    background-color: lighten(@dark-color, 5%);
    font-family: @font-family;
    overflow-x: hidden;
    max-width: 1200px;
    margin: 0 auto;

    & section {
        background-color: @dark-color;
    }

    &.body-projects {
        background-color: @dark-color;
    }

    .cursor-img {
        display: block;
        position: absolute;
        cursor: none;
        width: 40px;
        height: 40px;
        margin: -20px;
        transform: rotate(135deg);
        stroke-width: 5px;
        mix-blend-mode: difference;
        transition: all 0s;
        animation: rotate-cursor 2s infinite;
        animation-play-state: paused;
        z-index: 100;
        overflow: hidden;
    }
    
    @keyframes rotate-cursor {
        0% {
            transform: rotate(135deg) scale(1);
        }
        50% {
            transform: rotate(315deg) scale(1.5);
        }
        100% {
            transform: rotate(135deg) scale(1);
        }
    }
    
    h1, h2, h3, h4, h5, h6 {
        color: @white-color;
        font-weight: bold;
        display: block;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: initial;
    }
    p {
        color: @white-color;
        font-size: @mid-font;
        display: block;
        margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }
    a {
        color: @white-color;
        text-decoration: none;
        &:hover {
            background-color: @accent-color;
        }
    }

    input, select, textarea {
        padding: 0;
        border-width: 0;
        border-color: none;
    }

    button {
        appearance: inherit;
        padding-block: 1px;
        padding-inline: 6px;
        border-width: 2px;
        border-style: none;
        border-color: none;
    }

    svg:hover {
        fill: none;
        stroke: @light-color;
        stroke-width: 2px;
    }

    .btn_cta {
        display: inline-block;
        color: @light-color;
        padding: @mid-font @large-font;
        border-radius: @border-radius;
        background-color: @accent-color;
        box-shadow: 0 8px 0 darken(@accent-color, 20%);
    }

    .btn_cta:hover  {
            color: @white-color;
            transform: translateY(4px);
            box-shadow: 0 4px 0 darken(@accent-color, 20%);
            transition: @transition;
        
    }

    .btn_cta() {
        display: inline-block;
        color: @light-color;
        padding: @xsmall-font @large-font;
        border-radius: @small-border-radius;
        background-color: @accent-color;
        box-shadow: 0 8px 0 darken(@accent-color, 20%);
    }

    .highlight() {
        padding: @xsmall-font @xsmall-font;
        color: @white-color;
        font-family: @semi-bold-font;
    }

    .underlined {
        .highlight();
        background-color: @dark-color;
        border-radius: @border-radius;
        text-align: center;
    }

    .boxline {
        .highlight();
        border: 1px solid @accent-color;
        border-radius: @border-radius;
    }

    .oval {
        .highlight();
        color: @dark-color;
        background-color: @white-color;
        border-radius: 50%;
    }

    .intro-animation {
        width: 100vw;
        height: 100vh;
        position: fixed;
        background-color: @accent-color;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        animation: close-animation 3s ease-in-out forwards;

        .overlay-animation {
            font-family: 'Archivo Expanded Black', sans-serif;
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0.02;
            font-weight: bold;

            & p:nth-child(even) {
                font-size: 80px;
                text-wrap: nowrap;
                text-transform: uppercase;
                animation: text-forwards 25s linear forwards;
            }

            @keyframes text-forwards{
                0% {
                    transform: translateX(-100%);
                }
                100% {
                    transform: translateX(0);
                }
                
            }

            & p:nth-child(odd) {
                font-size: 80px;
                text-wrap: nowrap;
                text-transform: uppercase;
                animation: text-backwards 25s linear forwards;
            }

            @keyframes text-backwards{
                0% {
                    transform: translateX(0);
                }
                100% {
                    transform: translateX(-100%);
                }
                
            }
        }

        @keyframes close-animation {
            0% {
                opacity: 1;
                display: flex;
                z-index: 50;
            }
            80% {
                opacity: 1;
            }
            99% {
                opacity: 0;
                z-index: 50;
            }
            100% {
                /* display: none; */
                opacity: 0;
                z-index: -10;
            }

        }

        .text-animation {
            /* font-size: 1rem; */
            display: block;
            color: white;
            font-weight: bold;
            text-align: center;
            z-index: 1;

            & p {font-size: 1rem;}
        
            & span:nth-child(1) {
                display: inline-block;
                font-family: 'Archivo Expanded ExtraLight', sans-serif;
                animation: intro-animation 1s ease-in-out forwards;
            }
        
            & span:nth-child(2) {
                display: inline-block;
                font-family: 'Archivo Expanded ExtraLight', sans-serif;
                animation: intro-animation 1s ease-in-out forwards;
                animation-delay: 0.7s;
                opacity: 0;
            }
        
            & span:nth-child(3) {
                display: inline-block;
                text-decoration: underline;
                animation: intro-animation 1s ease-in-out forwards;
                animation-delay: 0.8s;
                opacity: 0;
            }

            @keyframes intro-animation {
                0% {
                    opacity: 0;
                    transform: translateY(-100%);
                }
                100% {
                    opacity: 1;
                    transform: translateY(0);
                }
            }
        }
        
    }

    header {
        position: fixed;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: initial;
        display: flex;
        justify-content: space-between;
        width: ~"calc(100% - 20px)";
        max-width: 1180px;
        margin: 0 auto;
        padding: @small-font @large-font;
        background-color: @dark-color;
        border-radius: @border-radius;
        box-sizing: border-box;
        z-index: 15;

        .brand {
            display: grid;
            justify-content: center;
            align-items: center;
            grid-template-columns: 50px 1fr;
            grid-template-rows: 1fr 1fr;
            
            & img {
                width: 40px;
                grid-column: 1 / span 1;
                grid-row: 1 / span 2;
            }
        
            & p:nth-of-type(1) {
                grid-column: 2 / span 1;
                align-self: end;
                color: @dark-mid-color;
            }
        
            & p:nth-of-type(2) {
                grid-column: 2 / span 1;
                align-self: start;
                color: @light-color;
            }
        }

        nav {
            font-size: @small-font;

            & a {
                margin-left: @mid-font;
                @media screen and (max-width: 920px) {
                    margin-left: 5px;
                    
                    }
            }

            /* & a:last-child {
                .btn_cta();
                width: 150px;
                transform: translate(0px, -4px);
                text-align: center;
                @media screen and (max-width: 920px) {
                width: 140px;
                padding: 5px 0;
                
                }
            } */
            /* & a:last-child:hover {
                color: @white-color;
                font-weight: bold;
                letter-spacing: 1px;
                transform: translateY(0px);
                box-shadow: 0 4px 0 darken(@accent-color, 20%);
                transition: @transition;
            } */

            

        }

        & #myBtn {
            display: none;
            opacity: 0;
            position: fixed;
            bottom: 100px;
            right: 28px;
            padding: 12px 20px;
            border: none;
            outline: none;
            background-color: @accent-color;
            color: white;
            cursor: pointer;
            font-size: 18px;
            border-radius: @border-radius;
            animation-fill-mode: forwards;
            transition: @transition;
            z-index: 20;

            @media screen and (min-width: 845px) {
                bottom: 20px;
            }

            &:hover {
                background-color: #555;
            }

            &.active {
                display: block;
                animation: fadeIn 1s;
                animation-fill-mode: forwards;
                transition: @transition;
            }
            }

            @keyframes fadeIn {
                from {
                    opacity: 0;
                }
                to {
                    opacity: 1;
                }
            }
        
            @keyframes fadeOut {
                from {
                    opacity: 1;
                }
                to {
                    opacity: 0;
                }
            }
        
            
        
            
        
    }

    & header {
        position: fixed;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: initial;
        display: flex;
        justify-content: space-between;
        width: ~"calc(100% - 20px)";
        margin: 0 auto;
        padding: @small-font @large-font;
        background-color: @dark-color;
        border-radius: @border-radius;
        box-sizing: border-box;
        z-index: 15;
    }

    .navdesk {
        display: none;
    }
    .dropdown {
    position: relative;
    display: inline-block;
    display: flex;
    align-items: center;

    & .dropdown-back {
        display: none;
        font-size: 20px;
        margin-right: 30px
      }
}


.dropdown .dropbtn/* , .dropdown-content a */ {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 14px 18px;
    border-radius: 15px;
    color: #ebebe9;
    /* padding: 20px 28px; */
    border-radius: 5px;
    background-color: #0142fe;
    /* box-shadow: 0 8px 0 #012898; */
    width: initial;
    /* transform: translate(0px, -4px); */
    text-align: center;
    z-index: 25;
}

.dropdown-content {
    display: none;
    height: 100%;
    min-height: 200px;
    position: absolute;
    top: 45px;
    right: 0;
    padding: 15px;
    background-color: #0142FE;
    min-width: 130px;
    border-radius: 15px 0 15px 15px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    flex-direction: column;
    justify-content: space-evenly;
    
}

.dropdown.active .dropdown-content {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.dropdown:focus .dropdown-content, .dropdown:focus-visible .dropdown-content , .dropdown:focus-within .dropdown-content {
    display: block;
    display: flex;
    flex-direction: column;
    transition: @transition;
    animation: openDropdown 0.2s forwards;
}

@keyframes openDropdown {
    0% {
        opacity: 0;
        bottom: -50px;
        transform: scale(0);
    }
    30% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        bottom: 55px;
        transform: scale(1);
    }
}

.dropdown-content a {
    margin-left: 0;
    margin-top: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #ebebe9;
}

.dropdown-content a:hover {
    color: black;
    background-color: white;
}
    @media screen and (max-width: 845px){
        & header {
            position: fixed;
            top: initial;
            right: 10px;
            bottom: 10px;
            left: 10px;
            display: flex;
            justify-content: space-between;
            width: ~"calc(100% - 20px)";
            margin: 0 auto;
            padding: @small-font @large-font;
            background-color: @dark-color;
            border-radius: @border-radius;
            box-sizing: border-box;
            z-index: 15;
        }

        .navdesk {
            display: none;
        }
        /* .dropdown {
        position: relative;
        display: inline-block;
        } */
    .dropdown .dropbtn/* , .dropdown-content a */ {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding: 15px 25px;
        color: #ebebe9;
        border-radius: 5px;
        background-color: #0142fe;
        /* box-shadow: 0 8px 0 #012898; */
        width: initial;
        /* transform: translate(0px, -4px); */
        font-size: 15pt;
        text-align: center;
        z-index: 25;
    }

    /* .dropdown-content, .dropdown-content a:last-of-type {
        display: none;
        position: absolute;
        top: initial;
        bottom: 55px;
        padding: 15px;
        right: 0;
        background-color: #0142FE;
        min-width: 130px;
        border-radius: 15px 15px 0 15px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        
    } */

    .dropdown.active .dropdown-content {
        display: block;
        display: flex;
        flex-direction: column;
        top: initial;
        right: 0;
        bottom: 55px;
    }
    
    .dropdown:focus .dropdown-content, .dropdown:focus-visible .dropdown-content , .dropdown:focus-within .dropdown-content {
        display: block;
        display: flex;
        flex-direction: column;
        transition: @transition;
        animation: openDropdown 0.2s forwards;
        top: initial;
        right: 0;
        bottom: 55px;
    }

    @keyframes openDropdown {
        0% {
            opacity: 0;
            bottom: -50px;
            transform: scale(0);
        }
        30% {
            opacity: 0;
        }
        100% {
            opacity: 1;
            bottom: 55px;
            transform: scale(1);
        }
    }

    .dropdown-content a {
        margin-left: 0;
        margin-top: 5px;
        margin-bottom: 5px;
        border-bottom: 1px solid #ebebe9;
    }

    .dropdown-content a:hover {
        color: black;
        background-color: white;
    }
        
    }



}

.display-flex-center() {
    display: flex;
    justify-content: center;
    align-items: center;
}

.display-grid-center() {
    display: grid;
    justify-content: center;
    align-items: center;
}

.grid-template-columns(@columns) {
    grid-template-columns: repeat(@columns, 1fr);
}

/* Toggle */
.toggle {
    transition: @transition;
}   

.toggle a {
    display: block;
    width: 100%;
}

.toggle a:hover {
    color: @dark-color;
    background-color: @light-color;
    text-decoration: none;
    cursor: zoom-in;
}

.toggle h3 {
    color: @light-color;
    font-size: @title-font;
    border-bottom: 5px solid @light-color;
}

.btn_toggle {
    text-transform: uppercase;
}

.open-toggle {
    margin: @title-font;
    padding: @title-font;
    background-color: @white-color;
    border-radius: @border-radius;
    transition: @transition;
    cursor: zoom-out;
}

.open-toggle .btn_cta:hover {
    background-color: @accent-color;
    cursor: pointer;
}

.open-toggle .btn_toggle h3 {
    color: @accent-color;
    padding-bottom: @mid-font;
    border-bottom: 1px solid @accent-color;
}

.open-toggle .btn_toggle a {
    color: @accent-color;
}



.contain_toggle {
    display: none;
    height: 0px;
    opacity: 0;
    transition: all 0.2s;
}

.contain_toggle.active {
    animation: open 1.5s;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

.contain_toggle.close {
    display: none;
    animation: close 2.5s;
    animation-fill-mode: forwards;
    animation-play-state: running;
}

.display-none {
    display: none;
}

@keyframes open {
    0% {
        display: block;
        
    }
    1%{
        height: 0%;
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    100% {
        height: 100%;
        opacity: 1;
    }
}

@keyframes close {
    0% {
        height: 20vh;
        opacity: 1;
        
    }
    40% {
        opacity: 0;
    }
    100% {
        height: 0vh;
        opacity: 0;
        display: none;
    }
}

/* ********************************************** */
/* Hero */
section.container-hero {
    position: relative;
    padding: @xsmall-font;
    background-color: @accent-color;
    

    .hero {
        position: relative;
        height: 50rem;
        padding: 10px;
        background-color: #161825;
        border-radius: @border-radius;
        display: grid;
        justify-content: center;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: 35% 10% 20%;
        overflow: hidden;
        align-content: center;
        align-items: center;
        justify-items: center;
        gap: 20px;

        & .btn_cta {
            align-self: end;
            font-size: @large-font;
            font-weight: 500;
            letter-spacing: 1px;
            color: @light-color;
            padding: @mid-font @large-font;
            border-radius: @border-radius;
            background-color: @accent-color;
            box-shadow: initial;

            &:hover {
                color: @white-color;
                transform: translateY(-4px) scale(1.05);
                box-shadow: initial;
                transition: @transition;
            }
        }

        .illustration {
            width: 500px;
            height: 280px;
            border-radius: 45px;
            background-size: cover;
        }

        .frontPageIllus {
            background-repeat: no-repeat;
            background-size: 101%;
            background-position: center;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 639 399" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="10" xmlns:v="https://vecta.io/nano"><style><![CDATA[.B{fill:none}.C{stroke:%23161924}.D{stroke-miterlimit:1.5}.E{stroke-linecap:round}.F{stroke-width:3}.G{fill:%23fe74b6}.H{fill:%23161924}.I{stroke-width:3.1}.J{fill:%23bae6fa}.K{fill:%230142fe}.L{fill:%23ebebeb}.M{fill-rule:nonzero}.N{stroke-miterlimit:2}]]></style><path d="M0 0h638.346v398.966H0z" class="J"/><clipPath id="A"><path d="M0 0h638.346v398.966H0z"/></clipPath><g clip-path="url(%23A)"><g opacity=".5"><g stroke="%23469ef8" stroke-width="2" class="B"><path d="M9.18-25.469l-40.985 40.99-10.818-10.865 40.985-40.99h-37.106v-15.31H16.83l7.65 7.655V11.57H9.18v-37.039zm98.578 0l-40.986 40.99L55.954 4.656l40.986-40.99H59.834v-15.31h55.574l7.648 7.655V11.57h-15.298v-37.039zm98.576 0l-40.985 40.99-10.818-10.865 40.985-40.99H158.41v-15.31h55.574l7.65 7.655V11.57h-15.3v-37.039zm98.578 0l-40.985 40.99-10.818-10.865 40.985-40.99h-37.106v-15.31h55.574l7.649 7.655V11.57h-15.299v-37.039zm98.578 0l-40.987 40.99-10.818-10.865 40.987-40.99h-37.106v-15.31h55.573l7.649 7.655V11.57H403.49v-37.039zm98.576 0l-40.985 40.99-10.818-10.865 40.985-40.99h-37.106v-15.31h55.574l7.65 7.655V11.57h-15.3v-37.039zm98.578 0l-40.985 40.99-10.818-10.865 40.985-40.99H552.72v-15.31h55.573l7.65 7.655V11.57h-15.299v-37.039zm-427.86 90.005l-40.985 40.99-10.818-10.741 40.985-40.99H124.86v-15.31h55.573l7.649 7.655v55.559h-15.298V64.536zm98.577 0l-40.986 40.99-10.818-10.741 40.986-40.99h-37.106v-15.31h55.573l7.65 7.655v55.559h-15.299V64.536zm98.577 0l-40.985 40.99-10.818-10.741 40.985-40.99h-37.106v-15.31h55.574l7.649 7.655v55.559h-15.299V64.536z"/><use xlink:href="%23M"/><path d="M567.093 64.536l-40.986 40.99-10.817-10.741 40.985-40.99h-37.106v-15.31h55.574l7.648 7.655v55.559h-15.298V64.536zm98.576 0l-40.985 40.99-10.818-10.741 40.985-40.99h-37.106v-15.31h55.574l7.65 7.655v55.559h-15.3V64.536zM9.18 147.011l-40.985 40.99-10.818-10.865 40.985-40.99h-37.106v-15.31H16.83l7.65 7.655v55.682H9.18v-37.162zm98.578 0l-40.986 40.99-10.818-10.865 40.986-40.99H59.834v-15.31h55.574l7.648 7.655v55.682h-15.298v-37.162zm98.576 0l-40.985 40.99-10.818-10.865 40.985-40.99H158.41v-15.31h55.574l7.65 7.655v55.682h-15.3v-37.162zm98.578 0l-40.985 40.99-10.818-10.865 40.985-40.99h-37.106v-15.31h55.574l7.649 7.655v55.682h-15.299v-37.162zm98.578 0l-40.987 40.99-10.818-10.865 40.987-40.99h-37.106v-15.31h55.573l7.649 7.655v55.682H403.49v-37.162zm98.576 0l-40.985 40.99-10.818-10.865 40.985-40.99h-37.106v-15.31h55.574l7.65 7.655v55.682h-15.3v-37.162zM9.18 325.417l-40.985 40.99-10.818-10.741 40.985-40.991h-37.106v-15.309H16.83l7.65 7.655v55.559H9.18v-37.163zm197.154 0l-40.985 40.99-10.818-10.741 40.985-40.991H158.41v-15.309h55.574l7.65 7.655v55.559h-15.3v-37.163zm98.578 0l-40.985 40.99-10.818-10.741 40.985-40.991h-37.106v-15.309h55.574l7.649 7.655v55.559h-15.299v-37.163zm98.578 0l-40.987 40.99-10.818-10.741 40.987-40.991h-37.106v-15.309h55.573l7.649 7.655v55.559H403.49v-37.163zm98.576 0l-40.985 40.99-10.818-10.741 40.985-40.991h-37.106v-15.309h55.574l7.65 7.655v55.559h-15.3v-37.163zm98.578 0l-40.985 40.99-10.818-10.741 40.985-40.991H552.72v-15.309h55.573l7.65 7.655v55.559h-15.299v-37.163zM74.206 237.14l-40.985 40.99-10.818-10.865 40.985-40.99H26.282v-15.31h55.574l7.65 7.655v55.559h-15.3V237.14zm98.578 0l-40.985 40.99-10.818-10.865 40.985-40.99H124.86v-15.31h55.573l7.649 7.655v55.559h-15.298V237.14zm98.577 0l-40.986 40.99-10.818-10.865 40.986-40.99h-37.106v-15.31h55.573l7.65 7.655v55.559h-15.299V237.14zm98.577 0l-40.985 40.99-10.818-10.865 40.985-40.99h-37.106v-15.31h55.574l7.649 7.655v55.559h-15.299V237.14z"/><use xlink:href="%23N"/><path d="M567.093 237.14l-40.986 40.99-10.817-10.865 40.985-40.99h-37.106v-15.31h55.574l7.648 7.655v55.559h-15.298V237.14zm98.576 0l-40.985 40.99-10.818-10.865 40.985-40.99h-37.106v-15.31h55.574l7.65 7.655v55.559h-15.3V237.14zM74.206 415.546l-40.985 40.99-10.818-10.865 40.985-40.99H26.282v-15.309h55.574l7.65 7.654v55.559h-15.3v-37.039zm98.578 0l-40.985 40.99-10.818-10.865 40.985-40.99H124.86v-15.309h55.573l7.649 7.654v55.559h-15.298v-37.039zm98.577 0l-40.986 40.99-10.818-10.865 40.986-40.99h-37.106v-15.309h55.573l7.65 7.654v55.559h-15.299v-37.039zm98.577 0l-40.985 40.99-10.818-10.865 40.985-40.99h-37.106v-15.309h55.574l7.649 7.654v55.559h-15.299v-37.039z"/><use xlink:href="%23O"/><path d="M567.093 415.546l-40.986 40.99-10.817-10.865 40.985-40.99h-37.106v-15.309h55.574l7.648 7.654v55.559h-15.298v-37.039zm98.576 0l-40.985 40.99-10.818-10.865 40.985-40.99h-37.106v-15.309h55.574l7.65 7.654v55.559h-15.3v-37.039z"/></g><g class="K M"><path d="M74.206 64.536l-40.985 40.99-10.818-10.741 40.985-40.99H26.282v-15.31h55.574l7.65 7.655v55.559h-15.3V64.536zm526.438 82.475l-40.985 40.99-10.818-10.865 40.985-40.99H552.72v-15.31h55.573l7.65 7.655v55.682h-15.299v-37.162zM107.758 325.54l-40.986 40.991-10.818-10.865 40.986-40.991H59.834v-15.309h55.574l7.649 7.655v55.559h-15.299v-37.04z"/></g></g><use xlink:href="%23P" class="G"/><clipPath id="B"><use xlink:href="%23P"/></clipPath><g clip-path="url(%23B)" class="H"><path d="M292.429 399.719c3.764-12.551 1.371-26.143-6.451-36.655a41.46 41.46 0 0 0-33.258-16.708l-4.623-.004-15.44 86.341h52.888c1.558-12.013 3.896-22.944 6.884-32.974z"/></g><use xlink:href="%23Q" class="G"/><clipPath id="C"><use xlink:href="%23Q"/></clipPath><g clip-path="url(%23C)" class="H"><path d="M281.911 369.362c0-20.755 11.844-31.814 29.926-37.715 6.094-1.989 12.321-3.682 18.587-4.973 1.173-.242 9.731-.58 8.705-1.967-4.314-5.832-13.676-8.926-20.016-10.92-14.491-4.557-30.072-6.625-45.144-7.675-8.202-.572-17.495-.999-24.778 3.682-20.723 13.315-1.282 41.742 13.054 51.767l19.666 7.801z"/></g><g class="B C D E"><path d="M264.377,350.852c7.149,13.186 22.381,19.992 32.916,22.417" class="I"/><g class="F"><path d="M313.067 372.447c.351.702 5.495-1.178 6.004-1.364 7.324-2.68 9.832-5.456 13.421-11.694m-6.949 30.87c11.917-12.034 27.542-7.679 40.252.119"/></g></g><use xlink:href="%23R" class="G"/><clipPath id="D"><use xlink:href="%23R"/></clipPath><g clip-path="url(%23D)" class="B C D E F"><path d="M226.336 137.095c-.974 0-2.596-1.375-3.397-1.854-7.701-4.604-4.293-17.786 4.734-18.053m-1.186 9.116c0 1.441 2.869 4.131 3.751 5.177"/></g><path d="M385.475 59.815c12.564 0 22.748 10.184 22.748 22.747v223.336c0 12.564-10.184 22.748-22.748 22.748H257.374c-12.563 0-22.748-10.184-22.748-22.748V82.562c0-12.563 10.185-22.747 22.748-22.747h128.101z" fill="%23469ef8"/><path d="M234.626 88.306h173.597v201.471H234.626z" class="L"/><path d="M360.242 195.879l-32.638-32.638L432.041 58.804l-30.306-30.306h93.251l-.001 93.25-30.306-30.306-104.437 104.437z" class="K"/><path d="M318.733 94.783c.6-.899 1.61-1.439 2.692-1.439a3.24 3.24 0 0 1 2.692 1.439l6.981 10.449c.477.714 1.218 1.209 2.06 1.376s1.717-.006 2.431-.483l10.448-6.981a3.24 3.24 0 0 1 3.038-.3c.999.414 1.725 1.299 1.936 2.36l2.452 12.324c.167.843.663 1.584 1.377 2.061s1.588.651 2.43.483l12.324-2.451c1.061-.211 2.157.121 2.921.886s1.097 1.86.886 2.921l-2.451 12.324c-.168.842.006 1.717.483 2.431s1.219 1.209 2.061 1.376l12.324 2.452c1.061.211 1.946.937 2.36 1.937a3.24 3.24 0 0 1-.299 3.037l-6.982 10.448c-.477.714-.651 1.589-.483 2.431s.663 1.583 1.377 2.06l10.448 6.981a3.24 3.24 0 0 1 0 5.385l-10.448 6.981c-.714.477-1.21 1.218-1.377 2.06s.006 1.717.483 2.431l6.982 10.448a3.24 3.24 0 0 1 .299 3.038c-.414.999-1.299 1.725-2.36 1.936l-12.324 2.452c-.842.167-1.584.662-2.061 1.376s-.651 1.589-.483 2.431l2.451 12.324c.211 1.061-.121 2.157-.886 2.921s-1.86 1.097-2.921.886l-12.324-2.451c-.842-.168-1.716.006-2.43.483a3.24 3.24 0 0 0-1.377 2.061l-2.452 12.324c-.211 1.061-.937 1.946-1.936 2.36s-2.139.301-3.038-.3l-10.448-6.981c-.714-.477-1.588-.651-2.431-.483s-1.583.663-2.06 1.377l-6.981 10.448a3.24 3.24 0 0 1-2.692 1.439c-1.082 0-2.092-.54-2.692-1.439l-6.982-10.448c-.477-.714-1.218-1.21-2.06-1.377s-1.717.006-2.431.483l-10.448 6.981c-.899.601-2.038.714-3.037.3a3.24 3.24 0 0 1-1.937-2.36l-2.451-12.324a3.24 3.24 0 0 0-1.377-2.061c-.714-.477-1.588-.651-2.431-.483l-12.324 2.451c-1.061.211-2.156-.121-2.921-.886s-1.097-1.86-.886-2.921l2.451-12.324c.168-.842-.006-1.717-.483-2.431s-1.218-1.209-2.06-1.376l-12.325-2.452a3.24 3.24 0 0 1-2.06-4.974l6.981-10.448c.477-.714.651-1.588.483-2.431s-.662-1.583-1.376-2.06l-10.449-6.981a3.24 3.24 0 0 1 0-5.385l10.449-6.981c.714-.477 1.209-1.218 1.376-2.06s-.006-1.717-.483-2.431l-6.981-10.448a3.24 3.24 0 0 1 2.06-4.974l12.325-2.452c.842-.167 1.583-.662 2.06-1.376s.651-1.589.483-2.431l-2.451-12.324c-.211-1.061.121-2.157.886-2.921s1.86-1.097 2.921-.886l12.324 2.451c.843.168 1.717-.006 2.431-.483a3.24 3.24 0 0 0 1.377-2.061l2.451-12.324a3.24 3.24 0 0 1 4.974-2.06l10.448 6.981c.714.477 1.589.651 2.431.483s1.583-.662 2.06-1.376l6.982-10.449z" class="J"/><circle cx="320.47" cy="165.598" r="51.103" class="L"/><ellipse cx="320.47" cy="165.598" rx="39.192" ry="43.345" fill="%23fe8c1d"/><clipPath id="E"><ellipse cx="320.47" cy="165.598" rx="39.192" ry="43.345"/></clipPath><g clip-path="url(%23E)" stroke-width="5" class="B C D E"><path d="M272.853 165.598v45.437m7.326-45.437v45.437m7.325-45.437v45.437m7.326-45.437v45.437m7.326-45.437v45.437m7.325-45.437v45.437m7.326-45.437v45.437m7.325-45.437v45.437m7.326-45.437v45.437m7.326-45.437v45.437m7.325-45.437v45.437m7.326-45.437v45.437m7.326-45.437v45.437m7.325-45.437v45.437"/></g><circle cx="320.47" cy="161.444" r="39.192" fill="%23fde45c"/><circle cx="320.47" cy="161.444" r="25.85" fill="%23fe8c1d"/><path d="M302.191 143.165a25.85 25.85 0 0 0 0 36.558 25.85 25.85 0 0 1 0-36.558z" class="B C D F"/><path d="M324.18 173.825c-1.368 0-2.805-.133-4.312-.4a19.28 19.28 0 0 1-4.4-1.339 12.64 12.64 0 0 1-3.791-2.556c-1.101-1.078-1.93-2.417-2.486-4.017h-4.487v-3.234h3.93l-.035-.452v-.818a2.99 2.99 0 0 1 .035-.4h-3.93v-3.234h4.487c.556-1.6 1.379-2.933 2.469-3.999s2.336-1.919 3.739-2.557 2.875-1.089 4.416-1.356 3.043-.4 4.504-.4c1.414 0 2.695.064 3.843.191s2.104.284 2.869.47v5.043c-.487-.186-1.211-.371-2.173-.557s-2.023-.278-3.183-.278c-1.437 0-2.724.139-3.86.417s-2.104.673-2.904 1.183-1.443 1.124-1.93 1.843h10.225v3.234h-11.164c-.023.07-.035.174-.035.313v.453l.018.504a2.38 2.38 0 0 0 .052.4h11.129v3.234h-10.155c.486.719 1.124 1.333 1.912 1.843s1.745.899 2.87 1.165 2.405.4 3.842.4c1.16 0 2.22-.092 3.183-.278s1.686-.382 2.173-.591v4.904c-.927.231-1.965.434-3.112.608s-2.394.261-3.739.261z" class="H M"/><path d="M364.609 264.768c0 8.216-6.67 14.886-14.886 14.886h-56.595c-8.216 0-14.886-6.67-14.886-14.886s6.67-14.887 14.886-14.887h56.595c8.216 0 14.886 6.671 14.886 14.887z" fill="%23002aa3"/><path d="M364.609 257.961c0 8.217-6.67 14.887-14.886 14.887h-56.595c-8.216 0-14.886-6.67-14.886-14.887s6.67-14.886 14.886-14.886h56.595c8.216 0 14.886 6.67 14.886 14.886z" class="K"/><use xlink:href="%23S" class="G"/><clipPath id="F"><use xlink:href="%23S"/></clipPath><g clip-path="url(%23F)" class="B C D E F"><use xlink:href="%23T"/><use xlink:href="%23U"/><use xlink:href="%23V"/></g><use xlink:href="%23W" class="H"/><clipPath id="G"><use xlink:href="%23W"/></clipPath><g clip-path="url(%23G)" class="B C D E F"><use xlink:href="%23T"/><use xlink:href="%23U"/><use xlink:href="%23V"/></g><g class="B C"><use xlink:href="%23W" class="N"/><g class="D E I"><path d="M327.029 332.859c2.102 1.019 5.456.828 6.35-1.729 1.048-2.994-.169-6.765-.126-9.873.074-5.337 1.447-10.589 4.068-15.244 8.122-14.425 25.513-21.481 40.969-24.573m67.04 74.364c-1.77 3.403-4.729 6.562-7.341 9.301-8.335 8.743-17.521 11.941-29.375 9.862"/></g></g><use xlink:href="%23X" class="G"/><clipPath id="H"><use xlink:href="%23X"/></clipPath><g clip-path="url(%23H)"><g class="B C D E F"><use xlink:href="%23T"/><use xlink:href="%23U"/><use xlink:href="%23V"/></g><use xlink:href="%23Y" class="H"/><clipPath id="I"><use xlink:href="%23Y"/></clipPath><g clip-path="url(%23I)" class="B C D E F"><use xlink:href="%23T"/><use xlink:href="%23U"/><use xlink:href="%23V"/></g><use xlink:href="%23Y" class="B C N"/></g><path d="M378.29 281.44c6.843-1.368 11.664 1.651 2.878.48-18.207-2.427-39.682-9.594-47.966-27.821-6.457-14.204-3.245-24.192 4.501-31.098" class="B C D E I"/><use xlink:href="%23Z" class="G"/><clipPath id="J"><use xlink:href="%23Z"/></clipPath><g clip-path="url(%23J)"><path d="M216.193 240.375c0 2.754 1.618 6.162 2.737 8.593 2.124 4.618 5.96 10.288 10.205 13.184 4.326 2.951 10.088 4.369 15.115 5.546 3.563.834 10.029 4.443 13.715 3.866 5.872-.921 5.936-8.915 2.956-13.924-2.135-3.589-6.105-6.33-9.429-8.7-4.138-2.951-8.553-5.494-13.145-7.669-6.641-3.146-14.557-5.545-21.994-5.821l-.16 4.925z" class="H"/><g class="B C D E F"><path d="M210.027 258.5c-.198.39.138-.867.277-1.282a30.98 30.98 0 0 1 1.076-2.742c1.282-2.9 3.554-4.576 6.78-4.156m.625 14.41c-.989 0 1.523-5.221 2.142-5.658m17.107 26.815c-.6-.2-1.214-2.643-1.413-3.16-1.18-3.057-2.638-7.046-1.312-10.287 3.379-8.259 17.492-5.339 20.601 1.49"/></g></g><use xlink:href="%23a" class="G"/><clipPath id="K"><use xlink:href="%23a"/></clipPath><g clip-path="url(%23K)" class="B C D E F"><path d="M213.775 216.079c1.218-3.709 11.158-6.143 14.579-5.314m-6.205 14.344c0-3.528 5.696-5.22 8.237-5.627m8.027 43.034c-.863-.287-2.098-3.563-2.509-4.318-2.175-3.981-5.525-11.092-1.856-15.264 5.394-6.134 14.045-1.638 19.44 1.879 3.066 1.998 5.373 4.551 5.798 8.292"/></g><g class="B C D E I"><path d="M257.988 250.515c-1.635 10.4-8.59 16.55-21.998 9.846-3.681-1.84-18.029-14.376-25.946-27.33m24.582-99.692v55.703"/></g><ellipse cx="234.626" cy="71.196" rx="34.944" ry="38.648" fill="%233442d7"/><circle cx="234.626" cy="67.492" r="34.944" class="L"/><path d="M234.626 102.436c19.3 0 34.945-15.645 34.945-34.944 0 19.299-15.645 34.944-34.945 34.944z" class="B C D F"/><circle cx="234.626" cy="67.492" r="23.049" fill="%23dcdcdc"/><circle cx="234.626" cy="67.492" r="23.049" class="J"/><path d="M234.626 60.877c3.101-5.325 9.303-5.325 12.404-2.663s3.1 7.987 0 13.312c-2.171 3.993-7.753 7.987-12.404 10.65-4.65-2.663-10.232-6.657-12.403-10.65-3.1-5.325-3.1-10.649 0-13.312s9.303-2.662 12.403 2.663z" fill="%23469ef8"/></g><defs ><path id="M" d="M468.515 64.536l-40.985 40.99-10.818-10.741 40.985-40.99h-37.106v-15.31h55.574l7.65 7.655v55.559h-15.3V64.536z"/><path id="N" d="M468.515 237.14l-40.985 40.99-10.818-10.865 40.985-40.99h-37.106v-15.31h55.574l7.65 7.655v55.559h-15.3V237.14z"/><path id="O" d="M468.515 415.546l-40.985 40.99-10.818-10.865 40.985-40.99h-37.106v-15.309h55.574l7.65 7.654v55.559h-15.3v-37.039z"/><path id="P" d="M413.425 315.401c12.563 0 20.926 10.185 18.68 22.748l-20.57 115.028c-2.247 12.563-14.253 22.748-26.816 22.748H263.11c-12.564 0-20.927-10.185-18.68-22.748L265 338.149c2.246-12.563 14.252-22.748 26.815-22.748h121.61z"/><path id="Q" d="M327.025 378.369c-26.056-3.995-59.074-11.166-69.578-39.711-10.786-29.313-10.919-57.171 14.389-78.942 48.34-41.581 147.253-17.399 170.485 45.581 29.852 80.931-53.511 82.545-115.296 73.072z"/><path id="R" d="M382.128 259.376l-46.707 9.721c-.509 1.054-5.661-12.203-7.016-13.559-12.438-12.438-28.237-37.094-42.016-48.577-26.497-22.08-76.325-40.189-70.966-83.062 4.144-33.151 58.28-3.001 75.088 4.048 48.749 20.443 77.874 55.122 87.3 106.966 1.398 7.69 4.317 16.711 4.317 24.463z"/><path id="S" d="M371.183 354.56c-12.56 16.597-32.492-8.933-36.063-20.836-9.065-30.218 16.354-46.92 43.17-52.284 6.843-1.368 90.494-38.865 87.012 20.364-1.175 19.974-15.202 49.715-28.404 63.931-5.289 5.696-13.267 5.69-21.482 7.059-1.321.221-3.503.438-2.878-1.439.532-1.594 1.334-1.813 2.399-2.878"/><path id="T" d="M346.056 215.814c0 14.018 17.661 21.615 28.09 15.925 8.194-4.471 10.108-15.046 10.108-23.438"/><path id="U" d="M442.286 226.156c0 12.299-8.104 24.834-20.811 26.322"/><path id="V" d="M459.983 243.71c0 8.006-3.713 19.521-12.321 21.283"/><path id="W" d="M378.29 281.44c.193-.038.376-.2.549-.459a17.51 17.51 0 0 1 19.069-7.204c6.25 1.638 12.235 3.45 13.936 4.737 6.528 4.939-.653 12.309-20.3 9.112-7.111-1.157-14.336 4.055-20.332 7.892-11.488 7.348-16.707 20.133-26.677 28.664-2.378 2.035-6.547 4.587-10.463 5.395-5.64-27.606 18.654-43.024 44.218-48.137z"/><path id="X" d="M378.29 281.44c6.843-1.368-32.15.2-45.088-27.341-15.882-33.806 24.491-43.843 49.405-45.088 57.273-2.864 86.177 33.564 82.695 92.793-1.175 19.974-80.493 10.623-87.012-20.364z"/><path id="Y" d="M330.202 234.747l1.559.387c0 22.162 32.738 30.965 49.285 34.616l11.589 2.714c6.415 1.48 4.016 15.756-1.091 15.162-2.983-.346-54.434 16.347-61.94-1.47-.625-1.483 49.04-3.199 47.252-4.238 6.842-1.369-30.716-.278-43.654-27.819-3.567-7.592-4.297-13.986-3-19.352z"/><path id="Z" d="M249.295 285.354c-12.619 8.071-53.742-24.141-42.711-37.379 11.168-13.401 46.561 5.748 48.716 20.584.833 5.731-1.181 13.71-6.005 16.795z"/><path id="a" d="M235.99 260.361c-6.731-3.366-49.141-42.503-22.643-54.548 45.089-20.495 62.778 74.616 22.643 54.548z"/></defs></svg>');
        }
        
        h1 {
            display: block;
            justify-self: center;
            width: 40rem;
            align-self: end;
            color: @dark-mid-color;
            /* color: @light-color; */
            font-family: @extra-light-font;
            font-size: @title-font;
            text-align: center;
            line-height: calc(@small-line-height*1);
            z-index: 1;

            & strong {
                color: @light-color;
            }
        }
        p {
            display: block;
            justify-self: center;
            width: 30rem;
            color: @dark-mid-color;
            /* color: @white-color; */
            font-size: @mid-font*1.2;
            font-family: @light-font;
            text-align: center;
            z-index: 1;

            & strong {
                color: @light-color;
            }
        }
        a {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-self: center;
            /* width: 80px;
            height: 90px; */
            .svg();
            z-index: 1;
        }

        .arrow-hero {
            padding: @small-font;
        }

        .arrow-hero svg {
            transition: @transition;
        }

        .arrow-hero:hover {
            transform: scale(1.1);
            transition: @transition;
        }

        .arrow-hero:hover p {
            display: block;
            margin-bottom: @xlarge-font;
            transition: @transition;
        }

        .overlay-hero {
            .absolute();
            z-index: 0;
            overflow: hidden;

            &:hover a {
                background-color: transparent;
            }
    
            & a {
                .absolute();
                width: 120px;
                /* height: auto; */
                border-radius: @big-border-radius;
                transition: @transition;
                opacity: .2;
                z-index: 1;
                animation: move 10s infinite;
                animation-duration: 10s;

                & img {
                    border-radius: @big-border-radius;
                    animation: blur 6s infinite;

                    &:hover {
                        filter: blur(0);
                        animation: none;
                    }

                }

                &:nth-child(1) img {
                    animation-delay: 0s;
                }
                &:nth-child(2) img {
                    animation-delay: 2s;
                }
                &:nth-child(3) img {
                    animation-delay: 4s;
                }
                &:nth-child(4) img {
                    animation-delay: 6s;
                }
                &:nth-child(5) img {
                    animation-delay: 8s;
                }
                &:nth-child(6) img {
                    animation-delay: 10s;
                }

                @keyframes blur {
                    0% {
                        filter: blur(0);
                        transform: scale(1);
                    }
                    50% {
                        filter: blur(1px);
                        transform: scale(0.98);
                    }
                    100% {
                        filter: blur(0);
                        transform: scale(1);
                    }
                }

                &:hover {
                    opacity: 1;
                    transition: @transition;
                    z-index: 2;
                }

                @keyframes move {
                    0% {
                        transform: translateY(0) scale(1);
                    }
                    50% {
                        transform: translateY(-0.5%) scale(1.01);
                    }
                    100% {
                        transform: translateY(0) scale(1);
                    }
                }
            }

            img:hover {
                transform: scale(1.2);
                width: 155px;
                transition: @transition;
            }


            a:nth-child(1) {
                left: 20%;
                top: 11%;
                & img {
                    width: 150px;
                }
            }
            a:nth-child(1):hover, a:nth-child(2):hover {
                top: 12%;
                transition: @transition;
            }
            & a:nth-child(2) {
                top: 12%;
                left: auto;
                right: 10%;
                animation-duration: 12s;
                & img {
                    width: 150px;
                }
            }
            a:nth-child(3) {
                top: auto;
                bottom: 15%;
                left: 2;
                & img {
                    width: 240px;
                }
                &:hover {
                    left: 2%;
                }

            }
            a:nth-child(4) {
                top: auto;
                bottom: 0%;
                left: 25%;
                right: auto;
                animation-duration: 15s;
                & img {
                    width: 160px;
                }
            }
            a:nth-child(4):hover {
                bottom: 5%;
            }
            a:nth-child(5) {
                top: auto;
                bottom: 1%;
                left: auto;
                right: 20%;
                animation-duration: 8s;
                & img {
                    width: 160px;
                }
            }
            a:nth-child(5):hover {
                bottom: 5%;
            }
            a:nth-child(6) {
                top: auto;
                bottom: 15%;
                left: auto;
                right: -2%;
                animation-duration: 14s;
                & img {
                    width: 180px;
                }
            }
            a:nth-child(6):hover {
                right: 2%;
            }
        }
    }

    
}

/* ********************************************** */
/* Projects */
section.projects {
    overflow: hidden;

    h2:first-child {
        display: none;
    }

    .grid-projects {
        display: grid;
        grid-template-columns: repeat(10, 10vw);
        grid-template-rows: @title-font repeat(12, 10vw);

        .project-item {
            position: relative;
            width: 100%;
            height: 100%;
            padding: @small-font;
            background-color: @light-color;
            background-size: cover;
            background-position: center;
            border-radius: @border-radius;
            transition: @transition;
            box-sizing: border-box;

            & img {
                display: none;
            }
        }

        .project-item.text {
            position: relative;
            width: 100%;
            height: 100%;
            padding: 0;
            background-color: initial;
            border-radius: none;
            transition: @transition;
            box-sizing: border-box;
        }

        .project-item.text h3 {
            color: @light-color;
        }

        .project-item.text p {
            color: @dark-mid-color;
            font-family: @extra-light-font;
        }

        .project-item:hover {
            background-color: @accent-color;
            transition: @transition;
            transform: scale(1.4);
            z-index: 2;
            cursor: pointer;
        }

        /* .project-item:hover ~ :not(.project-item:hover) {
            opacity: 0.5;
        } */
        
        /* .project-item:hover ~ :not(.project-item:hover) {
            opacity: 0.5;
        } */

        .project-item.text:hover {
            background-color: initial;
            transition: @transition;
            transform: none;
            cursor: auto;
        }

        /* .project-item h3, .project-item p {
            width: calc(10vw * 3);
            position: absolute;
            top: 110%;
            margin: 0;
            padding: 0;
        }

        .project-item p {
            position: absolute;
            top: 130%;
        } */

        /* Corresponde a las imágenes */
        .project-item:nth-child(1) {
            grid-column: 7 / span 3;
            grid-row: 2 / span 2;
            background-image: url('../images/p-tape.jpg');
        }
        .project-item:nth-child(2) {
            grid-column: 2 / span 4;
            grid-row: 3 / span 2;
            background-image: url('../images/p-poemario3.jpg');
        }
        .project-item:nth-child(3) {
            grid-column: 2 / span 1;
            grid-row: 7 / span 1;
            background-image: url('../images/p-rdelaj.jpg');
        }
        .project-item:nth-child(3):hover {
            transform: scale(3);
        }

        .project-item:nth-child(4) {
            grid-column: 6 / span 2;
            grid-row: 6 / span 3;
            background-image: url('../images/p-nution4.jpg');
        }
        .project-item:nth-child(5) {
            grid-column: 9 / span 1;
            grid-row: 5 / span 2;
            width: 100%;
            background-image: url('../images/p-chollo.jpg');
        }
        .project-item:nth-child(5):hover {
            grid-column: 8 / span 2;
            grid-row: 5 / span 2;
            width: 120%;
            background-size: 130%;
        }
        .project-item:nth-child(6) {
            grid-column: 9 / span 1;
            grid-row: 8 / span 1;
            background-image: url('../images/p-slowlife.jpg');
        }
        .project-item:nth-child(6):hover {
            transform: scale(3);
            background-size: 130%;
        }
        .project-item:nth-child(7) {
            grid-column: 8 / span 2;
            grid-row: 10 / span 2;
            background-image: url('../images/p-abastores.jpg');
        }
        .project-item:nth-child(8) {
            grid-column: 5 / span 1;
            grid-row: 10 / span 2;
            background-image: url('../images/p-cuartodetono2.jpg');
        }
        .project-item:nth-child(8):hover {
            grid-column: 4 / span 2;
        }
        .project-item:nth-child(9) {
            grid-column: 2 / span 2;
            grid-row: 9 / span 3;
            background-image: url('../images/p-freepik.jpg');
        }
        .project-item:nth-child(10) {
            grid-column: 6 / span 1;
            grid-row: 12 / span 1;
            background-image: url('../images/p-madblading2.jpg');
        }
        .project-item:nth-child(10):hover {
            transform: scale(3);
        }

        /* Corresponde a los textos */
        .project-item:nth-child(11) {
            grid-column: 7 / span 3;
            grid-row: 4 / span 1;
        }
        .project-item:nth-child(12) {
            grid-column: 2 / span 4;
            grid-row: 5 / span 1;
        }
        .project-item:nth-child(13) {
            grid-column: 2 / span 4;
            grid-row: 8 / span 1;
        }
        .project-item:nth-child(14) {
            grid-column: 6 / span 2;
            grid-row: 9 / span 1;
        }
        .project-item:nth-child(15) {
            grid-column: 9 / span 2;
            grid-row: 7 / span 1;
        }
        .project-item:nth-child(16) {
            grid-column: 9 / span 2;
            grid-row: 9 / span 1;
        }
        .project-item:nth-child(17) {
            grid-column: 8 / span 2;
            grid-row: 12 / span 1;
        }
        .project-item:nth-child(18) {
            grid-column: 6 / span 2;
            grid-row: 10 / span 1;
            padding: 0 @small-font;
        }
        .project-item:nth-child(19) {
            grid-column: 2 / span 2;
            grid-row: 12 / span 1;
        }
        .project-item:nth-child(20) {
            grid-column: 6 / span 2;
            grid-row: 13 / span 1;
        }

        /* Líneas/guías de fondo */
        @line-projects-config: 2px solid @dark-mid-color;
        .line-projects {
            margin: 50px;
            border-radius: @border-radius;
            opacity: 0.2;
            z-index: -2;
            transition: @transition;
        }
        .opacity-line {
            transition: @transition;
            opacity: 0.05;
            z-index: -2;
        }
        .line-projects:nth-of-type(1) {
            grid-column: 2 / span 6;
            grid-row: 2 / span 3;
            border-top: @line-projects-config;
            border-left: @line-projects-config;
            border-bottom-left-radius: 0;
            border-top-right-radius: 0;
        }
        .line-projects:nth-of-type(2) {
            grid-column: 2 / span 6;
            grid-row: 4 / span 4;
            border-left: @line-projects-config;
            border-bottom: @line-projects-config;
            border-top-left-radius: 0;
            border-bottom-right-radius: 0;
        }
        .line-projects:nth-of-type(3) {
            grid-column: 7 / span 4;
            grid-row: 5 / span 3;
            border-top: @line-projects-config;
            border-right: @line-projects-config;
            border-left: @line-projects-config;
            border-radius: @border-radius @border-radius 0 0;
        }
        .line-projects:nth-of-type(4) {
            grid-column: 9 / span 2;
            grid-row: 7 / span 2;
            margin-top: calc(@title-font - 10px);
            border-bottom: @line-projects-config;
            border-right: @line-projects-config;
            border-top-right-radius: 0;
            border-bottom-left-radius: 0;
        }
        .line-projects:nth-of-type(5) {
            grid-column: 2 / span 8;
            grid-row: 8 / span 4;
            border-bottom: @line-projects-config;
            border-right: @line-projects-config;
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
        }
        .line-projects:nth-of-type(6) {
            grid-column: 2 / span 5;
            grid-row: 11 / span 2;
            /* margin-right: 65px; */
            border-bottom: @line-projects-config;
            border-left: @line-projects-config;
            border-bottom-right-radius: 0;
            border-top-left-radius: 0;
            border-bottom-right-radius: 0;
        }
        .line-projects:nth-of-type(7) {
            grid-column: 5 / span 2;
            grid-row: 12 / span 2;
            /* margin-top: 44px; */
            margin-bottom: -10px;
            border-right: @line-projects-config;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        &.project-page {
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: initial;
            grid-auto-rows: 300px;
            gap: @xsmall-font;
            padding: @xsmall-font;
            padding-top: @title-font*1.6;
            padding-bottom: @title-font;
            border-bottom: 1px solid @accent-color;

            & .project-item {
                grid-column: span 1;
                grid-row: span 1;
                padding: @title-font;
                position: relative;
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                justify-content: flex-end;
                overflow: hidden;
                z-index: 1;

                &::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.7));
                    /* border-radius: @border-radius; */
                    z-index: -1;
                }

                &+.text {
                    display: flex;
                    flex-direction: column;
                    flex-wrap: wrap;
                    justify-content: flex-end;
                    z-index: 2;
                    cursor: pointer;

                    & h3, & p {
                        cursor: pointer;
                    }
                }

                &:nth-child(1), &:nth-child(5), &:nth-child(6), &:nth-child(8) {
                    grid-column: span 1;
                    grid-row: span 1;
                    width: 100%;
                    background-size: cover;
                    cursor: pointer;

                    & h3, & p {
                        cursor: pointer;
                    }
                }

                &:nth-child(5) {
                    grid-row: span 2;
                    background-size: cover;
                }

                &:nth-child(9) {
                    grid-column: span 2;
                }

                &:hover {
                    transform: scale(1.01);
                }

                
            }
        }

        
        
    }

    
}

@media screen and (max-width: 1140px) {
    section.projects {
        overflow: hidden;
    
        h2:first-child {
            display: none;
        }

        .grid-projects {
            & .tag {
                display: none;
            }

            /* Corresponde a las imágenes */
            .project-item:nth-child(1) {
                grid-column: 7 / span 3;
                grid-row: 2 / span 2;
                background-image: url('../images/p-tape.jpg');
            }
            .project-item:nth-child(2) {
                grid-column: 2 / span 4;
                grid-row: 2 / span 2;
                background-image: url('../images/p-poemario3.jpg');
            }
            .project-item:nth-child(3) {
                grid-column: 2 / span 2;
                grid-row: 6 / span 2;
                background-image: url('../images/p-rdelaj.jpg');
            }
            .project-item:nth-child(3):hover {
                transform: scale(1.5);
            }

            .project-item:nth-child(4) {
                grid-column: 5 / span 2;
                grid-row: 5 / span 2;
                background-image: url('../images/p-nution4.jpg');
            }
            .project-item:nth-child(5) {
                grid-column: 8 / span 3;
                grid-row: 5 / span 2;
                width: 100%;
                background-image: url('../images/p-chollo.jpg');
            }
            .project-item:nth-child(5):hover {
                grid-column: 8 / span 3;
                grid-row: 5 / span 2;
                width: 120%;
                background-size: cover;
                /* background-position: -35px 50%; */
            }
            .project-item:nth-child(6) {
                grid-column: 8 / span 2;
                grid-row: 8 / span 1;
                background-image: url('../images/p-slowlife.jpg');
                background-size: cover;
                background-position: 0%;
            }
            .project-item:nth-child(6):hover {
                grid-column: 8 / span 2;
                grid-row: 7 / span 2;
                transform: scale(1.5);
                background-size: cover;
                background-position: 0%;
            }
            .project-item:nth-child(7) {
                grid-column: 8 / span 3;
                grid-row: 10 / span 2;
                background-image: url('../images/p-abastores.jpg');
            }
            /* .project-item:nth-child(7):hover {
                background-position: -30px 50%;
            } */
            .project-item:nth-child(8) {
                grid-column: 5 / span 2;
                grid-row: 8 / span 2;
                background-image: url('../images/p-cuartodetono2.jpg');
            }
            .project-item:nth-child(8):hover {
                grid-column: 5 / span 2;
            }
            .project-item:nth-child(9) {
                grid-column: 2 / span 2;
                grid-row: 9 / span 3;
                background-image: url('../images/p-freepik.jpg');
            }
            .project-item:nth-child(10) {
                grid-column: 5 / span 2;
                grid-row: 11 / span 2;
                background-image: url('../images/p-madblading2.jpg');
            }
            .project-item:nth-child(10):hover {
                transform: scale(1.5);
            }

            /* Corresponde a los textos */
            .project-item:nth-child(11) {
                grid-column: 7 / span 3;
                grid-row: 4 / span 1;
            }
            .project-item:nth-child(12) {
                grid-column: 2 / span 4;
                grid-row: 4 / span 1;
            }
            .project-item:nth-child(13) {
                grid-column: 2 / span 2;
                grid-row: 8 / span 1;
            }
            .project-item:nth-child(14) {
                grid-column: 5 / span 2;
                grid-row: 7 / span 1;
            }
            .project-item:nth-child(15) {
                grid-column: 8 / span 1;
                grid-row: 7 / span 1;
            }
            .project-item:nth-child(16) {
                grid-column: 9 / span 2;
                grid-row: 9 / span 1;
            }
            .project-item:nth-child(17) {
                grid-column: 8 / span 2;
                grid-row: 12 / span 1;
            }
            .project-item:nth-child(18) {
                grid-column: 6 / span 2;
                grid-row: 9 / span 1;
                padding: 0 @small-font;
            }
            .project-item:nth-child(19) {
                grid-column: 2 / span 2;
                grid-row: 12 / span 1;
            }
            .project-item:nth-child(20) {
                grid-column: 6 / span 2;
                grid-row: 12 / span 1;
            }

            /* Líneas/guías de fondo */
        @line-projects-config: 2px solid @dark-mid-color;
        .line-projects {
            margin: 50px;
            border-radius: @border-radius;
            opacity: 0.2;
            z-index: -2;
            transition: @transition;
        }
        .opacity-line {
            transition: @transition;
            opacity: 0.05;
            z-index: -2;
        }
        .line-projects:nth-of-type(1) {
            grid-column: 3 / span 6;
            grid-row: 2 / span 2;
            border-top: @line-projects-config;
            border-left: @line-projects-config;
            border-bottom-left-radius: 0;
            border-top-right-radius: 0;
        }
        .line-projects:nth-of-type(2) {
            grid-column: 3 / span 4;
            grid-row: 3 / span 4;
            border-left: @line-projects-config;
            border-bottom: @line-projects-config;
            border-top-left-radius: 0;
            border-bottom-right-radius: 0;
        }
        .line-projects:nth-of-type(3) {
            grid-column: 6 / span 4;
            grid-row: 5 / span 2;
            border-top: @line-projects-config;
            border-right: @line-projects-config;
            border-left: @line-projects-config;
            border-radius: @border-radius @border-radius 0 0;
        }
        .line-projects:nth-of-type(4) {
            grid-column: 9 / span 2;
            grid-row: 6 / span 3;
            margin-top: calc(@title-font - 10px);
            border-bottom: @line-projects-config;
            border-right: @line-projects-config;
            border-top-right-radius: 0;
            border-bottom-left-radius: 0;
        }
        .line-projects:nth-of-type(5) {
            grid-column: 2 / span 7;
            grid-row: 8 / span 3;
            border-bottom: @line-projects-config;
            border-right: @line-projects-config;
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
        }
        .line-projects:nth-of-type(6) {
            grid-column: 2 / span 5;
            grid-row: 11 / span 1;
            /* margin-right: 65px; */
            border-bottom: @line-projects-config;
            border-left: @line-projects-config;
            border-bottom-right-radius: 0;
            border-top-left-radius: 0;
            border-bottom-right-radius: 0;
        }
        .line-projects:nth-of-type(7) {
            grid-column: 5 / span 2;
            grid-row: 12 / span 2;
            /* margin-top: 44px; */
            margin-bottom: -10px;
            border-right: @line-projects-config;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
        }
    
        .grid-projects {
            /* display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: @title-font repeat(39, 150px);
            gap: 10px;
            padding: 10px; */
            
            &.project-page {
                grid-template-columns: 1fr 1fr;
                grid-template-rows: repeat(10, 150px);
                grid-auto-rows: 300px;
                gap: @xsmall-font;
                padding: @xsmall-font;
                padding-top: @title-font*1.6;
                padding-bottom: @title-font;
                border-bottom: 1px solid @accent-color;

                & .project-item:nth-child(1), & .project-item:nth-child(2), & .project-item:nth-child(3), & .project-item:nth-child(4), & .project-item:nth-child(5), & .project-item:nth-child(6), & .project-item:nth-child(7), & .project-item:nth-child(8), & .project-item:nth-child(9), & .project-item:nth-child(10), & .project-item:nth-child(11), & .project-item:nth-child(12), & .project-item:nth-child(13), & .project-item:nth-child(14), & .project-item:nth-child(15), & .project-item:nth-child(16), & .project-item:nth-child(17), & .project-item:nth-child(18), & .project-item:nth-child(19), & .project-item:nth-child(20) {
                    grid-column: span 1;
                    grid-row: span 2;
                    

                    &:hover {
                        transform: scale(1.01);

                    }
                }

                .project-item:nth-child(5):hover {
                    width: initial;
                    background-size: cover;
                    /* background-position: center; */
                }
                .project-item:nth-child(6):hover {
                    transform: scale(1.01);
                    background-size: cover;
                    /* background-position: center; */
                }
                .project-item:nth-child(7):hover {
                    width: initial;
                    background-size: cover;
                    /* background-position: center; */
                }

                & .tag {
                    display: block;
                }
            }
            
            /* .project-item:hover, .project-item:nth-child(1):hover, .project-item:nth-child(2):hover, .project-item:nth-child(3):hover, .project-item:nth-child(4):hover, .project-item:nth-child(5):hover, .project-item:nth-child(6):hover, .project-item:nth-child(7):hover, .project-item:nth-child(8):hover, .project-item:nth-child(9):hover, .project-item:nth-child(10):hover, .project-item:nth-child(11):hover, .project-item:nth-child(12):hover, .project-item:nth-child(13):hover, .project-item:nth-child(14):hover, .project-item:nth-child(15):hover, .project-item:nth-child(16):hover, .project-item:nth-child(17):hover, .project-item:nth-child(18):hover, .project-item:nth-child(19):hover, .project-item:nth-child(20):hover {
                background-color: @accent-color;
                transition: @transition;
                transform: scale(1.04);
                z-index: 2;
                cursor: pointer;
            }

            & .project-item:nth-child(1), & .project-item:nth-child(2), & .project-item:nth-child(3), & .project-item:nth-child(4), & .project-item:nth-child(5), & .project-item:nth-child(6), & .project-item:nth-child(7), & .project-item:nth-child(8), & .project-item:nth-child(9), & .project-item:nth-child(10), & .project-item:nth-child(11), & .project-item:nth-child(12), & .project-item:nth-child(13), & .project-item:nth-child(14), & .project-item:nth-child(15), & .project-item:nth-child(16), & .project-item:nth-child(17), & .project-item:nth-child(18), & .project-item:nth-child(19), & .project-item:nth-child(20) {
                grid-column: span 1;
                grid-row: span 4;
                
            }

            & .line-projects, & .line-projects:nth-of-type(1), & .line-projects:nth-of-type(2), & .line-projects:nth-of-type(3), & .line-projects:nth-of-type(4), & .line-projects:nth-of-type(5), & .line-projects:nth-of-type(6), & .line-projects:nth-of-type(7) {
                display: none;
            }

            & .project-item:nth-child(11), & .project-item:nth-child(12), & .project-item:nth-child(13), & .project-item:nth-child(14), & .project-item:nth-child(15), & .project-item:nth-child(16), & .project-item:nth-child(17), & .project-item:nth-child(18), & .project-item:nth-child(19), & .project-item:nth-child(20) {
                display: none;
            } */

        }

}


}

/* ********************************************** */
/* Highlights */
section.highlight {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: @height/2;
    padding: @mid-font;
    & h2 {
        font-size: @xlarge-font*1.5;
        color: @dark-mid-color;
        & strong {
            color: @white-color;
        }
    }

    & p {
        width: 50%;
        color: @dark-mid-color;
        font-size: @mid-font*1.2;
        & strong {
            color: @white-color;
        }
    }
}


/* ********************************************** */
/* Services */
section.services {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: @small-font;
    background-color: @dark-mid-color;

    h2 {
        margin-bottom: calc(@title-font*3);
        font-family: @extra-light-font;
        font-size: calc(@title-font/1.6);
    }

    .btn_toggle {
        margin-bottom: @large-font;
    }

    .contain_toggle {
        .display-flex-center();
        padding: 0 @xlarge-font 0 0;
        /* margin-top: @mid-font; */

        & p {
            width: 96%;
            padding: 0 @xlarge-font 0 0;
            color: @dark-color;
            font-size: @large-font/1.1;
            line-height: 1.2;
        }

        & a {
            .display-flex-center();
            box-sizing: border-box;

            & svg {
                width: 40px;
                height: 50px;
                margin-right: 20px;
                fill: none;
                stroke: #ebebe9;
                stroke-width: 2px;
                transform: rotate(-90deg);
            }

            &:hover svg {
                stroke: @white-color;
            }
        }

        & .btn_services {
            width: 70%;
            background-color: @dark-color;
            border-radius: @border-radius;
          }
          
        & .btn_services:hover {
            width: 70%;
            color: @white-color;
            background-color: @accent-color;
          }

    }
}

/* ********************************************** */
/* FOOTER */

footer {
    position: relative;
    .display-grid-center();
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 20px 50px;
    gap: @xsmall-font;
    height: 20rem;
    margin-top: @large-font;
    padding: @small-font;
    background-color: @accent-color;
    overflow: hidden;
    justify-content: center;

    & h2 {
        grid-column: 1 / span 2;
        grid-row: 1 / span 1;
        font-size: calc(@title-font/1.5);
        font-weight: 900;
    }

    & .img-footer {
        grid-column: 4 / span 1;
        grid-row: 1 / span 1;
        width: 100%;
        height: auto;
        border-radius: @border-radius;
    }

    /* & .arrow-footer {
        width: 200px;
        height: 90px;
        grid-column: 4 / span 1;
        grid-row: 1 / span 1;
        .display-flex-center();
        justify-content: end;
        justify-self: end;
        padding: 0 @xsmall-font;
    } */
    
    & .arrow-footer:hover {
        width: 200px;
        height: 90px;
        justify-content: center;
        color: @light-color;
        /* padding: @mid-font @large-font; */
        background-color: @accent-color;
        border-radius: @border-radius;
        transform: translateY(4px);
        box-shadow: 0 4px 0 darken(@accent-color, 20%);
    }

    & .arrow-footer:hover svg {
        stroke-width: 3px;
    }

    & .arrow-footer:active, .arrow-footer:focus, .arrow-footer:target {
        color: @white-color;
        transform: translateY(4px);
        box-shadow: 0 4px 0 darken(@accent-color, 20%);
        transition: @transition;
    }

    & .arrow-footer p {
        position: relative;
        left: -25px;
        width: 0%;
        opacity: 0;
    }

    & .arrow-footer:hover p {
        display: block;
        left: 0;
        width: 100%;
        margin-left: @xsmall-font;
        opacity: 1;
        transition: @transition;
    }

    & .arrow-footer:hover svg {
        width: 50px;
        height: 50px;
        margin-right: @xsmall-font;
        transition: @transition;
    }

    & .arrow-footer:hover {
        transform: scale(1.1);
        transition: @transition;
    }

    & svg {
        width: 80px;
        height: 90px;
        padding: 0 @xsmall-font;
        transform: rotate(-90deg);
        .svg();
    }

    & .email-footer {
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self: flex-start;
        padding-top: @small-font;
        font-size: @xlarge-font*2;
        font-weight: 100;
    }

    & .email-footer a {
        display: inline-block;
        width: 100%;
        margin-top: @large-font;
        border: 1px solid @dark-color;
    }

    & .email-footer a:hover {
        position: relative;
        display: block;
        color: @white-color;
        border: 1px solid @dark-color;
        padding: @xsmall-font;
        transition: @transition;
    }

    .box-webmap:nth-of-type(2) {
        grid-column: 1 / span 1;
        grid-row: 3 / span 1;
    }
    .box-webmap:nth-of-type(3) {
        grid-column: 3 / span 1;
        grid-row: 3 / span 1;
    }
    .box-webmap:nth-of-type(4) {
        grid-column: 4 / span 1;
        grid-row: 3 / span 1;
    }

    .box-webmap h3 {
        margin-bottom: @large-font;
        padding-bottom: @xsmall-font;
        color: @dark-mid-color;
        border-bottom: 2px solid @dark-mid-color;
        font-size: @small-font;
    }

    .box-webmap a {
        display: block;
        margin-bottom: @xsmall-font;
        color: @light-color;
        font-size: @small-font;
    }
    .box-webmap a:hover, .legal p:hover, .legal a:hover {
        display: block;
        color: @white-color;
        background-color: @dark-color;
    }
    .legal {
        grid-column: 1 / span 4;
        grid-row: 4 / span 1;
        display: grid;
        grid-template-columns: repeat(4, 25.3%);
        padding-top: 25px;
        padding-bottom: 25px;
        border-top: 1px solid @dark-mid-color;
    }

    .legal, .legal p, .legal a {
        justify-items: start;
        font-size: @small-font;
        color: @dark-mid-color;
        text-align: center;
    }

    .legal p {
        color: @white-color;
    }

    & .overlay-footer {
        display: flex;
        align-items: center;
        .absolute();
        width: 100%;
        height: 100%;
        opacity: .2;
        z-index: -1;
    }

    & .line-overlay-footer {
        .absolute();
        top: 12.5rem;
        left: 0;
        display: block;
        width: 160%;
        height: 1px;
        margin: 0 -100px;
        background-color: #0142fe;
        z-index: 1;
    }

    & .email-footer:hover .overlay-footer .line-overlay-footer {
        opacity: 0;
        height: 10px;
        transition: @transition;
        animation-play-state: running;
    }
    
}


    .legal-article {
        padding: @title-font*2 @title-font @title-font @title-font;

        & h1 {
            font-size: @title-font*1.5;
            font-family: @extra-light-font;
            color: @dark-mid-color;
        }
        & h2 {
            margin-top: @title-font;
            font-size: @xlarge-font;
            font-family: @extra-light-font;
            color: @dark-mid-color;
        }
        & p, li {
            font-family: @extra-light-font;
            line-height: @medium-line-height;
        }
    }


/* ********************************************** */
/* ********************************************** */
/* ********************************************** */
/* ********************************************** */
/* ABOUT */
section.aboutus {
    padding: 19.5rem 60px 30px 60px;

    @media (max-width: 845px) {
        padding: 11.5rem 30px 30px 30px;
    }
}
section.aboutus h1 {
    color: @dark-mid-color;
    font-family: @extra-light-font;
    font-size: 7vw;
    line-height: @small-line-height;
}

section.aboutus h1 strong {
    color: @white-color;
}

section.aboutus h2, section.aboutus p, section.aboutus li {
    margin-top: @large-font;
    color: @light-mid-color;
    font-family: @extra-light-font;
}

section.aboutus h2 {
    font-size: @title-font/1.4;
    font-weight: bold;
    text-decoration: underline;
    /* border-bottom: 5px solid @light-color; */
}

section.aboutus p {
    color: @dark-mid-color;
    font-size: @large-font;
    line-height: @medium-line-height;
}

.aboutus {
    background-attachment: scroll;
    background-size: 300%;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: color-burn;
    .display-grid-center();
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 15vh 25vw 40vw 5vw;

    & .cover-aboutus {
        grid-column: 1 / span 3;
        grid-row: 1 / span 1;
    }
    & .item1-aboutus {
        grid-column: span 2;
        grid-row: span 2;
    }
    & .item2-aboutus {
        grid-column: 2 / span 2;
        grid-row: 3 / span 1;
        & p {
            display: inline-block;
            width: @height/1.5;
        }
        & li {
            color: @white-color;
            font-size: @title-font/1.4;
        }
    }
    & .item3-aboutus {
        grid-column: 1 / span 2;
        grid-row: 4 / span 1;
    }

    & .cover-aboutus {
        & .image-aboutus {
            .absolute();
            top: 7rem;
            width: 10rem;
            height: 10rem;
            overflow: hidden;
            border-radius: 0 @border-radius @border-radius 0;
            z-index: 0;

            & img {
                width: 100%;
                height: auto;
                position: absolute;
            }
        }
    }

    @media (max-width: 845px) {
        
        & .cover-aboutus {
            & .image-aboutus {
                top: 1rem;
                z-index: 2;
            }

        }
        
    }

}

/* ********************************************** */
/* PROCESS */
section.process {
    & p {
        font-size: @large-font;
    }

    .display-grid-center();
    grid-template-columns: 1fr 100px 1fr 1fr;
    grid-template-rows: 200px 100px 1fr;
    padding: 0 @title-font @title-font @title-font;
    background-color: @dark-color;

    & .title-process {
        grid-column: 1 / span 4;
        grid-row: 1 / span 1;
        font-size: @title-font/1.5;
        color: @dark-mid-color;
        font-family: @extra-light-font;
        text-decoration: underline;
    }
    
    & .text-process {
        grid-column: 1 / span 1;
        grid-row: 2 / span 1;
        align-self: flex-start;
        font-size: @large-font;
        color: @light-mid-color;
        font-family: @extra-light-font;
    }

    & .svg-process {
        display: flex;
        grid-column: 1 / span 1;
        grid-row: 3 / span 1;
        justify-self: center;
        height: 100%;
        stroke-width: 1px;
        stroke: @dark-mid-color;
        animation: rotate-process 10s infinite;
        animation-timing-function: linear;
        z-index: 0;
    }

    & .svg-process:hover {
        animation-play-state: paused;
    }

    @keyframes rotate-process {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(-360deg);
        }
    }

    & .list-process {
        grid-column: 3 / span 2;
        grid-row: 2 / span 2;
        align-self: flex-start;
        font-size: @title-font/1.4;
        color: @light-mid-color;
        font-family: @extra-light-font;

        & ol {
            display: block;
            list-style-type: decimal;
            margin-block-start: 0em;
            margin-block-end: 0em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            padding-inline-start: 0px;

            & li {
                padding-bottom: @large-font;

                & p {
                    margin-top: @xsmall-font;
                    margin-bottom: @xsmall-font;
                }
            }
        }
    }
}

/* ********************************************** */
/* FAQ */
section.container-faq {
    padding: @xsmall-font;
    background-color: @dark-color;

    & .faq {
        position: relative;
        padding: @xlarge-font;
        background-color: @light-mid-color;
        border-radius: @border-radius;
        grid-template-rows: 55% 25% 15%;
    
        & h2 {
            align-self: start;
            margin-bottom: calc(@title-font*3);
            color: @dark-color;
            font-family: @extra-light-font;
            font-size: calc(@title-font/1.6);
        }
    
        & .toggle h3 {
            color: @dark-color;
            border-bottom: 5px solid @dark-color;
        }
    
        & .toggle a {
            color: @dark-color;
        }

        & .toggle .btn_cta {
            color: @light-color;
        }

        & .toggle .btn_cta:hover {
            color: @white-color;
            font-weight: bold;
        }
    
        & .toggle .btn_toggle {
            display: flex;
            margin-bottom: @large-font;
            color: @dark-color;

            & span {
                margin-top: -5px;
                margin-right: @xsmall-font;
                color: @accent-color;
                font-size: @title-font;
            }

        }
    
        & .contain_toggle {
            .display-flex-center();
            padding: 0 @xlarge-font 0 0;
            /* margin-top: @mid-font; */

            & p {
                width: 96%;
                padding: 0 @xlarge-font 0 0;
                color: @dark-color;
                font-size: @large-font/1.1;
                line-height: 1.2;
            }
    
            & a {
                .display-flex-center();
                color: @white-color;
                
                & svg {
                    width: 40px;
                    height: 50px;
                    margin-right: 20px;
                    fill: none;
                    stroke: #ebebe9;
                    stroke-width: 2px;
                    transform: rotate(-90deg);
                }
                
            }

            & .btn_services {
                width: 70%;
                background-color: @dark-color;
                border-radius: @border-radius;
              }
              
            & .btn_services:hover {
                width: 70%;
                color: @white-color;
                background-color: @accent-color;
              }

            
    
        }
    }

    .containerSmallFaq {
        margin-top: 62pt;
        padding-bottom: 48pt;
      }
      
      .containerSmallFaq h2 {
        text-transform: uppercase;
        text-align: center;
      }
      
      .gridSmallFaq {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-auto-columns: minmax(50px, 100%);
        gap: 10px;
        padding-top: 36pt;
      }
      
      .itemSmallFaq {
        width: 100%;
        height: 100%;
        padding: 24pt;
        background-color: #DCDCDC;
        border-radius: 50px;
        box-sizing: border-box;
      }
      
      .alignSmallFaq {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 12pt;
      }
      
      .iconSmallFaq {
        width: 50px;
        height: 50px;
        margin-bottom: 12pt;
        background-color: white;
        border-radius: 15px;
      }
      
      .textSmallFaq h3 {
        font-weight: 900;
        margin-bottom: 6pt;
      }
      
      .textSmallFaq h3, .textSmallFaq p {
        color: rgb(22, 24, 37);
        font-size: 16px;
        text-align: left;
      }
}

/* ********************************************** */
/* ********************************************** */
/* ********************************************** */
/* ********************************************** */
/* CONTACT */
section.contact {
    .display-grid-center();
    grid-template-columns: 1fr;
    align-items: start;
    justify-items: center;
    gap: @xlarge-font;
    /* margin: @large-font @title-font; */
    /* padding: @title-font*4.5 @large-font @title-font*2 @large-font; */
    background-color: @accent-color;

    & .title-contact a {
        text-decoration: underline;
    }

    & .title-contact h1 {
        margin-bottom: 10px;
    }

    & .title-contact {
        display: flex;
        flex-direction: column;
        padding: @title-font;
        & a {
            margin-bottom: 10px;
            font-size: 50px;
            text-decoration: underline;
            text-decoration: underline;

            &:hover {
                color: #FFFFFF;
                background-color: black;
                text-decoration: none;
            }
        }
    }


    & .form-contact form {
        .display-grid-center();
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 0.3fr 0.3fr 1fr 1fr 0.3fr;
        gap: @xlarge-font;
        padding: @xlarge-font @xlarge-font @title-font @xlarge-font;
        color: @dark-color;
        background-color: @light-mid-color;
        border-radius: @big-border-radius;
        box-shadow: 0 0 10px 0 darken(@accent-color, 20%);

        & .name-contact, & .email-contact, & .website-contact, & .budget-contact, & .services-contact, & .message-contact {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            height: 100%;
        }

        & label {
            margin-bottom: @xsmall-font;
        }

        & input, & select, & textarea {
            padding: @xsmall-font;
            border-radius: @border-radius;
            box-sizing: border-box;
        }

        & .services-contact {
            grid-column: 1 / span 2;
            
            & div {
                font-size: @xlarge-font;
                color: @dark-color;
                font-family: @extra-light-font;
                text-decoration: none;
                display: flex;

                & input[type="checkbox"] {
                    display: inline-block;
                    vertical-align: middle;
                    position: relative;
                    appearance: none;
                    width: 20px;
                    min-width: 20px;
                    height: 20px;
                    margin-bottom: 6px;
                    margin-right: 10px;
                    padding: initial;
                    border: 2px solid #0142fe;
                    border-radius: 4px;
                    outline: none;
                    cursor: pointer;

                    &::before {
                        /* padding: 10px; */
                        background-color: @accent-color !important;
                    }
                }

                & input[type="checkbox"]::before {
                    content: "";
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 10px;
                    height: 10px;
                    background-color: #ebebe9;
                    border-radius: 2px;
                    opacity: 0;
                    transition: opacity 0.2s ease-in-out;
                }

                & input[type="checkbox"]:checked::before {
                    opacity: 1;
                }
            }
        }

        & .message-contact {
            grid-column: 1 / span 2;

            & textarea {
                width: 100%;
                max-width: 100%;
            }
        }

        & #honey {
            position: absolute;
            left: -10000px;
        }

        & button {
            grid-column: 1 / span 2;
            display: block;
            width: 100%;
        }
    }

    & h2 {
        color: @dark-mid-color;
        font-family: @extra-light-font;
        font-size: @title-font/1.5;
        text-decoration: underline;
    }

    & p {
        color: @light-mid-color;
        font-family: @extra-light-font;
        font-size: @large-font;
    }

    & .form {
        .display-grid-center();
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
}

/* ********************************************** */
/* ********************************************** */
/* ********************************************** */
/* ********************************************** */
/* PROJECTS */
section.project {

    & .cover-image-project {
        background-position: center;
        background-size: cover;
    }

    // Por accesibilidad se añaden las img en el html
    // Se ocultan por facilidad y control de diseño con css
    & .box-img-cover img, .item-project img {
        display: none;
    }

    & .box-img-cover {
        position: relative;
        /* width: 100%; */
        height: 60vw;
        min-height: 500px;
        max-height: 900px;
        overflow: hidden;
        background-size: cover;
    }

    /* Información del proyecto */
    & .about-project {
        .display-grid-center();
        align-items: start;
        grid-template-columns: 1fr 1fr 200px 1.5fr;
        grid-template-rows: repeat(4, 1fr);
        min-height: 500px;
        max-height: 900px;
        padding: @title-font;

        /* @media (min-width: 1400px) {
            width: 1400px;
            margin: 0 auto;
        } */

        & h1, & h2, & p {
            font-family: @extra-light-font;
            color: @dark-mid-color;
        }

        & h1 {
            color: @white-color;
            font-size: @title-font;
            text-transform: uppercase;

            @media screen and (max-width: 845px) {
                font-size: @title-font*0.8;
            }
        }

        & .index-about {
            margin-bottom: @xsmall-font;
            padding-bottom: @xsmall-font/5;
            border-bottom: 1px solid @dark-mid-color;
        }

        & .description-about {
            text-transform: initial;
        }

        & p {
            color: @dark-mid-color;
            font-size: @small-font;
            text-transform: uppercase;

            & span {
                display: inline-block;
                margin-bottom: @xsmall-font/4;
                color: @white-color;

                &::before {
                    content: "";
                    display: inline-block;
                    width: @xsmall-font;
                    height: @xsmall-font;
                    background-color: @accent-color;
                    border-radius: @big-border-radius;
                    margin: 0px @xsmall-font 2px 0px;
                    vertical-align: bottom;
                }
            }

            @media screen and (max-width: 845px) {
                font-size: @small-font*1.2;
            }
        }

        & .logo-about {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 70px;
            height: 70px;
            padding: 15px;
            background-color: @light-color;
            border-radius: @big-border-radius;
            box-sizing: border-box;

            & img {
                width: 100%;
                max-width: 100px;
                height: auto;
            }

            & svg {
                fill: @dark-color;
                width: 100%;
                max-width: 100px;
                height: auto;
            }
        }

        & div:nth-child(1) {
            grid-column: 1 / span 2;
            grid-row: 1 / span 1;
            
        }
        & div:nth-child(2) {
            grid-column: 4 / span 1;
            grid-row: 1 / span 1;
        }
        & div:nth-child(3) {
            grid-column: 1 / span 2;
            grid-row: 2 / span 2;
        }
        & div:nth-child(4) {
            grid-column: 1 / span 1;
            grid-row: 4 / span 1;
            margin-top: -10px;
        }
        & div:nth-child(5) {
            grid-column: 4 / span 1;
            grid-row: 4 / span 1;
        }

        h1 {
            hyphens: manual;
        }

        @media (max-width: 845px) {
            grid-template-columns: 1fr;
            grid-template-rows: 50px 150px 280px 100px 120px;
            & div:nth-child(1), & div:nth-child(2), & div:nth-child(3), & div:nth-child(4), & div:nth-child(5) {
                grid-column: span 1;
                grid-row: span 1;/* 
                word-break: break-word;
                overflow-wrap: break-word; */
                h1 {
                    hyphens: auto;
                }
            }
        }
    }    

    /* Imágenes del trabajo */
    & .item-project {
        .display-flex-center();
        position: relative;
        /* height: 60vw; */
        height: 100%;
        min-height: 350px;
        max-height: 900px;
        overflow: hidden;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: @border-radius;

        &:hover {
            transform: scale(1.01);
            transition: @transition;
            z-index: 2;

            & .floating-project {
                transform: translate(-50%, -50%) scale(1.05);
                transition: @transition;
            }
        }

        & img {
            display: none;
        }

        & video {
            width: 100%;
            /* height: 100%; */
        }

        
    }

    .item-project-floating {
        overflow: visible; /* Actualizado */

        & .floating-project {
            display: block;
            position: absolute;
            top: 62%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: auto;
            height: 130%;
            z-index: 2;
        }
    }  

    

    .grid-project {
        .display-grid-center();
        grid-template-columns: 1fr 1fr 1fr 1fr;

        @media (max-width: 845px) {
            grid-template-columns: 1fr;
        }

        /* @media (min-width: 1400px) {
            width: 1400px;
            margin: 0 auto;
        } */

        @media (max-width: 845px) {
            grid-template-columns: 1fr;
            /* grid-template-rows: @title-font repeat(39, 150px); */
            gap: 10px;
            padding: 10px;

            & .item-project {
                min-height: 450px;
                grid-column: span 1;
                grid-row: span 1;

            }

            & .min-item-project {
                grid-column: span 1;
                grid-row: span 1;
            }

           
        }
        gap: 10px;
        /* grid-auto-flow: dense; */
        padding: 0 10px;
    }

    .full-item-project {
        grid-column: span 4;
        grid-row: span 2;
    }

    .fullhalf-item-project {
        grid-column: span 4;
        grid-row: span 1;
    }

    .plushalf-item-project {
        grid-column: span 3;
        grid-row: span 2;
    }

    .half-item-project {
        grid-column: span 2;
        grid-row: span 2;
    }

    .quarter-item-project {
        grid-column: span 2;
        grid-row: span 1;
    }

    .min-item-project {
        grid-column: span 1;
        grid-row: span 1;
    }

    .item-project-minhalf {
        display: flex;
        gap: 10px;
        @media (max-width: 845px) { 
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: repeat(1, 1fr);
            gap: 10px;
            justify-items: center;
            align-items: center;
            justify-content: center;
            max-height: initial;

            & .minhalf-item-project {
                width: 100%;
                min-height: 450px;
                max-height: initial;
                background-size: cover;
            }
    }
    }

    .minhalf-item-project {
        width: 16.66vw;
        position: relative;
        /* height: 60vw; */
        height: 100%;
        min-height: 350px;
        max-height: 900px;
        overflow: hidden;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: 15px;
    }

    .rectangle-item-project {
        grid-column: span 3;
        grid-row: span 2;
    }

    .plussquare-item-project {
        grid-column: span 2;
        grid-row: span 2;
    }

    .square-item-project {
        grid-column: span 1;
        grid-row: span 1;
    }

    .midrectangle-item-project {
        grid-column: span 1;
        grid-row: span 2;
    }

    .midsquare-item-project {
        grid-column: span 2;
        grid-row: span 1;
    }

}

/* ********************************************** */
/* ********************************************** */
/* ********************************************** */
/* ********************************************** */
/* HIGHLIGHT */
@media (max-width: 845px) {
    section.highlight {
        height: 30rem;
        & p {
            width: 70%;
        }
    }
    
}

/* ********************************************** */
/* ********************************************** */
/* ********************************************** */
/* ********************************************** */
/* LIGHTBOX */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none; /* Hide the lightbox by default */
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.lightbox img {
    max-width: 80%;
    max-height: 80%;
    border-radius: 45px;
    animation: slide-up 0.5s;
    animation-iteration-count: 1;
    animation-play-state: paused;
}

@keyframes slide-up {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}
.opacity-item {
    opacity: 0.1;
    z-index: -1;
}

.opacity-line {
    opacity: 0.1;
    z-index: -2;
}

/* ********************************************** */
/* VIDEO PLAYER */
.item-project {
    position: relative;
}

.item-project img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-video-project {
    position: relative;
}

.item-project video {
    width: 430px;
    height: 100%;
    padding: 45px;
    object-fit: cover;
    border-radius: 85px;
    box-sizing: border-box;
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.play-button:hover {
    cursor: pointer;
    transform: translate(-50%, -50%) scale(1);
}
.item-video-project {
    display: flex;
    justify-content: center;
    align-items: center;
}
.item-project video {
    width: 430px;
    height: 100%;
    padding: 45px;
    object-fit: cover;
    border-radius: 85px;
    box-sizing: border-box;
}


/* MEDIA */
/* ********************************************** */
/* ********************************************** */
/* ********************************************** */
/* ********************************************** */
@media screen and (max-width: 1140px) {
    section.container-hero {
        & .hero {
            & .title-hero {
                display: block;
                justify-self: center;
                width: 50rem;
                align-self: end;
                color: #ebebe9;
                font-family: 'Archivo Expanded ExtraLight', sans-serif;
                font-size: 55px;
                text-align: center;
                line-height: calc(1.2);
                z-index: 1;
            }
        }
    }
/* ABOUT (MOBILE) */
    .aboutus {
        grid-template-rows: 120px 0.8fr 1fr 0.2fr;

        .arrow-aboutus {
            height: 550px;
        }
    }

/* ********************************************** */
/* PROCESS (MOBILE) */
section.process {
    padding: @small-font;
    .display-grid-center();
    position: relative;
    grid-template-rows: 150px 250px 100px 1fr;

    & .title-process {
        grid-column: 1 / span 4;
        grid-row: 1 / span 1;
    }
    
    & .text-process {
        grid-column: 1 / span 4;
        grid-row: 3 / span 1;
    }

    & .svg-process {
        grid-column: 1 / span 4;
        grid-row: 2 / span 1;
        height: 150px;
    }

    & .list-process {
        grid-column: 1 / span 4;
        grid-row: 4 / span 1;
        & ol {
            padding-left: 55px;

            & h3 {
                font-size: @title-font/1.4;
            }
        }
    }
}

.toggle h3 {
    font-size: @title-font/1.5;
}

.open-toggle {
    margin: 0;
    margin-bottom: @xlarge-font;
    padding: @xlarge-font;
    box-sizing: border-box;
}

section.services .contain_toggle {
    flex-direction: column;
    gap: 20px;
    padding: 0;
}

}

@media screen and (max-width: 845px) {
    section.container-hero {
        height: 98vh;
        .hero {
            grid-template-rows: 20% 10% 20% 10%;
            height: ~"calc(98vh - 20px)";;

            & .title-hero {
                width: 100%;
                padding: 0 @title-font;
                font-size: @title-font/1.5;
            }

            & h1 {
                width: 26rem;
                font-size: 40px;
            }

            & .illustration {
                width: 450px;
                height: 270px;
            }

            & p {
                width: 80%;
            }

            .overlay-hero {    
                a:nth-child(1) {
                    left: 20%;
                    top: 5%;
                }
                a:nth-child(1):hover, a:nth-child(2):hover {
                    top: 6%;
                }
                & a:nth-child(2) {
                    top: 6%;
                    left: auto;
                    right: 10%;
                }
                a:nth-child(3) {
                    top: auto;
                    bottom: 22%;
                    left: -5%;
                    & img {
                        width: 200px;
                    }
                    &:hover {
                        left: 2%;
                    }
    
                }
                a:nth-child(4) {
                    top: auto;
                    bottom: 1%;
                    left: 34%;
                    right: auto;
                }
                a:nth-child(4):hover {
                    bottom: 5%;
                }
                a:nth-child(5) {
                    top: auto;
                    bottom: 1%;
                    left: auto;
                    right: 10%;
                }
                a:nth-child(5):hover {
                    bottom: 5%;
                }
                a:nth-child(6) {
                    top: auto;
                    bottom: 22%;
                    left: auto;
                    right: -2%;
                }
                a:nth-child(6):hover {
                    right: 2%;
                }
            }
        }
    }

    .aboutus {
        grid-template-rows: 120px 0.8fr 1fr 0.2fr;

        & .cover-aboutus {
            grid-column: 1 / span 3;
        }
        & .item1-aboutus {
            grid-column: 1 / span 3;
            /* align-self: flex-start; */
        }

        & .item2-aboutus {
            grid-column: 1 / span 3;
            & p {
                width: inherit;
            }
        }
        & .item3-aboutus {
            grid-column: 1 / span 3;
        }
        & .arrow-aboutus {
            display: none;
        }
    }

    /* ********************************************** */
/* FAQ (MOBILE) */
section.container-faq {
    padding: @xsmall-font;
    background-color: @accent-color;

    & .faq {

        & .toggle .btn_cta {
            width: 100%;
            color: @light-color;
            box-sizing: border-box;
        }

        & .toggle {
            & .btn_toggle {
                margin-bottom: @xlarge-font;
            }
        }

        & h2 {
            text-align: center;
        }

        & .toggle h3 {
            font-size: @title-font/1.8;
        }
    
        & .contain_toggle {
            .display-flex-center();
            flex-direction: column;
            padding: 0;
            gap: @large-font;
    
            & p {
                padding: 0;
                margin-bottom: @xsmall-font;
            }
    
        }
    }

    & .gridSmallFaq {
        grid-template-columns: 1fr;
    }
}

/* SERVICES (MOBILE) */

section.projects {
    .grid-projects {
        grid-template-columns: 1fr;
        grid-template-rows: @title-font repeat(39, 150px);
        gap: 10px;
        padding: 10px;
        
        &.project-page {
            grid-template-columns: 1fr;
            grid-template-rows: repeat(20, 250px);
            grid-auto-rows: 300px;
            gap: @xsmall-font;
            padding: @xsmall-font;
            padding-top: @title-font*1.6;
            padding-bottom: @title-font;
            border-bottom: 1px solid @accent-color;

            & .project-item:nth-child(1), & .project-item:nth-child(2), & .project-item:nth-child(3), & .project-item:nth-child(4), & .project-item:nth-child(5), & .project-item:nth-child(6), & .project-item:nth-child(7), & .project-item:nth-child(8), & .project-item:nth-child(9), & .project-item:nth-child(10), & .project-item:nth-child(11), & .project-item:nth-child(12), & .project-item:nth-child(13), & .project-item:nth-child(14), & .project-item:nth-child(15), & .project-item:nth-child(16), & .project-item:nth-child(17), & .project-item:nth-child(18), & .project-item:nth-child(19), & .project-item:nth-child(20) {
                grid-column: span 1;
                grid-row: span 2;
                background-size: cover;
                
            }

            & .project-item:nth-child(1):hover, & .project-item:nth-child(2):hover, & .project-item:nth-child(3):hover, & .project-item:nth-child(4):hover, & .project-item:nth-child(5):hover, & .project-item:nth-child(6):hover, & .project-item:nth-child(7):hover, & .project-item:nth-child(8):hover, & .project-item:nth-child(9):hover, & .project-item:nth-child(10):hover {
                grid-column: span 1;
                grid-row: span 2;
                margin: 0;
                transform: scale(1.01);
                background-position: cover;
            }

        }
        
        .project-item:hover, .project-item:nth-child(1):hover, .project-item:nth-child(2):hover, .project-item:nth-child(3):hover, .project-item:nth-child(4):hover, .project-item:nth-child(5):hover, .project-item:nth-child(6):hover, .project-item:nth-child(7):hover, .project-item:nth-child(8):hover, .project-item:nth-child(9):hover, .project-item:nth-child(10):hover, .project-item:nth-child(11):hover, .project-item:nth-child(12):hover, .project-item:nth-child(13):hover, .project-item:nth-child(14):hover, .project-item:nth-child(15):hover, .project-item:nth-child(16):hover, .project-item:nth-child(17):hover, .project-item:nth-child(18):hover, .project-item:nth-child(19):hover, .project-item:nth-child(20):hover {
            background-color: @accent-color;
            transition: @transition;
            transform: scale(1.04);
            z-index: 2;
            cursor: pointer;
        }

        & .project-item:nth-child(1), & .project-item:nth-child(2), & .project-item:nth-child(3), & .project-item:nth-child(4), & .project-item:nth-child(5), & .project-item:nth-child(6), & .project-item:nth-child(7), & .project-item:nth-child(8), & .project-item:nth-child(9), & .project-item:nth-child(10), & .project-item:nth-child(11), & .project-item:nth-child(12), & .project-item:nth-child(13), & .project-item:nth-child(14), & .project-item:nth-child(15), & .project-item:nth-child(16), & .project-item:nth-child(17), & .project-item:nth-child(18), & .project-item:nth-child(19), & .project-item:nth-child(20) {
            grid-column: span 1;
            grid-row: span 4;
            
        }

        & .line-projects, & .line-projects:nth-of-type(1), & .line-projects:nth-of-type(2), & .line-projects:nth-of-type(3), & .line-projects:nth-of-type(4), & .line-projects:nth-of-type(5), & .line-projects:nth-of-type(6), & .line-projects:nth-of-type(7) {
            display: none;
        }

        & .project-item:nth-child(11), & .project-item:nth-child(12), & .project-item:nth-child(13), & .project-item:nth-child(14), & .project-item:nth-child(15), & .project-item:nth-child(16), & .project-item:nth-child(17), & .project-item:nth-child(18), & .project-item:nth-child(19), & .project-item:nth-child(20) {
            display: none;
        }

        & .project-item:nth-child(1):hover, & .project-item:nth-child(2):hover, & .project-item:nth-child(3):hover, & .project-item:nth-child(4):hover, & .project-item:nth-child(5):hover, & .project-item:nth-child(6):hover, & .project-item:nth-child(7):hover, & .project-item:nth-child(8):hover, & .project-item:nth-child(9):hover, & .project-item:nth-child(10):hover {
            grid-column: span 1;
            grid-row: span 4;
            margin: 0;
            transform: scale(1.01);
            /* background-position: 50% 50%; */
            /* grid-column: 5 / span 2; */
        }



        /* display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: @title-font repeat(39, 150px);
        gap: 10px;
        padding: 10px;
        
        &.project-page {
            grid-template-columns: 1fr;
            grid-template-rows: repeat(20, 150px);
            grid-auto-rows: 300px;
            gap: @xsmall-font;
            padding: @xsmall-font;
            padding-top: @title-font*1.6;
            padding-bottom: @title-font;
            border-bottom: 1px solid @accent-color;
    
            & .project-item:nth-child(1), & .project-item:nth-child(2), & .project-item:nth-child(3), & .project-item:nth-child(4), & .project-item:nth-child(5), & .project-item:nth-child(6), & .project-item:nth-child(7), & .project-item:nth-child(8), & .project-item:nth-child(9), & .project-item:nth-child(10), & .project-item:nth-child(11), & .project-item:nth-child(12), & .project-item:nth-child(13), & .project-item:nth-child(14), & .project-item:nth-child(15), & .project-item:nth-child(16), & .project-item:nth-child(17), & .project-item:nth-child(18), & .project-item:nth-child(19), & .project-item:nth-child(20) {
                grid-column: span 1;
                grid-row: span 2;
                
            }
        } */
    
    }
}

/* ********************************************** */
/* FOOTER (MOBILE) */

footer {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 50% 35%;
    height: 100%;
    padding-bottom: @title-font*4;


    & h2 {
        grid-column: 1 / span 4;
        grid-row: 1 / span 1;
        text-align: center;
    }

    & .arrow-footer {
        grid-column: 1 / span 4;
        grid-row: 3 / span 1;
        display: none;
    }

    & .img-footer {
        grid-column: 1 / span 4;
        grid-row: 2 / span 1;
        width: auto;
        height: 100%;
        margin: 0 auto;
    }

    & .email-footer {
        grid-column: 1 / span 4;
        grid-row: 1 / span 1;
        align-self: center;
        font-size: @xlarge-font*1.4;
    }

    & .email-footer a {
        /* padding: 0; */
        text-align: center;
    }

    & .email-footer a:hover {
        padding: @xsmall-font;
    }

    & .email-footer a {
        box-sizing: border-box;
    }

    .box-webmap {
        text-align: center;
    }

    .box-webmap:nth-of-type(2) {
        grid-column: 1 / span 4;
        grid-row: 4 / span 1;
    }
    .box-webmap:nth-of-type(3) {
        grid-column: 1 / span 4;
        grid-row: 5 / span 1;
    }
    .box-webmap:nth-of-type(4) {
        grid-column: 1 / span 4;
        grid-row: 6 / span 1;
    }

    .box-webmap h3, .box-webmap a, .box-webmap p {
        font-size: @mid-font;
    }

    /* .box-webmap h3 {
        margin-bottom: @large-font;
        padding-bottom: @xsmall-font;
        color: @dark-mid-color;
        border-bottom: 2px solid @dark-mid-color;
        font-size: @small-font;
    } */

    /* .box-webmap a {
        display: block;
        margin-bottom: @xsmall-font;
        color: @light-color;
        font-size: @small-font;
    }
    .box-webmap a:hover, .legal p:hover, .legal a:hover {
        display: block;
        color: @white-color;
        background-color: @accent-color;
    } */
    .legal {
        grid-column: 1 / span 4;
        grid-row: 7 / span 1;
        display: flex;
        flex-direction: column;

        & a {
            margin-top: @xsmall-font;
        }
    }

    

}


/* CONTACT (MOBILE) */
section.contact {
    grid-template-columns: 1fr;
    gap: @large-font;
    margin-bottom: 10px;
    padding: 10px 10px 0 10px;

    & .title-contact {
        display: flex;
        flex-direction: column;
        padding: @title-font;
        & a {
            margin-bottom: 10px;
            font-size: 40px;
            text-decoration: underline;
            text-decoration: underline;

            &:hover {
                color: #FFFFFF;
                background-color: black;
                text-decoration: none;
            }
        }
    }

    & .form-contact form {
        /* padding: @title-font; */
        box-sizing: border-box;
    }
}


}

.alert-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 10px;
  text-align: center;
  font-size: 14px;
  color: #DCDCDC;
  background-color: #0142fe;
  z-index: 25;
  box-sizing: border-box;
}

.alert-top a {
  color: #FFFFFF;
  text-decoration: underline;
}

/* body {
  margin-top: 24px;
} */