/*
  Theme Name:Lander Multipurpose HTML5 template.
  Theme URL:http://demos.themepul.com/creative/
  Author: Themepul
  Author URI: http://themepul.com
  Description: Lander – A stunning Multipurpose HTML5.... Lender | Multiparpaas HTML5 template…. Lender is modern and exclusive HTML template suitable for agencies and freelancers. Lender was designed in best possible look with flat, clean and clear design that will make your website difference from others. In line with Modern Design Trends, Color Fresh and Dynamic, Creative + Detail Layouts with elegant look! This one will be an amazing choice! .
  Version: 1.0
*/


/****Gobla css*****/

a:focus,
a:hover:focus,
button:focus,
button:hover:focus {
    outline: none;
    text-decoration: none;
    color: #fff;
    border: none;
}

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

body {
    width: 100%;
    height: 100%
}

html,
body {
	font-family: 'PT Sans', sans-serif;
	font-size: 15px;
	line-height: 22px
}

a {
    color: #232323;
    outline: none;
}

a:hover {
    text-decoration: none;
    color: #5ed9e8
}

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

a,
#navigation a,
.header-search .search-box,
.btn.btn-buttons,
.btn.btn-no-bg,
header.header-sertion.on,
header.header-sertion,
.header-sertion.on .header-section-inner,
.header-section-inner,
.search-hidden button,
.search-hidden,
.portfolio-content a span,
.priceing-content,
.pricing-top,
.team-social .icon,
.team-items .owl-dot.active,
.team-items .owl-dot,
.blog-search #search-form > button,
.to-top:hover,
.to-top,
.team-section .owl-prev,
.team-section .owl-next {
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

a:hover,
#navigation a:hover,
.header-search .search-box:hover,
.btn.btn-buttons:hover,
.btn.btn-no-bg:hover,
.search-hidden button:hover,
.portfolio-content a span:hover,
.priceing-content:hover .pricing-top,
.priceing-content:hover .purchase-button,
.team-social .icon:hover,
.team-items .owl-dot.active:hover,
.team-items .owl-dot:hover,
.blog-search #search-form > button:hover,
.team-section .owl-prev:hover,
.team-section .owl-next:hover {
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

.no-margin {
    margin: 0px
}


/*** buttons ***/

.btn.btn-buttons {
    border-radius: 0;
    color: #ffffff;
    font-family: 'PT Sans', sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding: 13px 20px;
    text-transform: uppercase;
    background-color: #5ed9e8;
    outline: none;
    margin-right: 15px
}

.btn.btn-buttons:hover {
    background-color: #333;
}

.btn.btn-no-bg:hover {
    background-color: #5ed9e8;
    color: #fff;
    border-color: transparent
}

.btn.btn-no-bg {
    border: 2px solid #ffffff;
    border-radius: 0;
    color: #ffffff;
    font-family: 'PT Sans', sans-serif;
    font-size: 13px;
    font-weight: bold;
    padding: 12px 20px;
    text-transform: uppercase;
    outline: none;
}

.btn.submit-btn {
    border: 1px solid #999;
    border-radius: 0;
    color: #999;
    font-family: 'PT Sans', sans-serif;
    font-weight: bold;
    outline: medium none;
    padding: 16px 28px 11px 31px;
    text-transform: uppercase;
}

.btn.submit-btn:hover {
    background-color: #5ed9e8;
    border-color: transparent;
    color: #fff;
}


/*** end buttons ***/

.hadding.no-margin > span {
    font-family: 'PT Sans', sans-serif;
    font-size: 25px;
    font-weight: bold;
    text-transform: uppercase;
    position: relative
}

.hadding {
    margin-bottom: 40px;
}

.hadding-section {
    margin-top: 100px;
    text-align: center;
}

.hadding.no-margin > span::after {
    background-color: #5ed9e8;
    content: "";
    height: 2px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 38px;
    width: 80%;
}

.hadding-section > p {
    padding: 0 320px;
}


/** page loader ***/

body {
    width: 100%;
    overflow-x: hidden;
}


/*** end Gobla css ***/


/*** Home page two all color ***/

.home-2 #navigation a:hover,
.home-2 .header-search .search-box:hover,
.home-2 .design-icon,
.home-2 .develop-icon,
.home-2 .photography-icon,
.home-2 .portfolio-menu > li > span:hover,
.home-2 .team-sub-title,
.home-2 .blog-carousel .readmore,
.home-2 .blog-section a.all-items:hover,
.home-2 .footer-social > ul > li > a:hover,
.home-2 .copyright > a:hover,
.home-2 .blog-section a:hover {
    color: #fc8229;
}

.home-2 .service-items,
.home-2 .progress-bg::after,
.home-2 .testimonial-bg::after {
    background-color: rgba(255, 126, 32, 0.93)
}

.home-2 .btn.btn-buttons:hover {
    background-color: #333333;
}

.home-2 .btn.btn-no-bg:hover,
.home-2 .hadding.no-margin > span::after,
.home-2 .btn.btn-buttons,
.home-2 .nivo-control.active,
.home-2 .skillbar-bar,
.home-2 .priceing-content:hover .pricing-top,
.home-2 .priceing-content:hover .purchase-button,
.home-2 .team-social .icon,
.home-2 .team-items .owl-dot.active,
.home-2 .team-items .owl-dot,
.home-2 .blog-section .mata-date,
.home-2 .client-content .owl-dot.active > span::after,
.home-2 .btn.submit-btn:hover,
.home-2 .search-hidden button:hover,
.home-2 .team-section .owl-prev,
.home-2 .team-section .owl-next {
    background-color: #fc8229;
}

.home-2 .priceing-content:hover {
    border-color: #fc8229;
}

.home-2 h4.hadding-title > span {
    border-bottom: 2px solid #fc8229
}


/*** end Home page two all color ***/


/*** header section ***/

header.header-sertion.on {
    background-color: rgba(47, 51, 61, 0.81);
    border: transparent;
}

.header-sertion.on .header-section-inner {
    margin: 30px 0;
    transition: all 0.4s ease 0s;
}

header.header-sertion {
    position: fixed;
    width: 100%;
    z-index: 999;
}

.header-left,
.menuarea,
.header-search {
    display: inline-block;
}

.header-search .search-box {
    cursor: pointer;
    color: #ffffff;
}

.header-search .search-box:hover {
    color: #5ed9e8
}

.header-right {
    display: inline-block;
    float: right;
    text-align: right;
}

#navigation > li > ul a {
    text-transform: capitalize;
}

.menu-section {
    text-align: right;
}

#navigation > li {
    margin: 9px 16px 6px 0;
}

#navigation a {
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: normal;
    margin-left: 16px;
    text-transform: uppercase;
}

#navigation a:hover {
    color: #5ed9e8;
}

.header-section-inner {
    margin: 30px;
}

.home-1 header.header-sertion,
.home-2 header.header-sertion {
    position: fixed;
    width: 100%;
    z-index: 999;
}

.search-hidden {
    position: relative;
}

.search-form {
    position: absolute;
    right: 0;
    top: 30px;
}

.search-hidden input {
    border: transparent;
    min-width: 315px;
    padding: 10px 40px 10px 14px;
}

.search-hidden button {
    background-color: transparent;
    border: transparent;
    color: #999;
    padding: 10px 13px;
    position: absolute;
    right: 0;
}

.search-hidden button:hover {
    background-color: #5ed9e8;
    border: transparent;
    color: #fff;
}


/*** Slider section ****/

.slide-content {
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    text-align: center;
    top: 36%;
    width: 79%;
    z-index: 99;
}

.img-bg {
    background: rgba(0, 0, 0, 0.28);
    min-height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 6;
}


/*** contant **/

.slide-content > h2 {
   font-family: 'Oswald', sans-serif;
    font-size: 34px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

.slide-content > h2 {
   font-family: 'Oswald', sans-serif;
    font-size: 30px;
    font-weight: normal;
    letter-spacing: 0.3em;
    line-height: 45px;
    margin: 0;
    padding: 0;
    text-transform: uppercase;
}

.slide-content > p {
    font-size: 15px;
    line-height: 24px;
    margin: 0;
    padding: 20px 71px 55px;
}

section.slider-section {
    position: relative;
    top: 0;
    width: 100%;
}

section.slider-section img {
    height: 100%!important;
}

.nivoSlider img {
    height: 100%!important;
}


/*** Slider section ****/


/*** about section ***/


/** skill sectionr **/

.skill-section {
    padding-bottom: 100px;
    padding-top: 30px;
}

.skillbar {
    background-color: #e4e1e1;
    display: block;
    margin-top: 70px;
    position: relative;
    width: 100%;
}

.our-skill-content {
    padding-top: 40px;
}

.skillbar-title {
    color: #323232;
    font-size: 14px;
    font-weight: bold;
    left: 0;
    position: absolute;
    text-transform: uppercase;
    top: -38px;
}

.skillbar-title span {
   font-family: 'Oswald', sans-serif;
    font-size: 14px;
    font-weight: normal;
}

.skillbar-bar {
    background: #5ed9e8;
    height: 4px;
    transition: all 0.4s ease 0s;
    width: 0;
}

.skill-bar-percent {
    font-size: 11px;
    position: absolute;
}

.skill-bar-percent {
    color: #333;
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: normal;
    opacity: 0;
    padding: 0;
    position: absolute;
    text-align: center;
    top: -23px;
}

h4.hadding-title > span {
    border-bottom: 2px solid #5ed9e7;
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: normal;
    padding-bottom: 5px;
    text-transform: uppercase;
}

.about-section h4 {
    margin-bottom: 45px;
    margin-top: 35px;
}


/*** end about section ***/


/*** service section ****/

.service-section {
    line-height: 0;
}

.service-bg {
    background-image: url("../images/background/service-bg.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: inline-block;
    width: 100%;
}

.service-items {
    background-color: rgba(94, 217, 232, 0.93);
    float: right;
    padding: 0 0 25px;
    width: 50%;
}

.service-icon {
    background-color: #fff;
    display: inline-block;
    float: left;
    font-size: 20px;
    height: 50px;
    margin-top: 0px;
    padding: 9px;
    width: 50px;
    -webkit-transform: rotate(136deg);
    -moz-transform: rotate(136deg);
    -ms-transform: rotate(136deg);
    -o-transform: rotate(136deg);
    transform: rotate(136deg);
}

.design-icon,
.develop-icon,
.photography-icon {
    color: #5ed9e8;
    line-height: 30px;
    text-align: center;
    -webkit-transform: rotate(-136deg);
    -moz-transform: rotate(-136deg);
    -ms-transform: rotate(-136deg);
    -o-transform: rotate(-136deg);
    transform: rotate(-136deg);
}

.service-item-content .title {
    color: #fff;
    font-size: 18px;
    font-weight: normal;
    text-transform: uppercase;
    display: block;
}

.service-item-content {
    padding: 26px 2px 0 85px;
}

.service-item-content > p {
    color: #fff;
    line-height: 26px;
    margin-top: 26px;
}

.service-item {
    padding-left: 70px;
    padding-top: 60px;
}

.service-content {
    margin-top: 55px;
}


/*** service section ****/

.portfolio-links {
    bottom: 0;
    display: block;
    height: 135px;
    left: 0;
    margin: auto;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: 0;
    width: 198px;
}


/*** portfolio section ***/

.portfolio-item-content > img {
    width: 100%;
}

.portfolio-list .mix {
    display: none;
}

.portfolio-menu > li {
    cursor: pointer;
    display: inline-block;
  font-family: 'Oswald', sans-serif;
    font-size: 15px;
    text-transform: uppercase;
}

.portfolio-menu > li:last-child:after {
    content: "";
}

.portfolio-menu {
    margin-bottom: 50px;
    margin-top: 35px;
    text-align: center;
}

.portfolio-menu > li > span {
    margin: 0 20px;
}

.portfolio-menu > li::after {
    content: "|";
}


/*** hover***/

.portfolio-menu > li > span:hover {
    color: #5ed9e8;
}

.portfolio-title {
    text-transform: uppercase;
    font-weight: bold;
    margin: 5px;
    color: #fff;
}

.portfolio-item-content:hover .portfolio-content {
    display: block
}

.portfolio-content {
    display: none;
}

.portfolio-item-content {
    position: relative;
    display: block;
}

.home-2 .portfolio-item-content::before {
    background-color: rgba(252, 130, 41, 0.85)
}

.portfolio-item-content::before {
    background-color: rgba(108, 217, 229, 0.85);
    content: "";
    height: 100%;
    position: absolute;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    width: 100%;
}

.portfolio-item-content:hover::before {
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}

.portfolio-content {
    height: 100%;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
}

.portfolio-item.colmd-3 {
    padding: 0;
}

.portfolio-content a span {
    background: #fff none repeat scroll 0 0;
    border-radius: 100%;
    height: 45px;
    padding: 16px 1px;
    -webkit-transform: scale(4);
    -moz-transform: scale(4);
    -ms-transform: scale(4);
    -o-transform: scale(4);
    transform: scale(4);
    -webkit-transition: all 0.5s ease 0s;
    -moz-transition: all 0.5s ease 0s;
    -ms-transition: all 0.5s ease 0s;
    -o-transition: all 0.5s ease 0s;
    transition: all 0.5s ease 0s;
    width: 45px;
    opacity: 0;
}

.portfolio-content:hover a span {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -ms-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
}

.portfolio-content a span:hover {
    background-color: #333;
    color: #fff
}

.portfolio-section {
    overflow: hidden;
}

.inner_page .portfolio-page-2 .portfolio-item {
    padding-bottom: 0;
}


/*** end portfolio section ***/


/*** progress bar ***/

.progress-section {
    margin-top: 115px;
    overflow: hidden;
}

.progress-section .hadding-area {
    padding-top: 0;
}

.progress-bg {
    background-attachment: fixed;
    background-image: url("../images/background/progress-bg.jpg");
    background-position: center center;
    background-size: cover;
    display: inline;
    float: left;
    padding-bottom: 80px;
    padding-top: 80px;
    position: relative;
    width: 100%;
    z-index: 10;
}

.progress-bg::after {
    background-color: rgba(94, 217, 232, 0.90);
    content: "";
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.progress-icon {
    border: 1px solid #fff;
    border-radius: 20px;
    color: #5ed9e8;
    font-size: 36px;
    height: 100px;
    margin: 0 auto;
    padding: 25px;
    text-align: center;
    width: 100px;
}

.progress-content .progress-count {
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 40px;
    font-weight: bold;
    padding-top: 20px;
}

.progress-item {
    text-align: center;
}

.progress-title {
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 14px;
    margin-top: 17px;
    text-transform: uppercase;
}

.progress-line {
    background-color: #5ed9e8;
    height: 1px;
    margin: 6px auto 14px;
    width: 60px;
}


/*** end progress bar ***/


/*** pricing section ***/

.pricing-section {
    display: inline-block;
}

.pricing-table {
    padding-top: 60px;
}

.pricing-top {
    background-color: #232323;
    padding: 20px;
}

.pricing-title > h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
}

.pricing-amount {
    display: block;
    font-size: 25px;
    font-weight: bold;
    padding: 6px;
}

.per-month {
    font-size: 14px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
}

.pricing-title {
    color: #fff;
}

.priceing-content {
    border: 1px solid #232323;
}

.pricing-body > ul > li:last-child {
    padding-bottom: 25px;
}

.pricing-body > ul > li:first-child {
    padding-top: 25px;
}

.pricing-body > ul > li {
    padding: 10px 0;
}

.pricing-footer {
    background-color: #232323;
}

.pricing-footer .purchase-button {
    color: #fff;
    display: block;
    font-size: 18px;
    font-weight: bold;
    padding: 35px 0 30px 0;
    text-transform: uppercase;
}


/*** hover **/

.priceing-content:hover {
    border-color: #5ed9e8;
}

.priceing-content:hover .pricing-top,
.priceing-content:hover .purchase-button {
    background-color: #5ed9e8
}


/*** end pricing section **/


/*** team section ***/

.team-social > a > span {
    transform: rotate(45deg);
}

.team-title {
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    text-transform: capitalize;
}

.team-sub-title {
    color: #5ed9e8;
    font-family: lato;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
}

.team-details {
    margin-top: 40px;
}

.italic {
    font-style: italic;
    font-weight: bold;
    margin-top: 20px;
    text-decoration: underline;
}

.team-details {
    margin-top: 40px;
}

.italic {
    font-style: italic;
    font-weight: bold;
    margin-top: 20px;
    text-decoration: underline;
}

.team-social .icon {
    background-color: #5ed9e8;
    display: inline-block;
    height: 45px;
    margin: 7px;
    padding: 0;
    transform: rotate(-45deg);
    width: 45px;
}

.team-social span {
    padding: 16px;
    color: #fff
}

.team-social .icon a {
    display: block;
    transform: rotate(45deg);
}

.team-social .icon:hover {
    background-color: #333;
}

.team-social {
    margin-top: 60px;
}

.team-img > img {
    max-width: 80%;
}

.team-container {
    background-color: #f1f1f1;
    margin-top: 80px;
    padding: 70px 0 9px;
}

.team-section .owl-prev:hover,
.team-section .owl-next:hover {
    background-color: #333
}

.team-section .owl-prev,
.team-section .owl-next {
    height: 45px;
    width: 45px;
    background-color: #5ed9e8;
    font-size: 0;
    transform: rotate(45deg);
}

.team-section .owl-prev {
    display: inline-block;
    left: 65px;
    margin-right: 27px;
    position: relative;
}

.team-section .owl-next {
    margin-top: -69px;
}

.team-section .owl-prev::before {
    color: #fff;
    content: "";
    display: block;
    font-family: fontawesome;
    font-size: 20px;
    transform: rotate(-45deg);
    line-height: 35px;
    margin: 7px 15px;
}

.team-section .owl-next::before {
    color: #fff;
    content: "\f177";
    display: block;
    font-family: fontawesome;
    font-size: 20px;
    transform: rotate(-45deg);
    line-height: 52px;
    margin: 1px 14px;
}


/*** end team section ***/


/*** blog section ***/

.blog-title:focus {
    color: #333333;
}

.blog-carousel .item-inner > img {
    width: 100%;
}

.blog-section a.readmore:focus,
.blog-section .all-items:focus {
    color: #5ed9e8
}

.blog-section .item-content,
.blog-page-inner .item-content {
    padding: 20px 0;
    text-align: left;
}

.blog-section a:hover {
    color: #5ed9e8;
}

.blog-contents .blog-title {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.blog-carousel .readmore {
    color: #5ed9e8;
    text-decoration: underline;
}

.blog-carousel .readmore:hover {
    color: #333
}

.blog-contents .post-meta > ul > li {
    color: #333333;
    display: inline-block;
    font-size: 13px;
}

.blog-contents .post-meta > ul > li span {
    font-size: 13px;
    margin: 6px;
    padding: 0;
}

.blog-contents .des {
    line-height: 26px;
    padding: 13px 0;
}

.blog-section .all-items {
    display: inline-block;
    font-size: 15px;
    margin-top: 40px;
    text-align: center;
    text-decoration: underline;
    width: 100%;
}

.blog-contents {
    margin-top: 70px;
}

.blog-meta-date {
    position: relative;
}

.blog-section .mata-date {
    background-color: #5ed9e8;
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    font-weight: bold;
    height: 45px;
    line-height: 1;
    padding: 6px 0;
    width: 45px;
    position: absolute;
    right: 0;
    top: -45px;
}


/*** end blog section ***/


/*** testimonial ***/

.title {
    color: #fff;
}

.team-contents .owl-dot {
    display: inline-block;
    width: 18px;
}

.testimonial-section .owl-dots {
    margin-top: 22px;
    text-align: center;
}

.testimonial-bg {
    background-attachment: fixed;
    background-image: url("../images/testimonial/img.jpg");
    background-position: center center;
    background-size: cover;
    display: inline;
    float: left;
    padding-bottom: 100px;
    padding-top: 90px;
    position: relative;
    width: 100%;
}

.testimonial-title {
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    font-weight: bold;
    text-transform: uppercase;
}

.testimonial-section .des {
    color: #fff;
    line-height: 26px;
    padding: 0 167px;
}

.testimonial-section .owl-dot {
    display: inline-block;
    height: 2px;
    margin: 0 auto;
    width: 20px;
}

.testimonial-section .owl-dot > span::after {
    background-color: #fff;
    content: "";
    height: 10px;
    position: absolute;
    width: 10px;
}

.testimonial-section .owl-dot.active > span::after {
    background-color: #333;
}

.testimonial-section .title {
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
}

.testimonial-section {
    margin-top: 115px;
    overflow: hidden;
}

.testimonial-section .subtitle {
    color: #fff;
    padding-bottom: 20px;
    font-style: italic
}

.testimonial-bg::after {
    background-color: rgba(94, 217, 232, 0.95);
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}


/*** testimonial ***/


/***  client section ***/

.client-carousel img {
    margin: 0 auto 1px;
}

.client-contents img:hover {
    opacity: 1;
}

.client-section {
    margin: 0 auto;
    width: 100% !important;
}

.inner_page .skill-section {
    padding-top: 0;
}

.inner_page .client-section .hadding-area {
    padding-top: 75px;
}

.client-content .owl-dot.active > span::after,
.client-content .owl-dot > span::after {
    background-color: #5ed9e8;
    content: "";
    height: 10px;
    width: 10px;
}

.client-content .owl-dot > span::after {
    background-color: #333;
    content: "";
    height: 10px;
    width: 10px;
    display: block;
}

.client-content .owl-dot > span {
    float: left;
    margin: 0 5px;
}

.client-content .owl-dots {
    margin: 55px auto;
    overflow: hidden;
    width: 70px;
}

.client-contents {
    margin-top: 70px;
}


/*** end client section ***/


/**  maps section **/

.maps-section {
    background-color: #f7f8fb;
    height: 290px;
    position: relative;
    width: 100%;
}


/** / maps section **/


/*** contact form ***/

.form form .form-control {
    border: 1px solid #999;
    border-radius: 0;
    height: 45px;
    background-color: transparent;
    color: #999;
    box-shadow: none;
}

textarea.form-message {
    background-color: transparent;
    border: 1px solid #999;
    color: #999;
    padding: 10px;
    width: 100%;
}

.contact-info h3 span {
    color: #999;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    position: relative
}

.contact-info h3 span::after {
    background-color: #999;
    bottom: 0;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    right: 0;
    width: 90%;
}

.contact-section {
    background-color: #181818;
    padding: 80px 0;
}

.contact-info h3 {
    margin-bottom: 50px;
}

.contact-info .form-button {
    text-align: right;
}


/*** contact details ***/

.contact-details-area > ul > li .contact-icon {
    background-color: transparent;
    border: 1px solid #999;
    display: inline-block;
    height: 45px;
    margin-right: 21px;
    padding: 9px;
    text-align: center;
    transform: rotate(45deg);
    width: 45px;
}

.contact-details-area > p {
    color: #999;
    margin-top: 25px;
    margin-bottom: 8px;
    display: inline-block;
}

.contact-details-area > ul > li > span > span {
    transform: rotate(-45deg);
    color: #999
}

.contact-details-area > ul > li {
    color: #999;
    font-size: 13px;
    margin: 30px 0;
    text-transform: uppercase;
}

.contact-details-area {
    margin-top: 73px;
}


/*** end contact details ***/


/*** end contact form ***/


/*** footer ***/

.copyright > a {
    color: #dbdbdb;
}

.copyright > a:hover {
    color: #5ed9e8;
}

footer.footer-section {
    padding: 35px 0 28px 0;
    background-color: #131313;
    color: #999;
}

.footer-social {
    text-align: right;
}

.footer-social > ul > li {
    display: inline-block;
    font-size: 20px;
    margin: 0 20px;
}

.footer-social > ul > li > a {
    color: #999;
}

.footer-social > ul > li > a:hover {
    color: #5ed9e8
}


/*** footer ***/


/*** aLL PAGE code ***/

.header-img {
    background-color: #cccccc;
    height: 111px;
    margin-bottom:80px;
}

.header-img > img {
    height: 100%;
    width: 100%;
}


/*** breadcrumb ***/

.inner_page .hadding-area {
    text-align: center;
    width: 100%;
}

.breadcrumb li {
    text-transform: capitalize;
}

.breadcrumb {
    background-color: transparent;
    margin: 0;
    padding: 0 0 17px;
}

.breadcrumb a:hover {
    color: #5ed9e8
}

.breadcrumb a:focus {
    color: #5ed9e8;
    outline: none
}

.inner_page .readmore-btn {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    margin: 0 auto;
    padding-top: 50px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
}

.inner_page .skill-section {
    padding-bottom: 0;
}

.inner_page .portfolio-item {
    padding-bottom: 30px;
}

.inner_page .portfolio-1 .portfolio-item:hover .portfolio-content {
    height: 100%!important;
    width: 100% !important;
}

.inner_page .portfolio-1 .portfolio-content:hover .images-link {
    top: 147px;
}

.inner_page .portfolio-1 .portfolio-content:hover .image-view {
    bottom: 150px;
}


/*** blog bage **/


/*** side par ***/

.blog-search #search-form > input {
    border: 1px solid #dddddd;
    padding: 12px 50px 12px 15px;
    position: relative;
}

.blog-search #search-form > button {
    background: transparent;
    border: medium none transparent;
    padding: 13px 15px;
    position: absolute;
    right: 0;
    top: 0;
}

.blog-search > form {
    display: inline-block;
    height: 40px;
    max-width: 242px;
    position: relative;
}

.blog-search #search-form > button:hover {
    background-color: #5ed9e8;
    color: #fff;
}

.widget {
    padding-bottom: 60px;
}

.widget-hadding {
	font-family: 'Oswald', sans-serif;
	font-size: 16px;
	font-weight: bold;
	padding-bottom: 20px;
	text-transform: uppercase;
}

.widget-hadding > span::after {
    background-color: #5ed9e8;
    bottom: -3px;
    content: "";
    height: 1px;
    left: 0;
    position: absolute;
    width: 100%;
}

.widget-hadding > span {
    position: relative;
}

.widget-cat > li {
    line-height: 45px;
}

.widget-cat > li > a span.fa {
    margin: 0 6px 0 0;
    -webkit-transition: all 0.8s ease 0s;
    -moz-transition: all 0.8s ease 0s;
    -ms-transition: all 0.8s ease 0s;
    -o-transition: all 0.8s ease 0s;
    transition: all 0.8s ease 0s;
}

.widget-cat > li > a:hover {
    margin: 10px;
    -webkit-transition: all 0.8s ease 0s;
    -moz-transition: all 0.8s ease 0s;
    -ms-transition: all 0.8s ease 0s;
    -o-transition: all 0.8s ease 0s;
    transition: all 0.8s ease 0s;
}

.resent-image {
    float: left;
}

.rs-img {float: left; margin-right: 10px; display: inline;}

.resent-image figure {
    margin: 0 20px 0 0;
    min-height: 80px;
    min-width: 80px;
}

.resent-image figure img {
    min-height: 100%;
    min-width: 100%;
}

.resent-details > a {
    color: #232323;
    font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
    font-size: 12px;


}

.resent-details > a:hover {
    color: #5ed9e8;
}
.resent-details {
    color: #5ed9e8;
	overflow: hidden;
}

.resent-date > span {
    color: #232323;
    font-size: 15px;
    font-style: italic;
    font-weight: bold;
    margin-right: 10px;
}

.resent-date {
    color: #5ed9e8;
    font-style: italic;
    padding-top: 8px;
}

.resent-post {
    border-bottom: 1px solid #dddddd;
    padding-bottom: 20px;
    padding-top: 20px;
}

.resent-post:last-child {
    border: transparent;
    padding-bottom: 0;
}

.resent-post.first-item {
    padding-top: 0;
}

.widget .blog-des {
    line-height: 26px;
}

.populer-tag > li {
    display: inline;
}

.populer-tag > li > a {
    background-color: #1c1c1c;
    color: #fff;
    display: inline-block;
    margin: 0 6px 1px -4px;
    overflow: hidden;
    padding: 7px 19px;
}


/*** blog details ***/


/*** blog details  ***/


/*** paginations ***/

.all-pagination {
    text-transform: uppercase;
}

.current-pagination {
    border: 1px solid #e2e2e2;
    display: inline-block;
    height: 30px;
    line-height: 28px;
    text-align: center;
    width: 30px;
}

.current-pagination:hover,
.pagination .inactive:hover {
    background-color: #5ed9e8;
    color: #fff;
}

.pagination .inactive {
    border: 1px solid #dedede;
    display: inline-block;
    height: 30px;
    line-height: 29px;
    text-align: center;
    width: 30px;
}

.blog-page-inner .pagination {
    margin: 60px 15px 0;
}

.blog-details-thumbnail {
    position: relative;
}

.blog-details-thumbnail::after {
    background-color: rgba(0, 0, 0, 0.3);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
}

.blog-details-contant > h4 {
    font-size: 30px;
    padding-bottom: 10px;
    padding-top: 25px;
}

.blog-details-meta > ul > li {
    display: inline;
    margin-left: 0;
    margin-right: 18px;
}

.blog-details-meta > ul > li > span {
    color: #333333;
    font-size: 14px;
    font-weight: bold;
    margin-right: 8px;
    text-transform: uppercase;
}

.blog-details-meta > ul > li > a > span {
    color: #5ed9e8
}

.blog-details-meta > ul > li a span.fa {
    margin-left: 0;
    margin-right: 5px;
}

.blog-details-meta {
    margin-bottom: 20px;
    margin-top: 18px;
}

.blog-details-meta a {
    font-weight: bold;
    margin-left: 0;
    text-transform: uppercase;
}

.blog-details-meta a:hover {
    color: #232323;
}

.blog-details-des {
    line-height: 26px;
    padding-top: 3px;
}

.comment-area {
    padding-top: 70px;
}

.comment-area h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    padding-bottom: 30px;
    text-transform: uppercase;
}

.comment-area h2 span.fa {
    margin-left: 0;
    margin-right: 5px;
}

.blog-details-contant .form textarea {
    height: auto;
    width: 100%;
}

.blog-details-contant .form form .form-control {
    border: 1px solid #dbdbdb;
}

.blog-details-contant .btn.btn-buttons.submit-btn {
    border-color: transparent;
    color: #fff;
    padding: 14px 30px;
}

.populer-tag a:hover {
    background-color: #5ed9e8;
}

.blog-detail-page {
    margin-top: 50px;
}

.comment-img {
    float: left;
    height: 40px;
    width: 40px;
}

.comment-time {
    color: #333;
    margin: 5px 0;
    display: inline;
}

.comment-img > img {
    height: 100%;
    width: 100%;
}

.comment-content {
    overflow: hidden;
    padding-left: 15px;
}

.comment-content h3 {
    display: inline;
    font-family: 'Oswald', sans-serif;
    font-size: 15px;
    font-weight: normal;
    text-transform: uppercase;
}

.comment-content p {
    line-height: 26px;
    margin-top: 10px;
}

.comment-reply {
    display: inline;
    font-style: italic;
    margin: 8px 0;
}

.blog-details-reply-box {
    display: inline;
    float: right;
    text-transform: uppercase;
}

.comment-reply a {
    color: #333;
}

.comment-reply a:hover {
    color: #5ed9e8
}

.comment-list-reply {
    padding: 50px 0 50px 72px;
}

.comment-respond {
    padding-top: 70px;
}

.respond-title {
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    padding: 20px 0 35px;
    text-align: left;
    text-transform: uppercase;
}

.respons-box .form-control {
    border: 1px solid #e8e8e8;
    border-radius: 0;
    box-shadow: none;
    height: 40px
}

.form-control.form-comment {
    height: auto;
}

.respons-box .btn.btn-buttons.submit-btn {
    margin: 15px 0 0;
}

.respons-box .form-button {
    display: block;
}

.respons-box .btn.btn-buttons.submit-btn:hover {
    background-color: #232323;
    color: #fff;
    border-color: #232323
}

.blog-details-contant h3.blog-title {
    font-size: 16px;
    font-weight: bold;
    margin-top: 24px;
    text-transform: uppercase;
}

.blog-details-section {
    padding-bottom: 100px
}

.comment-header {
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 10px;
}


/*** about page ***/

.inner_page .about-page {
    margin-top: 65px;
}

.about-page .about-img img {
    height: 100%;
    width: 100%;
}

.about-page .about-img {
    height: 250px;
    margin: 0 auto;
    width: 600px;
}

.about-page .about-content h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    padding-bottom: 35px;
}

.about-page .about-content p {
    padding: 0 146px 0 145px;
}

.about-page .about-content {
    padding-top: 70px;
}

.about-img.about-2-page {
    height: 327px;
    width: auto;
}

.about-page .about-content-2 {
    padding-top: 50px;
}

.about-page .about-page-des-2 {
    padding: 0 !important;
}

.about-page .about-content-2 h2 {
    padding-bottom: 20px;
}


/*** contact page ***/

.inner_page .contact-section {
    background-color: transparent;
    padding: 0;
}

.contact-page .maps-section {
    height: 450px;
}

.contact-page .contact-box span {
    color: #939393;
    font-size: 45px;
}

.contact-page .contact-box h2 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 24px;
    margin-top: 7px;
    text-transform: uppercase;
}

.contact-page .contact-box-inner {
    border: 1px solid #e6e6e6;
    padding: 60px 53px;
}

.inner_page .contact-section .hadding-area {
    padding-top: 100px;
    text-align: center;
    width: 100%;
}

.inner_page .contact-section .form textarea {
    height: auto;
}

.inner_page .contact-section .contact-info .form-button {
    display: inline-block;
    margin: 0 auto;
    padding-top: 35px;
    text-align: center;
    width: 100%;
}

.inner_page .contact-section .form form .form-control {
    border: 1px solid #e6e6e6;
}

.inner_page .pricing-section {
    background-color: #f5f5f5;
    margin: 40px 0 0;
    padding-bottom: 110px;
    width: 100%;
}

.col4_pricing {
    padding-top: 50px;
}

.inner_page .contact-section .form-group {
    margin-bottom: 42px;
}

.contact-page .contact-info {
    margin-top: 60px;
}

.inner_page .contact-page {
    margin-top: 45px;
}

.inner_page .contact-section .btn.submit-btn {
    border: medium none transparent;
    color: #fff;
    margin-bottom: 50px;
}

.inner_page .contact-section .btn.submit-btn:hover {
    background-color: #333
}


/*** login **/

.login-section .form input[type="text"],
.login-section .form input[type="password"] {
    border: 1px solid #c1c1c1;
    box-sizing: border-box;
    color: #666;
    float: left;
    height: 50px;
    margin: 0 0 30px;
    padding: 0 18px;
    width: 100%;
}

.login-section {
    margin-top: 50px;
}

.login-section .form input[type="submit"] {
    box-sizing: border-box;
    color: #fff;
    float: left;
    height: 50px;
    margin: 0 0 30px;
    padding: 0 18px;
    width: 100%;
}

.login-section .form {
    margin: 0 auto;
    overflow: hidden;
    width: 360px;
}


/*** register ***/

.inner_page .register-section {
    margin-top: 50px;
}

.register-section .form {
    margin: 0 auto;
    overflow: hidden;
    width: 750px;
}

.register-section .form input[type="text"],
.register-section .form input[type="password"] {
    border: 1px solid #c1c1c1;
    box-sizing: border-box;
    color: #666;
    float: left;
    height: 50px;
    margin: 0 0 30px;
    padding: 0 18px;
    width: 100%;
}

.register-section .form span a {
    color: #5ed9e8;
}

.register-section .form span a:hover {
    color: #333;
    text-decoration: underline
}

.register-section .form input[type="submit"] {
    border: 0 none;
    color: #fff;
    float: left;
    padding: 18px 0;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}


/*** 404 ***/

.error_section {
    padding: 57px 0 100px;
}

.error_section h2 {
    color: #5ed9e8;
    font-family: 'Oswald', sans-serif;
    font-size: 117px;
    font-weight: bold;
    margin-bottom: 30px;
}

.error_section h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 25px;
    margin: 8px;
}

.error-button {
    padding-bottom: 50px;
    padding-top: 50px;
}

.btn-button2 {
    background-color: #333 !important;
}

.btn-button2:hover {
    background-color: #5ed9e8 !important;
}

.error_section {
    padding: 200px 0;
}

.error_bg {
    background-attachment: fixed;
    background-image: url("../images/404.jpg");
    background-position: center center;
    background-size: 100% 100%;
    position: relative;
    width: 100%;
    z-index: 1;
}

.error_section2 {
    padding: 200px 0;
    position: relative
}

.error_section2 h4 {
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.2em;
    line-height: 22px;
    text-transform: uppercase;
}

.error_section2 h1 {
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 33px;
    font-weight: bold;
    margin: 21px;
    text-transform: uppercase;
}

.error_section2::after {
    background-color: rgba(0, 0, 0, 0.53);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.error_section2 .error-button a {
    color: #fff;
}

.error_section2 .error-button a:hover {
    background-color: #fff;
    color: #333;
}


/*** testimonial page ***/

.testiminial2 .testimonial-content h2,
.testiminial2 .testimonial-content .subtitle,
.testiminial2 .testimonial-content p {
    color: #333;
}

.testimonial-section.testiminial2 {
    padding: 90px;
}

.testiminial2 {
    background-color: #f5f5f5;
}

.to-top {
    background-color: #333;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 17px;
    height: 45px;
    padding: 11px;
    position: fixed;
    right: 40px;
    text-align: center;
    width: 45px;
    z-index: 999
}

.to-top:hover {
    background-color: #5ed9e8
}

.home-2 .to-top:hover {
    background-color: #fc8229
}


/*** end  all page code ***/


/* Here's where our carousel begins, with the main wrapper being
relatively positioned, so that our absolutely positioned items are
in the right place. */

.carousel-wrapper {
  position: relative;}

  /* Our absolutely positioned carousel items span the width and
  height of its parent. We're making them transparent by default so
  that they fade in when we cycle through them using the arrow links. */
  .carousel-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px 50px;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    border: 1px solid #aaa;}

    /* Did you notice the 50px left, right padding up above? It's so
    we can position our arrow links! Each one will be 50px wide. Also,
    I'm using empty links with a background image so that the links
    look like arrows. Make sure you swap out that URL with an actual
    URL so that your arrow links aren't just transparent rectangles. */
    .arrow {
    position: absolute;
    top: 0;
    display: block;
    width: 50px;
    height: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background: url("/images/carousel-arrow-dark.png") 50% 50% / 20px no-repeat;}

      /* Let's put our arrow to go back on the left. */
     .arrow-prev {
        left: 0;
      }

      /* And our arrow to go forward on the right. Since I'm using
      the same arrow image for both my arrows, I'm rotating this one by
      180 degrees so that it points in the right direction */
      .arrow-next {
        right: 0;
        -webkit-transform: rotate(180deg);
                transform: rotate(180deg);
      }


    /* I really like how these carousel items look on a dark image
    background, so if a .carousel-item div has the class 'light',
    we'll make its text color white, and use a white arrow instad of
    a dark gray one. Again, make sure this arrow image exists somewhere */
   .light {
      color: white;}

      .arrow {
        background: url("/images/carousel-arrow-light.png") 50% 50% / 20px no-repeat;
      }


    /* Let's use using some media queries to resize the arrows
    on smaller devices.*/
    @media (max-width: 480px) {
      .arrow, &.light .arrow {
        background-size: 10px;
        background-position: 10px 50%;
      }
    }


  /* Let's set our jump link targets display: none; so that we're not
  making the browser jump to the top of the carousel whenever a user
  clicks on one of our arrow links. This attribute selector will target
  any element whose id starts with 'target-item'. */
  [id^="target-item"] {
    display: none;
  }

  /* So, up above we made all our carousel items transparent, which means
  that on page-load, we'd have a big empty box where our carousel should be.
  Let's set our first item's opacity to 1 so that it displays instead. Also,
  we're setting its z-index to 2, so that it's positioned on top of the
  other carousel items. */
  .item-1 {
    z-index: 2;
    opacity: 1;
  }
    .item-1 a {
		color:#fff;
  }

  /* But we don't want the first item to ALAWYS be opacity: 1; otherwise
  it would peek through when cycling between items two and above. */
  *:target ~ .item-1 {
    opacity: 0;
  }

  /* ...but if #target-item-1 is targeted, well we do want the first item
  to show up, so we're selecting it with the ~ sibling selector and
  setting its opacity to 1 again :-) */
  #target-item-1:target ~ .item-1 {
    opacity: 1;
  }

  /* If any other target-item-# is targeted, let's select it using the sibling
  selector, make it fade in, and place it on top of the pile using z-index: 3.
  Here's where you'd add more target items if your carousel has more than three
  items. It might be worth adding like 10 items right off the bat. */
  #target-item-2:target ~ .item-2, #target-item-3:target ~ .item-3 {
    z-index: 3;
    opacity: 1;
  }