@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Beth+Ellen&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@font-face {
    font-family: "Old English Text MT";
    src: url("../fonts/oldenglishtextmt.ttf");
}

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

body {
    /* Text */
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 150%;
    color: #281919;
    background-color: #FEFEFE;
}

h1, h2, h3, h4, h5, h6, p {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    color: currentColor;
}

.button-primary {
    background-color: #DAA520;
    border: none;
    border-radius: 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 170%;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 7px 18px;
    color: #ECECEC;
    opacity: 100%;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5);
}

.button-primary:hover {
    color: #ECECEC;
    background-color: #C99513;
}

.button-primary:active {
    color: #281919;
}

.cover {
    background-size: cover;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-shrink: 1;
}

.icon {
    width: 25px;
    height: auto;
}

.hr-footer {
    height: 1px;
    width: 100%;
    background-color: #281919;
}

.box-shadow-img {
    box-shadow: 0 4px 4px rgba(40, 25, 25, 0.5);
}

/* Typography */
.text-brand-name {
    font-family: 'Old English Text MT', sans-serif;
    font-size: 46px;
    letter-spacing: 0;
}

.text-detail {
    font-family: 'Beth Ellen', cursive;
    font-size: 32px;
}

h1 {
    font-family: 'Poppins', sans-serif;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -2px;
}

h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -2px;
}

h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -1px;
}

.text-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
}

.text-pretitle {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 300;
}

.text-strong {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 150%;
    font-weight: 700;
}

.text-small {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    line-height: 150%;
}

.text-button {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 170%;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Colors */
.color-neve {
    color: #FEFEFE;
}

.bg-color-neve-2nd {
     background-color: #E1E1E1;
 }

.color-nero {
    color: #000000;
}

.color-oro {
    color: #DAA520;
}

.color-text-dark {
    color: #281919;
}

.color-text-light {
    color: #ECECEC;
}

/* Navbar */
.menu-bar {
    height: 8vh;
    background-color: #FEFEFE;
    z-index: 3;
    position: fixed;
    top: 0;
    width: 100%;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
}

.menu-bar a {
    color: #281919;
}

.menu-bar a svg {
    fill: #281919;
}

.menu-bar a:active {
    color: #ffb92d;
}

.menu-bar a:active svg{
    fill: #ffb92d;
}

/* Logo height */
#logoBC {
    height: 5vh;
}

/* Styling the menu button */
.menu-btn {
    cursor: pointer;
    transition: all 0.5s ease-out;
}

/* Styling the hamburger lines */
.menu-btn .btn-line {
    width: 28px;
    height: 3px;
    background: #281919;
    transition: all 0.5s ease-out;
    border-radius: 100px;
}

/* Margin top and bottom of the center line */
.btn-line-middle {
    margin: 5px 0 5px 0;
}

/* Adding transform to the X */
.menu-btn.close {
    transform: rotate(180deg);
    opacity: 1;
}

/* Styling the three lines to make it an X */
.menu-btn.close .btn-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-btn.close .btn-line:nth-child(2) {
    opacity: 0;
}

.menu-btn.close .btn-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Styling the position of the menu icon */
.menu {
    position: fixed;
    top: 8vh;
    width: 100%;
    height: 92vh;
    visibility: hidden;
    background-color: #FEFEFE;
    z-index: 1;
}

.menu.show {
    visibility: visible;
}

/* colors and opacity of menu items */
.nav-item h3{
    color: #281919;
    opacity: 0.5;
}

.nav-item svg.external-link{
    fill: #281919;
    opacity: 0.5;
}

.nav-item.current h3{
    color: #DAA520;
    opacity: 1;
}

.nav-item:active h3{
    color: #281919;
    opacity: 1;
}

.nav-item:active svg{
    fill: #281919;
    opacity: 1;
}

.menu-icons {
    opacity: 1;
}

/* Adding a transition delay
  to the 6 items in the
  navigation menu */
.nav-item.show:nth-child(1) {
    transition-delay: 0.1s;
}

.nav-item.show:nth-child(2) {
    transition-delay: 0.2s;
}

.nav-item.show:nth-child(3) {
    transition-delay: 0.3s;
}

.nav-item.show:nth-child(4) {
    transition-delay: 0.4s;
}

.nav-item.show:nth-child(5) {
    transition-delay: 0.5s;
}

.nav-item.show:nth-child(6) {
    transition-delay: 0.6s;
}

/* margin top for giving space to the menu*/
.margin-top-mobile {
    margin-top: 8vh;
}

/* Footer */
.reposition-footer {
    top: -1px;
}

/* made to make svg of "Livigno" clickable */
.pointer-event-none {
    pointer-events: none;
}

#logoMatteo {
    max-height: 20px;
    fill: #281919;
}

/* Home */
.home-cover {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0) 65%), url("../img/home/home-cover.jpg") 95% 100% no-repeat;
    background-size: cover;
}

.button-position {
    bottom: 1.2rem;
}

.cover-header {
    min-height: 320px;
    height: 85vh;
}

.bg-dovesiamo-desktop {
    background: linear-gradient(45deg, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0) 80%), url("../img/home/home-3.jpeg") center;
    height: 290px;
    border-radius: 0.3rem;
    box-shadow: 0 4px 4px rgba(40, 25, 25, 0.5);
    background-size: cover;
}

/* Classes for fixing the position of the last section of Desktop Homepage */
.relative-home-block {
    width: 100%;
    height: 210px;
}

.reposition-home-absolute {
    top: -180px;
}

.img-dovesiamo-aereo {
    height: 290px;
    object-fit: cover;
    object-position: center 60%;
}

#button-promo-place {
    height: 0;
    top: -7vh;
}

.button-promo {
    background-color: #CC2936;
    border: none;
    border-radius: 30px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 150%;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 20px;
    color: #ECECEC;
    opacity: 100%;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.5);
}

.button-promo:hover {
    color: #ECECEC;
    background-color: #8F0200;
}

.button-promo:active {
    color: #ECECEC;
    background-color: #FF7370;
}

/* La Botia */
.image-product {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: 50% 50%; /* default */
}

/* Storia */
.storia-cover {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 97%), url("../img/storia/storia-cover.jpeg") center 100%;
    background-size: cover;
}

#title-storia {
    color: #ffffff;
}

.cover-header-storia {
    min-height: 320px;
    height: 70vh;
}

.margin-top-title-storia {
    margin-top: 8vh;
}

.transform-year {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    line-height: 1;
}

.image-storia {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.image-storia.anni30 {
    object-position: center 60%;
}

/* Motoslitta */
.background-bernardo {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 97%), url("../img/motoslitta/motoslitta-1.jpg") center no-repeat;
    background-size: cover;
    min-height: 250px;
    height: 40vh;
}

.image-motoslitta {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

/* for images of 155px height*/
.image-motoslitta-small {
    width: 100%;
    height: 155px;
    object-fit: cover;
}

.background-giornale {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 0%), url("../img/motoslitta/motoslitta-4.jpeg") center 5%;
    background-size: cover;
    min-height: 200px;
    height: 40vh;
}

.position-center-zero {
    object-position: center 0;
}

.reposition-first {
    top: -5vh;
}

.reposition-second {
    top: 5vh;
    z-index: 1;
}


/* Media Queries */
@media screen and (min-width: 450px){
    /* Button */
    .button-primary {
        padding: 9px 25px;
    }

    /* La Botia */
    .image-product {
        height: 250px;
    }

    /* Storia */
    .image-storia {
        height: 220px;
    }

    /* Motoslitta */
    .background-bernardo {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 97%), url("../img/motoslitta/motoslitta-1.jpg") center 40% no-repeat;
        background-size: cover;
        min-height: 270px;
    }

    .background-giornale {
        min-height: 310px;
    }
    .image-motoslitta {
        height: 270px;
    }

    .image-motoslitta-small {
        height: 200px;
    }
}

@media screen and (min-width: 576px){
    /* Button */
    .button-promo {
        font-size: 14px;
        letter-spacing: 2px;
        padding: 9px 21px;
    }

    /* La Botia */
    .image-product {
        height: 280px;
    }

    /* Storia */
    .image-storia {
        height: 250px;
    }
    .image-storia.anni30 {
        object-position: 100% 50%;
    }

    /* Motoslitta */
    .background-bernardo {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 97%), url("../img/motoslitta/motoslitta-1.jpg") center 40% no-repeat;
        background-size: cover;
        min-height: 320px;
    }

    .background-giornale {
        min-height: 370px;
    }

    .image-motoslitta {
        height: 300px;
    }

    .image-motoslitta-small {
        height: 230px;
    }

    .reposition-first {
        top: -8vh;
    }

    .reposition-second {
        top: 6vh;
    }

    .image-motoslitta.immagine-muro {
        width: 100%;
        height: 320px;
        object-fit: cover;
        object-position: 100% center;
    }
}

@media screen and (min-width: 768px){
    /* Scotch tape */
    .img-tape {
        position: relative;
        display: inline-block;
    }

    .img-tape:before, .img-tape:after {
        background: rgba(255,255,245,.6);
        box-shadow: 0 1px 3px rgba(0,0,0,0.6);
        content: "";
        display: block;
        height: 30px;
        position: absolute;
        margin: auto;
    }

    .img-tape-1:before {
        width: 150px;
        left: 50%;
        margin-left: -75px;
        top: -15px;
        transform: rotate(5deg);
    }

    .img-tape-1:after {
        display: none;
    }

    .img-tape-2:before {
        width: 300px;
        left: 50%;
        margin-left: -150px;
        top: -15px;
        transform: rotate(-3deg);
    }
    .img-tape-2:after {
        display: none;
    }

    /* Made for the composition of four images in "motoslitta" page*/
    .img-tape-3:before {
        width: 150px;
        left: -60px;
        margin-top: -80px;
        top: 50%;
        z-index: 2;
        transform: rotate(93deg);
    }
    .img-tape-3:after {
        width: 150px;
        margin-top: -80px;
        right: -60px;
        top: 50%;
        z-index: 2;
        transform: rotate(89deg);
    }

    .img-tape-4:before {
         width: 150px;
         left: -60px;
         margin-top: 50px;
         top: 50%;
        z-index: 2;
         transform: rotate(93deg);
    }
    .img-tape-4:after {
         width: 150px;
         margin-top: 50px;
         right: -60px;
         top: 50%;
        z-index: 2;
         transform: rotate(89deg);
    }

    /* Button */
    .button-primary {
        padding: 11px 30px;
    }

    #button-promo-place {
        top: -9vh
    }

    .button-promo {
        font-size: 16px;
        letter-spacing: 2px;
        padding: 10px 22px;
    }

    /* Home */
    .home-cover {
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0) 65%), url("../img/home/home-cover.jpg") 95% 100% no-repeat;
        background-size: cover;
    }

    /* managing the padding size of the button "tabella merceologica" for not having break lines */
    #button-tabella-merc {
        padding: 11px 9px;
    }

    /* La Botia */
    .image-product {
        height: 320px;
    }

    /* Manage the flex order for the products in extradoganali and occhiali */
    .ordering-products-flex div:nth-child(1) {order: 2;}
    .ordering-products-flex div:nth-child(2) {order: 1;}

    /* Storia */
    .cover-header-storia {
        height: 75vh;
    }

    .margin-top-title-storia {
        margin-top: 10vh;
    }

    .image-storia {
        height: 290px;
    }

    /* Motoslitta */
    .background-bernardo {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 97%), url("../img/motoslitta/motoslitta-1.jpg") center 40% no-repeat;
        background-size: cover;
        min-height: 320px;
    }

    .background-giornale {
        min-height: 500px;
    }

    .image-motoslitta-small {
        height: 300px;
    }

    .reposition-first {
        top: -8vh;
    }

    .reposition-second {
        top: 6vh;
    }
}


@media screen and (min-width: 992px) {
    body {
        /* Text */
        font-size: 18px;
    }

    .text-brand-name {
        font-size: 60px;
        letter-spacing: -1px;
    }

    .text-detail {
        font-size: 38px;
    }

    h1 {
        font-size: 56px;
    }

    h2 {
        font-size: 38px;
    }

    h3 {
        font-size: 30px;
    }

    .text-subtitle {
        font-size: 20px;
    }

    .text-pretitle {
        font-size: 16px;
    }

    .text-strong {
        font-size: 18px;
    }

    .text-small {
        font-size: 14px;
    }

    .text-button {
        font-size: 16px;
    }

    /* Button */
    .button-primary, #button-tabella-merc {
        font-size: 16px;
        padding: 10px 22px;
    }

    /* Menu */

    /* margin top for giving space to the menu*/
    .margin-top-mobile-zero {
        margin-top: 0;
    }

    .menu-bar {
        height: 9vh;
        background-color: transparent;
        z-index: 3;
        position: absolute;
        top: 0;
        /* used calc for handling the mx-xl-4 on the menu-bar for the bottom border */
        width: calc(100% - 3rem);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        border-bottom: 1px solid #ffffff;
    }

    .menu-bar.dark-text {
        border-bottom: 1px solid #281919;
    }

    /* Handle the color, hover and active of navbar and svg logo*/
    .menu-bar a {
        color: #ffffff;
    }

    .menu-bar a svg {
        fill: #ffffff;
    }

    .menu-bar.dark-text a {
        color: #281919;
    }

    .menu-bar.dark-text a svg {
        fill: #281919;
    }

    .menu-bar a:hover {
        color: #DAA520;
    }

    .menu-bar a:hover svg{
        fill: #DAA520;
    }

    .menu-bar a:active {
        color: #ffb92d;
    }

    .menu-bar a:active svg{
        fill: #ffb92d;
    }

    .menu-bar a.current {
        color: #DAA520;
    }

    .menu-bar a.current svg{
        fill: #DAA520;
    }


    /* Home */
    .bg-dovesiamo-desktop {
        height: 400px;
    }

    /* Classes for fixing the position of the last section of Desktop Homepage */
    .relative-home-block {
        height: 230px;
    }

    .reposition-home-absolute {
        top: -260px;
    }

    .img-dovesiamo-aereo {
        height: 400px;
    }

    /* La Botia */
    .image-product {
        height: 450px;
    }

    /* Storia */
    .cover-header-storia {
        height: 80vh;
    }

    .image-storia {
        height: 400px;
    }

    .image-storia.anni30 {
        object-position: 100% 60%;
    }

    .margin-top-title-storia {
        margin-top: 12vh;
    }

    /* Motoslitta */
    .background-bernardo {
        background: linear-gradient(270deg, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0) 70%), url("../img/motoslitta/motoslitta-1.jpg") center 45% no-repeat;
        background-size: cover;
        min-height: 500px;
    }

    .image-motoslitta {
        height: 400px;
    }

    /* Manage the flex order for text and image in "l'invenzione" */
    .ordering-elements-motoslitta div:nth-child(1) {order: 2;}
    .ordering-elements-motoslitta div:nth-child(2) {order: 1;}

    .background-giornale {
        min-height: 750px;
    }

    .image-motoslitta-small {
        height: 400px;
    }

    .reposition-first {
        top: -8vh;
    }

    .reposition-second {
        top: 8vh;
    }

    .image-motoslitta.immagine-muro {
        width: 100%;
        height: 500px;
        object-fit: cover;
    }

    /* Contatti */
    /* Manage the alignment of the icons with the days below in >1200px*/
    .p-left-align {
        padding-left: 15px;
    }
}

@media screen and (min-width: 1200px) {
    /* Scotch tape */
    .img-tape-1:before {
        width: 300px;
        left: 50%;
        margin-left: -150px;
        top: -15px;
        transform: rotate(3deg);
    }

    .img-tape-2:before {
        width: 500px;
        left: 50%;
        margin-left: -250px;
        top: -15px;
        transform: rotate(-1deg);
    }

    /* Button */
    .button-primary, #button-tabella-merc {
        padding: 10px 25px;
    }

    .button-promo {
        letter-spacing: 2px;
        padding: 10px 25px;
    }

    /* Home */
    .bg-dovesiamo-desktop {
        height: 510px;
    }

    /* Classes for fixing the position of the last section of Desktop Homepage */
    .relative-home-block {
        height: 250px;
    }

    .reposition-home-absolute {
        top: -370px;
    }

    .img-dovesiamo-aereo {
        height: 510px;
    }

    /* Storia */
    .image-storia.anni30 {
        object-position: center 70%;
    }

    /* Motoslitta */
    .background-bernardo {
        background: linear-gradient(270deg, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0) 70%), url("../img/motoslitta/motoslitta-1.jpg") 0 40% no-repeat;
        background-size: cover;
        min-height: 600px;
        height: 40vh;
    }
}