/** TABLE OF CONTENTS **/

/**

	01. General CSS

	02. Nav-Menu

	03. Side-bar Menu

	04. Home Section

	05. Magical-Features

	06. Features-Description

	07. Key-Features

	08. Video Section

	09. Counter Section

	10. Why_US

	11. Screen-shots

	12. Testimonials

	13. Team

	14. Packages

	15. Client

	16. Ask Questions

	17. Subscribe

	18. Contact

	19. Footer

	20. Scroll-to-Top

	21. Pre-Loader

	22. Color-Picker

	23. Modal

	24. Warning

**/

/* 01. General CSS Starts*/

html{

    overflow-x:hidden;

}

body {

	font-family: 'Open Sans', sans-serif;

    position: relative;

    background: #fff;

    overflow-x: hidden;

	font-weight:400;

	font-size:14px;

	color:#293035;

}

#index-banner ,
.col-main{

    padding-top: 100px;

}

#header,

#magical_feature,

#work,

#feature-desc,

#key-feature,

.video-jarallax,

#why_us,

#screenshots,

.testimonial-jarallax,

#team,

#packages,

#tweet,

#quetions,

#subscribe,

#footer,

#some_facts{

    padding: 60px 0;

    background: #fff;

}



#key-feature,

#screenshots,

#team,

#tweet,

#subscribe,

#footer,

#some_facts,

#magical_feature {

    background: #fff;

}

.video-giaiphap{
   
    background: transparent url("../images/video-jarallax-bg.jpg") no-repeat top center;

	padding:80px 0 30px;

}
.video-giaiphap h2{
    color: #444;
    font-size: 32px;
}

.video-giaiphap h2 span,
.video-giaiphap p{
    color: #fff;
}
.video-giaiphap p{
    font-size: 16px;
}
.video-jarallax .left{

	padding:60px;

	color:#fff;

	text-transform:uppercase;

	text-align:left;

	display:table;

	table-layout:fixed;

}

.video-jarallax .left .content{

	display:table;

	vertical-align: middle;

}

.video-jarallax .left h4{

	font-size:36px;

	color:#fff;

	font-weight:400;

	line-height:1.45;

	

}

.m0 {

    margin: 0px;

}

.mt0 {

    margin-top: 0px;

}

.mt15 {

    margin-top: 15px !important;

}

.mt30 {

    margin-top: 30px;

}

.mt20 {

    margin-top: 20px;

}

.mt-10{

    margin-top: -10px;

}

.mb0 {

    margin-bottom: 0px;

}

.mb5 {

    margin-bottom: 5px;

}

.mb10 {

    margin-bottom: 10px;

}

.mb50 {

    margin-bottom: 50px;
    overflow: hidden;

}

.mb20 {
    margin-bottom: 20px;
    overflow: hidden;

}

.mb30 {

    margin-bottom: 30px;
    overflow: hidden;

}

.mb40 {

    margin-bottom: 40px;
    overflow: hidden;

}

.mr5 {

    margin-right: 5px;

}

.mr0 {

    margin-right: 0px;

}

.ml0 {

    margin-left: 0px;

}

.ml5 {

    margin-left: 5px;

}

.p0 {

    padding: 0px;

}

.pl0{

    padding-left: 0px;

}

.pt15 {

    padding-top: 15px;

}

.pt20 {

    padding-top: 20px;

}

.pt40 {

    padding-top: 40px;

}

.pl50 {

    padding-left: 50px;

}

p {

    line-height: 1.45;

    font-weight: 400;

    color: #293035;

}

h1,

h2,

h3,

h4,

h5,

h6 {

    color: #293035;

	font-family: 'Open Sans', sans-serif;

}

h2 {

    font-size: 32px;

    line-height: 1.4;

    margin-top: 0px;

    margin-bottom: 20px;

    font-weight: 600;

    letter-spacing: 2px;

	text-transform:uppercase;

}
h2 span{
    color: #96b72a;
}

h3 {

    font-size: 18px;

    line-height: 1.4;


    font-weight: 700;

    margin-bottom: 10px;

    margin-top: 0;
    color: #3f3f3f;
}

a:hover,

a:focus {

    text-decoration: none;

    color: transperant;

    outline: none;

}

.read_more_link {   

    font-style: italic;

    color: #96b72a;

}

time{

    text-transform: uppercase;

    font-weight: 500;

}

ul {

    list-style-type: none;

}

.icon-color {

    color: #96b72a;

}

.common-btn {

    background-color: #96b72a;

    border-color: #96b72a;

    border-radius: 0px;

    transition-duration: 0.5s;

    padding: 20px 30px;

    text-transform: uppercase;

	font-size:20px;

	font-weight:600;

	border-radius:3px;

	-moz-border-radius:3px;

}

.common-btn:hover {

	background-color:#000;

    transition-duration: 0.5s;

}

.op6 {

    opacity: 0.6;

}

.bolder{

	font-weight: 600;

}

/*General CSS Ends*/

/*Wave Button Css Starts*/



.colored-button {

    color: #fff !important;

    background: #96b72a !important;

}

.colored-button:hover {

    background: #fff;

    color: #96b72a;

}

/*Wave Button Css Ends*/

/* 02. Nav-Menu CSS Starts*/



nav {

    padding: 10px 0;

    transition: all 0.3s linear;

    border-radius: 0px !important;

}

.navbar-nav li a {

    color: #293035;

    font-size: 18px;

    font-weight: 400;

}

.nav>li>a:focus,

.nav>li>a:hover {

    background: transparent;

}

.active {

    border-bottom: 2px solid #fff;

    transition-duration: 0.4s;

}

.default {

    top: 0;

}

.navbar {

    position: fixed;
    background: #fff;
    padding-top: 10px;
    padding-bottom: 10px;

}
.product-details .navbar{
    box-shadow: 0 0 5px #f0f0f0;
}

nav {

    left: 0;

    top: -80px;

    right: 0;

    padding: 10px 0;

    transition: all 0.3s linear;

    height: auto;

    z-index: 99;

}

nav.top-nav-collapse {

    padding-bottom: 10px;

    padding-top: 10px;

}

.navbar-toggle span {

    background: #96b72a;

}

#work h2 {

    position: relative;

}

#work h2:after {

    content: "";

    position: absolute;

    height: 2px;

    width: 200px;

    background: #96b72a;

    left: 41%;

    bottom: -24px;

}

/*Nav-Menu CSS Ends*/

/*Cloud CSS Starts*/



#home .jarallax {

    overflow: hidden;

}

.clouds {

    position: absolute;

    z-index: -1;

    top: 0;

    left: 0;

    width: 500em;

    height: 43.75em;

    opacity: 1;

    visibility: inherit;

    background: transparent url("../images/clouds.png") repeat-x scroll 0px 100%;

    -webkit-animation: cloudLoop 60s linear infinite;

    -moz-animation: cloudLoop 60s linear infinite;

    animation: cloudLoop 60s linear infinite;

}

@-webkit-keyframes cloudLoop {

    0% {

        -webkit-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0)

    }

    100% {

        -webkit-transform: translate3d(-50%, 0, 0);

        transform: translate3d(-50%, 0, 0)

    }

}

@keyframes cloudLoop {

    0% {

        -webkit-transform: translate3d(0, 0, 0);

        transform: translate3d(0, 0, 0)

    }

    100% {

        -webkit-transform: translate3d(-50%, 0, 0);

        transform: translate3d(-50%, 0, 0)

    }

}

/*Cloud CSS Ends*/

/* 03. Side-bar Menu CSS Starts*/

.mob_connection{

	top:0 !important;

	display: none !important;

}

.mobile-sidebar {

    display: none;

}

.offcanvas-nav .nav-head,

.offcanvas-nav .nav-body {

    position: relative;

    z-index: 10;

}
.offcanvas-nav .nav-head{
    z-index: 20;
}

.sidebar {

    z-index: 1000 !important;

}

.sidebar-download-btn {

    margin: 20px 0;

}

.sidebar-head {
}

.sidebar-search {

    background: transperant;

    padding: 0 20px;

}

.sidebar-search .form-material .form-group {

    margin-top: 15px;

}

.sidebar-search .form-material .form-control {

    border-bottom: 1px solid #fff;

}

.sidebar-search .form-material label {

    color: #fff !important;

}

.sidebar-search .form-material .form-control:focus ~ .form-bar:before,

.sidebar-search .form-material .form-control:focus ~ .form-bar:after {

    background: #fff;

}

.search-icon {

    position: absolute;

    top: 1em;

    right: 0;

}

.sidebar-search .form-material .form-control:focus ~ label {

    color: #fff !important;

}

.sidebar-logo {

    display: inline;

    height: 50px;

}

.sidebar-body {

    overflow: auto;


}
.sidebar-body ul li{
    display: block;
    padding:7px 0;
    text-transform: uppercase;
}
.sidebar-body ul li a{color: #fff}

.sidebar-body-white {

    background: #fff;

}

.example-image-link > img {

    border: 1px solid #ccc;

    margin: 10px 0;

    width: 70px;

}

.sidebar-app {

    padding: 30px;

}

.sidebar-app h4 {

    color: #fff;

}

.sidebar-color1 {

    background: rgba(0, 0, 0, 0.24) none repeat scroll 0 0;

}

.sidebar-color2 {

    background: rgba(0, 0, 0, 0.42) none repeat scroll 0 0;

}

.sidebar-color3 {

    background: rgba(0, 9, 0, 0.58) none repeat scroll 0 0;

}

.sidebar-faq .sidebar-app {

    padding: 15px;

    letter-spacing: 10px;

    cursor: pointer;

}

.cd-stretchy-nav a:hover,

.cd-stretchy-nav a:focus,

.cd-stretchy-nav a:after {

    opacity: 0.8;

    color: #fff;

}

.sidebar-search .form-control {

    color: #fff;

}

.sidebar-btn {

    color: #96b72a;

    font-size: 19px;

    height: auto;

    padding: 8px 15px;

    width: auto;

    cursor: pointer;
    border:1px solid #96b72a;
    border-radius:2px;
    -moz-border-radius:2px;

}

.sidebar-close-btn {

    position: absolute;

    right: 0;

    top: 0;
    color: #fff;

}

.sidebar-icon {

    background: rgba(255, 51, 102, 0.6);

    color: #fff;

    padding: 20px;

    margin: 30px 0;

}

.sidebar-btn:hover {

    color: #000 !important;

    background: transparent !important;

}

.sidebar.right {

    top: 0;

    right: 0;

    bottom: 0;

    width: 400px;

    background: #96b72a;
    color: #fff;

}

.sidebars > .sidebar {

    position: fixed;

    text-align: left;

    z-index: 100;

    color: #fff;

}

.sidebar-link a {

    font-size: 1.1em;

    color: #fff;

    font-weight: 400;

    opacity: 0.8;

}

.sidebar-link hr {

    border: none;

    margin: 20px 0 !important;

}

.sidebars hr {

    margin: 10px 0;

}

.sidebar-social-icons li {

    padding: 0 20px !important;

}

.sidebar-social-icons li a {

    color: #fff !important;

}

.sidebar-social-icons li i {

    font-size: 2em !important;

}

.sidebar-tab {

    margin-top: -10px;

}

.sidebar-tab .active,

.sidebar-pill .active {

    border-bottom: none;

}

.nav-tabs>li.active>a,

.nav-tabs>li.active>a:focus,

.nav-tabs>li.active>a:hover {

    background: #96b72a;

    border-radius: 0px;

    color: #fff;

    border: none;

}

.nav-tabs.nav-justified > li > a {

    border-bottom: 1px solid transparent;

    border-radius: 0;

}

.sidebar-signup {

    right: 0;

    position: absolute;

    color: #fff;

    font-size: 15px;

    top: 1em;

}

.sidebar-login {

    position: absolute;

    color: #fff;

    left: 0;

    font-size: 15px;

    top: 1em;

}

.sidebar-blog {

    background: #fff none repeat scroll 0 0;

    border-bottom: 1px solid #96b72a;

    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 2px 5px 0 rgba(0, 0, 0, 0.15);

    padding: 10px 0;

    cursor: pointer;

}

.sidebar-blog .fa-reply {

    padding: 10px;

    position: absolute;

    background: #96b72a;

    right: 0;

    bottom: -10px;

}

.sidebar-blog .fa-clock-o,

.sidebar-blog span {

    font-size: 12px;

}

.cd-stretchy-nav .stretchy-nav-bg {

    /* Click on add and by this css it will be stretch */

    

    position: absolute;

    z-index: 1;

    top: 0;

    right: 0;

    width: 60px;

    height: 60px;

    border-radius: 30px;

    background: #9acd91;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);

    -webkit-transition: height 0.2s, box-shadow 0.2s;

    -moz-transition: height 0.2s, box-shadow 0.2s;

    transition: height 0.2s, box-shadow 0.2s;

}

.cd-stretchy-nav.nav-is-visible .stretchy-nav-bg {

    height: 100%;

    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);

}

.cd-nav-trigger {

    position: absolute;

    z-index: 3;

    top: 0;

    right: 0;

    height: 60px;

    width: 60px;

    border-radius: 50%;

    /* replace text with image */

    

    overflow: hidden;

    white-space: nowrap;

    color: transparent;

}

.cd-nav-trigger span,

.cd-nav-trigger span::after,

.cd-nav-trigger span::before {

    /* this is the hamburger icon */

    

    position: absolute;

    width: 16px;

    height: 2px;

    background-color: #ffffff;

}

.cd-nav-trigger span {

    /* middle line of the hamburger icon */

    

    left: 50%;

    top: 50%;

    bottom: auto;

    right: auto;

    -webkit-transform: translateX(-50%) translateY(-50%);

    -moz-transform: translateX(-50%) translateY(-50%);

    -ms-transform: translateX(-50%) translateY(-50%);

    -o-transform: translateX(-50%) translateY(-50%);

    transform: translateX(-50%) translateY(-50%);

}

.cd-nav-trigger span::after,

.cd-nav-trigger span::before {

    /* top and bottom lines of the hamburger icon */

    

    content: '';

    top: 0;

    left: 0;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

}

.cd-nav-trigger span::before {

    -webkit-transform: translateY(-6px);

    -moz-transform: translateY(-6px);

    -ms-transform: translateY(-6px);

    -o-transform: translateY(-6px);

    transform: translateY(-6px);

}

.cd-nav-trigger span::after {

    -webkit-transform: translateY(6px);

    -moz-transform: translateY(6px);

    -ms-transform: translateY(6px);

    -o-transform: translateY(6px);

    transform: translateY(6px);

}

.no-touch .cd-nav-trigger:hover ~ .stretchy-nav-bg {

    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);

}

.nav-is-visible .cd-nav-trigger span {

    background-color: transparent;

}

.nav-is-visible .cd-nav-trigger span::before {

    -webkit-transform: rotate(-45deg);

    -moz-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

    transform: rotate(-45deg);

}

.nav-is-visible .cd-nav-trigger span::after {

    -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(45deg);

}

.cd-stretchy-nav ul {

    position: relative;

    z-index: 2;

    padding: 60px 0 0;

    visibility: hidden;

    text-align: right;

}

.cd-stretchy-nav ul a {

    position: relative;

    display: block;

    height: 50px;

    line-height: 50px;

    padding: 0 calc(1em + 60px) 0 1em;

    color: rgba(255, 255, 255, 0.7);

    font-size: 1.4rem;

    -webkit-transition: color 0.2s;

    -moz-transition: color 0.2s;

    transition: color 0.2s;

}

.cd-stretchy-nav ul a::after {

    /* navigation item icons */

    

    content: '';

    position: absolute;

    height: 16px;

    width: 16px;

    right: 22px;

    top: 50%;

    -webkit-transform: translateY(-50%) scale(0);

    -moz-transform: translateY(-50%) scale(0);

    -ms-transform: translateY(-50%) scale(0);

    -o-transform: translateY(-50%) scale(0);

    transform: translateY(-50%) scale(0);

    opacity: .6;

}

.cd-stretchy-nav ul a::before {

    /* line visible next to the active navigation item */

    

    content: '';

    position: absolute;

    width: 3px;

    height: 16px;

    top: 50%;

    right: 60px;

    -webkit-transform: translateX(3px) translateY(-50%) scaleY(0);

    -moz-transform: translateX(3px) translateY(-50%) scaleY(0);

    -ms-transform: translateX(3px) translateY(-50%) scaleY(0);

    -o-transform: translateX(3px) translateY(-50%) scaleY(0);

    transform: translateX(3px) translateY(-50%) scaleY(0);

    background-color: #0a9581;

}

.cd-stretchy-nav ul li:first-of-type a::after {

    /* change custom icon using image sprites */

    

    background-position: -32px 0;

}

.cd-stretchy-nav ul li:nth-of-type(2) a::after {

    background-position: -64px 0;

}

.cd-stretchy-nav ul li:nth-of-type(3) a::after {

    background-position: -48px 0;

}

.cd-stretchy-nav ul li:nth-of-type(4) a::after {

    background-position: 0 0;

}

.cd-stretchy-nav ul li:nth-of-type(5) a::after {

    background-position: -16px 0;

}

.cd-stretchy-nav ul span {

    /* navigation item labels */

    

    display: block;

    opacity: 0;

    -webkit-transform: translateX(-25px);

    -moz-transform: translateX(-25px);

    -ms-transform: translateX(-25px);

    -o-transform: translateX(-25px);

    transform: translateX(-25px);

}

.cd-stretchy-nav.nav-is-visible ul {

    visibility: visible;

}

.cd-stretchy-nav.nav-is-visible ul a::after {

    /* navigation item icons */

    

    -webkit-transform: translateY(-50%) scale(1);

    -moz-transform: translateY(-50%) scale(1);

    -ms-transform: translateY(-50%) scale(1);

    -o-transform: translateY(-50%) scale(1);

    transform: translateY(-50%) scale(1);

    -webkit-animation: scaleIn 0.15s backwards;

    -moz-animation: scaleIn 0.15s backwards;

    animation: scaleIn 0.15s backwards;

    -webkit-transition: opacity 0.2s;

    -moz-transition: opacity 0.2s;

    transition: opacity 0.2s;

}

.cd-stretchy-nav.nav-is-visible ul a.active {

    color: #ffffff;

}

.cd-stretchy-nav.nav-is-visible ul a.active::after {

    opacity: 1;

}

.cd-stretchy-nav.nav-is-visible ul a.active::before {

    -webkit-transform: translateX(3px) translateY(-50%) scaleY(1);

    -moz-transform: translateX(3px) translateY(-50%) scaleY(1);

    -ms-transform: translateX(3px) translateY(-50%) scaleY(1);

    -o-transform: translateX(3px) translateY(-50%) scaleY(1);

    transform: translateX(3px) translateY(-50%) scaleY(1);

    -webkit-transition: -webkit-transform 0.15s 0.3s;

    -moz-transition: -moz-transform 0.15s 0.3s;

    transition: transform 0.15s 0.3s;

}

.cd-stretchy-nav.nav-is-visible ul span {

    opacity: 1;

    -webkit-transform: translateX(0);

    -moz-transform: translateX(0);

    -ms-transform: translateX(0);

    -o-transform: translateX(0);

    transform: translateX(0);

    -webkit-animation: slideIn 0.15s backwards;

    -moz-animation: slideIn 0.15s backwards;

    animation: slideIn 0.15s backwards;

    -webkit-transition: -webkit-transform 0.2s;

    -moz-transition: -moz-transform 0.2s;

    transition: transform 0.2s;

}

.no-touch .cd-stretchy-nav.nav-is-visible ul a:hover {

    color: #ffffff;

}

.no-touch .cd-stretchy-nav.nav-is-visible ul a:hover::after {

    opacity: 1;

}

.no-touch .cd-stretchy-nav.nav-is-visible ul a:hover span {

    -webkit-transform: translateX(-5px);

    -moz-transform: translateX(-5px);

    -ms-transform: translateX(-5px);

    -o-transform: translateX(-5px);

    transform: translateX(-5px);

}

.cd-stretchy-nav.nav-is-visible ul li:first-of-type a::after,

.cd-stretchy-nav.nav-is-visible ul li:first-of-type span {

    -webkit-animation-delay: 0.05s;

    -moz-animation-delay: 0.05s;

    animation-delay: 0.05s;

}

.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(2) a::after,

.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(2) span {

    -webkit-animation-delay: 0.1s;

    -moz-animation-delay: 0.1s;

    animation-delay: 0.1s;

}

.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(3) a::after,

.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(3) span {

    -webkit-animation-delay: 0.15s;

    -moz-animation-delay: 0.15s;

    animation-delay: 0.15s;

}

.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(4) a::after,

.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(4) span {

    -webkit-animation-delay: 0.2s;

    -moz-animation-delay: 0.2s;

    animation-delay: 0.2s;

}

.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(5) a::after,

.cd-stretchy-nav.nav-is-visible ul li:nth-of-type(5) span {

    -webkit-animation-delay: 0.25s;

    -moz-animation-delay: 0.25s;

    animation-delay: 0.25s;

}

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



add-content navigation style



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



.cd-stretchy-nav.add-content {

    cursor: pointer;

    bottom: 50px;

    top: auto;

    left: 50%;

    right: auto;

    -webkit-transform: translateY(1em) translateX(2em));

    -moz-transform: translateY(1em) translateX(2em);

    -ms-transform: translateY(1em) translateX(2em);

    -o-transform: translateY(1em) translateX(2em);

    transform: translateY(1em) translateX(2em);

    width: 300px;

}

.cd-stretchy-nav.add-content .stretchy-nav-bg {

    left: 50%;

    right: auto;

    -webkit-transform: translateX(-50%);

    -moz-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    -o-transform: translateX(-50%);

    transform: translateX(-50%);

    background: #96b72a;

    -webkit-transition: width 0.2s, box-shadow 0.2s;

    -moz-transition: width 0.2s, box-shadow 0.2s;

    transition: width 0.2s, box-shadow 0.2s;

}

.cd-stretchy-nav.add-content.nav-is-visible .stretchy-nav-bg {

    width: 100%;

    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);

}

.cd-stretchy-nav.add-content .cd-nav-trigger {

    left: 50%;

    right: auto;

    -webkit-transform: translateX(-50%);

    -moz-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    -o-transform: translateX(-50%);

    transform: translateX(-50%);

    box-shadow: -1px -1px 15px 2px rgba(0, 0, 0, 0.1), 0 4px 15px 0 rgba(0, 0, 0, 0.09);

    background: #96b72a;

}

.cd-stretchy-nav.add-content .cd-nav-trigger span {

    background-color: transparent;

}

.cd-stretchy-nav.add-content .cd-nav-trigger span::before {

    /* used to create the plus icon */

    

    -webkit-transform: rotate(90deg);

    -moz-transform: rotate(90deg);

    -ms-transform: rotate(90deg);

    -o-transform: rotate(90deg);

    transform: rotate(90deg);

}

.cd-stretchy-nav.add-content .cd-nav-trigger span::after {

    /* used to create the plus icon */

    

    -webkit-transform: rotate(0deg);

    -moz-transform: rotate(0deg);

    -ms-transform: rotate(0deg);

    -o-transform: rotate(0deg);

    transform: rotate(0deg);

}

.cd-stretchy-nav.add-content.nav-is-visible .cd-nav-trigger {

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);

}

.cd-stretchy-nav.add-content.nav-is-visible .cd-nav-trigger span::before {

    -webkit-transform: rotate(-135deg);

    -moz-transform: rotate(-135deg);

    -ms-transform: rotate(-135deg);

    -o-transform: rotate(-135deg);

    transform: rotate(-135deg);

}

.cd-stretchy-nav.add-content.nav-is-visible .cd-nav-trigger span::after {

    -webkit-transform: rotate(-225deg);

    -moz-transform: rotate(-225deg);

    -ms-transform: rotate(-225deg);

    -o-transform: rotate(-225deg);

    transform: rotate(-225deg);

}

.cd-stretchy-nav.add-content ul {

    padding-top: 0;

}

.cd-stretchy-nav.add-content ul::after {

    clear: both;

    content: "";

    display: inline-block;

    height: 55px;

}

.cd-stretchy-nav.add-content ul li {

    display: inline-block;

    float: left;

    width: 60px;

}

.cd-stretchy-nav.add-content ul li:nth-of-type(2) {

    /* space occupied by the navigation trigger */

    

    margin-right: 60px;

}

.cd-stretchy-nav.add-content ul a {

    color: #fff;

    font-size: 25px;

    height: 60px;

    padding: 3px 20px;

    width: 100%;

}

.cd-stretchy-nav.add-content ul a::after {

    top: 50%;

    left: 22px;

    right: auto;

    -webkit-transform: translateY(-50%) scale(0);

    -moz-transform: translateY(-50%) scale(0);

    -ms-transform: translateY(-50%) scale(0);

    -o-transform: translateY(-50%) scale(0);

    transform: translateY(-50%) scale(0);

}

.cd-stretchy-nav.add-content ul li:first-of-type a::after {

    background-position: -16px 0px;

}

.cd-stretchy-nav.add-content ul li:nth-of-type(2) a::after {

    background-position: 0px 0px;

}

.cd-stretchy-nav.add-content ul li:nth-of-type(3) a::after {

    background-position: -48px 0px;

}

.cd-stretchy-nav.add-content ul li:nth-of-type(4) a::after {

    background-position: -32px 0px;

}

.cd-stretchy-nav.add-content.nav-is-visible ul a::after {

    -webkit-animation-name: scaleIn;

    -moz-animation-name: scaleIn;

    animation-name: scaleIn;

    -webkit-transform: translateY(-50%) scale(1);

    -moz-transform: translateY(-50%) scale(1);

    -ms-transform: translateY(-50%) scale(1);

    -o-transform: translateY(-50%) scale(1);

    transform: translateY(-50%) scale(1);

}

.cd-stretchy-nav.add-content ul span {

    position: absolute;

    left: 0;

    top: -20px;

    width: 100%;

    padding: 0.6em 0;

    opacity: 0;

    visibility: hidden;

    background-color: rgba(0, 0, 0, 0.8);

    border-radius: 2px;

    font-size: 1.2rem;

    line-height: 1;

    white-space: nowrap;

    text-align: center;

    -webkit-transition: opacity 0.2s, visibility 0.2s;

    -moz-transition: opacity 0.2s, visibility 0.2s;

    transition: opacity 0.2s, visibility 0.2s;

    /* reset default style */

    

    -webkit-transform: translateX(0);

    -moz-transform: translateX(0);

    -ms-transform: translateX(0);

    -o-transform: translateX(0);

    transform: translateX(0);

}

.cd-stretchy-nav.add-content ul span::after {

    /* triangle below the tooltip */

    

    content: '';

    position: absolute;

    top: 100%;

    left: 50%;

    right: auto;

    -webkit-transform: translateX(-50%);

    -moz-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    -o-transform: translateX(-50%);

    transform: translateX(-50%);

    height: 0;

    width: 0;

    border: 4px solid transparent;

    border-top-color: rgba(0, 0, 0, 0.8);

}

.cd-stretchy-nav.add-content.nav-is-visible ul span {

    /* reset default style */

    

    -webkit-animation: none;

    -moz-animation: none;

    animation: none;

}

.no-touch .cd-stretchy-nav.add-content.nav-is-visible ul a:hover span {

    opacity: 1;

    visibility: visible;

    /* reset default style */

    

    -webkit-transform: translateX(0);

    -moz-transform: translateX(0);

    -ms-transform: translateX(0);

    -o-transform: translateX(0);

    transform: translateX(0);

}

.cd-main-content {

    position: relative;

    z-index: 1;

    min-height: 100vh;

    padding: 100px 0;

    background-color: #003c5d;

}

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



keyframes



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



@-webkit-keyframes scaleIn {

    from {

        -webkit-transform: translateY(-50%) scale(0);

    }

    to {

        -webkit-transform: translateY(-50%) scale(1);

    }

}

@-moz-keyframes scaleIn {

    from {

        -moz-transform: translateY(-50%) scale(0);

    }

    to {

        -moz-transform: translateY(-50%) scale(1);

    }

}

@keyframes scaleIn {

    from {

        -webkit-transform: translateY(-50%) scale(0);

        -moz-transform: translateY(-50%) scale(0);

        -ms-transform: translateY(-50%) scale(0);

        -o-transform: translateY(-50%) scale(0);

        transform: translateY(-50%) scale(0);

    }

    to {

        -webkit-transform: translateY(-50%) scale(1);

        -moz-transform: translateY(-50%) scale(1);

        -ms-transform: translateY(-50%) scale(1);

        -o-transform: translateY(-50%) scale(1);

        transform: translateY(-50%) scale(1);

    }

}

@-webkit-keyframes slideIn {

    from {

        opacity: 0;

        -webkit-transform: translateX(-25px);

    }

    to {

        opacity: 1;

        -webkit-transform: translateX(0);

    }

}

@-moz-keyframes slideIn {

    from {

        opacity: 0;

        -moz-transform: translateX(-25px);

    }

    to {

        opacity: 1;

        -moz-transform: translateX(0);

    }

}

@keyframes slideIn {

    from {

        opacity: 0;

        -webkit-transform: translateX(-25px);

        -moz-transform: translateX(-25px);

        -ms-transform: translateX(-25px);

        -o-transform: translateX(-25px);

        transform: translateX(-25px);

    }

    to {

        opacity: 1;

        -webkit-transform: translateX(0);

        -moz-transform: translateX(0);

        -ms-transform: translateX(0);

        -o-transform: translateX(0);

        transform: translateX(0);

    }

}

/*Side-bar Menu CSS Ends*/

/*Particles CSS Starts*/



#particles-js {

    position: absolute;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

}

/*Particles CSS Ends*/

/*way point css Starts*/



.os-animation {

    opacity: 0;

}

.os-animation.animated {

    opacity: 1;

}

/*way point css Ends*/

/*Background-Video/Background-image Upper-layer CSS Starts*/



.bg-opacity-layer {

    background: rgba(0, 0, 0, 0.98) none repeat scroll 0 0;

    opacity: 0.45;

    bottom: 0;

    left: 0;

    position: absolute;

    right: 0;

    top: 0;

    z-index: -1;

}

/*Background-Video/Background-image Upper-layer CSS Ends*/

/* 04. Home Section CSS Starts*/

.home_slider_bg{

    position: relative;

}

.home-center {

    position: absolute;

    margin-right: -50%;

    top: 55%;

    left: 50%;

    padding: 0px;

    transform: translate(-50%, -50%);

}

#header,

.testimonial-jarallax {

    background: transparent;

}

#header p {

    font-size: 16px;

    line-height: 1.35;

    font-weight: 300;
    color: #fff;

}

.btn-wrap {

    left: -10em;

    position: relative;

    top: 4em;

    width: 535px;

    z-index: 100;

}

.available-btn {

    border-radius: 0px;

    display: inline-block;

    font-size: 20px;

    line-height: 26px;

    margin: 10px;

    min-height: 64px;

    padding: 10px 25px 10px 92px;

    position: relative;

    text-transform: uppercase;

    transition-duration: 0.4s;

}

.available-btn > em {

    display: block;

    font-size: 14px;

    font-style: normal;

    font-weight: 400;

    line-height: 18px;

    text-transform: none;

}

.default_color {

    background: #2d2d2d;

    color: #fff;

    box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.32);

}

.default_color:hover i {

    color: #fff;

}

.default_color i {

    border-right: 1px solid #fff;

    bottom: 0;

    font-size: 40px !important;

    left: 0;

    line-height: 64px !important;

    position: absolute;

    text-align: center;

    top: 0;

    width: 70px;

    color: #fff;

}

.btn:hover {

    background: #fff;

    box-shadow: none;

    color: #96b72a;

    transition-duration: 0.4s;

}

/*Home Section CSS Ends*/

/* 05. Magical-Features Section CSS Starts*/



#magical_feature {

    position: relative;

}

#magical_feature h1 {

    font-size: 45px;

    font-weight: 300;

}



.magical-img {

    height: 60px;

}

.magical-img img {

    bottom: -1.5em;

    margin: 0 auto;

    position: relative;

}

.about-img {

    height: 300px;

}

.about-img:after {

    background-image: url("../assets/images/appestia-about.html");

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    bottom: 0;

    content: "";

    height: 500px;

    left: 12%;

    margin-left: 90px;

    position: absolute;

    width: 750px;

    top: 21em;

}

.magical-phone {

    display: inline-block;

}



#feature-desc i{

    margin-bottom: 20px;

}

/*Magical-Features Section CSS Ends*/

/* 06. Features-Description CSS Starts*/



.icon-block i {

    font-size: 4rem;

}



/*Features-Description CSS Ends*/

/* 07. Key-Features CSS Starts*/



#key-feature {

    padding-bottom: 0;

    overflow: hidden;

}

#key-feature h3{

    color: #96b72a;

    margin-bottom: 10px;

}
#magical_feature .box_aside{
    width: auto;
    float: left;
    margin: 0 25px 0 0;
    position: relative;
}
#magical_feature .box_aside img{
    margin: 0;
    transition: all .3s ease 0s;
    -moz-transition: all .3s ease 0s;
}
#magical_feature .box_aside .img-hover{
    position: absolute;
    top:0;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
}
#magical_feature .box:hover  .box_aside .img-hover{
    opacity: 1;
    filter: alpha(opacity=100);    
}

.box_aside {
    display: block;
    clear: both;
    text-align: center;
}
.box_aside span.img{
    display: inline-block;
    border:10px solid #779a25;
    max-width: 115px;
    max-height: 115px;
    border-radius: 50%;
    -moz-border-radius:50%;
    margin: 0 0 10px;
}
.box_aside .author{
    display: block;
    clear: both;
}

.box-aside15 {

    padding-top: 15px;

}

.box_cnt__no-flow {

    overflow: hidden;

}
.box_cnt__no-flow h3{
    font-size: 20px;
    font-weight: 700;
    color: #3f3f3f
}

.bg-image2-wrap,

.bg-image2_cnt {

    position: relative;

}

/*Key-Features CSS Ends*/

/* 08. Video Section CSS Starts*/

.video-img-block{

    position: relative;

}

.video-play-icon{

    display: inline-block;

    position: absolute;

    top: 50%;

	margin-top:-50px;

	left:0;

	right:0;

	text-align:center;

}

.video-play-icon a{

    font-size: 50px;

    background: rgba(255, 255, 255, 0.7) no-repeat;

    padding: 40px;

	display:inline-block;

    height: 150px;

    width: 150px;

    border-radius: 50%;  

	line-height:70px;

    -webkit-transition:all 0.6s cubic-bezier(0.26, 0.79, 0.63, 1.4) 0s;

    -moz-transition:all 0.6s cubic-bezier(0.26, 0.79, 0.63, 1.4) 0s;

    transition:all 0.6s cubic-bezier(0.26, 0.79, 0.63, 1.4) 0s;
    text-align: center;

}

.video-play-icon a i{

	color:#fff;

}



.video-play-icon a:hover {

    -webkit-transition:all 0.6s cubic-bezier(0.26, 0.79, 0.63, 1.4) 0s;

    -moz-transition:all 0.6s cubic-bezier(0.26, 0.79, 0.63, 1.4) 0s;

    transition:all 0.6s cubic-bezier(0.26, 0.79, 0.63, 1.4) 0s;

    -webkit-transform: scale(1.2);

    -moz-transform: scale(1.2);

    -ms-transform: scale(1.2);   

    transform: scale(1.2);

}

.video-img-block img{

    margin: 0 auto;

}

.btn-video {

    text-align: center;

}

.video {

    color: #96b72a;

    display: inline-block;

}

.video:hover,

.video:focus {

    color: #96b72a;

}

.video-icon {

    color: #fff;

    display: block;

    font-size: 46px;

    margin-bottom: 10px;

    text-align: center;

}

.video-icon:hover {

    opacity: 1;

    text-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);

}

/* overlay at start */


.mfp-fade.mfp-bg {

    opacity: 0;

    -webkit-transition: all 0.15s ease-out;

    -moz-transition: all 0.15s ease-out;

    transition: all 0.15s ease-out;

}

/* overlay animate in */



.mfp-fade.mfp-bg.mfp-ready {

    opacity: 0.8;

}

/* overlay animate out */



.mfp-fade.mfp-bg.mfp-removing {

    opacity: 0;

}

/* content at start */



.mfp-fade.mfp-wrap .mfp-content {

    opacity: 0;

    -webkit-transition: all 0.15s ease-out;

    -moz-transition: all 0.15s ease-out;

    transition: all 0.15s ease-out;

}

/* content animate it */



.mfp-fade.mfp-wrap.mfp-ready .mfp-content {

    opacity: 1;

}

/* content animate out */



.mfp-fade.mfp-wrap.mfp-removing .mfp-content {

    opacity: 0;

}

/*Video Section CSS Ends*/

/* 09. Counter CSS Starts*/

.mob-circle > div{

	display:block;

	margin-top:20px;

}

#circle1 strong,

#circle2 strong,

#circle3 strong,

#circle4 strong {

    font-size: 44px;

    line-height: 1.35;

    text-align: center;

    width: 100%;

	color:#cdcdcd;

}
.circle-txt {

    font-size: 14px;

    font-weight: 400;

    text-align: center;

    width: 100%;

    opacity: 1;

	color:#3f3f3f;

}

.circle-user {

    border-radius: 50%;

    font-size: 25px;

    width: 110px;

    height: 110px;

    margin: 0 auto;

    color: #96b72a;

	background:#fff;

	position:relative;
    text-align: center;    box-shadow: 0 5px 5px #f1f1f1;
    -moz-box-shadow: 0 5px 5px #f1f1f1;
    display: table;

}
.circle-user  span{
    display: table-cell;
    vertical-align: middle;
}
.circle-user img{
    margin: 0 auto;
}

/*.circle-user:before{

	background: rgba(255,255,255, 0.3);

	position:absolute;

	top:-10px;

	left:-10px;

	right:-10px;

	bottom:-10px;

    border-radius: 50%;

	content:"";

	transition: all 0.5s ease 0s;

	-moz-transition: all 0.5s ease 0s;

}

.circle-user:hover:before{

	top:-20px;

	left:-20px;

	right:-20px;

	bottom:-20px;

}*/

.circle-user i {

    position: relative;

    bottom: -90px;

    border-radius: 30px;

    background: #96b72a;

    color: #fff;

    padding: 8px 0;

    height: 40px;

    width: 40px;

}

/*Counter CSS Ends*/

/* 10. Why_Us CSS Starts*/



.choose_phone {

    position: relative;

    width: 100%;

    margin: 75px auto 0;

    overflow: hidden;

}

.choose_phone .phone1 {

    z-index: 1;

    position: relative;

}

.choose_phone .phone2 {

    position: absolute;

    top: 2em;

    right: 8.3em;

    height: 90%;

}

.valign-wrapper {

    display: -webkit-flex;

    display: flex;

    align-items: center;

}

.amazing-feature-text {

    font-size: 13px;

    line-height: 18px;

    list-style-type: none;

    margin-bottom: 15px;

    position: relative;
    color: #9a9a9a;
    overflow: hidden;

}
.amazing-feature-text p{
    margin-left: 40px;
    color: #9a9a9a;
}

.amazing-feature-text .fa {

    font-size: 30px;
    float: left;
    margin: 0 10px 5px 0;

}
.button_why_us{
    clear: both;
    display: block;
    text-align: center;
}
.button_why_us span{
    display: inline-block;
    background:  url("../images/button_why_us_shadow.png") no-repeat center bottom;
    min-width: 344px;
    min-height: 14px;
    padding: 80px 160px 7px;
    position: relative;
}
.button_why_us span:before,
.button_why_us span:after{
    position: absolute;
    top: 0;
    width: 160px;
    height: 125px;
    content: "";
}
.button_why_us span:before{
    left: 0;
    background:  url("../images/button_why_us_span_left.png") no-repeat left top;
}
.button_why_us span:after{
    right: 0;
    background:  url("../images/button_why_us_span_right.png") no-repeat right top;
}
.button_why_us span a{
    margin: 0!important;
    border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    box-shadow: none;
    -moz-box-shadow:none;
    border-bottom: 12px solid #7c9e11!important;
}

/*Why_Us CSS Ends*/

/* 11. Screen shots CSS Starts*/



.owl-main-section {

    position: relative;

}

.owl-dots .owl-dot{

    display: inline-block;

    width: 9px;

    height: 9px;

    line-height: 9px;

    text-align: center;

    border: 1px solid #10cfbd;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    border-radius: 50%;

    -moz-transition: .3s all ease;

    -o-transition: .3s all ease;

    -webkit-transition: .3s all ease;

    transition: .3s all ease;

}

.owl-dots .owl-dot+.owl-dot {

    margin-left: 10px;

}

#screenshots h2{

    margin: 0;

}

.screenshot img {

    width: 100%;

}

.ss-phone > img {

    display: block;

    left: 50%;

    position: absolute;

    top: -24px;

    transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    -moz-transform: translateX(-50%);

    -webkit-transform: translateX(-50%);

    width: 26%;

    z-index: 2;

}

.owl-theme .owl-controls {

    margin-top: 10px;

    text-align: left;

}

.screenshot .owl-theme .owl-controls{

    margin-top: 100px;

    text-align: center;

}



#tweet .owl-theme .owl-controls,

#client .owl-theme .owl-controls {

    margin-top: 30px;

    position: relative;

    text-align: center;

    z-index: 9;

}

#tweet .owl-carousel .owl-item img{

    display: inline-block;

    width: auto;

    border-radius: 50%;

}

.owl-theme .owl-controls .owl-nav div {

    background: #96b72a;

    border-radius: 30px;

    color: #fff;

    display: inline-block;

    font-size: 0;

    height: 50px;

    margin: 5px;

    opacity: 0.5;

    padding: 7px 20px;

    width: 50px;

}

.owl-dots .owl-dot.active,

.owl-dots .owl-dot:hover {

    background: #293035;

    border-color: #293035;

}

.owl-dots .owl-dot+.owl-dot,

.owl-dots .owl-dot {

    border-color: #c9cacb;

	background:#c9cacb;

}

.owl-theme .owl-controls.clickable .owl-buttons div:hover {

    opacity: 1;

    text-decoration: none;

}

.owl-theme .owl-controls .owl-page {

    display: inline-block;
    vertical-align: top;

}

.owl-theme .owl-controls .owl-page span {

    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;

    border: 1px solid #fff;

    border-radius: 20px;

    display: block;

    height: 15px;

    margin: 5px 3px;

    opacity: 0.5;

    width: 15px;

}

.screenshot .owl-theme .owl-controls .owl-page span {

    border: 1px solid #10cfbd;

}

.screenshot .owl-theme .owl-controls .owl-page.active span,

.screenshot .owl-theme .owl-controls.clickable .owl-page:hover span {

    background: #10cfbd none repeat scroll 0 0;

    opacity: 1;

}

.owl-theme .owl-controls .owl-page.active span,

.owl-theme .owl-controls.clickable .owl-page:hover span {

    background: #ffffff none repeat scroll 0 0;

    opacity: 1;

}

.owl-theme .owl-controls .owl-page span.owl-numbers {

    border-radius: 30px;

    color: #fff;

    font-size: 12px;

    height: auto;

    padding: 2px 10px;

    width: auto;

}

.owl-item.loading {

    background: rgba(0, 0, 0, 0) url("AjaxLoader.html") no-repeat scroll center center;

    min-height: 150px;

}

.owl-theme .owl-controls .owl-nav div.owl-prev::before {

    content: "\f104";

    font-family: "FontAwesome";

    font-size: 25px;

    font-style: normal;

    font-variant: normal;

    font-weight: normal;

    text-transform: none;

}

.owl-theme .owl-controls .owl-nav div.owl-next::before {

    content: "\f105";

    font-family: "FontAwesome";

    font-size: 25px;

    font-style: normal;

    font-variant: normal;

    font-weight: normal;

    text-transform: none;

}

.main-item-list .owl-dots {

    margin-top: 5px;

}

/*Screen-shots CSS Ends*/

/* 12. Testimonials CSS Starts*/

.testimonials blockquote {

    display: block;

    color: #fff;

    font-size: 14px;

    line-height: 1.35;

    position: relative;

    z-index: 1;

    font-weight: 300;

	border:none;
    padding: 0;
    font-size: 18px;
    font-style: italic;
    text-align: center;
    line-height: 1.45;
    width: 72%;

}

.testimonials blockquote:before{

	display:block;

	content:'';

	margin-bottom:50px;

	background:  url("../images/blockquote.png") no-repeat top center;

	width:100%;

	height:62px;

}

.testimonials .author{

    font-size: 14px;

	color:#fff;
    clear: both;
    font-weight: 300;
    font-style: italic;

}

.testimonials .author span{

	text-transform:uppercase;
    display: block;
    font-size: 20px;
    font-weight: 400;
    font-style: normal;
}

.testimonials .item img {

    border-radius: 50%;

	border:10px solid #fff;

}

.testimonials .active {

    border-bottom: none;

}

.testimonials .owl-dots{

	text-align: center;

}

#owl-demo2 .box_aside {
    width: 72%;
}
/*Testimonials CSS Ends*/

/* 13. Team CSS Starts*/



#feature-desc,

#team,

#packages,

.choose_us_txt {

    overflow: hidden;

}

.team-block img {

    bottom: -10px;

    position: relative;

    z-index: 1;

    transition: .3s;

    margin: 0 auto;

}

.team-desc {

    background: #fff;

    padding-bottom: 10px;

    border-radius: 5px;

    position: relative;

    z-index: 2;

}

.team-name {

    padding: 10px 0;

}

.team-position p {

    color: #96b72a;

}

.team-socials {

    display: inline-block;

    padding-top: 15px;

    padding-left: 0px;

}

.team-socials li {

    float: left;

    padding-right: 5px;

    padding-left: 5px;

}

.team-socials li a {

    color: #2d2d2d;

}

.team-socials i {

    transition-duration: 0.4s;

    cursor: pointer;

    font-size: 20px;

}

.team-socials .fb i:hover {

    color: #3A5795;

    transition-duration: 0.4s;

}

.team-socials .twt i:hover {

    color: #1DA1F2;

    transition-duration: 0.4s;

}

.team-socials .skype i:hover {

    color: #00AFF0;

    transition-duration: 0.4s;

}

.team-socials .l_in i:hover {

    color: #0077B5;

    transition-duration: 0.4s;

}

.team-block:hover img {

    bottom: 0px;

    transition: .3s;

}

.team-desc {

    transition-duration: 0.5s;

}

.team-block:hover .team-desc {

    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.19);

    transition-duration: 0.5s;

}

/*Team CSS Ends*/

/* 14. Packages CSS Starts*/



.pricing-table {

    background: #fff none repeat scroll 0 0;

    border-radius: 3px;

    box-shadow: 5px 8px 6px 0px rgba(0, 0, 0, 0.13);

    transition: transform 1.5s ease 0s;

}

.pricing-table_header,

.pricing-table_header h1,

.pricing-table_header h2,

.pricing-table_header h3,

.pricing-table_header h4,

.pricing-table_header h5,

.pricing-table_header h6 {

    color: #ffffff;

}



.pricing-table_header {

    background: #EDF1F2 none repeat scroll 0 0;

	color:#333;

    border-top-left-radius: 3px;

    border-top-right-radius: 3px;

    padding: 24px 27px 30px;

}

.pricing-table_header h3 {

    text-transform:uppercase;

	color:#333;

}

.pricing-table_header h3 + .price {

    margin-top: 5px;

}

.pricing-table .price {

    font-size: 112px;

    font-weight: 100;

    line-height: 1;

}

.pricing-table .price span {

    font-size: 16px;

    font-weight: 400;

    vertical-align: baseline;

}

.pricing-table_cnt {

    padding: 26px 27px 38px;

}

.pricing_active{

	background:#96b72a;

	color:#fff;	

}

.pricing_active h3{	

	color:#fff;

}

.pricing_active .price{

	font-weight:300;

}

.marked-list {

    font-size: 16px;

    line-height: 1.5;

}

.marked-list li.active:before {

    color: #96b72a;

    content: "\f00c";

}

.marked-list li:before {

    font-family: "FontAwesome";

    color: #5c5c5c;

    content: "\f00d";

    font-size: 1.33333em;

    font-weight: 400;

    left: 0;

    line-height: 1.16667em;

    position: absolute;

    top: 0;

}

.marked-list li {

    padding-left: 35px;

    position: relative;

}

.marked-list li + li {

    margin-top: 21px;

}

.marked-list li.active {

    color: #333333;

    font-weight: 400;

    border-bottom: none;

}

.bg-secondary h1,

.bg-secondary h2,

.bg-secondary h3,

.bg-secondary h4,

.bg-secondary h5,

.bg-secondary h6 {

    color: #ffffff;

}

.pricing-table:hover {

    transition-duration: 0.6s;

    transform: scale(1.06);

}

/*Packages CSS Ends*/

/* 15. Client CSS Starts*/



.client-owl .active,

.tweet_slider .active,

.screenshot .owl-stage .active {

    border-bottom: none;

}

.item .logo {

    text-align: center;

}

.client-owl .item .logo{

	background:#eaecee;

}

.owl-carousel .owl-item img{

	margin:0;

}

/*Client CSS Ends*/

/*  16. Ask Questions CSS Starts*/



.accordion {

    margin: 0px;

}

.accordion .panel {

    margin: 0;

    border-width: 0px;

    border-radius: 0;

    box-shadow: none;

    background-color: transparent;

}

.accordion .title {

    font-size: 14px;

    font-weight: 400;

    text-transform: uppercase;

    padding: 0;

}

.accordion .title a:hover i,

.accordion .title a[aria-expanded="true"] i {

    color: #fff;

}

.accordion .title a:hover,

.accordion .title a[aria-expanded="true"] {

    text-decoration: none;

    border-color: #ddd;

    background: #96b72a;

    color: #fff;

}

.accordion .title a {

    display: block;

    position: relative;

    color: #222222;

    padding: 14px 20px;

    border: 1px solid #e8e8e8;

    letter-spacing: 3px;

    margin: 10px 0;

}

.accordion .title a:hover p,

.accordion .title a[aria-expanded="true"] p {

    font-size: 18px;

    color: #222;

}

.accordion .title a p {

    font-size: 10px;

    color: #ddd;

}

.accordion .desc {

    color: #000;

    padding: 10px 20px 20px;

    font-size: 14px;

    background-color: #fff;

    border-right: 1px solid #ddd;

    border-left: 1px solid #ddd;

}

.accordion .title a[aria-expanded="true"]:hover:after,

.accordion .title a[aria-expanded="true"]:after {

    content: "\f106";

}

.accordion .title a:after {

    content: "\f107";

    position: absolute;

    top: 30%;

    right: 20px;

    font-family: 'FontAwesome';

    font-size: 15px;

}

.faq-heading {

    padding-left: 30px;

    background: #fff !important;

}

/*Ask Questions CSS Ends*/

/* 17. Subscribe CSS Starts*/



.form-material .form-group {

    position: relative;

    /* margin-top: 35px;

	margin-bottom: 20px; */

}

.form-material .form-control {

    display: inline-block;

    height: auto;

    width: 100%;

    border-radius: 0 !important;

    font-size: 12px;

    padding:12px 20px;

    background-color: transparent;

    box-shadow: none;

    border: 1px solid #ededed;

	color:#293035;

}

.form-material .form-bar {

    position: relative;

    display: block;

    width: 100%;

}

.form-material .form-bar:before {

    left: 50%;

}

.form-material .form-bar:before,

.form-material .form-bar:after {

    content: '';

    height: 1px;

    width: 0;

    bottom: 0;

    position: absolute;

    transition: 0.3s ease all;

    -moz-transition: 0.3s ease all;

    -webkit-transition: 0.3s ease all;

}

.form-material .form-bar:after {

    right: 50%;

}

.form-material .float-label {

    left: 20px;

    top: 12px;

    font-size: 14px;

    pointer-events: none;

}

.form-material label {

    position: absolute;

    top: -18px;

    color: #293035;

    font-size: 12px;

    font-weight: 400;

    transition: 0.2s ease all;

    -moz-transition: 0.2s ease all;

    -webkit-transition: 0.2s ease all;

}

.form-material .submit_contact{

	padding:15px 25px;

}

.form-material .form-control:focus {

    border-color: transparent;

    outline: none;

    box-shadow: none;

}

.form-material .form-control:focus ~ .form-bar:before,

.form-material .form-control:focus ~ .form-bar:after {

    width: 50%;

}

.form-material .form-control:focus ~ .form-bar:before,

.form-material .form-control:focus ~ .form-bar:after {

    background: #ef5350;

}

.form-material .form-control:focus ~ .float-label,

.form-material .form-control:valid ~ .float-label {

    top: -18px;

    font-size: 11px;

}

.form-material .form-control:focus ~ label {

    color: #ef5350;

}

.set-submit-input {

    width: 100%;

    text-align: center;

}

.set-submit-box {

    display: inline-block;

    width: 50%;

    margin-right: 20px;

}

/*Subscribe CSS Ends*/

/* 18. Contact CSS Starts*/



/*.contact {

    position: relative;
    height: 846px;

}

.contact-form {

    width: 500px;

    position: absolute;

    top: 50px;

	bottom:50px;

    background: #fff;

    padding:30px;

    display: inline-block;

}*/

.contact-form .set-submit-input {

    text-align: left;

}

.contact-form .mt0 {

    margin-top: 0px !important;

}

.contact-form .form-material .form-group {

    margin-top: 5px;

    width: 100%;

    margin-bottom: 0;

}

.contact-form h3{

	font-size:30px;

	text-transform:uppercase;

	font-weight:700

}

textarea.form-control {

    max-width: 100%;

}
.form-control {
    padding: 12px;
    color: #202020;
    border: solid 1px #D0D0D0;
    height: auto;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    border-radius: 0;
    visibility: visible!important;
}
.modal-dialog .contact-form .row .col-md-9{
    width: 100%;
}
.contact-form .btn-custom:hover {
    color: #FFF;
    background: #202020;
}
.contact-form .btn-custom {
    padding: 15px 27px;
    outline: none !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    position: relative;
    top: 0;
    visibility: visible!important;
    border:none;
}
#map {
    height: 875px !important;
}
.social ul{
    padding: 0;
    text-align: center;
}
.social ul li{
    width: auto;
    display: inline-block;
    float: none;
    text-align: left;
    padding: 10px;
    width: 50px;
    height: 50px;
}
.social ul li a{
    font-size: 0;
    line-height: 30px;
    text-align: center;
    color: #fff;
    display: block;
}
.social ul li a:before{
    font-family: "FontAwesome";
    font-size: 24px;
}
.social ul li.icon-face{
    background: #4867aa;
}
.social ul li.icon-face a:before{
    content: "\f09a";
}
.social ul li.icon-twitter{
    background: #1da1f2;
}
.social ul li.icon-twitter a:before{
    content: "\f099";
}
.social ul li.icon-pinterest{
    background: #bd081c;
}
.social ul li.icon-pinterest a:before{
    content: "\f0d2";
}
.social ul li.icon-dribbble{
    background: #ea4c89;
}
.social ul li.icon-dribbble a:before{
    content: "\f17d";
}
/*Contact CSS Ends*/

/* 19. Footer CSS Starts*/



#footer p {    

    line-height: 24px;

    font-weight: 400;

	color:#666;

}

.footer-copyright {

    font-size: 20px;

}

/*Footer CSS Ends*/

/* 20. Scroll-to-Top CSS Starts*/



.scrollup {

    position: fixed;

    bottom: 30px;

    right: 30px;

    display: none;

    z-index: 998;

    background: #96b72a;

    color: #fff;

    border-radius: 100px;

    height: 50px;

    width: 50px;

    line-height: 1.5;

}

.scrollup:hover {

    border: 1px solid #96b72a;

}

/*Scroll-to-Top CSS Ends*/

/* 21. Preloader CSS Starts*/



#btry-loader {

    background: #fff;

    top: 0;

    right: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

    left: 0;

    position: fixed;

    z-index: 9999;

}

#btry-loader .btry {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 20px;

    height: 40px;

    margin: -10px 0 0 -20px;

    border: 1px solid #96b72a;

    border-radius: 3px;

}

#btry-loader .btry:after {

    display: block;

    content: "";

    position: absolute;

    top: -3px;

    height: 2px;

    width: 8px;

    background: #96b72a;

    border-radius: 0 2px 20x 0;

    left: 5px;

}

#btry-loader .btry .btry-charge {

    position: absolute;

    z-index: 100;

    height: 16px;

    width: 16px;

    bottom: 1px;

    left: 1px;

    background: #96b72a;

    border-radius: 1px;

    -webkit-animation: red-btry 2s linear 0s infinite;

    -moz-animation: red-btry 2s linear 0s infinite;

    animation: red-btry 2s linear 0s infinite;

}

@-webkit-keyframes red-btry {

    0% {

        height: 20px;

    }

    100% {

        height: 36px;

    }

}

@keyframes red-btry {

    0% {

        height: 0px;

    }

    100% {

        height: 36px;

    }

}

#btry-loader .radius {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 40px;

    height: 40px;

    margin: -20px 0 0 -20px;

    border: 1px solid #ddd;

    border-radius: 50%;

}

#btry-loader .radius .btry-charge {

    position: absolute;

    z-index: 100;

    height: 20px;

    width: 4px;

    top: 50%;

    left: 50%;

    margin: -20px 0 0 -2px;

    border-top: 4px solid #96b72a;

    -webkit-animation: rotation 1s linear 0s infinite;

    -moz-animation: rotation 1s linear 0s infinite;

    animation: rotation 1s linear 0s infinite;

    -webkit-transform-origin: center bottom;

    -moz-transform-origin: center bottom;

    transform-origin: center bottom;

}

@-webkit-keyframes rotation {

    0% {

        -webkit-transform: rotate(0deg);

    }

    100% {

        -webkit-transform: rotate(60deg);

    }

}

@keyframes rotation {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(60deg);

    }

}

/*Preloader CSS Ends*/

/* 23. Modal CSS Starts*/



.modal-center {

    left: 50%;

    margin-left: -17em;

    margin-top: -14em;

    padding: 20px;

    position: absolute;

    top: 50%;

    width: 450px;

}

.modal-center h2 {

    color: #96b72a;

    text-transform: uppercase;

}

.login-modal-btn {

    margin-top: 10px;

    background: #96b72a;

    cursor: pointer;

    padding: 0px;

    box-shadow: none;

}

.login-modal-btn h3 {

    margin-top: 20px;

    color: #fff;

}

.sign-pw {

    margin-top: 5px !important;

}




/*Warning CSS Starts*/

.ie-warning {

  position: fixed;

  top: 0;

  left: 0;

  z-index: 9999;

  background: #000000;

  width: 100%;

  height: 100%;

  text-align: center;

  color: #fff;

  font-family: "Courier New", Courier, monospace;

  padding: 50px 0;

}

.ie-warning p {

  font-size: 17px;

}

.ie-warning .iew-container {

  min-width: 1024px;

  width: 100%;

  height: 200px;

  background: #fff;

  margin: 50px 0;

}

.ie-warning .iew-download {

  list-style: none;

  padding: 30px 0;

  margin: 0 auto;

  width: 720px;

}

.ie-warning .iew-download > li {

  float: left;

  vertical-align: top;

}

.ie-warning .iew-download > li > a {

  display: block;

  color: #000;

  width: 140px;

  font-size: 15px;

  padding: 15px 0;

}

.ie-warning .iew-download > li > a > div {

  margin-top: 10px;

}

.ie-warning .iew-download > li > a:hover {

  background-color: #eee;

}

/*Warning CSS Ends*/

@media @media (min-width: 1000px) and (max-width: 1100px) {

.owl-carousel .owl-stage-outer{max-height:343px; float: left; }

}





.portfolioFilter a { 

    margin-right: 10px; 

    color:#666;

    text-decoration:none;

}

 

.portfolioFilter a.current,

.portfolioFilter a:hover { 

    color:#96b72a;

}

 

img {

    margin:5px auto;

}

 

.isotope-item {

    z-index: 2;

}

.isotope-hidden.isotope-item {

    pointer-events: none;

    z-index: 1;

}

.isotope,

.isotope .isotope-item {

  /* change duration value to whatever you like */

 

    -webkit-transition-duration: 0.8s;

    -moz-transition-duration: 0.8s;

    transition-duration: 0.8s;

}

.isotope {

    -webkit-transition-property: height, width;

    -moz-transition-property: height, width;

    transition-property: height, width;

}

.isotope .isotope-item {

    -webkit-transition-property: -webkit-transform, opacity;

    -moz-transition-property: -moz-transform, opacity;

    transition-property: transform, opacity;

}



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

/*  12. THUMBNAIL OVERLAY

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

figure {

    display: block;

    overflow: hidden;

    position: relative;

}

figure img {

	display:block

}

figure a .text-overlay {

    position: absolute;

    bottom: -1px;

    left: 0;

    right: 0;

    padding: 20px;

    color: #fff;

    z-index: 10

}

figure a .text-overlay:before{

    display: block;

    background: #96b72a;

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

}

figure a .text-overlay .info {

    position: relative;

    z-index: 10;

}

figure a .text-overlay .info .post-title {

    color: #FFF;

    font-size:18px;

    line-height: 1.15;

    text-transform: capitalize;

	margin-bottom:10px;
    letter-spacing: normal;

}
.product-more{
    text-align: center;
}
.product-more a{
    color: #96b72a;
    font-size: 16px;
    font-weight: 300;
}

figure a .text-overlay .info p {

    color: #516c00;

    margin: 0;

	font-size:12px;

}

.overlay a:hover .text-overlay.caption {

    opacity: 1

}

.overlay a .over {

    opacity: 0;

    height: 100%;

    position: absolute;

    text-decoration: none;

    width: 100%;

    max-width: 100%;

    z-index: 99;

    top: 0;

    left: -100%;

    background-color: rgba(255, 255, 255, 0.2);

    overflow: hidden;

    transition: all 0.4s;

    -webkit-transition: all 0.3s ease 0s;

    -o-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s;

}

.overlay a:hover .over {

    opacity: 0.4;

    left: 0

}

.overlay a:hover .text-overlay .info {

    -webkit-transform: none;

    transform: none;

}

figure.inverse a .text-overlay {

    opacity: 0;

    background: none;

}

figure.inverse a:hover .over {

    opacity: 0.7

}

figure.inverse a:hover .text-overlay {

    opacity: 1;

}

/*figure.inverse a:hover .text-overlay .info {

    -webkit-transform: translate3d(0, -10px, 0);

    transform: translate3d(0, -10px, 0);

}*/

#header h3{

	color:#96b72a;

	font-size:27px;

	font-family: 'Open Sans', sans-serif;

	font-weight:400;

	margin:0 0 10px;

}

#header h3 span{

	text-transform:uppercase;

	font-weight:700;
    color: #fff;

}

#header h1{

	color:#96b72a;

	font-size:56px;

	font-family: 'Open Sans', sans-serif;

	font-weight:600;

	text-transform:uppercase;

	margin:0 0 30px;

}

.primary.title-para{

	font-size:16px;

	margin-bottom:20px;
    font-weight: 300;

}
.primary.title-para span{color: #96b72a}

.img-step{

	margin:50px 0;

}

.img-step img{display:inline-block}

.feature-desc-content [class*="col-md"]{

	float:none;

	display:inline-block;

	text-align:left;

	    width: 33%;

    vertical-align: top;

}

#products{

	background:#fafafa;

	border-top:1px solid #ededed;

	padding:50px 0;

}

.portfolioFilter{

	margin-bottom:30px;

}

.portfolioFilter a{

	text-transform:uppercase;

	font-size:16px;

	color:#999;

	font-weight:400;

	margin:0;

}

.portfolioFilter a:after{

	display:inlin-block;

	margin:0 30px;

	content:"/";

}

.portfolioFilter a:last-child:after{

	content:"";

	margin:0;

}

.portfolioContainer{

	margin:0 -20px;

}

.portfolioContainer .booth_bh, .portfolioContainer .booth_ct, .portfolioContainer .booth_tc, .portfolioContainer .booth_sk{

	position:relative!important;

	padding:20px;

	display:inline-block;

	width:33%;

	top:auto!important;

	left:auto!important;
}

.portfolioContainer .booth_bh img, .portfolioContainer .booth_ct img, .portfolioContainer .booth_tc img, .portfolioContainer .booth_sk img{

	margin:0;
    width: auto;
    height: auto;
}

#some_facts{

    background:#f5f5f5 url("../images/bkg-some_facts.png") no-repeat center;	

	padding:70px 0 60px;

}

#satisfaction{

	background:#96b72a;

	padding:50px 0;

	color:#fff;

}

#satisfaction h2,

#satisfaction p{

	color:#fff;

}

#satisfaction p{

	font-size:18px;

}

#satisfaction .btn{

	background:#515669!important;

}

.choose_us_txt h2{

	font-size:29px;

	line-height:1.25;

	font-weight:700;

}

.choose_us_txt p.bolder{

	font-size:20px;

	margin-bottom:5px;
    font-weight: 400;
    color: #3f3f3f;

}

.choose_us_txt a.btn{

	background:none!important;

	padding:0;

	color:#96b72a!important;

	text-decoration: underline;

	border:none;

	box-shadow:none;

	-moz-box-shadow:none;

	font-weight:400;

}

.set-wrapper{

	padding:0px 0 0;

}
.set-wrapper .choose_phone img{
    padding-top: 65;
}
.set-wrapper .choose_us_txt{
    /*padding-top: 20px;*/
}

.set-wrapper [class*="col-md-4"] .img{

	float:left;

	margin:0;

	max-width:50px;

}

.set-wrapper [class*="col-md"] .icon-block{

	padding-left:70px;

}

.set-wrapper [class*="col-md"] .icon-block p{

	font-size:18px;

	color:#666;

}

#footer {

	background:#e9eaea;

}
.video-quitrinh,
.gianhang{
    background: none;
}
.bkg-quitrinh-gianhang{
    background: transparent url("../images/bkg-quitrinh-gianhang.png") no-repeat center bottom;
    overflow: hidden;
}

#video-quitrinh .video-img-block {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}
#video-quitrinh .video-img-block {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
#video-quitrinh .video-img-block iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#client h3{
    text-transform: uppercase;
    font-size: 30px;
}
.camketkhachhang{
    background: transparent url("../images/bkg-camketkhachhang.jpg") repeat center;
    padding: 80px 0;
    color: #fff;
}
.camketkhachhang h2{
    color: #fff;
}
.camketkhachhang .title p{
    color: #8f8f8f;
    font-size: 14px;
}
.camketkhachhang ul.row{
    margin: 0 -40px;
}
.camketkhachhang ul + ul{
    border-top:1px solid #000;
}
.camketkhachhang ul li{
    padding: 40px;
}
.camketkhachhang ul li:first-child{
    border-right:1px solid #000;
}
.camketkhachhang ul li .img{
    float: left;
    width: auto;
    margin: 0 30px 10px 0;
}
.camketkhachhang ul li .img img{
    margin: 0;
}
.camketkhachhang ul li h3{
    color: #fff;
    font-weight: 700;
    font-size: 18px;
}
.camketkhachhang ul li h3 span{
    color: #85a12a;
}
.camketkhachhang ul li p{
    color: #8f8f8f;
}


.pricing-section{
    padding: 60px 0 40px;
    background: #f5f5f5;
}
.pricing-section .section-header{
    margin-bottom:40px;
}
.p-table{
    padding:30px;
    background:#fff;
    border-radius:3px;
    margin: 0 0 50px;
    min-height:570px;
}

.p-table > .header{
    margin:-30px;
    padding:30px;
    margin-bottom:0;
    position:relative;
    z-index:5;
    background: #96b72a;
    color: #fff;
    text-transform: uppercase;
}
.p-table > .header > h4{
    font-size:18px;
    font-weight:400;
    margin:0;
    color: #444;
}
.p-table .price{
    position:relative;
    margin-top: 10px;
    font-size: 40px;
    font-weight: 500;
    line-height: 1.25
}
.p-table .price > span{
    display:inline-block;
    *display:inline;
    *zoom:1;
    position:relative;
}
.p-table .price > .currency{
    font-size:14px;
    line-height:14px;
    vertical-align:top;
    top:10px;
}
.p-table .price > .amount{
    font-size:60px;
    font-weight:300;
    line-height:60px;
}
.p-table .price > .period{
    font-size:14px;
    line-height:14px;
    vertical-align:bottom;
    bottom:7px;
    margin-left:-2px;
    letter-spacing:1px;
    font-weight:300;
}
.p-table > .items{
    position:relative;
    padding:0;
    list-style:none;
    margin:30px 0 20px;
}
.p-table > .items > li{
    padding:15px 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.25;
    border-bottom: 1px dashed #c5c5c5;
}
.p-table > .items > li ul li{
    padding:5px 0 0;
    display: block;
}
.p-table > .items > li:before{
    width: 18px;
    height: 14px;
    display: inline-block;
    margin-right: 10px;
    background:  url(../images/i-check.png) no-repeat 0 0;
    content: "";
    vertical-align: -3px;
}
.p-table > .pricing-btn{
    display:inline-block;
    *display:inline;
    *zoom:1;
    font-size:14px;
    font-weight:400;
    text-transform:capitalize;
    letter-spacing:1px;
    text-decoration:none;
    color:#96b72a;
    font-style: italic;
    -webkit-transition:all .3s ease;
    -moz-transition:all .3s ease;
    transition:all .3s ease;
}
.p-table > .pricing-btn > .arrow{
    margin-left:4px;
    vertical-align:middle;
    top:-2px;
}
.p-table > .pricing-btn:hover{
    color:#000;
}
.p-table > .pricing-btn:hover > .arrow:before{
    border-left-color:#5a32c6;
}
.p-table > .pricing-btn:hover > .arrow:after{
    background:#5a32c6;
}
.p-table.standard{
    margin:0;
    position:relative;
    z-index:5;
    background: #96b72a;
}
.p-table.standard h4{
    color: #c8ff15;
}
.p-table.standard .price{
    color: #fff;
}
.p-table.standard .pricing-btn{
    color: #fff
}
.cta-section{
    padding:0;
    text-align:center;
    position: relative;
}
.map-contact{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    z-index: 10;
    padding: 60px 0;
}
.map-contact ul li{
    list-style: none;
    text-align: left;
    font-size: 13px;
    font-weight: 300;
    overflow: hidden;
    padding: 10px 0;
}
.map-contact ul {
    max-width: 500px;
    padding: 80px;
    background: #fff;
    width: auto;
}
.map-contact ul li .icon{
    float: left;
    margin-right: 20px;
    min-height: 55px;
}
.map-contact ul li span{
    font-size:18px;
}
.map-contact ul li span.title{
    display: block;
}
#map {
    height: 565px !important;
}
.contact-section{
    padding: 50px 0;
}
.contact-section .form-control{
    border-radius: 0;
    -moz-border-radius:0;
    border:1px solid #d0d0d0;
    box-shadow: none;
    font-size:12px;
}
#about-company{
	padding: 100px 0;
}
.company h2,
.description h2,
.landing-page-product .description .title1{
	text-transform:capitalize;
	font-size:30px;
	padding-bottom:10px;
	display:block;
	position:relative;
	font-weight:400;
}
.company h2:after,
.description h2:after,
.landing-page-product .description .title1:after{
	position:absolute;
	bottom:0;
	left:0;
	width:95px;
	border-bottom:2px solid #96b72a;
	content:"";
}
.about-company h2,
.description h2,
.landing-page-product .description .title1{
	font-weight:700;
	color:#3f3f3f;
	padding-bottom:15px;
}
.about-company p,
.description p,
.landing-page-product .description article{
	color:#293035;
	font-size:16px;
	line-height:1.45;
}
.block-news ul{
	padding:0;
}
.block-news ul li{
	float:none;
	display:inline-block;
	vertical-align:top;
	margin-left:-1.5px;
	margin-right:-1.5px;
}
.block-news ul li p{
	font-size:16px;
}
.team-Vietart{
    background: #fff url("../images/bkg-team-Vietart.png") no-repeat 0 0;
	padding:100px 0;
}
.team-Vietart h2 span{
	font-weight:700;
}
.team-Vietart h3{
	font-weight:700;
	color:#3f3f3f;
	font-size:30px;
}
.team-Vietart p{
	font-size:16px;
}
.team-business{
	padding-top:150px;
}
.product #products{
	background:#fff;
}
.customer{
	padding:80px 0;
}
.customer-slider {
	padding:0;
	overflow:hidden
}
.customer-slider li{
	width:auto;
	float:left;
	padding: 10px 15px;
}
.top-product-detail{
 overflow:hidden;
 padding:0 0 50px;
}
.product-photo-container{
	width:82%;
	float:left;
	padding-right:30px;
}
.more-view-wrapper{
	width:18%;
	float:right;
}
.more-view-wrapper ul{
	padding:0;
}
.more-view-wrapper ul li{
	padding:7px 0;
}
.more-view-wrapper ul li img{
	margin:0;
}
@media (min-width: 768px){
    html .modal-dialog {
        width: 100%;
        max-width: 920px;
    }
}
html .modal-header, html .modal-body {
    padding: 30px;
}
html .modal-header h4.modal-title {
    font-size: 24px;
    font-weight: 300;
    color: #000;
    text-transform: uppercase;
}
html .modal-header .close {
    font-size: 50px;
    font-weight: 400;
    margin-top: -17px;
}
.modal-body form h2{
    font-size: 16px;
    color: #96b72a;
    padding: 15px 15px 15px;
    margin: 0
}
.modal-body form .form-group label{
    font-size: 14px;
    color: #000;
    font-weight: 300;
}
.modal.package .modal-header{
    color: #fff;
    background: #96b72a;
}
.modal.package h4.modal-title{
    color: #fff;
}
.modal.package  .modal-header .close{
    color: #8aa829
}
.customer .owl-carousel .owl-item > div{
    margin: 10px;
}
.customer .owl-theme .owl-controls .owl-page.active span, 
.customer .owl-theme .owl-controls.clickable .owl-page:hover span{
    background: #96b72a;
}
.customer .owl-theme .owl-controls .owl-page span{
    background: #324545
}
.customer .owl-theme .owl-controls{
    text-align: center;
    padding-top: 20px;
}
.landing-page-product .breadcrumbs{
    padding:20px 0;
    color: #787878;
}
.landing-page-product .breadcrumbs a{
    color: #787878;
}

.top-product-detail{
    margin-left: -25px;
    margin-right: -25px;
}
.top-product-detail > div{
    padding: 15px 25px;
}

.top-product-detail .content_thumbs_gall .thumbs_gall_slider_larg{
    padding: 0;
    border:none;
    margin-bottom: 30px;
}
.product-img-box .thumbs_gall_slider_con{
    border:none;
}
.landing-page-product .description .title1{
    text-transform: capitalize;
}
.top-product-detail .content_thumbs_gall.gall_arrow2 .thumbs_gall_slider_larg .owl-buttons > div{
    position: absolute;
}
.sidebars .sidebar-body ul{
    padding: 0;
}
.sidebars .sidebar-body{
    padding:30px;
}

iframe{
    background: #fff!important;
}
@media (min-width: 768px){
    html #promition .modal-dialog {
        max-width: 1000px;
    }
}
#promition .modal-content{
    border:none;
	text-align:center;
}
#promition .modal-content .col-md-6 img{
    max-width:100%;
}
#promition .modal-content .right-text{
    padding-top:30px;
    font-size: 25px;
    font-weight: 300;
    font-family: "Open Sans";
}
#promition .modal-content .right-text .title span{
    margin-bottom: 10px;
    display: block;
}
#promition .modal-content .right-text h2{
    font-size: 50px;
    padding:10px 0 0;
    display: block;
    font-weight:700;
    line-height: 1.2;
    letter-spacing: -1.5px;
}
#promition .modal-content .right-text .title{
    position: relative;
    padding-bottom:30px;
    margin-bottom: 30px;
}

#promition .modal-content .right-text .title:after{
    content: "";
    border-bottom: 1px solid #b2b2b2;
    position:absolute;
    left: 5%;
    right: 5%;
    bottom: 0;
}
#promition .modal-content .controls a.btn{
    border-radius:10px;
    -moz-border-radius:10px;
    padding:25px 30px;
    font-size: 25px;
    font-weight:700;
    font-family: "Open Sans";
    text-transform: uppercase;
    color: #bcbcbc;
    border:2px solid transparent;
    width: 100%;
    background: #fff;
    margin-bottom: 15px;
	white-space:normal;
}
#promition .modal-content .controls a.btn.btn-yes,
#promition .modal-content .controls a.btn.btn-laster:hover{
    background: #eb4a3f;
    color: #fff!important;
    border-color: transparent;
}
#promition .modal-content .controls a.btn.btn-laster,
#promition .modal-content .controls a.btn.btn-yes:hover{
    border-color: #bcbcbc;
    color: #bcbcbc!important;
    background: none;
}
@media (max-width:991px) {
    .modal-backdrop{display:none!important}
}
@media (min-width:768px) and (max-width:991px){
	#promition .modal-content .right-text{
		padding-top:10px;
	}
	#promition .modal-content .controls a.btn{
		padding:15px;
		font-size:20px;
	}	
	#promition .modal-content .right-text h2{
		font-size:40px;
	}
	#promition .modal-content .col-md-6 img{
		max-height:400px;
	}
	#promition{
		display:none!important;
	}
}
@media (max-width:767px){
	#promition{
		display:none!important;
	}
	#promition .modal-content .right-text{
		padding-top:0;
	}
	#promition .modal-content .controls a.btn{
		padding:10px;
		font-size:15px;
	}	
	#promition .modal-content .right-text h2{
		font-size:30px;
	}
	#promition .modal-content .col-md-6 img{
		max-height:300px;
	}
}

#client-vietart.owl-carousel {
    overflow: hidden;
}
#client-vietart .owl-pagination > div{
    border:none!important;
}
#client-vietart .owl-pagination > div span{
    background: #ccc;
    border: none;
}
#client-vietart .owl-pagination > div.active span{
    background: #96b72a;
}

.block-news .news-icon{
    width: 50px;
    float: left;
    padding-top: 5px;
}
.block-news .news-right-content{
    width: 85%;
    float: right;
}
.block-news .news-right-content h2{
    font-weight: 600;
    margin-bottom: 0;
    letter-spacing: -1px;
}
.block-news .news-right-content h2:after{
    display: none;
}
.block-news .news-right-content .sub-title{
    text-transform: uppercase;
    font-weight:700;
}


/*phone*/
.quick-alo-phone.quick-alo-show {
visibility: visible;
}

.quick-alo-phone {

position: fixed;
visibility: hidden;
background-color: transparent;
height: 200px;*/
width:82px;
height:64px;
cursor: pointer;
z-index: 200000 !important;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
-webkit-transition: visibility .5s;
-moz-transition: visibility .5s;
-o-transition: visibility .5s;
transition: visibility .5s;
right: 150px; top: 60%;
}
.quick-alo-phone.quick-alo-green .quick-alo-ph-circle {
border-color: #60a702;
opacity: .99;
}

.quick-alo-ph-circle {
width: 160px;
height: 160px;
top: 20px;
left: 20px;
position: absolute;
background-color: transparent;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
border: 2px solid rgba(30,30,30,0.4);
border: 2px solid #bfebfc 9;
opacity: .1;
-webkit-animation: quick-alo-circle-anim 1.2s infinite ease-in-out;
-moz-animation: quick-alo-circle-anim 1.2s infinite ease-in-out;
-ms-animation: quick-alo-circle-anim 1.2s infinite ease-in-out;
-o-animation: quick-alo-circle-anim 1.2s infinite ease-in-out;
animation: quick-alo-circle-anim 1.2s infinite ease-in-out;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}

.quick-alo-phone.quick-alo-green .quick-alo-ph-circle-fill {
background-color:rgb(96, 167, 2);
background-color: #a6e3fa 9;
opacity: .75 !important;
}

.quick-alo-ph-circle-fill {
width: 100px;
height: 100px;
top: 50px;
left: 50px;
position: absolute;
background-color: #000;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
border: 2px solid transparent;
opacity: .1;
-webkit-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
-moz-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
-ms-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
-o-animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

.quick-alo-phone.quick-alo-green .quick-alo-ph-img-circle {
background-color: #5ea600;

}

.quick-alo-ph-img-circle {
width: 60px;
height: 60px;
top: 70px;
left: 70px;
position: absolute;
background: rgba(30,30,30,0.1) url("../images/message503.png") no-repeat center center;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
border: 2px solid transparent;
opacity: .99;
-webkit-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
-moz-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
-ms-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
-o-animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
animation: quick-alo-circle-img-anim 1s infinite ease-in-out;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}

.quick-alo-phone.quick-alo-green.quick-alo-hover .quick-alo-ph-img-circle, .quick-alo-phone.quick-alo-green:hover .quick-alo-ph-img-circle {
background-color: #ff0101;

}
@-moz-keyframes quick-alo-circle-anim{0%{-moz-transform:rotate(0) scale(.5) skew(1deg);opacity:.1;-moz-opacity:.1;-webkit-opacity:.1;-o-opacity:.1}30%{-moz-transform:rotate(0) scale(.7) skew(1deg);opacity:.5;-moz-opacity:.5;-webkit-opacity:.5;-o-opacity:.5}100%{-moz-transform:rotate(0) scale(1) skew(1deg);opacity:.6;-moz-opacity:.6;-webkit-opacity:.6;-o-opacity:.1}}@-webkit-keyframes quick-alo-circle-anim{0%{-webkit-transform:rotate(0) scale(.5) skew(1deg);-webkit-opacity:.1}30%{-webkit-transform:rotate(0) scale(.7) skew(1deg);-webkit-opacity:.5}100%{-webkit-transform:rotate(0) scale(1) skew(1deg);-webkit-opacity:.1}}@-o-keyframes quick-alo-circle-anim{0%{-o-transform:rotate(0) kscale(.5) skew(1deg);-o-opacity:.1}30%{-o-transform:rotate(0) scale(.7) skew(1deg);-o-opacity:.5}100%{-o-transform:rotate(0) scale(1) skew(1deg);-o-opacity:.1}}@-moz-keyframes quick-alo-circle-fill-anim{0%{-moz-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}50%{-moz-transform:rotate(0) -moz-scale(1) skew(1deg);opacity:.2}100%{-moz-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}}@-webkit-keyframes quick-alo-circle-fill-anim{0%{-webkit-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}50%{-webkit-transform:rotate(0) scale(1) skew(1deg);opacity:.2}100%{-webkit-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}}@-o-keyframes quick-alo-circle-fill-anim{0%{-o-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}50%{-o-transform:rotate(0) scale(1) skew(1deg);opacity:.2}100%{-o-transform:rotate(0) scale(.7) skew(1deg);opacity:.2}}@-moz-keyframes quick-alo-circle-img-anim{0%{transform:rotate(0) scale(1) skew(1deg)}10%{-moz-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-moz-transform:rotate(25deg) scale(1) skew(1deg)}30%{-moz-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-moz-transform:rotate(25deg) scale(1) skew(1deg)}50%{-moz-transform:rotate(0) scale(1) skew(1deg)}100%{-moz-transform:rotate(0) scale(1) skew(1deg)}}@-webkit-keyframes quick-alo-circle-img-anim{0%{-webkit-transform:rotate(0) scale(1) skew(1deg)}10%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}50%{-webkit-transform:rotate(0) scale(1) skew(1deg)}100%{-webkit-transform:rotate(0) scale(1) skew(1deg)}}@-o-keyframes quick-alo-circle-img-anim{0%{-o-transform:rotate(0) scale(1) skew(1deg)}10%{-o-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-o-transform:rotate(25deg) scale(1) skew(1deg)}30%{-o-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-o-transform:rotate(25deg) scale(1) skew(1deg)}50%{-o-transform:rotate(0) scale(1) skew(1deg)}100%{-o-transform:rotate(0) scale(1) skew(1deg)}}@-moz-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%, 0, 0);-ms-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%, 0, 0);-ms-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}@-o-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%, 0, 0);-ms-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}

/* Social Icons */

#social_side_links {
    position: fixed;
  top: 70px;
  left: 0;
  padding: 0;
  list-style: none;
  z-index: 99;
}
#social_side_links li a {
  display: block;
  content: '\f040';
  max-width:40px;
  padding: 10px;
  color: #fff;
  -webkit-transition:  background .2s ease-in-out;
  -moz-transition:  background .2s ease-in-out;
  -o-transition:  background .2s ease-in-out;
  transition:  background .2s ease-in-out;
}
/*
#social_side_links li a img {
    display: block;
    max-width:40px;
  padding: 10px;
  -webkit-transition:  background .2s ease-in-out;
  -moz-transition:  background .2s ease-in-out;
  -o-transition:  background .2s ease-in-out;
  transition:  background .2s ease-in-out;
}
*/
#social_side_links li a:hover {background: rgba(0, 0, 0, .2);}
/*
@media (max-width: 768px){
    #social_side_links {
        position: fixed;bottom: 0; padding: 0 0 10px; width: 100%; box-sizing: border-box;z-index: 1000;
    }
    #social_side_links li a {
      display: block;
      float: left;
      content: '\f040';
      max-width:40px;
      padding: 10px;
      color: #fff;
      -webkit-transition:  background .2s ease-in-out;
      -moz-transition:  background .2s ease-in-out;
      -o-transition:  background .2s ease-in-out;
      transition:  background .2s ease-in-out;
    }
}*/


#package {
    display: none!important;
}