.slideshowWrapper {
  position: relative;
  background-color: #252525;
  overflow: hidden;
  width: 100%;
  z-index: 0;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .slideshowSpacer {padding-bottom: 70%;}
  .mySlides {height: 70vw;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .slideshowSpacer {padding-bottom: 70%;}
  .mySlides {height: 70vw;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .slideshowSpacer {padding-bottom: 55%;}
  .mySlides {height: 55vw;}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .slideshowSpacer {padding-bottom: 55%;}
  .mySlides {height: 55vw;}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .slideshowSpacer {padding-bottom: 39%;}
  .mySlides {height: 39vw;}
}

.slideshowButtonWrapper {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  position: absolute;
  text-align: center;
  width: inherit;
  bottom: 20px;
}

.slideshowButton {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  height: 13px;
  width: 13px;
  border-radius: 50%;
  background-color: transparent;
  border-width: 1px;
  border-style: solid;
  border-color: white;
  -webkit-box-shadow: 0 0 3px #00000090;
          box-shadow: 0 0 3px #00000090;
  display: inline-block;
  z-index: 910;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.selected {
  background-color: var(--main-color);
  border-color: var(--main-color);
}

.mySlides {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
  display: block;
  width: inherit;
  position: fixed;
  -webkit-transition: right 1s;
  -o-transition: right 1s;
  transition: right 1s;
  margin: 0px;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .productGrid {-ms-grid-columns: 1fr;grid-template-columns: 1fr;}
  .Hometext h1 {font-size: 1.2em;}
  .grid-item p {font-size: 3em;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
  .productGrid {-ms-grid-columns: 1fr 1fr;grid-template-columns: 1fr 1fr;}
  .Hometext h1 {font-size: 1.2em;}
  .grid-item p {font-size: 3em;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .productGrid {-ms-grid-columns: 1fr 1fr;grid-template-columns: 1fr 1fr;}
  .Hometext h1 {font-size: 1.6em;}
  .grid-item p {font-size: 4em;}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .productGrid {-ms-grid-columns: 1fr 1fr;grid-template-columns: 1fr 1fr;}
  .Hometext h1 {font-size: 2em;}
  .grid-item p {font-size: 4em;}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
  .productGrid {-ms-grid-columns: 1fr 1fr 1fr;grid-template-columns: 1fr 1fr 1fr;}
  .Hometext h1 {font-size: 2em;}
  .grid-item p {font-size: 4em;}
}

.productGridWrap {
  padding: 1px;
  position: relative;
  background-color: #313233;
  z-index: 999;
}

.productGrid {
  display: -ms-grid;
  display: grid;
  z-index: 950;
  grid-gap: 1em;
  margin: 1em;
}

.grid-item {
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  -webkit-transition: 0.25s;
  -o-transition: 0.25s;
  transition: 0.25s;
  z-index: 950;
  background-repeat: no-repeat;
  background-size: cover;
}

.grid-item p {
  position: absolute;
  color: white;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  height: calc(1em + 4px);
  text-align: center;
  font-family: 'BebasNeueRegular';
  font-weight: normal;
  font-style: normal;
  z-index: 960;
}

.bgc1 {
  -webkit-transition: 0.25s;
  -o-transition: 0.25s;
  transition: 0.25s;
  background-image: url(../img/grid/cat1.jpg);
}

.bgc1:hover {
  background-image: url(../img/grid/cat1a.jpg);
}

.bgc2 {
  -webkit-transition: 0.25s;
  -o-transition: 0.25s;
  transition: 0.25s;
  background-image: url(../img/grid/cat2.jpg);
}

.bgc2:hover {
  background-image: url(../img/grid/cat2a.jpg);
}

.bgc3 {
  -webkit-transition: 0.25s;
  -o-transition: 0.25s;
  transition: 0.25s;
  background-image: url(../img/grid/cat3.jpg);
}

.bgc3:hover {
  background-image: url(../img/grid/cat3a.jpg);
}

.bgc4 {
  -webkit-transition: 0.25s;
  -o-transition: 0.25s;
  transition: 0.25s;
  background-image: url(../img/grid/cat4.jpg);
}

.bgc4:hover {
  background-image: url(../img/grid/cat4a.jpg);
}

.bgc5 {
  -webkit-transition: 0.25s;
  -o-transition: 0.25s;
  transition: 0.25s;
  background-image: url(../img/grid/cat5.jpg);
}

.bgc5:hover {
  background-image: url(../img/grid/cat5a.jpg);
}

.bgc6 {
 -webkit-transition: 0.25s;
 -o-transition: 0.25s;
 transition: 0.25s;
 background-image: url(../img/grid/cat6.jpg);
}

.bgc6:hover {
  background-image: url(../img/grid/cat6a.jpg);
}

.Hometext {
  padding: 2em 0em 4em 0em;
  position: relative;
  background-color: white;
  z-index: 1000;
}

.unscrolled .Hometext {
  -webkit-box-shadow: 0 0 0 #00000000;
          box-shadow: 0 0 0 #00000000;
}

.scrolled .Hometext {
  -webkit-box-shadow: 0 0 5px #00000080;
          box-shadow: 0 0 5px #00000080;
}

.Hometext h1{
  margin: 1em 10% 0em 10%;
  text-align: center;
  padding-bottom: 0.5em;
  text-transform: uppercase;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  border-bottom: grey solid thin;
}

.Hometext p{
  margin: 1em 10% 0em 10%;
  text-align: justify;
}

.side_button {
  top: calc(50% - 1.6em + 1.1875em);
}