@charset "utf-8";
/* CSS Document */

:root {
	--main-blue-color: rgba(0,48,73,1.00);	/* Header, Footer, etc. */
}

* {
	box-sizing: border-box;
}

.jacques-francois-regular {
  font-family: "Jacques Francois", serif;
  font-weight: 400;
  font-style: normal;
}


.noto-sans-regular {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

body {
	background-color: rgba(238,238,238,1.00);
	margin: 0px;
}

h1 {
	font-family: "Jacques Francois", serif;
  	font-weight: 400;
  	font-style: normal;
	font-size: 48px;
	color: var(--main-blue-color);
}

h2 {
	font-family: "Jacques Francois", serif;
  	font-weight: 400;
  	font-style: normal;
	font-size: 36px;
	color: var(--main-blue-color);
}

h4 {
	font-family: "Jacques Francois", serif;
  	font-weight: 400;
  	font-style: normal;
	font-size: 22px;
}

h5 {
	font-family: "Noto Sans", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	font-variation-settings:
    	"wdth" 100;
	font-size: 20px;
	margin: 0px;
}

p {
	font-family: "Noto Sans", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	font-variation-settings:
    	"wdth" 100;
	font-size: 16px;
}

.wrapper {
	width: 100%;
	height: auto;
}

.header {
	position: relative;
	width: 100%;
	height: 100px;
	background-color: var(--main-blue-color);
}

#back-to-top {
	display: block;
	position: fixed;
	width: 40px;
	height: 40px;
	bottom: 20px;
	right: 20px;
	background-color: var(--main-blue-color);
	border-radius: 50%;
	box-shadow: 2px 5px 10px 0px rgba(0, 0, 0, 0.5);
	cursor: pointer;
	opacity: 0%;
	transition: opacity 0.3s ease;
	& .arrow {
		display: block;
		position: absolute;
		width: 30px;
		height: 30px;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		& .left-arrow {
			position: absolute;
			width: 17px;
			height: 4px;
			top: 12px;
			left: 2px;
			transform: rotate(-50deg);
			background-color: rgba(238, 238, 238, 1.0);
			border-radius: 17px;
		}
		& .right-arrow {
			position: absolute;
			width: 17px;
			height: 4px;
			top: 12px;
			right: 2px;
			transform: rotate(50deg);
			background-color: rgba(238, 238, 238, 1.0);
			border-radius: 17px;
		}
	}
	&.visible {
		opacity: 70%;
		&:hover {
			opacity: 100%;
		}
	}
}

.nav {
	position: relative;
	width: 80%;
	max-width: 1440px;
	height: 100px;
	margin: auto;
}

.navbar {
	position: absolute;
	bottom: 10px;
	right: 0px;
}

.navbar ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}

.navbar ul li {
	float: left;
	margin-left: 22px;
}

.navbar ul li a {
	display: flex;
	padding: 8px 17px;
	justify-content: center;
	align-items: center;
	text-decoration: none;
	font-family: "Jacques Francois", serif;
  	font-weight: 400;
  	font-style: normal;
	font-size: 24px;
	color: rgba(255,255,255,1.00);
	transition-timing-function: ease-in;
	transition: all 0.5s;  /* 0.8s */
}

.navbar ul li a:hover {
	background-color: rgba(2,41,62,1.00);
	background: radial-gradient(rgba(2,41,62,1.00)0%, var(--main-blue-color)90%);
	transform: translate(0px, -8px);
}

.navbar .active {
	border-bottom: 3px solid rgba(218,222,237,1.00);
}

.menu-overlay {
	display: none;
	position: fixed;
	inset: 0px;
	background-color: rgba(0, 0, 0, 0.25);
	z-index: 999;
	transition: opacity 0.2s ease;
}

.icon {
	display: none;
}

.button {
	display: inline-flex;
	padding: 13px 16px;
	justify-content: center;
	align-items: center;
	background-color: rgba(98,0,42,1.00);
	border-radius: 10px;
	text-decoration: none;
	color: rgba(255,255,255,1.00);
	transition-timing-function: ease-in;
	transition: all 0.3s;  /* 0.8s */
}
.button p {
	margin: 0px;
}
.button:hover {
	background-color: rgba(139,36,81,1.00);
	box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.44);
	transform: translate(0px, -2px);
}
.float-right {
	float: right;
}
.centered {
	position: relative;
	left: 50%;
	margin-top: 26px;
	transform: translate(-50%, 0%);
}
.centered:hover {
	transform: translate(-50%, -2px);
}

p a {
	color: rgba(98,0,42,1.00);
	text-decoration: none;
}
p a:hover {
	color: rgba(86,6,41,1.00);
	text-decoration: underline;
}

.a-styling {
	color: rgba(255,255,255,1.00);
	text-decoration: none;
}

.main {
	position: relative;
	width: 80%;
	max-width: 1440px;
	height: auto;
	min-height: 300px;
	margin: auto;
	background-color: rgba(238,238,238,1.00);
}

.main-content {
	float: right;
	width: 55%;
	height: auto;
	min-height: 300px;
	background-color: rgba(209,163,166,0.00);
}

.main-card {
	position: relative;
	width: 100%;
	height: auto;
	background-color: rgba(255,255,255,1.00);
	padding: 30px;
	border-radius: 16px;
	margin-top: 50px;
}
.main-card h2 {
	margin: 0px;
}
.last-card {
	margin-bottom: 50px;
}

.relative {
	position: relative;
}

.margin {
	margin-top: 50px;
}

.sub-card {
	width: 100%;
	height: auto;
	border: 3px solid rgba(218,222,237,1.00);
	padding: 23px;
	border-radius: 16px;
	margin-top: 26px;
}
.sub-card p {
	margin-bottom: 0px;
}

hr {
	border: 1px solid rgba(218,222,237,1.00);
}

.liechtenaeur {
	width: 100%;
	height: 160px;
	background-image: url("images/liechtenaeur-vignette.png");
	background-position: 50% 40%;
	background-size: cover;
	border-radius: 16px;
	margin-top: 50px;
}

.footer {
	clear: both;
	width: 100%;
	height: auto;
	background-color: var(--main-blue-color);
}

/* Logo Art --------------------------------------------------- */

.logo-main {
	width: 100%;
	height: auto;
	margin-top: 20px;
}

.logo-box {
	position: relative;
	width: 250px;
	height: 200px;
	background-color: rgba(166,53,55,0.00);
	margin: auto;
	overflow: hidden;
}

.logo-nav-box {
	float: left;
	position: relative;
	width: 120px;
	height: 100px;
	background-color: rgba(146,54,55,0.00);
	padding-top: 10px;
}

.logo-footer-box {
	position: relative;
	width: 120px;
	height: 100px;
	background-color: rgba(146,54,55,0.00);
	padding-top: 10px;
	margin: auto;
}

.logo-header {
	margin: 0px;
	transform-origin: 0% 0%;
	transform: scale(0.4);
}

.logo-footer {
	transform-origin: 8% 0%;
	transform: scale(0.4);
}

.logo-watermark {
	position: absolute;
	margin: 0px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	filter: grayscale(100%) opacity(30%);
}

.logo-text {
	float: left;
	width: 140px;
	height: 100px;
	color: rgba(255,255,255,1.00);
	background-color: rgba(135,8,10,0.00);
}
.logo-text h4 {
	position: relative;
	margin: 0px;
	top: 50%;
	transform: translate(0%, -50%);
}
.logo-text-footer {
	width: 290px;;
	height: 30px;
	color: rgba(255,255,255,1.00);
	background-color: rgba(135,8,10,0.00);
	text-align: center;
	margin: auto;
}
.logo-text-footer h4 {
	position: relative;
	margin: 0px;
}
.footer-text {
	color: rgba(255,255,255,1.00);
	text-align: center;
	margin: 0px;
	line-height: 30px;
	padding: 10px;
}

.tiara {
	position: absolute;
	width: 200px;
	height: 40px;
	top: 50%;
	left: 50%;
	/*background-color: rgba(217,196,4,1.00);*/
	border-radius: 50%;
	border-top: 6px solid rgba(219,194,96,1.00);
	border-left: 3px solid rgba(219,194,96,1.00);
	border-right: 3px solid rgba(219,194,96,1.00);
	box-shadow: 0px -10px 0px -8px rgba(219,194,96,1.00);
	transform: translate(-50%, 130%);
}

.tiara-spike-1 {
	position: absolute;
	width: 20px;
	height: 40px;
	top: -59px;
	left: 30px;
	border-radius: 50%;
	box-shadow: 4px 20px 0px 0px rgba(219,194,96,1.00);
}
.tiara-spike-2 {
	position: absolute;
	width: 20px;
	height: 40px;
	top: -69px;
	left: 50px;
	border-radius: 50%;
	box-shadow: 4px 20px 0px 0px rgba(219,194,96,1.00);
	transform: scale(1.2)
}
.tiara-spike-3 {
	position: absolute;
	width: 20px;
	height: 40px;
	top: -79px;
	left: 73px;
	border-radius: 50%;
	box-shadow: 4px 20px 0px 0px rgba(219,194,96,1.00);
	transform: scale(1.4)
}
.tiara-spike-4 {
	position: absolute;
	width: 20px;
	height: 40px;
	top: -79px;
	left: 103px;
	border-radius: 50%;
	box-shadow: 4px 20px 0px 0px rgba(219,194,96,1.00);
	transform: scale(-1.4, 1.4)
}
.tiara-spike-5 {
	position: absolute;
	width: 20px;
	height: 40px;
	top: -69px;
	left: 126px;
	border-radius: 50%;
	box-shadow: 4px 20px 0px 0px rgba(219,194,96,1.00);
	transform: scale(-1.2, 1.2)
}
.tiara-spike-6 {
	position: absolute;
	width: 20px;
	height: 40px;
	top: -59px;
	left: 146px;
	border-radius: 50%;
	box-shadow: 4px 20px 0px 0px rgba(219,194,96,1.00);
	transform: scale(-1, 1);
}

.tiara-side-left {
	position: absolute;
	width: 60px;
	height: 40px;
	top: -5px;
	left: 15px;
	border-radius: 50%;
	box-shadow: -4px -20px 0px -8px rgba(219,194,96,1.00);
	transform: rotate(-10deg);
}
.tiara-side-right {
	position: absolute;
	width: 60px;
	height: 40px;
	top: -5px;
	left: 119px;
	border-radius: 50%;
	box-shadow: -4px -20px 0px -8px rgba(219,194,96,1.00);
	transform: rotate(10deg) scaleX(-1);
}

.tiara-fill {
	position: absolute;
	width: 95px;
	height: 40px;
	top: -5px;
	left: 50px;
	border-radius: 50%;
	box-shadow: 0px -30px 0px -8px rgba(219,194,96,1.00);
}

.gem {
	position: absolute;
	width: 8px;
	height: 8px;
	top: -30px;
	left: 30px;
	background-color: rgba(98,0,42,1.00);
	transform: rotate(45deg);
}
.gem2 {
	position: absolute;
	width: 8px;
	height: 8px;
	top: -41px;
	left: 46px;
	background-color: rgba(98,0,42,1.00);
	transform: rotate(45deg);
}
.gem3 {
	position: absolute;
	width: 8px;
	height: 8px;
	top: -49px;
	left: 69px;
	background-color: rgba(98,0,42,1.00);
	transform: rotate(45deg);
}
.gem4 {
	position: absolute;
	width: 8px;
	height: 8px;
	top: -58px;
	left: 94px;
	background-color: rgba(98,0,42,1.00);
	/*border-radius: 50%;*/
	transform: rotate(45deg);
}
.gem5 {
	position: absolute;
	width: 8px;
	height: 8px;
	top: -49px;
	left: 119px;
	background-color: rgba(98,0,42,1.00);
	transform: rotate(45deg);
}
.gem6 {
	position: absolute;
	width: 8px;
	height: 8px;
	top: -41px;
	left: 142px;
	background-color: rgba(98,0,42,1.00);
	transform: rotate(45deg);
}
.gem7 {
	position: absolute;
	width: 8px;
	height: 8px;
	top: -30px;
	left: 159px;
	background-color: rgba(98,0,42,1.00);
	transform: rotate(45deg);
}

.cross-guard-logo {
	position: absolute;
	width: 10px;
	height: 96px;
	top: 2px;
	left: 100px;
	background-color: transparent;
	border-radius: 50% 0px 0px 50%;
	border-left: 7px solid rgba(116,116,116,1.00);
}

.sword-logo {
	position: absolute;
	width: 480px;
	height: 100px;
	top: 42px;
	left: 30px;
	background-color: rgba(0,0,0,0.00);
	transform-origin: 20% 50%;
	transform: rotate(90deg);
}

.blade-logo {
	position: absolute;
	width: 360px;
	height: 18px;
	top: 42px;
	left: 105px;
	background: linear-gradient(0deg, rgba(100,100,100,1)50%, rgba(142,142,142,1.00)50%);
	border-radius: 0px 80% 80% 0px/0px 8px 8px 0px;
}

.pommel-logo {
	position: absolute;
	width: 21px;
	height: 21px;
	top: 39px;
	left: 13px;
	background-color: var(--steel-color);
	background: linear-gradient(180deg, rgba(142,142,142,1.00)50%, rgba(100,100,100,1)50%);
	border-radius: 50% 40% 40% 50%;
}

.peen-logo {
	position: absolute;
	width: 8px;
	height: 5px;
	top: 46px;
	left: 8px;
	background-color: rgba(69,69,69,1.00);
	border-radius: 50% 0% 0% 50%;
}

.pommel-circle {
	position: absolute;
	width: 13px;
	height: 13px;
	top: 43px;
	left: 17px;
	background-color: rgba(150,150,150,1.00);
	border-radius: 50%;
}

/* Logo Art ^ */

/* CSS Art ---------------------------------------------------- */

.reference {
	width: 100%;
	height: auto;
}

.art-box {
	--steel-color: rgba(120,120,120,1.00);
	
	float: right;
	position: relative;
	width: 45%;
	height: 800px;
	min-height: 300px;
	background-color: rgba(238,238,238,1.00);
}

.frame {
	position: absolute;
	width: 600px;
	height: 800px;
	top: 0%;
	left: 50%;
	transform: translate(-50%, 0%);
	background-color: rgba(0,0,0,0.00);
}

.frame-2 {
	display: none;
}

/* Skeleton */

.left-arm {
	position: absolute;
	width: 100px;
	height: 300px;
	top: 200px;
	left: 290px;
	background-color: rgba(71,245,237,0.00);
}

.left-leg {
	position: absolute;
	width: 130px;
	height: 350px;
	top: 420px;
	left: 274px;
	background-color: rgba(121,0,255,0.00);
	perspective: 200px;
}

.right-leg {
	position: absolute;
	width: 130px;
	height: 356px;
	top: 424px;
	left: 180px;
	background-color: rgba(2,0,255,0.00);
	perspective: 200px;
}

.torso {
	position: absolute;
	width: 160px;
	height: 300px;
	top: 187px;
	left: 200px;
	background-color: rgba(200,0,0,0.00);
}

.head {
	position: absolute;
	width: 130px;
	height: 130px;
	top: -120px;
	left: 1px;
	background-color: rgba(207,150,101,0.00);
	transform-origin: 60% 92%;
}

.right-upper-arm {
	position: absolute;
	width: 100px;
	height: 170px;
	left: -26px;
	background-color: rgba(0,200,0,0.00);
	transform-origin: 50% 20%;
	transform: rotate(10deg);		/* rotate(10deg) rotate(-80deg) rotate(20deg) rotate(10deg) */
	animation-name: right-upper-arm;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}

.right-forearm {
	position: absolute;
	width: 100px;
	height: 206px;
	top: 130px;
	left: -12px;
	background-color: rgba(0,0,200,0.00);
	transform-origin: 50% 5%;
	transform: rotate(-26deg);    /* rotate(-26deg) rotate(-89deg) rotate(-9deg) rotate(-26deg) */
	perspective: 200px;
	animation-name: right-forearm;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}

.right-hand {
	position: absolute;
	width: 100px;
	height: 130px;
	top: 80px;
	background-color: rgba(200,200,0,0.00);
	transform-origin: 50% 30%;
	transform: rotate(-1deg);    /* rotate(-1deg) rotate(-7deg) rotate(23deg) rotate(-1deg) */
	animation-name: right-hand;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}

.sword {
	position: absolute;
	width: 480px;
	height: 100px;
	top: 25px;
	left: -30px;
	background-color: rgba(0,0,0,0.00);
	transform-origin: 20% 50%;
	transform: rotate(6deg);    /* rotate(6deg) rotate(-6deg) rotate(9deg) rotate(6deg) */
	animation-name: sword;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}

.left-hand {
	position: absolute;
	width: 100px;
	height: 130px;
	top: 183px;
	left: 14px;
	background-color: rgba(200,200,0,0.00);
	transform-origin: 50% 30%;
	transform: rotate(-12deg) scaleX(-.6);
}

/* second frame lower on home page */

.right-upper-arm-2 {
	position: absolute;
	width: 100px;
	height: 170px;
	left: -26px;
	background-color: rgba(0,200,0,0.00);
	transform-origin: 50% 20%;
	transform: rotate(-29deg);		/* rotate(-29deg) rotate(-31deg) */
	animation-name: right-upper-arm-2;
	animation-duration: 8s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}

.right-forearm-2 {
	position: absolute;
	width: 100px;
	height: 206px;
	top: 130px;
	left: -12px;
	background-color: rgba(0,0,200,0.00);
	transform-origin: 50% 5%;
	transform: rotate(-96deg);    /* rotate(-26deg) rotate(-89deg) rotate(-9deg) rotate(-26deg) */
	perspective: 200px;
	animation-name: right-forearm-2;
	animation-duration: 8s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}

.right-hand-2 {
	position: absolute;
	width: 100px;
	height: 130px;
	top: 80px;
	background-color: rgba(200,200,0,0.00);
	transform-origin: 50% 30%;
	transform: rotate(20deg);    /* rotate(20deg) rotate(22deg) */
	animation-name: right-hand-2;
	animation-duration: 8s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}

.sword-2 {
	position: absolute;
	width: 480px;
	height: 100px;
	top: 30px;
	left: -30px;
	background-color: rgba(0,0,0,0.00);
	transform-origin: 20% 50%;
	transform: rotate(15deg);    /* rotate(6deg) rotate(-6deg) rotate(9deg) rotate(6deg) */
	animation-name: sword-2;
	animation-duration: 6s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}

/* Textures */


/* Sword: */
.blade {
	position: absolute;
	width: 360px;
	height: 18px;
	top: 42px;
	left: 105px;
	background: linear-gradient(0deg, rgba(100,100,100,1)0%, rgba(80,80,80,1)40%, rgba(180,180,180,1)60%, rgba(120,120,120,1)100%);
	border-radius: 0px 80% 80% 0px/0px 8px 8px 0px;
}

.cross-guard {
	position: absolute;
	width: 10px;
	height: 96px;
	top: 2px;
	left: 100px;
	background-color: transparent;
	border-radius: 50% 0px 0px 50%;
	border-left: 7px solid rgba(152,152,152,1.00);
}

.hilt {
	position: absolute;
	width: 70px;
	height: 13px;
	top: 44px;
	left: 50px;
	background: linear-gradient(0deg, rgba(5,5,5,1)0%, rgba(5,5,5,1)40%, rgba(45,45,45,1.00)60%, rgba(45,45,45,1.00)100%);
	border-radius: 50% 0px 0px 50%;
}
.hilt2 {
	position: absolute;
	width: 70px;
	height: 7px;
	top: 47px;
	left: 32px;
	background: linear-gradient(0deg, rgba(5,5,5,1)0%, rgba(5,5,5,1)40%, rgba(37,37,37,1.00)60%, rgba(37,37,37,1.00)100%);
	border-radius: 0px;
	border-left: 7px solid var(--steel-color);
}

.pommel {
	position: absolute;
	width: 30px;
	height: 21px;
	top: 39px;
	left: 5px;
	background-color: var(--steel-color);
	background: radial-gradient(farthest-corner at 60% 90%, rgba(90,90,90,1.00)5%, rgba(255,255,255,0.00)70%, rgba(255,255,255,0.00)100%), 
		linear-gradient(180deg, rgba(100,100,100,1.00)0%, rgba(91,91,91,1.00)40%, rgba(235,235,235,1.00)60%, rgba(180,180,180,1.00)100%);
	border-radius: 50% 40% 40% 50%;
}

.peen {
	position: absolute;
	width: 8px;
	height: 5px;
	top: 47px;
	left: 2px;
	background-color: rgba(69,69,69,1.00);
	border-radius: 50% 0% 0% 50%;
}
/* Sword ^ */


/* Gauntlet: */

.gauntlet-outside-curve {
	position: absolute;
	width: 40px;
	height: 50px;
	top: 20px;
	left: -7px;
	background-color: rgba(173,43,45,0.00);
	border-right: 1px solid rgba(55,55,55,1.00);
	border-top: 0px solid rgba(0,0,0,0.00);
	border-bottom: 0px solid rgba(0,0,0,0.00);
	border-radius: 10% 90% 0% 10%;
	box-shadow: 17px -2px 20px -4px rgba(75,75,75,1.00), 15px -5px 0px 5px rgba(120,120,120,1.00);
	transform: rotate(15deg);
}

.gauntlet-top-curve {
	position: absolute;
	width: 47px;
	height: 50px;
	top: -9px;
	left: 15px;
	background-color: rgba(120,120,120,1.00);
	background: radial-gradient(farthest-corner at 95% 60%, rgba(120,120,120,1.00)50%, rgba(188,188,188,1.00)110%);
	border-radius: 80% 30%;
	border-top: 1px solid rgba(55,55,55,1.00);
	border-left: 1px solid rgba(55,55,55,1.00);
	transform: rotate(59deg);
}

.gauntlet-inside-curve {
	position: absolute;
	width: 25px;
	height: 20px;
	top: 24px;
	left: 58px;
	background-color: rgba(173,43,45,0.00);
	border-right: 1px solid rgba(55,55,55,1.00);
	border-top: 0px solid rgba(0,0,0,0.00);
	border-bottom: 0px solid rgba(0,0,0,0.00);
	border-radius: 10% 90% 0% 10%;
	box-shadow: 15px -5px 0px 5px rgba(120,120,120,1.00);
	transform: rotate(-61deg) scaleX(-1);
}
.cover {
	position: absolute;
	top: 43px;
	left: 72px;
	width: 10px;
	height: 4px;
	background-color: rgba(238,238,238,1.00);
	border-radius: 50%;
	transform: rotate(-40deg);
}

.gauntlet-wrist-filler {
	position: absolute;
	width: 31px;
	height: 70px;
	top: 20px;
	left: 31px;
	background-color: rgba(120,120,120,1.00);
}

.gauntlet-fingers {
	position: absolute;
	width: 27px;
	height: 30px;
	top: 67px;
	left: 19px;
	background-color: rgba(120,120,120,1.00);
	border-radius: 90% 10% 10% 10%;
	border-top: 1px solid rgba(55,55,55,1.00);
	border-left: 1px solid rgba(55,55,55,1.00);
	transform: rotate(30deg) scaleY(-1);
}

.gauntlet-fingers2 {
	position: absolute;
	width: 26px;
	height: 30px;
	top: 80px;
	left: 37px;
	background-color: rgba(120,120,120,1.00);
	border-radius: 90% 10% 10% 10%;
	border-top: 1px solid rgba(55,55,55,1.00);
	border-left: 1px solid rgba(55,55,55,1.00);
	transform: rotate(-55deg) scaleY(-1);
}

.gauntlet-fingers3 {
	position: absolute;
	width: 26px;
	height: 30px;
	top: 74px;
	left: 36px;
	background-color: rgba(120,120,120,1.00);
	border-radius: 90% 10% 10% 10%;
	transform: rotate(-49deg) scaleY(-1);
}

.gauntlet-fingers-inside {
	position: absolute;
	width: 40px;
	height: 50px;
	top: 50px;
	left: 48px;
	background-color: rgba(173,43,45,0.00);
	border-right: 2px solid rgba(55,55,55,1.00);
	border-top: 0px solid rgba(0,0,0,0.00);
	border-bottom: 0px solid rgba(0,0,0,0.00);
	border-radius: 10% 90% 0% 10%;
	box-shadow: 15px -5px 5px 5px rgba(120,120,120,1.00);
	transform: rotate(30deg) scale(-.4);
}

.gauntlet-thumb {
	position: absolute;
	width: 27px;
	height: 30px;
	top: 49px;
	left: 56px;
	background-color: rgba(120,120,120,1.00);
	border-radius: 90% 10% 10% 10%;
	border: 1px solid rgba(55,55,55,1.00);
	transform: rotate(263deg) scaleY(-.3) scaleX(1);
}
.thumb-2 {
	top: 50px;
	left: 56px;
	transform: rotate(263deg) scaleY(-.4) scaleX(1.2);
}

.finger-laime1 {
	top: 72px;
	left: 32px;
	background-color: rgba(120,120,120,0.00);
	transform: rotate(-55deg) scaleY(-1) skewX(-5deg);
}
.finger-laime2 {
	top: 55px;
	left: 30px;
	background-color: rgba(120,120,120,0.00);
	transform: rotate(-35deg) scaleY(-.7) skewX(-10deg);
}

.finger-laime3 {
	top: -1px;
	left: 19px;
	background-color: rgba(120,120,120,0.00);
	border-top: 2px solid rgba(99,99,99,1.00);
	border-left: 2px solid rgba(99,99,99,1.00);
	transform: rotate(29deg) scaleY(.7) skewX(-10deg);
}
.finger-laime4 {
	top: 3px;
	left: 19px;
	background-color: rgba(120,120,120,0.00);
	border-top: 2px solid rgba(99,99,99,1.00);
	border-left: 2px solid rgba(99,99,99,1.00);
	transform: rotate(24deg) scaleY(.6) skewX(-10deg);
}

/* Gauntlet ^ */

/* Gauntlet Left: */

.gl {
	box-shadow: 29px -10px 26px -10px rgba(75,75,75,1.00), 15px -6px 0px 5px rgba(120,120,120,1.00);
	transform: rotate(15deg);
}

.glt {
	position: absolute;
	width: 47px;
	height: 50px;
	top: -9px;
	left: 11px;
	background-color: rgba(120,120,120,1.00);
	background: radial-gradient(farthest-corner at 95% 60%, rgba(120,120,120,1.00)50%, rgba(188,188,188,1.00)110%);
	border-radius: 80% 5% 80% 10%;
	border-top: 1px solid rgba(55,55,55,1.00);
	border-left: 1px solid rgba(55,55,55,1.00);
	transform: rotate(75deg);
}

/* Gauntlet Left ^ */

/* Forearm: */

.bracer {
	position: absolute;
	width: 36px;
	height: 90px;
	top: 30px;
	left: 30px;
	background-color: rgba(132,132,132,1.00);
	background: linear-gradient(90deg, rgba(67,67,67,1.00)0%, rgba(62,62,62,1.00)20%, rgba(139,139,139,1.00)90%);
	transform-style: preserve-3d;
	transform: rotateX(-30deg);
}

.elbow-spike {
	position: absolute;
	width: 68px;
	height: 68px;
	top: -23px;
	left: -17px;
	background-color: rgba(111,111,111,0.00);
	background: conic-gradient(rgba(0,0,0,0)0deg, rgba(0,0,0,0)60deg, rgba(47,47,47,1.00)60deg, rgba(167,167,167,1.00)80deg, rgba(47,47,47,1.00)110deg, rgba(167,167,167,1.00)143deg, rgba(0,0,0,0)149deg, rgba(0,0,0,0)360deg);
	border-radius: 50%;
}
.es-2 {
	top: -37px;
	left: -13px;
	transform: rotate(23deg);
}

.couter {
	position: absolute;
	width: 60px;
	height: 60px;
	top: -10px;
	left: 50px;
	background-color: rgba(142,142,142,0.52);
	background: conic-gradient(from -90deg at 60% 60%, rgba(156,156,156,1.00)0deg, rgba(85,85,85,1.00)160deg, rgba(95,95,95,0.00)170deg, rgba(95,95,95,0.00)220deg, rgba(85,85,85,1.00)230deg, rgba(110,110,110,1.00)250deg, rgba(156,156,156,1.00)360deg);
	border-radius: 60% 40% 60% 50%;
}
.c-2 {
	top: 9px;
	left: 39px;
	transform: rotate(30deg);
}

.couter-flutes {
	position: absolute;
	width: 60px;
	height: 60px;
	top: 0px;
	left: 0px;
	background-color: rgba(142,142,142,0.00);
	border-width: 4px;
	border-style: solid;
	border-color: rgba(98,98,98,1.00) rgba(0,0,0,0.00) rgba(98,98,98,1.00) rgba(0,0,0,0.00);
	border-radius: 60% 40% 60% 50%;
	transform: scale(.6) rotate(10deg);
}
.couter-flutes::before {
	content: '';
	position: absolute;
	width: 60px;
	height: 60px;
	top: -6px;
	left: -6px;
	background-color: rgba(142,142,142,0.00);
	border-width: 3px;
	border-style: solid;
	border-color: rgba(98,98,98,1.00) rgba(0,0,0,0.00) rgba(98,98,98,1.00) rgba(0,0,0,0.00);
	border-radius: 60% 40% 60% 50%;
	transform: scale(1.2) rotate(10deg);
}

/* Forearm ^ */

/* Upper Arm: */

.arm-mail {
	position: absolute;
	width: 30px;
	height: 80px;
	top: 31px;
	left: 45px;
	background-color: rgba(55,55,55,1.00);
	border-radius: 50%
}

.arm-plate {
	position: absolute;
	width: 50px;
	height: 130px;
	top: 8px;
	left: 20px;
	background-color: rgba(123,123,123,0.82);
	background: linear-gradient(90deg, rgba(95,95,95,1.00)0%, rgba(104,104,104,1.00)20%, rgba(139,139,139,1.00)80%, rgba(132,132,132,1.00)100%);
	border-radius: 50% 20% 0% 0% / 40% 20% 0% 0%;
	border: 1px solid rgba(115,115,115,1.00);
}

.fp-arm-1 {
	top: 40px;
	left: 20px;
	transform: scale(.56) skewX(-10deg);
}
.fp-arm-2 {
	top: 46px;
	left: 20px;
	transform: scale(.56) skewX(-10deg);
}
.fp-arm-3 {
	top: 52px;
	left: 20px;
	transform: scale(.56) skewX(-10deg);
}
.fp-arm-4 {
	top: 58px;
	left: 20px;
	transform: scale(.56) skewX(-10deg);
}
.fp-arm-5 {
	top: 64px;
	left: 20px;
	transform: scale(.56) skewX(-10deg);
}

.fp-arm-6 {
	top: 105px;
	left: 20px;
	transform: scale(.4) skewX(-10deg);
}
.fp-arm-7 {
	top: 100px;
	left: 20px;
	transform: scale(.4) skewX(-10deg);
}
.fp-arm-8 {
	top: 95px;
	left: 20px;
	transform: scale(.4) skewX(-10deg);
}

.elbow-mail-right {
	position: absolute;
	width: 30px;
	height: 30px;
	top: 131px;
	left: 27px;
	background-color: rgba(93,93,93,1.00);
	border-radius: 50%;
}

/* Upper Arm ^ */

/* Torso: */

.shoulder-mail {
	position: absolute;
	width: 55px;
	height: 50px;
	top: -3px;
	left: 15px;
	background-color: rgba(55,55,55,1.00);
	border-radius: 20%;
	transform: rotate(-30deg);
}

.cuirass {
	position: absolute;
	width: 130px;
	height: 164px;
	top: 10px;
	left: 15px;
	background-color: rgba(138,138,138,1.00);
	border-radius: 20% 30% 20% 90% / 20% 70% 20% 60%;
}

.fp-cuirass-1 {
	top: 100px;
	left: 88px;
	transform: rotate(160deg) scale(1.3);
}
.fp-cuirass-2 {
	top: 105px;
	left: 91px;
	transform: rotate(159deg) scale(1.3);
}
.fp-cuirass-3 {
	top: 110px;
	left: 94px;
	transform: rotate(158deg) scale(1.29);
}
.fp-cuirass-4 {
	top: 115px;
	left: 97px;
	transform: rotate(157deg) scale(1.27);
}

.armpit-mail {
	position: absolute;
	width: 100px;
	height: 100px;
	top: -6px;
	left: -25px;
	background-color: rgba(55,55,55,1.00);
	border-radius: 50% 60% 40% 30%;
	transform: scale(.5) rotate(-25deg);
}

.armpit-guard {
	position: absolute;
	top: 13px;
	left: 42px;
	transform: rotateX(25deg) rotateY(25deg) rotateZ(0deg);
}
.ag-right {
	animation-name: ag;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;
}

.petal {
	position: absolute;
	width: 40px;
	height: 40px;
	background-color: rgba(174,173,227,0.59);
	background: conic-gradient(from 90deg, rgba(134,134,134,1.00)0%, rgba(82,82,82,1.00)30deg, rgba(110,110,110,0.00)30deg, rgba(106,106,106,0.00)330deg, rgba(82,82,82,1.00)330deg, rgba(134,134,134,1.00)360deg);
	border-radius: 50%;
	transform-origin: 50% 50%;
	
}
.petal-1 {
	transform: rotate(0deg) scaleX(1.5);
}
.petal-2 {
	transform: rotate(40deg) scaleX(1.5);
}
.petal-3 {
	transform: rotate(80deg) scaleX(1.5);
}
.petal-4 {
	transform: rotate(120deg) scaleX(1.5);
}
.petal-5 {
	transform: rotate(160deg) scaleX(1.5);
}
.petal-6 {
	transform: rotate(200deg) scaleX(1.5);
}
.petal-7 {
	transform: rotate(240deg) scaleX(1.5);
}
.petal-8 {
	transform: rotate(280deg) scaleX(1.5);
}
.petal-9 {
	transform: rotate(320deg) scaleX(1.5);
}
.ag-left {
	top: 8px;
	left: 110px;
	transform: rotateX(65deg) rotateY(65deg);
}

.waist-mail {
	position: absolute;
	width: 130px;
	height: 120px;
	top: 140px;
	left: 20px;
	background-color: rgba(55,55,55,1.00);
	border-radius: 25% 30% 50% 50% / 50% 60% 35% 40%;
	clip-path: border-box;
}
.laime1 {
	position: absolute;
	width: 150px;
	height: 200px;
	top: -151px;
	left: -5px;
	background-color: rgba(128,128,128,0.00);
	border-width: 16px;
	border-style: solid;
	border-color: rgba(128,128,128,1.00);
	border-radius: 0px 0px 30% 70% / 0px 0px 26% 35%;
}
.laime2 {
	position: absolute;
	width: 150px;
	height: 200px;
	top: -153px;
	left: -7px;
	background-color: rgba(128,128,128,0.00);
	border-width: 13px;
	border-style: solid;
	border-color: rgba(128,128,128,1.00);
	border-radius: 0px 0px 30% 70% / 0px 0px 26% 35%;
	transform: scale(1.2);
}
.laime3 {
	position: absolute;
	width: 145px;
	height: 200px;
	top: -156px;
	left: -7px;
	background-color: rgba(128,128,128,0.00);
	border-width: 10px;
	border-style: solid;
	border-color: rgba(128,128,128,1.00);
	border-radius: 0px 0px 30% 70% / 0px 0px 26% 35%;
	transform: scale(1.4);
}

.thigh-gap {
	position: absolute;
	width: 41px;
	height: 70px;
	top: 224px;
	left: 105px;
	background-color: rgba(28,255,244,0.00);
	border-radius: 90% 15% 70% 50% / 70% 30% 70% 50%;
	box-shadow: 0px -8px 0px 4px rgba(128,128,128,1.00), -9px -7px 0px 0px rgba(128,128,128,1.00);
}

.hip-guard-bottom {
	position: absolute;
	width: 70px;
	height: 70px;
	top: 294px;
	left: 10px;
	background-color: rgba(227,232,30,0.00);
	border-radius: 70%/40%;
	transform: rotate(16deg);
	box-shadow: 0px -10px 0px -2px rgba(128,128,128,1.00);
}
.hgb {
	top: 286px;
	left: 10px;
	transform: rotate(36deg) scale(.6);
	box-shadow: 0px -14px 0px -2px rgba(128,128,128,1.00);
}

.hgb-2 {
	top: 286px;
	left: 54px;
	transform: rotate(-29deg) scale(.45);
	box-shadow: 0px -14px 0px -2px rgba(128,128,128,1.00);
}

.hgb-3 {
	top: 265px;
	left: 75px;
	transform: rotate(-59deg) scale(.34);
	box-shadow: 0px -14px 0px -2px rgba(128,128,128,1.00);
}

.hgb-side {
	top: 235px;
	left: -30px;
	border-radius: 90%/40%;
	transform: rotate(80deg);
	box-shadow: 0px -10px 0px -2px rgba(128,128,128,1.00);
}

.hg-fill1 {
	position: absolute;
	width: 78px;
	height: 35px;
	top: 216px;
	left: 38px;
	background-color: rgba(128,128,128,1.00);
	transform: rotate(-10deg);
	border-radius: 20% 20% 50% 20%;
}
.hg-fill2 {
	position: absolute;
	width: 39px;
	height: 49px;
	top: 259px;
	left: 58px;
	background-color: rgba(128,128,128,1.00);
	transform: rotate(50deg);
}
.hg-fill3 {
	position: absolute;
	width: 55px;
	height: 90px;
	top: 209px;
	left: 46px;
	background-color: rgba(128,128,128,1.00);
	transform: rotate(5deg);
}
.hg-fill4 {
	position: absolute;
	width: 50px;
	height: 50px;
	bottom: 20px;
	left: -20px;
	background-color: rgba(128,128,128,1.00);
	transform: rotate(25deg);
}

.hip-flute1 {
	position: absolute;
	width: 20px;
	height: 60px;
	top: 240px;
	left: 30px;
	background-color: rgba(233,89,92,0.00);
	border-radius: 0px 15% 32% 0px / 0px 50% 50% 0px;
	border-right: 2px solid rgba(98,98,98,1.00);
	box-shadow: 8px -3px 9px -7px rgba(86,86,86,1.00);
	transform: rotate(19deg);
}

.hip-flute2 {
	position: absolute;
	width: 20px;
	height: 70px;
	top: 249px;
	left: 65px;
	background-color: rgba(233,89,92,0.00);
	border-radius: 26% 0px 0px 32% / 50% 0px 0px 50%;
	border-left: 2px solid rgba(98,98,98,1.00);
	box-shadow: -5px -1px 8px -6px rgba(86,86,86,1.00);
}

.hip-flute3 {
	position: absolute;
	width: 20px;
	height: 59px;
	top: 249px;
	left: 85px;
	background-color: rgba(233,89,92,0.00);
	border-radius: 26% 0px 0px 42% / 50% 0px 0px 50%;
	border-left: 2px solid rgba(98,98,98,1.00);
	box-shadow: -5px -1px 8px -6px rgba(86,86,86,1.00);
	transform: rotate(-14deg);
}

.hip-flute4 {
	position: absolute;
	width: 20px;
	height: 42px;
	top: 245px;
	left: 95px;
	background-color: rgba(233,89,92,0.00);
	border-radius: 26% 0px 0px 42% / 50% 0px 0px 50%;
	border-left: 2px solid rgba(98,98,98,1.00);
	box-shadow: -5px -1px 8px -6px rgba(86,86,86,1.00);
	transform: rotate(-24deg);
}

.hip-flute5 {
	position: absolute;
	width: 20px;
	height: 42px;
	top: 200px;
	left: 72px;
	background-color: rgba(233,89,92,0.00);
	border-radius: 26% 0px 0px 42% / 50% 0px 0px 50%;
	border-left: 2px solid rgba(150,150,150,0.70);
	box-shadow: -5px 0px 8px -4px rgba(147,147,147,1.00);
	transform: rotate(-80deg);
}

.hip-flute6 {
	position: absolute;
	width: 20px;
	height: 42px;
	top: 200px;
	left: 34px;
	background-color: rgba(233,89,92,0.00);
	border-radius: 26% 0px 0px 42% / 50% 0px 0px 50%;
	border-left: 2px solid rgba(150,150,150,0.70);
	box-shadow: -5px 0px 8px -4px rgba(147,147,147,1.00);
	transform: rotate(-94deg) scale(.5);
}

.hgb-left {
	top: 237px;
	left: 151px;
	border-radius: 90%/40%;
	transform: rotate(-90deg);
	box-shadow: 0px -16px 0px -10px rgba(128,128,128,1.00);
}
.hgb-left-bottom {
	top: 240px;
	left: 147px;
	border-radius: 90%/40%;
	transform: rotate(249deg) scaleX(.7);
	box-shadow: 0px -10px 0px -5px rgba(128,128,128,1.00);
}
.hgb-left-top {
	top: 209px;
	left: 80px;
	border-radius: 90%/30%;
	transform: rotate(90deg);
	box-shadow: 0px -9px 0px -4px rgba(128,128,128,1.00);
}

/* Torso ^ */

/* Fluting: */

.flute {
	position: absolute;
	width: 60px;
	height: 60px;
	top: 0px;
	left: 0px;
	background-color: rgba(142,142,142,0.00);
	border-width: 4px;
	border-style: solid;
	border-color: rgba(98,98,98,1.00) rgba(0,0,0,0.00) rgba(98,98,98,0.00) rgba(0,0,0,0.00);
	border-radius: 60% 40% 60% 50%;
	transform: scale(1);
}

.reverse {
	transform: scaleX(-1) translate(60%, 0%);
}

.flute-pair {
	position: absolute;
}

.flute-arches {
	position: absolute;
	width: 60px;
	height: 60px;
	top: 0px;
	left: 0px;
	background-color: rgba(142,142,142,0.00);
	border-width: 2px;
	border-style: solid;
	border-color: rgba(98,98,98,1.00) rgba(0,0,0,0.00) rgba(98,98,98,0.00) rgba(0,0,0,0.00);
	border-radius: 60% 40% 60% 50%;
	transform: scale(1) rotate(20deg);
}
.reverse-arches {
	transform: scaleX(-1) translate(40%, 0%) rotate(20deg);
}

.f-cuirass-side-1 {
	top: 26px;
	left: 85px;
	transform: rotate(170deg) rotateY(68deg) skewY(30deg) scale(.9, 1);
}
.f-cuirass-side-2 {
	top: 30px;
	left: 86px;
	transform: rotate(170deg) rotateY(68deg) skewY(30deg) scale(.9, 1);
}
.f-cuirass-side-3 {
	top: 34px;
	left: 87px;
	transform: rotate(170deg) rotateY(68deg) skewY(30deg) scale(.9, 1);
}
.f-cuirass-side-4 {
	top: 38px;
	left: 88px;
	transform: rotate(170deg) rotateY(68deg) skewY(30deg) scale(.9, 1);
}

.flute-armhole {
	position: absolute;
	width: 100px;
	height: 100px;
	background-color: rgba(142,142,142,0.00);
	border-width: 2px;
	border-style: solid;
	border-color: rgba(98,98,98,0.00) rgba(98,98,98,1.00) rgba(98,98,98,1.00) rgba(0,0,0,0.00);
	border-radius: 20% 60% 40% 40%;
	transform: scale(1);
}
.f-armhole-1 {
	top: -13px;
	left: -18px;
	transform: rotate(-10deg);
}
.f-armhole-2 {
	top: -13px;
	left: -17px;
	transform: rotate(-10deg) scale(1.07);
}
.f-armhole-3 {
	top: -11px;
	left: -14px;
	transform: rotate(-10deg) scale(1.12);
}

/* Fluting ^ */

/* Head: */

.gorget {
	position: absolute;
	width: 80px;
	height: 30px;
	top: 105px;
	left: 38px;
	background-color: rgba(118,118,118,1.00);
	border-radius: 0px 50% 10% 0px / 0px 90% 10% 0px;
	transform: rotate(26deg);
}
.gorget-left {
	position: absolute;
	width: 40px;
	height: 40px;
	top: 103px;
	left: 64px;
	background-color: rgba(118,118,118,1.00);
	transform: rotate(-14deg);
}

.bevor {
	position: absolute;
	width: 69px;
	height: 30px;
	top: 85px;
	left: 49px;
	background-color: rgba(140,140,140,1.00);
	background: linear-gradient(20deg, rgba(118,118,118,1.00)10%, rgba(140,140,140,1.00)100%);
	border-radius: 0px 10% 60% 0px / 0px 10% 60% 0px;
}

.helmet {
	position: absolute;
	width: 91px;
	height: 80px;
	top: 8px;
	left: 29px;
	background-color: rgba(158,158,158,1.00);
	background: linear-gradient(0deg, rgba(158,158,158,1.00)30%, rgba(176,176,176,1.00)100%);  /* rgba(176,176,176,1.00)100% */ /*rgba(176,176,176,1.00)62%, rgba(191,191,191,1.00)100%*/
	border-radius: 50% 50% 0px 0px;
}

.helmet-lighting {
	position: absolute;
	width: 48px;
	height: 16px;
	top: 14px;
	left: 86px;
	background-color: rgba(160,28,31,0.00);
	border-radius: 50% 50% 0px 0px / 90% 90% 0px 0px;
	box-shadow: -60px 0px 16px 0px rgba(225,225,225,0.64);
}

.helmet-angle {
	position: absolute;
	width: 118px;
	height: 30px;
	top: 62px;
	left: -25px;
	background-color: rgba(158,158,158,1.00);
	border-radius: 99% 0px 0% 70% / 70% 0px 0px 50%;
	transform: rotate(-7deg);
}

.helmet-back-curve {
	position: absolute;
	width: 45px;
	height: 50px;
	top: 31px;
	left: -49px;
	background-color: rgba(158,158,158,0.00);
	border-radius: 0px 0px 50% 50% / 0px 0px 20% 20%;
	transform: rotate(-45deg);
	box-shadow: 0px 8px 0px -2px rgba(158,158,158,1.00);
}

.visor-slit {
	position: absolute;
	width: 28px;
	height: 5px;
	top: 61px;
	right: 1px;
	background-color: rgba(51,51,51,1.00);
	transform: rotate(-2deg);
}

.visor {
	position: absolute;
	width: 60px;
	height: 20px;
	top: 64px;
	right: -7px;
	background-color: rgba(158,158,158,1.00);
	background: linear-gradient(15deg, rgba(0,0,0,0)60%, rgba(123,123,123,1.00)110%) rgba(158,158,158,1.00);
	transform: rotate(-2deg) skewX(10deg);
}

/* Head ^ */

/* Right Leg: */

.leg-mail {
	position: absolute;
	width: 60px;
	height: 80px;
	top: -14px;
	left: 39px;
	background-color: rgba(55,55,55,1.00);
	border-radius: 10% / 50%;
}

.cuisses {
	position: absolute;
	width: 59px;
	height: 120px;
	top: 40px;
	left: 36px;
	background-color: rgba(132,132,132,1.00);
	background: linear-gradient(90deg, rgba(67,67,67,1.00)0%, rgba(62,62,62,1.00)20%, rgba(116,116,116,1.00)90%);
	border-radius: 50% 0px 50% 30% / 10% 0px 10% 30%;
	border-bottom: 2px solid rgba(55,55,55,1.00);  /* rgba(98,98,98,1.00) */
	transform-style: preserve-3d;
	transform: rotateX(-45deg);
}

.greaves {
	position: absolute;
	width: 33px;
	height: 120px;
	top: 190px;
	left: 30px;
	background-color: rgba(107,107,107,1.00);
	/*background: linear-gradient(90deg, rgba(67,67,67,1.00)0%, rgba(62,62,62,1.00)20%, rgba(116,116,116,1.00)90%);*/
	/*border-radius: 50% 0px 50% 30% / 10% 0px 10% 30%;*/
	border-bottom: 2px solid rgba(55,55,55,1.00);  /* rgba(98,98,98,1.00) */
	transform-style: preserve-3d;
	transform: rotateX(-35deg) rotateZ(4deg);
}

.ankle-right {
	position: absolute;
	width: 33px;
	height: 100px;
	top: 240px;
	left: 29px;
	background-color: rgba(107,107,107,1.00);
	transform-style: preserve-3d;
	transform: rotateX(100deg) rotateZ(-4deg);
}

.knee-bottom {
	position: absolute;
	width: 46px;
	height: 60px;
	top: 170px;
	left: 25px;
	background-color: rgba(107,107,107,1.00);
	border-radius: 50% 50% 50% 50% / 10% 10% 50% 50%;
	border-top: 2px solid rgba(55,55,55,1.00);
	transform: rotate(20deg);
}

.knee {
	position: absolute;
	width: 50px;
	height: 50px;
	top: 136px;
	left: 44px;
	background-color: rgba(107,107,107,1.00);
	border-radius: 30%;
	transform: rotate(75deg);
}

.c-r-leg {
	top: 120px;
	left: 10px;
	transform: scale(-1, 1) rotate(-45deg);
}

.heel-right {
	position: absolute;
	width: 60px;
	height: 40px;
	top: 310px;
	left: 20px;
	background-color: rgba(107,107,107,1.00);
	border-radius: 30% 70% 0% 70% / 30% 50% 0% 20%;
	transform: rotate(15deg);
}

.ankle-curve {
	position: absolute;
	width: 60px;
	height: 50px;
	top: 281px;
	left: 62px;
	background-color: rgba(92,208,113,0.00);
	border-radius: 50%;
	box-shadow: -1px 18px 0px -10px rgba(107,107,107,1.00);
	transform: rotate(47deg);
}

.foot-toe {
	position: absolute;
	width: 48px;
	height: 34px;
	top: 329px;
	left: 54px;
	background-color: rgba(107,107,107,1.00);
	border-radius: 10% 60% 10% 50% / 10% 70% 10% 50%;
	transform: rotate(6deg);
}

.toe-spike {
	position: absolute;
	width: 30px;
	height: 12px;
	top: 355px;
	left: 84px;
	background-color: rgba(107,107,107,1.00);
	border-radius: 5% 90% 90% 10% / 5% 50% 50% 10%;
	transform: rotate(40deg);
}

.ankle-edge-side {
	position: absolute;
	width: 16px;
	height: 30px;
	top: 300px;
	left: 21px;
	background-color: rgba(171,34,36,0.00);
	border-radius: 50%;
	border-width: 2px 2px 2px 2px;
	border-style: solid;
	border-color: rgba(55,55,55,0.00) rgba(55,55,55,0.00) rgba(55,55,55,1.00) rgba(55,55,55,1.00);
}

.ankle-edge-top {
	position: absolute;
	width: 24px;
	height: 38px;
	top: 301px;
	left: 41px;
	background-color: rgba(171,34,36,0.00);
	border-radius: 50% 50% 5% 5% / 90% 90% 5% 5%;
	border-width: 1px 2px 2px 2px;
	border-style: solid;
	border-color: rgba(55,55,55,1.00) rgba(55,55,55,0.00) rgba(55,55,55,0.00) rgba(55,55,55,1.00);
	transform: rotate(40deg)
}

.foot-laime1 {
	position: absolute;
	width: 30px;
	height: 38px;
	top: 310px;
	left: 40px;
	background-color: rgba(171,34,36,0.00);
	border-radius: 50% 50% 5% 5% / 90% 90% 5% 5%;
	border-width: 1px 2px 2px 2px;
	border-style: solid;
	border-color: rgba(79,79,79,1.00) rgba(55,55,55,0.00) rgba(55,55,55,0.00) rgba(79,79,79,1.00);
}

.foot-laime2 {
	position: absolute;
	width: 26px;
	height: 32px;
	top: 318px;
	left: 47px;
	background-color: rgba(171,34,36,0.00);
	border-radius: 50% 50% 5% 5% / 90% 90% 5% 5%;
	border-width: 1px 2px 2px 2px;
	border-style: solid;
	border-color: rgba(79,79,79,1.00) rgba(55,55,55,0.00) rgba(55,55,55,0.00) rgba(79,79,79,1.00);
}

.foot-laime1-o-side {
	position: absolute;
	width: 5px;
	height: 8px;
	top: 308px;
	left: 61px;
	background-color: rgba(171,34,36,0.00);
	border-radius: 50% 30% 50% 50%;
	border-width: 1px 2px 2px 1px;
	border-style: solid;
	border-color: rgba(79,79,79,1.00) rgba(55,55,55,0.00) rgba(55,55,55,0.00) rgba(79,79,79,1.00);
	transform: rotate(10deg);
}

.foot-laime2-o-side {
	position: absolute;
	width: 5px;
	height: 7px;
	top: 317px;
	left: 65px;
	background-color: rgba(171,34,36,0.00);
	border-radius: 50% 30% 50% 50%;
	border-width: 1px 2px 2px 1px;
	border-style: solid;
	border-color: rgba(79,79,79,1.00) rgba(55,55,55,0.00) rgba(55,55,55,0.00) rgba(79,79,79,1.00);
	transform: rotate(40deg);
}

.foot-laime3 {
	position: absolute;
	width: 30px;
	height: 30px;
	top: 334px;
	left: 58px;
	background-color: rgba(232,65,67,0.00);
	border-radius: 0px 0px 0px 60%;
	border-width: 2px 2px 0px 2px;
	border-style: solid;
	border-color: rgba(79,79,79,0.00) rgba(79,79,79,0.00) rgba(79,79,79,0.00) rgba(79,79,79,1.00);
	transform: rotate(45deg);
}

.foot-laime4 {
	position: absolute;
	width: 29px;
	height: 29px;
	top: 336px;
	left: 62px;
	background-color: rgba(232,65,67,0.00);
	border-radius: 0px 0px 0px 60%;
	border-width: 2px 2px 0px 2px;
	border-style: solid;
	border-color: rgba(79,79,79,0.00) rgba(79,79,79,0.00) rgba(79,79,79,0.00) rgba(79,79,79,1.00);
	transform: rotate(45deg);
}
.foot-laime5 {
	position: absolute;
	width: 28px;
	height: 28px;
	top: 338px;
	left: 66px;
	background-color: rgba(232,65,67,0.00);
	border-radius: 0px 0px 0px 60%;
	border-width: 2px 2px 0px 2px;
	border-style: solid;
	border-color: rgba(79,79,79,0.00) rgba(79,79,79,0.00) rgba(79,79,79,0.00) rgba(79,79,79,1.00);
	transform: rotate(45deg);
}

.foot-laime3-o-side {
	position: absolute;
	width: 10px;
	height: 10px;
	top: 329px;
	left: 72px;
	background-color: rgba(231,68,70,0.00);
	border-top: 1px solid rgba(89,89,89,1.00);
	transform: rotate(10deg);
}
.foot-laime4-o-side {
	position: absolute;
	width: 10px;
	height: 10px;
	top: 331px;
	left: 74px;
	background-color: rgba(231,68,70,0.00);
	border-top: 1px solid rgba(89,89,89,1.00);
	transform: rotate(10deg);
}
.foot-laime5-o-side {
	position: absolute;
	width: 10px;
	height: 10px;
	top: 334px;
	left: 79px;
	background-color: rgba(231,68,70,0.00);
	border-top: 1px solid rgba(89,89,89,1.00);
	transform: rotate(10deg);
}

.foot-lighting {
	position: absolute;
	width: 14px;
	height: 40px;
	top: 295px;
	left: 79px;
	background-color: rgba(228,82,84,0.00);
	border-radius: 5% 5% 50% 50% / 5% 5% 90% 90%;
	box-shadow: -30px 0px 14px 0px rgba(168,168,168,1.00);
	transform: rotate(-45deg);
}

.ankle-lighting {
	position: absolute;
	width: 18px;
	height: 20px;
	top: 295px;
	left: 61px;
	background-color: rgba(228,82,84,0.00);
	border-radius: 5% 5% 50% 50% / 5% 5% 90% 90%;
	box-shadow: -30px 0px 14px 0px rgba(90,90,90,1.00);
	transform: rotate(0deg);
}

.calf-lighting {
	position: absolute;
	width: 28px;
	height: 20px;
	top: 190px;
	left: 54px;
	background-color: rgba(228,82,84,0.00);
	border-radius: 5% 5% 50% 50% / 5% 5% 90% 90%;
	box-shadow: 0px 30px 10px 0px rgba(90,90,90,1.00);
	transform: rotate(90deg);
}

.kbl {
	top: 177px;
	left: 24px;
	background-color: rgba(107,107,107,0.00);
	border-top: 2px solid rgba(68,68,68,1.00);
}

.kblc {
	top: 79px;
	left: 42px;
	background-color: rgba(107,107,107,0.00);
	border-top: 2px solid rgba(68,68,68,1.00);
	transform: rotate(174deg);
}

.c-flute1 {
	position: absolute;
	width: 40px;
	height: 20px;
	top: 26px;
	left: 14px;
	background-color: rgba(168,34,36,0.00);
	border-radius: 50%;
	border-bottom: 2px solid rgba(81,81,81,1.00);
	transform: skewY(10deg);
}
.c-flute2 {
	position: absolute;
	width: 40px;
	height: 20px;
	top: 34px;
	left: 13px;
	background-color: rgba(168,34,36,0.00);
	border-radius: 50%;
	border-bottom: 2px solid rgba(81,81,81,1.00);
	transform: skewY(10deg);
}
.c-flute3 {
	position: absolute;
	width: 40px;
	height: 20px;
	top: 42px;
	left: 12px;
	background-color: rgba(168,34,36,0.00);
	border-radius: 50%;
	border-bottom: 2px solid rgba(81,81,81,1.00);
	transform: skewY(10deg);
}

.knee-lighting {
	position: absolute;
	width: 20px;
	height: 10px;
	top: 170px;
	left: 58px;
	background-color: rgba(228,82,84,0.00);
	border-radius: 5% 5% 50% 50% / 5% 5% 90% 90%;
	box-shadow: 0px 30px 6px 0px rgba(155,155,155,1.00);
	transform: rotate(210deg);
}

/* Right Leg ^ */

/* Left Leg: */

.cuisses-left {
	position: absolute;
	width: 54px;
	height: 80px;
	top: 73px;
	left: 30px;
	background-color: rgba(132,132,132,1.00);
	background: linear-gradient(90deg, rgba(67,67,67,1.00)0%, rgba(62,62,62,1.00)20%, rgba(116,116,116,1.00)90%);
	border-radius: 5% 0px 50% 10% / 5% 0px 10% 10%;
	border-bottom: 2px solid rgba(55,55,55,1.00);  /* rgba(98,98,98,1.00) */
	transform-style: preserve-3d;
	transform: rotateZ(-19deg)rotateX(-35deg);
}

.cuisses-left-top {
	position: absolute;
	width: 67px;
	height: 80px;
	top: 3px;
	left: 10px;
	background-color: rgba(132,132,132,1.00);
	background: linear-gradient(90deg, rgba(64,64,64,1.00)0%, rgba(59,59,59,1.00)20%, rgba(113,113,113,1.00)90%);
	border-radius: 50% 0px 50% 10% / 10% 0px 10% 10%;
	border-bottom: 2px solid rgba(55,55,55,1.00);  /* rgba(98,98,98,1.00) */
	transform-style: preserve-3d;
	transform: rotateZ(-2deg)rotateX(-35deg);
}

.knee-left {
	position: absolute;
	width: 50px;
	height: 50px;
	top: 126px;
	left: 49px;
	background-color: rgba(107,107,107,1.00);
	border-radius: 30% 30% 30% 30%;
	transform: rotate(45deg);
}

.greaves-left {
	position: absolute;
	width: 33px;
	height: 120px;
	top: 190px;
	left: 50px;
	background-color: rgba(107,107,107,1.00);
	/*background: linear-gradient(90deg, rgba(67,67,67,1.00)0%, rgba(62,62,62,1.00)20%, rgba(116,116,116,1.00)90%);*/
	/*border-radius: 50% 0px 50% 30% / 10% 0px 10% 30%;*/
	/*border-bottom: 2px solid rgba(55,55,55,1.00);*/  /* rgba(98,98,98,1.00) */
	transform-style: preserve-3d;
	transform: rotateX(-40deg) rotateZ(-1deg);
}

.ankle-left {
	position: absolute;
	width: 36px;
	height: 125px;
	top: 233px;
	left: 50px;
	background-color: rgba(107,107,107,1.00);
	border-radius: 0px 0px 0px 15%;
	transform-style: preserve-3d;
	transform: rotateX(100deg) rotateZ(0deg);
}

.knee-bottom-left {
	position: absolute;
	width: 47px;
	height: 70px;
	top: 160px;
	left: 42px;
	background-color: rgba(107,107,107,1.00);
	border-radius: 50% 50% 30% 50% / 10% 10% 50% 50%;
	border-top: 2px solid rgba(55,55,55,1.00);
	transform: rotate(8deg);
}

.c-l-leg {
	top: 129px;
	left: 28px;
	transform: scale(-1, 1) rotate(-25deg);
}

.kbllg {
	top: 155px;
	left: 54px;
	background-color: rgba(107,107,107,0.00);
	border-top: 4px solid rgba(68,68,68,1.00);
	transform: rotate(15deg) scale(.5);
}

.kbllc {
	top: 89px;
	left: 48px;
	background-color: rgba(107,107,107,0.00);
	border-top: 4px solid rgba(68,68,68,1.00);
	transform: rotate(155deg) scale(.5);
}

.kbllk {
	width: 36px;
	top: 124px;
	left: 25px;
	background-color: rgba(107,107,107,0.00);
	transform: rotate(87deg)
}

.heel-left {
	position: absolute;
	width: 60px;
	height: 36px;
	top: 303px;
	left: 51px;
	background-color: rgba(107,107,107,1.00);
	border-radius: 30% 70% 0% 70% / 30% 50% 0% 20%;
	transform: rotate(0deg);
}

.foot-toe-left {
	position: absolute;
	width: 54px;
	height: 29px;
	top: 310px;
	left: 94px;
	background-color: rgba(107,107,107,1.00);
	border-radius: 0px 60% 50% 5% / 0px 60% 50% 5%;
	transform: rotate(1deg);
}

.toe-spike-left {
	position: absolute;
	width: 70px;
	height: 20px;
	top: 316px;
	left: 97px;
	background-color: rgba(107,107,107,1.00);
	border-radius: 5% 60% 90% 10% / 5% 70% 30% 10%;
	transform: rotate(9deg);
}

.ankle-curve-left {
	position: absolute;
	width: 60px;
	height: 50px;
	top: 259px;
	left: 80px;
	background-color: rgba(92,208,113,0.00);
	border-radius: 50%;
	box-shadow: -1px 19px 0px -9px rgba(107,107,107,1.00); /* rgba(107,107,107,1.00) */
	transform: rotate(35deg);
}

.ankle-edge-left {
	position: absolute;
	width: 38px;
	height: 34px;
	top: 283px;
	left: 50px;
	background-color: rgba(171,34,36,0.00);
	border-radius: 20% 20% 30% 30% / 50% 20% 30% 50%;
	border-width: 2px 2px 2px 2px;
	border-style: solid;
	border-color: rgba(55,55,55,0.00) rgba(55,55,55,0.00) rgba(62,62,62,1.00) rgba(62,62,62,1.00);
	transform: rotate(-40deg);
}

.foot-plate1 {
	position: absolute;
	width: 20px;
	height: 30px;
	top: 308px;
	left: 77px;
	background-color: rgba(231,91,93,0.00);
	border-radius: 40% 40% 0px 0px / 90% 90% 0px 0px;
	border-left: 2px solid rgba(79,79,79,1.00);
}
.foot-plate2 {
	position: absolute;
	width: 14px;
	height: 32px;
	top: 307px;
	left: 84px;
	background-color: rgba(231,91,93,0.00);
	border-radius: 60% 20% 0px 0px / 90% 90% 0px 0px;
	border-width: 2px;
	border-style: solid;
	border-color: rgba(79,79,79,1.00) rgba(79,79,79,0.00) rgba(79,79,79,0.00) rgba(79,79,79,1.00);
}
.foot-plate3 {
	position: absolute;
	width: 14px;
	height: 29px;
	top: 310px;
	left: 94px;
	background-color: rgba(231,91,93,0.00);
	border-radius: 0px 60% 20% 0px / 0px 50% 50% 0px;
	border-right: 2px solid rgba(79,79,79,1.00);
	transform: rotate(20deg);
}
.foot-plate4 {
	position: absolute;
	width: 14px;
	height: 29px;
	top: 310px;
	left: 101px;
	background-color: rgba(231,91,93,0.00);
	border-radius: 0px 60% 20% 0px / 0px 50% 50% 0px;
	border-right: 2px solid rgba(79,79,79,1.00);
	transform: rotate(20deg);
}
.foot-plate5 {
	position: absolute;
	width: 14px;
	height: 29px;
	top: 310px;
	left: 108px;
	background-color: rgba(231,91,93,0.00);
	border-radius: 0px 60% 20% 0px / 0px 50% 50% 0px;
	border-right: 2px solid rgba(79,79,79,1.00);
	transform: rotate(20deg);
}

.knee-lighting-left {
	position: absolute;
	width: 20px;
	height: 10px;
	top: 165px;
	left: 70px;
	background-color: rgba(228,82,84,0.00);
	border-radius: 5% 5% 50% 50% / 5% 5% 90% 90%;
	box-shadow: 0px 30px 6px 0px rgba(155,155,155,1.00);
	transform: rotate(190deg);
}

.knee-shading-left {
	position: absolute;
	width: 20px;
	height: 20px;
	top: 173px;
	left: 42px;
	background-color: rgba(228,82,84,0.00);
	border-radius: 5% 5% 50% 50% / 5% 5% 90% 90%;
	box-shadow: 0px 30px 6px 0px rgba(77,77,77,1.00);
	transform: rotate(190deg);
}

.calf-lighting-left {
	position: absolute;
	width: 34px;
	height: 20px;
	top: 187px;
	left: 70px;
	background-color: rgba(228,82,84,0.00);
	border-radius: 5% 5% 50% 50% / 5% 5% 90% 90%;
	box-shadow: 0px 30px 12px 0px rgba(83,83,83,1.00);
	transform: rotate(95deg);
}

.calf-lighting-left2 {
	position: absolute;
	width: 84px;
	height: 16px;
	top: 237px;
	left: 53px;
	background-color: rgba(228,82,84,0.00);
	border-radius: 50% 50% 5% 5% / 50% 50% 5% 5%;
	box-shadow: 0px 30px 12px -1px rgba(83,83,83,1.00);
	transform: rotate(86deg);
}

.ankle-lighting-left {
	position: absolute;
	width: 18px;
	height: 20px;
	top: 295px;
	left: 84px;
	background-color: rgba(228,82,84,0.00);
	border-radius: 5% 5% 50% 50% / 5% 5% 90% 90%;
	box-shadow: -30px 0px 14px 0px rgba(90,90,90,1.00);
	transform: rotate(0deg);
}

.foot-lighting-left {
	position: absolute;
	width: 10px;
	height: 48px;
	top: 270px;
	left: 114px;
	background-color: rgba(228,82,84,0.00);
	border-radius: 5% 5% 45% 45% / 5% 5% 90% 90%;
	box-shadow: -30px 0px 12px 0px rgba(168,168,168,1.00);
	transform: rotate(-82deg);
}


/* Left Leg ^ */

/* Left Arm: */

.lb {
	top: 110px;
	left: 30px;
	transform: rotateX(0deg) rotateZ(-15deg);
}
.lbt {
	top: 40px;
	left: 20px;
	transform: rotateX(0deg) rotateZ(-5deg);
}

.elbow-mail-left {
	position: absolute;
	width: 30px;
	height: 30px;
	top: 114px;
	left: 34px;
	background-color: rgba(55,55,55,1.00);
	border-radius: 30%;
	transform: rotate(-10deg);
}

.left-couter {
	position: absolute;
	width: 40px;
	height: 40px;
	top: 80px;
	left: 20px;
	background-color: rgba(224,50,53,0.00);
	border-radius: 50%;
	box-shadow: 6px 8px 0px -1px rgba(163,163,163,1.00);
}
.left-couter2 {
	position: absolute;
	width: 40px;
	height: 40px;
	top: 124px;
	left: 33px;
	background-color: rgba(224,50,53,0.00);
	border-radius: 50%;
	box-shadow: -1px -10px 0px -1px rgba(163,163,163,1.00);
}
.left-couter3 {
	position: absolute;
	width: 20px;
	height: 40px;
	top: 90px;
	left: 65px;
	background-color: rgba(224,50,53,0.00);
	border-radius: 10%;
	box-shadow: -5px 1px 0px -3px rgba(163,163,163,1.00), -12px 1px 0px -9px rgba(163,163,163,1.00);
	transform: rotate(-14deg);
}
.left-couter4 {
	position: absolute;
	width: 10px;
	height: 5px;
	top: 118px;
	left: 56px;
	background-color: rgba(255,0,0,0.00);
	border-top: 1px solid rgba(85,85,85,1.00);
	transform: rotate(-20deg);
}

/* Left Arm ^ */

/* Animations: */

@keyframes right-upper-arm {
	0% {transform: rotate(10deg);}
	80% {transform: rotate(10deg);}
	89% {transform: rotate(-80deg);}
	94% {transform: rotate(20deg);}
	100% {transform: rotate(10deg);}
} /* rotate(10deg) rotate(-80deg) rotate(20deg) rotate(10deg) */

@keyframes right-forearm {
	0% {transform: rotate(-26deg);}
	80% {transform: rotate(-26deg);}
	89% {transform: rotate(-89deg);}
	94% {transform: rotate(-9deg);}
	100% {transform: rotate(-26deg);}
} /* rotate(-26deg) rotate(-89deg) rotate(-9deg) rotate(-26deg) */

@keyframes right-hand {
	0% {transform: rotate(-1deg);}
	80% {transform: rotate(-1deg);}
	89% {transform: rotate(-7deg);}
	94% {transform: rotate(23deg);}
	100% {transform: rotate(-1deg);}
} /* rotate(-1deg) rotate(-7deg) rotate(23deg) rotate(-1deg) */

@keyframes sword {
	0% {transform: rotate(6deg);}
	80% {transform: rotate(6deg);}
	89% {transform: rotate(-6deg);}
	94% {transform: rotate(9deg);}
	100% {transform: rotate(6deg);}
} /* rotate(6deg) rotate(-6deg) rotate(9deg) rotate(6deg) */

@keyframes ag {
	0% {top: 13px; left: 42px; transform: rotateX(25deg) rotateY(25deg) rotateZ(0deg);}
	80% {top: 13px; left: 42px; transform: rotateX(25deg) rotateY(25deg) rotateZ(0deg);}
	89% {top: 10px; left: 46px; transform: rotateX(55deg) rotateY(35deg) rotateZ(-10deg);}
	94% {top: 13px; left: 42px; transform: rotateX(25deg) rotateY(25deg) rotateZ(0deg);}
	100% {top: 13px; left: 42px; transform: rotateX(25deg) rotateY(25deg) rotateZ(0deg);}
}


@keyframes right-upper-arm-2 {
	0% {transform: rotate(-29deg);}
	66% {transform: rotate(-29deg);}
	82.5% {transform: rotate(-39deg);}
	100% {transform: rotate(-29deg);}
} /* rotate(-29deg) rotate(-31deg) */

@keyframes right-hand-2 {
	0% {transform: rotate(20deg);}
	66% {transform: rotate(20deg);}
	82.5% {transform: rotate(29deg);}
	100% {transform: rotate(20deg);}
} /* rotate(20deg) rotate(22deg) */

/* Animations ^ */

/* Media Queries: */

@media screen and (min-width: 1800px) {
	.main-content {
		width: 60%;
	}
	
	.art-box {
		width: 40%;
	}
	
	.frame {
		left: 30%;
	}
}

@media screen and (max-width: 1800px) {
	.frame {
		left: 30%;
	}
}

@media screen and (max-width: 1300px) {
	h4 {
		font-size: 16px;
	}
	
	.frame {
		left: 30%;
		transform: translate(-50%, 0%) scale(.8);
	}
	
	.navbar ul li {
		margin-left: 16px;
	}
	
	.logo-text {
		width: 120px;
	}
}

@media screen and (max-width: 1180px) {
	h4 {
		font-size: 16px;
	}
	
	.nav {
		width: 90%;
	}
	
	.navbar ul li {
		margin-left: 14px;
	}
	
	.navbar ul li a {
		padding: 8px 14px;
	}
	
	.main {
		width: 90%;
	}
	
	.frame {
		left: 30%;
		transform: translate(-50%, 0%) scale(.8);
	}
	
	.logo-text {
		width: 120px;
	}
}

@media screen and (max-width: 980px) {
	h4 {
		font-size: 16px;
	}
	
	.nav {
		width: 100%;
		padding-left: 3%;
	}
	
	.navbar {
		top: 24px;
		z-index: 9999;
	}

	.menu-overlay {
		display: block;
		position: fixed;
		inset: 0px;
		background-color: rgba(0, 0, 0, 0.25);
		z-index: 999;
		transition: opacity 0.2s ease;
	}
	
	.navbar ul {
		background-color: var(--main-blue-color);
	}

	.navbar.responsive ul {
		position: fixed;
		right: 0;
		top: 0px;
		height: 100%;
		padding-top: 24px;
	}
	
	.navbar ul li {
		float: none;
		margin: 10px 0px 10px 14px;
	}
	
	.navbar ul li a {
		padding: 8px 14px;
	}
	
	.navbar ul li a {
		display: none;
	}
	
	.navbar.responsive ul li a {
		display: flex;
	}
	
	.icon {
		display: flex;
		padding: 8px 17px;
		justify-content: flex-end;
		align-items: center;
		text-decoration: none;
		font-family: "Jacques Francois", serif;
		font-weight: 400;
		font-style: normal;
		font-size: 24px;
		color: rgba(255,255,255,1.00);
	}
	
	.main {
		width: 90%;
	}
	
	.main-content {
		width: 100%;
		margin-top: 310px;
	}
	
	.logo-main {
		display: none;
		/*transform: scale(.7) translate(0%, 30%);*/
	}
	
	.art-box {
		float: none;
		height: 600px;
		margin: auto;
		background-color: rgba(238,238,238,0.00);
	}
	
	.frame {
		left: 50%;
		transform: translate(-50%, -30%) scale(.4);
	}
	
	.logo-text {
		width: 120px;
	}
}

@media screen and (min-width: 980px) {
	.frame-2 {
		display: block;
		top: 1350px;
		left: 12%;
	}
}

.hide {
	display: none;
}