/*
Theme Name: Greendot
Theme URI: http://www.wingzcommunications.com/
Version: 1.0
Description: Designed by <a href="http://www.wingzcommunications.com">Wingz Communications</a>.
Author: Jon Ang
Author URI: http://www.wingzcommunications.com/
Template: canvas
Tags: wingzcommunications

*/

/* GLOBAL STYLES
----------------
Add styles beneath this line that you want to be applied across your entire site */

body{
    background-size: cover;
}

img{
    height: auto;
}

.entry img{
    background: none;
    border: none;
}

body.full-width #header, #nav-container, body.full-width #content, body.full-width #footer-widgets, body.full-width #footer{
    padding: 0;
}

body.admin-bar{
    background-position: left 32px;
}

/* General */

#wrapper{
    overflow: hidden;
}

.align-center{
    margin: 0 auto;
}

.content-limit {
    margin: 3em auto;
    max-width: 960px;
    min-height: 100px;
    overflow: hidden;
    padding: 0 1em;
}

.background{
    max-width: none;
    position:absolute;
}

.no-capital{
    text-transform: lowercase;
}

#content .page-title, .page #content h1.title{
    font-size: 2em;
    text-align: center;
    text-transform: uppercase;
    margin-top: 0.5em;
}


/* Header */

#header-container{
    position: fixed;
    z-index: 9999;
    width: 100%;
    top: 0;
}

body.admin-bar #header-container{
    top: 32px;
}

#header{
    background: none;
    height: 100%;
}

#logo{
    background: url('images/logo-background.png') no-repeat ;
    background-size: 100%;
}

#logo > a{
    width: 60%;
    margin: 0 auto;
    display: block;
}

/* Navigation */

#navigation, #nav-container{
    background: none;
}

#nav-container{
    top: 30px;
    margin: 0;
    max-width: 70%;
}

#nav-container #navigation{
    top: 100px;
}

#navigation ul.nav > li a{
    text-transform: uppercase;
}

#navigation ul.nav > li:hover, #navigation ul.nav > li:hover a{
    background: none;
}
#navigation ul.nav > li:hover a {
    color: #006f3c;
}

ul.nav li.current_page_item a, ul.nav li.current_page_parent a, ul.nav li.current-menu-ancestor a, ul.nav li.current-cat a, ul.nav li.current-menu-item a{
    color: #006f3c;
    background: none;
}

/* Slider / Page header */

#mainslider{
    padding-top: 80px;
    position: relative;
}

body .wooslider .wooslider-control-nav{
    top: 90%;
    right: 0;
    margin-top: 0;
    width: 20%;
}

@keyframes bounce-down {
    0% { opacity: 0; transform: translateY(-20px); }
    50% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(5px); }
}

.bouncing-arrow{
    animation: bounce-down 2s ease infinite;
    background: url('images/down-arrow-btn.png') no-repeat center;
    width: 114px;
    height: 114px;
    left: 45%;
    top: 90%;
    z-index:999;
    position: absolute;
}

.graceful-slice{
    max-width: none;
    position: absolute;
}

body.page #main{
    padding: 0 1em;
}


/* Front Page */

.front-section{
    display: block;
    clear: both;
}

.front-section-header{
    text-transform:uppercase;
    font-size: 3em;
    color: #754100;
}

#key-ingredients{
    height: 200px;
}

#key-ingredients-header{
    text-align: center;
    height: 120px;
}

.shift-left{
    font-size: 0.5em;
    font-weight: normal;
    margin-bottom: 10px;
    width: 50%;
}

.ingredients-line{
    line-height: 100%;
}

.ingredients-line.one {
    font-size: 0.5em;
    left: -70px;
    position: relative;
}

.ingredients-line.two {
    color: #754100;
    font-weight: bold;
    font-size: 0.6em;
}

.ingredients-line.three {
    color: #b32216;
    font-size: 0.4em;
    font-style: italic;
    font-weight: bold;
    left: auto;
    right: -20px;
    position: relative;
    text-transform: lowercase;
}


#key-ingredients-divider .threecol-one{
    margin: 0;
    width: 33.33%;
}


.ingredient-title {
    bottom: 0;
    height: 200px;
    position: absolute;
    color: #fff;
    padding: 1.5em;
    box-sizing: border-box;
    width: 100%;
}


.meet-text {
    font-size: 2em;
    line-height: 100%;
}

.ingredient-name {
    font-size: 2em;
    font-weight: bold;
    line-height: 100%;
    text-transform: uppercase;
}

#key-ingredients-divider .konnyaku .ingredient-title{
    background: url('images/chinese-text-bu.png') rgba(179,34,22,0.75) bottom right no-repeat;
}

#key-ingredients-divider .soybean .ingredient-title{
    background: url('images/chinese-text-jian.png') rgba(0,140,168,0.75) bottom right no-repeat;
}

#key-ingredients-divider .lions-mane-mushroom .ingredient-title{
    background: url('images/chinese-text-kang.png') rgba(253,186,48,0.75) bottom right no-repeat;
}

.ingredient-plus{
    background: url('images/plus-btn.png') no-repeat top right;
    height: 114px;
    width: 114px;
    position: absolute;
    right: 20px;
    top: -60px;
}

.ingredient-excerpt{
    display: none;
    font-size: 0.8em;
}

.ingredient-excerpt p{
    color: #fff;
    font-size: 1.3em;
}

/* Front Reviews */

#reviews-header{
    height: 150px;
    display: table;
}

#reviews-header .align-center{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

#reviews-header .align-center img{
    float: left;
    width: 25%;
}

#reviews-header .align-center .reviews-title{
    float: left;
    font-size: 0.7em;
    color: #8cc63e;
    width: 75%;
}

#reviews-header .align-center .reviews-title span{
    color: #006f3c;
}

#reviews-scroller-background{
    background: url('images/grass-bg-mobile.png') no-repeat;
    height: 295px;
    background-size: auto 295px;
}

#reviews-scroller .testimonials-list {
    position: relative;
    top: 120px;
}

#reviews-scroller .testimonials-list .quote{
    text-align: center;
}

#reviews-scroller .testimonials-list blockquote p,
#reviews-scroller .testimonials-list cite span{
    color: #fff;
}

#reviews-scroller .testimonials-list blockquote p{
    font-size: 1.8em;
}

.owl-carousel .owl-item{
    padding: 1em;
    box-sizing: border-box;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

#reviews-scroller .owl-nav div{
    top: 50px;
    position: absolute;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
    width: 50px;
    height: 50px;
}

#reviews-scroller .owl-prev {
    left: -50px;
    background: url('images/left-btn.png') no-repeat;
    background-size: 50px;
}

#reviews-scroller .owl-next {
    right: -50px;
    background: url('images/right-btn.png') no-repeat;
    background-size: 50px;
}

/* Instagram Front */

#instagram-header{
    text-align: center;
}

#instagram-container .AlpinePhotoTiles-link{
    height: auto;
}

/* Footer */

#footer-address {
    text-align: center;
    margin-bottom: 10px;
}



#footer-widgets {
    clear: both;
    width: 50%;
    margin: 0 auto;
}

#footer-widgets-container{
    padding: 1em;
}

#footer-inner-widgets-container {
    margin: 0 auto;
    max-width: 1200px;
    overflow: hidden;
}
#footer-widgets #menu-main-menu {
    clear: both;
    list-style-type: none;
    width: 100%;
}

#footer-widgets #menu-main-menu li {
    border: 1px solid #754100;
    margin: 0 0 15px 0;
    text-align: center;
}

#footer-widgets #menu-main-menu li a {
    display: block;
    padding: 0.5em;
    text-decoration: none;
}


#footer-widgets-container #connect{
    background: none;
    float: none;
    padding: 0;
    border: none;
    clear: both;
}

#footer-widgets-container #connect h3{
    text-align: center;
    display: block;
    width: 100%;
}

#connect .social{
    margin: 0 auto;
    width: 186px;
}

#connect .social a {
    display: block;
    float: left;
    height: 62px;
    width: 62px;
}

#connect .social a:before{
    border-radius: 0;
    background-color: transparent;
    margin: 0;
    padding: 0;
    text-shadow: none;
}

#connect .social a.subscribe {
    background: url("images/footer/rss.png") no-repeat scroll center center / 62px 62px rgba(0, 0, 0, 0);
    content: "";
}

#connect .social a.facebook {
    background: url("images/footer/facebook.png") no-repeat scroll center center / 62px 62px rgba(0, 0, 0, 0);
    content: "";
}

#connect .social a.instagram {
    background: url("images/footer/instagram.png") no-repeat scroll center center / 62px 62px rgba(0, 0, 0, 0);
    content: "";
}
#connect .social a.subscribe:before,
#connect .social a.facebook:before,
#connect .social a.instagram:before{
    content: '';
}

#footer-container{
    background: url('images/footer_grass.png') no-repeat bottom left;
}

/* About Us */

.greendot-aboutus-logo{
    display: none;
}

.page-our-story #main > .threecol-two.last{
    margin-top: 100px;
}

#logo-container{
    background: url('images/rice-paper-bg.jpg') repeat top left / cover;
}

#logo-id{
    max-width: 1100px;
    margin: 0 auto;
}

.about-us-image-move{
    position: relative;
    bottom: -65px;
}

#stories-divider .threecol-one{
    margin: 0;
    width: 33.33%;
}


.value-title {
    bottom: 0;
    height: 120px;
    position: absolute;
    color: #fff;
    padding: 1.5em;
    box-sizing: border-box;
    width: 100%;
}

.value-name {
    font-size: 4em;
    font-weight: bold;
    line-height: 100%;
    text-transform: uppercase;
}

#stories-divider .care .value-title{
    background: url('images/care.png') rgba(0,0,0,0.75) bottom center no-repeat;
}

#stories-divider .love .value-title{
    background: url('images/love.png') rgba(0,0,0,0.75) bottom center no-repeat;
}

#stories-divider .hope .value-title{
    background: url('images/hope.png') rgba(0,0,0,0.75) bottom center no-repeat;
}

.value-plus{
    background: url('images/plus-btn.png') no-repeat top right;
    height: 114px;
    width: 114px;
    position: absolute;
    right: 20px;
    top: -60px;
}

.value-excerpt{
    display: none;
}

.value-excerpt p{
    color: #fff;
    font-size: 0.75em;
}

/* Menu */

.menu-section{
    margin-bottom: 2em;
}

.menu-section.menu-open{
    margin-bottom: 0;
}

.menu-section-header{
    background-color: #fdb924;
    background-position: right center;
    background-repeat: no-repeat;
    position: relative;
    height: 100px;
}

.menu-section-header.customised-bento-header-class{
    background-image: url('images/menu/customized-bento.png');
}

.menu-section-header.signature-rice-bowl-header-class{
    background-image: url('images/menu/signature-rice-bowl.png');
}

.menu-section-header.noodles-header-class{
    background-image: url('images/menu/noodles.png');
}

.menu-section-header.breakfast-header-class{
    background-image: url('images/menu/breakfast.png');
}

.menu-section-header.tea-bar-header-class{
    background-image: url('images/menu/tea-bar.png');
}

.menu-section-header.sides-header-class{
    background-image: url('images/menu/sides.png');
}

.menu-section-header.burgers-header-class{
    background-image: url('images/menu/burger.png');
}

.menu-section-header.mushroom-pots-header-class{
    background-image: url('images/menu/hotpot.png');
}

.menu-section-header.desserts-header-class{
    background-image: url('images/menu/dessert.png');
}

.menu-section-header.salads-header-class{
    background-image: url('images/menu/salads.png');
}



.menu-section-header:hover{
    cursor: pointer;
}

.menu-section-title{
    height: 100px;
    display: table;
}

.menu-section-title h2{
    text-transform: uppercase;
    padding-left: 1em;
    display: table-cell;
    color: #fff;
    vertical-align: middle;
}

.menu-header-arrow{
    background: url('images/mobile-plus-btn.png') no-repeat center / 70px 70px ;
    height: 70px;
    width: 70px;
    left: 38%;
    position: absolute;
    top: 60px;
    transition: opacity 1s ease-in-out;

}

.menu-section.menu-open .menu-header-arrow{
    background: url('images/mobile-down-arrow-btn.png') no-repeat center / 70px 70px ;
}

.menu-section-content{
    background-color: rgba(253,185,36,0.7);
    padding: 1em;
    display: none;
}

.menu-section-content .tablepress{
    margin-top: 2em;
}

.menu-section-content .tablepress tbody td{
    border: none;
}

.menu-section-content .tablepress tbody td.column-1{
    width: 70%;
}

.menu-section-content .tablepress tbody td.column-2{
    padding-left: 2em;
    border-left: 1px solid #000;
}

/* What's Cooking */

#isotope-filter{
    display: block;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 50px;
}

#isotope-filter li{
    width: 100%;
    float: left;
    max-width: 50%;
}


.isotope-item article header{
    position: absolute;
    width: 100%;
    bottom: 0;
}

.isotope-item article header h2{
    font-size: 0.7em;
}

#isotope-filter li a, .isotope-item article header h2 a{
    color: #fff;
    text-transform: uppercase;
    padding: 0.5em;
    display: block;
    text-align: center;
}

#isotope-filter li.isotope-filter-all{
    background: #764700;
}

#isotope-filter li.events, .isotope-item.events article header{
    background-color: #b32216;
}

#isotope-filter li.press-release, .isotope-item.press-release article header{
    background-color: #008ca8;
}

#isotope-filter li.promotions, .isotope-item.promotions article header{
    background-color: #fdba30;
}

#isotope-filter li.culture, .isotope-item.culture article header{
    background-color: #0083A4;
}

#isotope-container{
    width: 100%;
    margin-top: 50px;
}

.isotope-item article.post{
    margin: 0;
}

.isotope-item.item-standard{
    width: 50%;
}

.isotope-item.item-super-wide{
    width: 100%;
}

.isotope-item.item-wide{
    width: 100%;
}

.isotope-item.item-half{
    width: 50%;
    height: auto;
    max-width: 50%;
}

body.page-template-template-blog-php #main{
    padding: 0;
}

/* Connect */

body.page-connect #main-sidebar-container, body.single-post #main-sidebar-container{
    background: url('images/rice-paper-bg.jpg') repeat top left / cover;
}

#contact-form{
    background: url('images/form_bg.png') repeat top left / cover;
    padding: 2em 0.3em 1em 1em;
    box-sizing: border-box;
}

body.page-connect .tablepress i{
    font-family: FontAwesome;
    font-style: normal;
}

body.page-connect .entry table{
    border: none;
    box-shadow: none;
    padding-left: 30px;
}

body.page-connect .entry table,
body.page-connect .tablepress .odd td,
body.page-connect .tablepress .even td,
body.page-connect .entry table thead th{
    background: none;
}

body.page-connect .entry table tbody td,
body.page-connect .entry table td,
body.page-connect .entry table th{
    border: none;
    padding: 0 0 10px 0;
}

body.page-connect .gform_wrapper .top_label input.large,
body.page-connect .gform_wrapper .top_label select.large,
body.page-connect .gform_wrapper .top_label textarea.textarea{
    width: 96.5%;
}

body.page-connect .gform_wrapper .top_label .gfield_contains_required input.large,
body.page-connect .gform_wrapper .top_label .gfield_contains_required textarea.textarea{
    width: 94%;
}

body.page-connect .gform_wrapper .top_label .gfield_contains_required select.large{
    width: 99.28%;
}

body.page-connect .woo-sc-box{
    text-align: center;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    background: none;
    font-weight: bold;
}

body.page-connect input.button{
    color: #754100 !important;
    background: none;
    border: 1px solid #754100;
    margin-bottom: 3em;
    float: right;
}

body.page-connect input.button:hover{
    color: #fff;
    background-color: #754100;
}

body.single-post #main{
    padding: 1em 0;
}

/* DESKTOP STYLES
-----------------
Add styles inside the media query below that you only want to be applied to the desktop layout of your site */
@media only screen and (min-width: 768px) {

    /* Header */

    #header-container {
        background: url('images/navigation-bg.jpg') no-repeat left top;
        background-size: 100%;
    }

    #logo{
        background: none;
        max-width: 30%;
    }

    #logo > a{
        width: 100%;
        margin: 0;
    }

    #nav-container{
        float: left;
        position: relative;
        top: 30px;
    }

    #nav-container #navigation{
        top: 0;
    }

    /* General */

    #content .page-title, .page #content h1.title {
        font-size: 4em;
    }

    #page-banner{
        margin-top: 110px;
    }

    #page-banner, .wide-image{
        overflow: hidden;
        position: relative;
        height: 350px;
        clear: both;
    }

    body.page #main{
        padding: 0;
    }


    /* Slider */

    #mainslider {

    }

    /* Index Key Ingredients */

    #key-ingredients-divider .threecol-one > img{
        width: 100%;
        max-width: none;
    }

    .ingredients-line.one {
        left: -200px;
    }

    .ingredients-line.two {
        font-size: 1em;
    }

    .ingredients-line.three {
        font-size: 0.6em;
        text-indent: 11em;
    }

    .ingredient-name {
        font-size: 4em;
    }

    .ingredient-excerpt{
        font-size: 1em;
        margin-top: 50px;
    }

    #reviews-header .align-center img{
        width: auto;
    }

    #reviews-header .align-center .reviews-title{
        width: auto;
        margin-top: 30px;
        font-size: 1em;
    }

    #reviews-scroller-background {
        background: url('images/what-people-say-bg.png') no-repeat;
        height: 295px;
        background-size: 100% 295px;
    }

    #reviews-scroller .owl-nav div{
        top: 0;
        width: 75px;
        height: 75px;
        cursor: pointer;
    }

    #reviews-scroller .owl-prev {
        background-size: 75px;
    }

    #reviews-scroller .owl-next {
        background-size: 75px;
    }

    body.home.page #inner-wrapper #content{
        margin: 0;
    }

    body.page #inner-wrapper #content{
    }

    .content-limit {
        padding: 0;
        width: 960px;
    }

    #reviews-header{
        height: 150px;
    }


    #reviews-header .align-center{
        width: 750px;
    }

    body.page-connect #main-sidebar-container #main.twocol-one,
    body.page-connect #main-sidebar-container #contact-form.twocol-one{
        float: left;
    }

    /* Our Story */

    .greendot-aboutus-logo{
        display: block;
    }

    .page-our-story #main > .threecol-one{
        margin-top: 125px;
    }

    .page-our-story #main > .threecol-two.last{
        margin-top: 0px;
    }

    #stories-divider .threecol-one > img{
        width: 100%;
        max-width: none;
    }

    .value-excerpt p{
        font-size: 1.3em;
    }

    /* Menu */

    .menu-header-arrow {
        background: url('images/plus-btn.png') no-repeat center / 114px 114px;
        height: 114px;
        width: 114px;
        left: 45%;
        top: 20px;
    }

    .menu-section.menu-open .menu-header-arrow{
        background: url('images/down-arrow-btn.png') no-repeat center / 114px 114px ;
    }

    /* Whats Cooking */

    #isotope-filter{
        width: 750px;
    }

    .isotope-item article header h2{
        font-size: 1em;
    }

    #isotope-filter li a, .isotope-item article header h2 a{
        padding: 1em;
    }

    #isotope-filter li{
        width: 150px;
        float: left;
        margin-right: 2em;
    }

    .isotope-item.item-half{
        width: 25%;
        min-width: 275px;
        min-height: 200px;
    }

    .isotope-item.item-standard{
        width: 25%;
        min-width: 275px;
        min-height: 400px;
    }

    .isotope-item.item-wide {
        width: 50%;
        min-height: 400px;
        min-width: 550px;
    }

    .isotope-item.item-super-wide{
        min-width: 1100px;
        min-height: 400px;
    }

    /* Footer */

    #footer-widgets #menu-main-menu li {
        float: left;
        margin-right: 20px;
        width: 110px;
    }

    #footer-widgets {
        clear: none;
        float: right;
        width: 70%;
    }

    #footer-widgets-container #connect{
        float: right;
        clear: none;
    }

    #footer-widgets-container #connect h3{
        text-align: right;
    }

    #footer-address {
        float: left;
        width: 20%;
        margin: 0;
    }

}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
    /* iPad */
    #key-ingredients-divider img, #stories-divider img{
        width: 100%;
    }

    .ingredient-excerpt p, .value-excerpt p{
        font-size: 2em;
    }
}

@media only screen and (min-width: 768px) and (max-width:1366px) {

    /* Non HD Laptops */

    #key-ingredients-divider .konnyaku .ingredient-title,
    #key-ingredients-divider .soybean .ingredient-title,
    #key-ingredients-divider .lions-mane-mushroom .ingredient-title{
        background-size: 100px;
    }
    .ingredient-name {
        font-size: 3em;
    }

    .ingredient-excerpt{
        font-size: 0.9em;
        margin-top: 20px;
    }

    .value-excerpt p{
        font-size: 0.95em;
    }

}

@media only screen and (min-width: 767px) and (max-width:1440px) and (aspect-ratio:16/10),
only screen and (min-width: 767px) and (max-width:1440px) and (device-aspect-ratio:16/10){
    /* Macbook Air and other 16:10 devices up to 1440  */

    .ingredient-name{
        font-size: 3.5em;
    }

    .ingredient-excerpt{
        margin-top: 30px;
    }

    .ingredient-excerpt p{
        font-size: 1.2em;
        margin-top: 5px;
    }

    .value-excerpt p{
        font-size: 1em;
    }
}