/*
Theme Name: Default
Theme URI: https://vm2.capstone.nl/
Author: Capstone
Author URI: https://capstone.nl/
Description: 
Version: 1.0
*/
html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, em, hr, figure, img, small, b, u, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tr, th, td {
	background:transparent;
	border:0;
	margin:0;
	padding:0;
	vertical-align:baseline;
}

* {
	box-sizing: border-box;
}

html, body {
	height:100%;
	width:100%;
}

body {
	background: radial-gradient(circle at center, #fff 0%, aqua);;
	display:flex;
	align-items:center;
	justify-content:center;
}

a {
	display:inline-block;
	outline:0;
}

@keyframes spin1 {
	from { transform: rotateY(0); }
	to { transform: rotateY(360deg); }
}

@keyframes spin2 {
	from { transform: rotateX(0); }
	to { transform: rotateX(360deg); }
}

@keyframes spin3 {
	from { transform: rotateY(0) rotateX(0); }
	to { transform: rotateY(360deg) rotateX(360deg); }
}

.wrap {
	perspective:450px;
	perspective-origin: 50% 50px;
	height:99px;
	width:87px;
	font-size:0;
	transform:scale(0.75);
	transition:all 2s ease-in-out;
}

	.wrap div {
		width:100%;
		height:100%;
		position:absolute;
		transform-style: preserve-3d;
		border:5px solid rgba(0,0,0,.8);
		top:0.04em;
		z-index:-1;
		background:rgba(249,166,2,.8);
		opacity:0;
		outline: 1px solid transparent;
		transition:all 2s ease-in-out;
	}

		.wrap.active div {
			opacity:1;
			border-left-width:3.5px;
			border-right-width:3.5px;
			border-top-width:4px;
			border-bottom-width:4px;
			border-color:rgba(0,0,0,.8);
			box-shadow:inset 0 0 20px rgba(125,125,125,0.4);
		}

.wrap .fro { opacity:1; transform: translateZ(87px); } 
.bac { transform: translateZ(-0px) rotateY(180deg); }
.lef { transform: rotateY(270deg) translateX(-0px); transform-origin: center left; }
.rig { transform: rotateY(-270deg) translateX(0px); transform-origin: top right; }
.wrap .top { height:87px; transform: rotateX(270deg) translateY(-87px); transform-origin: top center;}
.wrap .bot { height:87px; transform: rotateX(90deg) translateY(87px) translateZ(-12px); transform-origin: bottom center; }

.logo {
	text-transform:uppercase;
	color:#312f2f;
	cursor:pointer;
	transform-style: preserve-3d;
	transform-origin: center center 44.5px;
	height:100%;
	width:100%;
}

	.wrap.active[data-motion="1"] .logo { 
		animation: spin1 10s 20s linear; 
		animation-delay:2s;
	}

	.wrap.active[data-motion="2"] .logo { 
		animation: spin2 10s 20s linear; 
		animation-delay:2s;
	}

	.wrap.active[data-motion="3"] .logo { 
		animation: spin3 10s 20s linear; 
		animation-delay:2s;
	}

	.salamander {
		height:89px;
		position: absolute;
		margin:32px 0 0 38px;
		transition:all 2s ease-in-out;
		opacity:.75;
	}