.introduction-map{
    position: relative;
    display: block;
    width: calc(100vw * (890/960));
    height: calc(100vw * (495/960));
    border: calc(100vw * (1/960)) solid black;
    background-image: linear-gradient(to right, #c7e1f1 ,#e1f0f5, #c2d8eb);
    padding: calc(100vw *(10/960));
    margin:auto;
}

.introduction-map-image{
    height: calc(100vw *(485/960));
    display: block;
    position: relative;
    margin: auto;
}

.introduction-acknowledgments-text,
.introduction-video{

    position: absolute;
    display: none;
    width: calc(100vw * (895/960));
    height: calc(100vw * (495/960));
    left:0;
    top:0;
    background-color: white;
    z-index: 99;
    color:black;

}

.introduction-video-player{
    width: calc(100vw * (772/960));
    height: calc(100vw * (435/960));
    margin-top: calc(100vw * (20/960));
    margin-left: calc(100vw * (60/960));
    background-color: black;
}

.introduction-video-close{
    cursor: pointer;
    width: calc(100vw * (40/960));
    height: calc(100vw * (40/960));
    position: relative;
    margin-left: calc(100vw * (830/960));
    top:0;
    position: absolute;
}


.introduction-info-video-div{
    display: block;
    position: relative;
    text-align: right;
    margin-right: calc(100vw * (63/960));
    margin-top: calc(100vw * (5/960));
}


.introduction-info-video-link{
    display: inline-block;
    position: relative;
    text-align: right;
    color: rgb(52, 58, 64);
    margin-left: calc(100vw * (15/960));
}
.introduction-info-video-link:hover{
    cursor: pointer;
    text-decoration: none;
}

.introduction-text{
    position: relative;
    display: block;

    height:calc(100vw * (180/960))  !important;
    width:calc(100vw * (770/960))  !important;
    margin-left:calc(100vw * (70/960))  !important;

    border: calc(100vw * (1/960)) solid;
    border-top:none;
    padding:calc(100vw * (10/960));

    background-color:#f5f5f5;
    background-color:rgb(245,245,245);

    border-color:#b1b1b1;
    border-color:rgb(177,177,177);
}
.introduction-button{
    position: absolute;
    display: block;
    width: calc(100vw * (125/960));
    height: calc(100vw * (46/960));
    top: calc(100vw * (575/960));
    font-size: calc(100vw * (14/960));
    line-height: calc(100vw * (16/960));
    padding: 0;

    
}
.introduction-video-button{
    left: calc(100vw * (-57/960));
    top: calc(100vw * (522/960));
}
.introduction-acknowledgements-button{
    left: calc(100vw * (-57/960));
    top: calc(100vw * (575/960));
}

.introduction-hotspot-class{
    position: absolute;
    display: block;
    width: calc(100vw * (80/960));
    height: calc(100vw * (96/960));
    background-image: url("../media/images/maps/icons/map_ghana_poi.png");
    background-size: cover;
    background-repeat: no-repeat;

}

.introduction-hotspot-class:hover{
    cursor: pointer;
}