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


/* For Large Screens */

@media only screen and (min-width: 1920px) {


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

    body {
        background-color:#000;
        margin:0 auto;
        
    }
    
    h2 {
        font-weight:600;
        border-bottom: 1px solid #FFF;
        font-size: 1.2em;
        text-align: center;
        text-transform: uppercase;
        padding-bottom: 0.5em;
    }
    
    .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 */

    div {text-align: center;}
    
    #titlebar {
        display: none !important;
    }
    
    .wide {
        width:100%;
        height: 100%;
        color:#FFFFFF;
        padding-bottom: 5%;
        padding-top: 0;
        
    }
    
    .narrow {
        width:100%;
        height: 100%;
        color:#FFFFFF;
        padding-bottom: 5%;
        padding-top: 0;
        
    }
    
    .curtain {
        
        width: 100vw;
        height: 100vh;
        color: #FFFFFF;
        background-color: #323232;
        font-style: italic;
        opacity: 1;
        display: table;
        line-height: 2vh;
        padding-top: 35vh;
        z-index: 14;
        
    }
    
    .story {
        width: 100vw;
        height: 15vh !important;
        background-color: #323232;
        color:#FFFFFF;
        display: table;
        
    }
    
    .space {
        height:50%;
        width: 100%;
        background-color: transparent;
        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: 0;
        width: 100vw;
        height: 100vh;
        color: #FFFFFF;
        border-bottom: 3px solid #756187;
        background-color: #666;
        z-index:-1;
        display: table;
        text-align: center;
        
    }
    
    .longtext {
        margin-left: 15%;
        margin-right: 15%;
        margin-top: 1%;
        margin-bottom: 3%;
        text-align: left;
        line-height: 2em;
        font-size: 1.2em;
        padding-top: 0.5em;
        padding-bottom: 2em;
        padding-left: 2em;
        padding-right: 2em;
        border: 3px solid #333;
        box-shadow: 6px 6px #333;
        
    }
    
    .longtext img {
        width: 100%;
        
    }
    
    .longtext h1 {
        font-size: 1.8em;
        text-align: center;
        background-color: rgba(0,0,0,0.5);
        color: #FFF;
        padding: 0.2em;
        text-transform: uppercase;
        margin-bottom: -0.2em;
        
    }
    
    #map {
        height: 100%;
        width: 100%;
        background-color: rgba(0, 184, 230);
        position: fixed;
        
    }
    
    .worldcard {
        width: 30%;
        height: 80%;
        border: 2px solid #FFF;
        box-shadow: 6px 6px rgba(0,0,0,0.5);
        padding: 1em;
        position: sticky;
        -webkit-position: sticky;
        top: 10%;
        text-align: left;
        font-size: 1em;
        line-height: 1.8em;
        
    }
    
    .worldtitle {
        background-color: rgba(0,0,0,0.6);
        color: #FFF;
        padding: 0.2em;
        font-size: 1.2em;
        border: 2px solid #FFF;
        margin-bottom: 1em;
        text-transform: uppercase;
    }
    
/* Text */

    .text {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        padding-left: 25vw;
        padding-right: 25vw;
        height: auto;
        font-size: 2vh;
        line-height: 4vh;

    }
    
    strong {
        
        font-weight: 600;
    }

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

    
    
/* Navigation */
    
    #mobileNavigation {
        display: none;
    }
    
    #navigation {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 0;
        left: 0;
        right: 0;
        font-weight: bold;
        text-align: center;
        font-size: 2vh;
        text-transform: uppercase;
        height: 5vh;
        width: 100vw;
        background-color:#323232;
        color:#FFF;
        border-bottom: 1px solid #a887b7;
        z-index: 10;
        display: table;
        text-align: center;
        
    }
    
    #navigation div {
        margin-right: 3em;
        margin-left: 3em;
        font-size: 1.2em;
        font-weight: bold;
        width: auto;
        height: 100%;
        display: inline-block;
        padding-top:0.5em;
        padding-bottom: 0.5em;
        padding-left: 1em;
        padding-right: 1em;
    }  
    
    #navigation a {
        color: #FFF;
        text-decoration: none;
    }
    
    #navigation a:hover {
        color: #cc99ff;
        
    }
    
    #navigation a:active {
        color: #cc99ff;
    }
    
    #navigation a:focus {
        color: #cc99ff;
    }
    
    .navcontainer {
        display: none !important;
    }
    
    .nolink {
        color: #cc99ff !important;
    }
    
    .backhome {
        position: fixed;
        top: 1vh;
        left: 2vh;
        z-index: 12;
        font-size: 2em;
        border: 0 !important;
        text-decoration: none !important;
        
    }
    
    .backhome a {
        color: #FFF !important;
        border: 0 !important;
        text-decoration: none !important;
    }
    
    .backhome a:hover {
        color: #cc99ff !important;
        border: 0 !important;
        text-decoration: none !important;
    }
    
    
    #charbuttons {
        float: left;
        position: fixed;
        top: 15%;
        left: 55vw;
        display: inline-block;
        padding: 0.5em;
        z-index: 10;
        
    }
    
    #charbuttons a {
        border-bottom: none;
    }
    
    #makhobutton {
        width: 1.5em;
        height: 1.5em;
        background-color: #cc5200;
        border-radius: 50%;
        border: 3px solid #444;
        clear: both;
        display: block;
        margin-bottom: 1em;
        
    }
    
    #makhobutton:hover {
        border: 3px solid #FFF;
    }
    
    #maddiebutton {
        width: 1.5em;
        height: 1.5em;
        background-color: #ffc34d;
        border-radius: 50%;
        border: 3px solid #444;
        clear: both;
        display: block;
        margin-bottom: 1em;
        color: transparent !important;
        
    }
    
    #maddiebutton:hover {
        border: 3px solid #FFF;
    }
    
    #hatubutton {
        width: 1.5em;
        height: 1.5em;
        background-color: #0099ff;
        border-radius: 50%;
        border: 3px solid #444;
        clear: both;
        display: block;
        margin-bottom: 1em;
        
    }
    
    #hatubutton:hover {
        border: 3px solid #FFF;
    }
    
    #aislinbutton {
        width: 1.5em;
        height: 1.5em;
        background-color: #00b300;
        border-radius: 50%;
        border: 3px solid #444;
        clear: both;
        display: block;
        margin-bottom: 1em;
        
    }
    
    #aislinbutton:hover {
        border: 3px solid #FFF;
    }
    
    #charlottebutton {
        width: 1.5em;
        height: 1.5em;
        background-color: #a64dff;
        border-radius: 50%;
        border: 3px solid #444;
        clear: both;
        display: block;
        margin-bottom: 1em;
        
    }
    
    #charlottebutton:hover {
        border: 3px solid #FFF;
    }
    
    #khiembutton {
        width: 1.5em;
        height: 1.5em;
        background-color: #cc0052;
        border-radius: 50%;
        border: 3px solid #444;
        clear: both;
        display: block;
        margin-bottom: 1em;
        
    }
    
    #khiembutton:hover {
        border: 3px solid #FFF;
    }
    
    #poguributton {
        width: 1.5em;
        height: 1.5em;
        background-color: #999;
        border-radius: 50%;
        border: 3px solid #444;
        clear: both;
        display: block;
        
    }
    
    #poguributton:hover {
        border: 3px solid #FFF;
    }

    
/* Parallax Scrolling */

    .img1 {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 15vh;
        height: 85vh;
        width: 100vw;
        z-index: 1;
        background-color: rgba(102, 80, 122,  0.98);
        background-color: rgb(102, 80, 122,  0.98);
        border-top: 1px solid #cc99ff;
    }
    
    .text1 {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 0;
        z-index: 1;
    }
    
    .img2 {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 15vh;
        height: 85vh;
        width: 100vw;
        background-color: rgba(179, 0, 71,  0.98);
        background-color: rgb(179, 0, 71,  0.98);
        border-top: 1px solid #ff4d94;
        z-index: 2;
        
    }
    
    .text2 {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 0;
        z-index: 3;
    }
    
    .img3 {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 15vh;
        height: 85vh;
        width: 100vw;
        z-index: 2;
        padding-top: 0;
        padding-bottom: 2em;
        background-color: rgba(0, 122, 204,  0.98);
        background-color: rgb(0, 122, 204,  0.98);
        border-top: 1px solid #66b3ff;
        
    }
    
    .text3 {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 0;
        z-index: 3;
        
    }
    
    .img4 {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 15vh;
        height: 85vh;
        width: 100vw;
        z-index: 4;
        background-color: rgba(204, 82, 0,  0.98);
        background-color: rgb(204, 82, 0,  0.98);
        border-top: 1px solid #ff8566;
        
    }
    
    .text4 {   
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 0;
        z-index: 4;
        
    }

    .img5 {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 0vh;
        height: 100vh;
        width: 100vw;
        z-index: 9;
        padding-top: 0em;
        margin-bottom: 0;
        width: 100vw;
        height: 100vh;
        background-color: #666;
        opacity: 1;
        
    }
    
    .backtotop {
        display: none;
    }
    
/* 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 3s ease-in 0s 1 normal;
    }
    
    .fadein2 {
        opacity: 0;
        animation: fadein2 2s ease-in 3s 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: 4em;
        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%;
        
    }
    
    
/* Characters */

    .chartitle {
        padding: 0.2em;
        color: #FFF;
        background-color: #000;
        border: 0px solid #FFF !important;
        width: 100%;
        height: auto;
        font-size: 1.3em;
        font-weight: 600;
        margin: 0 auto;
        margin-bottom: 1em;
        text-align: center;
        text-transform: uppercase;
        box-shadow: 4px 4px rgb(0,0,0,0.3);
        box-shadow: 4px 4px rgba(0,0,0,0.3);
        
    }
    
    #makhocard {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 9%;
        left 0;
        height: 60vh;
        width: 50vw;
        display: block;
        box-shadow: 8px 8px rgb(0,0,0,0.5);
        box-shadow: 8px 8px rgba(0,0,0,0.5);
        pointer-events: none;
        margin: 0 1.5%;
        transform: rotate(2deg) translate(1em, 1em);
        z-index: 1;
        background-color: rgb(181, 74, 2);
        
    }
    
    #makhoimg {
        float: left;
        margin-left: 2vw;
        margin-top: 4vh;
        display: inline-block;
        width: auto;
        height: auto;
        max-width: 25vw;
        max-height: 60vh;
        
    }
    
    #makhoimg img {
        width: auto;
        height: auto;
        max-width: 25vw;
        max-height: 55vh;
        margin-left: 0;
        display: inline-block;
    }
    
    #makhotext {
        float: left;
        display: inline-block;
        color: #FFF;
        text-align: left;
        padding-top: 4vh;
        margin-left: 5vw;
        width: 20vw;
        height: 55vh;
        overflow: auto;
        font-size: 1.5vh;
        font-weight: 300;
        line-height: 3vh; 
    }
    
    #maddiecard {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 10%;
        left 0;
        height: 60vh;
        width: 50vw;
        display: block;
        background-color: #ffc34d;
        box-shadow: 8px 8px rgb(0,0,0,0.5);
        box-shadow: 8px 8px rgba(0,0,0,0.5);
        margin: 0 2%;
        pointer-events: none;
        transform: rotate(-1deg) translate(0, 0);
        z-index: 2;
    }

    
    #maddieimg {
        float: left;
        margin-left: 2vw;
        margin-top: 4vh;
        display: inline-block;
        width: auto;
        height: auto;
        max-width: 20vw;
        max-height: 55vh;
        
    }
    
    #maddieimg img {
        width: auto;
        height: auto;
        max-width: 20vw;
        max-height: 55vh;
        margin-left: 0;
        display: inline-block;
    }
    
    #maddietext {
        float: left;
        display: inline-block;
        color: #222;
        text-align: left;
        padding-top: 4vh;
        margin-left: 5vw;
        width: 20vw;
        height: 55vh;
        overflow: auto;
        font-size: 1.5vh;
        font-weight: 300;
        line-height: 3vh; 
    }
    
    #hatucard {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 11%;
        left 0;
        height: 60vh;
        width: 50vw;
        display: block;
        background-color: rgb(7, 136, 222);
        box-shadow: 8px 8px rgb(0,0,0,0.5);
        box-shadow: 8px 8px rgba(0,0,0,0.5);
        margin: 0 2.5%;
        pointer-events: none;
        transform: rotate(1deg) translate(0, 1em);
        z-index: 3;
    }
    
    #hatuimg {
        float: left;
        margin-left: 2vw;
        margin-top: 4vh;
        display: inline-block;
        width: auto;
        height: auto;
        max-width: 25vw;
        max-height: 55vh;
        
    }
    
    #hatuimg img {
        width: auto;
        height: auto;
        max-width: 25vw;
        max-height: 55vh;
        display: inline-block;
    }
    
    #hatutext {
        float: left;
        display: inline-block;
        color: #FFF;
        text-align: left;
        padding-top: 4vh;
        margin-left: 5vw;
        width: 20vw;
        height: 55vh;
        overflow: auto;
        font-size: 1.5vh;
        font-weight: 300;
        line-height: 3vh; 
    }

    #aislincard {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 12%;
        left 0;
        height: 60vh;
        width: 50vw;
        display: block;
        background-color: rgb(2, 163, 2);
        box-shadow: 8px 8px rgb(0,0,0,0.5);
        box-shadow: 8px 8px rgba(0,0,0,0.5);
        margin: 0 3%;
        pointer-events: none;
        transform: rotate(-2deg) translate(0, 1em);
        z-index: 4;
    }
    
    #aislinimg {
        float: left;
        margin-left: 2vw;
        margin-top: 4vh;
        display: inline-block;
        width: auto;
        height: auto;
        max-width: 25vw;
        max-height: 60vh;
        
    }
    
    #aislinimg img {
        width: auto;
        height: auto;
        max-width: 25vw;
        max-height: 60vh;
        margin-left: 0;
        display: inline-block;
    }
    
    #aislintext {
        float: left;
        display: inline-block;
        color: #FFF;
        text-align: left;
        padding-top: 4vh;
        margin-left: 5vw;
        width: 20vw;
        height: 55vh;
        overflow: auto;
        font-size: 1.5vh;
        font-weight: 300;
        line-height: 3vh; 
    }
    
    #charlottecard {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 13%;
        left 0;
        height: 60vh;
        width: 50vw;
        display: block;
        background-color: #a64dff;
        box-shadow: 8px 8px rgb(0,0,0,0.5);
        box-shadow: 8px 8px rgba(0,0,0,0.5);
        margin: 0 3.5%;
        pointer-events: none;
        transform: rotate(2deg) translate(0, 0);
        z-index: 5;
        
    }
    
    #charlotteimg {
        float: left;
        margin-left: 2vw;
        margin-top: 4vh;
        display: inline-block;
        width: auto;
        height: auto;
        max-width: 25vw;
        max-height: 55vh;
        
    }
    
    #charlotteimg img {
        width: auto;
        height: auto;
        max-width: 25vw;
        max-height: 55vh;
        margin-left: 0;
        display: inline-block;
    }
    
    #charlottetext {
        float: left;
        display: inline-block;
        color: #FFF;
        text-align: left;
        padding-top: 4vh;
        margin-left: 5vw;
        width: 20vw;
        height: 55vh;
        overflow: auto;
        font-size: 1.5vh;
        font-weight: 300;
        line-height: 3vh; 
    }
    
    #khiemcard {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 14%;
        left 0;
        height: 60vh;
        width: 50vw;
        display: block;
        background-color: #cc0052;
        box-shadow: 8px 8px rgb(0,0,0,0.5);
        box-shadow: 8px 8px rgba(0,0,0,0.5);
        margin: 0 4%;
        pointer-events: none;
        transform: rotate(-1deg) translate(-1em, -0.2em);
        z-index: 6;
        
    }
    
    #khiemimg {
        float: left;
        margin-left: 2vw;
        margin-top: 4vh;
        display: inline-block;
        width: auto;
        height: auto;
        max-width: 20vw;
        max-height: 55vh;
        
    }
    
    #khiemimg img {
        width: auto;
        height: auto;
        max-width: 20vw;
        max-height: 55vh;
        margin-left: 0;
        display: inline-block;
    }
    
    #khiemtext {
        float: left;
        display: inline-block;
        color: #FFF;
        text-align: left;
        padding-top: 4vh;
        margin-left: 5vw;
        width: 20vw;
        height: 55vh;
        overflow: auto;
        font-size: 1.5vh;
        font-weight: 300;
        line-height: 3vh; 
    }
    
    #poguricard {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 15%;
        left 0;
        height: 60vh;
        width: 50vw;
        display: block;
        background-color: #333;
        box-shadow: 8px 8px rgb(0,0,0,0.5);
        box-shadow: 8px 8px rgba(0,0,0,0.5);
        margin: 0 4.5%;
        pointer-events: none;
        transform: rotate(2deg) translate(-1em, -0.5em);
        z-index: 7;
        
    }
    
    #poguriimg {
        float: left;
        margin-left: 2vw;
        margin-top: 4vh;
        display: inline-block;
        width: auto;
        height: auto;
        max-width: 20vw;
        max-height: 55vh;
        
    }
    
    #poguriimg img {
        width: auto;
        height: auto;
        max-width: 20vw;
        max-height: 55vh;
        margin-left: 0;
        display: inline-block;
    }
    
    #poguritext {
        float: left;
        display: inline-block;
        color: #FFF;
        text-align: left;
        padding-top: 4vh;
        margin-left: 5vw;
        width: 20vw;
        height: 55vh;
        overflow: auto;
        font-size: 1.5vh;
        font-weight: 300;
        line-height: 3vh; 
    }

    
/* Anchors */

    #makho {
        display: block;
        position: relative;
        top: -1px;
        visibility: hidden;
    }
    
    #maddie {
        display: block;
        position: relative;
        top: -1px;
        visibility: hidden;
    }
    
    #hatu {
        display: block;
        position: relative;
        top: -1px;
        visibility: hidden;
    }
    
    #aislin {
        display: block;
        position: relative;
        top: -1px;
        visibility: hidden;
    }
    
    #charlotte {
        display: block;
        position: relative;
        top: -1px;
        visibility: hidden;
    }
    
    #khiem {
        display: block;
        position: relative;
        top: -1px;
        visibility: hidden;
    }
    
    #poguri {
        display: block;
        position: relative;
        top: -1px;
        visibility: hidden;
    }
    

    
/* Miscellany */
    
    .textnumber {
        font-size: 2em;
        position: relative;
        left: 8%;
        top: 30%;
        border: 3px solid #FFF !important;
        border-radius: 50%;
        width: 1.2em;
        height: 1.2em;
        padding: 0.2em;
        float: left;
        background-color: #000;
        color: #FFF;
        
    }
    
    .scrolldown {
        position:fixed;
        bottom:10px;
        left:50%;
        text-align: center;
        color:#FFF;
        font-size:1.5em;
    }

    .scroll {
        text-align:center;
        font-size:0.2em !important;
        text-transform: uppercase;
        color:#FFF !important;
    }
    
    i {
        border: solid #FFF;
        border-width: 0 10px 10px 0;
        display: inline-block;
        padding: 15px;
    }
    
    .fa {
        border: 0 !important;
        font-size: 1.5vh;
    }

    .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 {
        position: relative;
        display: inline-block;
        
    }

    
    .tooltiptext {
        visibility: hidden;
        width: 100px;
        background-color: rgba(20, 20, 20, 0.8);
        color: #fff;
        text-align: center;
        border-radius: 3px;
        padding: 5px;
        position: absolute;
        z-index: 10;
        top: -5px;
        right: 180%;
        font-size: 1.2em;
        font-weight: 600;
        
    }

    .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 100%;
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: transparent transparent transparent rgba(20, 20, 20, 0.8);
    }
    
    .tooltip:hover .tooltiptext {
        visibility: visible;
        
    }
    
    .tagline {
        font-size: 4vh !important;
        line-height: 4vh; 
        font-style: italic;
        font-weight: 300;
        
    }
    
    .finaltext {
        margin-top: 20vh;
        font-size: 2.5vh;
        font-weight: 300;
        line-height: 4vh !important;
        color: #FFF;
    }

    

    
} /* End Large Screens */

/* HD Fix */

@media only screen and (max-width: 1280px) and (min-height: 800px) {
    
    .cardtext {
        font-size: 1.5vh !important;
        line-height: 3vh !important;
    }
    
    .card {
        height: 55vh !important;
    }
    
    #navigation {
        position: sticky;
        position: -webkit-sticky; /* Safari */
        top: 0;
        left: 0;
        right: 0;
        font-size: 1.5vh !important;
        height: 4vh !important;
        padding-top: 1vh !important;
        padding-bottom: 1vh !important;
        
    }
    
    .text {
        font-size: 2vh;
        line-height: 4vh;
    }
    
    #background img {
        height: 50vh !important;
    }
    
    .img5 img {
        height: 50vh !important;
    }

    
}