/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/
 

/*********************************************************************************************************************************

	
	[Table of contents]
	
	01. General
	02. Helper classes
	03. Grid
	04. Navigation
	05. Elements
	06. Formular
	07. Responsive
	
	
	[Colors]
	
	# main color 		--> # = rgb()
	# black				--> #
	# grey				--> #
	# light				--> #
	
	
	[Typography]
	
	# content   		--> 
	# titles 			--> 
	# subtitle			--> 
	
	
/*******************************************************************************************************************************/
/*****Variablen*****************************************************************************************************************/
/*******************************************************************************************************************************/

:root {
  --blau: #35426e;
  --rot: #e1342d;
  --schriftfarbe: #272727;
}


/*******************************************************************************************************************************/
/*****General*******************************************************************************************************************/
/*******************************************************************************************************************************/

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body {
	width: 100%;
	height: 100%;
	position: relative;
}

::selection {
    background: var(--blau);
    color: #ffffff;
}

.colored-section *::selection {
    background: #ffffff;
    color: var(--blau);
}

sup {
	font-size: 10px !important;
}


/*******************************************************************************************************************************/
/*****Helper classes************************************************************************************************************/
/*******************************************************************************************************************************/





/*******************************************************************************************************************************/
/*****Grid**********************************************************************************************************************/
/*******************************************************************************************************************************/

.row {
	clear: both;
	overflow: hidden;
}

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
    float: left;
}

.col {
	margin-right: 1.5%;
}

.span1 {
	width: 6.9583333333333%;
}

.span2 {
	width: 15.416666666667%;
}

.span3 {
	width: 23.875%;
}

.span4 {
	width: 32.333333333333%;
}

.span5 {
	width: 40.791666666667%;
}

.span6 {
	width: 49.25%;
}

.span7 {
	width: 57.708333333333%;
}

.span8 {
	width: 66.166666666667%;
}

.span9 {
	width: 74.625%;
}

.span10 {
	width: 83.083333333333%;
}

.span11 {
	width: 91.541666666667%;
}

.span12 {
	width: 100%;
}

/*******************************************************************************************************************************/
/*****Navigation****************************************************************************************************************/
/*******************************************************************************************************************************/


/* Icon */

.menu-icon .line{
	display: block;
	position: absolute;
	height: 3px;
	background: var(--rot);
	transition: 100ms ease-in-out;
	-webkit-transition: 100ms ease-in-out;
	-moz-transition: 100ms ease-in-out;
	-o-transition: 100ms ease-in-out;
}
 
.menu-icon .line-1 {
	top: 0px;
	width: 100%;
}
   
.menu-icon .line-2 {
	top: 11px;
	width: 80%;
}
  
.menu-icon .line-3 {
	top: 22px;
	width: 50%;
}

.menu-icon.open .line{
	background: var(--rot); 
}
  
.menu-icon.open .line-1 {
	top: 12.5px;
	width: 100%;
	transform: rotate(135deg);
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-o-transform: rotate(135deg);
}
  
.menu-icon.open .line-2 {
	display: none;
}
  
.menu-icon.open .line-3 {
	top: 12.5px;
	width: 100%;
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	-o-transform: rotate(-135deg);
}


/* Overlay */

.fullwidth-menu {
	opacity: 0;
	top: 0;
	visibility: hidden;
	height: 0;
}
  
.fullwidth-menu-open {
	opacity: 1 !important;
	visibility: visible !important;
	height: 100vh !important;
}
  
.fullwidth-menu {
	transition: all 500ms ease !important;
	-webkit-transition: all 500ms ease !important;
	-moz-transition: all 500ms ease !important;
	-o-transition: all 500ms ease !important;
	-ms-transition: all 500ms ease !important;
}

.toggle-sub-menu-text {
	color: inherit;
}

.toggle-sub-menu-text, .toggle-sub-menu {
	cursor: pointer;
} 

.sub-menu {
	padding: 0 !important;
	padding-top: 20px !important;
}

.sub-menu li {
	list-style: none;
	margin-bottom: 10px;
}

.sub-menu li a {
	font-size: 30px;
	line-height: 1;
	color: var(--schriftfarbe);
}

.sub-menu li a:hover {
	color: var(--rot);
}


/* Active */

body.page-id-21 .fullwidth-menu .main-menu-item:nth-child(1) p,									/* Startseite */
body.page-id-31 .fullwidth-menu .main-menu-item:nth-child(2) .toggle-sub-menu-text,				/* Plastikrecycling */
body.page-id-31 .fullwidth-menu .main-menu-item:nth-child(2) .toggle-sub-menu,					/* Plastikrecycling */
body.page-id-31 .fullwidth-menu .main-menu-item:nth-child(2) ul.sub-menu li:nth-child(1) a,		/* Plastikrecycling */
body.page-id-29 .fullwidth-menu .main-menu-item:nth-child(3) p,									/* Recard */
body.page-id-37 .fullwidth-menu .main-menu-item:nth-child(4) p,									/* Preisliste */
body.page-id-39 .fullwidth-menu .main-menu-item:nth-child(5) p,									/* Aktionen */
body.page-id-27 .fullwidth-menu .main-menu-item:nth-child(6) p									/* Kontakt */
{
	color: var(--rot) !important;
}


/*******************************************************************************************************************************/
/*****Elements******************************************************************************************************************/
/*******************************************************************************************************************************/

/* Hintergrund-Slider */

.et_pb_slides {
	height: 100% !important;
}


/* Blog */

.et_pb_news.equals_height .et_pb_salvattore_content {
	display: flex !important;
	align-items: stretch !important;
}

.et_pb_news.equals_height article.et_pb_post {
	height: 100% !important;
}


/* Google Maps */

.google-maps .button {
	font-size: 14px !important;
	font-weight: 600;
	padding: 5px 30px !important;
	height: auto !important;
	cursor: pointer !important;
	border-radius: 12px !important;
}

.google-maps .gm-style-cc {
	display: none !important;
}

.google-maps .gm-style > div:nth-child(15) {
	display: none !important;
}


/* Tabelle */

table.tablepress {
	margin-bottom: 0 !important;
	border: none !important;
	border-bottom: 0px solid #ccc !important;
	border-color:  transparent !important;
	width: 100% !important;
	margin-top: 15px !important;
	white-space: nowrap;
}

table.tablepress > :where(thead, tfoot) > * > th {
	color: #000;
	font-weight: 600;
	background: transparent;
	padding: 12px;
	border-top: 0px;
}

table.tablepress tr {
	border-top: 1px solid #d9d9d9 !important;
}

table.tablepress thead tr {
	border-top: 0px solid #ddd !important;
}

table.tablepress tbody tr:hover {
	background: #f6f6f6 !important;
}

table.tablepress tr td {
	font-weight: 500 !important;
	padding: 12px !important;
	border: none !important
}

.responsive-table {
	overflow-x: auto !important;
}


/* Öffnungszeiten */

.business-hours {
	width: 100% !important;
	max-width: 100% !important;
}

.openingHours-day {
	justify-content: flex-start !important;
	gap: 7px;
}

.openingHours-day:nth-child(7) {
	display: none !important;
}

.openingHours-day br {
	display: none !important;
}


/*******************************************************************************************************************************/
/*****Formular******************************************************************************************************************/
/*******************************************************************************************************************************/

fieldset {
	margin-bottom: 1.5%;
}

textarea {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
}

.wpcf7-response-output {
  padding: 20px !important;
  margin: 0 0 50px !important;
}

.wpcf7-spinner {
	display: none !important;
}

.grecaptcha-badge {
	z-index: -99999 !important;
	opacity: 0 !important;
}



/*******************************************************************************************************************************/
/*****Responsive****************************************************************************************************************/
/*******************************************************************************************************************************/

@media all and (max-width: 1280px) {
	
}


/* Tablet */

@media all and (max-width: 980px) {
	
	.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 {
		width: 100%;
		float: none;
	}
	
	.col {
		margin-right: 0;
	}
	
	.custom_row {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	
	.first-on-mobile {
		-webkit-order: 1;
		order: 1;
	}
	
	.second-on-mobile {
		-webkit-order: 2;
		order: 2;
	}
	
	.third-on-mobile {
		-webkit-order: 3;
		order: 3;
	}
	
	.fourth-on-mobile {
		-webkit-order: 4;
		order: 4;
	}
	
	.sub-menu {
		padding-top: 20px !important;
	}
	
	.sub-menu li a {
		font-size: 26px;
	}

}


/* Smartphone*/

@media all and (max-width: 767px) {
	.sub-menu {
		padding-top: 10px !important;
	}
	
	.sub-menu li a {
		font-size: 22px;
	}	
}


@media all and (max-width: 480px) {
	.et_pb_row .et_pb_column_mobile_1_2 {
		width: 50% !important;
	}
	.et_pb_row .et_pb_column_mobile_1_3 {
		width: 33.3333333333% !important;
	}
	.et_pb_row .et_pb_column_mobile_2_3 {
		width: 66.6666666666% !important;
	}
	.et_pb_row .et_pb_column_mobile_1_4 {
		width: 25% !important;
	}
	.et_pb_row .et_pb_column_mobile_3_4 {
		width: 75% !important;
	}
}