Benutzer:Gokussj7/Spielwiese/styles.css

.ExpansionsLarge,
.ExpansionsSmall {
  height:90vw
}
@media (min-width: 576px) {
  .ExpansionsLarge,
  .ExpansionsSmall {
    height:248px
  }
}
@media (min-width: 768px) {
  .ExpansionsLarge,
  .ExpansionsSmall {
    height:338px
  }
}
@media (min-width: 992px) {
  .ExpansionsLarge,
  .ExpansionsSmall {
    height:457px
  }
}
@media (min-width: 1200px) {
  .ExpansionsLarge,
  .ExpansionsSmall {
    height:547px
  }
}
.ExpansionsLarge .overlay h3,
.ExpansionsSmall .overlay h3 {
  margin-bottom:0.5rem
}
.ExpansionsLarge a,
.ExpansionsLarge>a>div,
.ExpansionsSmall>div>a>div {
  height:100%
}
.ExpansionsSmall div[id^='smallSlide'] {
  height:50%
}
.ExpansionsSmall div[id^='smallSlide']:first-child {
  margin-bottom:0.25rem
}
.ExpansionsSmall a {
  height:calc(100% - 0.25rem)
}
div#bigSlide,
div[id^='smallSlide'] a {
  overflow:hidden
}
div#bigSlide:hover .overlay,
div[id^='smallSlide']:hover .overlay {
  height:100%
}
div#bigSlide .overlay h3,
div[id^='smallSlide'] .overlay h3 {
  margin-bottom:0
}
div#bigSlide .overlay h4,
div#bigSlide .overlay .btn,
div[id^='smallSlide'] .overlay h4,
div[id^='smallSlide'] .overlay .btn {
  display:none
}
div#bigSlide:hover .overlay h4,
div#bigSlide:hover .overlay .btn,
div[id^='smallSlide']:hover .overlay h4,
div[id^='smallSlide']:hover .overlay .btn {
  display:block
}
.overlay {
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  top:unset;
  height:4rem;
  -webkit-transition:height 0.2s linear;
  transition:height 0.2s linear;
  overflow:hidden;
  background-color:rgba(1,33,105,0.8)
}
.overlay h3,
.overlay h4 {
  color:#fff !important
}
.formLabel select[name='idExpansion'] {
  width:100%
}
#expansionSlider #expansion-slider li {
  min-width:50%
}
@media (min-width: 360px) {
  #expansionSlider #expansion-slider li:not(.noIconGames) {
    min-width:25%
  }
}
@media (min-width: 1200px) {
  #expansionSlider #expansion-slider li:not(.noIconGames) {
    min-width:10%
  }
}
@media (min-width: 576px) {
  #expansionSlider #expansion-slider li {
    min-width:25%
  }
}
@media (min-width: 768px) {
  #expansionSlider #expansion-slider li {
    min-width:20%
  }
}