/*
	Author: Lumberjacks
	Template: Duality (Coming Soon)
	Version: 1.0
	URL: http://themeforest.net/user/Lumberjacks/
*/



/* TABLE OF CONTENTS

	1. Import section
	2. Basic styles
	3. Preloader
	4. Navigation
	5. Header
	6. Logo
	7. Content
	8. Home
	9. Features
	10. Gallery
	11. Team
	12. Contact
	13. Footer
	14. Breakpoints

*/



/* 1. IMPORT SECTION */

	@import url("bootstrap.css");
	@import url("https://fonts.googleapis.com/css?family=Roboto:700,400,300&subset=latin,cyrillic-ext");
	@import url("https://fonts.googleapis.com/css?family=Roboto+Slab:400,700");
	/*@import url("font-awesome.min.css");*/
	@import url("https://use.fontawesome.com/releases/v5.6.3/css/all.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: 'Roboto', sans-serif;
		background-color: transparent;
		color: #fff;
		font-weight: 400;
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizeLegibility;
		overflow-x: 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: #fff;
	}

	a:hover {
		color: #3498db;
	}

	::-moz-selection {
    color: #3498db;
    background: transparent;
	}

	::selection {
    color: #3498db; 
    background: transparent;
	}
  
	@-webkit-keyframes hue {
	  from {
	    -webkit-filter: hue-rotate(0deg);
	  }

	  to {
	    -webkit-filter: hue-rotate(-360deg);
	  }
	}
  
	span.ca-shadow {
  	color: transparent;
  	position: absolute;
  }



/* 3. PRELOADER */

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

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


/* 4. NAVIGATION */

	nav {
		position: absolute;
		top: 0;
		right: 0;
		text-align: right;
		z-index: 1;
	}

	.lj-nav-mask {
		display: none;
		opacity: 0;
		width: 100%;
		height: 100%;		
		position: fixed;
		top: 0;
		left: 0;
    background-color: rgba(0,0,0,0);
    cursor: pointer;
    z-index: 3;
	}

	nav ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}

	nav ul li {
		margin-bottom: 10px;
	}

	nav > .pages a {
		padding-right: 0;
		background-color: transparent;
		white-space: nowrap;
		position: relative;
		font-size: 1.5em;
		line-height: 1em;
		opacity: 1;
	}

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

	nav .pages span {
		display: inline;
  	font-family: 'Roboto Slab', sans-serif;
  	font-weight: 700;
  	text-transform: uppercase;
		text-shadow: 2px 2px 0px rgba(0, 255, 255, 0.4),
								-2px -2px 0px rgba(255, 0, 0, 0.4);
		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;
	}

	nav > .pages a:hover span {
		color: #fff;
		padding-right: 10px;
		text-shadow: 4px 4px 0px rgba(0, 255, 255, 0.4),
								-4px -4px 0px rgba(255, 0, 0, 0.4);
	}

	.slider-nav {
		display: inline;
  	font-family: 'Roboto Slab', sans-serif;
  	font-weight: 700;
  	text-transform: uppercase;
		text-shadow: 2px 2px 0px rgba(0, 255, 255, 0.4),
					-2px -2px 0px rgba(255, 0, 0, 0.4),
					-1px 0 black,
					0 1px black,
					1px 0 black,
					0 -1px black;
		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;
	}

	.slider-nav:hover{
		color: #262626;
		padding-right: 10px;
		text-shadow: 4px 4px 0px rgba(0, 255, 255, 0.4),
					-4px -4px 0px rgba(255, 0, 0, 0.4);
	}

	nav.sub .pages > a {
		opacity: 0;
	}

	nav.sub .pages a.active span::before {
		padding-right: 50px;
	}


/* 5. HEADER */

	header {
		width: 100%;
		min-height: 100%;
		margin-bottom: -100px;
		position: relative;
		z-index: auto !important;
		overflow: hidden;
	}
	
	header > .header-holder {
		height: 100%;
		width: 100%;
		padding: 50px 100px 100px;
		position: relative;
	}

	header > .subpage {
		width: 50%;
    display: block;
    background: #fff;
    height: 100%;
    position: absolute;
    top: 0;
    right: -50%;
    color: #262626;
    padding: 100px;
    z-index: 4;
    overflow: auto;
	}
	
	.lj-overlay {
		width: 100%;
		height: 100%;		
		position: fixed;
		top: 0;
		left: 0;
		-webkit-overflow-scrolling: touch;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}
	
	.lj-overlay-color {
    background-color: rgba(0,0,0,0.3);
	}


/* 6. LOGO */

	.lj-logo {
		text-align: left;
	}
	
	.lj-logo img {
		width: 300px;
		max-width: 100%;
		height: auto;
		display: inline-block;
		margin-bottom: 50px;
	  vertical-align: bottom;
	}


/* 7. CONTENT */

	h2 {
  	font-family: 'Roboto Slab', sans-serif;
  	font-weight: 700;
  	text-transform: uppercase;
  	font-size: 1.4em;
  	display: inline;
  	border-bottom: 4px solid #262626;
  	padding-bottom: 10px;
	}

  .animated-text {
  	position: relative;
    color: #3498db;
		text-shadow: none;
    background-image: -webkit-linear-gradient(30deg,#3498db,#91FE3A);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 30s infinite linear;
  }

	p {
		margin-top: 40px;
		font-size: 1.4em;
		font-weight: 400;
		font-style: italic;
		line-height: 1.5em;
	}

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

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

	.subpage-nav {
		display: block;
		position: absolute;
		width: 30px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		cursor: pointer;
	}

	.subpage-nav.close {
		left: -50px;
		top: -70px;
	}

	.subpage-nav.close a,
	.subpage-nav.left a,
	.subpage-nav.right a {
		display: block;
		height: 100%;
		width: 100%;
		transition: all 0.5s;
		-moz-transition: all 0.5s;
		-webkit-transition: all 0.5s;
		-o-transition: color all 0.5s;
		-ms-transition: color all 0.5s;
	}

	.subpage-nav.close a:hover {
		transform: rotate(270deg);
	}

	.subpage-nav a::before,
	.subpage-nav a::after {
		position: absolute;
		top: 15px;
		content: '';
		display: block;
		width: 100%;
		height: 1px;
		background-color: #262626;
		transition: all 0.5s;
		-moz-transition: all 0.5s;
		-webkit-transition: all 0.5s;
		-o-transition: color all 0.5s;
		-ms-transition: color all 0.5s;
	}

	.subpage-nav a:hover::before,
	.subpage-nav a:hover::after {
		background-color: #3498db;
	}

	.subpage-nav a::before {
		transform: rotate(45deg);
	}

	.subpage-nav a::after {
		transform: rotate(-45deg);
	}

	.subpage-nav.left {
		left: -50px;
	}

	.subpage-nav.left a::before {
		width: 50%;
		position: absolute;
		left: 7px;
		margin-top: 5px;
	}

	.subpage-nav.left a::after {
		width: 50%;
		position: absolute;
		left: 7px;
		margin-top: -5px;
	}

	.subpage-nav.right {
		right: -50px;
	}

	.subpage-nav.right a::before {
		width: 50%;
		position: absolute;
		left: 7px;
		margin-top: -5px;
	}

	.subpage-nav.right a::after {
		width: 50%;
		position: absolute;
		left: 7px;
		margin-top: 5px;
	}

	.subpage-nav.left a:hover::before,
	.subpage-nav.left a:hover::after {
		left: 0;
	}

	.subpage-nav.right a:hover::before,
	.subpage-nav.right a:hover::after {
		left: 14px;
	}

	.portfolio-item{
		padding-top: 40px;
	}

	.portfolio-item p{
		margin:0;
	}

	.portfolio-item a{
		font-family: 'Roboto Slab', sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		  text-shadow: 2px 2px 0px rgba(0, 255, 255, 0.4),
					  -2px -2px 0px rgba(255, 0, 0, 0.4),
					  -1px 0 black,
					  0 1px black,
					  1px 0 black,
					  0 -1px black;
		  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;
	}

	.portfolio-item a:hover{
		color: #262626;
		padding-right: 10px;
		text-shadow: 4px 4px 0px rgba(0, 255, 255, 0.4),
					-4px -4px 0px rgba(255, 0, 0, 0.4);
	}

	.portfolio-item img{
		width: 100%;
	}


/* 8. HOME */
    
  #home .lj-title > h1 {
  	font-family: 'Roboto Slab', sans-serif;
  	font-weight: 700;
  	font-size: 7em;
    word-wrap: break-word;
    line-height: 0.9em;
    display: block;
    margin: 0;
		text-shadow: 2px 2px 0px rgba(0, 255, 255, 0.4),
								-2px -2px 0px rgba(255, 0, 0, 0.4);
  }
  #home .lj-countdown p {
  	display: inline-block;
  	font-size: 1.5em;
  	font-style: normal;
  	font-weight: 700;
  	margin: 0;
  	margin-top: 15px;
  	padding-top: 10px;
  	border-top: 4px solid #fff;
  	text-transform: uppercase;
		text-shadow: 2px 2px 0px rgba(0, 255, 255, 0.4),
								-2px -2px 0px rgba(255, 0, 0, 0.4);
  }

/* 9. FEATURES */

	#features ul {
		margin-top: 30px;
		border-left: 2px solid #3498db;
		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: italic;
		margin: 20px 0 0 20px;
	}

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

/* 10. GALLERY */

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

	#gallery .grid-sizer,
	#gallery .grid-item {
		width: 48%;
		margin-bottom: 10px;
		position: relative;
	}

	#gallery .gutter-sizer {
		width: 4%;
	}

	#gallery img {
		max-width: 100%;
		padding: 4px;
		border: 1px solid #f2f2f2;
	}

	#gallery .grid > 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 .grid > a:hover::before {
		opacity: 0.2;
	}


/* 11. TEAM */

	#team img {
		display: block;
		margin-top: 30px;
		width: 100%;
		padding: 4px;
		border: 1px solid #f2f2f2;
	}

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

	#team figcaption {
  	font-family: 'Roboto Slab', sans-serif;
  	font-weight: 700;
  	font-size: 1.4em;
  	margin-top: 10px;
  	position: relative;
	}

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

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

	#team .team-socials a {
		margin-right: 5px;
		color: #262626;
		opacity: 0.2;
	}

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

/* 12. CONTACT */

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

	#contact input,
	#contact textarea {
		font-family: 'Roboto Slab', sans-serif;
		font-weight: 300;
		line-height: 1.4em;
		display: block;
		background-color: rgba(25, 25, 25, 0.02);
		border: 0;
		outline: 0;
		border-left: 2px solid #3498db;
		width: 100%;
		padding: 10px;
	}

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

	#contact button {
		margin-top: 30px;
		background: transparent;
		padding: 0;
		border: 0;
		outline: 0;
  	font-family: 'Roboto Slab', sans-serif;
  	font-weight: 700;
  	font-size: 1.4em;
  	font-style: italic;
		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: #3498db;
	}

	#contact label {
  	font-family: 'Roboto Slab', sans-serif;
		display: inline-block;
		height: 40px;
		position: relative;
		padding: 10px;
		bottom: -39px;
		font-weight: 300;
		color: rgba(0, 0, 0, 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(0, 0, 0, 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: #ed5565;
	}

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

	#contact .contact-socials a {
		margin-right: 5px;
		color: #262626;
		opacity: 0.2;
	}

	#contact .contact-socials a:hover {
		opacity: 1;
	}
	    
/* 13. FOOTER */

	footer {
		width: 100%;
		position: relative;
		z-index: 0;
	}

	footer > .footer-holder {
		padding: 30px 100px;
	}

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

	.lj-socials ul {
		height: 40px;
		position: relative;
		left: -15px;
		margin: 0;
		padding: 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;
		text-shadow: 2px 2px 0px rgba(0, 255, 255, 0.4),
								-2px -2px 0px rgba(255, 0, 0, 0.4);
		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;
	}

	.lj-socials li a:hover {
		color: #fff;
		text-shadow: 5px 5px 0px rgba(0, 255, 255, 0.4),
								-5px -5px 0px rgba(255, 0, 0, 0.4);
	}

	.lj-socials li {
		overflow: hidden;
	}

	.lj-footer-copyrights p {
		line-height: 40px;
		margin: 0;
		text-align: right;
		font-size: 0.9em;
		font-weight: 300;
		font-style: normal;
		text-shadow: 1px 1px 0px rgba(0, 255, 255, 0.4),
								-1px 1px 0px rgba(255, 0, 0, 0.4);
		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;
	}

	.lj-footer-copyrights a {
		text-shadow: 2px 2px 0px rgba(0, 255, 255, 0.4),
								-2px 2px 0px rgba(255, 0, 0, 0.4);
		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;
	}

	.lj-footer-copyrights a:hover {
		color: #fff;
		text-shadow: 3px 3px 0px rgba(0, 255, 255, 0.4),
								-3px -3px 0px rgba(255, 0, 0, 0.4);
	}


/* 14. BREAKPOINTS */

	@media (max-width: 1199px) {

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

	@media (max-width: 991px) {

		header > .header-holder {
			padding: 50px 50px 100px;
		}

		header > .subpage {
			width: 100%;
	    right: -100%;
	    padding: 60px 60px;
		}

		.subpage-nav.close {
			left: -30px;
			top: -45px;
		}

		.subpage-nav.left {
			left: -30px;
		}

		.subpage-nav.right {
			right: -30px;
		}

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

		footer > .footer-holder {
			padding: 30px 50px;
		}
	}

	@media (max-width: 767px) {

		p {
			font-size: 1.2em;
		}

		.lj-menu-button {
			left: -60px;
		}

		header {
			margin-bottom: -140px;
		}

		header > .header-holder {
			height: 100%;
			padding: 50px 20px 100px;
		}

		#home .lj-title > h1 {
			font-size: 5em;
			margin-top: 50px;
		}

		#home .lj-countdown p {
			font-size: 1.2em;
			margin-bottom: 100px;
		}

		#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;
		}

		footer > .footer-holder {
			padding: 30px 20px;
		}

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

		.lj-socials ul {
			left: 0;
		}

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

	}