/* Designed by Day6 Advertising, developed by Nick Melas - https://www.day6.gr */
/*
Colors
grey: #464646;
red: #de0024;
*/
@font-face {
    font-family: 'BigNoodleTitling';
    src: url('../fonts/BigNoodleTitling.woff2') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GothamGreek';
    src: url('../fonts/GothamGreek-Book.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GothamGreek';
    src: url('../fonts/GothamGreek-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'GothamGreek';
    src: url('../fonts/GothamGreek-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}
html,body { margin: 0; padding: 0; }
body { background: #ffffff; color: #464646; font-family: 'GothamGreek', Arial, sans-serif; font-weight: 100; font-size: 16px; }
p { line-height: 1.6em; }
p.small { font-size: 0.9em; }
a { text-decoration: none; transition: 0.4s ease-in-out; color: #464646; }
a:hover { color: #de0024; }
b { color: #de0024; }
h2 { font-size: 4em; text-transform: uppercase; font-family: 'BigNoodleTitling', Arial, sans-serif; font-weight: 100; }

img { width: 100%; height: auto; display: block; }
.pageWrapper .mobile { display: none; }
.bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.pageWrapper,
.wrapper { position: relative; width: 100%; }

/* Header */
header { display: flex; align-items: center; justify-content: space-between; position: fixed; width: 100%; left: 0; top: 0; z-index: 9; background: #ffffff; }
.logo { width: 40%; max-width: 200px; padding: 1em 30px; position: relative; z-index: 10; }
.logo a { display: inline-block; }

.menu { width: 100%; }
.menu ul,
.menu li { list-style: none; padding: 0; margin: 0; font-family: Salonikia,Arial; }
.menu li { font-size: clamp(16px, 4vw, 22px); }
.menu ul { display: flex; align-items: center; justify-content: center; }
.menu ul a { display: inline-block; padding: 20px 1.16vw; color: #464646; }
.menu ul a:hover { color: #de0024; }
.menuOpened .menu ul { display: block; }
.mobileMenuTrigger { position: relative; width: 60px; height: 60px; display: none; z-index: 10; }
.mobileMenuTrigger div { position: absolute; width: 40px; height: 3px; border-radius: 6px; background: #de0024; left: 10px; transition: 0.4s; }
.mobileMenuTrigger div:nth-child(1) { top: 20px; } 
.mobileMenuTrigger div:nth-child(2) { top: 30px; }
.mobileMenuTrigger div:nth-child(3) { top: 40px; }
.menuOpened .mobileMenuTrigger div:nth-child(1) { top: 30px; transform: rotate(225deg); transition-delay: 0.3s; }
.menuOpened .mobileMenuTrigger div:nth-child(2) { width: 0; left: 50%; transition-delay: 0s; }
.menuOpened .mobileMenuTrigger div:nth-child(3) { top: 30px; transform: rotate(-225deg); transition-delay: 0.3s; }

/* Footer */
footer { background: #de0024; color: #ffffff; margin-top: 100px; }
.footerWrapper { display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 30px; }
footer a { color: #ffffff; font-weight: 100; }
footer a:hover { color: #cccccc; }
footer address { line-height: 1.4em; font-style: normal; }
footer h3 { margin: 0; font-weight: 900; }
.footerCopyright { background: #37010a; color: #ffffff; padding: 30px; text-align: center; font-size: 16px; }

.credits { padding: 10px 30px 20px; font-size: 10px; background: #000000; text-align: center; color: #70585c }
.credits svg { width: 50px; height: auto; vertical-align: middle; margin-left: 5px; }
.credits .grey,
.credits .orange { fill: #70585c; transition: 0.4s; }
.credits a:hover .grey { fill: #565d63; }
.credits a:hover .orange { fill: #f47216; }

/* Main content */
.zones { position: relative; }
/* Zone 1 */
.zone1 h2 { position: absolute; width: 100%; padding: 0 30px; box-sizing: border-box; left: 0; bottom: 2em; text-align: center; color: #ffffff; text-shadow: 1px 1px 8px #000000; }
.zone1 h2 span { color: #de0024; }
.zone1:before { content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%;
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 58%, rgba(0,0,0,0.9) 100%);
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 58%,rgba(0,0,0,0.9) 100%);
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 58%,rgba(0,0,0,0.9) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e6000000',GradientType=0 );
}

.zone2 .zoneWrapper { position: absolute; width: 40%; box-sizing: border-box; left: 30%; top: 0; text-align: center; line-height: 1.6em; display: flex; align-items: center; min-height: 100%; flex-direction: column; justify-content: center; }
.zone2 h2 { text-align: center; color: #de0024; }
.zone2 h2,
.zone2 p { width: 100%; }
#hexagon { position: absolute; left: 0; width: 29%; height: auto; top: 0; }

.zone3 h2 { color: #ffffff; background: #de0024; padding: 0.1em 30px; text-align: center; margin: 0; }
.zone3 .zoneWrapper { position: relative; }
.zone3 ul { position: absolute; width: 48%; left: 28%; color: #ffffff; top: 25%; color: #eeeeee; list-style: none; padding: 0; margin: 0; text-align: left; word-spacing: 8px; }
.zone3 li { display: block; padding-left: 20px; margin-bottom: 30px; line-height: 1.6em; position: relative; }
.zone3 li:before { content: ''; position: absolute; top: 0.6em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: #de0024; }

.zone4 h2 { position: absolute; transform: rotate(270deg); top: 35%; }
.zone4 p { padding: 2em 20% 0; box-sizing: border-box; margin: 0; text-align: center; }
.zone4 .zoneWrapper { position: relative; }
#particles-js { position: absolute; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; }
.zone4b { position: absolute; top: 0; left: 0; z-index: 3; width: 100%; height: auto; }
.crosses { position: absolute; top: 5%; left: 3%; z-index: 3; width: 5%; height: auto; }

@media screen and (max-width: 1600px) {
}

@media screen and (max-width: 1023px) {
    h2 { font-size: 2em; }
    .mobileMenuTrigger { display: block; }
    .menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9; transform: translateX(-100%); transition: 0.4s; box-sizing: border-box; background: #ffffff; box-sizing: border-box; padding: 20vw 30px; }
    .menuOpened .menu { transform: translateX(0); }
    .menu ul { display: block; }
    .zones { overflow: hidden; }
    .zone1 { min-height: calc(100vh - 80px); }
    .zones img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
    .zone2 .zoneWrapper,
    .zone3 ul { position: relative; width: calc(100% - 40px); left: auto; top: auto; margin-left: 20px; }
    .zone3 { background: #464646; }
    .zone3 img { object-position: left; opacity: 0.4; }
    #hexagon { width: 100%; opacity: 0.8; }
    .zone3 ul { padding: 40px 0; }
    .crosses { display: none; }
    .zone4 p { padding: 2em 20px; }
    .zone4 .zoneWrapper { min-height: 50vh; }
    .zone4 .zoneWrapper img { margin-left: -25%; width: 140%; height: auto; object-fit: contain; }
    .zone4 .zoneWrapper img.zone4b { position: relative; }
    .zone4 h2 { top: 0; }
}
@media(orientation:portrait){

}

#hexagon1 { 
	stroke-dasharray: 114;
	stroke-dashoffset: 0;

	animation: hexagon1 6s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
#hexagon2 { 
	stroke-dasharray: 114;
	stroke-dashoffset: 0;

	animation: hexagon2 5s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
#hexagon3 { 
	stroke-dasharray: 114;
	stroke-dashoffset: 0;

	animation: hexagon3 13s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}
#dotts { 
	animation: dotts 13s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}


@keyframes hexagon1 {
	0% {
		stroke-dashoffset: -114;
	}
	50% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: -114;
	}
}
@keyframes hexagon2 {
	0% {
		stroke-dashoffset: -114;
	}
	50% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: -114;
	}
}
@keyframes hexagon3 {
	0% {
		stroke-dashoffset: -114;
	}
	50% {
		stroke-dashoffset: 0;
	}
	100% {
		stroke-dashoffset: -114;
	}
}
@keyframes dotts {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}