/*------------------------------------------------------------------
[Master Stylesheet]

Project:    Glade Admin Template
Version:    1.0
Last change:    09/06/2016 [Initail Release]
-------------------------------------------------------------------*/

/*** ======= // TABLE OF CONTENT // ============================
1. General Styling
2. Scroll bar Styling
3. Top Bar
4. Side Header
5. Side Menus
6. Main Content
7. heading Sec
8. Panel Content
9. Total Sales Sec
10. Color Classes
11. Activity Sec
12. Graph Wrapper
13. Our Clients Sec
14. Product Sale
15. task management
16. Chat Widget
17. Twitter Feed
18. Welcome Bar
19. Revenew Browser
20. Social Counter
21. Product Stats
22. Add Content Form
23. Tasks Progress
24. Activity Feed
25. Save Draft
26. Recent Comment
27. Toggle Content
28. Loader
29. Search Sec
30. Gallery Sec
31. price Table
32. Intro
33. Css Spinners
34. Invoice Sec
35. My Cart
36. Range Slider
37. Ion.RangeSlider
38. Accordian
39. C0ntact Form
40. Ribbon Grids
41. Progress Bar
42. Progress
43. Collapse
44. Services
45. Comming Soon
46. Our Team
47. CSS Document
48. Profile
49. GitHub Theme
50. Hover.css

===================================================== ***/
@font-face {
    font-family: "\5FAE\8F6F\96C5\9ED1";
}

/*=============== General Styling ===================*/
@import url('https://fonts.googleapis.com/css?family='\5FAE\8F6F\96C5\9ED1':300,300i,400,400i,500,500i,700,700i,900,900i|'\5FAE\8F6F\96C5\9ED1':400,400i,500,500i,700,700i,900,900i');


body {
    color: #505050;
    float: left;
    font-family: "Microsoft YaHei";
    position: relative;
    width: 100%;
}
h1,h2,h3,h4,h5,h6{
    font-family:'Microsoft YaHei';
    color:#202020;
}
p{
    font-family:'Microsoft YaHei';
    color:#777777;
    line-height:26px;
    font-size:14px;
    letter-spacing:0.3px;
}
ul li ,ul li a,
ol li,ol li a{
    font-family:'Microsoft YaHei';
    color:#666666;
    font-size:14px;
    line-height:26px;
}
a:hover,
a:focus{
    text-decoration:none;
    outline:none;
}
a{
    cursor: pointer;
}
.pattern::after {
    background-image: url("../images/pattern.png");
    background-repeat: repeat;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.main-content.menu-slide {
    padding-left: 40px;
}
.main-content-area {
    float: left;
    width: 100%;
}
.main-content-area > .row {
    margin: 0 -10px;
}
.main-content-area > .row > div {
    padding: 0 10px;
}
.widget.blank {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
}
.widget .row {
    margin: 0 -10px;
}
.widget .row > div {
    padding: 0 10px;
}
.widget {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #e1e1e1;
    float: left;
    margin-top: 20px;
    position: relative;
    width: 100%;
    z-index: 0;
}
.widget-title.no-padding {
    padding: 0;
}
.billing-sec .widget-title {
    margin-bottom: 20px;
}
.widget-title {
    border-bottom: 1px solid #e1e1e1;
    float: left;
    padding: 20px;
    width: 100%;
}
.widget-title > h3 {
    color: #383838;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 18px;
    font-weight: normal;
    line-height: 29px;
    margin: 0 15px 0 0;
}
.widget-title > span {
    color: #707070;
    float: left;
    font-size: 13px;
    margin-top: 7px;
}
.widget-controls {
    float: right;
}
.widget-controls > span {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #e1e1e1;
    color: #b8b8b8;
    cursor: pointer;
    float: left;
    font-size: 12px;
    height: 29px;
    line-height: 28px;
    margin-right: -1px;
    text-align: center;
    width: 29px;
}
.widget.with-padding {
    padding: 30px;
}
.with-padding {
    float: left;
    padding: 30px;
    width: 100%;
}
.widget.color-panel .widget-title h3 {
    color: #ffffff;
}
.widget.color-panel .widget-title h3 {
    color: #ffffff;
}
.widget.color-panel {
    border: medium none;
}
.widget.color-panel .widget-title {
    border-color: #fff;
}
.widget.color-panel * {
    color: #ffffff;
}
.widget.color-panel .widget-title .widget-controls span > i {
    color: #838383;
}





/* Weather Widget */
.weather-widget {
    background-image: url("http://placehold.it/700x467");
    float: left;
    min-height: 300px;
    text-align: center;
    width: 100%;
    z-index: 0;
    background-size: cover;
    position: relative;
}
.weather-widget canvas {
    display: inline-block;
    margin-top: 70px;
}
.weather-widget::after {
    background: #000000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.3;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.weather-infos {
    float: left;
    margin-top: 70px;
    padding: 0 40px;
    position: relative;
    text-align: left;
    width: 100%;
}
.weather-tem {
    color: #ffffff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 31px;
    margin-right: 33px;
    position: relative;
}
.weather-tem::before {
    border: 2px solid #fff;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    content: "";
    height: 10px;
    position: absolute;
    right: -13px;
    top: -3px;
    width: 10px;
}
.weather-infos > h3 {
    color: #ffffff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 20px;
    margin: 0;
}
.weather-infos > h3 > i {
    display: table;
    font-size: 13px;
    font-style: normal;
    margin-top: 6px;
}
.weather-date {
    height: 60px;
    position: absolute;
    right: 0;
    width: 60px;
}
.weather-date > span {
    color: #fff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    margin: 10px 0;
    text-align: center;
    width: 100%;
}
.weather-date > span > strong {
    float: left;
    font-size: 20px;
    letter-spacing: -1px;
    line-height: 13px;
    margin-top: 3px;
    width: 100%;
}



/* Message Dropdown */
.message-list {
    float: left;
}
.custom-dropdowns {
    float: left;
    margin: 9px 0 0 50px;
    padding: 0;
    position: relative;
}

.custom-dropdowns .dropdown {
    float: left;
    margin-top: 11px;
}

.custom-dropdowns .dropdown > a {
    color: #7f7f7f;
    cursor: pointer;
    float: left;
    font-size: 17px;
    line-height: 19px;
    margin-right: 0;
    padding-right: 35px;
    position: relative;
}
.custom-dropdowns .dropdown > a > span {
    color: #fff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    height: 19px;
    line-height: 17px;
    margin-right: 15px;
    position: absolute;
    right: 8px;
    text-align: center;
    top: -10px;
    width: 19px;
    
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
}
.custom-dropdown select {
    border: medium none;
    color: #888888;
    float: left;
    font-family: "Microsoft YaHei";
    padding-left: 6px;
    width: auto;
}
.account-form p input {
    float: left;
}
.drop-list {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #e0e0e0;
    margin-top: 22px;
    opacity: 0;
    filter: alpha(opacity=0);

    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);

    position: absolute;
    right: 0;
    top: 100%;
    width: 260px;
}
.drop-list.active {
    opacity: 1;
    -khtml-opacity: 1;

     -webkit-transform: scale(1);
     -moz-transform: scale(1);
     -ms-transform: scale(1);
     -o-transform: scale(1);
     transform: scale(1);

}
.notification.drop-list {
    float: none;
    margin-top: 22px;
    width: 260px;
}
.drop-list:before {
    background: none repeat scroll 0 0 #fff;
    border-left: 1px solid #e0e0e0;
    border-top: 1px solid #e0e0e0;
    content: "";
    height: 12px;
    right: 36px;
    position: absolute;
    top: -7px;
    
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    
    width: 12px;
}
.drop-list > span {
    border-bottom: 1px solid #e0e0e0;
    color: #777777;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    letter-spacing: 0.3px;
    padding: 13px;
    text-align: center;
    width: 100%;
}
.drop-list > ul {
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.drop-list > ul > li {
    border-bottom: 1px solid #e0e0e0;
    float: left;
    min-height: 71px;
    padding: 15px;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
    width: 100%;
}
.drop-list > ul > li:hover {
    background: none repeat scroll 0 0 #fafafa;
}
.drop-list > ul > li > a {
    color: #737373;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    letter-spacing: 0.3px;
    line-height: 17px;
    padding-left: 55px;
    position: relative;
    width: 100%;
}
.drop-list > ul > li > a > i {
    color: #000000;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    font-style: normal;
    margin-bottom: 4px;
    width: 100%;
}
.drop-list > ul > li > a span {
    
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    float: left;
    height: 40px;
    left: 0;
    margin-right: 10px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 40px;
}
.quick-notify-section.custom-dropdowns > li {
    float: left;
    list-style: outside none none;
    margin-right: 6px;
}
.drop-list > ul > li > a span > i {
    color: #ffffff;
    float: left;
    font-size: 18px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 40px;
}
.drop-list > ul > li > a h6 {
    color: #a7a7a7;
    display: block;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 0.3px;
    margin: 5px 0 0;
    width: 100%;
}
.drop-list > ul > li > a .status {
    -webkit-border-radius: 0 0 0 3px;
    -moz-border-radius: 0 0 0 3px;
    -ms-border-radius: 0 0 0 3px;
    -o-border-radius: 0 0 0 3px;
    border-radius: 0 0 0 3px;

    color: #fff;
    font-size: 10px;
    line-height: 12px;
    margin-top: -9px;
    padding: 3px 4px;
    position: absolute;
    right: -15px;
    text-transform: uppercase;
    top: -7px;
    width: auto;
}
.drop-list > a {
    color: #333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    letter-spacing: 0.3px;
    padding: 13px 0;
    text-align: center;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
    width: 100%;
}
.drop-list > ul > li .progress {
    background: #ededed none repeat scroll 0 0;
    border: medium none;
    
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;

    color: transparent;
    float: left;
    height: 3px;
    margin: 16px 0 0;
    width: 100%;
}
.drop-list > ul > li .progress .progress-bar {
    border: medium none;
    
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    
    color: transparent;
}
.quick-notify-section > li > span {
    background: #4e5267 none repeat scroll 0 0;
    float: left;
    height: 27px;
    width: 80px;
    cursor: pointer;
}
.quick-notify-section > li > span > i {
    color: #b9b9b9;
    float: left;
    font-size: 13px;
    line-height: 25px;
    text-align: center;
    width: 50%;
}
.quick-notify-section > li > span > strong {
    color: #ffffff;
    float: left;
    font-size: 13px;
    height: 27px;
    text-align: center;
    width: 50%;
}


/* Header */
header.simple-normal {
    float: left;
    position: fixed;
    width: 100%;
    z-index: 1;
}
body.modal-open header {
    z-index: 0;
}
.top-bar {
    background: #4E97D9 none repeat scroll 0 0;
    float: left;
    padding-right: 19px;
    width: 100%;
}
.logo {
    float: left;
    margin-right: 70px;
    padding: 18px 1px 18px 50px;
}
.logo > a {
    color: #ffffff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 22px;
    font-weight: 500;
    padding: 0;
}
.logo > a > i {
    color: #afafaf;
    margin-right: 6px;
}

.menu-action {
    height: 13px;
    left: 50%;
    margin-left: -10px;
    position: absolute;
    top: 50%;
    
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);

    width: 20px;
}
.menu-options.active > span {
    margin-left: -7px;
}
.menu-action::after {
    background: #aaa9a9 none repeat scroll 0 0;
    
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;

    bottom: -2px;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    width: 100%;
}
.menu-options.active .menu-action::after {
    bottom: 6px;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.menu-action::before {
    background: #aaa9a9 none repeat scroll 0 0;
    
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;

    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    top: -2px;
    width: 100%;
}
.menu-options.active .menu-action::before {
    top: 4px;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.menu-action > i {
    height: 3px;
    left: 0;
    position: absolute;
    top: 50%;
    
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);

    width: 20px;
}

.menu-action > i::before {
    background: #aaa9a9 none repeat scroll 0 0;
    
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;

    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.menu-options.active .menu-action > i::before {
    opacity: 0;

    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
}
.menu-options.active > span::before, .menu-options.active > span::after {
    background: #ffffff none repeat scroll 0 0;
}
.menu-options {
    color: #afafaf;
    cursor: pointer;
    float: left;
    font-size: 22px;
    height: 38px;
    left: 0;
    line-height: 25px;
    margin-top: 15px;
    position: relative;
    text-align: center;
    width: 41px;
}
.menu-options.active {
    z-index: 2147483647;
}

.search-dashboard {
    float: left;
    margin-bottom: 11px;
    margin-left: 80px;
    margin-top: 11px;
}
.search-dashboard > form {
    background: #46495b none repeat scroll 0 0;
    
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;

    float: left;
    height: 44px;
    position: relative;
    width: 244px;
}
.search-dashboard > form:hover {
    background: #56596b none repeat scroll 0 0;
}
.search-dashboard > form > input {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: #e7e7e7;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    padding: 12px 50px 12px 35px;
}
.search-dashboard > form > button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: #a7a7a7;
    padding: 12px 22px;
    position: absolute;
    right: 0;
    top: 0;
}
.custom-dropdowns {
    float: left;
    padding: 0;
    position: relative;
}


.name-area {
    float: right;
    margin-right: 30px;
    padding: 2px 0;
}
.name-area > a {
    color: #94979f;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    font-weight: normal;
}
.name-area > a > img {
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    float: left;
    margin-right: 17px;
    margin-top: 11px;
    width: 41px;
}
.name-area > a strong {
    color: #94979f;
    float: left;
    font-weight: 500;
    margin: 20px 0;
}
.open-panel, .full-screen-btn {
    background: #5a5e71 none repeat scroll 0 0;
    color: #c1c3cd;
    cursor: pointer;
    float: right;
    font-size: 16px;
    height: 28px;
    line-height: 28px;
    margin: 19px 0;
    text-align: center;
    width: 28px;
    margin-right: 3px;
}
.full-screen-btn > i {
    font-size: 13px;
    float: left;
    text-align: center;
    width: 100%;
    line-height: 28px;
}
.side-menu-sec {
    background: #262D3A;
    height: 100%;
    left: 0;
    position: fixed;
    top: 64px;
    width: 200px !important;
}
.quick-report-side {
    float: left;
    padding: 30px 27px;
    width: 100%;
}
.quick-report-side > span {
    color: #a6a8b0;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    width: 100%;
}
.quick-report-side > ul {
    display: inline;
    list-style: outside none none;
    margin: 0 -1px;
    padding: 0;
}
.quick-report-side > ul > li {
    float: left;
    padding: 0 1px;
    width: 33.334%;
}
.quick-report-side > ul > li > div {
    background: #555a6d none repeat scroll 0 0;
    float: left;
    margin-top: 16px;
    padding: 11px 0 16px;
    text-align: center;
    width: 100%;
}
.quick-report-side div > strong {
    color: #ffffff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 17px;
    font-weight: 500;
    width: 100%;
}
.quick-report-side div > span {
    color: #dddddd;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    line-height: 12px;
    width: 100%;
}
.side-menus {
    float: left;
    margin-bottom: 60px;
    width: 100%;
}
.side-menus > span {
    color: #a6a8b0;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    margin-bottom: 20px;
    padding: 0 27px;
    width: 100%;
}
.side-menus nav {
    float: left;
    width: 100%;
}
.side-menus nav > ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.side-menus nav > ul > li {
    float: left;
    position: relative;
    width: 100%;
}
.side-menus nav > ul > li > a {
    color: #9DACC2;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    padding: 11px 27px;
    width: 100%;
}
.side-menus nav > ul > li > a > i {
    color: #c5c5c5;
    float: left;
    font-size: 13px;
    line-height: 24px;
    margin-right: 4px;
    width: 20px;
}
.side-menus nav > ul > li > a > span {
    display: block;
    width: 100%;
}
.side-menus ul li a span i.badge, .side-menus ul li a i.badge {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;

    float: right;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    margin-top: 5px;
}
.side-menus nav > ul > li.menu-item-has-children > ul {
    display: none;
    float: left;
    list-style-type: none;	
    margin: 0;
    width: 100%;
}
.side-menus nav > ul > li.menu-item-has-children > ul > li {
    float: left;
    width: 100%;
	height:48px;	
}
.side-menus nav > ul > li.menu-item-has-children > ul > li > a:hover {
    background: #3B4458;
}
.side-menus nav > ul > li.menu-item-has-children > ul > li > a {
    color: #9DACC2;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    position: relative;
    width: 100%;
	padding-left:42px;
	height:48px;
	line-height:48px;	
}
.side-menus nav > ul > li:hover > a {
    background: #3b3f51 none repeat scroll 0 0;
}
.side-menus nav > ul > li.menu-item-has-children.active > a {
    background: #161B1F none repeat scroll 0 0;
    padding-bottom: 0;
	height:48px;	
}
.side-menus nav > ul > li.active > a {
    background: #3b3f51 none repeat scroll 0 0;
}
.side-menus > span.footer-line {
    margin-bottom: 60px;
    margin-top: 30px;
}
.side-menus > span.footer-line a {
    color: #dfdfdf;
}
.side-menu-sec.slide-out {
    left: -266px;
}


/* Live Chat Sec */
#live-chat hr {
    background: #e9e9e9;
    border: 0;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 1px;
    margin: 0;
    min-height: 1px;
}
#live-chat input[type="text"] {
    border: 1px solid #CCCCCC;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    letter-spacing: 0.35px;
    outline: medium none;
    padding: 8px;
    width: 100%;
    
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px; 
}

#live-chat p {
    color: #555555;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    letter-spacing: 0.3px;
    line-height: 24px;
    margin: 0;
}
.chat > img {
    float: left;
    padding: 20px 0 0;
}
.chat form {
    float: left;
    width: 100%;
}


/* ---------- LIVE-CHAT ---------- */

#live-chat {
    bottom: 0;
    font-size: 12px;
    position: fixed;
    right: 24px;
    width: 300px;
    z-index: 99;
    
    -webkit-box-shadow: 0 4px 4px #797979;
    -moz-box-shadow: 0 4px 4px #797979;
    -ms-box-shadow: 0 4px 4px #797979;
    -o-box-shadow: 0 4px 4px #797979;
    box-shadow: 0 4px 4px #797979;
}
#live-chat .chat-header {
    border: medium none;
    background: #3b3f51;
    
    color: #ffffff;
    cursor: pointer;
    float: left;
    padding: 7px 24px;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
    width: 100%;
}
#live-chat .chat-header:hover {
    background: none repeat scroll 0 0 #333333;
}

#live-chat h4:before {
    background: #A6D87A;
    content: "";
    display: inline-block;
    height: 8px;
    margin: 0 8px 0 0;
    width: 8px;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
#live-chat h4 {
    color: #fff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

#live-chat h5 {
    color: #333333;
    font-family: "Microsoft YaHei";
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 10px;
    margin-bottom: 15px;
}

#live-chat form {
    padding: 15px;
}

#live-chat input[type="text"] {
    border: 1px solid #ccc;
    
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;
    
    font-family: "Microsoft YaHei";
    letter-spacing: 0.3px;
    outline: medium none;
    padding: 8px 18px;
    width: 100%;
}

.chat-message-counter {
    background: #e62727;
    border: 1px solid #fff;
    display: none;
    font-size: 12px;
    font-weight: bold;
    height: 28px;
    left: 0;
    line-height: 28px;
    margin: -15px 0 0 -15px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 28px;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.chat-close {
    background: none repeat scroll 0 0 #1B2126;
    color: #FFFFFF;
    display: block;
    float: right;
    font-size: 22px;
    height: 20px;
    line-height: 18px;
    margin: 9px 0 0;
    text-align: center;
    width: 20px;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.chat-close:hover {
    color: #FFFFFF;
    text-decoration: none;
}
.chat {
    background: none repeat scroll 0 0 #ffffff;
    float: left;
    overflow: hidden;
    width: 100%;
}
.chat-history {
    float: left;
    height: 252px;
    padding: 0;
    width: 100% !important;
}
.chat-message-content {
    float: left;
    width: 100%;
}
.chat-message {
    border-bottom: 1px dashed #d8dcdc;
    float: left;
    padding: 20px 20px 20px 73px;
    position: relative;
    width: 100%;
}
.chat-message img {
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    border: 0 none;
    float: none;
    left: 20px;
    max-width: 100%;
    position: absolute;
    top: 20px;
}
.chat-time {
    float: right;
    font-family: "Microsoft YaHei";
    font-size: 11px;
}
.chat-feedback {
    background: none repeat scroll 0 0 #fff;
    border-bottom: 1px solid #e8ecec;
    
    -webkit-box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.1);
    box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.1);
    
    float: left;
    font-style: italic;
    margin: 0 0 0 80px;
    padding: 5px 15px;
    width: 100%;
}
.main-content::before {
    background: #000000 none repeat scroll 0 0;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    content: "";
    height: 400px;
    left: 50%;
    opacity: 0.2;
    position: fixed;
    top: 50%;
    
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    
    width: 400px;
    z-index: 2;
    opacity: 0;
    display: none;
}
.main-content {
    float: left;
    height: 100%;
    left: 0;
    padding: 40px 40px 40px 306px;
    top: 0;
    position: relative;
    width: 100%;
}
.main-content.active::before {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;

    height: 100%;
    opacity: 0.2;
    width: 100%;
    display: block;
}
.panel-content {
    float: left;
    width: 100%;
}
.main-title-sec {
    float: left;
    width: 100%;
}
.heading-profile {
    float: left;
    width: 100%;
}
.heading-profile > h2 {
    color: #3f3f3f;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 28px;
    font-weight: normal;
    margin: 0 0 5px;
    width: 100%;
}
.heading-profile > span {
    color: #8a8a8a;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    width: 100%;
}
.quick-btn-title {
    float: right;
}
.quick-btn-title > a {
    color: #9a9a9a;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    margin: 0 10px;
    padding: 10px;
}
.quick-btn-title > a > i {
    float: left;
    line-height: 21px;
    margin-right: 8px;
}


/*!
 * Stylesheet for the Date Range Picker, for use with Bootstrap 3.x
 *
 * Copyright 2013 Dan Grossman ( http://www.dangrossman.info )
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Built for http://www.improvely.com
 */

 .daterangepicker.dropdown-menu {
  max-width: none;
  z-index: 3000;
}

.daterangepicker.opensleft .ranges, .daterangepicker.opensleft .calendar {
  float: left;
  margin: 4px;
}

.daterangepicker.opensright .ranges, .daterangepicker.opensright .calendar {
  float: right;
  margin: 4px;
}

.daterangepicker .ranges {
  width: 160px;
  text-align: left;
}

.daterangepicker .ranges .range_inputs>div {
  float: left;
}

.daterangepicker .ranges .range_inputs>div:nth-child(2) {
  padding-left: 11px;
}

.daterangepicker .calendar {
  display: none;
  max-width: 270px;
}

.daterangepicker .calendar th, .daterangepicker .calendar td {
  font-family: "Microsoft YaHei";
  white-space: nowrap;
  text-align: center;
  min-width: 32px;
}

.daterangepicker .ranges label {
  color: #333;
  display: block;
  font-size: 11px;
  font-weight: normal;
  height: 20px;
  line-height: 20px;
  margin-bottom: 2px;
  text-shadow: #fff 1px 1px 0px;
  text-transform: uppercase;
  width: 74px;
}

.daterangepicker .ranges input {
  font-size: 11px;
}

.daterangepicker .ranges .input-mini {
    background-color: #FAFAFA;
    border: 1px solid #CCCCCC;
    color: #555555;
    display: block;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    font-weight: 600;
    height: 30px;
    line-height: 30px;
    margin: 0 0 10px;
    padding: 0 6px;
    vertical-align: middle;
    width: 74px;
}

.daterangepicker .ranges ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.daterangepicker .ranges li {
    border: 1px solid #e0e0e0;
    
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    
    color: #a0a0a0;
    cursor: pointer;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    margin-bottom: 8px;
    padding: 3px 12px;
    letter-spacing: 0.3px;
    
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
    background: none repeat scroll 0 0 #4a7dfe;
    border: 1px solid #4a7dfe;
    color: #FFFFFF;
}
.calendar th > .fa {
    font-family: "Microsoft YaHei";
}
.calendar th > .glyphicon:before {
    display: none;
}
.daterangepicker .calendar-date {
  border: 1px solid #ddd;
  padding: 4px;
  
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;

  background: #fff;
}

.daterangepicker .calendar-time {
  text-align: center;
  margin: 8px auto 0 auto;
  line-height: 30px;
}

.daterangepicker {
    background: none repeat scroll 0 0 #fff;
    
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;

    left: 20px;
    margin-top: 1px;
    padding: 4px;
    position: absolute;
    top: 100px;
}

.daterangepicker.opensleft:before {
  position: absolute;
  top: -7px;
  right: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.daterangepicker.opensleft:after {
  position: absolute;
  top: -6px;
  right: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
  content: '';
}

.daterangepicker.opensright:before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.daterangepicker.opensright:after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #fff;
  border-left: 6px solid transparent;
  content: '';
}

.daterangepicker table {
  width: 100%;
  margin: 0;
}

.daterangepicker td, .daterangepicker th {
  text-align: center;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
}

.daterangepicker td.off {
  color: #999;
}

.daterangepicker td.disabled {
  color: #999;
}

.daterangepicker td.available:hover, .daterangepicker th.available:hover {
  background: #eee;
}

.daterangepicker td.in-range {
  background: #ebf4f8;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #357ebd;
  border-color: #3071a9;
  color: #fff;
}

.daterangepicker td.week, .daterangepicker th.week {
  font-size: 80%;
  color: #ccc;
}

.daterangepicker select.monthselect, .daterangepicker select.yearselect {
  font-size: 12px;
  padding: 1px;
  height: auto;
  margin: 0;
  cursor: default;
}

.daterangepicker select.monthselect {
  margin-right: 2%;
  width: 56%;
}

.daterangepicker select.yearselect {
  width: 40%;
}

.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.ampmselect {
  width: 50px;
  margin-bottom: 0;
}
.date-range {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #e8ecec;
    
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;

    color: #727272;
    cursor: pointer;
    float: right;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.3px;
    padding: 10px 25px;
    text-align: center;
    width: auto;
}
.date-range > i {
    color: #a8a8a8;
    margin-right: 10px;
}
.date-range > b {
    color: #969696;
    margin-left: 8px;
}

.breadcrumbs {
    background: #f5f5f5 none repeat scroll 0 0;
    float: left;
    list-style: outside none none;
    margin: 23px 0 0;
    padding: 3px 30px;
    width: 100%;
}
.breadcrumbs > li {
    color: #7d7d7d;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    margin-right: 25px;
    padding-right: 25px;
    position: relative;
}
.breadcrumbs > li::before {
    color: #ababab;
    content: "/";
    font-family: "Microsoft YaHei";
    font-size: 12px;
    position: absolute;
    right: 0;
    top: 0;
}
.breadcrumbs > li > a {
    color: #7d7d7d;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    letter-spacing: 0.3px;
}
.breadcrumbs > li:last-child::before {
    display: none;
}
.breadcrumbs > li:last-child {
    margin: 0;
    padding: 0;
}

.quick-report-widget {
    float: left;
    text-align: center;
    width: 100%;
}
.quick-report-widget > span {
    color: #989898;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    margin-top: 20px;
    width: 100%;
}
.quick-report-widget > h4 {
    color: #404040;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 27px;
    letter-spacing: -0.3px;
    margin: 7px 0 12px;
    width: 100%;
}
.quick-report-widget > h5 {
    background: #f6f6f6 none repeat scroll 0 0;
    border-top: 1px solid #e1e1e1;
    color: #727272;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.4px;
    margin: 0;
    padding: 18px 0;
    width: 100%;
}
.quick-report-widget > h5 {
    background: #f6f6f6 none repeat scroll 0 0;
    border-top: 1px solid #e1e1e1;
    color: #727272;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.4px;
    margin: -16px 0 0;
    padding: 23px 0 18px;
    width: 100%;
}
.quick-report-widget > i {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    color: #ffffff;
    display: inline-block;
    float: none;
    height: 32px;
    line-height: 32px;
    text-align: center;
    width: 32px;
}

.widget.loading-wait::before {
    opacity: 0.8;
    display: block;
}
.widget.expand-this {
    height: 100%;
    left: 0;
    margin: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2147483647;
}
.widget::before {
    background-color: #ffffff;
    background-image: url("../images/loader.gif");
    background-position: center center;
    background-repeat: no-repeat;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 9;


    -webkit-transition:all 0.4s ease 0s;
    -moz-transition:all 0.4s ease 0s;
    -ms-transition:all 0.4s ease 0s;
    -o-transition:all 0.4s ease 0s;
    transition:all 0.4s ease 0s;
    display: none;
}



.rickshaw_graph {
    float: left;
    overflow: hidden;
    width: 100%;
}

.rickshaw_graph .detail {
    pointer-events: none;
    position: absolute;
    top: 0;
    z-index: 2;
    background: rgba(0, 0, 0, 0.1);
    bottom: 0;
    width: 1px;
    transition: opacity 0.25s linear;
    -moz-transition: opacity 0.25s linear;
    -o-transition: opacity 0.25s linear;
    -webkit-transition: opacity 0.25s linear;
}
.rickshaw_graph .detail.inactive {
    opacity: 0;
}
.rickshaw_graph .detail .item.active {
    opacity: 1;
}
.rickshaw_graph .detail .x_label {
    font-family: "Microsoft YaHei";

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    padding: 6px;
    opacity: 0.5;
    border: 1px solid #e0e0e0;
    font-size: 12px;
    position: absolute;
    background: white;
    white-space: nowrap;
}
.rickshaw_graph .detail .x_label.left {
    left: 0;
}
.rickshaw_graph .detail .x_label.right {
    right: 0;
}
.rickshaw_graph .detail .item {
    position: absolute;
    z-index: 2;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    padding: 0.25em;
    font-size: 12px;
    font-family: "Microsoft YaHei";
    opacity: 0;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    border: 1px solid rgba(0, 0, 0, 0.4);
    margin-left: 1em;
    margin-right: 1em;
    margin-top: -1em;
    white-space: nowrap;
}
.rickshaw_graph .detail .item.left {
    left: 0;
}
.rickshaw_graph .detail .item.right {
    right: 0;
}
.rickshaw_graph .detail .item.active {
    opacity: 1;
    background: rgba(0, 0, 0, 0.8);
}
.rickshaw_graph .detail .item:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;

    content: "";

    border: 5px solid transparent;
}
.rickshaw_graph .detail .item.left:after {
    top: 1em;
    left: -5px;
    margin-top: -5px;
    border-right-color: rgba(0, 0, 0, 0.8);
    border-left-width: 0;
}
.rickshaw_graph .detail .item.right:after {
    top: 1em;
    right: -5px;
    margin-top: -5px;
    border-left-color: rgba(0, 0, 0, 0.8);
    border-right-width: 0;
}
.rickshaw_graph .detail .dot {
    width: 4px;
    height: 4px;
    margin-left: -3px;
    margin-top: -3.5px;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    position: absolute;
    
    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
    -ms-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
    -o-box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);

    box-sizing: content-box;
    -moz-box-sizing: content-box;
    background: white;
    border-width: 2px;
    border-style: solid;
    display: none;
    background-clip: padding-box;
}
.rickshaw_graph .detail .dot.active {
    display: block;
}
/* graph */

.rickshaw_graph {
    position: relative;
}
.rickshaw_graph svg {
    display: block; 
    overflow: hidden;
}

/* ticks */

.rickshaw_graph .x_tick {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0px;
    border-left: 1px dotted rgba(0, 0, 0, 0.2);
    pointer-events: none;
}
.rickshaw_graph .x_tick .title {
    position: absolute;
    font-size: 12px;
    font-family: "Microsoft YaHei";
    opacity: 0.5;
    white-space: nowrap;
    margin-left: 3px;
    bottom: 1px;
}

/* annotations */

.rickshaw_annotation_timeline {
    height: 1px;
    border-top: 1px solid #e0e0e0;
    margin-top: 10px;
    position: relative;
}
.rickshaw_annotation_timeline .annotation {
    position: absolute;
    height: 6px;
    width: 6px;
    margin-left: -2px;
    top: -3px;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    background-color: rgba(0, 0, 0, 0.25);
}
.rickshaw_graph .annotation_line {
    position: absolute;
    top: 0;
    bottom: -6px;
    width: 0px;
    border-left: 2px solid rgba(0, 0, 0, 0.3);
    display: none;
}
.rickshaw_graph .annotation_line.active {
    display: block;
}

.rickshaw_graph .annotation_range {
        background: rgba(0, 0, 0, 0.1);
        display: none;
        position: absolute;
        top: 0;
        bottom: -6px;
}
.rickshaw_graph .annotation_range.active {
        display: block;
}
.rickshaw_graph .annotation_range.active.offscreen {
        display: none;
}

.rickshaw_annotation_timeline .annotation .content {
    background: white;
    color: black;
    opacity: 0.9;
    padding: 5px 5px;

    -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
    -ms-box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
    -o-box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.8);

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    position: relative;
    z-index: 20;
    font-size: 12px;
    padding: 6px 8px 8px;
    top: 18px;
    left: -11px;
    width: 160px;
    display: none;
    cursor: pointer;
}
.rickshaw_annotation_timeline .annotation .content:before {
    content: "\25b2";
    position: absolute;
    top: -11px;
    color: white;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.8);
}
.rickshaw_annotation_timeline .annotation.active,
.rickshaw_annotation_timeline .annotation:hover {
    background-color: rgba(0, 0, 0, 0.8);
    cursor: none;
}
.rickshaw_annotation_timeline .annotation .content:hover {
    z-index: 50;
}
.rickshaw_annotation_timeline .annotation.active .content {
    display: block;
}
.rickshaw_annotation_timeline .annotation:hover .content {
    display: block;
    z-index: 50;
}
.rickshaw_graph .y_axis,
.rickshaw_graph  .x_axis_d3 {
    fill: none;
}
.rickshaw_graph .y_ticks .tick line,
.rickshaw_graph .x_ticks_d3 .tick {
    stroke: rgba(0, 0, 0, 0.16);
    stroke-width: 2px;
    shape-rendering: crisp-edges;
    pointer-events: none;
}
.rickshaw_graph .y_grid .tick,
.rickshaw_graph .x_grid_d3 .tick {
    z-index: -1;
    stroke: rgba(0, 0, 0, 0.20);
    stroke-width: 1px;
    stroke-dasharray: 1 1;
}
.rickshaw_graph .y_grid .tick[data-y-value="0"] {
    stroke-dasharray: 1 0;
}
.rickshaw_graph .y_grid path,
.rickshaw_graph .x_grid_d3 path  {
    fill: none;
    stroke: none;
}
.rickshaw_graph .y_ticks path,
.rickshaw_graph .x_ticks_d3 path {
    fill: none;
    stroke: #808080;
}
.rickshaw_graph .y_ticks text,
.rickshaw_graph .x_ticks_d3 text {
    opacity: 0.5;
    font-size: 12px;
    pointer-events: none;
}
.rickshaw_graph .x_tick.glow .title,
.rickshaw_graph .y_ticks.glow text {
    fill: black;
    color: black;
    text-shadow: 
        -1px 1px 0 rgba(255, 255, 255, 0.1),
        1px -1px 0 rgba(255, 255, 255, 0.1),
        1px 1px 0 rgba(255, 255, 255, 0.1),
        0px 1px 0 rgba(255, 255, 255, 0.1),
        0px -1px 0 rgba(255, 255, 255, 0.1),
        1px 0px 0 rgba(255, 255, 255, 0.1),
        -1px 0px 0 rgba(255, 255, 255, 0.1),
        -1px -1px 0 rgba(255, 255, 255, 0.1);
}
.rickshaw_graph .x_tick.inverse .title,
.rickshaw_graph .y_ticks.inverse text {
    fill: white;
    color: white;
    text-shadow: 
        -1px 1px 0 rgba(0, 0, 0, 0.8),
        1px -1px 0 rgba(0, 0, 0, 0.8),
        1px 1px 0 rgba(0, 0, 0, 0.8),
        0px 1px 0 rgba(0, 0, 0, 0.8),
        0px -1px 0 rgba(0, 0, 0, 0.8),
        1px 0px 0 rgba(0, 0, 0, 0.8),
        -1px 0px 0 rgba(0, 0, 0, 0.8),
        -1px -1px 0 rgba(0, 0, 0, 0.8);
}
.rickshaw_legend {
    font-family: "Microsoft YaHei";
    font-size: 12px;
    color: white;
    background: #404040;
    display: inline-block;
    padding: 12px 5px; 

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    position: relative;
}
.rickshaw_legend:hover {
    z-index: 10;
}
.rickshaw_legend .swatch {
    width: 10px;
    height: 10px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}
.rickshaw_legend .line {
    clear: both;
    line-height: 140%;
    padding-right: 15px;
}
.rickshaw_legend .line .swatch {
    display: inline-block;
    margin-right: 3px;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

}
.rickshaw_legend .label {
    margin: 0;
    white-space: nowrap;
    display: inline;
    font-size: inherit;
    background-color: transparent;
    color: inherit;
    font-weight: normal;
    line-height: normal;
    padding: 0px;
    text-shadow: none;
}
.rickshaw_legend .action:hover {
    opacity: 0.6;
}
.rickshaw_legend .action {
    margin-right: 0.2em;
    font-size: 10px;
    opacity: 0.2;
    cursor: pointer;
    font-size: 14px;
}
.rickshaw_legend .line.disabled {
    opacity: 0.4;
}
.rickshaw_legend ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin: 2px;
    cursor: pointer;
}
.rickshaw_legend li {
    padding: 0 0 0 2px;
    min-width: 80px;
    white-space: nowrap;
}
.rickshaw_legend li:hover {
    background: rgba(255, 255, 255, 0.08);

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

}
.rickshaw_legend li:active {
    background: rgba(255, 255, 255, 0.2);

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

}
.statistic-chart {
    float: left;
    padding-top: 30px;
    width: 100%;
}
.server-status {
    float: left;
    width: 100%;
}
.server {
    float: left;
    margin-bottom: 40px;
    padding: 0 50px;
    width: 100%;
}
.server > p {
    color: #b8b8b8;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    margin: 0;
    width: auto;
}
.server > span {
    color: #7f7f7f;
    float: right;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    margin-left: 30px;
    position: relative;
}
.server > span > i {
    float: left;
    height: 14px;
    margin-right: 7px;
    margin-top: 3px;
    width: 14px;
}
.server > span.server1 > i{
    background: #474c60;
}
.server > span.server2 > i{
    background: #e6e6e6;
}


.widget.gray {
    background: #f6f6f6 none repeat scroll 0 0;
    border: medium none;
}
.quick-flat-chart {
    float: left;
    position: relative;
    width: 100%;
}
.quick-flat-chart > span {
    color: #414141;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 21px;
    padding-left: 30px;
    padding-top: 20px;
}
.quick-flat-chart > span > i {
    color: #8e8d8d;
    display: table;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    font-style: normal;
}
.quick-flat-chart > p {
    
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;

    color: #fff;
    float: right;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    line-height: 11px;
    margin-right: 30px;
    margin-top: 20px;
    padding: 10px 20px;
}
.graph-container {
    float: left;
    margin-top: 40px;
    padding: 0 30px;
    width: 100%;
}
.flat-chart-detail {
    background: #f5f5f5 none repeat scroll 0 0;
    float: left;
    margin-top: 30px;
    padding: 0 50px;
    width: 100%;
}
.flat-chart-detail p {
    color: #535353;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    margin: 0;
}
.flat-chart-detail li > span {
    color: #979797;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    line-height: 29px;
    width: 100%;
}
.flat-chart-detail > ul > li {
    float: left;
    padding: 20px 0;
    width: 50%;
}
.flat-chart-detail > ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}


.quick-all-report {
    float: left;
    padding: 35px 90px;
    text-align: center;
    width: 100%;
}
.quick-all {
    float: left;
    width: 100%;
}
.quick-all > h4 {
    color: #444444;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 21px;
    margin: 16px 0 0;
    width: 100%;
}
.quick-all > p {
    color: #444444;
    float: left;
    font-size: 14px;
    margin: 0;
    width: 100%;
}

/* Support Ticket */
.support-ticket-sec {
    float: left;
    padding: 30px 0 30px 40px;
    width: 100%;
}
.support-ticket {
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
}
.support-ticket > li {
    border-bottom: 1px solid #e8ecec;
    float: left;
    padding: 20px 50px 20px 0;
    width: 100%;
}v 
.support-ticket > li:first-child {
    padding-top: 0;
}
.support-ticket > li:last-child {
    border: medium none;
    padding-bottom: 0;
}
.tckt-status {
    float: left;
    width: 25%;
}
.tckt-number {
    float: left;
    width: 25%;
}
.ticket-info {
    float: left;
    width: 50%;
}
.tckt-status > span {
    
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    color: #fff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 8px;
    margin-bottom: 8px;
    padding: 6px 10px;
}
.tckt-status > i {
    color: #777777;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-style: normal;
    letter-spacing: 0.3px;
    line-height: 11px;
    margin-top: 3px;
    width: 100%;
}
.tckt-number > span {
    color: #555555;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    letter-spacing: 0.3px;
    line-height: 43px;
    width: 100%;
}
.ticket-info > a {
    color: #333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    letter-spacing: 0.3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.ticket-info > h6 {
    color: #929292;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.3px;
    margin: 5px 0 0;
    width: 100%;
}


/* Task Graph */
.task-graph {
    float: left;
    width: 100%;
}
.task-graph-chart {
    float: left;
    min-height: 100px;
    padding-left: 125px;
    position: relative;
    width: 100%;
}
.task-graph-chart .pie-colours {
    left: 40px;
    position: absolute;
    top: 30px;
}
.task-graph-chart > i {
    border-bottom: 1px solid #e8ecec;
    color: #555555;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.4px;
    margin-bottom: 13px;
    margin-top: 27px;
    padding-bottom: 9px;
    text-transform: uppercase;
    width: 100%;
}
.task-graph-chart > h3 {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 23px;
    font-weight: bold;
    line-height: 19px;
    margin: 0;
    width: 100%;
}
.task-graph > ul {
    float: left;
    list-style: outside none none;
    margin: 21px 0 50px;
    padding: 0;
    width: 100%;
}
.task-graph > ul > li {
    color: #777777;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-style: italic;
    letter-spacing: 0.3px;
    text-align: center;
    width: 33.3334%;
}
.task-graph > ul > li span {
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    margin-top: 3px;
    width: 100%;
}

/* Social Activity */
.social-activities {
    float: left;
    padding: 30px;
    width: 100%;
}
.social-activities > ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.social-activities > ul > li {
    float: left;
    margin-bottom: 21px;
    padding-left: 50px;
    position: relative;
    width: 33.333%;
}
.social-activities > ul > li > i {
    color: #fff;
    font-size: 14px;
    height: 35px;
    left: 0;
    line-height: 35px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 35px;
    
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
}
.social-activities h3 {
    color: #000000;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin: 0;
    width: 100%;
}
.social-activities span {
    color: #777777;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 9px;
    letter-spacing: 0.3px;
    line-height: 20px;
    width: 100%;
}
.social-activities a {
    background: none repeat scroll 0 0 #f5f5f5;
    border: 3px solid #eaeaea;
    
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    border-radius: 40px;
    
    
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;

    color: #2f2f2f;
    display: table;
    float: none;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    letter-spacing: 0.3px;
    margin: 0 auto;
    padding: 7px 24px;
}


/* My Profile Widget */
.my-profile-widget {
    float: left;
    width: 100%;
    text-align:center;
}
.profile-widget-head {
    background: #474c60 none repeat scroll 0 0;
    float: left;
    margin-bottom: 50px;
    padding: 30px 0 55px;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 0;
}
.profile-widget-head > h3 {
    color: #fff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 21px;
    font-weight: bold;
    letter-spacing: 0.3px;
    margin: 0;
    text-align: center;
    width: 100%;
}
.profile-widget-head > i {
    color: #ffffff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    font-style: normal;
    letter-spacing: 0.3px;
    margin-top: 6px;
    text-align: center;
    width: 100%;
}
.profile-widget-head > span > img {
    float: left;
    width: 70px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.profile-widget-head > span {
    border: 3px solid #fff;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    bottom: 0;
    left: 50%;
    margin-bottom: -35px;
    margin-left: -40px;
    overflow: hidden;
    position: absolute;
}
.my-profile-widget > h4 {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.3px;
    margin: 2px 0px 20px;
    text-align: center;
    width: 100%;
}
.my-profile-widget > span {
    -webkit-border-radius: 21px;
    -moz-border-radius: 21px;
    -ms-border-radius: 21px;
    -o-border-radius: 21px;
    border-radius: 21px;
    
    color: #fff;
    display: inline-block;
    float: none;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    letter-spacing: 0.3px;
    padding: 7px 16px;
}
.my-profile-widget > p {
    margin-top: 15px;
    padding: 0 22px;
    text-align: center;
}
.my-profile-widget > a {
    color: #a5a5a5;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 15px;
    font-weight: normal;
    letter-spacing: 0.3px;
    margin-bottom: 25px;
    margin-top: 8px;
    text-align: center;
    width: 100%;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
}
.my-profile-widget > .social-btns {
    float: left;
    margin: 0 auto 40px;
    text-align: center;
    width: 100%;
}
.my-profile-widget > .social-btns li {
    display: inline-block;
    float: none;
}
.my-profile-widget > span > i {
    margin-right: 7px;
}

/* Work Progress table */
.panel.work-progress-table {
    border: medium none;
    
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    
    
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;

    float: left;
    margin: 0;
    width: 100%;
}
.panel.work-progress-table > .panel-heading {
    background: none repeat scroll 0 0 #efefef;
    
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.3px;
    padding: 17px 30px 11px;
    width: 100%;
}
.work-progress-table > .panel-heading > i {
    color: #888888;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    font-style: normal;
    letter-spacing: 0.3px;
    line-height: 10px;
    margin-bottom: 10px;
    margin-top: 7px;
    width: 100%;
}
.panel-default > .panel-heading > .dropdown {
    float: right;
    margin-top: -42px;
}
.work-progress-table td .progress {
    background: none repeat scroll 0 0 #f3f3f3;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    
    height: 6px;
    margin: 7px 0 0;
    overflow: visible;
}
.work-progress-table td .progress > .progress-bar {
    background: #afafaf none repeat scroll 0 0;
    
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;

    position: relative;
}
.work-progress-table td .progress > .progress-bar > span {
    background: none repeat scroll 0 0 #8d8d8d;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    font-family: "Microsoft YaHei";
    font-size: 10px;
    height: 18px;
    line-height: 18px;
    margin-top: -9px;
    position: absolute;
    right: 0;
    top: 50%;
    width: 31px;
}
.work-progress-table .table td {
    padding: 15px 10px;
}
.work-progress-table .table td {
    font-family: "Microsoft YaHei";
    font-size: 13px;
    letter-spacing: 0.3px;
    padding: 15px 10px;
}

/* Social Btns */
.social-btns {
    float: right;
    list-style: outside none none;
    margin: -35px 0 0;
    padding: 0;
}
.social-btns > li {
    float: right;
    list-style: outside none none;
    margin-left: 1px;
}
.social-btns > li > a {
    float: left;
}
.social-btns > li > a > i {

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    color: #fff;
    float: left;
    font-size: 12px;
    height: 31px;
    line-height: 31px;
    text-align: center;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;

    width: 31px;
}
.social-btns > li > a > i.ti-facebook {
    background: none repeat scroll 0 0 #3b5998;
}
.social-btns > li > a > i.ti-google {
    background: none repeat scroll 0 0 #dd4b39;
}
.social-btns > li > a > i.ti-twitter {
    background: none repeat scroll 0 0 #439ed6;
}

.quick-report-widget.style2 {
    overflow: hidden;
    padding: 30px 40px;
    position: relative;
}
.quick-report-widget.style2.white > i {
    opacity: 0.04;
}
.quick-report-widget.style2 > i {
    bottom: 0;
    color: #000000;
    font-size: 90px;
    height: auto;
    line-height: 40px;
    margin: 0;
    opacity: 0.1;
    position: absolute;
    right: -10px;
    width: auto;
}
.quick-report-widget.style2 > span {
    color: #ffffff;
    margin: 0;
    text-align: left;
}
.quick-report-widget.style2 > h4 {
    color: #ffffff;
    text-align: left;
}
.quick-report-widget.style2 > h5 {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: #ffffff;
    font-size: 13px;
    margin: 11px 0 0;
    padding: 0;
    text-align: left;
}
.quick-report-widget.style2 > .progress {
    background: rgba(0, 0, 0, 0.15) none repeat scroll 0 0;
    
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;

    float: left;
    height: 4px;
    margin: 4px 0 0;
    width: 100%;
}
.quick-report-widget.style2 .progress-bar {
    background: #ffffff none repeat scroll 0 0;
    
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;

}

.welcome-message {
    float: left;
    padding: 40px 50px;
    position: relative;
    width: 100%;
}
.welcome-message h3 {
    color: #474343;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    font-weight: normal;
    line-height: 30px;
    margin: -10px 0 0;
    width: 100%;
}
.welcome-message h3 > a {
    color: #ff5f5f;
}
.welcome-message > p {
    color: #979797;
    float: left;
    font-size: 14px;
    margin: 0;
    width: 100%;
}
.welcome-message > p > a {
    color: #222222;
}
.close-message {
    color: #000000;
    cursor: pointer;
    font-size: 15px;
    opacity: 0.2;
    position: absolute;
    right: 14px;
    top: 7px;
}

.statistics-report {
    float: left;
    list-style: outside none none;
    margin: 30px 0 0;
    padding: 0;
    width: 100%;
}
.statistics-report > li {
    float: left;
    margin-right: 30px;
    width: auto;
}
.website-stats {
    float: left;
}
.statistics-report > li > h3 {
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 29px;
    font-weight: bold;
    letter-spacing: 0.3px;
    line-height: 21px;
    list-style: outside none none;
    margin: 0;
    width: 100%;
}
.statistics-report > li > h3 i {
    color: #777777;
    display: inline;
    float: right;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: 0.3px;
    line-height: 32px;
    margin-left: 10px;
    margin-top: 0;
}
.statistics-report > li > h6 {
    color: #777777;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.3px;
    line-height: 32px;
    margin: 0;
    width: 100%;
}
.statistics-report > li > h6 > i {
    color: #333;
    float: left;
    font-size: 17px;
    line-height: 32px;
    margin-right: 10px;
}
.statistics-report > li > h6 > span {
    font-size: 15px;
}


.status-progress-sec {
    float: left;
    margin-top: 10px;
    width: 100%;
}
.server-status > h3 {
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    letter-spacing: 0.3px;
    line-height: 12px;
    margin: 30px 0 25px;
    position: relative;
    width: 100%;
    z-index: 9;
}
.status-progress {
    float: left;
    margin-top: 20px;
    width: 100%;
}
.status-progress > span {
    color: #7d7d7d;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    font-weight: normal;
    letter-spacing: 0.3px;
    line-height: 10px;
    margin-bottom: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.status-progress > .progress {
    background: none repeat scroll 0 0 #e7e7e7;
    
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    
    float: left;
    height: 5px;
    width: 100%;
    margin:0px;
}
.status-progress > .progress .progress-bar {
    background: #a3a3a3 none repeat scroll 0 0;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    
}
.double-chart {
    float: left;
    padding: 30px 0 30px 30px;
    width: 100%;
}
canvas.website-stats {
    float: left;
    width: 100% !important;
}
.statistics-report > li > h6 > span {
    color: #ff604f;
    font-size: 15px;
}
.dounut-chart {
    float: left;
    padding: 60px 30px 30px;
    width: 100%;
}
.dounut-chart > span#sparkline {
    float: left;
    text-align: center;
    width: 100%;
}


/* Balance Widget */
.example-space > .row > div {
    float: left;
    margin-bottom: 20px;
    text-align: center;
    width: 16%;
}
.balance-widget > span.sparkpie {
    left: 27px;
    position: absolute;
    top: 30px;
}
.balance-widget {
    float: left;
    padding: 30px 30px 30px 85px;
    position: relative;
    width: 100%;
}
.balance-widget > h3 {
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0.3px;
    margin: 0 0 -3px;
    width: 100%;
}
.balance-widget > h2 {
    color: #555555;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 19px;
    font-weight: bold;
    letter-spacing: 0.3px;
    margin: 0;
    width: 100%;
}
.balance-widget > h2 > i {
    color: #777777;
    float: left;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    margin-bottom: 5px;
    margin-top: 14px;
    width: 100%;
}
.progress.w-tooltip {
    background: none repeat scroll 0 0 #e2e2e2;
    
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    
    float: left;
    height: 7px;
    margin: 0;
    overflow: visible;
    width: 100%;
}
.progress.w-tooltip > .progress-bar {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    border-radius: 0px;
    
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    
    position: relative;
}
.progress.w-tooltip > .progress-bar span {
    background: none repeat scroll 0 0 #8d8d8d;
    
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;

    bottom: 100%;
    font-family: "Microsoft YaHei";
    font-size: 10px;
    font-weight: 500;
    height: 20px;
    right: 0;
    letter-spacing: 0.3px;
    line-height: 18px;
    margin-bottom: 7px;
    margin-top: -9px;
    padding: 0 9px;
    position: absolute;
    width: auto;
}
.balance-widget .progress {
    margin-top: 40px;
}
.progress.w-tooltip .progress-bar > i {
    color: #777;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-style: normal;
    line-height: 10px;
    margin-top: -19px;
}
.progress.w-tooltip > .progress-bar span:before {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #8d8d8d;
    bottom: -4px;
    content: "";
    right: 10px;
    margin-left: -6px;
    position: absolute;
}


/* Status Upload Widget */
.status-upload {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #e1e1e1;
    float: left;
    width: 100%;
}
.status-upload form {
    float: left;
    width: 100%;
}
.status-upload form textarea {
    background: none repeat scroll 0 0 #fff;
    border: medium none;
    
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    -ms-border-radius: 4px 4px 0 0;
    -o-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    
    color: #777777;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    height: 142px;
    letter-spacing: 0.3px;
    padding: 20px;
    width: 100%;
}
.social-widget p {
    color: #333333;
    font-size: 20px;
    font-weight: 500;
}
.status-upload ul {
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0 0 0 15px;
    width: auto;
}
.status-upload ul > li {
    float: left;
}
.status-upload ul > li > a {
    
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;

    color: #777777;
    float: left;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    margin: 10px 0 10px 10px;
    text-align: center;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
    width: 30px;
    cursor:pointer;
}
.status-upload ul > li > a:hover {
    background: none repeat scroll 0 0 #606060;
    color: #fff;
}
.status-upload form button {
    border: medium none;
    
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;

    color: #fff;
    float: right;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    letter-spacing: 0.3px;
    margin-right: 9px;
    margin-top: 9px;
    padding: 6px 15px;
}
.status-upload form button > i {
    margin-right: 7px;
}



/* Mini Profile Widget */
.mini-profile-widget {
    float: left;
    padding: 30px;
    width: 100%;
}
.mini-profile-area {
    float: left;
    padding-left: 90px;
    position: relative;
    width: 100%;
}
.mini-profile-area > span {
    border: 3px solid #adadad;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
}
.mini-profile-area > span > img {
    float: left;
    width: 65px;
}
.mini-profile-area > h3 {
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    letter-spacing: 0.3px;
    margin: 20px 0 0;
    width: 100%;
    font-weight:600;
}
.mini-profile-area > i {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    font-style: normal;
    letter-spacing: 0.3px;
    margin-top: 5px;
    width: 100%;
}
.social-btns {
    float: right;
    list-style: none outside none;
    margin: -35px 0 0;
    padding: 0;
}
.mini-profile-widget > p {
    float: left;
    margin-top: 34px;
}
.social-btns > li {
    float: right;
    list-style: none outside none;
    margin-left: 6px;
}
.social-btns > li > a {
    float: left;
}
.social-btns > li > a > i {
    
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;

    color: #fff;
    float: left;
    font-size: 16px;
    height: 31px;
    line-height: 31px;
    text-align: center;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
    width: 31px;
}
.social-btns > li > a > i:hover {
    opacity:0.7;
}
.social-btns > li > a > i.fa-facebook{
    background:#3b5998;
}
.social-btns > li > a > i.fa-twitter{
    background:#439ed6;
}
.social-btns > li > a > i.fa-google-plus{
    background:#dd4b39;
}


/* Save Draft */
.save-draft {
    float: left;
    padding: 40px;
    width: 100%;
}
.save-draft > form {
    float: left;
    width: 100%;
}
.save-draft > form > input[type="text"], .save-draft > form > textarea {
    border: 1px solid #e0e5e7;
    color: #9b9b9b;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    margin-bottom: 8px;
    padding: 13px 24px;
    width: 100%;
}
.save-draft > form input[type="submit"] {
    background: #e8edf2 none repeat scroll 0 0;
    border: medium none;
    color: #424040;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    padding: 11px 24px;
}
.save-draft > form > textarea {
    min-height: 128px;
}


/* Ribbon  */
.ribbon-wrapper {
    height: 88px;
    overflow: hidden;
    position: absolute;
    right: -2px;
    top: -2px;
    width: 85px;
}
.ribbon-design:before {
    left: 0;
}
.ribbon-design:before, .ribbon-design:after {
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 3px solid #6e8900;
    bottom: -3px;
    content: "";
    position: absolute;
}
.ribbon-design:after {
    right: 0;
}
.ribbon-design:before, .ribbon-design:after {
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 3px solid #6e8900;
    bottom: -3px;
    content: "";
    position: absolute;
}
.ribbon-design {
    color: #ffffff;
    font: bold 12px 'Microsoft YaHei';
    left: -5px;
    letter-spacing: 0.35px;
    padding: 7px 0;
    position: relative;
    text-align: center;
    top: 15px;
    
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    
    width: 120px;
}


/* Full Report */
.full-report {
    float: left;
    padding: 30px;
    width: 100%;
}
.user {
    float: left;
    padding-left: 70px;
    position: relative;
    width: 100%;
}
.user > span {
    left: 0;
    position: absolute;
    top: 0;
    width: 52px;
}
.user > span > img {
    
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;

    float: left;
    width: 100%;
}
.user > h3 {
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 13px;
    margin: 11px 0 0;
    width: 100%;
}
.user > i {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    font-style: normal;
    letter-spacing: 0.3px;
    margin-top: 5px;
    width: 100%;
}
.full-report > ul {
    float: left;
    list-style: none outside none;
    margin: 28px 0 0;
    padding: 0;
    position: relative;
    width: 100%;
}
.full-report > ul:before {
    background: none repeat scroll 0 0 #adadad;
    content: "";
    height: 89%;
    left: 17px;
    position: absolute;
    top: 0;
    width: 1px;
    z-index: 0;
}
.full-report > ul li {
    color: #999999;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    letter-spacing: 0.3px;
    line-height: 34px;
    width: 100%;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
}
.full-report > ul li > span {
    background: none repeat scroll 0 0 #adadad;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    color: #fff;
    float: left;
    font-size: 14px;
    height: 34px;
    line-height: 34px;
    margin-bottom: 10px;
    margin-right: 30px;
    position: relative;
    text-align: center;
    width: 34px;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
    z-index: 9;
}
.full-report > ul > li:last-child > span {
    margin-bottom: 0;
}
.full-report > ul li i {
    color: #777777;
    float: right;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
}
.full-report > ul li:hover{
    color:#333;
}
.quick-report-widget.style2.white > span {
    color: #a2a2a2;
}
.quick-report-widget.style2.white > h4 {
    color: #333333;
}
.quick-report-widget.style2.white > h5 {
    color: #939393;
}



/* Visitor Chart */
.visitor-chart {
    float: left;
    padding: 100px 40px 30px;
    position: relative;
    width: 100%;
}
.visitor-chart > span {
    background: #fff none repeat scroll 0 0;
    color: #777777;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    left: 30px;
    letter-spacing: 0.3px;
    line-height: 10px;
    margin-bottom: 10px;
    position: absolute;
    top: 30px;
    width: auto;
    z-index: 9;
}
.visitor-chart > h3 {
    background: #fff none repeat scroll 0 0;
    color: #444444;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 28px;
    font-weight: bold;
    left: 30px;
    line-height: 25px;
    margin: 0;
    position: absolute;
    top: 50px;
    width: auto;
    z-index: 9;
}
.visitor-chart > ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 40px;
    top: 30px;
    z-index: 9;
}
.visitor-chart > #flot-sp1ine {
    float: left;
    width: 100%;
}
.visitor-chart > ul > li {
    background: none repeat scroll 0 0 #ffffff;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    letter-spacing: 0.3px;
    margin-bottom: 0;
    padding-left: 20px;
    position: relative;
}
.visitor-chart > ul > li:before {
    content: "";
    height: 8px;
    left: 0;
    margin-top: -4px;
    position: absolute;
    top: 50%;
    width: 8px;
}
.visitor-chart > ul > li.all:before {
    background:#8878ff;
}
.visitor-chart > ul > li.mob:before {
    background:#6f7685;
}


/* Map sec */
.visit-table {
    float: left;
    padding: 30px 30px 0 0;
    width: 100%;
}
.visit-table > ul {
    float: left;
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
}
.visit-table > ul > li.table-head  h2.location {
    border-right: 1px solid #e0e0e0;
}
.visit-table > ul > li {
    float: left;
    width: 100%;
}
.visit-table > ul > li.table-head {
    float: left;
    width: 100%;
    background: none repeat scroll 0 0 #fff;
}
.visit-table li .location {
    width: 70%;
}
.visit-table li .visit {
    width: 30%;
}
.visit-table > ul > li.table-head h2 {
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.3px;
    margin: 0;
    padding: 10px 23px;
}
.visit-table > ul > li:nth-child(2n+3) {
    background: none repeat scroll 0 0 #f5f5f5;
}
.visit-table > ul > li > span img {
    float: left;
    margin-right: 14px;
    margin-top: 5px;
}
.visit-table > ul > li > i {
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
    padding: 7px 0;
    text-align: center;
}
.visit-table > ul > li > span {
    color: #777777;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    letter-spacing: 0.3px;
    padding: 7px 15px;
}

/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    display: none;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    display: none;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}



.carousal-widget  ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.carousal-widget ul li {
    float: left;
    padding: 81px 50px;
    text-align: left;
    width: 100%;
    position: relative;
}
.carousal-widget {
    background-image: url("http://placehold.it/504x292");
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
    min-height: 316px;
    position: relative;
    text-align: left;
    width: 100%;
    z-index: 0;
}
.carousal-widget  li > i {
    color: #cccccc;
    float: left;
    font-size: 34px;
    position: relative;
    width: 100%;
    z-index: 4;
}
.carousal-widget  li > h3 {
    color: #fff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 19px;
    font-weight: 300;
    letter-spacing: 0.3px;
    line-height: 30px;
    position: relative;
    width: 100%;
    z-index: 2;
}
.carousal-widget li:before {
    background: none repeat scroll 0 0 #13171e;
    content: "";
    left: 0;
    opacity: 0.6;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
    height:100%;
}
.carousal-avatar {
    float: left;
    margin-top: 22px;
    padding-left: 75px;
    position: relative;
    width: 100%;
    z-index: 2;
}
.carousal-avatar > span {
    border: 3px solid #434a57;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    height: 55px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 55px;
}
.carousal-avatar > h3 {
    color: #ffffff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin: 10px 0 0;
    text-transform: uppercase;
    width: 100%;
}
.carousal-avatar > i {
    color: #ff3c3c;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 9px;
    font-style: normal;
    letter-spacing: 0.3px;
    margin-top: 1px;
    text-transform: uppercase;
    width: 100%;
}
.carousal-widget.fb-carousel ul  li::before {
    background: #4579c8 none repeat scroll 0 0;
    opacity: 0.9;
}
.carousal-widget.fb-carousel ul li > i {
    color: #ffffff;
    margin-left: -10px;
}
.carousal-widget.fb-carousel ul li > span {
    color: #dfdfdf;
    float: left;
    font-size: 12px;
    position: relative;
    width: 100%;
    z-index: 9999;
}
.fb-status {
    float: left;
    margin-top: 14px;
    position: relative;
    width: 100%;
    z-index: 9;
}
.fb-status > div {
    color: #ffffff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    margin-right: 15px;
    margin-top: 10px;
}



/* Twitter Widget */
.twitter-widget {
    background: #f6f6f6 none repeat scroll 0 0;
    float: left;
    width: 100%;
}
.twitter-avatar {
    float: left;
    position: relative;
    width: 100%;
}
.twitter-avatar img {
    float: left;
    width: 100%;
}
.twitter-avatar > h3 {
    bottom: 40px;
    color: #000000;
    font-family: "Microsoft YaHei";
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 0.3px;
    margin: 0;
    padding-left: 20px;
    position: absolute;
}
.twitter-avatar > h3 i {
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    display: inline-block;
    font-size: 11px;
    height: 22px;
    line-height: 22px;
    margin-left: 10px;
    text-align: center;
    width: 22px;
    color: #fff;
}
.twitter-avatar > span {
    bottom: 17px;
    color: #000000;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    left: 20px;
    letter-spacing: 0.3px;
    position: absolute;
}
.twitter-widget > ul {
    float: left;
    list-style: outside none none;
    margin: 20px 0;
    padding: 0;
    width: 100%;
}
.twitter-widget > ul > li {
    color: #777777;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-style: italic;
    letter-spacing: 0.3px;
    text-align: center;
    width: 33.3334%;
}
.twitter-widget > ul > li span {
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    margin-top: 3px;
    width: 100%;
}


/* Widget Tabs */
.widget-tabs {
    float: left;
    width: 100%;
}
.widget-tabs > .nav {
    background: none repeat scroll 0 0 #efefef;
    border: medium none;
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
}
.widget-tabs > .nav > li > a {
    border: medium none;
    
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    
    color: #555555;
    cursor: pointer;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    letter-spacing: 0.3px;
    line-height: 10px;
    margin: 0;
    padding: 20px 30px;
    
    -webkit-transition:all 0.4s ease 0s;
    -moz-transition:all 0.4s ease 0s;
    -ms-transition:all 0.4s ease 0s;
    -o-transition:all 0.4s ease 0s;
    transition:all 0.4s ease 0s;
}
.widget-tabs > .nav > li {
    float: left;
    margin: 0;
}
.widget-tabs > .nav > li > a:hover {
    background: none repeat scroll 0 0 #e9e9e9;
}
.widget-tabs > .nav > li.active > a:hover {
    background: none repeat scroll 0 0 #fff;
}
.tab-content {
    float: left;
    padding: 30px 25px;
    width: 100%;
}

/* User Comments */
.user-comments {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100% !important;
}
.user-comments > li {
    border-bottom: 1px solid #e8ecec;
    float: left;
    padding: 20px 0 20px 85px;
    position: relative;
    width: 100%;
}
.user-comments > li .user-avatar {
    height: 53px;
    left: 0;
    position: absolute;
    top: 20px;
    width: 53px;
}
.user-comments > li h3 {
    color: #3f3f3f;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    margin: 0;
    width: 100%;
}
.user-comments > li h3 i {
    color: #777777;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    font-weight: normal;
}
.user-comments > li h3 a {
    color: #000000;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    font-weight: normal;
}
.user-comments > li:first-child > .user-avatar {
    top: 0;
}
.user-comments p {
    color: #777777;
    float: left;
    font-size: 14px;
    line-height: 15px;
    margin: 7px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.user-comments > li > i {
    color: #979797;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    font-style: normal;
    letter-spacing: 0.3px;
    line-height: 10px;
    margin-top: 7px;
    width: 100%;
}
.user-comments > li .user-avatar span {
    
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    float: left;
    height: 53px;
    overflow: hidden;
    width: 53px;
}
.user-comments > li .user-avatar span img {
    float: left;
}
.edit-remove {
    height: 40px;
    margin: -19px 0 0;
    padding: 0;
    position: absolute;
    right: -8px;
    top: 50%;
    width: 16px;
}
.edit-remove > li {
    float: left;
    height: 20px;
    list-style: outside none none;
    width: 100%;
}
.edit-remove > li > a {
    
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    color: #ffffff;
    float: left;
    font-size: 10px;
    height: 19px;
    line-height: 18px;
    text-align: center;
    width: 19px;
}
.user-comments > li:first-child {
    padding-top: 0;
}
.user-comments > li:last-child {
    border: medium none;
    padding-bottom: 0;
}
/* Forum Thread */
.forum-threads {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.forum-threads > li {
    border-bottom: 1px solid #e8ecec;
    float: left;
    padding: 20px 0 20px 77px;
    position: relative;
    width: 100%;
}
.forum-threads > li > a {
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.forum-threads > li > i {
    color: #777777;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    font-style: normal;
    letter-spacing: 0.3px;
    line-height: 10px;
    margin-top: 7px;
    width: 100%;
}
.user-avatar {
    left: 0;
    position: absolute;
    top: 20px;
}
.forum-threads > li:first-child {
    padding-top: 0;
}
.forum-threads > li:last-child {
    padding-bottom: 0;
    border:none;
}
.forum-threads > li:first-child > .user-avatar {
    top: 0;
}
.forum-threads > li h3 {
    color: #3f3f3f;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    letter-spacing: 0.3px;
    margin: 0;
    width: 100%;
}
.forum-threads > li h3 i {
    color: #777777;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-weight: normal;
}
.forum-threads > li h3 a {
    color: #ff5050;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    font-weight: normal;
}

/* Setup basic CSS for Label */
.jqvmap_pin {
    font-family: "Microsoft YaHei";
    cursor: default;
}

/* Hide Whichever Labels you want */
#jqvmap1_ri_pin, #jqvmap1_dc_pin, #jqvmap1_de_pin, #jqvmap1_md_pin {
    display: none;
}

/* Reposition Labels that are not quite right ( labels are centered in shape, and sometimes need tweaking ) */
#jqvmap1_ak_pin {
margin-top: -2%;
}
#jqvmap1_ca_pin {
    margin-left: -2%;
}
#jqvmap1_ct_pin {
    margin-top: -0.25%;
    margin-left: -0.25%;
}
#jqvmap1_fl_pin {
    margin-left: 5%;
}
#jqvmap1_id_pin {
    margin-top: 3%;
    margin-left: -1%;
}
#jqvmap1_ky_pin {
    margin-left: 2%;
}
#jqvmap1_la_pin {
    margin-left: -2%;
}
#jqvmap1_mi_pin {
    margin-top: 4%;
    margin-left: 3%;
}
#jqvmap1_ma_pin {
    margin-top: -0.25%;
}
#jqvmap1_mn_pin {
    margin-top: 2%;
    margin-left: -2%;
}
#jqvmap1_nh_pin {
    margin-top: 1%;
    margin-left: -0.25%;
}
#jqvmap1_nj_pin {
    margin-top: 1%;
}
#jqvmap1_ok_pin {
    margin-left: 2%;
}
#jqvmap1_va_pin {
    margin-left: 2%;
}
#jqvmap1_wv_pin {
    margin-left: -1%;
    margin-top: 1%;
}

    /* Add responsibe support to resize labels for difference screen sizes */

    @media only screen and (min-width: 320px) {
    .jqvmap_pin {
      font-size: 6px;
    }
    }

    @media only screen and (min-width: 480px) {
    .jqvmap_pin {
      font-size: 8px;
    }
    }

    @media only screen and (min-width: 640px) {
    .jqvmap_pin {
      font-size: 10px;
    }
    }

    @media only screen and (min-width: 800px) {
    .jqvmap_pin {
      font-size: 12px;
    }
    }

    @media only screen and (min-width: 1024px) {
    .jqvmap_pin {
      font-size: 14px;
    }
}
#vmap {
    display: inline-block;
    float: none;
    height: 385px;
    margin: 43px 0;
    width: 570px;
}
.vector-map {
    float: left;
    text-align: center;
    width: 100%;
}
.rickshaw_graph > svg {
    float: left;
    width: 100%;
}

/* Timeline */
.timeline-sec {
    float: left;
    width: 100%;
}
.timeline-sec > ul {
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}
.timeline-content > .btn-group > label {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;

    
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;

    font-family: "Microsoft YaHei";
    font-size: 12px;
    letter-spacing: 0.3px;
    padding: 5px 13px;
}
.timeline-content p a {
    color: red;
}

.timeline-content > .btn-group > label > i {
    float: left;
    font-size: 12px;
    line-height: 18px;
    margin-right: 6px;
}

.timeline-sec > ul:before {
    background: none repeat scroll 0 0 #fafafa;
    content: "";
    height: 100%;
    left: 22px;
    position: absolute;
    top: 0;
    width: 2px;
}
.timeline-sec > ul > li {
    float: left;
    margin-bottom: 30px;
    position: relative;
    width: 100%;
}
.timeline {
    float: left;
    padding-left: 70px;
    position: relative;
    width: 100%;
}
.user-timeline {
    left: 0;
    position: absolute;
    top: 0;
    width: 70px;
}
.user-timeline > span {
    float: left;
    position: relative;
    width: 100%;
}
.user-timeline > span > img {
    border: 3px solid #f5f5f5;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    float: left;
    height: 45px;
    overflow: hidden;
    width: 45px;
}
.timeline-detail {
    background: none repeat scroll 0 0 #f5f5f5;
    float: left;
    position: relative;
    width: 100%;
}
.timeline-head {
    background: none repeat scroll 0 0 #fafafa;
    float: left;
    width: 100%;
}
.timeline-head > h3 {
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.3px;
    line-height: 22px;
    margin: 0;
    padding: 9px 0 9px 20px;
}
.timeline-head > h3 > span {
    color: #999999;
    font-size: 11px;
    letter-spacing: 0.3px;
    margin-left: 20px;
    margin-right: 12px;
}
.timeline-head > h3 > i {

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    color: #ffffff;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    font-style: normal;
    letter-spacing: 0.3px;
    padding: 2px 6px;
}
.social-share {
    float: right;
    padding: 8px;
    position: relative;
}
.social-share > a {
    background: #ededed none repeat scroll 0 0;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    color: #777777;
    cursor: pointer;
    float: right;
    font-size: 10px;
    height: 25px;
    line-height: 25px;
    position: relative;
    text-align: center;
    width: 25px;
}
.social-share > a:before {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #ededed;
    bottom: -4px;
    content: "";
    left: 50%;
    margin-left: -5px;
    position: absolute;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
}
.social-share > .social-btns {
    margin: 0;
    opacity: 0;
    position: absolute;
    top: 100%;
    
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    
    width: 25px;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
}
.social-share:hover > .social-btns {
    opacity: 1;
    
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}
.social-share > .social-btns > li {
    float: left;
    margin: 0 0 2px;
    width: 100%;
}
.social-share > .social-btns > li > a > i {
    font-size: 11px;
    height: 25px;
    line-height: 25px;
    width: 25px;
}
.timeline-content {
    float: left;
    padding: 15px 20px;
    width: 100%;
}
.timeline-content > .btn-group {
    float: left;
    margin-top: 15px;
    width: 100%;
}

.timeline-detail:before {
    border-bottom: 8px solid transparent;
    border-right: 8px solid #fafafa;
    border-top: 8px solid transparent;
    content: "";
    left: -7px;
    position: absolute;
    top: 12px;
}
.post-reply {
    background: none repeat scroll 0 0 #ffffff;
    float: left;
    margin-top: 11px;
    position: relative;
    width: 100%;
}
.post-reply > textarea {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    
    
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    
    color: #888888;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    height: 36px;
    letter-spacing: 0.3px;
    padding: 7px 45px 7px 19px;
    resize: vertical;
    
    -webkit-transition:all 0.4s ease 0s;
    -moz-transition:all 0.4s ease 0s;
    -ms-transition:all 0.4s ease 0s;
    -o-transition:all 0.4s ease 0s;
    transition:all 0.4s ease 0s;
    width: 100%;
    overflow: hidden;
}
.post-reply > textarea:focus {
    height: 100px;
}
.post-reply > i {
    color: #999999;
    font-size: 14px;
    margin-top: -7px;
    position: absolute;
    right: 13px;
    top: 50%;
}
.timeline .progress.w-tooltip {
    margin-top: 35px;
}
.timeline-gallery {
    float: left;
    margin-top: 15px;
    width: 100%;
}
.timeline-gallery > ul {
    float: left;
    list-style: none outside none;
    margin: -10px 0 0;
    padding: 0;
    width: 100%;
}
.timeline-gallery > ul > li {
    float: left;
    margin-right: 10px;
    margin-top: 10px;
}
.timeline-gallery > ul > li > a {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.timeline-gallery > ul > li > a > img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    float: left;
    width: 100%;
}
.timeline-gallery > ul > li > a i {
    color: #fff;
    left: 0;
    margin-top: -5px;
    opacity: 0;
    position: absolute;
    text-align: center;
    top: 50%;
    
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
    width: 100%;
    z-index: 9;
}
.timeline-gallery > ul > li > a:before {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    content: "";
    height: 90%;
    left: 5%;
    opacity: 0;
    position: absolute;
    top: 5%;
    
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
    width: 90%;
}
.timeline-gallery > ul > li > a:hover:before {
    opacity: 1;
    
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.timeline-gallery > ul > li > a:hover i {
    color: #333;
    opacity: 1;
    
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}


/* Mail Area */
.mail-area {
    float: left;
    margin-top: 30px;
    width: 100%;
}
.inbox-nav {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #e1e1e1;
    float: left;
    position: relative;
    width: 100%;
}
.user-mail {
    border-bottom: 1px dashed #e8ecec;
    float: left;
    padding: 50px 40px;
    text-align: center;
    width: 100%;
}
.user-mail > span {
    border: 1px solid #676767;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    display: table;
    float: none;
    margin: 0 auto;
    padding: 2px;
}
.user-mail > span img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    float: left;
    overflow: hidden;
    width: 100%;
}
.user-mail > h3 {
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 17px;
    letter-spacing: 0.3px;
    margin: 24px 0 0;
    text-align: center;
    width: 100%;
}
.user-mail > i {
    color: #858585;
    float: left;
    font-family: "Microsoft YaHei";
    font-style: normal;
    letter-spacing: 0.3px;
    margin-bottom: 17px;
    margin-top: 7px;
    text-align: center;
    width: 100%;
}
.user-mail > .social-btns {
    display: table;
    float: none;
    margin: 0 auto 37px;
    width: auto;
}
.compose-btn:hover {
    background: #838383 none repeat scroll 0 0;
    color: #ffffff;
}
.compose-btn {
    background: #444444 none repeat scroll 0 0;
    
    -webkit-border-radius: 33px;
    -moz-border-radius: 33px;
    -ms-border-radius: 33px;
    -o-border-radius: 33px;
    border-radius: 33px;

    color: #ffffff;
    display: table;
    float: none;
    font-family: "Microsoft YaHei";
    font-size: 15px;
    letter-spacing: 0.3px;
    margin: 0 auto;
    padding: 14px 40px;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;

}
.mail-menu {
    background: none repeat scroll 0 0 #fafafa;
    float: left;
    width: 100%;
}
.mail-menu > ul {
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.mail-menu > ul > li {
    float: left;
    width: 100%;
}
.mail-menu > ul > li > a:hover {
    background: none repeat scroll 0 0 #5a5a5a;
    color: #fff;
    padding-left: 40px;
}
.mail-menu > ul > li > a {
    border-bottom: 1px solid #ededed;
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-weight: normal;
    letter-spacing: 0.3px;
    padding: 14px 30px;
    width: 100%;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
}
.mail-menu > ul > li > a > span {

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    color: #ffffff;
    float: right;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    line-height: 14px;
    padding: 3px 10px;
}
.mail-labels {
    float: left;
    padding: 20px 30px;
    width: 100%;
}
.mail-labels > h3 {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    letter-spacing: 0.3px;
    margin: 0 0 13px;
    width: 100%;
}
.mail-labels > ul {
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.mail-labels > ul > li {
    float: left;
    width: 100%;
}
.mail-labels > ul > li > a {
    color: #777777;
    float: left;
    font-family: "Microsoft YaHei";
    font-weight: normal;
    letter-spacing: 0.3px;
    padding: 7px 0;
    width: 100%;
}
.mail-labels > ul > li > a > i {
    margin-right: 20px;
}
.all-mail {
    float: left;
    width: 100%;
}
.all-mail > h2 {
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    margin: 0 0 30px;
    width: 100%;
}
.mail-head {
    float: left;
    width: 100%;
}
.search-emails {
    float: left;
    width: 100%;
}
.search-emails input {
    border: 1px solid #dadada;

    float: left;
    font-family: "Microsoft YaHei";
    font-weight: lighter;
    height: 40px;
    letter-spacing: 0.3px;
    margin-bottom: 10px;
    padding: 0 30px;
    width: 100%;
}
.mail-head > form {
    background: none repeat scroll 0 0 #fafafa;
    float: left;
    width: 100%;
}
.mail-head form > label {
    background: none repeat scroll 0 0 #ffffff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    font-weight: normal;
    letter-spacing: 0.3px;
    margin: 8px 25px 8px 8px;
    padding: 6px 15px;
}
.mail-head form > label input[type="checkbox"] {
    float: left;
    margin-right: 8px;
    margin-top: 3px;
}
.all-mail .slimScrollDiv {
    float: left;
    width: 100%;
}
.btn-group, .btn-group-vertical {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}
.mail-head > form > .btn-group {
    float: left;
    margin: 7px;
}
.mail-head > form > .btn-group > label {
    border: 1px solid #e8ecec;
    color: #757575;
    font-size: 14px;
}
.mail-head > form > .btn-group.mail-pagination {
    float: right;
    text-align: left;
}
.mail-head > form > .btn-group.mail-pagination span {
    float: left;
}
.mail-head > form > .btn-group.mail-pagination span {
    color: #666666;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 33px;
    margin-right: 20px;
}
.your-emails {
    background: none repeat scroll 0 0 #ffffff;
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.your-emails > li {
    border-left: 3px solid #dfdfdf;
    float: left;
    margin-bottom: 1px;
    padding: 0 20px;
    position: relative;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
    width: 100%;
}
.email > input {
    float: left;
    margin: 13px 10px 0 0;
}
.star-email {
    cursor: pointer;
    float: left;
    height: 20px;
    line-height: 20px;
    margin-top: 9px;
    text-align: center;
    width: 20px;
}
.star-email.starred{
    color:#e0d341;
}
.email > h3 {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    line-height: 20px;
    margin: 0;
    overflow: hidden;
    padding: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 130px;
}
.email.unread a {
    font-weight: 500;
    color:#333;
}
.email.unread {
    background: none repeat scroll 0 0 #fafafa;
}
.inbox-msg:hover {
    color: #333;
}
.inbox-msg {
    color: #777777;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    letter-spacing: 0.3px;
    line-height: 21px;
    overflow: hidden;
    padding: 9px 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 270px;
}
.inbox-msg > span {

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    color: #ffffff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    font-weight: 600;
    line-height: 11px;
    margin-right: 10px;
    margin-top: 3px;
    padding: 3px 5px;
}
.email > span {
    color: #999999;
    float: right;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    letter-spacing: 0.3px;
    line-height: 10px;
    padding: 14px 0;
}
.attachment {
    color: #939393;
    float: left;
    margin-left: 10px;
    padding: 10px 0;
    text-align: center;
    width: 40px;
}
.read-email .modal-dialog {
    margin: 120px auto;
}
.read-email-sec {
    background: none repeat scroll 0 0 #ffffff;
    float: left;
    width: 100%;
}
.read-email-head {
    background: none repeat scroll 0 0 #fafafa;
    float: left;
    padding: 10px 20px;
    width: 100%;
}
.read-email-head > h3 {
    float: left;
    font-size: 15px;
    line-height: 50px;
    margin: 0;
}
.read-email-head > h3 > span {
    border: 1px solid #666666;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    float: left;
    height: 50px;
    margin-right: 20px;
    overflow: hidden;
    padding: 2px;
    width: 50px;
}
.read-email-head > h3 > span img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    float: left;
    width: 100%;
}
.read-email-head > h3.mail-user {
    float: right;
}
.read-email-head > h3.mail-user span {
    float: right;
    margin: 0 0 0 20px;
}
.read-email-head > h3.mail-user a {
    color: #777777;
    font-size: 13px;
    font-weight: normal;
    letter-spacing: 0.3px;
    margin-right: 20px;
}
.message-container {
    float: left;
    padding: 20px 30px;
    width: 100%;
}
.message-container > p {
    margin-bottom: 20px;
}
.quick-reply {
    background: none repeat scroll 0 0 #fafafa;
    border: 1px solid #e8ecec;
    float: left;
    padding: 10px;
    width: 100%;
}
.quick-reply .clear {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #e8ecec;
    float: left;
    padding: 20px;
    width: 100%;
}
.quick-reply > .c-btn {
    float: right;
    margin-top: 10px;
}
.send-mail:hover {
    background: #333333 none repeat scroll 0 0;
    color: #ffffff;
}


/* Compose Email */
.compose-email-sec {
    background: none repeat scroll 0 0 #ffffff; 
    float: left;
    margin-top: 70px;
    padding-top: 30px;
    width: 100%;
}
.compose-email-sec > form {
    float: left;
    padding: 0 15px;
    width: 100%;
}
.compose-email-sec > form input {
    border: 1px solid #e8ecec;  
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    letter-spacing: 0.3px;
    margin-bottom: 10px;
    padding: 9px 30px;
    width: 100%;
}
.your-emails {
    height: 736px;
    overflow: auto;
    padding: 0;
    width: 100%;
}
.mail-head label {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}
.read-email {
    height: 100%;
    position: fixed;
    right: -500px;
    top: 0;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;

    width: 500px !important;
    z-index: 2147483647;
}
.read-email:before {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3);
    content: "";
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    
    width: 100%;
    z-index: -1;
}

.read-email.reading:before {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.read-email.reading {
    right: 0;
}
.quick-reply textarea {
    border: medium none;
    
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    
    float: left;
    font-family: "Microsoft YaHei";
    height: 100px;
    margin-bottom: 10px;
    padding: 10px;
    width: 100%;
    color:#000;
}
.close-reading {
    background: none repeat scroll 0 0 #fafafa;
    color: #333;
    font-size: 10px;
    height: 30px;
    left: 0;
    line-height: 30px;
    position: absolute;
    text-align: center;
    top: 71px;
    width: 30px;
}
.compose-email form input {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #e1e1e1;
    
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    
    float: left;
    height: 55px;
    margin: 0 0 25px;
    padding: 0 20px;
    width: 100%;
}
.compose-email > form {
    margin: 0;
}
.send-mail {

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    color: #fff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 10px 16px;
    text-transform: uppercase;
}
.all-mail .slimScrollDiv {
    float: left;
    width: 100%;
}
.mail-head .btn.active.btn-default {
    z-index: 0;
}


.top-bar-chart {
    float: right;
    margin-left: 30px;
}
.bar-chart-details {
    float: right;
    margin-left: 10px;
}
.fontawesome-icon-list a > i {
    margin-right: 7px;
}
.bar-chart-details > p {
    color: #333333;
    font-family: "Microsoft YaHei";
    margin: 0;
}
.bar-chart-details h5 {
    color: #131313;
    font-family: "Microsoft YaHei";
    font-weight: bold;
    margin: 0;
}

.fontawesome-icon-list a {
    border-bottom: 1px dashed #d9d9d9;
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    padding: 10px 0;
    pointer-events: none;
    width: 100%;
}

/* line Icons */
.icons-area-sec {
    float: left;
    width: 100%;
}
.icons-main-section {
    float: left;
    height: auto;
    margin-bottom: 30px;
    width: 100%;
}
.icons-area-sec h3 {
    float: left;
    font-family: "Microsoft YaHei";
    margin: 0 0 10px;
    padding: 0 15px;
    position: relative;
    width: 100%;
}

.icons-container > span:first-child {
    float: left;
    font-size: 15px;
    margin-right: 10px;
}
.icons-container > span:last-child {
    font-family: "Microsoft YaHei";
    font-size: 13px;
    height: auto;
    letter-spacing: 0.3px;
    width: auto;
}
.icons-container {
    margin-top: 20px;
}
#icons {
    float: left;
    padding: 0 40px 40px;
    width: 100%;
}
.themify-icons-list {
    float: left;
    padding: 40px 30px;
    width: 100%;
}


/* Pie CHart */
.chart {
    float: left;
    height: 330px;
    position: static;
    width: 100%;
}
.pieTip {
  position: absolute;
  float: left;
  min-width: 30px;
  max-width: 300px;
  padding: 5px 18px 6px;
  background: rgba(255,255,255,.97);
  color: #444;
  font-size: 15px;
  text-shadow: 0 1px 0 #fff;
  text-transform: uppercase;
  text-align: center;
  font-family:'Microsoft YaHei';
  line-height: 1.3;
  letter-spacing: .06em;
  
  -webkit-transform: all .3s;
     -moz-transform: all .3s;
      -ms-transform: all .3s;
       -o-transform: all .3s;
          transform: all .3s;
  pointer-events: none;
  
}
.pieTip:after {
      position: absolute;
      left: 50%;
      bottom: -6px;
      content: "";
      height: 0;
      margin: 0 0 0 -6px;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      border-top: 6px solid rgba(255,255,255,.95);
      line-height: 0;
}
.chart path { cursor: pointer; }


/* Doughchart */
.chart1 {
    float: left;
    height: 300px;
    position: relative;
    width: 100%;
}
.doughnutTip {
  position: absolute;
  min-width: 30px;
  max-width: 300px;
  padding: 5px 15px;
  background: rgba(0,0,0,.8);
  color: #ddd;
  font-size: 17px;
  text-shadow: 0 1px 0 #000;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  letter-spacing: .06em;
  
  pointer-events: none;
}
.doughnutTip:after {
      position: absolute;
      left: 50%;
      bottom: -6px;
      content: "";
      height: 0;
      margin: 0 0 0 -6px;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      border-top: 6px solid rgba(0,0,0,.7);
      line-height: 0;
}
.doughnutSummary {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #d5d5d5;
  text-align: center;
  cursor: default;
}
.doughnutSummaryTitle {
    color: #555555;
    font-family: "Microsoft YaHei";
    font-size: 15px;
    letter-spacing: 0.06em;
    margin-top: 45px;
    position: absolute;
    text-shadow: none;
    top: 0;
    width: 100%;
}
.doughnutSummaryNumber {
    color: #333333;
    font-family: "Microsoft YaHei";
    font-size: 25px;
    margin-top: 73px;
    position: absolute;
    text-shadow: none;
    top: 0;
    width: 100%;
}
.chart path:hover { opacity: .65; }
.doughnut-chart-box {
    float: left;
    margin-top: 30px;
    padding-bottom: 60px;
    width: 100%;
}
.pie-chart-box {
    float: left;
    margin-top: 30px;
    padding-bottom: 30px;
    width: 100%;
}


/* Blog Sec */
.blog-sec {
    float: left;
    margin-top: 0;
    width: 100%;
}
.blog {
    float: left;
    margin-top: 30px;
    width: 100%;
}
.blog-thumb {
    float: left;
    width: 100%;
}
.blog-thumb > a {
    background: #000000 none repeat scroll 0 0;
    float: left;
    width: 100%;
}
.blog-thumb > a img {
    float: left;
    width: 100%;
}
.blog-thumb > a:hover img{
    opacity: 0.8;
} 
.blog-info {
    float: left;
    margin-top: 30px;
    width: 100%;
}
.blog-info > a {
    color: #ed6b75;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 15px;
    margin-bottom: 20px;
    margin-top: 10px;
    width: 100%;
}
.blog-info > p a{
    color: #ed6b75;
}
.blog-info > h2 {
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 25px;
    line-height: 37px;
    margin: 0 0 11px;
    width: 100%;
}
.blog-info > h2 a{
    color: inherit;
}
.blog-info > p {
    float: left;
    margin: 0;
    padding-right: 110px;
    width: 100%;
}


.pagination {
    
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;

    float: left;
    margin: 70px 0 0;
    padding: 2px 2px 3px 1px;
    text-align: center;
    width: 100%;
}
.pagination ul {
    display: inline-block;
    list-style: outside none none;
    margin: 7px 0 0;
    padding: 0;
}
.pagination li {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    margin: 0 4px 0 0;
}
.pagination li:last-child {
  margin: 0;
}
.pagination li.active a,
.pagination li a:active {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.pagination li.active a, .pagination li a:hover {
    color: #ffffff;
}
.pagination li .delimeter {
  display: block;
  padding-top: 6px;
}
.pagination a {
    background: #fff none repeat scroll 0 0;
    
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;

    color: #666;
    float: left;
    font-family: "Microsoft YaHei";
    padding: 3px 13px;
    text-decoration: none;
}

.post-tags {
    float: left;
    margin-top: 40px;
    width: 100%;
}
.post-tags > span {
    color: #848484;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    margin-right: 10px;
    margin-top: 2px;
    text-transform: uppercase;
}
.post-tags > span i {
    font-size: 14px;
    margin-right: 5px;
}
.post-tags > a {
    color: #7e7e7e;
    display: inline-block;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.3px;
    line-height: 13px;
}
.blog-single .blog .blog-info p {
    margin-bottom: 19px;
    margin-top: 11px;
    padding: 0;
}

.related-post {
    float: left;
    margin-top: 90px;
    width: 100%;
}
.comment-form {
    float: left;
    margin-top: 90px;
    width: 100%;
}
.comment-form > form {
    float: left;
    width: 100%;
}
.comment-form > form label {
    float: left;
    margin-bottom: 10px;
    position: relative;
    width: 100%;
}
.comment-form form label input, .comment-form form label textarea {
    background: #f9f9f9 none repeat scroll 0 0;
    border: medium none;
    color: #a7a7a7;
    float: left;
    font-family: "Microsoft YaHei";
    font-weight: 500;
    padding: 21px 70px;
    width: 100%;
}
.comment-form form label i {
    color: #dcdcdc;
    font-size: 14px;
    left: 40px;
    position: absolute;
    top: 24px;
}
.comment-form form label textarea {
    min-height: 180px;
}

/* Heading 3 */
.heading3 {
    float: left;
    margin-bottom: 20px;
    width: 100%;
}
.heading3 > h3 {
    color: #1a1a1a;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 28px;
    font-weight: bold;
    margin: 0 0 11px;
    width: 100%;
}
.heading3 > span {
    color: #979797;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    width: 100%;
}

.blog-thumb > img {
    float: left;
    width: 100%;
}

.post-gallery {
    float: left;
    margin-bottom: 30px;
    width: 100%;
}
.post-gallery > .row {
    margin: 0 -4px;
}
.post-gallery > .row > div {
    margin-top: 8px;
    padding: 0 4px;
}
.post-gallery img {
    float: left;
    width: 100%;
}


.blog-post {
    float: left;
    width: 100%;
    margin-top: 30px;
}
.blog-post-thumb > img {
    float: left;
    width: 100%;
}
.blog-post-thumb {
    float: left;
    width: 100%;
    background: #282828;
    position: relative;
}
.blog-post:hover .blog-post-thumb > img {
    opacity: 0.2;
}
.blog-post-thumb > a {
    color: #ffffff;
    font-size: 23px;
    height: 57px;
    left: 30px;
    line-height: 57px;
    position: absolute;
    text-align: center;
    top: 50px;
    width: 57px;

    -webkit-transform: rotate(50deg);
    -moz-transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    -o-transform: rotate(50deg);
    transform: rotate(50deg);
    
    opacity: 0;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.blog-post:hover .blog-post-thumb > a {
    opacity: 1;
    
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);

    top: 30px;
}
.blog-post-info > h3 {
    float: left;
    width: 100%;
    font-size: 23px;
    color: #1d1d1d;
    margin: 0;
    margin-top: 24px;
    line-height: 32px;
    letter-spacing: 0px;
}
.blog-post-info > h3 a{
    color: #1d1d1d;
}
a.date-post {
    color: #7b7b7b;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    letter-spacing: 0.3px;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 11px;
}
a.date-post i{
    margin-right: 5px;
}
.blog-post-info > p {
    float: left;
    width: 100%;
    margin: 0;
}

/* Error 404 */
.error-sec {
    float: left;
    margin-top: 30px;
    text-align: center;
    width: 100%;
}
.error-sec > i {
    float: left;
    font-size: 103px;
    width: 100%;
    color: #ed6b75;
}
.error-sec h2 {
    color: #585757;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 252px;
    font-weight: bold;
    letter-spacing: -20px;
    margin: 0;
    width: 100%;
}
.error-sec > span {
    color: #9b9b9b;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 18px;
    width: 100%;
}
.error-sec > p {
    float: left;
    margin-left: 25%;
    margin-top: 20px;
    width: 50%;
}
.error-btn {
    float: left;
    list-style: outside none none;
    margin: 40px 0 0;
    padding: 0;
    width: 100%;
}
.error-btn > li {
    display: inline-block;
    margin: 0 -2px;
}
.error-btn > li.border > a {
    border-color: #ed6b75;
    color: #ed6b75;
}
.error-btn > li.fill > a {
    background: #ed6b75 none repeat scroll 0 0;
    border-color: #ed6b75;
}
.error-btn > li > a {
    border: 3px solid;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    font-weight: bold;
    padding: 9px 0;
    width: 150px;
}
.error-btn > li.fill > a {
    color: #ffffff;
}


/* Error Page */
.error-page {
    float: left;
    text-align: center;
    width: 100%;
}
.error-page > img {
    display: inline-block;
}
.error-page > h2 {
    color: #c9c9c9;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 293px;
    letter-spacing: -17px;
    margin: 40px 0;
    width: 100%;
}
.error-page > h2 > span {
    font-size: 124px;
}
.error-page > p {
    float: left;
    margin-top: 26px;
    width: 100%;
}
.error-page > span {
    color: #444444;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 29px;
    width: 100%;
}

.group-btns {
    float: left;
    list-style: outside none none;
    margin: 30px 0 0;
    padding: 0;
    text-align: center;
    width: 100%;
}
.group-btns > li {
    display: inline-block;
    float: none;
    margin: 0 6px;
}

.theme-btn {
    border: medium none;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

    color: #ffffff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 15px;
    overflow: hidden;
    padding: 15px 35px;
    text-transform: uppercase;
}
.theme-btn.gray {
    background: #f0f0f0 none repeat scroll 0 0;
    color: #333333;
}


.google-map {
    float: left;
    margin-top: 30px;
    position: relative;
    width: 100%;
    z-index: 0;
}
.google-map::before {
    background: transparent none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}
.google-map iframe { 
  float: left;
  widows: 100%;
  height: 656px;
  position: relative;
}
.wanna-touch {
    background-color: rgba(255, 255, 255, 0.98);
    height: 100%;
    left: 50%;
    padding: 50px 70px;
    position: absolute;
    
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);

    width: 710px;
    z-index: 1;
}
.google-map.active > .wanna-touch {
    margin-top: -110px;
    opacity: 0;
    display: none;
}

.info-title {
    float: left;
    margin-bottom: 40px;
    text-align: center;
    width: 100%;
}
.info-title > span {
    color: #ed6b75;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 15px;
    letter-spacing: 0.3px;
    margin-bottom: 12px;
    width: 100%;
}
.info-title > h3 {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 37px;
    font-weight: bold;
    margin: 0;
    width: 100%;
}
.contact-page-sec {
    float: left;
    margin-top: 50px;
    width: 100%;
}
.contact-form > form button {
    background: #ed6b75 none repeat scroll 0 0;
    border: medium none;
    color: #fff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    padding: 16px 30px;
}
.contact-info-list {
    float: left;
    text-align: center;
    width: 100%;
}
.contact-info-list > ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.contact-info-list > ul > li {
    color: #282828;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 15px;
    line-height: 31px;
    margin: 4px 0;
    width: 50%;
    text-align: left;
}
.contact-info-list > ul > li i {
    margin-right: 12px;
    color: #ed6b75;
}
.contact-info-list > ul > li {
    float: left;
    text-align: center;
    width: 50%;
}
.google-map.active::before {
    display: none;
}
.google-map.active > .hide-location {
    opacity: 1;
    display: block;
}
.view-location:hover {
    background: #ed6b75 none repeat scroll 0 0;
}
.view-location {
    background: #282828 none repeat scroll 0 0;
    
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;

    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: "Microsoft YaHei";
    font-size: 15px;
    margin-top: 40px;
    padding: 21px 40px;
}
.hide-location {
    -webkit-border-radius: 43px;
    -moz-border-radius: 43px;
    -ms-border-radius: 43px;
    -o-border-radius: 43px;
    border-radius: 43px;

    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    margin: 7px;
    opacity: 0;
    padding: 16px 28px;
    position: absolute;
    right: 0;
    top: 0px;
    display: none;
    z-index: 9;
    background-color: #ed6b75;
}
.hide-location > i {
    margin-right: 10px;
}
.view-location > i {
    margin-right: 10px;
}
.view-location:hover{
    color: #ffffff;
}
.view-location:hover > i{
    color: #ffffff;
}
.wanna-touch-inner {
    left: 50%;
    padding: 0 80px;
    position: absolute;
    top: 50%;
    
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

    width: 100%;
}

.contact-form-sec {
    float: left;
    width: 100%;
}
.contact-form {
    float: left;
    width: 100%;
}
.contact-form > form {
    float: left;
    width: 100%;
}
.contact-form > form .row > div {
    margin-bottom: 10px;
    position: relative;
}
.contact-form > form .row > div > input[type="text"], .contact-form > form .row > div > textarea {
    background: #f9f9f9 none repeat scroll 0 0;
    border: medium none;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 15px;
    height: 68px;
    padding: 18px 80px;
    width: 100%;
}
.contact-form > form .row > div > i {
    color: #b5b5b5;
    font-size: 15px;
    left: 58px;
    line-height: 16px;
    margin-top: -7px;
    position: absolute;
    top: 34px;
}
.contact-form > form .row > div > textarea {
    min-height: 170px;
    padding-top: 25px;
}
.contact-details .social-btns > li > a:hover {
    background: #ed6b75 none repeat scroll 0 0;
}
.contact-details {
    float: left;
    width: 100%;
}
.contact-details .social-btns {
    float: left;
    margin-bottom: 30px;
    margin-top: 20px;
}
.contact-details .social-btns > li > a {
    background: #8f8f8f none repeat scroll 0 0;
}
.contact-infos > ul {
    float: left;
    list-style: outside none none;
    margin: 25px 0 0;
    padding: 0;
    width: 100%;
}
.contact-infos > ul > li {
    float: left;
    padding-right: 20px;
    width: 50%;
}
.contact-infos > ul li span {
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 17px;
    margin-bottom: 7px;
    width: 100%;
}
.contact-infos > ul > li > span > i {
    color: #ed6b75;
    margin-right: 9px;
}


.subscribe-us {
    float: left;
    width: 100%;
}
.subscribe-us > span {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 20px;
    font-style: italic;
    font-weight: 300;
    padding: 0;
    width: 100%;
}
.subscribe-us > form > input[type="text"] {
    border: medium none;
    
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;

    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    font-style: italic;
    height: 59px;
    padding: 0 80px 0 40px;
    width: 335px;
    background-color: #f6f6f6;
}
.subscribe-us > form {
    float: left;
    margin: 30px 0 0;
}
.subscribe-us > form > input[type="submit"]:hover{
    background-color: #333333;
}
.subscribe-us > form > input[type="submit"] {
    background: #8f8f8f none repeat scroll 0 0;
    border: medium none;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    color: #fff;
    float: right;
    font-family: "Microsoft YaHei";
    font-size: 15px;
    font-weight: bold;
    margin-left: -70px;
    margin-top: 4px;
    padding: 13px 30px;
}
.google-map > #map {
    float: left;
    min-height: 510px;
    width: 100%;
}
#maptwo {
    float: left;
    min-height: 550px;
    width: 100%;
    margin-top: 30px;
}
#vector-map {
    background-color: red;
    float: left;
    height: 570px;
    margin: 43px 0;
    position: relative;
    width: 100%;
}


/* Invoice Sec */
.invoice-sec {
    float: left;
    margin-top: 30px;
    width: 100%;
}
.invoice-sec > span {
    color: #878787;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    letter-spacing: 0.3px;
    margin: 0 0 20px;
    text-align: left;
    width: 100%;
}
.invoice-sec strong {
    color: #232323;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 15px;
    font-weight: normal;
    letter-spacing: 0.3px;
    width: 100%;
}
.invoice-details {
    float: left;
    width: 50%;
}
.invoice-details > ul {
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
}
.heading-invoice {
    color: #6E6E6E;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    list-style: none outside none;
    width: 100%;
    font-size: 12px;
}
.invoice-details li {
    color: #555555;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.25px;
    line-height: 15px;
    list-style: none outside none;
    padding: 6px 0;
    width: 100%;
}
.invoice {
    background: none repeat scroll 0 0 #FAFAFA;
    border: 1px solid #EBEBEB;
    float: left;
    margin: 15px 0;
    width: 100%;
    
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
}
.invoice-head {
    background: none repeat scroll 0 0 #ffffff ;
    float: left;
    width: 100%;
}
.invoice-head h2 {
    color: #232323;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 0.3px;
    line-height: 12px;
    margin: 0;
    padding: 23px 0;
    text-align: center;
}
.invoice li div p {
    color: #555555;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    letter-spacing: 0.3px;
    line-height: 10px;
    margin: 0;
    padding: 19px 0;
    text-align: center;
    width: 100%;
}
.invoice-number {
    float: left;
    padding: 0 20px;
    width: 10%;
}
.date{
    width: 10%;
    float: left;
}
.description {
    width: 50%;
    float: left;
}
.quantity {
    width: 10%;
    float: left;
}
.vat {
    width: 10%;
    float: left;
}
.total {
    width: auto;
    float: left;
}
.long-column {
    width: 90%;
}
.long-column p {
    padding-left: 10px;
    text-align: left;
}
.invoice li {
    float: left;
    list-style: none outside none;
    width: 100%;
}
.invoice li:hover {
    background: none repeat scroll 0 0 #F7F7F7;
}
.invoice > ul {
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
}
.invoice li:nth-child(2n+2) {
    background: #ffffff none repeat scroll 0 0;
}
.total a {
    border: 1px solid;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    color: #ffffff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    line-height: 10px;
    margin: 20px;
    padding: 18px 40px;
    text-align: center;
    text-decoration: none;
}
.msg {
    background: #fff none repeat scroll 0 0;
    
    -webkit-border-radius: 34px;
    -moz-border-radius: 34px;
    -ms-border-radius: 34px;
    -o-border-radius: 34px;
    border-radius: 34px;

    color: #333333;
    display: table;
    float: none;
    font-size: 22px;
    font-weight: lighter;
    margin: 0 auto;
    padding: 15px 51px;
    text-align: left;
    width: auto;
}
.contact-form .loader {
    border: medium none;
    margin: 18px 20px;
    position: static;
}



.search-result {
    float: left;
    margin-bottom: 50px;
    margin-top: 30px;
    width: 100%;
}
.search-result h3 {
    color: #222222;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 19px;
    margin: 0 0 11px;
    width: 100%;
}
.search-result > p {
    color: #767676;
    font-size: 14px;
}
.search-result .search_widget {
    float: left;
    margin-top: 30px;
    width: 100%;
}
.search_widget > form {
    float: left;
    position: relative;
    width: 100%;
}
.search_widget > form input {
    background: #f6f6f6 none repeat scroll 0 0;
    border: medium none;
    color: #5f5f5f;
    float: left;
    font-size: 13px;
    letter-spacing: 0.3px;
    padding: 21px 30px;
    width: 100%;
}
.search-result .search_widget > form input {
    background: #f5f5f5 none repeat scroll 0 0;
}
.search_widget > form button {
    background: #ed6b75 none repeat scroll 0 0;
    border: medium none;
    color: #ffffff;
    height: 46px;
    position: absolute;
    right: 6px;
    top: 7px;
    width: 46px;
}
.search-result > img {
    left: 50%;
    margin-top: 100px;
    position: relative;

    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

/* Collapse Style */
.collapse-sec {
    float: left;
    margin-top: 30px;
    width: 100%;
}
.c-collapse {
    float: left;
    width: 100%;
}
.c-collapse > h2 {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #e5e5e5;
    color: #333333;
    cursor: pointer;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    letter-spacing: 0.3px;
    line-height: 43px;
    margin: 0 0 10px;
    opacity: 0.6;
    overflow: hidden;
    padding: 0 21px;
    position: relative;
    text-overflow: ellipsis;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
    white-space: nowrap;
    width: 100%;
}

.c-collapse > h2 i {
    float: left;
    font-size: 12px;
    height: 26px;
    line-height: 24px;
    margin-right: 10px;
    margin-top: 8px;
    position: relative;
    text-align: center;
    width: 26px;
}
.c-collapse > h2.active {
    opacity: 1;
}
.c-collapse > h2:hover {
    opacity: 1;
}
.c-collapse > .content {
    background: none repeat scroll 0 0 #f9f9f9;
    border: 1px solid #fcfcfc;
    float: left;
    margin-bottom: 10px;
    padding: 15px 25px;
    position: relative;
    width: 100%;
}
.c-collapse > .content:before {
    background: none repeat scroll 0 0 #f9f9f9;
    border-left: 1px solid #fcfcfc;
    border-top: 1px solid #fcfcfc;
    content: "";
    height: 15px;
    left: 30px;
    position: absolute;
    top: -3px;
    
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    
    width: 15px;
}

.maintainance-mode {
    background-image: url("http://placehold.it/1920x1279");
    background-size: cover;
    float: left;
    height: 100%;
    left: 0;
    margin: 0;
    padding-top: 90px;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
}
.maintainance-mode .logo > a {
    color: #232323;
    font-size: 30px;
}
.commingsoon {
    background-image: url("http://placehold.it/1920x1279");
    background-size: cover;
    float: left;
    height: 100%;
    left: 0;
    margin: 0;
    position: fixed;
    text-align: center;
    top: 0;
    width: 100%;
}
.soon-all {
    float: left;
    margin-top: 100px;
    width: 100%;
}
.commingsoon .logo {
    display: inline-block;
    float: none;
    margin: 0;
    padding: 0;
    text-align: left;
    width: auto;
}
.commingsoon .logo > a {
    color: #232323;
    font-size: 30px;
}
.countdown-sec {
    float: left;
    list-style: outside none none;
    margin: 50px 0 0;
    padding: 0;
    text-align: center;
    width: 100%;
}
.countdown-sec ul.countdown {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.countdown-sec ul.countdown > li {
    background: #ffffff none repeat scroll 0 0;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    display: inline-block;
    float: none;
    margin: 0 3px;
    width: 100px;
}
.countdown-sec ul.countdown > li > span {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 22px;
    margin-top: 31px;
    width: 100%;
}
.countdown-sec ul.countdown > li > p {
    float: left;
    margin-bottom: 27px;
    width: 100%;
}
.fancy-social {
    float: left;
    margin-top: 40px;
    width: 100%;
}
.fancy-social > span {
    color: #7f7f7f;
    display: inline-block;
    float: left;
    margin-bottom: 19px;
    margin-right: 14px;
    width: 100%;
}
.fancy-social > a {
    background: #ffffff none repeat scroll 0 0;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    color: #838383;
    display: inline-block;
    float: none;
    height: 30px;
    line-height: 30px;
    text-align: center;
    width: 30px;
}
form.subscribtion {
    float: left;
    margin-top: 60px;
    width: 100%;
}
form.subscribtion > input {
    background: #ffffff none repeat scroll 0 0;
    border: medium none;
    display: inline-block;
    float: none;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    padding: 17px 32px;
    width: 310px;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

}
form.subscribtion > button {
    background: #646464 none repeat scroll 0 0;
    border: medium none;
    color: #ffffff;
    display: inline-block;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    padding: 16px 40px;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

}

.service {
    float: left;
    width: 100%;
}
.service > span {
    float: left;
    font-size: 45px;
    width: 100%;
}
.service > h3 {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 22px;
    margin: 10px 0 14px;
    width: 100%;
}
.service > p {
    margin-bottom: 20px;
}
.square-infos {
    left: 0;
    padding: 50px;
    position: absolute;
    top: 50%;
    
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);

    width: 100%;
}
.square-services-sec {
    float: left;
    width: 100%;
}
.square-services {
    float: left;
    margin-top: 30px;
    position: relative;
    width: 100%;
}
.square-services:hover:before{
    background: rgba(30,30,30,0.65);
}
.square-services::before {
    background: #f8f8f8 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.square-services > img {
    float: left;
    width: 100%;
}
.square-infos > i {
    color: #ed6b75;
    float: left;
    font-size: 49px;
    margin-bottom: 16px;
    width: 100%;
}
.square-infos > h3 {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 21px;
    font-weight: bold;
    margin: 11px 0 16px;
    text-transform: uppercase;
    width: 100%;
    color: #232323;
}
.square-infos > a {
    border: 2px solid #ed6b75;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    color: #ed6b75;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 19px;
    height: 47px;
    line-height: 42px;
    margin-top: 14px;
    text-align: center;
    width: 47px;
}
.square-services:hover > .square-infos > a {
    background: #ed6b75 none repeat scroll 0 0;
}
.square-services:hover .square-infos > a{
    color: #fff;
}
.square-services:hover .square-infos > h3 {
    color: #fff;
}
.square-services:hover .square-infos > p {
    color: #d7d7d7;
}
.service-circle-sec{
    float: left;
    width: 100%;
}
.service-circle {

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    float: left;
    margin-top: 30px;
    position: relative;
    width: 100%;
}
.service-circle > img {
    float: left;
    width: 100%;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

}
.service-circle::before {
    background: #ffffff none repeat scroll 0 0;
    content: "";
    height: 96%;
    left: 2%;
    opacity: 0.94;
    position: absolute;
    top: 2%;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    width: 96%;
}
.service-circle .service-simple {
    padding: 0 40px;
    position: absolute;
    top: 50%;

    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.service-circle .service-simple:before{
    display: none;
}
.service-simple {
    float: left;
    padding-bottom: 50px;
    position: relative;
    text-align: center;
    width: 100%;
}
.service-simple > i {
    background: #ed6b75 none repeat scroll 0 0;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    color: #ffffff;
    display: inline-block;
    float: none;
    font-size: 17px;
    height: 54px;
    line-height: 54px;
    margin-bottom: 25px;
    width: 54px;
}
.service-simple:hover > i{
    background: #333333;
}
.service-simple > h3 {
    color: #4a4a4a;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    margin: 4px 0 14px;
    text-transform: uppercase;
    width: 100%;
}
.service-simple > p {
    float: left;
    margin: 0;
    width: 100%;
}
.service-simple::before {
    bottom: 0;
    content: "";
    height: 33px;
    left: 50%;
    position: absolute;
    width: 3px;
}
.service-simple:hover:before{
    height: 5px;
}
.maintainance {
    float: left;
    padding-top: 90px;
    text-align: center;
    width: 100%;
}
.maintainance-mode > .logo {
    display: inline-block;
    float: none;
    padding: 0;
    text-align: left;
    width: auto;
}

/* Our team */
.team-sec {
    float: left;
    width: 100%;
}
.team-box {
    float: left;
    margin-top: 30px;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.team-box > img {
    float: left;
    width: 100%;
}
.team-box .team-info {
    background: #ffffff none repeat scroll 0 0;
    top: 100%;
    position: absolute;
    text-align: center;
    width: 100%;
}
.team-info > i.fa {
    background: #ed6b75  none repeat scroll 0 0;
    color: #ffffff;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    height: 50px;
    line-height: 52px;
    position: absolute;
    right: 0;
    top: -50px;
    width: 54px;
}
.team-info h3 {
    color: #4b4b4b;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 20px;
    font-weight: bold;
    margin: 29px 0 7px;
    text-transform: uppercase;
    width: 100%;
}
.team-info h3 > i {
    font-style: normal;
}
.team-info > i {
    color: #6e6e6e;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.team-box:hover .team-info > i.fa {
    opacity: 0;
    right: -60px;
    top: -50px;
}
.team-box:hover .team-info {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    top: 50%;
     padding: 0;

    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.team-box::before {
    background: rgba(0, 0, 0, 0.87) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0;
}

.team-box:hover::before {
    opacity: 1;
}
.team-box:hover .team-info h3 {
    color: #ffffff;
    margin-top: 0;
}
.team-box:hover .team-info > i {
    color: #cfcfcf;
}
.team-info > p {
    color: #e9e9e9;
    font-size: 14px;
    margin-top: 14px;
    padding: 0 63px;
}
.team-box .social-btn li::before {
    display: none;
}
.team-box .social-btn li {
    display: inline-block;
    float: none;
    margin: 0;
}
.team-box .social-btn li > a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    height: auto;
    line-height: unset;
    width: auto;
}
.team-box .social-btn li a i {
    color: #ffffff;
    height: 39px;
    line-height: 39px;
    text-align: center;
    width: 39px;
}
.team-box .social-btn li a i.fa-facebook {
    background: #5a73c4 none repeat scroll 0 0;
}
.team-box .social-btn li a i.fa-google-plus {
    background: #ff383d none repeat scroll 0 0;
}
.team-box .social-btn li a i.fa-twitter {
    background: #43c8ff none repeat scroll 0 0;
}

.social-btn {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.social-btn > li {
    float: left;
    margin-right: 1px;
    padding: 7px 0;
    position: relative;
}
.social-btn > li > a {
    background: #0d0d0d none repeat scroll 0 0;
    color: #a7a7a7;
    float: left;
    font-size: 14px;
    height: 39px;
    line-height: 39px;
    text-align: center;
    width: 39px;
}
.social-btn > li:hover > a{
    color: #fff;
}
.social-btn > li::before {
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.social-btn > li:hover:before{
    height: 100%;
}

/* Team Sec */
.col-md-3 > .team > .team-info-sec {
    padding: 10px;
}
.team > img {
    float: left;
    width: 100%;
}
.team-sec {
    float: left;
    width: 100%;
}
.team-box {
    float: left;
    margin-top: 30px;
    position: relative;
    width: 100%;
    background: #000;
}
.team-box > img {
    float: left;
    width: 100%;
}
.team-name {
    background: red none repeat scroll 0 0;
    
    -webkit-border-radius: 70px;
    -moz-border-radius: 70px;
    -ms-border-radius: 70px;
    -o-border-radius: 70px;
    border-radius: 70px;

    bottom: 30px;
    left: 10%;
    position: absolute;
    width: 80%;
    height: 71px;
    padding-left: 70px;
    padding-right: 20px;
    text-align: center;
}
.team-name > i {
    background: #ffffff none repeat scroll 0 0;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    color: #232323;
    float: left;
    font-size: 20px;
    height: 71px;
    left: 0;
    line-height: 71px;
    margin-left: -1px;
    margin-right: 20px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 71px;
}
.team-name > h3 {
    float: left;
    width: 100%;
    font-family: "Microsoft YaHei";
    font-size: 22px;
    color: #ffffff;
    line-height: 70px;
    margin: 0;
}
.team-box:hover > .team-name {
    bottom: 0;
    opacity: 0;
}
.team-box:hover > img {
    opacity: 0.39;
}
.team .team-info-sec {
    border: 0 none;
    bottom: 0;
    left: 0;
    padding: 30px;
    position: absolute;
    width: 100%;
}
.team {
    
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;

    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-top: 30px;
}
.team-info {
    background: #ffffff none repeat scroll 0 0;
    
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;

    float: left;
    padding: 25px 95px 25px 25px;
    position: relative;
    width: 100%;
}
.team-info > h3 {
    color: #0f0f0f;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 18px;
    margin: 0 0 8px;
    width: 100%;
}
.team-info > h3 a {
    color: #0f0f0f;
}
.team-info > span {
    float: left;
    padding-right: 20px;
    position: relative;
}
.team-info > span::before {
    bottom: 5px;
    content: "";
    height: 4px;
    position: absolute;
    right: 5px;
    width: 4px;
}
.team-info > a {
    background: #e6e6e6 none repeat scroll 0 0;
    
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;

    color: #9d9d9d;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 25px;
    font-weight: normal;
    height: 45px;
    line-height: 41px;
    position: absolute;
    right: 27px;
    text-align: center;
    top: 26px;
    width: 46px;
}
.team-info > a:hover {
    color: #fff;
    background: #36c6d3;
}


.mini-portfolio {
    float: left;
    margin-top: 30px;
    position: relative;
    width: 100%;
}
.mini-portfolio > img {
    float: left;
    width: 100%;
}
.mini-portfolio::before {
    background: #fff none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.mini-portfolio .portfolio-info {
    left: 0;
    padding: 0 40px;
    position: absolute;
    top: 50%;
    
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);

    opacity: 0;
}
.mini-portfolio .portfolio-info > h3 {
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 30px;
}
.mini-portfolio .portfolio-info > ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.mini-portfolio .portfolio-info > ul > li {
    float: left;
}
.mini-portfolio .portfolio-info > ul > li > a {
    background: #ffffff none repeat scroll 0 0;
    color: #272727;
    float: left;
    height: 43px;
    line-height: 43px;
    text-align: center;
    width: 43px;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

}
.mini-portfolio .portfolio-info > ul > li:last-child > a {
    background: #ed6b75 none repeat scroll 0 0;
    color: #ffffff;
    margin-left: -10px;
}
.portfolio-info > span {
    color: #ed6b75;
}
.mini-portfolio:hover::before {
    opacity: 0.91;
}
.mini-portfolio:hover .portfolio-info {
    opacity: 1;
}

/* Profile Sec */
.profile-sec {
    float: left;
    margin-top: 30px;
    width: 100%;
}
.profile-head {
    background-image: url("http://placehold.it/988x240");
    background-size: 100% 100%;
    min-height: 226px;
    overflow: hidden;
    padding: 40px;
    position: relative;
}
.profile-avatar {
    float: left;
    max-width: 460px;
    padding-left: 150px;
    position: relative;
}
.profile-avatar > span {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    left: 0;
    overflow: hidden;
    padding: 3px;
    position: absolute;
    top: 0;
}
.profile-avatar > span img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    float: left;
}
.profile-name {
    float: left;
    padding-top: 7px;
    width: 100%;
}
.profile-name > h3 {
    color: #ffffff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 21px;
    letter-spacing: 0.3px;
    margin: 0;
    width: 100%;
}
.profile-name > i {
    color: #d7d7d7;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    font-style: normal;
    letter-spacing: 0.3px;
    margin-top: 6px;
    width: 100%;
}
.profile-name .social-btns {
    float: left;
    margin: 20px 0 0;
    width: 100%;
}
.profile-name .social-btns > li {
    float: left;
}
.profile-name .social-btns > li:first-child {
    margin: 0;
}
.profile-count {
    bottom: 20px;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 10px;
}
.profile-count > li {
    color: #ffffff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 31px;
    font-weight: bold;
    letter-spacing: 0.3px;
    list-style: none outside none;
    text-align: center;
    width: auto;
}
.profile-count > li > i {
    color: #d4d4d4;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
    margin-top: 6px;
    text-align: center;
    width: 100%;
}
.profile-connect {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 20px;
    top: 20px;
}
.profile-connect a:hover {
    background: #ed6b75 none repeat scroll 0 0;
    color: #ffffff;
}
.profile-connect > li {
    float: left;
    margin-left: 10px;
}
.profile-connect > li > a {
    background: #ffffff none repeat scroll 0 0;
    
    -webkit-border-radius: 46px;
    -moz-border-radius: 46px;
    -ms-border-radius: 46px;
    -o-border-radius: 46px;
    border-radius: 46px;

    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    letter-spacing: 0;
    padding: 9px 30px;
}
/* Friend list */
.friend-list {
    float: left;
    margin-top: 20px;
    width: 100%;
}
.friend-list ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.friend-list li {
    border-bottom: 1px dotted #e8ecec;
    float: left;
    padding: 16px 30px;
    position: relative;
    width: 100%;
}
.friend-list li img {
    border: 1px solid #d8d8d8;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    float: left;
    margin-right: 20px;
    padding: 2px;
}
.friend-list li h3 {
    display: block;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    letter-spacing: 0.3px;
    line-height: 19px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}
.friend-list li h3 i {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: 0.3px;
    margin-top: 4px;
    width: 100%;
    color:#999;
}
.friend-list li > span {
    bottom: 7px;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    letter-spacing: 0.3px;
    position: absolute;
    right: 30px;
    top: 28px;
}
.friend-list li > span:before {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    content: "";
    height: 6px;
    left: -10px;
    position: absolute;
    top: 11px;
    width: 6px;
}
.friend-list li > span.online:before{
    background: #33b7a0;
}
.friend-list li > span.offline:before{
    background: #ed6b75;
}

/* Birthday */
.birthday {
    float: left;
    padding: 26px 30px;
    width: 100%;
}
.birthday > h3 {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    margin: 0;
    width: 100%;
    z-index: 0;
    color: #ffffff;
}
.my-location > h3 a {
    color: #ed6b75;
}
.birthday > h3 > i {
    font-size: 16px;
    margin-right: 12px;
    top: 6px;
    z-index: 0;
}
.birthday > h3 > span {
    color: #ffffff;
    float: right;
    font-size: 13px;
    line-height: 18px;
}

/* My Location */
.my-location {
    float: left;
    width: 100%;
}
.my-location iframe{
    float:left;
    width:100%;
    border:none;
}
.my-location > h3 {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    margin: 20px 0;
    padding: 0 20px;
    width: 100%;
}
.my-location > h3 > i {
    margin-right: 10px;
}

/* Product Sec */
.product-sec {
    float: left;
    width: 100%;
}
.product-box {
    float: left;
    margin-top: 30px;
    width: 100%;
}

.product-thumb {
    float: left;
    position: relative;
    width: 100%;
    z-index: 0;
}
.product-thumb > img {
    float: left;
    width: 100%;
}
.product-thumb a.add-to-cart {
    background: #ed6b75 none repeat scroll 0 0;
    bottom: 20px;
    color: #ffffff;
    font-size: 14px;
    height: 45px;
    left: 20px;
    line-height: 45px;
    position: absolute;
    text-align: center;
    width: 48px;
}
.product-box > h3 {
    color: #1b1d21;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 19px;
    margin: 22px 0 7px;
    width: 100%;
}
.product-box > h3 a{
    color: #1b1d21;
}
.product-box span.price {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 15px;
}
.product-thumb::before {
    background: #000000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);

    width: 100%;
}
.product-box:hover .product-thumb::before {
    opacity: 0.7;
    
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.product-box:hover .product-thumb a.add-to-cart {
    bottom: 50%;
    left: 50%;

    -webkit-transform: translateY(50%) translateX(-50%);
    -moz-transform: translateY(50%) translateX(-50%);
    -ms-transform: translateY(50%) translateX(-50%);
    -o-transform: translateY(50%) translateX(-50%);
    transform: translateY(50%) translateX(-50%);
    background: none;
    font-size: 25px;
}

/* Cart lists */
.cart-lists {
    float: left;
    width: 100%;
}
.cart-lists > ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.cart-lists > ul > li {
    background: #f5f5f5 none repeat scroll 0 0;
    display: table;
    float: left;
    padding: 30px;
    width: 100%;
}
.cart-thumb {
    display: table-cell;
    float: left;
    position: relative;
    width: 400px;
}
.cart-thumb > span {
    float: left;
    width: 150px;
}
.cart-thumb > span > img {
    float: left;
    width: 100%;
}
.cart-thumb > a.delete-cart {
    background: #ed6b75 none repeat scroll 0 0;
    
    -webkit-border-radius: 0 50% 50%;
    -moz-border-radius: 0 50% 50%;
    -ms-border-radius: 0 50% 50%;
    -o-border-radius: 0 50% 50%;
    border-radius: 0 50% 50%;

    color: #ffffff;
    cursor: pointer;
    font-size: 14px;
    height: 38px;
    left: 0;
    line-height: 38px;
    opacity: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 38px;
}
.cart-lists > ul > li:hover .cart-thumb > a.delete-cart{
    opacity: 1;
}
.cart-thumb > h3 {
    display: table;
    font-family: "Microsoft YaHei";
    padding-left: 30px;
}
.cart-thumb > h3 a {
    color: #333333;
    font-family: "Microsoft YaHei";
    font-size: 21px;
}
.price-cart-item {
    display: block;
}
.price-cart-item span {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 18px;
    padding-left: 30px;
}


.c-input-number {
    display: table-cell;
    vertical-align: middle;
    width: 180px;
}
.c-input-number > span {
    float: left;
    width: 100%;
}
.c-input-number > span input.manual-adjust {
    border: medium none;
    float: left;
    font-family: "Microsoft YaHei";
    padding: 12px 0;
    text-align: center;
    width: 100%;
}
.c-input-number > span input.userincr-btn-dec {
    border: medium none;
    color: #ffffff;
    float: left;
    font-family: "Microsoft YaHei";
    padding: 6px 0;
    width: 50%;
    border-right: 1px solid #ffffff;
    background-color: #ed6b75;
}
.c-input-number > span input.userincr-btn-inc {
    border: medium none;
    color: #ffffff;
    float: left;
    font-family: "Microsoft YaHei";
    padding: 6px 0;
    width: 50%;
    background-color: #ed6b75;
}
.cart-item-quantity {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 300px;
}
.cart-item-quantity > i {
    font-size: 20px;
    margin-right: 10px;
}
.cart-thumb > p {
    display: inline-block;
    margin-top: 11px;
    padding-left: 30px;
}
.cart-lists > ul > li:nth-child(2n+1) {
    background: #fafafa none repeat scroll 0 0;
}

.coupens-area {
    float: left;
    margin-bottom: 40px;
    margin-top: 40px;
    width: 100%;
}
.cart-total-box .flat-btn {
    margin-top: 20px;
}
.coupens-area .coupon {
    float: left;
    margin-right: 20px;
}
.coupens-area .coupon > label {
    float: left;
    font-family: "Microsoft YaHei";
    line-height: 56px;
    margin: 0 12px 0 0;
}
.coupens-area .coupon > input[type="text"] {
    border: 1px solid #e8ecec;
    float: left;
    height: 57px;
    margin-right: 6px;
    padding: 0 20px;
}
.coupens-area > input {
    background: #555555 none repeat scroll 0 0;
    margin-right: 1px;
}
.cart-total-box li > select {
    border: 1px solid #e8ecec;
    color: #909090;
    float: left;
    font-family: "Microsoft YaHei";
    height: 46px;
    padding: 0 20px;
    width: 100%;
}
.cart-total-box li > input[type="text"] {
    border: 1px solid #e8ecec;
    float: left;
    height: 47px;
    padding: 0 26px;
    width: 100%;
}
.flat-btn {
    border: 1px solid transparent;
    color: #fff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    font-weight: bold;
    padding: 16px 36px;
    background-color: #ed6b75;
}
/* Shopping Product Tab */
.single-product-tabs {
    float: left;
    width: 100%;
}
.single-product-tabs > .tab-content {
    float: left;
    width: 100%;
}
.single-product-tabs > .tab-content img {
    float: left;
    width: 100%;
}
.single-product-tabs > .nav {
    border: medium none;
    float: left;
    margin: 30px -15px 0;
}
.single-product-tabs > .nav > li {
    float: left;
    margin: 0;
    padding: 0 15px;
    width: 33.334%;
}
.single-product-tabs > .nav > li a {
    border: medium none;
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
}
.single-product-infos {
    float: left;
    width: 100%;
}
.single-product-infos > h2 {
    float: left;
    margin-bottom: 14px;
    margin-top: 50px;
    width: 100%;
}
.single-product-sec {
    float: left;
    margin-top: 30px;
    width: 100%;
}
.single-product-tabs > img {
    float: left;
    width: 100%;
}
.single-product-infos span.price {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 20px;
    margin-bottom: 13px;
    margin-top: 10px;
    width: 100%;
}
.single-product-infos .rating {
    float: left;
    margin-bottom: 16px;
    width: 100%;
}
.single-product-infos a.flat-btn {
    background: #555555 none repeat scroll 0 0;
    margin-right: 5px;
    margin-top: 60px;
}
.flat-btn > i {
    margin-right: 13px;
}
.single-product-infos a.flat-btn:hover {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}
.single-product-infos a.flat-btn.add_to_cart:hover {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}
.single-product-infos .c-input-number > span > input.manual-adjust {
    background: #f5f5f5 none repeat scroll 0 0;
}
.single-product-infos > p {
    float: left;
    margin-bottom: 30px;
    width: 100%;
}

.cart-total-box {
    float: left;
    width: 100%;
}
.cart-head-title {
    background: #444444 none repeat scroll 0 0;
    color: #ffffff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.5px;
    margin: 0;
    padding: 26px 0;
    text-align: center;
    width: 100%;
}
.cart-total-box > ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.cart-total-box li {
    background: #f5f5f5 none repeat scroll 0 0;
    float: left;
    padding: 18px 60px;
    width: 100%;
}
.cart-total-box li:nth-child(2n+1) {
    background: #fcfcfc none repeat scroll 0 0;
}
.cart-total-box li > h3 {
    color: #575757;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    margin: 4px 0;
}
.cart-total-box li span {
    float: right;
}
.account-create a.flat-btn {
    float: right;
    margin-top: 50px;
}

/* Shopping Product Tab */
.single-product-tabs {
    float: left;
    width: 100%;
}
.single-product-tabs > .tab-content {
    float: left;
    width: 100%;
}
.single-product-tabs > .tab-content img {
    float: left;
    width: 100%;
}
.single-product-tabs > .nav {
    border: medium none;
    float: left;
    margin: 30px -15px 0;
}
.single-product-tabs > .nav > li {
    float: left;
    margin: 0;
    padding: 0 15px;
    width: 33.334%;
}
.single-product-tabs > .nav > li a {
    border: medium none !important;
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
}
.single-product-infos {
    float: left;
    width: 100%;
}
.single-product-infos > h2 {
    float: left;
    margin-bottom: 14px;
    margin-top: 20px;
    width: 100%;
}
.single-product-infos span.price {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 20px;
    margin-bottom: 13px;
    margin-top: 10px;
    width: 100%;
}
.single-product-infos .rating {
    float: left;
    margin-bottom: 16px;
    width: 100%;
}
.single-product-infos a.flat-btn {
    background: #555555 none repeat scroll 0 0;
    margin-right: 5px;
    margin-top: 60px;
}
.flat-btn > i {
    margin-right: 13px;
}
.single-product-infos a.flat-btn:hover {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}
.single-product-infos a.flat-btn.add_to_cart:hover {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}
.single-product-infos .c-input-number > span > input.manual-adjust {
    background: #f5f5f5 none repeat scroll 0 0;
}
.single-product-infos > p {
    float: left;
    margin-bottom: 30px;
    width: 100%;
}
.flat-btn:hover {
    background: #ed6b75 none repeat scroll 0 0;
    color: #ffffff;
}

#wrapper { max-width: 600px; margin: 0 auto; text-align: center; } 
#gallery { overflow: hidden; }
#gallery a { display: block; float: left; }
#gallery a img { display: block; border: 0; }


.billing-sec {
    float: left;
    margin-top: 30px;
    width: 100%;
}
.billing-sec .field {
    float: left;
    margin-bottom: 30px;
}
.billing-sec button {
    background: #333333 none repeat scroll 0 0;
    border: medium none;
    
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    border-radius: 40px;

    color: #ffffff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    letter-spacing: 0.25px;
    margin-top: 40px;
    padding: 14px 40px;
    text-decoration: none;
}
.billing-sec .field > label {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-weight: normal;
    margin: 0 0 10px;
    width: 100%;
}
.billing-sec .field > label span {
    color: red;
}
.billing-sec .field input {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #e1e1e1;
    float: left;
    font-size: 12px;
    height: 50px;
    letter-spacing: 0.5px;
    padding: 0 30px;
    width: 100%;
}
.billing-sec .field > select {
    border: 1px solid #e1e1e1;
    float: left;
    font-size: 12px;
    height: 50px;
    padding: 0 30px;
    width: 100%;
}
.billing-sec .field > textarea {
    border: medium none;
    background: #fff none repeat scroll 0 0;
    border: 1px solid #e1e1e1;

    float: left;
    min-height: 160px;
    padding: 20px 30px;
    width: 100%;
}
.payment li:last-child {
    margin: 0;
}
/* Range Slider */
.range-slider {
    background: #fff none repeat scroll 0 0;
    float: left;
    width: 100%;
    margin-top:30px;
}
/* My Cart */
.my-cart {
    background: #ffffff none repeat scroll 0 0;

    float: left;
    margin-top: 30px;
    overflow: hidden;
    width: 100%;
}
.cart-heading {
    background: #efefef none repeat scroll 0 0;
    float: left;
    padding: 23px 0;
    width: 100%;
}
.cart-heading h2 {
    color: #2e2e2e;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 15px;
    font-weight: 500;
    line-height: 12px;
    margin: 0;
    text-align: center;
    width: 100%;
}
.cart-product {
    width: 40%;
    float: left;
    padding:0 20px;
}
.cart-price {
    width: 20%;
    float: left;
    padding:0 20px;
}
.cart-quantity {
    width: 20%;
    float: left;
    padding:0 20px;
}
.cart-total {
    width: 20%;
    float: left;
    padding:0 20px;
}

.my-cart > ul {
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
}
.my-cart li:nth-child(2n+2) {
    background: #ffffff none repeat scroll 0 0;
}
.my-cart:last-child{
    border-bottom:0;
}
.my-cart li {
    background: #fbfbfb none repeat scroll 0 0;
    border-bottom: 1px solid #ededed;
    float: left;
    list-style: outside none none;
    width: 100%;
}
.my-cart li > div {
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #DBDBDB;
    float: left;
    min-height: 47px;
    padding: 10px 20px;
    position: relative;
}
.my-cart li > div:last-child{
    border-right:none;
}


.cart-total-sec > ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.cart-total-sec > ul > li {
    float: left;
    padding: 16px 80px;
    width: 100%;
}
.cart-total-sec > ul > li > p {
    float: left;
    margin: 0;
    width: 70%;
}

.payment {
    float: left;
    margin-top: 40px;
    padding: 0;
    width: 100%;
}
.payment > ul {
    border: 1px solid #e1e1e1;
    float: left;
    margin: 0;
    padding: 40px;
    width: 100%;
}
.payment-desc .payment-desc span:last-child {
    margin-bottom: 0;
}
.payment a {
    float: left;
}
.payment li {
    float: left;
    list-style: outside none none;
    margin-bottom: 30px;
    width: 100%;
}
.payment-method {
    float: left;
    width: 100%;
}
.payment-method > label {
    display: list-item;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-weight: 100;
    letter-spacing: 0.25px;
    line-height: 19px;
    list-style: outside none none;
    margin-top: 6px;
}
.payment-desc {
    float: left;
    width: 100%;
}
.payment-desc > span {
    background: #e8edf2 none repeat scroll 0 0;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

    color: #738282;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    letter-spacing: 0.3px;
    line-height: 26px;
    margin: 10px 0 0;
    padding: 23px 40px;
    position: relative;
    width: 100%;
}
.payment-desc > span::before {
    border-bottom: 6px solid #e8edf2;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: "";
    left: 22px;
    position: absolute;
    top: -5px;
}
.payment a {
    background: #ed6b75 none repeat scroll 0 0;
    border: 1px solid;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

    color: #ffffff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    letter-spacing: 0.25px;
    padding: 12px 20px;
    text-decoration: none;
}


/*!
 * Hover.css (http://ianlunn.co.uk/)
 * Version: 1.0.9
 * Author: Ian Lunn @IanLunn
 * Author URL: http://ianlunn.co.uk/
 * Github: https://github.com/IanLunn/Hover

 * Made available under a MIT License:
 * http://www.opensource.org/licenses/mit-license.php

 * Hover.css Copyright Ian Lunn 2014.
 */
/* Default styles for the demo buttons */
.button {
  margin: .4em;
  padding: 1em;
  cursor: pointer;
  background: #e1e1e1;
  text-decoration: none;
  color: #666666;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* 2D TRANSITIONS */
/* Grow */
.grow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  -ms-transition-property: transform;
  -o-transition-property: transform;
  transition-property: transform;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover, .grow:focus, .grow:active {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

/* Shrink */
.shrink {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  -ms-transition-property: transform;
  -o-transition-property: transform;
  transition-property: transform;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.shrink:hover, .shrink:focus, .shrink:active {
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
}

/* Pulse */
@-webkit-keyframes pulse {
  25% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }

  75% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@keyframes pulse {
  25% {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
  }

  75% {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.pulse {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pulse:hover, .pulse:focus, .pulse:active {
  -webkit-animation-name: pulse;
  -moz-animation-name: pulse;
  -ms-animation-name: pulse;
  -o-animation-name: pulse;
  animation-name: pulse;

  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;


  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;

}

/* Pulse Grow */
@-webkit-keyframes pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);

  }
}

@keyframes pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);

  }
}

.pulse-grow {
  display: inline-block;
  
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -ms-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -o-box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);

}
.pulse-grow:hover, .pulse-grow:focus, .pulse-grow:active {
  -webkit-animation-name: pulse-grow;
  -moz-animation-name: pulse-grow;
  -ms-animation-name: pulse-grow;
  -o-animation-name: pulse-grow;
  animation-name: pulse-grow;

  -webkit-animation-duration: 0.3s;
  -moz-animation-duration: 0.3s;
  -ms-animation-duration: 0.3s;
  -o-animation-duration: 0.3s;
  animation-duration: 0.3s;

  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;

  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;

  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  -ms-animation-direction: alternate;
  -o-animation-direction: alternate;
  animation-direction: alternate;
}

/* Pulse Shrink */
@-webkit-keyframes pulse-shrink {
  to {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@keyframes pulse-shrink {
  to {
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.pulse-shrink {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pulse-shrink:hover, .pulse-shrink:focus, .pulse-shrink:active {
  -webkit-animation-name: pulse-shrink;
  -moz-animation-name: pulse-shrink;
  -ms-animation-name: pulse-shrink;
  -o-animation-name: pulse-shrink;
  animation-name: pulse-shrink;
  
  -webkit-animation-duration: 0.3s;
  -moz-animation-duration: 0.3s;
  -ms-animation-duration: 0.3s;
  -o-animation-duration: 0.3s;
  animation-duration: 0.3s;
  
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
  
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  -ms-animation-direction: alternate;
  -o-animation-direction: alternate;
  animation-direction: alternate;
}

/* Push */
@-webkit-keyframes push {
  50% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes push {
  50% {
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

.push {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.push:hover, .push:focus, .push:active {
  -webkit-animation-name: push;
  -moz-animation-name: push;
  -ms-animation-name: push;
  -o-animation-name: push;
  animation-name: push;
  
  -webkit-animation-duration: 0.3s;
  -moz-animation-duration: 0.3s;
  -ms-animation-duration: 0.3s;
  -o-animation-duration: 0.3s;
  animation-duration: 0.3s;
  
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
  
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Pop */
@-webkit-keyframes pop {
  50% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pop {
  50% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }

  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
}

.pop {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pop:hover, .pop:focus, .pop:active {
  -webkit-animation-name: pop;
  -moz-animation-name: pop;
  -ms-animation-name: pop;
  -o-animation-name: pop;
  animation-name: pop;
  
  -webkit-animation-duration: 0.3s;
  -moz-animation-duration: 0.3s;
  -ms-animation-duration: 0.3s;
  -o-animation-duration: 0.3s;
  animation-duration: 0.3s;
  
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
  
  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Rotate */
.rotate {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  
  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  -ms-transition-property: transform;
  -o-transition-property: transform;
  transition-property: transform;
  
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.rotate:hover, .rotate:focus, .rotate:active {
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  transform: rotate(4deg);
}

/* Grow Rotate */
.grow-rotate {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  
  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  -ms-transition-property: transform;
  -o-transition-property: transform;
  transition-property: transform;
  
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow-rotate:hover, .grow-rotate:focus, .grow-rotate:active {
  -webkit-transform: scale(1.1) rotate(4deg);
  -moz-transform: scale(1.1) rotate(4deg);
  -ms-transform: scale(1.1) rotate(4deg);
  -o-transform: scale(1.1) rotate(4deg);
  transform: scale(1.1) rotate(4deg);
}

/* Float */
.float {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
  
  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  -ms-transition-property: transform;
  -o-transition-property: transform;
  transition-property: transform;
  
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.float:hover, .float:focus, .float:active {
  -webkit-transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  -o-transform: translateY(-5px);
  transform: translateY(-5px);
}

/* Sink */
.sink {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  -ms-transition-property: transform;
  -o-transition-property: transform;
  transition-property: transform;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.sink:hover, .sink:focus, .sink:active {
  -webkit-transform: translateY(5px);
  -moz-transform: translateY(5px);
  -ms-transform: translateY(5px);
  -o-transform: translateY(5px);
  transform: translateY(5px);
}

/* Hover */
@-webkit-keyframes hover {
  50% {
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -o-transform: translateY(-3px);
    transform: translateY(-3px);
  }

  100% {
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    -o-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}

@keyframes hover {
  50% {
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -o-transform: translateY(-3px);
    transform: translateY(-3px);
  }

  100% {
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    -o-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}

.hover {
  display: inline-block;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;

  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  -ms-transition-property: transform;
  -o-transition-property: transform;
  transition-property: transform;
  
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hover:hover, .hover:focus, .hover:active {
  -webkit-transform: translateY(-6px);
  -moz-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  -o-transform: translateY(-6px);
  transform: translateY(-6px);
  
  -webkit-animation-name: hover;
  -moz-animation-name: hover;
  -ms-animation-name: hover;
  -o-animation-name: hover;
  animation-name: hover;
  
  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  -ms-animation-duration: 1.5s;
  -o-animation-duration: 1.5s;
  animation-duration: 1.5s;
  
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  -ms-animation-delay: 0.3s;
  -o-animation-delay: 0.3s;
  animation-delay: 0.3s;
  
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
  
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  -ms-animation-direction: alternate;
  -o-animation-direction: alternate;
  animation-direction: alternate;
}

/* Hang */
@-webkit-keyframes hang {
  50% {
    -webkit-transform: translateY(3px);
    -moz-transform: translateY(3px);
    -ms-transform: translateY(3px);
    -o-transform: translateY(3px);
    transform: translateY(3px);
  }

  100% {
    -webkit-transform: translateY(6px);
    -moz-transform: translateY(6px);
    -ms-transform: translateY(6px);
    -o-transform: translateY(6px);
    transform: translateY(6px);
  }
}

@keyframes hang {
  50% {
    -webkit-transform: translateY(3px);
    -moz-transform: translateY(3px);
    -ms-transform: translateY(3px);
    -o-transform: translateY(3px);
    transform: translateY(3px);
  }

  100% {
    -webkit-transform: translateY(6px);
    -moz-transform: translateY(6px);
    -ms-transform: translateY(6px);
    -o-transform: translateY(6px);
    transform: translateY(6px);
  }
}

.hang {
  display: inline-block;
  -webkit-transition-duration: 0.5s;
  -moz-transition-duration: 0.5s;
  -ms-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  transition-duration: 0.5s;
  
  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  -ms-transition-property: transform;
  -o-transition-property: transform;
  transition-property: transform;
  
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hang:hover, .hang:focus, .hang:active {
  -webkit-transform: translateY(6px);
  -moz-transform: translateY(6px);
  -ms-transform: translateY(6px);
  -o-transform: translateY(6px);
  transform: translateY(6px);
  
  -webkit-animation-name: hang;
  -moz-animation-name: hang;
  -ms-animation-name: hang;
  -o-animation-name: hang;
  animation-name: hang;
  
  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  -ms-animation-duration: 1.5s;
  -o-animation-duration: 1.5s;
  animation-duration: 1.5s;
  
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  -ms-animation-delay: 0.3s;
  -o-animation-delay: 0.3s;
  animation-delay: 0.3s;
  
  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;
  
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  -ms-animation-direction: alternate;
  -o-animation-direction: alternate;
  animation-direction: alternate;
}


/* Skew */
.skew {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  -ms-transition-property: transform;
  -o-transition-property: transform;
  transition-property: transform;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.skew:hover, .skew:focus, .skew:active {
  -webkit-transform: skew(-10deg);
  -moz-transform: skew(-10deg);
  -ms-transform: skew(-10deg);
  -o-transform: skew(-10deg);
  transform: skew(-10deg);
}

/* Skew Forward */
.skew-forward {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;]
  -ms-transition-duration: 0.3s;]
  -o-transition-duration: 0.3s;]
  transition-duration: 0.3s;]

  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  -ms-transition-property: transform;
  -o-transition-property: transform;
  transition-property: transform;

  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.skew-forward:hover, .skew-forward:focus, .skew-forward:active {
  -webkit-transform: skew(-10deg);
  -moz-transform: skew(-10deg);
  -ms-transform: skew(-10deg);
  -o-transform: skew(-10deg);
  transform: skew(-10deg);
}

/* Skew Backward */
.skew-backward {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  -ms-transition-property: transform;
  -o-transition-property: transform;
  transition-property: transform;

  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.skew-backward:hover, .skew-backward:focus, .skew-backward:active {
  -webkit-transform: skew(10deg);
  -moz-transform: skew(10deg);
  -ms-transform: skew(10deg);
  -o-transform: skew(10deg);
  transform: skew(10deg);
}

/* Wobble Vertical */
@-webkit-keyframes wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    -ms-transform: translateY(8px);
    -o-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    -o-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    -moz-transform: translateY(4px);
    -ms-transform: translateY(4px);
    -o-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    -moz-transform: translateY(1px);
    -ms-transform: translateY(1px);
    -o-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    -moz-transform: translateY(8px);
    -ms-transform: translateY(8px);
    -o-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    -o-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    -moz-transform: translateY(4px);
    -ms-transform: translateY(4px);
    -o-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    -ms-transform: translateY(-2px);
    -o-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    -moz-transform: translateY(1px);
    -ms-transform: translateY(1px);
    -o-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}

.wobble-vertical {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-vertical:hover, .wobble-vertical:focus, .wobble-vertical:active {
  -webkit-animation-name: wobble-vertical;
  -moz-animation-name: wobble-vertical;
  -ms-animation-name: wobble-vertical;
  -o-animation-name: wobble-vertical;
  animation-name: wobble-vertical;

  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  -o-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;

  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Wobble Horizontal */
@-webkit-keyframes wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    -moz-transform: translateX(8px);
    -ms-transform: translateX(8px);
    -o-transform: translateX(8px);
    transform: translateX(8px);
  }

  33.3% {
    -webkit-transform: translateX(-6px);
    -moz-transform: translateX(-6px);
    -ms-transform: translateX(-6px);
    -o-transform: translateX(-6px);
    transform: translateX(-6px);
  }

  49.95% {
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(4px);
  }

  66.6% {
    -webkit-transform: translateX(-2px);
    -moz-transform: translateX(-2px);
    -ms-transform: translateX(-2px);
    -o-transform: translateX(-2px);
    transform: translateX(-2px);
  }

  83.25% {
    -webkit-transform: translateX(1px);
    -moz-transform: translateX(1px);
    -ms-transform: translateX(1px);
    -o-transform: translateX(1px);
    transform: translateX(1px);
  }

  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes wobble-horizontal {
  16.65% {
    -webkit-transform: translateX(8px);
    -moz-transform: translateX(8px);
    -ms-transform: translateX(8px);
    -o-transform: translateX(8px);
    transform: translateX(8px);
  }

  33.3% {
    -webkit-transform: translateX(-6px);
    -moz-transform: translateX(-6px);
    -ms-transform: translateX(-6px);
    -o-transform: translateX(-6px);
    transform: translateX(-6px);
  }

  49.95% {
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    -ms-transform: translateX(4px);
    -o-transform: translateX(4px);
    transform: translateX(4px);
  }

  66.6% {
    -webkit-transform: translateX(-2px);
    -moz-transform: translateX(-2px);
    -ms-transform: translateX(-2px);
    -o-transform: translateX(-2px);
    transform: translateX(-2px);
  }

  83.25% {
    -webkit-transform: translateX(1px);
    -moz-transform: translateX(1px);
    -ms-transform: translateX(1px);
    -o-transform: translateX(1px);
    transform: translateX(1px);
  }

  100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}

.wobble-horizontal {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-horizontal:hover, .wobble-horizontal:focus, .wobble-horizontal:active {
  -webkit-animation-name: wobble-horizontal;
  -moz-animation-name: wobble-horizontal;
  -ms-animation-name: wobble-horizontal;
  -o-animation-name: wobble-horizontal;
  animation-name: wobble-horizontal;

  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  -o-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;

  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Wobble To Bottom Right */
@-webkit-keyframes wobble-to-bottom-right {
  16.65% {
    -webkit-transform: translate(8px, 8px);
    -moz-transform: translate(8px, 8px);
    -ms-transform: translate(8px, 8px);
    -o-transform: translate(8px, 8px);
    transform: translate(8px, 8px);
  }

  33.3% {
    -webkit-transform: translate(-6px, -6px);
    -moz-transform: translate(-6px, -6px);
    -ms-transform: translate(-6px, -6px);
    -o-transform: translate(-6px, -6px);
    transform: translate(-6px, -6px);
  }

  49.95% {
    -webkit-transform: translate(4px, 4px);
    -moz-transform: translate(4px, 4px);
    -ms-transform: translate(4px, 4px);
    -o-transform: translate(4px, 4px);
    transform: translate(4px, 4px);
  }

  66.6% {
    -webkit-transform: translate(-2px, -2px);
    -moz-transform: translate(-2px, -2px);
    -ms-transform: translate(-2px, -2px);
    -o-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);
  }

  83.25% {
    -webkit-transform: translate(1px, 1px);
    -moz-transform: translate(1px, 1px);
    -ms-transform: translate(1px, 1px);
    -o-transform: translate(1px, 1px);
    transform: translate(1px, 1px);
  }

  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes wobble-to-bottom-right {
  16.65% {
    -webkit-transform: translate(8px, 8px);
    -moz-transform: translate(8px, 8px);
    -ms-transform: translate(8px, 8px);
    -o-transform: translate(8px, 8px);
    transform: translate(8px, 8px);
  }

  33.3% {
    -webkit-transform: translate(-6px, -6px);
    -moz-transform: translate(-6px, -6px);
    -ms-transform: translate(-6px, -6px);
    -o-transform: translate(-6px, -6px);
    transform: translate(-6px, -6px);
  }

  49.95% {
    -webkit-transform: translate(4px, 4px);
    -moz-transform: translate(4px, 4px);
    -ms-transform: translate(4px, 4px);
    -o-transform: translate(4px, 4px);
    transform: translate(4px, 4px);
  }

  66.6% {
    -webkit-transform: translate(-2px, -2px);
    -moz-transform: translate(-2px, -2px);
    -ms-transform: translate(-2px, -2px);
    -o-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);
  }

  83.25% {
    -webkit-transform: translate(1px, 1px);
    -moz-transform: translate(1px, 1px);
    -ms-transform: translate(1px, 1px);
    -o- transform: translate(1px, 1px);
    transform: translate(1px, 1px);
  }

  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

.wobble-to-bottom-right {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-to-bottom-right:hover, .wobble-to-bottom-right:focus, .wobble-to-bottom-right:active {
  -webkit-animation-name: wobble-to-bottom-right;
  -moz-animation-name: wobble-to-bottom-right;
  -ms-animation-name: wobble-to-bottom-right;
  -o-animation-name: wobble-to-bottom-right;
  animation-name: wobble-to-bottom-right;

  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  -o-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;

  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Wobble To Top Right */
@-webkit-keyframes wobble-to-top-right {
  16.65% {
    -webkit-transform: translate(8px, -8px);
    -moz-transform: translate(8px, -8px);
    -ms-transform: translate(8px, -8px);
    -o-transform: translate(8px, -8px);
    transform: translate(8px, -8px);
  }

  33.3% {
    -webkit-transform: translate(-6px, 6px);
    -moz-transform: translate(-6px, 6px);
    -ms-transform: translate(-6px, 6px);
    -o-transform: translate(-6px, 6px);
    transform: translate(-6px, 6px);
  }

  49.95% {
    -webkit-transform: translate(4px, -4px);
    -moz-transform: translate(4px, -4px);
    -ms-transform: translate(4px, -4px);
    -o-transform: translate(4px, -4px);
    transform: translate(4px, -4px);
  }

  66.6% {
    -webkit-transform: translate(-2px, 2px);
    -moz-transform: translate(-2px, 2px);
    -ms-transform: translate(-2px, 2px);
    -o-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }

  83.25% {
    -webkit-transform: translate(1px, -1px);
    -moz-transform: translate(1px, -1px);
    -ms-transform: translate(1px, -1px);
    -o-transform: translate(1px, -1px);
    transform: translate(1px, -1px);
  }

  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes wobble-to-top-right {
  16.65% {
    -webkit-transform: translate(8px, -8px);
    -moz-transform: translate(8px, -8px);
    -ms-transform: translate(8px, -8px);
    -o-transform: translate(8px, -8px);
    transform: translate(8px, -8px);
  }

  33.3% {
    -webkit-transform: translate(-6px, 6px);
    -moz-transform: translate(-6px, 6px);
    -ms-transform: translate(-6px, 6px);
    -o-transform: translate(-6px, 6px);
    transform: translate(-6px, 6px);
  }

  49.95% {
    -webkit-transform: translate(4px, -4px);
    -moz-transform: translate(4px, -4px);
    -ms-transform: translate(4px, -4px);
    -o-transform: translate(4px, -4px);
    transform: translate(4px, -4px);
  }

  66.6% {
    -webkit-transform: translate(-2px, 2px);
    -moz-transform: translate(-2px, 2px);
    -ms-transform: translate(-2px, 2px);
    -o-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }

  83.25% {
    -webkit-transform: translate(1px, -1px);
    -moz-transform: translate(1px, -1px);
    -ms-transform: translate(1px, -1px);
    -o-transform: translate(1px, -1px);
    transform: translate(1px, -1px);
  }

  100% {
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

.wobble-to-top-right {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-to-top-right:hover, .wobble-to-top-right:focus, .wobble-to-top-right:active {
  -webkit-animation-name: wobble-to-top-right;
  -moz-animation-name: wobble-to-top-right;
  -ms-animation-name: wobble-to-top-right;
  -o-animation-name: wobble-to-top-right;
  animation-name: wobble-to-top-right;

  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  -o-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;

  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Wobble Top */
@-webkit-keyframes wobble-top {
  16.65% {
    -webkit-transform: skew(-12deg);
    -moz-transform: skew(-12deg);
    -ms-transform: skew(-12deg);
    -o-transform: skew(-12deg);
    transform: skew(-12deg);
  }

  33.3% {
    -webkit-transform: skew(10deg);
    -moz-transform: skew(10deg);
    -ms-transform: skew(10deg);
    -o-transform: skew(10deg);
    transform: skew(10deg);
  }

  49.95% {
    -webkit-transform: skew(-6deg);
    -moz-transform: skew(-6deg);
    -ms-transform: skew(-6deg);
    -o-transform: skew(-6deg);
    transform: skew(-6deg);
  }

  66.6% {
    -webkit-transform: skew(4deg);
    -moz-transform: skew(4deg);
    -ms-transform: skew(4deg);
    -o-transform: skew(4deg);
    transform: skew(4deg);
  }

  83.25% {
    -webkit-transform: skew(-2deg);
    -moz-transform: skew(-2deg);
    -ms-transform: skew(-2deg);
    -o-transform: skew(-2deg);
    transform: skew(-2deg);
  }

  100% {
    -webkit-transform: skew(0);
    -moz-transform: skew(0);
    -ms-transform: skew(0);
    -o-transform: skew(0);
    transform: skew(0);
  }
}

@keyframes wobble-top {
  16.65% {
    -webkit-transform: skew(-12deg);
    -moz-transform: skew(-12deg);
    -ms-transform: skew(-12deg);
    -o-transform: skew(-12deg);
    transform: skew(-12deg);
  }

  33.3% {
    -webkit-transform: skew(10deg);
    -moz-transform: skew(10deg);
    -ms-transform: skew(10deg);
    -o-transform: skew(10deg);
    transform: skew(10deg);
  }

  49.95% {
    -webkit-transform: skew(-6deg);
    -moz-transform: skew(-6deg);
    -ms-transform: skew(-6deg);
    -o-transform: skew(-6deg);
    transform: skew(-6deg);
  }

  66.6% {
    -webkit-transform: skew(4deg);
    -moz-transform: skew(4deg);
    -ms-transform: skew(4deg);
    -o-transform: skew(4deg);
    transform: skew(4deg);
  }

  83.25% {
    -webkit-transform: skew(-2deg);
    -moz-transform: skew(-2deg);
    -ms-transform: skew(-2deg);
    -o-transform: skew(-2deg);
    transform: skew(-2deg);
  }

  100% {
    -webkit-transform: skew(0);
    -moz-transform: skew(0);
    -ms-transform: skew(0);
    -o-transform: skew(0);
    transform: skew(0);
  }
}

.wobble-top {
  display: inline-block;
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-top:hover, .wobble-top:focus, .wobble-top:active {
  -webkit-animation-name: wobble-top;
  -moz-animation-name: wobble-top;
  -ms-animation-name: wobble-top;
  -o-animation-name: wobble-top;
  animation-name: wobble-top;

  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  -o-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;

  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Wobble Bottom */
@-webkit-keyframes wobble-bottom {
  16.65% {
    -webkit-transform: skew(-12deg);
    -moz-transform: skew(-12deg);
    -ms-transform: skew(-12deg);
    -o-transform: skew(-12deg);
    transform: skew(-12deg);
  }

  33.3% {
    -webkit-transform: skew(10deg);
    -moz-transform: skew(10deg);
    -ms-transform: skew(10deg);
    -o-transform: skew(10deg);
    transform: skew(10deg);
  }

  49.95% {
    -webkit-transform: skew(-6deg);
    -moz-transform: skew(-6deg);
    -ms-transform: skew(-6deg);
    -o-transform: skew(-6deg);
    transform: skew(-6deg);
  }

  66.6% {
    -webkit-transform: skew(4deg);
    -moz-transform: skew(4deg);
    -ms-transform: skew(4deg);
    -o-transform: skew(4deg);
    transform: skew(4deg);
  }

  83.25% {
    -webkit-transform: skew(-2deg);
    -moz-transform: skew(-2deg);
    -ms-transform: skew(-2deg);
    -o-transform: skew(-2deg);
    transform: skew(-2deg);
  }

  100% {
    -webkit-transform: skew(0);
    -moz-transform: skew(0);
    -ms-transform: skew(0);
    -o-transform: skew(0);
    transform: skew(0);
  }
}

@keyframes wobble-bottom {
  16.65% {
    -webkit-transform: skew(-12deg);
    -moz-transform: skew(-12deg);
    -ms-transform: skew(-12deg);
    -o-transform: skew(-12deg);
    transform: skew(-12deg);
  }

  33.3% {
    -webkit-transform: skew(10deg);
    -moz-transform: skew(10deg);
    -ms-transform: skew(10deg);
    -o-transform: skew(10deg);
    transform: skew(10deg);
  }

  49.95% {
    -webkit-transform: skew(-6deg);
    -moz-transform: skew(-6deg);
    -ms-transform: skew(-6deg);
    -o-transform: skew(-6deg);
    transform: skew(-6deg);
  }

  66.6% {
    -webkit-transform: skew(4deg);
    -moz-transform: skew(4deg);
    -ms-transform: skew(4deg);
    -o-transform: skew(4deg);
    transform: skew(4deg);
  }

  83.25% {
    -webkit-transform: skew(-2deg);
    -moz-transform: skew(-2deg);
    -ms-transform: skew(-2deg);
    -o-transform: skew(-2deg);
    transform: skew(-2deg);
  }

  100% {
    -webkit-transform: skew(0);
    -moz-transform: skew(0);
    -ms-transform: skew(0);
    -o-transform: skew(0);
    transform: skew(0);
  }
}

.wobble-bottom {
  display: inline-block;
  -webkit-transform-origin: 100% 0;
  -moz-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  -o-transform-origin: 100% 0;
  transform-origin: 100% 0;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-bottom:hover, .wobble-bottom:focus, .wobble-bottom:active {
  -webkit-animation-name: wobble-bottom;
  -moz-animation-name: wobble-bottom;
  -ms-animation-name: wobble-bottom;
  -o-animation-name: wobble-bottom;
  animation-name: wobble-bottom;

  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  -o-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;

  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Wobble Skew */
@-webkit-keyframes wobble-skew {
  16.65% {
    -webkit-transform: skew(-12deg);
    -moz-transform: skew(-12deg);
    -ms-transform: skew(-12deg);
    -o-transform: skew(-12deg);
    transform: skew(-12deg);
  }

  33.3% {
    -webkit-transform: skew(10deg);
    -moz-transform: skew(10deg);
    -ms-transform: skew(10deg);
    -o-transform: skew(10deg);
    transform: skew(10deg);
  }

  49.95% {
    -webkit-transform: skew(-6deg);
    -moz-transform: skew(-6deg);
    -ms-transform: skew(-6deg);
    -o-transform: skew(-6deg);
    transform: skew(-6deg);
  }

  66.6% {
    -webkit-transform: skew(4deg);
    -moz-transform: skew(4deg);
    -ms-transform: skew(4deg);
    -o-transform: skew(4deg);
    transform: skew(4deg);
  }

  83.25% {
    -webkit-transform: skew(-2deg);
    -moz-transform: skew(-2deg);
    -ms-transform: skew(-2deg);
    -o-transform: skew(-2deg);
    transform: skew(-2deg);
  }

  100% {
    -webkit-transform: skew(0);
    -moz-transform: skew(0);
    -ms-transform: skew(0);
    -o-transform: skew(0);
    transform: skew(0);
  }
}

@keyframes wobble-skew {
  16.65% {
    -webkit-transform: skew(-12deg);
    -moz-transform: skew(-12deg);
    -ms-transform: skew(-12deg);
    -o-transform: skew(-12deg);
    transform: skew(-12deg);
  }

  33.3% {
    -webkit-transform: skew(10deg);
    -moz-transform: skew(10deg);
    -ms-transform: skew(10deg);
    -o-transform: skew(10deg);
    transform: skew(10deg);
  }

  49.95% {
    -webkit-transform: skew(-6deg);
    -moz-transform: skew(-6deg);
    -ms-transform: skew(-6deg);
    -o-transform: skew(-6deg);
    transform: skew(-6deg);
  }

  66.6% {
    -webkit-transform: skew(4deg);
    -moz-transform: skew(4deg);
    -ms-transform: skew(4deg);
    -o-transform: skew(4deg);
    transform: skew(4deg);
  }

  83.25% {
    -webkit-transform: skew(-2deg);
    -moz-transform: skew(-2deg);
    -ms-transform: skew(-2deg);
    -o-transform: skew(-2deg);
    transform: skew(-2deg);
  }

  100% {
    -webkit-transform: skew(0);
    -moz-transform: skew(0);
    -ms-transform: skew(0);
    -o-transform: skew(0);
    transform: skew(0);
  }
}

.wobble-skew {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-skew:hover, .wobble-skew:focus, .wobble-skew:active {
  -webkit-animation-name: wobble-skew;
  -moz-animation-name: wobble-skew;
  -ms-animation-name: wobble-skew;
  -o-animation-name: wobble-skew;
  animation-name: wobble-skew;

  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;

  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  -o-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;

  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Buzz */
@-webkit-keyframes buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    -moz-transform: translateX(3px) rotate(2deg);
    -ms-transform: translateX(3px) rotate(2deg);
    -o-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    -moz-transform: translateX(-3px) rotate(-2deg);
    -ms-transform: translateX(-3px) rotate(-2deg);
    -o-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}

@keyframes buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    -moz-transform: translateX(3px) rotate(2deg);
    -ms-transform: translateX(3px) rotate(2deg);
    -o-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    -moz-transform: translateX(-3px) rotate(-2deg);
    -ms-transform: translateX(-3px) rotate(-2deg);
    -o-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}

.buzz {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.buzz:hover, .buzz:focus, .buzz:active {
  -webkit-animation-name: buzz;
  -moz-animation-name: buzz;
  -ms-animation-name: buzz;
  -o-animation-name: buzz;
  animation-name: buzz;

  -webkit-animation-duration: 0.15s;
  -moz-animation-duration: 0.15s;
  -ms-animation-duration: 0.15s;
  -o-animation-duration: 0.15s;
  animation-duration: 0.15s;

  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;

  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

/* Buzz Out */
@-webkit-keyframes buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    -moz-transform: translateX(3px) rotate(2deg);
    -ms-transform: translateX(3px) rotate(2deg);
    -o-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    -moz-transform: translateX(-3px) rotate(-2deg);
    -ms-transform: translateX(-3px) rotate(-2deg);
    -o-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    -moz-transform: translateX(3px) rotate(2deg);
    -ms-transform: translateX(3px) rotate(2deg);
    -o-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    -moz-transform: translateX(-3px) rotate(-2deg);
    -ms-transform: translateX(-3px) rotate(-2deg);
    -o-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    -moz-transform: translateX(2px) rotate(1deg);
    -ms-transform: translateX(2px) rotate(1deg);
    -o-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    -moz-transform: translateX(-2px) rotate(-1deg);
    -ms-transform: translateX(-2px) rotate(-1deg);
    -o-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    -moz-transform: translateX(2px) rotate(1deg);
    -ms-transform: translateX(2px) rotate(1deg);
    -o-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    -moz-transform: translateX(-2px) rotate(-1deg);
    -ms-transform: translateX(-2px) rotate(-1deg);
    -o-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    -moz-transform: translateX(1px) rotate(0);
    -ms-transform: translateX(1px) rotate(0);
    -o-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    -moz-transform: translateX(-1px) rotate(0);
    -ms-transform: translateX(-1px) rotate(0);
    -o-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

@keyframes buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    -moz-transform: translateX(3px) rotate(2deg);
    -ms-transform: translateX(3px) rotate(2deg);
    -o-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    -moz-transform: translateX(-3px) rotate(-2deg);
    -ms-transform: translateX(-3px) rotate(-2deg);
    -o-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    -moz-transform: translateX(3px) rotate(2deg);
    -ms-transform: translateX(3px) rotate(2deg);
    -o-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    -moz-transform: translateX(-3px) rotate(-2deg);
    -ms-transform: translateX(-3px) rotate(-2deg);
    -o-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    -moz-transform: translateX(2px) rotate(1deg);
    -ms-transform: translateX(2px) rotate(1deg);
    -o-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    -moz-transform: translateX(-2px) rotate(-1deg);
    -ms-transform: translateX(-2px) rotate(-1deg);
    -o-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    -moz-transform: translateX(2px) rotate(1deg);
    -ms-transform: translateX(2px) rotate(1deg);
    -o-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    -moz-transform: translateX(-2px) rotate(-1deg);
    -ms-transform: translateX(-2px) rotate(-1deg);
    -o-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    -moz-transform: translateX(1px) rotate(0);
    -ms-transform: translateX(1px) rotate(0);
    -o-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    -moz-transform: translateX(-1px) rotate(0);
    -ms-transform: translateX(-1px) rotate(0);
    -o-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

.buzz-out {
  display: inline-block;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.buzz-out:hover, .buzz-out:focus, .buzz-out:active {
  -webkit-animation-name: buzz-out;
  -moz-animation-name: buzz-out;
  -ms-animation-name: buzz-out;
  -o-animation-name: buzz-out;
  animation-name: buzz-out;

  -webkit-animation-duration: 0.75s;
  -moz-animation-duration: 0.75s;
  -ms-animation-duration: 0.75s;
  -o-animation-duration: 0.75s;
  animation-duration: 0.75s;

  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;

  -webkit-animation-iteration-count: 1;
  -moz-animation-iteration-count: 1;
  -ms-animation-iteration-count: 1;
  -o-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* BORDER TRANSITIONS */
/* Border Fade */
.border-fade {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: box-shadow;
  -moz-transition-property: box-shadow;
  -ms-transition-property: box-shadow;
  -o-transition-property: box-shadow;
  transition-property: box-shadow;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}
.border-fade:hover, .border-fade:focus, .border-fade:active {
  box-shadow: inset 0 0 0 4px #666666, 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}

/* Hollow */
.hollow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: background;
  -moz-transition-property: background;
  -ms-transition-property: background;
  -o-transition-property: background;
  transition-property: background;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: inset 0 0 0 4px #e1e1e1, 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}
.hollow:hover, .hollow:focus, .hollow:active {
  background: none;
}

/* Trim */
.trim {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.trim:before {
  content: '';
  position: absolute;
  border: white solid 4px;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -ms-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}
.trim:hover:before, .trim:focus:before, .trim:active:before {
  opacity: 1;
}

/* Outline Outward */
.outline-outward {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.outline-outward:before {
  content: '';
  position: absolute;
  border: #e1e1e1 solid 4px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: top, right, bottom, left;
  -moz-transition-property: top, right, bottom, left;
  -ms-transition-property: top, right, bottom, left;
  -o-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}
.outline-outward:hover:before, .outline-outward:focus:before, .outline-outward:active:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
}

/* Outline Inward */
.outline-inward {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.outline-inward:before {
  pointer-events: none;
  content: '';
  position: absolute;
  border: #e1e1e1 solid 4px;
  top: -16px;
  right: -16px;
  bottom: -16px;
  left: -16px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: top, right, bottom, left;
  -moz-transition-property: top, right, bottom, left;
  -ms-transition-property: top, right, bottom, left;
  -o-transition-property: top, right, bottom, left;
  transition-property: top, right, bottom, left;
}
.outline-inward:hover:before, .outline-inward:focus:before, .outline-inward:active:before {
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  opacity: 1;
}

/* Round Corners */
.round-corners {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: border-radius;
  -moz-transition-property: border-radius;
  -ms-transition-property: border-radius;
  -o-transition-property: border-radius;
  transition-property: border-radius;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.round-corners:hover, .round-corners:focus, .round-corners:active {
  -webkit-border-radius: 1em;
  -moz-border-radius: 1em;
  -ms-border-radius: 1em;
  -o-border-radius: 1em;
  border-radius: 1em;
}

/* SHADOW/GLOW TRANSITIONS */
/* Glow */
.glow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: box-shadow;
  -moz-transition-property: box-shadow;
  -ms-transition-property: box-shadow;
  -o-transition-property: box-shadow;
  transition-property: box-shadow;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.glow:hover, .glow:focus, .glow:active {
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

/* Box Shadow Outset */
.box-shadow-outset {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: box-shadow;
  -moz-transition-property: box-shadow;
  -ms-transition-property: box-shadow;
  -o-transition-property: box-shadow;
  transition-property: box-shadow;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.box-shadow-outset:hover, .box-shadow-outset:focus, .box-shadow-outset:active {
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}

/* Box Shadow Inset */
.box-shadow-inset {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: box-shadow;
  -moz-transition-property: box-shadow;
  -ms-transition-property: box-shadow;
  -o-transition-property: box-shadow;
  transition-property: box-shadow;

  box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}
.box-shadow-inset:hover, .box-shadow-inset:focus, .box-shadow-inset:active {
  box-shadow: inset 2px 2px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
  /* Hack to improve aliasing on mobile/tablet devices */
}

/* Float Shadow */
.float-shadow {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  -ms-transition-property: transform;
  -o-transition-property: transform;
  transition-property: transform;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: transform, opacity;
  -moz-transition-property: transform, opacity;
  -ms-transition-property: transform, opacity;
  -o-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.float-shadow:hover, .float-shadow:focus, .float-shadow:active {
  -webkit-transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  -o-transform: translateY(-5px);
  transform: translateY(-5px);
  /* move the element up by 5px */
}
.float-shadow:hover:before, .float-shadow:focus:before, .float-shadow:active:before {
  opacity: 1;
  -webkit-transform: translateY(5px);
  -moz-transform: translateY(5px);
  -ms-transform: translateY(5px);
  -o-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

/* Hover Shadow */
@-webkit-keyframes hover {
  50% {
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -o-transform: translateY(-3px);
    transform: translateY(-3px);
  }

  100% {
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    -o-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}

@keyframes hover {
  50% {
    -webkit-transform: translateY(-3px);
    -moz-transform: translateY(-3px);
    -ms-transform: translateY(-3px);
    -o-transform: translateY(-3px);
    transform: translateY(-3px);
  }

  100% {
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    -ms-transform: translateY(-6px);
    -o-transform: translateY(-6px);
    transform: translateY(-6px);
  }
}

@-webkit-keyframes hover-shadow {
  0% {
    -webkit-transform: translateY(6px);
    -moz-transform: translateY(6px);
    -ms-transform: translateY(6px);
    -o-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .4;
  }

  50% {
    -webkit-transform: translateY(3px);
    -moz-transform: translateY(3px);
    -ms-transform: translateY(3px);
    -o-transform: translateY(3px);
    transform: translateY(3px);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(6px);
    -moz-transform: translateY(6px);
    -ms-transform: translateY(6px);
    -o-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .4;
  }
}

@keyframes hover-shadow {
  0% {
    -webkit-transform: translateY(6px);
    -moz-transform: translateY(6px);
    -ms-transform: translateY(6px);
    -o-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .4;
  }

  50% {
    -webkit-transform: translateY(3px);
    -moz-transform: translateY(3px);
    -ms-transform: translateY(3px);
    -o-transform: translateY(3px);
    transform: translateY(3px);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateY(6px);
    -moz-transform: translateY(6px);
    -ms-transform: translateY(6px);
    -o-transform: translateY(6px);
    transform: translateY(6px);
    opacity: .4;
  }
}

.hover-shadow {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  -ms-transition-property: transform;
  -o-transition-property: transform;
  transition-property: transform;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.hover-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: transform, opacity;
  -moz-transition-property: transform, opacity;
  -ms-transition-property: transform, opacity;
  -o-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.hover-shadow:hover, .hover-shadow:focus, .hover-shadow:active {
  -webkit-transform: translateY(-6px);
  -moz-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  -o-transform: translateY(-6px);
  transform: translateY(-6px);

  -webkit-animation-name: hover;
  -moz-animation-name: hover;
  -ms-animation-name: hover;
  -o-animation-name: hover;
  animation-name: hover;

  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  -ms-animation-duration: 1.5s;
  -o-animation-duration: 1.5s;
  animation-duration: 1.5s;

  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  -ms-animation-delay: 0.3s;
  -o-animation-delay: 0.3s;
  animation-delay: 0.3s;

  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;

  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;

  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  -ms-animation-direction: alternate;
  -o-animation-direction: alternate;
  animation-direction: alternate;
}
.hover-shadow:hover:before, .hover-shadow:focus:before, .hover-shadow:active:before {
  opacity: .4;
  -webkit-transform: translateY(6px);
  -moz-transform: translateY(6px);
  -ms-transform: translateY(6px);
  -o-transform: translateY(6px);
  transform: translateY(6px);

  -webkit-animation-name: hover-shadow;
  -moz-animation-name: hover-shadow;
  -ms-animation-name: hover-shadow;
  -o-animation-name: hover-shadow;
  animation-name: hover-shadow;

  -webkit-animation-duration: 1.5s;
  -moz-animation-duration: 1.5s;
  -ms-animation-duration: 1.5s;
  -o-animation-duration: 1.5s;
  animation-duration: 1.5s;

  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  -ms-animation-delay: 0.3s;
  -o-animation-delay: 0.3s;
  animation-delay: 0.3s;

  -webkit-animation-timing-function: linear;
  -moz-animation-timing-function: linear;
  -ms-animation-timing-function: linear;
  -o-animation-timing-function: linear;
  animation-timing-function: linear;

  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  animation-iteration-count: infinite;

  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  -ms-animation-direction: alternate;
  -o-animation-direction: alternate;
  animation-direction: alternate;
}

/* Shadow Radial */
.shadow-radial {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.shadow-radial:before, .shadow-radial:after {
  pointer-events: none;
  position: absolute;
  content: '';
  left: 0;
  width: 100%;
  box-sizing: border-box;
  background-repeat: no-repeat;
  height: 5px;
  opacity: 0;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -ms-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}
.shadow-radial:before {
  bottom: 100%;
  background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.shadow-radial:after {
  top: 100%;
  background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}
.shadow-radial:hover:before, .shadow-radial:focus:before, .shadow-radial:active:before, .shadow-radial:hover:after, .shadow-radial:focus:after, .shadow-radial:active:after {
  opacity: 1;
}

/* SPEECH BUBBLES */
/* Bubble Top */
.bubble-top {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-top:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: top;
  -moz-transition-property: top;
  -ms-transition-property: top;
  -o-transition-property: top;
  transition-property: top;

  left: calc(50% - 10px);
  top: 0;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #e1e1e1 transparent;
}
.bubble-top:hover:before, .bubble-top:focus:before, .bubble-top:active:before {
  top: -10px;
}

/* Bubble Right */
.bubble-right {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-right:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: right;
  -moz-transition-property: right;
  -ms-transition-property: right;
  -o-transition-property: right;
  transition-property: right;

  top: calc(50% - 10px);
  right: 0;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #e1e1e1;
}
.bubble-right:hover:before, .bubble-right:focus:before, .bubble-right:active:before {
  right: -10px;
}

/* Bubble Bottom */
.bubble-bottom {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-bottom:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: bottom;
  -moz-transition-property: bottom;
  -ms-transition-property: bottom;
  -o-transition-property: bottom;
  transition-property: bottom;

  left: calc(50% - 10px);
  bottom: 0;
  border-width: 10px 10px 0 10px;
  border-color: #e1e1e1 transparent transparent transparent;
}
.bubble-bottom:hover:before, .bubble-bottom:focus:before, .bubble-bottom:active:before {
  bottom: -10px;
}

/* Bubble Left */
.bubble-left {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-left:before {
  pointer-events: none;
  position: absolute;
  z-index: -1;
  content: '';
  border-style: solid;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: left;
  -moz-transition-property: left;
  -ms-transition-property: left;
  -o-transition-property: left;
  transition-property: left;

  top: calc(50% - 10px);
  left: 0;
  border-width: 10px 10px 10px 0;
  border-color: transparent #e1e1e1 transparent transparent;
}
.bubble-left:hover:before, .bubble-left:focus:before, .bubble-left:active:before {
  left: -10px;
}

/* Bubble Float Top */
.bubble-float-top {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  -ms-transition-property: transform;
  -o-transition-property: transform;
  transition-property: transform;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-float-top:before {
  position: absolute;
  z-index: -1;
  content: '';
  left: calc(50% - 10px);
  top: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #e1e1e1 transparent;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: top;
  -moz-transition-property: top;
  -ms-transition-property: top;
  -o-transition-property: top;
  transition-property: top;
}
.bubble-float-top:hover, .bubble-float-top:focus, .bubble-float-top:active {
  -webkit-transform: translateY(5px) translateZ(0);
  -moz-transform: translateY(5px) translateZ(0);
  -ms-transform: translateY(5px) translateZ(0);
  -o-transform: translateY(5px) translateZ(0);
  transform: translateY(5px) translateZ(0);
}
.bubble-float-top:hover:before, .bubble-float-top:focus:before, .bubble-float-top:active:before {
  top: -10px;
}

/* Bubble Float Right */
.bubble-float-right {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  -ms-transition-property: transform;
  -o-transition-property: transform;
  transition-property: transform;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-float-right:before {
  position: absolute;
  z-index: -1;
  top: calc(50% - 10px);
  right: 0;
  content: '';
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #e1e1e1;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: right;
  -moz-transition-property: right;
  -ms-transition-property: right;
  -o-transition-property: right;
  transition-property: right;
}
.bubble-float-right:hover, .bubble-float-right:focus, .bubble-float-right:active {
  -webkit-transform: translateX(-5px);
  -moz-transform: translateX(-5px);
  -ms-transform: translateX(-5px);
  -o-transform: translateX(-5px);
  transform: translateX(-5px);
}
.bubble-float-right:hover:before, .bubble-float-right:focus:before, .bubble-float-right:active:before {
  right: -10px;
}

/* Bubble Float Bottom */
.bubble-float-bottom {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  -ms-transition-property: transform;
  -o-transition-property: transform;
  transition-property: transform;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-float-bottom:before {
  position: absolute;
  z-index: -1;
  content: '';
  left: calc(50% - 10px);
  bottom: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #e1e1e1 transparent transparent transparent;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: bottom;
  -moz-transition-property: bottom;
  -ms-transition-property: bottom;
  -o-transition-property: bottom;
  transition-property: bottom;
}
.bubble-float-bottom:hover, .bubble-float-bottom:focus, .bubble-float-bottom:active {
  -webkit-transform: translateY(-5px) translateZ(0);
  -moz-transform: translateY(-5px) translateZ(0);
  -ms-transform: translateY(-5px) translateZ(0);
  -o-transform: translateY(-5px) translateZ(0);
  transform: translateY(-5px) translateZ(0);
}
.bubble-float-bottom:hover:before, .bubble-float-bottom:focus:before, .bubble-float-bottom:active:before {
  bottom: -10px;
}

/* Bubble Float Left */
.bubble-float-left {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: transform;
  -moz-transition-property: transform;
  -ms-transition-property: transform;
  -o-transition-property: transform;
  transition-property: transform;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.bubble-float-left:before {
  position: absolute;
  z-index: -1;
  content: '';
  top: calc(50% - 10px);
  left: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #e1e1e1 transparent transparent;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: left;
  -moz-transition-property: left;
  -ms-transition-property: left;
  -o-transition-property: left;
  transition-property: left;
}
.bubble-float-left:hover, .bubble-float-left:focus, .bubble-float-left:active {
  -webkit-transform: translateX(5px);
  -moz-transform: translateX(5px);
  -ms-transform: translateX(5px);
  -o-transform: translateX(5px);
  transform: translateX(5px);
}
.bubble-float-left:hover:before, .bubble-float-left:focus:before, .bubble-float-left:active:before {
  left: -10px;
}

/* CURLS */
/* Curl Top Left */
.curl-top-left {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-top-left:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  left: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
  /*For IE7-8-9*/
  z-index: 1000;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: width, height;
  -moz-transition-property: width, height;
  -ms-transition-property: width, height;
  -o-transition-property: width, height;
  transition-property: width, height;
}
.curl-top-left:hover:before, .curl-top-left:focus:before, .curl-top-left:active:before {
  width: 25px;
  height: 25px;
}

/* Curl Top Right */
.curl-top-right {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-top-right:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  top: 0;
  right: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: width, height;
  -moz-transition-property: width, height;
  -ms-transition-property: width, height;
  -o-transition-property: width, height;
  transition-property: width, height;
}
.curl-top-right:hover:before, .curl-top-right:focus:before, .curl-top-right:active:before {
  width: 25px;
  height: 25px;
}

/* Curl Bottom Right */
.curl-bottom-right {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-bottom-right:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  bottom: 0;
  right: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: width, height;
  -moz-transition-property: width, height;
  -ms-transition-property: width, height;
  -o-transition-property: width, height;
  transition-property: width, height;
}
.curl-bottom-right:hover:before, .curl-bottom-right:focus:before, .curl-bottom-right:active:before {
  width: 25px;
  height: 25px;
}

/* Curl Bottom Left */
.curl-bottom-left {
  display: inline-block;
  position: relative;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.curl-bottom-left:before {
  pointer-events: none;
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  bottom: 0;
  left: 0;
  background: white;
  /* IE9 */
  background: linear-gradient(45deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
  box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;

  -webkit-transition-property: width, height;
  -moz-transition-property: width, height;
  -ms-transition-property: width, height;
  -o-transition-property: width, height;
  transition-property: width, height;
}
.curl-bottom-left:hover:before, .curl-bottom-left:focus:before, .curl-bottom-left:active:before {
  width: 25px;
  height: 25px;
}

/* Button Example */
.btn-example {
    float: left;
    margin-top: -10px;
    width: 100%;
}
.btn-example > a {
    margin-right: 10px;
    margin-top: 10px;
}
.btn-example > p > a,
.btn-example > p > button {
    margin-top: 10px;
    margin-right: 10px;
}
.tag-button {
    background: none repeat scroll 0 0 #e1e1e1;
    
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    padding: 6px 13px;
    position: relative;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
    margin: 5px;
    
}
.tag-button:before {
    background: none repeat scroll 0 0 #fff;
    content: "";
    height: 8px;
    left: -3px;
    margin-top: -4px;
    position: absolute;
    top: 50%;
    width: 8px;
}
.tag-button:after {
    background: none repeat scroll 0 0 #fff;
    content: "";
    height: 8px;
    right: -3px;
    margin-top: -4px;
    position: absolute;
    top: 50%;
    width: 8px;
}


/* Dynamic Tags */
.dynamic-tags {
    float: left;
    width: 100%;
}
.dynamic-tags .tagsinput {
    float: left;
    height: auto;
    width: 100%;
}
.dynamic-tags .tagsinput .tag {
    float: left;
}
.dynamic-tags .tagsinput .tag {
    background: none repeat scroll 0 0 #e1e1e1;
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    margin-right: 10px;
    margin-top: 10px;
    padding: 6px 13px;
    position: relative;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
}
.dynamic-tags .tagsinput .tag:hover{
    color:#fff;
}
.dynamic-tags .tagsinput .tag:hover a{
    color:#fff
}
.dynamic-tags .tagsinput .tag > a {
    color: #333333;
    font-family: "Microsoft YaHei";
    font-weight: bold;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
}
.dynamic-tags .tagsinput input {
    border: 1px solid #e8ecec;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    margin-top: 10px;
    padding: 6px 19px;
    width: 100%;
}
.dynamic-tags .tagsinput .tag:before {
    background: none repeat scroll 0 0 #fff;
    content: "";
    height: 8px;
    left: -3px;
    margin-top: -4px;
    position: absolute;
    top: 50%;
    width: 8px;
}
.dynamic-tags .tagsinput .tag:after {
    background: none repeat scroll 0 0 #fff;
    content: "";
    height: 8px;
    right: -3px;
    margin-top: -4px;
    position: absolute;
    top: 50%;
    width: 8px;
}


/* Custom buttons */
.button-sec > p {
    float: left;
    width: 100%;
}
.c-btn {
    color: #fff;
    cursor: pointer;
    float: left;
    font-family: "Microsoft YaHei";
    font-weight: normal;
    letter-spacing: 0.3px;
    line-height: 12px;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;

    border:none;
}
.icon-btn > i {
    color: #ffffff;
}
.button-sec {
    float: left;
    margin-top: 20px;
    width: 100%;
}
.button-sec > p a {
    margin: 0 6px;
}
.radius-s {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
}
.radius-n {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
.radius-m {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
}
.radius-l {
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
}
.c-btn:hover {
    opacity: 0.8;
    color:#fff;
}
a.large, input.large[type="submit"], button.large {
    font-size: 15px;
    padding: 18px 26px;
}
a.medium, input.medium[type="submit"], button.medium {
    font-size: 13px;
    padding: 14px 18px;
}
a.small,
input[type="submit"].small,
button.small {
    padding: 7px 18px;
}
a.mini,
input[type="submit"].mini,
button.mini {
    font-size: 11px;
    padding: 5px 13px;
}

/* Icon btn */
.icon-btn {
    background: none repeat scroll 0 0 #ffffff;
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    height: auto;
    letter-spacing: 0.3px;
    line-height: 32px;
    margin-right: 5px;
    overflow: hidden;
    padding: 0 24px 0 0;
    position: relative;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;

    width: auto;
}
.icon-btn:hover {
    background: none repeat scroll 0 0 #f7f7f7;
}
.icon-btn > i {
    float: left;
    height: 34px;
    left: 0;
    line-height: 34px;
    margin-right: 15px;
    position: relative;
    text-align: center;
    top: 0;
    width: 34px;
}


/*!
 * FullCalendar v1.6.4 Stylesheet
 * Docs & License: http://arshaw.com/fullcalendar/
 * (c) 2013 Adam Shaw
 */


.fc {
    direction: ltr;
    float: left;
    margin: 10px 0 0;
    text-align: left;
    width: 100%;
}
    
.fc table {
    border-collapse: collapse;
    border-spacing: 0;
    }
    
html .fc,
.fc table {
    font-size: 1em;
    }
    
.fc td,
.fc th {
    padding: 0;
    vertical-align: top;
    }



/* Header
------------------------------------------------------------------------*/

.fc-header td {
    white-space: nowrap;
    }

.fc-header-left {
    float: left;
    margin-left: 10px;
    text-align: left;
    width: 25%;
}
    
.fc-header-center {
    float: left;
    text-align: center;
    width: 100%;
}
    
.fc-header-right {
    float: right;
    margin-right: 10px;
    margin-top: -79px;
    text-align: left;
}
    
.fc-header-title {
    display: inline-block;
    float: left;
    vertical-align: top;
    width: 100%;
}
.fc-header-title h2 {
    display: table;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 28px;
    font-weight: 100;
    line-height: 23px;
    margin: 0 0 15px;
    white-space: nowrap;
    width: 100%;
}
    
.fc .fc-header-space {
    padding-left: 10px;
    }
    
.fc-header .fc-button {
    margin-bottom: 1em;
    vertical-align: top;
    }
    
/* buttons edges butting together */

.fc-header .fc-button {
    margin-right: -1px;
    }
    
.fc-header .fc-corner-right,  /* non-theme */
.fc-header .ui-corner-right { /* theme */
    margin-right: 0; /* back to normal */
    }
    
/* button layering (for border precedence) */
    
.fc-header .fc-state-hover,
.fc-header .ui-state-hover {
    z-index: 2;
    }
    
.fc-header .fc-state-down {
    z-index: 3;
    }

.fc-header .fc-state-active,
.fc-header .ui-state-active {
    z-index: 4;
    }
    
    
    
/* Content
------------------------------------------------------------------------*/
    
.fc-content {
    clear: both;
    zoom: 1; /* for IE7, gives accurate coordinates for [un]freezeContentHeight */
    }
    
.fc-view {
    width: 100%;
    overflow: hidden;
    }
    
    

/* Cell Styles
------------------------------------------------------------------------*/

.fc-widget-header, .fc-widget-content {
    border: 1px solid #DDDDDD;
    color: #303030;
    font-family: "Microsoft YaHei";
    font-size: 15px;
    font-weight: 600;
}
    
.fc-state-highlight { /* <td> today cell */ /* TODO: add .fc-today to <th> */
    background: #fcf8e3;
    }
    
.fc-cell-overlay { /* semi-transparent rectangle while dragging */
    background: #bce8f1;
    opacity: .3;
    filter: alpha(opacity=30); /* for IE */
    }
    


/* Buttons
------------------------------------------------------------------------*/

.fc-button {
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}
    
.fc-state-default { /* non-theme */
    border: 1px solid;
    }

.fc-state-default.fc-corner-left { /* non-theme */
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    }

.fc-state-default.fc-corner-right { /* non-theme */
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    }

/*
    Our default prev/next buttons use HTML entities like &lsaquo; &rsaquo; &laquo; &raquo;
    and we'll try to make them look good cross-browser.
*/

.fc-text-arrow {
    margin: 0 .1em;
    font-size: 2em;
    font-family: "Microsoft YaHei";
    vertical-align: baseline; /* for IE7 */
    }

.fc-button-prev .fc-text-arrow,
.fc-button-next .fc-text-arrow { /* for &lsaquo; &rsaquo; */
    font-weight: bold;
    }
    
/* icon (for jquery ui) */
    
.fc-button .fc-icon-wrap {
    position: relative;
    float: left;
    top: 50%;
    }
    
.fc-button .ui-icon {
    position: relative;
    float: left;
    margin-top: -50%;
    *margin-top: 0;
    *top: -50%;
    }
    
/*
  button states
  borrowed from twitter bootstrap (http://twitter.github.com/bootstrap/)
*/
.fc-state-default {
    background-color: #F5F5F5;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    color: #333333;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.25px;
    line-height: 22px;
    padding: 2px 11px;
    text-transform: uppercase;
}
.fc-state-down, .fc-state-active, .fc-state-disabled {
    background: none repeat scroll 0 0 #4d4e53;
    color: #FFFFFF;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-weight: 600;
    line-height: 10px;
    padding: 9px 11px;
    text-shadow: none;
    text-transform: uppercase;
}



.fc-state-down, .fc-state-active {
    background-color: #CCCCCC;
    border: 1px solid #CCCCCC;
    color: #FFFFFF;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-weight: 700;
    line-height: 8px;
    
    -webkit-box-shadow: 0 0 3px #B8B8B8 inset;
    -moz-box-shadow: 0 0 3px #B8B8B8 inset;
    -ms-box-shadow: 0 0 3px #B8B8B8 inset;
    -o-box-shadow: 0 0 3px #B8B8B8 inset;
    box-shadow: 0 0 3px #B8B8B8 inset;
}

.fc-state-disabled {
    cursor: default;
    background-image: none;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    
    }

    

/* Global Event Styles
------------------------------------------------------------------------*/

.fc-event-container > * {
    z-index: 8;
    }

.fc-event-container > .ui-draggable-dragging,
.fc-event-container > .ui-resizable-resizing {
    z-index: 9;
    }
     
.fc-event {
    background-color: #4d4e53;
    color: #FFFFFF;
    cursor: default;
    font-size: 0.85em;
    padding: 0 10px;
    text-align: center;
}

a.fc-event {
    text-decoration: none;
    }
    
a.fc-event,
.fc-event-draggable {
    cursor: pointer;
    }
    
.fc-rtl .fc-event {
    text-align: right;
    }

.fc-event-inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
    }
.fc-event-time, .fc-event-title {
    font-family: "Microsoft YaHei";
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.4px;
    padding: 0 1px;
}
.fc .ui-resizable-handle {
    display: block;
    position: absolute;
    z-index: 99999;
    overflow: hidden; /* hacky spaces (IE6/7) */
    font-size: 300%;  /* */
    line-height: 50%; /* */
    }
    
    
    
/* Horizontal Events
------------------------------------------------------------------------*/
.fc-event-hori {
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -ms-border-radius: 0 !important;
    -o-border-radius: 0 !important;
    border-radius: 0 !important;

    border-width: 1px 0;
    margin-bottom: 1px;
}

.fc-ltr .fc-event-hori.fc-event-start,
.fc-rtl .fc-event-hori.fc-event-end {
    border-left-width: 1px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    }

.fc-ltr .fc-event-hori.fc-event-end,
.fc-rtl .fc-event-hori.fc-event-start {
    border-right-width: 1px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    }
    
/* resizable */
    
.fc-event-hori .ui-resizable-e {
    top: 0           !important; /* importants override pre jquery ui 1.7 styles */
    right: -3px      !important;
    width: 7px       !important;
    height: 100%     !important;
    cursor: e-resize;
    }
    
.fc-event-hori .ui-resizable-w {
    top: 0           !important;
    left: -3px       !important;
    width: 7px       !important;
    height: 100%     !important;
    cursor: w-resize;
    }
    
.fc-event-hori .ui-resizable-handle {
    _padding-bottom: 14px; /* IE6 had 0 height */
    }
    
    
    
/* Reusable Separate-border Table
------------------------------------------------------------*/

table.fc-border-separate {
    border-collapse: separate;
    }
    
.fc-border-separate th,
.fc-border-separate td {
    border-width: 1px 0 0 1px;
    }
    
.fc-border-separate th.fc-last,
.fc-border-separate td.fc-last {
    border-right-width: 1px;
    }
    
.fc-border-separate tr.fc-last th,
.fc-border-separate tr.fc-last td {
    border-bottom-width: 1px;
    }
    
.fc-border-separate tbody tr.fc-first td,
.fc-border-separate tbody tr.fc-first th {
    border-top-width: 0;
    }
    
    

/* Month View, Basic Week View, Basic Day View
------------------------------------------------------------------------*/

.fc-grid th {
    text-align: center;
    }

.fc .fc-week-number {
    width: 22px;
    text-align: center;
    }

.fc .fc-week-number div {
    padding: 0 2px;
    }
    
.fc-grid .fc-day-number {
    float: right;
    padding: 0 2px;
    }
    
.fc-grid .fc-other-month .fc-day-number {
    opacity: 0.3;
    filter: alpha(opacity=30); /* for IE */
    /* opacity with small font can sometimes look too faded
       might want to set the 'color' property instead
       making day-numbers bold also fixes the problem */
    }
    
.fc-grid .fc-day-content {
    clear: both;
    padding: 2px 2px 1px; /* distance between events and day edges */
    }
    
/* event styles */
    
.fc-grid .fc-event-time {
    font-weight: bold;
    }
    
/* right-to-left */
    
.fc-rtl .fc-grid .fc-day-number {
    float: left;
    }
    
.fc-rtl .fc-grid .fc-event-time {
    float: right;
    }
    
    

/* Agenda Week View, Agenda Day View
------------------------------------------------------------------------*/

.fc-agenda table {
    border-collapse: separate;
    }
    
.fc-agenda-days th {
    font-family: "Microsoft YaHei";
    font-weight: 600;
    text-align: center;
}
.fc-agenda .fc-agenda-axis {
    font-family: "Microsoft YaHei";
    font-size: 13px;
    font-weight: normal;
    padding: 0 4px;
    text-align: right;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
    width: 50px;
}

.fc-agenda .fc-week-number {
    font-weight: bold;
    }
    
.fc-agenda .fc-day-content {
    padding: 2px 2px 1px;
    }
    
/* make axis border take precedence */
    
.fc-agenda-days .fc-agenda-axis {
    border-right-width: 1px;
    }
    
.fc-agenda-days .fc-col0 {
    border-left-width: 0;
    }
    
/* all-day area */
    
.fc-agenda-allday th {
    border-width: 0 1px;
    }
    
.fc-agenda-allday .fc-day-content {
    min-height: 34px; /* TODO: doesnt work well in quirksmode */
    _height: 34px;
    }
    
/* divider (between all-day and slots) */
    
.fc-agenda-divider-inner {
    height: 2px;
    overflow: hidden;
    }
    
.fc-widget-header .fc-agenda-divider-inner {
    background: #eee;
    }
    
/* slot rows */
    
.fc-agenda-slots th {
    border-width: 1px 1px 0;
    }
    
.fc-agenda-slots td {
    border-width: 1px 0 0;
    background: none;
    }
    
.fc-agenda-slots td div {
    height: 20px;
    }
    
.fc-agenda-slots tr.fc-slot0 th,
.fc-agenda-slots tr.fc-slot0 td {
    border-top-width: 0;
    }

.fc-agenda-slots tr.fc-minor th,
.fc-agenda-slots tr.fc-minor td {
    border-top-style: dotted;
    }
    
.fc-agenda-slots tr.fc-minor th.ui-widget-header {
    *border-top-style: solid; /* doesn't work with background in IE6/7 */
    }
    


/* Vertical Events
------------------------------------------------------------------------*/

.fc-event-vert {
    border-width: 0 1px;
    }

.fc-event-vert.fc-event-start {
    border-top-width: 1px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    }

.fc-event-vert.fc-event-end {
    border-bottom-width: 1px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    }
    
.fc-event-vert .fc-event-time {
    white-space: nowrap;
    font-size: 10px;
    }

.fc-event-vert .fc-event-inner {
    position: relative;
    z-index: 2;
    }
    
.fc-event-vert .fc-event-bg { /* makes the event lighter w/ a semi-transparent overlay  */
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: .25;
    filter: alpha(opacity=25);
    }
    
.fc .ui-draggable-dragging .fc-event-bg, /* TODO: something nicer like .fc-opacity */
.fc-select-helper .fc-event-bg {
    display: none\9; /* for IE6/7/8. nested opacity filters while dragging don't work */
    }
    
/* resizable */
    
.fc-event-vert .ui-resizable-s {
    bottom: 0        !important; /* importants override pre jquery ui 1.7 styles */
    width: 100%      !important;
    height: 8px      !important;
    overflow: hidden !important;
    line-height: 8px !important;
    font-size: 11px  !important;
    font-family: "Microsoft YaHei";
    text-align: center;
    cursor: s-resize;
    }
    
.fc-agenda .ui-resizable-resizing { /* TODO: better selector */
    _overflow: hidden;
}

/* jquery.Jcrop.min.css v0.9.10 (build:20120429) */
.jcrop-holder {
    direction: ltr;
    float: left;
    text-align: left;
    width: 100% !important;
}
.jcrop-vline,.jcrop-hline{background:#FFF url(Jcrop.gif) top left repeat;font-size:0;position:absolute;}
.jcrop-vline{height:100%;width:1px!important;}
.jcrop-hline{height:1px!important;width:100%;}
.jcrop-vline.right{right:0;}
.jcrop-hline.bottom{bottom:0;}
.jcrop-handle{background-color:#333;border:1px #eee solid;font-size:1px;}
.jcrop-tracker{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;height:100%;width:100%;}
.jcrop-handle.ord-n{left:50%;margin-left:-4px;margin-top:-4px;top:0;}
.jcrop-handle.ord-s{bottom:0;left:50%;margin-bottom:-4px;margin-left:-4px;}
.jcrop-handle.ord-e{margin-right:-4px;margin-top:-4px;right:0;top:50%;}
.jcrop-handle.ord-w{left:0;margin-left:-4px;margin-top:-4px;top:50%;}
.jcrop-handle.ord-nw{left:0;margin-left:-4px;margin-top:-4px;top:0;}
.jcrop-handle.ord-ne{margin-right:-4px;margin-top:-4px;right:0;top:0;}
.jcrop-handle.ord-se{bottom:0;margin-bottom:-4px;margin-right:-4px;right:0;}
.jcrop-handle.ord-sw{bottom:0;left:0;margin-bottom:-4px;margin-left:-4px;}
.jcrop-dragbar.ord-n,.jcrop-dragbar.ord-s{height:7px;width:100%;}
.jcrop-dragbar.ord-e,.jcrop-dragbar.ord-w{height:100%;width:7px;}
.jcrop-dragbar.ord-n{margin-top:-4px;}
.jcrop-dragbar.ord-s{bottom:0;margin-bottom:-4px;}
.jcrop-dragbar.ord-e{margin-right:-4px;right:0;}
.jcrop-dragbar.ord-w{margin-left:-4px;}
.jcrop-light .jcrop-vline,.jcrop-light .jcrop-hline{background:#FFF;filter:Alpha(opacity=70)!important;opacity:.70!important;}
.jcrop-light .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#000;border-color:#FFF;border-radius:3px;}
.jcrop-dark .jcrop-vline,.jcrop-dark .jcrop-hline{background:#000;filter:Alpha(opacity=70)!important;opacity:.7!important;}
.jcrop-dark .jcrop-handle{-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#FFF;border-color:#000;border-radius:3px;}
.jcrop-holder img,img.jcrop-preview{max-width:none;}

/* Image Crop */
.image-crop {
    border: 1px solid #e8ecec;
    float: left;
    width: 100%;
}
.bheader {
    background-color: #fafafa;
    float: left;
    padding: 10px 0;
    text-align: center;
    width: 100%;
}
.bheader > h2 {
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    letter-spacing: 0.3px;
    margin: 0;
    padding: 20px 0;
    width: 100%;
}
.bbody {
    color: #000;
    float: left;
    overflow: hidden;
    padding-bottom: 20px;
    text-align: center;
    width: 100%;

    background: -moz-linear-gradient(#ffffff, #f2f2f2);
    background: -ms-linear-gradient(#ffffff, #f2f2f2);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2));
    background: -webkit-linear-gradient(#ffffff, #f2f2f2);
    background: -o-linear-gradient(#ffffff, #f2f2f2);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f2f2f2')";
    background: linear-gradient(#ffffff, #f2f2f2);
}
.bbody > form {
    display: table;
    float: none;
    margin: 0 auto;
    width: auto;
}
#upload_form > h2 {
    color: #555555;
    fontMicrosoft YaHei\96C5\9ED1";
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.3px;
}
.step2, .error {
    display: none;
}
.error {
    font-size: 18px;
    font-weight: bold;
    color: red;
}
.info {
    float: left;
    padding: 20px;
    width: 100%;
}
.info > label {
    color: #333333;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    font-weight: normal;
    margin-right: 10px;
}
.info input {
    background: none repeat scroll 0 0 #fff;
    border: medium none;
    
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;

    
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    
    display: inline-block;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    height: auto;
    margin-bottom: 17px;
    margin-left: 12px;
    padding: 6px 16px;
}
.image-crop label {
    margin: 0 5px;
}
.image-crop input[type="file"] {
    background: none repeat scroll 0 0 #ffffff;
    border: 1px solid #cccccc;
    color: #888888;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    height: auto;
    letter-spacing: 0.3px;
    margin-top: 11px;
    padding: 4px 8px;
    text-align: center;
    width: 100%;
}
#upload_form > div {
    display: table;
    float: none;
    margin: 0 auto;
}
.step2 > h2 {
    color: #555555;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.3px;
    text-align: center;
    width: 100%;
}
.jcrop-holder {
    display: inline-block;
}
.image-crop input[type=submit] {
    background: #e3e3e3;
    border: 1px solid #bbb;
    -webkit-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -moz-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -ms-box-shadow: inset 0 0 1px 1px #f6f6f6;
    -o-box-shadow: inset 0 0 1px 1px #f6f6f6;
    box-shadow: inset 0 0 1px 1px #f6f6f6;
    
    color: #333;
    font: bold 12px/1 "Microsoft YaHei";
    padding: 8px 0 9px;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    width: 150px;
}
.image-crop input[type=submit]:hover {
    background: #d9d9d9;
    -webkit-box-shadow: inset 0 0 1px 1px #eaeaea;
    -moz-box-shadow: inset 0 0 1px 1px #eaeaea;
    -ms-box-shadow: inset 0 0 1px 1px #eaeaea;
    -o-box-shadow: inset 0 0 1px 1px #eaeaea;
    box-shadow: inset 0 0 1px 1px #eaeaea;
    
    color: #222;
    cursor: pointer;
}
.image-crop input[type=submit]:active {
    background: #d0d0d0;
    -webkit-box-shadow: inset 0 0 1px 1px #e3e3e3;
    -moz-box-shadow: inset 0 0 1px 1px #e3e3e3;
    -ms-box-shadow: inset 0 0 1px 1px #e3e3e3;
    -o-box-shadow: inset 0 0 1px 1px #e3e3e3;
    box-shadow: inset 0 0 1px 1px #e3e3e3;
    
    color: #000;
}

#upload_form > div > img {
    display: block;
}


.introjs-overlay {
position: absolute;
z-index: 2147483647;
background-color: #000;
opacity: 0;
background: -moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
background: -webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9)));
background: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
background: -o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
background: -ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
background: radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.introjs-fixParent {
z-index: auto;
opacity: 1.0;
position: absolute;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
.introjs-showElement,
tr.introjs-showElement > td,
tr.introjs-showElement > th {
z-index: 9999999 !important;
}
.introjs-disableInteraction {
z-index: 99999999 !important;
position: absolute;
}
.introjs-relativePosition,
tr.introjs-showElement > td,
tr.introjs-showElement > th {
position: relative;
}
.introjs-helperLayer {
position: absolute;
z-index: 9999998;
border: 1px solid #777;
border: 1px solid rgba(0,0,0,.5);
    
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;

box-shadow: 0 2px 15px rgba(0,0,0,.4);
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.introjs-tooltipReferenceLayer {
position: absolute;
z-index: 2147483647;
background-color: transparent;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.introjs-helperLayer *,
.introjs-helperLayer *:before,
.introjs-helperLayer *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
-o-box-sizing: content-box;
box-sizing: content-box;
}
.introjs-helperNumberLayer {
position: absolute;
top: -16px;
left: -16px;
z-index: 9999999999 !important;
padding: 2px;
font-family: "Microsoft YaHei";
font-size: 13px;
font-weight: bold;
color: white;
text-align: center;
text-shadow: 1px 1px 1px rgba(0,0,0,.3);
background: #ff3019; /* Old browsers */
background: -webkit-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff3019), color-stop(100%, #cf0404)); /* Chrome,Safari4+ */
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
background: -ms-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* IE10+ */
background: -o-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* Opera 11.10+ */
background: linear-gradient(to bottom, #ff3019 0%, #cf0404 100%); /* W3C */
width: 20px;
height:20px;
line-height: 20px;
border: 3px solid white;
    
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0); /* IE6-9 */
filter: progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000); /* IE10 text shadows */
box-shadow: 0 2px 5px rgba(0,0,0,.4);
}
.introjs-arrow {
border: 5px solid white;
content:'';
position: absolute;
}
.introjs-arrow.top {
top: -10px;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:white;
border-left-color:transparent;
}
.introjs-arrow.top-right {
top: -10px;
right: 10px;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:white;
border-left-color:transparent;
}
.introjs-arrow.top-middle {
top: -10px;
left: 50%;
margin-left: -5px;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:white;
border-left-color:transparent;
}
.introjs-arrow.right {
right: -10px;
top: 10px;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:white;
}
.introjs-arrow.right-bottom {
bottom:10px;
right: -10px;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:white;
}
.introjs-arrow.bottom {
bottom: -10px;
border-top-color:white;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
.introjs-arrow.left {
left: -10px;
top: 10px;
border-top-color:transparent;
border-right-color:white;
border-bottom-color:transparent;
border-left-color:transparent;
}
.introjs-arrow.left-bottom {
left: -10px;
bottom:10px;
border-top-color:transparent;
border-right-color:white;
border-bottom-color:transparent;
border-left-color:transparent;
}
.introjs-tooltip {
position: absolute;
padding: 10px;
background-color: white;
min-width: 200px;
max-width: 300px;
    
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;

box-shadow: 0 1px 10px rgba(0,0,0,.4);
-webkit-transition: opacity 0.1s ease-out;
-moz-transition: opacity 0.1s ease-out;
-ms-transition: opacity 0.1s ease-out;
-o-transition: opacity 0.1s ease-out;
transition: opacity 0.1s ease-out;
}
.introjs-tooltipbuttons {
text-align: right;
white-space: nowrap;
}
/*
Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
Changed by Afshin Mehrabani
*/
.introjs-button {
position: relative;
overflow: visible;
display: inline-block;
padding: 0.3em 0.8em;
border: 1px solid #d4d4d4;
margin: 0;
text-decoration: none;
text-shadow: 1px 1px 0 #fff;
font: 11px/normal 'Microsoft YaHei';
color: #333;
white-space: nowrap;
cursor: pointer;
outline: none;
background-color: #ececec;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
background-image: -moz-linear-gradient(#f4f4f4, #ececec);
background-image: -o-linear-gradient(#f4f4f4, #ececec);
background-image: linear-gradient(#f4f4f4, #ececec);
-webkit-background-clip: padding;
-moz-background-clip: padding;
-o-background-clip: padding-box;
/*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */
-webkit-border-radius: 0.2em;
-moz-border-radius: 0.2em;
border-radius: 0.2em;
/* IE hacks */
zoom: 1;
*display: inline;
margin-top: 10px;
}
.introjs-button:hover {
border-color: #bcbcbc;
text-decoration: none;
box-shadow: 0px 1px 1px #e3e3e3;
}
.introjs-button:focus,
.introjs-button:active {
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ececec), to(#f4f4f4));
background-image: -moz-linear-gradient(#ececec, #f4f4f4);
background-image: -o-linear-gradient(#ececec, #f4f4f4);
background-image: linear-gradient(#ececec, #f4f4f4);
}
/* overrides extra padding on button elements in Firefox */
.introjs-button::-moz-focus-inner {
padding: 0;
border: 0;
}
.introjs-skipbutton {
margin-right: 5px;
color: #7a7a7a;
}
.introjs-prevbutton {
-webkit-border-radius: 0.2em 0 0 0.2em;
-moz-border-radius: 0.2em 0 0 0.2em;
border-radius: 0.2em 0 0 0.2em;
border-right: none;
}
.introjs-nextbutton {
-webkit-border-radius: 0 0.2em 0.2em 0;
-moz-border-radius: 0 0.2em 0.2em 0;
border-radius: 0 0.2em 0.2em 0;
}
.introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus {
color: #9a9a9a;
border-color: #d4d4d4;
    
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    
cursor: default;
background-color: #f4f4f4;
background-image: none;
text-decoration: none;
}
.introjs-bullets {
text-align: center;
}
.introjs-bullets ul {
clear: both;
margin: 15px auto 0;
padding: 0;
display: inline-block;
}
.introjs-bullets ul li {
list-style: none;
float: left;
margin: 0 2px;
}
.introjs-bullets ul li a {
display: block;
width: 6px;
height: 6px;
background: #ccc;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-decoration: none;
}
.introjs-bullets ul li a:hover {
background: #999;
}
.introjs-bullets ul li a.active {
background: #999;
}
.introjs-progress {
overflow: hidden;
height: 10px;
margin: 10px 0 5px 0;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

background-color: #ecf0f1
}
.introjs-progressbar {
float: left;
width: 0%;
height: 100%;
font-size: 10px;
line-height: 10px;
text-align: center;
background-color: #08c;
}
.introjsFloatingElement {
position: absolute;
height: 0;
width: 0;
left: 50%;
top: 50%;
}

/* Collapse Style */
.collapse-sec {
    float: left;
    width: 100%;
}
.c-collapse {
    float: left;
    width: 100%;
}
.c-collapse > h2 {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #e5e5e5;
    color: #333333;
    cursor: pointer;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    letter-spacing: 0;
    line-height: 54px;
    margin: 0 0 10px;
    opacity: 0.6;
    overflow: hidden;
    padding: 0 21px;
    position: relative;
    text-overflow: ellipsis;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;

    white-space: nowrap;
    width: 100%;
}
.c-collapse > h2 i {
    color: #fff;
    float: left;
    font-size: 12px;
    height: 26px;
    line-height: 24px;
    margin-right: 10px;
    margin-top: 14px;
    position: relative;
    text-align: center;
    width: 26px;
}
.c-collapse > h2.active {
    opacity: 1;
}
.c-collapse > h2:hover {
    opacity: 1;
}
.c-collapse .content > p {
    font-size: 14px;
    margin: 0;
}
.c-collapse > .content {
    background: none repeat scroll 0 0 #f9f9f9;
    border: 1px solid #fcfcfc;
    float: left;
    margin-bottom: 10px;
    padding: 15px 25px;
    position: relative;
    width: 100%;
}
.c-collapse > .content:before {
    background: none repeat scroll 0 0 #f9f9f9;
    border-left: 1px solid #fcfcfc;
    border-top: 1px solid #fcfcfc;
    content: "";
    height: 15px;
    left: 30px;
    position: absolute;
    top: -3px;
    
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    
    width: 15px;
}


/* Form Wizard */
.wizard-form-h {
    float: left;
    width: 100%;
}
.swMain {
    float: left;
    width: 100%;
}
.anchor {
    float: left;
    list-style: none outside none;
    margin: 0 0 15px;
    padding: 0;
    width: 100%;
}
.anchor > li {
    float: left;
    margin-right: 15px;
}
.anchor > li > a {
    background: none repeat scroll 0 0 #fafafa;
    border: 1px solid #e8ecec;
    color: #333;
    float: left;
    font-family: "Microsoft YaHei";
    letter-spacing: 0.3px;
    line-height: 14px;
    padding: 11px 28px;
    position: relative;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
}
.anchor > li > a > span {
    color: #fff;
    font-size: 11px;
    height: 20px;
    line-height: 17px;
    position: absolute;
    right: -9px;
    text-align: center;
    top: -9px;
    width: 20px;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
}
.stepContainer {
    float: left;
    width: 100%;
}
.stepContainer > .content {
    margin: 0 -15px;
}
.StepTitle {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 21px;
    margin: 10px 0 0;
    padding: 0 15px;
    width: 100%;
}
.inline-form {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #e8ecec;
    float: left;
    margin-top: 20px;
    position: relative;
    width: 100%;
}
.inline-form > label {
    background: none repeat scroll 0 0 #fff;
    color: #777;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 0.3px;
    padding: 1px 19px;
    position: absolute;
    right: 10px;
    text-transform: uppercase;
    top: -11px;
}
.inline-form > input, .inline-form > textarea {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none !important;
    
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;
    
    color: #000000;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    height: 23px;
    letter-spacing: 0.3px;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 0 20px;
    width: 100%;
}
.actionBar .loader {
    display: none;
}
.actionBar {
    float: left;
    margin-top: 20px;
    width: 100%;
}
.inline-form > textarea {
    height: auto;
}
.actionBar > a {
    background: none repeat scroll 0 0 #555555;
    color: #fff;
    float: left;
    font-family: "Microsoft YaHei";
    letter-spacing: 0.3px;
    margin-right: 10px;
    padding: 7px 13px;
}
.inline-form > select {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    color: #000000;
    float: left;
    font-family: "Microsoft YaHei";
    height: 46px;
    padding: 0 16px;
    position: relative;
    width: 100%;
    z-index: 9;
}
.sec select {
    margin-bottom: 24px;
}
.alert.color, .alert.color a {
    color: #ffffff;
}
.alert.white {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #e1e1e1;
    color: #333;
    margin: 0;
    padding-left: 70px;
    position: relative;
}
.notification-areas .alert {
    margin-bottom: 20px;
}
.alert > span > i {

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    color: #ffffff;
    font-size: 13px;
    height: 30px;
    left: 20px;
    line-height: 30px;
    position: absolute;
    text-align: center;
    top: 10px;
    width: 30px;
}
.alert.white a {
    color: #000;
}
/* Price Sec */
.price-sec {
    float: left;
    width: 100%;
}
.price-table {
    float: left;
    list-style: outside none none;
    margin: 40px 0 0;
    padding: 0;
    position: relative;
    width: 100%;
}
.price-head:before{
      background: -moz-linear-gradient(top, rgba(255,255,255,0.9) 0%, rgba(230,233,238,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.9) 0%,rgba(230,233,238,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0.9) 0%,rgba(230,233,238,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e6e9ee',GradientType=0 );

     content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.price-head {
    float: left;
    margin-bottom: 50px;
    padding: 70px 0;
    position: relative;
    text-align: center;
    width: 100%;
}
.price-head > img {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.price-head > span {
    color: #3f3f3f;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 22px;
    position: relative;
    text-transform: uppercase;
    width: 100%;
}
.price-head > h3 {
    color: #222222;
    display: inline-block;
    font-family: "Microsoft YaHei";
    font-size: 88px;
    font-weight: bold;
    letter-spacing: -6px;
    line-height: 67px;
    margin: 33px 0 0;
    position: relative;
}
.price-head > h3 > span {
    font-family: "Microsoft YaHei";
    font-size: 26px;
    font-style: italic;
    font-weight: 400;
    line-height: normal;
    margin-right: 12px;
    vertical-align: top;
}
.price-table-list {
    display: none;
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.price-head > h3 > i {
    font-family: "Microsoft YaHei";
    font-size: 19px;
    font-style: italic;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 8px;
    margin-left: 11px;
    position: relative;
    top: -4px;
}
.price-features {
    color: #666666;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 15px;
    padding: 13px 0;
    text-align: center;
    width: 100%;
}
.price-icon {
    bottom: 0;
    color: #ffffff;
    font-size: 207px;
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: -2;
    opacity: 0;
}
.price-table.active .price-icon{
    opacity: 1;
}
.price-table.active .price-button {
    bottom: -120px;
}
.price-button {
    bottom: 20px;
    left: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}
.price-button > .price-btn-detail {
    background: #ed6b75 none repeat scroll 0 0;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    cursor: pointer;
    display: inline-block;
    height: 53px;
    position: relative;
    text-align: center;
    width: 53px;
}
.price-btn-detail::before {
    background: #fff none repeat scroll 0 0;
    content: "";
    height: 3px;
    left: 50%;
    margin-left: -7px;
    margin-top: -1px;
    position: absolute;
    top: 50%;
    width: 15px;
}
.price-btn-detail::after {
    background: #fff none repeat scroll 0 0;
    content: "";
    height: 15px;
    left: 50%;
    margin-left: -1px;
    margin-top: -7px;
    position: absolute;
    top: 50%;
    width: 3px;
}
.price-table.active .price-btn-detail::after {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);

}
.price-table.active > .price-table-list {
    display: block;
}

.price-table.active {
    margin-bottom: 120px;
}



.prices-sec2 {
    float: left;
    width: 100%;
}
.price-table2 {
    background: #ffffff none repeat scroll 0 0;
    border: 3px solid #f0f0f0;
    float: left;
    list-style: outside none none;
    margin: 30px 0 0;
    overflow: hidden;
    padding: 65px 60px;
    position: relative;
    width: 100%;
    z-index: 0;
}
.price-table2 .price-image2 {
    bottom: 0;
    position: absolute;
    right: 0;
    z-index: -1;
}
.price-icon2 {
    float: left;
    width: 100%;
}
.price-icon2 > i {
    color: #ed6b75;
    float: left;
    font-size: 29px;
    width: 100%;
}
.price-title2 {
    color: #000000;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 24px;
    margin-bottom: 40px;
    margin-top: 29px;
    width: 100%;
}
.price-here2 {
    color: #1d1923;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 57px;
    font-weight: 200;
    margin-bottom: 20px;
    position: relative;
    width: 100%;
}
.price-feature2 {
    color: #777777;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    padding: 15px 0;
    position: relative;
    width: 100%;
}
.price-feature2::before {
    background: #e3e3e3 none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 40px;
}
.price-here2 > i {
    float: left;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    margin-right: 5px;
    margin-top: -13px;
    vertical-align: top;
}
.price-here2 > span {
    display: inline-block;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    font-style: italic;
    font-weight: 300;
    margin-left: 4px;
}
.price-btn2 {
    float: left;
    margin-top: 70px;
    width: 100%;
}
.price-btn2 > a {
    background: #ed6b75 none repeat scroll 0 0;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    color: #ffffff;
    font-size: 14px;
    padding: 14px 31px;
}
/* RangeSlider */
.irs {
    position: relative; display: block;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}
    .irs-line {
        position: relative; display: block;
        overflow: hidden;
        outline: none !important;
    }
        .irs-line-left, .irs-line-mid, .irs-line-right {
            position: absolute; display: block;
            top: 0;
        }
        .irs-line-left {
            left: 0; width: 11%;
        }
        .irs-line-mid {
            left: 9%; width: 82%;
        }
        .irs-line-right {
            right: 0; width: 11%;
        }

    .irs-bar {
        position: absolute; display: block;
        left: 0; width: 0;
    }
        .irs-bar-edge {
            position: absolute; display: block;
            top: 0; left: 0;
        }

    .irs-shadow {
        position: absolute; display: none;
        left: 0; width: 0;
    }

    .irs-slider {
        position: absolute; display: block;
        cursor: default;
        z-index: 1;
    }
        .irs-slider.single {

        }
        .irs-slider.from {

        }
        .irs-slider.to {

        }
        .irs-slider.type_last {
            z-index: 2;
        }

    .irs-min {
        position: absolute; display: block;
        left: 0;
        cursor: default;
    }
    .irs-max {
        position: absolute; display: block;
        right: 0;
        cursor: default;
    }

    .irs-from, .irs-to, .irs-single {
        position: absolute; display: block;
        top: 0; left: 0;
        cursor: default;
        white-space: nowrap;
    }

.irs-grid {
    position: absolute; display: none;
    bottom: 0; left: 0;
    width: 100%; height: 20px;
}
.irs-with-grid .irs-grid {
    display: block;
}
    .irs-grid-pol {
        position: absolute;
        top: 0; left: 0;
        width: 1px; height: 8px;
        background: #000;
    }
    .irs-grid-pol.small {
        height: 4px;
    }
    .irs-grid-text {
        position: absolute;
        bottom: 0; left: 0;
        white-space: nowrap;
        text-align: center;
        font-size: 9px; line-height: 9px;
        padding: 0 3px;
        color: #000;
    }

.irs-disable-mask {
    position: absolute; display: block;
    top: 0; left: -1%;
    width: 102%; height: 100%;
    cursor: default;
    background: rgba(0,0,0,0.0);
    z-index: 2;
}
.irs-disabled {
    opacity: 0.4;
}
.lt-ie9 .irs-disabled {
    filter: alpha(opacity=40);
}


.irs-hidden-input {
    position: absolute !important;
    display: block !important;
    top: 0 !important;
    left: 0 !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    z-index: -9999 !important;
    background: none !important;
    border-style: solid !important;
    border-color: transparent !important;
}

/* Skin details */

.irs-line-mid,
.irs-line-left,
.irs-line-right,
.irs-bar,
.irs-bar-edge,
.irs-slider {
    background: url(../images/sprite-skin-flat.png) repeat-x;
}

.irs {
    height: 40px;
}
.irs-with-grid {
    height: 60px;
}
.irs-line {
    height: 12px; top: 25px;
}
    .irs-line-left {
        height: 12px;
        background-position: 0 -30px;
    }
    .irs-line-mid {
        height: 12px;
        background-position: 0 0;
    }
    .irs-line-right {
        height: 12px;
        background-position: 100% -30px;
    }

.irs-bar {
    height: 12px; top: 25px;
    background-position: 0 -60px;
}
    .irs-bar-edge {
        top: 25px;
        height: 12px; width: 9px;
        background-position: 0 -90px;
    }

.irs-shadow {
    height: 3px; top: 34px;
    background: #000;
    opacity: 0.25;
}
.lt-ie9 .irs-shadow {
    filter: alpha(opacity=25);
}

.irs-slider {
    width: 16px; height: 18px;
    top: 22px;
    background-position: 0 -120px;
}
#irs-active-slider, .irs-slider:hover {
    background-position: 0 -150px;
}

.irs-min, .irs-max {
    color: #999;
    font-size: 10px; line-height: 1.333;
    text-shadow: none;
    top: 0; padding: 1px 3px;
    background: #e1e4e9;

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

}

.irs-from, .irs-to, .irs-single {
    color: #fff;
    font-size: 10px; line-height: 1.333;
    text-shadow: none;
    padding: 1px 5px;
    background: #ed5565;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.irs-from:after, .irs-to:after, .irs-single:after {
    position: absolute; display: block; content: "";
    bottom: -6px; left: 50%;
    width: 0; height: 0;
    margin-left: -3px;
    overflow: hidden;
    border: 3px solid transparent;
    border-top-color: #ed5565;
}


.irs-grid-pol {
    background: #e1e4e9;
}
.irs-grid-text {
    color: #999;
}

.irs-disabled {
}
/* Range Slider */
.range-slider {
    float: left;
    width: 100%;
}
.range-slider > span {
    float: left;
    margin-bottom: 45px;
    width: 100%;
}

/* ui Sortable */
.connected, .sortable, .exclude, .handles {
    -moz-user-select: none;
    float: left;
    margin: auto;
    padding: 0;
    width: 100%;
}
.sortable.grid {
    overflow: hidden;
}
.connected li, .sortable li, .exclude li, .handles li {
    background: none repeat scroll 0 0 #fafafa;
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    height: auto;
    list-style: none outside none;
    margin: 0;
    padding: 8px 15px;
    width: 100%;
}
.sortable-style .list > li {
    margin-top: 10px;
}
.sortable-style > .sortable {
    margin-top: -10px;
}
.handles span {
    cursor: move;
}
li.disabled {
    opacity: 0.5;
}
.sortable.grid li {
    float: left;
    height: 110px;
    line-height: 110px;
    margin-right: 10px;
    margin-top: 10px;
    text-align: center;
    width: 110px;
}
li.highlight {
    background: #FEE25F;
}
#connected {
    width: 440px;
    overflow: hidden;
    margin: auto;
}
.connected {
    float: left;
    width: 200px;
}
.connected.no2 {
    float: right;
}
li.sortable-placeholder {
    border: 1px dashed #CCC;
    background: none;
}
.sortable-style {
    float: left;
    width: 100%;
}

#wrapper2 {
    float: left;
    width: 100%;
}
#keywords {
    float: left;
    width: 100%;
}
#keywords thead {
    background: none repeat scroll 0 0 #e8ecec;
    cursor: pointer;
}
#keywords thead tr th {
    font-family: "Microsoft YaHei";
    font-weight: bold;
    letter-spacing: 0.4px;
    padding: 12px 30px 12px 42px;
}
#keywords thead tr th span { 
  padding-right: 20px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
}
#keywords thead tr th.headerSortUp, #keywords thead tr th.headerSortDown {
    background: none repeat scroll 0 0 #999999;
    color: #ffffff;
}
#keywords thead tr th.headerSortUp span {
  background-image: url('../images/up-arrow.png');
}
#keywords thead tr th.headerSortDown span {
  background-image: url('../images/down-arrow.png');
}
#keywords tbody tr {
    border-bottom: 1px solid #e8ecec;
    color: #555;
}
#keywords tbody tr td {
    color: #333333;
    font-family: "Microsoft YaHei";
    letter-spacing: 0.3px;
    padding: 15px 10px;
    text-align: center;
}

#keywords tbody tr td.lalign {
  text-align: left;
}


/* Task */
.task-sec {
    float: left;
    width: 100%;
    margin-top:30px;
}
#task-form {
    float: left;
    width: 100%;
}
#task-form input {
    border: 1px solid #e2e2e2;
    
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    -ms-border-radius: 4px 0 0 4px;
    -o-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
    
    color: #404040;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    height: 60px;
    letter-spacing: 0.3px;
    padding: 20px;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
    width: 80%;
}
#task-form input:focus, #task-form input:active, #task-form button:focus, #task-form button:active{
    outline-color: #F0553B;
    outline-width: thin;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
}
#task-form button {
    background: none repeat scroll 0 0 #f0553b;
    border: medium none;
    
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    -ms-border-radius: 0 4px 4px 0;
    -o-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
    
    color: #fff;
    cursor: pointer;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 15px;
    height: 60px;
    margin-left: -1px;
    padding: 0 20px;
    position: relative;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
    width: 20%;
}
#task-form button:hover{
    opacity: 0.8;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
}
#task-container {
    float: left;
    width: 100%;
}

/* List Styles*/
#task-container ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
    z-index: 999;
}
#task-container .task-headline{
    display:none;
    color:#666666;
    border-bottom:1px solid #C8C7BB;
    padding-bottom: 20px;
    margin-bottom:20px;
    font-size:1.6em;
    position: relative;
}
#task-container .task-headline:before{
    height: 1px;
    width: 100%;
    background: #FFF;
    position: absolute;
    content: " ";
    bottom: 0px;
    left: 0;
}
#task-container .nothing-message {
    background: url("../images/logo-2.png") no-repeat scroll center 20px / 15% auto rgba(0, 0, 0, 0);
    color: #333333;
    height: 160px;
}
#task-container li{
    display:none;
    float:left;
    width:49%;
    overflow: auto;
    height:auto;
    min-height:10px;
    background:#FFF;
    display: inline-block;
    padding:20px;
    border:1px solid #CCC;
    color:#666;
    border-top:9px solid #39D1B4;
    cursor:pointer;
    margin-bottom:10px;
    margin-right:2%;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
    position: relative;
}
#task-container li:nth-child(even){
    margin-right: 0;
}
#task-container li:hover{
    opacity: 0.8;
    border-top:9px solid #F0553B;
}
#task-container p{
    line-height: 1.6em;
    text-align: left;
}
#task-container li.complete{
    opacity:0.3;
    border-top:9px solid #666;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    

}
#task-container li.complete:before{
    background:url("../images/complete.png") no-repeat;
    position: absolute;
    top:5px;
    right:5px;
    content: "";
    width: 55px;
    height: 55px;
    background-size: 100%;
}
#task-container li.complete:hover{
    border-top:9px solid #F0553B;
    opacity:0.6;
}
#task-container li.complete p{
    text-decoration: line-through;
}

/* Secondary Control Styles*/
#controls{
    display:none;
    text-align: center;
    clear:both;
    margin-top:60px;

    background:#E4E3D5;
    padding:20px;
    border:1px solid #c8c7bb;
}
#controls p{
    display:inline-block;
    color:#666;
    font-style: italic;
}
#controls p:first-child{
    margin-right:20px;
}
#clear-all-tasks{
    clear:both;
    margin-top:20px;
    background:#999;
    border:none;
    color:#FFF;
    padding:10px 20px;
    text-transform: uppercase;
    cursor: pointer;
    font-family: "Microsoft YaHei";
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
}
#clear-all-tasks:hover{
    background:#666;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
}

/* Todo List */
.tdl-holder {
    float: left;
    margin: 30px 0 0;
    width: 100%;
}
.tdl-content {
    float: left;
    width: 100%;
}
.tdl-holder li {
    background-color: #fff;
    border: 1px solid #e8ecec;
    color: #333333;
    float: left;
    margin-bottom: 5px;
    width: 100%;
}
.tdl-holder li span {
    color: #333333;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    letter-spacing: 0.3px;
    margin-left: 30px;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
}
.tdl-holder label:hover {
    background-color: #fafafa;
    color: #333333;
}
.tdl-holder label {
    cursor: pointer;
    display: block;
    line-height: 56px;
    margin: 0;
    padding: 0 15px;
    position: relative;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
}

.tdl-holder label a {
    background-color: #222222;
    color: #FFFFFF;
    display: none;
    float: right;
    font-weight: bold;
    height: 16px;
    line-height: 14px;
    margin-top: 20px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all 0.2s linear 0s;
    -moz-transition: all 0.2s linear 0s;
    -ms-transition: all 0.2s linear 0s;
    -o-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
    width: 16px;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.tdl-holder label:hover a{
    display: block;
}

.tdl-holder label a:hover{  
    background-color:#fff;
    color:#de3f53;
}

.tdl-holder input[type="checkbox"]{
    cursor: pointer;
    opacity: 0;
    position: absolute;
}
.tdl-content > ul {
    float: left;
    list-style: none outside none;
    margin: 0 0 -6px;
    padding: 0;
    width: 100%;
}
.tdl-holder input[type="checkbox"] + i {
    background-color: #efefef;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    display: block;
    height: 16px;
    position: absolute;
    top: 20px;
    width: 16px;
}

.tdl-holder input[type="checkbox"]:checked + i:after {
    background-color: #c4c4c4;
    content: "";
    display: block;
    height: 8px;
    left: 4px;
    position: absolute;
    top: 4px;
    width: 8px;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.tdl-holder input[type="checkbox"]:checked ~ span {
    color: #777777;
    text-decoration: line-through;
}
.tdl-holder input[type="text"] {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #bfbfbf;

    color: #464f72;
    font-family: "Microsoft YaHei";
    font-size: 18px;
    margin: 40px 0 0;
    padding: 20px 15px;
    
    -webkit-transition:all 0.4s ease 0s;
    -moz-transition:all 0.4s ease 0s;
    -ms-transition:all 0.4s ease 0s;
    -o-transition:all 0.4s ease 0s;
    transition:all 0.4s ease 0s;
    width: 100%;
}

.tdl-holder input[type="text"]:hover{
    color:#4c577f;
}

.tdl-holder input[type="text"]:focus {
    color: #333333;
}
.tdl-holder ::-webkit-input-placeholder {color: #464f72;} /* WebKit browsers */
.tdl-holder :-moz-placeholder           {color: #464f72;} /* Mozilla Firefox 4 to 18 */
.tdl-holder ::-moz-placeholder          {color: #464f72;} /* Mozilla Firefox 19+ */
.tdl-holder :-ms-input-placeholder      {color: #464f72;} /* Internet Explorer 10+ */
.tdl-holder li.remove{
    -webkit-animation:collapseItem 300ms ease;
            animation:collapseItem 300ms ease;
    -webkit-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
            transform-origin: 50% 0%;

}
.tdl-holder li.remove span{
    color: #586186;
    text-decoration: line-through;
}
@keyframes collapseItem {
    0%      { -ms-transform: perspective(500px) rotateX(0deg);transform: perspective(500px) rotateX(0deg);  }
    100%    { -ms-transform: perspective(500px) rotateX(-90deg);transform: perspective(500px) rotateX(-90deg); }
}

@-webkit-keyframes collapseItem {
    0%      { -webkit-transform: perspective(500px) rotateX(0deg);  }
    100%    { -webkit-transform: perspective(500px) rotateX(-90deg);}
}
.tdl-holder input[type="checkbox"]:checked + i:after {
    background-color: #c4c4c4;
    content: "";
    display: block;
    height: 8px;
    left: 4px;
    position: absolute;
    top: 4px;
    width: 8px;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.tdl-holder input[type="checkbox"]:checked ~ span {
    color: #777777;
    text-decoration: line-through;
}
.tdl-holder input[type="text"] {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #bfbfbf;
    
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    -ms-border-radius: 0 !important;
    -o-border-radius: 0 !important;
    border-radius: 0 !important;

    
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    box-shadow: none !important;

    color: #464f72;
    font-family: "Microsoft YaHei";
    font-size: 18px;
    margin: 40px 0 0;
    padding: 20px 15px;
    
    -webkit-transition:all 0.4s ease 0s;
    -moz-transition:all 0.4s ease 0s;
    -ms-transition:all 0.4s ease 0s;
    -o-transition:all 0.4s ease 0s;
    transition:all 0.4s ease 0s;
    width: 100%;
}

.tdl-holder input[type="text"]:hover{
    color:#4c577f;
}

.tdl-holder input[type="text"]:focus {
    color: #333333;
}

.tdl-holder ::-webkit-input-placeholder {color: #464f72;} /* WebKit browsers */
.tdl-holder :-moz-placeholder           {color: #464f72;} /* Mozilla Firefox 4 to 18 */
.tdl-holder ::-moz-placeholder          {color: #464f72;} /* Mozilla Firefox 19+ */
.tdl-holder :-ms-input-placeholder      {color: #464f72;} /* Internet Explorer 10+ */



.tdl-holder li.remove{
    -webkit-animation:collapseItem 300ms ease;
            animation:collapseItem 300ms ease;
    -webkit-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
            transform-origin: 50% 0%;

}

.tdl-holder li.remove span{
    color: #586186;
    text-decoration: line-through;
}

.mini-progress {
    height: 8px;
}
.progress {
    background-color: #f5f5f5;
    
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;

    
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;

    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
}
.progress.small-progress {
    height: 14px;
}
.large-progress {
    height: 20px;
}
.progress.mini-progress {
    height: 10px;
}
.progress {
    float: left;
    width: 100%;
}


.top span.clear {
    float: left;
}
.top .screen {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
    coMicrosoft YaHeiat: right;
    font-size: 17px;
    height: 36px;
    letter-spacing: 1px;
    line-height: 40px;
    padding: 0 10px;
    text-align: right;
    width: 100%;
}
.widgetMicrosoft YaHei   margin: 0;
    padding: 0 15px;
}
.widget .row > div.keys {
    padding: 0 15px;
}
.widget .row > div.keys > div {
    padding: 0 10px;
}
.keys, .top {
    margin: 0 -5px;
    overflow: hidden;
}
.keys span {
    -moz-user-select: none;
    background: none repeat scroll 0 0 #dddddd;
    color: #333333;
    cursor: pointer;
    float: left;
    font-family: "Microsoft YaHei";
    height: 36px;
    line-height: 36px;
    margin: 0 7px 15px 0;
    position: relative;
    text-align: center;
    top: 0;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
    width: 100%;
}
.top span.clear {
    float: left;
    position: relative;
    top: 0;
    
    cursor: pointer;
    
    width: 100%;
    height: 36px;

    margin: 0 7px 15px 0;
    
    color: #888;
    line-height: 36px;
    text-align: center;
    
    user-select: none;
    
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
}
.keys {
    float: left;
    margin: 0;
    width: 100%;
}
.keys span.operator {
    margin-right: 0;
}
.keys span.eval {
    color: #888e5f;
}

.top span.clear {
    color: white;
}
.keys span:hover {
    color: white;
    background:#999999;
}

.keys span.eval:hover {
    background: #abb850;
    color: #ffffff;
}

.top span.clear:hover {
    background: #f68991;
    color: white;
}


.tooltips-sec {
    float: left;
    padding: 30px;
    position: relative;
    width: 100%;
}
.tooltips-sec > .tooltip {
    float: left;
    margin: 0 42px 0 0;
    opacity: 1;
    position: relative;
}
.tooltips-on-hover {
    float: left;
    padding: 30px;
    width: 100%;
}
.tooltips-on-hover > .widget-title {
    margin-bottom: 30px;
}

.grids {
    float: left;
    padding: 40px;
    width: 100%;
}


/* Ribbon Grids */
.ribbon-box {
    float: left;
    width: 100%;
}
.ribbon-sec > p {
    color: #777777;
    float: left;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 24px;
    margin: 0;
    width: 100%;
}
.ribbon-box > h2 {
    color: #838383;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 18px;
    font-weight: 400;
    line-height: 14px;
    margin: 0;
    padding: 20px 0;
}




.ribbon-wrapper {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: absolute;
  top: -3px;
  right: -3px;
}

.ribbon-design {
    color: #FFFFFF;
    font: bold 12px 'Microsoft YaHei';
    left: -5px;
    letter-spacing: 0.35px;
    padding: 7px 0;
    position: relative;
    text-align: center;
    top: 15px;
    width: 120px;
    
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.ribbon-design:before, .ribbon-design:after {
  content: "";
  border-top:   3px solid #6e8900;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon-design:before {
  left: 0;
}
.ribbon-design:after {
  right: 0;
}
.ribbon-sec {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #ECECEC;
    float: left;
    padding: 20px;
    position: relative;
    z-index: 90;

    
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;

}


@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* :not(:required) hides this rule from IE9 and below */
.spinner:not(:required) {
  -webkit-animation: spinner 1500ms infinite linear;
  -moz-animation: spinner 1500ms infinite linear;
  -ms-animation: spinner 1500ms infinite linear;
  -o-animation: spinner 1500ms infinite linear;
  animation: spinner 1500ms infinite linear;
  -webkit-border-radius: 0.5em;
  -moz-border-radius: 0.5em;
  -ms-border-radius: 0.5em;
  -o-border-radius: 0.5em;
  border-radius: 0.5em;
  -webkit-box-shadow: rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0;
  -moz-box-shadow: rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0;
  box-shadow: rgba(0, 0, 51, 0.3) 1.5em 0 0 0, rgba(0, 0, 51, 0.3) 1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) 0 1.5em 0 0, rgba(0, 0, 51, 0.3) -1.1em 1.1em 0 0, rgba(0, 0, 51, 0.3) -1.5em 0 0 0, rgba(0, 0, 51, 0.3) -1.1em -1.1em 0 0, rgba(0, 0, 51, 0.3) 0 -1.5em 0 0, rgba(0, 0, 51, 0.3) 1.1em -1.1em 0 0;
  display: inline-block;
  font-size: 10px;
  width: 1em;
  height: 1em;
  margin: 1.5em;
  overflow: hidden;
  text-indent: 100%;
}

@-webkit-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spinner {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* :not(:required) hides this rule from IE9 and below */
.refreshing:not(:required) {
  -webkit-animation: spinner 1000ms infinite linear;
  -moz-animation: spinner 1000ms infinite linear;
  -ms-animation: spinner 1000ms infinite linear;
  -o-animation: spinner 1000ms infinite linear;
  animation: spinner 1000ms infinite linear;
  -webkit-border-radius: 2.4em;
  -moz-border-radius: 2.4em;
  -ms-border-radius: 2.4em;
  -o-border-radius: 2.4em;
  border-radius: 2.4em;
  border: 0.4em solid #99aacc;
  border-left-color: transparent;
  color: transparent;
  display: inline-block;
  font-size: 10px;
  line-height: 1.2;
  width: 3em;
  height: 3em;
  text-indent: 100%;
}
.refreshing:not(:required):after {
  display: block;
  border: 0.5em solid transparent;
  border-top-color: #99aacc;
  border-left-color: #99aacc;
  content: '';
  width: 0;
  height: 0;
  overflow: hidden;
  margin-left: -0.2em;
  margin-top: 1em;
}

@-webkit-keyframes throbber {
  0% {
    background: #dde2e7;
  }

  10% {
    background: #6b9dc8;
  }

  40% {
    background: #dde2e7;
  }
}

@-moz-keyframes throbber {
  0% {
    background: #dde2e7;
  }

  10% {
    background: #6b9dc8;
  }

  40% {
    background: #dde2e7;
  }
}

@-o-keyframes throbber {
  0% {
    background: #dde2e7;
  }

  10% {
    background: #6b9dc8;
  }

  40% {
    background: #dde2e7;
  }
}

@keyframes throbber {
  0% {
    background: #dde2e7;
  }

  10% {
    background: #6b9dc8;
  }

  40% {
    background: #dde2e7;
  }
}

/* :not(:required) hides these rules from IE9 and below */
.throbber:not(:required) {
  -webkit-animation: throbber 2000ms 300ms infinite ease-out;
  -moz-animation: throbber 2000ms 300ms infinite ease-out;
  -ms-animation: throbber 2000ms 300ms infinite ease-out;
  -o-animation: throbber 2000ms 300ms infinite ease-out;
  animation: throbber 2000ms 300ms infinite ease-out;
  background: #dde2e7;
  display: inline-block;
  position: relative;
  text-indent: -9999px;
  width: 0.9em;
  height: 1.5em;
  margin: 0 1.6em;
}
.throbber:not(:required):before, .throbber:not(:required):after {
  background: #dde2e7;
  content: '\x200B';
  display: inline-block;
  width: 0.9em;
  height: 1.5em;
  position: absolute;
  top: 0;
}
.throbber:not(:required):before {
  -webkit-animation: throbber 2000ms 150ms infinite ease-out;
  -moz-animation: throbber 2000ms 150ms infinite ease-out;
  -ms-animation: throbber 2000ms 150ms infinite ease-out;
  -o-animation: throbber 2000ms 150ms infinite ease-out;
  animation: throbber 2000ms 150ms infinite ease-out;
  left: -1.6em;
}
.throbber:not(:required):after {
  -webkit-animation: throbber 2000ms 450ms infinite ease-out;
  -moz-animation: throbber 2000ms 450ms infinite ease-out;
  -ms-animation: throbber 2000ms 450ms infinite ease-out;
  -o-animation: throbber 2000ms 450ms infinite ease-out;
  animation: throbber 2000ms 450ms infinite ease-out;
  right: -1.6em;
}

/* Styles for old versions of IE */
.heartbeat {
  font-family: "Microsoft YaHei";
  font-weight: 100;
}

@-webkit-keyframes heartbeat {
  0% {
    -webkit-transform: rotate(45deg) scale(1);
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -o-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }

  14% {
    -webkit-transform: rotate(45deg) scale(1.3);
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -o-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }

  28% {
    -webkit-transform: rotate(45deg) scale(1);
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -o-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }

  42% {
    -webkit-transform: rotate(45deg) scale(1.3);
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -o-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }

  70% {
    -webkit-transform: rotate(45deg) scale(1);
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -o-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
}

@-moz-keyframes heartbeat {
  0% {
    -webkit-transform: rotate(45deg) scale(1);
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -o-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }

  14% {
    -webkit-transform: rotate(45deg) scale(1.3);
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -o-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }

  28% {
    -webkit-transform: rotate(45deg) scale(1);
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -o-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }

  42% {
    -webkit-transform: rotate(45deg) scale(1.3);
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -o-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }

  70% {
    -webkit-transform: rotate(45deg) scale(1);
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -o-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
}

@-o-keyframes heartbeat {
  0% {
    -webkit-transform: rotate(45deg) scale(1);
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -o-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }

  14% {
    -webkit-transform: rotate(45deg) scale(1.3);
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -o-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }

  28% {
    -webkit-transform: rotate(45deg) scale(1);
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -o-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }

  42% {
    -webkit-transform: rotate(45deg) scale(1.3);
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -o-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }

  70% {
    -webkit-transform: rotate(45deg) scale(1);
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -o-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
}

@keyframes heartbeat {
  0% {
    -webkit-transform: rotate(45deg) scale(1);
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -o-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }

  14% {
    -webkit-transform: rotate(45deg) scale(1.3);
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -o-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }

  28% {
    -webkit-transform: rotate(45deg) scale(1);
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -o-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }

  42% {
    -webkit-transform: rotate(45deg) scale(1.3);
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -o-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }

  70% {
    -webkit-transform: rotate(45deg) scale(1);
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -o-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
}

/* :not(:required) hides this rule from IE9 and below */
.heartbeat:not(:required) {
  -webkit-animation: heartbeat 1300ms ease 0s infinite normal;
  -moz-animation: heartbeat 1300ms ease 0s infinite normal;
  -ms-animation: heartbeat 1300ms ease 0s infinite normal;
  -o-animation: heartbeat 1300ms ease 0s infinite normal;
  animation: heartbeat 1300ms ease 0s infinite normal;
  display: inline-block;
  position: relative;
  overflow: hidden;
  text-indent: -9999px;
  width: 36px;
  height: 36px;
  -webkit-transform: rotate(45deg) scale(1);
  -moz-transform: rotate(45deg) scale(1);
  -ms-transform: rotate(45deg) scale(1);
  -o-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.heartbeat:not(:required):after, .heartbeat:not(:required):before {
  position: absolute;
  content: "";
  background: #ee8877;
}
.heartbeat:not(:required):before {
  -moz-border-radius-topleft: 12px;
  -webkit-border-top-left-radius: 12px;
  border-top-left-radius: 12px;
  -moz-border-radius-bottomleft: 12px;
  -webkit-border-bottom-left-radius: 12px;
  border-bottom-left-radius: 12px;
  top: 12px;
  left: 0;
  width: 36px;
  height: 24px;
}
.heartbeat:not(:required):after {
  -moz-border-radius-topleft: 12px;
  -webkit-border-top-left-radius: 12px;
  border-top-left-radius: 12px;
  -moz-border-radius-topright: 12px;
  -webkit-border-top-right-radius: 12px;
  border-top-right-radius: 12px;
  top: 0;
  left: 12px;
  width: 24px;
  height: 12px;
}

@-webkit-keyframes gauge {
  0% {
    -webkit-transform: rotate(-50deg);
    -moz-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    -o-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }

  10% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg);
  }

  20% {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
  }

  24% {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
  }

  40% {
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }

  54% {
    -webkit-transform: rotate(70deg);
    -moz-transform: rotate(70deg);
    -ms-transform: rotate(70deg);
    -o-transform: rotate(70deg);
    transform: rotate(70deg);
  }

  56% {
    -webkit-transform: rotate(78deg);
    -moz-transform: rotate(78deg);
    -ms-transform: rotate(78deg);
    -o-transform: rotate(78deg);
    transform: rotate(78deg);
  }

  58% {
    -webkit-transform: rotate(73deg);
    -moz-transform: rotate(73deg);
    -ms-transform: rotate(73deg);
    -o-transform: rotate(73deg);
    transform: rotate(73deg);
  }

  60% {
    -webkit-transform: rotate(75deg);
    -moz-transform: rotate(75deg);
    -ms-transform: rotate(75deg);
    -o-transform: rotate(75deg);
    transform: rotate(75deg);
  }

  62% {
    -webkit-transform: rotate(70deg);
    -moz-transform: rotate(70deg);
    -ms-transform: rotate(70deg);
    -o-transform: rotate(70deg);
    transform: rotate(70deg);
  }

  70% {
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }

  80% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg);
  }

  83% {
    -webkit-transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    -o-transform: rotate(25deg);
    transform: rotate(25deg);
  }

  86% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg);
  }

  89% {
    -webkit-transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    -o-transform: rotate(25deg);
    transform: rotate(25deg);
  }

  100% {
    -webkit-transform: rotate(-50deg);
    -moz-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    -o-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
}

@-moz-keyframes gauge {
  0% {
    -webkit-transform: rotate(-50deg);
    -moz-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    -o-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }

  10% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg);
  }

  20% {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
  }

  24% {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
  }

  40% {
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }

  54% {
    -webkit-transform: rotate(70deg);
    -moz-transform: rotate(70deg);
    -ms-transform: rotate(70deg);
    -o-transform: rotate(70deg);
    transform: rotate(70deg);
  }

  56% {
    -webkit-transform: rotate(78deg);
    -moz-transform: rotate(78deg);
    -ms-transform: rotate(78deg);
    -o-transform: rotate(78deg);
    transform: rotate(78deg);
  }

  58% {
    -webkit-transform: rotate(73deg);
    -moz-transform: rotate(73deg);
    -ms-transform: rotate(73deg);
    -o-transform: rotate(73deg);
    transform: rotate(73deg);
  }

  60% {
    -webkit-transform: rotate(75deg);
    -moz-transform: rotate(75deg);
    -ms-transform: rotate(75deg);
    -o-transform: rotate(75deg);
    transform: rotate(75deg);
  }

  62% {
    -webkit-transform: rotate(70deg);
    -moz-transform: rotate(70deg);
    -ms-transform: rotate(70deg);
    -o-transform: rotate(70deg);
    transform: rotate(70deg);
  }

  70% {
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }

  80% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg);
  }

  83% {
    -webkit-transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    -o-transform: rotate(25deg);
    transform: rotate(25deg);
  }

  86% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg);
  }

  89% {
    -webkit-transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    -o-transform: rotate(25deg);
    transform: rotate(25deg);
  }

  100% {
    -webkit-transform: rotate(-50deg);
    -moz-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    -o-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
}

@-o-keyframes gauge {
  0% {
    -webkit-transform: rotate(-50deg);
    -moz-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    -o-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }

  10% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg);
  }

  20% {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
  }

  24% {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
  }

  40% {
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }

  54% {
    -webkit-transform: rotate(70deg);
    -moz-transform: rotate(70deg);
    -ms-transform: rotate(70deg);
    -o-transform: rotate(70deg);
    transform: rotate(70deg);
  }

  56% {
    -webkit-transform: rotate(78deg);
    -moz-transform: rotate(78deg);
    -ms-transform: rotate(78deg);
    -o-transform: rotate(78deg);
    transform: rotate(78deg);
  }

  58% {
    -webkit-transform: rotate(73deg);
    -moz-transform: rotate(73deg);
    -ms-transform: rotate(73deg);
    -o-transform: rotate(73deg);
    transform: rotate(73deg);
  }

  60% {
    -webkit-transform: rotate(75deg);
    -moz-transform: rotate(75deg);
    -ms-transform: rotate(75deg);
    -o-transform: rotate(75deg);
    transform: rotate(75deg);
  }

  62% {
    -webkit-transform: rotate(70deg);
    -moz-transform: rotate(70deg);
    -ms-transform: rotate(70deg);
    -o-transform: rotate(70deg);
    transform: rotate(70deg);
  }

  70% {
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }

  80% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg);
  }

  83% {
    -webkit-transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    -o-transform: rotate(25deg);
    transform: rotate(25deg);
  }

  86% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg);
  }

  89% {
    -webkit-transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    -o-transform: rotate(25deg);
    transform: rotate(25deg);
  }

  100% {
    -webkit-transform: rotate(-50deg);
    -moz-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    -o-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
}

@keyframes gauge {
  0% {
    -webkit-transform: rotate(-50deg);
    -moz-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    -o-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }

  10% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg);
  }

  20% {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
  }

  24% {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg);
  }

  40% {
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }

  54% {
    -webkit-transform: rotate(70deg);
    -moz-transform: rotate(70deg);
    -ms-transform: rotate(70deg);
    -o-transform: rotate(70deg);
    transform: rotate(70deg);
  }

  56% {
    -webkit-transform: rotate(78deg);
    -moz-transform: rotate(78deg);
    -ms-transform: rotate(78deg);
    -o-transform: rotate(78deg);
    transform: rotate(78deg);
  }

  58% {
    -webkit-transform: rotate(73deg);
    -moz-transform: rotate(73deg);
    -ms-transform: rotate(73deg);
    -o-transform: rotate(73deg);
    transform: rotate(73deg);
  }

  60% {
    -webkit-transform: rotate(75deg);
    -moz-transform: rotate(75deg);
    -ms-transform: rotate(75deg);
    -o-transform: rotate(75deg);
    transform: rotate(75deg);
  }

  62% {
    -webkit-transform: rotate(70deg);
    -moz-transform: rotate(70deg);
    -ms-transform: rotate(70deg);
    -o-transform: rotate(70deg);
    transform: rotate(70deg);
  }

  70% {
    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }

  80% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg);
  }

  83% {
    -webkit-transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    -o-transform: rotate(25deg);
    transform: rotate(25deg);
  }

  86% {
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    transform: rotate(20deg);
  }

  89% {
    -webkit-transform: rotate(25deg);
    -moz-transform: rotate(25deg);
    -ms-transform: rotate(25deg);
    -o-transform: rotate(25deg);
    transform: rotate(25deg);
  }

  100% {
    -webkit-transform: rotate(-50deg);
    -moz-transform: rotate(-50deg);
    -ms-transform: rotate(-50deg);
    -o-transform: rotate(-50deg);
    transform: rotate(-50deg);
  }
}

/* Styles for old versions of IE */
.gauge {
  font-family: "Microsoft YaHei";
  font-weight: 100;
}

/* :not(:required) hides this rule from IE9 and below */
.gauge:not(:required) {
  background: #66ccaa;
  -moz-border-radius-topleft: 32px;
  -webkit-border-top-left-radius: 32px;
  border-top-left-radius: 32px;
  -moz-border-radius-topright: 32px;
  -webkit-border-top-right-radius: 32px;
  border-top-right-radius: 32px;
  display: inline-block;
  width: 64px;
  height: 32px;
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
}
.gauge:not(:required)::before {
  -webkit-animation: gauge 4000ms infinite ease;
  -moz-animation: gauge 4000ms infinite ease;
  -ms-animation: gauge 4000ms infinite ease;
  -o-animation: gauge 4000ms infinite ease;
  animation: gauge 4000ms infinite ease;
  background: white;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
  content: '';
  position: absolute;
  left: 30px;
  top: 5.33333px;
  width: 4px;
  height: 26.66667px;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
.gauge:not(:required)::after {
  content: '';
  background: white;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  position: absolute;
  left: 25.6px;
  top: 25.6px;
  width: 12.8px;
  height: 12.8px;
}

@-webkit-keyframes timer {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes timer {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes timer {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes timer {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* Styles for old versions of IE */
.timer {
  font-family: "Microsoft YaHei";
  font-weight: 100;
}

/* :not(:required) hides this rule from IE9 and below */
.timer:not(:required) {
  border: 6px solid #cc88dd;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  -ms-border-radius: 24px;
  -o-border-radius: 24px;
  border-radius: 24px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  width: 48px;
  height: 48px;
}
.timer:not(:required)::before {
  -webkit-animation: timer 1250ms infinite linear;
  -moz-animation: timer 1250ms infinite linear;
  -ms-animation: timer 1250ms infinite linear;
  -o-animation: timer 1250ms infinite linear;
  animation: timer 1250ms infinite linear;
  -webkit-transform-origin: 3px 3px;
  -moz-transform-origin: 3px 3px;
  -ms-transform-origin: 3px 3px;
  -o-transform-origin: 3px 3px;
  transform-origin: 3px 3px;
  background: #cc88dd;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  content: '';
  display: block;
  position: absolute;
  width: 6px;
  height: 19.2px;
  left: 15px;
  top: 15px;
}
.timer:not(:required)::after {
  -webkit-animation: timer 15000ms infinite linear;
  -moz-animation: timer 15000ms infinite linear;
  -ms-animation: timer 15000ms infinite linear;
  -o-animation: timer 15000ms infinite linear;
  animation: timer 15000ms infinite linear;
  -webkit-transform-origin: 3px 3px;
  -moz-transform-origin: 3px 3px;
  -ms-transform-origin: 3px 3px;
  -o-transform-origin: 3px 3px;
  transform-origin: 3px 3px;
  background: #cc88dd;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  content: '';
  display: block;
  position: absolute;
  width: 6px;
  height: 16px;
  left: 15px;
  top: 15px;
}

@-webkit-keyframes three-quarters {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes three-quarters {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes three-quarters {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes three-quarters {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* Styles for old versions of IE */
.three-quarters {
  font-family: "Microsoft YaHei";
  font-weight: 100;
}

/* :not(:required) hides this rule from IE9 and below */
.three-quarters:not(:required) {
  -webkit-animation: three-quarters 1250ms infinite linear;
  -moz-animation: three-quarters 1250ms infinite linear;
  -ms-animation: three-quarters 1250ms infinite linear;
  -o-animation: three-quarters 1250ms infinite linear;
  animation: three-quarters 1250ms infinite linear;
  border: 8px solid #3388ee;
  border-right-color: transparent;
  
  -webkit-border-radius: 16px;
  -ms-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  border-radius: 16px;

  box-sizing: border-box;
  display: inline-block;
  position: relative;
  overflow: hidden;
  text-indent: -9999px;
  width: 32px;
  height: 32px;
}

@-webkit-keyframes wobblebar {
  0% {
    left: 4px;
  }

  3% {
    left: 104px;
  }

  6% {
    left: 4px;
  }

  9% {
    left: 104px;
  }

  12% {
    left: 4px;
  }

  15% {
    left: 104px;
  }

  18% {
    left: 32px;
  }

  27% {
    left: 32px;
  }

  30% {
    left: 104px;
  }

  33% {
    left: 4px;
  }

  36% {
    left: 104px;
  }

  39% {
    left: 4px;
  }

  42% {
    left: 104px;
  }

  45% {
    left: 4px;
  }

  48% {
    left: 104px;
  }

  51% {
    left: 52px;
  }

  63% {
    left: 52px;
  }

  66% {
    left: 4px;
  }

  69% {
    left: 104px;
  }

  72% {
    left: 4px;
  }

  75% {
    left: 104px;
  }

  78% {
    left: 4px;
  }

  81% {
    left: 104px;
  }

  84% {
    left: 72px;
  }

  94% {
    left: 72px;
  }

  97% {
    left: 104px;
  }
}

@-moz-keyframes wobblebar {
  0% {
    left: 4px;
  }

  3% {
    left: 104px;
  }

  6% {
    left: 4px;
  }

  9% {
    left: 104px;
  }

  12% {
    left: 4px;
  }

  15% {
    left: 104px;
  }

  18% {
    left: 32px;
  }

  27% {
    left: 32px;
  }

  30% {
    left: 104px;
  }

  33% {
    left: 4px;
  }

  36% {
    left: 104px;
  }

  39% {
    left: 4px;
  }

  42% {
    left: 104px;
  }

  45% {
    left: 4px;
  }

  48% {
    left: 104px;
  }

  51% {
    left: 52px;
  }

  63% {
    left: 52px;
  }

  66% {
    left: 4px;
  }

  69% {
    left: 104px;
  }

  72% {
    left: 4px;
  }

  75% {
    left: 104px;
  }

  78% {
    left: 4px;
  }

  81% {
    left: 104px;
  }

  84% {
    left: 72px;
  }

  94% {
    left: 72px;
  }

  97% {
    left: 104px;
  }
}

@-o-keyframes wobblebar {
  0% {
    left: 4px;
  }

  3% {
    left: 104px;
  }

  6% {
    left: 4px;
  }

  9% {
    left: 104px;
  }

  12% {
    left: 4px;
  }

  15% {
    left: 104px;
  }

  18% {
    left: 32px;
  }

  27% {
    left: 32px;
  }

  30% {
    left: 104px;
  }

  33% {
    left: 4px;
  }

  36% {
    left: 104px;
  }

  39% {
    left: 4px;
  }

  42% {
    left: 104px;
  }

  45% {
    left: 4px;
  }

  48% {
    left: 104px;
  }

  51% {
    left: 52px;
  }

  63% {
    left: 52px;
  }

  66% {
    left: 4px;
  }

  69% {
    left: 104px;
  }

  72% {
    left: 4px;
  }

  75% {
    left: 104px;
  }

  78% {
    left: 4px;
  }

  81% {
    left: 104px;
  }

  84% {
    left: 72px;
  }

  94% {
    left: 72px;
  }

  97% {
    left: 104px;
  }
}

@keyframes wobblebar {
  0% {
    left: 4px;
  }

  3% {
    left: 104px;
  }

  6% {
    left: 4px;
  }

  9% {
    left: 104px;
  }

  12% {
    left: 4px;
  }

  15% {
    left: 104px;
  }

  18% {
    left: 32px;
  }

  27% {
    left: 32px;
  }

  30% {
    left: 104px;
  }

  33% {
    left: 4px;
  }

  36% {
    left: 104px;
  }

  39% {
    left: 4px;
  }

  42% {
    left: 104px;
  }

  45% {
    left: 4px;
  }

  48% {
    left: 104px;
  }

  51% {
    left: 52px;
  }

  63% {
    left: 52px;
  }

  66% {
    left: 4px;
  }

  69% {
    left: 104px;
  }

  72% {
    left: 4px;
  }

  75% {
    left: 104px;
  }

  78% {
    left: 4px;
  }

  81% {
    left: 104px;
  }

  84% {
    left: 72px;
  }

  94% {
    left: 72px;
  }

  97% {
    left: 104px;
  }
}

/* Styles for old versions of IE */
.wobblebar {
  font-family: "Microsoft YaHei";
  font-weight: 100;
}

/* :not(:required) hides this rule from IE9 and below */
.wobblebar:not(:required) {
  background: #aa99dd;
  -webkit-border-radius: 10.66667px;
  -moz-border-radius: 10.66667px;
  -ms-border-radius: 10.66667px;
  -o-border-radius: 10.66667px;
  border-radius: 10.66667px;
  display: inline-block;
  overflow: hidden;
  text-indent: -9999px;
  width: 128px;
  height: 21.33333px;
  position: relative;
}
.wobblebar:not(:required)::after {
  -webkit-animation: wobblebar 15000ms infinite ease;
  -moz-animation: wobblebar 15000ms infinite ease;
  -ms-animation: wobblebar 15000ms infinite ease;
  -o-animation: wobblebar 15000ms infinite ease;
  animation: wobblebar 15000ms infinite ease;
  background: white;
  display: block;
  -webkit-border-radius: 7.11111px;
  -moz-border-radius: 7.11111px;
  -ms-border-radius: 7.11111px;
  -o-border-radius: 7.11111px;
  border-radius: 7.11111px;
  content: '';
  position: absolute;
  top: 3.55556px;
  left: 4px;
  width: 21.33333px;
  height: 14.22222px;
}

@-webkit-keyframes atebits {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  3% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  10% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  13% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  20% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  23% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  30% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  33% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  40% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  43% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
  }

  50% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
  }

  53% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  60% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  63% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  70% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  73% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  80% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  83% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }

  90% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }

  93% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@-moz-keyframes atebits {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  3% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  10% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  13% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  20% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  23% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  30% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  33% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  40% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  43% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
  }

  50% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
  }

  53% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  60% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  63% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  70% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  73% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  80% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  83% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }

  90% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }

  93% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@-o-keyframes atebits {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  3% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  10% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  13% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  20% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  23% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  30% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  33% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  40% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  43% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
  }

  50% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
  }

  53% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  60% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  63% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  70% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  73% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  80% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  83% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }

  90% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }

  93% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes atebits {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  3% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  10% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  13% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  20% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  23% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  30% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  33% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  40% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  43% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
  }

  50% {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
  }

  53% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  60% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  63% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  70% {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
  }

  73% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  80% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  83% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }

  90% {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }

  93% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

/* Styles for old versions of IE */
.atebits {
  font-family: "Microsoft YaHei";
  font-weight: 100;
}

/* :not(:required) hides this rule from IE9 and below */
.atebits:not(:required) {
  background: rgba(0, 0, 0, 0.5);
  display: inline-block;
  width: 9px;
  height: 9px;
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  -webkit-box-shadow: rgba(0, 0, 0, 0.5) -12px -12px 0 0, rgba(0, 0, 0, 0.5) 12px -12px 0 0, rgba(0, 0, 0, 0.5) -12px 0 0 0, rgba(0, 0, 0, 0.5) 12px 0 0 0, rgba(0, 0, 0, 0.5) -12px 12px 0 0, rgba(0, 0, 0, 0.5) 0 12px 0 0, rgba(0, 0, 0, 0.5) 12px 12px 0 0;
  -moz-box-shadow: rgba(0, 0, 0, 0.5) -12px -12px 0 0, rgba(0, 0, 0, 0.5) 12px -12px 0 0, rgba(0, 0, 0, 0.5) -12px 0 0 0, rgba(0, 0, 0, 0.5) 12px 0 0 0, rgba(0, 0, 0, 0.5) -12px 12px 0 0, rgba(0, 0, 0, 0.5) 0 12px 0 0, rgba(0, 0, 0, 0.5) 12px 12px 0 0;
  box-shadow: rgba(0, 0, 0, 0.5) -12px -12px 0 0, rgba(0, 0, 0, 0.5) 12px -12px 0 0, rgba(0, 0, 0, 0.5) -12px 0 0 0, rgba(0, 0, 0, 0.5) 12px 0 0 0, rgba(0, 0, 0, 0.5) -12px 12px 0 0, rgba(0, 0, 0, 0.5) 0 12px 0 0, rgba(0, 0, 0, 0.5) 12px 12px 0 0;
  -webkit-animation: atebits 8s infinite ease-in-out;
  -moz-animation: atebits 8s infinite ease-in-out;
  -ms-animation: atebits 8s infinite ease-in-out;
  -o-animation: atebits 8s infinite ease-in-out;
  animation: atebits 8s infinite ease-in-out;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

@-webkit-keyframes whirly {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-moz-keyframes whirly {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-o-keyframes whirly {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes whirly {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* Styles for old versions of IE */
.whirly {
  font-family: "Microsoft YaHei";
  font-weight: 100;
}

/* :not(:required) hides this rule from IE9 and below */
.whirly:not(:required) {
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  display: inline-block;
  width: 8px;
  height: 8px;
  background: transparent;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;
  -webkit-box-shadow: #ee6666 0px 26px 0 6px, #ee6666 0.90971px 26.05079px 0 5.93333px, #ee6666 1.82297px 26.06967px 0 5.86667px, #ee6666 2.73865px 26.05647px 0 5.8px, #ee6666 3.65561px 26.01104px 0 5.73333px, #ee6666 4.57274px 25.93327px 0 5.66667px, #ee6666 5.48887px 25.8231px 0 5.6px, #ee6666 6.40287px 25.68049px 0 5.53333px, #ee6666 7.31358px 25.50548px 0 5.46667px, #ee6666 8.21985px 25.2981px 0 5.4px, #ee6666 9.12054px 25.05847px 0 5.33333px, #ee6666 10.01448px 24.78672px 0 5.26667px, #ee6666 10.90054px 24.48302px 0 5.2px, #ee6666 11.77757px 24.1476px 0 5.13333px, #ee6666 12.64443px 23.78072px 0 5.06667px, #ee6666 13.5px 23.38269px 0 5px, #ee6666 14.34315px 22.95384px 0 4.93333px, #ee6666 15.17277px 22.49455px 0 4.86667px, #ee6666 15.98776px 22.00526px 0 4.8px, #ee6666 16.78704px 21.48643px 0 4.73333px, #ee6666 17.56953px 20.93855px 0 4.66667px, #ee6666 18.33418px 20.36217px 0 4.6px, #ee6666 19.07995px 19.75787px 0 4.53333px, #ee6666 19.80582px 19.12626px 0 4.46667px, #ee6666 20.5108px 18.468px 0 4.4px, #ee6666 21.1939px 17.78379px 0 4.33333px, #ee6666 21.85416px 17.07434px 0 4.26667px, #ee6666 22.49067px 16.34043px 0 4.2px, #ee6666 23.10251px 15.58284px 0 4.13333px, #ee6666 23.68881px 14.80241px 0 4.06667px, #ee6666 24.24871px 14.0px 0 4px, #ee6666 24.7814px 13.1765px 0 3.93333px, #ee6666 25.28607px 12.33284px 0 3.86667px, #ee6666 25.76198px 11.46997px 0 3.8px, #ee6666 26.2084px 10.58888px 0 3.73333px, #ee6666 26.62462px 9.69057px 0 3.66667px, #ee6666 27.01001px 8.77608px 0 3.6px, #ee6666 27.36392px 7.84648px 0 3.53333px, #ee6666 27.68577px 6.90284px 0 3.46667px, #ee6666 27.97502px 5.94627px 0 3.4px, #ee6666 28.23116px 4.97791px 0 3.33333px, #ee6666 28.4537px 3.99891px 0 3.26667px, #ee6666 28.64223px 3.01042px 0 3.2px, #ee6666 28.79635px 2.01364px 0 3.13333px, #ee6666 28.91571px 1.00976px 0 3.06667px, #ee6666 29px 0.0px 0 3px, #ee6666 29.04896px -1.01441px 0 2.93333px, #ee6666 29.06237px -2.03224px 0 2.86667px, #ee6666 29.04004px -3.05223px 0 2.8px, #ee6666 28.98185px -4.07313px 0 2.73333px, #ee6666 28.88769px -5.09368px 0 2.66667px, #ee6666 28.75754px -6.1126px 0 2.6px, #ee6666 28.59138px -7.12863px 0 2.53333px, #ee6666 28.38926px -8.14049px 0 2.46667px, #ee6666 28.15127px -9.1469px 0 2.4px, #ee6666 27.87755px -10.1466px 0 2.33333px, #ee6666 27.56827px -11.1383px 0 2.26667px, #ee6666 27.22365px -12.12075px 0 2.2px, #ee6666 26.84398px -13.09268px 0 2.13333px, #ee6666 26.42956px -14.05285px 0 2.06667px, #ee6666 25.98076px -15.0px 0 2px, #ee6666 25.49798px -15.93291px 0 1.93333px, #ee6666 24.98167px -16.85035px 0 1.86667px, #ee6666 24.43231px -17.75111px 0 1.8px, #ee6666 23.85046px -18.63402px 0 1.73333px, #ee6666 23.23668px -19.49789px 0 1.66667px, #ee6666 22.5916px -20.34157px 0 1.6px, #ee6666 21.91589px -21.16393px 0 1.53333px, #ee6666 21.21024px -21.96384px 0 1.46667px, #ee6666 20.4754px -22.74023px 0 1.4px, #ee6666 19.71215px -23.49203px 0 1.33333px, #ee6666 18.92133px -24.2182px 0 1.26667px, #ee6666 18.10379px -24.91772px 0 1.2px, #ee6666 17.26042px -25.58963px 0 1.13333px, #ee6666 16.39217px -26.23295px 0 1.06667px, #ee6666 15.5px -26.84679px 0 1px, #ee6666 14.58492px -27.43024px 0 0.93333px, #ee6666 13.64796px -27.98245px 0 0.86667px, #ee6666 12.69018px -28.50262px 0 0.8px, #ee6666 11.7127px -28.98995px 0 0.73333px, #ee6666 10.71663px -29.4437px 0 0.66667px, #ee6666 9.70313px -29.86317px 0 0.6px, #ee6666 8.67339px -30.2477px 0 0.53333px, #ee6666 7.6286px -30.59666px 0 0.46667px, #ee6666 6.57001px -30.90946px 0 0.4px, #ee6666 5.49886px -31.18558px 0 0.33333px, #ee6666 4.41643px -31.42451px 0 0.26667px, #ee6666 3.32401px -31.6258px 0 0.2px, #ee6666 2.22291px -31.78904px 0 0.13333px, #ee6666 1.11446px -31.91388px 0 0.06667px, #ee6666 0.0px -32px 0 0px, #ee6666 -1.11911px -32.04713px 0 -0.06667px, #ee6666 -2.24151px -32.05506px 0 -0.13333px, #ee6666 -3.36582px -32.02361px 0 -0.2px, #ee6666 -4.49065px -31.95265px 0 -0.26667px, #ee6666 -5.61462px -31.84212px 0 -0.33333px, #ee6666 -6.73634px -31.69198px 0 -0.4px, #ee6666 -7.8544px -31.50227px 0 -0.46667px, #ee6666 -8.9674px -31.27305px 0 -0.53333px, #ee6666 -10.07395px -31.00444px 0 -0.6px, #ee6666 -11.17266px -30.69663px 0 -0.66667px, #ee6666 -12.26212px -30.34982px 0 -0.73333px, #ee6666 -13.34096px -29.96429px 0 -0.8px, #ee6666 -14.4078px -29.54036px 0 -0.86667px, #ee6666 -15.46126px -29.07841px 0 -0.93333px, #ee6666 -16.5px -28.57884px 0 -1px, #ee6666 -17.52266px -28.04212px 0 -1.06667px, #ee6666 -18.52792px -27.46878px 0 -1.13333px, #ee6666 -19.51447px -26.85936px 0 -1.2px, #ee6666 -20.48101px -26.21449px 0 -1.26667px, #ee6666 -21.42625px -25.53481px 0 -1.33333px, #ee6666 -22.34896px -24.82104px 0 -1.4px, #ee6666 -23.2479px -24.07391px 0 -1.46667px, #ee6666 -24.12186px -23.29421px 0 -1.53333px, #ee6666 -24.96967px -22.48279px 0 -1.6px, #ee6666 -25.79016px -21.64052px 0 -1.66667px, #ee6666 -26.58223px -20.76831px 0 -1.73333px, #ee6666 -27.34477px -19.86714px 0 -1.8px, #ee6666 -28.07674px -18.938px 0 -1.86667px, #ee6666 -28.7771px -17.98193px 0 -1.93333px, #ee6666 -29.44486px -17.0px 0 -2px, #ee6666 -30.07908px -15.99333px 0 -2.06667px, #ee6666 -30.67884px -14.96307px 0 -2.13333px, #ee6666 -31.24325px -13.91039px 0 -2.2px, #ee6666 -31.7715px -12.83652px 0 -2.26667px, #ee6666 -32.26278px -11.74269px 0 -2.33333px, #ee6666 -32.71634px -10.63018px 0 -2.4px, #ee6666 -33.13149px -9.5003px 0 -2.46667px, #ee6666 -33.50755px -8.35437px 0 -2.53333px, #ee6666 -33.84391px -7.19374px 0 -2.6px, #ee6666 -34.14px -6.0198px 0 -2.66667px, #ee6666 -34.39531px -4.83395px 0 -2.73333px, #ee6666 -34.60936px -3.63759px 0 -2.8px, #ee6666 -34.78173px -2.43218px 0 -2.86667px, #ee6666 -34.91205px -1.21916px 0 -2.93333px, #ee6666 -35px 0.0px 0 -3px, #ee6666 -35.04531px 1.22381px 0 -3.06667px, #ee6666 -35.04775px 2.45078px 0 -3.13333px, #ee6666 -35.00717px 3.6794px 0 -3.2px, #ee6666 -34.92345px 4.90817px 0 -3.26667px, #ee6666 -34.79654px 6.13557px 0 -3.33333px, #ee6666 -34.62643px 7.36007px 0 -3.4px, #ee6666 -34.41316px 8.58016px 0 -3.46667px, #ee6666 -34.15683px 9.79431px 0 -3.53333px, #ee6666 -33.85761px 11.001px 0 -3.6px, #ee6666 -33.5157px 12.19872px 0 -3.66667px, #ee6666 -33.13137px 13.38594px 0 -3.73333px, #ee6666 -32.70493px 14.56117px 0 -3.8px, #ee6666 -32.23675px 15.72291px 0 -3.86667px, #ee6666 -31.72725px 16.86968px 0 -3.93333px, #ee6666 -31.17691px 18px 0 -4px, #ee6666 -30.58627px 19.11242px 0 -4.06667px, #ee6666 -29.95589px 20.2055px 0 -4.13333px, #ee6666 -29.28642px 21.27783px 0 -4.2px, #ee6666 -28.57852px 22.32799px 0 -4.26667px, #ee6666 -27.83295px 23.35462px 0 -4.33333px, #ee6666 -27.05047px 24.35635px 0 -4.4px, #ee6666 -26.23192px 25.33188px 0 -4.46667px, #ee6666 -25.37819px 26.27988px 0 -4.53333px, #ee6666 -24.49018px 27.1991px 0 -4.6px, #ee6666 -23.56888px 28.0883px 0 -4.66667px, #ee6666 -22.6153px 28.94626px 0 -4.73333px, #ee6666 -21.6305px 29.77183px 0 -4.8px, #ee6666 -20.61558px 30.56385px 0 -4.86667px, #ee6666 -19.57168px 31.32124px 0 -4.93333px, #ee6666 -18.5px 32.04294px 0 -5px, #ee6666 -17.40175px 32.72792px 0 -5.06667px, #ee6666 -16.27818px 33.37522px 0 -5.13333px, #ee6666 -15.1306px 33.98389px 0 -5.2px, #ee6666 -13.96034px 34.55305px 0 -5.26667px, #ee6666 -12.76875px 35.08186px 0 -5.33333px, #ee6666 -11.55724px 35.56951px 0 -5.4px, #ee6666 -10.32721px 36.01527px 0 -5.46667px, #ee6666 -9.08014px 36.41843px 0 -5.53333px, #ee6666 -7.81748px 36.77835px 0 -5.6px, #ee6666 -6.54075px 37.09443px 0 -5.66667px, #ee6666 -5.25147px 37.36612px 0 -5.73333px, #ee6666 -3.95118px 37.59293px 0 -5.8px, #ee6666 -2.64145px 37.77443px 0 -5.86667px, #ee6666 -1.32385px 37.91023px 0 -5.93333px;
  -moz-box-shadow: #ee6666 0px 26px 0 6px, #ee6666 0.90971px 26.05079px 0 5.93333px, #ee6666 1.82297px 26.06967px 0 5.86667px, #ee6666 2.73865px 26.05647px 0 5.8px, #ee6666 3.65561px 26.01104px 0 5.73333px, #ee6666 4.57274px 25.93327px 0 5.66667px, #ee6666 5.48887px 25.8231px 0 5.6px, #ee6666 6.40287px 25.68049px 0 5.53333px, #ee6666 7.31358px 25.50548px 0 5.46667px, #ee6666 8.21985px 25.2981px 0 5.4px, #ee6666 9.12054px 25.05847px 0 5.33333px, #ee6666 10.01448px 24.78672px 0 5.26667px, #ee6666 10.90054px 24.48302px 0 5.2px, #ee6666 11.77757px 24.1476px 0 5.13333px, #ee6666 12.64443px 23.78072px 0 5.06667px, #ee6666 13.5px 23.38269px 0 5px, #ee6666 14.34315px 22.95384px 0 4.93333px, #ee6666 15.17277px 22.49455px 0 4.86667px, #ee6666 15.98776px 22.00526px 0 4.8px, #ee6666 16.78704px 21.48643px 0 4.73333px, #ee6666 17.56953px 20.93855px 0 4.66667px, #ee6666 18.33418px 20.36217px 0 4.6px, #ee6666 19.07995px 19.75787px 0 4.53333px, #ee6666 19.80582px 19.12626px 0 4.46667px, #ee6666 20.5108px 18.468px 0 4.4px, #ee6666 21.1939px 17.78379px 0 4.33333px, #ee6666 21.85416px 17.07434px 0 4.26667px, #ee6666 22.49067px 16.34043px 0 4.2px, #ee6666 23.10251px 15.58284px 0 4.13333px, #ee6666 23.68881px 14.80241px 0 4.06667px, #ee6666 24.24871px 14.0px 0 4px, #ee6666 24.7814px 13.1765px 0 3.93333px, #ee6666 25.28607px 12.33284px 0 3.86667px, #ee6666 25.76198px 11.46997px 0 3.8px, #ee6666 26.2084px 10.58888px 0 3.73333px, #ee6666 26.62462px 9.69057px 0 3.66667px, #ee6666 27.01001px 8.77608px 0 3.6px, #ee6666 27.36392px 7.84648px 0 3.53333px, #ee6666 27.68577px 6.90284px 0 3.46667px, #ee6666 27.97502px 5.94627px 0 3.4px, #ee6666 28.23116px 4.97791px 0 3.33333px, #ee6666 28.4537px 3.99891px 0 3.26667px, #ee6666 28.64223px 3.01042px 0 3.2px, #ee6666 28.79635px 2.01364px 0 3.13333px, #ee6666 28.91571px 1.00976px 0 3.06667px, #ee6666 29px 0.0px 0 3px, #ee6666 29.04896px -1.01441px 0 2.93333px, #ee6666 29.06237px -2.03224px 0 2.86667px, #ee6666 29.04004px -3.05223px 0 2.8px, #ee6666 28.98185px -4.07313px 0 2.73333px, #ee6666 28.88769px -5.09368px 0 2.66667px, #ee6666 28.75754px -6.1126px 0 2.6px, #ee6666 28.59138px -7.12863px 0 2.53333px, #ee6666 28.38926px -8.14049px 0 2.46667px, #ee6666 28.15127px -9.1469px 0 2.4px, #ee6666 27.87755px -10.1466px 0 2.33333px, #ee6666 27.56827px -11.1383px 0 2.26667px, #ee6666 27.22365px -12.12075px 0 2.2px, #ee6666 26.84398px -13.09268px 0 2.13333px, #ee6666 26.42956px -14.05285px 0 2.06667px, #ee6666 25.98076px -15.0px 0 2px, #ee6666 25.49798px -15.93291px 0 1.93333px, #ee6666 24.98167px -16.85035px 0 1.86667px, #ee6666 24.43231px -17.75111px 0 1.8px, #ee6666 23.85046px -18.63402px 0 1.73333px, #ee6666 23.23668px -19.49789px 0 1.66667px, #ee6666 22.5916px -20.34157px 0 1.6px, #ee6666 21.91589px -21.16393px 0 1.53333px, #ee6666 21.21024px -21.96384px 0 1.46667px, #ee6666 20.4754px -22.74023px 0 1.4px, #ee6666 19.71215px -23.49203px 0 1.33333px, #ee6666 18.92133px -24.2182px 0 1.26667px, #ee6666 18.10379px -24.91772px 0 1.2px, #ee6666 17.26042px -25.58963px 0 1.13333px, #ee6666 16.39217px -26.23295px 0 1.06667px, #ee6666 15.5px -26.84679px 0 1px, #ee6666 14.58492px -27.43024px 0 0.93333px, #ee6666 13.64796px -27.98245px 0 0.86667px, #ee6666 12.69018px -28.50262px 0 0.8px, #ee6666 11.7127px -28.98995px 0 0.73333px, #ee6666 10.71663px -29.4437px 0 0.66667px, #ee6666 9.70313px -29.86317px 0 0.6px, #ee6666 8.67339px -30.2477px 0 0.53333px, #ee6666 7.6286px -30.59666px 0 0.46667px, #ee6666 6.57001px -30.90946px 0 0.4px, #ee6666 5.49886px -31.18558px 0 0.33333px, #ee6666 4.41643px -31.42451px 0 0.26667px, #ee6666 3.32401px -31.6258px 0 0.2px, #ee6666 2.22291px -31.78904px 0 0.13333px, #ee6666 1.11446px -31.91388px 0 0.06667px, #ee6666 0.0px -32px 0 0px, #ee6666 -1.11911px -32.04713px 0 -0.06667px, #ee6666 -2.24151px -32.05506px 0 -0.13333px, #ee6666 -3.36582px -32.02361px 0 -0.2px, #ee6666 -4.49065px -31.95265px 0 -0.26667px, #ee6666 -5.61462px -31.84212px 0 -0.33333px, #ee6666 -6.73634px -31.69198px 0 -0.4px, #ee6666 -7.8544px -31.50227px 0 -0.46667px, #ee6666 -8.9674px -31.27305px 0 -0.53333px, #ee6666 -10.07395px -31.00444px 0 -0.6px, #ee6666 -11.17266px -30.69663px 0 -0.66667px, #ee6666 -12.26212px -30.34982px 0 -0.73333px, #ee6666 -13.34096px -29.96429px 0 -0.8px, #ee6666 -14.4078px -29.54036px 0 -0.86667px, #ee6666 -15.46126px -29.07841px 0 -0.93333px, #ee6666 -16.5px -28.57884px 0 -1px, #ee6666 -17.52266px -28.04212px 0 -1.06667px, #ee6666 -18.52792px -27.46878px 0 -1.13333px, #ee6666 -19.51447px -26.85936px 0 -1.2px, #ee6666 -20.48101px -26.21449px 0 -1.26667px, #ee6666 -21.42625px -25.53481px 0 -1.33333px, #ee6666 -22.34896px -24.82104px 0 -1.4px, #ee6666 -23.2479px -24.07391px 0 -1.46667px, #ee6666 -24.12186px -23.29421px 0 -1.53333px, #ee6666 -24.96967px -22.48279px 0 -1.6px, #ee6666 -25.79016px -21.64052px 0 -1.66667px, #ee6666 -26.58223px -20.76831px 0 -1.73333px, #ee6666 -27.34477px -19.86714px 0 -1.8px, #ee6666 -28.07674px -18.938px 0 -1.86667px, #ee6666 -28.7771px -17.98193px 0 -1.93333px, #ee6666 -29.44486px -17.0px 0 -2px, #ee6666 -30.07908px -15.99333px 0 -2.06667px, #ee6666 -30.67884px -14.96307px 0 -2.13333px, #ee6666 -31.24325px -13.91039px 0 -2.2px, #ee6666 -31.7715px -12.83652px 0 -2.26667px, #ee6666 -32.26278px -11.74269px 0 -2.33333px, #ee6666 -32.71634px -10.63018px 0 -2.4px, #ee6666 -33.13149px -9.5003px 0 -2.46667px, #ee6666 -33.50755px -8.35437px 0 -2.53333px, #ee6666 -33.84391px -7.19374px 0 -2.6px, #ee6666 -34.14px -6.0198px 0 -2.66667px, #ee6666 -34.39531px -4.83395px 0 -2.73333px, #ee6666 -34.60936px -3.63759px 0 -2.8px, #ee6666 -34.78173px -2.43218px 0 -2.86667px, #ee6666 -34.91205px -1.21916px 0 -2.93333px, #ee6666 -35px 0.0px 0 -3px, #ee6666 -35.04531px 1.22381px 0 -3.06667px, #ee6666 -35.04775px 2.45078px 0 -3.13333px, #ee6666 -35.00717px 3.6794px 0 -3.2px, #ee6666 -34.92345px 4.90817px 0 -3.26667px, #ee6666 -34.79654px 6.13557px 0 -3.33333px, #ee6666 -34.62643px 7.36007px 0 -3.4px, #ee6666 -34.41316px 8.58016px 0 -3.46667px, #ee6666 -34.15683px 9.79431px 0 -3.53333px, #ee6666 -33.85761px 11.001px 0 -3.6px, #ee6666 -33.5157px 12.19872px 0 -3.66667px, #ee6666 -33.13137px 13.38594px 0 -3.73333px, #ee6666 -32.70493px 14.56117px 0 -3.8px, #ee6666 -32.23675px 15.72291px 0 -3.86667px, #ee6666 -31.72725px 16.86968px 0 -3.93333px, #ee6666 -31.17691px 18px 0 -4px, #ee6666 -30.58627px 19.11242px 0 -4.06667px, #ee6666 -29.95589px 20.2055px 0 -4.13333px, #ee6666 -29.28642px 21.27783px 0 -4.2px, #ee6666 -28.57852px 22.32799px 0 -4.26667px, #ee6666 -27.83295px 23.35462px 0 -4.33333px, #ee6666 -27.05047px 24.35635px 0 -4.4px, #ee6666 -26.23192px 25.33188px 0 -4.46667px, #ee6666 -25.37819px 26.27988px 0 -4.53333px, #ee6666 -24.49018px 27.1991px 0 -4.6px, #ee6666 -23.56888px 28.0883px 0 -4.66667px, #ee6666 -22.6153px 28.94626px 0 -4.73333px, #ee6666 -21.6305px 29.77183px 0 -4.8px, #ee6666 -20.61558px 30.56385px 0 -4.86667px, #ee6666 -19.57168px 31.32124px 0 -4.93333px, #ee6666 -18.5px 32.04294px 0 -5px, #ee6666 -17.40175px 32.72792px 0 -5.06667px, #ee6666 -16.27818px 33.37522px 0 -5.13333px, #ee6666 -15.1306px 33.98389px 0 -5.2px, #ee6666 -13.96034px 34.55305px 0 -5.26667px, #ee6666 -12.76875px 35.08186px 0 -5.33333px, #ee6666 -11.55724px 35.56951px 0 -5.4px, #ee6666 -10.32721px 36.01527px 0 -5.46667px, #ee6666 -9.08014px 36.41843px 0 -5.53333px, #ee6666 -7.81748px 36.77835px 0 -5.6px, #ee6666 -6.54075px 37.09443px 0 -5.66667px, #ee6666 -5.25147px 37.36612px 0 -5.73333px, #ee6666 -3.95118px 37.59293px 0 -5.8px, #ee6666 -2.64145px 37.77443px 0 -5.86667px, #ee6666 -1.32385px 37.91023px 0 -5.93333px;
  box-shadow: #ee6666 0px 26px 0 6px, #ee6666 0.90971px 26.05079px 0 5.93333px, #ee6666 1.82297px 26.06967px 0 5.86667px, #ee6666 2.73865px 26.05647px 0 5.8px, #ee6666 3.65561px 26.01104px 0 5.73333px, #ee6666 4.57274px 25.93327px 0 5.66667px, #ee6666 5.48887px 25.8231px 0 5.6px, #ee6666 6.40287px 25.68049px 0 5.53333px, #ee6666 7.31358px 25.50548px 0 5.46667px, #ee6666 8.21985px 25.2981px 0 5.4px, #ee6666 9.12054px 25.05847px 0 5.33333px, #ee6666 10.01448px 24.78672px 0 5.26667px, #ee6666 10.90054px 24.48302px 0 5.2px, #ee6666 11.77757px 24.1476px 0 5.13333px, #ee6666 12.64443px 23.78072px 0 5.06667px, #ee6666 13.5px 23.38269px 0 5px, #ee6666 14.34315px 22.95384px 0 4.93333px, #ee6666 15.17277px 22.49455px 0 4.86667px, #ee6666 15.98776px 22.00526px 0 4.8px, #ee6666 16.78704px 21.48643px 0 4.73333px, #ee6666 17.56953px 20.93855px 0 4.66667px, #ee6666 18.33418px 20.36217px 0 4.6px, #ee6666 19.07995px 19.75787px 0 4.53333px, #ee6666 19.80582px 19.12626px 0 4.46667px, #ee6666 20.5108px 18.468px 0 4.4px, #ee6666 21.1939px 17.78379px 0 4.33333px, #ee6666 21.85416px 17.07434px 0 4.26667px, #ee6666 22.49067px 16.34043px 0 4.2px, #ee6666 23.10251px 15.58284px 0 4.13333px, #ee6666 23.68881px 14.80241px 0 4.06667px, #ee6666 24.24871px 14.0px 0 4px, #ee6666 24.7814px 13.1765px 0 3.93333px, #ee6666 25.28607px 12.33284px 0 3.86667px, #ee6666 25.76198px 11.46997px 0 3.8px, #ee6666 26.2084px 10.58888px 0 3.73333px, #ee6666 26.62462px 9.69057px 0 3.66667px, #ee6666 27.01001px 8.77608px 0 3.6px, #ee6666 27.36392px 7.84648px 0 3.53333px, #ee6666 27.68577px 6.90284px 0 3.46667px, #ee6666 27.97502px 5.94627px 0 3.4px, #ee6666 28.23116px 4.97791px 0 3.33333px, #ee6666 28.4537px 3.99891px 0 3.26667px, #ee6666 28.64223px 3.01042px 0 3.2px, #ee6666 28.79635px 2.01364px 0 3.13333px, #ee6666 28.91571px 1.00976px 0 3.06667px, #ee6666 29px 0.0px 0 3px, #ee6666 29.04896px -1.01441px 0 2.93333px, #ee6666 29.06237px -2.03224px 0 2.86667px, #ee6666 29.04004px -3.05223px 0 2.8px, #ee6666 28.98185px -4.07313px 0 2.73333px, #ee6666 28.88769px -5.09368px 0 2.66667px, #ee6666 28.75754px -6.1126px 0 2.6px, #ee6666 28.59138px -7.12863px 0 2.53333px, #ee6666 28.38926px -8.14049px 0 2.46667px, #ee6666 28.15127px -9.1469px 0 2.4px, #ee6666 27.87755px -10.1466px 0 2.33333px, #ee6666 27.56827px -11.1383px 0 2.26667px, #ee6666 27.22365px -12.12075px 0 2.2px, #ee6666 26.84398px -13.09268px 0 2.13333px, #ee6666 26.42956px -14.05285px 0 2.06667px, #ee6666 25.98076px -15.0px 0 2px, #ee6666 25.49798px -15.93291px 0 1.93333px, #ee6666 24.98167px -16.85035px 0 1.86667px, #ee6666 24.43231px -17.75111px 0 1.8px, #ee6666 23.85046px -18.63402px 0 1.73333px, #ee6666 23.23668px -19.49789px 0 1.66667px, #ee6666 22.5916px -20.34157px 0 1.6px, #ee6666 21.91589px -21.16393px 0 1.53333px, #ee6666 21.21024px -21.96384px 0 1.46667px, #ee6666 20.4754px -22.74023px 0 1.4px, #ee6666 19.71215px -23.49203px 0 1.33333px, #ee6666 18.92133px -24.2182px 0 1.26667px, #ee6666 18.10379px -24.91772px 0 1.2px, #ee6666 17.26042px -25.58963px 0 1.13333px, #ee6666 16.39217px -26.23295px 0 1.06667px, #ee6666 15.5px -26.84679px 0 1px, #ee6666 14.58492px -27.43024px 0 0.93333px, #ee6666 13.64796px -27.98245px 0 0.86667px, #ee6666 12.69018px -28.50262px 0 0.8px, #ee6666 11.7127px -28.98995px 0 0.73333px, #ee6666 10.71663px -29.4437px 0 0.66667px, #ee6666 9.70313px -29.86317px 0 0.6px, #ee6666 8.67339px -30.2477px 0 0.53333px, #ee6666 7.6286px -30.59666px 0 0.46667px, #ee6666 6.57001px -30.90946px 0 0.4px, #ee6666 5.49886px -31.18558px 0 0.33333px, #ee6666 4.41643px -31.42451px 0 0.26667px, #ee6666 3.32401px -31.6258px 0 0.2px, #ee6666 2.22291px -31.78904px 0 0.13333px, #ee6666 1.11446px -31.91388px 0 0.06667px, #ee6666 0.0px -32px 0 0px, #ee6666 -1.11911px -32.04713px 0 -0.06667px, #ee6666 -2.24151px -32.05506px 0 -0.13333px, #ee6666 -3.36582px -32.02361px 0 -0.2px, #ee6666 -4.49065px -31.95265px 0 -0.26667px, #ee6666 -5.61462px -31.84212px 0 -0.33333px, #ee6666 -6.73634px -31.69198px 0 -0.4px, #ee6666 -7.8544px -31.50227px 0 -0.46667px, #ee6666 -8.9674px -31.27305px 0 -0.53333px, #ee6666 -10.07395px -31.00444px 0 -0.6px, #ee6666 -11.17266px -30.69663px 0 -0.66667px, #ee6666 -12.26212px -30.34982px 0 -0.73333px, #ee6666 -13.34096px -29.96429px 0 -0.8px, #ee6666 -14.4078px -29.54036px 0 -0.86667px, #ee6666 -15.46126px -29.07841px 0 -0.93333px, #ee6666 -16.5px -28.57884px 0 -1px, #ee6666 -17.52266px -28.04212px 0 -1.06667px, #ee6666 -18.52792px -27.46878px 0 -1.13333px, #ee6666 -19.51447px -26.85936px 0 -1.2px, #ee6666 -20.48101px -26.21449px 0 -1.26667px, #ee6666 -21.42625px -25.53481px 0 -1.33333px, #ee6666 -22.34896px -24.82104px 0 -1.4px, #ee6666 -23.2479px -24.07391px 0 -1.46667px, #ee6666 -24.12186px -23.29421px 0 -1.53333px, #ee6666 -24.96967px -22.48279px 0 -1.6px, #ee6666 -25.79016px -21.64052px 0 -1.66667px, #ee6666 -26.58223px -20.76831px 0 -1.73333px, #ee6666 -27.34477px -19.86714px 0 -1.8px, #ee6666 -28.07674px -18.938px 0 -1.86667px, #ee6666 -28.7771px -17.98193px 0 -1.93333px, #ee6666 -29.44486px -17.0px 0 -2px, #ee6666 -30.07908px -15.99333px 0 -2.06667px, #ee6666 -30.67884px -14.96307px 0 -2.13333px, #ee6666 -31.24325px -13.91039px 0 -2.2px, #ee6666 -31.7715px -12.83652px 0 -2.26667px, #ee6666 -32.26278px -11.74269px 0 -2.33333px, #ee6666 -32.71634px -10.63018px 0 -2.4px, #ee6666 -33.13149px -9.5003px 0 -2.46667px, #ee6666 -33.50755px -8.35437px 0 -2.53333px, #ee6666 -33.84391px -7.19374px 0 -2.6px, #ee6666 -34.14px -6.0198px 0 -2.66667px, #ee6666 -34.39531px -4.83395px 0 -2.73333px, #ee6666 -34.60936px -3.63759px 0 -2.8px, #ee6666 -34.78173px -2.43218px 0 -2.86667px, #ee6666 -34.91205px -1.21916px 0 -2.93333px, #ee6666 -35px 0.0px 0 -3px, #ee6666 -35.04531px 1.22381px 0 -3.06667px, #ee6666 -35.04775px 2.45078px 0 -3.13333px, #ee6666 -35.00717px 3.6794px 0 -3.2px, #ee6666 -34.92345px 4.90817px 0 -3.26667px, #ee6666 -34.79654px 6.13557px 0 -3.33333px, #ee6666 -34.62643px 7.36007px 0 -3.4px, #ee6666 -34.41316px 8.58016px 0 -3.46667px, #ee6666 -34.15683px 9.79431px 0 -3.53333px, #ee6666 -33.85761px 11.001px 0 -3.6px, #ee6666 -33.5157px 12.19872px 0 -3.66667px, #ee6666 -33.13137px 13.38594px 0 -3.73333px, #ee6666 -32.70493px 14.56117px 0 -3.8px, #ee6666 -32.23675px 15.72291px 0 -3.86667px, #ee6666 -31.72725px 16.86968px 0 -3.93333px, #ee6666 -31.17691px 18px 0 -4px, #ee6666 -30.58627px 19.11242px 0 -4.06667px, #ee6666 -29.95589px 20.2055px 0 -4.13333px, #ee6666 -29.28642px 21.27783px 0 -4.2px, #ee6666 -28.57852px 22.32799px 0 -4.26667px, #ee6666 -27.83295px 23.35462px 0 -4.33333px, #ee6666 -27.05047px 24.35635px 0 -4.4px, #ee6666 -26.23192px 25.33188px 0 -4.46667px, #ee6666 -25.37819px 26.27988px 0 -4.53333px, #ee6666 -24.49018px 27.1991px 0 -4.6px, #ee6666 -23.56888px 28.0883px 0 -4.66667px, #ee6666 -22.6153px 28.94626px 0 -4.73333px, #ee6666 -21.6305px 29.77183px 0 -4.8px, #ee6666 -20.61558px 30.56385px 0 -4.86667px, #ee6666 -19.57168px 31.32124px 0 -4.93333px, #ee6666 -18.5px 32.04294px 0 -5px, #ee6666 -17.40175px 32.72792px 0 -5.06667px, #ee6666 -16.27818px 33.37522px 0 -5.13333px, #ee6666 -15.1306px 33.98389px 0 -5.2px, #ee6666 -13.96034px 34.55305px 0 -5.26667px, #ee6666 -12.76875px 35.08186px 0 -5.33333px, #ee6666 -11.55724px 35.56951px 0 -5.4px, #ee6666 -10.32721px 36.01527px 0 -5.46667px, #ee6666 -9.08014px 36.41843px 0 -5.53333px, #ee6666 -7.81748px 36.77835px 0 -5.6px, #ee6666 -6.54075px 37.09443px 0 -5.66667px, #ee6666 -5.25147px 37.36612px 0 -5.73333px, #ee6666 -3.95118px 37.59293px 0 -5.8px, #ee6666 -2.64145px 37.77443px 0 -5.86667px, #ee6666 -1.32385px 37.91023px 0 -5.93333px;
  -webkit-animation: whirly 1.25s infinite linear;
  -moz-animation: whirly 1.25s infinite linear;
  -ms-animation: whirly 1.25s infinite linear;
  -o-animation: whirly 1.25s infinite linear;
  animation: whirly 1.25s infinite linear;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

@-webkit-keyframes flower {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
    -moz-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
    box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
  }

  50% {
    -webkit-transform: rotate(1080deg);
    -moz-transform: rotate(1080deg);
    -ms-transform: rotate(1080deg);
    -o-transform: rotate(1080deg);
    transform: rotate(1080deg);
    -webkit-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
    -moz-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
    box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
  }
}

@-moz-keyframes flower {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
    -moz-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
    box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
  }

  50% {
    -webkit-transform: rotate(1080deg);
    -moz-transform: rotate(1080deg);
    -ms-transform: rotate(1080deg);
    -o-transform: rotate(1080deg);
    transform: rotate(1080deg);
    -webkit-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
    -moz-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
    box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
  }
}

@-o-keyframes flower {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
    -moz-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
    box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
  }

  50% {
    -webkit-transform: rotate(1080deg);
    -moz-transform: rotate(1080deg);
    -ms-transform: rotate(1080deg);
    -o-transform: rotate(1080deg);
    transform: rotate(1080deg);
    -webkit-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
    -moz-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
    box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
  }
}

@keyframes flower {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
    -moz-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
    box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
  }

  50% {
    -webkit-transform: rotate(1080deg);
    -moz-transform: rotate(1080deg);
    -ms-transform: rotate(1080deg);
    -o-transform: rotate(1080deg);
    transform: rotate(1080deg);
    -webkit-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
    -moz-box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
    box-shadow: white 0 0 15px 0, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px;
  }
}

/* Styles for old versions of IE */
.flower {
  font-family: "Microsoft YaHei";
  font-weight: 100;
}

/* :not(:required) hides this rule from IE9 and below */
.flower:not(:required) {
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  display: inline-block;
  width: 16px;
  height: 16px;
  background: #ee9966;
  
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;

  -webkit-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
  -moz-box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
  box-shadow: white 0 0 15px 0, #ffdd88 -12px -12px 0 4px, #ffdd88 12px -12px 0 4px, #ffdd88 12px 12px 0 4px, #ffdd88 -12px 12px 0 4px;
  -webkit-animation: flower 5s infinite ease-in-out;
  -moz-animation: flower 5s infinite ease-in-out;
  -ms-animation: flower 5s infinite ease-in-out;
  -o-animation: flower 5s infinite ease-in-out;
  animation: flower 5s infinite ease-in-out;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

@-webkit-keyframes dots {
  0% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }

  8.33% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }

  16.67% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }

  25% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }

  33.33% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
  }

  41.67% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
  }

  50% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
  }

  58.33% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
  }

  66.67% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
  }

  75% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
  }

  83.33% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
  }

  91.67% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }

  100% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }
}

@-moz-keyframes dots {
  0% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }

  8.33% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }

  16.67% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }

  25% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }

  33.33% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
  }

  41.67% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
  }

  50% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
  }

  58.33% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
  }

  66.67% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
  }

  75% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
  }

  83.33% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
  }

  91.67% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }

  100% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }
}

@-o-keyframes dots {
  0% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }

  8.33% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }

  16.67% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }

  25% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }

  33.33% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
  }

  41.67% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
  }

  50% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
  }

  58.33% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
  }

  66.67% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
  }

  75% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
  }

  83.33% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
  }

  91.67% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }

  100% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }
}

@keyframes dots {
  0% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }

  8.33% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }

  16.67% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px 14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }

  25% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }

  33.33% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee -14px -14px 0 7px;
  }

  41.67% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
  }

  50% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
  }

  58.33% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 -14px 14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
  }

  66.67% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 -14px -14px 0 7px, #66dd77 -14px -14px 0 7px, #44aaee 14px -14px 0 7px;
  }

  75% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px -14px 0 7px, #44aaee 14px -14px 0 7px;
  }

  83.33% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee 14px 14px 0 7px;
  }

  91.67% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px 14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }

  100% {
    -webkit-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    -moz-box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
    box-shadow: white 0 0 15px 0, #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  }
}

/* Styles for old versions of IE */
.dots {
  font-family: "Microsoft YaHei";
  font-weight: 100;
}

/* :not(:required) hides this rule from IE9 and below */
.dots:not(:required) {
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  display: inline-block;
  width: 7px;
  height: 7px;
  background: transparent;
  
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;

  -webkit-box-shadow: #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  -moz-box-shadow: #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  box-shadow: #ff8866 -14px -14px 0 7px, #ffcc66 14px -14px 0 7px, #66dd77 14px 14px 0 7px, #44aaee -14px 14px 0 7px;
  -webkit-animation: dots 5s infinite ease-in-out;
  -moz-animation: dots 5s infinite ease-in-out;
  -ms-animation: dots 5s infinite ease-in-out;
  -o-animation: dots 5s infinite ease-in-out;
  animation: dots 5s infinite ease-in-out;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

@-webkit-keyframes circles {
  0% {
    -webkit-transform: rotate(-720deg);
    -moz-transform: rotate(-720deg);
    -ms-transform: rotate(-720deg);
    -o-transform: rotate(-720deg);
    transform: rotate(-720deg);
  }

  50% {
    -webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    -o-transform: rotate(720deg);
    transform: rotate(720deg);
  }
}

@-moz-keyframes circles {
  0% {
    -webkit-transform: rotate(-720deg);
    -moz-transform: rotate(-720deg);
    -ms-transform: rotate(-720deg);
    -o-transform: rotate(-720deg);
    transform: rotate(-720deg);
  }

  50% {
    -webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    -o-transform: rotate(720deg);
    transform: rotate(720deg);
  }
}

@-o-keyframes circles {
  0% {
    -webkit-transform: rotate(-720deg);
    -moz-transform: rotate(-720deg);
    -ms-transform: rotate(-720deg);
    -o-transform: rotate(-720deg);
    transform: rotate(-720deg);
  }

  50% {
    -webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    -o-transform: rotate(720deg);
    transform: rotate(720deg);
  }
}

@keyframes circles {
  0% {
    -webkit-transform: rotate(-720deg);
    -moz-transform: rotate(-720deg);
    -ms-transform: rotate(-720deg);
    -o-transform: rotate(-720deg);
    transform: rotate(-720deg);
  }

  50% {
    -webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    -o-transform: rotate(720deg);
    transform: rotate(720deg);
  }
}

/* Styles for old versions of IE */
.circles {
  font-family: "Microsoft YaHei";
  font-weight: 100;
}

/* :not(:required) hides this rule from IE9 and below */
.circles:not(:required) {
  position: relative;
  text-indent: -9999px;
  display: inline-block;
  width: 25px;
  height: 25px;
  background: rgba(255, 204, 51, 0.9);
  
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;

  -webkit-animation: circles 3s infinite ease-in-out;
  -moz-animation: circles 3s infinite ease-in-out;
  -ms-animation: circles 3s infinite ease-in-out;
  -o-animation: circles 3s infinite ease-in-out;
  animation: circles 3s infinite ease-in-out;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}
.circles:not(:required)::before {
  background: rgba(255, 102, 0, 0.6);
  
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;

  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  top: 18.75px;
  left: -10.82532px;
}
.circles:not(:required)::after {
  background: rgba(255, 51, 0, 0.4);
  
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;

  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  top: 18.75px;
  left: 10.82532px;
}

@-webkit-keyframes plus-top {
  2.5% {
    background: #ff8866;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  13.75% {
    background: #ff430d;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  13.76% {
    background: #ffae0d;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  25% {
    background: #ffcc66;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }

  27.5% {
    background: #ffcc66;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  41.25% {
    background: #ffae0d;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  41.26% {
    background: #2cc642;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    background: #66dd77;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }

  52.5% {
    background: #66dd77;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  63.75% {
    background: #2cc642;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  63.76% {
    background: #1386d2;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  75% {
    background: #44aaee;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }

  77.5% {
    background: #44aaee;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  91.25% {
    background: #1386d2;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  91.26% {
    background: #ff430d;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    background: #ff8866;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}

@-moz-keyframes plus-top {
  2.5% {
    background: #ff8866;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  13.75% {
    background: #ff430d;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  13.76% {
    background: #ffae0d;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  25% {
    background: #ffcc66;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }

  27.5% {
    background: #ffcc66;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  41.25% {
    background: #ffae0d;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  41.26% {
    background: #2cc642;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    background: #66dd77;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }

  52.5% {
    background: #66dd77;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  63.75% {
    background: #2cc642;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  63.76% {
    background: #1386d2;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  75% {
    background: #44aaee;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }

  77.5% {
    background: #44aaee;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  91.25% {
    background: #1386d2;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  91.26% {
    background: #ff430d;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    background: #ff8866;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}

@-o-keyframes plus-top {
  2.5% {
    background: #ff8866;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  13.75% {
    background: #ff430d;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  13.76% {
    background: #ffae0d;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  25% {
    background: #ffcc66;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }

  27.5% {
    background: #ffcc66;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  41.25% {
    background: #ffae0d;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  41.26% {
    background: #2cc642;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    background: #66dd77;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }

  52.5% {
    background: #66dd77;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  63.75% {
    background: #2cc642;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  63.76% {
    background: #1386d2;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  75% {
    background: #44aaee;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }

  77.5% {
    background: #44aaee;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  91.25% {
    background: #1386d2;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  91.26% {
    background: #ff430d;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    background: #ff8866;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}

@keyframes plus-top {
  2.5% {
    background: #ff8866;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  13.75% {
    background: #ff430d;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  13.76% {
    background: #ffae0d;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  25% {
    background: #ffcc66;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }

  27.5% {
    background: #ffcc66;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  41.25% {
    background: #ffae0d;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  41.26% {
    background: #2cc642;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    background: #66dd77;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }

  52.5% {
    background: #66dd77;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  63.75% {
    background: #2cc642;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  63.76% {
    background: #1386d2;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  75% {
    background: #44aaee;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }

  77.5% {
    background: #44aaee;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  91.25% {
    background: #1386d2;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  91.26% {
    background: #ff430d;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  100% {
    background: #ff8866;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}

@-webkit-keyframes plus-bottom {
  0% {
    background: #ffcc66;
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  50% {
    background: #ffcc66;
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  75% {
    background: #44aaee;
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  100% {
    background: #44aaee;
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}

@-moz-keyframes plus-bottom {
  0% {
    background: #ffcc66;
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  50% {
    background: #ffcc66;
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  75% {
    background: #44aaee;
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  100% {
    background: #44aaee;
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}

@-o-keyframes plus-bottom {
  0% {
    background: #ffcc66;
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  50% {
    background: #ffcc66;
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  75% {
    background: #44aaee;
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  100% {
    background: #44aaee;
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}

@keyframes plus-bottom {
  0% {
    background: #ffcc66;
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  50% {
    background: #ffcc66;
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  75% {
    background: #44aaee;
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  100% {
    background: #44aaee;
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}

@-webkit-keyframes plus-background {
  0% {
    background: #ff8866;
    -webkit-transform: rotateZ(180deg);
    -moz-transform: rotateZ(180deg);
    -ms-transform: rotateZ(180deg);
    -o-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
  }

  25% {
    background: #ff8866;
    -webkit-transform: rotateZ(180deg);
    -moz-transform: rotateZ(180deg);
    -ms-transform: rotateZ(180deg);
    -o-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  27.5% {
    background: #66dd77;
    -webkit-transform: rotateZ(90deg);
    -moz-transform: rotateZ(90deg);
    -ms-transform: rotateZ(90deg);
    -o-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
  }

  50% {
    background: #66dd77;
    -webkit-transform: rotateZ(90deg);
    -moz-transform: rotateZ(90deg);
    -ms-transform: rotateZ(90deg);
    -o-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  52.5% {
    background: #66dd77;
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }

  75% {
    background: #66dd77;
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  77.5% {
    background: #ff8866;
    -webkit-transform: rotateZ(270deg);
    -moz-transform: rotateZ(270deg);
    -ms-transform: rotateZ(270deg);
    -o-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
  }

  100% {
    background: #ff8866;
    -webkit-transform: rotateZ(270deg);
    -moz-transform: rotateZ(270deg);
    -ms-transform: rotateZ(270deg);
    -o-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}

@-moz-keyframes plus-background {
  0% {
    background: #ff8866;
    -webkit-transform: rotateZ(180deg);
    -moz-transform: rotateZ(180deg);
    -ms-transform: rotateZ(180deg);
    -o-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
  }

  25% {
    background: #ff8866;
    -webkit-transform: rotateZ(180deg);
    -moz-transform: rotateZ(180deg);
    -ms-transform: rotateZ(180deg);
    -o-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  27.5% {
    background: #66dd77;
    -webkit-transform: rotateZ(90deg);
    -moz-transform: rotateZ(90deg);
    -ms-transform: rotateZ(90deg);
    -o-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
  }

  50% {
    background: #66dd77;
    -webkit-transform: rotateZ(90deg);
    -moz-transform: rotateZ(90deg);
    -ms-transform: rotateZ(90deg);
    -o-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  52.5% {
    background: #66dd77;
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }

  75% {
    background: #66dd77;
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  77.5% {
    background: #ff8866;
    -webkit-transform: rotateZ(270deg);
    -moz-transform: rotateZ(270deg);
    -ms-transform: rotateZ(270deg);
    -o-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
  }

  100% {
    background: #ff8866;
    -webkit-transform: rotateZ(270deg);
    -moz-transform: rotateZ(270deg);
    -ms-transform: rotateZ(270deg);
    -o-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}

@-o-keyframes plus-background {
  0% {
    background: #ff8866;
    -webkit-transform: rotateZ(180deg);
    -moz-transform: rotateZ(180deg);
    -ms-transform: rotateZ(180deg);
    -o-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
  }

  25% {
    background: #ff8866;
    -webkit-transform: rotateZ(180deg);
    -moz-transform: rotateZ(180deg);
    -ms-transform: rotateZ(180deg);
    -o-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  27.5% {
    background: #66dd77;
    -webkit-transform: rotateZ(90deg);
    -moz-transform: rotateZ(90deg);
    -ms-transform: rotateZ(90deg);
    -o-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
  }

  50% {
    background: #66dd77;
    -webkit-transform: rotateZ(90deg);
    -moz-transform: rotateZ(90deg);
    -ms-transform: rotateZ(90deg);
    -o-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  52.5% {
    background: #66dd77;
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }

  75% {
    background: #66dd77;
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  77.5% {
    background: #ff8866;
    -webkit-transform: rotateZ(270deg);
    -moz-transform: rotateZ(270deg);
    -ms-transform: rotateZ(270deg);
    -o-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
  }

  100% {
    background: #ff8866;
    -webkit-transform: rotateZ(270deg);
    -moz-transform: rotateZ(270deg);
    -ms-transform: rotateZ(270deg);
    -o-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}

@keyframes plus-background {
  0% {
    background: #ff8866;
    -webkit-transform: rotateZ(180deg);
    -moz-transform: rotateZ(180deg);
    -ms-transform: rotateZ(180deg);
    -o-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
  }

  25% {
    background: #ff8866;
    -webkit-transform: rotateZ(180deg);
    -moz-transform: rotateZ(180deg);
    -ms-transform: rotateZ(180deg);
    -o-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  27.5% {
    background: #66dd77;
    -webkit-transform: rotateZ(90deg);
    -moz-transform: rotateZ(90deg);
    -ms-transform: rotateZ(90deg);
    -o-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
  }

  50% {
    background: #66dd77;
    -webkit-transform: rotateZ(90deg);
    -moz-transform: rotateZ(90deg);
    -ms-transform: rotateZ(90deg);
    -o-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  52.5% {
    background: #66dd77;
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }

  75% {
    background: #66dd77;
    -webkit-transform: rotateZ(0deg);
    -moz-transform: rotateZ(0deg);
    -ms-transform: rotateZ(0deg);
    -o-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }

  77.5% {
    background: #ff8866;
    -webkit-transform: rotateZ(270deg);
    -moz-transform: rotateZ(270deg);
    -ms-transform: rotateZ(270deg);
    -o-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
  }

  100% {
    background: #ff8866;
    -webkit-transform: rotateZ(270deg);
    -moz-transform: rotateZ(270deg);
    -ms-transform: rotateZ(270deg);
    -o-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
    -webkit-animation-timing-function: step-start;
    -moz-animation-timing-function: step-start;
    -ms-animation-timing-function: step-start;
    -o-animation-timing-function: step-start;
    animation-timing-function: step-start;
  }
}

/* Styles for old versions of IE */
.plus {
  font-family: "Microsoft YaHei";
  font-weight: 100;
}

/* :not(:required) hides this rule from IE9 and below */
.plus:not(:required) {
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  display: inline-block;
  width: 48px;
  height: 48px;
  background: #ff8866;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  -ms-border-radius: 24px;
  -o-border-radius: 24px;
  border-radius: 24px;
  -webkit-transform: rotateZ(90deg);
  -moz-transform: rotateZ(90deg);
  -ms-transform: rotateZ(90deg);
  -o-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-animation: plus-background 3s infinite ease-in-out;
  -moz-animation: plus-background 3s infinite ease-in-out;
  -ms-animation: plus-background 3s infinite ease-in-out;
  -o-animation: plus-background 3s infinite ease-in-out;
  animation: plus-background 3s infinite ease-in-out;
}
.plus:not(:required)::after {
  background: #ff8866;
  -webkit-border-radius: 24px 0 0 24px;
  -moz-border-radius: 24px 0 0 24px;
  -ms-border-radius: 24px 0 0 24px;
  -o-border-radius: 24px 0 0 24px;
  border-radius: 24px 0 0 24px;
  content: '';
  position: absolute;
  right: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-animation: plus-top 3s infinite linear;
  -moz-animation: plus-top 3s infinite linear;
  -ms-animation: plus-top 3s infinite linear;
  -o-animation: plus-top 3s infinite linear;
  animation: plus-top 3s infinite linear;
}
.plus:not(:required)::before {
  background: #ffcc66;
  -webkit-border-radius: 24px 0 0 24px;
  -moz-border-radius: 24px 0 0 24px;
  -ms-border-radius: 24px 0 0 24px;
  -o-border-radius: 24px 0 0 24px;
  border-radius: 24px 0 0 24px;
  content: '';
  position: absolute;
  right: 50%;
  top: 0;
  width: 50%;
  height: 100%;
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-animation: plus-bottom 3s infinite linear;
  -moz-animation: plus-bottom 3s infinite linear;
  -ms-animation: plus-bottom 3s infinite linear;
  -o-animation: plus-bottom 3s infinite linear;
  animation: plus-bottom 3s infinite linear;
}

@-webkit-keyframes ball {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -o-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  45% {
    -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
    -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
    -ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
    -o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
    transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  50% {
    -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
    -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
    -ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
    -o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
    transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  55% {
    -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
    -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
    -ms-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
    -o-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
    transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

@-moz-keyframes ball {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -o-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  45% {
    -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
    -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
    -ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
    -o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
    transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  50% {
    -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
    -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
    -ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
    -o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
    transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  55% {
    -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
    -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
    -ms-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
    -o-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
    transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

@-o-keyframes ball {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -o-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  45% {
    -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
    -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
    -ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
    -o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
    transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  50% {
    -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
    -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
    -ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
    -o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
    transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  55% {
    -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
    -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
    -ms-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
    -o-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
    transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

@keyframes ball {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -o-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  45% {
    -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
    -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
    -ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
    -o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
    transform: translate3d(0, 150px, -10px) scale3d(1, 0.95, 1);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  50% {
    -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
    -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
    -ms-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
    -o-transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
    transform: translate3d(0, 150px, -10px) scale3d(1, 0.5, 1);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  55% {
    -webkit-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
    -moz-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
    -ms-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
    -o-transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
    transform: translate3d(0, 150px, -10px) scale3d(1, 1.25, 1);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
}

@-webkit-keyframes ball-highlight {
  0% {
    -webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  45% {
    -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  50% {
    -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  55% {
    -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@-moz-keyframes ball-highlight {
  0% {
    -webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  45% {
    -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  50% {
    -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  55% {
    -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@-o-keyframes ball-highlight {
  0% {
    -webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  45% {
    -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  50% {
    -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  55% {
    -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes ball-highlight {
  0% {
    -webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  45% {
    -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  50% {
    -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  55% {
    -webkit-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -moz-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -ms-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -o-transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    transform: skew(-30deg, 0) translate3d(0, 0, 1px);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@-webkit-keyframes ball-shadow {
  0% {
    -webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  45% {
    -webkit-transform: translate3d(12.5px, -15px, -1px);
    -moz-transform: translate3d(12.5px, -15px, -1px);
    -ms-transform: translate3d(12.5px, -15px, -1px);
    -o-transform: translate3d(12.5px, -15px, -1px);
    transform: translate3d(12.5px, -15px, -1px);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  50% {
    -webkit-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
    -moz-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
    -ms-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
    -o-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
    transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  55% {
    -webkit-transform: translate3d(12.5px, -15px, -1px);
    -moz-transform: translate3d(12.5px, -15px, -1px);
    -ms-transform: translate3d(12.5px, -15px, -1px);
    -o-transform: translate3d(12.5px, -15px, -1px);
    transform: translate3d(12.5px, -15px, -1px);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@-moz-keyframes ball-shadow {
  0% {
    -webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  45% {
    -webkit-transform: translate3d(12.5px, -15px, -1px);
    -moz-transform: translate3d(12.5px, -15px, -1px);
    -ms-transform: translate3d(12.5px, -15px, -1px);
    -o-transform: translate3d(12.5px, -15px, -1px);
    transform: translate3d(12.5px, -15px, -1px);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  50% {
    -webkit-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
    -moz-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
    -ms-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
    -o-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
    transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  55% {
    -webkit-transform: translate3d(12.5px, -15px, -1px);
    -moz-transform: translate3d(12.5px, -15px, -1px);
    -ms-transform: translate3d(12.5px, -15px, -1px);
    -o-transform: translate3d(12.5px, -15px, -1px);
    transform: translate3d(12.5px, -15px, -1px);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@-o-keyframes ball-shadow {
  0% {
    -webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  45% {
    -webkit-transform: translate3d(12.5px, -15px, -1px);
    -moz-transform: translate3d(12.5px, -15px, -1px);
    -ms-transform: translate3d(12.5px, -15px, -1px);
    -o-transform: translate3d(12.5px, -15px, -1px);
    transform: translate3d(12.5px, -15px, -1px);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  50% {
    -webkit-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
    -moz-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
    -ms-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
    -o-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
    transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  55% {
    -webkit-transform: translate3d(12.5px, -15px, -1px);
    -moz-transform: translate3d(12.5px, -15px, -1px);
    -ms-transform: translate3d(12.5px, -15px, -1px);
    -o-transform: translate3d(12.5px, -15px, -1px);
    transform: translate3d(12.5px, -15px, -1px);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes ball-shadow {
  0% {
    -webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  45% {
    -webkit-transform: translate3d(12.5px, -15px, -1px);
    -moz-transform: translate3d(12.5px, -15px, -1px);
    -ms-transform: translate3d(12.5px, -15px, -1px);
    -o-transform: translate3d(12.5px, -15px, -1px);
    transform: translate3d(12.5px, -15px, -1px);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  50% {
    -webkit-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
    -moz-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
    -ms-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
    -o-transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
    transform: translate3d(12.5px, -15px, -1px) scale3d(1, 1, 1);
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -ms-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
  }

  55% {
    -webkit-transform: translate3d(12.5px, -15px, -1px);
    -moz-transform: translate3d(12.5px, -15px, -1px);
    -ms-transform: translate3d(12.5px, -15px, -1px);
    -o-transform: translate3d(12.5px, -15px, -1px);
    transform: translate3d(12.5px, -15px, -1px);
    -webkit-animation-timing-function: ease-out;
    -moz-animation-timing-function: ease-out;
    -ms-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  100% {
    -webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
    -webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -ms-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

/* Styles for old versions of IE */
.ball {
  font-family:'Microsoft YaHei';
  font-weight: 100;
}

/* :not(:required) hides this rule from IE9 and below */
.ball:not(:required) {
  position: relative;
  display: inline-block;
  font-size: 0;
  letter-spacing: -1px;
  
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;

  background: #ff8866;
  width: 50px;
  height: 50px;
  -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-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  -moz-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  -ms-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  -o-transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-animation: ball 1500ms infinite linear;
  -moz-animation: ball 1500ms infinite linear;
  -ms-animation: ball 1500ms infinite linear;
  -o-animation: ball 1500ms infinite linear;
  animation: ball 1500ms infinite linear;
}
.ball:not(:required)::after {
  content: '';
  position: absolute;
  top: 4.5px;
  left: 5.5px;
  width: 15px;
  height: 15px;
  background: #ffb099;
  
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;

  -webkit-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
  -moz-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
  -ms-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
  -o-transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
  transform: skew(-20deg, 0) translate3d(0, 2.5px, 1px);
  -webkit-animation: ball-highlight 1500ms infinite linear;
  -moz-animation: ball-highlight 1500ms infinite linear;
  -ms-animation: ball-highlight 1500ms infinite linear;
  -o-animation: ball-highlight 1500ms infinite linear;
  animation: ball-highlight 1500ms infinite linear;
}
.ball:not(:required)::before {
  content: '';
  position: absolute;
  top: 50px;
  left: 5.5px;
  width: 50px;
  height: 15px;
  background: rgba(0, 0, 0, 0.2);
  
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  -ms-border-radius: 100%;
  -o-border-radius: 100%;
  border-radius: 100%;

  -webkit-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
  -moz-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
  -ms-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
  -o-transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
  transform: translate3d(66.66667px, 66.66667px, -1px) scale3d(1.25, 1.25, 1);
  -webkit-animation: ball-shadow 1500ms infinite linear;
  -moz-animation: ball-shadow 1500ms infinite linear;
  -ms-animation: ball-shadow 1500ms infinite linear;
  -o-animation: ball-shadow 1500ms infinite linear;
  animation: ball-shadow 1500ms infinite linear;
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  filter: blur(1px);
}
/* Css Spinners */
.cell {
    background: #f5f5f5 none repeat scroll 0 0;

    float: left;
    height: 185px;
    margin-top: 30px;
    overflow: hidden;
    padding: 20px;
    width: 100%;
}

.card {
    display: table;
    float: none;
    margin: 50px auto 0;
}


/* Gallery */
.gallery-sec {
    float: left;
    width: 100%;
}
.gallery-box {
    background: #000000 none repeat scroll 0 0;
    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
    z-index: 0;
}
.gallery-sec .gallery-box {
    margin-top: 30px;
}
.gallery-box > img {
    float: left;
    width: 100%;
}
.gallery-detail > a {
    background: #ed6b75 none repeat scroll 0 0;
    color: #ffffff;
    display: inline-block;
    font-size: 20px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    width: 60px;
}
.gallery-detail > a:hover{
    background: #333333;
}
.gallery-box h3 {
    color: #ffffff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 18px;
    margin: 30px 0 0;
    width: 100%;
}
.gallery-box.curve::before {
    background: #fff none repeat scroll 0 0;
    bottom: 100%;
    content: "";
    height: 80px;
    left: -100px;
    margin-bottom: -17px;
    position: absolute;
    
    -webkit-transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    -o-transform: rotate(-8deg);
    transform: rotate(-8deg);

    width: 200%;
    z-index: 2;
}
.gallery-box:hover > img {
    opacity: 0.66;
}
.gallery-detail {
    margin-top: 50px;
    opacity: 0;
    padding: 0 30px;
    position: absolute;
    text-align: center;
    top: 50%;
    
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);

    display: none;
    width: 100%;
}
.gallery-box.curve::after {
    background: #fff none repeat scroll 0 0;
    content: "";
    height: 80px;
    margin-top: -17px;
    position: absolute;
    right: -100px;
    top: 100%;
    
    -webkit-transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    -o-transform: rotate(-8deg);
    transform: rotate(-8deg);

    width: 200%;
}
.gallery-box:hover .gallery-detail {
    margin: 0;
    opacity: 1;
    display: block;
}

.widget-content {
    float: left;
    padding: 30px 40px 60px;
    width: 100%;
}


.account-sec {
    height: 100%;
    left: 0;
    max-height: 100%;
    position: relative;
    top: 0;
    width: 100%;
}
.account-user-sec {
    background-image: url("http://placehold.it/1920x1279");
    background-size: cover;
    float: left;
    height: 100%;
    left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2147483647;
    background-color: #e8edf2;
}
.account-user-sec::before {
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.1;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.account-sec {
    float: left;
    width: 100%;
}
.contact-sec .widget-title {
    margin-bottom: 30px;
    padding: 0 0 20px;
}
.account-sec .container {
    padding: 0;
}
.account-top-bar .logo > a {
    color: #333333;
}
.account-top-bar {
    background: rgba(0, 0, 0, 0.02) none repeat scroll 0 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    float: left;
    width: 100%;
}
.account-header-link {
    float: right;
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.account-header-link > li {
    float: left;
    margin-left: 35px;
}
.account-header-link > li > a {
    color: #5f5f5f;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    letter-spacing: 1.5px;
    padding: 22px 0;
    text-transform: uppercase;
}
.account-top-bar .logo {
    padding-left: 0;
}
.acount-sec {
    float: left;
    padding-bottom: 100px;
    padding-top: 100px;
    width: 100%;
}
.account-detail {
    float: left;
    padding-top: 20px;
    width: 100%;
}
.account-detail > ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.account-detail > ul > li {
    float: left;
    margin-bottom: 30px;
    width: 100%;
}
.account-detail > ul > li > h3 {
    float: left;
    font-size: 19px;
    margin: 0 0 9px;
    width: 100%;
}
.account-detail > ul > li > h3 > i {
    margin-right: 10px;
    width: 30px;
}
.account-detail > ul > li > p {
    color: #555555;
    float: left;
    margin: 0;
    padding-left: 46px;
    width: 100%;
}
.contact-sec {
    background: #ffffff none repeat scroll 0 0;

    float: left;
    padding: 50px;
    width: 100%;
}
.account-form {
    float: left;
    width: 100%;
}
.account-form > form {
    float: left;
    width: 100%;
}
.account-form > form  div.feild {
    float: left;
}
.account-form > form  div.feild > input[type="text"], .account-form > form div.feild > input[type="password"] {
    border: 1px solid #e6eaea;

    float: left;
    font-size: 13px;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding: 13px 30px;
    width: 100%;
}
.account-form > form .feild > input[type="submit"] {
    background: #ff5f5f none repeat scroll 0 0;
    border: medium none;

    color: #ffffff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    margin-top: 20px;
    padding: 14px 30px;
}
.more-option {
    padding: 36px 0;
    position: absolute;
    right: -80px;
    text-align: center;
    top: 50%;
    
    -webkit-transform: rotate(-90deg) translateX(50%);
    -moz-transform: rotate(-90deg) translateX(50%);
    -ms-transform: rotate(-90deg) translateX(50%);
    -o-transform: rotate(-90deg) translateX(50%);
    transform: rotate(-90deg) translateX(50%);

    width: 100px;
}
.more-option::before {
    background: #e8ecec none repeat scroll 0 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    top: 50%;
    width: 25px;
}
.more-option::after {
    background: #e8ecec none repeat scroll 0 0;
    content: "";
    height: 1px;
    right: 0;
    position: absolute;
    top: 50%;
    width: 25px;
}
.more-option span {
    color: #a5a5a5;
}
.creat-an-account {
    display: table;
    float: left;
    padding-left: 58px;
    padding-top: 60px;
    vertical-align: middle;
    width: 100%;
}
.creat-an-account > span {
    color: #858585;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    text-align: left;
    width: 100%;
}
.creat-an-account > a {
    background: #ff5f5f none repeat scroll 0 0;

    color: #ffffff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    margin-top: 19px;
    padding: 14px 30px;
}
.creat-an-account h4 {
    color: #555555;
    float: left;
    font-size: 13px;
    margin: 33px 0 0;
    width: 100%;
}
.creat-an-account > ul {
    float: left;
    list-style: outside none none;
    margin: 15px 0 0;
    padding: 0;
    width: 100%;
}
.creat-an-account > ul > li {
    float: left;
    margin-right: 4px;
}
.creat-an-account > ul > li > a {
    float: left;
}
.creat-an-account > ul > li > a > i {

    color: #ffffff;
    float: left;
    font-size: 14px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 40px;
}
.creat-an-account > ul > li > a > i.fa-facebook{ 
    background:#4e8deb;
}
.creat-an-account > ul > li > a > i.fa-google-plus{ 
    background:#eb4e4e;
}
.creat-an-account > ul > li > a > i.fa-twitter{ 
    background:#4ec4eb;
}
.account-detail > ul > li:last-child {
    margin: 0;
}
.account-sec footer {
    float: left;
    margin-top: 50px;
    padding-left: 45px;
    position: static;
    text-align: center;
    width: 100%;
}
.account-sec footer p {
    float: left;
    width: 100%;
}
.account-form label {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    font-weight: normal;
    line-height: 26px;
    margin: 10px 0 0;
    width: 100%;
}
.account-form label a{
    color: #000;
}
.account-form label input {
    float: left;
    margin-right: 10px;
    margin-top: 7px;
}

.go-full {
    background: #ffffff none repeat scroll 0 0;
    height: 100%;
    left: 0;
    overflow-y: scroll;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2147483647;
}
.lockscreen > p {
    float: left;
    margin-bottom: 30px;
    width: 100%;
}
.user-lock-avatar {
    float: left;
    margin-bottom: 30px;
    width: 100%;
}
.user-lock-avatar h3 {
    color: #464646;
    float: left;
    font-family: "Microsoft YaHei";
    margin: 17px 0 14px;
    padding-bottom: 15px;
    position: relative;
    width: 100%;
}
.user-lock-avatar > i {
    color: #777777;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    letter-spacing: 0.4px;
    line-height: 10px;
    margin-top: 0;
    width: 100%;
}
.lockscreen .account-form > input[type="submit"] {
    display: table;
    float: none;
    margin: 0 auto;
}
.lockscreen .account-form > fieldset {
    margin-bottom: 20px;
}
.lockscreen .account-feature {
    margin: 0;
}
.lockscreen:before {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.03);
    content: "";
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 50%;
    z-index: -1;
}
.user-lock-avatar h3:before {
    background: none repeat scroll 0 0 #9f9f9f;
    bottom: 0;
    content: "";
    height: 3px;
    left: 50%;
    margin-left: -10px;
    position: absolute;
    width: 20px;
}
.user-lock-avatar > span {
    border: 1px solid #838383;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    display: table;
    float: none;
    margin: 0 auto;
    overflow: hidden;
    padding: 2px;
}
.user-lock-avatar > span > img {
    border: 1px solid #bfbfbf;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    float: left;
    width: 100%;
}

.account-option {
    float: left;
    list-style: outside none none;
    margin: 0 0 40px;
    padding: 0;
    position: relative;
    width: 100%;
}
.account-form > fieldset {
    background: none repeat scroll 0 0 #fff;
    float: left;
    height: 50px;
    margin-bottom: 10px;
    padding: 0 20px;
    width: 100%;
}
.account-form > fieldset > input {
    border: medium none;
    
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    height: 50px;
    letter-spacing: 0.3px;
    margin-left: 20px;
    padding: 14px 30px;
    width: 320px;
}
.account-form > label {
    color: #737373;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.3px;
    line-height: 13px;
    margin: 20px 0 0;
}
.account-form > label > input {
    float: left;
    margin: 0 10px 0 0;
}
.account-form > fieldset > i {
    color: #555555;
    float: left;
    font-size: 17px;
    line-height: 50px;
}
.account-option > li {
    float: left;
    position: relative;
    text-align: center;
    width: 50%;
}
.account-option > li a > i {
    float: left;
    line-height: 10px;
}
.account-option > li a {
    color: #ffffff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    font-weight: lighter;
    letter-spacing: 0.3px;
    line-height: 10px;
    padding: 15px 0;
    width: 100%;
}
.account-option > li a.facebook {
    background: none repeat scroll 0 0 #44619d;
    padding-left: 18px;
    padding-right: 40px;
}
.account-option > li a.twitter {
    background:#00acee;
    padding-right: 18px;
    padding-left: 40px;
}

.account-option:before {
    background: none repeat scroll 0 0 #fff;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    color: #333333;
    content: "OR";
    font-family: "Microsoft YaHei";
    font-size: 13px;
    height: 40px;
    left: 50%;
    line-height: 40px;
    margin-left: -20px;
    position: absolute;
    top: 0;
    width: 40px;
    z-index: 9;
}
.account-form > input[type="submit"] {
    border: medium none;
    color: #ffffff;
    float: right;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    letter-spacing: 0.3px;
    margin-top: 10px;
    padding: 10px 45px;
    text-transform: uppercase;
}
.account-feature {
    float: left;
    list-style: outside none none;
    margin: 20px 0 0;
    padding: 0;
    width: 100%;
}
.account-feature a {
    color: #737373;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.3px;
    margin: 10px 0;
    text-transform: uppercase;
    width: 100%;
}
.account-form p {
    float: left;
    margin: 0;
    width: 100%;
}
.account-form p > label {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.3px;
    margin-left: 10px;
    margin-right: 30px;
    text-transform: uppercase;
}

.account-sec.lockscreen {
    text-align: center;
}
.account-sec.lockscreen > .logo {
    display: inline-block;
    float: none;
    margin-top: 50px;
    text-align: center;
}
.account-sec.lockscreen > .logo a {
    color: #333333;
    font-size: 30px;
}
.lockscreen .account-form {
    display: inline-block;
    float: left;
    width: 100%;
}
.lockscreen .account-form > fieldset {
    border: 1px solid #e1e1e1;
    display: inline-block;
    float: none;
    width: 400px;
}
.lockscreen .account-form > fieldset > input {
    height: 48px;
}


/* Side Panel */
.slide-panel {
    background: #ffffff none repeat scroll 0 0;

    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);

    height: 100%;
    margin-right: -16px;
    overflow-x: scroll;
    position: fixed;
    right: -280px;
    top: 0;

    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s; 

    width: 280px;
    z-index: 333;
}

.slide-panel.active {
    right: 0;
}
.close-panel-this {
    background: #ffffff none repeat scroll 0 0;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    -webkit-box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
    -ms-box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
    -o-box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 80px rgba(0, 0, 0, 0.3);

    color: #7f7f7f;
    font-size: 49px;
    height: 90px;
    line-height: 90px;
    opacity: 0;
    position: fixed;
    right: 50%;
    text-align: center;
    top: 60%;
    
    -webkit-transform: translateX(50%) translateY(-50%);
    -moz-transform: translateX(50%) translateY(-50%);
    -ms-transform: translateX(50%) translateY(-50%);
    -o-transform: translateX(50%) translateY(-50%);
    transform: translateX(50%) translateY(-50%);

    display: none;
    width: 90px;
    cursor: pointer;
    z-index: 1;
}
.slide-panel.active .close-panel-this {
    opacity: 1;
    top: 50%;
    display: block;
}
.slide-panel .panel-tab-btn {
    border: medium none;
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.slide-panel .panel-tab-btn > li {
    float: left;
    margin: 0;
    padding: 0;
    width: 50%;
}
.slide-panel .panel-tab-btn > li > a {
    background: none repeat scroll 0 0 #ececec;
    border: medium none;
    
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    
    color: #5f5f5f;
    float: left;
    font-size: 16px;
    margin: 0;
    padding: 20px 0;
    position: relative;
    text-align: center;
    
    -webkit-transition:all 0.4s ease 0s;
    -moz-transition:all 0.4s ease 0s;
    -ms-transition:all 0.4s ease 0s;
    -o-transition:all 0.4s ease 0s;
    transition:all 0.4s ease 0s;
    width: 100%;
}
.slide-panel .panel-tab-btn > li.active > a > i {
    float: left;
    padding-bottom: 7px;
    width: 100%;
}
.slide-panel .panel-tab-btn > li > a > span {
    bottom: 0;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    left: 0;
    letter-spacing: 0.3px;
    opacity: 0;
    position: absolute;
    text-align: center;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
    width: 100%;
}
.slide-panel .panel-tab-btn > li.active > a > span {
    bottom: 7px;
    opacity: 1;
}
.slide-panel .panel-tab-btn > li.active > a {
    background: none repeat scroll 0 0 #ffffff ;
    padding-bottom: 22px;
    padding-top: 18px;
}
.slide-panel .panel-tab {
    float: left;
    padding: 0;
    width: 100%;
}
.tab-content > .tab-pane {
    float: left;
    width: 100%;
}

/* Recent Mail Widget */
.recent-mails-widget {
    float: left;
    width: 100%;
}
.recent-mails-widget > form {
    border-bottom: 1px solid #e1e1e1;
    float: left;
    padding: 20px;
    width: 100%;
    margin:0;
}
.recent-mails-widget .filterform {
    background: #ffffff none repeat scroll 0 0;
    border: 1px solid #e1e1e1;
    float: left;
    margin: 0;
    padding: 11px 36px 11px 15px;
    position: relative;
    width: 100%;
}
.recent-mails-widget .filterform input {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    color: #6f6f6f;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    margin: 0;
    padding: 0;
    width: 100%;
}

.recent-mails-widget .filterform:before {
    color: #a7a7a7;
    content: "飥�";
    font-family: "Microsoft YaHei";
    position: absolute;
    right: 10px;
    top: 10px;
}
.recent-mails-widget > h3 {
    color: #9a9ea9;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    letter-spacing: 0.3px;
    margin: 0;
    padding: 20px;
    width: 100%;
}
.mail-list {
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0 20px;
    width: 100%;
    margin-bottom:25px;
}
.mail-list > li {
    border-bottom: 1px solid #e1e1e1;
    float: left;
    padding: 20px 0;
    position: relative;
    width: 100%;
}
.mail-list > li:first-child {
    padding-top: 0;
}
.mail-list > li > .title {
    float: left;
    padding-left: 55px;
    position: relative;
    width: 100%;
}
.mail-list > li > .title > span {
    border: 1px solid #a1a4af;
    float: left;
    left: 0;
    padding: 2px;
    position: absolute;
    top: 0;
    width: 40px;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}
.mail-list > li > .title > span > img {
    float: left;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    width: 100%;
}
.mail-list > li > .title > h3 {
    color: #5f5f5f;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin: 0 0 0;
    padding-right: 20px;
    width: 100%;
}
.mail-list > li > .title > h3 > a {
    color: #5f5f5f;
}
.mail-list > li > .title > h3 span {
    color: #9a9ea9;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    font-weight: normal;
    margin-top: 0px;
    width: 100%;
}
.mail-list > li > .title > a {
    color: #afafaf;
    font-size: 14px;
    position: absolute;
    right: 0;
    top: 9px;
}
.mail-list > li > h4 {
    color: #4f4f4f;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    font-weight: normal;
    margin: 18px 0 8px;
    width: 100%;
}
.mail-list > li > p {
    color: #8f8f8f;
    font-size: 13px;
    line-height: 19px;
    margin-top: 5px;
    padding-right: 20px;
}
.mail-list > li > .title > span > i {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    bottom: 5px;
    height: 8px;
    position: absolute;
    right: 0;
    width: 8px;
}

.recent-mails-widget > a {

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    color: #fff;
    display: table;
    float: none;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 10px 26px;
}
.file-action-btn {
    position: absolute;
    right: 0;
    width: 50px;
}
.file-action-btn > a {
    float: right;
    font-size: 11px;
    height: 19px;
    line-height: 19px;
    margin-left: 5px;
    margin-top: -1px;
    text-align: center;
    width: 19px;
}

/* File Transfer Widget */
.file-transfer-widget {
    float: left;
    margin-bottom: 0;
    margin-top: 40px;
    width: 100%;
}
.file-transfer-widget > h3 {
    background: #efefef none repeat scroll 0 0;
    color: #454545;
    cursor: pointer;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    letter-spacing: 0.3px;
    margin: 0;
    padding: 19px 30px;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;

    width: 100%;
}
.file-transfer-widget > .active {
    background: none repeat scroll 0 0 #4c4c4c;
}
.file-transfer-widget > .active > i {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.file-transfer-widget > h3 > i {
    float: right;
    
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    
}
.file-transfer-widget .toggle {
    float: left;
    padding: 20px;
    width: 100%;
}
.file-transfer-widget .toggle > ul {
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.file-transfer-widget .toggle > ul > li h4 {
    color: #4f4f4f;
    display: inline;
    float: none;
    font-size: 13px;
    font-weight: normal;
    margin: -1px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
.file-transfer-widget .toggle > ul > li h4 > i {
    color: #8a8e99;
    display: block;
    float: none;
    font-size: 11px;
    font-style: normal;
    margin-top: 3px;
    width: 100%;
}
.file-transfer-widget .toggle > ul > li {
    float: left;
    margin-bottom: 20px;
    padding-right: 60px;
    position: relative;
    width: 100%;
}
.file-transfer-widget .toggle > ul > li > i {
    color: #afafaf;
    float: left;
    font-size: 14px;
    margin-bottom: 12px;
    margin-right: 12px;
    margin-top: 6px;
}
.file-transfer-widget .toggle > ul > li > .progress {

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;

    float: left;
    height: 4px;
    margin-bottom: 0;
    margin-top: 11px;
    overflow: visible;
    width: 100%;
}

.user-avatar > span {

    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    float: left;
    overflow: hidden;
}

.file-transfer-widget .toggle > ul > li > .progress > .progress-bar {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    
    color: #333333;
    font-size: 11px;
    line-height: 2px;
    position: relative;
    z-index: 0;
    
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    -ms-border-radius:3px;
    -o-border-radius:3px;
    border-radius:3px;
}
.file-transfer-widget .toggle > ul > li > .progress > .progress-bar:before {
    background: none repeat scroll 0 0 #fff;
    
    content: "";
    height: 16px;
    left: 50%;
    margin-left: -16px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 32px;
    z-index: -1;
}
.file-action-btn > a {
    color:#fff;
    float: right;
    font-size: 8px;
    height: 19px;
    line-height: 20px;
    margin-left: 5px;
    margin-top: -1px;
    text-align: center;
    width: 19px;
    
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    -ms-border-radius:2px;
    -o-border-radius:2px;
    border-radius:2px;
}


/* Setting Widget */
.setting-widget {
    float: left;
    padding: 20px;
    width: 100%;
}
.setting-widget form:last-child {
    margin: 0;
    padding-bottom: 0;
}
.setting-widget > form {
    float: left;
    padding-bottom: 40px;
    width: 100%;
}
.setting-widget > form > h3{
    color: #9a9ea9;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    letter-spacing: 0.3px;
    margin: 0;
    text-transform: uppercase;
    width: 100%;
}

.toggle-setting {
    border-bottom: 1px dotted #333333;
    float: left;
    padding: 15px 0;
    width: 100%;
}
.toggle-setting > span {
    color: #4f4f4f;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    letter-spacing: 0.3px;
}
.toggle-setting > .toggle-switch {
    float: right;
    margin: 0;
}



/* Fancy Input */
.toggle-switch {
    background: none repeat scroll 0 0 #efefef;
    
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.125em;
    width: 60px;
}
.toggle-switch input {
    position: absolute;
    display: none;
}
.toggle-switch span {
    position: relative;
    left: 0%;
    display: block;
    text-transform: uppercase;
    text-align: center;

    -webkit-transition: left 200ms ease-out;
    -moz-transition: left 200ms ease-out;
    -o-transition: left 200ms ease-out;
    transition: left 200ms ease-out;
}
.toggle-switch :checked + span {
left: 50%;
}

/* Default unchecked state */
.toggle-switch span:before {
    
    color: #ffffff;
    content: attr(data-unchecked);
    display: block;
    font-family: "Microsoft YaHei";
    font-size: 10px;
    padding: 2px 0;
    width: 50%;
}

/* Checked state */
.toggle-switch :checked + span:before {
content: attr(data-checked);
}


/* TIMELINE
鈥撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�� */
.timeline2 {
    float: left;
    width: 100%;
}
.timeline2 ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.timeline2 ul li {
  list-style-type: none;
  position: relative;
  width: 6px;
  margin: 0 auto;
  padding-top: 50px;
  background: #dfdfdf;
}

.timeline2 ul li::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);

  width: 30px;
  height: 30px;
  
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

  background: inherit;
}

.timeline2 ul li div {
  position: relative;
  bottom: 0;
  width: 400px;
  padding: 35px;
  background: #efefef;
}

.timeline2 ul li div::before {
  content: '';
  position: absolute;
  bottom: 7px;
  width: 0;
  height: 0;
  border-style: solid;
}

.timeline2 ul li:nth-child(odd) div {
  left: 45px;
}

.timeline2 ul li:nth-child(odd) div::before {
  left: -15px;
  border-width: 8px 16px 8px 0;
  border-color: transparent #efefef transparent transparent;
}

.timeline2 ul li:nth-child(even) div {
  left: -439px;
}

.timeline2 ul li:nth-child(even) div::before {
  right: -15px;
  border-width: 8px 0 8px 16px;
  border-color: transparent transparent transparent #efefef;
}

time {
    display: block;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 11px;
}


/* EFFECTS
鈥撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�� */

.timeline2 ul li::after {

  -webkit-transition: background .5s ease-in-out;
  -moz-transition: background .5s ease-in-out;
  -ms-transition: background .5s ease-in-out;
  -o-transition: background .5s ease-in-out;
  transition: background .5s ease-in-out;
}

.timeline2 ul li.in-view::after {
  background: #F45B69;
}

.timeline2 ul li div {
  display: none;
  opacity: 0;
  
  -webkit-transition: all .5s ease-in-out;
  -moz-transition: all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
  -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;

}

.timeline2 ul li:nth-child(odd) div {
  
  -webkit-transform: translate3d(200px, 0, 0);
  -moz-transform: translate3d(200px, 0, 0);
  -ms-transform: translate3d(200px, 0, 0);
  -o-transform: translate3d(200px, 0, 0);
  transform: translate3d(200px, 0, 0);

}

.timeline2 ul li:nth-child(even) div {
  
  -webkit-transform: translate3d(-200px, 0, 0);
  -moz-transform: translate3d(-200px, 0, 0);
  -ms-transform: translate3d(-200px, 0, 0);
  -o-transform: translate3d(-200px, 0, 0);
  transform: translate3d(-200px, 0, 0);

}

.timeline2 ul li.in-view div {
  
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;

  display: block;
  opacity: 1;
}


/* GENERAL MEDIA QUERIES
鈥撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�撯�� */

@media screen and (max-width: 900px) {
  .timeline2 ul li div {
    width: 250px;
  }
  .timeline2 ul li:nth-child(even) div {
    left: -289px;
    /*250+45-6*/
  }
}

@media screen and (max-width: 600px) {
  .timeline2 ul li {
    margin-left: 20px;
  }
  .timeline2 ul li div {
    width: calc(100vw - 91px);
  }
  .timeline2 ul li:nth-child(even) div {
    left: 45px;
  }
  .timeline2 ul li:nth-child(even) div::before {
    left: -15px;
    border-width: 8px 16px 8px 0;
    border-color: transparent #F45B69 transparent transparent;
  }
}



/*! Huebee v1.0.0
http://huebee.buzz
---------------------------------------------- */

.huebee {
  position: absolute;
  z-index: 1;
  
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px);

  -webkit-transition: opacity 0.15s, transform 0.15s;
  -moz-transition: opacity 0.15s, transform 0.15s;
  -ms-transition: opacity 0.15s, transform 0.15s;
  -o-transition: opacity 0.15s, transform 0.15s;
  transition: opacity 0.15s, transform 0.15s;
}

.huebee.is-hidden {
  opacity: 0;
  -khtml-opacity: 0;

  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
  transform: translateY(10px);
}

.huebee.is-static-open {
  position: relative;
  z-index: auto;
}

.huebee__container {
  position: absolute;
  left: 0;
  bottom: 50px;
  padding: 10px;
  background: #EEE;
  
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;

  
  -webkit-box-shadow: 0 5px 10px hsla(0, 0%, 0%, 0.3);
  -moz-box-shadow: 0 5px 10px hsla(0, 0%, 0%, 0.3);
  -ms-box-shadow: 0 5px 10px hsla(0, 0%, 0%, 0.3);
  -o-box-shadow: 0 5px 10px hsla(0, 0%, 0%, 0.3);
  box-shadow: 0 5px 10px hsla(0, 0%, 0%, 0.3);

}

.huebee.is-static-open .huebee__container {
  position: relative;
  display: inline-block;
  left: auto;
  top: auto;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}
.huebee.is-static-open {
    bottom: 0;
    float: left;
    position: relative;
    width: 100%;
    z-index: auto;
}
.huebee.is-static-open .huebee__container {
    bottom: 0;
    float: left;
    margin-top: 10px;
}
.huebee__canvas {
  display: block;
  cursor: pointer;
}

.huebee__cursor {
  width: 15px;
  height: 15px;
  position: absolute;
  left: 0px;
  top: 0px;
  box-sizing: content-box;
  border: 3px solid white;
  
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;

  pointer-events: none;
}

.huebee__cursor.is-hidden { opacity: 0; }

.huebee__close-button {
  display: block;
  position: absolute;
  width: 24px;
  height: 24px;
  top: -9px;
  right: -9px;
  
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  border-radius: 12px;

  background: #222;
}

.huebee__close-button__x {
  stroke: white;
  stroke-width: 3;
  stroke-linecap: round;
}

.huebee__close-button:hover {
  background: white;
  cursor: pointer;
}

.huebee__close-button:hover .huebee__close-button__x {
  stroke: #222;
}
.color-picker > input {
    border: 1px solid #e1e1e1;
    float: left;
    padding: 10px 20px;
    width: 100%;
}
.color-picker > button {
    border: medium none;
    float: left;
    padding: 11px 30px;
}
.color-picker > span {
    float: left;
    padding: 11px 30px;
}


/* ===========
   Tab Styling */
.tab-group {
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    -ms-border-radius: 0 0 10px 10px;
    -o-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;

    float: left;
    margin: 0;
    position: relative;
    width: 100%;
}
.tab-group section {
    float: left;
    height: 0;
    opacity: 0;
    padding: 0;
    width: 100%;
}
.tab-group section.active {
    opacity: 1;
}
.tab-nav {
    float: left;
    list-style: outside none none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%;
}
.tab-nav li {
    float: left;
}
.tab-nav li a {
    background: #eee none repeat scroll 0 0;
    
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    -ms-border-radius: 10px 10px 0 0;
    -o-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;

    color: grey;
    display: block;
    float: left;
    line-height: 27px;
    margin-right: 1px;
    margin-top: 10px;
    padding: 3px 20px;
    position: relative;
    text-decoration: none;
    top: 1px;
    
    -webkit-transition: background 0.2s ease 0s, line-height 0.2s ease 0s, margin 0.2s ease 0s;
    -moz-transition: background 0.2s ease 0s, line-height 0.2s ease 0s, margin 0.2s ease 0s;
    -ms-transition: background 0.2s ease 0s, line-height 0.2s ease 0s, margin 0.2s ease 0s;
    -o-transition: background 0.2s ease 0s, line-height 0.2s ease 0s, margin 0.2s ease 0s;
    transition: background 0.2s ease 0s, line-height 0.2s ease 0s, margin 0.2s ease 0s;

}
.tab-nav li.active a {
    background: #6eb590 none repeat scroll 0 0;
    color: white;
    line-height: 37px;
    margin-top: 0;
}



.prettyprint ol,.prettyprint ul{list-style:none}.prettyprint ol.linenums{list-style:decimal outside;padding-left:47px;color:#afafaf;font-size:12px}.prettyprint ol.linenums li{padding-left:15px;border-left:3px #6ce26c solid}.prettyprint li>*{font-size:14px}.prettyprint{border:5px solid #DDD;padding:7px 0 5px;font-size:14px;white-space:pre;overflow:auto;max-height:500px;width:100%;display:block}.prettyprint ol,.prettyprint ul{padding:5px 0}.prettyprint li.L0,.prettyprint li.L1,.prettyprint li.L2,.prettyprint li.L3,.prettyprint li.L4,.prettyprint li.L5,.prettyprint li.L6,.prettyprint li.L7,.prettyprint li.L8,.prettyprint li.L9{list-style:inherit;background:0}.prettyprint.alternate li.L1,.prettyprint.alternate li.L3,.prettyprint.alternate li.L5,.prettyprint.alternate li.L7,.prettyprint.alternate li.L9{background:#f5f5f5}
.code {
    float: left;
    margin: 20px 0 0;
    width: 100%;
}


/*
formBuilder - https://formbuilder.online/
Version: 1.24.2
Author: Kevin Chappell <kevin.b.chappell@gmail.com>
*/
.kc-toggle{position:relative;margin:4px 0 0 2px;width:60px;height:21px;border-radius:3px;cursor:pointer;overflow:hidden;display:inline-block;background:#e9e9e9;border:1px solid #cbcbcb;vertical-align:bottom;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kc-toggle .kct-inner{position:absolute;top:0;left:-28px;width:115px;height:100%;-webkit-transition:left 150ms ease;transition:left 150ms ease}.kc-toggle.on .kct-inner{background:#e2e2e2;background:-webkit-linear-gradient(top,#e2e2e2 0,#fff 100%);background:linear-gradient(to bottom,#e2e2e2 0,#fff 100%);left:0}.kc-toggle input{display:none;position:absolute;z-index:-1;opacity:0;margin:0;padding:0;width:100%;height:100%}.kc-toggle .kct-on{color:#12a912}.kct-off{color:#666}.kct-handle,.kct-off,.kct-on{width:28px;height:100%;font-family:'Microsoft YaHei';font-size:12px;text-align:center;line-height:22px;font-weight:700;float:left}.kct-off,.kct-on{position:relative}.kct-handle{position:relative;height:17px;background:#fff;background:-webkit-linear-gradient(top,#fff 0,#cecece 100%);background:linear-gradient(to bottom,#fff 0,#cecece 100%);border:1px solid #999;font-weight:100;color:#4b4b4b;text-shadow:none;border-radius:3px;margin:1px}.rendered-form .btn,.rendered-form .btn.active,.rendered-form .btn.btn-active,.rendered-form .btn:active,.rendered-form .form-control{background-image:none}.rendered-form *{box-sizing:border-box}.rendered-form button,.rendered-form input,.rendered-form optgroup,.rendered-form select,.rendered-form textarea{margin:0;font:inherit;color:inherit}.rendered-form textarea{overflow:auto}.rendered-form button,.rendered-form input,.rendered-form select,.rendered-form textarea{font-family:'Microsoft YaHei';font-size:inherit;line-height:inherit}.rendered-form .btn-group{position:relative;display:inline-block;vertical-align:middle}.rendered-form .btn-group>.btn{position:relative;float:left}.rendered-form .btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle){border-top-right-radius:0;border-bottom-right-radius:0}.rendered-form .btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle){border-radius:0}.rendered-form .btn-group .btn+.btn,.rendered-form .btn-group .btn+.btn-group,.rendered-form .btn-group .btn-group+.btn,.rendered-form .btn-group .btn-group+.btn-group{margin-left:-1px}.rendered-form .btn-group .input-group .form-control:last-child,.rendered-form .btn-group .input-group-addon:last-child,.rendered-form .btn-group .input-group-btn:first-child>.btn-group:not(:first-child)>.btn,.rendered-form .btn-group .input-group-btn:first-child>.btn:not(:first-child),.rendered-form .btn-group .input-group-btn:last-child>.btn,.rendered-form .btn-group .input-group-btn:last-child>.btn-group>.btn,.rendered-form .btn-group .input-group-btn:last-child>.dropdown-toggle,.rendered-form .btn-group>.btn:last-child:not(:first-child),.rendered-form .btn-group>.dropdown-toggle:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.rendered-form .btn-group>.btn.active,.rendered-form .btn-group>.btn:active,.rendered-form .btn-group>.btn:focus,.rendered-form .btn-group>.btn:hover{z-index:2}.rendered-form .btn{color:#fff;display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;border-radius:4px}.rendered-form .btn.btn-default{color:#333;background-color:#fff;border-color:#ccc}.rendered-form .btn.btn-lg{padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.rendered-form .btn.btn-sm{padding:5px 10px;font-size:12px;line-height:1.5;border-radius:3px}.rendered-form .btn.btn-xs{padding:1px 5px;font-size:12px;line-height:1.5;border-radius:3px}.rendered-form .btn-primary{background-color:#337ab7;border-color:#2e6da4}.rendered-form .btn-primary.active,.rendered-form .btn-primary.btn-active,.rendered-form .btn-primary:active,.rendered-form .btn-primary:hover{background-color:#286090;border-color:#204d74}.rendered-form .btn-danger{background-color:#d9534f;border-color:#d43f3a}.rendered-form .btn-danger:hover{background-color:#c9302c;border-color:#ac2925}.rendered-form .btn-default{background-color:#fff;border-color:#ccc}.rendered-form .btn-success{background-color:#5cb85c;border-color:#4cae4c}.rendered-form .btn-success:hover{background-color:#449d44;border-color:#398439}.rendered-form .btn-info{background-color:#5bc0de;border-color:#46b8da}.rendered-form .btn-info:hover{background-color:#31b0d5;border-color:#269abc}.rendered-form .btn-warning{background-color:#f0ad4e;border-color:#eea236}.rendered-form .btn-warning:hover{background-color:#ec971f;border-color:#d58512}.rendered-form .input-group .form-control:last-child,.rendered-form .input-group-addon:last-child,.rendered-form .input-group-btn:first-child>.btn-group:not(:first-child)>.btn,.rendered-form .input-group-btn:first-child>.btn:not(:first-child),.rendered-form .input-group-btn:last-child>.btn,.rendered-form .input-group-btn:last-child>.btn-group>.btn,.rendered-form .input-group-btn:last-child>.dropdown-toggle{border-top-left-radius:0;border-bottom-left-radius:0}.rendered-form .input-group .form-control,.rendered-form .input-group-addon,.rendered-form .input-group-btn{display:table-cell}.rendered-form .input-group-lg>.form-control,.rendered-form .input-group-lg>.input-group-addon,.rendered-form .input-group-lg>.input-group-btn>.btn{height:46px;padding:10px 16px;font-size:18px;line-height:1.3333333;border-radius:6px}.rendered-form .input-group .form-control{position:relative;z-index:2;float:left;width:100%;margin-bottom:0}.rendered-form .input-group{position:relative;display:table;border-collapse:separate}.rendered-form .form-control,.rendered-form output{display:block;font-size:14px;line-height:1.42857143;color:#555}.rendered-form textarea.form-control{height:auto}.rendered-form .form-control{height:34px;width:100%;padding:6px 12px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.rendered-form .form-control:focus{border-color:#66afe9;outline:0;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}.rendered-form .form-group{margin-bottom:15px}.rendered-form .pull-right{float:right!important}.rendered-form .pull-left{float:left!important}.form-group .required{color:#C10000}.form-control.number{width:auto}[tooltip]{position:relative}[tooltip]:hover:after{background:#262626;background:rgba(0,0,0,.9);border-radius:5px 5px 5px 0;bottom:23px;color:#fff;content:attr(tooltip);padding:10px 5px;position:absolute;z-index:98;left:2px;width:230px;text-shadow:none;font-size:12px;line-height:1.5em}[tooltip]:hover:before{border:solid;border-color:#222 transparent;border-width:6px 6px 0;bottom:17px;content:'';left:2px;position:absolute;z-index:99}.tooltip-element{color:#fff;background:#000;width:16px;height:16px;border-radius:8px;display:inline-block;text-align:center;line-height:16px;margin:0 5px;font-size:12px}.form-control[type=color]{width:60px;padding:2px;display:inline-block}.form-control[multiple]{height:auto}


.build-wrap {
    border: 1px solid #e1e1e1;
    float: left;
    margin-bottom: 30px;
    margin-top: 20px;
    padding: 30px;
    width: 100%;
}
.form-builder-dialog.data-dialog {
    height: 400px !important;
    overflow-y: scroll;
}

.modal-backdrop {
    display: none;
}
.modal::before {
    background: #000000 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.4;
    position: fixed;
    top: 0;
    width: 100%;
}
.bs-example-modal .modal {
    bottom: auto;
    display: block;
    left: auto;
    position: relative;
    right: auto;
    top: auto;
    z-index: 1;
}

.bs-example-modal > .modal::before {
    display: none;
}

/* Streaming Table */
.streaming-table {
    float: left;
    margin-top: 10px;
    padding-bottom: 20px;
    padding-top: 20px;
    width: 100%;
}
.table.table-striped.table-bordered {
    float: left;
    margin-top: 20px;
    width: 100%;
}
.st_pagination {
    float: right;
}
.streaming-table .progress {
    
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;

    display: table;
    float: left;
    height: 35px;
    margin: 0 auto 20px;
    width: 100%;
}
.streaming-table .progress .progress-bar {
    font-family: "Microsoft YaHei";
    font-size: 14px;
    height: 35px;
    line-height: 37px;
    text-align: center;
    width: 100%;
}
#stream_table td {
    color: #555555;
    font-size: 13px;
}
#stream_table th {
    font-family: "Microsoft YaHei";
    font-size: 15px;
    font-weight: 600;
    padding: 10px;
    text-align: center;
}
#stream_table > thead {
    background: none repeat scroll 0 0 #ECEDEE;
    color: #444444;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    font-weight: 600;
}
#stream_table td {
    color: #555555;
    font-size: 13px;
    text-align: center;
}
#stream_table tr {
    font-family: "Microsoft YaHei";
    font-size: 13px;
    letter-spacing: 0.35px;
}
#summary {
    color: #3D3D3D;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    font-weight: 500;
    line-height: 35px;
}
.streaming-table .pagination {

    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}
.streaming-table .pagination li a {
    background: none repeat scroll 0 0 #fafafa;
    border: 1px solid #d1d1d1;
    
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    
    color: #444444;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    letter-spacing: 0.3px;
}
.st_search {
    background: none repeat scroll 0 0 #fff;
    border: 1px solid #e8ecec;
    
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;

    color: #333333;
    float: right;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin: 0;
    max-width: 200px;
    padding: 7px 10px;
    text-transform: uppercase;
    width: 207px;
}

.pagination {
    display: table;
    float: none;
    margin: 0 auto;
}
.pagination li.active a {
    background-color: #3d3d3d;
    border: 1px solid #3d3d3d;
    color: #fff;
}
.st_per_page {
    border: 1px solid #e8ecec;
    
    -webkit-border-radius: 11px;
    -moz-border-radius: 11px;
    -ms-border-radius: 11px;
    -o-border-radius: 11px;
    border-radius: 11px;
    
    color: #444444;
    float: right;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    height: 33px !important;
    margin-right: 10px;
    text-align: center;
    width: 100px;
}

.record_count {
  margin-left: 20px;
}


.flatpickr-calendar{background:transparent;overflow:hidden;max-height:0;opacity:0;visibility:hidden;text-align:center;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:315px;box-sizing:border-box;-webkit-transition:top .1s cubic-bezier(0,1,.5,1);transition:top .1s cubic-bezier(0,1,.5,1);z-index:auto;background:#fff;box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,.08)}.flatpickr-calendar.inline,.flatpickr-calendar.open{opacity:1;visibility:visible;overflow:visible;max-height:640px}.flatpickr-calendar.open{display:inline-block;-webkit-animation:flatpickrFadeInDown .3s cubic-bezier(0,1,.5,1);animation:flatpickrFadeInDown .3s cubic-bezier(0,1,.5,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{display:block}.flatpickr-calendar.hasWeeks{width:auto}.flatpickr-calendar.dateIsPicked.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:after,.flatpickr-calendar:before{position:absolute;display:block;pointer-events:none;border:solid transparent;content:"";height:0;width:0;left:22px}.flatpickr-calendar.rightMost:after,.flatpickr-calendar.rightMost:before{left:auto;right:22px}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:after,.flatpickr-calendar.arrowTop:before{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:after,.flatpickr-calendar.arrowBottom:before{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-month{background:transparent;color:rgba(0,0,0,.9);fill:rgba(0,0,0,.9);height:28px;line-height:24px;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flatpickr-next-month,.flatpickr-prev-month{text-decoration:none;cursor:pointer;position:absolute;top:10px;height:16px;line-height:16px}.flatpickr-next-month i,.flatpickr-prev-month i{position:relative}.flatpickr-next-month.flatpickr-prev-month,.flatpickr-prev-month.flatpickr-prev-month{left:calc(3.57% - 1.5px)}.flatpickr-next-month.flatpickr-next-month,.flatpickr-prev-month.flatpickr-next-month{right:calc(3.57% - 1.5px)}.flatpickr-next-month:hover,.flatpickr-prev-month:hover{color:#959ea9}.flatpickr-next-month:hover svg,.flatpickr-prev-month:hover svg{fill:#f64747}.flatpickr-next-month svg,.flatpickr-prev-month svg{width:14px}.flatpickr-next-month svg path,.flatpickr-prev-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,.05);box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,.1)}.numInputWrapper span:active{background:rgba(0,0,0,.2)}.numInputWrapper span:after{display:block;content:"";position:absolute;top:33%}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,.6)}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,.6)}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,.5)}.numInputWrapper:hover{background:rgba(0,0,0,.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;top:5px;display:inline-block;text-align:center}.flatpickr-current-month span.cur-month{font-family:'Microsoft YaHei';font-weight:700;color:inherit;display:inline-block;margin-left:7px;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,.9)}
.flatpickr-current-month input.cur-year{background:transparent;box-sizing:border-box;color:inherit;cursor:default;padding:0 0 0 .5ch;margin:0;display:inline;font-size:inherit;font-familyMicrosoft YaHeiD1';font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,.5);background:transparent;pointer-events:none}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden}.flatpickr-days,.flatpickr-weeks{padding:1px 0 0}.flatpickr-days{padding:0;outline:0;text-align:left;width:315px;box-sizing:border-box;display:inline-block;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:distribute;justify-content:space-around}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:40px;height:40px;line-height:40px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day.nextMonthDay:focus,.flatpickr-day.nextMonthDay:hover,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.today.inRange,.flatpickr-day:focus,.flatpickr-day:hover{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:focus,.flatpickr-day.today:hover{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.endRange,.flatpickr-day.endRange.nextMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.endRange:focus,.flatpickr-day.endRange:hover,.flatpickr-day.selected,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.selected:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.startRange:focus,.flatpickr-day.startRange:hover{background:#569ff7;color:#fff;border-color:#569ff7}.flatpickr-day.endRange.startRange,.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.endRange.endRange,.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.inRange{border-radius:0;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.disabled,.flatpickr-day.disabled:hover{pointer-events:none}.flatpickr-day.disabled,.flatpickr-day.disabled:hover,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.nextMonthDay,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.prevMonthDay{color:rgba(57,57,57,.3);background:transparent;border-color:transparent;cursor:default}span.flatpickr-weekday{cursor:default;font-size:90%;color:rgba(0,0,0,.54);height:27.333333333333332px;line-height:24px;background:transparent;text-align:center;display:block;float:left;width:14.28%;font-weight:700;margin:0;padding-top:3.333333333333333px}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{display:inline-block;float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:1px 12px 0;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%}.flatpickr-weekwrapper span.flatpickr-day{display:block;width:100%;max-width:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-ms-flexbox;display:flex;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;box-sizing:border-box;overflow:hidden;-webkit-transition:height .33s cubic-bezier(0,1,.5,1);transition:height .33s cubic-bezier(0,1,.5,1);display:-webkit-box;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}
.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-ms-flex:1;flex:1 1 0%;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;cursor:pointer;color:#393939;font-size:14px;position:relative;box-sizing:border-box}.flatpickr-time input.flatpickr-hour{font-weight:700}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-am-pm,.flatpickr-time .flatpickr-time-separator{height:inherit;display:inline-block;float:left;line-height:inherit;color:#393939;font-weight:700;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time .flatpickr-am-pm:focus,.flatpickr-time .flatpickr-am-pm:hover{background:#f0f0f0}.hasTime .flatpickr-days,.hasWeeks .flatpickr-days{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.hasWeeks .flatpickr-days{border-left:0}@media (-ms-high-contrast:none){.flatpickr-month{padding:0}.flatpickr-month svg{top:0!important}}@-webkit-keyframes flatpickrFadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:none;transform:none}}@keyframes flatpickrFadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:none;transform:none}}


/**
 * Farbtastic Color Picker 1.2
 * 漏 2008 Steven Wittens
 *
 */
 
.farbtastic {
  position: relative;
}
.farbtastic * {
  position: absolute;
  cursor: crosshair;
}
.farbtastic, .farbtastic .wheel {
  width: 195px;
  height: 195px;
}
.farbtastic .color, .farbtastic .overlay {
  top: 47px;
  left: 47px;
  width: 101px;
  height: 101px;
}
.farbtastic .wheel {
  background: url(wheel.png) no-repeat;
  width: 195px;
  height: 195px;
}
.farbtastic .overlay {
  background: url(mask.png) no-repeat;
}
.farbtastic .marker {
  width: 17px;
  height: 17px;
  margin: -8px 0 0 -8px;
  overflow: hidden; 
  background: url(marker.png) no-repeat;
}
.fresheditor-toolbar .btn-toolbar .btn-group > a {
    background: #d3d3d3 none repeat scroll 0 0;
    color: #4f4f4f;
}

.nav > li > a:hover {
    background: #ececec none repeat scroll 0 0;
}
body div  .dropup > a {
    color: #ffffff;
}

body div .dropdown > a:focus{
    color: #333333;
}
.dropdown.open > a {
    color: #333333;
}
.dropup > a {
    color: #ffffff;
}
.dropup.open > a {
    color: #333333;
}

.alertoh {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #eed3d7;
  
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;

  position: fixed;
  bottom: 0px;
  right: 21px;
  /* Each alert has its own width */
  float: right;
  clear: right;
  z-index: 9999999999999;
}

.alertoh-red {
  color: white;
  background-color: #DA4453;
}
.alertoh-green {
  color: white;
  background-color: #37BC9B;
}
.alertoh-blue {
  color: white;
  background-color: #4A89DC;
}
.alertoh-yellow {
  color: white;
  background-color: #F6BB42;
}
.alertoh-orange {
  color:white;
  background-color: #E9573F;
}


/* Line & Graoh Chart */


/* Resets */

/* Gradinet and Rounded Corners */
#tooltip {
    background: #ffffff;
    background: -moz-linear-gradient(top,  #ffffff 0%, #f9f9f9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f9f9f9));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f9f9f9 100%);
    background: -o-linear-gradient(top,  #ffffff 0%,#f9f9f9 100%);
    background: -ms-linear-gradient(top,  #ffffff 0%,#f9f9f9 100%);
    background: linear-gradient(to bottom,  #ffffff 0%,#f9f9f9 100%);

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.visitors > span {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    float: left;
    height: 11px;
    margin-right: 9px;
    margin-top: 5px;
    width: 11px;
}
.returning > span {
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    float: left;
    height: 11px;
    margin-right: 9px;
    margin-top: 5px;
    width: 11px;
    background: #474c60;
}
/*  Graph Container */
.graph-containers {
    float: left;
    height: 330px;
    padding: 0;
    position: relative;
    top: -78px;
    width: 100%;
}

.graph-containers > div {
    height: 400px;
    left: 5%;
    position: absolute;
    top: 0;
    width: 90%;
}
.graph-info {
    float: left;
    margin-bottom: 0;
    width: 100%;
    position: relative;
    z-index: 11;
}

/* Text Styles */
#tooltip, .graph-info a {
    color: #646464;
    float: left;
    font-family: "\5FAE\8F6F\96C5\9ED1";
    font-size: 12px;
    font-weight: bold;
    height: 33px;
    line-height: 20px;
}

.tickLabel {
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.25px;
    margin-right: -50px;
    position: absolute;
    right: 530px;
    text-align: right;
    top: 271px;
    width: 28px;
}

/* Tooltip */
#tooltip {
    position: absolute;
    display: none;
    padding: 5px 10px;
    border: 1px solid #e1e1e1;
}

/* Links */
.graph-info a {
    cursor: default;
    display: inline-block;
    float: left;
    font-family: "Microsoft YaHei";
    font-weight: 600;
    letter-spacing: 0.25px;
    margin-right: 28px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
}


.graph-info .returning:before { background: #77b7c5; }

.graph-info #bars.graph-tab-btn {
    margin-left: 8px;
}
.graph-info .graph-tab-btn {
    float: right;
    margin: 0;
}
.graph-info .graph-tab-btn {
    background: none repeat scroll 0 0 #fafafa;
    border: 1px solid #eaeaea;
    
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;

    cursor: pointer;
    float: right;
    font-size: 15px;
    height: 32px;
    line-height: 32px;
    margin: 0;
    position: relative;
    text-align: center;
    width: 32px;
    z-index: 999;
}
.graph-info .graph-tab-btn.active{
    color:#fff;
}

/* Hide the First and Last Y Label */
.yAxis .tickLabel:first-child,
.yAxis .tickLabel:last-child { display: none; }

/* Clear Floats */
.graph-info:before, .graph-info:after,
.graph-containers:before, .graph-containers:after {
    content: '';
    display: block;
    clear: both;
}
#large-bar-chart {
    float: left;
    padding: 0;
}
#graph-wrapper {
    float: left;
    margin-bottom: 30px;
    width: 100%;
}
.graph-details {
    float: left;
    width: 100%;
}
.graph-details > ul {
    display: table;
    float: none;
    list-style: none outside none;
    margin: 0 auto;
    padding: 0;
    width: auto;
}
.graph-details > ul > li {
    float: left;
    width: 150px;
}
.graph-details > ul > li span {
    float: left;
    text-align: center;
    width: 100%;
}
.graph-details > ul > li p {
    float: left;
    text-align: center;
    width: 100%;
}
.graph-details > ul > li p {
    color: #333333;
    float: left;
    font-size: 20px;
    font-weight: bold;
    margin-top: 9px;
    text-align: center;
    width: 100%;
}
.graph-details > ul > li p > i {
    float: left;
    font-style: normal;
    text-align: center;
    width: 100%;
    color: #777777;
    font-size: 12px;
    font-weight: normal;
    line-height: 16px;
}
#graph-lines .xAxis.x1Axis {
    float: left;
    margin-top: -11px;
    position: absolute;
    top: -21px;
    width: 100%;
    left: 0px;
}
#graph-lines .yAxis.y1Axis {
    Position: absolute;
    top: 0;
    right: 0px;
    margin-right: 78px;
}
#graph-bars .xAxis.x1Axis {
    float: left;
    height: 20px;
    margin-top: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
#graph-bars .yAxis.y1Axis {
    position: absolute;
    right: 0;
    top: 0;
    margin-right: 78px;
}
.graph-tab-btn.active {
    background: #474c60;
    border-color: #474c60;
}
.quick-flat-chart .yAxis, .quick-flat-chart .xAxis {
    display: none;
}
.double-chart .yAxis, .double-chart .xAxis {
    display: none;
}
#flot-sp1ine .xAxis, #flot-sp1ine .yAxis {
    display: none;
}


/* Activity Feed */
.activity-feed {
    float: left;
    width: 100% !important;
    padding: 30px;
}
.activity-feed ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.activity-feed ul li {
    border-bottom: 1px solid #e8ecec;
    float: left;
    padding: 10px 0 10px 50px;
    position: relative;
    width: 100%;
}
.activity-feed  li:first-child {
    padding-top: 0;
}
.activity-feed  li:last-child {
    border: medium none;
    padding-bottom: 0;
}
.activity-feed  li > span {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    height: 36px;
    left: 0;
    margin-top: -18px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    width: 36px;
}
.activity-feed li p {
    line-height: 18px;
    margin-bottom: 5px;
}
.activity-feed li > i {
    color: #999999;
    float: left;
    font-size: 11px;
    font-style: italic;
    letter-spacing: 0.3px;
    width: 100%;
}
.activity-feed  li > span > i {
    color: #fff;
    float: left;
    font-size: 15px;
    height: 100%;
    line-height: 36px;
    position: relative;
    text-align: center;
    width: 100%;
}
.activity-feed  li h3 {
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin: 5px 0;
    width: 100%;
}


/* Tweets */
.tweet-widget {
    
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    border-radius: 1px;

    float: left;
    overflow: hidden;
    width: 100%;
}
.tweet-widget > img {
    float: left;
    width: 100%;
}
.twitter-profile {
    float: left;
    padding: 30px 30px 30px 125px;
    position: relative;
    width: 100%;
    z-index: 0;
}
.twitter-profile:before {
    color: #f2f2f2;
    content: "飩�";
    font-family: "Microsoft YaHei";
    font-size: 114px;
    left: 0;
    margin-top: -69px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 50%;
    width: 100%;
    z-index: -1;
}
.twitter-profile > span {
    border: 3px solid #f0f1f3;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    left: 30px;
    overflow: hidden;
    position: absolute;
    top: 30px;
}
.twitter-profile > span > img {
    float: left;
    width: 69px;
}
.twitter-profile > h3 {
    color: #333333;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 0.3px;
    margin-bottom: 5px;
    margin-top: 15px;
    width: 100%;
}
.twitter-profile > h3 > i {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    
    display: inline-block;
    font-size: 12px;
    height: 20px;
    line-height: 19px;
    margin-left: 10px;
    text-align: center;
    width: 20px;
    color: #fff;
}
.twitter-profile > h4 {
    color: #777777;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    letter-spacing: 0.3px;
    margin: 0;
    width: 100%;
}
.twitter-activity {
    background: none repeat scroll 0 0 #fafafa;
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 20px;
    width: 100%;
    margin-top: 20px;
}
.twitter-activity > li {
    float: left;
    text-align: center;
    width: 33.333%;
}
.twitter-activity > li > i {
    color: #777777;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    font-style: normal;
    letter-spacing: 0.3px;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}
.twitter-activity > li > span {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 0.3px;
    line-height: 17px;
    margin-bottom: 9px;
    margin-top: 6px;
    text-align: center;
    width: 100%;
}


/* profile Views Widget */
.profile-views-widget {
    float: left;
    width: 100%;
}
.profile-thumb {
    float: left;
    min-height: 60px;
    padding-left: 80px;
    position: relative;
    width: 100%;
}
.profile-thumb > span {
    height: 60px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 60px;
}
.profile-thumb > span > img {
    float: left;
    width: 100%;
}
.profile-thumb > h3 {
    color: #fff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 20px;
    letter-spacing: 0.3px;
    line-height: 15px;
    margin: 11px 0 0;
    width: 100%;
}
.profile-thumb > i {
    color: #cfcfcf;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin-top: 8px;
    width: 100%;
    letter-spacing: 0.5px;
}
.profile-views-progress {
    float: left;
    margin-top: 20px;
    width: 100%;
}
.profile-views-progress > h5 {
    color: #cfcfcf;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 13px;
    letter-spacing: 0.3px;
    margin: 0;
    width: 100%;
    font-weight: normal;
    letter-spacing: 0.5px;
}
.profile-views-progress > ul {
    list-style: outside none none;
    margin: 0 -7px;
    padding: 0;
}
.profile-views-progress > ul > li {
    float: left;
    margin-top: 18px;
    padding: 0 7px;
    width: 33.333%;
}
.profile-views-progress > ul > li .progress {
    
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    
    
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    
    float: left;
    height: 8px;
    width: 100%;
}
.profile-views-progress > ul > li .progress > .progress-bar {
    
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
    
    position: relative;
}
.profile-views-progress > ul > li .progress > .progress-bar:before {
    background: none repeat scroll 0 0 #000;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.25;
    position: absolute;
    top: 0;
    width: 100%;
}
.profile-views-progress > ul > li i {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 10px;
    width: 100%;
    color: #c3c3c3;
    letter-spacing: 0.5px;
}
.profile-views-progress > ul > li h4 {
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 20px;
    font-weight: bold;
    margin: 8px 0 0;
    width: 100%;
    color: #fff;
}

/* database Migration */
.database-migration {
    float: left;
    position: relative;
    width: 100%;
}
.database-migration > h3 {
    color: #444444;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 16px;
    letter-spacing: 0.3px;
    margin-bottom: 10px;
    width: 100%;
    margin-top: 0;
}
.database-migration > .progress {
    margin-top: 34px;
}
.up-or-down {
    background: #f6f6f6 none repeat scroll 0 0;
    color: #666;
    font-family: "Microsoft YaHei";
    font-size: 10px;
    font-style: normal;
    letter-spacing: 0.3px;
    line-height: 10px;
    margin: 8px;
    padding: 3px 10px;
    position: absolute;
    right: 0;
    top: 0;
}

#indicatorContainerWrap,#indicatorContainer{
    display:inline-block;
    position:relative;
}
#prgLogo {
    height: 50px;
    left: 50%;
    margin-left: 0;
    margin-top: 0;
    position: absolute;
    top: 50%;
    
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

    width: 50px;
}


#indicatorContainerWrap2{
    position: relative;
    display: inline-block;
}
 
.rad-cntnt{
    position: absolute;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    top:50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size:20px;
    line-height: 24px;
}
 
 
#prgFileSelector{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    top:0;
    left:0;
    z-index: 10;
}

/* Parallx Example */
.parallax-example {
    float: left;
    padding: 110px 0;
    position: relative;
    text-align: center;
    width: 100%;
}
.parallax,.fixed-bg{
    height:100%;
    width:100%;
    margin:0;
    position:absolute;
    left:0;
    top:0;
    z-index:-2;
}
.parallax.no-parallax {
    background-size: cover;
    background-position: 0 0;
}
.fixed-bg{
    background-attachment:fixed;
    background-size:cover;
}
.blackish:before{
    background:#222222;
    content:"";
    height:100%;
    left:0;
    opacity:0.7;
    position:absolute;
    top:0;
    width:100%;
    z-index:-1;
}
.whitish:before{
    background: #f2f2f2;
    opacity: 0.92;
    content:"";
    height:100%;
    left:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:-1;    
}
.blackish h3, .blackish h2, .blackish h1, .blackish h4, .blackish h5, .blackish h6 {
    color: #ffffff;
}
.blackish p {
    color: #c3c3c3;
}


/* Portfolio */
#Grid:after{
    content: '';
    display: inline-block;
    width: 100%;
}

#Grid .mix{
    display: none;
    opacity: 0;
}

#Grid .gap{
    display: inline-block;
}
.controls.portfolio-nav {
    float: left;
    margin-top: 30px;
    text-align: center;
    width: 100%;
}
.controls.portfolio-nav > ul {
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
}
ul.portfolio-sec {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.controls.portfolio-nav > ul > li {
    color: #888;
    cursor: pointer;
    display: inline-flex;
    margin: 0 10px;
    padding-bottom: 12px;
    position: relative;
}
.controls.portfolio-nav > ul > li:before {
    background: none repeat scroll 0 0 #333;
    bottom: 0;
    content: "";
    height: 3px;
    position: absolute;
    right: 0;
    
    -webkit-transition:all 0.4s ease 0s;
    -moz-transition:all 0.4s ease 0s;
    -ms-transition:all 0.4s ease 0s;
    -o-transition:all 0.4s ease 0s;
    transition:all 0.4s ease 0s;
    width: 0;
}
.controls.portfolio-nav > ul > li > i {
    float: left;
    line-height: 27px;
    margin-right: 10px;
}
.controls.portfolio-nav > ul > li.active:before {
    width: 46px;
}


.admin-follow {
    background-image: url("http://placehold.it/329x427");
    background-size: cover;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

    float: left;
    overflow: hidden;
    padding: 47px 30px 47px;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 0;
}
.admin-follow::before {
    background: #fff none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.admin-follow:after{
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );

    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.admin-follow > img {
    border: 3px solid rgba(255, 255, 255, 0.8);
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    display: inline-block;
}
.admin-follow > h3 {
    color: #232323;
    float: left;
    font-size: 16px;
    margin: 20px 0 5px;
    width: 100%;
}
.admin-follow > span {
    color: #626262;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 14px;
    margin-bottom: 20px;
    width: 100%;
}
.admin-follow > a {
    background: #fff none repeat scroll 0 0;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

    color: #6d6d6d;
    display: table;
    font-family: "Microsoft YaHei";
    font-size: 12px;
    margin: 0 auto;
    padding: 12px 27px;
    text-transform: uppercase;
}
.admin-follow > ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 50px 0 0;
    width: 100%;
}
.admin-follow > ul > li {
    display: inline-block;
    float: none;
    padding: 0 20px;
}
.admin-follow > ul > li > i {
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    color: #fff;
    display: inline-block;
    font-size: 14px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    width: 42px;
}
.admin-follow > ul > li > span {
    color: #4d575d;
    display: block;
    font-family: "Microsoft YaHei";
    font-size: 15px;
    margin-top: 10px;
}


/* Our Clients Sec */
.our-clients-sec {
    float: left;
    padding: 40px;
    width: 100%;
}
.filterform > input{
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: #7b7b7b;
    float: left;
    font-size: 12px;
    padding: 9px 20px 9px 25px;
    width: 100%;
}
form.filterform {
    border: 1px solid #dbe0e2;
    
    -webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    -ms-border-radius: 22px;
    -o-border-radius: 22px;
    border-radius: 22px;

    float: left;
    height: 38px;
    margin: 0 0 30px;
    position: relative;
    width: 100%;
}
.client-list {
    list-style: outside none none;
    margin: 0 -20px;
    padding: 0;
}
.client-list > li {
    display: table;
    float: left;
    margin-bottom: 15px;
    padding: 0 20px;
    position: relative;
    width: 100%;
}
.client-info > a {
    color: #cbcbcb;
    font-size: 14px;
    margin-top: -15px;
    position: absolute;
    right: 10px;
    top: 50%;
}
.client-info > h3 {
    float: left;
    margin: 0;
    width: 100%;
}
.client-info > h3 a {
    color: #2e2e2e;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 15px;
    margin: 0;
    width: 100%;
}
.client-list > li > span {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    color: #fff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 21px;
    height: 51px;
    line-height: 50px;
    position: relative;
    text-align: center;
    width: 51px;
}
.client-info {
    display: table-cell;
    padding-left: 15px;
    position: relative;
    vertical-align: middle;
    width: 100%;
}
.user-status::before {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    content: "";
    height: 6px;
    left: 0;
    position: absolute;
    top: 0;
    width: 6px;
}
.user-status.online::before{
    background: #5bdd5e;
}
.user-status.offline::before{
    background: #ff6a7f;
}
.user-status.away::before{
    background: #ffda2b;
}


/* Product Sale */
.product-sale {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
    max-height: 443px;
}
.product-sale > img {
    float: left;
    width: 100%;
}
.product-info {
    bottom: 0;
    left: 0;
    padding: 40px;
    position: absolute;
}
.product-info > h3 {
    color: #ffffff;
    float: left;
    font-family: "Microsoft YaHei";
    font-size: 22px;
    margin: 0 0 7px;
    width: 100%;
}
.product-info > h3 > a {
    color: inherit;
}
.product-info > p {
    color: #e1e1e1;
    float: left;
    width: 100%;
}
.product-info .price {
    color: #ffa2a2;
    float: left;
    font-size: 20px;
    width: 100%;
}
.product-info .price > ins {
    float: left;
    font-family: "Microsoft YaHei";
    font-weight: bold;
    margin-right: 10px;
    text-decoration: none;
}
.product-info .price > ins > i {
    margin-right: 15px;
}
.product-info .price del {
    color: #cdcdcd;
    font-size: 15px;
}
.our-clients-sec .slimScrollDiv {
    float: left;
    width: 100%;
}
.client-list {
    float: left;
    list-style: outside none none;
    margin: 0 -20px;
    padding: 0;
    width: 100%;
}



.slick-slider {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}


.slick-loading .slick-list {
    background: #fff url("./ajax-loader.gif") no-repeat scroll center center;
}

.slick-prev, .slick-next {
    background: #e3e3e3 none repeat scroll 0 0;
    border: medium none;
    
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    color: transparent;
    cursor: pointer;
    display: block;
    font-size: 0;
    height: 40px;
    line-height: 0;
    margin-top: -10px;
    outline: medium none;
    padding: 0;
    position: absolute;
    top: 50%;
    width: 40px;
    z-index: 1;
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
    background: transparent none repeat scroll 0 0;
    color: transparent;
    outline: medium none;
}
.slick-prev:hover::before, .slick-prev:focus::before, .slick-next:hover::before, .slick-next:focus::before {
    opacity: 1;
}
.slick-prev.slick-disabled::before, .slick-next.slick-disabled::before {
    opacity: 0.25;
}
.slick-prev::before, .slick-next::before {
    color: #535353;
    font-family: "Microsoft YaHei";
    font-size: 20px;
    line-height: 1;
    opacity: 0.75;
}
.slick-prev {
    left: 25px;
}
[dir="rtl"] .slick-prev {
    left: auto;
    right: -25px;
}
.slick-prev::before {
    content: "鈫�";
}
[dir="rtl"] .slick-prev::before {
    content: "鈫�";
}
.slick-next {
    right: 25px;
}
[dir="rtl"] .slick-next {
    left: -25px;
    right: auto;
}
.slick-next::before {
    content: "鈫�";
}
[dir="rtl"] .slick-next::before {
    content: "鈫�";
}
.slick-slider {
    margin-bottom: 30px;
}
.slick-dots {
    bottom: -45px;
    display: block;
    list-style: outside none none;
    padding: 0;
    position: absolute;
    text-align: center;
    width: 100%;
}
.slick-dots li {
    cursor: pointer;
    display: inline-block;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    position: relative;
    width: 20px;
}
.slick-dots li button {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    color: transparent;
    cursor: pointer;
    display: block;
    font-size: 0;
    height: 20px;
    line-height: 0;
    outline: medium none;
    padding: 5px;
    width: 20px;
}
.slick-dots li button:hover, .slick-dots li button:focus {
    outline: medium none;
}
.slick-dots li button:hover::before, .slick-dots li button:focus::before {
    opacity: 1;
}
.slick-dots li button::before {
    color: black;
    content: "鈥�";
    font-family: "Microsoft YaHei";
    font-size: 6px;
    height: 20px;
    left: 0;
    line-height: 20px;
    opacity: 0.25;
    position: absolute;
    text-align: center;
    top: 0;
    width: 20px;
}
.slick-dots li.slick-active button::before {
    color: black;
    opacity: 0.75;
}
.slick-slider {
    text-align: center;
}
.slick-slider li {
    padding: 0 30px;
}
.widget-controls > span:hover {
    background: #ededed none repeat scroll 0 0;
    color: #6f6f6f;
}
.responsive-search {
    display: none;
}
.responsive-search > i {
    background: #46495b none repeat scroll 0 0;
    color: #a7a7a7;
    cursor: pointer;
    float: left;
    font-size: 12px;
    height: 35px;
    line-height: 35px;
    margin-top: 4px;
    text-align: center;
    width: 35px;
}
.search-dashboard.active > form {
    opacity: 1;
    display: block;
    visibility: visible;
}
.search-dashboard.active > .responsive-search > i::before {
    content: "x";
    font-family: "Microsoft YaHei";
    font-size: 16px;
    font-weight: bold;
    position: relative;
    top: -1px;
}


.ui-tooltip, .ui-helper-hidden-accessible {
    display: none;
}

body.modal-open header {
    z-index: 1;
}






a.hover-red:hover{
    background: #ed6b75;
    color: #ffffff;
}
a.hover-blue:hover{
    background: #337ab7;
    color: #ffffff;
}
a.hover-green:hover{
    background: #33b7a0;
    color: #ffffff;
}
a.hover-skyblue:hover{
    background: #36c6d3;
    color: #ffffff;
}
.btn.green-bg,
.btn.blue-bg,
.btn.skyblue-bg,
.btn.red-bg {
    color: #ffffff;
}
.skyblue-bg,
.white .progress-bar.skyblue-bg
{background-color: #36c6d3;}

.red-bg,
.white .progress-bar.red-bg,
.pagination li.active a, .pagination li a:hover,
.blog-post-thumb > a,
.theme-btn,
.toggle-switch span::before
{background-color: #ed6b75;}

.pagination li.active a, .pagination li a:hover
{border-color: #ed6b75;}

.blue-bg,
.white .progress-bar.blue-bg
{background-color: #337ab7;}


.dark-bg
{background: #474c60;}
.green-bg,
.white .progress-bar.green-bg,
.dynamic-tags .tagsinput .tag:hover,
.toggle-switch *:checked + span::before
{background-color: #33b7a0;}

.menu-options,
.menu-options *,
.menu-action::after,
.menu-action::before,
.menu-action > i::before,
.side-menus nav > ul > li,
.side-menus nav > ul > li > a,
.side-menu-sec,
.main-content,
.blog *,
.search-dashboard > form,
.quick-notify-section *,
.blog-post *,
.team-box *,
.square-services,
.square-services:before,
.square-services *,
.service-circle,
.service-circle *,
.mini-portfolio,
.mini-portfolio *,
.mini-portfolio::before,
.profile-connect a,
.product-box,
.product-box *,
.product-thumb::before,
.cart-lists > ul > li *,
.gallery-sec .gallery-box,
.gallery-box *,
.close-panel-this,
.widget-controls > span,
.search-dashboard > form *,
.search-dashboard > form{
    
    -webkit-transition:all 0.4s ease 0s;
    -moz-transition:all 0.4s ease 0s;
    -ms-transition:all 0.4s ease 0s;
    -o-transition:all 0.4s ease 0s;
    transition:all 0.4s ease 0s;
}