/* CSS RESET */
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* GENERAL STYLES */
html,
body {
    /* stop page from scrolling */
    height: 100%;
    overflow: hidden;
    font-family: "Arial", sans-serif;
}

div,
main,
section,
img {
    position: absolute;
}

#loading,
#begin,
main {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


#btnContainer {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#begin {
    display: inline-block;
    color: #000;
    background-color: #90E1F5;
    border: solid 1px transparent;
    border-radius: 20px;
    padding: 10px 20px;
    transition: all 0.5;
    display: none;
}

#begin:hover {
    background-color: #A625CF;
    color: #FFF;
    border-color: #FFF;
    cursor: pointer;
    animation: ease;

}




main {
    width: 960px;
    height: 600px;
    overflow: hidden;
    display: none;
}

section {
    width: 100%;
    height: 100%;
    overflow: hidden;

}

#prev,
#next,
#playPause {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    bottom: 20px;
    color: #000;
    border: solid 1px #000;
    border-radius: 15px;
    background-color: #A625CF;
    font-size: 20px;
    transition: background 0.5s;

}

#prev:hover,
#next:hover,
#playPause:hover {
    cursor: pointer;
    background-color: #44ADDE;
    color: #FFF;

}

#prev {
    left: 20px;
}

#next {
    right: 20px;
}

#playPause {
    left: 50%;
    transform: translateX(-50%);
}

.play {
    width: 12px;
    height: 16px;
    border-top: 8px solid transparent;
    border-left: 12px solid #FFF;
    border-bottom: 8px solid transparent;
    margin-left: 2px;
}

#playPause:hover .play {
    border-left-color: #000;
}

.pause {
    width: 12px;
    height: 16px;
    border-right: 4px solid #FFF;
    border-left: 4px solid #FFF;
}

#playPause:hover .pause {
    border-right-color: #000;
    border-left-color: #000;
}


/* SHARED SCREEN STYLES */
h1 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #FFF;
    font-family: "monospace", "monaco";
    font-size: 20pt;
}

p {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

/* SCREEN 1 STYLES */
#screen1 {

    background: #4FCCEB;

}

/* SCREEN 2 STYLES */

#screen2 {
    background: #396BA1;


}

/* SCREEN 3 STYLES */
#screen3 {

    background: #3C8ADE;
}

/* SCREEN 4 STYLES */
#screen4 {

    background: #2940E5;

}

/* SCREEN 5 STYLES */
#screen5 {

    background: #4700aa;

}

/* SCREEN 6 STYLES */

#screen6 {

    background: #1B8099;

}

/*screen 1 elements*/
#ele1 {
    position: absolute;
    top: 135px;
    right: 40px;
    width: 400px;
    height: 200px;
    background-color: #277EDB;

}

#s1pic1 {
    position: absolute;
    top: 5px;
    right: 20px;
    width: 95%;
    height: 95%;

}

#ele2 {
    position: absolute;
    top: 370px;
    right: 40px;
    width: 250px;
    height: 150px;
    background-color: #277EDB;


}

#s1pic2 {
    position: absolute;
    top: 5px;
    right: 15px;
    width: 90%;
    height: 90%;

}


#ele3 {
    position: absolute;
    top: 280px;
    left: 30px;
    height: 300px;
    width: 300px;
    background-color: #277EDB;
    border-radius: 50%;

}

#s1pic3 {
    position: absolute;
    top: 25px;
    right: 20px;
    width: 90%;
    height: 80%;

}


#ele4 {
    position: absolute;
    top: 170px;
    left: 300px;
    height: 150px;
    width: 150px;
    background-color: #277EDB;
    border-radius: 50%;

}

#ele4:hover{
    opacity: 0;
    cursor: pointer;
}


#s1pic4 {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 80%;
    height: 80%;

}


#ele5 {
    position: absolute;
    top: 400px;
    left: 375px;
    height: 150px;
    width: 150px;
    background-color: #277EDB;
    border-radius: 50%;

}

#ele5:hover{
    opacity: 0;
    cursor: pointer;
}


#s1pic5 {
    position: absolute;
    top: 25px;
    right: 20px;
    width: 70%;
    height: 70%;

}

#ele6 {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 960px;
    height: 100px;
    background-color: #277EDB;

}

/*screen 2 elements*/

#ele7 {
    position: absolute;
    top: 200px;
    left: 675px;
    height: 250px;
    width: 250px;
    background-color: #5B66C4;
    border-radius: 50%;

}


#ele7:hover + #ele7hover {
    opacity: 1;
    transform: scale(1.5) translate(17px, -17px);
    cursor: pointer;
}

#ele7hover {
    background: transparent;
    bottom: 400px;
    right: 100px;
    opacity: 0;
    transition: all 0.5s ease-out;
}

#ele7hover p {
    font-size: 6pt;
}

#s2pic1 {
    position: absolute;
    top: 25px;
    right: 25px;
    width: 70%;
    height: 70%;

}

#s2pic1:hover {

    cursor: pointer;
}

#ele8 {
    position: absolute;
    top: 200px;
    left: 25px;
    height: 250px;
    width: 250px;
    background-color: #5B66C4;
    border-radius: 50%;

}



#ele8:hover + #ele8hover {
    opacity: 1;
    transform: scale(1.5) translate(17px, -17px);
    cursor: pointer;
}

#ele8hover {
    background: transparent;
    bottom: 400px;
    right: 750px;
    opacity: 0;
    transition: all 0.5s ease-out;
}

#ele8hover p {
    font-size: 6pt;
}

#s2pic2 {
    position: absolute;
    top: 25px;
    right: 30px;
    width: 70%;
    height: 70%;

}

#s2pic2:hover {

    cursor: pointer;
}

#s2pic3 {
    position: absolute;
    top: 25px;
    right: 30px;
    width: 70%;
    height: 70%;

}

#s2pic3:hover {

    cursor: pointer;
}

#ele9 {
    position: absolute;
    top: 200px;
    left: 350px;
    height: 250px;
    width: 250px;
    background-color: #5B66C4;
    border-radius: 50%;

}

#ele9:hover + #ele9hover {
    opacity: 1;
    transform: scale(1.5) translate(17px, -17px);
    cursor: pointer;
}

#ele9hover {
    background: transparent;
    bottom: 400px;
    right: 450px;
    opacity: 0;
    transition: all 0.5s ease-out;

}

#ele9hover p {
    font-size: 6pt;
}


#ele10 {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 960px;
    height: 100px;
    background-color: #0A21EA;

}

#s2txt1 {
    position: absolute;
    top: 450px;
    right: 50px;
    width: 200px;
    height: 150px;
    font-size: 9pt;
    color: #FFF;
    margin-top: 10px;
}

#s2txt2 {
    position: absolute;
    top: 450px;
    right: 380px;
    width: 220px;
    height: 150px;
    font-size: 9pt;
    color: #FFF;
    margin-top: 10px;
}

#s2txt3 {
    position: absolute;
    top: 450px;
    right: 700px;
    width: 200px;
    height: 150px;
    font-size: 9pt;
    color: #FFF;
    margin-top: 10px;
}


/*screen3 elements*/

#ele11 {
    position: absolute;
    top: 200px;
    left: 675px;
    height: 250px;
    width: 250px;
    background-color: #2940E5;
    border-radius: 50%;


}

#ele11:hover + #ele11hover {
    opacity: 1;
    transform: scale(1.5) translate(17px, -17px);
    cursor: pointer;
}

#ele11hover {
    background: transparent;
    bottom: 400px;
    right: 100px;
    opacity: 0;
    transition: all 0.5s ease-out;
}

#ele11hover p {
    font-size: 6pt;
}

#ele12 {
    position: absolute;
    top: 200px;
    left: 25px;
    height: 250px;
    width: 250px;
    background-color: #2940E5;
    border-radius: 50%;

}

#ele12:hover + #ele12hover {
    opacity: 1;
    transform: scale(1.5) translate(17px, -17px);
    cursor: pointer;
}

#ele12hover {
    background: transparent;
    bottom: 400px;
    right: 690px;
    opacity: 0;
    transition: all 0.5s ease-out;

}

#ele12hover p {
    font-size: 6pt;
}

#ele13 {
    position: absolute;
    top: 200px;
    left: 350px;
    height: 250px;
    width: 250px;
    background-color: #2940E5;
    border-radius: 50%;


}

#ele13:hover + #ele13hover {
    opacity: 1;
    transform: scale(1.5) translate(17px, -17px);
    cursor: pointer;
}

#ele13hover {
    background: transparent;
    bottom: 400px;
    right: 450px;
    opacity: 0;
    transition: all 0.5s ease-out;
}

#ele13hover p {
    font-size: 6pt;
}

#ele14 {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 960px;
    height: 100px;
    background-color: #5B66C4;

}

#s3pic1 {
    position: absolute;
    top: 45px;
    right: 30px;
    width: 70%;
    height: 60%;

}

#s3pic1:hover {

    cursor: pointer;
}

#s3pic2 {
    position: absolute;
    top: 15px;
    right: 40px;
    width: 60%;
    height: 90%;

}

#s3pic2:hover {

    cursor: pointer;
}

#s3pic3 {
    position: absolute;
    top: 35px;
    right: 10px;
    width: 80%;
    height: 60%;

}

#s3pic3:hover {

    cursor: pointer;
}

#s3txt1 {
    position: absolute;
    top: 450px;
    right: 700px;
    width: 200px;
    height: 150px;
    font-size: 9pt;
    color: #FFF;
    margin-top: 10px;
}

#s3txt2 {
    position: absolute;
    top: 450px;
    right: 380px;
    width: 200px;
    height: 150px;
    font-size: 9pt;
    color: #FFF;
    margin-top: 10px;
}

#s3txt3 {
    position: absolute;
    top: 450px;
    right: 50px;
    width: 200px;
    height: 150px;
    font-size: 9pt;
    color: #FFF;
    margin-top: 10px;
}

/*screen 4 elements*/

#ele15 {
    position: absolute;
    top: 135px;
    right: 40px;
    width: 200px;
    height: 400px;
    background-color: #277EDB;

}

#ele16 {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 960px;
    height: 100px;
    background-color: #723FE7;

}

#s4pic1 {
    position: absolute;
    top: 85px;
    right: 700px;
    width: 20%;
    height: 50%;

}

#s4pic1:hover {
    width: 25%;
    height: 55%;
    cursor: pointer;

}

#s4pic2 {
    position: absolute;
    top: 135px;
    right: 450px;
    width: 30%;
    height: 30%;

}

#s4pic2:hover {
    width: 35%;
    height: 35%;
    cursor: pointer;

}

#s4pic3 {
    position: absolute;
    top: 140px;
    right: 250px;
    width: 30%;
    height: 30%;

}

#s4pic3:hover {
    width: 35%;
    height: 35%;
    cursor: pointer;

}

#s4pic4 {
    position: absolute;
    top: 375px;
    right: 730px;
    width: 15%;
    height: 20%;

}

#s4pic4:hover {
    width: 20%;
    height: 25%;
    cursor: pointer;

}

#s4pic5 {
    position: absolute;
    top: 350px;
    right: 550px;
    width: 10%;
    height: 25%;

}

#s4pic5:hover {
    width: 15%;
    height: 30%;
    cursor: pointer;

}

#s4pic6 {
    position: absolute;
    top: 355px;
    right: 300px;
    width: 20%;
    height: 20%;

}

#s4pic6:hover {
    width: 25%;
    height: 25%;
    cursor: pointer;

}



#s4txt1 {
    position: absolute;
    top: 180px;
    right: 75px;
    width: 120px;
    height: 450px;
    font-size: 11pt;
    color: #FFF;
}


/*screen 5 elements*/

#ele17 {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 960px;
    height: 100px;
    background-color: #277EDB;

}

#s5pic1 {
    position: absolute;
    top: 185px;
    right: 700px;
    width: 20%;
    height: 50%;

}

#s5pic2 {
    position: absolute;
    top: 255px;
    right: 350px;
    width: 25%;
    height: 25%;

}

#s5pic2:hover {
    cursor: pointer;
}

#s5pic3 {
    position: absolute;
    top: 270px;
    right: 120px;
    width: 20%;
    height: 20%;

}


#s5txt1 {
    position: absolute;
    top: 200px;
    right: 650px;
    width: 200px;
    height: 150px;
    font-size: 9pt;
    color: #FFF;
}

#s5txt2 {
    position: absolute;
    top: 200px;
    right: 355px;
    width: 200px;
    height: 150px;
    font-size: 9pt;
    color: #FFF;
}

#s5txt3 {
    position: absolute;
    top: 200px;
    right: 50px;
    width: 200px;
    height: 150px;
    font-size: 9pt;
    color: #FFF;
}

#s5txt4 {
    position: absolute;
    top: 450px;
    right: 380px;
    width: 200px;
    height: 150px;
    font-size: 9pt;
    color: #FFF;
}

#s5txt5 {
    position: absolute;
    top: 450px;
    right: 50px;
    width: 200px;
    height: 150px;
    font-size: 9pt;
    color: #FFF;
}


/*screen 6 elements*/

#ele18 {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 960px;
    height: 100px;
    background-color: #105AA8;

}

#s6txt1 {
    position: absolute;
    top: 200px;
    right: 150px;
    width: 600px;
    height: 350px;
    font-size: 12pt;
    color: #FFF;

}

#link1 {
    position: absolute;
    top: 10px
}

#link1:hover {
    font-size: 14pt;
}

#link2 {
    position: absolute;
    top: 60px
}

#link2:hover {
    font-size: 14pt;
}

#link3 {
    position: absolute;
    top: 110px
}

#link3:hover {
    font-size: 14pt;
}

#link4 {
    position: absolute;
    top: 170px
}

#link4:hover {
    font-size: 14pt;
}


/* for modals... can be used anywhere */
.overlay {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    display: none;
}

.close {
    color: #FFF;
    top: 10px;
    right: 10px;
}

.close:hover {
    cursor: pointer;
}

.overlayContent {
    color: #000;
    top: 0;
    text-align: center;
}

#s5pic2content img {
    position: absolute;
    top: 50px;
    right: 150px;
    width: 70%;

}

#clickme {
    position: absolute;
    top: 405px;
    left: 455px;
    color: #F0F939;
    font-size: 14px;
}