/* SECTION 1 */

.home .bg-blue:first-child {
	height:calc(100vh - 80px);
}

.home .bg-blue:first-child > .container {
	height:100%;
	/* height:calc(100vh - 150px); */
}

.home .bg-blue:first-child  {
	padding:0px 0px  0px 0px; 
}


.home #logo {
	position:absolute;
	left:50%;
	margin-left:-600px; 
	display:block;
	top:300px;
	transform:none;
	max-width:100%;
    width:980px;
	animation: logozoom 2s ease-in-out forwards;
	animation-delay: 0.4s;
	z-index:1000 !important;
}

@keyframes logozoom {
    0% {
        transform:scale(1.0);
    }
    100% {
        transform:scale(0.1825);
        top:-60px;
        left:0;
		margin-left:-381px;
    }
}

.home #logo.stopanimate {
	position:absolute;
	left:50%;
	margin-left:-600px; 
	display:block;
	top:300px;
	transform:none;
	max-width:100%;
    width:980px;
	animation: logozoom 0s ease-in-out forwards;
	animation-delay: 0s;
	z-index:1000 !important;
}


#keyvisual {
	position: absolute;
	width: auto;
	height: auto;
	right: 0;
	top: 0;
	top: 50px;
}

#keyvisual figure img {
	max-width:660px !important; 
	float:right;
}

#claim {
	position:absolute;
	left:15px;
	top:630px;
	width:540px;
}

.scroll-down {
	position:absolute;
	bottom:80px;
	right:0px; 
}

.scroll-down .fa-angle-down {
	font-size:60px;
	color:#87DCF5;
	cursor:pointer;
}





/* SECTION 2 */
#sec2 {
	height:calc(100vh - 100px);
}


#sec2 .container {
	position: absolute !important;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}


/* Slick Slider */
#slick-slide-control00.button,
#slick-slide-control01.button,
#slick-slide-control02.button {
	text-decoration: none;
}

.slick-slider li button:before {
    font-size:12px;
}

.slick-dots {
	position:absolute;
	margin-bottom:-150px; 
	/* margin-top: 150px; */
	/* margin-bottom:-150px;  */
}

.slick-dots li button:before {
	opacity:1;
	color:#87DCF5;
}

.slick-dots li.slick-active button:before {
	opacity:1;
	color:#3737AA;
}

.slick-prev:before, 
.slick-next:before {
	font-size:30px;
	color:#87DCF5;
}

.slick-prev, 
.slick-next {
	/*top:calc(50% - 150px); */
}


.slick-slider .slick-next, 
.slick-slider .slick-prev {
	border: 0;
	cursor: pointer;
	display: block;
	font-size: 0;
	height: 100%;
	line-height: 0;
	margin-top: -10px;
	opacity: 1 !important;
	padding: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 25%;
	z-index: 1;
}



.slick-slider .slick-prev:before, 
.slick-slider .slick-next:before { 
	font-family: FontAwesome !important; 
	font-size: 40px; 
	line-height: 1; 
	color: #3737AA;;
	opacity: 1; 
	-webkit-font-smoothing: antialiased; 
	-moz-osx-font-smoothing: grayscale; 
}   

.slick-prev:before { content: "\f053"; }
[dir="rtl"] .slick-prev:before { content: "\f054"; }

[dir="rtl"] .slick-next { left: -10px; top: 70px; right: auto; }
.slick-next:before { content: "\f054"; }
[dir="rtl"] .slick-next:before { content: "\f053"; }


.slick-slider .slick-next::before {
	margin-right: -120%;
}

.slick-slider .slick-prev::before  {
	margin-left: -120%;
}

.slick-slider:hover .slick-prev::before {
	 margin-left: -120%; 
}

.slick-slider:hover .slick-next::before {
	 margin-right: -120%; 
}

section#sec3 .fixed-img,
section#sec7 .fixed-img {
	height:60vh;
}

section#sec7 {
	background-color: #3737AA;
}






/* SECTION 5 */
.inline-svg .ce-left .ce-gallery {
    float: none !important;
}

.inline-svg .ce-gallery[data-ce-columns="1"], 
.inline-svg .ce-gallery[data-ce-columns="1"] .ce-column {
    width: 100% !important;
}

.inline-svg .ce-gallery figure {
    width: 100% !important;
}

.inline-svg svg {
   width:100% !important;
   max-width:100%;
}


.st0{display:none;}
.st1{display:inline;fill:#87DCF5;}
.st2{fill:#e5e5e5; }
.st3{fill:#FFFFFF;}
.st4{fill:#87DCF5; }    
.st6{fill:#e5e5e5; }



svg path.st5 {
	fill: #3737AA !important;
}

svg path.st2 {
	transition: fill .4s ease-in-out;
} 

svg path.st2.svgactive {
	fill:#3737AA !important;
	transition: fill .4s ease-in-out;
} 

svg path.st6 {
	transition: fill .4s ease-in-out;
}

svg path.st6.svgactive {
	fill:#3737AA !important;
	transition: fill .4s ease-in-out;
}







/* Responsive */
@media screen and (min-width: 1980px) {
	.scroll-down {
		bottom:100px;
	}

	#claim {
		top:720px;
	}


}

@media screen and (max-height: 960px) {
	.scroll-down {
		bottom:50px;
	}

	#claim {
		top:initial !important;
		bottom:50px;
		width:440px;
	}
}


@media screen and (max-height: 790px) {
	.slick-dots {
		margin-bottom: -70px !important;
		position:absolute;
	}
}


@media screen and (max-width: 1400px) {
	.slick-slider .slick-next::before { margin-right: -90%; }
	.slick-slider .slick-prev::before  { margin-left: -90%; }
	.slick-slider:hover .slick-prev::before { margin-left: -90%; }
	.slick-slider:hover .slick-next::before { margin-right: -90%;}
}


@media screen and (max-width: 1230px) {

	#keyvisual {
		position: absolute;
		width: auto;
		height: auto;
		right: 15px;
		top: 0;
		/* padding-right:50px; */
	}

	#keyvisual figure img {
		max-width:540px !important; 
		float:right;
	}

	#claim {
		/*left:15px;
		bottom:60px; 
		width:440px; */
	}

	.scroll-down {
		right:15px;
	}


}

@media screen and (max-height: 930px) {

	#keyvisual {
		position: absolute;
		width: auto;
		height: auto;
		right: 15px;
		top: 0;
		/* padding-right:50px; */
	}

	#keyvisual figure img {
		max-width:500px !important; 
		float:right;
	}

	#claim {
		position:absolute;
		left:15px;
		top:initial !important;
		bottom:60px;
		width:440px;
	}

	.scroll-down {
		right:15px;
	}

}


@media screen and (max-width: 1080px) {

	#keyvisual {
		position: absolute;
		width: auto;
		height: auto;
		right: 15px;
		top: 0;
		/* padding-right:50px; */
	}

	#keyvisual figure img {
		max-width:450px !important; 
		float:right;
	}

	#claim {
		top:initial !important;
		bottom:60px;
		width:440px;
	}



}

@media screen and (max-width: 991px) {

	.home #logo {
		position:absolute;
		left:15%;
		margin-left:0px; 
		display:block;
		top:300px;
		transform:none;
		max-width:100%;
    	width:350px;
		animation: logozoom 2s ease-in-out forwards;
		animation-delay: 0.4s;
	}

	@keyframes logozoom {
    	0% {
        	transform:scale(1.0);
    	}
    	100% {
        	transform:scale(0.5);
        	top:-1px;
        	left:0;
			margin-left:-72px;
    	}
	}

	.home #logo.stopanimate {
		position:absolute;
		left:15%;
		margin-left:0px; 
		display:block;
		top:300px;
		transform:none;
		max-width:100%;
    	width:350px;
		animation: logozoom 0s ease-in-out forwards;
		animation-delay: 0s;
	}

	.home .bg-blue:first-child,
	.home .bg-blue:first-child > .container,
	.home .bg-blue:first-child > .container > div {
		height:auto;
		min-height:calc(100vh - 80px);
	}

	#keyvisual {
		position: relative;
		width: 100%;
		height: auto;
		right: 0;
		top:0;
		/*padding-right:50px; */
	}
	
	#keyvisual figure img {
		position:relative;
		width: 100%;
		max-width:380px !important;
		float:right;
	}

	#claim {
		position:absolute;
		left:15px !important;
		bottom:25px !important;
		width:70% !important;
	}


	#sec2 {
		height:calc(80vh - 80px);
	}

	.slick-slider .slick-next::before { display:none; }
	.slick-slider .slick-prev::before  { display:none; }


	.slick-dotted.slick-slider {
		margin-bottom: 0px !important;
	}

	.slick-dots {
		position:absolute;
		margin-bottom:-70px; 
	}

	.scroll-down {
		bottom: 15px;
	}

}




@media screen and (max-width: 767px) {	

	#sec5 .col-md-6 {
		margin-bottom:10px !important;
	}
	.inline-svg,
	.inline-svg .ce-gallery,
	.inline-svg .ce-column 	 {
		margin-bottom:0px !important;
	}

	.inline-svg svg {
		width: 100% !important;
		max-width: 480px;
	}


	.home .bg-blue:first-child,
	.home .bg-blue:first-child > .container,
	.home .bg-blue:first-child > .container > div {
		height:auto;
		min-height:auto; 
	}

	#claim {
		position:relative !important;
		left:initial !important;
		bottom:initial !important;
		width:86%; 
		margin-top:30px; 
		padding-bottom:30px; 
	}

	#sec2 {
		height:calc(86vh);
	}
}



@media screen and (max-width: 576px) {

	.home #logo {
		position:absolute;
		left:5%;
		margin-left:0px; 
		display:block;
		top:250px;
		transform:none;
		max-width:100%;
    	width:350px;
		animation: logozoom 2s ease-in-out forwards;
		animation-delay: 0.4s;
	}

	@keyframes logozoom {
    	0% {
        	transform:scale(1.0);
    	}
    	100% {
        	transform:scale(0.5);
        	top:-1px;
        	left:0;
			margin-left:-72px;
    	}
	}

	.home #logo.stopanimate {
		position:absolute;
		left:5%;
		margin-left:0px; 
		display:block;
		top:250px;
		transform:none;
		max-width:100%;
    	width:350px;
		animation: logozoom 0s ease-in-out forwards;
		animation-delay: 0s;
	}
/*
	#keyvisual {
		position: relative;
		width: 100%;
		height: auto;
		right: 0;
		top:0;
		padding-right:0;
	}
	*/


	#claim {
		width:100% !important;
	}

	#claim p {
		/*margin-right:25px; */
	}

	.scroll-down {
		display:none;
	}


	#sec2 .container {
		 position: relative;
		 top: initial !important;
		 left: initial !important;
		 transform: none; 
	}

	#sec2.bg-white {
		padding: 40px 0px 40px 0px !important;
	}

	.slider-item h1, 
	.slider-item p   {
		text-align:center !important;
	}

	.slick-slide .ce-gallery .ce-column img {
		max-width: 180px !important;
		height: auto;
	}

	.slick-dots {
		position:absolute;
		margin-bottom:5px; 
	}

	#inhalt ul.slick-dots {
		margin-left: 0px !important;
	}

	.slider-item h1 {
		margin-bottom: 12px !important;
		font-size:30px !important;
	}

.slick-dots {
	position: relative;
	bottom:initial !important;
	margin-bottom:-20px !important;
}

}



@media screen and (max-width: 520px) {	
	.inline-svg svg {
		width: 100% !important;
		max-width: 280px;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}

	.slick-slide .ce-gallery .ce-column img {
		max-width: 150px !important;
		height: auto;
	}

	#keyvisual figure img {
		width: 100%;
		max-width:100% !important;
	}

	#claim {
		margin-top:10px !important; 
	}

}



@media screen and (max-width: 375px) {
	#sec2 {
		height:calc(100vh - 80px);
	}

}