/* ----------------------------------------------------------------
	Canvas: Cafe
-----------------------------------------------------------------*/

:root {
	--cnvs-themecolor: #52705a;
	--cnvs-themecolor-rgb: 82, 112, 90;
	--cnvs-body-font: 'Lato', sans-serif;
	--cnvs-primary-font: 'Faustina', serif;
	--cnvs-secondary-font: 'Homemade Apple';
}

#header-wrap { background: #f8f8ee; }

.currency{
    font-size: 0.55em;
    vertical-align: top;
    margin-right: 2px;
}
.comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    max-width: 720px;
    margin: 0 auto;
}
.price-card{
    position: relative;
    min-height: 250px;
    padding: 42px 30px;
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.price-card.ours{
    background: var(--cnvs-themecolor);
    color: #ffffff;
    box-shadow: 0 20px 45px rgba(48, 74, 57, 0.18);
}
.price-card.traditional{
    background: #ffffff;
    border: 1px solid #e5e5df;
}

.saving {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 54px auto 28px;
}

.saving-number {
  font-family: var(--cnvs-primary-font);
  color: var(--cnvs-themecolor);
  font-size: 72px;
  line-height: 1;
  letter-spacing: -0.06em;
}

.saving-number span {
  font-size: 0.55em;
}

.saving-copy {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 5px;
}

.saving-copy strong {
  font-size: 18px;
}

.saving-copy span {
  color: #737973;
  font-size: 16px;
}


.family-saving {
  display: inline-flex;
  align-items: center;

  gap: 14px;

  margin-top: 35px;
  padding: 17px 24px;

  color: #202529;
  background: rgba(255,255,255,.75);

  border: 1px solid #e5e8e2;
  border-radius: 15px;

  text-align: left;
}

.family-icon {
  font-size: 27px;
}

.family-saving span {
  display: block;

  margin-bottom: 3px;

  color: #6f7470;
  font-size: 14px;
}

.family-saving strong {
  display: block;

  color: #3f604d;
  font-size: 18px;
}


@media (max-width: 650px) {
  .comparison {
    grid-template-columns: 1fr;
  }

  .price-card {
    min-height: 190px;
  }

  .saving {
    gap: 15px;
    margin-top: 40px;
  }

  .saving-number {
    font-size: 58px;
  }

  .saving-copy strong {
    font-size: 16px;
  }
  .family-saving {
    width: 100%;
    max-width: 390px;
    box-sizing: border-box;
  }
}

.dark #wrapper,
.dark #content,
.dark .section.dark,
.dark .css3-spinner { background-color: #000 }

@media (min-width: 992px) {
	.dark .dots-menu .page-menu-item > a { background-color: rgba(255,255,255,0.5) }
	.dark .dots-menu .page-menu-item:hover > a { background-color: rgba(255,255,255,0.9) }

	.dark .dots-menu.dots-menu-border .page-menu-item > a {
		border-color: rgba(255,255,255,0.4);
	}

	.dark .dots-menu.dots-menu-border .page-menu-item > a:hover {
		border-color: rgba(255,255,255,0.7);
	}
}

.heading-block h3 {
	text-transform: none;
	font-size: 42px;
	letter-spacing: 2px;
	font-weight: 400;
}

.before-heading {
	/*text-transform: uppercase;*/
	font-style: normal;
	/*letter-spacing: 6px;*/
	font-size: 22px;
}

.dark .section.dark p { color: #BBB; }

.dark .section.dark p.text-muted { color: #666; }

a.gallery-img {
	overflow: visible;
	width: 70%;
}

a.gallery-img.fleft { margin-top: -60px; }

.fslider p {
	font-family: var(--cnvs-primary-font);
	font-weight: 400;
	font-size: 18px;
}

.flex-control-nav {
	top: auto;
	bottom: 14px;
	right: 20px;
}

.dark .fslider p { color: #BBB !important; }

.food-menu:not(:first-child) { margin-top: 20px; }

.menu-list span {
	font-family: var(--cnvs-secondary-font);
	letter-spacing: 2px;
	font-size: 18px;
	color: #444;
}

.dark .menu-list span { color: #DDD; }

.menu-list h5 {
	color: #AAA;
	font-family: var(--cnvs-body-font);
	letter-spacing: 2px;
	font-weight: 300;
	font-size: 17px;
}

.dark .menu-list h5 { color: #777; }

.menu-price h3 {
	padding-top: 8px;
	font-size: 22px;
	letter-spacing: 1px;
	font-family: 'source Sans Pro';
}

.form-control:not(.not-dark):active,
.form-control:not(.not-dark):focus,
.sm-form-control:not(.not-dark):active,
.sm-form-control:not(.not-dark):focus,
.form-control:not(.not-dark),
.sm-form-control:not(.not-dark) {
	margin-bottom: 10px;
	border-radius: 2px !important;
}

.dark .form-control:not(.not-dark):active,
.dark .form-control:not(.not-dark):focus,
.dark .sm-form-control:not(.not-dark):active,
.dark .sm-form-control:not(.not-dark):focus,
.dark .form-control:not(.not-dark),
.dark .sm-form-control:not(.not-dark) {
	background-color: #222;
	border: 1px solid #111;
}

.dark .form-control:active,
.dark .form-control:focus {
	border-color: #999;
	box-shadow: none;
	background-color: #FFF;
}

.button {
	font-weight: 300 !important;
	font-size: 14px !important;
}

.button.button-black {
	background-color:  #333 !important;
	border: 0;
}
.button:hover.button-black { color: #CCC !important; }

.css3-spinner > div {
	margin-top: -32px;
	margin-left: -32px;
	width: 62px;
	height: 62px;
	-webkit-animation: none;
	animation: none;
}

.is-expanded-menu.overlay-menu .primary-menu.dark {
	background-color: rgba(0,0,0,.85)
}

@media (max-width: 991px) {
	#header.dark.transparent-header {
		background-color: #000 !important;
	}

	#page-menu { display: none; }
}