@font-face {font-family: font_title;src: url('../font/title.ttf');}
@font-face {font-family: font_numeric;src: url('../font/numeric.ttf');}
@font-face {font-family: font_content;src: url('../font/content.ttf');}
:root { --header_h: 12vh; --footer_h: 8vh; }
* { margin: 0; padding: 0; width: 100%; box-sizing:border-box; text-rendering:optimizeLegibility; }
*:focus{ border: none; outline: none; }
html { overflow:hidden; height: 100%; font-family: font_content; font-size: 6vw; filter: invert(0.015); }
body { width: 100%; height: 100%; color: #fff; background: #000; overflow: hidden; perspective: 150vw; background-image: url(../res/bg/wood_black_1.jpg); background-size: cover; background-position: center; background-repeat: repeat, no-repeat;background-blend-mode: lighten; }
header { position: fixed; top: calc(((100vh - 80vw) / 2) - 10vh); left: 10vw; width: 80vw; height: 80vw; border: 0vw rgba(0,0,0,0) solid; display: grid; justify-items: center; align-items: center; border-radius: 50%; box-shadow: none; z-index: 300; transform-origin: center; transition: 0.5s all ease-in-out; box-sizing: border-box; }
header a { display: contents; }
.header_bg { position: absolute; width: 120%; height: 120%; filter: blur(1px); background: url(../res/bg/wood_black_1.jpg); background-size: cover; background-repeat:  no-repeat; background-position: center; opacity: 0; border-radius: 50%; box-sizing: border-box; }
.header_2 { top: -9vw; left: -12vw; padding: 3vw; width: 60vw; height: 60vw; border: 0.75vw #999 dashed; transform: rotate(-15deg); box-shadow: 0px 0px 0.5rem 0.3rem rgb(0 0 0); transition: 0.5s all ease-in-out; }
.logo_small { width: 120%; height: auto; transform-origin: center; z-index: 1; box-sizing: border-box; }
.header_2 .logo_small { width: 80%; transition: 0.5s all ease-in-out; filter: drop-shadow(-2px 1px 3px rgb(0,0,0)) drop-shadow(3px 1px 3px rgb(0,0,0)); }
.header_2 .header_bg { position: absolute; width: 100%; height: 100%; opacity: 0.95; transition: all 0.5s; }
.logo_full { width: 90%; height: auto; }
.logo_font { display: inline-block; width: auto; font-family: font_content; color: #ffe600; }
.mnu { position: fixed; display: grid; justify-items: center; align-items: center; top: 8vh; right: 0; width: 75vw; font-family: font_title; z-index: 300; }
.mnu .toggler { position: fixed; top: 0; right: 0; padding: 1em; width: auto; color: #ffe600; background-image: url(../res/paint_menu.png); background-size: 100% 75%; background-position: center;  background-repeat: no-repeat; z-index: 2; filter: drop-shadow(0px 0px 2px rgba(0,0,0,1)); }
.mnu ul { display: none/*grid*/; justify-items: center; align-items: center; padding: 15vh 0; height: 70vh; text-align: right; background: url(../res/paper_1.png); background-size: 100% 100%; background-position: center;  background-repeat: no-repeat; overflow: hidden; z-index: 1; }
.mnu ul li a { font-family: font_title; color: #222; text-decoration: none; text-shadow: 0 0 rgb(0,0,0); filter: drop-shadow(0px 0px 0px rgb(0,0,0)); }
h1, h2, h3 { text-align: center; font-weight: normal; }
h1, h3 { font-family: font_title; }
h1 { font-size: 8vw; }
h2 { font-family: font_content; font-size: 9vw; color: #999; }
h3 { font-size: 6vw; }
p { text-align: center; }
ul { height: 90%; list-style: none; }
li { padding: 1vh 6vw; line-height: 10vw; }
ul li img { width: 60vw; }
.numb { font-family: font_numeric; }
.call_inline {width: auto; margin: 2vw 0 6vw; padding: 5vw 12vw 10vw;z-index: 1001;background: url(../res/paint_menu.png);background-size: 95% 95%;border-radius: 0 0 0 6vw; background-repeat: no-repeat;background-position: 80% center;}
.small_bullet, .small_bullet_inline { font-size: 4.5vw;  }
.small_bullet li { padding: 0 0 2vw 0; line-height: 4.5vw; }
.small_bullet_inline li {display: inline-block;  padding: 0 1vw 2vw ; width: auto;  line-height: 4.5vw; }
.side a { color: #ffe600;  }
.side p { margin: 0; padding: 0 0 5vw; }
.side_1{  display: grid; justify-items: center; align-items: auto; position: absolute; top: 0; left: 0; width: 100vw; height: 100%; text-align: center; /*mix-blend-mode: difference;*/ overflow: hidden; overflow-y: auto; z-index: 200; }
.side_first { display: none !important; }
.side_1 {  }
.side_in { display: grid; /*transform: rotateY(90deg);*/ animation: x3_side_in 1s ease-out forwards; z-index: 201; } @keyframes x3_side_in { 0%{display: none; opacity: 0; } 5%{ display: none; opacity: 0; } 5.001%{ /*transform: rotateY(90deg);*/ display: grid; opacity: 0; } 100%{ /*transform: rotateY(0deg);*/ display: grid; opacity: 1; } }
.side_out { pointer-events: none; display: grid; /*transform: rotateY(0deg);*/ animation: x3_side_out 1s ease-in forwards; z-index: 200; } @keyframes x3_side_out { 0%{ transform: rotateY(0deg); display: grid; opacity: 1; } 50%{ transform: rotateY(-90deg); display: grid; opacity: 1; } 50.001%{ display: none; opacity: 0; } 100%{ display: none; opacity: 0; } }
.s_bg_1, .s_bg_2, .s_bg_3, .s_bg_4, .s_bg_5, .s_bg_6 { position: absolute; top: 0; left: 0; height: 100%; opacity: 1; pointer-events: none; /*background: rgba(0, 0, 0, 0.25);*/ z-index: -1; }
.bg_vid { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background: url(../res/bg/wood_black_1.jpg); background-size: cover; background-blend-mode: screen; mix-blend-mode: screen; background-position: center; opacity: 1; overflow: hidden;}
.bg_vid video { width: 100vw; height: 100vh; object-fit: fill; }
.what_we_do li { filter: drop-shadow(1px 1px 3px #000) drop-shadow(1px 1px 3px #000) drop-shadow(1px 1px 3px #000); }
.get_it_running_keep_it_running { display: grid; justify-items: center; height: 80vw; margin: 0 auto 10vw; font-family: font_title; font-size: 8vw; }
.get_it_running_keep_it_running .text_it { position: absolute; margin: 60vw 0 3vw; color: #ffe600; /*padding: 3vw 0; background: rgba(28,28,28,0.5); transform: rotate(-3deg); width: 120%;*/ filter: drop-shadow(1px 1px 2px #000) drop-shadow(1px 1px 2px #000) drop-shadow(1px 1px 2px #000); }
.get_it_running_keep_it_running .text_it .get_it { padding: 0 10vw 0 0; }
.get_it_running_keep_it_running .text_it .keep_it { padding: 0 0 0 10vw; transform:  rotate(358.75deg); }
.get_it_running_keep_it_running video { position: absolute;  height: 80vw; opacity: 0.35; filter: contrast(3); object-fit: fill; -webkit-mask-image: -webkit-gradient(linear, left 50%, left 90%, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); }
.njet { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: grid; justify-content: center; align-content: center; background: rgba(0,0,0,0.95); z-index: 1000000; }
.cuombo .b3_multiselect {position: relative; overflow: hidden; }
.cuombo .b3_multiselect div { float: left; margin:  0 calc(2% / 2); padding: 2% 0 3%; width: calc(90% / 5);  text-align: center; border: 1px dashed #444; border-radius: 5vw; background-color: rgba(0,0,0,0.5); }
.b3_radio_selected { border: 1px solid #444 !important; background-color: rgba(0,0,0,1) !important; filter: invert(100%); }
footer { display: grid; justify-items: center; align-items: bottom; width: 100vw; text-align: center; background: linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0)); }
footer .call_215-service { padding: 4vw 0 5vw; color: #eee; font-family: font_content; text-decoration: none; background: rgba(0,0,0,0.75); border: double 4px #191919; border-left: none; border-right: none; box-sizing: border-box; }
footer .call_215-service span { display: inline-block; padding: 3vw 0 1vw; width: auto; color: #999; }
footer .call_215-service video { margin: 2vw 0 0; width: 80vw; /*filter: grayscale(1);*/ }
footer .clopyright { padding: 5vw 0 7vw; border-top: double 4px #191919; background: #000; }
footer .clopyright p:nth-child(1), footer .clopyright p:nth-child(2) { display: inline-block; width: auto; }
footer .map .address { padding: 2vw 0 4vw; }
footer .working_hours { padding: 0 0 5vw; display: grid; justify-items: center; align-items: center; grid-template-columns: 1fr 1fr; }
footer .working_hours .days { padding: 2vw 2vw 0 0; font-size: 5vw; text-align: right; color: #999; }
footer .working_hours .hours { padding: 1vw 0 0 1vw; text-align: left; }
footer .privacy_link { color: #ccc; font-size: 5vw; }

.container { display: grid; justify-content: center; align-content: center; grid-template-columns: auto auto; background: linear-gradient(0deg, rgba(0,0,0,0.95), rgba(0,0,0,0.5)); }
.text-box { position: relative; height: var(--footer_h); cursor: pointer; }
.text-box:hover { cursor: pointer; }
.masque { height: 100%; font-weight: 900; display: block; }
.masque img { margin-top: calc(var(--footer_h) * (3/7) /2); height: calc(var(--footer_h) * (4/7)); }
.masque:nth-child(2) { position: absolute; top: 0; left: 0; clip-path: inset(-1% -1% 50% -1%); animation: x3_unhover 0.75s ease-out forwards; }
.masque:nth-child(2) img { filter: saturate(0%) invert(0); }
.mactive .masque:nth-child(2) { display: none; }
@keyframes x3_swiper { 0%{clip-path: inset(-1% -1% -1% -1%); } 50%{clip-path: inset(-1% -1% 100% -1%); } 50.001%{clip-path: inset(100% -1% -1% -1%); } 100%{clip-path: inset(-1% -1% -1% -1%); } }
.text-box:hover > .masque:nth-child(2) { animation: x3_hover 0.75s ease-out forwards; }
@keyframes x3_hover { 0%{clip-path: inset(-1% -1% -1% -1%); } 100%{clip-path: inset(-1% -1% 100% -1%); } }
@keyframes x3_unhover { 0%{clip-path: inset(-1% -1% 100% -1%); } 100%{clip-path: inset(-1% -1% -1% -1%); } }
.notation { padding: 0.5em; border: 1px dashed; font-size: 80%; }
.smoke_out { animation: triangle-animation 10s linear infinite; } @keyframes triangles-rotation{ 0%{transform: rotate(0deg);} 100%{transform: rotate(-360deg);} }

#contact { padding: 0; z-index: 10; }
.f_mail {  }
.f_mail input { border-bottom: none; }
.f_message { height: 35vh; }
.f_submit, .login_submit { height: 6vh; border-radius: 50em; background: #333; }
input, textarea, button { font: 400 5vh font_content; }
fieldset { border: medium none !important; }
input, textarea { padding:3vh;  width:100%; color: #fff;  font-size: 6vw; border:1px dashed #fff; background: rgba(0,0,0,0.15); }
.input_1st{ border-radius: 3vh 3vh 0 0; }
input:hover, textarea:hover { transition:border-color 0.3s ease-in-out; border:1px solid #AAA; }
textarea { height:25vh; max-width:100%; resize:none; }
button[type="submit"] { cursor:pointer; width:100%; border: 1px dashed #fff; border-radius: 0 0 3vh 3vh; background: rgba(0,0,0,0.75); color:#FFF; margin:0 0 5px; padding:10px; font-size:15px; }
button[type="submit"]:hover { background:#09C; transition:background-color 0.3s ease-in-out; }
button[type="submit"]:active { box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5); }
input:focus, textarea:focus { outline:0; border: 1px dashed #fff; }
::-webkit-input-placeholder { color:#ddd; } :-moz-placeholder { color:#ddd; } ::-moz-placeholder { color:#ddd; } :-ms-input-placeholder { color:#ddd; }

.divider { display: block; margin: 2rem auto; padding: 0; width: 100%; height: auto; transform: rotate(355deg); }
.draggable { float: left; width: 6vh; height: 6vh;  border-radius: 50%; background-size: 90%; background-position: center; background-repeat: no-repeat; background-color: rgba(255,255,255,0.5); background-image: url(../res/svg/arrow_right_circle.svg);}
.draggable.is-pointer-down { background-color: rgba(255,255,255,1); z-index: 2; }
.draggable.is-dragging { opacity: 0.7; box-shadow: 0px 0px 50px 0px rgba(255,255,255,1); transition: box-shadow 0.25s; }
.map { padding: 0; }
.map img { margin: 0; width: 100%; }
.map_nav { padding: 7vw 0 10vw; border-top: double 4px #222; }
.map_nav .nav_title { margin: 2vw 0 5vw 0; font-family: font_title; color: #aaa; }
 .ft_2 .nav_title { margin: 5vw 0 0; font-family: font_title; color: #aaa; }
.map_nav a { display: inline-block; margin: 0 2vw; padding: 2vw; width: 40%; color: #111; text-decoration: none; font-family: font_content; font-weight: bold; border-radius: 5rem; background: #ffe600; }
.tom_poulos { background-color: rgba(255,255,255,1); }
.e_error_shake { animation: shake 0.5s; animation-iteration-count: 1; } @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); border-width: 5px; border-color: rgb(255,25,25);} 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); border-width: 5px; border-color: rgb(255,25,25);} 100% { transform: translate(1px, -2px) rotate(-1deg); border-width: unset; border-color: unset;}}

/* LANDSCAPE --------------------------------------------------------------------------------------- */
@media screen and (orientation:landscape) {
	html { font-size: 2vh; }
	body { background: #060606 url(../res/grunge/bg_l.jpg); }
	header { top: 10vh; left: calc(((100vw - 80vh) / 2)); width: 80vh; height: 80vh; }
	.header_2 { top: -3.5vh; left: -6.5vh; padding: 1.5vh; width: 30vh; height: 30vh; border: 0.25vh #999 dashed; }
	.logo_small { width: 60%; height: auto; transform-origin: center; }
	.header_bg { position: absolute; width: 60%; height: 60%; filter: blur(1px); background: url(../res/bg/wood_black_1.jpg); background-size: cover; background-repeat:  no-repeat; background-position: center; opacity: 0; border-radius: 50%; box-sizing: border-box; }
	.logo_full { width: 55%; height: auto; }
	.call_inline { display: none; }
	.bg_vid { background: url(../res/bg/wood_black_2.jpg); background-size: cover; }
	ul { height: unset; }
	li {  line-height: 3vh; }
	h1 { font-size: 6.6vh; }
	h2 { font-size: 6.6vh; }
	h3 { font-size: 4vh; }
	input, textarea, .login input { padding:1vh; font-size: 3vw; }
	.masque { height: 100%; }
	.divider { display: none; }
	.cuombo, .keyboard { transform: scale(0.5); }
	.side p { padding: 0 0 3vh; }
	.side_3 #email, .login_submit { margin: auto; width: 40vw; }
	.side_1 ul, .side_2 form { margin: auto; width: 90vw; }
	.side_in {  transform: rotateX(-90deg); animation: x3_side_in 1s ease-out forwards; z-index: 201; } @keyframes x3_side_in { 0%{display: none; opacity: 0; } 50%{ display: none; opacity: 0; } 50.001%{ transform: rotateX(-90deg); display: block; opacity: 1; } 100%{ transform: rotateX(0deg); display: block; opacity: 1; } }
	.side_out {  transform: rotateX(0deg); animation: x3_side_out 1s ease-in forwards; z-index: 200; } @keyframes x3_side_out { 0%{ transform: rotateX(0deg); display: block; opacity: 1; } 50%{ transform: rotateX(90deg); display: block; opacity: 1; } 50.001%{ display: none; opacity: 0; } 100%{ display: none; opacity: 0; } }
	.what_we_do { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; z-index: 1; }
	.what_we_do li { padding: 3vh 3vh 5vh; font-size: 2.5vh; line-height: 4vh; }
	.what_we_do li img { width: 80%; }
	.privacy_policy { padding: 3vh 27vh 7vh; filter: drop-shadow(1px 1px 3px #000) drop-shadow(1px 1px 3px #000) drop-shadow(1px 1px 3px #000); }
	.get_it_running_keep_it_running { height: 50vh; margin: 0 0 -10vh; align-items: self-start; font-size: 7vh; }
	.get_it_running_keep_it_running .text_it { position: absolute; margin: 10vh 0 0; color: #ffe600; filter: drop-shadow(1px 1px 2px #000) drop-shadow(1px 1px 2px #000) drop-shadow(1px 1px 2px #000); }
	.get_it_running_keep_it_running .text_it .get_it { padding: 0 5vw 0 0; }
	.get_it_running_keep_it_running .text_it .keep_it { padding: 0 0 0 5vw; transform:  rotate(358.75deg); }
	.get_it_running_keep_it_running video { position: absolute; height: 40vw; opacity: 0.2; filter: contrast(3); object-fit: fill; -webkit-mask-image: -webkit-gradient( linear, left 30%, left 70%, from( rgba( 0,0,0,1 ) ), to( rgba( 0,0,0,0 ) )) ; }
	footer { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
	footer .call_215-service { padding: 0; border-bottom: none; }
	footer .call_215-service span { display: inline-block; padding: 1.5vh 0 1vh; width: auto; color: #999; }
	footer .call_215-service span:first-of-type { display: none; }
	footer .call_215-service video { margin: 2.5vw auto 1.5vh; width: 80%;}
	footer .map_nav { padding: 0; }
	footer .map_nav .nav_title {	margin: 2.5vw 0 1vw 0; }
	footer .map_nav a { margin: 0 auto 1vh; padding: 0.5vh; width: 60%; font-size: 1.75vh; background: #999; transition: all 0.25s; }
	footer .map_nav a:hover { background: #ffe600; }
	footer .working_hours { padding: 0; }
	footer .working_hours .days { padding: 0; font-size: 1.75vh; }
	footer .working_hours .hours { padding: 0 0 0 1vw;; font-size: font-size: 1.75vh; }
	footer .privacy_link { color: #ccc; font-size: 1vw; }
	footer .clopyright { padding: 2.5vw 0 0; }
	footer .clopyright p { display: block; padding: 0.75vh 0 !important; width: 100% !important; }
	footer .clopyright p:last-of-type { padding: 0; }
	footer .call_215-service .address span { display: inline-block; padding: 1.5vh 0 0; }
	footer .call_215-service .address span:first-of-type { padding: 0; }
	footer .call_215-service .address sub span { padding: 0 !important; }
	.ft_1 { order: 3; background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%) !important; }
	.ft_2 { order: 4; border-top: double 4px #191919; background: linear-gradient(0deg, rgba(4,4,4,0) 0%, rgba(4,4,4,1) 100%) !important; }
	.ft_2 .nav_title { margin: 0; padding: 3vw 0 1vw; }
	.ft_3 { order: 2; border-top: double 4px #191919; background: linear-gradient(0deg, rgba(4,4,4,0) 0%, rgba(4,4,4,1) 100%) !important; }
	.ft_4 { order: 1; padding: 0; border-top: double 4px #191919; background: rgba(0,0,0,0.75); }
	.ft_4 .address { padding: 0 !important; }
	.ft_5 { order: 5; background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%) !important; }
	.img_normalize { width: 30vh !important; }
}