h2, h3, h4 {
    width: 100%;
}
h1 {
    font-size: 24px !important;
    font-weight: 900;
    color: #0958A5;
}
h2 {    
    font-size: 20px;
    font-weight: 900;
    margin-bottom: 1.5rem;
    color: #0958A5;
}
h4 {
    font-size: 18px;
}
a {
    text-decoration: none;
}
button, input, textarea {
    font-family: 'Lato';
}
strong {
    font-weight: 700;
}
sup {
    vertical-align: super;
    font-size: 50%;
}
.p-1 {
    padding: 1rem;
}
.px-3 {
    padding: 0 3rem !important;
}
.m-auto {
    margin: auto !important;
}
.mt-2 {
    margin-top: 2rem !important;
}
.mb-2 {
    margin-bottom: 2rem !important;
}
.mb-3 {
    margin-bottom: 3rem !important;
}
.mb-4 {
    margin-bottom: 4rem !important;
}
.fs-16 {
    font-size: 16px !important;
}
.fs-32 {
    font-size: 32px !important;
}
.fw-900 {
    font-weight: 900 !important;
}
.bg-blue {
    background: #0F5C9E;
    color: #fff;
}
.bg-bluesoft {
    background: rgba(9, 88, 165, 0.05); 
}
.bg-bluemedium {
    background: rgba(15, 92, 158, 0.2);
}
.bg-wave1 {
    background-image: url('../images/franchise/bg-wave-1.png');
}
.bg-wave2 {
    background-image: url('../images/franchise/bg-wave-2.png');
}
.bg-waveblue {
    background-color: #CFDEEC;
    background-image: url('../images/franchise/bg-wave-blue.png');
}
.bg-wavepink {
    background-color: #FFE4E4;
    background-image: url('../images/franchise/bg-wave-pink.png');
}
.bg-wave1, .bg-wave2, .bg-waveblue, .bg-wavepink {
    background-position: top;
    background-size: 100%;
    background-repeat: no-repeat;
}
.text-blue {
    color: #0958A5;
}
.banner-top {
    margin-bottom: -3px;
}
.section h2 {
    color: #fff;
    background: #0F5C9E;
    border-radius: 0 0 20px 20px;
    width: auto;
    margin: 0 auto 3rem;
    padding: 7px 55px 10px;
}
.title-bar {
    font-family: 'Lato';
    font-size: 24px !important;
    font-weight: 900;
    padding: 20px 0;
}
.main-content {
    background-color: #ffffff;
    font-size: 14px;
    font-family: 'Lato';
    line-height: 1.3;
}
.main-content.no-padding {
    padding-bottom: 0 !important;
}
.main-content * {
    box-sizing: border-box;
}
.main-content img {
    max-width: 100%;
}
.main-content p {
    margin-bottom: 1rem;
}
.col-img {
    padding-left: 2rem;
}
.dynamic-content ul {
    list-style: disc;
}
.dynamic-content ul li, .dynamic-content ol li {
    margin-bottom: 1rem;
}
.map-wrapper {
    width: 100%;
}
.map-title {
    background: #E82835;
    color: #ffffff;
    border-radius: 10px 10px 0 0;
    padding: 1rem;
    font-weight: 700;
    font-size: 16px;
}
.map-body {
    background: #0958A5;
    color: #ffffff;
    border-radius: 0 0 10px 10px;
    padding: 2rem;
}
.map-body p {
    max-width: 673px;
    margin: auto;
}

.card-wrapper .slick-track {
    display: flex !important;
}
.card-wrapper .slick-slide {
    height: inherit !important;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    margin: 3px .75rem;
}

.cardthin {
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
    border-radius: 10px;
}
.card-wrapper {
    display: grid;
    width: 100%;    
    row-gap: 2.25rem;
}
/*.card-grid .card {
    height: 100%;
}*/
.card {
    box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 1rem;
    position: relative;
    background-color: #fff;
}
.card > * {
    font-size: 13px;
}
.card > span, .card > a {
    display: block;
    font-weight: 600;
    color: #333;
}
.card > a:after {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 10px;
}
.card > a:hover:after {
    box-shadow: 0 0 10px rgba(4, 92, 158, .5);
}
.card > a h4 {
    font-weight: 700;
    font-size: 18px;
    color: #0958A5;
}
.card > img {
    margin: 0 auto 1rem;
}
.card > label {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #E82835;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    padding: 0.45rem 0.7rem;
    border-radius: 10px 0 0 0;
}
.card > strong {
    display: block;
    margin-bottom: .5rem;
}
.card > *:last-child {
    margin-bottom: 0;
}
.card.contact h5 {
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 1.5rem;
}
.card.contact dt {
    font-size: 12px;
}
.card.contact dd {
    font-weight: 700;
    margin-bottom: 1rem;
}
.card.contact a.btn-blue {
    font-size: 14px;
    color: #fff;
    display: inline-block;
    padding-bottom: 8px;
    padding-top: 6px;
}
.content-outer {
    width: 100%;
    display: flex;
    justify-content: center;
}
.banner-cta {
    background-image: url(../images/franchise/bg-cta2-m.png), url(../images/franchise/bg-cta-m.png);
    background-repeat: no-repeat;
    background-size: 100%;
    color: #ffffff;
    margin: 3rem 0 0.5rem;    
    align-items: center;
}
.banner-cta .cta-body {
    justify-content: end;
    display: flex;
}
.banner-cta h3 {
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 1rem;
}
.btn-blue {
    font-size: 16px;
    font-weight: 600;
    background: #0F5C9E;
    color: #ffffff;
    padding: 1rem 1.65rem;
    display: inline-block;
    border-radius: 75px 0;
}
.btn-bluebox {
    font-size: 16px;
    font-weight: 700;
    background: #0958A5;
    color: #ffffff;
    padding: 1rem;
    width: 100%;
    display: block;
    border-radius: 5px;
    border: none;
    text-transform: uppercase;
}
.box {
    display: table;
    padding: 1.5rem 0;
    margin-bottom: 1.7rem;
    border-radius: 10px;
    overflow: hidden;
}
.box-blue {
    background: url('../images/franchise/bg-toko.jpg') no-repeat;
    background-size: cover;
    color: #ffffff;
    position: relative;
}
.box-blue:before {
    background: rgba(15, 92, 158, 0.75);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: '';    
}
.box .box-col {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    padding: 0 5px;
}
.box-blue .box-col + .box-col {
    border-left: solid 1px #fff;
}
.box label, .box-wrapper h4, .box-wrapper h5 {
    font-weight: 700;
}
.box label {
    font-size: 12px;
}
.box h3 {
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}
.box h4 {
    font-size: 16px;
}
.box h5 {
    font-size: 15px;
}
.tabel-calc td {
    position: relative;
    padding: 8px 10px;
    font-size: 12px;
    color: #0F5C9E;
    font-weight: 900;
}
.tabel-calc td:before {
    content: "";
    border: solid 2px #0F5C9E;
    border-radius: 8px;
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    background: #fff;
}
.tabel-calc td span {
    position: relative;
    z-index: 1;
}

.title-wave {
    background: #0958A5;
    color: #fff;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 900;
    border-radius: 50px 0 50px 0;
    padding: 1rem 3rem;
    display: inline-block;
    margin: -16px 0 0 15%;
}
.form-row {
    width: 100%;
    display: flex;    
    margin-bottom: 1.75rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap:wrap;
}
.form-row label {
    width: 25%;
    text-align: left;
    font-weight: 700;
    font-size: 16px;
    color: #000;
}
.form-row input, .form-row select, .form-row textarea {
    width: 100%;/*75%;*/
    border: solid 1px #000;
    border-radius: 5px;
    font-size: 16px;
    padding: 9px 12px;
}
.form-row .input {
    position: relative;
}
.form-row .input .postfix {
    position: absolute;
    right: 0;
    top: 0;    
    bottom: 0;
    width: 45px;
    background: #0958A5;
    color: #fff;
    padding: 0.825rem 0rem;
    border-radius: 0 5px 5px 0;
}
.input input + input[type=file] {
    position: absolute;
    right: 0;
    border: none;
    padding: 0;
    opacity: 0;
    height: 100%;
}
.form-area .error .notif {
    position: absolute;
    font-size: 75%;
    left: 0;
    right: 0;
    top: 102%;
}
address h3 {
    font-size: 22px !important;
    font-weight: 700;
    margin-bottom: 1rem;
}
address table {
    margin-top: 1rem;
}
address table td {
    font-size: 16px;
    font-weight: 700;
    padding: 0 30px 5px 0;
}

.main-content .content-wrapper .pagination-area {
    justify-content: center;
}
.main-content .content-wrapper .pagination-area button.pagination {
    background: none;
    font-weight: 900;
    font-size: 16px;
    border-bottom-width: 0;
}
.main-content .content-wrapper .pagination-area button.pagination.active {
    color: #0F5C9E;
}

@media(max-width: 768px) {
    .mobile-hide {
        display: none !important;
    }
    .content-wrapper .w50, .content-wrapper .w70, .content-wrapper .w49{
        width: 100%;
    }    
    /*.card-wrapper .card-grid {
        padding: 1px .75rem;
    }*/
    .card-wrapper.card-2-mobile {
        column-gap: 4%;
        grid-template-columns: 48% 48%;
    }
    .card-wrapper.card-2-mobile .card > span {
        font-size: 12px;
    }
    .card-wrapper.card-3-mobile {
        column-gap: 2.5%;
        grid-template-columns: 31.6% 31.6% 31.6%;
    }
    .card-3-mobile .card > a h4 {
        font-size: 13px;
    }
    .box strong {
        font-size: 10px;
    }
    .box .box-col {
        line-height: 1.2;
    }
    .form-row .input.w49 + .input.w49 {
        margin-top: 1.75rem;
    }
}
@media(min-width: 769px) {    
    .fs-20 {
        font-size: 20px !important;
    }
    h1 {
        font-size: 34px !important;
    }
    address h3 {
        font-size: 24px !important;
    }
    .px-3-d {
        padding: 0 3rem !important;
    }
    .title-bar {
        font-size: 26px !important;
    }
    .btn-blue {
        font-size: 22px;
    }
    .card-wrapper.card-3 {
        column-gap: 3.5%;
        grid-template-columns: 31% 31% 31%;
    }
    .card-wrapper.card-4 {
        column-gap: 2.5%;
        grid-template-columns: 23.125% 23.125% 23.125% 23.125%;
    }
    .card {
        padding: 1.5rem;
        min-height: 200px;
    }     
    .btn-blue {
        padding: 1rem 3.5rem;
    }
    .card.contact a.btn-blue {
        padding-bottom: 9px;
        padding-top: 7px;
    }   
    .box {
        padding: 3rem 0;
    }
    .box-blue .box-col + .box-col {
        border-left: solid 2px #fff;
    }
    .box label {
        font-size: 16px;
    }
    .box h3 {
        font-size: 70px;
        padding: 0 1.5rem;
    }
    .box h5 {
        font-size: 28px;
    }
    .box h4 {
        font-size: 38px;
    }
    .tabel-calc {
        margin: 0 2.1rem;
    }
    .tabel-calc td {
        padding: 20px;
        font-size: 20px;
    }
    .tabel-calc td:before {
        border: solid 3px #0F5C9E;
        border-radius: 15px;
        top: 9px;
        left: 10px;
        right: 10px;
        bottom: 9px;
    }
}
@media(max-width: 900px) {
    .banner-cta {
        padding-top: 44%;
        padding-bottom: 12%;
    }    
    .content-wrapper {
        padding: 0 1.25rem;
    }    
}
@media(min-width: 901px) {
    .banner-cta {
        background: url('../images/franchise/bg-cta.png') #E82835 left no-repeat;
        height: 300px;
    }
    .banner-cta .cta-body {
        width: 900px;
    }
}
@media(min-width: 1800px) {
    .main-content .content-wrapper {
        width: 1290px;
    }
}