/*CSS reset start*/



    html{
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-content: center;
        align-items: center;
        margin: 0;
        padding: 0;
        background: #f5f5f1;
        height: 100%;
        width: 100%;
        text-rendering: geometricPrecision;

    }

    body {
        height: 100vh;
        width: 100vw;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Arial', sans-serif;

        background-color: var(--background);

        background-image: url("Assets/gradiente.png");
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    *{
      box-sizing: border-box;
      padding: 0;
      margin: 0;
    }

    
    h2, h3 {
        font-family: 'helv-regular';
        color: var(--text);
        font-size: calc(4em);
        margin: 0;
    }

    p {
        font-family: 'helv-thin';
        font-size: calc(1rem + 2vw);
        color: black;
    }

    p a, h3 a {
        color: var(--text);
        margin: 0;
    }

    a {
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
        text-decoration-color: #de0000;
        cursor: pointer;
    }

    ul, ol {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    li {
        padding: 0;
    }

    ic {
        font-family: 'icons';
        font-size: calc(0.7em);
    }


    @font-face {
        font-family: 'sligoil';
        src: url('../Assets/Typeface/sligoil.woff') format('woff');
        src: url('../Assets/Typeface/sligoil.woff2') format('woff2');
    }

    @font-face {
        font-family: 'Helv-regular';
        src: url('../Assets/Typeface/helveticaneue.woff2') format('woff2');
    }

    @font-face {
        font-family: 'Helv-thin';
        src: url('../Assets/Typeface/helveticaneue-thin.woff2') format('woff2');
    }

    @font-face {
        font-family: 'Helv-bold';
        src: url('../Assets/Typeface/helveticaneue-bold.woff2') format('woff2');
    }

    @font-face {
      font-family: 'Material Icons';
      font-style: normal;
      font-weight: 400;
      src: url(https://fonts.gstatic.com/s/materialicons/v142/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
    }

    @font-face {
        font-family: 'icons';
        font-style: normal;
        src: url('../Assets/Typeface/icomoon.woff') format('woff');
    }


/*.mobile {
    display: none;
}*/




    div#allsite {
        display: grid;
        grid-template-columns: 5% 90% 5%;
    }












h1 {
    display: flex;
    align-items: flex-end;

    font-family: 'Helvetica', 'helv-bold', 'Arial', 'sans-serif';
    font-weight: 900;
    font-size: max(5vw, 5rem);
    margin: 3rem 0 2rem;
    color: #3a3a3a;
}


svg.back {
    fill: #333;
    height: auto;
    width: 1em ;
    vertical-align: middle;
    opacity: 0;
    transform: translateX(20%);
    animation: fadeIn .7s forwards .6s;
}

svg.back:hover {
    fill: #de0000;
}



@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


p.desc {
    font-family: sligoil;
    margin: 3rem 1em 0 1em;
    font-size: max(1.5rem, 1.5vw);
    width: 75%;
}

/*MIDDLE*/


div.element.middle {
    padding: 0;
}
div.middle {
    display: flex;
    background-color: hotpink;
    height: 100%;
    width: 100%;
    padding: 10px 0;
}













/*==============================================*/
/*--------------------DESIGN--------------------*/
/*==============================================*/


        div.design-gallery {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto;
            justify-items: center;

            margin: calc(.5em + 2vw) 0 4rem;
            padding: 0 ;
        }




        a.card-link {
            text-decoration: none;
        }

        div.card {
            width: min(40vw, 600px);
            aspect-ratio: 3 / 2;
            margin-bottom: 4vw;
            background-color: dimgray;
            border-radius: 20px;
            padding: 1.5em 1.5em .5em;
            display: flex;
            align-items: flex-end;
            overflow: hidden;
            z-index: 0;
            position: relative;
            justify-content: space-between;
            background-size: cover;
            background-position: center;
        }

        .card-text {
            bottom: 1em;
            left: 1.5em;
            z-index: 1;
            color: white;
            margin: 0;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        div.card:hover {
            cursor: pointer;

        }


        div.card:hover .card-text {
            opacity: 1;
            transform: translateY(0);
        }

        div.card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.6);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .card:hover::after {
            opacity: 1;
            backdrop-filter: blur(3px)
        }

        div.card p {
            font-size: 1.5rem;
            font-size: calc(.5em + 1vw);
            color: white;
            font-family: 'helv-thin';
            /*display: table-cell;
            vertical-align: bottom;*/
            z-index: 1;
        }

        div.card p.text-title {
            font-size: 2.7rem;
            font-size: calc(1em + 2vw);
            color: white;
            font-family: 'helv-regular';
        }


        div.card p.text-title:hover {
            text-decoration: underline;
            text-decoration-thickness: .3;
        }

        div.card svg {
            width: 2.7em;
            width: calc(.5em + 3vw);
            fill: white;
            position: relative;
            bottom: 1em;
            bottom: calc(.4em + 1vw);
            opacity: 0;
            transform: translateX(-20px);
            transition: opacity 0.3s ease, transform 0.3s ease;
            z-index: 1;
        }

        div.card:hover svg {
            opacity: 1;
            transform: translateX(0);
        }






    /*THUMBS*/

        div.metrorio {
            background-image: url('../Assets/design/thumbs/metro.png');
        }

        div.sitemem {
            background-image: url('../Assets/design/thumbs/mem.png');
        }

        div.predios {
            background-image: url('../Assets/design/thumbs/afdp.png');
        }
        div.gatitinho {
            background-image: url('../Assets/design/thumbs/gtt.png');
        }




@media (min-width: 1500px) {
    div.design-gallery {
        display: flex;
        justify-content: space-between;
    }

    div.card {
        width: 20vw;
        margin-bottom: 0;
    }

    div.card p {
        font-size: 1.1em;
        font-size: calc(.2em + .9vw);
    }

    div.card p.text-title {
        font-size: calc(1em + 1vw);
    }


    div.card svg {
        width: 2em;
        bottom: .7em;
        bottom: calc(.4em + .5vw);
    }

}














/*==============================================*/
/*--------------------PHOTO---------------------*/
/*==============================================*/

        div.photo-gallery {
        /*    display: grid;*/
            column-count: 3;
            column-gap: 5vh;
            margin-top: 3vw;
            margin-bottom: 3vw;
        }

        div.blur-load {
            margin-bottom: 5vh;
        }

        div.photo-gallery img {
            max-width: 100%;
            vertical-align: middle;
            display: inline-block;
            
        }









div.bottom {
    background-color: #de0000;
    padding: 10px 0;
}














/*==============================================*/
/*----------------CONTACT PAGE------------------*/
/*==============================================*/


/*div.flex {
    display: flex;
    justify-content: space-around;
}*/

div.link {
    display: flex;
    align-items: center;
    background-color: gainsboro;

    padding: 5px 10px;
    width: max-content;

    border-radius: 10px;
    margin: 1em 2em;

    transition: background-color 200ms ease;
}

div.link:hover {
    background-color: darkgray;
}

a.social {
    text-decoration: none;
}

div.link svg {
    width: 1.7em;
    height: 1.7em;
}

div.link p {
    font-size: 1.2rem;
    font-family: sligoil;
}

p.cont {
    width: 100%;
}





form#contact-form{
    margin: 1em 2em 4em;
}


div.contact-form-block {
    margin-top: 1em;
    width: max-content;
}

label {
    display: block;
    font-family: 'Helvetica';
}

input {
    margin-top: .5em;
    width: 200px;
    padding: 5px;
/*    border: 10px;*/
    border: 2px solid silver;
    border-radius: 10px;
/*    background-color: lightblue;*/
}

textarea {
    margin-top: 1em;
    width: 450px;
    height: 230px;
    padding: 5px;
    border: 2px solid silver;
    border-radius: 10px;
}

button {
    margin-top: 1em;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    background-color: gainsboro;

    transition: background-color 200ms ease;
}

button:hover {
    cursor: pointer;
    background-color: darkgray;
}

















/*==============================================*/
/*-------------------FOOTER---------------------*/
/*==============================================*/




div.element.footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 1rem 0 0;
}

div.footeritem {
    font-size: 3rem;
    display: flex;
    align-items: center;
    align-content: center;
/*    margin-left: 3rem;*/
/*    margin-bottom: 2rem;*/
}

div.footeritem ic {
    font-size: 1em;
    padding: 10px 0 0;
    text-rendering: geometricPrecision;
}

h3 {
    font-family: 'Helvetica', 'helv-thin', 'Arial', 'sans-serif';
    font-weight: 200;
    font-size: 1em;
    display: flex;
    align-items: center;
    padding: 0 1rem 0 1rem;
    width: max-content;
    text-rendering: geometricPrecision;
}





/*CONTACT*/


div#contact:hover h3 {
    text-decoration: underline;
    text-decoration-thickness: .25rem;
    cursor: pointer;
}

/*div#contact ic {
    font-size: 1em;
    padding: 10px 0 0;
    text-decoration: none;
}*/

ic.open {
    display: none;
}

div#contact:hover ic.closed{
    display: none;
}

div#contact:hover ic.open{
    display: flex;
    padding: 0 .5px;
}






/*LANGUAGE*/


div#en-pt ic {
    text-decoration: none;
}

div#en-pt h3:hover {
    text-decoration: underline;
    text-decoration-thickness: .25rem;
    cursor: pointer;
}

div#en-pt h3#langactive {
    color: #de0000;
}




/*LOGO*/


legal {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
}

legal p {
    font-size: 1rem;
    margin-top: .5rem;
}

div.ascii{
    position: relative;
    bottom: 8px;
}

pre.bio {
    color: black;
    font-family: monospace;
    font-size: .25rem;
    font-weight: 700;
    margin: 0;
}



/*==============================================*/
/*--------------------MOBILE--------------------*/
/*==============================================*/




@media (max-width: 800px) {



    #allsite {
        padding-top: 40px;
    }


    div.element.center {
        justify-content: left;
        align-items: center;
    }


    h1 {
        font-family: 'Helvetica', 'helv-bold', 'Arial', sans-serif;
        font-weight: 900;
        font-size: max(2.8vw, 2.8rem);
        margin: 3rem 0 2rem;
    }



    .mobile {
        display: flex;
        flex-direction: column;
        text-align: center;
    }


    div.loadinglogo.ascii {
        position: relative;
        right: 0;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: right;
        font-size: .15rem;
    }

    pre.bio {
        color: black;
        font-family: monospace;
        font-size: .3rem;
        font-weight: 700;
        margin: 0;

    }




    p.desc {
        margin: 0;
        width: 100%;
        font-size: 1.1rem;
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    div.design-gallery {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 5vw 0;
        padding: 0;
    }


    a.card-link {
        width: 100%;

    }

    div.card {
        margin-bottom: 2em;
        width: 100%;
    }

    div.card p {
        font-size: 1.2em;
    }

    div.card p.text-title {
        font-size: 2.3em;
    }


    div.card svg {
        width: 2.3em;
        bottom: 1em;
    }



    /*div.middle, div.bottom {
        padding: calc(.5em + 1vw); 0;
    }*/



    div.photo-gallery {

        column-count: 1;
    }

    div.photo-gallery {
            margin-bottom: 3vw;
        }

        div.blur-load {
            margin-bottom: 3vh;
        }

       /* div.photo-gallery img {
            max-width: 100%;
            vertical-align: middle;
            display: inline-block;
            margin-bottom: 0;
            
        }*/



    div.element.footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 2rem;
        margin: 1rem 0 3rem;
    }
    div.footeritem {
        font-size: 2rem;
        margin-bottom: 0;
    }


    legal {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 2rem;
    }

    legal pre.bio {
        font-size: .25rem;
    }

    legal p {
        font-size: .8rem;
        margin-top: .5rem;
    }


}