.body-karlito .header-wrapper {
    background: transparent !important;
}

.body-karlito .icon-down-open:before,
.icon-menu:before {
    color: #fff;
}

.karlito .area {
    position: relative;
    width: 100%;
    background-color: #FAF8F6;
}

.karlito .area-1 img,
.karlito .area-2 img,
.karlito .area-5 img {
    width: 100%;
    height: auto;
}

.karlito .area-3 {
    height: calc(100vw * 0.45);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.karlito .area-3 .image {
    width: 12%;
}

.karlito .area-3 .image img {
    width: 100%;
    height: auto;
}

.karlito .area-3 .text p {
    max-width: 600px;
    margin: 0 auto;
}

.karlito .area-3 .text h1 {
    text-transform: uppercase;
    color: #1D1D1B;
    margin: 1rem 0 0.25rem;
}

.karlito .area-3 .text p {
    color: #1D1D1B;
}

.karlito .area-4 {
    display: flex;
}

.karlito .area .area-left,
.karlito .area .area-right {
    width: 50%;
    background-color: #fff;
}

.karlito .area .area-left img {
    width: 100%;
    height: auto;
}

.karlito .area .area-right .content {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.karlito .area .area-right .content p {
    font-family: "Geovano Sans", "HelveticaNeue-CondensedBold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #1D1D1B;
    margin: 0;
}

.karlito .area .area-right .content p.address {
    padding: 0 0 20px;
}

.karlito .area .area-right .content p.mob {
    font-family: "Geovano Sans", "HelveticaNeue-CondensedBold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    margin: 20px 0;
}

.karlito .area .area-right .content p.schedule {
    font-family: "Geovano Sans", "HelveticaNeue-CondensedBold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
    margin: 0 0 20px 0;
}

.karlito .area-2 button.action,
.karlito .area-5 button.action,
.karlito .area-2 a.resa.action {
    font-family: "Geovano Sans", "HelveticaNeue-CondensedBold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 190px;
    height: 75px;
    color: #1D1D1B;
    background-color: #FAF8F6;
    border: 2px solid #1D1D1B;
    border-radius: 50px;
    font-weight: 400;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    -webkit-transition: color .1s ease-out, background-color .1s ease-out;
    -moz-transition: color .1s ease-out, background-color .1s ease-out;
    -o-transition: color .1s ease-out, background-color .1s ease-out;
    transition: color .1s ease-out, background-color .1s ease-out;
}

.karlito .area-2 a.resa.action {
    padding-top: 12px;
}

.karlito .area-2 button.action:hover,
.karlito .area-5 button.action:hover,
.karlito .area-2 a.resa.action:hover {
    background-color: #1D1D1B;
    color: #FAF8F6;
}

.body-karlito .fixed-btn-wrapper .fixed-btn__button {
    font-family: "Geovano Sans", "HelveticaNeue-CondensedBold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-image: none;
    background-color: #fff;
    color: #F73124;
    border: 2px solid #F73124;
    border-radius: 50%;
    -webkit-transition: color .1s ease-out, background-color .1s ease-out;
    -moz-transition: color .1s ease-out, background-color .1s ease-out;
    -o-transition: color .1s ease-out, background-color .1s ease-out;
    transition: color .1s ease-out, background-color .1s ease-out;
}

.body-karlito .fixed-btn-wrapper .fixed-btn__button:hover {
    background-color: #F73124;
    color: #FFF;
}

@media only screen and (max-width: 1199px) {
    .karlito .area-3 .text {
        margin: 3% auto 0;
    }
}

@media only screen and (max-width: 979px) {

    .body-karlito .main-container {
        padding-top: 0;
    }

    .body-karlito .logo-wrapper {
        display: none;
    }

    .karlito .area-3 {
        height: calc(100vw * 0.6);
    }

    .karlito .area-3 .text {
        width: 62%;
        margin: 0 auto;
    }

    .karlito .area-3 .text h1 {
        margin: 10px 0 15px;
    }

}

@media only screen and (max-width: 639px) {

    .karlito .area-3,
    .karlito .area .area-right {
        height: 640px;
    }

    .karlito .area-3 .image {
        width: 25%;
    }

    .karlito .area-3 .text {
        width: 80%;
        margin: 1% auto 0;
    }

    .karlito .area-4 {
        display: block;
    }

    .karlito .area .area-left,
    .karlito .area .area-right {
        width: 100%;
        float: none;
    }

}

@media only screen and (min-width: 1700px) {
    .karlito .area-3 {
        height: calc(100vw * 0.45);
        max-height: 842px;
    }
}