body, html {
    margin:0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    
}

h1 {
    text-shadow: 0 0 8px #ffffff;
    color: white;
    animation-name: Neon1;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    font-size: small;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

h2 {
    text-shadow: 0 0 8px #ffffff;
    color: white;
    text-align: center;
    animation-name: Neon1;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    font-size: x-large;
    font-family: Arial, Helvetica, sans-serif;
}
      
@keyframes Neon1 {
    0% {text-shadow: 0 0 8px #ffffff}
    80% {text-shadow: 0 0 20px #ffffff}
    100% {text-shadow: 0 0 8px #ffffff}
} 

#popUp {
    position: absolute;
    /*background-color: blue;*/
    background-image: linear-gradient(blue, rgb(8,12,29));
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25%;
    height: auto;
    border-radius: 10px;
    z-index: 99;
    opacity: 0;
    transition: opacity 3s;
    /*animation-name: fadePopUp;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-delay: 10s;*/
    padding:1%;
    box-shadow: 5.1px 10.2px 10.2px hsl(0deg 0% 0% / 0.34);
}

#tryAgain {
    position: absolute;
    background-image: linear-gradient(blue, rgb(8,12,29));
    top: 80%;
    left: 50%;
    transform: translatex(-50%);
    width: 5%;
    height: auto;
    border-radius: 10px;
    z-index: 99;
    display: hidden;
    transition: opacity 3s;
    box-shadow: 5.1px 10.2px 10.2px hsl(0deg 0% 0% / 0.34);
    pointer-events: none;
}

#infoPatient {
    position: absolute;
    z-index: 97;
    width:20%;
    height: auto;
    bottom: 15%;
    left:10%;
    /*transition: opacity 3s; de-comment this once u add script*/
    pointer-events: none; 
}

#BlackCover {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -99;
    background-color: black;
    opacity: 0.7;
    overflow: hidden;
    /*animation-name: fadePopUp;
    animation-duration: 5s;
    animation-iteration-count: 1;
    animation-delay: 2s;*/
}

#fadeOut {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index: -99;
    background-color: black;
    opacity: 0;
    transition: opacity 3s;
}

#bg {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -20;
    overflow: hidden;
}

/*#hoverBG {
    position: absolute;
    z-index: 2;
    opacity: 0;
}*/

#hotspot1 {
    position: absolute;
    height: 17%;
    top:0%;
    left:0%;
    width: 28%;
    opacity: 0;
    z-index: 13;
}

#hotspot2 {
    position: absolute;
    height: 24%;
    top:0%;
    left:0%;
    width: 100%;
    opacity: 0;
    z-index: 7;
}

#hotspot3 {
    position: absolute;
    height: 22%;
    top:0%;
    left:0%;
    width: 100%;
    opacity: 0;
    z-index: 8;
}

#hotspot4 {
    position: absolute;
    height: 19%;
    top:0%;
    left:0%;
    width: 100%;
    opacity: 0;
    z-index: 11;
}

#hotspot5 {
    position: absolute;
    height: 15%;
    top:0%;
    left:0%;
    width: 100%;
    opacity: 0;
    z-index: 11;
}

#hotspot6 {
    position: absolute;
    height: 11%;
    top:0%;
    left:0%;
    width: 100%;
    opacity: 0;
    z-index: 13;
}

#hotspot7 {
    position: absolute;
    height: 9%;
    top:0%;
    left:0%;
    width: 100%;
    opacity: 0;
    z-index: 14;
}

#hotspot8 {
    position: absolute;
    height: 8%;
    top:0%;
    left:0%;
    width: 100%;
    opacity: 0;
    z-index: 15;
}

#hotspot9 {
    position: absolute;
    height: 8%;
    top:0%;
    right:3px;
    width: 39%;
    opacity: 0;
    z-index: 19;
}

#hotspot10 {
    position: absolute;
    height: 6%;
    top:0%;
    width: 100%;
    opacity: 0;
    z-index: 16;
}

#hotspot11 {
    position: absolute;
    height: 7%;
    top:0%;
    bottom:3px;
    right:3px;
    width: 42%;
    opacity: 0;
    z-index: 18;
}

#hotspot12 {
    position: absolute;
    height: 6%;
    top:0%;
    right:0px;
    width: 44%;
    opacity: 0;
    z-index: 17;
}

#hotspot13 {
    position: absolute;
    height: 29%;
    top:0%;
    right:0%;
    width: 100%;
    opacity: 0;
    z-index: 2;
}

#hotspot14 {
    position: absolute;
    height: 34%;
    top:0%;
    left:0%;
    width: 57%;
    opacity: 0;
    z-index: 5;
}

#hotspot15 {
    position: absolute;
    height: 42%;
    top:0%;
    left:0%;
    width: 47%;
    opacity: 0;
    z-index: 9; /*no se alinea bien, checar*/
}

#hotspot16 {
    position: absolute;
    height: 49%;
    top:0%;
    left:0%;
    width: 36%;
    opacity: 0;
    z-index: 9;
}

#hotspot17 {
    position: absolute;
    height: 52%;
    top:0%;
    left:0%;
    width: 59%;
    opacity: 0;
    z-index: 4;/*tampoco funciona checar otra vez*/
}

#hotspot18 {
    position: absolute;
    height: 13%;
    top:49%;
    left:49%;
    width: 7%;
    opacity: 0;
    z-index: 45; /*no funciona*/
}

#hotspot19 {
    position: absolute;
    height: 74%;
    top:0%;
    left:0%;
    width: 41%;
    opacity: 0;
    z-index: 6;
}

#hotspot20 {
    position: absolute;
    height: 83%;
    top:0%;
    left:0%;
    width: 70%;
    opacity: 0;
    z-index: -10;
}

#hotspot21 {
    position: absolute;
    height: 90%;
    top:0%;
    left:0%;
    width: 52%;
    opacity: 0;
    z-index: 2;
}

#hotspot1:hover {
    opacity: 1;
    cursor: pointer;
}

#hotspot2:hover {
    opacity: 1;
    cursor: pointer;
}

#hotspot3:hover {
    opacity: 1;
    cursor: pointer;
}

#hotspot4:hover {
    opacity: 1;
    cursor: pointer;
}

#hotspot5:hover {
    opacity: 1;
    cursor: pointer;
}

#hotspot6:hover {
    opacity: 1;
    cursor: pointer;
}

#hotspot7:hover {
    opacity: 1;
    cursor: pointer;
}

#hotspot8:hover {
    opacity: 1;
    cursor: pointer;
}

#hotspot9:hover {
    opacity: 1;
    cursor: pointer;
}

#hotspot10:hover {
    opacity: 1;
    cursor: pointer;
}

#hotspot11:hover {
    opacity: 1;
    cursor: pointer;
}

#hotspot12:hover {
    opacity: 1;
    cursor: pointer;
}

#hotspot13:hover {
    opacity: 1;
    cursor: pointer;
}

#hotspot14:hover {
    opacity: 1;
    cursor: pointer;
}

#hotspot15:hover {
    opacity: 1;
    cursor: pointer;
}

#hotspot16:hover {
    opacity: 1;
    cursor: pointer;
}

#hotspot17:hover {
    opacity: 1;
    cursor: pointer;
}

#hotspot18:hover {
    opacity: 1;
    cursor: pointer;
}

#hotspot19:hover {
    opacity: 1;
    cursor: pointer;
}

#hotspot20:hover {
    opacity: 1;
    cursor: pointer;
}

#hotspot21:hover {
    opacity: 1;
    cursor: pointer;
}


.stretch {
    width: 100%;
    height: 100%;
}

#ending1 {
    position: absolute;
    opacity: 0;
    transition: opacity 5s;
    width: auto;
    height: auto;
    padding:1%;
    top: 50%;
    left:50%;
    background-color: none;
    z-index: -99;
    overflow: hidden;
    transform: translate(-50%, -50%);
}

#ending2 {
    position: absolute;
    opacity: 0;
    transition: opacity 5s;
    width: auto;
    height: auto;
    padding:1%;
    top: 50%;
    left:50%;
    background-color: none;
    z-index: -99;
    overflow: hidden;
    transform: translate(-50%, -50%);
}

#ending3 {
    position: absolute;
    opacity: 0;
    transition: opacity 5s;
    width: auto;
    height: auto;
    padding:1%;
    top: 50%;
    left:50%;
    background-color: none;
    z-index: -99;
    overflow: hidden;
    transform: translate(-50%, -50%);
}

#ending4 {
    position: absolute;
    opacity: 0;
    transition: opacity 5s;
    width: auto;
    height: auto;
    padding:1%;
    top: 50%;
    left:50%;
    background-color: none;
    z-index: -99;
    overflow: hidden;
    transform: translate(-50%, -50%);
}

#ending5 {
    position: absolute;
    opacity: 0;
    transition: opacity 5s;
    width: auto;
    height: auto;
    padding:1%;
    top: 50%;
    left:50%;
    background-color: none;
    z-index: -99;
    overflow: hidden;
    transform: translate(-50%, -50%);
}

#ending6 {
    position: absolute;
    opacity: 0;
    transition: opacity 5s;
    width: auto;
    height: auto;
    padding:1%;
    top: 50%;
    left:50%;
    background-color: none;
    z-index: -99;
    overflow: hidden;
    transform: translate(-50%, -50%);
}

#ending7 {
    position: absolute;
    opacity: 0;
    transition: opacity 5s;
    width: auto;
    height: auto;
    padding:1%;
    top: 50%;
    left:50%;
    background-color: none;
    z-index: -99;
    overflow: hidden;
    transform: translate(-50%, -50%);
}

#ending8 {
    position: absolute;
    opacity: 0;
    transition: opacity 5s;
    width: auto;
    height: auto;
    padding:1%;
    top: 50%;
    left:50%;
    background-color: none;
    z-index: -99;
    overflow: hidden;
    transform: translate(-50%, -50%);
}

#ending9 {
    position: absolute;
    opacity: 0;
    transition: opacity 5s;
    width: auto;
    height: auto;
    padding:1%;
    top: 50%;
    left:50%;
    background-color: none;
    z-index: -99;
    overflow: hidden;
    transform: translate(-50%, -50%);
}

#ending10 {
    position: absolute;
    opacity: 0;
    transition: opacity 5s;
    width: auto;
    height: auto;
    padding:1%;
    top: 50%;
    left:50%;
    background-color: none;
    z-index: -99;
    overflow: hidden;
    transform: translate(-50%, -50%);
}

#ending11 {
    position: absolute;
    opacity: 0;
    transition: opacity 5s;
    width: auto;
    height: auto;
    padding:1%;
    top: 50%;
    left:50%;
    background-color: none;
    z-index: -99;
    overflow: hidden;
    transform: translate(-50%, -50%);
}

#ending12 {
    position: absolute;
    opacity: 0;
    transition: opacity 5s;
    width: auto;
    height: auto;
    padding:1%;
    top: 50%;
    left:50%;
    background-color: none;
    z-index: -99;
    overflow: hidden;
    transform: translate(-50%, -50%);
}

#ending13 {
    position: absolute;
    opacity: 0;
    transition: opacity 5s;
    width: auto;
    height: auto;
    padding:1%;
    top: 50%;
    left:50%;
    background-color: none;
    z-index: -99;
    overflow: hidden;
    transform: translate(-50%, -50%);
}

#ending14 {
    position: absolute;
    opacity: 0;
    transition: opacity 5s;
    width: auto;
    height: auto;
    padding:1%;
    top: 50%;
    left:50%;
    background-color: none;
    z-index: -99;
    overflow: hidden;
    transform: translate(-50%, -50%);
}

#ending15 {
    position: absolute;
    opacity: 0;
    transition: opacity 5s;
    width: auto;
    height: auto;
    padding:1%;
    top: 50%;
    left:50%;
    background-color: none;
    z-index: -99;
    overflow: hidden;
    transform: translate(-50%, -50%);
}

#ending16 {
    position: absolute;
    opacity: 0;
    transition: opacity 5s;
    width: auto;
    height: auto;
    padding:1%;
    top: 50%;
    left:50%;
    background-color: none;
    z-index: -99;
    overflow: hidden;
    transform: translate(-50%, -50%);
}

#ending17 {
    position: absolute;
    opacity: 0;
    transition: opacity 5s;
    width: auto;
    height: auto;
    padding:1%;
    top: 50%;
    left:50%;
    background-color: none;
    z-index: -99;
    overflow: hidden;
    transform: translate(-50%, -50%);
}

#ending18 {
    position: absolute;
    opacity: 0;
    transition: opacity 5s;
    width: auto;
    height: auto;
    padding:1%;
    top: 50%;
    left:50%;
    background-color: none;
    z-index: -99;
    overflow: hidden;
    transform: translate(-50%, -50%);
}

#ending19 {
    position: absolute;
    opacity: 0;
    transition: opacity 5s;
    width: auto;
    height: auto;
    padding:1%;
    top: 50%;
    left:50%;
    background-color: none;
    z-index: -99;
    overflow: hidden;
    transform: translate(-50%, -50%);
}

#ending20 {
    position: absolute;
    opacity: 0;
    transition: opacity 5s;
    width: auto;
    height: auto;
    padding:1%;
    top: 50%;
    left:50%;
    background-color: none;
    z-index: -99;
    overflow: hidden;
    transform: translate(-50%, -50%);
}

#ending21 {
    position: absolute;
    opacity: 0;
    transition: opacity 5s;
    width: auto;
    height: auto;
    padding:1%;
    top: 50%;
    left:50%;
    background-color: none;
    z-index: -99;
    overflow: hidden;
    transform: translate(-50%, -50%);
}

/*@keyframes fadePopUp {
    0% {opacity:100%}
    100% {opacity:0%}
} */