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

@font-face {
    font-family: 'Nunito Sans';
    src: url('../fonts/NunitoSans-Bold.eot');
    src: url('../fonts/NunitoSans-Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/NunitoSans-Bold.woff2') format('woff2'), url('../fonts/NunitoSans-Bold.woff') format('woff'), url('../fonts/NunitoSans-Bold.ttf') format('truetype'), url('../fonts/NunitoSans-Bold.svg#NunitoSans-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url('../fonts/NunitoSans-ExtraBold.woff2') format('woff2'), url('../fonts/NunitoSans-ExtraBold.woff') format('woff'), url('../fonts/NunitoSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito Sans';
    src: url('../fonts/NunitoSans-Black.eot');
    src: url('../fonts/NunitoSans-Black.eot?#iefix') format('embedded-opentype'), url('../fonts/NunitoSans-Black.woff2') format('woff2'), url('../fonts/NunitoSans-Black.woff') format('woff'), url('../fonts/NunitoSans-Black.ttf') format('truetype'), url('../fonts/NunitoSans-Black.svg#NunitoSans-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'LunchBox';
    src: url('../fonts/LunchBoxVN.eot');
    src: url('../fonts/LunchBoxVN.eot?#iefix') format('embedded-opentype'), url('../fonts/LunchBoxVN.woff2') format('woff2'), url('../fonts/LunchBoxVN.woff') format('woff'), url('../fonts/LunchBoxVN.ttf') format('truetype'), url('../fonts/LunchBoxVN.svg#LunchBox') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Losta Masta';
    src: url('../fonts/LostaMasta-Black.woff2') format('woff2'), url('../fonts/LostaMasta-Black.woff') format('woff'), url('../fonts/LostaMasta-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

html,
body {
    font-family: 'Nunito Sans';
    font-weight: 400;
}

.fs-but,
.fs-checkbox label,
.chose-language .fs-select-header span,
.fs-navigation li a,
.login-toggle .txt,
.nestle-sort .fs-select-header span,
.nestle-slugs span.slug-delAll,
.happening-date,
.date-post,
.summary p,
.detail-content table th,
.tags span:nth-child(1),
.relations .small-title,
.search-box input[type="text"],
.fs-form h3,
.relations li a:hover,
.fs-banner .company-info h2,
.fs-banner .company-info p strong,
.feedback-box p strong,
.fs-footer .small-title,
.is-cart a,
.sort-toggle span {
    font-family: 'Nunito Sans';
    font-weight: bold;
    font-style: normal;
}

.fs-title h2,
.fs-title h1,
.fs-title h3,
.fs-title .small-title,
.banner-box h2,
.banner-box .small-title,
.fs-title h2 span,
.brush-box span,
.enjoy-title span,
.enjoy-sort li span,
.distribution-main h2,
.results-item .small-title,
.feedback-option li h3,
.enjoy-sort .fs-select-header span,
.feedback-option .fs-select-header span,
.but-yellow {
    font-family: 'Nunito Sans';
    font-weight: 900;
    font-style: normal;
}

.join__txt p,
.title__brief p,
.happen-item h3,
.recipes-outer h3,
.enjoy-items h3,
.nestle-items h3,
.brands-items h3,
.footer-top p,
.nestle-slugs span,
.item-top p,
.item-top a,
.enjoy-search input[type="text"],
.nestle-search input[type="text"],
.detail-content p,
.detail-content table td,
.tags span,
.relations li a,
.shortcut-results li,
input[type='text'],
input[type='email'],
input[type='password'],
textarea,
.fs-error-txt p,
.extra-box p,
.extra-box p a,
.fs-banner .company-info p,
.feedback-box p,
.copyright p,
.footer-nav li a,
.fs-select-box li,
.mask-txt,
.password-rule p,
.password-rule li,
.register-rule .fs-checkbox label,
.enjoy-sort .fs-select-box li span {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 400;
}

.join__txt h2,
.banner-box p {
    font-family: 'Nunito Sans';
    font-weight: bold;
    font-style: normal;
}

.banner-box span {
    font-family: 'Nunito Sans';
    font-weight: 400;
    font-style: normal;
    display: block;
}

.banner-box .brush-box span {
    display: inline-block;
    font-size: 1.2rem;
    padding: 0.7rem 1.4rem;
}

.cate-title h2,
.color-grey h2,
.sub-brief h2 {
    font-family: 'LunchBox';
    font-weight: normal;
}


/*CALENDA*/

.ui-datepicker {
    width: auto;
    min-width: 270px;
    display: none;
    padding: 10px;
    box-shadow: 0 0px 8px rgba(3, 3, 3, 0.2);
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background: #fff;
    margin: 15px 0;
    z-index: 10 !important
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: 0;
    width: 100%;
    height: auto
}

.ui-datepicker-prev,
.ui-datepicker-next {
    position: absolute;
    top: 0;
    width: 40px;
    height: 30px;
    font-size: 0;
    cursor: pointer;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
    display: none;
}

.ui-datepicker-prev {
    left: 0;
    background: url(../images/chevron-left.png) no-repeat center center;
}

.ui-datepicker-next {
    right: 0;
    background: url(../images/chevron-right.png) no-repeat center center
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
    background-color: #f2f2f2;
}

.ui-datepicker-trigger {
    position: absolute;
    right: 2rem;
    top: 2rem;
    cursor: pointer;
}

thead tr {
    height: 30px
}

.ui-datepicker .ui-datepicker-title {
    margin: 0 0 10px 0;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    font-weight: bold;
}

.ui-datepicker table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 6px;
    table-layout: inherit;
    min-width: inherit
}

.ui-datepicker th {
    padding: 8px;
    font-size: 15px;
    background-color: transparent;
    color: #000
}

.ui-datepicker th span {
    font-weight: bold
}

.ui-datepicker td {
    padding: 1px;
    font-size: 14px
}

.ui-datepicker td span,
.ui-datepicker td a {
    display: block;
    padding: 3px;
    text-align: right;
    text-decoration: none;
}

.ui-state-disabled {
    opacity: 0.5
}

.ui-datepicker .ui-datepicker-buttonpane {
    text-align: right
}

.ui-datepicker .ui-datepicker-buttonpane button {
    float: right;
    margin: 0;
    cursor: pointer;
    padding: 5px 10px;
    width: auto;
    overflow: visible
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    float: none;
    display: inline-block;
    margin: 0 auto;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    color: #000;
    text-align: center;
    font-size: 16px
}

.ui-widget-header .ui-state-default a:hover {
    border: 0;
    background-color: #7fa92c;
    font-size: 15px;
    color: #fff;
    text-align: center
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
    color: #1c94c4
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus {
    color: #000
}

.ui-state-hover a,
.ui-state-hover a:hover {
    color: #323232
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
    color: #0093ff
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
    color: #0093ff
}

.ui-datepicker-cover {
    position: absolute;
    z-index: -1;
    top: -4px;
    left: -4px;
    width: 200px;
    height: 200px
}

.ui-datepicker-close {
    display: none
}

@media screen and (min-width:841px) {
    .fs-navigation li {
        -webkit-transition: background-color 0.3s ease-in-out;
        transition: background-color 0.3s ease-in-out;
    }
    .fs-navigation li.active,
    .fs-navigation li:not(.active):hover {
        background-color: #a2d063;
    }
    .is-IE .fs-navigation li.active,
    .is-IE .fs-navigation li:not(.active):hover {
        background-color: transparent;
    }
    .is-IE .fs-navigation li.active span,
    .is-IE .fs-navigation li:not(.active):hover span {
        color: #a2d063;
    }
    .fs-navigation li:not(.active):hover span {
        color: #fff;
    }
    .fs-checkbox label::after,
    .fs-but::after,
    .fs-footer a,
    .by-login a:hover::before,
    .by-login a:hover::after {
        -webkit-transition: opacity 0.3s ease-in-out;
        transition: opacity 0.3s ease-in-out;
    }
    .search-top {
        -webkit-transition: width 0.3s ease-in-out;
        transition: width 0.3s ease-in-out;
    }
    .fs-navigation li span,
    .feedback-option li h3 {
        -webkit-transition: color 0.3s ease-in-out;
        transition: color 0.3s ease-in-out;
    }
    .fs-navigation li.active span {
        color: #fff;
    }
    .nestle-sort-box {
        -webkit-transition: opacity 0.5s ease-in-out;
        transition: opacity 0.5s ease-in-out;
    }
    .online-box,
    .login-toggle,
    .search-toggle,
    .relations li a,
    .brands-items .fs-box,
    .fs-select-header,
    .fs-select-box li {
        -webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }
    .recipes-box .item-slide {
        -webkit-transition: all 0.8s ease-in-out;
        transition: all 0.8s ease-in-out;
    }
    .fs-select-box {
        -webkit-transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s;
        transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s;
    }
    .fs-but:hover::after {
        opacity: 1;
    }
    .fs-footer a:hover {
        opacity: 0.5;
    }
    .brands-items .fs-box:hover {
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0px 9px 30px rgba(86, 86, 86, 0.15);
    }
    .by-login a:hover::before {
        opacity: 0;
    }
    .by-login a:hover::after {
        opacity: 1;
    }
    .short-all,
    .short-sub img,
    .short-sub::before,
    .short-sub::after {
        -webkit-transition: opacity 0.3s ease-in-out;
        transition: opacity 0.3s ease-in-out;
    }
    .short-all:hover {
        opacity: 0.5;
    }
    .short-sub:hover img:not(.short-sub__active),
    .short-sub:hover::before {
        opacity: 0;
    }
    .short-sub:hover img.short-sub__active,
    .short-sub:hover::after {
        opacity: 1;
    }
    .but-yellow::after {
        -webkit-transition: transform 0.3s ease-in-out;
        transition: transform 0.3s ease-in-out;
    }
    .but-yellow:hover::after {
        -webkit-transform: none;
        transform: none;
    }
    .short__txt {
        -webkit-transition: color 0.3s ease-in-out;
        transition: color 0.3s ease-in-out;
    }
    .short-gradient-dark-blue:hover .short__txt,
    .short-gradient-light-blue:hover .short__txt,
    .short-gradient-green:hover .short__txt,
    .short-gradient-yellow:hover .short__txt {
        color: #fff;
    }
}

@media screen and (max-width:840px) {
    .fs-navigation .nav-inr li.active a span {
        color: #d96f63;
    }
    .ui-datepicker-trigger {
        top: 4.5vw;
        right: 4vw;
        width: 4vw;
    }
}