/*
	CSS file for 
*/

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600&display=swap');


/*	General	
------------------------------*/
	
	* {
		padding: 0;
		margin: 0;
		outline: none;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	
	.clearfix:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
	}
	
	* html .clearfix,
	*:first-child+html .clearfix { 
		zoom: 1;
	}
	
	body {
		padding-top: 131px;
		font-family: 'Nunito', sans-serif;
		background: #000;
	}
	
	img {
		max-width: 100%;
		height: auto;
	}
	
	a img {
		border: 0;
	}		
	
	.container {
		width: 94%;
		max-width: 1140px;
		margin: 0 auto;
	}	
	
	.login .container { 
		max-width: 1440px; 	
		overflow: hidden;
	}
	
	input,
	button {
		border-radius: 0px;
		-webkit-appearance: none;
	}
	
	
	
	
/*	Header
-------------------------------------------*/
	
	header {
		top: 0px;
		left: 0px;
		right: 0px;
		z-index: 9000;	
		position: fixed;
		background: rgba(0, 0, 0, 0.8);
	}
	
		header .container {
			padding: 25px 0;
			border-bottom: 1px solid rgba(85, 85, 85, 0.4);
		}
		
		header .logo {
			z-index: 9001;
			float: left;
			position: relative;
		}
		
			header .logo img {
				display: block;
			}
			
		header .bars {
			z-index: 9001;
			float: right;
			cursor: pointer;		
			position: relative;
			margin-top: 26px;
			margin-left: 45px;
		    padding: 2px 2px 2px 2px;
		    -webkit-transition: all .4s;
	   				transition: all .4s;	
		}
		
			header .bars:before {
				content: "CLOSE";
				top: 7px;
				right: 46px;
				color: #2E2E2E;
				font-size: 14px;
				line-height: 15px;
				position: absolute;
				opacity: 0;
				visibility: hidden;
				transition: all ease 0.4s;
			}

			header .bars span {
				position: relative;
				display: block;
				width: 38px;
    			height: 2px;
			    margin: 10px 0;
			    background: #fff;
			    opacity: 1;
			    -webkit-transition: all .4s;
		   				transition: all .4s;
			}
				
				header .bars span:after,
				header .bars span:before {				    
    				content: '';
    				display: block;
    				position: absolute;
				    z-index: -1;
				    width: 38px;
				    height: 2px;
				    background: #fff;
					-webkit-transition: all .4s;
		   					transition: all .4s;
				}
					
					header .bars span:before {
					    top: -10px;
					    left: 0px;
					}
					
					header .bars span:after {
					    top: 10px;
					    right: 0px;
					}
					
		header nav {
			top: 0px;
			left: 0px;
			right: 0px;
			bottom: 0px;			
			position: fixed;
			background: rgba(0, 0, 0, 0.8);
			opacity: 0;
			transition: opacity ease 0.4s, transform ease 0s 0.4s;
			transform: translate3d(-100%, 0, 0);
		}
		
			header nav ul {
				top: 50%;
				left: 0px;
				right: 0px;
				position: absolute;
				text-align: center;
				-webkit-transform: translateY(-50%);
						transform: translateY(-50%);
			}
			
				header nav ul li + li {
					padding-top: 35px;
				}
				
					header nav ul li a {
						color: #ffffff;
						font-size: 32px;
						font-weight: 600;
						line-height: 40px;
						text-decoration: none;
					}
					
					header nav ul li a:hover,
					header nav ul li.current-menu-item a {
						color: #f8c9df;
					}
		
		.opened-nav .bars span {
			background: transparent !important;
		}
													
			.opened-nav .bars span:after {					
			    top: 0;
				-webkit-transform: rotate(45deg);
				   -moz-transform: rotate(45deg);
				   		transform: rotate(45deg);
			}
			
			.opened-nav .bars span:before {
			    top: 0;
			    -webkit-transform: rotate(-45deg);
				   -moz-transform: rotate(-45deg);
				   		transform: rotate(-45deg);
			}
			
		.opened-nav header nav {
			opacity: 1;
			transition: opacity ease 0.4s, transform ease 0s 0s;
			transform: translate3d(0, 0, 0);
		}
					


/*	Footer
-------------------------------------------*/
	
	footer .container {
		color: #555555;
		font-size: 11px;
		line-height: 13px;
		text-align: center;
		border-top: 1px solid rgba(85, 85, 85, 0.4);
		padding: 30px 0;
	}



/*	Page: Login
-------------------------------------------*/

	.login {
	}
	
		.login .swiper-container .swiper-slide {
			height: 800px;
			max-height: calc(100vh - 205px);
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center center;
		}
		
		.login form {
			top: 50%;
			left: 50%;
			width: calc(100% - 40px);
			max-width: 376px;
			position: absolute;
			background: rgba(0, 0, 0, 0.4);
			z-index: 1;
			box-sizing: border-box;
			padding: 30px;
			-webkit-transform: translate(-50%, -50%);
					transform: translate(-50%, -50%);
		}
		
			.login form input {
				width: 100%;
				font-family: 'Nunito';
				font-size: 16px;
				line-height: 20px;
				padding: 17px 50px 17px 14px;
				box-sizing: border-box;
				border: 0px;
			}
			
			.login form button {
				top: 39px;
				right: 39px;
				width: 38px;
				height: 38px;
				cursor: pointer;
				color: #fff;
				font-family: 'Nunito';
				font-size: 16px;
				font-weight: 600;
				background: #898989;
				border: 0px;
				position: absolute;
			}



/*	Page: CONTACT
-------------------------------------------*/

	.page-contact {
		min-height: calc(100vh - 205px);
		padding: 75px 0 70px 0;
		box-sizing: border-box;
	}
	
		.page-contact .gform_wrapper {
			width: 100%;
			max-width: 550px;
			margin: 0 auto;
		}
		
		.page-contact .gfield {
			
		}
		
			.page-contact .gfield + .gfield {
				margin-top: 25px;
			}
			
			.page-contact .gfield .gfield_label {
				display: none;
			}
		
			.page-contact .gfield input,
			.page-contact .gfield textarea {
				display: block;
				width: 100%;
				color: #ffffff;
				font-family: 'Nunito';
				font-size: 16px;
				font-weight: 600;
				line-height: 18px;
				text-transform: uppercase;
				background: transparent;
				border: 1px solid #222222;
				border-bottom-width: 3px;
				padding: 15px 14px;
				box-sizing: border-box;
				transition: all ease 0.4s;
			}
			
			.page-contact .gfield textarea {
				height: 118px;
				resize: none;
			}
			
			.page-contact .gfield input:focus,
			.page-contact .gfield textarea:focus {
				border-bottom-color: #4a4a4a;	
			}
			
			.page-contact .gform_footer {
				padding-top: 30px;
			}
			
				.page-contact .gform_button {
					display: block;
					margin: 0 auto;
					width: 160px;
					color: #f8c1d9;
					font-family: 'Nunito';
					font-size: 16px;
 					font-weight:  600;
					line-height: 18px;
					background: transparent;
					border: 1px solid #222;
					padding: 10px;
					cursor: pointer;
					transition: all ease 0.4s;
				}
				
					.page-contact .gform_button:hover {
						color: #000;
						background: #ffffff;
					}						
		
		.gform_ajax_spinner,
		.gform_validation_container,
		.validation_error {
			display: none !important;
		}
		
		.validation_message {
			color: #ffffff;
			font-size: 12px;
			font-weight: 500;
			line-height: 14px;		
			padding: 10px 10px 8px 10px;
			background: #BE1F37;
		}
	
	.gform_confirmation_wrapper {
		color: #ffffff;
		font-size: 16px;
		line-height: 20px;
		text-align: center;	
	}
	
		.gform_confirmation_wrapper h3 {
			font-size: 30px;
			line-height: 40px;
			font-weight: 600;
			padding-bottom: 10px;
		}



/*	Page: WORK
-------------------------------------------*/

	.page-work {
				
	}
	
	.page-work .categories {
		padding: 35px 0px;
	}
	
		.page-work .categories ul {
			list-style: none;
			display: -ms-flexbox;
		    display: -webkit-flex;
		    display: flex;
		    -webkit-flex-direction: row;
		    -ms-flex-direction: row;
		    flex-direction: row;
		    -webkit-flex-wrap: nowrap;
		    -ms-flex-wrap: nowrap;
		    flex-wrap: nowrap;
		    -webkit-justify-content: space-between;
		    -ms-flex-pack: justify;
		    justify-content: space-between;
		    -webkit-align-content: stretch;
		    -ms-flex-line-pack: stretch;
		    align-content: stretch;
		    -webkit-align-items: flex-start;
		    -ms-flex-align: start;
		    align-items: flex-start;
		}
		
			.page-work .categories ul li {
				padding-bottom: 14px;
			}
	
				.page-work .categories a {
					color: #707070;
					font-size: 18px;
					line-height: 20px;
					letter-spacing: -0.04;
					text-decoration: none;
					transition: all ease 0.4s;
				}
				
				.page-work .categories a:hover {
					color: #ffffff;
				}
				
			.page-work .categories ul li.active {
				background: url('../img/line.png') no-repeat bottom center / 116px 2px;
			}
			
				.page-work .categories ul li.active a {
					color: #ffffff;
				}
		
	.page-work .project {
		padding-bottom: 65px;
	}
	
		.page-work .project .main {
			display: block;
			position: relative;
		}
		
			.page-work .project .main.video:before {
				content: "";
				top: 50%;
				left: 50%;
				width: 88px;
				height: 88px;
				margin-top: -44px;
				margin-left: -44px;
				position: absolute;
				background: url('../img/icon-play.svg') no-repeat top left / cover;				
			}
		
			.page-work .project .main img {
				display: block;
				width: 100%;
				height: auto;
			}
		
		.page-work .project .link {
			text-align: center;
			margin-top: 35px;
		}
			
			.page-work .project .link a {
				display: inline-block;
				color: #f8c1d9;
				font-size: 14px;
				font-weight: 300;
				line-height: 16px;
				text-decoration: none;
				border: 1px solid #222222;
				padding: 5px 12px;
				transition: all ease 0.3s;
			}
			
				.page-work .project .link a:hover {
					color: #000;
					background: #ffffff;
					border-color: #ffffff;
				}
			
		.page-work .project .text {
			color: #ffffff;
			font-size: 14px;
			line-height: 30px;
			text-align: center;
			margin-top: 45px;
		}
		
		.page-work .project .gallery {
			font-size: 0px;
			text-align: center;
			margin-top: 55px;
		}
		
			.page-work .project .gallery a {
				display: inline-block;
				width: calc(20% - 20px);
				position: relative;			
			}
			
				.page-work .project .gallery a + a {
					margin-left: 25px;
				}
			
				.page-work .project .gallery a div {
					padding-bottom: 70%;
					background-color: #333;
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center center;
				}
				
				.page-work .project .gallery a.video:before {
					content: "";
					top: 50%;
					left: 50%;
					width: 60px;
					height: 60px;
					margin-top: -30px;
					margin-left: -30px;
					position: absolute;
					background: url('../img/icon-play.svg') no-repeat top left / cover;				
				}
				
		
	.page-work .project + .project {
		padding-top: 70px;
		border-top: 1px solid #222222;
	}



/*	Page: ABOUT
-------------------------------------------*/	

	.page-about {
		
	}
	
		.page-about .images { 
			width: 100%;
			max-width: 550px;
			margin: 0 auto;
		}
		
			.page-about .images .main {
				width: 100%;
				margin-top: 75px;
				padding-bottom: 100%;
				background-color: #333;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center center;
			}
			
			.page-about .images .gallery {
				font-size: 0px;
				text-align: center;
				margin-top: 39px;
			}
			
				.page-about .images .gallery a {
					display: inline-block;
					width: calc(33.3333% - 26px);
				}
				
					.page-about .images .gallery a + a {
						margin-left: 39px;
					}
					
						.page-about .images .gallery a div {
							padding-bottom: 100%;
							background-color: #333;
							background-size: cover;
							background-repeat: no-repeat;
							background-position: center center;
						}
		
		.page-about .text {
			max-width: 920px;
			padding: 80px 0 65px 0;
			margin: 0 auto;
			color: #ffffff;
			font-size: 18px;
			line-height: 30px;
			text-align: center;
		}	
		
			.page-about .text p {
				padding-bottom: 25px;
			}
			
			.page-about .text .extended {
				display: none;
			}
			
				.page-about .text .extended.show {
					display: block;
				}
			
			.page-about .text .more {
				display: inline-block;
				color: #f8c1d9;
				font-size: 16px;
				font-weight: 600;
				line-height: 18px;
				text-decoration: none;
				border: 1px solid #222222;
				padding: 7px 30px;
				transition: all ease 0.3s;
				cursor: pointer;
			}
			
				.page-about .text .more:before {
					content: "READ MORE";
				}
			
				.page-about .text .extended.show + .more:before {
					content: "SHOW LESS";
				}
				
				.page-about .text .more:hover {
					color: #000;
					background: #ffffff;
					border-color: #ffffff;
				}						

	.separator {
		margin-top: 70px;
		margin-bottom: 70px;
		clear: both;
		border-top: 1px solid #222222;
		width:100%;
	}

/*	Responsive
-------------------------------------------*/	

@media (max-width: 1023px)
{
	.page-work .project .gallery { margin-bottom: -30px; }
	.page-work .project .gallery a { width: calc(33.333% - 20px); margin-bottom: 30px; }
	.page-work .project .gallery a + a { margin-left: 30px; }
	.page-work .project .gallery a:nth-child(4) { margin-left: 0px; }
	
	.page-work .categories { overflow-x: scroll; }
	.page-work .categories ul { white-space: nowrap; display: block; }
	.page-work .categories ul li { display: inline-block; }
	.page-work .categories ul li + li { margin-left: 25px; }
}

	
@media (max-width: 767px)
{
	body { padding-top: 111px; }
	
	header .logo img { width: auto; height: 60px; }
	header .bars { margin-top: 15px; }
	
	.page-contact { min-height: calc(100vh - 185px); padding: 35px 0; }	
	.page-about .images .main { margin-top: 35px; }
	
	.page-about .images .gallery { margin-top: 20px; }
	.page-about .images .gallery a { width: calc(33.333% - 10px); }
	.page-about .images .gallery a + a { margin-left: 15px; }
	
	.page-about .text { padding-top: 40px; padding-bottom: 45px; font-size: 16px; line-height: 26px; }
		
	.page-work .project .gallery a { width: calc(50% - 15px); }
	.page-work .project .gallery a:nth-child(3) { margin-left: 0px; }
	.page-work .project .gallery a:nth-child(4) { margin-left: 30px; }
	.page-work .project .gallery a:nth-child(5) { margin-left: 0px; }
	
	.page-work .project .text { margin-top: 30px; }
}