/* BASIC STUFF */

body {
	background-color:#03122b;
	background-image:url("Images/BG.webp");
	background-size:auto;
	background-position:center;
	background-attachment:fixed;
	font-family: "Saira", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: <weight>;
  	font-style: normal;
  	font-variation-settings:"wdth" 100;
	color:aliceblue;
	}

	
P {
	font-size:18px;
	font-weight:100;
	opacity:0.9;
	}

h2 {
	font-family: "Saira", sans-serif;
	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	font-size:28px;
	text-align: center;
	margin-top: -0.25em;
	opacity:0.9;
   	}



/* LINKS */



a:link {
  color: aliceblue;
  font-weight:400;
  background-color: transparent;
  text-decoration: none;
  opacity:0.9;
}

a:visited {
  color: aliceblue;
  font-weight:400;
  background-color: transparent;
  text-decoration: none;
  opacity:0.9;
}

a:hover {
  color: aliceblue;
  opacity:0.4;
  font-weight:400;
  background-color: transparent;
  text-decoration: none;
  opacity:0.4;
}

a:active {
  color: aliceblue;
  background-color: transparent;
  text-decoration: none;
  opacity:0.9;
}


/* Back Button */
	
.back-button {
	position: absolute;
	right:calc(-35px + -1vw);
	z-index: 2;
	font-size: 65px;
	font-weight:400;
	top:-45px;
	}

.back-button a {
	color:white;
	opacity:0.5;
	}

.back-button a:hover {
	opacity:1;
	text-decoration: none;
	}

@media only screen and (max-width: 880px){
	.back-button {
		font-weight:200;
  		}
}

@media only screen and (max-width: 500px){
	.back-button {
		font-weight:200;
		font-size: 35px;
		right:calc(-15px + -1vw);
		top:-25px;
  		}
}

	
/* Gallery Stuff */
	
.gallery {
	width: 100em;
  	height: 56.25em;
	position: relative;
	}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    }

	
	
/* Gallery Bigboi */
	
.mySwiper2 {
    height: 100%;
    width: 100%;
	padding-top: 0px;
	padding-bottom: 0px;
	--swiper-navigation-sides-offset: -1em;
    }
	
.swiper-next-button {
	position:absolute;
	cursor:pointer;
	right:0;
	height: 100%;
	width: 10%;
	opacity: 0.5;
	z-index:2;
	display:flex;
	justify-content: center;
    align-items: center;
	padding-right:2.5%;
	}
	
.swiper-next-button:hover {
	opacity: 1;
	}
	
.swiper-prev-button {
	position:absolute;
	cursor:pointer;
	left:0;
	height: 100%;
	width: 10%;
	opacity: 0.5;
	z-index:2;
	display:flex;
	justify-content: center;
    align-items: center;
	padding-left:2.5%;
	}

.swiper-prev-button:hover {
	opacity: 1;
	}
	
	
	
/* Gallery - Little Fellas */
	
.mySwiper {
    height: auto;
    box-sizing: border-box;
    margin-top: 1%;
    background-color: none;
    }

.mySwiper .swiper-slide {
	width: 100%;
    height: 100%;
    opacity: 0.4;
    }
	
.mySwiper .swiper-slide:hover {
    cursor: pointer;  
	opacity: 1;
    }

.mySwiper .swiper-slide-thumb-active {
    opacity: 1;
    }
	



/* Bottom Text */

.textbox {
	margin-top:0px;
	display:flex;
	}
	
.text {
	width:100%;
	padding: 0 30px 10px 30px;
	opacity:0.9;
	}


/* INFO & LOGOS */
	
#info {
	margin: 0;
	border-right: 1px solid rgba(255,255,255,.25);
	}

#logo {
	padding-top:7px;
	opacity:0.95;
	}

#prodcos {
	font-size:28px;
	font-weight:400;
	opacity:0.9;
	line-height:18px;
	margin-top:20px;
	}

#info P {
	text-align: center;
	margin-top: -0.25em;
	}

#infoFinal {
	text-align: center;
	margin-top: -0.25em;
	margin-bottom:-0.75em;
	}


/* SPIEL */

#spiel {
	margin: 0;
	}
	
#spiel P {
	text-align: left;
	margin-top: -0.25em;
	}

#spielFinal {
	text-align: center;
	margin-top: -0.25em;
	margin-bottom:-0.75em;
	}


/* SPACER */

.spacer {
	height: calc(20px + 10vh);
	display:block;
	}



/* TEXT PHONE CHANGE */

	
@media only screen and (max-width: 880px){
	div.textbox {
		display:block;
  		}
	
	div.text {
		width:100%;
		padding:0 0px 5px 0px;
		}

	#info {
		margin:0 0 0 0;
		border-bottom: 1px solid rgba(255,255,255,.25);
		border-right:0;
		}
	
	#info P {
		text-align: center;
	}
	
	#infoFinal {
	margin-bottom:20px;
	}
	
	#spiel {
		margin:30px 0 3% 0;
		}
	}