header, section, footer, aside, nav, main, article, figure, div {
  display: block; }

/* 
MAIN ELEMENTS (standard. not unique): 

1. BODY
2. HEADINGS
3. LIST / LINKS
4. BUTTONS 
5. ROWS/COLUMNS
6. MEDIA QUERIES
7. CLEARFIXES
8. HELPERS 

*/
body {
  font-family: "Oswald", sans-serif;
  color: #4c2c1b;
  font-size: 100%;
  /* 16px */
  line-height: 1.5em;
  /* 16px * 1.5 em= 24px */ }

html, body {
  height: 100%;
  margin: 0; }

body {
  background-image: url("../images/canvas-background.jpg");
  background-color: #ebe3cd;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; }
  @media (max-width: 767px) {
    body {
      background-image: url("../images/canvas-background-mobile2.jpg");
      background-size: auto 100%;
      background-color: #ebe3cd;
      background-attachment: scroll;
      background-repeat: repeat; } }

/* 2. HEADINGS*/
h1, h2, h3, h4, h5, h6 {
  margin: .5em 0; }

h1 {
  font-size: 3em;
  /* 48px/16px=3em */
  line-height: 1em; }

h2 {
  font-size: 2.25em;
  /* 36px/16px=2.25em */
  line-height: 1.1em; }

h3 {
  font-size: 1.5em;
  /* 24px/16px=1.5em */
  line-height: 1.2em; }

h4 {
  font-size: 1.3125em;
  /* 21px/16px=1.3125em */
  line-height: 1.3em; }

h5 {
  font-size: 1.125em;
  /* 18px/16px=1.125em */
  line-height: 1.4em; }

h6 {
  font-size: 1em;
  /* 16px/16px=1em */
  line-height: 1.5em; }

/* 3. LISTS & LINKS */
ul {
  padding-bottom: 1em;
  margin: 0; }

li, a {
  list-style-type: none;
  color: #4c2c1b;
  text-decoration: none;
  outline: none; }

li a:hover,
li a:visited,
li a:focus,
li a.selected {
  font-weight: 800;
  color: #4c2c1b; }

/* 4. BUTTONS */
button {
  font-size: inherit;
  border: none; }

a.button,
button {
  display: inline-block;
  background: none;
  padding: 0;
  line-height: 1em;
  margin-bottom: .5em; }

a.button:hover,
button:hover {
  background: none;
  text-decoration: none; }

button p {
  font-weight: 400;
  color: #4c2c1b; }

button p:hover,
button p.selected {
  font-weight: 800;
  background-color: rgba(78, 48, 25, 0.1); }

/* 5. MEDIA QUERIES */
/* sm (mobile) */
body {
  font-size: 90%;
  margin: 0;
  padding: 0; }

/* med (tablet) */
@media (min-width: 768px) {
  /* inherits small (mobile) CSS from above */ }

/* lg (laptop) */
@media (min-width: 1050px) {
  /* inherits med (tablet) CSS from above */
  body {
    font-size: 85%; } }

/* Xlarge (desktop) */
@media (min-width: 1250px) {
  /* inherits lg (laptop) CSS from above */
  body {
    font-size: 95%; } }

/* 6. ROWS & COLUMNS */
@media (max-width: 767px) {
  .row {
    margin-left: .5em;
    margin-right: .5em; } }

@media (min-width: 768px) {
  .column {
    float: left;
    margin-right: 8%; }
  .column:last-child {
    margin-right: 0; }
  /* width = 100 - gutters / # of columns */
  .one-whole.column {
    width: 100%; }
  .one-half.column {
    width: 46%; }
  .one-third.column {
    width: 28%; }
  .one-fourth.column {
    width: 19%; }
  .two-thirds.column {
    width: 64%; }
  .column.centered {
    margin-left: auto;
    margin-right: auto;
    float: none;
    background: none; } }

/* 7. CLEARFIX */
.group:after,
.row:after {
  content: "";
  display: table;
  clear: both; }

/* 8. HELPERS */
img.scale-with-grid {
  max-width: 100%;
  height: auto; }

.hidden {
  position: absolute;
  top: -9999px;
  left: -9999px; }

@media (min-width: 768px) {
  .show-hide {
    visibility: hidden;
    top: 0;
    position: absolute;
    opacity: 0;
    -webkit-transition: opacity .5s linear;
    -o-transition: opacity .5s linear;
    transition: opacity .5s linear; }
    .show-hide.active {
      visibility: visible;
      position: static;
      opacity: 1; } }

.show-hide-allscreens {
  visibility: hidden;
  height: 0;
  overflow: hidden;
  top: 0;
  position: absolute;
  opacity: 0;
  -webkit-transition: opacity .5s linear;
  -o-transition: opacity .5s linear;
  transition: opacity .5s linear; }
  .show-hide-allscreens.active {
    visibility: visible;
    height: auto;
    overflow: visible;
    position: static;
    opacity: 1; }

@media (min-width: 768px) {
  .show-on-mobile {
    display: block; } }

@media (max-width: 767px) {
  .hide-on-mobile {
    display: none; } }

.centeredtext {
  text-align: center; }

.left-align {
  text-align: left; }

.italicserif-brown {
  font-family: 'PT Serif', serif;
  font-style: italic;
  color: #412415;
  font-size: .9em;
  margin-bottom: .3em;
  text-align: left; }

@media (min-width: 768px) {
  .show {
    display: block; }
  .hide {
    display: none; } }

@media (min-width: 768px) {
  .left {
    position: relative;
    left: -115%;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out; }
  .center {
    position: relative;
    left: 0%;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out; }
  .right {
    position: relative;
    left: 115%;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out; } }

/*SITE HEADER & SITE MAIN */
.site-header {
  background: rgba(0, 0, 0, 0); }

@media (max-width: 767px) {
  .site-header {
    top: -100px;
    -webkit-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;
    opacity: 0;
    position: fixed; }
  .site-header.sticky {
    width: 100%;
    border-bottom: 2px solid rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    top: 0;
    opacity: 1;
    background-image: url("../images/canvas-background.jpg"); }
  #home {
    padding-top: 50px; } }

@media (min-width: 768px) {
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 25%;
    height: 89%; }
  .site-main {
    display: block;
    width: 75%;
    height: 100%;
    margin-left: 25%; } }

@media (min-width: 1380px) and (min-height: 900px) {
  .site-header {
    top: 8%;
    height: 69%; } }

/*VERTICAL CONTAINERS */
.vertical-container {
  display: table;
  width: 100%;
  min-height: 100%;
  /*for mozilla*/
  max-width: 940px; }

.vertical-container-inner {
  display: table-cell;
  vertical-align: middle;
  padding: 0 5em 2em 2em;
  overflow-x: hidden; }

@media (min-width: 768px) {
  .vertical-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; }
  .vertical-container-inner {
    display: block;
    width: 100%;
    position: relative; } }

@media (max-width: 767px) {
  .vertical-container {
    display: block;
    height: auto; }
  .vertical-container-inner {
    padding: 6em 2em;
    height: auto;
    display: block;
    border-top: 4px dotted #4c2c1b; } }

@media (min-width: 1380px) and (min-height: 840px) {
  .vertical-container {
    padding-left: 3em; } }

/* SITE BRANDING */
.site-branding {
  padding: 0;
  max-width: 240px; }

@media (max-width: 767px) {
  .site-branding {
    margin: 1.5em 1em 1em 1.5em;
    width: 30%;
    float: left; }
  .logo1 {
    display: none; }
  .logo2 {
    width: 70%; } }

@media (min-width: 768px) {
  .site-branding {
    clear: both;
    float: right; }
  .logo2 {
    display: none; } }

/* SITE-NAVIGATION */
.site-navigation {
  text-align: center; }

.site-navigation ul li {
  display: block;
  font-family: "Sansita", sans-serif;
  font-style: italic;
  font-size: 1.3125em;
  line-height: 1.7em;
  font-weight: 400; }

@media (min-width: 768px) {
  .site-navigation ul {
    padding-top: 2em; } }

.divider {
  display: block;
  border-top: 2px dotted #412415;
  width: 50px;
  padding-top: .5em; }

@media (max-width: 767px) {
  .divider {
    margin: auto; } }

/*for large screen*/
@media (min-width: 768px) {
  .site-navigation {
    clear: both;
    float: right;
    text-align: left;
    width: 230px; }
  .site-navigation ul {
    margin-left: 3em; }
  .site-navigation ul li {
    padding: .1em 0;
    display: block;
    font-family: "Sansita", sans-serif;
    font-style: italic;
    font-size: 1.3125em;
    line-height: 1.7em;
    font-weight: 400; } }

/* NAVICON MENU */
.menu.navicon {
  color: rgba(0, 0, 0, 0); }

.menu.navicon:after {
  color: #412415;
  content: '\2630';
  font-size: 1.5em;
  cursor: pointer;
  width: 2em;
  height: 1em;
  line-height: .5em;
  display: block;
  -webkit-transition: all .3s;
  -o-transition: all .3s;
  transition: all .3s;
  margin: 0 .5em; }

.menu.navicon.expanded:after {
  content: '\2715';
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg); }

/* TOGGLE NAV */
.toggle-nav .menu {
  display: none; }

@media (max-width: 767px) {
  .toggle-nav .menu {
    display: block;
    margin-bottom: 1em;
    float: right; }
  .toggle-nav .menu + ul,
  .toggle-nav .menu + ul + ul {
    clear: both;
    display: none; }
  .toggle-nav .menu + ul li,
  .toggle-nav .menu + ul li + ul li {
    clear: both;
    display: block;
    float: none;
    padding: .2em 0; }
  .toggle-nav .menu + ul li a,
  .toggle-nav .menu + ul li a + ul li a {
    display: block;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease; }
  .toggle-nav .menu + ul li a:hover,
  .toggle-nav .menu + ul li a + ul li a:hover {
    font-weight: 700;
    color: #412415; }
  .toggle-nav .menu.expanded + ul,
  .toggle-nav .menu.expanded + ul + ul {
    display: block;
    clear: both;
    padding-left: 0;
    padding-right: 0; } }

/*SITE FOOTER */
@media (min-width: 768px) and (min-height: 650px) {
  .site-footer {
    position: fixed;
    bottom: 2px;
    left: 0;
    width: 25%;
    height: 11%; } }

@media (min-width: 1380px) and (min-height: 900px) {
  .site-footer {
    bottom: 10%; } }

.site-footer ul {
  float: right;
  width: 165px; }

.site-footer ul li {
  text-align: left;
  font-weight: normal;
  display: block;
  font-size: .8em;
  line-height: 1.4em; }

@media (max-width: 767px) {
  .site-footer {
    padding-top: 1em;
    border-top: 1px dotted #412415; }
  .site-footer ul {
    text-align: center;
    float: none;
    width: 100%;
    padding-left: 0; }
  .site-footer ul li {
    display: inline-block;
    padding: 0 1em; } }

/* 
SUBPAGE: 
1. SUBHEAD
2. TOPNAV
3. SUBwrapper
4. BOTTOM NAV 
5. END BUTTON ------------------------- */
/* 1. SUBHEAD*/
.subhead {
  margin-bottom: 3.25em;
  margin-left: 5em;
  width: 100%; }
  .subhead h5 {
    font-family: "Sansita", sans-serif;
    font-style: italic;
    display: inline-block;
    vertical-align: bottom;
    padding-right: .2em;
    line-height: .5em; }
  .subhead img {
    width: 40px;
    display: inline-block;
    vertical-align: middle; }

@media (max-width: 767px) {
  .subhead {
    margin-left: auto;
    margin-right: auto;
    margin-top: 3.25em; }
    .subhead img {
      width: 10%;
      display: block;
      margin-left: auto;
      margin-right: auto; }
    .subhead h5 {
      font-family: "Sansita", sans-serif;
      font-style: italic;
      display: block;
      text-align: center;
      font-size: 2em;
      margin-bottom: .25em; } }

/* 2. TOP NAV */
.top-nav {
  display: inline-block;
  vertical-align: bottom; }

.top-nav ul {
  display: inline-block;
  padding-bottom: 0;
  padding-left: 1em; }

.top-nav li {
  font-family: "Oswald", sans-serif;
  font-size: .8em;
  text-transform: uppercase;
  font-weight: 400;
  vertical-align: middle;
  text-align: center;
  display: inline-block;
  min-width: 60px;
  background-color: rgba(78, 48, 25, 0.1);
  padding: .3em .4em; }

@media (max-width: 767px) {
  .top-nav ul {
    display: inline-block;
    padding: 2em 0 0 0; } }

/* SUBSECTION & SUBWRAPPER*/
@media (min-width: 768px) {
  .subwrapper {
    min-height: 460px;
    top: 0; } }

@media (max-width: 767px) {
  section {
    text-align: center; }
  .subwrapper {
    padding: 1em 0; } }

/* BOTTOM NAV */
.italicserif-page-indicator {
  font-family: 'PT Serif', serif;
  font-style: italic;
  color: #583b2c;
  margin-bottom: .3em; }

.bottom-nav {
  text-align: right;
  right: 10%;
  position: absolute;
  bottom: 0; }
  .bottom-nav .diets {
    font-family: "Oswald", sans-serif;
    font-size: .62em;
    weight: 700;
    vertical-align: bottom;
    display: inline-block;
    padding-right: 2em; }
    .bottom-nav .diets p {
      margin: 0; }
  .bottom-nav .page-indicator {
    display: inline-block;
    padding-left: 2em;
    border-left: 1px solid #4c2c1b; }
    .bottom-nav .page-indicator p {
      display: inline; }
    .bottom-nav .page-indicator button {
      margin: 0 3px;
      padding: 0 3px;
      outline: none; }
    .bottom-nav .page-indicator button:hover {
      cursor: pointer; }

@media (max-width: 767px) {
  .bottom-nav {
    display: none; } }

@media (max-width: 767px) {
  #home .vertical-container-inner {
    padding: 2em 2em 6em 2em;
    height: auto;
    display: block;
    border-top: 4px dotted #4c2c1b; } }

#hero-image-desktop img {
  width: 95%; }
  @media (min-width: 768px) and (max-width: 1048px) {
    #hero-image-desktop img {
      width: 110%; } }

#hero-image-mobile img {
  width: 95%; }

#hero-logo-mobile img {
  width: 60%; }

@media (max-width: 767px) {
  .message {
    padding: 2em 0; } }

.message h1 {
  font-family: "Sansita", sans-serif;
  text-align: center;
  font-size: 2.25em;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2em;
  margin: 0 0 .25em 0; }
  @media (max-width: 767px) {
    .message h1 {
      margin: 0 auto;
      max-width: 12em;
      padding-bottom: 1em; } }

.message h3 {
  font-family: "Merriweather", serif;
  text-align: center;
  font-size: 1.25em;
  font-weight: 300;
  font-style: italic;
  line-height: 1.2em;
  margin: 0; }

/*ABOUT US PAGE*/
#about-us .subwrapper {
  position: relative; }
  #about-us .subwrapper .img-holder {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    float: none;
    margin: 0; }
    #about-us .subwrapper .img-holder img {
      display: block;
      width: 35%;
      float: right;
      display: block; }
      @media (min-width: 954px) and (max-width: 1049px) {
        #about-us .subwrapper .img-holder img {
          width: 40%; } }
      @media (min-width: 768px) and (max-width: 953px) {
        #about-us .subwrapper .img-holder img {
          width: 45%; } }
    @media (max-width: 767px) {
      #about-us .subwrapper .img-holder {
        position: static;
        top: auto;
        right: auto; }
        #about-us .subwrapper .img-holder img {
          float: none;
          margin-left: auto;
          margin-right: auto;
          padding-bottom: -2em;
          padding-top: 2em;
          width: 55%; } }
  #about-us .subwrapper .text-wrapper {
    float: right;
    width: 300px;
    height: 320px;
    border-radius: 30% / 30%; }
    @media (min-width: 820px) and (max-width: 953px) {
      #about-us .subwrapper .text-wrapper {
        width: 280px;
        height: 350px; } }
    @media (min-width: 768px) and (max-width: 819px) {
      #about-us .subwrapper .text-wrapper {
        width: 250px;
        height: 400px; } }
    @media (max-width: 767px) {
      #about-us .subwrapper .text-wrapper {
        display: none; } }

@media (max-width: 767px) {
  #about-us .top-nav {
    display: none; } }

/* (the story) -------------------*/
@media (max-width: 767px) {
  #about-us #about-us-thestory {
    padding-bottom: 3em; }
    #about-us #about-us-thestory img {
      display: none; } }

/*(WHY US) ----------------------*/
#about-us #about-us-whyus .dotted-box {
  border: 2px dotted #412415; }

#about-us #about-us-whyus ul {
  padding: 2em 0 2em 2em; }

#about-us #about-us-whyus ul li {
  font-weight: normal;
  text-align: center;
  line-height: 2.5em;
  min-width: 10em; }

#about-us #about-us-whyus .two-column-control {
  overflow: hidden; }
  @media (min-width: 953px) {
    #about-us #about-us-whyus .two-column-control {
      -webkit-column-count: 2;
      column-count: 2;
      -webkit-column-gap: 2em;
      column-gap: 2em; } }

@media (min-width: 768px) and (max-width: 953px) {
  #about-us #about-us-whyus ul li {
    line-height: 2em; } }

@media (max-width: 767px) {
  #about-us #about-us-whyus {
    padding-bottom: 3em; }
    #about-us #about-us-whyus img {
      display: none; }
    #about-us #about-us-whyus ul {
      padding: 0 2em; }
    #about-us #about-us-whyus ul li {
      line-height: 2em; }
    #about-us #about-us-whyus .dotted-box {
      border: none; } }

/*(the owner)--------------------*/
.img-holder-menu img {
  width: 275px;
  display: block; }

@media (max-width: 767px) {
  .img-holder-menu {
    min-height: 225px;
    width: auto;
    padding: 3em 0 1em 0; }
    .img-holder-menu img {
      width: 50%;
      margin: auto; } }

/* Styles for alternating/transition effect */
.toggle-image {
  position: absolute;
  -webkit-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  opacity: 0; }
  @media (max-width: 767px) {
    .toggle-image {
      left: 0;
      right: 0; } }

/* Styles for slides */
.first-image.show {
  opacity: 1; }

.second-image.show {
  opacity: 1; }

.third-image.show {
  opacity: 1; }

#menu section {
  margin-top: 3em; }

#menu .menurow .one-third.column {
  width: 40%;
  margin-top: 2em; }
  @media (max-width: 767px) {
    #menu .menurow .one-third.column {
      width: auto;
      margin: 0 auto; } }

#menu .menurow .two-thirds.column {
  width: 52%;
  margin-top: 2em; }
  @media (max-width: 767px) {
    #menu .menurow .two-thirds.column {
      margin: 0 auto; } }

#menu h4 {
  margin-top: 1.25em; }

#menu h4:first-child {
  margin-top: 0; }

#menu p.italicserif-brown {
  margin-top: 1.5em; }

#menu p.special {
  margin-top: 0; }

@media (max-width: 767px) {
  #menu p.italicserif-brown {
    text-align: center;
    padding-top: 2em; } }

#contact address {
  font-weight: 600;
  font-style: normal; }

@media (min-width: 768px) {
  #contact .map {
    width: 95%;
    position: relative;
    bottom: 5px; }
  #contact .info-line {
    position: absolute;
    margin-top: 1em;
    bottom: 10%;
    width: 100%; }
  #contact li {
    font-size: 1em;
    line-height: 1.5em; }
  #contact .one-half.column:first-child {
    width: 60%; }
  #contact .one-half.column:last-child {
    width: 32%; }
  #contact .control {
    padding-left: 0; } }

@media (max-width: 767px) {
  #contact ul {
    padding-left: 0; } }

@media (min-width: 850px) {
  #contact .info-line {
    position: absolute;
    margin-top: 1em;
    bottom: 0; } }

@media (min-width: 950px) and (max-width: 1050px) {
  #contact .map {
    width: 90%; } }

@media (min-width: 1051px) and (max-width: 1149px) {
  #contact .map {
    width: 80%; }
  #contact .one-half.column:first-child {
    width: 46%; }
  #contact .one-half.column:last-child {
    width: 46%; } }

@media (min-width: 1150px) {
  #contact .map {
    width: 70%; }
  #contact .one-half.column:first-child {
    width: 46%; }
  #contact .one-half.column:last-child {
    width: 46%; } }

#more-info section {
  margin-top: 4em;
  margin-bottom: 4em; }

#more-info h6 {
  text-transform: uppercase;
  font-size: 1.125em;
  font-weight: 700;
  margin-bottom: 0;
  margin-top: 0;
  line-height: 1em; }

#more-info p {
  margin-top: .2em;
  margin-bottom: 1.3em; }

@media (max-width: 767px) {
  #more-info .column {
    padding: 0 1em; } }

/*BREAKFAST PAGES*/
/* (breakfast1) -------------------*/
@media (min-width: 768px) {
  #breakfast-omellete .two-thirds.column {
    max-width: 58%;
    margin-right: 4%; }
  #breakfast-omellete .feature-box {
    max-width: 450px; }
  #breakfast-omellete .padding-T {
    padding-top: 5em; }
  #breakfast-omellete .one-third.column {
    width: 37%; }
  #breakfast-omellete .illustration-placement1 img {
    display: none; }
  #breakfast-omellete .illustration-placement2 {
    position: relative; }
    #breakfast-omellete .illustration-placement2 img {
      position: absolute;
      width: 35%;
      top: -50px;
      right: 0;
      margin-right: 1.5em; } }

@media (min-width: 768px) and (max-width: 910px) {
  #breakfast-omellete .illustration-placement2 {
    position: relative; }
    #breakfast-omellete .illustration-placement2 img {
      position: absolute;
      width: 40%;
      top: -25px;
      right: 0; } }

@media (max-width: 767px) {
  #breakfast-omellete .two-thirds.column {
    width: auto; }
  #breakfast-omellete .feature-box {
    border: none; }
  #breakfast-omellete .inset {
    padding: 0; }
  #breakfast-omellete .padding-T {
    padding-top: 0; }
  #breakfast-omellete .one-third.column {
    width: auto; }
  #breakfast-omellete .illustration-placement1 img {
    width: 30%;
    margin-bottom: 1em; }
  #breakfast-omellete .illustration-placement2 img {
    display: none; } }

/*(breakfast2) ----------------------*/
@media (min-width: 768px) {
  #breakfast-classic-wraps .one-third.column {
    margin-right: 0;
    width: 33%; }
  #breakfast-classic-wraps .two-thirds.column {
    margin-right: 0;
    width: 60%; }
  #breakfast-classic-wraps .padding-R {
    border-right: 2px dotted #412415; }
  #breakfast-classic-wraps .padding-T {
    border-top: 2px dotted #412415; } }

@media (max-width: 767px) {
  #breakfast-classic-wraps .one-third.column {
    margin-right: 0;
    width: auto; }
  #breakfast-classic-wraps .two-thirds.column {
    margin-right: 0;
    width: auto; }
  #breakfast-classic-wraps .padding-R,
  #breakfast-classic-wraps .padding-L {
    padding: 0;
    border: none; }
  #breakfast-classic-wraps .padding-T {
    border-top: none; } }

/*(breakfast3) ----------------------*/
@media (min-width: 768px) {
  #breakfast-pancake-sides .inset {
    padding: 1em 2em; }
  #breakfast-pancake-sides .feature-box.pancake {
    max-width: auto; }
    #breakfast-pancake-sides .feature-box.pancake .one-third.column:first-child {
      width: 40%;
      margin-right: 4%; }
    #breakfast-pancake-sides .feature-box.pancake .one-third.column {
      width: 22%;
      margin-right: 4%; }
    #breakfast-pancake-sides .feature-box.pancake .one-third.column:last-child {
      width: 30%;
      margin-right: 0; } }

@media (max-width: 767px) {
  #breakfast-pancake-sides .feature-box.pancake {
    max-width: auto; }
    #breakfast-pancake-sides .feature-box.pancake .one-third.column {
      width: au;
      margin: 0 auto;
      display: inline; } }

.title-description {
  margin-bottom: 1.5em; }
  .title-description h6 {
    font-family: "Sansita", sans-serif;
    font-style: italic;
    font-size: 1.3125em;
    font-weight: 700;
    display: inline;
    line-height: 0; }
  .title-description .reg {
    font-weight: 300; }
  .title-description p {
    margin-top: 0;
    display: inline; }

@media (max-width: 767px) {
  .title-description {
    margin-bottom: 2em; }
    .title-description h6 {
      font-size: 1.5em; }
    .title-description p {
      margin-top: 1em;
      display: block; } }

.feature-box {
  border: 2px dotted #4c2c1b;
  height: auto; }
  .feature-box .inset {
    padding: 1.5em 1.75em; }

@media (max-width: 767px) {
  .feature-box {
    max-width: none;
    border: none;
    height: auto; }
    .feature-box .inset {
      padding: 0; } }

/*different container paddings at desktop*/
@media (min-width: 768px) {
  .padding-R {
    padding-right: 3%; }
  .padding-L {
    padding-left: 3%; }
  .padding-T {
    padding-top: 6%; }
  .padding-B {
    padding-bottom: 4%; } }

/*div container top & bottom paddings at mobile*/
@media (max-width: 767px) {
  .mobile-div-top-bottom-pad {
    padding-bottom: 2.5em; }
  .mobile-div-top-bottom-pad:after {
    content: "";
    display: block;
    width: 100px;
    margin-top: 2.5em;
    margin-bottom: 0;
    margin-right: auto;
    margin-left: auto;
    border-bottom: 3px dotted rgba(78, 48, 25, 0.5); } }

/*turns 1 column to 2 column in mobile*/
@media (max-width: 767px) {
  .col1-to-col2-mobile-only {
    -webkit-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em; }
    .col1-to-col2-mobile-only div.box {
      -webkit-column-break-inside: avoid;
      break-inside: avoid;
      page-break-inside: avoid; } }

/*turns 2 column to 1 column in mobile*/
@media (min-width: 768px) {
  .col2-to-col1-in-mobile {
    -webkit-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em; }
    .col2-to-col1-in-mobile div.box {
      -webkit-column-break-inside: avoid;
      break-inside: avoid;
      page-break-inside: avoid; } }

/*turns 3 column to 1 column in mobile*/
@media (min-width: 768px) {
  .col3-to-col1-in-mobile {
    -webkit-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em; }
    .col3-to-col1-in-mobile div.box {
      -webkit-column-break-inside: avoid;
      break-inside: avoid;
      page-break-inside: avoid; } }

/*keeps 2 columns in desktop & mobile*/
.col2-desktop-and-mobile {
  -webkit-column-count: 2;
  column-count: 2;
  -webkit-column-gap: 1.5em;
  column-gap: 1.5em; }
  .col2-desktop-and-mobile div.box {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    page-break-inside: avoid; }

/*keeps 3 columns in desktop & mobile*/
.col3-desktop-and-mobile {
  -webkit-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 1.5em;
  column-gap: 1.5em; }
  .col3-desktop-and-mobile div.box {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
    page-break-inside: avoid; }

/*styling for menu item and descriptions*/
.menu-item-bold {
  color: #583b2c; }
  .menu-item-bold h6 {
    font-size: .9em;
    margin-top: 0;
    margin-bottom: .2em; }
  .menu-item-bold .reg {
    font-weight: 300; }
  .menu-item-bold .smallcap {
    font-size: .625em;
    font-weight: 400;
    font-style: normal;
    line-height: 0; }
  .menu-item-bold p {
    font-family: "Merriweather", serif;
    font-size: .75em;
    margin: 0 0 1em 0;
    line-height: 1.3em; }
  .menu-item-bold .price {
    font-family: "Merriweather", serif;
    font-size: .75em; }

@media (max-width: 767px) {
  .menu-item-bold h6 {
    font-size: 1em; }
  .menu-item-bold .reg {
    font-weight: 300; }
  .menu-item-bold .smallcap {
    font-size: .725em; }
  .menu-item-bold p {
    font-size: 1em; }
  .menu-item-bold .price {
    font-size: 1em; } }

.menu-item-thin {
  color: #583b2c;
  font-size: .9em;
  margin: 0 0 .2em 0;
  font-weight: 300;
  line-height: 1.5em; }
  .menu-item-thin h6 {
    color: #583b2c;
    font-size: .9em;
    margin: 0 0 .2em 0;
    font-weight: 300;
    line-height: 1.5em; }
  .menu-item-thin p {
    font-family: "Merriweather", serif;
    font-size: .75em;
    margin: 0;
    line-height: 1.3em; }

@media (max-width: 767px) {
  .menu-item-thin {
    font-size: 1em; }
    .menu-item-thin h6 {
      font-size: 1em; }
    .menu-item-thin p {
      font-size: 1em; } }

.description-or-price {
  color: #583b2c;
  font-family: "Merriweather", serif;
  font-size: .80em;
  font-weight: 400; }
  @media (max-width: 767px) {
    .description-or-price {
      font-size: 1em; } }

.smallcap {
  font-size: .625em;
  color: #583b2c;
  font-weight: 400;
  font-style: normal;
  line-height: 0; }
  @media (max-width: 767px) {
    .smallcap {
      font-size: .825em; } }

.title-regular-no-descrip {
  font-family: "Sansita", sans-serif;
  color: #583b2c;
  font-style: italic;
  font-size: 1.3125em;
  font-weight: 400;
  margin-bottom: 1em;
  margin-top: 0; }
  @media (max-width: 767px) {
    .title-regular-no-descrip {
      font-size: 1.5em; } }

/*styling for code line at bottom*/
.egg-options {
  font-family: "Merriweather", serif;
  font-size: .62em;
  color: #583b2c; }
  @media (max-width: 767px) {
    .egg-options {
      font-size: .825em; } }

/*MEALS PAGES*/
/* (meals1) -------------------*/
@media (min-width: 768px) {
  #menu #meals-islandfavs .one-third.column {
    width: 36%;
    margin-right: 4%; }
  #menu #meals-islandfavs .two-thirds.column {
    width: 59%; } }

/*(meals2) ----------------------*/
@media (min-width: 768px) {
  #menu #meals-crepes .two-thirds.column {
    margin-right: 4%;
    width: 68%; }
  #menu #meals-crepes .one-third.column {
    margin-right: 0;
    width: 28%; }
  #menu #meals-crepes .illustration-placement1 img {
    float: right;
    margin: 0 1em 2em 0;
    width: 20%; } }

@media (min-width: 1050px) and (max-width: 1500px) {
  #menu #meals-crepes .illustration-placement1 img {
    float: right;
    margin: -1em 5em 2em 0;
    width: 17%; } }

@media (max-width: 767px) {
  #menu #meals-crepes .illustration-placement1 img {
    width: 35%;
    margin-bottom: 1em; } }

/*(meals3) ----------------------*/
@media (min-width: 768px) {
  #meals-burgers-sand .two-thirds.column {
    margin-right: 2%;
    width: 62%; }
  #meals-burgers-sand .one-third.column {
    margin-right: 0;
    width: 32%; } }

/*(meals4) ----------------------*/
@media (min-width: 768px) {
  #meals-salad-soup .two-thirds.column {
    margin-right: 1%;
    width: 60%; }
  #meals-salad-soup .one-third.column {
    margin-right: 0;
    width: 32%; }
  #meals-salad-soup .padding-L {
    border-left: 2px dotted #412415; } }

/*ACAI BOWL PAGE*/
@media (min-width: 768px) {
  #acaibowls .two-thirds.column {
    margin-right: 0;
    width: 64%; }
  #acaibowls .one-third.column {
    margin-right: 4%;
    width: 30%; }
  #acaibowls .illustration-placement2 img {
    width: 70%;
    margin: 0 0 1em 2em; } }

@media (max-width: 767px) {
  #acaibowls .illustration-placement2 img {
    width: 40%;
    margin-bottom: 1em; } }

@-webkit-keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fadein {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

.fadein {
  -webkit-animation: fadein 1s linear forwards;
  animation: fadein 1s linear forwards;
  opacity: 0; }
  .fadein.delay1 {
    -webkit-animation-delay: .6s;
    animation-delay: .6s; }
  .fadein.delay2 {
    -webkit-animation-delay: 1s;
    animation-delay: 1s; }
  .fadein.delay3 {
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s; }

@-webkit-keyframes slideinleft {
  0% {
    -webkit-transform: translatex(-20px);
    transform: translatex(-20px);
    opacity: 0; }
  100% {
    -webkit-transform: translatex(0px);
    transform: translatex(0px);
    opacity: 1; } }

@keyframes slideinleft {
  0% {
    -webkit-transform: translatex(-20px);
    transform: translatex(-20px);
    opacity: 0; }
  100% {
    -webkit-transform: translatex(0px);
    transform: translatex(0px);
    opacity: 1; } }

.slideinleft {
  -webkit-animation: slideinleft .8s ease-out forwards;
  animation: slideinleft .8s ease-out forwards;
  opacity: 0;
  -webkit-animation-delay: 1.75s;
  animation-delay: 1.75s; }

@media (max-width: 767px) {
  @-webkit-keyframes slideintop {
    0% {
      -webkit-transform: translatey(-10px);
      transform: translatey(-10px);
      opacity: 0; }
    100% {
      -webkit-transform: translatey(0px);
      transform: translatey(0px);
      opacity: 1; } }
  @keyframes slideintop {
    0% {
      -webkit-transform: translatey(-10px);
      transform: translatey(-10px);
      opacity: 0; }
    100% {
      -webkit-transform: translatey(0px);
      transform: translatey(0px);
      opacity: 1; } }
  .slideintop {
    -webkit-animation: slideintop .8s ease-out forwards;
    animation: slideintop .8s ease-out forwards;
    opacity: 0;
    -webkit-animation-delay: 1.75s;
    animation-delay: 1.75s; }
  @-webkit-keyframes slideinbottom {
    0% {
      -webkit-transform: translatey(0px);
      transform: translatey(0px);
      opacity: 0; }
    100% {
      -webkit-transform: translatey(-50px);
      transform: translatey(-50px);
      opacity: 1; } }
  @keyframes slideinbottom {
    0% {
      -webkit-transform: translatey(0px);
      transform: translatey(0px);
      opacity: 0; }
    100% {
      -webkit-transform: translatey(-50px);
      transform: translatey(-50px);
      opacity: 1; } }
  .slideinbottom {
    -webkit-animation: slideinbottom .8s ease-out forwards;
    animation: slideinbottom .8s ease-out forwards;
    opacity: 0;
    -webkit-animation-delay: 1.75s;
    animation-delay: 1.75s; } }

section {
  opacity: 0;
  -webkit-transition: all .7s linear;
  -o-transition: all .7s linear;
  transition: all .7s linear; }
  section.active {
    opacity: 1; }

/*(drinks1) ----------------------*/
@media (min-width: 768px) {
  #drinks-coffee .one-third.column {
    margin-right: 0;
    width: 33%; }
  #drinks-coffee .two-thirds.column {
    margin-right: 0;
    width: 60%; }
  #drinks-coffee .padding-R {
    border-right: 2px dotted #412415; }
  #drinks-coffee .padding-T {
    border-top: 2px dotted #412415; }
  #drinks-coffee .padding-T-no-dotted-line {
    padding-top: 5%; }
  #drinks-coffee .illustration-placement img {
    width: 22%;
    padding-left: 2em; }
  #drinks-coffee .side-by-side-div:after {
    display: table;
    content: '';
    clear: both; }
  #drinks-coffee .side-by-side-div .title-description {
    float: left;
    width: 50%; } }

@media (max-width: 767px) {
  #drinks-coffee .one-third.column {
    margin-right: 0;
    width: auto; }
  #drinks-coffee .two-thirds.column {
    margin-right: 0;
    width: auto; }
  #drinks-coffee .padding-R {
    border: none; }
  #drinks-coffee .padding-T {
    padding-top: 6%; }
  #drinks-coffee .illustration-placement img {
    margin-bottom: 1em;
    width: 25%; } }

/*(drinks2) ----------------------*/
@media (min-width: 768px) {
  #drinks-smoothies .one-third.column {
    margin-right: 4%;
    width: 30%; }
  #drinks-smoothies .column:last-child {
    margin-right: 0; } }

/* swipper overides */
@media (max-width: 767px) {
  #about-us-thestory,
  #about-us-whyus,
  #about-us-theowner {
    display: block !important; }
  #breakfast-omellete,
  #breakfast-classic-wraps,
  #breakfast-pancake-sides,
  #meals-islandfavs,
  #meals-crepes,
  #meals-burgers-sand,
  #meals-salad-soup,
  #drinks-coffee,
  #drinks-smoothies {
    display: block !important; } }