/*!
 * custom.css
 */
:root {
  --blue: #00a6e2;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #00a6e2 !important;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #212529;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	}
/* satisfy-regular - latin */
@font-face {
  font-family: 'Satisfy';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/satisfy-v17-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/satisfy-v17-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/satisfy-v17-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/satisfy-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/satisfy-v17-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/satisfy-v17-latin-regular.svg#Satisfy') format('svg'); /* Legacy iOS */
}


.btn-light {color: #555f6a;}

#button_kontakt {
	background-color: #00a6e2;
	color: #fff;
	border: none;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	padding: 1rem;
	position: fixed;
	top: 50%;
  	right: 0px;
	weight: 100%;
	display: inline-block;
	/* Der Rahmen ergibt ein 'D' */
  -moz-border-radius: 100px 0 0 100px;
       border-radius: 100px 0 0 100px;
	transition: background-color 2s, transform 2s;
	box-shadow: -5px 5px 22px -1px rgba(0, 166, 226, 0.54);
	inline-size: 180px;
	overflow: hidden;
	z-index: 1000;
}
#button_kontakt:hover {
  cursor: pointer;
  background-color: #fff;
  color: #98ACC2;
  border: 1px solid;
  border-color: #98ACC2;
  transform: translatex(50px);
}
#button_kontakt:active {
  background-color: #98ACC2;
}


@media (min-width: 768px) {
	 #full-screen-background-image {
        z-index: -999;
        min-height: 100%;
        min-width: 1024px;
        width: 100%;
        height: auto;
        position: fixed;
        top: 0;
        left: 0;
	      }
}
@media (max-width: 768px) {
	 #full-screen-background-image {
		 display: none;
	      }
}

.slogan {
        font-family: 'Satisfy', cursive;
    color: #00a6e2;}

.cd_farbe {h2: #98ACC2;
	color: #98ACC2;}

.sprung {visibility: hidden; height: 0px !important; position: absolute; margin-top: -200px;}

@media (max-width: 768px) {
.display-4 {
  font-size: 3.1rem;
  font-weight: 300;
  line-height: 1.2;}	
}

.gallery
{
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-width: 33%;
-moz-column-width: 33%;
column-width: 33%;
}
.gallery .pics
{
-webkit-transition: all 350ms ease;
transition: all 350ms ease;
}
.gallery .animation
{
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
@media (max-width: 450px)
{
.gallery
{
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
-webkit-column-width: 100%;
-moz-column-width: 100%;
column-width: 100%;
}
}
 
@media (max-width: 400px)
{
.btn.filter
{
padding-left: 1.1rem;
padding-right: 1.1rem;
}
}