::-webkit-scrollbar {
   width: 0px;
 }

 /* Track */
 ::-webkit-scrollbar-track {
   background: transparent;
 }

 /* Handle */
 ::-webkit-scrollbar-thumb {
   background: transparent;
 }
 @font-face {
     font-family: 'druk_textsuper';
     src: url('font/druktext-super-webfont.woff2') format('woff2'),
          url('font/druktext-super-webfont.woff') format('woff'),
          url('font/druktext-super-webfont.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;

 }

 @font-face {
    font-family: 'druk_text_widesuper';
    src: url('font/druktextwide-super-webfont.woff2') format('woff2'),
         url('font/druktextwide-super-webfont.woff') format('woff'),
         url('font/druktextwide-super-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

 @font-face {
     font-family: 'ibm_plex_monoregular';
     src: url('font/ibmplexmono-regular-webfont.woff2') format('woff2'),
          url('font/ibmplexmono-regular-webfont.woff') format('woff'),
          url('font/ibmplexmono-regular-webfont.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;

 }

 @font-face {
     font-family: 'ibm_plex_monobold';
     src: url('font/ibmplexmono-bold-webfont.woff2') format('woff2'),
          url('font/ibmplexmono-bold-webfont.woff') format('woff'),
          url('font/ibmplexmono-bold-webfont.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;

 }

 body{
     margin: 0;
     padding: 0;
     overflow-x: hidden;
     height: 100%;
     font-family: 'ibm_plex_monoregular', sans-serif;
 }

/* .items{
    padding-bottom: 64px;
    height: 100%;
 }*/

 /* Loading Content*/

 .bg_1{
     background-color: black;
     width: 100%;
     height: 100%;
     z-index: 999;
     position: fixed;
     top: 0;
     left: 0;
     animation: bg_1_animation 10s linear forwards ;
    /* display: none;*/
 }

@keyframes bg_1_animation {
     0%{opacity: 1;transform: scale(1);}
     98%{opacity: 1;transform: scale(1);}
     99%{opacity: 0;transform: scale(1);}
     100%{opacity: 0;  transform: scale(0);}
 }

 .magic_img{
     position: absolute;
     max-width: 300px;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
     animation: magic_img_animation 10s step-end forwards ;

 }

/* @keyframes magic_img_animation {
     0%{opacity: 0.2;}
     10%{opacity: 0.2;animation: linear;}
     20%{opacity: 1; animation: linear;}
     22%{opacity: 0.2;animation: linear;}
     32%{opacity: 0.2;animation: linear}
     47%{opacity: 1;animation: linear;}
     52%{opacity: 0.2;animation: linear}
     62%{opacity: 0.2;}
     64%{opacity: 1;}
     66%{opacity: 0.2;}
     76%{opacity: 0.2;}
     78%{opacity: 1;}
     80%{opacity: 0.2;}
     85%{opacity: 0.2;}
     87%{opacity: 1;}
     89%{opacity: 0.2;}
     91%{opacity: 1;}
     99%{opacity: 1;}
     100%{opacity: 0;}
 }*/

 @keyframes magic_img_animation {
  0%{ opacity: 0.4;   }
  3%{ opacity: 0.4; }
  6%{ opacity: 1;   }
  7%{ opacity: 0.4; }
  8%{ opacity: 1;   }
  9%{ opacity: 0.4; }
  39%{opacity: 0.4;}
  40%{ opacity: 1;   }
  43%{ opacity: 0.4; }
  46%{ opacity: 1;   }
  47%{ opacity: 0.4; }
  48%{ opacity: 1;   }
  49%{ opacity: 0.4; }
  50%{ opacity: 1;   }
  51%{opacity: 0.4;}
  69%{opacity: 0.4;}
  70%{ opacity: 1;   }
  73%{ opacity: 0.4; }
  76%{ opacity: 1;   }
  77%{ opacity: 0.4; animation-duration: linear; }
  88%{ opacity: 1;  animation-duration: linear; }
  100%{ opacity: 1;   }
 }

 .bottom_line{
     width: 0%;
     height: 3px;
     background-color: #E4022C;
     position: absolute;
     bottom: 60px;
     left: 0px;
     animation: bottom_line_animation ease 10s forwards ;
 }

 @keyframes bottom_line_animation{
     from {width: 0;}
     to {width: 100%;}
     
 }

 .text_content{
     position: absolute;
     bottom: 5px;
     left: 0;
     width: 400px;
     color: white;
 }

 .loading_text{
     position: absolute;
     left: 0;
     top: 0;
     transform: translate(10px,-40px);
 }

 .lighting{            
     animation: lighting_animation 10s linear forwards ;

 }

 @keyframes lighting_animation{
     0%{opacity: 1;}
     30%{opacity: 1;}
     31%{opacity: 0;}
     100%{opacity: 0;}
 }

 .files{
     animation: files_animation 10s linear forwards ;
 }

 @keyframes files_animation{
     0%{opacity: 0;}
     30%{opacity: 0;}
     31%{opacity: 1;}
     65%{opacity: 1;}
     66%{opacity: 0;}
     100%{opacity: 0;}
 }

 .final{
     animation: final_animation 10s linear forwards ;
 }

 @keyframes final_animation{
     0%{opacity: 0;}
     65%{opacity: 0;}
     66%{opacity: 1;}
     99%{opacity: 1;}
     100%{opacity: 0;}
 }

  /* Loading Content End */

 /* Header  */

 .header_logo{
    max-width: 200px;
 }

 .header_position{
     position: fixed;
     top: 0;
     left: 0;
     background-color: rgba(37,0,0,.8);
     width: 100%;
     height: 80px;
     transition: all 0.2s linear;
     z-index: 6;
 }
 .nav_bar{
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 5px 10px; 
 }


 .nav_bar a{
     text-decoration: none;
     color: #E4022C;
     font-weight: 700;
     font-size: 18px;
     transition: all 0.5s;
     font-family: 'druk_text_widesuper', sans-serif;
     transform: scale(0);
     margin: 0 1%;
     width: 240px;
     text-align: center;
 }

 .nav_bar a:hover .nav_a,
 .nav_bar .nav_logo{
    transform: scale(1)!important;
 }

 .nav_bar a:last-child{
    margin-right: 0;
    margin-left: 0;
 }

 .header_position{
    animation:  appearing2 5s linear;
    animation-delay: 10s;
 }

 .header_position .nav_a{
    animation:  appearing 5s linear;
    animation-delay: 10s;
 }

 @keyframes appearing{
     0%{transform: scale(1);}
     90%{transform: scale(1);}
     100%{transform: scale(0);}
 }

 @keyframes appearing2{
     0%{padding-top: 5px;padding-bottom: 5px;}
     90%{padding-top: 5px;padding-bottom: 5px;}
     100%{padding-top: 0px;padding-bottom: 0px;}
 }

 .header_position:hover .nav_a{
     transform: scale(1);
 }

 .header_position:hover{
     padding-top: 5px;
     padding-bottom: 5px;
 }   

 .content{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
 }
 
 #fourvenues-iframe{
     position:relative;
     height:100%;
     overflow-y:auto!important;
 }

.header_position:hover ~ .overlay{
     top: 90px;
 }    

 .content_about img {
    margin-right: 10%;
    max-width: 30%;
 }

 .content_shop img {
    margin-right: 10%;
    max-width: 15%;
 }

 .content_events img {
    margin-right: auto;
    max-width: 24%;
 }

 .content_events p{
    margin: 0;
 }


 .content p {
    color: white;
    font-size: 20px;
    text-align: justify;
 }

 .content_radio img{
    max-width: 40%;
    margin-right: 10%;
 }
 .radio_text_ifrem{
    display: flex;
    flex-direction: column;
    align-items: center;
 }
 .radio_text{
    margin-bottom: 10px;
 }
 /*Pop up Radio End*/
 

 /* Header  End */

 


 /* Content */


 /* SHOP LOGO */
 .item_wrapper{
    position: absolute;
    left: 12%;
    top: 20%;
    z-index: 5;
    width: 100%;
    max-width: 10%;
    
 }

 .item_shop{
    position: absolute;
    transition: all .5s;
 }

 

 .item_wrapper a:hover img:last-child{
     display: none;
     opacity: 0;
 }

 .item_wrapper img:last-child{
    animation: item_shop_animation 4s linear infinite;
 }

@keyframes item_shop_animation{
    0%{ opacity: 1;   }
    3%{ opacity: 0; }
    6%{ opacity: 1;   }
    7%{ opacity: 0; }
    8%{ opacity: 1;   }
    9%{ opacity: 0; }
    10%{ opacity: 1;   }
    100%{ opacity: 1;   }
}

 /* SHOP LOGO END */

 /*EVENTS*/
 .item_wrapper_1{
    position: absolute;
    left: 14%;
    bottom: 42%;
    z-index: 5;
    width: 100%;
    max-width: 15%;
 }

 .item_events{
    position: absolute;
    transition: all .5s;
 }

 .item_wrapper_1 a:hover img:last-child{
     display: none;
     opacity: 0;
 }

 .item_wrapper_1 img:last-child{
    animation: item_events_animation 3s linear infinite;
 }

@keyframes item_events_animation{
    0%{ opacity: 1;   }
    10%{ opacity: 1;   }
    13%{ opacity: 0; }
    16%{ opacity: 1;   }
    17%{ opacity: 0; }
    18%{ opacity: 1;   }
    19%{ opacity: 0; }
    20%{ opacity: 1;   }
    100%{ opacity: 1;   }
}

/*EVENTS END*/


 /*IG*/
 .item_wrapper_2{
    position: absolute;
    left: 22%;
    bottom: 23%;
    z-index: 5;
    width: 100%;
    max-width: 10%;
 }

 .item_ig{
    position: absolute;
    transition: all .5s;
 }

 .item_wrapper_2 a:hover img:last-child{
     display: none;
     opacity: 0;
 }

 .item_wrapper_2 img:last-child{
    animation: item_ig_animation 4s linear infinite;
 }

@keyframes item_ig_animation{
    0%{ opacity: 1;   }
    20%{ opacity: 1;   }
    23%{ opacity: 0; }
    26%{ opacity: 1;   }
    27%{ opacity: 0; }
    28%{ opacity: 1;   }
    29%{ opacity: 0; }
    30%{ opacity: 1;   }
    100%{ opacity: 1;   }
}

/*IG END*/

 /*SPOTIFY*/
 .item_wrapper_3{
    position: absolute;
    left: 15%;
    bottom: 23%;
    z-index: 5;
    width: 100%;
    max-width: 6%;
 }

 .item_spotify{
    position: absolute;
    transition: all .5s;
 }

 .item_wrapper_3 a:hover img:last-child{
     display: none;
     opacity: 0;
 }

 .item_wrapper_3 img:last-child{
    animation: item_spotify_animation 5s linear infinite;
 }

@keyframes item_spotify_animation{
    0%{ opacity: 1;   }
    30%{ opacity: 1;   }
    33%{ opacity: 0; }
    36%{ opacity: 1;   }
    37%{ opacity: 0; }
    38%{ opacity: 1;   }
    39%{ opacity: 0; }
    40%{ opacity: 1;   }
    100%{ opacity: 1;   }
}

/*SPOTIFY END*/

 /*CONTACT*/
 .item_wrapper_4{
    position: absolute;
    left: 8%;
    bottom: 20%;
    z-index: 5;
    width: 100%;
    max-width: 5%;
 }

 .item_contact{
    position: absolute;
    transition: all .5s;
 }

 .item_wrapper_4 a:hover img:last-child{
     display: none;
     opacity: 0;
 }

 .item_wrapper_4 img:last-child{
    animation: item_contact_animation 6s linear infinite;
 }

@keyframes item_contact_animation{
    0%{ opacity: 1;   }
    40%{ opacity: 1;   }
    43%{ opacity: 0; }
    46%{ opacity: 1;   }
    47%{ opacity: 0; }
    48%{ opacity: 1;   }
    49%{ opacity: 0; }
    50%{ opacity: 1;   }
    100%{ opacity: 1;   }
}

/*CONTACT END*/


 /*RADIO*/

 .item_wrapper_5{
    position: absolute;
    right: 19%;
    top: 34%;
    z-index: 5;
    width: 100%;
    max-width: 18%;
 }

 .item_radio{
    position: absolute;
    transition: all .5s;
 }

 .item_wrapper_5 a:hover img:last-child{
     display: none;
     opacity: 0;
 }

 .item_wrapper_5 img:last-child{
    animation: item_radio_animation 5s step-end infinite;
 }

@keyframes item_radio_animation{
    0%{ opacity: 1;   }
    50%{ opacity: 1;   }
    53%{ opacity: 0; }
    56%{ opacity: 1;   }
    57%{ opacity: 0; }
    58%{ opacity: 1;   }
    59%{ opacity: 0; }
    60%{ opacity: 1;   }
    100%{ opacity: 1;   }
}

/*RADIO END*/

 /*CALAMAR*/

 .item_wrapper_6{
    position: absolute;
    right: 20%;
    top: 56%;
    z-index: 5;
    width: 100%;
    max-width: 10%;
 }

 .item_calamar{
    position: absolute;
    transition: all .5s;
 }

 .item_wrapper_6 a:hover img:last-child{
     display: none;
     opacity: 0;
 }

 .item_wrapper_6 img:last-child{
    animation: item_calamar_animation 4.5s linear infinite;
 }

@keyframes item_calamar_animation{
    0%{ opacity: 1;   }
    60%{ opacity: 1;   }
    63%{ opacity: 0; }
    66%{ opacity: 1;   }
    67%{ opacity: 0; }
    68%{ opacity: 1;   }
    69%{ opacity: 0; }
    70%{ opacity: 1;   }
    100%{ opacity: 1;   }
}

/*CALAMAR END*/


 /*ABOUT*/

 .item_wrapper_7{
    position: absolute;
    right: 10%;
    bottom: 30%;
    z-index: 5;
    width: 100%;
    max-width: 20%;
 }

 .item_about{
    position: absolute;
    transition: all .5s;
 }

 .item_wrapper_7 a:hover img:last-child{
     display: none;
     opacity: 0;
 }

 .item_wrapper_7 img:last-child{
    animation: item_about_animation 3.5s linear infinite;
 }

@keyframes item_about_animation{
    0%{ opacity: 1;   }
    70%{ opacity: 1;   }
    73%{ opacity: 0; }
    76%{ opacity: 1;   }
    77%{ opacity: 0; }
    78%{ opacity: 1;   }
    79%{ opacity: 0; }
    80%{ opacity: 1;   }
    100%{ opacity: 1;   }

}

 /*HK*/

 .item_wrapper_8{
    position: absolute;
    right: 20%;
    top: 20%;
    z-index: 5;
    width: 100%;
    max-width: 12%;
 }

 .item_hk{
    position: absolute;
    transition: all .5s;
 }

 .item_wrapper_8 a:hover img:last-child{
     display: none;
     opacity: 0;
 }

 .item_wrapper_8 img:last-child{
    animation: item_hk_animation 4s linear infinite;
 }

@keyframes item_hk_animation{
    0%{ opacity: 1;   }
    70%{ opacity: 1;   }
    73%{ opacity: 0; }
    76%{ opacity: 1;   }
    77%{ opacity: 0; }
    78%{ opacity: 1;   }
    79%{ opacity: 0; }
    80%{ opacity: 1;   }
    100%{ opacity: 1;   }

}

/*HK END*/

/*Youtube*/

.item_wrapper_9{
    position: absolute;
    right: 6%;
    top: 25%;
    z-index: 5;
    width: 12%;
    max-width: 250px;
 }

 .item_youtube{
    position: absolute;
    transition: all .5s;
 }

 .item_wrapper_9 a:hover img:last-child{
     display: none;
     opacity: 0;
 }

 .item_wrapper_9 img:last-child{
    animation: item_youtube_animation 4s linear infinite;
 }

@keyframes item_youtube_animation{
    0%{ opacity: 1;   }
    20%{ opacity: 1;   }
    23%{ opacity: 0; }
    26%{ opacity: 1;   }
    27%{ opacity: 0; }
    28%{ opacity: 1;   }
    29%{ opacity: 0; }
    30%{ opacity: 1;   }
    100%{ opacity: 1;   }
}

/*Youtube END*/

/*NODES REC*/

.item_wrapper_10{
    position: absolute;
    right: 13%;
    top: 59%;
    z-index: 5;
    width: 16%;
    max-width: 250px;
 }

 .item_nodes-rec{
    position: absolute;
    transition: all .5s;
 }

 .item_wrapper_10 a:hover img:last-child{
     display: none;
     opacity: 0;
 }

 .item_wrapper_10 img:last-child{
    animation: item_nodes-rec_animation 4s linear infinite;
 }

@keyframes item_nodes-rec_animation{
    0%{ opacity: 1;   }
    20%{ opacity: 1;   }
    23%{ opacity: 0; }
    26%{ opacity: 1;   }
    27%{ opacity: 0; }
    28%{ opacity: 1;   }
    29%{ opacity: 0; }
    30%{ opacity: 1;   }
    100%{ opacity: 1;   }
}

/*NODES REC END*/

/*ICON*/

.item_wrapper_11{
    position: absolute;
    right: 19%;
    top: 46%;
    z-index: 5;
    width: 11%;
    max-width: 9%;
 }

 .item_icon{
    position: absolute;
    transition: all .5s;
 }

 .item_wrapper_11 a:hover img:last-child{
     display: none;
     opacity: 0;
 }

 .item_wrapper_11 img:last-child{
    animation: item_icon_animation 4s linear infinite;
    animation-delay: 1s;
 }

@keyframes item_icon_animation{
    0%{ opacity: 1;   }
    20%{ opacity: 1;   }
    23%{ opacity: 0; }
    26%{ opacity: 1;   }
    27%{ opacity: 0; }
    28%{ opacity: 1;   }
    29%{ opacity: 0; }
    30%{ opacity: 1;   }
    100%{ opacity: 1;   }
}

/*ICON END*/


/*hidden items*/
.hidden_item_1{
   position: absolute;
   left: 23%;
   top: 250px;
   z-index: 4;
}
.hidden_item_2{
   position: absolute;
   left: 24%;
   top: 440px;
   z-index: 4;
}
.hidden_item_3{
   position: absolute;
   left: 32%;
   top: 720px;
   z-index: 4;
}
.hidden_item_4{
   position: absolute;
   right: 29%;
   top: 710px;
   z-index: 4;
}
.hidden_item_5{
   position: absolute;
   right: 4%;
   top: 40%;
   z-index: 4;
}
/*hidden items END*/

 .bg_{
     background-image: url("https://magicroomhk.com/bg.jpg?v12");
     background-size: 100% 100%;
     width: 100%;
     height: 100%;
     background-position: top left;
     background-repeat: no-repeat;
     padding: 0;
     /*background-attachment: fixed;*/

 }

 .car_bg{
   position: absolute;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   transform: translate(12%, -6%) scale(0.5);
   opacity: 0;
   max-width: 80%;
   animation: car_bg_animation linear 20s infinite;
   animation-delay: 10s;
 }

 @keyframes car_bg_animation{
   0%{transform: translate(12%, -6%) scale(0.5);opacity: 0;}
   2.5%{opacity: 1;}
   19%{transform: translate(12%, 15%) scale(1);opacity: 1;}
   20.5%{transform: translate(12%, 15%) scale(1);opacity: 0;}
   100%{transform: translate(12%, -6%) scale(0.5);opacity: 0;}
 }

 /* Content End */



/* Footer */

footer{
    z-index: 15;
    position: fixed;
    width: 100%;
    height: 60px;
    bottom: 0;
    border-top: 3px solid #E4022C;
    display: flex;
    transform: translate(0px, 60px);
    transition: transform .5s;
}

.footer-animate{
    transform: translate(0px, 0px);
}

.arrow-down{
    position: absolute;
    top: -30px;
    right: 10px;
    width: 20px;
    height: 20px;
}

.audio{
    width: 500px;
    background-color: rgb(52, 51, 51);
}

.marquee3k {
    width: 100%;
    background-color: black;  
    height: 100%; 
    overflow-x: hidden;
    display: flex;
    align-items: center;
}

.marquee3k span {
    font-family: 'druk_text_widesuper', sans-serif;
    color: #E4022C;
    font-size: 22px;
}

/* Footer End */


/*POP UP*/
.overlay {
    position: fixed;
    top: 80px;
    bottom: 0px;
    left: 0;
    right: 0;
 
    transition: all 500ms;
    visibility: hidden;
    opacity: 0;
    z-index: 10;

}
.overlay:target {
    visibility: visible;
    opacity: 1;
}

.popup {
    margin: 0;
    padding: 0;
    background: rgba(37,0,0,.8);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.5s ease-in-out;
}


.popup .close {
    position: absolute;
    top: 0px;
    right: 50px;
    transition: all 200ms;
    font-size: 50px;
    font-weight: bold;
    text-decoration: none;
    color: #fff;
}
.popup .close:hover {
    color: rgb(214, 153, 153);
}
.popup .content {
    height: 100%;
    overflow: auto;
}
.icon .popup {
    display: flex;
    justify-content: center;
}

.content_icon .content_icon_image_item {
    display:flex;
    flex: 1 50%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
}
.content_icon_item {
    flex: 1 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    position: sticky;
    top: 0;
}
.content_icon_item img {
    width: 50%!important;
}

.content_icon {
    display: flex;
    justify-content: center;
    align-items: flex-start; 
    width: 80%; 
    position: static; 
    left: initial;
    top: initial;
    transform: initial;

}
.content_icon_image_item  a{
    display: flex;
    width: calc((100% / 4) - 7.5px);
}
.content_icon  img {
    width: 100%;
    height: auto;
}

/*POP UP END*/

 /* Rain */
 .rain_iframe {
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100vh;
   z-index: 2;
 }
 .rain {
   position: absolute;
   left: 0;
   top: -100px;
   bottom: 0px;
   right: 0;
   width: 100%;
   height: calc(100vh + 100px);
   z-index: 2;
 }

 .rain.back-row {
   z-index: 1;
   overflow: hidden;
   opacity: 0.9;
 }

 .sunny {
   opacity: 0;
 }

 .sunny.rainy {
   opacity: 1;
 }

 /* Rain End */

 @media screen and (max-width:  1400px){
    .header_position{
        height: initial;
        padding: 0;
    }
    .nav_bar a{
        font-size: 14px;
        margin: 0 6px;
    }
    .header_logo{
        max-width: 140px;
    }
    .overlay {
        top: 56px
    }
    .header_position:hover ~ .overlay{
        top: 66px
    }
 }

 @media screen and (max-width:  992px){
    .header_position .nav_a{
        transform: scale(1);
    }
    .header_position:hover{
        padding: 0;
    }
 }

@media only screen and (orientation: portrait){
    body {
     height: 100vw;
     
     width: 100vh;
     transform-origin: top left;
     transform: rotate(90deg) translateY(-100%);
     overflow-y: hidden;
     padding-bottom: env(safe-area-inset-bottom);
    }
    body.safari{
        width: calc(100vh - 70px);
    }
    footer{
        height: 46px;
    }
    .magic_img{
        max-width: 200px;
    }

    .bottom_line{
        bottom: 46px;
    }

    .loading_text{
        transform: translate(10px, -28px);
    }

    .audio iframe{
        height: 60px;
    }

    .marquee3k span{
        font-size: 18px;
    }
/*
    .content_events iframe{
        width: 400px!important;
        height: auto!important;
    }
*/

    .overlay{
        top: 43px!important;
    }

    .content_about p{
        font-size: 11px;
    }

}
@media only screen and (orientation: portrait) and (max-height: 1000px){
    .nav_bar a{
        font-size: 11px;
        margin: 0 2px;
    }
}

@media only screen and (orientation: portrait) and (max-height: 768px){
    .nav_bar a{
        font-size: 8px;
        width: initial;
    }    
    .header_logo{
        max-width: 100px;
    }
    .audio{
        width: 300px;
    }
}

@media only screen and (orientation: portrait) and (max-height: 550px){
    .nav_bar a{
        font-size: 7px;
    }    
}

 @media screen and (max-width: 1249px){  
     body{
        overflow: hidden;
     }  
     .popup .close{
        font-size: 30px
     }
    .hidden_item_1 img,
    .hidden_item_2 img,
    .hidden_item_3 img,
    .hidden_item_4 img,
    .hidden_item_5 img{
        max-width: 100%;
    }  
    .hidden_item_1 {
        left: 23%;
        top: 25%;
        max-width: 10%;
    }
    .hidden_item_2 {
        left: 23%;
        top: 43%;
        max-width: 20%;
    }
    .hidden_item_3 {
        left: 30%;
        bottom: 25%;
        top: initial;
        max-width: 10%;
    }
    .hidden_item_4 {
        right: 30%;
        bottom: 25%;
        top: initial;
        max-width: 10%;
    }
    .hidden_item_5 {
        max-width: 10%;
    }
    .nav_bar a{
        font-size: 8px;
        width: initial;
    }    
    .header_logo{
        max-width: 100px;
    }
    .audio{
        width: 300px;
    }
    .content_about p{
        font-size: 11px;
    }

    footer{
        height: 46px;
    }
    .magic_img{
        max-width: 200px;
    }

    .bottom_line{
        bottom: 46px;
    }

    .loading_text{
        transform: translate(10px, -28px);
    }

    .audio iframe{
        height: 60px;
    }

    .marquee3k span{
        font-size: 18px;
    }
/*
    .content_events iframe{
        width: 400px!important;
        height: auto!important;
    }
*/
    .overlay{
        top: 43px!important;
        
    }
 }
 
 @media screen and (max-width: 1249px) and (max-height: 550px){  
    .hidden_item_2 {
        left: 23%;
        top: 40%;
        max-width: 15%;
    }
    .item_wrapper{
       top: 15%;
    }
    .item_wrapper_1 {
        bottom: 45%;
        max-width: 13%;
    }
    .item_wrapper_2{
       bottom: 25%
    }
    .item_wrapper_3{
       bottom: 27%
    }
    .item_wrapper_4{
       bottom: 26%
    }
    .item_wrapper_5 {
       max-width: 17%;
    }
    .item_wrapper_8{
       max-width: 10%;
    }
    .item_wrapper_11{
       max-width: 9%;
    }
    .hidden_item_1{
       top: 21%
    }
    .hidden_item_2{
       top: 37%
    }
    .hidden_item_3{
       max-width: 8%;
    }
    .hidden_item_4{
       max-width: 8%;
    }
 }
 @media screen and (min-width: 1250px) and (max-width:  1599px){
    body{
        background-image: url(https://magicroomhk.com/bg.jpg?v12);
        background-size: 100% 100%;
        width: 100%;
        height: 100%;
        background-position: top left;
        background-repeat: no-repeat;
        padding: 0;
        background-attachment: fixed;
    }
    .bg_{
        display: none;
    }
    .item_wrapper{
       left: 9%;
       /*top: 20%;*/
       top: 166px;
       /*max-width: 13%; */
       max-width: 170px;      
    }
    .item_wrapper_1{
        left: 13%;
        /*max-width: 19%;*/
        max-width: 230px;
        /*top: 57%;*/
        top: 454px;
        bottom: initial;
    }
    .item_wrapper_2{
       left: 23%;
       /*top: 78%;*/
       top: 586px;
       /*max-width: 10%;*/
       max-width: 160px;
       bottom: initial;
    }
    .item_wrapper_3{
       left: 14%;
       /*top: 77%;*/
       top: 586px;
       /*max-width: 8%;*/
       max-width: 110px;
       bottom: initial;
    }
    .item_wrapper_4{
       left: 6%;
       /*top: 80%;*/
       top: 600px;
       /*max-width: 9%;*/
       max-width: 70px;
       bottom: initial;
    }
    .item_wrapper_5{
       right: 18%;
       top: 280px;
       max-width: 230px;
    }
    .item_wrapper_6{
       right: 16%;
       /*top: 54%;*/
       top: 385px;
       /*max-width: 14%;*/
       max-width: 200px;
    }    
    .item_wrapper_7{
       right: 8%;
       top: 632px;
       max-width: 300px;
       bottom: initial;
    }
    .item_wrapper_8{
       right: 20%;
       top: 156px;
       max-width: 140px;
       bottom: initial;
    }
    
    .item_wrapper_10{
        right:15%;
        top: 500px;
        max-width: 220px;
     }
    .item_wrapper_11 {
        top: 365px;
        max-width: 160px;
        right:15%;
    }
    .hidden_item_1{
        left: 23%;
        top: 200px;
    }
    .hidden_item_1 img{
        max-width: 130px;
    }
    .hidden_item_2{
        left: 24%;
        top: 334px;
    }
    .hidden_item_2 img{
        max-width: 230px;
    }
    .hidden_item_3{
        left: 32%;
        top: 520px;
    }
    .hidden_item_3 img{
        max-width: 120px;
    }
    .hidden_item_4{
        right: 30%;
        top: 534px;
    }
    .hidden_item_4 img{
        max-width: 110px;
    }
 } 
 
 @media screen and (min-width: 1250px) and (max-width: 1520px) and (max-height: 901px){
    .item_wrapper_2 {
        top: 646px;
    }.item_wrapper_3 {
        top: 660px;
    }.item_wrapper_4 {
        top: 670px;
    }.item_wrapper_7 {
        top: 630px;
    }
    .hidden_item_3,
    .hidden_item_4{
        top: 580px;
    }
} 

@media screen and (min-width: 1250px) and (max-width: 1300px) and (max-height: 700px){
    .item_wrapper {
        max-width: 150px;
        top: 76px;
    }
    .item_wrapper_1 {
        max-width: 180px;
        top: 350px;
    }
    .item_wrapper_2 {
        max-width:130px;
        top: 474px;
    }
    .item_wrapper_3 {
        top: 460px;
        max-width:100px;
    }
    .item_wrapper_4 {
        top: 480px;
    }
    .item_wrapper_5 {
        top: 190px;
        max-width:220px;
    }
    .item_wrapper_7 {
        top: 455px;
        max-width:260px;
    }
    .item_wrapper_8 {
        top: 90px;
    }.item_wrapper_10 {
        right: 13%;
        top: 366px;
    }.item_wrapper_11 {
        top: 275px;
    }
    .hidden_item_1{
        top:140px;
    }
    .hidden_item_2{
        top:254px;
    }
    .hidden_item_2 img{
        max-width:190px;
    }
    .hidden_item_3,
    .hidden_item_4{
        top: 424px;
    }
    .hidden_item_3 img,
    .hidden_item_4 img{
        max-width: 100px;
    }
    .hidden_item_5 img{
        max-width:120px;
    }
}

 @media screen and (min-width: 1600px) and (max-width:  1799px){
    .item_wrapper{
       left: 8%;
       /*top: 20%;*/
       top: 166px;
       /*max-width: 13%; */
       max-width: 214px;      
    }
    .item_wrapper_1{
        left: 11%;
        /*max-width: 19%;*/
        max-width: 305px;
        /*top: 57%;*/
        top: 520px;
        bottom: initial;
    }
    .item_wrapper_2{
       left: 24%;
       /*top: 78%;*/
       top: 700px;
       /*max-width: 10%;*/
       max-width: 172px;
       bottom: initial;
    }
    .item_wrapper_3{
       left: 15%;
       /*top: 77%;*/
       top: 700px;
       /*max-width: 8%;*/
       max-width: 134px;
       bottom: initial;
    }
    .item_wrapper_4{
       left: 5%;
       /*top: 80%;*/
       top: 730px;
       /*max-width: 9%;*/
       max-width: 90px;
       bottom: initial;
    }
    .item_wrapper_5{
       right: 18.5%;
       /*top: 39%;*/
       top: 310px;
       /*max-width: 21%;*/
       max-width: 290px;
    }
    .item_wrapper_6{
       right: 15%;
       /*top: 54%;*/
       top: 474px;
       /*max-width: 14%;*/
       max-width: 250px;
    }    
    .item_wrapper_7{
       right: 6%;
       /*top: 72%;*/
       top: 650px;
       /*max-width: 20%;*/
       max-width: 350px;
       bottom: initial;
    }    
    .item_wrapper_8{
       right: 20%;
       top: 196px;
       max-width: 160px;
       bottom: initial;
    }
    .item_wrapper_10{
        top: 530px;
     }
     .item_wrapper_11 {
        top:418px;
        max-width: 150px;
     }
    .hidden_item_1{
        left: 23%;
        top: 220px;
    }
    .hidden_item_1 img{
        max-width: 160px;
    }
    .hidden_item_2{
        left: 24%;
        top: 380px;
    }
    .hidden_item_2 img{
        max-width: 280px;
    }
    .hidden_item_3{
        left: 31%;
        top: 620px;
    }
    .hidden_item_3 img{
        max-width: 135px;
    }
    .hidden_item_4{
        right: 30%;
        top: 616px;
    }
    .hidden_item_4 img{
        max-width: 130px;
    }
 } 

 @media screen and (min-width: 1600px) and (max-width:  1799px) and (min-height:  1000px){
    .item_wrapper{
       left: 8%;
       top: 186px;
       max-width: 230px;      
    }
    .item_wrapper_1{
        left: 11%;
        max-width: 315px;
        top: 590px;
    }
    .item_wrapper_2{
       left: 24%;
       top: 772px;
       max-width: 192px;
    }
    .item_wrapper_3{
       left: 14%;
       top: 772px;
       max-width: 134px;
    }
    .item_wrapper_4{
       left: 5%;
       top: 782px;
       max-width: 100px;
    }
    .item_wrapper_5{
       right: 18%;
       top: 350px;
       max-width: 280px;
    }
    .item_wrapper_6{
       right: 16%;
       top: 540px;
       max-width: 235px;
    }    
    .item_wrapper_7{
       right: 7%;
       top: 730px;
       max-width: 354px;
    }    
    .item_wrapper_8{
       right: 20%;
       top: 240px;
       max-width: 160px;
    }
    .item_wrapper_10{
        top: 587px;
     }
     .item_wrapper_11 {
        top: 460px;
    }
    .hidden_item_1{
        left: 23%;
        top: 260px;
    }
    .hidden_item_1 img{
        max-width: 160px;
    }
    .hidden_item_2{
        left: 24%;
        top: 430px;
    }
    .hidden_item_2 img{
        max-width: 280px;
    }
    .hidden_item_3{
        left: 32%;
        top: 690px;
    }
    .hidden_item_3 img{
        max-width: 135px;
    }
    .hidden_item_4{
        right: 30%;
        top: 690px;
    }
    .hidden_item_4 img{
        max-width: 130px;
    }
 }

 @media screen and (min-width: 1800px) and (max-width:  2499px){
    .item_wrapper{
       left: 9%;
       top: 110px;
       max-width: 240px;      
    }
    .item_wrapper_1{
        left: 12%;
        max-width: 315px;
        top: 550px;
    }
    .item_wrapper_2{
       left: 24%;
       top: 740px;
       max-width: 192px;
    }
    .item_wrapper_3{
       left: 15%;
       top: 740px;
       max-width: 134px;
    }
    .item_wrapper_4{
       left: 5%;
       top: 770px;
       max-width: 110px;
    }
    .item_wrapper_5{
       right: 19%;
       top: 275px;
       max-width: 370px;
    }
    .item_wrapper_6{
       right: 16%;
       top: 460px;
       max-width: 265px;
    }    
    .item_wrapper_7{
       right: 7%;
       top: 660px;
       max-width: 394px;
    }    
    .item_wrapper_8{
       right: 20%;
       top: 140px;
       max-width: 180px;
    }
    .item_wrapper_10{
        top: 560px;
     }
     .item_wrapper_11 {
        top: 420px;
        max-width: 160px;
    }

    .hidden_item_1 img,
    .hidden_item_2 img,
    .hidden_item_3 img,
    .hidden_item_4 img{
        max-width: 100%;
    }  
    .hidden_item_1 {
        left: 23%;
        top: 220px;
    }
    .hidden_item_2 {
        left: 24%;
        top: 390px;
    }
    .hidden_item_3 {
        left: 32%;
        top: 660px;
    }
    .hidden_item_4 {
        right: 29%;
        top: 660px;
    }
 }

 @media screen and (min-width: 1800px) and (min-height:  1000px){
    .item_wrapper{
       left: 9%;
       top: 210px;
       max-width: 240px;      
    }
    .item_wrapper_1{
        left: 12%;
        max-width: 315px;
        top: 626px;
    }
    .item_wrapper_2{
       left: 24%;
       top: 820px;
       max-width: 192px;
    }
    .item_wrapper_3{
       left: 15%;
       top: 820px;
       max-width: 134px;
    }
    .item_wrapper_4{
       left: 5%;
       top: 844px;
       max-width: 110px;
    }
    .item_wrapper_5{
       right: 18.5%;
       top: 370px;
       max-width: 350px;
    }
    .item_wrapper_6{
       right: 16%;
       top: 560px;
       max-width: 265px;
    }    
    .item_wrapper_7{
       right: 7%;
       top: 760px;
       max-width: 394px;
    }    
    .item_wrapper_8{
       right: 20%;
       top: 240px;
       max-width: 180px;
    }
    .item_wrapper_10{
        top: 620px;
    }
    .item_wrapper_11 {
        top: 500px;
    }
    .hidden_item_1 img,
    .hidden_item_2 img,
    .hidden_item_3 img,
    .hidden_item_4 img{
        max-width: 100%;
    }  
 }


 @media screen and (min-width: 2500px){
    .item_wrapper{
       left: 10%;
       /*top: 20%;*/
       top: 276px;
       /*max-width: 13%; */
       max-width: 290px;      
    }
    .item_wrapper_1{
        left: 13%;
        /*max-width: 19%;*/
        max-width: 380px;
        /*top: 57%;*/
        top: 766px;
        bottom: initial;
    }
    .item_wrapper_2{
       left: 24%;
       /*top: 78%;*/
       top: 1000px;
       /*max-width: 10%;*/
       max-width: 242px;
       bottom: initial;
    }
    .item_wrapper_3{
       left: 15%;
       /*top: 77%;*/
       top: 990px;
       /*max-width: 8%;*/
       max-width: 200px;
       bottom: initial;
    }
    .item_wrapper_4{
       left: 8%;
       /*top: 80%;*/
       top: 1020px;
       /*max-width: 9%;*/
       max-width: 130px;
       bottom: initial;
    }
    .item_wrapper_5{
       right: 22%;
       /*top: 39%;*/
       top: 440px;
       /*max-width: 21%;*/
       max-width: 400px;
    }
    .item_wrapper_6{
       right: 18%;
       /*top: 54%;*/
       top: 705px;
       /*max-width: 14%;*/
       max-width: 300px;
    }    
    .item_wrapper_7{
       right: 9%;
       /*top: 72%;*/
       top: 930px;
       /*max-width: 20%;*/
       max-width: 504px;
       bottom: initial;
    }    
    .item_wrapper_8{
       right: 20%;
       top: 290px;
       max-width: 220px;
       bottom: initial;
    }
    .item_wrapper_9{
        right: 7%;
        max-width: 270px;
     }
     .item_wrapper_10{
         right: 13%;
         top: 730px;
         max-width: 305px;
     }
     .item_wrapper_11 {
        top: 540px;
        right: 12%;
        max-width: 220px;
    }
    .hidden_item_1 img,
    .hidden_item_2 img,
    .hidden_item_3 img,
    .hidden_item_4 img{
        max-width: 100%;
    }  
    .hidden_item_1{
        left: 24%;
        top: 340px;
    }
    .hidden_item_2{
        left: 27%;
        top: 570px;
    }
    .hidden_item_3{
        left: 32%;
        top: 890px;
    }
    .hidden_item_4{
        right: 30%;
        top: 890px;
    }
 }