/* ADNIMATIONS   */

#fade0 {
	animation-delay: 1s;    
	animation: fade_simple 2.6s;
    -moz-animation: fade_simple 2.6s; /* Firefox */
    -webkit-animation: fade_simple 2.6s; /* Safari and Chrome */
    -o-animation: fade_simple 2.6s; /* Opera */
	
}

#fade1 {
	margin-top:0px; 
	animation-delay: 1s;    
	animation: fadein 1s;
    -moz-animation: fadein 1s; /* Firefox */
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -o-animation: fadein 1s; /* Opera */
	
}

#fade2 {
	margin-top:0px; 
	animation-delay: 1,5s;    
	animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */	
}

#fade3 {
	margin-top:0px; 
	animation-delay: 3s;    
	animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */	
}

#fade4 {
	margin-top:0px; 
	animation-delay: 4s;    
	animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */	
}


#fade5 {

    -webkit-animation-delay: 5s; /* Safari 4.0 - 8.0 */
    animation-delay: 5s;
	
	animation: tascherein 6s;
    -moz-animation: tascherein 6s; /* Firefox */
    -webkit-animation: tascherein 6s; /* Safari and Chrome */
    -o-animation: tascherein 6s; /* Opera */	
}


@keyframes tascherein {
    from {
        opacity:0;
		margin-top: -160px;
		-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg);

    }
    to {
        opacity:1;
		margin-top: 0px;
		-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);

    }
}

@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
		margin-top: -160px;
		-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg);

    }
    to {
        opacity:1;
		margin-top: 0px;
		-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);

    }
}


@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
		margin-top: -160px;
		-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg);

    }
    to {
        opacity:1;
		margin-top: 0px;
		-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);

    }
}


@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
		margin-top: -160px;
		-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
-webkit-transform: rotate(30deg);

    }
    to {
        opacity:1;
		margin-top: 0px;
		-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);

    }
}






/* FADIN BULLETS FINAL */
@keyframes fadein {
    from {
        opacity:0;
		margin-top: 360px;
    }
    to {
        opacity:1;
		margin-top: 0px;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
		 margin-top: 360px;
    }
    to {
        opacity:1;
		margin-top: 0px;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
         opacity:0;
		 margin-top: 360px;
    }
    to {
        opacity:1;
		margin-top: 0px;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
		 margin-top: 360px;
    }
    to {
        opacity: 1;
		margin-top: 0px;
    }
}



/* FADIN BULLETS FINAL */
@keyframes fade_simple {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fade_simple { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
		margin-top: 0px;
    }
}
@-webkit-keyframes fade_simple { /* Safari and Chrome */
    from {
         opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fade_simple { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}



.off{ opacity:0; top:150px;}
.on{ opacity:1; top:0;}

.off2{  opacity:0; top:-150px; -moz-transform: rotate(30deg); -ms-transform: rotate(30deg);-o-transform: rotate(30deg); -webkit-transform: rotate(30deg); }
.on2{ opacity:1;  top:0; -moz-transform: rotate(0deg); -ms-transform: rotate(0deg);  -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); }

.off3{ opacity:0;  left:120px;}
.on3{ opacity:1;  left:0px;}

.off4{ opacity:0; top:50px; }
.on4{ opacity:1; top:0px;}



.adress p{line-height: 18pt; }
.adress span:after{ content:"·"; margin-right:10px; margin-left:10px;}
.no:after{content:"" !important; }

.bg_grey {background-color:#dadbdf; }
.box_sales{top:170px; right:85px; z-index: 400;}
.box_support{top:170px; left:85px; z-index: 400;}


.headerArea .navbar-light .navbar-nav li a{    background-color: #fff; }


.headerArea{    position: fixed !important;
max-width: 1280px;
 width: 100%;
 top: 0;
z-index: 999;
   -webkit-box-shadow: 0 8px 6px -6px #999;
    -moz-box-shadow: 0 8px 6px -6px #999;
    box-shadow: 0 8px 6px -6px #999;
background-color: rgba(255,255,255,0.9); 
}



.mr10{ margin-right:10px;}
.bg_black{ background-color:#000000 !important; color:#fff !important;}


.b1{ border: 0px dotted #ff0000;}

#taschen{
width: 100%;  height: 430px;
position: absolute;
margin-left:460px; margin-top: -83px;
transition: all ease 2.5s;
}

/*
-250
-305
-405
-193
-305
-135
-412
-315
-102
*/

#tasche1{
width: auto; height: auto; position: absolute;
margin-right: 0px; margin-top: 177px; 
}

#tasche2{
width: auto; height: auto; position: absolute;
margin-left: 104px; margin-top: 122px;
}

#tasche3{
width: auto; height: auto; position: absolute;
margin-left: 231px; margin-top: 22px;
}

#tasche4{
width: auto; height: auto; position: absolute;
margin-left: 231px; margin-top: 234px;
}

#tasche5{
width: auto; height: auto; position: absolute;
margin-left: 424px; margin-top: 122px;
}

#tasche6{
width: auto; height: auto; position: absolute;
margin-left: 464px; margin-top: 292px;
}

#tasche7{
width: auto; height: auto; position: absolute;
margin-left: 544px; margin-top: 15px;
}

#tasche8{
width: auto; height: auto; position: absolute;
margin-left: 634px; margin-top: 112px;
}

#tasche9{
width: auto; height: auto; position: absolute;
margin-left: 667px; margin-top: 315px;
}



/* ANIMATION */

	.parallaxParent {
		height: 100vh;
		overflow: hidden;
	}
	.parallaxParent > * {
		height: 200%;
		position: relative;
		top: 0%;
	}
	
.upme{ margin-top: -90px;}	
	
/*teaser_right css*/
.teaser_right {	padding:0px;     color: #fff;}
.teaser_right h1 {	color:#000;text-align:right;}
.teaser_right h2 {text-align:right;}


/*teaser_right css*/
.teaser_left {	padding:0px;    color: #fff;}
.teaser_left h1 {	color:#000;text-align:left;}
.teaser_left h2 {text-align:left;     padding-left: 3px;}
	
ul.no_bullet {
list-style-type: none;
padding: 0;
margin: 0;
}

#vliste li:before{
	content: url('../images/bullet.jpg');
	display: table-cell;
    float: left;
	height:100%;
	margin-right:30px;
}

#vliste li {margin-top:-20px; margin-left: 24px; margin-bottom:60px; }
#vliste li p{  display: table-cell;}

 

.frontside {
    position: relative;
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    z-index: 2;

}


.frontside{
float:left;
}

.card{background-color:transparent;}
.cb{ background-color:#000; border:0px;}
.frontside .card
 {
    min-height: 312px;
	border:0px;
	
}

.backside .card a {
    font-size: 18px;
    color: #5ac6ad !important;
}

.frontside .card .card-title
{
font-size:14pt;
margin-bottom:0px;
}
.card-text {font-size:12pt; }


.frontside .card .card-body  a{ color:#000;	text-decoration:underline; display:block;height:40px !important;}
.frontside .card .card-body  a:hover{color:#333333;  font-size:14pt;font-weight:600;}
.frontside .card .card-body{ padding:0px; }
.frontside .card .card-body img {    width: 240px;     height: auto;    border-radius: 50%;}

/* Fonts css **/
@font-face {
    font-family: 'GothicA1-Bold';
    src: url('../fonts/GothicA1-Bold.ttf');

}

@font-face {
    font-family: 'GothicA1-Regular';
    src: url('../fonts/GothicA1-Regular.ttf');
}


/*General CSS*/
body {
    font-family: 'GothicA1-Regular';
}
h1,h2,h3,h4,h5,h6{
	font-weight: normal;
	font-family: 'GothicA1-Bold';
}
h1  {font-size: 3.5rem; }
h2 {
	font-family: 'GothicA1-Bold';
    font-size: 26px;
    color: #000;
    letter-spacing: 1px;
    line-height: 7px;
    text-transform: uppercase;
}

input:focus,button:focus{
	outline: none;
}
p{	
    font-family: 'GothicA1-Regular';
	font-size: 19.5px;
}
section{
	padding: 10px 0;
}
a{
	transition: 0.3s;
}
a:hover,a:focus{
	text-decoration: none;
}
img{
	max-width: 100%;
	height: auto;
}

ul{
	margin: 0;
	padding: 0;
}
b,strong{
    font-weight: normal;
      font-family: 'GothicA1-Bold';
}


/* main wrapper css */
.wrapper{
    max-width: 1280px;
    margin:0 auto;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.22);
}

/*Header CSS*/
.headerArea{
	position: relative;
	z-index:999;
	margin-right:0px;
}
.headerArea .logo {
    position: absolute;
    left: 0px;
    z-index: 9;
    width: 100%;
    padding: 17px 16px 30px 19px;
    max-width: 237px;
}


.headerArea .navbar {
    padding: 0px;

	margin-left:auto;
}

.headerArea .navbar-light .navbar-nav li a {
    color: #000;
    padding: 0 15px;
    font-family: 'GothicA1-Bold';
    letter-spacing: 1.5px;
    line-height: 35px;
}


.headerArea .navbar button{
	border:none;
}

/* Banner CSS */
.banner {
	padding: 0;
    position: relative;

	 margin-top: 32px;
	
}


/* Welcome css */

.welcome h2 {
    color: #000;
    margin-bottom: 1em;
}

.welcome p {

    color: #000;
    font-family: 'GothicA1-Regular';
}





/* newsArea css*/
.newsArea{
	padding: 42px 0;
}
.newsitem{
	margin: 30px 0;
}
.newsitem .news-info{
	text-align: center;
}
.newsitem .news-img{
	margin-bottom: 10px;
}
.newsitem .news-info h3{
	font-size: 20px;
	color: #61BE38;
	text-transform: uppercase;
	line-height: 32px;
	letter-spacing: 1px;
	text-align: left;
}
.newsitem .news-info h4{
	font-size: 16px;
	font-family: 'myriad_bold';
	margin-bottom: 15px;
	line-height: 22px;
	text-align: left;
}
.newsitem .news-info p{
	text-align: left;
	margin-bottom: 2em;
}







/* footerArea css*/
.footerArea{
background: rgb(230,230,230); /* Old browsers */
background: -moz-linear-gradient(top, rgba(230,230,230,1) 10%, rgba(255,255,255,1) 28%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(230,230,230,1) 10%,rgba(255,255,255,1) 28%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(230,230,230,1) 10%,rgba(255,255,255,1) 28%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e6e6', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
color:#7b7e7b;
}

.footer-top{
	padding: 44px 0 0 0;
	
}

.footer-bottom{
	padding: 10px 0;
	position: relative;
}

.footer-widget h3{
	font-size: 16px;
	text-transform: uppercase;
	line-height: 30px;
	letter-spacing: 1px;
	color: #000;
	margin-bottom: 14px;
}
.footer-widget ul{
	list-style: none;
	padding: 0;
	margin: 0;
	margin-left:10px;
}
.footer-widget ul li:first-child:after{ content:"|";  margin-left:5px;}
.footer-widget ul li{
	display: block;
	margin-right:5px;
	padding-bottom: 10px;
	 float: left;
}
.footer-widget ul li a{
	font-size: 14px;
	color: #7b7e7b;
	line-height: 22px;

}
.footer-widget ul li a:hover{
	color:#000;
}

.footer-widget ul li.active a{
    font-family: 'GothicA1-Bold';	
}

@media only screen and (min-width:1200px) and (max-width: 1386px){	
	#taschen{
	width: 800px;height: 430px;
	position: absolute;
	margin-left:360px; margin-top: -83px;
	}
}

	

/*========= Device css ===========*/
@media only screen and (min-width:1101px) and (max-width: 1199px){	


.welcome h2 {    font-size: 22px; }

	
}


@media only screen and (min-width:680px) and (max-width: 1199px){	
.navbar-nav {    flex-direction:row !important; margin-left: auto!important;  }

.navbar-collapse {
    -ms-flex-preferred-size: unset !important;
    -ms-flex-positive:unset !important;
    -ms-flex-align:unset !important;

}

.navbar-toggler {display:none;}
.collapse:not(.show){ display:flex!important;}
}


@media only screen and (min-width:991px){
	
	
    .navbar-nav li:hover .dropdown-menu {
        display: block;
    }
	

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




	h1{ font-size:35pt;}
	h2{ font-size:15pt;}
	
	.mr10{ margin-right:0px;}
	.mr-5{ margin-right:0px;}
	
	
    .headerArea .navbar{
        justify-content: flex-end;
        margin: 0;
    }
	.headerArea{ background-color: rgba(255,255,255,0) !important; border-bottom:0px !important;
	
	-webkit-box-shadow:unset;
    -moz-box-shadow:uset;
    box-shadow:unset;

	}
    .headerArea .navbar button {
        padding: 6px 15px;
        z-index: 999;
    }
    .headerArea .navbar-collapse{
		z-index:9999;
        padding: 15px 15px 15px;
        text-align: center;
        background: rgb(255,255,255,0.8);
        
    }
    .headerArea .navbar-light .navbar-nav li a{
        font-size: 18px;
        text-transform: uppercase;
        color: #000;
        border-bottom: 1px solid rgba(255,255,255,0.3);
    }
	

    .headerArea .navbar-light .navbar-nav li a.active{
        font-family: 'GothicA1-Bold';  
        color: #fff;    
    }
    .headerArea .navbar-light .navbar-nav li:last-child>a{
        border-bottom: none;
    }
    .headerArea .navbar-light .navbar-nav li:first-child>a{
        font-size: 18px;
    }
    .headerArea .navbar-light .navbar-nav li:first-child>a>img{
        display: none;
    }
    .headerArea .navbar-nav li .dropdown-menu{
        width: auto;
        padding: 0;
    }
    
}


@media only screen and (min-width:575px) and (max-width: 766px){
	.banner { margin-top:0px;}
#btop{height: 190px; max-width:none !important;}
.a1:after{content:"" !important; display:block;}

    .level-item{
        float: none;
        margin:0 auto;
        width: 345px;
    }
    .level-item:before{
        max-height: 707px;
    }
    .level-item:after{
        top: 456px;
    }
    img.flower-logo{
        top: 432px;
    }
	

}



@media only screen and (min-width:600px) and (max-width: 1124px){	
.welcome h2 {
    font-size: 14pt !important;
    }
	
	.welcome h1 {
    font-size: 37pt!important;
    }
}
	
	
	
@media only screen and (min-width:320px) and (max-width: 575px){
	
	
.banner { margin-top:0px;}
	#btop{height: 190px; max-width:none !important;}
.welcome  h1 {
    font-size: 32px;
}

.welcome h2 {
	 font-size: 12px;
    margin-bottom: 16px;
   
}
.pl-2{padding-left:5px !important; letter-spacing:0;}

p {
    font-family: 'GothicA1-Regular';
    font-size: 13.5px;
}

.pl-5, .px-5 {
    padding-left: 0rem!important;
}
#subline_intro{padding-bottom:10px !important;}

.mx-mobil{    margin-left: auto!important; margin-right:auto !important;}
.footer-widget ul li{font-size: 12px;}
.footer-widget ul li a {
    font-size: 12px;
    color: #7b7e7b;
    line-height: 22px;
}

#vliste li { margin-left: 9px;}
#vliste li:before { margin-right:15px;}

.box_sales{right:25px;}
.box_sales h1{font-size:25pt;}
.box_sales h2{font-size:13pt;}



.box_support{left:25px; }
.box_support h1{font-size:25pt;     margin-left: 20px;}
.box_support h2{font-size:13pt; line-height: 15pt;     margin-left: 20px;}

#support{
background-image: url(../images/bg_clear_mobil.jpg) !important;	
}

#material{
background-image: url(../images/tasche-material_mobil.jpg) !important;	
}

.frontside {    float: none;}
.frontside .card{ margin-bottom:30px;}

.adress span:after{ display:block; content:" "; margin:0px;}
.no:after{  content:"" !important; }
.adress p{line-height: 16pt; }

}

	

@media only screen and (min-width:320px) and (max-width: 1202px){
	
	
		
	    #taschen{
		width: 90%;height: 430px;
		position: absolute;
		margin-left:0px; margin-top: -83px;
		_overflow:hidden;
		}
		
		#tasche2{    margin-top: 62px;}
	    #taschen img{	width: 80%; height: auto; 	}

}	


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

	    #tasche2{    margin-left: 34px;}
		#tasche3{    margin-left: 201px;}
		#tasches4{    margin-left: 141px;}
		#tasche5{    margin-left: 244px;}
		#tasche7{ margin-left: 114px;	margin-top: 295px;}
		
	#taschen img{	width: 80%; height: auto; 	}
	
	
	#btop{height: 190px; max-width:none !important;}
		
		
}