@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Cal+Sans&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
html,body,#main{ overflow-x:hidden; min-width:0 !important;}
.zxdp
{
	width:100%;
	height:50vh;
	min-height:400px;
	display:block;
	position:relative;
	cursor:pointer;
	 
}

.zxdp section
{
	display:table;
	width:100%;
	height:100%;
	position:relative;	
}
.zxdp section div
{
	display:table-cell;
	vertical-align:middle;
	width:50%;
	height:100%;
	position:relative;
	vertical-align:middle;
	text-align:center;	
}
.zxdp section div b
{
	display:inline-block;
	width:90%;
	height:auto;
	position:relative;
	vertical-align:middle;
	font-family:'Cal Sans',Verdana, Geneva, sans-serif;
	font-weight:400;
	color:#000;
	font-size:6vw;
	line-height:6vw;

}
.zxdp section div em
{
	display:inline-block;
	width:90%;
	height:auto;
	position:relative;
	vertical-align:middle;
	font-family:'Nunito',Verdana, Geneva, sans-serif;
	font-weight:400;
	color:#000;
	font-size:12px;
	line-height:12px;
	font-style:normal;
	letter-spacing:2px;	
}
.zxdp section div p
{
	display:inline-block;
	width:90%;
	height:auto;
	position:relative;
	vertical-align:middle;
	font-family:'Nunito',Verdana, Geneva, sans-serif;
	font-weight:400;
	color:#000;
	font-size:12px;
	line-height:12px;
	margin-top:24px;
	text-transform:uppercase;
	letter-spacing:2px;	

	font-style:normal;	
}
.zxdp section div picture
{
	width:80%;
	max-width:600px;
	height:auto;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	
}
.zxdp section div picture img
{
	position:relative;
	width:100%;
	height:auto;
	border-radius:1vw;
	scale:1;
	transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
	box-shadow:rgba(0,0,0,0.2) 2px 2px 4px;
}
.zxdp section div:hover picture img
{
	scale:1.1;	
}
.mobileONLY { 
	display:none;
	overflow:hidden;
	width:80%;
	height:0;
	padding:0;
	padding-bottom:60%;
	border-radius:5px;
	margin-bottom:20px;
	box-shadow:rgba(0,0,0,0.2) 2px 2px 4px;
}
.mobileONLY img{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	height:auto;
	width:100%;
	min-width:100%;
	min-height:100%;
	
}
.slideLEFT
{
	
	animation: sLEFT linear both;
    animation-timeline: view();
    animation-range: 0vh 75vh;
}
.slideRIGHT
{
	animation: sRIGHT linear both;
    animation-timeline: view();
    animation-range: 0vh 75vh;
}
.zxdpFIRST{ padding-top:25vh;}
.zxdpLAST{ padding-bottom:20vh;}
@keyframes sLEFT
{
	0%{transform:translate(-100%,0%); opacity:0;}
	100%{transform:translate(0%,0%); opacity:1;}
}
@keyframes sRIGHT
{
	0%{transform:translate(100%,0%); opacity:0;}
	100%{transform:translate(0%,0%); opacity:1;}
}




#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-family:'Cal Sans',Verdana, Geneva, sans-serif;
	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;
	position:fixed;
	width:auto;
	height:auto;
	background:none;
	padding:0;
	margin:0;
	text-align:center;
	z-index:9999999;
}
#mmzTRIGGERc
{
	bottom:48px;
	right:50%;
	transform:translate(50%,0%);
}
#mmzTRIGGERo
{
	top:24px;
	right:24px;
}
#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:48px;
	width:48px;
}
#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);
}
/*
#mmzTRIGGERc div.c a:before
{
	transform: translate(50%,-50%) rotate(-45deg);
	right:50%;	
	animation-name: mmzTRIGGERcR;	
	animation-delay: 0.125s; 	
}
#mmzTRIGGERc div.c a:after
{
	transform: translate(-50%,-50%) rotate(45deg);	
	left:50%;	
	animation-name: mmzTRIGGERcL;	
	animation-delay: 0s;	
}
*/
@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:2px;
	background:#000;
	display:block;
	position:absolute;
	top:50%;
	transform-origin: 50% 50%;
	animation-duration: 0.5s;	
	opacity:0;	
}
/*
#mmzTRIGGERo 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;
}

#mmzTRIGGERo 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; 	
}
#mmzTRIGGERo div.o a:after
{
	transform: translate(0%,50%) rotate(-45deg);	
	right:50%;	
	width:50%;
	animation-name: mmzTRIGGERoRT;		
	animation-delay: 0s;
	animation-fill-mode: forwards;	
}
*/
@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;	
}
.mmzHEADER
{ 
	transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;
	position:fixed;
	top:60px;
	left:50%;
	transform:translate(-50%,0%);
	z-index:999999999;
	display:block;
	opacity:0;
	
}
.mmzHEADERt
{ 
	transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;
	position:absolute;
	top:36px;
	opacity:1;
	left:50%;
	transform:translate(-50%,0%);
	z-index:1;
	display:none;
}
@keyframes riseUPfade {
	0% {top:-120px; opacity:0;}
	100% {top:60px; opacity:1;}
}
.mmzOPEN .mmzHEADER {
	animation: riseUPfade 0.5s ease-out;
    animation-fill-mode: forwards;
}

@media (max-width: 890px) 
{
	.mmzHEADERt {display:block;}
}
.mmzHEADER strong, .mmzHEADERt strong
{
	font-family: 'e', Verdana, Geneva, sans-serif;
	position:relative;
	display:block;
	font-size: 36px;
	line-height:36px;
	letter-spacing: 4px;
	font-weight: normal !important;
	color:#fff;
}
.mmzHEADER strong i, .mmzHEADERt strong i
{
	opacity:0.5;
	font-style:normal;
}
@media (max-width: 1000px) 
{
	#mmzTRIGGERo { display:block !important;}
	.mmzHEADERt {  display: block;}
	    #header {
        display: none !important;
        z-index: -1;
    }
}
@media (max-width: 600px) 
{
	.zxdp section div { display:block; width:100%;}
	.zxdp section div.mobileONLY { display:inline-block; width:70%; padding-bottom:50%; }
	.IMG { display:none !important; }
	.zxdp{height:auto !important; margin-bottom:15vh;}
	#mmzTRIGGERo { transform:scale(0.7);}
}
@media only screen and (orientation: portrait)
{
	.zxdp{height:50vh; min-height: 200px;}
	body { padding-bottom:30vh; }
	.zxdpFIRST{ padding-top:20vh;}
	.zxdp section div em { margin-bottom:12px;}
	.zxdp section div p { margin-top:12px;}
}