@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
* {
	margin: 0;
	padding: 0;
}
@media only screen and (min-width:1081px) {
#prihlaseni {
	color: white;
	text-align: center;
	font-family: Roboto;
  font-size: 45px;
	background-color: #ff8f00;
	margin: 12px;
	padding: 30px;
	border-radius: 10px;
	max-width: 1212px;
}
#login{
  background-color:#fcdc80;
  border-radius:20px;
  margin:12px;
  padding:12px;
}
input[type="password"]
{
    border-radius:5px;
    padding:5px;
    cursor:pointer;
}
input[type="submit"]
{
    border-radius:5px;
    padding:5px;
    cursor:pointer;
}
body {
	background-image: url("fotky/bg.jpg");
	background-size: cover;
	background-attachment: fixed;
	max-width: 1212px;
	margin-left: auto;
	margin-right: auto;
}
header {
	background-color: #ff8f00;
	color: white;
	border-radius: 10px;
	margin: 12px;
	padding: 22px;
}
#nadpis {
	font-size: 46px;
	color: #ffffff;
	padding: 20px;
}
/*###Hlavni navigace###*/
.label_nav {
	margin: 0 40px 0 0;
	font-size: 26px;
	line-height: 70px;
	display: none;
	width: 26px;
	float: right;
}
#toggle {
	display: none;
}
.nav {
	float: right;
	margin: auto;
	padding: 22px 25px;
}
.menu a {
	display: inline;
	text-align: right;
	border: 3px solid #ffa000;
	margin: 10px 5px;
	padding: 10px 10px;
	font-size: 20px;
	border-radius: 5px;
}
#toggle {
	display: none;
}
/*###konec hlavni navigace###*/
/*###Sekundarni navigace###*/
#cssmenu#cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button{margin:0;padding:0;border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
#cssmenu:after, #cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
#cssmenu #menu-button{display:none;}
#cssmenu{margin:12px;width:auto;border-radius:4px 4px 0 0;border:1px solid #fbbc00;font-family:sans-serif;line-height:1;background:#ffd149;background:-webkit-linear-gradient(bottom,#ffcb2f,#ffd762);background:-ms-linear-gradient(bottom,#ffcb2f,#ffd762);background:-moz-linear-gradient(bottom,#ffcb2f,#ffd762);background:-o-linear-gradient(bottom,#ffcb2f,#ffd762);background:linear-gradient(to top,#ffcb2f,#ffd762);box-shadow:0 1px 1px rgba(0,0,0,0.15),inset 0 -2px 0px #ffc720,inset 0 1px 0 #ffdb72;}
#cssmenu > ul > li{float:left;}
#cssmenu.align-center > ul{font-size:0;text-align:center;}
#cssmenu.align-center > ul > li{display:inline-block;float:none;}
#cssmenu.align-right > ul > li{float:right;}
#cssmenu > ul > li > a{padding:20px 25px 21px 25px;font-size:15px;text-decoration:none;color:#fcfefb;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;}
#cssmenu > ul > li:first-child > a{border-top-left-radius:4px;border-bottom-left-radius:4px;}
#cssmenu.align-center > ul > li:first-child > a{border-radius:0;}
#cssmen.align-right > ul > li:first-child > a{border-top-left-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-right-radius:0;}
#cssmenu > ul > li:hover > a, #cssmenu > ul > li.active > a{color:#444444;}
#cssmenu > ul > li:hover > a, #cssmenu > ul > li > a:hover{background:rgba(125,125,125,0.04);}
#cssmenu > ul > li:after{content:'';position:absolute;top:18px;right:0;display:block;height:20px;width:1px;opacity:.15;background:rgba(0,0,0,0.7);background:linear-gradient(to top,rgba(0,0,0,0), #000,rgba(0,0,0,0));background:-webkit-linear-gradient(top,rgba(0,0,0,0), #000,rgba(0,0,0,0));background:-ms-linear-gradient(top,rgba(0,0,0,0), #000,rgba(0,0,0,0));background:-moz-linear-gradient(top,rgba(0,0,0,0), #000,rgba(0,0,0,0));background:-o-linear-gradient(top,rgba(0,0,0,0), #000,rgba(0,0,0,0));}
#cssmenu.align-right > ul > li:after{right:auto;left:-1px;}
#cssmenu > ul > li:before{content:'';position:absolute;top:18px;right:-1px;display:block;height:20px;width:1px;opacity:.35;background:rgba(255,255,255,0.8);background:linear-gradient(to top,rgba(0,0,0,0), #fff,rgba(0,0,0,0));background:-webkit-linear-gradient(top,rgba(0,0,0,0), #fff,rgba(0,0,0,0));background:-ms-linear-gradient(top,rgba(0,0,0,0), #fff,rgba(0,0,0,0));background:-moz-linear-gradient(top,rgba(255,255,255,0.01), #fff,rgba(255,255,255,0.01));background:-o-linear-gradient(top,rgba(0,0,0,0), #fff,rgba(0,0,0,0));}
#cssmenu.align-right > ul > li:before{right:auto;left:0px;}
#cssmenu > ul > li:last-child:after, #cssmenu > ul > li:last-child:before{display:none;}
#cssmenu.small-screen{width:100%;}
#cssmenu.small-screen > ul, #cssmenu.small-screen.align-center > ul{width:100%;text-align:left;}
#cssmenu.small-screen > ul > li, #cssmenu.small-screen.align-center{float:none;display:block;border-top:1px solid rgba(100,100,100,0.1);}
#cssmenu.small-screen > ul > li > a{padding:18px 25px;}
#cssmenu.small-screen > ul > li:after, #cssmenu.small-screen > ul > li:before{display:none;}
#cssmenu.small-screen #menu-button{display:block;padding:18px 25px 19px 25px;cursor:pointer;font-size:15px;text-decoration:none;color:#fcfefb;}
#cssmenu.small-screen #menu-button.menu-opened{color:#444444;}
#cssmenu.small-screen #menu-button:after{content:"";position:absolute;right:25px;top:20px;display:block;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;border-top:2px solid #fcfefb;border-bottom:2px solid #fcfefb;width:18px;height:3px;}
#cssmenu.small-screen #menu-button.menu-opened:after{border-top:2px solid #444444;border-bottom:2px solid #444444;}
#cssmenu.small-screen #menu-button:before{content:"";position:absolute;right:25px;top:30px;display:block;width:18px;height:2px;background:#fcfefb;}
#cssmenu.small-screen #menu-button.menu-opened:before{background:#444444;}
/*###Konec sekundarni navigace###*/
section {
	background-color: #ffd149;
	margin: 12px;
	padding: 30px;
	border-radius: 10px;
}
article{
  background-color:#fcdc80;
  border-radius:20px;
  margin:12px;
  padding:12px;
}
footer {
	margin: 12px;
	background-color: #ff8f00;
	border-radius: 10px;
}
#toplist {
	margin: 10px;
	padding: 10px;
}
#datum {
	text-align: right;
}
/*###Gallery###*/
.gallery{
	margin: 10px 50px;
}
.gallery img{
	width: 250px;
	padding:15px;
	transition: 1s;
}

.gallery img:hover{
	filter: grayscale(100%);
	transform: scale(1.1);
}
/*###konec Gallery###*/
.obrazek {
	border-radius: 5px;
	max-width: 614px;
	padding: 7px;
  	margin-top; 5px;
}
video {
	max-width: 614px;
	padding: 7px;
	margin-top; 5px;
}

iframe{
	max-width: 614px;
	padding: 7px;
	margin-top; 5px;
}
#odpocet {
	border: 3px solid #034EA2;
	border-radius: 5px;
	background: #034EA2;
	color: white;
	padding: 20px;
}
#foto-slider{
	max-width: 870px;
	width: auto;
	height: auto;
	border-radius: 5px;
}
.tlacitko{
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  color: white;
  background:grey;
  border: 2px solid black;
  border-radius: 5px;
  margin: 20px;
  padding: 9px;
  width: 200px;
}
button{
float: right;
margin:16px;
padding: 5px;
background-color: #393838;
color:white;
border: 2px solid #393838;
border-radius: 5px;
}

#btnVypocitej,
#overit,
#btnOverit{
    float: none;
}
table{
  border: 2px solid white;
  font-size: 17px;
}
th{
  width: 80px;
  height: 30px;
  border: 2px solid white;
}
td{
  width: 80px;
  height: 30px;
  border: 2px solid white;
}
p{
	font-size: 17px;
}
li{
	font-size: 17px;
}
ul{
	font-size: 17px;
}
section ul {
  margin-left: 20px;
}
.menu_dlazdice{
  margin: 40px 0px 100px 0px;
}
.menu_dlazdice a{
	margin-right: 90px;
	font-size: 22px;
	border-radius: 5px;
	border: 1px solid white;
	display: flex;
	text-align: center;
	background: darkorange;
	padding: 15px;
	margin-left: 90px;
	margin-bottom: 20px;
  }
/*###Pexeso###*/
*{font-family:Roboto;}
#boxcard{margin:0 auto;width:625px;z-index:1;}
#boxcard div{float:left;width:100px;height:100px;background:#d9d9d9;margin:5px;padding:5px;border:1px solid #999;cursor:pointer;-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5);-moz-box-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 1px 2px rgba(0,0,0,.5);z-index:2;}
#boxcard div img{border:none;z-index:3;}
.opacity{opacity:.6;filter:alpha(opacity=60);}
#boxbutton{text-align:center;padding:20px;}
.link{font-size:18px;color:#ffffff;text-decoration:none;background:#0066cc;padding:5px 10px;-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em;}
.link:hover{background:#999;}
/*###Konec pexeso###*/
/*###Komentáře###*/
.Input {
	border: 1px solid orange;
	width: 300px;
}
.Submit {
	border: 1px solid orange;
	width: 300px;
}
/*###Konec komentáře###*/

a:link{color:white;text-decoration:none;}
a:visited{color:white;text-decoration:none;}
a:focus{color:white;text-decoration:none;}
a:hover{color:black;text-decoration:none;}
a:active{color:white;text-decoration:none;}
}

.area {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.area .box-items {
	background: #ff8f00;
	padding: 22px 45px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 20px;
	line-height: 39px;
	margin: 10px;
	min-width: 260px;
	min-height: 250px;
}

@media only screen and (max-width:1080px) {
#prihlaseni {
	background-color: #ff8f00;
	color: white;
	padding: 12px;
	font-size: 100px;
	margin: 9px;
	border-radius: 5px;
}
#login{
  background-color:#fcdc80;
  border-radius:20px;
  margin:12px;
  padding:12px;
  font-size:40px;
}
input[type="password"]
{
    border-radius:5px;
    padding:35px;
    cursor:pointer;
    border: 5px white solid;
    font-size:35px
}
input[type="submit"]
{
    border-radius:5px;
    border: 5px white solid;
    padding: 0;
    cursor:pointer;
    font-size:18px;
}
body{
	background-color: #aaaaaa;
}
header{
	background-color: #ff8f00;
	color: white;
	padding: 12px;
	font-size: 35px;
	margin: 9px;
	border-radius: 5px;
}
#nadpis {
	font-size: 36px;
	color: #ffffff;
}
/*###Hlavni navigace###*/
.label_nav {
	display: block;
	cursor: pointer;
	float: right;
  margin:-49px 4px;
}
.menu {
	text-align: center;
	width: 100%;
	display: none;
}
.menu a {
	display: block;
	border-bottom: 1px solid #EAEAEB;
	margin: 0;
}
#toggle:checked + .menu {
	display: block;
}
.checker{
  display:none;
}
/*###Konec hlavni navigace###*/
/*####Sekundarni navigace###*/
#cssmenu{margin:9px;border-radius:5px;}
#cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button{margin:0;padding:0;border:0;list-style:none;line-height:1;display:block;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
#cssmenu:after, #cssmenu > ul:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
#cssmenu #menu-button{display:none;}
#cssmenu{width:auto;border-radius:4px 4px 0 0;border:1px solid #fbbc00;font-family:sans-serif;line-height:1;background:#ffd149;background:-webkit-linear-gradient(bottom,#ffcb2f,#ffd762);background:-ms-linear-gradient(bottom,#ffcb2f,#ffd762);background:-moz-linear-gradient(bottom,#ffcb2f,#ffd762);background:-o-linear-gradient(bottom,#ffcb2f,#ffd762);background:linear-gradient(to top,#ffcb2f,#ffd762);box-shadow:0 1px 1px rgba(0,0,0,0.15), inset 0 -2px 0px #ffc720, inset 0 1px 0 #ffdb72;}
#cssmenu > ul > li{float:left;}
#cssmenu.align-center > ul{font-size:0;text-align:center;}
#cssmenu.align-center > ul > li{display:inline-block;float:none;}
#cssmenu.align-right > ul > li{float:right;}
#cssmenu > ul > li > a{padding:20px 25px 21px 25px;font-size:15px;text-decoration:none;color:#fcfefb;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease;}
#cssmenu > ul > li:first-child > a{border-top-left-radius:4px;border-bottom-left-radius:4px;}
#cssmenu.align-center > ul > li:first-child > a{border-radius:0;}
#cssmen.align-right > ul > li:first-child > a{border-top-left-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-right-radius:0;}
#cssmenu > ul > li:hover > a,#cssmenu > ul > li.active > a{color:#444444;}
#cssmenu > ul > li:hover > a,#cssmenu > ul > li > a:hover{background:rgba(125,125,125,0.04);}
#cssmenu > ul > li:after{content:'';position:absolute;top:18px;right:0;display:block;height:20px;width:1px;opacity:.15;background:rgba(0,0,0,0.7);background:linear-gradient(to top,rgba(0,0,0,0),#000, rgba(0,0,0,0));background:-webkit-linear-gradient(top,rgba(0,0,0,0),#000, rgba(0,0,0,0));background:-ms-linear-gradient(top,rgba(0,0,0,0),#000, rgba(0,0,0,0));background:-moz-linear-gradient(top,rgba(0,0,0,0),#000, rgba(0,0,0,0));background:-o-linear-gradient(top,rgba(0,0,0,0),#000, rgba(0,0,0,0));}
#cssmenu.align-right > ul > li:after{right:auto;left:-1px;}
#cssmenu > ul > li:before{content:'';position:absolute;top:18px;right:-1px;display:block;height:20px;width:1px;opacity:.35;background:rgba(255,255,255,0.8);background:linear-gradient(to top,rgba(0,0,0,0),#fff, rgba(0,0,0,0));background:-webkit-linear-gradient(top,rgba(0,0,0,0),#fff, rgba(0,0,0,0));background:-ms-linear-gradient(top,rgba(0,0,0,0),#fff, rgba(0,0,0,0));background:-moz-linear-gradient(top,rgba(255,255,255,0.01),#fff, rgba(255,255,255,0.01));background:-o-linear-gradient(top,rgba(0,0,0,0),#fff, rgba(0,0,0,0));}
#cssmenu.align-right > ul > li:before{right:auto;left:0px;}
#cssmenu > ul > li:last-child:after,#cssmenu > ul > li:last-child:before{display:none;}
#cssmenu.small-screen{width:100%;}
#cssmenu.small-screen > ul,#cssmenu.small-screen.align-center > ul{width:100%;text-align:left;}
#cssmenu.small-screen > ul > li,#cssmenu.small-screen.align-center{float:none;display:block;border-top:1px solid rgba(100,100,100,0.1);}
#cssmenu.small-screen > ul > li > a{padding:18px 25px;}
#cssmenu.small-screen > ul > li:after,#cssmenu.small-screen > ul > li:before{display:none;}
#cssmenu.small-screen #menu-button{display:block;padding:18px 25px 19px 25px;cursor:pointer;font-size:15px;text-decoration:none;color:#fcfefb;}
#cssmenu.small-screen #menu-button.menu-opened{color:#444444;}
#cssmenu.small-screen #menu-button:after{content:"";position:absolute;right:25px;top:20px;display:block;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;border-top:2px solid #fcfefb;border-bottom:2px solid #fcfefb;width:18px;height:3px;}
#cssmenu.small-screen #menu-button.menu-opened:after{border-top:2px solid #444444;border-bottom:2px solid #444444;}
#cssmenu.small-screen #menu-button:before{content:"";position:absolute;right:25px;top:30px;display:block;width:18px;height:2px;background:#fcfefb;}
#cssmenu.small-screen #menu-button.menu-opened:before{background:#444444;}
.tlacitko{font-weight:bold;font-size:20px;text-align:center;color:white;float:center;background:#034EA2;border:2px solid #034EA2;border-radius:5px;margin:20px;padding:9px;}
/*###Konec sekundarni navigace###*/
section{
	background-color: #ffd149;
	margin: 9px;
	padding: 12px;
	border-radius: 10px;
}
article{
  background-color:#fcdc80;
  border-radius:20px;
  margin-bottom:15px;
  padding:12px;
}
footer{
	background-color: #ff8f00;
	padding: 12px;
	margin: 9px;
	border-radius: 5px;
}
#datum{
	text-align: right;
}
/*###Gallery###*/
.gallery{
	margin: auto;
	width:82%;
}
.gallery img{
	width: 300px;
	padding:10px;
	transition: 1s;
}

.gallery img:hover{
	filter: grayscale(100%);
	transform: scale(1.1);
}
/*###konec Gallery###*/
.obrazek{
	border-radius: 5px;
	max-width: 614px;
	width: -moz-available;
	width: 100%;
    margin-top: 5px;
}
video {
	max-width: 614px;
	width: -moz-available;
	width: 100%;
	margin-top: 5px;
}

iframe{
	max-width: 614px;
	width: -moz-available;
	width: 100%;
	margin-top: 5px;
}
#odpocet{
	border: 3px solid #034EA2;
	border-radius: 5px;
	background: #034EA2;
	padding: 20px;
	color: white;
}
.tlacitko{
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  color: white;
  float: center;
  background:grey;
  border: 2px solid black;
  border-radius: 5px;
  margin: 20px;
  padding: 9px;
}
button{
float: right;
font-size: 12px;
margin:16px;
padding: 5px;
background-color: #393838;
color:white;
border: 2px solid #393838;
border-radius: 5px;
outline: none;
}
#btnVypocitej,
#overit,
#btnOverit{
    float: none;
}
section ul {
  margin-left: 20px;
}
.menu_dlazdice{
  margin: 30px 0px 0px 0px;
}
.menu_dlazdice a{
	margin-right: 20px;
	font-size: 22px;
	border-radius: 5px;
	border: 1px solid white;
	display: flex;
	text-align: center;
	background: darkorange;
	padding: 15px;
	margin-left: 10px;
	margin-bottom: 10px;
  }
/*###Pexeso###*/
*{font-family:Roboto;}
#boxcard{margin:0 auto;width:625px;z-index:1;}
#boxcard div{float:left;width:100px;height:100px;background:#d9d9d9;margin:5px;padding:5px;border:1px solid #999;cursor:pointer;-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5);-moz-box-shadow:0 1px 2px rgba(0,0,0,.5);box-shadow:0 1px 2px rgba(0,0,0,.5);z-index:2;}
#boxcard div img{border:none;z-index:3;}
.opacity{opacity:.6;filter:alpha(opacity=60);}
#boxbutton{text-align:center;padding:20px;}
.link{font-size:18px;color:#ffffff;text-decoration:none;background:#0066cc;padding:5px 10px;-webkit-border-radius:.5em;-moz-border-radius:.5em;border-radius:.5em;}
.link:hover{background:#999;}
/*###Konec pexeso###*/
a:link{color:white;text-decoration:none;}
a:visited{color:white;text-decoration:none;}
a:focus{color:white;text-decoration:none;}
a:hover{color:black;text-decoration:none;}
a:active{color:white;text-decoration:none;}
}

.warp-cups {
	display: flex;
	flex-wrap: wrap;
	margin-left: -20px;
}

.warp-cups .cup {
	display: inline-block;
	border-radius: 10px;
	padding: 10px;
	background: #ff8f00;
	margin: 20px 0 0 20px;
	position: relative;
	max-height: 320px;
}

.warp-cups .cup img:hover {
	filter: blur(8px) grayscale(100%);
}

.warp-cups .cup img:hover + h4{
	display: block;
}

.warp-cups .cup img {
	max-width: 300px;
	border-radius: 10px;
	transition: 0.8s;
}

.warp-cups .cup h4 {
	left: 82px;
	top: -181px;
	position: relative;
	color: #ff8f00;
	font-size: 50px;
	display: none;
	transition: 0.8s;
}

@media (max-width: 768px) {
	.warp-cups {
		display: flex;
		flex-wrap: wrap;
		margin-left: -20px;
		justify-content: center;
	}

	.warp-cups .cup {
		display: inline-block;
		border-radius: 10px;
		padding: 10px;
		background: #ff8f00;
		margin-bottom: 20px;
		position: relative;
		max-height: 320px;
		margin-left: 5px;
	}
}

@media (max-width: 1080px) {
	.warp-cups {
		display: flex;
		flex-wrap: wrap;
		margin-left: 0;
	}

	.warp-cups .cup {
		display: inline-block;
		border-radius: 10px;
		padding: 10px;
		background: #ff8f00;
		margin-bottom: 20px;
		position: relative;
		max-height: 320px;
		margin-left: 5px;
	}
}

.benefits {
	display: flex;
	justify-content: space-between;
	align-content: stretch;
	flex-wrap: wrap;
	margin: -5px;
}

.benefits .item {
	flex: 0 1 calc((100% / 4) - 10px);
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: column;
	background: #3775A4;
	margin: 5px;
	padding: 10px;
	border-radius: 10px;
}

.benefits .item img {
	width: 50px;
	margin: 0 0 10px 0;
}

.benefits .item span {
	color: #85B3D7;
	font-size: 18px;
	font-weight: 500;
}

@media (max-width: 1080px) {
	.benefits .item {
		flex: 0 1 calc((100% / 3) - 10px);
	}
}

@media (max-width: 768px) {
	.benefits .item {
		flex: 0 1 calc((100% / 2) - 10px);
	}

	.photos	.item {
		flex: 0 1 calc((100% / 1) - 10px);
	}
}

@media (max-width: 560px) {
	.benefits .item {
		flex: 0 1 calc((100% / 1) - 10px);
	}
}

.photos {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	margin: -5px;
}

.photos	.item {
	flex: 0 1 calc((100% / 2) - 10px);
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 5px;
	background: #fff;
	border-radius: 10px;
}


@media (max-width: 768px) {
	.photos	.item {
		flex: 0 1 calc((100% / 1) - 10px);
	}
}

.electricity {
	margin: -10px;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: center;
}

.electricity.center {
	justify-content: center;
}

.electricity .item {
	flex: 0 1 calc((100% / 3) - 20px);
	background: #fff;
	border-radius: 10px;
	padding: 10px;
	margin:	10px;
}

.electricity .item .status-icon {
	height: 20px;
	display: none;
	animation-name: pulse;
	animation-duration: 2.0s;
	animation-timing-function: ease-out;
	animation-direction: alternate;
	animation-iteration-count: infinite;
	animation-play-state: running;
}

@keyframes pulse {
	0% {
		transform: scale(1.5);
	}

	100% {
		transform: scale(0.7);
	}
}

.electricity .item .status-icon.charge {
	display: block;
}

.electricity .item .status-icon.discharge {
	display: block;
}


.electricity .item div {
	display: flex;
	justify-content: space-between;
	align-items: end;
}

.electricity .item h3 {
	font-size: 14px;
	margin: 0 0 10px 0;
}

.electricity .item div span {
	font-size: 30px;
	font-weight: bold;
}

.electricity .item div img {
	height: 45px;
}

.other-data {
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-wrap: wrap;
	margin: -10px;
}

.other-data .item {
	flex: 0 1 calc((100% / 4) - 20px);
	background: #fff;
	border-radius: 10px;
	padding: 10px;
	margin:	10px;
}

.other-data .item div {
	display: flex;
	justify-content: space-between;
	align-items: end;
}

.other-data .item h3 {
	font-size: 14px;
	margin: 0 0 10px 0;
}

.other-data .item div span {
	font-size: 30px;
	font-weight: bold;
}

.other-data .item div img {
	height: 45px;
}

@media (max-width: 1024px) {
	.electricity .item {
		flex: 0 1 calc((100% / 2) - 20px);
	}

	.other-data .item {
		flex: 0 1 calc((100% / 2) - 20px);
	}
}

@media (max-width: 512px) {
	.electricity {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.electricity .item {
		flex: 0 1 100%;
	}

	.other-data {
		display: flex;
		flex-direction: column;
	}
}