@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Merienda:wght@700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');

.weLike{
	font-family: 'Dancing Script', cursive;
}

.descriptionImg {
	max-width: 50%;
	position: relative;
	margin-top: -80px;
	z-index:-1;
}
.descriptionImgP {
	max-width: 60%;
	position: relative;
	margin-top: -80px;
	z-index:-1;
}
.planImg {
	max-width: 50%;
	position:relative;
	margin: -80px 0 0 0;
	float:right;
}

.title-1R {
	font-size:60px;
	color: #E1E1E0;
}
.title-2R {
	font-size:60px;
	color: #BDDFCF;
}
.title-3R {
	font-size:60px;
	color: #C9C1B3;
}
.title-4R {
	font-size:60px;
	color: #BBE2EF;
}
.title-P {
	font-size:60px;
	color: #BCB3F2;
}
.title-access {
	font-size:60px;
	color: #A7F2BC;
}
.title-green {
	font-size:60px;
	color: #79AB7F;
}
.title-waterproof {
	font-size:60px;
	color: #4CBFC7;
}
.title-modul {
	font-size:60px;
}
.title-O2 {
	font-size:60px;
	color: #FFDDB1;
}
.title-O2B {
	font-size:60px;
	color: #DC8F86;
}
.title-O3 {
	font-size:60px;
	color: #94C69A;
}
.title-KW {
	font-size:60px;
	color: #feda9e;
}
.title-coco {
	font-size:60px;
	color: #FFC666;
}
.title {
	font-size:60px;
	color: #39353D;
}
.description-grid{
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns:  auto auto;
}

.description-grid p , ul {
	font-family: 'Poppins', sans-serif;
}
.description-grid ul{
	margin-left: -10px;
}
.vorteile{
	list-style: none; 
	left: 0;
	text-indent:-2.5em;
}

.vorteile li:before {
    content: "+";
	font-weight: 1000;
	text-align: right;
	margin-right: 10px;
}
.design-P{
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 1fr 1fr;
}
.titleLine-1R{
	background-color: #E1E1E0;
	height:3px; ;z-index:1;
	background-position:center;
	margin-top: -50px; width: 100%;
}
.titleLine-2R{
	background-color: #BDDFCF;
	height:3px; ;z-index:1;
	background-position:center;
	margin-top: -50px; width: 100%;
}
.titleLine-3R{
	background-color: #C9C1B3;
	height:3px; ;z-index:1;
	background-position:center;
	margin-top: -50px; width: 100%;
}
.titleLine-4R{
	background-color: #BBE2EF;
	height:3px; ;z-index:1;
	background-position:center;
	margin-top: -50px; width: 100%;
}
.titleLine-Access{
	background-color: #A7F2BC;
	height:3px; ;z-index:1;
	background-position:center;
	margin-top: -50px; width: 100%;
}
.titleLine-O2{
	background-color: #FFDDB1;
	height:3px; ;z-index:1;
	background-position:center;
	margin-top: -50px; width: 100%;
}
.titleLine-O3{
	background-color: #94C69A;
	height:3px; ;z-index:1;
	background-position:center;
	margin-top: -50px; width: 100%;
}
.titleLine-KW{
	background-color: #feda9e;
	height:3px; ;z-index:1;
	background-position:center;
	margin-top: -50px; width: 100%;
}
.titleLine{
	background-color: #39353D;
	height:3px; ;z-index:1;
	background-position:center;
	margin-top: 0;
	width: 100%;
}/* Big ICONS */
.iconWrapper2 {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	max-width: 60%;
	min-width: 40%;
	margin: 3em 0 5em -2em ;
}
.iconWrapper3 {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	max-width: 60%;
	min-width: 40%;
	margin: 3em 0 5em -1em ;
}.iconWrapper4 {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	max-width: 100%;
	min-width: 80%;
	margin: 3em 0 5em 0 ;
}
.icons-big {
	font-size: 45px;
	color: white;
	text-align: center;
	margin-top: 5px;
}
.iconCircle {
	background-color: #E1E1E0;
	border-radius: 50%;
	height: 80px;
	width: 80px;
	border: 3px solid #E1E1E0;
}
.iconCircle2 {
	background-color: #BDDFCF;
	border-radius: 50%;
	height: 80px;
	width: 80px;
	border: 3px solid #BDDFCF;
}
.iconCircle3 {
	background-color: #C9C1B3;
	border-radius: 50%;
	height: 80px;
	width: 80px;
	border: 3px solid #C9C1B3;
}
.iconCircle4 {
	background-color: #BBE2EF;
	border-radius: 50%;
	height: 80px;
	width: 80px;
	border: 3px solid #BBE2EF;
}
.iconCircle5 {
	background-color: #BCB3F2;
	border-radius: 50%;
	height: 5em;
	width: 5em;
	border: 3px solid #BCB3F2;
}
.iconCircleO2 {
	background-color: #FFDDB1;
	border-radius: 50%;
	height: 80px;
	width: 80px;
	border: 3px solid #FFDDB1;
}
.iconCircleO2B {
	background-color: #DC8F86;
	border-radius: 50%;
	height: 80px;
	width: 80px;
	border: 3px solid #DC8F86;
}
.iconCircleO3 {
	background-color: #94C69A;
	border-radius: 50%;
	height: 80px;
	width: 80px;
	border: 3px solid #94C69A;
}
.iconCircleKW {
	background-color: #feda9e;
	border-radius: 50%;
	height: 80px;
	width: 80px;
	border: 3px solid #feda9e;
}
.iconCircleCoco {
	background-color: #FFC666;
	border-radius: 50%;
	height: 80px;
	width: 80px;
	border: 3px solid #FFC666;
}
.iconCircleAccess {
	background-color: #A7F2BC;
	border-radius: 50%;
	height: 80px;
	width: 80px;
	border: 3px solid #A7F2BC;
}
.iconCircleT {
	background-color: #B2CC39;
	border-radius: 50%;
	height: 80px;
	width: 80px;
	border: 3px solid #B2CC39;
}
.circleText {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	
	color: #39353d;
	font-family: 'Poppins', sans-serif;
	font-size: 15.5px;
	width: 7rem;
	margin-left: -1.2rem;
}
.circleTextT {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	color: #39353d;
	font-family: 'Poppins', sans-serif;
	font-size: 15.5px;
	width: 10rem;
	margin-left: -2.7rem;
}
/* Gallery */
.galleryContainer{
	display: block;
}
/* thumb */
.thumb{
	height: 200px;
	width: auto;
}
.design-thumb{
	height:100px;
	width: auto;
}
 @media screen and (max-width: 900px) {
.planImg {
	margin: 0 0 0 0;
	float: none;
}
.thumb{
	height: 150px;
}
.iconWrapper2 {
	flex-direction: column;
	flex-flow:column wrap;
	align-items: center;
	margin: 2em 0 2em 0 ;
}
.iconWrapper3 {
	flex-direction: column;
	flex-flow:column wrap;
	align-items: center;
	margin: 2em 0 2em 0 ;
}
.iconWrapper4 {
	flex-direction: column;
	flex-flow:column wrap;
	align-items: center;
	margin: 2em 0 2em -6rem;
}
.circleText {
	flex-direction: column;
	flex-flow: column wrap;
	width: 13rem;
	margin-left: 7rem;
	margin-top: -4rem;
 }
 .circleTextT {
	flex-direction: column;
	flex-flow: column wrap;
	width: 10rem;
	margin-left: 5rem;
	margin-top: -4rem;
 }
	 @media screen and (max-width: 650px) {
.thumb{
	height: 110px;
}

.description-grid{
	grid-template-rows: 1fr 1fr;
	grid-template-columns: auto;
}
.vorteile {
	margin-left:0;
}
.design-P{
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: auto;
}
.planImg {
	max-width: 450px;
	height: auto;
}
.descriptionImg {
	max-width: 450px;
}
.descriptionImgP {
	max-width: 100%;
}
}