.container-wallet{
    border: 1px solid #dedede;
    width: 100% ;
}
.page-title{
    text-align: left !important;
    font-weight: normal !important;
    background-color: #ededed;
    border-bottom: 1px solid #dedede;
    padding-left: calc(15px + (30 - 15)* (100vw - 320px)/(1600 - 320));
    padding-top: 10px;
    padding-bottom: 10px;
}
.row-buttons{
    padding-top: 10px;
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;
    font-weight: bold;
    font-size: calc(15px + (20 - 15) * (100vw - 320px) / (1600 - 320));
    font-weight: bold;
}
.row-buttons-menu-mob{
    display: none;
}
.transfer-main-block{
    background-color: #f3f3f3;
    padding-bottom: 1.3em;
}
.grid-table{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 2fr));
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
            "send-money send-card payments"
            "send-money history ...";
    justify-items: center;
    color: #31343b;
    row-gap: 15px;
    column-gap: 25px;
    padding-top: 10px;
}

.grid-table a{
    color: #31353e;
}
.grid-table > a{
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 1em;
    padding:  calc(10px + (30 - 10) *(100vw - 320px) /( 1600 - 320) );
    width: 100%;
    transition: 0.2s cubic-bezier(1, 0.32, 1, 1);
}
:where(.send-money, .send-card, .payments, .history):hover{
    background-color: white !important;
    box-shadow: 3px 3px 7px rgb(185,185,185);
    transform: translate3d(-1px, -2px, 0);
}
:where(.send-money, .send-card, .payments, .history):hover .icon{
    color: #868894;
}
/*button Send a transfer*/
.send-money{
    grid-area: send-money;
}
.send-money-body{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.icon{
    display: flex;
    justify-content: center;
    font-size: calc(50px + (100 - 50)*(100vw - 320px) / (1600 - 320));
    color: #51b044;
    margin-bottom: 20px;
    transition: 0.2s cubic-bezier(1, 0.32, 1, 1);
}

.title_text{
    text-align: left;
    font-size: calc(16px + (25 - 16) * (100vw - 320px) / (1600 - 320));
}
.type-money{
    display: flex;
    color: #868894;
    flex-direction: column;
}
.type-money > i:before {
    padding-right: 10px;
    color: #51b044;
}
.text-title{
    margin-bottom: 50px;
}
/*button Send to card*/
.send-card{
    grid-area: send-card;
}
/* button Payments*/
.payments{
    grid-area: payments;
}
/* button Translation history*/
.history{
    grid-area: history;
}

/*advertisement*/
.item-image-banner img{
    height: auto;
    width: 100%;
    max-height: 300px;
    object-fit: contain;
}
.row{
    min-width: 0 !important;
}
body{
    min-width: 0 !important;
}
.item_title-banner{
    padding-top: 10px;
    font-size: 20px;
    text-align: center;
}
.dots > .slick-dots{
    position: relative;
    transform: rotate(-90deg);
    top: 0;
    left: calc(50% - 20px);
}
.dots > .slick-dots li.slick-active button:before {
    color: #228b22;
    background: #228b22;
}
.dots > .slick-dots li button:before{
    border: 2px solid #228b22;
}
.banner{
    margin-bottom: 0 !important;
}
.item-banner{
    padding: calc(10px + (30 - 10) * (100vw - 320px) / (1600 - 320));
    transition: 0.3s ease-in;
    border-radius: 1em;
    background-color: #f9f9f9;
    border: 1px solid transparent;
}
:where(:nth-of-type(1), :nth-of-type(2)) .item-banner{
    margin-right: 12.5px;
}
.item-banner:hover{
    background-color: white;
    border: 1px solid #dedede;
}
@media (min-width: 1200px) {
    .slick-slide{
        max-width: 1100px;
    }
}
@media (min-width: 992px) and (max-width: 1200px) {
    .slick-slide{
        max-width: 920px;
    }
}
@media (min-width: 768px) and (max-width: 992px){
    .slick-slide{
        max-width: 680px;
    }
}
@media (min-width: 576px) and (max-width: 768px){
    .slick-slide{
        max-width: 500px;
    }
}
@media (max-width: 576px) {
    .slick-slide{
        max-width: calc(100vw - 42.5px);
    }
}
@media (min-width: 1600px) {
    .icon{
        font-size: 100px;
    }
}
@media (min-width: 1200px) {
    .container-wallet{
        max-width: 1140px;
    }
}
@media (min-width: 992px) and (max-width: 1200px) {
    .container-wallet{
        max-width: 960px;
    }
}
@media (min-width: 768px) and (max-width: 992px){
    .container-wallet{
        max-width: 720px;
    }
}
@media (min-width: 576px) and (max-width: 768px){
    .container-wallet{
        max-width: 540px;
    }
}
@media (max-width: 768px) {
    .grid-table{
        grid-template-areas: "send-money send-card" "payments history";
    }
    .text-title{
        display: none;
    }
    .description-text{
        opacity: 0;
        transition: 0.2s cubic-bezier(1, 0.32, 1, 1);
    }
    :where(.send-money, .send-card, .payments, .history):hover .description-text{
        opacity: 1;
    }
    .title_text{
        text-align: center;
    }
}
@media (max-width: 768px) {
    .row-buttons{
        display: none;
    }
    .row-buttons-menu-mob{
        display: block;
        padding-top: 10px;
    }
    .menu-title{
        font-size: 20px;
        text-align: center;
        cursor: pointer;
    }
    .menu-body{
        display: none;
    }
    .active-mob-menu{
        display: flex;
        flex-direction: column;
    }

    .menu-body > a:first-child{
        padding-top: 10px;
    }
    .menu-body > a{
        padding: 5px 0;
        font-size: 19px;
    }
    .menu-body > a:after{
        content: '';
        display: block;
        width: 0;
        height: 2px;
        background-color: #228b22;
        transition: .3s cubic-bezier(1, 0.03, 1, 0.9);
    }
    .menu-body > a:hover:after, .menu-body > a:focus:after{
        width: 100%;
    }
}
@media (max-width: 400px) {
    .grid-table{
        grid-template-areas: "send-money"
                              "send-card"
                              "payments"
                              "history";
    }
}