html {
font-size:100%; /* Default: 16px */
}

body{
/*font-family: 'Roboto Condensed', sans-serif;*/
font-family: 'Arial';
background-color:#fff;
line-height:1.9; 
font-size:12px; /* Fallback*/
font-size:0.75rem;  
}

.syndication {
	text-align:right;
}

@media (min-width: 768px){  
	
	body{
		font-size:14px; /* Fallback*/
		font-size:0.875rem;
	}	

}

@media (min-width: 768px){  

	body{
	font size:16px; /* Fallback*/
	font-size:1rem;
	}
	
	.contentheader
	 {
		margin-top:160px;
		margin-bottom:0px;
	}	

}

.mod_formdatalisting table td {    
	border-top: 1px solid #f4f4f4 !important;
	padding:10px 0 !important;
	padding: 15px 10px !important;
	font-size: 90%;
	}

.mod_formdatalisting table tr.even,
.mod_formdatalisting table tr.odd {
	
}


.mod_formdatalisting table tr.even {
	background-color: #ffffff;
}
.mod_formdatalisting table tr.odd {
	    background-color: #f8f8f8;
}

.mod_formdatalisting table tr.even td.label {}
.mod_formdatalisting table tr.odd td.value {}


.pore {
	position:relative;
}


p {
font-weight: 400;
margin: 0 0 2em 0; 
}

.ce_text {
	clear:both;	
	display: block;
    float: left;
}

@media (max-width: 767px){  
	.ce_text {
    float: none;
	}
	.contentheader {
		margin-top:80px;
		margin-bottom:0px;
	}
}

	
.headbtn {
display: block;
    text-align: center;
    padding: 5px;
}

.headbtn a {
line-height: 417% !important;
    font-size: 250%;
    display: block;
    height: 100%;
    color: #fff !important;
    background-color: blue;
}


.main a {
color:#b5c900;
}

.main a:hover,
.main a:focus,
.main a:active {
color:#a0aa3b !important;
underline:none !important;
}

.bg-grey {
	background:#f8f8f8;
}


h1,h2,h3,h4,h5,h6 { 
letter-spacing: 1px;
line-height: 1.5em;
clear:both;
}


h2.hbold,h3.hbold, strong {
font-weight: 600;
}

h1,h2,h3 {
	color:#b5c900;	
}

h4,h5,h6 {
	color:#333;
}

h1,h2 {
font-size: 180%;
font-weight: 300;
margin-bottom:35px;
}

h1.hsmal,h2.hsmal {
font-size: 180%;
margin-bottom:35px;
}

h1.main,
h2.main {
margin-top:80px;
}



h3 {
font-size: 180%; 
font-weight: 300;
margin-bottom: 35px;
margin-top: 0;
}

h4, h5, h6 {
font-size: 180%;
font-weight: 400;
}


@media (min-width: 768px){
h1,h2 {
font-size: 250%;
margin-bottom:35px;
}

h1.hsmal,h2.hsmal {
font-size: 200%;
margin-bottom:35px;
}

h1.main,
h2.main {
margin-top:80px;
}


h3 {
font-size: 200%; 
margin-bottom: 35px;
margin-top: 0;
}

h4, h5, h6 {
font-size: 180%;
}	
}




/* Content Bilder */

/*
.main figure.image_container {
width:100%;
}

.main .ce_gallery figure.image_container {
width:auto;
}
*/

.main .ce_text figure.image_container.float_above,
.main .ce_text figure.image_container.float_below,
.main .ce_text figure.image_container.float_left,
.main .ce_text figure.image_container.float_right {
width:100%;
margin-bottom:25px
}

.main .ce_text figure.image_container.float_above img,
.main .ce_text figure.image_container.float_below img,
.main .ce_text figure.image_container.float_left img,
.main .ce_text figure.image_container.float_right img {
width:100%;
margin-bottom:25px

-webkit-box-shadow: 2px 10px 41px -16px rgba(112,112,112,1);
-moz-box-shadow: 2px 10px 41px -16px rgba(112,112,112,1);
box-shadow: 2px 10px 41px -16px rgba(112,112,112,1);

}

.main .ce_gallery figure.image_container img {
margin-bottom:20px;
}


@media (min-width: 768px){

.main .ce_text figure.image_container.float_above,
.main .ce_text figure.image_container.float_below {
/*height: 400px;*/
overflow: hidden;
}

.main .ce_text figure.image_container.float_above img,
.main .ce_text figure.image_container.float_below img {
position: relative;
top: -25%;
}

.main .ce_text figure.image_container.float_left,
.main .ce_text figure.image_container.float_right {
width:45%;
}

.main .ce_text figure.image_container.float_left {
float:left;
margin-right:25px;
}

.main .ce_text figure.image_container.float_right {
float:right;
margin-left:25px;
}

/*
.main .ce_gallery figure.image_container {
height:160px;
}
*/

.main .ce_gallery figure.image_container img {
margin-bottom:0px;
}

} /* media end */

@media (min-width: 1024px){

/*
.main .ce_gallery figure.image_container {
height:210px;
}
*/

}

@media (min-width: 1200px){

/*
.main .ce_gallery figure.image_container {
height:254px;
}
*/

}

.text-center {
text-align:center;
}

.text-left {
text-align:left;
}

.text-right {
text-align:right;
}

/*

#article-header {
margin-top:150px;
}
*/

#article-header, #article-header-2225, #article-header-1411, #article-header-3107 {
	margin-top:60px;
	margin-top:130px\9; /* IE8 und darunter */
}

@media (min-width: 768px){
#article-header, #article-header-2225, #article-header-1411, #article-header-3107 {
margin-top:90px;
}
div[id^='article-header-']{
	margin-top:90px;
}

}

@media (min-width: 1024px){
#article-header, #article-header-2225, #article-header-1411, #article-header-3107 {
	margin-top:150px;
}
div[id^='article-header-']{
	margin-top:150px;
}
}

.head1 {}

.head2 {}

.head3 {
	max-height:130px\9 !important; /* IE8 und darunter */

}

.head4 {
	max-height:260px\9 !important; /* IE8 und darunter */

}

.head5 {}

.img-responsive {
width:100%;
}

@media (min-width: 768px){

.head1 {
max-height:400px !important;

}

.head2 {
max-height:198px !important;

float:left;
}

.head3 {
max-height:61px !important;
float:left;
}

.head3 figure.image_container {
    width: 75%;
    margin: 0px auto;	
}

.head3.textover figure.image_container:hover img {
  opacity:1 !important;
  transform:scale(1) !important;
 
}



.head4 {
max-height:188px !important;

}

.head5 {
max-height:215px !important;

}


}

@media (min-width: 1024px){

.head1 {
max-height:400px !important;
}

.head2 {
max-height:198px !important;
float:left;
}

.head3 {
max-height:98px !important;
float:left;
}

.head4 {
max-height:225px !important;
}

.head5 {
max-height:215px !important;
}

}

@media (min-width: 1200px){


.head1 {
max-height:400px !important;
}

.head2 {
max-height:198px !important;
float:left;
}

.head3 {
max-height:128px !important;
}

.head4 {
max-height:262px !important;
}

.head5 {
max-height:257px !important;
}


}



.textover {
clear:none !important;
position:relative;
padding:5px;
	max-height: 400px;
    overflow: hidden;
    


	
}

.textover figure.image_container {
overflow: hidden;


background: rgb(0,159,227); /* Old browsers */
background: -moz-linear-gradient(45deg,  rgba(0,159,227,1) 0%, rgba(181,201,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  rgba(0,159,227,1) 0%,rgba(181,201,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  rgba(0,159,227,1) 0%,rgba(181,201,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009fe3', endColorstr='#b5c900',GradientType=1 ); 


}

.textover figure.image_container img {
  -webkit-transition: all 0.9s;
    -moz-transition: all 0.9s;
    -ms-transition: all 0.9s;
    -o-transition: all 0.9s;
    transition: all 0.9s;
    
    opacity:1;
}

.textover figure.image_container:hover img {
transform:scale(1.1);
  -webkit-transition: all 0.9s;
    -moz-transition: all 0.9s;
    -ms-transition: all 0.9s;
    -o-transition: all 0.9s;
    transition: all 0.9s;
    
    opacity:0.6;

}

.textover p,
.textover figcaption {
position: absolute;
margin:0;
bottom: 10px;

background: #000;
background: rgba(0, 0, 0, 0.5);
color:#fff;

padding: 10px;
left: 10px;
right:10px;
font-size:105%;
}

figure.image_container figcaption.caption {
      bottom: -26px;
    position: absolute;
    left: 15px;
    font-size: 80%;
}

#header .ce_form {
display:block;
position:relative;	
color:#333;
}

#header .ce_form input.text {
width: 100%;
font-size:110%;
background: red;
border: none;
margin:0 !important;
border-radius:0px !important;
padding:15px;
color:#fff;
height:60px;
}

.contentheader figure.image_container figcaption {
color:#fff !important;
bottom:10px !important;
}

.mod_newslist a,
a.mod_article, article.mod_article,
.ce_page_teaser {
position:relative;
}


a.mod_article, article.mod_article,
.ce_page_teaser {
max-height:420px;
}

.ce_page_teaser {
clear:none !important;
padding:5px;
}

.mod_newslist img,
.mod_article img,
article.mod_article img,
.ce_page_teaser img {
-webkit-box-shadow: 2px 10px 41px -16px rgba(112,112,112,1);
-moz-box-shadow: 2px 10px 41px -16px rgba(112,112,112,1);
box-shadow: 2px 10px 41px -16px rgba(112,112,112,1);	
}

.ce_page_teaser img,
a.mod_article img,
article.mod_article img {
width:100%;
max-width:100%;	
height:auto;
}

.mod_newslist h3,
.mod_article .ce_text h2,
.ce_page_teaser h1 a {
font-size: 105% !important;
    position: absolute;
    bottom: 76px;
    color: #fff !important;
    background: rgba(0,0,0,0.5);
    margin-bottom:0;
    left: 10px;
    right: 10px;
    padding: 2px 10px;
    font-weight:200;
}


.mod_eventlist {
position: relative;
margin-bottom:0;
padding: 0px;
clear:both;
}

.mod_eventlist h3 {
font-size:130%;
}



.teaser.record {
	position:relative;
	background-color: #b5c900;
	color: #fff;
	padding:15px;	
	margin-bottom: 35px;
	border-bottom:4px solid #000;

}

.teaser.record_first {
	margin-top: 35px;
}

@media (min-width: 768px){
.teaser.record_first {
	margin-top:0px;
}

.teaser.record {
	margin-bottom: 20px;
	margin-top: 20px;
}

	  
}


.teaser.record .field_0,
.teaser.record .field_1,
.teaser.record .field_2, 
.teaser.record .field_3  {
position:absolute;
}



.teaser.record .field_0 {
display:none;
/*
top: -25px;
    left: 15px;
    width: 50px;
    height: 50px;
    display: block;
   
     border-radius: 50px;
     overflow:hidden;	
     background:#ffffff;
     */
}

.teaser.record .field_0 img {

    width: 100%;

}


.teaser.record .field_1 {
    top: 10px;
    right: 15px;
    font-size: 70%;
    text-align: right;
}






.teaser.record .field_2, 
.teaser.record .field_3,
.teaser.record .field_5 {
background: #a0aa3b;
    padding: 1px 4px;
    border-radius: 4px;	
}

@media (min-width: 768px){

.teaser.record .field_2, 
.teaser.record .field_3,
.teaser.record .field_5 {
font-size:80%;
}
}

.teaser.record .field_2 {
    top: 30px;
    left: 15px;
    
}

.teaser.record .field_3 {
top:30px;
right:15px;

}

@media (min-width: 768px){
.teaser.record .field_1 {
    top: 5px;
    
}

.teaser.record .field_2 {
    top: 40px;
    
}

.teaser.record .field_3 {
top:40px;

}
}

.teaser.record .field_4 {
	    margin-top: 60px;
	        margin-bottom: 10px;
    font-size: 135%;
    line-height: 145%;
    border: 1px solid #a0aa3b;
    height: 85px;
    overflow: hidden;
    padding: 5px;
}


@media (min-width: 768px){

.teaser.record .field_4 {

margin-top: 65px;
margin-bottom: 15px;
height: 175px;
overflow: hidden;
    padding: 8px;
}

}

.teaser.record .field_5 {
    display: inline-block; 
}

.teaser.record .fd_info  {
	
}

.teaser.record .fd_info p.back {
margin-top:0;
margin-bottom:0;	
}

.teaser.record .fd_info p.back a {
    border: none;
    
    color: #b5c900;
    background-color: #fff;
    
   padding: 5px 15px;
    margin-bottom: 0;
    float:right;	
}





.single_record {
	width:100%;
}

.single_record .detail-facts {
}

.single_record .detail-facts .field_0 {
	color: #b5c900;
	    letter-spacing: 1px;
    line-height: 1.5em;
    clear: both;
    font-size: 180%;
    font-weight: 300;
    margin-bottom: 10px;
    margin-top: 0;
}

.single_record .detail-facts .field_1 {
    background: #a0aa3b;
    padding: 1px 4px;
    border-radius: 4px;
    display: inline-block;
    color: #fff;
}

.single_record .detail-facts .field_2 {
	margin-top:25px;
	margin-bottom:25px;
}

.single_record .detail-facts .field_3 {
margin-bottom:25px;
}

.single_record .detail-facts .field_3 img {
width:100%;
}


.single_record .detail-facts .field_5 {
}


.single_record .company-facts {
}

.single_record .company-facts .field_6 {
}

.single_record .company-facts .field_6 img {
	display:block;
	width: 100%;
	height:auto;
}

@media (min-width: 768px){
	
}

.single_record .company-facts .field_7 {
	font-weight:bold;
}

.single_record .company-facts .field_7:before {
	content:'Veranstalter:';
	font-weight:normal;
}

.single_record .company-facts .field_8 {
}

.single_record .company-facts .field_8:before {
	content:'Kontakt:';
}








.single_record .hard-facts {
	background-color:#333;
	color:#fff;
	padding:10px;
	text-transform: uppercase;
	    font-size: 100%;
    line-height: 140%;
        margin-top: 50px;
        position:relative;
}

@media (min-width: 768px){

.single_record .hard-facts {
	font-size: 80%; 
}

}



.single_record .hard-facts:before {
content: 'Information';
    position: absolute;
    top: -25px;
    color: #333;
    font-size: 200%;
    margin-left: -10px;
}

.single_record .hard-facts .field_8,
.single_record .hard-facts .field_9,
.single_record .hard-facts .field_10,
.single_record .hard-facts .field_11, 
.single_record .hard-facts .field_12, 
.single_record .hard-facts .field_13,
.single_record .hard-facts .field_14, 
.single_record .hard-facts .field_15,
.single_record .hard-facts .field_16,
.single_record .hard-facts .field_17 {
	border-bottom: 1px dotted #777;
    margin-bottom: 10px;
}

.single_record .hard-facts .field_9:before {
content:'Wann:';
clear:both;
}
.single_record .hard-facts .field_10:before {
content:'Beginn:';
}
.single_record .hard-facts .field_11:before {
content:'Ende:';
}
.single_record .hard-facts .field_12:before {
content:'Art:';
}
.single_record .hard-facts .field_13:before {
content:'Treffpunkt:';
}
.single_record .hard-facts .field_14:before {
content:'Plz:';
}
.single_record .hard-facts .field_15:before {
content:'Web:';
}
.single_record .hard-facts .field_16:before {
content:'Anmeldung? -';
}
.single_record .hard-facts .field_17:before {
content:'Link:';
}
.single_record .hard-facts .field_18:before {
content:'Eignung:';
}



.event.layout_teaser {
	
}


.event.layout_teaser h3 {
background-color: #b5c900;
color: #fff;
padding:15px;
 min-height:160px;
 border-bottom:4px solid #000;
 margin-bottom:5px;
	
}

.event.layout_teaser h3 span,
.event.layout_teaser h3 a,
.event.layout_teaser h3 a:hover {
color: #fff !important;	
}

.event.layout_teaser h3 span:before,
.event.layout_teaser h3 a:before {
content: "\f073";
    font-family: FontAwesome;
    display: inline-block;
    margin-right: 10px;
}


.event.layout_teaser h3 a {
    color: #fff;	
}



.mod_eventlist .teaser .header {
    margin-left:15px;
    font-size:90%;
}

.mod_eventlist .teaser .footer {
        margin-left: 15px;
    font-size: 70%;
    position: absolute;
    bottom: 15px;
    color: #fff;
    /*margin-left:15px;
    font-size:90%;*/
}



.mod_eventlist .teaser .header span.day {
    font-weight:600;
}



@media (min-width: 768px){
.mod_eventlist h3 {
font-size:140%;
}	  
}

@media (min-width: 1200px){
.mod_eventlist h3 {
font-size:160%;
}	  
}








.ce_page_teaser h1 {
font-size: 105% !important;
 }
 
 .ce_page_teaser h1 a,
 .mod_article h2 {
    bottom: 45px;

 }

.mod_newslist p.readmore {
    position: relative;
    top: 0px;
    left: 0px;
    background: #b5c900;
    color:#fff;
    display: inline-block;
    padding: 2px 10px;
}


.pagination {
	clear:both;
}

.pagination p {
	display:none;
}

.pagination ul {}

.pagination ul li {
	float:left;
}

.pagination ul li.previous{}












#header .ce_form input::-webkit-input-placeholder  {
	color:#ffffff !important;
}

#header .ce_form input::-moz-placeholder  {
	color:#ffffff !important;
}

#header .ce_form input::-ms-input-placeholder  {
	color:#ffffff !important;
}

#header .ce_form input.submit {
    font-family: FontAwesome, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #ffffff;
    background: none;
    border: none;
    position: absolute;
    top: 0px;
    right: 20px;
    font-size: 120%;
    height: 100%;
    display: inline-block;
    width: 26px;
}


.ce_hyperlink a,
nav.mod_customnav .dropdown button {
		color:#ffffff;	

	display: block;
    border-radius: 0;
    font-size: 14px;
    line-height: 1.33;
    padding: 20px 10px;
   letter-spacing: 0.5px; 
    text-align: center;
        text-transform: uppercase;
        border:none;
        width:100%;

	
}

.ce_hyperlink a {
	background-color:#b5c900;
}


.ce_hyperlink a:hover {
	background-color:#7e8a01;
	color:#ffffff;
    
}

nav.mod_customnav .dropdown button {
background-color:#009fe3 !important;	
	
}

nav.mod_customnav .dropdown button:hover {
background-color:#018fcd !important;	
	
}

nav.mod_customnav .dropdown ul.dropdown-menu {
min-width: 100%;
margin: 0;
padding:0;
border: 1px solid #ccc;
border-radius: 0px;
font-size: 100%;
}

nav.mod_customnav .dropdown ul.dropdown-menu li a {
padding: 15px 20px;
}


.topbar a.squarebtn {
	display:inline-block;
	border-left:1px solid #7e8a01;
	padding:0px 10px;
}

@media (min-width: 768px) {



}

@media (min-width: 1024px) {



}

@media (min-width: 1200px) {

.ce_hyperlink a,
nav.mod_customnav .dropdown button {
    font-size: 16px;
	
}


}








.topbar {
display: block;
font-size:85%;
width: 100%;
height: 35px;
padding:4px;
position: fixed;
top: 0;
background: #b5c900;
  	    -webkit-transition: all 0.5s ease 0s;
	    -o-transition: all 0.5s ease 0s;
	    transition: all 0.5s ease 0s;
}

.past-main .topbar {
top:-35px;
}


header .navbar .container {
	position:relative;
}

.navbar-fixed-top {
}



header x.navbar-default {
	background:none;
	margin-bottom:0;
}

.navbar {
background:#fff;
z-index:5000;
border-bottom:1px solid #e7e7e7 !important;
border-left:none !important;
border-right:none !important;
border-top:none !important;
border-radius:0 !important;
margin-top:0;
}


.navbar a.branding img {
width: 80px;
margin-left: 15px;
margin-top: 10px;
} 


nav.mod_navigation a.invisible {
display:none;
}

nav.mod_navigation {
text-align:center;
padding:0;
position:relative;
right:0px;
float:right\9; /* IE8 und darunter */
margin-top:40px\9; /* IE8 und darunter */
}

.past-main nav.mod_navigation {
margin-top:0px\9; /* IE8 und darunter */
}



nav.mod_navigation ul li a {
color:#3c3c3b;
font-weight: 400;
text-transform: uppercase;
font-size:80%;
}


nav.mod_navigation ul li a:hover,
nav.mod_navigation ul li.active span {
color:#333333;
text-transform: uppercase;
background-color:#f8f8f8;
font-size:100%;
}


.navbar-default .navbar-toggle {	
  border-radius: 1px;
  padding: 22px;
  margin: 0;
  border:none !important;
  background:none !important;
	
}

.navbar-default .navbar-toggle .icon-bar {
	background:#333;
	
}

ul.level_1 li ul.level_2 {
display:none;
}



@media (min-width: 768px) {


	
	  .navbar { 
		  margin-top:35px;
		   -webkit-transition: all 0.5s ease 0s;
	    -o-transition: all 0.5s ease 0s;
	    transition: all 0.5s ease 0s;
	    }
	    
  .navbar.past-main { 
	  margin-top:0px;
	   -webkit-transition: all 0.5s ease 0s;
	    -o-transition: all 0.5s ease 0s;
	    transition: all 0.5s ease 0s;
  }


    .past-main {
    width:100%;          
	    -webkit-transition: all 0.5s ease 0s;
	    -o-transition: all 0.5s ease 0s;
	    transition: all 0.5s ease 0s;
    }




	
	
    nav.mod_navigation {
    text-align:center;
    top:0;
    padding:0;
    position:absolute;
    right:0px;
    }
	
    nav.mod_navigation ul.level_1 li a,
    nav.mod_navigation ul li span.active {
	
    display: block;
    /*padding: 14px 6px;*/
    padding: 5px 4px;
    font-size: 80%;
    }
    
    nav.mod_navigation ul li a,
    nav.mod_navigation ul li a:hover,
    nav.mod_navigation ul li span.active  {
    font-size: 80%;
    display: block;
    }
/*Ü
nav.mod_navigation ul li .even {
	float: left;
}
nav.mod_navigation ul li .even {
	float: right;
}
  
   nav.mod_navigation ul.level_1 li:hover::after {
  content:"\f0de";
  font-family: fontawesome;
  display:block;
font-size:35px;
width:35px;
height:35px;
  margin:-42px auto;
  position:relative;
  color:#e7e7e7;
 -webkit-transition: all 0.5s ease 0s;
	    -o-transition: all 0.5s ease 0s;
	    transition: all 0.5s ease 0s;
    
    }
 */    
       nav.mod_navigation ul.level_2 li:hover::after,
       nav.mod_navigation ul.level_3 li:hover::after {
  
  display:none;
    
    }

    nav.mod_navigation ul li ul {
    position: absolute;
    background: #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
    width: 100%;
    left:0;
    right:0;
    margin-top:opx;
    
    }
    
    nav.mod_navigation ul li ul li {
    float:left;
    text-align:left;
    width: 33.333333%;
    
    }
    
     nav.mod_navigation ul li ul li a {
   padding:0;
   position:relative;
    }
    
       nav.mod_navigation ul li ul li a::before {
content:"\f105";
font-family: FontAwesome;

position:absolute;
right:15px;
color: #b5c900;

display:block;

    }



    
    
    
    ul.level_1 li:hover ul.level_2 {
    display:block;
    }
    
 
 

nav.mod_navigation ul li {
    float:left;
    
    }
    
    nav.mod_navigation ul.level_1 li ul.level_2 li {
	    position:relative;
	    
    }   
    
    nav.mod_navigation ul.level_1 li ul.level_2 li ul.-level_3 li {
	    position:absolute;
	    right:0px;
	    
	    background-color:red;
	    width:300px;
	    
	    
    }


}



@media (min-width: 1024px) {
 
    .navbar a.branding img {
      width: 150px;
  margin-left: 0;
  margin-top: 15px;
  margin-top:40px\9; /* IE8 und darunter */
  margin-bottom: 10px;
    } 
    
    .past-main a.branding img {
    width:120px;
    margin-top:5px;
    margin-top:5px\9; /* IE8 und darunter */
    margin-bottom:5px;
	    -webkit-transition: all 0.1s ease 0s;
	    -o-transition: all 0.1s ease 0s;
	    transition: all 0.1s ease 0s;
    }
 
    .past-main nav.mod_navigation ul.level_1 {
    margin-top:0px\9; /* IE8 und darunter */
    }
 
 
    nav.mod_navigation ul.level_1 li a,
    nav.mod_navigation ul.level_1 li span.active {
    padding: 20px 10px;
    font-size: 90%;
    margin-top:4px;
    }
    
    nav.mod_navigation ul.level_1 li.active {
    margin-top:20px\9; /* IE8 und darunter */
    }
    
    nav.mod_navigation ul.level_1 li span.active {
    padding-top:23px\9; /* IE8 und darunter */
    padding-bottom:25px\9; /* IE8 und darunter */
    }
    
    nav.mod_navigation ul.level_2 li a,
    nav.mod_navigation ul.level_2 li span.active {
    padding:10px 15px;
    
    }
    

    .past-main nav.mod_navigation ul.level_1 li a,
    .past-main nav.mod_navigation ul.level_1 li span.active {
    padding: 22px 11px !important;
        padding: 18px 11px\9 !important; /* IE8 und darunter */

    
    }
    
 
 
 
        
        .past-main {
    height:70px !important;
    }
    

   

    
   
}


.breadcrumb {
display:inline-block;
position:relative;
margin-top:25px !important;
margin-bottom:10px !important;
background:none;
padding:0;
font-size:80%;
border-radius:0;
}

ul.breadcrumb li {
background:none !important;
padding:0 !important;
}

.breadcrumb::before {
content:" ";
position:absolute;
bottom:-5px;
clear:both;
display:block;
width:100%;
height:3px;
background-color: #ddd;
}


.breadcrumb::after {
content:" ";
position:absolute;
bottom:-5px;
clear:both;
display:block;
width:30px;
height:3px;
background-color: #b5c900;
border-right:3px solid #fff;
}





.ce_accordion {
margin-bottom: 2em;	
}



.toggler {
background:#b39964;
color:white;
padding:5px 20px;
}


	.hidden-md {
	display:none;
	}






.bg-white {
background:#fff;
}

#slideshowWrapper ul {
list-style:none;
margin:0;
padding:0;
width:100% !important;
height:100%;
}

#slideshowWrapper ul li {
width:100% !important;
}

#slideshowWrapper ul li img {
width:100%;
}

.slidebig {
width:100%;
max-height:900px;
overflow:hidden;
}

.form-control.captcha {
display: block;
float: left;
margin-right: 20px;
}

.captcha_text {
display: block;
line-height: 50px;
margin-bottom: 15px;
}

.ce_form .submit_container  {
margin-bottom:50px;
} 

.submit_container input.submit,
#tl_subscribe input.submit,
p.back a,
.button_checkout,
.button_update,
.button_cart  {
border:none;
color:#fff;
background-color:#b5c900;
padding:15px 25px;
margin-bottom:2em;
	
}

.question {
border: solid 1px #ddd;
color: #000;
margin-bottom: 15px;
border-radius:2px;
position:relative;
margin-top:40px;
width: 50%;
padding: 15px 15px 35px 15px;

}

.question h6 {
font-size:120%;
color:#b5c900;
font-weight:600;
margin: 0 0 1em 0;

}

.checkbox_container span{
}

.checkbox_container legend,
.answer legend {
    position: absolute;
    top: -16px;
    left: 10px;
    background: #fff;
    padding: 5px;
    display: inline-block;
    border: none;
    width: auto;
    font-size: 100%;
}

.checkbox_container input,
.answer input {
margin:5px;
float:left;
}

.checkbox_container {
	
	  border: solid 1px #ddd;
	  color: #000;
	    margin-bottom: 15px;
  border-radius:2px;
    padding: 20px;
position:relative;
margin-top:15px;
    width: 100%;

}

.checkbox_container span:after {
	
clear:both;

}


.checkbox_container label,
.answer label {
	font-weight:normal;
	margin:0px;
	display:block;
}

.form-control,
#tl_subscribe input.text {
  border: solid 1px #ddd;
  color: #000;
  padding: 20px;
  margin-bottom: 15px;
  outline: none;
  border-radius:2px;
  height:25px;
  font-size:100%;
  width:100%;
}

body.firefox .form-control,
body.safari .form-control,
body.firefox #tl_subscribe input.text,
body.safari #tl_subscribe input.text  {
  padding: 0px 20px;
}

@media (min-width: 1024px){  

.checkbox_container input,
.answer input {
margin:8px 10px;
}

.form-control,
#tl_subscribe input.text {
  /*padding: 15px 30px;*/
  height:50px;
 /* width:50%;*/
}

.checkbox_container {
	margin-bottom: 15px;
   padding: 40px 30px 15px 30px;
margin-top:40px;
 width: 50%;

}
.checkbox_container legend,
.answer legend {
position:absolute;
top:-25px;
left:10px;
background:#fff;
padding:5px;
display:inline-block;
border:none;
width:auto;
}
}

input.captcha {
	width:80px;
}

textarea {
  
  border-radius:2px;
  color: #000;
  border: solid 1px #ddd;
  padding: 15px 30px;
  margin-bottom: 40px;
  outline: none;
  height: 150px;
}

span.captcha_text {
font-size: 80%;
    margin-top: -25px;
    }

.mod_quiz h2 {
position: relative;
    height: 100px;
    margin-bottom: 0;
    text-align: center;
    clear: both;
    border-bottom: 2px solid #b5c900;
}

.resultcomment {
	float:right;
	font-size:90%;
	font-style: italic;
	margin-top: 0px;
}

.resultcomment.correct {
	color:green;
}

.resultcomment.incorrect {
	color:red;
}






footer{
position: relative;
background:#f8f8f8;
padding-top:50px;
line-height: 180%;
}

footer .footer-right .mod_customnav li {
float:right;
display:inline-block;
}

footer .footer-left .mod_customnav li {
float:left;
display:inline-block;
}

footer p{
margin-top:0px;
}

.invisible {
	display:none;
}

#footer .mod_customnav {
margin-top:25px;
}


#footer .mod_customnav li {
clear:both;
}



#footer .mod_customnav li a,
#footer .mod_customnav li.active span {
padding: 0px;
display:block;
}

#footer .mod_customnav li.active span {
text-decoration:underline;
}





#footer h4 {
text-transform: uppercase;
font-size: 120%;
font-weight: 600;
}


.noclear {
	clear:none !important;
}

.h30 {
	height:30px;
	display:block;
}

.h50 {
	height:50px;
	display:block;
}

 











/* ********************************* */
/* TO TOP*/
/* ********************************* */


.scrollToTop {
background-color:#b39964;
color: #fff;  
}

.scrollToTop:hover, .scrollToTop:focus{
background-color:#9f8755;
color: #fff;  
}

.scrollToTop {
    bottom: 60px;
    display: none;
    font-size: 28px;
    font-weight: bold;
    
    position: fixed;
    right: -100px;
    padding:10px 15px;
    text-align: center;
    text-decoration: none;
   
    z-index: 9999;
    color: #fff;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.scrollToTop:hover,
.scrollToTop:focus {
    text-decoration: none;
    outline: none;
}


.mobilehidden {
    display: none;
}

.pdf_link {
    margin-top: -30px;
    text-align: right;
}






/* ********************************* */
/* COLORBOX */
/* ********************************* */

#cboxOverlay {
background: #fff !important;
}

#cboxLoadedContent {
background: #fff;
border: 5px solid #fff;
-webkit-box-shadow: 1px 2px 5px 0 #BFBFBF;
box-shadow: 1px 2px 5px 0 #BFBFBF;
}

.boxed {
background-color:#f8f8f8;
padding: 25px;
clear:none !important;
margin-bottom:0px !important;
}

.main ul {
margin: 0;
}

.main ul li {
padding-left:0px;
}


blockquote {
    margin: 25px 0;
    padding: 10px 20px;
    font-size: 100%;
    line-height: 170%;
}

.btn-xxl {
border-radius: 0;
    font-size: 16px;
    line-height: 1.33;
    padding: 23px 45px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Padding */

.pno,
.padding-0 {
padding:0px !important;
}

.pxs {
padding:2px;
} 

.ps {
padding:5px;
} 
.padding-5 {
padding:5px;
}

.pm {
padding:10px;
} 

.pl {
padding:15px;
}

.plxl {
	padding:25px;
}

.plxxl {
	padding:45px;
}


.pts {
padding-top:5px;
} 

.ptm {
padding-top:10px;
} 

.ptl {
padding-top:15px;
}

.ptxl {
padding-bottom:25px;
}

.ptxxl {
padding-bottom:35px;
}

.pbm {
padding-bottom:10px;
} 

.pbl {
padding-bottom:15px;
}

.pbxl {
padding-bottom:25px;
}

.pbxxl {
padding-bottom:35px;
}

.ptbxxl {
	padding-top:45px;
	padding-bottom:45px;
}

/* Margin */

.mno {
margin:0px !important;
}

.ms {
margin:5px;
}

.mm {
margin:10px;
} 

.ml {
margin:15px;
}


.mxl {
margin:25px;
}

.mxxl {
margin:45px;
}

.mts {
margin-top:5px;
}

.mtm {
margin-top:10px;
} 

.mtl {
margin-top:15px;
} 

.mtxl {
margin-top:25px;
} 

.mtxxl {
margin-top:35px;
}  

.mbs {
margin-bottom:5px;
}

.mbm {
margin-bottom:10px;
} 

.mbl {
margin-bottom:15px;
} 

.mbxl {
margin-bottom:25px;
} 

.mbxxl {
margin-bottom:35px;
}


#cookiebar {
width:100%;
}


#cookiebar span {
display: block;
margin: 0 auto;
text-align: center;
width: 70% !important;
}

#cookiebar button {
margin-top:10px
    }

#cookiebar button,
#cookiebar a {
display:inline-block;
background-color: #b39964;
border: 0 none;
color: #fff;
cursor: pointer;
font-weight: 400;
height: 40px;
padding: 0 15px;
line-height:40px;
    }

#cookiebar a {
margin-left: 0 !important;
text-decoration: none !important;
}



/* ********************************* */
/* SHOP */
/* ********************************* */


.mod_iso_productreader,
.mod_iso_productlist {
	clear:both;
}


.sku {
    display: none;
}
#produktliste .products {
    border: 1px solid #fff;
    margin-left: -1px;
    margin-top: -1px;
    position: relative;
}
#produktliste .products h3 {
        margin: 0;
    text-transform: uppercase;
    font-size: 80%;
    line-height: 160%;
    margin: 0 0 5px;
    background: #b5c900;
    text-align: left;
    padding: 10px;
    min-height:60px;
        min-height: 80px;
    max-height: 80px;
}
.products h3 a,
.products h3 a:hover {
    color: #fff !important;
}
#produktliste .price {
    margin: 0;
    padding: 0px 10px;
    text-transform: uppercase;
    font-size: 150%;
    line-height: 220%;
    position: absolute;
    top: 50%;
    display: inline-block;
    left: 25px;
    background: #fff;
}
#produktliste .price .currency {
    
}
#produktliste .details {
    position: absolute;
    top: 50%;
    right: 60px;
}
#produktliste .submit_container input {
    position: absolute;
    background: url('layout/warenkorb-icon.png') 1px 2px no-repeat;
    border: none;
    text-indent: -9999px;
    right: 24px;
    top: 50%;
}
#produktliste .submit_container input:hover {
    background: url('layout/warenkorb-icon-hover.png') 1px 2px no-repeat;
}
#produktliste .image_container {
overflow:hidden;
max-height: 300px;
}
/*
#produktliste .teaser {
	position: absolute;
margin:0;
bottom: 28px;

background: #000;
background: rgba(0, 0, 0, 0.5);
color:#fff;

padding: 10px;
left: 10px;
right:10px;
font-size:80%;
text-align:left;
}
*/
#produktliste .teaser {
    position: absolute;
    margin: 0;
    bottom: 10px;
    background: #000;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 10px;
    left: 25px;
    right: 25px;
    font-size: 75%;
    text-align: left;
}

#produktliste .image_container img {
    transform: scale(1);
}
#produktliste .image_container:hover img {
    transform: scale(1.15);
}
#produktliste .image_container:hover img,
#produktliste .image_container img,
#produktliste .submit_container input:hover,
#produktliste .submit_container input {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}


.image {
    padding: 0px;
}
.name {
    padding: 0px;
}
.quantity {
    margin-top: 0px;
}
.price {
    padding: 0px 0px;
}
#produktreader .price {
        text-align: center;
    font-size: 150%;
    font-weight: 700;
    width: 120px;
    position: absolute;
    top: 50%;
    background: #fff;
    left: 10px;
}
.remove {
    padding: 0px;
}
#produktreader .submit_container {
    margin-top: 20px;
}
#produktreader .submit_container label {
    width: 70px;
    float: left;
}
#produktreader .submit_container input.form-control {
    width: 45px;
    float: left;
}
#produktreader .submit_container input.add_to_cart {
    width: 100%;
    margin-top: 20px;
    padding: 15px 25px;
        border: none;
    color: #fff;
    background-color: #b5c900;
    
}
#kasse label {
    clear: both;
    margin: 0;
    width: 100%;
}
#kasse input {
    clear: both !important;
    width: 100% !important;
}

.radio_container input {
    width: 80% !important;
	
}
#kasse fieldset input {
    clear: none;
    float: left;
    width: 5%;
}
#kasse fieldset label {
    clear: none;
    float: left;
    width: 90%;
}
#kasse fieldset label span {
    float: none;
}
#kasse .submit_container input.btn {
    clear: none;
    float: left;
    width: 50%;
    margin-bottom: 50px;
}
.widget.widget-radio,
#BillingAddress_new {
padding:25px;
border:3px dotted #f8f8f8;
margin-bottom:2em;	
}

table tr {
	border:none !important;
}

#warenkorb .del {
	display:none;
}

#kasse input#opt_ShippingAddress_0,
#kasse input#opt_ShippingAddress_1,
#kasse input#opt_ShippingMethod_0,
#kasse input#lbl_ShippingMethod_0,
#kasse input#opt_PaymentMethod_0,
#kasse input#lbl_PaymentMethod_0 {
       clear: none;
    float: left;
    display: inline-block;
    width: 25px !important;
    }
#kasse label#lbl_ShippingAddress_0,
#kasse label#lbl_ShippingAddress_1,
#kasse label#opt_ShippingMethod_0,
#kasse label#lbl_ShippingMethod_0,
#kasse label#opt_PaymentMethod_0,
#kasse label#lbl_PaymentMethod_0 {
       clear: none;
    display: inline-block;
    float: left;
    margin-top: 12px;
}
.row_even {
    border-top: 1px solid #f4f7f9;
    border-bottom: 1px solid #f4f7f9;
}
.row_first,
.subtotal {
    margin-top: 50px;
}
select.select {
    padding: 5px;
}

.steps4 {
    margin-bottom: 35px;
}
.steps4 a {
    color: #fff;
    font-weight: 700;
}
.steps4 a:hover {
    color: #fff;
}
.steps4 div.address,
.steps4 div.shipping,
.steps4 div.payment,
.steps4 div.review {
    background: red;
    color: #fff;
    border-right: 1px solid #fff;
    ;
}
.steps4 div.last {
    border-right: none !important;
}
.steps4 div.address.active,
.steps4 div.shipping.active,
.steps4 div.payment.active,
.steps4 div.review.active {
    background: orange;
}
.steps4 div.address.passed,
.steps4 div.shipping.passed,
.steps4 div.payment.passed,
.steps4 div.review.passed {
    background: green;
}



@media (min-width: 768px) {




    #warenkorb .image {
        padding: 0px;
    }
    #warenkorb .name {
        padding: 40px 0px;
    }
    #warenkorb .quantity {
        margin-top: 40px;
    }
    #warenkorb .price {
        padding: 40px 0px;
        font-size: 100%;
    }
    #warenkorb .remove {
        padding: 40px 0px;
    }
    


    #kasse label,
    #kasse select.select {
        width: 50%;
    }
    #kasse input {
        width: 50%;
    }
    
    p.error {
        margin-bottom: 0px !important;
        font-style: italic;
        color: red;
        font-size: 80%;
        margin-top: -10px;
    }
    /*
    fieldset input {
        float: left;
    }
    fieldset label {
        float: left;
    }

*/


}



p.back {    
	clear: both;
    margin-top: 25px;
    margin-bottom: 25px;
    }
p.back a {}



.layout_facebook {
	margin-bottom:40px !important;
}

.layout_facebook a.author {
	margin-top:15px;
	display:block;
	width:100%;
}

.layout_facebook a.author img {
	width:45px;
}

.layout_facebook a.author span {
	font-size:140%;
}

.layout_facebook time {
    font-size: 65%;
    clear: both;
    display: block;
    margin-left: 50px;
    position: relative;
    top: -15px;
}

.layout_facebook teaser {
	font-size:100%;
	clear:both;
}

@media (min-width: 768px) {


.layout_facebook a.author img {
	width:45px;
}

.layout_facebook a.author span {
	font-size:140%;
}

.layout_facebook time {
    font-size: 65%;
    clear: both;
    display: inline-block;
    margin-left: 50px;
    position: relative;
    top: -20px;
}

.layout_facebook teaser {
	font-size:100%;
	clear:both;
}
}









/**********************
 *CSS Animations by:
 *http://codepen.io/vivinantony
***********************/
.spinner1 {
  width: 40px;
  height: 40px;
  position: relative;
}


.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

.spinner2 {
  width: 40px;
  height: 40px;
  position: relative;
}


.container1 > div, .container2 > div, .container3 > div {
  width: 6px;
  height: 6px;
  background-color: #fff;

  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.spinner2 .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.container3 {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
}

.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.container3 .circle1 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.container1 .circle2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.container2 .circle2 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

.container3 .circle2 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}

.container1 .circle3 {
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
}

.container2 .circle3 {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

.container3 .circle3 {
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
}

.container1 .circle4 {
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
}

.container2 .circle4 {
  -webkit-animation-delay: -0.2s;
  animation-delay: -0.2s;
}

.container3 .circle4 {
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
}

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
  0%, 80%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

.spinner3 {
  width: 40px;
  height: 40px;
  position: relative;  
  -webkit-animation: rotate 2.0s infinite linear;
  animation: rotate 2.0s infinite linear;
}

.dot1, .dot2 {
  width: 60%;
  height: 60%;
  display: inline-block;
  position: absolute;
  top: 0;
  background-color: #fff;
  border-radius: 100%;
  
  -webkit-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}

.dot2 {
  top: auto;
  bottom: 0px;
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}

@-webkit-keyframes bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes bounce {
  0%, 100% { 
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% { 
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

.spinner4 {
  width: 30px;
  height: 30px;
  background-color: #fff;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

.spinner5 {
  width: 32px;
  height: 32px;
  position: relative;
}

.cube1, .cube2 {
  background-color: #fff;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 0;
  left: 0;
  
  -webkit-animation: cubemove 1.8s infinite ease-in-out;
  animation: cubemove 1.8s infinite ease-in-out;
}

.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes cubemove {
  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% { -webkit-transform: rotate(-360deg) }
}

@keyframes cubemove {
  25% { 
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  } 50% { 
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  } 50.1% { 
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  } 75% { 
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  } 100% { 
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}

.spinner6 {
  width: 50px;
  height: 30px;
  text-align: center;
}

.spinner6 > div {
  background-color: #fff;
  height: 100%;
  width: 6px;
  margin-left:2px;
  display: inline-block;
  
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner6 .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}

.spinner6 .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

.spinner6 .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

.spinner6 .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
  .spinner7 {
      width: 90px;
      height: 30px;
      text-align: center;
    }

    .spinner7 > div {
      background-color: #fff;
      height: 15px;
      width: 15px;
      margin-left:3px;
      border-radius: 50%;
      display: inline-block;
      
      -webkit-animation: stretchdelay 0.7s infinite ease-in-out;
      animation: stretchdelay 0.7s infinite ease-in-out;
    }

    .spinner7 .circ2 {
      -webkit-animation-delay: -0.6s;
      animation-delay: -0.6s;
    }

    .spinner7 .circ3 {
      -webkit-animation-delay: -0.5s;
      animation-delay: -0.5s;
    }

    .spinner7 .circ4 {
      -webkit-animation-delay: -0.4s;
      animation-delay: -0.4s;
    }

    .spinner7 .circ5 {
      -webkit-animation-delay: -0.3s;
      animation-delay: -0.3s;
    }

    @-webkit-keyframes stretchdelay {
      0%, 40%, 100% { -webkit-transform: translateY(-10px) }  
      20% { -webkit-transform: translateY(-20px) }
    }

    @keyframes stretchdelay {
      0%, 40%, 100% { 
        transform: translateY(-10px);
        -webkit-transform: translateY(-10px);
      } 20% {
        transform: translateY(-20px);
        -webkit-transform: translateY(-20px);
      }
    }