/**Sto class*/

/**Color*/
.st-white {
    color: #ffff !important;
}
.st-sugar-paper {
    color: #4da4df;
}
.st-blue {
    color: #130D41 !important;
}
.st-grey-3 {
    color:#596679 !important;
}

/**Margin*/
.m-b-xl {
    margin-bottom: 90px;
}

.m-t-md {
    margin-top: 30px;
}

.mt-md-35{
    margin-top: 35px;
}

.m-t-xl {
    margin-top: 90px;
}
.m-t-xl {
    margin-top: 90px;
}
.mt-4{
    margin-top: 15px!important;
}
.mr-4\.5 {
    margin-right: 20px;
}
.ml-4\.5 {
    margin-left: 20px;
}
.mt-4\.5 {
    margin-top: 20px;
}
.mt-7\.5{
    margin-top: 25px;
}
.mt-8{
    margin-top: 30px;
}
.mb-8{
    margin-bottom: 30px;
}
.mr-8{
    margin-right: 30px;
}
.mt-12\.5{
    margin-top: 50px;
}
.mt-16{
    margin-top: 60px;
}
.mb-16{
    margin-bottom: 60px;
}
.mt-30{
    margin-top: 100px;
}

.mt-48{
    margin-top: 200px;
}
.m-b-xxl {
    margin-bottom: 120px;
}

/**Padding*/
.p-t-xl{
    padding-top: 120px!important;
}
.px-8{
    padding-left: 30px;
    padding-right: 30px;
}
@media screen and (max-width: 1024px){
    .px-sm-8{
        padding-left: 30px;
        padding-right: 30px;
    }
}

/**Max width*/
.mx-w-m{
    max-width: 600px;
}
.mx-w-s{
    max-width: 500px;
}
.mx-w-xs{
    max-width: 400px;
}
.mx-w-xxs{
    max-width: 200px;
}
.mx-w-xxxs{
    max-width: 140px;
}
.max-w-lg {
    max-width: 32rem;
}
.max-w-screen-lg {
    max-width: 1100px;
}
.st-mx-w-md {
    max-width: 380px;
}

/**Min width */
.min-w-xxs{
    min-width: 170px;
}

.mx-h-sm{
    max-height: 400px;
}

/**Typography */
.ws-body-1 {
    font-weight: 400!important;
    font-size: 15px!important;
    line-height: 24px!important;
}
.ws-body-2 {
    font-weight: 700 !important;
    font-size: 16px !important;
    line-height: 24px !important;
}
.ws-subhead-1 {
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    line-height: 28px;
}
.ws-subhead {
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 32px;
}
@media screen and (max-width: 500px){
    .ws-subhead {
        font-size: 18px!important;
        line-height: 32px!important;
    }
}

.ws-caption {
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    line-height: 18px;
}

.ws-headline-1 {
    font-weight: 700 !important;
    font-size: 26px !important;
    line-height: 32px !important;
}
.ws-headline-1-500 {
    font-weight: 500 !important;
    font-size: 26px !important;
    line-height: 32px !important;
}

@media screen and (max-width: 500px){
    .ws-headline-1 {
        font-size: 20px!important;
        line-height: 28px!important;
    }
}

.ws-headline-2 {
    font-weight: 700 !important;
    font-size: 36px !important;
    line-height: 45px !important;
}

@media screen and (max-width: 500px){
    .ws-headline-2 {
        font-size: 26px!important;
        line-height: 38px!important;
    }
}

.ws-display-3 {
    font-weight: 900 !important;
    font-size: 50px !important;
    line-height: 60px !important;
}
@media screen and (max-width: 500px){
    .ws-display-3 {
        font-weight: 700!important;
        font-size: 36px!important;
        line-height: 45px!important;
    }
}

.md-display {
    font-weight: 900 !important;
    font-size: 50px !important;
    line-height: 65px !important;
}
.ws-display-1 {
    font-weight: 700 !important;
    font-size: 36px !important;
    line-height: 45px !important;
}
@media screen and (max-width: 500px){
    .ws-display-1 {
        font-size: 26px!important;
        line-height: 38px!important;
    }
}
.ws-display-2 {
    font-weight: bolder !important;
    font-size: 42px !important;
    line-height: 48px !important;
}
@media screen and (max-width: 500px){
    .ws-display-2 {
        font-size: 36px!important;
        line-height: 45px!important;
    }
}

/**Element */
.social-icon-sto{
    width: 24px!important;
    height: 24px!important;
}
.st-widget {
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    padding-bottom: 30px;
}
.content-shadow{
    box-shadow: 0px 6px 30px rgb(14 30 62 / 8%);
    border-radius: 9999px;
    height: fit-content;
}
@media screen and (max-width: 575px){
    .content-shadow {
        width: 100%;
    }
}
.st-body-blob{
    background-image: 
        url(/images/assets/blob-become-partner.png),
        url(/images/assets/blob-become-partner.png),
        url(/images/assets/blob-center-grey.png);
        background-repeat: no-repeat;
}

.wrapper-content{
    max-width: 1080px;
}
@media (min-width: 1600px) {
    .st-body-blob{
        background-size: 1230px, 900px, 2070px;
        background-position: 
        calc(50vw - 150px) calc(100% - 4630px),
        calc(50vw - 1210px) calc(100% - 4260px),
        30% 2570px;
    }
}
@media (min-width: 1200px) and (max-width: 1599px) {
    .st-body-blob{
        background-size: 1140px, 900px ,1680px;
        background-position: 
        calc(50vw - 150px) calc(100% - 4630px),
        calc(50vw - 1210px) calc(100% - 4260px),
        10% 2710px;
    }
}
@media (min-width: 995px) and (max-width: 1199px) {
    .st-body-blob{
        background-size: 800px, 700px ,500px;
        background-position: 
        calc(50vh - -330px) calc(50% - 2590px),
        calc(100vw - 1550px) calc(100% - 4260px),
        30% 2570px;
    }
}
@media (min-width: 900px) and (max-width: 994px) {
    .st-body-blob{
        background-size: 670px, 700px ,500px;
        background-position: calc(50vh - -180px) calc(50% - 3050px), calc(100vw - 1550px) calc(100% - 4260px), 30% 2570px;
    }
}

@media (min-width: 500px) and (max-width: 899px) {
    .st-body-blob{
        background-size: 550px, 0px ,0px;
        background-position: calc(50vh - -180px) calc(50% - 3050px), 0% 300px, 30% 2570px;
    }
}
@media (min-width: 370px) and (max-width: 499px) {
    .st-body-blob{
        background-size: 0px, 0px ,0px;
    }
}
.st-badge {
    max-height: 50px;
    border-radius: 0px 0px 0px 6px;
    box-shadow: 0px 5px 20px rgb(0 0 0 / 10%);
}

.st-badge-sm {
    max-height: 40px;
    border-radius: 0px 0px 0px 6px;
    box-shadow: 0px 5px 20px rgb(0 0 0 / 10%);
}

.new-sto-badge-shadow {
    max-width: 150px;
    width: 100%;
    height: auto;
    border-radius: 0px 0px 0px 6px;
    box-shadow: 0px 5px 20px rgb(0 0 0 / 10%);
}

.st-logo-md {
    border-radius: 50px;
    box-shadow: 0px 5px 20px rgb(0 0 0 / 10%);
    height: 100%;
    width: 100px;
}

.st-logo-partner {
    background-position: center;
    background-size: contain;
    height: 65px;
    min-width: 65px;
    background-repeat: no-repeat;
}
.st-bg-partner {
    background-image: url(/images/bg/bg-sto-home.png);
    background-size: 2070px;
    background-repeat: round;
}
.st-card-benefit {
    height: 140px;
    min-width: 140px;
    max-width: 140px;
    display: flex;
    justify-content: center;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
    border-radius: 30px;
    align-items: center;
}
.st-partner-box {
    min-height: 325px;
    max-height: fit-content;
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 30px !important;
}

.st-card-info {
    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    padding: 30px !important;
}

.st-pills {
    background: rgba(77, 164, 223, 0.08);
    border-radius: 100px;
    font-size: 16px;
    padding: 10px 15px;
    color: #130D41;
}

.st-partner-box__header {
    display: inline-flex;
    justify-content: space-between;
    align-items: start;
}
.st-onda-footer {
    height: 20vw;
    background-repeat: no-repeat;
    background-size: cover;
    bottom: 5px;
    position: relative;
    background-image: url(/images/assets/st-onda.svg);
    background-repeat: repeat-x !important;
    transform: rotate(-180deg);
    background-position-x: center !important;
}
.st-bg-partner.st-bg-white {
    background-image: none;
    background-color: #ffff;
    background-repeat: round;
    background-size: cover;
}

/**Border */
.st-b-t {
    border-top: 1px solid #eeeeee;
}

/**Font weight */
.f-w-500 {
    font-weight: 500;
}

/**Button */
.st-button-white {
    display: flex;
    align-items: center;
    max-height: 40px;
    justify-content: center;
    border-radius: 34px;
    background-color: white !important;
    padding: 5px 20px;
    color: #130D41 !important;
}
.st-button-go-site {
    border-radius: 100rem;
    padding: 25px 20px;
    display: flex;
    align-items: center;
    max-height: 40px;
    width: 100%;
    font-weight: 500;
    text-align: center;
    display: flex;
    justify-content: center;
    cursor: pointer;
    color: #130D41 !important;
    border: solid 2px transparent;
    background-image: url('/images/bg/bg-sto-home.png');
    background-size: cover;
    box-shadow: 2px 1000px 1px #fff inset;
}
.st-button-go-site-md {
    border-radius: 100rem;
    padding: 15px 30px;
    align-items: center;
    text-align: center;
    max-height: 60px;
    width: fit-content;
    display: flex;
    justify-content: center;
    cursor: pointer;
    color: #130D41 !important;
    border: solid 1px transparent;
    background-image: url('/images/bg/bg-sto-home.png');
    background-size: cover;
    box-shadow: 2px 1000px 1px #fff inset;
}
.st-button-go-site-sm{
    border-radius: 100rem;
    padding: 15px 25px;
    align-items: center;
    text-align: center;
    max-height: 40px;
    font-size: 18px;
    width: fit-content;
    display: flex;
    justify-content: center;
    cursor: pointer;
    color: #130D41 !important;
    border: solid 1px transparent;
    background-image: url('/images/bg/bg-sto-home.png');
    background-size: cover;
    box-shadow: 2px 1000px 1px #fff inset;
}
.st-button-outline{
    border-radius: 30px;
    padding: 10px 35px;
    min-height: 60px;
    border: 1px solid white;
    width: 91.61px;
    box-shadow: none;
    color: #fff;
    background-color: transparent!important;
}

.st-button-outline:hover{
    color: #fff!important;
}

.st-mx-h-md {
    max-height: 200px;
    overflow: auto;
}

.st-badge {
    max-height: 50px;
    border-radius: 0px 0px 0px 6px;
    box-shadow: 0px 5px 20px rgb(0 0 0 / 10%);
}

.st-badge-sm {
    max-height: 40px;
    border-radius: 0px 0px 0px 6px;
    box-shadow: 0px 5px 20px rgb(0 0 0 / 10%);
}

.st-logo-md {
    border-radius: 50px;
    box-shadow: 0px 5px 20px rgb(0 0 0 / 10%);
    height: 100%;
    width: 100px;
}

.st-logo-partner {
    background-position: center;
    background-size: contain;
    height: 65px;
    min-width: 65px;
    background-repeat: no-repeat;
}

.st-logo-partner-marketer {
    border-radius: 999px;
    width: 60px;
    box-shadow: 0px 5px 20px rgb(0 0 0 / 10%);
    background-position: center;
    background-size: contain;
    height: 60px;
    background-repeat: no-repeat;
    margin-right: 30px;
    background-size: cover;
    max-width: 60px;
}

.st-mx-w-md {
    max-width: 380px;
}

.st-mx-w {
    max-width: 600px;
}

.st-flex-wrap-partner {
    max-width: 250px;
    justify-content: flex-end;
}

.st-button-bg-partner {
    display: flex;
    align-items: center;
    max-height: 40px;
    justify-content: center;
    background-position: center;
    
    background-size: cover;
    border-radius: 34px;
    background-image: url("/images/bg/bg-sto-home.png");
    padding: 5px 20px;
    color: #ffff !important;
}

.st-button-bg-partner-md {
    display: flex;
    align-items: center;
    max-height: 60px;
    padding: 15px 35px;
    text-align: center;
    align-items: center;
    width: fit-content;
    justify-content: center;
    background-position: center;
    background-size: cover;
    border-radius: 34px;
    background-image: url(/images/bg/bg-sto-home.png);
    color: #ffff !important;
}
@media screen and (max-width: 575px){
    .st-button-bg-partner-md {
        width: 100%;
    }
    .st-button-go-site-md{
        width: 100%;
    }
}
.st-button-outline:hover{
    color: #fff!important;
}

/**Text decoration */
.text-underline{
    text-decoration: underline;
}


@media (max-width: 500px) {
    .w-sm-100 {
        width: 100%;
    }
}
body .section-header{
    padding-left: 40px;
    padding-right: 40px;
}

.st-body-blob .section-header{
    padding-left: 0px;
    padding-right: 0px;
}
.st-bg-partner .site__menu__icon{
    color: white;
}

@media (max-width: 1030px){
    .site-header{
        padding-left: 30px;
        padding-right: 30px;
    }
}

.st-mx-h-md {
    max-height: 200px;
    overflow: auto;
}


.st-flex-wrap-partner {
    max-width: 250px;
    justify-content: flex-end;
}

.truncate-text{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.st-widget .st-header {
    padding: 30px;
}

.tf-filter-item {
    display: none;
}

.tf-filter-item.show-item-pag {
    display: block;
}

.tf-filter-item.show-item-pag:not(.show-item) {
    display: none;
}

@media only screen and (max-width: 992px) {
    .col-1 {
        flex: auto !important;
    }
}