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

Project:    Dubli 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

===================================================== ***/


/*=============== General Styling ===================*/
@import url('https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');


html, body{
    overflow-x:hidden;
}
body {
    background: #e6e9ee none repeat scroll 0 0;
    color: #505050;
    float: left;
    font-family: Roboto;
    letter-spacing: 0.3px;
    position: relative;
    width: 100%;
}
h1,h2,h3,h4,h5,h6{
    font-family:Montserrat;
    color:#202020;
}
p{
    font-family:Roboto;
    color:#777777;
    line-height:26px;
    font-size:14px;
    letter-spacing:0.3px;
}
ul li ,ul li a,
ol li,ol li a{
    font-family:Roboto;
    color:#666666;
    font-size:16px;
    line-height:26px;
}
a:hover,
a:focus{
    text-decoration:none;
    outline:none;
}
a{
    cursor: pointer;
}

.menu-options {
    background: #e6e9ee none repeat scroll 0 0;
    border-radius: 3px;
    color: #808891;
    cursor: pointer;
    float: left;
    font-size: 18px;
    height: 38px;
    line-height: 25px;
    margin-left: 10px;
    margin-right: 10px;
    left: 0;
    margin-top: 6px;
    position: relative;
    text-align: center;
    transition: all 0.4s ease 0s;
    width: 41px;
}
.menu-action {
    height: 12px;
    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: 14px;
}
.menu-options.active > span {
    margin-left: -7px;
}
.menu-action::after {
    background: #aaa9a9 none repeat scroll 0 0;

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

    bottom: 0;
    content: "";
    height: 2px;
    left: 0;
    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;
    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: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    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%;
}
.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: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    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%;
}

.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);
}
header.side-header.slide-menu {
    left: -280px;
}
.menu-options.active {
    background: #444 none repeat scroll 0 0;

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

    height: 41px;
    margin-left: -50px;
    z-index: 2147483647;
}
.menu-options.active > span::before, .menu-options.active > span::after {
    background: #ffffff none repeat scroll 0 0;
}
.main-content.wide-content {
    padding-left: 0;
}
.top-bar.wide-bar {
    padding-left: 70px;
}
header.side-header {
    background: #ffffff none repeat scroll 0 0;

    -webkit-box-shadow: 0 100px 10px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 100px 10px rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 100px 10px rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 100px 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 100px 10px rgba(0, 0, 0, 0.1);

    height: 100%;
    left: 0;
    padding-bottom: 0;
    position: fixed;
    top: 0;
    width: 280px !important;
    z-index: 2147483646;


    -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;

}

.search-options {
    background: #e6e9ee none repeat scroll 0 0;
    border-radius: 3px;
    color: #808891;
    cursor: pointer;
    float: left;
    font-size: 18px;
    height: 30px;
    line-height: 25px;
    margin-bottom: 10px;
    left: 0;
    position: relative;
    text-align: center;
    transition: all 0.4s ease 0s;
    width: 100%;
}
.search-action {
    height: 12px;
    left: 96%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 14px;
}
.search-action::before {
    background: #aaa9a9 none repeat scroll 0 0;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    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%;
}
.search-action::after {
    background: #aaa9a9 none repeat scroll 0 0;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    bottom: 0;
    content: "";
    height: 2px;
    left: 0;
    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;
    width: 100%;
}
.search-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;
}
.search-action > i::before {
    background: #aaa9a9 none repeat scroll 0 0;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    content: "";
    height: 2px;
    left: 0;
    position: absolute;
    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%;
}

.form-group.passive {
    position: absolute;
    z-index: -1;
    opacity: 0;
    transition: all 0.3s ease 0s;
}

.search-message {
    height: 25px;
    left: 40%;
    position: absolute;
    top: 15%;
}

.table-fixed thead, .table-fixed tbody {
    display: block;
}

.table-fixed tbody {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 480px;
}

.table-fixed td, .table-fixed th {
    width: 250px;
    min-width: 100px;
}

.table-fixed-ekyc thead, .table-fixed-ekyc tbody {
    display: block;
}

.table-fixed-ekyc tbody {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 480px;
}

.logo {
    float: left;
    padding: 22px 40px;
    width: 100%;
}
.logo > a {
    float: left;
    padding-left: 37px;
    position: relative;
    width: 100%;
}
.logo > a > span {
    color: #333333;
    float: left;
    font-family: Montserrat;
    font-size: 24px;
    letter-spacing: -1px;
    width: 100%;
}
.logo > a > i {
    font-size: 29px;
    left: 0;
    position: absolute;
    top: 14px;

    -webkit-transform: rotate(-95deg);
    -moz-transform: rotate(-95deg);
    -ms-transform: rotate(-95deg);
    -o-transform: rotate(-95deg);
    transform: rotate(-95deg);

    color: #ff3f3f;
}
.logo > a p {
    float: left;
    font-size: 12px;
    line-height: 17px;
    margin: 0;
    width: 100%;
}
.admin-action-bar {
    background: #ececec url("") no-repeat scroll 200px top / auto 100%; /*http://placehold.it/79x166*/
    float: left;
    padding: 30px;
    width: 100%;
}
.admin-image {
    display: table-cell;
    vertical-align: top;
}

.admin-image > img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;

    float: left;
}
.admin-action-info {
    display: table-cell;
    padding-left: 20px;
    vertical-align: middle;
}
.admin-action-info > span {
    color: #707070;
    float: left;
    font-family: Roboto;
    font-size: 12px;
}

.admin-action-info h3 {
    float: left;
    font-family: Montserrat;
    font-size: 17px;
    font-weight: bold;
    line-height: 22px;
    margin: 0;
    width: 100%;
}
.admin-action-info > ul {
    float: left;
    list-style: outside none none;
    margin: 10px 0 0;
    padding: 0;
    width: 100%;
}
.admin-action-info li {
    float: left;
    margin-right: 1px;
}
.admin-action-info li 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: #afafaf;
    float: left;
    font-size: 12px;
    height: 29px;
    line-height: 29px;
    text-align: center;
    width: 29px;
}
.admin-action-info li a:hover {
    background: #676767 none repeat scroll 0 0;
    color: #ffffff;
}
nav.side-menus {
    float: left;
    padding: 30px 0 70px;
    width: 100%;
}
.parent-menu {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.parent-menu > li {
    float: left;
    margin: 0 0;
    padding: 0 30px;
    width: 100%;
}
.parent-menu > li > a {
    color: #454545;
    float: left;
    font-family: Montserrat;
    font-size: 16px;
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 8px 0;
    width: 100%;
}
.parent-menu > li > a > i {
    color: #979797;
    float: left;
    font-size: 13px;
    line-height: 25px;
    margin-right: 11px;
}
.parent-menu > li > a span {
    display: block;
    width: 100%;
}
.parent-menu > li.active > a {
    background: #4a4a4a none repeat scroll 0 0;
    color: #ffffff;
    margin-bottom: 15px;
    padding: 8px 20px;
}
.parent-menu > li > a span > i {

    -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: Roboto;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    height: 19px;
    line-height: 19px;
    margin-top: 3px;
    padding: 0 6px;
}
.parent-menu > li > ul {
    display: none;
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0 0 0 25px;
    width: 100%;
}
.parent-menu > li > ul > li {
    float: left;
    margin: 2px 0;
    padding-left: 20px;
    position: relative;
    width: 100%;
}
.parent-menu > li > ul > li::before {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #b8bcbc;

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

    content: "";
    height: 10px;
    left: 0;
    position: absolute;
    top: 10px;
    width: 10px;
}
.parent-menu > li.menu-item-has-children.active {
    background: #f4f4f4 none repeat scroll 0 0;
    margin-bottom: 17px;
    margin-top: 8px;
    padding-bottom: 21px;
    padding-top: 0;
}


/* Scroll bar Styling */
.slimScrollDiv {
    border: 0 solid transparent;
    float: left;
    width: 100% !important;
}
.top-bar {
    background: #ffffff none repeat scroll 0 0;

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

    float: left;
    left: 0;
    padding: 13px 0 13px 280px;
    position: fixed;
    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%;
    z-index: 2147483643;
}
.search-form {
    float: left;
    margin-left: 30px;
    padding: 14px 0;
}
.search-form input {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: #949494;
    float: left;
    font-size: 14px;
    letter-spacing: 0.3px;
}
.search-form button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: #a5a5a5;
    float: left;
    font-size: 15px;
    padding: 0;
}

/* Message Dropdown */
.message-list {
    float: left;
}
.custom-dropdowns {
    float: right;
    padding: 10px 0;
    position: relative;
    z-index: 2147483647;
}
.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: Roboto;
    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: Roboto;
    padding-left: 6px;
    width: auto;
}
.account-form p input {
    float: left;
}
.drop-list {
    background: none repeat scroll 0 0 #ffffff;
    border: 1px solid #e0e0e0;
    display: none;
    margin-top: 22px;
    position: absolute;
    right: 0;
    top: 100%;
    width: 260px;
}
.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: Roboto;
    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: Roboto;
    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: Montserrat;
    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;
}
.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: Roboto;
    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: Roboto;
    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;
}


/* Profile Dropdown */
.dropdown.profile {
    float: right;
    margin-top: 4px;
    padding: 8px;
    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;

    z-index: 2147483647;
}
.dropdown.profile:hover {
    background: none repeat scroll 0 0 #f7f7f7;
}
.dropdown.profile > a {
    border: medium none;
    float: left;
    margin: 0;
    padding: 0;
}
.dropdown.profile > a img {
    float: left;
    margin-right: 15px;
    width: 38px;
}
.dropdown.profile > a {
    border: medium none;
    color: #7f7f7f;
    float: left;
    font-family: Roboto;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.3px;
    line-height: 36px;
    margin: 0;
    padding: 0;
    cursor:pointer;
}
.dropdown.profile > a i {
    margin-left: 13px;
    margin-top: 0;
}
.dropdown-menu {
    border: 1px solid #e0e0e0;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}
.profile.drop-list {
    margin-top: 10px;
    width: 200px;
}
.profile.drop-list > ul > li > a {
    padding: 0;
}
.profile.drop-list > ul > li {
min-height: inherit;
}
.profile.drop-list > ul > li > a i {
    color: #777777;
    float: left;
    font-size: 14px;
    font-weight: normal;
    margin-right: 14px;
    text-align: center;
    width: 30px;
}

.main-content {
    float: left;
    padding: 77px 0 40px 280px;

    -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%;
}
.footer-line {
    color: #a3a3a3;
    float: left;
    line-height: 25px;
    padding: 0 40px;
    width: 100%;
    margin-bottom: 40px;
}
.footer-line a {
    color: blue;
}
.admin-name-hello {
    float: right;
    margin-left: 30px;
    width: 170px;
}
.admin-name-hello > span {

    -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: 15px;
    overflow: hidden;
    width: 50px;
}
.admin-name-hello > span > img {
    float: left;
    width: 100%;
}
.admin-name-hello > i {
    color: #b8b8b8;
    display: block;
    font-family: Montserrat;
    font-size: 11px;
    font-style: normal;
    margin-top: 7px;
    vertical-align: top;
    width: 100%;
}
.admin-name-hello > h3 {
    color: #494949;
    display: block;
    font-family: Montserrat;
    font-size: 13px;
    margin: 4px 0 0;
    text-transform: uppercase;
    width: 100%;
}
.quick-stats {
    float: left;
    margin-top: 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: 100%;
}
.quick-stats > h5 {
    color: #707070;
    float: left;
    font-family: Roboto;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.3px;
    line-height: 22px;
    margin: 0 0 11px;

    -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%;
}
.quick-stats-boxes .row > div > div {
    height: 150px;
}
.quick-stats > ul {
    list-style: outside none none;
    margin: 0 -5px;
    padding: 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;

}
.quick-stats > ul > li {
    float: left;
    padding: 0 1px;

    -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: 33.333%;
}
.quick-stats > ul > li > span {
    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: #818181;
    float: left;
    font-family: Montserrat;
    font-size: 17px;
    padding: 14px 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%;
}
.quick-stats > ul > li > span i {
    color: #aeb2bd;
    float: left;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    letter-spacing: 0.3px;
    line-height: 14px;

    -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-bar-btn {
    background: #444444 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;
    cursor: pointer;
    float: right;
    height: 40px;
    line-height: 40px;
    margin: 4px 30px 4px 10px;
    text-align: center;
    width: 40px;
}
.slide-bar-btn.active {
    background: #8777ff none repeat scroll 0 0;
}

/* Welcome Patti */
.welcome-patti {
    background: #ffffff none repeat scroll 0 0;
    float: left;
    padding: 6px 30px;
    width: 100%;
}
.welcome-patti > span {
    color: #848484;
    float: left;
    font-family: Roboto;
    font-size: 13px;
    line-height: 24px;
}
.welcome-patti > span strong {
    color: #636363;
    font-weight: normal;
}
.breadcrumbs > li > a:hover {
    color: #ff3b3b;
}
.breadcrumbs {
    float: right;
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.breadcrumbs > li {
    display: inline-block;
    padding: 0 13px;
    position: relative;
}
.breadcrumbs > li::before {
    color: #888888;
    content: "/";
    font-size: 11px;
    position: absolute;
    right: -5px;
    top: 0;
}
.breadcrumbs > li:last-child {
    padding-right: 0;
}
.breadcrumbs > li:last-child::before {
    display: none;
}


/* heading Sec */
.heading-sec {
    float: left;
    padding: 30px 30px 0px 50px;
    width: 100%;
}
.heading-profile {
    float: left;
    padding-top: 10px;
    width: 100%;
}
.heading-profile > h2 {
    color: #263238;
    float: left;
    font-family: Montserrat;
    font-size: 20px;
    margin: 0 0 6px;
    width: 100%;
}
.heading-profile > h2 > span {
    color: #ff5f5f;
}
.heading-profile > span {
    color: #747b7f;
    float: left;
    font-family: Roboto;
    font-size: 13px;
    width: 100%;
}

.top-bar-chart {
    float: right;
    padding-top: 12px;
    width: 100%;
}
.quick-report-infos {
    float: left;
    padding-right: 18px;
}
.quick-report {
    display: table;
    float: right;
    padding-left: 50px;
}
.quick-report p {
    color: #7a7979;
    float: left;
    font-family: Roboto;
    font-size: 12px;
    line-height: 11px;
}
.quick-report h3 {
    color: #4c4c4c;
    display: list-item;
    font-family: Montserrat;
    font-size: 19px;
    list-style: outside none none;
    margin: 0;
}
.quick-report > svg {
    float: right;
}

/* Main Content Area */
.main-content-area {
    float: left;
    padding: 0 50px;
    width: 100%;
    max-width: 1200px;
}
.main-content-area2 {
  float: left;
  padding: 0 50px;
  /*width: 100%;*/
  max-width: 1200px;
}
.quick-stats-boxes {
    float: left;
    width: 100%;
}
.quick-stats-boxes > .row {
    margin: 0 -1px;
}
.quick-stats-boxes > .row > div {
    padding: 0 1px;
}
.quick-total-earning {
    background: #ffffff none repeat scroll 0 0;
    float: left;
    margin-top: 2px;
    padding: 33px 33px 33px 90px;
    width: 100%;
}
.quick-total-earning.widget {
    margin-top: 2px;
}
.quick-total-earning > i {

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

    color: #ffffff;
    font-size: 14px;
    height: 40px;
    left: 32px;
    line-height: 40px;
    position: absolute;
    text-align: center;
    top: 33px;
    width: 40px;
}
.quick-total-ern-info {
    float: left;
    width: 100%;
}
.quick-total-ern-info > i {
    color: #777777;
    float: left;
    font-family: Roboto;
    font-size: 11px;
    font-style: normal;
    width: 100%;
}
.quick-total-ern-info > h5 {
    color: #444444;
    float: left;
    font-family: Montserrat;
    font-size: 20px;
    margin: 5px 0 0;
    width: 100%;
}
.quick-total-ern-info > .progress {
    background: #dde4ef none repeat scroll 0 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: 12px 0 0;
    width: 100%;
}
.quick-total-ern-info > .progress > .progress-bar {

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

}
.quick-total-ern-info > span {
    color: #777777;
    float: left;
    font-family: Roboto;
    font-size: 11px;
    margin-top: 10px;
    width: 100%;
}

/* Quick Order Box */
.quick-order-box {
    background: #404040 none repeat scroll 0 0;
    float: left;
    margin-top: 2px;
    padding: 30px 35px 0;
    position: relative;
    text-align: center;
    width: 100%;
}
.this-stats {
    background: #fafafa 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: #6c6969;
    font-family: Roboto;
    font-size: 10px;
    padding: 2px 7px;
    position: absolute;
    right: 15px;
    top: 15px;
}
.this-stats > i {
    float: right;
    margin-left: 4px;
    margin-top: 5px;
}
.quick-order-box > h3 {
    color: #fff;
    float: left;
    font-size: 20px;
    margin: 0 0 4px;
    text-align: left;
    width: 100%;
}
.quick-order-box > i {
    color: #d0d0d0;
    float: left;
    font-family: Roboto;
    font-size: 11px;
    font-style: normal;
    width: 100%;
    text-align: left;
}
.quick-order-box > .peity {
    display: inline-block;
    margin: 29px 0 -5px;
}

/* Quick Visitor Box */
.quick-visitor-text {
    float: left;
    margin-left: 35px;
    margin-top: 26px;
    padding-right: 20px;
}
.quick-visitor-text > i {
    color: #9f9f9f;
    float: left;
    font-size: 11px;
    font-style: normal;
}
.quick-visitor-text > span {
    color: #818181;
    display: table;
    font-family: Montserrat;
    font-size: 20px;
    line-height: 26px;
}
.quick-visitor-box {
    background: #ffffff none repeat scroll 0 0;
    float: left;
    overflow: hidden;
    width: 100%;
}
.quick-visitor-text.total {
    margin-left: 0;
}
.quick-visitor-box svg {
    float: left;
    margin-bottom: -1px;
    margin-top: 25px;
    width: 100%;
}

/* Quick Realtime Box */
.quick-realtime-box {
    background: #404040 none repeat scroll 0 0;
    float: left;
    padding: 30px;
    position: relative;
    width: 100%;
}
.realtime-difference {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 20px;
    top: 14px;
}
.realtime-difference > li {
    color: #cccccc;
    float: left;
    font-family: Roboto;
    font-size: 11px;
    padding-left: 15px;
}
.realtime-difference > li > i {

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

    float: left;
    height: 7px;
    margin-right: 6px;
    margin-top: 10px;
    width: 7px;
}
.realtime-difference > li > i.returning{
    background-color: #07bf29;
}
.realtime-difference > li > i.new{
    background-color: #ffffff;
}
.quick-realtime > h3 {
    color: #ffffff;
    float: left;
    font-family: Montserrat;
    font-size: 30px;
    margin: 10px 0 0;
    width: 100%;
}
.quick-realtime > i {
    color: #d3d3d3;
    float: left;
    font-family: Roboto;
    font-size: 11px;
    font-style: normal;
    margin-top: 4px;
    width: 100%;
}
.quick-realtime > .progress {

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

    float: left;
    height: 4px;
    margin: 19px 0 6px;
    width: 100%;
}
.quick-realtime > .progress > .progress-bar {

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

}

/* Widget Control */
.widget-controls {
    padding-right: 15px;
    padding-top: 13px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}
.widget-controls > span {
    color: #b8b8b8;
    cursor: pointer;
    float: right;
    font-size: 13px;
    line-height: 14px;
    margin-left: 8px;
}
.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;
    visibility: hidden;
}
.widget {
    background: #ffffff none repeat scroll 0 0;
    float: left;
    margin-top: 25px;
    position: relative;
    width: 100%;

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

}
.widget.with-padding {
    padding: 40px 50px;
}
.widget.no-color {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;

    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}
.total-sales-sec {
    float: left;
    width: 100%;
}
.widget.loading-wait::before {
    opacity: 0.8;
    visibility: visible;
}
.widget.expand-this {
    height: 100%;
    left: 0;
    margin: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2147483647;
}
.widget-title {
    float: left;
    margin-top: 30px;
    padding: 0 40px;
    width: 100%;
}
.widget-title > h3 {
    color: #232323;
    float: left;
    font-family: Montserrat;
    font-size: 18px;
    margin: 0;
    width: 100%;
}

.earning-graph .full-width {
    text-align: center;
}
.earning-graph .full-width > .peity {
    margin: 20px 0;
}
.statistic-chart {
    float: left;
    padding: 0 50px 38px;
    width: 100%;
}

.graph-container {
    float: left;
    margin-top: 20px;
    width: 100%;
}
.graph-container > canvas {
    float: left;
    width: 100% ;
}
.upper-chart-detail {
    float: left;
    margin-top: 30px;
    width: 100%;
    padding-left: 20px;
}
.upper-chart-detail > span {
    color: #909090;
    float: left;
    font-family: Roboto;
    font-size: 13px;
    margin-right: 20px;
}
.upper-chart-detail > span > strong {
    color: #6b6b6b;
    float: left;
    font-family: Montserrat;
    font-size: 29px;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 9px;
    margin-right: 11px;
}
.upper-chart-detail > ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.upper-chart-detail > ul > li {
    color: #777777;
    float: left;
    font-family: Roboto;
    font-size: 13px;
    line-height: 18px;
    margin-left: 10px;
    margin-right: 19px;
}
.upper-chart-detail > ul > li span{
    color: #ff3f3f;
}

/* Earning Widget */
.widget.no-padding {
    padding: 0;
}
.full-width {
    margin: 0 -40px;
}
#ticker {
    float: left;
    height: 60px !important;
    width: 100%;
}
#ticker li {
    list-style:none;
}
.earning-widget {
    float: left;
    padding: 35px 40px 0;
    width: 100%;
}
.earning-graph {
    float: left;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.earning-graph > h3 {
    float: left;
    font-family: Roboto;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 18px;
    margin: 0;
    position: relative;
    width: 100%;
}
.earning-graph > span {
    background: none repeat scroll 0 0 #f8f8f8;
    border: 3px solid #eae9e9;

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

    color: #6c6c6c;
    font-family: Roboto;
    font-size: 12px;
    letter-spacing: 0.3px;
    padding: 5px 16px;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    top: 0;
}
.earning-graph #flot-1ine {
    float: left;
    margin-top: 20px;
    width: 100%;
}
.earning-graph > h3 > i {
    color: #777777;
    float: left;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    margin-top: 5px;
    width: 100%;
}
.earning-status {
    background: none repeat scroll 0 0 #f6f6f6;
    float: left;
    margin-top: 20px;
    padding: 30px 0;
    width: 100%;
}
.earning-status > ul {
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.earning-status > ul > li {
    float: left;
    position: relative;
    width: 33.3333%;
}
.earning-status > ul > li:before {
    background: none repeat scroll 0 0 #e1e1e1;
    content: "";
    height: 24px;
    margin-top: -12px;
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
}
.earning-status > ul > li:last-child:before {
    display: none;
}
.earning-status span {
    color: #777777;
    float: left;
    font-family: Roboto;
    font-size: 13px;
    letter-spacing: 0.3px;
    text-align: center;
    width: 100%;
}
.earning-status h4 {
    color: #333333;
    float: left;
    font-family: Roboto;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.3px;
    line-height: 21px;
    margin: 3px 0 -4px;
    text-align: center;
    width: 100%;
}

/* Quick Stats */
.mini-stats-sec {
    float: left;
    padding: 11px 60px 22px;
    width: 100%;
}

.quick-stats {
    float: left;
    text-align: center;
    width: 100%;
}
.quick-stats > .peity {
    float: left;
    width: 100%;
}
.quick-stats > h4 {
    color: #444444;
    float: left;
    font-family: Roboto;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin: 16px 0 7px;
    width: 100%;
}
.quick-stats > p {
    float: left;
    line-height: 10px;
    margin: 1px 0 12px;
    width: 100%;
}

/* Support Ticket */
.support-ticket {
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
}
.support-ticket > li {
    border-bottom: 1px solid #e8ecec;
    float: left;
    padding: 20px 0;
    width: 100%;
}
.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: ROBOTO;
    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: Roboto;
    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: Montserrat;
    font-size: 14px;
    letter-spacing: 0.3px;
    line-height: 43px;
    width: 100%;
}
.ticket-info > a {
    color: #333;
    float: left;
    font-family: Roboto;
    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: Roboto;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.3px;
    margin: 5px 0 0;
    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: Roboto;
    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%;
}
.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: Montserrat;
    font-size: 14px;
    margin: 0;
    width: 100%;
}
.user-comments > li h3 i {
    color: #777777;
    font-family: Roboto;
    font-size: 11px;
    font-weight: normal;
}
.user-comments > li h3 a {
    color: #000000;
    font-family: Roboto;
    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: Roboto;
    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: Montserrat;
    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: Roboto;
    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: Roboto;
    font-size: 13px;
    letter-spacing: 0.3px;
    margin: 0;
    width: 100%;
}
.forum-threads > li h3 i {
    color: #777777;
    font-family: Roboto;
    font-size: 12px;
    font-weight: normal;
}
.forum-threads > li h3 a {
    color: #ff5050;
    font-family: Roboto;
    font-size: 13px;
    font-weight: normal;
}

.widget-content {
    float: left;
    padding: 30px 40px 60px;
    width: 100%;
}


.visitor-country {
    display: table;
    float: left;
    width: 100%;
}
.visitor-country-list {
    display: table-cell;
    padding: 40px;
    vertical-align: middle;
    width: 100%;
}
.map-table {
    float: left;
    margin-top: -2px;
    width: 100%;
}
.map-table > h3 {
    color: #666666;
    float: left;
    font-family: Montserrat;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.2px;
    margin: 0;
    padding: 8px 0 8px 30px;
    text-align: left;
    width: 50%;
}
.map-table > h4 {
    color: #464646;
    float: right;
    font-family: Montserrat;
    font-size: 15px;
    letter-spacing: 0.2px;
    margin: 0;
    padding: 8px 0 8px 30px;
    text-align: left;
    width: 50%;
}
.map-table > ul {
    float: left;
    margin: 0;
    padding: 0;
    width: 100%;
}
.map-table li:nth-child(2n+1) {
    background: #f6f6f6 none repeat scroll 0 0;
}
.map-table li {
    float: left;
    list-style: outside none none;
    padding: 5px 0;
    width: 100%;
}
.map-table span {
    color: #555555;
    float: left;
    font-family: Roboto;
    font-size: 13px;
    letter-spacing: 0.3px;
    padding-left: 30px;
    text-align: left;
    width: 50%;
}
.map-table i {
    color: #444444;
    float: left;
    font-family: Roboto;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    padding-left: 30px;
    text-align: left;
    width: 50%;
}

#vmap {
    background-color: red;
    float: left;
    height: 280px;
    margin: 43px 0;
    width: 570px;
}

/* Setup basic CSS for Label */
.jqvmap_pin {
    font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
    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;
    }
}



/* Loader */
.loader {
    animation: 0.3s linear 0s normal none infinite running load8;
    border-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.2) #8777ff;
    border-style: solid;
    border-width: 2px;
    font-size: 10px;
    position: fixed;
    left: 10px;
    text-indent: -9999em;
    top: 10px;

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

}
.loader, .loader::after {

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    height: 20px;
    width: 20px;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#progressBar {
    position: fixed;
    z-index: 2147483647;
    top: 0;
    left: 0;
    width: 10%;
    height: 2px;
    background: #8777ff;

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

    -moz-transition: width 500ms ease-out,opacity 400ms linear;
    -ms-transition: width 500ms ease-out,opacity 400ms linear;
    -o-transition: width 500ms ease-out,opacity 400ms linear;
    -webkit-transition: width 500ms ease-out,opacity 400ms linear;
    transition: width 500ms ease-out,opacity 400ms linear;
}
#progressBar:before {
    position: absolute;
    content: '';
    top: 0;
    opacity: 1;
    width: 10%;
    right: 0px;
    height: 2px;

    -webkit-box-shadow: #8777ff 1px 0 6px 2px;
    -moz-box-shadow: #8777ff 1px 0 6px 2px;
    -ms-box-shadow: #8777ff 1px 0 6px 2px;
    -o-box-shadow: #8777ff 1px 0 6px 2px;
    box-shadow: #8777ff 1px 0 6px 2px;


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

#progress {
    position: fixed;
    z-index: 2147483647;
    top: 0;
    left: -6px;
    width: 1%;
    height: 2px;
    background: #8777ff;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    -moz-transition: width 500ms ease-out,opacity 400ms linear;
    -ms-transition: width 500ms ease-out,opacity 400ms linear;
    -o-transition: width 500ms ease-out,opacity 400ms linear;
    -webkit-transition: width 500ms ease-out,opacity 400ms linear;
    transition: width 500ms ease-out,opacity 400ms linear;
}

.widget.no-margin {
    margin: 0;
}
.widget.no-margin.weather-widget {
    margin-top: 2px;
}
.weather-widget {
    background-image: url("http://placehold.it/700x467");
    float: left;
    min-height: 300px;
    text-align: center;
    width: 100%;
    z-index: 0;
}
.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: Montserrat;
    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: Montserrat;
    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: Roboto;
    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%;
}
.weather-widget .widget-controls > span {
    color: #ffffff;
}



/* 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 .peity {
    left: 40px;
    position: absolute;
    top: 30px;
}
.task-graph-chart > i {
    border-bottom: 1px solid #e8ecec;
    color: #555555;
    float: left;
    font-family: Roboto;
    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: Roboto;
    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: Roboto;
    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: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    margin-top: 3px;
    width: 100%;
}

/* Social Activity */
.social-activities {
    float: left;
    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: 25px;
    padding-left: 50px;
    position: relative;
    width: 50%;
}
.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: Roboto;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    margin: 0;
    width: 100%;
}
.social-activities span {
    color: #777777;
    float: left;
    font-family: Roboto;
    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: Roboto;
    font-size: 12px;
    letter-spacing: 0.3px;
    margin: 0 auto;
    padding: 7px 24px;
}

/* Twitter Widget */
.twitter-widget {
    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: Roboto;
    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: Roboto;
    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: Roboto;
    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: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    margin-top: 3px;
    width: 100%;
}

.jcider-nav {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 100%;
  color: white;
  font-size: 30px;
}
/*Both right and left nav arrows*/
.jcider-nav span {
  text-align: center;
  cursor: pointer;
  position: absolute;
  font-size: 50px;
  color: white;
  transition: all 300ms;
  line-height: 1;
}

.jcider-nav span.disabled {
  pointer-events: none;
  color: rgba(255,255,255,0.2);
}

 /*Left nav arrow*/
.jcider-nav .jcider-nav-left {
  left: 5px;
}
/*Right nav arrow*/
.jcider-nav .jcider-nav-right {
  right: 5px;
}

/*Pagination container can be styled by '.jcider-pagination'*/
.jcider-pagination {
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 50%;

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

}

/*Styling for pagination points*/
.jcider-pagination-point {
  position: relative;
  background: none;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
  margin: 8px;
  display: inline-block;
  width: 8px;
  height: 8px;
  cursor: pointer;
  background: rgba(255,255,255,0.5);
  transition: all 300ms;
}
 /*Styling for active pagination point*/
.jcider-pagination-point.active {
  background: white;
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
}


.carousal-widget > ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.carousal-widget > ul > li {
    float: left;
    padding: 60px 70px;
    text-align: left;
    width: 100%;
}
.carousal-widget {
    background-image: url("http://placehold.it/504x292");
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
    min-height: 346px;
    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: Roboto;
    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: Roboto;
    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: Roboto;
    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: Roboto;
    font-size: 12px;
    margin-right: 15px;
    margin-top: 10px;
}

/* Status Upload Widget */
.status-upload {
    background: none repeat scroll 0 0 #f5f5f5;
    float: left;
    width: 100%;
}
.status-upload form {
    float: left;
    margin: 0;
    width: 100%;
}
.status-upload form textarea {
    background: #fff none repeat scroll 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: #000000;
    float: left;
    font-family: Roboto;
    font-size: 14px;
    font-weight: normal;
    height: 142px;
    letter-spacing: 0.3px;
    padding: 30px;
    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: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

    color: #777777;
    cursor: pointer;
    float: left;
    font-size: 14px;
    height: 30px;
    line-height: 33px;
    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;
}
.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: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;

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


/* My Profile Widget */
.my-profile-widget {
    float: left;
    width: 100%;
    text-align:center;
}
.profile-widget-head {
    float: left;
    padding: 30px 0 55px;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 0;
    margin-bottom: 50px;
}
.profile-widget-head:before {
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.profile-widget-head > h3 {
    color: #fff;
    float: left;
    font-family: Roboto;
    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: Roboto;
    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: Roboto;
    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: Roboto;
    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: Roboto;
    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: roboto;
    font-size: 18px;
    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: Roboto;
    font-size: 13px;
    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 {
    -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: Roboto;
    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: Roboto;
    font-size: 15px;
    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;
}


.server-status {
    float: left;
    width: 100%;
}
.server {
    float: left;
    padding: 37px 50px;
    width: 100%;
}
.server > .btn-group {
    float: right;
}
.server > span {
    color: #fff;
    float: left;
    font-family: Roboto;
    font-size: 13px;
    letter-spacing: 0.3px;
    margin-right: 20px;
    margin-top: 8px;
}
.server > span > i {
    float: left;
    height: 14px;
    margin-right: 10px;
    margin-top: 2px;
    width: 14px;
}
.server > span.server1 > i {
 background:#363b46;
}
.server > span.server2 > i {
 background:#fafafa;
}
.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: Arial, sans-serif;

    -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: Arial, sans-serif;
    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: Arial, sans-serif;
    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: Arial;
    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;

}

/* Balance Widget */
.balance-widget {
    float: left;
    position: relative;
    width: 100%;
}
.example-space > .row > div {
    float: left;
    margin-bottom: 20px;
    text-align: center;
    width: 16%;
}
.balance-widget > .peity {
    left: 30px;
    position: absolute;
    top: 40px;
}
.balance-widget {
    float: left;
    padding: 40px 50px 40px 115px;
    position: relative;
    width: 100%;
}
.balance-widget > h3 {
    color: #333333;
    float: left;
    font-family: Roboto;
    font-size: 15px;
    letter-spacing: 0.3px;
    margin: 0 0 -3px;
    width: 100%;
}
.balance-widget > h2 {
    color: #555555;
    float: left;
    font-family: ROBOTO;
    font-size: 19px;
    font-weight: bold;
    letter-spacing: 0.3px;
    margin: 0;
    width: 100%;
}
.balance-widget > h2 > i {
    color: #777777;
    float: left;
    font-family: Roboto;
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    margin-bottom: 11px;
    margin-top: 12px;
    width: 100%;
}
.balance-widget .progress {
    margin-top: 40px;
}

.progress.w-tooltip .progress-bar > i {
    color: #777;
    float: left;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    line-height: 10px;
    margin-top: -19px;
}
.poptrox-overlay {
    z-index: 2147483647 !important;
}
.progress.w-tooltip {
    background: none repeat scroll 0 0 #ffffff;

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

    float: left;
    height: 8px;
    margin: 0;
    overflow: visible;
    width: 100%;

    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}
.progress.w-tooltip > .progress-bar {
    -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;

    position: relative;
}
.progress.w-tooltip > .progress-bar span {
    background: none repeat scroll 0 0 #ffffff;

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

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

/* 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: Roboto;
    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: Roboto;
    font-size: 14px;
    padding: 11px 24px;
}
.save-draft > form > textarea {
    min-height: 128px;
}


/* Mini Profile Widget */
.mini-profile-widget {
    float: left;
    width: 100%;
    background:#13171e;
    padding: 25px 30px;
}
.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: #fff;
    float: left;
    font-family: Roboto;
    font-size: 16px;
    letter-spacing: 0.3px;
    margin: 20px 0 0;
    width: 100%;
    font-weight:600;
}
.mini-profile-area > i {
    float: left;
    font-family: Roboto;
    font-size: 13px;
    font-style: normal;
    letter-spacing: 0.3px;
    margin-top: 5px;
    width: 100%;
    color:#ff4141;
}
.mini-profile-widget > p {
    color: #ddd;
    float: left;
    margin-bottom: 5px;
    margin-top: 25px;
}

.widget.blank {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;

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

}


.social-widget {

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

    float: left;
    overflow: hidden;
    width: 100%;
}
.social-widget > span {
    float: left;
    font-size: 28px;
    height: 108px;
    line-height: 108px;
    text-align: center;
    width: 100%;
}
.social-widget > span#fb {
    background: #3b5998 none repeat scroll 0 0;
    color: #3b5998;
}
.social-widget > span#twitter {
    background: #48a4dc none repeat scroll 0 0;
    color: #48a4dc;
}
.social-widget > span > i {
    background: #fff none repeat scroll 0 0;

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

    height: 60px;
    line-height: 60px;
    width: 60px;
}
.social-widget > ul {
    background: #fff none repeat scroll 0 0;
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}
.social-widget > ul > li {
    float: left;
    list-style: outside none none;
    position: relative;
    text-align: center;
    width: 50%;
}
.social-widget > ul > li {
    float: left;
    list-style: outside none none;
    padding: 17px 0;
    position: relative;
    text-align: center;
    width: 50%;
}
.social-widget > ul > li:first-child::before {
    background: #e8ecec none repeat scroll 0 0;
    content: "";
    height: 30px;
    margin-top: -15px;
    position: absolute;
    right: 0;
    top: 50%;
    width: 1px;
}
.social-widget > ul::before {
    border-bottom: 9px solid #fff;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    content: "";
    left: 50%;
    margin-left: -9px;
    position: absolute;
    top: -8px;
}
.social-widget li > p > i {
    color: #777777;
    float: left;
    font-family: Roboto;
    font-size: 13px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: 0.3px;
    line-height: 24px;
    text-align: center;
    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: Roboto;
    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: Roboto;
    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: Roboto;
    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: Roboto;
    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);
}

/* Side Panel */
.slide-panel {
    background: none repeat scroll 0 0 #222222;
    height: 100%;
    position: fixed;
    left: -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 !important;
    z-index: 999999999999999999;
}
.slide-panel.active {
    left: 0;
}
.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 #14171b;
    border: medium none;

    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;

    color: #ffffff !important;
    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: Roboto;
    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 #222222;
    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 #2b2e33;
    float: left;
    padding: 20px;
    width: 100%;
    margin:0;
}
.recent-mails-widget .filterform {
    background: none repeat scroll 0 0 #121212;
    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: #cfcfcf;
    float: left;
    font-family: Roboto;
    font-size: 13px;
    margin: 0;
    padding: 0;
    width: 100%;
}

.recent-mails-widget .filterform:before {
    color: #626262;
    content: "";
    font-family: fontawesome;
    position: absolute;
    right: 10px;
    top: 10px;
}
.recent-mails-widget > h3 {
    color: #757575;
    float: left;
    font-family: Roboto;
    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 #2b2e33;
    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: #fff;
    float: left;
    font-family: Roboto;
    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: #fff;
}
.mail-list > li > .title > h3 span {
    color: #9a9ea9;
    float: left;
    font-family: Roboto;
    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: #f4f4f4;
    float: left;
    font-family: Roboto;
    font-size: 13px;
    font-weight: bold;
    margin: 18px 0 8px;
    width: 100%;
}
.mail-list > li > p {
    color: #babec9;
    font-size: 12px;
    line-height: 19px;
    margin-top: 5px;
}
.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: Montserrat;
    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: #404349 none repeat scroll 0 0;
    color: #e5e5e5;
    cursor: pointer;
    float: left;
    font-family: Montserrat;
    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: #ececec;
    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: #9a9ea9;
    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: #ececec;
    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: #858585;
    float: left;
    font-family: Roboto;
    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: #fff;
    float: left;
    font-family: Roboto;
    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 #404349;

    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 0.125em;
    width: 60px;
}
.toggle-switch input {
    position: absolute;
    visibility: hidden;
}
.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: Roboto;
    font-size: 10px;
    padding: 2px 0;
    width: 50%;
}

/* Checked state */
.toggle-switch :checked + span:before {
content: attr(data-checked);
}


/* Mail Area */
.mail-area {
    float: left;
    margin-top: 30px;
    width: 100%;
}
.inbox-nav {
    background: none repeat scroll 0 0 #fff;
    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: Montserrat;
    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: Roboto;
    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 {
    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: Montserrat;
    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: Roboto;
    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: Roboto;
    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: Montserrat;
    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: Roboto;
    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: Roboto;
    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: Roboto;
    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: Roboto;
    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;
}
.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: Roboto;
    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 !important;
}
.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: Montserrat;
    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: Roboto;
    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: Roboto;
    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: Roboto;
    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;
}

/* 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: Roboto;
    font-size: 13px;
    letter-spacing: 0.3px;
    margin-bottom: 10px;
    padding: 9px 30px;
    width: 100%;
}
.your-emails {
    height: 636px !important;
    overflow: auto;
    padding: 0 !important;
    width: 100% !important;
}
.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: Roboto;
    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 {
    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;
    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: Montserrat;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 10px 16px;
    text-transform: uppercase;
}


.fontawesome-icon-list a {
    border-bottom: 1px dashed #d9d9d9;
    color: #333333;
    float: left;
    font-family: Roboto;
    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: Roboto;
    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: Roboto;
    font-size: 13px;
    height: auto;
    letter-spacing: 0.3px;
    width: auto;
}
.icons-container {
    margin-top: 20px;
}
#icons {
    float: left;
    padding: 0 60px 60px;
    width: 100%;
}
.themify-icons-list {
    float: left;
    padding: 60px 40px;
    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:roboto;
  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: Roboto;
    font-size: 15px;
    letter-spacing: 0.06em;
    margin-top: 45px;
    position: absolute;
    text-shadow: none;
    top: 0;
    width: 100%;
}
.doughnutSummaryNumber {
    color: #333333;
    font-family: Roboto;
    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: -30px;
    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: 20px;
    width: 100%;
}
.blog-info > a {
    color: #9f9f9f;
    float: left;
    font-family: Montserrat;
    font-size: 15px;
    margin-bottom: 20px;
    margin-top: 10px;
    width: 100%;
}
.blog-info > h2 {
    color: #333333;
    float: left;
    font-family: Montserrat;
    font-size: 25px;
    line-height: 37px;
    margin: 0 0 11px;
    width: 100%;
}
.blog-info > h2 a{
    color: inherit;
}
.blog-info > p {
    float: left;
    font-size: 16px;
    margin: 0;
    padding-right: 110px;
    width: 100%;
}
.blog-info > p a{
    color: #000000;
}
.blog-single .blog .blog-info p a {
    color: #ff3b3b;
}
blockquote span a{
    color: #ff3b3b;
}
.post-gallery {
    float: left;
    width: 100%;
}
.post-gallery > .row {
    margin: 0 -3px;
}
.post-gallery > .row > div {
    padding: 0 3px;
}
.post-gallery > .row > div img {
    float: left;
    width: 100%;
}
.comment-form form .theme-btn {
    background: #444444 none repeat scroll 0 0;
    border: medium none;
    color: #fff;
    float: left;
    font-family: Montserrat;
    padding: 18px 40px;
}
.pagination {

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

    float: left;
    margin: 5px 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: Montserrat;
    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 {
    background: #ff3b3b none repeat scroll 0 0;
    color: #ffffff;
    border-color: #ff3b3b;
}
.pagination li .delimeter {
  display: block;
  padding-top: 6px;
}
.pagination li 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: Roboto;
    padding: 3px 13px;
    text-decoration: none;
}
.pagination-sec .pagination {
    margin-top: 30px;
}

blockquote {
    background-image: url("../images/blockquote.jpg");
    background-size: cover;
    border: medium none;
    float: left;
    margin: 0 0 30px;
    padding: 50px 190px;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 0;
}
blockquote::before {
    background: #242424 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.96;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
blockquote p {
    color: #ffffff;
    float: left;
    font-family: Roboto;
    font-size: 19px;
    font-style: italic;
    font-weight: 600;
    line-height: 34px;
    width: 100%;
}
blockquote span {
    color: #eeeeee;
    display: inline-block;
    font-family: Roboto;
    font-size: 13px;
    font-weight: 500;
}
blockquote span a {
    font-family: Montserrat;
}

.post-tags {
    float: left;
    margin-top: 40px;
    width: 100%;
}
.post-tags > span {
    color: #848484;
    float: left;
    font-family: Roboto;
    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: Roboto;
    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;
}
.blog-single .blog .blog-info blockquote {
    margin: 30px 0;
}


blockquote {
    background-image: url("../images/blockquote.jpg");
    background-size: cover;
    border: medium none;
    float: left;
    margin: 0 0 30px;
    padding: 50px 190px;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 0;
}
blockquote::before {
    background: #242424 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.96;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
blockquote p {
    color: #ffffff;
    float: left;
    font-family: Roboto;
    font-size: 19px;
    font-style: italic;
    font-weight: 600;
    line-height: 34px;
    width: 100%;
}
blockquote span {
    color: #eeeeee;
    display: inline-block;
    font-family: Roboto;
    font-size: 13px;
    font-weight: 500;
}
blockquote span a {
    font-family: Montserrat;
}

.post-tags {
    float: left;
    margin-top: 40px;
    width: 100%;
}
.post-tags > span {
    color: #848484;
    float: left;
    font-family: Roboto;
    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: Roboto;
    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;
}
.blog-single .blog .blog-info blockquote {
    margin: 30px 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: montserrat;
    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: 50px;
    width: 100%;
}
.heading3 > h3 {
    color: #1a1a1a;
    float: left;
    font-family: Montserrat;
    font-size: 28px;
    font-weight: bold;
    margin: 0 0 11px;
    width: 100%;
}
.heading3 > span {
    color: #979797;
    float: left;
    font-family: Roboto;
    font-size: 13px;
    width: 100%;
}


/* Error 404 */
.error-sec {
    float: left;
    text-align: center;
    width: 100%;
}
.error-sec > i {
    float: left;
    font-size: 103px;
    width: 100%;
    color: #ff3b3b;
}
.error-sec h2 {
    color: #585757;
    float: left;
    font-family: Montserrat;
    font-size: 252px;
    font-weight: bold;
    letter-spacing: -20px;
    margin: 0;
    width: 100%;
}
.error-sec > span {
    color: #9b9b9b;
    float: left;
    font-family: Montserrat;
    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: #ff3b3b;
    color: #ff3b3b;
}
.error-btn > li.fill > a {
    background: #ff3b3b none repeat scroll 0 0;
    border-color: #ff3b3b;
}
.error-btn > li > a {
    border: 3px solid;
    float: left;
    font-family: Montserrat;
    font-size: 14px;
    font-weight: bold;
    padding: 9px 0;
    width: 150px;
}
.error-btn > li.fill > a {
    color: #ffffff;
}

.google-map {
    float: left;
    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;
    visibility: hidden;
}

.info-title {
    float: left;
    margin-bottom: 40px;
    text-align: center;
    width: 100%;
}
.info-title > span {
    color: #ff3b3b;
    float: left;
    font-family: Montserrat;
    font-size: 15px;
    letter-spacing: 0.3px;
    margin-bottom: 12px;
    width: 100%;
}
.info-title > h3 {
    float: left;
    font-family: Montserrat;
    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: #ff3b3b none repeat scroll 0 0;
    border: medium none;
    color: #fff;
    float: left;
    font-family: Montserrat;
    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: Roboto;
    font-size: 15px;
    line-height: 31px;
    margin: 4px 0;
    width: 50%;
    text-align: left;
}
.contact-info-list > ul > li i {
    margin-right: 12px;
    color: #ff3b3b;
}
.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;
    visibility: visible;
}
.view-location:hover {
    background: #ff3b3b 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: Montserrat;
    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: Montserrat;
    font-size: 12px;
    margin: 7px;
    opacity: 0;
    padding: 16px 28px;
    position: absolute;
    right: 0;
    top: 0px;
    visibility: hidden;
    z-index: 9;
    background-color: #ff3b3b;
}
.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: Montserrat;
    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: #ff3b3b 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: Montserrat;
    font-size: 17px;
    margin-bottom: 7px;
    width: 100%;
}
.contact-infos > ul > li > span > i {
    color: #ff3b3b;
    margin-right: 9px;
}


.subscribe-us {
    float: left;
    width: 100%;
}
.subscribe-us > span {
    float: left;
    font-family: Roboto;
    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: Roboto;
    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: Montserrat;
    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%;
}
#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: Roboto;
    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: Montserrat;
    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: Roboto;
    font-size: 13px;
    list-style: none outside none;
    width: 100%;
    font-size: 12px;
}
.invoice-details li {
    color: #555555;
    float: left;
    font-family: Roboto;
    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: Montserrat;
    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: Roboto;
    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 !important;
    text-align: left !important;
}
.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: Montserrat;
    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;
}

.search-result {
    float: left;
    margin-bottom: 50px;
    width: 100%;
}
.search-result h3 {
    color: #222222;
    float: left;
    font-family: Montserrat;
    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: #ff3b3b 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;
    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: Roboto;
    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;
}

/* Account sec */
.account-sec {
    display: table;
    float: none;
    margin: 100px auto 0;
    text-align: center;
    width: 420px;
}
.account-sec h1 {
    color: #ffffff;
    float: left;
    font-family: ROboto;
    font-size: 42px;
    font-weight: bold;
    letter-spacing: 0.3px;
    margin: 0 0 50px;
    text-align: center;
    width: 100%;
}
.account-form {
    float: left;
    width: 100%;
}
.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-weight: 900;
    margin: 17px 0 14px;
    padding-bottom: 15px;
    position: relative;
    width: 100%;
}
.user-lock-avatar > i {
    color: #777777;
    float: left;
    font-family: Roboto;
    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 !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;

    float: left;
    font-family: Roboto;
    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: Roboto;
    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: Roboto;
    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: Roboto;
    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: Roboto;
    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: Roboto;
    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: Roboto;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.3px;
    margin-left: 10px;
    margin-right: 30px;
    text-transform: uppercase;
}
.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;
}
.account-sec > .logo {
    display: inline-block;
    float: none;
    text-align: left;
    width: auto;
}
.your-age .custom-dropdown {
    float: left;
    margin: 20px 20px 20px 0;
}
.account-sec::before {
    background: rgba(0, 0, 0, 0.03) none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
/* Our team */
.team-sec {
    float: left;
    margin-top: -30px;
    width: 100%;
}
.team-box {
    float: left;
    margin-top: 30px;
    overflow: hidden;
    position: relative;
    width: 100%;
}
.team-box > img {
    float: left;
    width: 100%;
}
.team-info {
    background: #ffffff none repeat scroll 0 0;
    top: 100%;
    position: absolute;
    text-align: center;
    width: 100%;
}
.team-info > i.fa {
    background: #ff3b3b  none repeat scroll 0 0;
    color: #ffffff;
    font-family: fontawesome;
    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: Montserrat;
    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: Roboto;
    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%;

    -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%;
}


/* Services */
.service {
    float: left;
    width: 100%;
}
.service > span {
    float: left;
    font-size: 65px;
    width: 100%;
}
.service > h3 {
    float: left;
    font-family: Roboto;
    font-size: 18px;
    margin: 0 0 11px;
    width: 100%;
}
.service > p {
    margin-bottom: 20px;
}


.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: #ff3b3b none repeat scroll 0 0;
    color: #ffffff;
    margin-left: -10px;
}
.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: Montserrat;
    font-size: 21px;
    letter-spacing: 0.3px;
    margin: 0;
    width: 100%;
}
.profile-name > i {
    color: #d7d7d7;
    float: left;
    font-family: Roboto;
    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: Montserrat;
    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: Roboto;
    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 > 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: Montserrat;
    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: 20px 0;
    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: Roboto;
    font-size: 14px;
    letter-spacing: 0.3px;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}
.friend-list li h3 i {
    float: left;
    font-family: Roboto;
    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: Roboto;
    font-size: 11px;
    letter-spacing: 0.3px;
    position: absolute;
    right: 0;
    top: 22px;
}
.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;
}

/* Birthday */
.birthday {
    float: left;
    padding: 26px 30px;
    width: 100%;
}
.birthday > h3 {
    float: left;
    font-family: Roboto;
    font-size: 14px;
    margin: 0;
    width: 100%;
    z-index: 0;
    color: #ffffff;
}
.my-location > h3 a {
    color: #ff3b3b;
}
.birthday > h3 > i {
    font-size: 16px;
    margin-right: 12px;
    top: 6px;
    z-index: 0;
}
.birthday > h3 > span {
    color: #efefef;
    float: right;
    font-size: 12px;
    font-weight: lighter;
}

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


/*!
 * 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;
  transition-property: transform;
  -webkit-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);
  transform: scale(1.1);
}

/* Shrink */
.shrink {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-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);
  transform: scale(0.9);
}

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

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

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

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

.pulse {
  display: inline-block;
  -webkit-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;
  animation-name: pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

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

@keyframes pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

.pulse-grow {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(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;
  animation-name: pulse-grow;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

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

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

.pulse-shrink {
  display: inline-block;
  -webkit-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;
  animation-name: pulse-shrink;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

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

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

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

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

.push {
  display: inline-block;
  -webkit-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;
  animation-name: push;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

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

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

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

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

.pop {
  display: inline-block;
  -webkit-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;
  animation-name: pop;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* Rotate */
.rotate {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-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);
  transform: rotate(4deg);
}

/* Grow Rotate */
.grow-rotate {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-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);
  transform: scale(1.1) rotate(4deg);
}

/* Float */
.float {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-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);
  transform: translateY(-5px);
}

/* Sink */
.sink {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-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);
  transform: translateY(5px);
}

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

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

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

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

.hover {
  display: inline-block;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-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);
  transform: translateY(-6px);
  -webkit-animation-name: hover;
  animation-name: hover;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

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

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

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

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

.hang {
  display: inline-block;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-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);
  transform: translateY(6px);
  -webkit-animation-name: hang;
  animation-name: hang;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

/* Skew */
.skew {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-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);
  transform: skew(-10deg);
}

/* Skew Forward */
.skew-forward {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-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);
  transform: skew(-10deg);
}

/* Skew Backward */
.skew-backward {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-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);
  transform: skew(10deg);
}

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

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

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

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

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

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

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

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

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

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

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

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

.wobble-vertical {
  display: inline-block;
  -webkit-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;
  animation-name: wobble-vertical;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

.wobble-horizontal {
  display: inline-block;
  -webkit-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;
  animation-name: wobble-horizontal;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-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);
    transform: translate(8px, 8px);
  }

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

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

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

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

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

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

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

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

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

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

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

.wobble-to-bottom-right {
  display: inline-block;
  -webkit-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;
  animation-name: wobble-to-bottom-right;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-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);
    transform: translate(8px, -8px);
  }

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

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

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

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

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

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

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

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

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

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

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

.wobble-to-top-right {
  display: inline-block;
  -webkit-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;
  animation-name: wobble-to-top-right;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

.wobble-top {
  display: inline-block;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-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;
  animation-name: wobble-top;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

.wobble-bottom {
  display: inline-block;
  -webkit-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-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;
  animation-name: wobble-bottom;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

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

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

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

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

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

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

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

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

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

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

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

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

.wobble-skew {
  display: inline-block;
  -webkit-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;
  animation-name: wobble-skew;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

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

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

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

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

.buzz {
  display: inline-block;
  -webkit-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;
  animation-name: buzz;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.buzz-out {
  display: inline-block;
  -webkit-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;
  animation-name: buzz-out;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/* BORDER TRANSITIONS */
/* Border Fade */
.border-fade {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  -webkit-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;
  transition-duration: 0.3s;
  -webkit-transition-property: background;
  transition-property: background;
  -webkit-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);
  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;
  transition-duration: 0.3s;
  -webkit-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);
  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;
  transition-duration: 0.3s;
  -webkit-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);
  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;
  transition-duration: 0.3s;
  -webkit-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;
  transition-duration: 0.3s;
  -webkit-transition-property: border-radius;
  transition-property: border-radius;
  -webkit-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 {
  border-radius: 1em;
}

/* SHADOW/GLOW TRANSITIONS */
/* Glow */
.glow {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  -webkit-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;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  -webkit-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;
  transition-duration: 0.3s;
  -webkit-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);
  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;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-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;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.float-shadow:hover, .float-shadow:focus, .float-shadow:active {
  -webkit-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);
  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);
    transform: translateY(-3px);
  }

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

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

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

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

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

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

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

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

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

.hover-shadow {
  display: inline-block;
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-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;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.hover-shadow:hover, .hover-shadow:focus, .hover-shadow:active {
  -webkit-transform: translateY(-6px);
  transform: translateY(-6px);
  -webkit-animation-name: hover;
  animation-name: hover;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
.hover-shadow:hover:before, .hover-shadow:focus:before, .hover-shadow:active:before {
  opacity: .4;
  -webkit-transform: translateY(6px);
  transform: translateY(6px);
  -webkit-animation-name: hover-shadow;
  animation-name: hover-shadow;
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

/* Shadow Radial */
.shadow-radial {
  display: inline-block;
  position: relative;
  -webkit-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;
  transition-duration: 0.3s;
  -webkit-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);
  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;
  transition-duration: 0.3s;
  -webkit-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);
  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;
  transition-duration: 0.3s;
  -webkit-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);
  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;
  transition-duration: 0.3s;
  -webkit-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);
  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;
  transition-duration: 0.3s;
  -webkit-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;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-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;
  transition-duration: 0.3s;
  -webkit-transition-property: top;
  transition-property: top;
}
.bubble-float-top:hover, .bubble-float-top:focus, .bubble-float-top:active {
  -webkit-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;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-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;
  transition-duration: 0.3s;
  -webkit-transition-property: right;
  transition-property: right;
}
.bubble-float-right:hover, .bubble-float-right:focus, .bubble-float-right:active {
  -webkit-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;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-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;
  transition-duration: 0.3s;
  -webkit-transition-property: bottom;
  transition-property: bottom;
}
.bubble-float-bottom:hover, .bubble-float-bottom:focus, .bubble-float-bottom:active {
  -webkit-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;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-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;
  transition-duration: 0.3s;
  -webkit-transition-property: left;
  transition-property: left;
}
.bubble-float-left:hover, .bubble-float-left:focus, .bubble-float-left:active {
  -webkit-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);
  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;
  transition-duration: 0.3s;
  -webkit-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);
  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;
  transition-duration: 0.3s;
  -webkit-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);
  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;
  transition-duration: 0.3s;
  -webkit-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);
  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;
  transition-duration: 0.3s;
  -webkit-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: Roboto;
    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 !important;
    width: 100% !important;
}
.dynamic-tags .tagsinput .tag {
    float: left;
}
.dynamic-tags .tagsinput .tag {
    background: none repeat scroll 0 0 #e1e1e1;
    color: #333333;
    float: left;
    font-family: Roboto;
    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: Roboto;
    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: Roboto;
    font-size: 13px;
    margin-top: 10px;
    padding: 6px 19px;
    width: 100% !important;
}
.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: Montserrat;
    font-weight: normal;
    letter-spacing: 0.3px;
    line-height: 12px;
    margin-left: 5px;
    margin-top: 5px;
    -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;
}

.c-btn_ {
    color: #fff;
    cursor: pointer;
    float: right;
    font-family: Montserrat;
    font-weight: normal;
    letter-spacing: 0.3px;
    line-height: 12px;
    margin-left: 5px;
    margin-top: 5px;
    -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%;
}
.c-btn:hover {
    opacity: 0.8;
    color:#fff;
}
a.large, input.large[type="submit"], button.large {
    font-size: 18px;
    padding: 18px 26px;
}
a.medium, input.medium[type="submit"], button.medium {
    font-size: 18px;
    padding: 16px 30px;
    border-radius: 8px;
}
a.small,
input[type="submit"].small,
button.small {
    padding: 15px 16px;
}
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: Roboto;
    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: Roboto;
    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: Roboto;
    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: "Courier New", Courier, monospace;
    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: Roboto;
    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: Roboto;
    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;
    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: Roboto;
    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: Roboto;
    font-weight: 600;
    text-align: center;
}
.fc-agenda .fc-agenda-axis {
    font-family: Roboto;
    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: monospace;
    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: Roboto;
    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;
    font-family: Roboto;
    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: Roboto;
    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: Roboto;
    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: Roboto;
    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: Roboto;
    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 "helvetica neue", helvetica, arial, sans-serif;
    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 {
    visibility: visible;
}


.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 !important;
opacity: 1.0 !important;
position: absolute !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
transform: none !important;
}
.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;
background-color: #FFF;
background-color: rgba(255,255,255,.9);
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: Arial, verdana, tahoma;
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 sans-serif;
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: Montserrat;
    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: Roboto;
    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: Roboto;
    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: Roboto;
    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: Roboto;
    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: Roboto;
    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: Roboto;
    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;
    color: #333;
    padding-left: 70px;
    position: relative;
}
.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;
    margin-top: -40px;
    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(230,233,238,0.9) 70%, rgba(230,233,238,1) 100%);
    background: -webkit-linear-gradient(top, rgba(230,233,238,0.9) 70%,rgba(230,233,238,1) 100%);
    background: linear-gradient(to bottom, rgba(230,233,238,0.9) 70%,rgba(230,233,238,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e6e9ee', 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: Montserrat;
    font-size: 22px;
    position: relative;
    text-transform: uppercase;
    width: 100%;
}
.price-head > h3 {
    color: #222222;
    display: inline-block;
    font-family: Montserrat;
    font-size: 88px;
    font-weight: bold;
    letter-spacing: -6px;
    line-height: 67px;
    margin: 33px 0 0;
    position: relative;
}
.price-head > h3 > span {
    font-family: Roboto;
    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: Roboto;
    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: Roboto;
    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: #ff3b3b 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;
    margin-top: -30px;
    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: #ff3b3b;
    float: left;
    font-size: 29px;
    width: 100%;
}
.price-title2 {
    color: #000000;
    float: left;
    font-family: Roboto;
    font-size: 24px;
    margin-bottom: 40px;
    margin-top: 29px;
    width: 100%;
}
.price-here2 {
    color: #1d1923;
    float: left;
    font-family: Roboto;
    font-size: 57px;
    font-weight: 200;
    margin-bottom: 20px;
    position: relative;
    width: 100%;
}
.price-feature2 {
    color: #777777;
    float: left;
    font-family: Roboto;
    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: Roboto;
    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: #ff3b3b 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: Roboto;
    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: Roboto;
    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: Roboto;
    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: Roboto;
    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: Roboto;
    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: 'Quicksand', sans-serif;

    -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: 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: Roboto;
    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;
    z-index: 1;
}

.tdl-holder input[type="checkbox"]:checked + i:after {
    background-color: #c4c4c4;
    content: "";
    display: block;
    height: 8px;
    left: 4px;
    position: absolute;
    top: 4px;
    width: 8px;
    z-index: 2;

    -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: Roboto;
    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;
    z-index: 2;

    -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: Roboto;
    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;
}
.small-progress {
    height: 14px !important;
}
.large-progress {
    height: 20px;
}
.progress.mini-progress {
    height: 10px;
}

/* CalcuRobotor Widget */
.calcuRobotor {
    float: left;
    width: 100%;
}
#calcuRobotor {
    float: left;
    height: auto;
    margin: 0;
    padding: 0px;
    width: 100%;
}
.top span.clear {
    float: left;
}
.top .screen {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);
    color: white;
    float: right;
    font-size: 17px;
    height: 36px;
    letter-spacing: 1px;
    line-height: 40px;
    padding: 0 10px;
    text-align: right;
    width: 100%;
}
.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: Roboto;
    height: 36px;
    line-height: 36px;
    margin: 0 7px 11px 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 11px 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;

}
.calcuRobotor .keys > div {
    padding: 0 5px;
}
.keys {
    float: left;
    margin: 0;
    width: 100%;
}
.keys span.operator {
    margin-right: 0;
}
.calcuRobotor .row {
    margin: 0 -5px;
}
.calcuRobotor .row > .top {
    margin: 0;
    width: 100%;
}
.calcuRobotor .row > .top > div {
    padding: 0 5px;
}
.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;
    position: relative;
    width: 100%;
}
.tooltips-sec > .tooltip {
    float: left;
    margin: 0 42px 0 0;
    opacity: 1;
    position: relative;
}
.tooltips-on-hover {
    float: left;
    width: 100%;
}
.tooltips-sec > .widget-title {
    margin-bottom: 30px;
}
.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: Roboto;
    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: Roboto;
    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 Sans-Serif;
    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: sans-serif;
  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: sans-serif;
  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: sans-serif;
  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: sans-serif;
  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;
  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: sans-serif;
  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: sans-serif;
  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: sans-serif;
  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: sans-serif;
  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;
  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: sans-serif;
  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;
  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: sans-serif;
  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);
  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);
  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);
  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: sans-serif;
  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: sans-serif;
  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;
  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;
  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);
  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: #ffffff none repeat scroll 0 0;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    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;
    margin-top: -30px;
    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: #ff3b3b 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: Montserrat;
    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%);

    visibility: hidden;
    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;
    visibility: visible;
}


#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: Montserrat;
    font-size: 13px;
    letter-spacing: 0.25px;
    margin-top: 40px;
    padding: 14px 40px;
    text-decoration: none;
}
.billing-sec .field > label {
    float: left;
    font-family: Montserrat;
    font-size: 12px;
    font-weight: normal;
    margin: 0 0 10px;
    width: 100%;
}
.billing-sec .field > label span {
    color: red;
}
.billing-sec .field input {
    border: medium none;

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

    float: left;
    font-size: 12px;
    height: 50px;
    letter-spacing: 0.5px;
    padding: 0 30px;
    width: 100%;
}
.billing-sec .field > select {
    border: medium none;

    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    border-radius: 40px;
    float: left;
    font-size: 12px;
    height: 50px;
    padding: 0 30px;
    width: 100%;
}
.billing-sec .field > textarea {
    border: medium none;

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

    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;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    float: left;
    padding: 40px;
    width: 100%;
    margin-top:30px;
}

/* My Cart */
.my-cart {
    background: #ffffff none repeat scroll 0 0;

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

    float: left;
    margin-top: 30px;
    overflow: hidden;
    width: 100%;
}
.cart-heading {
    background: #ffffff none repeat scroll 0 0;
    float: left;
    padding: 23px 0;
    width: 100%;
}
.cart-heading h2 {
    color: #2e2e2e;
    float: left;
    font-family: Montserrat;
    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;
}

.commingsoon {
    float: left;
    margin-bottom: 90px;
    margin-top: 90px;
    text-align: center;
    width: 100%;
}
.commingsoon .logo {
    display: inline-block;
    float: none;
    padding: 0;
    text-align: left;
    width: auto;
}
.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: Montserrat;
    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: Montserrat;
    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: Montserrat;
    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;

}


.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;
    margin-top: -30px;
    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: #ffffff 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: #ff3b3b;
    float: left;
    font-size: 49px;
    margin-bottom: 16px;
    width: 100%;
}
.square-infos > h3 {
    float: left;
    font-family: montserrat;
    font-size: 21px;
    font-weight: bold;
    margin: 11px 0 16px;
    text-transform: uppercase;
    width: 100%;
    color: #232323;
}
.square-infos > a {
    border: 2px solid #ff3b3b;

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

    color: #ff3b3b;
    float: left;
    font-family: open sans;
    font-size: 19px;
    height: 47px;
    line-height: 42px;
    margin-top: 14px;
    text-align: center;
    width: 47px;
}
.square-services:hover > .square-infos > a {
    background: #ff3b3b 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%;
    margin-top: -30px;
}
.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: #ff3b3b 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: Montserrat;
    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;
}


/* Product Sec */
.product-sec {
    float: left;
    margin-top: -30px;
    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: #ff3b3b 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: Montserrat;
    font-size: 19px;
    font-weight: bold;
    margin: 22px 0 7px;
    width: 100%;
}
.product-box > h3 a{
    color: #1b1d21;
}
.product-box span.price {
    float: left;
    font-family: Montserrat;
    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: #ff3b3b 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: Montserrat;
    padding-left: 30px;
}
.cart-thumb > h3 a {
    color: #333333;
    font-family: Montserrat;
    font-size: 21px;
    font-weight: bold;
}
.price-cart-item {
    display: block;
}
.price-cart-item span {
    float: left;
    font-family: Montserrat;
    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: Montserrat;
    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: Montserrat;
    padding: 6px 0;
    width: 50%;
    border-right: 1px solid #ffffff;
    background-color: #ff3b3b;
}
.c-input-number > span input.userincr-btn-inc {
    border: medium none;
    color: #ffffff;
    float: left;
    font-family: Montserrat;
    padding: 6px 0;
    width: 50%;
    background-color: #ff3b3b;
}
.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: Montserrat;
    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: Open Sans;
    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: Montserrat;
    font-size: 16px;
    font-weight: bold;
    padding: 16px 36px;
    background-color: #ff3b3b;
}
/* 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: 50px;
    width: 100%;
}
.single-product-infos span.price {
    float: left;
    font-family: Open Sans;
    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: Montserrat;
    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: Montserrat;
    font-size: 16px;
    font-weight: bold;
    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: 50px;
    width: 100%;
}
.single-product-infos span.price {
    float: left;
    font-family: Open Sans;
    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: #ff3b3b none repeat scroll 0 0 !important;
    color: #ffffff;
}
.mini-charts > .widget-title {
    margin-bottom: 30px;
}
/* Cross Browser Compatibility */
.parent-menu > li > a *,
.menu-options,
.slide-bar-btn,
.breadcrumbs *,
.parent-menu > li > a,
.parent-menu > li > a *,
.wanna-touch *,
.team-sec *,
.square-services-sec *,
.mini-portfolio *,
.mini-portfolio *:before,
*:before,
*:after,
.gallery-sec *,
.product-sec *{

    -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;

}

.no-padding {
    padding: 0;
}
.no-margin {
    margin: 0;
}


/* 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: open sans;
    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: lato;
    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: 2147483647;

    -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;

    -webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
    -ms-border-radius: 6px 6px 0 0;
    -o-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;

    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: Roboto;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

#live-chat h5 {
    color: #333333;
    font-family: Roboto;
    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: Roboto;
    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 !important;
    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: open sans;
    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%;
}
.blog-thumb > img {
    float: left;
    width: 100%;
}
.single-product-tabs > img {
    float: left;
    width: 100%;
}
.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 {
    background: #ffffff none repeat scroll 0 0;
    border-radius: 20px;
    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: Montserrat;
    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;
    border-radius: 5px;
    color: #738282;
    float: left;
    font-family: open sans;
    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: #ff3b3b none repeat scroll 0 0;
    border: 1px solid;
    border-radius: 5px;
    color: #ffffff;
    float: left;
    font-family: Montserrat;
    font-size: 13px;
    letter-spacing: 0.25px;
    padding: 12px 20px;
    text-decoration: none;
}
.contact-form .loader {
    border: medium none;
    margin: 18px 20px;
    position: static;
}

.red,
.tckt-status > span.removed,
.edit-remove > li > a.edit,
.toggle-switch span::before,
span.offline::before{background-color: #ff3b3b;}

.blue
{background-color: #337ab7;}

.sky
{background-color: #21c5ee;}

.pink
{background-color: #f521ad;}

.green,
.tckt-status > span.done,
.edit-remove > li > a.remove,
.toggle-switch *:checked + span::before,
.total a,
span.online::before {background-color: #07bf29;}

.purple,
.tckt-status > span.new{background-color: #8777ff;}

.gray,
.tckt-status > span.new{background-color: #545454;}

input::placeholder {
  font-size: 18px;
}

.red-btn {
  font-size: 18px;
  border-radius: 4px;
  background-color: #e95464;
}
.green-btn {
  font-size: 18px;
  border-radius: 4px;
  background-color: #3cb37a;
}
.blue-btn {
  font-size: 18px;
  border-radius: 4px;
  background-color: #4496d3;
}
.gray-btn {
  font-size: 18px;
  border-radius: 4px;
  background-color: #5f5f5f;
}

.overflow {
  overflow: hidden;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 0;
}