@media screen and (max-width: 1024px) {
	#need-help button.btn,
	#need-help p { display: none; }

	#need-help:hover button.btn,
	#need-help:hover p,
	#need-help.hover button.btn,
	#need-help.hover p { display: inherit; }

}

@media all and (max-width: 960px) {
	.topbar {
		flex-wrap: wrap;
		height: auto;
		padding: 0;
	}
	.topbar .wp-logo {
		margin: 10px auto 0;
	}
	.topbar .breadcrumb {
		flex: 1;
	}
	.topbar .meta-menu {
		flex: 0 0 100%;
		margin: 10px auto;
		justify-content: space-between;
	}
	.meta-menu div {
		margin: 0 10px;
	}
/*
	.meta-menu .notifications {
		position: absolute;
		right: 15px;
		top: 15px;
	}
*/
	main {
		flex-direction: column;
	}
	.sidebar {
		order:1;
		flex:0 1 100%;
		width: 100%;
/* 		height: 60px; */
		margin: 0;
	}
	.sidebar ul {
		margin: 0;
		padding: 0;
		display: flex;
		height: 100%;
	}
	.sidebar ul li {
		display: flex;
		flex: 1;
		margin: 0;
		padding: 0;
		height: 100%;
		justify-content: center;
		align-items: flex-end;
	}
	.sidebar ul li span {
		display: none;
	}
	.sidebar a:link,
	.sidebar a:visited {
		padding: 12px 6px;
	}
	.content-row,
	.with-action {
		flex-flow: column;
	}
	.stats-box {
		flex: 0;
	}
	.stats-box .is-action {
		padding: 0;
	}
	.stats-box + .stats-box {
		margin: 0;
	}
	.stats-box:not(:last-child) {
		margin: 0 0 20px;
	}
	.action-box {
		padding: 10px 0;
		margin: 0 auto;
	}
	.is-action {
		text-align: center;
	}
	.is-action h2 {
		max-width: 100%;
		margin: 20px auto 10px;
	}
	.is-action .btn.ghst {
		display: inline-block;
	}
	.todo .action a:link {
		font-size: 1.25em;
	}
	.todo .action a::before {
		min-width: 70px;
		margin-right: 10px;
	}
	.todo .action span {
		min-width: 150px;
		margin-right: 10px;
	}
	.todo .info-box {
		margin-top: 10px;
		margin-left: 10px;
		flex: 0 1 100%;;
	}
	.teaser-group {
		justify-content: space-around;
	}
	.action-box .btn.cta {
		margin: 0 auto;
	}
	.section.infos {
		width: 380px;
	}
	.section.actions a:link,
	.section.actions a:visited {
		font-size: .8em;
		margin: 0;
	}





	.header_boxes {
		justify-content:end;
		align-self:flex-end;
		height:auto;
		margin-left:auto;
		max-width:400px;
	}

	.header_box {
		flex-direction:column;
		flex:0;
		align-items:flex-end;
	}

	.header_box {
		align-items:center;
		flex-grow:1;
	}

	.header_box p {
		padding:5px 30px;
		white-space:nowrap;
	}

	.header_box p.bold {
		padding:0 0 5px;
	}

	.header_box p,#top-bar p {
		margin:0;
	}

	.header_box br {
		display:none1;
	}

	.tariff-left-col p,.tariff-middle-col p {
		display:block;
		height:30px;
		line-height:.9em;
	}

	.tariff-middle-col,.tariff-left-col {
		border-bottom:1px solid rgba(102,102,102,0.15);
	}
}

@media all and (max-width: 756px) {
	.main-content {
		padding: 15px;
	}
	.main-content > h1, .main-content > h2 {
		margin-bottom: 20px;
	}
	.section.infos {
		width: auto;
		border-radius: 10px 10px 0 0;
		flex-basis: 100%;
	}
	.section.actions {
		flex: 1 1 66.66%;;
		padding: 10px;
		border-radius: 0 0 0 10px;
	}
	.section.status {
		font-size: 1.5em;
		flex: 1 1 33.33%;
		max-width: none;
		border-radius: 0 0 10px;
	}


	#account #top-bar .columns {
		clear:both;
		width:100%;
	}
	.header_boxes {
		justify-content:center;
		max-width:100%;
	}

	.header_box {
		flex-grow:1;
	}

	.header_box:first-of-type,.header_box {
		border:none;
	}

	header .heading {
		height: auto;
	}

	#top-bar .heading p {
		margin-bottom: 40px;
	}

	header .heading .columns {
		margin-top:30px;
	}

	#top-bar .heading h1 {
		font-size:1.5em;
		margin:0;
	}
	.content-wrapper{
		display: block;
	}
}

/* Responsive < 640px */
@media screen and (max-width: 45.714em) {
	.is-fixed .heading {
		display: none;
	}
	.is-fixed + main > div,
	.is-fixed + main .block_userinfos {
		margin-top: 80px;
	}
	.stat_block {
		margin-bottom: 0;
	}
	.action-link a {
		display: block;
	}
	.action-link .action-info,
	.action-link .action-trigger {
		border-width: 3px;
		border-radius: 5px;
	}
	.option-btn {
		margin-bottom: 20px
	}
	.block_footnote {
		padding: 10px;
	}
	footer ul,
	footer .text-right ul {
		text-align: center;
		margin: 0 auto;
	}
	footer li,
	footer .text-right li {
		padding: 0 5px;
	}

	#top-bar .heading p:empty {
		padding-bottom: 40px
	}

	/* older rules */
	.main .breadcrumb a.undone:after {
		box-shadow:3px -3px #2a70b0;
	}

	.main .breadcrumb__title {
		display:none;
	}

	.breadcrumb__short {
		display:block;
		font-family:'Gilroy Bold';
		font-weight:400;
		border-radius:50%;
		border:2px solid #fff;
		padding:0 8px;
	}

	.undone .breadcrumb__short {
		border:2px solid #2a70b0;
	}

	.done1 .breadcrumb__short,.done2 .breadcrumb__short,.done3 .breadcrumb__short,.done4 .breadcrumb__short {
		background-color:#fff;
		color:#2a70b0;
	}

	.content_with_sidebar {
		padding:0;
	}

	.row.tariff-data {
		display:flex;
	}

	.tariff-images {
		order:1;
		justify-content:center;
		padding-top:20px;
	}

	.tariff-infos {
		order:2;
	}

	.tariff-text {
		order:3;
	}

	.tariff-actions {
		order:4;
	}

	.zaehler-info p span {
		display:block;
		margin:5px 0 10px;
	}

	.process_header_info img {
		max-height:80px;
		margin:10px auto;
	}

	.exit-new-contract p {
		margin:0 auto 20px;
		text-align:center;
	}
}

/* Responsive < 600px */
@media screen and (max-width: 42.857em) {
	.topbar {
		height: 65px;
	}
	.topbar .wp-logo {
		flex: 0 0 60px;
		margin-top: 0
	}
	.topbar .wp-logo img {
		max-height: 36px;
	}
	.topbar .breadcrumb ul {
		margin: 0;
		padding: 0 0 0 15px;
	}
	.topbar .breadcrumb li {
		font-size: .8em;
	}
	.topbar .meta-menu {
		position: fixed;
		bottom: 0;
		background-color: #fff;
		background: rgb(65,130,168);
		background: linear-gradient(-180deg, rgba(65,130,168,1) 0%, rgba(39,87,121,1) 60%);
		height: 80px;
		width: 100%;
		margin: 0;
		padding: 15px 10px 0;
		align-items: flex-start;
	}
	/* reset look */
	.meta-menu a span,
	.meta-menu div > span {
		display: none;
	}
	.meta-menu > div {
		display: flex;
		flex-flow: column;
		align-items: center;
		position: relative;
	}
	.meta-menu div {
		margin: 0 6px;
	}
	.meta-menu a:link,
	.meta-menu a:visited,
	.meta-menu .new_contract {
		display: flex;
		background-color: transparent;
		border-radius: 0;
		border: none;
		padding: 0;
		height: 50px;
		width: 50px;
		z-index: 1;
	}
	.meta-menu .profile_link {
		background: transparent url("../icons/icon-profile.svg") no-repeat top center;
		background-size: auto 32px;
	}
	.meta-menu .new_contract {
		background: transparent url("../icons/icon-new.svg") no-repeat top center;
		background-size: auto 32px;
	}
	.meta-menu .logout_link {
		background: transparent url("../icons/icon-logout.svg") no-repeat top center;
		background-size: auto 32px;
	}
	.meta-menu .notifications {
		background-image: url("../icons/notifications-light.svg");
	}
	.meta-menu .profile_link:after,
	.meta-menu .new_contract:after,
	.meta-menu .logout_link:after,
	.meta-menu .notifications:after {
		position: absolute;
		bottom: 0;
		content: "";
		display: block;
		font-size: 10pt;
		color: rgba(255, 255, 255, 0.75);
		z-index: 0;
		line-height: 1;
		text-transform: uppercase;
	}
	.meta-menu .profile_link:after {
		content: "Profil";
	}
	.meta-menu .new_contract:after {
		content: "Neu!";
	}
	.meta-menu .logout_link:after {
		content: "Logout";
	}
	.meta-menu .notifications:after {
		content: "Aktuell";
		top: calc(100% + 5px);
		position: absolute;
	}
	.meta-menu .profile_id:before {
		display: block;
		content: "Wechselpilot ID";
		color: #fff;
		font-size: 10pt;
		margin-bottom: 0px;
	}
	.meta-menu .new_contract {
		order: 2;
	}
	.meta-menu .new_contract:hover {
		background-color:transparent;
	}
	.profile_link {
		order: 1;
	}
	.meta-menu .profile_id {
		color: #fff;
		order: 3;
	}
	.logout_link {
		order: 4;
	}
	#notifications {
		display: flex;
		order: 5;
		margin-right: 10px;
		position: relative;
	}
	#need-help {
		position: absolute;
		top: 15px;
		right: 10px;
		bottom: auto;
		padding: 5px 10px;
		font-size: 11pt;
	}
	#need-help strong span {
		display: none;
	}
	#need-help.hover strong span {
		display: inherit;
	}
	#need-help button.btn {
		margin-bottom: 5px;
	}
	.sidebar nav {
		width: 100%;
		overflow-x: auto;
		max-width: 100vw;
		-webkit-overflow-scrolling: touch;
	}
	.sidebar nav::-webkit-scrollbar {
		display: none;
		-webkit-appearance: none;
		width: 0;
		height: 0;
	}
	.main-content .content-row:last-of-type {
		margin-bottom: 80px;
	}
	.stats-wrapper,
	.has-shadow.highlight-blue {
		width: auto;
	}
	.stats-box span.stats-value {
		max-width: 72%
	}
	.teaser-box .btn.cta {
		font-size: 1em;
	}
	.todo-box,
	.contracts-group {
		padding: 10px;
	}
	.todo .info-box {
		margin-left: 0;
	}
	.todo .action {
		margin-right: 0;
	}
	.todo .action a:link,
	.todo .action a:visited {
		flex-flow: column wrap;
		align-content: flex-start;
	}
	.todo .action a::before {
		width: 70px;
		min-width: 50px;
	}
	.todo .action .action-title {
		margin: 10px 0 0;
		padding: 0;
	}
	.todo .action .action-infos {
		margin: 10px auto 10px 0;
		min-width: 0;
	}
	.todo .action a::before {
		display: flex;
	}
	.contract-group {
		margin-right: 0;
		flex: 0 1 100%;
	}
	.contract-info-box {
		margin: 0 auto;
	}
	.contract-info a:link, .contract-info a:visited {
		display: block;
	}
	.contract-info .savings {
		padding: 10px 0 5px;
	}
	.contract-info em {
		margin-bottom: 3px;
	}
	.contract-info .status {
		padding-top: 0;
	}
	.group-contract {
		margin-bottom: 10px;
	}
	.teaser-group {
		margin: 0 -15px 20px;
	}
	.teaser-box {
		flex: 0 1 160px;
		padding: 10px;
	}
	.teaser-box h3 {
		font-size: 1.25em;
	}
	.teaser-box .btn.cta {
		padding: 6px 12px;
	}
	.teaser-box p.info-text {
		margin-top: 20px;
		width: 80%;
	}
	.meter-bar {
		display: block;
		padding: 10px;
		font-size: 1.25em;
		text-align: center;
	}
	.meter-views div:not(.action-box) {
		font-size: 1.25em;
		margin-bottom: 10px;
	}
	.meter-views div.action-box {
		display: none
	}
	.single-item .section.infos span:first-child {
		padding-left: 0;
		width: 90px;
		min-width: inherit;
	}
	.single-item .section.actions a:link,
	.single-item .section.actions a:visited,
	.single-item .section.status {
		font-size: 15pt;
	}
	.single-item .section.infos {
		width: auto;
		border-radius: 10px 10px 0 0;
	}
	.single-item .section.actions a:link,
	.single-item .section.actions a:visited {
		margin: 0;
	}
	.single-item .section.status {
		border-radius: 0 0 10px 0;
		flex-basis: 100px;
	}
	.meter-options {
		flex-flow: column wrap;
		align-items: flex-start;
	}
	.meter-options div {
		display: block;
		flex: 1 1 100%;
		margin: 0 0 10px;
	}
	.contract_header {
		flex-flow: column wrap;
		align-items: flex-start;
	}
	.contract_header .section {
		line-height: 1.3;
		margin-bottom: 10px;
		order: 2;
	}
	.contract_header .section span {
		width: 80px;
	}
	.contract_header .section.provider-logo {
		order: 1;
		flex: 1;
		align-self: center;
		margin-right: 0;
		justify-content: center;
	}
	.contract_separator {
		flex-flow: column wrap;
		align-items: flex-end;
		padding-right: 10%;
	}
	.contract_separator span {
		width: 100px;
		text-align: right;
	}
	.contract_details {
		flex-flow: column wrap;
		align-items: flex-start;
	}
	.td-infos h3 {
		width: 130px;
	}
	.td-list .type {
		flex: 0 0 130px;
	}
	.history .single-item .section.infos {
		flex: 0 1 100%;
		flex-flow: column wrap;
		align-items: flex-start;
		border-radius: 10px 10px 0 0;
		padding: 10px 20px;
	}
	.history .single-item .section.infos span {
		flex: 0;
		width: 100%;
		padding: 0;
	}
	.history .single-item .section.infos em {
		width: 80px;
		text-align: right;
		padding-right: 10px;
		display: inline-block;
	}
	.history .single-item .section.status {
		flex: 1;
		font-size: 16pt;
		padding: 2px;
		border-radius: 0 0 10px 10px;
		margin-bottom: 10px
	}
	.history .single-item.show-detail .section.infos {
		border-radius: 10px 10px 0 0;
	}
	.history .single-item.show-detail .section.status {
		margin-bottom: 0;
	}
	.documents .single-item,
	.metercounts .single-item,
	.documents .single-item:last-child,
	.metercounts .single-item:last-child {
		margin-bottom: 8px;
		cursor: pointer;
		border-radius: 10px;
	}
	.documents .single-item .section.date,
	.metercounts .single-item.section.date {
		order: 1;
		flex: 0 1 50%;
	}
	.documents .single-item .section.download {
		order: 2;
		flex: 0 1 50%;
		justify-content: flex-end;
	}
	.documents .single-item .section.subject {
		order: 3;
		flex: 1;
		flex-flow: column;
		align-items: flex-start;
		border-radius: 0 0 10px 10px;
	}
	.documents .single-item .section.subject span:first-child:before,
	.documents .single-item .section.subject span:last-child:before {
		font-weight: 400;
		content: "Art: ";
		display: inline-block;
		margin-right: 7px;
		opacity: .5;
	}
	.documents .single-item .section.subject span:last-child:before {
		content: "Von: ";
		margin-right: 5px;
	}
	.metercounts .section.subject span:first-child {
		flex: 0 1 auto;
	}
	.metercounts .single-item:first-child .section.change {
		order: 4;
		flex: 0 1 100%;
		justify-content: center;
	}
	.metercounts .single-item:not(:first-child) .section.change {
		display: none;
	}
	.metercounts .single-item .section.subject {
		flex-flow: column wrap;
		align-items: flex-start;
		order: 3;
		flex: 1;
		border-radius: 0 10px 10px 0;
	}
	.metercounts .single-item:first-child .section.subject {
		border-radius: 0 10px 0 0;
	}
	.meter-form {
		padding: 10px;
		margin-bottom: 30px;
	}
	.mc-form-group {
		flex-flow: column wrap;
		flex: 0 1 100%
	}
	.mc-form-date {
		margin: 0
	}
	.mc-form-wrapper {
		display: flex;
		flex-flow: column;
		margin-bottom: 10px;
	}
	.mc-form-wrapper input,
	.mc-form-input.metercountextra input,
	.mc-form button {
		border-radius: 10px;
		margin-bottom: 10px;
	}
	.search-meter.meter-form {
		margin-bottom: 0;
	}
	.search-meter .mc-form-wrapper,
	.search-meter .mc-form button {
		margin-bottom: 0;
	}
	.search-meter .select2-container {
		width: 100% !important;
		text-align: center;
	}
	#account .select2-container--open .select2-dropdown--below {
		margin-top: -10px;
	}
	.search-meter .select2-container--default .select2-selection--single {
		border-radius: 10px;
		margin-bottom: 10px;
		max-width: none;
		width: 100%;
	}
	.news-box ul {
		margin: 40px 0 0;
	}
	.news-box ul li:not(.last-child) {
		margin-bottom: 15px;
	}
	.jBox-image-container {
		max-width: calc(100vw - 40px);
		max-height: 100%;
		left: 20px;
	}
	.jBox-image-label:not(.expanded),
	.jBox-image-label.active {
		max-width: calc(100vw - 20px);
		left: 10px;
		line-height: 1;
		padding: 8px 10px;
		text-align: left;
	}
	.single-view-form {
		max-width: 100vw;
	}
	.form-wrapper {
		max-width: 100vw;
	}
	select[name="meterIdForIban"] {
		font-size: 12pt;
	}
	.main .change-all div:first-child:not(.toggle) label[for="changeForAll"] {
		font-size: 11pt;
	}


	/************/
	/* OLD CODE */
	/************/

	.flex-elements {
		justify-content:center;
		flex-direction:column-reverse;
	}

	#account .row {
		max-width:100vw;
	}

	.form_box h3,.form_box h4,.reveal h3 {
		font-size:1.3em;
	}

	.form_box label,.reveal label {
		text-align:left;
	}

	.form_box .btn.cta,.btn.ghst,button.btn.cta,.main button.btn.cta,.main button.btn.ghst {
		padding:10px 24px;
		line-height:1.2em;
	}

	.btn.smaller {
		padding:10px;
	}

	.form_box a:link,.form_box a:visited {
		display:inline-block;
	}

	.form_box label[for=energyStrom] {
		margin-top:20px;
	}

	.input_wrapper {
		flex-direction:row;
		align-items:center;
	}

	input[type="checkbox"] + label {
		margin-right:1em;
	}

	.filter-options .filter-box {
		width:100%;
	}

	.filter-box .toggle {
		margin-bottom:20px;
	}

	.filter-box .toggle-label {
		font-size:1em;
		padding-top:3px;
	}

	.filter-box .radios label:last-of-type {
		margin-bottom:10px;
	}

	.input_kwh {
		margin-right:2px;
	}

	.kwh-household {
		white-space:nowrap;
		margin-top:-10px;
	}

	.kwh-household.hh-gas {
		margin-top:-20px;
	}

	.customer_type {
		text-align:center;
	}

	.link_toggle a:link,.link_toggle a:visited {
		font-size:1em;
		padding:4px 15px;
		margin:0 auto 20px;
	}

	.process_header_align {
		text-align:center;
	}

	.overview-tariff-newtariff {
		padding:15px 10px;
	}

	.overview-tariff-options .columns {
		margin-bottom:10px;
	}

	.overview-tariff-options .columns:last-of-type {
		margin-bottom:0;
	}

	.new-tariff .row {
		flex-direction:column;
	}

	.new-tariff .row.tariff-ersparnis {
		flex-direction:row;
	}

	.new-tariff .tariff-logo {
		justify-content:center;
	}

	.new-tariff .tariff-tariff {
		text-align:center;
		margin-top:20px;
	}

	.row.overview-userdata {
		display:block;
	}

	.row.next_steps {
		display:block;
	}

	.next_steps p {
		margin-bottom:20px;
	}

	.account-profile .show-lieferaddress p strong {
		display:block;
		text-align:left;
		width:auto;
	}

	.account-profile .profile-meta {
		clear:both;
		float:none;
		text-align:left;
	}

	.contract-data p {
		text-align:left;
		margin:0;
		line-height:1.5em;
	}

	.contract-details .text-right,.contract-details p.text-center {
		text-align:left;
	}

	.contract-data .mobile-title {
		margin-top:10px;
		color:#2a70b0;
	}

	.zaehlerstand {
		text-align:left;
	}

	.old-contract .text-right p {
		margin:15px 0;
	}

	.tarif-details-button {
		margin-bottom:-10px;
	}

	#account .main .filter-button .btn.ghst,#account .main .filter-button .btn.cta,.filter-button button.cta {
		padding:10px 20px;
	}

	.kwh-household {
		margin-left:15px;
	}

	.zaehlerstand p {
		margin-top:-10px;
	}

	.filter-box .radios label {
		display:block;
	}

	p.nowrap {
		white-space:nowrap;
	}

	.overview-userdata .columns:last-of-type div.overview-tariff-options {
		margin:0 0 30px;
	}
}

@media screen and (max-width: 42.857em) and (orientation: landscape) {
	p.mobile-title {
		display:block!important;
	}
}

/* max width 320px */
@media screen and (max-width: 22.857em) {
	.logo img {
		max-width:80%;
	}

	.header_box p:not(.bold) {
		display:none;
	}
}