@font-face {
    font-family: 'jost';
	src: url('font/jost-v15-latin-ext-300.woff');
	font-display: block;
	font-weight: 300;
}
@font-face {
    font-family: 'jost';
	src: url('font/jost-v15-latin-ext-regular.woff');
	font-display: block;
	font-weight: 400;
}
@font-face {
    font-family: 'jost';
	src: url('font/jost-v15-latin-ext-500.woff');
	font-weight: 500;
	font-display: block;
}
@font-face {
    font-family: 'jost';
	src: url('font/jost-v15-latin-ext-600.woff');
	font-weight: 600;
	font-display: block;
}


* {
	margin: 0;
	padding: 0;
	}

html {overflow-y: scroll; scrollbar-color: #ccc #eee; scroll-behavior: smooth !important;}
body {
	background-color: #fff;
	font: 300 1rem/1.5 jost;
	color: #333;
	-webkit-text-size-adjust: none;
	}
	
	/*########################### ANIMATIONEN ##############################
img, .box-claim {animation: farbe 3s ease-in-out ; }
@keyframes farbe {
    0%   {filter: saturate(0); -webkit-filter: saturate(0);}
    100% {filter: saturate(1); -webkit-filter: saturate(1);}
}
.slider {animation: fadeInTOP 1.5s cubic-bezier(0.6, -0.28, 0.735, 0.045);}
@keyframes fadeInTOP 
{   0% {transform: translate(0, 300px) scale(0.5);; opacity:0; } 100% { transform: translate(0, 0) scale(1); opacity:1;}  }
*/


.slider {   animation: fadeInAnimation 1.5s ease-in-out ;}
.footer {animation: fadeInAnimation 3s ease-in-out ;}
@keyframes fadeInAnimation {  0% {opacity: 0;}    100% {opacity: 1;} }


.ltr {animation: fadeInRTL 1s ease-in-out;}
@keyframes fadeInRTL {   0% {transform: translate(-300px, 0); opacity:0; } 100% { transform: translate(0, 0); opacity:1;}  }

.rtl {animation: fadeInLTR 1s ease-in-out;}
@keyframes fadeInLTR {   0% {transform: translate(300px, 0); opacity:0; }  100% { transform: translate(0, 0); opacity:1;}  }

.btt {animation: fadeInBTT 1s ease-in-out;}
@keyframes fadeInBTT {   0% {transform: translate(0, 800px); opacity:0; }  100% { transform: translate(0, 0); opacity:1;}  }


a {color: #225b88; text-decoration:none;outline: 0 none;  white-space: nowrap; transition: all 0.3s ease-in-out 0s ;}
a:hover {color: #000; transition: all 0.3s ease-in-out 0s ;}
a.phonelink { color: #bbb !important;   cursor: default; text-decoration:none;}

img {transition: all 0.5s ease-in-out 0s ;}

.box-clients {text-align:center; margin-bottom:90px;}
.box-clients li {list-style-type: none;}

.box-right .link a{color: #fff;text-decoration:none;outline: 0 none;  white-space: nowrap;position: relative; font-weight:300;}
.box-right .link a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #fff;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0.3s;
}
.box-right .link a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

h2, h3 {font: 600 1.1rem/140% jost; margin:30px 0 10px 0; text-transform: uppercase; letter-spacing:1px;}

p {margin-bottom: 20px;}
.wrapper {width: 100%;}
.header {
position: relative;
  padding: 2% 10% 10px 10%;
  z-index: 10;
  margin: 0 auto;
  max-width: 1600px;
}


.footer {margin: -30px auto 60px auto; text-align:center; text-transform: uppercase;z-index:100;position:relative;}
.footer a {font-size: 0.8rem;
  color: #999;
  letter-spacing: 1px;}
.footer a:hover {color:#999;}

.slider .slider-text {
	position:absolute;
	bottom: 0; right: 0; left: 0; 
	margin: 0 auto -30px auto;
	width: 80%; height: 120px; 
	padding: 5px;
    text-align: center;
	font-size: 0.8em; 
	line-height: 120%;
	font-weight: 300;
	color: #bbb;
	}
	
.content {
font-size:1.2rem;
	margin: 0px auto; 
	max-width:1100px;
	padding: 0 20px;
	min-height: 600px;
	}
.privacy {max-width: 600px; margin-bottom: 90px;}
.privacy ul {margin-left:30px;}

.portrait {
	width:300px;
	height: 300px;
	border-radius: 50%;
	margin: 0 0 10px 0;
		}

.box-portrait, .box-claim {height: 350px;	display: flex;  align-items: center; font-weight:400;}
.box-portrait {justify-content: flex-end;}
.box-left {
	float: left;
	width: 48%;
	padding-right: 2%;
	}
.box-right {
	float: left;
	width: 48%;
	padding-left: 2%;
	margin-top: -5px;
	}
.box-row1 {margin-bottom: 20px; height:auto; }
.box-row2 {margin-bottom:50px; }
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
.data {
	unicode-bidi:bidi-override; 
	direction: rtl;
	text-align:left;
	}
.disclaimer {
	-moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto; 
	}

img.insta {height: 30px; width: auto; vertical-align:middle; filter: invert(0.6); padding:10px 0; transition: all 0.3s ease-in-out 0s;}
img.insta:hover {filter: invert(0) brightness(1); transition: all 0.3s ease-in-out 0s;}
 
.up {text-align: center;}
.up img {width: 30px;  height: auto; filter: invert(0.5); transition: all 0.3s ease-in-out 0s; opacity: 0.3;}
.up img:hover {filter: invert(0) brightness(1); transition: all 0.3s ease-in-out 0s; opacity: 0.5;}
	
/*############################################### SLIDER #####################################
	        /*jssor slider loading skin spin css*/
        .jssorl-009-spin img {
            animation-name: jssorl-009-spin;
            animation-duration: 1.6s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
	.jssorl-009-spin {background-color:#fff !important;}

        @keyframes jssorl-009-spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        /*jssor slider bullet skin 032 css*/
        .jssorb032 {position:absolute; margin-right: 30px;}
        .jssorb032 .i {position:absolute;cursor:pointer;}
        .jssorb032 .i .b {fill:#333;fill-opacity:0.1;stroke:#fff;stroke-width:1200;stroke-miterlimit:10;stroke-opacity:0.5;}
        .jssorb032 .i:hover .b {fill:#000;fill-opacity:0.3;stroke:#fff;stroke-opacity:.5;}
        .jssorb032 .iav .b {fill:#000;fill-opacity:0.2;stroke:#fff;stroke-opacity:.5;}
        .jssorb032 .i.idn {opacity:.3;}
        
        /*jssor slider arrow skin 051 css*/
        .jssora051 {display:block;position:absolute;cursor:pointer;}
        .jssora051 .a {fill:none;stroke:#999;stroke-width:200;stroke-miterlimit:10;}
        .jssora051:hover {opacity:.8;}
        .jssora051.jssora051dn {opacity:.5;}
        .jssora051.jssora051ds {opacity:.3;pointer-events:none;}

.slider {margin-top: 0px !important;}
#jssor_1 {top: -80px !important;}
.mobil {display:none;}

/*########################### LOGO & NAVIGATION ##############################*/	
.logo h1 {font: 400 1.1rem/130% jost; text-transform: uppercase; z-index:1000; position:relative;max-width:40px; letter-spacing:1px; display:inline; color:#000;transition: all 0.4s ease-in-out;}
.logo img {height:40px; width:40px; vertical-align: middle;  padding: 0 8px 4px 0; z-index:50;}
.logo h1:hover {color: #225b88;transition: all 0.4s ease-in-out;}

nav { float:right;  text-align:right; margin-top: -37px;}
nav ul {padding: 0;}
nav li {display:inline;	list-style-type: none; margin: 0; padding:0;}
nav a {color: #999; margin:0 3px; font: 400 1.1rem/130% jost; text-transform: uppercase; white-space: nowrap;text-decoration:none;outline: 0 none; position: relative;transition: all 0.4s ease-in-out; display:inline-block; padding: 0.1rem; letter-spacing:1px; z-index:10;}
nav a.select {color: #225b88; } 
nav a:hover  {color: #225b88; text-decoration:none;}

nav > ul > li {list-style-type: none; margin: 0; padding:0; display:inline-block;}
nav > ul > li > ul {  display: none; }
nav > ul a.select {color: #225b88;  } 
nav > ul a:hover  {color: #225b88; text-decoration:none; transition: all 0.3s ease-in-out;}
nav ul > li > ul {background-color: #fff; padding: 1rem; border-radius: 5px; margin-left:-1rem; }
nav ul > li > ul > li a { color: #999; padding:0.3rem 0.1rem; font-size: 1rem; text-align:left;transition: all 0.3s ease-in-out; display:block;}
nav ul > li > ul > li a:hover { color: #225b88; transition: all 0.3s ease-in-out; }
nav > ul > li:hover > ul { display: block;  position: absolute; animation: fadeInAnimation 0.5s;z-index:100;}
nav > ul > li > ul > li {  position: relative;}

nav > ul > li > a::before, a.select::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #225b88;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
	z-index: -10;
}
nav > ul > li > a:hover::before, a.select:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

#burger {display: none;}

	 /*############################################### MOBIL ##################################### */


@media screen and (max-width: 1220px) { 
	.portrait {	width:240px;	height: 240px;}
	#jssor_1 {top: -20px !important;}
	.jssorb032 {margin-top: 10px;}
	.box-portrait, .box-claim {	height: 280px;	}

/*########################### HAMBURGER 
Copyright (c) 2017 by Julien Lejeune (https://codepen.io/jlnljn/pen/LkXoBb)
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
##############################*/
nav a {font-size:1rem; color:#333;}
.logo {
  position: fixed;
  top: 0px;
  left: 10%;
  z-index: 4;
  padding:1rem 0 0 0;
  background-color:#fff;
	width: 100%;
}
.logo > span {
  text-transform: none;
  opacity: .5;
  font-weight: 300;
  font-size: 12px;
}
body input + label {
  position: fixed;
  top: 26px;
  right: 10%;
  height: 20px;
  width: 25px;
  z-index: 5;
}
body input + label span {
  position: absolute;
  width: 100%;
  height: 2px;
  top: 50%;
  margin-top: -1px;
  left: 0;
  display: block;
  transition: .5s;
  background: #333;
}
body input + label span:first-child {
  top: 3px;
}
body input + label span:last-child {
  top: 16px;
}
body label:hover {
  cursor: pointer;
}
body input:checked + label span {
  opacity: 0;
  top: 50%;
}
body input:checked + label span:first-child {
  opacity: 1;
  transform: rotate(135deg);
}
body input:checked + label span:last-child {
  opacity: 1;
  transform: rotate(-135deg);
}
body input ~ nav {
background-color: #fff;
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 90px;
  z-index: 3;
  transition: .5s;
  transition-delay: .5s;
  overflow: hidden;
}
body input ~ nav > ul {
  text-align: center;
  position: absolute;
  top: 140px;
  left: 20%;
  right: 20%;
} 
body input ~ nav > ul > li {
  opacity: 0;
  transition: 0s;
  transition-delay: 0s;
display: block;
}
body input ~ nav > ul > li > a {
  text-decoration: none;
  display: inline-block;
  padding: 5px;
}
body input:checked ~ nav {
  height: 110%;
  transition-delay: 0s;
}
body input:checked ~ nav > ul > li {
  opacity: 1;
  transition-delay: .5s;
}

}



@media screen and (max-width: 840px) { 
	.slider {margin-top: 5px !important;}
	.logo h1 {font-size: 1rem; letter-spacing:0;}
	.slider .slider-text { font-size: 250% !important;}
	.content {margin-top: 70px; }
	.portrait {margin: 0 0 20px 0;	}
	.jssorb032 {display:none;}
	.box-portrait, .box-claim {	height: 180px;	}
	}

@media screen and (max-width: 660px) {
	.logo {left: 3%; padding:1rem 0;}
	 body input + label {right: 3%;}

	.slider {display:none;}
	.mobil {display:block; margin: 40px 3% 0 3%;}
	.mobil div {margin: 30px auto 60px auto;}
	.mobil .slider-text { font-size: 170%; line-height:1.2; margin: 10px 0 100px 0; -moz-hyphens: auto;
   -o-hyphens: auto;   -webkit-hyphens: auto;   -ms-hyphens: auto;   hyphens: auto; word-wrap: break-word; z-index:10; position: relative;}
   a {white-space: normal; -moz-hyphens: none; -o-hyphens: none; -webkit-hyphens: none; -ms-hyphens: none; hyphens: none;}
.mobil img {max-width: 100%; height:auto;}
.footer {margin-top:0;}

	.box-left {float:none; width: 100%;text-align:center;padding-right: 0; }
	.box-right {float:none; width: 100%;padding-left: 0;}
	.box-row2 .box-left {display:table-footer-group;}
	.box-row2 .box-right {display:table-header-group;}
	.box-portrait {justify-content:center; }
	.box-portrait, .box-claim {	height: auto;}
	.box-claim {text-align:center; justify-content:center; }
	.disclaimer {margin-top: 20px;}
	
	.navigation {  position: fixed; top: 0; background-color: #000000dd; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 15px 0px; margin: 0 auto; width: 100%;}
	.content {margin-top: 80px;}
	}
@media screen and (max-width: 350px) {
	.navigation a {padding: 0 0.4rem;}
	}