/*
 * Font-Family : Popins
 * Base Color : #666666
 * Headding Color : #222
 * Line-height : 30px
 * Font-size : 15px Regular
 * Section Padding : 110px
 * Subtitle : 16px Light, line-height 30px
 * Section Title : 24px bold, Letter spacing 40
 * Button: font-size:12px, spacing 140


    css index

    01. Welcome Area CSS
    02. Services Section CSS 
    03.  Our Work Area CSS
    04.  Pricing Section CSS
    05. Brand Area CSS
    06. Footer Area CSS
    07.  About Page CSS
    08. Our Team Section CSS
    09. Clients Reviews Area CSS
    10. CTA Section CSS
    11. Services Details CSS
    12. Work Details CSS
    13. Contact Page CSS
    14. Services Page CSS
    15.  Contact page CSS

 */

@import url(../bootstrap.min.css);
@import url(../icofont.css);
@import url(../owl.carousel.css);
@import url(../animate.css);
body {
    color: #666666;
    line-height: 30px;
    font-weight: 400;
   /* font-size: 15px;*/
    font-family: 'Poppins', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #222222;
    margin: 0 0 15px;
    font-weight: 700;
}

a:focus,
a:hover,
a:visited,
input,
.contact-page-main-section .form-contents .contact-form-elements textarea,
input:hover,
.contact-page-main-section .form-contents .contact-form-elements textarea:hover,
input:focus,
.contact-page-main-section .form-contents .contact-form-elements textarea:focus,
input:active,
.contact-page-main-section .form-contents .contact-form-elements textarea:active,
select {
    text-decoration: none;
    outline: none;
}

.fR {
    float: right;
}

.fL {
    float: left;
}

.static {
    position: static !important;
}

.noPaddL {
    padding-left: 0px !important;
}

.ml-15-minus {
    margin-left: -15px !important;
}

.view-btn {
    color: #707070;
    border: 1px solid #bcbcbc;
    padding: 11px 60px;
    border-radius: 30px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    vertical-align: middle;
}

.view-btn:after {
    background: #19b5fe;
    content: "";
    height: 200px;
    left: 50%;
    position: absolute;
    top: -20px;
    width: 50px;
    z-index: -1;
    transition: transform .5s ease-in-out, transform .5s ease-in-out;
    visibility: hidden;
    opacity: 0;
}

.view-btn:hover:after {
    transform: rotate(180deg) scale(2.5);
    visibility: visible;
    opacity: 1;
    width: 200px;
}

.view-btn:hover {
    color: #fff;
    border-color: #19b5fe;
}

img {
    max-width: 100%;
}

a,
span {
    display: inline-block;
}

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

.sp90 {
    padding: 90px 0;
}

.spb90 {
    padding-bottom: 100px;
}

.spt90 {
    padding-top: 100px;
}

.section-title {
    margin-bottom: 72px;
}

.section-title h2 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 40;
    text-transform: uppercase;
}

.section-title .sub-title {
    font-size: 16px;
    font-weight: 300;
    margin-bottom: 0px;
    margin-bottom: 15px;
    display: block;
    line-height: 17px;
}

.sub-title {
    font-size: 16px;
}

.upx-button {
    font-size: 12px;
    text-transform: uppercase;
    display: inline-block;
    font-weight: 400;
    line-height: 22px;
}

.overlay {
    position: relative;
    z-index: 1;
}

.overlay:after {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    content: "";
    background: #000000;
    opacity: .73;
    z-index: -1;
}



/* **************************
    01. Welcome Area CSS
**************************** */

.welcome-area {
    position: relative;
}

.welcome-area.page {
    background-position: top left;
    background-attachment: fixed;
    background-repeat: no-repeat;
    height: 350px;
}

.welcome-area.page .page-title {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.welcome-area.page .page-title h2 {
    font-size: 43px;
    color: #fefefe;
    font-weight: 300;
    padding-top: 50px;
}

.welcome-area.page .page-title ul.upx-bradcumbs li,
.welcome-area.page .page-title ul li.upx-bradcumbs li,
ul .welcome-area.page .page-title li.upx-bradcumbs li {
    display: inline-block;
    position: relative;
    padding: 0 9px;
}

.welcome-area.page .page-title ul.upx-bradcumbs li:after,
.welcome-area.page .page-title ul li.upx-bradcumbs li:after,
ul .welcome-area.page .page-title li.upx-bradcumbs li:after {
    position: absolute;
    right: -8px;
    top: 0;
    content: "-";
    z-index: 99;
    color: #fff;
    font-size: 15px;
}

.welcome-area.page .page-title ul.upx-bradcumbs li:last-child:after,
.welcome-area.page .page-title ul li.upx-bradcumbs li:last-child:after,
ul .welcome-area.page .page-title li.upx-bradcumbs li:last-child:after {
    display: none;
}

.welcome-area.page .page-title ul.upx-bradcumbs li a,
.welcome-area.page .page-title ul li.upx-bradcumbs li a,
ul .welcome-area.page .page-title li.upx-bradcumbs li a {
    color: #c5c5c5;
}

.welcome-area.page .page-title ul.upx-bradcumbs li a:hover,
.welcome-area.page .page-title ul li.upx-bradcumbs li a:hover,
ul .welcome-area.page .page-title li.upx-bradcumbs li a:hover {
    color: #19b5fe;
}

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

.welcome-area .header-top .logo {
    padding: 50px 0;
    display: inline-block;
}

.welcome-area .slider-area .item {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.welcome-area .slider-area .item .slider-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 645px;
    font-size: 19px;
    color: #c5c5c5;
}

@media only screen and (min-width: 1600px) {
    .welcome-area .slider-area .item .slider-content {
        height: 750px;
    }
}

.welcome-area .slider-area .item .slider-content h1 {
    color: #fefefe;
    font-size: 76px;
    font-weight: 300;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .welcome-area .slider-area .item .slider-content h1 {
        font-size: 30px;
    }
}

.welcome-area .slider-area .item .slider-content p {
    margin-bottom: 45px;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .welcome-area .slider-area .item .slider-content p {
        font-size: 14px;
        line-height: 24px;
    }
}

.welcome-area .slider-area .item .slider-content .blue-btn {
    background: #19b5fe;
    border-radius: 30px;
    color: #fff;
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 22px;
    padding: 14px 65px;
    border: 3px solid transparent;
    transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
}

.welcome-area .slider-area .item .slider-content .blue-btn:hover {
    background: transparent;
    border: 3px solid #fff;
}

.welcome-area .slider-area .owl-controls {
    bottom: 60px;
    display: inline-block;
    left: 50%;
    margin-left: -570px;
    position: absolute;
    text-align: center;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .welcome-area .slider-area .owl-controls {
        margin-left: -465px;
    }
}

.welcome-area .slider-area .owl-controls .owl-dot {
    display: inline-block;
    height: 10px;
    width: 10px;
    background: #fff;
    margin: 0 4px;
    border-radius: 50%;
    transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    border: 3px solid transparent;
}

.welcome-area .slider-area .owl-controls .owl-dot.active,
.welcome-area .slider-area .owl-controls .ourwork-section .work-item-menu li.owl-dot:hover,
.ourwork-section .work-item-menu .welcome-area .slider-area .owl-controls li.owl-dot:hover {
    border: 3px solid #19b5fe;
}

.main-menu {
    text-align: right;
    position: relative;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .main-menu .navbar-header .navbar-toggle {
        border: 1px solid #fff;
        color: #fff;
        display: inline-block;
        float: none;
        height: 35px;
        margin: 0;
        padding: 0;
        position: absolute;
        z-index: 999;
        right: 0;
        top: -86px;
        width: 45px;
    }
    .main-menu .navbar-header .navbar-toggle i {
        line-height: 22px;
    }
}

.main-menu ul.nav.navbar-nav,
.main-menu ul li.nav.navbar-nav,
ul .main-menu li.nav.navbar-nav {
    float: none;
    text-align: right;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .main-menu ul.nav.navbar-nav,
    .main-menu ul li.nav.navbar-nav,
    ul .main-menu li.nav.navbar-nav {
        background: #fff;
        text-align: center;
    }
}

.main-menu ul.nav.navbar-nav li,
.main-menu ul li.nav.navbar-nav li,
ul .main-menu li.nav.navbar-nav li {
    float: none;
    position: relative;
    display: inline-block;
}

.main-menu ul.nav.navbar-nav li i,
.main-menu ul li.nav.navbar-nav li i,
ul .main-menu li.nav.navbar-nav li i {
    color: #fff;
    font-size: 12px;
    position: absolute;
    right: 0;
    top: 46%;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .main-menu ul.nav.navbar-nav li i,
    .main-menu ul li.nav.navbar-nav li i,
    ul .main-menu li.nav.navbar-nav li i {
        display: none;
    }
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .main-menu ul.nav.navbar-nav li,
    .main-menu ul li.nav.navbar-nav li,
    ul .main-menu li.nav.navbar-nav li {
        display: block;
    }
}

.main-menu ul.nav.navbar-nav li a,
.main-menu ul li.nav.navbar-nav li a,
ul .main-menu li.nav.navbar-nav li a {
    font-size: 13px;
    color: #ffffff;
    font-weight: 500;
    padding: 52px 26px;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .main-menu ul.nav.navbar-nav li a,
    .main-menu ul li.nav.navbar-nav li a,
    ul .main-menu li.nav.navbar-nav li a {
        color: #19b5fe;
    }
}

.main-menu ul.nav.navbar-nav li a:focus,
.main-menu ul li.nav.navbar-nav li a:focus,
ul .main-menu li.nav.navbar-nav li a:focus,
.main-menu ul.nav.navbar-nav li a:hover,
.main-menu ul li.nav.navbar-nav li a:hover,
ul .main-menu li.nav.navbar-nav li a:hover {
    background: none;
}

.main-menu ul.nav.navbar-nav li a:hover,
.main-menu ul li.nav.navbar-nav li a:hover,
ul .main-menu li.nav.navbar-nav li a:hover {
    color: #19b5fe;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .main-menu ul.nav.navbar-nav li a,
    .main-menu ul li.nav.navbar-nav li a,
    ul .main-menu li.nav.navbar-nav li a {
        padding: 10px 0;
    }
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .main-menu .navbar-nav.nav {
        text-align: left !important;
    }
    .main-menu .navbar-nav.nav li {
        border-left: 4px solid #19b5fe;
        padding-left: 30px;
        border-top: 1px solid #eee;
        border-botom: 1px solid #eee;
    }
    .main-menu .navbar-nav.nav li.upx-drop-parent {
        position: relative;
        z-index: 1;
    }
    .main-menu .navbar-nav.nav li.upx-drop-parent.menu-close::after,
    .main-menu .navbar-nav.nav li.upx-drop-parent::after {
        content: "ï‚¥";
        font-family: icofont;
        font-size: 12px;
        position: absolute;
        right: 30px;
        top: 5px;
        z-index: -1;
    }
    .main-menu .navbar-nav.nav li.upx-drop-parent:after {
        content: "\f074";
        color: #19b5fe;
    }
    .main-menu .navbar-nav.nav li.upx-drop-parent ul.upx-dropdown li,
    .main-menu .navbar-nav.nav li.upx-drop-parent ul li.upx-dropdown li,
    ul .main-menu .navbar-nav.nav li.upx-drop-parent li.upx-dropdown li {
        padding-left: 0px;
        border-left: 0px solid;
    }
}

@media only screen and (min-width: 768px) {
    .main-menu .navbar-nav.nav li:hover .upx-dropdown {
        visibility: visible;
        opacity: 1;
        top: 80%;
    }
}

.main-menu .navbar-nav.nav .upx-dropdown {
    width: 100%;
    background: #fff;
    transition: none;
    -moz-transition: none;
    -o-transition: none;
}

@media only screen and (min-width: 768px) {
    .main-menu .navbar-nav.nav .upx-dropdown {
        transition: 0.4s;
        -moz-transition: 0.4s;
        -o-transition: 0.4s;
        left: 0;
        opacity: 0;
        position: absolute;
        top: 130%;
        visibility: hidden;
        width: 220px;
    }
}

.main-menu .navbar-nav.nav .upx-dropdown li {
    display: block !important;
    border-bottom: 1px solid #eee;
    transition: all 0.3s ease 0s;
}

.main-menu .navbar-nav.nav .upx-dropdown li a {
    display: block;
    color: #222222;
    text-align: left;
    line-height: 20px;
    font-size: 12px;
}

@media only screen and (min-width: 768px) {
    .main-menu .navbar-nav.nav .upx-dropdown li a {
        padding: 15px 0px 15px 25px !important;
        text-align: left;
    }
}

.main-menu .navbar-nav.nav li:nth-last-child(1) .upx-dropdown,
.main-menu .navbar-nav.nav li:nth-last-child(2) .upx-dropdown {
    left: auto;
    right: 0px;
}

.main-menu .search {
    position: absolute;
    right: 0;
    top: 48px;
    font-size: 13px;
    color: #19b5fe;
    cursor: pointer;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .main-menu .search {
        right: 75px;
        top: -84px;
    }
}

.main-menu .search .search-box {
    background: #fff none repeat scroll 0 0;
    height: 60px;
    padding: 12px;
    position: absolute;
    right: -100%;
    top: 160%;
    width: 250px;
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .main-menu .search .search-box {
        right: -60px;
    }
}

.main-menu .search .search-box.show-search-box {
    visibility: visible;
    opacity: 1;
}

.main-menu .search .search-box input,
.main-menu .search .search-box .contact-page-main-section .form-contents .contact-form-elements textarea,
.contact-page-main-section .form-contents .contact-form-elements .main-menu .search .search-box textarea {
    float: left;
}

.main-menu .search .search-box input[type="text"],
.main-menu .search .search-box .contact-page-main-section .form-contents .contact-form-elements textarea[type="text"],
.contact-page-main-section .form-contents .contact-form-elements .main-menu .search .search-box textarea[type="text"] {
    width: calc(100% - 45px);
    border: 1px solid #e8e8e8;
    font-size: 12px;
    padding: 0 5px;
    height: 34px;
}

.main-menu .search .search-box .submit-btn {
    width: 40px;
    height: 34px;
    margin-left: 5px;
    float: left;
    position: relative;
    border: 1px solid #e8e8e8;
}

.main-menu .search .search-box .submit-btn:after {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    content: "\edef";
    font-family: icofont;
    text-align: center;
    line-height: 34px;
    font-size: 12px;
}

.main-menu .search .search-box .submit-btn input[type="submit"],
.main-menu .search .search-box .submit-btn .contact-page-main-section .form-contents .contact-form-elements textarea[type="submit"],
.contact-page-main-section .form-contents .contact-form-elements .main-menu .search .search-box .submit-btn textarea[type="submit"] {
    text-indent: -99999px;
    width: 100%;
    background: transparent;
    border: none;
    position: relative;
    z-index: 9999;
}



/* **************************
02. Services Section CSS 
**************************** */

.services-section .sin-service {
    color: #6c6c6c;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .services-section .sin-service {
        margin-bottom: 40px;
    }
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .services-section .sin-service {
        margin-bottom: 40px;
    }
}

.services-section .sin-service .service-icon {
    display: block;
    margin-bottom: 25px;
    height: 50px;
}

.services-section .sin-service .service-icon img {
    max-width: 100%;
}

.services-section .sin-service a {
    display: block;
}

.services-section .sin-service .service-title {
    font-weight: 500;
    color: #3d3c3c;
}

.services-section .sin-service p {
    margin-bottom: 0;
}



/* **************************
03.  Our Work Area CSS
**************************** */

.ourwork-section {
    overflow: hidden;
}

.ourwork-section .work-item-menu {
    text-align: center;
}

.ourwork-section .work-item-menu li {
    display: inline-block;
    color: #6c6c6c;
    cursor: pointer;
    font-size: 12px;
    padding: 0 17px 40px;
    position: relative;
    transition: all 0.4s ease-in-out 0s;
    -moz-transition: all 0.4s ease-in-out 0s;
    -o-transition: all 0.4s ease-in-out 0s;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .ourwork-section .work-item-menu li {
        font-size: 11px;
    }
}

.ourwork-section .work-item-menu li:after {
    position: absolute;
    left: 100%;
    top: 0;
    content: "-";
}

.ourwork-section .work-item-menu li:last-child:after {
    display: none;
}

.ourwork-section .work-item-menu li.active,
.ourwork-section .work-item-menu li:hover {
    color: #19b0f7;
}

.ourwork-section .work-items-wrapper {
    margin-bottom: 30px;
}

.ourwork-section .work-items-wrapper .work-item-wrap {
    margin: 0 -20px;
}

.ourwork-section .work-items-wrapper .work-item-wrap .sin-work-item {
    width: 35%;
    margin-bottom: 20px;
    padding: 0 10px;
    position: relative;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .ourwork-section .work-items-wrapper .work-item-wrap .sin-work-item {
        width: 100%;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .ourwork-section .work-items-wrapper .work-item-wrap .sin-work-item {
        width: 33%;
    }
}

@media only screen and (min-width: 1200px) and (max-width: 6000px) {
    .ourwork-section .work-items-wrapper .work-item-wrap .sin-work-item {
        width: 33%;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .ourwork-section .work-items-wrapper .work-item-wrap .sin-work-item {
        width: 33%;
    }
}

.ourwork-section .work-items-wrapper .work-item-wrap .sin-work-item:hover .work-hover {
    visibility: visible;
    transform: rotate(0);
    opacity: 1;
}

.ourwork-section .work-items-wrapper .work-item-wrap .sin-work-item .work-hover {
    background: rgba(255, 255, 255, 0.91);
    content: "";
    display: block;
    height: calc(100% - 60px);
    left: 30px;
    position: absolute;
    top: 30px;
    width: calc(100% - 60px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: flex-end;
    -ms-flex-pack: flex-end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    transform: rotate3d(1, -1, 0, 100deg);
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
}

.ourwork-section .work-items-wrapper .work-item-wrap .sin-work-item .work-hover:hover {
    cursor: url(../../img/icons/plus.png), auto;
}

.ourwork-section .work-items-wrapper .work-item-wrap .sin-work-item .work-hover .work-excerpt {
    padding: 0 0 30px 40px;
}

.ourwork-section .work-items-wrapper .work-item-wrap .sin-work-item .work-hover .work-excerpt h4 {
    color: #121212;
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .ourwork-section .work-items-wrapper .work-item-wrap .sin-work-item .work-hover .work-excerpt h4 {
        font-size: 12px;
    }
}

.ourwork-section .work-items-wrapper .work-item-wrap .sin-work-item .work-hover .work-excerpt span {
    font-size: 13px;
    color: #888888;
    font-weight: 300;
    line-height: 20px;
}

.ourwork-section .work-items-wrapper .work-item-wrap .sin-work-item img {
    width: 100%;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .ourwork-section .work-items-wrapper .work-item-wrap .sin-work-item.small-work-item {
        width: 100%;
    }
}



/* **************************
    04.  Pricing Section CSS
**************************** */

.pricing-section .sin-pricing {
    background: #f3f3f3;
    padding: 33px 0;
    margin: 0 30px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .pricing-section .sin-pricing {
        margin-bottom: 40px;
    }
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .pricing-section .sin-pricing {
        margin-bottom: 40px;
    }
}

.pricing-section .sin-pricing.special {
    background: #232323;
}

.pricing-section .sin-pricing.special .price-status {
    color: #a1a1a1;
}

.pricing-section .sin-pricing.special .price {
    color: #ffffff;
}

.pricing-section .sin-pricing.special .pricing-body span {
    color: #ffffff;
}

.pricing-section .sin-pricing.special .pricing-body:after {
    background: #555555;
}

.pricing-section .sin-pricing.special .price-button {
    color: #fff;
    border-color: #fff;
}

.pricing-section .sin-pricing .price-status {
    color: #696969;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 20px;
}

.pricing-section .sin-pricing .price {
    color: #262626;
    font-size: 42px;
    position: relative;
    display: inline-block;
    margin-bottom: 22px;
}

.pricing-section .sin-pricing .price .dollar {
    font-size: 18px;
    left: -15px;
    position: absolute;
    top: -13px;
}

.pricing-section .sin-pricing .pricing-body {
    padding-top: 30px;
    position: relative;
}

.pricing-section .sin-pricing .pricing-body:after {
    position: absolute;
    left: 30px;
    top: 0;
    height: 1px;
    width: calc( 100% - 60px);
    content: "";
    background: #e5e5e5;
}

.pricing-section .sin-pricing .pricing-body span {
    display: block;
    margin-bottom: 30px;
    font-weight: 300;
    color: #4c4c4c;
    line-height: 22px;
}

.pricing-section .sin-pricing .price-button {
    border: 1px solid #c6c6c6;
    border-radius: 30px;
    color: #6c6c6c;
    font-size: 13px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px 30px 8px;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
}

.pricing-section .sin-pricing .price-button:hover {
    color: #19b5fe;
    border-color: #19b5fe;
}



/* **************************
05. Brand Area CSS
**************************** */

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

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .brand-section {
        padding: 40px 0;
    }
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .brand-section .owl-item {
        text-align: center;
    }
}

.brand-section .owl-controls {
    display: none;
}



/* **************************
06. Footer Area CSS
**************************** */

.footer-section {
    background: #232323 none repeat scroll 0 0;
    color: #fff;
}

.footer-section .footer-top {
    padding: 95px 0;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .footer-section .footer-top {
        padding: 45px 0;
    }
}

.footer-section .footer-top .widget-title {
    font-size: 13px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 500;
}

.footer-section .footer-top ul li a,
ul .footer-section .footer-top li li a {
    color: #bdbdbd;
    font-size: 13px;
    transition: .4s;
}

.agency-html .sin-widget a:hover {
    color: #19b5fe;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .footer-section .footer-top .sin-widget {
        margin-bottom: 40px;
    }
}

.footer-section .foo-copyright-text {
    color: #bdbdbd;
    font-size: 12px;
    font-weight: 300;
    padding: 25px 0;
    position: relative;
}

.footer-section .foo-copyright-text:after {
    position: absolute;
    left: 0;
    top: 0;
    height: 1px;
    width: 100%;
    content: "";
    background: #343434;
}



/* **************************
07.  About Page CSS
**************************** */

.about-section .about-quote {
    font-size: 17px;
    position: relative;
    margin-bottom: 37px;
    display: block;
    line-height: 34px;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .about-section .about-quote {
        font-size: 13px;
    }
}

.about-section .about-quote:after {
    position: absolute;
    content: "\f0b1";
    font-family: icofont;
    color: #19b5fe;
    left: -20px;
    top: -8px;
    line-height: 31px;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .about-section .about-quote:after {
        left: -13px;
    }
}

.about-section .about-quote::before {
    position: absolute;
    bottom: 8px;
    right: -18px;
    content: "\f0b2";
    font-family: icofont;
    color: #19b5fe;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .about-section .about-quote::before {
        right: 95px;
        bottom: 5px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .about-section .about-thumb img {
        width: 100%;
    }
}



/* **************************
    08. Our Team Section CSS
**************************** */

.our-team-section {
    overflow: hidden;
}

.our-team-section .our-team-members {
    margin: 0 -0.5%;
}

.our-team-section .our-team-members .sin-member {
    float: left;
    margin: 0 0.5%;
    position: relative;
    width: 24%;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .our-team-section .our-team-members .sin-member {
        width: 100%;
        margin-bottom: 40px;
    }
}

.our-team-section .our-team-members .sin-member img {
    width: 100%;
}

.our-team-section .our-team-members .sin-member:hover .team-member-hover {
    transform: rotate(0deg);
    visibility: visible;
    opacity: 1;
}

.our-team-section .our-team-members .sin-member .team-member-hover {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transform: rotate3d(1, -1, 0, 100deg);
    transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
}

.our-team-section .our-team-members .sin-member .team-member-hover h4 {
    font-size: 16px;
    font-weight: 500;
    color: #505050;
    margin-bottom: 8px;
}

.our-team-section .our-team-members .sin-member .team-member-hover .member-role {
    color: #808080;
    display: block;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    margin-bottom: 20px;
}

.our-team-section .our-team-members .sin-member .team-member-hover .member-social-links a {
    display: inline-block;
    height: 27px;
    width: 27px;
    font-size: 12px;
    color: #222222;
    border: 1px solid #aaa9a9;
    line-height: 27px;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
}

.our-team-section .our-team-members .sin-member .team-member-hover .member-social-links a:hover {
    background: #19b5fe;
    color: #fff;
    border-color: #19b5fe;
}

.our-team-section .our-team-members .sin-member .team-member-hover:after {
    position: absolute;
    left: 13px;
    top: 13px;
    height: calc(100% - 26px);
    width: calc(100% - 26px);
    background: rgba(255, 255, 255, 0.91);
    content: "";
    z-index: -1;
}



/* **************************
09. Clients Reviews Area CSS
**************************** */

.client-reviews-section .client-reviews-wrap .sin-client-reviews img {
    height: 112px;
    width: 112px;
    border-radius: 50%;
    margin: 0 auto 35px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .client-reviews-section .client-reviews-wrap .sin-client-reviews .client-quote {
        font-size: 14px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .client-reviews-section .client-reviews-wrap .sin-client-reviews .client-quote {
        font-size: 12px;
    }
}

.client-reviews-section .client-reviews-wrap .sin-client-reviews .client-quote p {
    margin-bottom: 30px;
}

.client-reviews-section .client-reviews-wrap .sin-client-reviews .client-quote h4 {
    margin-bottom: 5px;
}

.client-reviews-section .client-reviews-wrap .sin-client-reviews .client-quote h4 {
    font-size: 16px;
    color: #505050;
    font-weight: 500;
    text-transform: uppercase;
}

.client-reviews-section .client-reviews-wrap .sin-client-reviews .client-quote .client-pos {
    font-size: 14px;
    color: #808080;
    font-weight: 300;
}

.client-reviews-section .client-reviews-wrap .owl-controls .owl-nav div {
    color: #222222;
    font-size: 20px;
    left: -37px;
    position: absolute;
    top: 30%;
    height: 37px;
    width: 37px;
    line-height: 37px;
    border: 1px solid #e5e5e5;
    text-align: center;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .client-reviews-section .client-reviews-wrap .owl-controls .owl-nav div {
        display: none !important;
    }
}

.client-reviews-section .client-reviews-wrap .owl-controls .owl-nav div.owl-next {
    left: auto;
    right: -37px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .client-reviews-section .client-reviews-wrap .owl-controls .owl-nav div {
        left: -10px;
    }
    .client-reviews-section .client-reviews-wrap .owl-controls .owl-nav div.owl-next {
        right: -10px;
    }
}



/* **************************
    10. CTA Section CSS
**************************** */

.cta-section {
    background: #19b5fe;
    padding: 40px 0;
}

.cta-section .cta-title {
    font-size: 24px;
    color: #ffffff;
    margin: 0;
    line-height: 47px;
    font-weight: 600;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .cta-section .cta-title {
        font-size: 23px;
    }
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .cta-section .cta-title {
        line-height: 26px;
        margin-bottom: 30px;
        text-align: center;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .cta-section .cta-title {
        font-size: 17px;
    }
}

.cta-section .cta-btn {
    background: #ffffff none repeat scroll 0 0;
    border-radius: 30px;
    color: #19b5fe;
    font-weight: 500;
    padding: 12px 50px;
    border: 1px solid transparent;
    transition: .4s;
}

.cta-section .cta-btn:hover {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: 1px solid #ffffff;
    color: #ffffff;
}



/* **************************
    11. Services Details CSS 
**************************** */

.services-details-section .service-sidebar .service-tabs {
    margin-bottom: 70px;
}

.services-details-section .service-sidebar .service-tabs li {
    display: block;
    width: 100%;
    border-top: 1px solid #e5e5e5;
    border-left: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    overflow: hidden;
}

.services-details-section .service-sidebar .service-tabs li.active,
.services-details-section .service-sidebar .service-tabs .ourwork-section .work-item-menu li:hover,
.ourwork-section .work-item-menu .services-details-section .service-sidebar .service-tabs li:hover {
    /*background: #19b5fe;*/
	background: #bfa453;
}

.services-details-section .service-sidebar .service-tabs li.active a,
.services-details-section .service-sidebar .service-tabs .ourwork-section .work-item-menu li:hover a,
.ourwork-section .work-item-menu .services-details-section .service-sidebar .service-tabs li:hover a {
    color: #fff;
}

.services-details-section .service-sidebar .service-tabs li:last-child {
    border-bottom: 1px solid #e5e5e5;
}

.services-details-section .service-sidebar .service-tabs li a {
    color: #666666;
    display: block;
    font-size: 17px;
    line-height: 30px;
    padding: 12px 23px 10px;
}

@media only screen and (min-width: 991px) {
    .services-details-section .service-sidebar .service-tabs li a {
        padding: 10px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .services-details-section .service-sidebar .service-tabs li a {
        font-size: 12px;
    }
}

.services-details-section .service-sidebar .service-tabs li a i {
    float: right;
    line-height: 28px;
}

.services-details-section .service-sidebar .reviews-widget .owl-controls {
    display: none;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .services-details-section .service-sidebar .reviews-widget {
        margin-bottom: 30px;
    }
}

.services-details-section .service-sidebar .reviews-widget .sin-widget-review {
    background: #222222;
    padding: 30px 30px 16px;
}

.services-details-section .service-sidebar .reviews-widget .sin-widget-review span {
    color: #a6a4a4;
    font-style: italic;
    line-height: 28px;
    margin-bottom: 20px;
    font-size: 14px;
    position: relative;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .services-details-section .service-sidebar .reviews-widget .sin-widget-review span {
        font-size: 11px;
    }
}

.services-details-section .service-sidebar .reviews-widget .sin-widget-review span:after {
    position: absolute;
    left: -15px;
    top: -8.5px;
    content: "\f0b1";
    font-family: icofont;
    font-style: normal;
    color: #19b5fe;
}

.services-details-section .service-sidebar .reviews-widget .sin-widget-review h5 {
    color: #fff;
    font-size: 14px;
    font-weight: 400;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .services-details-section .service-sidebar .reviews-widget .sin-widget-review h5 {
        font-size: 12px;
    }
}

.services-details-section .service-content .services-sin-details .service-medium-thumb {
    margin-bottom: 60px;
}

.services-details-section .service-content .services-sin-details .service-medium-thumb img {
   /* width: 100%;*/
}

.services-details-section .service-content .services-sin-details .service-details-excerpt {
    line-height: 35px;
}

.services-details-section .service-content .services-sin-details .service-details-excerpt p {
    margin-bottom: 0;
}



/* **************************
    12. Work Details CSS
**************************** */

.work-details-section .work-details-content .work-details-thumb {
    margin-bottom: 50px;
}

.work-details-section .work-details-content .work-details-thumb img {
    width: 100%;
}

.work-details-section .work-details-content .work-details-excerpt {
    padding-right: 40px;
    text-align: justify;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .work-details-section .work-details-content .work-details-excerpt {
        padding: 0 10px;
        font-size: 12px;
        text-align: left;
    }
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .work-details-section .work-details-sidebar {
        padding-left: 35px;
    }
}

.work-details-section .work-details-sidebar .work-sidebar-thumb {
    margin-bottom: 25px;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .work-details-section .work-details-sidebar .work-sidebar-thumb img {
        width: 100%;
    }
}

.work-details-section .work-details-sidebar .work-projects-details {
    margin-top: 58px;
}

.work-details-section .work-details-sidebar .work-projects-details ul li,
ul .work-details-section .work-details-sidebar .work-projects-details li li {
    font-size: 15px;
    color: #222222;
    font-weight: 500;
    display: block;
    overflow: hidden;
    margin-bottom: 15px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .work-details-section .work-details-sidebar .work-projects-details ul li,
    ul .work-details-section .work-details-sidebar .work-projects-details li li {
        font-size: 12px;
    }
}

.work-details-section .work-details-sidebar .work-projects-details ul li strong,
ul .work-details-section .work-details-sidebar .work-projects-details li li strong {
    padding: 0 11px;
}

.work-details-section .work-details-sidebar .work-projects-details ul li span.project-value,
ul .work-details-section .work-details-sidebar .work-projects-details li li span.project-value {
    font-size: 14px;
    color: #666666;
    font-weight: 400;
    display: inline-block;
    float: right;
    width: 60%;
}

.work-projects-details li span {
    font-size: 13px !important;
}

@media only screen and (min-width: 991px) and (max-width: 1199px) {
    .work-details-section .work-details-sidebar .work-projects-details ul li span.project-value,
    ul .work-details-section .work-details-sidebar .work-projects-details li li span.project-value {
        font-size: 11px;
    }
    .noPaddL {
        padding: 0;
    }
    .work-projects-details li span {
        font-size: 11px !important;
    }
}



/* **************************
    13. Contact Page CSS
**************************** */

.contact-page-main-section .form-contents .form-contents-top {
    margin-bottom: 40px;
}

.contact-page-main-section .form-contents .form-contents-top .sin-contact-element {
    overflow: hidden;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contact-page-main-section .form-contents .form-contents-top .sin-contact-element {
        margin-bottom: 30px;
    }
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .contact-page-main-section .form-contents .form-contents-top .sin-contact-element {
        margin-bottom: 30px;
    }
}

.contact-page-main-section .form-contents .form-contents-top .sin-contact-element .element-icon {
    float: left;
    margin-right: 20px;
}

.contact-page-main-section .form-contents .form-contents-top .sin-contact-element .element-excerpt,
.contact-page-main-section .form-contents .form-contents-top .sin-contact-element .element-excerpt a {
    color: #666666;
    font-size: 14px;
    line-height: 23px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contact-page-main-section .form-contents .form-contents-top .sin-contact-element .element-excerpt,
    .contact-page-main-section .form-contents .form-contents-top .sin-contact-element .element-excerpt a {
        padding-left: 85px;
        text-align: left;
    }
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .contact-page-main-section .form-contents .form-contents-top .sin-contact-element .element-excerpt,
    .contact-page-main-section .form-contents .form-contents-top .sin-contact-element .element-excerpt a {
        padding-left: 85px;
    }
}

.contact-page-main-section .form-contents .form-contents-top .sin-contact-element .element-excerpt a {
    padding-left: 0px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .contact-page-main-section .form-contents .form-contents-top .sin-contact-element .element-excerpt a {
        display: block;
    }
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
    .contact-page-main-section .form-contents .form-contents-top .sin-contact-element .element-excerpt a {
        display: block;
    }
}

.contact-page-main-section .form-contents .contact-form-elements input,
.contact-page-main-section .form-contents .contact-form-elements textarea {
    width: 100%;
    margin-bottom: 25px;
    height: 45px;
    font-size: 14px;
    padding: 0 18px;
    border: 1px solid #e5e5e5;
    font-size: 14px;
    color: #8e8d8d;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
}

.contact-page-main-section .form-contents .contact-form-elements textarea {
    height: auto;
    padding: 15px;
    margin-bottom: 50px;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
}

.contact-page-main-section .form-contents .contact-form-elements input[type="submit"],
.contact-page-main-section .form-contents .contact-form-elements textarea[type="submit"] {
    width: 192px;
    margin: 0 auto;
    background: #19b5fe;
    border: 0 solid;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    height: 48px;
    border-radius: 30px;
    padding: 4px 0 0;
}

.contact-page-main-section .form-contents .contact-form-elements input:focus,
.contact-page-main-section .form-contents .contact-form-elements textarea:focus,
.contact-page-main-section .form-contents .contact-form-elements textarea:focus {
    border-color: #19b5fe;
    box-shadow: 0 0 21px 5px rgba(0, 0, 0, 0.05);
}



/* **************************
    14. Services Page CSS 
**************************** */

.services-section-innerpage .sin-service {
    margin-bottom: 60px;
}

.services-section-innerpage .sin-service a {
    display: block;
}

.services-section-innerpage .sin-service .service-icon {
    height: 50px;
    display: block;
    margin-bottom: 25px;
}



/* **************************
    15.  Contact page CSS
**************************** */

.contact-form-elements #form-messages {
    position: relative;
    display: inline-block;
    text-align: center;
    font-size: 12px;
}

.contact-form-elements #form-messages.error {
    color: #ff0000;
}

.contact-form-elements #form-messages.error:after {
    left: -15px;
    position: absolute;
    top: -1px;
    content: "\f10e";
    font-size: 12px;
    font-family: icofont;
    color: #ff0000;
}

.contact-form-elements #form-messages.success {
    color: #19b5fe;
}

.contact-form-elements #form-messages.success:after {
    left: -15px;
    position: absolute;
    top: -1px;
    content: "\efac";
    font-size: 12px;
    font-family: icofont;
    color: #19b5fe;
}

.ourwork-section .section-title {
    margin-bottom: 65px;
}


.client-reviews-wrap {
    padding-bottom: 95px;
}


/*# sourceMappingURL=style.css.map */