/* Color Theme Swatches in Hex */
/*.peaceful-sleep-1-hex { color: #A6A377; }
.peaceful-sleep-2-hex { color: #F2F1E9; }
.peaceful-sleep-3-hex { color: #F2DDB6; }
.peaceful-sleep-4-hex { color: #735939; }
.peaceful-sleep-5-hex { color: #403226; }

.peaceful-sleep-1-rgba { color: rgba(165, 163, 119, 1); }
.peaceful-sleep-2-rgba { color: rgba(242, 240, 232, 1); }
.peaceful-sleep-3-rgba { color: rgba(242, 221, 181, 1); }
.peaceful-sleep-4-rgba { color: rgba(114, 89, 56, 1); }
.peaceful-sleep-5-rgba { color: rgba(63, 49, 38, 1); }

.peaceful-sleep-1-hsla { color: hsla(56, 20, 55, 1); }
.peaceful-sleep-2-hsla { color: hsla(53, 25, 93, 1); }
.peaceful-sleep-3-hsla { color: hsla(39, 69, 83, 1); }
.peaceful-sleep-4-hsla { color: hsla(33, 33, 33, 1); }
.peaceful-sleep-5-hsla { color: hsla(27, 25, 20, 1); }*/


@font-face{font-family:icomoon;src:url(../fonts/icomoon.eot?-savg90);src:url(../fonts/icomoon.eot?#iefix-savg90) format('embedded-opentype'),url(../fonts/icomoon.woff?-savg90) format('woff'),url(../fonts/icomoon.ttf?-savg90) format('truetype'),url(../fonts/icomoon.svg?-savg90#icomoon) format('svg');font-weight:400;font-style:normal}[class*=" icon-"],[class^=icon-]{font-family:icomoon;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-fccart:before{content:"\e60a"}.icon-fruitclubdelivery:before{content:"\e608"}.icon-zingvn:before{content:"\e605"}.icon-infogTV:before{content:"\e601"}.icon-foody-01:before{content:"\e602"}.icon-vnex-01:before{content:"\e603"}.icon-thumbs-up:before{content:"\e604"}.icon-facebook:before,.icon-fbcomment_user:before,.icon-fbcomment_reply:before{content:"\e606"}.icon-home:before{content:"\e618"}.icon-office:before{content:"\e619"}.icon-image:before{content:"\e90d"}.icon-video-camera:before{content:"\e914"}.icon-price-tag:before{content:"\e935"}.icon-phone:before{content:"\e620"}.icon-location:before{content:"\e61b"}.icon-bubbles4:before{content:"\e621"}.icon-user:before{content:"\e623"}.icon-spinner8:before{content:"\e981"}.icon-gift:before{content:"\e61e"}.icon-truck:before,.icon-today:before{content:"\e9b0"}.icon-shield:before{content:"\e9b4"}.icon-scheduled:before,.icon-clipboard:before{content:"\e9b8"}.icon-link:before{content:"\e9cb"}.icon-star-empty:before{content:"\e626"}.icon-star-half:before{content:"\e625"}.icon-star-full:before{content:"\e624"}.icon-heart:before{content:"\e9da"}.icon-heart-broken:before{content:"\e9db"}.icon-info:before{content:"\ea0c"} .icon-cancel:before, .icon-failed:before{content:"\ea0d"} .icon-done:before,.icon-checkmark:before, .icon-sent:before, .icon-received:before {content:"\e622"}.icon-exit:before{content:"\ea14"}.icon-mail:before{content:"\ea86"}.icon-googleplus.linkto:before{content:"\ea8a"}.icon-facebook2:before{content:"\e627"}.icon-twitter.linkto:before{content:"\ea93"}.icon-paypal:before{content:"\e628"}.icon-pen:before{content:"\e609"}.icon-like:before{content:"\e607"}.icon-profile-female:before{content: "\e60c";}.icon-profile-male:before{content: "\e60b";}.icon-spinner8:before {content: "\e981";}.icon-spinner11:before {content: "\e984";}.icon-loop2:before, .icon-pending2:before {content: "\ea2e";} .icon-paperplane:before {content: "\e60d";}.icon-blocked:before {content: "\ea0e";}.icon-pending:before {content: "\e979";}.icon-pen:before {content: "\e609";}.icon-flag:before {content: "\e9cc";}.icon-clock:before {content: "\e94e";}.icon-quote:before {content: "\e977";}.icon-stats-bars:before {content: "\e99c";}.icon-bullhorn:before {content: "\e91a";}.icon-map2:before {content: "\e94c";}.icon-shop:before {content: "\e610";}
.icon-trophy:before {
    content: "\e99e";
}
.top-right{position:absolute;top:1px;right:1px;font-size:18px;color:rgba(255,255,255,.9)}.mainnav .icon-fruitclubdelivery{margin-top:5px;float:right}a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

p.light, .light p, i.light, .light i {color: rgba(0,0,0,0.6);}
.light a:active, a.light:active, i.light:hover, .light i:hover, .light a:hover {color: rgba(0,0,0,0.6);}
p.black, .black p, .black a, a.black, span.black, .light span, i.black, .black i {color: rgba(255,255,255,0.8);}
.black a:active, a.black:active, .black a:hover, a.black:hover, i.black:hover, .black i:hover {color: rgba(255,255,255,1);}
h3.light, .light h3, h1.light, .light h1,h2.light, .light h2, h4.light, .light h4, span.light, .light span {color: rgba(0,0,0,0.8);}
h3.black, .black h3, h1.black, .black h1,h2.black, .black h2, h4.black, .black h4, span.black, .black span {color: rgba(255,255,255,1);}
.light p a, a.light {color:rgba(0,0,0,0.6); font-style:italic;}
.light p a:hover,  a.light:hover {color:rgba(0,0,0,0.8);}
.black p a, a.black {color: rgba(255,255,255,0.6); font-style:italic;}
.black p a:hover, a.black:hover {color: rgba(255,255,255,1); font-weight: 800;}  

h1 {font-size: 45px; line-height:65px;}
br {margin-top:1em;}
/* #Basic Styles
================================================== */
body {
        font-family: 'Poppins', 'Open Sans', 'Verdana', Open Sans, sans-serif;
        /*
        -webkit-font-smoothing: antialiased;
        -webkit-text-size-adjust: 100%;
        */
        scroll-behavior: smooth;
 }

::-webkit-scrollbar {display: none;}
/* #Typography
================================================== */
    h1, h2, h3, h4, h5, h6 {color: #555;font-family: 'Poppins', 'Open Sans', 'Verdana', sans-serif;text-rendering: optimizeLegibility;}
    em { font-style: italic; }
    strong { font-weight: bold; }
    small { font-size: 11px; display:block;}

/*  Blockquotes  */
    blockquote {
        padding-left: 107px;
    }
    blockquote.alignLeft{
        width: 310px;
        margin: 0 20px 20px 0;
        float: left;
    }
    blockquote.alignRight{
        width: 310px;
        margin: 0 0 20px 20px;
        float: right;
    }
    blockquote, blockquote p { font-size: 20px; line-height: 28px; }
    blockquote cite { display: block; font-size: 12px; }
    blockquote cite:before { content: "\2014 \0020"; }
    blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { }

    hr { 
  border: none; 
  clear: both; 
  height: 35px; 
}

.textright {text-align:right;}
.textleft {text-align:left;}
.textcenter {text-align: center;}

/* #Links
================================================== */
    a, a:visited, { 
    text-decoration: none; 
    outline: 0;
    -webkit-transition: color 0.2s ease-out, background 0.2s ease-out;
    -moz-transition: color 0.2s ease-out, background 0.2s ease-out; 
    -o-transition: color 0.2s ease-out, background 0.2s ease-out; 
    -ms-transition: color 0.2s ease-out, background 0.2s ease-out; 
    transition: color 0.2s ease-out, background 0.2s ease-out;
    }
    a:hover, a.selected { text-decoration: none;}
    p a, p a:visited { line-height: inherit; }
    a {text-decoration:none;}



/* #Lists
================================================== */
    ul, ol { margin-bottom: 20px; }
    ul { list-style: none outside; }
    ol { list-style: decimal; }
    ol, ul.bullet, ul.check, ul.square, ul.circle, ul.disc { margin-left: 20px; }
    ul.square { list-style: square outside; }
    ul.circle { list-style: circle outside; }
    ul.disc { list-style: disc outside; }
    ul ul, ul ol,
    ol ol, ol ul { margin: 4px 0 5px 30px;}
    ul ul li, ul ol li,
    ol ol li, ol ul li { margin-bottom: 0px; }
    li { line-height: 18px; margin-bottom: 0px; }
    ul.large li { line-height: 21px; }
    li p { line-height: 21px; }
    

/* #Forms
================================================== */

    form {
        margin-bottom: 20px; }
    fieldset {
        margin-bottom: 20px; }
    input[type="text"],
    input[type="password"],
    input[type="email"],
    textarea,
    select {
        border: 1px solid #ccc;
        padding: 7px 4px;
        outline: none;
        margin: 0;
        max-width: 100%;
        display: block;
        margin-bottom: 20px;
        }
    select {
        padding: 0; }

    img {max-width:100%;}

    .pointer {cursor:pointer;}
    .animate {
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
    }


    .shadow {  
        animation-name: shadow;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        margin-top: -55px;
    }

    @keyframes shadow {
        from {opacity: 0.6;}
        65%  {opacity: 0.2;}
        to   {opacity: 0.6;}    
    }

    .float {  
        animation-name: float;
        animation-duration: 5s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
    }

    .float5 {  
        animation-duration: 8s;
    }

    .float8 {  
        animation-duration: 12s;
    }

    @keyframes float {
        from { transform: translate(0,  0px); }
        65%  { transform: translate(0, -15px); }
        to   { transform: translate(0, -0px); }    
    }

    .gray {-webkit-filter: grayscale(100%);filter: grayscale(100%);}
    .opa01 {opacity:0.1;}
    .opa05 {opacity:0.5;}

    .abs {position:absolute;}
    .topleft {left:0; top:0;}

    .bb {box-sizing:border-box;}
    .container {width:100%; position:relative;}
    .allH {height:100%;}

    .header {width:100%; position:relative; overflow:hidden; margin:auto;}
    .bgr {position:absolute; margin:auto; top: 0;}

    .fb-like {width:134px; margin:auto; display:block !important;}
    .mainBody {width: 100%;}
    .section {margin:auto; margin-bottom:31px; overflow:hidden;}
    .leftHand {}
    .rightHand {}
    .section .image {width: 35%;}
    .section .copy {width:55%; margin:31px 5% auto 5%}
    
    .leftHand .copy, .leftHand .image {float:left;}
    .rightHand .copy, .rightHand .image {float:right;}

    .copy {border-top:1px solid rgba(0,0,0,0.3); border-bottom:1px solid rgba(0,0,0,0.3); padding: 55px 0 55px 0;}
    .image {}

    h3 {color:#333; font-size:38px; line-height:50px; margin-bottom:13px;}
    p {color:#666; font-size:24px; line-height:31px;}

    .footer {width: 100%; position:relative;}
    .map {height: 760px; margin:auto; display:block; border-radius:5px;}
        .btn {position:absolute; left:50%; margin-left:-144px; top:0; margin-top:101px; width: 288px; border-radius:100px; background:white; color:#666; height:45px; font-size:27px; line-height:45px; text-align:center; border-bottom:2px solid #999;}
        .btn.popTgle {background:green; color:white; display:none;}

    .routeCalced .popTgle {display:block;}
    .routeCalced .getDir {display:none;}

    .container.popupOn .page {opacity:0.3; overflow:hidden;}

    .popup {position: fixed; left:0; top:0; width: 94%; height: 94%; margin-left:3%; margin-top:1%; background:white; border-radius:3px; visibility: hidden; opacity:0; margin-top:-15px; filter: drop-shadow(0px 0px 16px #ccc);}
    .popupOn .popup {visibility:visible; opacity:1; margin-top:15px; border:1px solid #dedede; border-bottom:none;}

    .popup .container {padding:15px;}
    .popup .map {width:50%; height:100%; float:left; border-radius:0; position:absolute; left:0; top:0; z-index:1;}
    .popup .directions {width:48%; float:right; height:100%; padding-bottom:55px; overflow-y:auto; scroll-behavior: smooth;}
    .directions .title h3 {font-size:35px; line-height:45px; padding-left:55px; margin-bottom:0; font-weight:800;}
    .directions .title p {font-size:18px; line-height:25px; padding-left:55px; margin-bottom:13px; color:#333;}
    .wpts {}
    .wpts .ind {font-size: 63px; line-height:63px; color:#eee; position:absolute; right:0; top:0; width:55px; text-align:right; font-weight:800;}
    .wpt {size:100%; border-top:1px dotted #ccc; padding: 5px 0; position:relative;}
    .wpt .left {width: 50px; font-size: 38px; text-align:center; line-height:50px; position:absolute; left:0;}
    .wpt .left img {width:34px; opacity:0.7;}
    .wpt .right { width: 100%; padding-left:55px; padding-right:55px;}
    .wpt h3 {font-size:27px; line-height: 31px; margin-bottom:0;}
    .wpt p {font-size:18px; line-height: 24px;}
    .wpt b {color:#000;}

    .wpt.hl {background:#F2DDB6;}

    .controls {height:65px; position:absolute; width: 50%; bottom:15px; right:0; padding-right:15px; padding-top:15px; background:white; }
    .leftBtn {color:#888; width: 27%; float:right; font-size: 41px; height: 50px; line-height: 50px;}
    .rightBtn { width: 60%; float:right; color: white; background:green; text-align:center; font-size:40px; line-height:50px; height: 50px;}


    .cafe {background:#e6ccb2;}
    .shakes {background:#ece2d0;}
    .prods {padding: 0 10px; border-radius:13px; overflow:hidden; padding-bottom:444px; position:relative; color:#222; box-sizing:border-box; height:100%;}
    .prods .bottom {position:absolute; bottom:0; left:0; width:100%; margin-bottom:-5px;}

    .specials {margin-top:31px; border-radius:13px; width: 100%; padding:0 10px; box-sizing:border-box;}
    .items {width: 90%; margin:auto; padding-top:13px;}
    .cat {margin-top:8px; margin-bottom:21px;}
    .item {width:100%; overflow:hidden; font-size:18px; line-height:24px; color:#777;}
    .item .left {width: 85%; float:left; text-align:left;}
    .item .right {width: 15%; float:left; text-align:right;}

    .hl {font-size:31px; text-align:left; line-height:50px;}

    .half, .moitie {width: 50%; float:left; box-sizing:border-box; padding: 0 10px; position:relative; box-sizing:border-box;}
    .quart {width: 25%; float: left; box-sizing: border-box; padding: 5px 10px;}


    .half p {margin-top:13px; box-sizing:border-box; width: 100%; padding: 0 30px; font-size:21px; line-height:27px;}

    .quart.first {padding: 5px 0;}
    .quart.first p {text-align: left;}
    .quart p.main {font-size: 18px; line-height: 21px; color: #666;}
    .quart .scroll, .quart p {font-size: 24px; line-height: 28px; color: #333;}
    .quart .scroll {padding: 12px 0; border: 1px solid #ddd; border-bottom: 1px solid #999; border-radius: 5px; cursor: pointer; background: white}

    .quart .scroll.action {background: orange; color: white}
    .headline {font-size:45px; line-height: 68px;}

    .navig {padding: 15px 10px; box-sizing: border-box;}

    .feat {width:80%; margin:30px auto 50px auto; padding:0 0 20px 0 ;}

@media only screen and (min-width:1200px){
    .bgr {width: 100%;}
    .section {width: 1200px; text-align: center;}
    .mobOnly {display: none;}
    .fullOnly {display: block; margin: auto}
    .feat {padding:30px 100px; border-radius:20px; border:1px solid #ccc;}
}

@media only screen and (min-width:768px) and (max-width: 1279px){
    .bgr {width:750px; height: 600px;}
    .section {width: 640px; text-align: center;}
    h3 {font-size:31px; line-height:38px; margin-bottom:13px;}
    p {font-size:18px; line-height:24px;}

    .popup .map {width: 100%; height: 300px;}
    .popup .directions {width:100%; padding-top:315px;}
    .wpts {}
    .controls {width:100%;}

    .mobOnly {display: block;}
    .fullOnly {display: none;}
    .quart p.main {font-size: 16px; line-height: 21px; color: #666;}

}

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

    .half, .moitie {width: 92%; float:none; box-sizing:border-box; padding: 0 10px; margin:auto; margin-bottom:13px;}
    .feat {width:98%;}
    .header {}
    .mobileHide {display:none;}
    .section {width: 90%; text-align: center;}

    .popup .map {width: 100%; height: 240px;}
    .popup .directions {width:100%; padding-top:245px;}
    h3, .directions .title h3 {font-size:24px; line-height:31px;}
    p, .directions .title p {font-size:15px; line-height:24px;}
    .wpts {}
    .wpt p {font-size:15px;}
    .controls {width:100%;}
    .leftBtn, .rightBtn {font-size:24px;}

    .mobOnly {display: block;}
    .fullOnly {display: none;}

    .section {}
    .quart.first {width: 100%; float: none;}
    .quart.first p {text-align: center;}
    .quart{width: 33.33333%; float: left;}
    .quart p {font-size: 27px; line-height: 31px;}
    .quart p.main {font-size: 12px; line-height: 16px; color: #666;}

    .quart .scroll {font-size: 18px; line-height: 22px;}
    .prods {padding-bottom:250px;}
}


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

    .quart {width: 50%;}
    .quart.reg {width:100%;}
    .prods {padding-bottom:250px;}

}