/* styling for popups and boxes */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 70%;
    text-align: left;
    border-style: solid;
    border-color: #0e0e0e;
    box-shadow: 2px 2px 0px 0px #0e0e0e;
    font-weight: bold;
}

.slan-con-h2 {
    float: left;
    width: 20%;
    padding: 1%;
    margin: 0;
    text-align: left;
    font-size: 1.5vw;
}

.slan-con-p {
    float: right;
    width: 70%;
    margin: 0;
    margin-right: 2%;
}

.slan-con-bold-text {
    font-weight: bold;
    font-size: 1.05em;
}

/* nav styling */
.slan-con-nav {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
}

.slan-con-nav .slan-con-logo {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-left: none;
    width: 30%;
}

#slan-con-arch-modal {
    z-index: 4;
    position: relative;
    display: block;
}

#slan-con-arch-modal img {
    height: 100%;
}

.slan-con-arch-main {
    margin-left: 5%;
}

.slan-con-arch-main h1 {
    margin: 0;
    line-height: 1;
    font-size: 1.5vw;
}

#placeholder-speech-bubble {
    background-image: url(../img/slan-con/slan-con-speech-bubble.png);
    background-size: 100%;
    background-position: center;
    width: 40px;
    height: 40px;
    position: relative;
}

.slan-con-nav .button-wrap {
    display: flex;
    flex-direction: row;
    flex: 1;
    justify-content: space-between;
    align-items: center;
}

.slan-con-nav .button-wrap button {
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.start-button {
    border: none;
    background: none;
    display: inline-block;
}

.back-button {
    border: none;
    background: none;
    display: inline-block;
}

.next-button {
    border: none;
    background: none;
    display: inline-block;
}

.end-button {
    border: none;
    background: none;
    display: inline-block;
}

.quit-button {
    border: none;
    background-color:#fff;
    display: inline-block;
}

#slan-con-program-number {
    width: 30%;
    font-weight: bold;
    font-family: Changa, Arial;
}

/* background styling */
.slan-con-background {
    background-image: url(../img/slan-con/slan-con-background.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.slan-con-landing-background {
/*    background-image: url(../img/slan-con/slan-con-landing-background.png);*/
    background-size: cover;
}

#game-content.one-col #column-one {
    background: none;
}

/* program/page content */
#slan-con-landing-content {
    height: 100%;
}

#slan-con-landing-content .introImage {
    position: absolute;
    background-color: black;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0;
}

#slan-con-landing-window {
    position: absolute;
    background-color: black;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    width: calc(100% - 12px);
    height: calc(100% - 36px);
    left: 0px;
    bottom: 0px;
    z-index: 5;
}

#game-content {
/*    position: absolute;
    background-color: black;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top;
    width: calc(100% - 12px);
    height: calc(100% - 40px);
    left: 6px;
    bottom: 7px;
    z-index: 1;*/
}

#slan-con-landing-bottom {
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 1em;
    text-align: center;
    color: white;
    font-size: 1vw; 
    font-weight: bold;
}

#column-one a {
    color: black;
}

#slan-con-program-one {
    width: 100%;
    height: 100%;
}

#slan-con-program-one-h2 {
    float: left;
    width: 40%;
    padding: 1%;
    text-align: left;
    font-size: 1.5vw;
}

#slan-con-program-one-p {
    float: right;
    width: 50%;
    margin: 0;
    margin-right: 2%;
    padding: 1%;
    background-color: white;
    border: 1px solid black ;
    font-size: .85vw;
}

#slan-con-program-two {
    width: 100%;
}

#slan-con-program-two-text {
    width: 95%;
    font-size: .85vw;
}


#slan-con-program-three {
    width: 100%;
    height: 100%;
}

#slan-con-program-three-text {
    width: 95%;
    font-size: .85vw;
}

#slan-con-program-four-text {
    width: 95%;
    font-size: .85vw;
}

#slan-con-program-four {
    width: 100%;
    height: 100%;
}

#slan-con-program-five-text {
    width: 95%;
    height: 50vh;
    background-color: white;
    overflow-y: scroll;
    border: 1px solid black;
    font-size: .85vw;
    padding: 5%;
    text-align: left;
    box-sizing: border-box;
}


#slan-con-program-five {
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 1024px) {
    #slan-con-program-five-text {
        height: 21vh;
    }
  }

#slan-con-program-six-text {
    width: 95%;
    height: 50vh;
    background-color: white;
    overflow-y: scroll;
    border: 1px solid black;
    font-size: .85vw;
    padding: 5%;
    text-align: left;
    box-sizing: border-box;
}

#slan-con-program-six {
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 1024px) {
    #slan-con-program-six-text {
        height: 21vh;
    }
  }

#slan-con-program-seven {
    width: 100%;
    height: 100%;
}

#slan-con-program-seven-img {
    width: 70%;
    position: absolute;
    right: 20px;
    box-shadow: 3px 3px 0px 0px #0e0e0e;
}

#slan-con-program-seven-img img {
    width: 100%;
    border: 1px solid black;
}

#slan-con-program-eight {
    width: 100%;
    height: 100%;
}

#slan-con-program-nine {
    width: 100%;
    height: 100%;
}

#slan-con-program-ten {
    width: 100%;
    height: 100%;
}

/* heading section styling */
.slan-con-heading-section {
    display: block;
    width: 100%;
    height: 10%;
    float: left;
}

.slan-con-heading-h1 {
    /* margin-left: 10%; */
    margin-top: 0;
    color: black;
}

.slan-con-heading-section {
    display: block;
    width: 100%;
    height: 10%;
    float: left;
}

#slan-con-arch-content {
    height: 94%;
    width: 98.5%;
    border: 2px solid black;
    position: absolute;
    background-image: url(../img/slan-con/slan-con-arch-background.png);
    background-size: 100%;
    background-repeat: no-repeat;
    z-index: 9;
    margin-left: 0;
    left: .5%;
    top: 5%;
}

#slan-con-arch-p {
    border: 2px solid black;
    height: 88%;
    width: 20%;
    background-color: white;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    top: .5em;
}

#slan-con-program-seven-content {
    position: relative;
}

#slan-con-program-seven-p {
    position: absolute;
    width: 40%;
    border: 1px solid black;
    background-color: white;
    margin-top: 40%;
    z-index: 5;
    left: 10px;
    font-size: .85vw;
    padding: 2%;
    box-sizing: border-box;
    text-align: left;
}

#slan-con-program-seven-h2 {
    margin-top: 0;
    text-align: left;
    font-size: 1.5vw;
    padding: 1%;
}

.slan-con-program-eight-nine-img {
    width: 70%;
    position: absolute;
    right: 20px;
    box-shadow: 3px 3px 0px 0px #0e0e0e;
    border: 1px solid black;
}

.slan-con-program-eight-nine-content {
    position: relative;
}

#slan-con-program-eight-p {
    width: 40%;
    background-color: white;
    border: 1px solid black;
    position: absolute;
    margin-top: 20%;
    z-index: 5;
    left: 10px;
    z-index: 5;
    font-size: .85vw;
    padding: 2%;
    box-sizing: border-box;
    text-align: left;
}

#slan-con-program-eight-h2 {
    margin: 0;
    text-align: left;
    font-size: 1.5vw;
    padding: 1%;
}

#slan-con-program-nine-h2 {
    margin: 0;
    text-align: left;
    font-size: 1.5vw;
    padding: 1%;
}

#slan-con-program-nine-p {
    width: 30%;
    background-color: white;
    border: 1px solid black;
    position: absolute;
    margin-top: 20%;
    left: 10px;
    z-index: 5;
    font-size: .85vw;
    padding: 2%;
    box-sizing: border-box;
    text-align: left;
    box-shadow: 3px 3px 0px 0px #0e0e0e;
}


#source-code-program-ten-content {
    position: relative;
}

#source-code-program-ten-h2 {
    float: left;
    width: 30%;
    text-align: left;
    font-size: 1.5vw;
    padding: 1%;
}

#source-code-program-ten-img {
    width: 70%;
    position: absolute;
    right: 20px;
    box-shadow: 3px 3px 0px 0px #0e0e0e;
    background-color: white;
    border: 1px solid black;
}

#source-code-program-ten-img img {
    width: 100%;
}

#source-code-program-ten-p {
    width: 25%;
    background-color: white;
    border: 1px solid black;
    position: absolute;
    margin-top: 25%;
    left: 10px;
    z-index: 5;
    font-size: .85vw;
    padding: 2%;
    box-sizing: border-box;
    text-align: left;
    box-shadow: 3px 3px 0px 0px #0e0e0e;
}


/* popups */
#slan-con-speechBubble {
    height: 60%;
    width: 30%;
    position: absolute;
    background-color: white;
    left: 6%;
    padding: 1%;
    top: 15%;
    margin: 0;
    z-index: 9;
}

#slan-con-opening-popup {
    position: absolute;
    background-color: white;
    border: 1px solid black;
    padding: 1%;
    margin-left: 14%;
    margin-top: 25%;
    width: 50%;
}

#slan-con-opening-popup-two {
    position: absolute;
    background-color: white;
    border: 1px solid black;
    padding: 1%;
    margin-left: 14%;
    margin-top: 25%;
    width: 50%;
}

#slan-con-ending-popup {
    position: absolute;
    background-color: white;
    border: 1px solid black;
    padding: 1%;
    margin-left: 14%;
    margin-top: 25%;
    z-index: 3;
    width: 50%;
}

#slan-con-ending-popup-two {
    position: absolute;
    background-color: white;
    border: 1px solid black;
    padding: 1%;
    margin-left: 14%;
    margin-top: 25%;
    z-index: 3;
    width: 50%;
}

#slan-con-landing-popup {
    width: 80%;
    max-width: 400px;
    float: right;
    background-color: white;
    margin-top: 25%;
    font-size: 14px;
}

.slan-con-popup-button {
    float: right;
}

/* img styling */
#slan-con-arch-modal img {
    height: 100%;
    width:100%;
}

#slan-con-program-seven-img {
    float: right;
    margin-top: 0;
    margin-right: 2%;
    height: 40vh;
    padding: 0;
}

#slan-con-program-seven-img img {
    width: 100%;
}

.slan-con-program-eight-nine-img {
    float: right;
    margin-top: 0;
    margin-right: 2%;
    padding: 0;
}

.slan-con-program-eight-nine-img img {
    width: 100%;
}

#source-code-program-ten-img {
    float: right;
    margin-top: 0;
    margin-right: 2%;
    width: 60%;
}

/*.start-button img{
    height: 50px;
}*/

.clickable {
    cursor: pointer;
}

.inactive {
  display: none;
}

#slan-con-landing-window.introAnim {
    animation: fade-out 2s forwards;
}

#slan-con-landing-content .introAnim:nth-of-type(1) {
    opacity: 1;
    z-index: 5;
}

#slan-con-landing-content .introAnim:nth-of-type(2) {
    opacity: 0;
    animation: fade-in 3s forwards;
    animation-delay: 0s;
    z-index: 6;
}

#slan-con-landing-content .introAnim:nth-of-type(3) {
    opacity: 0;
    animation: fade-in 2s forwards;
    animation-delay: 3s;
    z-index: 7;
}

.no-click{
    pointer-events: none;
}

@keyframes fade-in{
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade-out{
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}