@font-face {
font-family: 'Segoe UI Regular';
font-style: normal;
font-weight: normal;
/*src: local('../fonts/Segoe UI Regular'), url('../fonts/Segoe UI.woff') format('woff');*/
src: url('../fonts/Segoe UI Regular.eot');
    src: url('../fonts/Segoe UI Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Segoe UI Regular.woff2') format('woff2'),
        url('../fonts/Segoe UI Regular.woff') format('woff'),
        url('../fonts/Segoe UI Regular.ttf') format('truetype'),
        url('../fonts/Segoe UI Regular.svg#Segoe UI Regular') format('svg');
}


@font-face {
font-family: 'Segoe UI Italic';
font-style: normal;
font-weight: normal;
/*src: local('../fonts/Segoe UI Italic'), url('../fonts/Segoe UI Italic.woff') format('woff');*/
    src: url('../fonts/Segoe UI Regular.eot');
   src: url('../fonts/Segoe UI Italic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Segoe UI Italic.woff2') format('woff2'),
        url('../fonts/Segoe UI Italic.woff') format('woff'),
        url('../fonts/Segoe UI Italic.ttf') format('truetype'),
        url('../fonts/Segoe UI Italic.svg#Segoe UI Italic') format('svg');
}


@font-face {
font-family: 'Segoe UI Bold';
font-style: normal;
font-weight: normal;
/*src: local('../fonts/Segoe UI Bold'), url('../fonts/Segoe UI Bold.woff') format('woff');*/
src: url('../fonts/Segoe UI Bold.eot');
   src: url('../fonts/Segoe UI Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Segoe UI Bold.woff2') format('woff2'),
        url('../fonts/Segoe UI Bold.woff') format('woff'),
        url('../fonts/Segoe UI Bold.ttf') format('truetype'),
        url('../fonts/Segoe UI Bold.svg#Segoe UI Bold') format('svg');
}


@font-face {
font-family: 'Segoe UI Bold Italic';
font-style: normal;
font-weight: normal;
/*src: local('../fonts/Segoe UI Bold Italic'), url('../fonts/Segoe UI Bold Italic.woff') format('woff');*/
   src: url('../fonts/Segoe UI Bold Italic.eot');
   src: url('../fonts/Segoe UI Bold Italic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Segoe UI Bold Italic.woff2') format('woff2'),
        url('../fonts/Segoe UI Bold Italic.woff') format('woff'),
        url('../fonts/Segoe UI Bold Italic.ttf') format('truetype'),
        url('../fonts/Segoe UI Bold Italic.svg#Segoe UI Bold Italic') format('svg');
}
@font-face {
    font-family: 'AvalonReg';
    src: url('../fonts/Avalon-Regular.eot');
    src: url('../fonts/Avalon-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Avalon-Regular.woff2') format('woff2'),
        url('../fonts/Avalon-Regular.woff') format('woff'),
        url('../fonts/Avalon-Regular.ttf') format('truetype'),
        url('../fonts/Avalon-Regular.svg#Avalon-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'AvalonBold';
    src: url('../fonts/Avalon-Bold.eot');
    src: url('../fonts/Avalon-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Avalon-Bold.woff2') format('woff2'),
        url('../fonts/Avalon-Bold.woff') format('woff'),
        url('../fonts/Avalon-Bold.ttf') format('truetype'),
        url('../fonts/Avalon-Bold.svg#Avalon-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

body{  margin:auto; padding:0; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; 
      font-size-adjust:100%; font-size:14px; line-height:1.475;  color: #24292e!important;
      font-family: 'Segoe UI Regular'; font-weight: normal !important; min-height: 100vh; padding-bottom: 31px; width:100%; background-color:#fff;}

body::before {
    background: rgba(204,204,204,1);
    background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(204,204,204,1)), color-stop(100%, rgba(255,255,255,0)));
    background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(255,255,255,0) 100%);
    background: -o-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(255,255,255,0) 100%);
    background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom, rgba(204,204,204,1) 0%, rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff', GradientType=0 );
    content: "";
    display: block;
    width: 100%;
    height: 130px;
    top: 0;
    position: absolute;
    opacity: 0.7;
}
.content_wrapper { position:relative; min-height: 100%;}
.content_wrapper.p15 { margin-top: -15px; margin-bottom: -15px;}
.container{ max-width: 1170px !important; width:  1170px !important;}
.panel-body { padding: 10px!important; }
.row_hover:hover { background-color: #f6f8fa;}
img { max-width:100%; max-height:100%;}
th {font-family: 'Segoe UI Bold'; font-weight: normal;}
th, td { font-size: 14px; }
.fontBold { font-family: 'Segoe UI Bold'!important; }


/*--------------------max height-------------------*/

.max-ht10 {max-height: 10px!important;}
.max-ht20 {max-height: 20px!important;}
.max-ht30 {max-height: 30px!important;}
.max-ht40 {max-height: 40px!important;}
.max-ht50 {max-height: 50px!important;}
.max-ht60 {max-height: 60px!important;}
.max-ht70 {max-height: 70px!important;}
.max-ht80 {max-height: 80px!important;}
.max-ht90 {max-height: 90px!important;}
.max-ht100 {max-height: 100px!important;}
.max-ht110 {max-height: 110px!important;}
.max-ht120 {max-height: 120px!important;}

.max-wt10 {max-width: 10px!important;}
.max-wt20 {max-width: 20px!important;}
.max-wt30 {max-width: 30px!important;}
.max-wt40 {max-width: 40px!important;}
.max-wt50 {max-width: 50px!important;}
.max-wt60 {max-width: 60px!important;}
.max-wt70 {max-width: 70px!important;}
.max-wt80 {max-width: 80px!important;}
.max-wt90 {max-width: 90px!important;}
.max-wt100 {max-width: 100px!important;}
.max-wt110 {max-width: 110px!important;}
.max-wt120 {max-width: 120px!important;}
/*===============================================C. Typography================================================= */
ul, ol{ padding: 0; margin: 0;}
select::-ms-expand { display: none;}
li{ list-style: none;}
a {text-decoration: none; color: inherit;}
a:hover {text-decoration: none; color: #516fca;}
a:focus{ outline:none; text-decoration: none;}
d{ color:#e6995b;}
d:hover{ color:#2185d0;}
d:focus{ outline:none;}
p{ line-height:22px; }
p.small, p small{ font-size:13px;}
b, strong { font-weight: normal; font-family: 'Segoe UI Bold';}
h1, h2, h3, h4, h5, h6{ margin:0; color:#a7a5a5; 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:30px;margin-top:10px;}
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:#999;}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small{ color:#999;}
.fw400{ font-weight:400;}
.fw600{ font-weight:600;}
.fw700{ font-weight:600;}
.text-uppercase{ text-transform:uppercase;}
.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 #ccc;}
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 COMPONENTSA. NavbarB. SidebarC. Topbar===================================================A. Navbar=================================================== */
.navbar{ z-index:1030; margin-bottom:0; border-radius:0; min-height:60px; max-height:60px;}
/* Navbar Logo Container */
.navbar-branding{ float:left; width:230px;}
/* Navbar Logo */
.navbar-brand{ height:60px; line-height:48px; padding:0; color:#5d5d5d; font-size:14px; letter-spacing:0.5px;}
/* 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;}
select{ color:#555; font-size:14px; height:34px; line-height:1.42857; padding:0; text-align:left; text-indent:3px; width:100%; border:1px solid #ccc;}
/* Right Navbar Container */
.navbar-right{ margin:15px 20px 0px 0px; position:fixed; top:0px; right:0px; z-index:9999;}
/* 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:14px;  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:#e6995b;}
/* 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:14px; border:1px solid #FFF; border-radius:100%; background:#e6995b;}
/* 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:14px; border-color:#CCC;}
/* Header Menu Dropdown - Header */
.navbar-menus .dropdown-header{ padding:9px 20px; margin:0; font-size:14px; 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-size:14px; color:#BBB;}
.dropdownSearch::-moz-placeholder{ font-size:14px; color:#BBB;}
/* firefox 19+ */
.dropdownSearch:-ms-input-placeholder{ font-size:14px; color:#BBB;}
/* ie */
.dropdownSearch:-moz-placeholder{ font-size:14px; color:#BBB;}
/* Header Menu Dropdown - Footer */
.navbar-menus .dropdown-footer{ padding:11px 20px; margin:0; z-index:999; font-size:14px; 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(../images/plugins/handle.png);}

/*===============================================B. Sidebar User Area================================================= */
.user-info{ overflow:hidden; position:relative; display:inline-block; height:auto; width:auto; padding:0px 5px;}
/* 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:#e6995b;}
.user-info.usermenu-open .media-object{ border-color:#e6995b;}
/* User Area Menu - A slide down user menu */
.user-menu{ display:none; position:relative; left:0; top:0; height:165px; 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;}

/*====================================================E. Custom Menu - Email Menu====================================================== */
.email-menu{ padding:12px 22px 18px 18px;}
.email-menu li{ color:#999; padding-left:27px; margin-bottom:7px !important;}
.email-menu li.menu-header{ 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;}

/*===============================================C. Topbar================================================= */
#topbar{ z-index:80; /* 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. PANELSA. HeadingB. Panel Addon - MenuC. Panel Addon - SidemenuD. Panel Addon - TrayE. Panel TabsF. 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:15px; border-color:#d5d5d5; border-radius:5px; overflow: hidden;}
/* panel helper class */
.panel-overflow{ overflow:hidden;}
.panel-heading{ position:relative; padding:0; min-height:40px; line-height:40px; color:#231f20; font-size:13px; border-bottom:1px solid #e5e5e5; border-radius:2px 2px 0 0; margin-bottom: 10px;}
.panel-heading + .panel-body{ border-top-color:#e5e5e5;}
.panel-title{ font-size:14px; padding-left:15px; font-family: 'Segoe UI Bold'; color: #24292e;}
.panel-title > .fa,.panel-title > .glyphicon,.panel-title > .glyphicons,.panel-title > .imoon{ min-width:25px; margin-right:8px; border-right:1px solid #ddd; color:#2185d0; font-size:18px; 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 anextra nav list. When used its siblingpanel 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; 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:#586069;}
.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:#e6995b; 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: #2185d0;}
/* 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 ELEMENTSA. IconsB. LabelsC. BadgesD. AlertsE. ThumbnailsF. Media ObjectsG. ButtonsH. Progress BarsI. Field ElementsJ. CheckboxesK. SwitchesL. TablesM. Pricing TablesN. TabsO. PaginationsP. Bootstrap ModalsQ. Custom ModalsR. 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:#2185d0;}
.panel-sidemenu ul.nav li a:hover{ background:none;}
.panel-sidemenu ul.nav li .fa{ width:28px; color:#b1b1b1; 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%!important; line-height:24px; font-weight: normal!important;}
/* 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;}
/*===============================================C. Badges================================================= */
.badge{ padding:3px 7px; font-size:12px; }
/* 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-dismissable .close{ color:#666;}
/*===============================================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;}
.navbar-right .user-info .media .badge{ height:53px; width:53px; border-radius:50%; line-height:39px; border:3px solid #0082e5; color:#000; background-color:#fff;}
/*===============================================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;}
/* Button Settings */
.btn{ color:#fff; outline:none; border:none; border-radius:3px; letter-spacing:0.025em; font-weight: normal;}
.btn:focus, .btn:active:focus, .btn.active:focus{ color:#fff; outline:none;}
.btn.btn-default:focus, .btn.btn-default:active:focus, .btn.btn-default.active:focus{ color:#777; outline:none;}
.btn-link{ color:#444;}
.btn-link:hover{ color:#444;}
/* Button Sizes */
.btn-xs{ padding:2px 6px;}
.btn-sm{ line-height:1.5;}
.btn-lg{ line-height:1.33;}
/* Button Shapes */
.btn-square{ border-radius:0;}
.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;}
.btn-alert{ background-color:#7857ca; color:#fff;}
.btn-alert.btn-gradient{ background-color:#5d3ab5;}
.btn-alert .caret{ border-top-color:#fff;}
/* Button Hover effect */
.btn:hover{ color:#fff; /*background:#72bb72; */
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%);}
button.btn:hover{ background:#9bd252;}
.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;}


/*===============================================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 */

/* Input Design */
.form-control{ box-shadow:none; border-radius:3px; padding: 5px 12px; height: 30px;}
/* 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:#03a9f4; background-color:#fafafa; border-radius:0; border-color:#DDD;}
/* Input Focus */
.form-control:focus, input{ border-color:#ccc; box-shadow:none; outline:none;}
/* Disabled Input */
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{ background-color:#fafafa;}
li[disabled]{ cursor:not-allowed;}
/* 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%);}
/*===============================================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;  padding:8px;}
.table-striped > tbody > tr:nth-child(odd) > td{ background-color:#FFF;  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;}

table tr th, table tr td { vertical-align: middle !important; }


/* 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; 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; 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; 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;}
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. HELPERSA. GeneralB. Font Size C. Table LayoutD. PaddingE. MarginF. Line HeightG. BordersH. Max Width===================================================A. General/Misc Helpers=================================================== */
/* overflow Helpers */
.overflow-v{ overflow:visible !important;}
.overflow-h{ overflow:hidden !important;}
/*===============================================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;}
.mt22{ margin-top:22px !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;}

.mt_5{ margin-top:-5px !important;}
.mt_10{ margin-top:-10px !important;}
.mt_15{ margin-top:-15px !important;}
.mt_20{ margin-top:-20px !important;}
.mt_25{ margin-top:-25px !important;}
.mt_30{ margin-top:-30px !important;}
.mt_35{ margin-top:-35px !important;}
.mt_40{ margin-top:-40px !important;}
.mt_50{ 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;}

.mr_5{ margin-right:-5px !important;}
.mr_10{ margin-right:-10px !important;}
.mr_15{ margin-right:-15px !important;}
.mr_20{ margin-right:-20px !important;}
.mr_25{ margin-right:-25px !important;}
.mr_30{ margin-right:-30px !important;}
.mr_35{ margin-right:-35px !important;}
.mr_40{ margin-right:-40px !important;}
.mr_50{ 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;}

.mb_5{ margin-bottom:-5px !important;}
.mb_10{ margin-bottom:-10px !important;}
.mb_15{ margin-bottom:-15px !important;}
.mb_20{ margin-bottom:-20px !important;}
.mb_25{ margin-bottom:-25px !important;}
.mb_30{ margin-bottom:-30px !important;}
.mb_35{ margin-bottom:-35px !important;}
.mb_40{ margin-bottom:-40px !important;}
.mb_50{ 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;}

.ml_5{ margin-left:-5px !important;}
.ml_10{ margin-left:-10px !important;}
.ml_15{ margin-left:-15px !important;}
.ml_20{ margin-left:-20px !important;}
.ml_25{ margin-left:-25px !important;}
.ml_30{ margin-left:-30px !important;}
.ml_35{ margin-left:-35px !important;}
.ml_40{ margin-left:-40px !important;}
.ml_50{ margin-left:-50px !important;}
/*===============================================F. LineHeight Helpers================================================= */
.lhn{ line-height:normal !important;}
.lh0{ line-height:0 !important;}
.lh5{ line-height:5px !important;}
.lh7{ line-height:7px !important;}
.lh10{ line-height:10px !important;}
.lh15{ line-height:15px !important;}
.lh18{ line-height:18px !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;}

/*===============================================
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: #2185d0 !important; }
.text-blue3{color:#398bd8!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: #e95959 !important; }
.text-red2 {color: #ff007e !important; }
.text-red3 {color: #ff4f3e !important; }
.text-orange {color: #fbb882 !important; }
.text-orange2 {color: #ff007e !important; }
.text-orange3 {color: #e55e20 !important; }
.text-yellow {color: #ffe29c !important; }
.text-yellow2 {color: #ffcf5a !important; }
.text-yellow3 {color: #ff9d3e !important; }
.text-green {color: #5cb85c !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: #666666 !important; }
.text-dark3 {color: #494949 !important; }
.text-dark4 {color: #323232 !important; }
.text-dark5 {color: #1e1c1f !important; }

/*===============================================
Border Colors with hover bg
================================================= */

.btn-outline-primary {
    color: #007bff !important;
    border-color: #007bff !important;
}
.btn-outline-primary:hover {
    color: #fff !important;
    background-color: #007bff;
    border-color: #007bff !important;
}
.btn-outline-secondary {
    color: #6c757d !important;
    border-color: #6c757d !important;
}
.btn-outline-secondary:hover {
    color: #fff !important;
    background-color: #6c757d;
    border-color: #6c757d !important;
}
.btn-outline-success {
    color: #28a745 !important;
    border-color: #28a745 !important;
}
.btn-outline-success:hover {
    color: #fff !important;
    background-color: #28a745;
    border-color: #28a745 !important;
}
.btn-outline-danger {
    color: #dc3545 !important;
    border-color: #dc3545 !important;
}
.btn-outline-danger:hover {
    color: #fff !important;
    background-color: #dc3545;
    border-color: #dc3545 !important;
}
.btn-outline-warning {
    color: #ffc107 !important;
    border-color: #ffc107 !important;
}
.btn-outline-warning:hover {
    color: #212529 !important;
    background-color: #ffc107;
    border-color: #ffc107 !important;
}
.btn-outline-info {
    color: #17a2b8 !important;
    border-color: #17a2b8 !important;
}
.btn-outline-info:hover {
    color: #fff !important;
    background-color: #17a2b8;
    border-color: #17a2b8 !important;
}
.btn-outline-light {
    color: #f8f9fa;
    border-color: #f8f9fa;
}
.btn-outline-light:hover {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}
.btn-outline-dark {
    color: #343a40 !important;
    border-color: #343a40 !important;
}
.btn-outline-dark:hover {
    color: #fff !important;
    background-color: #343a40;
    border-color: #343a40 !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: #2185d0 !important; }

.border-blue3 {
border-color: #398bd8 !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: #ff007e !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: #666666 !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: #516fca !important; }

.bg-blue2 {
background-color: #2185d0 !important; }

.bg-blue3 {
background-color: #398bd8 !important; }

.bg-blue3.dark {
background-color: #e6995b !important; }

.bg-purple {
background-color: #c7b7e5 !important; }

.bg-purple2 {
background-color: #a287d4 !important; }

.bg-purple3 {
background-color: #715da3 !important; color: #fff !important; }

.bg-pink {
background-color: #ffd1ed !important; }

.bg-pink2 {
background-color: #ffb2e1 !important; }

.bg-pink3 {
background-color: #ff7fb4 !important; }

.bg-red {
background-color: #e95959 !important; }

.bg-red2 {
background-color: #ff745a !important; }

.bg-red3 {
background-color: #ff4f3e !important; }

.bg-red4 {
background-color: #e95959 !important /*#ff182d !important*/; }

.bg-orange {
background-color: #fbb882 !important; }

.bg-orange2 {
background-color: #5fd8c7 !important; }

.bg-orange3 {
background-color: #e55e20 !important; }

.bg-yellow {
background-color: #febf00 !important; }

.bg-yellow2 {
background-color: #ffcf5a !important; }

.bg-yellow3 {
background-color: #ff9d3e !important; }

.bg-green {
background-color: #5cb85c !important; }

.bg-green2 {
background-color: #a0d65a !important; }

.bg-green3 {
background-color: #6fa53e !important; }

.bg-green4 {
background-color: #5cb85c !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: #666666 !important; }

.bg-dark3 {
background-color: #494949 !important; }

.bg-dark4 {
background-color: #323232 !important; }

.bg-dark5 {
background-color: #1e1c1f !important; }

.bg-priority1 {
background-color: #f5d658 !important; color: #FFF; }

.bg-priority2 {
background-color: #f4c10f !important; color: #FFF; }

.bg-priority3 {
background-color: #fb9a32 !important; color: #FFF; }

.bg-priority4 {
background-color: #f36611 !important; color: #FFF; }

.bg-priority5 {
background-color: #e70a0a !important; color: #FFF; }


/* Used for gradient creation of Neutral Colors */
.bg-dark.bg-gradient {
background-color: #777777 !important; }

.bg-dark2.bg-gradient {
background-color: #666666 !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!important;}

.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; }
/*===============================================I. Boostrap cols padding================================================= */
.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: 10px;
    padding-right: 10px;
}
.row { margin-left: -10px; margin-right: -10px; }
.btn-gray {background-color: #aaa; color:#fff;}
.btn-gray:hover {background-color: #929292;}

.pagination li a {  font-weight: normal; font-family: 'Segoe UI Bold'; }
.pagination li.active a { background-color:#2185d0!important; color:#fff !important;}
.pagination li.active:hover a { background-color:#2185d0!important; color:#fff !important; box-shadow: none; border-color:#2185d0!important;}
.pagination li {margin-left: -1px!important;}

.shadow-none {box-shadow:none!important;}

.dis_il {display:inline!important;}
.dis_bk {display:block!important;}
.dis_ilb {display:inline-block!important;}

/*switch btn css*/
.switch { position: relative; display: inline-block; width: 60px; height: 34px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch label { border-radius: 50px; height: 30px; margin: 0; position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s;  transition: .4s;  }
.switch label:before { border-radius: 50px; position: absolute; content: ""; height: 22px; width: 24px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; }
.switch input:focus + label { box-shadow: 0 0 1px #2196F3; }
.switch input:checked + label:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }
.switch input:checked + label { background-color: #2196F3; }

/*.errormsg { color: #ff0000; position: absolute; top: 5px; right: 11px; font-size: 11px; z-index: 9999;}*/

.errormsg { color: #ff0000; z-index: 9999;}


.comment_editor b, .comment_editor strong { font-family: 'Segoe UI Bold'; }
.comment_editor ol, .comment_editor ul { padding-left: 20px; }
.comment_editor ol li { list-style: decimal; }
.comment_editor ul li { list-style: disc; }

.btn-dark-gradient{
background: #969696;
background: -moz-linear-gradient(top, #969696 0%, #707070 40%, #666666 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #969696), color-stop(40%, #707070), color-stop(100%, #666666));
background: -webkit-linear-gradient(top, #969696 0%, #707070 40%, #666666 100%);
background: -o-linear-gradient(top, #969696 0%, #707070 40%, #666666 100%);
background: -ms-linear-gradient(top, #969696 0%, #707070 40%, #666666 100%);
background: linear-gradient(to bottom, #969696 0%, #707070 40%, #666666 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#969696', endColorstr='#666666', GradientType=0 );
}
.btn-dark-gradient:hover{
background: #969696;
background: -moz-linear-gradient(top, #969696 0%, #636363 40%, #444446 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #969696), color-stop(40%, #636363), color-stop(100%, #444446));
background: -webkit-linear-gradient(top, #969696 0%, #636363 40%, #444446 100%);
background: -o-linear-gradient(top, #969696 0%, #636363 40%, #444446 100%);
background: -ms-linear-gradient(top, #969696 0%, #636363 40%, #444446 100%);
background: linear-gradient(to bottom, #969696 0%, #636363 40%, #444446 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#969696', endColorstr='#444446', GradientType=0 );
}

.btn-info-gradient {
background: #86d5eb;
background: -moz-linear-gradient(top, #86d5eb 0%, #3ec4e6 40%, #0fabd6 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #86d5eb), color-stop(40%, #3ec4e6), color-stop(100%, #0fabd6));
background: -webkit-linear-gradient(top, #86d5eb 0%, #3ec4e6 40%, #0fabd6 100%);
background: -o-linear-gradient(top, #86d5eb 0%, #3ec4e6 40%, #0fabd6 100%);
background: -ms-linear-gradient(top, #86d5eb 0%, #3ec4e6 40%, #0fabd6 100%);
background: linear-gradient(to bottom, #86d5eb 0%, #3ec4e6 40%, #0fabd6 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86d5eb', endColorstr='#0fabd6', GradientType=0 );
}
.btn-info-gradient:hover {
background: #86d5eb;
background: -moz-linear-gradient(top, #86d5eb 0%, #3ab7d6 40%, #0a99bd 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #86d5eb), color-stop(40%, #3ab7d6), color-stop(100%, #0a99bd));
background: -webkit-linear-gradient(top, #86d5eb 0%, #3ab7d6 40%, #0a99bd 100%);
background: -o-linear-gradient(top, #86d5eb 0%, #3ab7d6 40%, #0a99bd 100%);
background: -ms-linear-gradient(top, #86d5eb 0%, #3ab7d6 40%, #0a99bd 100%);
background: linear-gradient(to bottom, #86d5eb 0%, #3ab7d6 40%, #0a99bd 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#86d5eb', endColorstr='#0a99bd', GradientType=0 );
}
.btn-danger-gradient {
background: #f25c70;
background: -moz-linear-gradient(top, #f25c70 0%, #ea384d 40%, #c9021d 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #f25c70), color-stop(40%, #ea384d), color-stop(100%, #c9021d));
background: -webkit-linear-gradient(top, #f25c70 0%, #ea384d 40%, #c9021d 100%);
background: -o-linear-gradient(top, #f25c70 0%, #ea384d 40%, #c9021d 100%);
background: -ms-linear-gradient(top, #f25c70 0%, #ea384d 40%, #c9021d 100%);
background: linear-gradient(to bottom, #f25c70 0%, #ea384d 40%, #c9021d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f25c70', endColorstr='#c9021d', GradientType=0 );
}
.btn-danger-gradient:hover {
background: #f25c70;
background: -moz-linear-gradient(top, #f25c70 0%, #d13449 40%, #b50923 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #f25c70), color-stop(40%, #d13449), color-stop(100%, #b50923));
background: -webkit-linear-gradient(top, #f25c70 0%, #d13449 40%, #b50923 100%);
background: -o-linear-gradient(top, #f25c70 0%, #d13449 40%, #b50923 100%);
background: -ms-linear-gradient(top, #f25c70 0%, #d13449 40%, #b50923 100%);
background: linear-gradient(to bottom, #f25c70 0%, #d13449 40%, #b50923 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f25c70', endColorstr='#b50923', GradientType=0 );
}
.btn-success-gradient {
background: #72cc72;
background: -moz-linear-gradient(top, #72cc72 0%, #5ca85c 40%, #319e31 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #72cc72), color-stop(40%, #5ca85c), color-stop(100%, #319e31));
background: -webkit-linear-gradient(top, #72cc72 0%, #5ca85c 40%, #319e31 100%);
background: -o-linear-gradient(top, #72cc72 0%, #5ca85c 40%, #319e31 100%);
background: -ms-linear-gradient(top, #72cc72 0%, #5ca85c 40%, #319e31 100%);
background: linear-gradient(to bottom, #72cc72 0%, #5ca85c 40%, #319e31 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#72cc72', endColorstr='#319e31', GradientType=0 );
}
.btn-success-gradient:hover {
background: #72cc72;
background: -moz-linear-gradient(top, #72cc72 0%, #3d9e3d 40%, #218221 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #72cc72), color-stop(40%, #3d9e3d), color-stop(100%, #218221));
background: -webkit-linear-gradient(top, #72cc72 0%, #3d9e3d 40%, #218221 100%);
background: -o-linear-gradient(top, #72cc72 0%, #3d9e3d 40%, #218221 100%);
background: -ms-linear-gradient(top, #72cc72 0%, #3d9e3d 40%, #218221 100%);
background: linear-gradient(to bottom, #72cc72 0%, #3d9e3d 40%, #218221 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#72cc72', endColorstr='#218221', GradientType=0 );
}

.btn-purple-gradient {
background: #8471b3;
background: -moz-linear-gradient(top, #8471b3 0%, #765bba 40%, #5537a8 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #8471b3), color-stop(40%, #765bba), color-stop(100%, #5537a8));
background: -webkit-linear-gradient(top, #8471b3 0%, #765bba 40%, #5537a8 100%);
background: -o-linear-gradient(top, #8471b3 0%, #765bba 40%, #5537a8 100%);
background: -ms-linear-gradient(top, #8471b3 0%, #765bba 40%, #5537a8 100%);
background: linear-gradient(to bottom, #8471b3 0%, #765bba 40%, #5537a8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8471b3', endColorstr='#5537a8', GradientType=0 );
}

.btn-purple-gradient:hover {
background: #8471b3;
background: -moz-linear-gradient(top, #8471b3 0%, #5d3bb3 40%, #3f2294 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #8471b3), color-stop(40%, #5d3bb3), color-stop(100%, #3f2294));
background: -webkit-linear-gradient(top, #8471b3 0%, #5d3bb3 40%, #3f2294 100%);
background: -o-linear-gradient(top, #8471b3 0%, #5d3bb3 40%, #3f2294 100%);
background: -ms-linear-gradient(top, #8471b3 0%, #5d3bb3 40%, #3f2294 100%);
background: linear-gradient(to bottom, #8471b3 0%, #5d3bb3 40%, #3f2294 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8471b3', endColorstr='#3f2294', GradientType=0 );
}

.btn-warning-gradient {
background: #ffd698;
background: -moz-linear-gradient(top, #ffd698 0%, #f5b95e 42%, #f7a643 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #ffd698), color-stop(42%, #f5b95e), color-stop(100%, #f7a643));
background: -webkit-linear-gradient(top, #ffd698 0%, #f5b95e 42%, #f7a643 100%);
background: -o-linear-gradient(top, #ffd698 0%, #f5b95e 42%, #f7a643 100%);
background: -ms-linear-gradient(top, #ffd698 0%, #f5b95e 42%, #f7a643 100%);
background: linear-gradient(to bottom, #ffd698 0%, #f5b95e 42%, #f7a643 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd698', endColorstr='#f7a643', GradientType=0 );
}
.btn-warning-gradient:hover{
background: #ffd79c;
background: -moz-linear-gradient(top, #ffd79c 0%, #f5ae44 42%, #e69431 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #ffd79c), color-stop(42%, #f5ae44), color-stop(100%, #e69431));
background: -webkit-linear-gradient(top, #ffd79c 0%, #f5ae44 42%, #e69431 100%);
background: -o-linear-gradient(top, #ffd79c 0%, #f5ae44 42%, #e69431 100%);
background: -ms-linear-gradient(top, #ffd79c 0%, #f5ae44 42%, #e69431 100%);
background: linear-gradient(to bottom, #ffd79c 0%, #f5ae44 42%, #e69431 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd79c', endColorstr='#e69431', GradientType=0 );
}
.btn-primary-gradient{
background: #63b0f0;
background: -moz-linear-gradient(top, #63b0f0 0%, #4aa5f0 43%, #428aca 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #63b0f0), color-stop(43%, #4aa5f0), color-stop(100%, #428aca));
background: -webkit-linear-gradient(top, #63b0f0 0%, #4aa5f0 43%, #428aca 100%);
background: -o-linear-gradient(top, #63b0f0 0%, #4aa5f0 43%, #428aca 100%);
background: -ms-linear-gradient(top, #63b0f0 0%, #4aa5f0 43%, #428aca 100%);
background: linear-gradient(to bottom, #63b0f0 0%, #4aa5f0 43%, #428aca 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63b0f0', endColorstr='#428aca', GradientType=0 );
}
.btn-primary-gradient:hover{
background: #63b0f0;
background: -moz-linear-gradient(top, #63b0f0 0%, #4ca2e8 43%, #1476cc 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #63b0f0), color-stop(43%, #4ca2e8), color-stop(100%, #1476cc));
background: -webkit-linear-gradient(top, #63b0f0 0%, #4ca2e8 43%, #1476cc 100%);
background: -o-linear-gradient(top, #63b0f0 0%, #4ca2e8 43%, #1476cc 100%);
background: -ms-linear-gradient(top, #63b0f0 0%, #4ca2e8 43%, #1476cc 100%);
background: linear-gradient(to bottom, #63b0f0 0%, #4ca2e8 43%, #1476cc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#63b0f0', endColorstr='#1476cc', GradientType=0 );
}

.tm-tag {
  color: #555555;
  background-color: #f5f5f5;
  border: #bbbbbb 1px solid;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  display: inline-block;
  border-radius: 2px;
  font-size: 13px;
  margin: 2px 5px 0px 0;
  padding: 0px 0px 2px!important;
  text-decoration: none;
  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  -webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
  vertical-align: middle; line-height: 1em; }

.tm-tag .tm-tag-remove {
    color: #ddd;
    padding: 0px!important;
    border-radius: 0;
    font-size: 13px!important;
    margin: 0px 3px !important;
    background-color: transparent;
}
.tm-tag span, .tm-tag a 
{ line-height: 1!important; display: inline-block!important; margin-left: 2px!important; }

.tm-tag .tm-tag-remove:hover {
  color: #fff;
  text-decoration: none;
}

.tm-tag.tm-tag-success {
  color: #fff;
  background-color: #808080;
  border-color: #808080; }

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: none;
}

/*ticket*/
.ticketPg{background-image: url(../images/page_bg.jpg);background-attachment: fixed;background-size: cover;background-position:center;padding-bottom:0px!important;}
.ticketBlk .panel {max-width: 650px;margin: 50px auto 20px auto;-webkit-box-shadow: 0px 0px 25px 5px rgba(0,0,0, 0.2);-moz-box-shadow: 0px 0px 25px 5px rgba(0,0,0, 0.2);box-shadow: 0px 0px 25px 5px rgba(0,0,0, 0.2);background-color: #fff;border: none;border-radius:0px; padding:0px; z-index:9;}
.ticketPg:before{z-index:-1;}
.ticketBlk{padding:5px;}
.ticketBlk .panel-heading{padding:15px 20px 10px 20px; margin-bottom:0px;}
.ticketBlk .panel-heading img{max-width:200px;}
.ticketBlk .panel-heading .compName{padding-left:0px;margin-bottom:0px;font-family: 'AvalonBold';line-height: normal;font-weight: bold;letter-spacing: -2px; margin-top: -8px; display:inline-block; float:left;}
.ticketBlk .panel-heading img{display:inline-block; float:right; max-height:50px;}
.ticketBlk .panel-heading .compName, .ticketBlk .panel-heading .compName span { font-size:30px !important; display: inline-block; line-height: 1em; }
.ticketBlk .panel-heading .compName i {font-style: normal;font-family: 'Segoe UI Regular';line-height: 1em;font-size: 26px;}
.ticketBlk .compName span {color: #2185d0;}
.ticketBlk .panel-heading h2{    font-size: 18px;line-height: 1em;color: #000;margin-top: 0px;margin-bottom: 0px;font-weight: bold;display: inline-block;padding: 5px 10px;border-radius: 5px;background-color: #2185d0;}
.ticketBlk .panel-body{padding:15px!important;}
.ticketBlk .form-group input, .ticketBlk .form-group select {min-height: 40px; border-radius:5px;}
.ticketBlk textarea{min-height: 150px; border-radius:5px; width:100%;border: 1px solid #ccc;}
.ticketBlk .ticketSbmt .btn {display: inline-block !important;width: 100%;float: none!important;text-align: center;text-transform: uppercase;padding: 15px 5px!important;border-radius: 5px;font-size: 15px!important;margin-top: 20px;height: auto;background: rgba(242,169,0,1);
background: -moz-linear-gradient(top, rgba(242,169,0,1) 0%, rgba(224,153,0,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(242,169,0,1)), color-stop(100%, rgba(224,153,0,1)));
background: -webkit-linear-gradient(top, rgba(242,169,0,1) 0%, rgba(224,153,0,1) 100%);
background: -o-linear-gradient(top, rgba(242,169,0,1) 0%, rgba(224,153,0,1) 100%);
background: -ms-linear-gradient(top, rgba(242,169,0,1) 0%, rgba(224,153,0,1) 100%);
background: linear-gradient(to bottom, rgba(242,169,0,1) 0%, rgba(224,153,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2a900', endColorstr='#e09900', GradientType=0 );
}
.g-recaptcha{max-width:100%;}
.ticketProj{ display:inline-block; float:right; }
.ticketProj h4{font-size: 18px; text-align: center;font-weight: bold;padding-bottom: 0px; margin-bottom:0px;}
.ticketBlk .g-recaptcha > div{margin:auto;}
.ticketBlk .drgdrpWrp{border: 2px dashed #ccc;}
.ticketBlk .drgdrpWrp{ height: 80px;}
.ticketBlk .drgdrpWrp .drpInfo .mt40.fs30{margin-top: 22px!important;margin-right: 10px;vertical-align: top;}
.ticketBlk .drpInfo p{display: inline-block;line-height: 1em;margin-top: 15px;vertical-align: top;}
.pgLogo{position:absolute; bottom:15px; left:15px; max-width:150px;}

.sucMsgBx { background: rgba(255, 255, 255, 0.85); content: ""; width: 100%; height: 100%; position: fixed; top: 0; bottom: 0; right: 0; left: 0; z-index: 999; }
.sucMsg {box-shadow: 0 35px 54px rgba(0, 0, 0, 0.3), 0 5px 20px rgba(0, 0, 0, 0.07), 0 0px 1px rgba(0, 0, 0, 0.12);background-color: #fff;width: 700px;margin: 55px auto; text-align: left;padding: 20px 25px; border-radius: 3px;}
.sucTitle { border-bottom: 2px solid #2185d0; margin-bottom: 10px; padding-bottom: 5px; }
.sucTitle h2 span { color: #2185d0;  }
.sucDis p { font-size: 15px;}
.sucDis a { float: right; }

/*--------------animation-------------------*/

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