@charset "utf-8";

.loading { position: fixed; left: 0; top: 0; z-index: 100; width: 100%; height: 100%; background: #7bbbb0;}
.loading .inner { position: relative; width: 100%; height: 100%;}
.loading .logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 190px; transition: 0.4s linear; opacity: 0;}
.loading.show .logo { opacity: 1;}
@media (max-width: 481px) {
	.loading .logo { width: 140px;}
}

.spacer { width: 100%; height: 100vh;}


.wrap { position: relative; padding: 180px 0 80px; transition: 0.4s linear; background: #fff;}
@media (max-width: 641px) {
	.wrap { padding: 320px 0 60px;}
}


#nav { position: absolute; left: 0; top: 0; width: 100%;}
#nav .inner { position: relative; width: 100%; margin: 0 auto; padding: 100px 0px 50px; padding-right: 128px; transition: 0.4s linear;}
#nav .inner:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0;
 background: linear-gradient(rgba(255,255,255,0.95) 60%, rgba(255,255,255,0));
 transition: 0.4s linear; opacity: 0;
}
#nav .nav-ctn { position: relative; z-index: 2; width: 100%; max-width: 1400px; margin: 0 auto; padding-left: 380px;}
#nav .logo { width: 25%; max-width: 270px; position: absolute; left: 4%; top: 50%; transform: translateY(-50%);}
#nav .logo h2 img { width: 100%;}
#nav ul { font-size: 0; }
#nav ul li { display: inline-block; padding: 0 20px; font-size: clamp(14px,2.0vw,20px); font-weight: 600;}
#nav ul li a { position: relative; padding-bottom: 8px; color: #000; text-decoration: none;}
#nav ul li a:after { content: ''; display: block; width: 0px; height: 2px; background: #7bbbb0;
 position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
 transition: 0.4s ease;
}
#nav ul li a:hover:after { width: 100%;}
#nav.fixed { position: fixed; z-index: 9;}
#nav.fixed .inner { padding-top: 40px;}
#nav.fixed .inner:after { opacity: 1;}
@media (max-width: 1201px) {
	#nav .nav-ctn { padding-left: 30%;}
}
@media (max-width: 1001px) {
	#nav .inner { padding-right: 90px;}
	#nav .logo { width: 20%; left: 3%;}
	#nav .nav-ctn { padding-left: 23%;}
}
@media (max-width: 801px) {
	#nav ul li { padding: 0 12px;}
}
@media (max-width: 641px) {
	#nav .inner { padding: 72px 0 40px;}
	#nav .inner:after { background: linear-gradient(rgba(255,255,255,1) 80%, rgba(255,255,255,0));}
	#nav .logo { display: none; width: 50%; margin-bottom: 20px; position: relative; left: auto; top: auto; transform: translateY(0%);}
	#nav .nav-ctn { padding: 0 30px;}
	#nav ul li { display: block; padding: 12px 0;}
	#nav.fixed .inner { padding-top: 72px;}
}
@media (max-width: 481px) {
	#nav .nav-ctn { padding: 0 36px;}
	#nav .logo { margin-bottom: 12px;}
	#nav ul li { padding: 8px 0;}
	#nav ul li a { display: inline-block; padding: 2px 0px 4px; }
}



.main-ctn { padding-left: 32px; padding-right: 100px;}
#masonry { width:100%; max-width: 1400px; margin: 0 auto; overflow:auto;}
.grid-sizer,
.item { width: 30%;}
.gutter-sizer { width: 3%;}
.item.item-wide{ width: 45%;}
.item .item-inner { padding: 50px 20px;}
.item a { display: block; }
.item a span.outer { display: block; position: relative; width: 100%; overflow: hidden;}
.item a img { position: relative; width: 100%; transition: 0.3s ease;}
.item a:hover img{ opacity: 0.8; transform: scale(1.08);}

@media (max-width: 1201px) {
	.item .item-inner { padding: 30px 20px;}
}
@media (max-width: 801px) {
	.main-ctn { padding: 0 10px; padding-right: 90px;}
	.grid-sizer,
	.item { width: 50%;}
	.gutter-sizer { width: 0%;}
	.item.item-wide{ width: 50%;}
	.item .item-inner { padding: 20px 12px;}
}
@media (max-width: 641px) {
	.main-ctn { padding: 0 12px;}
}
@media (max-width: 481px) {
	.main-ctn { padding: 0 24px;}
	.grid-sizer,
	.item { width: 100%;}
	.item.item-wide{ width: 100%;}
}


.grecaptcha-badge { display: none !important;}