@font-face {
	font-family: 'Museo-100';
	src: url('../fonts/museo-100/museo-100.eot');
	src: local('@%@'),
	url('../fonts/museo-100/museo-100.eot?#iefix') format('embedded-opentype'),
	url('../fonts/museo-100/museo-100.woff') format('woff'),
	url('../fonts/museo-100/museo-100.svg') format('svg'),
	url('../fonts/museo-100/museo-100.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Museo-300';
	src: url('../fonts/museo-300/museo-300.eot');
	src: local('@%@'),
	url('../fonts/museo-300/museo-300.eot?#iefix') format('embedded-opentype'),
	url('../fonts/museo-300/museo-300.woff') format('woff'),
	url('../fonts/museo-300/museo-300.svg') format('svg'),
	url('../fonts/museo-300/museo-300.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Museo-500';
	src: url('../fonts/museo-500/museo-500.eot');
	src: local('@%@'),
	url('../fonts/museo-500/museo-500.eot?#iefix') format('embedded-opentype'),
	url('../fonts/museo-500/museo-500.woff') format('woff'),
	url('../fonts/museo-500/museo-500.svg') format('svg'),
	url('../fonts/museo-500/museo-500.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
body {
	font-family: "Museo-300", Arial;
	-webkit-font-smoothing: antialiased;
	margin: auto;
	width: 100%;
	height: 100%;
	-webkit-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	overflow: hidden;
}
.toppage, .bottompage {
	-webkit-transition: all 0.6s cubic-bezier(0.94, 0.06, 0.05, 0.95);
	-moz-transition: all0.6s cubic-bezier(0.77, 0, 0.175, 1);
	-ms-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
	-o-transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
	transition: all 0.6s cubic-bezier(0.77, 0, 0.175, 1);
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
}
.toppage {
	top:0;
	width: 100%;
	height: 100%;
	display: block;
}
.bottompage {
	top:100%;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 600;
}
.sectionup {
	-webkit-transform: translateY(100%);
	-moz-transform: translateY(100%);
	-o-transform: translateY(100%);
	-ms-transform: translateY(100%);
	transform: translateY(100%);
}
.sectionDown {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-100%);
}
input::-ms-clear {
	display: none;
}
input[type="text"], input[type="password"], textarea {
	-webkit-appearance: none;
	box-shadow: none;
	-webkit-box-shadow: none;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
}
::-moz-selection {
	background: rgb(255, 221, 45);
}
::selection {
	background: rgb(255, 221, 45);
}
*:focus {outline:0px none transparent;}

#bubble, #indicator, #save, #piggyicon, #rublesign, .arrowup, .arrowdown, .incomes-sprite-title, .close-sign, .modal-save-icon, #modaldeletecross, .initicons-arrow, .expenses-sprite-title, .savings-sprite-title, .triangle, .noUi-handle, .noUi-handle:after  {
	background-size: 538px 84px;
}
#chooseicon, .itembackground, .iconbox, .itemlinebackground, #circle-select-1-back, #circle-select-2-back, #circle-select-3-back {
	background-image: url("../images/icons.png");
	background-size: 1031px 42px;
	width: 42px;
	height: 42px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
	#chooseicon, .itembackground, .iconbox, .itemlinebackground, #circle-select-1-back, #circle-select-2-back, #circle-select-3-back {
		background-image: url("../images/icons@2x.png");
	}
}
.selectbox .select {
	width: 55px;
	height: 24px;
	padding: 0 45px 0 10px;
	font: 12px/24px Arial;
	border: 1px solid #ccc;
}
.selectbox .dropdown {
	top: 25px;
	width: 110px;
	margin: 0;
	padding: 0 0;
	background: #FFF;
	border: 1px solid #ccc;
	font: 12px Arial;
}
.selectbox .select .text {
	display: block;
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.selectbox {
	color: #333;
	vertical-align: middle;
	cursor: pointer;
	margin-bottom: 26px;
}
.selectbox .trigger .arrow {
	position: absolute;
	top: 11px;
	right: 10px;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-top: 3px solid #a1a1a1;
	width: 0;
	height: 0;
	overflow: hidden;
}
.selectbox .select:active {
	background: #f8f8f8;
}
.selectbox li {
	padding: 5px 10px 6px;
}
.selectbox li.selected {
	background: #f6f6f6;
}
.selectbox li:hover {
	background: #f6f6f6;
}

#lastlogo {
	-webkit-perspective: 1000;
	-moz-perspective: 1000px;
	-ms-perspective: 1000px;
	-o-perspective: 1000px;
	perspective: 1000;
	position: absolute;
	top: 8%; left: 0; right: 0;
	margin: auto;
	z-index: 1000;
	width: 172px;
	height: 204px;
	display: none;
}
#lastlogoflipper {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-moz-backface-visibility: hidden;
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-ms-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;
	position: relative;
	overflow: visible;
}
#logo_greeting, #logo_settings {
	-moz-transition: 0.3s ease-out;
	-o-transition: 0.3s ease-out;
	-ms-transition: 0.3s ease-out;
	-webkit-transition: 0.3s ease-out;
	transition: 0.3s ease-out;
	background: url("../images/logo_large.gif") no-repeat;
	background-size: 137px 204px;
	background-position: center;
	width: 172px;
	height: 204px;
	position: absolute;
	margin: auto;
	left: 0; right: 0;
	display: none;
	z-index: 600;
}
#logo_greeting {
	position: absolute;
	display: none;
	top: 8%;
}
#logo_settings, #logo_statistic {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	overflow: visible;
	position: absolute;
	cursor: pointer;
}
#logo_statistic {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
	background: url("../images/logotext_large.gif") no-repeat;
	background-size: 172px 65px;
	width: 172px;
	height: 65px;
	position: absolute;
	cursor: pointer;
	z-index: 3000;
}
#settings_hat {
	position: absolute;
	width: 100%;
	height: 36%;
	background-color: white;
	display: none;
	z-index: 500;
}
#logoclickplace {
	width: 100%;
	height: 100%;
}
#bubble {
	position: absolute;
	top:-20px;
	right: -60px;
	background-position: -180px 0;
	width: 57px;
	height: 57px;
	cursor: pointer;
	display: none;
}
#indicator {
	position: absolute;
	background-position: -280px 0;
	top: 21px; right: 10px;
	width: 31px;
	height: 31px;
}
.bubble-animation {
	-webkit-animation: 1s bubble ease-out;
	-moz-animation: 1s bubble ease-out;
	-o-animation: 1s bubble ease-out;
	-ms-animation: 1s bubble ease-out;
	animation: 1s bubble ease-out;
}
input {
	-webkit-font-smoothing: antialiased;
}
#centerbox {
	top:0; left: 0; right: 0; bottom: 0;
	position: absolute;
	width: 250px;
	height: 250px;
	margin: auto;
	display: none;
}
#avatarcontainer {
	font-family: "Museo-100";
	border: 1px solid #b9d6dc;
	-webkit-border-radius: 90px;
	-moz-border-radius: 90px;
	border-radius: 90px;
	top:0; left: 0; right: 0; bottom: 0;
	position: absolute;
	cursor: pointer;
	width: 162px;
	height: 162px;
	margin: auto;
}
.forward {
	-webkit-animation: 0.4s zoomavatar ease-out;
	-moz-animation: 0.4s zoomavatar ease-out;
	-o-animation: 0.4s zoomavatar ease-out;
	-ms-animation: 0.4s zoomavatar ease-out;
	animation: 0.4s zoomavatar ease-out;
}
.reverse {
	-webkit-animation: 0.5s unzoomavatar ease-out;
	-moz-animation: 0.6s unzoomavatar ease-out;
	-o-animation: 0.4s unzoomavatar ease-out;
	-ms-animation: 0.4s unzoomavatar ease-out;
	animation: 0.5s unzoomavatar ease-out;
}
.avatar {
	background: url("../images/userpic.jpg") center center no-repeat;
	position: absolute;
	box-shadow:0px 0px 0px 5px white inset;
	width: 100%;
	height: 100%;
	-moz-border-radius: 90px;
	-webkit-border-radius: 90px;
	border-radius: 90px;
	background-size: 100% 100%;
}
#lefttitle, #righttitle {
	text-transform: uppercase;
	font-family: "Museo-300", Arial;
	font-size: 22px;
	position: absolute;
	text-align: center;
	display: none;
	width: 250px;
	height: 20px;
	margin: auto;
}
#lefttitle {
	-webkit-animation: 0.6s goleft ease-out;
	-moz-animation: 0.6s goleft ease-out;
	-o-animation: 0.6s goleft ease-out;
	-ms-animation: 0.6s goleft ease-out;
	animation: 0.6s goleft ease-out;
	top:0; left: -18%; right: 300px; bottom: 0;
}
#righttitle {
	-webkit-animation: 0.6s goright ease-out;
	-moz-animation: 0.6s goright ease-out;
	-o-animation: 0.6s goright ease-out;
	-ms-animation: 0.6s goright ease-out;
	animation: 0.6s goright ease-out;
	top:0; left: 18%; right: -300px; bottom: 0;
}
#bottombuttons {
	font-family: "Museo-500";
	-webkit-animation: 0.6s godown ease-out;
	-moz-animation: 0.6s godown ease-out;
	-o-animation: 0.6s godown ease-out;
	-ms-animation: 0.6s godown ease-out;
	animation: 0.6s godown ease-out;
	position: absolute;
	left: 0; right: 0; bottom: 8%;
	margin: auto;
	display: none;
	width: 90px;
	height: 25%;
}
#plus {
	text-align: center;
	text-transform: uppercase;
	font-size: 11px;
	color: #a6cbd4;
	position: absolute;
	cursor: pointer;
	margin: auto;
	width: 90px;
	height: 90px;
}
#plus:hover {
	color: #9cbac2;
}
#plusborder {
	-webkit-animation: plus 2s infinite;
	-moz-animation: plus 2s infinite;
	-o-animation: plus 2s infinite;
	-ms-animation: plus 2s infinite;
	animation: plus 2s infinite;
	position: absolute;
	border: 2px solid #cfe6ec;
	-webkit-border-radius: 70px;
	-moz-border-radius: 70px;
	border-radius: 70px;
	top:0; left: 0; right: 0; bottom: 0;
	margin: auto;
	width: 80%;
	height: 80%;
}
#plusone, #plustwo {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	margin: auto;
	background-color: #cfe6ec;
}
#plusone {
	width: 2px;
	height: 50%;
}
#plustwo {
	width: 50%;
	height: 2px;
}
#plustext {
	font-family: Arial;
	position: absolute;
	left: 0; right: 0; bottom: -15px;
	margin: auto;
}
#minus {
	top: 70%; left: 0; right: 0;
	margin: auto;
	text-transform: uppercase;
	font-size: 10px;
	color: #c8c2c4;
	position: absolute;
	cursor: pointer;
	width: 35px;
	height: 35px;
}
#minus:hover {
	color: #a39b9d;
}
#minusborder {
	position: absolute;
	border: 1px solid #c8c2c4;
	-webkit-border-radius: 70px;
	-moz-border-radius: 70px;
	border-radius: 70px;
	top:0; left: 0; right: 0; bottom: 0;
	margin: auto;
	width: 80%;
	height: 80%;
}
#minusone {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	margin: auto;
	background-color: #c8c2c4;
	width: 50%;
	height: 1px;
}
#minustext {
	width: 70px;
	text-align: center;
	font-family: Arial;
	left: -18px; right: 0; bottom: -17px;
	margin: auto;
	position: absolute;
}
.bluetext {
	color: #a6d1d6;
}
#settingspage {
	display: none;
}
#swipefield {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 0;
}

/* =============== S L I D E R S =============== */
.incomes-sprite-title, .expenses-sprite-title, .savings-sprite-title {
	background-size: 538px 84px;
	position: absolute;
	cursor: pointer;
	top:-4px;
}
.incomes-sprite-title {
	background-position: 0 -60px;
	width: 108px;
	height: 24px;
	left: 35%;
	cursor: pointer;
}
.expenses-sprite-title {
	background-position: -114px -60px;
	width: 114px;
	height: 24px;
	left: 35%;
	cursor: pointer;
}
.savings-sprite-title {
	background-position:  -233px -60px;
	width: 164px;
	height: 24px;
	left: 30%;
}
.zoomplus:hover ~ .plusitem {
	-webkit-transform: scale(1.15);
	-moz-transform: scale(1.15);
	-o-transform: scale(1.15);
	-ms-transform: scale(1.15);
	transform: scale(1.15);
}
.zoomplus:active ~ .plusitem {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.blueline {
	background-color: #b8d9e1;
	position: absolute;
	top:47px;
	width: 100%;
	height: 1px;
}
.brownline {
	background-color: #a6989c;
	position: absolute;
	top:47px;
	width: 12px;
	height: 1px;
}
.columns {
	text-transform: uppercase;
	position: absolute;
	display: block;
	margin: auto;
	height: 390px;
}
#savebutton {
	position: absolute;
	left: 0; right: 0;
	display: block;
	cursor: pointer;
	width: 100%;
	height: 60px;
	bottom: 2%;
	overflow: hidden;
}
#savebutton:hover > #leftborder, #savebutton:hover > #rightborder, #savebutton:hover > #centerborder  {
	background-color: #fafcfc;
}
#savebutton:active > #leftborder, #savebutton:active > #rightborder, #savebutton:active > #centerborder  {
	background-color: #f3f7f8;
}

#leftborder, #rightborder, #centerborder  {
	border-top: 1px solid #b8d9e1;
	position: absolute;
	margin:auto;
	height: 100%;
	display: block;
	-moz-transition: 0.2s;
	-o-transition: 0.2s;
	-ms-transition: 0.2s;
	-webkit-transition: 0.2s;
	transition: 0.2s;
}
.saveaction {
	background-color: #eff6f8;
}

#leftborder {
	left: -21%; right: 490px;
	width: 340px;
}
#rightborder {
	left: 21%; right: -490px;
	width: 340px;
}
#centerborder {
	left: 0; right: 0;
	width: 40%;
}
#save {
	margin: auto;
	position: absolute;
	bottom:15px; left: 25px; right: 0;
	width: 138px;
	height: 24px;
	background-position: -400px -60px;
}

/* =============== SAVINGS SLIDER =============== */

#piggyicon {
	background-position: -100px 0;
	background-size: 538px 84px;
	position: absolute;
	display: block;
	width: 46px;
	height: 38px;
	left: 25px;
	top: 70px;
}
#topsavingsline {
	position: relative;
	display: block;
	width: 100%;
	height: 190px;
	border-bottom: 1px solid #e2e2e2;
}
#bottomsavingsline {
	position: relative;
	display: block;
	width: 100%;
	height: 92px;
	border-bottom: 1px solid #e2e2e2;
}
#savingsvalue{
	display: inline-block;
	border: 0px solid;
	background-color: transparent;
	position: absolute;
	top: 125px;
	left: 30%;
	font-family: "Museo-100";
	font-size: 38px;
	padding: 0;
}
#rublesign {
	cursor: pointer;
	background-size: 538px 84px;
	display: inline-block;
	width: 22px;
	height: 31px;
	position: relative;
	z-index: 1000;
}
#rublebox {
	top: 135px;
	width: 30%;
	height: 40px;
	left: 0;
	position: relative;
	display: inline-block;
}
#percentvalue{
	display: inline-block;
	border: 0px solid;
	position: relative;
	top: 48px;
	left: 125px;
	font-family: "Museo-300";
	font-size: 22px;
	color: #9e9e9e;
	background-color: white;
}

/* TOGGLES */
#deposit + label.button{
	position: absolute;
	top:16px;
}
#capitalization + label.button{
	position: absolute;
	bottom:-42px;
}
input#deposit, input#capitalization  {
	max-height: 0;
	max-width: 0;
	display: none;
}
input#deposit + label.button, input#capitalization + label.button{
	display: block;
	position: absolute;
	right:32px;
	box-shadow: inset 0 0 0px 1px #e3e3e3;
	height: 21px;
	width: 33px;
	border-radius: 15px;
}
input#deposit + label.button:before, input#capitalization + label.button:before {
	content: "";
	position: absolute;
	display: block;
	height: 21px;
	width: 21px;
	top: 0;
	left: 0;
	border-radius: 15px;
	-moz-transition: 0.2s ease-out;
	-o-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	-webkit-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}
input#deposit + label.button:after, input#capitalization + label.button:after {
	content: "";
	position: absolute;
	display: block;
	height: 21px;
	width: 21px;
	top: 0;
	left: 0px;
	border-radius: 15px;
	background: white;
	box-shadow: inset 0 0 0 1px #e0e0e0, 1px 1px 2px #ebebeb;
	-moz-transition: 0.2s ease-out;
	-o-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	-webkit-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}
/* END OF TOGGLES */

input#deposit:checked + label.button:before, input#capitalization:checked + label.button:before {
	width: 33px;
	height: 21px;
	background: #e7f6f8;
	box-shadow: inset 0 0 0px 1px #b4d6da;
}
input#deposit:checked + label.button:after, input#capitalization:checked + label.button:after {
	left: 13px;
	box-shadow: inset 0 0 0 1px #b4d6da, 1px 1px 1px #ebebeb;
}
#deposit:checked ~ .savingscapital, #deposit:checked ~ .savingspercent, #deposit:checked ~ input#percentvalue {
	color: #4b4b4b;
}
.savingstitle14 {
	font-family: "Museo-300";
	font-size: 14px;
	color: #4b4b4b;
	position: absolute;
	left: 30%;
	top: 70px;
}
.savingstitle12 {
	font-family: "Museo-300";
	font-size: 13px;
	color: #a2c1c6;
	font-style: italic;
	position: absolute;
	left: 30%;
	top: 94px;
}
.savingsdeposit {
	font-family: "Museo-300";
	font-size: 12px;
	color: #4b4b4b;
	position: absolute;
	left: 25px;
	top:20px;
}
.savingscapital, .savingspercent {
	font-family: "Museo-300";
	font-size: 12px;
	color: #b5b5b5;
	position: absolute;
}
.savingscapital {
	left: 25px;
	bottom:-40px;
}
.savingspercent {
	left: 25px;
	bottom:20px;
}

/* =============== INCOMES SLIDER =============== */
#noincomes, #noexpenses {
	width: 160px;
	height: 160px;
	position: absolute;
	display: block;
	top: 30%; left: 0; right: 0;
	margin: auto;
	cursor: pointer;
	z-index: 10;
}
.hoverplace {
	display: block;
	width: 100%;
	height: 100%;
}
.hoverplace:hover ~ .plusitemtitle, .majorplusitem:hover ~ .plusitemtitle, .plusitemtitle:hover {
	color: #a2c1c6;
}
.majorplusitem {
	top:0; bottom:0; left: 0; right: 0;
	margin: auto;
	position: absolute;
	display: block;
	width: 75px;
	height: 75px;
	-webkit-transition: 150ms;
	-moz-transition: 150ms;
	-o-transition: 150ms;
	-ms-transition: 150ms;
	transition: 150ms;
}
.majorplusitem:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-o-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}
.majorplusitem:active {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.plusitemtitle {
	text-align: center;
	width: 100%;
	font-family: "Museo-300";
	font-size: 14px;
	color: #4b4b4b;
	position: absolute;
	bottom: 0;
	-webkit-transition: 0.25s;
	-moz-transition: 0.25s;
	-o-transition: 0.25s;
	-ms-transition: 0.25s;
	transition: 0.25s;
}
.plusitemitalic {
	text-align: center;
	width: 100%;
	font-family: "Museo-300";
	font-size: 13px;
	color: #a2c1c6;
	font-style: italic;
	position: absolute;
	top: 0;
}
.arrowup, .arrowdown {
	position: absolute;
	background-size: 538px 84px;
	width: 21px;
	height: 12px;
}
.arrowup {
	background-position: -30px 0;
}
.arrowdown {
	background-position: 0 0;
}
#incomeup, #incomedown {
	font-family: "Museo-300";
	font-size: 12px;
	color: #a2c1c6;
	font-style: italic;
	position: absolute;
	bottom: 0px;
	margin: auto;
	width: 90px;
	height: 12px;
	cursor: pointer;
	text-align: center;
}
#incomeup {
	left: 63%;
}
#incomedown {
	left: 35%;
}
#incomeslider {
	-webkit-transition: 0.25s;
	-moz-transition: 0.25s;
	-o-transition: 0.25s;
	-ms-transition: 0.25s;
	transition: 0.25s;
	position: absolute; /*RELATIVE!*/
	bottom: 0px;
	margin: auto;
	width: 100%;
}

/* =============== EXPENSE SLIDER =============== */

.plusitem {
	top: -8px; left: 9%;
	margin: auto;
	position: absolute;
	cursor: pointer;
	width: 33px;
	height: 33px;
	-webkit-border-radius: 75px;
	-moz-border-radius: 75px;
	border-radius: 75px;
	-webkit-transition: 150ms;
	-moz-transition: 150ms;
	-o-transition: 150ms;
	-ms-transition: 150ms;
	transition: 150ms;
}
.plusitemborder {
	position: absolute;
	border: 1px solid #aad6df;
	-webkit-border-radius: 75px;
	-moz-border-radius: 75px;
	border-radius: 75px;
	top:0; left: 0; right: 0; bottom: 0;
	margin: auto;
}
.plusitem:hover {
	-webkit-transform: scale(1.15);
	-moz-transform: scale(1.15);
	-o-transform: scale(1.15);
	-ms-transform: scale(1.15);
	transform: scale(1.15);
}
.plusitem:active {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}
.plusitemone, .plusitemtwo {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	margin: auto;
	background-color: #aad6df;
}
.plusitemone {
	width: 50%;
	height: 1px;
}
.plusitemtwo {
	width: 1px;
	height: 50%;
}

#expenseup, #expensedown {
	font-family: "Museo-300";
	font-size: 12px;
	color: #a2c1c6;
	font-style: italic;
	position: absolute;
	bottom:0px;
	margin: auto;
	width: 90px;
	height: 12px;
	cursor: pointer;
	text-align: center;
}
#expenseup {
	left: 63%;
}
#expensedown {
	left: 35%;
}
.frame {
	text-align: left;
	overflow: hidden;
	position: absolute;
	top:50px; left: 0; right: 0; bottom: 0;
	width: 100%;
	height: 284px;
}
.wrapper {
	position: absolute;
	top:0; left: 0; right: 0; bottom: 0;
	width: 100%;
	height: 100%;
}
#expenseslider {
	-webkit-transition: 0.25s;
	-moz-transition: 0.25s;
	-o-transition: 0.25s;
	-ms-transition: 0.25s;
	transition: 0.25s;
	display: none;
	position: absolute; /*RELATIVE!*/
	bottom: 0px;
	margin: auto;
	width: 100%;
}
.itembackground {
	display: block;
	position: relative;
	top: -26px;
	left: 25px;
}
.incomeitem, .expenseitem {
	-webkit-transition: 350ms ease-out;
	-moz-transition: 350ms ease-out;
	-o-transition: 350ms ease-out;
	-ms-transition: 350ms ease-out;
	transition: 350ms ease-out;
	background-position: 25px center;
	background-repeat: no-repeat;
	background-size: 42px 42px;
	border-bottom: 1px solid #e2e2e2;
	width: 100%;
	height: 70px;
	z-index: 500;
	cursor: pointer;
	overflow: hidden;
}
.incomeitem:hover, .expenseitem:hover {
	background-color: #fbfbfb;
}
.incomeitem:active, .expenseitem:active  {
	background-color: #f7f7f7;
}
.newitemadded {
	-webkit-animation: 4s newitemadded ease-out;
	-moz-animation: 4s newitemadded ease-out;
	-o-animation: 4s newitemadded ease-out;
	-ms-animation: 4s newitemadded ease-out;
	animation: 4s newitemadded ease-out;
}
.title11museo300 {
	font-family: "Museo-100";
	font-size: 14px;
	color: #676767;
	position: relative;
	left: 35%;
	top:12px;
}
.title9museo300 {
	font-family: "Museo-300";
	font-size: 9px;
	color: #676767;
	position: relative;
	left: 35%;
	top:20px;
}
.bolddigit20 {
	font-family: "Museo-500";
	font-size: 20px;
	color: #111;
}
.lightdigit20 {
	font-family: "Museo-100";
	font-size: 20px;
	color: #111;
}
.lighttitle20 {
	height: 40px;
	font-family: "Museo-100";
	font-size: 20px;
	color: #4b4b4b;
	position: absolute;
	left: 35%;
	cursor: pointer;
}

/* ITEMS AND FRAMES ANIMATION */
.sliderup {
	-webkit-transform: translateY(71px);
	-moz-transform: translateY(71px);
	-o-transform: translateY(71px);
	-ms-transform: translateY(71px);
	transform: translateY(71px);
}
.sliderdown {
	-webkit-transform: translateY(-71px);
	-moz-transform: translateY(-71px);
	-o-transform: translateY(-71px);
	-ms-transform: translateY(-71px);
	transform: translateY(-71px);
}
.endoflist {
	-webkit-animation: 0.5s endoflist ease-out;
	-moz-animation: 0.5s endoflist ease-out;
	-o-animation: 0.5s endoflist ease-out;
	-ms-animation: 0.5s endoflist ease-out;
	animation: 0.5s endoflist ease-out;
}
.startoflist {
	-webkit-animation: 0.5s startoflist ease-out;
	-moz-animation: 0.5s startoflist ease-out;
	-o-animation: 0.5s startoflist ease-out;
	-ms-animation: 0.5s startoflist ease-out;
	animation: 0.5s startoflist ease-out;
}
#expenseslider, #incomeslider {
	-webkit-animation: 1s frameanimate ease-out;
	-moz-animation: 0.8s frameanimate ease-out;
	-o-animation: 0.8s frameanimate ease-out;
	-ms-animation: 0.8s frameanimate ease-out;
	animation: 0.8s frameanimate ease-out;
}

/* NOTES WINDOW */

#add-notes {
	visibility: hidden;
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	margin: auto;
	width: 465px;
	height: 530px;
	z-index: 2000;
	opacity: 1;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1300;
	-o-perspective: 1300px;
	-ms-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300;
}
#add-notes >.modal-content {
	height: 610px;
}
.notes-title {
	font-weight: 900;
	font-family: "Museo-500";
	font-size: 18px;
	color: #242424;
	position: absolute;
	width: 240px;
	height: 20px;
	margin: auto;
	right: 0; left: 0; top: 20px;
}
.notes-save {
	display: block;
	position: absolute;
	width: 100%;
	height: 42px;
	bottom: 20px;
	background-color: #cce5ec;
	cursor: pointer;
	line-height: 30px;
}
.notes-save:hover, .modal-save:hover {
	background-color: #d6ebf1;
}
.notes-save:active, .modal-save:active {
	background-color: #e0edf0;
}
.notes-input {
	line-height: 20px;
	display: none;
	resize: none;
	vertical-align: top;
	border: 1px solid #ccc;
	background-color: white;
	position: absolute;
	top: 78px; left: 0; right: 0;
	margin: auto;
	font-family: "Museo-300";
	font-size: 13px;
	padding: 20px;
	padding-top: 30px;
	width: 360px;
	height: 60%
}

/* MODAL WINDOWS */
#overlay {
	display: none;
	visibility: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0; left: 0;
	z-index: 1000;
	opacity: 0;
	background: rgba(0,0,0,0.65);
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}
#add-modal {
	visibility: hidden;
	position: absolute;
	top:50px; left: 0; right: 0; bottom: 0;
	margin: auto;
	width: 465px;
	height: 530px;
	z-index: 2000;
	opacity: 1;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-perspective: 1300px;
	-o-perspective: 1300px;
	-ms-perspective: 1300px;
	-moz-perspective: 1300px;
	perspective: 1300px;
}
.modal-content {
	display: none;
	visibility: hidden;
	text-align: center;
	text-transform: uppercase;
	background: white;
	box-shadow: 0 0 15px rgba(0,0,0,0.2);
	position: relative;
	height: 480px;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: rotateY(-60deg);
	-moz-transform: rotateY(-60deg);
	-ms-transform: rotateY(-60deg);
	transform: rotateY(-60deg);
	-webkit-transition: all 0.3s;
	-o-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	transition: all 0.3s;
	opacity: 0;
}

.modal-show {
	opacity: 1;
	visibility: visible;
}
.modal-show .modal-content {
	visibility: visible;
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
	opacity: 1;
}
#overlay.modal-show {
	opacity: 1;
	visibility: visible;
}
.close-sign {
	background-position:  0 -22px;
	background-size: 538px 84px;
	position: absolute;
	width: 16px;
	height: 16px;
	top: 20px; right: 26px;
}
.modal-close {
	position: absolute;
	width: 86px;
	height: 62px;
	top: 0; right: 0;
	cursor: pointer;
	z-index: 3500;
}
.modal-title {
	font-weight: 900;
	font-family: "Museo-500";
	font-size: 18px;
	color: #242424;
	position: absolute;
	width: 240px;
	height: 20px;
	margin: auto;
	right: 0; left: 0; top: 20px;
}
.modal-save {
	display: block;
	position: absolute;
	width: 100%;
	height: 42px;
	top: 415px;
	background-color: #cce5ec;
	cursor: pointer;
	line-height: 30px;
}
.modal-save-icon {
	background-position: -60px 0;
	background-size: 538px 84px;
	position: absolute;
	width: 30px;
	height: 30px;
	left: 32%; top: 6px;
}
.modal-save-text {
	position: absolute;
	display: inline-block;
	margin: auto;
	top:0; bottom:0; left: 32%;
	width: 210px;
	height: 30px;
	font-family: "Museo-500";
	vertical-align: middle;
	font-size: 18px;
	color: white;
}
.modal-delete {
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	-ms-transition: 0.2s ease-out;
	-o-transition: 0.2s ease-out;
	display: none;
	position: absolute;
	width: 56px;
	height: 42px;
	top: 415px; right: 0;
	background-color: #d9ebf0;
	border-left: 2px solid white;
	cursor: pointer;
	line-height: 30px;
	overflow: hidden;
}
.modal-delete:hover {
	width: 380px;
	background-color: #facece;
}
.modal-delete:active {
	background-color: #ffe3e3;
}
#modaldeletecross {
	position: absolute;
	width: 30px;
	height: 30px;
	background-position: -320px 0;
	margin-top: 6px;
	margin-left: 13px;
}
.modal-delete-text {
	background-position: -320px 0;
	position: absolute;
	display: inline-block;
	margin: auto;
	top:0; bottom:0; left: 13px;
	width: 190px;
	height: 30px;
	font-family: "Museo-500";
	vertical-align: middle;
	font-size: 18px;
	color: white;
}
.modalvalue {
	text-align: center;
	display: none;
	border: 0px solid;
	background-color: transparent;
	position: absolute;
	top: 78px; left: 0; right: 0;
	margin: auto;
	font-family: "Museo-500";
	font-size: 86px;
	padding: 0;
	width: 370px;
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-ms-transition: 0.3s;
	-o-transition: 0.3s;
}
.modalvalueerror {
	color: #ffdd33;
	-webkit-animation: 0.5s modalvalueerror ease-out;
	-moz-animation: 0.5s modalvalueerror ease-out;
	-o-animation: 0.5s modalvalueerror ease-out;
	-ms-animation: 0.5s modalvalueerror ease-out;
	animation: 0.5s modalvalueerror ease-out;
}
.modaltitle {
	display: none;
	text-transform: uppercase;
	position: absolute;
	top: 345px; left: 0; right: 0;
	margin: auto;
	text-align: center;
	border: 1px solid #ccc;
	color: #4c4c4c;
	font-family: "Museo-300", Arial;
	font-size: 14px;
	height: 30px;
	width: 296px;
	letter-spacing: 1px;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
}
.modaltitleerror {
	background-color: #ffdd33;
}
.modalselects {
	z-index: 2000;
	text-transform: lowercase;
	text-align: left;
	display: block;
	position: absolute;
	top: 200px; left: 0; right: 0;
	margin: auto;
	width: 260px;
	height: 30px;
}
* {
	margin: 0;
	padding: 0;
}
.modalselects .selectbox {
	color: #333;
	vertical-align: middle;
	cursor: pointer;
	margin: 5px;
}
.modalselects .selectbox .select {
	width: 60px;
	height: 24px;
	padding: 0 45px 0 10px;
	font: 12px/24px Arial;
	border: 1px solid #ccc;
}
.modalselects .selectbox .select .text {
	display: block;
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
.modalselects .selectbox .trigger .arrow {
	position: absolute;
	top: 11px;
	right: 10px;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-top: 3px solid #a1a1a1;
	width: 0;
	height: 0;
	overflow: hidden;
}
.modalselects .selectbox .dropdown {
	top: 25px;
	width: 115px;
	margin: 0;
	padding: 0 0;
	background: #FFF;
	border: 1px solid #ccc;
	font: 12px Arial;
}

.initicons-arrow {
	background-position: -32px -24px;
	background-size: 538px 84px;
	position: absolute;
	width: 15px;
	height: 9px;
	right: 0; top: 18px;
}
.initicons {
	cursor: pointer;
	width: 75px;
	height: 42px;
	position: absolute;
	text-align: left;
	top: 270px; left: 0; right: 0;
	margin: auto;
}
.initicons img {
	width: 42px;
	height: 42px;
}
.initicons:hover {
	opacity: 0.8;
}
.initicons:active {
	-webkit-transform: scale(0.92);
	-moz-transform: scale(0.92);
	-o-transform: scale(0.92);
	-ms-transform: scale(0.92);
	transform: scale(0.92);
}
.modalincomessurface {
	position: absolute;
	z-index: 3000;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: white;
	display: none;
}
.modalexpensessurface {
	z-index: 3000;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: white;
	display: none;
}
#modalexpensetable {
	text-align: center;
	background-color: white;
	position: absolute;
	top: 14%; left: 42px;

}
#modalincomestable {
	text-align: center;
	background-color: white;
	position: absolute;
	top: 30%; left: 42px;
}
.modaltable tr, .modaltable-low tr {
	background-color: #ddeef1;
}
.modaltable td, .modaltable-low td {
	cursor: pointer;
	width: 86px;
	height: 86px;
}
.imgbox {
	background-color: white;
	border: 2px solid white;
	-webkit-transition: all 0.1s;
	-o-transition: all 0.1s;
	-ms-transition: all 0.1s;
	-moz-transition: all 0.1s;
	transition: all 0.1s;
	width: 86px;
	height: 86px;
}
.imgbox:hover {
	border: 2px solid #ddeef1;
}
.modalborderwhite {
	border: 2px solid white;
}
.iconbox {
	background-color: white;
	position: absolute;
	margin:22px;
}
.auto {background-position: -989px 0;}
.gas {background-position: -602px 0;}
.home {background-position: -473px 0;}
.baby {background-position: -946px 0;}

.cart {background-position: -903px 0;}
.clothes {background-position: -817px 0;}
.phone {background-position: -258px 0;}
.utilities {background-position: -43px 0;}

.island {background-position: -430px 0;}
.earth {background-position: -731px 0;}
.meal {background-position: -387px 0;}
.sport {background-position: -129px 0;}

.medical {background-position: -344px 0;}
.tv {background-position: -86px 0;}
.smoking {background-position: -172px 0;}
.other {background-position: -301px 0;}

.edu {background-position: -688px 0;}
.graphs {background-position: -516px 0;}
.wallet {background-position: 0 0;}
.case {background-position: -860px 0;}

.rub {background-position: -215px 0;}
.euro {background-position: -645px 0;}
.doll {background-position: -774px 0;}
.gbp {background-position: -559px 0;}

#chooseicon {
	position: absolute;
	left: 0; top: 0;
}

.imgbox:active {
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-o-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8);
}
.modalforward {
	-webkit-animation: 0.4s modalforward ease-out;
	-moz-animation: 0.4s modalforward ease-out;
	-o-animation: 0.4s modalforward ease-out;
	-ms-animation: 0.4s modalforward ease-out;
	animation: 0.4s modalforward ease-out;
}
.modalreverse {
	-webkit-animation: 0.3s modalreverse ease-out;
	-moz-animation: 0.5s modalreverse ease-out;
	-o-animation: 0.5s modalreverse ease-out;
	-ms-animation: 0.5s modalreverse ease-out;
	animation: 0.3s modalreverse ease-out;
}

/* ============= STATISTIC PAGE STYLES =============*/

/* MAIN BLOCK */
#mainblock {
	-moz-transition: 0.3s ease-out;
	-o-transition: 0.3s ease-out;
	-ms-transition: 0.3s ease-out;
	-webkit-transition: 0.3s ease-out;
	transition: 0.3s ease-out;
	width: 1370px;
	height: 680px;
	position: absolute;
	margin: auto;
	left:0;	right:0; top:22%;
}
.flag {
	height: 19px;
	border: 1px solid #c7dade;
	font-family: "Museo-100";
	font-size: 11px;
	color: #242424;
	text-transform: uppercase;
	font-style: italic;
	line-height: 20px;
	padding-left: 20px;
	left: 0;
}
#deltatitle {
	position: absolute;
	top: -10px;
	width: 130px;
}
#savingstitle {
	position: absolute;
	bottom: 240px;
	width: 90px;
}
.triangle {
	position: absolute;
	bottom: -14px;
	left: -1px;
	width: 15px;
	height: 13px;
	background-position: -523px 0;
}
/* SAVINGS CHART */
#savingschart {
	position: absolute;
	width: 504px;
	height: 222px;
	bottom: 50px;
	right: 0;
}
#horizontal, #chartline {
	position: absolute;
}
#month0 {
	position: absolute;
	left:0;
	bottom: 0;
	display: block;
	margin-right: -4px;
	width: 0;
	height: 68px;
	border-left: 1px solid #cdc6c6;
}
#month0 .small-month-circle, #month0 .month-name {
	display: block;
}
#month0 .month-name {
	bottom: 32%;
}
#month12 .month-name {
	width: 20px;
	height: 16px;
}
.months {
	position: relative;
	display: inline-block;
	margin-right: -4px;
	width: 42px;
	height: 100%;
}
.in-month {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 50%;
}
.small-month-circle {
	position: absolute;
	right: -5px;
	top: -4px;
	width: 7px;
	height: 7px;
	border: 1px solid #b9b2b4;
	border-radius: 20px;
	background-color: white;
}
.large-month-circle {
	position: absolute;
	right: -10px;
	top: -10px;
	width: 17px;
	height: 17px;
	border: 1px solid #b9b2b4;
	border-radius: 20px;
	background-color: white;
	display: block;
}
.bluedot {
	position: absolute;
	right: 3px;
	top: 3px;
	width: 11px;
	height: 11px;
	border-radius: 20px;
	background-color: #d5e4e7;
}
.large-month-val {
	text-transform: uppercase;
	text-align: right;
	position: absolute;
	top: -34px; right: 5px;
	width: 160px;
	height: 20px;
	font-family: "Museo-500";
	font-size: 22px;
	color: #333;
}
.large-month-val .curr {
	font-family: "Museo-100";
	font-size: 12px;
}
.month-val {
	text-transform: uppercase;
	text-align: center;
	position: absolute;
	bottom: -32px; left: -18px;
	width: 120px;
	height: 14px;
	font-family: "Museo-300";
	font-size: 15px;
	color: #333;
	display: none;
	background-color: white;
}
.month-val .curr {
	font-family: "Museo-100";
	font-size: 10px;
}
.month-name {
	position: absolute;
	bottom: 40%; right: -11px;
	font-family: "Museo-300";
	text-transform: uppercase;
	text-align: center;
	font-size: 10px;
	color: #948b8e;
	background-color: white;
	height: 21px;
	width: 25px;
	line-height: 21px;
	display: none;
}
#month6, #month12{
	border-right: 1px solid #cdc6c6;
}
#month6 .small-month-circle, #month6 .month-name, #month12 .month-name {
	display: block;
}
.months:hover .in-month {
	border-right: 1px solid #cdc6c6;
}
.months:hover .small-month-circle,  .months:hover .month-name, .months:hover .month-val  {
	display: block;
}
/* SAVINGS SLIDER */
#savings-slider-container {
	width: 260px;
	height: 50px;
	position: absolute;
	bottom: 70px; left: 40px;
}
.savings-slider {
	text-transform: uppercase;
	position: absolute;
	top: -90px;
	font-family: "Museo-300";
	font-size: 11px;
	color: #5e5e5e;
}
#savingsTip0, #savingsTip100 {
	position: absolute;
	width: 100%;
	height: 35px;
	font-family: "Museo-300";
	font-style: italic;
	font-size: 11px;
	color: #a59b9e;
	display: none;
}
#savingsTip0 {
	bottom: -5px; left: 38px;
}
#savingsTip100 {
	bottom: -5px;
}
.noUi-target,.noUi-target *
{
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-ms-touch-action:none;
	-ms-user-select:none;
	-moz-user-select:none;
	-moz-box-sizing:border-box;
	box-sizing:border-box
}
.noUi-base {
	width:100%;
	height:100%;
	position:absolute;
}
.noUi-origin {
	position:absolute;
	right:0;
	top:0;
}
.noUi-handle {
	content: "";
	position:relative;
	z-index:1;
	border: 1px solid #c4d5d9;
	cursor:default;
	-webkit-border-radius: 23px;
	-ms-border-radius: 23px;
	-o-border-radius: 23px;
	-moz-border-radius: 23px;
	border-radius: 23px;
	background-position: -516px -17px;
}
.noUi-handle-upper {
	width: 3px;
}
.noUi-stacking .noUi-handle {
	z-index:10
}

.noUi-stacking+.noUi-origin {
	z-index:-1
}
.noUi-state-tap .noUi-origin {
	-webkit-transition:left .3s,top .3s;
	transition:left .3s,top .3s
}
.noUi-state-drag * {
	cursor:inherit!important
}
.noUi-horizontal {
	height: 4px
}
.noUi-horizontal .noUi-handle {
	width:23px;
	height:23px;
	left:-12px;
	top:-9px
}
.noUi-background {
	background:#d9e7ea;
	border-left: 2px solid #a39a9d;
	border-right: 2px solid #a39a9d;
}
.noUi-dragable
{
	cursor: w-resize
}
.noUi-vertical .noUi-dragable {
	cursor:n-resize;
}
.noUi-active {
	border: 1px solid #95b4b8;
}
.noUi-handle:after {
	content: attr(percent);
	text-align: center;
	display:block;
	position:absolute;
	width: 30px; height: 30px;
	left: 4px; top: -38px;
	font-family: "Museo-300";
	font-size: 11px;
	color: #2f2f2f;
	background-position: -414px 0;
	line-height: 18px;
}
.noUi-handle:before {
	content: attr(value);
	text-align: center;
	display:block;
	position:absolute;
	height:1px;
	width:180px;
	height: 15px;
	left: -80px; top: 35px;
	font-family: "Museo-100";
	font-size: 16px;
	color: #2f2f2f;
}
[disabled] .noUi-connect,[disabled].noUi-connect {
	background:#B8B8B8
}
[disabled] .noUi-handle {
	cursor:not-allowed
}
/* SAVINGS CIRCLE */
#savingscircles {
	text-align: center;
	width: 385px;
	height: 385px;
	position: absolute;
	left: 390px; bottom: 30px;
	z-index: 800;
}
#after-savings, #before-savings {
	border: 1px solid #c9dadd;
	-webkit-border-radius: 350px;
	-ms-border-radius: 350px;
	-o-border-radius: 350px;
	-moz-border-radius: 350px;
	border-radius: 350px;
}
#after-savings {
	width: 82%;
	height: 82%;
	position: absolute;
	right:0; top:0;
}
#before-savings {
	width: 46%;
	height: 46%;
	position: absolute;
	left:0; bottom:0;
}
.savings-circle-title {
	font-size: 12px;
	position: absolute;
	margin: auto;
	top: 30%; left:0; right:0;
}
.savings-circle-currency {
	font-size: 11px;
	position: absolute;
	margin: auto;
	bottom: 22%; left:0; right:0;
}
#before-savings-value {
	position: absolute;
	width: 130%;
	height: 100%;
	margin: auto;
	left:-15%; right: 0;
	text-align: center;
	line-height: 165px;
	font-size: 30px;
	top: 8%;
}
#after-savings-value {
	width: 130%;
	height: 100%;
	position: absolute;
	margin: auto;
	left:-15%; right: 0;
	top:7%;
	text-align: center;
	line-height: 290px;
}
/* LINES CONTAINER */
#incomes-lines-container, #expenses-lines-container {
	-moz-transition: 0.3s ease-out;
	-o-transition: 0.3s ease-out;
	-ms-transition: 0.3s ease-out;
	-webkit-transition: 0.3s ease-out;
	transition: 0.3s ease-out;
	background-color: white;
	width: 270px;
	height: 300px;
	position: absolute;
	left: 375px; top: 0;
	z-index: 200;
	padding-top: 65px;
	padding-left: 30px;
}
#incomes-lines-container {
	display: none;
}
.lines-title {
	cursor: pointer;
	position: absolute;
	width: 400px;
	top: 35px;
	text-transform: uppercase;
	font-family: "Museo-300";
	font-size: 13px;
	color: black;
}
.lineitemtitle {
	position: absolute;
	top: 15px;
	width: 280px;
	height: 70px;
}
.lineitemvalue {
	font-family: "Museo-300";
	font-size: 25px;
	position: absolute;
	top: 15px;
	left: 64px; top:50px;
	width: 180px;
}
.lineitemcurr {
	font-size: 11px;
}
.lineitempercent {
	font-family: "Museo-500";
	font-size: 10px;
	color: #928588;
	position: absolute;
	top: -8px;
	left: -27px;
}
.grey {
	color: #adadad;
}
.greysmall {
	font-size: 9px;
}
.itemline {
	-moz-transition: 0.5s ease-out;
	-o-transition: 0.5s ease-out;
	-ms-transition: 0.5s ease-out;
	-webkit-transition: 0.5s ease-out;
	transition: 0.5s ease-out;
	font-size: 13px;
	cursor: pointer;
	position: relative;
	height: 9px;
	border-top: 2px solid #d5e4e7;
	overflow: hidden;
	background-color: white;
	width: 1%;
}
.itemlinebackground {
	position: absolute;
	top: 36px; left:0;
	width: 42px;
	height: 42px;
}
.leftpoint {
	width: 2px;
	height: 2px;
	background-color: #a39a9d;
	position: absolute;
	top:-2px; left:0;
}
.activeline {
	border-top: 4px solid #a39a9d;
	height: 88px;
	overflow: visible;
}
/* LINES CURSOR */
#expense-cursor {
	-webkit-transform: rotate(68deg);
	-moz-transform: rotate(68deg);
	-ms-transform: rotate(68deg);
	-o-transform: rotate(68deg);
	transform: rotate(68deg);
	width: 310px;
	height: 310px;
	position: absolute;
	left: 225px; top: -106px;
	z-index: 100;
	display: none;
	cursor: pointer;
}
#incomes-cursor {
	-webkit-transform: rotate(52deg);
	-moz-transform: rotate(52deg);
	-ms-transform: rotate(52deg);
	-o-transform: rotate(52deg);
	transform: rotate(52deg);
	width: 370px;
	height: 370px;
	position: absolute;
	left: 227px; top: -120px;
	z-index: 100;
	display: none;
	cursor: pointer;
}
.cursorline {
	width: 1px;
	height: 50%;
	position: absolute;
	bottom: 0; left: 149px;
	background-color: #727272;
}
.cursorpoint {
	position: absolute;
	bottom: -3px; left: 147px;
	width: 6px;
	height: 6px;
	border-radius: 10px;
	background-color: #727272;
}
/* LARGE CIRCLE */
#outermaindiv  {
	color: black;
	position: absolute;
	width: 265px;
	height: 265px;
	position: absolute;
	top: 50px; left:10px;
	z-index: 0;
	cursor: pointer;
}
#innermaindiv  {
	position: absolute;
	width: 100%;
	height: 100%;
	top:0; left:0;
	margin: 21px;
}
#outermaincursordiv  {
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	z-index: 500;
	margin: -19px;
}
.linesbackground {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: url("../images/linesbackground.png");
	background-repeat: repeat;
}
.topmaincircletitle {
	width: 100px;
	height: 30px;
	text-align: center;
	position: absolute;
	margin: auto;
	left: 0; right: 0; top:84px;
	font-size: 15px;
	font-style: italic;
}
.bottommaincircletitle {
	width: 100px;
	height: 30px;
	text-align: center;
	position: absolute;
	margin: auto;
	left: 0; right: 0; bottom:60px;
	font-size: 13px;
}
#outer-circle-value {
	width: 100%;
	height: 100%;
	text-align: center;
	position: absolute;
	margin: auto;
	line-height: 265px;
	top: 5px;
	font-size: 48px;
}
.lightcircletitle {
	font-family: "Museo-100";
	text-transform: uppercase;
}
.boldcircletitle {
	font-family: "Museo-500";
	text-transform: uppercase;
}
#maincircle100percent {
	width: 30px;
	height: 15px;
	position: absolute;
	top: 50px; right: 100px;
	font-size: 12px;
}
#maincircleline {
	width: 1px;
	height: 27px;
	position: absolute;
	top: 17px; right: 131px;
	background-color: #898989;
	box-shadow: -1px 0 1px #acacac;
}
#outer-circle-percent {
	display: none;
	width: 30px;
	height: 30px;
	position: absolute;
	left: 0; right: 0; top: 0;
	font-size: 11px;
	z-index: 1000;
}
/* PENDANTS */
#firstpendant {
	overflow: visible;
	z-index: -100;
	position: absolute;
	bottom: 0; left:60px;
	width: 60px;
	height: 100px;
}
#firstpendant > .pendant-circle {
	bottom: 77px;
	border: 2px solid #d3d8ce;
}
#firstpendant > .pendantline {
	bottom: 90px;
	background-color: #d3d8ce;
}
#firstpendant > .pendantfont {
	bottom: 50px;
}
#secondpendant {
	overflow: visible;
	z-index: -100;
	position: absolute;
	bottom: 0; left:282px;
	width: 45px;
	height: 100px;
}
#secondpendant > .pendant-circle {
	bottom: 57px;
	border: 2px solid #b9b2b4;
}
#secondpendant > .pendantline {
	bottom: 70px;
	background-color: #b9b2b4;
}
#secondpendant > .pendantfont {
	bottom: 30px;
}
#thirdpendant {
	overflow: visible;
	z-index: -100;
	position: absolute;
	bottom: 0; right:60px;
	width: 45px;
	height: 100px;
}
#thirdpendant > .pendant-circle {
	bottom: 37px;
	border: 2px solid #abb1bf;
}
#thirdpendant > .pendantline {
	bottom: 50px;
	background-color: #abb1bf;
}
#thirdpendant > .pendantfont {
	bottom: 10px;
}
.pendant-circle {
	position: absolute;
	left: 17px;
	width: 8px;
	height: 8px;
	border-radius: 20px;
}
.pendantfont {
	position: absolute;
	text-align: center;
	width: 70px;
	font-size: 11px;
	font-style: italic;
	left: -12px;
}
.pendantline {
	position: absolute;
	left: 22px;
	width: 1px;
	height: 120%;
}
/* SMALL CIRCLES */
#movingcircle-1, #movingcircle-2, #movingcircle-3 {
	-webkit-animation: 1s spincircle ease-out infinite;
	-moz-animation: 1s spincircle ease-out infinite;
	-o-animation: 1s spincircle ease-out infinite;
	-ms-animation: 1s spincircle ease-out infinite;
	animation: 1s spincircle ease-out infinite;
}
.flippedcard {
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}
.flippedcardinfo {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
#small-circles-container {
	position: absolute;
	right: 0; top: 40px;
	width: 608px;
	height: 290px;
	overflow: visible;
}
#firstcirclediv, #secondcirclediv, #thirdcirclediv {
	-webkit-perspective: 1000;
	-moz-perspective: 1000px;
	-ms-perspective: 1000px;
	-o-perspective: 1000px;
	perspective: 1000;
	-moz-transition: 0.3s ease-out;
	-o-transition: 0.3s ease-out;
	-ms-transition: 0.3s ease-out;
	-webkit-transition: 0.3s ease-out;
	transition: 0.3s ease-out;
	cursor: pointer;
	position: relative;
	top: 0;
	width: 200px;
	height: 180px;
	display: inline-block;
	background-color: white;
}
/* Backfaces */

.circlesselect {
	z-index: 2000;
	text-transform: uppercase;
	text-align: center;
	display: block;
	position: absolute;
	top: 94px; left: 0; right: 20px;
	margin: auto;
	width: 136px;
	height: 80px;
}
.circlesselect > .selectbox .select {
	position: absolute;
	margin: auto;
	width: 136px;
	height: 22px;
	padding: 0 10px 0 10px;
	font: 10px/23px "Museo-500";
	border: 1px solid #ccc;
}
.circlesselect > .selectbox .dropdown {
	top: 23px;
	width: 156px;
	max-height: 220px;
	margin: 0;
	padding: 0 0;
	background: #FFF;
	border: 1px solid #ccc;
	font-family: "Museo-300";
	font-size: 10px;
}





#circle-select-1-back, #circle-select-2-back, #circle-select-3-back  {
	position: absolute;
	margin: auto;
	left: 0; right: 0; top: 30px;
	width: 42px;
	height: 42px;
}
.flippedcircle {
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	-ms-transform: rotateY(-180deg);
	-o-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
}
.frontcircle, .backcircle {
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	overflow: visible;
	position: absolute;
}
.frontcircle {
	-moz-transition: 0.3s ease-out;
	-o-transition: 0.3s ease-out;
	-ms-transition: 0.3s ease-out;
	-webkit-transition: 0.3s ease-out;
	transition: 0.3s ease-out;
	position: absolute;
	margin: auto;
	right: 0; left: 0;
	z-index: 2;
	width: 165px;
	height: 165px;
}
.backcircle {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-ms-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
	z-index: 1;
	position: absolute;
	top: -30px;
	left: 0; right: 0;
	width: 200px;
	height: 200px;
}
.backcircle .circletoptitle {
	width: 170px;
	height: 50px;
	line-height: 14px;
	bottom: -85px;
}
#firstcirclediv {
	left: -16px;
}
#secondcirclediv {
	left: 0;
}
#thirdcirclediv {
	left: 16px;
}
#firstcircledivflipper, #secondcircledivflipper, #thirdcircledivflipper {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: 1000ms;
	-moz-transition: 1000ms;
	-ms-transition: 1000ms;
	-o-transition: 1000ms;
	transition: 1000ms;
	position: relative;
	overflow: visible;
}
.frontcircle:active {
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	-o-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.8);
}
.cursordiv  {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: 600;
	margin: -12px;
}
.circletoptitle  {
	-moz-transition: 0.3s ease-out;
	-o-transition: 0.3s ease-out;
	-ms-transition: 0.3s ease-out;
	-webkit-transition: 0.3s ease-out;
	transition: 0.3s ease-out;
	text-align: center;
	overflow: hidden;
	font-style: italic;
	font-size: 10px;
	position: absolute;
	width: 120px;
	height: 12px;
	margin: auto;
	left: 0; right: 0; top: 52px;
}
.circlevalue {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 4px;
	text-align: center;
	line-height: 165px;
	font-size: 31px;
}
.bottomcircletitle {
	width: 100px;
	height: 30px;
	text-align: center;
	position: absolute;
	margin: auto;
	left: 0; right: 0; top: 110px;
	font-size: 10px;
}
#first-circle-percent, #second-circle-percent, #third-circle-percent {
	display: none;
	width: 30px;
	height: 30px;
	position: absolute;
	left: 0; right: 0; top: 0;
	font-size: 11px;
}
.circle100percent {
	width: 30px;
	height: 15px;
	position: absolute;
	top: 30px; right: 52px;
	font-size: 9px;
}
.circleline {
	width: 1px;
	height: 17px;
	position: absolute;
	top: 11px;
	right: 82px;
	background-color: #898989;
}
#setcurrency {
	right: -18px;
	top: -15%;
	position: absolute;
	width: 170px;
	height: 42px;
}
#rubcurr, #eurcurr, #usdcurr {
	vertical-align: top;
	text-align: center;
	position: relative;
	font-size: 11px;
	text-transform: uppercase;
	color: #444;
	display: inline-block;
	width: 42px;
	height: 42px;
	border-radius: 42px;
	margin-right: 7px;
	line-height: 43px;
}
#rubcurr:hover, #eurcurr:hover, #usdcurr:hover {
	border: 2px solid #f6f6f6;
}
.currunchecked {
	cursor: pointer;
	font-family: "Museo-100";
	border: 2px solid white;
}
.currchecked {
	cursor: default;
	font-family: "Museo-500";
	border: 2px solid #e8e8e8;
}

/* ============== CONDITIONS FOR DIFFERENT SCREEN SIZES ============== */
@media screen and (max-height: 870px) {
	#mainblock {
		height: 620px; top:19%;
	}
	#savingschart {
		bottom: 10px;
	}
	#savingscircles {
		bottom: 0px;
	}
	#savings-slider-container {
		bottom: 20px;
	}
	#savingstitle {
		bottom: 190px;
	}
	#small-circles-container {
		height: 274px;
	}

}
@media screen and (max-height: 780px) {
	#mainblock {
		height: 590px; top:17%;
	}
	#savingschart {
		bottom: 20px;
	}
	#savingscircles {
		bottom: 25px;
	}
	#savings-slider-container {
		bottom: 30px;
	}
	#savingstitle {
		bottom: 200px;
	}
	#logo_statistic {
		top: -25px;
		-webkit-transform: rotateY(180deg) scale(0.8);
		-moz-transform: rotateY(180deg) scale(0.8);
		-ms-transform: rotateY(180deg) scale(0.8);
		-o-transform: rotateY(180deg) scale(0.8);
		transform: rotateY(180deg) scale(0.8);
	}
	#small-circles-container {
		height: 274px;
	}
	#setcurrency {
		top: -12%;
	}
	#infopage {
		height: 610px;
		margin-top: -70px;
	}
	#infosubtitle {
		top: 40px;
	}
	#infotitle {
		top: 75px;
	}
}
@media screen and (max-height: 700px) {
	.month-val {
		bottom: 5px;
	}
	#mainblock {
		height: 582px; top:14%;
	}
	#savingschart {
		bottom: 20px;
	}
	#savingscircles {
		bottom: 10px;
	}
	#savings-slider-container {
		bottom: 30px;
	}
	#savingstitle {
		bottom: 200px;
	}
	#logo_statistic {
		top: -35px;
		-webkit-transform: rotateY(180deg) scale(0.7);
		-moz-transform: rotateY(180deg) scale(0.7);
		-ms-transform: rotateY(180deg) scale(0.7);
		-o-transform: rotateY(180deg) scale(0.7);
		transform: rotateY(180deg) scale(0.7);
	}
	#small-circles-container {
		height: 270px;
	}
	#setcurrency {
		top: -10%;
	}
}

@media screen and (max-width: 1100px) {
	.columns {
		width: 300px; top:24%;
	}
	#savings {
		left: 20%; right: -450px; bottom: 0;
	}
	#incomes {
		left: -20%; right: 450px; bottom: 0;
	}
	#expenses {
		left: 0; right: 0; bottom: 0;
	}
}
@media screen and (min-width: 1100px) {
	.columns {
		width: 340px; top:24%;
	}
	#savings {
		left: 21%; right: -490px; bottom: 0;
	}
	#incomes {
		left: -21%; right: 490px; bottom: 0;
	}
	#expenses {
		left: 0; right: 0; bottom: 0;
	}
}
@media screen and (max-height: 850px) {
	#logo_greeting, #logo_settings {
		background: url("../images/logo_large.gif") no-repeat;
		background-position: top center;
		background-size: 137px 204px;
		z-index: 1000;
		width: 172px;
		height: 204px;
		top: 5%;
	}
	#settings_hat {
		height: 28%;
	}
	.columns {
		top:16%;
	}
	#logo_settings {
		height: 130px;
		top: 8%;
	}
	#savebutton {
		bottom: 3%;
	}
	#incomeup, #incomedown, #expenseup, #expensedown {
		bottom: 20px;
	}
}
@media screen and (max-height: 700px) {
	#settings_hat {
		height: 22%;
	}
	#add-notes >.modal-content {
		height: 530px;
	}
	.notes-input {
		height: 56%
	}
	#logo_greeting, #logo_settings {
		background: url("../images/logo.gif") no-repeat;
		background-size: 114px 145px;
		width: 114px;
		height: 145px;
		top: 8%;
	}
	.columns {
		top:16%;
	}
	#logo_settings {
		height: 100px;
	}
	#bubble {
		right: -70px;
	}
	#savebutton {
		bottom: 1%;
	}
	#incomeup, #incomedown, #expenseup, #expensedown {
		bottom: 20px;
	}
	#piggy {
		background: url("../images/piggy.gif") no-repeat;
		background-size: 149px 149px;
		width: 149px;
		height: 149px;
	}
	#logotext {
		background: url("../images/logotext.gif") no-repeat;
		size: 163px 67px;
		width: 163px;
		height: 67px;
		margin-top: 24px;
	}
	#wrapper {
		top: 305px;
	}
	#secondenter{
		bottom: 115px;
	}
	#preloader{
		bottom: 99px;
	}
}
/* STATISTIC PAGE CONDITIONS */
@media screen and (max-width: 1500px) {
	#mainblock {
		width: 1250px;
	}
	#incomes-lines-container, #expenses-lines-container {
		left: 315px; width: 210px;
	}
	#savingscircles {
		left: 330px;
	}
	#savingscircles {
		left: 355px;
		width: 345px;
		height: 345px;
	}
	#after-savings-value {
		top: 2%;
	}
	#before-savings-value {
		top: 0;
	}
}
@media screen and (max-width: 1200px) {
	#mainblock {
		width: 1060px;
	}
	#incomes-lines-container, #expenses-lines-container {
		left: 350px; width: 260px;
		padding-top: 72px;
	}
	#savingschart {
		width: 396px;
		height: 222px;
	}
	.months {
		width: 33px;
	}
	#savingscircles {
		left: 345px;
		width: 300px;
		height: 300px;
	}
	#after-savings-value {
		top:-5%;
	}
	#before-savings-value {
		top:-7%;
	}
	#firstcirclediv, #firstpendant {
		opacity: 0;
	}
	#small-circles-container {
		height: 260px;
	}
	#before-savings-value {
		font-size: 24px;
	}
}

/*================ @2x IMAGES FOR RETINA DISPLAYS ================   */

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) {
	#logo_greeting, #logo_settings {
		background-image: url("../images/logo_large@2x.gif");
	}
	#logo_statistic {
		background: url("../images/logotext_large@2x.gif");
		background-size: 172px 65px;
	}
	.imgbox:hover {
		border: 2px solid white;
	}
}