:root {
  --bannerWidth: 300px;
  --bannerHeight: 250px;

  --logoWidth: 306px;
  --logoHeight: 84px;
  --logoLeft: 475px;
  --logoTop: 14px;
  
  --ctaWidth: 135px;
  --ctaHeight: 40px;
  --ctaLeft: 120px;
  --ctaTop: 158px;
  
  --punchlineWidth: 100%;
  --punchlineHeight: 100%;
  --punchlineLeft: 0;
  --punchlineTop: 0;  
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-tap-highlight-color:transparent
}

body {
    color: #fff;
    background: #fff;
    font-family: sans-serif;
    font-weight:900;
    font-size: 13px;
    line-height: normal;
    cursor: default;
}

#clicktag {
    position: absolute;
    width: var(--bannerWidth);
    height: var(--bannerHeight);
    left: 0;
    top: 0;
    cursor: pointer;
}

#banner {
	position: relative;
	width: 100%; 
	height: 100%; 
	left: 0; 
	top: 0; 
	overflow: hidden; 
	display: none;
	background: #000;
}

#border {
	border-width: 1px;
    border-color: #28528c;
    border-style: solid;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 99999;
}


#banner {
    background-color: #051924;
}

#overlay {
    z-index: 1000;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #051924;
    opacity: .55;
}

#overlay__blur {
    z-index: 1000;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
#blur1 {
    position: absolute;
    z-index: 2000;
    background-color: #051924;
    width: 100%;
    height: 200px;
    top: 0;
    filter: blur(30px);
    border-radius: 100px;  
}
#blur2 {
    position: absolute;
    z-index: 2000;
    background-color: #051924;
    width: 100%;
    height: 200px;
    top: 180px;
    filter: blur(30px);
    border-radius: 100px;
}
#blur3 {
    position: absolute;
    z-index: 2000;
    background-color: #051924;
    width: 100%;
    height: 200px;
    top: 350px;
    filter: blur(30px);  
    border-radius: 100px;  
}
#blur4 {
    position: absolute;
    z-index: 2000;
    background-color: #051924;
    width: 100%;
    height: 200px;
    top: 500px;
    filter: blur(30px);  
    border-radius: 100px;  
}

#legals {
    z-index: 800;
    position: absolute;
    background-image: url(../images/legals.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

#fire {
    z-index: 700;
    position: absolute;
    background-image: url(../images/fire.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 120%;
    height: 160px;
    left: 0;
    bottom: -60px;
    opacity: .5;
    filter: url('#turbulence') blur(2px);
}
#fire2 {
    z-index: 700;
    position: absolute;
    background-image: url(../images/fire.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 120%;
    height: 160px;
    left: 0;
    bottom: -60px;
    opacity: 0;
    filter: url('#turbulence2') blur(2px);
}

#particles-js {
    z-index: 750;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 120px;
    height: 100px;
    background-color: transparent;
    background-image: url('');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: .70;
}

#bg {
    position: absolute;
    background-image: url(../images/bg.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
#premierplan {
    position: absolute;
    background-image: url(../images/1erplan.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 400;
}
#island__wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
#island1 {
    z-index: 100;
    position: absolute;
    background-image: url(../images/island1.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
#island2 {
    position: absolute;
    background-image: url(../images/island2.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
#island-light {
    position: absolute;
    background-image: url(../images/island-light.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

#punchline {
    z-index: 800;
    position: absolute;
    background-image: url(../images/punchline.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: var(--punchlineWidth);
    height: var(--punchlineHeight);
    left: var(--punchlineLeft);
    top: var(--punchlineTop);
}

#cta__wrapper {
    width: var(--ctaWidth);
    height: var(--ctaHeight);
    position: absolute;
    z-index: 800;
    top: var(--ctaTop);
    left: var(--ctaLeft);
    overflow: hidden;    
    /*width: 190px;
    height: 60px;
    top: 447px;
    left: 55px;*/
}
#cta__txt__wrapper {
    width: 70%;
    height: 60%;
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
}
#cta__light {
    width: 15px;
    height: 100px;
    position: absolute;
    z-index: 100;
    top: -30px;
    left: -30px;
    background-color: #ffffff;
    transform: rotate(-20deg);
    transform-origin: center;
    filter: blur(5px);
    opacity: .6;
}
#cta__txt {
    width: var(--ctaWidth);
    height: var(--ctaHeight);
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    background-image: url(../images/cta_txt.png);
    background-size: contain;
    background-repeat: no-repeat;      
}
#cta__left {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}
#cta__img1 {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--ctaWidth);
    height: var(--ctaHeight);
    background-image: url(../images/cta-bg.png);
    background-size: contain;
    background-repeat: no-repeat;  
}
#cta__right {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
}
#cta__img2 {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--ctaWidth);
    height: var(--ctaHeight);
    background-image: url(../images/cta-bg.png);
    background-size: contain;
    background-repeat: no-repeat;  
}

#moogle-wrapper {
    z-index: 600;
    position: absolute;
    width: 55px;
    height: 101px;
    left: 252px;
    top: 8px;
}
#moogle {
    z-index: 600;
    position: absolute;
    background-image: url(../images/moogle.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
#moogle-aile {
    z-index: 590;
    position: absolute;
    background-image: url(../images/moogle-aile.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

/*#moogle {
    z-index: 600;
    position: absolute;
    background-image: url(../images/moogle.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 84px;
    height: 152px;
    left: 217px;
    top: 65px;
}
#moogle-aile {
    z-index: 600;
    position: absolute;
    background-image: url(../images/moogle-aile.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 84px;
    height: 152px;
    left: 217px;
    top: 65px;
}*/

#perso {
    z-index: 600;
    position: absolute;
    background-image: url(../images/perso.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

#logo__wrapper {
    z-index: 1500;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

#mask {
    position: absolute;
    z-index: 2000;
    background-color: #051924;
    width: 100%;
    height: 200px;
    top: 200px;
    filter: blur(30px);
}

#logo,
#logo2 {
    z-index: 1500;
    position: absolute;
    position: relative;
    background-image: url(../images/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 180px;
    height: 49px;
    left: 79px;
    top: 11px;
}
#logo2 {
    z-index: 500;
}