/* Extra small devices (portrait phones, less than 576px) */
@media (min-width: 1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1640px;
    }
}

@media (max-width: 1450.98px) {
    .logo-wrap {
        margin-left: 2.5%;
        margin-right: 9vw;
    }

    .menu-wrapper a.button {
        right: 10px;
    }
}

@media (max-width: 1199.98px) {

    h2.slogan {
        font-size: 3.43rem;
        line-height: 40px;
    }

    .cta-text-wrapper span {
        max-width: 100%;
    }

    .cta-text-wrapper h3 {
        max-width: 100%;
    }

    .team-wrapper .team-member {
        margin-bottom: 2.5rem;
    }

    .cta-text-wrapper {
        padding: 2.5rem;
        padding-bottom: 4rem;
    }

    .small-logo {
        display: block;
        margin-right: 0;
        margin-left: -2.5%;
    }

    .full-logo {
        display: none;
    }

    .menu-wrapper {
        margin-left: 0%;
        width: 84%;
    }

    .team-member h3 {
        font-size: 1.75vw;
        left: 1vw;
        bottom: 1vw;
    }

    .text-wrapper {
        padding: 2rem;
        padding-bottom: 4rem;
    }

    .team-blue-card span,
    .team-blue-card h3 {
        max-width: 100%;
    }

    section.team-extra {
        margin-top: 5rem;
        margin-bottom: 5rem;
    }

    /* Home */
    .home .above-the-fold::before {
        top: 50%;
        left: -52%;
        width: calc(100vw + 52%);
        height: calc(100% + 30%);
    }

    .home-sub-section {
        margin-bottom: 8rem;
    }

    .solutions {
        height: auto;
        margin-bottom: 8rem;
    }

    .solutions>div:first-child {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }

    .solutions a.button {
        position: relative;
        bottom: 0;
    }

    .solutions-container {
        padding-bottom: 1rem;
    }

    .solutions h3 {
        display: none;
    }

    .solution h4 {
        font-size: 1.875rem;
    }

    .solutions-wrapper-shade,
    .solutions-wrapper h4.outline {
        display: none;
    }

    .solutions-wrapper {
        max-height: none;
        overflow: auto;
        direction: unset;
        position: relative;
    }

    .solution p {
        margin-left: 0;
    }

    .solutions .button-wrapper {
        position: relative;
        bottom: 0;
        margin-top: 2rem;
    }

    .jobs-home {
        margin-top: 20rem;
    }

    .jobs-home .jobs-card {
        margin-right: 0;
    }

    a.scrolldown {
        display: none;
    }
}

@media (max-width: 991px) {
    .fixed-contactbar {
        display: none;
    }

    h1.big {
        font-size: 5.75rem;
        line-height: 65px;
    }

    .mobile-fade {
        position: fixed;
        height: 150px;
        /* background: red; */
        width: 100vw;
        bottom: 0;
        z-index: 100;
        pointer-events: none;
        background: rgb(0, 0, 0);
        background: -webkit-gradient(linear, left bottom, left top, color-stop(30%, rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
        background: -o-linear-gradient(bottom, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
        background: linear-gradient(0deg, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 100%);
    }

    .above-the-fold {
        margin-bottom: -5rem;
    }

    .home .above-the-fold {
        margin-bottom: 0;
    }

    /* Menu / Header */
    header {
        height: 100px;
        background: rgb(0 0 0 / 83%);
        padding-bottom: 0;
    }

    header::after {
        content: '';
        position: relative;
        display: block;
        top: 2.5rem;
        z-index: -1;
        pointer-events: none;
        width: 100vw;
        height: 140px;
        background: rgb(0, 0, 0);
        background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.83)));
        background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.83) 100%);
        background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.83) 100%);
    }

    .logo-wrap {
        max-width: 146px;
    }

    #mobile-menu-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        position: fixed;
        width: 100vw;
        height: 100%;
        background: rgb(0, 159, 227);
        background: -o-linear-gradient(320deg, rgba(0, 159, 227, 1) 0%, rgba(45, 45, 127, 1) 100%);
        background: linear-gradient(130deg, rgba(0, 159, 227, 1) 0%, rgba(45, 45, 127, 1) 100%);
        top: 0;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: 0.2s ease-in-out;
        -o-transition: 0.2s ease-in-out;
        transition: 0.2s ease-in-out;
    }

    #mobile-menu-wrapper.open {
        opacity: 1;
        visibility: visible;
    }

    #menu-mobiel-primair,
    #menu-mobiel-secundair {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    #menu-mobiel-primair a,
    #menu-mobiel-secundair a {
        text-align: left;
        font-size: 2.8125rem;
        font-weight: 800;
        line-height: 45px;
        padding: 0;
    }

    #menu-mobiel-secundair a {
        font-size: 1.625rem;
        font-weight: 500;
        line-height: 40px;
    }

    span.menu-title {
        font-size: 0.875rem;
        margin-bottom: 0.25rem;
        display: block;
    }

    .menu-top-wrapper {
        margin-top: 20vh;
    }

    .menu-bottom-wrapper {
        margin-top: auto;
        margin-bottom: 25vh;
    }

    .menu-socials-wrapper {
        margin-top: 1rem;
    }

    .menu-socials-wrapper a:not(:last-child) {
        margin-right: 0.5rem;
    }

    .fixed-items-wrapper {
        position: fixed;
        z-index: 102;
        bottom: 50px;
        max-width: 720px;
        padding: 0 15px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
    }

    .mobile-button-wrapper svg #linear-gradient-3 stop {
        stop-color: #2d2d7e;
        -webkit-transition: 0.1s ease;
        -o-transition: 0.1s ease;
        transition: 0.1s ease;
    }

    .mobile-button-wrapper svg #linear-gradient-4 stop {
        stop-color: #009fe3;
        -webkit-transition: 0.1s ease;
        -o-transition: 0.1s ease;
        transition: 0.1s ease;
    }

    .mobile-button-wrapper.open svg #linear-gradient-3 stop,
    .mobile-button-wrapper.open svg #linear-gradient-4 stop,
    .mobile-button-wrapper.open svg #linear-gradient stop,
    .mobile-button-wrapper.open svg #linear-gradient-2 stop {
        stop-color: #fff;
    }

    .mobile-button-wrapper svg #Icon_ionic-ios-menu path {
        fill: #fff;
        -webkit-transition: 0.1s ease;
        -o-transition: 0.1s ease;
        transition: 0.1s ease;
    }

    .mobile-button-wrapper.open svg #Icon_ionic-ios-menu path {
        fill: #2D2D7F;
    }

    .mobile-careers-wrapper a {
        font-weight: 500;
        color: #fff;
        text-decoration: none;
    }

    .mobile-careers-wrapper span .career-number {
        font-size: 1rem;
        position: relative;
        right: 0;
        margin-left: 1rem;
        padding: 3px 8px;
    }


    /* Home */
    .home .above-the-fold::before {
        top: 55%;
        height: 100%;
    }

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

    .solution:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2rem;
        height: 2px;
        width: 61px;
        background-color: #2D2D7F;
    }

    .jobs-home {
        margin-top: 0;
    }

    .jobs-home .jobs-card {
        float: none;
        padding: 0;
        max-width: 100%;
    }

    .jobs-card-img-wrapper {
        position: relative;
        z-index: -1;
        height: 700px;
        top: -40%;
        right: 36px;
        width: calc(100% + (36px * 2));
    }

    .jobs-card img {
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .solution-resp-hide,
    h2.slogan,
    .above-the-fold .scrolldown,
    .header-img.above-the-fold::before,
    .menu-wrapper,
    .menu-button-wrapper,
    .small-logo,
    .jobs-card a.button,
    .jobs-card::after,
    .row.pebbel-green,
    .row.cases-home::after,
    .quote.case-switch,
    .quote.case-switch,
    .case-onderaan .title-wrap {
        display: none;
    }

    .jobs-text-wrapper {
        position: absolute;
        right: 0;
        bottom: -5rem;
        background: rgb(0, 159, 227);
        background: -o-linear-gradient(305deg, rgba(0, 159, 227, 1) 0%, rgba(45, 45, 127, 1) 100%);
        background: linear-gradient(145deg, rgba(0, 159, 227, 1) 0%, rgba(45, 45, 127, 1) 100%);
        padding: 3rem 1rem 3rem 2rem;
        border-radius: 20px;
    }

    .jobs-card h3 {
        font-size: 2.5rem;
        line-height: 40px;
    }

    .case-container {
        position: relative;
        background-image: url(/wp-content/themes/byron/assets/images/svg/blue-blog.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position-x: 7rem;
        background-position-y: 13rem;
    }

    .row.cases-home {
        margin-top: 13rem;
        height: auto;
    }

    .row.cases-home>div:first-child {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
    }

    .row.cases-home>div:last-child {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }

    .case-onderaan-wrapper h2 {
        font-size: 2.5rem;
        line-height: 2.5rem;
        margin-top: 1rem;
    }

    .case-onderaan::after {
        content: none;
    }

    .row.cases-home img {
        max-height: 400px;
    }

    .archive-button {
        margin-top: 2rem;
    }

    .case-title-mobile {
        display: block;
        font-size: 2.875rem;
        line-height: 40px;
        margin-bottom: 2rem;
    }

    .case-onderaan-wrapper .button-wrapper {
        bottom: -2.5rem;
    }

    .case-onderaan-wrapper p {
        margin-top: 1rem;
    }

    .archive-button a.button {
        left: auto;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

    .archive-button .button-wrapper {
        left: auto;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

    .content h1 {
        margin-bottom: 4rem;
        font-size: 50px;
        line-height: 44px;
    }

    /* CTA */
    .cta-card-img-wrapper {
        width: 100%;
        display: none;
    }

    .full-logo {
        display: block;
        margin-left: 0;
        margin-right: 0;
        position: absolute;
        left: 50%;
        top: 30px;
        height: 100px;
        width: auto;
        z-index: 9999;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    .cta-text-wrapper {
        padding: 2.5rem;
        padding-bottom: 2rem;
        margin-top: -11%;
        width: 95%;
        position: relative;
        float: right;
        margin-bottom: 5rem;
        margin-top: 1rem;
    }

    .cta-text-wrapper h3 {
        max-width: 100%;
        font-size: 3rem;
        line-height: 3rem;
    }

    .cta-card {
        margin-top: 4rem;
    }

    .cta-text-wrapper .button-wrapper {
        position: relative;
        margin-top: 2rem;
        background-image: none;
        width: auto;
        bottom: unset;
        margin-left: 1rem;
    }

    .cta-text-wrapper .button-wrapper a {
        background: transparent;
        display: block;
    }

    .cta-text-wrapper .button-wrapper a::after {
        content: none;
    }

    .cta-text-wrapper a.button:hover {
        text-decoration: none;
        color: #FFF;
    }

    .cta-text-wrapper a.button:hover::before {
        text-decoration: none;
        color: #FFF;
    }

    .cta-text-wrapper a.button:hover::before {
        background-image: url(../images/svg/button-before.svg);
        left: 1.5rem;
    }

    .team-member {
        position: relative;
        width: 100%;
        height: auto;
        max-width: 50%;
        max-height: 50%;
        margin-left: 25%;
        margin-bottom: 2.5rem;
    }

    .team-member .member-text-wrapper {
        max-width: 100%;
        max-height: 100%;
        opacity: 1;
        background: rgb(0, 227, 114);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(40%, rgba(0, 227, 114, 0)), to(rgba(0, 0, 0, 1)));
        background: -o-linear-gradient(top, rgba(0, 227, 114, 0) 40%, rgba(0, 0, 0, 1) 100%);
        background: linear-gradient(180deg, rgba(0, 227, 114, 0) 40%, rgba(0, 0, 0, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00e372", endColorstr="#000000", GradientType=1);
    }

    .team-member h3 {
        font-size: 1.5rem;
        left: 50%;
        bottom: 2rem;
        width: auto;
        text-align: center;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }

    footer h4::before {
        left: 0;
        bottom: unset;
        top: -2rem;
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    ul.sitemap {
        display: block;
        margin-bottom: 0;
    }

    .adresgegevens,
    .footer-top {
        margin-bottom: 3rem;
    }

    .footer-top {
        margin-bottom: 3rem;
    }

    .header-img.above-the-fold::after {
        background: rgba(0, 0, 0, 0.7) !important;
    }

    /* Above the fold pagina's */
    .header-img.above-the-fold {
        background-size: 107vh 64vh;
        background-position: center;
        background-position-y: top;
    }

    .above-text {
        padding-top: calc(100vh / 1.67);
    }

    /* About us */
    .what-is-pebble span.paragraph,
    .about-us-list span.paragraph {
        margin-top: 1rem;
    }

    .row.meet-the-team {
        margin-bottom: -8rem;
    }

    .about-us-list {
        margin-top: 6.5rem;
    }

    .meet-team-card,
    .cta-card-bottom {
        position: relative;
        max-width: 90%;
        margin: 0 auto;
        top: -10rem;
    }

    .meet-team-card-img-wrapper,
    .cta-img-wrapper {
        height: 700px;
    }

    .meet-team-card .text-wrapper,
    .cta-card-bottom .text-wrapper {
        padding-right: 2rem;
    }

    .cta-row {
        margin-top: 5rem;
    }

    .footer-top .button-wrapper {
        position: absolute;
        right: 6%;
        top: calc(100% - 22px);
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .sub-img-wrapper::before {
        content: none;
    }

    .subtitel-row {
        margin-top: 3rem;
    }

    h2.big {
        font-size: 3.5rem;
        line-height: 3rem;
    }

    .case-onderaan {
        margin-top: 4.5rem;
    }

    .mobile-solution-icons.d-block.d-lg-none {
        margin-top: 5rem;
    }

    .icon {
        margin-bottom: 3rem;
    }

    .icon h3,
    .icon span {
        text-align: center;
        width: 100%;
    }

    .icon h3 {
        margin-bottom: 1rem;
    }

    .icon-afbeelding-wrapper {
        margin-top: 3rem;
    }

    .solution-content {
        margin-top: 0;
    }

    .page-template-solutions-detail .above-the-fold .container::after,
    .page-template-team .above-the-fold .container::after,
    body.error404 .above-the-fold .container::after {
        left: 0;
        background-image: url(../images/svg/blue-header-mobile.svg);
    }

    /* Solution detail */
    .icon-afbeelding-wrapper img {
        width: 56px;
        height: 56px;
    }

    .icon h3 {
        font-size: 1.375rem;
        margin-bottom: 0;
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .solution h4+p {
        margin-top: 0.25rem;
    }

    h2.case-switch {
        display: none;
    }

    .case-onderaan-wrapper a.button {
        display: none;
    }

    .content {
        margin-top: 12rem !important;
    }

    .jobs-card h3 {
        margin-bottom: 1rem;
    }

    .team-member {
        max-width: 75%;
        max-height: 75%;
        margin-left: 12.5%;
    }

    .solution {
        margin-bottom: 0;
    }

    .solution:not(:last-child)::after {
        content: "";
        position: relative;
        display: block;
        left: 0;
        bottom: 0rem;
        margin-top: 2.5rem;
        margin-bottom: 1.5rem;
        height: 2px;
        width: 61px;
        background-color: #2D2D7F;
    }

    blockquote {
        font-size: 2rem;
        padding-left: 0;
        max-width: 95%;
    }

    .footer-top .button-wrapper {
        display: none;
    }

    .content {
        margin-top: 12rem !important;
    }

    /* Common elements */
    h1.big {
        font-size: 3.75rem;
        line-height: 45px;
    }

    .fixed-items-wrapper {
        max-width: 540px;
    }

    /* Home */
    .home .above-image-right {
        width: 80%;
    }

    .home .above-text {
        padding-top: calc(100vh / 1.7);
    }

    /* Easyjobs */
    .easyjobs-shortcode-wrapper .ej-job-list .ej-job-list-item .ej-job-list-item-inner .ej-job-list-item-col+.ej-job-list-item-col {
        border-top: 1px solid #f5f7fd;
        padding-left: 0;
        border-top: 0;
        padding-top: 0;
    }

    .easyjobs-shortcode-wrapper .ej-job-list .ej-job-list-item .ej-job-list-item-inner .ej-job-list-item-col .ej-job-title {
        margin-bottom: 0px;
    }

}

@media (max-width: 575.98px) {
    header {
        height: 50px;
    }
    header:after {
        top: 0;
    }
    .full-logo {
        top: -10px;
    }

    .team-member {
        max-width: 100%;
        max-height: 100%;
        margin-left: 0;
        margin-bottom: 0;
    }

    .onderschrift {
        margin-bottom: 8rem;
    }

    .footer-afbeelding-wrapper {
        display: none;
    }

    .team-member h3 {
        bottom: 4rem;
    }

    /* Common elements */
    h1.big {
        font-size: 5.75rem;
        line-height: 65px;
    }

    h3,
    .what-is-pebble h2 {
        font-size: 2.5rem;
        line-height: 35px;
    }

    /* Home */
    .home .above-image-right {
        width: 100%;
        background-position-y: calc(100% - 38vh);
    }

    .home .above-text h1 {
        font-size: 3.75rem;
        line-height: 55px;
    }

    .home .above-text h1 span {
        display: inline-block;
    }

    .jobs-text-wrapper {
        position: absolute;
        right: -36px;
        bottom: -5rem;
        border-radius: 0;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .home .above-the-fold::before {
        display: none;
    }

    .value-container {
        position: relative;
        background-image: url(../images/svg/home-blue-asset.svg);
        background-repeat: no-repeat;
        background-size: 180%;
        background-position-x: -12rem;
        background-position-y: -3.5rem;
        padding-top: 9rem;
    }

    .row.cases-home img {
        max-height: 200px;
    }

    /* Footer */
    .fixed-contactbar {
        display: none;
    }

    /* Common elements */
    .container {
        padding-left: 36px;
        padding-right: 36px;
    }

    h1.big {
        font-size: 2.875rem;
        line-height: 40px;
    }

    #desktop-menu-wrapper {
        /* display: none; */
    }

    .fixed-items-wrapper {
        width: calc(100% - (36px * 2));
        left: 36px;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        padding: 0;
    }

    /* Home */
    .home .above-image-right {
        width: 100%;
        background-position-y: calc(100% - 51vh);
    }

    .home .above-text h1 {
        font-size: 3.75rem;
        line-height: 55px;
    }

    .home .above-text h1 span {
        display: inline-block;
    }

    .jobs-text-wrapper {
        position: absolute;
        right: -36px;
        bottom: -5rem;
        border-radius: 0;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .home .above-the-fold::before {
        display: none;
    }

    .value-container {
        position: relative;
        background-image: url(../images/svg/home-blue-asset.svg);
        background-repeat: no-repeat;
        background-size: 180%;
        background-position-x: -12rem;
        background-position-y: -3.5rem;
        padding-top: 9rem;
    }

    .row.cases-home img {
        max-height: 200px;
    }

    /* About us */
    .meet-team-card-img-wrapper,
    .cta-img-wrapper {
        width: 100vw;
        left: -36px;
    }

    .meet-team-card,
    .cta-card-bottom {
        max-width: none;
        width: calc(100vw - 36px);
    }

    .meet-team-card::after,
    .cta-card-bottom::after {
        border-radius: 0;
        border-top-right-radius: 15px;
        border-bottom-left-radius: 15px;
    }

    /* Footer */
    footer h4 {
        font-size: 2.875rem;
        line-height: 40px;
    }

    .footer-top a.button {
        display: none;
    }

    .sub-section h2 {
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
        line-height: 35px;
    }

    .sub-section {
        margin-top: 0;
    }

    .list-row {
        margin-top: 7rem;
    }

    .list-row h3 {
        margin-bottom: 1.5rem;
    }

    .page-template-solutions-detail .above-the-fold .container::after,
    .page-template-team .above-the-fold .container::after,
    body.error404 .above-the-fold .container::after {
        left: -46%;
    }

    /* Contact Form */
    .input-text-wrapper {
        flex-direction: column;
    }

    .input-text-wrapper span {
        width: 100%;
    }
}

@media (max-height: 655px) {
    #menu-mobiel-primair a {
        font-size: 2.125rem;
        line-height: 35px;
    }

    .home .above-text {
        padding-top: calc(100vh / 1.95);
    }

    .value-container {
        background-position-x: -10rem;
        background-position-y: 1.5rem;
    }

    #menu-mobiel-secundair a {
        font-size: 1.5rem;
        line-height: 30px;
    }

    header {
        padding-top: 0;
        padding-bottom: 0;
        height: 32px;
    }

    header::after {
        top: 32px;
    }

    h1.big {
        font-size: 2.5rem;
        line-height: 40px;
    }
    .full-logo {
        top: 20px;
    }
}

@media (max-height: 600px) {
    .sub-section {
        margin-top: 8rem;
    }
}