@charset "utf-8";
/* CSS Document */

*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	border: none;
	outline: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
}

*,
*::after,
*::before {
	cursor: none !important;
}

::selection {background: rgba(147, 192, 31, 0.29); /* WebKit/Blink Browsers */}
::-moz-selection {background: rgba(147, 192, 31, 0.29); /* Gecko Browsers */}

.ml3 .letter, .ml4 .letter {
  display: inline-block;
}

a:focus,
button:focus,
input:focus,
textarea:focus {
outline: none;
}
/*.swiper-container { display:none}*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
}

body {
	background: rgb(239, 239, 243);
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color: rgba(164, 166, 169, 0.98);
}

h1, h2, h5 {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 600;
}

#canvas {
	height: auto !important;
    width: 166px !important;
    transform: translate(-50%, -50%);
    top: 45%;
    left: 50%;
	position: absolute;
	display: block;
}

#animation_container {
    position: absolute;
    width: 100% !important;
    height: 100% !important;
}

.guide {
    position: absolute;
    background: #ff000038;
    display: block;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
}
.guide.h {
	width: 1px;
	height: 100%;
}
.guide.w {
	width: 100%;
	height: 1px;
}
.guide.top {top: 40px;}
.guide.bottom {bottom: 40px;}
.guide.right {right: 40px;}
.guide.left {left: 40px;}

.coming {
    position: absolute;
    z-index: -1;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.3;
    height: 33vh;
    /* color: aliceblue; */
}
.comingBottom {
    position: absolute;
    z-index: -1;
    left: 50%;
    margin-left: -52px;
    height: 12px;
    bottom: 34px;
}

.logoHome {
    display: block;
    content: "";
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0);
    position: absolute;
    z-index: 999;
    top: 9px;
    left: 12px;
    border-radius: 50%;
}

.logo {
    display: block;
    width: 42px;
    height: 31px;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    margin-top: -15px;
    margin-left: -21px;
	transform: scale(0.86);
		transition: all;
	fill:#CCD4DF;
	opacity: 0;
}
.buttonAbout {
    position: absolute;
    top: 21px;
    right: 20px;
    z-index: 1;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.buttonAbout:before {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgb(0, 87, 255);
    z-index: -1;
    opacity: 0;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    transition: all 300ms ease;
}

.buttonAbout:hover:before  {
	opacity: 0.03;
}

.menu a {color: #0036ff;}
.menu a:after {
    content: "";
    display: block;
    opacity: 0; 
    width: calc(100% + 31px);
    height: 24px;
    position: absolute;
    left: -26px;
    top: -7px;
    background: rgba(255, 0, 0, 0.37);
}

.buttonAbout span {
    position: absolute;
    display: inline-block;
    width: 202px;
    margin-top: 2px;
    left: -161px;
    /* top: 14px; */
    /* opacity: 0.5; */
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.95em;
    text-transform: uppercase;
    /* transition: all 200ms ease; */
    color: #a1a9c8;
    pointer-events: none;
    /* background: #cddc3921; */
    font-family: 'Rajdhani', sans-serif;
}

.buttonAbout:hover span {
	/*left: -88px;*/
	/*opacity: 1;*/
}

.buttonAbout svg .triangleSolid {
    opacity: 0;
    transform: scale(0.3);
}

.buttonAbout svg, g {
  transform-origin: unset unset;
}
.buttonAbout path {
  transform-origin: 50% 50%;
  transform-box: fill-box;
}
.buttonAbout path {fill:#0736F9;}

.mailContact {
    position: absolute;
    bottom: 34px;
    left: 33px;
    font-weight: 500;
    font-size: 13px;
}
.mailContact a {
    color: #0036ff;
}
.mailContact a:after {
    display: block;
    content: "";
    width: 120%;
    height: 180%;
    /*background: rgba(0, 54, 255, 0.08);*/
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}
.mailContact a:before {
    display: inline-block;
    content: "";
    background: url(../images/icon-mail.svg) center no-repeat;
    width: 17px;
    height: 12px;
    position: relative;
    bottom: -2px;
    margin-right: 3px;
}
.iconInsta a {
    position: absolute;
    bottom: 33px;
    right: 32px;
    display: block;
    background: url(../images/incon-insta.svg) center no-repeat;
    width: 16px;
    height: 16px;
}
.iconInsta a:before {
    display: block;
    content: "";
    width: 200%;
    height: 200%;
    /*background: rgba(0, 54, 255, 0.08);*/
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}
.scene {
	position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
}
.layer {
    position: absolute;
    width: 100%;
    height: 100%;
}

.layer:nth-child(2) {
	z-index: -1;
}
.boxAbout {
    width: 100%;
    height: 100%;
    position: absolute;
	/*background: rgba(0, 54, 255, 1);*/
	background: rgba(0, 47, 221, 0.99);
    /* background: rgba(255, 0, 4, 0.2); */
	/*transform: translate(-50%,-50%);*/
    /*top: 50%;*/
    /*left: 50%;*/
    display: none;
    z-index: 1;
    overflow: hidden;
    justify-content: center;
	color: rgb(255, 255, 255);
    /*align-items: center;*/
}

.container-info {
    width: 1000px;
    max-width: 80%;
    
    padding: 152px 0;
	display: flex;
    align-items: center;
    justify-content: center;
}

.contInfo {
    z-index: 1;
    display: block;
	position: relative;
}

/*button close*/
.contButtonCloseAbout {
    position: absolute;
    display: block;
    width: 40px;
    height: 40px;
    right: 20px;
    top: 19px;
    z-index: 999;
    /* background: red; */
}
.buttonCloseAbout {
    position: absolute;
    width: 30px;
    height: 30px;
    z-index: 11;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.buttonCloseAbout:before {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgb(255, 255, 255);
    z-index: -1;
    opacity: 0.05;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    transition: all 300ms ease;
}

/*.buttonCloseAbout:after {
    content: "back";
    font-size: 23px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: aliceblue;
    position: absolute;
    transform: translate(50px, -51%);
    top: 50%;
    opacity: 0;
    transition: all 300ms ease;
    pointer-events: none;
    will-change: transform;
}*/


.buttonCloseAbout:hover:before {
    opacity: 0.09;
}

.buttonCloseAbout span {
    display: block;
    position: absolute;
    height: 2px;
    /* border-radius: 50%; */
    width: 100%;
    background: rgb(255, 255, 255);
    border-radius: 1.5px;
    /* transform: rotate(45deg); */
	pointer-events: none;
}

.buttonCloseAbout span:nth-child(1) {
	transform: rotate(45deg)
}
.buttonCloseAbout span:nth-child(2) {
	transform: rotate(-45deg)
}

.boxAbout p {
    font-size: 18px;
    letter-spacing: 0.07em;
    font-weight: 300;
    line-height: 1.5em;
    padding: 0.7em 0 0.7em;
    text-transform: uppercase;
    font-family: 'Rajdhani', sans-serif;
    opacity: 0.95;
}

.boxAbout h1 {
    font-size: 110px;
    letter-spacing: 0.005em;
    line-height: 0.9;
    font-weight: 600;
    text-transform: uppercase;
}
.boxAbout .shadowTittle {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    line-height: 0.8em;
    position: absolute;
    font-size: 220px;
    color: rgba(255, 255, 255, 0.11);
    letter-spacing: -0.03em;
    z-index: -1;
    left: -97px;
    top: -14px;
    text-transform: uppercase;
}
.boxAbout h2 {
    font-size: 50px;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.1em;
    padding: 0.2em 0 0.3em;
}
.boxAbout h5 {
    display: block;
    letter-spacing: 1.2em;
    text-transform: uppercase;
    padding-left: 7px;
    padding-bottom: 22px;
    padding-top: 40px;
    font-weight: 600;
    font-size: 15px;
}

.contInfo.active {
	display: block;
}

.logo.active {
	fill: #ffffff !important;
}

.contScroll {
    width: 100%;
    height: 100%;
}


.contScroll .os-content {
    display: flex !important;
    justify-content: center;
}

.contScroll .os-theme-dark>.os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle {
    background: rgb(255, 255, 255);
}


.detailFooterAbout {
    fill: #FFFFFF;
    padding: 30px 0;
}

/*.boxAbout:before {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    transition: all;
    background: radial-gradient(259vw circle at 100% 100%, #a000ff, transparent);
}*/


.boxAbout:before {
    display: block;
    content: "";
    width: 200%;
    height: 200%;
    position: absolute;
    background: radial-gradient(40vw circle, #a000ff, transparent);
    animation: colorSpin 2900ms cubic-bezier(0.23, 1, 0.32, 1) /*infinite*/; 
    transform: scale(7.3);
	bottom: -100%;
    right: -100%;
	/*bottom: 0%;
    right: 0%;*/
}


@keyframes colorSpin {
  0% {
	opacity: 0.3;
	
  }
  100% {
	opacity: 1;
  }
}


/*------------cursor-------------*/
/*------------cursor-------------*/
.cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
}
.cursor--small {
  width: 5px;
  height: 5px;
  left: -2.5px;
  top: -2.5px;
  border-radius: 50%;
  z-index: 11000;
  background: #0036ff;
}
.cursor--canvas {
  width: 100vw;
  height: 100vh;
  z-index: 12000;
}

.disable-doubletap-to-zoom {
    touch-action: none;
}




@media screen and (max-width:1366px) {
	
	/*body {background: red}*/
	.boxAbout h2 {
		font-size: 36px;
	}
	.boxAbout h1 {
		font-size: 80px;
	}
	.container-info {
		width: 800px;
		padding: 100px 0 50px;
	}
	.boxAbout p {
		font-size: 14px;
	}
	.boxAbout .shadowTittle {
		font-size: 156px;
		left: -87px;
		top: -9px;
	}
	.boxAbout h5 {
		display: block;
		letter-spacing: 1.2em;
		text-transform: uppercase;
		padding-left: 7px;
		padding-bottom: 16px;
		padding-top: 20px;
		font-weight: 600;
		font-size: 12px;
	}
	.detailFooterAbout {
		fill: #FFFFFF;
		padding: 20px 0;
	}
	
}



@media screen and (max-width:1024px) {
	*,
	*::after,
	*::before {
		cursor: default !important;
	}
	.custom-cursor, #followerCont {
		display: none;
	}
	.cursor {display: none;}
	.container-info {
		width: 60vw;
	}
	.boxAbout h1 {
		font-size: 6vw;
	}
	.boxAbout h2 {
		font-size: 3vw;
	}
	.boxAbout p {
		font-size: 1.5vw;
	}
	.boxAbout .shadowTittle {
		font-size: 12vw;
		left: -58px;
		top: -7px;
	}
}


@media screen and (max-width:900px){
	.logoHome {
		top: -1px;
		left: 1px;
		transform: scale(0.9);
	}
	.menu {
		top: 19px;
		right: 4px;
	}
	#canvas {width: 140px !important;}
	
	
	.comingBottom {
		height: 10px;
		bottom: 25px;
		margin-left: -43px;
	}
	
	.iconInsta a {
		bottom: 20px;
		right: 20px;
		width: 20px;
		height: 20px;
	}
	.textMail {
		display: none;
	}
	.mailContact {
		bottom: 23px;
		left: 21px;
	}
	.mailContact a:before {
		display: block;
		width: 19px;
		height: 14px;
		margin-right: 0;
		position: inherit;
	}
	.mailContact a:after {
		width: 200%;
		height: 303%;
	}
	.contButtonCloseAbout {
		right: 11px;
		top: 9px;
	}
	.buttonCloseAbout {
		transform: translate(-50%, -50%) scale(0.9);
	}
	.buttonCloseAbout:before {
		opacity: 0;
	}
	.buttonCloseAbout:hover:before {
		opacity: 0;
	}
	.buttonAbout {
		top: 12px;
		right: 11px;
	}
	.buttonAbout span { display: none}
	
	
}


@media screen and (max-width:500px){
	.guide.top {top: 30px;}
	.guide.bottom {bottom: 30px;}
	.guide.right {right: 30px;}
	.guide.left {left: 30px;}
	
	.logo {
		/*top: 11px;
		left: 13px;
		transform: scale(0.9);*/
	}
	
	.boxAbout .shadowTittle {
		font-size: 19vw;
		left: -21px;
		top: -6px;
	}
	.boxAbout h1 {
		font-size: 10vw;
	}
	.boxAbout h2 {
		font-size: 6vw;
		letter-spacing: 0.02em;
		line-height: 1.25em;
	}
	.boxAbout h5 {
		font-size: 3vw;
		padding-bottom: 1.2em;
		letter-spacing: 1em;
	}
	.container-info {
		padding: 68px 0;
		display: block;
	    width: 80%;
	}
	.boxAbout p {
		font-size: 4vw;
		letter-spacing: 0.08em;
		line-height: 1.4em;
	}
	.boxAbout:before {
		transform: scale(9);
	}

}