@charset "utf-8";

/*===================================================================


====================================================================
    TABLE OF CONTENT
====================================================================

1. imported styles
2. Global styles
3. Section Title style
4. Overlay style,font
5. Scroll To Top styles
6. Main header css
7. Theme Button css
8. Slider css Start
9. About css start
10. specialization css start
11. Portfolio css start
12. Learn More css start
13. Service css start
14. testimonial css
15. Blog css start
16. Partner css start
17. Counter css start
18. Team css start
19. Project css start
20. Call Details css start
21. intro css start
22. Page Heading css start
23. Shop Buy css start
24. Shop Description css start
25. Video css start
26. Service Details css start
27. Inner Portfolio css Start
28. Portfolio Details css start
29. Error css start
30. Contact css start
31. Main Footer css start
32. Copyright css start
33. Theme Margin And Padding

===================================================================*/

/*
====================================================================
    1. Imported styles
====================================================================
*/
@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,700');
@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Poppins:400,600');
@import url('owl.css');
@import url('font-awesome.min.css');
@import url('ihover.css');
@import url('stroke-gap-icons.css');
@import url('flaticon.css');
@import url('jquery.fancybox.css');
@import url('magnific-popup.css');
@import url('slick.css');

/*
====================================================================
    2. Global styles start
====================================================================
*/
html {
    overflow-x: hidden;
}

body {
    background: #ffffff;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 26px;
    color: #1a1a1a;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    color: #373636;
    font-weight: 600;
    margin-bottom: 10px;
    line-height: 1.2;
    font-size: 18px;
}
.cs-about-box-home h4{font-size: 24px;}


p {
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 2;
    color: #717070;
    font-family: 'GothamBook';
    text-align: justify;
}

mainlike P{text-align:center;}
img {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
}
a {
    font-family: 'GothamBook';
    margin: 0;
    padding: 0;
}
a:focus,
a:hover {
    text-decoration: none;
}
ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.form-control {
    border-radius: 0px;
    box-shadow: none;
    resize: none;
    width: 100%;
}
.form-control:focus {
    border-color: #C6A47E;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}
::-webkit-input-placeholder {
    color: #aaaaaa !important;
}
::-moz-placeholder {
    color: #aaaaaa !important;
}
:-ms-input-placeholder {
    color: #aaaaaa !important;
}
input:-moz-placeholder {
    color: #aaaaaa !important;
}
section {
    position: relative;
}



/*
====================================================================
   3. Section Title Css Start
====================================================================
*/

.cs-ver-section-title {
    position: relative;
}
.cs-ver-section-title h1 {
    font-family: 'GothamBook';
    font-size: 100px;
    color: rgba(102, 53, 148, 0.09);
    text-transform: lowercase;
    font-weight: bold;
    position: absolute;
    left: -112px;
    top: 155px;
    z-index: 111;
    margin-bottom: 0px;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}
.cs-hor-section-title h1 {
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
.cs-ver-section-title h2 {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 28px;
    letter-spacing: 7px;
    color: #663594;
    position: absolute;
    left: -60px;
    top: 220px;
    z-index: 222;
    margin-bottom: 0px;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}
.cs-hor-section-title h2 {
    position: absolute;
    left: 100px;
    top: 45px;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
.cs-ver-section-title .cs-section-bdr {
    height: 1px;
    width: 80px;
    background: #c6a47e;
    position: absolute;
    left: 7px;
    top: 75px;
    z-index: 222;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
}
.cs-hor-section-title .cs-section-bdr {
    left: 320px;
    top: 63px;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}
.cs-title h2 {
    font-size: 36px;
    letter-spacing: 7px;
    display: inline-block;
}
.cs-title h2 span{
    color: #c6a47e;
}
.cs-border-bottom {
    width: 100px;
    height: 1px;
    background: #C6A47E;
}



/*
====================================================================
    4. Overlay css start
====================================================================
*/


/*
 *------------------------
   mouse selector color
--------------------------
*/

::-moz-selection { /* Code for Firefox */
    color: red;
    background: yellow;
}

::selection {
    color: white;
    background: #F98E90;
}
/*
 *------------------------
   mouse selector color end
--------------------------
*/

.cs-overlay-black::before {
    content: " ";
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 0;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.8);
}
.cs-overlay-white::before {
    content: " ";
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
    left: 0;
    top: 0;
    background-color: rgba(255, 255, 255, 0.5);
}
.cs-overlay-brown::before {
    content: " ";
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 0;
    left: 0;
    top: 0;
    background-color: rgba(198, 164, 126, 0.9);
}

.cs-testimonial-area {
    background-image: url(images/bg/2.jpg);
}
.cs-blog-area {
    background-image: url(images/bg/8.png);
}
/*
====================================================================
    5. Scroll To Top css start
====================================================================
*/

.back-to-top {
    cursor: pointer;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display:none;
    border-radius: 3px;
    background-color: #663594;
    border-color: #663594;
}
.flat_icons{width: 20px;
            }

/*
====================================================================
    6. Main header css start
====================================================================
*/

.forcefullwidth_wrapper_tp_banner {
    z-index: 0;
}
.main-header {
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 999;
    width: 100%;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}
.logo img {
    width: 176px;
    float: left;
    margin-top: 5px;
    margin-right: 20px;
    z-index: 1;
    position: relative;
    
}
@media only screen and (max-width: 991px) {
.logo img {
    width: 140px;
    float: left;
    margin-top: 5px;
    margin-right: 20px;
    z-index: 1;
    position: relative;
    
    }}

.bounce-in-header.now-visible .logo img {
    margin-top: 18px;
    margin-left: 33px;
}

@media only screen and (max-width: 991px) {
.bounce-in-header.now-visible .logo img {
       margin-top: 2px;
    margin-left: 33px;
}
}


.bounce-in-header {
    position: fixed;
    box-shadow: 0px -3px 21px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    left: 0px;
    top: 0px;
    width: 100%;
    padding: 12px 0px;
    background: #ffffff;
    z-index: 0;
    /* border-bottom: 1px solid #cccccc; */
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;

}
.bounce-in-header .logo {
    padding: 6px 0px 2px;
}
.float-right {
    float: right;
}
.bounce-in-header.now-visible {
    z-index: 999;
    opacity: 1;
    visibility: visible;
    -ms-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -op-animation-name: fadeInDown;
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -ms-animation-duration: 500ms;
    -moz-animation-duration: 500ms;
    -op-animation-duration: 500ms;
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
    -ms-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -op-animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -ms-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -op-animation-iteration-count: 1;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}
.main-header .header-lower {
    position: relative;
    left: 0px;
    top: 0px;
    width: 100%;
    background: rgba(26, 26, 26, 0.85);
    z-index: 5;
}
.header-style-three.bg-top.bg-color {
    position: absolute;
    top: 6%;
}
.main-header.header-style-two {
    position:fixed;
    top: 1%;
}
.main-header.header-style-two .header-lower {
    background-color: transparent;
}
.main-header.header-style-two .nav-outer {
    padding: 31px 34px;
    margin-top: -8px;
}
.main-header.header-style-three .header-lower {
    background: none;
}
.main-header .nav-outer {
    position: relative;
}
.main-header.header-style-three .nav-outer {
    background: rgba(255, 196, 27, .95);
}
.main-header.header-style-three.bg-top {
    background-color: transparent;
    position: absolute;
    top: 6%;
}
.main-header.header-style-three.bg-top .nav-outer {
    background-color: transparent;
}

.main-header.header-style-three.bg-top.bg-color .nav-outer {
    background: transparent;
}


.main-menu .navbar-collapse {
    padding: 0px;
}
.main-menu .navigation {
    position: relative;
    margin: 0px;
    font-weight: 700;
}
.main-menu .navigation > li {
    position: relative;
    float: left;
    padding: 0px;
}
.bounce-in-header .main-menu .navigation > li {
    margin-right: 0px;
    
}
.main-menu .navigation > li > a {
    position: relative;
    display: block;
    padding: 15px 24px 12px;
    font-size: 16px;
    color: #ffffff;
    font-family: 'GothamBook';
    font-weight: 500;
    line-height: 30px;
    border-top: none;
    border-bottom: 3px solid transparent;
    /* text-transform: uppercase; */
    opacity: 1;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}
.main-menu .navigation > li > a:hover,
.main-menu .navigation > li > ul > li > a:hover {
    color: rgb(195, 148, 241);
}
.bounce-in-header .main-menu .navigation > li {
    margin-left: 30px;
}
.bounce-in-header .main-menu .navigation > li > a {
    color: #5E616A;
    padding: 34px 0px 2px 29px;
}

.bounce-in-header .main-menu .navigation > li > a:hover {
    color: #663594;
    padding: 34px 0px 2px 29px;
}
.main-menu .navigation > li:hover > a:after {
    opacity: 1;
}
.main-menu .navigation > li > ul {
    position: absolute;
    left: 0px;
    top: 150%;
    width: 210px;
    padding: 0px;
    z-index: 100;
    display: none;
    background: #283745;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}
.header-style-three .main-menu .navigation > li > ul {
    background: #247fe1;
}
.main-menu .navigation > li > ul.from-right {
    left: auto;
    right: 0px;
}
.main-menu .navigation > li > ul > li {
    position: relative;
    width: 100%;
}
.main-menu .navigation > li > ul > li:last-child {
    border-bottom: none;
}
.main-menu .navigation > li > ul > li > a {
    position: relative;
    display: block;
    padding: 13px 15px 13px 18px;
    line-height: 22px;
    font-weight: 600;
    font-size: 13px;
    color: #ffffff;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.52);
    background-color: rgb(79, 87, 103);
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}
.main-menu .navigation > li > ul > li:hover > a {
    color: rgb(195, 148, 241)
}
.main-menu .navigation > li > ul > li.dropdown > a:after {
    font-family: 'GothamBook';
    content: "\f061";
    position: absolute;
    right: 10px;
    top: 15px;
    width: 10px;
    height: 20px;
    display: block;
    color: #ffffff;
    line-height: 20px;
    font-size: 10px;
    text-align: center;
    z-index: 5;
}
.main-menu .navigation > li > ul > li.dropdown:hover > a:after {
    color: #ffffff;
}
.main-menu .navigation > li > ul > li > ul {
    position: absolute;
    left: 120%;
    top: 0px;
    width: 200px;
    padding: 0px;
    z-index: 100;
    display: none;
    background: #283745;
}
.header-style-three .main-menu .navigation > li > ul > li > ul {
    background: #247fe1;
}
.main-menu .navigation > li > ul > li > ul > li {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #FFF;
}
.main-menu .navigation > li > ul > li > ul > li:last-child {
    border-bottom: none;
}
.main-menu .navigation > li > ul > li > ul > li > a {
    position: relative;
    display: block;
    padding: 13px 15px 13px 18px;
    line-height: 22px;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    color: #ffffff;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}
.main-menu .navigation > li > ul > li > ul > li:hover > a {
    color: #247fe1;
}
.main-menu .navigation > li.dropdown:hover > ul {
    visibility: visible;
    opacity: 1;
    top: 100%;
}
.main-menu .navigation li > ul > li.dropdown:hover > ul {
    visibility: visible;
    opacity: 1;
    left: 100%;
    transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
}
.main-menu .navbar-collapse > ul li.dropdown .dropdown-btn {
    position: absolute;
    right: 10px;
    top: 6px;
    left: 158px;
    width: 34px;
    height: 30px;
    /* border: 1px solid #ffffff; */
    background-size: 20px;
    cursor: pointer;
    z-index: 5;
    display: none;
}

.shop-box {
    font-size: 20px;
    padding-top: 15px;
}
.shop-box a sup {
    background-color: #c6a47e;
    font-size: 10px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-block;
    text-align: center;
    line-height: 20px;
    position: relative;
    left: -20px;
    color: white;
    top: -20px;
}
.shop-box span {
    padding: 10px;
    color: #fff;
}
.shop-box .icon-Search {
    border-right: 1px solid #ffffff;
    font-size: 20px;
}


.accordion dt a.active  {
    color: #264DC2;
}
.accordion dt a {
    color: #333;
}
.accordion dt {
    border: 1px solid #333;
    padding: 15px 26px;
    font-size: 14px;
    margin-bottom: 15px;
}
.accordion dd {
    padding: 20px;
    background-color: #eee;
    margin-bottom: 15px;
}
.coupon-form p{
    margin-bottom: 20px;
}
.accordion .form-group label {
    font-size: 16px;
    margin-bottom: 15px;
}
.cart-total li {
    margin-top: 20px;
}
.cart-total span {
    float: right;
}
.cart-total li:last-child {
    margin-top: 0;
}
.cart-item .form-group {
        border: 1px solid #eee;
    }
.border-1 {
    width: 100%;
    height: 1px;
    background-color: #eee;
    margin-top: 20px;
    margin-bottom: 5px;
}

.bg-gray {
    background-color: #FAFAFA;
}

/*
====================================================================
    7. Theme Button css start
====================================================================
*/

.btn-cart {
    background: #264DC2;
    color: #FFF;
    padding: 12px 15px;
    text-transform: uppercase;
    border: none;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    -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;
}
.btn-cart:hover {
    background: #FFC41B;
    color: #FFF !important;
    -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;
}
.btn-shop {
    background: #333;
    color: #FFF;
    padding: 12px 15px;
    text-transform: uppercase;
    border: none;
    border-radius: 0px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    -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;
}
.btn-shop:hover {
    background: #264DC2;
    color: #FFF !important;
    -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;
}
.cs-my-btn-black {
    background: #1A1A1A;
    color: #ffffff;
    box-shadow: 1px 0px 4px rgba(0,0,0,75);
    padding: 12px 20px;
    text-transform: uppercase;
    border: none;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -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;
}
.cs-my-btn-black:hover {
    background: #ffffff;
    color: #1a1a1a !important;
    -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;
}
.cs-my-btn-white {
    background: #ffffff;
    color: #1a1a1a !important;
    box-shadow: 3px 4px 7px rgba(152, 150, 148, 0.5);
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -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;
}
.cs-my-btn-white:hover {
    background: #1A1A1A;
    color: #ffffff !important;
    -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;
}
.cs-my-btn-brown {
    background: #663594;
    color: #ffffff !important;
    box-shadow: 1px 0px 4px rgb(102, 53, 148);
    padding: 12px 20px;
    text-transform: uppercase;
    border: none;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -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;
}
.cs-my-btn-brown:hover {
    background:rgba(102, 53, 148, 0.73);
    color: #ffffff !important;
    -webkit-box-shadow: 6px 7px 11px -8px rgba(102, 53, 148, 0.73);
    -moz-box-shadow: 6px 7px 11px -8px rgba(102, 53, 148, 0.73);
    box-shadow: 6px 7px 11px -8px rgba(198,164,126,1);
    -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;
}
/*
====================================================================
    8. Slider css Start
====================================================================
*/

.main-slider .sub-title-1 {
    font-family: 'Work Sans', sans-serif;
    font-size: 18px;
    color: #1a1a1a;
    font-style: italic;
    font-weight: 300;
}
.main-slider .slider-title-1 {
    font-family: 'Oswald', sans-serif;
    font-size: 72px;
    color: #1a1a1a;
}
.main-slider .slider-title-1 span {
    color: #C6A47E;
    font-size: 72px;
    font-weight: 500;
}
.main-slider .sub-title-2 {
    color: #686868;
    font-size: 180px;
    font-family: 'Oswald', sans-serif;
    opacity: 0.3;
}
.main-slider .slider-title-2 {
    color: #FFF;
    font-size: 36px;
    text-transform: none;
    line-height: 53px;
    font-family: 'Poppins', sans-serif;
}
.main-slider .slider-title-2 span {
    color: #C6A47E;
    font-size: 36px;
}
.slider-title-2-border {
    border-left: 2px solid #FFF;
    border-bottom:2px solid #FFF;
    width: 572px;
    height: 349px;
}
.slider-title-2-round {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #fff;
    margin-left: -7px;
}
.main-slider .slider-title-3 {
    font-family: 'Poppins', sans-serif;
    font-size: 42px;
    color: #FFF;
    line-height: 72px;
    word-spacing: 3px;
}
.main-slider .slider-title-3 span {
    color: #C6A47E;
    font-weight: 500;
    font-size: 42px;
}

.main-slider .slider-btn {
    background: #C6A47E;
    color: #ffffff !important;
    padding: 10px 20px;
    text-transform: uppercase;
    box-shadow: 3px 4px 7px rgba(152, 150, 148, 0.5);
    border: none;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -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
}
.main-slider .slider-btn:hover {
    background: #b4916b;
    color: #ffffff !important;
    -webkit-box-shadow: 6px 7px 11px -8px rgba(198,164,126,0.7);
    -moz-box-shadow: 6px 7px 11px -8px rgba(198,164,126,0.7);
    box-shadow: 6px 7px 11px -8px rgba(198,164,126,0.7);
    -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;
}

/* 
====================================================================
    9. About css start
====================================================================
*/

.cs-about-area {
    padding: 80px 0px 140px;
    background: #fff;
}

.cs-detail-area {
    padding: 0px 0px 140px;
    background: #fff;
}
.cs-about-box {
    position: relative;
    padding: 99px 118px 50px 30px;
}

.cs-about-box_client {
    position: relative;
    padding: 0px 115px 72px 0px;
}

.cs-about-box-home {
position: relative;
padding: 66px 107px 39px 0px;
}


@media only screen and (max-width:991px){
 .cs-about-box-home {   
    position: relative;
    padding: 0px 13px 50px 15px;
     
}
}
.cs-breif {
    position: relative;
    padding: 27px 8px 113px 16px;
}
    
.button p{text-align: center;
         font-size: 25px;}

.cs-about-box img {
    width: 93px;
    height: 91px;
}
.cs-about-box h2 {
    margin-bottom: 20px;
    margin-top: 10px;
}
.cs-about-box h2 span{
    color: #C6A47E;
}

.cs-about-box p {
    margin-bottom: 20px;
   font-family: 'GothamBook';
}

.cs-about-box a {
    color: #5d96a0;
    font-size: 17px;
}
.cs-about-box a i{
    padding-top: 3px;
    margin-left: 5px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.cs-about-box a:hover i {
    margin-left: 15px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-about-video {
    margin-top: 60px;
    margin-left: -100px;
    position: relative;
}


.cs-about-video img {
    height: 430px;
    
}

.cs-about {
    width: 100%;
    position: relative;
}


.image-responsive{padding: 11px 0px;}

@media only screen and (max-width: 991px)
{
.image-responsive{    padding:0px 0px;}
}



.cs-about-video a span {
    font-size: 36px;
    color: #ffffff;
}

/*about-two start*/
.cs-about-two {
    padding: 80px 0 50px;
}
.cs-about-two-col {
    margin-bottom: 30px;
}
.cs-about-two-col .nav-tabs {
    border: none;
}
.cs-about-two-col .nav-tabs>li {
    float: none;
}
.cs-about-two-col .nav-tabs>li>a {
    border: none;
}
.cs-about-two-col .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, 
.nav-tabs>li.active>a:hover {
    border: none;
}
.cs-about-two-col .tabs li {
    border: 3px solid transparent;
    margin-bottom: 20px;
    webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-about-two-col .tabs li:hover {
    border: 3px solid #F2EBE2;
    webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-about-two-col .tabs li .cs-tab-btnimg{
    webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-about-two-col .tabs li:hover .cs-tab-btnimg {
    opacity: 0.4;
    webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-about-two-col .tab-content h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    text-transform: capitalize;
    font-weight: 600;
    margin-bottom: 20px;
}
.cs-about-two-col .tab-content h2 span {
    color: #c6a47e;
}
.cs-about-two-col .tab-content h6 {
    font-family: 'Work Sans', sans-serif;
    color: #a5a5a5;
    font-style: italic;
    font-weight: 400;
    text-transform: capitalize;
}
.cs-about-two-col .tab-content p {
    margin-bottom: 25px;
}





/* 
====================================================================
    10. specialization css start
====================================================================
*/
.cs-specialization-area {
    overflow: hidden;
    min-height: 400px;
    background-repeat: no-repeat;
    background-position: left;
    background-image: url(images/bg/1.jpg);
}
.cs-specialization-col .cs-title h2{
    margin-left: -625px;
    position: relative;
}
.cs-specialization-col .cs-title .cs-border-bottom {
    position: absolute;
    right: 0;
    bottom: -10px;
}
.cs-white-bg-color {
    background: #ffffff;
    height: 400px;
    padding-left: 30px;
    padding-right: 30px;
}
.cs-single-icon-box {
    padding: 20px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-single-icon-box:hover {
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-single-icon-box a {
    color: #373636;
}
.cs-single-icon-box p {
    text-transform: uppercase;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    margin-top: 15px;
}
.cs-single-icon-box [class^="flaticon-"]:before, [class*=" flaticon-"]:before {
    margin-left: 0;
    font-size: 50px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-single-icon-box:hover [class^="flaticon-"]:before, [class*=" flaticon-"]:before{
    color: #c6a47e;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

/* 
====================================================================
    11. Portfolio css start
====================================================================
*/
.empty-space{padding: 27px;}
.is-mobile{display: none;}
@media (max-width: 1199px) {
    .is-mobile{display: block;}
}

#content{overflow-x: hidden;}

/*table*/
.table-view{height: 100%; width: 100%; display: table;}
.row-view{display: table-row;}
.cell-view{display: table-cell; vertical-align: middle; height: inherit;}

.height-min{min-height: 100vh; height: 100%;}
@media (max-width: 1199px) {
  .height-min{min-height: 1px; height: 100%;}
}

/*flex*/
.flex-js{display: flex; /*width:100%;*/ -webkit-align-items:center; align-items:center;}
.flex{
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
  /*width: 100%;*/ height: 100%; min-height: inherit;
}
.flex-in{display: inline-block; width: 100%;}
.flex-order-1{order: 1;}
.flex-order-2{order: 2;}
.flex-eq-h{display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: stretch; -webkit-align-items: stretch; -webkit-box-align: stretch; align-items: stretch; width: 100%; height: 100%; min-height: inherit;}
@media (min-width: 992px) {
  .flex-md{display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; /*width: 100%;*/ height: 100%; min-height: inherit;}
}
@media (min-width: 768px) {
  .flex-sm{display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; /*width: 100%;*/ height: 100%; min-height: inherit;}
}
@media (max-width: 991px) {
  .flex-js{display: block;}
  .flex{display: block;}
  .flex-eq-h{display: block;}
}
/*flex*/

/*inputs*/
.input-wrapper{display: inline-block; position: relative; margin: 0; height: 100%; width: 100%;}
.input-wrapper .input-style{position: relative; display: block; float: left; width: 100%; height: 40px; margin-right: 0; margin-bottom: 10px; overflow: hidden;}
.input-wrapper .input-style input{width: 100%; height: 100%; padding: 0 15px; color: #222; background-color: transparent; border: 1px solid #e3e3e3;}
.input-wrapper .input-style label{position: absolute; left: 15px; top: 6px; cursor: text; font-size: 13px; line-height: 16px; -moz-transition:all 150ms ease-out; -o-transition:all 150ms ease-out; -webkit-transition:all 150ms ease-out; transition:all 150ms ease-out; -ms-transition:all 150ms ease-out; transition-delay: 250ms; -moz-transition-delay: 250ms; -webkit-transition-delay: 250ms; -ms-transition-delay: 250ms;}
.input-wrapper .input-style.focus label{top: 6px; opacity: 0; transition-delay: 0ms; -moz-transition-delay: 0ms; -webkit-transition-delay: 0ms; -ms-transition-delay: 0ms;}

.input-wrapper .input-style.half{width: calc(50% - 5px); margin-right: 10px;}
.input-wrapper .input-style.half.half-right{margin-right: 0;}
.input-wrapper .input-style.third{width: calc(33.33% - 7px); margin-right: 10px;}
.input-wrapper .input-style.third.third-right{margin-right: 0;}
@media (max-width: 1199px) {
  .input-wrapper .input-style.third{width: 100%;}
}
@media (max-width: 767px) {
  .input-wrapper .input-style.half{width: 100%;}
}



/*WHAT-WE-MADE*/
.sorting-menu{position: relative; display: inline-block; width: 100%; height: auto; text-align: center; z-index: 11;}
.sorting-menu ul{list-style-type: none; display: inline-block;}
.sorting-menu ul li{position: relative; float: left; display: inline-block; height: 30px; line-height: 28px; padding: 0 20px; margin: 0 5px; font-size: 14px; color: #a1a1a1; cursor: pointer; padding-top: 2px;}
.sorting-menu ul li.active{color: #fff;background-color: #663594;}
.sorting-menu ul li:before{content:""; position: absolute; left: 0; bottom: 0; height: 0; width: 100%;     background-color:#663594; z-index: -1;}
.sorting-menu ul li.active:before{height: 100%;}
.sorting-menu .button-drop{display: none; width: 100%; text-transform: uppercase;}
.sorting-menu .button-drop a{display: inline-block; color: #a1a1a1; width: 300px; height: 50px; line-height: 50px;     border: 2px solid #663594; font-weight: bold;}
.sorting-menu .button-drop a i{display: inline-block; padding-left: 10px; margin-right: -20px;}
.sorting-menu .button-drop a i.fa-angle-up{display: none;}
.sorting-menu .button-drop.active a i.fa-angle-down{display: none;}
.sorting-menu .button-drop.active a i.fa-angle-up{display: inline-block;}
@media (min-width: 1200px) {
  .sorting-menu ul li:hover{color: #fff;}
  .sorting-menu ul li:hover:before{height: 100%;}
}
@media (max-width: 767px) {
  .sorting-menu .button-drop{display: block;}
  .sorting-menu ul{display: none;}
  .sorting-menu ul.active{display: inline-block;}
  .sorting-menu ul li{display: block; width: 100%; margin: 5px 0;}
  .sorting-menu ul li:first-child{margin-top: 10px;}
  .sorting-menu ul li.active:before{display: none;}
}
  /*isotope masonry*/
.grid{position: relative; float: left; width: 100%; display: block; overflow: hidden;}
.grid-sizer{width: 1%;}
.grid-item{position: absolute; width: 33%; padding: 50px 25px 50px 25px;}

.grid-item.big{padding: 0 25px 49px 25px;}
.grid-item .img-wrapper{position: relative; float: left; overflow: hidden;}
.grid-item a:first-child{position: relative; float: left; width: 100%; height: 100%; overflow: hidden; margin-bottom: 20px;}
.grid-item img{width: 100%; float: left;}
.grid-item a{text-transform: uppercase;font-size: 15px;}
.grid-item p{font-size: 13px; line-height: 24px; padding-left: 25px; position: relative; margin-top: 5px;}

a h6{z-index: 1000;}

.grid-item p:before{content: ""; position:  absolute; left: 0; top: 50%; width: 15px; height: 1px; background-color: #663694;}
@media (min-width: 1200px) {
  .grid-item img:hover{-ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1);}
  .grid-item a:hover{color: #663594;}
}
@media (max-width: 991px) {
  .grid-item{width: 50%;}
  .grid-item,
  .grid-item.big{padding: 25px}
}
@media (max-width: 767px) {
  .sorting-menu ul li.active{color: #fff; background-color: #663594;}
}
@media (max-width: 479px) {
  .grid-item.big,
  .grid-item{width: 100%; padding: 20px 0;}
}


/*-------------------------------------------------------------------------------------------------------------------------------*/
/* 15 - CSS ANIMATION */
/*-------------------------------------------------------------------------------------------------------------------------------*/


  .shop .prod-item-wrapper.view-2 .shop-prod-item > a{-moz-transition:none; -o-transition:none; -webkit-transition:none; transition:none; -ms-transition:none;}
  .btn-sing-up:before, .shop .shop-form .input-wrapper .input-style.focus .fa, .btn-play, .sorting-menu ul li:before, .sorting-menu ul li, a, .follow .item, .follow .item:before, .btn-1 span, .btn-2:before, .btn-1:before, .btn-1 span, .overlay-menu ul > li > span:after, .overlay-menu ul > li > a:before, .btn-close, .hamburger-icon span{-moz-transition:all 150ms ease-out; -o-transition:all 150ms ease-out; -webkit-transition:all 150ms ease-out; transition:all 150ms ease-out; -ms-transition:all 150ms ease-out;}
  .shop-prod-item .shop-prod-item-hover i, .shop-prod-item:hover .shop-prod-item-hover i, .shop-prod-item:hover .shop-prod-item-hover .btn-2, .shop-prod-item .shop-prod-item-hover .btn-2, .shop .popup-container.right, .shop .detail-item .img-preview img, .excursion .excursion-preview img, .team-img:before, .quote .quote-nav, .grid-item img, .prod-item .prod-item-img, .overlay-menu ul > li > ul{-moz-transition:all 300ms ease-out; -o-transition:all 300ms ease-out; -webkit-transition:all 300ms ease-out; transition:all 300ms ease-out; -ms-transition:all 300ms ease-out;}
  .overlay-menu ul > li > ul li, .overlay-menu ul > li.active.clicked ul li, .animation-wrapper, .overlay-menu, .overlay-animation:before, .overlay-animation:after{-moz-transition:all 500ms ease-out; -o-transition:all 500ms ease-out; -webkit-transition:all 500ms ease-out; transition:all 500ms ease-out; -ms-transition:all 500ms ease-out;}
  .class{-moz-transition:all 700ms ease-out; -o-transition:all 700ms ease-out; -webkit-transition:all 700ms ease-out; transition:all 700ms ease-out; -ms-transition:all 700ms ease-out;}
  .class{-moz-transition:all 1000ms ease-out; -o-transition:all 1000ms ease-out; -webkit-transition:all 1000ms ease-out; transition:all 1000ms ease-out; -ms-transition:all 1000ms ease-out;}
  .class{-moz-transition:all 2000ms ease-out; -o-transition:all 2000ms ease-out; -webkit-transition:all 2000ms ease-out; transition:all 2000ms ease-out; -ms-transition:all 2000ms ease-out;}
  
  /*transition delay*/
  .overlay-wrapper.active, .overlay-wrapper.active .overlay-animation:before, .overlay-wrapper.active .overlay-animation:after, .overlay-menu{transition-delay: 0ms; -moz-transition-delay: 0ms; -webkit-transition-delay: 0ms; -ms-transition-delay: 0ms;}
  .class{transition-delay: 150ms; -moz-transition-delay: 150ms; -webkit-transition-delay: 150ms; -ms-transition-delay: 150ms;}
  .class{transition-delay: 250ms; -moz-transition-delay: 250ms; -webkit-transition-delay: 250ms; -ms-transition-delay: 250ms;}
  .class{transition-delay: 300ms; -moz-transition-delay: 300ms; -webkit-transition-delay: 300ms; -ms-transition-delay: 300ms;}
  .class{transition-delay: 450ms; -moz-transition-delay: 450ms; -webkit-transition-delay: 450ms; -ms-transition-delay: 450ms;}
  .overlay-animation:before, .overlay-animation:after, .overlay-wrapper.active .overlay-menu{transition-delay: 500ms; -moz-transition-delay: 500ms; -webkit-transition-delay: 500ms; -ms-transition-delay: 500ms;}
  .class{transition-delay: 700ms; -moz-transition-delay: 700ms; -webkit-transition-delay: 700ms; -ms-transition-delay: 700ms;}
  .class{transition-delay: 750ms; -moz-transition-delay: 750ms; -webkit-transition-delay: 750ms; -ms-transition-delay: 750ms;}
  .overlay-wrapper{transition-delay: 1000ms; -moz-transition-delay: 1000ms; -webkit-transition-delay: 1000ms; -ms-transition-delay: 1000ms;}


_:-ms-fullscreen, :root .bloom.index03 .quote .quote-nav{opacity: 0.5;}
_:-ms-fullscreen, :root .bloom.index03 .quote .quote-nav.active{opacity: 1;}

.section {position: relative;}
.bg-item {overflow: hidden; background-position: 50% 50%; background-repeat: no-repeat; background-attachment: scroll; -webkit-background-size: cover; -moz-background-size: cover; -ms-background-size: cover; background-size: cover; backface-visibility: hidden; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;}
.bg-item.fix { background-attachment: fixed; }
.vertical-align {position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%);-ms-transform: translateY(-50%); z-index: 1;}
.vertical-align.full {left: 0px; width: 100%; text-align: center;}
.vertical-wrap { font-size: 0px; padding:58px 0px; }
.vertical-wrap > div[class*="col"] { display: inline-block; vertical-align: middle; position: relative; float: none; }
.section {position: relative; background: #fff;}
.row.clear-padding {margin: 0px;}
.row.clear-padding > div[class*="col"] {padding: 0px;}
.resp-img {width: 100%; height: auto; display: block;}
.custom-container {padding: 0 150px;}
.simple-text p {font-size: 15px; line-height: 24px;}
.simple-text.sm p {font-size: 13px; line-height: 24px;}

.full-height-banner {position: relative; height: 80vh; min-height: 500px;}
.sm-sepp.h1:before {width: 50px; background: #fff; left: 50%; margin-left: -25px;}
.lh-36 {line-height: 36px;}
.full-height-banner .vertical-align {margin-top: 60px;} 
.service-slider-item {position: relative; width: 100%; height: 600px; text-align: center;}
.service-slider-item .decsription {left: 50%; top: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%); position: absolute; border: 2px solid #fff; padding: 100px 40px; max-width: 600px; text-align: center;}
#service{padding-bottom: 9px; background-image:url(images/bg/6.jpg);}
.service-slider-item .h2 {font-size: 60px;}
.pagination-on-slider .swiper-pagination {position: absolute; left: 0px; bottom: 20px; width: 100%;}
.grid-item.w-25 {width: 25%;}
.grid-item.grid-item-full {padding: 0 15px 30px;}
.detail-block {position: relative; width: 100%; }
.detail-block img {width: 100%; height: auto; display: block;}

.detail-block {position: relative;}
.detail-block .image {position: relative; width: 100%; height: 740px;}
.detail-block .text {text-align: center; display: block; margin: 0 auto; max-width: 480px;}
.project-info {position: relative; text-align: center;}
.project-info a, .project-info span {display: block; color: #989898; font-size: 13px;}
.project-info a:hover {color: #dfcd50;}
.detail-nav-link {position: relative; width: 33.333%; float: left; height: 400px; text-align: center; display: block; backface-visibility: hidden;}
.detail-nav-link .clip {top: 1px;}
.detail-nav-link .bg {transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in;}
.detail-nav-link:hover .bg {transform: scale(1.1); -webkit-transform: scale(1.1);-ms-transform: scale(1.1);}
.detail-pagination {position: relative; float: left; width: 100%;}
.all-projects {font-size: 30px; color: #222; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%); transition: all 0.35s ease-in; -webkit-transition: all 0.35s ease-in;}
.all-projects:hover {color: #dfcd50;}
.cat-text {font-size: 13px;line-height: 24px;padding-left: 25px;position: relative;margin-top: 5px;}
.cat-text:before {content: ""; position: absolute;left: 0;top: 50%;width: 15px;height: 1px;background-color: #dfcd50;}
.input-style.full-w {width: 100%!important;}
.btn-2 input {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; opacity: 0; z-index: 50; cursor: pointer;}
.map {position: relative; width: 100%; height: 650px;}
.map-item {position: absolute; height: 100%; width: 100%; left: 0px; top: 0px;}

.blog-item {position: relative;}
.blog-item .swiper-container {height: 100%;}
.blog-item .image {position: relative; overflow: hidden; width: 100%; height: 380px;}
.blog-item .image .hover-img {transition: all 0.25s ease-in; -webkit-transition: all 0.25s ease-in; backface-visibility: hidden;}
.blog-item .image .bg-item:before {content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.2);}
.blog-item .image:hover .hover-img {transform: scale(1.1); -webkit-transform: scale(1.1); -ms-transform: scale(1.1);}
.blog-item.sm .image {height: 300px;}
.blog-item .text i, .post-recent .txt i, .twitter-slide a {font-size: 13px;line-height: 24px;color: #777; display: block; display: block; position: relative;}
.blog-item .text i, .post-recent .txt span {padding-left: 20px; position: relative; display: block;}
.blog-item .text i:before, .post-recent .txt span:before {content: ""; position: absolute;left: 0;top: 50%;width: 15px;height: 1px;background-color: #dfcd50;} 
.blog-item .text i {font-style: normal;}
.blog-item .title {line-height: 30px;}
.blog-item .title a {color: #222; transition: all 0.35s ease-out; -webkit-transition: all 0.35s ease-out;}
.blog-item .title a:hover {color: #dfcd50;}
.blog-link {position: absolute; left: 30px; top: 30px; z-index: 5;}
.blog-link a {position: relative; float: left; margin: 0 10px 0px 0px; color: rgba(255,255,255,0.8); font-size: 14px; transition: all 0.35s ease-out; -webkit-transition: all 0.35s ease-out;}
.blog-link a:hover {color: #fff;}
.blog-link a span {padding-right: 5px;}
.blog-cat {position: absolute; right: 30px; top: 30px; z-index: 6;}
.blog-cat a {position: relative; display: inline-block; padding: 0px 20px; text-align: center; font-size: 14px; color: #777; background: #fff; height: 30px; line-height: 30px;}
.blog-item .image iframe {position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;}
.pagination-type-1 {position: absolute; left: 0px; bottom: 20px; width: 100%; z-index: 6;}
.pagination-type-1 .swiper-pagination-bullet {margin: 0 3px;}
.sidebar-blok {position: relative;width: 100%;}
.video-item.sm {height: 300px;}
.sidebar-blok ul li a {color: #989898; font-size: 13px;}
.sidebar-blok ul li:hover a, .twitter-slide a:hover {color: #dfcd50;}
.sidebar-blok .title {line-height: 30px;}
.sidebar-blok .swiper-container {padding-bottom: 60px;}
.tag-link {position: relative; height: 30px; margin: 0 5px 5px 0px; display: inline-block; line-height: 28px; font-size: 14px; border: 1px solid #e3e3e3; color: #999; padding: 0 20px; transition: all 0.35s ease-out; -webkit-transition: all 0.35s ease-out;}
.tag-link:before {content: ''; position: absolute; left: 0px; bottom: 0px; width: 100%; height: 0px; background: #dfcd50; transition: all 0.35s ease-out; -webkit-transition: all 0.35s ease-out;}
.tag-link span {position: relative; z-index: 1;}
.tag-link:hover {color: #fff; border-color: #dfcd50;}
.tag-link:hover:before {height: 100%;}

.post-recent {position: relative; display: inline-block; width: 100%; font-size: 0px;}
.post-recent .img {position: relative;display: inline-block; vertical-align: middle; width: 140px;z-index: 5; overflow: hidden; margin-bottom: 0px;}
.post-recent .img a {display: block; margin-bottom: 0px;}
.post-recent .img img {width: 100%; height: auto; display: block; transition: all 0.35s ease-out; -webkit-transition: all 0.35s ease-out;}
.post-recent .img:hover img {transform: scale(1.1);}
.post-recent .txt {position: relative; display: inline-block; vertical-align: middle; padding-left: 20px;}
.post-recent .txt a {font-size: 14px;}
.post-recent .txt span {font-size: 14px; display: block; color: #777; font-weight: 400;}
.post-recent a:hover {color: #dfcd50;}
.post-recent a {display: block; margin-bottom: 10px;}
.instagram-item {margin-left: -5px; margin-right: -5px;}
.instagram-item a {position: relative; float: left; width: 33.333%; padding: 0 5px 10px; transition: all 0.35s ease-out; -webkit-transition: all 0.35s ease-out;}
.instagram-item a:hover {opacity: 0.5;}
.instagram-item a img {width: 100%; height: auto; display: block;}
.twitter-slide .icon {float: right; font-size: 18px;}
.twitter-slide .date {font-size: 13px; line-height: 20px; color: #999; float: left;}
.full-height-banner ul.author-date {display: inline-block;}
.full-height-banner ul.author-date li {font-size: 14px;}
.full-height-banner ul.author-date li span {color: rgba(255,255,255,0.7);}

.sidebar-blok .prod-item ul {margin: 0px;}
.post-article img {max-width: 100%; height: auto; display: block; margin-bottom: 20px;}
.post-article p {font-size: 15px; line-height: 26px; margin-bottom: 25px;}
.post-article iframe {position: relative; width: 100%; margin-bottom: 10px; min-height: 380px;}
.fl-item {float: left; position: relative;}
.fr-item {float: right; position: relative;}
.txt-replace {position: relative;font-size: 14px;line-height: 26px;text-transform: uppercase;margin-bottom: 20px;cursor: pointer;color: #222;display: none;border-bottom: 1px solid #d0d0d0;font-weight: bold;-moz-transition: all 150ms ease-out;-o-transition: all 150ms ease-out;-webkit-transition: all 150ms ease-out;transition: all 150ms ease-out;-ms-transition: all 150ms ease-out;width: 300px;margin: 0 auto;padding: 5px 0;text-align: center;}
.txt-replace i {padding-left: 10px; display: inline-block;}
.tabs-link-wrap {position: relative;}
.category-list li {margin-bottom: 10px;}
.post-blok .h5 {line-height: 24px;}

.post-title-desc .auth {color: rgba(255,255,255,0.7); display: inline-block; position: relative;}
.post-title-link {display: inline-block; position: relative; font-size: 15px;}
.post-title-link a {color: rgba(255,255,255,0.7); display: inline-block; padding-left: 8px;}
.post-title-link a i {padding-left: 5px;}
.full-height-banner .title {display: block; clear: both; position: relative; float: left; width: 100%; margin-bottom: 20px;}

.post-title-desc {position: relative; float: left; width: 100%;}

@media (max-width: 1500px) {
    .basket {margin: 0 10px 0 20px;} 
    header ul.header-menu > li {margin: 0px; }
    header ul.header-menu > li > a {padding: 0 15px;}
    .login {padding: 0 5px;}
    .login-wrapper{margin: 0px 0px 0px 5px;}
}

@media (max-width: 1400px) {
    .custom-container {padding: 0px;}
}
@media (max-width: 1200px) {
    .full-height-banner {height: auto; min-height: 550px;}
    .full-height-banner .vertical-align {margin-top: 30px;}
    .detail-block .image {height: 500px;}
    .detail-nav-link {height: 300px;}
}
@media (max-width: 992px) {
    .service-slider-item {height: auto;}
    .service-slider-item .decsription {position: relative; top: auto; left: auto; transform: translate(0,0); -webkit-transform: translate(0,0);-ms-transform: translate(0,0); border: 0 none; padding: 80px 30px 100px; max-width: 100%;}
    .service-slider-item .decsription article {float: none;}
    .grid-item.w-25 {width: 50%;}
    .detail-pagination .detail-nav-link {width: 40%;}
    .detail-pagination .detail-nav-link:nth-child(2) {width: 20%;}    
}
@media (max-width: 768px) {
    .grid-item.w-25 {width: 100%; padding: 0 0 30px;}
    .detail-nav-link .h5 {line-height: 22px;}
    .map {height: 400px;}
}
@media (max-width: 480px) {
    .detail-block .image {height: 350px;}
    .h1-2 {font-size: 40px; line-height: 46px;}
    .detail-pagination .detail-nav-link {width: 50%;}
    .detail-pagination .detail-nav-link:nth-child(2)  {display: none;}
    .fr-item, .fl-item {float: none; text-align: center;}
    .fl-item {margin-bottom: 30px;}
}
/* 
====================================================================
    12. Learn More css start
====================================================================
*/
.cs-learnmore-bar {
    padding: 50px 0px;
    background: #c6a47e;
}
.cs-learnmore-bar h2 {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    color: #ffffff;
    font-size: 30px;
    margin-top: 5px;
    letter-spacing: 5px;
}

.cs-more-service-area {
    padding: 0 0 50px;
    position: relative;
}
.cs-more-service-area .cs-hor-section-title .cs-section-bdr {
    left: 350px;
}
.cs-more-service-col {
    margin-bottom: 30px;
    position: relative;
    padding-left: 90px;
}
.cs-more-service-area .cs-more-service-col h2{
    position: absolute;
    left: 0;
    top: 0;
    font-size: 72px;
    color: #eeeeee;
    z-index: 111;
}
.cs-more-service-area .cs-more-service-col i {
    position: absolute;
    left: -15px;
    top: 10px;
    z-index: 222;
    webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-more-service-area .cs-more-service-col:hover i {
    color: #C6A47E;
    webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-more-service-area .cs-more-service-col [class^="flaticon-"]:before, [class*=" flaticon-"]:before {
    font-size: 50px;
}
.cs-more-service-area .cs-more-service-col h4 {
    font-size: 18px;
}
.cs-inner-sevice {
    padding-top: 0;
}
.cs-inner-sevice .cs-more-service-col {
    margin-top: 150px;
}
.cs-inner-sevice .mt20{
    margin-top: 20px;
}

/* 
====================================================================
    13. Service css start
====================================================================
*/
.cs-service-area {
    padding: 0px 0px 50px;
}
.cs-service-area .cs-service-col {
    margin-top: 150px;
    margin-bottom: 30px;
}
.hexagon {
    width: 76px;
    height: 76px;
    background: #5d96a0;
	border-radius: 50px;
    position: relative;
    margin-bottom: 50px;
    padding-top: 5px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.hexagon img {
    width: 42px;
    height: 45px;
    margin: auto;
}

.cs-service-area .cs-service-col:hover .hexagon {
    background: #C6A47E;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}                 
.cs-service-area .cs-service-col:hover .hexagon:after {
    border-top: 25px solid #C6A47E;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-service-area .cs-service-col:hover .hexagon:before {
    border-bottom: 25px solid #C6A47E;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
 .cs-service-area .cs-service-col h3{
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: normal;
 }
.cs-service-two .mt30{
    margin-top: 30px;
}

/*
====================================================================
    15. Blog css start
====================================================================
*/
.cs-blog-area {
    padding: 0px 0px 50px;
    background-repeat: no-repeat; 
    background-position: left top;
}
.cs-blog-area .cs-blog-col {
    margin-top: 150px;
    margin-bottom: -111px;
    background: rgba(228, 230, 231, 0.2);
    border: 2px solid #ffffff;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

@media only screen and(max-width:991px){
.cs-blog-area .cs-blog-col {
    margin-bottom: 47px;
    border: 2px solid #ffffff;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    
    }}


.cs-blog-area .cs-blog-col:hover {
    border-color: #663594;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-blog-area .cs-hor-section-title .cs-section-bdr {
    left: 385px;
}
.cs-blog-area .cs-blog-col .cs-blog-content {
    width: 100%;
    padding: 20px 20px 30px 20px;

}
.cs-blog-area .cs-blog-col .cs-blog-content h4 a {
    font-family: 'Poppins', sans-serif;
    color: #373636;
    font-weight: 600;
}
.cs-blog-area .cs-blog-col .cs-blog-content p {
    font-family: 'GothamBook';
    color: #663594;
    letter-spacing: 1px;
    font-size: 16px; 
}
.cs-blog-area .cs-blog-col .cs-blog-img {
    position: relative;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-blog-area .cs-blog-col .cs-blog-img .cs-bg-path {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background:rgba(102, 53, 148, 0.73);
    visibility: hidden;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-blog-area .cs-blog-col:hover .cs-bg-path {
    visibility: visible;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-blog-area .cs-blog-col .cs-link-box {
    position: absolute;
    right: 20px;
    top: 20px;
    background: rgba(0, 0, 0, 0.8);
    padding: 5px 15px;
}
.cs-blog-area .cs-blog-col .cs-link-box span {
    color: #ffffff;
    font-size: 30px;
}
.cs-inner-blog-area {
    padding-top: 80px;
}
.cs-inner-blog-area .cs-blog-col{
    margin-top: 0;
}
.cs-searce-field {

}
.cs-searce-field .form-control {
    height: 46px;
    border: none;
    background: #ffffff;
    border-bottom: 1px solid #cccccc;
    padding-left: 0;
}
.cs-searce-field .cs-search-btn {
    border-radius: 0px;
    border: none;
    background: #ffffff;
    border-bottom: 1px solid #cccccc;
}
.cs-searce-field .cs-icon-Search {
    font-size: 30px;
}
.cs-category-area {
    margin-top: 60px;
}
.cs-sidebar-title {
    position: relative;
    padding-left: 30px;
}
.cs-sidebar-title h4 {
    font-weight: 400;
    margin-bottom: 15px;
}
.cs-sidebar-title span {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 18px;
}
.cs-small-bdr {
    width: 40px;
    height: 2px;
    background: #C6A47E;
    margin-left: -30px;
}
.cs-category-area ul li {
    margin-top: 20px;
}
.cs-category-area ul li a {
    font-size: 14px;
    color: #373636;
	font-weight:600;
}
.cs-category-area ul li a del {
    color: #C6A47E;
}
.cs-post-area {
    margin-top: 60px;
}
.cs-post-area ul li {
    margin-bottom: 25px;
}
.cs-post-area .cs-single-post {
    position: relative;
    padding-left: 95px;
}
.cs-post-area .cs-single-post img {
    width: 70px;
    height: 80px;
    position: absolute;
    left: 0;
    top: 0;
}
.cs-post-area .cs-single-post h5 {
    margin-bottom: 0;
}
.cs-post-area .cs-single-post h5 a {
    font-size: 14px;
    line-height: 20px;
    color: #373636;
    text-transform: capitalize;
}
.cs-post-area .cs-single-post span {
    color: #b8b8b8;
}
.cs-post-area .cs-single-post a {
    color: #c6a47e;
}
.cs-quote {
    margin-top: 60px;
}
.cs-tag-area {
    margin-top: 50px;
}
.cs-tag-area ul li {
    float: left;
    margin-bottom: 25px;
    margin-right: 5px;
}
.cs-tag-area ul li a {
    padding: 15px 20px;
    color: #ffffff;
    background: #1A1A1A;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-tag-area ul li a:hover {
    background: #C6A47E;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-blog-classic-area .cs-blog-col .cs-blog-content .cs-blog-para {
    font-size: 14px;
    font-weight: 400;
    color: #373636 ;
    margin-bottom: 30px;
    font-family: 'Work Sans', sans-serif;
}
.cs-blog-classic-area .cs-blog-col .cs-blog-content{
    padding-left: 0;
}
.cs-blog-classic-area .cs-blog-col {
    border: none;
}
.cs-blog-classic-area .cs-blog-col .cs-blog-img {
    position: relative;
}
.cs-blog-classic-area .cs-blog-col:hover .cs-blog-img {
    margin-right: 0;
    margin-top: 0;
}
.cs-blog-classic-area .cs-blog-col .cs-link-box {
    position: absolute;
    right: 20px;
    top: 20px;
    background: rgba(0, 0, 0, 0.8);
    padding: 5px 15px;
}
.cs-blog-classic-area .cs-blog-col .cs-link-box span {
    color: #ffffff;
    font-size: 30px;
}
.cs-blog-classic-area .cs-blog-col .cs-blog-sub-text {
    margin-bottom: 20px;
    border-left: 1px solid #c7c7c7;
}
.cs-blog-classic-area .cs-blog-col .cs-blog-sub-text p {
    color: #8b8b8b;
    padding-left: 20px;
    font-size: 14px;
    font-weight: 400;
    font-family: 'Work Sans', sans-serif;
}
.cs-blog-classic-area .cs-blog-col .cs-blog-sub-text span {
    font-weight: 373636;
    font-size: 13px;
    padding-left: 20px;
    font-family: 'Oswald', sans-serif;
}
.cs-share-icon {
    margin-top: 20px;
    padding-bottom: 30px;
    border-bottom: 1px solid #EEEEEE;
}
.cs-share-icon ul li {
    float: left;
    color: #8b8b8b;
    margin-left: 10px;
    text-align: center;
    font-size: 16px;
    line-height: 32px;
}
.cs-share-icon ul li a i {
    color: #8B8B8B;
    width: 35px;
    height: 35px;
    padding-top: 8px;
    border: 1px solid #cccccc;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-share-icon ul li a i:hover {
    background: #C6A47E;
    color: #ffffff;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-blog-comment {
    margin-top: 50px;
    margin-bottom: 100px;
}
.cs-blog-comment h4 span {
    font-size: 15px;
    margin-right: 5px;
    color: #C6A47E;
}
.cs-blog-comment h4 a {
    color: #373636;
}
.cs-comment-content {
    position: relative;
    padding-left: 120px;
    margin-top: 30px;
}
.cs-comment-content img {
    width: 95px;
    height: 95px;
    position: absolute;
    left: 0;
    top: 0;
}
.cs-comment-content .cs-name {
    color: #C6A47E;
}
.cs-comment-content .cs-name span {
    font-size: 11px;
    color: #373636;
}
.cs-contact-field h5 {
    margin-bottom: 30px;
}
.cs-contact-field .form-control {
    border: none;
    border-bottom: 1px solid #D1D1D1;
    padding-left: 0;
    margin-bottom: 15px;
}
.cs-contact-field .cs-contorl {
    height: 45px;
}
.cs-contact-field .cs-my-btn-brown {
    padding: 12px 50px;
    margin-top: 30px;
}

/* 
====================================================================
    16. Partner css start
====================================================================
*/
.cs-clients-area {
    padding: 20px 0 0 10px;
    background: #1A1A1A;
}
.slick-prev.slick-arrow,
.slick-next.slick-arrow {
    display: none !important;
}
.slick-slide {
    outline: none;
}
.single-item img {
    width: auto;
}

/* 
====================================================================
    17. Counter css start
====================================================================
*/
.cs-counter-area {
   padding: 119px 0px 85px;
}
.cs-counter-area .cs-counter-col {
    margin-bottom: 30px;
}
.cs-counter-area .cs-counter-col span {
    font-size: 60px;
    color: #c6a47e;
    font-family: 'Poppins', sans-serif;
}
.cs-counter-area .cs-counter-col p {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/*counter-two start*/
.cs-counter-two {
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}
.cs-counter-two .cs-counter-col span {
    color: #ffffff;
}
.cs-counter-two .cs-counter-col p {
    color: #ffffff; 
    text-align: center;
}
/* 
====================================================================
    18. Team css start
====================================================================
*/
.cs-team-area {
    padding: 0px 0px 50px; 
}
.cs-team-col {
    margin-top: 150px;
    margin-bottom: 30px;
    position: relative;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-team-area .cs-section-bdr {
    left: 395px;
}
.cs-team-col .cs-team-social {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-team-col:hover .cs-team-social{
    z-index: 1;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-team-col .cs-team-social li {
    float: right;
    margin-left: 20px;
}
.cs-team-col .cs-team-social li a {
    color: #1A1A1A;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-team-col .cs-team-social li a:hover {
    color: #c6a47e;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-team-col img {
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-team-col:hover img {
    padding-top: 35px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-team-col h5 {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    margin-bottom: 0;
    margin-top: 20px;
    margin-left: 20px;
}
.cs-team-col span {
    margin-left: 20px;
    text-transform: uppercase;
}
.cs-over-box {
    width: 100%;
    min-height: 355px;
    border: 5px solid #c6a47e;
    position: absolute;
    top: 40px;
    left: 0;
    visibility: hidden;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-team-col:hover .cs-over-box {
    visibility: visible;
    top: 95px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

/* 
====================================================================
    19. Team Details css end
====================================================================
*/

.cs-team-details-area {
    padding: 80px 0 50px;
}
.cs-team-details-area .cs-team-details-col {
    margin-bottom: 30px;
}
.cs-details-box {
    padding: 40px;
    border: 4px solid #c6a47e;
}
.cs-details-box h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 24px;
    font-weight: normal;
    letter-spacing: 3px;
}
.cs-details-box h6 {
    font-weight: 600;
    font-size: 12px;
}
.cs-details-box img {
    width: 100px;
    height: 58px;
    float: right;
}
.cs-details-box .cs-icone-group ul li {
    float: left;
    margin-left: 20px;
}
.cs-details-box .cs-icone-group ul li a {
    color: #1a1a1a;
}
.cs-details-box .cs-icone-group ul li a:hover {
    color: #C6A47E;
}

/*skill bar start*/

.progress-levels {
    margin-top: 20px;
    margin-bottom: 20px;
}
.progress-levels .progress-box {
    position: relative;
    margin-bottom: 25px;
    overflow: hidden;
}
.progress-levels .progress-box:last-child {
    margin-bottom: 0;
}
.progress-levels .progress-box:last-child {
    margin-bottom: 0;
}
.progress-levels .progress-box .box-title {
    position: relative;
    font-size: 18px;
    line-height: 24px;
    color: #181818;
    text-transform: capitalize;
    margin-bottom: 16px;
}
.progress-levels .progress-box .bar {
    position: relative;
    height: 10px;
    background: #eeeeee;
}
.progress-levels .progress-box .bar .bar-innner {
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
}
.progress-levels .progress-box .bar .bar-fill {
    position: absolute;
    top: 0;
    width: 0;
    height: 10px;
    background: #c6a47e;
    -moz-transition: all 2000ms ease 300ms;
    -webkit-transition: all 2000ms ease 300ms;
    -ms-transition: all 2000ms ease 300ms;
    -o-transition: all 2000ms ease 300ms;
    transition: all 2000ms ease 300ms;
}
.progress-levels .progress-box.animated .bar .bar-fill {
    left: 0px;
}
.progress-levels .progress-box .percent {
    position: absolute;
    right: 0px;
    top: -40px;
    letter-spacing: 0px;
    font-size: 18px;
    color: #181818 !important;
    line-height: 24px;
    opacity: 1;
    -moz-transition: all 2000ms ease 700ms;
    -webkit-transition: all 2000ms ease 700ms;
    -ms-transition: all 2000ms ease 700ms;
    -o-transition: all 2000ms ease 700ms;
    transition: all 2000ms ease 700ms;
}
.progress-levels .progress-box.animated .percent {
    opacity: 1;
}

/*** 
====================================================================
    19. Project css start
====================================================================
***/
.project-one .cs-section-bdr {
    left: 235px;
}
.project-one .cs-hor-section-title h2 {
    left: 0;
}
.default-project-item {
    position: relative;
    padding: 0px;
    padding-top: 150px;
}
.default-project-item .inner-box {
    position: relative;
    display: block;
    overflow: hidden;
}
.default-project-item .image-box {
    position: relative;
    display: block;
}
.default-project-item .image-box img {
    position: relative;
    display: block;
    width: 100%;
}
.default-project-item .overlay-box {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.9);
    color: #ffffff;
    opacity: 0;
    transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
}
.default-project-item .inner-box:hover .overlay-box {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}
.default-project-item .overlay-inner {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: table;
    vertical-align: middle;
    padding: 10px 30px;
}
.default-project-item .overlay-inner .content {
    position: relative;
    display: table-cell;
    vertical-align: middle;
}
.default-project-item .overlay-inner h3 {
    font-size: 18px;
    color: #ffffff;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.default-project-item .overlay-inner h5 {
    color: #ffffff;
    margin-bottom: 20px;
    font-size: 12px;
    color: #c6a47e;
}
.default-project-item .overlay-inner p {
    font-size: 10px;
    color: #333;
    text-transform: uppercase;
    font-weight: 600;
    font-style: italic;
}
.default-project-item .overlay-inner h3 a {
    color: #ffffff;
}
.default-project-item .overlay-inner .image-link {
    position: relative;
    display: block;
    font-size: 20px;
    color: #ffffff;
    margin-bottom: 20px;
}
.default-project-item .overlay-inner .image-link .icon {
    display: inline-block;
    font-size: 24px;
}


/*project-two start*/
.cs-project-two .default-project-item {
    padding-top: 0;
}
/*project-two end*/

.cs-inner-project {
    padding-bottom: 80px;
}
.cs-inner-project .cs-section-bdr {
    left: 360px;
}
.cs-inner-project .default-project-item {
    padding-top: 0;
}

#portfolio{background: white;}

#recent_work{margin-top: -93px;}
/* 
====================================================================
    20. Call Details css start
====================================================================
*/
.cs-details-area {
    padding: 80px 0 50px; 
}
.cs-details-area .cs-details-col {
    margin-bottom: 30px;
}
.cs-details-area .cs-look-img {
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-details-area .cs-look-img:hover {
    -webkit-box-shadow: 0px 1px 44px -7px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 1px 44px -7px rgba(0,0,0,0.75);
    box-shadow: 0px 1px 44px -7px rgba(0,0,0,0.75);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-room-detail {
    position: relative;
}
.cs-round-point {
    position: absolute;
    right: 60px;
    top: 78px;
    width: 5px;
    height: 5px;
    background: #C1C1C1;
    border-radius: 50%;
}
.cs-round-point::before {
    content: " ";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 100px;
    height: 1px;
    background: #C6A47E;
    z-index: 999;
}
.cs-round-point-two {
    position: absolute;
    left: 60px;
    top: 30px;
    width: 5px;
    height: 5px;
    background: #C1C1C1;
    border-radius: 50%;
}
.cs-round-point-two::before {
    content: " ";
    position: absolute;
    right: 5px;
    top: 2px;
    width: 100px;
    height: 1px;
    background: #C6A47E;
    z-index: 999;
}
.cs-details-area .cs-details-col h2 {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 48px;
    text-transform: capitalize;
}
.cs-details-area .cs-details-col h2 span{
    color: #C6A47E;
}
.cs-details-area .cs-details-col .hexagon {
    width: 54px;
    height: 35px;
    margin-bottom: 25px;
    padding-top: 3px;
}

.cs-details-area .cs-details-col .hexagon img {
    width: 26px;
    height: 28px;
}
.cs-details-area .cs-details-col .hexagon::before {
    top: -15px;
    border-left: 27px solid transparent;
    border-right: 27px solid transparent;
    border-bottom: 15px solid #1A1A1A;
}
.cs-details-area .cs-details-col .hexagon::after {
    bottom: -15px;
    border-left: 27px solid transparent;
    border-right: 27px solid transparent;
    border-top: 15px solid #1A1A1A;
}
.cs-details-area .cs-details-col h5 {
    letter-spacing: 1px;
    font-family: 'Oswald', sans-serif;
    margin-bottom: 0;
    line-height: 26px; 
}
.cs-details-area .cs-details-col:hover .hexagon {
    background: #C6A47E;
}
.cs-details-area .cs-details-col:hover .hexagon::before,
.cs-details-area .cs-details-col:hover .hexagon::after {
    border-bottom-color: #C6A47E;
    border-top-color: #C6A47E;
}

/* 
====================================================================
   21. intro css start
====================================================================
*/
.cs-intro-area {
    padding: 0px 0 50px;
}
.cs-intro-col {
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}
.cs-intro-overly {
    width: 100%;
    min-height: 200px;
    background: #1A1A1A;
    position: absolute;
    bottom: -35px;
    left: 0;
    transform: skewY(10deg);
    -webkit-transform: skewY(10deg);
    moz-transform: skewY(10deg);
    -ms-transform: skewY(10deg);
    -o-transform: skewY(10deg);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-intro-col:hover .cs-intro-overly {
    background: #C6A47E;
    transform: skewY(0deg);
    -webkit-transform: skewY(0deg);
    moz-transform: skewY(0deg);
    -ms-transform: skewY(0deg);
    -o-transform: skewY(0deg);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-intro-content {
    padding: 35px 20px 20px 20px;
    transform: skewY(-10deg);
    -webkit-transform: skewY(-10deg);
    moz-transform: skewY(-10deg);
    -ms-transform: skewY(-10deg);
    -o-transform: skewY(-10deg);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-intro-col:hover .cs-intro-content {
    transform: skewY(0deg);
    -webkit-transform: skewY(0deg);
    moz-transform: skewY(0deg);
    -ms-transform: skewY(0deg);
    -o-transform: skewY(0deg);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-intro-content h4 a {
    font-size: 16px;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    margin-bottom: 15px;
    letter-spacing: 4px;
}
.cs-intro-content p {
    color: #ffffff;
    margin-bottom: 15px;
    letter-spacing: 1px;
}
.cs-intro-bdr {
    width: 115px;
    height: 1px;
    background: #ffffff;
}

/* 
====================================================================
    22. Page Heading css start
====================================================================
*/



.cs-page-heading-area {
    padding: 300px 0 0 0;
    background-image: url(images/bg/6.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    margin-top: -183px;}

.cs-page-linkbox {
    width: 100%;
    padding: 70px 30px;
    text-align: center;
    
}
.cs-page-linkbox h3 {
    color: #ffffff;
    margin-bottom: 0;
    margin-top: -59px;
    font-size: 302%;
    text-transform: uppercase;
} 
.cs-page-linkbox p, .cs-page-linkbox p a {
    color: #ffffff;
    text-align: center;
    font-size: 100%;
    font-family: 'Work Sans', sans-serif;
    text-transform: uppercase;
    -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;
} 
.cs-page-linkbox p a:hover {
    color: #cccccc;
    -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;
} 

.nav-tabs {
    border-bottom: 1px solid #fff;
}
.navi{padding: 35px 0px;
     font-size: 17px;}

.navi li{padding: 0px;
border: none;}
.navi li a:hover{border-color: solid 3px #d61c1c;
    padding: 8px 8px;
    border: none;}

.navi li a:focus{border: none;}


.navi ul li{text-decoration: none;
            background-color: transparent;
            color:black;
            padding: 10px 40px;}
tabs>li.active>a:hover {
    border: none;
}
.nav-tabs {
    border-bottom: 1px solid #e0e0e0;
}
.nav>li>a {
    position: relative;
    border-color: transparent;
    padding: 19px 27px;
    color: black;
    
}

.nav-tabs>li>a:hover {
    background: transparent;
    color: #71196d;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    color: #555;
    padding: 8px 0px;
    cursor: default;
    border: none;
    background-color: #fff;
    border-bottom: solid 3px #9A0F98;
    background: transparent;
    
}
.tab-content{padding: 22px 0px;}
/* 
====================================================================
    23. Shop Buy css start
====================================================================
*/
.cs-buy-area {
    padding: 100px 0px 80px;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
.cs-buy-area h2 {
    font-size: 36px;
    color: #ffffff;
    margin-top: 5px;
    margin-bottom: 20px;
}
.cs-buy-area h2 span {
    color: #c6a47e;
}

/* 
====================================================================
    24. Shop Description css start
====================================================================
*/
.cs-description-area {
    padding: 80px 0 50px;
    overflow: hidden;
}
.cs-description-area .cs-description-col {
    margin-bottom: 30px;
}
.cs-description-area h2 {
    font-size: 30px;
    line-height: 42px;
}
.cs-description-area h2 span {
    color: #C6A47E;
}

/* 
====================================================================
    25. Video css start
====================================================================
*/
.cs-video-area {
    padding: 80px 0 50px;
    background-position: 0 110%;
    background-repeat: no-repeat;
}
.info {
    padding: 21px 0 15px;
    background-position: 0 110%;
    background-repeat: no-repeat;
    padding-top: 46px;
	background: #f7f7f1;
}

.fa-check{color:#3C0;}
.fa-check-circle{color:#3C0;}
.hexagon .fa{
	font-size:34px;
	color:#FFF;
	line-height: 45px;}
.hexagon{text-align:center;}

.cs-video-col {
    margin-bottom: 30px;
    position: relative;
}
.cs-video-area h2 {
    font-size: 36px;
}
.cs-video-area h2 span {
    color: #c6a47e;
}
.list_style a span {
    font-size: 72px;
    color: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -40px;
    margin-top: -40px;
    padding-top: 5px;
    width: 80px;
    height: 80px;
    text-align: center;
}
.cs-video-area .cs-video-col .cs-centering {
    padding-top: 80px;
}

/* 
====================================================================
    26. Service Details css start
====================================================================
*/
.cs-service-details-area {
    padding: 80px 0 50px;
    overflow: hidden;
}
.cs-service-details-col {
    margin-bottom: 30px;
}
.cs-overly-img-field {
    position: relative;
    margin-bottom: 30px;
}
.cs-over-text {
    position: absolute;
    left: 0;
    right: 0;
    top: 38%;
    margin: auto;
    text-align: center;
}
.cs-over-text i::before {
    color: #c6a47e;
    font-size: 50px;
}
.cs-over-text h3 {
    color: #ffffff;
    margin-bottom: 0;
    margin-top: 20px;
    letter-spacing: 1px;
}
.cs-over-text p {
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 8px;
}
.cs-contact-box {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    padding: 20px;
}
.cs-contact-box .cs-contact-info {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    padding: 20px;
}
.cs-contact-box .cs-contact-info p {
    color: #ffffff;
}
.cs-site-link {
    background: #1A1A1A;
    padding: 10px 20px;
    margin-bottom: 50px;
}
.cs-site-link a {
    color: #ffffff;
}
.cs-site-link a:hover {
    color: #c6a47e;
}
.cs-accordion {
    
}
.panel-default>.panel-heading {
    color: #C6A47E;
    background: #ffffff;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.panel-default>.panel-heading:hover {
    background: #C6A47E;
    color: #ffffff;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.panel-group .panel {
    border-radius: 0;
    border-color: #C6A47E;
}
.panel-heading {
    border-radius: 0;
    padding: 0;
}
.panel-default>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: #C6A47E;
}
.panel-title {
    font-weight: normal;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 15px 15px;
    width: 100%;
}
.cs-service-details-col .panel-title i:before {
    margin-left: 0;
    padding-top: 3px;
}

/* 
====================================================================
    27. Inner Portfolio css Start
====================================================================
*/
.cs-portfolio-area-two {
    padding: 0 0 80px;
}
.cs-portfolio-area-two .cs-hor-section-title .cs-section-bdr {
    left: 340px;
    top: 62px;
}
.portfolio .portfolio-item .thumb {
    position: relative;
}

.portfolio .portfolio-item .thumb img{
    width: 100%;
    height: auto;
    display: block;
}

.portfolio-hover {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}


.portfolio-item:hover .portfolio-hover,
.portfolio-item:hover .portfolio-hover .portfolio-info,
.portfolio-item:hover .portfolio-hover .portfolio-btn {
    opacity: 1;
}


.portfolio-item:hover .portfolio-hover .portfolio-info {
    bottom: 60%;
    margin-bottom: -90px;
}

.portfolio-item:hover .portfolio-hover .portfolio-btn {
    top: 44%;
    margin-top: -45px;
}

.portfolio-hover .portfolio-info {
    position: absolute;
    bottom: 0%;
    width: 100%;
    opacity: 0;
    -webkit-transform: translateY(-55%);
    -ms-transform: translateY(-55%);
    transform: translateY(-55%);
    -webkit-transition: all 0.3s 0.2s;
    transition: all 0.3s 0.2s;
}


.portfolio-hover .portfolio-btn {
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0;
    text-align: center;
    -webkit-transform: translateY(45%);
    -ms-transform: translateY(45%);
    transform: translateY(45%);
    -webkit-transition: all 0.3s 0.2s;
    transition: all 0.3s 0.2s;
    font-size: 1.500em;
}

.portfolio-info,
.portfolio-info h4 a,
.portfolio-hover .portfolio-btn a {
    text-align: center;
    color: #ffffff;
}
.portfolio-info h4 a {
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.portfolio-info p a {
    color: #c6a47e;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 5px;
    font-style: normal;
}

.portfolio-info h4 {
    margin-bottom: 0;
    font-size: 0.875em;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Montserrat', sans-serif;
}

.portfolio-info p {
    font-size: 0.750em;
    margin-bottom: 0;
    font-style: italic;
    font-weight: normal;
    letter-spacing: 1px;
    color: #757575;
    font-family: 'Montserrat', sans-serif;
}

.portfolio-info a,
.portfolio-title a {
    color: #757575;
}

/*gutter*/

.portfolio.gutter .portfolio-item {
    padding: 10px;
}


/*portfolio 2 grid*/

.portfolio.col-2 .portfolio-item {
    width: 49.99%;
}


/*portfolio 3 grid*/

.portfolio.col-3 .portfolio-item {
    width: 33.3333333%;
}

/*portfolio 4 grid*/

.portfolio.col-4 .portfolio-item {
    width: 24.98%;
}

/*portfolio 5 grid*/

.portfolio.col-5 .portfolio-item {
    width: 19.99%;
}

/*portfolio 6 grid*/

.portfolio.col-6 .portfolio-item {
    width: 16.666666667%;
}

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

.portfolio-filter li {
    display: inline-block;
}

.portfolio-filter li a {
    font-size: 14px;
    color: #373636;
    margin: 0 10px;
    padding: 10px;
    letter-spacing: 1px;
    line-height: 3;
}


.portfolio-filter li a:hover,
.portfolio-filter li.active a{
    color: #c6a47e;
}

.flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {
    border: medium none;
    outline: medium none;
}
.flex-control-nav {
    border: medium none;
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.flex-direction-nav {
    display: none;
}
.flexslider {
    margin: 0;
    padding: 0;
    position: relative;
}
.flex-viewport {
    max-height: 2000px;
    transition: all 1s ease 0s;
}
.flex-control-nav {
    bottom: 15px;
    margin: 0;
    position: absolute;
    right: 15px;
    text-align: center;
    z-index: 10;
}
.flex-control-nav li {
    display: block;
    float: left;
    height: 10px;
    margin: 0 3px;
    width: 10px;
}
.flex-control-nav li a {
    border: 1px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    height: 10px;
    text-indent: -9999px;
    transition: all 0.3s ease-in-out 0s;
    width: 10px;
}
.flex-control-nav li:hover a, .flex-control-nav li a.flex-active {
    background-color: #fff;
}
.flex-direction-nav {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
.flex-direction-nav {
}
.flex-direction-nav a {
    background-color: rgba(0, 0, 0, 0.5);
    color: rgba(0, 0, 0, 0.8);
    cursor: pointer;
    display: block;
    height: 40px;
    line-height: 40px;
    margin: -40px 0 0;
    overflow: hidden;
    position: absolute;
    text-decoration: none;
    top: 50%;
    transition: all 0.3s ease-in-out 0s;
    width: 40px;
    z-index: 200;
}
.flex-direction-nav a:hover {
    background-color: rgba(0, 0, 0, 0.7);
}
.flex-direction-nav a::before {
    color: #fff;
    content: "ï„„";
    display: block;
    font-family: "fontawesome";
    font-size: 16px;
    text-align: center;
    width: 40px;
}
.flex-direction-nav a.flex-next::before {
    content: "ï„…";
}
.flex-direction-nav .flex-prev {
    left: 0;
}
.flex-direction-nav .flex-next {
    right: 0;
    text-align: right;
}
.post-slider-thumb .flex-control-thumbs {
    left: auto;
    margin: 0 auto;
    position: relative;
    right: auto;
    text-align: left;
    top: 10px;
    z-index: 10;
}
.post-slider-thumb .flex-control-thumbs li {
    cursor: pointer;
    display: inline-block;
    float: none;
    height: auto;
    margin: 0 3px 0 0;
    width: 80px;
}
.post-slider .flex-direction-nav, .post-slider-thumb .flex-direction-nav {
    display: block;
}
.post-slider .flex-direction-nav .flex-prev, .post-slider .flex-direction-nav .flex-next, .post-slider-thumb .flex-direction-nav .flex-prev, .post-slider-thumb .flex-direction-nav .flex-next {
    opacity: 0;
}
.post-slider:hover .flex-direction-nav .flex-prev, .post-slider:hover .flex-direction-nav .flex-next, .post-slider-thumb:hover .flex-direction-nav .flex-prev, .post-slider-thumb:hover .flex-direction-nav .flex-next {
    opacity: 1;
}
.post-list-aside .post-img img {
    border: 2px solid transparent;
}
.post-list-aside .post-img img.flex-active {
    border: 2px solid rgba(0, 0, 0, 0.8);
}
.post-slider .flex-control-thumbs {
    display: none;
}

blockquote {
    background-color: #f5f2eb;
    font-size: 17.5px;
    margin: 20px 0 20px 0;
    padding: 30px 17px;
    border-left: 0px;
    font-family: 'PT Serif', serif;
    font-weight: 600;
}

.mfp-bottom-bar {
    margin-top: -90px;
    left: 5%;
}
.mfp-title {
    font-size: 16px;
    background: rgba(198, 164, 126, 0.9);
    width: 70%;
    padding: 10px 20px;
}
.project-description h5 i{
    color: #1daf2a;
    font-size: 16px;
}

.cs-title-portfolio {
    padding-bottom: 70px;
}
.cs-title-portfolio .cs-section-bdr {
    left: 340px;
}
.cs-title-portfolio .portfolio-title {
    background: #1A1A1A;
    padding: 20px 20px 20px 30px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-title-portfolio .portfolio-title:hover {
    background: #C6A47E;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-title-portfolio .portfolio-title h4 {
    margin-bottom: 0;
    font-weight: 400;
    line-height: 0.8;
}
.cs-title-portfolio .portfolio-title h4 a{
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    letter-spacing: 3px;
    color: #ffffff;
    line-height: 24px;
}
.cs-title-portfolio .portfolio-title p {
    font-size: 9px;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 3px;
}
.cs-title-portfolio .action-btn a {
    color: #ffffff;
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    margin: auto;
    top: 60px;
}
.cs-title-portfolio .action-btn a:focus {
    outline: none;
}

/* 
====================================================================
    28. Portfolio Details css start
====================================================================
*/
.cs-portfolio-details-area {
    width: 100%;
    padding: 80px 0 50px;
}
.cs-portfolio-details-area .cs-portfolio-col {
    margin-bottom: 30px;
}
.cs-portfolio-details-area .cs-portfolio-col h3{
    font-family: 'Oswald', sans-serif;
    text-transform: capitalize;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 1px;
 }
.cs-portfolio-details-area .cs-portfolio-col h6 {
    color: #c6a47e;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 1px;
    margin-bottom: 25px;
 }
 .cs-portfolio-details-area .cs-portfolio-col h5 {
    letter-spacing: 1px;
 }
.cs-portfolio-details-area .cs-portfolio-col h5 i {
    color: #663594;
    margin-right: 5px;
  }
.cs-portfolio-details-area .cs-portfolio-col span {
    font-family: 'Work Sans', sans-serif;
    font-size: 16px;
}

/* 
====================================================================
    29. Error css start
====================================================================
*/
.cs-error-area {
    padding: 80px 0;
    text-align: center;
}
.cs-error-area h2 {
    font-size: 36px;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 5px;
    font-weight: bold;
    margin-bottom: 0;
}
.cs-error-area h2 span {
    color: #c6a47e;
}
.cs-big-text {
    position: relative;
}
.cs-big-text h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 300px;
    text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.86);
}
.cs-big-text h2 span {
    color: #c6a47e;
}
.cs-big-text img {
    width: 365px;
    height: 185px;
    position: absolute;
    left: 35%;
    top: 60%;
}
.cs-error-area h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 38px;
    font-weight: normal;
    margin-top: 60px;
}
.cs-error-area .cs-my-btn-black {
    padding: 10px 40px;
    margin-top: 20px;
}

/* 
====================================================================
    30. Contact css start
====================================================================
*/
.cs-contact-one {
    padding: 110px 0px 30px;
}
.cs-contact-col {
    margin-bottom: 50px;
}
.cs-contact-col .hexagon {
    text-align: center;
    padding-top: 15px;
    margin: auto;
    margin-bottom: 50px;
}
.cs-contact-col:hover .hexagon {
    background: #C6A47E;
}
.cs-contact-col:hover .hexagon:before {
    border-bottom: 25px solid #C6A47E;
}
.cs-contact-col:hover .hexagon:after {
    border-top: 25px solid #C6A47E;
}
.cs-contact-col .hexagon span {
    color: #ffffff;
    text-align: center;
}
.cs-contact-col h3{
    font-family: 'GothamBook';
    font-weight: 800;
    font-size: 16px;
    padding-top: 40px;
}
.cs-contact-col a {
    color: #373636;
}
.cs-contact-col a:hover {
    color: #C6A47E;
}
.cs-contact-one .cs-contact-field h5 {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: normal;
}
.cs-contact-two .map-section {
    margin-bottom: 80px;
}
.cs-map-area {
    padding-bottom: 50px;
}
.cs-contact-two h5 {
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: normal;
}

/* 
====================================================================
    31. Main Footer css start
====================================================================
*/
.cs-main-footer {
    padding: 80px 0px 0px;
    background: #f7f7f7;
}
.cs-footer-col {
    margin-bottom: 30px;
}
.cs-main-footer img {
    width: 160px;
    height: 42px;
}
.cs-main-footer ul li {
    float: left;
    margin: 0px 15px;
}
.cs-main-footer ul li a {
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
    color: #212227;
    font-weight: 600;
    font-size: 14px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-main-footer ul li a:hover {
    color: #c6a47e;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-main-footer .form-control {
    height: 35px;
    border: none;
    background: #F7F7F7;
    border-bottom: 1px solid #cccccc;
}
.cs-sent-btn {
    border-radius: 0px;
    border: none;
    background: #F7F7F7;
    border-bottom: 1px solid #cccccc;
}
.cs-sent-btn:hover {
    background: transparent;
    border-color: #cccccc;
}
.cs-main-footer .icon {
    font-size: 18px;
}

/* 
====================================================================
    32. Copyright css start
====================================================================
*/
.cs-copyright-area {
    padding: 10px 0px;
    background:#1a1a1a;
}
.cs-copyright-area h5 {
    
    font-size: 11px;
    margin-top: 5px;
    line-height: 22px;
    font-weight: normal;
}
.cs-copyright-area h5 a {
    font-family: 'GothamBook';
    font-size: 11px;
    color: #663594;
    font-weight: 900;
    letter-spacing: 1px;
}
.cs-copyright-area a i {
    font-size: 25px;
    color: #C0C0C0;
    margin-left: 20px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.cs-copyright-area a i:hover {
    color: #663594;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

/*** 
====================================================================
    33. Theme Margin And Padding
====================================================================

***/
.p20 {
    padding: 20px;
}

/*Padding None*/
.pln {
    padding-left: 0;
}
.prn {
    padding-right: 0;
}

.pbn {
    padding-bottom: 0;
}

/*Padding Top*/
.pt10 {
    padding-top: 10px;
}
.pt20 {
    padding-top: 20px;
}
.pt30 {
    padding-top: 30px;
}
.pt40 {
    padding-top: 40px;
}
.pt50 {
    padding-top: 50px;
}

/*Padding Bottom*/
.pb10 {
    padding-bottom: 10px;
}
.pb20 {
    padding-bottom: 20px;
}
.pb30 {
    padding-bottom: 30px;
}
.pb40 {
    padding-bottom: 40px;
}
.pb50 {
    padding-bottom: 50px;
}

/*padding Right*/
.prn {
    padding-right: 0;
}
.pr10 {
    padding-right: 10px;
}
.pr15 {
    padding-right: 15px;
}
.pr20 {
    padding-right: 20px;
}
.pr30 {
    padding-right: 30px;
}
.pr40 {
    padding-right: 40px;
}
.pr50 {
    padding-right: 50px;
}
.pr100 {
    padding-right: 100px;
}

/* padding left*/
.pln {
    padding-left: 0;
}
.pl10 {
    padding-left: 10px;
}
.pl15 {
    padding-left: 15px;
}
.pl20 {
    padding-left: 20px;
}
.pl30 {
    padding-left: 30px;
}
.pl40 {
    padding-left: 40px;
}
.pl50 {
    padding-left: 50px;
}
.pl100 {
    padding-left: 100px;
}
/*Margin None*/
.mln {
    margin-left: 0;
}
.mrn {
    margin-right: 0;
}
.mtn {
    margin-top: 0;
}
.mbn {
    margin-bottom: 0;
}
/* Margin Top*/
.mt10 {
    margin-top: 10px;
}
.mt15 {
    margin-top: 15px;
}
.mt20 {
    margin-top: 20px;
}
.mt30 {
    margin-top: 30px;
}
.mt40 {
    margin-top: 40px;
}
.mt50 {
    margin-top: 50px;
}

/*Margin Bottom*/
.mb10 {
    margin-bottom: 10px;
}
.mb15 {
    margin-bottom: 15px;
}
.mb20 {
    margin-bottom: 20px;
}
.mb30 {
    margin-bottom: 30px;
}
.mb40 {
    margin-bottom: 40px;
}
.mb50 {
    margin-bottom: 50px;
}


/* Margin Right*/
.mrn {
    margin-right: 0;
}
.mr10 {
    margin-right: 10px;
}
.mr15 {
    margin-right: 15px;
}
.mr20 {
    margin-right: 20px;
}
.mr30 {
    margin-right: 30px;
}
.mr40 {
    margin-right: 40px;
}
.mr50 {
    margin-right: 50px;
}

/* Margin Right*/
.mln {
    margin-left: 0;
}
.ml10 {
    margin-left: 10px;
}
.ml15 {
    margin-left: 15px;
}
.ml20 {
    margin-left: 20px;
}
.ml30 {
    margin-left: 30px;
}
.ml40 {
    margin-left: 40px;
}
.ml50 {
    margin-left: 50px;
}

/*
====================================================================
    Theme Magin And Padding css start
====================================================================*/
.mainlike {
    margin-left: auto;
    margin-right: auto;
    /* background-color: #e8f1f6; */
    text-align: center;
    margin-top: 91px;
    margin-bottom: -65px;
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;}
@media only screen and (max-width:480px) { 
.mainlike {
    margin-left:49px;
    margin-right: auto;
    /* background-color: #e8f1f6; */
    text-align: center;
    margin-top: 91px;
    margin-bottom: -65px;
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;}
}


.company_logo img {
    border: 1px solid #e8e8e9;
	
    height:109px;
    margin: 10px 0;
    opacity: 0.6;
    filter: alpha(opacity=60);
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 100%;
}
@media only screen and (max-width:480px) { 
    .company_logo img { margin-bottom: 20px }
}
.company_logo img:hover {
    -webkit-transform: translate3d(0px, -15px,  0px);
            transform: translate3d(0px, -15px,  0px);
    opacity: 1;
    filter: alpha(opacity=100);
}






@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css);
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);



span.icon {
	margin: 0 5px;
	color: #D64541;
}
h2 {
	color: #BDC3C7;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.mrng-60-top {
	margin-top: 60px;
}
/* Global Button Styles */
a.animated-button:link, a.animated-button:visited {
	position: relative;
	display: block;
	margin: 30px auto 0;
	padding: 10px 15px;
	color: #fff;
	font-size:14px;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	overflow: hidden;
	letter-spacing: .08em;
	border-radius: 0;
	text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
	content: "";
	position: absolute;
	height: 0%;
	left: 50%;
	top: 50%;
	width: 150%;
	z-index: -1;
	-webkit-transition: all 0.75s ease 0s;
	-moz-transition: all 0.75s ease 0s;
	-o-transition: all 0.75s ease 0s;
	transition: all 0.75s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
	color: #FFF;
	text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
	height: 450%;
}
a.animated-button:link, a.animated-button:visited {
	position: relative;
	display: block;
	margin: 30px auto 0;
	padding: 14px 15px;
	color: #fff;
	font-size:14px;
	border-radius: 0;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	overflow: hidden;
	letter-spacing: .08em;
	text-shadow: 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(0, 0, 0, 0.2);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
}

/* Victoria Buttons */

a.animated-button.victoria-one {
	border: 2px solid #D24D57;
}
a.animated-button.victoria-one:after {
	background: #D24D57;
	-moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
	transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
a.animated-button.victoria-two {
	border: 2px solid #D24D57;
}
a.animated-button.victoria-two:after {
	background: #D24D57;
	-moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
	transform: translateX(-50%) translateY(-50%) rotate(25deg);
}
a.animated-button.victoria-three {
	border: 2px solid #D24D57;
}
a.animated-button.victoria-three:after {
	background: #D24D57;
	opacity: .5;
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
a.animated-button.victoria-three:hover:after {
	height: 140%;
	opacity: 1;
}
a.animated-button.victoria-four {
	border: 2px solid #D24D57;
}
a.animated-button.victoria-four:after {
	background: #D24D57;
	opacity: .5;
	-moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
	-ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
	-webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
	transform: translateY(-50%) translateX(-50%) rotate(90deg);
}
a.animated-button.victoria-four:hover:after {
	opacity: 1;
	height: 600% !important;
}
/* Sandy Buttons */

a.animated-button.sandy-one {
	border: 2px solid #AEA8D3;
	color: #FFF;
}
a.animated-button.sandy-one:after {
	border: 3px solid #AEA8D3;
	opacity: 0;
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	
}
a.animated-button.sandy-one:hover:after {
	height: 120% !important;
	opacity: 1;
	color: #FFF;
}
a.animated-button.sandy-two {
	border: 2px solid #AEA8D3;
	color: #FFF;
}
a.animated-button.sandy-two:after {
	border: 3px solid #AEA8D3;
	opacity: 0;
	-moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
	-ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
	-webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
	transform: translateY(-50%) translateX(-50%) rotate(90deg);
}
a.animated-button.sandy-two:hover:after {
	height: 600% !important;
	opacity: 1;
	color: #FFF;
}
a.animated-button.sandy-three {
	border: 2px solid #AEA8D3;
	color: #FFF;
}
a.animated-button.sandy-three:after {
	border: 3px solid #AEA8D3;
	opacity: 0;
	-moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
	transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
a.animated-button.sandy-three:hover:after {
	height: 400% !important;
	opacity: 1;
	color: #FFF;
}
a.animated-button.sandy-four {
	border: 2px solid #AEA8D3;
	color: #FFF;
}
a.animated-button.sandy-four:after {
	border: 3px solid #AEA8D3;
	opacity: 0;
	-moz-transform: translateY(-50%) translateX(-50%) rotate(25deg);
	-ms-transform: translateY(-50%) translateX(-50%) rotate(25deg);
	-webkit-transform: translateY(-50%) translateX(-50%) rotate(25deg);
	transform: translateY(-50%) translateX(-50%) rotate(25deg);
}
a.animated-button.sandy-four:hover:after {
	height: 400% !important;
	opacity: 1;
	color: #FFF;
}
/* Gibson Buttons */

a.animated-button.gibson-one {
	border: 2px solid #65b37a;
	color: #FFF;
}
a.animated-button.gibson-one:after {
	opacity: 0;
	background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);
	background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);
	background-size: 10px 10px;
	-moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
	transform: translateX(-50%) translateY(-50%) rotate(25deg);
}
a.animated-button.gibson-one:hover:after {
	height: 600% !important;
	opacity: 1;
	color: #FFF;
}
a.animated-button.gibson-two {
	border: 2px solid #65b37a;
	color: #FFF;
}
a.animated-button.gibson-two:after {
	opacity: 0;
	background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);
	background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);
	background-size: 10px 10px;
	-moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
	transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
a.animated-button.gibson-two:hover:after {
	height: 600% !important;
	opacity: 1;
	color: #FFF;
}
a.animated-button.gibson-three {
	border: 2px solid #65b37a;
	color: #FFF;
}
a.animated-button.gibson-three:after {
	opacity: 0;
	background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);
	background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);
	background-size: 10px 10px;
	-moz-transform: translateX(-50%) translateY(-50%) rotate(90deg);
	-ms-transform: translateX(-50%) translateY(-50%) rotate(90deg);
	-webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
	transform: translateX(-50%) translateY(-50%) rotate(90deg);
}
a.animated-button.gibson-three:hover:after {
	height: 600% !important;
	opacity: 1;
	color: #FFF;
}
a.animated-button.gibson-four {
	border: 2px solid #65b37a;
	color: #FFF;
}
a.animated-button.gibson-four:after {
	opacity: 0;
	background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);
	background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);
	background-size: 10px 10px;
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%));
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
}
a.animated-button.gibson-four:hover:after {
	height: 600% !important;
	opacity: 1;
	color: #FFF;
}
/* Thar Buttons */

a.animated-button.thar-one {
	color: #fff;
	cursor: pointer;
	display: block;
	position: relative;
	border: 2px solid #F7CA18;
	transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
a.animated-button.thar-one:hover {
	color: #000 !important;
	background-color: transparent;
	text-shadow: none;
}
a.animated-button.thar-one:hover:before {
	bottom: 0%;
	top: auto;
	height: 100%;
}
a.animated-button.thar-one:before {
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	height: 0px;
	width: 100%;
	z-index: -1;
	content: '';
	color: #000 !important;
	background: #F7CA18;
	transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
a.animated-button.thar-two {
	color: #fff;
	cursor: pointer;
	display: block;
	position: relative;
	border: 2px solid #F7CA18;
	transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
a.animated-button.thar-two:hover {
	color: #000 !important;
	background-color: transparent;
	text-shadow: ntwo;
}
a.animated-button.thar-two:hover:before {
	top: 0%;
	bottom: auto;
	height: 100%;
}
a.animated-button.thar-two:before {
	display: block;
	position: absolute;
	left: 0px;
	bottom: 0px;
	height: 0px;
	width: 100%;
	z-index: -1;
	content: '';
	color: #000 !important;
	background: #F7CA18;
	transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
a.animated-button.thar-three {
	color: #663594;
    cursor: pointer;
    display: block;
    width:40%;
    position: relative;
    border: 1px solid #663594;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);}
	
a.animated-button.thar-three:hover {
	color: #000 !important;
	background-color:#663594;
	text-shadow: nthree;
}
a.animated-button.thar-three:hover:before {
	left: 0%;
	right: auto;
	width: 100%;
}
a.animated-button.thar-three:before {
	display: block;
	position: absolute;
	top: 0px;
	right: 0px;
	height: 100%;
	width: 0px;
	z-index: -1;
	content: '';
	color: #000 !important;
	background: #424141;
	transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
0s;
}
a.animated-button.thar-four {
	color: #fff;
	cursor: pointer;
	display: block;
	position: relative;
	border: 2px solid #F7CA18;
	transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
0s;
}
a.animated-button.thar-four:hover {
	color: #000 !important;
	background-color: transparent;
	text-shadow: nfour;
}
a.animated-button.thar-four:hover:before {
	right: 0%;
	left: auto;
	width: 100%;
}
a.animated-button.thar-four:before {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 0px;
	z-index: -1;
	content: '';
	color: #000 !important;
	background: #F7CA18;
	transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
0s;
}

.btns{width:17%}

#breif{
    height: 245px;
    background-image: url(../images/icon/MAPPLE.png);
    margin-bottom: -46px;
    display: block;
    margin: auto;
    width:25%;


}
	
.send_breif h2{text-align:center; color: #fff;}
.send_breif p{text-align:center; color: #fff;}
#centerbtn{
    margin-left: auto;
    margin-right: auto;
    /* background-color: #e8f1f6; */
    text-align: center;
    /* margin-top: 99px; */
    width: 18%;
    padding-right: 0px;
	margin-bottom: -22px;

}

.button{
	margin-left: auto;
    margin-right: auto;
    /* background-color: #e8f1f6; */
    text-align: center;
    /* margin-top: 99px; */
    width: 50%;
    padding-right: 0px;
	margin-bottom: -22px;}
	
.srv-bg{
    padding: 58px 0px;
    }
               
.service_page{
    margin-left: auto;
    margin-right: auto;
    /* background-color: #e8f1f6; */
    text-align: center;
    margin-top: 10px;
    margin-bottom: -65px;
    width: 833px;
    padding-right: 0px;
    padding-left: 0px;

}
.service_page p{text-align: center;}

.title_center h4{
    text-align: center;
    font-family: 'GothamMedium';
    font-weight: 400;
    font-size: 18px;
    color: #333;
    text-transform: inherit;}
.title_center p{
    text-align: center; 
    padding: 16px 17px;
    font-family: 'GothamBook';
    color: #848484;}
 
  
/*----------------------------------------->
================= @font face start=========>
------------------------------------------->
*/
    
@font-face {
    font-family: 'GothamBook';
    src : local('GothamBook'), url(../fonts/GothamBook.ttf) format('truetype')
}

@font-face {
    font-family: 'GothamMedium';
    src : local('GothamMedium'), url(../fonts/GothamMedium.otf) format('OpenType')
}

/*----------------------------------------->
================= @font face start=========>
------------------------------------------->
*/
.row-service{
    margin-right: 19px;
    margin-left: 19px;}

.image-size{    width: 117px;
    /* padding: 9px 8px; */
    margin-left: 113px;}
    
.service{-webkit-box-shadow: 0px 0px 33px -12px #333;background: white;margin-top:-309px;}
.srv_bg{width: 100%;height:390px; background:#fff; position:relative;margin-top: -140px;}

span h4{text-align: center; padding: 10px;font-size: 24px; }

.space{padding: 34px;}

.cs-about-box1{    position: relative;
    /* padding: 46px 118px 50px 30px; */}
.cs-about-box1 p {    position: relative; text-align: center;}

/*/// portfolio responsive ////*/

@media only screen and (max-width: 500px) {
.cs-about-box1 p {
   position: relative;
   text-align: center;
   padding: 26px 5px; 
    }}

.space_padding{padding:0px;}

@media only screen and (max-width: 500px) {
   .space_padding{padding: 34px;}
}



.portfolio{padding: 30px 10px;}
.portfolio h3,h1{
    text-align: center;
    font-family: 'GothamBook';
    font-size: 28px;}

/*** 
====================================================================
   map
====================================================================

***/

#map{
    width: 100%;
    height: 350px;
    background: #dedada;
    margin: 0;
    padding: 0;
}

.flaticon-message{width: 100px;}


    #background {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover;
}

.div_space{padding: 61px;}


#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  overflow: hidden;
  
  // Modernizr no-js fallback
  .no-js & {
    display: none;
  }
}


#loader {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: #16a085;
  animation: spin 1.7s linear infinite;
  z-index: 10000;
  
  &:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #e74c3c;
    animation: spin-reverse .6s linear infinite;
  }
  
  &:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f9c922;
    animation: spin 1s linear infinite;
  }
}

// Bourbon mixins
@include keyframes(spin) {
  0% { 
    @include transform(rotate(0deg));
  }
  100% {
    @include transform(rotate(360deg));
  }
}

@include keyframes(spin-reverse) {
  0% { 
    @include transform(rotate(0deg));
  }
  100% {
    @include transform(rotate(-360deg));
  }
}

#loader-wrapper .loader-section {
  position: fixed;
  top: 0;
  width: 51%;
  height: 100%;
  background: #222;
  z-index: 10;
}

#loader-wrapper .loader-section.section-left {
  left: 0;
}

#loader-wrapper .loader-section.section-right {
  right: 0;
}


.nav-tabs>li>a {
    margin-right: 10px;
    line-height: 1.42857143;
    border: 1px solid transparent;
    color: #636363;
    font-weight: 600;
    /* border-radius: 4px 4px 0 0; */
}

#grid{background-color:rgba(102, 53, 148, 0.84)}
#grid2{background-color: #663594;}

.grid-about{padding: 61px 41px;max-height: 281px;}

.grid-about h3{color:#fff;
             text-align: center;}
.grid-about p{color:#fff;
             text-align: center;}


.image-responsive{width: 100%;
    height: auto;
    }
.footer_about h3{color:#c8cacc;font-family: 'GothamBook';font-size: 14px;}
.about_footer p{ color: #e2dede;font-size: 15px;}

@media only screen and (max-width:911px){
    .about_footer p{ color:#9c9c9c; font-size: 12px; text-align: center}
}

.cs-footer-area{ padding: 59px 0px;
    background: #333333;
}

.quote{border: solid 2px #663594;
        padding:8px 66px;
       color:#fff; text-transform: uppercase;
       cursor: pointer;}


.footer-button{padding: 10px 0px;}
.normal-button{    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    color: white;}

a:hover {
    color:#663594;}

@import "http://fonts.googleapis.com/css?family=Raleway";
/*----------------------------------------------
CSS settings for HTML div Exact Center
------------------------------------------------*/

#abcd {
width:100%;
height:100%;
opacity:.95;
top:0;
left:0;
display:none;
position:fixed;
background: linear-gradient(to right, rgba(220, 105, 179, 0.55) , rgba(71, 142, 216, 0.44));
z-index: 10000;
overflow:auto
}

.quote-e-commerce {
border: solid 2px #ffffff;
    padding: 8px 23px;
    text-align: center;
    color: #fff;
    /* width: 29%; */
    max-width: 24%;
    text-transform: uppercase;
    cursor: pointer;
}

@media only screen and (max-width: 910px) {
  .quote-e-commerce {
border: solid 2px #ffffff;
    padding: 8px 23px;
    text-align: center;
    color: #fff;
    /* width: 29%; */
    max-width: 30%;
    text-transform: uppercase;
    cursor: pointer;
}  
    
    
}

@media only screen and (max-width: 500px) {
.quote-e-commerce {
border: solid 2px #ffffff;
    padding: 8px 23px;
    text-align: center;
    color: #fff;
    /* width: 29%; */
    max-width: 76%;
    text-transform: uppercase;
    cursor: pointer;
}   
}




#abc {
width:100%;
height:100%;
opacity:.95;
top:0;
left:0;
display:none;
position:fixed;
background: linear-gradient(to right, rgba(220, 105, 179, 0.55) , rgba(71, 142, 216, 0.44));
z-index: 10000;
overflow:auto
}
.fa-times{
    font-size: 28px;
    padding: 0px 0px;
    float: right;
    color: #ddd;}


.fa-times #close {
position:absolute;
right:-14px;
top:-14px;
cursor:pointer
}



div#popupContact {
position:absolute;
left:50%;
top:17%;
margin-left:-202px;
font-family:'Raleway',sans-serif
}
#form-popup {
max-width: 403px;
    min-width: 263px;
    padding: 48px 33px;
    /* border: 2px solid gray; */
    border-radius: 10px;
box-shadow: 0px -1px 20px 5px #545454;
    font-family: raleway;
    background-color: #663594;
}
#form-popup h2{
        text-align: center;
    text-transform: inherit;
font-size: 24px;
    color: #fcf9fa;
    font-family: sans-serif;
padding: 23px 0px;
}


#form-popup p {
    /* margin: 0; */
    padding: 0;
font-size: 14px;
    margin-top: -33px;
    line-height: 24px;
    color: #ffffff;
    font-family: 'GothamBook';
    text-align: center;}


#plan{padding: 10px 10px;
    width: 100%;
    margin: 18px 0px;}
.close{width: 100%;background-color: aquamarine;}


input[type=text] {
width: 100%;
padding: 7px;
margin-top: 17px;
border: 1px solid #ccc;
padding-left: 40px;
font-size: 13px;
font-family: raleway;
}
#name-popup {
background-image:url(../images/name.jpg);
background-repeat:no-repeat;
background-position:5px 7px
}
#email-popup {
background-image:url(../images/email.png);
background-repeat:no-repeat;
background-position:5px 7px
}
.textarea-popup {
background-image:url(../images/msg.png);
background-repeat:no-repeat;
background-position:5px 7px;
width:100%;
height:95px;
padding:10px;
resize:none;
margin-top:30px;
border:1px solid #ccc;
padding-left:40px;
font-size:16px;
font-family:raleway;
margin-bottom:30px
}
#submit {
    text-decoration: none;
    width: 100%;
    text-align: center;
    margin: 10px 0px;
    display: block;
    background-color: #663594;
    color: #fff;
    border: 1px solid #dedede;
    padding: 10px 0;
    font-size: 20px;
    cursor: pointer;
}
textarea {
overflow: auto;
padding: 10px;
margin: 14px 0px;
width: 100%;
max-width: 338px;
}

#popup {
width:100%;
padding: 7px 2px;
border: solid 2px;
background-color: #6141a2;
color:#fff;
margin-top: 41px;
font-family:'Raleway',sans-serif;
font-size:18px;
cursor:pointer
}


/* Toggle this class - hide and show the popup */
#form-popup {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 3s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}



.colse .form-popup-out   {
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
}

@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

.service_main_title h3{
    font-size: 54px;
    font-weight: 600;
    text-transform: inherit;
    padding: 16px 0px;
    
}

.service_main_title_second h3{
    font-size: 31px;
    font-weight: 600;
    text-transform: inherit;
    padding: 16px 0px;
    
}


.list_style ul{
    margin: 0;
    padding: 35px 27px;
    list-style-type: none;
    /* margin: 10px; */
    line-height: 34px;
    font-size: 17px;
    color: #717070;
}
.service_p p{padding: 0px 17px;}





.list-s2 li span {
    font-size: 16px;
    color: #5e707d;
    padding: 8px 0;
    position: relative;
    padding-left: 20px;
    display: inline-block;
}

.list-s2 li span:before {
    position: absolute;
    left: 0;
    top: 17px;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #8e3e8a;
    background: #fff;
    -webkit-transition: all 0.3s ease-out 0s;
    -moz-transition: all 0.3s ease-out 0s;
    -ms-transition: all 0.3s ease-out 0s;
    -o-transition: all 0.3s ease-out 0s;
    transition: all 0.3s ease-out 0s;
}

.list-s2 li span:hover {
    color: #8e3e8a;
}

.list-s2 li span:hover:before {
    background: #8e3e8a;
}


/*** 
====================================================================
   E-commerce page
====================================================================

***/

.ec-head{

padding: 129px 28px 46px;
 }

.content-padding p,h2{    color: #d2d3d4;
    margin: 26px 29px 10px 2px;
    text-transform: inherit;
    font-size: 24px;
    text-align: justify;}

@media only screen and (max-width: 991px) {
.content-padding p, h2 {
    color: aliceblue;
    margin: 27px 0px 28px 2px;
    text-align: justify;
    word-spacing: -2px;
    text-transform: inherit;}
}

.responsive{margin: 0px 15px;}
/*** ---------------------------------------------------**/
.ec-color{
    color: #fff;
    background-color: #663594;}
.p_tag{color:#cbcbcb;}

.ec_headline  h2{color:#111;}


.content-padd{    
    color: #111;
    margin: 141px 0px 179px 202px;
    text-transform: inherit;
    text-align: justify;}
.center-div
{
  margin: 0 auto;
  width: 264px;
  height: 57px;;
  border-radius: 3px;
  margin-top: 43px;
}

@media only screen and (max-width: 991px) {
.content-padd{    
    color: #111;
    margin: 67px 8px 39px 24px;
}