Benutzer:Gokussj7/Spielwiese/styles.css

.ExpansionsLarge,
.ExpansionsSmall {
  height:90vw
}

main.container-fluid {
  padding-right:0;
  padding-left:0
}
section {
  padding-top:1rem;
  border-bottom:1px solid rgba(1,33,105,0.1);
}
section:nth-of-type(2n) {
  background-color:#fff
}
section:last-child {
  border-bottom:none
}

.container,
.alert-container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  width:100%;
  padding-right:15px;
  padding-left:15px;
  margin-right:auto;
  margin-left:auto
}
@media (min-width: 576px) {
  .container,
  .alert-container,
  .container-sm {
    max-width:540px
  }
}
@media (min-width: 768px) {
  .container,
  .alert-container,
  .container-sm,
  .container-md {
    max-width:720px
  }
}
@media (min-width: 992px) {
  .container,
  .alert-container,
  .container-sm,
  .container-md,
  .container-lg {
    max-width:960px
  }
}
@media (min-width: 1200px) {
  .container,
  .alert-container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    max-width:1140px
  }
}

@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;
  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%
  }
}