* { 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;}

html {font-family: "Manrope", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 19px; color: #333;}

body {margin: 0; }
h1{font-size:2.5em; font-weight:400; color:#007970; font-weight:300; letter-spacing: 3px;}
h3{text-align:center; font-size:1.3em; font-weight:300}
.container { max-width: 1200px; margin: 0 auto; }
.menu-spacing > div{display:none}
.bigger{font-size:25px; color:#007970; font-weight:300}
.category-txt{font-size:20px; font-weight:300}
.section-marg{margin:3em auto}  
.left-line{border-left:5px solid ; padding-left:.5em}
.left-line p {line-height:1.8em}
.left-line h2 {font-weight:400; color:#007970}
#about .left-line{border-color:#007970}
#weddings .left-line{border-color:#D68757}
#private-dinners .left-line{border-color:#92B793}
#corporate .left-line{border-color:#DFC78C}
.mint{color:#92B793}
.gold{color:#DFC78C}
.orange{color:#D68757}
.back{width:100%; text-align:right}
.back a{color:#333}

/* quotes */
.quotes{background-image:url(../imgs/quotes.5dad7d.png); background-size: 50px; background-position: top left; background-repeat: no-repeat;
padding:0 40px; margin:4em auto; border-bottom:1px dotted #007970; border-top:1px dotted #007970}
.quotes p{font-size:1.5em; font-weight:300; text-align:center}


.italics{font-style:italic; text-align:center; margin:0}
.green{color:#007970; margin:0}
.img100{width:600px; max-width:100%; overflow:hidden}
.img100 img{width:100%}
.h100 p, .h100 h1{max-width:100%; padding:0 15px}
nav li {color:white; font-weight:300}

/* nav height exceptions */
#homepage nav > ul, #contact-page nav > ul { height: 100vh; }

/* header social & logo */
header{position:sticky; top:-115px; background:white}
.site-header { display: flex; padding:.5em 5em; height: 115px}
/* .site-header > div#site-logo { flex: 1; } */
#site-logo img{width:300px; max-width:80%}
#head-social img{width:40px; margin:0 10px; }
header h3 {font-size:1em; color:#404041; letter-spacing: 3px;}

/* header language selector */
.lang-bar a, .lang-bar p{color:#404041; text-align:right; width:100%; text-decoration:none; font-weight:400; padding:.5em; border-radius:30px}
.lang-bar a:hover{color:white; background:#007970}

/* hamburger button and menu */
.syn-hamburger button{ border: none;background: none;font-size: 2em;padding: 0;margin: 0;position: absolute;top: 10px;right: 20px;
  width: auto;color: black; cursor:pointer; min-width:auto; margin-top: .8rem; }

/* arrow down */
.arrow-down {height: 10px; position: absolute; bottom:1em; width: 50%; left:25%}
.arrow-down::before {animation: bounce 1s ease infinite; bottom: 1em; color: #fff; content: '╲╱'; font-size: 1em; height: 2em; 
  left: 50%; letter-spacing: -1px; line-height: 2em; margin-left: -3rem; opacity: 0.8; position: absolute; text-align: center; width: 4em;}
@keyframes bounce {
  50% {transform: translateY(-50%);}
}


/* main section*/
.main-img-container{height:calc(100vh - 115px); overflow: hidden; background-color:black}
.main-img {width:80%; height:90vh}
.main-img-container h1{ color:white; margin-top:30%}
p.white{color:white; margin-top:0; font-size:28px; font-weight:300}

/* main imgs */
.main-img-container{background-size:cover; background-repeat:no-repeat; background-position: center center;}
#homepage .main-img-container{background-image: url(../imgs/landing.e5ddd3.jpg); }
#about .main-img-container{background-image: url(../imgs/about.618680.jpg); }
#weddings .main-img-container{background-image: url(../imgs/weddings.3b462d.jpg);}
#mykonos .main-img-container{background-image: url(../imgs/mykonos.b5bb22.jpg);}
#private-dinners .main-img-container{background-image: url(../imgs/private.693419.jpg);}
#corporate .main-img-container{background-image: url(../imgs/corporate.b7255c.jpg);}

/* text-align exceptions */
/* #private-dinners .main-img-container h1, #corporate .main-img-container h1{text-align:right} */
/* #private-dinners .flex-row h1, #private-dinners .flex-row p{text-align:right; padding-left:2em} */
#corporate .flex-row div, #corporate .flex-row h1{text-align:center}

 /* about */
.circles{height:300px; width:300px; max-width:90%; border-radius:300px; overflow:hidden; margin:0 auto}
.circles a{width:100%; text-align:center; cursor:pointer}
.circles img{width:100%}
.motos{padding:1em}
#about-chef h3{text-align:left; padding: 0 1em}
#about-chef img{max-width:100%}
#about-chef .flex-row p{padding-right:3em; padding-left:1em;}
#about-chef .flex-row{align-items: flex-start;}
#about-chef, #about-service, #about-ingredients {min-height:calc(100vh - 220px)}
.aside{align-items: flex-start;}
.aside p{margin-top:0}
.aside .flex{padding:1em;}
#about h1{margin-top:0}
.about-subpage h1{margin-top:.5em}
#about-chef .about-txt, #about-service .about-txt, #about-ingredients .about-txt{width:600px; min-width:600px; max-width:100%}

.img-abs{width:100%; height:450px; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position:center top}
/* .img-abs img{width:100%} */

 /* about subpages head imgs */
#about-chef .img-abs {background-image: url(../imgs/about-chefs.393d86.jpg); background-position:center}
#about-csr .img-abs {background-image: url(../imgs/about-corporate-social-responsibility.4c383e.jpg);}
#about-environmental .img-abs {background-image: url(../imgs/about-environmental-awareness.6fc210.jpg);}
#about-ingredients .img-abs {background-image: url(../imgs/about-ingredients.8c9126.jpg);}
#about-service .img-abs {background-image: url(../imgs/about-service.861578.jpg);}
#about-staff .img-abs {background-image: url(../imgs/about-staff-recruitment-training.45f921.jpg); background-position:center}

 /* private subpages head imgs */
 #private-kids .img-abs {background-image: url(../imgs/private-dinners-parties/services/children-party.50e618.jpg); background-position:center}
 #private-delivery .img-abs {background-image: url(../imgs/private-dinners-parties/services/delivery-menu.e43159.jpg); background-position:center}
 #private-dinners .img-abs {background-image: url(../imgs/private-dinners-parties/services/private-dinners.ebb04c.jpg); background-position:center}
 #private-parties .img-abs {background-image: url(../imgs/private-dinners-parties/services/private-parties.ed0ec4.jpg); background-position:center bottom} 

  /* corporate subpages head imgs */
  #corporate-breaks .img-abs {background-image: url(../imgs/corporate-events/events/corporate-coffee-break-2493678749.e226d5.jpg); background-position:center}
  #corporate-conferences .img-abs {background-image: url(../imgs/corporate-events/events/corporate-conferences-1582407655.0ec279.jpg); background-position:center}
  #corporate-events .img-abs {background-image: url(../imgs/corporate-events/events/corporate-pr-events-2264912065.651f66.jpg); background-position:center}
  #corporate-dinners .img-abs {background-image: url(../imgs/corporate-events/events/corporate-dinners-1944074773.a88359.jpg); background-position:center}
  #corporate-vasilopita .img-abs {background-image: url(../imgs/corporate-events/events/corporate-vasilopita-2475830713.979d23.jpg); background-position:center}
  #corporate-catering .img-abs {background-image: url(../imgs/corporate-events/events/corporate-contract-catering-2029767140.68051f.jpg); background-position:center}


 /* contact */
 /* #contact-page{background:rgba(218, 217, 215, .3)} */
 .just-center{justify-content: center;}
#contact h1 {text-align:right; width:100%}
.details {width:300px; min-width:300px; max-width:100%; text-align:center; margin:0 1em;margin-left: 5em;}
.details a, #privacy a{color:#007970; text-decoration:none;  font-weight:300;}
.details img{width:40px; z-index: 10000;}
.line {width:100%; height:3px; background:#007970; margin-top:2em}
.social{position:relative; top:-20px; margin:0}
#contact-page form a{color:#007970;}
#contact-page .quotes{text-align:center; margin:2em auto}
#contact-page .quotes p{font-weight:300; }

/* venues */
#venues h1 {width:100%}
#venues h2 {text-align:left; font-weight: 600; margin-top:4em}
#venues .left-line {padding-left:2em}
#venues .logo {width:250px; max-width:90%; height:220px; text-align:center; color:#404041; text-decoration:none; margin:1em;
  display: flex; flex-flow: column; flex-wrap:wrap; align-items:center }
/* #venues .logo:hover {color:#007970; font-weight:600} */
#venues .logo .img-wrapper {flex:1; display:flex; align-items: center;}
#venues .logo img {max-height:85%; max-width:90%}
#venues .logo p {margin:0; transition:all .3s linear; width:100%}
#venues .logo p span {display:block; width:100%}
#venues .logo:hover p {background:#007970; color:white; } 

 /* List Style */
#corporate ul {list-style: none; padding:0; line-height:2em}
#corporate ul li::before {content: "\2022";  color: #DFC78C; font-weight: bold; display: inline-block; width: 1em; margin-left: 0;}

/* gallery */

.gallery {height:500px; width:100%; overflow:hidden}
.gallery > div {width:300px; height:100%;  overflow:hidden}
.gallery > div > img {height:100%}

/* form */
.form{box-shadow:  0 5px 10px rgb(0 0 0 / 15%); width:750px; max-width:100%}
form {max-width:100%; margin:0 auto;  }
.request-wrapper{background:white; border-radius:10px; padding:2em; min-height:100px; text-align:center}
form i:not(button i){color:grey; position:absolute; top:18px; right:15px; background:white}
input, select, button, textarea{padding:.5em; font-size:.8em; color:grey; border-radius:10px; outline:none; font-family: "Manrope", sans-serif; font-size:14px;
width:330px; max-width:100%; margin:.5em 0; height:40px}
.form a {color:#007970; text-decoration: none;}
button p{padding:0; margin:0; text-align:center; color:white; width:100%}
button i{color:white}
form button{background:#5f5a5a; text-align:center; width:95%; cursor:pointer; }
form button p{text-align:center; font-size:1em}
form p{text-align:left; font-size:.8em; font-weight:300; margin:0; padding:0 1.3em;}
.form, .details{ margin-top:1em;}
.message{width:100%; justify-content: center;}
.message textarea{width:99%; height:150px}
.positioning{text-align:center; position:relative}
.form > form #captcha-container { text-align: center; font-size: .8rem; margin-top: .5rem; }
.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-posted {text-align:right; padding:.5em}
#captcha-container p {text-align:center; font-size:16px; margin-top:30px; font-weight:300}
#captcha-container input {margin:20px auto}

/* privacy policy */
#privacy p{padding-right:3em; margin-top:0; font-weight:300}
#privacy h2{font-weight:300; color:#DFC78C; margin-bottom:.5em; margin-top:2em; border-bottom:1px solid #DFC78C}

/* footer */
footer { margin-top:6em; font-size:.6em}
footer img {width:40px}
footer a{text-decoration:none; color:#007970}
footer p{text-align:center}
.powered{border-top:#007970 dotted 1px; margin-top:.5em; font-weight:300}
.copyright{margin-bottom:0; margin-top:0}
.details-gemi{padding:.5em;  border-top:#007970 solid 2px;}
.details-gemi p {margin:.5em; color:#333; font-weight:300; }

@media only screen and (max-width: 1560px) and (min-width: 1366px) {
.container {max-width:1000px}
.details{margin:0}
}

@media only screen and (max-width: 1640px) and (min-width: 1366px) {
 .about-subpage .container {max-width:1000px}
  }
  

@media only screen and (max-width: 1365px) and (min-width: 977px) {
  .syn-hamburger{padding-left:1em}
  .syn-hamburger > ul > li { width:19%; text-align:center; height:80px; vertical-align:top}
  header{top:0; background:white; box-shadow: 0 2px 5px rgb(0 0 0 / 10%);}
  .syn-hamburger > ul > li:last-child:nth-child(6){display:none}
  .container{padding:1em}
  .details{margin:0}
  nav > ul > li.menu-active{margin-right:0 !important}
}

@media (max-width: 976px) {
  .site-header {padding:.5em; padding-right:60px}
  .syn-hamburger > ul > li {text-align:center }
  header{top:0; background:white; box-shadow: 0 2px 5px rgb(0 0 0 / 10%);}
  .container{padding:1em}
  .details{margin:0}
  nav > ul > li.menu-active{margin-right:0 !important}
  .request-wrapper{padding:.5em;}
  .request-wrapper .flex {max-width:100%; }
  /* .request-wrapper .flex i{display:none} */
  form p, footer p{font-size:.7em}
  .quotes p{font-size:1.2em;}
  input{width:755px;}
  .section-marg{margin:1em auto}  

}


.squares-container { display: flex; align-items: center; }
.squares-container > .squares-arrow { cursor: pointer;}
.squares-container > .squares-arrow > img { width:30px;}

.squares { overflow: hidden; display: flex; align-items: stretch; justify-items: stretch; height:400px}
.squares > .square { min-width: 300px; transition:all .6s linear; overflow:hidden}
.squares > .square > img { height: 100%; }
.squares > .square:hover{min-width:500px}

.squares > .square:hover img{scale: 1.1;}
.squares > .square img{ transition:all 1s linear}

@media (max-width: 1000px) {
  .squares > .square:hover{min-width:300px}
  .squares-container > .squares-arrow { display: none; }
}