/*
Dark blue: #133f67
Yellow: #f4e04d
White: #ffffff
Purple: #7e4679

*/
:root {
    --purple: #7e4679;
    --Darkblue: #133f67;
    --yellow: #f4e04d;
    --white: #ffffff;
}
body {
    font: 14px 'open-sans',sans-serif;
    color: #000;
    margin:0;
    padding:0;

}
.clearfix {
    clear:both;
}
.column {
    float:left;
}
.column.purpleLeft {
    background: var(--purple);
    padding: 1.5rem;
    text-align: left;
    margin: 0;
    height:auto;
    box-shadow: 4px 0px 5px #0000007d;
    z-index: 100;
    width: 89%;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.column.whiteRight {
    float: left;
    background: var(--white);
    color: var(--Darkblue);
    width: 96%;    
    padding: 1.2rem 0 1rem 1rem;
    text-align: left;
    z-index: 50;
}

.column.half {
    width:45%;
    margin: 0;
}
.purpleLeft img {
    float:right;
    margin:1px;
    width: 24%;
}
.purpleLeft h1  {
    font-size: 28px;
    color: var(--white);
    font-weight: 100;
    white-space:normal;
    margin: 0 0 1rem 0;
}
.whiteRight h1 {
    color: var(--Darkblue);
    font-size: 30px;
    font-weight: 600;
    text-align: left;
}
.whiteRight h2 {
    font-size: 14px;
    margin-top:.5rem;
}
.purpleLeft h2 {
    font-size: 18px;
    font-weight:600;
    color: var(--white);
    text-align: left;
    margin: 0 0 0.5rem 0;
    white-space: normal;
}
.purpleLeft p, .purpleLeft ul {
    font-size: 16px;
    color: var(--white);
    line-height: 18px;
    letter-spacing: 0px;
    white-space: normal;
    margin: 0 0 0.5rem 0;
}
.whiteRight p {
    
    font-size: 16px;
    color: var(--Darkblue);
    line-height: 16px;
    letter-spacing: 0px;
    white-space: normal;
    display: flex;
    align-items: center;
}
.whiteRight p img {
    width: 10px;
    height: 10px;
    margin: 0 0.5rem 0 1rem;
}
.purpleLeft ul {
    margin-left: -1.5rem;
}
.whiteRight ul {
    list-style: none;
    margin-left: -2.5rem;
    width: 98%;
}
.purpleLeft li {
    color:var(--white);
    white-space:nowrap;
}
.purpleLeft li {    
    font-size: 14px;
    color: var(--white)
}
.whiteRight li {
    font-size: 18px;
    color: var(--Darkblue);
    align-self: flex-start;
    border: 1px solid #a6a6a9;
    padding: 0rem;
    border-radius: 36px;
    box-shadow: inset 1px 1px 12px #0000004a;
    margin: 0.5rem 0;
    background: #fff;
}

.popup {
    display:none;
    width: 96%;
    text-decoration: none;
    text-align: center;
    border-radius: 10px;
    white-space: nowrap;
    margin: 0.5rem;
    z-index: 50;
    justify-content: center;
    align-items: flex-start;
    align-content: center;
    position: fixed;
    height: 96%;
    left:0;
    overflow-y: scroll;
    background:white;
    overflow-x: hidden;
}
@media only screen and (min-width:992px) {
    
}
.firstlineClose {
    top: 10px;
    right: 19px;
    border-radius: 5px;
    position:absolute;
}
.firstlineClose:hover {
    cursor:pointer;
}

@media only screen and (min-width:495px) {
    .firstlineClose {
        right:34px;
    }
}
@media only screen and (min-width:600px) {
    .column.purpleLeft {
        width: 91%;
    }
}
@media only screen and (min-width:630px) {
    .popup {
        height: 445px;
        width: 785px;
        background: none;
        overflow-y: hidden;
    }
    .column.purpleLeft {        
        width: 53%;
        height: 94%;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        padding: .8rem;
    }
    .purpleLeft h1 {
        font-size: 21px;
    }
    .purpleLeft h2 {
        font-size: 14px;
    }
    .purpleLeft p, .purpleLeft ul {
        font-size: 14px;
        line-height: 16px;
    }
    .column.whiteRight {
        width: 36%;
        height: 94%;
        padding: 0.8rem 1rem;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        background: var(--white);
    }
    .column.whiteRight p {
        font-size: 14px;
        margin: 0.5rem;
    }
    .firstlineClose {
        top: 1%;
        right: 5%;
    }
    .column.purpleLeft img{
        width: 32%;
        margin: 1px 1px 20px 15px;
    }
}

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

    .column.purpleLeft {       
        height: 89%;
    }
    .column.whiteRight {       
        height: 89%;
    }
    .column.whiteRight p {
        margin: 0.3rem;
    }
    .purpleLeft h1 {
        margin: 0 0 0.5rem 0;
    }
    .purpleLeft h2 {
        margin: 0 0 0.5rem 0;
    }
    .purpleLeft p, .purpleLeft ul {
        margin: 0 0 0.5rem 0;
    }
    .purpleLeft ul {
        padding: 0 0 0 12px;
    }
    .column.purpleLeft img{
        width: 32%;
    }
}

@media only screen and (min-width:700px) {
    .column.purpleLeft img{
        width: 42%;
    }
}

@media only screen and (min-width:940px) { 
    .popup {
        height: 445px;
        width: 785px;
    }
    .column.purpleLeft{
        height: 91%;
        width: 54%;
    }
    .column.purpleLeft h1 {
        font-size: 32px;
    }
    .column.purpleLeft h2 {
        font-size: 22px;
        margin: 0 0 1rem 0;
    }
    .purpleLeft p, .purpleLeft ul {
        font-size: 16px;
        line-height: 20px;
    }
    .column.whiteRight {
        height: 91%;
    }
    .column.whiteRight p {
        font-size: 16px;
        margin: 0.7rem;
    }
    .column.whiteRight h2 {
        font-size: 22px;
    }
}
.container {
    width:100%;
    height:100%;
}
#welcomeOverlay {
    width: 307px;
    background: var(--Darkblue);
    height: 90%;
    position: absolute;
    top: 2%;
    z-index: 100;
    left: 1%;
    border-radius: 15px;
    padding: 0.8rem;    
    display: block;
}

#welcomeOverlay h1{
    font-size: 18px;
    color: var(--white);
    margin-top: 0;
    letter-spacing: 1px;
}
#welcomeOverlay p {
    color: var(--white);
    line-height: 20px;
    letter-spacing: 1px;
}
#welcomeButton {
    border-radius: 20px;
    background-color: var(--yellow);
    color: var(--Darkblue);
    margin: -10px auto 0 auto;
    text-align: center;
    border: 1px solid var(--Darkblue);
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 16px;
    display: block;
    box-shadow: 2px 2px 6px #000000ba;
    cursor:pointer;
}

/* confirmed */
@media only screen and (min-width: 630px) {
    #welcomeOverlay {
        width: 57%;
        height: 84%;
        padding: 1.2rem;
    }
    #welcomeButton {
        margin: 0 auto 0 auto;
    }
} 
/* confirmed */
@media only screen and (min-width: 750px) {
    #welcomeOverlay {
        left: 5%;
        width: 45%;
        padding: 1rem;
        height: 78%;
        top: 12%;
    }
    #welcomeButton {
        margin: -10px auto 0 auto;
    }
} 

/* confirmed */
 @media only screen and (min-width:806px) {
    #welcomeOverlay {
        width: 47%;
        height: 80%;
        top: 3%;
        z-index: 100;
        left: 3%;
        padding: 2rem;
    }
    #welcomeOverlay h1 {
        font-size: 20px;
    }
    #welcomeOverlay p {
        font-size: 16px;
    }
    #welcomeButton {
        margin: 0 auto;
        padding: 0.3rem 1rem;
        font-size: 18px;
    }
} 
/* confirmed */
@media only screen and (min-width:940px) {
    #welcomeOverlay {
        top: 10%;
        width: 43%;
        height: 59%;
        z-index: 100;
        left: 5%;
        padding: 2rem;
    }
    #welcomeOverlay h1 {
        font-size: 20px;
    }
    #welcomeOverlay p {
        font-size: 16px;
    }
    #welcomeButton {
        margin: 0 auto;
        padding: 0.3rem 1rem;
        font-size: 18px;
    }
}
#imageback, #hotspotOverlay { 
    
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.mobileHotspots {
    width: 800px;
    height: 450px;
}
/* 
@media only screen and (min-width:600px) { 
    #imageback, #hotspotOverlay {
         width:100%;
        height: 373px;
    }
} */


.hotspot {
    display:none;
    content: "";
    width: 26px;
    height: 26px;
    background: var(--purple);
    border: 2px solid var(--white);
    border-radius: 50%; /* circle */
    animation: blink 4s infinite;
    text-decoration: none;
}
.hotspot:hover {
    opacity: .8;
    cursor:pointer;
}
/* hotspots up to 636 (first breakpoint) */
   
    #hotspotDirt {  
        position: absolute;
        left: 218px;
        top: 269px;
    }
    #hotspotSkin {
        position: absolute;
        left: 371px;
        top: 208px;
    }
    #hotspotBlood {
        position: absolute;
        left: 429px;
        top: 209px;
    }
    #hotspotDevices {
        position: absolute;
        left: 604px;
        top: 291px;
    }
    #hotspotCounter {
        position: absolute;
        left: 97px;
        top: 248px;
    }
    #hotspotDry {
        position: absolute;
        left: 282px;
        top: 217px;
    }
    #hotspotGut {
        position: absolute;
        left: 614px;
        top: 248px;
    } 
    #hotspotResp {
        position: absolute;
        left: 642px;
        top: 208px;
    } 
    #hotspotWet {
        position: absolute;
        left: 20px;
        top: 260px;
    } 


@media only screen and (min-width:1200px) { 
    #imageback, #hotspotOverlay {
        width: 795px;
        height: 447px;
    }
}

@media only screen and (min-width:630px) { 
    .popup {
        height: 436px;
        width: 786px;
    }
}
@media only screen and (min-width:700px) { 
    .popup {
        height: 436px;
        width: 745px;
    }
}
.bp992 {
    width: 655px;
    height: 371px;
}
.bp992 #hotspotDirt {  
    position: absolute;
    left: 179px;
    top: 219px;
}
.bp992 #hotspotSkin {
    position: absolute;
    left: 299px;
    top: 168px;
}
.bp992 #hotspotBlood {
    position: absolute;
    left: 350px;
    top: 169px;
}
.bp992 #hotspotDevices {
    position: absolute;
    left: 498px;
    top: 236px;
}
.bp992 #hotspotCounter {
    position: absolute;
    left: 79px;
    top: 200px;
}
.bp992 #hotspotDry {
    position: absolute;
    left: 228px;
    top: 179px;
}
.bp992 #hotspotGut {
    position: absolute;
    left: 507px;
    top: 204px;
} 
.bp992 #hotspotResp {
    position: absolute;
    left: 524px;
    top: 167px;
}  
.bp992 #hotspotWet {
    position: absolute;
    left: 20px;
    top: 210px;
} 

.bp1200 {
    width: 795px;
    height: 447px;
}
.bp1200 #hotspotDirt {  
    position: absolute;
    left: 218px;
    top: 268px;
}
.bp1200 #hotspotSkin {
    position: absolute;
    left: 371px;
    top: 204px;
}
.bp1200 #hotspotBlood {
    position: absolute;
    left: 429px;
    top: 209px;
}
.bp1200 #hotspotDevices {
    position: absolute;
    left: 604px;
    top: 287px;
}
.bp1200 #hotspotCounter {
    position: absolute;
    left: 97px;
    top: 244px;
}
.bp1200 #hotspotDry {
    position: absolute;
    left: 282px;
    top: 218px;
}
.bp1200 #hotspotGut {
    position: absolute;
    left: 606px;
    top: 247px;
} 
.bp1200 #hotspotResp {
    position: absolute;
    left: 640px;
    top: 208px;
}
.bp1200 #hotspotWet {
    position: absolute;
    left: 20px;
    top: 255px;
} 

.bp1440 {
    width: 963px;
    height: 538px;
}
.bp1440 #hotspotDirt {  
    position: absolute;
    left: 269px;
    top: 324px;
}
.bp1440 #hotspotSkin {
    position: absolute;
    left: 449px;
    top: 252px;
}
.bp1440 #hotspotBlood {
    position: absolute;
    left: 523px;
    top: 254px;
}
.bp1440 #hotspotDevices {
    position: absolute;
    left: 736px;
    top: 349px;
}
.bp1440 #hotspotCounter {
    position: absolute;
    left: 112px;
    top: 300px;
}
.bp1440 #hotspotDry {
    position: absolute;
    left: 343px;
    top: 265px;
}
.bp1440 #hotspotGut {
    position: absolute;
    left: 744px;
    top: 301px;
} 
.bp1440 #hotspotResp {
    position: absolute;
    left: 775px;
    top: 253px;
}  
.bp1440 #hotspotWet {
    position: absolute;
    left: 24px;
    top: 310px;
} 
.show{
    display:block;
}
.hide {
    display:none;
}
@keyframes blink {
    0% {opacity:.6}
    25% {opacity:.2}
    100% {opacity:6}
}