*html,body{
height: 100vh;
width: auto;
}

/*Search Bar */

.searchbar{
margin-bottom: auto;
margin-top: auto;
height: 60px;
background-color: #353b48;
border-radius: 30px;
padding: 10px;
}

.search_input{
color: white;
border: 0;
outline: 0;
background: none;
width: 0;
caret-color:transparent;
line-height: 40px;
transition: width 0.4s linear;
}

.searchbar:hover > .search_input{
padding: 0 10px;
width: 450px;
caret-color:white;
transition: width 0.4s linear;
}

.searchbar:hover > .search_icon{
background: white;
color: black;
}

.search_icon{
height: 40px;
width: 40px;
float: right;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
color:white;
text-decoration:none;
}

@media only screen and (max-width: 600px) {
.searchbar:hover > .search_input{
  width: 250px;
  font-size: 18px;
}
}
@media only screen and (min-width: 600px) {
.searchbar:hover > .search_input{
  width: 400px;
  font-size: 22px;
}
}

.font_family{
font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.font_jiustify{
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: justify;
}

/*------------ Button ---------------*/
#myBtn {
  
}

/*------------ Backgroung Video ---------------*/
#videoBG {
  position:fixed;
  z-index: -1;

/*not work if the screen ratio is below 16/9*/
  width:100%;     
  height: auto;
}
@media (max-aspect-ratio: 16/9) {
  #videoBG { 
      width:auto;
      height: 100%;
  }

}
@media (max-width: 767px) {
  #videoBG {
      display: none;
  }
  body {
      background: url('poster.jpg');
      background-size: cover;
  }
  
}

/*image size MOBILE*/

@media only screen and (max-width: 600px) {
  #homeImg {
    height: 40vh;
  }
  img#playStore{
    height: 5vh;
  }
  #btnCon>button {
    width: 200px;
    line-height: 0.75rem;
    font-size: 15px;
  }
  #qrcode>img{
    width: 200px !important;
    margin: 0 auto !important;
  }
  #buttonDownload{
    width:200px;
  }

}

  /*image size DESKTOP*/
@media only screen and (min-width: 600px) {
  #homeImg {
    width: 40vh;
  }
  img#playStore{
    height: 5vh;
  }
  #btnCon>button {
    line-height: 1rem;
    width: 250px;
    font-size: 15px;
  }
  #qrcode>img{
    width: 200px !important;
    margin: 0 auto !important;
  }
  #buttonDownload{
    width:200px;
  }
  
}

  :focus{
    outline: 1px ;
  }
  
  /* General */
  .hidden {
    display:none;
  }

  #submit{
    color: white;
    font-size: 20px;
    height: 50px;
    background-color:#353b48;
  }
  #submit:hover{
    color: white;
    font-size: 20px;
    height: 50px;
    background-color:lightslategrey;
  }