.controls-wrapper {
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:20px;
	margin:50px 0;
}
#classInput, .pdflink {
	max-width:400px;
	border:2px solid var(--secondary-colour, #ccc);
	padding:20px 40px;
	font-size:17px;
	text-transform:uppercase;
	font-weight:bold;
	border-radius:0;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-ms-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
}
#classInput {
	background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px" viewBox="0 0 35 35" enable-background="new 0 0 35 35" xml:space="preserve"><circle fill="none" stroke="%23141428" stroke-width="2" stroke-miterlimit="10" cx="14.274" cy="14.862" r="12.862"/><line fill="none" stroke="%23141428" stroke-width="2" stroke-miterlimit="10" x1="23.595" y1="23.722" x2="33.937" y2="34.064"/></svg>') calc(100% - 20px) 15px / 35px no-repeat;
}
.pdflink:hover {
	background-color: var(--secondary-colour, #ccc);
	color: var(--primary-colour, #000);
}
ul#classesUL {
	display:flex;
	flex-wrap:wrap;
	margin:0;
	padding:0;
	gap:30px;
}
ul#classesUL li {
	width:calc(33.3333% - 20px);
	height:470px;
	list-style-type:none;
	background-color:red;
	background-color: transparent;
	perspective: 1000px;
}
ul#classesUL li.hidden {
	display:none;
}
ul#classesUL li .flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
ul#classesUL li.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}
ul#classesUL li .flip-box-inner .flip-box-front, ul#classesUL li .flip-box-inner .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
}
.flip-box-front {
  background-color: #000;
  color: #fff;
}
.flip-box-back {
  background-color:var(--primary-colour,#000);
  color: #fff;
  transform: rotateY(180deg);
  z-index:3;
}
.flip-box-front p {
	font-weight:bold;
	font-size:18px;
	line-height:34px;
}
.flip-box-inner .overlay {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	z-index:1;
}
.box-inner-content {
	position:absolute;
	top:40px;
	left:35px;
	width:calc(100% - 70px);
	height:calc(100% - 130px);
	z-index:2;
	text-align:center;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
}
.flip-box-inner h2 {
	font-weight:bold;
	font-size:30px;
	letter-spacing:1px;
}
.flip-box-inner h2, .flip-box-inner p {
	color:#fff;
	width:100%;
}
.flip-box-inner a.button {
	color:#fff;
	position:absolute;
	bottom:60px;
	transform:translateX(-50%);
	font-size:22px;
	font-weight:bold;
	font-family:var(--secondary-font-family, Arial, Helvetica, sans-serif);
	z-index:3;
}
.flip-box-inner a.button:after {
	content:"";
	position:absolute;
	width:100%;
	height:3px;
	background-color:var(--secondary-colour, #fff);
	bottom:-15px;
	left:0;
}
@media screen and (min-width:800px) and (max-width:1224px) {
	ul#classesUL li { width:calc(50% - 15px)}
}
@media screen and (max-width:800px) {
	ul#classesUL li { width:calc(100% - 0px)}
}