@charset "IBM437";
/* Author: AdminDesigns.com
 * Copyright 2014 Admin Designs
===================================================  
   Table of Contents
===================================================  
	I. SHARED STYLES
   II. PRIMARY COMPONENTS
  III. PANELS
   IV. THEME ELEMENTS
  	V. HELPERS
   VI. WIDGETS
  VII. COLOR SYSTEM
 VIII. LAYOUT SETTINGS
   IX. GRID MODIFICATIONS
    X. PAGES
   XI. PLUGINS
  XII. ANIMATE.CSS
===================================================
===================================================
  I. SHARED STYLES
	 A. Global
	 B. Grid
	 C. Typography
	 D. Animations
===================================================
  A. Global
=================================================== */
body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans',Helvetica, Arial, sans-serif;
  color: #232222;
  -webkit-font-smoothing: antialiased;
  /* Fix for webkit rendering */
  -webkit-text-size-adjust: 100%;
  font-size-adjust: 100%;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.475;
  background-color: #FFF; }

#main {
  height: 100%;
  width: 100%;
  position: relative;
  background: #e8e8e8; }

#content_wrapper {
  position: relative;
  display: block;
  min-height: 1000px;
  left: 0px;
  margin-left: 230px; }

/* Bootstraps ".container" class has been changed to a fluid full 
 * width container */
.container {
  width: 100%; }

/*===============================================
  B. Grid
================================================= */
.row {
  margin-left: -11px;
  margin-right: -11px; }

.row.table-layout {
  margin-left: 0;
  margin-right: 0; }

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  padding-left: 11px;
  padding-right: 11px; }

/*===============================================
  C. Typography
================================================= */
ul, ol {
  padding-left: 30px; }

li {
  margin-bottom: 7px; }

a {
  color: #232222; }

a:hover {
  color: #d9534f; }

a:focus {
  outline: none; }

p {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  line-height: 22px;
  font-weight: 400; }

p.small, p small {
  font-size: 13px; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  color: inherit;
  text-rendering: optimizelegibility;
  margin-bottom: 10px; }

h1 {
  font-size: 30px;
  line-height: 45px; }

h1.small {
  font-size: 26px; }

h2 {
  font-size: 24px;
  line-height: 36px; }

h2.small {
  font-size: 20px; }

h3 {
  font-size: 18px;
  line-height: 27px; }

h3.small {
  font-size: 16px; }

h4, h5, h6 {
  line-height: 18px; }

h4 {
  font-size: 15px; }

h5 {
  font-size: 13px; }

h5.small,
h5 small {
  font-size: 12px; }

h6 {
  font-size: 11px;
  color: #999999; }

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
  font-weight: normal;
  color: #999999; }

.fw400 {
  font-weight: 400; }

.fw600 {
  font-weight: 600; }

.fw700 {
  font-weight: 700; }

.text-uppercase {
  text-transform: uppercase; }

/* Specialty Header - Also a Divider */
.page-header {
  text-shadow: 0 1px #FFF;
  border-bottom: 1px solid #c9c9c9;
  margin-bottom: 30px;
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75); }

/* Dividers */
hr {
  margin: 35px 0;
  border-top: 1px solid #DDD; }

hr.alt {
  border-top: 1px dashed #cccccc; }

hr.short {
  margin: 20px 0; }

hr.tall {
  margin: 55px 0; }

.divider {
  height: 1px;
  margin: 25px 0;
  background: #e2e2e2; }

/* Carets */
.caret-xs {
  border-width: 2px; }

.caret-sm {
  border-width: 3px; }

.caret-lg {
  border-width: 5px; }

/*===============================================
  D. Animations
================================================= */
/* used in conjuction with "data-animate" 
 * attr to create a delayed page animation
 * read docs for more info on proper use*/
.animated-delay {
  opacity: 0; }

.sparkline-delay {
  height: 0;
  display: block;
  line-height: 40px; }

/* ================================================
   II. PRIMARY COMPONENTS
	  A. Navbar
      B. Sidebar
	  C. Topbar
===================================================
   A. Navbar
=================================================== */
.navbar {
  z-index: 1030;
  margin-bottom: 0;
  border-radius: 0;
  min-height: 60px;
  max-height: 60px;
  background-color: #FFF;
  border-bottom: 1px solid #c9c9c9;
  box-shadow: none;
  background-repeat: repeat-x;
  background-image: linear-gradient(to bottom, #ffffff 1%, #f3f3f3 100%);
    border-left-style: none;
    border-left-color: inherit;
    border-left-width: 0;
    border-right-style: none;
    border-right-color: inherit;
    border-right-width: 0;
    border-top-style: none;
    border-top-color: inherit;
    border-top-width: 0;
}

/* Navbar Logo Container */
.navbar-branding {
  float: left;
  width: 230px; }

/* Navbar Logo */
.navbar-brand {
  height: 60px;
  line-height: 48px;
  padding: 0;
  color: #5d5d5d;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0.5px; }

/* Navbar Toggle Button for Sidebar */
#toggle_sidemenu_l {
  float: left;
  cursor: pointer;
  font-size: 19px;
  color: #7e46a7;
  line-height: 64px;
  max-height: 60px;
  width: 40px;
  margin-left: 25px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease; }

.sidebar-collapsed #toggle_sidemenu_l {
  font-size: 24px; }

/* Left Navbar Container */
.navbar-left {
  float: left;
  position: relative;
  width: 150px;
  max-height: 60px; }

/* Navbar Left Divider */
.navbar-divider {
  position: absolute;
  left: 0;
  top: 15px;
  height: 30px;
  width: 1px;
  border-left: 1px solid #ebebeb; }

/* Left Side Menus */
#settings_menu,
#language_menu {
  float: left;
  position: relative;
  padding: 19px 0;
  margin-left: 28px;
  color: #888;
  font-size: 15px;
  font-weight: 600; }

#settings_menu a,
#language_menu a {
  text-decoration: none; }

#settings_menu .dropdown-menu,
#language_menu .dropdown-menu {
  border: 1px solid #CCC;
  border-radius: 2px;
  padding: 2px 0;
  box-shadow: none;
  margin-left: -10px; }

#settings_menu .dropdown-menu li,
#language_menu .dropdown-menu li {
  margin-bottom: 3px; }

/* Settings Menu */
#settings_menu {
  margin-left: 25px; }

#settings_menu .glyphicons {
  font-size: 14px; }

#settings_menu.open > .glyphicons {
  color: #f9892e; }

#settings_menu .dropdown-menu {
  margin-left: -20px; }

/* Language Menu */
#language_menu {
  top: -1px; }

#language_menu a:hover {
  text-decoration: none;
  outline: none; }

/* Language Menu Text */
#language_menu a > span {
  color: #a287d4; }

/* Language Menu Icon */
#language_menu .fa {
  font-size: 14px;
  color: #999; }

/* Right Navbar Container */
.navbar-right {
  float: right;
  width: 410px; }

/* Header Search Area */
.navbar-search {
  position: relative;
  float: left;
  overflow: hidden;
  width: 230px;
  height: 60px;
  padding: 15px;
  padding-right: 25px; }

.navbar-search:after {
  content: "";
  position: absolute;
  right: 0;
  top: 15px;
  height: 32px;
  border-right: 1px solid #ebebeb; }

.navbar-search input {
  outline: none;
  color: #AAA;
  font-size: 18px;
  font-weight: 300;
  background: #FFF;
  border: 1px solid #DDD;
  border-radius: 15px;
  padding: 1px 13px;
  width: 100%; }

/* Navbar Menus */
.navbar-menus {
  float: right;
  margin-right: 10px; }

.navbar-menus > .btn-group {
  float: left;
  margin-right: 0; }

.navbar-menus > .btn-group.open .glyphicons {
  color: #f9892e; }

/* Reduces the size of the Right SideMenu Toggle button */
.navbar-menus > .btn-group:last-child {
  max-width: 55px; }

.navbar-menus > .btn-group > button {
  position: relative;
  color: #666;
  padding: 21px 20px 18px;
  background: transparent;
  border: none;
  border-radius: 0;
  outline: none; }

.navbar-menus > .btn-group.open .dropdown-toggle {
  box-shadow: none; }

/* Header Menu Number Text */
.navbar-menus > .btn-group > button > b {
  position: absolute;
  top: 14px;
  left: 30px;
  display: block;
  width: 20px;
  height: 20px;
  line-height: 16px;
  color: #FFF;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid #FFF;
  border-radius: 100%;
  background: #a87fc6; }

/* Header Button Dropdowns */
.navbar-menus ul.dropdown-menu,
.navbar-menus div.dropdown-menu {
  min-width: 316px;
  padding: 0;
  right: -5px;
  left: auto;
  margin: 6px 0;
  font-size: 13px;
  border-color: #CCC; }

/* Header Menu Dropdown - Header */
.navbar-menus .dropdown-header {
  padding: 9px 20px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  background: #f9f9f9;
  position: relative;
  border-bottom: 1px solid #DDD;
  border-radius: 2px 2px 0 0; }

/* Header Bar Dropdowns Arrows */
.navbar-menus .dropdown-menu:before,
.navbar-menus .dropdown-menu:after {
  z-index: 15;
  content: "";
  position: absolute;
  bottom: 100%;
  right: 23px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 12px solid #f2f2f2; }

.navbar-menus .dropdown-menu:after {
  z-index: 14;
  border-bottom-color: #999; }

/* Header Menu Dropdown - Sub Header */
.dropdown-submenu {
  padding: 11px 0 8px;
  border-bottom: 1px solid #eee; }

.dropdownSearch {
  position: relative;
  top: 1px;
  left: 12px;
  border: none; }

.dropdownSearch:focus {
  outline: none; }

.dropdownSearch::-webkit-input-placeholder {
  font-weight: 600;
  font-size: 13px;
  color: #BBB; }

.dropdownSearch::-moz-placeholder {
  font-weight: 600;
  font-size: 13px;
  color: #BBB; }

/* firefox 19+ */
.dropdownSearch:-ms-input-placeholder {
  font-weight: 600;
  font-size: 13px;
  color: #BBB; }

/* ie */
.dropdownSearch:-moz-placeholder {
  font-weight: 600;
  font-size: 13px;
  color: #BBB; }

/* Header Menu Dropdown - Footer */
.navbar-menus .dropdown-footer {
  padding: 11px 20px;
  margin: 0;
  z-index: 999;
  font-size: 11px;
  color: #999;
  background: #FFF;
  text-align: center;
  position: relative;
  border-top: 1px solid #DDD;
  border-radius: 0 0 3px 3px; }

.navbar-menus .dropdown-footer a {
  color: #428bca; }

.navbar-menus .dropdown-footer a:hover {
  background: transparent; }

.navbar-menus .dropdown-footer i.fa {
  padding-left: 3px; }

/* Dropdown Checklist Toggle - The Task menu is a clickable checklist */
.task-checked > div:not(.item-checkbox) {
  opacity: 0.4; }

/* add a text line through effect on any clickable checklist by adding ".text-slash" */
.task-checked .text-slash {
  text-decoration: line-through; }

/* Removes borders from Nav-Tabs that are placed in header dropdowns */
.navbar-menus .nav-tabs {
  margin-top: -1px;
  margin-left: -1px; }

.navbar-menus .nav-tabs > li > a {
  padding: 10px 27px;
  border-color: #DDD; }

/* Navbar Tickets Dropdown */
.ticket-body {
  width: 87%; }

.ticket-handle {
  position: relative;
  width: 13%;
  border-right: 1px solid #ffe3e3; }

.ticket-handle:after {
  content: "";
  position: absolute;
  top: 0;
  right: 2px;
  height: 100%;
  border-right: 1px solid #ffe3e3; }

/* Navbar Todo-List Dropdown */
.todo-body {
  width: 82%; }

.todo-handle {
  position: relative;
  width: 8%; }

.v-handle {
  width: 10px;
  height: 14px;
  background-image: url(../img/plugins/handle.png); }

/* ==============================================
   A. LEFT SIDEBAR
	  A. Default Open State
	  B. Sidebar User Area
	  C. Sidebar Item State
	  D. Sidebar Toggle - Media Query
	  E. Sidebar Toggle - User input
=================================================
  A. Default Open State
================================================= */
#sidebar_left {
  position: absolute;
  width: 230px;
  height: 100%;
  background: #fcfcfc;
  border-right: 1px solid #d6d6d6; }

.sidebar-menu {
  padding-bottom: 20px; }

/* TOP LEVEL MENU ITEM */
/* Menu Item */
.sidebar-menu > ul li {
  margin: 0; }

.sidebar-menu > ul > li:first-child {
  padding-top: 4px; }

.sidebar-menu > ul li a {
  color: #777; }

.sidebar-menu > ul > li > a {
  padding: 0;
  line-height: 40px;
  height: 40px; }

/* Menu Icon */
.sidebar-menu > ul > li > a > span:nth-child(1) {
  float: left;
  top: 0;
  line-height: 40px;
  width: 40px;
  font-size: 13px;
  text-align: center;
  padding-left: 15px; }

/* Menu Title */
.sidebar-menu > ul > li > a > span:nth-child(2) {
  float: left;
  padding-left: 10px;
  font-size: 12px; }

/* Top Level Menu Item - Tray, used to hold badges and such */
.sidebar-menu > ul > li > a > .sidebar-title-tray {
  position: absolute;
  right: 10px; }

.sidebar-menu > ul > li > a > .sidebar-title-tray .label {
  padding: .0em .5em .2em;
  font-size: 11px; }

/* Menu Caret */
.sidebar-menu ul > li > a > span.caret {
  position: absolute;
  top: 45%;
  right: 10px;
  border-top: 5px solid;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent; }

/* Open Menu Item Caret - we simply flip the carets border */
.sidebar-menu ul > li > a.menu-open > span.caret {
  border-top: 0;
  border-bottom: 5px solid; }

/* SUB LEVEL MENU ITEMS */
/* Sub-Menu */
.sidebar-menu ul.sub-nav {
  clear: both;
  display: none;
  width: 230px;
  height: auto;
  background: #f3f3f3;
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  border-right: 1px solid #d6d6d6; }

.sidebar-menu ul a.menu-open + ul.sub-nav {
  display: block; }

.sidebar-menu ul.sub-nav > li > a {
  padding: 10px 20px 11px 30px; }

/* Sub-Menu Icon */
.sidebar-menu ul.sub-nav > li > a > span:nth-child(1) {
  margin-right: 10px;
  font-size: 11px; }

/* Sidebar Menu "li" Divider - Used in the resources menu */
.sidebar-menu ul li.divider {
  width: 170px;
  margin: 0 auto;
  background: #e7e7e7; }

/*===============================================
  B. Sidebar User Area
================================================= */
.user-info {
  overflow: hidden;
  position: relative;
  display: block;
  height: 80px;
  width: 100%;
  padding: 14px 22px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid #CCC; }

/* User Area - Avatar */
.user-info .media-object {
  border-color: #c7b7e5; }

.user-info .media-object img {
  max-width: 45px; }

/* User Area Mobile Link - Replaces ".media-body" with single Icon for Mobile Devices */
.user-info .mobile-link {
  display: none;
  padding: 2px; }

.user-info .mobile-link > span {
  padding-top: 8px;
  padding-left: 5px;
  color: #999;
  font-size: 18px;
  cursor: pointer; }

.user-info .mobile-link span:hover,
.user-info.usermenu-open .mobile-link span {
  color: #a287d4; }

.user-info.usermenu-open .media-object {
  border-color: #a287d4; }

/* User Area Menu - A slide down user menu */
.user-menu {
  display: none;
  position: relative;
  left: 0;
  top: 0;
  height: 82.5px;
  width: 100%;
  padding: 22px 22px 20px 16px;
  background: #f8f8f8;
  border-right: 1px solid #d6d6d6; }

/* User Area Menu - bottom border(hidden on mobile) */
.user-menu:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  width: 100%;
  background: #e5e5e5;
  border-top: 1px solid #CCC;
  border-bottom: 1px solid #CCC; }

.user-menu a {
  color: #888;
  opacity: 0.8; }

.user-menu a:hover {
  color: #666;
  opacity: 1;
  text-decoration: none; }

.user-divider {
  height: 4px;
  width: 100%;
  background: #e5e5e5;
  border-bottom: 1px solid #CCC; }

/*===============================================
  C. Sidebar Item State
================================================= */
/* Top Level Menu Item - BG color:hover */
.sidebar-menu > ul > li > a:hover {
  background-color: transparent; }

/* Sub-Menu Level Item - BG color:hover */
.sidebar-menu ul.sub-nav > li > a:hover {
  background-color: #ededed; }

/* Top Level Menu Item - Icon Color */
.sidebar-menu > ul > li.active > a > span:nth-child(1) {
  color: #a287d4; }

/* Sub-Menu Level Item - Icon Color */
.sidebar-menu ul.sub-nav > li.active > a > span:nth-child(1) {
  color: #a287d4; }

/* Active Menu item Caret */
.sidebar-menu ul > li.active > a > span.caret {
  color: #9567b7; }

/*====================================================
  D. Sidebar Toggle - Media Query
====================================================== */
@media (max-width: 1100px) {
  #sidebar_left {
    left: -230px; }

  #content_wrapper {
    margin-left: 0; } }
/*====================================================
  E. Sidebar Toggle - User input
====================================================== */
/* Left SideBar */
.sidebar-ltr #sidebar_left {
  left: 0; }

.sidebar-ltr #sidebar_right {
  right: -250px; }

.sidebar-ltr #content_wrapper {
  margin-left: 230px; }

@media (max-width: 1100px) {
  .sidebar-ltr #content_wrapper {
    left: 230px;
    right: auto;
    margin-left: 0;
    margin-right: 0; } }
/* Right SideBar */
.sidebar-rtl #sidebar_left {
  left: -230px; }

.sidebar-rtl #sidebar_right {
  right: 0; }

.sidebar-rtl #content_wrapper {
  margin-left: 0;
  margin-right: 250px; }

.sidebar-rtl .navbar {
  margin-right: 250px; }

@media (max-width: 1100px) {
  .sidebar-rtl #content_wrapper {
    left: auto;
    right: 250px;
    margin-left: 0;
    margin-right: 0; } }
/* No SideBar */
.sidebar-hidden #sidebar_left {
  left: -230px; }

.sidebar-hidden #content_wrapper {
  margin-left: 0; }

/*====================================================
  E. Custom Menu -  Email Menu
====================================================== */
.email-menu {
  padding: 12px 22px 18px 18px; }

.email-menu li {
  color: #999;
  font-weight: 600;
  padding-left: 27px;
  margin-bottom: 7px !important; }

.email-menu li.menu-header {
  font-weight: 600;
  padding-left: 0;
  margin-bottom: 10px; }

.email-menu li.menu-header .glyphicons {
  top: 2px;
  font-size: 14px;
  margin-right: 10px; }

.email-menu .btn {
  text-indent: -8px; }

.email-menu hr {
  margin: 18px 0 18px; }

.email-menu ul li.active,
.email-menu ul li:hover {
  color: #555;
  cursor: pointer; }

/*===============================================
   B. Right SideMenu
================================================= */
#sidebar_right {
  position: fixed;
  z-index: 1031;
  width: 250px;
  height: 100%;
  top: 0;
  right: -250px;
  background: #363c47; }

#sidebar_right .sidebar-right-header {
  width: 100%;
  height: 59px;
  background: #454d5d;
  border-bottom: 1px solid #555d6d;
  padding: 4px 10px 4px 20px; }

#sidebar_right .sidebar_right_content a:hover {
  text-decoration: none; }

body.sidebar-right-open #sidebar_right {
  right: 0; }

/*===============================================
   C. Topbar
================================================= */
#topbar {
  z-index: 1023;
  position: relative;
  width: 100%;
  height: 63px;
  max-height: 140px;
  padding: 0 19px; }

.topbar-right {
  float: right; }

.breadcrumb {
  float: left;
  height: 63px;
  position: relative;
  padding: 24px 0 5px 0;
  margin-bottom: 0;
  border-radius: 0;
  font-size: 14px;
  background-color: transparent;
  border-bottom: 1px dashed #CCC;
  padding-right: 50px; }

.breadcrumb > li {
  color: #888;
  font-size: 12px; }

.breadcrumb > li.crumb-active > a {
  color: #555;
  font-size: 18px; }

/* ================================================
   III. PANELS
	  A. Heading
	  B. Panel Addon - Menu
	  C. Panel Addon - Sidemenu
	  D. Panel Addon - Tray
	  E. Panel Tabs
	  F. Panel Accordion 
	  G. Alternate Styles
	  
  * Bootstrap Panels are a vital element in this
  * theme. Please read the documentation provided
  * with Fusion Admin to learn more
===================================================
  A. Heading
=================================================== */
.panel {
  position: relative;
  margin-bottom: 20px;
  border-color: #d5d5d5;
  border-radius: 2px;
  padding-left:5px; }

/* panel helper class */
.panel-overflow {
  overflow: hidden; }

.panel-heading {
  position: relative;
  padding: 0;
  min-height: 40px;
  line-height: 40px;
  color: #666;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid #e5e5e5;
  border-radius: 2px 2px 0 0;
  background: #fafafa; }

.panel-heading + .panel-body {
  border-top-color: #e5e5e5; }

.panel-title {
  font-size: 13px;
  padding-left: 15px; }

.panel-title > .fa,
.panel-title > .glyphicon,
.panel-title > .glyphicons,
.panel-title > .imoon {
  min-width: 25px;
  margin-right: 8px;
  border-right: 1px solid #ddd;
  color: #a87fc6;
  font-size: 16px;
  top: 2px; }

.panel-body {
  position: relative; }

/* Colored headers - via bg-* classes */
.panel-heading[class*='bg-'] {
  margin: -1px; }

.panel-heading[class*='bg-'],
.panel-heading[class*='bg-'] .glyphicon {
  color: #FFF;
  border: none; }

.panel-heading[class*='bg-'] + .panel-body {
  border-top: none; }

.panel-footer {
  background-color: #fafafa; }

/*===============================================
  B. Panel Addon - Menu
  -----------------------------------------------
  Typically placed under the panel header 
  and used to hold buttons or menus 
================================================= */
.panel-menu {
  padding: 10px 13px;
  background-color: #fafafa;
  border-bottom: 1px solid #DDD; }

.panel .panel-menu .btn.active {
  background-color: #FFF;
  box-shadow: none; }

/*===============================================
  C. Panel Addon - Sidemenu
  -----------------------------------------------
  A side column great for housing an
  extra nav list. When used its sibling
  panel body (content) is modified 
================================================= */
/* Sidemenu and content are both floated. 
 * to create equal heights we use the 
 * "Table Layout" css helpers. These helpers
 * can be found in _helpers.scss */
.panel-sidemenu {
  padding: 15px;
  background-color: #f6f6f6; }

.panel-sidemenu ul.nav li {
  margin-bottom: 4px;
  list-style: none; }

.panel-sidemenu ul.nav li.nav-title {
  padding: 10px 0;
  color: #777;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 0 1px #FFF; }

.panel-sidemenu ul.nav li.nav-title:hover {
  color: #777777; }

.panel-sidemenu ul.nav li a {
  padding: 5px 0;
  color: #888; }

.panel-sidemenu ul.nav .divider {
  width: 80%;
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background: #e2e2e2; }

/*===============================================
  D. Panel Addon - Tray
  -----------------------------------------------
  A special slide out tray used to store 
  additional information. Such as online users.
================================================= */
.panel-tray {
  z-index: 11;
  position: absolute;
  top: 0;
  right: -210px;
  height: 100%;
  width: 210px;
  padding: 15px;
  border-left: 1px solid #DDD;
  background: #fafafa;
  -webkit-transition: right .1s ease-in-out;
  transition: right .1s ease-in-out; }

.panel-tray.tray-open {
  right: 0px; }

.panel-tray-toggle {
  z-index: 999;
  cursor: pointer;
  position: absolute;
  overflow: hidden;
  left: -28px;
  top: -1px;
  width: 28px;
  height: 29px;
  border: 1px solid #DDD;
  border-right: none;
  border-radius: 0 0 0 3px;
  background: #fafafa; }

.panel-tray-toggle .fa,
.panel-tray-toggle .glyphicon,
.panel-tray-toggle .glyphicons,
.panel-tray-toggle .imoon {
  font-size: 16px;
  color: #c7b7e5;
  text-align: center;
  padding: 6px; }

/*===============================================
  E. PANEL TABS
  -----------------------------------------------
  Panel Tab Navigation must be placed inside
  ".panel-heading" see Fusion Docs for example 
================================================= */
.panel-tabs {
  position: absolute;
  bottom: 0;
  right: 0; }

.panel-tabs > li {
  position: relative;
  float: left;
  margin-bottom: -1px; }

.panel-tabs > li > a {
  line-height: 1.428571429;
  border-radius: 0;
  padding: 11px 18px 9px;
  border: 1px solid transparent;
  border-left: 1px solid #DDD;
  font-size: 12px;
  color: #777; }

.panel-tabs > li > a:hover {
  background-color: transparent; }

/* hover and active states */
.panel-tabs > li.active > a, .panel-tabs > li.active > a:hover, .panel-tabs > li.active > a:focus {
  color: #555555;
  cursor: default;
  background: #ffffff;
  padding: 11px 18px 10px; }

.panel-tabs > li.active:after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  background: #a87fc6;
  width: 100%; }

/* PANEL TAB CORRECTION */
/* If you want a panel-like footer inside a tababble
 * area you need to wrap the content in a ".tab-body"
 * class. See timeline.html for an example(event panel) */
.tab-body {
  padding: 15px; }

.tab-footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #dddddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px; }

/*===============================================
  F. Accordion 
  -----------------------------------------------
  Created with Bootstrap Panels
================================================= */
.accordion.panel-group .panel {
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); }

.accordion.panel-group .panel + .panel {
  margin-top: 10px; }

/* Accordion Header */
.accordion .panel-heading a {
  text-decoration: none;
  display: block; }

.accordion .panel-heading a:hover {
  color: inherit; }

/* Accordion Widget Toggle Arrows */
.accordion .accordion-toggle-icon {
  padding: 12px 12px 7px;
  font-size: 18px; }

/* Accordion Toggle Arrow States */
.accordion .accordion-toggle-icon i:first-child {
  display: block; }

.accordion .accordion-toggle-icon i:last-child {
  display: none; }

.accordion .collapsed .accordion-toggle-icon i:first-child {
  display: none; }

.accordion .collapsed .accordion-toggle-icon i:last-child {
  display: block; }

/*===============================================
  G. Alternate Panel Styles
================================================= */
/* Minimal - Style */
.panel.panel-alt {
  border-color: #DDD;
  box-shadow: none;
  background: #FFF; }

.panel.panel-alt > .panel-heading {
  height: 40px;
  padding-right: 15px;
  background-color: #FFF;
  font-size: 14px;
  line-height: 40px;
  box-shadow: none; }

.panel.panel-alt .panel-body {
  padding: 20px 30px;
  background-color: #fcfcfc;
  line-height: 22px; }

/* ==============================================
   IV. THEME ELEMENTS
	  A. Icons
	  B. Labels
	  C. Badges
	  D. Alerts
	  E. Thumbnails
	  F. Media Objects
	  G. Buttons
	  H. Progress Bars
	  I. Field Elements
	  J. Checkboxes
	  K. Switches
      L. Tables
	  M. Pricing Tables
	  N. Tabs
	  O. Paginations
	  P. Bootstrap Modals
	  Q. Custom Modals
	  R. Boostrap Popover
=================================================
  A. Icons - See Documentation For More Info
================================================= */
/* Some font libraries have large file sizes. 
* We optionally can attach .wf-loading to the 
* body tag and have the fonts only visible after 
* they are fully loaded or cached. Prevents rough
* icon flash and is currently used only on index.html */
.wf-loading .glyphicons,
.wf-loading .glyphicon,
.wf-loading .imoon,
.wf-loading .fa,
.wf-loading .iconsweets {
  opacity: 0 !important; }

/* Icon Transitions */
.glyphicon, .glyphicons,
.imoon, .fa, .iconsweets {
  opacity: 1;
  transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in;
  -webkit-transition: opacity 0.3s ease-in; }

/* Glyphicon Pro and Halfling */
.glyphicons-2x, .glyphicon-2x {
  font-size: 2em; }

.glyphicons-3x, .glyphicon-3x {
  font-size: 3em; }

.glyphicons-4x, .glyphicon-4x {
  font-size: 4em; }

.glyphicons-5x, .glyphicon-5x {
  font-size: 5em; }

/* Icomoon Font Icons */
.imoon-2x {
  font-size: 2em; }

.imoon-3x {
  font-size: 3em; }

.imoon-4x {
  font-size: 4em; }

.imoon-5x {
  font-size: 5em; }

/* IconSweets2 Font Icons */
.iconsweets-2x {
  font-size: 2em; }

.iconsweets-3x {
  font-size: 3em; }

.iconsweets-4x {
  font-size: 4em; }

.iconsweets-5x {
  font-size: 5em; }

/* Buttons with Icons 
* Cross browser problems were creating problems when
* an icon was given a larger font size than its sibling
* text. To fix Line height, vertical align, and top
* positioning have been redefined */
.btn .glyphicon, .btn .glyphicons {
  top: -1px;
  vertical-align: middle;
  line-height: 0;
  font-size: 1.1em; }

/* A Helper Class to Align Icons Right in Control-forms */
span.field-icon-right,
i.field-icon-right {
  position: absolute;
  right: 10px;
  top: 8px; }

/* Icon Background and Borders 
* properly align icons that have been placed inside of titles
* Useful for matching icon size to adjacent text 
* Icon Background Shapes */
.icon-circle {
  top: 0;
  padding: 9px;
  position: relative;
  overflow: visible;
  border-radius: 64px; }

.icon-square {
  top: 0;
  padding: 9px;
  border-radius: 4px; }

/* Icon Background Sizes */
.icon-circle.glyphicon-2x,
.icon-circle.glyphicons-2x {
  padding: 12px; }

.icon-circle.glyphicon-3x,
.icon-circle.glyphicons-3x {
  padding: 20px; }

.icon-circle.glyphicon-4x,
.icon-circle.glyphicons-4x {
  padding: 35px; }

.icon-square.glyphicon-2x,
.icon-square.glyphicons-2x {
  padding: 12px; }

.icon-square.glyphicon-3x,
.icon-square.glyphicons-3x {
  padding: 20px; }

.icon-square.glyphicon-4x,
.icon-square.glyphicons-4x {
  padding: 35px; }

/* WIDGET SPECIFIC ICON STYLING
* ALL elements which use icons have been
* moved from their respective positions
* and placed here for easy icon styling */
/* Header Button Icons */
.navbar-menus > div > button > span,
.navbar-menus > div > button > i {
  font-size: 15px;
  vertical-align: middle; }

/* Special on-hover styles for user dropdown menu */
.user-menu ul.dropdown-items > li:hover .glyphicon {
  color: #d9534f; }

.user-menu ul.dropdown-items > li:last-child:hover .glyphicon {
  color: #888; }

.user-menu ul.dropdown-items > li:last-child > div:hover .glyphicon {
  color: #d9534f; }

/* Panel Heading Icon */
.panel-heading .panel-title .glyphicon,
.panel-heading .panel-title .glyphicons {
  padding-right: 8px;
  font-size: 16px;
  top: 2px; }

/* Breadcrumb "Home" Icon */
.breadcrumb .glyphicon,
.breadcrumb .glyphicons {
  color: #777;
  font-size: 11px;
  margin-left: 1px;
  top: 0; }

/* Panel Sidemenu Icons */
.panel-sidemenu ul.nav li.active .fa {
  color: #33bfeb; }

.panel-sidemenu ul.nav li a:hover {
  background: none; }

.panel-sidemenu ul.nav li .fa {
  width: 28px;
  color: #BBB;
  font-size: 18px; }

/* Panel Tabs Icons */
.panel-tabs li .glyphicon,
.panel-tabs li .glyphicons,
.panel-tabs li .fa {
  font-size: 14px; }

.panel-tabs .imoon,
.panel-tabs .iconsweets {
  font-size: 14px;
  vertical-align: middle; }

/* Mildly styles a font awesome based icon group
 * used in occasionaly in panel heading. Look at 
 * message widget on index.html for example */
.mini-action-icons .fa {
  position: relative;
  top: 2px;
  padding-right: 10px;
  color: #777;
  font-size: 16px;
  cursor: pointer; }

/* Pricing Table Icons */
.pricing-tables .pricing-icons li .fa-times {
  color: #e74a4a; }

.pricing-tables .pricing-icons li .fa-ellipsis-h {
  color: #555555; }

/* Tab Navigation Icons */
.nav-tabs li .fa {
  font-size: 14px; }

.nav-tabs li .fa.fa-caret-down {
  font-size: 12px; }

/* Timeline Widget Icons */
.timeline-widget span.glyphicons {
  z-index: 11;
  position: relative;
  top: 2px;
  width: auto;
  padding: 6px;
  font-size: 18px;
  border-radius: 50%;
  -webkit-box-shadow: 1px 1px 2px #AAA;
  box-shadow: 1px 1px 2px #AAA;
  text-shadow: 0 1px #ffffff;
  background-color: #f0f0f0;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%);
  }

/* Flag Icons */
.flag-xs,
.flag-sm,
.flag,
.flag-lg {
  display: inline-block;
  vertical-align: middle; }

.flag-xs {
  width: 16px;
  height: 16px;
  background: url(../img/flag_icons/flag-xs.png) no-repeat top left; }

.flag-sm {
  width: 32px;
  height: 32px;
  background: url(../img/flag_icons/flag-sm.png) no-repeat top left; }

.flag-sm.flag-fr {
  background-position: 0 0; }

.flag-sm.flag-de {
  background-position: 0 -33px; }

.flag-sm.flag-in {
  background-position: 0 -66px; }

.flag-sm.flag-es {
  background-position: 0 -99px; }

.flag-sm.flag-tr {
  background-position: 0 -132px; }

.flag-sm.flag-us {
  background-position: 0 -165px; }

.flag-xs.flag-fr {
  background-position: 0 0; }

.flag-xs.flag-de {
  background-position: 0 -17px; }

.flag-xs.flag-es {
  background-position: 0 -34px; }

.flag-xs.flag-tr {
  background-position: 0 -51px; }

.flag-xs.flag-us {
  background-position: 0 -68px; }

/*===============================================
  B. Labels
================================================= */
.label {
  padding: .3em .7em .4em;
  font-size: 84%;
  font-weight: 600;
  line-height: 24px; }

/* Label Sizes - ".label" required */
.label-sm {
  padding: .1em .65em .2em;
  font-size: 75%; }

.label-lg {
  padding: .4em .9em .5em;
  font-size: 95%; }

/* Label Shapes - ".label" required */
.label.label-rounded {
  padding: .2em 0.85em .3em;
  border-radius: 1em; }

.label-sm.label-rounded {
  padding: .1em .65em .2em; }

.label-lg.label-rounded {
  padding: .4em .9em .5em; }

/* Custom Bootstrap Label */
label.error {
  color: #d9534f;
  font-size: 12px;
  font-weight: 600; }

/*===============================================
  C. Badges
================================================= */
.badge {
  padding: 3px 7px;
  font-size: 12px;
  font-weight: 600; }

/* Badge Sizes - ".badge" required */
.badge-sm {
  padding: 2px 6px;
  font-size: 11px; }

.badge-lg {
  padding: 4px 8px; }

/*===============================================
  D. Alerts
================================================= */
/* Alert Sizes */
.alert {
  font-size: 14px; }

.alert-sm {
  padding: 8px 35px 8px 15px; }

.alert-lg {
  padding: 25px 35px 25px 15px;
  font-size: 16px; }

/* Alert Dismiss Icon */
.alert-dismissable .close {
  color: #232222; }

/*===============================================
  E. Media Objects 
================================================= */
.media {
  border-bottom: 1px solid #ededed; }

.media,
.media .media {
  margin-top: 15px; }

.media:last-child {
  border-bottom: none; }

.media > .pull-left {
  margin-right: 12px; }

.media-heading small {
  font-size: 11px; }

/*===============================================
  F. Thumbnails 
================================================= */
.thumbnail {
  margin-bottom: 0; }

.thumbnail-xs {
  max-width: 35px;
  padding: 1px;
  border: 2px solid #AAA;
  box-shadow: 0 0 1px #000 inset; }

.thumbnail-sm {
  max-width: 40px;
  padding: 1px;
  border: 2px solid #AAA;
  box-shadow: 0 0 1px #000 inset; }

.thumbnail-border-lg {
  border-width: 3px; }

.thumbnail.rounded {
  border-radius: 64px; }

/*===============================================
  G. Buttons
================================================= */
/* Button Settings */
.btn {
  color: white;
  outline: none;
  line-height: 1.47;
  border-radius: 2px; }

.btn:focus, .btn:active:focus, .btn.active:focus {
  color: white;
  outline: none; }

.btn.btn-default:focus, .btn.btn-default:active:focus, .btn.btn-default.active:focus {
  color: #777777;
  outline: none; }

.btn-link {
  color: #444444; }

.btn-link:hover {
  color: #444444; }

/* Button Sizes */
.btn-xs {
  padding: 2px 6px;
  border-radius: 2px; }

.btn-sm {
  line-height: 1.5; }

.btn-lg {
  line-height: 1.33; }

/* Button Shapes */
.btn-square {
  border-radius: 0; }

/* Button Colors 
* These are only colors that follow Bootstraps
* color scheme. Fusion includes many more colors
* are at end of this doc or in the SASS Partials */
.btn-default,
.bg-default {
  text-shadow: none; }

.btn-success.btn-gradient,
.bg-success.bg-gradient {
  border-color: #3f9d00;
  background-color: #44ab00; }

.btn-info.btn-gradient,
.bg-info.bg-gradient {
  border-color: #269abc;
  background-color: #14abd8; }

.btn-primary.btn-gradient,
.bg-primary.bg-gradient {
  background-color: #0088cc; }

.btn-warning.btn-gradient,
.bg-warning.bg-gradient {
  background-color: #f28900; }

.btn-danger.btn-gradient,
.bg-danger.bg-gradient {
  background-color: #d3332e; }

.btn-default.btn-gradient,
.bg-default.bg-gradient {
  background-color: #f0f0f0; }

/* Adds a custom "Alert"(purple) button to 
 * the Bootstrap button lineup */
.btn-alert {
  background-color: #7857ca; }

.btn-alert.btn-gradient {
  background-color: #5d3ab5; }

.btn-alert .caret {
  border-top-color: white; }

/* Button Hover effect */
.btn:hover {
  color: #FFF;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.13) 1%, rgba(255, 255, 255, 0.13) 100%);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.13) 1%, rgba(255, 255, 255, 0.13) 100%); }

.btn-gradient:hover,
.bg-gradient:hover {
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.45) 1%, rgba(255, 255, 255, 0.15) 100%);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.45) 1%, rgba(255, 255, 255, 0.15) 100%); }

/* Button Gradients 
 * Gradients are created using a transparent gradient 
 * overlay. This way you can transform any element 
 * with a background color into a gradient without 
 * having to use additional colors */
.btn-gradient,
.bg-gradient {
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  background-color: "";
  background-repeat: repeat-x;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 1%, rgba(255, 255, 255, 0.15) 100%);
  }

/* Custom Themed Button group using all default bootstrap classes */
.btn-group.btn-group-themed .btn-default:hover,
.btn-group.btn-group-themed .btn-default:focus,
.btn-group.btn-group-themed .btn-default:active,
.btn-group.btn-group-themed .btn-default.active,
.btn-group.btn-group-themed .open .dropdown-toggle.btn-default {
  color: #6b3fa2;
  border-color: #cbc0f8;
  background-color: #e3def8;
  box-shadow: none; }

/* Button Dropdown Menu Sizes */
.dropdown-menu.dropdown-sm {
  min-width: 120px; }

.dropdown-menu.dropdown-sm li {
  margin-bottom: 0; }

.dropdown-menu.dropdown-sm li a {
  font-size: 13px;
  padding: 2px 12px; }

/*===============================================
  H. Progress Bars
================================================= */
.progress {
  height: 18px;
  background-color: #ececec;
  box-shadow: none; }

.progress-bar {
  line-height: 18px; }

/* Progress Bar Sizes - ".progress" always required */
.progress.progress-sm {
  height: 12px;
  border-radius: 2px; }

.progress.progress-sm .progress-bar {
  line-height: 12px; }

.progress.progress-lg {
  height: 28px; }

.progress.progress-lg .progress-bar {
  line-height: 28px; }

/*===============================================
  I. Field Elements
================================================= */
/* Default Select List */
select {
  cursor: pointer; }

/* Bootstrap Help Block */
.help-block {
  margin-top: 7px;
  color: #888; }

.radio-inline, .checkbox-inline {
  line-height: 20px; }

/* Input Label  */
label {
  font-weight: 600; }

/* Input Design */
.form-control {
  box-shadow: none;
  border-radius: 0;
  border-color: #DDD;
  width:165px; }

/* Input Sizes */
.input-xs {
  padding: 4px 10px;
  height: 26px;
  font-size: 12px;
  line-height: 1.6; }

/* Input Addon */
.input-group-addon {
  min-width: 40px;
  color: #a287d4;
  background-color: #fafafa;
  border-radius: 0;
  border-color: #DDD; }

/* Input Focus */
.form-control:focus {
  border-color: #b18cde;
  box-shadow: none; }

/* Disabled Input */
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
  background-color: #fafafa; }

/* Alternate Text Field Style - Gradient */
.text-field-alt {
  text-shadow: 0 1px #ffffff;
  background-color: #f0f0f0;
    min-height: 40px;
    border-radius: 1px;
    border: 1px solid #cccccc;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%);
}

/*===============================================
  J. Checkboxes - Custom Fusion exlcusive
                  pure CSS Checkboxes
================================================= */
.cBox {
  position: relative; }

.cBox.cBox-inline {
  display: inline-block; }

.cBox.cBox-inline + .cBox.cBox-inline {
  margin-left: 18px; }

.cBox input {
  margin: 0; }

.cBox label {
  cursor: pointer;
  color: #AAA;
  font-size: 11px;
  font-weight: 400;
  padding-left: 10px;
  margin: 0; }

.cBox label:before {
  content: "";
  cursor: pointer;
  position: absolute;
  width: 17px;
  height: 17px;
  top: 0;
  left: 0;
  border-radius: 2px;
  border: 1px solid #CCC;
  border-color: rgba(0, 0, 0, 0.07) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.18);
  background-color: #f2f2f2;
  /*
  border-color: #cccccc rgba(0, 0, 0, 0.19) rgba(0, 0, 0, 0.18);
  background-color: #f28900;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0.1) 100%);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff',endColorstr='#00ffffff',GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);*/ }

.cBox.cBox-gradient label:before {
  background-repeat: repeat-x;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 1%, rgba(255, 255, 255, 0.15) 100%);
  }

.cBox label:after {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  content: '';
  position: absolute;
  width: 11px;
  height: 5px;
  background: transparent;
  top: 5px;
  left: 3px;
  border: 3px solid #555;
  border-top: none;
  border-right: none;
  -webkit-transform: rotate(-58deg);
  -moz-transform: rotate(-58deg);
  -o-transform: rotate(-58deg);
  -ms-transform: rotate(-58deg);
  transform: rotate(-58deg); }

.cBox input[type=checkbox]:checked + label:after {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1; }

/* Checkboxes - Custom Colors */
.cBox.facebook-bg label:before {
  background-color: #9de0f5; }

.cBox.twitter-bg label:before {
  background-color: #a8e9ea; }

.cBox.pinterest-bg label:before {
  background-color: #ffac9c; }

.cBox.instagram-bg label:before {
  background-color: #fbb882; }

/*===============================================
  K. Switches - Created with pure CSS
================================================= */
div.switch label {
  display: block;
  position: relative;
  color: transparent;
  background: #ddd;
  text-indent: 100%;
  width: 52px;
  height: 26px;
  cursor: pointer;
  transition: left 0.15s ease-out; }

div.switch input {
  display: none; }

div.switch input + label {
  margin-left: 0;
  margin-right: 0; }

div.switch label:after {
  content: "";
  display: block;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  -webkit-transition: left .15s ease-out;
  -moz-transition: left .15s ease-out;
  transition: left 0.15s ease-out; }

div.switch input:checked + label {
  background: #2ba6cb; }

div.switch input:checked + label:after {
  left: 29px; }

div.switch label {
  width: 52px;
  height: 26px; }

div.switch label:after {
  width: 19px;
  height: 19px; }

div.switch input:checked + label:after {
  left: 29px; }

div.switch label {
  color: transparent;
  background: #dddddd; }

div.switch label:after {
  background: white; }

div.switch input:checked + label {
  background: #2ba6cb; }

/* Switch Sizes */
div.switch.switch-lg label {
  width: 65px;
  height: 32px; }

div.switch.switch-lg label:after {
  width: 26px;
  height: 26px; }

div.switch.switch-lg input:checked + label:after {
  left: 35px; }

div.switch.switch-sm label {
  width: 45px;
  height: 22px; }

div.switch.switch-sm label:after {
  width: 16px;
  height: 16px; }

div.switch.switch-sm input:checked + label:after {
  left: 26px; }

div.switch.switch-xs label {
  width: 39px;
  height: 19px; }

div.switch.switch-xs label:after {
  width: 13px;
  height: 13px; }

div.switch.switch-xs input:checked + label:after {
  left: 22px; }

div.switch.radius label {
  border-radius: 4px; }

div.switch.radius label:after {
  border-radius: 3px; }

/* Switch Option - Rounded */
div.switch.round {
  border-radius: 1000px; }

div.switch.round label {
  border-radius: 26px; }

div.switch.round label:after {
  border-radius: 26px; }

/* Switch Option - Inline */
.switch.switch-inline {
  display: inline-block; }

.switch.switch-inline + .switch.switch-inline {
  margin-left: 15px; }

/*===============================================
  L. Tables
================================================= */
/* Table first item changes */
.table tbody > tr:first-child > td {
  border-top: 0; }

/* Table-striped item changes */
.table-striped > tbody > tr:nth-child(even) > td {
  background-color: #f8f8f8;
  border-bottom: 1px dashed #c9c9c9;
  padding: 8px; }

.table-striped > tbody > tr:nth-child(odd) > td {
  background-color: #FFF;
  border-bottom: 1px dashed #c9c9c9;
  padding: 8px; }

/* Rounded */
.table-curved > tbody > tr > td:first-child {
  border-radius: 4px 0 0 4px; }

.table-curved > tbody > tr > td:last-child {
  border-radius: 0 4px 4px 0; }

/*===============================================
  M. Pricing Tables
================================================= */
/* Regular Pricing Plan */
.pricing-tables .pricing-plan {
  padding: 0 0 20px 0;
  margin: 30px -16px 20px -16px;
  border: 1px solid #CCC;
  background-color: #f6f6f6;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }

/* Pricing Table Title */
.pricing-tables .pricing-title {
  padding: 25px 5px 20px;
  border-bottom: 1px solid #DDD; }

.pricing-tables .pricing-title h3 {
  margin-bottom: 0;
  font-weight: 200;
  text-transform: none;
  font-size: 26px;
  color: #555; }

/* Pricing Table Cost Figure */
.pricing-info {
  margin: 20px 0; }

.pricing-info .currency-sign {
  color: #333;
  font-size: 26px;
  font-weight: 200;
  display: inline-block;
  vertical-align: top;
  margin-left: -20px;
  padding-left: 5px;
  padding-top: 6px; }

.pricing-info h2 {
  display: inline-block;
  margin-bottom: 0;
  color: #444;
  font-size: 54px;
  font-weight: 600; }

.pricing-info h6 {
  color: #888;
  font-weight: 200;
  margin: 4px 0 0; }

/* Pricing Table Item Features */
.pricing-features ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #DDD; }

.pricing-features li {
  padding: 10px 0;
  border-bottom: 1px solid #DDD;
  background-color: #FFF;
  color: #999;
  margin: 0; }

.pricing-tables .pricing-features li b {
  font-weight: 600; }

.pricing-tables .pricing-features li i.fa {
  font-size: 15px;
  color: #777;
  padding-right: 8px; }

/* Pricing Table Icons */
.pricing-tables .pricing-icons ul {
  list-style: none;
  padding: 0;
  margin: 0; }

.pricing-tables .pricing-icons li {
  padding: 10px 0;
  border-bottom: 1px solid #DDD;
  background-color: #FFF;
  font-size: 18px;
  margin: 0; }

/* Pricing Table Sign Up Button*/
.pricing-tables a.btn {
  margin-top: 25px;
  padding: 8px 26px; }

/* Hero Pricing Plan Modifications */
.hero-plan {
  z-index: 10; }

.hero-plan .pricing-plan {
  background-color: #f6f6f6;
  padding: 0 0 20px 0;
  margin: 0 -17px 20px -17px;
  border-bottom: 1px solid #BBB;
  -webkit-box-shadow: 0 0 20px rgba(100, 100, 100, 0.2);
  box-shadow: 0 0 20px rgba(100, 100, 100, 0.2); }

.hero-plan .pricing-plan .pricing-title {
  color: #FFF;
  margin: -1px -1px 0 -1px; }

.hero-plan .pricing-plan .pricing-title h3 {
  color: #FFF;
  font-weight: 600; }

.hero-plan .pricing-plan .pricing-subtitle {
  text-transform: uppercase;
  font-size: 12px;
  margin-top: 4px;
  font-weight: 600; }

.hero-plan .pricing-plan a.btn {
  margin: 40px 0 20px; }

/*===============================================
  N. Tabs
================================================= */
/* TAB CONTAINER */
.tab-block {
  position: relative; }

.tab-block .tab-content {
  overflow: auto;
  background-color: #FFF; }

/* TAB CONTENT PANEL */
.tab-content {
  position: relative;
  z-index: 10;
  min-height: 125px;
  padding: 16px 12px;
  border: 1px solid #CCC; }

/* TAB NAVIGATION */
.nav-tabs {
  position: relative;
  border: 0; }

.nav-tabs > li {
  float: left;
  margin-bottom: -1px; }

.nav-tabs > li > a {
  position: relative;
  z-index: 9;
  padding: 9px 16px;
  margin-right: -1px;
  font-weight: 700;
  color: #777;
  font-size: 12px;
  border-color: #CFCFCF;
  border-radius: 0;
  background: #fafafa; }

.nav-tabs > li:first-child > a {
  margin-left: 0; }

/* TAB NAVIGATION STATES */
.nav-tabs > li > a:hover {
  color: #555;
  border-color: #CFCFCF; }

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
  cursor: default;
  position: relative;
  z-index: 12;
  color: #555555;
  background: #FFF;
  border-color: #CFCFCF;
  border-bottom: 1px solid #FFF; }

/* open state for dropdown menus in nav 
 * containers. Also a direct bootstrap override */
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
  color: #428bca;
  border-color: #CFCFCF; }

/* TAB NAVIGATION - ALT STYLE: BORDER */
.tabs-border.nav-tabs > li.active > a, .tabs-border-bottom .nav-tabs > li.active > a {
  margin-top: -1px;
  border-top: 2px solid #a287d4; }

/* TAB NAVIGATION - ALT STYLE: BORDER - BOTTOM */
.tabs-border-bottom.nav-tabs > li > a, .tabs-border-bottom .nav-tabs > li > a {
  color: #BBB;
  font-weight: 600;
  background: #f9f9f9; }

.tabs-border-bottom.nav-tabs > li.active > a, .tabs-border-bottom .nav-tabs > li.active > a {
  color: #555;
  font-weight: 600;
  margin-bottom: -1px;
  background: #f7f7f7;
  border-color: #DDD;
  border-bottom: 2px solid #a287d4; }

/* TAB NAVIGATION - ALT STYLE: BACKGROUND */
.tabs-bg.nav {
  background: #f5f5f5;
  border: 1px solid #CCC;
  border-bottom: none;
  padding: 10px 10px 0; }

/* TABS - Float Right */
.nav-tabs.tabs-right > li {
  float: right; }

.nav-tabs.tabs-right > li:first-child > a {
  margin-right: 0; }

/* TABS - NAVIGATION BELOW */
.tabs-below {
  position: relative; }

.tabs-below > li {
  float: left;
  margin-top: -1px; }

.tabs-below > li > a {
  position: relative;
  z-index: 9;
  margin-right: -1px;
  padding: 11px 16px;
  font-size: 12px;
  color: #777;
  font-weight: 700;
  border: 1px solid #CFCFCF;
  background: #fafafa; }

/* TAB NAVIGATION STATES */
.tabs-below > li.active > a, .tabs-below > li.active > a:hover, .tabs-below > li.active > a:focus {
  cursor: default;
  position: relative;
  z-index: 12;
  color: #555555;
  background: #FFF;
  border-color: #CFCFCF;
  border-top: 1px solid #FFF; }

/* TAB NAVIGATION - ALT STYLE: BORDER */
.tabs-border.tabs-below > li.active > a, .tabs-border .tabs-below > li.active > a {
  margin-bottom: -1px;
  border-bottom: 2px solid #c7b7e5; }

/* TAB NAVIGATION - ALT STYLE: BACKGROUND */
.tabs-bg.tabs-below {
  background: #f5f5f5;
  border: 1px solid #CCC;
  border-top: none;
  padding: 0 10px 6px; }

/* TABS - NAVIGATION LEFT */
.tabs-left {
  float: left; }

.tabs-left > li {
  float: none;
  margin: 0 -1px -1px 0; }

.tabs-left > li > a {
  padding: 12px 16px;
  color: #777;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid transparent;
  border-color: #CFCFCF;
  background: #fafafa; }

/* TAB NAVIGATION STATES */
.tabs-left > li.active > a, .tabs-left > li.active > a:hover, .tabs-left > li.active > a:focus {
  color: #555;
  border-color: #CCC #FFF #CCC #CCC;
  cursor: default;
  position: relative;
  z-index: 12;
  background: #FFF; }

/* TAB NAVIGATION - ALT STYLE: BORDER */
.tabs-border.tabs-left > li.active > a, .tabs-border .tabs-left > li.active > a {
  margin-left: -1px;
  border-left: 2px solid #c7b7e5; }

/* WELL TABS - GREY MICRO NAV TABS */
.well-tabs {
  position: relative; }

.well-tabs li {
  float: left;
  margin: 4px 6px; }

.well-tabs li:first-child {
  margin-left: 0; }

.well-tabs li a {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 8px;
  line-height: 15px;
  border-radius: 4px;
  color: #8457bb;
  border: 1px solid #beaff9;
  background-color: #dfd9f7; }

.well-tabs li a:hover, .well-tabs li.active a {
  background-color: #fff; }

/* Same style but inversed colors */
.well-tabs-inverse li a {
  font-size: 11px;
  font-weight: 600;
  color: #888;
  padding: 6px 8px;
  line-height: 15px;
  background: transparent;
  border-radius: 4px;
  border: 1px solid #ddd; }

.well-tabs-inverse li a:hover, .well-tabs-inverse li.active a {
  color: #6b3fa2;
  border-color: #cbc0f8;
  background-color: #e3def8; }

/*===============================================
  O. Paginations
================================================= */
/* MINI PAGERS */
.pager {
  margin: 5px 0;
  cursor: pointer; }

.pager li > a, .pager li > span {
  font-size: 14px; }

.pager.pager-sm li > a, .pager.pager-sm li > span {
  font-size: 12px; }

.pager.pager-lg li > a, .pager.pager-lg li > span {
  font-size: 16px; }

/* PAGINATIONS */
.pagination {
  margin: 5px 0;
  cursor: pointer; }

/* ROUNDED PAGINATION */
.pagination-rounded > li:first-child > a {
  border-radius: 50% 0 0 50%; }

.pagination-rounded > li:last-child > a {
  border-radius: 0 50% 50% 0; }

/* ALT STYLE */
.pagination-alt > li > a {
  margin: 0 4px;
  border-radius: 2px;
  font-weight: 600;
  color: #666;
  text-shadow: 0 1px #FFF;
  padding: 4px 11px;
  border-color: #ccc;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  background-repeat: repeat-x;
  background-image: linear-gradient(to bottom, #ffffff 1%, #f1f1f1 100%);
  }

.pagination-alt > li.active > a {
  background-color: #555;
  background-image: none;
  border-color: #444; }

/* SIZES FOR ALT STYLE */
.pagination-alt.pagination-sm > li > a {
  margin: 0 3px;
  font-weight: 700;
  padding: 4px 9px; }

.pagination-alt.pagination-lg > li > a {
  margin: 0 5px;
  padding: 4px 13px; }

/* pagination-alt fixes */
.pagination-alt.pagination-sm > li:first-child > a, .pagination-alt.pagination-lg > li:first-child > a {
  margin-left: 0; }

/*===============================================
  P. Bootstrap Modals
================================================= */
.modal-backdrop.in {
  opacity: 0.7; }

/* Modal sizes - element always requires
 * default ".modal-dialog" class */
.modal-dialog-sm {
  width: auto; }

@media screen and (min-width: 768px) {
  .modal-dialog {
    padding-top: 50px; }

  .modal-dialog-sm {
    width: 425px; } }
/* Modal Header */
.modal-header {
  position: relative;
  height: 45px;
  line-height: 35px;
  padding: 5px 15px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 0;
  border-bottom: 1px solid #c9c9c9;
  background: #f2f2f2; }

.modal-header button,
.modal-title {
  line-height: inherit; }

.modal-footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #dddddd;
  border-radius: 0; }

/*===============================================
  Q. Custom Modals
================================================= */
/* Login Form Modal */
#formModal .modal-content {
  width: 400px;
  margin: 0 auto;
  position: relative; }

#formModal .modal-body {
  padding: 15px 20px 0 20px; }

#formModal #login-avatar {
  margin: 15px 20px 25px;
  padding-bottom: 25px;
  border-bottom: 1px dashed #DDD; }

#formModal #login-avatar img {
  display: block;
  margin: 0 auto;
  padding: 5px;
  border: 2px solid #DDD; }

#formModal .login-alert {
  font-size: 13px;
  padding: 9px 13px; }

/*===============================================
  R. Content Heading Bar
================================================= */
.content-header {
  border-radius: 4px;
  background: #f6f6f6;
  padding: 12px 15px;
  border: 1px solid #CCC; }

/*===============================================
  R. Boostrap Popover
================================================= */
.popover {
  z-index: 1100; }

/*===============================================
  S. Boostrap List
================================================= */
.list-unstyled,
.list-unstyled li {
  margin: 0; }

/*=================================================
  v. HELPERS
	 A. General
     B. Font Size 
	 C. Table Layout
	 D. Padding
	 E. Margin
	 F. Line Height
	 G. Borders
	 H. Max Width
===================================================
  A. General/Misc Helpers
=================================================== */
/* overflow Helpers */
.overflow-v {
  overflow: visible !important; }

.overflow-h {
  overflow: hidden !important; }

/* Center Grid Column Helper */
.center-column {
  float: none;
  margin-left: auto;
  margin-right: auto;
  display: block; }

/* Vertical Align Helpers */
.va-t {
  vertical-align: top !important; }

.va-m {
  vertical-align: middle !important; }

.va-b {
  vertical-align: bottom !important; }

.va-s {
  vertical-align: super !important; }

/* Relative Position Helper */
.posr {
  position: relative !important; }

/* Inline Block Helper */
.ib, .inline-object {
  display: inline-block !important; }

/* pointer cursor */
.cursor {
  cursor: pointer !important; }

/* Useful for emphasizing a disabled input */
.option-disabled {
  opacity: 0.6; }

/* unstyled input */
.input-unstyled,
.input-unstyled:hover,
.input-unstyled:focus {
  border: none;
  background: none;
  box-shadow: none;
  outline: none; }

/*===================================================
  B. Table Layout Helpers - specifically for widgets
===================================================== */
.table-layout {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0; }

/* table-layout helper content */
.table-layout > div {
  display: table-cell;
  float: none; }

@media (max-width: 1300px) {
  .table-layout.table-clear-md,
  .table-layout.table-clear-md > div {
    display: block;
    float: none; } }
@media (max-width: 992px) {
  .table-layout.table-clear-sm,
  .table-layout.table-clear-sm > div {
    display: block;
    float: none; } }
@media (max-width: 767px) {
  .table-layout.table-clear-xs,
  .table-layout.table-clear-xs > div {
    display: block;
    float: none; } }
/*===============================================
  C. Font Size Helpers
================================================= */
.fs3 {
  font-size: 4px !important; }

.fs4 {
  font-size: 4px !important; }

.fs5 {
  font-size: 5px !important; }

.fs6 {
  font-size: 6px !important; }

.fs7 {
  font-size: 7px !important; }

.fs8 {
  font-size: 8px !important; }

.fs9 {
  font-size: 9px !important; }

.fs10 {
  font-size: 10px !important; }

.fs11 {
  font-size: 11px !important; }

.fs12 {
  font-size: 12px !important; }

.fs13 {
  font-size: 13px !important; }

.fs14 {
  font-size: 14px !important; }

.fs15 {
  font-size: 15px !important; }

.fs16 {
  font-size: 16px !important; }

.fs18 {
  font-size: 18px !important; }

.fs20 {
  font-size: 20px !important; }

.fs22 {
  font-size: 22px !important; }

.fs24 {
  font-size: 24px !important; }

.fs26 {
  font-size: 26px !important; }

.fs28 {
  font-size: 28px !important; }

.fs30 {
  font-size: 30px !important; }

.fs35 {
  font-size: 35px !important; }

.fs40 {
  font-size: 40px !important; }

.fs45 {
  font-size: 45px !important; }

.fs50 {
  font-size: 50px !important; }

/*===============================================
  D. Padding Helpers
================================================= */
.pn {
  padding: 0 !important; }

.p1 {
  padding: 1px !important; }

.p2 {
  padding: 2px !important; }

.p3 {
  padding: 3px !important; }

.p4 {
  padding: 4px !important; }

.p5 {
  padding: 5px !important; }

.p6 {
  padding: 6px !important; }

.p7 {
  padding: 7px !important; }

.p8 {
  padding: 8px !important; }

.p10 {
  padding: 10px !important; }

.p15 {
  padding: 15px !important; }

.p20 {
  padding: 20px !important; }

.p25 {
  padding: 25px !important; }

.p30 {
  padding: 30px !important; }

.p35 {
  padding: 35px !important; }

.p40 {
  padding: 40px !important; }

.p50 {
  padding: 50px !important; }

.ptn {
  padding-top: 0 !important; }

.pt5 {
  padding-top: 5px !important; }

.pt10 {
  padding-top: 10px !important; }

.pt15 {
  padding-top: 15px !important; }

.pt20 {
  padding-top: 20px !important; }

.pt25 {
  padding-top: 25px !important; }

.pt30 {
  padding-top: 30px !important; }

.pt35 {
  padding-top: 35px !important; }

.pt40 {
  padding-top: 40px !important; }

.pt50 {
  padding-top: 50px !important; }

.prn {
  padding-right: 0 !important; }

.pr5 {
  padding-right: 5px !important; }

.pr10 {
  padding-right: 10px !important; }

.pr15 {
  padding-right: 15px !important; }

.pr20 {
  padding-right: 20px !important; }

.pr25 {
  padding-right: 25px !important; }

.pr30 {
  padding-right: 30px !important; }

.pr35 {
  padding-right: 35px !important; }

.pr40 {
  padding-right: 40px !important; }

.pr50 {
  padding-right: 50px !important; }

.pbn {
  padding-bottom: 0 !important; }

.pb5 {
  padding-bottom: 5px !important; }

.pb10 {
  padding-bottom: 10px !important; }

.pb15 {
  padding-bottom: 15px !important; }

.pb20 {
  padding-bottom: 20px !important; }

.pb25 {
  padding-bottom: 25px !important; }

.pb30 {
  padding-bottom: 30px !important; }

.pb35 {
  padding-bottom: 35px !important; }

.pb40 {
  padding-bottom: 40px !important; }

.pb50 {
  padding-bottom: 50px !important; }

.pln {
  padding-left: 0 !important; }

.pl5 {
  padding-left: 5px !important; }

.pl10 {
  padding-left: 10px !important; }

.pl15 {
  padding-left: 15px !important; }

.pl20 {
  padding-left: 20px !important; }

.pl25 {
  padding-left: 25px !important; }

.pl30 {
  padding-left: 30px !important; }

.pl35 {
  padding-left: 35px !important; }

.pl40 {
  padding-left: 40px !important; }

.pl50 {
  padding-left: 50px !important; }

/*===============================================
  E. Margin Helpers
================================================= */
.mn {
  margin: 0 !important; }

.m1 {
  margin: 1px !important; }

.m2 {
  margin: 2px !important; }

.m3 {
  margin: 3px !important; }

.m4 {
  margin: 4px !important; }

.m5 {
  margin: 5px !important; }

.m8 {
  margin: 8px !important; }

.m10 {
  margin: 10px !important; }

.m15 {
  margin: 15px !important; }

.m20 {
  margin: 20px !important; }

.m25 {
  margin: 25px !important; }

.m30 {
  margin: 30px !important; }

.m35 {
  margin: 35px !important; }

.m40 {
  margin: 40px !important; }

.m50 {
  margin: 50px !important; }

.mtn {
  margin-top: 0 !important; }

.mt5 {
  margin-top: 5px !important; }

.mt10 {
  margin-top: 10px !important; }

.mt15 {
  margin-top: 15px !important; }

.mt20 {
  margin-top: 20px !important; }

.mt25 {
  margin-top: 25px !important; }

.mt30 {
  margin-top: 30px !important; }

.mt35 {
  margin-top: 35px !important; }

.mt40 {
  margin-top: 40px !important; }

.mt50 {
  margin-top: 50px !important; }

.mrn {
  margin-right: 0 !important; }

.mr5 {
  margin-right: 5px !important; }

.mr10 {
  margin-right: 10px !important; }

.mr15 {
  margin-right: 15px !important; }

.mr20 {
  margin-right: 20px !important; }

.mr25 {
  margin-right: 25px !important; }

.mr30 {
  margin-right: 30px !important; }

.mr35 {
  margin-right: 35px !important; }

.mr40 {
  margin-right: 40px !important; }

.mr50 {
  margin-right: 50px !important; }

.mbn {
  margin-bottom: 0 !important; }

.mb5 {
  margin-bottom: 5px !important; }

.mb10 {
  margin-bottom: 10px !important; }

.mb15 {
  margin-bottom: 15px !important; }

.mb20 {
  margin-bottom: 20px !important; }

.mb25 {
  margin-bottom: 25px !important; }

.mb30 {
  margin-bottom: 30px !important; }

.mb35 {
  margin-bottom: 35px !important; }

.mb40 {
  margin-bottom: 40px !important; }

.mb50 {
  margin-bottom: 50px !important; }

.mln {
  margin-left: 0 !important; }

.ml5 {
  margin-left: 5px !important; }

.ml10 {
  margin-left: 10px !important; }

.ml15 {
  margin-left: 15px !important; }

.ml20 {
  margin-left: 20px !important; }

.ml25 {
  margin-left: 25px !important; }

.ml30 {
  margin-left: 30px !important; }

.ml35 {
  margin-left: 35px !important; }

.ml40 {
  margin-left: 40px !important; }

.ml50 {
  margin-left: 50px !important; }

/*===============================================
  F. LineHeight Helpers
================================================= */
.lh0 {
  line-height: 0 !important; }

.lh5 {
  line-height: 5px !important; }

.lh10 {
  line-height: 10px !important; }

.lh15 {
  line-height: 15px !important; }

.lh20 {
  line-height: 20px !important; }

.lh25 {
  line-height: 25px !important; }

.lh30 {
  line-height: 30px !important; }

.lh35 {
  line-height: 35px !important; }

.lh40 {
  line-height: 40px !important; }

/*===============================================
  G. Border Helpers
================================================= */
/* Default Border */
.border {
  border: 1px solid #DDD; }

.border-left {
  border-left: 1px solid #DDD; }

.border-right {
  border-right: 1px solid #DDD; }

.border-top {
  border-top: 1px solid #DDD; }

.border-bottom {
  border-bottom: 1px solid #DDD; }

/* Border Radius */
.br0 {
  border-radius: 0px !important; }

.br1 {
  border-radius: 1px !important; }

.br2 {
  border-radius: 2px !important; }

.br3 {
  border-radius: 3px !important; }

.br4 {
  border-radius: 4px !important; }

.br6 {
  border-radius: 6px !important; }

.br8 {
  border-radius: 8px !important; }

.br12 {
  border-radius: 12px !important; }

.br24 {
  border-radius: 24px !important; }

.br64 {
  border-radius: 64px !important; }

/* circle */
/* Border Width */
.bw1 {
  border-width: 1px !important; }

.bw2 {
  border-width: 2px !important; }

.bw3 {
  border-width: 3px !important; }

.bw4 {
  border-width: 4px !important; }

.bw5 {
  border-width: 5px !important; }

/* Border Style */
.bs-dashed {
  border-style: dotted !important; }

/* Disable Border */
.border-left-none {
  border-left: none !important; }

.border-right-none {
  border-right: none !important; }

.border-top-none {
  border-top: none !important; }

.border-bottom-none {
  border-bottom: none !important; }

.border-none {
  border: none !important; }

/*===============================================
  H. Max Width Helpers
================================================= */
.mw10 {
  max-width: 10px !important; }

.mw20 {
  max-width: 20px !important; }

.mw30 {
  max-width: 30px !important; }

.mw35 {
  max-width: 35px !important; }

.mw40 {
  max-width: 40px !important; }

.mw45 {
  max-width: 45px !important; }

.mw50 {
  max-width: 50px !important; }

.mw60 {
  max-width: 60px !important; }

.mw80 {
  max-width: 80px !important; }

.mw100 {
  max-width: 100px !important; }

.mw140 {
  max-width: 140px !important; }

.mw160 {
  max-width: 160px !important; }

.mw180 {
  max-width: 180px !important; }

.mw200 {
  max-width: 200px !important; }

.mw240 {
  max-width: 240px !important; }

.mw280 {
  max-width: 280px !important; }

.mw320 {
  max-width: 320px !important; }

/* ================================================
   VI. WIDGETS
	  A. Table Widget
	  B. Search Bar Widget
	  C. Tile Widget
	  D. Calendar Widget
===================================================
  A. Table Widget
  -------------------------------------------------
  This is a multi-purpose widget. Apply it to
  any table to access table styles. Commonly
  inside a panel.
=================================================== */
.table-checklist td {
  cursor: pointer; }

.table-widget .tab-content {
  padding: 0;
  border: 0;
  overflow: hidden; }

/* Table items (labels, badges, progress bars etc) */
.table-widget .progress {
  width: 80%;
  height: 13px;
  margin: 0; }

.table-widget .label, .table-widget .badge {
  margin-right: 7px; }

/* Tables with the .table-checklist class become clickable
 * if you want text to have a line-through effect on click
 * add the .text-slash class to the element */
.table-checklist tr.task-checked {
  color: #bbbbbb; }

.table-checklist tr.task-checked .text-slash {
  text-decoration: line-through; }

/* Table item checked state - class added via JS */
.table-checklist tr.task-checked .label, .table-checklist tr.task-checked .progress {
  opacity: 0.3; }

/*===============================================
  D. Search Bar Widget
================================================= */
.search-widget {
  position: relative; }

#search-widget {
  height: 85px;
  margin-bottom: 50px;
  padding: 20px 25px;
  background: #f4f7fa;
  border: 1px solid #d8dee6;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset; }

.search-bar-widget {
  float: left;
  width: 82%;
  min-height: 43px;
  padding: 9px 12px 9px 40px; }

#search-widget .search-widget-icon {
  position: absolute;
  top: 14px;
  left: 15px;
  color: #999;
  font-size: 16px; }

#search-widget button {
  float: left;
  width: 16%;
  margin-left: 2%;
  padding: 10px;
  font-weight: 600; }

/*===============================================
  B. Widget Tile - Full Icon BG
================================================= */
.icon-bg {
  position: absolute;
  opacity: 0.5;
  right: 0;
  top: 0;
  line-height: 100px;
  font-size: 100px; }

/*===============================================
  D. Calendar Widget
================================================= */
#calendar {
  position: relative; }

#external-events {
  padding: 15px 10px;
  border: 1px dashed #CCC;
  background: #eee;
  min-height: 65px;
  margin-bottom: 20px; }

.external-event {
  display: inline-block;
  width: 200px;
  max-width: 20%;
  font-weight: 600;
  margin-right: 10px;
  padding: 7px 10px;
  color: #FFF;
  cursor: pointer;
  border-radius: 2px;
  background-color: #a389d5; }

.fc-header .fc-button {
  height: 26px;
  padding: 1px 10px;
  background-color: #f7f7f7;
  color: #666;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  border: 1px solid #CCC;
  border-radius: 1px;
  text-shadow: 0 1px #ffffff;
  background-repeat: repeat-x;
    margin: 0;
    background-image: linear-gradient(to bottom, #ffffff 1%, #f1f1f1 100%);
}

table.fc-header {
  background: #f5f5f5;
  border-radius: 4px;
  border: 1px solid #CCC;
  margin-bottom: 20px; }

.fc-header td.fc-header-left,
.fc-header td.fc-header-center,
.fc-header td.fc-header-right {
  padding: 15px;
  vertical-align: center; }

.fc-header-title h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #a87fc6;
  line-height: 24px; }

.fc-header-left .fc-button,
.fc-header-right .fc-button {
  margin-left: 0; }

.fc-button.fc-state-down, .fc-button.fc-state-active {
  background-color: #EEE;
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.05); }

.fc-event {
  font-weight: 600;
  margin: 4px;
  background-color: #c384dd;
  border-color: transparent; }

.fc-state-highlight {
  background-color: #f8f8f8; }

.fc-event-inner {
  padding: 7px; }

/* Content Header */
.fc-content .fc-grid .fc-day-header {
  color: #999;
  font-weight: 600;
  border: 0;
  border-bottom: 1px solid #DDD;
  padding-bottom: 10px; }

/* Content Body/Container */
.fc-content .fc-grid table tbody {
  background: #FFF; }

/* Content Day Number */
.fc-grid .fc-day-number {
  font-size: 13px;
  font-weight: 400;
  color: #AAA;
  padding: 5px 11px; }

/* ================================================
   X. PAGES - In Order
      A. Dashboard.html
	  B. 404/500.html
	  C. Coming-soon.html
	  D. Screenlock.html
	  E. Login.html
	  F. Invoice-page.html
	  G. Gallery.html
	  H. Validation.html
	  I. Sketchpad.html
	  J. Timeline.html
	  K. Profile.html

 * This file is reserved for changes done on
 * a per-page basis. To create independent
 * page layouts an additional class was added 
 * to the pages body. For example login.html
 * has an extra body class of ".login-page"
 
 * Note: Pages not listed here were made using
 * 100% reusable styles placed in theme.css
================================================= 
 A. Dashboard.html - Default
================================================= */
body.dashboard-page .jvectormap-zoomin,
body.dashboard-page .jvectormap-zoomout {
  display: none; }

body.dashboard-page .chat-panel .panel-body {
  max-height: 288px;
  overflow-x: hidden;
  overflow-y: scroll; }

/* A slidedown menu used to store
 * multiple Tile widgets  */
#widget-dropdown {
  margin-bottom: 10px;
  display: block; }

#widget-dropdown .panel {
  background: #f8f8f8; }

.widget-fullscreen {
  position: fixed;
  width: 90%;
  height: 90%;
  top: 5%;
  left: 5%;
  z-index: 9999; }

.widget-backdrop {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9998;
  background: #000;
  opacity: 0.65; }

.dashboard-widget-tray {
  padding-top: 37px; }

/*===============================================
  B. Messages Page
================================================= */
/* Email Listings */
.email-table.table-striped > tbody > tr > td {
  border: none; }

.email-table.table-striped > tbody > tr > td {
  vertical-align: middle; }

.email-table.table-striped > tbody > tr > td:first-child {
  padding-left: 20px; }

.email-table.table-hover > tbody > tr:hover > td {
  cursor: pointer;
  background-color: #ecf3f8 !important; }

.email-table .table-icon {
  width: 55px; }

.email-search,
.email-count {
  color: #999;
  font-size: 14px;
  top: 2px;
  position: relative; }

/* Email Compose */
.messages-page .note-editor .note-toolbar {
  background: #fafafa;
  border: 1px solid #DDD; }

.messages-page .note-editor .note-editable {
  border: 1px solid #DDD;
  border-top: none; }

/*===============================================
  B. Editors Page
================================================= */
body.editors-page .panel .panel-heading {
  border-bottom-color: #CCC; }

/*===============================================
  C. 404/500.html
================================================= */
/* Error search bar */
body.error-page #search-widget {
  background: #f1f1f1; }

/* Error text */
body.error-page .error-icon {
  font-size: 80px;
  position: relative;
  top: -10px; }

body.error-page .error-text {
  font-size: 120px;
  text-align: center;
  text-shadow: 0 2px #FFF;
  color: #888;
  width: 100%; }

/*===============================================
  D. Coming-soon.html
================================================= */
body.coming-soon-page #main {
  background: none; }

body.coming-soon-page #page-logo {
  width: 291px;
  margin: 50px auto 50px; }

body.coming-soon-page .cntSeparator {
  margin: 27px 18px; }

body.coming-soon-page .panel {
  width: 600px;
  margin: 0 auto;
  position: relative; }

body.coming-soon-page .panel-title {
  font-size: 17px;
  float: none; }

body.coming-soon-page .panel-body {
  padding: 40px 26px; }

/*===============================================
  E. Screenlock.html
================================================= */
body.screenlock-page #main {
  background: none; }

body.screenlock-page #page-logo {
  width: 285px;
  margin: 50px auto 80px; }

body.screenlock-page .panel {
  width: 500px;
  margin: 0 auto;
  position: relative; }

body.screenlock-page .login-info {
  margin: 20px 0;
  font-size: 13px; }

body.screenlock-page .login-info .login-name b {
  font-size: 14px; }

body.screenlock-page .login-info .login-email {
  padding-top: 8px;
  font-size: 12px;
  color: #AAA; }

body.screenlock-page .login-avatar {
  padding: 12px 15px 13px 10px;
  margin-right: 20px;
  border-right: 1px dashed #DDD;
  float: left; }

body.screenlock-page .login-avatar img {
  display: block;
  margin: 0 auto;
  padding: 5px;
  border: 2px solid #DDD; }

body.screenlock-page .login-alert {
  padding-top: 15px;
  margin: 5px 0;
  border-top: 1px dashed #DDD;
  clear: both; }

body.screenlock-page .login-alert .alert {
  font-size: 13px;
  padding: 7px 13px;
  margin-bottom: 0; }

/*===============================================
  F. Login.html
================================================= */
body.login-page #main {
  background: none; }

body.login-page #page-logo {
  width: 285px;
  margin: 8px auto 40px; }

body.login-page .panel {
  width: 400px;
  margin: 0 auto;
  position: relative; }

body.login-page .login-avatar {
  margin: 15px 20px 25px;
  padding-bottom: 25px;
  border-bottom: 1px dashed #DDD; }

body.login-page .login-avatar img {
  display: block;
  margin: 0 auto;
  padding: 5px;
  border: 2px solid #DDD; }

body.login-page .login-alert {
  font-size: 13px;
  padding: 9px 13px; }

/*===============================================
  G. Invoice.html
================================================= */
body.invoice-page #invoice-info {
  margin-bottom: 15px; }

/* Invoice table */
body.invoice-page .table-condensed tbody tr td:last-child {
  text-align: right;
  padding-right: 15px; }

/* Summary table */
body.invoice-page #invoice-summary {
  margin: 0; }

/* Summary table header */
body.invoice-page #invoice-summary thead th:first-child {
  text-align: right;
  width: 200px;
  padding-right: 55px; }

body.invoice-page #invoice-summary thead th:last-child {
  width: 50px;
  font-weight: 400; }

/* Summary table rows */
body.invoice-page #invoice-summary tbody tr td {
  border-top: 0; }

body.invoice-page #invoice-summary tbody tr td:first-child {
  text-align: right;
  width: 200px;
  padding-right: 55px; }

/* Summary table last row */
body.invoice-page #invoice-summary tbody tr:last-child td {
  background: #f8f8f8;
  border-top: 1px solid #DDD;
  border-bottom: 1px solid #DDD;
  height: 35px;
  line-height: 35px; }

/* Bottom of page invoice buttons */
body.invoice-page .invoice-buttons {
  position: absolute;
  left: 15px;
  bottom: 10px; }

/*===============================================
  H. Gallery.html
================================================= */
/* GALLERY.HTML */
body.gallery-page .panel-menu .tab-content {
  padding: 0;
  border: 0;
  min-height: 0;
  background: transparent; }

/*===============================================
  I. Validation.html
================================================= */
body.validation-page label.error {
  font-weight: 600;
  color: #d9534f;
  font-size: 12px;
  margin: 6px 0 0 2px; }

/*===============================================
  J. Sketchpad.html
================================================= */
body.sketchpad-page .wPaint-menu-holder {
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.45); }

body.sketchpad-page .chat-panel .media-img img {
  max-width: 50px;
  margin-right: 6px; }

body.sketchpad-page .chat-panel .media-content {
  padding: 6px 12px; }

body.sketchpad-page .chat-panel .media-timestamp {
  margin-bottom: 5px; }

/*===============================================
  K. Timeline.html
================================================= */
body.timeline-page #main {
  min-height: 1400px; }

body.timeline-page #content {
  padding: 8px 35px 50px 35px; }

#timeline {
  position: relative; }

/* Timeline Spine */
#timeline:after {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  margin-left: -2px;
  height: 100%;
  content: "";
  background: #ddd; }

/* Timeline Date Button/Label */
.timeline-divider {
  position: relative;
  margin: 10px 0 45px;
  z-index: 3; }

.timeline-divider .divider-label {
  width: 110px;
  margin: 0 auto;
  padding: 7px;
  text-align: center;
  border: 1px solid #CCC;
  background: #FFF; }

/* Timeline Content Panels */
#timeline .panel {
  position: relative;
  z-index: 11;
  overflow: visible;
  margin-bottom: 30px; }

/* Timeline Panel Arrows */
#timeline .panel:before,
#timeline .panel:after {
  content: "";
  z-index: 2;
  position: absolute;
  top: 10px;
  left: 100%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent #fafafa; }

#timeline .panel:after {
  z-index: 1;
  border-left-color: #666; }

#timeline .right-column .panel:before,
#timeline .right-column .panel:after {
  top: 10px;
  right: 100%;
  left: auto;
  border-width: 8px 12px 8px 0;
  border-color: transparent #fafafa transparent transparent; }

#timeline .right-column .panel:after {
  border-right-color: #666; }

/* Timeline Panel Positioning */
#timeline > .row > .left-column .timeline-item {
  padding-right: 30px; }

#timeline > .row > .right-column .timeline-item {
  padding-left: 30px; }

#timeline > .row > .right-column {
  margin-top: 80px; }

#timeline .ui-sortable-disabled .panel {
  cursor: auto; }

/* Timeline Responsive Styles */
@media (max-width: 770px) {
  #timeline > .row > .left-column .panel {
    margin-right: 0; }

  #timeline > .row > .right-column .panel {
    margin-left: 0; }

  #timeline > .row .panel:before {
    display: none; }

  #timeline > .row .panel:after {
    display: none; } }
#timeline .tab-content {
  min-height: 0; }

/* form creation styles */
#timeline .map {
  width: 100%;
  height: 275px; }

#timeline-image-form .fileupload-preview {
  text-align: center; }

#timeline-image-form .fileupload-preview img {
  max-height: 200px; }

/* JQuery sortable placeholder */
#timeline .ui-sortable {
  min-height: 150px;
  min-width: 300px; }

.timeline-icon {
  z-index: 1;
  position: absolute;
  right: -18px;
  width: 38px;
  height: 38px;
  line-height: 38px;
  font-size: 20px;
  color: #FFF;
  text-align: center;
  border-radius: 50%;
  background: #e8e8e8;
  box-shadow: 0 0 0 5px #e8e8e8; }

.right-column .timeline-icon {
  right: auto;
  left: -18px; }

/* SINGLE TIMELINE */
#timeline.timeline-single {
  margin-left: 50px; }

#timeline.timeline-single:after {
  left: 0; }

#timeline.timeline-single > .row > .col-sm-6 {
  width: 100%;
  padding-left: 65px; }

#timeline.timeline-single > .row > .right-column {
  margin-top: 0; }

#timeline.timeline-single > .row > .right-column .timeline-item,
#timeline.timeline-single > .row > .left-column .timeline-item {
  padding-left: 0;
  padding-right: 0; }

#timeline.timeline-single .timeline-divider .divider-label {
  margin-left: -55px; }

#timeline.timeline-single .timeline-icon {
  left: -8px;
  right: auto; }

/* Timeline Panel Arrows */
#timeline.timeline-single .panel:before,
#timeline.timeline-single .panel:after {
  right: 100%;
  left: auto;
  border-width: 8px 12px 8px 0;
  border-color: transparent #fafafa transparent transparent; }

#timeline.timeline-single .panel:after {
  border-right-color: #666; }

/*===============================================
  M. Map Pages - Full, Vector
================================================= */
.maps-vector-page #content_wrapper {
  min-height: 0; }

.expanding-header {
  z-index: 999;
  position: absolute;
  top: 20px;
  left: 30px;
  width: 550px;
  height: 43px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  transition: all 0.2s ease-in-out; }

.expanding-header.collapsed {
  width: 48px; }

.expanding-header .map-header-icon {
  cursor: pointer;
  width: 47px;
  padding: 10px 13px;
  color: #FFF;
  font-size: 22px;
  float: left;
  margin-right: 10px; }

.expanding-header .flag-sm {
  cursor: pointer; }

.maps-page .expanding-header,
.map-full-page .expanding-header {
  top: 24px;
  left: 90px; }

.maps-page .expanding-header input.form-control {
  min-width: 250px; }

/*===============================================
  L. Profile.html
================================================= */
.profile-page #topbar.profile-topbar {
  padding-left: 0;
  height: 220px;
  max-height: 220px;
  background: url(../img/profile_topbar_bg.jpg) no-repeat center left;
  overflow: hidden; }

.profile-page .topbar-avatar {
  float: left;
  width: 165px;
  height: 165px;
  margin-left: 65px;
  margin-top: 25px; }

.profile-page .topbar-text {
  float: left;
  margin-left: 65px;
  margin-top: 50px; }

.profile-page .topbar-text h2 {
  color: #FFF;
  margin-top: 0; }

.profile-page .topbar-text p {
  color: #ddd;
  margin-top: 15px;
  margin-left: 5px; }

.profile-page .topbar-menu {
  position: absolute;
  top: 50px;
  right: 20px;
  width: 180px;
  max-width: 190px;
  background: #ebebeb;
  padding: 8px 10px; }

.profile-page .topbar-menu .col-xs-8 .btn {
  background-color: #a4705c; }

.profile-page #Grid {
  min-height: 490px; }

.profile-page .profile-tabs {
  margin-top: -63px;
  z-index: 1024; }

.profile-page .profile-tabs .nav-tabs > li > a {
  background: none;
  border-color: transparent;
  color: #CCC;
  padding: 11px 20px;
  border-top: 3px solid transparent; }

.profile-tabs .nav-tabs > li.active > a,
.profile-tabs .nav-tabs > li.active > a:hover,
.profile-tabs .nav-tabs > li.active > a:focus {
  color: #917050;
  background: #FFF;
  border-color: #CFCFCF;
  border-bottom: 1px solid #FFF;
  border-top: 3px solid #917050; }

/*===============================================
  M. Error Pages - 404, 500
================================================= */
.minimal {
  background: #f9f9f9; }

.error-page #return-arrow {
  top: 75px;
  padding-top: 0; }

#error-container img {
  width: 280px;
  margin: 30px auto 5px; }

.error-title {
  font-size: 120px;
  font-weight: 800;
  color: #a87fc6;
  text-align: center;
  padding-top: 110px;
  margin-bottom: 20px;
  line-height: 120px; }

.error-subtitle {
  font-weight: 400;
  text-align: center;
  font-size: 40px;
  color: #b0b0b0;
  margin-bottom: 80px; }

.mid-section {
  width: 100%;
  height: 200px;
  background: url("../img/patterns/error-bg.jpg") repeat left top #a87fc6; }

.mid-content {
  width: 620px;
  margin: 0 auto;
  padding: 50px 20px 35px; }

@media (max-width: 765px) {
  .mid-content {
    width: 100%; } }
.mid-content input {
  color: #AAA;
  height: 45px;
  border-radius: 1px;
  padding: 10px 20px;
  border: 0; }

/*====================================================
  N. External Pages - Login, Screen-Lock, Comingsoon
====================================================== */
.minimal .panel {
  background: #f8f8f8;
  border: 10px solid #9C9C9C;
  border: none;
  border-radius: 0;
  box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.1), -1px -2px 1px rgba(0, 0, 0, 0.1); }

.minimal .panel-heading,
.minimal .panel-footer {
  background: #FFF;
  border-color: #eee; }

.minimal .overlay-black {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%; }

.minimal .overlay-black {
  background: rgba(0, 0, 0, 0.5); }

.login-page .panel-bg {
  padding: 12px;
  width: 430px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0px 0 1px rgba(255, 255, 255, 0.8) inset; }

.screenlock-page .panel-bg {
  padding: 12px;
  width: 530px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0px 0 1px rgba(255, 255, 255, 0.8) inset; }

.coming-soon-page .panel-bg {
  padding: 12px;
  width: 630px;
  margin: 0 auto;
  box-shadow: 0px 0 1px rgba(255, 255, 255, 0.75) inset;
  background: rgba(255, 255, 255, 0.3);
  background: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 54%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0.72) 55%, rgba(255, 255, 255, 0.33) 100%);
  background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(54%, rgba(255, 255, 255, 0.3)), color-stop(55%, rgba(255, 255, 255, 0.3)), color-stop(55%, rgba(255, 255, 255, 0.72)), color-stop(100%, rgba(255, 255, 255, 0.33)));
  background: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 54%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0.72) 55%, rgba(255, 255, 255, 0.33) 100%);
  background: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 54%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0.72) 55%, rgba(255, 255, 255, 0.33) 100%);
  background: -ms-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 54%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0.72) 55%, rgba(255, 255, 255, 0.33) 100%);
  background: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.3) 54%, rgba(255, 255, 255, 0.3) 55%, rgba(255, 255, 255, 0.72) 55%, rgba(255, 255, 255, 0.33) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 ); }

/* ================================================
   XI. PLUGINS
	 A. Markitup
	 B. Summernote
	 C. Ckeditor
	 D. RangeSlider
	 E. Clndr
	 F. Jvector Maps
	 G. Flot Charts
	 H. Tags Manager
	 I. Mixitup
	 J. Colorpicker/Datepicker
	 K. Dropzone
	 L. Gmap
	 M. Chosen
	 N. Form Wizard
	 O. DataTables
	 P. TreeView
	 Q. Nestable
	 R. Image Zoom
	 S. Jquery Plugins
	  
 * This file contains small changes applied 
 * specifically to 3rd party addons. Please
 * see vendor.scss for actual plugin styles
================================================= 
 A. Markitup Editor
================================================= */
/* Container */
.markItUp {
  width: 100%;
  margin: 0; }

/* Header */
.markItUpHeader {
  min-height: 43px;
  padding: 8px 10px 0px;
  background: #f6f6f6;
  border: none;
  border-bottom: 1px solid #CCC; }

.markItUpButton {
  padding: 4px;
  background: #FFF;
  border: 1px solid #CCC; }

.markItUpHeader ul .markItUpSeparator {
  height: 25px; }

/* Textarea */
.markItUpEditor {
  font-family: 'Open Sans',Helvetica, Arial, sans-serif;
  font-size: 13px;
  padding: 10px;
  border: none;
  width: 100%;
  height: 250px; }

/* Footer */
.markItUpFooter {
  height: 15px; }

/*===============================================
  B. Summernote
================================================= */
.note-editor .note-toolbar {
  background: #f6f6f6;
  border: none;
  border-bottom: 1px solid #CCC;
  padding: 0 10px 9px; }

.note-editor .note-toolbar > .btn-group {
  margin-top: 8px;
  padding-right: 10px;
  margin-right: 10px;
  border-right: 1px solid #CCC; }

.note-editor .btn-sm,
.note-editor .btn-group-sm > .btn {
  padding: 3px 8px 4px; }

.note-editor {
  border: none; }

.note-editor .note-editable {
  overflow: auto; }

.note-editor .note-statusbar {
  background: none; }

.note-editor .note-statusbar .note-resizebar {
  border: none; }

/*===============================================
  C. CKEditor
================================================= */
.fusionSkin.cke_chrome {
  font-family: 'Open Sans',Helvetica, Arial, sans-serif;
  border: none;
  box-shadow: none; }

.fusionSkin .cke_top {
  background: #f6f6f6;
  box-shadow: none;
  border: none;
  border-bottom: 1px solid #CCC;
  padding: 9px 8px 5px; }

.fusionSkin .cke_toolgroup,
.fusionSkin .cke_combo_button {
  background: #FFF;
  border-radius: 0;
  border-color: #BBB;
  margin-right: 15px;
  box-shadow: none; }

.fusionSkin a.cke_button {
  padding: 4px 5px; }

.fusionSkin .cke_bottom {
  background: none;
  border-color: #DDD; }

.cke_toolbar_break {
  clear: none !important;
  display: block !important; }

/*===============================================
  D. RangeSlider
================================================= */
/* Slider Container */
.ui-rangeSlider .ui-rangeSlider-bar {
  margin: 5px 0;
  height: 20px;
  background-color: #6390a7; }

/* Slider Inner bar */
.ui-rangeSlider .ui-rangeSlider-innerBar {
  height: 24px;
  margin: 3px 0;
  background-color: #FFF;
  border: 1px solid #CCC;
  border-radius: 3px;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 -1px 0 rgba(255, 255, 255, 0.65) inset;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 -1px 0 rgba(255, 255, 255, 0.65) inset; }

/* Slider Label */
.ui-rangeSlider-label {
  border: 0;
  box-shadow: none;
  background: none;
  background-image: none; }

.ui-rangeSlider-label-value {
  position: relative;
  top: -8px;
  min-width: 40px;
  min-height: 25px;
  text-align: center;
  line-height: 25px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  background: #fafafa;
  background-image: none;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }

.ui-rangeSlider-label:after {
  content: "\f0d7";
  width: 100%;
  position: absolute;
  bottom: 0;
  margin: 0 -6px;
  color: #f8f8f8;
  font-family: FontAwesome;
  font-size: 18px;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }

/* Slider Input Label */
input.ui-editRangeSlider-inputValue {
  border: 1px solid #DDD;
  width: 2.2em; }

/* Slider Handles */
.ui-rangeSlider .ui-rangeSlider-handle {
  background: none; }

.ui-rangeSlider .ui-rangeSlider-handle-inner {
  background: url(../img/plugins/slider-knob.png) no-repeat center top;
  width: 22px;
  height: 24px; }

.ui-rangeSlider-leftHandle .ui-rangeSlider-handle-inner {
  margin-left: -10px; }

.ui-rangeSlider-rightHandle .ui-rangeSlider-handle-inner {
  margin-left: -4px; }

/* Slider Arrows */
.ui-rangeSlider-arrow {
  margin: 6px 0; }

.ui-rangeSlider-arrow.ui-rangeSlider-leftArrow {
  left: -13px !important; }

.ui-rangeSlider-arrow.ui-rangeSlider-rightArrow {
  right: -13px !important; }

/*===============================================
  E. Clndr 
================================================= */
.clndr .clndr-controls {
  display: none;
  width: 100%;
  position: relative;
  margin-bottom: 10px; }

.clndr .clndr-controls .month {
  float: left;
  width: 33%;
  text-align: center; }

.clndr .clndr-controls .clndr-control-button {
  float: left;
  width: 33%; }

.clndr .clndr-controls .clndr-control-button.rightalign {
  text-align: right;
  width: 34%; }

.clndr .clndr-controls .clndr-control-button .clndr-next-button {
  cursor: pointer;
  -webkit-user-select: none;
  /* Chrome/Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+ */ }

.clndr .clndr-controls .clndr-control-button .clndr-next-button:hover {
  background: #ddd; }

.clndr .clndr-controls .clndr-control-button .clndr-next-button.inactive {
  opacity: 0.5; }

.clndr .clndr-controls .clndr-control-button .clndr-next-button.inactive:hover {
  background: none;
  cursor: default; }

.clndr .clndr-controls .clndr-control-button .clndr-previous-button {
  cursor: pointer;
  -webkit-user-select: none;
  /* Chrome/Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+ */ }

.clndr .clndr-controls .clndr-control-button .clndr-previous-button:hover {
  background: #ddd; }

.clndr .clndr-controls .clndr-control-button .clndr-previous-button.inactive {
  opacity: 0.5; }

.clndr .clndr-controls .clndr-control-button .clndr-previous-button.inactive:hover {
  background: none;
  cursor: default; }

.clndr .clndr-table {
  table-layout: fixed;
  width: 100%; }

.clndr .clndr-table .header-days {
  height: 30px;
  font-size: 13px;
  font-weight: 600; }

.clndr .clndr-table .header-days .header-day {
  vertical-align: middle;
  text-align: center; }

.clndr .clndr-table tr {
  height: 45px; }

.clndr .clndr-table tr td {
  vertical-align: middle; }

.clndr .clndr-table tr .day {
  width: 100%;
  height: inherit;
  padding: 10px; }

.clndr .clndr-table tr .day:hover {
  background: #eee; }

.clndr .clndr-table tr .day.today .day-contents {
  width: 35px;
  text-align: center;
  margin: 0 auto;
  position: relative;
  color: #FFF;
  font-weight: 700;
  background: #c7b7e5;
  border-radius: 5px; }

.clndr .clndr-table tr .day.today.event {
  background: #a7dbc1; }

.clndr .clndr-table tr .day.event {
  background: #B4E09F; }

.clndr .clndr-table tr .day.event:hover {
  background: #96d478; }

.clndr .clndr-table tr .day.inactive {
  background: #ddd; }

.clndr .clndr-table tr .day .day-contents {
  color: #888;
  box-sizing: border-box;
  padding: 8px;
  font-size: 12px;
  text-align: center; }

.clndr .clndr-table tr .empty,
.clndr .clndr-table tr .adjacent-month {
  color: #AAA;
  width: 100%;
  height: inherit; }

.clndr .clndr-table tr .empty:hover,
.clndr .clndr-table tr .adjacent-month:hover {
  background: #ddd; }

/*===============================================
  F. Jvector Maps
================================================= */
.jvectormap-label {
  z-index: 10;
  position: absolute;
  display: none;
  border: solid 1px #CDCDCD;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background: #292929;
  color: white;
  font-family: sans-serif, Verdana;
  font-size: smaller;
  padding: 3px; }

.jvectormap-zoomin, .jvectormap-zoomout {
  cursor: pointer;
  position: absolute;
  top: 20px;
  left: auto;
  right: 30px;
  padding: 0;
  width: 40px;
  height: 35px;
  line-height: 35px;
  color: #fff;
  text-align: center;
  font-weight: 400;
  font-size: 22px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.5); }

.jvectormap-zoomout {
  right: 80px; }

/*===============================================
  G. Flot Charts
================================================= */
/* Shared Flot and Sparkline tooltip */
.jqstooltip, #flotTip {
  color: #fff;
  width: auto !important;
  height: auto !important;
  padding: 2px 6px !important;
  background-color: rgba(0, 0, 0, 0.7) !important;
  border: 0 !important;
  border-radius: 3px; }

.flot-x-axis .flot-tick-label.tickLabel {
  color: #AAA; }

.flot-y-axis .flot-tick-label.tickLabel {
  color: #AAA;
  padding-top: 6px;
  padding-left: 14px; }

td.legendColorBox {
  padding: 5px; }

/*===============================================
  H. Tags Manager
================================================= */
.tm-tag {
  margin-right: 8px; }

.tag-container {
  margin-top: 15px; }

.tm-tag.tm-tag-theme {
  color: #6b3fa2;
  border-color: #cbc0f8;
  background-color: #e3def8; }

/*===============================================
  I. Mixitup
================================================= */
#Grid {
  padding: 0;
  text-align: justify;
  font-size: 0.1px;
  -webkit-backface-visibility: hidden;
  min-height: 368px; }

#Grid:after {
  content: '';
  display: inline-block;
  width: 100%; }

#Grid .mix,
#Grid .gap {
  display: inline-block;
  width: 32%; }

#Grid .mix {
  text-align: left;
  margin-bottom: 1%;
  display: none; }

@media all and (min-width: 720px) {
  #Grid .mix,
  #Grid .gap {
    width: 24%; } }
#Grid .mix .mix-desc {
  display: none; }

/* Grid sortable placeholder */
#Grid .placeholder {
  position: relative;
  display: inline-block;
  vertical-align: top;
  background: #DDD; }

#Grid .placeholder::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  -webkit-box-shadow: 0 1px 3px #BBB inset, 1px 1px 0 #FFF;
  box-shadow: 0 1px 3px #BBB inset, 1px 1px 0 #FFF; }

/* List version */
#Grid.list .mix {
  width: 100%;
  max-height: 85px;
  background: #fff; }

#Grid.list .mix:nth-child(odd) {
  background: #f8f8f8; }

#Grid.list .mix:before {
  padding-top: 40px; }

/* List Version img */
#Grid.list .mix img {
  max-height: 85px;
  float: left;
  margin-right: 20px; }

/* List Version text */
#Grid.list .mix .mix-desc {
  display: block;
  padding: 10px; }

#Grid.list .mix .mix-desc p {
  display: block;
  font-size: 13px; }

#Grid.list .placeholder {
  margin-bottom: 1%; }

/*===============================================
  J. Colorpicker/Datepicker/DateRangePicker
================================================= */
.colorpicker {
  z-index: 1051;
  padding: 6px 12px;
  min-width: 0; }

.datepicker {
  padding: 6px 12px; }

.daterangepicker {
  background: #fafafa; }

/*===============================================
  K. Dropzone
================================================= */
.dropzone {
  min-height: 405px; }

.dropzone .dz-default.dz-message {
  background-image: none;
  width: 100%;
  height: 100%;
  top: 23%;
  margin-left: 0px;
  margin-top: -23px;
  text-align: center;
  left: 0; }

.dropzone .dz-default.dz-message span {
  display: inline-block;
  text-align: center; }

.dropzone .dz-default.dz-message span.main-text {
  font-size: 28px;
  font-weight: 400;
  color: #666; }

.dropzone .dz-default.dz-message span.main-text b {
  font-size: 40px;
  color: #444; }

.dropzone .dz-default.dz-message span.sub-text {
  font-size: 20px;
  color: #888; }

.dropzone .dz-default.dz-message i.fa {
  font-size: 100px;
  display: block;
  color: #a87fc6;
  margin-bottom: 15px; }

.dropzone a.dz-remove,
.dropzone-previews a.dz-remove {
  cursor: pointer; }

/* Demonstration Purposes ONLY */
.dropzone .dz-preview .dz-error-message,
.dropzone-previews .dz-preview .dz-error-message {
  display: none !important; }

/*===============================================
  L. Gmap
================================================= */
/* Inline Map Pagination Styles */
.map .pagination {
  text-shadow: 0 1px #ffffff;
  background-color: #f0f0f0;
    width: 96%;
    margin: 11px;
    -webkit-box-shadow: 0 2px 4px #999;
    box-shadow: 0 2px 4px #999;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%);
}

.map .pagination .display {
  display: inline-block;
  width: 84%;
  height: 40px;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  text-align: center;
  line-height: 40px;
  text-shadow: 0 1px #FFF; }

.map .pagination .btn {
  width: 8%;
  height: 40px;
  cursor: pointer;
  border-radius: 0;
  vertical-align: top;
  border: 0; }

.map .pagination .back-btn {
  float: left;
  border-right: 1px solid #ccc;
  background: url("../vendor/plugins/gmap/images/arrow_left_12x12.png") no-repeat 50% 50%; }

.map .pagination .fwd-btn {
  float: right;
  border-left: 1px solid #ccc;
  background: url("../vendor/plugins/gmap/images/arrow_right_12x12.png") no-repeat 50% 50%; }

.map .checker {
  margin-right: 8px; }

/* Map Styling Helper Classes */
.map-shadow {
  -webkit-box-shadow: 0 2px 3px #999;
  box-shadow: 0 2px 3px #999; }

.map-gradient {
  text-shadow: 0 1px #ffffff;
  background-color: #f0f0f0;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%);
  }

.map-rounded {
  border-radius: 4px; }

/*===============================================
  M. Chosen
================================================= */
/* Single Select List */
.chosen-container-single .chosen-single {
  border-color: #ddd;
  box-shadow: none;
  height: 32px;
  line-height: 32px;
  border-radius: 0; }

.chosen-container-single .chosen-drop {
  padding: 5px; }

/* Multi Select List */
.chosen-container-multi .chosen-choices {
  cursor: pointer;
  border-color: #ddd;
  background-clip: padding-box;
  background-repeat: repeat-x;
  background-image: linear-gradient(to bottom, #ffffff 1%, #f0f0f0 100%);
  }

.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
  cursor: pointer;
  height: 32px;
  line-height: 32px; }

.chosen-container-multi.chosen-container-active .chosen-choices {
  box-shadow: none;
  background-repeat: repeat-x;
  background-clip: padding-box;
  background-image: linear-gradient(to bottom, #eeeeee 1%, #ffffff 100%);
  }

.chosen-container-multi.chosen-container-active .chosen-drop {
  padding: 8px 5px;
  -webkit-box-shadow: 0 0 8px #999;
  box-shadow: 0 0 8px #999; }

/*===============================================
  N. Form Wizard
================================================= */
/*===============================================
  O. DataTables
================================================= */
/* Datatable Header */
table.dataTable thead th {
  border-bottom: 1px solid #DDD;
  font-weight: 600; }

/* Datatable Sorted Rows */
table.dataTable tr.odd td.sorting_1 {
  background-color: white; }

table.dataTable tr.even td.sorting_1 {
  background-color: #f8f8f8; }

/* Datatable Filters Menu Container */
.dt-panelmenu {
  min-height: 52px;
  margin: -15px -15px 10px; }

/* DataTables Search Bar Filter */
div.dataTables_filter input {
  width: 270px;
  line-height: 1.428571429;
  padding: 3px 8px;
  color: #999;
  outline: none;
  background: #FFF;
  max-height: 30px;
  height: 29px;
  border: 1px solid #ddd; }

div.dataTables_filter input[placeholder] {
  font-weight: 400; }

/* DataTables Dropdown Filter */
.dataTables_length {
  display: none; }

@media (min-width: 768px) {
  .dataTables_length {
    display: block; } }
.dataTables_length .chosen-container {
  margin: 0 5px; }

div.dataTables_length label {
  color: #999;
  font-weight: 600; }

.dataTables_length .chosen-container-single .chosen-single {
  height: 30px;
  line-height: 28px;
  color: #888;
  background: #FFF; }

/* DataTables Dropdown Filter Arrow Icon */
.dataTables_length .chosen-container-single .chosen-single div {
  top: 3px; }

/* Datatable Result Counter */
div.dataTables_info {
  padding-top: 10px;
  color: #999; }

/* Datatable Footer */
.datatables-footer {
  margin-top: 10px; }

/* Datatable Pagination */
.datatables-footer .pagination {
  margin: 0; }

.datatables-footer .pagination {
  padding-top: 2px; }

table.dataTable > thead > tr > th, table.dataTable > tbody > tr > th, table.dataTable > tfoot > tr > th, table.dataTable > thead > tr > td, table.dataTable > tbody > tr > td, table.dataTable > tfoot > tr > td {
  vertical-align: middle; }

/* DATATABLES PLUGIN STYLES - TABLETOOLS */
/* TableTools Container */
div.DTTT_container {
  position: absolute;
  float: none;
  right: 0;
  top: -30px; }

/* TableTools Buttons */
div.DTTT_container .DTTT_button {
  font-size: 1em;
  color: #AAA !important;
  padding: 2px 8px;
  margin-right: 10px;
  border-radius: 2px;
  border: 1px solid #DDD;
  box-shadow: none; }

div.DTTT_container .DTTT_button:last-child {
  margin-right: 0px; }

div.DTTT_container .DTTT_button:hover {
  color: #333;
  border-color: #AAA;
  box-shadow: none; }

/*
 * PRINTING
 * Print display styles
 */
.DTTT_print_info {
  position: fixed;
  top: 10%;
  left: 50%;
  width: 400px;
  height: 150px;
  margin-left: -200px;
  margin-top: -75px;
  text-align: center;
  color: #333;
  padding: 10px 30px;
  background: #ffffff;
  /* Old browsers */
  background: -webkit-linear-gradient(top, white 0%, #f3f3f3 89%, #f9f9f9 100%);
  /* Chrome10+,Safari5.1+ */
  background: -moz-linear-gradient(top, white 0%, #f3f3f3 89%, #f9f9f9 100%);
  /* FF3.6+ */
  background: -ms-linear-gradient(top, white 0%, #f3f3f3 89%, #f9f9f9 100%);
  /* IE10+ */
  background: -o-linear-gradient(top, white 0%, #f3f3f3 89%, #f9f9f9 100%);
  /* Opera 11.10+ */
  background: linear-gradient(top, #ffffff 0%, #f3f3f3 89%, #f9f9f9 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f9f9f9',GradientType=0 );
  /* IE6-9 */
  opacity: 0.95;
  border: 1px solid black;
  border: 1px solid rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
  -o-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5); }

.DTTT_print_info h6 {
  font-weight: normal;
  font-size: 28px;
  line-height: 28px;
  margin: 1em; }

.DTTT_print_info p {
  font-size: 14px;
  line-height: 20px; }

/*===============================================
  P. TreeView
================================================= */
ul.dynatree-container {
  font-family: 'Open Sans',Helvetica, Arial, sans-serif;
  border: none;
  background-color: transparent; }

ul.dynatree-container ul {
  margin-left: 20px; }

span.dynatree-folder {
  position: relative;
  margin: 5px;
  padding: 8px 5px 8px 8px;
  border-radius: 2px; }

span.dynatree-folder + ul .dynatree-node {
  margin: 7px 5px;
  padding: 8px 5px 8px 12px; }

span.dynatree-folder + ul li {
  position: relative; }

span.dynatree-folder + ul li:before {
  content: "";
  position: absolute;
  left: -20px;
  top: 49%;
  height: 1px;
  width: 22px;
  border-bottom: 1px solid #CCC; }

span.dynatree-folder + ul li:after {
  content: "";
  position: absolute;
  left: -20px;
  top: 0;
  height: 100%;
  width: 1px;
  border-left: 1px solid #CCC; }

span.dynatree-folder + ul li:last-child:after {
  height: 53%; }

ul.dynatree-container a {
  font-weight: 600;
  color: #666;
  text-shadow: 0 1px #FFF;
  outline: none;
  border: none; }

ul.dynatree-container a:hover,
ul.dynatree-container .dynatree-active a {
  outline: none;
  border: none;
  background: transparent; }

span.dynatree-connector {
  display: none; }

/* Alternate Tree Style - Minimal. Uses class "tree-alt" */
.tree-alt span.dynatree-folder {
  position: relative;
  margin: 5px;
  padding: 5px 3px 5px 5px;
  border: none;
  background: none; }

.tree-alt ul.dynatree-container ul {
  margin-left: 30px; }

.tree-alt span.dynatree-folder + ul .dynatree-node {
  margin: 5px 3px;
  padding: 6px 7px 6px 4px; }

/* Modifies size of alt style when in Panel Side Menu */
.panel-sidemenu .tree-alt span.dynatree-folder {
  margin-left: 0;
  padding-left: 0; }

.panel-sidemenu .tree-alt span.dynatree-folder + ul .dynatree-node {
  padding: 3px 3px 3px 6px; }

.tree-alt-bg span.dynatree-folder a.dynatree-title {
  color: #FFF;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); }

.tree-alt-bg.tree-purple span.dynatree-folder {
  background-color: #a287d4; }

.tree-alt-bg.tree-teal span.dynatree-folder {
  background-color: #2dc5c7; }

.tree-alt-bg.tree-orange span.dynatree-folder {
  background-color: #f9892e; }

.tree-alt-bg.tree-green span.dynatree-folder {
  background-color: #6fa53e; }

.tree-alt-bg.tree-red span.dynatree-folder {
  background-color: #ff745a; }

.tree-alt-bg.tree-yellow span.dynatree-folder {
  background-color: #ffcf5a; }

.tree-alt-bg.tree-blue span.dynatree-folder {
  background-color: #33bfeb; }

.tree-alt-bg.tree-grey span.dynatree-folder {
  background-color: #6ebbdd; }

/* Demonstration Styles - Tab Tree Content */
.tree-content-example .tab-pane {
  display: none; }

.tree-content-example .tab-pane img {
  float: left;
  width: 47%;
  max-width: 47%;
  margin: 1.5%;
  padding: 2px;
  border: 3px solid #CCC; }

/* DRAG AND DROP SUPPORT */
/* Helper object */
div.dynatree-drag-helper a {
  border: 1px solid gray;
  background-color: white;
  padding-left: 5px;
  padding-right: 5px;
  opacity: 0.8; }

span.dynatree-drag-helper-img {
  /*	position: relative;
  	left: -16px;	*/ }

div.dynatree-drag-helper {
  /*  border-color: green;
  	background-color: red; */ }

div.dynatree-drop-accept span.dynatree-drag-helper-img {
  background-position: -32px -112px; }

div.dynatree-drag-helper.dynatree-drop-reject {
  border-color: red; }

div.dynatree-drop-reject span.dynatree-drag-helper-img {
  background-position: -16px -112px; }

/* Drop marker icon */
#dynatree-drop-marker {
  width: 24px;
  position: absolute;
  background-position: 0 -128px;
  margin: 0; }

#dynatree-drop-marker.dynatree-drop-after,
#dynatree-drop-marker.dynatree-drop-before {
  width: 64px;
  background-position: 0 -144px; }

#dynatree-drop-marker.dynatree-drop-copy {
  background-position: -64px -128px; }

#dynatree-drop-marker.dynatree-drop-move {
  background-position: -64px -128px; }

/* Source node while dragging */
span.dynatree-drag-source {
  /* border: 1px dotted gray; */
  background-color: #e0e0e0; }

span.dynatree-drag-source a {
  color: gray; }

/* Target node while dragging cursor is over it */
span.dynatree-drop-target {
  /*border: 1px solid gray;*/ }

span.dynatree-drop-target.dynatree-drop-accept a {
  /*border: 1px solid green;*/
  background-color: #3169C6 !important;
  color: white !important;
  /* @ IE6 */
  text-decoration: none; }

span.dynatree-drop-target.dynatree-drop-reject {
  /*border: 1px solid red;*/ }

/*===============================================
  Q. Nestable
================================================= */
.dd {
  position: relative;
  display: block;
  margin: 10px 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 20px; }

.dd-list {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none; }

.dd-list .dd-list {
  padding-left: 30px; }

.dd-collapsed .dd-list {
  display: none; }

.dd-item,
.dd-empty,
.dd-placeholder {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 20px;
  font-size: 13px;
  line-height: 20px; }

/* Default Color */
.dd-handle {
  display: block;
  height: 30px;
  margin: 5px 0;
  padding: 5px 10px;
  color: #FFF;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid #ccc;
  cursor: pointer;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  background-color: "";
  background-repeat: repeat-x;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 1%, rgba(255, 255, 255, 0.15) 100%);
  }

.dd-handle:hover {
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.45) 1%, rgba(255, 255, 255, 0.15) 100%);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.45) 1%, rgba(255, 255, 255, 0.15) 100%); }

.dd-item > button {
  display: block;
  position: relative;
  cursor: pointer;
  float: left;
  width: 25px;
  height: 20px;
  margin: 5px 0;
  padding: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  border: 0;
  background: transparent;
  font-size: 12px;
  line-height: 1;
  text-align: center;
  font-weight: bold; }

.dd-item > button:before {
  content: '+';
  display: block;
  position: absolute;
  width: 100%;
  text-align: center;
  text-indent: 0; }

.dd-item > button[data-action="collapse"]:before {
  content: '-'; }

.dd-placeholder,
.dd-empty {
  margin: 5px 0;
  padding: 0;
  min-height: 30px;
  background: #f2fbff;
  border: 1px dashed #b6bcbf;
  box-sizing: border-box;
  -moz-box-sizing: border-box; }

.dd-empty {
  border: 1px dashed #bbb;
  min-height: 100px;
  background-color: #e5e5e5; }

.dd-dragel {
  position: absolute;
  pointer-events: none;
  z-index: 9999; }

.dd-dragel > .dd-item .dd-handle {
  margin-top: 0; }

.dd-dragel .dd-handle {
  background: #888;
  -webkit-box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 2px 4px 6px 0 rgba(0, 0, 0, 0.1); }

/* Nestable Extras */
.nestable-lists {
  display: block;
  clear: both;
  padding: 30px 0;
  width: 100%;
  border: 0;
  border-top: 2px solid #ddd;
  border-bottom: 2px solid #ddd; }

#nestable-menu {
  padding: 0;
  margin: 20px 0; }

#nestable-output,
#nestable2-output {
  width: 100%;
  height: 7em;
  font-size: 0.75em;
  line-height: 1.333333em;
  font-family: Consolas, monospace;
  padding: 5px;
  box-sizing: border-box;
  -moz-box-sizing: border-box; }

/* Alternate Colors */
.nestable-white .dd-handle {
  color: #666;
  text-shadow: 0 1px #ffffff;
  background-color: #f0f0f0;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%);
  }

.nestable-white .dd-handle:hover {
  color: #666; }

.nestable-grey .dd-handle {
  background-color: #323232; }

.nestable-grey .dd-item > button:before {
  color: #fff; }

.nestable-blue .dd-handle {
  background-color: #0066ad; }

.nestable-blue .dd-item > button:before {
  color: #fff; }

.nestable-green .dd-handle {
  background-color: #5cb85c; }

.nestable-green .dd-item > button:before {
  color: #fff; }

.dd-hover > .dd-handle {
  background: #2ea8e5 !important; }

/* Nestable Draggable Handles */
.dd3-content {
  display: block;
  height: 30px;
  margin: 5px 0;
  padding: 5px 10px 5px 40px;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid #ccc;
  text-shadow: 0 1px #ffffff;
  background-color: #f0f0f0;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%);
}

.dd3-content:hover {
  color: #2ea8e5;
  background: #fff; }

.dd-dragel > .dd3-item > .dd3-content {
  margin: 0; }

.dd3-item > button {
  margin-left: 30px; }

.dd3-handle {
  position: absolute;
  margin: 0;
  left: 0;
  top: 0;
  cursor: pointer;
  width: 30px;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  background-color: #323232;
  background-repeat: repeat-x;
    border: 1px solid #aaa;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 1%, rgba(255, 255, 255, 0.15) 100%);
}

.dd3-handle:before {
  content: '≡';
  display: block;
  position: absolute;
  left: 0;
  top: 3px;
  width: 100%;
  text-align: center;
  text-indent: 0;
  color: #fff;
  font-size: 20px;
  font-weight: normal; }

.dd3-handle:hover {
  background: #ddd; }

/*===============================================
  R. ImageZoom
================================================= */
.zoomLens {
  border-radius: 50%; }

/*===============================================
  S. jQuery Sortable
================================================= */
.sortable > div {
  cursor: move; }

/*===============================================
  S. jQuery Spinner
================================================= */
.ui-spinner-input {
  color: inherit;
  min-height: 36px; }

.ui-spinner-button {
  z-index: 3;
  cursor: pointer;
  display: block;
  overflow: hidden;
  position: absolute;
  right: 0;
  width: 16px;
  height: 50%;
  padding: 0;
  margin: 0;
  font-size: .5em;
  text-align: center; }

.input-group .ui-spinner .form-control:first-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px; }

.ui-spinner .ui-icon {
  position: absolute;
  margin-top: -2px;
  top: 50%;
  left: 0;
  text-indent: 0; }

.ui-spinner-up .ui-icon {
  margin-top: -6px; }

.ui-spinner-up {
  top: 0; }

.ui-spinner-down {
  bottom: 0; }

/* TR overrides */
.ui-spinner .ui-icon-triangle-1-s {
  /* needed to correct false icon sprite pos */
  background-position: -65px -16px; }

/* ==============================================
  * All color variables used in this stylesheet
  * are stored in modules/_colors.scss	  
  
  VII. COLOR SYSTEM
	  A. Misc Skin/Colors
	  B. Colors for Custom Elements
	  C. Tabs
	  D. Icons
	  E. Menu and Button Dropdowns
	  F. Text Input Forms
	  G. Thumbnails
	  H. Paginations
	  I. Checkboxes
	  J. Switches
	  K. RangeSlider
	  L. Progress Bar Colors
	  M. Text Colors
	  N. Border Colors
	  O. Background Colors
	  P. Background Colors - Advanced Set
  
  * The Fusion Color System has two variations
  * of every color. A Light shade and a dark
  * shade. To create a gradient we set the 
  * elements background-color to the dark shade
  * and then apply a gradient overlay via 
  * the "gradient" mixin. 
================================================= 
  A. Misc Skin/Colors
================================================= */
/* Custom Theme(purple) Alert */
.alert-theme {
  color: #715da3;
  border-color: rgba(199, 183, 229, 0.4);
  background-color: rgba(199, 183, 229, 0.4); 
  text-transform:uppercase;}

.alert-theme .alert-link {
  color: #715da3; }

/*===============================================
  A. Colors for Custom Elements
================================================= */
.facebook-color {
  background-color: #6395cf; }

.twitter-color {
  background-color: #4fbdc8; }

/* custom right side menu button */
.text-cloud {
  color: #afb6c6; }

/* User Online Green Border Color */
.border-onlinegreen {
  border-color: #94d867; }

/*===============================================
  A. Tabs
================================================= */
.panel-tabs > li.active:after {
  background: #a287d4; }

/*===============================================
  A. Icons
================================================= */
/* Panel Header Icon */
.panel-title > .fa,
.panel-title > .glyphicon,
.panel-title > .glyphicons,
.panel-title > .imoon {
  color: #a287d4; }

/*===============================================
  A. Menu and Button Dropdowns
================================================= */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background-color: #a287d4; }

/*===============================================
  A. Text Input Forms
================================================= */
.has-warning .form-control,
.has-warning .form-control:focus {
  border-color: #ffcf5a; }

.has-success .form-control,
.has-success .form-control:focus {
  border-color: #a0d65a; }

.has-error .form-control,
.has-error .form-control:focus {
  border-color: #ff745a; }

/*===============================================
  A. Thumbnails
================================================= */
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #a287d4; }

.thumbnail-xs {
  border-color: #a287d4; }

.thumbnail-sm {
  border-color: #a287d4; }

/*===============================================
  A. Paginations
================================================= */
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: #a287d4;
  border-color: #a287d4; }

.pagination > li > a,
.pagination > li > span {
  color: #a287d4; }

.pagination-alt > li.active > a {
  background-color: #715da3;
  border-color: #715da3; }

/*===============================================
  A. Checkboxes
================================================= */
.cBox.cBox-teal3 label:before {
  background-color: #1e9093; }

.cBox.cBox-teal label:before {
  background-color: #a8e9ea; }

.cBox.cBox-teal2 label:before {
  background-color: #2dc5c7; }

.cBox.cBox-teal3 label:before {
  background-color: #1e9093; }

.cBox.cBox-blue label:before {
  background-color: #9de0f5; }

.cBox.cBox-blue2 label:before {
  background-color: #33bfeb; }

.cBox.cBox-blue3 label:before {
  background-color: #238bc5; }

.cBox.cBox-purple label:before {
  background-color: #c7b7e5; }

.cBox.cBox-purple2 label:before {
  background-color: #a287d4; }

.cBox.cBox-purple3 label:before {
  background-color: #715da3; }

.cBox.cBox-pink label:before {
  background-color: #ffd1ed; }

.cBox.cBox-pink2 label:before {
  background-color: #ffb2e1; }

.cBox.cBox-pink3 label:before {
  background-color: #ff7fb4; }

.cBox.cBox-red label:before {
  background-color: #ffac9c; }

.cBox.cBox-red2 label:before {
  background-color: #ff745a; }

.cBox.cBox-red3 label:before {
  background-color: #ff4f3e; }

.cBox.cBox-orange label:before {
  background-color: #fbb882; }

.cBox.cBox-orange2 label:before {
  background-color: #f9892e; }

.cBox.cBox-orange3 label:before {
  background-color: #e55e20; }

.cBox.cBox-yellow label:before {
  background-color: #ffe29c; }

.cBox.cBox-yellow2 label:before {
  background-color: #ffcf5a; }

.cBox.cBox-yellow3 label:before {
  background-color: #ff9d3e; }

.cBox.cBox-green label:before {
  background-color: #c6e69c; }

.cBox.cBox-green2 label:before {
  background-color: #a0d65a; }

.cBox.cBox-green3 label:before {
  background-color: #6fa53e; }

.cBox.cBox-grey label:before {
  background-color: #b0daec; }

.cBox.cBox-grey2 label:before {
  background-color: #6ebbdd; }

.cBox.cBox-grey3 label:before {
  background-color: #6ebbdd; }

/*===============================================
  A. Switches
================================================= */
div.switch.switch-teal input:checked + label {
  background-color: #a8e9ea; }

div.switch.switch-teal2 input:checked + label {
  background-color: #2dc5c7; }

div.switch.switch-teal3 input:checked + label {
  background-color: #1e9093; }

div.switch.switch-blue input:checked + label {
  background-color: #9de0f5; }

div.switch.switch-blue2 input:checked + label {
  background-color: #33bfeb; }

div.switch.switch-blue3 input:checked + label {
  background-color: #238bc5; }

div.switch.switch-purple input:checked + label {
  background-color: #c7b7e5; }

div.switch.switch-purple2 input:checked + label {
  background-color: #a287d4; }

div.switch.switch-purple3 input:checked + label {
  background-color: #715da3; }

div.switch.switch-pink input:checked + label {
  background-color: #ffd1ed; }

div.switch.switch-pink2 input:checked + label {
  background-color: #ffb2e1; }

div.switch.switch-pink3 input:checked + label {
  background-color: #ff7fb4; }

div.switch.switch-red input:checked + label {
  background-color: #ffac9c; }

div.switch.switch-red2 input:checked + label {
  background-color: #ff745a; }

div.switch.switch-red3 input:checked + label {
  background-color: #ff4f3e; }

div.switch.switch-orange input:checked + label {
  background-color: #fbb882; }

div.switch.switch-orange2 input:checked + label {
  background-color: #f9892e; }

div.switch.switch-orange3 input:checked + label {
  background-color: #e55e20; }

div.switch.switch-yellow input:checked + label {
  background-color: #ffe29c; }

div.switch.switch-yellow2 input:checked + label {
  background-color: #ffcf5a; }

div.switch.switch-yellow3 input:checked + label {
  background-color: #ff9d3e; }

div.switch.switch-green input:checked + label {
  background-color: #c6e69c; }

div.switch.switch-green2 input:checked + label {
  background-color: #a0d65a; }

div.switch.switch-green3 input:checked + label {
  background-color: #6fa53e; }

div.switch.switch-grey input:checked + label {
  background-color: #b0daec; }

div.switch.switch-grey2 input:checked + label {
  background-color: #6ebbdd; }

div.switch.switch-grey3 input:checked + label {
  background-color: #6ebbdd; }

/*===============================================
  A. RangeSlider
================================================= */
/* take note of where color class is applied(parent container)
 * See sliders.html for example */
.ui-rangeSlider.slider-teal .ui-rangeSlider-bar {
  background-color: #a8e9ea; }

.ui-rangeSlider.slider-teal2 .ui-rangeSlider-bar {
  background-color: #2dc5c7; }

.ui-rangeSlider.slider-teal3 .ui-rangeSlider-bar {
  background-color: #1e9093; }

.ui-rangeSlider.slider-blue .ui-rangeSlider-bar {
  background-color: #9de0f5; }

.ui-rangeSlider.slider-blue2 .ui-rangeSlider-bar {
  background-color: #33bfeb; }

.ui-rangeSlider.slider-blue3 .ui-rangeSlider-bar {
  background-color: #238bc5; }

.ui-rangeSlider.slider-purple .ui-rangeSlider-bar {
  background-color: #c7b7e5; }

.ui-rangeSlider.slider-purple2 .ui-rangeSlider-bar {
  background-color: #a287d4; }

.ui-rangeSlider.slider-purple3 .ui-rangeSlider-bar {
  background-color: #715da3; }

.ui-rangeSlider.slider-pink .ui-rangeSlider-bar {
  background-color: #ffd1ed; }

.ui-rangeSlider.slider-pink2 .ui-rangeSlider-bar {
  background-color: #ffb2e1; }

.ui-rangeSlider.slider-pink3 .ui-rangeSlider-bar {
  background-color: #ff7fb4; }

.ui-rangeSlider.slider-red .ui-rangeSlider-bar {
  background-color: #ffac9c; }

.ui-rangeSlider.slider-red2 .ui-rangeSlider-bar {
  background-color: #ff745a; }

.ui-rangeSlider.slider-red3 .ui-rangeSlider-bar {
  background-color: #ff4f3e; }

.ui-rangeSlider.slider-orange .ui-rangeSlider-bar {
  background-color: #fbb882; }

.ui-rangeSlider.slider-orange2 .ui-rangeSlider-bar {
  background-color: #f9892e; }

.ui-rangeSlider.slider-orange3 .ui-rangeSlider-bar {
  background-color: #e55e20; }

.ui-rangeSlider.slider-yellow .ui-rangeSlider-bar {
  background-color: #ffe29c; }

.ui-rangeSlider.slider-yellow2 .ui-rangeSlider-bar {
  background-color: #ffcf5a; }

.ui-rangeSlider.slider-yellow3 .ui-rangeSlider-bar {
  background-color: #ff9d3e; }

.ui-rangeSlider.slider-green .ui-rangeSlider-bar {
  background-color: #c6e69c; }

.ui-rangeSlider.slider-green2 .ui-rangeSlider-bar {
  background-color: #a0d65a; }

.ui-rangeSlider.slider-green3 .ui-rangeSlider-bar {
  background-color: #6fa53e; }

.ui-rangeSlider.slider-grey .ui-rangeSlider-bar {
  background-color: #b0daec; }

.ui-rangeSlider.slider-grey2 .ui-rangeSlider-bar {
  background-color: #6ebbdd; }

.ui-rangeSlider.slider-grey3 .ui-rangeSlider-bar {
  background-color: #6ebbdd; }

/*===============================================
  B. Progress Bar Colors
================================================= */
.progress-bar-teal {
  background-color: #a8e9ea !important; }

.progress-bar-teal2 {
  background-color: #2dc5c7 !important; }

.progress-bar-teal3 {
  background-color: #1e9093 !important; }

.progress-bar-blue {
  background-color: #9de0f5 !important; }

.progress-bar-blue2 {
  background-color: #33bfeb !important; }

.progress-bar-blue3 {
  background-color: #238bc5 !important; }

.progress-bar-purple {
  background-color: #c7b7e5 !important; }

.progress-bar-purple2 {
  background-color: #a287d4 !important; }

.progress-bar-purple3 {
  background-color: #715da3 !important; }

.progress-bar-pink {
  background-color: #ffd1ed !important; }

.progress-bar-pink2 {
  background-color: #ffb2e1 !important; }

.progress-bar-pink3 {
  background-color: #ff7fb4 !important; }

.progress-bar-red {
  background-color: #ffac9c !important; }

.progress-bar-red2 {
  background-color: #ff745a !important; }

.progress-bar-red3 {
  background-color: #ff4f3e !important; }

.progress-bar-orange {
  background-color: #fbb882 !important; }

.progress-bar-orange2 {
  background-color: #f9892e !important; }

.progress-bar-orange3 {
  background-color: #e55e20 !important; }

.progress-bar-yellow {
  background-color: #ffe29c !important; }

.progress-bar-yellow2 {
  background-color: #ffcf5a !important; }

.progress-bar-yellow3 {
  background-color: #ff9d3e !important; }

.progress-bar-green {
  background-color: #c6e69c !important; }

.progress-bar-green2 {
  background-color: #a0d65a !important; }

.progress-bar-green3 {
  background-color: #6fa53e !important; }

.progress-bar-grey {
  background-color: #b0daec !important; }

.progress-bar-grey2 {
  background-color: #6ebbdd !important; }

.progress-bar-grey3 {
  border-color: #6ebbdd !important; }

/* Neutral Colors */
.progress-bar-white {
  background-color: white !important; }

.progress-bar-light {
  background-color: white !important; }

.progress-bar-light2 {
  background-color: #f0f0f0 !important; }

.progress-bar-light3 {
  background-color: #e8e8e8 !important; }

.progress-bar-light4 {
  background-color: #dddddd !important; }

.progress-bar-light5 {
  background-color: #cccccc !important; }

.progress-bar-light6 {
  background-color: #bbbbbb !important; }

.progress-bar-light7 {
  background-color: #aaaaaa !important; }

.progress-bar-dark {
  background-color: #777777 !important; }

.progress-bar-dark2 {
  background-color: #232222 !important; }

.progress-bar-dark3 {
  background-color: #494949 !important; }

.progress-bar-dark4 {
  background-color: #323232 !important; }

.progress-bar-dark5 {
  background-color: #1e1c1f !important; }

/*===============================================
  A. Text Colors
================================================= */
.text-teal {
  color: #a8e9ea !important; }

.text-teal2 {
  color: #2dc5c7 !important; }

.text-teal3 {
  color: #1e9093 !important; }

.text-blue {
  color: #9de0f5 !important; }

.text-blue2 {
  color: #33bfeb !important; }

.text-blue3 {
  color: #238bc5 !important; }

.text-purple {
  color: #c7b7e5 !important; }

.text-purple2 {
  color: #a287d4 !important; }

.text-purple3 {
  color: #715da3 !important; }

.text-pink {
  color: #ffd1ed !important; }

.text-pink2 {
  color: #ffb2e1 !important; }

.text-pink3 {
  color: #ff7fb4 !important; }

.text-red {
  color: #ffac9c !important; }

.text-red2 {
  color: #ff745a !important; }

.text-red3 {
  color: #ff4f3e !important; }

.text-orange {
  color: #fbb882 !important; }

.text-orange2 {
  color: #f9892e !important; }

.text-orange3 {
  color: #e55e20 !important; }

.text-yellow {
  color: #ffe29c !important; }

.text-yellow2 {
  color: #ffcf5a !important; }

.text-yellow3 {
  color: #ff9d3e !important; }

.text-green {
  color: #c6e69c !important; }

.text-green2 {
  color: #a0d65a !important; }

.text-green3 {
  color: #6fa53e !important; }

.text-grey {
  color: #b0daec !important; }

.text-grey2 {
  color: #6ebbdd !important; }

.text-grey3 {
  color: #4b87ae !important; }

/* Neutral Colors */
.text-white {
  color: white !important; }

.text-light {
  color: white !important; }

.text-light2 {
  color: #f0f0f0 !important; }

.text-light3 {
  color: #e8e8e8 !important; }

.text-light4 {
  color: #dddddd !important; }

.text-light5 {
  color: #cccccc !important; }

.text-light6 {
  color: #bbbbbb !important; }

.text-light7 {
  color: #aaaaaa !important; }

.text-dark {
  color: #777777 !important; }

.text-dark2 {
  color: #232222 !important; }

.text-dark3 {
  color: #494949 !important; }

.text-dark4 {
  color: #323232 !important; }

.text-dark5 {
  color: #1e1c1f !important; }

/*===============================================
  B. Border Colors
================================================= */
.border-teal {
  border-color: #a8e9ea !important; }

.border-teal2 {
  border-color: #2dc5c7 !important; }

.border-teal3 {
  border-color: #1e9093 !important; }

.border-blue {
  border-color: #9de0f5 !important; }

.border-blue2 {
  border-color: #33bfeb !important; }

.border-blue3 {
  border-color: #238bc5 !important; }

.border-purple {
  border-color: #c7b7e5 !important; }

.border-purple2 {
  border-color: #a287d4 !important; }

.border-purple3 {
  border-color: #715da3 !important; }

.border-pink {
  border-color: #ffd1ed !important; }

.border-pink2 {
  border-color: #ffb2e1 !important; }

.border-pink3 {
  border-color: #ff7fb4 !important; }

.border-red {
  border-color: #ffac9c !important; }

.border-red2 {
  border-color: #ff745a !important; }

.border-red3 {
  border-color: #ff4f3e !important; }

.border-orange {
  border-color: #fbb882 !important; }

.border-orange2 {
  border-color: #f9892e !important; }

.border-orange3 {
  border-color: #e55e20 !important; }

.border-yellow {
  border-color: #ffe29c !important; }

.border-yellow2 {
  border-color: #ffcf5a !important; }

.border-yellow3 {
  border-color: #ff9d3e !important; }

.border-green {
  border-color: #c6e69c !important; }

.border-green2 {
  border-color: #a0d65a !important; }

.border-green3 {
  border-color: #6fa53e !important; }

.border-grey {
  border-color: #b0daec !important; }

.border-grey2 {
  border-color: #6ebbdd !important; }

.border-grey3 {
  border-color: #4b87ae !important; }

/* Neutral Colors */
.border-white {
  border-color: white !important; }

.border-light {
  border-color: white !important; }

.border-light2 {
  border-color: #f0f0f0 !important; }

.border-light3 {
  border-color: #e8e8e8 !important; }

.border-light4 {
  border-color: #dddddd !important; }

.border-light5 {
  border-color: #cccccc !important; }

.border-light6 {
  border-color: #bbbbbb !important; }

.border-light7 {
  border-color: #aaaaaa !important; }

.border-dark {
  border-color: #777777 !important; }

.border-dark2 {
  border-color: #232222 !important; }

.border-dark3 {
  border-color: #494949 !important; }

.border-dark4 {
  border-color: #323232 !important; }

.border-dark5 {
  border-color: #1e1c1f !important; }

/*===============================================
  B. Background Colors
================================================= */
.bg-teal {
  background-color: #a8e9ea !important; }

.bg-teal2 {
  background-color: #2dc5c7 !important; }

.bg-teal3 {
  background-color: #1e9093 !important; }

.bg-blue {
  background-color: #9de0f5 !important; }

.bg-blue2 {
  background-color: #33bfeb !important; }

.bg-blue3 {
  background-color: #238bc5 !important; }

.bg-purple {
  background-color: #c7b7e5 !important; }

.bg-purple2 {
  background-color: #a287d4 !important; }

.bg-purple3 {
  background-color: #715da3 !important; }

.bg-pink {
  background-color: #ffd1ed !important; }

.bg-pink2 {
  background-color: #ffb2e1 !important; }

.bg-pink3 {
  background-color: #ff7fb4 !important; }

.bg-red {
  background-color: #ffac9c !important; }

.bg-red2 {
  background-color: #ff745a !important; }

.bg-red3 {
  background-color: #ff4f3e !important; }

.bg-orange {
  background-color: #fbb882 !important; }

.bg-orange2 {
  background-color: #f9892e !important; }

.bg-orange3 {
  background-color: #e55e20 !important; }

.bg-yellow {
  background-color: #ffe29c !important; }

.bg-yellow2 {
  background-color: #ffcf5a !important; }

.bg-yellow3 {
  background-color: #ff9d3e !important; }

.bg-green {
  background-color: #c6e69c !important; }

.bg-green2 {
  background-color: #a0d65a !important; }

.bg-green3 {
  background-color: #6fa53e !important; }

.bg-grey {
  background-color: #b0daec !important; }

.bg-grey2 {
  background-color: #6ebbdd !important; }

.bg-grey3 {
  background-color: #4b87ae !important; }

/* Neutral Colors */
.bg-white {
  background-color: transparent !important; }

.bg-white {
  background-color: white !important; }

.bg-light {
  background-color: white !important; }

.bg-light2 {
  background-color: #f0f0f0 !important; }

.bg-light3 {
  background-color: #e8e8e8 !important; }

.bg-light4 {
  background-color: #dddddd !important; }

.bg-light5 {
  background-color: #cccccc !important; }

.bg-light6 {
  background-color: #bbbbbb !important; }

.bg-light7 {
  background-color: #aaaaaa !important; }

.bg-dark {
  background-color: #777777 !important; }

.bg-dark2 {
  background-color: #232222 !important; }

.bg-dark3 {
  background-color: #494949 !important; }

.bg-dark4 {
  background-color: #323232 !important; }

.bg-dark5 {
  background-color: #1e1c1f !important; }

/* Used for gradient creation of Neutral Colors */
.bg-dark.bg-gradient {
  background-color: #777777 !important; }

.bg-dark2.bg-gradient {
  background-color: #232222 !important; }

.bg-dark3.bg-gradient {
  background-color: #494949 !important; }

.bg-dark4.bg-gradient {
  background-color: #323232 !important; }

.bg-dark5.bg-gradient {
  background-color: #1e1c1f !important; }

/*===============================================
  B. Background Colors - Advanced Set
================================================= */
.bg-blue-alt {
  background-color: #35b5d7; }

.bg-blue2-alt {
  background-color: #3093c7; }

.bg-blue3-alt {
  background-color: #4f96b4; }

.bg-blue4-alt {
  background-color: #287bab; }

.bg-blue5-alt {
  background-color: #1c5b86; }

.bg-blue6-alt {
  background-color: #205066; }

.bg-blue7-alt {
  background-color: #21334b; }

.bg-green-alt {
  background-color: #6db54b; }

.bg-green2-alt {
  background-color: #71aa61; }

.bg-green3-alt {
  background-color: #417447; }

.bg-green4-alt {
  background-color: #47741a; }

.bg-green5-alt {
  background-color: #1c4905; }

.bg-red-alt {
  background-color: #e4151d; }

.bg-red2-alt {
  background-color: #d10011; }

.bg-red3-alt {
  background-color: #bf0d14; }

.bg-red4-alt {
  background-color: #930b1f; }

.bg-purple-alt {
  background-color: #bb7ea6; }

.bg-purple2-alt {
  background-color: #7a5067; }

.bg-purple3-alt {
  background-color: #89264f; }

.bg-purple4-alt {
  background-color: #462b4c; }

.bg-orange-alt {
  background-color: #e94216; }

.bg-orange2-alt {
  background-color: #f56333; }

.bg-orange3-alt {
  background-color: #fb7e2a; }

.bg-yellow-alt {
  background-color: #f0c92f; }

.bg-yellow2-alt {
  background-color: #e1bc4a; }

.bg-creme-alt {
  background-color: #feda83; }

.bg-creme2-alt {
  background-color: #fae3b4; }

.bg-creme3-alt {
  background-color: #d3c27b; }

.bg-brown-alt {
  background-color: #b29579; }

.bg-brown2-alt {
  background-color: #7b5d3a; }

.bg-brown3-alt {
  background-color: #563330; }

/* Secondary color useful for making darker toned gradients */
.bg-blue-alt.bg-gradient {
  background-color: #008aaf; }

.bg-blue2-alt.bg-gradient {
  background-color: #0070ab; }

.bg-blue3-alt.bg-gradient {
  background-color: #066b95; }

.bg-blue4-alt.bg-gradient {
  background-color: #005789; }

.bg-blue5-alt.bg-gradient {
  background-color: #00416d; }

.bg-blue6-alt.bg-gradient {
  background-color: #043a53; }

.bg-blue7-alt.bg-gradient {
  background-color: #09203f; }

.bg-green-alt.bg-gradient {
  background-color: #368d0d; }

.bg-green2-alt.bg-gradient {
  background-color: #33881b; }

.bg-green3-alt.bg-gradient {
  background-color: #00520a; }

.bg-green4-alt.bg-gradient {
  background-color: #274d00; }

.bg-green5-alt.bg-gradient {
  background-color: #0d2f00; }

.bg-red-alt.bg-gradient {
  background-color: #eb050e; }

.bg-red2-alt.bg-gradient {
  background-color: #d10011; }

.bg-red3-alt.bg-gradient {
  background-color: #a6050b; }

.bg-red4-alt.bg-gradient {
  background-color: #930b1f; }

.bg-purple-alt.bg-gradient {
  background-color: #9c457e; }

.bg-purple2-alt.bg-gradient {
  background-color: #6a254b; }

.bg-purple3-alt.bg-gradient {
  background-color: #71002f; }

.bg-purple4-alt.bg-gradient {
  background-color: #36143e; }

.bg-orange-alt.bg-gradient {
  background-color: #f93e0d; }

.bg-orange2-alt.bg-gradient {
  background-color: #fe561f; }

.bg-orange3-alt.bg-gradient {
  background-color: #ff7214; }

.bg-yellow-alt.bg-gradient {
  background-color: #fac908; }

.bg-yellow2-alt.bg-gradient {
  background-color: #e9bb2d; }

.bg-creme-alt.bg-gradient {
  background-color: #ffd266; }

.bg-creme2-alt.bg-gradient {
  background-color: #fedd9a; }

.bg-creme3-alt.bg-gradient {
  background-color: #bca339; }

.bg-brown-alt.bg-gradient {
  background-color: #99714b; }

.bg-brown2-alt.bg-gradient {
  background-color: #6c4517; }

.bg-brown3-alt.bg-gradient {
  background-color: #4f1a16; }

/* COLOR MODIFICATIONS SPECIFICALLY FOR BUTTONS
* Any variations to buttons were placed below so that
* the above classes contain only color styles. This
* allows the styles to be used on any element rather 
* than just "Text" or "Buttons" as their name suggest
----------------------------------------------------------*/
.bg-creme-alt {
  border-color: #f5c348; }

.bg-creme2-alt {
  border-color: #f7ca5c; }

.bg-light6 {
  border-color: #e5e5e5; }

.bg-light7 {
  border-color: #eeeeee; }

.bg-light, .bg-light2, .bg-light3, .bg-light4, .bg-light5, .bg-light6, .bg-light7, .btn-default {
  color: #555555; }

.bg-light:focus, .bg-light2:focus, .bg-light3:focus, .bg-light4:focus, .bg-light5:focus, .bg-light6:focus, .bg-light7:focus, .bg-default:focus, .btn-default:focus {
  color: #555555; }

.bg-light:active:focus, .bg-light2:active:focus, .bg-light3:active:focus, .bg-light4:active:focus, .bg-light5:active:focus, .bg-light6:active:focus, .bg-light7:active:focus, .bg-default:active:focus, .btn-default:active:focus {
  color: #555555; }

.bg-light.bg-gradient, .bg-light2.bg-gradient, .bg-light3.bg-gradient, .bg-light4.bg-gradient, .bg-light5.bg-gradient, .bg-light6.bg-gradient, .bg-light7.bg-gradient, .btn-default.btn-gradient, .bg-default.bg-gradient {
  text-shadow: 0 1px #ffffff;
  background-color: "";
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.1) 100%);
  }

.bg-creme-alt:focus, .bg-creme2-alt:focus, .bg-yellow-alt:focus, .bg-yellow2-alt:focus {
  color: #ca8f00; }

.bg-creme-alt, .bg-creme2-alt, .bg-yellow-alt, .bg-yellow2-alt {
  color: #ca8f00;
  font-weight: 600;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.55); }

.bg-yellow-alt:hover, .bg-yellow2-alt:hover, .bg-creme-alt:hover, .bg-creme2-alt:hover, .bg-creme3-alt:hover, .bg-light:hover, .bg-light2:hover, .bg-light3:hover, .bg-light4:hover, .bg-light5:hover, .bg-light6:hover, .bg-light7:hover, .bg-default:hover, .btn-default:hover {
  color: #555555; }

/*===============================================
  X. LAYOUT SETTINGS
================================================= */
/* If header is fixed modify primary containers padding */
.navbar.navbar-fixed-top + #main {
  margin-top: 60px; }

/* Fixed Sidebar */
#sidebar_left.affix {
  position: fixed;
  height: 100%; }

/* Scrollbar for Sidebars in Fixed Positions */
#sidebar_left.affix > .sidebar-menu {
  overflow-x: hidden;
  position: absolute;
  width: 100%;
  top: 85px;
  bottom: 52px;
  transition: top .2s ease-in-out; }

#sidebar_left.affix > .email-menu + .sidebar-menu {
  overflow-x: hidden;
  position: absolute;
  width: 100%;
  top: 485px;
  bottom: 52px;
  transition: top .2s ease-in-out; }

/* Corrects Pseudo sidebar bg when fixed */
#sidebar_left.affix:before {
  left: 0; }

body.sidebar-hidden #sidebar_left.affix:before,
body.sidebar-rtl #sidebar_left.affix:before {
  left: -230px; }

/* Sidebar User Area - Hidden */
.user-info.hidden,
.user-info.hidden + .user-divider {
  display: none; }

body.usermenu-hidden .user-info,
body.usermenu-hidden .user-info + .user-divider {
  display: none; }

body.usermenu-hidden #sidebar_left.affix .user-info + .user-divider + .sidebar-menu,
body.usermenu-hidden #sidebar_left.affix .user-info + .user-divider + .user-menu + .sidebar-menu {
  top: 0; }

#sidebar_left.affix > .user-menu.usermenu-open + .sidebar-menu {
  top: 250px; }

/* Topbar/Breadcrumbs Area - Hidden */
body.hidden-breadcrumbs #topbar {
  display: none; }

/* for preview only - no real use in development enviroment */
body.sidebar-collapsed #sidebar:before {
  width: 40px; }

/* ================================================
   IX. GRID MODIFICATIONS - Custom Size (XL)
===================================================
   Fusion Admin has created another column size
   which helps create an even better responsive
   layout for larger resolutions. This new column 
   has been labeled "xl" and is set for 1560px
=================================================== */
.visible-xl {
  display: none !important; }

.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
  position: relative;
  min-height: 1px;
  padding-left: 12px;
  padding-right: 12px; }

@media (min-width: 1560px) {
  .container {
    width: 1324px; } }
@media (min-width: 1560px) {
  .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
    float: left; }

  .col-xl-12 {
    width: 100%; }

  .col-xl-11 {
    width: 91.66666667%; }

  .col-xl-10 {
    width: 83.33333333%; }

  .col-xl-9 {
    width: 75%; }

  .col-xl-8 {
    width: 66.66666667%; }

  .col-xl-7 {
    width: 58.33333333%; }

  .col-xl-6 {
    width: 50%; }

  .col-xl-5 {
    width: 41.66666667%; }

  .col-xl-4 {
    width: 33.33333333%; }

  .col-xl-3 {
    width: 25%; }

  .col-xl-2 {
    width: 16.66666667%; }

  .col-xl-1 {
    width: 8.33333333%; }

  .col-xl-pull-12 {
    right: 100%; }

  .col-xl-pull-11 {
    right: 91.66666667%; }

  .col-xl-pull-10 {
    right: 83.33333333%; }

  .col-xl-pull-9 {
    right: 75%; }

  .col-xl-pull-8 {
    right: 66.66666667%; }

  .col-xl-pull-7 {
    right: 58.33333333%; }

  .col-xl-pull-6 {
    right: 50%; }

  .col-xl-pull-5 {
    right: 41.66666667%; }

  .col-xl-pull-4 {
    right: 33.33333333%; }

  .col-xl-pull-3 {
    right: 25%; }

  .col-xl-pull-2 {
    right: 16.66666667%; }

  .col-xl-pull-1 {
    right: 8.33333333%; }

  .col-xl-pull-0 {
    right: 0%; }

  .col-xl-push-12 {
    left: 100%; }

  .col-xl-push-11 {
    left: 91.66666667%; }

  .col-xl-push-10 {
    left: 83.33333333%; }

  .col-xl-push-9 {
    left: 75%; }

  .col-xl-push-8 {
    left: 66.66666667%; }

  .col-xl-push-7 {
    left: 58.33333333%; }

  .col-xl-push-6 {
    left: 50%; }

  .col-xl-push-5 {
    left: 41.66666667%; }

  .col-xl-push-4 {
    left: 33.33333333%; }

  .col-xl-push-3 {
    left: 25%; }

  .col-xl-push-2 {
    left: 16.66666667%; }

  .col-xl-push-1 {
    left: 8.33333333%; }

  .col-xl-push-0 {
    left: 0%; }

  .col-xl-offset-12 {
    margin-left: 100%; }

  .col-xl-offset-11 {
    margin-left: 91.66666667%; }

  .col-xl-offset-10 {
    margin-left: 83.33333333%; }

  .col-xl-offset-9 {
    margin-left: 75%; }

  .col-xl-offset-8 {
    margin-left: 66.66666667%; }

  .col-xl-offset-7 {
    margin-left: 58.33333333%; }

  .col-xl-offset-6 {
    margin-left: 50%; }

  .col-xl-offset-5 {
    margin-left: 41.66666667%; }

  .col-xl-offset-4 {
    margin-left: 33.33333333%; }

  .col-xl-offset-3 {
    margin-left: 25%; }

  .col-xl-offset-2 {
    margin-left: 16.66666667%; }

  .col-xl-offset-1 {
    margin-left: 8.33333333%; }

  .col-xl-offset-0 {
    margin-left: 0%; } }
@media (min-width: 1560px) {
  .visible-xl {
    display: block !important; }

  table.visible-xl {
    display: table; }

  tr.visible-xl {
    display: table-row !important; }

  th.visible-xl,
  td.visible-xl {
    display: table-cell !important; } }
@media (min-width: 1560px) {
  .hidden-xl {
    display: none !important; } }
/*===============================================
  XII. ANIMATE.CSS
================================================= */
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.animated-shortest {
  -webkit-animation-duration: 0.5s;
  -moz-animation-duration: 0.5s;
  -o-animation-duration: 0.5s;
  animation-duration: 0.5s; }

.animated-short {
  -webkit-animation-duration: 0.75s;
  -moz-animation-duration: 0.75s;
  -o-animation-duration: 0.75s;
  animation-duration: 0.75s; }

.animated-long {
  -webkit-animation-duration: 2s;
  -moz-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s; }

.animated-longest {
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  -o-animation-duration: 3s;
  animation-duration: 3s; }

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s; }

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }

  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }

  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px); } }

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px); }

  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    transform: translateY(-15px); } }

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce; }

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1; }

  25%, 75% {
    opacity: 0; } }

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1; }

  25%, 75% {
    opacity: 0; } }

.flash {
  -webkit-animation-name: flash;
  animation-name: flash; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }

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

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }

  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1); }

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

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse; }

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); } }

@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px); }

  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px); } }

.shake {
  -webkit-animation-name: shake;
  animation-name: shake; }

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg); }

  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg); }

  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg); }

  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg); }

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

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    transform: rotate(15deg); }

  40% {
    -webkit-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    transform: rotate(-10deg); }

  60% {
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg); }

  80% {
    -webkit-transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    transform: rotate(-5deg); }

  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg); } }

.swing {
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing; }

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg); }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg); }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg); }

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

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }

  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    -ms-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg); }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg); }

  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    -ms-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg); }

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

.tada {
  -webkit-animation-name: tada;
  animation-name: tada; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg); }

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

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg); }

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

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg); }

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

@keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    -ms-transform: translateX(0%);
    transform: translateX(0%); }

  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    -ms-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg); }

  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    -ms-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg); }

  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    -ms-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg); }

  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    -ms-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg); }

  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    -ms-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg); }

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

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble; }

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3); }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05); }

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

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

@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3); }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05); }

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

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

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn; }

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px); }

  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); }

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

@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px); }

  80% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px); }

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

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown; }

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px); }

  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }

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

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    -ms-transform: translateX(30px);
    transform: translateX(30px); }

  80% {
    -webkit-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px); }

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

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft; }

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px); }

  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); }

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

@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    transform: translateX(-30px); }

  80% {
    -webkit-transform: translateX(10px);
    -ms-transform: translateX(10px);
    transform: translateX(10px); }

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

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight; }

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px); }

  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px); }

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

@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px); }

  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    transform: translateY(-30px); }

  80% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px); }

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

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp; }

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }

  25% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95); }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }

  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3); } }

@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1); }

  25% {
    -webkit-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95); }

  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1); }

  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    -ms-transform: scale(0.3);
    transform: scale(0.3); } }

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut; }

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }

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

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

@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px); } }

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown; }

@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }

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

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

@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft; }

@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }

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

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

@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); } }

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight; }

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }

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

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

@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp; }

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn; }

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px); }

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

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px); }

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

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown; }

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); }

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

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); }

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

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig; }

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px); }

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

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px); }

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

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft; }

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); }

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

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); }

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

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig; }

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px); }

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

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px); }

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

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight; }

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px); }

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

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); }

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

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig; }

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px); }

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

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px); }

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

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp; }

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px); }

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

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px); }

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

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig; }

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }

  100% {
    opacity: 0; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }

  100% {
    opacity: 0; } }

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut; }

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }

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

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px); } }

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown; }

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }

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

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px); } }

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig; }

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }

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

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px); } }

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft; }

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }

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

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig; }

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }

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

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px); } }

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight; }

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0); }

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

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); } }

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig; }

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }

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

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px); } }

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp; }

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); }

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

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig; }

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }

  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out; }

  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }

  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; }

  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in; } }

.animated.flip {
  -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip; }

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg); }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg); }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; } }

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; }

  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    -ms-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg); }

  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    -ms-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg); }

  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; } }

.flipInX {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX; }

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg); }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg); }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; } }

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; }

  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    -ms-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg); }

  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    -ms-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg); }

  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; } }

.flipInY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY; }

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; } }

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; } }

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important; }

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; } }

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    -ms-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1; }

  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    -ms-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0; } }

.flipOutY {
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY; }

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1; }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1; }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1; } }

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    -ms-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1; }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    -ms-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1; }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1; } }

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out; }

@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1; }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; } }

@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1; }

  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    -ms-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0; } }

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in; }

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    -ms-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn; }

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft; }

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight; }

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft; }

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; } }

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight; }

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0; } }

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    -ms-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0; } }

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut; }

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft; }

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight; }

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0; } }

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft; }

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    opacity: 1; }

  100% {
    -webkit-transform-origin: right bottom;
    -ms-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0; } }

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight; }

@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px); }

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

@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); }

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

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown; }

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px); }

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

@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); }

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

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft; }

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d; }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d; } }

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d; }

  100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d; } }

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight; }

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }

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

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    -ms-transform: translateX(-2000px);
    transform: translateX(-2000px); } }

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft; }

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }

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

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    -ms-transform: translateX(2000px);
    transform: translateX(2000px); } }

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight; }

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }

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

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); }

  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    -ms-transform: translateY(-2000px);
    transform: translateY(-2000px); } }

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp; }

@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

  40% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

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

@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

  20%, 60% {
    -webkit-transform: rotate(80deg);
    -ms-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

  40% {
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    -ms-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out; }

  100% {
    -webkit-transform: translateY(700px);
    -ms-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0; } }

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg); }

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

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    -ms-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg); }

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

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn; }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg); } }

@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg); }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    -ms-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg); } }

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut; }
.spborder{    border-color: #ff745a;}
.colsp{color:#9d73ea;}
.colsp a{color:#9d73ea; text-decoration:none;}