/* ============================================================
   BEGIN ENTERPRISE
   CSS LOGO COMPONENT
   Target : Original BEGIN Enterprise Logo
   ============================================================ */


/* ============================================================
   MAIN LOGO
   ============================================================ */

.begin-logo {
    position: relative;

    width: 205px;
    height: 92px;

    display: block;

    text-decoration: none;

    user-select: none;

    overflow: visible;
}


/* ============================================================
   BEGIN
   ============================================================ */

.begin-logo-word {
    position: absolute;

    left: 0;
    top: 29px;

    display: block;

    width: 190px;

    color: #2073BF;

    /*
       ใช้ Arial Black / Arial Bold เป็นฐาน
       แล้วบีบ-ขยายด้วย transform ให้ใกล้ Logo เดิม
    */
    font-family:
        "Arial Black",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 37px;

    font-weight: 900;

    line-height: 1;

    letter-spacing: 1px;

    white-space: nowrap;

    transform:
        scaleX(1.08);

    transform-origin:
        left center;
}


.begin-logo-b {
    color: #2073BF;
}


/* ============================================================
   ENTERPRISE
   ============================================================ */

.begin-logo-enterprise {
    position: absolute;

    left: 21px;
    top: 66px;

    display: block;

    color: #9ACA02;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 15px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: 4px;

    white-space: nowrap;
}


/* ============================================================
   LEAF AREA
   ============================================================ */

.begin-logo-leaf {
    position: absolute;

    left: 114px;
    top: 4px;

    width: 50px;
    height: 35px;

    pointer-events: none;
}


/* ============================================================
   COMMON LEAF
   ============================================================ */

.begin-logo-leaf .leaf {
    position: absolute;

    display: block;

    background: #9ACA02;

    box-shadow:
        inset 0 -1px 1px
        rgba(70, 100, 0, .12);

    transform-origin: center center;
}


/* ============================================================
   SMALL LEFT LEAF
   ============================================================ */

.begin-logo-leaf .leaf-left {
    left: 1px;
    top: 15px;

    width: 19px;
    height: 10px;

    border-radius:
        100% 0
        100% 0;

    transform:
        rotate(24deg)
        skewX(-8deg);
}


/* ============================================================
   LARGE RIGHT LEAF
   ============================================================ */

.begin-logo-leaf .leaf-right {
    left: 18px;
    top: 1px;

    width: 28px;
    height: 15px;

    border-radius:
        0 100%
        0 100%;

    transform:
        rotate(-27deg)
        skewX(-8deg);
}


/* ============================================================
   LEAF STEM
   ============================================================ */

.begin-logo-leaf::after {
    content: "";

    position: absolute;

    left: 20px;
    top: 15px;

    width: 2px;
    height: 12px;

    border-radius: 2px;

    background: #9ACA02;

    transform:
        rotate(23deg);

    transform-origin:
        top center;
}


/* ============================================================
   REMOVE DEFAULT HERO SCALE EFFECT
   ============================================================ */

.hero-logo {
    width: 205px;
    height: 92px;

    margin:
        0 auto;
}


/* ============================================================
   HEADER LOGO
   ============================================================ */

.site-logo {
    display: flex;

    align-items: center;

    min-width: 205px;
}


/* ============================================================
   SMALL VERSION
   ============================================================ */

.begin-logo.logo-small {
    width: 165px;
    height: 72px;

    transform:
        scale(.82);

    transform-origin:
        left center;
}


/* ============================================================
   HOVER
   ============================================================ */

a.begin-logo {
    transition:
        opacity .20s ease;
}


a.begin-logo:hover {
    opacity: .92;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

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

    .begin-logo {
        width: 170px;
        height: 76px;

        transform:
            scale(.83);

        transform-origin:
            left center;
    }


    .site-logo {
        min-width: 170px;
    }

}


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

    .begin-logo {
        width: 155px;

        transform:
            scale(.76);

        transform-origin:
            left center;
    }


    .site-logo {
        min-width: 155px;
    }

}