@font-face {
    font-family: 'GothamPro';
    src: url('../fonts/GothamPro.woff') format('woff');
}

@font-face {
    font-family: 'GothamPro-Black';
    src: url('../fonts/GothamPro-Black.woff') format('woff');
}

@font-face {
    font-family: 'GothamPro-Light';
    src: url('../fonts/GothamPro-Light.woff') format('woff');
}

*, *:before, *:after, a {
    box-sizing: border-box;
    outline: none;
}

html {
    font-size: 100%;
}

body {
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    color: #ffffff;
    background-color: #000000;
    font-family: 'GothamPro';
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: antialiased;
}

a:link, a:visited, a:focus, a:hover {
    outline: none;
    text-decoration: none;
    color: #A3FF8A;
}

input, textarea, button, select {
    outline: none;
    font-family: 'GothamPro';
    font-size: 100%;
    -webkit-appearance: none;
}

.delimeter_5vh { width: 100%; height: 5vh; }
.delimeter_10vh { width: 100%; height: 10vh; }
.color_green { color: #A3FF8A; }

/* видео фон */
.bg_video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100vh;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);

    background-image: url(../images/alien_meteor_hd.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/* переход */
#transition_layer {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    padding-top: 90px;
    z-index: 20;
    opacity: 0;
}

#transition_block {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(100vh - 90px);
    background: #000000;
    text-align: center;
}

#transition_circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 20vw;
    height: 20vh;
    border-radius: 50%;
    background: #000000;
    box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #49ff18, 0 0 30px #49ff18, 0 0 40px #49ff18, 0 0 55px #49ff18, 0 0 75px #49ff18;
}

@media all and (min-width: 1px)and (max-width: 960px) {
    #transition_layer { padding-top: 50px; }
    #transition_block { height: calc(100vh - 50px); }
}



/* лого и оформление */
#aliens_layer {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    z-index: 10;
    background-image: url(../images/alien_top_left.png), url(../images/alien_top_right.png);
    background-position: left 90px, right 90px;
    background-repeat: no-repeat, no-repeat;
    background-size: auto 50vh, auto 50vh;
}

#tv1000action_logo {
    position: fixed;
    left: 5vw;
    top: 120px;
    width: 15vw;
    height: 10vw;
    z-index: 20;
    background-image: url(../images/tv1000action_logo_red.svg);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100% auto;
}

#tv1000action_link {
    display: block;
    position: fixed;
    right: 5vw;
    top: 120px;
    z-index: 20;
    background-image: url(../images/tv1000action_logo_white.svg), radial-gradient(ellipse at center, rgba(0,0,0,0.7) 10%,rgba(0,0,0,0) 85%);
    background-position: left center, center center;
    background-repeat: no-repeat, no-repeat;
    background-size: 100% auto, 100% 100%;
    text-align: right;
}

.tv1000action_link_gap {
    display: block;
    width: 100%;
    height: 4.5rem;
}

@media all and (min-width: 1px)and (max-width: 960px) {
    #aliens_layer { background-position: left 50px, right 50px; background-size: auto 30vh, auto 30vh; }
    #tv1000action_link { display: none; }
}




/* условия */
#fist_page_rules_link {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    display: inline-block;
    color: #ffffff;
    font-size: 90%;
    padding: 1rem;
    text-decoration: underline;
    cursor: pointer;
    z-index: 100;
}

#layer_rules {
    z-index: 50;
}

#layer_rules_overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    z-index: 40;
}

.rules_center {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    padding-top: 100px;
}

.rules_table {
    display: table;
    width: 100%;
    height: calc(100vh - 100px);
}

.rules_row {
    display: table-row;
    width: 100%;
    height: calc(100vh - 100px);
}

.rules_cell {
    display: table-cell;
    width: 100%;
    height: calc(100vh - 100px);
    text-align: center;
    vertical-align: middle;
}

#rules_body {
    display: inline-block;
    background:  rgba(0, 0, 0, 0.8);
    border-radius: 8px;
    border: 1px solid #A3FF8A;
    padding: 1rem;
    width: 100%;
    max-width: 40vw;
    height: auto;
}

#rules_text {
    overflow-y: scroll;
    max-height: calc(70vh - 100px);
    text-align: left;
    padding: 0.5rem;
    font-size: 80%;
}

.rules_header {
    text-align: center;
    font-weight: 700;
    font-size: 150%;
}

.rules_subheader {
    text-align: left;
    font-weight: 700;
}

#rules_close_line {
    width: 100%;
    text-align: center;
    margin-top: 1rem;
}

#rules_close_button {
    display: inline-block;
    width: 150px;
    font-size: 80%;
    font-weight: 700;
    color: #000000;
    text-align: center;
    padding: 0.3rem;
    border-radius: 4px;
    background: #A3FF8A;
    cursor: pointer;
}


@media all and (min-width: 961px)and (max-width: 1600px) {
    #rules_text { font-size: 80%; }
}

@media all and (min-width: 1px)and (max-width: 960px) {
    #rules_body { max-width: 95vw; }
    #rules_text { font-size: 90%; }
    .rules_header { font-size: 120%; }
    #fist_page_rules_link { left: 0; bottom: 0; width: 100%; padding: 0.5rem; text-align: center; }
}



/* контент */
.content_center {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    padding-top: 100px;
    z-index: 15;
}

.content_table {
    display: table;
    width: 100%;
    height: calc(100vh - 100px);
}

.content_row {
    display: table-row;
    width: 100%;
    height: calc(100vh - 100px);
}

.content_cell {
    display: table-cell;
    width: 100%;
    height: calc(100vh - 100px);
    text-align: center;
    vertical-align: middle;
}

.content_body {
    display: inline-block;
}

.button_line {
    width: 100%;
    text-align: center;
}

.next_button {
    display: inline-block;
    box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #49ff18, 0 0 30px #49ff18, 0 0 40px #49ff18, 0 0 55px #49ff18, 0 0 75px #49ff18;
    border-radius: 8px;
    padding: 8px 16px 8px 16px;
    background: rgba(0, 0, 0, 0.5);
    transition: all 400ms;
    cursor: pointer;
}

.next_button:hover {
    background: rgba(73, 255, 24, 0.5);
}

@media all and (min-width: 1px)and (max-width: 960px) {
    .content_center { padding-top: 60px; }
    .content_table { height: calc(100vh - 60px); }
    .content_row { height: calc(100vh - 60px); }
    .content_cell { height: calc(100vh - 60px); }
}



/* главная */
#content_page1 {
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 75%);
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 30%,rgba(0,0,0,0) 75%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%,rgba(0,0,0,0) 75%);
    padding-right: 5vw;
    padding-left: 5vw;
}

.main_egg_image {
    height: 30vh;
    width: auto;
}

.main_film_text {
    font-size: 200%;
}

.main_film_title {
    font-size: 400%;
    font-family: 'GothamPro-Light';
    color: #fff;
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #49ff18, 0 0 30px #49ff18, 0 0 40px #49ff18, 0 0 55px #49ff18, 0 0 75px #49ff18;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.main_film_slogan {
    margin-top: 1.5rem;
    font-size: 90%;
}


@media all and (min-width: 1px)and (max-width: 960px) {
    #tv1000action_link { display: none; }
    #tv1000action_logo { left: 0vw; top: 80px; width: 100%; height: 18vw; background-size: auto 100%; background-position: center top; }
    .main_film_text { font-size: 120%; }
    .main_film_title { font-size: 210%; }
    #content_page1 { margin-top: 50px; }
}


/* предисловие */
.block_info_top {
    position: relative;
    width: 60vw;
    border-radius: 8px;
    padding: 2vw;
    margin-top: 2vh;
    margin-bottom: 1vh;
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 75%);
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 30%,rgba(0,0,0,0) 75%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%,rgba(0,0,0,0) 75%);
}

.block_info {
    position: relative;
    width: 60vw;
    border-radius: 8px;
    padding: 2vw;
    margin-top: 1vw;
    margin-bottom: 2vw;

    background: rgba(0, 0, 0, 0.7);
}

.block_info_text1 {
    text-align: center;
    color: #A3FF8A;
    font-size: 130%;
    font-family: 'GothamPro-Black';
    margin-bottom: 5vh;
}

.block_info_text2 {
    text-align: center;
    font-size: 90%;
    font-family: 'GothamPro-Black';
}


.block_info_image {
    width: 100%;
    height: auto;
}


.block_info_stop1 {
    animation: flashing 1s linear infinite;
    padding: 0.8rem;
    background: #750016;
    display: inline-block;
    border-radius: 8px;
}

@keyframes flashing {
    50% { opacity: 0; }
}

.down_arrow_line {
    position: relative;
    width: 100%;
    height: 2rem;
    margin-top: -5rem;
    margin-bottom: 5rem;
    animation: 2s ease-in-out infinite cursor_move;
    -webkit-animation: 2s ease-in-out infinite cursor_move;
}

.down_arrow_white {
    margin: 0 auto;
    width: 2rem;
    height: 2rem;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' viewBox='0 0 404.257 404.257' style='enable-background:new 0 0 404.257 404.257;' xml:space='preserve'%3E%3Cpolygon points='386.257,114.331 202.128,252.427 18,114.331 0,138.331 202.128,289.927 404.257,138.331 ' fill='%23FFFFFF'/%3E%3C/svg%3E%0A");
    background-size: 2rem 2rem;
    background-position: center center;
    background-repeat: no-repeat;
    cursor: pointer;
}

@keyframes cursor_move {
    from,to {top: 0; opacity: 1;}
    40% {top: 0; opacity: 1;}
    55% {top: 20px; opacity: 0;}
    60% {top: 0; opacity: 1;}
}


@media all and (min-width: 1px)and (max-width: 960px) {
    .block_info_top { width: 100%; padding: 2rem; margin-top: 0; }
    .block_info { width: 100%; padding: 2rem; margin-top: 0; }
    .block_info_text1 { font-size: 80%; margin-bottom: 0; }
    .block_info_text2 { font-size: 80%;  }
    .down_arrow_line { margin-top: -2rem; margin-bottom: 2rem; }
}




/* вопросы */
.quest_page_block {
    width: 100%;
    max-width: 50vw;
    text-align: center;
}

.quest_page_question {
    width: 100%;
    text-align: center;
    color: #A3FF8A;
    font-size: 150%;
    font-family: 'GothamPro-Black';
    padding: 0.5rem;
}

.quest_page_button_grid {
    width: 100%;
}

.quest_page_button {
    display: block;
    font-size: 120%;
    color: #ffffff;
    text-align: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
    margin-top: 8px;
    border-radius: 8px;
    transition: all 800ms;
}

.quest_page_active_button {
    cursor: pointer;
}

.quest_page_active_button:hover {
    background: rgba(73, 255, 24, 0.5);
}

.quest_page_replay {
    width: 100%;
    text-align: center;
    color: #ffffff;
    font-size: 130%;
    font-weight: 800;
    padding: 0.5rem;
}

.quest_page_replay_link {
    width: 100%;
    text-align: center;
    color: #A3FF8A;
    font-size: 80%;
}

@media all and (min-width: 1px)and (max-width: 960px) {
    .quest_page_block { max-width: 100%; padding: 2rem; margin-top: 50px; }
    .quest_page_question { font-size: 90%; }
    .quest_page_button { font-size: 90%; }
    .quest_page_replay { font-size: 90%; }
}




/* результаты */
.block_result {
    width: 100%;
    max-width: 40vw;
    background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 75%);
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,1) 30%,rgba(0,0,0,0) 75%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%,rgba(0,0,0,0) 75%);
}

#last_page_result_count {
    font-size: 110%;
    font-family: 'GothamPro-Black';

    margin-bottom: 1.5vh;
}

.last_page_result_text {
    width: 100%;
    font-size: 120%;
    font-family: 'GothamPro-Black';
    color: #A3FF8A;
}

.last_page_image {
    width: 100%;
    height: auto;
}

.last_page_info {
    margin-top: 8px;
    margin-bottom: 8px;
}


.email_input_line {
    text-align: center;
}

.email_input {
    width: 200px;
    padding: 4px;
    color: #ffffff;
    border: 1px solid #A3FF8A;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 4px 4px 0px 0px;
}

.email_send_button {
    width: 200px;
    padding: 8px;
    border-radius: 0px 0px 4px 4px;
    border: 1px solid #A3FF8A;
    background: #3A6141;
    font-size: 70%;
    display: inline-block;
    cursor: pointer;
}

.last_page_share_header {
    margin-top: 2vh;
}

.last_page_dosye {
    margin-top: 2vh;
}

@media all and (min-width: 1px)and (max-width: 960px) {
    .block_result { max-width: 100%; padding: 1rem 2rem 1rem 2rem; }
    #last_page_result_count { font-size: 100%; }
    .last_page_result_text { font-size: 80%; }
    .last_page_info { font-size: 90%; }
    .last_page_dosye { margin-top: 0; }
}




/* фильм */
.block_film {
    width: 100%;
    max-width: 70vw;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.block_film_poster {
    width: 25%;
}

.block_film_text {
    width: 70%;
    text-align: justify;
    background: rgba(0,0,0,0.7);
    border-radius: 8px;
    padding: 2vw;
    height: 65vh;
}

.block_film_text p {
    margin-top: 0;
    padding-top: 0;
}

.block_film_year {
    width: 100%;
    font-size: 200%;
    font-family: 'GothamPro-Black';
    text-align: left;
}

.block_film_slogan {
    width: 100%;
    font-size: 120%;
    font-family: 'GothamPro-Black';
    text-align: left;
    color: #A3FF8A;
    margin-bottom: 2vh;
}

.block_film_poster_image {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.block_film_copyright {
    width: 100%;
    text-align: center;
    font-size: 80%;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 3vh;
}

@media all and (min-width: 1px)and (max-width: 960px) {
    .block_film { display: block; max-width: 100%; padding: 1rem; }
    .block_film_poster { width: 100%; }
    .block_film_text { width: 100%; height: auto; font-size: 90%; }
    .block_film_copyright { margin-top: 2rem; margin-bottom: 2rem; }
}