/**
 * Landing styles
 * 
 * @package    AOC template
 * @author     Alejandro Caballero - lava.caballero@gmail.com
 */

body.home #body_wrapper { position: relative; }
body.home #content      { width: 100vw; padding: 0; }

.landing_container { width: calc(100% + 3px); position: relative; font-size: 14pt; line-height: normal; }

.landing_segment { position: relative; width: 100%; margin: 0; padding: 100px 0 100px 0; }

.landing_segment.opening                         { white-space: nowrap; overflow: hidden; padding: 0; height: 100vh; }
.landing_segment.opening video                   { width: 100%; height: 100%; position: absolute; top: 0; left: 0;
                                                   object-position: center center; object-fit: cover; }
.landing_segment.opening video:not(:first-child) { display: none; }

.landing_container h1 { font-size: 34pt; line-height: normal; }
.landing_container h2 { font-size: 28pt; line-height: normal; }
.landing_container h3 { font-size: 18pt; line-height: normal; }

.landing_container div > h1:first-child ,
.landing_container div > h2:first-child ,
.landing_container div > h3:first-child { margin-top: 0; }

.landing_container h1.highlighted span ,
.landing_container h2.highlighted span ,
.landing_container h3.highlighted span { position: relative; }

.landing_container h1.highlighted span:after ,
.landing_container h2.highlighted span:after ,
.landing_container h3.highlighted span:after {
    display: inline-block; content: '';
    background: url('../heading_highlight.png') top left no-repeat; background-size: auto 100%;
    position: absolute; left: -15%; top: -20%; width: 115%; height: 140%;
    mix-blend-mode: screen; filter: brightness(2); 
    z-index: 1; pointer-events: none;
}

/* Saylor */

.landing_segment.saylor {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII=') center center no-repeat,
                url('saylor/background.jpg') top center fixed no-repeat;
    background-size: cover, cover;
    text-align: center;
}

#saylor_img {
    position: absolute; right: 0; bottom: -50px; width: 55%; max-width: 650px; z-index: 10; pointer-events: none;
}

.landing_segment.saylor                      { height: 800px; }
.landing_segment.saylor .info                { width: 50%; height: 100%; }
.landing_segment.saylor .info .logo          { height: 20%; background: url('saylor/logo.png') center center no-repeat; background-size: contain; }
.landing_segment.saylor .info .info_scroller { height: calc(80% - 80px); padding: 0 40px; margin-left: 40px; overflow: auto; }
.landing_segment.saylor .info .info_content  { text-align: left; font-size: 1.4em; line-height: normal; }
.landing_segment.saylor .info .info_content *:first-child { margin-top: 0;    padding-top: 0;    }
.landing_segment.saylor .info .info_content *:last-child  { margin-bottom: 0; padding-bottom: 0; }
.landing_segment.saylor .info .info_scroller { transform: scaleX(-1); }
.landing_segment.saylor .info .info_content  { transform: scaleX(-1); }
.landing_segment.saylor .info .button        { height: 60px; margin-top: 40px; position: relative; text-align: left; }
.landing_segment.saylor .info .button .lbutton { font-size: 1.4em; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }

@media all and (max-width: 480px) {
    .landing_segment.saylor                      { height: auto; margin-bottom: -100px; }
    .landing_segment.saylor .info                { width: 100%; height: auto; }
    .landing_segment.saylor .info .logo          { height: 200px; }
    .landing_segment.saylor .info .info_scroller { height: auto; margin-left: 0; }
    #saylor_img                                  { position: relative; width: 100%; }
}

/* Packs */

.landing_segment.packs {
    background: url('packs/background.jpg') bottom center fixed no-repeat;
    background-size: cover;
    text-align: center;
    height: auto;
}

.landing_segment.packs .ufo {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url('packs/ufo.png') right center no-repeat;
    background-size: contain;
    pointer-events: none;
}

.landing_segment.packs .pack_shots {
    padding: 40px 20% 40px 20%;
    display: flex; flex-wrap: wrap;
    background: url('packs/play_to_earn.png') 60px center no-repeat; background-size: calc(20% - 80px) auto;
}

.landing_segment.packs .pack_shots .pack_item          { text-align: center; width: 33%; padding: 20px; }
.landing_segment.packs .pack_shots .pack_item h3       { height: 3.5em; }
.landing_segment.packs .pack_shots .pack_item img.shot { width: 100%; vertical-align: top; }
.landing_segment.packs .pack_shots .pack_item .info    { border: 2px solid #ffa910; border-radius: 20px;
                                                         padding: 20px; margin-top: 20px; margin-bottom: 40px;  }
.landing_segment.packs .pack_shots .pack_item .info ul { text-align: left; margin-left: -16px; }
.landing_segment.packs .pack_shots .pack_item .info li { height: 3em; }

@media all and (max-width: 1024px) {
    .landing_segment.packs .ufo                            { display: none; }
    .landing_segment.packs .pack_shots                     { background-position: top center;
                                                             background-size: auto 220px;
                                                             padding-top: 260px; }
    .landing_segment.packs .pack_shots .pack_item          { width: 100%; padding-left: 0; padding-right: 0; }
    .landing_segment.packs .pack_shots .pack_item img.shot { width: 80%; }
}

@media all and (max-width: 480px) {
    .landing_segment.packs .pack_shots { padding-left: 20px; padding-right: 20px; }
}

/* Game */

.landing_segment.game {
    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII=') center center no-repeat,
                url('game/background.jpg') bottom center fixed no-repeat;
    background-size: cover, cover;
    text-align: center;
    height: auto;
    padding-left: 40px; padding-right: 40px;
}

.landing_segment.game table              { width:100%; }
.landing_segment.game table td           { width: 25%; }
.landing_segment.game table .card        { width: 100%; border-radius: 3.3%; box-shadow: 5px 5px 10px black; }
.landing_segment.game       .board       { position: relative; }
.landing_segment.game       .board img   { box-shadow: 5px 5px 10px black; width: 90%; }

.landing_segment.game .minigame     { text-align: left; font-size: 18pt; line-height: normal; padding-left: 10%; padding-right: 10%; }
.landing_segment.game .minigame img { float: right; height: 180px; margin: 0 0 10px 10px; box-shadow: 5px 5px 10px black; }

@media all and (max-width: 1024px) {
    .landing_segment.game table              ,
    .landing_segment.game tbody              ,
    .landing_segment.game table tr           ,
    .landing_segment.game table td           { display: block; width: 100%; }
    .landing_segment.game table .card        { width: 40%; }
    .landing_segment.game .minigame          { padding-left: 5%; padding-right: 5%; }
}

@media all and (max-width: 480px) {
    .landing_segment.game                    { padding-left: 20px; padding-right: 20px; }
    .landing_segment.game table .card        { width: 90%; }
    .landing_segment.game .minigame img      { float: none; height: unset; margin: 0; width: 100%; }
    .landing_segment.game .minigame          { padding-left: 20px; padding-right: 20px; }
}

/* Betting & win to earn */

.shared_background {
    background: url('bottom/background.jpg') bottom center no-repeat;
    background-size: cover;
}

.landing_segment.win_to_earn { text-align: left; }

/*
.landing_segment.win_to_earn .hole  { position: absolute; margin-top: -250px;
                                      width: 40%; margin-left: 10%;
                                      mix-blend-mode: screen; pointer-events: none; }
.landing_segment.win_to_earn .infos { width: 50%; margin-left: 40px; margin-top: 300px; }
.landing_segment.win_to_earn .info  { background: black; border: 2px solid #ffa910; border-radius: 20px;
                                      padding: 20px; margin-top: 20px;  }
.landing_segment.win_to_earn .info:first-child { margin-top: 0; }

#wte_img {
    position: absolute; right: 0; bottom: -100px; width: 50%; max-width: 650px; z-index: 10; pointer-events: none;
}

@media all and (max-width: 768px) { .landing_segment.win_to_earn .hole { margin-top: -120px; }  }
@media all and (max-width: 480px) {
    .landing_segment.win_to_earn .hole   { margin-top: -120px; width: calc(100% - 50px); }
    .landing_segment.win_to_earn .infos  { width: 100%; margin-left: 0; padding: 0 20px; margin-top: 300px; }
    #wte_img                             { width: calc(100% - 20px); margin-left: 20px;
                                           position: relative; margin-top: -40px; }
}
@media all and (min-width: 1400px) {
    .landing_segment.win_to_earn .hole  { margin-top: -280px; }
    .landing_segment.win_to_earn .infos { margin-top: 340px; }
}
@media all and (min-width: 1800px) {
    .landing_segment.win_to_earn .hole  { margin-top: -360px; }
    .landing_segment.win_to_earn .infos { margin-top: 440px; }
}
@media all and (min-width: 2500px) {
    .landing_segment.win_to_earn .hole  { margin-top: -380px; }
    .landing_segment.win_to_earn .infos { margin-top: 640px; }
}
*/

.landing_segment.win_to_earn .infos { width: 50%; margin-left: 40px; }
.landing_segment.win_to_earn .info  { background: black; border: 2px solid #ffa910; border-radius: 20px;
                                      padding: 20px; margin-top: 20px;  }
.landing_segment.win_to_earn .info:first-child { margin-top: 0; }

#wte_img {
    position: absolute; right: 0; bottom: -100px; width: 50%; max-width: 650px; z-index: 10; pointer-events: none;
}


@media all and (max-width: 480px) {
    .landing_segment.win_to_earn .infos  { width: 100%; margin-left: 0; padding: 0 20px; }
    #wte_img                             { width: calc(100% - 20px); margin-left: 20px;
                                           position: relative; margin-top: -40px; }
}


/* Bottom */

.landing_segment.bottom { text-align: center; height: auto; padding-top: 50px; }

.landing_segment.bottom .infos { width: 50%; margin-left: 50%; padding-right: 40px; }
.landing_segment.bottom .info  { background: black; border: 2px solid #ffa910; border-radius: 20px;
                                 padding: 20px; margin-top: 20px; display: inline-block;  }
.landing_segment.bottom .info:first-child { margin-top: 0; }

.landing_segment.bottom .info.discord      { padding-left: 40px; padding-right: 40px; }
.landing_segment.bottom .info.social a img { height: 2em; vertical-align: top; }

@media all and (max-width: 480px) {
    .landing_segment.bottom .infos { padding: 0 20px; width: 100%; margin: -100px 0 0 0; }
}

/* Footer overrides */

#hacker_img { display: none; }

#bottom_img {
    position: absolute; left: 0; bottom: 0; width: 50%; max-width: 550px; z-index: 10; pointer-events: none;
}

#footer {
    padding-left: 50%; padding-right: 40px; text-align: center;
}

@media all and (max-width: 480px) {
    #hacker_img { width: 100%; display: block; }
    #bottom_img { display: none; }
    #footer     { padding-left: 5px; padding-right: 5px; }
}

@media all and (min-width: 1100px) {
    .landing_segment.bottom .infos { margin-left: 590px; padding-left: 40px; width: calc(100% - 650px); }
    #footer                        { padding-left: 590px; }
}

#footer .landing_footer { display: block; }
#footer .normal_footer  { display: none;  }