@font-face {
    font-family: NeueMontreal-Bold;
	font-weight: bold;
    src: url("NeueMontreal-Bold.otf") format("opentype");}

@font-face {
    font-family: NeueMontreal-Regular;
    src: url("NeueMontreal-Regular.otf") format("opentype");}
    
body,
.magazine-thumbs,
.magazine-thumb {
  margin: 0;
  background-color: #fff;
  padding: 0;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge*/
  user-select: none;          /* Non-prefixed version, currently not supported by any browser */
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  
}



/*------------------------------------------------------*/

.header {
  position: sticky;
  z-index: 10000;
  top: 0;
  padding: 5px 20px 5px;
  background: #fff;
  color: #000;
  box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
  transform: translateY(-2px);
}

.headerindex {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}







/*----------------------------------------------------*/

.style-21 {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 18px;
  position: relative;
  z-index: 9;
  color: black;
  font-weight: bold;
  text-decoration: none;
}

.style-21:hover {
  color: white;
}

.style-21:hover:before {
  transform: scaleX(1);
  transform-origin: left;
}
.style-21:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2px;
  background: blue;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s ease-in-out;
}





.style-210 {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 18px;
  position: relative;
  z-index: 9;
  color: black;
  font-weight: bold;
  text-decoration: none;
}

.style-210:hover {
  color: blue;
}

.style-210:hover:before {
  transform: scaleX(1);
  transform-origin: left;
}
.style-210:before {
  content: "";
  color: blue;

}






.heading {
  color: #000;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 18px;
}


/*----------------------------------------------------*/

.magazine-thumbs {
  list-style-type: none;
}

.magazine-thumb {
  width: 50%;
  height: auto;
  float: left;
  transition: 0.3s;
  mix-blend-mode: multiply;
}


.magazine-thumb:hover {
 	-webkit-filter: grayscale(100%) !important;
	filter: grayscale(100%) !important;
  transform: scale(1.3);
  mix-blend-mode: multiply;
}




/*----------------------------------------------------*/

@media screen and (min-width: 30em) {
  .magazine-thumb {
    width: 33.33333%;
  }
}
@media screen and (min-width: 40em) {
  .magazine-thumb {
    width: 25%;
  }
}
@media screen and (min-width: 50em) {
  .magazine-thumb {
    width: 20%;
  }
}
@media screen and (min-width: 60em) {
  .magazine-thumb {
    width: 16.66667%;
  }
}
@media screen and (min-width: 70em) {
  .magazine-thumb {
    width: 14.28571%;
  }
}
@media screen and (min-width: 80em) {
  .magazine-thumb {
    width: 12.5%;
  }
}
@media screen and (min-width: 90em) {
  .magazine-thumb {
    width: 11.11111%;
  }
}
@media screen and (min-width: 100em) {
  .magazine-thumb {
    width: 10%;
  }
}
@media screen and (min-width: 110em) {
  .magazine-thumb {
    width: 9.09091%;
  }
}
@media screen and (min-width: 120em) {
  .magazine-thumb {
    width: 8.33333%;
  }
}
@media screen and (min-width: 130em) {
  .magazine-thumb {
    width: 7.69231%;
  }
}
@media screen and (min-width: 140em) {
  .magazine-thumb {
    width: 7.14286%;
  }
}
@media screen and (min-width: 150em) {
  .magazine-thumb {
    width: 6.66667%;
  }
}
@media screen and (min-width: 160em) {
  .magazine-thumb {
    width: 6.25%;
  }
}
@media screen and (min-width: 170em) {
  .magazine-thumb {
    width: 5.88235%;
  }
}
@media screen and (min-width: 180em) {
  .magazine-thumb {
    width: 5.55556%;
  }
}
@media screen and (min-width: 190em) {
  .magazine-thumb {
    width: 5.26316%;
  }
}

/*----------------------------------------------------*/