.welcome-screen .helper{display:inline-block;height:100%;vertical-align:middle}
.welcome-screen img{display:inline-block;vertical-align:middle;max-height:100px;max-width:100px;margin:0 auto;animation-name:pulse_animation;animation-duration:2500ms;transform-origin:50% 50%;animation-timing-function:ease-in-out}@media (min-width: 375px){.welcome-screen img{max-width:180px !important;max-height:180px !important}}@keyframes pulse_animation{0%{transform:scale(0.8)}100%{transform:scale(1)}}.loading-welcome{position:fixed;top:0;bottom:0;left:0;right:0;width:100%;height:100%;background-color:#fff;display:none;z-index:9999998;opacity:1}
.loading-welcome.active{white-space:nowrap;text-align:center;display:inline-block}
.loading-welcome #welcomeImg{display:none}
.progress{position:relative;height:4px;display:block;width:100%;background-color:#F4F4F4;border-radius:2px;background-clip:padding-box;margin:0 auto;overflow:hidden}
.progress .loading-bar{background-color:#797d80}
.progress .indeterminate:before{content:'';position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left, right;-webkit-animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite}
.progress .indeterminate:after{content:'';position:absolute;background-color:inherit;top:0;left:0;bottom:0;will-change:left, right;-webkit-animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;-webkit-animation-delay:1.15s;animation-delay:1.15s}@-webkit-keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@keyframes indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}100%{left:100%;right:-90%}}@-webkit-keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}@keyframes indeterminate-short{0%{left:-200%;right:100%}60%{left:107%;right:-8%}100%{left:107%;right:-8%}}

.positions{
  background-color: #222222; 
  border-top-left-radius:15px ;
   margin: 0px auto; 
   padding: 0px;
}

.positions h1{
  margin: 0px;
  margin-bottom: 20px;
  color: white;
   text-align: center 
}

#finlandia{
  margin-left: 1vw;
  margin-right: 1vw;
  background: linear-gradient(358.62deg, rgba(0, 0, 0, 0.8) 1.11%, rgba(0, 0, 0, 0) 98.81%), url(/Image/pictures/finlandia.jpg);
  border-radius: 15px;
  background-size: 165%;
  background-position: 45% 53%;
  border-radius: 10%;+
}


#jack{
  margin-left: 2vw;
  background: linear-gradient(358.62deg, rgba(0, 0, 0, 0.8) 1.11%, rgba(0, 0, 0, 0) 98.81%), url(/Image/pictures/jack.png);
  border-radius: 15px;
  background-size: 135%;
  background-position: 45% 16%;
  border-radius: 10%;
}


#beer{
  margin-left: 1vw;
  margin-right: 1vw;
  background: linear-gradient(358.62deg, rgba(0, 0, 0, 0.8) 1.11%, rgba(0, 0, 0, 0) 98.81%), url(/Image/pictures/beer.jpg);
  border-radius: 15px;
  background-size: 165%;
  background-position: 45% 53%;
  border-radius: 10%;
}

#gin{
  margin-left: 2vw;
  background: linear-gradient(358.62deg, rgba(0, 0, 0, 0.8) 1.11%, rgba(0, 0, 0, 0) 98.81%), url(/Image/pictures/gin.png);
  border-radius: 15px;
  background-size: 135%;
  background-position: 45% 16%;
  border-radius: 10%;
}

#liqueur{
  margin-left: 1vw;
  margin-right: 1vw;
  background: linear-gradient(358.62deg, rgba(0, 0, 0, 0.8) 1.11%, rgba(0, 0, 0, 0) 98.81%), url(/Image/pictures/liqueur.png);
  border-radius: 15px;
  background-size: 125%;
  background-position: 15% 3%;
  border-radius: 10%;
}

#tequila{
  margin-left: 2vw;
  transform: translateY(-2vw);
  display: table-cell;
  vertical-align: middle ;
  background: linear-gradient(358.62deg, rgba(0, 0, 0, 0.8) 1.11%, rgba(0, 0, 0, 0) 98.81%), url(/Image/pictures/tequila.jpg);
  border-radius: 15px;
  background-size: 105%;
  background-position: 45% 16%;
  border-radius: 10%;
}

#rum{
  margin-left: 1vw;
  margin-right: 1vw;
  background: linear-gradient(358.62deg, rgba(0, 0, 0, 0.8) 1.11%, rgba(0, 0, 0, 0) 98.81%), url(/Image/pictures/rum.png);
  border-radius: 15px;
  background-size: 120%;
  background-position: 5% 2%;
  border-radius: 10%;
}


#whiskey{
  margin-left: 2vw;
  transform: translateY(-2vw);
  display: table-cell;
  vertical-align: middle ;
  background: linear-gradient(358.62deg, rgba(0, 0, 0, 0.8) 1.11%, rgba(0, 0, 0, 0) 98.81%), url(/Image/pictures/whiskey.png);
  border-radius: 15px;
  background-size: 100%;
  background-position: 45% 6%;
  border-radius: 10%;
}

#cognac{
  margin-left: 1vw;
  margin-right: 1vw;
  background: linear-gradient(358.62deg, rgba(0, 0, 0, 0.8) 1.11%, rgba(0, 0, 0, 0) 98.81%), url(/Image/pictures/cognac.jpg);
  border-radius: 15px;
  background-size: 110%;
  background-position: 25% 2%;
  border-radius: 10%;
}

#vodka{
  margin-left: 2vw;
  background: linear-gradient(358.62deg, rgba(0, 0, 0, 0.8) 1.11%, rgba(0, 0, 0, 0) 98.81%), url(/Image/pictures/vodka.png);
  border-radius: 15px;
  background-size: 140%;
  background-position: 5% 2%;
  border-radius: 10%;
}

#wine{
  margin-left: 1vw;
  margin-right: 1vw;
  background: linear-gradient(358.62deg, rgba(0, 0, 0, 0.8) 1.11%, rgba(0, 0, 0, 0) 98.81%), url(/Image/pictures/wine.png);
  border-radius: 15px;
  background-size: 120%;
  background-position: 0% 0%;
  border-radius: 10%;
}

#sparkling{
  margin-left: 2vw;
  transform: translateY(-2vw);
  display: table-cell;
  vertical-align: middle ;
  background: linear-gradient(358.62deg, rgba(0, 0, 0, 0.8) 1.11%, rgba(0, 0, 0, 0) 98.81%), url(/Image/pictures/sparkling.png);
  border-radius: 15px;
  background-size: 120%;
  background-position: 45% 16%;
  border-radius: 10%;
}

#cocktails{
  margin-left: 1vw;
  margin-right: 1vw;
  background: linear-gradient(358.62deg, rgba(0, 0, 0, 0.8) 1.11%, rgba(0, 0, 0, 0) 98.81%), url(/Image/pictures/cocktails.png);
  border-radius: 15px;
  background-size: 100%;
  background-position: 0% 50%;
  border-radius: 10%;
}

#shot{
  margin-left: 2vw;
  background: linear-gradient(358.62deg, rgba(0, 0, 0, 0.8) 1.11%, rgba(0, 0, 0, 0) 98.81%), url(/Image/pictures/shot.jpg);
  border-radius: 15px;
  background-size: 150%;
  background-position: 40% 20%;
  border-radius: 10%;
}


/*Вкладки*/
  .tabs {
    border: none;
    
  }


  @media (max-width: 399px) {
    .tabs__nav {
      justify-content: left;
   }  
  }

  .tabs__nav {
    -moz-border-radius-topleft: 15vw; 

    padding-left: 15px;
    padding-top: 35px;
    justify-content: left;
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    
  }

.tabs__btn {
  left: 25.9%;
  right: 45.9%;
  top: 31.16%;
  bottom: 66.23%;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 22px;
  /* identical to box height */
  border: none;
  letter-spacing: 0.32px;
  background-color: rgba(0, 0, 0, 0);
  color: #756f6f;
}

.tabs__btn_active {
  
left: 25.9%;
right: 45.9%;
top: 31.16%;
bottom: 66.23%;
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 22px;
/* identical to box height */
border: none;
letter-spacing: 0.32px;
background-color: rgba(0, 0, 0, 0);
color: #ffff;


  }

  .tabs__btn:not(.tabs__btn_active):hover,
  .tabs__btn:not(.tabs__btn_active):focus {
  background-color: rgb(0, 0, 0,0);
  }

  .tabs__content {
    background-color: #E6E6E6;
  
    width: auto;
    height: auto;
    margin-right: 0px;
    margin-left: auto;
    padding-right: 0px;
    padding-left: auto;
  }

  .tabs__content p{
   
  }

  .tabs__pane {

    display: none;
     
  }


  .tabs__pane_show {
display: flex;
display: block;
width:auto;
height:auto;
margin-right: 0px;
margin-left: auto;
padding-right: 0px;
padding-left: auto;
background-color: #2e2e2e;
  }

  .tabs__pane_show1 {
    display: flex;
    display: block;
    width:auto;
    height:auto;
    margin-right: 0px;
    margin-left: auto;
    padding-right: 0px;
    padding-left: auto;
    background-color: rgb(0, 0, 0,0);
      }


.tabs__pane img{
 
  width: 100%;
  height: auto;
}
/**/

body{
margin-right: 0px;
margin-left: auto;
padding-right: 0px;
padding-left: auto;
background-color: #222222;
font-family: 'Inter';
font-style: normal;
margin-top: 0px;
margin-bottom: 0px;
}

a{
 text-decoration: none;
}



.top p,a {
padding-left: 28px;
margin-top: 22px;
margin-bottom: 30px;
top: calc(50% - 36px/2 - 356px);
font-family: 'Inter';
font-style: normal;
font-weight: 700;
font-size: 30px;
line-height: 36px;
letter-spacing: 0.32px;
color: #ffffff;
}
.top {
  display: flex;
}



.language {

  margin: auto 25px auto auto;
}

.language a{
left: 84.1%;
right: 6.41%;
top: 6.64%;
bottom: 91%;

font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;
/* identical to box height */

letter-spacing: 0.32px;

color:#ffffff;
;

}

.language img{
  
  width: 5vh;
  height: 5vh;
}

.comp{
  margin-top: 10px;
  float: right;
  text-align: right;
  position	: absolute;
  right: 30px;
  width: fit-content;
  color: #ffff;
  font-weight: 400;
  font-size: 7vw;
}

.comp_d{
  margin-top: 6vw;
  margin-left: 37vw;
  position	: absolute;
  width: fit-content;
  color: #ffff;
  font-weight: 400;
  font-size: 4vw;
}




/*Скрол меню*/
.nav-scroller {
  overflow-y: hidden;

  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
.nav-scroller__items {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
}
.nav-scroller__item {
 
}
.nav-scroller__items::-webkit-scrollbar {
  display: none;
}
/**/

/*Свайп вверх*/
#myBtn {
  background-color: rgba(28,28,28,0.5);
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 45%; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 10px; /* Rounded corners */
    font-size: 20px; /* Increase font size */
}

#myBtn:hover {
    
}
/**/

/* Style the tab */
.tab {
  width: 100%;
  height: auto;
  
  margin-right: 0px;
  justify-content: left;

  background-color: #222222;
}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* +++++Спливаючий опис меню+++++*/

/* Modal Content/Box */
.modal-content {
  color: #fff;
  background-color: #2e2e2e;
  margin: 30vh auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.modal-content span {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.modal-content p {
  width: 80%;
}

.modal-content span:hover,
.modal-content span:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/*--- Спливаючий опис меню----*/


@media (min-width: 150px) {
  
/* Style the buttons that are used to open the tab content */
.tab button {
  margin: auto 5px 5% 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 12px 16px;
  margin: auto 5;
  gap: 8px;

  left: 176px;
  top: 114px;
    /* lightgren */
  color: #ffffff;
  background: #2c3036;
  border-radius: 4px;
  border:none;

  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  /* identical to box height */
  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: 0.32px;
  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;

  width: auto;
  height: 10vw;

  font-size: 3vw;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #1f2020;
}

/* Create an active/current tablink class */
.tab button.active {

  width: auto;
  height: 10vw;
  border:none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  margin: auto 5;
  gap: 8px;
  color: white;
  left: 28px;
  top: 114px;
  background: #161616;
  border-radius: 10px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 17px;
  /* identical to box height */

  display: flex;
  align-items: center;
  text-align: center;
  letter-spacing: 0.32px;
  color: #FFFFFF;
  /* Inside auto layout */
  flex: none;
  order: 0;
  flex-grow: 0;
  font-size: 3vw;}
/* Style the tab content 2 */
.tabcontent {
  background-color: #2e2e2e;
  -moz-border-radius-topleft: 15vw; 
  -webkit-border-top-left-radius: 15vw; 
  margin-top: 0px;
  margin-bottom: 0px;
  width: auto;
  margin-right: 0px;
  margin-left: auto;
  padding-right: 0px;
  padding-left: auto;
}

.tabcontent h3{
margin: 0px;
}

.tabcontent img{
  width: 100%;
  height: auto;
}
/**/

.block_f {
  margin: 0px;
  margin-bottom: 25px;
  background-color: #121212;
  border-radius: 10px;
  justify-content: center;
}

.block_b{
 padding:  20px;
}

.block_f img{
  -webkit-border-top-left-radius: 10px;  
  -webkit-border-top-right-radius: 10px;  
}

.block_in{
  display: flex;
}
.price_f{
  margin-left: auto;
  margin-right: 5%;
  display: inline-block;
  justify-content: right;
}

.block_in h3{
  color: #ffff;
  margin: 0px;
  font-size: 100%;
}

.name_f{
  margin-top: 15px;
  margin-left: 20px;
}

.name_f p{
  margin: 0px;
  margin-top: 5px;
  margin-bottom: 15px;
  color: #ffff;
  font-weight: 400;
}

.price_f p{
margin-top: 50%;
font-size: 120%;
color: #ffff;
  font-weight: 700;
}

.price_f h3{
 
  color: #ffff;
  }


.price_d{
  margin-left: auto;
  margin-right: 5%;
  color: #423f3f;
  display: inline-block;
  justify-content: right;
}

.name_d{
  margin-top: 15px;
  margin-left: 20px;
}

.name_d p{
  margin: 0px;
  margin-top: 5px;
  margin-bottom: 15px;
  color: #ffffff;
  font-weight: 400;
}

.price_d p{
margin-top: 60%;
font-size: 120%;
color: #999999;
  font-weight: 700;
}

.block_d {
  margin: 0px;   
  border-radius: 10px;
  justify-content: center;
}

  .bar_img{
    display: block;
    justify-content: center;
    align-items: center;  
    padding-top: 3vh;
    margin-bottom: 5vw;
    margin-left: 6.98vw;
    margin-right: 5.98vw;
    }

  .bar_bl{
    display: block;
    justify-content: center;
    align-items: center;
  }

.bar_img button{
  margin-top: 5vw;
  margin-bottom: 2vw;
  width:  39.5vw;
  height: 39.5vw;
  border: 1px solid gray;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-size: 5vw;
  line-height: 5vw;
  letter-spacing: 0.32px;
  color: #FFFFFF;
  }

 
  #in{
    display: block;
  }

  #beer_in,#gin_in,#liqueur_in,#tequila_in,#rum_in,#whiskey_in,#cognac_in,#vodka_in,#wine_in,#sparkling_in,#cocktails_in, #shot_in {
    -moz-border-radius-topleft: 15vw; 
    position: relative;
    top: 0px;
    left: 0px;
    display: none;
  }

  #button_in button{
    margin-right: 15px;
    margin-left: auto;
    background-color: rgb(0, 0, 0,0);
    border: none;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 0.32px;
    color: #6C6C6C;
  }

  #button_in h1{
    margin-left: 10vw;
    margin-top: 5vh;
    margin-bottom: 30px;
    top: calc(50% - 36px/2 - 356px);   
    left: 7.69%;
    right: 80%;
    top: 30.57%;
    bottom: 66.82%;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 22px;
    /* identical to box height */
    letter-spacing: 0.32px;
    color: #ffffff;
  }

  .cock{
    display: flex;
    justify-content: center;
    align-items: center;

  }

  .cock img{
    border-radius: 15px;
    margin-left: 2vw;
    margin-right: 2vw;
    margin-top: 5vw;
    width: 40vw;
    height: 40vw;
  }

  #cock_bl{
    margin: 1vw;
    color: #ffff;
  }

  #cock_bl h3 {
    font-size: 4.9vw;
    margin-top: 1vh;
    margin-bottom: 1vh;
    margin-left: 5vw;
  }

  #cock_bl h4 {
    color: #999;
    font-weight: 700;
    font-size: 4.5vw;
    margin-top: 1vh;
    margin-left: 5vw;
  }

  #cock_bl p{

    font-size: 3.9vw;
    margin-top: 1vh;
    margin-bottom: 1vh;
    font-weight: 400;
    margin-left: 5vw;
  }


  #Tokyo{
    background-image: url(/Image/pictures/hookah.jpg);
    background-size: 100%;

  
  }
  
  .hook {
    padding-top: calc( 50%);
    padding-bottom: calc( 50%);

    background-color: rgb(0, 0, 0,0);
  }

  .btn_h {
    left: 25.9%;
    right: 45.9%;
    top: 31.16%;
    bottom: 66.23%;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    /* identical to box height */
    border: none;
    letter-spacing: 0.32px;
    background-color: rgba(0, 0, 0, 0);
    color: #ffffff;
  }

  #Tokyo h5{
    margin-top: 5vw;
    margin-left: 1vw;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100;
    font-size: 4vw;
    line-height: 34px;

    letter-spacing: 0.32px;
    background: linear-gradient(100.7deg, #c8c4bc 0%, rgba(199, 199, 199, 0) 186.33%);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;

  }
  
   #Tokyo p{
    margin-left: 73vw;
    margin-bottom: 0vh;
    margin-top: 0px;
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 8vw;
    line-height: 34px;

    letter-spacing: 0.32px;
    background: linear-gradient(100.7deg, #C7C7C7 0%, rgba(199, 199, 199, 0) 136.33%);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
  
  }
      #Tokyo h1{
        margin-top: 0px;
        margin-left: 52vw;
        margin-bottom: 0px;
        width: auto;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 700;
        font-size: 10vw;
        /* identical to box height */
        letter-spacing: 0.32px;
        background: linear-gradient(100.7deg, #ffffff 0%, rgb(255, 255, 255, 0) 206.33%);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
         text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      }
      
      #Tokyo h2{
        margin-top: 0px;
        margin-left: 48vw;
        width: auto;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 700;
        font-size: 10vw;
        /* identical to box height */
        letter-spacing: 0.32px;
        background: linear-gradient(100.7deg, #FFCA7B 0%, rgb(255, 255, 255, 0) 136.33%);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      }

      #Tokyo span{
        background: linear-gradient(92.55deg, #FFCA7B 0%, rgba(181, 130, 93, 0) 131.81%);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
      }
    }

      @media (min-width: 499px) {

        .heart {
          
          background-image: url(/Image/phone.png);
          background-attachment: fixed;
          background-position: center;
          background-size:215vh;
          padding-top: 4vh;
          padding-left: 20%;
          padding-right: 20%;
          size: 80%;
         
        }
    
        .brain {
          margin-left: auto;
        margin-right: auto ;
          width:45vh;
         
        }
    
        .tab {
          width: 100%;
          height: auto;
          
          margin-right: 0px;
          justify-content: left;
        
          background-color: #000000;
        }
    
          .tab button {
            margin: auto 5px 5% 5px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 12px 16px;
            margin: auto 5;
            gap: 8px;
          
            left: 176px;
            top: 114px;
              /* lightgren */
            color: #ffffff;
            background: #2c3036;
            border-radius: 4px;
            border:none;
          
            font-family: 'Inter';
            font-style: normal;
            font-weight: 600;
            line-height: 17px;
            /* identical to box height */
            display: flex;
            align-items: center;
            text-align: center;
            letter-spacing: 0.32px;
            /* Inside auto layout */
            flex: none;
            order: 0;
            flex-grow: 0;
          
            width: auto;
            height: 5vh;
          
            font-size: 2vh;
          }
    
          .tab button.active {
    
            width: auto;
            height: 5vh;
            border:none;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 12px 16px;
            margin: auto 5;
            gap: 8px;
            color: white;
            left: 28px;
            top: 114px;
            background: #161616;
            border-radius: 10px;
            font-family: 'Inter';
            font-style: normal;
            font-weight: 600;
            line-height: 17px;
            /* identical to box height */
          
            display: flex;
            align-items: center;
            text-align: center;
            letter-spacing: 0.32px;
            color: #FFFFFF;
            /* Inside auto layout */
            flex: none;
            order: 0;
            flex-grow: 0;
            font-size: 2vh;}
       
            
            .tabcontent {
              background-color: #2e2e2e;
              -moz-border-radius-topleft: 4vw; 
              -webkit-border-top-left-radius: 4vw; 
              margin-top: 0px;
              margin-bottom: 0px;
              width: auto;
              margin-right: 0px;
              margin-left: auto;
              padding-right: 0px;
              padding-left: auto;
            }
    
            .modal-content {
              color: #fff;
              background-color: #2e2e2e;
              margin: 30vh auto; /* 15% from the top and centered */
              padding: 20px;
              border: 1px solid #888;
              width: 40%; /* Could be more or less, depending on screen size */
            }
    
            .comp{
              margin-top: 10px;
              position	: absolute;
              right: calc( ( (100vw - 320px) / 2 ) + 55px );
              width: fit-content;
              color: #ffff;
              font-weight: 400;
              font-size: 15px;
            }
    
    
            .bar_img{
              display: block;
              justify-content: center;
              align-items: center;  
              padding-top: 3vh;
              margin-bottom: 5vw;
              margin-left: 0.01vw;
              margin-right: 0.01vw;
              }
    
    
            .bar_img button{
              margin-top: 10px;
              margin-bottom: 2vw;
              width:  110px;
              height: 110px;
              border: 1px solid gray;
              font-family: 'Inter';
              font-style: normal;
              font-weight: 700;
              font-size: 2vh;
              line-height: 2vh;
              letter-spacing: 0.32px;
              color: #FFFFFF;
              }
    
             
              #tequila,#whiskey,#sparkling{
                transform: none;
              }
    
              #Tokyo{
                margin-left:calc((100vw - 800px) / 2) ;
                margin-right: calc((100vw - 800px) / 2);
    
              }
    
              .cock img{
                border-radius: 15px;
                margin-left: 4px;
                margin-right: 4px;
                margin-top: 10px;
                width: 130px;
                height: 130px;
              }
              #cock_bl{
                margin: 10px;
                color: #ffff;
              }
            
              #cock_bl h3 {
                font-size: 20px;
                margin-top: 2px;
                margin-bottom: 2px;
                margin-left: 10px;
              }
            
              #cock_bl h4 {
                color: #999;
                font-weight: 700;
                font-size: 20px;
                margin-top: 2px;
                margin-left: 10px;
                margin-bottom: 2px;
              }
            
              #cock_bl p{
            
                font-size: 15px;
                margin-top: 2px;
                margin-bottom: 2px;
                font-weight: 400;
                margin-left: 10px;
              }

              .comp_d{
                margin-top: 20px;
                margin-left: 105px;
                position	: absolute;
                width: fit-content;
                color: #ffff;
                font-weight: 400;
                font-size: 20px;
              }


              #button_in h1{
                margin-left: 25px;
                margin-top: 5vh;
                margin-bottom: 30px;
                top: calc(50% - 36px/2 - 356px);   
                left: 7.69%;
                right: 80%;
                top: 30.57%;
                bottom: 66.82%;
                font-family: 'Inter';
                font-style: normal;
                font-weight: 700;
                font-size: 22px;
                line-height: 22px;
                /* identical to box height */
                letter-spacing: 0.32px;
                color: #ffffff;
              }

              #Tokyo{
                background-image: url(/Image/pictures/hookah.jpg);
                background-size: 100%;
                margin-left: auto;
                margin-right: auto ;
                width:45vh;            
              }

              #Tokyo h5{
                margin-top: 8px;
                margin-bottom: 0px;
                margin-left: 1vw;
                font-family: 'Inter';
                font-style: normal;
                font-weight: 100;
                font-size: 16px;
                line-height: 34px;
              }

              #Tokyo p{
                margin-left: 10px;
                margin-bottom: 0vh;
                margin-top: 0px;
                font-family: 'Inter';
                font-style: normal;
                font-weight: 700;
                font-size: 16px;
                line-height: 34px;
            
                letter-spacing: 0.32px;
                background: linear-gradient(100.7deg, #C7C7C7 0%, rgba(199, 199, 199, 0) 136.33%);
                    -webkit-text-fill-color: transparent;
                    -webkit-background-clip: text;
              
              }
                  #Tokyo h1{
                    margin-top: 0px;
                    margin-left: 10px;
                    margin-bottom: 0px;
                    width: auto;
                    font-family: 'Inter';
                    font-style: normal;
                    font-weight: 700;
                    font-size: 20px;
                    /* identical to box height */
                    letter-spacing: 0.32px;
                    background: linear-gradient(100.7deg, #ffffff 0%, rgb(255, 255, 255, 0) 206.33%);
                    -webkit-text-fill-color: transparent;
                    -webkit-background-clip: text;
                     text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
                  }
                  
                  #Tokyo h2{
                    margin-top: 0px;
                    margin-left: 10px;
                    width: auto;
                    font-family: 'Inter';
                    font-style: normal;
                    font-weight: 700;
                    font-size: 20px;
                    /* identical to box height */
                    letter-spacing: 0.32px;
                    background: linear-gradient(100.7deg, #FFCA7B 0%, rgb(255, 255, 255, 0) 136.33%);
                    -webkit-text-fill-color: transparent;
                    -webkit-background-clip: text;
                    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
                  }
            
                  #Tokyo span{
                    background: linear-gradient(92.55deg, #FFCA7B 0%, rgba(181, 130, 93, 0) 131.81%);
                    -webkit-text-fill-color: transparent;
                    -webkit-background-clip: text;
                  }
      }