default.css

/* pre-HTML5 fix */

/* UTILITY */

.flex-wrapper {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.timer-button {
	position: absolute;
	bottom: 0;
	right: 0;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}
.timer-button:hover {
	opacity: 1;
}
.pointer {
	cursor: pointer;
}
.toggleaudio {
	position: absolute;
	bottom: 20px;
	right: 0;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}
.toggleaudio:hover {
	opacity: 1;
}
#mork {
	position: absolute;
	display: block;
	cursor: pointer;
	width: 8vw;
	bottom: 75px;
	left: 125px;
	opacity: 0;
	animation: morkanim1 5s ease-in-out infinite;
	transition: opacity 0.5s ease-in-out;
}
#mork:hover {
	opacity: 1;
}
#mork_img {
	border-radius: 50%;
}
@keyframes morkanim1 {
	25% {
		bottom: 100px;
		left: 10px;
		transform: rotate(360deg);
	}
	50% {
		bottom: 15px;
		left: 300px;
		transform: rotate(0deg);
	}
	75% {
		bottom: 25px;
		left: 20px;
		transform: rotate(360deg);
	}
}
/*0% {transform:scale(.5) rotate(0);}
  50% {transform:scale(1) ;}
  to {transform: rotate(360deg) scale(0.5);}*/

}
.center-content {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	text-align: center;
}
/* HTML - LAYOUT */

}
html.nav-is-open {
	position:fixed;
	overflow-y:scroll;
}
body {
	font-family:'Poppins',
	sans-serif;
	background-color:#000000;
	color:#ffffff;
	overflow:hidden;
	min-height:99vh;
}
body:after {
	content:"";
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-image:url('');
	background-position:center;
	background-size:cover;
	z-index:-10;
}
body.loading {
	overflow:hidden;
}
header {
	width:100%;
	margin:auto;
	max-width:100vw;
	min-height:10vh;
	height:90px;
	background-color:#000000;
	transition:transform ease 1s;
}
header h1 {
	margin:auto;
	letter-spacing:2px;
	font-size:2rem;
	z-index:2;
	color:white;
}
@media only screen and (max-width: 600px) {
	header h1 {
		font-size:5vw;
	}
}
/* NAV */

nav#main-nav {
	position:relative;
	width:100%;
	max-width:100vh;
	height:100%;
	flex-wrap:nowrap;
	justify-content:space-between
}
nav#main-nav h1,
nav#main-nav a {
	flex-grow:1;
	z-index:10;
}
nav#main-nav .trigger-container {
	flex-grow:2;
}
#nav-closer {
	position:absolute;
	top:0;
	left:0;
	right:0;
	margin:auto;
	z-index:12;
	transform:scale(0.01);
	transition:transform 0.6s cubic-bezier(.75,
	-0.30,
	.15,
	1.35);
}
.trigger {
	margin:0 20px;
	background-color:white;
	z-index:11;
}
.trigger i {
	color:#000000;
	transform:scale(0.9);
	transition:transform 0.3s cubic-bezier(.75,
	-0.30,
	.15,
	1.35);
}
.trigger:hover i {
	transform:scale(1.1);
}
.trigger:hover .cart-count {
	width:100%;
}
.cart-count {
	opacity:1;
	position:absolute;
	right:0;
	width:50%;
	text-align:center;
	font-size:1rem;
	color:#000000;
	-webkit-transition:all 0.1s ease-in;
	-moz-transition:all 0.1s ease-in;
	-ms-transition:all 0.1s ease-in;
	-o-transition:all 0.1s ease-in;
	transition:all 0.1s ease-in;
	z-index:2;
}
.cart-count:after {
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:0.75;
	background-color:#ffffff;
	-webkit-transition:all 0.1s ease-in;
	-moz-transition:all 0.1s ease-in;
	-ms-transition:all 0.1s ease-in;
	-o-transition:all 0.1s ease-in;
	transition:all 0.1s ease-in;
	z-index:-1;
}
.cart-count:hover:after {
	opacity:0.9;
}
.trigger-container,
nav#main-nav h1 {
	position:relative;
	text-align:center;
}
.logo-link {
	height:100%;
}
.logo.img-container {
	height:100%;
	padding:5px 0;
}
.logo.img-container img {
	max-height:100%;
}
/* MAIN CONTENT */

main {
	min-height:80vh;
	transition:all 0.5s ease-out;
	background-color:#000000;
}
.loaded-content {
	max-width:100%;
}
.new-content {
	position:absolute;
	opacity:0;
	pointer-events:none;
}
.width-wrapper {
	max-width:85vw;
	padding:15px;
	margin:auto;
	background-color:#000000;
	width:1250px;
}
/* FOOTER */

footer {
	text-align:center;
	min-height:10vh;
	padding:10px;
	background-color:#000000;
	color:white;
	transition:opacity 3s ease-in;
	transition-delay:3s;
}
footer a {
	color:white;
}
footer a:hover {
	color:#ffffff;
}
footer.flex-wrapper {
	flex-direction:column;
}
footer ul {
	margin:0;
}
.loading footer {
	opacity:0;
}
/* HTML - Sidenav */

.nav-is-open #nav-closer {
	transform:scale(1) rotate(180deg);
}
aside {
	z-index:10;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	transition:all 0.6s cubic-bezier(.75,
	-0.30,
	.15,
	1.35);
	pointer-events:none;
	opacity:0;
	overflow-y:scroll;
	overflow-x:hidden;
}
.nav-is-open aside {
	pointer-events:initial;
	opacity:1;
}
aside > ul {
	padding-top:calc(10vh + 20px);
	align-self:flex-start;
}
aside ul li {
	display:block;
	text-align:center;
	margin:3.5vh auto;
	font-size:4vw;
	transition:all 0.6s cubic-bezier(.75,
	-0.30,
	.15,
	1.35);
	transform:translateX(-50%) rotateY(-90deg);
	opacity:0;
	text-transform:uppercase;
}
aside ul li a,
.aside-footer a,
.aside-footer {
	color:white;
}
aside ul li a:hover,
.aside-footer a:hover {
	color:#ffffff;
}
@media only screen and (max-width: 600px) {
	aside ul li {
		font-size:2rem;
	}
}
.aside-footer {
	position:absolute;
	top:initial;
	bottom:50px;
	left:0;
	right:0;
	width:100%;
	text-align:center;
	color:white;
}
.nav-is-open aside ul li {
	transform:translateX(0);
	opacity:1;
}
.nav-is-open aside ul li:hover {
	transform:translateY(-10px) skew(2deg);
}
.nav-is-open aside ul li.special-nav:hover {
	transform:translate(0);
}
.nav-is-open aside ul li .socials li:hover,
.nav-is-open aside ul li .category-dropdown li:hover {
	transform:translateY(-5px);
}
.dropdown-indicator {
	font-size:1rem;
}
.category-dropdown {
	transition:max-height 1s ease-in-out;
	max-height:0;
	overflow:hidden;
	width:100%;
	margin:auto;
	text-align:center;
}
@media only screen and (max-width: 600px) {
	.category-dropdown {
		width:365px;
	}
}
.special-nav:hover .category-dropdown {
	max-height:2000px;
}
.category-dropdown li {
	font-size:0.9rem;
	display:inline-block;
	line-height:1rem;
	padding:0px 10px;
	margin:2vw auto;
}
.category-dropdown li a {
	display:block;
	width:120px;
	height:100%;
	background-color:#000000;
	padding:10px;
	border:2px solid white;
}
.nav-overlay {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#000000;
	z-index:-5;
	opacity:0;
	transition:all 0.6s ease-in;
}
.nav-is-open .nav-overlay {
	opacity:0.7;
}
/* HTML - ELEMENTS */

strong {
	font-weight:600;
}
@media only screen and (max-width: 600px) {
	h1 {
		font-size:9vw;
	}
}
h1,
h2,
h3,
h4,
h5 {
	font-family:'Poppins',
	sans-serif;
	font-weight:600;
	letter-spacing:2px;
	color:#ffffff;
	text-transform:uppercase;
	text-align:center;
}
a {
	position:relative;
	color:#ffffff;
	font-weight:600;
	outline:none;
	border:none;
	text-transform:uppercase;
}
a:hover,
a:focus,
a.active {
	color:#ffffff;
}
img {
	max-width:100%;
}
.socials {
	display:block;
	width:200px;
	max-height:80px;
	margin:auto;
	max-width:100%;
	text-align:center;
	font-size:1.5rem;
	margin-bottom:1rem;
}
.socials li {
	display:inline-block;
	width:25px;
	margin:auto 7px;
	font-size:1.2em;
}
.socials li a {
	font-weight:400;
}
/* LOADER */

#loadscreen {
	background:black;
	z-index:99;
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
	height:100%;
	transition:all 0.5s ease-out;
	opacity:0;
	pointer-events:none;
}
#loadscreen .dots span {
	font-size:72px;
	animation:DOTZ 5s infinite ease-in-out;
	animation-fill-mode:both;
	display:inline-block;
	animation-play-state:paused;
	color:white;
}
#loadscreen .dots span:nth-of-type(1) {
	animation-delay:0.2s;
}
#loadscreen .dots span:nth-of-type(2) {
	animation-delay:0.4s;
}
#loadscreen .dots span:nth-of-type(3) {
	animation-delay:0.6s;
}
.loading #loadscreen {
	opacity:1;
	pointer-events:initial;
}
.loading #loadscreen .dots span {
	animation-play-state:running;
}
.initial-load header {
	transform:translateY(-100%);
}
.initial-load footer {
	opacity:0;
}
/* ANIMATIONS */

@keyframes DOTZ {
	0% {
		transform:translateY(-50px) rotateX(0deg) rotateY(180deg) rotateZ(0deg);
	}
	50% {
		transform: translateY(0px) rotateX(360deg) rotateY(0deg) rotateZ(180deg);
	}
	100% {
		transform: translateY(-50px) rotateX(0deg) rotateY(360deg) rotateZ(360deg);
	}
}
/* COLORING */

.bg-backing {
	background-color:#000000;
}
.bg-body {
	background-color:#ffffff;
}
.bg-header {
	background-color:#ffffff;
}
.bg-accent {
	background-color:#ffffff;
}
.hover-bg-backing:hover {
	background-color:#000000;
}
.hover-bg-body:hover {
	background-color:#ffffff;
}
.hover-bg-header:hover {
	background-color:#ffffff;
}
.hover-bg-accent:hover {
	background-color:#ffffff;
}
.cl-backing {
	color:#000000;
}
.cl-body {
	color:#ffffff;
}
.cl-header {
	color:#ffffff;
}
.cl-accent {
	color:#ffffff;
}
.hover-cl-backing:hover,
.hover-cl-backing:focus {
	color:#000000;
}
.hover-cl-body:hover,
.hover-cl-body:focus {
	color:#ffffff;
}
.hover-cl-header:hover,
.hover-cl-header:focus {
	color:#ffffff;
}
.hover-cl-accent:hover,
.hover-cl-accent:focus {
	color:#ffffff;
}
/* PAGES - PRODUCT */

@media only screen and (min-width: 800px) {
	#product-content .row {
		display:flex;
		flex-direction:row;
	}
	#product-content .row .col-flex {
		display: flex;
		align-items: center;
	}
}
.back-button {
	position:absolute;
	z-index:9;
}
#options-header {
	padding:20px 0;
}
.selector-container {
	text-align:center;
	transition:opacity 0.5s ease,
	max-height 1s ease-in;
	max-height:500px;
	margin-bottom:15px;
	padding-top:15px;
	width:200px;
	margin:auto;
	border-top:2px #ffffff solid;
}
.selector {
	display:inline-block;
	border:2px solid #ffffff;
	color:#ffffff;
	padding:10px;
	margin:5px 5px;
	min-width:50px;
	cursor:pointer;
	border-radius:0;
	box-shadow:0 2px 2px 0 rgba(0,
	0,
	0,
	0.14),
	0 3px 1px -2px rgba(0,
	0,
	0,
	0.12),
	0 1px 5px 0 rgba(0,
	0,
	0,
	0.2);
	transition:border-radius 1s ease,
	box-shadow 1s ease,
	opacity .4s ease;
	overflow:hidden;
}
.option-selector:focus {
	color:#ffffff;
}
.selector.full-width {
	width:100%;
}
.selector:after {
	content:"";
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#ffffff;
	opacity:0;
	transition:opacity .4s ease;
}
.selector.in-stock:hover,
.selector.available:hover,
.selector.selected-color,
#selected.selector,
.selected-option {
	box-shadow:0 2px 20px 5px rgba(0,
	0,
	0,
	0.14),
	0 3px 1px -2px rgba(0,
	0,
	0,
	0.12),
	0 1px 5px 0 rgba(0,
	0,
	0,
	0.2);
	border-color:#ffffff;
	color:#ffffff;
	opacity:1;
	border-radius:50px;
}
.has-selection .selector {
	opacity:0.5;
}
.has-selection:hover .selector.available {
	opacity:1;
}
.selector.unavailable,
.selector.out-of-stock,
.has-selection:hover .selector.out-of-stock {
	opacity:0.15;
	cursor:not-allowed;
	color:black;
	background-color:rgba(0,
	0,
	0,
	0.4);
}
.not-safari #selected.selector {
	transition:1s ease;
	transform:rotateY(360deg);
}
.not-safari #selected.selector.full-width {
	transition:1s ease;
	transform:rotateY(15deg);
}
#selected.selector:after,
.selected-option:after {
	opacity:0.2;
	z-index:-10;
}
.sizes-container.unselected {
	opacity:0;
	max-height:0px;
}
.sizes-container .size-selector {
	font-size:1rem;
}
.product-copy {
	text-align:left;
}
#product h5 {
	width:75%;
	margin:auto;
}
.product-description {
	margin:auto;
}
.product-description .btn-container {
	text-align:center;
}
.product-descripton .btn {
	display:inline-block;
	margin:10px auto 0;
}
.btn {
	display:block;
	background-color:#ffffff;
	color:#000000;
	font-family:inherit;
	font-weight:600;
	text-transform:uppercase;
	margin:15px auto auto;
	-webkit-transition:all 0.2s ease-in;
	-moz-transition:all 0.2s ease-in;
	-ms-transition:all 0.2s ease-in;
	-o-transition:all 0.2s ease-in;
	transition:all 0.2s ease-in;
	border-radius:5px;
	border:2px solid #ffffff;
	padding:10px;
	line-height:0;
}
.btn:hover,
.btn:focus {
	background-color:#000000;
	color:#ffffff;
	border-color:#ffffff;
}
.btn.disabled {
	border-color:rgba(0,
	0,
	0,
	0);
}
@media only screen and (min-width: 600px) {
	.product-description {
		min-height:80vh;
		display:flex;
		flex-direction:column;
		justify-content:center;
	}
}
/* RELATED PRODUCTS */

.related-products {
	margin-top:5vh;
	text-align:center;
}
.related-products h3 {
	font-size:1.5vw;
}
@media only screen and (max-width: 1064px) {
	.related-products h3 {
		font-size:2rem;
	}
}
/* PRODUCT GRID - ISOTOPE BASE */

.product-grid {
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:flex-start;
}
@media screen and (max-width: 45em) {
	.grid-item {
		width:100%;
	}
}
@media screen and (min-width: 45.1em) and (max-width: 63.9375em) {
	.grid-item {
		width:50%;
	}
}
@media screen and (min-width: 64em) {
	.grid-item {
		width:33%;
	}
	.grid-item.large {
		width: 66%;
	}
}
/* SPLASH PAGE */

.splash section {
	margin:7vh auto;
}
.splash section:first-of-type {
	margin:auto auto 7vh;
}
.splash .btn-container {
	text-align:center;
	margin:30px auto;
}
.splash .btn {
	display:inline;
	margin:0 15px;
}