/*
Fonts
*/

/* inter-300 - latin */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	src: url('../webfonts/inter-v12-latin-300.eot');
	src: local(''),
		url('../webfonts/inter-v12-latin-300.eot?#iefix') format('embedded-opentype'),
		url('../webfonts/inter-v12-latin-300.woff2') format('woff2'),
		url('../webfonts/inter-v12-latin-300.woff') format('woff'),
		url('../webfonts/inter-v12-latin-300.ttf') format('truetype'),
		url('../webfonts/inter-v12-latin-300.svg#Inter') format('svg');
}

/* inter-regular - latin */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: url('../webfonts/inter-v12-latin-regular.eot');
	src: local(''),
		url('../webfonts/inter-v12-latin-regular.eot?#iefix') format('embedded-opentype'),
		url('../webfonts/inter-v12-latin-regular.woff2') format('woff2'),
		url('../webfonts/inter-v12-latin-regular.woff') format('woff'),
		url('../webfonts/inter-v12-latin-regular.ttf') format('truetype'),
		url('../webfonts/inter-v12-latin-regular.svg#Inter') format('svg');
}

/* inter-500 - latin */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	src: url('../webfonts/inter-v12-latin-500.eot');
	src: url('../webfonts/inter-v12-latin-500.eot?#iefix') format('embedded-opentype'),
			url('../webfonts/inter-v12-latin-500.woff2') format('woff2'),
			url('../webfonts/inter-v12-latin-500.woff') format('woff'),
			url('../webfonts/inter-v12-latin-500.ttf') format('truetype'),
			url('../webfonts/inter-v12-latin-500.svg#Inter') format('svg');
}

/* inter-700 - latin */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	src: url('../webfonts/inter-v12-latin-700.eot');
	src: local(''),
		url('../webfonts/inter-v12-latin-700.eot?#iefix') format('embedded-opentype'),
		url('../webfonts/inter-v12-latin-700.woff2') format('woff2'),
		url('../webfonts/inter-v12-latin-700.woff') format('woff'),
		url('../webfonts/inter-v12-latin-700.ttf') format('truetype'),
		url('../webfonts/inter-v12-latin-700.svg#Inter') format('svg');
}

/* inter-800 - latin */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 800;
	src: url('../webfonts/inter-v12-latin-800.eot');
	src: local(''),
		url('../webfonts/inter-v12-latin-800.eot?#iefix') format('embedded-opentype'),
		url('../webfonts/inter-v12-latin-800.woff2') format('woff2'),
		url('../webfonts/inter-v12-latin-800.woff') format('woff'),
		url('../webfonts/inter-v12-latin-800.ttf') format('truetype'),
		url('../webfonts/inter-v12-latin-800.svg#Inter') format('svg');
}

/* inter-900 - latin */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 900;
	src: url('../webfonts/inter-v12-latin-900.eot');
	src: local(''),
		url('../webfonts/inter-v12-latin-900.eot?#iefix') format('embedded-opentype'),
		url('../webfonts/inter-v12-latin-900.woff2') format('woff2'),
		url('../webfonts/inter-v12-latin-900.woff') format('woff'),
		url('../webfonts/inter-v12-latin-900.ttf') format('truetype'),
		url('../webfonts/inter-v12-latin-900.svg#Inter') format('svg');
}

/* inter-tight-300 - latin */
@font-face {
	font-family: 'Inter Tight';
	font-style: normal;
	font-weight: 300;
	src: url('../webfonts/inter-tight-v2-latin-300.eot');
	src: local(''),
		url('../webfonts/inter-tight-v2-latin-300.eot?#iefix') format('embedded-opentype'),
		url('../webfonts/inter-tight-v2-latin-300.woff2') format('woff2'),
		url('../webfonts/inter-tight-v2-latin-300.woff') format('woff'),
		url('../webfonts/inter-tight-v2-latin-300.ttf') format('truetype'),
		url('../webfonts/inter-tight-v2-latin-300.svg#InterTight') format('svg');
}

/* inter-tight-regular - latin */
@font-face {
	font-family: 'Inter Tight';
	font-style: normal;
	font-weight: 400;
	src: url('../webfonts/inter-tight-v2-latin-regular.eot');
	src: local(''),
		url('../webfonts/inter-tight-v2-latin-regular.eot?#iefix') format('embedded-opentype'),
		url('../webfonts/inter-tight-v2-latin-regular.woff2') format('woff2'),
		url('../webfonts/inter-tight-v2-latin-regular.woff') format('woff'),
		url('../webfonts/inter-tight-v2-latin-regular.ttf') format('truetype'),
		url('../webfonts/inter-tight-v2-latin-regular.svg#InterTight') format('svg');
}

/* inter-tight-600 - latin */
@font-face {
	font-family: 'Inter Tight';
	font-style: normal;
	font-weight: 600;
	src: url('../webfonts/inter-tight-v2-latin-600.eot');
	src: local(''),
		url('../webfonts/inter-tight-v2-latin-600.eot?#iefix') format('embedded-opentype'),
		url('../webfonts/inter-tight-v2-latin-600.woff2') format('woff2'),
		url('../webfonts/inter-tight-v2-latin-600.woff') format('woff'),
		url('../webfonts/inter-tight-v2-latin-600.ttf') format('truetype'),
		url('../webfonts/inter-tight-v2-latin-600.svg#InterTight') format('svg');
}

/* inter-tight-900 - latin */
@font-face {
	font-family: 'Inter Tight';
	font-style: normal;
	font-weight: 900;
	src: url('../webfonts/inter-tight-v2-latin-900.eot');
	src: local(''),
		url('../webfonts/inter-tight-v2-latin-900.eot?#iefix') format('embedded-opentype'),
		url('../webfonts/inter-tight-v2-latin-900.woff2') format('woff2'),
		url('../webfonts/inter-tight-v2-latin-900.woff') format('woff'),
		url('../webfonts/inter-tight-v2-latin-900.ttf') format('truetype'),
		url('../webfonts/inter-tight-v2-latin-900.svg#InterTight') format('svg');
}

/* Logo Font */
@font-face {
    font-family: 'Ethnocentric Rg';
    src: url('../webfonts/EthnocentricRg-Regular.eot');
    src: url('../webfonts/EthnocentricRg-Regular.eot?#iefix') format('embedded-opentype'),
        url('../webfonts/EthnocentricRg-Regular.woff2') format('woff2'),
        url('../webfonts/EthnocentricRg-Regular.woff') format('woff'),
        url('../webfonts/EthnocentricRg-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* poppins-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	src: url('../webfonts/poppins-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* poppins-700 - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 700;
	src: url('../webfonts/poppins-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* poppins-800 - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 800;
	src: url('../webfonts/poppins-v20-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* poppins-900 - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 900;
	src: url('../webfonts/poppins-v20-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }

@media only screen and (min-width: 640px) {
	::-webkit-scrollbar-track
	{
	/* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9); */
	background-color: #e0dddd;
	}
	::-webkit-scrollbar
	{
	width: 24px;
	background-color: #e0dddd;
	}
	::-webkit-scrollbar-thumb
	{
	background-color: #bbbbbb;
	/* background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent) */
	}
}
body {
	scroll-behavior: smooth;
}

.font-logo {
	font-family: 'Ethnocentric RG', sans-serif;
}

.font-sans {
	font-family: 'Inter', sans-serif;
}

.font-tight {
	font-family: 'Inter Tight', sans-serif;
}
b {
	font-weight: bold;
}
h1,
h2 {
    font-family: "Poppins", "sans-serif";
}

.floating {
    animation: float 3s infinite;
}

@keyframes float {
    0% {
        transform: translateY(0%);
    }
    50% {
        transform: translateY(0.5%);
    }
    100% {
        transform: translateY(0%);
    }
}

.card {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    perspective: 2500px;
}
.card-wrapper {
    transition: all 0.5s;
    width: 100%;
    z-index: -1;
}
.card:hover .card-wrapper {
    transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0);
    box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75);
	filter: grayscale(100%);
	opacity: 0.9;
}
.card-wrapper::before,
.card-wrapper::after {
    content: "";
    opacity: 0;
    width: 100%;
    height: 80px;
    transition: all 0.5s;
    position: absolute;
    left: 0;
}
.card-wrapper::before {
    top: 0;
    height: 100%;
}
.card-wrapper::after {
    bottom: 0;
    opacity: 1;
}
.card:hover .card-wrapper::before,
.card-wrapper::after {
    opacity: 1;
}

.card:hover .card-wrapper::after {
    height: 120px;
}
.cans {
    width: 180px;
    opacity: 0;
    transition: all 0.5s;
    position: absolute;
    z-index: -1;
}
.card:hover .cans {
    opacity: 1;
    transform: translate3d(0%, -15%, 120px);
}

.owl-nav {
	margin-top: -20px !important;
}

/* Hover automatisch auf Smartphones anzeigen */
@media (max-width: 420px) {
	.card .card-wrapper {
		transform: perspective(900px) translateY(-5%) rotateX(15deg) translateZ(0);
		box-shadow: 2px 25px 22px -8px rgba(0, 0, 0, 0.3);
		-webkit-box-shadow: 2px 25px 22px -8px rgba(0, 0, 0, 0.3);
		-moz-box-shadow: 2px 25px 22px -8px rgba(0, 0, 0, 0.3);
		filter: grayscale(100%);
		opacity: 0.9;
	}
	.card .card-wrapper::before,
	.card-wrapper::after {
		opacity: 1;
	}

	.card .card-wrapper::after {
		height: 120px;
	}
	.card .cans {
		opacity: 1;
		transform: translate3d(0%, -15%, 120px);
		width: 140px;
	}
}


#langSelectorFlags img {
	filter: opacity(0.9);
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 300ms;
	border: 1px solid #fff !important;

}
#langSelectorFlags img.active,
#langSelectorFlags img:hover {
	filter: grayscale(0) opacity(100);
	transform: scale(1.15);
}
.lift {
	-webkit-transition: box-shadow .25s ease, -webkit-transform .25s ease;
	transition: box-shadow .25s ease, -webkit-transform .25s ease;
	transition: box-shadow .25s ease, transform .25s ease;
	transition: box-shadow .25s ease, transform .25s ease, -webkit-transform .25s ease
}
.lift:focus,
.lift:hover {
	box-shadow: 0 2rem 5rem rgba(22, 28, 45, .1), 0 .5rem 1rem -.75rem rgba(22, 28, 45, .05) !important;
	-webkit-transform: translate3d(0, -5px, 0);
	transform: translate3d(0, -5px, 0) scale(1.05);
}
.lift-transparent {
	-webkit-transition: box-shadow .25s ease, -webkit-transform .25s ease;
	transition: box-shadow .25s ease, -webkit-transform .25s ease;
	transition: box-shadow .25s ease, transform .25s ease;
	transition: box-shadow .25s ease, transform .25s ease, -webkit-transform .25s ease
}
.lift-transparent:focus,
.lift-transparent:hover {
	-webkit-transform: translate3d(0, -5px, 0) scale(1.05);
	transform: translate3d(0, -5px, 0) scale(1.05);
}

/* Shine Effekt */
/* .shine:before {
	position: absolute;
	content: '';
	display: inline-block;
	top: -180px;
	left: 0;
	width: 30px;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.2);
	animation: shiny 5s ease-in-out infinite;
} */
.shine:hover:before {
	position: absolute;
	content: '';
	display: inline-block;
	top: -100px;
	left: 0;
	width: 30px;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.2);
	animation: shiny 5s ease-in-out infinite;
}

@keyframes shiny {
	0% {
		-webkit-transform: scale(0) rotate(45deg);
		opacity: 0;
	}

	80% {
		-webkit-transform: scale(0) rotate(45deg);
		opacity: 0.5;
	}

	81% {
		-webkit-transform: scale(4) rotate(45deg);
		opacity: 1;
	}

	100% {
		-webkit-transform: scale(50) rotate(45deg);
		opacity: 0;
	}
}