/*
Theme Name: Le Strade
Author: Le Strade
Template: hygge
Version: 1.0.0
*/

/* Theme customization starts here */


@media screen and (max-width: 1620px){}

@media screen and (max-width: 1440px){}
 
@media screen and (max-width: 1240px){
    section#slider .owl-carousel.slider-home .owl-item:not(.active) {
        opacity: 1;
    }
}

@media screen and (max-width: 1170px){
    :root { 
        /*Elementi*/
        --w-container: 100%;
        --w-container-stretto: 800px;
        --width-btn: 20px;

        --padding-container: 0 30px;
        --padding-singolo: 30px;

        --padding-colonne: 30px;
        --padding-box: 30px;
        --space-margin: 80px;
    }
}

@media screen and (max-width: 1024px){
    :root { 
        /*Elementi*/
        --w-container-stretto: 100%;

        /* Font */
        --size-h1: 48px;
        --lineH-h1: 48px;
        --weight-h1: 500;

        --size-h2: 32px;
        --lineH-h2: 36px;
        --weight-h2: 400;

        --size-h3: 22px;
        --lineH-h3: 24px;
        --weight-h3: 400;
    }
}

@media screen and (max-width: 768px){
    :root { 
        /* Font */
        --size-h1: 42px;
        --lineH-h1: 42px;
        --weight-h1: 500;

        --size-h2: 32px;
        --lineH-h2: 36px;
        --weight-h2: 400;

        --size-h3: 22px;
        --lineH-h3: 28px;
        --weight-h3: 400;

        --space-margin: 60px;
    }

    /* Colonne flex */
    .col-20-flex,
    .col-30-flex,
    .col-40-flex,
    .col-50-flex,
    .col-60-flex{
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis:90%;
    }
}

@media screen and (max-width: 600px){
    :root {
        /* Font */
        --size-h1: 38px;
        --lineH-h1: 38px;

        --padding-container: 0 20px;
    }
}

@media screen and (max-width: 480px){}

@media screen and (max-width: 375px){}





@media screen and (max-width: 1620px){}

@media screen and (max-width: 1440px){}

@media screen and (max-width: 1200px){}

@media screen and (min-width: 1171px){
    .menu-mobile {
        display: none;
    }
}

@media screen and (max-width: 1170px){
    .space-after-menu {padding-top: 25px;}
    section.bg {
        /*width: calc(100% - 60px);*/
        width: 100%;
        border-radius: 0px;
        min-width: auto;
    }
    section.bg .contenuto {
        border-radius: 0px;
    }

    .thumbnail-box.contenuto {
        padding: 0px;
    }

    .mappa-box {
        width: calc(100% - 60px);
        padding: 0px;
    }

    .menu-mobile {
        display: flex;
    }

    /* Articoli Grid 
    .hygge-sidebar--false .loop-container--style-grid article {
        flex-basis: 24%;
    }*/

    /* Articoli */
    .single .cover-wrap {padding: 0px}
    .hygge-cover {
        margin-bottom: 50px;
    }

    .hygge-sideblock {
        width: 100%;
        margin-left: 0px;
    }

    /*.post__content {
        padding-left: 0px;
    }*/

    .hygge-sideblock .post__meta__item {
        width: 100%;
    }

    .hygge-contentwidth {
        margin-left: calc( 70px - 70px );
    }

    .events-full .video-visore {
        border-radius: 0px;
    }

    section#liste .owl-carousel.carosello-liste,
    section#city .contenuto {
        overflow: visible;
    }

}

@media screen and (max-width: 1024px){
    .w-container-small.contenuto {padding: var(--padding-container);}

    h2.align-center {text-align: left!important;}
    section#partner h2.align-center {text-align: center!important;}

    /* Articolo */
    .single .main-content .post__content.single-content {
        flex-basis: 100%;
    }

    .single .editor-content {margin-bottom: var(--space-margin);}
    .single .hygge-sideblock {padding-bottom: 0px;}

    .single .hygge-sideblock .author-text,
    .single .hygge-sideblock .art-contatti,
    .single .hygge-sideblock .art-social,
    .single .hygge-sideblock .photographer-box {
        display: none; 
    }

    .single .post__content.single-content .post__meta__item {
        display: flex;
        visibility: visible;
    }

    .hygge-sideblock.sideblock-single {
        flex-basis: 100%;
        max-width: 100%;
    }

    .box-articoli-consigliati > .loop-container.loop-container--style-sidebar {
        flex-direction: row;
    }

    .box-articoli-consigliati > .loop-container.loop-container--style-sidebar article {
        flex-basis: 24%;
        flex-grow: 1;
    }

    section#news .title-h2 {
        font-size: var(--size-h3);
    }

    section#eventi h2.align-center {
        text-align: center!important;
    }
}

@media screen and (max-width: 804px){
    section#slider article.img-card-text figure {
        height: 100%;
        width: auto;
    }
}

@media screen and (max-width: 768px){
    .col-85, .col-80, .col-75, .col-70, .col-60, .col-50, .col-40, .col-33, .col-30, .col-35, .col-25, .col-15 {
        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
    }

    .breadcrumb {
        font-size: var(--size-p-small);
        line-height: var(--lineH-p-small);
    }

    /* Bottoni */
    .social-link {
        background-color: var(--light-grey)!important;
    }

    .btn:hover:before {height: 0px;}

    .btn.btn-outline, button.btn.btn-outline {
        color: var(--white);
        background-color: var(--black);
        border: 0px;
    }
    .btn.btn-outline svg path {
        fill: var(--white);
    }

    .btn:hover:before {height: 0%;}
    .btn.btn-chip:hover {
        color: var(--white);
        background-color: var(--black);
    }

    /* Articoli */
    .blocco-img .col-30-flex {
        flex-basis: 44%;
    }

    li.blocks-gallery-item {
        flex-basis: 44%;
    }

    .box-articoli-consigliati > .loop-container.loop-container--style-sidebar article {
        flex-basis: 100%;
    }

    .box-articoli-consigliati .post__inwrap {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        column-gap: 20px;
    }

    .box-articoli-consigliati .post__inwrap a figure {
        width: 200px;
    }

    .box-articoli-consigliati .post__inwrap .post__text .article-info {
        padding: 0px
    }   

    /* Articoli lista */
    .blocco-art {
        border: 0px;
        padding-bottom: 0px;
    }

    /* Milano sostenibile */
    .blank-card.col-30-flex {
        flex-basis: 44%;
        padding: 15px;
    }
    .blank-card h3 {font-size: 18px;}
    .blank-card:hover {transform: scale(1);}

    section#partner .col-30-flex {
        flex-basis: 24%;
    }

    .article-grid {
        grid-template-columns: 1fr;
    }

    article.img-card,
    article.img-card-text {
        justify-content: flex-start;
        height: auto;
    }

    article.img-card-text h3,
    article.img-card-text p,
    article.img-card-text span {
        color: var(--black)!important;
    }
    article.img-card-text .article-info h3 {
        font-size: var(--size-h3);
        line-height: var(--lineH-h3)!important;
        font-weight: 600!important;
    }

    article.img-card-text figure {
        position: relative;
        aspect-ratio: 3 / 2;
    }
    article.img-card-text figure:after {
        display: none;
    }

    article.img-card,
    article .img-card {
        flex-direction: row;
        flex-wrap: nowrap;
        flex-basis: 90%;
        column-gap: 20px;
    }
    article.img-card a,
    article .post__media {
        width: 33%;
        min-width: 200px;
    }
    .quartieri-grid article .post__media {
        width: 100%;
    }
    article.img-card .article-info,
    article.img-card-text .article-info,
    article .post__text {
        padding: 0px;
        width: 66%;
    }
    article .post__text .article-info {
        padding: 0px;
    }

    article.img-card-text:hover figure img,
    article.img-card:hover figure img,
    .loop-container--style-grid article:hover .post__inwrap.img-card figure img {
        /* le img non zoommano all'hover su mobile */
        height: 100%;
    }
    article.img-card-text:hover a h3,
    article.img-card:hover a h3 { /* i title non si sottolineano all'hover su mobile */
        text-decoration: none;
    }

    .loop-container--style-masonry article .post__inwrap:before, .loop-container--style-list article .post__inwrap:before, .loop-container--style-list-highlights article .post__inwrap:before, .loop-container--style-grid article .post__inwrap:before, .loop-container--style-grid-3-1 article .post__inwrap:before, .loop-container--style-grid-3-2 article .post__inwrap:before, .loop-container--style-masonry article .post__inwrap:after, .loop-container--style-list article .post__inwrap:after, .loop-container--style-list-highlights article .post__inwrap:after, .loop-container--style-grid article .post__inwrap:after, .loop-container--style-grid-3-1 article .post__inwrap:after, .loop-container--style-grid-3-2 article .post__inwrap:after {
        display: none;
    }

    .owl-stage-outer:after { /* togli sfumatura al fondo del carosello */
        display: none; 
    }
    .owl-carousel .owl-stage-outer {
        overflow: visible!important;
    }

    .mappa-box {
        padding: 0px;
        border-radius: 0px;
        width: 100%;
    }

    .estratto {display: none;}

    section#slider article.img-card-text figure:after {
        content: '';
        top: 0;
        left: 0;
        background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%);
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        z-index: 4;
        opacity: 1;
    }
    section#slider article.img-card-text {
        justify-content: flex-end;
    }
    section#slider article.img-card-text .article-info {
        padding: 0px;
    }
    section#slider .owl-carousel.slider-home .owl-item.active:hover article.img-card-text figure img {
        transform: none;
    }
    section#slider article.img-card-text span {
        color: var(--white)!important;
    }

    section#luoghi .owl-carousel.carosello-luoghi .owl-item:hover figure img {
        height: 100%;
    }

    section#luoghi .owl-carousel.carosello-luoghi .owl-item:hover figure {
        outline: 2px solid var(--light-grey);
        transition: none;
    }
    section#luoghi .owl-carousel.carosello-luoghi .owl-item:active {
        transform: none;
        transition: none;
    }
    section#luoghi .owl-carousel.carosello-luoghi .owl-item a .grey,
    section#luoghi .owl-carousel.carosello-luoghi .owl-item:hover a .grey {
        color: var(--black)!important;
        transition: none;
    }

    /*section#liste .owl-carousel .owl-dots,
    section#city .owl-carousel .owl-dots {
        margin: 0px;
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: row;
        margin-top: 25px;
        justify-content: center;
        column-gap: 7px;
        overflow: visible;
    }
    section#liste .owl-carousel .owl-dots .owl-dot,
    section#city .owl-carousel .owl-dots .owl-dot {
        height: 7px;
        width: 7px;
        border-radius: 100%;
        background-color: #d3d3d370;
    }
    section#liste .owl-carousel .owl-dots .owl-dot.active,
    section#city .owl-carousel .owl-dots .owl-dot.active {
        background-color: var(--black);
    }*/
    section#liste .owl-item .row-gap-20px .hidden-hover {
        display: none;
    }
    section#liste .owl-item .title-h3 {
        font-size: var(--size-h2);
        line-height: var(--lineH-h2)!important;
    }
    section#liste .owl-carousel.carosello-liste .owl-item:hover figure img {
        height: 100%;
        transition: none;
    }

    section#eventi .evento-info {
        padding: 15px;
        padding-top: 50px
    }

    a.section-title-link:hover .material-icons {
        transform: none;
        transition: none;
    }

    section#city .col-85 {
        width: 85%;
    }
    section#city .row-gap-50px {
        row-gap: 30px;
    }

    .all-articles a {width: 100%;}
}

@media screen and (max-width: 600px){
    /* Logo */
    .hygge-logo {
        padding-bottom: 30px;
    }
    /* Articoli */
    .hygge-cover {
        margin: 0 0 40px 0;
    }

    .blocco-img .col-30-flex {
        flex-basis: 90%;
    }

    .post__category .items a {
        font-size: 12px;
        line-height: 20px;
        text-transform: lowercase;
        letter-spacing: 1px;
    }

    .chip.category-chip {
        padding: 8px 12px;
    }

    section#partner .gap-30px {gap: 0px;}

    .post__meta--single .author-img {width: 50px;}

    a.prev.page-numbers {
        top: calc(100% + 20px);
        left: calc(50% - 50px);
    }
    a.next.page-numbers {
        top: calc(100% + 20px);
        right: calc(50% - 50px);
    }
    .pagination.pagination__classic {
        margin-bottom: 150px;
    }
}

@media screen and (min-width: 480px){
    section#news .contenuto > div div {
        flex-basis: 40%;
    }
}

@media screen and (max-width: 480px){
    /* Articoli */
    .blocco-img figure {height: auto!important;}

    article.img-card figure,
    article .post__media figure {aspect-ratio: 3 / 2;}

    article.img-card-text figure {
        aspect-ratio: 1 / 1;
    }
    article.img-card,
    article .post__inwrap/*,
    .hygge-sidebar--false .loop-container--style-grid article*/ {
        flex-direction: column;
        flex-wrap: wrap;
        flex-basis: 90%;
        column-gap: 20px;
    }
    article.img-card a,
    article .post__inwrap .post__media,
    article .post__text {
        width: 100%;
        min-width: auto;
    }
    article.img-card .article-info,
    article.img-card-text .article-info,
    article .post__text .article-info {
        padding: 15px 10px;
        width: 100%;
    }

    .single .categories {
        gap: 5px;
    }
    .single .chip.category-chip {
        font-size: var(--size-p-smaller);
    }

    #blocco-autore .author-img {
        width: 64px;
    }

    .box-articoli-consigliati .post__inwrap a figure {
        width: 100px;
        aspect-ratio: 2 / 3;
        height: 100%;
    }

    .share-box {
        flex-grow: 1;
        justify-content: space-between;
    }

    section#slider article.img-card-text {
        height: 60vh;
        min-height: auto;
        max-height: none;
    }

    section#news .contenuto > div div {
        flex-basis: 90%;
    }

    section#liste .owl-item figure {
        aspect-ratio: 1 / 1;
    }
}


@media screen and (max-width: 375px){
    .blank-card.col-30-flex {
        flex-basis: 90%;
    }
}