@font-face {
    font-family: smythe-regular;
    src: url(Smythe-Regular.ttf);
}
#calltoaction {
    font-size: 4em;
    top: 70%;
    left: 45%;
    margin-bottom: 30%;
    animation-name: linkappear;
    animation-delay: 8s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
.action {
    font-family: smythe-regular;
    text-shadow: 2px 2px 4px;
    text-decoration: none;
    color: #F09E65;
    z-index: 12;
    transform: translate3d(0, 0, 0);
    opacity: 0;
    position: fixed;
    text-align: center;
}
@keyframes linkappear {
    from {
        opacity: 0;
    } to {
        opacity: 1;
    }
}
.action:hover {
    cursor: pointer;
    color: white;
}


/*#close {
    font-size: 0.5em;
    bottom: 80%;
    left: 5%;
    position: fixed;
    opacity: 1;
}
figcaption {
    display: block;
    float: none;
    font-size: 0.5em;
    opacity: 1;
    font-family: smythe-regular;
    text-shadow: 2px 2px 4px;
    text-decoration: none;
    color: #F09E65;
    z-index: 12;
    transform: translate3d(0, 0, 0);
    position: fixed;
    text-align: center;

}
#closebutton {
    display: block;
    float: none;
    font-size: 3em;
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    opacity: 1;
    font-family: smythe-regular;
    text-shadow: 2px 2px 4px;
    text-decoration: none;
    color: #F09E65;
    z-index: 12;
    transform: translate3d(0, 0, 0);
    position: fixed;
    text-align: center;

}*/

#close {
    top: 5%;
    left: 5%;
    position: fixed;
    z-index: 12;
}
#closebutton {
    font-size: 5em;
    font-family: smythe-regular;
    text-shadow: 2px 2px 4px;
    text-decoration: none;
    color: #F09E65;
    z-index: 12;
    transform: translate3d(0, 0, 0);
    position: fixed;
    text-align: center;
    margin:0;
    padding:0;
}
#closebutton:hover {
    cursor: pointer;
    color: white;
}
#caption {
    display: block;
    float: none;
    font-size: 0.5em;
    opacity: 1;
    font-family: smythe-regular;
    text-shadow: 2px 2px 4px;
    text-decoration: none;
    color: #F09E65;
    z-index: 12;
    transform: translate3d(0, 0, 0);
    position: fixed;
    text-align: center;
    margin:0;
    padding:0;
}
#caption:hover {
    cursor: pointer;
    color: white;
}
/*div {
    width: 100vw;
    height: 100vh;
    position: relative;
}*/
#images {
    overflow: hidden;
}
#werewolf {
    opacity: 0;
    z-index: 5;
    bottom: 0;
    position: fixed;
    transform: translate3d(0, 0, 0);
    animation-name: characterappear;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-delay: 0.5s;
     overflow: hidden;
}
@keyframes characterappear {
    0% {
        opacity: 0;
        transform: scale3d(1, 1, 1)
    }
    50% {
        opacity: 0.8;
        transform: scale3d(1.25, 1.25, 1.25)
    }
    100% {
        opacity: 0;
        transform: scale3d(1.5, 1.5, 1.5)
    }
}
#skull {
    opacity: 0;
    z-index: 6;
    position: fixed;
    transform: translate3d(0, 0, 0);
    animation-name: characterappear;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-delay: 1.5s;
     overflow: hidden;
}
#bug {
    opacity: 0;
    z-index: 7;
    left: 30%;
    position: fixed;
    transform: translate3d(0, 0, 0);
    animation-name: characterappear;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-delay: 2.5s;
     overflow: hidden;
}
#fortuneteller {
    opacity: 0;
    z-index: 8;
    bottom: -5%;
    left: 10%;
    position: fixed;
    transform: translate3d(0, 0, 0);
    animation-name: characterappear;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-delay: 4.5s;
     overflow: hidden;
}
#sorceress {
    opacity: 0;
    z-index: 8;
    left: -2%;
    top: 30%;
    position: fixed;
    transform: translate3d(0, 0, 0);
    animation-name: characterappear;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-delay: 3.5s;
     overflow: hidden;
}

.landinganimation {
    display: block;
    clear:both;
}
#sglogo {
    z-index: 9;
    opacity: 0;
    width: 40%;
    position: fixed;
    transform: translate3d(0, 20%, 0);
    background-color: transparent;
    animation-name: titleappear;
    animation-duration: 1s;
    animation-delay: 7s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    display: block;
    float: none;
    clear: both;
    left: 30%;
    bottom: 35%;
}
@keyframes titleappear {
    0% {
        opacity: 0;
        transform: scale3d(1, 1, 1)
    }
    100% {
        opacity: 1;
        transform: scale3d(1.5, 1.5, 1.5)
    }
}
#gruelanimation {
    z-index: -1;
    transform: translate3d(0, 0, 0);
    width: 100vw;
    height: 100vh; 
    animation-name: gruelbubble;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.26,1.36,.98,.14);
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    will-change: transform; 
}
@keyframes gruelbubble {
    0% {
        background-image: url(gruelbg1.png);
    }
    25% {
        background-image: url(gruelbg2.png);
    }
    50% {
        background-image: url(gruelbg3.png);
    }
    75% {
        background-image: url(gruelbg4.png);
    }
    100% {
        background-image: url(gruelbg5.png);
    }
}
p {
    margin: 0;
    padding: 0;
    display: block;
    float: none;
}