/* site responsive styles */


// devices viewport width starts at:
$breakpoints: (
	'xs-phone': 480px,
	'phone': 576px,
	'tablet': 768px,
	'desktop': 992px,
	'desktop2': 1024px,
	'desktop3': 1170px,
	'widescreen': 1300px,
	'widescreen2': 1550px
);
  
// keywords
$media-expressions: (
    'screen': 'screen',
	'print': 'print',
	'handheld': 'handheld',
	'landscape': '(orientation: landscape)',
	'portrait': '(orientation: portrait)',
	'retina2x': '(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)',
	'retina3x': '(-webkit-min-device-pixel-ratio: 2.5), (min-resolution: 240dpi)'
);

@import 'vendor/include-media';

@import "vendor/bootstrap/functions";
@import "vendor/bootstrap/variables";

@import "customVariables";

@import "vendor/bootstrap/mixins";
@import "base/customMixinx";


@include media('>=xs-phone'){
	.headingII{
		@include font(36px, 27px);
		&:before{ width: 100px; }
	}
	.headingIV{ @include font(30px, 29px); }
	.mainHeader{
		.headerBorder{
			min-width: 370px;
			.img-bdr{ width: 370px; }
		}
	}
	.featureCol{ width: 50%; }
	.comming-timer{
		.countdown-row{
			.countdown-section{
				min-width: 50px;
				margin: 0 50px 0 0;
				&:before{
					font-size: 40px;
					right: -30px;
				}
				.countdown-amount{ @include font(31px, 33px); }
				.countdown-period{ @include font(14px, 17px); }
			}
		}
	}
	.subscribeSecBlock{
		.emailForm1{
			height: 52px;
			border-radius: 40px;
			background: $white;
			.form-control{
				width: 65%;
				margin: 0;
				border-radius: 0;
			}
			.btn{ box-shadow: 11px 1px 18px 15px rgba(0, 0, 0, 0.1); }
		}
	}
	.partnerSlider{
		.logoColumn{ width: 195px; }
	}
	.productTextHolder{
		.jcf-number{
			width: auto;
			margin: 0 20px 0 0;
			input{ width: auto; }
		}
	}
	.footerHolder{
		.coll-1{ width: 50%; }
		.coll-2{ width: 50%; }
		.coll-3{ width: 50%; }
		.coll-4{ width: 50%; }
		.tagNavList{
			a{ min-width: 120px; }
		}
	}
	.progressCounter{
		li{ min-width: 50%; }
	}
}

@include media('>=phone'){
	#header{
		.mainHolder{ .logo{ margin: 0 30px 0 auto; } }
	}
	.btn{
		&.btnShop{  min-width: 180px; }
	}
	.introBlock{
		.align{ min-height: 460px; }
		h1{
			@include font(32px, 34px);
			&:before{ @include width(150px, 5px); }
		}
		h2{ @include font(32px, 34px); }
		.title{
			@include font(16px, 18px);
			letter-spacing: 3px;
			&:before{
				top: 5px;
				@include width(5px, 12px);
			}
		}
		.slickNavigatorsWrap,
		.slickNums{
			bottom: 50px;
			max-width: 510px;
			display: flex;
		}
	}
	.bannerBlockHolder{
		.align{ min-height: 590px; }
		h1{ @include font(40px, 45px); }
		.slickNavigatorsWrap,
		.slickNums{
			bottom: 50px;
			max-width: 140px;
			display: flex;
		}
	}
	.heroBlockHolder{
		.containerHolder{
			.coll-6{
				width: 55%;
				padding: 0 0 0 15px;
				&:first-child{ display: block; }
			}
		}
	}
	.introBannerHolder{ min-height: 180px; }
	.breadCrumbs{ font-size: 18px; }
	.featureCol{
		.title{ font-size: 14px; }
	}
	.subscribeSecBlock{
		.emailForm1{
			.form-control{ width: 62%; }
		}
	}
	.quotationBlock{ @include font(22px, 36px); }
	.newsBlogColumn{
		.time{ @include width(70px, 70px); }
	}
	.tabSetList{ @include font(36px, 38px); }
	.commentsBlock{
		.commentArea{
			.img{ width: 15%; }
			.txtHolder{ width: 85%; }
		}
	}
	.abtSecHolder{
		h2{ @include font(36px, 36px); }
	}
	.stepCol{
		width: 429px;
		@include pseudo(before, 33px, -15px, auto, auto);
		&:before{
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 9px 0 9px 15px;
			border-color: transparent transparent transparent #f8f8f8;
		}
		&.rightArrow{
			&:before{
				right: auto;
				left: -15px;
				border-width: 9px 15px 9px 0;
				border-color: transparent #f8f8f8 transparent transparent;
			}
		}
	}
	.contactListHolder{
		li{ min-width: 50%; }
	}
}

@include media('>=tablet'){
	#header{
		.mainHolder{ .logo{ margin: 0 auto; } }
		.h-logo{ width: 140px; }
	}
	.langList{
		font-size: 14px;
		> li{
			margin: 0 0 0 24px;
			> a{
				&:after{
					font-size: 17px;
					margin: 0 -2px 2px 7px;
				}
			}
		}
	}
	.pageNav1{
		.navbar-toggle { margin: 0; }
	}
	.wishList{
		padding: 0;
	}
	.wishListII{
		li{ margin: 0 0 0 33px; }
	}
	.headingIV{ @include font(36px, 29px); }
	.introBlock{
		.align{ min-height: 640px; }
		h1{
			@include font(42px, 44px);
			&:before{ @include width(250px, 5px); }
		}
		h2{ @include font(42px, 44px); }
		.title{
			@include font(20px, 22px);
			&:before{ @include width(5px, 16px); }
		}
		br{ display: block; }
		.slickNavigatorsWrap,
		.slickNums{ max-width: 690px; }
	}
	.bannerBlockHolder{
		h1{ @include font(50px, 55px); }
		.title{
			@include font(20px, 22px);
			&:before{ top: 5px; }
		}
		.year{ @include font(56px, 60px); }
		.sub-title{ @include font(24px, 26px); }
	}
	.heroBlockHolder{
		.title{
			font-size: 17px;
			letter-spacing: 3px;
			word-spacing: -2px;
		}
		.subTitle{ font-size: 18px; }
		h1{ @include font(40px, 50px); }
	}
	.introBannerHolder{ min-height: 250px; }
	.subscribeSecBlock{
		min-height: 380px;
		.emailForm1{
			width: 595px;
			.form-control{ width: 69.6%; }
		}
	}
	.quotationBlock{
		q{ padding: 0 90px; }
	}
	.masonryHolder{
		.grid-item{
			width: 45%;
			&.grid-item2{ width: 55%; }
		}
	}
	.testimonailSlider{
		.slide{ padding: 0 60px; }
	}
	.show-head{
		.viewFilterLinks{ width: auto; }
	}
	.commentform{
		.coll{ width: 33.33%; }
	}
	.cartHolder{
		.couponForm{
			width: auto;
			.form-control{ width: 320px; }
		}
	}
	.progressCounter{
		li{ min-width: 25%; }
		li + li{
			border-left: 1px solid $gray-1021;
		}
	}
	.contactForm{
		.coll{ width: 33.33%; }
	}
}

@include media('>=desktop'){
	#header{
		.mainHolder{ .logo{ display: none; } }
		.h-logo{ width: 165px; }
	}
	.langList{
		> li{
			margin: 0 0 0 12px;
		}
	}
	.langListII{
		li{ margin: 0 24px 0 0; }
	}
	.pageNav1{
		float: none;
		.navbar-toggle{ display: none; }
	}
	.pageNav1{
		.navbar-nav{
			li{
				margin: 0 13px;
				display: inline-block;
				vertical-align: middle;
				&.dropdown{
					&:hover{
						margin-bottom: -46px;
						padding-bottom: 46px;
						> .dropdown-menu{
							opacity: 1;
							visibility: visible;
						}
					}
				}
			}
			.nLogo{
				margin: -13px 0 0;
				width: 110px;
				display: block;
			}
			a{
				margin: 13px 0 0;
				padding: 0;
			}
			.dropdown-menu{ display: block !important; }
		}
		.navbar-collapse{
			position: static;
			background: transparent;
		}
	}
	.pageNav2{
		float: none;
		.navbar-nav{
			li{
				margin: 0 23px;
				display: inline-block;
				vertical-align: middle;
				&.dropdown{
					&:hover{
						margin-bottom: -46px;
						padding-bottom: 46px;
						> .dropdown-menu{
							opacity: 1;
							visibility: visible;
						}
					}
				}
			}
			.dropdown-menu{ display: block !important; }
			a{ padding: 0 0 10px; }
		}
		.navbar-toggle{ display: none; }
		.navbar-collapse{
			position: static;
			background-color: transparent;
		}
	}
	.introBlock{
		.align{ min-height: 730px; }
		.imgHolder{
			position: absolute;
			right: -135px;
			top: 99px;
			width: 50%;
		}
		.imgHolder2{
			position: absolute;
			right: 30px;
			top: -80px;
			width: 50%;
		}
		.imgHolder3{
			position: absolute;
			right: -20px;
			top: -24px;
			width: 40%;
		}
		h1{ @include font(62px, 64px); }
		h2{ @include font(62px, 64px); }
		.title{
			@include font(22px, 24px);
			letter-spacing: 4px;
		}
		.slickNavigatorsWrap,
		.slickNums{
			bottom: 90px;
			max-width: 930px;
		}
	}
	.bannerBlockHolder{
		.align{ min-height: 680px; }
		h1{ @include font(60px, 65px); }
		.title{
			@include font(22px, 24px);
			letter-spacing: 4px;
		}
	}
	.heroBlockHolder{
		.txtwrap{
			@include pseudo(before, 0, -9999px, 0, -9999px);
			&:before{
				background: $gray-1006;
				z-index: -1;
			}
		}
	}
	.featureCol{ width: 25%; }
	.subscribeSecBlock{ min-height: 420px; }
	.quotationBlock{
		q{ padding: 0 230px; }
	}
	.masonryHolder{
		.grid-item{
			width: 24.9%;
			&.grid-item2{ width: 47%; }
		}
	}
	.itemCol{
		.hoverTextBlock{
			left: 30px;
			top: 50px;
		}
		.headingIV{ @include font(28px, 30px); }
	}
	.commentsBlock{
		.commentArea{
			.img{ width: 8.5%; }
			.txtHolder{ width: 91.5%; }
		}
	}
	.footerHolder{
		.coll-1{ width: 35.5%; }
		.coll-2{ width: 19%; }
		.coll-3{ width: 18%; }
		.coll-4{ width: 33%; }
	}
	.contactListHolder{
		li{ min-width: 33.33%; }
		li + li{
			border-left: 1px solid $gray-1021;
		}
	}
}

@include media('>=desktop2'){
	.langList{
		> li{
			> a{
				&:after{ margin: 0 -2px 2px 10px; }
			}
		}
	}
	.heroBlockHolder{
		.containerHolder{
			.coll-6{
				width: 43.2%;
				padding: 0;
				&:first-child{ width: 56.8%; }
			}
		}
		.title{ @include font(19px, 36px); }
		h1{ @include font(60px, 70px); }
	}
	.introBannerHolder{ min-height: 300px; }
}

@include media('>=desktop3'){
	.pageNav1{
		.navbar-nav{
			.nLogo{ width: 140px; }
		}
	}
	.wishListII{
		li{ margin: 0 0 0 38px; }
	}
	.headingV{ @include font(16px, 18px); }
	.introBlock{
		.align{ min-height: 810px; }
		.imgHolder{
			right: -95px;
			top: -1px;
			width: 57%;
		}
		.imgHolder2{
			right: 80px;
			top: -80px;
			width: 50%;
		}
		.imgHolder3{
			right: -20px;
			top: -24px;
			width: 50%;
		}
		.slickNavigatorsWrap,
		.slickNums{
			bottom: 120px;
			max-width: 1140px;
		}
	}
	.bannerBlockHolder{
		h1{ @include font(68px, 70px); }
	}
	.heroBlockHolder{
		.slickNavigatorsWrap{
			max-width: 670px;
			bottom: 100px;
			display: flex !important;
		}
		.slickNums{
			max-width: 590px;
			bottom: 40px;
			display: flex !important;
		}
	}
	.contactListColumn{
		.icon{ @include font(43px, 51px); }
	}
	.subscribeSecBlock{ min-height: 466px; }
	.quotationBlock{
		q{ padding: 0 310px; }
	}
	.masonryHolder{
		.grid-item{
			&.grid-item2{ width: 49.9%; }
		}
	}
	.testimonailSlider{
		.slide{ padding: 0 210px; }
	}
	.cartHolder{
		.cartTable{ min-width: none; }
	}
	.footerHolder{
		.coll-2{ width: 22.2%; }
		.coll-3{ width: 16.2%; }
		.coll-4{ width: 26.1%; }
		.followSocailNetwork{ @include font(16px, 18px); }
	}
}

@include media('>=widescreen'){
	.langList{
		> li{ margin: 0 0 0 20px; }
	}
	.pageNav1{
		.navbar-nav{
			li{ margin: 0 18px; }
			.nLogo{ width: 165px; }
		}
	}
	.introBlock{
		.imgHolder{
			right: -205px;
			top: -74px;
			width: 65%;
		}
		.imgHolder2{
			right: -80px;
			top: -170px;
			width: 75%;
		}
		.imgHolder3{
			right: -80px;
			top: -24px;
			width: 50%;
		}
		h1{ @include font(68px, 70px); }
		h2{ @include font(68px, 70px); }
	}
	.heroBlockHolder{
		.title{
			@include font(20px, 36px);
			letter-spacing: 4px;
		}
		h1{ font-size: 68px; }
	}
	.featureCol{
		width: 20%;
		.title{ font-size: 15px; }
		.postHoverLinskList{
			@include font(18px, 22px);
			a{ padding: 12px; }
		}
	}
	.cartHolder{
		.couponForm{
			.form-control{ width: 340px; }
		}
	}
	.footerHolder{
		.footerContactList{
			.pr30{ padding-right: 60px; }
		}
	}
}

@include media('>=widescreen2'){
	.langList{
		> li{ margin: 0 0 0 31px; }
	}
	.pageNav1{
		.navbar-nav{
			li{ margin: 0 23px; }
		}
	}
	.wishList{
		li{ margin: 0 0 0 30px; }
	}
	.introBlock{
		.align{ min-height: 1010px; }
		.imgHolder{
			right: -265px;
			top: -94px;
			width: 75%;
		}
		.imgHolder2{
			right: -262px;
			top: -292px;
			width: 96%;
		}
		.imgHolder3{
			right: -228px;
			top: -164px;
			width: 70%;
		}
		.slickNavigatorsWrap,
		.slickNums{ bottom: 164px; }
	}
	.bannerBlockHolder{
		.align{ min-height: 900px; }
	}
	.heroBlockHolder{
		.slickNavigatorsWrap{
			max-width: 860px;
			bottom: 100px;
		}
		.slickNums{
			max-width: 770px;
			bottom: 40px;
		}
	}
	.featureCol{
		&:hover{
			.postHoverLinskList{ bottom: 57px; }
		}
	}
	.itemCol{
		.headingIV{ @include font(36px, 29px); }
	}
	.footerHolder{
		.coll-2{ width: 24.2%; }
		.coll-3{ width: 18.2%; }
		.coll-4{ width: 22.1%; }
		.footerContactList{
			.pr30{ padding-right: 150px; }
		}
	}
}

@include media('<phone'){
	#header{
		.headerHolderCol{ display: none; }
		.mainHolder{ .logo{ float: right; } }
		.dis-none{ display: none; }
	}
	.wishList{
		&.dis-none{ display: none; }
	}
	.wishListII{
		display: none;
	}
	.bannerBlockHolder{
		.align{ background: none; }
	}
}

@include media('<desktop'){
	.langListII{
		li{ span{ display: none; } }
	}
	.pageNav1{
		.navbar-nav{
			width: 100%;
			.active{
				> a{  background: $black; }
			}
			a{
				line-height: 26px;
				&:hover{ background: $black; }
			}
		}
	}
	.pageNav2{
		.navbar-nav{
			width: 100%;
			.active{
				> a{
					background: $black;
					&:after{ transform: scaleX(0); }
				}
			}
			a{
				line-height: 26px;
				&:after{ display: none; }
				&:hover{ background: $black; }
			}
		}
	}
	.introBlock{
		.imgHolder,
		.imgHolder2,
		.imgHolder3{ display: none; }
	}
}