/*--------------------------------------------------------------------------------------
Theme Name: MANTAV HOSTING
Theme URI: http://devitfamily.com
Author URI: http://devitfamily.com
Description: 100% Responsive, Highly Customizable, SEO Friendly HOSTING HTML template using Twitter Bootstrap Latest, Search Engine Friendly.
Author: BDEXPERT
Version: 1.0
----------------------------------------------------------------------------------------
    1. BASE CSS
    2. TOP AREA
        2.1 MAINMENU AREA
        2.2 SIDE PUSH MENU AREA
        2.3 WELCOME TEXT AREA
        2.4 WELCOME SLIDE AREA
    3. PROMO AREA
    4. PRICE AREA
    5. ABOUT AREA
    4. FEATURES AREA
    5. VIDEO AREA
    6. FEATURES AREA
    7. SERVICE AREA
    8. BLOG AREA
    9. CLIENT AREA
    10. SUBSCRIBER AREA
    11. CONTACT AREA
    12. FOOTER AREA
    13. SCROLL TO TOP
    14. CART PAGE
----------------------------------------------------------------------------------------*/


/*--------------------
    1. BASE CSS
----------------------*/

@import url('https://fonts.googleapis.com/css?family=Oxygen:400,700|Roboto');
.alignleft {
    float: left;
    margin-right: 15px;
}

.alignright {
    float: right;
    margin-left: 15px;
}

.aligncenter {
    display: block;
    margin: 0 auto 15px;
}

a {
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

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

button:focus {
    outline: 0;
}

img {
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 15px;
    font-family: 'Oxygen', sans-serif;
}

html,
body {
    height: 100%
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    font-weight: 400;
    color: #494949;
}

a:hover {
    text-decoration: none
}

.navbar-header .collapse,
.navbar-toggle {
    border: 2px solid #ff6633;
    border-radius: 0;
}

.navbar-toggle .icon-bar {
    background: #ff6633 none repeat scroll 0 0;
}


/* Remove Chrome Input Field's Unwanted Yellow Background Color */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

.section-padding {
    padding: 100px 0;
}

.padding-top {
    padding-top: 100px;
}

.padding-bottom {
    padding-bottom: 100px;
}

.margin-bottom {
    margin-bottom: 50px;
}

.margin-top {
    margin-top: 50px;
}

.gray-bg {
    background: #F3F3F3;
    color: #5b5a5a
}

.orange-bg {
    background: #ff6633;
    color: #fff;
}

.dark-bg {
    background: #333333;
    color: #fff;
}

.area-icon {
    color: #cccccc;
    margin-bottom: 50px;
}

.area-icon span {
    background: #cccccc;
    display: block;
    height: 40px;
    margin: 0 auto;
    width: 2px;
}

.area-title {
    margin-bottom: 70px;
}

.area-title h2 {
    font-size: 30px;
    text-transform: capitalize;
}

.area-title h2 span {
    font-weight: 700;
}


/*--------------------------
    2. TOP AREA
---------------------------*/

.top-area {
    height: 100%;
    position: relative;
    width: 100%;
}

.top-area-bg {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0) url("img/slider/slide_1.jpg") no-repeat scroll center center / cover;
}

.top-area-bg::after {
    background: #16222A url(img/pattarn.png);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    width: 100%;
}

canvas#demo-perticle {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.top-area-bg.video-bg {
    background: transparent none repeat scroll 0 0;
}

.top-area-bg.video-bg::after {
    opacity: 0.5;
}


/*---------------------------------
    2.1 MAINMENU AREA
-----------------------------------*/

.header-top-area {
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 999;
}

.mainmenu-area {
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    z-index: 9999 !important;
}

.navbar {
    border-bottom: 0 none;
    border-top: 0 none;
    margin-bottom: 0;
}

.navbar-header {
    margin-top: 25px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.is-sticky .navbar-header {
    margin-top: 6px;
}

.navbar-brand {
    padding: 0;
}

.navbar-brand>img {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

a.navbar-brand {
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 3px;
    line-height: inherit;
    text-transform: uppercase;
}

.navbar-brand {
    height: auto;
    margin-top: 5px;
}

ul#nav {
    float: right;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

ul#nav li {
    overflow: hidden;
    padding: 40px 15px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

ul#nav li a {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 0;
    position: relative;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

ul#nav li:hover a,
ul#nav li.active a {
    color: #ff6633;
}

.is-sticky ul#nav li {
    padding: 20px 15px;
}

.is-sticky .mainmenu-area {
    background: #16222A;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
    z-index: 99999;
}

.side-push-menu {
    color: #fff;
    float: right;
    height: 100px;
    padding-left: 20px;
    padding-top: 35px;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 60px;
}

.push-menu-open-button {
    color: #ffffff;
    cursor: pointer;
    font-size: 20px;
    height: 30px;
    padding-top: 3px;
    position: absolute;
    right: 0;
    text-align: center;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 40px;
}

.push-menu-open-button:hover {
    color: #ffffff;
    background: #ff6633;
}

.push-menu-open-button::before {
    border-left: 1px dashed;
    content: "";
    height: 100%;
    left: -20px;
    position: absolute;
    top: 0;
    width: 1px;
}

.is-sticky .side-push-menu {
    padding-top: 15px;
    height: 60px;
}

.shoping-curt {
    float: right;
    font-size: 25px;
    height: 100px;
    padding: 35px;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 40px;
}

.is-sticky .shoping-curt {
    height: 60px;
    padding: 15px 35px;
}

.shoping-curt-button {
    color: #fff;
    cursor: pointer;
    height: 30px;
    left: 50%;
    margin-left: -15px;
    position: absolute;
    top: 38px;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 30px;
}

.is-sticky .shoping-curt-button {
    top: 19px;
}

.shoping-curt:hover .shoping-curt-button {
    color: #ff6633;
}

.shoping-curt-button::after {
    background: #ff6633 none repeat scroll 0 0;
    border-radius: 50%;
    color: #fff;
    content: "2";
    font-size: 12px;
    height: 20px;
    line-height: 1.5;
    position: absolute;
    right: -10px;
    text-align: center;
    top: -10px;
    width: 20px;
}

.shoping-curt ul {
    background: #fff none repeat scroll 0 0;
    box-shadow: 0 3px 6px #333;
    font-size: 15px;
    list-style: outside none none;
    margin: 0;
    padding: 15px;
    position: absolute;
    right: 0;
    top: 100px;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
    -webkit-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    width: 250px;
    opacity: 0;
    z-index: 9;
}

.shoping-curt:hover ul {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    opacity: 1;
}

.cart-items>div {
    border-bottom: 1px dashed #ff6633;
    padding: 15px 10px;
}

.cart-items>div:last-child {
    border-bottom: 0 none;
    padding: 0;
}

.cart-item {
    padding-left: 70px !important;
    position: relative;
}

.cart-img {
    left: 0;
    position: absolute;
    top: 10px;
    width: 60px;
}

.cart-content a {
    color: #494949;
}

.cart-content a:hover {
    color: #ff6633;
}

.shoping-curt .total {
    height: 40px;
    margin-bottom: 20px;
    padding: 10px 0;
}

.cart-btn a {
    background: #494949 none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    font-size: 13px;
    letter-spacing: 2px;
    padding: 5px 8px;
    text-transform: uppercase;
}

.cart-btn a:hover {
    background: #ff6633 none repeat scroll 0 0;
}

.cart-btn a:last-child {
    float: right;
}

.pull-right.cart-remove {
    color: #ff6633;
    height: 15px;
    position: absolute;
    right: 0;
    width: 15px;
}

.pull-right.cart-remove:hover {
    color: #ff6633;
}

.cart-content span {
    display: block;
}

.is-sticky .shoping-curt ul {
    top: 60px;
}


/*-----------------------------------
    2.2 SIDE PUSH MENU AREA
------------------------------------*/

.push-menu-and-content {
    background: #272727 none repeat scroll 0 0;
    color: #fff;
    height: 100%;
    padding: 30px;
    max-width: 300px;
    overflow-x: hidden;
    overflow-y: scroll;
    position: fixed;
    right: -300px;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    z-index: 9999;
}

.push-menu-and-content.menu-open {
    right: 0;
}

.search-bar {
    margin-bottom: 30px;
}

.search-bar form {
    border: 1px solid #555;
    height: 35px;
    position: relative;
    width: 100%;
}

.search-bar form input {
    background: transparent none repeat scroll 0 0;
    border: 0 none;
    height: 100%;
    letter-spacing: 1px;
    padding: 5px;
    position: absolute;
    width: 100%;
}

.search-bar form button {
    background: #ff6633 none repeat scroll 0 0;
    border: 0 none;
    height: 35px;
    position: absolute;
    right: -1px;
    top: -1px;
    width: 40px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.search-bar form button:hover {
    background: #ffffff;
    color: #ff6633;
}

.push-menu {
    margin-bottom: 40px;
}

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

.push-menu ul li {
    display: block;
}

.push-menu ul li a {
    color: #fff;
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 5px 0;
    text-transform: uppercase;
}

.push-menu ul li a i {
    float: right;
}

.push-menu ul li a:hover,
.push-menu ul li a:focus {
    color: #ff6633;
}

.push-menu-close {
    background: #ff6633 none repeat scroll 0 0;
    color: #fff;
    cursor: pointer;
    font-size: 35px;
    height: 40px;
    left: 0;
    padding-top: 3px;
    position: absolute;
    text-align: center;
    top: 24px;
    width: 40px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.push-menu-close:hover {
    background: #fff none repeat scroll 0 0;
    color: #ff6633;
}

.push-menu-logo {
    margin-bottom: 40px;
    text-align: center;
}

.push-menu-logo img {
    max-width: 70%;
}

.push-menu-img-and-about-content {
    margin-bottom: 40px;
}

.push-menu-and-content .push-menu-social-bookmark {
    margin-bottom: 20px;
}

.push-menu-and-content .push-menu-social-bookmark ul {
    text-align: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.push-menu-and-content .push-menu-social-bookmark ul li {
    display: inline;
}

.push-menu-and-content .push-menu-social-bookmark ul li a {
    color: #fff;
    display: inline-block;
    height: 30px;
    text-align: center;
    width: 30px;
}

.push-menu-and-content .push-menu-social-bookmark ul li a:hover {
    color: #ff6633;
}


/*-----------------------------------
    2.3 WELCOME TEXT AREA
-------------------------------------*/

.welcome-text-area {
    color: #fff;
    height: 100%;
    line-height: 1.5em;
    padding-bottom: 10%;
    padding-top: 10%;
    position: relative;
    width: 100%;
}

.welcome-text-area .container,
.welcome-text-area .row,
.welcome-text-area .col-lg-10 {
    height: 100%;
}

.welcome-text {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    width: 100%;
    z-index: 9;
}

.before_icon,
.after_icon {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.before_icon::before,
.before_icon::after,
.after_icon::before,
.after_icon::after {
    border-left: 2px solid;
    border-top: 2px solid;
    content: "";
    height: 100px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100px;
    -webkit-transition: border-color 0.3s;
    transition: border-color 0.3s;
}

.before_icon::after {
    border-left: 0 none;
    border-right: 2px solid;
    left: auto;
    right: 0;
}

.after_icon::before {
    border-bottom: 2px solid;
    border-top: 0 none;
    bottom: 0;
    top: auto;
}

.after_icon::after {
    border-bottom: 2px solid;
    border-right: 2px solid;
    border-top: 0;
    border-left: 0;
    bottom: 0;
    left: auto;
    right: 0;
    top: auto;
}

.welcome-text h1 {
    font-weight: 700;
    line-height: 1;
    text-transform: capitalize;
    font-size: 50px;
    letter-spacing: 2px;
    margin-bottom: 30px;
}

.welcome-text h1 span {
    color: #ff6633;
}

.welcome-text h2 {
    font-size: 40px;
}

.domain-search-form form {
    color: #333;
    height: 60px;
    margin: 0 auto;
    position: relative;
    width: 80%;
}

#domain-search input {
    background: #fff none repeat scroll 0 0;
    border: 0 none;
    border-radius: 5px;
    float: left;
    height: 100%;
    left: 0;
    padding: 0 20px;
    position: absolute;
    top: 0;
    width: 75%;
    z-index: 9;
}

.domain-search-form {
    margin-top: 20px;
    width: 100%;
}

#domain-search button {
    background: #ff6633 none repeat scroll 0 0;
    border: 0 none;
    border-radius: 5px;
    color: #fff;
    float: right;
    font-size: 22px;
    height: 100%;
    letter-spacing: 2px;
    position: absolute;
    right: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 20%;
}

#domain-search button:hover {
    color: #ff6633;
    background: #fff;
}

.domain-search-form select {
    -moz-appearance: none;
    -webkit-appearance: none;
    background: rgba(0, 0, 0, 0) url("img/icon/arrow.png") no-repeat scroll right 10px center;
    border: 0 none;
    height: 60px;
    position: absolute;
    right: 25%;
    top: 0;
    width: 80px;
    z-index: 9;
}

.domain-search-form select:focus {
    outline: none;
}

.availability {
    margin-top: 15px;
}

.availability i {
    color: #ff6633;
    margin-right: 10px;
}

.home-button {
    bottom: 30px;
    left: 50%;
    margin-left: -16px;
    position: absolute;
}

.home-button a {
    border: 1px solid;
    border-radius: 50px;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 5px;
    text-transform: uppercase;
}

.home-button a:hover {
    color: #ff6633;
}

.home-button a i {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    color: #ff6633;
    -webkit-transition: color 0.3s ease 0s;
    transition: color 0.3s ease 0s;
}


/*-----------------------------
    2.4 WELCOME SLIDE AREA
------------------------------*/

.welcome-slider-area {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.welcome-slider-area.owl-carousel div:not(.owl-controls) {
    height: 100%;
}

.single-welcome-slide::before {
    background: #16222a url(img/pattarn.png);
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.single-welcome-slide {
    position: absolute;
    width: 100%;
    z-index: 9;
    height: 100%;
}

.welcome-slider-area .owl-controls {
    bottom: 5%;
    left: 50%;
    position: absolute;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 9;
}

.welcome-slider-area.owl-carousel .owl-dots {
    width: 100px;
    text-align: center;
}

.welcome-slider-area .owl-dots>div {
    background: #7a8693 none repeat scroll 0 0;
    display: inline-block !important;
    height: 15px !important;
    margin: 0 5px !important;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 15px !important;
    position: relative;
    border-radius: 50%;
}

.welcome-slider-area .owl-dots>div.active {
    background: #fff none repeat scroll 0 0;
}

.welcome-slide-one {
    background: url('img/slider/slide_1.jpg');
}

.welcome-slide-two {
    background: url('img/slider/slide_2.jpg');
}

.welcome-slide-three {
    background: url('img/slider/slide_3.jpg');
}

.welcome-slide-four {
    background: url('img/slider/slide_4.jpg');
}

.welcome-slide-one,
.welcome-slide-two,
.welcome-slide-three,
.welcome-slide-four {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}


/*-----------------------------
    3. PROMO AREA
-------------------------------*/

.promo-area .before_icon::before,
.promo-area .before_icon::after,
.promo-area .after_icon::before,
.promo-area .after_icon::after {
    height: 30px;
    width: 30px;
}

.single-promo {
    padding: 40px 15px;
    position: relative;
    text-align: center;
    -webkit-transition: all 0.3s ease-in 0s;
    transition: all 0.3s ease-in 0s;
    z-index: 9;
}

.single-promo:hover {
    background: #ff6633 none repeat scroll 0 0;
    box-shadow: 0 0 20px #dfdfdf;
    color: #fff;
}

.single-promo:hover .about-icon,
.single-promo:hover h3 {
    color: #fff;
}

.promo-icon {
    background: #ff9933 none repeat scroll 0 0;
    border-radius: 50%;
    box-shadow: 0 0 0 5px #fff, 0 0 0 7px #ff6633, 0 0 0 12px #fff, 0 0 0 14px transparent;
    font-size: 60px;
    height: 80px;
    margin: 0 auto 40px;
    padding: 13px;
    position: relative;
    text-align: center;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 80px;
}

.single-promo:hover .promo-icon {
    background: #ff6633 none repeat scroll 0 0;
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px #ff6633, 0 0 0 7px #ff6633, 0 0 0 10px #ff895e;
    height: 90px;
    width: 90px;
}

.single-promo h3 {
    font-size: 20px;
    margin-bottom: 25px;
}


/*---------------------------
    4. PRICE AREA
-----------------------------*/

.no-padding {
    padding: 0;
}

.single-price {
    background: #fff none repeat scroll 0 0;
    margin-top: 100px;
    padding: 0 40px 40px;
    position: relative;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.single-price:hover,
.single-price.active {
    background: #ff6633 none repeat scroll 0 0;
    color: #fff;
}

.price-img img {
    margin-top: -100px;
    max-height: 230px;
}

.price-img {
    text-align: center;
}

.priceing-area .before_icon::before,
.priceing-area .before_icon::after,
.priceing-area .after_icon::before,
.priceing-area .after_icon::after {
    height: 15px;
    width: 15px;
    border-color: #0099ff;
}

.priceing-area .single-price:hover .before_icon::before,
.priceing-area .single-price.active .before_icon::before,
.priceing-area .single-price:hover .before_icon::after,
.priceing-area .single-price.active .before_icon::after,
.priceing-area .single-price:hover .after_icon::before,
.priceing-area .single-price.active .after_icon::before,
.priceing-area .single-price:hover .after_icon::after,
.priceing-area .single-price.active .after_icon::after {
    height: 15px;
    width: 15px;
    border-color: #fff;
}

.single-price::after {
    background: #0099ff none repeat scroll 0 0;
    bottom: 0;
    content: "";
    height: 5px;
    left: 50%;
    margin-left: -50px;
    position: absolute;
    width: 100px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.single-price:hover::after,
.single-price.active::after {
    background: #ff9933;
}

.price-title {
    letter-spacing: 2px;
    margin: 30px 0;
    text-align: center;
    text-transform: uppercase;
}

.price-rate {
    background: #ccffff none repeat scroll 0 0;
    padding: 15px;
    position: relative;
    text-align: center;
    z-index: 9;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.single-price:hover .price-rate,
.single-price.active .price-rate {
    background: #ff9933 none repeat scroll 0 0;
    color: #fff;
}

.single-price:hover .price-rate small,
.single-price.active .price-rate small {
    color: #fff;
}

.price-rate h3 {
    font-size: 36px;
    margin-bottom: 0;
}

.price-details ul {
    list-style: outside none none;
    margin: 0;
    padding: 20px 0;
}

.price-details ul li {
    margin: 10px 0;
}

.price-details ul li i {
    color: #0099ff;
    margin-right: 10px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.single-price:hover .price-details ul li i,
.single-price.active .price-details ul li i {
    color: #fff;
}

.price-button a {
    background: #cccccc none repeat scroll 0 0;
    color: #666666;
    display: block;
    font-size: 18px;
    letter-spacing: 1px;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
}

.single-price:hover .price-button a,
.single-price.active .price-button a {
    background: #ff9933 none repeat scroll 0 0;
    color: #fff;
}

.price-button a:hover {
    color: #ff9933 !important;
    background: #fff !important;
}


/*-----------------------------
    5. ABOUT AREA
------------------------------*/

.about-area .before_icon::before,
.about-area .before_icon::after,
.about-area .after_icon::before,
.about-area .after_icon::after {
    height: 15px;
    width: 15px;
    border-color: #cccccc;
}

.about-right-content {
    float: right;
}

.about-left-content {
    float: left;
}

.about-content {
    margin-bottom: 40px;
}

.about-content h3,
.features-hidding h3 {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5em;
}

.about-content h3 span,
.features-hidding h3 span {
    font-weight: 700;
}

.about-details-menu ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.about-details-menu ul li {
    margin-bottom: 30px;
    padding: 10px 50px 10px 120px;
    position: relative;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.about-details-menu ul li.active {
    background: #ff6633 none repeat scroll 0 0;
    box-shadow: 0 0 20px #dfdfdf;
    color: #fff;
}

.about-thumbnail {
    box-shadow: 0 0 0 5px #ff6633;
    height: 70px;
    left: 20px;
    margin-top: -35px;
    position: absolute;
    top: 50%;
    width: 70px;
}

.about-menu-details h5 {
    font-size: 16px;
    margin-bottom: 5px;
}

.about-details-menu a {
    color: #494949;
}

.about-details-menu a.read-more {
    font-size: 50px;
    height: 50px;
    margin-top: -25px;
    position: absolute;
    right: 0;
    top: 50%;
    color: #ff6633;
}

.about-details-menu ul li.active a {
    color: #fff;
}


/*----------------------------
    6. FEATURES AREA
-----------------------------*/

.features-area .area-icon span,
.subscriber-area .area-icon span {
    background: #fff none repeat scroll 0 0;
}

.features-area .area-icon,
.subscriber-area .area-icon {
    color: #fff;
}

.features-hidding {
    margin-bottom: 25px;
}

.right-features {
    float: right;
}

.left-features {
    float: left;
}

.single-features {
    padding: 30px 0;
    position: relative;
}

.left-features-list .single-features {
    padding-right: 110px;
}

.right-features-list .single-features {
    padding-left: 110px;
}

.features-icon {
    background: #fff none repeat scroll 0 0;
    border-radius: 50%;
    box-shadow: 0 0 0 7px #ff6633, 0 0 0 9px #fff;
    height: 90px;
    left: 0;
    margin-top: -45px;
    padding: 20px;
    position: absolute;
    top: 50%;
    width: 90px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.left-features-list .single-features .features-icon {
    left: auto;
    right: 0;
}

.single-features:hover .features-icon {
    box-shadow: 0 0 0 5px #ff6633, 0 0 0 7px #fff, 0 0 0 12px #ff6633, 0 0 0 14px #ff8a5f;
}


/*----------------------------
    7. SERVICE AREA
-----------------------------*/

.single-service {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    float: left;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    max-height: 100px;
    min-height: 100px;
    width: 33.33%;
}

.service-details h3 {
    font-size: 24px;
    line-height: 1.5em;
    margin-bottom: 25px;
}

.service-details h3 span {
    font-weight: 700;
}

.service-details .read-more {
    color: #ff6633;
    display: inline-block;
    font-size: 18px;
    letter-spacing: 2px;
    margin-top: 20px;
}

.service-details .read-more:hover i {
    padding-left: 15px;
}

.service-details .read-more i {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}


/*----------------------------
    8. BLOG AREA
------------------------------*/

.single-blog {
    background: #fff none repeat scroll 0 0;
}

.post-details {
    position: relative;
}

.post-content {
    overflow: hidden;
    padding: 0 30px 61px;
}

.post-details h3 {
    background: #ff9933 none repeat scroll 0 0;
    color: #fff;
    font-size: 20px;
    line-height: 1.5em;
    padding: 20px;
}

.post-details h3 a {
    color: #fff;
}

.small-blog .post-thumbnail img {
    width: 100%;
}

.small-blog .single-blog .post-details h3 a {
    color: inherit;
}

.postmeta {
    margin: 20px 0;
    text-align: center;
}

.postmeta a {
    color: #454545;
    margin-right: 20px;
}

.postmeta a:hover {
    color: #ff6633;
}

.postmeta a i {
    margin-right: 5px;
}

.small-blog .single-blog {
    height: 270px;
    margin-bottom: 20px;
    min-height: 270px;
    overflow: hidden;
}

.small-blog .single-blog>div {
    float: left;
    width: 50%;
    display: inline-block;
}

.small-blog:last-child .single-blog {
    margin-bottom: 0;
}

.small-blog:last-child .single-blog .post-thumbnail {
    float: right;
    margin-right: auto;
}

.small-blog .single-blog .post-thumbnail {
    float: left;
}

.small-blog .single-blog .post-details {
    height: 100%;
    padding: 20px 0;
    position: relative;
}

.small-blog .single-blog .post-details h3 {
    background: inherit;
    color: inherit;
    font-size: 18px;
    font-weight: 300;
    padding: 0;
}

.post-content a.read-more {
    background: #ff6633 none repeat scroll 0 0;
    bottom: 0;
    color: #fff;
    display: inline-block;
    float: right;
    letter-spacing: 0;
    margin-top: 25px;
    overflow: hidden;
    padding: 10px 25px;
    position: absolute;
    right: 0;
    text-align: center;
}

.small-blog .post-content a.read-more {
    bottom: 0;
    left: 0;
    position: absolute;
    width: 100%;
}

.post-content a.read-more:hover {
    letter-spacing: 2px;
}

.post-content a.read-more i {
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.post-content a.read-more:hover i {
    padding-left: 15px;
}

.blog-area .owl-controls {
    bottom: 0;
    left: 0;
    position: absolute;
}

.blog-area .owl-nav>div {
    color: #333;
    display: inline-block;
    font-size: 30px;
    height: 40px;
    padding-top: 6px;
    text-align: center;
    width: 50px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.blog-area .owl-nav>div:hover {
    background: #f1f1f1 none repeat scroll 0 0;
    color: #ff6633;
}


/*-----------------------------
    9. CLIENT AREA
------------------------------*/

.clients-area .owl-carousel .owl-item img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    width: auto;
}


/*-----------------------------
    10. SUBSCRIBER AREA
------------------------------*/

.subscriber-area {
    position: relative;
    color: #ffffff;
}

.subscriber-area-bg {
    background: rgba(0, 0, 0, 0) url("img/slider/slide_1.jpg") no-repeat fixed center center / cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.subscriber-area-bg::after {
    background: #ff9933 none repeat scroll 0 0;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0.9;
    position: absolute;
    top: 0;
    width: 100%;
}

.subscriber-from-area {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-height: 300px;
    position: relative;
    z-index: 1;
}

.subscriber-area .before_icon::before,
.subscriber-area .before_icon::after,
.subscriber-area .after_icon::before,
.subscriber-area .after_icon::after {
    height: 30px;
    width: 30px;
    border-color: #ffffff;
}

.subscriber-form h3 {
    font-size: 24px;
    line-height: 1.5em;
}

.subscriber-form form {
    background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0;
    height: 50px;
    position: relative;
    width: 100%;
}

.subscriber-form form input {
    background: rgba(255, 255, 255, 0.6) none repeat scroll 0 0;
    border: 0 none;
    color: #ff6633;
    height: 100%;
    left: 0;
    padding: 10px;
    position: absolute;
    top: 0;
    width: 100%;
}

.subscriber-form form button {
    background: #ff6633 none repeat scroll 0 0;
    border: 0 none;
    color: #fff;
    font-size: 50px;
    font-weight: 700;
    height: 100%;
    letter-spacing: 5px;
    position: absolute;
    right: 0;
    text-transform: uppercase;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 80px;
}

.subscriber-form form button:hover {
    background: #ffffff none repeat scroll 0 0;
    color: #ff6633;
}

label.mt10 {
    position: absolute;
    right: 0;
    text-align: right;
    top: -28px;
    right: 10px;
}

label.mt10.valid {
    color: #ff6633;
    text-align: center;
    right: auto;
    top: 10px;
    width: 100%;
}


/*-----------------------------
    11. CONTACT AREA
------------------------------*/

.contact-form-area .modal-header {
    background: #ff6633 none repeat scroll 0 0;
    letter-spacing: 2px;
    text-align: center;
}

.contact-form .form-control {
    border: 1px solid #ff6633;
    border-radius: 0;
    color: #ff6633;
    font-size: 15px;
    height: auto;
    margin-bottom: 20px;
    max-height: 150px;
    padding: 10px;
}

.contact-form button {
    background: #ff6633 none repeat scroll 0 0;
    border: 0 none;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 2px;
    padding: 10px;
    width: 100%;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    text-transform: uppercase;
}

.contact-form button:hover {
    background: #16222a none repeat scroll 0 0;
}

.contact-form-area .modal-header h4 {
    color: #fff;
}


/*-----------------------------
    12. FOOTER AREA
------------------------------*/

.footer-area ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.footer-area a {
    color: #ffffff;
}

.footer-area a:hover {
    color: #ff6633;
}

.single-footer-widget h4 {
    font-size: 20px;
    letter-spacing: 2px;
    margin-bottom: 40px;
    padding-bottom: 15px;
    position: relative;
    color: #ff9933;
}

.footer-area .row>div:first-child h4 {
    margin-bottom: 10px;
}

.footer-logo {
    margin-bottom: 10px;
}

.footer-area ul li {
    display: block;
    margin-bottom: 15px;
    padding-left: 40px;
    position: relative;
}

.f_contact_icon {
    font-size: 24px;
    left: 0;
    position: absolute;
}

.footer-area ul li a {
    display: block;
}

ul.footer-list li {
    margin-bottom: 5px;
    padding: 5px 5px 5px 31px;
    position: relative;
}

.footer-area ul li a i {
    left: 4px;
    padding-right: 5px;
    position: absolute;
    top: 10px;
}

ul.footer-list.payment {
    display: block;
    margin-bottom: 50px;
    min-height: 40px;
}

.footer-list.payment li {
    padding: 0;
}

.footer-list.payment li a {
    float: left;
    margin-right: 3.33%;
    width: 30%;
}

.footer-bottom-area {
    padding: 15px 0;
}

.footer-copyright-social-bookmark ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    text-align: center;
    margin-bottom: 10px;
}

.footer-copyright-social-bookmark ul li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.footer-copyright-social-bookmark ul li a {
    display: inline-block;
    font-size: 20px;
    height: 35px;
    margin: 0 2px;
    padding-top: 3px;
    text-align: center;
    width: 38px;
    color: #494949;
}

.footer-copyright-social-bookmark ul li a i {
    margin: inherit;
    padding: inherit;
    position: inherit;
}

.footer-copyright-social-bookmark ul li a:hover {
    color: #ff6633;
}

.footer-copyright p {
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 0;
}

.footer-copyright a {
    color: #ff6633;
}


/*------------------------------
    13. SCROLL TO TOP
-------------------------------*/

a.scrolltotop {
    background: #ff6633 none repeat scroll 0 0;
    bottom: 20px;
    box-shadow: 0 0 0 7px transparent;
    color: #ffffff;
    display: none;
    font-size: 20px;
    height: 40px;
    padding-top: 7px;
    position: fixed;
    right: 20px;
    text-align: center;
    width: 40px;
    z-index: 99;
}

a.scrolltotop:hover {
    box-shadow: 0 0 0 0 #272727;
    background: #272727;
}


/*-----------------------------
    14. CART PAGE
-------------------------------*/

.top-area.single-page {
    background: #333 none repeat scroll 0 0;
    height: auto;
    min-height: 100px;
}

.single-page .mainmenu-area {
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
}

.single-page .is-sticky .mainmenu-area {
    background: #16222a none repeat scroll 0 0;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
}

.cart-area .area-title {
    margin-bottom: 20px;
}

.product-cut-dialog {
    background: #fff none repeat scroll 0 0;
}

.product-hidding {
    background: #ff6633 none repeat scroll 0 0;
    color: #fff;
    letter-spacing: 1px;
    overflow: hidden;
    padding: 12px;
    text-align: center;
}

.product-hidding p {
    display: inline-block;
    float: left;
    text-align: center;
    width: 33.33%;
}

.single-product {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 2px solid #f1f1f1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    overflow: hidden;
    padding: 20px;
    position: relative;
}

.single-product>div {
    float: left;
    text-align: center;
}

.product-remove {
    cursor: pointer;
    height: 20px;
    line-height: 1.2;
    position: absolute;
    right: 5px;
    top: 5px;
    width: 20px;
}

.single-product .product-name {
    text-align: inherit;
    width: 34%;
}

.product-period>select,
.product-period>p,
.auto-renew>p {
    margin-bottom: 5px;
}

.product-thumb {
    float: left;
    margin-right: 10px;
    width: 50px;
}

.single-product .product-name h5 {
    margin-bottom: 5px;
}

.product-name a {
    color: #ff6633;
}

.single-product .product-period {
    width: 20%;
}

.single-product .auto-renew {
    width: 20%;
    position: relative;
}

.renew-checkbox {
    background: #fff none repeat scroll 0 0;
    border: 2px solid #ff6633;
    height: 20px;
    position: relative;
    width: 20px;
}

.renew-checkbox::after {
    background: #ff6633 none repeat scroll 0 0;
    content: "";
    height: 20px;
    left: 1px;
    position: absolute;
    top: 1px;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 20px;
    z-index: 9;
}

.renew-checkbox:checked::after {
    -webkit-transform: scale(1);
    transform: scale(1);
}

.single-product .product-price {
    float: right;
    width: 20%;
}

.product-price h3 span {
    color: red;
    display: block;
    font-size: 15px;
    margin-top: 5px;
}

.protect-thumb-details img {
    float: left;
    margin-right: 15px;
    width: 60px;
}

.protection {
    padding: 20px;
}

.protection-details {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.protect-thumb-details {
    width: 64%;
}

.protection-details input {
    float: left;
    margin-right: 15px;
}

.protection .price {
    float: right;
    text-align: center;
    width: 30%;
}

.protect-thumb-details a.read-more {
    color: #ff6633;
}

.payment {
    overflow: hidden;
    padding: 20px;
}

.single-payment-mathod {
    float: left;
    width: 33.33%;
    text-align: center;
    position: relative;
}

.single-payment-mathod .renew-checkbox {
    left: 23%;
    position: absolute;
    top: 28%;
}

.cupon-promo {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 20px 20px 0;
    overflow: hidden;
}

.cupon-promo-img {
    float: left;
    margin-right: 60px;
}

.cupon-right-text h4 {
    font-size: 20px;
    letter-spacing: 2px;
}

.cupon-right-text>form {
    height: 40px;
    min-width: 350px;
    position: relative;
}

.cupon-right-text>form input {
    background: #f1f1f1 none repeat scroll 0 0;
    border: 0 none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.cupon-right-text>form button {
    background: #ff6633 none repeat scroll 0 0;
    border: 0 none;
    color: #fff;
    font-size: 35px;
    height: 100%;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    width: 60px;
}

.cupon-right-text>form button:hover {
    width: 70px;
}

.checkout-content {
    background: #fff none repeat scroll 0 0;
}

.sub-total,
.total {
    border-bottom: 2px solid #f1f1f1;
    border-top: 2px solid #f1f1f1;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    overflow: hidden;
    padding: 10px 20px;
    text-transform: uppercase;
}

.checkout-balance-count {
    padding: 20px;
}

.sub-total span,
.checkout-balance-count span,
.total span {
    float: right;
}

.checkout-balance-count ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}

.checkout-balance-count ul li {
    padding: 5px 0;
}

.sub-total p,
.total p {
    margin: 0;
}

.sub-total {
    border-top: 0 none;
}

.total {
    border-bottom: 0 none;
}

a.checkout {
    background: #ff6633 none repeat scroll 0 0;
    color: #fff;
    display: block;
    letter-spacing: 0;
    padding: 10px;
    text-align: center;
}

a.checkout:hover {
    letter-spacing: 1px;
}