/* Iniciar css */
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,500;1,500&display=swap");

html {
	max-width: 100%;
	overflow-x: hidden;
	font-family: 'Roboto', sans-serif;
	scroll-behavior: smooth;
	color: #fff;
	background: rgb(82, 73, 232);
	background: linear-gradient(8deg, rgba(82, 73, 232, 1) 0%, rgba(204, 239, 255, 1) 0%, rgba(244, 253, 255, 1) 100%);
}

html,
body,
#app {
	height: 100%;
	 width: 100%;
	/*	background-color: #e5e5e5 !important;*/
	font-family: "Roboto", sans-serif;
}


html,
body{
max-width: 100vw;
}

.transatorbox{
	display: none;
}
.sprachwechsel {
	position: absolute;
	top: 35px;
	right: 30px;
	font-size: 1.4rem;
	font-weight: 700;
}

.sprachwechsel a {
	text-decoration: none;
	color: #95c11f;
	margin-left: 7px;
}

.sprachwechsel a:hover {
	color: #46583f;
}

.sprachwechsel a.active:hover {
	color: #95c11f;
}

.sprachwechsel a.active {
	color: #46583f;
}

.slidemenu{
	display: inline-block;
	    margin-right: 17px;
}

.social-icon{
	height: 25px;
}

.social-icon path, .social-icon circle {
	fill: #95c11f; 
}


.social-icon:hover path, .social-icon:hover circle {
	fill: #46583f;
}

.iccondiv{ 
	display: inline-block;
	margin-right: 20px;
}


.iccondiv svg{ 
    margin-top: -12px;
}
 

.introtext {
	text-align: center;
	color: #ffffff;
}

.introtext h1 {
	font-size: 1.9rem;
}

.introtext p {
	font-weight: 300;
	font-size: 1.8rem;
	margin-bottom: 2.5rem;
}


.instatext h1 {
	font-size: 1.9rem;
}

.instatext p {
	font-weight: 300;
	font-size: 1.8rem;
	margin-bottom: 2.5rem;
}

.introtext_low {
	column-count: 2;
}
.introtext_low p{
		font-size: 1.4rem !important;
	margin-bottom: 2rem;
}

.thankyou {
	font-weight: 500 !important;
	margin-top: 4.6rem;
	margin-bottom: 0rem !important;
	font-size: 2rem !important;
}



a.accordion-button {
	color: #fff;
	/*	text-transform: uppercase;*/
	font-weight: 300;
	font-size: 1.6rem;
	text-decoration: none;
	transition: all .3s ease;
}

.accordion-button .oi{ 
	font-size: 1.2rem;
	margin-left:10px;
}

a.accordion-button:hover {
	color: #000;
}

.vidtext {
	font-weight: 500;
	font-size: 21px;
	color: #fff;
}

.logobatterie {
	background-color: #fff;
}


.copyrighttext {
	margin-top: 20px;
	margin-bottom: 20px;
/*	text-align: center;*/
	font-size: 12px;
/*	color: #46583f;*/
}

.logobox {
	top: 4vw;
	position: absolute;
	width: 100%;
	margin-top: 2vw;
	text-align: center;
	z-index: 7;
}

.logo {
	width: 50vw;
}

.berge_hintergrund {
	position: absolute;
	top: 9vw;
	/*15vw*/
	width: 100%;
/*	height: 700px;*/
	width: 100%;
	/*    background: url(/assets/img/berge_hintergrund.svg) top center no-repeat;*/
	z-index: 1;
	/*	background-color: rgba(101,194,196,0.6);*/
}

.berge_tanne {
	position: absolute;
	top: 12vw;
		/*15vw*/
	width: 100%;
/*	height: 700px;*/
	width: 100%;
	/*    background: url(/assets/img/berge_tanne.svg) top center no-repeat;*/
	z-index: 4;
	/*	background-color: rgba(101,194,196,0.6);*/
}

.berge_laub_und_see {
	position: absolute;
	top: 14vw;
	width: 100%;
/*	height: 700px;*/
	width: 100%;
	/*    background: url(/assets/img/laubundsee.svg) top center no-repeat;*/
	z-index: 8;
	/*	background-color: rgba(101,194,196,0.6);*/
}



.greensector {
	background-color: #97be24;
	padding-top: 1px;
	margin-top: -40px;
	position: relative;
	z-index: 20;
}

.waves svg {
	pointer-events: none;
}

.waves {
	position: relative;
	z-index: 15;
	margin-top: 33vw;
	pointer-events: none;
}


#caranim {
	display: none;
	width: 600px;
	height: auto;
	position: absolute;
	right: 100px;
	top: 100px;
	z-index: 20;

}


.vogel {
	position: absolute;
	width: 12vw;
	top: 40vw;
	left: 110vw;
	transition: top 2.3s ease-in, left 2.3s ease-out, transform 2.3s ease-in;
	z-index: 10;
	overflow-x: hidden;
}

@media (max-width: 576px) {
		.vogel{
		top:80vw;
	}
	}

.moves {
	/*transform: scale(3.7) rotate(20deg);*/
	transform: scale(1.4) rotate(25deg);
	top: -20vw;
	left: 20vw;
}

.vogelbild {
	width: 100%;
}



/*fishes*/


.fish1 {
	position: absolute;
	width: 40px;
	top: 35.5vw;
	left: 65vw;
	transition: all .1s ease;
	z-index: 8;
	opacity: .7;
	pointer-events: all;
	overflow-x: hidden;
}

.reverse {
	transform: scale(-1, 1);
	transition: transform .1s linear;
}



/* Overlay*/

.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	opacity: .6;
	transition: all .1s ease;
}

.vidpre {
	filter: brightness(.7);
	transition: all 0.3s ease;
}

/* When you mouse over the container, fade in the overlay icon*/
.vidcol:hover .overlay {
	opacity: 1;
}

.vidcol:hover .vidpre {
	filter: brightness(.9);
}

/* The icon inside the overlay is positioned in the middle vertically and horizontally */
.icon {
	width: 65px;
	position: absolute;
	top: 32%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	text-align: center;
}

.img-full{
	width: 100%;
	margin-bottom: 10px;
}



/* Bootstrap altering */

.vidmodal {
	background-color: transparent !important;
	border: none !important;
}

.vidmodal button.close {
	text-align: right;
	padding: 15px;
	font-size: 40px;
	margin-bottom: -60px;
	background-color: transparent;
	border: 0;
	-webkit-appearance: none;
	z-index: 12;
	color: #fff;
	opacity: 1;
	-moz-appearance: none;
	appearance: none;
}

.partnertitle {
	color: #000;
	font-size: 16px;
	font-weight: 300;
}


button.close:hover {
	color: #000;
}

.modalknopf{
	cursor: pointer;
}

.infomodal .modal-content{
	background-color: #2d3c27 !important;
	color: #FFFFFF;
	border: none !important;
	border-radius: 0px;
	padding: 20px;
}


.infomodal .modal-header{
	border-bottom: none!important;
}

.infomodal .close{
	    color: #fff;
	text-shadow: none;
	opacity: .8;
}


.stsmodal .close{
	    color: #fff;
}

.stsmodal .close{
	    color: #000;
}


.infomodal .modal-content{
	background-color: #fff !important;
	color: #000;

}

.stsmodal a{
	text-decoration: underline;
	color: #2d3c27 !important;
}
.p-border-left{
	border-left: 1px solid #000;
}


.downloadmodal a, .infomodal a{
	color: #000;
}
.downloadmodal a:hover, .infomodal a:hover{
	text-decoration: none;
	font-weight: 700;
}

.downloadimg{
	max-width: 60%;
	max-height: 60%;
}

.download_symbol:hover {
	width: 23px;
	height: 23px;
}

.instalinks{
	background-color: #edf9ff;
}

.infolinks{
	background-color: #d5dad2;
}

.infolinks p {
	font-size: 1.1rem;
}

/*
                                      _                               
                                     (_)                              
  _ __ ___  ___ _ __   ___  _ __  ___ ___   _____ _ __   ___  ___ ___ 
 | '__/ _ \/ __| '_ \ / _ \| '_ \/ __| \ \ / / _ \ '_ \ / _ \/ __/ __|
 | | |  __/\__ \ |_) | (_) | | | \__ \ |\ V /  __/ | | |  __/\__ \__ \
 |_|  \___||___/ .__/ \___/|_| |_|___/_| \_/ \___|_| |_|\___||___/___/
               | |                                                    
               |_|                                                    

*/
@media (max-width: 576px) {

	.introtext_low {column-count: 1;}
	.greensector {margin-top: -1px;}
	.berge_hintergrund {top: 50vw;}
	.berge_tanne {top: 52vw;}
	.berge_laub_und_see {top: 60vw;}
	
	.fish1 { width: 30px;
		top: 81.5vw;}
	
	.waves {   margin-top: 80vw;}
	
	.logobox { top: 20vw;}
	.logo {	width: 60vw;}
	
	.introtext h1 { font-size: 1.7rem;}
	.introtext p { font-size: 1.6rem;}	
	
	.instatext h1 { font-size: 1.7rem;}
	.instatext p { font-size: 1.6rem;}
	
	.p-border-left{
	border-left:none;
}
}


@media (max-width: 992px) {
	.p-border-left{
		border-left:none;
	}
}
/*Dominic Changes*/
.fdn_logo {
    width: 70px;
    margin-left: 18px;
    margin-top: -30px;
}




/* slider    */



.olivesector{
/*	background-color: #7c9a7b;*/
	background-color: #d5dad2;
}




body {
/*    background-color: #7B1FA2*/
}

.container {
    padding-top: 100px;
    padding-bottom: 100px
}

.carousel-inner img {
    width: 100%;
    height: 100%
}

#custCarousel .carousel-indicators {
    position: static;
    margin-top: 20px
}

#custCarousel .carousel-indicators>li {
    width: 100px
}

#custCarousel .carousel-indicators li img {
    display: block;
    opacity: 0.5
}

#custCarousel .carousel-indicators li.active img {
    opacity: 1
}

#custCarousel .carousel-indicators li:hover img {
    opacity: 0.75
}

.carousel-item img {
    width: 80%
}

.carousel-inner {
    width: 100%;
}
	

/* Custom chevron */

.carousel-control-next-icon {
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 410.258 410.258' style='enable-background:new 0 0 410.258 410.258;' xml:space='preserve'%3E%3Cpolygon style='fill:%23FFFFFF;' points='144.206,0 112.206,24 248.052,205.129 112.206,386.258 144.206,410.258 298.052,205.129 '/%3E%3C/svg%3E%0A");
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 410.258 410.258' style='enable-background:new 0 0 410.258 410.258;' xml:space='preserve'%3E%3Cpolygon style='fill:%23FFFFFF;' points='298.052,24 266.052,0 112.206,205.129 266.052,410.258 298.052,386.258 162.206,205.129 '/%3E%3C/svg%3E%0A");
}


.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 40px;
	height: 40px;}


#custCarousel .carousel-indicators {
    position: static;
    margin-top: 0px;
    padding-bottom: 80px;
}

#custCarousel .carousel-indicators li img, #custCarousel .carousel-indicators li:hover img, #custCarousel .carousel-indicators li {
    opacity: 1;
}

.carousel-control-next, .carousel-control-prev {
    bottom: 220px;
}


	
	#custCarousel .carousel-indicators>li {
    width: 108px;
}


.carousel-indicators {
	justify-content: left;}

.olivesector .introtext{
	color: #000;
}