@font-face {
  font-family: DonkeyStone;
  src: url('../../fonts/DonkeyStone.otf');}
.DonkeyStone {
  font-family: DonkeyStone;
}

@font-face {
  font-family: Campus;
  src: url('../../fonts/CAMPUSp.ttf');}
.CAMPUSp {
  font-family: Campus;
}


@font-face {
  font-family: TypoSlab;
  src: url('../../fonts/TypoSlab.otf');}
.TypoSlab {
  font-family: TypoSlab;
}

@font-face {
  font-family: TravelingTypewriter;
  src: url('../../fonts/TravelingTypewriter.ttf');}
.TravelingTypewriter {
  font-family: TravelingTypewriter;
}

@font-face {
  font-family: TypewriterBold;
  src: url('../../fonts/Typewriter-Bold.ttf');}
.TypewriterBold {
  font-family: TypewriterBold;
}

@font-face {
  font-family: Babalusa;
  src: url('../../fonts/Babalusa-cut.ttf');}
.BabalusaCut {
  font-family: Babalusa;
}


@font-face {
  font-family: FingerPaint-Regular;
  src: url('../../fonts/FingerPaint-Regular.ttf');}
.FingerPaint {
  font-family: FingerPaint-Regular;
}

@font-face {
  font-family: FrederickatheGreat-Regular;
  src: url('../../fonts/FrederickatheGreat-Regular.ttf');}
.FrederickatheGreat {
  font-family: FrederickatheGreat-Regular;
}

@font-face {
  font-family: IndieFlower;
  src: url('../../fonts/IndieFlower.ttf');}
.IndieFlower {
  font-family: IndieFlower;
}

@font-face {
  font-family: LuckiestGuy-Regular;
  src: url('../../fonts/LuckiestGuy-Regular.ttf');}
.LuckiestGuy {
  font-family: LuckiestGuy-Regular;
}

@font-face {
  font-family: MajorMonoDisplay-Regular;
  src: url('../../fonts/MajorMonoDisplay-Regular.ttf');}
.MajorMonoDisplay {
  font-family: MajorMonoDisplay-Regular;
}

@font-face {
  font-family: PoiretOne-Regular;
  src: url('../../fonts/PoiretOne-Regular.ttf');}
.PoiretOne {
  font-family: PoiretOne-Regular;
}

@font-face {
  font-family: Wallpoet-Regular;
  src: url('../../fonts/Wallpoet-Regular.ttf');}
.Wallpoet {
  font-family: Wallpoet-Regular;
}

@font-face {
  font-family: BebasNeue;
  src: url('../../fonts/BebasNeue-Regular.ttf');}
.BebasNeue {
  font-family: BebasNeue;
}

@font-face {
  font-family: Comfortaa;
  src: url('../../fonts/Comfortaa-Regular.ttf');}
.Comfortaa {
  font-family: Comfortaa;
}

@font-face {
  font-family: LemonMilk;
  src: url('../../fonts/LemonMilk.otf');}
.LemonMilk {
  font-family: LemonMilk;
}

@font-face {
  font-family: Vogue;
  src: url('../../fonts/Vogue.ttf');}
.Vogue {
  font-family: Vogue;
}

@font-face {
  font-family: Kiona;
  src: url('../../fonts/Kiona-Regular.ttf');}
.Kiona {
  font-family: Kiona;
}

@font-face {
  font-family: ApexExtraLight;
  src: url('../../fonts/ApexMk3-ExtraLight.otf');}
.ApexMk3ExtraLight {
  font-family: ApexExtraLight;
}

@font-face {
  font-family: ApexMedium;
  src: url('../../fonts/ApexMk3-Medium.otf');}
.ApexMk3Medium {
  font-family: ApexMedium;
}

@font-face {
  font-family: Bahnschrift;
  src: url('../../fonts/bahnschrift.ttf');}
.Bahnschrift {
  font-family: Bahnschrift;
}




.btn-circle {
    width: 30px;
    height: 30px;
    padding: 6px 0px;
    border-radius: 15px;
    text-align: center;
    font-size: 12px;
    line-height: 1.42857;
}

.slidecontainer {
  width: 80%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 25px; /* Specified height */
  background: #d3d3d3; /* Grey background */
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}

/* Mouse-over effects */
.slider:hover {
  opacity: 1; /* Fully shown on mouse-over */
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}


.recommended {
	color: #ffffff;
	background-color: #EC787A;
	border-radius: 15px;
	border: 2px solid #000000;
	font-size: 1em;

}

.blocks {
	background-color: #B6BCC8;
}

.blocks-blue {
	background-color: #86A9C6;
	color: #fff;
}

.card-header {
	background-color: #8BAAAD;
}

.card-header .btn-link {
	color: #fff;
}

body {
	background-color: #485460;
}

#header {
    width: 100%;
    text-align: center;
}

td {
	 white-space: nowrap;
}