@charset "UTF-8";
@font-face { font-family:'sg'; src:url('_external/fonts/sg.woff') format('woff'); font-style:normal; font-weight:400; }
@font-face { font-family:'sg'; src:url('_external/fonts/sgb.woff') format('woff'); font-style:normal; font-weight:700; }
:root { --maincolor:#92b96d; --maxwidth:1600px; --textfont:"Commissioner"; --displayfont:"sg"; }
* { font-family:var(--textfont), Arial, sans-serif; line-height:1.5; text-rendering:optimizeLegibility; box-sizing:border-box!important; }

body { background:#fff; padding:0; margin:0 auto!important; padding:25px 100px; }
a { color:var(--maincolor); text-decoration:none; transition:all .2s ease-in-out; }
a:hover { color:#333; }
h1 { text-align:center; font-size:32px; margin:50px 0 0; line-height:1; font-family:var(--displayfont),Arial; font-weight:400; }
h2 { margin:50px 0 10px; font-size:18px; font-weight:400; text-align:center; cursor:pointer; }
h2 > span { display:inline-block; border:solid 1px var(--maincolor); transform:rotate(-1deg) translateY(-7px)!important; transition:all .2s ease-in-out; background:white; padding:7px 10px 0; margin:0 10px; position:relative; z-index:100; font-family:var(--displayfont),Arial; }
h2 > span:hover { transform:scale(1.05) translateY(-7px)!important; }
h2:before { content:" "; display:block; position:relative; top:13px; width:100%; border-top:dotted 2px var(--maincolor); }
img { width:100%!important; aspect-ratio:auto; margin-bottom:20px; }
img.bordered { border:solid 1px #eee; }

#border { pointer-events:none; width:100%; height:100%; position:fixed; top:0; left:0; background:transparent; border:solid 15px var(--maincolor); z-index:1000; }
#logo { width:60vw; max-width:640px; margin:50px auto 50px; cursor:pointer; }
#about { border-radius:10px; padding:10px 25px; background:var(--maincolor); width:75%; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; margin:0 auto 80px; max-width:768px; }
#about p { flex-basis:48%; color:white!important; }
#about p a { color:white!important; text-decoration:none; }
#about p a:hover { color:black!important; }
#products_text { font-size:13px; color:#aaa; text-align:center; margin-bottom:75px; }
footer { text-align:center; margin:100px auto 50px; max-width:var(--maxwidth); }
footer p { width:70%; margin:0 auto 25px; }
#all_products { max-width:var(--maxwidth); margin:0 auto; }
#toggle_products { font-weight:400; font-size:14px; position:relative; top:-10px; }
#toggle_products span { position:relative; top:-2px; left:4px; }
.products { height:0; overflow:hidden; margin:0 auto 0; opacity:0; transition:all 1s ease-in-out; display:grid; grid-template-columns:repeat(auto-fill, minmax(270px,1fr)); grid-gap:0; }
.products.opened { height:auto; margin:25px auto 100px; opacity:1; }
.products > .link, .products > .subsection { grid-column: 1 / -1!important; text-align:center; }
.products > .subsection { font-family:var(--displayfont); font-size:16px; margin:25px 0 25px; }
.products > .subsection a { font-family:var(--textfont); font-size:16px; }
.products > .subsection:before { content:" "; display:block; width:10px; height:10px; background:var(--maincolor); border-radius:50%; margin:15px auto; }
.product { cursor:pointer; text-align:center; margin:0 auto; padding:10px; background:#fff; transition:all .2s ease-in-out; }
.product:hover { background:#fff; transform:scale(1.02);  }
.product > figure { max-width:100%; }
#kampourakis_sign { width:300px; height:300px; animation:zoomout 4s ease-in-out; padding:65px; background:white; border-radius:50%; }
#copyright { font-family:var(--displayfont),Arial; font-size:11px; }

.customSlideUp { opacity:0; position:relative; top:20px; transition:all .4s ease-in-out; }
.customSlideUp.opened { opacity:1; top:0px; }
#top { position:fixed; bottom:25px; right:25px; z-index:750!important; cursor:pointer; padding:12px 27px 22px; background:var(--maincolor); color:#fff; font-weight:700; font-size:24px; opacity:0; pointer-events:none; transition:all .5s ease-in-out; }
#top.opened { opacity:.9; pointer-events:auto; }
#top:hover { opacity:.8; }
#loader { width:100vw; height:100vh; position:fixed; top:0; left:0; z-index:2000; background:var(--maincolor); overflow:hidden; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; }

.fancybox__backdrop { background-color:#fff!important; }
.fancybox__caption { color:#000!important; }
.fancybox__container * { box-shadow: 0 0 0 rgba(0, 0, 0, 0)!important; }
.fancybox__container .fancybox__skin { -webkit-box-shadow: 0 10px 25px #fff; -moz-box-shadow: 0 10px 25px #fff; box-shadow: 0 10px 25px #fff; }
.fancybox__container { --carousel-button-svg-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0))!important; }
.fancybox__toolbar { background:none!important; text-shadow: var(--fancybox-toolbar-text-shadow, 1px 1px 1px rgba(0, 0, 0, 0))!important; }
*[class*="fancybox__button"] svg, *[class*="carousel__button"] svg { stroke:#000!important; }
.fancybox__counter, .fancybox__counter * { color:#000!important; }

@media print {
	html { zoom:.90; }
	html, body { height:100%; }
	#toggle_products,#products_text,#border,#top { display:none!important; }
	.customSlideUp { opacity:1!important; }
	.products { grid-template-columns:repeat(auto-fill, minmax(3cm,.5fr))!important; height:auto!important; margin:1cm auto!important; opacity:1!important; }
	.brand > h2 { break-before:page!important; }
	.subsection { break-inside:avoid!important; display:none; }
	.product { break-inside:avoid!important; figcaption { font-size:9pt!important; } }
}

@media all and (max-width:960px) {
	#about p, footer p { width:100%!important; }
	#about p { flex-basis:100%!important; }
	.products { grid-template-columns:repeat(auto-fit, minmax(250px,1fr))!important; grid-gap:.3rem!important; }
	h2 { font-size:17px!important; }
}
@media all and (max-width:568px) {
	body { padding:0 20px!important; }
	#border { border:solid 10px var(--maincolor)!important; }
	#about { width:95%!important; margin-bottom:75px!important; padding:5px 15px!important; }
	#about p, footer p:not(#copyright) { font-size:14px!important; }
	#logo { width:80vw!important; margin-bottom:50px!important; }
	h2 { font-size:12px!important; padding:0!important; margin-top:25px!important; }
	h2:before { top:10px!important; border-top:solid 1px var(--maincolor)!important; }
	#copyright { font-size:9px!important; }
	#kampourakis_sign { width:150px!important; height:150px!important; padding:20px!important; }
}		

@-webkit-keyframes zoomout { from { transform:scale(1.5); opacity:0; } to { transform:scale(1); opacity:1; } }
@keyframes zoomout { from { transform:scale(1.5); opacity:0; } to { transform:scale(1); opacity:1; } }