// @import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700&display=swap');
// @import url('https://fonts.googleapis.com/css?family=Pacifico|Uncial+Antiqua|Zhi+Mang+Xing&display=swap');
@import url('https://fonts.googleapis.com/css?family=Barlow:400,600,700&display=swap');

@font-face {
    font-family: samarkan;
    src: url(../fonts/samarkan.ttf);
}

@import "owl.carousel.min.css";
@import "owl.theme.default.min.css";
/* Preloader */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-color: #fff;
    /* change if     the mask should have another color then white */
    z-index: 99999;
    /* makes sure it stays on top */
}

#status {
    width: 80px;
    height: 80px;

    border: 2px solid #f3f3f3;
    border-top: 3px solid #f25a41;
    border-radius: 100%;

    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;

    animation: spin 1s infinite linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

// parsley
input.parsley-success,
select.parsley-success,
textarea.parsley-success {
    color: #468847;
    background-color: #DFF0D8;
    border: 1px solid #D6E9C6;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
    color: #B94A48;
    background-color: #F2DEDE;
    border: 1px solid #EED3D7;
}

.parsley-errors-list {
    margin: 2px 0 3px;
    padding: 0;
    list-style-type: none;
    font-size: 0.9em;
    line-height: 0.9em;
    opacity: 0;
    color: #f90a0a;
    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
    opacity: 1;
}

// ----------------------------------------------------- //

body {
    font-family: 'Barlow', sans-serif;
    padding-top: 100px;
    background: #191b1b;
    padding-bottom: 35px;
}

p {
    margin: 0;
    font-size: 1.1rem;
}

button:focus {
    outline: none;
}

h1,
h2 {
    font-size: 3rem;
    font-family: 'samarkan', cursive;
    // font-family: 'Zhi Mang Xing', cursive;
    // font-family: 'Pacifico', cursive;
}

.btn {
    &-brown {
        background: #ce9852;
        border: 1px solid #ce9852;
        color: #fff;

        &:hover {
            color: #fff;
            background: #dd3434;
            border: 1px solid #dd3434;
        }
    }

    &-red {
        background: #dd3434;
        border: 1px solid #dd3434;
        color: #fff;

        &:hover {
            color: #fff;
            background: #ce9852;
            border: 1px solid #ce9852;
        }
    }

    &-green {
        background: #4fce5d;
        border: 1px solid #4fce5d;
        color: #fff;

        &:hover {
            color: #fff;
            background: #30883a;
            border: 1px solid #30883a;
        }
    }
}

// -----------------------------------------
.navbar {
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, .22);

    svg {
        width: 30px;
        height: 30px;
        text-align: center;
    }
}

.slogan {
    font-size: 1.3rem;
    text-transform: uppercase;
    color: #ddb934;

    &::after {
        background: #bcbcbc none repeat scroll 0 0;
        bottom: 0;
        content: "";
        height: 1px;
        left: 50%;
        margin-left: -183.5px;
        position: absolute;
        text-align: center;
        width: 160px;
        top: 45px;
    }

    &::before {
        background: #bcbcbc none repeat scroll 0 0;
        bottom: 0;
        content: "";
        height: 1px;
        right: 50%;
        margin-right: -190.5px;
        position: absolute;
        text-align: center;
        width: 160px;
        top: 45px;
    }

    span::after {
        background: rgba(0, 0, 0, 0) url(../img/icons/food.png) no-repeat scroll 0 0;
        content: "";
        height: 24px;
        left: 50%;
        margin-left: -8px;
        position: absolute;
        width: 24px;
        top: 35px;

    }
}

.topslogan {
    font-size: 1.3rem;
    text-transform: uppercase;
    color: #dd3434;
}

.toplogo {
    max-width: 215px;
}

.topnav {
    font-size: 1rem;
    text-transform: uppercase;
    font-weight: 600;
    font-family: 'Barlow', sans-serif;

    & li:hover {
        a.nav-link {
            color: #dd3434 !important;
        }

        svg {
            fill: #dd3434 !important;
        }
    }
}

li.active {

    a.nav-link {
        color: #dd3434 !important;
    }

    svg {
        fill: #dd3434 !important;
    }

}

.hero {

    .owl-nav {
        margin-top: -36px;
        float: right;
    }

    .owl-dots {
        display: none;
    }

    .owl-prev {
        i {
            font-size: 1rem;
            background: #f0f0f0;
            padding: 10px 15px;
            position: relative;

            &:hover {
                background: #dd3434;
                color: #fff;
            }
        }

    }

    .owl-next {
        i {
            font-size: 1rem;
            background: #e0e0e0;
            padding: 10px 15px;
            position: relative;

            &:hover {
                background: #dd3434;
                color: #fff;
            }
        }


    }
}

.intro {

    .leftbox {

        color: #fff;
        padding: 0rem 3rem;
    }

    p.customer {
        font-size: 1.3rem;
        font-weight: 600;
        color: #dd3434;
        margin-top: 1rem;
    }

    .owl-dots {
        display: none;
    }

    .owl-prev {
        i {
            font-size: 1.2rem;
            background: #3a3a3a;
            padding: 20px 25px;
            position: relative;

            &:hover {
                background: #dd3434;
                color: #fff;
            }
        }

    }

    .owl-next {
        i {
            font-size: 1.2rem;
            background: #737373;
            padding: 20px 25px;
            position: relative;

            &:hover {
                background: #dd3434;
                color: #fff;
            }
        }


    }
}


ul.menu-price li p span {
    float: right;
    color: #ce9852;
}

section.menu {
    position: relative;
    background: #191b1b;


    h4 {
        text-transform: uppercase;
        color: #ce9852;
        margin-bottom: 1rem;
    }

    p {
        font-weight: 600;
        font-size: 1rem;
        color: #fff;
    }

    p.ingredients {
        font-size: 14px;
        color: #9c9c9c;
        margin-bottom: 15px;
        margin-top: 10px;
    }

    li {
        padding-bottom: 30px;
    }

    &::before {
        content: "";
        background: url(../img/menu/bg-menu-home-left.png) no-repeat;
        position: absolute;
        top: 60%;
        transform: translateY(-50%);
        left: 0px;
        width: 291px;
        height: 770px;
        opacity: 0.1;
    }

    &::after {
        content: "";
        background: url(../img/menu/bg-menu-home-right.png) no-repeat;
        position: absolute;
        top: 60%;
        transform: translateY(-50%);
        right: 0px;
        width: 308px;
        height: 626px;
        opacity: 0.1;
    }
}

#main {
    z-index: 1;
    position: relative;
    background: #191b1b;
    margin-bottom: 182px;

    // iphone 6, 6s, 6,7,8plus bascially 5-5.5 inch phones
    @media only screen and (min-width: 320px) and (max-width: 479px) {
        margin-bottom: 464px;
    }
}


.footer {
    position: fixed;
    // z-index   : -2;
    bottom: 0;
    width: 100%;
    background: #fbfbfb;

    p.footnote {
        font-size: 0.9rem;

        a {
            color: #000;

            &:hover {
                text-decoration: none;
            }
        }
    }

    footer {
        z-index: -1;
        position: relative;
    }

    i.lefticon {
        float: left;
        background: #000;
        color: #fff;
        padding: 7px;
        border-radius: 50%;
        font-size: 0.9rem;
        margin-top: 3px;
        margin-right: 10px;
    }

    i.footicon {
        background: #000;
        color: #fff;
        padding: 7px;
        border-radius: 50%;
        font-size: 0.9rem;
    }
}

.menupage {
    .overlay {
        position: relative;

        &:hover {
            &:after {
                opacity: 0;
            }
        }
    }

    .overlay:after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.5;
        background-color: rgba(0, 0, 0, 0.1);

        &:hover {
            opacity: 0;
        }
    }

    a.headlink {

        &:hover {
            text-decoration: none;
        }
    }

    .bglink {
        padding: 3rem 5rem;
        background: url(https://placehold.it/600x150);
        background-position: center;
        background-size: cover;
        text-align: center;

        &-chakhna {
            background: url(../img/menu/page/chakhna.jpg);
        }

        &-vegstarter {
            background: url(../img/menu/page/vegstarter.jpg);
        }

        &-nonvegstarter {
            background: url(../img/menu/page/nonvegstarter.jpg);
        }

        &-vegmaincourse {
            background: url(../img/menu/page/vegmaincourse.jpg);
        }

        &-nonvegmaincourse {
            background: url(../img/menu/page/nonvegmaincourse.jpg);
        }

        &-rice {
            background: url(../img/menu/page/rice.jpg);
        }

        &-breads {
            background: url(../img/menu/page/breads.jpg);
        }

        &-beverages {
            background: url(../img/menu/page/beverages.jpg);
        }

        &-accompaniments {
            background: url(../img/menu/page/accompaniments.jpg);
        }

        &-desserts {
            background: url(../img/menu/page/desserts.jpg);
        }

        &-veganstarter {
            background: url(../img/menu/page/entree1.png);
        }

        &-veganmaincourse {
            background: url(../img/menu/page/curry1.png);
        }

        &-veganaccompaniments {
            background: url(../img/menu/page/accompany1.png);
        }

        &-indochinese {
            background: url(../img/menu/page/indochinese.png);
        }

        &-chaat {
            background: url(../img/menu/page/chaat.png);
        }

        span {
            background: rgba(0, 0, 0, 0.4);
            font-size: 1.3rem;
            color: #fff;
            text-transform: uppercase;
            padding: 0.6rem;
            border: 2px solid #ddb934;
        }
    }

    .menubox {
        background: #2f3535;

        h4 {
            font-weight: 700;
            color: #fccf6f;
            font-size: 2.5rem;
        }

        p {
            font-size: 1.7rem;
            font-weight: 600;
            text-transform: capitalize;
        }

        p.ingredients {
            font-size: 0.8rem;
            font-weight: 400;
            color: #f1f1f1
        }
    }

}

.contact {
    color: #fff;

    strong {
        color: #ddb934;
    }

    h3 {
        font-size: 24px;
        color: #ddb934;
        font-weight: 700;
    }

    h4 {
        font-size: 20px;
    }

    .fb {
        font-size: 28px;
    }

    p {
        font-size: 16px;
    }

    a {
        font-size: 20px;
        color: #fff;
        text-decoration: none;
    }

}

a.facebook {
    color: #000;
}

a.facebook:hover {
    color: #212121;
    text-decoration: none;
}

/*_______________________Gallery page CSS__________________________________*/
/* helpers/align.css */
.psi-gallery {
    // .align {
    //     -webkit-box-align: center;
    //     -ms-flex-align   : center;
    //     align-items      : center;
    //     display          : -webkit-box;
    //     display          : -ms-flexbox;
    //     display          : flex;
    //     -webkit-box-pack : center;
    //     -ms-flex-pack    : center;
    //     justify-content  : center;
    // }


    /* modules/figure.css */

    figure {
        margin: 0;
        box-shadow: 0 0px 25px 0px rgba(255, 255, 255, 0.2);
    }

    .masonry {
        margin: -3%;
        margin-top: 0;
        margin-bottom: 0;
    }

    .masonry__item {
        margin: 1.5%;
        width: 47%;
    }

    @media (min-width: 30em) {

        .masonry__item {
            width: 30.33333%;
        }
    }

    @media (min-width: 48em) {
        .masonry__item {
            width: 22%;
        }

    }
}