.container-header {position: relative; z-index: 10; background: #ffffff; padding: 10px 0;}	
.logo { position: fixed; top: 15px; left: 20px;}	
body {color: #272b30; font-size: 1.2rem; font-weight: 300;}

.container-header .container-nav {justify-content: center;}
body.wrapper-fluid .site-grid {grid-gap: 0;}
.card-body {padding: 0;}
.container-top-a > *,.container-top-b > *,.container-bottom-a > *,.container-bottom-b > * {margin: 0 0;}

.container-header .navbar-toggler {
  color: #999999;
  cursor: pointer;
  border: 1px solid #cccccc;
	margin-bottom: 10px;
}

.container-topbar a:not(.btn):hover, .container-topbar a:not(.btn):focus, .container-topbar .btn-link:hover, .container-topbar .btn-link:focus, .container-below-top a:not(.btn):hover, .container-below-top a:not(.btn):focus, .container-below-top .btn-link:hover, .container-below-top .btn-link:focus
{color: #000000;}

.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm
{padding-left: 0; padding-right: 0;
}

  .container-header .mod-menu > li.active > a, .container-header .mod-menu > li.active > span,
  .container-header .mod-menu > li > a:hover {
    color: #ee1a76;
  }

.container-component > :first-child, .container-sidebar-left > :first-child, .container-sidebar-right > :first-child, .container-component > * + *, .container-sidebar-left > * + *, .container-sidebar-right > * + * {
  margin-top: 0;
}

.card {
  border: none;
}

a {
  color: #000000; text-decoration: none;
}

.borderpix {border-radius: 43% 10% 27% 10% / 43% 10% 27% 10% }
.borderpix2 {border-radius: 1rem }

.container-header .mod-menu {color: #000000; text-transform: uppercase; list-style: none; justify-content: center; align-items: center; font-size: 1.3rem; font-weight: normal}
.metismenu.mod-menu .metismenu-item {padding: 0.5em 1.3em; font-size: 0.9rem; justify-content: center; }

.oben {background: #ffffff; text-align: right;  font-size: calc(12px + (17 - 12) * ((100vw - 320px) / (1600 - 320)));
	color: #454545; margin-right: 1rem; margin-left: 1rem; margin-top: 1rem; }
.oben p {margin-bottom: 0; text-decoration: none; }
.oben a:hover {color: #e72bab; }
.oben a {text-decoration: none; }

.innen-1 {
  background: #ffffff;
}
.innen-2 {
  background: #f5f5f5; 
}
.innen-3 {
  background: #f5f5f5; border-radius: 40px;
}

.container-header .grid-child{
  padding: 0;
}


.divider-1  { display: inline-block; width: 95px; border-bottom: 2px solid; color: #ee1a76; margin-bottom: 30px; margin-top: 8px;}
.divider-2  { display: inline-block; width: 45%; border-bottom: 1px solid; color: #ee1a76; margin-bottom: 30px; margin-top: 20px;}

h1, .h1 {font-size: calc(32px + (55 - 32) * ((100vw - 320px) / (1600 - 320))); text-transform: uppercase; margin-bottom: 0.4em; font-weight: normal; 
color: #000000;}
h2, .h2 {font-size: calc(24px + (36 - 24) * ((100vw - 320px) / (1600 - 320))); font-weight: 100; margin-bottom: 0.4em; color: #6f7077 !important}
h3, .h3 {font-weight: 200; font-size: calc(17px + (24 - 17) * ((100vw - 320px) / (1600 - 320))); color: #6f7077 !important; line-height: 1.4; margin-bottom: 1.3rem}
h4, .h4 {font-family: 'Kristi'; font-weight: 100; font-size: calc(50px + (60 - 50) * ((100vw - 320px) / (1600 - 320))); transform: rotate(-3deg); color:#454545}
h5, .h5 {font-family: 'Kristi'; font-weight: 100; font-size: calc(33px + (40 - 33) * ((100vw - 320px) / (1600 - 320))); color: #5d6268; transform: rotate(-3deg)}
h6, .h6 {font-family: 'Kristi'; font-weight: 100; color: #cccccc; margin-bottom: 2rem; font-size: calc(33px + (40 - 33) * ((100vw - 320px) / (1600 - 320))); }

.rund {border-radius: 350px}
	
.carousel-caption h1 {color: #000000; font-weight: 100;  font-size: calc(60px + (142 - 60) * ((100vw - 320px) / (1600 - 320))); 
margin-bottom: -4%; text-transform: none; font-style: italic}
.carousel-caption p {color: #ffffff;  font-size: calc(33px + (80 - 33) * ((100vw - 320px) / (1600 - 320)));
font-family: 'Kristi'; margin-left: 2rem}
.carousel-caption h4 {color: #cea795;  font-size: calc(33px + (80 - 33) * ((100vw - 320px) / (1600 - 320)));
font-family: 'Kristi'; margin-left: 2rem}

.carousel-caption { left: 7%; right: 7%; bottom: 16%}

/* kristi-regular - latin */
@font-face {
  font-family: 'Kristi';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/kristi-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/kristi-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/kristi-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/kristi-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/kristi-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/kristi-v17-latin-regular.svg#Kristi') format('svg'); /* Legacy iOS */
}
.carousel-caption {text-align: left}

@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;  transform: translate(0)
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;  transform: translate(0)
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
	 transform: translate(0)
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
	 transform: translate(0)
  }
}

.bild-text {position: absolute; bottom: 6%; left: 5%; font-size: calc(20px + (45 - 20) * ((100vw - 320px) / (1600 - 320))); color: #ffffff; font-family: 'Kristi'; }
.bild-text2 {position: relative}
.box {
	-webkit-transition: all .5s ease-in-out;
       -o-transition: all .5s ease-in-out;
          transition: all .5s ease-in-out;}
.box:hover {   
    -webkit-filter: brightness(1.1);
    filter: brightness(1.1);
-webkit-transform: scale(1.1); /* Saf3.1+, Chrome */
-moz-transform: scale(1.1); /* FF3.5+ */
-ms-transform: scale(1.1); /* IE9+ */
-o-transform: scale(1.1); /* Opera */
transform: scale(1.1);}

.btn-primary {
  color: white;
  background-color: #ee1a76;
  border-color: #ffffff;
}
.btn-primary:hover {
  color: #ee1a76;
  background-color: #ffffff;
  border-color: #ee1a76;
}

.btn-primary2 {
  color: white;
  background-color: transparent;
  border-color: #ffffff;
}
.btn-primary2:hover {
  color: #000000;
  background-color: #ffffff;
  border-color: #ffffff;
}
.btn {
  padding: 1rem 2rem; font-style: italic;  margin-top: 0.8rem;
}


.footer a {text-decoration: none;}
.footer a:hover {color: #000000;}
.footer {color: #7c7b7b; font-size: 0.9rem; text-align: center; margin-top: 0em; 
background: #f5f5f5; 
}

.footer-2 {color: #7c7b7b; font-size: 0.9rem; text-align: center; margin-top: 0em; 
background: #fffffff; 
}
.footer-2 a {text-decoration: none; color: #7c7b7b;}
.footer-2 a:hover {color: #000000;}


@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


.header .mod-menu li:hover > ul {
  background-color: #fff;
  border: 0;  
  display: block;
  position: absolute;
  top: 100%;
	color: #c1c3c5;
  left: -7px;
	font-size: 1rem;
  min-width: 250px;
  padding: 15px;
}





.header .mod-menu li:hover > ul li {
  display: block;
}

  .container-header .mod-menu > li::after {
    position: absolute;
    right: 50%;
    bottom: 0;
    left: 50%;
    display: block;
    height: 1px;
    margin: auto;
    content: "";
    background: transparent;
    opacity: 0.8;
    -webkit-transition: all 0.2s ease, background-color 0.2s ease;
    -o-transition: all 0.2s ease, background-color 0.2s ease;
    transition: all 0.2s ease, background-color 0.2s ease;
  }

.container-header .mod-menu > li.active::after{
  background: #e72bab; left: 7px; right: 7px;
}

.container-header .mod-menu > li:hover::after{
  background: #e72bab; left: 7px; right: 7px;
}

.container-header .metismenu > li.level-1 > ul {
  min-width: 11rem; 
}

.metismenu.mod-menu .metismenu-item > ul {
  position: absolute;
  top: 127%; 
  z-index: 1001;
  display: block; color: #6b8ab3;
  padding: 0.6rem 0;

  list-style: none;
  -webkit-box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.1);
}

.metismenu.mod-menu .metismenu-item > ul > a {color: #6b8ab3}

.container-header .container-nav {
  padding-bottom: 0.6em; padding-top: 0.2rem;
}

  .container-header .container-nav .container-search,
.container-header .container-nav nav {
    margin-top: 0.1em;
  }

.icon-menu::before {
	content: "MENU"; color: #3f464d
}

.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
	box-shadow: none
}


.mod-menu > li + li{
	padding: 6px 10px;
}

.mod-menu {
   display: flex;
    flex: 1 1 100%;
    flex-direction: column;
}

.fa, .fas, [class*=" icon-"], [class^="icon-"]{
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-weight: 2;
	padding: 5px 3px 1px 3px;
	
}

.container-header nav {
  padding: 0;
  margin-top: 0;
	justify-content: center
}



.container-header .navbar-brand {
  margin: auto; padding-bottom: 0; padding-top: 0;
}


@media (max-width: 480px) {
.animation {width: 250% !important; height: auto; margin-left: -370px !important;}
	.oben {background: #ffffff; text-align: center; 
	color: #888888; margin-bottom: 0.7rem; }
	.carousel-caption { left: 7%; right: 7%; bottom: 3%}
	body {color: #616a74; font-size: 1.0rem}
	.btn {padding: 0.7rem 1rem; font-style: italic;  margin-top: 1rem;}
		.carousel-caption h1 {font-weight: 200; margin-bottom: -6%; }
	h3, .h3 {font-weight: 300;}
	h2, .h2 {font-weight: 300;}


}

@media (min-width: 480px) and (max-width: 767px) {
.animation {width: 190% !important; height: auto; margin-left: -370px !important;}
	body {color: #272b30; font-size: 1.1rem}
		.carousel-caption { left: 7%; right: 7%; bottom: 6%}
		
}
@media (min-width: 768px) and (max-width: 979px) { 
.animation {width: 170% !important; height: auto; margin-left: -420px !important;}	
		.carousel-caption { left: 7%; right: 7%; bottom: 11%}
		
}
@media (min-width: 980px) and (max-width: 1199px) {
.animation {width: 150% !important; height: auto; margin-left: -350px !important;}	
		.carousel-caption { left: 7%; right: 7%; bottom: 13%}
}	
@media (min-width: 1200px) {
.animation {width: 110% !important; height: auto;}		
	.carousel-caption { left: 7%; right: 7%; bottom: 13%}
}
@media (min-width: 1500px) {
.animation {width: 100% !important; height: auto;}	
	
}