/*
	Hi! This website was first built in 2014 and hasn't really been updated at all since then. However, on 2023-11-17, Frank Goodman and Alex Winter were bored and decided to modernize things a bit.

	"here we are updating a website I built 10 years ago on a Friday lol" - Alex
	"it's the journey not the destination, al!" - Frank
*/

/*******************************************************************
	BODY, WRAP
*******************************************************************/

@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400&display=swap');

html {
	background: #041019;
}

body {
	/* background: url(../images/bg-one.png) no-repeat center center fixed; */
	background-size: cover;
	font-family: "Karla", Verdana, Arial, sans-serif;
	margin: 0;
}

.bg {
	aspect-ratio: 16/9;
	background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2.43 -2 5 5.1'%3E%3Cpath d='M 2.10 2.59 L -0.56 3.14 L -2.43 1.11 L -2 -1.4 L 0.8 -2 L 2.56 -0.02 Z' fill='%231773B4'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2.661 -2.23 4.9 5.5'%3E%3Cpath d='M 0.52 3.30 L -2.06 2.44 L -2.66 -0.25 L -1 -2.23 L 1.66 -1.34 L 2.23 1.26 Z' fill='%230D66A5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2.774 -2.428 4.79 5.71'%3E%3Cpath d='M -0.64 3.281 L -2.77 1.58 L -2.41 -1.15 L -0.155 -2.4 L 2.0 -0.7 L 1.6616 2 Z' fill='%23115A90'/%3E%3C/svg%3E");
	background-color: #0a4a7a;
	background-size: 75%, 90%, 105%;
	background-position: center;
	background-repeat: no-repeat;
	height: 100svh;
	inset: 0 0 0 50%;
	overflow: hidden;
	position: fixed;
	transform: translateX(-50%);
	width: max(1920px,100%);
	z-index: -1;
}

h1, h2, h3, h4 {
	color: #FEE635;
	margin: 0;
	text-shadow: -1px -1px 1px rgba(0, 0, 0, .3);
}

h1, h2 {
	border-bottom: 2px solid rgba(255, 255, 255, 0.3);
	margin: 0 0 30px 0;
}

h1 {
	font-size: 36px;
	height: 22px;
}

h2 {
	font-size: 28px;
	height: 18px;
}

h1 span,
h2 span {
	background: #1773B4;
	padding: 0 15px;
}

h3 {
	color: #FFFFFF;
	font-size: 24px;
}

p,
ul {
	color: #FFFFFF;
	font-size: 20px;
	line-height: 28px;
	margin: 0 0 15px 0;
}

a:link,
a:visited {
	color: #c4e7ff;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

hr {
	background: #419dde;
	border: none;
	height: 1px;
	margin: 30px 0;
}

.extra {
	font-size: 14px;
	margin: 15px 0 0 0;
}

/*******************************************************************
	HEADER
*******************************************************************/

header {
	background: #041019;
}

header img {
	border: none;
}

/* homepage */

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

#home header img {
	height: 100%;
	margin: 20px 0;
}

/* interiors */

#interior header {
	margin: 0 0 40px 0;
}

#interior header #header {
	margin: 0 auto;
	overflow: hidden;
	width: 800px;
}

#interior header #header a#logo {
	display: block;
	float: left;
	height: 80px;
	margin: 0;
	padding: 10px 0;
}

#interior header #header img {
	height: 80px;
	vertical-align: bottom;
}

/*******************************************************************
	NAV
*******************************************************************/

nav {
	background: #0B2134;
	height: 50px;
}

nav ul {
	margin: 0;
	padding: 0;
	text-align: center;
}

nav ul li {
	display: inline-block;
}

nav ul li a:link,
nav ul li a:visited {
	color: #FFFFFF;
	display: block;
	height: 50px;
	line-height: 50px;
	padding: 0 15px;
	text-decoration: none;
	text-transform: uppercase;
}

nav ul li a:hover {
	background: #041019;
}

/* interiors */

#interior nav {
	background: #041019;
	display: block;
	float: right;
	height: 100px;
}

#interior nav ul li a:link,
#interior nav  ul li a:visited {
	height: 100%;
	line-height: 100px;
}

#interior nav ul li a:hover {
	background: #0B2134;
}

/*******************************************************************
	CONTENT
*******************************************************************/

#content {
	margin: 0 auto;
	position: relative;
	text-align: center;
	width: 800px;
}

#zwirlBall {
	margin: 0 auto;
	height: 412px;
	position: relative;
	width: 600px;
}

#zwirlBallRed,
#zwirlBallOrange {
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
}

#zwirlBallRed img,
#zwirlBallOrange img {
	display: block;
	height: 100%;
	width: 100%;
}

#zwirlBallRed {
	z-index: 200;
}

#zwirlBallOrange {
	z-index: 100;
}

#ballInfo {
	border-bottom: 1px solid #419dde;
	list-style: none;
	margin: 0 0 40px 0;
	padding: 0 0 30px 0;
}

#ballInfo li span {
	color: #FEE635;
	text-transform: uppercase;
}

/*******************************************************************
	FOOTER
*******************************************************************/

footer {
	background: #041019;
	margin: 40px 0 0 0;
	padding: 20px 0;
	text-align: center;
	width: 100%;
}

footer img {
	height: 100%;
	margin: 0 0 20px 0;
	max-width: 100%;
}

footer .california {
	color: #E8F1F7;
	font-size: 20px;
	margin: 0;
	text-transform: uppercase;
}

footer p {
	font-size: 11px;
	margin: 0;
}

footer a:link,
footer a:visited {
	color: #FFFFFF;
	text-decoration: none;
}

/*******************************************************************
	BUY PAGE
*******************************************************************/

#purchase {
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	text-align: center;
	width: 800px;
}

#purchase h3 {
	color: #E8F1F7;
	font-size: 20px;
	margin-bottom: 50px;
}

#purchase h3 span {
	background: #1773B4;
	padding: 0 15px;
}

/* configurations */

#configurations {
	margin: 0 0 10px 0;
	overflow: hidden;
}

/* ***********************************
//  Purchase: Product
// **********************************/

#displayBall {
	float: left;
	height: 258px;
	margin: 0;
	overflow: hidden;
	position: relative;
	width: 54%;
}

.product {
	inset: 0;
	opacity: 0;
	position: absolute;
	z-index: -1;
	transition: opacity 0.5s ease-in-out;
}

.product[data-selected="true"] {
	opacity: 1;
	z-index: 1;
}

.product img {
	display: block;
	height: 100%;
	margin: 0 auto;
	object-fit: contain;
	width: min(380px, 100%);
}

#displayOptions {
	float: left;
	width: 46%;
}

#chooseColor,
#chooseSize {
	background: #0B2134;
	margin: 0 0 10px 0;
	padding: 15px 0;
	width: 100%;
}

#chooseSize {
	margin: 0;
}

#chooseColor > p,
#chooseSize > p {
	color: #FEE635;
	margin: 0;
	text-transform: uppercase;
}

/* ***********************************
//  Purchase: Colors
// **********************************/

#colors {
	padding: 15px 0 0 0;
}

#colors button {
	outline: none;
}

#colors button svg {
	transition: scale 80ms ease-in-out;
}

#colors button:hover svg {
	scale: 1.1;
}

#colors {
	display: flex;
	justify-content: center;
	gap: 0.5em;
}

#colors button {
	background: none;
	border: none;
	cursor: pointer;
}

#colors button svg {
	height: 44px;
	width: 51px;
}

#colors button[data-selected='true'] svg path {
	stroke: #fff;
}

/* ***********************************
//  Purchase: Sizes
// **********************************/

#sizes {
	overflow: hidden;
	padding: 15px 0 0 0;
}

#sizes #large {
	float: left;
	margin-left: 30px;
}

#sizes #small {
	float: right;
	margin-right: 30px;
}

/*
remove this once small is no longer sold out
*/
#sizes #small button {
	opacity: 0.5;
	cursor: not-allowed;
}

.size {
  background: #3C7FC5;
  border: 2px solid #0B2134;
  border-left: 0;
  border-right: 0;
  color: #fff;
  display: inline-block;
  font-size: 1rem;
  line-height: 32px;
  margin-bottom: 15px;
  overflow: hidden;
  position: relative;
  text-align: center;
  text-transform: uppercase;
  user-select: none;
  width: 141px;
  cursor: pointer;
}

.size::before,
.size::after {
	background: #0B2134;
	border: 2px solid #000;
	content: "";
	height: 32px;
	position: absolute;
	top: -2px;
	transform: rotate(45deg);
	width: 32px;
}

.size::before {
  left: -25px;
}

.size::after {
  right: -25px;
}

.size.selected,
.size.selected::before,
.size.selected::after {
  border-color: #fff;
}

#sizes div div {
	border-bottom: 1px solid #FEE635;
	height: 11px;
	margin: 0 0 5px 0;
}

#sizes div div span {
	background: #0B2134;
	display: inline-block;
	padding: 0 10px;
}

#sizes span {
	color: #FFFFFF;
	display: block;
	font-size: 12px;
}

/* checkout */

#checkout {
	overflow: hidden;
	margin: 0 0 13px 0;
}

#dimensions {
	color: #FFFFFF;
	float: left;
	font-size: 18px;
	letter-spacing: 2px;
	line-height: 40px;
	margin: 0;
	text-align: center;
	width: 54%;
}

#dimensions span {
	color: #FEE635;
	letter-spacing: 0;
	text-shadow: 2px 2px 0px #000000;
	text-transform: uppercase;
}

#carts {
	float: left;
	width: 46%;
}

#carts .cart {
	display: none;
	height: 40px;
}

#carts .cart[data-selected="true"] {
	display: block;
}

#carts .cart {
	overflow: hidden;
}

.cart select {
	display: none;
}

.cart .quantity {
	background: #308eed;
	float: left;
	height: 40px;
	margin: 0 10px 0 0;
	position: relative;
	width: 90px;
}

.cart .quantity label {
	color: #FFFFFF;
	cursor: pointer;
	font-size: 11px;
	left: 9px;
	position: absolute;
	text-transform: uppercase;
	top: 14px;
}

.cart .quantity input[type="text"] {
	background: transparent;
	border: 0;
	color: #FFFFFF;
	font-size: 18px;
	height: 40px;
	margin: 0;
	padding: 0;
	text-align: center;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8);
	width: 100%;
}

.cart .increment,
.cart .decrement {
	background: #3f98f3;
	border: none;
	border-radius: 0;
	color: #FFFFFF;
	cursor: pointer;
	font-size: 18px;
	height: 20px;
	line-height: 16px;
	margin: 0;
	outline: 0;
	padding: 0;
	position: absolute;
	width: 25px;
	-webkit-appearance: none;
}

.cart .increment {
	right: 0;
	top: 0;
}

.cart .decrement {
	bottom: 0;
	right: 0;
}

.cart input[type="submit"] {
	background: #62b0ff;
	border: 0;
	border-radius: 0;
	color: #FFFFFF;
	cursor: pointer;
	float: left;
	font-size: 18px;
	height: 40px;
	letter-spacing: 2px;
	line-height: 40px;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8);
	text-transform: uppercase;
	width: 268px;
	-webkit-appearance: none;
}

.cart input[type="submit"]:hover {
	background: #80bfff;
}

#info {
	margin: 0 0 50px 0;
	overflow: hidden;
}

#catch {
	float: left;
	font-style: italic;
	width: 54%;
}

#fees {
	float: left;
	width: 46%;
}

#catch,
#fees {
	font-size: 12px;
	line-height: 13px;
	margin: 0;
}

#buyLinks {
	background: #0D66A5;
	margin: 0 auto;
}

#buyLinks p {
	font-size: 12px;
	line-height: 26px;
}

#buyLinks p:last-of-type {
	margin: 0;
}

#buyLinks p a {
	display: inline-block;
	padding: 10px;
}

.postPurchase p {
	margin: 50px 0;
}

/*******************************************************************
	BALL PAGE
*******************************************************************/

/* packaging */

#packagingImages {
	margin: 20px 0 0 0;
}

#packagingImages img:first-of-type {
	margin-right: 25px;
}

#packagingImages img:last-of-type {
	margin-left: 25px;
}

#packagingImages p {
	display: none;
}

#packagingOptions {
	margin: 20px 0 40px 0;
	overflow: hidden;
}

.packaging {
	height: 60px;
	overflow: hidden;
}

.zwrap {
	float: left;
}

.tower {
	float: right;
}

.packaging p {
	background: #0B2134;
	display: block;
	float: left;
	font-size: 14px;
	height: 60px;
	line-height: 30px;
	margin: 0;
	text-transform: uppercase;
	width: 220px;
}

.packaging p strong {
	color: #FEE635;
}

.packaging .ribbonLeft {
	border-left: 30px solid transparent;
	border-bottom: 30px solid #0B2134;
	border-right: 30px solid #0B2134;
	border-top: 30px solid #0B2134;
	display: block;
	float: left;
	height: 0px;
	width: 0px;
}

.packaging .ribbonRight {
	border-right: 30px solid transparent;
	border-top: 30px solid #0B2134;
	border-left: 30px solid #0B2134;
	border-bottom: 30px solid #0B2134;
	display: block;
	float: left;
	height: 0px;
	width: 0px;
}

/*******************************************************************
	ABOUT PAGE
*******************************************************************/

#poster {
	background: #000000;
	box-shadow: 1px 1px 5px #000000;
	margin: 60px 0 40px 0;
	padding: 80px 0;
}

#about img {
	margin: 10px 0 20px 0;
}

/*******************************************************************
	STORES PAGE
*******************************************************************/

#accordion {
	margin: 0 0 10px 0;
}

#accordion h2 {
	background: #0A4A7A;
	border-bottom: 0;
	color: #c4e7ff;
	cursor: pointer;
	font-size: 18px;
	line-height: 18px;
	margin: 5px 0 0 0;
	padding: 10px;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#accordion h2:hover {
	background: #0B2134;
}

.stores {
	background: #081928;
	border-collapse: collapse;
	border-spacing: 0;
	color: #FFFFFF;
	display: none;
	font-size: 14px;
	margin: 0;
	table-layout: fixed;
	text-align: left;
	width: 100%;
}

.stores tr td {
	padding: 10px;
}

.stores tr td:last-of-type {
	width: 20%;
}

.stores thead {
	color: #FEE635;
	font-size: 16px;
}

.stores tbody {
	background: #0B2134;
}

.stores tbody tr:nth-child(even) {
	background: #081928;
}

.stores tr td.containsIcon a:first-of-type,
.stores tr td.containsIcon img {
	vertical-align: middle;
}

.stores tr td.containsIcon img {
	margin-left: 4px;
	width: auto;
}

#buyNow {
	margin: 0 0 40px 0;
}

/*******************************************************************
	CONTACT PAGE
*******************************************************************/

#contactForm {
	padding: 30px 0 0 0;
}

/*******************************************************************
	HOMEPAGE MEDIA QUERIES
*******************************************************************/

@media handheld, only screen and (max-width: 700px) {
	#zwirlBall {
		height: auto;
		width: auto;
	}

	#zwirlBallOrange {
		position: static;
	}
}

@media handheld, only screen and (max-width: 500px) {
	#home nav ul li a:link,
	#home nav ul li a:visited {
		font-size: 15px;
		padding: 0 10px;
	}

	#content {
		margin: 50px auto 0 auto
	}

	#ballInfo li {
		font-size: 14px;
	}
}

@media handheld, only screen and (max-width: 420px) {
	#home header img {
		width: 80%;
	}

	#home nav ul li a:link,
	#home nav ul li a:visited {
		font-size: 13px;
		padding: 0 7px;
	}
}

@media handheld, only screen and (max-width: 380px) {
	#home header {
		height: 165px;
	}

	#home header img {
		margin: 10px 0 0 0;
	}
}

/*******************************************************************
	INTERIOR MEDIA QUERIES
*******************************************************************/

@media handheld, only screen and (max-width: 840px) {
	#content {
		width: 100%;
	}

	#content p {
		padding: 0 20px;
	}

	#interior header #header {
		width: 100%;
	}

	#interior header #header a#logo {
		padding: 10px;
	}
}

@media handheld, only screen and (max-width: 700px) {
	#interior header #header a#logo {
		float: none;
	}

	#interior header #header a#logo img {
		display: block;
		margin: 0 auto;
	}

	#interior nav {
		float: none;
		height: 50px;
	}

	#interior nav ul li a:link,
	#interior nav ul li a:visited {
		line-height: 50px;
	}

	#content {
		padding: 0 5%;
		width: 90%;
	}
	
	#content img:not(.icon) {
		width: 100%;
	}

	h1, h2 {
		background: #0D66A5;
		border: none;
		height: 100%;
		padding: 10px;
	}

	h1 span, h2 span {
		background: transparent;
		padding: 0;
	}
}

@media handheld, only screen and (max-width: 500px) {
	#interior nav ul li a:link,
	#interior nav ul li a:visited {
		padding: 0 5px;
	}
}

/*******************************************************************
	BALL PAGE MEDIA QUERIES
*******************************************************************/

@media handheld, only screen and (max-width: 700px) {
	#packagingImages img,
	#packagingImages img:first-of-type,
	#packagingImages img:last-of-type {
		display: block;
		margin: 0 auto;
		width: 50%;
	}

	#packagingImages p {
		background: #0B2134;
		display: block;
		font-size: 16px;
		padding: 10px;
	}

	#packagingImages p:first-of-type {
		margin-bottom: 30px;
	}

	#packagingImages p:last-of-type {
		margin-top: 20px;
	}

	.packaging {
		display: none;
	}

	.extra {
		font-size: 12px;
	}
}

/*******************************************************************
	BUY PAGE MEDIA QUERIES
*******************************************************************/

/* tablet */
@media handheld, only screen and (max-width: 840px) {
	#displayBall,
	#dimensions,
	#catch {
		width: 50%;
	}

	#displayOptions,
	#carts,
	#fees {
		float: right;
		margin: 0 20px 0 0;
		width: 44%;
	}

	.cart input[type="submit"] {
		width: 250px;
	}
}

/* tablet */
@media handheld, only screen and (max-width: 800px) {
	#purchase {
		width: 100%;
	}

	#displayOptions,
	#carts,
	#fees {
		width: 352px;
	}
}

/* phone (stacked) */
@media handheld, only screen and (max-width: 760px) {
	#displayBall,
	#dimensions,
	#catch {
		float: none;
		margin: 0 auto;
		width: 100%;
	}

	#displayOptions,
	#carts,
	#fees {
		float: none;
		margin: 0 auto;
	}

	#configurations {
		margin: 0;
	}

	#purchase h2 {
		margin: 0 0 20px 0;
	}

	#displayBall {
		margin: 0 auto 10px auto;
		min-width: 300px;
	}

	#dimensions {
		background: #0B2134;
		font-size: 12px;
		line-height: 20px;
		margin: 0 auto 10px auto;
		padding: 0 0 15px 0;
		width: 352px;
	}

	#catch {
		display: none;
	}

	#buyLinks {
		display: none;
	}
}

/* phone (small) */
@media handheld, only screen and (max-width: 420px) {
	#interior nav ul li a:link,
	#interior nav ul li a:visited {
		font-size: 14px;
	}

	h1 {
		font-size: 26px;
	}

	#displayOptions, #carts, #fees {
		width: 100%;
	}

	#sizes #large {
		margin-left: 10px;
	}

	#sizes #small {
		margin-right: 10px;
	}

	#dimensions {
		width: 100%;
	}

	#carts .cart {
		overflow: visible;
	}

	.cart .quantity {
		display: inline-block;
		float: none;
	}

	.cart input[type="submit"] {
		display: inline-block;
		float: none;
		width: 170px;
	}
}

/*******************************************************************
	ABOUT PAGE MEDIA QUERIES
*******************************************************************/

@media handheld, only screen and (max-width: 700px) {
	#poster {
		padding: 80px;
	}
}

@media handheld, only screen and (max-width: 600px) {
	#poster {
		padding: 40px;
	}
}

/*******************************************************************
  404 ERROR PAGE
*******************************************************************/

#fourzerofour {
	left: 50%;
	margin: -124px 0 0 -159px;
	position: absolute;
	text-align: center;
	top: 50%;
}

#fourzerofour h1,
#fourzerofour h2 {
	border-bottom: none;
	height: 100%;
	margin: 0;
}

#fourzerofour h2 {
	color: #FFFFFF;
	margin-bottom: 30px;
}

a:link.button, a:visited.button {
	background: #FF9E19;
	border-radius: 10px;
	box-shadow: 2px 2px 1px #cd7a08;
	color: #FFFFFF;
	padding: 7px 30px;
}

a:hover.button {
	background: #fc970d;
	text-decoration: none;
}

#fourzerofour .extra {
	font-size: 16px;
	margin-bottom: 30px;
}