/***************************************
 Base Styles 
 ***************************************/

  /* Clear Elements */

    .group:before, .group:after {content: ""; display: table;} 
    .group:after {clear: both;}
    .group {zoom: 1;}


    /* Set up REM style */

  /*  html { font-size: 62.5%; } 
    body { font-size: 14px; font-size: 1.4rem; background: #fff;} 
    h1   { font-size: 24px; font-size: 2.4rem; } */


    /* Older browsers */
    html { font-size: 16px; background: var(--white); scroll-behavior: smooth;}

    /* Border Box */

    *, *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

body {font-family: "Afacad", serif; font-optical-sizing: auto;}


body.pushy-open-right {overflow: hidden;}

/************************
 * Colors 
 * 
 * *********************/

:root {

--green: #083d48;
--black: #1a1a1a;
--white: #fff;
--grey: #e1e1e1;

--transition: all 0.5s ease 0s;

}





/***************************************
 Fonts 
 ***************************************/

/* 

font-family: "Afacad", serif;

font-optical-sizing: auto;
font-weight: <weight>;
font-style: normal;

light = 300
reg = 400
med = 500
semi-bold = 600
bold = 700
extra-bold = 700
black = 900

*/



h1 {font-family: "Afacad", serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; font-size: 30px; font-size: 1.875em; line-height: 1.1; margin: 0px; color: var(--green); margin-bottom: 15px;}
h2 {font-family: "Afacad", serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; font-size: 25px; font-size: 1.5625em; line-height: 1.1; margin: 0px;  color: var(--green); margin-bottom: 15px;}
h3 {font-family: "Afacad", serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; font-size: 20px; font-size: 1.25em; line-height: 1.1; margin: 0px; color: var(--green); margin-bottom: 15px;}
h4 {font-family: "Afacad", serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; font-size: 18px; font-size: 1.125em; line-height: 1.1; margin: 0px;  color: var(--green); margin-bottom: 15px;}
h5 {font-family: "Afacad", serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; font-size: 16px; font-size: 1.0em; line-height: 1.1; margin: 0px; color: var(--green); margin-bottom: 15px;}
h6 {font-family: "Afacad", serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; font-size: 14px; font-size: 0.875em; line-height: 1.1; margin: 0px; color: var(--green); margin-bottom: 15px;}

p {color: var(--green); font-family: "Afacad", serif; font-optical-sizing: auto; font-size: 16px; font-size: 1em; line-height: 1.5;font-weight: 400; font-style: normal; margin-top: 0px; margin-bottom: 15px;}
p strong {font-weight: 600;}
a {color: var(--green); font-optical-sizing: auto; text-decoration: none; font-style: normal; }
ul li, ol li, li {color: var(--green); font-family: "Afacad", serif; font-optical-sizing: auto; font-style: normal; }
em {color: var(--green); font-family: "Afacad", serif; font-optical-sizing: auto; font-style: italic; }



/***************************************
Buttons 
***************************************/

.mobile-nav {display:  none;}

.green-btn {border-radius: 30px; display:  inline-block; font-family: "Rubik", system-ui; font-optical-sizing: auto; transition: all 0.5s ease 0s;  padding: 15px 15px; background: var(--green); font-size: 16px; font-size: 1em; color: var(--blue);}
.green-btn:hover {background: var(--blue); color: var(--white);}

/*************************************** 
Mobile Nav
***************************************/

.pushy {padding: 20px;  overflow: auto; background: var(--white); z-index: 999999;}
.pushy-bar-logo {padding: 0 0px; display: flex; align-items: center;}
.pushy-bar-logo a {padding: 0px;}
.pushy-bar-logo img {width:  150px;}
.close-btn {width: calc(100% - 150px); text-align: right;}
.close-btn a {display: inline-block;}
.close-btn i {font-size: 1.3em; color: var(--green);}
.pushy-navigation {margin-top:  45px;}
.pushy-navigation ul {padding: 0px; margin: 0px;}
.pushy-navigation ul li {border-bottom: 1px solid var(--black);}
.pushy-navigation ul li a {padding: 20px 0px; color: var(--black); text-transform: none; position: relative;}
.pushy-navigation ul li a:hover {color: var(--black);}
.pushy-navigation ul li a i {position: absolute; right:  0; top:  50%; transform: translateY(-50%);}
.pushy-contact {display:  flex; align-items: center; justify-content: center; margin-top: 35px;}
.pushy-contact a {padding: 0px; margin-right:  10px; color: var(--green); text-transform: none !important; margin-left: 10px !important;}
.pushy-contact a:hover {color: var(--green);}
.pushy-contact i {color: var(--green); font-size: 1.3em;}

/*************************************** 
Header Bar 
***************************************/

.nav-bar {width: 100%;}
.nav-bar-top {width: 100%; background: var(--green); padding: 5px 0; }
.nav-bar-top .row {display: flex; align-items: center;}
.nav-bar-top p {margin: 0px; color: var(--grey);}
.nav-bar-top p i {margin-right: 10px;}
.nav-bar-top p a {border-bottom: 1px solid var(--grey); transition: var(--transition); color: var(--grey)}
.nav-bar-top p a:hover {border-bottom: 1px solid transparent;}
.nav-bar-top-hours {text-align: right;}

.nav-bar-bottom {background: var(--white); padding: 30px 0px;}
.nav-bar-bottom .row {display:  flex; align-items: center;}
.nav-bar-contact i {color: var(--green); margin-right: 10px;}
.nav-bar-contact a {font-size:  1.125em; color: var(--black); transition: var(--transition); border-bottom: 1px solid transparent;}
.nav-bar-contact a:hover {border-bottom: 1px solid var(--black);}
.nav-bar-logo {text-align: center;}
.nav-bar-logo img {width: 150px;}
.nav-bar-menu .menu {display:  flex; align-items: center; justify-content: space-between; padding: 0px; margin: 0px;}
.nav-bar-menu .menu li {list-style-type: none;}
.nav-bar-menu .menu li a {font-size: 1.125em; color: var(--black); transition: var(--transition); border-bottom: 1px solid transparent;}
.nav-bar-menu .menu li a:hover {border-bottom: 1px solid var(--black);}

.menu-btn {display:  none; border: 0px; background: none;}

.home-slider {padding: 0px; margin: 0px;}
.home-slider li {padding: 0 2%}
.home-slider li .home-slider-item-inner {padding-top:  150%; display: block; width: 100%;}




.footer {margin-top: 35px;}
.footer .row {display:  flex; align-items: center;}
.footer-social i {font-size:  1.3em; margin-right: 10px; color: var(--green);}
.footer-copy {text-align: right;}
.footer-copy a {border-bottom: 1px solid var(--black);}

  .baking, .location-one, .location-two {
            display: none;
        }

/*************************************
 Inner
**************************************/
.inner-page-title {text-align:center;margin-top: 50px;}
.inner-page-title h2:after {width: 30px; height:1px; background: var(--green); margin: 15px auto; content:" "; display: block;}
.inner-content-wrapper { margin-bottom: 50px; }
.inner-content-text h3 {}

.image-section {margin-top: 50px;}
.inner-content-text img {height: auto !important;}

    .fade-in-element {
      opacity: 0;
      transition: opacity 0.5s ease;
    }
.contact-location-wrapper {margin-top: 35px;}
.contact-location iframe {margin-bottom: 30px;}



.gallery {display: flex; flex-wrap: wrap; padding: 0px;}
.gallery li {width: 32.33%; height: 350px; margin-right: 1%; margin-bottom:20px;list-style-type: none; margin-bottom: 20px;}
.gallery li:hover {background: var(--light-blue-clear);}
.gallery li a { position: relative;display: block; width: 100%; height:350px; border: 4px solid var(--light-blue); overflow: hidden;}
.gallery li a:hover:after {width:100%; height:100%; display: block; content:" "; background:var(--light-blue-clear); position:absolute; top: 0; right:0; bottom:0; left: 0;}
.gallery li a:hover:before {z-index: 999; width:20px; height:20px; content:""; background:url("../img/zoom-in.svg"); background-size: contain; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.gallery li img {min-width: 100%; height: 350px !important; object-fit: cover;}



/***************************************
Media Queries
***************************************/




@media all and (max-width: 930px) and (min-width: 0px) {

ul#primary {display:  none;}
.mobile-nav {display:  block; text-align: right;}
.menu-btn {display:  inline-block;}
.menu-btn i {font-size: 1.2em; color: var(--green);}

}

@media all and (max-width: 730px) and (min-width: 0px) {

.nav-bar-top .row {flex-direction: column;}
.six.columns.nav-bar-top-location {text-align: center; width: 100% !important; margin-bottom: 5px;}
.six.columns.nav-bar-top-hours {width: 100% !important; margin-left: 0px !important; text-align: center;}

}

@media all and (max-width: 690px) and (min-width: 0px) {

.footer .row {flex-direction: column;}
.three.columns.footer-social {width: 100%; text-align: center;}
.nine.columns.footer-copy {width: 100%; text-align: center;}
}

@media all and (max-width: 650px) and (min-width: 0px) {

.nav-bar-bottom .row {}
.nav-bar-contact.four.columns {display:  none;}
.nav-bar-logo {width: 50% !important; text-align: left;}
.nav-bar-menu.four.columns {width: 50% !important;}

.gallery li {width: 49%; }

}

@media all and (max-width: 480px) and (min-width: 0px) {

.six.columns.nav-bar-top-location p,
.six.columns.nav-bar-top-hours p {font-size: 0.875em;}
.home-slider li {padding: 0px;}
.home-slider li .home-slider-item-inner {padding-top:  100%;}


.gallery li {width: 100%; margin-right: 0px;}
}