@font-face {
    font-family: Yarden;
    src: url("yarden-regular-alefalefalef.otf") format("opentype");
}

@font-face {
    font-family: YardenBold;
    font-weight: bold;
    src: url("yarden-bold-alefalefalef.otf") format("opentype");
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-group {
    margin-bottom: 20px;
}

.row {
    max-width: 400px;
    margin: auto;
}

.input-guidance {
    font-size: small;
    opacity: 0.7;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.dt-input {
    margin-right: 10px;
}



.parent {
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
}

.container1 {
    height: 100%;
    aspect-ratio: 16/9;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}


.container2 {
    width: 100%;
    aspect-ratio: 16/9;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-size: contain;
    position: relative;
}

#welcome_container {
    background-image: url('Home/welcome_bg.jpg');
}

#menu_container {
    background-image: url('Home/menu_bg.jpg');
}

#puzzle_instructions_container {
    background-image: url('Home/puzzle/instructions_bg.jpg');
}

#puzzle_select_container {
    background-image: url('Home/puzzle/select_bg.jpg');
}

#artivive_container {
    background-image: url('Home/artivive/background.jpg');
}

#puzzle_game_container {
    background-image: url('Home/puzzle/game_bg1_easy.jpg');
}

#quiz_instructions_container {
    background-image: url('Home/quiz/bg_welcome.jpg');
}

#quiz_result_container {
    background-image: url('Home/quiz/bg_res.jpg');
}

#quiz_container {
    background-image: url('Home/quiz/background.jpg');
    flex-direction: column;
    justify-content: flex-start;
}

#about_container {
    background-image: url('Home/about/about_background.jpg');
}

#anims_container {
    background-image: url('Home/anims/anims_background.jpg');
}

#anims_dogs_container {
    background-image: url('Home/anims/anims_background_dogs.jpg');
}

#anims_container_inst {
    background-image: url('Home/anims/anims_background_inst.jpg');
}

#anims_container_assign {
    background-image: url('Home/anims/anims_background_assign.jpg');
}


#colors_container {
    background-image: url('Home/colors/colors_background.jpg');
}

#welcome_btn {
    height: 20.83%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: calc(100% * 787 / 1080);
}

.menu_btn {
    position: absolute;
}

#book_cover {
    background-image: url('Home/book/cover_background.jpg');
}

#book_movie_select {
    background-image: url('Home/book/select_book_or_movie.jpg');
}

#book_inst {
    background-image: url('Home/book/movie_book_inst.jpg');
}

#movie_container {
    background-image: url('Home/book/movie_background.jpg');
}

#book_pages {
    background-image: url('Home/book/pages_background.jpg');
}

#login_container {
    background-image: url('Home/login_bg.jpg');
}

#book_cover_next {
    position: absolute;
    height: calc(100% * 167 / 1080);
    left: calc(100% * 843 / 1920);
    top: calc(100% * 867 / 1080);
}

#book_movie_select_next {
    position: absolute;
    height: calc(100% * 167 / 1080);
    left: calc(100% * 63 / 1920);
    top: calc(100% * 867 / 1080);
}

#book_to_assign {
    position: absolute;
    height: calc(100% * 167 / 1080);
    left: calc(100% * 13 / 1920);
    top: calc(100% * 900 / 1080);
}

.book_menu_btn {
    position: absolute;
    height: calc(100% * 134 / 1080);
    left: calc(100% * 1640 / 1920);
    top: calc(100% * 20 / 1080);
}

.book_menu_btn > img {
    height: 100%;
}

#book_pages_next {
    position: absolute;
    height: calc(100% * 167 / 1080);
    left: calc(100% * 804 / 1920);
    top: calc(100% * 867 / 1080);
    z-index: 100;
}

#book_pages_prev {
    position: absolute;
    height: calc(100% * 164 / 1080);
    left: calc(100% * 979 / 1920);
    top: calc(100% * 87 / 1080);
    z-index: 100;
}

#book_back {
    position: absolute;
    height: calc(100% * 164 / 1080);
    left: calc(100% * 170 / 1920);
    top: calc(100% * 900 / 1080);
    z-index: 100;
}


#book_movie_prev {
    position: absolute;
    height: calc(100% * 164 / 1080);
    left: calc(100% * 170 / 1920);
    top: calc(100% * 900 / 1080);
    z-index: 100;
}


#book_page_img {
    position: absolute;
    height: calc(100% * 679 / 1080);
    left: calc(100% * 270 / 1920);
    top: calc(100% * 199 / 1080);
}

#puzzle_back_to_menu_btn {
    position: absolute;
    height: calc(100% * 153 / 1080);
    left: calc(100% * 898 / 1920);
    top: calc(100% * 904 / 1080);
}

#puzzle_instructions_continue_btn {
    position: absolute;
    height: calc(100% * 164 / 1080);
    left: calc(100% * 63 / 1920);
    top: calc(100% * 874 / 1080);
}

#puzzle_select_back_btn {
    position: absolute;
    height: calc(100% * 160 / 1080);
    left: calc(100% * 898 / 1920);
    top: calc(100% * 897 / 1080);
}

#puzzle_game_back_btn {
    position: absolute;
    height: calc(100% * 160 / 1080);
    left: calc(100% * 898 / 1920);
    top: calc(100% * 897 / 1080);
}

#puzzle_select_1_easy_btn {
    position: absolute;
    height: calc(100% * 214 / 1080);
    left: calc(100% * 324 / 1920);
    top: calc(100% * 649 / 1080);
}

#puzzle_select_1_hard_btn {
    position: absolute;
    height: calc(100% * 128 / 1080);
    left: calc(100% * 198 / 1920);
    top: calc(100% * 700 / 1080);
}

#puzzle_select_2_easy_btn {
    position: absolute;
    height: calc(100% * 214 / 1080);
    left: calc(100% * 946 / 1920);
    top: calc(100% * 649 / 1080);
}

#puzzle_select_2_hard_btn {
    position: absolute;
    height: calc(100% * 128 / 1080);
    left: calc(100% * 820 / 1920);
    top: calc(100% * 700 / 1080);
}

#puzzle_select_3_easy_btn {
    position: absolute;
    height: calc(100% * 214 / 1080);
    left: calc(100% * 1521 / 1920);
    top: calc(100% * 649 / 1080);
}

#puzzle_select_3_hard_btn {
    position: absolute;
    height: calc(100% * 128 / 1080);
    left: calc(100% * 1395 / 1920);
    top: calc(100% * 700 / 1080);
}

#puzzle_bgimg {
    position: absolute;
    height: calc(100% * 627 / 1080);
    left: calc(100% * 536 / 1920);
    top: calc(100% * 222 / 1080);
    opacity: 0.33;
}

#game_div {
    position: absolute;
    height: calc(100% * 660 / 1080);
    width: calc(100% * 1800 / 1920);
    left: calc(100% * 108 / 1920);
    top: calc(100% * 208 / 1080);
    overflow: hidden;
}

body {
    font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
    background-color: #fff;
    margin: 0;
    padding: 0;
    border-width: 0;
}

#menu {
    position: relative;
    list-style-type: none;
    padding-left: 5px;
    z-index: 1000;
    /* 1 */
    display: inline-block;
    text-align: center;
}

    #menu li {
        margin: 2px;
        padding: 4px 10px;
        border-radius: 5px;
        background-color: #ffff80;
    }

        #menu li:hover {
            background-color: #ffDD60;
        }


.polypiece {
    display: block;
    overflow: hidden;
    position: absolute;
}

.moving {
    transition-property: top, left;
    transition-duration: 1s;
    transition-timing-function: linear;
}

.gameCanvas {
    display: none;
    overflow: hidden;
    position: absolute;
}

#remaining_time {
    position: absolute;
    z-index: 140;
    right: calc(100% * 128 / 1920);
    top: calc(100% * 57 / 1080);
    color: white;
    font-size: 4cqw;
}

@media (min-aspect-ratio: 16/9) {
    #remaining_time {
        font-size: 7cqh;
    }
}

@media (max-aspect-ratio: 16/9) {
    #remaining_time {
        font-size: 4cqw;
    }
}

#artivive_menu_btn {
    position: absolute;
    height: calc(100% * 179 / 1080);
    left: calc(100% * 1500 / 1920);
    top: calc(100% * 20 / 1080);
}

    #artivive_menu_btn > img {
        height: 100%;
    }

#artvive_video {
    position: absolute;
    height: calc(100% * 541 / 1080);
    left: calc(100% * 795 / 1920);
    top: calc(100% * 407 / 1080);
}

#quiz_question_text {
}

#quiz_answers_container {
    direction: rtl;
    margin-right: calc(100% * 0 / 1920);
    margin-top: calc(100% * 105 / 1080);
    height: calc(100% * 422 / 1080);
}

.quiz_answer_row {
    display: flex;
    height: 25%;
    color: white;
    font-family: YardenBold;
}

#quiz_question_text {
    font-family: YardenBold;
    color: #fbc552;
}

@media (min-aspect-ratio: 16/9) {
    #quiz_question_text {
        font-size: 7.111cqh;
    }
}

@media (max-aspect-ratio: 16/9) {
    #quiz_question_text {
        font-size: 4cqw;
    }
}

.quiz_answer_text {
    padding-top: 1%;
    font-size: 2.6cqw;
    /* color | offset-x | offset-y | blur-radius */
    text-shadow: #000000aa -5px 5px 10px;
    cursor: pointer;
    transition: color 0.25s linear;
}

#quiz_back_to_menu_btn {
    position: absolute;
    height: calc(100% * 153 / 1080);
    left: calc(100% * 845p / 1920);
    top: calc(100% * 904 / 1080);
}

#quiz_instructions_continue_btn {
    position: absolute;
    height: calc(100% * 164 / 1080);
    left: calc(100% * 63 / 1920);
    top: calc(100% * 874 / 1080);
}


.quiz_number_img {
    height: 90%;
}

#video_bg_img {
    width: 100%;
}

#quiz_video_btn_menu {
    position: absolute;
    height: calc(100% * 153 / 1080);
    left: calc(100% * 850 / 1920);
    top: calc(100% * 904 / 1080);
}

#quiz_video_btn_next {
    position: absolute;
    height: calc(100% * 153 / 1080);
    left: calc(100% * 115 / 1920);
    top: calc(100% * 890 / 1080);
}

#quiz_question_btn_next {
    position: absolute;
    height: calc(100% * 153 / 1080);
    left: calc(100% * 115 / 1920);
    top: calc(100% * 890 / 1080);
}

#quiz_question_btn_prev {
    position: absolute;
    height: calc(100% * 153 / 1080);
    left: calc(100% * 285 / 1920);
    top: calc(100% * 890 / 1080);
}

#quiz_video {
    position: absolute;
    opacity: 1;
    transition: opacity 1s linear;
}

#about_btn_menu {
    position: absolute;
    height: calc(100% * 200 / 1080);
    left: calc(100% * 38 / 1920);
    top: calc(100% * 818 / 1080);
}

#about_video {
    position: absolute;
    height: calc(100% * 784 / 1080);
    left: calc(100% * 285 / 1920);
    top: calc(100% * 210 / 1080);
}

#anims_btn_next {
    position: absolute;
    height: calc(100% * 164 / 1080);
    left: calc(100% * 56 / 1920);
    top: calc(100% * 859 / 1080);
}

#anims_btn_prev {
    position: absolute;
    height: calc(100% * 161 / 1080);
    left: calc(100% * 228 / 1920);
    top: calc(100% * 859 / 1080);
}

.anims_btn_menu {
    position: absolute;
    height: calc(100% * 134 / 1080);
    left: calc(100% * 1596 / 1920);
    top: calc(100% * 905 / 1080);
}

.anims_btn_menu > img {
    height: 100%;
}

#anims_frame {
    position: absolute;
    height: calc(100% * 760 / 1080);
    left: calc(100% * 510 / 1920);
    top: calc(100% * 212 / 1080);
}

#anims_video {
    position: absolute;
    z-index: 100;
}

#anims_title {
    font-family: YardenBold;
    color: #fb8952;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 2%;
    margin: 0;
    text-shadow: #00000077 10px -10px 20px;
}

@media (min-aspect-ratio: 16/9) {
    #anims_title {
        font-size: 7.111cqh;
    }
}

@media (max-aspect-ratio: 16/9) {
    #anims_title {
        font-size: 4cqw;
    }
}

#colors_btn_menu {
    position: absolute;
    height: calc(100% * 143 / 1080);
    left: calc(100% * 854 / 1920);
    top: calc(100% * 915 / 1080);
}

#colors_link_phone {
    position: absolute;
    height: calc(100% * 55 / 1080);
    width: calc(100% * 580 / 1920);
    left: calc(100% * 190 / 1920);
    top: calc(100% * 920 / 1080);
}

#colors_link_email {
    position: absolute;
    height: calc(100% * 55 / 1080);
    width: calc(100% * 580 / 1920);
    left: calc(100% * 190 / 1920);
    top: calc(100% * 985 / 1080);
}

#login_input_username {
    position: absolute;
    height: calc(100% * 61 / 1080);
    width: calc(100% * 520 / 1920);
    left: calc(100% * 756 / 1920);
    top: calc(100% * 242 / 1080);
}

#login_input_username input {
    background-color: transparent;
    height: 100%;
    width: 100%;
    border: 0;
    color: white;
    border-radius: 0px;
    margin: 0;
    padding: 0 5%;
}

@media (min-aspect-ratio: 16/9) {
    #login_input_username input {
        font-size: 3.55cqh;
    }
}

@media (max-aspect-ratio: 16/9) {
    #login_input_username input {
        font-size: 2cqw;
    }
}

#login_input_username input::placeholder {
    font-size: 2cqw;
    color: #ffffffab;
    margin: 0;
    padding: 20px;
    text-align: center
}


#login_input_pw {
    position: absolute;
    height: calc(100% * 61 / 1080);
    width: calc(100% * 520 / 1920);
    left: calc(100% * 756 / 1920);
    top: calc(100% * 366 / 1080);
}

    #login_input_pw input {
        background-color: transparent;
        height: 100%;
        width: 100%;
        border: 0;
        color: white;
        border-radius: 0px;
        margin: auto;
        padding: 0 5%;
    }


@media (min-aspect-ratio: 16/9) {
    #login_input_pw input {
        font-size: 3.55cqh;
    }
}

@media (max-aspect-ratio: 16/9) {
    #login_input_pw input {
        font-size: 2cqw;
    }
}

#login_input_pw input::placeholder {
    font-size: 2cqw;
    color: #ffffffab;
    margin: 0;
    padding: 20px;
    text-align: center
}


.text-danger {
    color: #ffb6b6 !important;
    position: absolute;
    top: 50%;
    right: 102%;
    width: 200%;
    transform: translate(0, -50%);
    direction: rtl;
}

@media (min-aspect-ratio: 16/9) {
    .text-danger {
        font-size: 3cqh;
    }
}

@media (max-aspect-ratio: 16/9) {
    .text-danger {
        font-size: 1.66cqw;
    }
}


#login-submit {
    background-color: transparent;
    border: 0;
}

#muteButton {
    position: absolute;
    height: 10%;
    left: calc(100% * 30 / 1920);
    top: calc(100% * 30 / 1080);
    z-index: 1000;
    background-color: transparent;
    border: 0;
    padding: 0;
    margin: 0;
}

.muteContainer1 {
    height: 100%;
    aspect-ratio: 16/9;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}


.muteContainer2 {
    width: 100%;
    aspect-ratio: 16/9;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-size: contain;
    position: relative;
}

#muteButtonImg {
    height: 100%;
}

#quiz_res_score {
    font-family: YardenBold;
    color: white;
    position: absolute;
    left: 49.3%;
    transform: translate(-50%, 0);
    top: 28%;
    margin: 0;
    text-shadow: #00000026 -6px 6px 2px;
}

@media (min-aspect-ratio: 16/9) {
    #quiz_res_score {
        font-size: 5.4cqh;
    }
}

@media (max-aspect-ratio: 16/9) {
    #quiz_res_score {
        font-size: 3cqw;
    }
}

#quiz_res_time {
    font-family: YardenBold;
    color: white;
    position: absolute;
    left: 53.3%;
    transform: translate(-50%, 0);
    top: 41.5%;
    margin: 0;
    text-shadow: #00000026 -6px 6px 2px;
}

@media (min-aspect-ratio: 16/9) {
    #quiz_res_time {
        font-size: 5.4cqh;
    }
}

@media (max-aspect-ratio: 16/9) {
    #quiz_res_time {
        font-size: 3cqw;
    }
}

#select_frame_movie {
    position: absolute;
    height: calc(100% * 466 / 1080);
    left: calc(100% * 145 / 1920);
    top: calc(100% * 281 / 1080);
    opacity: 0.01;
}

#select_frame_book {
    position: absolute;
    height: calc(100% * 695 / 1080);
    left: calc(100% * 1062 / 1920);
    top: calc(100% * 197 / 1080);
    opacity: 0.01;
}

#movie_video {
    position: absolute;
    height: calc(100% * 740 / 1080);
    left: calc(100% * 460 / 1920);
    top: calc(100% * 200 / 1080);
}


#anims_desc {
    font-family: YardenBold;
    color: #fae4d9;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 10%;
    margin: 0;
    text-shadow: #00000077 10px -10px 20px;
}

@media (min-aspect-ratio: 16/9) {
    #anims_desc {
        font-size: 3.63cqh;
    }
}

@media (max-aspect-ratio: 16/9) {
    #anims_desc {
        font-size: 2.3cqw;
    }
}

#anims_video_dogs1 {
    position: absolute;
    height: calc(100% * 599 / 1080);
    left: calc(100% * 287 / 1920);
    top: calc(100% * 258 / 1080);
}

#anims_video_dogs2 {
    position: absolute;
    height: calc(100% * 596 / 1080);
    left: calc(100% * 697 / 1920);
    top: calc(100% * 261 / 1080);
}

#anims_video_dogs3 {
    position: absolute;
    height: calc(100% * 276 / 1080);
    left: calc(100% * 1103 / 1920);
    top: calc(100% * 258 / 1080);
}

#anims_video_dogs4 {
    position: absolute;
    height: calc(100% * 275 / 1080);
    left: calc(100% * 1103 / 1920);
    top: calc(100% * 580 / 1080);
}

#acceptTOC {
    position: absolute;
    height: calc(100% * 25 / 1080);
    width: calc(100% * 24 / 1920);
    left: calc(100% * 1800 / 1920);
    top: calc(100% * 972 / 1080);
    opacity: 0.1;
}

#acceptTOC:checked{
    opacity: 1;
}


#acceptPP {
    position: absolute;
    height: calc(100% * 25 / 1080);
    width: calc(100% * 24 / 1920);
    left: calc(100% * 1800 / 1920);
    top: calc(100% * 930 / 1080);
    opacity: 0.1;
}

#acceptPP:checked {
    opacity: 1;
}

#ppDLLink {
    position: absolute;
    height: calc(100% * 40 / 1080);
    width: calc(100% * 600 / 1920);
    left: calc(100% * 1190 / 1920);
    top: calc(100% * 915 / 1080);
    opacity: 0.01;
    cursor: pointer;
}

#tocDLLink {
    position: absolute;
    height: calc(100% * 40 / 1080);
    width: calc(100% * 600 / 1920);
    left: calc(100% * 1190 / 1920);
    top: calc(100% * 967 / 1080);
    opacity: 0.01;
    cursor: pointer;
}