/*
Theme Name: asticotheme
Theme URI: None
Author: asticoweb.com
Author URI: https://asticoweb.com
Description: Simple wordpress theme made with ❤️ by asticoweb.com | All rights reserved ©
Tags: theme, madewithlove, asticonet, asticoweb, asticoweb.com, asticotheme, coding, spreadthelove, personal, personaluseonly
Version: 5.0
License: License asticoweb.com
License URI: https://asticoweb.com
Text Domain: asticotheme
*/

::selection {
    background: var(--marron2);
    color: var(--creme);
    text-shadow: none;
}

::-webkit-selection {
    background: var(--marron2);
    color: var(--creme);
    text-shadow: none;
}

::-moz-selection {
    background: var(--marron2);
    color: var(--creme);
    text-shadow: none;
}

*,
*:after,
*:before {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    outline: none !important;
    text-decoration: none;

}

section,
div,
header,
nav,
article,
section,
aside,
footer,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
ul,
li,
figure,
figcaption,
class,
img {

    margin: 0;
    padding: 0;
}


html,
body {

    width: 100%;
    padding: 0;
    margin: 0;
    font-family: "Instrument Sans", sans-serif;
    position: relative;
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {

    overflow-x: hidden;
    overflow-y: overlay;
    background: white;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    border-left: solid 1px var(--blanc90);
}

::-webkit-scrollbar-thumb {
    background: var(--marron2);
    border-left: solid 1px var(--blanc90);
}

::-webkit-scrollbar-button {
    display: none;
}

.page main>section>h1,
br.clear,
a.post-edit-link {

    display: none;
}

input::placeholder,
textarea::placeholder {

    opacity: 1 !important;
}

input {

    accent-color: var(--terra);
}


:root {
    --terra: #d8a68d;
    --creme: #ffeae1;
    --marron: #8c6d5e;
    --marron2: #3f342f;
    --blanc95: #F2E9E7;
    --blanc90: #E5DCDA;
    --gris75: #BFB8B6;
    --gris50: #7F7A79;
}

/*------------------------------------*\
    ROOT
\*------------------------------------*/

.balance {

    text-wrap: balance;
}

/*------------------------------------*\
    UNDERLINE
\*------------------------------------*/

#footer a,
#footer button,
.underline a.elementor-button,
.underline button,
.elementor-widget-text-editor a {

    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: bottom left;
    transition: background-size .3s cubic-bezier(.75, 0, .25, 1);
}

#footer a,
#footer button,
.underline a.elementor-button:hover,
.underline button:hover,
.elementor-widget-text-editor a:hover {

    background-size: 0% 1px;
    background-position: bottom right;
}

#footer a:hover,
#footer button:hover {

    background-size: 100% 1px;
    background-position: bottom left;
}

.underline a.elementor-button {

    padding: 0;
    border-radius: 0;
    background-color: transparent !important;
    color: var(--marron2);
}

/*------------------------------------*\
    STAR
\*------------------------------------*/

.separator:before {

    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    top: 0 !important;
    translate: -50% -50% !important;
    width: 50px !important;
    height: 50px !important;
    background-color: var(--marron2);
    mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 166.67 166.67'%3E%3Cpath d='M83.33,166.67C76.39,118.06,48.61,90.28,0,83.33,48.61,76.39,76.39,48.61,83.33,0c6.94,48.61,34.72,76.39,83.33,83.33-48.61,6.94-76.39,34.72-83.33,83.33Z'/%3E%3C/svg%3E");
    z-index: 1;
}

.separator.marron {

    background-color: var(--marron);
}

.separator.terra {

    background-color: var(--terra);
}

.separator.creme {

    background-color: var(--creme);
}

/*------------------------------------*\
    EXIT
\*------------------------------------*/

#exit {

    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100lvh;
    background-color: rgba(35, 29, 26, .75);
    z-index: 999;
    display: none;
    cursor: pointer;
}

/*------------------------------------*\
    LOADER
\*------------------------------------*/

main,
body>.elementor,
#footer {
    translate: 0 150px;
    transition: translate .5s;
}

.active-translate {
    translate: 0 !important;
}

.active-translate-link {
    translate: 0 -150px !important;
}

.loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    transition: translate .5s;
}

.loader-1 {
    background-color: var(--marron2);
    transition-delay: .3s;
}

.loader-2 {
    background-color: var(--marron);
    transition-delay: .2s;
}

.loader-3 {
    background-color: var(--terra);
    transition-delay: .1s;
}

.loader-4 {
    background-color: var(--creme);
}

.active-loader {
    translate: 0 -100%;
}

.active-loader-link {
    opacity: 0;
    translate: 0 100%;
}

.active-loader-1 {
    transition-delay: 0s;
}

.active-loader-2 {
    transition-delay: .1s;
}

.active-loader-3 {
    transition-delay: .2s;
}

.active-loader-4 {
    transition-delay: .3s;
}

/*------------------------------------*\
    BURGER
\*------------------------------------*/

#menu {

    cursor: pointer;
    padding: 0;
    width: 54.1666px;
    height: 54.1666px;
    background-color: var(--marron2);
    display: flex;
    justify-content: center;
    align-items: center;
}

#menu span {

    width: 25px;
    height: 2px;
    background: white;
    position: absolute;
    transition: margin .3s, transform .3s;
    transform-origin: center;
}

#menu span.a {

    margin-bottom: 9.25px;
}

.active-first-span {

    transform: rotate(45deg) !important;
    margin: 0 !important;
}

#menu span.b {

    margin-top: 9.25px;
}

.active-last-span {

    transform: rotate(-45deg) !important;
    margin: 0 !important;
}


/*------------------------------------*\
    HEADER
\*------------------------------------*/

#header #nav .contact,
#header .btn-wrapper #menu {

    display: none;
}

#header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    padding: 50px;
    transition: padding .3s;
}

#header.active-header {

    padding: 25px !important;
}

#header:before {

    content: '';
    position: absolute;
    inset: 0;
    translate: 0 -100%;
    background-color: white;
    border-bottom: solid 1px var(--blanc90);
    z-index: -1;
    transition: translate .3s;

}

.active-header:before {

    translate: 0 !important;
}

#header .wrapper {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#header ul {

    display: flex;
    gap: 37.5px;
    list-style: none;
}

#header a {

    display: flex;
}

#header a#logo svg {

    height: 75px;
    width: auto;
    fill: var(--marron);
    transition: fill .3s;
}

#header a#logo:hover svg {

    fill: var(--marron2);
}

#header #nav {

    position: absolute;
    left: 50%;
    translate: -50%;
}

#header #nav #menu-menu li a {

    line-height: 75px;
    display: inline-block;
    position: relative;
    text-wrap: nowrap;
    color: var(--marron2);
    font-weight: 600;
}

#header #nav #menu-menu li:first-child a,
#header #nav #menu-menu li:last-child a {

    font-weight: 500;
    color: var(--marron);

}

#header #nav #menu-menu li a:before {

    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    translate: -50%;
    width: 15px;
    height: 15px;
    background-color: var(--marron);
    mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 166.67 166.67'%3E%3Cpath d='M83.33,166.67C76.39,118.06,48.61,90.28,0,83.33,48.61,76.39,76.39,48.61,83.33,0c6.94,48.61,34.72,76.39,83.33,83.33-48.61,6.94-76.39,34.72-83.33,83.33Z'/%3E%3C/svg%3E");
    opacity: 0;
    scale: 0;
    transition: opacity .3s, scale .3s;
    transform-origin: center;
}

#header #nav #menu-menu li a:hover::before {

    scale: 1;
    opacity: 1;
}

#header .btn-wrapper {

    display: flex;
    align-items: center;
    gap: 12.5px;
}

#header a#contact {

    padding: 15px 20px;
    line-height: 1;
    height: 75px;
    color: white;
    background-color: var(--marron);
    border-radius: 7.5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    font-weight: normal;
    color: var(--creme);
    transition: background-color .3s;

}

#header a#contact:hover {

    background-color: var(--marron2);
}

#header a#contact span {

    font-family: var(--e-global-typography-primary-font-family);
    font-size: 1.25em;
    color: white;
}

/*------------------------------------*\
    FOOTER
\*------------------------------------*/

#footer {

    background-color: var(--marron2);
    padding: 100px 100px 25px 100px;
}

#footer .wrapper {

    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
}

#footer .container {

    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 50px;

}

#footer ul {

    list-style: none;
}

#footer a {

    color: white;
}

#footer svg {

    height: 136px;
    width: auto;
    fill: var(--terra);
}

#footer h4 {

    color: var(--terra);
}

#footer p {

    font-size: 16px;
    line-height: 1.75em;
    width: 450px;
    color: var(--marron);
}

#footer .contact a {

    font-weight: normal;
}

#footer .bottom {

    padding-top: 25px;
    margin-top: 100px;
    border-top: solid 1px #231d1a;
    align-items: center;
    gap: 25px 37.5px;
}

#footer .bottom ul {

    display: flex;
    gap: 25px;
}

#footer .bottom li,
#footer .bottom a,
#footer .bottom button {

    font-size: 14px;
    color: var(--marron);
    display: flex;
    line-height: 1;
    font-weight: var(--e-global-typography-text-font-weight);
    text-align: center;
}

#footer .bottom button {

    padding: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
}

/*------------------------------------------------------------------------*\
    RESPONSIVE
\*------------------------------------------------------------------------*/

@media only screen and (max-width:1024px) {
    /*------------------------------------*\
    HEADER
\*------------------------------------*/

    .no-scroll {

        overflow: hidden;
    }

    #header #nav .contact,
    #header .btn-wrapper #menu {

        display: flex;
    }

    #header #nav #menu-menu li a:before {

        display: inline-block;
        position: static;
        translate: 0;
        margin-right: 6.25px;
        scale: 1;
        opacity: 1;
        transition: rotate .3s;
    }

    #header #nav #menu-menu li a:hover::before {

        rotate: 45deg;
    }

    #header #nav {

        position: absolute;
        width: 100%;
        top: 100%;
        left: 0;
        translate: none;
        background: white;
        display: none;
    }

    #header #nav ul {

        padding: 50px;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    #header #nav ul#menu-menu {

        gap: 12.5px;
    }

    #header #nav a {

        background-image: linear-gradient(currentColor, currentColor);
        background-repeat: no-repeat;
        background-size: 0% 1px;
        background-position: bottom right;
        transition: background-size .3s cubic-bezier(.75, 0, .25, 1);
    }

    #header #nav a:hover {


        background-size: 100% 1px;
        background-position: bottom left;
    }

    #header #nav ul#menu-menu li,
    #header #nav ul#menu-menu li a {

        line-height: 1;
    }

    #header #nav ul#menu-menu li a {

        font-size: var(--e-global-typography-primary-font-size);
        font-family: var(--e-global-typography-primary-font-family), Sans-serif;
        font-weight: normal;
    }

    #header #nav ul.contact {

        background-color: var(--creme);
    }

    #header #nav ul.contact li a {

        color: var(--gris50) !important;
        display: inline;
        font-weight: var(--e-global-typography-text-font-weight);
    }

    #header #nav ul.contact li:first-child a,
    #header #nav ul.contact li span {

        color: var(--marron2) !important;
        font-weight: bold;
    }

    #header #nav ul.contact li a small {

        color: var(--marron) !important;
    }

    #header a#contact {

        height: auto;
    }

    /*------------------------------------*\
    FOOTER
\*------------------------------------*/

    #footer {

        padding: 100px 50px 25px 50px;
    }

    #footer .bottom {

        margin-top: 50px;
        gap: 25px;
    }


}

@media only screen and (max-width:650px) {

    /*------------------------------------*\
    HEADER
\*------------------------------------*/

    #header,
    #header.active-header {

        padding: 25px !important;
    }

    #header a#logo svg,
    #header a#contact {

        height: 66.666px;
    }

    #header #nav ul {

        padding: 25px;
    }

    /*------------------------------------*\
    FOOTER
\*------------------------------------*/

    #footer {

        padding: 50px 25px 25px 25px;
    }

    #footer .container {

        gap: 25px;
    }

    #footer svg {

        width: 100px;
        height: auto;
    }

    #footer p {

        width: inherit;
    }

    #footer .bottom {

        margin-top: 25px;
    }

    #footer .bottom li,
    #footer .bottom a,
    #footer .bottom button {

        font-size: 12px;
    }

}