/*////////////////////////////////////////////////////// Responsive CSS Structure //////////////////////////////////////////////////////*/
@media (min-width: 1200px) and (max-width: 1920px) {
}

@media (min-width: 1024px) {
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    /* feature_section */
    .feature_section .row {
        margin: 0 -25px;
    }

    .feature_section [class*=col-] {
        padding: 0 25px;
    }

    .btn-transparent br {
        display: none;
    }
    /* feature_section end */
    
    /* feedback */
    .feedback .row {
        margin: 0px -25px;
    }

    .feedback [class*="col-"] {
        padding: 0px 25px;
    }
    /* feedback end */

    /* what-buddy */
    .what-buddy .row {
        margin: 0px -25px;
    }

    .what-buddy [class*="col-"] {
        padding: 0px 25px;
    }
    /* what-buddy end */

    .common_form .col-md-12.col-lg-6.col-xl-6.col-xxl-6 {
        width: 50%;
    }

    .common_form .col-md-12.col-lg-12.col-xl-6.col-xxl-6 {
        width: 50%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    article section {
        padding: 1rem 2rem;
    }

    .main_title {
        font-size: 28px;
        line-height: 34px;
    }

    .small_text {
        margin-bottom: 20px;
    }

    .btn-orange {
        padding: 12px 22px 12px 20px;
    }

    .btn {
        font-size: 14px;
        line-height: 16px;
    }

    .feature_section .row {
        margin: 0 -20px;
    }

    .feature_section [class*=col-] {
        padding: 0px 20px;
    }

    .feature_block {
        padding: 15px 20px;
    }

    .btn-transparent {
        padding: 8px 12px;
    }

    .feature_block .head {
        margin-bottom: 22px;
        max-width: unset;
    }

    .btn-transparent br {
        display: none;
    }

    .feature_block img {
        width: 40px;
        z-index: -1;
    }

    /* Download App start */
    .download_wrp {
        margin-top: 0;
        margin-bottom: 0;
    }
    .video_block {
        position: relative;
        left: 0;
        top: 0;
    }

    .download_section {
        padding: 15px;
    }
    /* Download App end */

    .statistics .card {
        padding: 10px;
    }

        .statistics .card .card-title {
            font-size: 30px;
            line-height: 35px;
        }

    .head {
        font-size: 16px;
        line-height: 17px;
    }

    .statistics [class*="col-"] {
        padding: 0px 12px;
    }

    .statistics .row {
        margin: 0px -12px;
    }

    .media .all-part {
        padding-bottom: 0;
    }

    /* feedback */
    .feedback .row {
        margin: 0px -20px;
    }

    .feedback [class*="col-"] {
        padding: 0px 20px;
    }

    .feedback .gemeente {
        padding: 10px 10px 10px 10px;
    }

    .buddy-part .owl-carousel .image {
        margin: 15px 13px !important;
    }

    .supported-banks .owl-carousel .image {
        margin: 19px 12px 15px !important;
    }
    /* feedback end */

    /* team */
    .team .all-block .row {
        margin: 0px -12px;
    }

    .team .all-block [class*="col-"] {
        padding: 0px 12px;
    }

    .team .all-block {
        margin-top: 30px;
    }
    /* team end */

    /* what-buddy */
    .what-buddy .row {
        margin: 0px -25px;
    }

    .what-buddy [class*="col-"] {
        padding: 0px 25px;
    }
    /* what-buddy end */

    .banner_img {
        padding: 20px 35px 0px 40px;
    }

    .play-btn img {
        width: 80px;
    }

    .common_form .col-md-12.col-lg-6.col-xl-6.col-xxl-6 {
        width: 50%;
    }

    .common_form .col-md-12.col-lg-6.col-xl-6.col-xxl-6 {
        width: 50%;
    }

    .common_form .col-md-12.col-lg-12.col-xl-6.col-xxl-6 {
        width: 50%;
    }

    .banner_img {
        margin: 20px 0 0;
    }
}

@media (min-width: 768px) {
    .modal-dialog {
        max-width: 595px;
    }
}

@media (max-width: 767px) {
    article section {
        padding: 15px 25px;
    }

    .container {
        max-width: 509px;
    }

    .main_title {
        margin-bottom: 19px;
    }

    .top-banner {
        /* Colors are rendered differently in Firefox, the easies solution is to just use 1px image instead */
        background-image: url("../images/signup-page/top-banner/bottom-color.png");
    }
    .top-banner .banner_content {
        padding: 1rem 0 1rem 0;
    }

    .top-banner .banner_bg {
        position: relative;
        height: 40vh;
        z-index: initial;
    }
        .top-banner .contact_buddy {
            top: 25%;
        }

    /* buddy-part */
    .buddy-part .all-part {
        padding: 15px 25px;
    }

    .buddy-part .owl-carousel .image {
        margin: 10px 16px !important;
    }
    /* buddy-part end */
    
    .banner_section .banner_content {
        margin-bottom: 67px;
    }

    .banner_img {
        padding: 30px 49px 0px 70px;
    }

    .feature_block {
        height: calc(100% - 39px);
        margin-bottom: 39px;
    }

    .about_section .about_img {
        margin-top: 74px;
    }

    /* Download App start */
    .download_wrp {
        margin-top: 0rem;
        margin-bottom: 5rem;
    }
        .download_wrp .download_section {
            padding-bottom: 42rem;
        }
            .download_wrp .download_section .video_block {
                position: relative;
                top: 0;
                left: -20px;
                margin-bottom: -120px;
            }
        .download_wrp .play-btn {
            top: 50%;
            left: 55%;
        }
        .download_section .row {
            flex-direction: column-reverse;
        }

    .download_section .video_content .common_form .row {
        flex-direction: inherit;
    }
    /* Download App end */

    .banner_btn a img {
        width: 51px;
        height: 50px;
    }

    .statistics .card {
        height: calc(100% - 28px);
        margin-bottom: 28px;
    }

    .download_wrp .video_content .orange_title {
        color: #000000;
    }

    .feedback .row {
        flex-direction: column-reverse;
    }

    .feedback .grote-text {
        margin-bottom: 36px;
    }

    .feedback .gemeente .row {
        flex-direction: inherit;
    }

    .media .simple-bg .bottom-image {
        bottom: -10px;
    }

    .all-part .text {
        margin-bottom: 10px;
    }

    .municipalities .all-part .text {
        margin-bottom: 27px;
    }

    /* feedback */
    .feedback .row {
        margin: 0px -12px;
    }

    .feedback [class*="col-"] {
        padding: 0px 12px;
    }

    .feedback .gemeente q {
        margin-top: 10px;
    }
    /* feedback end */
    .supported-banks shadowed-circle {
        width: 100px;
        height: 100px;
    }
        
    .fin-social .all-text {
        margin-bottom: 15px;
        padding: 0px 25px;
    }

    /* team */
    .team .all-block .row {
        margin: 0px -15px;
    }

    .team .all-block [class*="col-"] {
        padding: 0px 15px;
    }

    .team .team-block {
        height: calc(100% - 22px);
        margin-bottom: 22px;
    }

    .team .all-block {
        margin-top: 23px;
    }

    .team .main_title {
        margin-bottom: 10px;
    }
    /* team end */

    /* what-buddy */
    .what-buddy .row {
        margin: 0px -12px;
        flex-wrap: nowrap;
    }

    .what-buddy [class*="col-"] {
        padding: 0px 12px;
    }

    .what-buddy .image-text {
        height: calc(100% - 38px);
        margin-bottom: 38px;
    }
    /* what-buddy end */
    
    /* Download Start */
    .modal-content iframe {
        width: 550px;
        height: 315px;
    }
    /* Download End */
    .modal-content .modal-header {
        padding: 1rem 0;
    }

    .play-btn img {
        width: 80px;
    }

    .common_form .col-md-12.col-lg-6.col-xl-6.col-xxl-6 {
        width: 50%;
    }

    .common_form .col-md-12.col-lg-12.col-xl-6.col-xxl-6 {
        width: 50%;
    }

    .banner_img {
        margin: 20px 0 0;
    }
    
    article.management-statement shadowed-circle {
        width: 100px;
        height: 100px;
    }
}

/*---------- Small Mobile , IPhone Start ----------*/

/*=== Screen Size = 240, 320, 360, 480, 568 ===*/
@media (max-width: 565px) {
    shadowed-circle, .supported-banks shadowed-circle {
        height: 80px;
        width: 80px;
    }

    .container {
        width: 100%;
    }

    .banner_img {
        padding: 5px 5px 5px 5px;
    }

    .row {
        margin: 0px -12px;
    }
    
    .banner_content .col {
        width: 100%;
        padding: 0px 12px;
    }
    .col.first-name {
        width: 40%;
        padding-right: 3px;
    }
    .col.last-name {
        width: 60%;
        padding-left: 3px;
    }
    .col.phonePrefixColumn {
        padding-right: 3px;
    }
    .col.phoneInputColumn {
        padding-left: 3px;
    }

    .btn-orange {
        padding: 8px 15px 8px 15px;
    }

    .btn {
        font-size: 16px;
        line-height: 18px;
    }

    .banner_section .banner_content {
        margin-bottom: 20px;
    }
    .top-banner .how-it-works {
        position: relative;
        margin-top: -1.7rem;
    }
    .feature_block {
        height: calc(100% - 20px);
        margin-bottom: 20px;
    }

    .btn-transparent br {
        display: none;
    }

    .feature_section .row {
        margin: 0px -12px;
    }

    h1 {
        font-size: 25px;
        line-height: 25px;
        margin-bottom: 15px;
    }

    .feature_section [class*=col-] {
        padding: 0 12px;
    }

    .small_text {
        font-size: 16px;
        line-height: 18px;
        margin-bottom: 10px;
    }
    ul li, ol li {
        font-size: 16px;
        line-height: 18px;
    }

    .about_section .about_img {
        margin-top: 30px;
    }

    .video_block a {
        left: 65%;
        top: 85%;
    }

    .banner_btn a img {
        width: 45px;
        height: 43px;
    }

    .gemeente .profile .image img {
        object-fit: cover;
        font-family: "object-fit: cover";
    }

    .download_wrp {
        margin-top: 0rem;
        margin-bottom: 4rem;
    }

    .download_wrp .download_section {
        padding-bottom: 40rem;
    }

    .video_block a img {
        width: 50%;
    }

    .supported-banks .all-part {
        padding: 15px 25px 15px;
    }

    .statistics .row {
        margin: 0px -12px;
    }

    .statistics [class*="col-"] {
        padding: 10px 12px;
    }

    .statistics .card {
        height: 100%;
        margin: 0 auto;
    }

        .statistics .card .card-title {
            font-size: 30px;
            line-height: 35px;
        }

    .phoneNumberRow .phonePrefixColumn {
        width: auto;
    }
    .phoneNumberRow .phoneInputColumn {
        flex-grow: 1;
        width: auto;
    }

    .feedback .grote-text {
        margin-bottom: 20px;
    }

    .feedback .gemeente {
        padding: 15px 15px 15px 15px;
    }

    /* Download Start */
    .modal-content iframe {
        width: auto;
        height: 250px;
    }
    /* Download End */
    
    
    .banner_content .common_form [class*=col-3], .video_content .common_form [class*=col-3] {
        width: 25%;
    }

    .banner_content .common_form [class*=col-9], .video_content .common_form [class*=col-9] {
        width: 75%;
    }

    .buddy-part .owl-carousel .image {
        margin: 10px auto !important;
    }

    .supported-banks .owl-carousel .image {
        margin: 10px auto !important;
    }

    .fin-social .all-text {
        margin-bottom: 20px;
        padding: 0px 25px;
    }

    .fin-social .over-payment {
        padding: 25px 0px 20px;
    }

    .team .all-block .row {
        margin: 0px -12px;
    }

    .team .all-block [class*="col-"] {
        padding: 0px 12px;
    }

    .team .team-block {
        height: calc(100% - 25px);
        margin: 0 auto 20px;
        width: 295px;
        height: auto;
    }

    .what-buddy .row {
        flex-wrap: wrap;
        margin: 0px -40px;
    }
    .what-buddy .image-text {
        height: calc(100% - 20px);
        margin-bottom: 20px;
    }
    
    .feedback .gemeente {
        margin: 0 auto 25px;
    }

    .what-buddy .image-text {
        margin: 0 auto 20px;
        height: auto;
    }

    .feedback .gemeente .img-logo img {
        max-width: 60%;
        height: auto;
    }

    .feedback .gemeente .second-logo img {
        max-width: 30%;
    }

    .common_form .col-md-12.col-lg-6.col-xl-6.col-xxl-6 {
        width: 50%;
    }

    .common_form .col-md-12.col-lg-12.col-xl-6.col-xxl-6 {
        width: 50%;
    }

    .banner_img {
        margin: 20px 0 0;
    }

    article.management-statement shadowed-circle {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 400px) {
    .supported-banks .image img {
        min-height: 90px;
        min-width: 90px;
    }
    .download_wrp .download_section {
        padding-bottom: 34rem;
    }
}


@media (min-width: 576px) and (max-width: 767px) {
    .modal-content iframe {
        width: 500px;
    }
}

@media (min-width: 240px) and (max-width: 575px) {
    shadowed-circle {
        height: 80px;
        width: 80px;
    }
}
/*---------- Large Desktop , Large Screen End ----------*/