/*--------------------------------------------------------------

0. RESET & CLEARFIX
1. BASIC
2. GANERAL ELEMENTS
3. HEADER
4. MAIN MENU
5. FOOTER
6. TEMPLATE SETTINGS7935
7. LAYOUTS
    7.1 GRID SCAFFOLDING
8. FEATURES
    8.1 GENERAL PAGES
            8.1.1 USERLIST
            8.1.2 INVOICE
            8.1.3 PROFILE
            8.1.4 SEARCH
            8.1.5 GALLERY
            8.1.6 GALLERY GRID
            8.1.7 EMAIL
    8.2 APPS
            8.2.1 CONTACTS

9. COMPONENTS
    9.1 BACIS UI
        9.1.1 PANEL
            9.1.1.1 PANEL STRUCTURE
            9.1.1.2 PANEL ACTION
        9.1.2 BUTTONS
        9.1.3 ICONS
        9.1.4 LIST
        9.1.5 DROPDOWN
        9.1.6 IMAGE
        9.1.7 MODAL
        9.1.8 SCROLLABLE
        9.1.9 TYPOGRAPHY
        9.1.10 UTILITIES
        9.1.11 COLORS
        9.1.12 TABS & ACCORDIONS
        9.1.13 BADGES & LABELS
        9.1.14 TOOLTIP & POPOVER
        9.1.15 PROGRESS BARS
    9.2 ADVANCE UI
        9.2.1 TOUR
        9.2.2 ANIMATION
        9.2.3 HIGHLIGHT
        9.2.4 MASONRY
        9.2.5 TOASTR
    9.3 ELEMENTS
        9.3.1 ALERT
        9.3.2 RIBBON
        9.3.3 PRICING TABLE
        9.3.4 OVERLAY
        9.3.5 STEP
        9.3.6 COVER
        9.3.7 SIMPLE TIMELINE
        9.3.8 TIMELINE
        9.3.9 TESTIMONIALS
        9.3.10 BLOCKQUOTE
        9.3.11 BREADCRUMBS
        9.3.12 COMMENTS
        9.3.13 MEDIA
        9.3.14 CHAT
        9.3.15 NAV
        9.3.16 NAVBAR
        9.3.17 PAGINATION
        9.3.18 DIFFRENT HEADER
    9.4 FORMS
        9.4.1 GENERAL ELEMENTS
        9.4.2 METERIAL ELEMENTS
        9.4.3 FORM LAYOUT
        9.4.4 FORM VALIDATION
        9.4.5 FORM WIZARD
    9.5 WIDGETS
        9.5.1 STATIC WIDGETS
        9.5.2 DATA WIDGETS
        9.5.3 BLOG WIDGETS
        9.5.4 SOCIAL WIDGETS
        9.5.5 CHART WIDGETS
10. CUSTOM STYLE
11. CUSTOMIZE FONTS

---------------------------------------------------------------*/

/*--------------------------------

 0. RESET & CLEARFIX 

--------------------------------*/

html,body { height: 100%; }
body {
    font-family: 'Roboto', 'Segoe UI', 'Droid Sans', Tahoma, Arial, sans-serif;
    font-size: 14px;
    color: #76838f;
    background: #f3f4f5;
    overflow-y: scroll; 
    overflow-x: hidden;
    padding-top: 60px;
    font-weight: 400;
    letter-spacing: 1.57142857;
}

select.input-sm {
    padding-top: 0;
    padding-bottom: 0;
}


.clearfix{
    clear: both;
}


/*--------------------------------

1. BASIC

--------------------------------*/

/*----- CUSTOM SCROLL BAR -----*/

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background: rgba(206, 206, 206, 0.74);
}

/*----- TRACK -----*/

::-webkit-scrollbar-track {
    /*    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
}

/*----- HANDLE -----*/

::-webkit-scrollbar-thumb {
    background: rgb(160, 155, 155);
    /*    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); */
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgb(173, 168, 168);
}

::-webkit-scrollbar-thumb:hover ::-webkit-scrollbar-track{
    background: gray;
}

/*----- HEADINGS -----*/


.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    line-height: 1.2;
    font-family: 'Raleway', sans-serif;
    color: #424242;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    text-shadow: rgba(0,0,0,.15) 0 0 1px;
}

.h1 small, .h2 small, .h3 small, h1 .small, h2 .small, h3 .small{
    font-size: 65%;
}

a:focus { outline: none;}

code {
    padding: 2px 4px;
    font-size: 90%;
    color: #4f5584;
    background: rgba(197,202,233,.1);
    border-radius: 3px;
}

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

/*.breadcrumb .text-info{
    font-weight: 700;
}*/

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

/*----- FORMS -----*/

.input-mini, .input-xxs {
    width: 45px!important;
}

.input-search .form-control {
    border-radius: 3px;
}
.input-search-button+.form-control {
    padding-right: 40px;
}
.form-control {
    -webkit-appearance: none;
    padding: 8px 13px 5px;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transition: -webkit-box-shadow .25s linear,border .25s linear,color .25s linear,background-color .25s linear;
    -o-transition: box-shadow .25s linear,border .25s linear,color .25s linear,background-color .25s linear;
    transition: box-shadow .25s linear,border .25s linear,color .25s linear,background-color .25s linear;
    -moz-appearance: none;
}


.input-group-sm>.form-control, .input-group-sm>.input-group-addon, .input-group-sm>.input-group-btn>.btn, .input-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}

.form-control:focus {
    background: transparent;
}

.search-btn+.form-control {
    border-color: #EAEAEA;
    border-radius: 3px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.form-control.focus, .form-control:focus {
    box-shadow: none;
}

.form-control .input-focus,.form-control:focus
{
    border-color: #5BC0DE;
}

.basic-table select.form-control[multiple] {
    padding-right: 15px;
    background: #fff;
}

.basic-table select.form-control {
    padding-right: 30px;
    background: #fff url("../../images/footable/arrow.png") no-repeat center right  !important;
}

.label.btn-primary:hover{
    background: #337ab7;
    border-color: #337ab7;
}

.label {
    padding: .25em .6em .25em;
    font-weight: 500;
}

.form-responsive {
    width: 100%;
    overflow-y: hidden;
}

/*----- TABLE -----*/

.table {
    color: #757575;
    margin-bottom:0;
}

.table-bordered>thead:first-child>tr:first-child>th {
    border: 1px solid #e0e0e0;
}

.table-bordered button { margin-right:10px;}
.text-middle { line-height: 29px !important;}

.table-bordered>thead>tr>td, .table-bordered>thead>tr>th {
    border-bottom-width: 1px;
}
.table>thead>tr>th {
    border-bottom: 1px solid #e0e0e0;
}
.table>tfoot>tr>th, .table>thead>tr>th {
    font-weight: 700;
    color: #616161;
}

.table-hover>tbody>tr:hover {
    background: #eee;
}

tfoot input {
    width: 100% !important;
    padding: 3px;
    box-sizing: border-box;
}

.edit-table tfoot{background: #F3F4F5;}

.table-striped tbody tr td{
    padding: 13px 8px 8px;
    vertical-align: middle;
}

.table.table-hover.margin-bottom-0 td { vertical-align: middle; }

.fixed-table-toolbar .columns label{
    font-size: 13px;
}

/*----- OTHER -----*/


p {
    margin: 0 0 11px;
}
code {
    border: 1px solid #c5cae9;
}

blockquote {
    font-size: 20px;
    border-left-width: 2px;
}

pre { background:none; border:none;}

.text-align-right{
    text-align: right;
}

.text-align-left{
    text-align: left;
}

.align-middle {
    display: table; 
    font-size: 14px; 
    height: 100%; 
    max-width: 100%; 
    width: 100%;
}

.vertical-align-middle {
    vertical-align: middle;
}

.vertical-align-bottom {
    vertical-align: bottom;
}

.vertical-align-bottom, .vertical-align-middle {
    display: inline-block;
    max-width: 100%;
    font-size: 14px;
}

.vertical-align:before {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    content: "";
}

.disply-flex{
    display: inline-flex;
}

.center-block
{
    display: block;
}

.visible-xlg-block { display: block !important;}

.inline-block {
    display: inline-block!important;
}

.example:after, .example:before {
    display: table;
    content: " ";
}

/*------ SCROLL TYPE -----*/

.horizontal-scroll { overflow-x:Scroll; width:100%;}
.horizontal-in-scroll { width:700px;}
.vertical-scroll { overflow-y:Scroll; width:100%; height:150px;}
.vertical-in-scroll { height:150px;}

.help-block {
    color: #b5b5b5;
}

/*----- WIDTH CLASS -----*/

.width-100
{
    width: 100%;
}


/*----- HEIGHT CLASS -----*/

.height-80
{
    height: 80px;
}

.height-100
{
    height: 100px;
}

.height-150
{
    height: 150px;
}

.height-200 {
    height: 200px;
}

.height-350
{
    height: 350px;
}

.height-405 {
    height: 405px;
}

/*----- FONT CLASS -----*/


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

.font-17
{
    font-size: 17px;
}

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

.font-25
{
    font-size: 25px;
}

.font-35
{
    font-size: 35px;
}

.font-50
{
    font-size: 50px;
}

/*--------------------------------

2. GANERAL ELEMENTS

--------------------------------*/

/*----- MIAN CONTENT -----*/

.layout-full .main-content{
    min-height:100%;
} 
.main-content {
    position: relative;
    min-height: -webkit-calc(100% - 44px);
    min-height: calc(100% - 44px);
    margin: 0 auto;
    background: #f3f4f5;
}

.page-header { 
    position: relative;
    padding: 30px 30px;
    margin-top: 0;
    display: table;
    margin-bottom: 0;
    width: 100%;
    background: 0 0;
    border-bottom: none;
}

.page-hd-border {
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 30px;
    background: #fff;
    border-bottom: 1px solid transparent;
}

.page-header .breadcrumb {
    padding: 0;
    margin: 0;
}

.page-header+.page-content {
    padding-top: 0;
}

.page-content {
    padding: 30px 30px;
}

.page-title {
    margin-top: 0;
    letter-spacing:1px;
    margin-bottom: 0;
    font-size: 30px;
}

.page-aside {

    overflow-y: auto;
    background: #fff;
    -webkit-transition: top .5s ease,width .5s ease,opacity .3s ease;
    -o-transition: top .5s ease,width .5s ease,opacity .3s ease;
    transition: top .5s ease,width .5s ease,opacity .3s ease;
}

.page-aside {
    position: fixed;
    top: 66px;
    bottom: 0;
    z-index: 1100;
    width: 0;
    overflow-y: visible;
    border-color: transparent;
    display: none;
    -webkit-transition: top .5s ease,width .5s ease,opacity .3s ease;
    -o-transition: top .5s ease,width .5s ease,opacity .3s ease;
    transition: top .5s ease,width .5s ease,opacity .3s ease; 

}

.general-form .input-search
{
    z-index: 9;
}

/*--------------------------------

3. HEADER

--------------------------------*/

.navbar-nav .dropdown-mega.open .dropdown-menu
{
    background: #fff !important;
}

.main-header .dropdown-mega a { padding-top: 19px; padding-bottom: 19px;}
.main-header .list-menu li a {
    padding-top: 0px;
    padding-bottom: 0px;
}
.main-header .list-menu li a:hover{
    background: transparent;
    color:black;
}
/*.main-header .navbar-right > li > a { padding-top: 20px; padding-bottom: 18px;}*/

.main-header .navbar-toolbar>li>a {
    padding-bottom: 20px;
    padding-top: 19px;
}
.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand {
    margin-left: 0;
}

.main-header {
    height: 60px;
    min-height: 60px;
}

.main-header .navbar-brand {
    height: 60px;
    padding: 10px 20px;
    position: relative;
    z-index: 99;
}


.navbar-fixed-bottom, .navbar-fixed-top {
    width: 100%;
}

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover {
    color: #fff;
    background: rgba(0,0,0,.1)
}

.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover {
    color: #fff;
    background: rgba(0,0,0,.1);
}

.navbar-inverse .navbar-brand {
    color: #DDEDF5;
}
.navbar-inverse .navbar-nav>li>a {
    color: #DDEDF5;
    padding-left: 10px;
    padding-right: 10px;
}
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover {
    color: #fff;
    background: rgba(0,0,0,.1)
}

.main-header.navbar-inverse .navbar-header .navbar-brand-logo-normal {
    display: inline-block;
}
.main-header .navbar-header .navbar-brand-logo {
    height: 36px;
}
.navbar-brand-text {
    margin-left: 6px;
}
.navbar-header{
    position: relative;
    height: 60px;
    -webkit-transition: all 0.3s ease;                  
    -moz-transition: all 0.3s ease;                 
    -o-transition: all 0.3s ease;   
    -ms-transition: all 0.3s ease;          
    transition: all 0.3s ease;
}
.navbar-avatar .avatar {
    width: 30px;
}

.avatar {
    position: relative;
    display: inline-block;
    width: 40px;
    white-space: nowrap;
    vertical-align: bottom;
    border-radius: 1000px;
}

.avatar img {
    width: 100% !important;
    max-width: 100%;
    height: auto;
    border: 0 none;
    border-radius: 3px; 
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4); 
    padding: 2px; 
    background: #fff;
}

.avatar-online i {
    background: #4caf50;
}
.avatar i {
    position: absolute;
    right: -3px;
    /* bottom: 0; */
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 100%;
    top:-2px;
}

.main-header .navbar-nav>li>a.navbar-avatar, .main-header .navbar-toolbar>li>a.navbar-avatar {
    padding-bottom: 13px;
    padding-top: 13px;
}

.navbar-toolbar .dropdown-menu {
    -webkit-transform-origin: 100% 0;
    -ms-transform-origin: 100% 0;
    -o-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -webkit-animation-duration: .3s;
    -o-animation-duration: .3s;
    animation-duration: .3s;
}

.dropdown-menu-media .dropdown-menu-header {
    position: relative;
    padding: 20px 20px;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
}


.dropdown-menu-media .dropdown-menu-header .badge, .dropdown-menu-media .dropdown-menu-header .label {
    position: absolute;
    top: 50%;
    left: 40%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.dropdown-menu-noti-btn{
    float: right;
    color: #9e9e9e;
}

.site-menu-sub .site-menu-sub {
    top: 0;
    left: 100%;
}

.w-icon i{ margin-right: 5px; line-height: inherit; float:left; } 

.navbar-toolbar>li {
    float: left;
}

.slidePanel-content > form{
    margin-bottom: 20px;
    margin-top: 20px;
}

.site-sidebar-content .list-group{
    border-top: 1px solid #ddd;
}

/*.site-sidebar-content .list-group .list-group-item:first-child {
    padding-top: 20px;
}*/

/*----- FLAG ICON -----*/

.flag-icon {
    width: 20px;
    height: 18px;
    vertical-align: middle;
}

.flag-icon {
    position: relative;
    display: inline-block;
    width: 1.33333333em;
    line-height: 1em;
}
.flag-icon, .flag-icon-background {
    background-repeat: no-repeat;
    background-size: contain;
}

.flag-avtar{
    padding-top: 18px;
    padding-bottom: 19px;
}

.dropdown-menu .flag-icon{
    width: 25px !important;
    height: 25px;
    float: left;
}
.language-box{min-width: 85px;}

.flag-icon-us { background-image: url("../../../assets/images/flags/us.png"); }
.flag-icon-au{background-image: url("../../../assets/images/flags/aus.png"); }
.flag-icon-in{background-image: url("../../../assets/images/flags/in.png"); }
.flag-icon-pt{background-image: url("../../../assets/images/flags/pt.png"); }
.flag-icon-de{background-image: url("../../../assets/images/flags/de.png"); }
.flag-icon-br{background-image: url("../../../assets/images/flags/br.svg"); }
.flag-icon-es{background-image: url("../../../assets/images/flags/es.svg"); }
.flag-icon-it{background-image: url("../../../assets/images/flags/ir.svg"); }

.flag-country {
    font-size: 16px;
    line-height: 25px;
}

/*----- CHAT BOX -----*/

.site-sidebar.slidePanel.slidePanel-left, .site-sidebar.slidePanel.slidePanel-right {
    width: 300px;
    overflow: hidden;
    overflow-y: scroll;
}

.site-sidebar.slidePanel {
    -webkit-box-shadow: 0 0 8px 0 rgba(0,0,0,.2);
    box-shadow: 0 0 8px 0 rgba(0,0,0,.2);
}

.site-navbar-small .slidePanel.slidePanel-left, .site-navbar-small .slidePanel.slidePanel-right {
    top: 60px;
}

.slidePanel.slidePanel-right{
    overflow-x: hidden;
    overflow-y: scroll;
}

.site-sidebar-nav.nav-tabs>li>a {
    padding: 0;
    font-size: 16px;
    line-height: 90px;
}

.site-sidebar-nav.nav-tabs>li {
    display: table-cell !important;
    width: 1%;
}

.slidePanel-content .list-group {
    margin-right: -30px;
    margin-left: -30px;
    margin-bottom: 0;
}

.slidePanel-content .list-group>.list-group-item {
    padding-right: 30px;
    padding-left: 30px;
    border-radius: 0;
}

.contextual-progress {
    margin: 20px 0;
}
.contextual-progress .progress-title {
    float: left;
}
.contextual-progress .progress-label {
    position: relative;
    float: right;
}

.contextual-progress .progress {
    height: 2px;
    margin: 5px 0;
}

.slidePanel-content {
    padding: 20px 30px;
    padding-bottom: 20px;
}

.slidePanel-content .list-group-item .media .media-left{
    padding-right: 10px;
}

.slidePanel-content .list-group-item .media small{
    float: left;
}

.list-group .media .media-heading {
    font-size: 14px; float:left;
    width:100%;
}
.chat-message .media-heading {
    cursor: pointer;
}
.media-meta {
    margin-bottom: 3px;
    font-size: 12px;
    color: #3CA6DA;
    clear: both;
}

.icon.icon-circle {
    position: relative;
    margin: .5em;
}
.white {
    color: #fff!important;
}
.bg-red {
    background: #e53935!important;
}
.bg-blue {
    background: #1e88e5!important;
}
.bg-orange {
    background: #fb8c00!important;
}
.icon.icon-circle:after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 2em;
    height: 2em;
    content: "";
    background: inherit;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.icon.icon-circle:before {
    position: relative;
    z-index: 1;
}
.bg-green {
    background: #43a047!important;
}
.hover-item a.list-group-item:focus, .hover-item a.list-group-item:hover, button.list-group-item:focus, button.list-group-item:hover {
    color: #757575;
    text-decoration: none;
}

/*.hover-item .list-group-item:hover .media-heading,.hover-item .list-group-item:hover .media-meta{
    color:white !important;
}*/

.navbar-search-overlap {
    position: absolute;
    top: 0;
    right: 196px;
    left: 251px;
    background: #fff;
    z-index: 9999;
}

.main-header #site-navbar-search{
    position: fixed !important;
    background: #FFFFFF;
    width: 100%;
    left: 0;
    height: 60px;
    top: -100px;
    -webkit-transition: all 350ms cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 350ms cubic-bezier(0.19, 1, 0.22, 1);
}

.main-header .navbar-search-overlap.search-toggle#site-navbar-search{
    top: 0px;
}

/*.main-header .navbar-search-overlap#site-navbar-search .input-search .input-search-close{
    top: 15px;
}*/

.main-header #site-navbar-search form{
    width: 900px;
    margin: 0 auto;
    padding: 7px 0px 0px 0px;
}

.input-search { position: relative; z-index:9999; }
#pageSearchForm .input-search{
    z-index: 999;
}
.input-search .input-search-icon {
    left: 8px;
    font-size: 16px;
    color: #9e9e9e;
    text-align: center;
    pointer-events: none;
}

.main-header .navbar-search-overlap .form-control {
    height: 45px!important;
}

.input-search .input-search-icon+.form-control {
    padding-left: 43.5px !important;
}
.navbar-search-overlap .form-control {
    height: 66px!important;
    background: transparent!important;
    border-radius: 0;
}
.navbar-search-overlap .form-control, .navbar-search-overlap .form-group {
    display: block!important;
    margin: 0;
}

.main-header.navbar-inverse .navbar-container {
    background: transparent;
}
.navbar-container{
    transition: all 0.3s ease 0s;
    position: relative;
}

.input-search .input-search-close {
    right: 8px;
}

.input-search .input-search-close, .input-search .input-search-icon {
    position: absolute;
    top: 50%;
    z-index: 1;
    width: 25px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.input-search-close.icon {
    font-size: 20px;
    /*    line-height: 16px;*/
}
button.input-search-close {
    -webkit-appearance: none;
    padding: 0;
    cursor: pointer;
    background: 0 0;
    border: 0;
}

.icon_search:focus{
    background:transparent !important;
}

.avatar-away i {
    background: #f44336;
}
.avatar-busy i {
    background: #ff9800;
}
.avatar-off i {
    background: #616161;
}
/*.navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover{
    color: #333 !important;
}*/

/*--------------------------------

4. MAIN MENU

--------------------------------*/


/*----- DESKTOP CSS -----*/
/*.dropdown-mega .dropdown-menu {
    left: 14px !important;
    max-height: 400px;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 99.2%;
}*/
.mobile-megamenu { background:none;}
.mobile-megamenu span{ display:none;}
.mobile-megamenu { cursor:default;}
.wsmobileheader{display:none;}
.overlapblackbg{ display:none; }
.layout-icon { font-size:20px; margin:0px 9px 0px 0px; float:left;}
.mobile-res-logo { display:none;}
.utmenu{
    color:#fff;
    position:relative;
    font-size:14px;
    padding:0px;
    margin:0px auto;
    background:#ffffff;
    -webkit-border-radius: 4px 4px 0px 0px; -moz-border-radius: 4px 4px 0px 0px; border-radius:4px 4px 0px 0px;
}
.left-arrow-home { margin-left:15px;}
.utmenu-list{
    text-align:left;
    margin:0 auto 0 auto;
    padding:0px;}

.utmenu-list > li{
    display: block;
    float: left;
    position: relative;
    text-align: center;
    z-index: 9999;
}
.utmenu-list > li > a .fa{
    display: inline-block;
    font-size:14px;
    line-height:inherit;
    margin-right:7px;}

.utmenu-list > li > a{
    display:block;
    color:#FFF;
    padding:20px 10px;
    text-decoration:none;
    position:relative;

}

.utmenu-list > li:hover > a {
    background: rgba(0,0,0,.1);
    color: white;
}

.utmenu-submenu-sub > li:first-child > a{

}

.utmenu-submenu li:nth-child(n+2) .utmenu-submenu-sub li:first-child a{
    padding: 7px 30px 10px 20px;
}

.utmenu-submenu li:nth-child(n+2) .utmenu-submenu-sub{
    border-top: 3px solid;
}

.utmenu-submenu li:nth-child(-n+1) .utmenu-submenu-sub{
    border-bottom: 3px solid;
}

.utmenu-submenu-sub li:nth-child(n+2) .utmenu-submenu-sub-sub{
    border-top: 3px solid;
}

.utmenu-submenu-sub li:nth-child(-n+1) .utmenu-submenu-sub-sub{
    border-bottom: 3px solid;
}

/*----- MEGAMENU DESKTOP -----*/

.utmenu-list li:hover .megamenu{opacity:1;}
.megamenu{
    width:100%;
    left:0px;
    position:absolute;
    top:60px;
    color:#000;
    z-index:1000;
    margin:0px;
    text-align:left;
    padding:14px;
    font-size:15px;
    border:solid 1px #eeeeee;
    background:#fff;
    opacity: 0;
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;}
.link-list li{
    display:block;
    text-align:center;
    white-space:nowrap;
    text-align:left;}
.link-list li a{
    line-height:18px;
    border-right:none;
    text-align:left;
    padding:6px 0px;
    background:#fff !important;
    background:none !important;
    color: #666666 !important;
    border-right: 0 none !important;
    display:block;
    border-right:1px solid #e7e7e7;
    background:#fff;
    color:#424242;}
.link-list .fa{font-size:11px;}

.mega-menu-content .list-menu li a {
    color: #3E3E3E;
    font-size: 13px;
}

.mega-menu-content .list-menu li a:hover{
    background: transparent;
    color:#36a9e1;
}

.is-hovermenu:hover > ul.dropdown-menu{
    display: block !important;
}

.mobile-drop.menushow+.list-menu{
    display: block;
}

.mobile-drop.menushow span:before{
    content: "K";
}

/*----- FOR HALFMENU -----*/

.halfmenu{
    width:40%;
    right:auto !important;
    left:auto !important;}

.halfmenu .megacollink{
    width:48%;
    float:left;
    margin:0% 1%;}	

/*----- ANIMATION ------*/

.utmenu-list li > .utmenu-submenu{
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-75deg);
    -o-transform: rotateX(-75deg);
    -moz-transform: rotateX(-75deg);
    -webkit-transform: rotateX(-75deg);
    visibility:hidden;
}

.utmenu-list li:hover > .utmenu-submenu{
    transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    opacity: 1;
    visibility:visible;
}

.utmenu-submenu li > .utmenu-submenu-sub{
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-75deg);
    -moz-transform: rotateX(-75deg);
    -webkit-transform: rotateX(-75deg);
    visibility:hidden;
}

.utmenu-submenu li:hover > .utmenu-submenu-sub{
    transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    opacity: 1;
    visibility:visible;
}

.utmenu-submenu-sub li > .utmenu-submenu-sub-sub{
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-75deg);
    -moz-transform: rotateX(-75deg);
    -webkit-transform: rotateX(-75deg);
    visibility:hidden;
}

.utmenu-submenu-sub li:hover > .utmenu-submenu-sub-sub{
    transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    opacity: 1;
    visibility:visible;
}

.utmenu-list li > .megamenu{
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-75deg);
    -moz-transform: rotateX(-75deg);
    -webkit-transform: rotateX(-75deg);
    visibility:hidden;
}

.utmenu-list li:hover > .megamenu{
    transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -webkit-transform: rotateX(0deg);
    opacity: 1;
    visibility:visible;
}

/*----- SUBMENU CSS -----*/

.utmenu-submenu{
    position:absolute;
    top: 60px;
    z-index:1000;
    min-width:177px;
    margin:0px;
    padding:0px;
    /*    border:solid 1px rgba(0,0,0,0.15);*/
    border-top:0px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
    background:#fff;
    opacity: 0;
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;}

.utmenu-submenu li a {
    background:#fff !important;
    color: #3e3e3e;
    text-align:left;
    display:block;
    line-height:22px;
    padding:10px 20px 10px 20px;
    text-transform:none; 
    font-size:13px;
}
.utmenu-submenu li a:hover {text-decoration:none; color:#FFF;}
.utmenu-submenu-sub-sub li a:hover { text-decoration:none;}
.utmenu-submenu li{position:relative; margin:0px; padding:0px;}

.utmenuexpandermain{display:none;}

.utmenu-list li:hover .utmenu-submenu{display:block;}

.utmenu-list .utmenu-submenu .utmenu-submenu-sub{ min-width:220px; position:absolute; left:100%; top:0; margin:0px; padding:0px;
                                                  opacity: 0;
                                                  -moz-transform-origin: 0% 0%;
                                                  -webkit-transform-origin: 0% 0%;
                                                  -moz-transition: -moz-transform 0.4s, opacity 0.4s;
                                                  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;}

.utmenu-list .utmenu-submenu li:hover .utmenu-submenu-sub{opacity:1; list-style:none; padding:0px; /*border:solid 1px rgba(0,0,0,0.15);*/
                                                          /*                                                          border-top:0px;*/
                                                          box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); background:#e7e7e7;}
.utmenu-list .utmenu-submenu li:hover .utmenu-submenu-sub{display:block;}
.utmenu-list .utmenu-submenu .utmenu-submenu-sub .utmenu-submenu-sub-sub{
    min-width:220px; position:absolute; left:100%; top:0; margin:0px; padding:0px;
    opacity: 0;
    /*    border:solid 1px rgba(0,0,0,0.15);*/
    /*    border-top:0px;*/
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
    -moz-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
    -moz-transition: -moz-transform 0.4s, opacity 0.4s;
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;}

.utmenu-list .utmenu-submenu .utmenu-submenu-sub li:hover .utmenu-submenu-sub-sub{opacity:1; list-style:none; padding:0px; background:#fff;}

.utmenu-submenu li{position:relative; padding:0px; margin:0px; display:block;}

.utmenu-click{display:none;}
.utmenu-click02{display:none;}
.utmenu-list > li > a:hover { background:rgba(0,0,0,.1) !important;  text-decoration:none; color:#FFF;}
.utmenu-submenu > li > a:hover {border-radius:0px!important; text-decoration:none;  text-decoration:none; color:#FFF;}

/*----- MEGAMENU CSS -----*/

.navbar-mega .dropdown.dropdown-fw .dropdown-menu {
    right: 0px;
    left: 15px;
    margin-top:-1px;
    max-height: 402px;
    overflow-x: hidden;
    overflow-y: auto;
}
.navbar-mega .mega-menu-content {
    padding: 20px 30px;
}
.navbar-mega .dropdown-mega {
    position: static;
}
.mega-menu-content ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.list-menu >li i {
    width: 1em;
    margin-right: 5px;
    line-height: 20px;
    float:left;
    margin-left: -3px;
    color: #36A9E1;
}

.list-menu>li:first-child {
    margin-top: 0;
}
.list-menu>li {
    margin-top: 6px;
}

.mega-menu-content h5{
    text-transform: uppercase;
    font-weight: bold;
}
.mega-menu-content div div:last-child  ul{
    border-right: none;
}

.list-menu>li>ul>li:first-child {
    margin-top: 0;
}
.list-menu>li>ul>li {
    margin-top: 6px;
}
.mega-item .mega-menu{
    width: 50%;
    float: left;
}
.mega-item>li {
    margin-top: 0px;
}
.list-menu .mega-menu img{
    width: 100%;
    height: 162px;
}

.mega-menu-content ul.mega-item{
    display: inline-block;
    width: 100%;
}


/*----- LEFT MENU -----*/

body.site-menu-left{
    background: #263238;
}

.site-menu-left .navbar-brand{
    padding: 18px 20px
}

.site-menu-left:not(.site-menu-top) .main-header {
    background: #263238;
}

.site-menu-left:not(.site-menu-top) .navbar-container {
    background: #424242;
}

.site-menu-left .left-side-menu {
    width: 230px;
}

.site-menu-left .main-content, .site-menu-left .main-footer {
    margin-left: 230px;
    transition: all 0.3s ease 0s;
}

.left-side-menu {
    background: #263238;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    color: rgba(163, 175, 183, 0.9);
    font-family: Roboto,sans-serif;
    height: calc(100% - 60px);
    max-height: calc(100% - 60px);
    overflow: auto;
    padding: 0 0 50px;
    position: fixed;
    top: 60px;
    transition: all 0.3s ease 0s;
    z-index: 999;
}

.site-menu-left:not(.site-menu-top).left-menu-icon .left-side-menu{
    top: 118px;
}

.navbar {
    border: none;
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.08);
    box-shadow: 0 2px 4px rgba(0,0,0,.08);
}

.site-menu-left .sidebar-menu{
    overflow-y: auto;
    overflow-x:hidden;
}

.sidebar-menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.left-side-menu .site-menu-title {
    padding: 0 20px;
    position: relative;
    pointer-events: none;
    cursor: default;
    font-size: 13px;
    font-weight: 800;
    color: #d3d3d3;
    text-transform: uppercase;
}
.left-side-menu .site-menu-title .title-i{
    width: 20px;
    height: 15px;
    line-height: 32px;
    margin: 0;
    display: inline-block;
    border: 0;
}

.left-side-menu .site-menu-title .title-i:before{
    content: "";
    position: absolute;
    border: 2px solid;
    width: 10px;
    height: 10px;
    top: 13px;
    clear: both;
    border-radius: 50px;
}

.button-menu-mobile {
    background: 0 0;
    border: none;
    color: white;
    padding: 0 20px;
    transition: all 0.3s ease;
    display: inline-block;
}

.site-menu-left:not(.site-menu-top).left-menu-icon .button-menu-mobile{
    background: #36A9E1;
    padding: 0 33px;
}

.button-menu-mobile i {
    font-size: 24px;
    line-height: 60px;
}

.sidebar-menu ul li{
    line-height: 38px;
}

.left-side-menu .sidebar-menu ul li a {
    padding: 5px 30px;
}

.left-side-menu .layout-icon {
    margin-right: 10px;
    line-height: 35px;
    font-size: 18px;
    text-align: center;
    vertical-align: middle;
    width: 18px;
}

.left-side-menu .sidebar-menu ul li a {
    display: block;
    color: #98a6ad;
    font-size: 14px;
}

.left-side-menu .sidebar-menu ul li a:hover {
    color: #fff;
    text-decoration: none;
    background: rgba(255,255,255,.02);
}

.site-menu-left .sidebar-menu ul li a span.arrow_carrot-right{
    position: absolute;
    right: 25px;
    line-height: 38px;
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    -webkit-transition: -webkit-transform .15s;
    -o-transition: -o-transform .15s;
    transition: transform .15s;
}

.left-menu-icon .main-header .navbar-header{
    width: none;
}

.site-menu-left.left-menu-icon:not(.site-menu-top) .main-header .navbar-brand{
    padding: 18px 33px;
}

.site-menu-left:not(.site-menu-top) .main-header .navbar-header {
    width: 230px;
}

.site-menu-left.left-menu-icon:not(.site-menu-top) .main-header .navbar-header{
    width: 90px;
}

/*----- SUB MENU CSS -----*/

.site-menu-left .left-side-menu .site-menu-sub {
    display: none;
    opacity: 0;
    visibility: hidden;
}

.site-menu-left.left-side-menu .has-sub:hover .site-menu-sub{
    opacity: 1;
    visibility: visible;
}

.site-menu-left:not(.left-menu-icon) .left-side-menu .has-sub.active .site-menu-sub{
    opacity: 1;
    visibility: visible;
}

.site-menu-left .left-side-menu .site-menu-sub {
    display: none;
}

.site-menu-left .has-sub:not(.active)>.site-menu-sub {
    display: none;
}

.site-menu-left .has-sub{
    position: relative;
}

.sidebar-menu .site-menu-sub {
    padding: 5px 0;
    margin: 0;
    font-size: 14px;
    background: 0 0;
    animation: showNav 250ms ease-in-out both;
}

.sidebar-menu .site-menu-sub li a {
    padding: 0 30px 0 60px !important;
    color: #98a6ad;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    transition: all .3s ease-out;
    border-left: 3px solid transparent;
    display: block;
    font-size: 13px !important;
}

.sidebar-menu .site-menu-sub li.hover a, .sidebar-menu .site-menu-sub li:hover a {
    color: rgba(255,255,255,.8);
    background: rgba(255,255,255,.02);
}


/*----- MENU ICON CSS -----*/

.site-menu-left.left-menu-icon .sidebar-menu{
    overflow:visible;
}

.site-menu-left.left-menu-icon .site-menu-sub{
    max-height: 500px;
    overflow-y: auto;
    overflow-x:hidden;
}

.site-menu-left.left-menu-icon .left-side-menu {
    width: 90px;
    overflow: visible;
}

.site-menu-left:not(.site-menu-top).left-menu-icon .main-header .navbar-container {
    margin-left: 90px;
}

.site-menu-left.left-menu-icon .main-content, .site-menu-left.left-menu-icon .main-footer {
    margin-left: 90px;
}

.site-menu-left.left-menu-icon .sidebar-menu li.site-menu-title{
    display: none;
}

.left-menu-icon .left-side-menu .sidebar-menu ul li a i{
    width: 100%;
    margin: 0;
}

.left-menu-icon .sidebar-menu > ul > li {
    line-height: 33px;
    position: relative;
}

.left-menu-icon .left-side-menu .sidebar-menu ul li a{
    padding: 10px 8px;
    text-align: center;
    font-size: 13px;
}

.left-menu-icon .left-side-menu .sidebar-menu ul li > ul li a{
    padding: 0px 20px 0 20px !important;
    text-align: left;
}

.site-menu-left.left-menu-icon .sidebar-menu ul li a span.arrow_carrot-right{
    display: none;
}

.site-menu-left.left-menu-icon .sidebar-menu ul li a span:not(.arrow_carrot-right){
    display: none;
}

.left-menu-icon .sidebar-menu > ul > li > .site-menu-sub{
    -webkit-transition: visibility .25s,opacity .25s;
    -o-transition: visibility .25s,opacity .25s;
    transition: visibility .25s,opacity .25s;
    position: absolute;
    left: 90px;
    top: 0;
    width: 190px;
    background: #242f35;
    visibility: hidden;
    opacity: 0;
    overflow-y: auto;
}

.left-side-menu .sidebar-menu > ul > li.active > a{
    color: #fff;
    text-decoration: none;
    background: rgba(255,255,255,.02);
}

.left-side-menu .sidebar-menu ul li.active > a .arrow_carrot-right {
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

.sidebar-menu ul .site-menu-sub .has-sub.active {
    background: rgba(0,0,0,.06);
}

.site-menu-left .sidebar-menu{
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

.sitebar-footer {
    position: fixed;
    bottom: 0;
    display: block;
    z-index: 1200;
}

.site-menu-left .sitebar-footer {
    width: 230px;
}

.sitebar-footer a {
    display: block;
    float: left;
    padding: 10px 20px 10px 20px;
    color: #76838f;
    font-size: 16px;
    text-align: center;
    background: #21292e;
}

.sitebar-footer a i{
    vertical-align: middle;
}

.site-menu-left.left-menu-icon .left-side-menu .sitebar-footer{
    display: none;
}

.site-menu-left.left-menu-icon .sidebar-menu >ul>li:hover>ul.site-menu-sub {
    display: block;
    opacity: 1;
    visibility: visible;
}

.site-menu-left.left-menu-icon .sidebar-menu li.has-sub li.has-sub a span{
    display: inline-block;
    right:20px;
}

.site-menu-left.left-menu-icon .sidebar-menu .site-menu-sub > .sidebar-menu {
    position: relative;
    left: 0;
}

.site-menu-left .main-header .navbar-brand{
    float: left;
    height: auto;
}

.site-menu-left .main-header .navbar-header > div{
    float: right;
}

.site-menu-left.left-menu-icon .main-header .navbar-header > div{
    margin-right: 0px;
}

.site-menu-left.left-menu-icon .site-menu-sub > .has-sub.active > .site-menu-sub{
    display: block;
    opacity: 1;
    visibility: visible;
}


@keyframes showNav {
    from {opacity: 0;}
    to {opacity: 1;}
}

/*----- LEFT & TOP MENU -----*/

/*.site-menu-left.site-menu-top .navbar-collapse{
    margin-left: 170px;
}*/

.site-menu-left.site-menu-top .toggle-menu{
    position: fixed;
    left: 12px;
}

.site-menu-left.site-menu-top .navbar-right{
    margin-right:0;
}

/*--------------------------------

5. FOOTER

--------------------------------*/

.main-footer {
    height: 44px;
    padding: 10px 30px;
    clear:both;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    -webkit-box-shadow: inset 0 0 44px rgba(0,0,0,.02);
    box-shadow: inset 0 0 44px rgba(0,0,0,.02);
}

.footer-copyright {
    float: left;
}

.footer-right-text {
    float: right;
    font-size: 14px;
}

.page-header-actions { margin-top:13px; float:right;}

.header-left-panel { float:left; width:100%;}  
.page-header .page-title { float:left;}
.page-header .breadcrumb { float:right; padding-top: 6px;background: transparent;}
.header-right-panel { float:right;}

/*--------------------------------

6. TEMPLATE SETTINGS

--------------------------------*/

.icon-setting { position:fixed; height:42px; right:0px; top: 150px; bottom:0; z-index:9999; background:#FFF; overflow:hidden; padding:8px 10px; box-shadow: -2px 0px 4px rgba(0, 0, 0, 0.176); float:left; cursor: pointer; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
.icon-in-setting { text-align:left; float:left; width:26px;height: 26px;}
.icon-in-setting span { font-size:25px;}
.color-change-setting { float: left;  right:-260px; width: 260px; position:fixed; top: 150px; bottom:0; z-index:9999; background: #FFF; height: 540px; box-shadow: 1px 2px 9px rgba(0, 0, 0, 0.176); overflow-x: hidden; overflow-y: scroll; min-height: 540px; padding: 20px;  -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}
.title-color {
    font-size: 15px;
    font-weight: bold;
    margin: 0px;
    text-transform: uppercase;
    color: #424242 !important;
}
.show-setting-icon { right:260px;}
.border-setting { border-bottom:1px solid #999; padding-bottom:5px;}
.color-section,.fonts-section,.image-section{ float:left; clear:both; padding-top:10px; width:100%;}
.darkcolor-section { clear:both; padding-top:10px;display: inline-block;width: 100%;}

.rtl-section label{margin-right: 10px;    display: inline-block;
                   max-width: 100%;
                   margin-bottom: 5px;
                   margin-top: 5px;
                   color: #76838f;
                   font-weight: normal;}
.color-section,.fonts-section,.darkcolor-section ,.image-section { padding-top:30px;}
.color-section .both-color {
    box-shadow: 1px 2px 9px rgba(0, 0, 0, 0.176);
    cursor: pointer;
    float: left;
    height: 30px;
    margin: 0px 10px 10px 0px;
    overflow: hidden;
    position: relative;
    width: 30px;
    opacity: .5;
}

.image-section .both-image{
    box-shadow: 1px 2px 9px rgba(0, 0, 0, 0.176);
    cursor: pointer;
    float: left;
    height: 30px;
    margin: 0px 10px 10px 0px;
    overflow: hidden;
    position: relative;
    width: 30px;
}

.fonts-section label { 
    font-size: 13px;
    text-transform: uppercase;
}

.fonts-section .both-font{
    cursor: pointer;
    height: 20px;
    margin: 5px 8px 8px 0px;
    overflow: hidden;
    position: relative;
    width: 20px;
    float: left;
    opacity: .5;
}

.darkcolor-section .both-dark {
    cursor: pointer;
    width: 50%;
    position: relative;
    float: left;
}

.color-light{
    background: #FFF !important;
    color: black;
}

.color-gray{
    background: #424242 !important;
    color:white;
}

.darkcolor-section .first-dark{
    background: #424242;
    display: inline-block;
    width: 100%;
    padding: 20px 3px 20px 3px;
    position: relative;
    text-align: center;
    font-weight: bold;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    text-transform: uppercase;
}

.darkcolor-section .active_color:after{
    background: #424242;
    content: "";
    display: block;
    font-size: 18px;
    height: 2px;
    left: 35px;
    margin-left: -8px;
    position: absolute;
    top: 30px;
    width: 50px;
}

.darkcolor-section .active_color[dark-color="gray"]:after{
    background: white;
}

.darkcolor-section .first-dark.gray{
    color:white !important;
}

.darkcolor-section .active_color{
    opacity: 0.7;
}

.color-section .first-color {
    background: #2C9079;
    display: inline-block;
    float: left;
    height: 30px;
    position: absolute;
    width: 30px;
}

.image-section .first-image{
    display: inline-block;
    float: left;
    height: 30px;
    position: absolute;
    width: 30px;
}

.fonts-section .first-font{
    background: transparent;
    display: inline-block;
    float: left;
    height: 20px;
    position: absolute;
    border-radius: 100px;
    width: 20px;
}

.fonts-section label{
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    margin-top: 5px;
    color: #76838f;
    line-height: 20px;
    font-weight: normal;
}

.fonts-section div.active_font:after{
    position: absolute;
    top: 5px;
    left: 98px;
    right: 67px;
    border: 60px;
    content: "";
    margin-left: 47px;
}

.color-section .both-color.active_color{
    opacity: 1;
}

.fonts-section .both-font.active_font{
    width: 20px;
    height: 20px;
    border-radius: 100px;
    opacity: 1;
}

.color-section .both-color:nth-child(5n) { margin-right:0px;}
.show-color { right:0px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease;}


.color-section div.active_color:after {
    position: absolute;
    top:2px;
    left: 50%;
    content: "\4e";
    font-family: 'ElegantIcons';
    font-size: 18px;
    display: block;
    color: #fff;
    margin-left: -9px;
}

.font-group{
    padding: 0;
    margin: 0;
}

.font-item{
    list-style: none;
}

.font-item label{
    margin-left: 10px;
}

.bg-texture1{
    background:url("../../../assets/images/texture/texture1.png");
}

.bg-texture2{
    background:url("../../../assets/images/texture/texture2.png");
}

.bg-texture3{
    background:url("../../../assets/images/texture/texture3.png");
}

.bg-texture4{
    background:url("../../../assets/images/texture/texture4.png");
}

.bg-texture5{
    background:url("../../../assets/images/texture/texture5.png");
}

.bg-texture6{
    background:url("../../../assets/images/texture/texture6.png");
}

.bg-texture7{
    background:url("../../../assets/images/texture/texture7.png");
}

.bg-texture8{
    background:url("../../../assets/images/texture/texture8.png");
}

.bg-texture9{
    background:url("../../../assets/images/texture/texture9.png");
}

.bg-texture10{
    background:url("../../../assets/images/texture/texture10.png");
}

.bg-texture11{
    background:url("../../../assets/images/texture/texture11.png");
}

.texture1{
    background:url("../../../assets/images/texture/texture1.png");
}

.texture2{
    background:url("../../../assets/images/texture/texture2.png");
}

.texture3{
    background:url("../../../assets/images/texture/texture3.png");
}

.texture4{
    background:url("../../../assets/images/texture/texture4.png");
}

.texture5{
    background:url("../../../assets/images/texture/texture5.png");
}

.texture6{
    background:url("../../../assets/images/texture/texture6.png");
}

.texture7{
    background:url("../../../assets/images/texture/texture7.png");
}

.texture8{
    background:url("../../../assets/images/texture/texture8.png");
}

.texture9{
    background:url("../../../assets/images/texture/texture9.png");
}

.texture10{
    background:url("../../../assets/images/texture/texture10.png");
}

.texture11{
    background:url("../../../assets/images/texture/texture11.png");
}

.texture-disable .image-section .first-image{
    opacity: 0.6;
}

.image-section .active_texture{
    opacity: 0.7;
}

.image-section .active_texture:after {
    position: absolute;
    top: 0;
    left: 50%;
    content: "\4e";
    font-family: 'ElegantIcons';
    font-size: 18px;
    display: block;
    color: #fff;
    margin-left: -8px;
}

.image-section .active_texture.icon-black:after{
    color: black;
}

.icon-mainten { text-align:center;} 

.icon-mainten {
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.fonts1 .badge {
    border-radius: 3px;
    font-size: 10px;
    padding: 3px 6px 5px;
}
/*--------------------------------

7. LAYOUTS
    
    7.1 GRID SCAFFOLDING

--------------------------------*/


.blocks:after, .blocks:before, [class*=blocks-]:after, [class*=blocks-]:before {
    display: table;
    content: " ";
}

.blocks:after, [class*=blocks-]:after {
    clear: both;
}

.page-grid .grid-title{
    margin-bottom: 20px;
}

.grid-title, h4.grid-title {
    font-size: 14px;
}
.grid-title {
    text-transform: uppercase;
}

.page-grid .grid-col {
    margin-bottom: 20px;
}
.grid-blocks .grid-col, .page-grid .grid-col {
    min-height: 0;
    padding: 10px 15px 10px;
    background: rgba(208, 208, 208, 0.59);
    border-radius: 0;
}

.blocks, [class*=blocks-] ,.portfolio{
    padding: 0;
    margin: 0;
    margin-right: -15px;
    margin-left: -15px;
    list-style: none;
}
.blocks-two>li {
    width: 50%;
}
.blocks-tree>li {
    width: 33.33333333%;
}
.blocks-four>li {
    width: 25%;
}
.blocks-five>li {
    width: 20%;
}
.blocks-six>li {
    width: 16.66666667%;
}
.blocks>li, [class*=blocks-]>li {
    position: relative;
    float: left;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.page-grid .page-col{
    margin-bottom: 20px;
}


/*--------------------------------

8. FEATURES
    
    8.1 GENERAL PAGES

        8.1.1 USERLIST

--------------------------------*/

.search-input { padding:0px; box-shadow: none;}
.user-details i { margin-right: 5px;}
.btn-userlist { margin-top:15px;}

.box-userlist { margin-bottom:30px;}
.box-userlist:nth-child(3n+0) { border-right:none;}


.user-details { border-top:none;}
.user-image{
    height: 125px;
    width: 125px; 
}
.modal-body-user {
    position: relative;
    padding: 0px 15px 15px 15px;
}
.modal-view-profile .modal-title {
    text-transform: uppercase;
}
.modal-view-profile .form-control{
    border-radius: 3px !important;
}
.user-icon i{
    margin-right: 6px;
}

.user-border{
    border: 1px solid #9e9e9e;
    border-radius: 10px;
}
.img-size{
    height: 100%;
    width: 100%;
    border: 1px solid #eeeeee;
}
.btn-view {
    background: #66bb6a;
    border: none;
    color: white;
    margin-right: 8px;
}
.btn-connect {
    border: none;
    margin-right:0px;
}
.user-icon{
    margin-top: 20px !important;
    width: 100%;
}
.btn-view.focus, .btn-view:focus, .btn-view:hover {
    color: white !important;
}
.btn-connect.focus, .btn-connect:focus, .btn-connect:hover {
    color: white;
}
.user-name h4{
    font-size: 14px;
    font-weight: bold;
}
.input-group .icon-addon .form-control {
    border-radius: 200px;
}

.icon-addon {
    position: relative;
    color: #555;
    display: block;
}

.icon-addon:after,
.icon-addon:before {
    display: table;
    content: " ";
}

.icon-addon:after {
    clear: both;
}
.icon-addon.addon-md .icon,
.icon-addon .icon {
    position: absolute;
    z-index: 2;
    font-size: 12px;
    width: 20px;
    margin-left: -10.5px;
    text-align: center;
    padding: 9px 0;
    top: 1px;
}
.icon-addon.addon-md .form-control,
.icon-addon .form-control {
    padding-left: 35px;
    float: left;
    font-weight: normal;
    background: #eee;
    width: 100%;
    border-radius: 4px;
    margin-bottom: 40px;
}
.user-details h4{
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: bold;
}
.user-details small{
    margin-left: 10px;
    font-weight: bold;
}

.user-details p{
    font-size: 14px;
}

.box-mobile{
    margin-top: 20px;
}

.user-icon a{
    color: inherit;
}

/*--------------------------------

8.1.2 INVOICE

--------------------------------*/

.logo-size{
    height: 35px;
}
.logo-center h4{
    margin-bottom: 40px;
}

.balence {
    font-size: 24px;
    font-weight: bold;
    margin-top: 6px;
}


.table-margin{
    margin-top: 30px;
    margin-bottom: 30px;
}
.table-th th{
    color: white !important;
}
.table-margin td{
    padding: 15px 8px !important;
}
.invoice .page-total{
    text-align: right;
    padding: 20px;
    margin-bottom: 0px;
}
.page-total hr{
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}
.invoice-total{
    margin-bottom: 15px;
    font-size: 20px;
}

.page-total p{
    font-size: 15px;
    font-weight: bold;
}

.page-total p span{
    font-weight: normal;
    width: 85px;
    float: right;
}

.bill-box-invoice li strong{
    font-size: 16px;
}

.panel.panel-alt {
    margin-bottom: 0;
}
.bill-box-invoice { padding:0px; margin:0px;}
.bill-box-invoice li { list-style-type:none;}
.sign-invoice { background:#FFF; padding:10px;}
.autho-sign-invoice { font-weight:700;}
.invoice-info .panel-title { padding:20px 30px 10px;}
.invoice .footable-sort-indicator{
    display: none !important;
}
.invoice-info { margin-top:15px;}
.invoice .table-margin td {
    padding: 8px !important;
}

/*--------------------------------

8.1.3 PROFILE

--------------------------------*/

.number-profile { padding:3px 4px !important; font-size:10px; margin-top:-11px;}
.border-profile { border-bottom:0px;}
.nav-profile { border-bottom:0px;}
.nav-profile a:hover {color:#FFF;}
.count-activity { padding:3px 6px !important;}
.top-profile { margin-top:1px; border-radius:0px 0px 3px 3px; overflow:hidden; padding:0px 0px 30px 0px;}
.twitter-box { border-radius:3px; box-shadow:0 0px 4px 0 rgba(0, 0, 0, 0.2); text-align:center; padding:12px 0px 9px 0px;}
.follower-tweet { font-size:26px; color:#666; padding:0px 0px 0px 0px;}
.text-tweet { font-size:18px; text-transform:uppercase; padding:0px 0px 10px 0px;}
.button-profile {}
.profile-image { text-align:left; margin:-105px 0px 40px 30px;}
.profile-image img { width:225px; border-radius:3px; box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.4); padding:5px; background:#FFF;}
.profile-bottom { height:150px; padding:10px 30px 0px 13px; text-align:right; border-radius:0px 3px 0px 0px;}
.name-profile { color:#FFF; font-size:40px; font-weight:bold; padding-top:30px; line-height:40px;}
.post-profile { color:#FFF; font-size:15px; padding-top:5px;}
.social-icon-profile { font-size:25px;}
.skill-profile { padding-bottom:0px;}
.skill-title { padding-left:0px; padding-top:0px;font-weight:700;}

.first-name-profile { padding-bottom:10px; overflow:hidden;}
.text-name-profile { width:22%; float:left; font-weight:bold;}
.detail-profile { float:right; width:75%}
.right-box-profile { margin-top:2px;}
.degree-name { font-weight:bold; width:100%; float:left;}
.univer-profile { color:#999; line-height: 30px;}
.master-degree { margin-bottom:15px;}
.readmore-profile { display: block; margin: 0 auto 20px !important; width: 100%;}
.nav-profile { padding:0px;}

.profile-pic
{
    margin-bottom: 0px; position: relative; display: inline-block; white-space: nowrap; vertical-align: bottom; 
}
.profile-pic img
{
    width: 100%; height: auto; border: 0 none; 
}
.social
{
    margin: 25px 0;
}
.social .symbol
{
    margin: 0 10px !important;
    color: rgba(66,66,66,.4);
}

.social .symbol i:hover {

    text-decoration: underline !important;
}

.list-group .data {
    padding: 2px 0;
    border-bottom: 0;
}
.list-group .media {
    padding: 2px 0;
    border-bottom: 0 !important;
}

.nav-tabs-animate .tab-content {
    overflow: hidden;
    margin-top: 2px;
}

.media small {
    color: #9e9e9e;
    float: right;
    margin-right: 10px;
    margin-top: 2px;
}
.media-heading span {
    margin-left: 5px;
    font-size: 14px;
    color: #757575;
}
.dis
{
    margin-top: 5px;
}
.media .profile-pic {
    width: 50px;
}

.pic-uploaded {
    width: 100%;
    margin-bottom: 5px;
}
.media-lg .media-object {
    width: 160px;
}
.readmore {
    margin: 20px 0;
}

.bottom-box-footer 
{ 
    background-clip: padding-box;
    background: #fff; padding-bottom:10px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.176);
}
.small-profile-pic 
{ 
    padding:5px;
    box-shadow: 0 0px 4px 0 rgba(0, 0, 0, 0.2);
    margin-left:4px;
}
.comment-profile 
{ 
    border:none; 
    margin: 2px 0px 30px 0px;
    padding:15px;
    list-style-type:none;
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1);
}
.title-post 
{ 
    width:100%;
    overflow:hidden;
}

.profile-email{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/*--------------------------------

8.1.4 SEARCH

--------------------------------*/

.search-form
{
    margin-bottom: 35px;
}

.search-title {
    font-size: 20px;
    font-weight: 700;
}

a.search-link
{
    color : #337ab7 !important ;
    text-decoration: none; 
}
a.search-link:hover
{
    text-decoration: underline;
}

.navbar-form .form-group{
    display: block;
}
.search-count{
    font-size: 13px;
}
.img-search{
    height: auto;
    width: 100%;
}
.search-label {
    font-weight: 700;
    background: #b8b8b8;
    font-size: 75%;
    color: white;
    border-radius: 5px;
    padding: 2px 7px;
    margin-right: 10px;
}
.search-ad {
    font-weight: 700;
    font-size: 75%;
    color: white;
    border-radius: 5px;
    padding: 2px 7px;
    margin-right: 10px;
}
.search-day{
    font-size: 13px;
    float: right;
    color: #888;
}
.search-star{
    margin-top: 5px;
}
.search-star i{
    margin-right: 0px !important;
    color: #ff7022;
    font-size: 12px;
}
.search-star a{
    margin-left: 10px;
}
.search-group-item li:first-child {
    border-top: transparent;
}
.search-group-item li{
    padding: 25px;
    border-top-color: #e0e0e0;
}

.search .list-group-item:last-child{
    border-bottom: 1px solid #e0e0e0;
}

.icon-addon .icon_search
{
    left:20px;
}
.icon-addon .icon_close
{
    float: right;
    position: inherit;
    margin-right: 15px;
}
.icon-addon .icon_close
{
    right:0px;
}
.search .navbar-form
{
    padding: 0px;
    margin-top: 0px;
}
ul.pagination li a.active
{
    color: #fff;
}


/*--------------------------------

8.1.5 GALLERY

--------------------------------*/

.overlay {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.overlay .overlay-figure, .overlay>:first-child {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
}
.overlay-scale {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.overlay-blur, .overlay-fade, .overlay-grayscale, .overlay-scale, .overlay-spin, [class*=overlay-slide] {
    -webkit-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: opacity -webkit-transform -webkit-filter,opacity -webkit-transform filter;
    -o-transition-property: opacity -o-transform filter;
    transition-property: opacity transform filter;
}

.overlay-hover:not(:hover) .overlay-panel:not(.overlay-background-fixed) {
    opacity: 0;
}

.overlay-fade {
    opacity: .7;
}

.overlay-icon .icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 32px;
    line-height: 1;
    color: #fff;
    text-decoration: none;
}

.overlay-panel>:last-child {
    margin-bottom: 0;
}
.overlay-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 20px;
    color: #fff;
}

.data {
    border-radius: 3px;
}
.data-shadow {
    -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
}
.data {
    position: relative;
    margin-bottom: 30px;
    overflow: hidden;
}

.data .data-header {
    border-radius: 3px 3px 0 0;
}

.overlap .overlap-figure, .overlap>:first-child {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
}

.overlap-icon .icon {
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-right: 10px;
    margin-left: 10px;
    font-size: 23px;
    line-height: 1;
    color: #fff;
    text-decoration: none;
}
.gallary a:active, .gallary a:hover,.gallary a:focus, .gallary a:visited {
    outline: 0;
    background: transparent;
}

.overlap-icon {
    font-size: 0;
    text-align: center;
}

.titlehover
{
    padding: 15px;
    color: #fff !important;
    text-align: center;

}

.data>.data-title {
    padding: 12px 20px;
}

.gallary .overlap-hover:not(:hover) .overlap-panel:not(.overlay-background-fixed) {
    opacity: 0;
}

.header-right-panel button { margin:0px 10px 0px 0px; float:left;}
.header-right-panel button:last-child { margin-right:0px;}

#gallerylist.filter-gallery .grid figure{
    max-width: 23%;
    min-width: 320px;
    width: 23%;
    max-height: 250px;
}
#gallerylist.filter-gallery figure.effect-layla img{
    height: auto;
    min-height: 280px;
}


/*--------------------------------

8.1.6 GALLERY GRID

--------------------------------*/
figure.effect-layla h2 { 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.overlap {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.overlap-scale {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
}
.overlap-fade {
    opacity: .7;
}
.overlap-blur, .overlap-fade, .overlap-grayscale, .overlap-scale, .overlap-spin, [class*=overlap-slide] {
    -webkit-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    -webkit-transition-property: opacity -webkit-transform -webkit-filter,opacity -webkit-transform filter;
    -o-transition-property: opacity -o-transform filter;
    transition-property: opacity transform filter;
}
.overlap-background {
    background: rgba(0,0,0,.5);
}
.overlap-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 20px;
    color: #fff;
}
.overlap-hover:hover .overlap-fade {
    opacity: 1;
}
.vertical-align {
    font-size: 0;
}
.overlap-panel>:last-child {
    margin-bottom: 0;
}

.data-divider:after {
    display: block;
    width: 20px;
    height: 2px;
    margin: 10px auto 15px;
    content: "";
    background: #fff;
}
.overlap-background .data-time {
    color: #fff;
    opacity: .8;
}
.overlap-panel .data-title {
    color: #fff;
}
.data-title {
    margin-top: 0;
    color: #424242;
    text-transform: capitalize;
}
.overlap-hover:hover .overlap-scale {
    -webkit-transform: scale(1.7) rotate(-5deg);
    -ms-transform: scale(1.7) rotate(-5deg);
    -webkit-transition: all 1s;
    transition: all 1s;
    transform: scale(1.7) rotate(-5deg);
}
.gallery-grid .left-panel div:hover{
    opacity: 1;
}
.v-align:before {
    display: inline-block;
    /*height: 100%;*/
    vertical-align: middle;
    content: "";
}
.v-align
{
    font-size: 0px;
}

.left-panel {
    position: relative;
    margin-bottom: 0px;
    background: #6f6464;
    /* border-radius: 3px;*/
    overflow: hidden;
}

.grid figure {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 15px 1%;
    min-width: 320px;
    max-width: 31.3%;
    max-height: 360px;
    width: 48%;
    background: #3085a3;
    text-align: center;
    cursor: pointer;
}

.grid figure img {
    position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;
    opacity: 0.8;
}

.grid figure figcaption {
    padding: 2em;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
    pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.grid figure figcaption > a {
    z-index: 1000;
    text-indent: 200%;
    white-space: nowrap;
    font-size: 0;
    opacity: 0;
}

.grid figure h2 {
    word-spacing: -0.15em;
    font-weight: 300;
}

.grid figure h2 span {
    font-weight: 800;
}

.grid figure h2,
.grid figure p {
    margin: 0;
}

.grid figure p {
    font-size: 68.5%;
    letter-spacing: 1px;
    margin-bottom: 5px;
}


figure.effect-layla {
    background: #18a367;
}

figure.effect-layla img {
    height: 390px;

}

figure.effect-layla figcaption {
    padding: 3em;
    transition: all 0.5s ease;
    background: rgba(0, 0, 0, 0.4);
}
figure.effect-layla:hover figcaption {
    background: rgba(0, 0, 0, 0.6);
}

figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after {
    position: absolute;
    content: '';
    opacity: 0;
}

figure.effect-layla figcaption::before {
    top: 50px;
    right: 30px;
    bottom: 50px;
    left: 30px;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}

figure.effect-layla figcaption::after {
    top: 30px;
    right: 50px;
    bottom: 30px;
    left: 50px;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}

figure.effect-layla h2 {
    padding-top: 26%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    font-size: 18px;
    color: #FFF;
}
figure.effect-layla:hover h2 {}
figure.effect-layla button,
figure.effect-layla p {
    padding: 0.5em 2em;
    text-transform: none;
    -webkit-transform: translate3d(0,-10px,0);
    transform: translate3d(0,-10px,0);
}

figure.effect-layla img,
figure.effect-layla h2 {
    -webkit-transform: translate3d(0,-30px,0);
    transform: translate3d(0,-30px,0);
}

figure.effect-layla img,
figure.effect-layla figcaption::before,
figure.effect-layla figcaption::after,
figure.effect-layla button,
figure.effect-layla p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-layla:hover img {
    opacity: 0.7;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::before,
figure.effect-layla:hover figcaption::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

figure.effect-layla:hover h2,
figure.effect-layla:hover button,
figure.effect-layla:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

figure.effect-layla:hover figcaption::after,
figure.effect-layla:hover h2,
figure.effect-layla:hover button,
figure.effect-layla:hover p,
figure.effect-layla:hover img {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}




/*--------------------------------

8.1.7 EMAIL

--------------------------------*/

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

.page-email .panel-title{
    padding: 15px 30px;
}

.page-email .page-content .panel {
    max-width: 1000px;
    margin: 0 auto;
}
.email-logo{
    overflow: auto;
}
.email-logo img{
    height: 35px;
    display: inline-block;
    margin-top: 9px;
}
.email-logo h4{
    font-weight: bold;
    color: #fff;
    display: inline-block;
    padding: 5px 0px;
}
.email-logo h3{
    float: right;
    font-weight: bold;
    color: #fff;
    font-size: 18px;
    margin: 14px 0;
}
.box-email p{
    margin: 0 0 15px;
}

.email-font{
    font-size: 20px;
    font-weight: bold;
}
.major-line {
    position: relative;
    text-align: center;
    border-top: solid 1px #ccc;
    top: 1em;
    margin-bottom: 30px;
    margin-top: 10px;
}
.major-line h3 {
    background: #fff;
    position: relative;
    top: -0.65em;
    display: inline;
    margin: 0;
    padding: 0 1em 0 1em;
    text-transform: uppercase;
}
.box-email{
    margin-bottom: 30px;
}
.box-email img{
    width: 100%;
}
.box-email h3{
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.email-unsubscribe{
    text-decoration: underline;
}
.email-icon i{
    margin-right: 10px;
}

.blog-list{
    margin-bottom: 30px;
}

/*--------------------------------

8.2 APPS

    8.2.1 CONTACTS

---------------------------------*/
.contact-body .input-search{
    margin-bottom: 17px;
    z-index: 9;
}

.contact-list
{
    width: 100%;
    position: relative;
}

.contact-col
{
    display: table;
}

.contact-body
{
    display: table-row;
}

.contact-body .nav-tabs>li{
    width: 100%;
}

.search-box { 
    width:255px; 
    height:35px; 
    background:#FFF;
    border:1px solid #ccc;
    border-radius:5px; 
    line-height:30px;
}
.search-box input { 
    background:none; 
    border:none; 
    padding:0px 10px 0px 35px; 
    width:100%; height:33px;
}
.search-icon { 
    margin-left:10px; 
    font-size:12px;
    position:absolute;
    left:0; top:12px;
}
.input-focus.focus,.input-focus:focus {
    border:1px solid #36a9e1;
    box-shadow:0px 0px 5px #b2cfdd;
    border-radius:5px;
}

.contact-title {
    padding: 11px 15px;
}

.user-info span{
    font-family: initial;
    letter-spacing: 1px;
}

.contact-search-padding{
    padding: 20px 10px;
    border-bottom: none;
}
.app-contacts .table td {
    text-align: left;
}

.app-contacts .tab-pane.active {
    display: table-cell;
    vertical-align: middle;
}

.app-contacts .tab-pane img{
    text-align: center;
}
.app-contacts .tab-pane .user-info.active span {
    display: none;
} 
.app-contacts .tab-pane .user-info .form-group {
    display: none;
    margin: 0;
}
.app-contacts .tab-pane .user-info.active .form-group {
    display: block;
}
.app-contacts .contact-btn
{
    position: absolute;
    top: 50%;
    right: 15px;
    margin: auto;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.app-contacts .table>tbody>tr>td,
.app-contacts .table>tbody>tr>th,
.app-contacts .table>tfoot>tr>td, 
.app-contacts .table>tfoot>tr>th,
.app-contacts .table>thead>tr>td,
.app-contacts .table>thead>tr>th
{
    border-top: none !important;
}

.app-contacts .contact-info
{
    vertical-align: middle;
    text-align: left;
    padding: 20px 15px 42px 33px;
}
.app-contacts .nav-tabs.forscroll
{
    border-bottom: none;
}
.app-contacts .nav-tabs.forscroll
{
    border-right: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;

}

.app-contacts .userimg img{
    width: 90px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
    padding: 5px;
    background: #FFF;
}

.app-contacts .contact-pic
{
    height: 120px;
    width: 120px;
    display: inline-block;
    max-width: 100%;
    padding: 4px;
    line-height: 1.42857143;
    background: #fff;
    border: 1px solid #EBEFF2;
    -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,.1); box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
    margin-left: 8px;
}
.profile-sm-bottom {
    height: 118px !important;

}
.app-contacts .name-profile {
    color: #FFF;
    font-size: 20px;
    font-weight: bold;
    padding-top: 42px;
    line-height: 20px;
}
.app-contacts .contact-info i
{
    color:#9e9e9e;
}
.app-contacts .profile-sm-image {
    text-align: left;
    margin: -65px 0px 25px 15px;
}

.app-contacts .full
{
    display: inline-block;
    position: relative;
}
.app-contacts .contact-btn button{
    text-transform: uppercase;
}

.next-prev-btn{
    margin-right:5px;
}

.contact-info .social-icon{
    text-align: left;
}

.background-contact{
    overflow: hidden;
    background: #EFEFEF;
    padding: 20px;
}
.tab-padding-contact {
    height: 727px;
    display: table;
    width: 100%;
}

.bgwhite
{
    background: #fff;
}

.list-left {
    float: left;
    padding-right: 1rem;
}

.contact-img {
    position: relative;
    display: inline-block;
    width: 40px;
    line-height: 1;
    white-space: nowrap;
    font-weight: 700;
    border-radius: 5000px;
}
.contact-img img {
    height: auto;
    width: 100%;
}

.list-left+.list-body {
    margin-left: 52px;
}

.scroll.hover
{
    overflow: auto;
    overflow-y: scroll;
}

.contact-body .nav-tabs>li.active>a,
.contact-body .nav-tabs>li.active>a:focus,
.contact-body .nav-tabs>li.active>a:hover
{
    background: transparent;

}
.contact-body .nav-tabs>li.active>a,
.contact-body .nav-tabs>li.active>a:focus,
.contact-body .nav-tabs>li.active>a:hover
{
    color: #757575 !important;
}

.nav-tabs.new-contact
{
    border: 1px solid #ddd;
}


.page-left-side .list-group-item .item-right {
    float: right;
}

.page-aside-sections:after {
    position: relative;
    display: block;
    margin: 20px;
    content: '';
    border-bottom: 1px solid #e0e0e0;
}
.page-aside-section .list-group-item:hover{
    color: #fff;
    background: #36A9E1;
}

.page-aside-title {
    padding: 10px 30px;
    margin: 20px 0 10px;
    overflow: hidden;
    font-weight: 500;
    color: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
    padding-left: 15px;
    font-weight: bold;

}

.social-icon 
{ 
    text-align:center; 
    margin-top:20px; 
    padding:0px;
}
.social-icon li 
{ 
    display:inline; 
    list-style-type:none;
}
.social-icon li a 
{ 
    display:inline;
    list-style-type:none;
}
.social-icon li a span 
{ 
    border:1px solid #666 !important;
    border-radius:3px;
    padding:7px;
    margin-right:5px;
}
.color-icon {
    color: #666;
}

.contact-btn .btn{
    padding-top: 7px;
}
.contact-list > li > a {
    border-radius: 0;
}
.app-contacts .page-left-side {
    width: 300px;
}
.app-message .page-left-side {
    width: 300px;
}
.contact-padding{
    padding: 10px 20px;
}
.contact-padding:hover .bgwhite{
    color: #333;
}
.app-contacts .profile-bottom {
    padding: 15px 15px 0px 13px;
}
.app-contacts .user-info{
    margin-bottom: 15px !important;
}
.app-contacts .btn-contact-edit{
    margin-right: 5px;
    margin-left: 10px;
    float: left;
}
.app-contacts .post-profile {
    font-size: 14px;
}

.contact-body .list-body small
{
    font-size: 11px;
}

/*--------------------------------

9. COMPONENTS

    9.1 BACIS UI
    
        9.1.1 PANEL
--------------------------------*/

.panel {
    position: relative;
    margin-bottom: 30px;
    border-width: 0;
    -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
    -webkit-transition: background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;
    transition: background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;
}

.panel-title {
    display: block;
    padding: 30px;
    font-size: 18px;
    color: #424242;
    font-weight: bold;
    text-transform: uppercase;
}

.panel-desc-buttom {
    display: block;
    padding: 5px 0 0;
    margin: 0;
    font-size: 14px;
    color: #757575;
    font-weight: normal;
    text-transform:none;
}

.panel-title>.label {
    margin-left: 10px;
    vertical-align: middle;
}

.panel-title> i{
    margin-right: 10px;
    vertical-align: top;
}

.panel{
    border-radius: 0;
}

.panel-body > .row:last-child > [class*="col-"]:last-child .grid-wrap:last-child { margin-bottom: 0; }
.panel-body > .row > [class*="col-"]:last-child { margin-bottom: 0; }

.panel-actions{
    position: absolute;
    top: 50%;
    right: 30px;
    z-index: 1;
    margin: auto;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
}

.panel-trasition .panel-actions{
    top: 54%;
}

.panel-actions .panel-action {
    display: inline-block;
    padding: 8px 10px;
    color: #9e9e9e;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
}

.panel-actions {
    list-style: none;
}

.panel-actions>li:first-child {
    margin-left: 0;
}
.panel-actions>li {
    display: inline-block;
    margin-left: 8px;
}
.panel-actions a {
    color: #FFF;
}

.panel-heading+.alert {
    border-radius: 0;
}
.panel>.alert-dismissible {
    padding-right: 50px;
}

.panel>.alert {
    margin: 0;
}

.panel>.list-group>.list-group-item {
    padding-right: 30px;
    padding-left: 30px;
}

.list-group-item {
    border: 1px solid transparent;
}

.panel.panel-transparent {
    background: 0 0;
    border-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.panel.panel-shadow:hover{
    box-shadow: 0 0px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}

.panel-bordered>.panel-footer {
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
}

.panel-footer {
    padding: 0 30px 15px;
    background: transparent;
    border-top: 1px solid #e0e0e0;
}

.panel>:not(.panel-loading):not(.collapsing) {
    -webkit-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s;
}
.panel-heading {
    position: relative;
    padding: 0;
    border-bottom: 1px solid transparent;
}

.panel-content {
    display: block;
    padding: 10px 0 0;
    margin: 0;
    font-size: 14px;
    font-weight: 300;
    text-transform: none;
}

.panel-heading+.panel-body {
    padding-top: 0;
}
.panel-body {
    position: relative;
}
.panel-body {
    padding: 30px 30px;
}

.panel-body>:last-child {
    margin-bottom: 0 !important;
}

.panel-bordered>.panel-body {
    padding-top: 30px;
}

.panel-body .h1:first-child, .panel-body .h2:first-child, .panel-body .h3:first-child, .panel-body .h4:first-child, .panel-body .h5:first-child, .panel-body .h6:first-child, .panel-body h1:first-child, .panel-body h2:first-child, .panel-body h3:first-child, .panel-body h4:first-child, .panel-body h5:first-child, .panel-body h6:first-child {
    margin-top: 0;
}

.panel-body>.row:last-child>[class*=col-]:last-child .list-wrap:last-child {
    margin-bottom: 0;
}

.panel-body>.row:last-child>[class*=col-]:last-child .page-wrap:last-child { 
    margin-bottom: 0;
}

.panel-bordered>.panel-heading {
    border-bottom: 1px solid #e0e0e0;
}

.panel-group .panel-title[aria-expanded=true]:before {
    opacity: 1;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}
.panel-group-simple .panel-title:after, .panel-group-simple .panel-title:before {
    right: 5px;
}
.panel-group .panel-title:after, .panel-group .panel-title:before {
    position: absolute;
    top: 15px;
    right: 30px;
    -webkit-transition: all .3s linear 0s;
    -o-transition: all .3s linear 0s;
    transition: all .3s linear 0s;
    line-height: 1.6;
}

.panel-group{
    margin-bottom: 0px;
}

.panel-group .panel-title[aria-expanded=true]:after {
    opacity: 1;
}
.panel-group .panel-heading+.panel-collapse .panel-body {
    border-top-color: transparent;
}
.panel-collapse .panel-body {
    padding-top: 10px;
    padding-right: 0;
    padding-left: 0;
}

.panel-group-continuous .panel:first-child {
    border-radius: 4px 4px 0 0;
}
.panel-group-simple .panel {
    background: 0 0;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.panel-group-continuous .panel {
    border-radius: 0;
}
.panel-group .panel {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.panel-group-continuous .panel+.panel {
    margin-top: 0;
    border-top: 1px solid #e0e0e0;
}

.panel-group .panel-title {
    position: relative;
    padding: 15px 45px 15px 30px;
    font-size: 16px;
}

a:focus, a:hover {
    text-decoration: none;
    color:#36A9E1;
}


.panel-group .panel-title:after {
    font-family:ElegantIcons;
    content:"K";
}

.panel-group .panel-title:before {
    font-family:ElegantIcons;
    content:"L";
}

.panel-group .panel-title[aria-expanded="false"]:after {
    opacity:0;
    -webkit-transform:rotate(-180deg);
    -ms-transform:rotate(-180deg);
    -o-transform:rotate(-180deg);
    transform:rotate(-180deg);
}

.panel-group .panel-title[aria-expanded="true"]:before {
    opacity:0;
    -webkit-transform:rotate(180deg);
    -ms-transform:rotate(180deg);
    -o-transform:rotate(180deg);
    transform:rotate(180deg);
}

.panel-group .panel-title[aria-expanded="true"]:after {
    opacity:1;
}

.btn-panel 
{ 
    padding:10px; 
    color:#FFF; 
    border-radius:3px; 
    padding:8px; font-size:11px; 
    cursor:pointer;
    line-height: 12px !important;
}

/*--------------------------------

    9.1.1.1 PANEL STRUCTURE

--------------------------------*/

.panel-bordered .alert { padding-left: 30px;}
.panel-bordered .switchery{background-clip: border-box;}
.panel-dark>.panel-heading{
    background: #616161;
    border-color: #616161;
}
.panel-warning>.panel-heading{
    background: #f0ad4e;
    border-color: #eea236;
}

.panel-danger>.panel-heading{
    background: #d9534f;
    border-color: #d43f3a;
}
.panel-success>.panel-heading{
    background: #5cb85c;
    border-color: #4cae4c;
}

.panel-structure .panel-title{
    padding: 20px 30px;
}

.panel-structure .panel.panel-bordered .panel-heading .panel-title small{
    font-size: 14px;
    font-weight: normal;
    text-transform: none;
}

/*--------------------------------

    9.1.1.2 PANEL ACTION

--------------------------------*/

.panel-actions .dropdown {
    display: inline-block;
}

.panel-loading {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    display: none;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    opacity: .6;
}

.panel.is-loading .panel-loading {
    display: block;
    opacity: 1;
}
.panel-loading .loader-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
}

.panel.is-loading>:not(.panel-loading) {
    opacity: .3;
}

.panel.is-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.panel.is-collapse .panel-body {
    display: none;
    height: 0;
}

.panel.is-close {
    display: none;
}

.is-collapse [data-toggle="panel-collapse"]:before{
    content: "\4c";
}

.is-fullscreen [data-toggle="panel-fullscreen"]:before {
    content: "\2f";
}
.modal-body-row{
    position: relative;
    padding: 15px 15px 15px 15px;
}
.modal-color{
    background: #f1f1f1 !important;
}

.modal-title-h4{
    color: white;
}

.disply-table-cell{
    display: table-cell;
}

.modal-header .close {
    margin-top: 2px;
    margin-right: 6px;
}
.modal-body{
    position: relative;
    padding: 15px;
}

.modal-body .tab-content{
    padding: 20px 5px 10px 5px;
}

/*--------------------------------

9.1.2 BUTTONS

--------------------------------*/

.btn:focus,input:focus,button:focus{
    outline: 0;
}

.btn.active:focus, .btn:active:focus{
    outline: 0;
}

.btn{
    border-radius: 0px;
    -webkit-transition: border .2s linear,color .2s linear,width .2s linear,background-color .2s linear;
    -o-transition: border .2s linear,color .2s linear,width .2s linear,background-color .2s linear;
    transition: border .2s linear,color .2s linear,width .2s linear,background-color .2s linear;
}

.btn-fade{
    width: auto;
    height: 38px;
    color: #fff;
    background: #54a979;
    border-radius: 4px;
    margin-right: 26px;
    margin-bottom: 20px;
}

.btn-default {
    color: #757575;
    background: #eee;
    border-color: #eee;
}

.btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default {
    background: #e0e0e0;
    border-color: #e0e0e0;
}

.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover {
    background: #e0e0e0;
    border-color: #e0e0e0;
}

.btn-flat {
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn-gray { background:#555;}

.btn-white{
    color: white;
}
.btn-white:focus {
    color: white;
}

.btn-warning.focus, .btn-warning:focus, .btn-warning:hover {
    background: #ffa726;
    border-color: #ffa726;
}

.btn-danger.focus, .btn-danger:focus, .btn-danger:hover {
    background: #ef5350;
    border-color: #ef5350;
    color: white;
}

/*.btn-success.focus, .btn-success:focus, .btn-success:hover {
    background: #66bb6a !important;
    border-color: #66bb6a !important;
}*/

.btn-group-sm label { 
    margin-bottom: 3px !important; 
    margin-right: 4px !important; 
}

.btn-primary.focus, .btn-primary:focus, .btn-primary:hover {
    background: #5E95C5;
    border-color: #3D85C3;
}

.btn-primary.active, .btn-primary:active, .open>.dropdown-toggle.btn-primary {
    background: #337ab7;
    border-color: #2e6da4;
}

.btn-success.active, .btn-success:active, .open>.dropdown-toggle.btn-success {
    background: #5cb85c;
    border-color: #4cae4c;
}

.btn-info.active, .btn-info:active, .open>.dropdown-toggle.btn-info {
    background: #36A9E1;
    border-color: #36A9E1;
}

.btn-warning.active, .btn-warning:active, .open>.dropdown-toggle.btn-warning {
    background: #f0ad4e;
    border-color: #eea236;
}

.btn-primary:focus, .btn-primary:hover {
    color: #fff;
}

.btn-inverse {
    color: #757575;
    background: #fff;
    border-color: #eee;
}

.btn-lg {
    padding: 10px 18px;
    font-size: 18px;
    line-height: 1.3333333;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.5;
}
.btn-xs {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.5;
}

.btn-group-lg>.btn, .btn-lg{
    border-radius: 0px;
}

.btn-group-sm>.btn, .btn-sm,.btn-group-xs>.btn, .btn-xs{
    border-radius: 0px;
}

.btn-label{border-radius: 0px !important;}

.btn-round {
    border-radius: 100px;
}

.btn-squared {
    border-radius: 0;
}

.page-wrap {
    margin-bottom: 80px;
}

.button-wrap .btn{
    margin-right: 15px !important;
    margin-bottom: 20px;
}

.read-more-wrap .btn{
    margin-right: 5px;
}

.min-width{
    width: 100%;
    padding-right: 4em !important;
}

.btn-pure.btn-success:hover{
    background: #398439;
    color: #ffffff;
}
.btn-pure.btn-warning:hover{
    background: #d58512;
    color: #ffffff;
}
.basic-btn-icon i{
    margin-right: 5px !important;
    font-size: 11px;
    line-height: 21px !important;
}

.button-icon-wrap .btn{
    margin-right: 10px !important;
    margin-bottom: 20px;
}

.btn-icon{
    padding: .8em 1.4em;
    padding-right: 4.7em;
}

.btn-icon, .btn.icon {
    padding: 10px;
    font-size: 16px;
    line-height: 1em;
}

.search-btn{
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 10px;
    background: 0 0;
    border: none;
    border-radius: 0 200px 200px 0;
}

/*----- BUTTON WITH ICON ANIMETION -----*/

.buttons-page .btn-icon:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    padding-top: inherit;
    padding-bottom: inherit;
    width: 2.8em;
    background: rgba(0, 0, 0, 0.1);
    font-size: 1.2em;
    text-align: center;
    transition: .2s;
}

.btn-icon:after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    padding-top: inherit;
    padding-bottom: inherit;
    width: 2.8em;
    content: attr(data-icons);
    font-family: 'ElegantIcons';
    font-size: 1.2em;
    text-align: center;
    transition: .2s;
}

.zoom:hover:after {
    -webkit-animation: none;
    -webkit-transform: scale(1.4);
    animation: none;
    transform: scale(1.4);
}

.skew:hover:after{
    -webkit-animation: none;
    -webkit-transform: skew(-20deg);
    animation: none;
    transform: skew(-20deg);
    text-indent: .1em;
}

.bounceright:hover:after {
    -webkit-animation: bounceright .3s alternate ease infinite;
    animation: bounceright .3s alternate ease infinite;
}

.wiggle:hover:after {
    -webkit-animation: wiggle .05s alternate ease infinite;
    animation: wiggle .05s alternate ease infinite;
}

.buttons-page .btn-group{
    margin-right: 15px;
    margin-bottom: 20px;
}

.buttons-page .btn-group.btn-group-last{
    margin: 0;
}

.btn-group-vertical .btn, .margin-buttons .btn-group-vertical .btn-group, .margin-buttons .btn-group-vertical .btn-group-vertical {
    margin-right: 0;
    margin-bottom: 0;
}

.margin-buttons .btn, .margin-buttons .btn-group, .btn-group-vertical {
    margin-right: 15px;
    margin-bottom: 20px;
}


/*----- BUTTON WITH ANIMETION -----*/

.animated-btn {
    position: relative;
    display: block !important;
    margin: 0 auto 20px;
    padding: 14px 15px !important;
    color: white !important;
    font-size: 14px;
    border-radius: 0;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    z-index: 1;
    letter-spacing: .08em;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}


.animated-btn:hover{
    color: white;
    text-shadow: none;
}

.animated-btn:after{
    background: rgba(0,0,0,.1);
}

.animated-btn:after{
    content: "";
    position: absolute;
    height: 0%;
    left: 50%;
    top: 50%;
    width: 150%;
    z-index: -1;
    -webkit-transition: all 0.75s ease 0s;
    -moz-transition: all 0.75s ease 0s;
    -o-transition: all 0.75s ease 0s;
    transition: all 0.75s ease 0s;
}

.animated-btn:hover:after{
    height: 450%;
}

.animated-btn.btn-tran:after{
    background: transparent;
}

.btn-previous, .btn-next {
    width: 120px;
}

.btn-previous {
    border-radius: 500px 0 0 500px;
}

.btn-next {
    border-radius: 0 500px 500px 0;
}

.btn-primary-hover {
    background: #5E95C5;
    border-color: #3D85C3;
}
.btn.active, .btn:active {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn-default-hover {
    background: #e6e6e6;
    border-color: #adadad;
}

.btn-pure.btn-default {
    color: #9e9e9e;
}

.btn-floating {
    width: 56px;
    height: 56px;
    padding: 0;
    margin: 0;
    font-size: 28px;
    text-align: center;
    border-radius: 100%;
    -webkit-box-shadow: 0 6px 10px rgba(0,0,0,.15);
    box-shadow: 0 6px 10px rgba(0,0,0,.15);
}

.btn-floating i {
    position: relative;
    top: 0px;
    margin: 0;
    line-height: 35px;
}

.btn-floating.btn-sm {
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 18px;
}

.btn-dark {
    color: #fff !important;
    background: #616161;
    border-color: #616161;
}

.btn-dark.active.focus, .btn-dark.active:focus, .btn-dark.active:hover, .btn-dark:active.focus, .btn-dark:active:focus, .btn-dark:active:hover, .open>.dropdown-toggle.btn-dark.focus, .open>.dropdown-toggle.btn-dark:focus, .open>.dropdown-toggle.btn-dark:hover {
    background: #424242;
    border-color: #424242;
}

.only-icon i{
    margin: 0;
}

.only-icon{
    padding: 10px;
    font-size: 16px;
    line-height: 1em;
}

.btn-pure, .btn-pure.active, .btn-pure:active, .btn-pure:focus, .btn-pure:hover, .btn-pure[disabled], .open>.dropdown-toggle.btn-pure, fieldset[disabled] .btn-pure {
    background: transparent;
    border-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.btn-pure.btn-primary {
    color: #2e6da4;
}

.btn-pure.btn-success {
    color: #4caf50;
}

.btn-pure.btn-info {
    color: #ffffff;
}

.btn-pure.btn-danger {
    color: #f44336;
}
.btn-pure.btn-warning {
    color: #ff9800;
}

.dropdown-toggle.btn .caret {
    margin: 3px 3px 5px 3px;
}

.btn-group .btn{
    margin-right: 0;
    margin-bottom: 0;
}

.btn-label {
    display: inline-block;
    background: rgba(0,0,0,.15);
    border-radius: 3px 0 0 3px;
}

.btn-labeled {
    padding: 0;
    padding-right: 8px;
}

.btn-labeled i{
    margin: 0;
}

.btn-labeled.btn-lg .btn-label {
    padding: 10px 14px;
    margin-right: 11px;
}

.btn-labeled .btn-label {
    padding: 6px 8px;
    margin-right: 5px;
}
.btn-labeled.btn-sm .btn-label {
    padding: 6px 6px;
    margin-right: 10px;
}

.btn-labeled.btn-xs .btn-label {
    padding: 1px 4px;
    margin-right: 2px;
}

.btn-icon.btn-lg, .btn.icon.btn-lg {
    padding: 12px;
    font-size: 16px;
    text-transform: uppercase;
}

.btn-icon.btn-sm, .btn.icon.btn-sm {
    padding: 8px;
    font-size: 14px;
}

.btn-icon.btn-xs, .btn.icon.btn-xs {
    padding: 4px;
    font-size: 12px;
}

/**** BUTTON EFFECTS ONE ****/

.animated-btn.effects-one:after {
    -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
    transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}

/**** BUTTON EFFECTS TWO ****/

.animated-btn.effects-two:after {
    -moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
    transform: translateX(-50%) translateY(-50%) rotate(25deg);
}

/**** BUTTON EFFECTS THREE ****/

.animated-btn.effects-three:after {
    opacity: .5;
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.animated-btn.effects-three:hover:after{
    height: 100%;
}

/**** BUTTON EFFECTS FOUR ****/

.animated-btn.effects-four:after {
    -moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
    -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
    transform: translateY(-50%) translateX(-50%) rotate(90deg);
}

.animated-btn.effects-four:hover:after {
    opacity: 1;
    height: 420px !important;
}

/**** BUTTON EFFECTS FIVE ****/

.animated-btn.effects-five:after {
    opacity: 0;
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.animated-btn.effects-five:hover:after {
    height: 120% !important;
    opacity: 1;
    color: #FFF;
}

.animated-btn.btn-border-info {
    border: 2px solid #00bcd4 !important;
    color: #00bcd4 !important;
}

.animated-btn.btn-border-info:after {
    border: 3px solid #00bcd4;
}

/**** BUTTON EFFECTS SIX ****/

.animated-btn.effects-six:after {
    opacity: 0;
    -moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
    -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
    transform: translateY(-50%) translateX(-50%) rotate(90deg);
}

.animated-btn.effects-six:hover:after {
    height: 710% !important;
    opacity: 1;
    color: #FFF;
}

.animated-btn.btn-border-danger {
    border: 2px solid #d9534f !important;
    color: #d9534f !important;
}

.animated-btn.btn-border-danger:after {
    border: 3px solid #d9534f;
}

/**** BUTTON EFFECTS SEVEN ****/

.animated-btn.effects-sevan:after {
    opacity: 0;
    -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
    transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}

.animated-btn.effects-sevan:hover:after {
    height: 400% !important;
    opacity: 1;
    color: #FFF;
}

.animated-btn.btn-border-success {
    border: 2px solid #5cb85c !important;
    color: #5cb85c !important;
}

.animated-btn.btn-border-success:after {
    border: 3px solid #5cb85c;
}

/**** BUTTON EFFECTS EIGHT ****/

.animated-btn.effects-eight:after {
    opacity: 0;
    -moz-transform: translateY(-50%) translateX(-50%) rotate(25deg);
    -ms-transform: translateY(-50%) translateX(-50%) rotate(25deg);
    -webkit-transform: translateY(-50%) translateX(-50%) rotate(25deg);
    transform: translateY(-50%) translateX(-50%) rotate(25deg);
}

.animated-btn.effects-eight:hover:after {
    height: 400% !important;
    opacity: 1;
    color: #FFF;
}

.animated-btn.btn-border-warning {
    border: 2px solid #f0ad4e !important;
    color: #f0ad4e !important;
}

.animated-btn.btn-border-warning:after {
    border: 3px solid #f0ad4e;
}

/**** BUTTON EFFECTS THAR ONE ****/

.animated-btn.thar-one:hover {
    color: #000 !important;
    background: transparent;
    text-shadow: none;
}

.animated-btn.thar-one {
    color: #F7CA18;
    cursor: pointer;
    display: block;
    position: relative;
    border: 2px solid #F7CA18;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.animated-btn.thar-one:before {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 0px;
    width: 100%;
    z-index: -1;
    content: '';
    color: #000 !important;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.no-af-bo:after{display: none;}

.animated-btn.thar-one:hover {
    color: #fff !important;
    background: transparent;
    text-shadow: none;
}

.animated-btn.thar-one:hover:before {
    bottom: 0%;
    top: auto;
    height: 100%;
}

.animated-btn.thar-one:after {
    content:none;
}

/**** BUTTON EFFECTS THAR TWO ****/

.animated-btn.thar-two {
    cursor: pointer;
    display: block;
    position: relative;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.animated-btn.thar-two:before {
    display: block;
    position: absolute;
    left: 0px;
    bottom: 0px;
    height: 0px;
    width: 100%;
    z-index: -1;
    content: '';
    color: #000 !important;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.animated-btn.btn-bg-danger:before {
    background: #d9534f;
}

.animated-btn.thar-two:hover {
    color: #fff !important;
    background: transparent;
    text-shadow: ntwo;
}

.animated-btn.thar-two:hover:before {
    top: 0%;
    bottom: auto;
    height: 100%;
}

.animated-btn.thar-two:after {
    content:none;
}

/**** BUTTON EFFECTS THAR THREE ****/

.animated-btn.thar-three:hover {
    color: #fff !important;
    background: transparent;
    text-shadow: nthree;
}

.animated-btn.thar-three:before {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 0px;
    z-index: -1;
    content: '';
    color: #000 !important;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

.animated-btn.thar-three:hover:before {
    left: 0%;
    right: auto;
    width: 100%;
}

.animated-btn.btn-bg-success:before {
    background: #5cb85c;
}

.animated-btn.thar-four:hover {
    color: #fff !important;
    background: transparent;
    text-shadow: nfour;
}

.animated-btn.thar-three:after {
    content:none;
}

/**** BUTTON EFFECTS THAR FOUR ****/

.animated-btn.thar-four:before {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 0px;
    z-index: -1;
    content: '';
    color: #000 !important;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

.animated-btn.btn-bg-warning:before {
    background: #f0ad4e;
}

.animated-btn.thar-four:hover:before {
    right: 0%;
    left: auto;
    width: 100%;
}

.animated-btn.thar-four:after {
    content:none;
}

/**** ------ ****/

/**** BUTTON SOCIAL ****/

.social-facebook {
    color: #fff;
    background: #3b5998!important;
}

.social-facebook:focus, .social-facebook:hover {
    color: #fff;
    background: #4c70ba!important;
}

.social-twitter{
    color:#fff;
    background:#55acee!important;
}

.social-twitter:focus,
.social-twitter:hover{
    color:#fff;
    background:#83c3f3!important;
}

.social-twitter.active,
.social-twitter:active{
    color:#fff;
    background:#2795e9!important;
}


.social-google-plus {
    color: #fff;
    background: #dd4b39!important;
}

.social-google-plus.active, .social-google-plus:active {
    color: #fff;
    background: #c23321!important;
}
.social-google-plus:focus, .social-google-plus:hover {
    color: #fff;
    background: #e47365!important;
}

.social-linkedin {
    color: #fff;
    background: #0976b4!important;
}

.social-linkedin.active, .social-linkedin:active {
    color: #fff;
    background: #075683!important;
}
.social-linkedin:focus, .social-linkedin:hover {
    color: #fff;
    background: #0b96e5!important;
}

.social-flickr {
    color: #fff;
    background: #ff0084!important;
}

.social-flickr.active, .social-flickr:active {
    color: #fff;
    background: #cc006a!important;
}
.social-flickr:focus, .social-flickr:hover {
    color: #fff;
    background: #ff339d!important;
}

.social-tumblr {
    color: #fff;
    background: #35465c!important;
}

.social-tumblr.active, .social-tumblr:active {
    color: #fff;
    background: #222d3c!important;
}

.social-tumblr:focus, .social-tumblr:hover {
    color: #fff;
    background: #485f7c!important;
}


@keyframes bounceright {
    from { transform: translateX(0); }
    to   { transform: translateX(3px); }
}

@keyframes wiggle {
    from { transform: rotate(0deg); }
    to   { transform: rotate(30deg); }
}

@-webkit-keyframes wiggle {
    from { -webkit-transform: rotate(0deg); }
    to   { -webkit-transform: rotate(30deg); }
}


/*--------------------------------

9.1.3 ICONS

--------------------------------*/

.bottom-effects{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    color: #fff;
}

.icons-page .page-content .panel-body .page-bg {
    padding: 30px 30px 0 30px;
    margin-top: 0;
    margin-bottom: 60px;
    -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,.2);
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.2);
}

.icons-page .icon-wrap ul{
    display: table;
}

.title-desc {
    margin-bottom: 30px;
}

.icon-wrap .iconlist {
    height: 40px;
    margin: 15px auto;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
}

.icon-wrap ul li{
    margin-bottom: 22px;
}

.overlay-hover:hover .overlay-fade {
    opacity: 1;
    height: 100%
}

.icon-bg{
    background: #BEE5FF;
}

.icons-page .page-content .input-search {
    max-width: 450px;
    margin: 35px auto 32px;
}

.input-search-btn {
    position: absolute;
    top: 1px;
    right: 0;
    height: 100%;
    padding: 0 10px;
    background: 0 0;
    border: none;
    border-radius: 0 200px 200px 0;
}

.iconlist-wrap {
    position: relative;
    height: 100px;
    margin: 18px 0;
    text-align: center;
}

.iconlist-wrap:hover {
    color:#fff;
    background: #36a9e1;
}

.iconlist .icon {
    font-size:24px;
}

.icon-title {
    margin-top: 2px;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.icons-page .form-control{
    background: #eee;
}

.icon {
    position: relative;
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-transform: translate(0,0);
    -ms-transform: translate(0,0);
    -o-transform: translate(0,0);
    transform: translate(0,0);
    text-rendering: auto;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icons ul li{
    margin-bottom: 22px;
}
.icon-title-center {
    text-align: center;
}
.page .iconlist {
    height: 40px;
    margin: 15px auto;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
}
.page-bg { 
    background: rgba(54,169,225,0.4);
}

/*--------------------------------

9.1.4 LIST

--------------------------------*/

.list-group-item .badge {
    border-radius: 3px !important;
}
.icon-right{
    float: right;
}
.icon-success{
    color: #4caf50;
}

.list-group-item .icon {
    margin-right: 10px;
    cursor: pointer;
}

.list-group-item .media-heading {
    font-size: 14px !important;
}
.list-group .list-group-item:last-child p{
    margin: 0;
}

.list-group-item .tag{
    margin: 0;
}

.list-group-item:first-child {
    border-top: transparent;
}
.icon-denger{
    color: #f44336;
}
.list-img-size {
    width: 65px !important;
    border-radius: 3px;
}
.list-user h4{
    font-size: 16px;
}
.list-media h4 {
    font-size: 16px;
}

.list-group{
    position: relative;
}
.list-group div[data-role="container"]{
    height: 270px;
    overflow: hidden!important;
    overflow-y: scroll!important;
}

.list-group-right-icon i {
    margin-right: 0px !important;
}
.badges-list .list-group-item .badge{
    margin-top: 3px;
}
.list-page .list-group-item .icon {
    line-height: 20px;
}
.list-notification h4{
    font-size: 15px;
}

.list-media p {
    margin-bottom: 6px;
}
.detail-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 26px;
}
.actions {
    position: absolute;
    top: 50%;
    right: 30px;
    margin: auto;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.list .list-group-full>li.active
{
    z-index: 2;
    background: transparent !important;
    border-color: transparent;
}
.list .list-group-full>li{
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background: #fff;
    border-color: transparent;

}
.list .list-group-item
{
    background: #fff;
}

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    z-index: 2;
    color: #fff !important;
    background: #36A9E1;
    border-color: #36A9E1;
}

.list-group-item.disabled, .list-group-item.disabled:focus, .list-group-item.disabled:hover 
{
    color: #bdbdbd !important;
    background: transparent;
}

.list code {
    border: 1px solid #c5cae9 !important;
    padding: 2px 4px;
    font-size: 14px;
    background: rgba(197,202,233,.1);
    border-radius: 3px;

}

.list .list-group-dividered>li
{
    border-right: 0px !important;
    border-left: 0px !important;
    border: 1px solid #ddd;
}
.badge-success {
    color: #fff;
    background: #4caf50;
}
.list-group-item.active>.badge-info, .nav-pills>.active>a>.badge-info {
    color: #fff;
    background: #00bcd4;
}
.list .ab a.list-group-item
{
    border: none;
}
.list-group.bg-inherit .list-group-item:hover {
    background: rgba(0,0,0,.075) !important;
    border-color: transparent;
}
.bg-gray {
    background: #e0e0e0!important;
}
ul.bg-gray {
    background: #e0e0e0!important;
}
.list-group.bg-inherit {
    border-radius: 3px;
    -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
}

.list-group.bg-inherit .list-group-item {

    background: transparent !important;
    border-bottom-color: rgba(0,0,0,.075) !important;
    border-color: rgba(0,0,0,.075) !important;
}
.gray {
    color: #757575!important;
    background: #e0e0e0;
}

.list-group-item-warning {
    color: #fff !important;
    background: #ff9800 !important;
}
.list-group-item-success {
    color: #fff !important;
    background: #4caf50 !important;
}
.list-group-item-info {
    color: #fff !important;
    background: #00bcd4 !important;
}
.list-group-item-danger {
    color: #fff !important;
    background: #f44336 !important;
}
.list-group-item-dark {
    color: #fff !important;
    background: #616161 !important;
}
.list-group-gap .list-group-item {
    margin-bottom: 10px;
    border-radius: 3px;
    -webkit-box-shadow: 0 0px 4px 0 rgba(0,0,0,0.2);
    box-shadow: 0 0px 4px 0 rgba(0,0,0,0.2);
}


.status-lg {
    width: 14px !important;
    height: 14px !important;
}

.status {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
}
.status-online {
    background: #4caf50;
}
.status-busy {
    background: #ff9800;
}
.status-off {
    background: #616161;
}
.status-away {
    background: #f44336;
}
.profile-pic i {
    position: absolute;
    right: -1px;
    top: -1px;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 100%;
    margin-right: 0px !important;
}
.pro-online i {
    background: #4caf50;
}
.pro-away i {
    background: #f44336;
}
.pro-busy i {
    background: #ff9800;
}
.pro-off i {
    background: #616161;
}
.list-borders{
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 10px;
}

.list-unstyled {
    margin: 0;
}

.button-wrap li:last-child .btn{
    margin: 0 !important;
}

/*--------------------------------

9.1.5 DROPDOWN

--------------------------------*/

.dropdown-page .dropdown-menu {
    width: 220px;
}

.dropdown-menu {
    -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
    -webkit-transition: .25s;
    -o-transition: .25s;
    transition: .25s;
}

.dropdown-menu>li>a {
    padding: 10px 15px;
    font-weight: 300;
}

.dropdown-menu li .icon:first-child, .dropdown-menu li>a .icon:first-child {
    width: 1em;
    margin-right: .5em;
    text-align: center;
}

.dropdown-menu-media {
    width: 360px;
    padding-top: 0;
    padding-bottom: 0;
}

.dropdown-menu-media .list-group-item {
    padding: 0 20px !important;
    border: none;
    border-radius: 0!important;
}

.dropdown-menu-media .list-group-item:first-child .media {
    border-top: none;
}
.dropdown-menu-media .list-group-item .media {
    padding: 15px 0;
    border-top: 1px solid #e0e0e0;
}

.dropdown-menu-media>.dropdown-menu-footer {
    background: #eee;
    border-top: 1px solid #e0e0e0;
}
.dropdown-menu-media>li {
    padding: 0;
    margin: 0;
}
.dropdown-menu-media>.dropdown-menu-footer>.dropdown-menu-footer-btn {
    position: absolute;
    right: 0;
}
.dropdown-menu-media>.dropdown-menu-footer>a {
    padding: 15px 20px;
}

.dropdown-menu-media .media-right .btn{
    padding: 2px 5px;
}

.dropdown-menu-media .media-right .btn i{
    vertical-align: middle;
}

.dropdown-menu-media .media-right .btn{
    margin-left: 0px;
}

.dropdown-menu-media .media-right .btn-default:hover{
    border-color:transparent;
}

.dropdown-menu-media .list-group .list-group-item:hover,.dropdown-menu-media .list-group .list-group-item:focus{
    background: transparent !important;
}

.dropdown-menu-media .dropdown-menu-footer a:hover,.dropdown-menu-media .dropdown-menu-footer a:focus{
    background: transparent;
    color:#333;
}

.dropdown-search-btn{
    margin-right: -2px !important;
}
.dropdown-checkboxes input{
    vertical-align: middle;
    margin-top: -2px;
}
.dropdown-radiobuttons input{
    vertical-align: middle;
    margin-top: -2px;
}
.dropdown-menu-right>li>a {
    padding: 10px 14px;
}

.dropdown-header {
    padding: 3px 15px;
    font-size: 13px;
    color: #696969 !important;
}
.dropdown-search{
    width: 210px !important;
    border-radius: 0 !important;
}
.dropdown-wrap{
    margin-bottom: 60px;
    display: inline-table;
}
.dropdown-menu-left {
    right: auto;
    left: 0;
}
.dropdown-menu>.dropdown-submenu.dropdown-menu-left .dropdown-menu {
    left: -100% !important;
}

.dropdown>.dropdown-toggle,.dropup>.dropdown-toggle {
    float: left;
}
.panel-action .dropdown>.dropdown-toggle,.panel-action .dropup>.dropdown-toggle {
    float: none;
}

.dropdown-menu1{
    position: static;
    display: block !important;
    clear: both;
}

.num-margin{
    margin-left: 10px;
}
.p-bottom{
    padding-bottom: 15px;
}
.mar-button{
    margin-right: 10px;
    margin-bottom: 15px;
}
.btn-group:hover .dropdown-menu2{
    display: block !important;
}

.dropdown-list .dropdown-menu-primary>.active>a, .dropdown-menu-primary>.active>a:focus, .dropdown-menu-primary>.active>a:hover {
    color: #fff;
    background: #337ab7 !important;
}
.dropdown-list .dropdown-menu-primary>li>a:focus, .dropdown-menu-primary>li>a:hover {
    color: #fff;
    background: #337ab7 !important;
}
.dropdown-list .dropdown-menu-success>.active>a, .dropdown-menu-success>.active>a:focus, .dropdown-menu-success>.active>a:hover {
    color: #fff;
    background: #4caf50 !important;
}
.dropdown-list .dropdown-menu-success>li>a:focus, .dropdown-menu-success>li>a:hover {
    color: #fff;
    background: #4caf50 !important;
}

.dropdown-list .dropdown-menu-warning>.active>a, .dropdown-menu-warning>.active>a:focus, .dropdown-menu-warning>.active>a:hover {
    color: #fff;
    background: #f0ad4e !important;
}
.dropdown-list .dropdown-menu-warning>li>a:focus, .dropdown-menu-warning>li>a:hover {
    color: #fff;
    background: #f0ad4e !important;
}
.dropdown-list .dropdown-menu-danger>.active>a, .dropdown-menu-danger>.active>a:focus, .dropdown-menu-danger>.active>a:hover {
    color: #fff;
    background: #d9534f !important;
}
.dropdown-list .dropdown-menu-danger>li>a:focus, .dropdown-menu-danger>li>a:hover {
    color: #fff;
    background: #d9534f !important;
}
.dropdown-list .dropdown-menu-dark>.active>a, .dropdown-menu-dark>.active>a:focus, .dropdown-menu-dark>.active>a:hover {
    color: #fff;
    background: #616161 !important;
}
.dropdown-list .dropdown-menu-dark>li>a:focus, .dropdown-menu-dark>li>a:hover {
    color: #fff;
    background: #616161 !important;
}

.dropdown-list .dropdown-menu>.dropdown-submenu:hover .dropdown-menu {
    display: block;
}
.dropdown-list .dropdown .dropdown-submenu .dropdown-menu {
    top: 0;
}
.dropup .dropdown-submenu .dropdown-menu {
    bottom: 0;
}
.dropdown-checkboxes label, .dropdown-radiobuttons label {
    display: block;
    margin: 5px 15px;
    font-weight: normal;
}
.badge {
    border-radius: 3px !important;
}
.dropdown-list .dropdown-menu>.dropdown-submenu .dropdown-menu {
    left: 100%;
    margin: 0;
}
.dropdown-list .dropdown-menu>.dropdown-submenu {
    position: relative;
}

.dropdown-menu>.dropdown-submenu>a:after {
    position: absolute;
    right: 15px;
    display: inline-block;
    width: 0;
    height: 0;
    margin-top: 6px;
    vertical-align: middle;
    content: '';
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px dashed;
}

.dropdown-list .dropdown-menu.animate>li:nth-child(1) {
    -webkit-animation-delay: .02s;
    -o-animation-delay: .02s;
    animation-delay: .02s;
}
.dropdown-list .dropdown-menu.animate>li {
    animation-name: slide-top;
    animation-duration: .5s;
    animation-fill-mode: both;
}
.dropdown-list .dropdown-menu.animate-reverse>li {
    animation-name: slide-bottom;
    animation-duration: .5s;
    animation-fill-mode: both;
}
.dropdown-menu.animate {
    overflow: hidden;
}
.dropdown-list .dropdown-menu{
    border: 1px solid #E2DCDC;
}

/*.fonts1 .dropdown-menu > .dropdown-submenu.dropdown-menu-left .dropdown-menu {
    left: -89% !important;
}
.fonts2 .dropdown-menu > .dropdown-submenu.dropdown-menu-left .dropdown-menu {
    left: -94% !important;
}*/

/*--------------------------------

9.1.6 IMAGE

--------------------------------*/

.img-rounded .caption {
    position: relative;
    display: block;
    padding-right: 0;
    padding-left: 0;
    padding: 15px 0px 0px;
}

.image .img-rounded>img{
    width: 100%;
}

.imgWid {width: 100%;}

/*--------------------------------

9.1.7 MODAL

--------------------------------*/

.modals{
    padding: 20px;
}
.modal-wrap .btn {
    margin-right: 15px;
    margin-bottom: 20px;
}
.modal-footer .btn{
    margin-bottom: 0px !important;
    margin-right: 0 !important;
}

.modal-wrap{
    padding-bottom: 0px;
}

.two{
    text-align: center;
    position: relative;
    margin-bottom: 30px !important;
    background: #f1f1f1;
    height: 490px;
    width: 100%;
}
.two .center{
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    transform: translate(-50%,-50%);
}
.modals-page input[type=radio]{
    opacity: 0;
}

.padding-modal{
    padding: 30px 30px 15px 30px;
}

/*----- MODALS WITH COLOR -----*/

.choose-color li{
    width: 30px;
    height: 30px;
    position: relative;
    display: inline-block;
}

.choose-color li:nth-child(2n) { position: absolute; width: 0; }

.choose-color .bg-info-modal{
    background: white;
    border: 2px solid #36a9e1;
    width: 30px;
    height: 30px;
    margin: 0px 12px 10px 7px;
}

.choose-color>li:before {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    content: "";
    background: inherit;
    border-radius: inherit;
}

.color-info-modal{
    background: #36a9e1 !important;
    border-radius: 4px 4px 0 0;
}
.color-info-modal h4{
    color: #ffffff;
}
.color-info-modal span{
    color: #ffffff;
}

.bg-info-check{
    transition: 0.7s;
}
.choose-color .bg-green-modal{
    background: white;
    border: 2px solid green;
    margin: 0px 12px 10px 0px;
}
.bg-green-check{
    background: green !important;
    transition: 0.7s;
}
.bg-green{
    background: white;  
}
.choose-color .bg-red-modal{
    background: white;
    border: 2px solid red;
    margin: 0px 12px 10px 0px;
}
.red{
    background: red !important;
    transition: 0.7s;
}
.choose-color .bg-orange-modal{
    background: white;
    border: 2px solid orange;
    margin: 0px 12px 10px 0px;
}
.orange{
    background: orange !important;
    transition: 0.7s;
}
.choose-color .bg-cyan-modal{
    background: white;
    border: 2px solid cyan;
    margin: 0px 12px 10px 0px;
}
.cyan{
    background: cyan !important;
    transition: 0.7s;
}
.choose-color li label {
    position: relative;
    font-family: 'ElegantIcons';
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    text-transform: none;
}

.choose-color li label i{
    color: white;
    position: absolute;
    left: -5px;
}

.choose-color {
    padding: 0;
}

.modals-page .modal-backdrop { 
    z-index: 9999;
}
.dashboard .modal-backdrop { 
    z-index: 99999;
}
.modal{
    z-index: 999999;
}
.choose-color > li input[type="radio"]:checked + label::after {
    position: absolute;
    top: -5px;
    left: 5px;
    display: inline-block;
    margin-top: -2px;
    font-size: 16px;
    line-height: 1;
    color: #fff;
    content: "\4e";
}


.choose-color > li input[type="radio"] { 
    position: absolute;
    top: -2px; 
    left: -2px; 
    z-index: 1;
    border-radius: inherit; 
    opacity: 0; 
    margin: 0;
    width: inherit; 
    height: inherit;
}

/*----- MODALS WITH ALIGN -----*/

.open-modal-center{
    display: -webkit-flex;
    display: -webkit-box;
    display: flex;
    height: 100%;
    /*    margin: 0 auto;*/
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: center;
    align-content: center;
}
.open-modal-bottom{
    display: -webkit-flex;
    display: -webkit-box;
    display: flex;
    height: 97%;
    margin: 0 auto;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    -webkit-box-pack: end;
    justify-content: flex-end;
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: center;
    align-content: center;
}
.open-modal-right{
    position: absolute;
    right: 0;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -webkit-box;
    display: flex;
    height: 100%;
    margin: 0;
    background: #fff;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: center;
    align-content: center;
}
.modal-content-modal{
    position: relative;
    background: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; 
    border: none;
    border: none; 
    border-radius: 6px;
    outline: 0;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5);
    box-shadow: 0 3px 9px rgba(0,0,0,.5);
}

.modal-body p{
    margin-bottom: 0;
}

/***************/

.close-modal{
    position: fixed;
    right: 10px;
}

.modal-tab-header{
    border-bottom: none;
}

.page-col{
    padding: 11px 7px;
    background: #eaecec;
}


/*--------------------------------

9.1.8 SCROLLABLE

--------------------------------*/

.scrollab-page{
    position: relative;
    padding: 10px;
    border: 1px solid #999;
}
.scrollab-page .scrollable-horizontal .scrollable-content {
    width: 1400px;
}
.scrollab{
    margin-bottom: 80px;
}
.dark-scrollab{
    color: #76838f;
    background: #e2e2e2;
}
.scrollable-button .btn{
    margin-right: 15px;
    margin-bottom: 15px;
}

.scrollable-inverse.scrollable .scrollable-bar-handle {
    background: #999 !important;
}
.scrollable-content > p {
    padding-right: 10px;
}
.image-scrollable .scrollable-bar-handle {
    background: #555;
}

/*--------------------------------

9.1.9 TYPOGRAPHY

--------------------------------*/

.h1 .icon:first-child, .h2 .icon:first-child, .h3 .icon:first-child, .h4 .icon:first-child, .h5 .icon:first-child, .h6 .icon:first-child, h1 .icon:first-child, h2 .icon:first-child, h3 .icon:first-child, h4 .icon:first-child, h5 .icon:first-child, h6 .icon:first-child {
    margin-right: .5em !important;
}

code
{

    border: 1px solid #c5cae9 !important;
    padding: 2px 4px;
    font-size: 90%;
    background: rgba(197,202,233,.1);
    border-radius: 3px;

}

.typ-content
{
    background: white;
    padding: 20px 20px 10px 20px !important;
}

.address-typo address
{
    margin-bottom: 17px;
}

.typography blockquote{
    border-left: 3px solid #36A9E1;
}
.typography .blockquote-reverse{
    border-right: 3px solid #36A9E1;
    border-left: 0px;
}

.typography .alignment-left
{
    text-align: left;

}
.typography .alignment-center
{
    text-align:center;

}
.typography .alignment-right
{
    text-align: right;

}

.list-with-icons {
    padding-left: 0px;
    margin-left: 0;
    list-style: none;
}
.list-with-icons>li i {
    width: 1em;
    margin: 0px 6px 0 0;
}
.well-primary {
    color: #fff;
    background: #3f51b5;
}
.well-success {
    color: #fff;
    background: #4caf50;
}
.well-info {
    color: #fff;
    background: #00bcd4;
}
.well-warning {
    color: #fff;
    background: #ff9800;
}
.well-danger {
    color: #fff;
    background: #f44336;
}
.drop-cap {
    float: left;
    padding: 5px;
    margin-right: 5px;
    font-family: Georgia;
    font-size: 60px;
    line-height: 50px;
    color: #212121;
}
.drop-cap-reversed {
    color: #fff;
    background: #212121;
}
.typography mark {
    padding: .2em;
    background: #ff9800;
    color: #fff;
    border-radius: 2px;
}

.list-title, h4.list-title {
    font-size: 16px;
    font-weight: 600;
    text-transform:none;
}


/*--------------------------------

9.1.10 UTILITIES

--------------------------------*/

/*----- PADDING CLASS -----*/

.padding-0
{
    padding:0px !important;
}
.padding-5
{
    padding:5px !important;
}
.padding-10
{
    padding:10px !important;
}
.padding-15
{
    padding:15px !important;
}
.padding-20
{
    padding:20px !important;
}
.padding-25
{
    padding:25px !important;
}
.padding-30
{
    padding:30px !important;
}
.padding-35
{
    padding:35px !important;
}
.padding-40
{
    padding:40px !important;
}
.padding-45
{
    padding:45px !important;
}
.padding-50
{
    padding:50px !important;
}
.padding-55
{
    padding:55px !important;
}
.padding-60
{
    padding:60px !important;
}
.padding-65
{
    padding:65px !important;
}
.padding-70
{
    padding:70px !important;
}
.padding-75
{
    padding:75px !important;
}
.padding-80
{
    padding:80px !important;
}
.padding-85
{
    padding:85px !important;
}
.padding-90
{
    padding:90px !important;
}
.padding-95
{
    padding:95px !important;
}
.padding-100
{
    padding:100px !important;
}

/*----- PADDING HORIZONTAL CLASS -----*/

.padding-horizontal-0
{
    padding-left:0px !important;
    padding-right:0px !important;
}
.padding-horizontal-5
{
    padding-left:5px !important;
    padding-right:5px !important;
}
.padding-horizontal-10
{
    padding-left:10px !important;
    padding-right:10px !important;
}
.padding-horizontal-15
{
    padding-left:15px !important;
    padding-right:15px !important;
}
.padding-horizontal-20
{
    padding-left:20px !important;
    padding-right:20px !important;
}
.padding-horizontal-25
{
    padding-left:25px !important;
    padding-right:25px !important;
}
.padding-horizontal-30
{
    padding-left:30px !important;
    padding-right:30px !important;
}
.padding-horizontal-35
{
    padding-left:35px !important;
    padding-right:35px !important;
}
.padding-horizontal-40
{
    padding-left:40px !important;
    padding-right:40px !important;
}
.padding-horizontal-45
{
    padding-left:45px !important;
    padding-right:45px !important;
}
.padding-horizontal-50
{
    padding-left:50px !important;
    padding-right:50px !important;
}
.padding-horizontal-55
{
    padding-left:55px !important;
    padding-right:55px !important;
}
.padding-horizontal-60
{
    padding-left:60px !important;
    padding-right:60px !important;
}
.padding-horizontal-65
{
    padding-left:65px !important;
    padding-right:65px !important;
}
.padding-horizontal-70
{
    padding-left:70px !important;
    padding-right:70px !important;
}
.padding-horizontal-75
{
    padding-left:75px !important;
    padding-right:75px !important;
}
.padding-horizontal-80
{
    padding-left:80px !important;
    padding-right:80px !important;
}
.padding-horizontal-85
{
    padding-left:85px !important;
    padding-right:85px !important;
}
.padding-horizontal-90
{
    padding-left:90px !important;
    padding-right:90px !important;
}
.padding-horizontal-95
{
    padding-left:95px !important;
    padding-right:95px !important;
}
.padding-horizontal-100
{
    padding-left:100px !important;
    padding-right:100px !important;
}

/*----- PADDING VERTICAL CLASS -----*/

.padding-vertical-0
{
    padding-top:0px !important;
    padding-bottom:0px !important;
}
.padding-vertical-5
{
    padding-top:5px !important;
    padding-bottom:5px !important;
}
.padding-vertical-10
{
    padding-top:10px !important;
    padding-bottom:10px !important;
}
.padding-vertical-15
{
    padding-top:15px !important;
    padding-bottom:15px !important;
}
.padding-vertical-20
{
    padding-top:20px !important;
    padding-bottom:20px !important;
}
.padding-vertical-25
{
    padding-top:25px !important;
    padding-bottom:25px !important;
}
.padding-vertical-30
{
    padding-top:30px !important;
    padding-bottom:30px !important;
}
.padding-vertical-35
{
    padding-top:35px !important;
    padding-bottom:35px !important;
}
.padding-vertical-40
{
    padding-top:40px !important;
    padding-bottom:40px !important;
}
.padding-vertical-45
{
    padding-top:45px !important;
    padding-bottom:45px !important;
}
.padding-vertical-50
{
    padding-top:50px !important;
    padding-bottom:50px !important;
}
.padding-vertical-55
{
    padding-top:55px !important;
    padding-bottom:55px !important;
}
.padding-vertical-60
{
    padding-top:60px !important;
    padding-bottom:60px !important;
}
.padding-vertical-65
{
    padding-top:65px !important;
    padding-bottom:65px !important;
}
.padding-vertical-70
{
    padding-top:70px !important;
    padding-bottom:70px !important;
}
.padding-vertical-75
{
    padding-top:75px !important;
    padding-bottom:75px !important;
}
.padding-vertical-80
{
    padding-top:80px !important;
    padding-bottom:80px !important;
}
.padding-vertical-85
{
    padding-top:85px !important;
    padding-bottom:85px !important;
}
.padding-vertical-90
{
    padding-top:90px !important;
    padding-bottom:90px !important;
}
.padding-vertical-95
{
    padding-top:95px !important;
    padding-bottom:95px !important;
}
.padding-vertical-100
{
    padding-top:100px !important;
    padding-bottom:100px !important;
}

/*----- PADDING TOP CLASS -----*/

.padding-top-0
{
    padding-top:0px !important;
}
.padding-top-5
{
    padding-top:5px !important;
}
.padding-top-10
{
    padding-top:10px !important;
}
.padding-top-15
{
    padding-top:15px !important;
}
.padding-top-20
{
    padding-top:20px !important;
}
.padding-top-25
{
    padding-top:25px !important;
}
.padding-top-30
{
    padding-top:30px !important;
}
.padding-top-35
{
    padding-top:35px !important;
}
.padding-top-40
{
    padding-top:40px !important;
}
.padding-top-45
{
    padding-top:45px !important;
}
.padding-top-50
{
    padding-top:50px !important;
}
.padding-top-55
{
    padding-top:55px !important;
}
.padding-top-60
{
    padding-top:60px !important;
}
.padding-top-65
{
    padding-top:65px !important;
}
.padding-top-70
{
    padding-top:70px !important;
}
.padding-top-75
{
    padding-top:75px !important;
}
.padding-top-80
{
    padding-top:80px !important;
}
.padding-top-85
{
    padding-top:85px !important;
}
.padding-top-90
{
    padding-top:90px !important;
}
.padding-top-95
{
    padding-top:95px !important;
}
.padding-top-100
{
    padding-top:100px !important;
}

/*----- PADDING BOTTOM CLASS -----*/

.padding-bottom-0
{
    padding-bottom:0px !important;
}
.padding-bottom-5
{
    padding-bottom:5px !important;
}
.padding-bottom-10
{
    padding-bottom:10px !important;
}
.padding-bottom-15
{
    padding-bottom:15px !important;
}
.padding-bottom-20
{
    padding-bottom:20px !important;
}
.padding-bottom-25
{
    padding-bottom:25px !important;
}
.padding-bottom-30
{
    padding-bottom:30px !important;
}
.padding-bottom-35
{
    padding-bottom:35px !important;
}
.padding-bottom-40
{
    padding-bottom:40px !important;
}
.padding-bottom-45
{
    padding-bottom:45px !important;
}
.padding-bottom-50
{
    padding-bottom:50px !important;
}
.padding-bottom-55
{
    padding-bottom:55px !important;
}
.padding-bottom-60
{
    padding-bottom:60px !important;
}
.padding-bottom-65
{
    padding-bottom:65px !important;
}
.padding-bottom-70
{
    padding-bottom:70px !important;
}
.padding-bottom-75
{
    padding-bottom:75px !important;
}
.padding-bottom-80
{
    padding-bottom:80px !important;
}
.padding-bottom-85
{
    padding-bottom:85px !important;
}
.padding-bottom-90
{
    padding-bottom:90px !important;
}
.padding-bottom-95
{
    padding-bottom:95px !important;
}
.padding-bottom-100
{
    padding-bottom:100px !important;
}

/*----- PADDING LEFT CLASS -----*/

.padding-left-0
{
    padding-left:0px !important;
}
.padding-left-5
{
    padding-left:5px !important;
}
.padding-left-10
{
    padding-left:10px !important;
}
.padding-left-15
{
    padding-left:15px !important;
}
.padding-left-20
{
    padding-left:20px !important;
}
.padding-left-25
{
    padding-left:25px !important;
}
.padding-left-30
{
    padding-left:30px !important;
}
.padding-left-35
{
    padding-left:35px !important;
}
.padding-left-40
{
    padding-left:40px !important;
}
.padding-left-45
{
    padding-left:45px !important;
}
.padding-left-50
{
    padding-left:50px !important;
}
.padding-left-55
{
    padding-left:55px !important;
}
.padding-left-60
{
    padding-left:60px !important;
}
.padding-left-65
{
    padding-left:65px !important;
}
.padding-left-70
{
    padding-left:70px !important;
}
.padding-left-75
{
    padding-left:75px !important;
}
.padding-left-80
{
    padding-left:80px !important;
}
.padding-left-85
{
    padding-left:85px !important;
}
.padding-left-90
{
    padding-left:90px !important;
}
.padding-left-95
{
    padding-left:95px !important;
}
.padding-left-100
{
    padding-left:100px !important;
}

/*----- PADDING RIGHT CLASS -----*/

.padding-right-0
{
    padding-right:0px !important;
}
.padding-right-5
{
    padding-right:5px !important;
}
.padding-right-10
{
    padding-right:10px !important;
}
.padding-right-15
{
    padding-right:15px !important;
}
.padding-right-20
{
    padding-right:20px !important;
}
.padding-right-25
{
    padding-right:25px !important;
}
.padding-right-30
{
    padding-right:30px !important;
}
.padding-right-35
{
    padding-right:35px !important;
}
.padding-right-40
{
    padding-right:40px !important;
}
.padding-right-45
{
    padding-right:45px !important;
}
.padding-right-50
{
    padding-right:50px !important;
}
.padding-right-55
{
    padding-right:55px !important;
}
.padding-right-60
{
    padding-right:60px !important;
}
.padding-right-65
{
    padding-right:65px !important;
}
.padding-right-70
{
    padding-right:70px !important;
}
.padding-right-75
{
    padding-right:75px !important;
}
.padding-right-80
{
    padding-right:80px !important;
}
.padding-right-85
{
    padding-right:85px !important;
}
.padding-right-90
{
    padding-right:90px !important;
}
.padding-right-95
{
    padding-right:95px !important;
}
.padding-right-100
{
    padding-right:100px !important;
}


/*----- MARGIN CLASS -----*/

.margin-0
{
    margin:0px !important;
}
.margin-5
{
    margin:5px !important;
}
.margin-10
{
    margin:10px !important;
}
.margin-15
{
    margin:15px !important;
}
.margin-20
{
    margin:20px !important;
}
.margin-25
{
    margin:25px !important;
}
.margin-30
{
    margin:30px !important;
}
.margin-35
{
    margin:35px !important;
}
.margin-40
{
    margin:40px !important;
}
.margin-45
{
    margin:45px !important;
}
.margin-50
{
    margin:50px !important;
}
.margin-55
{
    margin:55px !important;
}
.margin-60
{
    margin:60px !important;
}
.margin-65
{
    margin:65px !important;
}
.margin-70
{
    margin:70px !important;
}
.margin-75
{
    margin:75px !important;
}
.margin-80
{
    margin:80px !important;
}
.margin-85
{
    margin:85px !important;
}
.margin-90
{
    margin:90px !important;
}
.margin-95
{
    margin:95px !important;
}
.margin-100
{
    margin:100px !important;
}

/*----- MARGIN HORIZONTAL CLASS -----*/

.margin-horizontal-0
{
    margin-left:0px !important;
    margin-right:0px !important;
}
.margin-horizontal-5
{
    margin-left:5px !important;
    margin-right:5px !important;
}
.margin-horizontal-10
{
    margin-left:10px !important;
    margin-right:10px !important;
}
.margin-horizontal-15
{
    margin-left:15px !important;
    margin-right:15px !important;
}
.margin-horizontal-20
{
    margin-left:20px !important;
    margin-right:20px !important;
}
.margin-horizontal-25
{
    margin-left:25px !important;
    margin-right:25px !important;
}
.margin-horizontal-30
{
    margin-left:30px !important;
    margin-right:30px !important;
}
.margin-horizontal-35
{
    margin-left:35px !important;
    margin-right:35px !important;
}
.margin-horizontal-40
{
    margin-left:40px !important;
    margin-right:40px !important;
}
.margin-horizontal-45
{
    margin-left:45px !important;
    margin-right:45px !important;
}
.margin-horizontal-50
{
    margin-left:50px !important;
    margin-right:50px !important;
}
.margin-horizontal-55
{
    margin-left:55px !important;
    margin-right:55px !important;
}
.margin-horizontal-60
{
    margin-left:60px !important;
    margin-right:60px !important;
}
.margin-horizontal-65
{
    margin-left:65px !important;
    margin-right:65px !important;
}
.margin-horizontal-70
{
    margin-left:70px !important;
    margin-right:70px !important;
}
.margin-horizontal-75
{
    margin-left:75px !important;
    margin-right:75px !important;
}
.margin-horizontal-80
{
    margin-left:80px !important;
    margin-right:80px !important;
}
.margin-horizontal-85
{
    margin-left:85px !important;
    margin-right:85px !important;
}
.margin-horizontal-90
{
    margin-left:90px !important;
    margin-right:90px !important;
}
.margin-horizontal-95
{
    margin-left:95px !important;
    margin-right:95px !important;
}
.margin-horizontal-100
{
    margin-left:100px !important;
    margin-right:100px !important;
}

/*----- MARGIN VERTICAL CLASS -----*/

.margin-vertical-0
{
    margin-top:0px !important;
    margin-bottom:0px !important;
}
.margin-vertical-5
{
    margin-top:5px !important;
    margin-bottom:5px !important;
}
.margin-vertical-10
{
    margin-top:10px !important;
    margin-bottom:10px !important;
}
.margin-vertical-15
{
    margin-top:15px !important;
    margin-bottom:15px !important;
}
.margin-vertical-20
{
    margin-top:20px !important;
    margin-bottom:20px !important;
}
.margin-vertical-25
{
    margin-top:25px !important;
    margin-bottom:25px !important;
}
.margin-vertical-30
{
    margin-top:30px !important;
    margin-bottom:30px !important;
}
.margin-vertical-35
{
    margin-top:35px !important;
    margin-bottom:35px !important;
}
.margin-vertical-40
{
    margin-top:40px !important;
    margin-bottom:40px !important;
}
.margin-vertical-45
{
    margin-top:45px !important;
    margin-bottom:45px !important;
}
.margin-vertical-50
{
    margin-top:50px !important;
    margin-bottom:50px !important;
}
.margin-vertical-55
{
    margin-top:55px !important;
    margin-bottom:55px !important;
}
.margin-vertical-60
{
    margin-top:60px !important;
    margin-bottom:60px !important;
}
.margin-vertical-65
{
    margin-top:65px !important;
    margin-bottom:65px !important;
}
.margin-vertical-70
{
    margin-top:70px !important;
    margin-bottom:70px !important;
}
.margin-vertical-75
{
    margin-top:75px !important;
    margin-bottom:75px !important;
}
.margin-vertical-80
{
    margin-top:80px !important;
    margin-bottom:80px !important;
}
.margin-vertical-85
{
    margin-top:85px !important;
    margin-bottom:85px !important;
}
.margin-vertical-90
{
    margin-top:90px !important;
    margin-bottom:90px !important;
}
.margin-vertical-95
{
    margin-top:95px !important;
    margin-bottom:95px !important;
}
.margin-vertical-100
{
    margin-top:100px !important;
    margin-bottom:100px !important;
}

/*----- MARGIN TOP CLASS -----*/

.margin-top-0
{
    margin-top:0px !important;
}
.margin-top-5
{
    margin-top:5px !important;
}
.margin-top-10
{
    margin-top:10px !important;
}
.margin-top-15
{
    margin-top:15px !important;
}
.margin-top-20
{
    margin-top:20px !important;
}
.margin-top-25
{
    margin-top:25px !important;
}
.margin-top-30
{
    margin-top:30px !important;
}
.margin-top-35
{
    margin-top:35px !important;
}
.margin-top-40
{
    margin-top:40px !important;
}
.margin-top-45
{
    margin-top:45px !important;
}
.margin-top-50
{
    margin-top:50px !important;
}
.margin-top-55
{
    margin-top:55px !important;
}
.margin-top-60
{
    margin-top:60px !important;
}
.margin-top-65
{
    margin-top:65px !important;
}
.margin-top-70
{
    margin-top:70px !important;
}
.margin-top-75
{
    margin-top:75px !important;
}
.margin-top-80
{
    margin-top:80px !important;
}
.margin-top-85
{
    margin-top:85px !important;
}
.margin-top-90
{
    margin-top:90px !important;
}
.margin-top-95
{
    margin-top:95px !important;
}
.margin-top-100
{
    margin-top:100px !important;
}

/*----- MARGIN BOTTOM CLASS -----*/

.margin-bottom-0
{
    margin-bottom:0px !important;
}
.margin-bottom-5
{
    margin-bottom:5px !important;
}
.margin-bottom-10
{
    margin-bottom:10px !important;
}
.margin-bottom-15
{
    margin-bottom:15px !important;
}
.margin-bottom-20
{
    margin-bottom:20px !important;
}
.margin-bottom-25
{
    margin-bottom:25px !important;
}
.margin-bottom-30
{
    margin-bottom:30px !important;
}
.margin-bottom-35
{
    margin-bottom:35px !important;
}
.margin-bottom-40
{
    margin-bottom:40px !important;
}
.margin-bottom-45
{
    margin-bottom:45px !important;
}
.margin-bottom-50
{
    margin-bottom:50px !important;
}
.margin-bottom-55
{
    margin-bottom:55px !important;
}
.margin-bottom-60
{
    margin-bottom:60px !important;
}
.margin-bottom-65
{
    margin-bottom:65px !important;
}
.margin-bottom-70
{
    margin-bottom:70px !important;
}
.margin-bottom-75
{
    margin-bottom:75px !important;
}
.margin-bottom-80
{
    margin-bottom:80px !important;
}
.margin-bottom-85
{
    margin-bottom:85px !important;
}
.margin-bottom-90
{
    margin-bottom:90px !important;
}
.margin-bottom-95
{
    margin-bottom:95px !important;
}
.margin-bottom-100
{
    margin-bottom:100px !important;
}

/*----- MARGIN LEFT CLASS -----*/

.margin-left-0
{
    margin-left:0px !important;
}
.margin-left-5
{
    margin-left:5px !important;
}
.margin-left-10
{
    margin-left:10px !important;
}
.margin-left-15
{
    margin-left:15px !important;
}
.margin-left-20
{
    margin-left:20px !important;
}
.margin-left-25
{
    margin-left:25px !important;
}
.margin-left-30
{
    margin-left:30px !important;
}
.margin-left-35
{
    margin-left:35px !important;
}
.margin-left-40
{
    margin-left:40px !important;
}
.margin-left-45
{
    margin-left:45px !important;
}
.margin-left-50
{
    margin-left:50px !important;
}
.margin-left-55
{
    margin-left:55px !important;
}
.margin-left-60
{
    margin-left:60px !important;
}
.margin-left-65
{
    margin-left:65px !important;
}
.margin-left-70
{
    margin-left:70px !important;
}
.margin-left-75
{
    margin-left:75px !important;
}
.margin-left-80
{
    margin-left:80px !important;
}
.margin-left-85
{
    margin-left:85px !important;
}
.margin-left-90
{
    margin-left:90px !important;
}
.margin-left-95
{
    margin-left:95px !important;
}
.margin-left-100
{
    margin-left:100px !important;
}

/*----- MARGIN RIGHT CLASS -----*/

.margin-right-0
{
    margin-right:0px !important;
}
.margin-right-5
{
    margin-right:5px !important;
}
.margin-right-10
{
    margin-right:10px !important;
}
.margin-right-15
{
    margin-right:15px !important;
}
.margin-right-20
{
    margin-right:20px !important;
}
.margin-right-25
{
    margin-right:24px !important;
}
.margin-right-30
{
    margin-right:30px !important;
}
.margin-right-35
{
    margin-right:35px !important;
}
.margin-right-40
{
    margin-right:40px !important;
}
.margin-right-45
{
    margin-right:45px !important;
}
.margin-right-50
{
    margin-right:50px !important;
}
.margin-right-55
{
    margin-right:55px !important;
}
.margin-right-60
{
    margin-right:60px !important;
}
.margin-right-65
{
    margin-right:65px !important;
}
.margin-right-70
{
    margin-right:70px !important;
}
.margin-right-75
{
    margin-right:75px !important;
}
.margin-right-80
{
    margin-right:80px !important;
}
.margin-right-85
{
    margin-right:85px !important;
}
.margin-right-90
{
    margin-right:90px !important;
}
.margin-right-95
{
    margin-right:95px !important;
}
.margin-right-100
{
    margin-right:100px !important;
}


.utilities .page-box {
    position: relative;
    padding: 45px 15px 15px !important;
    margin-right: 0;
    margin-left: 0;
    border: 1px solid #e0e0e0;
}
.utilities .page-box:after {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 12px;
    color: #959595;
    text-transform: uppercase;
    letter-spacing: 1px;
    content: "Example";
}

.truncate-text {
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: normal;
    white-space: nowrap;
}
.break-text {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
    white-space: normal;
    -ms-hyphens: auto;
}

.visiblity-utilities th small {
    display: block;
    color: #999;
}
.utilities strong {
    font-weight: 500;
}
.graybg
{
    background: #eee;
}
.whitebg
{
    background: #fff;
}
.visiblity-utilities .is-visible {
    color: #468847;
    text-align: center;
    background: #dff0d8!important;
}
.visiblity-utilities .is-hidden {
    color: #ccc;
    text-align: center;
    background: #f9f9f9!important;
}

.utilities .tablesaw td, .tablesaw th{
    line-height: normal !important;
}
th {
    font-weight: 400;
}

.border-utilitie{
    border:1px solid #e6e8ea;
}

/*--------------------------------

9.1.11 COLORS

--------------------------------*/

.color-primaries {
    padding: 10px 0;
    margin-bottom: 0;
    display: table;
    table-layout: fixed;
    width: 100%;
}
.color-palette > div {
    margin-bottom: 20px;
}

.color-primaries>div {
    display: table-cell !important;
    height: 185px;
    vertical-align: middle;
    color: #fff;
    text-align: center;

}
.color-palette .list-group-item {
    border: medium none; 
    border-radius: 0; 
    float: left; 
    height: 68px; 
    line-height: 28px; 
    padding: 20px; width: 105px;
}

.colors ul.list-group li span{
    display: block;
    text-align: center;
    vertical-align: middle;
    line-height: 28px;
}

.color-palette .list-group {
    color: #fff;
}

/*----- COLORS CLASS -----*/

/*----- COLORS CLASS RED -----*/

.bg-red-a400 {
    background: #d50000!important;
}
.bg-red-a300 {
    background: #ff1744!important;
}
.bg-red-a200 {
    background: #ff5252!important;
}
.bg-red-a100 {
    background: #ff8a80!important;
}
.bg-red-900 {
    background: #b71c1c!important;
}
.bg-red-800 {
    background: #c62828!important;
}
.bg-red-700 {
    background: #d32f2f!important;
}
.bg-red-600 {
    background: #e53935!important;
}
.bg-red-500 {
    background: #f44336!important;
}
.bg-red-400 {
    background: #ef5350!important;
}
.bg-red-300 {
    background: #e57373!important;
}
.bg-red-200 {
    background: #ef9a9a!important;
}
.bg-red-100 {
    background: #ffcdd2!important;
}
.bg-red-50 {
    background: #ffebee!important;
}

/*----- COLORS CLASS PINK -----*/

.bg-pink-a400 {
    background: #c51162!important;
}
.bg-pink-a300 {
    background: #f50057!important;
}
.bg-pink-a200 {
    background: #ff4081!important;
}
.bg-pink-a100 {
    background: #ff80ab!important;
}
.bg-pink-900 {
    background: #880e4f!important;
}
.bg-pink-800 {
    background: #ad1457!important;
}
.bg-pink-700 {
    background: #c2185b!important;
}
.bg-pink-600 {
    background: #d81b60!important;
}
.bg-pink-500 {
    background: #e91e63!important;
}
.bg-pink-400 {
    background: #ec407a!important;
}
.bg-pink-300 {
    background: #f06292!important;
}
.bg-pink-200 {
    background: #f48fb1!important;
}
.bg-pink-100 {
    background: #f8bbd0!important;
}
.bg-pink-50 {
    background: #fce4ec!important;
}

/*----- COLORS CLASS PURPLE -----*/

.bg-purple-a400 {
    background: #a0f!important;
}
.bg-purple-a300 {
    background: #d500f9!important;
}
.bg-purple-a200 {
    background: #e040fb!important;
}
.bg-purple-a100 {
    background: #ea80fc!important;
}
.bg-purple-900 {
    background: #4a148c!important;
}
.bg-purple-800 {
    background: #6a1b9a!important;
}
.bg-purple-700 {
    background: #7b1fa2!important;
}
.bg-purple-600 {
    background: #8e24aa!important;
}
.bg-purple-500 {
    background: #9c27b0!important;
}
.bg-purple-400 {
    background: #ab47bc!important;
}
.bg-purple-300 {
    background: #ba68c8!important;
}
.bg-purple-200 {
    background: #ce93d8!important;
}
.bg-purple-100 {
    background: #e1bee7!important;
}
.bg-purple-50 {
    background: #f3e5f5!important;
}

/*----- COLORS CLASS DEEP PURPLE -----*/

.bg-deep-purple-50{background:#ede7f6!important}
.bg-deep-purple-100{background:#d1c4e9!important}
.bg-deep-purple-200{background:#b39ddb!important}
.bg-deep-purple-300{background:#9575cd!important}
.bg-deep-purple-400{background:#7e57c2!important}
.bg-deep-purple-500{background:#673ab7!important}
.bg-deep-purple-600{background:#5e35b1!important}
.bg-deep-purple-700{background:#512da8!important}
.bg-deep-purple-800{background:#4527a0!important}
.bg-deep-purple-900{background:#311b92!important}
.bg-deep-purple-a100{background:#b388ff!important}
.bg-deep-purple-a200{background:#7c4dff!important}
.bg-deep-purple-a300{background:#651fff!important}
.bg-deep-purple-a400{background:#6200ea!important}

/*----- COLORS CLASS INDIGO -----*/

.bg-indigo-50{background:#e8eaf6!important}
.bg-indigo-100{background:#c5cae9!important}
.bg-indigo-200{background:#9fa8da!important}
.bg-indigo-300{background:#7986cb!important}
.bg-indigo-400{background:#5c6bc0!important}
.bg-indigo-500{background:#3f51b5!important}
.bg-indigo-600{background:#3949ab!important}
.bg-indigo-700{background:#303f9f!important}
.bg-indigo-800{background:#283593!important}
.bg-indigo-900{background:#1a237e!important}
.bg-indigo-a100{background:#8c9eff!important}
.bg-indigo-a200{background:#536dfe!important}
.bg-indigo-a300{background:#3d5afe!important}
.bg-indigo-a400{background:#304ffe!important}

/*----- COLORS CLASS BLUE -----*/

.bg-blue-50{background:#e3f2fd!important}
.bg-blue-100{background:#bbdefb!important}
.bg-blue-200{background:#90caf9!important}
.bg-blue-300{background:#64b5f6!important}
.bg-blue-400{background:#42a5f5!important}
.bg-blue-500{background:#2196f3!important}
.bg-blue-600{background:#1e88e5!important}
.bg-blue-700{background:#1976d2!important}
.bg-blue-800{background:#1565c0!important}
.bg-blue-900{background:#0d47a1!important}
.bg-blue-a100{background:#82b1ff!important}
.bg-blue-a200{background:#448aff!important}
.bg-blue-a300{background:#2979ff!important}
.bg-blue-a400{background:#2962ff!important}

/*----- COLORS CLASS LIGHT BLUE -----*/

.bg-light-blue-50{background:#e1f5fe!important}
.bg-light-blue-100{background:#b3e5fc!important}
.bg-light-blue-200{background:#81d4fa!important}
.bg-light-blue-300{background:#4fc3f7!important}
.bg-light-blue-400{background:#29b6f6!important}
.bg-light-blue-500{background:#03a9f4!important}
.bg-light-blue-600{background:#039be5!important}
.bg-light-blue-700{background:#0288d1!important}
.bg-light-blue-800{background:#0277bd!important}
.bg-light-blue-900{background:#01579b!important}
.bg-light-blue-a100{background:#80d8ff!important}
.bg-light-blue-a200{background:#40c4ff!important}
.bg-light-blue-a300{background:#00b0ff!important}
.bg-light-blue-a400{background:#0091ea!important}

/*----- COLORS CLASS CYAN -----*/

.bg-cyan-50{background:#e0f7fa!important}
.bg-cyan-100{background:#b2ebf2!important}
.bg-cyan-200{background:#80deea!important}
.bg-cyan-300{background:#4dd0e1!important}
.bg-cyan-400{background:#26c6da!important}
.bg-cyan-500{background:#00bcd4!important}
.bg-cyan-600{background:#00acc1!important}
.bg-cyan-700{background:#0097a7!important}
.bg-cyan-800{background:#00838f!important}
.bg-cyan-900{background:#006064!important}
.bg-cyan-a100{background:#84ffff!important}
.bg-cyan-a200{background:#18ffff!important}
.bg-cyan-a300{background:#00e5ff!important}
.bg-cyan-a400{background:#00b8d4!important}

/*----- COLORS CLASS TEAL -----*/

.bg-teal-50{background:#e0f2f1!important}
.bg-teal-100{background:#b2dfdb!important}
.bg-teal-200{background:#80cbc4!important}
.bg-teal-300{background:#4db6ac!important}
.bg-teal-400{background:#26a69a!important}
.bg-teal-500{background:#009688!important}
.bg-teal-600{background:#00897b!important}
.bg-teal-700{background:#00796b!important}
.bg-teal-800{background:#00695c!important}
.bg-teal-900{background:#004d40!important}
.bg-teal-a100{background:#a7ffeb!important}
.bg-teal-a200{background:#64ffda!important}
.bg-teal-a300{background:#1de9b6!important}
.bg-teal-a400{background:#00bfa5!important}

/*----- COLORS CLASS GREEN -----*/

.bg-green-50{background:#e8f5e9!important}
.bg-green-100{background:#c8e6c9!important}
.bg-green-200{background:#a5d6a7!important}
.bg-green-300{background:#81c784!important}
.bg-green-400{background:#66bb6a!important}
.bg-green-500{background:#4caf50!important}
.bg-green-600{background:#43a047!important}
.bg-green-700{background:#388e3c!important}
.bg-green-800{background:#2e7d32!important}
.bg-green-900{background:#1b5e20!important}
.bg-green-a100{background:#b9f6ca!important}
.bg-green-a200{background:#69f0ae!important}
.bg-green-a300{background:#00e676!important}
.bg-green-a400{background:#00c853!important}

/*----- COLORS CLASS LIGHT GREEN -----*/

.bg-light-green-50{background:#f1f8e9!important}
.bg-light-green-100{background:#dcedc8!important}
.bg-light-green-200{background:#c5e1a5!important}
.bg-light-green-300{background:#aed581!important}
.bg-light-green-400{background:#9ccc65!important}
.bg-light-green-500{background:#8bc34a!important}
.bg-light-green-600{background:#7cb342!important}
.bg-light-green-700{background:#689f38!important}
.bg-light-green-800{background:#558b2f!important}
.bg-light-green-900{background:#33691e!important}
.bg-light-green-a100{background:#ccff90!important}
.bg-light-green-a200{background:#b2ff59!important}
.bg-light-green-a300{background:#76ff03!important}
.bg-light-green-a400{background:#64dd17!important}

/*----- COLORS CLASS YELLOW -----*/

.bg-yellow-50{background:#fffde7!important}
.bg-yellow-100{background:#fff9c4!important}
.bg-yellow-200{background:#fff59d!important}
.bg-yellow-300{background:#fff176!important}
.bg-yellow-400{background:#ffee58!important}
.bg-yellow-500{background:#ffeb3b!important}
.bg-yellow-600{background:#fdd835!important}
.bg-yellow-700{background:#fbc02d!important}
.bg-yellow-800{background:#f9a825!important}
.bg-yellow-900{background:#f57f17!important}
.bg-yellow-a100{background:#ffff8d!important}
.bg-yellow-a200{background:#ff0!important}
.bg-yellow-a300{background:#ffea00!important}
.bg-yellow-a400{background:#ffd600!important}

/*----- COLORS CLASS AMBER -----*/

.bg-amber-50{background:#fff8e1!important}
.bg-amber-100{background:#ffecb3!important}
.bg-amber-200{background:#ffe082!important}
.bg-amber-300{background:#ffd54f!important}
.bg-amber-400{background:#ffca28!important}
.bg-amber-500{background:#ffc107!important}
.bg-amber-600{background:#ffb300!important}
.bg-amber-700{background:#ffa000!important}
.bg-amber-800{background:#ff8f00!important}
.bg-amber-900{background:#ff6f00!important}
.bg-amber-a100{background:#ffe57f!important}
.bg-amber-a200{background:#ffd740!important}
.bg-amber-a300{background:#ffc400!important}
.bg-amber-a400{background:#ffab00!important}

/*----- COLORS CLASS ORANGE -----*/

.bg-orange-50{background:#fff3e0!important}
.bg-orange-100{background:#ffe0b2!important}
.bg-orange-200{background:#ffcc80!important}
.bg-orange-300{background:#ffb74d!important}
.bg-orange-400{background:#ffa726!important}
.bg-orange-500{background:#ff9800!important}
.bg-orange-600{background:#fb8c00!important}
.bg-orange-700{background:#f57c00!important}
.bg-orange-800{background:#ef6c00!important}
.bg-orange-900{background:#e65100!important}
.bg-orange-a100{background:#ffd180!important}
.bg-orange-a200{background:#ffab40!important}
.bg-orange-a300{background:#ff9100!important}
.bg-orange-a400{background:#ff6d00!important}

/*----- COLORS CLASS DEEP ORANGE -----*/

.bg-deep-orange-50{background:#fbe9e7!important}
.bg-deep-orange-100{background:#ffccbc!important}
.bg-deep-orange-200{background:#ffab91!important}
.bg-deep-orange-300{background:#ff8a65!important}
.bg-deep-orange-400{background:#ff7043!important}
.bg-deep-orange-500{background:#ff5722!important}
.bg-deep-orange-600{background:#f4511e!important}
.bg-deep-orange-700{background:#e64a19!important}
.bg-deep-orange-800{background:#d84315!important}
.bg-deep-orange-900{background:#bf360c!important}
.bg-deep-orange-a100{background:#ff9e80!important}
.bg-deep-orange-a200{background:#ff6e40!important}
.bg-deep-orange-a300{background:#ff3d00!important}
.bg-deep-orange-a400{background:#dd2c00!important}

/*----- COLORS CLASS BROWN -----*/

.bg-brown-50{background:#efebe9!important}
.bg-brown-100{background:#d7ccc8!important}
.bg-brown-200{background:#bcaaa4!important}
.bg-brown-300{background:#a1887f!important}
.bg-brown-400{background:#8d6e63!important}
.bg-brown-500{background:#795548!important}
.bg-brown-600{background:#6d4c41!important}
.bg-brown-700{background:#5d4037!important}
.bg-brown-800{background:#4e342e!important}
.bg-brown-900{background:#3e2723!important}

/*----- COLORS CLASS BLUE GRAY -----*/

.bg-blue-grey-50{background:#eceff1!important}
.bg-blue-grey-100{background:#cfd8dc!important}
.bg-blue-grey-200{background:#b0bec5!important}
.bg-blue-grey-300{background:#90a4ae!important}
.bg-blue-grey-400{background:#78909c!important}
.bg-blue-grey-500{background:#607d8b!important}
.bg-blue-grey-600{background:#546e7a!important}
.bg-blue-grey-700{background:#455a64!important}
.bg-blue-grey-800{background:#37474f!important}
.bg-blue-grey-900{background:#263238!important}

/*----- COLORS CLASS GRAY -----*/

.bg-grey-50{background:#fafafa!important}
.bg-grey-100{background:#f5f5f5!important}
.bg-grey-200{background:#eee!important}
.bg-grey-300{background:#e0e0e0!important}
.bg-grey-400{background:#bdbdbd!important}
.bg-grey-500{background:#9e9e9e!important}
.bg-grey-600{background:#757575!important}
.bg-grey-700{background:#616161!important}
.bg-grey-800{background:#424242!important}
.bg-grey-900{background:#212121!important}

/*----- COLORS CLASS LIME -----*/

.bg-lime-50{background:#f9fbe7!important}
.bg-lime-100{background:#f0f4c3!important}
.bg-lime-200{background:#e6ee9c!important}
.bg-lime-300{background:#dce775!important}
.bg-lime-400{background:#d4e157!important}
.bg-lime-500{background:#cddc39!important}
.bg-lime-600{background:#c0ca33!important}
.bg-lime-700{background:#afb42b!important}
.bg-lime-800{background:#9e9d24!important}
.bg-lime-900{background:#827717!important}
.bg-lime-a100{background:#f4ff81!important}
.bg-lime-a200{background:#eeff41!important}
.bg-lime-a300{background:#c6ff00!important}
.bg-lime-a400{background:#aeea00!important}


.grey-800 {
    color: #424242!important;
}
.grey-600 {
    color: #757575!important;
}

/*--------------------------------

9.1.12 TABS & ACCORDIONS

--------------------------------*/
.white-tabs .nav-tabs .nav-item a:hover{
    color: #555;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    border-color: transparent;
    color: #fff !important;
}
.nav-tabs > li > a {
    color: #757575;
    padding: 10px 20px;
    line-height: 1.7;
    transition: all 0.25s ease 0s;
}
.dropdown-toggle-tab::after {
    border-left: 0.3em solid transparent;
    border-right: 0.3em solid transparent;
    border-top: 0.3em solid;
    content: "";
    display: inline-block;
    height: 0;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
    vertical-align: middle;
    width: 0;
}
.tab-content {
    overflow: hidden;
}
.tab-content {
    padding-top: 10px;
}
.nav > li > a:focus, .nav > li > a:hover {
    background: rgb(54, 169, 225);
    color: white;
    text-decoration: none;
}
.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
    background: #36a9e1;
    border-color: #337ab7;
    color: white;
}
.dropdown-item {
    background: rgba(0, 0, 0, 0);
    border: 0 none;
    clear: both;
    color: #373a3c;
    display: block;
    font-weight: 400;
    line-height: 1.5;
    padding: 8px 20px;
    text-align: inherit;
    white-space: nowrap;
    width: 100%;
}
.tabs-bordernon .nav-tabs-line > li, a {
    border: medium none !important;
}
.social-widget .static-box p a, .widgett-article .inner-middle span a { color:#ffffff;}
/*.dropdown-menu a:hover {
    background: #36a9e1;
    color: white;
}*/
.dropdown-divider {
    background: #e5e5e5;
    height: 1px;
    overflow: hidden;
}


.nav-tabs-reverse > li {
    float: right;
}
.white-tabs > .nav-tabs > li.active > a, .white-tabs > .nav-tabs > li.active > a:focus, .white-tabs > .nav-tabs > li.active > a:hover {
    background: #fff;
    border-color: #ddd #ddd transparent !important;
    border-image: none !important;
    border-style: solid !important;
    border-width: 1px !important;
    color: #555 !important;
    cursor: default;
}
.white-tabs > .nab-tabs > li, .white-tabs > .nav-tabs > li > a {
    border: 1px solid transparent !important;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
    border-color: transparent;
    color: #fff !important;
}
.white-tabs > .nav-tabs > li > a:hover {
    background: #fff !important;
    border-color: #ddd #ddd transparent !important;
    border-image: none !important;
    border-style: solid !important;
    border-width: 1px !important;
    color: #555;
}


.nav-tabs-vertical .nav-tabs {
    border-bottom: medium none !important;
    border-right: 1px solid #e0e0e0;
    float: left;
}
.margin-right {
    margin-right: 0;
}
.nav-tabs-vertical .nav-tabs > li {
    float: none;
    margin-bottom: 0;
    margin-right: -1px;
}
.nav-tabs-vertical .nav-tabs > li > a {
    border-radius: 4px 0 0 4px;
    margin-bottom: 2px;
    margin-right: 0;
    padding: 10px 20px;
    border:none;
}
.nav-tabs-vertical .tab-content {
    overflow: auto;
    height: 172px;
    padding: 20px;
}
.nav-tabs-vertical .tab-content-col {
    border-radius: 14px;
    height: 172px;
    padding: 2% 3%;
}

.nav-tabs-vertical.tabs-icon .pull-right {
    border-bottom: medium none;
    border-left: 1px solid #e0e0e0;
    border-right: 0 none;
    float: left;
}
.margin-left {
    margin-left: 25px;
}
.nav-tabs-vertical.tabs-icon .nav-tabs > li > a {
    border-radius: 0 4px 4px 0;
    margin-bottom: 2px;
    margin-right: 0;
    padding: 10px 20px;
}

.bgcolor1.un-style > .nav-tabs > li {
    display: block;
    flex: 1 1 0;
    margin: 0;
    position: relative;
    text-align: center;
    z-index: 1;
}
.bgcolor1.un-style > .nav-tabs > li.active a::after {
    transform: translate3d(0px, 0px, 0px);
}
.bgcolor1.un-style > .nav-tabs > li > a::after {
    background: #36a9e1;
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    transform: translate3d(0px, 150%, 0px);
    transition: transform 0.3s ease 0s;
    width: 100%;
}
.bgcolor1.un-style > .nav-tabs > li > a {
    transition: color 0.2s ease 0s;
}
.bgcolor1 .nav-tabs > li.active > a, .bgcolor1 .nav-tabs > li.active > a:focus, .bgcolor1 .nav-tabs > li.active > a:hover {
    background: #e7f5fc;
    border-color: transparent transparent rgba(54, 169, 225, 0.39);
    color: #36a9e1 !important;
}
.bgcolor1 .nav-tabs > li > a:hover {
    color: #36a9e1 !important;
}
.nav-tabs-solid > li > a:hover {
    border-color: transparent;
}
.bgcolor1.un-style > .nav-tabs > li > a:hover {
    background: white;
    color: #36a9e1;
}
.bgcolor1.un-style > .nav-tabs > li.active > a {
    background: white !important;
}
.nav-tabs-solid ~ .tab-content {
    background: #eee;
    padding: 20px;
}
.nav-tabs-solid {
    border-bottom-color: #eee;
}
.nav > li > a {
    overflow: hidden;
}
.bgcolor1.un-style > .nav-tabs > li > a > .icon {
    line-height: 2;
}


.nav-tabs-vertical .nav-tabs-solid > li > a {
    border-radius: 0;
    border-right: 3px solid transparent !important;
}
.nav-tabs-vertical .nav-tabs-solid > li > a:hover, .nav-tabs-vertical .nav-tabs-solid > li.active > a, .nav-tabs-vertical .nav-tabs-solid > li.active > a:hover {
    border-right: 3px solid rgba(54, 169, 225, 0.39) !important;
    transition: all 0.5s ease-in-out 0s;
    border-radius: 4px 0 0 4px;
}
.nav-tabs-vertical .nav-tabs-solid > li > a:hover {
    background: #e7f5fc;
    border-color: transparent;
}
.bgcolor1 .nav-tabs > li > a:hover {
    color: #36a9e1 !important;
}

.nav-tabs-line li {
    padding-bottom: 0;
    position: relative;
}
.nav-tabs-line > li.active > a, .nav-tabs-line > li.active > a:focus, .nav-tabs-line > li.active > a:hover {
    background: transparent !important;
    border-bottom: 2px solid transparent;
}



.nav-tabs-vertical .nav-tabs-line li:after {
    background: transparent;
    content: "";
    display: block;
    height: 2px;
    left: auto;
    position: absolute;
    right: 0;
    top: 0;
    transition: height 0.5s ease 0s, background-color 0.5s ease 0s;
    width: 2px !important;
}
.nav-tabs-vertical .nav-tabs-line li:hover:after {
    height: 43px;
    width: 2px !important;
}
.hover-none > li > a:focus, .hover-none > li > a:hover {
    background: white !important;
    color: #36a9e1 !important;
}


.nav-tabs-line li:after {
    background: transparent;
    content: "";
    display: block;
    height: 2px;
    /*    margin: auto;*/
    transition: width 0.5s ease 0s, background-color 0.5s ease 0s;
    width: 0;
}

.nav-tabs-line li a:hover{
    background: transparent;
    color:#36a9e1;
}

.nav-tabs-line li:hover:after, .nav-tabs-line li.active:after {
    width: 100%;
}

.border-top .nav-tabs {
    border-bottom: none !important;
}

.nav-top-line li.active::before, .nav-top-line li:hover::before {
    background: #36a9e1;
    width: 100%;
}
.nav-top-line li::before {
    background: transparent;
    content: "";
    display: block;
    height: 2px;
    transition: width 0.5s ease 0s, background-color 0.5s ease 0s;
    width: 0;
}
.nav-tabs-horyzontal .hover-none > li.active > a, .nav-tabs-horyzontal .hover-none > li.active > a:focus, .nav-tabs-horyzontal .hover-none > li.active > a:hover {
    background: white;
    color: #36a9e1 !important;
}

.nav-tabs-vertical.nav-tabs-inverse.tabs-icon .nav-tabs > li > a {
    border-radius: 4px 0 0 4px;
    margin-bottom: 2px;
    margin-right: 0;
    padding: 10px 20px;
}
.nav-tabs-vertical.nav-tabs-inverse.tabs-icon ul li a > .icon {
    margin-right: 5px !important;
}
.nav-tabs-inverse .tab-content {
    background: #fff;
    padding: 20px;
}

.nav-tabs > li > a > .icon {
    line-height: 1;
    margin-right: 10px;
}

.nav > li > a .close {
    display: inline-block;
    margin-left: 10px;
    margin-top: 0;
}

.exm-btn {
    margin-bottom: 20px;
}

.panel-group-simple .panel-collapse .panel-body {
    padding-top: 10px;
    padding-right: 0!important;
    padding-left: 0!important;
}

.margin-accroding {
    margin-top: 20px;
}
#according .panel { border-radius:4px 4px 0px 0px; margin-top:1px;}
.margin-accroding .well { border-radius:0px 0px 4px 4px;}

/*.panel-group-continuous .panel-title::after, .panel-group-continuous .panel-title::before { left:30px; right:auto;}*/
.panel-collapse {
    /*padding: 0 15px;*/
    padding:0 15px 0 0;
    /*background: aliceblue;*/
}

.panel-group .panel-collapse .panel-body {
    padding: 15px 17px;
    padding-top: 5px;
}

#accordion .panel + .panel {
    margin-top: 1px;
}
.tab-title-page { padding:0px 0px 20px 0px;}
.active a { cursor:pointer !important;}

.nav-tabs-line>li>a:focus, .nav-tabs-line>li>a:hover {
    background: transparent !important;
    border-color: transparent;
    color:#757575;
}

.tabs-page .nav-tabs > li > a > .icon {
    margin-right: 0px;
}
.accordion-tabs .panel-heading {
    background: #36A9E1;
}
.accordion-tabs .panel-heading .panel-title{
    color: #fff;
}
#accordion1 .panel-title::after, #accordion1 .panel-title::before {
    left: 30px;
    right: auto;
}
.accordion-tabs .panel-title {
    padding: 15px 30px;
}

.tabs-page .panel-group .panel-collapse .panel-body
{
    padding: 15px;
}
.tabs-page .border-top .nav-tabs
{
    border-top: 1px solid #ddd;
}

/*--------------------------------

9.1.13 BADGES & LABELS

--------------------------------*/

.badge.up {margin: 0 -0.5em;border-radius: 15px !important; position: relative; top: -10px; }

.badge { font-size: 10px; padding: 4px 6px 4px;line-height: 10px;}

.btn .badge{
    margin: 0;
}

.badge-radius{
    border-radius: 15px !important;
}
.badge-default{
    background: #e0e0e0;
}
.badge-primary{
    background: #337ab7;
}

.badge-warning{
    background: #ff9800;
}
.badge-dark{
    background: #777;
}
.badge-danger {
    color: #fff;
    background: #f44336;
}
.badge-danger { border-radius:3px;}
.badges{
    margin-top: 20px;
    margin-bottom: 20px;
}
.badges span{
    margin-right: 15px;
}
.badge-lg {
    padding: 8px 9px !important;
    font-size: 16px !important;
}
.badge-sm {
    padding: 2px 5px !important;
    font-size: 10px !important;
}
.badges-buttons button{
    margin-right: 15px;
    margin-bottom: 15px;
}
.lables span{
    margin-right: 16px;
}
.label-dark {
    background: #616161;
}

.label-dark.label-outline {
    color: #616161;
    background: transparent;
    border-color: #616161;
}

.label-default {
    color: #757575;
    background: #e0e0e0;
}

.label-default.label-outline {
    color: #757575;
    background: transparent;
    border-color: #e0e0e0;
}

.label-round{
    border-radius: 15px;
}
.label-outline {
    border: 1px solid transparent;
}

.label-primary.label-outline {
    color: #337ab7;
    background: transparent;
    border-color: #337ab7;
}
.label-success.label-outline {
    color: #4caf50;
    background: transparent;
    border-color: #4caf50;
}
.label-info.label-outline {
    color: #00bcd4;
    background: transparent;
    border-color: #00bcd4;
}
.label-warning.label-outline {
    color: #ff9800;
    background: transparent;
    border-color: #ff9800;
}
.label-danger.label-outline {
    color: #f44336;
    background: transparent;
    border-color: #f44336;
}

.label-lg {
    font-size: 16px;
}
.label-sm {
    padding: .1em .5em .1em;
    font-size: 12px;
}

.badge-avatars .avatar{
    margin-right: 15px;
}

.badge-nav ul li a:hover{
    background: transparent;
    color: #757575;
}

/*--------------------------------

9.1.14 TOOLTIP & POPOVER

--------------------------------*/

.toolt {
    margin-top: 20px;
    margin-bottom: 20px;
}

.tooltip-primary+.tooltip .tooltip-inner {
    color: #fff;
    background: #337ab7 !important;
}
.toolt-buttons .btn, .toolt-buttons .btn-group, .toolt-buttons .btn-group-vertical {
    margin-right: 15px;
    margin-bottom: 20px;
}

.popover-primary+.popover .popover-title {
    color: #fff !important;
    background: #337ab7 !important;
    border-color: #337ab7 !important;
}
.btn-pure.btn-dark {
    color: #616161 !important;
}
.tool-item i{
    color: white !important;
}
.btns-icon{
    padding: 10px;
    font-size: 16px;
    line-height: 1em;
    margin-right: 15px;
    margin-bottom: 20px;
}
.popover-success+.popover .popover-title {
    color: #fff !important;
    background: #4caf50;
    border-color: #4caf50;
}

.popover-warning+.popover .popover-title {
    color: #fff !important;
    background: #ff9800;
    border-color: #ff9800;
}
.popover-danger+.popover .popover-title {
    color: #fff !important;
    background: #f44336;
    border-color: #f44336;
}
.tooltip-success+.tooltip .tooltip-inner {
    color: #fff !important;
    background: #4caf50;
}
.tooltip-primary+.tooltip.left .tooltip-arrow {
    border-left-color: #337ab7;
}
.tooltip-primary+.tooltip.top .tooltip-arrow {
    border-top-color: #337ab7 !important;
}
.tooltip-success+.tooltip.top .tooltip-arrow {
    border-top-color: #4caf50;
}

.tooltip-warning+.tooltip .tooltip-inner {
    color: #fff !important;
    background: #ff9800;
}
.tooltip-warning+.tooltip.top .tooltip-arrow {
    border-top-color: #ff9800;
}
.tooltip-danger+.tooltip .tooltip-inner {
    color: #fff !important;
    background: #f44336;
}
.tooltip-danger+.tooltip.top .tooltip-arrow {
    border-top-color: #f44336;
}

.popover {
    z-index: 999;
}
.tooltip {
    z-index: 999;
}

.webui-popover-content p{
    margin-bottom: 0px;
}

@keyframes tooltip-rotate3d{
    0%{
        opacity:0;
        transform:rotate(15deg);}
    100%{
        opacity:1;
        transform:roate(0);}
}
.tooltip-scale+.tooltip {
    animation: tooltip-scale3d 1s ease 0s forwards;
}
@keyframes tooltip-scale3d{
    0%{
        opacity:0;
        transform: scale3d(.7,.3,1) translate(50%,50%);}
    100%{
        opacity:1;
        transform: scale3d(1,1,1) translate(50%,50%);}
}
.popover-rotate+.popover {
    opacity: 0;
    animation: popover-rotate3d 1s ease .1s forwards;
}
@keyframes popover-rotate3d{
    0%{
        opacity:0;
        transform:rotate(15deg);}
    100%{
        opacity:1;
        transform:roate(0);}
}
.popover-scale+.popover {
    animation: popover-scale3d 1s ease 0s forwards;
}
@keyframes popover-scale3d{
    0%{
        opacity:0;
        transform: scale3d(.7,.3,1) translate(50%,50%);}
    100%{
        opacity:1;
        transform: scale3d(1,1,1) translate(50%,50%);}
}

/*--------------------------------

9.1.15 PROGRESS BARS

--------------------------------*/

.progress-vertical{
    max-height: 300px;
    overflow: hidden;
}

.progress-bar.active .progress-bar { animation: 2s linear 0s normal none infinite running progress-bar-stripes;}
.progress-bar .progress-bar-striped { background: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-size: 40px 40px;}

.progress-bar-dark{
    background: #9e9e9e;
}
.progres-sm {
    height: 4px !important;
    border-radius: 1px !important;
}
.progress {
    height: 15px;
    box-shadow: none;
    border-radius: 3px;
    background: rgba(226, 226, 226, 0.72);
    border-radius: 0;
    margin-bottom:15px;
}
.progres-md{
    height: 10px;
}
.progres-lg {
    height: 22px;
}

.progress-sm {
    height: 15px;
}

.progres-square {
    border-radius: 0;
}
.progres-circle {
    border-radius: 1000px;
}

.prog-buttons{
    display: inline-block;
}

.animatebar {
    position:relative;
    display:block;
    margin-bottom:15px;
    width:100%;
    background:#eee;
    height:30px;
    border-radius:3px;
    transition:0.4s linear;
    transition-property:width, background-color;
}

.animatebar-title {
    position:absolute;
    top:0;
    left:0;
    font-weight:bold;
    font-size:13px;
    color:#fff;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
}

.animatebar-title span {
    display:block;
    background:rgba(0, 0, 0, 0.1);
    padding:0 20px;
    height:30px;
    line-height:30px;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
}

.animatebar-bar {
    height:30px;
    width:0px;
    border-radius:3px;
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 40px 40px;
    border-color: #d43f3a;
    animation: 2s linear 0s normal none infinite running progress-bar-stripes;
}

.animatebar-bar-percent {
    position:absolute;
    right:10px;
    top:0;
    font-size:11px;
    height:30px;
    line-height:30px;
    color:#444;
    color:rgba(0, 0, 0, 0.4);
}



/*----- PROGRESS BAR VERTICAL ------*/

.progres-vertical{
    position: relative;
    display: inline-block;
    width: 4px;
    min-height: 250px;
    margin-right: 30px;
    margin-bottom: 0;
}
.progres-vertical .progress-bar {
    width: 100%;
    position: absolute;
    bottom: 0;
}
.progres-md.progres-vertical {
    width: 10px;
}
.progres-xm.progres-vertical {
    width: 16px;
}
.progres-lg.progres-vertical {
    width: 22px;
}

/*----- PROGRESS BAR CONTEXT ------*/

.contextual-progress .progress-title {
    float: left;
}
.contextual-progress .progress-label {
    position: relative;
    float: right;
}
.contextual-progress .progress {
    height: 2px;
    margin: 15px 0;
}
.progress-bar {
    line-height: 13px;
}

.prog-buttons .btn{
    margin-right: 15px;
}

/*----- PROGRESS BAR PIE ------*/

.pie_progress {
    text-align: center;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 120px;
    float: left;
    margin:15px 0px 25px 0px;
}
.pie_progress svg {
    margin: 0 auto;
}
.pie_progress__content,
.pie_progress__number,
.pie_progress__label,
.pie_progress__icon {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.pie_progress__number {
    font-size: 20px;
}
.pie_progress__label {
    margin-top: 20px;
    font-size: 11px;
}
.pie_progress__svg {
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    vertical-align: middle;
    overflow: hidden;
}
.pie_progress__svg svg {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
}

/*--------------------------------

 9.2 ADVANCE UI
    
    9.2.1 TOUR

--------------------------------*/

.tour-test .popover-title{
    background: #36A9E1;
    color: #fff;
}
.tour.tour-test .arrow:after{
    border-left-color: #36A9E1;
}
.tour-test .popover-title {
    padding: 12px 14px;
    margin: -1px;
    font-size: 20px;
}
.tour-test .popover-content {
    padding: 16px 14px 9px 14px;
}

/*--------------------------------

9.2.2 ANIMATION

--------------------------------*/

/*----- BASIC ANIMETION -----*/

.page-wrap .animation-div {
    cursor: pointer;
    display: inline-block;
}

.animation-div .btn { margin:0px 15px 15px 0px;}

.btn-curl {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    vertical-align: middle;
    color: #FFF;
    cursor: pointer;
    margin-right:10px;
    padding: 7px 20px;
    border:none;
}

/*----START-LEFT-CURL----*/

.left-curl-btn:before {
    background: linear-gradient(135deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
    content: "";
    height: 0;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    transition-duration: 0.3s;
    width: 0;
    z-index: 1000;
}

.left-curl-btn:hover:before, .left-curl-btn:focus:before, .left-curl-btn:active:before {
    height: 25px;
    width: 25px;
}

/*----END-LEFT-CURL----*/

/*----START-RIGHT-CURL----*/

.right-curl-btn:before {
    background: rgba(0, 0, 0, 0) linear-gradient(225deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
    content: "";
    height: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition-duration: 0.3s;
    width: 0;
}
.right-curl-btn:hover:before, .right-curl-btn:focus:before, .right-curl-btn:active::before {
    height: 25px;
    width: 25px;
}

/*----END-RIGHT-CURL----*/

/*----START-RIGHT-BOTTOM-CURL----*/

.right-bottom-curl-btn:before {
    background: rgba(0, 0, 0, 0) linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
    bottom: 0;
    box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
    content: "";
    height: 0;
    position: absolute;
    right: 0;
    transition-duration: 0.3s;
    width: 0;
}
.right-bottom-curl-btn:hover:before, .right-bottom-curl-btn:focus:before, .right-bottom-curl-btn:active::before {
    height: 25px;
    width: 25px;
}

/*----END-RIGHT-BOTTOM-CURL----*/

/*----START-LEFT-BOTTOM-CURL----*/

.left-bottom-curl-btn:before {
    background: rgba(0, 0, 0, 0) linear-gradient(45deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
    bottom: 0;
    box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    transition-duration: 0.3s;
    width: 0;
}
.left-bottom-curl-btn:hover:before, .left-bottom-curl-btn:focus:before, .left-bottom-curl-btn:active::before {
    height: 25px;
    width: 25px;
}

/*----END-LEFT-BOTTOM-CURL----*/

/*----START-SHADOW----*/

.hvr-shadow:hover, .hvr-shadow:focus, .hvr-shadow:active {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
}
.hvr-shadow {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: box-shadow;
    vertical-align: middle;
}

/*----END-SHADOW----*/

/*----START-GROW-SHADOW----*/

.hvr-grow-shadow {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    vertical-align: middle;
}

.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    transform: scale(1.1);
}

/*----END-GROW-SHADOW----*/

/*----START-FLOAT-SHADOW----*/

.hvr-float-shadow::before {
    background: radial-gradient(ellipse at center center , rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
    content: "";
    height: 10px;
    left: 5%;
    opacity: 0;
    position: absolute;
    top: 100%;
    transition-duration: 0.3s;
    width: 90%;
    z-index: -1;
}
.hvr-float-shadow {
    backface-visibility: hidden;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    display: inline-block;
    position: relative;
    transform: translateZ(0px);
    transition-duration: 0.3s;
    transition-property: transform;
}
.hvr-float-shadow:hover::before, .hvr-float-shadow:focus::before, .hvr-float-shadow:active::before {
    opacity: 1;
    transform: translateY(5px);
}
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
    transform: translateY(-5px);
}

/*----END-FLOAT-SHADOW----*/

/*----START-STYLE-LODDED----*/


.loader-wrapper { margin: 0 20px 20px 0;}
.lodding { margin:20px 0px; float: left;width: 100%;}

.loader { 
    float:left;
    margin-right:20px;
    border: 8px solid #f3f3f3;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

.three-color {
    border-top: 8px solid #36a9e1;
    border-right: 8px solid #f0ad4e;
    border-bottom: 8px solid #d9534f;
}

.four-color {
    border-top: 8px solid #36a9e1;
    border-right: 8px solid #f0ad4e;
    border-bottom: 8px solid #d9534f;
    border-left: 8px solid #616161;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*----START-FLASHING-STYLE----*/

/*----START-DOTTED-STYLE----*/

.dotted-round {
    margin:15px 50px 0px 15px;
    position: relative;
    width: 50px;
    height:50px;
    float:left;
}

.dotted-round .wBall {
    position: absolute;
    width: 40px;
    height: 40px;
    opacity: 0;
    transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    -moz-transform: rotate(225deg);
    animation: orbit 6.96s infinite;
    -webkit-animation: orbit 6.96s infinite;
    -moz-animation: orbit 6.96s infinite;
}

.dotted-round .wBall .wInnerBall{
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgb(54,169,225);
    left:0px;
    top:0px;
    border-radius: 10px;
}

.dotted-round #wBall_1 {
    animation-delay: 1.52s;
    -webkit-animation-delay: 1.52s;
    -moz-animation-delay: 1.52s;
}

.dotted-round #wBall_2 {
    animation-delay: 0.3s;
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
}

.dotted-round #wBall_3 {
    animation-delay: 0.61s;
    -webkit-animation-delay: 0.61s;
    -moz-animation-delay: 0.61s;
}

.dotted-round #wBall_4 {
    animation-delay: 0.91s;
    -webkit-animation-delay: 0.91s;
    -moz-animation-delay: 0.91s;
}

.dotted-round #wBall_5 {
    animation-delay: 1.22s;
    -webkit-animation-delay: 1.22s;
    -moz-animation-delay: 1.22s;
}

@keyframes orbit {
    0% {
        opacity: 1;
        z-index:99;
        transform: rotate(180deg);
        animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        transform: rotate(300deg);
        animation-timing-function: linear;
        origin:0%;
    }

    30% {
        opacity: 1;
        transform:rotate(410deg);
        animation-timing-function: ease-in-out;
        origin:7%;
    }

    39% {
        opacity: 1;
        transform: rotate(645deg);
        animation-timing-function: linear;
        origin:30%;
    }

    70% {
        opacity: 1;
        transform: rotate(770deg);
        animation-timing-function: ease-out;
        origin:39%;
    }

    75% {
        opacity: 1;
        transform: rotate(900deg);
        animation-timing-function: ease-out;
        origin:70%;
    }

    76% {
        opacity: 0;
        transform:rotate(900deg);
    }

    100% {
        opacity: 0;
        transform: rotate(900deg);
    }
}

/*----END-DOTTED-STYLE----*/

/*----START-DOTTED-STYLE----*/

#fountainG{
    width:260px;
    position:relative;
    height:28px;
    float:left;
    margin:15px 0px 0px 0px;
}

.example-page{
    display: inline-flex;
}

.fountainG{
    position:absolute;
    top:0;
    background:rgb(0,0,0);
    width:10px;
    height:10px;
    animation-name:bounce_fountainG;
    -webkit-animation-name:bounce_fountainG;
    -moz-animation-name:bounce_fountainG;

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

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

    animation-direction:normal;
    -webkit-animation-direction:normal;
    -moz-animation-direction:normal;

    transform:scale(.3);
    -webkit-transform:scale(.3);
    -moz-transform:scale(.3);

}

#fountainG_1{
    left:0;
    animation-delay:0.6s;
    -webkit-animation-delay:0.6s;
    -moz-animation-delay:0.6s;
}

#fountainG_2{
    left:29px;
    animation-delay:0.75s;
    -webkit-animation-delay:0.75s;
    -moz-animation-delay:0.75s;
}

#fountainG_3{
    left:58px;
    animation-delay:0.9s;
    -webkit-animation-delay:0.9s;
    -moz-animation-delay:0.9s;
}

#fountainG_4{
    left:88px;
    animation-delay:1.05s;
    -webkit-animation-delay:1.05s;
    -moz-animation-delay:1.05s;
}

#fountainG_5{
    left:117px;
    animation-delay:1.2s;
    -webkit-animation-delay:1.2s;
    -moz-animation-delay:1.2s;
}

#fountainG_6{
    left:146px;
    animation-delay:1.35s;
    -webkit-animation-delay:1.35s;
    -moz-animation-delay:1.35s;
}

#fountainG_7{
    left:175px;
    animation-delay:1.5s;
    -webkit-animation-delay:1.5s;
    -moz-animation-delay:1.5s;
}

#fountainG_8{
    left:205px;
    animation-delay:1.64s;
    -webkit-animation-delay:1.64s;
    -moz-animation-delay:1.64s;
}



@keyframes bounce_fountainG{
    0%{
        transform:scale(1);
        background:rgb(54,169,225);
    }

    100%{
        transform:scale(.3);
        background:rgb(255,255,255);
    }
}

/*----END-DOTTED-STYLE----*/

/*----START-BUBBKING-STYLE----*/

.bubblingG {
    text-align: center;
    width:78px;
    height:49px;
    float:left;
    margin:0px 50px 0px 0px;
}

.bubblingG span {
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    margin: 24px auto;
    background: rgb(0,0,0);
    border-radius: 49px;
    -webkit-border-radius: 49px;
    -moz-border-radius: 49px;
    animation: bubblingG 1.5s infinite alternate;
    -webkit-animation: bubblingG 1.5s infinite alternate;
    -moz-animation: bubblingG 1.5s infinite alternate;
}

#bubblingG_1 {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
}

#bubblingG_2 {
    animation-delay: 0.45s;
    -webkit-animation-delay: 0.45s;
    -moz-animation-delay: 0.45s;
}

#bubblingG_3 {
    animation-delay: 0.9s;
    -webkit-animation-delay: 0.9s;
    -moz-animation-delay: 0.9s;
}



@keyframes bubblingG {
    0% {
        width: 10px;
        height: 10px;
        background:rgb(54,169,225);
        transform: translateY(0);
    }

    100% {
        width: 23px;
        height: 23px;
        background:rgb(255,255,255);
        transform: translateY(-20px);
    }
}

/*----END-BUBBKING-STYLE----*/

/*----START-FLOAT-CIRCLE-STYLE----*/

#floatingCirclesG{
    position:relative;
    width:74px;
    height:74px;
    float:left;
    transform:scale(0.6);
    margin:0px 50px 0px 0px;
    -webkit-transform:scale(0.6);
    -moz-transform:scale(0.6);
}

.f_circleG{
    position:absolute;
    background:rgb(255,255,255);
    height:13px;
    width:13px;
    border-radius:7px;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    animation-name:f_fadeG;
    -webkit-animation-name:f_fadeG;
    -moz-animation-name:f_fadeG;
    animation-duration:1.2s;
    -webkit-animation-duration:1.2s;
    -moz-animation-duration:1.2s;
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
    -moz-animation-iteration-count:infinite;
    animation-direction:normal;
    -webkit-animation-direction:normal;
    -moz-animation-direction:normal;
}

#frotateG_01{
    left:0;
    top:30px;
    animation-delay:0.45s;
    -webkit-animation-delay:0.45s;
    -moz-animation-delay:0.45s;
}

#frotateG_02{
    left:9px;
    top:9px;
    animation-delay:0.6s;
    -webkit-animation-delay:0.6s;
    -moz-animation-delay:0.6s;
}

#frotateG_03{
    left:30px;
    top:0;
    animation-delay:0.75s;
    -webkit-animation-delay:0.75s;
    -moz-animation-delay:0.75s;
}

#frotateG_04{
    right:9px;
    top:9px;
    animation-delay:0.9s;
    -webkit-animation-delay:0.9s;
    -moz-animation-delay:0.9s;
}

#frotateG_05{
    right:0;
    top:30px;
    animation-delay:1.05s;
    -webkit-animation-delay:1.05s;
    -moz-animation-delay:1.05s;
}

#frotateG_06{
    right:9px;
    bottom:9px;
    animation-delay:1.2s;
    -webkit-animation-delay:1.2s;
    -moz-animation-delay:1.2s;
}

#frotateG_07{
    left:30px;
    bottom:0;
    animation-delay:1.35s;
    -webkit-animation-delay:1.35s;
    -moz-animation-delay:1.35s;
}

#frotateG_08{
    left:9px;
    bottom:9px;
    animation-delay:1.5s;
    -webkit-animation-delay:1.5s;
    -moz-animation-delay:1.5s;
}

@keyframes f_fadeG{
    0%{
        background:rgb(54,169,225);
    }

    100%{
        background:rgb(255,255,255);
    }
}

/*----END-FLOAT-CIRCLE-STYLE----*/

/*----END-FLASHINF-STYLE----*/

/*----END-STYLE-LODDED----*/

/*----START-ANIMATION-BOX----*/

.box-title { padding-left:0px;}
.text-box { color:#FFF !important;}

.panel-primary-box { background: rgba(51, 122, 183, 0.7); border-radius: 0 0 3px 3px; color: #fff;}
.panel-primary-box code { background: rgba(51, 122, 183, 1); color:#FFF !important;}
.panel-green-box { background: rgba(92, 184, 92, 0.7); border-radius: 0 0 3px 3px; color: #fff;}
.panel-green-box code { background: rgba(92, 184, 92, 1); color:#FFF !important;}
.panel-dark-box { background: rgba(88, 185, 232, 0.7); border-radius: 0 0 3px 3px; color: #fff;}
.panel-dark-box code { background: rgba(54, 169, 225, 1); color:#FFF !important;}
.panel-success-box { background: rgba(240, 173, 78, 0.7); border-radius: 0 0 3px 3px; color: #fff;}
.panel-success-box code { background: rgba(240, 173, 78, 1); color:#FFF !important;}
.panel-info-box { background: rgba(217, 83, 79, 0.7); border-radius: 0 0 3px 3px; color: #fff;}
.panel-info-box code { background: rgba(217, 83, 79, 1); color:#FFF !important;}
.panel-warning-box { background: rgba(97, 97, 97, 0.7); border-radius: 0 0 3px 3px; color: #fff;}
.panel-warning-box code { background: rgba(97, 97, 97, 1); color:#FFF !important;}
.border-animation { border:none !important;}
.contain-animation { padding:0px;}


/*--------------------------------

9.2.3 HIGHLIGHT

--------------------------------*/

.html-section { border:1px solid #e8eaf6; padding:15px; overflow:hidden;}
.marun-color { color:#88f;}
.black-color { color:#000;}
.green-color { color:#63a35c;}
.orange-color { color:#df5000;}
.gray-color { color:#999;}
.blue-color { color:#0086b3;}
.red-color { color:#a71d5d;}
.light-red-color { color:red;}
code { border:none !important;}


/*--------------------------------

9.2.4 MASONRY

--------------------------------*/

#myContent {
    -moz-column-count: 4;
    -moz-column-gap: 0px;
    -webkit-column-count: 4;
    -webkit-column-gap: 0px;
    column-count: 4;
    column-gap: 0px;
    width: 1480px;
    padding:0px;
}

.page-masonry { padding-top:40px; padding-bottom:15px;}
.masonry-box { display: inline-block; margin:0px 15px 30px 15px; box-shadow: 0 2px 11px #ccc;}

.image-masonry img { width: 100%;}
.bottom-masonry { padding: 30px 25px;}
.title-masonry {
    float: left;
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
}
.left-masonry { font-size:14px;}
.des-text-masonry {
    color: #666;
    clear: both;
}
.commnet-text-masonry { padding-bottom:10px;clear: both;}
.left-masonry a { color:#999;font-size: 13px;}
.left-masonry a:hover { color:#36a9e1; text-decoration:underline;}
.name-masonry { padding-left:5px;}
.right-masonry { float:right;}
.right-masonry a { float:right;}
.icon-fav { padding-right: 4px;}
.masonry-box:last-child { margin-bottom:0px;}

a.name-masonry:last-child:after{
    display: none;
}

.image-masonry {
    padding: 3px;
}
a.name-masonry::after {
    position: relative;
    left: 5px;
    top: 0;
    width: 1px;
    height: 100%;
    content: "/";
}

/*--------------------------------

9.2.5 TOASTR

--------------------------------*/

.page-toastr{
    position:static!important;
}
.page-toastr.padding-0{
    margin-bottom:30px
}
.page-toastr>div{
    width:100% !important;
}
.toastr-wrap .btn{
    margin-right: 15px;
    margin-bottom: 20px;
}

.toast-info{
    background:#36A9E1;
}
.sweet-height{
    height: 350px;
}

/*--------------------------------

 9.3 ELEMENTS
    
    9.3.1 ALERT

--------------------------------*/

.alert-page .close{
    line-height: inherit;
}

.alerts
{
    margin-bottom: 0px;
}
.alert-box { position:relative;}
.style-alert { width:93%;}
.style-alert:before {
    border-image: none;
    border-style: solid;
    border-width: 29px 25px 27px 15px;
    content: "";
    display: block;
    height: 0;
    right: 0;
    position: absolute;
    top: 0;
    width: 0;	
}
.primary-border-color:before { border-color: #337ab7 transparent #337ab7 #337ab7;}

.sucess-border-color:before { border-color: #5cb85c transparent #5cb85c #5cb85c;}
.danger-border-color:before { border-color: #d9534f transparent #d9534f #d9534f;}
.warning-border-color:before { border-color: #f0ad4e transparent #f0ad4e #f0ad4e;}
.dark-border-color:before { border-color: #616161 transparent #616161 #616161;}
.dark.btn-info:hover { background:#36a9e1;}
.alert { line-height:24px;}
.alert-dark { background: rgba(97, 97, 97, 0.2);
              border-color: #CECED0;
              color: #616161;}
.icon-alert { position:absolute; left:0; /*background:#36a9e1;*/ color:#FFF; border-radius:3px;}
.alert-icon-box  { width:97%; float:right; background:none !important; border-color:#36a9e1;}
.social-alert-box { width:100%;}
.social-alert-box i { font-size:20px; position:absolute; right:40px; margin-top:3px;}

.alert-page .panel-title
{
    text-transform: uppercase;
    font-size: 11.5px;
    font-weight: 400;
    padding: 15px 0px;
}
.alert-primary
{
    color: #3f51b5;
    background: rgba(197,202,233,.8);
    border-color: #c5cae9;
}
.alert-page .icon
{
    padding: 0px 10px 5px 5px;
}
.button-danger
{
    margin-right: 14px;
    margin-left: 33px;
}
.margin-top-17
{
    margin-top: 17px !important;
}
.btn-link
{
    color: #6d6767 !important;
}
.btn-secondary
{
    background: white;
    color: #4d4f54;
    margin-right: 12px;
}
.color-white
{
    color: white !important;
}
.alert-image
{
    text-align:right;
    margin-right: 5px;
    float:right;
}
.alert-image img
{
    width: 25px;
    height: auto;
    border-radius: 3px;
}
.alert-position
{
    margin-right: 10px;
    position: absolute;
    right:40px;
    text-align:right;
}
.alert-position img
{
    width: 30px;
    height: auto;
    border-radius: 3px;
}
.alert-link-color
{
    color: #46361c !important;
}
.alert-link-color:hover
{
    text-decoration: underline;
}
.alert p .alert-link-color
{
    cursor:pointer;
    color: #fdfbf9 !important;
}
.alert ul
{
    padding: 0px 0px 0px 18px;
}
.border-primary
{
    border: 1px groove #1F37C6;
}
.border-info
{
    border: 1px solid transparent !important;
    border: none;
    background: rgba(236, 236, 236, 0.8);
    border-color: #ccc !important
}
.border-info a
{
    color: #36a9e1;
}
.border-success
{    
    border: 1px solid transparent !important;
    border: none;
    background: rgba(236, 236, 236, 0.8);
    border-color: #4caf50 !important;
    color: #76838f;
}
.border-success a
{
    color: #3c763d;
}
.border-danger
{
    border: 1px solid transparent !important;
    border: none;
    background: rgba(236, 236, 236, 0.8);
    border-color: #f44336 !important;
    color: #76838f;
}
.border-danger a
{
    color: #a94442;
}
.border-warning
{
    border: 1px solid transparent !important;
    border: none;
    background: rgba(236, 236, 236, 0.8);
    border-color: #ff9800 !important;
    color: #76838f;
}
.border-warning a
{
    color: #8a6d3b;
}
.alt-primary
{
    border-left: 6px solid #1f5889 !important;
}
.alt-primary a
{
    color: white;
}

.alt-info a
{
    color: white;
}
.alt-success
{
    border-left: 6px solid #337933 !important;
}
.alt-success a
{
    color: white;
}
.alt-danger
{
    border-left: 6px solid #9d312e !important;
}
.alt-danger a
{
    color: white;
}
.alt-warning
{
    border-left: 6px solid #dc8606 !important;
}
.alt-warning a
{
    color: white;   
}
.ico
{
    font-size: 30px;
}
.twitter-alert
{
    color: #fff;
    background: #55acee;
    border-color: #55acee;  
}

/*----- ALERT DARK -----*/

.alert.dark.alert-dismissible.alert-alt .close
{
    color:#fff;
}
.alert.dark.alert-dismissible.alert-alt .close:focus,.alert.dark.alert-dismissible.alert-alt .close:hover
{
    color:#fff;
}
.alert.dark.alert-primary
{
    color:#fff;
    background:#337ab7;
    border-color:#337ab7;
}

.alert.dark.alert-primary .alert-link
{
    color:#e6e6e6;
}
.alert.dark.alert-primary .close
{
    color:#fff;
}
.alert.dark.alert-primary .close:focus,.alert.dark.alert-primary .close:hover
{
    color:#fff;
}
.alert-alt.alert.dark.alert-primary
{
    border-color:#263172;
}
.alert-alt.alert.dark.alert-primary .alert-link,.alert-alt.alert.dark.alert-primary a
{
    color:#fff;
}

/*----- ALERT ALT SUCCESS -----*/

.alert.dark.alert-success
{
    color:#fff;
    background:#5cb85c;
    border-color:#5cb85c;
}

.alert.dark.alert-success .alert-link
{
    color:#e6e6e6;
}
.alert.dark.alert-success .close
{
    color:#fff;
}
.alert.dark.alert-success .close:focus,.alert.dark.alert-success .close:hover
{
    color:#fff;
}
.alert-alt.alert.dark.alert-success
{
    border-color:#2c6a2f;
}
.alert-alt.alert.dark.alert-success .alert-link,.alert-alt.alert.dark.alert-success a
{
    color:#fff;
}

/*----- ALERT ALT INFO -----*/

.alert.dark.alert-info
{
    color:#fff;
    background: #36A9E1;
    border-color: #36A9E1;
}
.alert.dark.alert-info hr
{
    border-top-color:#00a5bb;
}
.alert.dark.alert-info .alert-link
{
    color:#e6e6e6;
}
.alert.dark.alert-info .close
{
    color:#fff;
}
.alert.dark.alert-info .close:focus,.alert.dark.alert-info .close:hover
{
    color:#fff;
}
.alert-alt.alert.dark.alert-info
{
    border-color:#006875;
}
.alert-alt.alert.dark.alert-info .alert-link,.alert-alt.alert.dark.alert-info a
{
    color:#fff;
}

/*----- ALERT ALT DARK -----*/

.alert.dark.alert-warning
{
    color:#fff;
    background:#f0ad4e;
    border-color:#f0ad4e;
}

.alert.dark.alert-warning .alert-link
{
    color:#e6e6e6;
}
.alert.dark.alert-warning .close
{
    color:#fff;
}
.alert.dark.alert-warning .close:focus,.alert.dark.alert-warning .close:hover
{
    color:#fff;
}
.alert-alt.alert.dark.alert-warning
{
    border-color:#af6100;
}
.alert-alt.alert.dark.alert-warning .alert-link,.alert-alt.alert.dark.alert-warning a
{
    color:#fff;
}

/*----- ALERT ALT DANGER -----*/

.alert.dark.alert-danger
{
    color:#fff;
    background:#d9534f;
    border-color:#d9534f;
}

.alert.dark.alert-danger .alert-link
{
    color:#e6e6e6;
}
.alert.dark.alert-danger .close
{
    color:#fff;
}
.alert.dark.alert-danger .close:focus,.alert.dark.alert-danger .close:hover
{
    color:#fff;
}
.alert-alt.alert.dark.alert-danger
{
    border-color:#b61b17;
}
.alert-alt.alert.dark.alert-danger .alert-link,.alert-alt.alert.dark.alert-danger a
{
    color:#fff;
}

/*----- ALERT DARK -----*/

.alert.dark.alert-dark
{
    color:#fff;
    background:#616161;
    border-color:#616161;
}
.alert.dark.alert-dark hr
{
    border-top-color:#f32c1e;
}
.alert.dark.alert-dark .alert-link
{
    color:#e6e6e6;
}
.alert.dark.alert-dark .close
{
    color:#fff;
}
.alert.dark.alert-dark .close:focus,.alert.dark.alert-dark .close:hover
{
    color:#fff;
}
.alert-alt.alert.dark.alert-dark
{
    border-color:#b61b17;
}
.alert-alt.alert.dark.alert-dark .alert-link,.alert-alt.alert.dark.alert-dark a
{
    color:#fff;
}

.alert-image-left {
    text-align: right;
    margin-right: 4px;
    float: left;
}
.alert-primary .alt-alerts{
    color: #337ab7;
}
.alert-info .alt-alerts{
    color: #36A9E1;
}
.alert-success .alt-alerts{
    color: #5cb85c;
}
.alert-danger .alt-alerts{
    color: #d9534f;
}
.alert-warning .alt-alerts{
    color: #f0ad4e;
}
.overflow-hidden{
    overflow: hidden;
}

/*--------------------------------

9.3.2 RIBBON

--------------------------------*/

/*---- RIBBON GLOBAL ----*/

.ribbon-box { background:#e6f1f6; z-index: 1; padding:20px 25px 40px; border:1px solid #ddd; border-radius:3px; position:relative; margin-bottom:5px;}
.ribbon-box-top{
    padding: 50px 30px 10px 30px;
}

.ribbon-box-bottom{
    top: initial !important;
    bottom: 0;
}

.left-side-ribbon{
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    color: #fff;
    bottom: 5px;
    text-align: center;
    transition: line-height 0.5s;
    line-height: 35px;
    background: #555555;
    padding: 0px 10px 0px 10px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.left-side-ribbon:before {
    content: "";
    position: absolute;
    border-style: solid;
    top: 10px;
    z-index: -10;
    border-color: #555555 #555555 #555555 transparent;
    left: -30px;
    border-width: 15px;
}
.right-ribbon{
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    color: #fff;
    bottom: 5px;
    text-align: center;
    transition: line-height 0.5s;
    line-height: 35px;
    padding: 0px 10px 0px 10px;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.right-ribbon:after {
    content: "";
    position: absolute;
    border-style: solid;
    top: 10px;
    z-index: -10;
    height: 0;
    width: 0;
    right: -30px;
    border-width: 15px;
}

.ribbon-big-box { padding:20px 30px 40px 30px;}
.ribbon { text-align:center;}
.btn-warning .ribbon-button { background:#f0ad4e; border-radius:3px; border-top-left-radius: 0px !important;}
.btn-success .ribbon-button { background:#5cb85c; border-radius:3px; border-top-right-radius: 0px;}
.ribbon .ribbon-button { position:absolute; bottom:10px; left:-5px; border-radius:3px; color:#FFF; padding: 4px 20px;}
.btn-primary .ribbon-button { background:#337ab7; border-radius:3px;}
.btn-danger .ribbon-button { background:#d9534f; border-radius:3px;}

.ribbon-vertical .ribbon-button { height:60px; width:30px; left:10px; bottom:-5px; padding:15px 0px;}


/*---- PURE RIBBON ----*/

.pure-ribbon{
    position: absolute;
    top: 0;
    right: 1em;
    z-index: 1;
    color: #eee;
    font-size: 22px;
    width: 1.5em;
    line-height: 0.5em;
    -webkit-transition: line-height 0.5s;
    transition: line-height 0.5s;
}
.pure-ribbon:after {
    content: "";
    font-size: 0.5em;
    position: absolute;
    height: 50px;
    z-index: -1;
    top: -1em;
    border-top-width: 1.5em;
    border-bottom-color: transparent !important;
    -webkit-transition: height 0.5s;
    transition: height 0.5s;
    border-top-right-radius: 3px;
}

.pure-ribbon:after{
    right: 8px;
}

.pure-ribbon-left{
    right: inherit !important;
}

.pure-ribbon-left:after{
    left: 0;
}

.pure-ribbon-left:after {
    border-top-left-radius: 3px !important;
    border-top-right-radius: 0px !important;
}


.pure-ribbon:before {
    content: "";
    font-size: 0.5em;
    position: absolute;
    border-style: solid;
    top: -1em;
    right: 40px;
    border-width: 0 0 1em 0.7em;
    z-index: -1;
}

.ribbon-box .pure-ribbon-left+p{
    text-align: left !important;
}

.pure-ribbon-left:before {
    transform: rotate(90deg);
    left: 30px;
    top: -9px !important;
    border-width: 0 0 0.7em 1em !important;
}

/*---- PURE RIBBON WITH COLOR ----*/

.pure-ribbon-warning:after {
    border: 1.5em solid #f0ad4e;
}
.pure-ribbon-warning:before {
    border-color: transparent transparent #f0ad4e transparent;
}
.pure-ribbon-danger:after{
    border: 1.5em solid #d9534f;
}
.pure-ribbon-danger:before{
    border-color: transparent transparent #d9534f transparent;
}
.pure-ribbon-primary:after{
    border: 1.5em solid #337ab7;
}
.pure-ribbon-primary:before{
    border-color: transparent transparent #337ab7 transparent;
}
.pure-ribbon-success:after{
    border: 1.5em solid #5cb85c;
}
.pure-ribbon-success:before{
    border-color: transparent transparent #5cb85c transparent;
}
.pure-ribbon-gray:after{
    border: 1.5em solid #555;
}
.pure-ribbon-gray:before{
    border-color: transparent transparent #555 transparent;
}

/*---- FLAT RIBBON ----*/

.flat-ribbon{
    position: absolute;
    top: 0;
    right: 0em;
    color: #fff;
    width: 100%;
    text-align: center;
    transition: line-height 0.5s;
    line-height: 35px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.flat-ribbon:before {
    content: "";
    position: absolute;
    border-style: solid;
    top: 10px;
    z-index: -10;
    left: -30px;
    border-width: 15px;
}
.flat-ribbon:after {
    content: "";
    position: absolute;
    border-style: solid;
    top: 10px;
    z-index: -10;
    height: 0;
    width: 0;
    right: -30px;
    border-width: 15px;
}
.flat-ribbon-margin{
    margin: 0 30px 20px 30px !important;
}

.side-border .ribbon-box{
    margin: 0 30px 20px;
}

/*---- FLAT RIBBON WITH COLOR ----*/

.flat-ribbon-gray{
    background: #555555;   
}
.flat-ribbon-gray:before{
    border-color: #555555 #555555 #555555 transparent;
}
.flat-ribbon-gray:after{
    border-color: #555555 transparent #555555 #555555;
}
.flat-ribbon-success{
    background: #5cb85c;   
}
.flat-ribbon-success:before{
    border-color: #5cb85c #5cb85c #5cb85c transparent;
}
.flat-ribbon-success:after{
    border-color: #5cb85c transparent #5cb85c #5cb85c;
}
.flat-ribbon-primary{
    background: #337ab7;   
}
.flat-ribbon-primary:before{
    border-color: #337ab7 #337ab7 #337ab7 transparent;
}
.flat-ribbon-primary:after{
    border-color: #337ab7 transparent #337ab7 #337ab7;
}
.flat-ribbon-warning{
    background: #f0ad4e;   
}
.flat-ribbon-warning:before{
    border-color: #f0ad4e #f0ad4e #f0ad4e transparent;
}
.flat-ribbon-warning:after{
    border-color: #f0ad4e transparent #f0ad4e #f0ad4e;
}
.flat-ribbon-danger{
    background: #d9534f;   
}
.flat-ribbon-danger:before{
    border-color: #d9534f #d9534f #d9534f transparent;
}
.flat-ribbon-danger:after{
    border-color: #d9534f transparent #d9534f #d9534f;
}

.ribbon-top{
    bottom: initial !important;
    top: 5px;
}

/*---- BADGE RIBBON ----*/

.side-ribbon-danger{
    background: #d9534f;
}
.side-ribbon-danger:before{
    border-color: #d9534f #d9534f #d9534f transparent;
}
.side-ribbon-warning{
    background: #f0ad4e;
}
.side-ribbon-warning:after{
    border-color: #f0ad4e transparent #f0ad4e #f0ad4e;
}

.inner-success{
    background: #5cb85c !important;
}
.inner-warning{
    background: #f0ad4e !important;
}
.inner-danger{
    background: #d9534f !important;
}
.inner-primary{
    background: #337ab7 !important;
}

/*---- CORNER RIBBON ----*/

.corner-success:before{
    border-color: #5cb85c transparent transparent transparent !important;
    border-right-color: #5cb85c !important;
}
.corner-warning:before{
    border-color: transparent transparent transparent #f0ad4e !important;
    border-bottom-color: #f0ad4e !important;
}
.corner-danger:before{
    border-bottom-color: #d9534f !important;
    border-right-color: #d9534f !important;
}
.top-left-corner{
    position: relative;
    left: 10px;
    top: 5px;
}
.bottom-left-corner{
    position: relative;
    left: 10px;
}
.top-right-corner{
    position: relative;
    right: 10px;
    top: 5px;
}
.bottom-right-corner{
    position: relative;
    right: 10px; 
}

/*---- ANIMATION RIBBON ----*/

.animation-box{
    padding: 70px 20px;
}
.global-math {
    width: 70px;
    position: absolute;
    height: 75px;
    top: 50%;
    left: 50%;
    margin-top: -37.5px;
    margin-left: -35px;
}
.global-math .top-math {
    width: 53px;
    height: 20px;
    left: 12px;
    transform: skew(-15deg, 0);
    z-index: 100;
}
.global-math .mask {
    position: absolute;
    border-radius: 2px;
    overflow: hidden;
    perspective: 1000;
    backface-visibility: hidden;
}
.global-math .top-math .plane {
    z-index: 2000;
    animation: strip-top 1.3s ease-in infinite 0s backwards;
}
.global-math .plane {
    width: 400%;
    height: 100%;
    position: absolute;
    transform: translate3d(0px, 0, 0);
    z-index: 100;
    perspective: 1000;
    backface-visibility: hidden;
}
.global-math .middle-top-math {
    width: 33px;
    height: 20px;
    top: 15px;
    left: 12px;
    transform: skew(-15deg, 40deg);
}
.global-math .middle-top-math .plane {
    transform: translate3d(0px, 0, 0);
    background: #54b9ea;
    animation: strip-middle-top 1.3s linear infinite 0.3s backwards;
}
.global-math .middle-down-math {
    width: 43px;
    height: 19px;
    top: 43px;
    left: 2px;
    transform: skew(-12deg, -32deg);
}
.global-math .middle-down-math .plane {
    transform: translate3d(0px, 0, 0);
    background: #54b9ea;
    animation: strip-middle-bottom 1.3s linear infinite 0.7s backwards;
}
.global-math .bottom-math {
    width: 53px;
    height: 20px;
    top: 55.5px;
    left: 2px;
    transform: skew(-15deg, 0);
}
.global-math .bottom-math .plane {
    z-index: 2000;
    animation: strip-bottom 1.3s ease-out infinite 0.95s backwards;
}

@keyframes strip-top {
    from {
        transform: translate3d(53px, 0, 0);
    }
    to {
        transform: translate3d(-250px, 0, 0);
    }
}
@keyframes strip-middle-top {
    from {
        transform: translate3d(-160px, 0, 0);
    }
    to {
        transform: translate3d(53px, 0, 0);
    }
}
@keyframes strip-middle-bottom {
    from {
        transform: translate3d(53px, 0, 0);
    }
    to {
        transform: translate3d(-220px, 0, 0);
    }
}
@keyframes strip-bottom {
    from {
        transform: translate3d(-220px, 0, 0);
    }
    to {
        transform: translate3d(53px, 0, 0);
    }
}

.global-math .middle-top-math .plane-info {
    background: #54b9ea;
}
.global-math .middle-down-math .plane-info {
    background: #54b9ea;
}
.global-math .plane-success {
    background: #5cb85c;
}
.global-math .middle-top-math .plane-success {
    background: #78c578;
}
.global-math .middle-down-math .plane-success {
    background: #78c578;
}
.global-math .plane-danger {
    background: #d9534f;
}
.global-math .middle-top-math .plane-danger {
    background: #ec7773;
}
.global-math .middle-down-math .plane-danger {
    background: #ec7773;
}

/*---- CLIP RIBBON ----*/

.contain-ribbon { padding-bottom:0px;}

.ribbon-reverse .ribbon-button { right:-5px; left:auto;}
.ribbon-reverse .right-ribbon { right:10px; bottom:-5px;}
.ribbon-bottom-box { padding:50px 30px 10px 30px;}

.ribbon-clip .ribbon-button { left:-15px; bottom:15px;}
.ribbon-clip .ribbon-button:after {
    border-color: #f0ad4e #f0ad4e transparent transparent;
    border-image: none;
    border-style: solid;
    border-width: 7px;
    bottom: -13px;
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    width: 0;
}
.ribbon-reverse.ribbon-clip .ribbon-button { left:auto; right:-15px;}
.ribbon-reverse.ribbon-clip .ribbon-button:after {  border-left-color: #5cb85c;
                                                    border-right-color: transparent;border-top-color: #5cb85c;
                                                    left: auto;
                                                    right: 0;}
.ribbon-top .ribbon-button { top:15px; bottom:auto;}
.ribbon-clip.ribbon-top .ribbon-button:after {     border-bottom-color: #337ab7;
                                                   border-right-color: #337ab7;
                                                   border-top-color: transparent; 
                                                   bottom: auto;
                                                   top: -13px;}
.ribbon-top.ribbon-reverse .ribbon-button:after {
    border-right-color: transparent;
    border-top-color: transparent;
    bottom: auto;
    top: -12px;
}


.ribbon-badge {
    left: -2px;
    overflow: hidden;
    top: -2px;
}
.ribbon-last-box {
    background: transparent;
    height: 150px;
    left: -3px;
    position: absolute;
    text-align: center;
    top: -3px;
    width: 150px;
}

.ribbon-primary .ribbon-inner:after {
    border-right-color: #3949ab;
    border-top-color: #3949ab;
}
.ribbon-primary .ribbon-inner {
    background: #3f51b5;
}
.ribbon-badge .ribbon-inner {
    left: -40px;
    transform: rotate(-45deg);
    width: 100%;
}
.ribbon-inner {
    color: #fff;
    display: inline-block;
    height: 30px;
    left: 0;
    line-height: 30px;
    padding-left: 20px;
    padding-right: 20px;
    position: absolute;
    top: 16px;
}
.ribbon-badge.ribbon-reverse  { left: auto;
                                right: -2px;}
.ribbon-badge.ribbon-reverse .ribbon-inner {  left: auto;
                                              right: -40px;
                                              transform: rotate(45deg);}
.ribbon-badge.ribbon-bottom  { bottom: -2px;
                               top: auto;}
.ribbon-badge.ribbon-bottom .ribbon-inner {  bottom: 16px;
                                             top: auto;
                                             transform: rotate(45deg);}

.ribbon-reverse.ribbon-bottom .ribbon-inner {   transform: rotate(-45deg);}
.badge-box { padding:50px 20px 10px 50px; margin-bottom:35px;}

.ribbon-corner  { top:0; left:0;}
.heart-corner { position:relative; left:13px;}
.ribbon-corner .ribbon-inner { top:0px; background:none; padding:0px; text-align:center;}
.ribbon-corner .ribbon-inner:before {
    border-image: none;
    border-style: solid;
    border-width: 30px;
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    top: 0;
    width: 0;
}
.ribbon-corner.ribbon-reverse { left: auto; width:auto;
                                right: 15px;}
.ribbon-corner.ribbon-reverse .ribbon-inner:before {   
    border-left-color: transparent;                                              
    left: auto;                                              
    right: 0;
}
.ribbon-corner.ribbon-bottom { bottom:30px; height:auto;
                               top: auto;}
.ribbon-corner.ribbon-bottom .ribbon-inner:before {
    border-top-color: transparent;
    bottom: 0;
    top: auto;
}

.ribbon-corner.ribbon-info { right:15px; left:auto; width:auto;}
.ribbon-corner.ribbon-info .ribbon-inner:before { 
    border-left-color: transparent;
    left: auto;
    right: 0;
    border-top-color: transparent;
}
.last-box-ribbon { padding-bottom:30px;}


/*--------------------------------

9.3.3 PRICING TABLE

--------------------------------*/

/*----- NORMAL PRICING TABLE -----*/
.pricing-contain-section {
    float: right;
    width: 85%;
    background: #eee;
    border: 1px solid #e0e0e0;
}
.pricing-right-title {
    float: right;
    width: 15%;
    position: relative;
    overflow: hidden;
    height: 371px;
    color: #FFF;
}
.pricing-right-title:focus, .pricing-right-title:hover {
    color: #fff;
}
.pricing-title-text .original-text {
    transform: rotate(-90deg) translateY(0%);
    transition: all 0.5s ease 0s;
    width: 276px;
}
.pricing-title-text p {
    bottom: 40px;
    font-size: 18px;
    left: 72%;
    letter-spacing: 2px;
    line-height: 25px;
    position: absolute;
    transform-origin: 0 100% 0;
}
.price-column-four .pricing-title-text .hover-text {
    letter-spacing: 3px;
    opacity: 0;
    transform: rotate(-90deg) translateY(-150%);
    transition: all 0.5s ease 0s;
    width: 276px;
}
.price-column-four:hover .pricing-title-text .hover-text {
    -moz-transform: rotate(-90deg) translateY(0%);
    -webkit-transform: rotate(-90deg) translateY(0%);
    -o-transform: rotate(-90deg) translateY(0%);
    -ms-transform: rotate(-90deg) translateY(0%);
    transform: rotate(-90deg) translateY(0%);
    opacity: 1;
}
.price-column-four:hover .pricing-title-text .original-text {
    -moz-transform: rotate(-90deg) translateY(150%);
    -webkit-transform: rotate(-90deg) translateY(150%);
    -o-transform: rotate(-90deg) translateY(150%);
    -ms-transform: rotate(-90deg) translateY(150%);
    transform: rotate(-90deg) translateY(150%);
    opacity: 0;
}
.price-column-four:hover .price-title {
    margin-left: 8px;
    transition: all .3s ease;
}
.bg-in-head, 
.price-table,
.bg-in-title { 
    padding-top:20px;

}
.price-table {
    text-align: center;
}

.price-table [class*=price-column] {
    background: #eee;
}

.price-table .price-header {
    padding-bottom: 24px;
    margin: 0px 0px 25px;
    border-bottom: 1px solid #e0e0e0;
}
.price-table .price-price {
    font-size: 48px;
}
.price-table .price-currency {
    display: inline-block;
    margin-top: 10px;
    margin-right: -10px;
    font-size: 20px;
    vertical-align: top;
}
.price-table .price-period {
    font-size: 16px;
}
.price-table .price-title {
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.price-table .price-features {
    padding: 0;
    margin: 0;
}
.price-table .price-features li {
    display: block;
    margin-bottom: 20px;
    font-size: 14px;
    list-style: none;
}
.price-table .price-footer {
    margin: 25px 30px;
}

.blue-a300
{
    color: #2979ff!important
}
.teal-a400
{
    color: #00bfa5!important;
}
.purple-300
{
    color: #ba68c8!important;
}

.pricing-table .breadcrumb
{
    background: transparent;
}
.pricing-table .icon
{
    vertical-align: middle;
}
.pricing-table .price-footer .btn
{
    white-space: normal !important;
}

.bg-in-title .price-list .price-features:after{
    position: absolute;
    display: inline-flex;
    width: 14px;
    height: 14px;
    content: '';
    transform: rotate(45deg);
    background: #eee;
    margin-top: -7px;
}
/*----- BACKGROUND PRICING TABLE -----*/
.price-header{
    border-radius: 50px 0px 0px 0px;
}
.price-list {
    text-align: center;
    border-radius: 3px;
    -webkit-box-shadow: 0 2px 8px 1px rgba(0,0,0,.2);
    box-shadow: 0 2px 8px 1px rgba(0,0,0,.2);
}

.price-list .price-title {
    padding:  0px 15px 15px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 3px 3px 0 0;
    padding-top: 20px;
}
.bg-in-title .price-list .price-title:before
{
    position: relative;
    display: block;
    width: 14px;
    height: 14px;
    content: '';
    top: 42px;
    /*    left: 50px;*/
    transform: rotate(45deg);
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}
.bg-in-title .price-list .price-title.bg-grey-600:before
{
    background: #757575;
}
.bg-in-title .price-list .price-title.bg-blue-a300:before
{
    background: #2979ff;
}
.bg-in-title .price-list .price-title.bg-teal-a400:before
{
    background: #00bfa5;
}
.bg-in-title .price-list .price-title.bg-purple-300:before
{
    background: #ba68c8;
}

.price-round
{   
    display: table;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
}
.price-in-round
{

    display: table-cell;
    vertical-align: middle;
    color: #f1f1f1;
    font-size: 28px;
}

.price-title-round
{
    padding-top: 15px;
}
.price-list .price-price {
    padding: 20px 30px;
    margin: 0;
    font-size: 54px;
    font-weight: 500;
    color: #424242;
}
.price-list .price-period {
    font-size: 14px;
    font-weight: 300;
    text-transform: lowercase !important;
}
.price-list .price-features {
    padding: 0 18px;
    margin: 0;
    background: #eee;
}
.price-list .price-features li:first-child {
    border-top: none;
}
.price-list .price-features li {
    display: block;
    padding: 15px;
    list-style: none;
    border-top: 1px dashed #e0e0e0;
}
.price-list .price-footer {
    padding: 30px;
    border-radius: 0px 0px 50px 0px;
}
.font-16
{
    font-size: 16px;
}

.price-list [class*=bg-], .price-list [class*=bg-] *, .price-list [class^=bg-], .price-list [class^=bg-] * {
    color: #fff;
}
.price-ribbon-list{
    border-radius: 50px 0px 55px;
    transition: all 0.3s;
    box-shadow: none;
}
.price-ribbon-list:hover{
    border-radius: 0px 50px;
    transition: all 0.3s;
}
.price-ribbon-list:hover .price-header {
    border-radius: 0px 50px 0px 0px;
    transition: all 0.3s;
}
.price-ribbon-list:hover .price-footer {
    border-radius: 0px 0px 0px 50px;
    transition: all 0.3s;
}
.price-ribbon-list .ribbon-last-box {
    display: none;
    transition: all 1s;
}
.price-ribbon-list:hover .ribbon-last-box {
    display: block;
    background: transparent;
    height: 80px;
    left: 14px;
    position: absolute;
    text-align: center;
    top: -1px;
    width: 130px;
    transition: all 1s;
}
.price-ribbon-list .price-title-round{
    font-size: 18px;
    color: #fff;
}
.price-ribbon-list .price-header{
    transition: all 0.3s;
}
.price-ribbon-list .price-footer{
    transition: all 0.3s;
}
/*--------------------------------

9.3.4 OVERLAY

--------------------------------*/

/*---- OVERLAY ----*/

.overlay-box { position:relative;}
.overlay-box img { width:100%;}
.overlay-description { position:absolute; bottom:0; width:100%; height:100%; color:#FFF; padding:10px 15px;}
.overlay-description h3 { color:#FFF; font-size:18px; padding:5px 0px;}
.overlay-description p { font-size:15px;}
.overlay-description a { color:#FFF; text-decoration:underline;}
.overlay-hover .overlay-description { opacity:0;}
.overlay-background { background:rgba(0,0,0,0.5);}
.overlay-image { width: 100%; height: 100%; padding: 0;}
.overlay img { width:100%;}

/*---- OVERLAY EFFECTS ----*/

.effects-overlay { margin-bottom:60px;}
.effects-overlay .img-overlay { cursor:pointer; position: relative; float: left; margin-bottom: 5px; width: 100%; overflow: hidden;}
.overlay-hover-des { display: block; position: absolute; z-index: 20; background: rgba(54, 169, 225, 0.7); overflow: hidden; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; cursor:pointer;}
a.close-overlay { display: block; position: absolute; top: 0; right: 0; z-index: 100; width: 45px; height: 45px; font-size: 20px; font-weight: 700;  color: #fff; line-height: 45px; text-align: center; background: #000; cursor: pointer;}
a.close-overlay.hidden { display: none;}
a.icon-overlay { display: block; position: absolute; z-index: 100; width: 40px; height: 40px; border: solid 3px #fff !important; text-align: center; color: #fff; line-height: 37px; font-weight: 700; font-size: 20px !important; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px;}
a:hover.icon-overlay { color:#FFF !important;}

.effect-inner-effect .overlay-hover-des { top: 0; bottom: 0; left: 0; right: 0; opacity: 0;}
.effect-inner-effect .overlay-hover-des a.icon-overlay { top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; height: 100%;  -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; -o-border-radius: 0; border-radius: 30px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.effect-inner-effect .overlay.hover .overlay-hover-des { opacity: 1;}
.effect-inner-effect .overlay.hover .overlay-hover-des .icon-overlay { width: 40px; height: 40px; border-radius: 3px;}

.effect-bottom-top .overlay-hover-des { bottom: 0; left: 0; right: 0; width: 100%; height: 0; cursor:pointer;}
.effect-bottom-top .overlay-hover-des a.icon-overlay {left: 0; right: 0; bottom: 50%; margin: 0 auto -20px auto;}
.effect-bottom-top .overlay.hover .overlay-hover-des { height: 100%;}

.effect-top-bottom .overlay-hover-des { top: 0; left: 0; right: 0; width: 100%;  height: 0;}
.effect-top-bottom .overlay-hover-des a.icon-overlay {left: 0; right: 0; top: 50%; margin: -20px auto 0 auto;}
.effect-top-bottom .overlay.hover .overlay-hover-des { height: 100%;}

.icon-effect .overlay-hover-des { top: 0; bottom: 0; left: 0; right: 0; opacity: 0;}
.icon-effect .overlay-hover-des a.icon-overlay { left: 0; right: 0; top: 0; margin: 0 auto; opacity: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
.icon-effect .overlay.hover .overlay-hover-des { opacity: 1;}
.icon-effect .overlay.hover .overlay-hover-des a.icon-overlay {top: 50%; margin-top: -20px; opacity: 1;}

.effect-left-side .overlay-hover-des { top: 0; bottom: 0; left: 0; width: 0; height: 100%;}
.effect-left-side .overlay-hover-des a.icon-overlay { top: 0; bottom: 0; left: 50%; margin: auto 0 auto -20px;}
.effect-left-side .overlay.hover .overlay-hover-des { width: 100%;}

.effect-right-side .overlay-hover-des { top: 0; bottom: 0; right: 0; width: 0; height: 100%;}
.effect-right-side .overlay-hover-des a.icon-overlay {top: 0; bottom: 0; right: 50%; margin: auto -20px auto 0;}
.effect-right-side .overlay { overflow: hidden;}
.effect-right-side .overlay.hover .overlay-hover-des { width: 100%;}

.overlay-top-section { position:relative; margin-bottom:40px;}
.top-description { position:absolute; width:100%; height:20%; background: rgba(54, 169, 225, 0.7); transition-duration: 0.3s;    transition-timing-function: ease-out; font-size:20px; text-align:center; color:#FFF; padding-top:13px;}

.top-overlay { top:-20%;}
.overlay:hover .top-overlay { top:0;}

.bottom-overlay { bottom:-20%;}
.overlay:hover .bottom-overlay { bottom:0;}
.left-overlay { height: 100%; left: -40%; top: 0; width: 40%;}
.overlay:hover .left-overlay { left:0;}
.right-overlay { height: 100%; right: -40%; top: 0; width: 40%;}
.overlay:hover .right-overlay { right:0;}


/*--------------------------------

9.3.5 STEP

--------------------------------*/

.sp-series{
    width: 70px;
    height: 70px;
    line-height: 59px;
    margin: auto;
    font-size: 24px;
    display: block;
    border: 4px solid #FFF;
    text-align: center;
    position: relative;
    z-index: 1;
    border-radius: 100%;
}

.step-col {
    position: relative;
    padding: 12px 93px;
    margin: 0;
    color: #9e9e9e;
    vertical-align: top;
    background: #f3f4f5;
    border-radius: 0;
}

.sp-circle { 
    margin-top: -35px;
    padding: 55px 15px;
    text-align: center;
}

.sp-title{
    margin-bottom: 0;
    font-size: 20px;
    color: #616161;
}

.sp-circle.info-back .sp-title, .sp-circle.info-back p{
    color:white;
}

.step-col.success:after{
    border-left-color: #4caf50;
}
.step-col.error:after{
    border-left-color: #f44336;
}

.stp-alert .icon{
    margin-left:5px;
}

.sp-series.info-back span{color:white}
.gray-back { background: #f3f4f5}

.sp-circle p{margin-bottom: 0px; }

.stp-icons .icon {
    margin-top: 18px;
    margin-left: 17px;
}

.sp-icon {
    float: left;
    margin-right: .5em;
    font-size: 27px;
}
.success-back{
    background:#4caf50;
}
.error-back{
    background: #f44336;
}
.disabled {
    color: #bdbdbd;
    pointer-events: none;
    cursor: auto;
}

/*----- PEARLS STEP -----*/

.pr-pearl{
    position: relative;
    padding:0;
    margin:0;
    text-align:center;
}

.pr-pearl:after, .pr-pearl:before {
    position: absolute;
    top: 18px;
    z-index: 0;
    width: 50%;
    height: 4px;
    content: "";
    background: #eee;
}
.pr-pearl:first-child:before, .pr-pearl:last-child:after {
    display:none;
}

.pr-pearl:before {
    left: 0;
}
.prl-icon{
    font-size: 18px;
}
.prl-icon, .prl-series {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 32px;
    /* color: #fff; */
    text-align: center;
    background: #f3f4f5;
    border: 2px solid #bdbdbd;
    border-radius: 50%;
}


.prl-square .prl-icon{
    border-radius: 0;
}
.pr-pearl.done .prl-icon, .pr-pearl.done .prl-series {
    color: #fff;
}
.prl-series {
    font-size: 18px;
}
.prl-title {
    display: block;
    margin-top: .5em;
    margin-bottom: 0;
    overflow: hidden;
    font-size: 14px;
    color: #616161;
    text-overflow: ellipsis;
    word-wrap: normal;
    white-space: nowrap;
}

.pr-pearl.current .prl-icon, .pr-pearl.current .prl-series {
    background: #fff;
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.3);
}
.prl-xs .prl-series {
    font-size: 12px;
}
.prl-xs .prl-title {
    font-size: 12px;
}
.prl-xs .pr-pearl:after, .prl-xs .pr-pearl:before {
    top: 12px;
    height:2px;
}
.prl-xs .prl-icon, .prl-xs .prl-series {
    width: 24px;
    height: 24px;
    line-height: 20px;
}

.prl-sm .prl-series {
    font-size: 16px;
}
.prl-sm .prl-title {
    font-size: 14px;
}
.prl-sm .pr-pearl:after, .prl-sm .pr-pearl:before {
    top: 16px;
}
.prl-sm .prl-icon, .prl-sm .prl-series {
    width: 32px;
    height: 32px;
    line-height: 28px;
}

.prl-lg .prl-series {
    font-size: 20px;
}
.prl-lg .prl-title {
    font-size: 20px;
}
.prl-lg .pr-pearl:after, .prl-lg .pr-pearl:before {
    top: 20px;
}
.prl-lg .prl-icon, .prl-lg .prl-series {
    width: 40px;
    height: 40px;
    line-height: 36px;
}
.pr-pearl.error .prl-icon, .pr-pearl.error .prl-series {
    color: #f44336!important;
    background: #fff;
    border-color: #f44336!important;
}
.pr-pearl.error:after {
    background: #F44336!important;
}


/*--------------------------------

9.3.6 COVER

--------------------------------*/

.cover
{
    overflow: hidden;
}

.cover video { width:100%;}

.cover-image {
    height: 480px;
}

.background-cover {
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    background-size: cover;
}

.image-cover {
    width: 100%;
}

.quote-cover {
    position: relative;
    margin-bottom: 0;
    border-left: none !important; 
}

.cover blockquote {
    font-size: 20px;
    color: #616161;
    border-left-width: 2px;
}

.covers .cover .ic_quote
{
    bottom: 7px;
    padding: 5px;
    color: #c6c6c6;
}

.iframe-cover {
    width: 100%;
    border: 0 none;
}
.quote-cover:before {
    position: absolute;
    top: 2px;
    left: 11px;
    content: "\f10d";
    color: #c6c6c6;
    font-family: FontAwesome;
    font-size: 18px !important;
}
.quote-cover:after {
    position: absolute;
    bottom: 19px;
    content: "\f10e";
    color: #c6c6c6;
    font-family: FontAwesome;
    padding-left: 3px;
    font-size: 18px !important;
    top:auto;
    left: auto;
}

/*--------------------------------

9.3.7 SIMPLE TIMELINE

--------------------------------*/

.timeline-list-ul::after {
    position: absolute;
    display: block;
    width: 2px;
    top: 0;
    left: 95px;
    bottom: 0;
    content: "";
    background: #f0f0f0;
    z-index: 1;
}

.timeline-main {
    position: relative;
}
.timeline-list-ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.timeline-list-ul li {
    position: relative;
    margin: 0;
    padding: 15px 0;
}

.timeline-list-ul .timeline-icon {
    position: absolute;
    left: 80px;
    top: 10px;
    width: 30px;
    height: 30px;
    line-height: 28px;
    font-size: 14px;
    text-align: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 15px;
    z-index: 500;
}
.timeline-list-ul .timeline-time {
    float: left;
    width: 70px;
    text-align: right;
    line-height: 18px;
    font-size: 16px;
}

.timeline-list-ul .timeline-content-new {
    margin-left: 120px;
}

.timeline-content-new  strong
{
    color:#505050;
}
.push-bit {
    margin-bottom: 9px !important;
}
.timeline-img-row {
    margin-bottom: 15px;
}

.timeline-img-row img{
    width:100%;
}
.timeline-img-row img:hover{
    opacity:0.6;
}

.simple-timeline .timeline:before {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    content: "";
    background: #e0e0e0;
}

.simple-timeline .timeline > li {
    float: none !important;
    width: 100%;
}

.timeline>li {
    position: relative;
    display: block;
    float: left;
    width: 50%;
    padding-right: 40px;
    margin-bottom: 60px;
}

.timeline .timeline-reverse .timeline-point {
    margin-left: -7px;
}
.timeline-simple .timeline-point {
    top: 0;
    margin-top: 10px;
}

.timeline-feed.timeline-single .timeline-dot {
    margin-left: -15px;
}

/*--------------------------------

9.3.8 TIMELINE

--------------------------------*/

.timeline {
    position: relative;
    padding: 0;
    margin-bottom: 22px;
    list-style: none;
    background: 0 0;
}

.timeline>li.timeline-date {
    position: relative;
    z-index: 6;
    display: block;
    float: none;
    width: 200px;
    padding: 25px 10px;
    margin-left: auto;
    margin-right: auto;
    clear: both;
    font-size: 26px;
    text-align: center;
    text-transform: uppercase;
    background: #e0e0e0;
}

.timeline .timeline-point {
    width: 14px;
    height: 14px;
    margin-right: -7px;
    line-height: 14px;
}
.timeline-point {
    position: absolute;
    top: 7.5px;
    right: 0;
    z-index: 11;
    color: #fff;
    text-align: center;
    cursor: pointer;
    background: #36A9E1;

}
.timeline-point i
{
    border-radius: 50%;
    font-size: 17px;
    vertical-align: middle;
}

.timeline-content {
    float: left;
    width: 100%;
    overflow: hidden;
    clear: left;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
}
.timeline-content>.widgett {
    margin: 0;
    border-radius: 3px;
}
.widgett .widgett-header:last-child {
    border-radius: inherit;
}
.widgett .widgett-header {
    border-radius: 3px 3px 0 0;
}
.widgett .cover {
    width: 100%;
    padding: 20px;
}
.widgett-shadow {
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
}
.widgett {
    position: relative;
    margin-bottom: 30px;
    background: #fff;
}
.widgett .widgett-body:last-child {
    border-radius: 0 0 3px 3px;
}
.widgett-title {
    margin-top: 0;
    text-transform: capitalize;
}
.widgett-metas {
    font-size: 12px;
    color: #9e9e9e;
}
.widgett-body {
    position: relative;
    padding: 15px 25px;
}
.widgett-body-footer {
    margin-top: 18px;
}
.timeline>li.timeline-reverse {
    float: right;
    padding-right: 0;
    padding-left: 40px;
}

.timeline-reverse .timeline-point {
    right: auto;
    left: 0;
    margin-right: 0;
}

.animation-scale-up {
    -webkit-animation-name: fade-scale-02;
    -o-animation-name: fade-scale-02;
    animation-name: fade-scale-02;
}

.animation-slide-right {
    -webkit-animation-name: slide-right;
    -o-animation-name: slide-right;
    animation-name: slide-right;
}

.timeline-reverse .timeline-content {
    float: right;
    clear: right;
}

.widgett-actions a.active, .widgett-actions a:focus, .widgett-actions a:hover {
    color: #bdbdbd;
    text-decoration: none;
}
.widgett-actions a {
    display: inline-block;
    margin-right: 10px;
    color: #9e9e9e;
    vertical-align: middle;
}
.timeline:after {
    clear: both;
}
.timeline:after {
    display: table;
    content: "";
}
.timeline>li:not(.timeline-date):after, .timeline>li:not(.timeline-date):before {
    display: table;
    content: " ";
}
.timeline>li:not(.timeline-date):after {
    clear: both;
}

.timeline-content .widgett .info h4{
    margin-bottom:0;
}

.timeline-item .text-info{
    font-weight: normal;
}

/*****/

.timeline-simple .timeline-dot {
    top:0;
    margin-top:10px;
}

.timeline-feed.timeline-single {
    margin-left:15px;
}

.timeline-feed.timeline-simple .timeline-dot {
    margin-top:5px;
}

.timeline-feed .timeline-reverse .timeline-dot,.timeline-feed.timeline-single .timeline-dot {
    margin-left:-15px;
}

.timeline-feed.timeline-single>li {
    padding-left: 30px;
}

.timeline-feed>li {
    padding-right: 30px;
    margin-bottom: 22px;
}

.timeline-single>li {
    float: none;
    width: 100%;
    padding-right: 0;
    padding-left: 40px;
}


.timeline:before {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    content: "";
    background: #e0e0e0;
}

.timeline-single:before {
    left: 0;
}

.timeline-dot {
    position: absolute;
    top: 7.5px;
    right: 0;
    z-index: 11;
    color: #fff;
    text-align: center;
    cursor: pointer;
}

.timeline-feed .timeline-dot {
    width: 30px;
    height: 30px;
    margin-right: -15px;
    line-height: 32px;
}

.timeline-single .timeline-dot {
    right: auto;
    left: 0;
    margin-right: 0;
    margin-left: -7px;
}

.timeline-icon .timeline-point {
    top: -5.5px;
}
.timeline-icon .timeline-point {
    width: 40px;
    height: 40px;
    margin-right: -20px;
    line-height: 40px;
}
.timeline-info {
    float: right;
    margin-bottom: 22px;
    line-height: 28px;
    text-align: center;


}
.timeln .timeline:before {

    left:50%;
}

.timeline-icon .timeline-reverse .timeline-point {
    margin-left: -20px;
}
.timeline-reverse .timeline-info {
    float: left;
}
.timeln [data-icon]:before {
    font-size: 2em;
    left: 0;
    margin-top: 15px;
}

.text-blue
{
    color: #3f51b5 !important;
}
.text-green
{
    color : #10c469 !important;
}
.text-orange
{
    color: #ff9800!important;
}
.text-cyan
{
    color : #00acc1!important
}
.comment{
    background: #ffffff;
    float: right;

    padding: 10px 25px 10px;
    position: relative;
    width: 100%;
}

.comment > a {
    color: #76838f;
    float: left;
    font-family: open sans;
    font-size: 14px;
    margin-right: 12px;
}
.comment a:active , .comment a:focus, .comment a:visited, .comment a:hover
{
    color: #76838f;
    text-decoration: none;
}
.info
{
    padding: 15px 25px;
    width: 100%;
    overflow: hidden;
}
.info > span {
    border: 3px solid rgb(222, 222, 222);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    float: left;
    height: 66px;
    margin-right: 20px;
    overflow: hidden;
    width: 66px;
}
.info > span img {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    float: left;
    width: 100%;
    height: 100%;
}
.about
{
    display: table-cell;
    vertical-align: middle;
    width: 100%;

}
.about h3
{

    float: left;
    line-height: 10px;
    /*    margin: 0 0 5px;*/
    width: 100%;

}
.about > i {
    color: #7b8692;
    font-family: Open Sans;
    font-size: 11px;
    font-style: normal;
}

/*--------------------------------

9.3.9 TESTIMONIALS

--------------------------------*/

.testimonial-content{
    position: relative;
    padding:15px 20px;
    margin-top: 10px;
    margin-bottom: 25px;
    background: #f3f4f5;
    border-radius: 5px;
}
.testimonial-content:before {
    position: absolute;
    bottom: -7px;
    left: 33px;
    display: block;
    width: 14px;
    height: 14px;
    content: '';
    background: #e8e9e9;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.testimonial-item {
    float: left;
    padding: 0 0px 10px;
    margin: 0;
}

.testimonial-image {
    position: relative;
    float: left;
    margin-top: 5px;
    margin-left: 20px;
}
.testimonial-author {
    display: block;
    margin-left: 75px;
    font-size: 18px;
}
.testimonial-cmp {
    display: block;
    margin-left: 75px;
    font-size: 12px;
    opacity: .8;
}
.testimonial-reverse .testimonial-content:before {
    right: 33px;
    left: auto;
}
.testimonial-reverse .testimonial-image {
    float: right;
    margin-right: 20px;
    margin-left: 0;
}
.testimonial-reverse .testimonial-author, .testimonial-reverse .testimonial-cmp {
    margin-right: 75px;
    margin-left: 0;
    text-align: right;
}
.testimonial-top .testimonial-content {
    margin-top: 30px;
    margin-bottom: 10px;
}
.testimonial-top .testimonial-item {
    padding: 0px 0px 10px;
}
.testimonial-top .testimonial-content:before {
    top: -7px;
    bottom: auto;
}

.tes-box-shadow { 
    transition:all 0.3s ease; 
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3), 0px 0px 56px rgba(0, 0, 0, 0.1) inset; 
} 

.tes-box-shadow:hover{ 
    transition:all 0.3s ease;
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3), 0px 0px 32px rgba(0, 0, 0, 0.1) inset; 
}

.main-testi blockquote { border-left: 5px solid #d8d8d8; border-left-width: 3px; }

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

.testimonial.carousel .testimonial-control {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.new-arrow .arrow_carrot-left, .new-arrow .arrow_carrot-right
{
    background: #9e9e9e;
    border-radius: 20px;
    font-size: 24px;
}

.testimonial-control a {
    font-size: 26px;
    color: #bdbdbd;
}

.testimonial.carousel.testimonial-reverse .testimonial-control {
    right: auto;
    left: 10px;
}
.testimonial.carousel.testimonial-top .testimonial-control {
    top: 8px;
    bottom: auto;
}

.testimonial-content>p:last-child {
    margin-bottom: 0;
}
.testimonial.carousel .testimonial-item.active{left:0}
.testimonial.carousel .testimonial-item {
    position: relative;
    width: 100%;
    padding: 0px 0px 10px;
    -webkit-transition: left .6s ease-in-out 0s;
    -o-transition: left .6s ease-in-out 0s;
    transition: left .6s ease-in-out 0s;
}
.mobile{
    margin-right: -25px;
    margin-left: -25px;
}

/*--------------------------------

9.3.10 BLOCKQUOTE

--------------------------------*/

.blockquote {
    padding: 15px 20px;
    border-left-width: 4px;
    border-radius: 3px;
}

.cust-title{font-size: 14px;text-transform:uppercase;}
.block-quote{
    position: relative;
    padding-left: 35px;
    margin-bottom: 0;
    border-left: none;
}
.block-quote:before {
    left: 0;
    content: open-quote;
}
.block-quote:after, .block-quote:before {
    position: absolute;
    top: -20px;
    font-size: 4em;
}

.blockquote-reverse {
    border-right-width: 2px;
}

.blockquote-success {
    background: rgba(76,175,80,.1);
    border-color: #4caf50 !important;
}

.blockquote-info {
    background: rgba(0,188,212,.1);
    border-color: #00bcd4 !important;
}

.blockquote-warning {
    background: rgba(255,152,0,.1);
    border-color: #ff9800 !important;
}

.blockquote-danger {
    background: rgba(244,67,54,.1);
    border-color: #f44336 !important;
}

.blockquote-content
{
    background: white;
    padding: 20px 20px 10px 20px;   

}

blockquote footer
{
    color: #9a9a9a;
}

/*--------------------------------

9.3.11 BREADCRUMBS

--------------------------------*/

.breadcrumb {
    margin-bottom: 10px;
}

.breadcrumb.breadcrumb-arrow > li + li::before {
    padding: 0 5px;
    color: #36A9E1;
    content: "\35";
    font-family: 'ElegantIcons';
    vertical-align: middle;
}
.breadcrumb.back-breadcrumb
{
    background:#fff;
}
.breadcrumb i
{
    margin-right:5px;
}
.page-wrap .bread-content
{
    background:#fff;
}

.bread-content
{
    background: white;
    padding: 20px 20px 10px 20px; 
}

.breadcrumb-menu
{
    margin-top:7px;
}

/*--------------------------------

9.3.12 COMMENTS

--------------------------------*/
.simple-comment textarea { padding: 10px 15px !important; }
.comment-right textarea { padding: 10px 15px !important; }

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

.name-section { width:100%; overflow:hidden; padding-bottom:10px;}
.btn-reply { margin-bottom:0px;}
.comment-photo img { width:100%; border: 1px solid #ccc;}
.simple-comment { background: #f3f4f5; border: 1px solid #ccc; padding:20px; overflow:hidden; border-radius:3px;}
.des-comment { clear:both;}
.white-back { background:#FFF;}
.comment-box { padding:0px; margin-bottom:20px;}
.second-comment-box { margin-top:40px;}
.right-box-comment { float:right;}
.right-photo { float:right;}
.form-comment { clear:both;}
.form-comment h3 { padding-left:15px;}
.comment-des { border-radius:3px; position: relative; background: #f3f4f5; border: 1px solid #ccc; padding:20px; margin-bottom:20px;}
.comment-right { margin-right:16px;}
.left-img { width:60px; height:60px; float:left;}
.right-des-comment { width:93.8%; float:left; margin-left:30px;}
.comment-photo { width:60px; height:60px;border-radius: 3px;}
.comment-des:after, .comment-des:before {
    left: 100%;
    top: 25px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.comment-des:after {
    border-color: rgba(204, 204, 204, 0);
    border-left-color: #f3f4f5;
    border-width: 15px;
    margin-top: -15px;
}
.comment-des:before {
    border-color: rgba(204, 204, 204, 0);
    border-left-color: #ccc;
    border-width: 17px;
    margin-top: -17px;
}


.left-name-comment { float:left;}
.right-time-comment { float:right; font-size:13px; padding-top: 2px;}

.comment-page img{
    border-radius: 3px;
}
.comment-page{
    margin-bottom: 40px;
}
.attachment-thumb i{
    font-size: 50px;
}
.attachment-thumb{
    display: table-cell;
    vertical-align: middle;
}
.attachment-info {
    padding-left: 10px;
}
.attachment-info{
    display: table-cell;
    vertical-align: middle;
}
.comment-meta {
    float:right;
    display: inline-block;
    margin-left: 5px;
    font-size: 12px;
    color: #9e9e9e;
}
.comment-actions {
    margin-top: 10px;
    text-align: right;
}
.comment-actions a {
    display: inline-block;
    margin-right:5px;
    vertical-align: middle;
}
.comment-actions a.icon {
    text-decoration: none;
}
a.text-like.active, a.text-like:focus, a.text-like:hover {
    color: #e53935!important;
}
a.text-like {
    color: #9e9e9e!important;
}
.form-comment .form-control {
    background: none;
    border-radius: 5px; 
    margin-bottom: 20px;
}
.comment-reply {
    margin: 22px 0 10px;
}
.comment .media:first-child {
    border-top: 1px solid #e0e0e0 !important;
    padding-top: 20px;
}
.comment .comment {
    padding:0px;
}
.comments .comment {
    border: none;
    border-bottom: 1px solid #e0e0e0;
}
.comment .media:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.margin-bottom-35{
    margin-bottom: 35px;
}

.comment-des .btn{
    margin-top: 10px;
}


/*--------------------------------

9.3.13 MEDIA

--------------------------------*/

.media-image img { width:100%;}
.comment-title { font-size:18px; color:#474747;}
.media-object {
    width: 120px;
}
.media-sm .media-object {
    width: 80px;
}
.media-xs .media-object {
    width: 60px;
}
.btn-media {
    padding: 6px 18px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 2px;
}
.media-left {
    padding-right: 20px;
}

.panel-structure .media-left {
    padding-right: 10px;
}

.media-body p{
    margin-bottom: 0;
}

.media-body p i{
    vertical-align: text-top;
    margin-right: 5px;
}

.media-page h5{
    font-size: 16px;
}

.medias h4.text-info
{
    margin-bottom: 5px;
}
.medias .media-sm
{
    padding:20px 0px;
}

/*--------------------------------

9.3.14 CHAT

--------------------------------*/

.chat-title-box-padding {
    padding: 0 20px 5px !important;
    margin-bottom: 40px;
}
.chat-title-box h4{
    color: #fff !important;
    padding-top: 5px;
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
}

.chat-padding-15{
    padding: 0 15px !important;
}
.chat-btn-right{
    float: right;
    color: #fff;
    top: 7px;
    position: absolute;
    right:20px;
}
.chat-name-right{
    font-size: 16px;
    color: #ffffff;
    display: block;
    border-bottom: 1px solid rgb(218, 218, 218);
    margin-bottom: 10px;
    padding-bottom: 5px;
    font-weight: 900;
    margin-top: 0;
}
.chat-name-left{
    font-size: 16px;
    color: #424242;
    display: block;
    border-bottom: 1px solid rgb(204, 204, 204);
    margin-bottom: 10px;
    padding-bottom: 5px;
    font-weight: 900;
    margin-top: 0;
}
.user-image-left {
    width: 34px;
    border-radius: 3px;
    float: left;
}
.chat_message_time_left i{
    padding-right: 5px;
}
.chat_message_time_right i{
    padding-right: 5px;
}
.chat_message_left {
    float: left;
    margin: 0 0 0 20px;
    padding: 0;
    list-style: none;
    max-width: 60%;
}
.chat_message_left li:first-child:before {
    position: absolute;
    left: -7px;
    top: 15px;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 16px 16px 0;
    border-color: transparent #f3f4f5 transparent transparent;
    transform: rotate(224deg);
}
.chat_message_left li {
    background: #f3f4f5;
    padding: 8px 16px;
    border-radius: 4px;
    position: relative;
    display: block;
    float: left;
    clear: both;
    color: #424242;
}
.chat_message_left p {
    margin: 0;
}
.chat_message_left>li+li {
    margin-top: 4px;
}
.chat_message_time_left {
    display: block;
    font-size: 11px;
    padding-top: 2px;
    color: rgba(104, 104, 104, 0.7);
    text-transform: uppercase;
}
.chat_margin{
    margin-bottom: 30px;
}
.chat_message_right p {
    margin: 0;
}
.user-image-right {
    width: 34px;
    border-radius: 3px;
    float: right;
}

.chat_message_right {
    float: right;
    margin: 0 20px 0 0;
    padding: 0;
    list-style: none;
    max-width: 60%;
}
.chat_message_right li:first-child:before {
    position: absolute;
    left: -14px;
    top: 15px;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 16px 16px 0;
    border-color: transparent #689f38 transparent transparent;
}
.chat_message_right li:first-child:before {
    left: auto;
    right: -7px;
    border-width: 0 0 12px 16px;
    border-color: transparent transparent transparent #36a9e1;
    transform: rotate(125deg);
}
.chat_message_right li {
    padding: 8px 16px;
    border-radius: 4px;
    position: relative;
    display: block;
    float: right;
    clear: both;
    color: white;
}
.chat_message_right>li+li {
    margin-top: 4px;
}
.chat_message_time_right {
    text-align: right;
    display: block;
    font-size: 11px;
    padding-top: 2px;
    color: rgba(255,255,255,.7);
    text-transform: uppercase;
}

.app-message .chat-message .page-left-side {
    width: 375px;
    margin:20px 20px 20px 0px;
    right:0;
}
.chat-message .page-left-side {
    box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.1);
}
.chat-message .message-list .list-group-item {
    padding: 13px 15px 10px;
}
.chat-message .page-left-side .panel { 
    box-shadow:0 1px 0px 0 rgba(0, 0, 0, 0.1);
}
.chat-message .list-group-item:nth-child(even) {
    background: #FFF;
}
.chat-message .input-search { 
    margin:15px 15px 0px 15px;
    z-index:999;
}
.chat-message .chat-padding-left { 
    padding:0px;
}

.chat_footer .form-control{
    border: none !important;
}
.chat_footer .btn{
    box-shadow: none;
}

.form-material .form-control, .form-material .form-control.focus, .form-material .form-control:focus {
    float: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.form-group:after,.form-group:before{
    display: table;
    content: " ";
}

.form-material {
    position: relative;
}

.form-material .form-control {
    padding: 0;
    background: rgba(0,0,0,0);
    background-repeat: no-repeat;
    background-position: center bottom,center calc(100% - 1px);
    background-size: 0 2px,100% 1px;
    transition: background 0s ease-out;
}
.form-material .form-control.focus, .form-material .form-control:focus {
    background-size: 100% 2px,100% 1px;
    outline: 0;
    transition-duration: .3s;
}

.chat-message-box .media-left{
    padding-right: 10px;
}

.input-group-btn .btn.icon.md-mail-send{ background: none !important; border: none !important; }

.chat-btn-right .btn {
    margin-top: 1px;
    padding: 8px 12px !important;
}

/*--------------------------------

9.3.15 NAV

--------------------------------*/

.nav-box-content
{
    padding:15px;
}

.blue {
    background: #28ABE3;
}
.green {
    background: #72bf48;
}
.light-red {
    background: #FB6648;
}
.color {
    background: #0ECEAB;
}

.light-orange {
    background: #FA6900;
}
.purple {
    background: #9b59b6;
}

.yellow{
    background:#FFA500;
}
.light-yellow{
    background:#F8CD46;
}
.rama
{
    background:#00bc64;
}

.menu-item-nav {
    color: #fff;
    padding-top: 25px;
    padding-bottom: 10px;
    margin-bottom: 30px;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    border: 5px solid transparent;
    text-align: center; 
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.06) inset;
}
.menu-item-nav a {
    color: #fff !important; 
    display: block; 
    transition: all 0.3s;
}
.menu-item-nav h3 { 
    display: none;  
    font-weight: 600;
    font-size: 33px;
    color:#fff;
    margin-top:0px;
    margin-bottom: 0px;
}
.menu-item-nav i {
    font-size: 40px; 
    padding-bottom:20px;

}

.menu-item-nav p { 
    font-weight: 500;
    font-size: 20px;
}

.menu-item-nav:hover {
    border: 5px solid rgba(255, 255, 255, 0.70);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.3), 0px 0px 10px rgba(0, 0, 0, 0.06) inset;
    transition: all 0.5s ease;

}
.menu-item-nav:hover a {
    color: #fff !important; 
    transition: all 0.5s;
}
.menu-item-nav:hover h3 {
    display: block;

}

.menu-item-nav:hover i {
    display: none;

}

.menu-item-nav hr {
    display: none;
    max-width: 30px;
    border-color: #f05f40;
    border-width: 6px;
    margin:9px auto;
    border: 0;
    border-top: 2px solid #eee;
}

.menu-item-nav:hover hr {
    display: block;
}

.nav-pills>li.active>a, .navs .nav-pills>li.active>a:focus, .navs .nav-pills>li.active>a:hover {
    color: #fff !important;
    background: #36A9E1;
}
.navs .dropdown-menu {
    margin-top: 5px;
    -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
    -webkit-transition: .25s;
    -o-transition: .25s;
    transition: .25s;
}
.navs .nav-pills>li>a {
    -webkit-transition: border .2s linear,color .2s linear,background-color .2s linear;
    -o-transition: border .2s linear,color .2s linear,background-color .2s linear;
    transition: border .2s linear,color .2s linear,background-color .2s linear;
}
.navs .nav>li>a:focus {
    outline: 0;
}
.navs .nav>li>a:focus, .navs .nav>li>a:hover {
    text-decoration: none;

}

.nav-pills li i
{
    margin-right:.5em;
    margin-top: 4px;
    /*    float: left;*/
}

.nav-overflow{
    overflow: hidden;
}
.nav-justified > li + li {
    padding-left: 2px;
}

/*--------------------------------

9.3.16 NAVBAR

--------------------------------*/

.navbar-block.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
}
#site-navbar-search2,#site-navbar-search3{
    margin-top: 3px;
}

.navbar-brand {
    padding: 18px 15px;
}

.page-navbars .navbar-search-overlap{z-index:99;}

.navbars .navbar-nav .dropdown-mega.open .dropdown-menu
{
    left:auto;
}
.navbars .navbar-mega .dropdown.dropdown-fw .dropdown-menu {
    left: 14px !important;
    right: 14px !important;
}
.navbar-btn {
    margin-top: 12px;
    margin-bottom: 12px;
}
.navbar-brand {
    height: 60px;
}
.navbar-text {
    margin-top: 20px;
    margin-bottom: 20px;
}
.navbar-inverse .navbar-toggle {
    border-color: transparent;
}
.navbar-default .navbar-toggle {
    border-color: transparent;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background: transparent;
}
.navbar-inline{
    display: inline-flex;
}

.nav-img{
    padding: 10px 15px !important;
}
.mega-list>li {
    margin-bottom: 6px;
}
.mega-list {
    padding-left: 10px;
    margin-left: 0;
    list-style: none;
    font-size: 15px;
}
.mega-list>li i {
    float: left;
    width: 1em;
    margin: 0 6px 0 0;
}

.page-navbars .navbar-default {
    background: transparent !important;
}
.page-navbars .navbar-toolbar>li {
    float: left;
}

.navbar-page .navbar-search {
    position: absolute!important;
    top: 0;
    right: 0;
    left: 0;
    background: #fff;
}
.page-navbars .navbar-search-overlap .form-control {
    height: 54px!important;
}
.navbar-inverse .navbar-toolbar>li>a:focus,
.navbar-inverse .navbar-toolbar>li>a:hover {
    color: #fff;
    background: rgba(0,0,0,.1);
}
.navbar-inverse .navbar-toolbar>li>a {
    color: #fff;
}
.navbar-default .navbar-toolbar>.active>a,
.navbar-default .navbar-toolbar>.active>a:focus,
.navbar-default .navbar-toolbar>.active>a:hover {
    color: #616161;
    background: #eee;
}
.navbar-form .form-control {
    background: #eee !important;
}

.navbar-mega .mega-contain {
    padding: 20px 30px;
}
.navbar-mega .mega-menus {
    min-width: 150px;
    max-width: 100%;
}
.mega-menus a{
    color: #36a9e1;
}
.thumbnail {
    padding: 0;
    border: none;
    transition: all .25s ease-in-out;
}
/*.navbar-mega .dropdown-menu {
    left: auto;
}*/
.mega-form{
    padding-left: 20px !important;
    background: none;
    box-shadow: none;
    border-radius: 5px;
}

.page-navbars:after, .page-navbars:before {
    display: table;
    content: " ";
}
.scrollspy-navbars {
    position: relative;
    height: 200px;
    padding: 0 20px;
    overflow: auto;
    box-shadow: 0 2px 4px rgba(0,0,0,.08);
}

.navbar-toolbar>li:after {
    clear: both;
}
.navbar-toolbar>li:after, .navbar-toolbar>li:before {
    display: table;
    content: " ";
}
.navbar-toolbar {
    float: left;
}

.navbar-inverse .navbar-nav .open .dropdown-menu .divider {
    background: #ddd;
}

.navbar-toolbar > li > a {
    line-height: 21px;
}

.navbars .navbar-default .navbar-nav > li > a:focus, .navbars .navbar-default .navbar-nav > li > a:hover {
    color: #333;
    background: #eee;
}
.navbars .navbar-inverse .navbar-toggle:focus, .navbars .navbar-inverse .navbar-toggle:hover {
    background: transparent;
}
.navbars .navbar-nav > li > a {
    padding-top: 19px;
    padding-bottom: 19px;
}
.dropdown-mega a:hover {
    background: transparent;
    
}
.navbar-mega-menu .dropdown-toggle{
    line-height: 30px;
}
.navbars .navbar-toolbar > li > a {
    line-height: 23px;
}
/*.navbars .main-header .navbar-nav > li > a.navbar-avatar, .navbars .main-header .navbar-toolbar > li > a.navbar-avatar {
    padding-bottom: 13px;
    padding-top: 15px;
}*/
/*.navbars .navbar-brand {
    line-height: 25px;
}*/
.navbars .navbar-mega .navbar-brand{
    line-height: 30px;
}
.page-navbars .mega-contain a img { 
    width:100%;
}

/*--------------------------------

9.3.17 PAGINATION

--------------------------------*/

.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 7px 13px;
    margin-left: -1px;
    line-height: 1.57142857;
    color: #757575;
    text-decoration: none;
    background: transparent;
    border: 1px solid #e0e0e0;
}

.pagination-lg>li>a, .pagination-lg>li>span {
    padding: 9px 15px;
    font-size: 16px;
    line-height: 1.3333333;
}


.pagination>li>a,.pagination>li>span
{
    border: 1px solid #ddd !important;
}

.pagination-gap>li:first-child>a, .pagination-gap>li:last-child>a {
    border-radius: 5px;
}
.pagination>li:first-child>a, .pagination>li:first-child>span {
    margin-left: 0;
}
.pagination-gap>li>a {
    margin: 0 5px;
    border-radius: 5px;
}
.pagination-gap>li>a:hover {
    background: transparent;  
}
.pagination>.disabled>a,
.pagination>.disabled>a:focus,
.pagination>.disabled>a:hover,
.pagination>.disabled>span,
.pagination>.disabled>span:focus,
.pagination>.disabled>span:hover {
    color: #bdbdbd !important;
    cursor: not-allowed; 
    background: transparent;
    border-color: #e0e0e0;
    pointer-events: none;
}
.pagination-no-border>li>a {
    border: none !important;
}

.pagination-lg>li:first-child>a, .pagination-lg>li:first-child>span {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.pagination-sm>li:first-child>a, .pagination-sm>li:first-child>span {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.pagination-sm>li>a, .pagination-sm>li>span {
    padding: 5px 9px;
    font-size: 14px;
    line-height: 1.5;
}
.paginations .pagination {
    margin: 0;
}
.pager li>a, .pager li>span {
    padding: 10px 20px;
    color: #757575;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

.pager li>a:focus,.pager li>a:hover {
    text-decoration: none;
    background: #fff;
}

.pager li>a, .pager li>span {
    border-radius: 3px;
}

.pager li>a, .pager li>span
{
    border: 1px solid #ddd !important;
}
.pager-round li>a, .pager-round li>span {
    border-radius: 15px;
}

.paginations .pager li.previous.disabled>a, 
.paginations .pager li.previous.disabled>a:focus, 
.paginations .pager li.previous.disabled>a:hover, 
.paginations .pager li.previous.disabled>span {
    border-color: #e0e0e0 !important;
    pointer-events: none !important;
    cursor: not-allowed;
    color: #bdbdbd;
}

.pagination > li > a:focus, 
.pagination > li > a:hover, 
.pagination > li > span:focus, 
.pagination > li > span:hover { 
    background:#36a9e1 !important; color:#FFF;
}

.cd-pagination .button1 a[data-icon]:before, .cd-pagination .button2 a[data-icon]:after {
    font-family: 'ElegantIcons';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

/*--------------------------------

9.3.18 DIFFRENT HEADER

--------------------------------*/

.header-left-panel .top-breadcrumb { width:100%; padding-top:0px;}
.header-left-title { float:left;}
.header-left-panel .des-breadcrumb { padding-top:18px;}
.text-center .page-title { width:100%;}
.right-search-header { margin-top:12px;}
.right-search-header .search-header { background:#eee;}
.search-header .icon_search { float: left; margin-top: 10px;}
.right-button-header { margin-top:15px;}
.right-chart-header { margin-top:3px;}
.right-stats-header{ margin-top:0px;}

.header-title
{
    text-transform: uppercase;
    font-size: 11.5px;
    font-weight: 400;
    padding: 0;
    margin: 0;
    margin-bottom: -19px;
}

.page-title-section { margin:20px 0px; background: #f5f5f5; border: 1px solid #f1f1f1; clear:both; overflow:hidden; padding:20px 30px 18px 30px;}
.left-title-header { font-size:30px; float:left; color:#424242; line-height:35px;}
.basic-title { font-size:14px; font-weight:400; text-transform:uppercase;}
.breadcrumb-header { float:right; padding-top:9px;}
.breadcrumb-header li { list-style-type:none; font-size:15px; display:inline;}

.breadcrumb-header li a:hover { text-decoration:underline;}
.text-page:before { content: "/ "; padding: 0 5px;}
.top-breadcrumb-header { width:100%; padding:0px; margin:0px; line-height:18px;}
.description-title-header { float:left;}
.description-title-header p { font-size:15px; margin-bottom:0px;}
.description-breadcrumb { padding-top:24px;}

.chart-header 
{ 
    float:left;
    margin-top:22px;
}
.header-counter 
{ 
    float:right; 
    margin-left:10px;
}

.header-button
{
    border-radius: 3px !important;
    margin-right: 4px !important;
}

.header
{
    margin-bottom: 60px !important;
}
.headers
{
    overflow:hidden;
    margin-bottom: 30px;
    background: #f5f5f5;
    border: 1px solid #f1f1f1;
}
.width-270
{
    width: 270px;
    padding: 0px;
}
.width-270 .col-sm-4
{
    padding: 0px;
}
.header-counter
{
    text-align: center;
}
.header-counter .header-counter-number {
    font-size: 20px;
    color: #424242;
}

.search-header { border:1px solid #e0e0e0; background:#FFF; height:36px; width:100%; border-radius:3px;}
.search-header input { background:none; border:none; line-height:34px; padding:0px 10px 0px 10px;}

.search-header input:focus{
    border: none;
    outline-offset: 0 !important;
}
.input-search-icon { padding-left:10px;}
.search-header:focus { background:none;}

.header-bg{
    position: relative;
    margin-bottom: 30px;
    background: #f5f5f5;
    border: 1px solid #f1f1f1;
}
.panel-right-width{
    width: 270px;
    padding: 0px;
}

/*--------------------------------

9.4 FORMS

    9.4.1 GENERAL ELEMENTS

--------------------------------*/

.form-horizontal .checkbox-custom, .form-horizontal .radio-custom {
    min-height: 29px;
}

.fileUpload {
    position: relative;
    overflow: hidden;
    display: table-cell; padding:0px;
    margin-right:5px;
}

.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
.input-group-file { width:100%;}

.form-title
{
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 500;
}
.input-round
{
    border-radius: 50px !important;
}

.input-group-file input[type=file] {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    min-width: 100%;
    min-height: 100%;
    text-align: 0;
    cursor: pointer;
    opacity: 0;
}
.input-search-button
{
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    padding: 0 10px;
    background: 0 0;
    border: none;
    border-radius: 0 200px 200px 0;
}
.input-search-dark .form-control
{
    background: #eee;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.input-search-dark .form-control:focus
{
    background: transparent;
}

.input-dark { border-color:#616161 !important;}
.input-danger { border-color:#d9534f !important;}
.input-success { border-color:#5cb85c !important;}
.input-warning { border-color:#f0ad4e !important;}

/*----- CUSTOM CHECKBOX AND REDIO -----*/

.table td>.checkbox-custom:only-child, .table th>.checkbox-custom:only-child {
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
}

.control { 
    display: block; 
    position: relative;
    padding-left: 30px; 
    margin-bottom: 15px; 
    cursor: pointer; 
    /*font-size: 15px;*/
}
.control input { 
    position: absolute; 
    z-index: -1;
    opacity: 0;
}
.control_indicator { 
    position: absolute; 
    top: 2px; left: 0;
    height: 20px;
    width: 20px;
    background: #e6e6e6;
}
.control-radio .control_indicator { 
    border-radius: 50%;
}

.control:hover input:not([disabled]):checked ~ .control_indicator,
.control input:disabled ~ .control_indicator {
    pointer-events: none;
}
.control_indicator:after {
    content: '';
    position: absolute;
    display: none;
}
.control input:checked ~ .control_indicator:after {
    display: block;
}
.control-checkbox .control_indicator:after {
    left: 8px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0; 
    transform: rotate(45deg);
}
.control-checkbox input:disabled ~ .control_indicator:after {
    border-color: #ccc;
}
.control-radio .control_indicator:after {
    left: 7px;
    top: 7px;
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background: #fff;
}
.control-radio input:disabled ~ .control_indicator:after { 
    background: #ccc;
}


.radio-danger input[type="radio"]:checked + label::before { 
    border-color: #d9534f;
}
.radio-warning input[type="radio"]:checked + label::before {
    border-color: #f0ad4e;
}
.radio-danger input[type="radio"]:checked + label::after {
    background: #d9534f;
}
.radio-warning input[type="radio"]:checked + label::after {
    background: #f0ad4e;
}
.page-wrap .radio { 
    margin-left:20px;
}
.page-wrap .checkbox {
    margin-left:20px;
}
.radio label:before {
    background: #fff;
    border: 1px solid #cccccc;
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 17px;
    left: 0;
    margin-left: -20px;
    position: absolute;
    transition: border 0.15s ease-in-out 0s;
    width: 17px;
}
.radio input[type="radio"]:checked + label::after {
    transform: scale(1, 1);
}
.radio-danger input[type="radio"] + label::after {
    background: #d9534f;
}
.radio label:after {
    background: #555555;
    border-radius: 50%;
    content: " ";
    display: inline-block;
    height: 11px; left: 3px;
    margin-left: -20px;
    position: absolute; 
    top: 3px;
    transform: scale(0, 0); 
    transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33) 0s; 
    width: 11px;
}


.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"],
.radio input[type="radio"],
.radio-inline input[type="radio"] {
    z-index: 1;
    width: 20px;
    height: 25px;
    opacity: 0;
}
.checkbox-warning input[type="checkbox"]:checked + label::before,
.checkbox-warning input[type="radio"]:checked + label::before { 
    background:#f0ad4e; 
    border-color: #f0ad4e;
}
.checkbox label::before { 
    background: #fff;
    border: 1px solid #cccccc;
    border-radius: 3px;
    content: "";
    display: inline-block;
    height: 17px; 
    left: 0;
    margin-left: -20px;
    position: absolute;
    transition: border 0.15s ease-in-out 0s, color 0.15s ease-in-out 0s;
    width: 17px;
}
input.styled[type="checkbox"]:checked + label:after,
input.styled[type="radio"]:checked + label:after {
    content: "";
    font-family: "FontAwesome";
}
.checkbox-warning input[type="checkbox"]:checked + label:after,
.checkbox-warning input[type="radio"]:checked + label:after { 
    color: #fff;
}
.checkbox input[type="checkbox"]:checked + label:after,
.checkbox input[type="radio"]:checked + label:after { 
    content: "";
    font-family:"FontAwesome";
}
.checkbox label::after {
    color: #555555;
    display: inline-block;
    font-size: 11px;
    height: 16px;
    left: 0;
    margin-left: -20px;
    padding-left: 3px; 
    padding-top: 0px;
    position: absolute; top: 0;
    width: 16px;
}

.checkbox-danger input[type="checkbox"]:checked + label:before,
.checkbox-danger input[type="radio"]:checked + label:before {
    background:#d9534f;
    border-color: #d9534f;
}
.checkbox-danger input[type="checkbox"]:checked + label:after,
.checkbox-danger input[type="radio"]:checked + label:after {
    color: #fff;
}

/*--------------------------------

    9.4.2 METERIAL ELEMENTS

--------------------------------*/

.form-control-sm{
    padding: .275rem .75rem;
    font-size: 12px;
    line-height: 1.5;
}
.form-control-lg{
    font-size: 2.25rem;
    line-height: 1.5;
}
.form-material .form-control.focus~.hint, .form-material .form-control:focus~.hint {
    display: block;
}
.form-material .hint {
    position: absolute;
    display: none;
    font-size: 80%;
}

.form-material select{
    padding-left: 5px !important;
}

.text-warning{
    color: #f0ad4e;
}
.text-danger{
    color: #d9534f;
}

.form-warning{
    background-image: linear-gradient(#f0ad4e,#f0ad4e),linear-gradient(#e0e0e0,#e0e0e0) !important;
}
.form-danger{
    background-image: linear-gradient(#d9534f,#d9534f),linear-gradient(#e0e0e0,#e0e0e0) !important;
}
.form-success{
    background-image: linear-gradient(#5cb85c,#5cb85c),linear-gradient(#e0e0e0,#e0e0e0) !important;
}

/*----- HIDDEN LABEL -----*/

.material {
    position: relative;
}
.material.floatlabl .form-control~.control-label {
    top: 5px;
    font-size: 14px;
}
.material.floatlabl textarea.form-control {
    padding-top: 6px;
}
.material.floatlabl+.material.floatlabl {
    margin-top: 40px;
}
.material.floatlabl .control-label.control-label-option {
    position: relative; 
    top: auto; 
    display: block; 
}
.material input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.material.floatlabl .form-control.focus~.control-label,
.material.floatlabl .form-control:focus~.control-label,
.material.floatlabl .form-control:not(.empty)~.control-label 
{
    top: -14.2px; 
    font-size: 9.2px; 
}

.material.floatlabl .control-label {
    position: absolute; 
    left: 12px;
    font-size: 14px;
    pointer-events: none;
    -webkit-transition: .3s ease all;
    -o-transition: .3s ease all;
    transition: .3s ease all;
}
.cust-form{border:1px solid transparent!important}

.cust-btn> .btn{
    margin-top: 0px!important;
}

/*--------------------------------

    9.4.3 FORM LAYOUT

--------------------------------*/

.form-inline .form-group {
    margin-right: 8px;
}
.form-inline .control-label {
    margin-right: 5px;
}
.form-control{
    background: #eee;
    box-shadow: none;
    border-radius: 4px;
    background: white;
}


/*--------------------------------

    9.4.4 FORM VALIDATION

--------------------------------*/

.form-horizontal .checkbox-custom, .form-horizontal .radio-custom {
    padding-top: 6px;
    margin-top: 0;
    margin-bottom: 0;
}

.has-success .form-control:focus {
    border-color: #2b542c !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #67b168 !important;
}
.has-error .form-control:focus {
    border-color: #843534 !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483 !important;
}
.has-warning .form-control:focus {
    border-color: #66512c !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #c0a16b !important;
}
.has-feedback .form-control-feedback {
    right: 15px;
}

.summary-errors ul li a {
    color: inherit;
    text-decoration: none;
}


/*--------------------------------

    9.4.5 FORM WIZARD

--------------------------------*/

.form-wizard > ol {
    list-style-type: none;
    padding: 0 15px;
}
.form-wizard > ol > li {
    min-height: 50px;
    padding-top: 15px;
    padding-bottom: 15px;
    background: #fcfcfc;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.form-wizard > ol > li .label {
    margin-right: 6px;
}
.form-wizard > ol > li .label[href]:hover,
.form-wizard > ol > li .label[href]:focus {
    color: #006f98;
    border-color: #006f98;
}
.form-wizard > ol > li h4 {
    display: inline-block;
    color: #515253;
}
.form-wizard > ol > li small {
    display: block;
    color: #b1b2b2;
}

.form-wizard > ol > li.active h4,
.form-wizard > ol > li.active small {
    color: #fff !important;
}
.form-wizard > ol > li.active .label {
    border-color: #fff;
    color: #fff;
}
.form-wizard .well {
    border: none;
    margin: 0;
    padding: 0 !important;
    background: transparent;
    box-shadow: none;
}
.form-wizard .jumbotron{
    background: transparent;
    padding: 30px;
    border: 1px solid #d1d2d3;
}
.form-wizard.wizard-horizontal > ol > li {
    display: inline-block;
}
.form-wizard.wizard-vertical:before,
.form-wizard.wizard-vertical:after {
    content: " ";
    display: table;
}
.form-wizard.wizard-vertical:after {
    clear: both;
}
.form-wizard.wizard-vertical > ol {
    float: left;
    width: 39%;
    padding: 0;
}
.form-wizard.wizard-vertical > ol > li {
    display: block;
    padding: 10px;
}
.form-wizard.wizard-vertical > ol > li h4 {
    font-size: 14px;
}
.form-wizard.wizard-vertical > div {
    float: right;
    width: 59%;
}
.form-wizard.wizard-vertical .pager {
    clear: both;
    padding-top: 10px;
}
.form-wizard.wizard-vertical .well {
    padding: 0;
}

.bwizard-activated{
    height: 270px;
    overflow-x: hidden;
}

.bwizard-buttons
{
    margin: 0px;
}
.pager .disabled>a, .pager .disabled>a:focus, .pager .disabled>a:hover, .pager .disabled>span
{
    opacity: .65;
}
.pager.bwizard-buttons li a{border:none !important;}

/*----- horizontal style -----*/

.stepContainer{
    height: 270px !important;
}
.form_wizard .stepContainer {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    border: 0 solid #CCC;
    overflow-x: hidden
}
.wizard_horizontal ul.wizard_steps {
    display: table;
    list-style: none;
    position: relative;
    width: 100%;
    margin: 0 0 20px;
    padding: 0;
}
.wizard-center{
    float: none;
    margin: auto;
}
.wizard_horizontal ul.wizard_steps li {
    display: table-cell;
    text-align: center
}
.wizard_horizontal ul.wizard_steps li a,
.wizard_horizontal ul.wizard_steps li:hover {
    display: block;
    position: relative;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    opacity: 1;
    color: #666
}
.wizard-title {
    margin-bottom: 0;
    font-size: 20px;
    color: #fff !important;
}
.wizard_horizontal ul.wizard_steps li a:before {
    content: "";
    position: absolute;
    height: 4px;
    background: #ccc;
    top: 100px;
    width: 100%;
    z-index: 0;
    left: 0;
}
.wizard_horizontal ul.wizard_steps li a.done:before, .wizard_horizontal ul.wizard_steps li a.done .sp-series {
    color: #fff;
}
.wizard_horizontal ul.wizard_steps li a.done:before, .wizard_horizontal ul.wizard_steps li a.done .sp-circle {
    color: #fff;
}
.wizard_verticle ul.wizard_steps li a.selected:before {
    background: #d9534f;
    color: #fff !important;
}
.wizard_horizontal ul.wizard_steps li a.disabled .sp-series {
    background: #ccc !important;
}
.wizard_verticle ul.wizard_steps li a.selected:before{
    background: #d9534f !important;
    color: #fff !important;
}

.wizard_steps .sp-series{
    background: #d9534f ;
    color: #fff !important;
}

.wizard_steps .sp-circle{
    background: #d9534f !important;
    color: #fff !important;
}

.wizard_horizontal ul.wizard_steps li a.disabled .sp-circle {
    background: #ccc !important;
}
.wizard_horizontal ul.wizard_steps li a.disabled .step_no {
    background: #ccc
}
.wizard_horizontal ul.wizard_steps li a .step_no {
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: block;
    margin: 0 auto 5px;
    font-size: 16px;
    text-align: center;
    position: relative;
    z-index: 5
}
.wizard_horizontal ul.wizard_steps li a.selected:before,
.step_no {
    background: #d9534f;
    color: #fff
}

.wizard_horizontal ul.wizard_steps li:first-child a:before {
    left: 50%
}
.wizard_horizontal ul.wizard_steps li:last-child a:before {
    right: 50%;
    width: 50%;
    left: auto;
}
.wizard_verticle .stepContainer {
    width: 80%;
    float: left;
}
.wizard_horizontal .stepContainer {
    padding-right: 10px;
    height: 217px !important;
}
.actionBar {
    width: 100%;
    padding: 10px 5px;
    text-align: right;
    margin-top: 0px;
    padding-bottom: 0;
    clear:both;
}
.actionBar .buttonDisabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: .65;
    filter: alpha(opacity=65);
    box-shadow: none;
}
.actionBar a {
    margin: 0 3px;
}

/*----- vertical style -----*/

.wizard_verticle .wizard_content {
    width: 80%;
    float: left;
    padding-left: 20px;
}
.wizard_verticle ul.wizard_steps {
    display: table;
    list-style: none;
    position: relative;
    width: 20%;
    float: left;
    margin: 0 0 20px;
}
.wizard_verticle ul.wizard_steps li {
    display: list-item;
    text-align: center;
}
.wizard_verticle ul.wizard_steps li a {
    height: 70px;
}
.wizard_verticle ul.wizard_steps li a,
.wizard_verticle ul.wizard_steps li:hover {
    display: block;
    position: relative;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    opacity: 1;
    color: #666;
}
.wizard_verticle ul.wizard_steps li a:before {
    content: "";
    position: absolute;
    height: 100%;
    background: #ccc;
    top: 20px;
    width: 4px;
    z-index: 4;
    left: 49%;
}
.wizard_verticle ul.wizard_steps li a.disabled .step_no {
    background: #ccc;
}
.wizard_verticle ul.wizard_steps li a .step_no {
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: block;
    margin: 0 auto 5px;
    font-size: 16px;
    text-align: center;
    position: relative;
    z-index: 5;
}
.wizard_verticle ul.wizard_steps li a.selected:before,
.step_no {
    background: #d9534f;
    color: #fff;
}

.wizard_verticle ul.wizard_steps li:first-child a:before {
    left: 49%;
}
.wizard_verticle ul.wizard_steps li:last-child a:before {
    left: 49%;
    left: auto;
    width: 0;
}
.form_wizard .loader {
    display: none;
}
.form_wizard .msgBox {
    display: none;
}

.md-scroll-mask { 
    position: initial;
}

/*--------------------------------

9.5 WIDGETS

    9.5.1 STATIC WIDGETS

--------------------------------*/

.static-box
{
    padding: 30px;
    margin-bottom: 30px;
    background: #fff;
    width: 100%;
    box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
}
.static-icon
{
    float: left;
    font-size: 50px;
    margin-top: 15px;

}

.widget-i
{
    display: inline-block;
}
.static-with-bg, 
.static-with-bg h4, 
.static-with-bg h2, 
.static-with-bg h3, 
.static-with-bg p
{
    color: #fff;
}

.follow-img
{
    width: 80px;
}
.static-box h2 i
{
    vertical-align: middle;
}
.side-icon
{
    color: #000;
    font-size: 60px;
    position: absolute;
    right: 0;
    bottom: 0;
    line-height: 1;
    opacity: .1;
    margin: 50px;
}

.bg-purple
{
    background: #6164c1 !important
}
.static-widget .btn-white
{
    background: #ffffff;
    border: 1px solid rgba(120, 130, 140, 0.13);
    color: black;

}
.tasks-progress > ul {
    float: left;
    list-style: outside none none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.tasks-progress > ul > li {
    float: left;
    margin: 0;
    padding: 0 10px;
    width: 50%;
}
.label-pink {
    background: #ff8acc;
}
.label-purple {
    background: #5b69bc;
}
.circle-widget {
    width: 80px;
    height: 80px;
    display: inline-block;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}

.circle-widget > span {
    width: 76px;
    height: 76px;
    display: block;
    margin: 2px;
    background: #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.circle-widget > span > i {
    width: 76px;
    height: 76px;
    display: block;
    line-height: 76px;
    text-align: center;
    font-size: 24px;
    color: #666;
}
.static-info .w-meta-value {
    font-size: 20px;
    font-weight: 400;
}

.static-info > span {
    display: block;
}
.static-info .w-meta-title {
    font-size: 16px;
    font-weight: 400;
}

.two-part li {
    width: 47.8%;
}
.list-inline>li i, .list-inline .counter
{
    font-size: 50px;
}
.static-widget h3{
    font-size: 23px;
}

/*--------------------------------

    9.5.2 DATA WIDGETS

--------------------------------*/

.message-box a {
    border-bottom: 1px solid rgba(120, 130, 140, 0.13) !important;
    display: block;
    padding: 10px 15px;
    position: relative;
}
.message-box .user-img img {
    width: 100%;
}
.message-box .user-img {
    width: 50px;
    float: left;
    position: relative;
    margin: 0 10px 15px 0px;
}

.message-box .msg-detail h4 {
    margin-top: 0px;
    margin-bottom: 5px;
}
.message-box .msg-detail p {
    margin-bottom: 0px;
    color: #76838f;
}
.message-box .msg-detail .small{
    color: #9e9e9e;
}

.message-box .msg-detail .time {
    display: block;
    font-size: 12px;
    color: #2b2b2b;
}
.message-box .user-img .online {
    background: #99d683;
}
.message-box .user-img .profile-status {
    border: 1px solid #ffffff;
    border-radius: 50%;
    display: inline-block;
    height: 10px;
    left: 45px;
    position: absolute;
    top: 0px;
    width: 10px;
}
.data-widget .list-group-item-heading
{
    font-size: 16px;
}

.static-box .chat-title{
    margin-bottom: 20px;
}
.static-box .chat-name-left {
    font-size: 14px;
}
.static-box .chat-name-right {
    font-size: 14px;
}
.static-box .btn-tweet{
    margin-bottom: 20px;
}

.timeline-simple .timeline-content>.widgett
{
    border-radius: 0px; 
}
.data-widget .message-box .media, .blog-widget .message-box .media{
    margin-top:0px;
}
.data-widget .list-borders .media-body p
{
    font-size: 13px;
    line-height: 1.6;
}
.margin-right-4
{
    margin-right: 4px !important;
}
.data-widget .list-task .checkbox-custom
{
    margin-top: 0px;
    margin-bottom: 0px;
}


/*--------------------------------

    9.5.3 BLOG WIDGETS

--------------------------------*/

.widgett-info {
    bottom: 0;
    left: 0;
    top: 0;
    right:0;
    position: absolute;
    font-size: 0;
    text-align: center;
    color: #fff;
}

.widgett-actions {
    margin-top: 10px;
    display: inline-block;
}

.widgett-info h3 {
    color: #ffffff !important;
    float: left;
    font-size: 22px;
    margin: 0 0 20px;
    width: 100%;
}
.widgett-info p {
    color: #e1e1e1;
    float: left;
    width: 100%;
    font-size: 15px;
}
.blog-widget .widgett-body-footer {
    margin-top: 18px;
}
.icon-block
{
    bottom: 7px;
    padding: 5px;
    color: #c6c6c6;
}
.widgett-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 50%;
}
.widgett-left+.widgett-body {
    width: 60%;
    margin-left: 40%;
}

.blog-widget .message-box a
{
    padding:10px 0px;
}
.img-blog-dash img:hover {
    opacity: 0.7;
    cursor: pointer;
}
.blog-widget .widgett-left img
{
    height: 100%;
}
.inner-middle { vertical-align: middle; width:100%; height:100%; display:table-cell;}


/*--------------------------------

    9.5.4 SOCIAL WIDGETS

--------------------------------*/

.avatar-lg
{
    width: 100px;
}
.avatar-md
{
    width: 55px;
}

.profile-widget-head {
    background-image: url("../../images/social/img_2048x1152.jpg");
    background-size: cover;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    -ms-border-radius: 4px 4px 0 0;
    -o-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    float: left;
    padding: 30px 0 55px;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 0;
    margin-bottom: 50px;
}

.back-img-user
{
    background-image: url("../../images/social/img_2048x1152.jpg");
    background-size: cover;

    border-radius: 3px;
    float: left;
    overflow: hidden;
    padding: 15px;
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 0;
    margin-bottom: 20px;
}
.back-img-user::before {
    background: #fff;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
.back-img-user > span{
    color: #626262;
    float: left;

    font-size: 14px;
    margin-bottom: 20px;
    width: 100%;
}
.grey-700 {
    color: #616161!important;
}

.social-widget .border-top
{
    border-top: 1px solid #ECECEC;
}
.social-follow > ul {

    list-style: outside none none;
    margin: 0;
    padding: 25px 0 0;
    width: 100%;
    text-align: center;
}
.social-follow > ul > li {
    display: inline-block;
    float: none;
    padding: 0 20px;
}
.social-follow > ul > li > a > span > i {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    color: #fff;
    display: inline-block;
    font-size: 18px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    width: 42px;
}
.social-follow > ul > li > a > span {
    display: block;
    color: #4d575d;
    font-family: Montserrat;

    margin-top: 10px;
}
.social-follow1 ul 
{
    list-style: none;
    margin: 0px;
    padding: 0px;
    text-align: center;

}
.social-follow1 > ul > li {
    display: inline-block;
}
.social-follow1 ul li a {
    padding: 20px;
    border-right: #eee 1px solid;
    display: inline-block;
    color: #666;
    font-size: 16px;
}
.social-follow1 > ul > li > a > span
{
    display: block;
}
.social-follow1 > ul > li > a > span i
{
    font-size: 25px; 
}
.my-profile-widget {
    float: left;
    width: 100%;
}

.my-profile-widget > h4 {
    float: left;
    margin: 0 0 15px;
    width: 100%;
}
.my-profile-widget > span {
    -webkit-border-radius: 21px;
    -moz-border-radius: 21px;
    -ms-border-radius: 21px;
    -o-border-radius: 21px;
    border-radius: 21px;
    color: #fff;
    display: table;
    float: none;
    font-family: Lato;
    font-size: 13px;
    letter-spacing: 0.3px;
    margin: 0 auto;
    padding: 7px 16px;
}
.my-profile-widget > p {
    margin-top: 15px;
    margin-bottom: 20px;
    padding: 0 20px;
    text-align: center;
}

.profile-widget-head > span {   
    bottom: 0;
    left: 50%;
    margin-bottom: -35px;
    margin-left: -40px;
    overflow: hidden;
    position: absolute;
}
.profile-widget-head h4
{
    position: absolute;
    text-align: center;
    width: 100%;
    bottom: 0;
}

.type-3 {
    display: table-cell;
    vertical-align: middle;
}

.widgett-head-label
{
    position: absolute;
    top: 8px;
    right: 8px;
    cursor: pointer;
}

.display-table
{
    display: table !important;
}

.avatar-lg80
{
    width: 80px !important;
}
.background-info
{
    background: #36A9E1
}

.list-task .list-group-item .icon{
    margin-right:5px;
}

.social-widget .name-profile
{
    font-size: 36px;
}

/*--------------------------------

    9.5.5 CHART WIDGETS

--------------------------------*/

.counter-number-group h2 { 
    margin:0px
}
.chart-float2 .echart-size{
    height: 100%;
    width: 100%;
}

.card-chart-box{
    padding: 10px 14px;
    text-align: center;
    color: #fff !important;
}
.card-chart-box p{
    margin: 0;
}
.card-chart-title{
    font-size: 20px;
}
.card-chart-box h4{
    font-size: 25px;
    line-height: 2.0rem;
    margin: 5px 0 10px 0;
    font-weight: 600;
    color: #fff !important;
}
.chard-chart-bar{
    display: inline-block;
    width: 227px;
    height: 25px;
    vertical-align: top;
}
.card-action{
    text-align: center;
    padding: 10px;
    display: block;
    clear: both;
}
.card-action2 {
    text-align: center;
    padding: 10px 10px 30px 10px;
}
.bg-info-dark{
        background: rgba(54,169,225,0.7);
}
.bg-success-dark{
    background: #57a559;
}
.bg-warning-dark {
    background: #e88a00;
}
.bg-danger-dark {
    background: #b74e4b;
}
.bg-white{
    background: white;
}
.bg-info{
    background: #36a9e1 !important;
}
.bg-success{
    background: #66bb6a;
}
.bg-warning{
    background: #f0ad4e;
}
.bg-danger{
    background: #d9534f;
}
.widgets-top-padding{
    padding: 20px;
}
.widget {
    height: -webkit-calc(100% - 30px);
    height: calc(100% - 30px);
    margin-bottom: 30px;
}
.widget-font-views{
    font-size: 20px;
}
.text-red{
    color: #f44336;
}
.echart-bottom{
    margin-bottom: -48px;
}
.circle-pink{
    color: #df80db;
}
.circle-blue{
    color: #90d1f9;
}
.circle-orange{
    color: #f78257;
}
.circle-red{
    color: #e53935;
}
.circle-success{
    color: #57a559;
}
.text-success{
    color: #66bb6a;
}
.chart-float2 {
    height: 240px;
    width: 100%;
    padding: 20px 15px 15px 15px;
    background: #36a9e1;
}
.widget-viewers h2{
    margin-top: 0;
    margin-bottom: 0;
}
.widget-font-title {
    font-size: 25px;
}
.padding-viewers{
    padding: 43px 30px !important;
}
.widgets-top-padding h3
{
    margin-top:0px;
}


/*--------------------------------

10. CUSTOM STYLE

--------------------------------*/

/*------ DASHBOARD CUSTOM BOX ------*/

.ui-helper-hidden-accessible {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.widget-user-icon { clear: both; margin-bottom: 30px; }
.card-box {
    padding: 30px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);

    background: #ffffff;
}

.static-box .list-title{
    margin-top: 0;
}


.weath-img img
{
    height: 300px;
    width:100%;
}
.weather-bottom{
    top: auto !important;
    bottom: 0;
}

.wet-class hr { 
    max-width: 30px; 
    border-color: #f05f40; 
    border-width: 6px; 
    margin:10px auto 5px auto; 
    border: 0; 
    border-top: 2px solid #DDD; 
    text-align: center;
}

/*.weath-content-box h3 strong{
    color:white;
}*/

.dash-widget {
    background: #fff;
    margin-bottom: 30px; 
}

.widget-advanced-alt .widget-header {
    height: auto;
    min-height: 150px; 
    position: relative; 
    overflow: hidden;
}
.widget-advanced .widget-content-image {
    position: absolute;
    font-size: 21px;
    top: 0;
    left: 0;
    width: 100%;
    padding: 15px 30px;;
    margin: 0;
    color:#fff;
    background: rgba(0,0,0,.6);
}

.card-box-dash {
    padding: 30px;
    box-shadow: -6px 9px 5px rgba(0, 0, 0, 0.08);

    background: #ffffff;
}

.widget-user .wid-u-info p {
    margin-bottom: 0;
}

.wid-u-info

{
    text-align:right;
}

.huge
{
    font-size:18px;
    line-height: 1.3;
    color: #505050;
}


.dash-icon-head {
    font-size: 25px; 
    line-height: 1;
    border-radius: 50%;
    width: 65px;
    height: 65px;
    line-height: 63px;
    text-align: center;
    color: #fff;
    float: left;
    margin-right: 10px;
    top: -9px;
}

.dash-form-group {
    height: 35px !important;
}


/*----- CUSTOM CHACKBOX STYLE -----*/


.checkbox-custom label {
    position: relative;
    display: inline-block;
    padding-left: 10px;
    vertical-align: middle;
}

.checkbox-custom label, .radio-custom label {
    min-height: 22px;
    margin-bottom: 0;
    font-weight: 400;
    cursor: pointer;
}

.checkbox-custom label::before {
    position: absolute;
    left: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: -20px;
    content: "";
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 3px;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.checkbox-default{
    padding-left: 0px;
}
.checkbox-custom, .radio-custom {
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
}

.checkbox-custom input[type=radio]:checked+label::before, .checkbox-custom input[type=checkbox]:checked+label::before {
    border-color: #5BC0DE;
    border-width: 10px;
    /*    -webkit-transition: all 0.3s ease-in-out 0s;
        -o-transition: all 0.3s ease-in-out 0s;
        transition: all 0.3s ease-in-out 0s;*/
}

.checkbox-custom input[type=radio], .checkbox-custom input[type=checkbox] {
    z-index: 1;
    width: 20px;
    height: 20px;
    opacity: 0;
}
.checkbox-custom input[type=checkbox], .radio-custom input[type=radio] {
    position: absolute;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: -20px;
}

.checkbox-primary input[type=radio]:checked+label::after, .checkbox-primary input[type=checkbox]:checked+label::after {
    color: #fff;
}

.checkbox-custom input[type=radio]:checked+label::after, .checkbox-custom input[type=checkbox]:checked+label::after {
    font-family: 'ElegantIcons';
    content: '\4e';
}
.checkbox-custom label::after {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    padding-top: 0px;
    margin-left: -20px;
    font-size: 12px;
    line-height: 21 px;
    color: #757575;
    text-align: center;
}

@media screen and (-webkit-min-device-pixel-ratio:0) { .checkbox-custom label::after { padding-top:1px;} }

.checkbox-custom label:empty {
    padding-left: 0;
}

.radio-custom {
    padding-left: 20px;
}

.radio-custom input[type=radio] {
    z-index: 1;
    width: 20px;
    height: 20px;
    opacity: 0;
}

.radio-custom label {
    position: relative;
    display: inline-block;
    padding-left: 10px;
    vertical-align: middle;
}

.radio-custom label::before {
    position: absolute;
    left: 0;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: -20px;
    /*    margin-top: 3px;*/
    content: "";
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    transition: border .3s ease-in-out 0s,color .3s ease-in-out 0s;
    -webkit-transition: border .3s ease-in-out 0s,color .3s ease-in-out 0s; 
    -o-transition: border .3s ease-in-out 0s,color .3s ease-in-out 0s;
}
.radio-custom label::after {
    position: absolute;
    top: 7px;
    left: 7px;
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: -20px;
    /*    margin-top: 3px;*/
    content: " ";
    background: transparent;
    border: 2px solid #757575;
    border-radius: 50%;
    -webkit-transform: scale(0,0); 
    -ms-transform: scale(0,0); 
    -o-transform: scale(0,0); 
    transform: scale(0,0); 
    transition-transform: .1s cubic-bezier(.8,-.33,.2,1.33);
}

.radio-custom input[type=radio]:checked+label::after {
    -webkit-transform: scale(1,1); 
    -ms-transform: scale(1,1); 
    -o-transform: scale(1,1); 
    transform: scale(1,1);
}
.checkbox-default input[type=radio]:checked+label::before, 
.checkbox-default input[type=checkbox]:checked+label::before {
    background: #fff;
    border-color: #e0e0e0;
    border-width: 1px;
}

.checkbox-custom {
    padding-left: 20px;
}


/*----- CUSTOM SELECTBOX STYLE -----*/

.nice-select {
    -webkit-tap-highlight-color: transparent;
    background: #fff;
    border-radius: 5px;
    border: solid 1px #e0e7ee;
    box-sizing: border-box;
    clear: both;
    cursor: pointer;
    display: block;
    float: left;
    font-family: inherit;
    font-size: 14px;
    font-weight: normal;
    height: 42px;
    line-height: 40px;
    outline: none;
    padding-left: 18px;
    padding-right: 30px;
    position: relative;
    text-align: left !important;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
    width: auto; }
.nice-select:hover {
    border-color: #d0dae5; }
.nice-select:active, .nice-select.open, .nice-select:focus {
    border-color: #88bfff; }
.nice-select:after {
    border-bottom: 2px solid #90a1b5;
    border-right: 2px solid #90a1b5;
    content: '';
    display: block;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    -ms-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 5px; }
.nice-select.open:after {
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg); }
.nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0); }
.nice-select.disabled {
    border-color: #e7ecf2;
    color: #90a1b5;
    pointer-events: none; }
.nice-select.disabled:after {
    border-color: #cdd5de; }
.nice-select.wide {
    width: 100%; }
.nice-select.wide .list {
    left: 0 !important;
    right: 0 !important; }
.nice-select.right {
    float: right; }
.nice-select.right .list {
    left: auto;
    right: 0; }
.nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px; }
.nice-select.small:after {
    height: 4px;
    width: 4px; }
.nice-select.small .option {
    line-height: 34px;
    min-height: 34px; }
.nice-select .list {
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(68, 88, 112, 0.11);
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    -ms-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9; }
.nice-select .list:hover .option:not(:hover) {
    background: transparent !important; }
.nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: 40px;
    list-style: none;
    min-height: 40px;
    outline: none;
    padding-left: 18px;
    padding-right: 29px;
    text-align: left;
    -webkit-transition: all 0.2s;
    transition: all 0.2s; }
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
    background: #f6f7f9; }
.nice-select .option.selected {
    font-weight: bold; }
.nice-select .option.disabled {
    background: transparent;
    color: #90a1b5;
    cursor: default; }

.no-csspointerevents .nice-select .list {
    display: none; }

.no-csspointerevents .nice-select.open .list {
    display: block; }


/*----- START-NEW-CSS -----*/

.dropdown-mega .dropdown-menu
{
    border-top:0px
}
.dropdown-menu 
{ 
    padding:0px;
    border-radius: 0;
}

.dropdown-menu > li 
{ 
    margin:0px;
}
.dropdown-menu .divider
{ 
    margin:0px;
}

.panel-faq .panel-title
{
    padding-left: 0px !important;
    font-weight: normal;
    font-size: 15px;
}

.faq .panel-group a[aria-expanded="true"]{ color: #36A9E1 !important; }

.faq .panel-faq a:focus { color: #424242; }

/*----- CHART CUSTOOM STYLE -----*/

.chart {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 200px;
    text-align: center;
}
.chart canvas {
    position: absolute;
    top: 0;
    left: 0;
}
.chart-page h4
{
    margin-top: 0px;
}
.percent {
    display: inline-block;
    line-height: 200px;
    z-index: 2;
    font-size: 25px;
    font-family: serif;
}
.percent:after {
    content: '%';
    margin-left: 0.1em;
    font-size: .8em;
}
.angular {
    margin-top: 30px;
}
.angular .chart {
    margin-top: 0;
}

.range{
    display: inline-block;
}

.echart-size{
    height:400px;
}

.dash-chart{
    margin-top: -50px;
    margin-bottom: -50px;
}

.sparkline-page .list-title,.sparkline-page h4.list-title{
    margin-bottom: 30px;
}

.chart-info span{
    color: #36A9E1;
}

.chart-warning span{
    color:#FB8C00;
}

.chart-success span{
    color:#4CAF50;
}

.chart-green span{
    color:#2C9079;
}

.box-chart { margin-bottom:20px;}

.smallknob{
    margin-top: 30px;
}

/*----- CONTEXT MENU CUSTOM STYLE -----*/

.context-well {
    position: relative;
    margin-bottom: 30px;
    background: #eceff1;
}

.comtext-grey{
    background: #e0e0e0;
}

/*----- PANEL BOX SHADOW -----*/

.panel-box-shadow
{
    /* box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 5px rgba(0,0,0,.24);*/
    box-shadow: 0 1px 2px rgba(0,0,0,0),0 1px 4px rgba(0,0,0,0.30);

    transition:All 0.5s ease;
}
.panel-box-shadow:hover
{
    box-shadow: 0 1px 2px rgba(0,0,0,.12),0 1px 6px rgba(0,0,0,.36);
    transition:All 0.5s ease;
}

/*----- RICKSHAW CUSTOM STYLE -----*/

.rickshaw-legend-wrap{
    position: absolute;
    top: 2px;
    right: 2px;
}

/*----- ALITIFY CUSTOM STYLE -----*/

.generate-alertify { letter-spacing:1px;}
.alertify { z-index:9999;}
.show { border-radius:3px;}


/*----- LIGHTBOX CUSTOM STYLE -----*/

.lightbox-block{
    max-width:600px;
    padding:15px 20px;
    margin:40px auto;
    overflow:auto;
    background:#fff;
    position: relative;
    border-radius:3px
}

.texture-disable { 
    margin-right:0px !important;
}

.lightbox-display {
    display: block !important;
}
.dashboard .mfp-bg {
    z-index: 99999;    
}
.lightbox .lightbox-display{
    margin-bottom: 30px;    
}

/*---- GAUGE CUSTOM STYLE----*/

.spring-gauge { text-align:center;}
.spring-gauge canvas{
    max-width: 100%;
    height: auto !important;
}

/*----- CODE EDITOR,CONTACT,MAILBOX,MESSAGE SIDEBAR STYLE -----*/

.page-left-side {
    position: absolute;
    top: 0;
    bottom: 0;
    overflow-y: auto;
    width: 270px;
    height: auto;
    background: #fff;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

.page-left-side .panel-title{
    padding: 30px 20px;
}

.page-left-side .contactTitle{
    padding: 30px 0 15px 0;
}

.page-left-side+.page-main-content,.page-main-content{
    margin-left: 320px !important;
}
.chat-message .page-left-side + .chat-message .page-main-content, .chat-message .page-main-content {
    margin-right: 395px !important;
    margin-left:0px !important;
}
.code-toggle-button{
    display: none;
}
.sidebar-height {
    display: block !important;
}
.code-toggle-button {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background: transparent;
    border: none;
}
.code-toggle-button span{
    font-size: 30px;
    font-weight: bold;
    line-height: 1.5;
}
.code-toggle-button.collapsed .arrow_carrot-up:before{
    content: "\33";
}

.node-selected,.node-selected .icon{
    color: #ffffff !important;
}

.mailbox .input-search{
    z-index: 9;
}

.nav-pills > li > a {
    border-radius: 0px;
}
.mail-checkbox label::after {
    top: 1px;
}


.app-mailbox .dropdown-menu{
    width: auto;
}

.chat-page .bgnone:focus{
    background: none;
}

.display-hidden{
    overflow: hidden;
}
.code-editor li.list-group-item
{
    padding:13px 20px;
}

.app-mailbox .badge
{
    margin-top: 3px;

}
.app-mailbox .attachment-infor ul li a:hover{
    background: inherit;
    color:inherit;
}

#basic-inbox .checkbox-custom{
    float: left;
    margin: 0 10px 0 13px;
    position: relative;
    top: 9px;
}
#basic-inbox .user-message{
    float: left;
}

#basic-inbox .user-message h1{
    font-size: 13px;
    font-weight: bold;
    margin: 2px 0 0 0;
}
#basic-inbox .user-message p{
    font-size: 14px;
    font-weight: normal;
    margin: 5px 0 0;
}

#basic-inbox .message-time{
    float: left;
    padding: 10px 20px 10px 0;
}
#basic-inbox .message-time i{
    padding-right: 5px;
}
#basic-inbox .checkbox-important{
    float: left;
    padding: 11px 0;
}
#basic-inbox tr:nth-child(odd){
    background: #f6f6f6;
}

.mailbox .checkbox-custom.mail-checkbox{
    padding: 0 5px 0 15px;
}


.leftMessages {
    float: left;
    width: 85%;
}
.rightMessages {
    float: left;
    width: 15%;
}

/*----- FORM ADVANCED ELEMENTS CUSTOM STYLE  -----*/

.page-advance {
    margin-top: 20px;
    margin-bottom: 20px;
}
.icheck-margin{
    margin-bottom: 15px;
}
.form-responsive {
    min-height: .01%;
    overflow-x: auto;
}
.page-advance .asRange{
    width: 95%
}

.page-advance .tokenfield .token-input{
    width: auto !important;
}

.public-method-btn button {
    margin: 0 10px 15px 0;
}
/*******FAQ***********/
.faq .panel-group .panel-title::after, .faq .panel-group .panel-title::before
{
    right:15px;
}

/*----- FLOATTHEAD CUSTOM STYLE -----*/

table.floatThead-table
{
    background:#fff;
    border-top:none;
    border-bottom:none
}

/*----- CAROUSEL CUSTOM STYLE -----*/

.item h4, .caption h4{
    font-size: 16px;
}


/*---- SORTABLE NESTABLE ----*/

.dd-item-alt .dd-content:hover, .dd-handle:hover {
    color: #36a9e1;
}
.border-sort {
    border-right: none !important;
}
.dd-content span{
    top: -2px;
}

/*---- TREEVIEW ----*/

.treeview .list-group{
    margin-bottom: 0;
}
.treebadges .badge{
    margin-top: 3px;
}

/*----- AJAX DATATABLE -----*/

.display-block{
    display: block !important;
}
.table-responsive .dataTable {
    width: 99.8%;
}
.datatable table{
    width: 100% !important;
}
/*---- rickshaw ----*/
.rickshaw-page h4{
    padding-right: 55px;
}
.rickshaw-page p {
    padding-right: 90px;
}

/*---- VECTOR MAP ----*/

.vectormap-size{
    height: 720px !important;
}

/*---- FLOAT ----*/

.main-pie-float table tbody tr td{
    padding-right: 10px;
}
.chart-float table tbody tr td {
    padding-right: 10px;
}
#menu-button .btn {
    margin-right: 9px !important;
    margin-bottom: 20px;
}

/*---- BOOTSTRAP TABLES ----*/

.bootstrap-table table{
    font-size: 13px;
}

.blogwidget .widgett-body h3.widgett-title{
    font-size: 18px;

}

.darkInputIndex .input-search{
    z-index: 999;
}


/*--------------------------------

11. CUSTOMIZE FONTS

--------------------------------*/

/*---- FONTS1 -----*/

.fonts1 body {
    font-family: 'Raleway', sans-serif;
}

.fonts1 .h1,.fonts1 .h2,.fonts1 .h3,.fonts1 .h4,.fonts1 .h5,.fonts1 .h6,.fonts1 h1,.fonts1 h2,.fonts1 h3,.fonts1 h4,.fonts1 h5,.fonts1 h6{
    font-family: 'Lato', sans-serif;
}

.fonts1 .form-control{
    font-size: 13px;
}


/*----- FONTS2 -----*/

/*.fonts2 body {
    font-family: 'Roboto', 'Segoe UI', 'Droid Sans', Tahoma, Arial, sans-serif;
}

.fonts2 .h1,.fonts2 .h2,.fonts2 .h3,.fonts2 .h4,.fonts2 .h5,.fonts2 .h6,.fonts2 h1,.fonts2 h2,.fonts2 h3,.fonts2 h4,.fonts2 h5,.fonts2 h6{
    font-family: inherit;
}*/

.fonts2 body {
    font-family: 'Source Sans Pro', sans-serif;
}

.fonts2 .h1,.fonts2 .h2,.fonts2 .h3,.fonts2 .h4,.fonts2 .h5,.fonts2 .h6,.fonts2 h1,.fonts2 h2,.fonts2 h3,.fonts2 h4,.fonts2 h5,.fonts2 h6{
    font-family: inherit;
}