/**================================================
    SABRAK -- RESPONSIVE STYLES
====================================================*/

.clearfix:after {
	content: '';
	display: block;
	clear: both;
}

.ellipsis {
	white-space: nowrap;
	/* 1 */
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	/* 2 */
	overflow: hidden;
}

@media (min-width: 480px) {
	.hero-area.banner {
		color: #fff;
		font-size: 18px;
	}
	.hero-area.banner .align-holder {
		text-align: center;
	}
	.hero-area .caption {
		max-width: 275px;
	}
	.hero-area .align-holder {
		text-align: right;
	}
	.hero-area .align-holder .align {
		text-align: left;
		max-width: 275px;
	}
	.project-col {
		width: 50%;
		padding-top: 25%;
	}
	.widget.widget_meta .alignright:before {
		display: block;
	}
}

@media (min-width: 640px) {
	.counts-aside:after {
		min-height: 139px;
	}
	.our-counts {
		padding: 23px 0 20px;
	}
	.our-counts li {
		margin: 0;
		max-width: 150px;
		text-align: center;
	}
	.our-counts .title {
		max-width: 120px;
	}
	.our-counts .subtitle {
		max-width: 150px;
	}
	.project-col {
		padding-top: 18.9%;
		width: 20%;
	}
	.clients-testimonial:after {
		padding-bottom: 22%;
	}
	.clients-testimonial:before {
		padding-bottom: 15.3%;
	}
	.blog-post h3 {
		font-size: 22px;
		line-height: 28px;
	}
}

@media (min-width: 768px) {
	.hero-area h1 {
		font-size: 60px;
		line-height: 60px;
	}
	.site-header {
		height: auto !important;
	}
	.hero-area {
		padding: 96px 0 0;
	}
	.hero-area.style2 {
		height: 100vh;
	}
	.hero-area .caption {
		max-width: 365px;
	}
	.hero-area .align-holder .align {
		max-width: 365px;
		padding: 50px 0 92px;
	}
	.main-slider .slide .align {
		padding: 30px 75px 72px;
	}
	.main-slider .slide h1 {
		font-size: 60px;
		line-height: 60px;
	}
	.intro-aside {
		font-size: 14px;
		line-height: 28px;
	}
	.intro-aside h2 {
		font-size: 14px;
		line-height: 18px;
	}
	.about-area {
		font-size: 13px;
	}
	.about-area .compliment {
		font-size: 21px;
		margin: 0 auto 5px;
		line-height: 33px;
	}
	.about-area .descr {
		white-space: nowrap;
		text-align: center;
		text-align: left;
	}
	.about-area .descr:before {
		content: '';
		display: inline-block;
		vertical-align: middle;
		width: 0;
		min-height: inherit;
	}
	.about-area .descr .align {
		white-space: normal;
		display: inline-block;
		vertical-align: middle;
		max-width: 99%;
	}
	.about-area .descr .center-align {
		white-space: normal;
		display: inline-block;
		vertical-align: middle;
		max-width: 99%;
	}
	.about-area .descr .align {
		text-align: left;
		margin: 0 0 0 -36px;
		padding: 30px 0;
	}
	.about-area .descr .align:after {
		left: -43px;
	}
	.about-area .descr .align:before {
		left: -43px;
	}
	.about-area .extra-wrap:before {
		left: -43px;
	}
	.about-area .alignleft {
		margin: 0 0 0 -20px;
		clear: none;
		max-width: none;
		white-space: nowrap;
		text-align: center;
		text-align: left;
	}
	.about-area .alignleft:before {
		content: '';
		display: inline-block;
		vertical-align: bottom;
		width: 0;
		min-height: inherit;
	}
	.about-area .alignleft .align {
		white-space: normal;
		display: inline-block;
		vertical-align: bottom;
		max-width: 99%;
	}
	.about-area .alignleft .center-align {
		white-space: normal;
		display: inline-block;
		vertical-align: bottom;
		max-width: 99%;
	}
	.our-counts {
		padding: 33px 0 39px;
	}
	.our-counts li {
		font-size: 13px;
		line-height: 15px;
	}
	.our-counts .title {
		font-size: 42px;
		line-height: 44px;
	}
	.header h2 {
		font-size: 31px;
		line-height: 34px;
	}
	.how-work.style2 {
		padding-top: 83px;
	}
	.how-work .header {
		margin-bottom: 60px;
	}
	.work-flow {
		max-width: none;
		margin: 0 0 100px;
	}
	.work-flow .col {
		margin-bottom: 0;
        max-height:163px
	}
	.work-flow .col.indent-top {
		margin-top: 50px;
		margin-left: 0;
	}
	.work-flow .col.indent-top.extra {
		margin-top: 11px;
	}
	.work-flow .line.line1 {
		width: 265px;
		margin: 76px 0 0 -73px;
		-webkit-transform: rotate(67deg);
		-ms-transform: rotate(67deg);
		transform: rotate(67deg);
	}
	.work-flow .line.line2 {
		right: 0;
		left: auto;
		top: 100%;
		margin: 25px -79px 0 0;
		-webkit-transform: rotate(-46deg);
		-ms-transform: rotate(-46deg);
		transform: rotate(-46deg);
		width: 245px;
	}
	.work-flow .line.line3 {
		top: 50%;
		left: 0;
		width: 123px;
		margin: -99px 0 0 -4px;
		-webkit-transform: translateY(-50%) rotate(-50deg);
		-ms-transform: translateY(-50%) rotate(-50deg);
		transform: translateY(-50%) rotate(-50deg);
	}
	.work-flow .line.line4 {
		bottom: 100%;
		left: auto;
		top: auto;
		right: 0;
		-webkit-transform: rotate(20deg);
		-ms-transform: rotate(20deg);
		transform: rotate(20deg);
		width: 164px;
		margin: 0 -15px 34px 0;
	}
	.works-area {
		padding-bottom: 59px;
	}
	.works-area.style2 {
		padding-top: 83px;
	}
	.works-area .load-area .btn-default,
	.works-area .load-area .btn {
		font-size: 14px;
		line-height: 18px;
	}
	.project-col .caption {
		padding: 34px 15px;
	}
	.team-area .header {
		margin-bottom: 56px;
	}
	.team-area .mt-heading1 {
		margin-bottom: 56px;
	}
	.team-area .contact {
		padding: 5px 3px;
		font-size: 10px;
		line-height: 20px;
	}
	.team-area .contact dt {
		width: 38px;
	}
	.cta-aside {
		text-align: left;
		font-size: 20px;
		line-height: 34px;
	}
	.cta-aside .btn-holder {
		padding-top: 26px;
	}
	.cta-aside .btn,
	.cta-aside .btn-default {
		width: 100%;
		padding: 18px 14px;
	}
	.cta-aside p {
		margin: 0;
	}
	.testmionals-sec.style2 {
		padding-top: 83px;
	}
	.quote-box {
		padding: 25px 25px 35px;
	}
	.blog-area {
		padding-bottom: 41px;
	}
	.contact-area .container {
		padding-bottom: 49px;
	}
	.contact-area .header {
		margin-bottom: 59px;
	}
	.contact-area .mt-heading1 {
		margin-bottom: 59px;
	}
	.map {
		min-height: 302px;
	}
	.map img {
		min-height: inherit;
	}
	.contact-form {
		margin-bottom: 0;
	}
	.aside {
		padding-top: 45px;
	}
	.aside .col {
		margin-bottom: 0;
	}
	.aside .widget {
		margin-bottom: 15px;
	}
	.widget.widget_meta .alignright:before {
		left: -39%;
		display: none;
	}
	#footer {
		margin-top: -16px;
		text-align: left;
	}
	.team-area {
		min-height: 560px;
	}
}

@media (min-width: 992px) {
	.hero-area h1 {
		font-size: 80px;
		line-height: 80px;
	}
	.hero-area {
		font-size: 22px;
		line-height: 37px;
	}
	.hero-area .caption {
		max-width: 472px;
	}
	.hero-area .align-holder .align {
		max-width: 472px;
	}
	.intro-aside {
		font-size: 15px;
		line-height: 27px;
	}
	.intro-aside .center-block {
		padding: 63px 10px 22px 27px;
	}
	.intro-aside h2 {
		font-size: 16px;
		line-height: 20px;
	}
	.about-area {
		font-size: 15px;
		padding-top: 78px;
	}
	.about-area .compliment {
		font-size: 23px;
		line-height: 36px;
	}
	.counts-aside:after {
		min-height: 150px;
	}
	.counts-aside:before {
		top: 56px;
	}
	.our-counts {
		padding: 33px 25px 39px;
		margin: -57px 0 55px !important;
	}
	.our-counts:before {
		margin: 0 0 -41px -40px;
		width: 81px;
		height: 81px;
	}
	.header h2 {
		font-size: 36px;
		line-height: 39px;
	}
	.work-flow {
		margin: 0 -30px 71px 0;
	}
	.work-flow .col {
		padding-left: 109px;
	}
	.work-flow .col:before {
		width: 83px;
		height: 83px;
		font-size: 26px;
		line-height: 76px;
	}
	.work-flow h3 {
		font-size: 20px;
		line-height: 24px;
	}
	.work-flow .line.line1 {
		width: 204px;
		margin: 84px 0 0 -12px;
		-webkit-transform: rotate(53deg);
		-ms-transform: rotate(53deg);
		transform: rotate(53deg);
	}
	.work-flow .line.line2 {
		margin: 40px -50px 0 0;
		-webkit-transform: rotate(-33deg);
		-ms-transform: rotate(-33deg);
		transform: rotate(-33deg);
		width: 243px;
	}
	.work-flow .line.line3 {
		width: 141px;
		margin: -84px 0 0 18px;
	}
	.work-flow .line.line4 {
		margin: 0 -17px 41px 0;
		width: 214px;
	}

	.works-area {
		padding-bottom: 79px;
	}
	.works-area .header {
		margin-bottom: 67px;
	}
	.works-area .mt-heading1 {
		margin-bottom: 67px;
	}
	.project-col h3 {
		font-size: 16px;
		line-height: 20px;
	}
	.team-area .contact {
		padding: 13px;
		font-size: 12px;
		line-height: 22px;
	}
	.team-area .contact dt {
		width: 45px;
	}
	.team-area h3 {
		font-size: 18px;
		line-height: 21px;
	}
	.team-area h4 {
		font-size: 14px;
		line-height: 17px;
	}
	.cta-aside {
		font-size: 22px;
		line-height: 38px;
		padding-top: 58px;
		padding-bottom: 57px;
	}
	.cta-aside .btn-holder {
		padding-top: 31px;
	}
	.clients-testimonial:before {
		padding-bottom: 13%;
	}
	.clients-testimonial:after {
		padding-bottom: 16%;
	}
	.quote-box {
		font-size: 14px;
		line-height: 23px;
	}
	.quote-box cite {
		text-align: left;
	}
	.quote-box .avatar {
		float: left;
		margin: 0 21px 0 0;
	}
	.quote-box .descr {
		padding: 10px 0 0;
	}
	.blog-area {
		padding-bottom: 61px;
	}
	.blog-area .header {
		margin-bottom: 65px;
	}
	.blog-area .mt-heading1 {
		margin-bottom: 65px;
	}
	.contact-area .container {
		padding-bottom: 69px;
	}
	.aside {
		padding-top: 65px;
	}
	.widget.widget_meta .alignright,
	.widget.widget_meta .alignleft {
		width: 37.4%;
	}
	.widget.widget_meta .alignright:before {
		display: block;
	}
	.widget h2 {
		font-size: 22px;
		font-weight: bold;
		line-height: 26px;
	}
	#footer {
		margin-top: -52px;
	}
}

@media (min-width: 1230px) {
	.hero-area h1 {
		font-size: 100px;
		line-height: 100px;
	}
	.navbar-default .navbar-nav>li {
		margin: 0 0 0 6px;
	}
	.hero-area .align-holder .center-align h1 {
		font-size: 50px;
		line-height: 50px;
		color: #fff;
	}
	.about-area .col-separator {
		left: -85px;
	}
	.about-area .alignleft,
	.about-area .pull-left .col-contents {
		margin: 0 0 0 -115px;
	}
	.our-counts {
		padding: 33px 55px 39px;
	}
	.how-work .header {
		margin-bottom: 101px;
	}
	.how-work .mt-heading1 {
		margin-bottom: 101px;
	}
	.work-flow .line.line1 {
		width: 185px;
		margin: 95px 0 0 17px;
		-webkit-transform: rotate(55deg);
		-ms-transform: rotate(55deg);
		transform: rotate(55deg);
	}
	.work-flow .line.line2 {
		margin: 60px -14px 0 0;
		-webkit-transform: rotate(-23deg);
		-ms-transform: rotate(-23deg);
		transform: rotate(-23deg);
		width: 263px;
	}
	.work-flow .line.line3 {
		margin: -83px 0 0 6px;
		width: 185px;
		-webkit-transform: translateY(-50%) rotate(-54deg);
		-ms-transform: translateY(-50%) rotate(-54deg);
		transform: translateY(-50%) rotate(-54deg);
	}
	.work-flow .line.line4 {
		margin: 0 -10px 52px 0;
		width: 265px;
	}
	.works-area {
		padding-bottom: 89px;
	}
	.project-col .ico-plus {
		font-size: 29px;
	}
	.team-area .contact {
		font-size: 14px;
		line-height: 24px;
		padding: 18px 15px 16px;
	}
	.team-area .contact dt {
		width: 52px;
	}
	.cta-aside .btn-holder {
		padding-top: 11px;
	}
	.clients-testimonial:after {
		padding-bottom: 13%;
	}
	.blog-area {
		padding-bottom: 81px;
	}
	.blog-post h3 {
		font-size: 28px;
		line-height: 38px;
	}
	.contact-area.style2 .container {
		padding-top: 89px;
	}
	.aside {
		padding-top: 85px;
		font-size: 15px;
		line-height: 28px;
	}
	.widget.widget_meta .alignright:before {
		left: -45%;
	}

    .blog-page .site-header .navbar-default .collapse.in li > a {
        color:#fff;
    }

	#footer {
		font-size: 14px;
		line-height: 18px;
	}
}

@media (max-width: 1600px) {
	body.boxed-v #wrapper {
		max-width: 95%;
	}
}

@media (max-width: 1500px) {
	body.boxed-v #wrapper {
		max-width: 95%;
	}
}

@media (max-width: 1023px) {
	#content .holder .blog {
		float: none;
		width: 100%
	}
	.banner2 {
		min-height: 300px;
		padding: 180px 0 0
	}
	.banner2 .align-holder {
		margin-bottom: 40px;
	}
	#content .holder .blog:first-child {
		margin-bottom: 20px;
	}
	.sidebar .widget {
		width: 100%;
		float: none;
	}
	.sidebar .widget_search {
		width: 100%;
		float: none;
	}
	.wl-sidebar .blog-contents {
		float: left;
		padding-left: 0 !important;
		width: 100%
	}
	.pad-bottom-lg {
		padding-bottom: 30px !important;
	}
	.pad-top-lg {
		padding-top: 30px !important;
	}
	.mar-bottom-sm {
		margin-bottom: 30px !important;
	}
	.pad-top-sm {
		padding-top: 30px !important;
	}
	#content {
		padding: 0;
	}
	#sidebar {
		width: 100%;
	}
	.blog-sec.style2 #content {
		padding: 0;
	}
	.blog-sec .nav-pagination {
		margin: 0 auto 30px;
	}
	.widget .post-list .img-holder {
		width: 14%;
	}
	.banner2 .banner-post-title {
		max-width: 98%;
	}

    .header.left-section-title {
		text-align: center;
        margin-left:auto;
        margin-right:auto;
	}
	
	.header.left-section-title h2 {
		display: block
	}

    .col-separator {
        top: 35px;
        bottom: 50px;
    }

    .about-area .col-separator {
        left:-20px;
    }

   
}

@media (max-width: 767px) {
    .text-xs-center,
    .text-xs-center .text-left,
    .text-xs-center .text-right {
        text-align:center !important;
    }
	.v-align-middle ._col:before {
		min-height: 0;
		height: 0;
		display: none;
	}
	#header.site-header {
		padding: 10px 0;
	}
	.navbar-default .nav-menu,
	.navbar-default .menu {
		background: #fff;
		overflow: hidden;
		border-bottom: 1px solid rgb(62, 62, 62);
	}
	.navbar-default li {
		display: block;
		width: 100%;
		position: static;
	}
	.navbar-default li a,
	navbar-default ul:first-of-type li a {
		padding: 8px 15px !important;
	}

    .navbar-default .children li a {
		padding: 8px 15px 8px 25px !important;
	}

    .navbar-default .children .children li a{
		padding: 8px 15px 8px 35px !important;
	}

    .navbar-default .page_item_has_children > a:before {
        position:absolute;
        right:20px;
    }

	.navbar-default {
		position: static
	}
	.navbar-default .navbar-collapse {
		position: absolute;
		top: 100%;
		left: 0;
	}
	.navbar-default .sub-menu,
	.navbar-default .children {
		position: static !important;
		display: none;
		background: rgba(231, 231, 231, 0.4);
		box-shadow: none;
		width: auto;
        display: block;
		opacity: 1;
		visibility: visible;
	}
	.navbar-default ul .sub-menu li a,
	.navbar-default ul .children li a {
		border: none !important;
		padding: inherit;
        top:auto;
	}

    .blog-page .site-header .navbar-default li > a {
        color:#222222 !important;
    }

    .navbar-default .children:before 
    {
      border-style: solid;
      border-width: 0 8px 8px 8px;
      border-color: transparent transparent rgba(231, 231, 231, 0.4) transparent;
      position: absolute;
      top: 33px;
      left: 15px;
      z-index: 555;
      content: "";
    }

	.pad-bottom-lg {
		padding-bottom: 50px !important;
	}
	.pad-top-lg {
		padding-top: 50px !important;
	}
    .mrl-xs-auto {
        margin:5px auto;
        float:none
    }
	.banner2 {
		padding: 120px 0 35px 0;
		min-height: 300px;
	}
	.page-wrapper .blog-contents,
	.page-content,
	.wr-sidebar .blog-contents,
	.wl-sidebar .blog-contents,
	.wr-sidebar .page-container,
	.wl-sidebar .page-container {
		padding-right: 0 !important;
		padding-left: 0 !important;
	}
	.search-results-wrapper {
		text-align: center;
	}
	#content .content-wrapper {
		padding: 30px 12px
	}
	.md-round {
		border-radius: 0;
	}
	.blog-contents .blog-detail {
		padding: 20px 20px 0
	}
	.banner2 h1 {
		float: none;
		max-width: 100%;
		font-size: 28px;
		margin: 0 0 20px;
		word-break: break-word;
	}
	.breadcrumb {
		float: none;
		text-align: left;
		margin-bottom: 10px;
	}
	.breadcrumbs ul li {
		margin: 0 10px 0 0;
	}
	._col {
		min-height: 1px !important;
		height: auto !important;
	}
	.about-area .compliment {
		margin: 0 auto
	}
	.about-area .pull-right {
		margin-bottom: 15px;
	}
	.about-area .descr {
		padding-left: 60px;
	}
	.about-area .sameheight {
		min-height: 1px !important;
		height: auto !important;
	}
	.about-area .col-separator {
		display: none;
	}
	.team-area .col {
		width: 33.333%;
	}
	.testmionals-sec .testimonials-slider {
		padding: 0;
	}
	.blog-area {
		padding-bottom: 0;
	}
	.blog-detail h3 {
		font-size: 24px;
	}
	.blog-detail .footer .article-nav {
		font-size: 10px;
		padding: 0 35px;
	}
	.sidebar .widget .recent-posts .post-date {
		display: block !important;
	}
	.content-wrapper {
		border-radius: 0
	}
	.content-wrapper .holder {
		margin-bottom: 0 !important
	}
	#content .holder .blog {
		width: 100%;
		float: none;
		margin-bottom: 20px;
		margin-left: 0;
	}
	.abt-holder .block .img-holder {
		width: 23%;
	}
	.abt-holder .block .txt-holder {
		width: 77%;
	}
	.comments-block .commment-area .img {
		width: 21%;
	}
	.comments-block .commment-area .txt-holder {
		width: 79%;
		padding: 10px 0 0 20px;
	}
	.comments-block .commment-area .heading3 {
		float: none;
		margin: 0 0 10px;
	}
	.comments-block .commment-area .comment-nav {
		float: none;
	}
	.comments-block .commment-onelevel {
		padding: 0 0 0 20px;
	}
	.comments-block .commment-onelevel .commment-area .img {
		width: 21%;
	}
	.comments-block .commment-onelevel .commment-area .txt-holder {
		width: 79%;
	}
	.widget .post-list .img-holder {
		width: 20%;
	}
	.blog-sec .nav-pagination {
		width: 270px;
	}
	.article-nav {
		display: block;
		clear: both;
		text-align: center;
		float: none;
		margin: 25px auto auto
	}
	.blog-detail .article-footer {
		text-align: center;
		padding: 20px;
		margin: 30px auto auto;
	}
	.blog-detail .article-footer .share-button-list {
		text-align: center;
		margin: auto auto 10px auto;
		width: 100%;
		display: block;
	}
	.blog-detail .article-footer .share-button-list li {
		float: none !important;
		display: inline-block;
		margin: 0 !important;
		padding: 5px 10px;
	}
	.article-footer .txt {
		display: none;
	}
	.sidebar .widget {
		width: 100%;
		float: none
	}
	.sidebar {
		padding: 10px;
	}
	.header.left-section-title {
		text-align: center;
	}
	.blog-post h3 {
		line-height: 1.5
	}
	.header.left-section-title h2 {
		display: block
	}
	.project-col {
		padding-top: 58%
	}
	.error-404 h2 {
		line-height: 1.4
	}
	.copyright-text {
		text-align: center;
	}
	.work-flow {
		margin-top: 25px;
	}

    .gallery-columns-3 .gallery-item,
    .gallery-columns-4 .gallery-item {
        width:50%;
    }

    .work-flow .col {
        max-height:140px;
    }

	.footer-wrapper .social-icons-widget {
		text-align: center !important
	}

    .footer-wrapper .social-icons-widget ul {
        padding-left:0;
    }
}

@media (max-width: 639px) {
	.our-counts {
		text-align: center;
	}
	.our-counts:after {
		display: block;
		width: auto;
	}
	.our-counts>* {
		display: block;
		text-align: center;
	}
	.team-area .col {
		width: 50%;
	}
	.clients-testimonial .sameheight {
		min-height: 1px !important;
		height: auto !important;
	}
	.blog-post {
		max-width: 320px;
		margin: 0 auto 30px;
		float: none;
	}
}

@media (max-width: 479px) {
	.team-area .col {
		width: 100%;
		max-width: 260px;
		float: none;
		margin: 0 auto 30px;
	}
}

@media (min-width: 640px) and (max-width: 767px) {
	.clients-testimonial .col {
		width: 50%;
	}
	.blog-post {
		width: 50%;
	}
}