@font-face {
  font-family: cymoid;
  src: url(../fonts/cymoid-light.otf);
  font-weight: lighter;
}

@font-face {
  font-family: cymoid;
  src: url(../fonts/cymoid-regular.otf);
  font-weight: regular;
}

@font-face {
  font-family: cymoid;
  src: url(../fonts/cymoid-bold.otf);
  font-weight: bold;
}

:root {
    --pink: #EA93D6;
    --beige: #F8C8BC;
    --off-white: #F1E9E7;
    --orange: #E07B49;
    --black: #191919;
    --deep-black: #080808;
    --white: #fff;
    --blue: #6f9fea;
    --purple: #b344cf;
    --dark: #313131;
    --neonpink: #f3abed;
    --neonblue: #87e9fa;
    --light-gray: #ddd8d6;
}

html{margin:0;padding:0;}
body{margin:0;padding:0;overflow-y:scroll;min-width:260px;font-size:16px;line-height:1.6;background:var(--off-white);color:#231f20;font-family: cymoid;}
body.theme-dark{ background:var(--black);color:var(--white); }
body.ovfh{overflow: hidden;}

.t-left{text-align:left;}
.t-right{text-align:right;}
.t-center{text-align:center;}
.t-justify{text-align:justify;}
.red{color:red;}

.dark-bg{background-color: var(--dark);}
.black-bg{background-color: var(--black);}

a{color:var(--purple);text-decoration:none;cursor:pointer;outline:none;}
a:hover{color:var(--pink);}
a:focus{outline:none;}
a img{outline:none;}
p{padding:0;margin:15px 0;}
ul, ol{margin:40px 0 0px 20px;}
hr {background:#c2c2c3;border:none;clear:both;height:1px;margin:25px 0;padding:0;width:100%;}
.full-width{width:100%;}
.max-width{max-width:100%;}
.v-top{vertical-align:top;}
.small.bold{font-size:13px;font-weight: bold;}
.small{font-size:10px;}
.big{font-size:120%;line-height:2;}
.clear{display:block;height:0px;clear:both;}
.sprite{background-position:top left;background-repeat:no-repeat;}
.sprite:hover{background-position:bottom left;background-repeat:no-repeat;}
.nowrap{white-space:nowrap;}
.uc{display:block;padding:80px 20px;text-align:center;font-size:30px;color:#C1C1C1;}
.uc-corresponders{display:block;padding:10px 5px;font-size:18px;color:#C1C1C1;}
.uc-corresponders{display:block;padding:10px 5px;font-size:18px;color:#C1C1C1;}
h1,h2,h3,h4,h5,h6{font-weight:normal;margin-top:0em;margin-bottom:0.8em;line-height:1.2;}
/* h4,h5{font-weight:700;} */
h1{font-size:61px;} h2{font-size:49px;} h3{font-size:39px;} h4{font-size:31px;} h5{font-size:25px;} h6{font-size:20px;}
b, strong{font-weight:bold;}
.img-left, .img-right{float:none;margin:0 0 20px 0;display:block;}
.img-border{border:3px solid #6f6f6f;}
a:hover .img-border{border:1px solid #231f20;}
table{border-collapse:collapse;}
td, th{padding:0px 4px;vertical-align:top;border:none;}
i,em{font-style:italic;}
.msg {display: block;color:green;text-align:center;font-size: 20px;margin-bottom: 50px;}
.msgerror {color: red;}
iframe{max-width:100%;}
.no-border, .no-border td, .no-border th{border:0;}

.center-xs, .t-right.center-xs, .t-left.center-xs, .center-sm, .t-right.center-sm, .t-left.center-sm{text-align:center}
.t-right.left-xs {text-align:left}
.small-xs{font-size:80%;}
.no-gutter > [class*='col-']{padding-right:0;padding-left:0;}

#content-wrap {padding: 50px 0px;}
.wrap {padding: 50px 0px;}

.hero-video-container{position: relative;width:100%;height: 700px;border-radius: 30px;border:10px solid var(--off-white);overflow:hidden;}
.theme-dark .hero-video-container{ border-color: var(--black); }
.hero-video{position: absolute;top: 0px;left:0;object-fit: fill;width:100%;height:100%;}
.video-img{position: absolute; top:0; left:0; width:100%; height:100%; background-size: cover; background-position: center;}
 #header-wrap{position: absolute;top:0px;width: 100%;}
.menu-block{background-color: var(--black);border-radius:0 0 25px 0;position: absolute;top:0;left:0; height: 55px;width: 95px;}
.menu-block img{margin: 10px 0 0 10px;width: 32px;}

.inner-video-container{position: relative; width:100%; height: 500px; border-radius: 20px; overflow:hidden;}
.inner-video{position: absolute;top: 0px;left:0;object-fit: fill;width:100%;height:100%;}
img.inner-video-logo{position: absolute; bottom: 30px; right:30px; max-width:30%;}
h3 span, h4 span{color:var(--purple);}
.trainer-img{width:350px; max-width:100%;}

.project-form-wrap{padding:50px;background-color: var(--black);height:100vh;overflow:auto;}
.project-btn {display: inline-block;position:absolute;top:0;right:0;background-color: var(--black);border-radius: 0 25px 0 25px;height: 55px;width: 265px;color: var(--off-white);text-align: center; font-size: 22px; font-weight: bold;
background-image: linear-gradient(45deg, var(--purple) 0%, var(--blue) 33%, var(--pink) 66%, var(--orange) 100%);
}
.project-btn span{display: block;position:absolute;top:2px;right:2px;height: 51px;width: 261px; padding:5px 25px 0 25px; background-color: var(--black); border-radius: 0 23px 0 23px;}
.radio{display:block;margin:10px 10px 10px 0;padding:10px 0 0 40px; height: auto; min-height: 30px; line-height: 1; font-size: 14px; font-weight: bold; cursor: pointer;}
.radio::before{content: " "; display: block; position: absolute; top:10px; left: 15px; width: 30px; height: 30px; border-radius: 100%; border: 2px solid var(--off-white);transition: 0.3s;}
.radio:hover{color:var(--pink);}
.radio:hover::before{border-color: var(--pink);}
.radio.selected{color:var(--pink);}
.radio.selected::before{border-color: var(--pink);background-color: var(--pink);}
.input-text{display: block; width: 100%; margin-bottom:30px; background: var(--black); color: var(--white); border: 1px solid var(--pink); padding: 10px 20px; border-radius: 20px;}
textarea.input-text{min-height:200px}

.video-text{position: absolute;bottom: 0;width: 80%;background: var(--off-white);padding: 40px 20px;border-radius: 0 25px 0 0;font-size:14px; line-height: 1.2;}
.theme-dark .video-text{background-color:var(--black)}
.video-text h1{font-weight: bold; font-size:30px; line-height: 1; margin-bottom:20px;}
.video-corner1{position: absolute;top: -26px;left: 0px;}
.video-corner2{position: absolute;bottom: 0px;right: -23px;}

.mobile-menu-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: none;background: rgba(0, 0, 0, 0.8);z-index: 5000;}
.mobile-menu-icon {position: relative;cursor: pointer;margin: 10px auto;}
.mobile-menu-items-box{padding:40px;}
.mobile-menu-links{position: relative;padding: 30px 45px 25px;}
.mobile-menu-items, .project-menu-items{position:fixed;top:-100%;right: 0px;width: 100%;height:100%;background:var(--dark);color: #fff;z-index:6000;overflow: auto;}
.project-menu-items{top:0%;right: -100%;}
.project-menu-logo{position: absolute; bottom: 40px; left: 40px;}

.icon-menu{position:absolute;top:20px;right:15px;width:20px;height:20px;cursor:pointer;}
.icon-menu span{display:block;position:absolute;top:0;left:0;height:2px;background:var(--off-white);transition:0.8s;}
.icon-menu span.sp1{top:0px;width:20px;}
.icon-menu span.sp2{top:6px;width:20px;}
.icon-menu span.sp3{top:12px;width:20px;}
.close-btn{position: absolute; top:30px;left:30px; width:20px;height:20px;cursor:pointer;}
.close-btn span{display:block;position:absolute;top:0;left:0;height:2px;background:var(--off-white);transition:0.8s;}
.close-btn .sp1{transform:rotate(45deg);top:10px;width:30px;}
.close-btn .sp3{transform:rotate(-45deg);top:10px;width:30px;}
.project-menu-items .close-btn{left:auto; right:30px;}

.overlay{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-color: rgba(0, 0, 0, 0.5);}
.overlay.a02{background-color: rgba(0, 0, 0, 0.2);}
.menu-parent {
display: block;
width:100%;height:auto;padding: 10px;
}
.menu-p {position: relative; display: block; border-radius:15px;background-color: var(--black);overflow:hidden; margin-bottom: 10px;}

.menu-p .bg{display:block;position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat: no-repeat;transition: 0.3s;}
.menu-p:hover .bg{top:-5%;left:-5%;width:110%;height:110%;}
.menu-p2:hover .bg{top:0;left:0;width:100%;height:100%;}
.menu-p1 .bg{background-image:url(../images/layout/menu02.jpg);}
.menu-p2 .bg{background-image:url(../images/layout/logo_txt.png);background-size:100px auto;background-position: bottom right;}
.menu-p3 .bg{background-image:url(../images/layout/holographic_bg.jpg);}
.menu-p5 .bg{background-image:url(../images/layout/holographic02.jpg);}
.menu-p6 .bg{background-image:url(../images/layout/menu03.jpg);}

.menu-p-textbox{display:block;position:relative;width:95%;color:var(--off-white);font-size:16px;padding:20px;}
.menu-p-title{display:block;margin-bottom:10px;font-size:36px;font-weight:bold; line-height: 1; transition: 0.3s;}
.menu-p-title.second{color:var(--pink);}
.menu-p-lead{display:block;line-height:1.3;margin-bottom:50px;}
.menu-p-lead span{color:var(--pink);}
.menu-p-lead.menu-p-lead-big{font-size:36px; line-height:1.1; font-weight: bold;}
.menu-p-btn{position:relative;display: block;color:var(--white);font-size: 15px;line-height: 20px; height: 20px; cursor: pointer;}
.menu-p-btn .menu-p-btn-txt{display: inline-block; position:relative;}
.menu-p-btn .menu-p-btn-icon{display: inline-block;  position: absolute; bottom: 0; right: -30px; width: 20px; height: 20px; transition: 0.3s;}
.menu-p:hover .menu-p-btn-icon, .menu-p-btn:hover .menu-p-btn-icon{right: -50px;}
.menu-p-btn-icon::after{content: " "; position: absolute; top:-1px; right:8px; width:3px; height:20px; background-color: var(--white); transform: rotate(45deg);}
.menu-p-btn-icon::before{content: " "; position: absolute; top:0px; right:0px; width:10px; height:10px; border:3px solid var(--white);border-left:0; border-bottom:0;}

.menu-p:hover .menu-p-title.second{background-image: linear-gradient(45deg, var(--purple) 0%, var(--blue) 100%); color: transparent; background-clip: text;}
.menu-p-btn.inv{color: var(--black);}
.menu-p-btn.inv .menu-p-btn-icon::before{border-color: var(--black);}
.menu-p-btn.inv .menu-p-btn-icon::after{background-color: var(--black);}

.menu-p:hover .menu-p-btn-icon::after, .menu-p-btn:hover .menu-p-btn-icon::after, .menu-p-btn.inv:hover .menu-p-btn-icon::after{background-color: var(--pink); }
.menu-p:hover .menu-p-btn-icon::before, .menu-p-btn:hover .menu-p-btn-icon::before, .menu-p-btn.inv:hover .menu-p-btn-icon::before{border-color: var(--pink); }

.menu-p-btn.btn-back{display:  inline-block; padding-left: 50px;}
.menu-p-btn.btn-back .menu-p-btn-icon{right: auto; left: -30px; transform: rotate(-90deg);}
.menu-p-btn.btn-back:hover .menu-p-btn-icon{right: auto; left: -50px;}

.wrap.section-1{background-image: url(/images/layout/home-1.png);background-repeat: no-repeat;background-size: cover;background-position: center;}
.section-1-text{margin: 50px auto;}
h3{font-weight:bold;}
.glass-box{display: inline-block; width: 100%;border-radius: 15px;border: 2px solid rgba(255, 255, 255, 0.4);padding: 80px 50px;margin: 0 0 40px 0;text-align: center; font-size: 32px; line-height: 1.3; background: linear-gradient(45deg,rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 100%); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);backdrop-filter: blur(15px); transition: 0.3s;}
.glass-box.sm-txt{font-size: 22px;}
.glass-box span{height: 120px;vertical-align: middle;display: grid;align-items: center;}
.glass-box:hover{border: 2px solid rgba(255, 255, 255, 1); background: #EFE6E6;
background: linear-gradient(45deg,rgba(239, 230, 230, 0.2) 0%, rgba(238, 215, 227, 0.7) 100%); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);}

.theme-dark a.glass-box{color:var(--white); border-color: var(--pink);}

.wrap.section-2{position: relative; /*background-image: url(/images/layout/home-2.png);*/background-repeat: no-repeat;background-position: right top;padding: 0px;}
.section-2-text{padding-top:400px;}
.video-container-section{position: absolute; top:0; right: 0; width:80%; height:350px;}
.video-container-section-mask{position: absolute; bottom:-1px; left: -1px; width:100%; height:100%; background-image: url(../images/layout/video-container-section-mask.png); background-size: 100% 100%;}

.wrap.section-3{background-image: url(/images/layout/home-3.png);background-repeat: no-repeat;background-position: left top;background-size: contain;}
.wrap.section-3 img{width: 100%;}
.glass-box.small{text-align:left;font-size:18px;}
.glass-box img.glass-img{width: 50px; margin-bottom: 15px;}

.glass-block{border-radius: 15px;border: 2px solid rgba(255, 255, 255, 0.4);padding: 40px 30px;margin: 0 0 40px 0;background: rgba(0, 0, 0, 0.08); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);backdrop-filter: blur(15px);}



.gray-glass-box, .gray-glass-box:hover{ text-align: left; font-size: 16px; background: linear-gradient(40deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 100%); color:var(--white); padding:60px 30px 100px 40%; overflow: hidden; position:sticky; top:0; }
.gray-glass-box span.gray-glass-box-g{ position: absolute; bottom:-50px; right:-50px; width:160px; height: 160px; background: url(/images/layout/cymoid_symbol.svg) no-repeat center; background-size: contain; }
.gray-glass-box span.gray-glass-box-img{position: absolute; top:0; left:0; width:35%; height:100%; background-position: center; background-size: cover;}
.gray-glass-box h4{font-size: 22px;}

#bottom-wrap img {width: 100%;}
#bottom-wrap.wrap {padding:0;}
.bottom-menu{padding: 16px 0;text-align:center;}
.bottom-menu a{display: inline-block; padding-left:20px; white-space: nowrap;}
.gradient-text, .video-text h1 span{font-weight:bold; background-image: linear-gradient(45deg, var(--purple) 0%, var(--purple) 50%, var(--blue) 100%); color: transparent; background-clip: text;}

.theme-dark .logo-bottom{filter: invert(100%);}

#footer-wrap{padding: 30px 0 50px; font-size:14px}

.holo-box{position:relative; display: block; height: 300px; margin-bottom: 30px; border-radius: 15px; overflow: hidden; color:var(--white); }
.holo-box:hover{color:var(--white);}
.holo-box-bg{position: absolute; top:0; left: 0; width:100%; height:100%; background: url(/images/layout/holographic03.jpg) no-repeat center; background-size: cover; transition: 0.5s; }
.holo-box:hover .holo-box-bg{top:-10%; left: -10%; width:120%; height:120%;}
.holo-box-overlay{position: absolute; top:0; left: 0; width:100%; height:100%; background: rgba(0,0,0,0.3); transition: 0.5s;}
.holo-box:hover .holo-box-overlay{background: rgba(0,0,0,0.1)}
.holo-box-title{display: block; position: absolute; top:0; left: 0; width:100%; padding:25px; font-size: 22px;}
.holo-box-lead{display: block; position: absolute; bottom:0; left: 0; width:100%; padding:25px; opacity: 1; transition: 0.5s;}
.holo-box:hover .holo-box-lead{opacity: 1;}

.slide-box{display:block; padding:20px; margin:0 10px; border-radius: 20px;background-color: var(--light-gray); color:var(--black);}
.slide-box-img{display:block;border-radius: 15px; height:200px; margin-bottom: 20px; background-size: cover; background-position: center;}
.slide-box-title{display:block; margin-bottom: 20px; font-weight:bold;}
.slide-box-lead{display:block; margin-bottom: 12px;}
.theme-dark .slide-box{background-color: var(--deep-black); color:var(--white);}

.slider-container{position: relative;margin:80px 0; cursor: grab;}
.slider-controls{position: absolute; top:50%; left:0; width:100%; height:0px;}
.slider-ar{position:absolute;top:-20px;width:40px;height:40px;border-radius:100%; background-color: var(--light-gray);}
.slider-ar span{position: relative; top:7px; left: 14px; display:inline-block; width: 10px; height: 10px; border:2px solid var(--black); border-left:0; border-bottom:0;}
.slider-ar.slider-prev{left:-30px; transform: rotate(225deg);}
.slider-ar.slider-next{right:-30px; transform: rotate(45deg);}
.theme-dark .slider-ar{background-color: var(--deep-black);}
.theme-dark .slider-ar span{border-color: var(--white);}

.product-img{display: block; margin: 40px 0; border-radius: 20px; background-size: cover; background-position: center; height:400px; }

.customer-quote{display:block; padding:30px; border: 1px solid var(--white); border-radius: 20px; margin: 15px; font-family: Arial, sans-serif;}
.customer-quote p{font-size:  12px;}
.rating span{display: inline-block; margin:2px; width:20px; height: 20px; background:url(/images/layout/star.svg) no-repeat center;background-size: contain;}

#scroll-top{position: fixed; transform: rotate(45deg); bottom:100px; right: 40px;; display:block; width:40px; height:40px; border-radius: 100%; background-color: var(--purple); transition: 0.3s;}
#scroll-top::after{content:" "; width:10px; height:10px; position: absolute; top:15px; left:15px; border:2px solid  var(--white); border-right:0; border-bottom: 0;}
#scroll-top:hover{background-color: var(--pink);}

#tooltip{border:0;}
#tooltip h3{display: block; white-space: nowrap; padding:5px 10px; background: var(--deep-black); color:var(--pink); font-size: 12px;}

.input-line{display:block; width:100%; padding: 4px; margin: 10px 0 30px 0; background: none; border: none; border-bottom: 1px solid var(--dark); }
.input-line input, .input-line select{display:block; width:100%; padding: 2px 0px 2px 20px; font-size: 20px; border: none; background: none;}

/*TEMP OPENING*/
/*
.menu-block{display:none;}
.bottom-menu{display:none}
*/
.glass-box,#footer-wrap a{cursor:default;}
.hero-video{object-fit:cover}
a.holo-box{cursor: default}

.prod-info{border-collapse: collapse;}
.prod-info td{padding: 2px 0; vertical-align: top; line-height: 1.3; font-size: 14px; font-weight: bold;}
.prod-info td.label{white-space: nowrap; text-align: right; padding-right:5px; font-weight: normal; color: rgba(255,255,255,0.5);}
.prod-title{margin:0; font-size: 36px;}
.prod-subtitle{margin:0 0 15px 0; font-size: 18px; font-weight: bolder;}
.prod-list-title{font-size:45px; margin-top:40px;}
.embed-responsive{margin-bottom: 30px; border-radius: 20px; overflow: hidden; background-color: #000;}

#captcha{background-color:transparent;border:none;border-bottom: 1px solid var(--dark); padding:4px 10px;}
#captcha.input-text{border: 1px solid var(--pink);padding: 10px 20px;}

.gal{display: block; margin-bottom: 30px;}
.gal a{display: inline-block; width: 100%; height: 130px; border-radius: 10px; background-size: cover; opacity: 0.6; transition: 0.3s; margin:0 0 15px 0;}
.gal a:hover{opacity: 1;}

.sm-center{text-align:center;}

.hidden-label{display:none}
.contact-submit{background-color:var(--purple);color:#fff;padding:10px 15px;border-radius:15px;border:none;}
.contact-submit:hover{background-color:var(--neonpink)}

@media (min-width: 768px) {
  .video-text{width: 660px;font-size:26px;}
  .video-text h1{font-size:62px}
}
@media (min-width: 992px) {
  .sm-center.t-left{text-align:left;}
  .sm-center.t-right{text-align:right;}
  .mobile-menu-items, .project-menu-items{overflow: hidden;}

  .menu-parent {
    display: grid;
    grid-column-gap: 10px;grid-row-gap: 10px;
    }
  .menu-parent {
    height:100%;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
  .menu-p{margin:0;}
  .menu-p1 { grid-area: 1 / 2 / 3 / 3; }
  .menu-p2 { grid-area: 2 / 3 / 3 / 5; }
  .menu-p3 { grid-area: 1 / 1 / 2 / 2; }
  .menu-p4 { grid-area: 2 / 1 / 3 / 2; }
  .menu-p5 { grid-area: 1 / 3 / 2 / 4; }
  .menu-p6 { grid-area: 1 / 4 / 2 / 5; }

  .menu-p-textbox{position:absolute;bottom:25px;left:15px;font-size:22px;padding:0px;}

  .section-2-text{padding-top:0;}

  .gray-glass-box, .gray-glass-box:hover{padding-right:30%; font-size: 22px;}
  .gray-glass-box h4{font-size: 31px;}

  .wrap.section-4{background-image: url(/images/layout/float_bg02.png);background-repeat: no-repeat;background-position: left;background-size: contain;}
  .wrap.section-5{background-image: url(/images/layout/float_bg03.png);background-repeat: no-repeat;background-position: right;background-size: 800px;}
  .wrap.section-6{background-image: url(/images/layout/float_bg04.png);background-repeat: no-repeat;background-position: bottom right;background-size: 300px;}
  .wrap.section-7{background-image: url(/images/layout/about_02.png);background-repeat: no-repeat;background-position: right;background-size: contain;}
  .wrap.section-8{background-image: url(/images/layout/about_01.png);background-repeat: no-repeat;background-position: left;background-size: contain;}
  .wrap.section-9{background-image: url(/images/layout/float_bg05.png);background-repeat: no-repeat;background-position: bottom right;background-size: 300px;}
  .wrap.section-10{background-image: url(/images/layout/float_bg06.png);background-repeat: no-repeat;background-position: bottom right;background-size: 300px; min-height: 600px;}

  .video-container-section{width:40%;}

  .menu-p2 .bg{background-size:300px auto;}
  .glass-box.small{font-size:24px;}
  
  .holo-box-lead{ opacity: 0;}

  .gal a{width: 22%; height: 90px; margin:0 2% 5px 0;}
}

@media (min-width: 1200px) {
}