@charset "utf-8";

/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,700&family=Montserrat:wght@200;300;400;500;600;700&display=swap');
html,
body {
    margin: 0px;
    padding: 0px;
    color: #000;
    font-family: 'Montserrat', sans-serif;
}

a,
a:hover,
a:focus {
    color: #000;
    outline: none!important;
}

.underline {
    text-decoration: underline;
}

a.underline:hover,
a.underline:focus,
button.underline:hover,
button.underline:focus,
button.underline:active {
    text-decoration: none;
}

button {
    outline: none!important;
}

textarea {
    resize: none;
}

b,
strong {
    font-weight: 700;
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn:active:focus,
.btn:focus {
    outline: 0 !important;
    outline-offset: 0 !important;
    background-image: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

body {
    background-image: url(../img/bg-body.jpg);
    background-repeat: no-repeat;
    background-position: top center;
}

body.interno {
    background-image: url(../img/bg-body-interno.jpg);
}

.fontCormorant {
    font-family: 'Cormorant Garamond', serif;
}

.font-weight-medium {
    font-weight: 500;
}

.font-weight-semiBold {
    font-weight: 600;
}

.border-top {
    border-color: #d9d9d9!important;
}

.clearfix {
    clear: both;
}

textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
    border-color: rgba(194, 162, 81, 0.8);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(194, 162, 81, 0.6);
    outline: 0 none;
}

.barrato {
    text-decoration: line-through;
}


/* ==================== font ===================== */

.font13 {
    font-size: 13px;
}

.font17 {
    font-size: 17px;
    line-height: normal;
}

.font20 {
    font-size: 20px;
}

.font22 {
    font-size: 22px;
}

.font25 {
    font-size: 25px;
}

.font30 {
    font-size: 30px;
    line-height: normal;
}

.line25 {
    line-height: 25px;
}

.line30 {
    line-height: 30px;
}

.line35 {
    line-height: 35px;
}


/* ==================== colors ===================== */

.viola {
    color: #412e54;
}

.verde {
    color: #465d32;
}

.verde2 {
    color: #038b38;
}

.oro {
    color: #c2a251;
}

.grigio {
    color: #9a9a9a;
}

.grigio-scuro {
    color: #414234;
}


/* ==================== margin/padding ===================== */

.mt-40 {
    margin-top: 40px;
}

.mt-45 {
    margin-top: 45px;
}

.mb-70 {
    margin-bottom: 70px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-110 {
    margin-bottom: 110px;
}

.pt-150 {
    padding-top: 150px;
}


/* ==================== menu ====================== */

@media (min-width: 768px) {
    .navbar .navbar-nav .nav-link {
        padding-right: 0px;
        padding-left: 0px;
        font-size: 18px;
        text-transform: uppercase;
        font-weight: 300;
        color: #fff;
        position: relative;
    }
    .navbar .navbar-nav .nav-link.active::after,
    .navbar .navbar-nav .nav-link:hover::after,
    .navbar .navbar-nav .nav-link:focus::after {
        content: '';
        background-color: #c2a251;
        width: 100%;
        height: 2px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        color: #fff;
    }
    .navbar .navbar-nav .nav-item.bag {
        padding-right: 20px;
    }
    .navbar .navbar-nav .nav-item.instagram {
        padding-right: 10px;
    }
}

.icon-bag {
    position: relative;
}

.icon-bag .numero {
    display: block;
    position: absolute;
    min-width: 25px;
    height: 25px;
    line-height: 25px;
    top: -3px;
    right: -20px;
    border-radius: 100%;
    color: #fff;
    background-color: #c2a251;
    text-align: center;
    font-size: 15px;
}


/* ==================== footer ====================== */

.footer-nero {
    background-color: #000;
    color: #fff;
    padding: 30px 0px;
    text-align: center;
}

.footer-nero a {
    color: #fff!important;
}

.footer-bianco {
    color: #bbbbbb;
}

html,
body {
    height: 100%;
}

#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -405.297px;
}

.pushfooter {
    height: 405.297px;
    clear: both;
}


/* ==================== home page ====================== */

.bg-bianco {
    background-color: #fff;
    position: relative;
}

.testo-slide {
    font-size: 45px;
    font-weight: 200;
    color: #fff;
    line-height: normal;
    text-transform: uppercase;
    padding-top: 135px;
}

.btn {
    font-size: 25px;
    padding-top: 8px;
    padding-bottom: 8px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    border-width: 3px!important;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
}

.btn-primary {
    background-color: #414234;
    border-color: #414234;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: transparent;
    border-color: #414234;
    color: #414234;
}

.slide-hp .btn-primary:hover,
.slide-hp .btn-primary:focus,
.slide-hp .btn-primary:not(:disabled):not(.disabled):active {
    color: #fff;
}

h2 {
    padding-top: 20px;
    font-size: 20px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    color: #2f4c3a;
    padding-bottom: 20px;
    background-image: url(../img/bg-h2.svg);
    background-repeat: no-repeat;
    background-position: bottom left;
    margin-bottom: 30px;
}

.icona-olive {
    position: absolute!important;
    z-index: 0!important;
    left: -70px;
}

.icona-uva {
    position: absolute!important;
    z-index: 0!important;
    right: 20px;
    top: 130px;
}

.testo-home h2,
.testo-home p,
.testo-home img {
    position: relative;
    z-index: 1;
}

.citazione-hp .testo {
    font-size: 50px;
    line-height: 50px;
    font-family: 'Cormorant Garamond', serif;
    padding: 15px 20px;
}

.apici-aperti {
    background-image: url(../img/apici-apertura.png);
    background-repeat: no-repeat;
    background-position: top left;
    width: 50px;
}

.apici-chiusi {
    background-image: url(../img/apici-chiusura.png);
    background-repeat: no-repeat;
    background-position: bottom left;
    width: 50px;
}

.fascia-hp {
    background-image: url(../img/fascia-oliva-colorata.jpg);
    background-repeat: no-repeat;
    background-position: top center;
}

.container-fluid.hp-box {
    max-width: 1760px;
}

.hp-box .left,
.hp-box .right {
    padding: 30px 45px;
    background-image: url(../img/hp-box-left.jpg);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: cover;
}

.hp-box .right {
    background-image: url(../img/hp-box-right.jpg);
    background-position: bottom right;
}

.hp-box .testo {
    font-size: 50px;
    line-height: 53px;
    font-weight: 300;
    color: #fff;
    min-height: 190px;
    margin-bottom: 20px;
}

.hp-box .btn {
    width: 300px;
}

.btn-danger {
    color: #fff;
    background-color: #ae0f0a;
    border-color: #ae0f0a;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active {
    background-color: transparent;
    border-color: #ae0f0a;
}


/* ==================== E-COMMERCE ==================== */

.bg-bianco-opacity {
    background-color: rgba(255, 255, 255, 0.8);
    position: relative;
}

.breadcrumb {
    padding: 0px 0px 25px 0px;
    background-color: transparent;
    border-radius: 0px;
    color: #2f4c3a;
    font-size: 20px;
    font-family: 'Cormorant Garamond', serif;
    background-image: url(../img/bg-breadcrumb.png);
    background-repeat: no-repeat;
    background-position: bottom left;
    margin-bottom: 1em;
    position: relative;
}

.breadcrumb-item.active {
    color: #2f4c3a;
    font-weight: 500;
}

h1 {
    font-weight: 200;
    font-size: 50px;
    line-height: 53px;
    margin-bottom: 30px;
}

.font-weight-light strong {
    font-weight: 600;
}

.produttore {
    color: #797979;
    font-size: 20px;
}

.box-prodotto .produttore {
    margin-top: 30px;
}

.box-prodotto .nome p {
    margin-bottom: 0px;
}

.box-prodotto .nome {
    font-size: 25px;
    line-height: 28px;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
}

.box-prodotto .descrizione {
    margin: 20px 0px 5px;
    padding-top: 20px;
    background-image: url(../img/bg-breadcrumb.png);
    background-repeat: no-repeat;
    background-position: top center;
    font-size: 15px;
    font-weight: 300;
}

.box-prodotto .prezzo {
    font-size: 20px;
    color: #c2a251;
    margin-bottom: 10px;
}

.box-prodotto .prezzo .da-scontare {
    font-size: 15px;
    color: #000;
    text-decoration: line-through;
}

.btn-secondary {
    color: #fff;
    background-color: #c2a251;
    border-color: #c2a251;
}

.btn img:last-child {
    display: none;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active {
    color: #c2a251;
    background-color: transparent;
    border-color: #c2a251;
}

.btn:hover img:first-child,
.btn:focus img:first-child,
.btn:not(:disabled):not(.disabled).active img:first-child,
.btn:not(:disabled):not(.disabled):active img:first-child {
    display: none;
}

.btn:hover img:last-child,
.btn:focus img:last-child,
.btn:not(:disabled):not(.disabled).active img:last-child,
.btn:not(:disabled):not(.disabled):active img:last-child {
    display: inline-block;
}


/* ==================== dettaglio ==================== */

.icona-olive.interno {
    top: -40px;
}

.miniature {
    display: flex;
}

.miniature a {
    width: 30%;
}

.miniature a:nth-child(2) {
    margin: 0px 5%;
}

.border {
    border-color: #b7b7b7!important;
}

a.media-recensioni {
    text-decoration: none!important;
}

a.media-recensioni:hover .underline {
    text-decoration: none;
}

.dettaglio .prezzo {
    font-size: 30px;
    line-height: normal;
    color: #c2a251;
    margin-bottom: 5px;
    font-weight: 700;
}

.dettaglio .prezzo .da-scontare {
    font-size: 17px;
    line-height: normal;
    color: #000;
    text-decoration: line-through;
    font-weight: 300;
}

.img-top {
    vertical-align: top;
}

.anno-raccolta {
    font-size: 22px;
    line-height: 16px;
    color: #43461c;
    text-align: center;
    display: block;
    width: 110px;
    float: left;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-style: italic;
}

input.qty {
    font-family: "Times New Roman", Times, serif;
    font-size: 25px;
    border-color: #c2a251!important;
    text-align: center;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    height: 67px;
}

.img-textTop {
    vertical-align: text-top;
}

.rating {
    overflow: hidden;
    vertical-align: bottom;
    height: 30px;
    width: 167px;
}

.rating>input {
    opacity: 0;
    margin-right: -100%;
}

.rating>label {
    position: relative;
    display: block;
    float: right;
    background: url('../img/stella-vuota.svg');
    background-repeat: no-repeat;
    background-size: 30px 30px;
    width: auto;
}

.rating>label:before {
    display: block;
    opacity: 0;
    content: '';
    width: 30px;
    height: 30px;
    background: url('../img/stella-piena.svg');
    background-size: 30px 30px;
    transition: opacity 0.2s linear;
    margin-right: 3px;
}

.rating>label:hover:before,
.rating>label:hover~label:before,
.rating:not(:hover)> :checked~label:before {
    opacity: 1;
}

.btn-link {
    font-size: 1em;
    padding: 0px;
    border: none!important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    color: #000;
}

.btn-link:hover,
.btn-link:focus,
.btn-link:active {
    color: #000;
}


/* ==================== recensioni ==================== */

.recensioni .box {
    border: 1px solid #c2a251;
    padding: 15px;
    margin-bottom: 20px;
}

.btn-light {
    color: #000;
    background-color: #d9d9d9;
    border-color: #d9d9d9;
}

.btn-light:hover,
.btn-light:focus,
.btn-light:active {
    color: #000;
    background-color: transparent;
    border-color: #d9d9d9;
}


/* ==================== thankyou page ==================== */

.btn-viola {
    color: #fff;
    background-color: #9e259d;
    border-color: #9e259d;
}

.btn-viola:hover,
.btn-viola:focus,
.btn-viola:active {
    color: #9e259d;
    background-color: transparent;
    border-color: #9e259d;
}


/* ==================== contatti ==================== */

.embed-container {
    position: relative;
    padding-bottom: 26.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

input.form-control {
    height: 58px;
    color: #000;
    border-color: #b0b0b0;
    border-radius: 0px;
}

label {
    font-weight: 300;
    font-size: 18px;
}

.btn-dark {
    color: #fff;
    background-color: #000;
    border-color: #000;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    color: #000;
    background-color: transparent;
    border-color: #000;
}

.prodotto-carrello .prezzo {
    font-size: 30px;
    line-height: normal;
    color: #c2a251;
    font-weight: 300;
}

.custom-control-label::after,
.custom-control-label::before {
    display: none;
}

.box-pagamento {
    height: 160px;
    align-items: center;
    display: flex;
    justify-content: center;
}

.custom-control {
    padding-left: 0px;
}

.custom-radio.carte label {
    padding-left: 110px;
    background: url('../img/card.png');
    background-repeat: no-repeat;
    background-position: 20px center;
}

.custom-control-label {
    cursor: pointer;
}

.box-pagamento.checked {
    border: 3px solid #038b38!important;
}

.box-pagamento .position-absolute {
    right: 30px;
    bottom: 15px;
}


/* ==================== media ==================== */

@media (min-width: 768px) {}


/* ==================== media desktop piccolo ==================== */

@media (min-width: 992px) and (max-width: 1199px) {
    .navbar .navbar-nav .nav-item {
        padding-right: 20px;
        padding-left: 20px;
    }
    .box-pagamento .font25 {
        font-size: 20px;
    }
    .box-pagamento {
        height: 200px;
    }
}


/* ==================== media tablet ==================== */

@media (min-width: 768px) and (max-width: 991px) {
    .slide-hp {
        align-items: center;
    }
    .slide-hp .testo-slide {
        padding-top: 0px;
    }
    .citazione-hp .testo {
        font-size: 40px;
        line-height: 40px;
        padding: 15px;
    }
    .loghi-qualita {
        width: 70px;
        height: auto;
    }
    .hp-box .testo {
        font-size: 40px;
        line-height: 43px;
    }
    .hp-box .left,
    .hp-box .right {
        padding: 20px;
    }
    .icon-bag .numero {
        top: -10px;
    }
    .pt-150 {
        padding-top: 100px;
    }
    .mb-70 {
        margin-bottom: 30px;
    }
    h1 {
        font-size: 40px;
        line-height: 43px;
    }
}


/* ==================== media mobile ==================== */

@media (max-width: 767px) {
    .mb-sm-3 {
        margin-bottom: 1em!important;
    }
    .mr-sm-2 {
        margin-right: .5rem!important;
    }
    .mb-70 {
        margin-bottom: 30px;
    }
    .pt-150 {
        padding-top: 50px;
    }
    .mb-110 {
        margin-bottom: 50px;
    }
    .icona-uva {
        top: auto;
        bottom: -70px;
    }
    .icona-olive {
        position: absolute!important;
        z-index: 0!important;
        left: -15px;
    }
    .testo-slide {
        font-size: 22px;
        padding-top: 0px;
        text-align: center;
    }
    .slide-hp .mt-45 {
        margin-top: 15px;
    }
    .slide-hp .btn {
        display: inline-block;
        width: auto;
        font-size: 16px;
        padding: 6px 20px;
        margin-bottom: 20px;
    }
    .loghi-qualita {
        width: 70px;
        height: auto;
    }
    .hp-box .left,
    .hp-box .right {
        padding: 15px;
        margin-bottom: 15px;
    }
    .hp-box .testo {
        font-size: 25px;
        line-height: 28px;
        min-height: auto;
        text-align: center;
    }
    .citazione-hp .testo {
        font-size: 25px;
        line-height: 25px;
        padding: 15px 5px;
        text-align: center;
    }
    h1 {
        font-size: 40px;
        line-height: 43px;
    }
    .anno-raccolta {
        font-size: 18px;
        line-height: 16px;
        width: 90px;
    }
    .embed-container {
        padding-bottom: 56.25%;
    }
    .font30 {
        font-size: 25px;
    }
}


/* ==================== media desktop grande ==================== */

@media (min-width: 1200px) {
    .navbar .navbar-nav .nav-item {
        padding-right: 50px;
        padding-left: 50px;
    }
    .navbar {
        padding-top: 25px;
        padding-bottom: 25px;
    }
}