/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

@media (max-width: 480px) {

    /*======================================================= Header ====================================================== */
    header .container {
        max-width: 460px;
    }

    header .text .small {
        font-size: 1.2rem;
    }

    header .text .big {
        font-size: 3rem !important;
        margin: 20px 0;
    }

    header .action button {
        font-size: 1rem;
    }

    /*======================================================= Menu ====================================================== */
    menu .container {
        max-width: 460px;
    }

    menu .links li {
        padding: 10px 5px;
        font-size: 1.1rem;
    }

    /*======================================================= Section ====================================================== */
    section {
        max-width: 460px;
        padding: 20px 10px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    section h1 {
        font-size: 2rem;
        margin: 0 0 20px 0;
    }

    section h2.title {
        font-size: 2rem;
        margin: 0 0 20px 0;
        line-height: 2rem;
    }

    section h2 {
        font-size: 1.8rem;
        margin: 40px 0 30px 0;
        line-height: 1.8rem;
    }

    section p {
        font-size: 1.2rem;
        margin: 0 0 10px 0;
    }

    section li {
        list-style: disc;
        margin: 0 0 0 10px;
        font-size: 1.2rem;
    }

    /*======================================================= Cards ====================================================== */
    section .cards .card {
        width: 100%;
        margin: 20px;
        padding: 5px;
    }

    /*======================================================= Form ====================================================== */
    section form {
        -webkit-box-align: unset;
        -ms-flex-align: unset;
        align-items: unset;
        margin: 20px 0;
    }

    section form h2 {
        font-size: 1.8rem;
        margin: 40px 0 30px 0;
    }

    section form .checkbox {
        margin: 3px 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    /*======================================================= Footer ====================================================== */
    footer .container {
        max-width: 460px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    footer .ag {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    footer .cpr {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    footer .name div p {
        margin: 0 5px;
    }

    footer .contacts {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        max-width: 80%;
    }

    /*======================================================= Popup ====================================================== */
    .popup {
        position: fixed;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        background-color: antiquewhite;
        padding: 50px;
        text-align: center;
        width: 95%;
        color: black;
        border-radius: 20px;
    }

    .popup i {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        font-size: 1.6rem;
    }

    /*======================================================= Header Form ====================================================== */
    #header_form {
        width: 95%;
    }

    #header_form input[type="text"] {
        width: 100%;
    }

    #header_form button {
        width: 100%;
    }

    /*======================================================= Photo Blocks ====================================================== */
    .photo_blocks {
        margin: 20px 0 0 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        gap: 20px;
    }

    .photo_block {
        position: relative;
        margin: 30px 0 -30px 0;
    }

    /*======================================================= Row List ====================================================== */
    .rowslist {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .rowslist_left,
    .rowslist_right {
        width: 100%;
    }

    /*======================================================= Images ====================================================== */
    .images img {
        width: 90%;
        height: 100%;
        border-radius: 5px;
        margin: 10px;
    }

    /*======================================================= New Form ====================================================== */
    .new_form .inputs {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .new_form .inputs select {
        width: 100%;
        margin: 0 0 10px 0;
    }

    .new_form .inputs input {
        width: 100%;
        margin: 0 0 10px 0;
    }

    /*======================================================= Video Blocks ====================================================== */
    .video_blocks {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .video_blocks iframe {
        width: 100%;
        height: 200px;
        margin: 10px 0;
        border-radius: 5px;
    }

    /*======================================================= Calculator ====================================================== */
    .choose-calculator__button {
        margin: 0 5px;
        border-radius: 25px;
        padding: 5px;
        font-size: 1rem;
        text-align: center;
    }

    .calculator__subtitle {
        font-size: 2rem;
        line-height: 2rem;
        font-weight: lighter;
        margin: 20px 0;
    }

    /*======================================================= Agents ====================================================== */
    .agents {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .agent {
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        text-align: center;
        margin: 10px 0 20px;
    }

    .agent p {
        font-size: 1.2rem;
        margin: 10px 0;
        min-height: 0;
    }

    /*======================================================= Banks Logos ====================================================== */
    .banks_logos img {
       width: 20%;
    }
    .jobs__form{
        width: 90%;
        margin: 0 auto;
    }
}