/* Stylesheet for UNTIL THE MONSTERS COME Ð untilthemonsters.com - by Kermit O*/


/* For Mobile */

@media only screen and (max-width: 1080px) {


/* Foundations */
    
    * {
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
    }

    body {
        background-color:#000;
        margin:0 auto;
        
    }
    
    h2 {
        font-weight:600;
        border-bottom: 2px solid #FFF;
        font-size: 1.2em;
        text-align: center;
        text-transform: uppercase;
        padding-bottom: 0.5em;
    }
    
    a {
        color: #FFF;
        text-decoration: none;
    }
    
    a:hover {
        color: #66507A;
        
    }
    
    a:focus {
        color: #66507A;
        
    }

    a:active {
        color: #66507A;
        
    }
   
    .text3 strong {
        color: #ff4d94;
    }
    
    .text4 strong {
        color: #ff8566;
    }
    
    .text2 strong {
        color: #66b3ff;
    }
    
    .text1 strong {
        color: #ab88cb;
    }
    
    .black strong {
        color: #222;
    }
    
    .violet {
        background: linear-gradient(90deg, #a64dff, #8c1aff, #7300e6);
        color: #FFF;
        border: 3px solid #FFF !important;
        
    }
    
    .red {
        border: 3px dashed #FFF !important;
        background: linear-gradient(to right, #ff0066, #cc0052, #99003d);
        color: #FFF;
    }
    
    .orange {
        background: linear-gradient(to right, #cc5200, #993d00, #662900);
        border: 3px dashed #FFF !important;
        color: #FFF;
    }
    
    .yellow {
        background: linear-gradient(to right, #ffc34d, #ffb31a);
        border: 3px dashed #000 !important;
        color: #000;
    }
    
    hr.out {
        border: 3px dashed #000;
        margin-left: 15%;
        margin-right: 15%;
        
    }
    


/* Divs */
    
    #titlebar {
        width: 100%;
        height: 2em;
        font-size: 3em;
        background-color: #000;
        color: #FFF;
        text-align: center;
        position: fixed;
        top: 0;
        left: 0;
        font-weight: 600;
        z-index: 2;
        text-transform: uppercase;
        
    }
    
    #titlebar div {
        margin-top: 0.3em;
    }

    
    
    .story {
        width: 100vw;
        height: 25vh;
        background-color: #323232;
        color: #FFFFFF;
        display: table;
        font-size: 1.5vh;
        line-height: 2vh;
        border-top: 1px solid #000;
        padding-left: 4vw;
        
    }
    
    .space {
        height:50%;
        width: 100%;
        z-index: 0;
        
    }
    
    .longspace {
        height: 150%;
        width: 100%;
        z-index: 0;
        
    }
    
    .start {
        height: 0.5em;
        width: 100%;
        background-color: #000;
        
    }
    
    .end {
        height: 1em;
        width: 100%;
        background-color: #66507A;
        border-top:2px solid #756187;
        border-bottom:2px solid #000;
        
    }
    
    #background {
        position:fixed;
        top: 0em;
        width:100%;
        height:100%;
        color:#FFFFFF;
        background-color:#666;
        padding-top: 20vh;
        z-index:-1;
        display: table;
        text-align: center;
        
    }
    
    
    .red img {
        width: 35% !important;
    }
    
    .orange img {
        width: 50% !important;
        margin-top: 2em;
    }
    
    .yellow img {
        width: 50% !important;
        margin-top: 2em;
        margin-left: -0.5em;
        padding-bottom: 2em;
    }
    
    .violet img {
        width: 100% !important;
    }
    
/* Text */
    
    .text {
        display: table-cell;
        vertical-align: middle;
        margin: 0 auto;
        font-size: 2.5vh !important;
        line-height: 5vh !important;
        padding-left: 2vw;
        padding-right: 2vw;
    }
    
    strong {
        font-weight: 900;
    }

/* Images */
    
    #background img {
        width: auto;
        height: auto;
        max-height: 60vh !important;
        display: table-cell;
        vertical-align: middle;
        margin: 0 auto;
    }
 
    
    .img1 img {
        width: auto;
        height: auto;
        max-height: 90vh;
        max-width: 90vw;
        margin: 0 auto;
    }
    
    .img2 img {
        width: auto;
        height: auto;
        max-height: 60vh;
        max-width: 80vw;
        opacity: 1 !important;
        margin: 0 auto;
    }
    
    .img3 img {
        width: auto;
        height: auto;
        max-height: 60vh;
        max-width: 80vw;
        opacity: 1 !important;
        margin: 0 auto;
    }
    
    .img4 img {
        width: auto;
        height: auto;
        max-height: 60vh;
        max-width: 80vw;
        opacity: 1 !important;
        margin: 0 auto;
    }
    
    .img5 img {
        width: auto;
        height: auto;
        max-height: 60vh;
        border: 0 !important;
        margin: 0 auto;
    }

    
/* Navigation */
    
    #navigation {
        display: none;
    }

    #mobileNavigation {
        width: 100%;
        height: 100% !important;
        padding-top: 3em;
        font-weight: bold;
        font-size: 2.5em;
        text-transform: uppercase;
        background-color: #7300e6;
        opacity: 0.95;
        z-index: 12 !important;
        position: fixed;
        top: 0;
        left: 0;
        display: none;
    }
    
    #mobileNavigation div {
        border-bottom: 1px solid transparent;
        border-top: 1px solid transparent;
        padding-left: 1.5em;
        padding-top: 0.5em;
        padding-bottom: 0.5em;
        width: 100%;
        font-size: 2em;
        margin: 0 auto;
        
    }
    
    #mobileNavigation div:hover {
        background-color: #000;
        color: #eeccff !important;
        border-bottom: 1px solid #FFF;
        border-top: 1px solid #FFF;
    }
    
    #mobileNavigation div:active {
        background-color: #000;
        color: #eeccff !important;
        border-bottom: 1px solid #FFF;
        border-top: 1px solid #FFF;
    }
    
    #mobileNavigation div:focus {
        background-color: #000;
        color: #eeccff !important;
        border-bottom: 1px solid #FFF;
        border-top: 1px solid #FFF;
    }
    
    #mobileNavigation a {
        color: #FFF;
    }
    
    #mobileNavigation a:hover {
        color: inherit;
    }
    
    #mobileNavigation a:active {
        color: inherit;
    }
    
    #mobileNavigation a:focus {
        color: inherit;
    }
    
    .navcontainer {
        display: block;
        position: fixed;
        top: 0;
        right: 1em;
        z-index: 13;
        padding: 1em;
        
    }

    .bar1, .bar2, .bar3 {
        width: 50px;
        height: 5px;
        background-color: #FFF;
        margin: 10px 0;
        transition: 0.5s;
    }

    .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-13px, 10px);
        transform: rotate(-45deg) translate(-13px, 10px);
    }

    .change .bar2 {opacity: 0;}

    .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px);
        transform: rotate(45deg) translate(-8px, -8px);
        
    }
    
/* Character Buttons */

    #charbuttons {
        position: fixed;
        top: 5em;
        text-align: center;
        display: block;
        padding-bottom: 0.5em;
        padding-top: 1em;
        z-index: 10;
        background-color: #000;
        width: 100%;
        
    }
    
    #charbuttons a {
        border-bottom: none;
    }
    
    #makhobutton {
        width: 3em;
        height: 3em;
        background-color: #cc5200;
        border-radius: 50%;
        border: 3px solid #444;
        display: inline-block;
        margin-right: 3em;
        
    }
    
    #makhobutton:hover {
        border: 2px solid #FFF;
    }
    
    #maddiebutton {
        width: 3em;
        height: 3em;
        background-color: #ffc34d;
        border-radius: 50%;
        border: 3px solid #444;
        display: inline-block;
        margin-right: 3em;
        
    }
    
    #maddiebutton:hover {
        border: 2px solid #FFF;
    }
    
    #hatubutton {
        width: 3em;
        height: 3em;
        background-color: #0099ff;
        border-radius: 50%;
        border: 3px solid #444;
        display: inline-block;
        margin-right: 3em;
        
    }
    
    #hatubutton:hover {
        border: 2px solid #FFF;
    }
    
    #aislinbutton {
        width: 3em;
        height: 3em;
        background-color: #00b300;
        border-radius: 50%;
        border: 3px solid #444;
        display: inline-block;
        margin-right: 3em;
        
    }
    
    #aislinbutton:hover {
        border: 2px solid #FFF;
    }
    
    #charlottebutton {
        width: 3em;
        height: 3em;
        background-color: #a64dff;
        border-radius: 50%;
        border: 3px solid #444;
        display: inline-block;
        margin-right: 3em;
        
    }
    
    #charlottebutton:hover {
        border: 2px solid #FFF;
    }
    
    #khiembutton {
        width: 3em;
        height: 3em;
        background-color: #cc0052;
        border-radius: 50%;
        border: 3px solid #444;
        display: inline-block;
        margin-right: 2em;
        
    }
    
    #khiembutton:hover {
        border: 2px solid #FFF;
    }
    
    #poguributton {
        width: 3em;
        height: 3em;
        background-color: #333;
        border-radius: 50%;
        border: 3px solid #444;
        display: inline-block;
        
    }
    
    #poguributton:hover {
        border: 2px solid #FFF;
    }

/* Characters */

    .chartitle {
        padding: 0;
        color: inherit;
        width: 100%;
        height: auto;
        font-size: 1.2em;
        margin: 0 auto;
        margin-bottom: 1em;
        text-align: center;
        text-transform: uppercase;
        font-weight: 600;
        border: 0px solid #FFF;
        
    }
    
    #makhocard {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 11%;
        left 0;
        height: 70vh !important;
        width: 90vw;
        display: block;
        background-color: #993d00;
        box-shadow: 16px 16px rgb(0,0,0,0.5);
        box-shadow: 16px 16px rgba(0,0,0,0.5);
        margin: 0 1.5%;
        transform: rotate(2deg) translate(1em, 3em);
        z-index: 1;
    }
    
    #makhoimg {
        float: left;
        margin-left: 2vw;
        margin-top: 10%;
        margin-right: 2em;
        display: inline-block;
        width: auto;
        height: auto;
        max-width: 30vw;
        max-height: 65vh;
        
    }
    
    #makhoimg img {
        width: auto;
        height: auto;
        max-width: 30vw;
        max-height: 65vh;
    }
    
    #makhotext {
        float: left;
        display: inline-block;
        color: #FFF;
        margin-left: 6vw;
        margin-top: 4vw;
        line-height: 2em;
        font-size: 1.5em;
        height: 65vh;
        width: 50vw;
        font-weight: 600;
        overflow: auto;
    }
    
    #maddiecard {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 12%;
        left 0%;
        height: 70vh !important;
        width: 90vw;
        display: block;
        background: linear-gradient(to right, #ffc34d, #ffb31a);
        border: 0px solid rgb(34, 34, 34);
        box-shadow: 16px 16px rgb(0,0,0,0.5);
        box-shadow: 16px 16px rgba(0,0,0,0.5);
        margin: 0 3%;
        transform: rotate(-2deg) translate(1em, 3em);
        z-index: 2;
        
    }
    
    #maddieimg {
        float: left;
        margin-left: 2vw;
        margin-top: 10%;
        margin-right: 2vw;
        display: inline-block;
        width: auto;
        height: auto;
        max-width: 30vw;
        max-height: 65vh;
        
    }
    
    #maddieimg img {
        width: auto;
        height: auto;
        max-width: 30vw;
        max-height: 65vh;
    }
    
    #maddietext {
        float: left;
        display: inline-block;
        color: #222;
        margin-left: 3vw;
        margin-top: 4vw;
        line-height: 2em;
        font-size: 1.5em;
        height: 65vh;
        width: 50vw;
        font-weight: 600;
        overflow: auto;
    }
    
    #maddietext .chartitle {
        color: #FFF;
    }
    
    #hatucard {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 13%;
        left 0%;
        height: 70vh !important;
        width: 90vw;
        display: block;
        background: linear-gradient(to right, #0099ff, #007acc);
        border: 0px solid rgb(34, 34, 34);
        box-shadow: 16px 16px rgb(0,0,0,0.5);
        box-shadow: 16px 16px rgba(0,0,0,0.5);
        margin: 0 4.5%;
        transform: rotate(1deg) translate(1em, 3em);
        z-index: 3;
        
    }
    
    #hatuimg {
        float: left;
        margin-left: 2vw;
        margin-top: 4vh;
        margin-right: 2vw;
        display: inline-block;
        width: auto;
        height: auto;
        max-width: 30vw;
        max-height: 65vh;
        
    }
    
    #hatuimg img {
        width: auto;
        height: auto;
        max-width: 30vw;
        max-height: 65vh;
    }
    
    #hatutext {
        float: left;
        display: inline-block;
        color: #FFF;
        margin-left: 3vw;
        margin-top: 4vw;
        line-height: 2em;
        font-size: 1.5em;
        height: 65vh;
        width: 45vw;
        font-weight: 600;
        overflow: auto;
    }

    
    #aislincard {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 14%;
        left 0%;
        height: 70vh !important;
        width: 90vw;
        display: block;
        background: linear-gradient(to right, #00b300, #008000);
        border: 0px solid rgb(34, 34, 34);
        box-shadow: 16px 16px rgb(0,0,0,0.5);
        box-shadow: 16px 16px rgba(0,0,0,0.5);
        margin: 0 6%;
        transform: rotate(-3deg) translate(-1.5em, 3em);
        z-index: 4;
    }
    
    #aislinimg {
        float: left;
        margin-left: 2vw;
        margin-top: 4vh;
        margin-right: 2vw;
        display: inline-block;
        width: auto;
        height: auto;
        max-width: 30vw;
        max-height: 65vh;
        
    }
    
    #aislinimg img {
        width: auto;
        height: auto;
        max-width: 30vw;
        max-height: 65vh;
    }
    
    #aislintext {
        float: left;
        display: inline-block;
        color: #FFF;
        margin-left: 3vw;
        margin-top: 4vw;
        line-height: 2em;
        font-size: 1.5em;
        height: 65vh;
        width: 45vw;
        font-weight: 600;
        overflow: auto;
    }
    
    #charlottecard {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 15%;
        left 0%;
        height: 70vh !important;
        width: 90vw;
        display: block;
        background: linear-gradient(to right, #a64dff, #8c1aff);
        border: 0px solid rgb(34, 34, 34);
        box-shadow: 16px 16px rgb(0,0,0,0.5);
        box-shadow: 16px 16px rgba(0,0,0,0.5);
        margin: 0 4.5%;
        transform: rotate(0) translate(0, 3em);
        z-index: 5;
    }
    
    #charlotteimg {
        float: left;
        margin-left: 2vw;
        margin-top: 4vh;
        margin-right: 2vw;
        display: inline-block;
        width: auto;
        height: auto;
        max-width: 30vw;
        max-height: 65vh;
        
    }
    
    #charlotteimg img {
        width: auto;
        height: auto;
        max-width: 30vw;
        max-height: 65vh;
    }
    
    #charlottetext {
        float: left;
        display: inline-block;
        color: #FFF;
        margin-left: 3vw;
        margin-top: 4vw;
        line-height: 2em;
        font-size: 1.5em;
        height: 65vh;
        width: 45vw;
        font-weight: 600;
        overflow: auto;
    }
    
    #khiemcard {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 16%;
        left 0%;
        height: 70vh !important;
        width: 90vw;
        display: block;
        background: linear-gradient(to right, #ff0066, #cc0052, #99003d);
        border: 0px solid rgb(34, 34, 34);
        box-shadow: 16px 16px rgb(0,0,0,0.5);
        box-shadow: 16px 16px rgba(0,0,0,0.5);
        margin: 0 3%;
        transform: rotate(2deg) translate(1em, 4em);
        z-index: 6;
    }
    
    #khiemimg {
        float: left;
        margin-left: 2vw;
        margin-top: 4vh;
        margin-right: 2vw;
        display: inline-block;
        width: auto;
        height: auto;
        max-width: 25vw;
        max-height: 65vh;
        
    }
    
    #khiemimg img {
        width: auto;
        height: auto;
        max-width: 25vw;
        max-height: 65vh;
    }
    
    #khiemtext {
        float: left;
        display: inline-block;
        color: #FFF;
        margin-left: 3vw;
        margin-top: 4vw;
        line-height: 2em;
        font-size: 1.5em;
        height: 65vh;
        width: 45vw;
        font-weight: 600;
        overflow: auto;
    }
    
    #poguricard {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 17%;
        left 0%;
        height: 70vh !important;
        width: 90vw;
        display: block;
        background-color: #333;
        border: 0px solid rgb(34, 34, 34);
        box-shadow: 16px 16px rgb(0,0,0,0.5);
        box-shadow: 16px 16px rgba(0,0,0,0.5);
        margin: 0 1.5%;
        transform: rotate(-2deg) translate(2em, 3em);
        z-index: 7;
    }
    
    #poguriimg {
        float: left;
        margin-left: 2vw;
        margin-top: 4vh;
        margin-right: 2vw;
        display: inline-block;
        width: auto;
        height: auto;
        max-width: 35vw;
        max-height: 70vh;
        
    }
    
    #poguriimg img {
        width: auto;
        height: auto;
        max-width: 35vw;
        max-height: 70vh;
    }
    
    #poguritext {
        float: left;
        display: inline-block;
        color: #FFF;
        margin-left: 3vw;
        margin-top: 4vw;
        line-height: 2em;
        font-size: 1.5em;
        height: 65vh;
        width: 45vw;
        font-weight: 600;
        overflow: auto;
    }
    
/* Parallax Scrolling */

    .img1 {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 25vh;
        height: 75vh;
        width: 100vw;
        z-index: 1;
        background-color: rgba(102, 80, 122,  0.98);
        background-color: rgb(102, 80, 122,  0.98);
        margin: 0 auto;
        text-align: center;
        border-top: 1px solid #cc99ff;
        
    }
    
    .text1 {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 0;
        z-index: 1;
        
    }

    

    .text2 {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 0;
        z-index: 3;
    }
    
    
    .img2 {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 25vh;
        height: 75vh;
        width: 100vw;
        z-index: 2;
        background-color: rgba(179, 0, 71,  0.98);
        background-color: rgb(179, 0, 71,  0.98);
        margin: 0 auto;
        text-align: center;
        
    }
    
    .text3 {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 0;
        z-index: 2;
        
    }
    
    .img3 {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 25vh;
        height: 75vh;
        width: 100vw;
        z-index: 3;
        background-color: rgba(0, 122, 204,  0.98);
        background-color: rgb(0, 122, 204,  0.98);
        margin: 0 auto;
        text-align: center;
        
    }
    
    .text4 {   
        position: sticky !important;
        position: -webkit-sticky !important; /* Safari */
        top: 0;
        z-index: 4;
        
    }
    
    .img4 {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 25vh;
        height: 75vh;
        width: 100vw;
        z-index: 4;
        background-color: #cc5200;
        margin: 0 auto;
        text-align: center;
        
    }
    
    .img5 {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 0vh;
        height: 100vh;
        width: 100vw;
        z-index: 5;
        background-color: #666;
        margin: 0 auto;
        padding-top: 20vh;
        text-align: center;
    }
    
    
    .backtotop {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 90%;
        display: block;
        color: #FFF;
        z-index: 6;
        font-size: 2em;
        text-align: center;
        background-color: #000;
        width: 100%;
        height: 12%;
        padding-top: 0.1em;
        
    }
    
    .backtotop a {
        color: #FFF;
    }
    
/* Animations */

    @keyframes blink {
        from {opacity: 0;}
        to {opacity: 1;}
    }
    
    .blink {
        opacity: 0;
        animation: blink 0.6s linear 5s 20 alternate;
    }
    
    @keyframes fadein1 {
        from {opacity: 0;}
        to {opacity: 1;}
    }
    
    @keyframes fadein2 {
        from {opacity: 0;}
        to {opacity: 1;}
    }
    
   .fadein1 {
        opacity: 1;
        animation: fadein1 2s ease-in 0s 1 normal;
    }
    
    .fadein2 {
        opacity: 0;
        animation: fadein2 2s ease-in 2s 1 normal;
        animation-fill-mode: forwards;
        
    }
    
    @keyframes bounce {
        0% {opacity:0; bottom: 5%;}
        10% {opacity:0.1; bottom: 4.5%;}
        20% {opacity:0.2; bottom: 4%;}
        30% {opacity:0.3; bottom: 3.5%;}
        40% {opacity:0.4; bottom: 3%;}
        50% {opacity:0.5; bottom: 2.5%;}
        60% {opacity:0.6; bottom: 2%;}
        70% {opacity:0.7; bottom: 1.5%;}
        80% {opacity:0.8; bottom: 1%;}
        90% {opacity:0.9; bottom: 0.5%;}
        100% {opacity:1; bottom: 0;}
    }
    
    .downarrow {
        font-size: 6em;
        color: #FFF;
        width: 1.2em;
        height: 1.2em;
        padding: 0.2em;
        z-index: 10;
        position: fixed;
        left: 45%;
        bottom: 10%;
        animation: bounce 0.5s linear 12s 15 alternate;
        opacity: 0;
        background-color; #000;
        border-radius: 50%;
        
    }
    
    
    
/* Miscellany */
    
    .textnumber {
        font-size: 2em;
        position: relative;
        left: 8%;
        top: 20%;
        border: 3px solid #FFF !important;
        border-radius: 50%;
        width: 1.2em;
        height: 1.2em;
        padding: 0.2em;
        float: left;
        background-color: #000;
        color: #FFF;
        display: none;
        
    }
    
    .scrolldown {
        position: fixed;
        bottom: 0;
        left: 50%;
        text-align: center;
        color: #FFF;
        font-size: 8em;
        z-index: 12 !important;
    }
    
    .scroll {
        text-align:center;
        font-size:0.5em !important;
        text-transform: uppercase;
        color:#FFF !important;
    }
    
    i {
          border: solid #FFF;
          border-width: 0 5px 5px 0;
          display: inline-block;
          padding: 2px;
          width: 30px;
          height: 30px;
    }

    .right {
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
    }

    .left {
            transform: rotate(135deg);
            -webkit-transform: rotate(135deg);
    }

    .up {
            transform: rotate(-135deg);
            -webkit-transform: rotate(-135deg);
    }

    .down {
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
    }
    
    .tooltip {
        display: none;
        
    }

    
    .tooltiptext {
        display: none;
        
    }

    .tooltip .tooltiptext::after {
        display: none;
    }
    
    .tooltip:hover .tooltiptext {
        display: none;
        
    }
    
    .tagline {
        font-size: 6vw !important;
        line-height: 6vh !important; 
        font-style: italic;
        font-weight: normal;
        margin-top: 30vh;
        
    }
    
    .curtain {
        width: 100vw;
        height: 100vh;
        color: #FFFFFF;
        background-color: #222;
        font-style: italic;
        opacity: 1;
        display: table;
        z-index: 14 !important;
        text-align: center;
        padding: 2vw;
    }
    
    .finaltext {
        margin-top: 10vh;
        font-size: 2.5vh;
        font-weight: 300;
        line-height: 4vh !important;
        color: #FFF;
    }
    

    
} /* End Mobile */