@import url("bootstrap.css");
	@import url("animate.css");
	@import url("https://fonts.googleapis.com/css?family=Roboto:400,300&subset=latin,cyrillic-ext");
	@import url("https://fonts.googleapis.com/css?family=Signika:400,700");
	@import url("font-awesome.min.css");
	@import url("magnific-popup.css");



/* 2. BASIC STYLES */

	html,
	body {
		height: 100%;
		width: 100%;
	}

	body {
		font-size: 16px;
		line-height: 1.5em;
		font-family: 'signika';
		background-color: transparent;
		letter-spacing: -1.5px;
		color: #fff;
		font-weight: 400;
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
		overflow-x: hidden;
		overflow-y: hidden;
	}

	a {
		transition: color 0.25s, background 0.25s, opacity 0.25s;
		-moz-transition: color 0.25s, background 0.25s, opacity 0.25s;
		-webkit-transition: color 0.25s, background 0.25s, opacity 0.25s;
		-o-transition: color 0.25s, background 0.25s, opacity 0.25s;
		-ms-transition: color 0.25s, background 0.25s, opacity 0.25s;
	}

	a, a:hover, a:active, a:focus {
		outline: 0;
		border: 0;
		text-decoration: none;
	}

	a, a:active, a:focus {
		color: #ffff;
	}

	a:hover {
		color: #fff;
	}

	h2 {
  	font-family: 'signika';
  	font-weight: 700;
  	text-transform: uppercase;
  	font-size: 1.4em;
  	display: inline;
  	border-bottom: 4px solid #fff;
  	padding-bottom: 10px;
	}

	p {
		margin-top: 20px;
		font-family: 'signika2', sans-serif;
		font-size: 1.4em;
		font-weight: 100;
		font-style: normal;
		line-height: 1.5em;
		letter-spacing: -0.2px;
	
	}
	
	p2 {
		margin-top: 30px;
		font-family: 'signika2', sans-serif;
		font-size: 0.95em;
		font-weight: 100;
		font-style: normal;
		line-height: 1.5em;
		letter-spacing: 0px;
	
	}

	::-moz-selection {
    color: #fff;
    background: rgba(237, 85, 101, 0.2);
	}

	::selection {
    color: #fff; 
    background: rgba(237, 85, 101, 0.2);
	}


/* 3. PRELOADER */

	.lj-preloader {
		content: "";
		width: 100%;
		height: 100%;
		z-index: 99;
		display: block;
		position: fixed;
		text-align: center;
		background: #ef7f01;
	}

	.lj-preloader > img {
		top: 45%;
		width: 180px;
		height: 50px;
		margin: 0 auto;
		margin-bottom: 30px;
		position: relative;
	}


/* 4. NAVIGATION */

	nav {
		position: fixed;
		top: 0;
		left: -50px;
		width: 50px;
		height: 100%;
		z-index: 5;
		background: rgba(0, 0, 0, 0.5);
		padding-top: 90px;
		text-align: left;
		overflow: hidden;
	}

	nav a {
		display: block;
		padding: 15px 0;
		background-color: transparent;
		white-space: nowrap;
	}

	nav a:hover {
		background-color: #1db2ff;
		color: #fff;
	}

	nav a.active {
		color: #1db2ff;
	}

	nav a.active:hover {
		color: #fff;
	}

	nav i {
		display: inline-block;
		width: 50px;
		text-align: center;
	}

	nav span {
		display: inline;
  	font-family: 'signika';
  	font-weight: 400;
	}


/* 5. HEADER */

	header {
		width: 100%;
		min-height: 100%;
		margin-bottom: -100px;
		position: relative;
		top: 100%;
		padding-left: 0px;
	}
	
	header > .container {
		height: 100%;
		padding: 70px 20px 150px;
		position: relative;
		z-index: 1;
	}
	
	@media (max-width: 767px) {
	header > .container {
		height: 100%;
		padding: 20px 20px 150px;
		position: relative;
		z-index: 1;
	}
	}

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

	.lj-background {
		height: 100vh;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -99;
	}
	
	.lj-overlay {
		width: 100%;
		height: 100%;		
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.lj-overlay-image {
		background-image: url('../img/dots.png');
		background-repeat: repeat;
	}
	
	.lj-overlay-color {
    background-color: rgba(0,0,0,0);
	}
	
	.lj-overlay-gradient {
		background: -moz-linear-gradient(215deg,  rgba(0,204,255,0.8) 0%, rgba(196,255,0,0.8) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(0,204,255,0.8)), color-stop(100%,rgba(196,255,0,0.8))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(215deg,  rgba(0,204,255,0.8) 0%,rgba(196,255,0,0.8) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(215deg,  rgba(0,204,255,0.8) 0%,rgba(196,255,0,0.8) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(215deg,  rgba(0,204,255,0.8) 0%,rgba(196,255,0,0.8) 100%); /* IE10+ */
		background: linear-gradient(215deg,  rgba(0,204,255,0.8) 0%,rgba(196,255,0,0.8) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ccff', endColorstr='#c4ff00',GradientType=1 ) progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/1x1.png'); /* IE6-9 fallback on horizontal gradient */
		pointer-events:none;
	}


/* 6. LOGO */

	.lj-logo {
		text-align: left;
		z-index: 3;
	}
	
	.lj-logo img {
		width: 350px;
		height: inherit;
		display: inline-block;
		margin-bottom: 0px;
	  	vertical-align: bottom;
	}
	
	
	.lj-logo a:hover {
		opacity: 0.8;
				}
	
	@media (max-width: 740px) {
	.lj-logo img {
		width: 150px;
		height: inherit;
		display: inline-block;
		margin-bottom: 50px;
	  vertical-align: bottom;
	}
	}


/* 7. SOCIALS */

	.lj-socials {
		text-align: right;
		margin-bottom: 0px;
		z-index: 3;
	}

	.lj-socials ul {
		margin-top: 0;
		margin-bottom: 0;
		padding-left: 0;
		list-style-type: none;
	}

	.lj-socials li {
		display: inline-block;
		margin-right: 5px;
	}

	.lj-socials li:last-child {
		margin-right: 0;
	}

	.lj-socials li a {
		width: 40px;
		height: 40px;
		display: inline-block;
		line-height: 40px;
		text-align: center;
		background-color: transparent;
		font-size: 1.25em;
	}

	.lj-socials li a:hover {
		background-color: #1db2ff;
		color: #fff;
	}

	.lj-socials li {
		overflow: hidden;
	}


/* 8. CONTENT */

	.lj-changer {
		margin-top: 40px;
	}
	
	@media (max-width: 740px) {
	.lj-changer {
		margin-top: 20px;
	}
	}

	.lj-changer > div {
		display: none;
		position: relative;
	}

	.lj-changer > div.active {
		display: block;
	}


/* 9. HOME */

	#home .lj-title {
    z-index: 2;
	font-family: 'signika2';	
  }
    
  #home .lj-title > div {
  	font-family: 'signika2';
  	font-weight: 400;
  	font-size: 3.4em;
    word-wrap: break-word;
    line-height: 1em;
    display: inline-block;
	letter-spacing: -0.04em;   
  }

  #home .lj-title .rotate {
   font-family: 'signika2';
   display: inline-block;
  }
  
  #home .lj-title span {
    color: #fff;
  }

  #home .lj-title-paragraph {
	font-family: 'signika3';   
  	max-width: 600px;
	letter-spacing: 0px;
	font-weight: 300;
  }

  #home .lj-title-paragraph p {
	font-family: 'signika3';   
  	font-size: 1.4em;
  	font-style: normal;
  }


/* 10. FEATURES */

	#features ul {
		margin-top: 30px;
		border-left: 2px solid #1db2ff;
		list-style-type: none;
	}

	#features li {
		padding: 10px 0;
		position: relative;
		font-size: 1.4em;
		font-style: normal;
		font-weight: 400;
	}

	#features li:first-child {
		padding-top: 0;
	}

	#features li:last-child {
		padding-bottom: 0;
	}

	#features li p {
		font-size: 0.7em;
		font-weight: 300;
		font-style: normal;
		margin: 20px 0 0 20px;
	}

	#features i {
		margin: 30px 15px 0 0;
		opacity: 0.2;
	}


/* 11. GALLERY */

	#gallery .grid {
		margin-top: 40px;
	}

	#gallery .grid-item {
		width: 356px;
		margin-bottom: 30px;
		position: relative;
	}

	#gallery img {
		max-width: 100%;
		border: 4px solid #fff;
		-webkit-box-shadow: 0px 0px 80px 5px rgba(0,0,0,1);
		-moz-box-shadow: 0px 0px 80px 5px rgba(0,0,0,1);
		box-shadow: 0px 0px 80px 5px rgba(0,0,0,1);
	}

	#gallery a::before {
		display: block;
		content: "";
		position: absolute;
		background-color: #fff;
		opacity: 0;
		width: 100%;
		height: 100%;
		transition: opacity 0.25s ease-in-out 0s;
		-moz-transition: opacity 0.25s ease-in-out 0s;
		-webkit-transition: opacity 0.25s ease-in-out 0s;
		-o-transition: opacity 0.25s ease-in-out 0s;
		-ms-transition: opacity 0.25s ease-in-out 0s;
	}

	#gallery a:hover::before {
		opacity: 0.1;
	}


/* 12. TEAM */

	#team img {
		display: block;
		margin-top: 30px;
		width: 100%;
		border: 4px solid #153f82;
		-webkit-box-shadow: 0px 0px 80px 5px rgba(0,0,0,1);
		-moz-box-shadow: 0px 0px 80px 5px rgba(0,0,0,1);
		box-shadow: 0px 0px 80px 5px rgba(0,0,0,1);
	}

	#team figure {
		display: inline-block;
		margin-right: 30px;
	}

	#team figcaption {
  	font-family: 'signika';
  	font-weight: 700;
  	font-size: 1.4em;
  	margin-top: 10px;
  	position: relative;
	}

	#team figcaption span {
		display: block;
		font-style: normal;
		font-family: 'Roboto', sans-serif;
		font-weight: 300;
		font-size: 0.7em;
		color: #1db2ff;
	}

	#team .team-socials {
		position: absolute;
		right: 0;
		top: 0;
	}

	#team .team-socials a {
		margin-left: 10px;
		opacity: 0.2;
	}

	#team .team-socials a:hover {
		opacity: 1;
		color: #fff;
	}


/* 13. CONTACT */

	#contact form {
		margin-top: 30px;
	}

	#contact input,
	#contact textarea {
		font-weight: 300;
		line-height: 1.4em;
		display: block;
		background-color: rgba(25, 25, 25, 0.3);
		border: 0;
		outline: 0;
		border-left: 2px solid #1db2ff;
		width: 100%;
		padding: 10px;
		-webkit-box-shadow: 0px 0px 80px 5px rgba(0,0,0,0.6);
		-moz-box-shadow: 0px 0px 80px 5px rgba(0,0,0,0.6);
		box-shadow: 0px 0px 80px 5px rgba(0,0,0,0.6);
	}

	#contact textarea {
		min-height: 200px;
		resize: none;
	}

	#contact button {
		margin-top: 30px;
		background: transparent;
		padding: 0;
		border: 0;
		outline: 0;
  	font-family: 'signika';
  	font-weight: 700;
  	font-size: 1.4em;
  	font-style: normal;
		transition: color 0.25s ease-in-out 0s;
		-moz-transition: color 0.25s ease-in-out 0s;
		-webkit-transition: color 0.25s ease-in-out 0s;
		-o-transition: color 0.25s ease-in-out 0s;
		-ms-transition: color 0.25s ease-in-out 0s;
	}

	#contact button:hover {
		color: #1db2ff;
	}

	#contact label {
		display: inline-block;
		height: 40px;
		position: relative;
		padding: 10px;
		bottom: -39px;
		font-weight: 300;
		color: rgba(255, 255, 255, 1);
		cursor: text;
		transition: all 0.25s ease-in-out 0s;
		-moz-transition: all 0.25s ease-in-out 0s;
		-webkit-transition: all 0.25s ease-in-out 0s;
		-o-transition: all 0.25s ease-in-out 0s;
		-ms-transition: all 0.25s ease-in-out 0s;
	}

	#contact label.active {
		color: rgba(255, 255, 255, 0.5);
		font-size: 0.8em;
		bottom: 0;
		cursor: default;
	}

	#contact label span {
		padding-left: 20px;
	}

	#contact label i.fa-check {
		color: #2ecc71;
	}

	#contact label i.fa-close {
		color: #ed5566;
	}

	#contact span.contact-message {
		display: none;
		position: relative;
		left: 30px;
		opacity: 0;
		margin-top: 10px;
		color: #2ecc71;
		font-size: 0.8em;
		font-weight: 300;
	}
	    
/* 14. FOOTER */

	footer {
		font-family: 'signika3';
		width: 100%;
		padding-left: 0px;
		position: relative;
		z-index: 1;
		letter-spacing: 0px;
	}

	footer > .container {
		font-family: 'signika3';
		padding-top: 30px;
		padding-bottom: 30px;
	}

  .lj-progress {
  	height: 40px;
  	padding-top: 19px;
  }

  .lj-progress .lj-progress-bar {
  	display: block;
  	width: 100%;
  	height: 5px;
  	background: rgba(255, 255, 255, 0.15);
  }

  .lj-progress .filler {
  	background: #1db2ff;
  	display: block;
  	height: 5px;
  }

  .lj-progress span {
  	font-weight: 300;
  	font-size: 1em;
  	top: -10px;
  	position: absolute;
  	display: inline-block;
  }

  .lj-progress span em {
  	font-size: 1.4em;
  	font-weight: 300;
  	padding-left: 10px;
  }

	.lj-footer-copyrights p2 {
		font-family: 'signika3';
		line-height: 40px;
		margin: 0;
		text-align: left;
		font-size: 0.8em;
		font-weight: 300;
		font-style: normal;
	}


/* 15. BREAKPOINTS */

	@media (max-width: 1199px) {
		#gallery .grid-item {
			width: 290px;
		}
	}

	@media (max-width: 991px) {
		#gallery .grid-item {
			width: 340px;
		}
	}

	@media (max-width: 767px) {

		p {
			font-size: 1.2em;
		}

		nav {
			padding-top: 40px;
		}

		header {
			margin-bottom: -140px;
		}

		header > .container {
			padding-top: 50px;
		}

		.lj-logo {
			text-align: left;
		}

		.lj-socials {
			text-align: left;
		}

		#home .lj-title > div {
			font-size: 3em;
			margin-top: 0;
		}

		#home .lj-title-paragraph p {
			font-size: 1.2em
		}

		#features li {
			font-size: 1.2em;
		}

		#features li p {
			font-size: 0.8em;
		}

		#gallery .grid-item {
			width: 100%;
		}

		#team figure {
			margin-right: 0;
			margin-bottom: 30px;
		}

		.lj-footer-copyrights p {
			text-align: center;
		}

	}