html, body {
	overflow: hidden;
	color: #fff;
	font-family: 'Play', sans-serif;
	line-height: 1.4;
}

::-webkit-scrollbar {
	width: 1px;
	height: 1px;
	background: transparent;
}

::-webkit-scrollbar-thumb {
	width: 1px;
	background: transparent;
}

* {
	box-sizing: border-box;
}

body > canvas {
	position: absolute;
	left: 0;
	top: 0;
}

section .info > * {
	z-index: 6;
}

body {
	padding:0;
	margin: 0;
	border:0;
	font-size:100%;
	vertical-align:baseline;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	width: 100%;
	height: 100%;
	position: relative;
	background-color: #222;
	background-image: url('https://drive.google.com/uc?export=view&id=0BzFF7FmbJUo5X0NEUXFVd0NBcWc');
	background-image: url('https://img.wallpapersafari.com/desktop/1920/1080/51/8/0XDSdm.jpg');
	background-image: url('../img/watter.jpg');
	background-image: url('../img/wallpaper.jpg');
	background-image: url('../img/bg.jpg');
	background-image: url('../img/black-sky.jpg');
	background-image: url('../img/light-sky.jpg');

	background-position: 0 0;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	background-size: cover;
}

body:after {
	content: '';
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	position: absolute;
	background-color: rgba(0, 0, 0, 0.1);
    z-index: 0;
    animation: thunder-bg 6s infinite;
}


/*ligtning animation*/
 @-webkit-keyframes thunder-bg {
	 0% {
		 background-color: rgba(34, 34, 34, .75);
	}
	 9% {
		 background-color: rgba(34, 34, 34, .75);
	}
	 10% {
		 background-color: rgba(255,255,255, .2);
	}
	 10.5% {
		 background-color: rgba(34, 34, 34, .75);
	}
	 80% {
		 background-color: rgba(34, 34, 34, .75);
	}
	 82% {
		 background-color: rgba(255,255,255, .2);
	}
	 83% {
		 background-color: rgba(34, 34, 34, .75);
	}
	 83.5% {
		 background-color: rgba(255,255,255, .2);
	}
	 100% {
		 background-color: rgba(34, 34, 34, .75);
	}
}


/*Storm canvas*/
#canvas3 {
	 z-index: 1;
}
 #canvas2 {
	 z-index: 2;
}
 #canvas1 {
	 z-index: 3;
}



/*mousesmoke*/

#smokemove {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;
	opacity: .7;
}





.info p {
	position: relative;
	text-align: center;
	opacity: 0;
	transition: opacity 1.5s ease;
	transition-delay: .3s;
}
h1 {
	margin: 0;
	z-index: 1;
	text-align: center;
	position: relative;
	letter-spacing: 5px;
	font-size: 80px;
	font-weight: 900;
	transition: opacity 1.5s ease;
	opacity: 0;
	font-family: 'Orbitron', sans-serif;
}

h1 + p {
	font-family: 'Orbitron', sans-serif;
}


main {
	position: relative;
	width: 100%;
	height: 100vh;
}

header {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
	padding: 30px;
	align-items: center;
}

header .btn {
	z-index: 6;
}
footer {
	padding: 30px;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: space-between;
	align-items: center;
}


footer a {
	text-decoration: none;
	color: #fff;
	font-size: 14px;
	letter-spacing: 2px;
	position: relative;
	z-index: 6;
	opacity: 0;
	transition: all 1.5s ease;
}

.social {
	list-style-type: none;
	padding: 0;
	margin: 0;
	text-align: left;
	display: inline-block;
	transition: all .3s ease;
	width: 102px;
}

footer .social {
	opacity: 0;
}

.social li {
	display: inline-block;
	margin: 0 3px;
	vertical-align: middle;
}

.social a {
	display: block;
	z-index: 6;
	position: relative;
	width: 25px;
	height: 25px;
	opacity: 1;
}

.social a svg {
	display: block;
	width: 100%;
	height: 100%;
}

.social a svg path {
	fill: #fff;
}


.lang {
	position: relative;
	width: 102px;
	text-align: right;
}

.lang a {
	z-index: 6;
	opacity: 1;
	width: 80px;
	height: 30px;
	background: #fff;
	border-radius: 30px;
	display: inline-block;
	cursor: pointer;
	box-shadow: inset 0 0 5px rgba(0,0,0, .5);
	border: 2px solid;
	/*right: 0;
	bottom: -6px;
	position: absolute;*/
}

.lang label input {
	position: absolute;
	opacity: 0;
}

.lang a span {
	width: 40px;
	height: 26px;
	position: absolute;
	display: block;
	top: 0;
	border-radius: 30px;
	background: #fff;
	box-shadow: 0 0 5px rgba(0,0,0,.5);
	background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(102,102,102,1) 100%);
	transition: all .3s ease;
	z-index: 2;
}

.lang a.en span {
	left: 0;
}

.lang a.ru span {
	right: 0;
}

.lang a span:after {
	position: absolute;
	top: 4px;
	font-family: 'Orbitron', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #000000;
	transition: all .3s ease;
	z-index: -1;
}

.lang a.en span:after {
	content: 'EN';
	right: -28px;
}
.lang a.ru span:after {
	content: 'RU';
	left: -28px;
}


[class^="letter"] {
	-webkit-transition: opacity 3s ease;
	-moz-transition: opacity 3s ease;
	transition: opacity 3s ease;
}
.letter-0 {
	transition-delay: 0.2s;
}
.letter-1 {
	transition-delay: 0.4s;
}
.letter-2 {
	transition-delay: 0.6s;
}
.letter-3 {
	transition-delay: 0.8s;
}
.letter-4 {
	transition-delay: 1.0s;
}
.letter-5 {
	transition-delay: 1.2s;
}
.letter-6 {
	transition-delay: 1.4s;
}
.letter-7 {
	transition-delay: 1.6s;
}
.letter-8 {
	transition-delay: 1.8s;
}
.letter-9 {
	transition-delay: 2.0s;
}
.letter-10 {
	transition-delay: 2.2s;
}
.letter-11 {
	transition-delay: 2.4s;
}
.letter-12 {
	transition-delay: 2.6s;
}
.letter-13 {
	transition-delay: 2.8s;
}
.letter-14 {
	transition-delay: 3.0s;
}
.letter-15 {
	transition-delay: 3.2s;
}
/*h1 {
	visibility: hidden;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);

}
h1.transition-in {
	visibility: visible;
}
h1 [class^="letter"] {
	opacity: 0;
}
h1.transition-in [class^="letter"] {
	opacity: 1;
}
*/


/*Glith effect*/
.glitch {
	 position: relative;
	 color: white;
	 mix-blend-mode: lighten;
}


 .glitch:before, .glitch:after {
	 content: attr(data-text);
	 position: absolute;
	 top: 0;
	 width: 100%;
	 background: transparent;
	 clip: rect(0, 0, 0, 0);
}
 .glitch:before {
	 left: -1px;
	 text-shadow: 1px 0 rgba(255, 0, 0, 0.7);
}
 .glitch:after {
	 left: 1px;
	 text-shadow: -1px 0 rgba(0, 0, 255, 0.7);
}
 .glitch:before {
	 text-shadow: 4px 0 rgba(255, 0, 0, 0.7);
	 animation: glitch-loop-1 0.8s infinite ease-in-out alternate-reverse;
}
 .glitch:after {
	 text-shadow: -5px 0 rgba(0, 0, 255, 0.7);
	 animation: glitch-loop-2 0.8s infinite ease-in-out alternate-reverse;
}
 @keyframes glitch-loop-1 {
	 0% {
		 clip: rect(36px, 9999px, 9px, 0);
	}
	 25% {
		 clip: rect(25px, 9999px, 99px, 0);
	}
	 50% {
		 clip: rect(50px, 9999px, 102px, 0);
	}
	 75% {
		 clip: rect(30px, 9999px, 92px, 0);
	}
	 100% {
		 clip: rect(91px, 9999px, 98px, 0);
	}
}
 @keyframes glitch-loop-2 {
	 0% {
		 top: -1px;
		 left: 1px;
		 clip: rect(65px, 9999px, 119px, 0);
	}
	 25% {
		 top: -10px;
		 left: 6px;
		 clip: rect(79px, 9999px, 19px, 0);
	}
	 50% {
		 top: -6px;
		 left: 2px;
		 clip: rect(68px, 9999px, 11px, 0);
	}
	 75% {
		 top: 0px;
		 left: -6px;
		 clip: rect(95px, 9999px, 53px, 0);
	}
	 100% {
		 top: -1px;
		 left: -1px;
		 clip: rect(31px, 9999px, 149px, 0);
	}
}











/*Main btn*/
.btn:before,
.btn:after {
	content: '';
	height: 100%;
	position: absolute;
	top: 0;
}

.btn:before {
	background-color: rgba(255, 255, 255, 0.1);
	left: 0;
	width: 50%;
}

.btn {
	background-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
	/*box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);*/
	color: #ffffff;
	font-size: 14px;
	letter-spacing: 1px;
	overflow: hidden;
	padding: 14px 20px;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
	border: none;
	outline: none;
	cursor: pointer;
	font-weight: 600;
	display: block;
	min-width: 165px;
	text-align: center;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity .1.5s ease;
	transition-delay: .15s;
	font-family: 'Play', sans-serif;
}


.btn:after {
	background-image: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0),
		rgba(255, 255, 255, 0.4),
		rgba(0, 0, 0, 0)
		);
	left: -100%;
	transition: left 0.5s 0.5s ease;
	width: 100%;
}

.btn:hover:after {
	left: 100%;
}

.btn span {
	background-color: #ffffff;
	display: block;
	position: absolute;
	transition: height 0.5s ease,
	transform 0.5s ease,
	width 0.5s ease;
}

.btn span:nth-child(1) {
	height: 1px;
	left: 0;
	top: 0;
	width: 0;
}

.btn:hover span:nth-child(1) {
	transform: translateX(100%);
	width: 100%;
}

.btn span:nth-child(2) {
	height: 0;
	left: 0;
	top: 0;
	width: 1px;
}

.btn:hover span:nth-child(2) {
	height: 100%;
	transform: translateY(100%);
}

.btn span:nth-child(3) {
	bottom: 0;
	height: 1px;
	right: 0;
	width: 0;
}

.btn:hover span:nth-child(3) {
	transform: translateX(-100%);
	width: 100%;
}

.btn span:nth-child(4) {
	bottom: 0;
	height: 0;
	right: 0;
	width: 1px;
}

.btn:hover span:nth-child(4) {
	height: 100%;
	transform: translateY(-100%);
}


.btn:active:before {
	width: 0;
}


.btn-wrapper {
	position: relative;
	background: transparent;
	display: inline-block;
}



/*MODAL GLOBAL START*/
.overlay {
    /*background-color: rgba(0, 0, 0, 0.4);*/
    background: linear-gradient(to bottom, #020111 10%,#3a3a52 100%);
    bottom: 0;
    cursor: default;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all .25s ease-out;
    visibility: hidden;
    opacity: 0;
}
.overlay.modal-opened {
    visibility: visible;
    opacity: 1;
}

.modal {
	position: fixed;
    display: none;
    left: 0;
    top: 0;
    z-index: 999999;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.modal .modal-wrap {
	width: 100%;
    max-width: 400px;
    min-height: 100%;
    margin: 0 auto;
    padding: 50px 0 30px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    align-items: center;
}

.modal.show {
	display: block;
}

.modal .close_modal {
    position: absolute;
    right: -25px;
    top: -25px;
    color: #fff;
    font-size: 40px;
    line-height: 24px;
    height: 24px;
    width: 24px;
    overflow: hidden;
    cursor: pointer;
    z-index: 1;
    font-family: sans-serif;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    transition: all .3s ease;
    opacity: .8;
}

.modal .close:hover {
	opacity: 1;
}


.modal .modal-body {
    width: 100%;
    padding: 30px;
    /*background: #ffff;*/
    height: auto;
    color: #fff;
    position: relative;
    /*border-radius: 5px;*/
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.4);
    z-index: 2;
    top: -50px;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045);
    /*background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
	background-size: 400% 400%;
	animation: gradientBG 15s ease infinite;*/
	background-color: rgba(0, 0, 0, 0.6);
    /*border: 10px solid;*/
   	border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.modal-body:before {
	content: '';
	width: 100%;
	height: 100%;
	border: 10px solid;
   	border-color: rgba(255, 255, 255, 0.2);
   	position: absolute;
   	left: 0;
   	top: 0;
   	box-sizing: border-box;
   	z-index: -1;

}

/*Modal line animation*/
.modal .modal-body .line-1 {
  -webkit-animation: move1 4000ms infinite ease;
          animation: move1 4000ms infinite ease;
}
.modal .modal-body .line-2 {
  -webkit-animation: move2 4000ms infinite ease;
          animation: move2 4000ms infinite ease;
}
.modal .modal-body .line-3 {
  -webkit-animation: move3 4000ms infinite ease;
          animation: move3 4000ms infinite ease;
}
.modal .modal-body .line-4 {
  -webkit-animation: move4 4000ms infinite ease;
          animation: move4 4000ms infinite ease;
}


.modal-body .line-1 {
	content: "";
	display: block;
	position: absolute;
	width: 2px;
	background-color: white;
	left: 0;
	bottom: 0;
}
.modal-body .line-2 {
	content: "";
	display: block;
	position: absolute;
	height: 2px;
	background-color: white;
	left: 0;
	top: 0;
}
.modal-body .line-3 {
	content: "";
	display: block;
	position: absolute;
	width: 2px;
	background-color: white;
	right: 0;
	top: 0;
}
.modal-body .line-4 {
	content: "";
	display: block;
	position: absolute;
	height: 2px;
	background-color: white;
	right: 0;
	bottom: 0;
}

@-webkit-keyframes move1 {
	0% {
		height: 100%;
		bottom: 0;
	}
	54% {
		height: 0;
		bottom: 100%;
	}
	55% {
		height: 0;
		bottom: 0;
	}
	100% {
		height: 100%;
		bottom: 0;
	}
}

@keyframes move1 {
	0% {
		height: 100%;
		bottom: 0;
	}
	54% {
		height: 0;
		bottom: 100%;
	}
	55% {
		height: 0;
		bottom: 0;
	}
	100% {
		height: 100%;
		bottom: 0;
	}
}
@-webkit-keyframes move2 {
	0% {
		width: 0;
		left: 0;
	}
	50% {
		width: 100%;
		left: 0;
	}
	100% {
		width: 0;
		left: 100%;
	}
}
@keyframes move2 {
	0% {
		width: 0;
		left: 0;
	}
	50% {
		width: 100%;
		left: 0;
	}
	100% {
		width: 0;
		left: 100%;
	}
}
@-webkit-keyframes move3 {
	0% {
		height: 100%;
		top: 0;
	}
	54% {
		height: 0;
		top: 100%;
	}
	55% {
		height: 0;
		top: 0;
	}
	100% {
		height: 100%;
		top: 0;
	}
}
@keyframes move3 {
	0% {
		height: 100%;
		top: 0;
	}
	54% {
		height: 0;
		top: 100%;
	}
	55% {
		height: 0;
		top: 0;
	}
	100% {
		height: 100%;
		top: 0;
	}
}
@-webkit-keyframes move4 {
	0% {
		width: 0;
		right: 0;
	}
	55% {
		width: 100%;
		right: 0;
	}
	100% {
		width: 0;
		right: 100%;
	}
}
@keyframes move4 {
	0% {
		width: 0;
		right: 0;
	}
	55% {
		width: 100%;
		right: 0;
	}
	100% {
		width: 0;
		right: 100%;
	}
}

/*@keyframes gradientBG {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}*/

.modal.show .modal-body  {
	top: 0;
	opacity: 1;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@media screen and (max-width: 767px) {
	h1 {
		font-size: 76px;
	}
}

@media screen and (max-width: 575px) {
    .modal .modal-wrap  {
        max-width: calc(100% - 30px)!important;
    }
    .modal .close {
    	right: 0;
    }
    h1 {
		font-size: 72px;
	}
}
/*MODAL GLOBAL END*/




/*Form*/
.form {
	text-align: center;
}

.form h2 {
	margin: 0 0 5px;
	text-transform: uppercase;
}
.form p {
	margin: 0 0 15px;
}

.form label {
	width: 100%;
	display: block;
	margin-bottom: 10px;
	position: relative;
	height: 40px;
	padding-left: 40px;
}

.form label span {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 40px;
	left: 0;
	top: 0;
	position: absolute;
	background: #525252;
}

.form label span svg {
	width: 20px;
	height: 20px;
	display: block;
}

.form label span svg path {
	transition: all .2s ease;
}


.form .form-icon.error svg path {
	fill: #ff0000;
}

.form .form-icon.active svg path {
	fill: #00e000;
}

.form input {
	width: 100%;
	height: 100%;
	padding: 0 15px;
	border: none;
	outline: none;
	background: #f0f0f0;
	font-family: 'Play', sans-serif;
	font-weight: 500;
}


.form .btn-wrapper {
	width: 100%;
	background: #101010;
}

.form .btn {
	width: 100%;
}

.form textarea {
	resize: none;
    width: 100%;
    padding: 5px 15px;
    box-sizing: border-box;
    height: 100%;
    border: none;
    outline: none;
    background: #f0f0f0;

}
.form textarea::placeholder,
.form input::placeholder {
	/*font-family: 'Orbitron', sans-serif;*/
	opacity: 1;
	transition: opacity 0.3s ease;
	font-family: 'Play', sans-serif;
	font-weight: 500;
}
.form textarea:focus::placeholder,
.form input:focus::placeholder {
	opacity: 0;
}

.form textarea:focus ~ span svg path,
.form input:focus ~ span svg path {
	fill: #0090ff!important;
}


.form label:nth-last-child(2) {
	height: 100px;
}



/*dynamic smoke*/
.clouds {
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 4;
	left: 0;
	top: 0;
}

.clouds img {
	display: block;
	position: absolute;
	transform: rotate(0);
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	object-fit: contain;
	pointer-events: none;
}

.clouds img:nth-child(1) {
	animation: rotating1 40s linear infinite;
	margin: 0;

}
.clouds img:nth-child(2) {
	animation: rotating2 30s linear infinite;
	transform: rotate(0);
}


 @-webkit-keyframes rotating1 {
	from {
		transform: rotate(359deg);
		margin: -20px -30px 0 0;
	}
	to {
		transform: rotate(0);
		margin: 0;
	}
}

 @-webkit-keyframes rotating2 {
	from {
		transform: rotate(-359deg);
		margin: 0 0 -10px -25px;
	}
	to {
		transform: rotate(0);
		margin: 0;
	}
}




/*preloader*/
.preloader {
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 9999999;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: #191919;
}

.preloader p {
	font-size: 18px;
	position: relative;
}

.preloader p:before {
	content: 'loaded';
	display: inline-block;
	font-size: 18px;
	animation: changeText 2.1s linear;
	font-family: 'Orbitron', sans-serif;
}

.load-circle {
	position: relative;
	width: 100px;
	height: 100px;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
	justify-content: center;
}


.load-circle:before {
    content: '';
    width: 80px;
    height: 80px;
    position: absolute;
    left: calc(50% - 40px);
    top: calc(50% - 40px);
    border: 2px solid #00ff32;
    display: block;
    border-radius: 50%;
    box-sizing: border-box;
    z-index: 999;
    animation: changeColor 2.1s linear;
    visibility: visible;
    font-family: 'Orbitron', sans-serif;
}

.load-circle div {
	display: block;
	border-radius: 50%;
	position: absolute;
	width: 80px;
	height: 80px;
	border: 2px solid #ff0000;
}

.load-circle div:nth-child(1) {
	border-top: 2px solid transparent!important;
	border-bottom: 2px solid transparent!important;
	animation: spinRight 2s linear;
	transform: rotate(0);
}
.load-circle div:nth-child(2) {
	border-left: 2px solid transparent!important;
	border-right: 2px solid transparent!important;
	animation: spinLeft 2s linear;
	transform: rotate(0);
}

@keyframes spinLeft {
	0% {
		transform: rotate(360deg);
		width: 100%;
		height: 100%;
	}
	80% {
		transform: rotate(0);
		width: 100%;
		height: 100%
	}
	100% {
		width: 80px;
		height: 80px;
	}
}

@keyframes spinRight {
	0% {
		transform: rotate(-360deg);
		width: 60px;
		height: 60px;
	}
	80% {
		transform: rotate(0);
		width: 60px;
		height: 60px;
	}
	100% {
		width: 80px;
		height: 80px;

	}
}
@keyframes changeColor {
	0% {
		visibility: hidden;
	}
	99% {
		visibility: hidden;
	}
	100% {
		visibility: visible;
	}
}

@keyframes changeText {
	1% {
		content: 'loading';
	}
	99% {
		content: 'loading';
	}
	100% {
		content: 'loaded';
	}
}

.thx-modal h3 {
	text-align: center;
}

.thx-modal .modal-body [class*="line-"] {
	background: #3ee800;
}

.thx-modal svg {
  width: 65px;
  display: block;
  margin: 0 auto 10px;
}

.thx-modal.show .path {
	 stroke-dasharray: 1000;
	 stroke-dashoffset: 0;
}
 .thx-modal.show .path.circle {
	 -webkit-animation: dash 0.9s ease-in-out;
	 animation: dash 0.9s ease-in-out;
}
.thx-modal.show  .path.line {
	 stroke-dashoffset: 1000;
	 -webkit-animation: dash 0.9s 0.35s ease-in-out forwards;
	 animation: dash 0.9s 0.35s ease-in-out forwards;
}
 .thx-modal.show .path.check {
	 stroke-dashoffset: -100;
	 -webkit-animation: dash-check 0.9s 0.35s ease-in-out forwards;
	 animation: dash-check 0.9s 0.35s ease-in-out forwards;
}

#work-info img {
	width: 100%;
	display: block;
}

#work-info .modal-wrap {
	max-width: 550px;
}

#work-info .modal-wrap p {
	margin-bottom: 0;
	font-size: 18px;
}

#work-info .modal-wrap a {
	display: block;
	color: #fff;
	font-weight: 600;
	font-size: 18px;
	margin-top: 15px;
}


@-webkit-keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}

@keyframes dash-check {
  0% {
    stroke-dashoffset: -100;
  }
  100% {
    stroke-dashoffset: 900;
  }
}




section {
	width: 100%;
	height: 100%;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .5s ease-in;
	opacity: 1;
	padding: 110px 0 80px;
}
section .wrapper {
	width: 100%;
	height: 100%;
	overflow: auto;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}

/*Language*/

/*.lang li {
	display: inline-block;
	position: relative;
	z-index: 6;
	cursor: pointer;
	margin: 0 5px;
	text-transform: capitalize;
}

.lang {
	list-style-type: none;
	position: relative;
}*/




/*.lang label input:checked + span {
	left: 36px;
}

.lang label input:checked + span:after {
	content: 'RU';
	right: 44px;
}*/


/* items */

.our-work__items {
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	justify-content: center;
	padding: 0 30px;
	max-width: 1200px;
	margin: auto;
	column-gap: 15px;
}


.our-work__items .item {
	width: calc((100% / 3) - 10px);
	margin-bottom: 15px;
	z-index: 6;
	background: rgba(255, 255, 255, .07);
	padding: 15px;
	border-radius: 6px;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	transition: all .2s ease;
	box-shadow: 0 1px 10px rgba(0,0,0, .5);
}

.our-work__items .item figure {
	display: block;
	margin: 0;
	height: 180px;
	overflow: hidden;
	width: 100%;
}

.our-work__items .item figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: all .8s ease;
}

.our-work__items .item:hover img {
	transform: scale(1.1);
}


.our-work__items .item h3 {
	margin: 10px 0 10px;
}

.our-work__items .item p {
	margin: 0;
	overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    max-height: 100px;
    line-height: 1.3;
}

.our-work__items .item:hover {
    box-shadow: 0px 10px 20px rgba(255, 255, 255, 0.02);
    background: rgba(255, 255, 255, 0.1);
}
.our-work__items .item:hover:before {
    display: block;
    content: '';
    width: 100%;
    transform: translate(50%);
    background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation-name: loading;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
}

@keyframes loading { from { transform: translate(-100%); } to { transform: translate(200%); } }



.our-work__items .item {
 	transition: all .6s ease;
 	transform: translateY(-50px);
 	opacity: 0;
 	visibility: hidden;
 	transition: all 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

.our-work.show .our-work__items .item {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


.our-work__items .item:nth-child(2) {
 	transition-delay: .2s;
}

.our-work__items .item:nth-child(3) {
 	transition-delay: .4s;
}
.our-work.hide {
	display: none;
}
.our-work.fade .item {
 	transform: translateY(-50px);
 	opacity: 0;
 	visibility: hidden;
}

.our-work__items .item {
	width: calc((100% / 3) - 10px);
	cursor: pointer;
	/*transform: translateY(-50px);
 	opacity: 0;
 	visibility: hidden;
 	transition: all 0.4s cubic-bezier(0.6, -0.28, 0.735, 0.045);*/

}
/*.our-work__items .item {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
*/

p, h2 {
	color: #f1f1f1;
}

#about-us .modal-wrap {
	max-width: 550px;
}

#about-us .modal-wrap p {
	font-size: 18px;
}

#about-us .modal-wrap h2 {
	color: #f1f1f1;
}


section:not(.main-screen) {
	display: none;
	opacity: 0;
}

section {
	position: absolute;
	left: 0;
	top: 0;
}


.back_to {
	display: none;
}



.about-us__info {
	max-width: 600px;
	margin: auto;
	background: rgba(255, 255, 255, .07);
	padding: 15px;
	border-radius: 6px;
	position: relative;
	transition: all .2s ease;
	z-index: 6;
	box-shadow: 0 1px 10px rgba(0,0,0, .5);
}

.main_btn {
	display: none;
}

@media screen and (max-width: 991px) {
	.our-work__items .item {
		width: calc((100% / 2) - 10px);
	}
}


@media screen and (max-width: 640px) {
	.about-us__info {
		max-width: calc(100% - 30px);
	}
}

@media screen and (max-width: 575px) {
	.btn-wrapper {
		width: 50%;
		display: -webkit-flex;
		display: -moz-flex;
		display: -ms-flex;
		display: -o-flex;
		display: flex;
		justify-content: center;
	}
	header .btn-wrapper:last-child {
		margin-top: 10px;
	}
	header {
		flex-wrap: wrap;
		justify-content: center;
	}
	section {
		padding: 150px 0 100px;
	}
	.modal .close_modal {
		right: 0;
	}
	.our-work__items .item {
		width: 100%;
	}
	h1 {
		font-size: 60px;
	}
	footer {
		flex-direction: column;
		align-items: center;
	}
	footer .mailbox {
		display: none;
	}
	.lang a {
		position: relative;
		bottom: -15px;
	}
	.lang {
		text-align: center;
	}

	.modal .modal-wrap {
		padding: 50px 0 30px;
	}
	.form h2 {
		font-size: 20px;
	}
}

@media screen and (max-width: 460px) {
	h1 {
		font-size: 40px;
	}
	.info p {
		font-size: 14px;
	}

	header {
		padding-right: 15px;
		padding-left: 15px;
	}
	.btn {
		min-width: 135px;
		font-size: 12px;
		padding: 10px 10px;
	}
}