/* Add styles here */

@font-face {
  font-family: myFont;
  src: url('/static/fonts/AlteHaasGroteskRegular.ttf');
}

* {
    font-family: myFont;
}

/* Hide scrollbar for Chrome, Safari and Opera */
*::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
* {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */

    -moz-user-select: none;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}


body {
    padding: 0 0;
    margin: 0 0;
    width: 100dvw;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    align-content: center;


}

.request-cookies{
    display: flex;
    background-color: #fff;
    position: fixed;
    bottom: 2dvh;
    font-size: 2dvh;
    height: 3vh;
    align-items: center;
    border-radius: 0.5dvh;
    padding: 1dvh;
    width: 40%;
    justify-content: center;
    z-index: 99;
    left:29%;
}
.accept-cookies {
    margin-left: 1dvh;
}

.back {
    display: flex;
    position: fixed;
    top: 0dvh;
    left: 0dvh;
    z-index: 1;
    height: fit-content;
    width: fit-content;
    color: black;
    padding:  1dvh 1dvw;
    font-size: 2.5dvh;
    font-weight: bolder;
    background-color: rgba(255, 255, 255, 0.5);

    text-align: center;
    align-content: center;
    border: transparent;
    user-select: none;
}
.back-arrow {
    height: 4dvh;
    width: 4dvh;
    rotate: 180deg;

}

.back:hover {
    color: white;
    cursor: pointer;

}

.navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 6dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}


.navigation-left {
    display: flex;
    width: fit-content;
    left: 0;
    top: 0;
    position: fixed;
    height: fit-content;
    transition: 0.3s ease;
    flex-wrap: wrap;
    padding-left: 1dvh;
    padding-right: 2dvh;
    justify-content: flex-start;
}

.navigation-right {
    position: fixed;
    right: 0;
    top: 0;
    display: flex;
    height: 6dvh;
    width: fit-content;
    padding-right: 2dvw;
    z-index: 200;
    align-items: center;

}



.dropbtn, .menu-simple {
    color: #000000;
    font-size: 1.55dvh;
    font-weight: bolder;
    border: none;
    user-select: none;
    margin:  0 1dvh;
    z-index: 6;

}

.dropbtn, .menu-simple {
    background-color: rgba(0, 0, 0, 0);
    height: 6dvh;
    transition: 0.3s ease;
    padding: 0 2dvh;
    cursor: pointer;

}
.menu-simple {
    display: none;
    flex-direction: row;
    align-items: center;
}


#menu {
    display: flex;
    flex-direction: column;
    background-color: rgb(255, 255, 255);
    position: fixed;
    width: 0;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 5;
    padding-top: 0;
    transition: width 1s ease;
    box-shadow: 0.2px 0px 8px rgb(115, 115, 115);
}





#contacte-menu, #projecte-menu {
    display: none;
    background-color: rgba(0, 0, 0, 0);

    height: fit-content;
    align-items: center;
}



.title{
    background-image: url('/static/media/logo-complet.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 10dvh;
    font-weight: bold;
    color: rgba(240, 248, 255, 0.9);
    height: 7dvh;
    user-select: none;
    position: relative;
    width: 20dvw;
    top:0;
    left: 0;
    z-index: 5;
    transition: height 0.3s ease-out;
    cursor: pointer;
}

.language{
    align-content: center;
    padding: 1dvh;
    cursor: pointer;
    min-width: 4dvh;
    text-align: center;
    font-size: 1.5dvh;
    user-select: none;
    color: rgb(0, 0, 0);

}
.language:hover {
}
#current{
}

.cart {
    display: flex;
    position: relative;
    right: 0;
    bottom: 0;
    width: min-content;
    height: 6dvh;
    align-items: center;
    margin-left: 1dvw;
    cursor: pointer;
    z-index: 21;

}
.shopping-cart {
    position: relative;
    display: block;
    align-content: center;
    text-align: center;
    vertical-align: center;
    height: 2.8dvh;
    width: 2.8dvh;
    padding-bottom: 0.5dvh;


}
.shopping-cart:hover {
    transition: 0.3s ease;
}

.cercle-carret {
    height: 1.5dvh;
    width: 1.5dvh;
    position: absolute;
    right: 0;
    top: 3dvh;
    background-color: rgb(0, 0, 0);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5dvh;
}

.icon-menu-simple {
    position: relative;
    display: block;
    align-content: center;
    text-align: center;
    vertical-align: center;
    height: 2.5dvh;
    width: 2.5dvh;


}
.icon-menu-simple .open {
    transition: 0.3s ease;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
.submenu {

}

.titol-submenu, .item-submenu {
    transition: color 0.5s ease;
}
.menu-content {
    user-select: none;
    width: 100%;
}
.titol-submenu {
    display: none;
    color: rgba(0, 0, 0, 0);
    font-size: 2dvh;
    margin-left: 1dvh;
    margin-right: 1dvh;
    padding-bottom: 1dvh;
    padding-top: 1dvh;
    text-underline-offset: 0.5dvh;
    border: none;
    border-top: black solid 1px;
    width: 95%;
}

.titol-submenu:hover {
    text-decoration: underline;
    cursor: pointer;

}



.titol-submenu {
    color: rgba(0, 0, 0, 0);
    justify-content: space-between;

}

.item-submenu {
    display: none;
    font-size: 2dvh;
    padding-left: 2dvh;
    cursor: pointer;
    padding-bottom: 1dvh;
    text-underline-offset: 0.5dvh;
    min-width: max-content;
}
.item-submenu:hover {
    text-decoration: underline;

}
.shown {
    display: flex;

}
.dropdown-show {
    display: block;
}


#contacte-menu, #projecte-menu {
        display: none;
    }

.plus, .minus {
    height: 2dvh;
    width: 2dvh;
    padding: 0;
}
.plus {display: inline-block}
.plus.dropdown-show {display: none;}
.minus {display: none}
.minus.dropdown-show {display: inline-block;}

.no-line { border-top:none; }
.menutop { margin-top: 6dvh;}
.last-submenu{padding-bottom: 1.5dvh}
.less-padding { padding-top: 0.5dvh; padding-bottom: 0.5dvh }

@media screen and (orientation: portrait) {
    .navigation {
        justify-content: center;
    }

    .dropbtn {
        display: none;
    }
    .menu-simple {
        display: flex;
        padding: 0;
    }
    .title{
        display: flex;

    }


    .navigation-left {
        display: flex;
        width: 100dvw;
        justify-content: flex-start;
    }
    .language {
        display: none;
    }
.request-cookies{
    width: 94%;
    left: 2%;
}
}