@charset "utf-8";
/* CSS Document */
*{
		box-sizing: border-box;
}
body{
	background-color: #FDFDFD;
	font-family: 'Open Sans', sans-serif;
}
a, a:visited, a:link, a:hover, a:active{
	color: inherit;
	text-decoration: none;
}
.content-wrapper{
	box-sizing: border-box;
	width: 100%;
	min-height: 100vh;
	height: auto;
	margin:0 auto;
	position: relative;
}
.intro{
	width: 100%;
	min-height: 645px;
	height: 100vh;
	background: #FFFFFF;
	-webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
	-moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
	box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
	z-index: 9;
	position: relative;
}
.introfill{
	width: auto;
	height: auto;
	position:absolute;
	top: 50%;
	left: 0;
	right: 0;
	bottom: 0;
	box-sizing: border-box;
	transform: translateY(-50%);
	
}
.introfill .text{
	width: auto;
	padding: 0 10%;
	height: auto;
}
.introfill .text .hello{
	font-size: 5em;
	font-weight: bold;
	color: #908E8E;
	text-align: center;
}
.introfill .text .hello span{
	color: #0F6D90;
}
.introfill .text .undertext{
	color: #908E8E;
	font-weight: bold;
	font-size: 1em;
	margin:26px auto;
	padding: 0 5%;
	text-align: center;
}
.stats{
	width: 100%;
	height: auto;
	text-align: center;
	margin: 80px auto;
	max-width: 700px;
	padding:0 2%;
}
.stats h3{
	font-size: 40px;
	font-weight: 900;
	color: #908E8E;
}
.stats hr{
	border: 1px solid #EEEEEE;
	margin:10px auto;
}
.stats .columns{
	width: 100%;
	height: auto;
}
.stats .columns .row{
	width: 33%;
	height: auto;
	margin:10px auto;
	display: inline-block;
	vertical-align: top;
}
.stats .columns .row span{
	color: #0F6D90;
	font-size: 45px;
	font-weight: 1000;
}
.stats .columns .row p{
	color: #b1b0b0;
	font-size: 22px;
	font-weight: 1000;
	margin: 10px auto;
}
.intro .navbar{
	width: 100%;
	margin:0 auto;
	height: 60px;
	padding: 5px;
	box-sizing: border-box;
}
.intro .navbar .logo{
	padding: 5px;
}
.intro .navbar .logo, .intro .navbar .logo img{
	width: 40px;
	height: 40px;
	display: inline-block;
	vertical-align: top;
}
.intro .navbar .nav{
	width: calc(100% - 80px);
	height: 50px;
	display: inline-block;
	vertical-align: top;
	padding-top: 10px;
}
.intro .navbar .nav ul li{
	font-size: 22px;
	color: #B0AFAF;
	font-weight: bold;
	text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
	-webkit-text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
	-moz-text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
	width: auto;
	height: auto;
	display:inline-block;
	padding: 5px;
	text-align: center;
	margin:0 5px;
}
.intro .navbar .nav ul{
	text-align: right;
}
.intro .navbar .nav ul li:hover{
	border-bottom: 2px solid #B0AFAF;
	padding-bottom: 5px;
	cursor: pointer;
}
.intro .navbar .nav ul .active, .intro .navbar .nav ul .active:hover{
	border-bottom: 2px solid #0F6D90;
	padding-bottom: 5px;
}
.top3{
	height: auto;
	width: 100%;
	padding: 2%;
	max-width: 1000px;
	background: url("../images/path.png") no-repeat;
	background-size: cover;
	margin:0 auto;
	position: relative;
}
.top3 .item{
	width: 100%;
	padding: 2%;
	position: relative;
	margin:0 auto;
	max-width: 700px;
	text-align: center;
}
.top3 .item .text h3{
	font-size: 35px;
	font-weight: bold;
	text-align: left;
}
.top3 .item .text p{
	color: #908E8E;
	font-size: 17px;
	margin-top: 15px;
	margin-bottom: 15px;
	text-align: left;
}
.top3 .item .text button{
	font-size: 18px;
	color: #0F6D90;
	padding: 12px;
	width: 250px;
	background-color: transparent;
	border-radius: 5px;
	border: 2px solid #0F6D90;
	margin: 20px auto;
	position: relative;
	-webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
-moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
}
.top3 .item .text button:hover{
	cursor: pointer;
}
.top3 .item .text a, .top3 .item .text a:visited, .top3 .item .text a:link, .top3 .item .text a:hover, .top3 .item .text a:active{
	color: #0F6D90;
	text-decoration: none;
}
.top3 .item .text{
	width: calc(100% - 250px);
}
.top3 .item .image, .top3 .item .image img{
	width: 250px;
	height: auto;
}
.top3 .item .image, .top3 .item .text{
	display: inline-block;
	vertical-align: top;
}
.top3 .item:nth-child(1){
	margin: 150px auto;
	float: right;
}
.top3 .item:nth-child(2){
	margin: 350px auto;
	float: left;
}
.top3 .item:nth-child(3){
	margin: 80px auto;
	float: right;
}
.scroll-downs {
  position: absolute;
  right: 0;
  bottom: 40px;
  left: 0;
  margin: auto;
  transform: scaleY(-50%);
  width :34px;
  height: 55px;
}
.mousey {
  width: 3px;
  padding: 10px 15px;
  height: 35px;
  border: 2px solid #908E8E;
  border-radius: 25px;
  opacity: 0.75;
  box-sizing: content-box;
}
.project .mousey{
	border:2px solid #FFF;
}
.scroller {
  width: 3px;
  height: 10px;
  border-radius: 25%;
  background-color: #908E8E;
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;
}
.project .scroller{
	background-color: #FFF;
}
@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(15px); opacity: 0;}
}
.footer{
	width: 100%;
	height: 215px;
	background: #3B240E;
	margin:0 auto;
}
.footer .center{
	background: url("../images/smoke.png") no-repeat;
	background-position: center;
	background-size: fill;
	width: 450px;
	height: 215px;
	margin:0 auto;
	text-align: center;
}
.footer .center a, .footer .center a:visited, .footer .center a:link, .footer .center a:hover,.footer .center a:active{
	color: #055877;
	text-decoration: none;
}
.footer .center button{
	font-size: 18px;
	color: #0F6D90;
	padding: 12px;
	width: 250px;
	background-color: #FFF;
	border-radius: 5px;
	border: 0px solid #0F6D90;
	margin-top: 90px;
	position: relative;
	-webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
-moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
}
.footer .center button:hover{
	cursor: pointer;
}
.project{
	color: #fff;
}
.project .navbar{
	width: 100%;
	margin:0 auto;
	height: 60px;
	padding: 5px;
	box-sizing: border-box;
}
.project .navbar .back{
	padding: 5px;
}
.project .navbar .back{
	width: 135px;
	height: 50px;
	display: inline-block;
	vertical-align: top;
}
.project .navbar .back button{
	border: 2px solid #FFF;
	background: transparent;
	padding: 14px;
	color: #FFF;
	width: 135px;
	font-size: 20px;
	-webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
-moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
	border-radius: 50px;
	text-shadow: 0px 3px 6px rgba(150, 150, 150, 0.16);
}
.project .navbar .back button::before{
	background: url("../images/up.svg") no-repeat;
	width: 50px;
	height: 80px;
	content: '';
	top:22px;
	left:22px;
	position: absolute;
}
.project .navbar .back button:hover{
	cursor: pointer;
}
.project .navbar .nav{
	width: calc(100% - 175px);
	height: 50px;
	display: inline-block;
	vertical-align: top;
	padding-top: 10px;
}
.project .navbar .nav ul li{
	font-size: 22px;
	color: #FFF;
	font-weight: bold;
	text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
	-webkit-text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
	-moz-text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
	width: auto;
	height: auto;
	display:inline-block;
	padding: 5px;
	text-align: center;
	margin:0 5px;
}
.project .navbar .nav ul{
	text-align: right;
}
.project .navbar .nav ul li:hover{
	border-bottom: 2px solid #FFF;
	padding-bottom: 5px;
	cursor: pointer;
}
.intro .navbar .nav ul .active, .intro .navbar .nav ul .active:hover{
	border-bottom: 2px solid #0F6D90;
	padding-bottom: 5px;
}
.project .navbar .nav ul li a, .project .navbar .nav ul li a:visited, .project .navbar .nav ul li a:link, .project .navbar .nav ul li a:hover, .project .navbar .nav ul li a:active{
	color: #FFF;
	text-decoration: none;
}
.project .projectinfo{
	width: 100%;
	/*margin:20px auto;*/
	text-align: center;
        position:absolute;
        top:50%;
        transform:translateY(-50%);
}
.project .projectinfo h3{
	color: #FFF;
	font-size: 40px;
	font-weight: bold;
	margin: 20px auto;
}
.project .prev{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 20px;
}
.project .next{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 20px;
}
.project .watermark{
	position: absolute;
	right: 40px;
	bottom: 60px;
	width: 40px;
	height: 40px;
}
.projecttext{
	width: 100%;
	padding: 2%;
	height: auto;
	position: relative;
	margin:0 auto;
	display:flex;
        max-width: 1200px;
}
.projecttext .projectinfo{
	width: 400px;
	border-radius: 10px;
	background: #F5F5F5;
	-webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
-moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
	height: 100%;
	position: sticky;
	position: -webkit-sticky;
	top: 20px;
	text-align: center;
	font-weight: bold;
	color: #908E8E;
	font-size: 20px;
	padding: 2%;
}

.projecttext .projectinfo .item{
	margin: 0px auto;
	border-bottom: 1px solid #E6E6E6;
	padding: 20px;
	position: relative;
	line-height: 30px;
}
.projecttext .projectinfo .item:nth-child(1){
	font-size:30px;
	margin: 0 auto;
}
.projecttext .projectinfo .item:nth-last-of-type(1){
	border-bottom: 0px solid #E6E6E6;
}
.projecttext .projectinfo .item img{
	width: 35px;
	height: auto;
	position: absolute;
	left: 20px;
	top: 10px;
}
.projecttext .projectcontent{
	width: calc(100% - 470px);
	margin-left: 20px;
	margin-top: 30px;
	height: auto;
	flex-direction: column;
}
.projecttext .projectcontent p{
	color:#908E8E;
	font-size: 20px;
	line-height: 25px;
	word-break:keep-all;
	text-align: left;
	margin: 20px auto;
}
.projecttext .projectcontent h3{
	font-size: 30px;
	font-weight:bold;
	color:#908E8E;
	margin: 20px auto;
	display:block;
	width: 100%;
}
.projecttext .projectcontent img{
	width: 100%;
}