@import url(reset.css);
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');

/* Typograghy */
body{
	font-family: 'Lato', sans-serif;
	font-size: 18px;
	line-height: 32px;
	color: #7c858b;
}

/* Layout */
.container{
	width: 1170px;
	margin: 0 auto;
}

.header nav{
	position: fixed;
	left: 0; right: 0;top: 0;
	padding: 0 48px;
	height:  120px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 999;
	box-shadow: 0 3px 3px rgba(0,0,0,0);
	transition: background 0.3s, box-shadow 0.3s;
}

.header nav .logo span{
	font-size: 18px;
	color: #fff;
	margin-left: 20px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	box-sizing: border-box;
}

.header nav ul{
	position: absolute;
	left: 50%;
	top:50%;
	transform:translate(-50%, -50%);
	max-width: 1170px;
	width: 70%;
	display: flex;
	justify-content: flex-end;
}

.header nav ul li{
	margin-left: 46px;
}

.header nav ul li a{
	color: #fff;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.header nav.fixed{
	background: #fff;
	box-shadow: 0 3px 3px rgba(0,0,0,0.15);
}
.header nav.fixed .logo span,
.header nav.fixed ul li a{
	 color:#0b131a;
}
.header nav.fixed ul li a:hover{
	color:#ffba00;
}

.header nav.fixed .toggle-btn{
	border-color: #ececed;
}

.toggle-btn{
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255,255,255,.15);
	display:flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}
.fixed-nav{
	position: fixed;
	left:50%;
	z-index: 999;
	top:50%;
	margin-left: 630px;
	display: flex;
	flex-direction: column;
	transform:translateY(-50%);
}

.fixed-nav a{
	text-indent: -9999em;
	width: 12px;
	height: 12px;
	border: 2px solid #879099;
	box-sizing: border-box;
	background: none;
	border-radius:50%;
	margin-bottom:16px;
}
.fixed-nav a:last-child{
	margin-bottom: 0;
}

.fixed-nav a.active{
	border:none;
	background: #fff;
}

.fixed-nav a.active-black{
	border:none;
	background: #0b131a;
}
.toggle-menu{
	position: fixed;
	left: 0;right: 0;top: 0;bottom: 0;
	background: rgba(11,19,26,.85);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	visibility: hidden;
	opacity: 0;
	transition: 0.4s;
}
.toggle-menu.active{
	visibility: visible;;
	opacity: 1;

}
.toggle-menu .close{
	position: absolute;
	top:35px;
	right:40px;
}
.toggle-menu ul li{
	margin-bottom: 50px;
}
.toggle-menu ul li:last chlid{
 	margin-bottom: 0;
}
.toggle-menu ul li a{
	letter-spacing: 0.1em;
	font-size: 27px;
	font-weight: 900;
	color: #fff;
	text-transform: uppercase;
}

.toggle-menu ul li a:hover{
	color:#ffba00;
}
/* Main Page Slide */
.swiper-container {
    width: 100%;
    height: 100%;
}

.main-slides .swiper-slide {
	background: no-repeat center center/cover;
	padding-top: 300px;
	z-index: 1;
}
.main-slides .swiper-slide:after{
	content:'';
	position: absolute;
	left: 0;right: 0;top: 0;bottom: 0;
	background: rgba(0,0,0,0.5);
	z-index: -1;
}
.swiper-slide.slide1{
	background-image: url('../images/slide1.jpg');
}
.swiper-slide.slide2{
	background-image: url('../images/slide2.jpg');
}

.swiper-slide.slide3{
	background-image: url('../images/slide3.jpg');
}

.swiper-button-prev, .swiper-button-next{
	right: auto;
	left:50%;
	transform:translateX(-50%);
	width: 89px;
	height: 36px;
	border-radius: 18px;
	background: #020405;
}

.swiper-button-prev{
	margin-left:-640px;
}

.swiper-button-next{
	margin-left:629px;
}

.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after{
	content:none;
}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after{
	content:none;
}

.big-arrow-left{
	width: 46px;
	height: 22px;
	background-position: 0 0;
}

.big-arrow-right{
	width: 46px;
	height: 22px;
	background-position-x: -56px;
}

.swiper-button-prev:hover, .swiper-button-next:hover{
	background-color:  #ffba00;
}

.swiper-button-prev:hover .big-arrow-left, .swiper-button-next:hover .big-arrow-right{
	background-position-y: -32px
}

.slogan{
	margin-left: 100px;
}
.slogan h2{
	font-size: 95px;
	line-height: 90px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff;
	font-weight: 900;
}
.slogan p{
	color: #b1bfcc;
	margin:15px 0 38px;
}
.sm-arrow-right{
	width: 28px;
	height: 16px;
	background-position: -115px 0;
	margin-left: 18px;


}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{
	width: 12px;
	height: 12px;
	border: 2px solid #fff;
	box-sizing: border-box;
	background: none;
	opacity: 1;
	margin:0 8px;


}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active{
	border:none;
	background: #fff;
}
.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
	bottom:54px;
}


/* story */
.story > div {
	display: flex;
	justify-content: center;
	align-items: center;
}
.story .contents{
	width:868px;
	text-align: center;
}
.story .contents h2{
font-size: 65px;
color: #0b131a;
text-transform: uppercase;
}
.story .contents p {
	margin: 27px 0	40px;
}

.story .scroll_down{
	position: absolute;
	left: 50%;
	transform:translateX(-50%);
	bottom: 40px;
	width: 36px;
	height: 89px;
	border-radius: 18px;
	background: #fff;
	border:1px solid #ececed;
	box-sizing: border-box;
	display:flex;
	justify-content: center;
	align-items: center;
}

.big_arrow_down{
	width:22px;
	height: 46px;
	background-position: 0 -72px;
	animation: clipani 1s infinite;
	position: absolute;
}

@keyframes clipani{
	 from{clip: rect(0,22px,0,0);}
	 to{clip:rect(0,22px,46px,0);}
}

/* forest */
.forest{
	background: url(../images/forest.jpg) no-repeat center center/cover;
}
.forest .contents{
	width: 520px;
	text-align: left;
}

/* river */
.river .contents{
	width: 520px;
	text-align: left;
}


/* road */
.road{
	background: url(../images/winter.jpg) no-repeat center center/cover;
}
.road .contents{
	width: 520px;
	text-align: left;
}

/* footer */
.footer{
	padding:86px 0 60px;
	background: #fbf9fb;
}
.footer_menu{
	display: flex;
	justify-content: center;
	text-transform: uppercase;
	margin-bottom: 78px;
}
.footer_menu li{
	margin:0 25px;
}
.footer_menu li a{
	font-weight: 900;
	color:#0b131a;
	letter-spacing: 0.1em;
	line-height: 18px;

}
.footer_menu li a:hover{
	color: #ffba00;
}

.social_menu{
	display: flex;
	justify-content: center;

}
.social_menu li{
	margin:0 6px;
}
.social_menu li a{
	width: 47px;
	height: 47px;
	border-radius: 50%;
	border:1px solid #ececed;
	background: #fff;
	text-align: center;
	line-height: 47px;
	display: block;
	color: #0b131a;
	font-size: 16px;
}
.copyright{
	text-align: center;
	margin-top:17px;
	font-size: 16px;
}
.back_to_top{
	position: fixed;
	left: 50%;
	margin-left: 600px;
	bottom: 310px;
	width: 36px;
	height: 89px;
	border-radius: 18px;
	background: #ffba00;
	box-sizing: border-box;
	display:flex;
	justify-content: center;
	align-items: center;
	visibility: hidden;
	opacity: 0;
	transition: 0.3s;
}
.back_to_top.active{
	visibility: visible;
	opacity: 1;
}
.big_arrow_up{
	width: 22px;
	height: 46px;
	background-position: -32px -64px;
}


/*------------- About  -----------------*/

.subpage-banner{
	background:no-repeat center center/cover;
	height: 480px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 1;

}
.subpage-banner: after{
	content:'';
	left: 0;top: 0;bottom: 0;right: 0;
	position:absolute;
	background: rgba(0,0,0,.5);
	z-index: -1;
}
.subpage-banner.about{
	background-image: url('../images/banner-about.jpg');
}
.subpage-banner .contents{
	text-align: center;	
}
.subpage-banner h2{
	font-size: 95px;
	font-weight: 900;
 	letter-spacing: 0.01em;
 	color: #fff;
 	text-transform: uppercase;
 	line-height: 95px;
 	margin-bottom: 28px
}
.subpage-banner p{
	font-size: 18px;
	color: #fff;
	margin-bottom: 0px;
}
.subpage .toggle-btn{
	background: #ffba00;
}
.our-story{
	display: flex;
	flex-wrap: wrap;
}
.our-story > div{
	width: 50%;
	height: 700px;
}
.story-img, .do-img{
	background: no-repeat center center/cover;
	text-indent: -9999em;
}
.story-img{
	background-image: url('../images/story-img.jpg');
	order:1;
}
.story-content, .do-content{
	padding: 0	86px;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}
.story-content{
	order:2;
}
.do-content{
	order:3;
}
.do-img{
	background-image: url('../images/do-img.jpg');
	order:4;
}
.our-story .contents h2{
	color: #0b131a;
	font-size: 65px;
}
.our-story .contents p{
	margin-bottom: 0;
}
.pepole-says{
	background: #f9f9f9;
}
.pepole-says .swiper-slide{
	padding: 225px 0 130px;
}
.review-slides .contents{
	width: 770px;
	margin:0 auto;
	text-align: center;
}
.review-slides .contents h2{
	font-size: 65px;
	color: #0b131a;
	font-weight: 900;
	text-transform: uppercase;
	margin-bottom: 30px;
	line-height:65px;
}
.reviewer h4{
	font-size: 16px;
	color:#111c26;
	margin-top: 20px 0 10px;
	text-transform: uppercase;
}
.reviewer p{
	font-size: 16px;
	color: #ffba00;
}

.help .contents{
	background-color: #0b131a;
	text-align: center;
	padding: 120px 0;
}
.help h2{
	font-size: 65px;
	color: #fff;
	font-weight: 900;
	text-transform: uppercase;
	margin-bottom: 20px;
}
/*------------- Portfolio  -----------------*/
.filters{
	padding:45px 0;
	display: flex;
	justify-content: center;
}
.filters button{
	margin:0 22px;
	color:#0b131a;
	font-size: 13px;
	text-transform: uppercase;
	font-weight: 700;
}
.filters button.active{
	color:#ffba00;
}
.portfolio_list{
	display: flex;
	flex-wrap: wrap;
}
.portfolio_list li{
	height: 700px;
	background: no-repeat center center/cover;
	align-items: center;
	flex-direction: column;
	width: 33.3%;
	justify-content: center;
	display: flex;
	text-align: center;
	position: relative;
	z-index: 1;
}
.portfolio_list li h2{
	font-size: 36px;
	color:#fff;
	text-transform: uppercase;
	font-weight: 900;
	margin-bottom: 10px;
}
.portfolio_list li h2:before{
    bottom: calc(100% + 30px);
}
.portfolio_list li p{
	font-size: 18px;
	color:#bdcbd9;
	margin-bottom: 30px;
}
.portfolio_list li > *{
	visibility: hidden;
}
.portfolio_list li:hover > *{
	visibility: visible;
}
.portfolio_list li:after{
	content:'';
	position: absolute;
	background: #0b131a;
	left: 0;right: 0;top: 0;bottom: 0;
	opacity: 0;
	transition:0.4s;
	z-index: -1;
}
.portfolio_list li:hover:after{
	opacity: 1;
}
.loadMore{
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #0b131a;
}
#loadmore{
	font-size: 13px;
	color:#fff;
	text-transform: uppercase;
	font-weight: 900;
}
.subpage-banner.portfolio{
	background-image:url('../images/banner-portfolio.jpg');
}
/*------------- Portfolio Single -----------------*/
.single-info{
	padding:125px 0 116px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}
.substate{
	background: #fbf0fb;
	width: 570px;
	padding:63px 0 74px 70px;
}
.substate dl{
	display: flex;
	flex-wrap: wrap;
}
.substate dl dt{
	width: 23%;
	margin-bottom: 21px;
	text-transform: uppercase;
	font-size: 13px;
	color: #0b131a;
	font-weight: 700;
}
.substate dl dd{
	width: 64%;
	font-size: 16px;
}

.single-info .desc{
	width: 500px;
}
.single-info h2{
	font-size: 65px;
	color: #0b131a;
	font-weight: 900;
	text-transform: uppercase;
	margin-bottom: 33px;
}
.page_nav{
	width: 177px;
	height: 36px;
	border-radius: 18px;
	border: 1px solid #ececed;
	box-sizing: border-box;
	display: flex;
	margin-top: 39px;
}
.page_nav a{
	display: flex;
	align-items: center;
	justify-content: center;
	flex:1;
}
.page_nav a.prev{
	border-right: 1px solid #ececed;
}
.page_nav a span{
	background-position-y:-32px;
	opacity: .15;
}
.page_nav a span:hover{
	opacity: 1;
}
.single-photos ul{
	display: flex;
	flex-wrap: wrap;
}
.single-photos ul li{
	height: 700px;
	background: no-repeat center center/cover;
	width: 33.3%;
	text-indent:-9999em;
}
.single-photos ul li.double{
	width: 66.6%;
}
/*------------- Contact -----------------*/
.contact-contents{
	display: flex;
}
.contact-contents > div{
	flex:1;
}
.contact-contents .form{
	padding-top: 127px;
	padding-right: 86px;
}
.contact-contents .form form{
	width: 500px;
	margin-left: auto;
}
.contact-contents .map{
	height: 700px;
	background: #ebebeb;
}
.contact-contents h2{
	font-size: 27px;
	color: #0b131a;
	font-weight: 900;
	text-transform: uppercase;
	padding-top: 30px;
	margin-bottom: 34px;
}
.contact-contents .field{
	margin-bottom: 18px;
	position: relative;
	 
}
.contact-contents .field label{
	position: absolute;
	left: 0;
	top: 50%;
	color: #0b131a;
	transform:translateY(-50%);
	opacity: 0;
	visibility: hidden;
	height: 16px;
	line-height: 16px;
	font-size: 16px;
	transition:0.4s;
}
.contact-contents .field label.active{
	opacity: 1; 
	top: 0;
	visibility: visible;
}
.contact-contents .field input{
	height: 50px;
	line-height: 50px;
	border: none;
	width: 100%;
	display: block;
	outline:none;
	border-bottom: 1px solid #ececed;
	font-size: 16px;
	color: #0b131a;
}
.contact-contents .field textarea{
	border: none;
	width:100%;
	border-bottom: 1px solid #ececed;
	outline:none; 
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	color: #4c5964;
}
.contact-contents .field input:focus,
.contact-contents .field textarea:focus{
	border-bottom: 1px solid #0b131a;
} 
.contact-contents .field input::placeholder,
.contact-contents .field textarea::placeholder{
	color: rgba(11,19,26,0.5);
}
#map-content{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}