@charset "UTF-8";


a.link-grn:link, a.link-grn:visited{
	color:#26DCBB;
	text-decoration: none;
}
a.link-wht:link, a.link-wht:visited{
	color:#fff;
	text-decoration: underline;
}

.h1_grn{
	color:#26DCBB;
	font-size: 12px;
}
.h2_wht{
	color:#fff;
	font-size: 80px;
	font-family: 'dunbar-tall', sans-serif;
	font-weight: 100;
	width:100%;
	border-bottom: 1px solid #26DCBB;
	margin: 0 0 50px 0;
}
.h1_blk{
	color:#000;
	font-size: 12px;
}
.h2_blk{
	color:#000;
	font-size: 80px;
	font-family: 'dunbar-tall', sans-serif;
	font-weight: 100;
	width:100%;
	margin: 0 0 20px 0;
}

@media screen and (max-width: 599px) {
	.h1_grn{
		font-size: 78%;
	}
	.h2_wht{
		font-size: 320%;
		line-height: 1.3;
		padding-bottom: 3%;
		font-weight: 200;
	}
	.h1_blk{
		font-size: 78%;
	}
	.h2_blk{
		font-size: 320%;
		line-height: 1.3;
		font-weight: 200;
	}
}


/*==============================================================  KEYVISUAL */

#keyvisual{
	background: url("../img/keyvisual.jpg") top center no-repeat;
	background-size: cover;
	width:100%;
	text-align: center;
	color:#fff;
	background-attachment: fixed;
}

#keyvisual .layoutbox-btn{
	text-align: right;
	padding: 5% 10% 0 0;
}
#keyvisual .layoutbox-btn img{
	width: 80px;
}

#keyvisual .logo{
	width:70px;
	margin-top: 20%;
}

#keyvisual h1{
	font-size: 120px;
	font-weight: 100;
	letter-spacing: 2px;
	font-family: broadacre-hairline-3, sans-serif;
	margin: 0;	
}

#keyvisual h2{
	font-size: 30px;
	font-weight: 100;
	line-height: 1.7;
	letter-spacing: 2px;
	font-family: broadacre-hairline-2, sans-serif;
	padding-bottom: 20%;
}

@media screen and (max-width: 599px) {
	#keyvisual{
		padding: 0;
		background: url("../img/keyvisual-m.jpg") top center no-repeat;
   		background-attachment: scroll;
		background-size: cover;
	}
	#keyvisual .layoutbox-btn{
		text-align: right;
		padding: 5% 2% 0 0;
	}
	#keyvisual .layoutbox-btn img{
		width: 18%;
	}
	#keyvisual .logo{
		width:10%;
		margin-top: 35%;
		padding-bottom: 0%;
	}
	#keyvisual h1{
		font-size: 370%;
		letter-spacing: 1px;
	}
	#keyvisual h2{
		font-size: 130%;
		font-family: broadacre-thin-1, sans-serif;
		letter-spacing: 1px;
	}
}


/*==============================================================  INTRO */

#intro{
	text-align: center;
	font-size: 27px;
	font-weight: 200;
	line-height: 2;
	padding: 100px 0;
	margin: 0;
}
@media screen and (max-width: 599px) {
	#intro{
		font-size: 130%;
		width: 80%;
		margin: 0 auto;
		font-weight: 300;
		padding: 15% 0;
	}
}

/*==============================================================  ABOUT */

#about, #capability{
	width: 70%;
	margin: 0 0 0 auto;
	padding: 130px 0 100px 45px;
	background-color: #000;
	text-align: left;
	color: #fff;
	font-weight: 200;
}

#about p, #capability p, #contact p{
	margin-right: 200px;
}

@media screen and (max-width: 599px) {
	#about, #capability{
		width: 80%;
		padding: 20% 0 20% 5%;
		font-weight: 300;
	}
	#about p, #capability p, #contact p{
		margin-right: 5%;
	}
}

/*==============================================================  PHILOSOPHY */

#philosophy{
	margin:0 25% 0 auto;
	padding: 150px 0;
	text-align: right;
}
#philosophy p{
	font-size: 29px;
	font-weight: 200;
}
#philosophy img{
	width: 50%;
	margin: -40% 50% -15% 0;
}
@media screen and (max-width: 599px) {
	#philosophy{
		margin:0 5%;
	}
	#philosophy p{
		font-size: 150%;
		font-weight: 300;
	}
}


/*==============================================================  ART PROJECT */

#artproject{
	margin:0 25% 0 auto;
	padding: 80px 0;
	text-align: right;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
}
#artproject .item-img{
	width:55%;
}
#artproject img{
	width:100%;
}
@media screen and (max-width: 599px) {
	#artproject{
		margin:0 5% 0 0;
		flex-direction: column-reverse;
	}
	#artproject p{
		margin-left: 9%;
	}
	#artproject .item-img{
		width:90%;
		margin: 0 auto 0 0;
	}
}


/*==============================================================  CONTACT */

#contact{
	width: 70%;
	margin: 0 0 0 auto;
	padding: 130px 0 50px 45px;
	background-color: #26DCBB;
	text-align: left;
}

#contact .link-box{
	font-family: 'dunbar-tall', sans-serif;
	font-style: italic;
	font-weight: 300;
	font-size: 22px;
}

#contact iframe{
	margin-top: 50px;
	width: 900px;
	height: 500px;
}

.contact-box img{
	width: 100px;
	margin-right: 50px;
}

@media screen and (max-width: 599px) {
	#contact{
		width: 80%;
		padding: 20% 0 5% 5%;
	}
	#contact p{
		margin-right: 5%;
	}
	#contact .link-box{
		font-size: 130%;
	}
	.contact-box img{
		width: 18%;
	}
	#contact iframe{
		margin-top: 10%;
		width: 100%;
		height: 300px;
	}
}


/*==============================================================  BOTTOM IMG */

#bottom-img{
	margin:40px 0;
}

#bottom-img img{
	width: 100%;
}



/*==============================================================  BG */
.bg1{
	width: 30%;
	margin: -10% 0 -24% 8%;
}
.bg2{
	width: 27%;
	margin: -10% 0 -25% 70%;
}

@media screen and (max-width: 599px) {
	.bg1{
		width: 48%;
		margin: -20% 0 -24% -3%
	}
	.bg2{
		width: 48%;
		margin:-40% 0 -20% 50%;
	}
}