/* ==========================================================================
   1. IMPORT GOOGLE FONTS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css?family=Titillium+Web:400,600,700');
@import url('https://fonts.googleapis.com/css?family=Exo+2:400,600');
/* ==========================================================================
   2. GENERAL
   ========================================================================== */

body {
    /*font-family: 'Roboto', sans-serif;*/
    font-family: 'Titillium Web', sans-serif;
    color: #333;
    font-size: 14px;
    font-weight: 400;
    background: #fff;
    overflow-x: hidden;
}

html {
    overflow-x: hidden;
}

p {
    font-size: 15px;
    line-height: 140%;
}

a:hover,
a:focus {
    color: #ebbd3a;
}

a {
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

h1,
h2,
h3,
h4,
h5 {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 0px;
}

ul {
    margin: 0;
    padding: 0;
}

ul li {
    list-style: none;
}

a:hover,
a:focus {
    text-decoration: none;
    outline: none;
}

a:not([href]):not([tabindex]) {
    color: #fff;
}

a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover {
    color: #ebbd3a;
}

/* ==========================================================================
   2.1 Section Title
   ========================================================================== */

.section {
    padding: 80px 0;
}

.section-header {
    color: #fff;
    margin-bottom: 40px;
    text-align: center;
}

.section-header .section-title {
    font-size: 42px;
    margin-top: 0;
    text-transform: uppercase;
    font-weight: 700;
    color: #333;
    position: relative;
}

.section-header .section-title span {
    color: #ebbd3a;
}

.section-header .section-subtitle {
    margin-top: 15px;
    color: #333;
    font-size: 14px;
    font-weight: 400;
}

.section-header .lines {
    margin: auto;
    width: 70px;
    position: relative;
    border-top: 2px solid #ebbd3a;
    margin-top: 15px;
}

/* ==========================================================================
   2.2 Buttons
   ========================================================================== */

.btn {
    font-size: 14px;
    padding: 11px 40px;
    border-radius: 0px;
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
    display: inline-block;
}

.btn:focus,
.btn:active {
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
    color: #fff;
}

.btn-common {
    border: 1px solid #ebbd3a;
    background: #ebbd3a;
    position: relative;
    color: #fff;
    z-index: 1;
    border-radius: 30px;
}

.btn-common:hover {
    color: #fff;
    background: #ec8e24;
    border-color: #ec8e24;
    transition: all .50s ease-in-out;
    -moz-transition: all .50s ease-in-out;
    -webkit-transition: all .50s ease-in-out;
}

.btn-border {
    color: #fff;
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 4px;
}

.btn-border:hover {
    border: 2px solid #fff;
    color: #fff;
    background-color: #ebbd3a;
}

.btn-lg {
    padding: 14px 33px;
    text-transform: uppercase;
    font-size: 16px;
}

.btn-rm {
    padding: 7px 0px;
    color: #999;
    text-transform: capitalize;
}

.btn-rm i {
    vertical-align: middle;
}

button:focus {
    outline: none !important;
}

.clear {
    clear: both;
}

.btn-disabled {
    opacity: .7;
    pointer-events: none;
    background-color: #b5b5b5;
    border-color: #b5b5b5;
}

/* ==========================================================================
     2.4  Pre Loader
     ========================================================================== */

#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #333;
    z-index: 9999999999;
}

.spinner {
    width: 40px;
    height: 40px;
    top: 45%;
    position: relative;
    margin: 0px auto;
}

.double-bounce1,
.double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #ebbd3a;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
    animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
    0%,
    100% {
        -webkit-transform: scale(0);
    }
    50% {
        -webkit-transform: scale(1);
    }
}

@keyframes sk-bounce {
    0%,
    100% {
        transform: scale(0);
        -webkit-transform: scale(0);
    }
    50% {
        transform: scale(1);
        -webkit-transform: scale(1);
    }
}

/* ==========================================================================
  -2.5 Scroll To Up
   ========================================================================== */

.back-to-top {
    display: none;
    position: fixed;
    bottom: 18px;
    right: 15px;
}

.back-to-top i {
    display: block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    border-radius: 4px;
    background-color: #ebbd3a;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

/* ==========================================================================
   3. Hero Area
   ========================================================================== */

#hero-area {
    background: url(../img/hero-area.jpg) center center no-repeat;
    background-size: cover;
    color: #fff;
    overflow: hidden;
    position: relative;
}

/*#hero-area .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #ebbd3a;
    opacity: 0.9;
}*/

#hero-area .contents {
    padding: 200px 0 130px;
}

#hero-area .contents h1 {
    color: #fff;
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 25px;
    letter-spacing: 0;
    line-height: 130%;
}

#hero-area .contents h1 > span,
#hero-area .contents p > span {
    color: #ebbd3a;
}

#hero-area .contents p {
    font-size: 16px;
    color: #fff;
    font-weight: 400;
    line-height: 145%;
}

#hero-area .contents p.italic {
    font-style: italic;
}

#hero-area .contents .btn {
    margin: 24px 18px;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 700;
}

#hero-area .contents .btn.disabled {
    background-color: #b5b5b5;
    border-color: #b5b5b5;
}

#hero-area .banner_bottom_btn {
    margin-top: 40px;
}

#hero-area .banner_bottom_btn i {
    color: #fff;
    font-size: 48px;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

#hero-area .banner_bottom_btn i:hover {
    color: #ebbd3a;
}

#hero-area .contents .text-link {
    display: block;
    font-size: 18px;
    margin-bottom: 0;
    margin-top: 26px;
    line-height: 120%;
}

#hero-area .contents a.btn {
    font-size: 20px;
}


/* ==========================================================================
   4. Navbar Style
   ========================================================================== */

.navbar-brand {
    position: relative;
    padding: 0px;
    margin-right: 22px;
}

.top-nav-collapse {
    background: #fff;
    z-index: 999999;
    top: 0px !important;
    padding: 0;
    -webkit-box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.06);
    box-shadow: 0px 3px 6px 3px rgba(0, 0, 0, 0.06);
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    background: #fff !important;
}

.top-nav-collapse .navbar-brand {
    top: 0px;
}

.top-nav-collapse .navbar-nav .nav-link {
    color: #333 !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.top-nav-collapse .navbar-nav .nav-link:hover {
    color: #ebbd3a !important;
}

.top-nav-collapse .navbar-nav .nav-link.active {
    color: #fff !important;
}

.indigo {
    background: transparent;
}

.navbar-expand-lg .navbar-collapse {
    -webkit-box-flex: 1;
    -ms-flex: auto;
    flex: auto;
}

.navbar-expand-lg .navbar-nav .nav-link {
    color: #fff;
    padding: 0 15px;
    margin-top: 20px;
    margin-bottom: 20px;
    height: 40px;
    border-radius: 30px;
    background: transparent;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 400;
    line-height: 105%;
    text-align: center;
    display: flex;
    align-items: center;
    font-weight: 600;
    letter-spacing: -0.2;
}

.navbar-expand-lg .navbar-nav li a:hover,
.navbar-expand-lg .navbar-nav li .active > a,
.navbar-expand-lg .navbar-nav li a:focus {
    color: /*#61D2B4*/
    #ebbd3a;
}

.navbar .nav-link.active {
    color: #fff !important;
    background: /*#61D2B4*/
    #ebbd3a;
}

.dropdown-toggle::after {
    display: none;
}

.slicknav_btn {
    border-color: #ebbd3a;
}

.slicknav_menu .slicknav_icon-bar {
    background: #ebbd3a;
}

.nav-login {
    font-family: 'Exo 2', sans-serif;
    font-size: 13px;
    display: flex;
    align-items: center;
    font-weight: 600;
    text-align: center;
    border: 2px solid #1e8fe1;
    padding: 0 18px;
    height: 40px;
    line-height: 105%;
    border-radius: 20px;
    color: #ffffff;
    margin-left: 22px;
}

.nav-login:hover {
    background-color: #1e8fe1;
    color: #ffffff;
}

.top-nav-collapse .nav-login {
    border: 2px solid #1e8fe1;
    background-color: #1e8fe1;
    color: #ffffff;
}

.top-nav-collapse .nav-login:hover {
    border: 2px solid #0977c6;
    background-color: #0977c6;
}

/* only small tablets */

@media (min-width: 768px) and (max-width: 991px) {
    #nav-main li a.nav-link {
        padding-top: 18px;
    }
}

.navbar-toggler {
    display: none;
}

.mobile-menu {
    display: none;
}

.slicknav_menu {
    display: none;
}

@media screen and (max-width: 768px) {
    .navbar-header {
        width: 100%;
    }
    .navbar-brand {
        position: absolute;
        padding: 15px;
        top: 0;
    }
    .navbar-brand img {
        width: 70%;
    }
    #mobile-menu {
        display: none;
    }
    .slicknav_menu {
        display: block;
    }
    .slicknav_nav .active a {
        background: #ebbd3a;
        color: #fff;
    }
    .slicknav_nav a:hover,
    .slicknav_nav .active {
        color: #ebbd3a;
        background: #f8f9fa;
    }
    .slicknav_nav .dropdown li a.active {
        background: #f8f9fa;
        color: #ebbd3a;
    }
}

/* ==========================================================================
  5. overview section
   ========================================================================== */

.ov-slide .slick-slide {
    padding: 10px;
    position: relative;
}

.ov-slide.slider-nav .slick-slide {
    margin: 10px;
    padding: 0;
    -webkit-transition: .3s all ease-out;
    transition: .3s all ease-out;
    border: 2px solid transparent;
}

.ov-slide .pb-content-media {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.ov-slide .slide-content {
    background: #fff;
    -webkit-box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 1px 10px -2px rgba(0, 0, 0, 0.15);
}

.ov-slide .slide-content > .pb-content-media {
    width: 35%;
}

.ov-slide .slide-content .slide-content-text {
    width: 65%;
}

.ov-slide .slide-content .slide-content-text {
    padding: 28px;
    text-align: left;
    line-height: 140%;
}

.slide-content-text h3 {
    font-size: 28px;
    margin-bottom: 0.2em;
    letter-spacing: 0;
}

.slide-content-text h4 {
    font-size: 17px;
    font-weight: 400;
    color: #687586;
    letter-spacing: 0;
    margin: 0;
    line-height: 125%;
    margin-bottom: 16px;
}

.slide-content-text ul li {
    font-size: 15px;
    margin-bottom: 6px;
    padding-left: 10px;
    line-height: 120%;
    background: url(../img/overview/img_bullet.png) left top 7px/4px 4px no-repeat;
}

.slide-content-text ul li:last-child {
    margin-bottom: 0;
}

.ov-slide .slick-arrow.prev {
    left: -50px;
}

.ov-slide .slick-arrow.next {
    right: -50px;
}

.slick-arrow {
    position: absolute;
    top: 50%;
    z-index: 9;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    color: #000;
}

.slick-arrow.prev {
    left: 20px;
}

.slick-arrow.next {
    right: 20px;
}

.slick-arrow.prev img,
.slick-arrow.next img {
    display: block;
    width: 100%;
    height: auto;
}

.slick-arrow i {
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

.slick-dots {
    position: absolute;
    bottom: -40px;
    z-index: 1;
    list-style: none;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 100%;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button {
    border: 0;
    background: transparent;
    display: block;
    height: 20px;
    width: 20px;
    outline: none;
    line-height: 0px;
    font-size: 0px;
    color: transparent;
    padding: 5px;
    cursor: pointer;
    position: relative;
}

.slick-dots li button:before {
    width: 7px;
    height: 7px;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transition: .3s all ease-out;
    transition: .3s all ease-out;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
    outline: none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
    background: rgba(0, 0, 0, 0.7);
}

.slick-dots li.slick-active button:before {
    background: rgba(0, 0, 0, 0.7);
}

/* ==========================================================================
  6. Why Section Style
   ========================================================================== */

#why {
    background: url(../img/bg1.jpg) fixed no-repeat;
    background-size: cover;
    color: #fff;
    overflow: hidden;
    position: relative;
}

#why .section-title {
    color: #fff;
}

#why .section-subtitle {
    color: #fff;
}

#why .icon {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    text-align: center;
    position: relative;
    z-index: 1;
}

#why .box-item {
    padding: 15px 10px;
}

#why .box-item .icon {
    border: 1px solid #ebbd3a;
    text-align: center;
    float: left;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

#why .box-item .icon i {
    color: #ebbd3a;
    font-size: 24px;
    line-height: 60px;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

#why .box-item .text {
    /*padding-left: 80px;*/
}

#why .box-item .text h4 {
    color: #ebbd3a;
    font-weight: 700;
    font-size: 18px;
    /*text-transform: uppercase;*/
    line-height: 145%;
    letter-spacing: -0.01em
}

#why .box-item .text p {
    font-size: 15px;
    line-height: 140%;
}

#why .box-item .text p:last-child {
    margin-bottom: 0;
}

#why .box-item:hover .icon {
    background: #ebbd3a;
}

#why .box-item:hover .icon i {
    color: #ffffff;
}

#why .show-box {
    text-align: right;
}

#why .show-box img {
    /*position: absolute;
    bottom: -120px;*/
    width: 168px;
    height: auto;
    margin-top: 20px
}


/* ==========================================================================
  7. how Section Style
   ========================================================================== */

#how {}

.how-point {
    text-align: center;
}

.how-point h3 {
    font-size: 28px;
}

.how-point ul {
    margin-bottom: 60px;
}

.how-point ul li {
    font-size: 16px;
    font-weight: 600;
    line-height: 120%;
    margin-bottom: 0.4em;
    color: #687586;
}

.how-point ul li:last-child {
    margin-bottom: 0;
}

#how .inbox h5 {
    font-size: 20px;
    text-align: center;
    margin-bottom: 0.6em;
}

#how .inbox ul {
    padding: 0 40px;
}

#how .inbox ul li {
    background-color: #ebbd3a;
    margin: 0 auto;
    padding: 16px 20px;
    color: #ffffff;
    text-align: center;
    border-radius: 12px;
    margin-bottom: 14px;
}

#how .inbox ul li > p {
    line-height: 120%;
    margin: 0;
}

#how .inbox ul li > span {
    font-weight: 700;
    font-size: 16px;
    display: inline-block;
    line-height: 100%;
    margin-top: -2px;
    margin-bottom: 8px;
    padding-left: 16px;
    background: url(../img/how/ico_foot.png) left center/12px auto no-repeat;
}

#how .btn-box {
    text-align: center;
}

#how a.btn {
    font-size: 18px;
    margin: 0 auto;
    margin-top: 30px;
}

/* ==========================================================================
  8. video-promo Section
   ========================================================================== */

.video-promo {
    background: #ebbd3a;
    color: #fff;
    overflow: hidden;
    position: relative;
}

.video-promo .video-promo-content {
    color: #fff;
}

.video-promo .video-promo-content h2 {
    color: #fff;
    font-size: 30px;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.video-promo .video-promo-content p {
    margin-bottom: 30px;
}

.video-promo .video-promo-content .video-popup {
    width: 80px;
    height: 80px;
    text-align: center;
    border: 3px solid #fff;
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    font-size: 30px;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.video-promo .video-promo-content .video-popup i {
    line-height: 74px;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: #ebbd3a;
    opacity: 0.9;
    filter: alpha(opacity=90);
}


/* ==========================================================================
    9. who Section Style
    ========================================================================== */

#who {
    padding-bottom: 20px;
}

#who img {
    width: 40px;
    display: block;
    margin: 0 auto;
    margin-bottom: 16px;
}

#who h3 {
    font-size: 28px;
    letter-spacing: 0;
    text-align: center;
    margin-bottom: 24px;
}


/*.item-boxes:hover .icon {
    background: #ebbd3a;
}

.item-boxes:hover .icon i {
    color: #fff;
}*/

/* ==========================================================================
 10. Who paragaph Section Style
 ========================================================================== */

#who-para {
    background: url(../img/who_para.jpg) fixed no-repeat;
    position: relative;
    background-size: cover;
}

#who-para p {
    color: #ffffff;
}

#who-para a {
    color: #ffffff;
    display: block;
    margin: 0 auto;
    width: 180px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: 20px;
    line-height: 36px;
    text-align: center;
    font-size: 16px;
}

#who-para a > img {
    width: 6px;
    display: inline;
    margin: 0;
    margin-left: 2px;
    margin-top: -1px;
}

#who-para a:hover {
    border: 2px solid #ebbd3a;
}

.item-boxes {
    text-align: center;
    padding: 0px 15px;
    margin-bottom: 15px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.item-boxes .icon {
    width: 60px;
    height: 60px;
    text-align: center;
    border: 1px solid #ffffff;
    display: inline-block;
    border-radius: 30px;
    margin-bottom: 30px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.item-boxes .icon i {
    font-size: 26px;
    line-height: 60px;
    color: #ebbd3a;
}

.item-boxes h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #ebbd3a;
}

#who-para .row {
    margin-bottom: 16px;
}

/* ==========================================================================
11. Features Section Style
 ========================================================================== */

.feature-item {
    text-align: center;
    padding: 0px 15px;
    margin-bottom: 15px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.feature-item img {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    margin-bottom: 24px;
}

.feature-item h4 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.feature-item p {
    margin-bottom: 36px;
}

#feature_word {
    background: #ebbd3a;
}

#feature_word h4 {
    text-align: center;
    color: #ffffff;
    font-size: 28px;
}

#feature_word img {
    display: block;
    margin: 0 auto;
    width: 60px;
    margin-bottom: 30px;
}

#features h3 {
    font-size: 28px;
    text-align: center;
    margin-bottom: 40px;
}

/* ==========================================================================
  12. Price Section Style
   ========================================================================== */

.pricing-table {
    padding: 0px 0px 40px 0px;
    margin: 0 auto;
    margin-bottom: 5px;
    border: transparent;
    text-align: center;
    background-color: #FFFFFF;
    border: 1px solid #f1f1f1;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.pricing-table:hover {
    -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}

.pricing-table .pricing-details h2 {
    font-size: 26px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    background: #f1f1f1;
    padding: 30px 0;
    margin: 0;
}

.pricing-table .pricing-details .val {
    height: 112px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.pricing-table .pricing-details .val>span {
    display: block;
    position: absolute;
    top: 2px;
    left: 0;
    right: 0;
    font-size: 13px;
    color: #ebbd3a;
    font-weight: 600;
}

.pricing-table .pricing-details .val p {
    font-size: 48px;
    font-weight: 400;
    color: #ebbd3a;
    margin: 0 auto;
    padding: 0 16px;
    line-height: 100%;
}

.pricing-table .pricing-details .val p.quote {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.pricing-table .pricing-details .val p span {
    font-size: 14px;
    font-weight: 700;
    color: rgba(0,0,0,.5);
    margin: 0;
    padding: 0;
}

.pricing-table .pricing-details .overview {
    background: #f7f7f7;
    height: 114px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.pricing-table .pricing-details .overview>div {
    padding: 0 10px;
    margin: 0 auto;
}

.pricing-table .pricing-details .overview>div p {
    color: #595959;
    margin-bottom: 8px;
    line-height: 100%;
    letter-spacing: -0.02em
}

.pricing-table .pricing-details .overview>div p:nth-of-type(2) {
    margin-bottom: 4px;
}

.pricing-table .pricing-details .overview>div p.note {
    font-style: italic;
    font-size: 12px;
}

.pricing-table .pricing-details .overview>div p:last-child {
    margin-bottom: 0;
}

.pricing-table .pricing-details ul {
    margin-bottom: 35px;
}

.pricing-table .pricing-details ul li {
    padding: 10px;
    font-size: 15px;
    border-bottom: 1px dotted #f1f1f1;
    text-align: left;
    color: #595959;
    font-size: 14px;
    overflow: hidden;
}

.pricing-table .pricing-details ul li>span {
    display: block;
    float: left;
    font-weight: 600;
    font-size: 14px;
    padding: 0 10px 0 0;
    width: 124px;
    text-align: right;
    color: #000000;
    margin-right: 8px;
}

.table-left {
    margin-top: 20px;
}

/* ==========================================================================
  13. faq
   ========================================================================== */

#faq {}

#faq h2 {
    font-size: 30px;
    text-transform: uppercase;
    margin-bottom: 40px;
    text-align: center;
}

#faq img {
    width: 60px;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
}

.accord-box {
    background-color: #FFFFFF;
    border: 1px solid #f1f1f1;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.accord-box:hover {
    -webkit-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
}

.accord-box dl {
    margin: 0;
}

.accord-box dl dt {
    padding: 20px 46px;
    font-size: 18px;
    font-weight: 400;
    border-bottom: 1px solid #f1f1f1;
    background: url(../img/faq/ico_q_close.png) 14px 16px/24px auto no-repeat, url(../img/faq/ico_arrow_close.png) right 18px center/12px auto no-repeat;
    cursor: pointer;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.accord-box dl dt:hover {
    background-color: #fafafa;
}

.accord-box dl dt.select:hover {
    background-color: #ebbd3a;
}

.accord-box dl:last-child dt {
    border-bottom: none;
}

.accord-box dl dt.select {
    background: url(../img/faq/ico_q_open.png) 14px 16px/24px auto no-repeat, url(../img/faq/ico_arrow_open.png) right 18px center/12px auto no-repeat;
    background-color: #ebbd3a;
    color: #ffffff;
}

.accord-box dl dd {
    display: none;
    margin: 0;
    background-color: #f1f1f1;
    padding: 20px;
    font-size: 15px;
    line-height: 145%;
    color: #535353;
}


/* ==========================================================================
  14. Contact Us
  ========================================================================== */

.contact-us h3 {
    font-size: 36px;
    margin-bottom: 45px;
}

.contact-us p span {
    color: #ebbd3a;
    padding-left: 10px;
}

#signup {
    background: #3c4451;
    color: #fff;
    position: relative;
}

.form-control {
    width: 100%;
    margin-bottom: 10px;
    padding: 14px;
    border-color: #fff;
    border-radius: 0px;
    color: #fff;
    background: transparent;
    font-size: 14px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.form-control:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
    border-color: #ebbd3a;
    background: transparent;
    outline: none;
}

.btn.disabled,
.btn:disabled {
    opacity: 0.5;
}

.text-danger {
    font-size: 14px;
    margin-top: 10px;
}

.list-unstyled li {
    color: #d9534f;
}


/* ==========================================================================
15. Footer Style
 ========================================================================== */

footer {
    background: #292f35;
    padding: 30px 0;
    overflow: hidden;
}

.footer-info {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.footer-link {
    font-size: 0px;
    text-align: center;
}

.footer-link li {
    display: inline-block;
    font-size: 13px;
}

.footer-link li a {
    opacity: .6;
    color: #fff;
    margin-right: 12px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
}

.footer-link li a:hover {
    opacity: 1;
    text-decoration: underline;
}

.copyright {
    text-align: center;
    margin-left: 20px;
}

.copyright img {
    height: 24px;
    opacity: .5;
    margin-bottom: 2px;
}

.copyright p {
    color: #fff;
    margin-bottom: 0;
    font-size: 12px;
    opacity: 0.4;
}

footer .doc-link {
    clear: both;
    padding-top: 15px;
    text-align: center;
}

footer a.doc-btn {
    display: inline-block;
    padding: 0 18px;
    background-color: #fff;
    height: 34px;
    line-height: 34px;
    border-radius: 17px;
    color: #292f35;
    font-size: 16px;
    font-weight: 600;
}

footer a.doc-btn:hover {
    background-color: #ebbd3a;
}


/*mobile iOS stellar background color*/

#hero-area {
    background-color: #4d5667;
}


/* ==========================================================================
   Login / logout status
   ========================================================================== */

.signup div.in {
    display: none;
}


.signup-log-status div.out {
    display: none;
}

.signup.signup-log-status div.in {
    display: block;
    width: 100%;
    text-align: center;
}


ul.navbar-nav .in,
.nav-login.in,
ul.slicknav_nav .in {
    display: none;
}

.nav-log-status ul.navbar-nav .in,
.nav-log-status ul.slicknav_nav .in {
    display: block;
}

.nav-log-status .nav-login.in {
    display: flex;
}

.nav-log-status ul.navbar-nav .out,
.nav-log-status .nav-login.out,
.nav-log-status ul.slicknav_nav .out {
    display: none;
}

.price-log-status .signup-button > a.btn {
    opacity: .7;
    pointer-events: none;
    background-color: #b5b5b5;
    border-color: #b5b5b5;
}

/* ==========================================================================
   Social Iocns
   ========================================================================== */

.social-icons {
    font-size: 0;
    text-align: left;
}

.social-icons ul {
    display: inline-block;
    margin: 0;
    padding: 10px 0;
    list-style: none;
}

.social-icons ul li {
    display: inline;
}

.social-icons ul li a {
    display: inline-block;
    margin-right: 8px;
    border-radius: 50%;
    line-height: 40px;
    width: 40px;
    height: 40px;
    text-align: center;
    background: #ddd;
    font-size: 16px;
}

.social-icons ul li:last-child a {
    margin-right: 0;
}

.social-icons ul li a:hover {
    color: #fff;
}

.facebook a {
    color: #4867AA;
}

.facebook a:hover {
    background: #4867AA;
}

.twitter a {
    color: #1DA1F2;
}

.twitter a:hover {
    background: #1DA1F2;
}

.google-plus a {
    color: #DD4D42;
}

.google-plus a:hover {
    background: #DD4D42;
}

.youtube a {
    color: #DF2926;
}

.youtube a:hover {
    background: #DF2926;
}

.linkedin a {
    color: #007BB6;
}

.linkedin a:hover {
    background: #007BB6;
}

.pinterest a {
    color: #BD081C;
}

.pinterest a:hover {
    background: #BD081C;
}

.dribbble a {
    color: #EA4C89;
}

.dribbble a:hover {
    background: #EA4C89;
}

.behance a {
    color: #0B7CFF;
}

.behance a:hover {
    background: #0B7CFF;
}


/* ==========================================================================
16. login Style
 ========================================================================== */

#sign,
#sign body {
    height: 100%;
}

#sign body {
    width: 100%;
    display: table;
}

#sign .table-cell {
    display: table-cell;
    vertical-align: middle;
    padding: 80px 10px;
}

@media (max-width: 767px) {
    #sign .table-cell {
        padding-top: 70px;
        padding-bottom: 30px;
    }
}

#sign .login-head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
}

.box-btn-signup {
    float: right;
    height: 60px;
    overflow: hidden;
}

.box-btn-signup p {
    font-size: 13px;
    line-height: 60px;
    color: #687586;
    float: left;
    margin: 0;
    margin-right: 12px;
}

.box-btn-signup a {
    font-family: 'Exo 2', sans-serif;
    display: block;
    float: left;
    height: 40px;
    margin: 10px 0;
    border: 1px solid #c6cbd1;
    border-radius: 20px;
    padding: 0 26px;
    font-size: 11px;
    line-height: 38px;
    color: #000000;
    font-weight: 600;
}

.box-btn-signup a:hover {
    border: 1px solid #1e8fe1;
    background-color: #1e8fe1;
    color: #ffffff;
}

.box-login {
    margin: 0 auto;
    max-width: 460px;
}

#sign h2 {
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 0;
    text-align: center;
}

#sign p {
    color: #687586;
    text-align: center;
}

#sign label {
    font-family: 'Exo 2', sans-serif;
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

#sign input,
#sign textarea {
    width: 100%;
    border: 1px solid #c6cbd1;
    padding: 12px;
    border-radius: 4px;
    font-size: 15px;
    color: #4d5667;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

#sign .has-error input {
    border-color: #f44336
}

#sign input:focus,
#sign textarea:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
    border-color: #4d5667;
}

#sign input::-webkit-input-placeholder {
    color: #c6cbd1;
    opacity: 1;
    font-style: italic;
}

#sign input:-ms-input-placeholder {
    color: #c6cbd1;
    opacity: 1;
    font-style: italic;
}

#sign input::placeholder {
    color: #c6cbd1;
    opacity: 1;
    font-style: italic;
}

button.btn-signin, a.btn-submit {
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    display: inline-block;
    margin: 0 auto;
    cursor: pointer;
    padding: 0 40px;
    min-width: 200px;
    height: 44px;
    border-radius: 22px;
    background-color: #1e8fe1;
    margin-top: 36px;
    text-transform: uppercase;

}

a.btn-submit {
    line-height: 42px;
}

button.btn-signin:hover, a.btn-submit:hover {
    background-color: #0977c6;
    -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

#sign .form-group {
    position: relative;
}

#sign .form-group .form-help {
    position: absolute;
    top: 2px;
    right: 0;
    font-size: 13px;
    color: #687586;
}

#sign .form-group .form-help:hover {
    color: #000000;
}

#sign .signin-error {
    display: none;
    font-family: 'Exo 2', sans-serif;
    color: #f44336;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}

#sign select {
    width: 100%;
    border: 1px solid #c6cbd1;
    padding: 0 14px;
    height: 44px;
    border-radius: 4px;
    font-size: 15px;
    color: #4d5667;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

#sign .form-group .with-errors {
    display: none;
}

#sign .form-group.has-error .with-errors {
    display: block;
    font-size: 12px;
    color: #f44336;
}

#sign .form-submit {
    clear: both;
    width: 100%;
    text-align: center;
}

.name-fld input {
    margin-bottom: 0;
}



@media (max-width: 575px) {
    #sign .form-col {
        margin-bottom: 5px;
    }

    #sign .login-head {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 50px;
    }

    #sign .login-head img {
        height: 50px;
    }

    .box-btn-signup {
        float: right;
        height: 50px;
        overflow: hidden;
    }

    .box-btn-signup p {
        display: none;
    }

    .box-btn-signup a {
        height: 32px;
        margin: 8px 0;
        border-radius: 16px;
        line-height: 30px;
    }

    #sign h2 {
        font-size: 26px;
    }
}


.disabled.animated {
    animation-fill-mode: inherit !important;
}

.report-error {
    margin-top: 16px;
}

.report-error:empty {
    margin: 0 !important;
}

.report-error .alert>span {
}

/*20181113*/
.contact-form .alert-danger {
    margin-bottom: 0;
    padding: .4rem 1rem;
    border-radius: 1rem;
    border-color: #ff1744;
    background-color: #ff1744;
    color: #fff;
    font-weight: 600;
}

.contact-form .alert-danger .close {
    font-size: 1.25rem;
    font-weight: 400;
    text-shadow: none;
    opacity: 1;
    position: relative;
    top: -2px;
    color: #fff;
}