* {
    box-sizing: border-box;
    color: #777;
}

hr {
    border-top: 1px solid white;
}

@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }

.my-bold-under-text {
    color: #ffffff !important;
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
    font-size: 140%;
    margin-bottom: 1rem;
}

.my-bold-text {
    color: #ffffff !important;
    font-weight: bold;
    font-style: italic;
}

.color-white {
    color: white !important;
}


html{
    /*
    height:100%;
    width: 100%;
    */
    min-height:100%;
}

body {
    min-height:100%;
    height:100%;
    background-color: black;
    padding: 0; margin: 0;
    display: flex;
    /*
    align-content: center;
    justify-content: center;
    */
}

#bingo-container {
    height:100%;
    width: 100%;
    display: flex;
    padding: 0; margin: 0;
    align-content: center;
    justify-content: center;
}

#bingo {
    min-height: 100%;
    display: flex;
    padding: 0; margin: 0;
    align-content: center;
    justify-content: center;
}

#bingo-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display: none;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Edge, Opera and Firefox */
}

.debug-text {
    position: fixed;
    top: 20px;
    left: 60px;
    color: greenyellow;
}



@media (min-width: 1281px) {
    /* 
    ##Device = Desktops
    ##Screen = 1281px to higher resolution desktops
    */

    #project-encyclopedia-about {
        position: fixed;
        top: 12px;
        left: 20px;
        display: none;
    }

    #project-encyclopedia-about a{
        color: white !important;
        background-color: transparent !important;
        font-weight: bold;
        font-style: italic;
        font-size: 200%;
    }

    #project-encyclopedia {
        position: fixed;
        bottom: 20px;
        right: 20px;
        display: none;
    }

    #project-encyclopedia img{
        width:70px;
    }



    #pills-tab {
        margin-top:3rem;
        margin-bottom:2%;
        font-size: 150%;
    }



    .content-component {
        max-width: 80rem;
        margin:auto;
        padding-left: 2%;
        padding-right: 2%;
        
    }

    

    .ref-img {
        margin: auto;
        margin-top: 5%;
        margin-bottom: 5%;
        width: 50%;
        min-width: 200px;
        max-width: 400px;
        display: block;
    }

    .object-title {
        color: white !important;
        background-color: transparent !important;
        font-weight: bold;
        font-style: italic;
        font-size: 30px;
        position: fixed;
        margin-left: auto;
        margin-right: auto;
        left: 50%;
        bottom: 10%;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    .info-img {
        margin: auto;
        margin-top: 5%;
        margin-bottom: 5%;
        width: 70%;
        min-width: 240px;
        max-width: 720px;
        height: auto;
        display: block;
    }

    .info-video {
        margin: auto;
        margin-top: 10%;
        margin-bottom: 10%;
        width: 80%;
        min-width: 240px;
        max-width: 800px;
        height: auto;
        display: block;
        background-color: black;
    }
    .content-video {
        margin: auto;
        margin-top: 10%;
        margin-bottom: 10%;
        width: 80%;
        min-width: 240px;
        max-width: 800px;
        height: auto;
        display: block;
        background-color: black;
    }
    .carousel-item img {
        width: auto !important;
        height: 40%;
        max-height: 720px;
    }
    #mercury-play-back {
        color: #ffffff !important;

        font-weight: bold;
        font-style: italic;
        text-decoration: underline;
        position: absolute;
        left: 50%;
        top: 50%;
        display: none;

        font-size: 120%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
    }
    
    /* 
    ##Device = Desktops
    ##Screen = 1281px to higher resolution desktops
    */
}



@media (min-width: 1025px) and (max-width: 1280px) {
    /* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
    */

    #project-encyclopedia-about {
        position: fixed;
        top: 12px;
        left: 20px;
        display: none;
    }

    #project-encyclopedia-about a{
        color: white !important;
        background-color: transparent !important;
        font-weight: bold;
        font-style: italic;
        font-size: 180%;
    }

    #project-encyclopedia {
        position: fixed;
        bottom: 20px;
        right: 20px;
        display: none;
    }

    #project-encyclopedia img{
        width:60px;
    }



    #pills-tab {
        margin-top:3rem;
        margin-bottom:2%;
        font-size: 150%;
    }



    .content-component {
        max-width: 80rem;
        margin:auto;
        padding-left: 2%;
        padding-right: 2%;
        
    }

    .ref-img {
        margin: auto;
        margin-top: 5%;
        margin-bottom: 5%;
        width: 50%;
        min-width: 200px;
        max-width: 400px;
        display: block;
    }

    .object-title {
        color: white !important;
        background-color: transparent !important;
        font-weight: bold;
        font-style: italic;
        font-size: 30px;
        position: fixed;
        margin-left: auto;
        margin-right: auto;
        left: 50%;
        bottom: 10%;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    .info-img {
        margin: auto;
        /*
        width: 70%;
        min-width: 240px;
        max-width: 720px;
        height: auto;
        */
        display: block;
        width: auto;
        height: 40%;
        min-height: 240px;
        max-height: 600px;
        min-width: 0px;
    }

    .info-video {
        margin: auto;
        width: auto;
        height: 40%;
        min-height: 240px;
        max-height: 600px;
        min-width: 0px;
        display: block;
        background-color: black;
    }
    .content-video {
        margin: auto;
        width: auto;
        height: 40%;
        min-height: 240px;
        max-height: 600px;
        min-width: 0px;
        display: block;
        background-color: black;
    }
    .carousel-item img {
        width: auto !important;
        height: 40%;
        max-height: 640px;
    }
    #mercury-play-back {
        color: #ffffff !important;
        position: absolute;
        left: 50%;
        top: 50%;
        display: none;
        font-weight: bold;
        font-style: italic;
        text-decoration: underline;
        font-size: 120%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
    }
    /* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
    */
}



@media (min-width: 768px) and (max-width: 1024px) {
    /* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
    */

    #project-encyclopedia-about {
        position: fixed;
        top: 12px;
        left: 20px;
        display: none;
    }

    #project-encyclopedia-about a{
        color: white !important;
        background-color: transparent !important;
        font-weight: bold;
        font-style: italic;
        font-size: 150%;
    }

    #project-encyclopedia {
        position: fixed;
        bottom: 20px;
        right: 20px;
        display: none;
    }

    #project-encyclopedia img{
        width:48px;
    }



    #pills-tab {
        margin-top: 2rem;
        margin-bottom: 2rem;
        font-size: 150%;
    }



    .content-component {
        max-width: 80rem;
        margin:auto;
        padding-left: 2%;
        padding-right: 2%;
        
    }

    .ref-img {
        margin: auto;
        margin-top: 5%;
        margin-bottom: 5%;
        width: 50%;
        min-width: 200px;
        max-width: 400px;
        display: block;
    }

    .object-title {
        color: white !important;
        background-color: transparent !important;
        font-weight: bold;
        font-style: italic;
        font-size: 180%;
        position: fixed;
        margin-left: auto;
        margin-right: auto;
        left: 50%;
        bottom: 10%;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    .info-img {
        margin: auto;
        margin-top: 5%;
        margin-bottom: 5%;
        width: 70%;
        min-width: 240px;
        max-width: 720px;
        height: auto;
        display: block;
    }

    .info-video {
        margin: auto;
        margin-top: 10%;
        margin-bottom: 10%;
        width: 80%;
        min-width: 240px;
        max-width: 720px;
        height: auto;
        display: block;
        background-color: black;
    }
    .content-video {
        margin: auto;
        margin-top: 10%;
        margin-bottom: 10%;
        width: 90%;
        min-width: 240px;
        max-width: 720px;
        height: auto;
        display: block;
        background-color: black;
    }
    .carousel-item img {
        width: auto !important;
        height: 480px;
        max-height: 480px;
    }
    #mercury-play-back {
        color: #ffffff !important;
        position: absolute;
        left: 50%;
        top: 50%;
        display: none;
        font-weight: bold;
        font-style: italic;
        text-decoration: underline;
        font-size: 120%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
    }
    /* 
    ##Device = Tablets, Ipads (portrait)
    ##Screen = B/w 768px to 1024px
    */
}



@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    /* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
    */

    #project-encyclopedia-about {
        position: fixed;
        top: 10px;
        left: 16px;
        display: none;
    }

    #project-encyclopedia-about a{
        color: white !important;
        background-color: transparent !important;
        font-weight: bold;
        font-style: italic;
        font-size: 120%;
    }

    #project-encyclopedia {
        position: fixed;
        bottom: 16px;
        right: 16px;
        display: none;
    }

    #project-encyclopedia img{
        width:40px;
    }



    #pills-tab {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        font-size: 120%;
    }



    .content-component {
        max-width: 80rem;
        margin:auto;
        padding-left: 2%;
        padding-right: 2%;
        
    }

    .ref-img {
        margin: auto;
        margin-top: 5%;
        margin-bottom: 5%;
        width: 50%;
        min-width: 200px;
        max-width: 400px;
        display: block;
    }

    .object-title {
        color: white !important;
        background-color: transparent !important;
        font-weight: bold;
        font-style: italic;
        font-size: 120%;
        position: fixed;
        margin-left: auto;
        margin-right: auto;
        left: 50%;
        bottom: 10%;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    .info-img {
        margin: auto;
        /*
        width: 70%;
        min-width: 240px;
        max-width: 800px;
        height: auto;
        */
        width: auto;
        height: 30%;
        min-height:240px;
        max-height:700px;
        min-width: 0px;
        display: block;
    }

    .info-video {
        margin: auto;
        /*
        width: 70%;
        min-width: 240px;
        max-width: 800px;
        height: auto;
        */
        width: auto;
        height: 30%;
        min-width: 0px;
        min-height:240px;
        max-height:700px;
        display: block;
        background-color: black;
    }
    .content-video {
        margin: auto;
        /*
        width: 70%;
        min-width: 240px;
        max-width: 800px;
        height: auto;
        */
        width: auto;
        height: 30%;
        min-width: 0px;
        min-height:240px;
        max-height:700px;
        display: block;
        background-color: black;
    }
    .carousel-item img {
        
        width: auto !important;
        /*
        height: 460px;
        max-height: 460px;
        */
        height: 70%;
        min-height:240px;
        max-height:700px;
    }
    #mercury-play-back {
        color: #ffffff !important;
        position: absolute;
        left: 50%;
        top: 50%;
        display: none;
        font-weight: bold;
        font-style: italic;
        text-decoration: underline;
        font-size: 120%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
    }
    /* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
    */
}



@media (min-width: 481px) and (max-width: 767px) {
    /* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
    */

    #project-encyclopedia-about {
        position: fixed;
        top: 8px;
        left: 12px;
        display: none;
    }

    #project-encyclopedia-about a{
        color: white !important;
        background-color: transparent !important;
        font-weight: bold;
        font-style: italic;
        font-size: 100%;
    }

    #project-encyclopedia {
        position: fixed;
        bottom: 12px;
        right: 12px;
        display: none;
    }

    #project-encyclopedia img{
        width:32px;
    }



    #pills-tab {
        margin-top:1rem;
        margin-bottom:1rem;
        font-size: 80%;
    }


    .content-component {
        max-width: 80rem;
        margin:auto;
        padding-left: 2%;
        padding-right: 2%;
        
    }

    .ref-img {
        margin: auto;
        margin-top: 5%;
        margin-bottom: 5%;
        width: 50%;
        min-width: 200px;
        max-width: 400px;
        display: block;
    }

    .object-title {
        color: white !important;
        background-color: transparent !important;
        font-weight: bold;
        font-style: italic;
        font-size: 80%;
        position: fixed;
        margin-left: auto;
        margin-right: auto;
        left: 50%;
        bottom: 3rem;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    .info-img {
        margin: auto;
        /*
        width: 70%;
        min-width: 240px;
        max-width: 800px;
        height: auto;
        */
        width: auto;
        height: 30%;
        min-height:240px;
        max-height:700px;
        display: block;
    }

    .info-video {
        margin: auto;
        /*
        width: 70%;
        min-width: 240px;
        max-width: 800px;
        height: auto;
        */
        width: auto;
        height: 30%;
        min-height:240px;
        max-height:700px;
        display: block;
        background-color: black;
    }
    .content-video {
        margin: auto;
        /*
        width: 70%;
        min-width: 240px;
        max-width: 800px;
        height: auto;
        */
        width: auto;
        height: 30%;
        min-height:240px;
        max-height:700px;
        display: block;
        background-color: black;
    }

    .carousel-item img {
        width: auto !important;
        height: 260px;
        max-height: 260px;
    }
    #mercury-play-back {
        color: #ffffff !important;
        position: absolute;
        left: 50%;
        top: 50%;
        display: none;
        font-weight: bold;
        font-style: italic;
        text-decoration: underline;
        font-size: 120%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
    }

    /* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
    */
}



@media (min-width: 320px) and (max-width: 480px) {
    /* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
    */

    #project-encyclopedia-about {
        position: fixed;
        top: 8px;
        left: 12px;
        display: none;
    }

    #project-encyclopedia-about a{
        color: white !important;
        background-color: transparent !important;
        font-weight: bold;
        font-style: italic;
        font-size: 100%;
    }

    #project-encyclopedia {
        position: fixed;
        bottom: 12px;
        right: 12px;
        display: none;
    }

    #project-encyclopedia img{
        width:32px;
    }



    #pills-tab {
        margin-top:1rem;
        margin-bottom:1rem;
        font-size: 80%;
    }



    .content-component {
        max-width: 80rem;
        margin:auto;
        padding-left: 2%;
        padding-right: 2%;
        
    }


    .ref-img {
        margin: auto;
        margin-top: 5%;
        margin-bottom: 5%;
        width: 50%;
        min-width: 200px;
        max-width: 400px;
        display: block;
    }

    .object-title {
        color: white !important;
        background-color: transparent !important;
        font-weight: bold;
        font-style: italic;
        font-size: 80%;
        position: fixed;
        margin-left: auto;
        margin-right: auto;
        left: 50%;
        bottom: 3rem;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    .info-img {
        margin: auto;
        margin-top: 5%;
        margin-bottom: 5%;
        width: 70%;
        min-width: 240px;
        max-width: 800px;
        height: auto;
        display: block;
    }

    .info-video {
        margin: auto;
        margin-top: 10%;
        margin-bottom: 10%;
        width: 85%;
        min-width: 240px;
        max-width: 800px;
        height: auto;
        display: block;
        background-color: black;
    }

    .content-video {
        margin: auto;
        margin-top: 10%;
        margin-bottom: 10%;
        width: 95%;
        min-width: 240px;
        max-width: 800px;
        height: auto;
        display: block;
        background-color: black;
    }

    .carousel-item img {
        width: auto !important;
        height: 200px;
        max-height: 200px;
    }

    .text-font {
        color: #ccc;
        font-weight: normal;
        font-size: 90%;
        /*line-height: 1.6;*/
    }
    .text-font-small {
        color: #ccc;
        font-weight: normal;
        font-size: 70%;
    }
    #mercury-play-back {
        color: #ffffff !important;
        position: absolute;
        left: 50%;
        top: 50%;
        display: none;
        font-weight: bold;
        font-style: italic;
        text-decoration: underline;
        font-size: 120%;
        transform: translate(-50%, -50%);
        white-space: nowrap;
    }
    /* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
    */
}