*{font-family: helvetica, arial; color: white; margin: 0; padding: 0; line-height: 110%;}
body{text-align: center; width: 100%; height: 0; overflow: hidden; line-height: 0;}
h1, h2, h3{font-weight: normal;}
section{margin: 5px;}
.blue{color: rgb(0, 153, 204);}
.s{text-decoration: line-through;}
.d{clear: both; width: 100%;}
.g{padding-top: 10px;}
.hidden{display: none;}
.no-select{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
/* overriding fucking IE biheviour: IE can't scale SVG images */
.svg{
	background-size: contain;
	display: inline-block;
}

.wrap-page{width: 1040px; height: 0; display: inline-block; line-height: 0; vertical-align: top; padding-top: 5px; padding-left: 5px;}
/* menu */
.wrap-menu{width: 260px; max-height: 520px; overflow: hidden; float: left;}
.toolbar{overflow: hidden;}
.tool{cursor: pointer; /*position: relative; left: -5px;*/ display: table-cell; margin-bottom: 6px; width: 255px; height: 99px; float: left; line-height: 90px; text-align: center; background-color: rgb(0, 153, 204);}
.tool-name{display: inline-block; vertical-align: middle; font-size: 34px;}
.tool-count{display: table-cell; position: relative; top: -82px; left: 215px; width: 28px; height: 28px; background: white; text-align: center; vertical-align: middle; font-size: 20px; font-weight: bold; border-radius: 14px; color: rgb(0, 153, 204);}

.tool-active{border-right: solid 6px rgb(0, 153, 204);}

/* main section */
.wrap-main{width: 775px; float: left;}
.target{display: block; color: rgb(0, 153, 204); width: 760px; height: 510px; overflow: hidden; border: solid 5px;}

/* top-button */
.white-space{height: 100px; width: 1px; background: white;}
.top-button{position: absolute; top: 390px; left: 900px; width: 120px; height: 100px; text-decoration: none;}
.top-button div{display: table-cell; width: inherit; height: inherit; text-align: center; vertical-align: middle;  background-color: rgb(255, 153, 40); border-radius: 60px; border: double 10px white; font-weight: bold; cursor: pointer;}
.top-button div:active{background-color: rgb(250, 148, 35);}
.top-button div span{color: white !important;}

/* actions */
.actions {overflow: auto;}
.actions .event {width: 360px; float: left; background-color: rgb(0, 153, 204); margin: 5px;}
.actions .event .name {width: 120px; margin: 5px; display: table-cell; vertical-align: middle; text-align: center;}
.actions .event .name h2 {/*color: rgb(0, 153, 204);*/ font-size: 18px; font-weight: bold;}
.actions .event .icon .svg{width: 80px; height: 80px;}
.actions .event .details {height: 100px; margin: 5px; text-align: left; border-left: solid 1px white; padding: 5px;}
.actions .event .details .expired {font-size: 13px; border-top: solid 1px white; margin-top: 2px;}
.actions .event .details a{background: white; text-decoration: none; border: solid 1px white;}
.actions .event .details i{font-size: 20px; font-weight: bold; font-style: normal;}
/* while actions has disabled */
.actions div{
	display: table-cell;
	width: inherit;
	height: inherit;
	vertical-align: middle;
	color: red;
	font-size: 50px;
}
/* while actions has disabled */

/* news */
.news {overflow: auto;}
.news *{color: rgb(0, 153, 204);}
.news .item{overflow: hidden; margin: 5px;}
.news .item .header {text-align: left;}
.news .item .date {color: white; padding: 0 5px;}
.news .item .text{font-size: 22px; text-align: justify; margin-bottom: 22px;}
.news .item .details{border: solid 1px rgb(0, 153, 204); border-radius: 10px; padding: 2px; /*background: rgb(0, 153, 204); color: white; display: none;*/}
.news .item .title{font-size: 22px; text-align: left; /*color: rgb(255, 153, 40);*/ font-weight: bold;}
.news .actual .date{background-color: rgb(255, 153, 40);}
.news .actual .header{border-bottom: solid 1px rgb(255, 153, 40);}
.news .expired .date{background-color: rgb(0, 204, 0);}
.news .expired .header{border-bottom: solid 1px rgb(0, 204, 0);}
.news .expired {display: none;}
.news .more-ico{display: inline-block; margin-left: 10px; padding-left: 3px; width: 20px; height: 23px; border: solid 1px rgb(0, 153, 204); border-radius: 20px; background: rgb(0, 153, 204) url('/art/ico-more.svg'); color: white; cursor: pointer;}

/* info */
.info *{color: rgb(0, 153, 204);}
.info p, .info li{font-size: 22px; text-align: justify; text-indent: 1.5em;}
.info p{margin: 5px 0;}
.info ul{padding-left: 60px; list-style: none;}
.info ul>li:before {content: '\233e  ';}
.info li {text-indent: -25px; margin-bottom: 5px;}
.info h1{font-size: 24px; color: white;}
.info h2{font-size: 22px; margin-top: 5px; font-weight: bold;}
.info ul{}
.info .header{width: 760px; height: 55px; max-height: 55px; background-color: rgb(0, 153, 204);}
.info .header .icon{background-color: rgb(0, 153, 204); width: 55px; height: 55px; float: left;}
.info .header .icon>.svg{float: left; width: 40px; height: 40px; margin: 5px; margin-right: 10px; margin-bottom: 10px;}
.info .header article{width: 430px; height: 55px; float: left;}
.info .header h1{display: table-cell; height: inherit; width: inherit; vertical-align: middle;}
.info .refs{display: block; float: left; /*margin-top: 5px; margin-left: 5px;*/}

.info .refs .price{margin-left: 10px; width: 265px; height: 55px;}
.info .refs .price *{color: white; font-size: 20px; text-align: left; vertical-align: middle;}
.info .refs .price .depricated {font-size: 13px; text-decoration: line-through;}

.info .a-wrap{width: 756px; max-height: 449px; padding: 2px; overflow: auto;}
.info .a-wrap aside{width: 251px; padding-bottom: 6px; margin: 5px; border-left: solid 1px rgb(0, 204, 0); float: right;}
.info .a-wrap aside>h2{font-size: 20px; text-align: left; padding-left: 6px; font-weight: normal;}
.info .button{cursor: pointer; margin: 0; padding: 1px 2px; text-indent: 0; background: rgb(0, 153, 204); color: white;}

/* calc */
.calc *{color: rgb(0, 153, 204); font-size: 22px;}
.calc .header * {color: white;}
.calc .header{width: 760px; height: 55px; max-height: 55px; background-color: rgb(0, 153, 204);}
.calc .header .icon{background-color: rgb(0, 153, 204); width: 55px; height: 55px; float: left;}
.calc .header .icon>.svg{float: left; width: 40px; margin: 5px; margin-right: 10px; margin-bottom: 10px;}
.calc .header>article{width: 700px; float: left;}
.calc h1{font-size: 24px; color: white;}
.calc h2{font-size: 22px; margin-top: 5px; font-weight: bold;}
.calc p{font-size: 22px; text-align: left;}
.calc .price {background: rgb(255, 153, 40); padding: 10px; margin: 10px 0; border-radius: 200px;  border: double 10px white;}
.calc .price .actual span{color: white; font-size: 150%;}
.calc .price .depricated span{color: white; font-size: 100%; text-decoration: line-through;}
.calc .a-wrap{width: 756px; max-height: 449px; overflow: auto; padding: 2px;}
.calc .a-wrap>aside{width: 251px; padding-bottom: 6px; margin: 5px; border-left: solid 1px rgb(0, 204, 0); float: left; display: none;}
.calc .a-wrap>aside>h2{font-size: 20px; text-align: left; padding-left: 6px; font-weight: normal;}
.calc .section{width: 100%; border-collapse: collapse; border-top: solid 1px rgb(0, 153, 204);}
.calc .section tr:first-child>td{padding-top: 5px;}
.calc .section tr:nth-child(even){background: rgb(240,240,255);}
.calc .section tr:nth-child(odd){background: white;}
.calc .section td{padding-top: 3px; padding-bottom: 3px;}
.calc .section td:nth-child(1){text-align: left;}
.calc .section td:nth-child(2){text-align: center; width: 200px; vertical-align: center;}
.calc .help-ico{display: inline-block; margin-left: 10px; padding-left: 5px; width: 20px; height: 20px;height: 23px; border: solid 1px rgb(0, 153, 204); border-radius: 20px; background: rgb(0, 153, 204); color: white; font-weight: bold; cursor: pointer;}
.calc .help-body{border: solid 1px rgb(0, 153, 204); border-radius: 10px; padding: 2px; background: rgb(0, 153, 204); color: white; display: none;}
.calc .help-body *{color: inherit; font-size: inherit;}
.calc .input {width: 190px; text-align: right;}
.touch .calc .native {display: none;}
.calc .custom{display: none; border: solid gray 1px; height: 28px; padding-top: 2px; margin: 3px;}
.touch .calc .custom {display: block;}
.calc #result {display: none; width: 470px; float: left;}
.calc .err{display: none; color: white; border: solid 1px red; border-radius: 7px; background: red; padding: 2px;}
.calc .err *{color: white;}

/* about */
.about {overflow: auto;}
.about *{color: rgb(0, 153, 204);}
/*.about .company{width: 400px; float: left; margin-top: 10px;}*/
.about .company{width: 400px; float: left; margin-top: 10px;}
/*.about .logo{width: 50px; float: left; margin: 5px 5px 0 5px;}*/
.about .logo{width: 50px; float: left; margin: 5px 5px 0 5px;display: none;}
/*.about .name{color: rgb(0, 153, 204); font-size: 25px; font-weight: bold; text-align: left; text-indent: 0; margin-left: 55px;}*/
.about .name{color: rgb(0, 153, 204); font-size: 20px; font-weight: bold; text-align: center; text-indent: 0;}
.about .divice{color: rgb(0, 153, 204); font-size: 16px; margin-top: 5px;}
.about .phone-n-email{color: white; background: rgb(0, 153, 204); font-size: 22px; text-align: center; padding-top: 3px; padding-bottom: 3px; margin-bottom: 15px;}
.about .phone-n-email a {color:white;}
.about p {color: rgb(0, 153, 204); font-size: 22px; text-align: justify; text-indent: 1.5em; margin: 0 5px;}
/*.about .creds {font-size: 22px; text-align: left; border-left: solid 1px rgb(0, 204, 0); float: left; margin: 5px 0 0 5px; padding-left: 5px;}*/
.about .creds {width: 340px; font-size: 22px; text-align: right; border-left: solid 1px rgb(0, 204, 0); float: left; margin: 5px 0 0 5px; padding-left: 5px;}
.about .creds p {text-indent: 0; text-align: right;}
/*.about .creds p span{float: left; min-width: 95px;}*/
.about .creds p span{float: left; min-width: 105px; text-align: left;}

/* contacts */
.contacts {overflow: auto;}
.contacts *{color: rgb(0, 153, 204);}
/*.contacts .company{width: 400px; float: left; margin-top: 10px;}*/
.contacts .company{width: 400px; float: left; margin-top: 10px;}
/*.contacts .logo{width: 50px; float: left; margin: 5px 5px 0 5px;}*/
.contacts .logo{width: 50px; float: left; margin: 5px 5px 0 5px; display: none;}
/*.contacts .name{color: rgb(0, 153, 204); font-size: 30px; font-weight: bold; text-align: left; text-indent: 0; margin-left: 55px;}*/
.contacts .name{color: rgb(0, 153, 204); font-size: 20px; font-weight: bold; text-align: center; text-indent: 0;}
.contacts .divice{color: rgb(0, 153, 204); font-size: 16px; margin-top: 5px;}
.contacts .phone-n-email{color: white; background: rgb(0, 153, 204); font-size: 22px; text-align: center; padding-top: 3px; padding-bottom: 3px; margin-bottom: 15px;}
.contacts .phone-n-email a {color:white;}
.contacts p {color: rgb(0, 153, 204); font-size: 22px; text-align: justify; text-indent: 1.5em; margin: 0 5px;}
/*.contacts .creds {font-size: 22px; text-align: left; border-left: solid 1px rgb(0, 204, 0); float: left; margin: 5px 0 0 5px; padding-left: 5px;}*/
.contacts .creds {width: 340px; font-size: 22px; text-align: right; border-left: solid 1px rgb(0, 204, 0); float: left; margin: 5px 0 0 5px; padding-left: 5px;}
.contacts .creds p {text-indent: 0; text-align: right;}
/*.contacts .creds p span{float: left; min-width: 95px;}*/
.contacts .creds p span{float: left; min-width: 105px; text-align: left;}

/* text */
.text {overflow: auto; text-align: left;}
.text *{color: rgb(0, 153, 204); font-size: 22px;}
.text p {color: rgb(0, 153, 204); font-size: 22px; text-align: left; text-indent: 1.5em; margin: 0 5px;}
.text ul{padding-left: 60px; list-style: none;}
.text ul>li:before {content: '\233e  ';}
.text li {text-indent: -25px; margin-bottom: 5px;}

/* order */
.order {overflow: auto; text-align: left;}
.order *{color: rgb(0, 153, 204); font-size: 22px;}
.order p {color: rgb(0, 153, 204); font-size: 22px; text-align: left; text-indent: 1.5em; margin: 0 5px;}
.order ul{padding-left: 60px; list-style: none;}
.order ul>li:before {content: '\233e  ';}
.order li {text-indent: -25px; margin-bottom: 5px;}
.order .company{width: 400px; float: left; margin-top: 10px;}
.order .logo{width: 50px; float: left; margin: 5px 5px 0 5px; display: none;}
.order .name{color: rgb(0, 153, 204); font-size: 20px; font-weight: bold; text-align: center; text-indent: 0;}
.order .divice{color: rgb(0, 153, 204); font-size: 16px; margin-top: 5px;}
.order .phone-n-email{color: white; background: rgb(0, 153, 204); font-size: 22px; text-align: center; padding-top: 3px; padding-bottom: 3px; margin-bottom: 15px;}
.order .phone-n-email a {color:white;}
.order p {color: rgb(0, 153, 204); font-size: 22px; text-align: justify; text-indent: 1.5em; margin: 0 5px;}
.order .creds {width: 340px; font-size: 22px; text-align: right; border-left: solid 1px rgb(0, 204, 0); float: left; margin: 5px 0 0 5px; padding-left: 5px;}
.order .creds p {text-indent: 0; text-align: right;}
.order .creds p span{float: left; min-width: 105px; text-align: left;}

/* error page */
.error div{
	display: table-cell;
	width: inherit;
	height: inherit;
	vertical-align: middle;
	color: red;
	font-size: 50px;
}

/**/
.i0{border-color: rgb(0, 153, 204);}
.i1{border-color: rgb(0, 153, 204);}
.i2{border-color: rgb(0, 153, 204);}
.i3{border-color: rgb(0, 153, 204);}
.i4{border-color: rgb(0, 153, 204);}
.i5{border-color: rgb(0, 153, 204);}
.i6{border-color: rgb(0, 153, 204);}
.i7{border-color: rgb(0, 153, 204);}

/* tiles */
.tile{display: block; text-decoration: none; width: 242px; height: 242px; margin-left: 8px; margin-top: 8px; float: left; border-radius: 5px;}
.tile .svg{width: 120px; height: 120px; margin: 10px; border: none;}
.tile h2{color: white; font-size: 22px; height: 96px; width: inherit; text-align: center; vertical-align: middle; margin: 0; margin-bottom: 5px; padding: 0 5px; display: table-cell;}

.half-tile{display: block; text-decoration: none; width: 242px; height: 117px; margin-left: 8px; margin-top: 8px; float: left; border-radius: 5px;}
.half-tile .svg{width: 30px; height: 30px; margin: 10px; margin-bottom: 0;}
.half-tile h2{color: white; font-size: 22px; height: 72px; width: inherit; text-align: center; vertical-align: middle; margin: 0; margin-bottom: 5px; padding: 0 5px; display: table-cell;}

.quarter-tile{display: block; text-decoration: none; width: 117px; height: 117px; margin-left: 8px; margin-top: 8px; float: left; border-radius: 5px;}
.quarter-tile .svg{width: 30px; height: 30px; margin: 10px;}
.quarter-tile h2{color: white; font-size: 16px; height: 72px; width: inherit; text-align: center; vertical-align: middle; margin: 0; margin-bottom: 5px; padding: 0 5px; display: table-cell;}

.aside-tile{display: block; text-decoration: none; width: 243px; height: 57px; max-height: 57px; overflow: hidden; margin-left: 8px; margin-top: 8px; float: left; background-color: rgb(0, 153, 204); border-radius: 5px;}
.aside-tile .svg{width: 30px; height: 30px; margin: 13px 10px; float: left;}
.aside-tile>h2{color: white; font-size: 18px; height: 57px; width: inherit; font-weight: normal; text-align: center; margin: 0; padding: 0 5px; display: table-cell; vertical-align: middle;}

.tiles>*:nth-child(7n+1){background-color: rgb(0, 102, 204);}
.tiles>*:nth-child(7n+1) .font-color{color: rgb(0, 102, 204);}
.tiles>.tool-active:nth-child(7*n+1){border-right: solid 6px rgb(0, 102, 204);}

.tiles>*:nth-child(7n+2){background-color: rgb(204, 0, 102);}
.tiles>*:nth-child(7n+2) .font-color{color: rgb(204, 0, 102);}
.tiles>.tool-active:nth-child(7n+2){border-right: solid 6px rgb(204, 0, 102);}

.tiles>*:nth-child(7n+3){background-color: rgb(204, 0, 204);}
.tiles>*:nth-child(7n+3) .font-color{color: rgb(204, 0, 204);}
.tiles>.tool-active:nth-child(7n+3){border-right: solid 6px rgb(204, 0, 204);}

.tiles>*:nth-child(7n+4){background-color: rgb(0, 204, 0);}
.tiles>*:nth-child(7n+4) .font-color{color: rgb(0, 204, 0);}
.tiles>.tool-active:nth-child(7n+4){border-right: solid 6px rgb(0, 204, 0);}

.tiles>*:nth-child(7n+5){background-color: rgb(255, 153, 0);}
.tiles>*:nth-child(7n+5) .font-color{color: rgb(255, 153, 0);}
.tiles>.tool-active:nth-child(7n+5){border-right: solid 6px rgb(255, 153, 0);}

.tiles>*:nth-child(7n+6){background-color: rgb(102, 0, 255);}
.tiles>*:nth-child(7n+6) .font-color{color: rgb(102, 0, 255);}
.tiles>.tool-active:nth-child(7n+6){border-right: solid 6px rgb(102, 0, 255);}

.tiles>*:nth-child(7n+7){background-color: rgb(0, 204, 153);}
.tiles>*:nth-child(7n+7) .font-color{color: rgb(0, 204, 153);}
.tiles>.tool-active:nth-child(7n+7){border-right: solid 6px rgb(0, 204, 153);}

/* custom numeric keyboard */
.cover{display: none; position: fixed; top: 0; left: 0; width: 1045px; height: 523px; background: black; opacity: 0.6; -webkit-opacity: 0.6; overflow: hidden;}
.number{display: none; position: fixed; top: 0; left: 0; width: 360px; height: 520px; max-height: 520px; background: white; overflow: hidden;}
.number>.display{height: 35px; font-size: 30px; color: black; text-align: right; padding: 2px; background: lightgray;}
.number>.key{font-size: 40px; color: gray; line-height: 110px; height: 108px; width: 108px; border: solid 1px gray; margin: 5px; overflow: hidden; float: left; background: white; border-radius: 14px;}

@media screen and (orientation: portrait){
body{width: 100%;}
.wrap-page{width: 530px; max-width: 530px;}
.wrap-menu{width: 530px; max-width: 530px;}
.wrap-main{width: 530px; max-width: 530px;}
.toolbar{height: 66px;}
.tool{position: relative; left: -5px; margin: 0; margin-left: 5px; width: 100px; height: 60px; float: left; line-height: 60px; text-align: center;}
.tool-name{font-size: 20px;}
.tool-count{top: -58px; left: 78px; font-size: 16px; height: 20px; width: 20px; border-radius: 10px;}
.tool-active{border: none; border-bottom: solid 6px rgb(0, 153, 204);}
.target{width: 515px; height: 760px;}
.tiles>.tool-active:nth-child(1){border: none; border-bottom: solid 6px rgb(0, 153, 204);}
.tiles>.tool-active:nth-child(2){border: none; border-bottom: solid 6px rgb(255, 0, 102);}
.tiles>.tool-active:nth-child(3){border: none; border-bottom: solid 6px rgb(204, 0, 204);}
.tiles>.tool-active:nth-child(4){border: none; border-bottom: solid 6px rgb(0, 204, 0);}
.tiles>.tool-active:nth-child(5){border: none; border-bottom: solid 6px rgb(255, 153, 0);}
.tiles>.tool-active:nth-child(6){border: none; border-bottom: solid 6px rgb(102, 0, 255);}
.tiles>.tool-active:nth-child(7){border: none; border-bottom: solid 6px rgb(0, 102, 153);}
.tiles>.tool-active:nth-child(8){border: none; border-bottom: solid 6px rgb(102, 204, 255);}

.top-button{top: 700px; left: 400px;}

.actions .event {width: 505px;}


.info h1{font-size: 20px;}
.info>.header{width: 515px;}
.info>.header>article{width: 250px;}
.info .refs{display: block; float: left;}
.info .refs>.price{margin-left: 0; float: left; width: 210px;}
.info .refs .price *{font-size: 16px; color: white; vertical-align: middle;}
.info .refs .price .depricated {font-size: 12px; text-decoration: line-through;}

.info .a-wrap{width: 515px; max-height: 695px; padding: 2px; overflow: auto;}
.info .a-wrap>aside{width: 251px; padding-bottom: 6px; margin: 5px; float: right;}
.info .a-wrap>aside>h2{font-size: 20px; text-align: left; padding-left: 6px; font-weight: normal;}

.calc h1{font-size: 22px;}
.calc .header{width: 515px;}
.calc .header>article{width: 460px;}
.calc .a-wrap{width: 515px; max-height: 695px;}
.calc .a-wrap>aside{width: 245px;}