/* version:1.0.1 */

* { box-sizing: border-box; }
.flex-row { display: flex; align-items: center;flex-wrap:wrap }
.flex-column { display: flex; flex-flow: column; flex-wrap:wrap }
.flex {flex: 1;}

:root {
  scroll-behavior: smooth; 
}

.container{ max-width: 1200px; margin: 0 auto; padding: .3em 1em; }
.menu{padding: 5px 15px;}
a{text-decoration:none}
p{line-height:1.5em}

body {font-family: 'Comfortaa', cursive; font-size: 16px;margin: 0; font-weight:300}

h1{font-size:2em; text-align:center; margin-top:2em; line-height:1.7em}
h2{font-size:2.5em; font-weight:100}
h3{font-size:1.5em; text-align:left; line-height:1.4em; font-weight:100; text-decoration-color:#333}
h5{text-align:center; width:100%; font-size:1.5em; font-weight:300; text-decoration:underline; text-decoration-color:#333}

.side-text{width:auto; max-width:90%; margin:0 auto; flex:1; padding:1em}
.side-img{width:500px; max-width:100%; overflow:hidden;}
.side-img img{width:100%;}
.square{width:300px; height:300px; border:black solid 8px; padding:.5em; margin:1em}
.al-left{ justify-content:flex-start;}
.al-left h1, .al-left p{ text-align:left}
.al-right{ justify-content:flex-end;}
.al-right h1, .al-right p{ text-align:right}
.white h1, .white p{color:white}
.white .square{border-color:white}
.square h1{margin-top:20px}
.se-sign{width:100px; opacity: .4;}
.al-left .se-sign{margin-left:165px; }
.al-right .se-sign{margin-left:15px; }

#home .square{margin-top:250px}

#consulting ul{padding-inline-start: 20px; line-height:2em; font-size:1em;}
#consulting ul li{ list-style: none;}
#consulting ul li::before{ content: ''; display: inline-block; height: 1.5em; width: 2em; background-image: url(../imgs/square.f6725c.svg); background-repeat:no-repeat; background-size: 1.5em;
  background-position-y: 8px; position: relative; bottom: -.5em; background-size:6px}

#milestones .flex-row{justify-content:center; margin:5em 0}
.milestone{margin:1em; width:350px; max-width:90%; align-self: flex-start;}
.mls-date{color:#333; font-size:12px; text-decoration:underline; text-align:center; margin-bottom:0}
.mls-text{text-align:center; font-size:12px; margin-top:5px}
.mls-text span{font-size:14px; font-weight:600}
.line{width:100%; background:black; height:1px; position:relative; top:20px}

/* animate */
.sq-sm{border:black solid 5px; padding:.5em;width:40px; height:40px; margin:0 auto}
/* .milestone:hover .sq-sm{animation-name: ckw; animation-duration: 3s;}

  @keyframes ckw {
    0% {transform:translateX(0);}
    100% {transform:translateX(160px);}
} */

section{padding:2em 0 1em 0; align-items:center;}

header { background:rgba(255, 255, 255, .8); position:sticky; top:0; z-index: 100; width:100%; box-shadow: 0 2px 5px rgb(0 0 0 / 10%); }
nav{align-self:flex-end; text-align:center}
nav > ul > li { margin: 0 .3rem; }
nav a, .submenu li{cursor:pointer} 

.logo img{height:80px}


.syn-large .syn-hamburger > ul > li{font-size:14px; padding:.5em;  transition: background ease 1s; }
.syn-large .syn-hamburger > ul > li:hover{background:#333;}
.syn-large .syn-hamburger > ul > li > a{color:#231f20; padding:.5em; transition: color ease .7s;}
.syn-large .syn-hamburger > ul > li > a:hover{ color:white}
.arrow-down{width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid black; position: relative; top: 11px; left: 3px;}
.syn-large .syn-hamburger > ul > li > a:hover .arrow-down{border-top-color:white}
.syn-hamburger .submenu{top:20px; text-align:left; background:rgba(0, 0, 0, .8); box-shadow: 0 2px 5px rgb(0 0 0 / 10%);}
.submenu li{line-height:2em; color:white; padding:.5em}
.submenu a { display:block; color: inherit; }
.submenu li:hover{background:#333}

.syn-hamburger button{width: 45px; height: 45px; background: #333; border: none; font-size: 1.5em; color: white; position: absolute; top: 78px; right:15px; cursor:pointer}
.syn-hamburger button:focus {outline:none}

.syn-hamburger-open ul{position:absolute; left:0; top:130px; width:100%; background:rgba(0, 0, 0, .8)}
.syn-hamburger-open ul li a{color:white;}
.syn-hamburger-open ul li{ line-height:2.5em}
.syn-hamburger-open ul.submenu li{line-height:2em}
.syn-hamburger-open li:hover{background:#333}
.syn-hamburger-open ul li .arrow-down{border-top-color:white}
.syn-hamburger-open .submenu{position:unset; text-align:center; width:auto; background:rgba(255, 255, 255, .3)}


#landing{background-color: black}
#landing{height:700px; width:100%; justify-content: center; align-content:center;}
.logo-landing{padding:10px; border:white solid 8px; margin:80px auto;}
.logo-landing img, .static-img img{width:100%}

.logo-container{position:relative; max-width:500px; }
.static-img{position:absolute; top:0; padding:10px; width:100%; border:transparent solid 8px; }

#social-landing{justify-content:center; align-content:center;  padding:1em}
#social-landing a {display:inline-block; margin:0 .5em}

#social-menu{justify-content:center; align-content:center; align-self:end}
#social-menu a {display:inline-block; margin:0 .5em}
#social-menu img {height:30px}


/* =========LANGUAGE SELECTOR===================== */

#language-selector{height: 45px; width: 45px; margin-bottom: 5px; border-radius:0; outline:none; 
  position:absolute; top:0; right:15px; background:black; color:white ; opacity: .8; font-size:12px; cursor:pointer; font-family:'Comfortaa', cursive}

select option{line-height:50px !important; font-size:14px; margin: 15px !important;}

.syn-tablet #language-selector, .syn-small #language-selector{right:65px; top:78px}


#home{height:600px; background-image:url(../imgs/the-chef.af79d4.jpg); background-size:cover; background-repeat:no-repeat; background-position: center top;}
#milestones-head{height:400px; background-image:url(../imgs/chaviar-pasta.b03ecc.jpg); background-size:cover; background-repeat:no-repeat; background-position: right center;}
#awards-photo{height:400px; background-image:url(../imgs/eggs-chaviar.0b1155.jpg); background-size:cover; background-repeat:no-repeat; background-position: center bottom;}
#rules-photo{height:400px; background-image:url(../imgs/dish-serdeles.fee7ab.jpg); background-size:cover; background-repeat:no-repeat; background-position: center right;}
#consulting-photo{height:400px; background-image:url(../imgs/astakos.249403.jpg); background-size:cover; background-repeat:no-repeat; background-position: center right;}
#flavours-photo{height:400px; background-image:url(../imgs/kolokythes.4d30c9.jpg); background-size:cover; background-repeat:no-repeat; background-position: center;}
#contact-photo{height:400px; background-image:url(../imgs/manitaria.2ed000.jpg); background-size:cover; background-repeat:no-repeat; background-position: center;}

#news-photo{height:400px; background-image:url(../imgs/troufa.0c6169.jpg); background-size:cover; background-repeat:no-repeat; background-position: center right;}
#awards{height:400px; background: white;margin: 6em 0}

#kreas-photo{height:500px; background-image:url(../imgs/syntages/kreas.ddcc4d.jpg); background-size:cover; background-repeat:no-repeat; background-position: center;}
#thalassina-photo{height:500px; background-image:url(../imgs/syntages/thalassina-psaria.d9da12.jpg); background-size:cover; background-repeat:no-repeat; background-position: center;}
#salates-photo{height:500px; background-image:url(../imgs/syntages/salates.6e2992.jpg); background-size:cover; background-repeat:no-repeat; background-position: center;}
#ospria-photo{height:500px; background-image:url(../imgs/syntages/ospria.68e303.jpg); background-size:cover; background-repeat:no-repeat; background-position: center;}
#zymarika-photo{height:500px; background-image:url(../imgs/syntages/zymarika-ryzi.7f22f2.jpg); background-size:cover; background-repeat:no-repeat; background-position: center;}
#soupes-photo{height:500px; background-image:url(../imgs/syntages/soupa.b3fa06.jpg); background-size:cover; background-repeat:no-repeat; background-position: center top;}
#xortofagikes-photo{height:500px; background-image:url(../imgs/syntages/hortofagikes.ce7a8a.jpg); background-size:cover; background-repeat:no-repeat; background-position: center;}
#glyka-photo{height:500px; background-image:url(../imgs/syntages/glyko.9bbbf4.jpg); background-size:cover; background-repeat:no-repeat; background-position: center;}
#eortastikes-photo{height:500px; background-image:url(../imgs/syntages/eortastika.77488c.jpg); background-size:cover; background-repeat:no-repeat; background-position: center;}
#poulerika-photo{height:500px; background-image:url(../imgs/syntages/poulerika.72809e.jpg); background-size:cover; background-repeat:no-repeat; background-position: center;}
#pites-photo{height:500px; background-image:url(../imgs/syntages/pites-zymes.fc925b.jpg); background-size:cover; background-repeat:no-repeat; background-position: center;}
#signature-photo{height:500px; background: black;}

.menu-suggestion{background-image:url(../imgs/syntages/menu-background.204bd8.jpg); background-size:cover; background-repeat:repeat; background-position: center;}
.menu-suggestion .container {max-width:1000px; background: white; text-align:center; margin-top:2em}
.menu-suggestion h1 {text-align: center;}
.no-border {border:none !important}
.menu-suggestion h3 {margin:2em; text-align:center; font-weight:bold}
.menu-suggestion h3 a:not(footer a) {text-decoration:none; color:black}
.menu-suggestion h3 span {font-size:.8em; color:#3d3d3d; font-style: italic;}
.square-div{width:10px; height:10px; background:black; margin:0 auto}

.cons-logos, .flavours {justify-content:center}
.cons-logo{width:200px; height:200px; border:6px solid black; margin:1em; padding:1em}
.cons-logo a{width:100%; height:100%; display:block}
.cons-logo img{width:100%; height:auto;}
#cons-logos h3{text-align:center}

#awards .square p{font-size:15px}
.squares-arrow{cursor:pointer}

.flavours-page h3{text-align:center; text-decoration:none; font-size:2em}
.flavours-page p {text-align: center;}
.flavours-text{margin:4em 0}
.flavour{width:300px; height:280px; max-width:90%;cursor: pointer; margin:1em; margin-bottom:3em}
.flavour a{display:block; width:100%; height:100%; color:#333}
.flavour-img{width:100%; height:100%; overflow:hidden; }
.flavour img {top:0; min-width:100%; transition: all ease 1s; max-height:100%}
.flavour:hover img{transform: scale(1.2);}
.flavour h1{margin:0; width:100%; border-top:3px solid black; text-align:center; font-size:1em}
.flavours{justify-content:center}
.flavour .square{overflow:hidden; position:relative; padding:0; margin:0}
.flavour .overlay{background:rgba(255, 255, 255, .6); position:absolute; top:0; left:0; height:300px; width:300px}
.flavour .square h1{width:90%; font-size:1.8em; position:absolute; bottom:0;text-align: right; border-top:none}
.flavour .small{font-size:.8em;}

.category .flavour:hover img{transform: none;}
.category .overlay{background: rgba(0, 0, 0, 0);}
.category .flavour h1{line-height: 1.3em; text-align: left; padding-left:.5em; font-size:1.6em; padding-bottom:.5em; }


.back-btn{width:100%; margin-top:3em;}
.back-btn a{display:block; width:100%; text-align:right; color:black; padding:2em}

.rec-btn{width:450px; max-width:100%; border:5px solid black; padding:1em; margin:1em auto; text-align:center;}
.rec-btn a{color:black; font-weight:600; font-size:1em}

.syntagi > .flex-row:not(.icon){padding:0 2em}
.syntagi .side-text h2{text-align:center; margin-bottom:1em}
.icons{margin-top:4em}
.icons .flex{text-align:center}
.icons .flex p{margin:0; font-size:12px}
.icons .flex .important{margin:0; padding:.3em; font-weight:600; font-size:16px}
.ingredients a, .cooking a {color:black; font-weight: bold; border-bottom: #231f20 1px dotted;}
.ingredients a:hover, .cooking a:hover{font-style: italic;}

.syntagi h1{text-align:center}
.syntagi h4{margin-bottom:0; text-decoration:underline}
.receipe-head{width:100%; height:300px; overflow:hidden; background:black; display: flex; justify-content: center; align-items: center;}
.receipe-head h1{color:white; font-size:2em; margin:0}
.ingredients{width:400px; max-width:100%}
.ingredients, .cooking{padding:1.5em; align-self:flex-start}
.cooking{flex:1;}
.cooking p:not(.notes){ border-left:3px solid black;padding:1em; background:rgba(0, 0, 0, .1)}

/* =============== receipe head with photo ============== */
.receipe-head-img{width:100%; min-height:400px; background:black;}
.receipe-head-img div{border:8px solid white; height:320px; width:320px; max-width:100%;}
.receipe-img{height:auto; width:100%;}
.receipe-head-img h1{color:white; font-size:2em; margin:0; flex:1; text-transform: uppercase;}


.ingredients ul{list-style: square; padding:0}
.ingredients ul li{line-height:2em}
.notes{font-style:italic; margin-top: 2em; padding-top: 1em; line-height: 1.7em; font-size:.9em}
.notes span, .notes .title{font-weight:bold}
.wine{font-weight:bold}
.tip{font-weight:bold; border:3px solid black; padding:.3em; display:block; width:100px}
.notes .title{display:block;}
.notes p{line-height:unset; margin:0}
.notes .flex{border-top: 1px solid black; }


.post-img{width:350px; max-width:100%; align-content:right}
.news{justify-content:center; margin-top:2em}

.post{width:350px; height:300px; max-width:90%; padding: 5px; margin:1em; background-color: rgba(0, 0, 0, .1);}
/* .posts-img{width:100%; height:200px; overflow: hidden; text-align:center}
.posts-img img{width:100%} */
.post *{text-align:left}
.post .content{width:100%}
.post h3{font-size:12px; text-decoration:none; margin:0}
.post h1{font-size: 16px; margin:10px 0; border-left: black 3px solid; padding: 0.5em;}
.post p{font-size:14px; margin:.5em; margin:0;}
.more-btn{background: black; text-align:center; padding:.5em 0}
.more-btn a{color:white}

.post-page{min-height:75vh}
.post-page h5{margin:1em 0; text-decoration:none; text-align:left; font-size:1.2em}
.post-page h1{margin:1em 0; text-align:left; border-left:5px solid black; padding:1em}

.articles{margin-top:3em}
.articles a {background: black; color:white; padding: .5em; font-weight: 600;}

.contact-d img{width:25px; margin-right:1em}
.contact-d{text-align:center; color:#333; margin:1em; padding:.5em; border:solid 8px rgba(255, 255, 255, 0); background:rgba(255, 255, 255, .9)}
.contact-d a{color:#333}
.contact-d img{width:25px; margin-right:1em}
.form > form {background:white; padding:1em; border:6px solid black; width:800px; max-width:90%; align-self:flex-start; margin:1em auto}
.form > form > * {display:block; width:100%; margin:1em 0; font-size:14px; font-family:'Comfortaa', cursive; text-align:left; color:#333; padding:.5em}
.form > form #captcha-container { text-align: center; }
.form > form [name="captcha"] { font-weight: bold; font-size: larger; padding: 0 .5rem; width: 6rem; text-align: center; border: none; text-decoration: line-through; font-style: italic; background: khaki; }
.form > form button{padding:.5em; background:#333; color:white; cursor:pointer}
.form > form button p {padding:0; margin:0; text-align:center}
.form #form-posted { text-align: center; }
.contact .side-img{overflow:hidden}

/* #form-posted{background: rgba(0, 0, 0, .3);} */
#form-posted .emfasis {font-size:18px; font-style:italic}

/* FOOTER */
footer{background:#000000; padding:1em .5em; margin-top:3em}
footer p{color:white; width:100%; text-align:center; font-size:.8em}
footer a{color:white}


  /* horizontal scrolling */
#awards { display: flex; }
.squares { flex: 1; overflow: hidden; display: flex; flex-wrap: nowrap; }
.squares > .square { min-width: 300px; }


@media only screen and (max-width: 600px) {
    .squares-arrow img{width:30px}
h2{font-size:2.1em}
}

@media screen and (max-width: 977px) and (min-width: 500px){
  #language-selector{top:0 !important}
  .syn-hamburger button{top:0}
}


html[lang="en"] [lang="el"] { display: none !important; }
html[lang="el"] [lang="en"] { display: none !important; }