/*==========================
  TSUNAMI LOADING SCREEN
==========================*/

#tsunamiLoader{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    overflow:hidden;
    z-index:999999;
    display:none;
    background:linear-gradient(to bottom,#69d2ff 0%,#87ceeb 40%,#ffe9a8 100%);
}

/* Sky */

.sky{
    position:absolute;
    width:100%;
    height:100%;
}

/* Sun */

.sun{
    position:absolute;
    top:60px;
    right:120px;
    width:110px;
    height:110px;
    border-radius:50%;
    background:#FFD93D;
    box-shadow:0 0 80px #ffd93d;
    animation:sunGlow 3s infinite alternate;
}

/* Clouds */

.cloud{
    position:absolute;
    width:180px;
    height:60px;
    background:white;
    border-radius:100px;
    opacity:.95;
}

.cloud:before{
    content:'';
    position:absolute;
    width:70px;
    height:70px;
    background:white;
    border-radius:50%;
    left:20px;
    top:-25px;
}

.cloud:after{
    content:'';
    position:absolute;
    width:90px;
    height:90px;
    background:white;
    border-radius:50%;
    right:25px;
    top:-40px;
}

.cloud1{
    top:70px;
    left:-250px;
    animation:cloudMove 22s linear infinite;
}

.cloud2{
    top:150px;
    left:-400px;
    transform:scale(.8);
    animation:cloudMove 30s linear infinite;
}

/* Beach */

.beach{
    position:absolute;
    bottom:0;
    width:100%;
    height:220px;
    background:#f4d06f;
}

/* Sea */

.sea{
    position:absolute;
    bottom:150px;
    width:100%;
    height:220px;
    background:#0099cc;
}

/* Waves */

.wave{
    position:absolute;
    left:-100%;
    bottom:130px;
    width:200%;
    height:140px;
    background:
    radial-gradient(circle at 50% 0,#ffffff 18%,transparent 20%) repeat-x;
    background-size:120px 80px;
    animation:waveMove 6s linear infinite;
    opacity:.9;
}

/* Tsunami */

.tsunami{
    position:absolute;
    bottom:-20px;
    left:-40%;
    width:180%;
    height:420px;
    background:linear-gradient(#19c3ff,#0077b6);
    border-radius:45% 55% 0 0;
    transform:translateX(-100%);
    animation:tsunami 4s forwards;
}

/* Palm Trees */

.palm{
    position:absolute;
    bottom:150px;
    width:18px;
    height:170px;
    background:#6d4c41;
}

.palm.left{
    left:80px;
}

.palm.right{
    right:120px;
}

.leaf{
    position:absolute;
    width:90px;
    height:16px;
    background:#2e8b57;
    border-radius:30px;
    transform-origin:left center;
}

.l1{top:-10px;left:-70px;transform:rotate(-35deg);}
.l2{top:10px;left:-70px;transform:rotate(-10deg);}
.l3{top:25px;left:-65px;transform:rotate(15deg);}
.l4{top:40px;left:-60px;transform:rotate(35deg);}

/* Loading Text */

.loadingText{
    position:absolute;
    top:45%;
    width:100%;
    text-align:center;
    font-size:50px;
    color:white;
    font-weight:bold;
    text-shadow:0 0 25px black;
    animation:textPulse 1s infinite;
}

/*==================
Animations
===================*/

@keyframes cloudMove{

0%{
transform:translateX(0);
}

100%{
transform:translateX(1800px);
}

}

@keyframes waveMove{

0%{
transform:translateX(0);
}

100%{
transform:translateX(50%);
}

}

@keyframes tsunami{

0%{

transform:translateX(-100%) scaleY(.5);

}

50%{

transform:translateX(0) scaleY(1);

}

100%{

transform:translateX(40%) scaleY(1.15);

}

}

@keyframes textPulse{

0%,100%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

}

@keyframes sunGlow{

from{

box-shadow:0 0 40px #ffd93d;

}

to{

box-shadow:0 0 100px #ffd93d;

}

}