/*-------------------------------------------------------------------------------------
Theme Name:	Saasapp
Theme URI: 	http://pentathemes.com
Version:	1.0
Author: Pentathemes
-------------------------------------------------------------------------------------*/
/**
*****************************************
@File: Saasapp Theme Styles

* This file contains the styling for the actual theme, this
is the file you need to edit to change the look of the
theme.


    00. GENERAL
    01. BUTTON
    02. HEADER
    03. NAVIGATIONS
    04. CONTENT
    05. INNER PAGES
    06. RESPONSIVE STYLE

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


/*===================================
GENERAL
===================================*/
body{
    padding:0px; 
    margin:0px;
    font-family: 'Poppins', sans-serif;
    line-height: 30px;
    color: #999999;
    font-weight: 400;
}
/*-----------------------
elements styles
-----------------------*/
a{
    transition: all 0.3s ease;
    outline: 0;
}
a:hover, a:active, a:focus {
    transition: all 0.3s ease;
    text-decoration: none;
    outline: 0;
}
label{
    font-weight: 400;
    color: #333333;
}


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

.fix {
    overflow: hidden
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 15px;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    color: #222;
}

h3 span{
    font-weight: 300;
}
p{
    font-family: 'Poppins', sans-serif;
    line-height: 30px;
    color: #999999;
    font-weight: 400;
    font-size: 14px;
}
p.lead{
    font-weight: 600;
    color: #777777;
    font-size: 14px;
}


h1{
    font-size: 36px;
    line-height: 40px;
}
h2{
    font-size: 30px;
    line-height: 36px;
}
h3{
    font-size: 24px;
    line-height: 30px;
}
h4{
    font-size: 20px;
    line-height: 24px;
}
h5{
    font-size: 18px;
    line-height: 22px;
}
h6{
    font-size: 14px;
    line-height: 18px;
}
.white-bg{
    background: #fff !important;
}
.text-muted{
    color: #ccc !important;
}
.no-padding{
    padding: 0px !important;
    transition : all 0.3s ease-out;
}
.hide{
    display:none;
}
.fullhw{
width:100%;
height:100%;
}

.default-bg{
    background: #fff;
}
.heading-alt,.para-alt{
    color: #fff;
}

.p-10{
    padding: 10px;
}
.p-20{
    padding: 20px;
}
.p-30{
    padding: 30px;
}
.p-30{
    padding: 40px;
}
.pt-10{
    padding-top: 10px;
}
.pt-20{
    padding-top: 20px;
}
.pt-30{
    padding-top: 30px;
}
.pt-40{
    padding-top: 40px;
}
.pt-50{
    padding-top: 50px;
}
.pt-60{
    padding-top: 60px;
}
.pt-70{
    padding-top: 70px;
}
.pt-80{
    padding-top: 80px;
}
.pt-90{
    padding-top: 90px;
}
.pb-10{
    padding-bottom: 10px;
}
.pb-20{
    padding-bottom: 20px;
}
.pb-30{
    padding-bottom: 30px;
}
.pb-40{
    padding-bottom: 40px;
}
.pb-50{
    padding-bottom: 50px;
}
.pb-60{
    padding-bottom: 60px;
}
.pb-70{
    padding-bottom: 70px;
}
.pb-80{
    padding-bottom: 80px;
}
.pb-90{
    padding-bottom: 90px;
}
.ptb-10{
    padding: 10px 0px
}
.ptb-20{
    padding: 20px 0px
}
.ptb-30{
    padding: 30px 0px
}
.ptb-40{
    padding: 40px 0px
}
.ptb-50{
    padding: 50px 0px
}
.ptb-60{
    padding: 50px 0px
}
.ptb-70{
    padding: 70px 0px
}
.ptb-80{
    padding: 80px 0px
}
.ptb-90{
    padding: 80px 0px
}
.mt-10{
    margin-top: 10px;
}
.mt-20{
    margin-top: 20px;
}
.mt-30{
    margin-top: 30px;
}
.mt-40{
    margin-top: 40px;
}
.mb-10{
    margin-bottom: 10px;
}
.mb-20{
    margin-bottom: 20px;
}
.mb-30{
    margin-bottom: 30px;
}
.mb-40{
    margin-bottom: 40px;
}
.br-1{
    border-right: 1px solid #ccc;
}
.bb-1{
    border-bottom: 1px solid #ccc;
}
.bl-1{
    border-left: 1px solid #ccc;
}
.bt-1{
    border-top: 1px solid #ccc;
}
.b-1{
    border: 1px solid #ccc;
}
.modal-content {
    border-radius: 0px !important;
}
.modal-header .modal-title{
    color: #fff !important;
}
.animate {
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
@font-face {
    font-family: "Flaticon";
    src: url("font/Flaticon.eot");
    src: url("font/Flaticon.eot?#iefix") format("embedded-opentype"),
        url("font/Flaticon.woff") format("woff"),
        url("font/Flaticon.ttf") format("truetype"),
        url("font/Flaticon.svg#Flaticon") format("svg");
    font-weight: normal;
    font-style: normal;
}
.seperator{
    font-size: 25px;
    font-family: "Flaticon";
    margin-bottom: 10px;
}
.seperator:before{
    content: "\f100";

}
.mejs-offscreen{
    display: none !important;
}
.error{
    color: #c4020b;
    font-size: 10px;
}
.clear-fix{
    clear: both;
}
.float_left {
    float: left;
}
.float_right {
    float: right;
}
/*-----------------------
cards styles
-----------------------*/
.card-1 {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card-1:hover {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card-2 {
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.card-3 {
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.card-4 {
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card-5 {
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

/*-----------------------
box styles
-----------------------*/
.box-style-1.right .icon-container {
    float: right;
}

.box-style-1 .icon-container,
.box-style-2 .icon-container{
    border: 1px solid transparent;
    height: 50px;
    text-align: center;
    transition: all 0.2s ease-in-out 0s;
    width: 50px;
    border-radius: 50%;
    color: #fff;
}
.box-style-2 .icon-container{
    display: block;
    margin: 0 auto; 
}
.box-style-1 .icon-container{
    float: left;
}
.box-style-1 .image-container {
    float: left;
    height: 80px;
    transition: all 0.2s ease-in-out 0s;
    width: 80px;

}

.box-style-1 i,
.box-style-2 i{
    font-size: 22px;
    line-height: 45px;
}
.box-style-1.right .body {
    margin-left: 0;
    margin-right: 70px;
    text-align: right;
}
.box-style-1 .body {
    margin-left: 70px;
}
.box-style-1 .body h4 a,.box-style-2 .body h4 a{
    color: #333333;
}
.size-30{
    font-size: 40px !important;
}

/*-----------------------
list styles
-----------------------*/
ul{
    list-style: square;
}
ul.list{
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
ul.list li {
    line-height: 30px;
    overflow: hidden;
}
ul.list li i{
    font-size: 15px;
    height: 22px;
    line-height: 21px;
    margin-right: 8px;
    text-align: center;
    width: 22px;
    display: inline-block;
}
/*-----------------------
accordion style
-----------------------*/

.panel-group .panel {
    border-radius: 0;
    box-shadow: none;
    border-color: #eee;
}

.panel-default > .panel-heading {
    padding: 0;
    border-radius: 0;
    color: #fff;
    border-color: #eee;
}

.panel-title {
    font-size: 14px;
}

.panel-title > a {
    display: block;
    padding: 15px;
    text-decoration: none;
}
.panel-title > a:hover{
    color: #fff;
}

.more-less {
    float: right;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #eee;
}

.pagination li a{
    border-radius: 0px !important;

}
/*-----------------------
form styles
-----------------------*/
.form-control{
    border: 1px solid #ccc !important;
    border-radius: 0px;
    height: 40px;
    box-shadow: none !important;
}
.form-control:focus{
    border: 1px solid #777 !important;
}
.form-control::-webkit-input-placeholder {
    color:    #ccc;
}
.form-control:-moz-placeholder {
    color:    #ccc;
}
.form-control::-moz-placeholder {
    color:    #ccc;
}
.form-control:-ms-input-placeholder {
    color:    #ccc;
}
/*-----------------------
pageloader styles
-----------------------*/
#page-loader {
    position : fixed;
    top : 0;
    left : 0;
    bottom : 0;
    right : 0;
    z-index : 99999;
}
#page-loader .loader {
    display: inline-block;
    width: 30px;
    height: 30px;
    position: absolute;
    border: 4px solid #Fff;
    top: 50%;
    left : 50%;
    animation: loader 2s infinite ease;
    -webkit-animation: loader 2s infinite ease;
}

#page-loader .loader-inner {
    vertical-align: top;
    display: inline-block;
    width: 100%;
    background-color: #fff;
    animation: loader-inner 2s infinite ease-in;
    -webkit-animation: loader-inner 2s infinite ease-in;

}

@keyframes loader {
    0% {
        transform: rotate(0deg);
        -webkit-transform:: rotate(0deg);
    }

    25% {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }

    50% {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }

    75% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }

    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}

@keyframes loader-inner {
    0% {
        height: 0%;
    }

    25% {
        height: 0%;
    }

    50% {
        height: 100%;
    }

    75% {
        height: 100%;
    }

    100% {
        height: 0%;
    }
}
@-webkit-keyframes loader{
    0% {
        transform: rotate(0deg);
        -webkit-transform:: rotate(0deg);
    }

    25% {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }

    50% {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }

    75% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }

    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes loader-inner {
    0% {
        height: 0%;
    }

    25% {
        height: 0%;
    }

    50% {
        height: 100%;
    }

    75% {
        height: 100%;
    }

    100% {
        height: 0%;
    }
}
@-moz-keyframes loader{
    0% {
        transform: rotate(0deg);
        -webkit-transform:: rotate(0deg);
    }

    25% {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }

    50% {
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
    }

    75% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }

    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes loader-inner {
    0% {
        height: 0%;
    }

    25% {
        height: 0%;
    }

    50% {
        height: 100%;
    }

    75% {
        height: 100%;
    }

    100% {
        height: 0%;
    }
}
.hash{
    background-color: #eef1f4;
}
/*FULL WIDTH TABS*/
.full-width-tabs > ul.nav.nav-tabs {
    position: relative;
    border: none !important;

}
.full-width-tabs > ul.nav.nav-tabs > li {
    width: 25%;
}
.full-width-tabs > ul.nav.nav-tabs > li.active > a:before {
    position: absolute;
    top: -12px;
    left: 47%;
    display: inline-block;
    border-right: 12px solid transparent;
    border-left: 12px solid transparent;
    border-bottom-color: transparent;
    content: '';
}

.full-width-tabs > ul.nav.nav-tabs > li.active > a:after {
    position: absolute;
    top: -11px;
    left: 47%;
    display: inline-block;
    border-right: 11px solid transparent;
    border-left: 11px solid transparent;
    content: '';
}
.full-width-tabs > ul.nav.nav-tabs > li > a {
    border: none !important;
    border-color: transparent;
    border-radius: 0px;
    color: #fff;
    padding-top: 20px;
    margin-right: 0px;
}

.full-width-tabs > ul.nav.nav-tabs > li > a > i{
    border: 2px solid #fff;
    display: block;
    height: 50px;
    text-align: center;
    transition: all 0.2s ease-in-out 0s;
    width: 50px;
    border-radius: 50%;
    color: #fff;
    font-size: 30px;
    line-height: 50px;
    float: left;
    font-style: normal;
    font-weight: 300;
}
.full-width-tabs > ul.nav.nav-tabs > li > a > h5{
    margin-left: 70px;
}
.full-width-tabs > ul.nav.nav-tabs > li > a > h5 >span{
    font-weight: 300;
}
.full-width-tabs > .nav-tabs > li.active > a,
.full-width-tabs > .nav-tabs > li.active > a:hover,
.full-width-tabs > .nav-tabs > li.active > a:focus{
    border: none !important;
    border-color: transparent;
    border-radius: 0px;

}
.full-width-tabs > .tab-content{
    overflow: hidden;
    transition: all 0.2s ease-in-out 0s;
}

.full-width-tabs > .tab-content .main-content h3 span{
    font-weight: 300;
}
/*===================================
BUTTONS
===================================*/
.btn{

    border-radius: 0px;
    padding: 10px 25px;
    font-weight: 500;
    text-transform: uppercase;
}
.btn-small{

    border-radius: 0px;
    padding: 7px 15px;
    font-weight: 500;
    text-transform: uppercase;
}
.btn-ghost-default{
    border: 2px solid #fff !important;
    color: #fff;
}
.btn-ghost-default:hover,
.btn-ghost-default:active,
.btn-ghost-default:focus{
    color: #fff;
}
.btn-ghost-black{
    border: 2px solid #777777 !important;
    color: #777777;
}
.btn-ghost-black:hover,
.btn-ghost-black:active,
.btn-ghost-black:focus{
    color: #777;
}

.btn-theme-default,
.btn-theme-default:hover,
.btn-theme-default:active,
.btn-theme-default:focus{
    background: #fff;
    color: #777;
    border: 2px solid #fff !important;
}
.btn-appstore,.btn-appstore:focus,.btn-appstore:active {
    background : url('../images/app-store.png') no-repeat;
    width : 131px;
    height : 41px;
}
.btn-googleplay,.btn-googleplay:focus,.btn-googleplay:active {
    background : url('../images/google-play.png') no-repeat;
    width : 131px;
    height : 41px;
}

/*===================================
NAVIGATION
===================================*/
#main-navigation.navbar-default{
    background: none;
    border: none !important;
    padding: 20px;
    transition : all 0.2s ease-in;
}
#main-navigation.scrolled {
    background : #fff !important;
    box-shadow : 0 0 3px rgba(0, 0, 0, 0.2);
    padding: 10px 20px;
    transition : all 0.2s ease-in;
}
#main-navigation .navbar-brand img{
    margin-top: -20px;
}
#main-navigation .nav,
#main-navigation .collapse,
#main-navigation .dropup,
#main-navigation .dropdown {
    position: static;
}

#main-navigation .dropdown-menu {
    left: auto;
}

#main-navigation .nav a,
#main-navigation .nav a:active, 
#main-navigation .nav a:hover {
    padding : 0 10px;
    margin-top : 12px;
    font-size : 14px;
    line-height : 28px;
    font-weight : 500;
    background : transparent;
    color : #fff;
    text-transform : uppercase;
    transition : color 0.2s ease-in;
}

#main-navigation .nav li{
    margin: 0px 10px;
}
#main-navigation .nav li.menu-alt{
    margin-top: -5px;
}

#main-navigation .nav li.menu-alt a{
    padding: 3px 15px;
    background: #fff;
    border-radius: 15px;
    transition : all 0.2s ease-in;

}
#main-navigation .navbar-right .dropdown-menu{
    right: auto !important
}

#main-navigation ul.dropdown-menu{
    text-align: center !important;
    box-shadow: none !important;
    border-radius: 0px !important;
    border: none !important;
    padding: 0px;

}
#main-navigation ul.dropdown-menu li:last-child{
    padding-bottom: 10px;
}
#main-navigation.scrolled ul.dropdown-menu li a,
#main-navigation.scrolled ul.dropdown-menu li a:hover{
    color: #fff !important;
}

#main-navigation ul.dropdown-menu:before {
    position: absolute;
    top: -7px;
    left: 9px;
    display: inline-block;
    border-right: 7px solid transparent;
    border-left: 7px solid transparent;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    content: '';
}

#main-navigation ul.dropdown-menu:after {
    position: absolute;
    top: -6px;
    left: 10px;
    display: inline-block;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ffffff;
    border-left: 6px solid transparent;
    content: '';
}

#main-navigation  .navbar-collapse,
#main-navigation  .navbar-form {
    border-color: transparent !important;
}


#main-navigation .navbar-toggle {

    background-color: transparent;
    background-image: none;
    border-radius: 0px;
    float: right;
    margin-bottom: 8px;
    margin-right: 15px;
    margin-top: 8px;
    padding: 9px 10px;
    position: relative;
}
#main-navigation .navbar-toggle .icon-bar {
    border-radius: 1px;
    display: block;
    height: 2px;
    width: 22px;

}

#header{

    background: #fff;
}
/*===================================
CONTENTS
===================================*/
#main-banner{
    max-width : 100% !important ;
    height:100vh;
}
#main-banner h1{
    transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -moz-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
}
#main-banner .bg-animation{
    background: url('../images/intro-bg.gif') 0 0 repeat;
    -webkit-animation: animate_background 20s linear 0s infinite;
    -moz-animation: animate_background 20s linear 0s infinite;
    -o-animation: animate_background 20s linear 0s infinite;
    animation: animate_background 20s linear 0s infinite;
    height:100vh;
}
@-webkit-keyframes animate_background { 
    from { 
        background-position: 0 0;
    } 
    to { 
        background-position: 0 -480px;
    } 
}
@-moz-keyframes animate_background { 
    from { 
        background-position: 0 0;
    } 
    to { 
        background-position: 0 -480px;
    } 
}
@-o-keyframes animate_background { 
    from { 
        background-position: 0 0;
    } 
    to { 
        background-position: 0 -480px;
    } 
}
@keyframes animate_background { 
    from { 
        background-position: 0 0;
    } 
    to { 
        background-position: 0 -480px;
    } 
}
#main-banner .video-overlay,
#main-banner .banner-content{

    height:100vh;
    position: relative;


}
#main-banner .banner-info{
    padding: 20% 0;
}

#main-banner .banner-content img{
    display: block;
    max-width: 100%;
    position: absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);

}
/*-----------------------
slider styles
-----------------------*/
#slider{
    background: #fff;
}
#slider .flexslider {
    width: 100%;
    margin: 0 auto;
    box-shadow: none;
    border: none !important;
}
#slider .flexslider li {
    position: relative;
}

#slider .flexslider li .meta {
    position: absolute;
    bottom: 150px !important;
    left: 20px;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
#slider .flexslider li h1,
#slider .flexslider li span,
#slider .flexslider li p,
#slider .flexslider li a{
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}

#slider .flexslider li.flex-active-slide .meta h1,
#slider .flexslider li.flex-active-slide .meta span,
#slider .flexslider li.flex-active-slide .meta p,
#slider .flexslider li.flex-active-slide .meta a {
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
    -webkit-animation-duration: .6s;
    animation-duration: .6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

#slider .flexslider li.flex-active-slide .meta h2 {
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
}

#slider .flexslider li.flex-active-slide .meta p {
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}

#slider .flexslider li.flex-active-slide .meta a {
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
}

#slider .flex-direction-nav {
    position: absolute;
    bottom: 0;
    right: 0px;

}

#slider .flex-direction-nav a {
    animation: none !important;
    text-decoration: none;
    display: block;
    width: 30px;
    height: 30px;
    margin-left: -60px;
    margin-top: -32px;
    position: absolute;
    top: 0.5px;
    z-index: 10;
    overflow: hidden;
    opacity: 1;
    cursor: pointer;
    color: #fff;

}

#slider .flex-direction-nav .flex-prev {
    text-align: left;
    left: -10px;
}

#slider .flex-direction-nav .flex-next {
    text-align: right;
    left: 30px;
}

#slider .flexslider:hover .flex-prev {
    left: -10px;
}

#slider .flexslider:hover .flex-next {
    left: 30px;
}

#slider .flexslider:hover .flex-next:hover,
#slider .flexslider:hover .flex-prev:hover {
    opacity: 1;
}

#slider .flex-direction-nav a:before {
    font-family: FontAwesome;
    content: '\f104';
    font-size: 18px;
    display: flex;
    color: #fff;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 1px;
    padding: 2px;
}

#slider .flex-direction-nav a.flex-next:before {
    content: '\f105';
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

@-webkit-keyframes fadeOutLeft {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
    }
}
.feature {
    overflow: hidden;
}
.feature .feature-desc .feature-info {
    position: absolute;
}
.feature .feature-desc .row {
    position: relative;
}
.feature .feature-desc article{
    padding: 60px 0px;
}
.browser {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #d5dadf;
    border-radius: 3px;
    box-shadow: 0 13px 35px rgba(98, 100, 112, 0.25);
    display: inline-block;
    margin: auto;
    min-height: 200px;
    overflow: hidden;
    position: relative;
}

.browser .top-bar {
    background: #fff none repeat scroll 0 0;
    border-bottom: 1px solid #d5dadf;
    border-radius: 4px 4px 0 0;
    height: 43px;
}
.browser .top-bar .lights {
    left: 18px;
    top: 9px;
}
.browser .top-bar .lights {
    left: 12px;
    list-style: outside none none;
    padding: 0;
    position: absolute;
    top: 5px;
}

.browser .top-bar .lights li {
    margin-right: 8px;
    width: 10px;
    border: 1px solid #da4b47;
    border-radius: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12) inset;
    display: inline-block;
    height: 10px;
    margin-right: 6px;
    width: 10px;
}
.browser .top-bar .lights li:nth-child(1) {
    background: #f66560 none repeat scroll 0 0;
}
.browser .top-bar .lights li:nth-child(2) {
    background: #f9c964 none repeat scroll 0 0;
    border-color: #dcac47;
}
.browser .top-bar .lights li:nth-child(3) {
    background: #30c75d none repeat scroll 0 0;
    border-color: #1fa748;
}
.browser .frame img{
    width: 100% !important;
}

#mobile-app .mobile-app-image img{
    position: absolute;
    bottom: 0px;
    margin-bottom: -445px;
}   

#testimonials figure.testimonial-card {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 10px 1%;
    min-width: 220px;
    width: 100%;
    text-align: left;
    box-shadow: none !important;
}

#testimonials figure.testimonial-card * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#testimonials figure.testimonial-card img {
    max-width: 100%;
    height: 80px;
    width: 80px;
    border-radius: 50%;
    margin-right: 5px;
    display: block;
    z-index: 1;
    position: absolute;
    right: 50%;
}

#testimonials figure.testimonial-card blockquote {
    margin: 0;
    display: block;
    border-radius: 8px;
    position: relative;
    background-color: #fff;
    padding: 65px 50px 35px 50px;
    font-size: 14px;
    margin: -40px 0 0;
    box-shadow: none;

}

#testimonials figure.testimonial-card blockquote:before,
#testimonials figure.testimonial-card blockquote:after {
    font-family: 'FontAwesome';
    content: "\201C";
    position: absolute;
    font-size: 60px;
    opacity: 0.3;
    font-style: normal;
}

#testimonials figure.testimonial-card blockquote:before {
    top: 55px;
    left: 20px;
}

#testimonials figure.testimonial-card blockquote:after {
    content: "\201D";
    right: 20px;
    bottom: 5px;
}

#testimonials figure.testimonial-card .author {
    margin: 0;
    height: 80px;
    display: block;
    text-align: left;
    padding: 0 35px;
    position: relative;
    z-index: 1;
}

#testimonials figure.testimonial-card .author h5,
#testimonials figure.testimonial-card .author span {
    left: 50%;
    position: absolute;
    opacity: 0.8;
    padding: 3px 5px;
}

#testimonials figure.testimonial-card .author h5 {
    text-transform: uppercase;
    bottom: 50%;
    margin: 0;
    font-weight: 600;
}

#testimonials figure.testimonial-card .author span {
    font-size: 14px;
    color: #000000;
    top: 50%;
    font-weight: 400;
}
#testimonials-carousel .item{
    margin: 0px 5px !important;
}
#footer .footer-menu{
    margin: 0px;
    padding: 0px;  
}
#footer .footer-menu li{
    list-style: none;

}
#footer p.policy{
    font-size: 12px;
    line-height: 20px;
}
#footer .footer-level-2 .min-height{
    min-height: 200px;
}
#footer .social-links{
    margin: 0px;
    padding: 0px;
    list-style: none;

}
#footer .social-links li{
    float: left;
    padding-right: 10px;
}
#footer .social-links li a{
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    line-height: 50px;
    text-align: center;
    font-size: 25px;
}
#footer .form-group{
    padding-right: 15px;
}
#footer .footer-contact i{
    font-size: 25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    margin: 10px 10px 10px 0px;
    vertical-align: middle;
}
#footer .footer-contact .contact-item{
    padding-bottom: 10px; 
}
#footer .footer-contact i.fa-envelope{
    font-size: 17px;
    line-height: 38px;
}

#footer .footer-contact p{
    display: inline-block;
    vertical-align: middle;
    margin:0;
}

#footer .footer-contact p span{
    display:block;
    font-weight: normal;
    font-size:14px;
    line-height:2;
}

#footer .footer-contact p a{
    text-decoration: none;;
}

/*DARK FOOTER*/

#footer.dark-footer p{
    color: #83929f;
}

#footer.dark-footer .footer-level-1,
#footer.dark-footer .footer-level-2{
    border-bottom: 1px solid #31495f;
}
#footer.dark-footer .fbl-1{
    border-left: 1px solid #31495f;
    padding-left: 15px;
}
#footer.dark-footer .footer-menu li a{
    color: #83929f;
}


#footer.dark-footer .social-links li a{

    background: #152331;
    color: #83929f;
}

#footer.dark-footer .form-control{
    background: #83929f;
    color: #fff;
    border: 1px solid #83929f !important;

}

#footer.dark-footer .footer-contact i{
    background-color:  #152331;
    color: #83929f;
}

/*LIGHT FOOTER*/

#footer.light-footer p{
    color: #7f8c8d;
}

#footer.light-footer .footer-level-1,
#footer.light-footer .footer-level-2{
    border-bottom: 1px solid #efefef;
}
#footer.light-footer .fbl-1{
    border-left: 1px solid #efefef;
    padding-left: 15px;
}
#footer.light-footer .footer-menu li a{
    color: #7f8c8d;
}


#footer.light-footer .social-links li a{

    background: #efefef;
    color: #83929f;
}

#footer.light-footer .form-control{
    background: #efefef;
    color: #858585;
    border: 1px solid #efefef !important;

}

#footer.light-footer .footer-contact i{
    background-color:  #efefef;
    color: #83929f;
}

/*===================================
INNER PAGES
===================================*/

#inner-banner{
    min-height: 400px;
    background: url('../images/inner-banner3.jpg') no-repeat;
    background-size: cover;

}
#inner-banner .banner-heading{
    padding: 150px 0px;
}
#inner-banner .breadcrumbs{
    width: 100%;
    list-style: none;
    margin: 0px;
    padding: 0px;
}
#inner-banner .breadcrumbs li{
    float: left;
    padding: 0px;
    color: #fff;
}
#inner-banner .breadcrumbs li:after{
    content: "\f105"; 
    font-family: FontAwesome;
    padding: 10px;
}
#inner-banner .breadcrumbs li:last-child:after{
    content: "";
    padding: 0px;
}
/*TEAM SECTION*/



#team-section {
    text-align: center;
    padding: 70px 0 80px;
    background: #f0f5f6;
}

#team-section h2 {
    font-weight: normal;
}

#team-section .member {
    background-color: #fff;
}
#team-section .member figure {
    overflow: hidden;
    width: 100%;
    height: 196px;
}

#team-section img {
    width: 100%;
    height: auto;
    margin-top: 0px;
}

#team-section .member .text-content {
    padding: 19px 14px 13px;
}

.member-img{
    /* Webkit for Chrome and Safari */
    -webkit-transform: scale(1, 1); // This is the scale for the normal size of the image.
    -webkit-transition-duration: 500ms;
    -webkit-transition-timing-function: ease-out;

    /* Webkit for Mozila Firefox */
    -moz-transform: scale(1, 1);
    -moz-transition-duration: 500ms;
    -moz-transition-timing-function: ease-out;

    /* Webkit for IE( Version: 11, 10 ) */
    -ms-transform: scale(1, 1);
    -ms-transition-duration: 500ms;
    -ms-transition-timing-function: ease-out;
}

.team-member:hover .member-img{
    /* Webkit for Chrome and Safari */
    -webkit-transform: scale(1.2, 1.2); // This is the enlarged size scale of the image.
    -webkit-transition-duration: 500ms;
    -webkit-transition-timing-function: ease-out;

    /* Webkit for Mozila Firefox */
    -moz-transform: scale(1.2, 1.2);
    -moz-transition-duration: 500ms;
    -moz-transition-timing-function: ease-out;

    /* Webkit for IE( Version: 11, 10 ) */
    -ms-transform: scale(1.20, 1.20);
    -ms-transition-duration: 500ms;
    -ms-transition-timing-function: ease-out;

    opacity: 0.7;
}
#faq-categories .nav-pills{
    border: 1px solid #eee;
}
#faq-categories .nav-pills li{
    border-bottom: 1px solid #eee;

}
#faq-categories .nav-pills li a{
    border-left: 3px solid #fff; 
    border-radius: 0px;
    color: #777777;
    font-size: 14px;
    font-weight: 600;
}
#faq-categories .nav-pills li a:hover,
#faq-categories .nav-pills li a:focus{
    background: none !important;
    border-left: 3px solid #ccc;
}
#faq-categories .nav-pills li:last-child{
    border-bottom: 0px;
}
#faq-categories .nav li.active{
    background: #fff !important;
}
#faq-categories .nav-pills > li.active > a, 
#faq-categories .nav-pills > li.active > a:hover, 
#faq-categories .nav-pills > li.active > a:focus {
    background: #fff !important;
    color: #777777;
    font-size: 14px;
    font-weight: 600;
}
#terms ol{
    margin: 0px;
    padding: 0px;
    margin-left: 10px;
}
#terms ol li{
    margin-bottom: 20px;
}
#terms ol li strong{

    color: #777777;
}

/*BLOGS*/

.blog-card {
    transition: height 0.3s ease;
    -webkit-transition: height 0.3s ease;
    background: #fff;
    border-radius: 0px;
    border: 1px solid #eee;
    overflow: hidden;
    position: relative;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.blog-card:hover .details {
    left: 0;
}


.blog-card .photo {
    height: 300px;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
}
.blog-card .details {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
    color: #fff;
    list-style: none;
    margin: 0;
    padding: 10px 15px;
    height: 300px;
    /*POSITION*/
    position: absolute;
    top: 0;
    left: -100%;
}
.blog-card .details > li {
    padding: 3px 0;
}
.blog-card .details li:before, .blog-card .details .tags ul:before {
    font-family: FontAwesome;
    margin-right: 10px;
    vertical-align: middle;
}
.blog-card .details .author:before {
    content: "\f007";
}
.blog-card .details .date:before {
    content: "\f133";
}
.blog-card .details .tags ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.blog-card .details .tags ul:before {
    content: "\f02b";
}
.blog-card .details .tags li {
    display: inline-block;
    margin-right: 3px;
}
.blog-card .details a {
    color: inherit;
    border-bottom: 1px dotted;
}

.blog-card .description {
    padding: 10px;
    box-sizing: border-box;
    position: relative;
}
.blog-card .description h1 {
    font-size: 26px;
    line-height: 1em;
    margin: 0 0 10px 0;
}
.blog-card .description h2 {
    color: #9b9b9b;
    line-height: 1.2em;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: 400;
    margin: 1.2% 0;
}
.blog-card .description p {
    position: relative;
    margin: 0;
    padding-top: 20px;
}
.blog-card .description p:after {
    content: "";
    height: 6px;
    width: 40px;
    /*POSITION*/
    position: absolute;
    top: 6px;
    left: 0;
}
.blog-card .description a {
    color: #75D13B;
    margin-bottom: 10px;
    float: right;
}
.blog-card .description a:after {
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    content: "\f061";
    font-family: FontAwesome;
    margin-left: -10px;
    opacity: 0;
    vertical-align: middle;
}
.blog-card .description a:hover:after {
    margin-left: 5px;
    opacity: 1;
}

@media screen and (min-width: 600px) {
    .blog-card {
        height: 300px;
        max-width: 100%;
    }
    .blog-card:hover .photo {
        -webkit-transform: rotate(5deg) scale(1.3);
        transform: rotate(5deg) scale(1.3);
    }

    .blog-card .photo {
        transition: all 0.5s ease;
        -webkit-transition: all 0.5s ease;
        float: left;
        height: 100%;
        width: 40%;
    }
    .blog-card .details {
        width: 40%;
    }
    .blog-card .description {
        float: left;
        width: 60%;
        z-index: 0;
        height: 300px;
    }
    .blog-card .description:before {

        content: "";
        background: #fff;
        width: 100%;
        z-index: -1;
        /*POSITION*/
        position: absolute;
        left: -15px;
        top: 0;
        bottom: 0;
    }
}
.blog-meta{
    padding: 20px 0px;
}
.blog-meta span{
    margin-left: 10px;
}
.share-social .share-icon{
    width: 40px;
    height: 40px;
    text-align: center;
    font-size: 18px;
    line-height: 42px;
    margin-right: 10px;
    color: #fff;
    display: block;
    float: left;
}
.share-social .facebook{
    background: #3b5998;
}
.share-social .twitter{
    background: #00aced;
}
.share-social .googleplus{
    background: #dd4b39;
}
.share-social .linkedin{
    background: #007bb6;
}
.blog-action {
    overflow: hidden;
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 15px;
}

.blog-author img,
.blog-author-content {
    display: inline-block;
    vertical-align: middle;

}
.blog-author-bio{
    padding-left: 70px;
}
.blog-author img {
    border-radius: 50%;
    margin-right: 0.6em;
}
.comment-list{
    padding: 15px;
}
.comment-list .row {
    margin-bottom: 0px;
}
.comment-list figure.thumbnail{
    border: none !important;
}
.comment-list .panel{
    border-radius: 0px !important;
}
.comment-list .panel .panel-heading .panel-body {
    padding-top: 6px;
}
.comment-list figcaption {
    /*For wrapping text in thumbnail*/
    word-wrap: break-word;
}
/* Portrait tablets and medium desktops */
@media (min-width: 768px) {
    .comment-list .arrow:after, .comment-list .arrow:before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-color: transparent;
    }
    .comment-list .panel.arrow.left:after, .comment-list .panel.arrow.left:before {
        border-left: 0;
    }
    /*****Left Arrow*****/
    /*Outline effect style*/
    .comment-list .panel.arrow.left:before {
        left: 0px;
        top: 30px;
        /*Use boarder color of panel*/
        border-right-color: inherit;
        border-width: 16px;
    }
    /*Background color effect*/
    .comment-list .panel.arrow.left:after {
        left: 1px;
        top: 31px;
        /*Change for different outline color*/
        border-right-color: #FFFFFF;
        border-width: 15px;
    }
    /*****Right Arrow*****/
    /*Outline effect style*/
    .comment-list .panel.arrow.right:before {
        right: -16px;
        top: 30px;
        /*Use boarder color of panel*/
        border-left-color: inherit;
        border-width: 16px;
    }
    /*Background color effect*/
    .comment-list .panel.arrow.right:after {
        right: -14px;
        top: 31px;
        /*Change for different outline color*/
        border-left-color: #FFFFFF;
        border-width: 15px;
    }
}
.comment-list .comment-post {
    margin-top: 6px;
}
.comment-form{
    padding: 15px;
}
#sidebar .categories a,
#sidebar .archives a{
    font-weight: 500;
    font-size: 15px;
    color: #777;
}
#sidebar .tags p{
    line-height: 40px;   
}
#sidebar .tags a{
    border: 1px solid #333333;
    padding: 5px;
    margin-right: 10px;
    color: #777;

}
#sidebar .box-style-1 .body {
    margin-left: 90px;
}
#custom-search-input {
    margin:0;
    margin-bottom: 20px;
    padding: 0;
}

#custom-search-input .search-query {
    padding-right: 3px;
    padding-right: 4px \9;
    padding-left: 3px;
    padding-left: 4px \9;
    /* IE7-8 doesn't have border-radius, so don't indent the padding */

    margin-bottom: 0;

}

#custom-search-input button {
    border: 0;
    background: none;
    /** belows styles are working good */
    padding: 2px 5px;
    margin-top: 2px;
    position: relative;
    left: -28px;
    /* IE7-8 doesn't have border-radius, so don't indent the padding */
    margin-bottom: 0;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.search-query:focus + button {
    z-index: 3;   
}

/*PRICING*/



.db-button-color-square {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.50);
    border: none;
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
}

.db-button-color-square:hover {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.50);
    border: none;
}


.pricing-content {
    margin-bottom: 30px;
    margin-top: 50px;
    text-align: center;
    color: #777777;
    border: 1px solid #eee;
    line-height: 30px;
}

.pricing-content ul {
    list-style: none;
    margin: 0;
    text-align: center;
    padding-left: 0px;
}

.pricing-content ul li {
    padding-top: 20px;
    padding-bottom: 20px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.pricing-content ul li i {
    margin-right: 5px;
}


.pricing-content .price {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 40px 20px 20px 20px;
    font-size: 60px;
    font-weight: 900;
    color: #FFFFFF;
}

.pricing-content .price small {
    color: #4d7192;
    display: block;
    font-size: 12px;
    margin-top: 22px;
}

.pricing-content .type {
    padding: 50px 20px;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 24px;
    color: #fff;
}

.pricing-content .pricing-footer {
    padding: 20px;
}

.pricing-container > .col-lg-4,
.pricing-container > .col-lg-3,
.pricing-container > .col-md-4,
.pricing-container > .col-md-3,
.pricing-container > .col-sm-4,
.pricing-container > .col-sm-3 {
    padding-left: 0;
    padding-right: 0;
}

.pricing-content.popular {
    margin-top: 10px;
}

.pricing-content.popular .price {
    padding-top: 80px;
}
/*-----------------------
MAP
-----------------------*/
#google-container {
    position: relative;
    width: 100%;
    min-height: 400px;
    background-color: #ccc;
}


#cd-google-map {
    position: relative;
}


#cd-zoom-in, #cd-zoom-out {
    height: 32px;
    width: 32px;
    cursor: pointer;
    margin-left: 10px;
    background-color: rgba(211, 104, 104, 0.9);
    background-repeat: no-repeat;
    background-size: 32px 64px;
    background-image: url("../images/cd-icon-controller.svg");
}
.no-touch #cd-zoom-in:hover, .no-touch #cd-zoom-out:hover {
    background-color: #d36868;
}

#cd-zoom-in {
    background-position: 50% 0;
    margin-top: 10px;
    margin-bottom: 1px;
}
#cd-zoom-out {
    background-position: 50% -32px;
}
/*===================================
RESPONSIVE STYLES
===================================*/
@media only screen and (max-width: 1199px) {
    #mobile-app .mobile-app-image img{
        margin-bottom: -475px;
    } 
    #main-navigation .nav a,
    #main-navigation .nav a:active, 
    #main-navigation .nav a:hover {
        padding : 0 5px;
    }
}
@media only screen and (max-width: 991px) {
    .feature .feature-desc .feature-info {
        position: relative;
    }
    .full-width-tabs > ul.nav.nav-tabs > li {
        width: 50%;
    }
    #footer.dark-footer .fbl-1{
        border-left: 0px;
        padding-left: 0px;
    }
    #mobile-app .mobile-app-image img{
        margin-bottom: -505px;
    } 
    #main-navigation .nav a,
    #main-navigation .nav a:active, 
    #main-navigation .nav a:hover {
        padding : 0px;
    }

}
@media only screen and (max-width: 767px) {
    #main-navigation .drop-collapsed a{
        width: 100%;
    }
    #main-navigation .navbar-nav a .caret{
        float: right !important;
    }
    #main-navigation .navbar-nav li{
        text-align: center;
        padding-bottom: 10px;
    }
    #main-navigation.scrolled .navbar-nav li a,#main-navigation.scrolled .navbar-nav li a:hover{
        color: #fff;
    }
    #main-navigation .navbar-nav li:last-child{
        border-bottom: none !important;
    }
    #main-navigation .navbar-nav .dropdown-menu{
        padding-top: 10px;
    }
    #footer .row{
        padding-left: 10px;
    }



}
@media only screen and (max-width: 570px) {
    .full-width-tabs > ul.nav.nav-tabs > li {
        width: 100%;
    }