*{
    margin: 0;
    padding: 0;
}

html, body{
    width: 100%;
    height: 100%;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}

/* Main Container */
.mainContainer{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 99999;
    left: 0;
    top: 0;
    background-color: #111e33;
    background-image: url("../images/background.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* Top left logo */
.logo{
    display: none;
    position: absolute;
    width: 8%;
    left: 2vw;
    top: 2vw;
}

.logo:hover{
    cursor: pointer;
}

/* Main content */
.contentContainer{
    width: 100%;
    height: 100%;
    background-image: url("../images/frame.svg");
    background-repeat: no-repeat;
    background-position: center;
}

/* First Screen */
.contentContainer .firstScreen {
    /* display: none; */
    position: absolute;
    width: 25%;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
}

.contentContainer .firstScreen img {
    width: 100%;
}

/* .contentContainer .firstScreen > div {
    margin: 1vw 0;
    border: 1px solid #fff;
    box-sizing: border-box;
    padding: 3px;
}

.contentContainer .firstScreen > div > div {
    width: 0%;
    height: 2px;
    background: #E7B13C;
    transition: all 0.8s ease;
} */

.contentContainer .firstScreen div#progressBar {
    width: 100%;
    height: 0.5vw;
    font-size: 0;
    margin: 1vw 0;
}

.contentContainer .firstScreen div#progressBar div {
    display: inline-block;
    width: 19%;
    height: 100%;
    margin-right: 1%;
    box-shadow: inset 0px 0px 10px 1px rgba(117, 182, 255, 0.4), 0px 0px 20px rgba(117, 182, 255, 0.1);
}

.contentContainer .firstScreen div#progressBar div:last-child {
    margin-right: 0;
}

.contentContainer .firstScreen div#progressBar div.done {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: inset 0px 0px 10px 2px rgba(117, 182, 255, 0.5), 0px 0px 20px rgba(117, 182, 214, 0.5);
}

.contentContainer .firstScreen div#progressBar div.active {
    -webkit-animation: pulse 1s alternate infinite;
    -moz-animation: pulse 1s alternate infinite;
}

@-webkit-keyframes pulse {
    0% {
        background: rgba(255, 255, 255, 1);
        box-shadow: inset 0px 0px 10px 2px rgba(117, 182, 255, 0.5), 0px 0px 20px rgba(105, 135, 255, 1);
    }
    100% {
        background: rgba(255, 255, 255, 0);
        box-shadow: inset 0px 0px 10px 2px rgba(117, 182, 255, 0.5), 0px 0px 20px rgba(105, 135, 255, 0.3);
    }
}

@-moz-keyframes pulse {
    0% {
        background: rgba(255, 255, 255, 1);
        box-shadow: inset 0px 0px 10px 2px rgba(117, 182, 255, 0.5), 0px 0px 20px rgba(105, 135, 255, 1);
    }
    100% {
        background: rgba(255, 255, 255, 0);
        box-shadow: inset 0px 0px 10px 2px rgba(117, 182, 255, 0.5), 0px 0px 20px rgba(105, 135, 255, 0.3);
    }
}


.contentContainer .firstScreen p {
    font-size: 1.2vw;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
}

/* Second Screen */
.contentContainer .secondScreen {
    display: none;
    position: absolute;
    width: 35%;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
}

.contentContainer .secondScreen svg {
    width: 100%;
}

.realizing_svg0 {
    fill:#E7B13C;
}

.realizing_svg1 {
    font-family: 'Roboto', sans-serif;
}

.realizing_svg2 {
    font-size:22.9314px;
}

.realizing_svg3 {
    fill:#FFFFFF;
}

.realizing_svg4 {
    opacity:0.4;
}

/* Third Screen */
.contentContainer .thirdScreen {
    display: none;
    position: absolute;
    width: 20%;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
}

.contentContainer .thirdScreen svg {
    width: 100%;
}

.selection_svg00 {
    fill:none;
    stroke:#ffffff;
    stroke-miterlimit:10;
}

#firstAnim, #secondAnim, #second1Anim {
    text-align: center;
}

#firstAnim svg {
    transform: none !important;
    width: 14% !important;
    height: 14% !important;
}

#secondAnim svg, #second1Anim svg {
    transform: none !important;
    width: 10% !important;
    height: 10% !important;
}

@keyframes sound {
    0% {
        height: 28px; 
        y: 20px;
    }
    100% {   
        height: 3px; 
        y: 48px;
    }
}

.bar:nth-child(1)  { animation-duration: 1s; }
.bar:nth-child(2)  { animation-duration: 0.8s; }
.bar:nth-child(3)  { animation-duration: 0.6s; }
.bar:nth-child(4)  { animation-duration: 0.7s; }
.bar:nth-child(5)  { animation-duration: 0.9s; }


.selection_svg0 {
    fill:#FFFFFF;
}

.selection_svg1 {
    font-family: 'Roboto', sans-serif;
}

.selection_svg2 {
    font-size:36px;
}

.selection_svg3 {
    fill:#FFFFFF;
    stroke:#FFFFFF;
    stroke-width:0.5;
    stroke-miterlimit:10;
}

.selection_svg4 {
    opacity:0.3;
    fill:none;
    stroke:#FFFFFF;
    stroke-miterlimit:10;
}

.selection_svg_button:hover {
    cursor: pointer;
}

.selection_svg_button.disableButton:hover {
    cursor: not-allowed;
}

.selection_svg_button:hover .selection_svg0 {
    fill:#E7B13C;
}

.selection_svg_button.disableButton:hover .selection_svg0 {
    fill: #616f7d;
}

.selection_svg_button.disableButton:hover::after {
    border: 1px solid #fc0;
	padding: 3px 6px;
	background: #fffea1;
	content: 'This is not good';
	position: absolute;
	right: -40px;
	top: -26px;
}

.selection_svg_button .disableText {
    display: none;
}

.selection_svg_button.disableButton:hover .disableText {
    display: block;
}

/* Forth Screen */
.contentContainer .fourthScreen {
    display: none;
} 

.contentContainer .fifthScreen {
    display: none;
}

.contentContainer .sixthScreen {
    display: none;
}

.contentContainer .fourthScreen, .contentContainer .fifthScreen, .contentContainer .sixthScreen {
    position: absolute;
    width: 25.6%;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
}

.contentContainer .fourthScreen svg, .contentContainer .fifthScreen svg, .contentContainer .sixthScreen svg {
    width: 100%;
}


.contentContainer .sixthScreen {
    width: 32%;
}

.lastScreen1 {
    font-family: 'Roboto', sans-serif !important;
}

.selection_svg6 {
    font-family: 'Roboto', sans-serif;
}

.selection_svg7 {
    font-size:27.2661px;
}

.selection_svg8 {
    font-size:23.5px;
}

.selection_svg_transparent{
    fill: transparent;
}

.selection_next_svg0 {
    fill:#FFFFFF;
}

.selection_next_svg1 {
    fill:#E7B13C;
}

.selection_next_svg2 {
    font-family: 'Roboto', sans-serif;
}

.selection_next_svg3 {
    font-size:23.5px;
}

.selection_next_svg4 {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

.selection_next_svg5 {
    font-size:36px;
}

.selection_next_svg6 {
    opacity:0.3;
    fill:none;
    stroke:#FFFFFF;
    stroke-miterlimit:10;
}

.selection_next_svg7 {
    fill:#FFFFFF;
    stroke:#FFFFFF;
    stroke-width:0.5;
    stroke-miterlimit:10;
}

.selection_next_svg8 {
    fill:none;
}

.selection_next_svg9 {
    font-size:22px;
    font-weight: 300;
}

.selection_next_svg10 {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
}


/* social Icons */
.socialIcons{
    position: absolute;
    width: 8%;
    right: 2vw;
    bottom: 2vw;
}

/* VR Icon */
.a-enter-vr{
    bottom: 40px !important;
}


#scene {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
}

.a-enter-vr-button {
    background: url('../images/vrIcon.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    min-width: 50px !important;
    min-height: 50px !important;
}


@media only screen and (max-width: 600px) {
    .logo, .socialIcons{
        width: 20vw;
    }
    .contentContainer .thirdScreen{
        width: 30vw;
    }
    .contentContainer .firstScreen {
        width: 35vw;
    }
    .contentContainer .secondScreen{
        width: 50vw;
    }
    .contentContainer .fourthScreen, .contentContainer .fifthScreen, .contentContainer .sixthScreen {
        width: 41vw;
    }
    .contentContainer .firstScreen p{
        font-size: 3vw;
    }
  }