@media screen and (max-width: 844px),
screen and (max-width: 932px) {

    body {
        font-size: 15px;
    }

    #chi-siamo, #cosa-facciamo, #contattaci, #il-team, #diventa-cipolla {
        scroll-margin-top: 72px;
    }

    header {
        padding: 40px 0;
        height: auto;
    }

    header.collapsed {
        padding: 20px 0;
        height: auto !important;
    }

    header .navbar {
        display: none;
    }

    header .branding svg,
    header.collapsed .branding svg{
        height: 28px;
    }

    body.privacy header .branding {
        padding: 0;
    }

    body.privacy h1 {
        font-size: 30px;
        text-align: center;
    }
    body.privacy h2,
    body.privacy h3 {
        font-size: 20px;
    }
    body.privacy p {
        font-size: 16px;
        text-align: justify;
    }

    button.contact-us,
    header.collapsed header .branding svg {
        height: 34px;
        font-weight: 500;
        font-size: 12px !important;
        gap: 10px;
        padding-left: 18px;
        padding-right: 18px;
    }



    button.contact-us svg,
    header.collapsed button.contact-us svg{
        height: 18px;
    }

    section.cosa-facciamo .row .column.image {
        display: none;
    }

    section.hero .visual {
        width: 100vw;
        height: 40vw;
        left: 0;
        margin-left: 0;
        bottom: -60px;
    }

    section.hero .visual img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
    }

    .container,
    section.human .container,
    section.connessione .container {
        width: 100%;
        padding-left: 30px;
        padding-right: 30px;
    }

    .form label {
        font-size: 14px;
        text-align: left;
    }

    .head-menu > a {
        display: inline-block;
    }

    input[type="text"] {
        font-size: 15px;
    }

    .ro-dialog .ro-content {
        width: 300px;
        padding: 20px;
    }

    .ro-dialog.noframe .ro-content {
        width: 320px;
        height: 180px;
    }
    .videoframe {
        width: 320px;
        height: 180px;
    }

    h1 {
        font-size: 45px;
        line-height: 42px;
    }
	.single h1 {
		font-size: 36px;
		line-height: 40px;
	}
    section.hero span.subtitle {
        font-size: 15px;
        display: inline-block;
        width: 100%;
        padding-top: 20px;
    }
    section.hero {
        padding: 148px 0 180px;
    }
    section.hero .visual {
        bottom: -50px;
    }
    .velocita-efficacia, section.human .container {
        padding-top: 140px;
        font-size: 30px;
    }
    .velocita-efficacia {
        padding-bottom: 80px;
    }
    section.human .container {
        padding-top: 80px;
        padding-bottom: 80px;
    }
    section.connessione .container {
        padding-top: 80px;
    }
    section.connessione h2 {
        margin-bottom: 80px;
    }
    section.connessione .conn-anim {
        width: 300px;
        height: 107px;
        margin-left: -150px;
        bottom: -50px;
    }
    section.connessione .conn-anim svg {
        width: 100%;
        height: auto;
    }
    section.human .container {
        display: inline-block;
        height: auto;
    }
    section.human .container>div:first-of-type {
        text-align: center;
    }
    section.human .container>div:first-of-type,
    section.human .container>div:last-of-type {
        width: 100%;
    }
    p.enfasi {
        font-size: 30px;
    }
    h2 {
        font-size: 33px;
    }
    section.staff .row {
        flex-wrap: wrap;
    }
    section.staff .row .column {
        width: 48%;
    }
    section.staff .row .column .didascalia {
        padding: 16px 0;
    }
    section.staff .row .column .didascalia .name {
        font-size: 14px;
    }
    section.staff .row .column .didascalia .role {
        font-size: 11px;
    }
    section.staff .row.non-4 {
        justify-content: space-between;
        gap: 0;
    }
    section.volare {
        padding: 30px 30px;
    }
    section.volare .container {
        padding: 30px;
    }
    section.volare h2 {
        margin-bottom: 50px;
    }
    section.volare p {
        width: 100%;
        font-size: 15px;
        margin-bottom: 18px;
    }

    p {
        font-size: 15px;
    }
    section.connessione .container {
        padding-bottom: 90px;
    }
    section.stare-bene .row {
        display: inline-block;
        height: auto;
        width: 100%;
    }
    section.stare-bene .row .column:first-of-type,
    section.stare-bene .row .column:last-of-type {
        width: 100%;
    }
    section.stare-bene .container {
        padding: 120px 30px 80px 30px;
    }

    .menu {
        display: inline-block;
    }

    .volare span.yellow svg {
        height: 60px;
    }

    section.volare .container {
        background-image: url('../images/cornice-bianca-mobile.svg');
    }

    section.volare .container .volare-anim {
        position: relative;
        width: 300px;
        height: 373px;
        right: unset;
        bottom: unset;
    }
    section.volare .container .volare-anim img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: auto;
    }

    section.clienti {
        padding: 80px 0;
    }
    section.clienti .animated-strip {
        margin-top: 50px;
    }
    section.clienti .marquee img {
        width: 230px;
    }

    p {
        margin-bottom: 20px;
    }
    section.qualita {
        padding: 80px 0;
    }
    section.cosa-facciamo .container {
        padding: 80px 15px;
    }
    section.ci-sappiamo-fare {
        padding: 80px 0;
    }
    section.ci-sappiamo-fare h2 {
        margin-bottom: 80px;
    }


    section.video div.img {
        width: 300px;
        height: 164px;
    }
    section.video div.img svg {
        width: 40px;
        height: auto;
    }
    section.vibes h2 {
        margin-bottom: 30px;
    }
    section.vibes {
        padding: 80px 0;
    }
    section.project {
        padding: 80px 0;
    }

    section.stare-bene h2 {
        text-align: center;
        margin-bottom: 55px;
    }

    section.project p:first-of-type {
        text-align: left;
    }
    section.bottom {
        padding: 80px 0;
    }
    section.cosa-facciamo .row {
        display: inline-block;
        width: 100%;
        height: auto;
    }
    section.cosa-facciamo .row .column {
        width: 100%;
    }
    section.cosa-facciamo .accordion .item h3 {
        font-size: 24px;
    }
    section.cosa-facciamo .accordion .item p {
        font-size: 16px;
    }
    section.ci-sappiamo-fare .animated-strip {
        height: 70px;
        font-size: 50px;
    }
    section.vibes .row {
        display: inline-block;
        width: 100%;
        height: auto;
    }
    .form .form-row.two-column .column, section.vibes .row .column {
        width: 100%;
    }
    .form .form-row.two-column {
        display: block;
    }
    .form .form-row.two-column .column {
        margin-bottom: 20px;
    }
    .form .form-row {
        margin-bottom: 20px;
    }

    footer .row {
        display: inline-block;
        width: 100%;
        height: auto;
    }
    footer .row .column {
        width: 100%;
        text-align: center;
    }
    footer .row .column .social {
        justify-content: center;
    }

    
    section.news .container .row {
        flex-wrap: wrap;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    section.news .container .column.news-item {
        width: 100%;
    }
    section.news .news-item h3 {
        font-size: 24px;
        padding: 0;
        line-height: normal;
        margin-bottom: 20px;
    }
    .only-desktop {
        display: none;
    }
    section.news .news-item p{
        font-size: 15px;
    }
    .listing, .single {
        padding-top: 170px;
    }

    .listing .article {
        text-align: left;
        padding: 40px 0;
        border-bottom: 2px solid #5B5B5B;
        gap: 10px;
    }

    .listing .article > .image {
        width: 100px;
        height: 100px;
        flex-shrink: 0;
    }
    
    .listing .article h3, .single h2 {
        font-size: 23px;
        margin-bottom: 20px;
    }
    
    .listing .article p {
        font-size: 16px;
    }
    
    .listing .article .date, .single .corpo .date {
        font-size: 15px;        
    }

    .press .cta-article {
        scale: 0.7;
    }

    .cta-article svg {
        top: 11px;
    }

    .single .corpo .copertina50, .single .corpo .copertina50 {
        width: 100%;
        padding: 0 0 20px 0;

    }

    .press .row {
        flex-wrap: wrap;
    }

    .press .row .column {
        width: 100%;
        padding-bottom: 20px;
    }



}

@media screen and (min-width: 500px) and (max-width: 1024px) {

}