/* Custom.css is used to add any additional styles that should be written for fix, or modify the website */

header {
  height: 100px; /* nedd to modify height from 61px to 100px, cause there is one menu added in header*/
}

.col-logo {
  display: flex;
  align-items: center;
}

#navbarNav0 {
  flex-direction: column !important; /* should add to re order buttons and menus */
}

#banner-top, 
.design-banner {
  margin-top: 39px; /* add more margin top based gap between new height and old height in heade */
}

@media screen and (max-width: 767px){
  header {
    height: 61px; /* bring back height to unmodified height */
  }

  #banner-top {
    margin-top: 0px; /* bring back margin top to unmodified 0px  */
  }

  #list-group-1 {
    z-index: -1;
    order: 2 !important; /* re-order buttons to end of block */
    margin-top: -80px !important; /* adjust spacing between buttons and menus */ 
  }

  #list-group-2 {
    order: 1 !important;  /* re-order menus to start of block */
  }
}

.thumbnail-webvr, #iframe-webvr{
  position: relative;
  width: 100%;
  height: 100%;
}

.thumbnail-webvr .btn-play-webvr{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  width: 80px;
  height: 80px;
}

.thumbnail-webvr .thumb-icon-play{
  width: 80px;
  height: 80px;
  background: none!important;
}

@media screen and (max-width: 767px){
  .thumbnail-webvr .thumb-icon-play, .thumbnail-webvr .btn-play-webvr{
    width: 64px;
    height: 64px;
  }
}