html, body { height: 100%; }

body {
  font-family: 'century gothic';
  color: #3f3830;
  background: #fff;
  font-size: 15px;
  background-repeat: repeat;
  /* background-image: url('./img/background.jpg'); */
}

section { min-height: 100%; }
section > div { margin-left: 250px; padding: 1em; font-size: 24px; line-height: 1.5em; }
.syn-small section > div { margin-left: 0; }
h1 { font-size: 2em; line-height: 1em; }

.center { text-align: center; }
.text-shadow { text-shadow: 1px 1px 1px black; }


#menubar { 
  position: fixed; 
  top: 0;
  left: 50px;
  height: 100%;
  background: linear-gradient(to bottom, rgba(38,26,14,0.80) 0%,rgba(38,26,14,0.6) 60%, rgba(38,26,14,0) 100%);
  min-width: 200px;
  max-width: 200px;
  color: white;
  text-align: center;
}
#menubar > div:not(.syn-hamburger) { padding: 0 2em; }
#menubar a { color: white; text-decoration: none; }
#menubar > #language-selectors { font-weight: 600; padding: .3em 0; border-bottom: solid 1px #999;; }
#menubar > #language-selectors > a { margin: .4em; cursor: pointer; }
#menubar img[alt="logo"] { padding: 2em 0; }
#menubar #login { display: block; line-height: 2em; margin-bottom: 2em; padding: .3em; }
#menubar #login img { vertical-align: middle; margin-right: .7em; }
#menubar #login:hover { background: #3f3830; }
#menubar img[alt="login"] { stroke: white; height: 24px; }
#menubar #menu { list-style: none; padding: 0; }
#menubar #menu > li { padding: .4em 0; font-size: 1.2em; }
#menubar #menu > li:hover { background: #3f3830; }
#menubar #social { position: absolute; bottom: 1em; text-align: center; width: 100%; transition: bottom .3s; }
#menubar #social a { transition: all 0.4s; margin: 0 .2em; }
#menubar #social a:hover { opacity: .5; }
#menubar #social img { box-shadow: 3px 3px 5px #888888; width: 18px; background: white; }
.syn-small #menubar { position: fixed; min-width: 100%; left: 0; height: 60px; background-color: rgba(38,26,14,0.8); z-index: 100; text-align: left; }
.syn-small #menubar > * { position: absolute; padding: 0; }
.syn-small #menubar img { max-height: 60px; padding: .4em; }
.syn-small #menubar img[alt="logo"] { padding: .3em; }
.syn-small #menubar .syn-hamburger { right: 1em; top: 1em; padding: 0; }
.syn-small #menubar .syn-hamburger { right: 1em; top: 1em; padding: 0; }
.syn-small #menubar .syn-hamburger > button { background: transparent; border: solid 1px white; color: white; font-size: 20px; }
.syn-small #menubar .syn-hamburger #menu { right: 1em; padding: 1em; position: fixed; background: rgba(0, 0, 0, .6); padding: 1em; }
.syn-small #menubar #login { left: 80px; top: 10px; }
.syn-small #menubar #language-selectors { left: 200px; top: 14px; border: none; }
.syn-small #menubar #social { display: none; }



/* img[alt="spoons"] { position: relative; top: 0; right: 10%; }
.syn-small img[alt="spoons"] { display: none; } */

#scroll-up { position: fixed; bottom: 1em; left: 1em; height: 1.3em; width: 1.3em; background: #3f3830; font-size: 24px; border-radius: 100%; padding-left: 0.15em; transition: bottom .3s; }
#scroll-up img { height: 1em; }
.register-button {
  display: inline-block;
  text-decoration: none;
  color: white;
  text-align: center;
  padding: .4em 3em;
  font-size: 16px;
  line-height: 1.5em;
  background: rgba(37, 25, 13, 0.6);
  border: solid 5px transparent;
  border-left: none;
  border-right: none;
  border-image: url('img/colorbar1.jpg') 5 stretch;
  transition: background .3s;
}
.register-button:hover { background: #79ad18; font-style: italic; }
.mail-button { display: inline-block; text-decoration: none; font-size: 16px; color: white; background: rgba(0, 0, 0, .6); line-height: 3em; padding: .7em 3em; box-shadow: 1px 1px 4px black; }
.mail-button:hover { background: rgba(0, 0, 0, .4); }

.subscribe-button { text-decoration: none; color: white; background: rgba(0, 0, 0, .6); line-height: 3em; padding: .5em 3em; box-shadow: 1px 1px 4px black; }
.subscribe-button:hover { background: rgba(0, 0, 0, .4); }


#main syn-carousel { margin-left: 20%; zoom: .95; }
.cutting-board { background: url('img/cutting-board.png') no-repeat center; }
.syn-large #main { padding-top: 10vh; }
.syn-large #main .register-button { margin: 3rem 20%; }
.syn-large #main > div { min-height: 100%; }
.syn-large #main > div > div { max-width: 80%; margin: auto; }


#promo-extra { display: flex; align-items: center; }
#promo-extra > div { font-size: 1.2em; padding-top: 0; }
#promo-extra h1 { font-size: 1.6em; margin: 0.1em 0; }
#promo-extra p { margin: 0.6em 0; }
#promo-extra img { max-width: 100%; }
#promo-extra a { color: inherit; }

#promo { padding-top: 10%; }
#promo .register-button { margin-top: 2em; }

#adhoc-promo { margin-bottom: 2rem; padding: 1rem; font-size: 1rem; border: dotted 1px #999; background: #404040; color: white; }
#adhoc-promo h1 { color: darkorange; font-size: 1.6rem; }
#adhoc-promo p { white-space: pre-wrap; }


#motos > div { padding-top: 0; }
#motos .flex-row { align-items: flex-start; }
#motos .flex-row > .flex { padding-top: 5%; }
#motos syn-carousel > div { text-align: center; width: 100%; }


#features > div { font-size: 20px; }
#features > div > header { text-align: center; color: #4b2e15; }
#features syn-tabs > syn-tabs-header { font-size: 24px; font-weight: bold; }
#features syn-tabs > syn-tabs-header > header:hover { text-shadow: 1px 1px 1px lightgreen; }
#features syn-tabs > syn-tab > div { columns: 2; background: rgba(33, 19, 6, .8); color: #f3ebe6; padding: 1.9em; min-height: 500px; font-size: 16px; }
.syn-small #features syn-tabs > syn-tab > div { columns: 1; }
#features img[alt="acorn"] { height: 20px; }
#features h1 { text-align: right; }
#features h3 { margin: .6em 0 .2em; border-bottom: dashed 1px; }
#features .mail-button { margin-top: 1em; }
#features .management { min-height: 6rem; }


#demo h1 { text-align: right; }
#demo .demo-video { width: 840px; height: 490px; margin-top: 2em; }
.syn-small #demo .demo-video { width: 320px; height: 200px; }

/* #pros { background: #211306; color: #ddd; } */
#pros > div .flex-row { font-size: 20px; margin-top: 5%; }
#pros > div .flex-row li { padding: .2em 0; }
#pros ul { list-style-image: url('img/adv-boolet.png'); columns: 2; }
#pros ul li { margin-left: 1.1rem; }
#pros img[alt="tablet"] { width: 800px; }
.syn-small #pros img[alt="tablet"] { max-width: 100%; }



#pricing > div { padding: 2% 0; }
#pricing .pricing-table { font-family: Arial, Helvetica, sans-serif; line-height: 1em; font-size: 0; text-align: center; }
@media screen and (min-width: 1200px) and (max-width: 1500px) { #pricing .pricing-table { padding: 2% 12%; } }
.pricing-table > div { width: 238px; display: inline-block; background: url('img/pricing1.png') no-repeat ; text-align: center; font-size: 24px; background-color: white; vertical-align: top; min-height: 850px; }
.pricing-table > div.recommend { background: url('img/pricing2.png') no-repeat #3a3c3f; }
.pricing-table > div:not(:last-child) { border-right: solid 1px #ddd; }
.pricing-table > div > h2 { color: white; font-size: 18px; margin-top: 50px; font-weight: normal; }
.pricing-table > div > .price { color: #FFA32B; margin-top: 90px; font-size: 28px; }
.pricing-table > div > .price sup { font-size: 50%; }
.pricing-table > div label { color: #888; font-size: 12px; display: block; margin-top: 24px; }
.pricing-table > div > .content { color: #999; padding: 60px 0 0; line-height: 130%; font-size: 14px; }
.pricing-table > div:first-child > .content { padding-top: 66px; }
.pricing-table > div > .content ul { list-style: none; padding: 0; }
.pricing-table > div > .content ul > li { color: #555; height: 40px; }
.pricing-table > div > .content ul > li:nth-child(2n) { background: #ddd; }
.pricing-table > div.recommend > .content ul > li { color: #ddd; }
.pricing-table > div.recommend > .content ul > li:nth-child(2n) { background: #555; }
.pricing-table > div > .content ul > li > strong { color: #555; margin-bottom: 16px; font-size: 15px;}
.pricing-table > div.recommend > .content ul > li > strong { color: #ddd;  }
.pricing-table > div > .content ul > li > strong::before { content: ' ' }
.pricing-table > div > .content > div { margin-top: 3em; }
#pricing > div > p { font-size: 15px; text-align: center; }




#testimonials #testimonial-content { background: rgba(38,26,14,0.6); font-size: 14px; }
#testimonials #testimonial-say { max-width: 50%; color: #ddd; line-height: 1.6em; font-size: 1.1em; text-align: justify; padding: 1em 1em 0; align-self: flex-start; }
#testimonials #testimonial-items { text-align: right; padding: .2em 1em; height: 300px; overflow-y: auto; }
#testimonials #testimonial-items img { opacity: .3; transition: opacity .3s; cursor: pointer; margin: 2px; }
#testimonials #testimonial-items img.active { opacity: 1; }
#testimonials #testimonial-caption { background-color: #261a0e; padding: 1em; text-align: right; font-size: 20px; color: #aaa; }
#testimonials #testimonial-caption a { color: white; }
#testimonials #testimonial-caption i { opacity: .6; font-size: smaller; }




footer { position: relative; }
footer a { color: white; text-decoration: none; }
footer i { color: white; font-size: smaller; }
footer > div:last-child { background-color: rgb(38, 26, 14); padding: 1em; }
footer > div:last-child img { max-height: 2em; }
footer > div:first-child { background-color: rgb(63, 56, 48); padding: 1em; padding-left: 260px; text-align: center; line-height: 200%; }
.syn-small footer > div:first-child { padding-left: 0; }



.popup { cursor: pointer; display: inline-block; margin-right: 2em; text-align: left; }
.popup > ul { display: none; list-style: none; background-color: rgba(38,26,14,0.80); color: white; border-radius: 30px 0px; padding: 30px 5px; max-width: 20em; }
.popup.active > ul { display: block; position: absolute; bottom: 100px; }
.popup.active > ul > li { margin-bottom: .7em; }



.syn-phone syn-carousel { display: none !important; }
.syn-phone img[alt="pc"] { display: none; }
.syn-phone img[alt="stats"] { display: none; }
.syn-phone img[alt="smartphone"] { max-width: 90%; min-width: 280px; }
.syn-phone img[alt="allergens"] { max-width: 90%; min-width: 280px; }
.syn-phone h1 { font-size: 1.8em; }
.syn-phone #main { padding-top: 1em; }
.syn-hamburger > ul > li { display: block !important; }






.theme1 { background: whitesmoke; color: #404040; }
.theme1 h1 { text-shadow: 1px 1px 1px #c0c4b9; color: #404040; }
.theme1 h2 { color: #bbb; }

.theme2 { background: #404040; color: white; }
.theme2 h1 { color: darkorange; line-height: 3.5rem; }
.theme2 strong { color: darkorange; font-weight: normal; }

.theme3 { background: darkorange; color: #4b2709; }
.theme3 h1, .theme3 h2 { text-shadow: 1px 1px 1px #311805; }


section > div { padding: 2% 5%; }
#promo img[alt="pc"] { height1: 340px; padding: 1rem; }
#promo { text-align: center; }
#promo h2 { display: none; }
#promo strong { color: #AF003B; font-weight: normal; }
#pros .flex-row > .flex:first-child { max-width: 550px; }
#features h1 { display: none; }
#features syn-tabs { margin-top: 1em; }
#features syn-tabs > syn-tab > div { color: inherit; background: transparent; padding: 1em; }
#features syn-tabs > syn-tab > div > div { display: inline-block; }
#features syn-tabs > syn-tab > .flex-row > div:first-child { max-width: 50%; }
/* #features syn-tabs > syn-tab > .flex-row > img { margin: auto; } */
#features > div > header { color: inherit; }
#features img[alt="allergens"] { max-width: 360px; }
.syn-small #features img[alt="allergens"] { max-width: 30%; }
#pricing h1 { display: none; }
#supporters > div > div { text-align: center; }
#supporters > div > div a { text-decoration: none; }
#supporters > div > div img { margin: 1rem; }



#announcement > .flex-row > div { text-align: center; padding: 2rem; }
#announcement img { max-height: 90vh; max-width: 80vw; }
#announcement a { display: block; text-align: center;  margin: 1rem auto; max-width: 30rem; }