/*MY ACCORDION-1*/

 /* Style the buttons that are used to open and close the accordion panel */



#accordion1 .accordion {
  	cursor: pointer;
  	width: 100%;
  	text-align: left;
  	border: none;
  	outline: none;
	
	
	border-bottom: 1px solid #ededed;
	border-top: 1px solid #ededed;
	box-shadow: 0px 1px 0px rgba(237,237,237, 1.0);
	background-color: transparent;
	color: #282a2b;
	line-height: 100px;
	
	font-size: 1.750em;
	
	-webkit-transition:  0.35s ease-in-out;
	-moz-transition:  0.35s ease-in-out;
	-o-transition:  0.35s ease-in-out;
	-ms-transition:  0.35s ease-in-out;
	transition:  0.35s ease-in-out;
}

#accordion1 .accordion:first-of-type {
  	border-top: none;
}

#accordion1 .accordion::before {
	font-family: "FontAwesome";
	content: "\f0fe";
	padding: 0 15px 0 0;
	
	color: #465c86;
	
	-webkit-transition:  0.35s ease-in-out;
	-moz-transition:  0.35s ease-in-out;
	-o-transition:  0.35s ease-in-out;
	-ms-transition:  0.35s ease-in-out;
	transition:  0.35s ease-in-out;
    
}

#accordion1 .active::before {
	font-family: "FontAwesome";
	content: "\f146";
	padding: 0 15px 0 0;
	color: #282a2b
    
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
#accordion1 .active,
#accordion1 .accordion:hover {
  	color: #465c86;
}

#accordion1 .accordion:hover::before {
	color: #282a2b;
}

/* Style the accordion panel. Note: hidden by default */
#accordion1 .panel {
  	padding: 0;
	margin: 0;
  	background-color: none;
 	max-height: 0;
  	overflow: hidden;
	
	-webkit-transition:  max-height 0.35s ease-out;
	-moz-transition:  max-height 0.35s ease-out;
	-o-transition:  max-height 0.35s ease-out;
	-ms-transition:  max-height 0.35s ease-out;
	transition:  max-height 0.35s ease-out;
}

#accordion1 .panel p {
  	font-size: 0.875em;
	line-height: 1.000em;
	padding: 25px 0 25px 0;
}

#accordion1 .panel img {
  	display: block;
	float: left;
	width: 200px;
	height: auto;
	padding: 15px 15px 15px 0;
	
}



/*MY ACCORDION-2*/

 /* Style the buttons that are used to open and close the accordion panel */


#accordion2 .accordion {
  	cursor: pointer;
  	width: 100%;
  	text-align: left;
  	border: none;
  	outline: none;
	
	
	border-bottom: 1px solid #ededed;
	border-top: 1px solid #ededed;
	box-shadow: 0px 1px 0px rgba(237,237,237, 1.0);
	background-color: transparent;
	color: #282a2b;
	line-height: 50px;

	font-size: 1.750em;
	
	-webkit-transition:  0.35s ease-in-out;
	-moz-transition:  0.35s ease-in-out;
	-o-transition:  0.35s ease-in-out;
	-ms-transition:  0.35s ease-in-out;
	transition:  0.35s ease-in-out;
}

#accordion2 .accordion:first-of-type {
  	border-top: none;
}

#accordion2 .accordion::before {
	font-family: "FontAwesome";
	content: "\f0fe";
	padding: 0 15px 0 0;
	
	color: #465c86;
	
	-webkit-transition:  0.35s ease-in-out;
	-moz-transition:  0.35s ease-in-out;
	-o-transition:  0.35s ease-in-out;
	-ms-transition:  0.35s ease-in-out;
	transition:  0.35s ease-in-out;
    
}

#accordion2 .active::before {
	font-family: "FontAwesome";
	content: "\f146";
	padding: 0 15px 0 0;
	color: #282a2b
    
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
#accordion2 .active,
#accordion2 .accordion:hover {
  	color: #465c86;
}

#accordion2 .accordion:hover::before {
	color: #282a2b;
}

/* Style the accordion panel. Note: hidden by default */
#accordion2 .panel {
  	padding: 0 0 0 45px;
	margin: 0;
  	background-color: none;
 	max-height: 0;
  	overflow: hidden;
	
	-webkit-transition:  max-height 0.35s ease-out;
	-moz-transition:  max-height 0.35s ease-out;
	-o-transition:  max-height 0.35s ease-out;
	-ms-transition:  max-height 0.35s ease-out;
	transition:  max-height 0.35s ease-out;
}

#accordion2 .panel p {
  	font-size: 0.875em;
	line-height: 1.000em;
	padding: 25px 0 25px 0;
}

#accordion2 .panel img {
  	display: block;
	float: left;
	width: 200px;
	height: auto;
	padding: 15px 15px 15px 0;
	
}



/*MY ACCORDION-3*/

 /* Style the buttons that are used to open and close the accordion panel */



#accordion3 .accordion {
  	cursor: pointer;
	font-family: "Fira Sans Condensed", sans-serif;
  	width: 100%;
  	text-align: left;
  	border: none;
  	outline: none;
	
	border: rgba(34,34,34,0.1) 1px solid;	
	background-color: #fafafa;
	color: #282828;
	
	font-size: 1.500em;
	line-height: 50px;
	
	border-radius: 20px;
	
	-webkit-transition:  0.35s ease-in-out;
	-moz-transition:  0.35s ease-in-out;
	-o-transition:  0.35s ease-in-out;
	-ms-transition:  0.35s ease-in-out;
	transition:  0.35s ease-in-out;
}

#accordion3 .accordion::before {
	font-family: "FontAwesome";
	content: "\f055";
	padding: 0 15px 0 20px;
	color: #205862;
	
	-webkit-transition:  0.35s ease-in-out;
	-moz-transition:  0.35s ease-in-out;
	-o-transition:  0.35s ease-in-out;
	-ms-transition:  0.35s ease-in-out;
	transition:  0.35s ease-in-out;
    
}

#accordion3 .active::before {
	font-family: "FontAwesome";
	content: "\f146";
	padding: 0 15px 0 20px;
	color: #fff;
    
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
#accordion3 .active,
#accordion3 .accordion:hover {
  	background-color: #205862;
	color: #fff;
}

#accordion3 .active {
  	border-radius: 20px 20px 0 0;
}

#accordion3 .accordion:hover::before {
	color: #fff;
}

/* Style the accordion panel. Note: hidden by default */
/*#accordion3 .panel {
  	padding: 0 18px;
	margin: 0 0 10px 0;
  	background-color: white;
 	max-height: 0;
  	overflow: hidden;
	
	border: rgba(32,88,98,0.5) 1px solid;	
	
	border-radius: 0 0 20px 20px;
	
	-webkit-transition:  max-height 0.35s ease-out;
	-moz-transition:  max-height 0.35s ease-out;
	-o-transition:  max-height 0.35s ease-out;
	-ms-transition:  max-height 0.35s ease-out;
	transition:  max-height 0.35s ease-out;
}*/

#accordion3 .panel {
  padding: 0 18px;
  margin: 0 0 10px 0;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  border: none; /* kein Rahmen im geschlossenen Zustand */
  border-radius: 0 0 20px 20px;
  transition: max-height 0.35s ease-out, border 0.35s ease-out;
}

#accordion3 .panel.open {
  max-height: 500px; /* Beispiel */
  border: rgba(32,88,98,0.5) 1px solid;
}


#accordion3 .panel p {
  	text-decoration: none;
	font-weight: 400;
	font-size: 1.125em;
	font-style: normal;
	line-height: 1.500em;
	padding: 0;
	margin: 0;
	color: #000;
	padding: 25px 0 25px 0;
}

#accordion3 .panel ul {
  	text-decoration: none;
	font-weight: 400;
	font-size: 1.125em;
	font-style: normal;
	line-height: 1.500em;
	padding: 0;
	margin: 0;
	color: #000;
	padding: 25px 0 25px 0;
}

#accordion3 .panel img {
  	display: block;
	float: left;
	width: 100%;
	height: auto;
	padding: 15px 0 15px 0;
}

#accordion3 .panel a {
  	font-weight: 400;
	font-size: 1.125em;
	font-style: normal;
	line-height: 1.500em;
	padding: 0 0 25px 0;
	margin: 0;
}






/*MY ACCORDION-4*/

 /* Style the buttons that are used to open and close the accordion panel */



#accordion4 .accordion {
  	cursor: pointer;
  	width: 100%;
  	text-align: left;
  	border: none;
  	outline: none;
	
	border: rgba(34,34,34,0.1) 1px solid;	
	background-color: #e6e6e6;
	color: #282a2b;
	
	line-height: 75px;
	
	font-size: 1.750em;
	
	-webkit-transition:  0.35s ease-in-out;
	-moz-transition:  0.35s ease-in-out;
	-o-transition:  0.35s ease-in-out;
	-ms-transition:  0.35s ease-in-out;
	transition:  0.35s ease-in-out;
}

#accordion4 .accordion::before {
	font-family: "FontAwesome";
	content: "\f0fe";
	padding: 0 15px 0 0;
	color: #465c86;
	
	-webkit-transition:  0.35s ease-in-out;
	-moz-transition:  0.35s ease-in-out;
	-o-transition:  0.35s ease-in-out;
	-ms-transition:  0.35s ease-in-out;
	transition:  0.35s ease-in-out;
    
}

#accordion4 .active::before {
	font-family: "FontAwesome";
	content: "\f146";
	padding: 0 15px 0 0;
	color: #fff;
    
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
#accordion4 .active,
#accordion4 .accordion:hover {
  	background-color: #465c86;
	color: #fff;
}

#accordion4 .accordion:hover::before {
	color: #fff;
}

/* Style the accordion panel. Note: hidden by default */
#accordion4 .panel {
  	padding: 0 18px;
	margin: 0 0 10px 0;
  	background-color: white;
 	max-height: 0;
  	overflow: hidden;
	
	-webkit-transition:  max-height 0.35s ease-out;
	-moz-transition:  max-height 0.35s ease-out;
	-o-transition:  max-height 0.35s ease-out;
	-ms-transition:  max-height 0.35s ease-out;
	transition:  max-height 0.35s ease-out;
}

#accordion4 .panel p {
  	font-size: 0.875em;
	line-height: 1.000em;
	padding: 25px 0 25px 0;
}

#accordion4 .panel img {
  	display: block;
	float: left;
	padding: 15px;
	width: 200px;
	height: auto;
}




/* ======================================================================================================
 MEDIA QUERIES
=======================================================================================================*/	

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










}



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


	
	
	
	
	
	
	
}



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


	
	
	
	
	
	
	
}



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


	
	
	
	
	
	
	
}



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

#accordion2 .accordion,
#accordion3 .accordion {
	line-height: 45px;
	font-size: 1.250em;
	

}
	
#accordion1 .accordion,
#accordion4 .accordion {
	line-height: 75px;
	font-size: 1.500em;

}
	
	
	
	
	
	
	
}



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


	
	
	
	
	
	
	
}



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


	
	
	
	
	
	
	
}



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

#accordion1 .accordion,
#accordion2 .accordion,
#accordion3 .accordion,
#accordion4 .accordion {
	font-size: 1.000em;

}
	
	
	
	
	
	
	
}



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


	
	
	
	
	
	
	
}



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


	
	
	
	
	
	
	
}



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


	
	
	
	
	
	
	
}