.PageContainer {
    position: absolute;
    top: 0;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    overflow: hidden;
}
.CssHIDE {
    display: none!important;
}
.CssSHOW {
    display: inline-block!important;
}


.Header {
    position: relative;
}

.HeaderLogo {
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
    height: 14vw;
    max-height: 132px;
}


.HeaderLandscapeImage{
    width:100%;
}
.HeaderPortraitImage {
    width: 100%;
}
.QuestionNoText {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    color: white;
    font-family: DS-DIGI;
    font-size: 8vw;
}
.QuestionTextPositionContainer {
    position: relative;
    top: -9vw;
    height: 100%;
}

.QuestionTextInSideContainer {
    position: relative;
    top: 0px;
    left: 50%;
    height: 80%;
    width: 48%;
    transform: translateX(-50%);
    background-color: #2AC2DE;
    border-radius: 25px;
}
.AnswerTextInSideContainer {
    position: relative;
    top: 0px;
    left: 50%;
    height: 80%;
    width: 48%;
    transform: translateX(-50%);
    background-color: #8546AC;
    border-radius: 25px;
}
.QuesationText {
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    font-size: 5.5vh;
    text-align: center;
    width: 77%;
    color:white;
}


.ReturnButtonContainer {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 200px;
    width: 26%;
}
.QuestionButtonContainer {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    height: 200px;
    width: 26%;
}
.ReturnButton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}
.AnswerButton {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}
.NextButtonImage {
    position: absolute;
    margin-left: 9px;
}

.ReturnButtonImage {
    position: absolute;
    margin-left: -17px;
}
@media only screen and (max-height: 290px) {
    .AnswerButton {
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-50%,-50%)
    }
    .ReturnButton {
        position: absolute;
        top: 70%;
        left: 50%;
        transform: translate(-50%,-50%)
    }
}
.ButtonContainer a:link, a:visited {
    background-color: #8546AC;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 25px;
    width: 200px;
}
@media screen and ( orientation:portrait ) {

    .HeaderPortraitImage {
        display: block;
    }
    .HeaderLandscapeImage {
        display: none;
    }
    .QuestionTextPositionContainer {
        position: relative;
        top: 0;
        height: 100%;
    }

    .QuestionButtonContainer {
        position: absolute;
        top: unset;
        right: unset;
        bottom: 17%;
        left: 50%;
        transform: translateX(-50%);
        height: 0px;
    }
    .ReturnButtonContainer {
        position: absolute;
        top: unset;
        right: unset;
        bottom: 7%;
        left: 50%;
        transform: translateX(-50%);
        height: 0px;
        
    }

    .QuestionTextInSideContainer {
        position: relative;
        top: 34%;
        left: 50%;
        height: 59%;
        width: 90%;
        transform: translate(-50%,-50%);
        background-color: #2AC2DE;
        border-radius: 25px;
    }
    .AnswerTextInSideContainer {
        position: relative;
        top: 34%;
        left: 50%;
        height: 59%;
        width: 90%;
        transform: translate(-50%,-50%);
        background-color: #8546AC;
        border-radius: 25px;
    }
    .QuesationText {
        position: absolute;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        font-size: 4vh;
        width: 70%;
    }
    
}
@media screen and ( orientation:landscape ) {
    .HeaderPortraitImage {
        display: none;
    }
    .HeaderLandscapeImage {
        display: block;
    }

    .ButtonContainer a:link, a:visited {
        width: 133px;
    }
}