/**
 * The stylesheet for displaying on mobile device.
 *
 * @package Contractor
 * @author  KingKongThemes
 * @link	http://www.kingkongthemes.com
/*--------------------------------------------------------------
	CSS Overview
---------------------------------------------------------------

	1. Max Screen 1170px
	2. Max Screen 1024px
		2.1 Container
		2.2 Header
		2.3 Body
		2.4 Search box
		2.5 Menu
		2.6 Portfolio Free Style
		2.7 Title bar
	3. Max Screen 800px
	4. Max Screen 767
	5. Screen between 568px to 767px
	6. Max Screen 568px
	7. Max Screen 320px

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

/*--------------------------------------------------------------
	1. Max Screen 1170px
--------------------------------------------------------------*/
@media only screen and (max-width: 1170px), (max-device-width: 1170px) {
	/*----------- 1.1 Body -----------*/
	body:not(.page):not(.post) .k2t-content,
	body:not(.page):not(.post) .k2t-title-bar{
		padding-left: 15px;
		padding-right: 15px;
	}

	/*----------- 1.2 Visual Composer -----------*/
	.vc_row:not(.row-fullwidth){
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.vc_row:not(.row-fullwidth) .vc_row{
		margin-left: -15px !important;
		margin-right: -15px !important;
	}
}

/*--------------------------------------------------------------
	2. Max Screen 1024px
--------------------------------------------------------------*/
@media only screen and (max-width: 1024px), (max-device-width: 1024px) {
	/*----------- 2.1 Container -----------*/
	.k2t-container {
		width: 100%;
	}

	/*----------- 2.2 Header -----------*/
	.k2t-header > *:not(.k2t-header-m) {
		display: none;
	}
	.k2t-header-m {
		display: inline-block;
		position: fixed;
		z-index: 1000;
		width: 100%;
		background: #fff;
	}

	/*----------- 2.3 Body -----------*/
	body {
		right: auto;
		left: 0;
	}
	body.nav-is-visible {
		left: 260px;
	}

	/*----------- 2.4 Search box -----------*/
	.k2t-right-m .search-box{
		margin: 15px;
	}

	/*----------- 2.5 Menu -----------*/
	.m-trigger {
		height: 30px;
		width: 30px;
		z-index: 100;
		position: relative;
		display: inline-block;
		top:10px;
		margin:0 5px;
		cursor: pointer;
	}
	.m-trigger:hover span,
	.m-trigger:hover span:before,
	.m-trigger:hover span:after {
		background-color: #ffbe2a
	}
	.m-trigger span,
	.m-trigger span:before,
	.m-trigger span:after {
		background-color: #767676;
		content: "";
		display: block;
		height: 3px;
		width: 14px;
	}
	.m-trigger span {
		left: 50%;
		position: absolute;
		top: 50%;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform:    translate(-50%, -50%);
		-ms-transform:     translate(-50%, -50%);
		-o-transform:      translate(-50%, -50%);
		transform:         translate(-50%, -50%);
	}
	.m-trigger span:before {
		margin-top: -5px;
		position: absolute;
	}
	.m-trigger span:after {
		margin-top: 5px;
		position: absolute;
	}
	.m-trigger.open span {
		background-color: transparent;
		left: 54%;
	}
	.m-trigger.open span:before,
	.m-trigger.open span:after {
		width: 14px;
		-webkit-transform: rotate(45deg);
		-moz-transform:    rotate(45deg);
		-ms-transform:     rotate(45deg);
		-o-transform:      rotate(45deg);
		transform:         rotate(45deg);
		-webkit-transform-origin: 0 50%;
		-ms-transform-origin:     0 50%;
		transform-origin:         0 50%;
	}
	.m-trigger.open span:after {
		-webkit-transform: rotate(-45deg);
		-moz-transform:    rotate(-45deg);
		-ms-transform:     rotate(-45deg);
		-o-transform:      rotate(-45deg);
		transform:         rotate(-45deg);
	}
	.nav-is-hide,
	.menu-mobile-wrap,
	.menu-mobile-wrap ul,
	.k2t-menu-m .menu,
	.k2t-menu-m .menu ul {
		-webkit-transition: all .4s ease-in-out;
		-moz-transition:    all .4s ease-in-out;
		transition:         all .4s ease-in-out;
	}

	.k2t-header-m > div {
		width: 33.3%;
		float: left;
	}
	.k2t-header-m .k2t-logo-m {
		text-align: center;
		margin: 20px 0;
	}
	.k2t-right-m {
		text-align: right;
	}
	.k2t-right-m > * {
		display: inline-block;
	}

	/*----------- 2.6 Portfolio Free Style -----------*/
	.isotope-gallery .isotope-selector,
	.isotope-gallery .isotope-selector.width-2 {
		width: 33.33% !important;
	}
	
	/*----------- 2.7 Title bar -----------*/
	.k2t-title-bar{
		padding-top: 160px !important;
		padding-left: 15px;
		padding-right: 15px;
	}
}

/*--------------------------------------------------------------
	3. Max Screen 800px
--------------------------------------------------------------*/
@media only screen and (max-width: 800px) and (max-device-width: 800px) {
	.k2t-right-m .search-box{
		margin: 15px;
	}
	.k2t-body section.container > #main, .k2t-body section.container > div.k2t-shop-sidebar{
		width: 100%;
		clear: both;
		padding-right: 0;
	}
	.right-sidebar .k2t-blog,
	.left-sidebar .k2t-blog,
	.right-sidebar .k2t-main,
	.left-sidebar .k2t-main,
	.k2t-body .k2t-sidebar,
	.archive .k2t-main {
		width: 100% !important;
	}
	div:not(.offcanvas-sidebar) .k2t-sidebar .widget,
	.k2t-bottom .k2t-row [class*="col-"] {
		width: 50%;
		float: left;
		padding-left: 15px;
	}
	.k2t-bottom .col-3 {
		min-height: 300px;
	}
	.b-masonry [class*="column-"] .grid-sizer {
		width: 50%;
	}
	.b-masonry .masonry-layout[class*="column-"] .hentry {
		width: 48%;
	}
	.k2t-logo-m .k2t-logo {
		margin: auto;
	}
	.k2t-bottom .k2t-row {
		margin: 0 5px;
	}
	.single .k2t-content,
	.blog .k2t-content,
	.archive .k2t-content,
	.k2t-info {
		padding: 20px;
	}
	.right-sidebar .k2t-blog,
	.left-sidebar .k2t-blog,
	.left-sidebar .k2t-main,
	.k2t-main,
	.k2t-sidebar .widget:nth-child(2n),
	.two-sidebars .k2t-sidebar,
	.b-masonry.fullwidth .k2t-wrap {
		padding: 0;
	}
	.k2t-sidebar .widget {
		padding-right: 15px;
	}
	.wpcf7 .wpcf7-form > p{
		margin-bottom: 25px;
	}
	/* WOOCOMERCE */
	.woocommerce-page.columns-5 ul.products li.product,
	.woocommerce.columns-5 ul.products li.product {
		width: 48% !important;
	}
	.woocommerce-account .k2t-content .woocommerce {
		width: auto;
	}
	/* Footer */
	.k2t-main ul.info-footer {
		text-align: center !important;
	}
}
/*--------------------------------------------------------------
	4. Max Screen 767
--------------------------------------------------------------*/
@media only screen and (max-width: 767px) and (max-device-width: 767px) {
	.hide-mobile{
		display: none;
	}
	.wpb_wrapper > .vc_row{
		margin-top: 0 !important;
		margin-bottom: 20px !important;
	}
	.wpb_wrapper > .vc_row.no-margin-bottom, .vc_row.no-margin-bottom .wpb_column{
		margin-bottom: 0px !important;
	}
	.vc_row .wpb_column{
		margin-top: 0;
		margin-bottom: 30px;
	}
	/* Footer */
	.k2t-footer .k2t-info{
		text-align: center;
	}
	.k2t-footer .k2t-info #footer-menu{
		margin-top: 10px;
		float: none;
		display: inline-block;
	}
}
/*--------------------------------------------------------------
	5. Screen between 568px to 767px
--------------------------------------------------------------*/
@media only screen and (min-width: 569px) and (max-width: 767px) {
	.k2t-right-m .search-box{
		margin: 15px;
	}
	.admin-bar .menu-mobile-wrap,
	.admin-bar .menu-mobile-wrap ul {
		margin-top: 46px;
	}
	/* PORTFOLIO FREE STYLE */
	.isotope-gallery .isotope-selector,
	.isotope-gallery .isotope-selector.width-2 {
		width: 50% !important;
	}
}
/*--------------------------------------------------------------
	6. Max Screen 568px
--------------------------------------------------------------*/
@media only screen and (max-width: 568px) and (max-device-width: 568px) {
	.k2t-right-m .search-box{
		margin: 15px;
	}
	.k2t-header-m {
		position: relative;
	}
	.k2t-title-bar{
		padding-top: 60px !important;
	}
	div:not(.offcanvas-sidebar) .k2t-sidebar .widget,
	.k2t-post-share .col-6 {
		width: 100%;
	}
	.b-masonry .masonry-layout[class*="column-"] .hentry.large {
		width: 98%;
	}
	.k2t-searchbox form {
		width: 90%;
		margin-left: -45%;
	}
	.k2t-sidebar .widget {
		padding: 0;
	}
	.k2t-post-share .col-6 {
		margin-bottom: 20px;
	}
	.k2t-social-share {
		text-align: center;
	}

	/* Blog */
	.b-classic .k2t-meta > div.posted-info, .single .k2t-meta > div.posted-info{
		display: none;
	}
	.b-classic .k2t-meta, .single .k2t-meta{
		padding: 10px 15px;
	}
	.b-classic .k2t-meta .my, .single .k2t-meta .my{
		font-size: 122%;
	}
	.b-classic .k2t-meta span.d, .single .k2t-meta span.d{
		font-size: 300%;
		line-height: 1em;
	}

	/* WOOCOMERCE */
	.woocommerce-page ul.products li.product,
	.woocommerce ul.products li.product {
		width: 100% !important;
	}

	/* Contact form 7 */
	.k2t-row [class*="col-"]{
		width: 100%;
	}

	/* Heading */
	.k2t-heading.has-border.heading .h::before, .k2t-heading.heading .h::after{
		content: none;
	}
	.k2t-heading.has-border.heading .h span{
		border: none;
		padding: 0;
		text-align: center;
	}
}
/*--------------------------------------------------------------
	7. Max Screen 320px
--------------------------------------------------------------*/
@media only screen and (max-width: 320px) and (max-device-width: 320px) {
	.k2t-right-m .search-box{
		margin: 15px;
	}
	.b-masonry .masonry-layout[class*="column-"] .hentry {
		width: 100%;
	}
	.offcanvas-sidebar {
		width: 280px;
	}
	.k2t-searchbox input[type="text"] {
		font-size: 25px;
	}
	.k2t-searchbox #searchsubmit {
		font-size: 15px;
		top: -2px;
	}
	.k2t-social-share .social li {
		margin: 5px;
	}
	.wpcf7 .wpcf7-form > p {
		margin-bottom: 15px;
	}
	/* WOOCOMERCE */
	.woocommerce-page.columns-5 ul.products li.product a.button,
	.woocommerce.columns-5 ul.products li.product  a.button {
		padding: 0 15px !important;
	}
	.woocommerce-account .k2t-content .woocommerce {
		padding: 40px 15px;
	}
	/* PORTFOLIO FREE STYLE */
	.isotope-gallery .isotope-selector,
	.isotope-gallery .isotope-selector.width-2 {
		width: 100% !important;
	}
	/* Footer */
	.k2t-bottom .k2t-row > div{
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}
}