/*
Theme : Onzly Agency
File: responsive.css
Description : Public responsive css for Front
*/

:root {
    --title-h1-font-size: 50px;
    --title-h1-line-height: calc(var(--title-h1-font-size) + 12px);
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

    #header-logo {
        height: 150px;
    }

    .page-template-page-storytelling .content-page-intro {
        max-width: 75%;
    }

    .stories-slider-nav {
        right: 0;
        left: unset;
    }

    .content-page-title h1, .content-page-title h2 {
        max-width: 70vw;
    }

    .content-page-title, #slider {
        height: calc(100vh - 150px);
        min-height: 780px;
    }

}

@media (min-width: 1024px) {

    .content-page-title, #slider {
        height: calc(100vh - 120px);
    }

}

@media (max-width: 1024px) {


    header {
        height: 120px;
    }

    .mobile-logo {
        max-width: 180px;
    }

    #slider, #slider > .row {
        min-height: calc(100vh - 150px);
    }

    .scroll-down-container {
        bottom: -2rem;
    }

    /* Services page */
    #services-cards {
        display: flex;
        padding-bottom: 7rem;
    }

    .service-card {
        position: relative;
        margin-bottom: 3rem;
    }

    .service-card-content {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
    }

    .service-card-content > div {
        padding: 5%;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: unset;
    }

    .service-card-content > figure > img {
        max-height: 350px;
    }

    /* Credos page */
    .credo-item-card-title {
        font-size: 36px;
        line-height: 46px;
        font-weight: 700;
    }

    /* Storytelling slide */

    #stories-cards {
        height: auto;
        max-height: unset;
    }

    .story-slide {
        /*min-height: 80vh;*/
        /*overflow: visible;*/
    }

    .story-slide-image {
        height: auto;
    }
    .story-slide-image img {

        object-fit: cover;
        object-position: center;
        height: 420px;
    }

    .story-slide-content-container, .story-slide-image, .story-slide-floating-image {
        transform: translateY(0);
    }
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 992px) {

    body {
        font-size: 20px;
        line-height: 32px;
    }

    /* Storytelling page */
    .storytelling-card {
        max-width: unset;
    }

    .storytelling-card-2 p {
        max-width: unset;
    }

    .story-slide-floating-image img {
        max-width: 250px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 768px) {

    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        width: 95%;
        padding: 0;
    }

    body {
        font-size: 20px;
    }

    /* Header */
    #header-logo .mobile-logo {
        max-width: 170px;
    }

    .top-menu-offcanvas-logo img {
        width: 145px;
    }

    .header_menu {
        padding-left: 0;
    }

    .header_menu li a {
        font-size: 23px;
        line-height: 38px;
        padding: 0;
    }

    #top-menu-offcanvas .offcanvas-body {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .vbp-header-menu-button__svg {
        width: 24px;
        height: 24px;
    }

    /* Slide */
    .slider-animation .static-text, .slider-animations .static-text-end {
        font-size: 2.5rem;
        line-height: 2.2;
    }

    .slider-animation-end {
        margin-top: .5rem;
    }

    .dynamic-title-targeted-style, .dynamic-title-targeted-style h2 {
        font-size: 2.8rem;
        line-height: 1.5;
    }

    /* StoryTelling */
    #storytelling .storytelling-intro span {
        font-size: 42px;
        line-height: 62px;
    }

    #storytelling .storytelling-intro p, .storytelling-card-1, .storytelling-card-2 p {
        font-size: 22px;
        line-height: 32px;
    }

    .storytelling-card-2 {
        margin-top: auto;
    }

    .storytelling-card-2 p {
        max-width: unset;
    }

    #storytelling > .row {
        background-size: cover;
        background-position: 50% -3rem;
    }

    .story-slide-image img {
        /*height: 230px;*/
    }

    #works .works-intro .works-intro-title, #works .works-intro-2 .works-intro-title {
        font-size: 28px;
        line-height: 32px;
    }

    #works .works-intro img {
        width: 68vw;
        margin-top: -20px;
        max-width: 320px;
    }

    .works-intro-content {
        font-size: 25px;
        line-height: 30px;
    }

    #works .works-intro-2 h3.works-intro-title {
        font-size: 24px;
    }

    footer a img {
        max-width: 48vw;
        margin: auto;
    }

    .burger-zone {
        width: 75px;
    }

    main .button__text {
        font-size: 18px;
    }

    /* Pages */
    .page-template #content-page-header {
        height: auto;
        padding: 0;
    }

    .content-page-title h1, .content-page-title h2 {
        font-size: calc(var(--title-h1-font-size) + 4px);
        line-height: calc(var(--title-h1-line-height) - 12px);
        max-width: 70vw;
    }

    .content-page-title h1 span, .content-page-title h2 span {
        font-size: 70px;
        line-height: normal;
    }

    #content-page-title-first span.fs-5.fw-bolder {
        display: block;
        margin-left: 8%;
    }

    .service-card-content > figure > img {
        max-height: 380px;
    }

    .content-page-title span.fs-5.fw-bolder {
        font-size: 22px !important;
        display: block;
        text-align: end;
    }

    #credos .custom_content_container {
        width: 100%;
    }

    .credo-card {
        flex-direction: column-reverse !important;
    }

    .story-slide-content {
        max-width: unset;
    }

    .story-slide-floating-image img {
        max-width: 200px;
    }


}

/* Smallest devices */
/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {

    #slider, #slider > .row {
        min-height: calc(100vh - 170px);
    }

    .content-page-title {
        height: calc(100vh - 170px);
    }

    /* Home slider animation */
    .dynamic-title {
        height: 5.45rem;
    }

    .dynamic-title-item {
        font-size: 20px;
    }

    .dynamic-title-targeted-style, .dynamic-title-targeted-style h2 {
        font-size: 1.8rem;
        line-height: 1.9;
    }

    /* content page header */
    .content-page-title h1, .content-page-title h2 {
        font-size: 40px;
        line-height: 52px;
        max-width: 70vw;
    }

    .content-page-title h1 span, .content-page-title h2 span {
        font-size: 42px;
        line-height: normal;
    }

    .content-page-intro-title {
        font-size: 26px;
        line-height: 36px;
    }

    .content-page-title h3 {
        font-size: 28px;
        line-height: 38px;
    }

    .content-page-intro {
        font-size: inherit;
        line-height: inherit;
    }

    h3.content-page-subtile-title {
        font-size: 36px;
        line-height: 46px;
        font-weight: 700;
    }

    .content-page-title span.fs-5.fw-bolder {
        font-size: 14px !important;
        text-align: end;
        display: block;
    }

    /* Services page */

    .service-item-card-title {
        font-size: 26px;
        line-height: 36px;
        margin-bottom: .5rem;
    }

    .service-item-card-subtitle {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 1.5rem;
    }

    .service-item-card-description {
        font-size: 16px;
        line-height: 26px;
    }

    .service-card-content > figure > img {
        max-height: 220px;
    }

    /* END Services page */

    /* Credos page */
    .page-template-page-storytelling .content-page-title h2 span {
        font-size: 35px;
    }

    .credo-card .credo-card-content:before {
        font-size: 150px;
        bottom: 0;
        line-height: normal;
    }

    .credo-item-card-title {
        font-size: 28px;
        line-height: 36px;
        font-weight: 700;
    }

    .credo-card p {
        font-size: inherit;
    }

    /* StoryTelling Page */

    .story-slide h2.story-slide-title {
        font-size: 32px;
        line-height: 42px;
        margin: 5%;
    }

    .story-slide h2.story-slide-title span {
        font-size: 38px;
        line-height: 48px;
    }

    .story-slide-content {
        font-size: 16px;
        line-height: 26px;
    }

    .story-slide-image img {
        height: 230px;
    }

    .story-slide-floating-image {
        width: unset;
        max-width: 30%;
        right: 15%;
    }

    .story-slide-floating-image img {
        max-width: 130px;
    }

    .story-slide-content-container {
        height: auto;
    }

    /** Footer */
    .footer-logo {
        text-align: center;
        margin: auto;
    }

    /* Scroll down */
    .scroll-down-container {
        bottom: -2rem;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
    }
    /* END Scroll down */


    /* Devis */

    .wpforms-container .wpforms-one-half, .wpforms-container .wpforms-three-sixths, .wpforms-container .wpforms-two-fourths {
        width: 100% !important;
    }

    .wpforms-container .wpforms-field.wpforms-one-half {
        margin-left: 0 !important;
    }

    #wpforms-127-field_10-container div.wpforms-container-full .wpforms-field.wpforms-field-checkbox ul li {
        width: 45% !important;
    }

    div.wpforms-container-full .wpforms-field-label-inline, .wp-core-ui div.wpforms-container-full .wpforms-field-label-inline {
        font-size: 16px !important;
    }

    input#wpforms-127-field_13_1 {
        margin: 0 12px 0 2px !important;
    }

    .contact_form_send_btn {
        margin-left: unset !important;
        width: 100% !important;
        height: 46px !important;
    }

    /* Pank */

    .page-template-page-prank .content-page-title h1 {
        font-size: 42px;
        line-height: 52px;
    }

    .prank-page-content {
        font-size: 25px;
        line-height: 35px;
    }

    .page-template-page-prank .animated-btn-container-prank .animated-btn {
        max-width: unset;
        width: 100%;
    }

    .page-template-page-prank .animated-btn-container-prank .animated-btn .button__text {
        font-size: 15px;
        line-height: 25px;
    }


}


@media (max-width: 420px) {
    .content-page-title h1, .content-page-title h2 {
        font-size: 26px;
        line-height: 36px;
        max-width: 90vw;
    }

    .content-page-title h1 span, .content-page-title h2 span {
        font-size: 36px;
    }
}