@import url('https://fonts.googleapis.com/css?family=Carter+One|Open+Sans&display=swap');
.animated {
    -webkit-transition: all 300ms ease-in-out;  -moz-transition: all 300ms ease-in-out;  -o-transition: all 300ms ease-in-out;  transition: all 300ms ease-in-out;
}

.animatedSlow {
    -webkit-transition: all 1s ease-in-out;  -moz-transition: all 1s ease-in-out;  -o-transition: all 1s ease-in-out;  transition: all 1s ease-in-out;
}

.animatedSlow1 {
    -webkit-transition: all 1.5s ease-in-out;  -moz-transition: all 1.5s ease-in-out;  -o-transition: all 1.5s ease-in-out;  transition: all 1.5s ease-in-out;
}

.animatedSlow2 {
    -webkit-transition: all 2s ease-in-out;  -moz-transition: all 2s ease-in-out;  -o-transition: all 2s ease-in-out;  transition: all 2s ease-in-out;
}
.font-size-1 {
	font-size: 0.75rem;
	line-height: 1;
}

.position-initial {
	position: initial;
}

* {
    outline: none !important;
}

.text-carter-one {
	font-family: 'Carter One', cursive;
}

.container-wide {
	max-width: 1800px;
}

.bg-gray {
	background-color: #dadada;
}

.text-white * {
	color: #fff !important;
}

body {
	font-family: 'Open Sans', sans-serif; /**/
}

img, input {
    max-width: 100%;
}

img {
	height: auto !important;
}

form input[type=text],
form input[type=password],
form input[type=email],
form textarea,
form select {
	width: 100%;
}

.contactFormHolder {
	max-width: 300px;
}

#Form_ContactForm label {
	margin-bottom: 0px;
	font-family: 'Carter One', cursive;
	font-size: 12px;
	color: #c40319;
}

#Form_ContactForm fieldset {
	background: transparent url(../images/contact-bg.png) no-repeat center;
	background-size: 100% 100%;
	padding: 50px 30px;
	margin-bottom: 20px;
}

#Form_ContactForm input[type=text],
#Form_ContactForm input[type=email] {
	background-color: #dadada;
	border: 1px solid #dadada;
	margin-bottom: 3px;
}

#Form_ContactForm input[type=submit] {
	font-size: 12px;
}

#Form_ContactForm_Subject_Holder,
#Form_ContactForm_MeinNummer_Holder,
#Form_DatenschutzForm_Subject_Holder,
#Form_DatenschutzForm_MeinNummer_Holder {
	position: absolute;
	top: -10000px;
	left: -10000px;
}

.my-checkbox input {
	position: absolute;
	left: -100vh;
}

.my-checkbox label {
	position: relative;
	padding-left: 20px;
}

.my-checkbox label:before {
	content: "";
	position: absolute;
	top: 0px;
	left: 0px;
	width: 15px;
	height: 15px;
	background-color: #dadada;
}

.my-checkbox input:checked~label::after {
	content: "";
    position: absolute;
    top: 3px;
    left: 2px;
    width: 11px;
    height: 7px;
    border-left: 2px solid #c40319;
    border-bottom: 2px solid #c40319;
    transform: rotate(-45deg);
    border-radius: 2px;
}


.bottomBox img {
	border-bottom: 2px solid #fff;
	width: 100%;
}

.smallLinks a {
	color: #aaaaaa;
	font-size: 12px;
}

.bottomBox * {
	font-size: 12px;
}

.bottomBox {
	box-shadow: 0 0 0 0 #333;
	-webkit-transition: all 300ms ease-in-out;  -moz-transition: all 300ms ease-in-out;  -o-transition: all 300ms ease-in-out;  transition: all 300ms ease-in-out;
}

.bottomBox:hover {
	transform: scale(1.1);
	box-shadow: 0 0 10px 0 #333;
}

.PageImage {
	background-size: cover;
	background-position: center;
}
	.PageImage img {
		opacity: 0;
	}

.primary ul {
	list-style: none;
}
	.primary li {
		position: relative;
		display: inline-block;
	}


footer {
	background: linear-gradient(to top, #dadada 20%, #fff 20%);
}


p img.left {
    float: left;
    max-width: 50%;
    margin: 5px 20px 10px 0;
}
p img.right {
    float: right;
    max-width: 50%; /* Responsive width */
    margin: 5px 0 10px 20px;
}
p img.leftAlone {
    float: left;
    margin-right: 100%;
    margin-bottom: 10px;
    clear: both;
}
p img.rightAlone {
    float: right;
    margin-left: 100%;
    margin-bottom: 10px;
    clear: both;
}
p img.center {
    float: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-bottom: 10px;
    clear: both;
}

.nav-item {
	position: relative;
}

.submenu {
	list-style: none;
	position: absolute;
	left: -100vw;
	padding-left: 0px;
	top: 100%;
	background-color: rgba(255,255,255,.8);
	transform: translateY(2rem);
	-webkit-transform: translateY(2rem);

	-webkit-transition: transform 300ms ease-in-out;  -moz-transition: transform 300ms ease-in-out;  -o-transition: transform 300ms ease-in-out;  transition: transform 300ms ease-in-out;
}
	.submenu li {
		padding: 2px 10px;
	}

	.submenu li,
	.submenu li a {
		text-align: left !important;
		color: #1967a8!important;
	}

.nav-item:hover .submenu {
	transform: translateY(0rem);
	-webkit-transform: translateY(0rem);
	left: 0px;
	padding-top: .5rem;
	box-shadow: 0px 5px 5px 0px;
}


/* animation */
.animationHolder {
	position: relative;
	width: 383px;
	max-width: 383px;
}

.animationHolder .arm {
	position: absolute;
	top: 181px;
	left: 0px;
	transform: rotate(-2deg);
    transform-origin: 100% 100%;

	animation-name: armanimation;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}

.carousel-caption {
	left: 0px;
	right: 0px;
	bottom: 0px;
	top: 0px;
	padding-bottom: 0px;
}

.sliderTitle {
	font-family: 'Carter One', cursive;
	color: #1967a8;
	font-size: 30px;
	max-width: 500px;
	line-height: 1.1;

	transform: translateX(1800px);
	-webkit-transform: translateX(1800px);
}

.sliderSubtitle {
	font-family: 'Carter One', cursive;
	color: #c40319;
	padding-left: 30px;
	max-width: 400px;

	transform: translateX(1500px);
	-webkit-transform: translateX(1500px);
}

.sliderImage1 {
	transform: translateX(2000px);
	-webkit-transform: translateX(2000px);
}

.active .sliderTitle,
.active .sliderSubtitle,
.active .sliderImage1 {
	transform: translateX(0px);
	-webkit-transform: translateX(0px);
}


@keyframes armanimation {
	0% {	
		transform: rotate(-2deg);
	}
	50% {
		transform: rotate(2deg);
	}
	100% {	
		transform: rotate(-2deg);
	}
}


.animationHolder .eye {
	position: absolute;
	top: 112px;
	opacity: 0;
	left: 192px;
	transform: scale(.9);

	animation-name: eyeanimation;
	animation-duration: 4s;
	animation-iteration-count: infinite;
}

@keyframes eyeanimation {
	0% {	
		opacity: 0;
	}
	79% {
		opacity: 0;
	}
	80% {
		opacity: 1;
	}
	99% {
		opacity: 1;
	}
	100% {	
		opacity: 0;
	}
}

.animationHolder .keys {
	position: absolute;
	top: 545px;
	left: 311px;
	transform: scale(.9);
	transform-origin: 50% 0%;

	animation-name: keysanimation;
	animation-duration: 1s;
	animation-iteration-count: infinite;
}

@keyframes keysanimation {
	0% {	
		transform: rotate(-10deg);
	}
	50% {
		transform: rotate(10deg);
	}
	100% {	
		transform: rotate(-10deg);
	}
}

.homeHeader {
	background: linear-gradient(to top, #dadada 25%, transparent 20%);
}

#carouselHome {
	position: absolute;
	min-height: 580px;
	width: 100%;
}

#carouselHome .carousel-item {
	background-size: cover;
	background-position: center;
}
	#carouselHome .carousel-item > img {
		opacity: 0;
	}

#terminButton {
	position: fixed;
	left: calc(100% - 60px );
	bottom: 40px;
	transform: rotate(-90deg);
	background: var(--primary);
	color: #fff;
	padding: 0.5rem 1rem;
	display: none;
}

@media (min-width: 1200px) {
	.container {
		max-width: 1500px;
	}
}

@media (max-width: 1200px) {
	#carouselHome {
		position: relative !important;
		min-height: initial;
	}

	#carouselHome .carousel-item {
		min-height: 450px;
	}

	.sliderTitle {
		font-size: 20px;
	}

	#terminButton {
		display: block;
	}
}