.nav  {
    
    height:  2vh;
    
    max-height:  150px;
    
    min-height:  70px
}
.footer, 
.nav  {
    
    background-color:  beige;
    
    text-align:  center;
    
    width:  100%
}
.footer  {
    
    height:  4vh;
    
    max-height:  400px;
    
    min-height:  150px
}
body  {
    
    background:  #000;
    
    margin:  0
}
@font-face  {
    
    font-family:  AdihausDIN-Regular;
    
    src:  url(css/font/AdihausDIN-Regular.ttf)
}
@font-face  {
    
    font-family:  AdihausDIN-Medium;
    
    src:  url(css/font/AdihausDIN-Medium.ttf)
}
@font-face  {
    
    font-family:  AdihausDIN-Bold;
    
    src:  url(css/font/AdihausDIN_Bold.ttf)
}
@font-face  {
    
    font-family:  AdihausDIN-Cn;
    
    src:  url(css/font/AdihausDIN-Cn.ttf)
}
@font-face  {
    
    font-family:  AdihausDIN-CnBold;
    
    src:  url(css/font/AdihausDIN-CnBold.ttf)
}
@font-face  {
    
    font-family:  AdihausDIN-CnBoldItalic;
    
    src:  url(css/font/AdihausDIN-CnBoldItalic.ttf)
}
@font-face  {
    
    font-family:  adineuePROCond-Bold;
    
    src:  url(css/font/adineuePROCond-Bold.otf)
}
#app_lab *, 
:after, 
:before  {
    
    -webkit-box-sizing:  border-box;
    
    -moz-box-sizing:  border-box;
    
    box-sizing:  border-box;
    
    font-weight:  unset;
    
    user-select:  none
}
#app_lab  {
    
    background-image:  url(assets/img/background-pattern.jpg);
    
    background-size:  10%;
    
    margin:  0;
    
    padding:  0;
    
    position:  relative;
    
    width:  100%
}
#app_lab #overlayBackground  {
    
    background-color:  #00dfff;
    
    height:  100%;
    
    opacity:  .3;
    
    overflow:  hidden;
    
    position:  absolute;
    
    top:  0;
    
    width:  100%;
    
    z-index:  0
}
#app_lab img  {
    
    width:  100%
}
#app_lab .center  {
    
    left:  50%;
    
    position:  absolute;
    
    top:  50%;
    
    transform:  translate(-50%,  -50%);
    
    width:  100%
}
#app_lab .hud_c_lv4  {
    
    position:  absolute;
    
    z-index:  4
}
#app_lab .hud_c_lv3  {
    
    position:  absolute;
    
    z-index:  3
}
#app_lab .hud_c_lv2  {
    
    position:  absolute;
    
    z-index:  2
}
#app_lab .ponternone  {
    
    pointer-events:  none
}
#app_lab .adidas_button  {
    
    background-color:  #000;
    
    border:  none;
    
    color:  #fff;
    
    font-family:  AdihausDIN-Medium!important;
    
    font-size:  .9rem;
    
    min-width:  178px;
    
    padding:  10px 30px;
    
    text-transform:  uppercase;
    
    transition:  all .5s
}
#app_lab .adidas_button:hover  {
    
    background-color:  #fff;
    
    color:  #000
}
#app_lab .adidas_button:active  {
    
    background-color:  #000;
    
    color:  #fff
}
#app_lab .adidas_button:hover:before  {
    
    outline:  1px solid #fff
}
#app_lab .adidas_button:active:before  {
    
    outline:  1px solid #000
}
#app_lab .adidas_button:before  {
    
    content:  "";
    
    height:  100%;
    
    outline:  1px solid #000;
    
    position:  absolute;
    
    transform:  translate(-27px,  -7px);
    
    transition:  all .5s;
    
    width:  100%
}
.adidas_button_white  {
    
    background-color:  #fff;
    
    border:  none;
    
    color:  #000;
    
    font-family:  AdihausDIN-Medium!important;
    
    font-size:  .9rem;
    
    padding:  10px 30px;
    
    text-transform:  uppercase;
    
    transition:  all .5s
}
.adidas_button_white:hover  {
    
    background-color:  #000;
    
    color:  #fff
}
#app_lab .adidas_button:active  {
    
    background-color:  #fff;
    
    color:  #000
}
.adidas_button_white:hover:before  {
    
    outline:  1px solid #000
}
#app_lab .adidas_button:active:before  {
    
    outline:  1px solid #fff
}
.adidas_button_white:before  {
    
    content:  "";
    
    height:  100%;
    
    outline:  1px solid #fff;
    
    position:  absolute;
    
    transform:  translate(-27px,  -7px);
    
    transition:  all .5s;
    
    width:  100%
}
#app_lab .boton_comprar  {
    
    bottom:  20px;
    
    left:  50%;
    
    transform:  translate(-50%,  -16px)
}
#app_lab .center-top  {
    
    left:  50%;
    
    position:  absolute;
    
    top:  55px;
    
    transform:  translateX(-50%);
    
    width:  250px
}
#complement  {
    
    position:  relative;
    
    z-index:  1
}
#back_to_Menu  {
    
    cursor:  pointer;
    
    display:  none;
    
    position:  absolute;
    
    right:  25px;
    
    top:  10%;
    
    z-index:  10
}
.bold  {
    
    font-family:  AdihausDIN-Bold!important
}
.button_score  {
    
    cursor:  pointer;
    
    display:  block;
    
    margin:  25px auto auto;
    
    min-width:  178px;
    
    pointer-events:  all;
    
    position:  relative
}
.button_com_container  {
    
    height:  240px;
    
    position:  relative
}
.button_com_container .share_bt  {
    
    top:  55px
}
.button_com_container .share_bt:before  {
    
    transform:  translate(-45px,  -7px)!important
}
.button_com_container .buy_bt  {
    
    top:  110px
}
.input_lab  {
    
    border:  none;
    
    border-bottom:  1px solid #b9b8b8;
    
    display:  block;
    
    font-family:  AdihausDIN-Regular!important;
    
    margin:  20px auto;
    
    max-width:  350px;
    
    padding:  5px;
    
    text-align:  center;
    
    width:  90%
}
.lab_alert  {
    
    color:  red;
    
    display:  none;
    
    font-family:  AdihausDIN-Bold!important;
    
    font-size:  .8rem;
    
    margin-bottom:  10px;
    
    text-align:  center
}
.bottom_buttonS_black, 
.button_back  {
    
    left:  50%;
    
    position:  absolute;
    
    transform:  translateX(-50%)
}
.button_back  {
    
    cursor:  pointer;
    
    margin:  30px auto auto;
    
    top:  141px;
    
    width:  150px
}
@media (hover: hover)  {
    
    .mouse  {
    
        display:  block
}

    .touch  {
    
        display:  none
}

}
@media (hover: none)  {
    
    .mouse  {
    
        display:  none
}

    .touch  {
    
        display:  block
}

}
#scroll_sprite  {
    
    -webkit-animation:  scroll 2s steps(22) infinite;
    
    -moz-animation:  scroll 2s steps(22) infinite;
    
    -o-animation:  scroll 2s steps(22) infinite;
    
    animation:  scroll 2s steps(22) infinite;
    
    animation-direction:  alternate;
    
    background-image:  url(assets/img/scroll.png);
    
    background-repeat:  no-repeat;
    
    background-size:  cover;
    
    bottom:  7vh;
    
    display:  none;
    
    height:  166px;
    
    left:  50%;
    
    position:  absolute;
    
    transform:  translateX(-50%) scale(.5);
    
    width:  49px
}
@-webkit-keyframes scroll  {
    
    0%  {
    
        background-position:  0
}

    to  {
    
        background-position:  -1144px
}

}
@-moz-keyframes scroll  {
    
    0%  {
    
        background-position:  0
}

    to  {
    
        background-position:  -1144px
}

}
@-o-keyframes scroll  {
    
    0%  {
    
        background-position:  0
}

    to  {
    
        background-position:  -1144px
}

}
@keyframes scroll  {
    
    0%  {
    
        background-position:  0
}

    to  {
    
        background-position:  -1144px
}

}
#app_lab #animatedBackground  {
    
    --gradientYL:  0%;
    
    --gradientXL:  50%;
    
    --gradientL:  radial-gradient(circle at left,  #ffc400 5%,  #ffc40000 28%);
    
    --gradientYR:  0%;
    
    --gradientXR:  50%;
    
    --gradientR:  radial-gradient(circle at right,  #a74cd2 5%,  #a74cd200 28%);
    
    --opacity:  0.3;
    
    height:  100vh;
    
    mix-blend-mode:  hue;
    
    overflow:  hidden;
    
    pointer-events:  none;
    
    position:  absolute;
    
    top:  0;
    
    width:  100%;
    
    z-index:  -1
}
#app_lab #animatedBackground:before  {
    
    animation:  lefy 30s ease infinite alternate;
    
    background:  #ff9100;
    
    background:  radial-gradient(circle at left,  #ffc400 5%,  #ffc40000 28%);
    
    background-repeat:  repeat-y;
    
    background-size:  50% 100%;
    
    content:  "";
    
    height:  100%;
    
    opacity:  var(--opacity);
    
    position:  absolute;
    
    top:  0;
    
    transform:  scaleY(1.8) translateY(var(--gradientYL));
    
    transition:  all .5s;
    
    width:  30%
}
@-webkit-keyframes lefy  {
    
    0%  {
    
        background:  radial-gradient(circle at left,  #ffc400 5%,  #ffc40000 28%)
}

    20%  {
    
        background:  radial-gradient(circle at left,  #ff9100 5%,  #ff910000 28%)
}

    40%  {
    
        background:  radial-gradient(circle at left,  #a74cd2 5%,  #a74cd200 28%)
}

    60%  {
    
        background:  radial-gradient(circle at left,  #4d25f6 5%,  #4d25f600 28%)
}

    80%  {
    
        background:  radial-gradient(circle at left,  #ffabf3 5%,  #ffabf300 28%)
}

    to  {
    
        background:  radial-gradient(circle at left,  #ff6464 5%,  #ff646400 28%)
}

}
@-moz-keyframes lefy  {
    
    0%  {
    
        background:  radial-gradient(circle at left,  #ffc400 5%,  #ffc40000 28%)
}

    20%  {
    
        background:  radial-gradient(circle at left,  #ff9100 5%,  #ff910000 28%)
}

    40%  {
    
        background:  radial-gradient(circle at left,  #a74cd2 5%,  #a74cd200 28%)
}

    60%  {
    
        background:  radial-gradient(circle at left,  #4d25f6 5%,  #4d25f600 28%)
}

    80%  {
    
        background:  radial-gradient(circle at left,  #ffabf3 5%,  #ffabf300 28%)
}

    to  {
    
        background:  radial-gradient(circle at left,  #ff6464 5%,  #ff646400 28%)
}

}
@keyframes lefy  {
    
    0%  {
    
        background:  radial-gradient(circle at left,  #ffc400 5%,  #ffc40000 28%)
}

    20%  {
    
        background:  radial-gradient(circle at left,  #ff9100 5%,  #ff910000 28%)
}

    40%  {
    
        background:  radial-gradient(circle at left,  #a74cd2 5%,  #a74cd200 28%)
}

    60%  {
    
        background:  radial-gradient(circle at left,  #4d25f6 5%,  #4d25f600 28%)
}

    80%  {
    
        background:  radial-gradient(circle at left,  #ffabf3 5%,  #ffabf300 28%)
}

    to  {
    
        background:  radial-gradient(circle at left,  #ff6464 5%,  #ff646400 28%)
}

}
#app_lab #animatedBackground:after  {
    
    animation:  rify 30s ease infinite alternate;
    
    background:  #ff9100;
    
    background:  var(--gradientR);
    
    background-repeat:  no-repeat;
    
    content:  "";
    
    height:  100%;
    
    opacity:  var(--opacity);
    
    position:  absolute;
    
    right:  0;
    
    top:  0;
    
    transform:  scaleY(1.8) translateY(var(--gradientYR));
    
    transition:  all .5s;
    
    width:  30%
}
@-webkit-keyframes rify  {
    
    to  {
    
        background:  radial-gradient(circle at right,  #ffc400 5%,  #ffc40000 28%)
}

    80%  {
    
        background:  radial-gradient(circle at right,  #ff9100 5%,  #ff910000 28%)
}

    60%  {
    
        background:  radial-gradient(circle at right,  #a74cd2 5%,  #a74cd200 28%)
}

    40%  {
    
        background:  radial-gradient(circle at right,  #4d25f6 5%,  #4d25f600 28%)
}

    20%  {
    
        background:  radial-gradient(circle at right,  #ffabf3 5%,  #ffabf300 28%)
}

    0%  {
    
        background:  radial-gradient(circle at right,  #ff6464 5%,  #ff646400 28%)
}

}
@-moz-keyframes rify  {
    
    to  {
    
        background:  radial-gradient(circle at right,  #ffc400 5%,  #ffc40000 28%)
}

    80%  {
    
        background:  radial-gradient(circle at right,  #ff9100 5%,  #ff910000 28%)
}

    60%  {
    
        background:  radial-gradient(circle at right,  #a74cd2 5%,  #a74cd200 28%)
}

    40%  {
    
        background:  radial-gradient(circle at right,  #4d25f6 5%,  #4d25f600 28%)
}

    20%  {
    
        background:  radial-gradient(circle at right,  #ffabf3 5%,  #ffabf300 28%)
}

    0%  {
    
        background:  radial-gradient(circle at right,  #ff6464 5%,  #ff646400 28%)
}

}
@keyframes rify  {
    
    to  {
    
        background:  radial-gradient(circle at right,  #ffc400 5%,  #ffc40000 28%)
}

    80%  {
    
        background:  radial-gradient(circle at right,  #ff9100 5%,  #ff910000 28%)
}

    60%  {
    
        background:  radial-gradient(circle at right,  #a74cd2 5%,  #a74cd200 28%)
}

    40%  {
    
        background:  radial-gradient(circle at right,  #4d25f6 5%,  #4d25f600 28%)
}

    20%  {
    
        background:  radial-gradient(circle at right,  #ffabf3 5%,  #ffabf300 28%)
}

    0%  {
    
        background:  radial-gradient(circle at right,  #ff6464 5%,  #ff646400 28%)
}

}
#app_lab ._3d_g  {
    
    height:  100vh;
    
    overflow:  hidden;
    
    position:  relative;
    
    width:  100%!important;
    
    z-index:  1
}
#app_lab #content  {
    
    display:  block;
    
    height:  100%!important;
    
    pointer-events:  none;
    
    width:  100%!important
}
#app_lab #_3d  {
    
    height:  100%;
    
    position:  absolute;
    
    width:  100%;
    
    z-index:  1
}
#app_lab .PageUIController  {
    
    height:  100vh;
    
    left:  0;
    
    position:  absolute;
    
    top:  0;
    
    width:  100%
}
#app_lab .container  {
    
    left:  0;
    
    overflow:  hidden auto;
    
    top:  0;
    
    width:  100%
}
#app_lab .container::-webkit-scrollbar  {
    
    width:  12px
}
#app_lab .container::-webkit-scrollbar-thumb  {
    
    background-color:  rgba(46,  46,  46,  .29)
}
#app_lab .container::-webkit-scrollbar-track  {
    
    background-color:  hsla(0,  0%,  100%,  .29)
}
#app_lab .Scroll  {
    
    width:  1px
}
#menu_hud  {
    
    height:  100vh;
    
    opacity:  1;
    
    position:  absolute;
    
    width:  100vw
}
#app_lab .logo_ball  {
    
    bottom:  19%;
    
    left:  50%;
    
    max-width:  264px;
    
    outline:  4px solid #fff;
    
    outline-offset:  0;
    
    padding:  12px 25px 0;
    
    position:  absolute;
    
    transform:  translateX(-50%);
    
    width:  95%
}
#app_lab .text_logo_ball  {
    
    color:  #000;
    
    font-family:  AdihausDIN-Bold!important;
    
    font-size:  1rem;
    
    line-height:  0px;
    
    text-align:  center
}
#background_menu  {
    
    background-image:  url(assets/img/menu_background.jpg);
    
    background-position:  50%;
    
    background-size:  cover;
    
    height:  100%;
    
    opacity:  1;
    
    position:  absolute;
    
    transition:  all .5s;
    
    width:  100%;
    
    z-index:  0
}
#app_lab #input_tech  {
    
    display:  none;
    
    left:  50%;
    
    opacity:  0;
    
    position:  absolute;
    
    top:  50px;
    
    transform:  translateX(-50%);
    
    transition:  all;
    
    z-index:  3
}
.text_3d  {
    
    font-size:  calc(1.2rem + .25568vw - .81818px);
    
    line-height:  90%;
    
    max-width:  463px;
    
    position:  absolute;
    
    text-shadow:  3px 3px 0 #fff,  -1px -1px 0 #fff,  1px -1px 0 #fff,  -1px 1px 0 #fff,  1px 1px 0 #fff;
    
    transform:  translateX(12vh) rotateY(90deg);
    
    transform-style:  preserve-3d;
    
    width:  90vw
}
.text_3d, 
.text_3d div  {
    
    font-family:  AdihausDIN-Bold!important
}
.content_3d  {
    
    display:  none;
    
    left:  50%;
    
    position:  absolute;
    
    top:  50%;
    
    transform:  rotateY(0deg);
    
    transform-style:  preserve-3d
}
._3d_text  {
    
    height:  100%;
    
    position:  absolute;
    
    top:  0;
    
    width:  100%
}
#text3t, 
#text4t  {
    
    transform:  translateX(11vh)
}
#hud_tech  {
    
    height:  100vh;
    
    opacity:  0;
    
    position:  absolute;
    
    width:  100vw
}
.share_tech  {
    
    bottom:  50px;
    
    left:  50%;
    
    opacity:  0;
    
    transform:  translate(-50%,  -40px)
}
.share_tech button:before  {
    
    transform:  translate(-46px,  -7px)!important
}
#tech_input  {
    
    display:  none;
    
    left:  50%;
    
    max-width:  360px;
    
    opacity:  1;
    
    opacity:  0;
    
    text-align:  center;
    
    top:  30px;
    
    transform:  translate(-50%);
    
    width:  95%;
    
    z-index:  5
}
#background_text  {
    
    padding:  5px 10px!important
}
.Input_label  {
    
    color:  #000;
    
    font-family:  adineuePROCond-Bold!important;
    
    font-size:  calc(1rem + .56818vw - 1.81818px);
    
    line-height:  88%;
    
    margin-top:  15px;
    
    text-align:  center
}
#background_share  {
    
    background-image:  url(assets/img/background_shot.jpg);
    
    background-position:  50%;
    
    background-size:  cover;
    
    height:  100%;
    
    opacity:  0;
    
    position:  absolute;
    
    transition:  all .5s;
    
    width:  100%;
    
    z-index:  0
}
#button_overlay  {
    
    background-color:  #ffffff00;
    
    cursor:  pointer;
    
    height:  67%;
    
    pointer-events:  all;
    
    position:  absolute;
    
    top:  50%;
    
    transform:  translateY(-50%);
    
    width:  100%
}
#ball_history  {
    
    background-image:  url(assets/img/background_rainbow.png);
    
    background-size:  100% 100%;
    
    display:  none;
    
    min-height:  60vh
}
#ball_history, 
#menu_balls  {
    
    background-repeat:  no-repeat;
    
    width:  100%
}
#menu_balls  {
    
    background-image:  url(assets/img/flag_history_2.png);
    
    background-position:  top;
    
    background-size:  auto 80%;
    
    height:  100%;
    
    padding-top:  5%
}
.titel_menu_balls  {
    
    margin:  auto;
    
    text-align:  center;
    
    width:  95%
}
.balls_menu  {
    
    display:  flex;
    
    flex-wrap:  wrap;
    
    gap:  15px;
    
    justify-content:  center;
    
    margin:  auto;
    
    max-width:  800px;
    
    padding-bottom:  50px;
    
    padding-top:  50px;
    
    width:  95%
}
.title_white_history  {
    
    color:  #fff;
    
    font-family:  adineuePROCond-Bold!important;
    
    font-size:  calc(3rem + .71023vw - 2.27273px);
    
    line-height:  88%;
    
    text-shadow:  3px 2px 4px #00000063;
    
    text-transform:  uppercase
}
.subtitle_history  {
    
    font-family:  AdihausDIN-Regular!important;
    
    font-size:  calc(.8rem + .09233vw - .29545px);
    
    margin:  13px auto auto;
    
    width:  95%
}
.button_ball  {
    
    cursor:  pointer;
    
    font-size:  1rem;
    
    text-align:  center;
    
    text-transform:  uppercase;
    
    width:  90px
}
.button_ball img  {
    
    border-radius:  50px;
    
    transform:  translateY(0);
    
    transition:  all .5s ease
}
.button_ball:hover img  {
    
    box-shadow:  0 20px 9px 0 #0000005c;
    
    transform:  translateY(-11px)
}
.button_ball p  {
    
    font-family:  AdihausDIN-CnBold!important;
    
    font-size:  1.2rem;
    
    margin:  5px
}
#pop_ball  {
    
    backdrop-filter:  blur(5px);
    
    background-color:  #ffffff3b;
    
    height:  100vh;
    
    position:  fixed;
    
    top:  0;
    
    width:  100%;
    
    z-index:  99
}
#show_ball  {
    
    background-image:  url(assets/img/flag_history_3.png);
    
    background-position:  top;
    
    background-repeat:  no-repeat;
    
    background-size:  auto 100%;
    
    height:  90vh;
    
    max-height:  600px;
    
    opacity:  1;
    
    padding-top:  4%;
    
    position:  absolute;
    
    top:  50%;
    
    transform:  translateY(-50%);
    
    width:  100%
}
.ballcontainer  {
    
    left:  50%;
    
    max-width:  800px;
    
    position:  absolute;
    
    text-align:  center;
    
    top:  50%;
    
    transform:  translate(-50%,  -50%);
    
    width:  95%
}
.ballcontainerimg  {
    
    margin:  auto auto 10px;
    
    max-width:  270px;
    
    width:  95%
}
.button_close  {
    
    background-color:  #000;
    
    border-radius:  40px;
    
    box-shadow:  0 0 0 0 #000;
    
    color:  #fff;
    
    cursor:  pointer;
    
    font-family:  AdihausDIN-Bold!important;
    
    font-size:  .6;
    
    height:  30px;
    
    margin:  6px auto auto;
    
    padding-top:  6px;
    
    text-align:  center;
    
    transition:  all .5s;
    
    width:  30px
}
.button_close:hover  {
    
    background-color:  #fff;
    
    color:  #000
}
#hud_history  {
    
    height:  100vh;
    
    opacity:  0;
    
    position:  absolute;
    
    width:  100vw
}
.sub_title  {
    
    color:  #fff;
    
    font-family:  adineuePROCond-Bold!important;
    
    font-size:  calc(3rem + 1.27841vw - 4.09091px);
    
    left:  50%;
    
    line-height:  88%;
    
    position:  absolute;
    
    text-align:  center;
    
    text-shadow:  0 4px 6px #00000030;
    
    text-transform:  uppercase;
    
    top:  106px;
    
    transform:  translateX(-50%);
    
    width:  100%
}
#hud_desing  {
    
    height:  100vh;
    
    width:  100vw
}
#hud_desing, 
.text_desing  {
    
    opacity:  0;
    
    position:  absolute
}
.text_desing  {
    
    bottom:  19%;
    
    left:  50%;
    
    margin:  auto;
    
    max-width:  605px;
    
    transform:  translateX(-50%);
    
    width:  95%
}
.text_desing_ball  {
    
    color:  #000;
    
    font-family:  AdihausDIN-Bold!important;
    
    font-size:  1.4rem;
    
    line-height:  22px;
    
    text-align:  center;
    
    transform:  translateY(65%)
}
#trivia  {
    
    backdrop-filter:  blur(1px) opacity(.5);
    
    background-image:  url(assets/img/rainbow_transparent.png);
    
    background-repeat:  no-repeat;
    
    background-size:  100% 100%;
    
    display:  none;
    
    padding-bottom:  20px;
    
    position:  relative;
    
    width:  100%
}
.trivia_container  {
    
    margin:  auto;
    
    max-width:  800px;
    
    padding-top:  50px;
    
    width:  95%
}
.trivia_title  {
    
    font-family:  AdihausDIN-CnBoldItalic!important;
    
    font-size:  2.8rem;
    
    line-height:  40px;
    
    text-align:  center
}
.trivia_sbtitle  {
    
    font-family:  AdihausDIN-Regular!important;
    
    font-size:  1rem;
    
    margin:  auto;
    
    max-width:  550px;
    
    padding-bottom:  30px;
    
    padding-top:  25px;
    
    text-align:  center;
    
    width:  95%
}
.trivia_table  {
    
    background-color:  #fff;
    
    border:  2px solid #000;
    
    border-radius:  10px;
    
    margin:  25px auto auto;
    
    max-width:  500px;
    
    position:  relative;
    
    width:  95%
}
#pregunta  {
    
    background-color:  #000;
    
    color:  #fff;
    
    font-family:  AdihausDIN-CnBoldItalic!important;
    
    font-size:  1.4rem;
    
    padding:  12px;
    
    text-align:  center
}
.respuesta_trivia  {
    
    border-top:  2px solid #000;
    
    cursor:  pointer;
    
    font-family:  AdihausDIN-Medium!important;
    
    font-size:  .8;
    
    padding:  10px 5px;
    
    text-align:  left;
    
    transition:  all .5s
}
.respuesta_trivia:active  {
    
    background-color:  #fff;
    
    color:  #000
}
#end, 
#start  {
    
    background-color:  #fff;
    
    height:  100%;
    
    left:  50%;
    
    position:  absolute;
    
    text-align:  center;
    
    top:  50%;
    
    transform:  translate(-50%,  -50%);
    
    width:  100%
}
.bt_again  {
    
    margin:  15px auto auto;
    
    position:  relative;
    
    width:  178px
}
#trivia_name:before  {
    
    transform:  translate(-46px,  -7px)!important
}
@media (hover: hover)  {
    .respuesta_trivia:hover  {
        background-color:  #000;
        color:  #fff
}

}
#game  {
    height: 100vh;
    background-image: url(assets/img/rainbow_transparent.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: none;
    padding-bottom: 15px;
}
#game, .game_container {
    position: relative;
    width: 100%}
#base_game {
    margin: -90px auto auto;
    max-width: 320px;
    overflow: hidden;
    width: 95%}
#base_game canvas {
    overflow: hidden;
    pointer-events: none;
}
.hud_score {
    margin: auto;
    max-width: 500px;
    padding-top: 25px;
    text-align: center;
    width: 95%}
#score {
    margin-top: 15px;
}
#iconTap {
    bottom: 0;
    left: 50%;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
    width: 50px;
}
.button_game {
    width: 100%}
#end_game {
    background-color: #fff;
    max-width: 320px;
    padding: 29px 0;
    top: 35%!important;
    width: 95%}
#end_game button:before {
    transform: translate(-27px, -7px);
}
#ini_game {
    background-color: #fff;
    max-width: 320px;
    padding: 29px 0;
    top: 35%!important;
    width: 95%}
#game_name {
    margin-top: 0;
}
#game_name:before, #terminarGame:before {
    transform: translate(-46px, -7px)!important;
}
#base_game canvas {
    height: auto!important;
    width: 100%!important;
}
#pop_up {
    backdrop-filter: blur(5px);
    background-color: #ffffff3b;
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
}
.ranking_title {
    background-color: #000;
    color: #fff;
    font-family: AdihausDIN-CnBoldItalic!important;
    font-size: 1.4rem;
    padding: 12px;
    text-align: center;
}
.ranking_text {
    border-top: 2px solid #000;
    cursor: pointer;
    display: flex;
    font-family: AdihausDIN-Medium!important;
    font-size: .8;
    justify-content: space-between;
    padding: 9px 21px 0 15px;
    text-align: left;
    transition: all .5s;
}
.name_text {
    font-family: AdihausDIN-Regular!important;
}
.score_text {
    font-family: AdihausDIN-CnBoldItalic!important;
    font-size: 1.2rem!important;
    text-align: right;
}
.image_share {
    margin: 10px auto auto;
    max-width: 500px;
    width: 95%}
.container_button_share {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 4px auto auto;
    max-width: 574px;
    width: 95%}
.button_image_share {
    position: relative;
}
#feed_adidas, #share_data, #story_adidas {
    height: 46px;
    width: 178px;
}
#share_data:before {
    transform: translate(-74px, -6px)!important;
}
#story_adidas:before {
    transform: translate(-63px, -10px)!important;
}
#feed_adidas:before {
    transform: translate(-66px, -9px)!important;
}
.share_icon svg {
    fill: #fff;
    width: 20px;
}
.share_icon:hover svg {
    fill: #000;
    transition: all .5s;
}
.share_icon:before {
    transform: translate(-7px, -3px);
}
.share_icon {
    padding: 5px 10px 0;
}
#laoding {
    background-color: #fff;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9999;
}
#content_Loading {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 320px;
}
#anima_loading {
    -webkit-animation: walk 2s steps(29) infinite;
    -moz-animation: walk 2s steps(29) infinite;
    -o-animation: walk 2s steps(29) infinite;
    animation: walk 2s steps(29) infinite;
    background-image: url(assets/img/sprite-op.png);
    background-size: auto 100%;
    height: 75px;
    margin: auto;
    width: 30px;
}
#logo_Loading {
    margin: auto;
    width: 120px;
}
#text_loading {
    font-family: AdihausDIN-CnBoldItalic;
    text-align: center;
}
@-webkit-keyframes walk {
    0% {
    background-position: 0;
}
to {
    background-position: -870px;
}
}@-moz-keyframes walk {
    0% {
    background-position: 0;
}
to {
    background-position: -870px;
}
}@-o-keyframes walk {
    0% {
    background-position: 0;
}
to {
    background-position: -870px;
}
}@keyframes walk {
    0% {
    background-position: 0;
}
to {
    background-position: -870px;
}
}#button_menu_wu {
    position: fixed;
    right: min(5vw, 113px);
    top: 52px;
    z-index: 99;
}
.icon_main_menu {
    border: none;
}
@font-face {
    font-display: swap;
    font-family: AdihausDIN;
    font-style: normal;
    font-weight: 400;
    src: url(74b2fc1b0859e8628d1c.woff2) format("woff2"), url(b3905df98d9e32dc1c3f.woff) format("woff"), url(css/font/adihausdin.ttf) format("truetype");
}
@font-face {
    font-display: swap;
    font-family: AdihausDIN;
    font-style: normal;
    font-weight: 700;
    src: url(d572d4bdbd2b784b9307.woff2) format("woff2"), url(b088093e05bb18ffd408.woff) format("woff"), url(css/font/adihausdin_bold.ttf) format("truetype");
}
@font-face {
    font-display: swap;
    font-family: adineuePROCond;
    font-style: normal;
    font-weight: 400;
    src: url(335dfd134a588b76101c.woff2) format("woff2"), url(5010cdb2f1faf94c576f.woff) format("woff"), url(css/font/adineue_pro_cond.otf) format("opentype");
}
@font-face {
    font-display: swap;
    font-family: adineuePROCond;
    font-style: normal;
    font-weight: 700;
    src: url(0a065cf9f67cf7e643ad.woff2) format("woff2"), url(2a5d5943b1dc7864875a.woff) format("woff"), url(css/font/adineue_pro_cond_bold.otf) format("opentype");
}
@font-face {
    font-display: swap;
    font-family: adineuePROCond;
    font-style: normal;
    font-weight: 900;
    src: url(b770c8c750bc68cc6901.woff2) format("woff2"), url(93d3f0025d5ec4c0354f.woff) format("woff"), url(css/font/adineue_pro_cond_black.otf) format("opentype");
}
@font-face {
    font-display: swap;
    font-family: adineuePROCond;
    font-style: normal;
    font-weight: 300;
    src: url(b562cfb57c8681df9bed.woff2) format("woff2"), url(8facab7daf4818aa2a17.woff) format("woff"), url(css/font/adineue_pro_cond_light.otf) format("opentype");
}
@font-face {
    font-display: swap;
    font-family: WC\ 22 Final;
    font-style: normal;
    font-weight: 400;
    src: url(fe310c4954181cb4b6cf.woff2) format("woff2"), url(bd8008861a89e1af8c8e.woff) format("woff"), url(css/font/wc22final.ttf) format("truetype");
}
@-webkit-keyframes menu_close_1 {
    0% {
    stroke-dashoffset: -22;
    stroke-dasharray: 60 272;
}
to {
    stroke-dashoffset: -205;
    stroke-dasharray: 68 254;
}
}@-moz-keyframes menu_close_1 {
    0% {
    stroke-dashoffset: -22;
    stroke-dasharray: 60 272;
}
to {
    stroke-dashoffset: -205;
    stroke-dasharray: 68 254;
}
}@-ms-keyframes menu_close_1 {
    0% {
    stroke-dashoffset: -22;
    stroke-dasharray: 60 272;
}
to {
    stroke-dashoffset: -205;
    stroke-dasharray: 68 254;
}
}@keyframes menu_close_1 {
    0% {
    stroke-dashoffset: -22;
    stroke-dasharray: 60 272;
}
to {
    stroke-dashoffset: -205;
    stroke-dasharray: 68 254;
}
}@-webkit-keyframes menu_close_2 {
    0% {
    stroke-dashoffset: -205;
    stroke-dasharray: 68 254;
}
to {
    stroke-dashoffset: -22;
    stroke-dasharray: 60 272;
}
}@-moz-keyframes menu_close_2 {
    0% {
    stroke-dashoffset: -205;
    stroke-dasharray: 68 254;
}
to {
    stroke-dashoffset: -22;
    stroke-dasharray: 60 272;
}
}@-ms-keyframes menu_close_2 {
    0% {
    stroke-dashoffset: -205;
    stroke-dasharray: 68 254;
}
to {
    stroke-dashoffset: -22;
    stroke-dasharray: 60 272;
}
}@keyframes menu_close_2 {
    0% {
    stroke-dashoffset: -205;
    stroke-dasharray: 68 254;
}
to {
    stroke-dashoffset: -22;
    stroke-dasharray: 60 272;
}
}@-webkit-keyframes opacity_1 {
    0% {
    opacity: 0;
}
to {
    opacity: 1;
}
}@-moz-keyframes opacity_1 {
    0% {
    opacity: 0;
}
to {
    opacity: 1;
}
}@-ms-keyframes opacity_1 {
    0% {
    opacity: 0;
}
to {
    opacity: 1;
}
}@keyframes opacity_1 {
    0% {
    opacity: 0;
}
to {
    opacity: 1;
}
}@-webkit-keyframes opacity_2 {
    0% {
    opacity: 1;
}
to {
    opacity: 0;
}
}@-moz-keyframes opacity_2 {
    0% {
    opacity: 1;
}
to {
    opacity: 0;
}
}@-ms-keyframes opacity_2 {
    0% {
    opacity: 1;
}
to {
    opacity: 0;
}
}@keyframes opacity_2 {
    0% {
    opacity: 1;
}
to {
    opacity: 0;
}
}.main_menu .main_menu_links .menu_link {
    font-weight: 700!important;
}
.container_main_logo {
    grid-gap: 20px;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    display: flex;
    left: 0;
    place-items: center;
    position: relative;
    top: 0;
    z-index: 2;
}
@supports(gap) {
    .container_main_logo {
    gap: 20px;
}
}
@media only screen and (max-width:640px) {
    .container_main_logo {
    grid-gap: 10px;
}
@supports(gap) {
    .container_main_logo {
    gap: 10px;
}
}}.container_main_logo .logo_adidas {
    color: transparent;
    display: block;
    font: 0/0 a;
    height: 52px;
    left: 0;
    margin: 0;
    padding: 0;
    position: relative;
    text-indent: -119988px;
    text-shadow: none;
    top: 0;
    width: 83px;
}
/* @media only screen and (max-width:1920px) {
    .container_main_logo .logo_adidas {
    height: 52px;
    width: 83px;
}
}@media only screen and (max-width:980px) {
    .container_main_logo .logo_adidas {
    height: 33px;
    width: 53px;
}
}@media only screen and (max-width:640px) {
    .container_main_logo .logo_adidas {
    height: 25px;
    width: 40px;
} 
}*/
.container_main_logo .logo_qatar {
    color: transparent;
    display: block;
    font: 0/0 a;
    height: 70px;
    left: 0;
    margin: 0;
    padding: 0;
    position: relative;
    text-indent: -119988px;
    text-shadow: none;
    top: 0;
    width: 140px;
}
@media only screen and (max-width:1920px) {
    .container_main_logo .logo_qatar {
    height: 70px;
    width: 140px;
}
}@media only screen and (max-width:980px) {
    .container_main_logo .logo_qatar {
    height: 46px;
    width: 93px;
}
}@media only screen and (max-width:640px) {
    .container_main_logo .logo_qatar {
    height: 36px;
    width: 73px;
}
}.container_main_logo .separator {
    background-color: #fff;
    -webkit-box-shadow: 2px 2px 1px rgba(0, 0, 0, .2);
    -moz-box-shadow: 2px 2px 1px rgba(0, 0, 0, .2);
    box-shadow: 2px 2px 1px rgba(0, 0, 0, .2);
    height: 70px;
    width: 2px;
}
@media only screen and (max-width:640px) {
    .container_main_logo .separator {
    height: 40px;
    width: 1px;
}
}.main_menu .main_menu_links .menu_link {
    all: initial;
    font-family: adineuePROCond, "sans-serif";
    font-size: 7.5rem;
    font-style: normal;
    font-variant: normal;
    font-weight: 700;
    left: 0;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    top: 0;
}
@media only screen and (max-width:1920px) {
    .main_menu .main_menu_links .menu_link {
    font-size: calc(66px + 2.8125vw);
}
}@media only screen and (max-width:320px) {
    .main_menu .main_menu_links .menu_link {
    font-size: 75px;
}
}.main_menu .main_menu_links .menu_link:after {
    background-color: #fff;
    bottom: 0;
    content: "";
    height: 7px;
    left: 0;
    position: absolute;
    -webkit-transition: width .3s linear;
    -moz-transition: width .3s linear;
    -o-transition: width .3s linear;
    transition: width .3s linear;
    width: 0;
}
@media only screen and (max-width:1920px) {
    .main_menu .main_menu_links .menu_link:after {
    height: calc(2.2px + .25vw);
}
}@media only screen and (max-width:320px) {
    .main_menu .main_menu_links .menu_link::after {
    height: 3px;
}
}.main_menu .main_menu_links .menu_link:hover:after {
    height: 7px;
    -webkit-transition: width .3s linear;
    -moz-transition: width .3s linear;
    -o-transition: width .3s linear;
    transition: width .3s linear;
    width: 100%}
@media only screen and (max-width:1920px) {
    .main_menu .main_menu_links .menu_link:hover:after {
    height: calc(2.2px + .25vw);
}
}@media only screen and (max-width:320px) {
    .main_menu .main_menu_links .menu_link:hover:after {
    height: 3px;
}
}.icon_main_menu .menu_close {
    cursor: pointer;
    height: 50px;
    width: 50px;
}
@media only screen and (max-width:1920px) {
    .icon_main_menu .menu_close {
    height: 50px;
    width: 50px;
}
}@media only screen and (max-width:1366px) {
    .icon_main_menu .menu_close {
    height: 30px;
    width: 30px;
}
}@media only screen and (max-width:640px) {
    .icon_main_menu .menu_close {
    height: 25px;
    width: 25px;
}
}.icon_main_menu .open.menu_close .mc {
    -webkit-animation: menu_close_1 .65s linear forwards;
    -moz-animation: menu_close_1 .65s linear forwards;
    animation: menu_close_1 .65s linear forwards;
}
.icon_main_menu .close.menu_close .mc {
    -webkit-animation: menu_close_2 .65s linear forwards;
    -moz-animation: menu_close_2 .65s linear forwards;
    animation: menu_close_2 .65s linear forwards;
}
.icon_main_menu .menu_close .mc {
    stroke: #000;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dashoffset: -22;
    stroke-dasharray: 60 272;
}
.main_menu .container_menu .animation_1, .main_menu .container_menu .animation_2, .main_menu .container_menu .animation_3 {
    left: auto;
    opacity: .3;
    position: absolute;
    top: auto;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    z-index: 2;
}
@-webkit-keyframes floatImg {
    0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
50% {
    -webkit-transform: translateY(15px);
    -moz-transform: translateY(15px);
    -ms-transform: translateY(15px);
    -o-transform: translateY(15px);
    transform: translateY(15px);
}
to {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
}@-moz-keyframes floatImg {
    0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
50% {
    -webkit-transform: translateY(15px);
    -moz-transform: translateY(15px);
    -ms-transform: translateY(15px);
    -o-transform: translateY(15px);
    transform: translateY(15px);
}
to {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
}@-ms-keyframes floatImg {
    0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
50% {
    -webkit-transform: translateY(15px);
    -moz-transform: translateY(15px);
    -ms-transform: translateY(15px);
    -o-transform: translateY(15px);
    transform: translateY(15px);
}
to {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
}@keyframes floatImg {
    0% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
50% {
    -webkit-transform: translateY(15px);
    -moz-transform: translateY(15px);
    -ms-transform: translateY(15px);
    -o-transform: translateY(15px);
    transform: translateY(15px);
}
to {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}
}@-webkit-keyframes floatImg_2 {
    0% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px);
}
50% {
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
}
to {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px);
}
}@-moz-keyframes floatImg_2 {
    0% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px);
}
50% {
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
}
to {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px);
}
}@-ms-keyframes floatImg_2 {
    0% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px);
}
50% {
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
}
to {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px);
}
}@keyframes floatImg_2 {
    0% {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px);
}
50% {
    -webkit-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -ms-transform: translateY(40px);
    -o-transform: translateY(40px);
    transform: translateY(40px);
}
to {
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    -o-transform: translateY(-10px);
    transform: translateY(-10px);
}
}@-webkit-keyframes zoomIn {
    0% {
    opacity: 0;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}
to {
    opacity: .6;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
}@-moz-keyframes zoomIn {
    0% {
    opacity: 0;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}
to {
    opacity: .6;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
}@-ms-keyframes zoomIn {
    0% {
    opacity: 0;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}
to {
    opacity: .6;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
}@keyframes zoomIn {
    0% {
    opacity: 0;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
}
to {
    opacity: .6;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
}.icon_main_menu {
    background-color: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    color: #000;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 84px;
    place-content: center;
    place-items: center;
    width: 84px;
    z-index: 11;
}
@media only screen and (max-width:1920px) {
    .icon_main_menu {
    height: 84px;
    width: 84px;
}
}@media only screen and (max-width:1366px) {
    .icon_main_menu {
    height: 68px;
    width: 68px;
}
}@media only screen and (max-width:640px) {
    .icon_main_menu {
    height: 50px;
    width: 50px;
}
}.main_menu {
    height: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    width: 0;
    z-index: 10;
}
.main_menu.open {
    height: 100vh;
    width: 100vw;
}
.main_menu.open .container_menu {
    height: 100%;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
    width: 100%}
.main_menu.open .container_menu .main_menu_links .menu_link {
    opacity: .44;
    -webkit-transition: opacity .2s linear .5s;
    -moz-transition: opacity .2s linear .5s;
    -o-transition: opacity .2s linear .5s;
    transition: opacity .2s linear .5s;
}
.main_menu.open .container_menu .main_menu_links .menu_link:hover {
    opacity: 1;
}
.main_menu.close, .main_menu.close .container_menu {
    height: 0;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
    width: 0;
}
.main_menu.close .container_menu .container_main_logo {
    opacity: 0;
}
.main_menu.close .container_menu .main_menu_links {
    display: none;
}
.main_menu .container_menu {
    background-image: url("./assets/img/bg_home.jpg");
    /* background-color: #0e0573; */
    /* background-image: linear-gradient(0deg, transparent 3%, #ff5c00 92%), linear-gradient(180deg, transparent 8%, #0e0573 97%); */
    background-position: top, bottom;
    background-repeat: repeat-x;
    background-size: cover;
    width: 100%;
    height: 100%;
    /* -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex; */
    /* display: flex; */
    /* -webkit-flex-direction: column;
    flex-direction: column; */
    height: 0;
    place-content: center;
    place-items: center;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
    width: 0;
}

.layout_home {
    display: grid;
    grid-gap: 40px;
    grid-template-areas:
        "area1 area2 area4 area5"
        "area1 area3 area4 area5";
}
.layout_home .area1 {
    grid-area: area1;
}
.layout_home .area2 {
    grid-area: area2;
}
.layout_home .area3 {
    grid-area: area3;
}
.layout_home .area4 {
    grid-area: area4;
}
.layout_home .area5 {
    grid-area: area5;
}
.main_menu .container_menu a {
    text-decoration: none;
}
.main_menu .container_menu .logos_new {
    --size: 13.28vw;
    --aspect-ratio: 4.04;
    width: var(--size);
    height: calc(var(--size)/var(--aspect-ratio));
    max-width: 255px;
    max-height: 63px; 
}

.main_menu .container_menu .img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.main_menu .container_menu .option {
    font-size: calc(24px + 16 * ((100vw - 980px) / 940));
    color: #203e7f;
    text-align: center;
    margin-top: 16px;
    text-transform: uppercase;
    font-family: AdihausDIN;
    font-weight: bold !important;
    text-decoration: none;
}

.main_menu .container_menu .area1, .main_menu .container_menu  .area2, .main_menu .container_menu  .area4 {
    cursor: pointer;
    transition: 1s;
    opacity: 0.8;
}
.main_menu .container_menu .area1:hover, 
.main_menu .container_menu  .area2:hover, 
.main_menu .container_menu  .area4:hover {
    opacity: 1;
    transform: scale(1.05);
}

.main_menu .container_menu .area1 {
    position: relative;
    top: 0;
    left: 0;
    --size: 21.35vw;
    --aspect-ratio: 0.63;
    width: var(--size);
    height: calc(var(--size)/var(--aspect-ratio));
    max-width: 410px;
    max-height: 650px;
}

.main_menu .container_menu .area2 {
    position: relative;
    top: 0;
    left: 0;
    --size: 25.31vw;
    --aspect-ratio: 0.72;
    width: var(--size);
    height: calc(var(--size)/var(--aspect-ratio));
    max-width: 486px;
    max-height: 665px;
}

.main_menu .container_menu .area4 {
    position: relative;
    top: 0;
    left: 0;
    --size: 22.44vw;
    --aspect-ratio: 0.7;
    width: var(--size);
    height: calc(var(--size)/var(--aspect-ratio));
    max-width: 431px;
    max-height: 609px;
}
.main_menu .container_menu .area3 {
    margin-top: min(4.16vw,80px);
}
.main_menu .container_menu .area5 {
    position: absolute;
    top: 13vw;
    width: max-content;
    left: -1vw;
}
.main_menu .container_menu .area5 .products {
    transform: rotate(-90deg);
    color: #203e7f;
    font-family: AdihausDIN;
    text-decoration: none;
    text-transform: uppercase;
}

.main_menu .container_menu.alrihla .animation_1 {
    -webkit-animation: zoomIn .6s .3s 1 both;
    -moz-animation: zoomIn .6s .3s 1 both;
    animation: zoomIn .6s .3s 1 both;
}
.main_menu .container_menu.alrihla .bg1 {
    -webkit-animation: opacity_1 .7s linear both;
    -moz-animation: opacity_1 .7s linear both;
    animation: opacity_1 .7s linear both;
}
.main_menu .container_menu.jerseys .animation_2 {
    -webkit-animation: zoomIn .6s .3s 1 both;
    -moz-animation: zoomIn .6s .3s 1 both;
    animation: zoomIn .6s .3s 1 both;
}
.main_menu .container_menu.jerseys .bg2 {
    -webkit-animation: opacity_1 .7s linear both;
    -moz-animation: opacity_1 .7s linear both;
    animation: opacity_1 .7s linear both;
}
.main_menu .container_menu.guayos .animation_3 {
    -webkit-animation: zoomIn .6s .3s 1 both;
    -moz-animation: zoomIn .6s .3s 1 both;
    animation: zoomIn .6s .3s 1 both;
}
.main_menu .container_menu.guayos .bg3 {
    -webkit-animation: opacity_1 .7s linear both;
    -moz-animation: opacity_1 .7s linear both;
    animation: opacity_1 .7s linear both;
}
.main_menu .container_menu .bg1 {
    -webkit-animation: opacity_2 .7s linear both;
    -moz-animation: opacity_2 .7s linear both;
    animation: opacity_2 .7s linear both;
    background-color: transparent;
    background-image: url(assets/img/6.jpg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
.main_menu .container_menu .bg1 .grad {
    background-color: transparent;
    background-image: linear-gradient(0deg, transparent 3%, #ff5c00 92%), linear-gradient(180deg, transparent 8%, #0e0573 97%);
    background-position: top, bottom;
    background-repeat: repeat-x;
    background-size: 100% 65.7407407407vh, 100% 78.0555555556vh;
    height: 100%;
    width: 100%}
.main_menu .container_menu .bg2 {
    -webkit-animation: opacity_2 .7s linear both;
    -moz-animation: opacity_2 .7s linear both;
    animation: opacity_2 .7s linear both;
    background-color: transparent;
    background-image: url(assets/img/7.jpg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
.main_menu .container_menu .bg2 .grad {
    background-color: transparent;
    background-image: linear-gradient(to top,  rgba(221,  0,  0,  0) 13%,  rgba(122,  11,  0,  0.61) 70%,  rgba(67,  16,  0,  0.9) 119%), linear-gradient(to bottom,  rgba(250,  10,  10,  0) 13%,  rgba(169,  16,  0,  0.61) 55%,  rgba(67,  16,  0,  0.9) 112%);
    background-position: top, bottom;
    background-repeat: repeat-x;
    background-size: 100% 65.7407407407vh, 100% 78.0555555556vh;
    height: 100%;
    width: 100%}
.main_menu .container_menu .bg3 {
    -webkit-animation: opacity_2 .7s linear both;
    -moz-animation: opacity_2 .7s linear both;
    animation: opacity_2 .7s linear both;
    background-color: transparent;
    background-image: url(assets/img/11.jpg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 103%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
.main_menu .container_menu .bg3 .grad {
    background-color: transparent;
    background-position: top, bottom;
    background-repeat: repeat-x;
    background-size: 100% 65.7407407407vh, 100% 78.0555555556vh;
    height: 100%;
    left: 0;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 2;
}
.main_menu .container_menu .animation_1 {
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    place-content: center;
    place-items: center;
}
.main_menu .container_menu .animation_1 .ball_1 {
    -webkit-animation: floatImg 3s infinite;
    -moz-animation: floatImg 3s infinite;
    animation: floatImg 3s infinite;
    height: auto;
    width: min(14.6vw, 280px);
}
.main_menu .container_menu .animation_1 .ball_2 {
    -webkit-animation: floatImg_2 3s infinite;
    -moz-animation: floatImg_2 3s infinite;
    animation: floatImg_2 3s infinite;
    height: auto;
    width: min(24vw, 460px);
}
.main_menu .container_menu .animation_1 .ball_3 {
    -webkit-animation: floatImg 3s infinite;
    -moz-animation: floatImg 3s infinite;
    animation: floatImg 3s infinite;
    height: auto;
    width: min(14.6vw, 280px);
}
.main_menu .container_menu .animation_2 {
    grid-gap: 7vw;
    -webkit-align-items: center;
    align-items: center;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
@supports(gap) {
    .main_menu .container_menu .animation_2 {
    gap: 7vw;
}
}.main_menu .container_menu .animation_2 .jersey_1 {
    -webkit-animation: floatImg 3s infinite;
    -moz-animation: floatImg 3s infinite;
    animation: floatImg 3s infinite;
    height: auto;
    max-width: 74%;
    margin: 0 auto;
    width: min(30.3645833333vw, 583px);
}
.main_menu .container_menu .animation_2 .jersey_2 {
    -webkit-animation: floatImg_2 3s infinite;
    -moz-animation: floatImg_2 3s infinite;
    animation: floatImg_2 3s infinite;
    height: auto;
    width: min(34.9479166667vw, 671px);
}
.main_menu .container_menu .animation_3 {
    -webkit-align-items: center;
    align-items: center;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
}
.main_menu .container_menu .animation_3 .guayo_1 {
    -webkit-animation: floatImg 3s infinite;
    -moz-animation: floatImg 3s infinite;
    animation: floatImg 3s infinite;
    height: auto;
    width: min(30.4166666667vw, 584px);
}
.main_menu .container_menu .animation_3 .guayo_2 {
    -webkit-animation: floatImg_2 3s infinite;
    -moz-animation: floatImg_2 3s infinite;
    animation: floatImg_2 3s infinite;
    height: auto;
    width: min(51.3541666667vw, 986px);
}
.main_menu .container_menu .container_main_logo {
    left: min(5vw, 113px);
    position: absolute;
    top: 80px;
    z-index: 3;
}
@media only screen and (max-width:1920px) {
    .main_menu .container_menu .container_main_logo {
    left: min(5vw, 113px);
    top: 80px;
}
}@media only screen and (max-width:980px) {
    .main_menu .container_menu .container_main_logo {
    left: min(5vw, 40px);
    top: 40px;
}
}@media only screen and (max-width:640px) {
    .main_menu .container_menu .container_main_logo {
    left: min(5vw, 40px);
    top: 25px;
}
}.main_menu .main_menu_links {
    grid-gap: min(2vh, 50px);
    all: initial;
    -webkit-display: flex;
    -moz-display: flex;
    -ms-display: flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    height: 100%;
    left: 0;
    overflow: hidden;
    place-content: center;
    place-items: center;
    position: relative;
    top: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
    z-index: 4;
}

    .main_menu .main_menu_links {
        gap: min(2vh, 50px);
    }

.main_menu .main_menu_links .menu_link {
    color: #fff;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* .logo_adidas:before {
    background-color: transparent;
    background-image: url("data:image/svg+xml;
        charset=utf-8, %3Csvg width=%27100%27 height=%2763.278%27 xmlns=%27http: //www.w3.org/2000/svg%27 fill=%27%23FFF%27%3E%3Cpath d=%27m5 52.225 3.448 6.053h23.773L22.8 42.002Zm58.61 6.053L43.646 23.722l-17.84 10.222 13.991 24.334Zm7.577 0H95L64.211 5 46.413 15.262Z%27/%3E%3C/svg%3E");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100%;
    content: "";
    -webkit-filter: drop-shadow(2px 2px 8px #000);
    filter: drop-shadow(2px 2px 8px #000);
    height: 52px;
    left: 0;
    position: absolute;
    top: 0;
    width: 83px;
} */
@media only screen and (max-width:1920px) {
    .logo_adidas::before {
        height: 52px;
        width: 83px;
    }
}
@media only screen and (max-width:980px) {
    .logo_adidas::before  {
    height: 33px;
    width: 53px;
}
}
@media only screen and (max-width:640px) {
    .logo_adidas::before {
    height: 25px;
    width: 40px;
    }
}

@media only screen and (max-width: 980px){
    .logo_adidas:before{
        width:53px;
        height:33px;
    }
    #button_menu_wu {
        top: 10px;
    }
    .layout_home {
        display: grid;
        grid-column-gap: 46px;
        grid-template-columns: auto;
        grid-template-rows: auto;
        grid-template-areas:
            "area1 area2"
            "area1 area4"
            "area3 area3"
            "area5 area5";
    }
    .main_menu .container_menu .logos_new {
        --size: 37.2vw;
        --aspect-ratio: 4.04;
        width: var(--size);
        height: calc(var(--size)/var(--aspect-ratio));
        max-width: 255px;
        max-height: 63px;
    }
    .main_menu .container_menu .option {
        font-size: calc(18px + 4 * ((100vw - 320px) / 659));
        margin-top: 0;
    }

    .main_menu .container_menu .area1{
        --size: 27.03vw;
        --aspect-ratio: 0.63;
        width: var(--size);
        height: calc(var(--size)/var(--aspect-ratio));
    }
    .main_menu .container_menu .area2{
        --size: 34.46vw;
        --aspect-ratio: 0.72;
        width: var(--size);
        height: calc(var(--size)/var(--aspect-ratio));
    }
    .main_menu .container_menu .area4{
        --size: 29.08vw;
        --aspect-ratio: 0.7;
        width: var(--size);
        height: calc(var(--size)/var(--aspect-ratio));
    }
    .main_menu .container_menu .area5 .products{
        font-size: calc(12px + 0 * ((100vw - 320px) / 660));
        transform: initial;
    }
    .main_menu .container_menu .area3{
        margin-top: min(4.16vw,80px);
    }
    .main_menu .container_menu .area5 {
        top: -3vw;
        left: initial;
    }
    .main_menu .container_menu .area5 .products{
        margin: 0;
    }
}

@media only screen and (max-width: 768px){
    .main_menu .container_menu .img {
        width: 92%;
    }
}

@media only screen and (max-width: 640px){
    .logo_adidas:before{
        width:40px;
        height:25px;
    }
    .layout_home {
        grid-column-gap: 16px;
        grid-row-gap: 30px;
    }

    .main_menu .container_menu .area1{
        --size: 40.03vw;
        --aspect-ratio: 0.63;
        width: var(--size);
        height: calc(var(--size)/var(--aspect-ratio));
    }
    .main_menu .container_menu .area2{
        --size: 47.46vw;
        --aspect-ratio: 0.72;
        width: var(--size);
        height: calc(var(--size)/var(--aspect-ratio));
    }
    .main_menu .container_menu .area4{
        --size: 42.08vw;
        --aspect-ratio: 0.7;
        width: var(--size);
        height: calc(var(--size)/var(--aspect-ratio));
    }
}

@media only screen and (max-width: 390px) {
    .main_menu .container_menu .area5 {
        top: -4.5vw;
    }
}
@media only screen and (max-width: 320px) {
    .main_menu .container_menu .area1 {
        --size: 30.03vw;
        --aspect-ratio: 0.63;
        width: var(--size);
        height: calc(var(--size)/var(--aspect-ratio));
    }
    .main_menu .container_menu .area2 {
        --size: 37.46vw;
        --aspect-ratio: 0.72;
        width: var(--size);
        height: calc(var(--size)/var(--aspect-ratio));
    }
    .main_menu .container_menu .area4 {
        --size: 32.08vw;
        --aspect-ratio: 0.7;
        width: var(--size);
        height: calc(var(--size)/var(--aspect-ratio));
    }
}