/*

  style.css

*/


/* Body
–––––––––––––––––––––––––––––––––––––––––––––––––– */


body {
	background-color: #fff;
}

.zweigle_oelpreise {
	/*overflow-x: hidden; */

	font-weight: normal;
	font-size: 15px;
	line-height: 1.5em;
	color: #2e2e2e;
	background-color: #fff;
	font-family: Arial, Tahoma, sans-serif;
	font-weight: 400;
    padding-top:80px;
}

.zweigle_oelpreise b, .zweigle_oelpreise strong {
	font-weight: normal;
	font-style: normal;
	font-weight: 700;
}

.zweigle_oelpreise hr {
	margin-top: 30px;
	margin-bottom: 30px;
}

.zweigle_oelpreise .zgo-row .zgo-row {
	margin: 0 0px;
}

.zweigle_oelpreise table {
    width:100%;
}

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


/* Replace
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.friendv { letter-spacing : 10em; text-indent: -1000em; }
/* Be nice to Opera, but hide from MacIE. Thanks to Robert Jan Verkade (http://www.eend.nl) for the MacIE fix. */
/*\*/html>body .friendv { letter-spacing : normal; text-indent : -999em; overflow : hidden;}



/* Defaults
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.zweigle_oelpreise path {
	cursor: pointer;
}

.zweigle_oelpreise img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.zweigle_oelpreise .zgo-fakeRow .zgo-columns:first-child {
	margin-left: 0%;
}

/*.zweigle_oelpreise [class^="zgo-fakeWidth"],
.zweigle_oelpreise [class*=" zgo-fakeWidth"] {
	float: left;
	padding: 0px;
}*/

.zgo-fakeWidth5, .zgo-fakeWidth10, .zgo-fakeWidth15, .zgo-fakeWidth20, .zgo-fakeWidth25, 
.zgo-fakeWidth30, .zgo-fakeWidth35, .zgo-fakeWidth40, .zgo-fakeWidth45, .zgo-fakeWidth50, 
.zgo-fakeWidth55, .zgo-fakeWidth60, .zgo-fakeWidth65, .zgo-fakeWidth70, .zgo-fakeWidth75, 
.zgo-fakeWidth80, .zgo-fakeWidth85, .zgo-fakeWidth90, .zgo-fakeWidth95, .zgo-fakeWidth100 {
	float: left;
	padding: 0px;
}
.zweigle_oelpreise .zgo-fakeWidth5 { width: 3%; }
.zweigle_oelpreise .zgo-fakeWidth10 { width: 8%; }
.zweigle_oelpreise .zgo-fakeWidth15 { width: 13%; }
.zweigle_oelpreise .zgo-fakeWidth20 { width: 18%; }
.zweigle_oelpreise .zgo-fakeWidth25 { width: 23%; }
.zweigle_oelpreise .zgo-fakeWidth30 { width: 28%; }
.zweigle_oelpreise .zgo-fakeWidth35 { width: 33%; }
.zweigle_oelpreise .zgo-fakeWidth40 { width: 38%; }
.zweigle_oelpreise .zgo-fakeWidth45 { width: 43%; }
.zweigle_oelpreise .zgo-fakeWidth50 { width: 48%; }
.zweigle_oelpreise .zgo-fakeWidth55 { width: 53%; }
.zweigle_oelpreise .zgo-fakeWidth60 { width: 58%; }
.zweigle_oelpreise .zgo-fakeWidth65 { width: 63%; }
.zweigle_oelpreise .zgo-fakeWidth70 { width: 68%; }
.zweigle_oelpreise .zgo-fakeWidth75 { width: 73%; }
.zweigle_oelpreise .zgo-fakeWidth80 { width: 78%; }
.zweigle_oelpreise .zgo-fakeWidth85 { width: 83%; }
.zweigle_oelpreise .zgo-fakeWidth90 { width: 88%; }
.zweigle_oelpreise .zgo-fakeWidth95 { width: 93%; }
.zweigle_oelpreise .zgo-fakeWidth100 { width: 98%; }

.zweigle_oelpreise figure {
	margin: 0 0px 40px;
}

/* Headline
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.zweigle_oelpreise h1, .zweigle_oelpreise h2, .zweigle_oelpreise h3, 
.zweigle_oelpreise h4, .zweigle_oelpreise h5, .zweigle_oelpreise h6 {
	font-weight: normal;
	font-style: normal;
	color: #333333;
	font-weight: normal;
	margin-bottom: 0px;
}

.zweigle_oelpreise h1 {
	font-size: 30px;
	line-height: 30px;
	position: relative;
	margin-bottom: 20px;
}

.zweigle_oelpreise h2 {
	font-size: 24px;
	line-height: 30px;
	position: relative;
	margin-bottom: 20px;
}

.zweigle_oelpreise h3 {
	font-size: 20px;
	margin-bottom: 20px;
}

.zweigle_oelpreise h4 {
  font-size: 22px;
}

.zweigle_oelpreise h5 {
  font-size: 19px;
}



/* Form
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.zweigle_oelpreise form {
  margin-bottom: 0px;
}

.zweigle_oelpreise form fieldset {
	margin-right: 0px;
	margin-bottom: 10px;
}

.zweigle_oelpreise label {
	font-size: 16px;
	color: #a2212d;
}

.zweigle_oelpreise input.zgo-textfield {
	width: 100%;
	height: auto;
	border: 1px solid #c8c7c7;
	margin-bottom: 10px;
	padding: 10px 15px;
	font-size: 16px;
	color: #333333;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	box-sizing: border-box;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
.zweigle_oelpreise input.zgo-textfield:focus {
	background-color: rgba(256, 256, 256, .45);
}
.zweigle_oelpreise input.zgo-textfield.error {
	border-color: #ff0000;
	color: #ff0000;
}

.zweigle_oelpreise input[required]:invalid + label, .zweigle_oelpreise .select-style select[required]:invalid + label {
    display: inline-block;
}

.zweigle_oelpreise input[required]:valid + label, .zweigle_oelpreise .select-style select[required]:valid + label {
    display: none;
}
.zweigle_oelpreise input[required]:focus + label, .zweigle_oelpreise .select-style select[required]:focus + label {
    display: none;
}
.zweigle_oelpreise ::-webkit-input-placeholder { color: #fff; }
.zweigle_oelpreise :-moz-placeholder { color: #fff; }
.zweigle_oelpreise ::-moz-placeholder { color: #fff; }
.zweigle_oelpreise :-ms-input-placeholder { color: #fff; }

.zweigle_oelpreise textarea {
	width: 100%;
	max-width: auto;
	min-width: auto;
	min-height: 150px;
	border: 0px;
	margin-bottom: 10px;
	padding: 10px 15px;
	background-color: rgba(256, 256, 256, .3);

	color:#fff;
	font-size: 16px;
	line-height: 16px;

	box-sizing: border-box;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
.zweigle_oelpreise textarea:focus {
	background-color: rgba(256, 256, 256, .45);
}

.zweigle_oelpreise .select-style {
	padding: 0;
	margin: 0;
	width: 100%;
	border: 1px solid #bababa;
	margin-bottom: 20px;
	overflow: hidden;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	background: #fff url(../images/ico-select-arrowDown.jpg) no-repeat 100% 50%;
}
.zweigle_oelpreise .select-style:focus {
	background-image: url(../images/ico-select-arrowUp.jpg);
}

.zweigle_oelpreise .select-style select {
	width: 100%;
	color:#bababa;
	font-size: 16px;
	line-height: 47px;
	padding: 0px 0px;
	padding-left: 13px;
	margin-bottom: 0px;
	height: 45px;

	font-family: 'Roboto', sans-serif;
	font-weight: 400;

	border: none;
	box-shadow: none;
	background-color: transparent;
	background-image: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.zweigle_oelpreise .select-style select:focus {
  outline: none;
}
.zweigle_oelpreise .select-style select option {
  color:#2e2e2e;
  font-size: 20px;
  background-color: #fcfcfc;
}

.zweigle_oelpreise button.zgo-btn {
	border: 0px;
	text-transform: none;
	padding: 3px 10px;
	box-sizing: border-box;
	height: auto;
	letter-spacing: 0px;
	margin-bottom: 0px;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}
.zweigle_oelpreise button.zgo-btn-grey {
	background-color: #f6f4f4;
	color: #333333;
	font-size: 15px;
}
.zweigle_oelpreise button.zgo-btn-grey:hover { background-color: #cacaca; }

.zweigle_oelpreise button.zgo-btn-red {
	background-color: #a2212d;
	color: #fff;
	font-size: 15px;
}
.zweigle_oelpreise button.zgo-btn-red:hover { background-color: #7c1821; }

.zweigle_oelpreise button.zgo-xlarge {
	width: 100%;
}
.zweigle_oelpreise button:before {
	content: '';
	height: 16px;
	width: 16px;
	display: inline-block;
	margin: 3px 8px -3px 0;

	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}
.zweigle_oelpreise button:hover:before {
	-moz-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	transform: rotate(360deg);
}
.zweigle_oelpreise button.ico-reload:before {
	background: transparent url(../images/ico-reload.svg) top no-repeat;
	background-size: 16px 16px;
}



/* Icons
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.zweigle_oelpreise i.ico-highlight--trend {
	height: 30px;
	width: 30px;
	display: inline-block;
	float: right;	
	margin: -3px 0;

	background-color: #828282;

	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}
.zweigle_oelpreise i.ico-highlight--trend:before {
	height: 30px;
	width: 30px;
	display: inline-block;
	content: '';
	background: transparent url(../images/ico-trend.svg) center no-repeat;
	background-size: 15px 10px;
}
.zweigle_oelpreise i.ico-highlight--trend.ico-top {
	background-color: #a2212d;
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.zweigle_oelpreise i.ico-highlight--trend.ico-down {
	background-color: #333333;
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.zweigle_oelpreise a, .zweigle_oelpreise .link {
	color: #a2212d;
    cursor:pointer;
}
.zweigle_oelpreise a:hover, .zweigle_oelpreise .link:hover {
	color: #a2212d;
	text-decoration: underline;
}

.zweigle_oelpreise a.zgo-btn {
	font-size: 12px;
	line-height: 20px;
	font-weight: 700;
	text-decoration: none;
	text-transform: uppercase;
	color: #fff;

	padding: 14px 40px;
	display: inline-block;
	height: auto;
	border: 0px;
	overflow: hidden;
	position: relative;
	-webkit-transition: color 0.6s ease;
	-moz-transition: color 0.6s ease;
	-ms-transition: color 0.6s ease;
	-o-transition: color 0.6s ease;
	transition: color 0.6s ease;
}


/* Page
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.zweigle_oelpreise .page-c {
	max-width: 1095px;
	margin: 0 auto;
	position: relative;
}

/* Header
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.zweigle_oelpreise .header-c {
	position: relative;
}

.zweigle_oelpreise .header-c__top {
	padding: 20px 0 30px;
}
	.zweigle_oelpreise .header-c__top #logo {
		float: left;
		max-width: 221px;
		max-height: 60px;
	}
	.zweigle_oelpreise .menu-icon {
	  position: relative;
	  float: right !important;
	  display: none;
	  margin: -30px 0px 0 0;
	  width: 30px;
	  height: 30px;
	  cursor: pointer;
	  /* to center */
	  float: none;
	  -webkit-transition: all 0.3s;
	          transition: all 0.3s;
	}

	.zweigle_oelpreise .menu-icon > span {
	  position: absolute;
	  top: 50%;
	  display: block;
	  width: 100%;
	  height: 3px;
	  margin-top: -3px;
	  background-color: #95171a;
	  border-radius: 3px;
	}

	.zweigle_oelpreise .menu-icon > span:before,
	.zweigle_oelpreise .menu-icon > span:after {
	  content: "";
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  background-color: #95171a;
	  border-radius: 3px;
	  -webkit-transition: all 0.3s;
	          transition: all 0.3s;
	}

	.zweigle_oelpreise .menu-icon > span:before {
	  -webkit-transform: translateY(-10px);
	          transform: translateY(-10px);
	}

	.zweigle_oelpreise .menu-icon > span:after {
	  -webkit-transform: translateY(10px);
	          transform: translateY(10px);
	}

	/* OPENED */

	.zweigle_oelpreise.header-c__top.open .menu-icon {
	  -webkit-transform: rotate(45deg);
	          transform: rotate(45deg);
	}

	.zweigle_oelpreise.header-c__top.open .menu-icon > span:before {
	  -webkit-transform: rotate(90deg);
	          transform: rotate(90deg);
	}

	.zweigle_oelpreise.header-c__top.open .menu-icon > span:after {
	  -webkit-transform: rotate(90deg);
	          transform: rotate(90deg);
	}
	.zweigle_oelpreise .area-menu {
		text-align: right;
	}
	.zweigle_oelpreise .area-menu ul.menu {
		display: inline-block;
		padding-top: 25px;
	}
	.zweigle_oelpreise .area-menu ul.menu li {
		list-style: none;
		float: left;
	}
	.zweigle_oelpreise .area-menu ul.menu li a {
		color: #333333;
		text-decoration: none;
		font-size: 14px;
		padding: 0 15px;
	}
	.zweigle_oelpreise .area-menu ul.menu li a:hover,
	.zweigle_oelpreise .area-menu ul.menu li a.menu--active {
		color: #a2212d;
	}


/* Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.zweigle_oelpreise div#c-content__header {
	padding-bottom: 30px;
	font-size: 20px;
}

.zweigle_oelpreise_chart {
    width:100%;
    height:600px;
}

.zweigle_oelpreise .table-c-highlight {
	margin-bottom: 20px;
	border: 1px solid #d1d0d0;
	position: relative;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
}
	.zweigle_oelpreise .c-highlight__header {
		padding: 15px 20px;
		background-color: #f6f4f4;
	}
		.zweigle_oelpreise .c-highlight__header h3 { font-size: 22px; color: #a2212d; margin-bottom: 0px; }

	.zweigle_oelpreise .c-highlight__content {
		padding: 15px 20px !important;
		font-size: 16px;
	}
		.zweigle_oelpreise .c-highlight__headPrice { 
			display: inline-block;
			padding-top: 10px;
			padding-bottom: 5px;

			font-size: 20px; 
			font-weight: bold; 
			color: #a2212d; 
		}
		.zweigle_oelpreise .c-highlight__subPrice { 
			font-size: 13px; 
			color: #9c9c9c; 
			line-height: 16px; 
		}
	.zweigle_oelpreise .c-highlight__content.c-highlight-list {
		padding: 0px !important;
	}
		.zweigle_oelpreise .c-highlight-list ul {
			padding: 0px;
			margin-bottom: 0px;

			list-style: none;
			width: 100%;
		}
		.zweigle_oelpreise .c-highlight-list ul li {
			padding: 15px 20px;
			margin-bottom: 0px;
		}
		.zweigle_oelpreise .c-highlight-list ul li:nth-child(even) {
			background-color: #f6f4f4;
		}

	.zweigle_oelpreise .c-highlight__footer {
		padding: 0 20px 15px 20px;
	}

.zweigle_oelpreise .c-charts__map-list {
	list-style: none;
	margin-bottom: 0px;
}
	.zweigle_oelpreise .c-charts__map-list li {
		margin-bottom: 2px;
	}
	.zweigle_oelpreise .c-charts__map-list li a {
		text-decoration: none;
	}

.zweigle_oelpreise .c-charts__list-plz {
	list-style: none;
	position: relative;
	margin: 0 -10px;
	margin-bottom: 300px;
	float: left;
	width: 100%;
	box-sizing: border-box;
}
	.zweigle_oelpreise .c-charts__list-plz > li {
		float: left;
		margin: 10px;
	}
	.zweigle_oelpreise .c-charts__list-plz > li > div {
		width: 100%;
	}
	.zweigle_oelpreise .c-charts__list-plz > li > div > a {
		width: 70px;
		padding: 12px 0;
		display: inline-block;
		background-color: #f6f4f4;
		border: 1px solid #d1d0d0;
		position: relative;
		z-index: 0;
		cursor: pointer;

		text-align: center;
		text-decoration: none;
		font-weight: bold;
		font-size: 18px;

		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		-webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
		-moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
		box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
		-webkit-transition: color 0.6s ease;
		-moz-transition: color 0.6s ease;
		-ms-transition: color 0.6s ease;
		-o-transition: color 0.6s ease;
		transition: color 0.6s ease;
	}
	.zweigle_oelpreise .c-charts__list-plz li.tooltip-active > div > a {
		border-color: #a1202c;
		border-bottom: 1px solid #fff;
		background-color: #fff;
		z-index: 2;
		padding: 12px 0 0px;
		margin-bottom: 10px;

		-webkit-border-bottom-right-radius: 0px;
		-webkit-border-bottom-left-radius: 0px;
		-moz-border-radius-bottomright: 0px;
		-moz-border-radius-bottomleft: 0px;
		border-bottom-right-radius: 0px;
		border-bottom-left-radius: 0px;
		-webkit-box-shadow: inherit;
		-moz-box-shadow: inherit;
		box-shadow: inherit;
	}

	.zweigle_oelpreise .c-charts__list-plz li div.tooltip {
		position: absolute;
		z-index: 1;
		width: 100%;
		padding: 20px 30px;
		box-sizing: border-box;
		margin: -11px 10px 40px 10px;
		margin-bottom: 40px;

		left: 0%;
		display: none;
		background-color: #fff;
		border: 1px solid #a2212d;

		-webkit-border-bottom-right-radius: 5px;
		-webkit-border-bottom-left-radius: 5px;
		-moz-border-radius-bottomright: 5px;
		-moz-border-radius-bottomleft: 5px;
		border-bottom-right-radius: 5px;
		border-bottom-left-radius: 5px;
		-webkit-transition: color 0.6s ease;
		-moz-transition: color 0.6s ease;
		-ms-transition: color 0.6s ease;
		-o-transition: color 0.6s ease;
		transition: color 0.6s ease;
        opacity:1;
	}
	.zweigle_oelpreise .c-charts__list-plz li.tooltip-active div.tooltip {
		display: block;
	}
	.zweigle_oelpreise div.tooltip ul {
		list-style: none;
		margin: 20px 0 0px;
	}
		.zweigle_oelpreise div.tooltip ul li {
			float: left;
			width: 33%;
			margin-bottom: 3px;
		}
		.zweigle_oelpreise div.tooltip ul li a {
			text-decoration: none;
		}

/* Pages
–––––––––––––––––––––––––––––––––––––––––––––––––– */




/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/

@media (min-width: 1200px) {
	.zweigle_oelpreise .zgo-container {
		max-width: 1060px;
	}
}

@media (max-width: 1200px) {
}

@media (max-width: 750px) {
    .zweigle_oelpreise_main_chart {
        height:1200px;
    }
	.zweigle_oelpreise * {
		word-wrap: break-word !important;
	}

	.zweigle_oelpreise .header-c__top {
		padding: 10px 0 20px;
		position: fixed;
		width: 100%;
		background-color: #fff;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	.zweigle_oelpreise #logo {
		position: relative;
		margin-top: -10px;
	}

	.zweigle_oelpreise .content-c {
		padding-top: 120px;
	}
	.zweigle_oelpreise .c-highlight__content {
		padding: 0px !important;
    }

	.zweigle_oelpreise .menu-icon {
		display: block;
		text-align: left;
	}

	.zweigle_oelpreise .area-menu ul.menu {
		display: none;
		text-align: center;
		top: 0;
		left: 0;
		display: none;
		position: fixed;
		width: 100%;
		height: 100%;
		opacity: 1;
		overflow-y: auto;
		background-color: rgba(246, 244, 244, .95);

		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		-webkit-transition: color 0.6s ease;
		-moz-transition: color 0.6s ease;
		-ms-transition: color 0.6s ease;
		-o-transition: color 0.6s ease;
		transition: color 0.6s ease;
	}
	.zweigle_oelpreise .area-menu ul.menu:before {
		content: '';
		position: absolute;
		display: inline-block;
		right: 12px;
		top: -13px;
		width: 0px;
		height: 0px;
		-webkit-transform:rotate(360deg);
		border-style: solid;
		border-width: 0 7.5px 13.0px 7.5px;
		border-color: transparent transparent #f6f4f4 transparent;
	}

	.zweigle_oelpreise .area-menu ul.menu li {
		display: block;
		float: none;
		padding: 0px 0px;
		margin: 0px 0px;
	}
	.zweigle_oelpreise .area-menu ul.menu li a {
		display: inline-block;
		padding: 8px 0px;
	}
	.zweigle_oelpreise .header-c__top.open ul.menu {
		display: block;
	}

	.zweigle_oelpreise .c-highlight__content form fieldset.fakeWidth50 {
		width: 100%;
		margin-left: 0%;
	}

	.zweigle_oelpreise div.tooltip ul li {
		width: 100%;
	}
    .hidden-xs {
        display:none;
    }
}

@media (min-width: 550px) and (max-width: 750px) {
}

@media (min-width: 750px) and (max-width: 1000px) {
}

@media (min-width: 1000px) and (max-width: 1200px) {
}

@media all and (-webkit-min-device-pixel-ratio: 2) {
}