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

	[内容表格]

 	01. 普通样式 General style
 	02. 辅助类 Helper classes
 	03. 大菜单 Megamenu
 	04. 头部 Headers
 	05. 滑块 Sliders
	06. 页面 Page Breadcrumbs
	07. 章节 Sections
	08. 盒子Boxes
 	09. 标题 Titles
	10. Miscellaneous sections (Team, Stats, Testimonials, Pricing etc)
 	11. 画廊 Portfolio
	12. 博客 Blog
	13. 边栏 Sidebar
	14. 商店 Shop
	15. 页面 Pages
	16. 元素 Elements (Tabs, Butons, Alerts, Progress Bars etc)
	17. 足部 Footers
	18. 社交图标 Social Icons
	19. 文字旋转 Text Rotator (text rotator plugin)
	20. 动画 Animations (Just a few animations from animate.css)


	[颜色]

	# 主色  --> #B54321 = @mainColor
	# 背景  --> #f5f5f5 = @backgroundColor
	# 内容  --> #667    = @contentColor
	# 标题 	 --> #556 , #445 , #667 @titleColor1,2,3


	[Typography]

	# content    --> Source Sans Pro font
	# titles 	 --> MontSerrat font


	[提醒]

	# I used Montserrat for some main paragrpahs too;
	# 我只包括少量的动画从 animate.css (你可能并不需要所有的),但是你能够 包含/重复 任何你想要的动画从你的CSS文件的库中。I recommend not to include the whole library [这会有好的性能]
	# 如果你不使用 text rotator 插件, 你应该移除代码

	# 类文件名很容易找到, CTR+F (Find) (many text editors) may come in handy

-------------------------------------------------------------------- */
/*************************  Material Design 基本颜色  ***********************************/
/* *********************	普通样式   	********************* */
html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100%;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, "微软雅黑", sans-serif;
    font-size: 14px;
    line-height: 26px;
    letter-spacing: normal;
    font-weight: 400;
    background-color: #f5f5f5;
    color: #757575;
}
img {
    height: auto;
    max-width: 100%;
}
mark {
    color: #fff;
    background: #3f51b5;
}
hr {
    display: block;
    line-height: 25px;
    margin: 30px 0;
    position: relative;
    width: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 300;
    letter-spacing: -1px;
    margin: 0;
    color: #303030;
}
h1 {
    font-size: 42px;
    line-height: 44px;
    margin: 0 0 40px 0;
}
h2 {
    font-size: 36px;
    line-height: 38px;
    margin: 0 0 35px 0;
}
h3 {
    font-size: 28px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 28px;
    margin-bottom: 30px;
}
h4,
h5,
h6 {
    letter-spacing: normal;
    margin: 0 0 15px 0;
}
h4 {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}
h5 {
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
}
h6 {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}
p {
    margin: 0 0 20px;
}
a {
    color: #3f51b5;
    text-decoration: none;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
a:hover,
a:focus,
a:active,
.btn:hover,
.btn:focus,
.btn:active,
button:hover,
button:focus,
button:active {
    color: #ff4081;
    text-decoration: none;
    outline: 0;
    box-shadow: none;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
::-moz-selection {
    text-shadow: none;
    color: #fff;
    background: rgba(63, 81, 181, 0.8);
}
::selection {
    text-shadow: none;
    color: #fff;
    background: rgba(63, 81, 181, 0.8);
}
/* Back to Top */
.back-to-top .fa {
    z-index: 99999;
    text-align: center;
    width: 40px;
    height: 35px;
    padding-top: 6px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    position: fixed;
    bottom: -100px;
    right: 15px;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    overflow: hidden;
    font-size: 22px;
    background: #ffc107;
    color: #fff;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.87);
}
.back-to-top .fa:hover {
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.87);
    background: #ff9800;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
/* Preloader */
body {
    overflow: hidden;
}
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999;
    background: #f5f5f5;
}
#status {
    width: 160px;
    height: 15px;
    position: absolute;
    left: 50%;
    top: 50%;
    background-image: url('../img/preloader.gif');
    background-repeat: no-repeat;
    background-position: center;
    margin: -7.5px 0 0 -80px;
}
/* 背景图片 */
.bg-img {
    position: relative;
    -webkit-backface-visibility: visible !important;
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
}
@media (min-width: 768px) {
    .bg-img.fixed,
    .stellar {
        background-attachment: fixed;
    }
}
/* 背景层 */
.bg-overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background: #212121;
    opacity: .6;
}
.bg-overlay.video {
    background: #404244;
}
/* Responsive canvas */
.rs-canvas {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
/* Border left bottom */
.br-bottom:after {
    content: "";
    display: block;
    height: 1px;
    width: 35px;
    border-top: 2px solid #3f51b5;
    margin: 6px 0 10px;
}
.br-bottom-center::after {
    content: "";
    display: block;
    height: 1px;
    width: 35px;
    border-top: 2px solid #3f51b5;
    margin: 8px auto 10px;
}
.br-bottom-center.large:after {
    width: 50px;
    border-top: 5px solid #3f51b5;
}
/* Box heights fix */
@media (max-width: 991px) {
    .max_height.sm_max_height .el_max_height {
        height: auto !important;
    }
}
@media (max-width: 767px) {
    .max_height.xs_max_height .el_max_height {
        height: auto !important;
    }
}
/* Align middle */
.align-middle {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
/* *********************	辅助类 Helper Classes  	********************* */
.br0 {
    border-radius: 0 !important;
}
.br1 {
    border-radius: 1px !important;
}
.br2 {
    border-radius: 2px !important;
}
.br4 {
    border-radius: 4px !important;
}
.br6 {
    border-radius: 6px !important;
}
.br8 {
    border-radius: 8px !important;
}
.op10 {
    opacity: 1 !important;
}
.op9 {
    opacity: 0.9 !important;
}
.op8 {
    opacity: 0.8 !important;
}
.op7 {
    opacity: 0.7 !important;
}
.op6 {
    opacity: 0.6 !important;
}
.op5 {
    opacity: 0.5 !important;
}
.op4 {
    opacity: 0.4 !important;
}
.op2 {
    opacity: 0.2 !important;
}
.op0 {
    opacity: 0 !important;
}
.uppercase {
    text-transform: uppercase;
}
.montserrat {
    font-family: "Montserrat", "微软雅黑", sans-serif;
}
.fs-small {
    font-size: 80% !important;
}
.fs-large {
    font-size: 120% !important;
}
.relative {
    position: relative;
}
.block {
    display: block !important;
}
.inline-block {
    display: inline-block !important;
}
.unstyled {
    list-style: none;
    padding: 0 0 10px 20px;
}
.pull-center {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
    clear: both;
    text-align: center;
}
.text-left {
    text-align: left !important;
}
.text-right {
    text-align: right !important;
}
.m0 {
    margin: 0 !important;
}
.mb0 {
    margin-bottom: 0 !important;
}
.mt0 {
    margin-top: 0 !important;
}
.mb10 {
    margin-bottom: 10px !important;
}
.mb20 {
    margin-bottom: 20px !important;
}
.mb30 {
    margin-bottom: 30px !important;
}
.mb40 {
    margin-bottom: 40px !important;
}
.mb50 {
    margin-bottom: 50px !important;
}
.mb60 {
    margin-bottom: 60px !important;
}
.mb70 {
    margin-bottom: 70px !important;
}
.mb80 {
    margin-bottom: 80px !important;
}
.mt10 {
    margin-top: 10px !important;
}
.mt20 {
    margin-top: 20px !important;
}
.mt30 {
    margin-top: 30px !important;
}
.mt40 {
    margin-top: 40px !important;
}
.mt50 {
    margin-top: 50px !important;
}
.mt60 {
    margin-top: 60px !important;
}
.mt70 {
    margin-top: 70px !important;
}
.mt80 {
    margin-top: 80px !important;
}
.p0 {
    padding: 0 !important;
}
.pb0 {
    padding-bottom: 0 !important;
}
.pt0 {
    padding-top: 0 !important;
}
.pt5 {
    padding-top: 5px !important;
}
.mr10 {
    margin-right: 10px !important;
}
.mr20 {
    margin-right: 20px !important;
}
.mr30 {
    margin-right: 30px !important;
}
.py5 {
    padding-left: 5px !important;
    padding-right: 5px !important;
}
.py10 {
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.py15 {
    padding-left: 15px !important;
    padding-right: 15px !important;
}
.py20 {
    padding-left: 20px !important;
    padding-right: 20px !important;
}
.pr0 {
    padding-right: 0 !important;
}
.pl0 {
    padding-left: 0 !important;
}
.no-border {
    border: none !important;
}
.full-width {
    width: 100%;
}
.full-height {
    height: 100%;
}
.shadow-a {
    box-shadow: 0 0 10px rgba(10, 10, 10, 0.54);
}
.shadow-b {
    box-shadow: 2px 2px 8px rgba(10, 10, 10, 0.54);
}
.shadow-c {
    box-shadow: 3px 3px 10px rgba(10, 10, 10, 0.54);
}
.shadow-d {
    box-shadow: 1px 1px 5px rgba(10, 10, 10, 0.54);
}
/* 手机辅助类 */
@media (max-width: 767px) {
    .xs-block {
        display: block;
    }
    .xs-mb10 {
        margin-bottom: 10px !important;
    }
    .xs-pull-left {
        float: left !important;
    }
    .xs-pl0 {
        padding-left: 0 !important;
    }
    .xs-pt0 {
        padding-top: 0 !important;
    }
    .xs-mt0 {
        margin-top: 0 !important;
    }
    .xs-mb0 {
        margin-bottom: 0 !important;
    }
}
/* 桌面辅助类 */
@media (max-width: 991px) {
    .sm-pt0 {
        padding-top: 0 !important;
    }
    .sm-m0 {
        margin: 0 !important;
    }
    .sm-block {
        display: block !important;
    }
}
/* *********************	大菜单 Megamenu    	********************* */
/* 菜单 */
.menu {
    width: 100%;
    padding: 0;
    margin: 0;
    position: relative;
    float: left;
    list-style: none;
}
.menu li {
    display: inline-block;
    float: left;
}
.menu > li > a {
    padding: 25px 20px 25px 20px;
    font-size: 15px;
    text-transform: capitalize;
    font-weight: 400;
    display: inline-block;
    color: #707080;
    position: relative;
    z-index: 10;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.menu > li > a:hover,
.menu > li > a:focus,
.menu > li:hover > a {
    color: #3f51b5;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
/* 子菜单 */
.submenu,
.submenu .submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    z-index: 999999;
    min-width: 150px;
    font-size: 13px;
    word-spacing: 1px;
    color: #dadde2;
    background-color: #292c31;
}
.submenu {
    top: 76px;
    border-top: 3px solid #ff4081;
}
.submenu .submenu {
    left: 150px;
    top: inherit;
    margin-top: -1px;
}
.submenu > li {
    clear: both;
    width: 100%;
    font-size: 12px;
}
.submenu > li > a {
    width: 100%;
    padding: 10px 15px 10px;
    display: inline-block;
    float: left;
    clear: both;
    color: inherit;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.submenu > li > a:hover,
.submenu > li > a:focus,
.submenu > li:hover > a {
    text-indent: 5px;
    opacity: 0.6;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
/* 大菜单 */
.megamenu {
    position: absolute;
    display: none;
    min-width: 25%;
    top: 76px;
    font-size: 13px;
    z-index: 999998;
    padding: 25px 15px 5px;
    background-color: #292c31;
    color: #dadde2;
    word-spacing: 1px;
    border-top: 3px solid #ff4081;
}
/* 大菜单 列表 */
.megamenu-list:before,
.megamenu-list:after,
.vertical-menu-list:before,
.vertical-menu-list:after {
    display: table;
    content: " ";
}
.megamenu-list:after,
.vertical-menu-list {
    clear: both;
}
.megamenu-list,
.vertical-menu-list {
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
    list-style: none;
}
.vertical-menu-list {
    color: #dadde2;
    word-spacing: 1px;
    text-align: center;
    padding: 20px 0;
    font-size: 13px;
}
.megamenu-list > li,
.vertical-menu-list > li {
    width: 100%;
}
.megamenu-list > li > a,
.vertical-menu-list > li > a {
    padding: 4px 0;
    display: block;
    color: inherit;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.megamenu-list > li > a:hover,
.megamenu-list > li > a:focus {
    text-indent: 5px;
    opacity: 0.6;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.vertical-menu-list > li > a:hover,
.vertical-menu-list > li > a:focus {
    color: #3f51b5;
    text-indent: 0;
    opacity: 1;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.megamenu-list > .title,
.vertical-menu-list > .title {
    font-size: 14px;
    color: inherit;
    padding: 0 0 6px;
    text-transform: capitalize;
    letter-spacing: 1px;
    font-weight: 600;
}
.vertical-menu-list > .title {
    padding: 0 0 10px;
}
.megamenu-list > .title:after,
.vertical-menu-list > .title:after {
    content: "";
    display: block;
    height: 1px;
    border-top: 2px solid #3f51b5;
    width: 15px;
    margin: 5px 0 5px;
}
.vertical-menu-list > .title:after {
    margin: 5px auto;
}
/* 大菜单宽度 */
.megamenu.one_two {
    width: 50%;
}
.megamenu.full {
    width: 100%;
    left: 0;
}
.megamenu.two_three {
    width: 66.66%;
    left: 0;
}
.megamenu.three_four {
    width: 75%;
    left: 0;
}
@media (min-width: 992px) and (max-width: 1199px) {
    .megamenu.one_two {
        width: 70%;
    }
    .megamenu.two_three {
        width: 100%;
    }
    .megamenu.three_four {
        width: 100%;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .megamenu.one_two {
        width: 100%;
    }
    .megamenu.two_three {
        width: 100%;
    }
    .megamenu.three_four {
        width: 100%;
    }
}
/* 大菜单位置 */
.menu > li > .megamenu.left {
    left: 0;
}
.menu > li > .megamenu.right,
.menu > .right > .megamenu {
    right: 0;
}
.menu > .right {
    float: right;
}
.menu > .right > a,
.menu > li > a.last {
    padding-right: 0 !important;
}
@media (min-width: 768px) and (max-width: 991px) {
    .menu > .first > a {
        padding-left: 0;
    }
}
@media (min-width: 768px) {
    .menu > li > a.first {
        padding-left: 0 !important;
    }
}
/* 大菜单网络 */
.megamenu .row {
    width: 100%;
    margin: 15px 0 0;
}
.megamenu .row:first-child {
    margin-top: 0;
}
.megamenu .row:before,
.megamenu .row:after,
.submenu:after,
.submenu:before {
    display: table;
    content: "";
    line-height: 0;
}
.megamenu .row:after,
.submenu:after {
    clear: both;
}
.megamenu [class*="col-"] {
    display: block;
    width: 100%;
    min-height: 1px;
    float: left;
    padding: 0 10px;
    margin-bottom: 20px;
}
.megamenu .col-1 {
    width: 8.33333333%;
}
.megamenu .col-2 {
    width: 16.66666667%;
}
.megamenu .col-3 {
    width: 25%;
}
.megamenu .col-4 {
    width: 33.33333333%;
}
.megamenu .col-5 {
    width: 41.66666667%;
}
.megamenu .col-6 {
    width: 50%;
}
.megamenu .col-7 {
    width: 58.33333333%;
}
.megamenu .col-8 {
    width: 66.66666667%;
}
.megamenu .col-9 {
    width: 75%;
}
.megamenu .col-10 {
    width: 83.33333333%;
}
.megamenu .col-11 {
    width: 91.66666667%;
}
.megamenu .col-12 {
    width: 100%;
}
/* 菜单图标 */
.menu > li > a .icon-direction {
    margin: 1px 0 0 10px;
    font-size: 8px;
}
.menu .icon-direction {
    position: relative;
    top: 0;
    float: right;
    display: block;
    line-height: inherit;
    vertical-align: middle;
    width: auto;
    margin: 0;
    font-size: 7px;
    font-weight: 100;
    text-align: right;
}
.menu-icon {
    margin-right: 10px;
    font-size: 13px;
    color: #889;
}
/* Toggle 菜单 */
.menu .toggle-menu {
    display: none;
}
/* Menu on Mobiles */
@media (max-width: 767px) {
    .header-wrapper {
        background-color: #292c31;
        color: #dadde2;
    }
    .logo {
        background-image: url("../img/logo-light.png") !important;
    }
    .menu.xs-toggle {
        position: relative;
        top: 0;
        margin-bottom: 0;
    }
    .menu > li {
        display: block;
        width: 100%;
    }
    .menu > li:last-child a {
        padding-bottom: 35px;
    }
    /* Toggle Menu */
    .menu > .toggle-menu {
        display: block;
        float: right;
        width: 50px;
        height: 50px;
        position: relative;
        top: -60px;
        margin-bottom: -50px;
        cursor: pointer;
        color: #dadde2;
    }
    .menu > .toggle-menu.xs-toggle {
        float: none;
        width: 100%;
        position: relative;
        top: auto;
        margin-bottom: 0;
    }
    .toggle-menu .fa {
        margin: 14px 0;
        float: right;
        font-size: 24px;
    }
    .toggle-menu-title {
        color: #dadde2;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 0;
        font-weight: 400;
        float: left;
        margin-top: 12px;
    }
    .menu > li > a {
        text-transform: uppercase;
        font-size: 12px;
        color: inherit;
        display: block;
    }
    .menu > li > a,
    .menu > .right > a {
        padding: 15px 25px;
    }
    .menu > li > a:hover,
    .menu > li > a:focus {
        color: #3f51b5;
    }
    .submenu,
    .submenu .submenu {
        width: 100% !important;
        left: 0;
        position: static !important;
        border: none;
    }
    .submenu {
        border-top: none;
    }
    .megamenu {
        width: 100% !important;
        position: static;
        border-top: none !important;
        border-bottom: none;
        padding: 15px 0 0 30px;
        background-color: transparent;
    }
    .megamenu [class*="col-"] {
        float: none;
        display: block;
        width: 100% !important;
        margin-bottom: 30px;
    }
    .megamenu .row,
    .megamenu .row:first-child [class*="col-"]:first-child {
        margin-top: 0;
    }
    .menu > li > .submenu > li > a {
        padding-left: 40px !important;
    }
    .menu > li > .submenu > li > .submenu > li > a {
        padding-left: 62px !important;
    }
    .menu > li > .submenu > li > .submenu > li > .submenu > li > a {
        padding-left: 80px !important;
    }
    /* Topbar */
    .topbar .pull-right {
        float: none !important;
        margin-top: 20px;
        margin-bottom: 20px;
    }
}
/* *********************	头部 Headers 	********************* */
.logo {
    display: block;
    height: 74px;
    background-image: url("../img/logo.png");
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: -9999999px;
}
@media (max-width: 767px) {
    .logo-center {
        display: block;
        height: 62px;
        background-image: url("../img/logo.png");
        background-position: center center;
        background-repeat: no-repeat;
        text-indent: -9999999px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .logo {
        height: 64px;
        background-position: center bottom;
    }
}
@media (min-width: 768px) {
    .header-wrapper .navbar-right {
        margin-right: 0 !important;
    }
}
@media (max-width: 991px) {
    .header-wrapper .navbar-right {
        float: none !important;
    }
}
.main-header {
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.64);
}
@media (min-width: 992px) {
    .menu-fixed,
    .main-header {
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }
    /* Fixed Header */
    .menu-fixed .main-header {
        z-index: 9998;
        width: 100%;
        left: 0;
        background-color: rgba(250, 250, 250, 0.9);
        box-shadow: 0 5px 5px rgba(0, 0, 0, 0.64);
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }
    .header-dark .menu-fixed .main-header {
        background-color: rgba(41, 44, 49, 0.95);
    }
    .menu-fixed .menu > li > a {
        padding: 20px 20px 20px 20px;
    }
    .menu-fixed .megamenu,
    .menu-fixed .submenu {
        top: 66px;
    }
    .menu-fixed .logo {
        height: 66px;
    }
    /* 透明菜单 */
    .header-transparent.sticky-top #undefined-sticky-wrapper {
        height: auto !important;
    }
    .header-transparent .main-header {
        position: fixed;
        z-index: 999;
        width: 100%;
        left: 0;
        top: 0;
        background-color: transparent;
        -webkit-backface-visibility: hidden;
    }
    .header-transparent .logo {
        background-image: url("../img/logo-light.png");
    }
    .header-transparent .menu > li > a {
        color: #fff;
        opacity: 1;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }
    .header-transparent .menu > li > a:hover,
    .header-transparent .menu > li > a:focus,
    .header-transparent .menu > li:hover > a {
        color: #ff4081;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }
    .header-transparent .menu-fixed .main-header,
    .header-transparent.with-topbar .menu-fixed .main-header {
        background-color: #3f51b5;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }
    .header-transparent .menu-fixed .menu > li > a {
        color: #fff;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }
    .header-transparent .menu-fixed .logo {
        background-image: url("../img/logo.png");
    }
    .static-menu.header-transparent .main-header {
        position: absolute;
        top: 76px;
        margin-top: -76px;
    }
    .header-transparent.with-topbar .main-header {
        position: relative;
        background-color: rgba(255, 255, 255, 0.1);
    }
    /* Navigation menu over intro section */
    .h-wrapper {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        z-index: 999;
    }
    .push-top {
        margin-top: 46px;
    }
}
@media (min-width: 768px) {
    /* Menu Gray */
    .menu.menu-light .submenu,
    .menu.menu-light .megamenu {
        background-color: #eeeeee;
        color: #424242;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    /* Menu dark transparent */
    .menu.menu-dark-transparent .submenu,
    .menu.menu-dark-transparent .megamenu {
        background-color: rgba(41, 44, 49, 0.9);
    }
}
/* Menu button trigger */
#menu-trigger {
    position: fixed;
    top: 30px;
    left: 25px;
    z-index: 999;
    font-size: 30px;
    color: #3f51b5;
    padding: 8px 5px 5px;
    border-radius: 1px;
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
#menu-trigger.menu-close {
    top: 15px;
    left: 15px;
    font-size: 24px;
    background-color: transparent;
    padding: 5px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
#menu-trigger.right {
    right: 25px;
    left: auto;
}
#menu-trigger.right.menu-close {
    top: 15px;
    right: 15px;
    left: auto;
}
#menu-trigger.fullscreen-trigger.menu-close {
    font-size: 38px;
    top: 20px;
    left: 20px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
#menu-trigger.fullscreen-trigger.right.menu-close {
    top: 20px;
    right: 20px;
    left: auto;
}
#menu-trigger:before {
    font-family: 'ElegantIcons';
    content: "\61";
}
#menu-trigger.menu-close:before {
    font-family: 'ElegantIcons';
    content: "\4d";
}
/* *********************	Sliders		********************* */
/* Revolution Slider */
.tp-banner-container {
    width: 100%;
    position: relative;
    padding: 0;
}
.tp-banner {
    width: 100%;
    position: relative;
}
/* Slider Titles */
.title-slider-large {
    font-family: "Montserrat", "微软雅黑", sans-serif;
    font-size: 44px;
    line-height: 54px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
}
.title-slider-large.uppercased {
    text-transform: uppercase;
    letter-spacing: 2px;
}
.title-slider-large.bordered {
    border: 5px solid #fff;
    padding: 10px 20px;
}
.title-slider-large.br-top-bottom {
    border-top: 3px solid #f50057;
    border-bottom: 3px solid #f50057;
    padding: 15px 0;
}
.title-slider-large.dark,
.title-slider-medium.dark,
.title-slider-small.dark {
    color: #303336;
    border-color: #303336;
}
.title-slider-medium {
    font-family: "Montserrat", "微软雅黑", sans-serif;
    font-size: 23px;
    line-height: 32px;
    font-weight: 700;
    color: #e2e3e4;
    letter-spacing: 1px;
}
.title-slider-medium.uppercased {
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.title-slider-small {
    font-family: "Montserrat", "微软雅黑", sans-serif;
    font-size: 16px;
    line-height: 26px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #e2e3e4;
}
.title-slider-small.uppercased {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
@media (max-width: 991px) {
    .title-slider-large {
        font-size: 30px;
        line-height: 34px;
    }
    .tp-caption {
        padding: 0 30px;
    }
}
@media (max-width: 767px) {
    .title-slider-large {
        font-size: 24px;
        line-height: 30px;
        padding: 0 15px;
    }
    .tp-caption .title-slider-small,
    .tp-caption .btn-slider {
        display: none;
    }
    .tp-caption .br-bottom:after,
    .tp-caption .br-bottom-center:after {
        border-top: none;
    }
    .tp-caption {
        padding: 0 20px;
    }
}
/* Testimonials section */
.section-testimonials {
    position: relative;
}
.section-testimonials .fa {
    position: absolute;
    right: 40px;
    top: 0;
    font-size: 140px;
    color: #aaaab8;
    opacity: 0.2;
}
@media (max-width: 767px) {
    .section-testimonials .fa {
        right: 0;
        bottom: 0;
        top: auto;
    }
}
.section-testimonials blockquote {
    text-align: center;
    padding: 0 40px;
    margin: 0;
    font-size: 17px;
    border-left: 0;
    line-height: 30px;
    color: #889;
    font-style: italic;
}
.section-testimonials blockquote p {
    margin-bottom: 30px;
}
.section-testimonials blockquote h5 {
    margin: 0;
    font-family: "Montserrat", "微软雅黑", sans-serif;
    font-size: 14px;
    color: #778;
    font-style: normal;
}
.section-testimonials blockquote span {
    font-family: "Source Sans Pro", "微软雅黑", sans-serif;
    font-size: 12px;
    color: #3f51b5;
    margin-left: 15px;
    font-style: normal;
}
.section-testimonials blockquote footer:before,
.section-testimonials blockquote small:before,
.section-testimonials blockquote .small:before {
    content: "";
}
.section-testimonials .owl-portfolio .owl-controls {
    display: none !important;
}
.section-testimonials.testimonials-bg blockquote {
    color: #e2e3e6;
    opacity: 1;
}
.section-testimonials.testimonials-bg blockquote h5 {
    color: #e2e3e6;
    opacity: 0.95;
}
.section-testimonials.testimonials-bg .fa {
    color: #d0d4d8;
    opacity: 0.4;
}
.section-testimonials.testimonials-bg blockquote span {
    color: #e2e3e6;
}
/* *********************	Page Breadcrums 	********************* */
.page-breadcrumbs-wrapper {
    position: relative;
    top: -38px;
    margin-bottom: -38px;
}
.page-breadcrumbs {
    width: auto;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    background-color: #f5f5f5;
    padding: 7px 17px;
    font-size: 11px;
    font-weight: 600;
    color: #889;
    text-transform: uppercase;
}
.page-breadcrumbs a {
    color: #889;
}
.page-breadcrumbs a:hover,
.page-breadcrumbs a:focus,
.page-breadcrumbs a:active,
.page-breadcrumbs a.active {
    color: #99a;
}
.page-breadcrumbs .separator {
    margin: 0 8px;
}
.page-breadcrumbs-wrapper.pb2 {
    top: -90px;
    margin-bottom: -45px;
}
.page-breadcrumbs-wrapper.pb2 .page-breadcrumbs {
    border-radius: 2px;
    padding: 9px 14px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
}
/* Page breadcrumbs withouth background */
.page-breadcrumbs-wrapper.pb-without-bg {
    top: -50px;
    margin-bottom: -45px;
}
.page-breadcrumbs-wrapper.pb-without-bg .page-breadcrumbs {
    background-color: transparent;
    color: #d0d3d5;
}
.page-breadcrumbs-wrapper.pb-without-bg .page-breadcrumbs a {
    color: #d0d3d5;
}
.page-breadcrumbs-wrapper.pb-without-bg .page-breadcrumbs a:hover,
.page-breadcrumbs-wrapper.pb-without-bg .page-breadcrumbs a:focus,
.page-breadcrumbs-wrapper.pb-without-bg .page-breadcrumbs a:active,
.page-breadcrumbs-wrapper.pb-without-bg .page-breadcrumbs a.active {
    color: #e5e8ea;
}
/* *********************	Sections	********************* */
.section {
    padding: 50px 0;
}
.section-bg {
    padding: 50px 0;
    margin: 40px 0;
    position: relative;
}
.section-page {
    padding: 75px 0 60px;
}
.section-boxed {
    padding: 40px 30px;
}
.section-boxed-2 {
    padding: 40px 50px;
}
.section-large {
    padding: 70px 0;
}
.section-larger {
    padding: 90px 0;
}
.section-small {
    padding: 20px 0;
}
.section-fullwidth {
    padding-left: 15px;
    padding-right: 15px;
}
@media (min-width: 768px) {
    .section-fullheight {
        height: 100%;
    }
}
/* Intro Section */
.section-intro {
    position: relative;
    padding: 220px 0 160px;
}
.section-intro-2 {
    position: relative;
    padding: 160px 0;
}
.section-intro.intro-small {
    padding: 160px 0 100px;
}
@media (max-width: 991px) {
    .section-intro {
        padding: 120px 0 110px;
    }
}
@media (max-width: 767px) {
    .section-intro-2 {
        padding: 100px 0;
    }
}
/* Caption overlay */
@media (min-width: 768px) {
    .section-caption {
        position: absolute;
        top: 50%;
        left: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 100%;
    }
}
/* Intro Title */
.intro-title {
    font-size: 32px;
    font-weight: 400;
    color: #eaecf1;
    margin-bottom: 20px;
    line-height: 36px;
    letter-spacing: 1px;
    font-family: "Montserrat", "Source Sans Pro", "Helvetica New", "微软雅黑", sans-serif;
    opacity: 0.9;
}
.intro-title::after {
    content: "";
    display: block;
    width: 42px;
    height: 2px;
    background-color: #3f51b5;
    margin: 12px 0 14px;
}
.intro-title.intro-title-br0::after {
    content: "";
    display: none;
}
.intro-title.shadow {
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
/* Intro title small */
.intro-title.intro-title-small {
    font-size: 23px;
    line-height: 28px;
}
/* Intro Paragraph */
.intro-p {
    color: #eaecf1;
    font-size: 13px;
    margin-bottom: 0;
    font-family: "Montserrat", "微软雅黑", sans-serif;
    opacity: 0.9;
}
/* *********************	Boxes	********************* */
@media (max-width: 767px) {
    .xs-box {
        padding-bottom: 30px !important;
    }
    .xs-box2 {
        padding-bottom: 40px !important;
    }
    .xs-box3 {
        padding-bottom: 50px !important;
    }
}
@media (max-width: 991px) {
    .sm-box {
        padding-bottom: 30px !important;
    }
    .sm-box2 {
        padding-bottom: 40px !important;
    }
    .sm-box3 {
        padding-bottom: 50px !important;
    }
}
/* Column paddings */
.row.col-p0 {
    margin-left: 0;
    margin-right: 0;
}
.row.col-p0 [class*="col-"] {
    padding: 0;
}
.row.col-p5 {
    margin-left: -5px;
    margin-right: -5px;
}
.row.col-p5 [class*="col-"] {
    padding: 0 5px;
}
.row.col-p10 {
    margin-left: -10px;
    margin-right: -10px;
}
.row.col-p10 [class*="col-"] {
    padding: 0 10px;
}
.row.col-p15 {
    margin-left: -15px;
    margin-right: -15px;
}
.row.col-p15 [class*="col-"] {
    padding: 0 15px;
}
.row.col-p20 {
    margin-left: -20px;
    margin-right: -20px;
}
.row.col-p20 [class*="col-"] {
    padding: 0 20px;
}
.row.col-p30 {
    margin-left: -30px;
    margin-right: -30px;
}
.row.col-p30 [class*="col-"] {
    padding: 0 30px;
}
.row .col-p0 {
    padding-left: 0;
    padding-right: 0;
}
/* Box Services Style 1 */
.box-services-a .fa.fa-bg {
    background-color: #3f51b5;
    color: #fff;
    margin-right: 10px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.box-services-a .title-small {
    margin-bottom: 10px;
    color: #3f51b5;
}
.box-services-a:hover .fa.fa-bg {
    background-color: #424242;
    box-shadow: inset 2px 1px 8px rgba(0, 0, 0, 0.6);
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.box-services-a:hover .title-small {
    color: #ff4081;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
/* Box left and right */
.box-left {
    display: block;
    float: left;
    text-align: center;
}
.box-left img {
    width: 60px;
    height: 60px;
    margin-top: 10px;
}
.box-right {
    margin-left: 85px;
}
.box-right .title-small {
    margin-bottom: 8px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
/* Box services Style 2 */
.box-services-b:hover .title-small {
    color: #3f51b5;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.link-read-more {
    opacity: 0;
    color: #99a;
    font-size: 12px;
    margin-left: 30px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.box-services-a .title-uppercased .link-read-more {
    text-transform: lowercase;
    color: #3f51b5;
}
.box-services-b:hover .link-read-more,
.box-services-a:hover .link-read-more,
.box-services-d:hover .link-read-more,
.box-services-f:hover .link-read-more {
    opacity: 1;
    margin-left: 15px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.box-services-d:hover .social-icon a {
    margin-left: 0;
}
.box-services-b .link-read-more:hover,
.box-services-a .link-read-more:hover,
.box-services-b .link-read-more:focus,
.box-services-a .link-read-more:focus {
    color: #212121;
}
@media (max-width: 991px) {
    .link-read-more {
        opacity: 1;
        margin-left: 15px;
    }
}
@media (max-width: 767px) {
    .link-read-more {
        display: block;
        opacity: 1;
        margin-left: 0;
        margin-top: 10px;
    }
}
.box-services-b .box-left .fa-style1,
.box-services-c .fa-style1 {
    font-size: 30px;
    width: 60px;
    height: 60px;
    background-color: #42424a;
    color: #fff;
    border-radius: 4px;
    margin-top: 10px;
    padding-top: 15px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.box-services-b:hover .box-left .fa-style1,
.box-services-c:hover .fa-style1 {
    box-shadow: inset 2px 1px 8px rgba(0, 0, 0, 0.6);
    background-color: #3f51b5;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.box-services-b .box-left .fa-style2,
.box-services-c .fa-style2 {
    font-size: 45px;
    margin: 15px 0 0 12px;
    color: #3f51b5;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.box-services-b:hover .box-left .fa-style2,
.box-services-c:hover .fa-style2 {
    color: #424242;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.box-services-b .box-left .fa-style3,
.box-services-c .fa-style3 {
    font-size: 28px;
    width: 60px;
    height: 60px;
    background-color: #3f51b5;
    color: #fff;
    border-radius: 50%;
    margin-top: 10px;
    padding-top: 15px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.box-services-b:hover .box-left .fa-style3,
.box-services-c:hover .fa-style3 {
    background-color: #212121;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.box-services-b .fa-style4,
.box-services-c .fa-style4 {
    margin-bottom: 20px;
    font-size: 4em;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.box-services-b:hover .fa-style4,
.box-services-c:hover .fa-style4 {
    color: #3f51b5;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.box-services-a .fa-style5 {
    margin-right: 10px;
    font-size: 22px;
    padding-top: 5px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.box-services-a:hover .fa-style5 {
    color: #3f51b5;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.box-services-b .box-left .fa.circle,
.box-services-c .fa.circle {
    border-radius: 50%;
    font-size: 26px;
    padding-top: 17px;
}
/* Box-services style 3 */
.box-services-c {
    text-align: center;
}
.box-services-c .fa {
    margin-bottom: 15px;
}
/* Box Services style 4 */
.box-services-d {
    position: relative;
    padding: 60px 40px;
    color: #dedee3;
}
.box-services-d .bg-overlay {
    opacity: 0.6;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.box-services-d:hover .bg-overlay {
    opacity: 0.5;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.box-services-d.box-services-team {
    padding: 60px 40px 30px;
}
.box-services-d.box-services-team .bg-overlay {
    opacity: 0.7;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.box-services-d.box-services-team:hover .bg-overlay {
    opacity: 0.6;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.box-services-d .title-uppercased,
.box-services-d .title-medium {
    font-size: 20px;
    color: #dedee3;
    margin-bottom: 20px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.box-services-d:hover .title-uppercased,
.box-services-d:hover .title-medium {
    color: #3f51b5;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.box-service-d .title-medium {
    font-size: 22px;
}
.box-services-d .title-medium .link-read-more {
    font-size: 11px;
}
.box-services-d .link-read-more {
    color: #dedee3;
    text-transform: lowercase;
    font-size: 13px;
}
.box-services-d .link-read-more:hover,
.box-services-d .link-read-more:focus {
    color: #3f51b5;
}
/* Box services style 5 */
.box-services-e {
    background-color: #3f51b5;
    position: relative;
    color: #d2d2d9;
}
.box-services-e.main2 {
    background-color: #ff4081;
    position: relative;
    color: #d2d2d9;
}
.box-services-e.dark {
    background-color: #424242;
}
.box-services-e.orange {
    background-color: #ff9800;
}
.box-services-e.blue {
    background-color: #2196f3;
}
.box-services-e.yellow {
    background-color: #ffeb3b;
}
.box-services-e.green {
    background-color: #4caf50;
}
.box-services-e.transparent {
    background-color: transparent;
}
.box-services-e.gray {
    background-color: #eeeeee;
}
.box-services-e .fa {
    font-size: 100px;
    opacity: 0.25;
    position: absolute;
    bottom: -50px;
    right: -30px;
    color: #d2d2d9;
}
.box-services-d.box-services-e .title-uppercased {
    margin-bottom: 15px;
}
.box-services-d.box-services-e:hover .title-uppercased,
.box-services-d.box-services-e:hover .title-medium {
    color: #d2d2d9;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.box-services-d.box-services-e .link-read-more:hover,
.box-services-d.box-services-e .link-read-more:focus {
    color: #dedee3;
    opacity: 0.5;
}
.box-services-d.box-services-e .bg-overlay {
    opacity: 0.4;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.box-services-d.box-services-e:hover .bg-overlay {
    opacity: 0.3;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
/* Box services style 6 */
.box-services-f .content {
    margin: 0 5px;
}
.box-services-f .link-read-more {
    color: #889;
    text-transform: lowercase;
    font-size: 13px;
}
.box-services-f .link-read-more:hover,
.box-services-f .link-read-more:focus {
    color: #3f51b5;
}
.box-services-f .content {
    padding-bottom: 15px;
    border-bottom: 2px solid transparent;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.box-services-f:hover .content {
    padding-bottom: 2px;
    border-bottom: 2px solid #ccccd3;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
/* Border box */
@media (min-width: 768px) {
    .br-box {
        border-right: 1px solid #99a2a2;
        padding-top: 30px;
        padding-bottom: 10px;
    }
    .br-box.last {
        border-right: none;
    }
}
/* *********************	Titles	********************* */
.title-small {
    font-family: "Montserrat", "微软雅黑", sans-serif;
    margin: 0 0 15px;
    font-size: 17px;
    color: #424242;
}
.title-small-a {
    font-size: 16px;
}
.title-large {
    font-family: "Montserrat", "微软雅黑", sans-serif;
    font-size: 28px;
    color: #424242;
    margin: 0 0 40px;
    line-height: 32px;
    letter-spacing: 1px;
}
.title-large.title-larger {
    font-size: 32px;
    line-height: 36px;
}
.title-medium {
    font-family: "Montserrat", "微软雅黑", sans-serif;
    font-size: 23px;
    color: #424242;
    margin: 0 0 20px;
    line-height: 28px;
    letter-spacing: 1px;
}
.title-medium.small {
    font-size: 19px;
}
.title-uppercased {
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #58585c;
    margin-bottom: 15px;
}
.title-uppercased.small {
    font-size: 16px;
}
/* Title shadows */
.title-shadow-a {
    text-shadow: 2px 2px 6px rgba(10, 10, 15, 0.2);
}
.title-shadow-b {
    text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
}
/* Paragraphs */
.p-lead {
    font-size: 15px;
    font-weight: 600;
}
.p-lead-b {
    font-size: 15px;
    line-height: 28px;
    font-weight: 600;
    color: #99a;
}
.p-large {
    font-size: 17px;
}
.title-border {
    margin-bottom: 40px;
    padding: 0 0 5px;
    border-bottom: 2px solid #e1e1e1;
    position: relative;
    font-size: 27px;
    color: #424242;
    font-weight: 400;
}
.title-border:after {
    width: 50px;
    height: 2px;
    display: block;
    content: '';
    background-color: #3f51b5;
    position: absolute;
    bottom: -2px;
    left: 0%;
}
/* *********************	Misc Sections	********************* */
/* Stats, Features, Team, Plans, Testimonials, Contact etc */
@media (max-width: 991px) {
    .owl-carousel.sm-owl-cursor:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 15px;
        width: 32px;
        height: 32px;
        background: url("../img/cursor_move.png") right top no-repeat;
        z-index: 999;
    }
    .sm-cursor {
        width: 32px;
        height: 32px;
        background: url("../img/cursor_move.png") right top no-repeat;
    }
}
/* Stats Section */
.stats-timer {
    color: #888894;
    font-size: 40px;
    margin-bottom: 20px;
    font-weight: 400;
    font-family: 'Montserrat', "微软雅黑", sans-serif;
}
.stats-content h3 {
    margin-bottom: 0;
    font-size: 16px;
    color: #778;
    font-family: 'Montserrat', "微软雅黑", sans-serif;
}
.stats-content {
    padding: 40px 20px;
    text-align: center;
    position: relative;
}
.stats-content .fa {
    position: absolute;
    bottom: 40px;
    right: 50px;
    opacity: 0.3;
    color: #99a;
    font-size: 60px;
}
@media (max-width: 991px) {
    .stats-content .fa {
        position: absolute;
        bottom: auto;
        top: 40px;
        right: 20px;
        opacity: 0.1;
    }
}
/* Clients */
.client {
    position: relative;
    width: 100%;
    height: 160px;
}
.c-img {
    position: absolute;
    right: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}
.c-img.on {
    opacity: 0.8;
    -webkit-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}
/* Plans Section */
.plan {
    z-index: 1;
    text-align: center;
    border-top: 2px solid #3f51b5;
}
@media (max-width: 767px) {
    .plan {
        margin-bottom: 30px !important;
        margin-top: 0 !important;
    }
}
.plans-b .plan {
    margin-top: 0 !important;
}
.plan-basic {
    margin-top: 62px;
}
.plan-professional {
    margin-top: 0;
}
.plan-enterprise {
    margin-top: 62px;
}
.plan-header {
    padding: 30px 30px 25px;
    background-color: #323239;
}
.plan-price {
    font-family: "Montserrat", "微软雅黑", sans-serif;
    font-size: 55px;
    color: #3f51b5;
    margin-bottom: 20px;
}
.plan-title {
    font-family: "Montserrat", "微软雅黑", sans-serif;
    margin-bottom: 0;
    font-size: 19px;
    color: #adb7bf;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 3px 3px 9px rgba(0, 0, 0, 0.2);
}
.plan-features {
    list-style: none;
    margin: 0;
    padding: 40px 20px 20px;
    line-height: 27px;
}
.plan-features > li {
    margin-bottom: 15px;
    font-size: 15px;
}
.plan-feature-off {
    text-decoration: line-through;
    color: #adb7bf;
}
.plan-popular {
    font-family: "Montserrat", "微软雅黑", sans-serif;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #adb7bf;
    margin-bottom: 36px;
}
.plan-curency {
    vertical-align: super;
    font-size: 25px;
}
.plan-period {
    font-family: "Montserrat", "微软雅黑", sans-serif;
    font-size: 12px;
    color: #d4d4d9;
}
.plan-register a {
    display: block;
    padding: 15px 30px;
    background-color: #323239;
    color: #adb7bf;
    text-transform: uppercase;
    font-size: 15px;
    font-family: "Montserrat", "微软雅黑";
    letter-spacing: 2px;
    text-shadow: 3px 3px 9px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.plan-register a:hover,
.plan-register a:focus {
    color: #fff;
    background-color: #3f51b5;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
/* *********************	Portfolio	********************* */
/* Portfolio filter */
.portfolio-filter-wrapper {
    position: relative;
    top: -41px;
    margin-bottom: -41px;
}
.portfolio-filter {
    width: auto;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    background-color: #f5f5f5;
    padding: 9px 12px 6px;
}
.portfolio-filter.pf2 {
    background-color: transparent;
    padding: 5px 0 0;
}
.portfolio-filter > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.portfolio-filter li {
    display: inline-block;
    padding: 0 10px;
}
.portfolio-filter li > a {
    font-size: 14px;
    font-weight: 600;
    color: #889;
    text-transform: capitalize;
    border: none;
    background: none;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.portfolio-filter li a:hover,
.portfolio-filter li a:focus,
.portfolio-filter li a:active,
.portfolio-filter li a.active {
    color: #3f51b5;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
.portfolio-filter-wrapper.pfw2 {
    top: -90px;
    margin-bottom: -45px;
}
.portfolio-filter-wrapper.pfw2 .portfolio-filter {
    border-radius: 2px;
    padding: 9px 12px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5);
}
/* Portfolio Container */
.portfolio {
    overflow: visible !important;
    margin: 0 auto;
    position: relative;
}
.portfolio img {
    width: 100%;
    height: auto;
}
/* Portfolio Item */
.portfolio-el {
    margin: 0 0 10px;
    overflow: hidden;
    position: relative;
    padding: 0;
}
/* Portfolio Hover effects */
.view {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}
.view .mask {
    position: absolute;
    overflow: hidden;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ff4081;
    padding: 25px;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in 0.4s;
    transition: all 0.3s ease-in 0.4s;
}
.view:hover .mask,
.view:focus .mask {
    opacity: 0.87;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
/* Image */
.view img {
    display: block;
    position: relative;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
/* Title */
.view .project-title {
    font-family: "Montserrat", "微软雅黑", sans-serif;
    color: #fff;
    position: relative;
    font-size: 20px;
    font-weight: 400;
    opacity: 0;
    margin-bottom: 15px;
    -webkit-transform: scale(3);
    -ms-transform: scale(3);
    transform: scale(3);
    -webkit-transition: all 0.3s ease-in-out 0.1s;
    transition: all 0.3s ease-in-out 0.1s;
}
.view:hover .project-title,
.view:focus .project-title {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
/* Text */
.view .text {
    font-size: 12px;
    position: relative;
    color: #dedee4;
    font-family: "Montserrat", "微软雅黑", sans-serif;
    opacity: 0;
    margin-bottom: 0;
    -webkit-transform: scale(3);
    -ms-transform: scale(3);
    transform: scale(3);
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.view:hover .text,
.view:focus .text {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
/* Date */
.view .date {
    font-size: 10px;
    text-transform: uppercase;
    position: relative;
    color: #dedee4;
    font-family: "Montserrat", "微软雅黑", sans-serif;
    opacity: 0;
    position: absolute;
    bottom: 15px;
    right: 25px;
    margin-bottom: 0;
    -webkit-transform: scale(3);
    -ms-transform: scale(3);
    transform: scale(3);
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.view:hover .date,
.view:focus .date {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
/* Portfolio align middle */
.portfolio-middle {
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
/* Portfolio no animations */
.portfolio-animation-off .view .project-title,
.portfolio-animation-off .view .date,
.portfolio-animation-off .view .text {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.portfolio-animation-off .view .mask,
.portfolio-text .view .mask {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
/* Portfolio center */
.portfolio-center .portfolio-middle {
    text-align: center;
    width: 100%;
}
.portfolio-center .view .mask {
    padding: 0;
}
.portfolio-center .view .project-title {
    margin-bottom: 7px;
}
/* Portfolio Text */
.portfolio-text .mask .fa {
    padding: 20px;
    color: #dedee4;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.portfolio-text .mask .fa:hover {
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    background-color: rgba(63, 81, 181, 0.8);
    box-shadow: 2px 4px 20px rgba(0, 0, 0, 0.8);
}
.portfolio-text-content {
    padding: 18px 10px 25px;
    text-align: center;
}
.portfolio-text-title {
    font-family: "Montserrat", "微软雅黑", sans-serif;
    color: #424242;
    font-size: 19px;
    font-weight: 400;
    margin-bottom: 5px;
}
.portfolio-text-p {
    font-size: 12px;
    color: #757575;
    font-family: "Montserrat", "微软雅黑", sans-serif;
    margin-bottom: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.portfolio-text .portfolio-el:hover .portfolio-text-p {
    color: #3f51b5;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
/* Porrtfolio columns */
.portfolio.columns-2 .mask {
    padding: 40px;
}
.portfolio.columns-2 .view .date {
    bottom: 30px;
    right: 40px;
}
.portfolio-fullwidth .portfolio-el,
.portfolio-boxed .portfolio-el {
    margin-bottom: 0;
}
/* Project Portfolio */
.project-title {
    color: #424242;
    font-family: 'Montserrat', "微软雅黑", sans-serif;
    margin-bottom: 10px;
    font-size: 23px;
    letter-spacing: 0.5px;
}
.project-image img {
    border-radius: 1px;
}
/* Project details list */
.project-details {
    list-style: none;
    padding: 0;
    margin: 0;
}
.project-details li {
    margin-bottom: 15px;
}
.project-details li:last-child {
    margin-bottom: 0;
}
.project-details li span {
    margin-right: 10px;
    font-weight: 700;
}
.project-details li .fa {
    margin-right: 10px;
    color: #3f51b5;
}
.portfolio-project-wide {
    position: relative;
}
.portfolio-project-wide img {
    width: 100%;
    height: 600px;
}
/* Portfolio and blog Carousel */
.owl-portfolio .owl-controls {
    position: absolute;
    bottom: 10px;
    left: 50%;
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.owl-portfolio .owl-el,
.owl-carousel .owl-el {
    cursor: move;
    cursor: url("../img/cursor_move.png") 40 40, move;
}
.owl-carousel.owl-p10 .owl-el {
    padding-right: 10px;
}
/* *********************	Blog	********************* */
/* Blog Section */
.blog-item {
    margin: 0 0 30px;
    background-color: #f9f9fa;
    text-align: left;
    border-radius: 1px;
    overflow: hidden;
}
.blog-item .blog-caption {
    padding: 20px 26px 20px;
}
.blog-item img {
    width: 100%;
    height: auto;
}
.blog-item .post-title {
    font-family: "Montserrat", "微软雅黑", sans-serif;
    margin-bottom: 0;
    font-size: 19px;
    color: #424242;
    font-weight: 400;
}
/* Sub Post title */
.blog-item .sub-post-title {
    margin: 0 0 15px;
}
.blog-item .sub-post-title span,
.blog-item .sub-post-title a {
    font-size: 13px;
    color: #616161;
}
.blog-item .sub-post-title a:hover {
    color: #3f51b5;
}
.blog-item .sub-post-title .separator {
    margin: 0 10px;
}
.blog-item .blog-image iframe {
    margin-bottom: -7px;
}
/* Read more */
.read-more {
    font-family: "Montserrat", "微软雅黑", sans-serif;
    font-size: 10px;
    color: #3f51b5;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.read-more:hover {
    color: #212121;
}
.post-format {
    font-size: 20px;
    color: #99a;
    opacity: 0.8;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.blog-item:hover .post-format {
    color: #424242;
    opacity: 1;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.blog-list .blog-item .blog-caption {
    padding: 17px 20px 15px;
}
.blog-list .blog-item {
    margin: 0 0 40px;
}
.blog-item .media .author-img {
    width: 140px;
    height: 140px;
}
.blog-item .media .blog-author {
    font-family: "Montserrat", "微软雅黑", sans-serif;
    font-size: 15px;
    color: #757575;
}
.blog-item .media .blog-author:after {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    background-color: #3f51b5;
    margin: 6px 0 14px;
}
/* Blog full post */
.blog-post-title {
    font-family: "Montserrat", "Helvetica New", "微软雅黑", sans-serif;
    font-size: 18px;
    margin-bottom: 20px;
    color: #424242;
}
.blog-post-lead {
    font-size: 14px;
    color: #757575;
    line-height: 28px;
    margin-bottom: 50px;
    font-family: "Montserrat", "Helvetica New", "微软雅黑", sans-serif;
}
.blog-post-image {
    position: relative;
    border-radius: 1px;
    overflow: hidden;
}
.blog-image-source {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(20, 20, 20, 0.7);
    padding: 5px 15px;
    color: #e8e8e8;
}
.blog-post-content {
    margin-bottom: 80px;
}
@media (max-width: 767px) {
    .author-post-social {
        margin-top: 10px;
        float: left !important;
    }
}
/* Blog Intro Share icons */
.intro-share {
    margin-left: -7px !important;
}
.intro-share > li .fa {
    font-size: 17px;
    color: #e8eaf4;
    opacity: 0.8;
    padding-top: 5px;
}
.intro-share > li > a:hover .fa {
    background-color: transparent;
    color: #fff;
    opacity: 1;
}
/* *********************	Sidebar		********************* */
/* Sidebar */
@media (max-width: 767px) {
    .sidebar {
        margin-top: 60px;
    }
    .sidebar-nav {
        margin-bottom: 60px;
    }
}
@media (min-width: 768px) {
    .space-right {
        padding-right: 25px;
    }
    .space-left {
        padding-left: 25px;
    }
}
@media (max-width: 991px) {
    .sidebar-blog-post {
        margin-top: 60px;
    }
    .page-sidebars {
        margin-bottom: 50px;
        padding: 0;
    }
}
/* Sidebars */
.page-sidebars {
    padding: 0 25px;
}
.sidebar-widget {
    margin-bottom: 40px;
    position: relative;
}
@media (max-width: 767px) {
    .sidebar-widget:last-child {
        margin-bottom: 10px;
    }
}
.sidebar-widget .sidebar-title {
    margin: 0 0 20px;
    font-family: "Montserrat", "微软雅黑", sans-serif;
    font-size: 16px;
    color: #424242;
}
.sidebar-widget .tab-content {
    padding: 25px 0 0 !important;
}
/* Sidebar Tags*/
.tags a {
    display: inline-block;
    padding: 0 10px 5px 0;
    font-family: "Montserrat", "微软雅黑", sans-serif;
    font-size: 11px;
    line-height: 16px;
    color: #778;
    letter-spacing: 0.5px;
    -webkit-transition: all .4s linear;
    transition: all .4s linear;
}
.tags a.big {
    font-size: 13px;
}
.tags a:hover {
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    color: #212121;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
/* Sidebar Categories */
.sidebar-categories {
    padding: 0;
    list-style: none;
}
.sidebar-categories li {
    padding-bottom: 8px;
}
.sidebar-categories li:last-child {
    padding-bottom: 0;
}
.sidebar-categories .fa {
    margin-right: 10px;
    font-size: 10px;
}
.sidebar-categories li a {
    color: #757575;
}
.sidebar-categories li:hover a {
    color: #3f51b5;
    padding-left: 8px;
}
/* Blog Sidebar posts */
.sidebar-posts {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sidebar-post {
    clear: both;
    margin-bottom: 15px;
}
.sidebar-post .image-post {
    float: left;
    width: 65px;
    height: 60px;
    border-radius: 2px;
    overflow: hidden;
    display: block;
    position: relative;
}
.sidebar-post .image-post-date {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    font-family: "Montserrat", "Source Sans Pro", "Helvetica New", "微软雅黑", sans-serif;
    font-size: 12px;
    color: #e8e8e8;
    text-transform: uppercase;
    line-height: 20px;
    padding-top: 10px;
    background-color: rgba(20, 20, 20, 0.6);
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
}
.sidebar-post:hover .image-post-date {
    opacity: 0;
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
}
.sidebar-posts img {
    width: 66px;
    height: 60px;
}
.sidebar-post h5 {
    margin-bottom: 3px;
}
.sidebar-post a {
    font-family: "Montserrat", "Source Sans Pro", "Helvetica New", "微软雅黑", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #424242;
    -webkit-transition: all .3s linear;
    transition: all .3s linear;
}
.sidebar-post h5 a:hover {
    color: #3f51b5;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}
.sidebar-post .info-post {
    margin-left: 80px;
    padding-top: 5px;
}
.sidebar-post .info-post span {
    font-size: 13px;
    color: #778;
}
/* Sidebar Contact */
.sidebar-contact {
    margin-bottom: 0;
}
.sidebar-contact p {
    margin-bottom: 12px;
}
.sidebar-contact .fa {
    margin-right: 8px;
    width: 14px;
    color: #777788;
}
/* Sidebar Tweets */
.sidebar-tweet {
    margin-bottom: 15px;
}
.sidebar-tweet .fa {
    display: block;
    float: left;
    font-size: 18px;
    color: #889;
    padding-top: 8px;
}
.tweet-content {
    margin-left: 30px;
    margin-bottom: 10px;
}
.tweet-content .tweet-user {
    margin-right: 10px;
}
.tweet-content small {
    display: block;
    color: #889;
}
/* Sidebar Navigation */
.navigation-sidebar ul > li {
    padding: 4px 0;
}
.navigation-sidebar li > a {
    display: block;
    color: #666672;
    padding: 4px 0 4px 10px;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
    border: 0px solid #424242;
}
.navigation-sidebar .active a,
.navigation-sidebar .current a,
.navigation-sidebar li a:hover,
.navigation-sidebar li a:focus {
    border-left: 2px solid #424242;
    color: #424242;
    padding-left: 20px;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
/* *********************	Pages	********************* */
/* Page Sign in / Register */
.sign-in-area {
    position: relative;
    top: -110px;
    margin-bottom: -50px;
    background-color: #f5f5f5;
    padding: 30px;
    border-radius: 5px;
}
.page-sign-in .info-area {
    padding: 90px 0 50px;
}
@media (max-width: 991px) {
    .sign-in-area {
        margin-top: 40px;
    }
    .page-sign-in .info-area {
        padding: 0 0 60px;
    }
}
/* Contact template */
.page-contact iframe.map {
    width: 100%;
    height: 400px;
    border: 1px solid #ddd;
    border-radius: 2px;
    margin-bottom: -8px;
}
.contact-map-wrapper {
    position: relative;
    top: -210px;
    margin-bottom: -210px;
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 5px;
}
.contact-map-wrapper.form {
    padding: 20px;
}
.page-contact .box-right {
    margin-left: 50px;
}
.page-contact .box-left .fa {
    font-size: 30px;
    margin-top: 5px;
    width: 30px;
    color: #99a;
}
.page-contact .box-services-d.box-services-e p {
    font-size: 16px;
}
@media (max-width: 991px) {
    .contact-map-wrapper {
        top: auto;
        margin-bottom: 0;
        padding: 0;
    }
    .contact-map-wrapper.form {
        padding: 0;
    }
}
/* FAQ Template */
.page-faq .tab-content {
    padding-top: 0;
}
.faq-list > li {
    padding: 2px 0;
}
.faq-list > li > a {
    color: #757575;
}
.faq-list > li > a:hover,
.faq-list > li > a:focus {
    color: #3f51b5;
    padding-left: 10px;
}
/* 404 and 403 Template */
.text-404 {
    font-size: 280px;
    font-weight: bold;
    line-height: 100%;
    display: block;
    text-align: center;
    color: #ccccd2;
}
.page-404 {
    padding: 70px 0 80px;
}
.over-404 {
    position: absolute;
    top: 55%;
    -webkit-transform: translateY(-55%);
    -ms-transform: translateY(-55%);
    transform: translateY(-55%);
    width: 100%;
}
.title-404 {
    font-weight: 600;
    color: #666670;
    font-size: 40px;
    margin-bottom: 60px;
    text-align: center;
    line-height: 36px;
}
.content-404 {
    position: relative;
    text-align: center;
}
@media (max-width: 767px) {
    .page-404 .text-404 {
        font-size: 130px;
        margin-bottom: 30px;
    }
    .page-404 .over-404 {
        position: relative;
        top: 0;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        width: 100%;
    }
    .page-404 {
        padding: 50px 0;
    }
    .title-404 {
        font-size: 36px;
        margin-bottom: 30px;
        line-height: 46px;
    }
}
/* Page Clients */
.page-clients {
    text-align: center;
}
.page-clients a {
    opacity: 0.6;
    padding: 10px;
    display: block;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.page-clients a:hover {
    opacity: 1;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.page-clients-b a {
    padding: 10px;
    background-color: #eeeeee;
    border-radius: 1px;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}
.page-clients-b a:hover {
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.6);
}
.page-clients-c a {
    padding: 30px;
    background-color: #efeff3;
    border-radius: 1px;
    border: 1px solid #e1e1e5;
}
.page-clients-c a:hover {
    box-shadow: 2px 2px 4px rgba(10, 10, 15, 0.15);
}
.page-clients .tooltip-inner {
    padding: 15px 20px;
    border-radius: 3px;
    color: #fafafd;
    letter-spacing: 1px;
    background-color: rgba(20, 20, 30, 0.7);
}
.page-clients .tooltip.top .tooltip-arrow {
    border-top-color: rgba(20, 20, 30, 0.7);
}
/* *********************	Elements	********************* */
/* Forms, Buttons, Alerts, Progress Bars, Tabs, Accordions,
	Popovers, Tolltips, Toggles etc */
/* Tables */
.table th,
.table td {
    padding: 12px !important;
}
/* Panels */
.panel-group .panel {
    border-radius: 0;
}
.panel {
    background-color: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
}
.panel-heading {
    padding: 7px 0;
    border-bottom: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.panel-title {
    font-family: "Montserrat", "微软雅黑", sans-serif;
    color: #666670;
    font-size: 15px;
}
.panel-title:hover a,
.panel-title:focus a {
    color: #888892;
}
.panel-title .fa {
    margin-right: 8px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.panel-title .fa.upside-down {
    -webkit-transform: rotateZ(180deg);
    -ms-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.panel-group .panel-heading + .panel-collapse > .panel-body,
.panel-group .panel-heading + .panel-collapse > .list-group {
    border-top: none;
}
.panel-body {
    padding: 10px 0 5px 25px;
}
/* Tabs */
.tab-content {
    padding: 20px 5px;
}
.tab-content.vertical {
    padding: 5px 5px 20px 20px;
}
.nav-tabs {
    border: none;
}
.nav-tabs > li {
    float: left;
    margin-bottom: -1px;
}
.nav-tabs > li > a {
    border: none;
    border-radius: 0;
    font-family: "Montserrat", "微软雅黑", sans-serif;
    font-size: 12px;
    color: #606063;
    border-top: 2px solid #555557;
    background-color: transparent;
    padding: 12px 20px;
    margin-right: 0;
}
.nav-tabs > li > a .fa {
    margin-right: 10px;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    color: #fff;
    background-color: #555557;
    border: none;
    border-top: 2px solid #555557;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    color: #3f51b5;
    background-color: transparent;
    border: none;
    border-top: 2px solid #555557;
}
/* nav-tabs vertical */
.nav-tabs.vertical > li {
    float: none;
    margin-bottom: 0;
}
.nav-tabs.vertical > li > a {
    border-radius: 0;
    border-top: none;
    border-left: 2px solid #555557;
}
.nav-tabs.vertical > li.active > a,
.nav-tabs.vertical > li.active > a:hover,
.nav-tabs.vertical > li.active > a:focus {
    border-top: none;
    border-left: 2px solid #555557;
}
@media (max-width: 767px) {
    .tab-content.vertical {
        padding: 20px 5px;
    }
    .nav-tabs > li {
        float: none;
        margin-bottom: 0;
    }
    .nav-tabs > li > a {
        border-radius: 0;
        border-top: none;
        border-left: 2px solid #555557;
    }
    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
        border-top: none;
        border-left: 2px solid #555557;
    }
}
/* Buttons */
.btn {
    border-radius: 2px;
    padding: 8px 14px;
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}
.btn:hover {
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
/* Button style 1 */
.btn-a {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    background: #424242;
    -webkit-transition: color 0.3s ease-out;
    transition: color 0.3s ease-out;
    padding: 8px 14px;
    border: none;
    color: #fff;
}
.btn-a:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #3f51b5;
    border-radius: 2px;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
}
.btn-a:hover,
.btn-a:focus,
.btn-a:active {
    color: #fff;
}
.btn-a:hover:before,
.btn-a:focus:before,
.btn-a:active:before {
    -webkit-transform: scale(0);
    transform: scale(0);
}
/* Button style 2 - simple */
.btn-b {
    background-color: #e4e4e4;
    border: none;
    color: #555560;
}
.btn-b:hover,
.btn-b:focus,
.btn-b:active,
.btn-b.active {
    background-color: #dfdfdf;
    border: none;
    color: #555557;
}
/* Button style 3 - bordered */
.btn-c {
    background-color: transparent;
    color: #3f51b5;
    border: 1px solid #3f51b5;
    border-radius: 2px;
    padding: 7px 13px;
}
.btn-c:hover,
.btn-c:focus,
.btn-c:active,
.btn-c.active {
    color: #424242;
    border: 1px solid #424242;
}
/* Button style 4 - Uppercased */
.btn-d {
    background-color: #505460;
    color: #fff;
    border-radius: 2px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    padding: 9px 18px;
}
.btn-d:hover,
.btn-d:focus,
.btn-d:active,
.btn-d.active {
    background-color: #3f51b5;
    color: #fff;
    box-shadow: inset 2px 1px 6px rgba(0, 0, 0, 0.6);
}
/* Button style 5 - Bordered large */
.btn-e {
    background-color: transparent;
    color: #3f51b5;
    border: 1px solid #3f51b5;
    border-radius: 2px;
    padding: 10px 20px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}
.btn-e:hover,
.btn-e:focus,
.btn-e:active,
.btn-e.active {
    color: #fff;
    background-color: #3f51b5;
    box-shadow: 2px 4px 14px rgba(0, 0, 0, 0.5);
}
/* Background buttons */
.btn.btn-bg {
    color: #fff;
    border: none;
    padding: 6px 14px;
}
.btn.btn-bg:hover,
.btn.btn-bg:focus,
.btn.btn-bg:active {
    background-color: #424242 !important;
    color: #fff;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
}
.btn-icon .fa {
    margin-right: 8px;
}
/* Group Buttons - Dropdown menu */
.dropdown-menu {
    min-width: 150px;
    margin: 0;
    background-color: #f6f6f6;
    border: none;
    border-radius: 2px;
}
.dropdown-menu > li > a {
    color: #444450;
    padding: 5px 20px;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: #eaeaea;
}
/* Tooltips */
.tooltip-inner {
    padding: 12px 20px;
    border-radius: 3px;
    color: #fafafd;
    background-color: rgba(15, 15, 20, 0.8);
}
.tooltip.top .tooltip-arrow {
    border-top-color: rgba(15, 15, 20, 0.8);
}
.tooltip.bottom .tooltip-arrow {
    border-bottom-color: rgba(15, 15, 20, 0.8);
}
.tooltip.right .tooltip-arrow {
    border-right-color: rgba(15, 15, 20, 0.8);
}
.tooltip.left .tooltip-arrow {
    border-left-color: rgba(15, 15, 20, 0.8);
}
/* Popovers */
.popover {
    border-radius: 0;
    font-family: "Source Sans Pro", "微软雅黑", sans-serif;
    border: none;
    background-color: #fcfcfc;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    color: #757575;
    padding: 3px 3px 8px;
}
.popover-title {
    padding: 10px 14px 0;
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    background-color: inherit;
    border-bottom: none;
    border-radius: 0;
}
.popover-title::after {
    content: "";
    display: block;
    height: 1px;
    width: 25px;
    border-top: 2px solid #3f51b5;
    margin: 12px 0 5px;
}
/* Modals */
.modal {
    z-index: 9999;
}
.modal-content {
    border-radius: 1px;
    background-color: #fafafa;
    padding: 10px;
}
.modal-title {
    font-family: "Montserrat", "微软雅黑", sans-serif;
    font-size: 17px;
    color: #424242;
}
.modal-title:after {
    content: "";
    display: block;
    height: 1px;
    width: 35px;
    border-top: 2px solid #3f51b5;
    margin: 10px 0 10px;
}
.modal-header,
.modal-footer {
    border: none;
}
/* Alerts */
.alert {
    border-radius: 1px;
    border: none;
    padding: 10px 20px;
    position: relative;
}
.alert.alert-bg {
    color: rgba(255, 255, 255, 0.9);
    padding: 20px 40px 20px 20px;
}
.alert .fa {
    display: block;
    float: left;
    margin: 5px 20px 15px 5px;
}
.alert.alert-dismissable .close {
    position: absolute;
    right: 10px;
    top: 5px;
}
.alert-modal {
    position: fixed;
    top: 80px;
    left: 0;
    opacity: 0;
    width: 100%;
    margin-top: -30px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.alert-modal.alert-modal-on {
    opacity: 0.9;
    margin-top: 0;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.alert-modal .alert {
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.2);
}
/* Pagination */
.pagination {
    margin: 20px 0 5px;
}
.pagination > li > a {
    border: none;
    margin-right: 7px;
    padding: 5px 12px;
    color: #3f51b5;
    background-color: #f5f5f5;
    border-radius: 3px;
}
.pagination > li > a > .fa {
    font-size: 10px;
}
.pagination > .active > a {
    color: #fff;
    background-color: #3f51b5;
    border-radius: 2px;
}
/*.pagination li:first-child.disabled a { padding-left: 0 !important; }*/
.pagination li:first-child a {
    border-bottom-left-radius: 2px;
    border-top-left-radius: 2px;
}
.pagination li:last-child a {
    border-bottom-right-radius: 2px;
    border-top-right-radius: 2px;
}
.pagination > li a:hover {
    background-color: #3f51b5;
    color: #fff;
}
.pagination .active a:hover {
    background-color: #424242;
}
.pagination > .disabled a {
    background: transparent;
    border: none;
    color: #757575;
}
.pagination > .disabled a:hover {
    background: transparent;
}
.pagination.pagination-2 > li > a {
    color: #fff;
    background-color: #d8d8da;
    border: 0;
    border-radius: 2px;
}
.pagination.pagination-2.dark > li > a {
    background-color: #4a4b4e;
    color: #fff;
}
.pagination.pagination-2 > .active a,
.pagination.pagination-2.dark > .active a {
    background-color: #3f51b5;
}
.pagination.pagination-2 > li a:hover {
    background-color: #3f51b5;
    color: #fff;
    border: none;
    box-shadow: inset 2px 1px 6px rgba(0, 0, 0, 0.6);
}
.pagination.pagination-2 .active a:hover {
    background-color: #424242;
    color: #fff;
}
.pagination.pagination-2 .disabled a,
.pagination.pagination-2 .disabled a:hover,
.pagination.pagination-2 .disabled a:focus {
    color: #fff;
    background-color: #d8d8da;
    box-shadow: none;
}
.pagination.pagination-2.dark .disabled a,
.pagination.pagination-2.dark .disabled a:hover,
.pagination.pagination-2.dark .disabled a:focus {
    background-color: #4a4b4e;
    color: #fff;
    box-shadow: none;
}
/* Media */
.media,
.media .media {
    margin-top: 40px;
}
h4.media-heading {
    color: #212121;
    font-size: 17px;
    margin: 2px 0 6px;
}
.media-heading .date {
    margin-left: 20px;
    font-size: 12px;
}
.media-heading .reply {
    margin-left: 20px;
    font-size: 13px;
}
.media-heading .reply a:hover {
    text-decoration: none;
    color: #453951;
}
.media .media-object {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    margin-top: 5px;
}
.media-heading > .user {
    font-size: 15px;
    color: #616161;
}
.media-heading > .user:hover,
.media-heading > .user:focus,
.media-heading > .user:active {
    color: #3f51b5;
}
.media > .pull-left {
    margin-right: 15px;
}
@media (max-width: 767px) {
    #blog-posts .media,
    #blog-posts .media-body {
        overflow: visible !important;
    }
    .media > .pull-left {
        display: none;
    }
    .media-heading > .user {
        display: block;
    }
    .media-heading .date {
        margin-left: 0;
    }
}
/* Blockquotes */
.blockquote {
    border-left: 2px solid #3f51b5;
    background: #f5f5f5;
}
.blockquote p {
    font-size: 14px;
    line-height: 26px;
    color: #898994;
}
.blockquote cite {
    color: #3f51b5;
    font-size: 14px;
    margin-left: 10px;
}
.blockquote small {
    display: inline-block;
    font-size: 13px;
}
.blockquote-2 {
    border-left: 3px solid #ddd;
}
/* Lists */
.unstyled-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.list-medium > li {
    margin-bottom: 5px;
}
/* Icons */
.fa.fa-border {
    border: 2px solid #ddd;
}
.fa.fa-bg {
    background-color: #f0f0f0;
    padding: 6px 8px;
    border-radius: 3px;
}
.fa.fa-bg-2 {
    background-color: #f0f0f0;
    padding: 15px;
    border-radius: 50%;
}
.fa.fa-bg-3 {
    background-color: #444;
    padding: 15px;
    border-radius: 50%;
}
.box-icon {
    font-size: 13px;
    width: 28px;
    height: 28px;
    color: #fafafa;
    padding-top: 7px;
    background-color: #3f51b5;
    text-align: center;
    vertical-align: middle;
    border-radius: 4px;
}
/* Dropcaps */
.dropcap {
    float: left;
    font-family: Georgia;
    text-align: center;
    padding: 10px 15px;
    margin: 8px 20px 0 2px;
    background-color: #666674;
    color: rgba(254, 254, 254, 0.9);
    font-size: 40px;
    line-height: 35px;
    border-radius: 4px;
}
.dropcap.bordered {
    background-color: transparent;
    color: #778;
    border-radius: 4px;
    border: 1px solid #778;
}
.dropcap.shadow {
    box-shadow: 0 2px 4px #778888;
}
.dropcap.circle {
    border-radius: 50%;
}
/* Dividers */
.divider {
    height: 1px;
    background-color: #ccc;
    margin: 30px auto;
}
.divider.d2 {
    background: none;
    border-top: 1px dashed #ccc;
}
.divider.d3:after {
    content: "";
    display: block;
    width: 25%;
    height: 1px;
    position: relative;
    background-color: #3f51b5;
    margin: 0 auto;
}
.divider.d4 {
    text-align: center;
    margin: 40px auto;
}
.divider.d4 span {
    background: #f5f5f5;
    color: #778888;
    padding: 0 18px;
    position: relative;
    top: -12px;
    font-size: 14px;
}
.divider.d4.text-left span {
    padding: 0 18px 0 0;
}
.divider.d4.text-right span {
    padding: 0 0 0 18px;
}
/* *********************	Footers		********************* */
.footer-wrapper {
    background-color: #303236;
    color: #d8dade;
    position: relative;
    padding: 60px 0 40px;
}
.footer-widget {
    margin-bottom: 50px;
}
/* Footer title */
.footer-title {
    font-family: "Montserrat", "微软雅黑", sans-serif;
    font-size: 16px;
    margin-bottom: 30px;
    color: #d8dade;
    letter-spacing: 1px;
}
.footer-title:after {
    content: "";
    display: block;
    height: 1px;
    width: 22px;
    border-top: 2px solid #3f51b5;
    margin: 5px 0 0;
}
/* Social icons - footer */
.footer-social {
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-social > li {
    margin-right: 33px;
    display: inline-block;
}
.footer-social > li:last-child {
    margin-right: 0;
}
.footer-social > li > a {
    color: inherit;
    padding-top: 15px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.footer-social > li > a > .fa {
    color: inherit;
    opacity: 0.9;
    font-size: 18px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.footer-social > li > a:hover > .fa,
.footer-social > li > a:focus > .fa {
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
/* Footer subscribe */
.footer-subscribe input {
    width: 80%;
    background-color: transparent;
    border: none;
    border-bottom: 2px solid #3f51b5;
    padding: 0 0 3px 8px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.footer-subscribe input:focus {
    box-shadow: none;
    border: none;
    border-bottom: 2px solid #3f51b5;
    outline: none;
    padding: 0 0 3px 15px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.footer-subscribe ::-webkit-input-placeholder {
    color: inherit;
    font-weight: 400;
    font-size: 13px;
    word-spacing: 2px;
}
.footer-subscribe ::-moz-placeholder {
    color: inherit;
    opacity: 1;
    font-weight: 400;
    font-size: 13px;
    word-spacing: 2px;
}
.footer-subscribe :-ms-input-placeholder {
    color: inherit;
    font-weight: 400;
    font-size: 13px;
    word-spacing: 2px;
    padding-bottom: 5px;
}
/* Footer links */
.footer-links {
    margin: 0;
    padding: 0;
}
.footer-links > li {
    margin: 0 20px 15px 0;
    display: inline-block;
    list-style: none;
}
.footer-links > li > a {
    color: #d8dade;
    -webkit-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
}
.footer-links > li > a:hover,
.footer-links > li > a:focus,
.footer-links > li > a:active {
    color: #ff4081;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.footer-links > li .fa {
    color: #4caf50;
    font-size: 16px;
}
/* Copyright */
.copyright {
    font-size: 13px;
    color: #d4d8db;
    font-style: italic;
    margin-bottom: 0;
    padding-top: 8px;
}
/* Background Footer */
.footer-wrapper.footer-bg {
    background-image: url("../img/map.png");
    background-position: 48% 50%;
    background-color: #303236;
    background-repeat: no-repeat;
}
/* Simple Footer */
.footer-simple.footer-wrapper {
    padding: 40px 0;
}
/* *********************	Social Icons	********************* */
/*
	pinterest, rss, facebook, twitter, flickr, dribble
	behance, linkedin, vimeo, youtube, skype, tumblr,
	forrst, digg, blogger, github, google-plus, lastfm,
	spotify, instagram, paypal, soundcloud.
	*/
.social-icon {
    padding: 0;
    margin: 0;
    font-size: 0;
    height: 30px;
    list-style: none;
}
.social-icon > li {
    display: inline-block;
    margin-right: 15px;
}
.social-icon > li:last-child {
    margin-right: 0;
}
.social-icon > li > a {
    display: table;
}
.social-icon .fa {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    width: 40px;
    height: 40px !important;
    line-height: 1;
    font-size: 14px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    color: #fff;
    background: none;
    box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.87);
}
.social-icon a:hover .fa {
    background-color: #fcfcfc;
    color: #fafafa;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
.social-icon.bordered .fa {
    border: 1px solid;
}
.social-icon.circle .fa {
    border-radius: 50%;
}
.social-icon.rounded .fa {
    border-radius: 3px;
}
.social-icon.main .fa {
    color: #fff;
    background-color: #3f51b5;
}
.social-icon.dark .fa {
    color: #fff;
    background-color: #212121;
}
.social-icon.light .fa {
    color: #424242;
    background-color: #f5f5f5;
}
.social-icon.simple .fa {
    color: #778;
    background-color: transparent;
}
.social-icon.simple > li > a:hover .fa {
    background-color: transparent;
    color: #3f51b5;
    border: none;
}
.social-icon.unstyled > li > a:hover .fa {
    border: none;
    background-color: transparent;
}
.social-icon .fa-linkedin,
.social-icon.unstyled a:hover .fa-linkedin {
    border-color: #3daccf;
    color: #3daccf;
}
.social-icon .fa-github-alt,
.social-icon.unstyled a:hover .fa-github-alt {
    border-color: #6c93bb;
    color: #6c93bb;
}
.social-icon .fa-github,
.social-icon.unstyled a:hover .fa-github {
    border-color: #6c93bb;
    color: #6c93bb;
}
.social-icon a:hover .fa-linkedin,
.social-icon.social-bg .fa-linkedin {
    background-color: #03a9f4;
}
.social-icon a:hover .fa-github-alt,
.social-icon.social-bg .fa-github-alt {
    background-color: #ffc107;
}
.social-icon a:hover .fa-github,
.social-icon.social-bg .fa-github {
    background-color: #ffc107;
}
.social-icon a:hover .fa-wechat,
.social-icon.social-bg .fa-wechat {
    background-color: #4caf50;
}
.social-icon a:hover .fa-stack-overflow,
.social-icon.social-bg .fa-stack-overflowt {
    background-color: #ff5252;
}
.social-icon.social-bg [class*="fa-"] {
    color: #fff;
}
.social-icon.social-bg a:hover .fa {
    opacity: 0.6;
}
/* *********************	Animations 	  ********************* */
/* fade */
.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        -ms-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}
.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        -ms-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}
.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        -ms-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}
.fadeInRight {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(2000px, 0, 0);
        transform: translate3d(2000px, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 100%, 0);
        -ms-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }
}
.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
/* Appear animations */
.animated {
    opacity: 0;
}
.animated.on {
    opacity: 1;
}
/******************* 补充内容 **************************************/
.irs-from,
.irs-to,
.irs-single {
    background: #3f51b5;
}
.irs-from:after,
.irs-to:after,
.irs-single:after {
    border-top-color: #3f51b5;
}
.owl-theme .owl-controls.clickable .owl-buttons div:hover,
.owl-theme .owl-controls.clickable .owl-buttons div:focus {
    background-color: #3f51b5;
}
.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
    background: #3f51b5;
}
@media (max-width: 767px) {
    .menu > li > a:hover,
    .menu > li > a:focus {
        color: #3f51b5;
    }
}
@media (min-width: 992px) {
    .header-transparent .menu > li > a:hover,
    .header-transparent .menu > li > a:focus,
    .header-transparent .menu > li:hover > a {
        color: #ff4081;
        -webkit-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }
}
/****************************************************************
                      以下是时间线附加内容
*****************************************************************/
.timeline {
    padding: 132px 0;
    margin: 72px 0;
}
.timeline .line {
    border-bottom: 1px dashed #212121;
    margin: 0 18px;
    padding-bottom: 12px;
    margin-bottom: 24px;
    position: relative;
    top: -1px;
}
.timeline .line:before {
    display: block;
    content: '';
    width: 14px;
    height: 14px;
    background: #fff;
    /*border: 4px solid #7c4dff;*/
    border: 4px solid #ff4081;
    border-radius: 100%;
    position: absolute;
    left: -18px;
    bottom: -7px;
}
.timeline .line:after {
    display: block;
    content: '';
    width: 14px;
    height: 14px;
    background: #fff;
    /*border: 4px solid #7c4dff;*/
    border: 4px solid #ff4081;
    border-radius: 100%;
    position: absolute;
    right: -18px;
    bottom: -7px;
}
.timeline .item {
    width: 25%;
    float: left;
    position: relative;
    text-align: center;
    color: #212121;
}
.timeline .item .marker {
    width: 22px;
    height: 22px;
    background: #fff;
    /*border: 6px solid #7c4dff;*/
    border: 6px solid #ff4081;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -11px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    z-index: 2;
}
.timeline .item .content {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    padding: 24px;
    position: absolute;
    top: -132px;
    left: 0;
    right: 0;
    margin: 0 12px;
}
.timeline .item .content:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.46);
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
.timeline .item:nth-child(even) .content {
    top: auto;
    bottom: -132px;
}
.timeline .item .content:after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 18px 0 0 18px;
    border-color: transparent transparent transparent #fff;
    box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.15);
    position: absolute;
    bottom: -9px;
    left: 50%;
    margin-left: -9px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.timeline .item:nth-child(even) .content:after {
    border-width: 0 18px 18px 0;
    border-color: transparent #fff transparent transparent;
    box-shadow: none;
    position: absolute;
    top: -9px;
    bottom: auto;
}
.timeline .item .content span {
    font-size: 13px;
    line-height: 26px;
    margin-bottom: 12px;
    text-transform: uppercase;
}
.timeline .item .content h4 {
    line-height: 26px;
    margin-bottom: 0;
}
.timeline .item .year {
    font-size: 16px;
    line-height: 26px;
    font-weight: 700;
    position: relative;
    bottom: -44px;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.timeline .item:nth-child(even) .year {
    top: -44px;
    bottom: auto;
}
@media all and (max-width: 992px) {
    .timeline {
        position: relative;
        padding: 0;
        margin: 18px 0;
        margin-bottom: 42px;
    }
    .timeline .item {
        width: 100%;
        float: none;
        margin-bottom: 24px;
    }
    .timeline .item:last-of-type {
        margin-bottom: 0;
    }
    .timeline .item .content {
        position: static;
    }
    .timeline .line {
        border-bottom: none;
        border-left: 1px dashed #212121;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 1px;
        margin: 0;
        padding: 0;
    }
    .timeline .line:before {
        top: -18px;
        bottom: -7px;
        left: -7px;
    }
    .timeline .line:after {
        right: auto;
        bottom: -18px;
        left: -7px;
    }
    .timeline .item .content {
        padding: 24px;
        position: static;
        margin: 0;
        margin-left: 36px;
    }
    .timeline .item .marker {
        position: absolute;
        top: 50%;
        left: 0;
        margin-left: -11px;
        margin-top: -27px;
    }
    .timeline .item .content:after {
        border-width: 18px 0 0 18px;
        border-color: transparent transparent transparent #fff;
        box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.15);
        bottom: auto;
        left: 36px;
        top: 50%;
        margin-top: -25px;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .timeline .item:nth-child(even) .content:after {
        border-width: 18px 0 0 18px;
        border-color: transparent transparent transparent #fff;
        box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.15);
        bottom: auto;
        left: 36px;
        top: 50%;
        margin-top: -25px;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .timeline .item .year {
        position: static;
        margin: 0 auto;
        padding-left: 36px;
        margin-top: 6px;
    }
}
.icon-box {
    text-align: center;
    margin: 12px 0;
}
.icon-box .icon {
    display: inline-block;
    width: 100px;
    height: 100px;
    line-height: 100px;
    font-size: 48px;
    color: #212121;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    margin-bottom: 24px;
    -webkit-transition: .25s;
    -moz-transition: .25s;
    -o-transition: .25s;
    -ms-transition: .25s;
    transition: .25s;
}
.icon-box:hover .icon {
    /*background: #7c4dff;*/
    background: #ff4081;
    color: #fff;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}
.icon-box h6 {
    line-height: 12px;
    margin-bottom: 0;
}
/**************************  以下是自定义部分 ******************************/
/* 图标间距调整 */
a > i.fa,
li > i.fa {
    margin-right: 0.5em;
}
@media (max-width: 992px) and (min-width: 767px) {
    .menu-fixed,
    .main-header {
        background-color: #3f51b5;
    }
    .header-transparent .menu > li > a:hover,
    .header-transparent .menu > li > a:focus,
    .header-transparent .menu > li:hover > a {
        color: #ff4081;
    }
    .header-transparent .menu > li > a {
        color: #fff;
    }
}
.footer-simple.footer-wrapper {
    padding-top: 10px;
    padding-bottom: 0;
    background-color: #212121;
}
.tp-banner-container .tp-banner {
    z-index: 2;
}
.section-main {
    background-color: #3f51b5;
}
.section-gray {
    background-color: #e0e0e0;
}
.section-dark {
    background-color: #424242;
}
.section-white {
    background-color: #f5f5f5;
}
.section-Main2 {
    background-color: #ff4081;
}
.section-Main3 {
    background-color: #f50057;
}
.section-Orange {
    background-color: #ff9800;
}
.section-Blue {
    background-color: #2196f3;
}
.section-Yellow {
    background-color: #ffeb3b;
}
.section-Red {
    background-color: #ff5252;
}
.section-Green {
    background-color: #4caf50;
}
.section-Transparent {
    background-color: transparent;
}
/* 颜色 */
.color-main {
    color: #3f51b5 !important;
}
.color-main2 {
    color: #ff4081 !important;
}
.color-white {
    color: #fff !important;
}
.color-alpha {
    color: rgba(250, 250, 250, 0.9);
}
.color-darker {
    color: #212121 !important;
}
.color-dark {
    color: #424242 !important;
}
.color-green {
    color: #4caf50 !important;
}
.color-red {
    color: #e51c23 !important;
}
.color-blue {
    color: #2196f3 !important;
}
.color-orange {
    color: #ff9800 !important;
}
.color-yello {
    color: #ffeb3b !important;
}
.color-amber {
    color: #ffc107 !important;
}
.color-purple {
    color: #9c27b0 !important;
}
.color-default {
    color: #757575 !important;
}
.color-gray {
    color: #9e9e9e !important;
}
.color-on-dark {
    color: #e0e0e0 !important;
}
.color-on-img {
    color: #bdbdbd !important;
}
.bg-main {
    background-color: #3f51b5 !important;
}
.bg-main2 {
    background-color: #ff4081 !important;
}
.bg-dark {
    background-color: #424242 !important;
}
.bg-darker {
    background-color: #212121 !important;
}
.bg-dark-gray {
    background-color: #757575 !important;
}
.bg-light-gray {
    background-color: #9e9e9e !important;
}
.bg-green {
    background-color: #4caf50 !important;
}
.bg-red {
    background-color: #e51c23 !important;
}
.bg-blue {
    background-color: #2196f3 !important;
}
.bg-orange {
    background-color: #ff9800 !important;
}
.bg-yello {
    background-color: #ffeb3b !important;
}
.bg-purple {
    background-color: #9c27b0 !important;
}
.bg-white {
    background-color: #fff;
}
.bg-yellow-op {
    background-color: rgba(255, 255, 0, 0.8);
}
.blog-item {
    margin: 0 0 30px;
    background-color: #ffffff;
    text-align: left;
    border-radius: 1px;
    overflow: hidden;
    box-shadow: 2px 8px 8px rgba(0, 0, 0, 0.3);
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.blog-item:hover {
    background-color: #ffffff;
    box-shadow: 2px 12px 12px rgba(0, 0, 0, 0.54);
    -webkit-transition: all 0.4s ease-in;
    transition: all 0.4s ease-in;
}
.blog-item .post-title {
    font-family: "Montserrat", "微软雅黑", sans-serif;
    margin-bottom: 0;
    font-size: 22px;
    color: #424242;
    font-weight: 400;
    opacity: 0.64 !important;
}
.blog-item:hover .post-title {
    opacity: 1 !important;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.blog-item .blog-caption .fa-style4 {
    opacity: 0.64 !important;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.blog-item:hover .blog-caption .fa-style4 {
    opacity: 1 !important;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.blog-item p {
    opacity: 0.87 !important;
}
.blog-item:hover p {
    opacity: 1 !important;
}
.blog-item-blue,
.blog-item-blue .post-title,
.blog-item-blue .pull-right,
.blog-item-blue .fa,
.blog-item-blue a,
.blog-item-blue .blog-caption .fa-style4 {
    background-color: #2196f3 !important;
    color: #fff !important;
}
.blog-item-main2,
.blog-item-main2 .post-title,
.blog-item-main2 .pull-right,
.blog-item-main2 .fa,
.blog-item-main2 a,
.blog-item-main2 .blog-caption .fa-style4 {
    background-color: #ff4081 !important;
    color: #fff !important;
}
.blog-item-white,
.blog-item-white .pull-right,
.blog-item-white .fa,
.blog-item-white a {
    background-color: #fff;
    color: #424242 !important;
}
.blog-item-white .post-title,
.blog-item-white .blog-caption .fa-style4 {
    color: #ff4081 !important;
}
.blog-item-green,
.blog-item-green .post-title,
.blog-item-green .pull-right,
.blog-item-green .fa,
.blog-item-green a,
.blog-item-green .blog-caption .fa-style4 {
    background-color: #4caf50 !important;
    color: #fff !important;
}
.blog-item-yello,
.blog-item-yello .post-title,
.blog-item-yello .pull-right,
.blog-item-yello .fa,
.blog-item-yello a,
.blog-item-yello .blog-caption .fa-style4 {
    background-color: #ffeb3b !important;
    color: #fff !important;
}
.blog-item-orange,
.blog-item-orange .post-title,
.blog-item-orange .pull-right,
.blog-item-orange .fa,
.blog-item-orange a,
.blog-item-orange .blog-caption .fa-style4 {
    background-color: #ff9800 !important;
    color: #fff !important;
}
.blog-item-red,
.blog-item-red .post-title,
.blog-item-red .pull-right,
.blog-item-red .fa,
.blog-item-red a,
.blog-item-red .blog-caption .fa-style4 {
    background-color: #e51c23 !important;
    color: #fff !important;
}
.blog-item-purple,
.blog-item-purple .post-title,
.blog-item-purple .pull-right,
.blog-item-purple .fa,
.blog-item-purple a,
.blog-item-purple .blog-caption .fa-style4 {
    background-color: #9c27b0 !important;
    color: #fff !important;
}
/* 背景图片路径 */
.bg-we {
    background-image: url('../img/images/about/we.jpg');
}
.bg01 {
    background-image: url("../img/images/main/bg01.jpg");
}
.bg-parallax02 {
    background-image: url("../img/images/main/parallax_02.jpg");
}
.bg-parallax01 {
    background-image: url("../img/images/main/parallax_01.jpg");
}
.bg-research-environment {
    background-image: url("../img/images/research/environment.jpg");
}
.bg-research-customer {
    background-image: url("../img/images/research/customer.jpg");
}
.bg-research-innovate {
    background-image: url("../img/images/research/innovate.jpg");
}
.bg-research-brand {
    background-image: url("../img/images/research/brand.jpg");
}
.bg-research-advertisement {
    background-image: url("../img/images/research/myadv.jpg");
}
.bg-research-channel {
    background-image: url("../img/images/research/channel.jpg");
}
.bg-research-retail {
    background-image: url("../img/images/research/retail.jpg");
}
.bg-research-marketing {
    background-image: url("../img/images/research/marketing.jpg");
}
.bg-research-satisfaction {
    background-image: url("../img/images/research/satisfaction.jpg");
}
.bg-research-society {
    background-image: url("../img/images/research/society.jpg");
}
.bg-industry-emporium {
    background-image: url("../img/images/industry/emporium.jpg");
}
.bg-industry-logistics {
    background-image: url("../img/images/industry/logistics.jpg");
}
.bg-industry-game {
    background-image: url("../img/images/industry/game.jpg");
}
.bg-industry-appliance {
    background-image: url("../img/images/industry/appliance.jpg");
}
.bg-industry-agriculture {
    background-image: url("../img/images/industry/agriculture.jpg");
}
.bg-industry-tourism {
    background-image: url("../img/images/industry/tourism.jpg");
}
.bg-industry-medical {
    background-image: url("../img/images/industry/medical.jpg");
}
.bg-industry-finance {
    background-image: url("../img/images/industry/finance.jpg");
}
.bg-industry-fashion {
    background-image: url("../img/images/industry/fashion.jpg");
}
.bg-industry-energy {
    background-image: url("../img/images/industry/energy.jpg");
}
.bg-industry-car {
    background-image: url("../img/images/industry/car.jpg");
}
.bg-industry-industrial {
    background-image: url("../img/images/industry/industrial.jpg");
}
.bg-industry-FMCG {
    background-image: url("../img/images/industry/FMCG.jpg");
}
.bg-industry-public {
    background-image: url("../img/images/industry/public.jpg");
}
.bg-industry-it {
    background-image: url("../img/images/industry/it.jpg");
}
.bg-industry-media {
    background-image: url("../img/images/industry/media.jpg");
}
.bg-industry-mobile {
    background-image: url("../img/images/industry/mobile.jpg");
}
.bg-industry-estate {
    background-image: url("../img/images/industry/estate.jpg");
}
.page-breadcrumbs {
    width: auto;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    background-color: #f50057;
    padding: 6px 17px;
    font-size: 11px;
    font-weight: 600;
    color: #f5f5f5;
    text-transform: uppercase;
}
.page-breadcrumbs a {
    color: #f5f5f5;
}
.page-breadcrumbs a:hover,
.page-breadcrumbs a:focus,
.page-breadcrumbs a:active,
.page-breadcrumbs a.active {
    color: #ff4081;
}
.footer-wrapper.footer-bg {
    /* 特殊调整 */
    background-color: #232323;
}
.section-title {
    padding: 60px 0 10px;
    /*border-top: 5px solid #9e9e9e;*/
    z-index: 2;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.46);
}
.mt100 {
    margin-top: 100px !important;
}
.mt160 {
    margin-top: 160px !important;
}
.mt200 {
    margin-top: 200px !important;
}
.title-shadow-b {
    text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.46);
}
.section-white {
    background-color: #ffffff;
}
.section-shadow {
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.54);
}
@media (min-width: 992px) {
    .header-transparent .main-header {
        position: fixed;
        z-index: 999;
        width: 100%;
        left: 0;
        top: 0;
        background-color: #3f51b5;
        -webkit-backface-visibility: hidden;
    }
    .header-transparent .logo {
        background-image: url("../img/logo.png");
    }
}
.section-intro {
    position: relative;
    padding: 170px 0 50px;
}
.sidebar-widget {
    margin-bottom: 40px;
    position: relative;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
    background: #ffffff;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
.sidebar-widget .sidebar-title {
    margin: 0 0 20px;
    font-family: "Montserrat", "微软雅黑", sans-serif;
    font-size: 16px;
    color: #f5f5f5;
    background: #3f51b5;
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.46);
    padding: 10px 20px;
}
.sidebar-widget p,
.sidebar-widget ul,
.sidebar-widget div {
    padding: 10px 20px;
}
.sidebar-widget .tab-content {
    padding: 25px 0 0 !important;
}
.panel-title {
    font-family: "Montserrat", "微软雅黑", sans-serif;
    color: #424242;
    font-size: 18px;
}
.panel-title:hover a,
.panel-title:focus a {
    color: #212121;
}
.panel-title .fa {
    margin-right: 8px;
    color: #f50057;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.panel-title .fa.upside-down {
    -webkit-transform: rotateZ(180deg);
    -ms-transform: rotateZ(180deg);
    transform: rotateZ(180deg);
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.box-services-b .link-read-more:hover,
.box-services-a .link-read-more:hover,
.box-services-b .link-read-more:focus,
.box-services-a .link-read-more:focus {
    color: #3f51b5;
}
.btn-f {
    background-color: #ff4081;
    color: #ffffff;
    border-radius: 2px;
    padding: 10px 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.46);
}
.btn-f:hover,
.btn-f:focus,
.btn-f:active,
.btn-f.active {
    background-color: #f50057;
    color: #ffffff;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.54);
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
.mapimg {
    background-color: #ffffff;
    padding: 15px;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.54);
}
.mapimg img {
    border: solid 3px #eeeeee;
}
dl.dl-horizontal dt {
    width: 15px;
}
dl.dl-horizontal dd {
    margin-left: 20px;
    line-height: 26px;
}
.f999 {
    z-index: 999;
}
.f998 {
    z-index: 998;
}
.f997 {
    z-index: 997;
}
.f996 {
    z-index: 996;
}
.f995 {
    z-index: 995;
}
.f0 {
    z-index: 0;
}
.f1 {
    z-index: 1;
}
.f2 {
    z-index: 2;
}
.f3 {
    z-index: 3;
}
.f4 {
    z-index: 4;
}