@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300,400');

.cf::after {
    content: "";
    clear: both;
    display: table;
}

.fll{
	float: left;
}

.flr{
	float: right;
}

body{
	font-family: 'Roboto Slab', serif;
}

div{
	box-sizing: border-box;
}

.wrapper{
	width: 94%;
	margin: 0 auto;
}

.trenner{
	width: 94%;
	height: 75px;
	margin: 0 auto;
}

.header{
	position: relative;
	height: 620px;
    width: 100%;
	background-image: url('../images/header.jpg');
	background-size: cover;
	background-repeat: no-repeat;
}

#distortion{
	height: 100vh;
}

.overlay{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.2);
}

.header_logo_holder{
	position: absolute;
	width: 550px !important;
	height: 313px !important;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.header_logo_holder img{
	width: 90%;
}

.header_logo_holder span{
	display: block;
	color: #fff;
	font-size: 17pt;
	text-shadow: 0px 0px 30px rgba(0, 0, 0, 1);
}

.header_arrow_holder{
	position: absolute;
	bottom: 20%;
	left: 50%;
	transform: translateX(-50%);
	width: auto !important;
	height: auto !important;
}

.header_arrow_holder i{
	font-size: 100px;
	color: #fff;
	text-shadow: 0px 0px 30px rgba(0, 0, 0, 1);
	cursor: pointer;
}

.imp_dt_holder{
	position: absolute;
	bottom: 7%;
	right: 40px;
	color: #fff;
	font-size: 9pt;
}

.imp_dt_holder span{
    font-size: 12pt;
}

.imp{
	cursor: pointer;
	margin-left: 25px;
	text-shadow: 0px 0px 30px rgba(0, 0, 0, 1);
}

.imp a{
	text-decoration: none;
	color: #fff;
}

.imp:hover{
	text-decoration: underline;
}

.dt{
	cursor: pointer;
	text-shadow: 0px 0px 30px rgba(0, 0, 0, 1);
}

.dt a{
	text-decoration: none;
	color: #fff;
}

.dt:hover{
	text-decoration: underline;
}

.wolle_border{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 2px dashed #fff;
	width: 97%;
	height: 90%;
	text-align: center;
}

.wolle_border span{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 3rem;
	line-height: 4rem;
}

.section{
    position: relative;
    height: 100vh;
    width: 100%;
}

.section_1{
    background-image: url(../images/wolle-background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.section_1 .lila_box{
    position: absolute;
    color: #fff;
    height: 25%;
    width: 48%;
    top: 2vw;
    left: 17%;
    background-color: #6B2DA3;
}

.section_1 .lila_box .wolle_border span{
    font-size: 3.5vw;
    line-height: 4vw;
}

.section_1 .wolle{
    position: absolute;
    width: 30%;
    bottom: 15%;
    left: 15%;
    background-color: #6B2DA3;
}

.section_1 .text{
    position: absolute;
    right: 20%;
    bottom: 50px;
    width: 28vw;
    font-size: 13pt;
    color: #800044;
    line-height: normal;
    font-weight: 300;
    padding: 15px;
    background-color: rgba(255,230,243,0.7);
}

.section_1 .text span{
    font-size: 18pt;
    line-height: 2vw;
    font-weight: 400;
}

.section_2{
    background-image: url(../images/winter_kollektion.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.section_2 .text{
    position: absolute;
    left: 8%;
    top: 50px;
    width: 30vw;
    line-height: normal;
    font-weight: 300;
    font-size: 12pt;
    color: #fff;
    padding: 31px;
    background-color: rgba(58,10,102,0.7);
}

.section_2 .text span{
    font-size: 18pt;
    font-weight: 400;
}

.section_2 .rot_box{
    position: absolute;
    color: #fff;
    height: 12%;
    width: 50%;
    bottom: 15%;
    right: 5%;
    background-color: #800044;
}

.section_2 .rot_box .wolle_border{
    height: 85%;
}

.section_2 .rot_box span{
    width: 100%;
    font-size: 2.5vw;    
}

.section_2 .camera_green{
    position: absolute;
    height: 120px;
    width: 150px;
    top: 30%;
    right: 32%;
    background-color: #4B801A;
}

.section_2 .camera_green img{
    position: absolute;
    top: 50%;
    width: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.section_3{
    background-image: url(../images/sommer.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.section_3 .text{
    position: absolute;
    right: 13%;
    bottom: 50px;
    width: 30%;
    font-size: 12pt;
    font-weight: 300;
    color: #800044;
    padding: 15px 30px 225px;
    background-color: rgba(255,230,243,0.7);
    line-height: normal;
}

.section_3 .text span{
    font-size: 16pt;
    font-weight: 400;
}

.section_3 .grün_box{
    position: absolute;
    color: #fff;
    height: 13%;
    width: 45%;
    top: 15%;
    left: 10%;
    background-color: #4B801A;
}

.section_3 .grün_box span{
    width: 100%;
	font-size: 3vw;
}

.section_3 .camera_lila{
    position: absolute;
    height: 75px;
    width: 100px;
    bottom: 35%;
    left: 29%;
    background-color: #3A0A66;
}

.section_3 .camera_lila img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.section_4{
    background-image: url(../images/lebensqualitaet.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.section_4 .text{
    position: absolute;
    right: 9%;
    bottom: 50px;
    width: 30%;
    font-size: 12pt;
    color: #800044;
    font-weight: 300;
    line-height: normal;
    padding: 15px 30px 15%;
    background-color: rgba(255,230,243,0.7);
}

.section_4 .text span{
    font-size: 18pt;
    font-weight: 400;
}

.section_4 .pink_box{
    position: absolute;
    color: #fff;
    height: 75px;
    width: 600px;
    bottom: 10%;
    left: 8%;
    background-color: #CC2980;
}

.section_4 .pink_box span{
    width: 100%;
    text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.7);
    font-size: 2rem;
}

.section_4 .camera_lila{
    position: absolute;
    height: 75px;
    width: 100px;
    top: 50%;
    left: 29%;
    background-color: #3A0A66;
}

.section_4 .camera_lila img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.section_5{
    background-image: url(../images/map.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.section_5 .pink_box{
    position: absolute;
    color: #fff;
    height: 75px;
    width: 600px;
    bottom: 10%;
    right: 8%;
    background-color: #CC2980;
}

.section_5 .text{
    position: absolute;
    left: 10%;
    top: 0;
    width: 45%;
    font-size: 14pt;
    color: #fff;
    padding: 15% 20px 5%;
    background-color: rgba(58,10,102,0.7);
}

.section_5 .text span{
    font-size: 12pt;
}

.section_6{
    background-image: url(../images/kontakt_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.section_6 .text{
    position: absolute;
    right: 13%;
    top: 25%;
    width: 25%;
    font-size: 10pt;
    color: #800044;
    padding: 15px;
    background-color: rgba(255,230,243,0.7);
}

.section_6 .text span{
    font-size: 12pt;
}

.section_6 .grün_box{
    position: absolute;
    color: #fff;
    height: 75px;
    width: 600px;
    top: 10%;
    left: 8%;
    background-color: #4B801A;
}

.section_6 .grün_box span{
    width: 100%;
}

.section_6 iframe{
    position: absolute;
    left: 8%;
    top: 22%;
    width: 600px;
    height: 80%;
    overflow: scroll;
}

.section_7{
	background: rgb(58,10,102);
}

.section_7 .text_impressum{
	display: block;
	margin: 0 auto;
	width: 85%;
	color: #fff;
	line-height: normal;
}

.section_7 .text_impressum a{
	color: #fff;
	text-decoration: none;
}

.section_7 .text_impressum a:hover{
	text-decoration: underline;
}

.navi_holder .shop_link{
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.navi_holder .shop_link a{
	height: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    text-decoration: none;
}

.navi_holder{
    position: fixed;
    top: 0;
	left: 50%;
	transform: translateX(-50%);
    height: 50px;
    width: 94%;
    z-index: 100;
}

.navi_bar{
    height: 100%;
    background-color: #fff;
    padding: 4px 5px;
}

.navi_bar img{
    height: 100%;
    cursor: pointer;
}

.footer_holder{
    position: fixed;
    bottom: 0;
	left: 50%;
	transform: translateX(-50%);
    height: 50px;
    width: 94%;
    z-index: 100;
}

.footer_bar{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: relative;
    justify-content: space-between;
    height: 100%;
    color: #800044;
    background-color: #fff;
	padding: 4px 5px;
}

.footer_bar span{
    font-size: 9pt;
	line-height: 50px;
}

.footer_bar span a{
    text-decoration: none;
    color: #800044;
}

.footer_bar span a:hover{
    text-decoration: underline;
}

.footer_bar span:nth-of-type(2){
    margin-left: 25px;
}

.footer_bar img{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.footer_bar div:nth-of-type(3){
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.footer_bar .facebook{
    position: relative;
}

.footer_bar .facebook a{
	text-decoration: none;
    color: #800044;
    height: 100%;
    display: block;
    padding-right: 35px;
}

.footer_bar .facebook a:hover{
    text-decoration: underline;
}

.footer_bar .facebook img{
    position: absolute;
    width: 30px;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
}

.popupNavi{
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
	z-index: 99999;
    transform: translate(-50%, -50%);
    background: #800044;
    width: 90%;
    height: 90%;
}

.popupNavi .close_navi:before{
	content: '✖';
	color: #fff;
}

.popupNavi .close_navi{
	cursor: pointer;
	position: absolute;
	text-align: center;
	line-height: 50px;
    top: 10px;
    right: 10px;
	z-index: 1;
	background-color: #4B801A;
	border-radius: 100%;
	height: 50px;
	width: 50px;
}

.popupNavi .close_navi .wolle_border{
	border-radius: 100%;
	height: 85%;
	width: 85%;
}

.popupNavi .wolle_border{
    height: 95%;
	width: 95%;
}

.popupNavi .wolle_border div{
    position: relative;
    height: 12.5%;
    cursor: pointer;
}

.popupNavi .wolle_border span{
    position: absolute;
	color: #fff;
    left: 50%;
    top: 50%;
	font-size: initial;
    transform: translate(-50%, -50%);
}

.popupNavi .wolle_border div:hover span{
	text-decoration: underline;
}

.lightbox{
	position: fixed !important;
	width: auto !important;
	left: 50% !important;
	top: 50% !important;
	transform: translate(-50%, -50%) !important;
}

/* impressum */

#main{
	position: relative;
	background-image: url(../images/kontakt_bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
	padding-bottom: 50px;
	color: #fff;
}

.overlay_impressum{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.5);
}

.text_impressum{
	position: relative;
	z-index: 100;
}

.scroll_to_imp:hover{
	cursor: pointer;
	text-decoration: underline;
}

/* impressum */

@media screen and (max-height: 790px){
	.section_6 .grün_box{
		display: none;
	}
}

@media screen and (max-width: 1600px){
    .section_1 .text{
        width: 32vw;
        right: 14%;
    }
}

@media screen and (max-width: 1250px){
    .navi_holder {
        height: 50px;
    }

    .footer_holder{
        height: 50px;
    }

    .section_1 .text{
        font-size: 11pt;
    }

    .section_1 .text span{
        font-size: 13pt;
    }

    .section_1 .lila_box {
        width: 40vw;
        height: 15vw;
        left: 7%;
        top: 10%;
    }
    
    .section_2 .text {
        width: 80%;
        left: 50%;
        transform: translateX(-50%);
        top: 50px;
    }
    
    .section_2 .camera_green {
        right: unset;
        bottom: 15%;
        left: 20%; 
        top: unset;
    }
    
    .section_2 .rot_box {
        width: 40vw;
        bottom: 15%;
        right: 13%;
    }
    
	.section_3 .text{
		width: 40%;
		right: 5%;
	}
	
	.section_3 .grün_box{
		top: 10%;
		left: 5%;
	}

	.section_4 .text{
		width: 35%;
		right: 3%;
	}
	
	.section_4 .pink_box{
		left: 5%;
		width: 55%;
	}
	
	.section_4 .pink_box span{
		font-size: 2vw;
	}
	
    .section_6 .text{
        right: 5%;
    }
}

@media screen and (max-width: 1050px){
	.wrapper{
            width: 100%;
	}
	
	.navi_holder{
		height: 50px;
		padding: 0px 5px;
		background-color: #fff;
		width: 100%;
	}
	
	.footer_holder{
		height: 50px;
		padding: 0px 5px;
		background-color: #fff;
		width: 100%;
	}
	
	.wolle{
            display: none;
	}
	
	.header_logo_holder {
            width: 75%;
	}
	
	.section_1 .text{
            width: 90%;
            left: 50%;
            transform: translateX(-50%);
	}
	
	.section .text{
            font-size: 2vh;
            line-height: normal;
	}
	
	.section  .text span{
            font-size: 2.5vh;
            line-height: normal;
	}
	
	.section_1 .text{
            bottom: 50px;
	}
	
	.section_1 .lila_box{
		width: 90%;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.section_2 .text {
		top: 50px;
	}
   
	.section_2 .rot_box{
		bottom: 10%;
	}
	
	.section_2 .camera_green{
		bottom: 10%;
		height: 12%;
	}
	
	.section_3 .text{
		width: 70%;
		bottom: 50px;
		padding: 15px 30px 125px;
	}
	
	.section_3 .grün_box{
		width: 50vw;
		top: 15%;
	}
	
	.section_3 .camera_lila{
		left: 7%;
	}
	
	.section_4 .text{
		width: 50%;
		bottom: 50px;
		padding-bottom: 15px;
	}
	
	.section_4 .pink_box{
		width: 60vw;
		top: 14%;
	}
	
	.section_4 .pink_box span{
		font-size: 3.2vw;
	}
	
	.section_4 .camera_lila{
		left: 15%;
	}
	
	.section_6 .text{
		display: none;
	}
	
	.section_6 .grün_box{
		display: none;
	}
	
	.section_6 .navi_holder, .section_6 .footer_holder{
		display: none;
	}
	
	.section_6 iframe{
		position: absolute;
		left: 50%;
		top: 50px;
		width: 95%;
		height: 100vh;
		transform: translateX(-50%);
	}
	
	.section_7 .text_impressum{
		display: block;
		margin: 0 auto;
		width: 95%;
		color: #fff;
		line-height: normal;
	}
}

@media screen and (max-width: 900px){
	
	.navi_holder{
		z-index: 9999;
	}
	
	.footer_holder{
		z-index: 9999;
	}
	
	.lightbox{
		z-index: 999999;
	}
	
	.header_arrow_holder{
		bottom: 0px;
	}
	
	.section{
		height: calc(100vh - 25px);
	}
	
	.section_1 .text span{
		font-size: 12pt;
	}
	
	.section_3 .camera_lila{
		bottom: unset;
		left: unset;
		right: 10%;
		top: 15%;
	}
	
	.section_7{
		padding-bottom: 50px;
		height: auto !important;
	}
	
	.section_7 .text_impressum{
		padding: 2rem;
	}
	
}

@media screen and (max-width: 768px){
	.wolle_border span {
		font-size: 4vw;
		line-height: normal;
	}
	
	.section_2 .camera_green{
		left: 10%;
	}
	
	.section_2 .rot_box{
		right: 10%;
	}
	
	.section_2 .rot_box span{
		font-size: 3.5vw;
	}
	
	.section_3 .text{
		padding: 15px 30px 40px;
	}
	
	.section_4 .text{
		width: 90%;
		right: unset;
		left: 50%;
		transform: translate(-50%);
	}
	
	.section_4 .camera_lila{
		left: unset;
		right: 5%;
		top: 14%;
	}
	
	.section_5 .pink_box{
		width: 80vw;
		bottom: 5%;
		left: 5%;
	}
	
	.section_5 .text{
		top: 50px;
	}
	
	.section_6 {
		height: 800px;
	}
	
	.section_6 iframe{
		top: 25px;
		height: 800px;
	}
}

@media screen and (max-width: 650px){
	
	.header_logo_holder{
		width: 70% !important;
		height: auto !important;
	}
	
	.header_arrow_holder{
		bottom: 80px;
	}
	
	.section_3 .grün_box span{
		font-size: 14pt;
		width: 95%;
	}
}

@media screen and (max-width: 550px){
	
	.section .text{
		font-size: 10pt;
	}
	
	.section_3{
		height: 600px;
	}
	
	.section_3 .grün_box, .section_3 .camera_lila{
		top: 5%;
	}
	
	.section_3 .text{
		font-size: 12pt;
		width: 90%;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.section_3 .camera_lila{
		left: unset;
		right: 5%;
	}
	
	.section_5 .pink_box{
		left: 50%;
		transform: translateX(-50%);
	}
	
	.section_5 .text{
		width: 80%;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.footer_bar .facebook a{
		padding: 0px;
	}
	
	.footer_bar .facebook span{
		display: none;
	}
	
	.footer_bar .facebook img{
		right: unset;
	}
}

@media screen and (max-width: 450px){
	.section{
		height: auto;
	}
	
	.header{
		height: 100vh;
	}
	
	.section_1{
		height: 630px;
	}
	
	.section_1 .lila_box{
		top: 5%;
	}
	
	.section_2{
		height: 800px;
	}
	.section_2 .rot_box, .section_2 .camera_green{
		bottom: 5%;
	}
	
	.section_3{
		height: 725px;
	}
	
	.section_4{
		height: 600px;
	}
	
	.section_4 .pink_box{
		top: 5%;
		width: 50vw;
	}
	
	.section_4 .camera_lila{
		top: 5%;
	}
	
	.section_5{
		height: 550px;
	}
	
	.section_6{
		height: 800px;
	}
	
	.section_2 .text{
		width: 90%;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.section_2 .camera_green{
		left: 5%;
	}
	
	.section_2 .rot_box{
		right: 5%;
	}
}

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

	.footer_bar div a span{
		display: none;
	}
	
	.footer_bar span:nth-of-type(2){
		margin-left: 10px;
	}
	
	.section_4 .text{
		width: 90%;
	}
	
	.shop_link span{
		display: none;
	}
}