@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
*, :after, :before {font-family:'Inter',Verdana, Geneva, sans-serif; z-index:1; position:relative; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 0; line-height: 0; padding: 0; margin: 0; font-family:'Inter',Verdana, Geneva, sans-serif; font-weight:400;}
br { line-height:inherit; font-size:inherit;}
html {scroll-behavior: smooth;}
body, main {min-height: 100vh; -webkit-font-smoothing: antialiased;}

header {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:90;
	mix-blend-mode: difference;
	z-index: 9999; /* Explicitly state z-index */
    -webkit-transform: translateZ(0); /* Forces Safari hardware acceleration */
    transform: translateZ(0);
	
}
header section {
	width:100%;
	height:auto;
	padding-top:4vh;
	padding-left:6vw;
	white-space:nowrap;
}
header section h1
{
	font-size:24px;
	line-height:24px;
	color:#fff;
	white-space:nowrap;
	display:inline-block;
	width:auto;	
	vertical-align:middle;
	padding-top:6px;
}























#mmz
{	
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:none;
	padding:0;
	margin:0;
	text-align:center;
	z-index:999999;
	backdrop-filter: blur(7px);
}
#mmz:before, #mmz:after
{
	content:'';
	width:200%;
	height:200%;
	display:block;
	position:absolute;	
	
}
#mmz:before {bottom:50%;left:50%;transform: translate(-50%,0%) rotate(-45deg);background:rgba(153,204,0,1); transform-origin: 50% 100%; }
#mmz:after {top:50%;left:50%;transform: translate(-50%,0%) rotate(-45deg);background:rgba(153,204,0,1); transform-origin: 50% 0%;}
#mmz ul
{
	display:table-cell;
	vertical-align:middle;
	position:relative;
	list-style:none;
	margin:0;
	padding:0;
	z-index:10;	
}
#mmz ul li
{
	transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;
	display:inline-block;
	position:relative;
	list-style:none;
	padding:0;	
	text-align:left;	
}
#mmz ul li a, #mmz ul li a:link, #mmz ul li a:visited
{
	transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;
	display:inline-block;
	position:relative;
	list-style:none;
	margin:0;
	padding:0;
	font-weight:400;
	color:#fff;
	font-size:18px;
	line-height:18px;
	font-style:normal;
	letter-spacing:1px;
	text-decoration:none;
	text-transform:uppercase;
}
#mmz ul li:last-child { margin-bottom:0;}




.mmzOPEN { display:table !important;}
.mmzOPEN ul li 
{
	animation: riseUP 0.5s ease-out;
    animation-fill-mode: forwards;
}
.mmzOPEN ul li:nth-child(0){ animation-delay: 0s;}
.mmzOPEN ul li:nth-child(1){ animation-delay: 0.025s;}
.mmzOPEN ul li:nth-child(2){ animation-delay: 0.05s;}
.mmzOPEN ul li:nth-child(3){ animation-delay: 0.075s;}
.mmzOPEN ul li:nth-child(4){ animation-delay: 0.1s;}
.mmzOPEN ul li:nth-child(5){ animation-delay: 0.125s;}
.mmzOPEN ul li:nth-child(6){ animation-delay: 0.15s;}
.mmzOPEN ul li:nth-child(7){ animation-delay: 0.175s;}
.mmzOPEN ul li:nth-child(8){ animation-delay: 0.2s;}
.mmzOPEN ul li:nth-child(9){ animation-delay: 0.225s;}
.mmzOPEN:before 
{
	animation: mmzBGt 0.25s ease-out;
    animation-fill-mode: forwards;
}
.mmzOPEN:after 
{
	animation: mmzBGb 0.25s ease-out;
    animation-fill-mode: forwards;
}


@keyframes riseUP {
	0% {margin-bottom:0px;}
	100% {margin-top:36px;}
}
@keyframes mmzBGt {
	0% {bottom:300%;left:-300%;}
	100% {bottom:49%;left:49%;}
}
@keyframes mmzBGb {
	0% {top:300%;left:300%;}
	100% {top:50%;left:50%;}
}
#mmzTRIGGERc, #mmzTRIGGERo
{	
	display:none;
	width:auto;
	height:auto;
	background:none;
	padding:0;
	margin:0;
	text-align:center;
	z-index:9999999;
}
#mmzTRIGGERc
{	
	position:fixed;
	bottom:48px;
	right:50%;
	transform:translate(50%,0%);
}
#mmzTRIGGERo
{
	position:relative;
	display:inline-block;
	vertical-align:middle;
	margin-left:12px;
}
#mmzTRIGGERc div
{
	position:relative;
	display:block;
	height:48px;
	width:48px;
	border-radius:50%;
	background-color:rgba(255,255,255,0.5);
}
#mmzTRIGGERo div
{
	position:relative;
	display:block;
	height:36px;
	width:36px;
}
#mmzTRIGGERc div a, #mmzTRIGGERo div a
{
	position:relative;
	display:block;
	height:inherit;
	width:inherit;
	cursor:pointer;
	transform:scale(1);
	transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out;-webkit-transition: all 0.25s ease-in-out;
}

#mmzTRIGGERc div.c a:before,#mmzTRIGGERc div.c a:after
{
	content:'';
	width:60%;
	height:2px;
	background:#fff;
	display:block;
	position:absolute;
	top:50%;
	transform-origin: 50% 50%;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	opacity:0;
	
	
}
#mmzTRIGGERc div:hover a, #mmzTRIGGERo div:hover a
{
	transform:scale(1.15);
}
@keyframes mmzTRIGGERcR
{
	0%{top:-200%; right:-200%; opacity:0;}
	100%{top:50%; right:50%; opacity:1;}
}
@keyframes mmzTRIGGERcL
{
	0%{top:-200%; left:-200%; opacity:0;}
	100%{top:50%; left:50%; opacity:1;}
}


#mmzTRIGGERo div.o a span, #mmzTRIGGERo div.o a:before, #mmzTRIGGERo div.o a:after
{
	content:'';
	height:4px;
	background:#fff;
	display:block;
	position:absolute;
	top:50%;
	transform-origin: 50% 50%;
	animation-duration: 0.5s;	
	opacity:0;
	border-radius:100vh;	
}

@keyframes mmzTRIGGERoR
{
	0%{top:-200%; right:-200%; opacity:0;}
	100%{top:50%; right:50%; opacity:1;}
}
@keyframes mmzTRIGGERoRT
{
	0%{top:-200%; right:-200%; opacity:0;}
	100%{top:25%; right:50%; opacity:1;}
}
@keyframes mmzTRIGGERoRB
{
	0%{top:-200%; right:-200%; opacity:0;}
	100%{top:75%; right:25%; opacity:1;}
}
/*OPEN BUTTON ANIMATION*/
	.mmzTRIGGERcANI { display:block !important; }
	.mmzTRIGGERoANI div.o a:after
	{
		transform: translate(0%,50%) rotate(-45deg);	
		right:50%;	
		width:50%;
		animation-name: mmzTRIGGERoRT;		
		animation-delay: 0s;
		animation-fill-mode: forwards;
	}
	.mmzTRIGGERoANI div.o a:before
	{
		transform: translate(50%,0%) rotate(-45deg);
		right:50%;	
		width:50%;
		animation-name: mmzTRIGGERoRB;	
		animation-delay: 0.25s;
		animation-fill-mode: forwards;
	}
	.mmzTRIGGERoANI div.o a span
	{
		transform: translate(50%,0%) rotate(-45deg);
		right:50%;	
		width:100%;
		animation-name: mmzTRIGGERoR;	
		animation-delay: 0.125s;
		animation-fill-mode: forwards;
	}
/*END | OPEN BUTTON ANIMATION*/
.mmzTRIGGERcANI div.c a:before
{
	transform: translate(50%,-50%) rotate(-45deg);
	right:50%;	
	animation-name: mmzTRIGGERcR;	
	animation-delay: 0.125s; 	
}
.mmzTRIGGERcANI div.c a:after
{
	transform: translate(-50%,-50%) rotate(45deg);	
	left:50%;	
	animation-name: mmzTRIGGERcL;	
	animation-delay: 0s;	
}


























.FSBLOCK, .TXTBLOCK {
	position:relative;
	width:100%;
	height:100vh;
	text-align:center;
}

.TXTBLOCK {
	background:#fff;
}
.TXTBLOCK section h1
{
	font-size:24px;
	line-height:24px;
	color:#222;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:auto;
	text-align:center;	
}
.TXTBLOCK section h1 span
{
	font-size:28vh;
    font-weight:bold;
    line-height:18vh;
	letter-spacing:-1vw;
	display:inline-block;
	width:auto;
	height:auto;
	margin-top:2vw;
	margin-bottom:2vw;
    background-image: linear-gradient(90deg, #f43f5e 0%, #a855f7 20%, #3b82f6 40%, #06b6d4 60%, #10b981 80%, #f43f5e 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: ta-02-flow 4s linear infinite;
}
.FSBLOCK h2
{
	position:fixed;
	bottom:15vh;
	left:0;
	width:100%;
	padding-left:10%;
	padding-right:10%;
	height:auto;
	font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    text-transform: uppercase;
    color: #fff;
	letter-spacing:8px;
	opacity:0.5;
}


@keyframes ta-02-flow {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 200% center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ta-02__title {
    animation: none;
    background-position: 0% center;
  }
}
.FSBLOCK section, .TXTBLOCK section{
	position:relative;
	display:inline-block;
	width:90%;
	height: 100%;
	max-width:1100px;	
}
.HERO-LOGO{
	width:300px;
	height:300px;
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.HERO-LOGO:hover div:after, .HERO-LOGO:hover div:before { opacity:0; }
.HERO-LOGO div{
	position:relative;
	width:100%;
	height:100%;
}

.HERO-LOGO div img{ 
	width:100%;
	height:auto;
	position:absolute;
	top:0;
	left:0;
	opacity:0.75;
	mix-blend-mode: overlay;
}

.bgFIXED {
	position: fixed;
 	right: 0;
	top:0%;
	width:100%;
	height:100vh;
	min-width: 100%;
	min-height: 100%;
	background-color:rgba(0,0,0,1);
	overflow:hidden;
}
.bgFIXED div{
	display:block;
	position:relative;
	width:100%;
	height:100%;
	background-color:transparent;
	content:'';	
}
.bgVIDFIXED {
	position:absolute;
 	right: 0;
	top:80vh;
	width:100%;
	height:inherit;
	object-fit:cover;
	min-width: 100%;
	min-height: 100%;
	filter: grayscale(100%);
	opacity:1;}

.bgFIXED div .shader {
	position:absolute;
	display:block;
	top:0%;
	left:0;
	width:100%;
	height:100%;
	content:'';
	/*background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 20%, rgba(0,0,0,1) 79%, rgba(0,0,0,1) 81%,  rgba(0,0,0,0) 100%); */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 20%, rgba(0,0,0,1) 78%, rgba(0,0,0,1) 79%, rgba(0,0,0,0) 90%,  rgba(0,0,0,0) 100%); 
	opacity:1;
	transition: background 1s ease-in-out;
}
@media (max-width: 960px) {
	
	.bgFIXED div .shader {background: linear-gradient(to bottom,  rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 45%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,1) 79%, rgba(0,0,0,1) 81%,  rgba(0,0,0,0) 100%);}
}

.bgPICFIXED {
	position:absolute;
 	right: 0;
	top:0%;
	width:100%;
	height:inherit;
	object-fit:cover;
	min-width: 100%;
	min-height: 100%;
}
.z1 	{z-index:1;}
.z2 	{z-index:2;}
.z3 	{z-index:3;}
.z4 	{z-index:4;}
.z5 	{z-index:5;}
.z6 	{z-index:6;}
.z7 	{z-index:7;}
.z8 	{z-index:8;}
.z9 	{z-index:9;}
.z10 	{z-index:10;}
.z11 	{z-index:11;}

.blendO {mix-blend-mode:multiply;}

.glowing-circle:after {
	content:'';
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
  	width: 98%;
  	height: 98%;
  	border-radius:50%;
  	background-color:transparent;
  	-webkit-animation: glowing 2s ease-in-out infinite alternate;How-To, DIY & Expert Content
  	-moz-animation: glowing 2s ease-in-out infinite alternate;
  	animation: glowing 2s ease-in-out infinite alternate;
	z-index:0;
	
	transition: opacity .25s ease-in-out;
}
.glowing-circle:before {
	content:'';
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
  	width: 100%;
  	height: 100%;
  	border-radius:50%;
  	background-color:transparent;
  	-webkit-animation: glowingIN 2.5s ease-in-out infinite alternate;How-To, DIY & Expert Content
  	-moz-animation: glowingIN 2.5s ease-in-out infinite alternate;
  	animation: glowingIN 2.5s ease-in-out infinite alternate;
	z-index:0;
	
	transition: opacity .25s ease-in-out;
}
@-webkit-keyframes glowing {
  from {
    box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #f0f, 0 0 40px #0ff, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  to {
    box-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}
@-webkit-keyframes glowingIN {
  from {
    box-shadow:inset 0 0 10px #fff,inset 0 0 20px #fff,inset 0 0 30px #f0f,inset 0 0 40px #0ff,inset 0 0 50px #e60073,inset 0 0 60px #e60073,inset 0 0 70px #e60073;
  }
  to {
    box-shadow:inset 0 0 20px #fff,inset 0 0 30px #ff4da6,inset 0 0 40px #ff4da6,inset 0 0 50px #ff4da6,inset 0 0 60px #ff4da6,inset 0 0 70px #ff4da6,inset 0 0 80px #ff4da6;
  }
}








/* ---------- Fog ---------- */
.fogwrapper {
  height: 100vh;
  position: absolute;
  top: 0;
  width: 100%;
  -webkit-filter: blur(3px);
  filter: blur(3px) ;
  overflow: hidden;
}
#foglayer_01, #foglayer_02, #foglayer_03 {
  height: 100%;
  position: absolute;
  width: 200%;
}
#foglayer_01 .image01, #foglayer_01 .image02,
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02 {
  float: left;
  height: 100%;
  width: 50%;
}
#foglayer_01 {
  -webkit-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
  -moz-animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
  animation: foglayer_01_opacity 10s linear infinite, foglayer_moveme 15s linear infinite;
}
#foglayer_02, #foglayer_03 {
  -webkit-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
  -moz-animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
  animation: foglayer_02_opacity 21s linear infinite, foglayer_moveme 13s linear infinite;
}

/* ---------- Moving Fog ---------- */
/*
  'size: cover' || 'size: 100%'; results remain the same
  'attachment: scroll' can be added or removed; results remain the same
  'attachment: fixed' causing unexpected results in Chrome
  'repeat-x' || 'no-repeat'; results remain the same
*/ 
#foglayer_01 .image01, #foglayer_01 .image02 {
  background: url("images/fog1.png") center center/cover no-repeat transparent;
}
#foglayer_02 .image01, #foglayer_02 .image02,
#foglayer_03 .image01, #foglayer_03 .image02{
  background: url("images/fog2.png") center center/cover no-repeat transparent;
}

/* ---------- Keyframe Layer 1 ---------- */
@-webkit-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@-moz-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@-o-keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
@keyframes foglayer_01_opacity {
  0% { opacity: .1; }
  22% { opacity: .5; }
  40% { opacity: .28; }
  58% { opacity: .4; }
  80% { opacity: .16; }
  100% { opacity: .1; }
}
/* ---------- Keyframe Layer 2 ---------- */
@-webkit-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@-moz-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@-o-keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
@keyframes foglayer_02_opacity {
  0% { opacity: .5; }
  25% { opacity: .2; }
  50% { opacity: .1; }
  80% { opacity: .3; }
  100% { opacity: .5; }
}
/* ---------- Keyframe Layer 3 ---------- */
@-webkit-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@-moz-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@-o-keyframes foglayer_03_opacity {
  0% { opacity: .8 }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
@keyframes foglayer_03_opacity {
  0% { opacity: .8; }
  27% { opacity: .2; }
  52% { opacity: .6; }
  68% { opacity: .3; }
  100% { opacity: .8; }
}
/* ---------- Keyframe moveMe ---------- */
@-webkit-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-moz-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@-o-keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}
@keyframes foglayer_moveme {
  0% { left: 0; }
  100% { left: -100%; }
}

@media only screen
  and (min-width: 280px)
  and (max-width: 767px) {
    #foglayer_01 .image01, #foglayer_01 .image02,
    #foglayer_02 .image01, #foglayer_02 .image02,
    #foglayer_03 .image01, #foglayer_03 .image02 {
      width: 100%;
    }
  }



























.navCIRCLE {
	position:absolute;
	top:0;
	left:0;
	z-index:10;
	width:100%;
	height:100%;
}
@media (max-width: 600px) {
	.navCIRCLE, .navCIRCLE ul li, .navCIRCLE ul li a{ pointer-events: none; }
}
.navCIRCLE ul{
	list-style:none;
	width:100%;
	height:100%;
	position:relative;
	display:block;
	scale: 0.2;
	transition: all .5s ease-in-out;
	cursor:pointer;
}
.navCIRCLE ul:after {
	content:'';
	width:150%;
	height:150%;
	z-index:-1;
	display:block;
	background:none;
	background-color:transparent;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.navCIRCLE:hover ul {
	scale:1;
}
.navCIRCLE ul li{
	list-style:none;
	position:absolute;
	width:80px;
	height:80px;
	background:rgba(255,255,255,0.1);
	display:table;
	border-radius:50%;	
	top:50%;
	left:50%;
	transform-origin: center;
	transform:translate(-50%,-50%);	
	opacity:0;
	transition: all .5s ease-in-out;
	scale:1;	
	backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  	
}
.navCIRCLE ul li:before { display:none !important;}
.navCIRCLE ul li:hover{ scale: 1.5;}

.navCIRCLE ul li a, .navCIRCLE ul li a:link, .navCIRCLE ul li a:visited{
	position:relative;
	width:100%;
	height:100%;
	text-align:center;
	display:table-cell;
	vertical-align:middle;	
	text-decoration:none;
	overflow:hidden;
	border-radius:50%;
	
}
.navCIRCLE ul li a:hover span
{
	margin-top:-150%;
	margin-bottom:50%;
}

.navCIRCLE ul li a span, .navCIRCLE ul li a b
{
	display:table;
	width:auto;
	height:auto;
	position:relative;
	transition: all .35s ease-in-out;

}
.navCIRCLE ul li a b
{
	font-size:12px;
	line-height:14px;
	color:#fff;
	display:block;
	position:relative;
}
.navCIRCLE ul li a span
{
	display:block;
	width:100%;
	height:100%;
	position:relative;
}
.navCIRCLE ul li a span img {
	width:48px;
	height:auto;
	filter: invert(100%);
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.navCIRCLE:hover ul li:nth-child(1) { 

	top:0%;
	left:25%;
	transform:translate(-100%,-100%);
	opacity:1;
	scale:1;
	
}
.navCIRCLE:hover ul li:nth-child(2) { 

	top:50%;
	left:-10%;
	transform:translate(-100%,-50%);
	opacity:1;
	scale:1;
	
}
.navCIRCLE:hover ul li:nth-child(3) { 

	top:100%;
	left:25%;
	transform:translate(-100%,0%);
	opacity:1;
	scale:1;
	
}
.navCIRCLE:hover ul li:nth-child(4) { 

	top:0%;
	left:75%;
	transform:translate(0%,-100%);
	opacity:1;
	scale:1;
	
}
.navCIRCLE:hover ul li:nth-child(5) { 

	top:50%;
	left:110%;
	transform:translate(0%,-50%);
	opacity:1;
	scale:1;
	
}
.navCIRCLE:hover ul li:nth-child(6) { 

	top:100%;
	left:75%;
	transform:translate(0%,0%);
	opacity:1;
	scale:1;
	
}



@media (max-width: 960px) {	.HERO-LOGO { width:220px; height:220px; }}
@media (max-width: 600px) {	.HERO-LOGO { width:160px; height:160px; }}



























.soBLOCK {
    text-align: center;
    position: absolute;
    width: 100%;
    height: 100vh;
    letter-spacing: 2px;
    overflow: hidden;
    clip-path: inset(0px);
	z-index:10;
	top:200vh;

}
.soBLOCK *{
    font-weight: 300;
    font-size: 13px;
	line-height:13px;
    text-transform: uppercase;
}
.soBLOCK h1, .soBLOCK h2 {
	font-weight: 700;
    font-size: 48px;
	line-height:48px;
    text-transform: uppercase;
    color: #fff;
	margin-bottom:1.5vh;
}
.soBLOCK h3, .soBLOCK h4 {
	font-weight: 500;
    font-size: 24px;
	line-height:24px;
    text-transform: uppercase;
    color: #fff;
	margin-bottom:2.5vh;
}
.soBLOCK p {
	font-weight: 500;
    font-size: 16px;
	line-height:22px;
	text-transform:none;
    color: #fff;
}
@media (max-width: 600px) {

	.soBLOCK h1, .soBLOCK h2 {font-size: 36px;	line-height:36px;}
	.soBLOCK h3, .soBLOCK h4 {font-size: 18px;  line-height:18px;}
	.soBLOCK p { font-size: 12px; line-height:18px;}
	.soBLOCK section img { width:5vh;}
	
}

.soBLOCK section {
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
	width:100%;
	height:100vh;
	text-align:center;
}
.soBLOCK section img
{
	position:relative;
	width:10vh;
	height:auto;
	min-width:80px;
	filter:invert(100%);
	margin-bottom:2.5vh;
}
.soBLOCK section div{
	position:relative;
	display:inline-table;
	width:60vw;
	max-width:800px;
	height:100%;
}
.soBLOCK section div a, .soBLOCK section div a:link, .soBLOCK section div a:visited{
	position:relative;
	display:inline-table;
	width:auto;
	height:auto;
	font-size:18px;
	line-height:18px;
	color:inherit;
	font-weight:500;
	border-radius:100vh;
	padding:9px;
	padding-right:32px;
	padding-left:32px;
	border:solid;
	border-color:#fff;
	border-width:2px;
	margin-left:7px;
	margin-right:7px;
	margin-top:18px;
	vertical-align:middle;
	text-decoration:none;
	filter: invert(0%); 
	
	transition: all .125s ease-in-out;	
}
.soBLOCK section div a:hover { filter: invert(100%); }
.soBLOCK section div div{
	position:relative;
	display:table-cell;
	width:100%;
	height:100%;
	vertical-align:middle;
	text-align:center;
}
.soBLOCK:nth-child(1), .soBLOCKONE {
    background:linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%);
    color: #fff;
    top: 200vh;
    z-index: 10;
}
.soBLOCK:nth-child(2), .soBLOCKTWO {
    box-shadow: inset 0 1px 80px rgba(0, 0, 0, 0.14);
    background: linear-gradient(120deg, #FDBB2D 0%, #22C1C3 100%);
    color: #fff;
    top: 300vh;
    z-index: 11;
}
.soBLOCK:nth-child(3), .soBLOCKTHREE {
    box-shadow: inset 0 1px 80px rgba(0, 0, 0, 0.14);
    background: linear-gradient(90deg, #e3ffe7 0%, #d9e7ff 100%);
    color: #000 !important;
    top: 400vh;
    z-index: 12;
}
.soBLOCKTHREE img { filter:invert(0%) !important; }
.soBLOCKTHREE a {border-color:#000 !important;}
.soBLOCKTHREE p, .soBLOCKTHREE h2, .soBLOCKTHREE h3  {color: #000 !important;}

.soBLOCK:nth-child(4), .soBLOCKFOUR {
    box-shadow: inset 0 1px 80px rgba(0, 0, 0, 0.14);
    background-color: #85c20a;
    color: #fff;
    top: 500vh;
    z-index: 13;
}



.soBLOCKfooter {
    box-shadow: inset 0 1px 80px rgba(0, 0, 0, 0.14);
    background-color:rgba(0,0,0,0.5);
	-webkit-backdrop-filter: blur(5px);
  	backdrop-filter: blur(5px);
    color: #fff;
    top: 600vh;
    z-index: 14;
	height:100vh;
}
.soBLOCKfooter section
{
	height:auto !important;
	top:auto !important;
	bottom:10vh;
	transform:translate(-50%, 0%) !important;
}

.soBLOCKfooter footer 
{
	display:inline-block;
	width:100%;
	height:auto;
}

.soBLOCKfooter footer nav{
	display:inline-block;
	padding-top:2.5vh;
	border-top:solid;
	border-top-width:2px;
	border-top-color:#fff;
	width: 60%;
	vertical-align:top;
	text-align:left;
}
.soBLOCKfooter footer nav a, .soBLOCKfooter footer nav a:link, .soBLOCKfooter footer nav a:visited{
	font-weight: 400;
	color: rgb(255, 255, 255);
	font-size: 16px;
	line-height: 24px;
	border:none;
	text-decoration:none;
	padding:12px;
	margin:12px;
	display:inline-block;
}

.soBLOCKfooter footer address{
	display:inline-block;
	vertical-align:top;
	padding-top:2.5vh;
	border-top:solid;
	border-top-width:2px;
	border-top-color:#fff;
	width:20%;
	margin-left:5%;
	font-style:normal;
	text-align:left;
	color: rgb(255, 255, 255);
	font-size: 16px;
	line-height: 24px;
}
@media (max-width: 1180px) {
	.soBLOCKfooter footer nav, .soBLOCKfooter footer address { width:80%; display:inline-block; margin-left:0; text-align:center;}
	.soBLOCKfooter footer nav { padding-top:0;} 
	.soBLOCKfooter footer nav a, .soBLOCKfooter footer nav a:link, .soBLOCKfooter footer nav a:visited{
		padding-top:2.5vh;		
	}
	.soBLOCKfooter footer address { border-top:none; opacity:0.5;}
}