/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Fonts
# Root
# Global
    ## Tools
# Typography
# actusblank
# Menu
# Footer
# Layout
--------------------------------------------------------------*/
  

 
/*--------------------------------------------------------------
# Fonts
--------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700,900&display=swap&subset=greek');


/* ------------------- COMFORTAA */
/* ----------------------------- */
@font-face {
    font-family: 'Comfortaa';
    src: url(fonts/Comfortaa-Light.ttf);
    font-weight: 300;
	font-display: swap;
}
@font-face {
    font-family: 'Comfortaa';
    src: url(fonts/Comfortaa-Regular.ttf);
    font-weight: 400;
	font-display: swap;
}
@font-face {
    font-family: 'Comfortaa';
    src: url(fonts/Comfortaa-Bold.ttf);
    font-weight: 700;
	font-display: swap;
}





/*--------------------------------------------------------------
# Root
--------------------------------------------------------------*/
:root {

    --fontA: 'Roboto', sans-serif;
    --fontB: 'Comfortaa', sans-serif;
	
	--colorA: #7e4939;
	--colorB: #505f58;
	--colorC: #b38972;
	--colorD: #21221c;


    --txA: 0 0 1px hsla(176, 99%, 33%, 0.4);
    --txB: 0 0 1px hsla(217, 51%, 20%, 0.4);
    --txC: 0 0 1px hsla(215, 26%, 37%, 0.4);
    --txD: 0 0 1px hsla(0, 0%, 90%, 0.4);

    --txA3: 0 0 1px hsla(210, 74%, 48%, 0.4);

    --txWH: 0 0 1px hsla(0, 0%, 100%, 0.4);
    --txBL: 0 0 1px hsla(0, 0%, 0%, 0.4);



}


 
/*--------------------------------------------------------------
# Typography - Colors
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
	font-family: sans-serif; 
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
body { margin: 0; font-family: var(--fontA); }
body, body * { box-sizing: border-box; }
html, body { overflow-x: hidden; }
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: var(--colorA);
}
::-webkit-scrollbar-thumb {
    background: var(--colorB);
    border: 2px solid var(--colorA);
}
body::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}


a,p,li,h1,h2,h3,h4,h5,h6 { font-family: var(--fontA); }
.uline::after { border-bottom: 8px solid var(--colorA); }
a { color: var(--colorA); text-decoration: none; }
a h1, a h2, a h3, a h4, a h5, a h6, a li,
a p { color: black; }



.A-round,
.A-button-round { background: var(--colorA); }

.backA { background: var(--colorA); }
.backB { background: var(--colorB); }
.backC { background: var(--colorC); }
.backD { background: var(--colorD); }
.backE { background: #021d26; }
.backF { background: #cecece; }

.A-flex { display: flex; }
.A-flex-wrap { display: flex; flex-flow: row wrap; }

.abs {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}




body main#content,
body footer { display: block; }
figure { margin: 0; }


img { position: relative; }
img:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: white;
}


/* **************************************************************** */
/* **************************************************************** */
/* **************************************************************** */

/* 	--------------
	HEADER
 	-------------- */
header {
	position: relative;
    text-align: center;
	padding: 64px 10% 0;
}
header .A-flex {
	place-items: flex-start;
	place-content: space-between;
}
header .A-logo {
	display: inline-block;
    width: auto;
	margin: 0 0 32px 0;
	transition: 1s all;
}
header .A-logo img {
    width: 260px;
    height: auto;
    max-height: 120px;
    object-fit: contain;
}
header .A-logo.closed { transform: scale(0); }


/* Navigation */
header nav .menu-toggle {
	display: none;
	background: transparent;
	border: 0;
	outline: 0;
}
header nav .menu-toggle svg {
	height: 32px;
    fill: black;
    stroke: black;
    stroke-width: 12px;
}
header nav {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    text-align: right;
    z-index: 9;
}
header nav {
	display: block;
    width: auto;
	margin: 0;
	transition: 1s all;
}
header nav.closed { left: -300px; }
header nav ul {
	width: auto;
    padding: 0;
    margin: 0;
    list-style: none;
	text-align: center;
}
header nav ul li {
    display: inline-block;
    position: relative;
    width: auto;
    padding: 0px;
    margin: 0px 16px;
    cursor: pointer;
}
header nav ul li.lang-item { margin: 0 4px; }
header nav ul li.lang-item img { height: 16px; width: auto; }
header nav ul li a {
    position: relative;
    font: 400 18px var(--fontA);
	text-decoration: none;
	color: white;
    z-index: 99;
}
header nav ul li:hover > a,
header nav ul li.current_page_item > a {
    color: var(--colorA);
    opacity: 1;
}
header nav ul.sub-menu { 
	display: none;
	position: absolute;
	left: -65px;
	min-width: 220px;
	padding: 24px 0 0;
	text-align: left;
}
header nav ul.sub-menu li {
	width: 100%;
	margin: 0;
	padding: 4px 16px;
	background: var(--colorA);
}
header nav ul.sub-menu li:first-child { padding-top: 12px; }
header nav ul.sub-menu li:last-child { padding-bottom: 12px; }
header nav ul.sub-menu li a { color: black; }
header nav ul.sub-menu li:hover a { color: white; }
header nav ul li:hover ul.sub-menu { display: block; }

header ul.sub-menu:before {
    content: '';
    position: absolute;
    top: 4px;
    left: 50%;
    border: 10px solid transparent;
    display: block;
    border-bottom-color: var(--colorA);
    margin-left: -10px;
}


nav.A-breadcrumb {}

nav.A-breadcrumb ul { display: flex; list-style: none; }
nav.A-breadcrumb ul li { margin-right: 8px; }
nav.A-breadcrumb ul li a { text-decoration: none; font-weight: 700; color: var(--colorB); }
nav.A-breadcrumb ul li a:hover { text-decoration: underline; }


/* SEARCH */
.A-search {
	display: flex;
	position: absolute;
    top: 32px;
    right: 5%;
	opacity: 0.35;
}
.A-search:hover {opacity: 1;}
.A-search form { display: flex; }
.A-search label span { display: none; }
.A-search input[type="search"] {
    min-width: 260px;
    padding: 4px 8px;
    font: 400 14px var(--fontA);
    background: hsla(0, 0%, 0%, 0.1);
    border: 0;
    outline: 0;
    border-radius: 100px;
}
.A-search .search-submit {
    top: 2px;
    background: transparent;
    color: transparent;
    border: 0;
    font-size: 14px;
    cursor: pointer;
    opacity: 0.7;
}
.A-search .search-submit:hover { opacity: 1; }
.A-search .search-submit img {
    width: auto;
    height: 20px;
    padding: 2px 0;
	object-fit: contain;
}
.A-search svg { height: 24px; margin-left: -48px; pointer-events: none; }

.A-404,
.A-SEARCH-RESULTS {
	padding: 32px 10%;
}

.A-page-title {
	font: 700 40px var(--fontA);
}




#act_map {
	display: none;
	width: 60%;
	height: 300px;
}
.gm-style-mtc { display: none; }




.A-video-frame {
	position: relative;
	background: url(img/laptop.png) no-repeat;
	background-size: 100%;
    width: 80%;
	padding: 2.5% 0.4% 10% 0.3%;
	margin: 32px 0 64px;
    margin-left: 10%;
}
.A-video-frame .wp-block-embed__wrapper {
	position: relative;
	width: calc(100% / 1.3);
	padding-top: calc(56.25% / 1.3);
	margin: 0 auto;
}
.A-video-frame .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.A-shadow-R { position: relative; }
.A-shadow-R:before {
	content: "";
	position: absolute;
	left: 100%;
	top: 0;
	height: 100%;
	width: 128px;
	background: url(img/shadow-R.jpg) no-repeat;
	background-size: contain;
}




/* **************************************************************** */
/* **************************************************************** */
/* **************************************************************** */
header {
	position: absolute;
	width: 100%;
	z-index: 999;
}
.A-cover figure {
	position: relative;
	height: 600px;
}


.A-dark-cover {
	padding: 180px 15% 48px 35%;
	background: url(img/header_back.jpg);
    background-size: cover;
	color: white;
}
.A-dark-cover .Apic { padding-left: 30%; }
.home .A-dark-cover .Apic { margin-bottom: 96px; }
.A-dark-cover p { color: hsla(0, 0%, 100%, 0.6); }
.A-dark-cover .Col1 { padding-right: 24px; }
.A-dark-cover .Col2 :first-child { margin-top: 0; }
.A-dark-cover h1 {
	margin: 0;
	font: 700 36px var(--fontB);
	line-height: 0.9;
	text-align: right;
}
.A-dark-cover h1 strong { color: var(--colorA); }


.A-content h3 a { font-family: var(--fontB); }
.A-content a {
	text-shadow: 0 0 1px var(--colorA);
}




.A-home-A {
	padding: 64px 10%;
	background: var(--colorA);
}
.A-home-A h2 {
	margin: 0 0 48px;
	font: 700 22px var(--fontB);
	line-height: 1;
	text-shadow: 0 0 1px black;
}
.A-home-A h3 {
	margin: 0;
	font: 700 19px var(--fontB);
	color: white;
	line-height: 1;
	text-shadow: 0 0 1px white;
}
.A-home-A .Acolumn {
    display: flex;
    flex-flow: column;
    place-content: space-between;
	text-align: center;
	padding: 0 5% 0 0;
}
.A-home-A .Col4 { text-align: left; padding: 0; }
.A-home-A .Apic { margin-bottom: 24px; }
.A-home-A svg,
.A-home-A img { width: 100%; max-width: 80px; }
.A-home-A .draw-svg svg {
	fill: transparent;
	stroke: black;
}
.A-home-A .draw-svg.on svg {
	fill: black;
	stroke: transparent;
}
.A-home-A .Col2 .draw-svg path { transition-delay: 0.2s !important; }
.A-home-A .Col3 .draw-svg path { transition-delay: 0.4s !important; }


.A-home-B { background: var(--colorC); }
.A-home-B .A-spheres {
	position: absolute;
	right: 0;
	top: -100px;
	width: 500px;
	height: 400px;
	padding: 0;
}
.A-home-B .A-spheres canvas {
	position: absolute;
	right: 0;
	top: 0;
}
.A-home-B .Acolumns { padding: 0 25%; }
.A-home-B .Acolumn {
	display: flex;
	flex-flow: column;
	align-items: center;
	position: relative;
	text-align: center;
}
.A-home-B .A-disc {
	position: absolute;
	width: 100%;
	height: auto;
	cursor: pointer;
}
.A-home-B .A-disc img { margin-left: 7.5%; }
.A-home-B .A-icon {
	width: 30%;
    margin: 16% auto 0;
	pointer-events: none;
}
.A-home-B h2 {
	position: relative;
	margin: 4% 0;
	font: 700 2.7vw var(--fontB);
	text-shadow: 0 0 1px black;
	pointer-events: none;
}
.A-home-B h3 {
	position: relative;
	margin: 0;
	font: 700 1.1vw var(--fontB);
	color: var(--colorA);
	text-shadow: 0 0 1px var(--colorA);
	pointer-events: none;
}



.A-home-services { background: var(--colorC); }
.A-home-services h2 {
	margin: 0 0 160px;
	font: 700 44px var(--fontB);
	text-align: center;
	line-height: 0.9;
	color: var(--colorA);
}
.A-home-services h2 strong { color: black; }
.A-home-services .A-frame { position: relative; }
.A-home-services svg.waves {
	position: absolute;
	top: 40%;
	left: 11vw;
	height: 20.3%;
	width: 68.5vw;
	stroke: black;
	stroke-width: 4;
	fill: transparent;
}
.A-home-services svg.waves path {
	stroke-dasharray: 100;
	stroke-dashoffset: -100;
	transition-timing-function: ease-in-out;
}
.A-home-services svg.waves2 {
	stroke-width: 16;
	stroke: var(--colorA);
    overflow: visible;
	opacity: 0.3;
}
.A-home-services svg.waves2 path {
	stroke-dasharray: unset;
	stroke-dashoffset: unset;
	transition-timing-function: unset;
}
.A-home-services .Acolumns .icon {
	position: relative;
	width: 100%;
	padding: 20%;
}
.A-home-services .Acolumns .icon svg {
	fill: var(--colorA);
    fill: transparent;
    stroke: var(--colorA);
    stroke-width: 3;
	transition: 1s all 2s;
}
.A-home-services .Acolumns .icon svg path {
	stroke-dasharray: 100;
	stroke-dashoffset: -100;
	transition: 3s all;
	transition-timing-function: ease-in-out;
}
.A-home-services .Col1 .icon svg path { stroke-dashoffset: -75; }
.A-home-services .Col2 .icon svg path { stroke-dashoffset: -33; }
.A-home-services .Col3 .icon svg path { stroke-dashoffset: -23; }
.A-home-services .Col5 .icon svg path { stroke-dashoffset: -40; }
.A-home-services .Col6 .icon svg path { stroke-dashoffset: -70; }
.A-home-services .Col7 .icon svg path { stroke-dashoffset: -35; }
.A-home-services .Acolumns .Apic {
	margin-top: 2.2vw;
	text-align: center;
}
.A-home-services .Acolumns .Apic img { width: 6vw; }
.A-home-services .Acolumn {
	position: relative;
    width: 6vw;
    height: 29vw;
	transform: scale(0);
	transition: 0.6s all;
	transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
	z-index: 9;
}
.A-home-services .Acolumn:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 137%;
	height: 137%;
	background: url(img/label-02.png) no-repeat;
	background-size: contain;
}
.A-home-services .Acolumn:after {
	content: "";
	position: absolute;
	left: 47%;
	top: 47%;
	width: 1px;
	height: 0%;
	border-left: 0.5vw dotted hsla(0, 0%, 0%, 0.5);
	transition: 0.4s all 0.5s;
}
.A-home-services .Acolumn:nth-child(even) {
	display: flex;
	flex-flow: column;
	transform:scale(0);
	background-position: top;
}
.A-home-services .Acolumn:nth-child(even) > * { transform:scaleY(-1); }
.A-home-services .Acolumn:nth-child(even) .icon { padding: 25%; }
.A-home-services .Acolumn:nth-child(even) .Apic { margin-top: 1.5vw; }
.A-home-services .Acolumn:nth-child(even) .Apic img { padding: 0.5vw; }
.A-home-services .Acolumn h3 {
	position: absolute;
	bottom: 87%;
	left: 0;
	margin: 0;
	font: 700 1.3vw var(--fontB);
	text-shadow: 0 0 1px black, 0 0 2px black;
	z-index: -1;
	transition: 0.6s all 0.5s;
}
.A-home-services .Acolumn p {
	position: absolute;
	left: 106%;
	top: 0;
	width: 8vw;
	margin: 0;
	font: 400 0.8vw var(--fontB);
	color: hsla(0, 0%, 0%, 0.65);
	opacity: 0;
	transition: 1s all 1s;
}
.A-home-services .Col6 h3 { width: 160%; }
.A-home-services .circle {
	position: absolute;
    left: 14.1vw;
    top: 56.0%;
    width: 2vw;
    height: 2vw;
	border-radius: 200px;
	background: var(--colorA);
	animation: zoomIn 0.6s forwards;
	animation-timing-function: ease-in;
	z-index: 99;
}
.A-home-services .circle.circle-2 { left: 24.75vw; top: 37%; }
.A-home-services .circle.circle-3 { left: 35.4vw; }
.A-home-services .circle.circle-4 { left: 46.1vw; top: 37%; }
.A-home-services .circle.circle-5 { left: 56.7vw; }
.A-home-services .circle.circle-6 { left: 67.4vw; top: 37%; }
.A-home-services .circle.circle-7 { left: 78.0vw; }
@keyframes zoomIn {
	0% { transform: scale(0); }
	80% { transform: scale(1.3); }
	100% { transform: scale(1); }
}
.A-home-services .Acolumn.open { transform: scale(1); }
.A-home-services .Acolumn.open:nth-child(even) { transform: scale(1,-1); }
.A-home-services .Acolumn.open:after { height: 8%; }
.A-home-services .Acolumn.open h3 { bottom: 102%; }
.A-home-services .Acolumn.open p { opacity: 1; }
.A-home-services .A-shadow-C {}




.A-home-numbers { background: var(--colorC); }
.A-home-numbers .Acolumn {
	position: relative;
	padding: 0 2vw 0 5vw;
}
.A-home-numbers .Acolumn .Apic {
	position: absolute;
	left: 0;
	top: 2vw;
	width: 4vw;
}
.A-home-numbers .Acolumn h3 { margin: 0;font-size: 48px;  font-family: var(--fontB); }
.A-home-numbers .Acolumn h3 strong {
	font-size: 48px;
	text-shadow: 0 0 1px black, 0 0 2px black;
}
.A-home-numbers .Acolumn p { margin: 0; font: 400 14px var(--fontB); }



.A-home-partners { background: var(--colorC); }
.A-home-partners h2 {
	margin: 0 0 96px;
	font: 700 44px var(--fontB);
	text-align: center;
	line-height: 0.9;
	color: black;
}
.A-home-partners .Acolumns { align-items: center; }
.A-home-partners .Acolumn {
	padding: 0 3%;
}



.A-portfolio {
	background: var(--colorB);
}
.A-home-portfolio h2 {
	margin: 0 0 96px;
	font: 700 44px var(--fontB);
	text-align: center;
	line-height: 0.9;
	color: var(--colorA);
}
.A-home-portfolio h2 strong { color: white; }
.A-portfolio .Aposts[data-navi="sides"] .Anavi { top: -60px; }
.A-portfolio .Aposts[data-navi="sides"] .Acontainer { margin: 0; }
.A-portfolio .Aposts[data-navi="sides"] .Anavi svg {
	fill: hsla(0, 0%, 100%, 0.35);
}
.A-portfolio .Aitem { padding: 0; }
.A-portfolio .Aitem h3 {
	margin: 8px 0 12px;
	color: white;
	font: 700 24px var(--fontB);
}
.A-portfolio .Aitem .text-box {
	height: auto;
	padding: 0 5% 0 40%;
	transform: scale(1,0);
	transform-origin: bottom;
	transition: 0.5s all;
	transition-delay: 0.6s;
}
.A-portfolio .Aitem .text {
	font-size: 14px;
	color: hsla(0, 0%, 100%, 0.52);
}
.A-portfolio .Aitem a {
	display: flex;
	flex-flow: column-reverse;
    height: 100%;
}
.A-portfolio .Aitem .image {
	height: 300px;
	transform: scale(1,0);
	transform-origin: top;
	transition: 0.5s all;
	transition-delay: 0.8s;
}
.A-portfolio .Aitem .category {
	position: absolute;
	bottom: 300px;
	left: 0;
	width: 36%;
	min-height: 116px;
	padding: 12px;
	color: black;
	font: 700 14px var(--fontB);
	background: var(--colorA);
	transform: scale(1,0);
	transform-origin: bottom;
	transition: 0.5s all;
	transition-delay: 0.8s;
}
.Aitem .more {
	margin-bottom: 16px;
	padding: 5px 11px 0;
	background: var(--colorA);
	color: black;
	font: 900 30px var(--fontB);
}
.Aitem .more:hover { background: white; }
.A-portfolio { counter-reset: line-number; }
.A-portfolio .Aitem {
  counter-increment: line-number;
}
.A-portfolio .Aitem .text-box:before {
  	content: counter(line-number)"/";
	position: absolute;
	right: 66%;
	top: 0;
	font: 700 40px var(--fontB);
	color: var(--colorA);
}

.A-portfolio .Aitem:nth-child(1) .text-box { transition-delay: 0.1s; }
.A-portfolio .Aitem:nth-child(2) .text-box { transition-delay: 0.2s; }
.A-portfolio .Aitem:nth-child(3) .text-box { transition-delay: 0.3s; }
.A-portfolio .Aitem:nth-child(4) .text-box { transition-delay: 0.4s; }
.A-portfolio .Aitem:nth-child(5) .text-box { transition-delay: 0.5s; }
.A-portfolio .Aitem:nth-child(1) .category { transition-delay: 0.3s; }
.A-portfolio .Aitem:nth-child(2) .category { transition-delay: 0.4s; }
.A-portfolio .Aitem:nth-child(3) .category { transition-delay: 0.5s; }
.A-portfolio .Aitem:nth-child(4) .category { transition-delay: 0.6s; }
.A-portfolio .Aitem:nth-child(5) .category { transition-delay: 0.7s; }
.A-portfolio .Aitem:nth-child(1) .image { transition-delay: 0.5s; }
.A-portfolio .Aitem:nth-child(2) .image { transition-delay: 0.6s; }
.A-portfolio .Aitem:nth-child(3) .image { transition-delay: 0.7s; }
.A-portfolio .Aitem:nth-child(4) .image { transition-delay: 0.8s; }
.A-portfolio .Aitem:nth-child(5) .image { transition-delay: 0.9s; }

.A-portfolio .mid-revealed .text-box { transform: scale(1,1); }
.A-portfolio .mid-revealed .category { transform: scale(1,1); }
.A-portfolio .mid-revealed .image { transform: scale(1,1); }



.A-blog { background: var(--colorC); }
.A-blog .Aposts .Aitems { flex-flow: row wrap; }
.A-blog .Aposts .Aitem {
	width: calc(50% - 24px);
	margin: 0 24px 24px 0;
}
.A-blog .Aposts .Aitem a {
	display: flex;
}
.A-blog .Aposts .Aitem .image {
	flex: 0 0 auto; 
	width: 40%;
	margin-right: 16px;
}

.A-blog-top { background: var(--colorA); text-align: center; }
.A-blog-top h1 {
	margin: 0;
	color: white;
	font: 700 40px var(--fontB);
	text-shadow: 0 0 1px white, 0 0 2px white;
}
.A-blog-top h1 strong {
	color: black;
	text-shadow: 0 0 1px black, 0 0 2px black;
}

.A-blog-page .Col1 { width: 100%; }
.A-blog-page .Col2 {
	position: absolute;
	right: 7%;
	top: 200px;
	padding: 0 2%;
}
.A-blog-page .Aposts .Aitem {
    width: calc(33.333% - 24px);
    margin: 0 24px 24px 0;
}
.A-blog-page .Aposts .Aitem:nth-child(2),
.A-blog-page .Aposts .Aitem:nth-child(4) {
    margin-right: calc(33.333% + 24px);
}
.A-blog-page .A-spheres {
	position: absolute;
	right: 17vw;
	top: 16vw;
	width: 18vw;
	height: 14vw;
	padding: 0;
	z-index: 9;
}


.A-blog .Aposts .Acontainer { overflow: visible; }
.A-blog .Aposts .Aitem > a,
.A-blog .Aposts .Aitem .text-box {
	perspective: 1000px;
}
.A-blog .Aposts .Aitem .image,
.A-blog .Aposts .Aitem h3 { transition: 0.8s all; }
.A-blog .Aposts .Aitem .text { transition: 0.4s all; }
.A-blog .Aposts .Aitem:hover .image {
	transform: rotateX(30deg) rotateY(15deg) translateX(50px) scale(1.3);
	opacity: 0.5;
}
.A-blog .Aposts .Aitem:hover h3 {
	transform: rotateX(10deg) rotateY(-20deg) translateX(50px) translateY(80px) translateZ(200px);
	transform: rotateX(30deg) rotateY(15deg) translateX(-80px) translateY(200px) translateZ(200px);
	text-shadow: 0 0 2px #e1e1e1, 0 0 4px #e1e1e1, 0 0 8px #e1e1e1;
}
.A-blog .Aposts .Aitem:hover .text { opacity: 0; }


.ACB-pagination .page-numbers {
    display: inline-block;
    width: 40px;
    padding: 10px 8px 6px;
	background: var(--colorA);
	font: 700 22px var(--fontB);
	color: white;
	text-shadow: 0 0 1px white, 0 0 2px white;
	border-radius: 50px;
	transition: 0.3s all;
}
.ACB-pagination .page-numbers.current { background: var(--colorB); }
.ACB-pagination .page-numbers:not(.current):hover { transform: scale(0.8); }
.Aposts .ACB-pagination-top { margin: 0 0 64px; }



.A-page-A { align-items: center; background: var(--colorC); }
.A-page-A .Col2 img { 
    width: 100%;
	height: auto;
    object-fit: contain;
}



.A-page-B .A-shadow {
	position: absolute;
	left: 15vw;
	bottom: calc(100% - 4px);
	width: 70vw;
	height: auto;
	pointer-events: none;
}
.A-page-B p { margin: 4px 0 16px; }
.A-page-B h2 {
	margin-top: 48px;
	font: 700 26px var(--fontB);
	color: var(--colorA);
	text-shadow: 0 0 1px var(--colorA), 0 0 2px var(--colorA);
}
.A-page-B h2 strong {
	color: black;
	text-shadow: 0 0 1px black, 0 0 2px black;
}
.A-page-B h3 {
	position: relative;
	margin: 48px 0 0;
	font: 700 19px var(--fontB);
	color: black;
	text-shadow: 0 0 1px black, 0 0 2px black;
}
.A-page-B h3:before {
	content: "+";
	position: absolute;
	left: -40px;
	top: -15px;
	font: 700 48px var(--fontB);
	color: var(--colorA);
	text-shadow: 0 0 1px var(--colorA), 0 0 2px var(--colorA);
}





.A-about-icons {
	flex-flow: row wrap;
    place-content: center;
    align-items: flex-start;
}
.A-about-icons .Acolumn {
	flex: 0 0 auto;
	position: relative;
	width: 33.333%;
	padding: 0 4%;
	margin-bottom: 32px;
}
.A-about-icons .Acolumn:before {
	content: "";
	position: absolute;
	left: 6%;
	top: 102px;
	width: 4px;
	height: calc(100% - 102px);
	background: var(--colorA);
}
.A-about-icons img { width: auto; height: 94px; }
.A-about-icons h2 {
	margin: 8px 0 16px;
	font: 700 28px var(--fontB);
	text-shadow: 0 0 1px black, 0 0 2px black;
}
.A-about-icons p { margin: 0; }



.A-page-C { background: var(--colorA); }
.A-page-C .Acolumn { position: relative; padding: 0 2%; }
.A-page-C p {
	margin: 0;
	color: white;
	font: 700 18px var(--fontB);
	text-shadow: 0 0 1px white;
}
.A-page-C h3 {
	margin: 0 0 32px;
	font: 700 22px var(--fontB);
	text-shadow: 0 0 1px black, 0 0 2px black;
}
.A-page-C .Col1 { text-align: right; }
.A-page-C .Col2 { padding-right: 10%; }
.A-page-C .Col2 h3 {
	margin: 0;
	font: 700 28px var(--fontB);
}
.A-page-C .Col2 p { font: 700 22px var(--fontB); }



.A-page-video {}



.A-dark-cover-b { padding: 160px 40% 128px 10%; }
.A-dark-cover-b .Apic {
	position: relative;
	padding: 0;
	z-index: 9;
	text-align: right;
}
.A-dark-cover-b .Apic img { width: auto; height: 80px; }
.A-dark-cover-b .wp-block-post-featured-image {
	position: absolute;
	bottom: 0;
	right: 4%;
	width: 40%;
	height: 85%;
	mix-blend-mode: hard-light;
}
.A-dark-cover-b .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-mask-image: url(img/cover-mask.png);
	mask-image: url(img/cover-mask.png);
	-webkit-mask-size: 100% 140%;
	
	
}
.A-dark-cover-b h1 {
	margin: 0;
	font: 700 44px var(--fontB);
	text-align: right;
	color: var(--colorA);
	text-shadow: 0 0 1px var(--colorA), 0 0 2px var(--colorA);
}
.A-dark-cover-b h1 strong {
	position: relative;
	left: -60px;
	top: 4px;
	font: 700 96px var(--fontB);
	color: white;
	text-shadow: 0 0 1px white, 0 0 2px white;
	letter-spacing: -8px;
}
.A-dark-cover-dm h1 strong { left: -124px;	top: 22px; }




.A-service-A { position: relative; }
.A-service-A h2 {
	margin: 56px 0 64px;
    padding-left: 46%;
	font: 700 26px var(--fontB);
	text-align: right;
	text-shadow: 0 0 1px black, 0 0 2px black;
}
.A-service-A h2 strong {
	color: var(--colorA);
	text-shadow: 0 0 1px var(--colorA), 0 0 2px var(--colorA);
}
.A-service-A .Acolumn { position: relative; }
.A-service-A .Col1 { padding-right: 13%; }
.A-service-A .Col1 .Apic { margin-top: 24px; text-align: center; }
.A-service-A .Col1 .Apic svg { width: 108px; height: auto; stroke-width: 2; }
.A-service-A .Col1 .Apic img { width: 108px; height: auto; }
.A-service-A .draw-svg {
	fill: transparent;
	stroke: black;
}
.A-service-A .draw-svg.on {
	fill: black;
	stroke: transparent;
}
.A-service-A .c-line {
	position: absolute;
	left: 8%;
	top: 10%;
	width: 55%;
	height: auto;
	stroke-width: 4;
	fill: transparent;
	stroke: var(--colorA);
	filter: drop-shadow(16px 24px 8px hsla(0, 0%, 0%, 0.4));
}
.A-service-A .c-line.on {
	fill: var(--colorA);
	stroke: transparent;
}


.A-dark-cover-w .Apic { padding-left: 0; }

.A-work-A { background: var(--colorA); min-height: 10vw; }
.A-work-A .Acolumn { position: relative; }
.A-work-A .Apic { line-height: 0; }
.A-work-A .Col1 .Apic {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
}
.A-work-A .Col2 .Apic {
	position: absolute;
	left: 0;
	bottom: -3.5vw;
	width: 60%;
}

.A-work-categories {
	display: flex;
	padding: 32px 10%;
	flex-flow: row wrap;
	margin-bottom: 80px;
	background: var(--colorC);
	place-content: flex-end;
}
.A-work-categories .A-cat {
	margin: 8px;
	padding: 0 8px;
	font: 700 20px var(--fontB);
	color: black;
	text-shadow: 0 0 1px black;
	border-right: 4px solid var(--colorA);
	cursor: pointer;
}
.A-work-categories .A-cat.active,
.A-work-categories .A-cat:hover {
	color: var(--colorA);
	text-shadow: 0 0 1px var(--colorA);
	
}




.draw-svg {
	stroke: black;
	opacity: 0;
	transition: 1s all 2s, 0s opacity 0s;
}
.draw-svg path {
	stroke-dasharray: 100;
	stroke-dashoffset: -100;
	transition-timing-function: ease-in-out;
}

.draw-svg svg {
	fill: transparent;
	stroke: black;
}
.draw-svg.on svg {
	fill: black;
	stroke: transparent;
}



.A-project-top { background: var(--colorA); }
.A-project-top .wp-block-post-featured-image {
	position: relative;
	width: 100%;
	height: 20vw;
	background: url(img/laptop.jpg) no-repeat;
	background-size: contain;
}
.A-project-top .wp-block-post-featured-image img {
	position: absolute;
    left: 17%;
    top: 10%;
    width: 66%;
    height: 65%;
	object-fit: cover;
}
.A-project-top .Col1 { text-align: right; }
.A-project-top .Col1 p {
    position: relative;
    left: -20%;
    width: 120%;
	margin: -24px 0 0;
	padding-right: 5vw;
	font: 700 16px var(--fontB);
	text-shadow: 0 0 1px black;
}
.A-project-top .Col2 { padding-left: 32px; }
.A-project-top h1 {
	margin-top: 0;
	font: 700 32px var(--fontB);
	text-shadow: 0 0 1px black, 0 0 2px black;
}
.A-project .A-project-top h2 {
	margin: 32px 0 0;
	font: 700 24px var(--fontB);
	color: white;
	text-shadow: 0 0 1px white, 0 0 2px white;
	text-align: left;
}
.A-project-top .Col2 li,
.A-project-top .Col2 p {
	color: white;
}
.A-project-top .Col2 a,
.A-project-top .Col2 li strong,
.A-project-top .Col2 p strong { color: black; }

.A-project h2 {
	position: relative;
	margin: 0;
	font: 700 30px var(--fontB);
	line-height: 0.5;
	text-align: right;
	color: black;
	text-shadow: 0 0 1px black, 0 0 2px black;
	z-index: 99;
}
.A-project h2 strong {
	position: relative;
	left: -128px;
	font: 700 60px var(--fontB);
	color: var(--colorA);
	text-shadow: 0 0 1px var(--colorA), 0 0 2px var(--colorA);
}
.A-project .Acarousel picture { text-align: center; }
.A-project .Acarousel img { max-width: fit-content; }
.A-project .Acarousel .Aitems { align-items: center; }
.A-project .Acarousel .Aitems .Acolumn {
	padding: 0;
	opacity: 0.4;
	transition: 1s all;
}
.A-project .Acolumns:not(.A-project-video) .Acarousel .Aitems .Acolumn { cursor: zoom-in; }
.A-project .Acarousel .Aitems .Acolumn:hover { opacity: 1; }
.A-project-website .Acarousel .Aitems {
	align-items: flex-start;
	max-height: 800px;
}
.A-project-website .Acarousel .Aitems .Acolumn { padding: 0 16px; }


.A-project-website { position: relative; background: var(--colorC); }
.A-project-website .Col1 { padding: 64px 3% 0 10%; }
.A-project-website .Col2 { padding-right: 10%; }
.A-project-website h2 { margin-bottom: 200px; }
.A-project-website .Col1 p {
	margin: 0;
	padding-left: 52px;
	font: 300 18px var(--fontA);
	line-height: 2;
	letter-spacing: 40px;
}
.A-project-website .Col1 p:last-child { padding: 0; }
.A-project-website .Acarousel .Anavi {
	position: absolute;
	top: 16px;
	right: -96px;
}


.A-project-website .A-spheres {
	position: absolute;
	left: 1vw;
	top: 14.5vw;
	width: 16vw;
	height: 12vw;
	padding: 0;
	z-index: 9;
}



.A-project-design { background: var(--colorC); align-items: center; }
.A-project-design h2 { padding-right: 25%; }
.A-project-design h2 strong { left: -88px; }



.A-project-info { background: var(--colorC); align-items: center; }
.A-project-info h2 { padding-right: 55%; margin-bottom: 96px; }
.A-project-info h2 strong { left: -16px; }

.A-project-video { background: var(--colorC); align-items: center; } 
.A-project-video h2 strong { left: -88px; }
.A-project-info .Col2 picture { text-align: right; }
.A-project-info .Col2 img,
.A-project-design .Col1 img,
.A-project-video .Col1 img { max-width: fit-content; }
.A-project-video .wp-block-video { pointer-events: all !important; }
.A-project-video video { max-width: 100%; }
.A-project-video .Acarousel .Aitems .Acolumn { opacity: 1; }


.home .A-birds {
	position: absolute;
	left: 25%;
	top: 0;
	width: 75%;
	height: 100%;
	background: hsla(0, 0%, 0%, 0.01);
	-webkit-mask-image:
  linear-gradient(90deg, transparent 5%, black 15%, black 80%, black 100%);
	-webkit-mask-size: 100% 100%;
	mask-image: linear-gradient(90deg, transparent 0%, black 20%, black 80%, black 100%);
	mask-size: 100% 100%;
	z-index: 999;
	pointer-events: none;
}
.home .A-bird {
	position: absolute;
	left: -15%;
	top: 65%;
	width: 250px;
	height: 250px;
	z-index: 999;
	transform: scale(0.5) rotateY(180deg);
	transition: 5s all linear;
	filter: drop-shadow(-12px 12px 20px black);
}
.home .A-bird-B { top: 60%; transition: 6s all linear; }
.home .A-bird-B3 {
	left: -25%;
	top: 90%;
	transition: 6s all ease-in-out;
	transform: scale(0.75) rotateY(180deg);
}
.home .A-bird-B img,
.home .A-bird-A img {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: contain;
}



.A-post-cover { background: var(--colorA); }
.A-post-cover .Col1 {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    place-content: flex-end;
	position: relative;
	width: 35%;
	height: 500px;
	padding: 32px 32px 128px 48px;
	text-align: right;
}
.A-post-cover .Col2 {
	position: relative;
	width: 65%;
}
.A-post-cover .Col1 img { height: 32px; }
.A-post-cover .Col1 p {
	position: relative;
	font: 700 20px var(--fontB);
	color: white;
	text-shadow: 0 0 1px white;
}
.A-post-cover .Col1 p:after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -10px;
	width: 200px;
	height: 8px;
	border-radius: 4px;
	background: white;
}
.A-post-cover .Col1 h1 {
	position: relative;
	margin: 24px 0 0;
	font: 700 32px var(--fontB);
	line-height: 1.1;
	color: black;
	text-shadow: 0 0 1px black, 0 0 2px black;
}
.A-post-cover .Col2 img { height: 500px; }


.A-post-content { background: var(--colorC); }
.A-post-content .Col1 {
	position: relative;
	width: 35%;
	padding: 160px 20% 0 0;
}
.A-post-content .Col2 {
	position: relative;
	width: 65%;
	padding: 32px 10% 64px 0;
}

.A-post-content .A-spheres {
	position: absolute;
	left: 10vw;
	top: -60px;
	width: 12vw;
	height: 8vw;
	padding: 0;
}
.A-post-content .A-spheres canvas {
	position: absolute;
	right: 0;
	top: 0;
}

.A-post-content .A-spheres-B {
	left: unset;
	right: -2vw;
	top: 50%;
	width: 17vw;
	height: 12vw;
}


.A-post-content iframe[allowfullscreen] {
    position: relative;
    left: -35vw;
    width: 100vw;
}










/* 	--------------- */
/*	FLIP SQUARES	*/
/* 	--------------- */
.A-flip {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	perspective: 1000px;
	transition: .9s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	z-index: 9;
	cursor: pointer;
}
.A-flip > * {
	transition: .9s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.A-flip:hover .A-flip-front { transform: rotateY(-180deg); }
.A-flip:hover .A-flip-back { transform: rotateY(0deg); }
.A-flip .A-flip-front,
.A-flip .A-flip-back {
	position: relative;
	transform-style: preserve-3d;
	perspective: 1000px;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
    width: 18vw;
    height: 18vw;
	border-radius: 500px;
}
.A-flip-front {
	/* background: #292929; */
	position: relative;
	cursor: pointer;
	background: linear-gradient(135deg, white, hsl(0, 0%, 90%), hsl(0, 0%, 80%));
	box-shadow: -2px -2px 8px white inset,
				2px 2px 8px white,
				2px 2px 8px rgb(0 0 0 / 25%) inset,
				-2px -2px 8px rgb(0 0 0 / 25%),
				6px 30px 30px hsla(0, 0%, 0%, 0.1);
}
.A-flip .A-flip-back {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 0;
	transform: rotateY(180deg) translateZ(0px);
	background: white;
	background: linear-gradient(135deg, white, hsl(0, 0%, 85%), hsl(0, 0%, 70%));
	box-shadow: -2px -2px 8px white inset,
				2px 2px 8px white,
				2px 2px 8px rgb(0 0 0 / 25%) inset,
				-2px -2px 8px rgb(0 0 0 / 25%);
}
.A-flip .A-inner {
    display: flex;
    flex-flow: column;
    place-content: center;
	transform-style: preserve-3d;
	width: 100%;
	height: 100%;
	padding: 32px;
	
}
.A-flip .A-inner .A-inner-2 {
	align-items: stretch;
	transform-style: preserve-3d;
	perspective: 1000px;
	transform: translateZ(95px) scale(0.81);
	text-align: center;
	position: relative;
	z-index:2;
}
.A-flip-front .A-inner-2 { padding: 0 16px; }
.A-flip-back .A-inner-2 p {
	position: relative;
	width: 160%;
	left: -30%;
	padding: 16px 0;
	margin: 0;
	font: 700 24px var(--fontB);
	color: black;
}
.Col2 .A-flip-back .A-inner-2 p {
	font: 700 34px var(--fontB);
	color: black;
}
.A-flip-back .A-inner { transform: translateZ(5px); }
X.A-flip-back .A-inner:before {
	content: "";
	position: absolute;
    left: 20%;
    top: 20%;
    width: 60%;
    height: 60%;
    background: hsla(0, 0%, 100%, 0.3);
	border-radius: 500px;
}
.A-flip-front .A-inner .A-icon { margin: 0 auto; }
.A-flip-back .A-inner .A-icon {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0;
    width: 100%;
    padding: 30%;
	opacity: 0.6;
    mix-blend-mode: difference;
}


.A-flip .A-fish-01 {
    transform: scale(1.25);
    margin: 24px 0 -24px !important;
    margin: 0 !important;
}
.A-flip .A-fish-02 img,
.A-flip .A-octopus-02 img,
.A-flip .A-pasta-02 img { padding: 0 32px; }
.A-flip .A-lemon,
.A-flip .A-knot,
.A-flip .A-anchor {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 32px;
	opacity: 0.1;
    transform: translateZ(1px);
}
.A-flip .A-anchor { transform: rotate(15deg) translateZ(1px); }
.A-flip .A-octopus { height: 70%; }
.A-flip .A-lemon img,
.A-flip .A-knot img,
.A-flip .A-octopus img,
.A-flip .A-anchor img { width: 100%; height: 100%; object-fit: contain; }
.A-flip .A-knot img { object-position: right; }
.A-flip .A-pasta {
    width: 100%;
    margin: 0px 0 0px 25% !important;
}

















.A-author-info {  }
.A-author-info .author_link { display: block; margin-top: 16px; }
#author-description > p { margin: 0; }
#author-description h2 { margin: 0; }
#author-description .bio {}
.A-archive .A-page-title.author { margin-bottom: 48px; }


/* 	--------------
	ARCHIVE
 	-------------- */
.A-archive { position: relative; }
.A-archive .A-page-title { margin: 0; }
.A-archive .A-subcategories {
	margin-top: 16px;
}
.A-archive .A-subcategories > a {
	margin-right: 16px;
}
.A-archive .A-list {
	display: flex;
	flex-flow: row wrap;
	margin-top: 48px;
}
.A-archive .A-list > a {
	width: 33.333%;
	margin-bottom: 32px;
}
.A-pagination { margin-top: 64px; }
.A-pagination ul {
	display: flex;
    place-content: center;
	padding: 0;
	list-style: none;
}
.A-pagination ul li { margin: 0 8px; }
.A-pagination ul li a { color: black; }




/* 	--------------
	FOOTER
 	-------------- */
.A-footer {
	display: flex;
    padding: 64px 0 0;
	background: var(--colorC);
}
.A-footer-col {
    width: 25%;
    padding: 16px;
    float: left;
}
.A-footer-col .A-logo {
	width: 100%;
	text-align: center;
}
.A-footer-col .A-logo img {
    width: 100%;
	max-width: 300px;
	max-height: 120px;
    height: auto;
    padding: 0 32px;
	object-fit: contain;
    object-position: left;
}
.A-footer-col h3 {
	margin: 0;
	font: 700 18px var(--fontA);
	color: var(--colorB);
}
.A-footer-col label,
.A-footer-col p,
.A-footer-col li,
.A-footer-col a {
    display: block;
	margin: 2px 0;
	font: 400 16px var(--fontA);
	color: black;
}
.A-footer-col label { display: inline-block; margin-right: 8px; }
.A-footer-col a:hover { color: var(--colorB);  font-weight: 700; }
.A-footer-col ul { padding: 0; margin: 0; list-style: none; }

footer a { text-decoration: none; }
footer .A-social {
	display: flex;
    padding: 32px;
	text-align: center;
}
footer .A-social a {
	margin: 0 16px 0 0;
	cursor: pointer;
}
footer .A-social svg { 
	height: 24px;
	fill: var(--colorA);
	transition: 0.3s all;
}
footer .A-social a:hover svg { fill: var(--colorB); transform: scale(1.2); }



.A-footer-created {
	position: relative;
    width: 100%;
    text-align: center;
    padding: 8px;
    background: var(--colorC);
	z-index: 9;
}
.A-footer-created a {
	font-size: 14px;
    font-weight: 700;
    color: var(--colorA);
}
.A-footer-created a:hover { color: var(--colorB); }
.A-footer-created img {
    height: 40px;
    margin: 16px 0 8px 0;
}






/* PARALLAX */
.actus-parallax { overflow: hidden; }

.velaki {
    display: none;
    background: var(--colorA);
    position: fixed;
    bottom: 16px;
	left: calc(100% - 64px);
    padding: 8px 12px 12px;
    font-size: 20px;
    font-weight: 700;
    color: white;
    transform: rotate(-90deg) scale(1);
    cursor: pointer;
    z-index: 9999;
    border-radius: 7px;
    box-shadow: -4px 4px 8px hsla(0, 0%, 0%, 0.3);
    transition: 0.3s;
}








/* **************************************************************** */
@media (max-width: 1600px) {
/* **************************************************************** */




}




/* **************************************************************** */
@media (max-width: 1280px) {
/* **************************************************************** */

	


}






/* **************************************************************** */
@media (max-width: 1024px) {
/* **************************************************************** */

	
}





/* **************************************************************** */
@media (max-width: 800px) {
/* **************************************************************** */

	header nav .menu-toggle { display: inline-block; }
	header nav ul { display: none; }
	
}





/* **************************************************************** */
@media (max-width: 640px) {
/* **************************************************************** */


	
}



/* **************************************************************** */
@media (max-width: 480px) {
/* **************************************************************** */

	

}



/* **************************************************************** */
@media (max-width: 320px) {
/* **************************************************************** */


}












.fontA { font-family: var(--fontA) !important; }
.fontB { font-family: var(--fontB) !important; }