cocos-html-pack-3d
Version:
Single html web mobile template for Cocos verions 2.x
1,876 lines (1,603 loc) • 65.1 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--__MetaAdSize__-->
<title>${title}</title>
<!--http://www.html5rocks.com/en/mobile/mobifying/-->
<meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1, minimum-scale=1,maximum-scale=1" />
<!--https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html-->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="format-detection" content="telephone=no">
<!-- force webkit on 360 -->
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<!-- force edge on IE -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="msapplication-tap-highlight" content="no">
<!-- force full screen on some browser -->
<meta name="full-screen" content="yes" />
<meta name="x5-fullscreen" content="true" />
<meta name="360-fullscreen" content="true" />
<!-- force screen orientation on some browser -->
<meta name="screen-orientation" content="${orientation}" />
<meta name="x5-orientation" content="${orientation}">
<!--fix fireball/issues/3568 -->
<!--<meta name="browsermode" content="application">-->
<meta name="x5-page-mode" content="app">
<!--<link rel="apple-touch-icon" href=".png" />-->
<!--<link rel="apple-touch-icon-precomposed" href=".png" />-->
<link rel="icon" href="favicon.ico" />
${style}
<!--style vungle-->
<style>
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block
}
body {
line-height: 1
}
ol,
ul {
list-style: none
}
blockquote,
q {
quotes: none
}
blockquote:after,
blockquote:before,
q:after,
q:before {
content: '';
content: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
p {
font-family: -apple-system, "Segoe UI", Roboto, "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
}
html {
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
-webkit-font-smoothing: antialiased;
font-size: 1em
}
html a {
text-decoration: none
}
body {
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
background-color: #000
}
body>* {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent
}
#vungle-close {
opacity: 1;
-webkit-transition: opacity .35s
}
#vungle-close.hide {
opacity: 0;
pointer-events: none
}
#vungle-ad-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto
}
#vungle-ad {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto
}
#video.hide {
display: none
}
#vungle-vid {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 100%;
font-size: 0
}
#vungle-wrap {
display: flex;
flex-flow: column;
height: 100%
}
#vungle-wrap.video-inline #vungle-vid {
flex: 0 1 auto;
position: initial;
transform: none;
top: initial;
left: initial
}
#vungle-wrap.video-inline #vungle-ad {
flex: 1 1 auto;
transform: none;
top: initial;
left: initial;
height: initial
}
#close-button-replacement,
#vungle-close {
opacity: 1;
-webkit-transition: opacity .35s
}
#close-button-replacement.hide,
#vungle-close.hide {
opacity: 0;
pointer-events: none
}
#close-button-replacement {
color: #fff;
background-color: rgba(0, 0, 0, .3);
font-family: -apple-system, "Segoe UI", Roboto, "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 10px 10px;
margin: 0;
text-align: center;
position: absolute;
right: 0;
left: 0;
top: 0;
z-index: -1
}
#vungle-header {
position: absolute;
top: 0;
right: 0;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
z-index: 10000000
}
#vungle-header a {
display: block;
padding: .8em .8em .5em 1.2em;
right: 0
}
body.windows #vungle-header a {
padding: .25em .25em .45em .45em
}
@media all and (min-width:900px) {
body.windows #vungle-header a {
padding: .5em .5em .5em .5em
}
}
#vungle-header a svg {
right: 0;
margin: 0;
padding: 0;
vertical-align: bottom;
height: 1.1em;
width: 1.1em
}
body.windows #vungle-header a svg {
height: 1em;
width: 1em;
margin-bottom: .2em;
margin-right: .1em
}
@media all and (min-width:900px) {
body.windows #vungle-header a svg {
height: 1.5em;
width: 1.5em;
margin-right: .3em
}
}
#vungle-header a:active {
opacity: .55
}
body.light #vungle-header #background-vungle-ad-close {
background: rgba(0, 0, 0, .3)
}
body.dark #vungle-header #background-vungle-ad-close {
background: rgba(255, 255, 255, .6)
}
body.android #vungle-header #background-vungle-ad-close,
body.ios #vungle-header #background-vungle-ad-close {
background: 0 0
}
body.windows #vungle-header #background-vungle-ad-close {
padding: .3em .6em .3em .6em
}
@media all and (min-width:900px) {
body.windows #vungle-header #background-vungle-ad-close {
padding: .5em .8em .5em .8em
}
}
#vungle-header #background-vungle-ad-close span {
display: none
}
body.light #vungle-header #background-vungle-ad-close span {
color: #e8e8e8
}
body.dark #vungle-header #background-vungle-ad-close span {
color: #000
}
body.windows #vungle-header #background-vungle-ad-close span {
display: inline-block;
font-family: -apple-system, "Segoe UI", Roboto, "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 1.2em;
line-height: 1.3em
}
@media all and (min-width:900px) {
body.windows #vungle-header #background-vungle-ad-close span {
font-size: 1.8em;
line-height: 1.2em
}
}
#vungle-header .svg-vungle-ad-close-icon {
fill: #000;
stroke: rgba(255, 255, 255, .6);
stroke-width: 14;
stroke-miterlimit: 10
}
body.light #vungle-header .svg-vungle-ad-close-icon {
fill: #e8e8e8;
stroke: rgba(0, 0, 0, .3)
}
body.dark #vungle-header .svg-vungle-ad-close-icon {
fill: #000;
stroke: rgba(255, 255, 255, .6)
}
body.windows #vungle-header .svg-vungle-ad-close-icon {
stroke: none
}
#vungle-header.left {
right: auto;
left: 0
}
#vungle-ad {
transition: opacity 20ms linear;
-webkit-transition: opacity 20ms linear;
position: relative
}
#vungle-ad.endcard,
#vungle-ad.video-endcard,
.endcard-view {
position: absolute;
margin: auto;
top: 0;
left: 0;
overflow: hidden;
height: 100%;
width: 100%
}
#vungle-ad-debug {
display: block;
position: absolute;
width: 100%;
height: 100%;
z-index: 99999;
top: 0;
left: 0;
bottom: 0;
right: 0;
pointer-events: none;
background-color: rgba(0, 0, 0, .3)
}
#vungle-ad-debug p {
text-align: center;
position: absolute;
width: 80%;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: -apple-system, "Segoe UI", Roboto, "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
}
body.landscape #vungle-ad-debug p {
width: 60%
}
#vungle-ad-debug span {
display: block;
padding: .5em 1em;
background: rgba(100, 100, 100, .35);
color: #fff;
font-weight: 400;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
font-size: 3vw
}
@media (max-width:30em) {
#vungle-ad-debug span {
font-size: .9em
}
}
@media (min-width:36.66667em) {
#vungle-ad-debug span {
font-size: 1.1em
}
}
#vungle-ad-debug span.title {
font-size: 2.5vw;
background: rgba(0, 0, 0, .8)
}
@media (max-width:56em) {
#vungle-ad-debug span.title {
font-size: 1.4em
}
}
@media (min-width:68em) {
#vungle-ad-debug span.title {
font-size: 1.7em
}
}
#vungle-ad-debug span b {
font-weight: 600
}
#vungle-ad-debug span:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 5px
}
#vungle-ad-debug span:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px
}
#vungle-ad-debug span:nth-child(3) {
box-shadow: inset 0 11px 0 -10px rgba(0, 0, 0, .1), inset 0 -11px 0 -10px rgba(0, 0, 0, .1)
}
body.landscape #vungle-ad-debug span {
font-size: 2vw
}
@media (max-width:35em) {
body.landscape #vungle-ad-debug span {
font-size: .7em
}
}
@media (min-width:45em) {
body.landscape #vungle-ad-debug span {
font-size: .9em
}
}
body.landscape #vungle-ad-debug span.title {
font-size: 2vw
}
@media (max-width:75em) {
body.landscape #vungle-ad-debug span.title {
font-size: 1.5em
}
}
@media (min-width:90em) {
body.landscape #vungle-ad-debug span.title {
font-size: 1.8em
}
}
body.square #vungle-ad-debug span {
font-size: 2vw
}
@media (max-width:35em) {
body.square #vungle-ad-debug span {
font-size: .7em
}
}
@media (min-width:45em) {
body.square #vungle-ad-debug span {
font-size: .9em
}
}
body.square #vungle-ad-debug span.title {
font-size: 2vw
}
@media (max-width:75em) {
body.square #vungle-ad-debug span.title {
font-size: 1.5em
}
}
@media (min-width:90em) {
body.square #vungle-ad-debug span.title {
font-size: 1.8em
}
}
body.square #vungle-ad-debug span.title {
background-color: rgba(113, 127, 155, .65)
}
body.portrait-xs #vungle-ad-debug span.title {
background-color: rgba(215, 129, 106, .65)
}
body.portrait-s #vungle-ad-debug span.title {
background-color: rgba(222, 151, 133, .65)
}
body.portrait-m #vungle-ad-debug span.title {
background-color: rgba(229, 174, 160, .65)
}
body.portrait-l #vungle-ad-debug span.title {
background-color: rgba(236, 197, 187, .65)
}
body.portrait-xl #vungle-ad-debug span.title {
background-color: rgba(255, 220, 214, .65)
}
body.landscape-xs #vungle-ad-debug span.title {
background-color: rgba(126, 145, 111, .65)
}
body.landscape-s #vungle-ad-debug span.title {
background-color: rgba(158, 180, 139, .65)
}
body.landscape-m #vungle-ad-debug span.title {
background-color: rgba(180, 203, 161, .65)
}
body.landscape-l #vungle-ad-debug span.title {
background-color: rgba(195, 213, 180, .65)
}
body.landscape-xl #vungle-ad-debug span.title {
background-color: rgba(210, 223, 198, .65)
}
#vungle-ad-debug.oob {
background-color: rgba(255, 0, 0, .4)
}
#vungle-ad-debug.oob span.title {
background-color: rgba(255, 0, 0, .65) !important
}
#vungle-ad-debug.oob p {
color: #fff;
font-weight: 700
}
#privacy-wrapper #privacy-page-wrapper {
position: absolute;
z-index: 5000001;
width: 100%;
height: 100%;
left: 0;
top: 0;
margin: 0;
border: 0;
padding: 0;
display: none;
background: #fff;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
z-index: 16000001
}
#privacy-wrapper #privacy-page {
height: 100%;
width: 100%;
margin: 0;
border: 0;
padding: 0
}
#privacy-wrapper #privacy-back-button-container {
position: absolute;
bottom: 2.5vmin;
right: 2.5vmin;
width: 7vmin;
height: 7vmin;
background: #00b17e;
padding: 4vmin;
border-radius: 100%;
display: none;
z-index: 16000002
}
#privacy-wrapper #privacy-icon #privacy-external {
width: 3vmin;
display: inline-block;
margin-left: 8.7vmin;
margin-top: -.2vmin
}
#privacy-wrapper #privacy-icon svg {
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 4vmin;
width: 5vmin;
-webkit-tap-highlight-color: transparent
}
#privacy-wrapper #privacy-icon svg path {
fill: rgba(190, 190, 190, .5);
stroke: rgba(0, 0, 0, .25);
stroke-width: 8
}
#privacy-wrapper #privacy-icon.privacy-container {
-webkit-tap-highlight-color: transparent;
z-index: 5000000;
position: absolute;
left: 1vmin;
bottom: 1vmin;
font-size: 68px;
font-size: 10vmin;
color: #909090;
font-family: -apple-system, "Segoe UI", Roboto, "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 8vmin;
height: 8vmin;
background: #fff;
border-radius: 50%;
transition: background .5s ease-in-out, width .5s ease-in-out, border-radius .2s ease-in-out, border .5s ease-in-out;
background: rgba(255, 255, 255, 0);
overflow: hidden;
border: .25vmin solid transparent
}
#privacy-wrapper #privacy-icon.privacy-container span {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #909090;
font-size: 12px;
font-size: 3vmin;
left: 8vmin;
white-space: nowrap
}
#privacy-wrapper #privacy-icon.privacy-extended {
background: #fff;
width: 26vmin;
border-radius: 5vmin 5vmin 5vmin 5vmin;
border: .25vmin solid rgba(0, 0, 0, .1)
}
#privacy-wrapper #privacy-icon.privacy-reverse {
transition: background .5s .5s ease-in-out, width .5s ease-in-out, border-radius .25s .2s ease-in-out, border .5s .5s ease-in-out
}
#privacy-wrapper #privacy-icon .privacy-external-path {
fill: #909090
}
#privacy-page-loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
background-color: #fff;
opacity: 1;
pointer-events: none;
-webkit-transition: opacity .25s
}
#privacy-page-loading.loaded {
opacity: 0
}
#privacy-page-spinner-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center
}
#privacy-page-loading.loading svg.components__spinner {
-webkit-animation: rotator 1.4s linear infinite;
animation: rotator 1.4s linear infinite
}
#privacy-page-loading svg.components__spinner circle.path {
stroke-dasharray: 187;
stroke-dashoffset: 0;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center
}
#privacy-page-loading.loading svg.components__spinner circle.path {
-webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite
}
#privacy-wrapper #privacy-icon #privacy-external path {
stroke-width: 0
}
@media only screen and (min-device-width:768px) {
#privacy-back-button-container,
#privacy-icon {
-webkit-transform: scale(.5, .5);
transform: scale(.5, .5);
-webkit-transform-origin: left bottom;
transform-origin: left bottom
}
}
@media only screen and (min-device-width:768px) and (max-device-height:450px) and (orientation:landscape) {
#privacy-back-button-container,
#privacy-icon {
-webkit-transform: scale(1, 1);
transform: scale(1, 1)
}
}
@-webkit-keyframes rotator {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
to {
-webkit-transform: rotate(270deg);
transform: rotate(270deg)
}
}
@keyframes rotator {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
to {
-webkit-transform: rotate(270deg);
transform: rotate(270deg)
}
}
@-webkit-keyframes colors {
0% {
stroke: #4285f4
}
25% {
stroke: #de3e35
}
50% {
stroke: #f7c223
}
75% {
stroke: #1b9a59
}
to {
stroke: #4285f4
}
}
@keyframes colors {
0% {
stroke: #4285f4
}
25% {
stroke: #de3e35
}
50% {
stroke: #f7c223
}
75% {
stroke: #1b9a59
}
to {
stroke: #4285f4
}
}
@-webkit-keyframes dash {
0% {
stroke-dashoffset: 187
}
50% {
stroke-dashoffset: 46.75;
-webkit-transform: rotate(135deg);
transform: rotate(135deg)
}
to {
stroke-dashoffset: 187;
-webkit-transform: rotate(450deg);
transform: rotate(450deg)
}
}
@keyframes dash {
0% {
stroke-dashoffset: 187
}
50% {
stroke-dashoffset: 46.75;
-webkit-transform: rotate(135deg);
transform: rotate(135deg)
}
to {
stroke-dashoffset: 187;
-webkit-transform: rotate(450deg);
transform: rotate(450deg)
}
}
.endcard-view {
background-color: #000
}
#privacy-wrapper #privacy-page-wrapper {
position: absolute;
z-index: 5000001;
width: 100%;
height: 100%;
left: 0;
top: 0;
margin: 0;
border: 0;
padding: 0;
display: none;
background: #fff;
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
z-index: 16000001
}
#privacy-wrapper #privacy-page {
height: 100%;
width: 100%;
margin: 0;
border: 0;
padding: 0
}
#privacy-wrapper #privacy-back-button-container {
position: absolute;
bottom: 2.5vmin;
right: 2.5vmin;
width: 7vmin;
height: 7vmin;
background: #00b17e;
padding: 4vmin;
border-radius: 100%;
display: none;
z-index: 16000002
}
#privacy-wrapper #privacy-icon #privacy-external {
width: 3vmin;
display: inline-block;
margin-left: 8.7vmin;
margin-top: -.2vmin
}
#privacy-wrapper #privacy-icon svg {
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 4vmin;
width: 5vmin;
-webkit-tap-highlight-color: transparent
}
#privacy-wrapper #privacy-icon svg path {
fill: rgba(190, 190, 190, .5);
stroke: rgba(0, 0, 0, .25);
stroke-width: 8
}
#privacy-wrapper #privacy-icon.privacy-container {
-webkit-tap-highlight-color: transparent;
z-index: 5000000;
position: absolute;
left: 1vmin;
bottom: 1vmin;
font-size: 68px;
font-size: 10vmin;
color: #909090;
font-family: -apple-system, "Segoe UI", Roboto, "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 8vmin;
height: 8vmin;
background: #fff;
border-radius: 50%;
transition: background .5s ease-in-out, width .5s ease-in-out, border-radius .2s ease-in-out, border .5s ease-in-out;
background: rgba(255, 255, 255, 0);
overflow: hidden;
border: .25vmin solid transparent
}
#privacy-wrapper #privacy-icon.privacy-container span {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color: #909090;
font-size: 12px;
font-size: 3vmin;
left: 8vmin;
white-space: nowrap
}
#privacy-wrapper #privacy-icon.privacy-extended {
background: #fff;
width: 26vmin;
border-radius: 5vmin 5vmin 5vmin 5vmin;
border: .25vmin solid rgba(0, 0, 0, .1)
}
#privacy-wrapper #privacy-icon.privacy-reverse {
transition: background .5s .5s ease-in-out, width .5s ease-in-out, border-radius .25s .2s ease-in-out, border .5s .5s ease-in-out
}
#privacy-wrapper #privacy-icon .privacy-external-path {
fill: #909090
}
#privacy-page-loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
background-color: #fff;
opacity: 1;
pointer-events: none;
-webkit-transition: opacity .25s
}
#privacy-page-loading.loaded {
opacity: 0
}
#privacy-page-spinner-wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
text-align: center
}
#privacy-page-loading.loading svg.components__spinner {
-webkit-animation: rotator 1.4s linear infinite;
animation: rotator 1.4s linear infinite
}
#privacy-page-loading svg.components__spinner circle.path {
stroke-dasharray: 187;
stroke-dashoffset: 0;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center
}
#privacy-page-loading.loading svg.components__spinner circle.path {
-webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite
}
#privacy-wrapper #privacy-icon #privacy-external path {
stroke-width: 0
}
@media only screen and (min-device-width:768px) {
#privacy-back-button-container,
#privacy-icon {
-webkit-transform: scale(.5, .5);
transform: scale(.5, .5);
-webkit-transform-origin: left bottom;
transform-origin: left bottom
}
}
@media only screen and (min-device-width:768px) and (max-device-height:450px) and (orientation:landscape) {
#privacy-back-button-container,
#privacy-icon {
-webkit-transform: scale(1, 1);
transform: scale(1, 1)
}
}
@-webkit-keyframes rotator {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
to {
-webkit-transform: rotate(270deg);
transform: rotate(270deg)
}
}
@keyframes rotator {
0% {
-webkit-transform: rotate(0);
transform: rotate(0)
}
to {
-webkit-transform: rotate(270deg);
transform: rotate(270deg)
}
}
@-webkit-keyframes colors {
0% {
stroke: #4285f4
}
25% {
stroke: #de3e35
}
50% {
stroke: #f7c223
}
75% {
stroke: #1b9a59
}
to {
stroke: #4285f4
}
}
@keyframes colors {
0% {
stroke: #4285f4
}
25% {
stroke: #de3e35
}
50% {
stroke: #f7c223
}
75% {
stroke: #1b9a59
}
to {
stroke: #4285f4
}
}
@-webkit-keyframes dash {
0% {
stroke-dashoffset: 187
}
50% {
stroke-dashoffset: 46.75;
-webkit-transform: rotate(135deg);
transform: rotate(135deg)
}
to {
stroke-dashoffset: 187;
-webkit-transform: rotate(450deg);
transform: rotate(450deg)
}
}
@keyframes dash {
0% {
stroke-dashoffset: 187
}
50% {
stroke-dashoffset: 46.75;
-webkit-transform: rotate(135deg);
transform: rotate(135deg)
}
to {
stroke-dashoffset: 187;
-webkit-transform: rotate(450deg);
transform: rotate(450deg)
}
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block
}
body {
line-height: 1
}
ol,
ul {
list-style: none
}
blockquote,
q {
quotes: none
}
blockquote:after,
blockquote:before,
q:after,
q:before {
content: '';
content: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
p {
font-family: -apple-system, "Segoe UI", Roboto, "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
}
html {
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
-webkit-font-smoothing: antialiased;
font-size: 1em
}
html a {
text-decoration: none
}
body {
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
background-color: #000
}
body>* {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent
}
#vungle-close {
opacity: 1;
-webkit-transition: opacity .35s
}
#vungle-close.hide {
opacity: 0;
pointer-events: none
}
#vungle-ad-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto
}
#vungle-ad {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto
}
#video.hide {
display: none
}
#vungle-vid {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
width: 100%;
font-size: 0
}
#vungle-wrap {
display: flex;
flex-flow: column;
height: 100%
}
#vungle-wrap.video-inline #vungle-vid {
flex: 0 1 auto;
position: initial;
transform: none;
top: initial;
left: initial
}
#vungle-wrap.video-inline #vungle-ad {
flex: 1 1 auto;
transform: none;
top: initial;
left: initial;
height: initial
}
#close-button-replacement,
#vungle-close {
opacity: 1;
-webkit-transition: opacity .35s
}
#close-button-replacement.hide,
#vungle-close.hide {
opacity: 0;
pointer-events: none
}
#close-button-replacement {
color: #fff;
background-color: rgba(0, 0, 0, .3);
font-family: -apple-system, "Segoe UI", Roboto, "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 10px 10px;
margin: 0;
text-align: center;
position: absolute;
right: 0;
left: 0;
top: 0;
z-index: -1
}
#vungle-header {
position: absolute;
top: 0;
right: 0;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
z-index: 10000000
}
#vungle-header a {
display: block;
padding: .8em .8em .5em 1.2em;
right: 0
}
body.windows #vungle-header a {
padding: .25em .25em .45em .45em
}
@media all and (min-width:900px) {
body.windows #vungle-header a {
padding: .5em .5em .5em .5em
}
}
#vungle-header a svg {
right: 0;
margin: 0;
padding: 0;
vertical-align: bottom;
height: 1.1em;
width: 1.1em
}
body.windows #vungle-header a svg {
height: 1em;
width: 1em;
margin-bottom: .2em;
margin-right: .1em
}
@media all and (min-width:900px) {
body.windows #vungle-header a svg {
height: 1.5em;
width: 1.5em;
margin-right: .3em
}
}
#vungle-header a:active {
opacity: .55
}
body.light #vungle-header #background-vungle-ad-close {
background: rgba(0, 0, 0, .3)
}
body.dark #vungle-header #background-vungle-ad-close {
background: rgba(255, 255, 255, .6)
}
body.android #vungle-header #background-vungle-ad-close,
body.ios #vungle-header #background-vungle-ad-close {
background: 0 0
}
body.windows #vungle-header #background-vungle-ad-close {
padding: .3em .6em .3em .6em
}
@media all and (min-width:900px) {
body.windows #vungle-header #background-vungle-ad-close {
padding: .5em .8em .5em .8em
}
}
#vungle-header #background-vungle-ad-close span {
display: none
}
body.light #vungle-header #background-vungle-ad-close span {
color: #e8e8e8
}
body.dark #vungle-header #background-vungle-ad-close span {
color: #000
}
body.windows #vungle-header #background-vungle-ad-close span {
display: inline-block;
font-family: -apple-system, "Segoe UI", Roboto, "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 1.2em;
line-height: 1.3em
}
@media all and (min-width:900px) {
body.windows #vungle-header #background-vungle-ad-close span {
font-size: 1.8em;
line-height: 1.2em
}
}
#vungle-header .svg-vungle-ad-close-icon {
fill: #000;
stroke: rgba(255, 255, 255, .6);
stroke-width: 14;
stroke-miterlimit: 10
}
body.light #vungle-header .svg-vungle-ad-close-icon {
fill: #e8e8e8;
stroke: rgba(0, 0, 0, .3)
}
body.dark #vungle-header .svg-vungle-ad-close-icon {
fill: #000;
stroke: rgba(255, 255, 255, .6)
}
body.windows #vungle-header .svg-vungle-ad-close-icon {
stroke: none
}
#vungle-header.left {
right: auto;
left: 0
}
#vungle-ad {
transition: opacity 20ms linear;
-webkit-transition: opacity 20ms linear;
position: relative
}
#vungle-ad.endcard,
#vungle-ad.video-endcard,
.endcard-view {
position: absolute;
margin: auto;
top: 0;
left: 0;
overflow: hidden;
height: 100%;
width: 100%
}
#vungle-ad-debug {
display: block;
position: absolute;
width: 100%;
height: 100%;
z-index: 99999;
top: 0;
left: 0;
bottom: 0;
right: 0;
pointer-events: none;
background-color: rgba(0, 0, 0, .3)
}
#vungle-ad-debug p {
text-align: center;
position: absolute;
width: 80%;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: -apple-system, "Segoe UI", Roboto, "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif
}
body.landscape #vungle-ad-debug p {
width: 60%
}
#vungle-ad-debug span {
display: block;
padding: .5em 1em;
background: rgba(100, 100, 100, .35);
color: #fff;
font-weight: 400;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
font-size: 3vw
}
@media (max-width:30em) {
#vungle-ad-debug span {
font-size: .9em
}
}
@media (min-width:36.66667em) {
#vungle-ad-debug span {
font-size: 1.1em
}
}
#vungle-ad-debug span.title {
font-size: 2.5vw;
background: rgba(0, 0, 0, .8)
}
@media (max-width:56em) {
#vungle-ad-debug span.title {
font-size: 1.4em
}
}
@media (min-width:68em) {
#vungle-ad-debug span.title {
font-size: 1.7em
}
}
#vungle-ad-debug span b {
font-weight: 600
}
#vungle-ad-debug span:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 5px
}
#vungle-ad-debug span:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px
}
#vungle-ad-debug span:nth-child(3) {
box-shadow: inset 0 11px 0 -10px rgba(0, 0, 0, .1), inset 0 -11px 0 -10px rgba(0, 0, 0, .1)
}
body.landscape #vungle-ad-debug span {
font-size: 2vw
}
@media (max-width:35em) {
body.landscape #vungle-ad-debug span {
font-size: .7em
}
}
@media (min-width:45em) {
body.landscape #vungle-ad-debug span {
font-size: .9em
}
}
body.landscape #vungle-ad-debug span.title {
font-size: 2vw
}
@media (max-width:75em) {
body.landscape #vungle-ad-debug span.title {
font-size: 1.5em
}
}
@media (min-width:90em) {
body.landscape #vungle-ad-debug span.title {
font-size: 1.8em
}
}
body.square #vungle-ad-debug span {
font-size: 2vw
}
@media (max-width:35em) {
body.square #vungle-ad-debug span {
font-size: .7em
}
}
@media (min-width:45em) {
body.square #vungle-ad-debug span {
font-size: .9em
}
}
body.square #vungle-ad-debug span.title {
font-size: 2vw
}
@media (max-width:75em) {
body.square #vungle-ad-debug span.title {
font-size: 1.5em
}
}
@media (min-width:90em) {
body.square #vungle-ad-debug span.title {
font-size: 1.8em
}
}
body.square #vungle-ad-debug span.title {
background-color: rgba(113, 127, 155, .65)
}
body.portrait-xs #vungle-ad-debug span.title {
background-color: rgba(215, 129, 106, .65)
}
body.portrait-s #vungle-ad-debug span.title {
background-color: rgba(222, 151, 133, .65)
}
body.portrait-m #vungle-ad-debug span.title {
background-color: rgba(229, 174, 160, .65)
}
body.portrait-l #vungle-ad-debug span.title {
background-color: rgba(236, 197, 187, .65)
}
body.portrait-xl #vungle-ad-debug span.title {
background-color: rgba(255, 220, 214, .65)
}
body.landscape-xs #vungle-ad-debug span.title {
background-color: rgba(126, 145, 111, .65)
}
body.landscape-s #vungle-ad-debug span.title {
background-color: rgba(158, 180, 139, .65)
}
body.landscape-m #vungle-ad-debug span.title {
background-color: rgba(180, 203, 161, .65)
}
body.landscape-l #vungle-ad-debug span.title {
background-color: rgba(195, 213, 180, .65)
}
body.landscape-xl #vungle-ad-debug span.title {
background-color: rgba(210, 223, 198, .65)
}
#vungle-ad-debug.oob {
background-color: rgba(255, 0, 0, .4)
}
#vungle-ad-debug.oob span.title {
background-color: rgba(255, 0, 0, .65) !important
}
#vungle-ad-debug.oob p {
color: #fff;
font-weight: 700
}
</style>
</head>
<body id="vungle-ad-container">
<div id="vungle-header">
<p class="hide" id="close-button-replacement"></p>
<a id="vungle-close" class="hide" href="javascript:void(0)" onclick="window.callSDK('close')">
<!-- CLOSE ICON -->
<div id="background-vungle-ad-close">
<svg version="1.1" id="svg-vungle-ad-close" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 321.2 321"
style="enable-background:new 0 0 321.2 321;" xml:space="preserve">
<g>
<g id="svg-vungle-ad-close-icon-layer-1">
<g id="svg-vungle-ad-close-icon-layer-close">
<g>
<polygon class="svg-vungle-ad-close-icon" points="280.8,309.5 161,189.8 40.4,309.5 11.6,280.8 132.4,160 11.6,40.3 40.4,11.5 161,131.3 280.8,11.5
309.5,40.3 189.8,160 309.5,280.8 " />
</g>
</g>
</g>
</g>
</svg>
</div>
</a>
</div>
<div id="vungle-wrap">
<div id="vungle-ad">
<div class="endcard-view">
<object id="ad-content" type="text/html" data="ad.html" frameborder="0"
style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></object>
</div>
</div>
</div>
<!-- PRIVACY START HTML -->
<div id="privacy-wrapper">
<div id="privacy-icon" class="privacy-container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 390 390" style="enable-background:new 0 0 390 390;" xml:space="preserve">
<g>
<path class="st0" d="M338.3,75.4c-59.4,0-104.9-17-143.3-54.4C156.5,58.4,111,75.4,51.7,75.4c0,97.4-20.2,236.9,143.3,293.6
C358.5,312.3,338.3,172.8,338.3,75.4z M195.5,269.5L195.5,269.5l-0.9,0h-64.1c0-46.9,41.2-46.8,50.3-59.1l1-5.6
c-12.8-6.5-21.9-22.2-21.9-40.5c0-24.2,15.7-43.7,35.1-43.7s35.1,19.6,35.1,43.7c0,18.2-8.9,33.8-21.6,40.4l1.2,6.3
c10,11.7,49.8,12.4,49.8,58.5H195.5z" />
</g>
</svg>
<span> Privacy
<svg id="privacy-external" version="1.1" x