@font-face {
    font-family: 'iCiel-SamsungSharpSans';
    src: url('../fonts/iCiel-SamsungSharpSans-Regular.eot');
    src: url('../fonts/iCiel-SamsungSharpSans-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/iCiel-SamsungSharpSans-Regular.woff') format('woff'),
    url('../fonts/iCiel-SamsungSharpSans-Regular.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Knewave-Regular';
    src: url('../fonts/Knewave-Regular.eot');
    src: url('../fonts/Knewave-Regular.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Knewave-Regular.woff') format('woff'),
    url('../fonts/Knewave-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'iCiel-SamsungSharpSans';
    src: url('../fonts/iCiel-SamsungSharpSans-Medium.eot');
    src: url('../fonts/iCiel-SamsungSharpSans-Medium.eot?#iefix') format('embedded-opentype'),
    url('../fonts/iCiel-SamsungSharpSans-Medium.woff') format('woff'),
    url('../fonts/iCiel-SamsungSharpSans-Medium.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'iCiel-SamsungSharpSans';
    src: url('../fonts/iCiel-SamsungSharpSans-Bold.eot');
    src: url('../fonts/iCiel-SamsungSharpSans-Bold.eot?#iefix') format('embedded-opentype'),
    url('../fonts/iCiel-SamsungSharpSans-Bold.woff') format('woff'),
    url('../fonts/iCiel-SamsungSharpSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Arial-Black';
    src: url('../fonts/Arial-Black.eot');
    src: url('../fonts/Arial-Black.eot?#iefix') format('embedded-opentype'),
    url('../fonts/Arial-Black.woff') format('woff'),
    url('../fonts/Arial-Black.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@media (min-width: 1200px) {
    .container, .container-lg,
    .container-md, .container-sm, .container-xl {
        max-width: 1280px;
    }
}

html {
    overflow-x: hidden;
}

body {
    background: #eeeded;
    overflow-x: hidden;
}

.errordiv {
    padding: 10px 12px;
    *margin-left: .3em;
    line-height: 20px;
    color: #fff;
    text-align: left;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle;
    background-color: #c91111;
    width: auto;
    min-width: 80px;
    min-height: 24px;
    display: none;
    position: absolute;
    z-index: 9999;
    top: 40px;
    border-radius: 5px;
}

.errordiv:after {
    position: absolute;
    top: -6px;
    left: 13px;
    display: inline-block;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #c91111;
    border-left: 10px solid transparent;
    content: '';
}

#marq {
    width: 100%;
    border: inset;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: unset;
    border: 0;
    box-shadow: unset;
    border-color: currentcolor;
    vertical-align: middle;
}
@keyframes marquesina {
    0% {
        transform: translate(0);
    }
    to {
        transform: translate(-50%);
    }
}

#orig {
    display: inline-block;
    float: left;
    overflow: hidden;
    transform: translate(0);
}

#orig.active {
    animation: marquesina var(--animation-duration, 45s) infinite normal linear 1s;
}

#top-line {
    background: #e3b646;
}

#top-line span {
    display: block;
    font-family: 'Arial-Black', sans-serif;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    padding: 7px 0;
}

.ss-announcement-bar__message {
    text-align: center;
    padding: 0;
    margin: 0;
}

.ss-announcement-bar__message li {
    display: inline-block;
    padding-right: 114px;
    position: relative;
}

#main-menu {
    float: left;
    padding: 15px 0;
    min-width: 360px;
}

#main-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#main-menu ul li {
    padding: 0;
    margin: 0;
    display: inline-block;
    position: relative;
    border-radius: 12px;
}

#main-menu ul li a {
    font-family: 'Arial-Black', sans-serif;
    font-weight: bold;
    font-size: 11px;
    display: block;
    border-radius: 12px;
    text-decoration: none;
    text-transform: uppercase;
    color: #000;
    padding: 3px 10px;
}

#main-menu ul li.active a,
#main-menu ul li:hover:not(.home-menu) a {
    background: #000;
    color: #fff;
}

#main-menu .home-menu {
    margin-left: 20px;
}

#main-menu .home-menu a {
    color: #c64e30;
    font-size: 27px;
}

#main-menu .home-menu:hover a {
    color: #000;
}

#main-menu .catalogue-menu {
    background: #c64e30;
    border-radius: 12px;
    margin-left: 20px;
    top: -9px;
}

#main-menu .catalogue-menu a {
    color: #000;
    border-radius: 12px;
    padding: 3px 10px;
}

#main-menu .catalogue-menu:hover {
    background: #000;
}

#main-menu .catalogue-menu:hover a {
    color: #fff;
}

#main-menu .about-us {
    top: -9px;
}

#about-us {
    background: #e3dcda;
    padding: 15px;
    border-radius: 10px;
    position: absolute;
    top: 40px;
    left: 0;
    width: 360px;
    z-index: 1111;
    display: none;
}

#about-us.active {
    display: block;
}

#about-us .caption {
    font-family: 'Knewave-Regular', sans-serif;
    font-weight: bold;
    font-size: 40px;
    color: #9b4e0a;
    text-align: center;
}

#about-us p {
    line-height: 1.5em;
    font-family: 'iCiel-SamsungSharpSans', sans-serif;
    font-size: 13px;
}

#about-us .footer {
    text-align: right;
    margin-top: 15px;
    font-family: 'iCiel-SamsungSharpSans', sans-serif;
    font-size: 13px;
    font-weight: 700;
}

#phintastic-world {
    display: inline-block;
    text-transform: uppercase;
    font-size: 10px;
    background: #000;
    padding: 5px 11px;
    color: #656464;
    margin-left: 21px;
    margin-top: 28px;
    margin-bottom: 30px;
    line-height: 1.0em;
}

#phintastic-world .caption {
    font-family: 'Arial-Black', sans-serif;
    font-weight: bold;
    font-size: 40px;
    color: #fff;
    line-height: 1.1em;
}

#col-center {
    float: left;
    width: calc(100% - 720px);
}

#social-contact {
    padding: 15px 15px;
    margin: auto;
    position: relative;
    z-index: 111;
}

#social-contact .caption {
    font-family: 'Arial-Black', sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 15px;
}

#social-contact .social-items {
    max-width: 320px;
    margin: 0 auto;
}

#social-contact a,
#will-phind a {
    text-decoration: none;
    color: #000;
    display: block;
}

#social-contact a div,
#will-phind a div {
    text-align: center;
    margin: auto;
    margin-bottom: 5px;
    align-content: center;
}

#social-contact a div img,
#will-phind a div img {
    -webkit-transition: all 250ms linear;
    -moz-transition: all 250ms linear;
    -ms-transition: all 250ms linear;
    -o-transition: all 250ms linear;
    transition: all 250ms linear;
    transform: scale(1);
}

#social-contact a:hover div img,
#will-phind a:hover div img {
    transform: scale(1.2);
}

#social-contact a p,
#will-phind a p {
    margin: 0;
    margin-top: 8px;
    font-size: 11px;
    text-transform: uppercase;
    font-family: 'iCiel-SamsungSharpSans', sans-serif;
    font-weight: 700;
}

#col-right {
    min-width: 360px;
    float: left;
}

#welcome,
#welcome-top {
    background: #000000;
    color: #fff;
    font-size: 18px;
    text-transform: uppercase;
    padding: 10px 25px;
    margin-top: 15px;
}

#welcome-top {
    margin-top: 0;
    margin-bottom: 10px;
}

#welcome > div:not(.vn-flag),
#welcome-top > div:not(.vn-flag) {
    padding: 0 21px;
    padding-top: 8px;
    line-height: 1.5em;
}

#welcome .caption,
#welcome-top .caption {
    font-family: 'Arial-Black', sans-serif;
    font-size: 34px;
    font-weight: bold;
    text-align: left;
    color: #c64e30;
}

#welcome p,
#welcome-top p {
    color: #656464;
    font-size: 16px;
    font-family: 'iCiel-SamsungSharpSans', sans-serif;
    text-align: left;
    margin: 0;
    padding: 0;
}

#welcome .vn-flag,
#welcome-top .vn-flag {
    padding-top: 8px;
}

#b2b {
    font-family: 'Arial-Black', sans-serif;
    background: #c64e30;
    padding: 10px;
    position: relative;
    margin-bottom: 30px;
    margin-left: 43px;
    width: 250px;
}

#b2b .arrow-1 {
    position: absolute;
    right: 15px;
    top: 15px;
}

#b2b div {
    font-size: 40px;
    font-weight: bold;
    text-align: left;
    text-transform: uppercase;
    line-height: 1.0em;
}

#b2b p {
    font-size: 9px;
    font-weight: bold;
    color: #fff;
    margin: 0;
    margin-left: 8px;
    margin-bottom: 10px;
    line-height: 1.0em;
    text-transform: uppercase;
    margin-top: 9px;
}

#b2b .leaf {
    width: 100%;
    position: absolute;
    max-width: 215px;
    right: -30px;
    bottom: -25px;
}

#global-business {
    position: relative;
    background: url(../images/shape1.png) no-repeat center center;
    background-size: 100%;
}

#global-business .caption {
    font-family: 'Arial-Black', sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 10px;
}

#global-business p {
    font-family: 'iCiel-SamsungSharpSans', sans-serif;
    text-align: center;
    margin: 0;
    font-size: 14px;
}

#global-business p span {
    font-weight: bold;
}

#global-business .coffee-bean-1 {
    position: absolute;
    right: -50px;
    top: 50px;
    width: 140px;
}

#global-business .coffee-bean-1 img {
    width: 100%;
}

#frmContact {
    max-width: 480px;
    margin: 15px auto;
}

#frmContact .form-control {
    font-family: 'iCiel-SamsungSharpSans', sans-serif;
    font-weight: 400;
    background: #000;
    color: #656464;
    font-size: 12px;
}

#frmContact button {
    background: url(../images/btn-submit.png) no-repeat center center;
    border: 0;
    color: #00000000;
}

#frmContact .form-control::placeholder {
    color: #656464;
}

#frmContact .form-control::-ms-input-placeholder { /* Edge 12 -18 */
    color: #656464;
}

#will-phind {
    padding: 0 50px;
}

#will-phind .caption {
    font-family: 'Arial-Black', sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 15px;
}

#will-phind .caption span {
    color: #c64e30;
}

#will-phind .text {
    margin: 0;
    color: #656464;
    font-size: 60px;
    text-transform: uppercase;
    padding-top: 74px;
    padding-left: 55px;
    line-height: 1.05em;
    font-family: 'iCiel-SamsungSharpSans', sans-serif;
    font-weight: 300;
}

#will-phind .text span {
    color: #d3c7b3;
}

#logo {
    max-width: 180px;
    margin: 30px auto;
    margin-top: 45px;
}

#logo img {
    width: 100%;
}

#person-alized {
    font-family: 'Arial-Black', sans-serif;
    background: #fff;
    padding: 0 15px;
    display: inline-block;
    position: relative;
    margin-left: 19px;
}

#person-alized div {
    font-size: 40px;
    font-weight: bold;
    text-align: left;
    text-transform: uppercase;
    line-height: 1.0em;
}

#person-alized .arrow-1 {
    position: absolute;
    right: 15px;
    top: 6px;
}

#person-alized p {
    font-size: 10px;
    font-weight: bold;
    color: #656464;
    margin: 0;
    margin-bottom: 10px;
    margin-left: 20px;
    text-transform: uppercase;
}

#person-alized .coffee-bean {
    width: 100%;
    position: absolute;
    max-width: 89px;
    right: 0px;
    bottom: 0;
    top: -38px;
    margin: auto;
}

#how-it-works {

}

#how-it-works .caption {
    font-family: 'Arial-Black', sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 15px;
}

#how-it-works .how-it-works {
    width: 80%;
    margin: auto;
}

#how-it-works span {
    display: block;
    font-family: 'Arial-Black', sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    margin: 10px 0;
    margin-bottom: 0;
}

#how-it-works img {
    width: 100%;
}

#footer {
    background: #e3b646;
    position: relative;
}

#footer #maps-1 {
    padding: 15px 0;
    text-align: right;
    background: url(../images/maps.png) no-repeat center center;
    background-size: 100%;
    height: 100%;
    background-position-y: 15px;
}

#footer #maps-2 {
    padding: 15px 0;
    text-align: right;
    background: url(../images/maps.png) no-repeat center center;
    background-size: 100%;
    height: 100%;
    background-position-y: -33px;
}

#footer .copyright {
    max-width: 240px;
    margin: auto;
    text-transform: uppercase;
    line-height: 1.2em;
}

#footer .copyright div {
    font-family: 'Arial-Black', sans-serif;
    font-size: 14px;
    font-weight: bold;
}

#footer .copyright span {
    color: #fff;
    font-size: 12px;
}

#footer .vietnamese-coffee {
    font-family: 'Arial-Black', sans-serif;
    font-size: 28px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    position: absolute;
    color: #0000000f;
    padding: 12px 0;
    margin: auto;
    left: 0;
    right: 0;
    line-height: 1.2em;
    width: 320px;
}

#footer .thank-you {
    font-family: 'Arial-Black', sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    padding-top: 24px;
    line-height: 1.2em;
}

#footer .join-us {
    position: absolute;
    bottom: 5px;
}

#business-email {
    text-align: left;
}

#business-email .caption {
    font-family: 'Arial-Black', sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    padding-left: 25px;
}

#frmSub {
    background: #fff;
    padding: 5px;
    border-radius: 24px;
    border: 1px solid #000;
    position: relative;
    height: 45px;
    width: 95%;
}

#frmSub input {
    font-size: 12px;
    font-family: 'iCiel-SamsungSharpSans', sans-serif;
    font-weight: 400;
    border: 0;
    width: 100%;
    padding: 9px;
    outline: none;
    border-radius: 12px;
}

#frmSub a {
    position: absolute;
    right: 0;
    width: 75px;
    background: #000;
    border-radius: 25px;
    padding: 7px 20px;
    top: 0;
}

#frmSub a img {
    width: 100%;
}

#frmSub .layer-14 {
    position: absolute;
    top: -65px;
    right: -15px;
    width: 80px;
}

#frmSub .layer-14 img {
    width: 100%;
}

#popup-banner {
    max-width: 800px;
    margin: auto;
    max-height: 600px;
    vertical-align: middle;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    z-index: 1111;
}

#popup-banner.show {
    display: block;
}

#popup-banner:before {
    content: '';
    display: block;
    position: fixed;
    background: #000;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1111;
    opacity: .5;
}

.close-window {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 25px;
    height: 25px;
    cursor: pointer;
    z-index: 8040;
    color: #fff;
    text-align: center;
    line-height: 25px;
    border-radius: 50%;
}

.center-block {
    display: block;
    margin-right: auto;
    margin-left: auto;
}

.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
    display: block;
    max-width: 100%;
    height: auto;
}

.section-service,
.let-explore {
    margin: 30px 0;
    background: url(../images/bg-coffee-bean.png) no-repeat center right;
    background-size: auto 100%;
}

.section-service .caption,
.let-explore .caption {
    font-family: 'Arial-Black', sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    background: #c64e30;
    color: #fff;
    padding: 5px 15px;
    border-radius: 5px;
    display: inline-block;
    margin-bottom: 15px;
}

.section-service .bg-phin {
    width: 100%;
    height: auto;
}

.section-service .phin-1,
.section-service .phin-2,
.section-service .phin-3 {
    position: absolute;
    left: 0;
    right: 0;
    margin: 30px auto;
    -webkit-transition: all 250ms linear;
    -moz-transition: all 250ms linear;
    -ms-transition: all 250ms linear;
    -o-transition: all 250ms linear;
    transition: all 250ms linear;
    transform: scale(1);
    width: auto !important;
}

.section-service .phin:hover .phin-1,
.section-service .phin:hover .phin-2,
.section-service .phin:hover .phin-3 {
    transform: scale(1.1);
}

.section-service .btn-phin-1,
.section-service .btn-phin-2,
.section-service .btn-phin-3 {
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid #000;
    border-radius: 24px;
    padding: 10px 20px;
    display: inline-block;
    text-decoration: none;
    margin-top: 10px;
}

.section-service .btn-phin-1 {
    background: #83a6b2;
}

.section-service .btn-phin-2 {
    background: #c1a152;
}

.section-service .btn-phin-3 {
    background: #253751;
}

.phin-div {
    background: #e4e7e8;
    padding: 45px 20px;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: initial;
    right: 0;
    z-index: 1111;
    bottom: 0;
    display: none;
    width: 100%;
}

.phin-div.active {
    display: block;
}

.phin-div .phin-caption {
    font-family: 'Knewave-Regular', sans-serif;
    font-weight: bold;
    font-size: 38px;
    color: #9b4e0a;
    line-height: 1.1em;
    text-align: center;
    margin-bottom: 15px;
}

.phin-div ul {
    text-align: left;
}

.phin-div ul li {
    font-family: 'iCiel-SamsungSharpSans', sans-serif;
    margin: 10px 0;
    font-size: 14px;
}

.phin-div .footer {
    margin: 0 15px;
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
}

.phin-div .footer a {
    font-family: 'iCiel-SamsungSharpSans', sans-serif;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    color: #000;
    border: 2px solid #000;
    border-radius: 24px;
    padding: 10px 20px;
    display: inline-block;
    text-decoration: none;
    float: left;
}

.phin-div .footer div {
    font-family: 'iCiel-SamsungSharpSans', sans-serif;
    font-weight: bold;
    text-align: right;
}

@media (max-width: 480px) {
    #main-menu,
    #col-center,
    #col-right {
        float: none;
    }

    #welcome {
        display: none !important;
    }

    #welcome,
    #welcome-top {
        padding: 10px 15px;
    }

    #welcome > div:not(.vn-flag),
    #welcome-top > div:not(.vn-flag) {
        padding: 0 15px;
    }

    #main-menu .home-menu,
    #main-menu .catalogue-menu {
        margin-left: 0;
    }

    #col-center {
        width: 100%;
    }

    #phintastic-world {
        margin-top: 10px;
    }

    #phintastic-world .caption {
        font-size: 36px;
    }

    #social-contact {
        width: 100%;
    }

    #social-contact .caption {
        font-size: 14px;
    }

    #social-contact .social-items {
        max-width: 250px;
    }

    #frmContact {
        margin: 15px 15px;
    }

    #will-phind {
        margin: 40px 0;
    }

    #will-phind .social-items {
        max-width: 260px;
    }

    #will-phind p {
        text-align: center;
        font-size: 40px;
    }

    #will-phind .text {
        padding-top: 0;
        padding-left: 0;
    }

    .section-service,
    .let-explore {
        margin: 30px 15px;
    }

    #logo {
        margin-top: 0;
    }

    #business-email {
        padding-bottom: 0;
    }

    #how-it-works span {
        font-size: 8px;
    }

    #item-phin,
    #item-explore {
        display: none;
    }

    #footer .join-us {
        position: static;
        padding: 10px 0;
    }

    #footer .copyright {
        max-width: none;
        text-align: center;
    }
}

@media (max-width: 400px) {
    .phin-div {
        padding: 15px 10px;
    }

    .phin-div .phin-caption {
        font-size: 28px;
    }

    .phin-div ul li {
        margin: 2px 0;
    }
}