@charset "UTF-8";
/*
*
*	Innogy - Mobile View
*	Author: SECONDRED Newmedia GmbH
*	Web: http://www.secondred.de
*
*/
@media screen and (max-width: 1520px){
    .block-tile.middle .current-watt .box {padding:20px !important; font-size:25px; line-height: 25px}
    .block-tile.middle .current-watt .box small {font-size:16px; line-height: 100%}
    
    .block-tile.middle .current-price .splitter {margin:20px -30px 45px}
    .block-tile.middle .current-price .splitter .triangle-top, 
    .block-tile.middle .current-price .splitter .triangle-bottom {width: 60px; height: 40px; margin-left: -30px}
    
}
@media screen and (min-width: 1366px) and (max-width: 1520px){
    .block-tile.small .current-price {padding-top:30px}
    .block-tile.small .current-price .price {font-size: 54px}
    .block-tile.small .current-price .price small {font-size: 38px}
}
@media screen and (min-width: 1281px) and (max-width: 1366px){
    .block-tile.middle .current-price .splitter {margin:10px -30px 35px}
    .block-tile.middle .current-price .splitter .triangle-top, 
    .block-tile.middle .current-price .splitter .triangle-bottom {width: 50px; height: 35px; margin-left: -25px}
}
@media screen and (max-width: 1400px){	
	.block-content .inner {	padding: 25px 30px;} 
}
@media screen and (max-width: 1366px){
    .block-tile.large .live-chartwrap .watt {top:70px}
    
    .block-tile.middle .current-watt .watt {top:-10px}
    .block-tile.middle .current-watt .box {min-height:100px}
    .block-tile.middle .current-watt .box {padding:15px !important; font-size:23px; line-height: 23px}
    .block-tile.middle .current-watt .box small {font-size:14px;}
        
    .block-tile.small .inner {padding:25px}
    .block-tile.small .current-watt .watt {font-size:35px}
    .block-tile.small .current-watt .watt small {font-size:20px}
  
	.kontakt .grid .box,
	.einstellungen .grid .box,
	.meine-daten .grid .box {float: none; width: auto; padding: 0 !important; margin-bottom: 40px}
}
@media screen and (max-width: 1280px){
    
    .block-tile.small .inner {padding:20px}
    .block-tile.small .current-watt .watt {font-size:30px}
    .block-tile.small .current-watt .watt small {font-size:14px}
    
    .block-tile.small .chart-stat .stat-item .ico {font-size:35px}
    .block-tile.small .chart-stat .stat-item .stat {font-size:25px}
    
    .block-tile.middle {}
    .block-tile.middle .chart-stat .stat-item .ico {font-size:40px}
    .block-tile.middle .chart-stat .stat-item .stat {font-size:18px}
    
    .cardwrap.middle,
    .cardwrap.large {width: 100%;float: none}
    .cardwrap.small {width:50%}
	
	.eigenschaft .btn-option .icon { margin: 0 20px; padding-bottom:70%}
	.eigenschaft .btn-option .icon svg {width: auto !important; height: auto !important; max-height: 40%; max-width: 40%}
	.eigenschaft .btn-option .label,
	.eigenschaft .btn-option label{font-size: 18px}
	
	.mein-haushalt-wizard .wizard-content { padding-bottom: 40px}
	.sb-overlay.align-right .sidebar {margin-left: 0}
}
@media screen and (max-width: 1024px){
    #login fieldset {padding: 25px 40px; width: 400px; margin-left: -200px}
	
	.widget-grid.grid.three .box { width: 50%}
	.widget-grid.grid.three .box:nth-child(odd) { padding: 0 10px 0 0}
	.widget-grid.grid.three .box:nth-child(even) { padding: 0 0 0 10px}
	.widget-grid .box img { width: 100% !important; height: auto !important}
	
	.sidebar.addItem {width: 100%}
}
@media screen and (max-width: 960px){
	.sidebar.myDevices {width: 95%;-webkit-overflow-scrolling: touch;}
    .sidebar.myDevices h2 {font-size:30px}
    .sidebar.myDevices #chart-consumer-details {padding:0 30px}
    .sidebar.myDevices .sidebar-subhead .active-time .splitter .bar {width:50px}
    .sidebar.myDevices .sidebar-subhead .active-time .status-wrap { width: 270px}
    .sidebar.myDevices .sidebar-subhead .active-time .status-wrap .satus{ font-size:18px }
}
/* -- Tablet  -- */
@media screen and (max-width: 768px){
	.grid.two .box { width:100%; padding-left:0 !important; padding-right:0 !important}
	.grid.three .box { width:50%}    
    
    #container {padding-left: 0 }
    a#hamburger { display: block; position: absolute; right: -40px; top:0; z-index: 99}
    .sidebar.lft {
        position: fixed; left: 0; top: 0; bottom: 0;
        -webkit-transform: translate(-100%, 0%);
        -moz-transform: translate(-100%, 0%);
        transform: translate(-100%, 0%);
        display:block; z-index: 88;
        -webkit-transition: -webkit-transform 350ms cubic-bezier(0.2, 1, 0.3, 1);
	    -moz-transition: -moz-transform 350ms cubic-bezier(0.2, 1, 0.3, 1);
	    transition: transform 350ms cubic-bezier(0.2, 1, 0.3, 1);
    }
    .sidebar.lft.open {
        -webkit-transform: translate(-0%, 0%);
        -moz-transform: translate(0%, 0%);
        transform: translate(0%, 0%);
    }
    .cardwrap.large {width: 100%;float: none}
    .cardwrap.small {width:50%}
	
	.sb-overlay.align-right .sidebar { padding: 40px 40px}
	.wizard-btns button {margin-bottom: 30px}
	
	.wizard-steps { padding: 0}
	.wizard-content .eigenschaft { margin: 0 0px 40px}
	
	.sb-overlay {padding: 30px}
	
	fieldset.register h2 {font-size: 25px}
	fieldset.register .grid .box .formItem { margin-bottom: 0}
	fieldset.register .grid .box a.btn { margin: 20px auto 0; width: 100%}
	fieldset.register .hotline-msg {font-size: 16px}
	fieldset.register .hotline-msg .number { font-size: 20px}
}
/* -- Smartphone Landscape -- */
@media screen and (max-width: 736px){
    #container { overflow: hidden}
    .overlay-infos .overlay-box {width: 95%; overflow: auto}
	
	.kontakt,
	.meine-innogy,
	.einstellungen,
	.meine-daten {padding-top: 30px}
	
	fieldset.change-email {}
	fieldset.change-email .formItem {float: none; width: auto; margin-right: 0}
	fieldset.change-email button { width: 100%} 
	
	.einstellungen .btn-wrap a {max-width: 100%}
	
	.block-content .logo {float: none !important; margin-bottom: 30px; text-align: center}
	
	.widget-grid.grid.three .box { width: 100%; float: none}
	.widget-grid.grid.three .box:nth-child(odd) { padding: 0 }
	.widget-grid.grid.three .box:nth-child(even) { padding: 0 }
	
	#overlay-logout .overlay-box { width:440px}
	.overlay-infos button.btn { width: 140px}
}
/* -- Smartphone Portrait -- */
@media screen and (max-width: 480px){
	#login {min-height: 750px}
	#login fieldset {width: 100%; margin-left: auto; left: 0}
	#overlay-logout .overlay-box { width:300px}
	.overlay-infos button.btn { width: 100%; margin-bottom: 20px}
	
	.grid.two .box,
	.grid.three .box { width:100%; float:none; padding-left:0; padding-right:0}
    
    /* -- Sidebar - Defaults -- */
    .sidebar button.icon-close {font-size:30px; top: 1px}
    
    .overlay-infos .overlay-box { max-height:90%}
    
    .chart-icon {font-size:18px;}
    #chart-consumer-details .highcharts-tooltip h3 {font-size: 20px; padding: 0}
    #chart-consumer-details .highcharts-tooltip hr {margin:5px 0}
    
    
    #chart-consumer-large .highcharts-tooltip .ico {font-size: 7.4vw;line-height: 7.4vw;}
    #chart-consumer-large .highcharts-tooltip h3 {font-size: 7vw;line-height: 7vw;}
    #chart-consumer-large .highcharts-tooltip h4 {font-size: 4vw; line-height: 4vw;}
    
    /* -- Sidebar - Links -- */   
    .block-user .img {width:100px; height: 100px}
    .block .img img { width: 100px !important; height: auto}
    
    /* -- Sidebar - Sortieren -- */
    .sidebar.sort {width:95%}
    .sidebar.sort h2 {font-size:30px}
    
    .sort-list-item { width: 100% }
    .sort-list-item > div {font-size:16px;}
    .sort-list-item .name { width: calc(100% - 130px)}
    
    /* -- Sidebar Right -- */
    .sidebar.rt {width: 95%; overflow: hidden; overflow-y: auto; height: 100vh;-webkit-overflow-scrolling: touch;}
    .sidebar.rt h2 {font-size:30px}
    
    .widget-grid .box { padding:0 !important}
    .widget-grid .box img  { display: block; margin: 0 auto 20px}
    
    nav.tabs { font-size:16px}
    nav.tabs ul li {margin-right:0; float:none}
    nav.tabs ul li a:before {display:none}
    
    /* -- Sidebar meine Geräte -- */
    .sidebar.myDevices {width: 95%;-webkit-overflow-scrolling: touch;}
    .sidebar.myDevices h2 {font-size:30px}
    .sidebar.myDevices #chart-consumer-details {padding:0 30px}
    .sidebar.myDevices .sidebar-subhead .active-time .splitter .bar {width:50px}
    
    .sidebar.myDevices .sidebar-subhead .current-watt {font-size:30px; margin-bottom: 15px}
    
    .myDevices-pager .current-month {font-size:20px}
    .myDevices-content .chart-stat { padding: 10px 20px}
    
    .chart-stat .chart-entry {font-size:14px}
    .chart-stat .chart-entry .ico {font-size:18px; line-height: 18px}
    .chart-stat .chart-entry .wastage {width:75px;}
    .chart-stat .chart-entry .name {width: calc(100% - 180px);}
    .chart-stat .chart-entry .price {width: 65px;}
    
    /* -- Header -- */
    #header {margin:0 20px}
    #header a {font-size:16px}
    
    .cardwrap button.icon-close {display:none}
    .block-tile .inner a.live-details,
    .block-tile .inner a.consumer-details {filter: alpha(opacity=100);opacity: 1;}
    
    /* -- Card Wrap-- */
    .cardwrap button.icon-close {right:30px}
    .cardwrap.small { min-height: 0}
    .cardwrap.middle {min-width: 100%}
    .cardwrap.large {min-width: 0}
    
    /* --  Block Tiles- */
    .block-tile {margin: 0 10px 20px;}
    .block-tile .inner {overflow:hidden}
    .block-tile h3 {font-size:30px; position: relative; z-index: 4}
    .block-tile h4 {font-size:20px}
    
    .block-tile.small {padding-bottom: calc(100% - 20px);}
    
    .block-tile.large {padding-bottom: 100%}
    .block-tile.large .live-chartwrap .watt {top:150px}
    
    .block-tile.add a{font-size:16px}
    
    .block-tile.middle {padding-bottom:50%}
    .block-tile.middle .chart-stat .stat-item .ico {font-size:30px}
    .block-tile.middle .chart-stat .stat-item .stat {padding-top:5px}
    
    .block-tile.middle .current-watt .watt {font-size:30px}
    .block-tile.middle .current-watt .box {width:33.333333%; float: left}
    
	.block-content h3 { font-size: 23px}
    /* -- -- */
    .highcharts-container .large {font-size:25px}
    .highcharts-container .small {font-size:14px}
	
	/* -- Mein Haushalt -- */
	.mein-haushalt {padding-left: 40px}
	.mein-haushalt:before {left: 10px}
	.mein-haushalt-wrap p { font-size: 14px}
	
	.eigenschaft { padding: 20px 20px}
	.eigenschaft h3 {font-size: 16px}
	.eigenschaft:before {left: -45px}
	.eigenschaft .btn-option .label,
	.eigenschaft .btn-option label{font-size: 14px; padding: 0 10px}
	
	.einstellungen .btn-wrap a,
	.block-content button {width: 100%}
	
	.einstellungen .btn-wrap {padding-top: 0}
	
	fieldset .checkbox-wrap label strong {	font-size: 16px;padding: 0;}
	fieldset .checkbox-wrap label small {font-size: 12px;line-height: 16px;	}
	
	.wizard-content {}
	.wizard-content p{ font-size: 14px}
	
	.wizard-steps .step {width: 20px; height: 20px}
	.wizard-steps:before {top: 10px}
	
	.wizard-btns button {width: 100%; margin:  0 0 20px 0}
}
/* -- Smartphone Portrait - Kleine Displays -- */
@media screen and (max-width: 320px){
	
}