#container{
  display:grid;
  grid-template-columns: 20% auto 20%;
  grid-template-rows: auto auto;
  min-height:100vh;
}
#main-container {
  /*padding-top: 129px;*/
  /*min-height:100vh;*/
  grid-column: 1 / span 3;
  grid-row:2;
  transform-origin: top;
  transition: transform .2s ease-out, opacity .2s ease-out;
  transform: scale(1);
  opacity:1;
}
#main-container.dragging {
  transform: scale(0.9);
  opacity:0.2;
}
#dragging-message{
  position:fixed;
  top:50vh;
  left:50%;
  transition: opacity .2s ease-out;
  transform:translate3d(-50%,calc(-50% - 131px),0);
  opacity:0;
  pointer-events: none;
  background:rgba(255,255,255,0.5) !important;
}
#dragging-message.dragging{
  transform:translate3d(-50%,calc(-50% - 131px),0);
  opacity:1;
}

img#logo {
  margin-right:1em;
}

#hfsdb-topbar {
  /*position:fixed;*/
  /*top:0;*/
  /*left:0;*/
  /*width:100%;*/
  z-index:10;
  grid-column: 1 / span 3;
  width:100vw;
}
#alt-menu{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  transition: transform .2s ease-out;
  transform:translateY(-100%);
  pointer-events: none;
}
#alt-menu.active{
  transform:translateY(0);
  pointer-events: auto;
}
#footer{
  background: #232526;  /* fallback for old browsers */
  grid-column: 1 / span 3;
}
#footer a{
  color: #fff !important;
}

#footer>.grid{
  opacity:0.8;
}
#footer .icon{
  width:25px;
}

#search{
  border:none;
}

.home-grid .grid-row{
  padding:0 !important;
}
.home-grid .column{
  padding:0 !important;
}
.home-grid .main.pic {
  height:300px;
}
.home-grid .grid-row>.column{
  overflow:hidden;
}

.home-grid .pic{
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height:150px;
  transition: transform 1.5s ease, opacity 0.5s;
  transform:scale(1);
  opacity:0;
}

.home-grid .pic.active{
  opacity:1;
}

.home-grid .pic:after{
  display:block;
  content:'';
  height:100%;
  width:100%;
  background:rgba(0,0,0,0.3);
}
.home-grid .grid-row>.column:hover .pic {
  transform:scale(1.1);
}

.home-grid span.title{
  position:absolute;
  width:50%;
  left:10px;
  bottom:10px;
  color:#fff;
  font-size:1.4em;
  text-shadow:0 0 5px rgba(0,0,0,1);
}
.home-grid,.recent-grid{
  margin-top:2em !important;
}
.recent-grid .game-column{
  transition:background-color 1.5s ease;
  background: rgba(0,0,0,0);
}
.recent-grid .game-column:hover{
  transition:background-color 1.5s ease;
  background: rgba(0,0,0,0.1);
}

#item-header{
  text-shadow:0 2px 0 rgba(0,0,0,.5) !important;
}
#item-description{
  font-size:1.2rem;
}
#underlay {
  position:absolute;
  height:100%;
  width:100vw;
  content:'';
  margin-top:-3em;
  background-size:cover;
  background-position:center;
}

.underlay-dimmer {
  position:absolute;
  height:100%;
  width:100vw;
  content:'';
  margin-top:-3em;
  /*left:0;*/
  /*top:0;*/
  opacity:0.8;
  background:#006252;
}

#hfsdb-topbar>.menu,
#hfsdb-topbar>.icon.input>input {
  border-radius:0;
  margin-bottom:0;
}

#search-form,
#search-form input{
  width:100%;
}

#game-rating{
  background-color:rgba(0,0,0,0.5);
  color:rgba(255,255,255,0.8);
}

.gallery-tab{
  padding:0 !important;
  position:relative;
  /*min-height:calc(100vh - 126.5px - (45.19px * 3));*/
  /*text-align:center;*/
  /* page height - top fixed bar - tab bar = full height, no flicker gallery tabs */
}

.gallery-item-container{
  overflow:hidden;
  height:200px;
  width:200px;
  margin:2px !important;
}
.gallery-item-container.video {
  /*margin:0 !important;*/
  width:calc(50% - 4px);
  height:auto;
}
.gallery-item{
  height:100% !important;
  width:100% !important;
  background-size:cover !important;
  background-position:center !important;
  transition:transform 0.2s ease-out;
  transform: scale(1);
  text-align:center;
}
.gallery-item-container:hover > .gallery-item{
  transform:scale(1.05);
}
.gallery-item-container.video .dimmer{
  background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0.5) 70%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0.5) 70%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
  height: 75%;
}
.gallery-item-container.video h2 {
  display:inline-block;
  margin:0 16px;
}
.gallery-item-container.video br {
  display:none;
}
.gallery-item.pdf-item{
  background-color:#bb0706 !important;
  padding-top: 4rem !important;
}
.gallery-item.txt-item{
  background-color:#f0f0f0 !important;
  padding-top: 4rem !important;
}
.gallery-item.zip-item{
  background-color:#333 !important;
  padding-top: 4rem !important;
}

.non-picture-items-video{
  width:100%;
}

#medias .actions{
  position:absolute;
  bottom:5px;
  right:5px;
}

.image .image{
  margin:0 !important;
}
.ui.image .dimmer{
  transition: opacity 0.2s ease-out,transform 0.2s ease-out;
  opacity:0 !important;
  display:flex !important;
  transform:scale(1.1);
  z-index:1;
}
.ui.image:hover .dimmer{
  opacity:1 !important;
  transform:scale(1);
}

#items-list .small.image{
}

#items-list .small.image img{
  padding:5px !important;
  background-color:rgba(0,0,0,0.05);
  border:1px solid rgba(0,0,0,0.05);
}

/** LANGUAGE SWITCH */
.lang{
  display:none;
}

/* add "en" flag to match lang */
i.flag.en:before {
    background-position: -72px -1950px;
}

input, textarea {
  width:100%;
  line-height: 1.2142em;
  padding: .67861429em 1em;
  font-size: 1em;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(34,36,38,.15);
  color: rgba(255,255,255,.87);
  border-radius: .28571429rem;
  box-shadow: 0 0 0 0 transparent inset;
}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
  color: rgba(255,255,255,.3);
}
textarea{
  height:214px;
}

.imgload{
  transition:all 0.2s ease-out;
  opacity:0;
}
.imgload.loaded{
  opacity:1;
}

.levelname{
  font-family: serif !important;
  font-style: italic;
}
.user-card{
  padding:15px !important;
}
.user-card>.content{
  background:rgba(0,0,0,0.1) !important;
}

/** HACK AUTOCOMPLETE MODAL */
ul.ui-autocomplete{
  z-index:9999 !important;
}

/** Pending banner **/
.pending-banner {
  position: absolute;
  transform: rotateZ(-45deg);
  z-index: 1;
  font-size: 20px;
  font-weight: bold;
  color: white;
  text-align: center;
  left: -81px;
  top: 66px;
}

.pending-bg {
  border-bottom: 50px solid #c00;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  height: 0;
  width: 300px;
}
.pending-text {
  margin-top: -34px;
}