@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');

:root 
{    
    --app-max-width: 1000px;
    --topbar-height: 4rem;
    --menu-width: 18rem;
    --color-white-transparent: #ffffff40;    
    --color-black: #363638;
    --color-black-extra: #242426;
    --color-black-extra-transparent: #24242690;
    --color-blue: #0a84ff;
    --color-white: #f2f2f7;
}

*{ margin: 0; padding: 0; outline: none; box-sizing: border-box; vertical-align: middle; text-align: left; font-family: 'Open Sans', sans-serif, Helvetica, Arial; }
html { font-size: 18px; }
html, body { height: 100%; width: 100%; }
body { position: relative; user-select: none; background-color: var(--color-black); color: var(--color-white); overflow-x: hidden; overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }

/* header */
header{ position: relative; padding: 0 10px; display: flex; justify-content: space-between; align-items: center; background-color: var(--color-black-extra); height: var(--topbar-height); }
header.fixed{ position: fixed; left: 0; right: 0; top: 0; z-index: 1; }
header section{ display: flex; align-items: center; justify-content: space-evenly; }
header section.menu{ width: 30rem; }

main section.menu.mobile{ position: fixed; padding-right: 1.5rem; top: var(--topbar-height); right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: flex-end; background-color: var(--color-black-extra-transparent); row-gap: 1rem; transform: translateX(100rem); transition: transform .5s ease-in-out;  }
main section.menu.mobile.active{ transform: translateX(0); }
main section.menu.mobile.active::before{ content: ""; position: absolute; width: 15rem;  right: 0; top: 0; bottom: 0; background-color: var(--color-black-extra); }
main section.menu.mobile a{ z-index: 999; }

.logo{ display: inline-block; width: 4rem; height: 4rem; background-image: url("/img/logo.svg"); background-size: 3rem; background-position: center center; background-repeat: no-repeat; }
header h1{ font-weight: 500; font-size: 1rem; }
header a{ cursor: pointer; text-decoration: none; color: var(--color-white); display: none; }
header a.button{ display: block; padding: 0; width: 2rem; height: 3rem; background-color: transparent; background-size: 2rem; background-position: center center; background-repeat: no-repeat; }
header a.button.menu{ background-image: url("/img/menu.png"); }
header a:hover, header a:active{ font-weight: 500; }

/* main */
main{ position: relative; display: block; padding: 0 20px; width: 100%; }
main div{ display: flex; flex-direction: column; justify-content: space-between; padding: 30px 0 0 0; row-gap: 1.5rem; }
main div#servizi{ flex-direction: column-reverse; }
main div section{ display: flex; flex-direction: column; justify-content: center; width: 100%; row-gap: .8rem; }
main div section > img{ display: block; margin: 0 auto; width: 100%; border-radius: 20px; }

ul{ padding-left: 2rem; }
a{ text-decoration: none; color: var(--color-white); }
a:hover, a:active{ text-decoration: underline; }

.button{ display: inline-block; padding: 0 1rem; line-height: 2.5rem; background-color: var(--color-blue); color: var(--color-white); border-radius: .5rem; }
.button.icon{ padding-left: 3rem; background-size: 1.8rem; background-position: .5rem center; background-repeat: no-repeat; }
.button.icon.instagram{ background-image: url("/img/instagram.png"); }
.button.icon.whatsapp{ position: fixed; width: 4rem; height: 4rem; right: 1rem; bottom: 1rem; border-radius: 50%; padding: 0; background-image: url("/img/whatsapp.png"); background-position: center center; background-size: 2rem; background-color: #25D366; z-index: 9999; animation: squish 2s ease-in infinite; }
.text-underline{ text-decoration: underline; }



@keyframes squish {
    5% { transform: scale(1.2, 0.9); }
    10% { transform: scale(0.9, 1.2) translate(0, -4px); }
    15% { transform: scale(1); }
}

/* lavori */
div#lavori{ display: flex; align-items: center; row-gap: 1rem; width: 100%;}
div#lavori section{ display: flex; flex-direction: column; align-items: center; row-gap: .5rem; column-gap: 0.5rem; width: 100%; }
div#lavori .working-container{ width: 100%; padding: 0; row-gap: .5rem; }
div#lavori .working{ width: 100%; height: 20rem; border-radius: .5rem; cursor: pointer; background-position: center center; background-size: cover; background-repeat: no-repeat; }
div#lavori .working-1{ background-image: url("/img/working-1.png"); }
div#lavori .working-2{ background-image: url("/img/working-2.png"); }
div#lavori .working-3{ background-image: url("/img/working-3.png"); }
div#lavori .working-4{ background-image: url("/img/working-4.png"); }
div#lavori .working-5{ background-image: url("/img/working-5.png"); }
div#lavori .working-6{ background-image: url("/img/working-6.png"); }
div#lavori .working-7{ background-image: url("/img/working-7.png"); }
div#lavori .working-8{ background-image: url("/img/working-8.png"); }

/* footer */
footer{ position: relative; display: flex; flex-direction: column; row-gap: 1rem; padding: 10px; width: 100%; margin-top: 90px; background-color: var(--color-black-extra); color: var(--color-white); }
footer section{ display: flex; align-items: center; }
footer iframe{ margin-top: .5rem; max-width: 350px; max-height: 250px;  }

@media(min-width: 1024px){
    header, main{ padding: 0 40px; }
    header a{ display: block; }
    header a.button{ display: none; }
    main{ padding: 0 40px; }
    main div{ flex-direction: row!important; padding: 90px 0 0 0; }
    main div section{ width: 48%; }
    main section.menu.mobile{ display: none; }

    div#lavori{ flex-direction: column!important; }
    div#lavori section.single-working{ width: 49.5%; }
    div#lavori section.multiple-working{ display: flex; flex-direction: row; justify-content: space-between; column-gap: .5rem; width: 49.5%; }
    div#lavori section.multiple-working span{ width: 50%; }
    div#lavori section.multiple-working section{ width: 48.5%; flex-direction: column; }
    div#lavori section.multiple-working section span{ width: 100%; height: 130px; }
    div#lavori section.multiple-working + section.sigle-working{ width: 48.5% }

    div#lavori section.multiple-working section .working{ height: 9.8rem; }

    footer { padding: 1rem 40px; flex-direction: row; justify-content: space-between; }
    footer .logo { background-size: 4rem; margin-right: 1rem; }
    footer .margin-top{ margin-top: 5rem; }
    footer section { margin-bottom: 1rem; }
    footer p { line-height: 1.5rem; }
    footer p b { display: block; margin-bottom: .5rem }
    footer iframe { max-width: 450px; }

    div.modal { top: 90px; left: 100px; right: 100px; } 
}

@media(min-width: 1920px){
    header, main{ padding: 0 280px; } 
    footer { padding: 1rem 280px; }  
}

/* modal */
div.modal { position: fixed; display: flex; justify-content: center; padding: 20px; top: 0px; left: 0px; right: 0px; bottom: 0; background-color: #24242690; z-index: 9999;  } 
div.modal a { color: var(--color-black); } 
div.modal > section{ background-color: var(--color-white); color: var(--color-black); padding: 1rem; border-radius: .5rem; overflow: scroll; justify-content: flex-start; } 
div.modal > section section{ width: 100%; } 
div.modal .button{ display: block; margin: 0 auto; padding: 0 3rem;  cursor: pointer;} 
div.modal .button:hover{ text-decoration: underline; } 

div.modal .cookie{ position: absolute; left: 0; right: 0; bottom: 0; width: 100%; overflow: hidden; display: flex; flex-direction: row; justify-content: space-around; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
div.modal .cookie section{ width: auto;}