/***********************************************
Template Name: SMARTCO - Multipage Corporate HTML5 Template With PSD

Description: Smartco is a modern and beautiful HTML5 multipage corporate template for the creative and professional person or company. This template contains 6 different page layout with awesome design.
Full code is well organized and easy to customize. CSS file is well indexed so that anyone can change the design, colors etc. It’s fully responsive and looks stunning on any desktop pc, tablet or mobile devices.

Author: Enventer
Author URL: https://themeforest.net/user/enventer

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

/*>>> TABLE OF CONTENTS:
----------------------------------------------------------------
  #1.0 Theme default CSS
  #2.0 Demo Page  Filter


--------------------------------------------------------------
            #1.0 Theme default CSS
--------------------------------------------------------------
                #1.1 Section heading
                #1.2 Section button
                #1.3 Scroll up
                #1.4 Ajax preloading
                #1.5. Header Menu
                #1.6 Header logo
                #1.7 All menu
                #1.8. Header Image
                #1.9 Demo Section
                #1.10 Footer Section


--------------------------------------------------------------
            #2.0 Demo Page  Filter
--------------------------------------------------------------
                #2.1 Header area
                #2.2 Page filter
                #2.3 Page grid
                #2.4 Our Feature



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

/*====================  #1.0 Theme default CSS ===================*/

html,
body {
    height: 100%;
    font-family: 'Raleway', sans-serif;
;
}

a:focus {
    outline: 0px solid
}

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

p {
    margin: 0 0 15px;
    font-size: 17px;
    line-height: 31px;
    color: #414142;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 10px;
    color: #414142;
}
h4{
    font-size: 20px;
}

a {
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    text-decoration: none;
}

a:hover {
    color: #6b6fff;
    text-decoration: none;
}

a:active,
a:hover {
    outline: 0 none;
}

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

.container {
    max-width: 1200px;
}

.margin-btm {
    margin-bottom: 30px
}

/*============== #1.1 Section heading =================*/

.section-title h4 {
    font-size: 18px;
    text-transform: uppercase
}

.section-title h2 {
    font-weight: 700;
    font-size: 28px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #414142;
    padding-bottom: 20px
}

/*=============== #1.2 Section button ============*/

.section-button {
    margin-top: 40px
}

.section-button a {
    background-color: #4e4e4c;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    padding: 15px 0;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    font-size: 14px;
    font-weight: 700;
    width: 150px;
    text-align: center;
    -webkit-box-shadow: 0 5px 16px #bababa;
    box-shadow: 0 5px 16px #bababa;
    border: 1px solid transparent
}

.section-button a:hover {
    border: 1px solid #4e4e4c;
    color: #4e4e4c;
    background-color: transparent;
    -webkit-box-shadow: 0 5px 16px #fff;
    box-shadow: 0 5px 16px #fff;
}

/*============== #1.3 Scroll up ================*/

#scrollUp {
    background: #4e4e4c;
    bottom: 15px;
    color: #fff;
    height: 50px;
    line-height: 50px;
    right: 15px;
    text-align: center;
    -webkit-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    width: 50px;
}

.margin-boottom20 {
    margin-bottom: 20px
}

.margin-boottom30 {
    margin-bottom: 30px
}

/*=================  #1.4 Ajax preloading > #preloader ====================*/

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    z-index: 99999;
    height: 100%;
}

#status {
    position: absolute;
    left: 55%;
    top: 45%;
    width: 150px;
    height: 150px;
    margin: -32px 0 0 -32px;
    padding: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%)
}

#status img {
    height: 120px;
    width: 120px;
}


/*==============  #1.5. Header Menu > .main-navigation ===================*/

.main-navigation {
    position: absolute;
    left: 0;
    top: 10px;
    width: 100%;
    background-color: #4e4e4c;
    z-index: 11;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s
	
}


/*================= #1.6 Header logo > .logo-area ===================*/

.logo-area a img {
    margin-top: 16px;
    display: inline-block;
    -webkit-transition: .7s;
    -o-transition: .7s;
    transition: .7s;
}


/*=========== #1.7 All menu style area =================*/

/*==============  mainmenu > .menuabr =================*/

.main-menu ul li {
    display: inline-block;
    margin-left: 25px;
    position: relative
}

.main-menu ul li a {
    color: #fff;
    display: inline-block;
    text-transform: capitalize;
    font-size: 16px;
    padding: 32px 0;
    line-height: 1;
    position: relative;
    font-weight: 500;
}

.main-menu ul li a.current:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 3px;
    background-color: #fff;
    top: 70%;
    left: 0;

}

.main-menu ul li a:before {
    position: absolute;
    content: "";
    width: 0%;
    height: 3px;
    background-color: #fff;
    top: 70%;
    left: 0;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s
}

.main-menu ul li a:hover:before {
    width: 100%
}

.f-right {
    float: right;
}

.mean-container .mean-nav {
    margin-top: 10px;
}

.main-menu ul li ul.dropdown {
    position: absolute;
    right: 0;
    top: 130%;
    width: 220px;
    background-color: #5155ed;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    padding: 10px 0 15px 10px
}

.main-menu ul li i {
    margin-left: 5px
}

.main-menu ul li:hover ul.dropdown {
    top: 104%;
    opacity: 1;
    visibility: visible
}

.main-menu ul li:hover ul.dropdown li a:before {
    width: 0;
}

ul.dropdown li a:hover {
    color: #cccccc
}

.main-menu ul li ul.dropdown li {
    display: block;
    margin-left: 15px
}

.main-menu ul li ul.dropdown li a {
    padding: 10px 0px;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s
}

#mobile-menu {
    display: block;
}

/*===========  stickymenu > .sticky ================*/

.main-navigation.sticky {
    background-color: #4e4e4c;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s
}

.sticky .menubar nav ul li {
    padding: 15px 15px;
}


/*================ header image content > .intro-text ===================*/

.intro-text {
    position: absolute;
    left: 0%;
    top: 33%;
    margin: auto;
    right: 0;
    text-align: center;z-index:99999;
}

.intro-text h1 {
    text-transform: uppercase;
    font-size: 30px;
    letter-spacing: 1px;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 700;
    letter-spacing: 1px;line-height:40px;
}

.intro-text h3 {
    font-size: 18px;
    letter-spacing: 1px;
    color: #e5e5e5;
    font-weight: 400;
    line-height: 28px
}

.learnmore {
    margin-top: 25px
}

.learnmore a {
    background-color: #4e4e4c;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    padding: 14px 25px;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    font-size: 14px;
    font-weight: 700;
}

.learnmore a:hover {
    background-color: #fff;
    color: #4e4e4c;
}
.padding{padding: 90px 0px;}
.padding90{
    padding: 0px 0px 90px 0px;
}


/*============= #1.9 Demo Section ==============*/


.demo-image {
    position: relative;
    overflow: hidden
}

.demo-image img {
    -webkit-transition: .7s;
    -o-transition: .7s;
    transition: .7s;
    width: 100%
}

.demo-tag {
    position: absolute;
    top: 15px;
    right: 0;
}

.demo-tag span {
    background-color: #6b6fff;
    padding: 8px 18px;
    color: #fff;
    text-transform: capitalize;
    font-size: 15px;
    display: block;
    text-align: center
}

.demo-content {
    padding: 20px 20px 25px 20px
}

.demo-content-heading {
    display: inline-block;
    width: 70%
}

.demo-date {
    display: inline-block;
    width: 28%
}

.demo-content-heading h4,
.demo-content-heading h4 > a {
    font-size: 18px;
    color: #414142;
    text-transform: uppercase;
    font-weight: 700;
}

.demo-date span {
    font-size: 14px;
    color: #686868;
    text-transform: capitalize;
    text-align: right;
    display: block
}

.demo-content p {
    font-size: 15.5px;
    line-height: 26px;
    margin-bottom: 0;
}

.demo-readmore-btn {
    text-transform: capitalize;
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    color: #6b6fff;
    position: relative;
    margin-top: 10px
}

.demo-readmore-btn::before {
    position: absolute;
    content: "";
    width: 0;
    height: 2px;
    background-color: #6b6fff;
    left: 0;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    bottom: -5px;
    opacity: 0;
    visibility: hidden;
    transition: .5s;
}

.demo-readmore-btn:hover:before {
    width: 50px;
    opacity: 1;
    visibility: visible;

}

/*============= #1.10 Footer Section ================*/

.footer-area {
    background-image: url('img/./footer-bg.jpg');
    -webkit-clip-path: polygon(0 0, 100% 20%, 100% 100%, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 20%, 100% 100%, 100% 100%, 0 100%);
    position: relative;
    color: #fff
}

.footer-area::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #4e4e4c;
}

.footer-icon {
    text-align: right;
    position: absolute;
    right: 0;
    bottom: -200px;
}

.footer-top {
    padding: 120px 0 90px 0;
}

.single-widget h2 {
    font-size: 20px;
    font-weight: 700;
    text-transform: capitalize;
    color: #fff;
}

.single-widget .border-right {
    border-right: 2px solid #fff
}

.company-logo img {
    width: 180px
}

.about-company p {
    color: #e5e5e5;
    font-size: 15.5px;
    line-height: 26px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.about-company ul.social li {
    display: inline-block;
    margin-right: 10px
}

.about-company ul.social li a {
    display: inline-block;
    background-color: #fff;
    color: #4e4e4c;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s
}

.about-company ul.social li a:hover {
    color: #4e4e4c
}

.quick-links ul li a {
    color: #e5e5e5;
    font-size: 15.5px;
    line-height: 26px
}

.our-address p,
.newsletter p {
    color: #e5e5e5;
    font-size: 15.5px;
    line-height: 26px;
}

.our-address a {
    color: #e5e5e5;
    font-size: 15.5px;
    line-height: 26px;
}

.our-address i {
    margin-right: 10px;
    color: #e5e5e5;
    line-height: 28px;
}

.newsletter #newssubmit {
    width: 100%;
    background-color: transparent;
    color: #fff;
    border: 1px solid #fff;
    padding: 10px;
    margin-bottom: 15px;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s
}

.newsletter .subscribe {
    border: none;
    background-color: #4e4e4c;
    color: #fff;
    padding: 10px 10px;
    cursor: pointer;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s
}

.newsletter #newssubmit:focus {
    padding: 10px 0 10px 15px;
}

.newsletter .subscribe:hover {
    background-color: #fff;
    color: #4e4e4c
}

/*======== Footer bottom ===========*/

.footer-bottom {
    background-color: #4e4e4c;
    height: 80px
}

.footer-bottom p {
    color: #e5e5e5;
    line-height: 80px;
    margin: 0;
    text-align: center;
}

.footer-bottom a {
    color: #b9b9e6;
    font-weight: 700
}




/*============================= #2.0 Demo Page  Filter=========================*/

/*========== #2.1 Header area ==========*/

.demo-header-area {
    background-image: url(./img/demo-cover.jpg);
    height: 65vh;
    width: 100%;
    background-position: 50% 0;
    background-size: cover;
    position: relative;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 85%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 0 85%);
}

.demo-header-area:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#4e4e4c), color-stop(#4e4e4c), to(#4e4e4c));
    background-image: -webkit-linear-gradient(top, #4e4e4c, #4e4e4c, #4e4e4c);
    background-image: -o-linear-gradient(top, #4e4e4c, #4e4e4c, #4e4e4c);
    background-image: linear-gradient(to bottom, #4e4e4c, #4e4e4c, #4e4e4c)
}
.demo-header-area:after{content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;background-image: url('img/./pattern.png');}
.demo-area {
    padding: 0px 0;
}

/*========== #2.2 Page filter ==========*/

.demo-filter {
    margin: 50px 0;
    list-style: none;
}

.demo-filter li {
    display: inline-block;
    margin: 8px 8px;
}

.demo-filter li a {
    font-size: 14px;
    padding: 10px 20px;
    text-decoration: none;
    text-transform: uppercase;
    color: #4e4e4c;
    font-weight: 600;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    border: 1px solid transparent
}

.demo-filter li a:hover {
    color: #4e4e4c;
    border: 1px solid #4e4e4c;
}

.demo-filter li.active a {
    padding: 10px 20px;
    color: #fff;
    background: #4e4e4c;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s
}

/*========== #2.3 Page grid ==============*/
.demo-image img{
    margin-bottom: 20px;
    -webkit-box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.1);
}
.demo-grid .demo-item {
    float: left;
    padding: 10px;
    text-align: center;
    margin-bottom: 0px;
}
.demo-item h4 {
	margin-top: 20px;
	font-weight: 700;
}

.demo-grid .demo-item a:focus {
    outline: none;
}

.main-demo-content {
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    background-color: #fff;
    position: relative;
    overflow: hidden;
    padding: 30px;
    margin: 0 40px;
    bottom: 120px;
    border: 1px solid #f0f8ff;
    text-align: left;
    -webkit-box-shadow: 0 8px 7px -2px #eff0f0;
    box-shadow: 0 8px 7px -2px #eff0f0;
}
.demo-grid .demo-image {
    max-height: 300px;
    overflow: hidden;
}

.portfolio-text {
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(78, 78, 76, 0.05);
    height: 100%;
    width: 100%;
    text-align: center;
    padding-top: 44%;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s
}

.demo-image:hover .portfolio-text {
    background-color: rgba(78, 78, 76, 0.62);
}

.portfolio-text h5 {
    color: #fff;
    margin: 0;
    font-size: 25px;
    margin-left: -1200px;
    -webkit-transition: .7s;
    -o-transition: .7s;
    transition: .7s;
    text-transform: capitalize;
    font-weight: 700
}

.portfolio-text a {
    background-color: #fff;
    text-decoration: none;
    color: #4e4e4c;
    text-transform: capitalize;
    display: inline-block;
    padding: 10px 30px;
    -webkit-transition: .7s;
    -o-transition: .7s;
    transition: .7s;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    margin-top: 20px;
    margin-left: -700px
}

.portfolio-text a:hover {
    background-color: #4e4e4c;
    color: #fff;
}

.demo-image:hover .portfolio-text a {
    margin-left: 0
}

.demo-image:hover .portfolio-text h5 {
    margin-left: 0
}

.demo-image h4 {
    font-size: 16px;
    color: #1d1d1d;
    margin-bottom: 0px;
}

/* #2.4 Our Feature */


.page-section-ptb {
    padding: 0px 0;
}
.section-title {
    margin-bottom: 30px;
}
.text-center {
    text-align: center!important;
}
.section-title h2 {
    font-weight: 600;
}

h2.title-line {
    font-weight: 700;
font-size: 28px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #686ab3;
}
.section-title p {
    font-size: 14px;
}
.main-feature {
    background: #ffffff;
    box-shadow: 0 0px 60px 0 rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    width: 100%;
    height: 100%;
}
.main-feature span {
    margin-top: 20px;
    display: block;
    text-transform: capitalize;
}
.mb-30 {
    margin-bottom: 30px !important;
}

.demo-image-0{
    height: 300px;
    background: url("../../../images/demo/images/home.jpg");
    background-size: cover;
    background-position: top;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.2);
    transition: 5s;

}
.demo-image-0:hover{
    background-position: bottom;
}
.demo-image-01{
    height: 300px;
    background: url("../../../images/demo/images/home2.png");
    background-size: cover;
    background-position: top;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.2);
    transition: 5s;

}
.demo-image-01:hover{
    background-position: bottom;
}
.demo-image-1{
    height: 300px;
    background: url("../../../images/demo/images/about.png");
    background-size: cover;
    background-position: top;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.2);
    transition: 5s;

}
.demo-image-1:hover{
    background-position: bottom;
}
.demo-image-2{
    height: 300px;
    background: url("../../../images/demo/images/blog.png");
    background-size: cover;
    background-position: top;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.2);
    transition: 5s;

}
.demo-image-2:hover{
    background-position: bottom;
}
.demo-image-3{
    height: 300px;
    background: url("../../../images/demo/images/blog-single.png");
    background-size: cover;
    background-position: top;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.2);
    transition: 5s;

}
.demo-image-3:hover{
    background-position: bottom;
}
.demo-image-4{
    height: 300px;
    background: url("../../../images/demo/images/pro-single.png");
    background-size: cover;
    background-position: top;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.2);
    transition: 5s;

}
.demo-image-4:hover{
    background-position: bottom;
}
.demo-image-5{
    height: 300px;
    background: url("../../../images/demo/images/contact-us.png");
    background-size: cover;
    background-position: top;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.2);
    transition: 5s;

}
.demo-image-5:hover{
    background-position: bottom;
}
.demo-image-6{
    height: 300px;
    background: url("../../../images/demo/images/404.png");
    background-size: cover;
    background-position: top;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.2);
    transition: 5s;

}
.demo-image-6:hover{
    background-position: bottom;
}
.demo-image-7{
    height: 300px;
    background: url("../../../images/demo/images/comming-soon.png");
    background-size: cover;
    background-position: top;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.2);
    transition: 5s;

}
.demo-image-7:hover{
    background-position: bottom;
}
.demo-image-8{
    height: 300px;
    background: url("../../../images/demo/images/psd.png");
    background-size: cover;
    background-position: top;
   box-shadow: 0 0 35px rgba(0, 0, 0, 0.2);
    transition: 5s;

}
.demo-image-8:hover{
    background-position: bottom;
}
.demo-image-9{
    height: 300px;
    background: url("../../../images/demo/images/home.jpg");
    background-size: cover;
    background-position: top;
    box-shadow: 0 0 35px rgba(0, 0, 0, 0.2);
    transition: 5s;

}
.demo-image-9:hover{
    background-position: bottom;
}
.margin-top50{
    margin-top: 30px;
}