/* Going NULL */
*, *::before, *::after {
  box-sizing: border-box;
}
body, h1, h2, h3, h4, h5, h6, p, ul[class], ol[class], li, figure, figcaption, blockquote, dl, dd {
  margin: 0;
}
body {
  min-height: 100vh; 
  scroll-behavior: smooth; 
  text-rendering: optimizeSpeed; 
  position: relative;
}
ul, ol {
  list-style: none; 
  padding: 0px; 
  margin: 0px
}
a {
  text-decoration: none;
}
a:not([class]) {
  text-decoration-skip-ink: auto;
}
img {
  max-width: 100%; 
  display: block; 
}
article > * + * {
  margin-top: 1em; 
}
input, button, textarea, select {
  font: inherit;
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.showonmobile {display: none;}

/* MAIN CSS */

:root {
  --font-1: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --font-2: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --c-main: #;
  --c-violet: #bb24ec;
  --a-main: #;
  --a-hov: #;
}

.container {position: relative; display: block; width: 100%; max-width: 1120px; margin: auto;}

html {
  background-color: #000000;
}
body {
  color: #fff; 
  width: 100%; 
  height: 100%; 
  font-family: var(--font-1);
}

/* ================================ */
/* ===== D I M M E R ++ A G E ===== */
/* ================================ */

.dimmer-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image:  url('/assets/img/mainbg.jpg');
  background-position: center;
  background-size: cover;
  background-attachment: fixed; 
  filter: grayscale(100%);
}
.dimmer-color {
  position: absolute;
  width: 100%;
  height: 100%;
  /* background-color: #0d0a24; */
  opacity: .32;
  background-image: url(/index/fn2.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}

.body-restrict {overflow: hidden;}
.age-restriction {position: absolute; height: 100%; width: 100%; background-color: rgba(13, 10, 36, .99); z-index: 100;}
.age-restriction #rwrapper {text-align: center;}
.age-restriction #rwrapper>div {display: block; margin: 200px 0px 50px;}
.age-restriction #rwrapper>ul{display: block; width: 40%; margin: auto;}
.age-restriction #rwrapper>ul>li{padding: 20px 40px; border: 1px solid rgb(255, 0, 203); color: rgb(255, 0, 203); background-color: transparent; margin-bottom: 20px; border-radius: 40px;}
.age-restriction #rwrapper>ul>li:hover{background-color: rgb(255, 0, 203); margin-bottom: 20px; border-radius: 40px; color: rgba(13, 10, 36, 1);}
.age-restriction #message {}


/* ================================ */
/* ======== T O P * N A V ========= */
/* ================================ */

nav {
  position: fixed;
  z-index: 10;
  top: 0px;
  width: 100%;
  height: 90px;
  background-color: #000000db;
} 
nav .panel{}
nav .panel>ul{display: flex; flex-wrap: wrap;}
nav .panel>ul>li{flex: 0 0 50%}
nav .panel>ul>li:first-child{flex: 0 0 30%}
nav .panel>ul>li:last-child{flex: 0 0 70%}
nav .panel>ul>li:first-child>ul>li>div {
  position: relative;
}
nav .panel>ul>li:first-child>ul>li>div>svg {
  filter: drop-shadow(0px 0px 7px rgb(255 255 255 / .4));
  position: relative; 
  height: 66px; margin-top: 12px;
  -webkit-animation: logo-glow linear 4s infinite;
   -moz-animation: logo-glow linear 4s infinite;
     -o-animation: logo-glow linear 4s infinite;
        animation: logo-glow linear 4s infinite;
}
nav .panel>ul>li:first-child>ul>li>div>svg>path {
  fill:#5034A4;
  -webkit-animation: logo-color linear 4s infinite;
   -moz-animation: logo-color linear 4s infinite;
     -o-animation: logo-color linear 4s infinite;
        animation: logo-color linear 4s infinite; 
}
@keyframes logo-color{
  0% {fill: #5034A4;}
  40% {fill: #B034A4;}
  42% {fill: #fff;}
  46% {fill: #5034A4;}
  60% {fill: #B034A4;}
  62% {fill: #fff;}
  70% {fill: #5034A4;}    
  90% {fill: #B034A4;}
  95% {fill: #fff;} 
}
@keyframes logo-glow{
  0% {filter: drop-shadow(0px 0px 7px rgb(80 52 164 / .4));}
  40% {filter: drop-shadow(0px 0px 9px rgb(176 52 164 / .4));}
  42% {filter: drop-shadow(0px 0px 11px rgb(255 255 255 / .6));}
  46% {filter: drop-shadow(0px 0px 7px rgb(80 52 164 / .4));}
  60% {filter: drop-shadow(0px 0px 9px rgb(176 52 164 / .4));}
  62% {filter: drop-shadow(0px 0px 11px rgb(255 255 255 / .6));}    
  50% {filter: drop-shadow(0px 0px 7px rgb(80 52 164 / .4));}
  90% {filter: drop-shadow(0px 0px 9px rgb(176 52 164 / .4));}
  95% {filter: drop-shadow(0px 0px 11px rgb(255 255 255 / .6));}  
}
nav .panel>ul>li:first-child>ul>li>div{width: 198px;position: relative;margin-top: 20px;}
nav .panel>ul>li:last-child{text-align: right;}
nav .panel>ul>li:last-child>ul{text-align: right; display: inline-block;}
nav .panel>ul>li:last-child>ul>li{
  display: inline-block;
  vertical-align: middle;
}
nav .panel>ul>li:last-child>ul.menu>li{
  margin-right: 20px;
}
nav .panel>ul>li:last-child>ul.menu>li:last-child {
  margin-right: 0px;
}
nav .panel>ul>li:last-child>ul.menu>li>a{
  color: #fff;
  transition: all ease .2s;
}
nav .panel>ul>li:last-child>ul.menu>li>a:hover{
  transform: scale(1.1);
  color: #e5097f;
}
nav .panel>ul>li:last-child>ul>li>a{
  display: inline-block;
  height: inherit;
  line-height: inherit;
}
nav .panel>ul>li:last-child>ul {
  margin-right: 25px;
  margin-top: 23px;
}
nav .panel>ul>li:last-child>ul.block-msg {
  position: relative;
}
nav .panel>ul>li:last-child>ul.callus>li>a{
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 20px;
  color: #fff;
  /* background: linear-gradient(90deg, var(--c-violet) 0%, #e5097f 100%); */
  transition: all ease .3s;
  border: 1px #fff solid;
  /* border: 1px solid transparent; */
}
nav .panel>ul>li:last-child>ul.callus>li>a:hover {
  border: 1px solid #ff549c;
  background: #ff549c;
  color: ##e5097f;
  filter: drop-shadow(0px 0px 9px rgb(176 52 164 / .4));
}

nav .panel>.navbtn {
  padding: 6px 4px;
  width: 36px;
  height: 36px;
  border: 3px solid #fff;
  border-radius: 3px;  
  transition: all ease .3s;
}
nav .panel>.navbtn>span {
  position: relative;
  display: block;
  height: 3px;
  margin-bottom: 4px;
  background-color: #fff;
}
nav .panel>.navbtn>span:last-child{
  margin-bottom: 0px;
}
nav .panel>.navbtn.nbactive {
  transform: rotate(90deg);
}

.hello {
  padding: 200px 0px;
}
.welcome-wrapper {display: flex; flex-direction: row; }
.welcome-wrapper>li {flex: 0 0 50%}
.welcome-wrapper>li>.wbwrapper {margin-bottom: 30px; margin-top: 30px;}
.welcome-wrapper>li>.wbwrapper>li {margin-bottom: 50px;}
.welcome-wrapper>li>.wbwrapper>li>a {padding: 15px 40px;border: 1px solid #fff;background: transparent;color: #fff;border-radius: 20px;}
.welcome-wrapper>li>.wbwrapper>li>a:hover {background: #e5097f;color: #fff;}
.h1wrapper {padding-bottom: 50px;}
.h1wrapper>h1 {font-size: 3em; margin-bottom: 6px;}
.h1wrapper>h1>span {display: block;font-size: .5em;font-weight: 100;margin-left: 65px;}
.h1wrapper>.subh {font-size: .7em;position: relative;display: inline;background-color: #e5097f;padding: 4px 12px;border-radius: 50px;margin-left: 40px;}
.welcome-wrapper>li:last-child>article>p {line-height: 1.5em; font-weight: 300;}


/* ================================ */
/* ===== Y A N D E X ** M A P ===== */
/* ================================ */

.ymap {
    padding: 0px;
    width: 100%;
    height: 500px;
    pointer-events: none;
    touch-action: none;
}
.ymaps-layers-pane {
  filter: invert(1) hue-rotate(36deg);
    -ms-filter: invert(1) hue-rotate(36deg);
  -webkit-filter: invert(1) hue-rotate(36deg);
  -moz-filter: invert(1) hue-rotate(36deg);
  -o-filter: invert(1) hue-rotate(36deg);  
}

/* ================================ */
/* ========= F O O T E R ========== */
/* ================================ */

footer {
  position: relative;
  width: 100%;
  background-color: #000000;
  padding-top: 75px;
  overflow: hidden;
  z-index: 9;
  font-weight: 300;
}
footer>.logobg {
  position: absolute;
  width: 100%;
  background-image: url();
  filter: blur(20px);
  opacity:.2;
}
footer>.logobg>svg>path {
  fill: #b723e8;
}
footer .footer-wrapper{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
footer .footer-wrapper>li{
  flex: 0 0 20%;
  padding: 0px 10px;
}
footer .footer-wrapper>li:first-child{
  flex: 0 0 30%;
}
footer .footer-wrapper>li:nth-child(2){
  flex: 0 0 10%;
}
footer .footer-wrapper>li>ul>li>svg{
  width: 90%;
}
footer .footer-wrapper>li>ul>li>svg>path{
  fill: #ff00cb;
}
footer .footer-wrapper>li>ul.footer-menu{
  margin-bottom: 50px;
}
footer .footer-wrapper>li>ul.footer-menu>li{
  margin-bottom: 15px;
  font-size: 1.2em;
  line-height: 1.5em;
}
footer .footer-wrapper>li>ul.footer-menu>li:first-child{
  font-weight: 700;
}
footer .footer-wrapper>li>ul.footer-menu>li>a{
  color: #e5097f;
  transition: all ease .3s;
}
footer .footer-wrapper>li>ul.footer-menu>li>a>span {
  position: relative;
  color: #fff;
  font-size: .8em;
  margin-top: 5px;
}
footer .footer-wrapper>li>ul.footer-menu>li>a:hover{
  color: #ff00cf;
}
footer .subfooter {
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  flex-wrap: wrap;
  font-size: .8em;
  padding: 20px 0px 30px;
  margin: 60px 0px 0px 0px;
}
footer .subfooter>li {
  flex: 0 0 50%;
  color: rgba(255, 255, 255, .5);
}
footer .subfooter>li:last-child {
  text-align: right;
}


/* ================================ */
/* ===== M E S S E N G E R S ====== */
/* ================================ */

ul.block-msg>li{display: inline-block; margin-right: 8px;}
ul.block-msg>li:last-child{margin-right: 0px;}
ul.block-msg>li>a>div{width: 34px;height: 34px;border-radius: 40px;background-color: transparent;position: relative;transition: all ease .3s;border: 1px solid #e5097f;}
ul.block-msg>li>a>div>svg{position: absolute; width: 22px; height: 22px; top: 5px; left: 5px;}
ul.block-msg>li>a>div>svg>g{fill: #e5097f;}

ul.block-msg>li.whatsapp>a>div>svg{left: 5px;}
ul.block-msg>li.viber>a>div>svg{left: 5px; top: 6px;}
ul.block-msg>li.telegram>a>div>svg{width: 18px; height: 18px; left: 6px; top: 8px;}
ul.block-msg>li.instagram>a>div>svg{width: 18px; height: 18px; left: 7px; top: 7px;}
ul.block-msg>li.facebook>a>div>svg{width: 18px; height: 18px; left: 7px; top: 7px;}
ul.block-msg>li.vk>a>div>svg{width: 18px; height: 18px; left: 7px; top: 7px;}

ul.block-msg>li.whatsapp>a:hover>div{background-color: #2cb300; border: 1px solid #2cb300;}
ul.block-msg>li.whatsapp>a:hover>div>svg>g, ul.block-msg>li.viber>a:hover>div>svg>g, ul.block-msg>li.telegram>a:hover>div>svg>g, ul.block-msg>li.telegram>a:hover>div>svg>g, ul.block-msg>li.vk>a:hover>div>svg>g, ul.block-msg>li.facebook>a:hover>div>svg>g, ul.block-msg>li.instagram>a:hover>div>svg>g{fill: #fff;}
ul.block-msg>li.viber>a:hover>div{background-color:#bb24ec; border: 1px solid #bb24ec;}
ul.block-msg>li.telegram>a:hover>div{background-color:#0074da; border: 1px solid #0074da;}
ul.block-msg>li.instagram>a:hover>div{background-color:#bb24ec; border: 1px solid #bb24ec;}
ul.block-msg>li.vk>a:hover>div{background-color:#0074da; border: 1px solid #0074da;}
ul.block-msg>li.facebook>a:hover>div{background-color:#0074da; border: 1px solid #0074da;} 



/* RESPONSIVE */

@media (min-width:320px) and (max-width: 628px){
  body {}
  .hello {padding: 120px 0px;}  
  .showonmobile {display: block;}
  .container {width: 90%; margin: auto;}

  .age-restriction #rwrapper>ul{width: 90%;}

  nav .panel>ul {display: inline-block; width: 198px;}
  nav .panel>ul>li:first-child>ul>li>div {width: unset;}
  nav .panel>ul>li:last-child {position: absolute; width: 100vw; left: 100vw; background: rgb(18 12 50 / 98%); padding: 50px 0px; top: 90px; text-align: center; transition: all ease .2s;}
  nav .panel>ul>li.in {left: -22px;}
  nav .panel>ul>li:last-child>ul {margin-right: unset; margin-top: unset; width: 100%; text-align: center;}
  nav .panel>ul>li:last-child>ul.menu {margin-bottom: 50px;}
  nav .panel>ul>li:last-child>ul.menu>li {display: block; margin-right: 0px; margin-bottom: 30px;}
  nav .panel>ul>li:last-child>ul.menu>li:last-child {margin-bottom: 0px;}
  nav .panel>ul>li:last-child>ul.block-msg {margin-bottom: 30px;}
  nav .panel>.navbtn {display: inline-block; float: right; margin-top: 25px;}

  .welcome-wrapper {display: flex; flex-direction: column; }
  .welcome-wrapper>li {flex: 0 0 100%}
  .welcome-wrapper>li>.h1wrapper {margin-bottom: 30px;}



  footer>.logobg {display: none;}
  footer .footer-wrapper{flex-direction: column;}
  footer .footer-wrapper>li:first-child>ul>li {margin-bottom: 40px;}
  footer .footer-wrapper>li:first-child>ul>li>svg {width: 80%; margin: 0px 10%;}
  footer .footer-wrapper>li>ul.footer-menu {text-align: center;}

  footer .subfooter {flex-direction: column;} 
  footer .subfooter>li{text-align: center; margin-bottom: 10px;} 
  footer .subfooter>li:first-child {order: 2;} 
  footer .subfooter>li:last-child {text-align: center;} 

}
@media (min-width: 320px) and (max-width: 330px) {
}
@media (min-width: 429px) and (max-width: 719px){
  .container {width: 90%; margin: auto;}
}
@media (min-width: 720px) and (max-width: 1169px){
  .container {width: 90%; margin: auto;}
}
@media (min-width: 720px) and (max-width: 959px){
  .container {width: 90%; margin: auto;}
}
@media (min-width: 960px) and (max-width: 1169px){
  .container {width: 90%; margin: auto;}
  nav .panel>.navbtn {display: none;}
}
@media (min-width: 1170px){
  .container {}
  nav .panel>.navbtn {display: none;}  
}