/*
================================================================================
BOXXED TITLES STANDARD
================================================================================
*/
:root{
--title-size: 4rem;
--gap-size: 0.75rem;
--bg-color: #000;
--color: #fff;
--offset: calc(var(--title-size) / 6.4);
--spread: calc(var(--title-size) / 9.1);
--mg-bottom: calc(25px - var(--gap-size));
}

.boxed-title{
	font-size: var(--title-size);
	font-weight: 600;
	/* matches the box shadow */
	position: relative;
	top: calc(-1 * (var(--gap-size)) / 2);
	margin-left: calc(var(--offset) + var(--spread));
	margin-right: calc(var(--offset) + var(--spread));
	margin-bottom: var(--mg-bottom);
}

.boxed-title > span{
	text-transform: uppercase;
	background-color: var(--bg-color);
	color: var(--color);
	box-shadow:
	/* left */
	calc(-1 * var(--offset)) 0 0 var(--spread) var(--bg-color),
	/* right */
	var(--offset) 0px 0 var(--spread) var(--bg-color),
	/* top and bottom ( profit from the 7px ) */
	0 0 0 0px var(--bg-color);
	box-decoration-break: clone;

	/* font-size + margin + space inbetween times two */
	line-height: calc( var(--title-size) + (var(--spread) * 2) + (var(--gap-size) * 2));
}
@media only screen and (max-width: 1000px) {
	:root{
		--title-size: 48px;
		--gap-size: 8px;
		--bg-color: #000;
		--color: #fff;
		--offset: calc(var(--title-size) / 6.4);
		--spread: calc(var(--title-size) / 9.1);
		--mg-bottom: 0px;
	}
}
/*
================================================================================
VANILLA TITLES
================================================================================
*/
h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6{
	font-weight: 600;
	line-height: 1.3em;
	text-transform: uppercase;
}
h1,.h1{
	font-size: 3rem;
}
h2,.h2{
	font-size: 2.66rem;
}
h3,.h3{
	font-size: 2.33rem;
}
h4,.h4{
	font-size: 2rem;
}
h5,.h5{
	font-size: 1.66rem;
}
h6,.h6{
	font-size: 1.33rem;
}
/*
================================================================================
FADE IN ANIMATION
================================================================================
*/
.fade-in {
	animation: 1s ease-out 0s 1 fadeIn;
	-webkit-animation: 1s ease-out 0s 1 fadeIn;
	-moz-animation: 1s ease-out 0s 1 fadeIn;
	-o-animation: 1s ease-out 0s 1 fadeIn;
	-ms-animation: 1s ease-out 0s 1 fadeIn;
}
@keyframes fadeIn{0%{opacity:0;transform: translateX(-20%);}
10%{opacity:0;}75%{opacity: 100%;}100%{transform: translateX(0);}}
@-moz-keyframes fadeIn{0%{opacity:0;transform: translateX(-20%);}
10%{opacity:0;}75%{opacity: 100%;}100%{transform: translateX(0);}}
@-webkit-keyframes fadeIn{0%{opacity:0;transform: translateX(-20%);}
10%{opacity:0;}75%{opacity: 100%;}100%{transform: translateX(0);}}
@-o-keyframes fadeIn{0%{opacity:0;transform: translateX(-20%);}
10%{opacity:0;}75%{opacity: 100%;}100%{transform: translateX(0);}}
@-ms-keyframes fadeIn{0%{opacity:0;transform: translateX(-20%);}
10%{opacity:0;}75%{opacity: 100%;}100%{transform: translateX(0);}}

@media only screen and (max-width: 1000px) {
	.fade-in {
		animation: none;
		-webkit-animation: none;
		-moz-animation: none;
		-o-animation: none;
		-ms-animation: none;
	}
}
/*
================================================================================
CAPS LOCK
================================================================================
*/
/* CAPSLOCK */
.capslock-up{
	text-transform: uppercase;
}

.capslock-down{
	text-transform: lowercase;
}
/*
================================================================================
KIYOH
================================================================================
*/
:root {
	--kiyoh-shape: 50px;
}
.kiyoh-shape{
	margin: 5px 5px;
	float: left;
	position: relative;
	background-image: url('../images/footer/kv_shape_background.svg');
	background-size: cover;
	width: var(--kiyoh-shape);
	height: var(--kiyoh-shape);
	font-size: var(--kiyoh-shape);
}
.kiyoh-shape span{
	color: #000;
	position: absolute;
	font-size: 0.3em;
	/* font-weight: bold; */
	font-weight: 500;
	line-height: 0.3em;
	display: inline-block;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-60%);
}

.star-rating{
	color: orange;
}
/*
================================================================================
BUTTON
================================================================================
*/

.button{
	color: #000;
	text-decoration: none;
	font-size: 1.25rem;
	display: inline-block;
	padding: 0.75em;
	border-radius: 2px;
}
.button:not(:last-child){
	margin-right: 25px;
}
.button--underline{
	display: inline-block;
	padding: 0.75em 0;
	color: #fff;
	border-bottom: 2px solid #fff;
	/*  removing some of the padding so the height of the buttons dont have to be set */
	padding-bottom: calc(0.75em - 2px);
}
.button--underline::after{
	content: " >";
}
.button--underline:hover{
	border-color: #000;
	color: #000;
}
.button--boxed{
	background-color: #000;
	color: #fff;
}
.button--boxed:hover{
	color: #000;
	background-color: #fff;
}
/*
================================================================================
MISC
================================================================================
*/
@media only screen and (min-width: 1001px) {
	.responsive-show{
		float: none !important;
		display: none !important;
	}
}
@media only screen and (max-width: 1000px) {
	.responsive-hide{
		float: none !important;
		display: none !important;
	}
}