@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700);

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
	margin:0;
	padding:0;
	border:0;
	font:inherit;
	font-size:100%;
	vertical-align:baseline;
}
html{
	line-height:1;
}
ol, ul{
	list-style:none;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}
th, td{
	text-align:left;
	font-weight:normal;
	vertical-align:middle;
}
a img{
	border:none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary{
	display:block;
}
strong, b{
	font-weight:700;
}
/*--------------------
Default styles
--------------------*/
html{
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
}
body{
	color:#fff;
	line-height:1.2;
	font-size:14px;
	font-family:'Roboto', sans-serif;
}
/*--------------------
Control BG and Wheel Arrow color
--------------------*/
body{
	background-color:#000;
}
*{
	box-sizing:border-box;
	outline:none !important;
}
*:before, *:after{
	box-sizing:border-box;
}
.clearfix{
	clear:both;
}
.clearfix:before, .clearfix:after,
.row:before, .row:after{
	display:table;
	content:'';
	clear:both;
}
.fa{
	font-weight:100;
}
.hide{
	display:none;
}
.row{
	display:table;
	width:100%;
	clear:both;
}
.col-md-3, .col-md-6{
	float:left;
	box-sizing:border-box;
}
.col-md-3{
	width:25%;
}
.col-md-6{
	width:50%;
}
/*--------------------
	Frame
--------------------*/
.frame{
	border:3px solid #6b7886;
	border-radius:5px;
	box-shadow:0 0 7px 1px #d0d0d0;
	height:486px;
	width:646px;
	left:50%;
	padding:0;
	position:fixed;
	top:50%;
	-webkit-transition:-webkit-transform 1s ease;
	transition:-webkit-transform 1s ease;
	transition:transform 1s ease;
	transition:transform 1s ease, -webkit-transform 1s ease;
	-webkit-transition:transform 1s ease;
	transform:translate(-50%, -50%) scale(0) rotateY(-180deg);
	-webkit-transform:translate(-50%, -50%) scale(0) rotateY(-180deg);
}
.frame.active{
	transform:translate(-50%, -50%) scale(1) rotateY(0deg);
	-webkit-transform:translate(-50%, -50%) scale(1) rotateY(0deg);
}
/*--------------------
	Header
--------------------*/
header{
	height:84px;
	left:0;
	position:absolute;
	top:0;
	width:100%;
}
header .logotype{
	float:left;
	padding:19px 0 0 18px;
}
header .logotype a{
	display:block;
	height:64px;
	width:114px;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center center;
	background-image:url('../img/guix-express-logic-logo.png')
}
header .menu-icon{
	color:#8696a8;
	cursor:default;
	font-size:25px;
	position:absolute;
	right:21px;
	top:18px;
}
/*--------------------
Buttons
--------------------*/
.btn{
	display:block;
	cursor:pointer;
	position:relative;
	border-radius:4px;
}
.btn:before{
	background-color:#616c79;
	border-radius:3px;
	bottom:-4px;
	content:"";
	height:100%;
	left:0;
	position:absolute;
	width:100%;
	z-index:-1;
}
.btn:active::before{
	bottom:-1px;
}
.btn .bri{
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.5);
	position:absolute;
	border-radius:3px;
	opacity:0;
	transition:opacity 0.2s ease;
	-webkit-transition:opacity 0.2s ease;
}
.btn:hover .bri{opacity: 0.5}
.btn:active .bri{opacity:1}

/*--------------------
Content
--------------------*/
.smart-watch{
	background:url('../img/watch-bg.png') no-repeat center center/cover;
	width:317px;
	height:480px;
	position:absolute;
	left:50%;
	top:50%;
	-webkit-transform:translate(-50%,-50%);
			transform:translate(-50%,-50%);
}
.smart-watch .back-btn{
	cursor:pointer;
	display:block;
	height:44px;
	position:absolute;
	right:0;
	top:50%;
	-webkit-transform:translate(40%, -240%);
			transform:translate(40%, -240%);
	width:20px;
}
.smart-watch .back-btn.left-btn{
	left:0;
	right:auto;
	-webkit-transform:translate(-40%, -240%);
			transform:translate(-40%, -240%);
}
.smart-watch .back-btn span{
	border-bottom-right-radius:6px;
	border-top-right-radius:6px;
	display:block;
	height:41px;
	margin:1px 0 0 1px;
	width:11px;
}
.smart-watch .back-btn.left-btn span{
	border-radius:6px 0 0 6px;
	margin:1px 0 0 9px;
}
.smart-watch .back-btn:hover span{
	background:#25aae1;
}
.container{
	width:277px;
	height:312px;
	margin:90px auto 78px;
	overflow:hidden;
	border-radius:20px;
	position:relative;
}
/*--------------------
	Function Menu
--------------------*/
.function-menu{
	display:block;
	padding:0 13px 0 0;
	position:absolute;
	right:0;
	top:9px;
	width:100%;
}
.function-menu ul{
	text-align:right;
}
.function-menu ul li{
	display:inline-block;
	font-size:24px;
	color:rgba(134,150,168,.7);
	line-height:1.2;
	margin:0 4px;
	cursor:pointer;
}
.function-menu ul li:hover, .function-menu ul li.active{
	color:#25aae1;
}
/*--------------------
	Primary Menu
--------------------*/
.primary-menu{
	bottom:10px;
	height:68px;
	left:0;
	padding:0 5px 2px;
	position:absolute;
	width:100%;
}
.primary-menu .slick-list{
	padding-bottom:4px;
	padding-top:13px;
}
.primary-menu .slick-slide .btn{
	display:block;
	margin:0 auto;
	width:55px;
	color:#ffffff;
	font-size:36px;
	font-weight:400;
	line-height:36px;
	text-shadow:0px -1px 0px rgba(1, 1, 1, 0.48);
	text-align:center;
	height:49px;
	line-height:44px;
}
.primary-menu .slick-slide .btn:active{
	margin-top:3px;
}
/*gradient*/
.gradient-green{
	background:-webkit-linear-gradient(top, rgba(134,196,64,1) 0%,rgba(128,187,61,1) 2%,rgba(120,175,57,1) 23%,rgba(90,132,43,1) 73%,rgba(78,114,37,1) 98%,rgba(75,110,36,1) 100%);
	background:linear-gradient(to bottom, rgba(134,196,64,1) 0%,rgba(128,187,61,1) 2%,rgba(120,175,57,1) 23%,rgba(90,132,43,1) 73%,rgba(78,114,37,1) 98%,rgba(75,110,36,1) 100%);
}
.gradient-green:hover{
	background:-webkit-linear-gradient(bottom, rgba(134,196,64,1) 0%,rgba(128,187,61,1) 2%,rgba(120,175,57,1) 23%,rgba(90,132,43,1) 73%,rgba(78,114,37,1) 98%,rgba(75,110,36,1) 100%);
	background:linear-gradient(to top, rgba(134,196,64,1) 0%,rgba(128,187,61,1) 2%,rgba(120,175,57,1) 23%,rgba(90,132,43,1) 73%,rgba(78,114,37,1) 98%,rgba(75,110,36,1) 100%);
}
.gradient-blue{
	background:-webkit-linear-gradient(top, rgba(37,170,225,1) 0%,rgba(35,162,214,1) 2%,rgba(35,161,213,1) 8%,rgba(32,147,194,1) 31%,rgba(23,107,142,1) 83%,rgba(21,99,131,1) 98%,rgba(21,95,126,1) 100%);
	background:linear-gradient(to bottom, rgba(37,170,225,1) 0%,rgba(35,162,214,1) 2%,rgba(35,161,213,1) 8%,rgba(32,147,194,1) 31%,rgba(23,107,142,1) 83%,rgba(21,99,131,1) 98%,rgba(21,95,126,1) 100%);
}
.gradient-blue:hover{
	background:-webkit-linear-gradient(bottom, rgba(37,170,225,1) 0%,rgba(35,162,214,1) 2%,rgba(35,161,213,1) 8%,rgba(32,147,194,1) 31%,rgba(23,107,142,1) 83%,rgba(21,99,131,1) 98%,rgba(21,95,126,1) 100%);
	background:linear-gradient(to top, rgba(37,170,225,1) 0%,rgba(35,162,214,1) 2%,rgba(35,161,213,1) 8%,rgba(32,147,194,1) 31%,rgba(23,107,142,1) 83%,rgba(21,99,131,1) 98%,rgba(21,95,126,1) 100%);
}
.gradient-yellow{
	background:-webkit-linear-gradient(top, rgba(250,179,22,1) 0%,rgba(238,171,21,1) 2%,rgba(236,169,21,1) 8%,rgba(222,159,19,1) 25%,rgba(177,127,16,1) 65%,rgba(145,104,13,1) 98%,rgba(140,100,12,1) 100%);
	background:linear-gradient(to bottom, rgba(250,179,22,1) 0%,rgba(238,171,21,1) 2%,rgba(236,169,21,1) 8%,rgba(222,159,19,1) 25%,rgba(177,127,16,1) 65%,rgba(145,104,13,1) 98%,rgba(140,100,12,1) 100%);
}
.gradient-yellow:hover{
	background:-webkit-linear-gradient(bottom, rgba(250,179,22,1) 0%,rgba(238,171,21,1) 2%,rgba(236,169,21,1) 8%,rgba(222,159,19,1) 25%,rgba(177,127,16,1) 65%,rgba(145,104,13,1) 98%,rgba(140,100,12,1) 100%);
	background:linear-gradient(to top, rgba(250,179,22,1) 0%,rgba(238,171,21,1) 2%,rgba(236,169,21,1) 8%,rgba(222,159,19,1) 25%,rgba(177,127,16,1) 65%,rgba(145,104,13,1) 98%,rgba(140,100,12,1) 100%);
}
.gradient-violet{
	background:-webkit-linear-gradient(top, rgba(111,82,162,1) 0%,rgba(106,78,154,1) 2%,rgba(99,73,145,1) 23%,rgba(62,46,91,1) 100%);
	background:linear-gradient(to bottom, rgba(111,82,162,1) 0%,rgba(106,78,154,1) 2%,rgba(99,73,145,1) 23%,rgba(62,46,91,1) 100%);
}
.gradient-violet:hover{
	background:-webkit-linear-gradient(bottom, rgba(111,82,162,1) 0%,rgba(106,78,154,1) 2%,rgba(99,73,145,1) 23%,rgba(62,46,91,1) 100%);
	background:linear-gradient(to top, rgba(111,82,162,1) 0%,rgba(106,78,154,1) 2%,rgba(99,73,145,1) 23%,rgba(62,46,91,1) 100%);
}
.gradient-red{
	background:-webkit-linear-gradient(top, rgba(241,93,64,1) 0%,rgba(230,89,61,1) 2%,rgba(228,88,60,1) 8%,rgba(207,80,55,1) 31%,rgba(154,59,41,1) 81%,rgba(140,54,37,1) 98%,rgba(135,52,36,1) 100%);
	background:linear-gradient(to bottom, rgba(241,93,64,1) 0%,rgba(230,89,61,1) 2%,rgba(228,88,60,1) 8%,rgba(207,80,55,1) 31%,rgba(154,59,41,1) 81%,rgba(140,54,37,1) 98%,rgba(135,52,36,1) 100%);
}
.gradient-red:hover{
	background:-webkit-linear-gradient(bottom, rgba(241,93,64,1) 0%,rgba(230,89,61,1) 2%,rgba(228,88,60,1) 8%,rgba(207,80,55,1) 31%,rgba(154,59,41,1) 81%,rgba(140,54,37,1) 98%,rgba(135,52,36,1) 100%);
	background:linear-gradient(to top, rgba(241,93,64,1) 0%,rgba(230,89,61,1) 2%,rgba(228,88,60,1) 8%,rgba(207,80,55,1) 31%,rgba(154,59,41,1) 81%,rgba(140,54,37,1) 98%,rgba(135,52,36,1) 100%);
}
.gradient-gray{
	background:-webkit-linear-gradient(top, rgba(137,149,166,1) 0%,rgba(131,142,158,1) 2%,rgba(128,140,156,1) 10%,rgba(118,128,143,1) 31%,rgba(77,84,93,1) 100%);
	background:linear-gradient(to bottom, rgba(137,149,166,1) 0%,rgba(131,142,158,1) 2%,rgba(128,140,156,1) 10%,rgba(118,128,143,1) 31%,rgba(77,84,93,1) 100%);
}
.gradient-gray:hover{
	background:-webkit-linear-gradient(bottom, rgba(137,149,166,1) 0%,rgba(131,142,158,1) 2%,rgba(128,140,156,1) 10%,rgba(118,128,143,1) 31%,rgba(77,84,93,1) 100%);
	background:linear-gradient(to top, rgba(137,149,166,1) 0%,rgba(131,142,158,1) 2%,rgba(128,140,156,1) 10%,rgba(118,128,143,1) 31%,rgba(77,84,93,1) 100%);
}

.primary-menu .slick-slide .btn i,
.primary-menu .slick-slide .btn img{
	display:inline-block;
	vertical-align:middle;
	margin-top:-5px;
}
@-webkit-keyframes pulse{
	0%{ -webkit-transform:scale(1); -webkit-box-shadow:0 0 0 0 rgba(204,169,44, 0.8);}
	50%{ -webkit-transform:scale(1.1); -webkit-box-shadow:0 0 0 4px rgba(204,169,44, 0);}
	100%{ -webkit-transform:scale(1); -webkit-box-shadow:0 0 0 0 rgba(204,169,44, 0);}
}
@keyframes pulse{
	0%{ -webkit-transform:scale(1); transform:scale(1); box-shadow:0 0 0 0 rgba(204,169,44, 0.8);}
	50%{ -webkit-transform:scale(1.1); transform:scale(1.1); box-shadow:0 0 0 4px rgba(204,169,44, 0);}
	100%{ -webkit-transform:scale(1); transform:scale(1); box-shadow:0 0 0 0 rgba(204,169,44, 0);}
}
.primary-menu .slick-slide .btn .note{
	animation:pulse 2s infinite;
	-webkit-animation:pulse 2s infinite;
	position:absolute;
	top:-10px;
	right:-5px;
	border-radius:50%;
	font-size:16px;
	color:rgba(255, 255, 255, 0.98);
	text-shadow:0px -1px 0px rgba(1, 1, 1, 0.48);
	width:23px;
	height:23px;
	line-height:23px;
	text-align:center;
	font-weight:500;
	z-index:4;
	background:#e3583c;
	background:-webkit-linear-gradient(top, #e3583c 0%,#d15137 27%,#963a28 100%);
	background:linear-gradient(to bottom, #e3583c 0%,#d15137 27%,#963a28 100%);
}
.primary-menu .slick-dots{
	position:absolute;
	top:-14px;
	left:0;
	width:100%;
	text-align:center;
}
.primary-menu .slick-dots li{
	display:inline-block;
	vertical-align:top;
}
.primary-menu .slick-dots li button{
	border:none;
	background:#8696a8;
	width:7px;
	height:7px;
	font-size:0;
	border-radius:50%;
	opacity:0.6;
	margin:0 4px;
	padding:0;
	cursor:pointer;
}
.primary-menu .slick-dots li:hover button{
	opacity:0.8;
}
.primary-menu .slick-dots li.slick-active button{
	opacity:1;
}
/*--------------------
	Tab Panel
--------------------*/
.tabs{
	background:#000;
	height:264px;
	padding:0;
	position:absolute;
	top:48px;
	width:100%;
	z-index:-1;
	overflow:hidden;
	opacity:0;
	visibility:hidden;
	-webkit-transition:opacity 0.4s ease;
	transition:opacity 0.4s ease;
	border-bottom-left-radius:24px;
	border-bottom-right-radius:24px;
}
.tabs.tabs-active{
	z-index:2;
	opacity:1;
	visibility:visible;
}
.tabs .tab-panel, .inside-tab-panel{
	display:none;
}
.tabs .tab-panel.active, .inside-tab-panel.active{
	display:block;
}
/*--------------------
	Time Date
--------------------*/
.time-date{
	line-height:1;
	margin:80px auto 0;
	max-width:240px;
	text-align:center;
}
.time-date .date{
	font-size:18px;
	color:rgb(134, 150, 168);
	font-weight:400;
}
.time-date .time{
	color:rgb(234, 234, 234);
	display:inline-block;
	font-size:88px;
	font-weight:100;
	position:relative;
	width:auto;
}
.time-date .dn{
	font-size:24.75px;
	color:rgb(134, 150, 168);
	text-align:right;
	font-weight:300;
	text-transform:uppercase;
	padding-right:6px;
	margin-top:-6px;
	line-height:1;
	position:absolute;
	right:0;
	bottom:-20px;
}
/*-----------------
	New MSG
-----------------*/
.new-msg{
	color:#8696a8;
	float:left;
	padding-left:16px;
	position:relative;
	z-index:1;
	cursor:pointer;
}
.new-msg .icon{
	font-size:24px;
	display:inline-block;
	vertical-align:middle;
	font-weight:100;
}
.new-msg span{
	font-size:16px;
	font-weight:500;
	display:inline-block;
	vertical-align:middle;
}
.new-msg:hover span{
	color:#25aae1;
}
/*-----------------
	Search
-----------------*/
.search{
	float:right;
	position:relative;
	padding-right:8px;
	z-index:2;
	height:33px;
}
.search .search-input{
	background-color:rgba(97, 108, 121, 0.4);
	border:medium none;
	border-radius:3px;
	height:33px;
	margin:0;
	padding:0 30px 0 10px;
	width:73px;
	color:#fff;
	font-size:20px;
	font-weight:400;
	-webkit-transition:all 0.5s ease;
	transition:all 0.5s ease;
	position:absolute;
	right:6px;
	top:0;
}
.search .search-input.active{
	width:257px;
	background-color:rgba(97, 108, 121, 1);
}
.search input[type="submit"]{
	background:none;
	border:medium none;
	color:transparent;
	cursor:pointer;
	display:block;
	font-size:0;
	height:33px;
	padding:0;
	position:absolute;
	right:4px;
	top:0;
	width:25px;
	z-index:99;
}
.icon-submit{
	color:#8696a8;
	font-size:20px;
	font-weight:400;
	position:absolute;
	right:14px;
	top:3px;
	z-index:2;
	opacity:1;
}
.search input[type="submit"]:hover+.icon-submit{
	color: #25aae1;
}
/*--------------------
	MSG
--------------------*/
.msg-scroll{
	margin-top:12px;
	height:210px;
	position:relative;
}
.msg-scroll:before{
	top:0;
	background:-webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
	background:linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
}
.msg-scroll:after{
	bottom:0;
	background:-webkit-linear-gradient(bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
	background:linear-gradient(to top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
}
.msg-scroll:before, .msg-scroll:after{
	content:"";
	height:5px;
	left:0;
	position:absolute;
	width:100%;
	z-index:1;
}
.msg-scroll-box{
	height:178px;
}
.msg-scroll-box .mCSB_container{
	padding-top:20px;
}
.msg{
	padding:0 19px 0 12px;
	margin-bottom:12px;
}
.msg .title{
	height:30px;
	line-height:30;
	background-color:#282d32;
	padding:0 10px;
	margin-bottom:4px;
	cursor:pointer;
}
.msg .title:hover{
	background-color:#25aae1;
}
.msg .title .name{
	color:#eaeaea;
	display:inline-block;
	float:left;
	font-size:16px;
	font-weight:500;
	height:auto;
	line-height:30px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	width:160px;
}
.msg .title:hover .name{
	color:#010101;
	font-weight:500;
	text-shadow:0px 1px 0px rgba(255, 255, 255, 0.48);
}
.msg .title .time{
	font-size:13.468px;
	color:rgb(134, 150, 168);
	float:right;
	display:inline-block;
	line-height:30px;
}
.msg .title:hover .time{
	color:#ffffff;
	text-shadow:0px -1px 0px rgba(1, 1, 1, 0.4);
}
.msg .msg-text{
	padding:0 10px;
	color:#8696a8;
	font-size:14px;
	font-weight:500;
}
.msg-box{
	background-color:#000;
	height:100%;
	left:0;
	opacity:0;
	position:absolute;
	top:0;
	width:100%;
	z-index:-1;
	transition:opacity 0.5s ease;
	-webkit-transition:opacity 0.5s ease;
}
.msg-box.active{
	opacity:1;
	z-index:2;
}
.msg-box .msg-back-link{
	color:#8696a8;
	font-size:16px;
	font-weight:500;
	float:left;
	margin-bottom:16px;
	cursor:pointer;
	margin-left:16px;
}
.msg-box .msg-back-link:hover{
	color:#25aae1;
}
.msg-box .msg-back-link i{
	margin-right:10px;
}
.msg-box .msg-name{
	font-size:16px;
	color:#dbdbdb;
	font-weight:700;
	float:right;
	margin-bottom:16px;
	margin-right:16px;
}
.msg-box .msg-outbox{
	text-align:right;
	padding-right:1px;
}
.msg-box .msg-outbox .msg-text{
	background-color:#464c52;
	text-align:left;
	margin-bottom:22px;
}
.msg-box .msg-outbox:last-child .msg-text{
	margin-bottom:5px;
}
.msg-box .msg-outbox .time{
	left:0;
}
.msg-box .msg-inbox{
	padding-left:1px;
}
.msg-box .msg-inbox .msg-text{
	background-color:#32383f;
	margin-bottom:22px;
}
.msg-box .msg-inbox .time{
	right:0;
}
.msg-box .msg-text{
	display:inline-block;
	color:#eaeaea;
	font-size:16px;
	font-weight:500;
	position:relative;
	max-width:246px;
	width:auto;
	padding:4px 12px 8px;
}
.msg-box .time{
	color:#8696a8;
	font-size:12px;
	font-weight:500;
	position:absolute;
	top:-16px;
}
.msg-box .ui-keyboard-input-current{
	box-shadow:none;
}
.msg-box .ui-keyboard-input{
	background:#31363d;
	border:none;
	height:41px;
	width:230px;
	margin:0 auto;
	padding:0 35px 0 10px;
	font-size:16px;
	color:#fff;
	display:block;
	font-weight:300;
	border-radius:3px;
}
.msg-box .row-input .ui-keyboard-input::-webkit-input-placeholder	{color:#616d7a;}
.msg-box .row-input .ui-keyboard-input::-moz-placeholder			{color:#616d7a;}
.msg-box .row-input .ui-keyboard-input:-moz-placeholder				{color:#616d7a;}
.msg-box .row-input .ui-keyboard-input:-ms-input-placeholder		{color:#616d7a;}
.msg-keyboard{
	bottom:5px;
	left:0;
	position:absolute;
	width:100%;
	background-color:#000;
	border-bottom-left-radius: 22px;
	border-bottom-right-radius: 22px;
	overflow: hidden;
}
.ui-keyboard{
	left:auto;
	padding:0;
	position:relative;
	text-align:center;
	top:auto;
	z-index:16000;
	background-color:#000;
	border-bottom-left-radius: 22px;
	border-bottom-right-radius: 22px;
	overflow: hidden;
}
.ui-keyboard-button{
	background:rgba(0, 0, 0, 0) none repeat scroll 0 0;
	border:medium none;
	color:#fff;
	cursor:pointer;
	height:auto;
	line-height:1.1;
	margin:1px 4px;
	min-width:0;
	overflow:hidden;
	padding:0;
	color:#d1d1d1;
	font-size:20px;
	font-weight:500;
	display:inline-block;
	vertical-align:middle;
	font-family:'Roboto', sans-serif;
	letter-spacing: 4px;
}
@-moz-document url-prefix() {
	.ui-keyboard-button{
		letter-spacing: 0px;
	}
}
.ui-keyboard-button.ui-keyboard-actionkey {
	margin-bottom: 2px;
}
.ui-keyboard-space{
	background-color:#36393d;
	border-radius:5px;
	height:23px;
	width:90px;
}
.ui-keyboard-accept span, .ui-keyboard-enter span, .ui-keyboard-shift span, .ui-keyboard-bksp span, .ui-keyboard-meta1 span, .ui-keyboard-meta2 span{
	background-color:#36393d;
	border-radius:5px;
	color:#98a8ba;
	font-size:14px;
	height:24px;
	line-height:24px;
	padding:0 5px;
	text-transform:lowercase;
	font-family:'Roboto', sans-serif;
	letter-spacing: 0px;
}
.msg-box .row-title{
	background-color:#000;
	position:relative;
	z-index:3;
}
.msg-box.show-keyboard .row-input{
	top:105px;
}
.msg-box.show-keyboard .ui-keyboard-input{
	margin:0 0 0 10px;
	width:210px;
}
.row.row-input{
	position:absolute;
	top:213px;
	background-color:#000;
	z-index:2;
	padding-bottom:2px;
}
.row.row-input:before{
	content:"";
	position:absolute;
	height:5px;
	width:100%;
	top:-5px;
	left:0;
	background:rgb(0,0,0);
	background:-webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
	background:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
	z-index:1;
}
.row-input .microphone{
	color:#8696a8;
	display:block;
	font-size:20px;
	position:absolute;
	right:36px;
	top:50%;
	-webkit-transform:translate(0%, -50%);
			transform:translate(0%, -50%);
	z-index:2;
}
.row-input .microphone:hover{
	color:#25aae1;
}
.row-input .submit-btn{
	background: -moz-linear-gradient(top, rgba(70,78,87,1) 0%, rgba(63,70,79,1) 30%, rgba(46,51,57,1) 88%, rgba(43,47,53,1) 98%, rgba(39,43,49,1) 100%);
	background: -webkit-linear-gradient(top, rgba(70,78,87,1) 0%,rgba(63,70,79,1) 30%,rgba(46,51,57,1) 88%,rgba(43,47,53,1) 98%,rgba(39,43,49,1) 100%);
	background: linear-gradient(to bottom, rgba(70,78,87,1) 0%,rgba(63,70,79,1) 30%,rgba(46,51,57,1) 88%,rgba(43,47,53,1) 98%,rgba(39,43,49,1) 100%);
	border-radius:3px;
	color:rgb(186, 203, 221);
	display:none;
	font-size:19.036px;
	height:41px;
	line-height:41px;
	position:absolute;
	right:10px;
	text-align:center;
	text-shadow:0 -1px 0 rgba(1, 1, 1, 0.48);
	top:0;
	width:41px;
	color:#8e9aa8;
}
.row-input .submit-btn:active, .row-input .submit-btn:hover{
	color:#25aae1;
}
.row-input .microphone:active, .row-input .microphone:hover{
	color:#25aae1;
}
.show-keyboard .row-input .microphone{
	right:69px;
}
.show-keyboard .row-input .submit-btn{
	display:block;
}
.row.row-text{
	position:relative;
	padding-top:0;
}
.row.row-text:before{
	content:"";
	position:absolute;
	height:5px;
	width:100%;
	top:0;
	left:0;
	background:rgb(0,0,0);
	background:-webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
	background:linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
	z-index:1;
}
.mCSB_inside > .mCSB_container{
	margin:0;
}
.mCSB_dragger{ height:80px !important; }
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	width:5px;
}
.mCSB_scrollTools .mCSB_draggerRail{
	display:none;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
	background-color:#a7b2b8;
}
.mCSB_scrollTools{
	opacity:0.2;
}
.mCSB_scrollTools:hover, .mCSB_scrollTools:active{
	opacity:0.8;
}
.msg-sent{
	color:#25aae1;
	display:block;
	font-size:12px;
	font-weight:500;
	left:0;
	position:absolute;
	top:-15px;
}
/*------------------
	preloader
------------------*/
.preloader{
	z-index:99;
	left:50%;
	position:absolute;
	top:50%;
	-webkit-transform:translate(-50%, -50%);
			transform:translate(-50%, -50%);
	width:36px;
	-webkit-animation-name:rotate;
			animation-name:rotate;
	-webkit-animation-duration:2s;
			animation-duration:2s;
	-webkit-animation-iteration-count:infinite;
			animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
			animation-timing-function:linear;
	display:none;
}
@keyframes rotate{
	0%  {-webkit-transform:translate(-50%, -50%) rotate(0deg);transform:translate(-50%, -50%) rotate(0deg);}
	100%{-webkit-transform:translate(-50%, -50%) rotate(360deg);transform:translate(-50%, -50%) rotate(360deg);}
}
@-webkit-keyframes rotate{
	0%  {-webkit-transform:translate(-50%, -50%) rotate(0deg);}
	100%{-webkit-transform:translate(-50%, -50%) rotate(360deg);}
}
/*-----------------------
	Calculator
-----------------------*/
.panel-body{
	margin-bottom: 6px;
}
.form-control.txtr{
	background-color:#31363d;
	border:medium none;
	border-radius:4px;
	color:#fff;
	display:block;
	font-size:36px;
	height:41px;
	line-height:41px;
	margin:0 auto;
	padding:0 10px;
	text-align:right;
	width:255px;
}
.micalctcl{
	background:none;
	border:none;
	color:#d1d1d1;
	display:block;
	font-size:36px;
	font-weight:300;
	margin:0 auto;
	padding:0;
	cursor: pointer;
	line-height: 1;
}
#micalc .micalctcl:hover,
#micalc .micalctcl:active{
	color: #25aae1;
}
#micalc .col-md-3:hover:before,
#micalc .col-md-3:active:before{
	color: #25aae1 !important;
}
#micalc .col-md-3{
	min-height: 44px;
	position: relative;
}
#micalc .col-md-3:nth-child(1) .micalctcl,
#micalc .col-md-3:nth-child(2) .micalctcl,
#micalc .col-md-3:nth-child(3) .micalctcl{
	color: #8696a8;
	font-size: 20px;
	font-weight: 500;
}
#micalc .col-md-3:nth-child(1) .micalctcl:hover, #micalc .col-md-3:nth-child(2) .micalctcl:hover, #micalc .col-md-3:nth-child(3) .micalctcl:hover,
#micalc .col-md-3:nth-child(1) .micalctcl:active, #micalc .col-md-3:nth-child(2) .micalctcl:active, #micalc .col-md-3:nth-child(3) .micalctcl:active{
	color: #25aae1;
}
#micalc .col-md-3:nth-child(4) .micalctcl,
#micalc .col-md-3:nth-child(8) .micalctcl,
#micalc .col-md-3:nth-child(12) .micalctcl,
#micalc .col-md-3:nth-child(16) .micalctcl{
	color: #8696a8;
	font-size: 24px;
	font-weight: 400;
}
#micalc .col-md-3:nth-child(19) .micalctcl{
	margin-right: -58px;
	margin-top: 3px;
	width: 116px;
	height: 41px;
	background: rgb(73,81,91);
	border-radius: 5px;
	line-height: 1;
	position: relative;
	color: #8696a8;
	text-shadow: 0px -1px 0px rgba(1, 1, 1, 0.48);
	background: -moz-linear-gradient(top, rgba(73,81,91,1) 0%, rgba(70,78,87,1) 3%, rgba(64,71,80,1) 30%, rgba(43,47,53,1) 100%);
	background: -webkit-linear-gradient(top, rgba(73,81,91,1) 0%,rgba(70,78,87,1) 3%,rgba(64,71,80,1) 30%,rgba(43,47,53,1) 100%);
	background: linear-gradient(to bottom, rgba(73,81,91,1) 0%,rgba(70,78,87,1) 3%,rgba(64,71,80,1) 30%,rgba(43,47,53,1) 100%);
}
#micalc .col-md-3:nth-child(19) .micalctcl:hover,
#micalc .col-md-3:nth-child(19) .micalctcl:active{
	background: -moz-linear-gradient(bottom, rgba(73,81,91,1) 0%, rgba(70,78,87,1) 3%, rgba(64,71,80,1) 30%, rgba(43,47,53,1) 100%);
	background: -webkit-linear-gradient(bottom, rgba(73,81,91,1) 0%,rgba(70,78,87,1) 3%,rgba(64,71,80,1) 30%,rgba(43,47,53,1) 100%);
	background: linear-gradient(to top, rgba(73,81,91,1) 0%,rgba(70,78,87,1) 3%,rgba(64,71,80,1) 30%,rgba(43,47,53,1) 100%);
}
#micalc .col-md-3:nth-child(19) .micalctcl:active{
	top: 2px;
}
#micalc .col-md-3:nth-child(1),
#micalc .col-md-3:nth-child(2),
#micalc .col-md-3:nth-child(3),
#micalc .col-md-3:nth-child(4){
	min-height: 0px;
}
#micalc .col-md-3:nth-child(8) .micalctcl,
#micalc .col-md-3:nth-child(12) .micalctcl,
#micalc .col-md-3:nth-child(16) .micalctcl{
	color: transparent;
	position: relative;
	z-index: 2;
}
#micalc .col-md-3:nth-child(8):before,
#micalc .col-md-3:nth-child(12):before,
#micalc .col-md-3:nth-child(16):before{
	color: #8696a8;
	font-family: "FontAwesome";
	font-size: 24px;
	left: 50%;
	position: absolute;
	top: 50%;
	z-index: 1;
	transform: translate(-50%,-50%);
	text-shadow: 0px -1px 0px rgba(1, 1, 1, 0.48);
}
#micalc .col-md-3:nth-child(8):before{content:"\f00d"}
#micalc .col-md-3:nth-child(12):before{content:"\f068"}
#micalc .col-md-3:nth-child(16):before{content:"\f067"}

#micalcBorrar{display:none}

/*-----------------------
	Game
-----------------------*/
.game-scroll{
	height:264px;
}
.mCustomScrollbar:before{
	content:"";
	position:absolute;
	height:5px;
	width:100%;
	bottom:0;
	left:0;
	background:-webkit-linear-gradient(bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
	background:linear-gradient(to top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
	z-index:1;
}
.mCustomScrollbar:after{
	content:"";
	position:absolute;
	height:5px;
	width:100%;
	top:0;
	left:0;
	background:-webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
	background:linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
	z-index:1;
}
.mCustomScrollbar{
	position: relative;
}
.game-scroll .row{
	padding-right:14px;
}
.tab-panel-game{
	text-align:center;
}
.tab-panel-game img{
	display:block;
	margin:0 auto;
	transition:all 0.4s ease;
	-webkit-transition:all 0.4s ease;
	cursor:pointer;
}
.tab-panel-game img:hover{
	transform:scale(0.9);
	-webkit-transform:scale(0.9);
}
.tab-panel-game img:active{
	opacity:0.4;
}
.tab-panel-game .col-md-6{
	min-height:120px;
	margin-top:3px;
	margin-bottom:5px;
}
/*--------------------
	Weather
--------------------*/
.weather-scroll{
	height:230px;
	padding-top: 8px;
	position:relative;
}
.weather-scroll:before{
	content:"";
	position:absolute;
	height:5px;
	width:100%;
	bottom:0;
	left:0;
	background:-webkit-linear-gradient(bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
	background:linear-gradient(to top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
	z-index:1;
}
.weather-scroll:after{
	content:"";
	position:absolute;
	height:5px;
	width:100%;
	top:8px;
	left:0;
	background:-webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
	background:linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
	z-index:1;
}
.city-name{
	color:#b4bec9;
	font-size:24px;
	font-weight:400;
	text-align:center;
	margin-bottom:5px;
}
.weather-title{
	margin-bottom:6px;
}
.weather-title .weather-info .weather-icon-sun{
	display:block;
	text-align:center;
	margin-top: 4px;
}
.weather-title .weather-info .weather-icon-sun .icon-sun{
	background-image:url('../img/icon-sun.png');
	background-size:cover;
	background-repeat:no-repeat;
	width:63px;
	height:63px;
	display:inline-block;
}
.weather-title .weather-info .weather-info{
	display:block;
	margin-top:-8px;
}
.weather-title .weather-info .weather-info .degree{
	color:#eaeaea;
	font-weight:100;
	font-size:88px;
	line-height:1;
}
.weather-title .weather-info .weather-info .degree span{
	color:#ccc;
	display:inline-block;
	font-size:65px;
	font-weight:300;
	margin-left:-6px;
	margin-top:2px;
	vertical-align:top;
}
.weather-title .weather-info .weather-info ul{
	display:block;
	margin-top:-4px;
}
.weather-title .weather-info .weather-info li{
	color:#566778;
	font-size:16px;
	font-weight:500;
	display:inline-block;
	margin-right:8px;
}
.weather-title .weather-info .weather-info li span{
	color:#8696a8;
	padding-left:4px;
	display:inline-block;
}
.weather-list{}
.weather-list li{
	height:40px;
	line-height:40px;
	padding-left:16px;
	padding-right:20px;
}
.weather-list li .text{
	font-size:16px;
	font-weight:500;
	color:#b4bec9;
	text-shadow:0px -1px 0px rgba(97, 108, 121, 0.48);
	display:inline-block;
	vertical-align:middle;
	width:88px;
}
.weather-list li .icon{
	display:inline-block;
	vertical-align:middle;
	margin-right:11px;
	height:38px;
	line-height:38px;
	width:36px;
	text-align:center;
}
.weather-list li .icon i{
	line-height:1;
	vertical-align:middle;
}
.weather-list li .degree{
	font-size:30px;
	color:#b4bec9;
	line-height:1.5;
	display:inline-block;
	vertical-align:middle;
}
.weather-list li .degree span{
	font-weight:100;
	margin-left:0;
}
.weather-list li .degree span.deg2{
	color:#b4bec9;
	padding-left:8px;
}
.weather-list .weather-icons{
	background-image:url(../img/weather-icons.png);
	background-repeat:no-repeat;
	display:inline-block;
}
.weather-list .weather-icons.weather-icon1{
	width:29px;
	height:29px;
	background-position:-5px -5px;
}
.weather-list .weather-icons.weather-icon2{
	width:36px;
	height:26px;
	background-position:-48px -9px;
}
.slick-arrow{
	z-index:2;
	color:#8696a8;
	display:block;
	font-size:24px;
	font-weight:400;
	height:30px;
	position:absolute;
	text-align:center;
	top:0;
	width:30px;
	cursor:pointer;
	opacity:1;
}
.slick-arrow:active, .slick-arrow:hover{
	color: #25aae1;
}
.slick-arrow-next{
	right:10px;
}
.slick-arrow-prev{
	left:10px;
}
/*--------------------
	Weather
--------------------*/
.heart-slider{
	height:205px;
	position:relative;
}
.heart-name{
	color:#b4bec9;
	font-size:24px;
	font-weight:400;
	text-align:center;
}
.heart-info{
	background-repeat:no-repeat;
	height:217px;
	padding-top:38px;
	position:relative;
}
.heart-img{
	animation:1000ms ease 0s normal none infinite running heartbeat;
	-webkit-animation:1000ms ease 0s normal none infinite running heartbeat;
	left:50%;
	margin-left:-100px;
	margin-top:-94px;
	position:absolute;
	top:50%;
	transition:opacity 0.5s ease 0s;
	-webkit-transition:opacity 0.5s ease 0s;
}
@-webkit-keyframes heartbeat{
	0%{-webkit-transform:scale(0.9);}
	14%{-webkit-transform:scale(1.2);}
	28%{-webkit-transform:scale(0.9);}
	42%{-webkit-transform:scale(1.2);}
	70%{-webkit-transform:scale(0.9);}
}
@keyframes heartbeat{
	0%{-webkit-transform:scale(0.9);transform:scale(0.9);}
	14%{-webkit-transform:scale(1.2);transform:scale(1.2);}
	28%{-webkit-transform:scale(0.9);transform:scale(0.9);}
	42%{-webkit-transform:scale(1.2);transform:scale(1.2);}
	70%{-webkit-transform:scale(0.9);transform:scale(0.9);}
}
.heart-pace{
	background-image:url('../img/run-bg.png');
	background-position:center 8px;
}
.heart-info .num{
	color:#eaeaea;
	font-size:88px;
	font-weight:100;
	display:block;
	text-align:center;
	text-shadow:0px -1px 0px rgba(1, 1, 1, 0.48);
	line-height:1;
}
.heart-info .val{
	color:#bdc4c8;
	font-size:23px;
	font-weight:400;
	display:block;
	text-align:center;
	text-shadow:0px -1px 0px rgba(1, 1, 1, 0.48);
	line-height:1;
	margin-top:-3px;
}
.cardio{
	bottom:26px;
	left:0;
	position:absolute;
}
/*----------------------
	tab-panel-clock
----------------------*/
.stop-watch{
	bottom:90px;
	display:inline-block;
	left:19px;
	position:absolute;
	cursor:pointer;
}
.stop-watch:active, .stop-watch:hover{
	color: #25aae1;
}
.watch-icons{
	bottom:14px;
	left:12px;
	position:absolute;
}
.watch-icons li{
	display:inline-block;
	vertical-align:middle;
	cursor:pointer;
	margin:0 6px;
	font-size:21px;
	color:#8696a8;
	height:24px;
}
.watch-icons li:hover, .watch-icons li.active, .watch-icons li:active{
	color:#25aae1;
}
.watch-icons li i.icons,
.stop-watch i.icons{
	background-image:url('../img/watch-icons.png');
	background-repeat:no-repeat;
	display:inline-block;
}
.watch-icons li i.icon-stopwatch,
.stop-watch i.icon-stopwatch{
	background-position:0 -46px;
	width:21px;
	height:23px;
}
.watch-icons li:hover i.icon-stopwatch,
.watch-icons li:active i.icon-stopwatch,
.watch-icons li.active i.icon-stopwatch,
.stop-watch:hover i.icon-stopwatch,
.stop-watch:active i.icon-stopwatch,
.stop-watch.active i.icon-stopwatch{
	background-position:-21px -46px;
}
.clock-title{
	color:#8696a8;
	font-size:18px;
	font-weight:500;
	display:block;
	margin:6px 0 0 21px;
}
/*-----------------------
	timer clock
-----------------------*/
.stopwatch{
	color:#eaeaea;
	font-size:62px;
	font-weight:100;
	text-align:center;
	margin-top:22px;
	margin-bottom:20px;
}
.stopwatch-btns{
	display:block;
	text-align:center;
	padding:0 20px;
}
.stopwatch-btns li{
	box-sizing:border-box;
	display:inline-block;
	padding:0 5px;
	width:94px;
}
.stopwatch-btns button{
	border:none;
	font-size:22px;
	padding-bottom:3px;
	letter-spacing:.5px;
	font-weight:300;
	color:#b4bec9;
	border-radius:5px;
	width:100%;
	cursor:pointer;
	height:41px;
	position:relative;
	text-align: center;
	padding: 0;
	text-shadow:0px -1px 0px rgba(1, 1, 1, 0.48);
	background:-webkit-linear-gradient(top, rgba(71,78,88,1) 0%,rgba(51,57,63,1) 98%,rgba(48,53,60,1) 100%);
	background:linear-gradient(to bottom, rgba(71,78,88,1) 0%,rgba(51,57,63,1) 98%,rgba(48,53,60,1) 100%);
}
.stopwatch-btns button:active{
	background:-webkit-linear-gradient(bottom, rgba(71,78,88,1) 0%,rgba(51,57,63,1) 98%,rgba(48,53,60,1) 100%);
	background:linear-gradient(to top, rgba(71,78,88,1) 0%,rgba(51,57,63,1) 98%,rgba(48,53,60,1) 100%);
	top:2px;
}
.stopwatch-btns .button-reset button{
	color:rgb(134, 150, 168);
	letter-spacing:normal;
}
.clock-list-scroll{
	height:220px;
	position:relative;
	z-index:2;
}
.clock-list{
	padding-left:18px;
	padding-right:33px;
}
.clock-list li{
	clear:both;
	display:block;
	width:100%;
	border-top:1px solid rgba(85, 94, 106, 0.7);
	padding-top:12px;
}
.clock-list li:first-child{
	border-color:transparent;
	padding-top:0;
}
.clock-list li:active{
	border-top:1px solid rgba(85, 94, 106, 1);
}
.clock-list li:before, .clock-list li:after{
	content:"";
	display:table;
	width:100%;
	clear:both;
}
.clock-list .city{
	color:#b4bec9;
	font-size:20px;
	font-weight:400;
	float:left;
	width:100px;
}
.clock-list .time{
	float:right;
	text-align:right;
	color:#eaeaea;
	font-size:50px;
	font-weight:100;
	width:120px;
	line-height:1;
	margin-top:-2px;
}

.clock-list .time .mn{
	cursor:pointer;
	color:#8696a8;
	display:block;
	font-size:18px;
	font-weight:400;
	line-height:1;
	margin-bottom:3px;
	margin-top:-3px;
	text-transform:uppercase;
}
.clock-list .time .mn.active .am{display:none;}
.clock-list .time .mn.active .pm{display:block;}
.clock-list .time .mn .am{display:block;}
.clock-list .time .mn .pm{display:none;}
.onoff{
	background:-webkit-linear-gradient(top, #5e6976 0%,#5b6673 3%,#57616d 38%,#4a535d 100%);
	background:linear-gradient(to bottom, #5e6976 0%,#5b6673 3%,#57616d 38%,#4a535d 100%);
	width:58px;
	height:33px;
	line-height:33px;
	border-radius:14px;
	display:block;
	position:relative;
	cursor:pointer;
	margin-top:10px;
	float:left;
}
.onoff span{
	display:block;
	width:25px;
	height:25px;
	background-color:#000;
	position:absolute;
	left:3px;
	top:49%;
	transform:translate(0%,-50%);
	-webkit-transform:translate(0%,-50%);
	-webkit-transition:all 0.4s ease;
	transition:all 0.4s ease;
	border-radius:50%;
}
.onoff:hover span{
background:-webkit-linear-gradient(top, rgba(20,20,20,1) 0%,rgba(66,66,66,1) 100%);
background:linear-gradient(to bottom, rgba(20,20,20,1) 0%,rgba(66,66,66,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#141414', endColorstr='#424242',GradientType=0 );
}
.onoff.active span{
	background:-webkit-linear-gradient(top, rgba(134,196,64,1) 0%,rgba(110,161,53,1) 100%);
	background:linear-gradient(to bottom, rgba(134,196,64,1) 0%,rgba(110,161,53,1) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#25aae1', endColorstr='#6ea135',GradientType=0 );
	left:29px;
	box-shadow:-1px 1px 2px 0 rgba(0, 0, 0, 0.15);
}
.onoff.active:hover span{
background:rgb(91,150,49);
background:-webkit-linear-gradient(top, rgba(91,150,49,1) 0%,rgba(116,178,58,1) 100%);
background:linear-gradient(to bottom, rgba(91,150,49,1) 0%,rgba(116,178,58,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b9631', endColorstr='#74b23a',GradientType=0 );
}
.icon-add{
	bottom:11px;
	color:#8696a8;
	font-size:23px;
	position:absolute;
	right:23px;
	cursor:pointer;
}
.icon-add:hover,
.icon-add:active,
.icon-add.active,
.icon-add:hover.active .fa-plus{
	color:#25aae1;
}
.icon-add .fa-plus{
	transition:all 0.4s ease;
	-webkit-transition:all 0.4s ease;
}
.icon-add.active .fa-plus{
	color:#8696a8;
	-webkit-transform:rotate(45deg);
			transform:rotate(45deg);
}
.icon-add.active .fa-close{
	display:block;
}
.add-clock, .add-alarm{
	height:225px;
	left:0;
	opacity:0;
	position:absolute;
	top:0;
	transition:opacity 0.2s ease 0s;
	-webkit-transition:opacity 0.2s ease 0s;
	width:100%;
	z-index:1;
	visibility:hidden;
	background-color:#000;
}
.add-clock.active, .add-alarm.active{
	z-index:3;
	opacity:1;
	visibility:visible;
}
.add-clock .search{
	float:none;
	margin-right:0px;
}
.add-clock .search .search-input{
	width:259px;
	background-color:rgba(97, 108, 121, .5);
}
.city-list-scroll{
	height:180px;
	margin-top:8px;
}
.city-list-scroll ul{
	padding-left:12px;
	padding-right:19px;
}
.city-list-scroll ul li{
	height:30px;
	line-height:30px;
	padding:0 8px;
	font-size:16px;
	font-weight:400;
	background-color:#32383f;
	cursor:pointer;
}
.city-list-scroll ul li:nth-child(2n){
	background-color:#000;
}
.city-list-scroll ul li:hover, .city-list-scroll ul li:active{
	background-color:#25aae1;
	color:rgb(1, 1, 1);
	text-shadow:0px 1px 0px rgba(255, 255, 255, 0.48);
}
/*-----------------
	Alarm
-----------------*/
.edit-alarm{
	text-align:center;
}
.alarm-change{
	display:inline-block;
	vertical-align:middle;
}
.alarm-change span{
	display:block;
	text-align:center;
}
.alarm-change input{
	background:rgba(0, 0, 0, 0) none repeat scroll 0 0;
	border:medium none;
	color:#eaeaea;
	font-size:88px;
	font-weight:100;
	padding:0;
	text-align:center;
	width:110px;
	font-family:'Roboto', sans-serif;
	margin:-15px 0 -18px;
}
.alarm-sep{
	color:#eaeaea;
	font-size:88px;
	font-weight:100;
}
.alarm-change span{
	color:#8696a8;
	display:block;
	font-size:36px;
	text-align:center;
	cursor:pointer;
}
.alarm-change span:hover, .alarm-change span:active{
	color:#25aae1;
}
.alarm-midnight{
	width:135px;
	height:41px;
	background:-webkit-linear-gradient(top, #49515b 0%,#464e57 3%,#434a53 28%,#32383e 100%);
	background:linear-gradient(to bottom, #49515b 0%,#464e57 3%,#434a53 28%,#32383e 100%);
	border-radius:3px;
	position:absolute;
	right:12px;
	bottom:-28px;
	text-align:center;
}
.alarm-midnight span{
	font-size:24px;
	color:rgb(134, 150, 168);
	text-shadow:0px -1px 0px rgba(1, 1, 1, 0.48);
	text-transform:uppercase;
	display:inline-block;
	vertical-align:middle;
	margin:5px 4px;
	cursor:pointer;
}
.alarm-midnight span:hover,
.alarm-midnight span:active,
.alarm-midnight span.active{
	color:#dfdfdf;
}
.alarm-midnight span.sep{
	color:rgb(134, 150, 168);
}
.close-add-alarm{
	color:#8696a8;
	cursor:pointer;
	font-size:24px;
	position:absolute;
	right:20px;
	top:0;
}
.close-add-alarm:hover,
.close-add-alarm:active{
	color:#25aae1;
}
/*----------------
	Contacts
----------------*/
.contacts .search{
	float:none;
	margin-right:4px;
}
.contacts .search .search-input{
	right:2px;
	width:259px;
	background-color:rgba(97,108,121,.5);
}
.contacts .search .icon-submit{
	right:10px;
}
.contacts-list-scroll {
	height: 225px;
	margin-top: 6px;
	position: relative;
}
.contacts-list-scroll ul{
	padding-left:12px;
	padding-right:19px;
}
.contacts-list-scroll ul li{
	height:30px;
	line-height:30px;
	padding:0 8px;
	font-size:16px;
	font-weight:400;
	background-color:#32383f;
	cursor:pointer;
}
.contacts-list-scroll ul li:nth-child(2n){
	background-color:#000;
}
.contacts-list-scroll ul li:hover, .contacts-list-scroll ul li:active{
	background-color:#25aae1;
	color:rgb(1, 1, 1);
	text-shadow:0px 1px 0px rgba(255, 255, 255, 0.48);
}
.add-new-contact{
	box-shadow:0 0 0 1px #000;
	position:absolute;
	bottom:10px;
	right:10px;
	color:#8696a8;
	width:38px;
	height:38px;
	line-height:38px;
	text-align:center;
	border-radius:50%;
	z-index:2;
	cursor:pointer;
	font-size:23px;
	background:-webkit-linear-gradient(top, #49525c 0%,#474e58 3%,#434a53 29%,#33393f 100%);
	background:linear-gradient(to bottom, #49525c 0%,#474e58 3%,#434a53 29%,#33393f 100%);
}
.add-new-contact:hover, .add-new-contact:active{
	color:#25aae1;
}
.info-user{
	background-color:#000;
	height:313px;
	left:0;
	padding:0;
	position:absolute;
	top:0;
	width:100%;
	z-index:-1;
	visibility:hidden;
	opacity:0;
	transition:opacity 0.4s ease;
	-webkit-transition:opacity 0.4s ease;
}
.info-user.active{
	opacity:1;
	visibility:visible;
	z-index:2;
}
.contacts-active .tabs{
	top:0;
	height:312px;
	border-radius:21px;
}
.contacts-active .function-menu{
	z-index:3;
}
.contacts-active .function-menu ul li{
	color:#8696a8;
	opacity:0.5;
}
.new-contact .submit{
	text-align:right;
}
.new-contact .save-contact-btn{
	background:rgb(71,78,88);
	background:-webkit-linear-gradient(top, rgba(71,78,88,1) 0%,rgba(51,57,63,1) 98%,rgba(48,53,60,1) 100%);
	background:linear-gradient(to bottom, rgba(71,78,88,1) 0%,rgba(51,57,63,1) 98%,rgba(48,53,60,1) 100%);
	border:none;
	font-size:24px;
	color:rgb(134, 150, 168);
	text-shadow:0px -1px 0px rgba(1, 1, 1, 0.48);
	border-radius:5px;
	width:auto;
	cursor:pointer;
	height:41px;
	position:relative;
	padding:0 10px;
	margin-bottom:5px;
	line-height:41px;
	display:inline-block;
}
.new-contact .save-contact-btn:active{
	background:-webkit-linear-gradient(bottom, rgba(71,78,88,1) 0%,rgba(51,57,63,1) 98%,rgba(48,53,60,1) 100%);
	background:linear-gradient(to top, rgba(71,78,88,1) 0%,rgba(51,57,63,1) 98%,rgba(48,53,60,1) 100%);
	top:2px;
}
.info-user img{
	display:block;
	height:100%;
	left:0;
	position:absolute;
	top:0;
	width:100%;
	z-index:1;
}
.info-user .name{
	color:#333c47;
	font-size:24px;
	line-height:20px;
	font-weight:400;
	display:block;
	text-align:right;
	position:relative;
	z-index:2;
	margin:95px 0 12px;
	padding-right:13px;
}
.info-user.dark-user .name{
	text-shadow:0 0 3px #fff;
}
.info-user .name span{
	font-size:18px;
	display:block;
}
.info-user .name .edit-user{
	color:#8696a8;
	cursor:pointer;
	margin-bottom:4px;
	position:absolute;
	right:15px;
	text-shadow:none;
	top:-23px;
}
.info-user.dark-user .name .edit-user{
	text-shadow:0 0 3px #fff;
	color:#333c47;
}
.info-user .name .edit-user:hover, .info-user .name .edit-user:active{
	color:#25aae1;
}
.info-user-scroll{
	height:165px;
	background-color:rgba(0,0,0,0.6);
	position:relative;
	z-index:2;
}
.info-user-scroll ul{
	margin-top: 8px;
}
.info-user-scroll .mCSB_scrollTools .mCSB_draggerContainer{
	padding-bottom:6px;
}
.info-user li{
	padding-left:10px;
	padding-right:20px;
	margin-top:12px;
}
.info-user li:first-child{
	margin-top:0;
}
.info-user li .label{
	font-size:16px;
	color:#8696a8;
	display:block;
}
.info-user li .number{
	font-size:24px;
	color:#eaeaea !important;
	position:relative;
	display:block;
	font-weight:300;
	text-decoration:none !important;
}
.info-user li .number .icon-chat{
	color:#8696a8;
	cursor:pointer;
	font-size:21px;
	position:absolute;
	right:0;
	top:50%;
	transform:translate(0%,-50%);
	-webkit-transform:translate(0%,-50%);
}
.info-user li .number .icon-chat:hover,
.info-user li .number .icon-chat:active{
	color:#25aae1;
}
.info-user li .email a, .add-contact-list li input[type="email"]{
	color:#eaeaea;
	font-size:16px;
	font-weight:300;
	text-decoration:none;
}
.info-user li .email a:hover,
.info-user li .email a:active{
	text-decoration:underline;
}
.back-to-contact-list{
	color:#8696a8;
	font-size:24px;
	left:10px;
	position:absolute;
	top:112px;
	z-index:2;
	cursor:pointer;
}
.back-to-contact-list:hover,
.back-to-contact-list:active{
	color:#25aae1;
}
.msg-contact{
	visibility:hidden;
	opacity:0;
	z-index:-1;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:264px;
	background-color:#000;
	transition:opacity 0.4s ease;
	-webkit-transition:opacity 0.4s ease;
}
.msg-contact.active{
	visibility:visible;
	z-index:3;
	opacity:1;
}
.msg-contact .msg-new{
	opacity:1;
	z-index:2;
}
.msg-contact .msg-keyboard{
	bottom:5px;
}
.msg-contact .msg-name{
	font-size:16px;
	color:#dbdbdb;
}
.msg-contact .msg-name span{
	color:#8696a8;
}
.contacts-active .msg-box-top{
	height:268px;
	margin-top:46px;
	position:relative;
}
.new-contact, .edit-contact{
	visibility:hidden;
	opacity:0;
	z-index:-1;
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:264px;
	background-color:#000;
	transition:opacity 0.4s ease;
	-webkit-transition:opacity 0.4s ease;
}
.new-contact.active,
.edit-contact.active{
	visibility:visible;
	z-index:3;
	opacity:1;
}
.add-contact-list{
	height:220px;
}
.add-contact-list li{
	border-top:1px solid #3c424a;
	margin-left:18px;
	margin-right:22px;
	padding-top:12px;
}
.add-contact-list li:first-child{
	border-top:none;
	padding-top:0;
}
.add-contact-list li label{
	display:block;
	color:#8696a8;
	font-size:16px;
}
.add-contact-list li input{
	background:none;
	border:none;
	padding:0;
	margin:0;
	display:block;
	width:100%;
	color:#dbdbdb;
	font-size:22px;
	font-weight:300;
	font-family:'Roboto', sans-serif;
}
.address{
	text-transform:capitalize;
}
.new-contact-title{
	display:block;
	position:relative;
	margin-bottom:10px;
	padding-left:18px;
	padding-right:18px;
}
.new-contact-title .save-contact{
	font-size:16px;
	color:#8696a8;
	cursor:pointer;
}
.new-contact-title .save-contact i{
	font-size:24px;
	display:inline-block;
	vertical-align:middle;
	margin-right:5px;
}
.new-contact-title .close-new-contact{
	font-size:24px;
	color:#8696a8;
	float:right;
	cursor:pointer;
}
.new-contact-title .save-contact:hover, .new-contact-title .save-contact:active,
.new-contact-title .close-new-contact:hover, .new-contact-title .close-new-contact:active{
	color:#25aae1;
}
/*--------------------
	Bag about company
--------------------*/
.bag-active .tabs{
	height:312px;
	top:0;
}
.bag-active .function-menu{
	z-index:3;
}
.bag-active .function-menu li{
	color:rgba(134,150,168,0.75);
}
.bag-bg{
	height:100%;
	left:0;
	position:absolute;
	top:0;
	width:100%;
	z-index:1;
}

.about-info{
	background-color:rgba(0, 0, 0, 0.7);
	display:block;
	height:145px;
	position:relative;
	z-index:2;
	padding-left:18px;
	top:46px;
	padding-top:13px;
}
.about-info .about-guix{
	color:#b4bec9;
	display:block;
	font-size:16px;
	margin-bottom:11px;
}
.about-info .company{
	font-size:16px;
	color:#8696a8;
	display:block;
}
.about-info .company-name{
	color:#e5e5e5;
	font-size:22px;
	display:block;
	margin-bottom:12px;
}
.about-info ul{}
.about-info ul li,
.about-info ul li a{
	display:block;
	font-size:16px;
	color:#b4bec9;
	text-decoration:none;
}
.about-info ul li a:hover,
.about-info ul li a:active{
	text-decoration:underline;
}
/*--------------------
	Settings
--------------------*/
.settings-list{
	padding:0 18px;
}
.settings-list li{
	border-bottom:1px solid #3c424a;
	color:#eaeaea;
	display:block;
	font-size:20px;
	height:52px;
	line-height:52px;
	position:relative;
	font-weight:300;
}
.settings-list li .icon{
	font-size:24px;
	color:#8696a8;
	float:right;
	cursor:pointer;
}
.settings-list li .icon:hover,
.settings-list li .icon:active{
	color:#25aae1;
}
.settings-list li .onoff{
	margin-right:10px;
}
/*------------------
	location
------------------*/
#map {
	height: 313px;
	width: 277px;
}

/*
.controls {
  margin-top: 10px;
  border: 1px solid transparent;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: 32px;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#pac-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 150px;
  margin-top:50px;
}

#pac-input:focus {
  border-color: #4d90fe;
}

.pac-container {
  font-family: Roboto;
}

#type-selector {
  color: #fff;
  background-color: #4d90fe;
  padding: 5px 11px 0px 11px;
}

#type-selector label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}
*/
/*end map*/



.location-active .tabs{
	height:312px;
	top:0;
}
.location-active .function-menu{
	z-index:3;
}
.location-active .function-menu li{
	color:#8696a8;
}
.google-bg{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	z-index:1;
}
.search-location{
	position:absolute;top:0px;left:265px;
	z-index:2;
	padding-top:42px;
}
.search-location .search{
	float:none;
}
.search-location .search .search-input{
	width:261px;
	background-color:rgba(0, 0, 0, 0.5);
	height:41px;
}
.search-location .icon-submit{
	font-size:19px;
	color:rgb(255, 255, 255);
	text-shadow:0px -1px 0px rgba(1, 1, 1, 0.4);
	top:8px;
	right:20px;
}
.search-location .search input[type="submit"]{
	right:16px;
	top:4px;
}
.search-location .search input[type="submit"]:hover + .icon-submit,
.search-location .search input[type="submit"]:active + .icon-submit{
	color:#25aae1;
}
.google-mark{
	left:50%;
	position:absolute;
	top:50%;
	-webkit-transform:translate(50%, -180%);
			transform:translate(50%, -180%);
	z-index:2;
}
.location-arrow{
	bottom:10px;
	left:20px;
	position:absolute;
	z-index:2;
	font-size:23px;
	color:rgba(255, 255, 255, 0.8);
	text-shadow:0px -1px 0px rgba(1, 1, 1, 0.4);
	cursor:pointer;
}
.location-arrow:hover,
.location-arrow:active{
	color:#25aae1;
}
svg polygon{
	fill:#000;
	background-color:#000;
}
/*by alex*/
.clock-list.even .time .colon{
	color:#888;
}
#time-date.even .colon{
	color:#888;
}
/*--------------------
Web presentation only
--------------------*/
body {
	background-color:transparent;
}
.frame {
	background-color:#000;
}
.title-with-closer {
	color:#fff;
	opacity:.7;
	line-height:25px;
	font-size:22px;
	font-weight:300;
	letter-spacing:1px;
	padding:0 7px 12px 8px;
	font-family:'Roboto',sans-serif;
}
.title-with-closer a {
	color:#fff;
	opacity:.6;
	float:right;
	margin-top:4px;
	text-decoration:none;
}
.title-with-closer a:active,.title-with-closer a:focus {
	text-decoration:none;
	outline:none;
}
.title-with-closer a:hover {
	opacity:1;
	color:#3789ce;
	text-decoration:none;
}