body {
  box-sizing: content-box;
  width: 100vw;
  height: 100vh;
  margin: 0px;
  background-color: cornflowerblue;
  color: white;
  font-family: Roboto;
  font-size: 14pt;
  font-weight: 100;
  overflow: hidden;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

.console {
  position: relative;
  display: grid;
  grid-template-rows: 10% 17% repeat(2, 1fr);
  width: 100vw;
  height: 100vh;
  background-color:transparent; /* rgb(57, 85, 147);*/
 /* background-image: linear-gradient(rgba(255,255,255,.2), rgb(87, 140, 255) 30%, rgb(58,55,102)); */
  /* background-image: radial-gradient(circle at 50% -30%, rgba(255,255,255,.3), rgb(57, 85, 147), rgb(58,55,102)); */
}

.console .section {
  border: 0px solid white;
  border-bottom: 0px solid white;
}

.user {
  width: 100vw;
  display: flex;
  justify-content: space-between;
}

.user div {
  margin: 7px 40px;
}

.section-name {
  font-family: K2D;
  font-size: 60pt;
  font-weight: bold;
  padding-left: 40px;
}

.scroller, .scroller.buttons {
  position: relative;
  left: 40px;
  white-space: nowrap;
  width: 99vw;
  /*height: 300px;*/
  overflow: auto;
/*   padding-left: 40px; */
}

.scroller, .scroller.buttons {
    -ms-overflow-style: none;  /* IE 10+ */
    overflow: -moz-scrollbars-none;  /* Firefox */
}

.scroller::-webkit-scrollbar,.scroller.buttons::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

.scroll-box {
  position: relative;
  width: auto;
 /* height: 100%;*/
  display: flex;
}

/*.scroller div {
  overflow-y: scroll;
}
*/
.game-scroll-item, .button-scroll-item {
  display: inline-block;
/*  width: 26vw;
  height: 90%;*/
  /*width: 23.80%;*/
  width: calc(100vw * .3000); /*400px;*/
  height: calc(1vw * 13.40);
  background-color:black;
  margin-right: 7px;
  margin-top: 7px
}

.game-scroll-item div {
  position: relative;
  top: 100%;
}

.game-scroll-item {
  background-size: cover;
  background-position: center;
}

/*.game-scroll-item {
  background-image:url(http://img15.deviantart.net/dc52/i/2013/226/f/9/dishonored_video_game_poster_by_mistressdead-d6i4tfb.jpg); 
  background-size:cover;
}

.game-scroll-item:nth-child(2) {
  background-image:url(https://media.playstation.com/is/image/SCEA/planetside-2-listing-thumb-01-ps4-us-05sep14?$Icon$);
}

.game-scroll-item:nth-child(3) {
  background-image:url(http://www.ignitenews.ca/wp-content/uploads/2018/02/Celeste.png);
}

.game-scroll-item:nth-child(4) {
  background-image:url(https://mp1st.com/wp-content/uploads/2015/04/TK8TAtf.jpg);
}

.game-scroll-item:nth-child(5) {
  background-image:url(http://getwallpapers.com/wallpaper/full/a/d/0/923639-tomb-raider-2018-hd-wallpaper-1920x1080-computer.jpg);
}*/

.button-scroll-item {
  position: relative;
/*  width: 300px;
  height: 175px;*/
  width: 17.85%;
  height: calc(1vw * 10.41);
  background-color: rgb(64,83,151);
/*   line-height: 150px; */
  text-align: center;
}

.button-scroll-item i {
  position: relative;
  /*font-size: 75pt;*/
  font-size: calc(100vw * .06);
  margin-top: 10%;
  cursor: arrow;
}

.button-scroll-item div {
  position: absolute;
  bottom: 0px;
  height: 15%;
  width: 100%;
  text-align: center;
  background-color: rgba(0,0,0, .5);
  line-height: 150%;
  opacity: 0.0;
  -webkit-transition: opacity .5s;
}

div.reveal {
  opacity: 1.0;
}

.selected {
  color: orange;
  text-shadow: 2px 2px black;
}

.close-bar {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 30px;
  width: 100vw;
  padding: 5px;
  background: linear-gradient(to right, rgba(0,0,0,1.0), rgba(0,0,0,.6));
  z-index: 20;
  opacity: 0;
  color: orange;
  transition: opacity .4s;
}

#flow-video, #flow-video video  {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100vh;
  width: 100vw;
  opacity: .5;
}

#flow-video video {
  height: 100vh;
  object-fit: cover;
}

/* ============== Media Queries ===============**/

/*
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) {

  .console {
      display: grid;
      grid-template-rows: repeat(4, auto);
      width: 100vw;
      height: 100vh;
      overflow: hidden;
  }

}
*/

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : landscape) { /* STYLES GO HERE */

  .console {
      display: grid;
      grid-template-rows: repeat(4, auto);
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      /*background-image: radial-gradient(circle at 50% -30%, rgba(255,255,255,.3), rgb(57, 85, 147), rgb(58,55,102));    */
  }

 /* .scroller {
    width: auto;
  }*/

}

@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait) { /* STYLES GO HERE */ 

  .console {
      display: grid;
      grid-template-rows: repeat(4, auto);
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      /*background-image: radial-gradient(circle at 50% -30%, rgba(255,255,255,.3), rgb(57, 85, 147), rgb(58,55,102));    */
  }

  /* change scrolling items sizes based on height */
  .game-scroll-item {
      height: 22.27%;
      width:  calc(100vw * .2380); /* calc(1010.00 * 40.50);*/
  }

  .button-scroll-item {
      height: 17.32%;
      width: calc(1vh * 29.70);
  }

  .button-scroll-item i {
      font-size: calc(100vh * .10);
      /*font-size: calc(1010px * .10);*/
  }

}