﻿/*VARIABILI--------------------------------------------------------------*/
.transition03 {
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
/*MEDIA QUERY 1200px-----------------------------------------------------------------------------------------*/
@media only screen and (min-width: 0px) and (max-width: 1200px) {
  :root {
    --textFontSize: 14px;
    --titoloDettaglioProdotto: 18px;
    --tiolo-slide: 100px;
    --font-size-h1: 32px;
    --font-size-h2: 28px;
    --font-size-h3: 18px;
    --font-size-h4: 16px;
  }
  .container {
    padding: 0 2em;
  }
  header .container {
    justify-content: space-between;
  }
  .menuVerticale.open span:hover,
  .menuVerticale.open a:hover {
    color: var(--white);
  }
  .menuVerticale.open .displayFlex {
    color: var(--white);
  }
  .menuVerticale.open .displayFlex span:hover,
  .menuVerticale.open .displayFlex i:hover {
    color: var(--white);
  }
  .menu {
    display: none;
  }
  .hamburger {
    display: block;
  }
  .chiSiamo .logo {
    width: 190px;
  }
  .prodottiClick {
    margin: 0 !important;
    padding: 0;
  }
  .prodotto h2 {
    padding-top: 40px;
  }
  .ourStory img.imgBack {
    width: 40%;
    right: 30px;
    left: unset;
    top: -45px;
  }
  .fotoStoriche {
    margin-top: 90px;
  }
  .prodotto .imgWidth100 {
    margin-bottom: 30px;
  }
  .languages .container img {
    left: 60px;
    width: 90px;
  }
  .languages span {
    margin-top: 50px;
  }
  .treMarie .div50.img {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .treMarie .div50.img.pastry img {
    height: unset;
    width: 100%;
  }
  .dettaglioBlog .bottoniSocial {
    /*       grid-template-columns: repeat(2,1fr);*/
    gap: 10px;
  }
  .dettaglioBlog .bottoniSocial a {
    max-width: unset;
  }
}
/*MEDIA QUERY 1023px-----------------------------------------------------------------------------------------*/
@media only screen and (min-width: 0px) and (max-width: 1023px) {
  :root {
    --textFontSize: 14px;
  }
  .chiSiamo {
    /* padding: 2em 2em 2em 2em;*/
  }
  .chiSiamo:nth-child(2) {
    max-width: 240px;
    width: 60%;
  }
  .footerInfo .footerInfoLeft {
    float: unset;
    text-align: center;
    padding-top: 7px;
  }
  .footerInfo .footerInfoRight {
    float: unset;
    text-align: center;
    margin-top: 15px;
  }
  .footerInfo .footerInfoRight a i {
    font-size: 22px;
    margin-right: 5px;
  }
  .footerInfo .footerInfoRight a span {
    font-size: 15px;
  }
  .privacy_info {
    width: 90%;
    padding: 50px !important;
  }
  .privacy_info h3 {
    font-size: 25px !important;
    margin-bottom: 19px;
  }
  .privacy_info b {
    font-size: 17px !important;
    margin-bottom: 7px;
    margin-top: 15px;
  }
}
/*MEDIA QUERY 1023px-----------------------------------------------------------------------------------------*/
@media only screen and (min-width: 0px) and (max-width: 992px) {
  .philosophy .imgWidth100 img {
    max-width: 300px;
  }
}
/*MEDIA QUERY 768px-----------------------------------------------------------------------------------------*/
@media only screen and (min-width: 0px) and (max-width: 768px) {
  :root {
    --textFontSize: 13px;
    --titolo-slide: 40px;
    --font-size-h1: 28px;
    --font-size-h2: 23px;
    --font-size-h3: 16px;
    --font-size-h4: 15px;
    --titoloBlogSize: 30px;
    --font-size-prodotto: 13px;
    --line-height-h1: 30px;
    --line-height-h2: 26px;
  }
  .div50,
  .div40 {
    width: 100%;
  }
  .container {
    padding: 0 1em;
  }
  .chiSiamo img {
    max-width: unset;
    height: 215px;
    object-fit: cover;
  }
  .chiSiamo .logo img {
    height: unset;
  }
  .ourStory {
    margin-top: 50px;
    margin-bottom: 0px;
  }
  .ourStory .displayFlex {
    flex-direction: column;
  }
  .ourStory p {
    padding: 20px 0;
  }
  .company {
    margin-top: 0;
  }
  .hamburger {
    right: 65px;
  }
  .img {
    width: 100%;
  }
  #bakery img {
    width: 70%;
  }
  .imgWidth100 {
    margin: 40px 0;
  }
  .imgWidth100 .container img {
    top: 20px;
    left: 100px;
    max-width: 130px !important;
    left: 120px;
    margin: auto;
  }
  .ourStory img.imgBack {
    width: 30%;
    top: -25px;
    min-width: 180px;
  }
  .ourStory.treMarie img.imgBack {
    width: 30%;
    /* top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);*/
    max-width: 170px;
  }
  .treMarie .imgWidth100 {
    margin: 40px 0;
  }
  .treMarie .imgWidth100 .container img {
    top: 20px;
    left: 100px;
    max-width: 130px !important;
    left: 120px;
    margin: auto;
  }
  .fotoStoriche {
    flex-direction: column;
    max-width: unset;
    margin-top: 40px;
  }
  .fotoStoriche img {
    width: 100%;
  }
  .history .displayFlex {
    flex-direction: column;
    padding-bottom: 0px;
  }
  .history h2 {
    margin: 2rem 0rem 2rem 0rem;
  }
  .history .testo {
    padding: 0;
  }
  .history .div50.img {
    display: flex;
    justify-content: center;
  }
  .history img {
    max-width: unset;
    width: 80%;
  }
  .history .imgWidth100 {
    height: 190px;
  }
  .philosophy .imgWidth100 {
    height: 190px;
  }
  .philosophy .container img {
    display: none;
  }
  .company img {
    width: 40%;
    min-width: 200px;
  }
  .company .displayFlex {
    gap: 45px;
  }
  .treMarie .displayFlex {
    padding-bottom: 0;
  }
  .treMarie p {
    padding: 0;
    margin-bottom: 5px;
  }
  .prodotto h2 {
    padding: 30px 0 25px 0;
  }
  .prodotto .prodotti .displayFlexColumn {
    row-gap: 15px;
  }
  .dettaglioProdotto .contProdotti .displayFlex {
    flex-direction: column;
  }
  .dettaglioProdotto .contProdotti .displayFlex.nazioni {
    display: flex;
    align-items: center;
  }
  .dettaglioProdotto .contProdotti .displayFlexColumn {
    max-width: unset;
  }
  .dettaglioProdotto .contProdotti:has(.nazioni) {
    flex-direction: column;
  }
  .dettaglioProdotto h1 {
    padding: 2em 0;
  }
  .dettaglioProdotto .descrizone {
    padding: 15px;
  }
  .blog .imgWidth100 {
    height: 225px;
    margin-bottom: 115px;
  }
  .blog .card {
    flex-grow: 1;
  }
  .blog.dettaglioBlog .imgWidth100 {
    height: 400px;
    margin-bottom: unset;
  }
  .blog.dettaglioBlog .imgWidth100 h1 {
    top: unset;
  }
  .blog.prodotto .imgWidth100 {
    margin-bottom: 30px;
    height: 150px;
  }
  .languages .imgWidth100 {
    height: 400px;
    margin-bottom: 0;
  }
  .languages .imgWidth100 h1 {
    top: unset;
    margin-top: 85px;
  }
  .languages .displayFlexColumn {
    width: 50%;
  }
  .languages .container {
    width: 90%;
    margin: 0 auto;
  }
  .languages .container img {
    top: -30px;
  }
  .popupLingua.up {
    top: -130px;
  }
  .invertito .hamburger {
    left: 70px;
  }
  footer {
    margin-top: 50px;
  }
}
/*MEDIA QUERY 500px-----------------------------------------------------------------------------------------*/
@media only screen and (min-width: 0px) and (max-width: 500px) {
  :root {
    --textFontSize: 11px;
    --titolo-slide: 20px;
    --font-size-h1: 20px;
    --font-size-h2: 17px;
    --line-height-h1: 22px;
    --line-height-h2: 20px;
    --titoloBlogSize: 20px;
  }
  .contSliderHome {
    height: calc(100vh - 85px);
  }
  .contSliderHome .slick-prev,
  .contSliderHome .slick-next {
    display: none !important;
  }
  .treMarie img.imgBack {
    width: 40%;
    max-width: 200px;
  }
  .languages .displayFlex {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  .languages span {
    padding-bottom: 40px;
  }
  .languages .container img {
    top: -15px;
    width: 60px;
  }
  .privacy_info {
    padding: 35px !important;
  }
  .privacy_info h3 {
    font-size: 21px !important;
    margin-bottom: 15px;
  }
  .privacy_info b {
    font-size: 16px !important;
    margin-bottom: 5px;
    margin-top: 11px;
  }
  .dettaglioBlog .bottoniSocial {
    grid-template-columns: repeat(1, 4fr);
  }
  .popupLingua.up {
    top: -165px;
  }
}
/*MEDIA QUERY 400px------------------------------------------------------------------------------------------*/
@media only screen and (min-width: 0px) and (max-width: 400px) {
  .privacy_info {
    padding: 25px !important;
  }
  .privacy_info h3 {
    font-size: 19px !important;
    margin-bottom: 9px;
  }
  .privacy_info b {
    font-size: 15px !important;
    margin-top: 9px;
  }
}