:root { 
	--page-bg-color:#161616;
	--page-base-color:#eef;
	--page-theme-color: rgba(115,215,205,.85);/*#09d*/
	--page-accent-color: rgba(85,170,255,.99);/*#5af*/
	--font-titles: Montserrat;
	--font-buttons: Montserrat;

	--fancybox-bg:rgb(0 0 25 / 75%);
	--fancybox-color:rgb(235 235 235 / 100%);
	--fancybox-accent-color:rgba(255,255,255,1);
	--fancybox-swipe-bg:rgb(35 35 35 / 95%);
	--fancybox-swipe--border-radius:30px;

	--border-size: 1.0%;
	--duration: 7s;
	--open-from: .5;
  }

/* scrollbar */
	/** { scrollbar-width: thin; scrollbar-color: var(--page-theme-color) var(--page-bg-color); }*/
	*::-webkit-scrollbar { width: 4px; height: 4px; }
	*::-webkit-scrollbar-thumb { background:var(--page-theme-color); background-image:linear-gradient(180deg, #009687 0%, #708ad4 99%); }
	*::-webkit-scrollbar-track { background:transparent; }


body { 
  background-color:#161616; background-color:var(--page-bg-color); 
  font-family:exo2; font-weight:200; line-height:1.5em; 
  color:#555; color:var(--page-base-color); }

h1, h2, h3, h4, h5, h6 { 
  color:#eee; color:var(--page-theme-color);
  font-family:var(--font-titles); font-weight:300; 
  letter-spacing:-0.005em; text-decoration:none; line-height:1.05em; 
  margin-bottom:.25em; margin-top:1.15em; }
h1 { /*font-size:38px; font-size:calc(38px + 0.6vw);*/ font-size:250% }
h2 { /*font-size:28px; font-size:calc(28px + 0.5vw);*/ font-size:220% }
h3 { /*font-size:24px; font-size:calc(24px + 0.4vw);*/ font-size:190% }
h4 { /*font-size:21px; font-size:calc(21px + 0.4vw);*/ font-size:160% }
h5 { /*font-size:18px; font-size:calc(18px + 0.4vw);*/ font-size:130% }
h6 { /*font-size:16px; font-size:calc(16px + 0.4vw);*/ font-size:100% }

a  { color:var(--page-theme-color); }
a:hover, a:active  { color:var(--page-accent-color); }

b  { font-weight: 800; }

hr { height:2px; border:0; background-image: linear-gradient(90deg, #009687 0%, #708ad4 99%); }
.warning  { color:#fdc; }

.button, a.button { padding:0.75rem 2.0rem; border-radius:50px;
  border:2px solid var(--page-theme-color); background:transparent; 
  color:#000; color:var(--page-theme-color); font-family:var(--font-buttons); text-align:center; }
.button a { height:3.2rem; margin-bottom:-5px; }
.button:hover,  a.button:hover  { color:var(--page-base-color); border-color:var(--page-theme-color); 
  background-color:var(--page-theme-color); }
.button:active, a.button:active { color:var(--page-base-color); border-color:var(--page-accent-color); 
  background-color:var(--page-accent-color); }

.btn       {  }
.btn:hover { background-color:#000; background-color: var(--page-theme-color); opacity:1; }


.white { color:white; font-weight:500; }
.cover  { flex-flow:row wrap; margin:2.5rem auto; width:96%; line-height:0; }
.item   { display:inline-block; position:relative; overflow:hidden; order:100; line-height:1; border-radius: 1.75rem; 
	margin:5px; padding:0; width:calc(360px + 3vw); background:#252525; outline:2px solid transparent; box-shadow: 0 0 2px 2px transparent; }
.item:after  { content:""; display:block; margin-top:62.5%; }
.item:hover  { z-index:+1; outline:2px solid var(--page-theme-color); box-shadow: 0 0 2px 2px var(--page-theme-color); }
.item .bgimg { position:absolute; top:0; right:0; bottom:0; left:0;
	-webkit-transform:scale(1.01); -moz-transform:scale(1.01); transform:scale(1.01); transition:all 2s ease-in-out;}
.item:hover .bgimg { -webkit-transform:scale(1.1); -moz-transform:scale(1.1); transform:scale(1.1); }
.item .bgimg { -webkit-transform:scale(1.01); -moz-transform:scale(1.01); transform:scale(1.01); transition:all 2s ease-in-out; }
.item:hover .bgimg { -webkit-transform:scale(1.1); -moz-transform:scale(1.1); transform:scale(1.1); }
.item .caption { position:absolute; top:0; right:0; bottom:0; left:0; background-image: linear-gradient(0deg, #000 30%, #049 99%); opacity:.25; }
.item:hover .caption { opacity:.75; }
.item .content { position:absolute; top:0; right:0; bottom:0; left:0; padding:1rem 1.5rem; backdrop-filter: blur(0px); transition-duration:1s; }
.item:hover .content { backdrop-filter: blur(8px); transition-duration:2s; }
.item p { font-family:MuseoSans, Helvetica, sans-serif; font-weight:200; font-size:80%; }
.item .link    { display:block; position:absolute; left:.5rem; bottom:1.25rem; 
	width:5rem; height:2.4rem; background-color:#700; opacity:0; }
.item:hover .link    { left:1.2rem; opacity:1; }
.item .fopen    { display:block; position:absolute; right:-0.5rem; bottom:1.0rem; 
	width:5.5rem; height:3.3rem; background-color:transparent; opacity:0; border-radius:1rem; overflow: hidden; }
.item:hover .fopen    { right:1.0rem; opacity:1; }
.item:hover .fopen .btn:hover { background-color:rgba(85,170,255,.25); }
@media (min-width:1280px) and (max-width:1600px) { .item  { width:30%; }	}
@media (min-width:1152px) and (max-width:1280px) { .item  { width:32%; } }
@media (min-width:640px) and (max-width:1152px)  { .cover { max-width:908px; } .item { width:calc(50% - 10px); } }
@media (min-width:480px) and (max-width:640px)   { wrap, .cover { width:95%; } .item { width:100%; } }
@media (max-width:480px)  { .wrap, .cover { width:88%; } .item { width:100%; } }

#footer        { height:20vh; }
#footer .sq    { background-color: rgb(35,55,75); box-shadow:0 0 1px 4px var(--page-bg-color), 0 0 1px 6px rgb(61,144,177); }
#footer > wrap { margin:0 auto; }
#footer hr     { transform: translateY(2.45rem); }










.bridge { padding:5em; }
.mice { display:flex; justify-content:center; position:relative; height:80px; width:80px; margin:0 auto; cursor:pointer; }
.mice .scroll-bg, .mice .scroll-mice { height:100%; width:2px; margin:0 auto; background-color:white; opacity:.2; pointer-events:none; }
.mice .scroll-mice { height:100%; opacity:1; position:absolute; top:0; transform:scaleY(0); 
  -webkit-animation: scroll_mice 3s ease-in infinite; animation: scroll_mice 3s ease-in infinite; }
@keyframes scroll_mice {
  0%  { -webkit-transform:scaleY(0); transform:scaleY(0); -webkit-transform-origin:top; transform-origin:top; }
 25%  { -webkit-transform:scaleY(1); transform:scaleY(1); -webkit-transform-origin:top; transform-origin:top; }
 26%  { -webkit-transform-origin:bottom; transform-origin:bottom; }
 50%  { -webkit-transform:scaleY(0); transform:scaleY(0); -webkit-transform-origin:bottom; transform-origin:bottom; }
100%  { -webkit-transform:scaleY(0); transform:scaleY(0); -webkit-transform-origin:bottom; transform-origin:bottom; }
}
.mice:hover .scroll-bg { background-color:#64f; }





/* tabmenu inner for popup and login-form */

.inner {
  /*background: #161616;*/ position:relative; max-width:720px; }

.inner h3 {
  margin: 20px 25px 10px; cursor: default; }

.inner form {
  margin: 15px 25px; }

.inner form p, .page form p {
  margin: 4px 0;
}

/* forms and elements */

input:focus, textarea:focus, input[type="text"]:focus {
  outline: 0; z-index: 1000; background: #9999aa; color: #000; box-shadow: 0 0 0 1px #222; }

input[type=submit]:focus {
	background: #000; color: #fff; }

input, button, select, textarea {
  outline: 0 none; }

form input, form textarea, .file_upload>mark {
  border: none; background: #2d2d33; resize: none; height: auto; margin: 0; padding: 10px; color: #fff; 
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; }

form input {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

form textarea {
  width: 100%;
  resize: vertical;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

form .submit, input[type=submit], input[type=reset], a.submit, .button {
  display: inline-flex; justify-content: center; align-items: center; width: auto; height:40px; cursor: pointer; 
  background:#000; color:#86f; text-align: center; vertical-align: middle; border: 0; font-size:16px;
  -webkit-transition: background .15s linear 0s,color .1s linear 0s;
  -moz-transition: background .15s linear 0s,color .1s linear 0s;
  -o-transition: background .15s linear 0s,color .1s linear 0s;
  transition: background .15s linear 0s,color .1s linear 0s; }

form .submit:hover, input[type=submit]:hover, .button:hover, input[type=reset]:hover {
  background: #86f; color: #fff; }

form .submit:active, input[type=submit]:active, .button:active {
  background: #cf7; color: #000; }

input[type=reset]:active {
  background: #f40; }

form .submit i {/*font-size: 22px;*/ 
  line-height: 23px; }

.file_upload {
  display: block; position: relative; overflow: hidden; }

.file_upload .button, .file_upload>mark {
  display: block; cursor: pointer; width: auto; }

.file_upload .button {
  float: left; box-sizing: border-box; -moz-box-sizing: border-box; height: 100%; margin-right: 15px; }

.file_upload>mark {/*background: transparent;*/
  color: #556; }

.file_upload input[type=file] {
  position: absolute; top: 0;
  visibility: hidden; }

.file_upload span.button {
  margin: 0; padding: 10px 20px; line-height: inherit; }

.fields-buttons {
}

input:focus:-moz-placeholder, textarea:focus:-moz-placeholder {
  color: #99a; }

input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
  color: transparent; }

input:-moz-placeholder, textarea:-moz-placeholder {
  color: #556; }

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #556; }

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #556; }




/*  */

#send_message_form p span {
  display: inline-block;  border: 1px dotted #2d2d33; }

#send_message_form p span input, .capch-pic {
  display: inline-block;  height: 38px;  width: 70px!important;  margin: 2px;  vertical-align: middle;  text-transform: uppercase; }

#contact-submit {
  width: 145px; }

.cwin {
  display: none; position: absolute;  z-index: 20;  top: 0;  bottom: 0;  right: 0;  left: 0;  text-align: center;  cursor: pointer; }

.cwin p {
  display: flex; align-items: center; justify-content: center;text-align: center;  
  height: 100%; margin: 0; cursor: pointer; font-family: var(--font-titles); font-weight:400; font-size: 28px; }

.cwin i {
  font-size: 65px; line-height: 110px; }

#success {
  background: rgba(130,100,255,.65); }

#success p {;
}

#errmess {
  background: rgba(255,0,0,.65); }

#errmess p {;
}





/* HEX */

.container { display: grid; overflow: hidden; }

@property --progress {
	syntax: '<number>';
	initial-value: 0;
	inherits: false;
}
@keyframes progress { to { --progress: 1; } }

.hexagon {
	color:var(--page-theme-color);
	
	grid-area: 1 / 1;
	width: clamp(100px, 80vmin, 500px);
	aspect-ratio: 1;
	background: currentColor;

	--o: (var(--progress) * 50%);
	--i: max(0%, var(--o) - var(--border-size));
	clip-path: polygon(
		calc(50% + var(--o) * cos(  0deg)) calc(50% + var(--o) * sin(  0deg)),
		calc(50% + var(--o) * cos( 60deg)) calc(50% + var(--o) * sin( 60deg)),
		calc(50% + var(--o) * cos(120deg)) calc(50% + var(--o) * sin(120deg)),
		calc(50% + var(--o) * cos(180deg)) calc(50% + var(--o) * sin(180deg)),
		calc(50% + var(--o) * cos(240deg)) calc(50% + var(--o) * sin(240deg)),
		calc(50% + var(--o) * cos(300deg)) calc(50% + var(--o) * sin(300deg)),
		calc(50% + var(--o) * cos(360deg)) calc(50% + var(--o) * sin(360deg)),
		calc(50% + var(--i) * cos(360deg)) calc(50% + var(--i) * sin(360deg)),
		calc(50% + var(--i) * cos(300deg)) calc(50% + var(--i) * sin(300deg)),
		calc(50% + var(--i) * cos(240deg)) calc(50% + var(--i) * sin(240deg)),
		calc(50% + var(--i) * cos(180deg)) calc(50% + var(--i) * sin(180deg)),
		calc(50% + var(--i) * cos(120deg)) calc(50% + var(--i) * sin(120deg)),
		calc(50% + var(--i) * cos( 60deg)) calc(50% + var(--i) * sin( 60deg)),
		calc(50% + var(--i) * cos(  0deg)) calc(50% + var(--i) * sin(  0deg))
	);
	
	--a: (clamp(0, (var(--progress) - var(--open-from)) / (1 - var(--open-from)), 1) * 30deg);
	mask-image: conic-gradient(
		#0000 calc(var(--a)),
		#000 0 calc( 60deg - var(--a)), #0000 0 calc( 60deg + var(--a)),
		#000 0 calc(120deg - var(--a)), #0000 0 calc(120deg + var(--a)),
		#000 0 calc(180deg - var(--a)), #0000 0 calc(180deg + var(--a)),
		#000 0 calc(240deg - var(--a)), #0000 0 calc(240deg + var(--a)),
		#000 0 calc(300deg - var(--a)), #0000 0 calc(300deg + var(--a)),
		#000 0 calc(360deg - var(--a)), #0000 0
	);

	animation: progress var(--duration) linear infinite;
	--sibling-count: sibling-count();
	--sibling-index: sibling-index();
	animation-delay: calc(-1 * var(--duration) * (var(--sibling-index) - 1) / var(--sibling-count));

	&:nth-child(2n) { rotate: 30deg; }
}

/* emulate sibling-index() and sibling-count() support for up to 12 elements */
@supports not (scale: sibling-index()) {
	.container {
		.hexagon { --sibling-count: 1; }
		&:has(.hexagon:nth-child(2)) .hexagon { --sibling-count: 2; }
		&:has(.hexagon:nth-child(3)) .hexagon { --sibling-count: 3; }
		&:has(.hexagon:nth-child(4)) .hexagon { --sibling-count: 4; }
		&:has(.hexagon:nth-child(5)) .hexagon { --sibling-count: 5; }
		&:has(.hexagon:nth-child(6)) .hexagon { --sibling-count: 6; }
		&:has(.hexagon:nth-child(7)) .hexagon { --sibling-count: 7; }
		&:has(.hexagon:nth-child(8)) .hexagon { --sibling-count: 8; }
		&:has(.hexagon:nth-child(9)) .hexagon { --sibling-count: 9; }
		&:has(.hexagon:nth-child(10)) .hexagon { --sibling-count: 10; }
		&:has(.hexagon:nth-child(11)) .hexagon { --sibling-count: 11; }
		&:has(.hexagon:nth-child(12)) .hexagon { --sibling-count: 12; }
	}
	.hexagon {
		--sibling-index: 1;
		&:nth-child(2) { --sibling-index: 2; }
		&:nth-child(3) { --sibling-index: 3; }
		&:nth-child(4) { --sibling-index: 4; }
		&:nth-child(5) { --sibling-index: 5; }
		&:nth-child(6) { --sibling-index: 6; }
		&:nth-child(7) { --sibling-index: 7; }
		&:nth-child(8) { --sibling-index: 8; }
		&:nth-child(9) { --sibling-index: 9; }
		&:nth-child(10) { --sibling-index: 10; }
		&:nth-child(11) { --sibling-index: 11; }
		&:nth-child(12) { --sibling-index: 12; }
	}
}