* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

:focus {
    outline: 0
}

img {
    border: none;
}

ol,
ul {
    list-style: none;
	padding: 0;
	margin: 0;
}

iframe {
    border: none !important;
    /*width: 0 !important;
    height: 0 !important*/
}

a {
    text-decoration: none;
    cursor: pointer !important
}
body,
html {
	width: 100%;
    height: 100%;
	min-height: 100%;
}
video {
	width: 100%;
	height: 98%;
	object-fit: cover;
	position: absolute;
	left: 0;
	top: 1%;
	z-index: -2;
}

body {
    background-size: cover;
    font-family: 'FatFrank Free', sans-serif;
    font-weight: 900;
    font-style: normal;
	background: #000;
}
header {
	position: absolute;
	width: 100%;
	left: 0;
	top: -2px;
	text-align: center;
	z-index: 99;
}
header img {
	display: inline-block;
	margin: 0px auto;
	max-width: 300px;
}

.wrap {
	height: 100%;
}

.step-item {
    text-align: center;
	overflow: hidden;
	width: 100%;
	height: 100%;
	display: none;
    opacity: 0;
    transform: scale(.2);
}
[data-step="prelander"] {
	display: block;
	opacity: 1;
}
.in {
    animation: in ease .5s forwards;
}
@keyframes in{
	0%{ transform:scale(.2); opacity:0; }
	100%{ opacity:1; transform:scale(1); }
}

.inner {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: 50% 50%;
	align-items: center;
	justify-content: center;
}

.inner .btnNext {
	width: 100%;
	height: 100%;
	display: grid;
	align-items: center;
	justify-content: center;
}

.inner span {
	display: block;
	font-size: 3rem;
	letter-spacing: -1px;
	line-height: .9;
	color: #ffffff;
	background: #ff2a80;
	padding: 10px 20px;
	font-style: italic;
	box-shadow: 7px 7px 0px 0px rgba(0,0,0,1);
	-webkit-box-shadow: 7px 7px 0px 0px rgba(0,0,0,1);
	-moz-box-shadow: 7px 7px 0px 0px rgba(0,0,0,1);
	width: fit-content;
	cursor: pointer;
	transition: all .2s linear;
	min-width: 240px;
	max-width: 360px;
}
.inner span:hover {
 	transform: scale(1.1)
}
.copy {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	font-size: 4rem;
	letter-spacing: -2px;
	line-height: .9;
	color: #ffffff;
	background: #ff2a80;
	padding: 10px 90px;
	font-style: italic;
	font-weight: 900;
	box-shadow: 9px 9px 0px 0px rgba(0,0,0,1);
	-webkit-box-shadow: 9px 9px 0px 0px rgba(0,0,0,1);
	-moz-box-shadow: 9px 9px 0px 0px rgba(0,0,0,1);
	width: max-content;
}
.copy span {
	color: #000;
}
break::before {
  content: "\A";
  white-space: pre;
}
[data-step="step4"] .copy span {
	background: #000 !important;
	color: #fff !important;
	padding: 10px 20px;
	margin: 10px auto 10px !important;
	display: block;
	cursor: pointer;
	width: fit-content;
}
#iframeWrap{
	display: none;
	text-align: center;
	z-index: 99;
	margin: 100px auto 0 auto;
	width: 90%;
	max-width: 750px;
	background-color: rgba(0,0,0,0.5)
}
#iframeWrap>iframe{
	width: 700px;
    height: 350px;
}

@media (max-width:1080px) and (orientation: portrait)  {
	.copy {
		width: 100%;
		font-size: 5rem;
		padding: 40px 0;
	}
}
@media (max-width:768px) {
	.inner span {
		font-size: 2rem;
	}
	.copy {
		width: 100%;
		font-size: 3.5rem;
		padding: 25px 0;
	}
	#iframeWrap>iframe{ width: 400px;  }
}
@media (max-width:620px) {
	.inner span {
		min-width: unset;
		max-width: unset;
	}
	.copy {
		padding: 15px 0;
		font-size: 2.75rem;
	}
	header img {
		max-width: 250px;
	}
	#iframeWrap>iframe{ width: 350px; height: 400px; }
}
@media (max-width:420px) {
	.inner span {
		font-size: 1.5rem;
		letter-spacing: 0;
	}
	[data-step="step1"] .inner span {
		font-size: 1.375rem;
	}
	.copy {
		padding: 5px 0;
		font-size: 2.75rem;
	}
	header img {
		max-width: 200px;
	}
	#iframeWrap>iframe{ width: 300px; height: 420px; }
}
@media (max-width:330px) {
	#iframeWrap>iframe{ width: 270px; height: 410px;}	
}
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 812px) 
  and (orientation: landscape) { 
	break::before {
	  content: unset;
	  white-space: unset;
	}
	.copy {
		padding: 5px 0;
		font-size: 2.125rem;
		letter-spacing: 0;
	}
	.inner span {
		font-size: 1.375rem;
		letter-spacing: 0;
	}
	header img {
		max-width: 150px;
	}
	[data-step="step4"] .copy span {
		width: fit-content;
	}
}
/* iPad */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
	break::before {
	  content: unset;
	  white-space: unset;
	}
	.copy {
		width: 100%;
		padding: 25px 0;
	}
}
/* Iphone 11 Pro , Pro Max */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3),
	(device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 3) { 
	.copy {
		font-size: 2.25rem;
	}
}