/* Demo 20 Homepage 20 */
@import '../mixins/clearfix';
@import '../mixins/breakpoints';
@import '../mixins/lazy';
@import '../mixins/buttons';

@import '../config/fonts';
@import '../config/variables';

$primary-color: #1cc0a0;

.header .mobile-menu-toggler {
	padding-top: .5rem;
}

.container {
	width: 1420px;
	max-width: 100%;
}

.menu .megamenu.demo {	
	height: 70vh;
}

.block,
.block-wrapper {
	width: 100%;
	max-width: 1420px;
	margin-left: auto;
	margin-right: auto;
}

.block-wrapper {
	overflow: hidden;

	.owl-carousel .owl-stage-outer {
		overflow: visible;
	}

	.owl-carousel .owl-dots {
		margin-top: 3rem;
	}
}

.owl-simple .owl-nav.disabled + .owl-dots {
	margin-top: 2rem;
}

.block-wrapper  {
	padding-bottom: 12rem;
	margin-bottom: -12rem;

	&:after {
		content: '';
		display: table;
		clear: both;
	}
}

@include mq('xxl') {

	.header-12 {
		.header-search-extended {
			margin-right: 6.5rem;
		}
		
	}

	.header-search .search-wrapper-wide {
		width: 832px;
	}

	.header-search-extended {
		max-width: 832px;
	}
}

.heading {
	margin-bottom: 2.5rem;
}

.title {
	font-weight: 600;
	letter-spacing: -.025em;
}

.title-link {
	color: #777;
	font-weight: 400;
	text-transform: uppercase;

	&:hover,
	&:focus {
		color: $primary-color;
	}
}

.intro-section {
	margin-top: 0;
}

.banner-content {
	left: 2rem;
	padding-top: 0;

	&.banner-content-stretch {
		top: 3rem;
		bottom: 5rem;
		transform: translateY(0);
		padding-bottom: 4rem;

		.btn {
			position: absolute;
			bottom:0;
			left: 0;
		}
	}
}

.banner-small .banner-content {
	left: 2rem;
}

.banner-big .banner-content {
	left: 2rem;
}

.btn.banner-link {
	min-width: 122px;
	padding-left: .5rem;
	padding-right: .5rem;
	border-radius: .3rem;
}

.banner-big .banner-subtitle,
.banner-subtitle {
	font-weight: 300;
	font-size: 1.4rem;
	letter-spacing: 0;
	margin-bottom: 1rem;
}

.banner-title {
	font-weight: 600;
	font-size: 2rem;
	letter-spacing: -.025em;
	margin-bottom: 1.4rem;

	span {
		font-weight: 300;
	}
}

.banner-big {
	.btn.banner-link {
		padding: 1.2rem 1.8rem;
	}

	.banner-title {
		font-weight: 600;
		font-size: 3rem;
		letter-spacing: -.025em;
		margin-bottom: 1rem;
	}
}

/* Product */
.product,
.product:hover {
	box-shadow: 1px 3px 5px rgba(0,0,0, .01);
}

.product {
	height: 100%;
	padding: 3rem 2rem 1rem;
	border-radius: .4rem;
	background-color: #fff;
	border: .1rem solid #ebebeb;
}

.product-media {
	margin-left: 1rem;
	margin-right: 1rem;
	box-shadow: 2px 2px 0 0 #e3e3e3;
}

.product-body {
	padding: 1.7rem 0 1.8rem;
	background-color: transparent;
}

.product-label {
	border-radius: .3rem;
	left: 1.8rem;
	top: 2rem;
}

.btn-wishlist {
	font-size: 1.6rem;

	&:hover,
	&:focus {
		&:before {
			content: '\f233';
		}
	}
}

.product-footer {
	display: none;
	position: absolute;
	left: -21px;
	right: -21px;
	top: 100%;
	padding: 0 2rem 1rem;
	border-radius: .4rem;
	background-color: #fff;
	border: .1rem solid #ebebeb;
	border-top: none;
	box-shadow: 1px 3px 5px rgba(0,0,0, .01);
}

.product:hover {
	.product-footer {
		display: block;
	}
}

.ratings-container {
	margin-bottom: 1.3rem;
}

.product-action {
	position: static;
	left: auto;
	right: auto;
	flex-direction: column;
	background-color: transparent;
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}

.btn-product {
	width: 100%;
	padding-top: 1.1rem;
	padding-bottom: 1.1rem;
	border-radius: .3rem;
	color: $primary-color;
	border: .1rem solid $primary-color;

	&.btn-cart {
		text-transform: uppercase;
	}

	span {
		color: $primary-color;
		font-size: 1.4rem;
	}

	&:before {
		display: inline-block;
		margin-top: -.2rem;
		margin-right: .7rem;
	}

	&:hover,
	&:focus {
		color: #fff;
		background-color: $primary-color;

		span {
			color: #fff;
			box-shadow: none;
		}
	}

	&.btn-wishlist {
		border: none;
		color: #777;

		span {
			color: #777;
		}

		&:hover,
		&:focus {
			color: #666;
			background-color: transparent;

			span {
				color: #666;
				box-shadow: none;
			}
		}
	}
}

.product-body .btn-wishlist {
	position: static;
	top: auto;
	right: auto;
	margin: .2rem 0 0;
	padding: 1rem 0;
}

.product-body .btn-wishlist span {
	display: inline;
}

.product-body .btn-wishlist:before {
	margin-right: .7rem;
}

.product-cat {
	color: #ccc;
	margin-bottom: .1rem;
}

.product-title {
	font-size: 1.4rem;
	line-height: 1.43;
	margin-bottom: .2rem;
}

.product-price {
	font-size: 1.4rem;
	margin-bottom: 0;
}

.new-price,
.product-price {
	color: $primary-color;
}

.old-price {
	text-decoration: none;
}

.bestseller-products {
	.product-body {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	.product-footer {
		padding-left: 3rem;
		padding-right: 3rem;
	}
}

.product-big {
	position: relative;
	max-width: 452px;
	margin-left: auto;
	margin-right: auto;

	> img {
		border-radius: .4rem;
	}

	.product-wrap {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		display: flex;
		align-items: center;
		padding: 4rem 1rem 4rem 2.5rem;
	}

	.product-media {
		flex: 0 0 50%;
		max-width: 200px;
		margin: 0;
		box-shadow: 1px 3px 5px rgba(0,0,0, .05);
	}

	.product-body {
		padding-left: 1rem;
	}

	color: #fff;
	.product-cat,
	.product-title,
	.product-price {
		color: #fff;

		a:hover,
		a:focus {
			color: $primary-color;
		}
	}

	.product-cat {
		font-size: 1.4rem;
		font-style: italic;
		margin-bottom: 1rem;

		a {
			font-style: normal;
		}
	}

	.product-title {
		font-weight: 600;
		font-size: 2.4rem;
		line-height: 1.25;
		letter-spacing: -.025em;
		margin-bottom: .6rem;
	}

	.product-price {
		font-size: 2.4rem;
		margin-bottom: 1rem;
	}

	.product-action {
		align-items: flex-start;
	}

	.btn-product {
		border-color: #fff;
		max-width: 140px;

		span {
			color: #fff;
		}

		&:before {
			color: #fff;
		}

		&:hover,
		&:focus {
			color: #333;
			background-color: #fff;

			&:before,
			span {
				color: #333;
			}
		}
	}
}

.icon-boxes-container {
	padding-top: .5rem;
	padding-bottom: .5rem;
	margin-bottom: 2rem;
}

.icon-box {
	font-size: 1.4rem;
}

.icon-box-side .icon-box-icon {
 	min-width: 5.6rem;
 	text-align: left;
}

.icon-box-icon {
	color: #ccc;
	font-size: 3.4rem;
}

.banner-group {
	.banner {
		border-radius: .4rem;
		overflow: hidden;
	}
}

.blog-posts {
	.title {
		padding-top: .5rem;
		margin-bottom: 2.5rem;
	}

	.entry {
		font-size: 1.4rem;
		background-color: #fff;
		border-radius: .3rem;
		margin-bottom: 3rem;
		overflow: hidden;
		box-shadow: 1px 3px 5px rgba(0,0,0, .025), -1px 3px 5px rgba(0,0,0, .025);
	}

	.entry-meta {
		margin-bottom: .6rem;
	}

	.entry-media {
		margin-bottom: 0;
	}

	.entry-title {
		font-size: 1.6rem;
		line-height: 1.5;
		letter-spacing: -.025em;
		margin-bottom: .6rem;
	}

	.entry-body {
		padding: 2.1rem 2rem 2rem;
	}

	.entry-content p {
		margin-bottom: .6rem;
	}

	.read-more {
		font-size: 1.4rem;
		letter-spacing: 0;
		padding-bottom: 0;
		text-transform: capitalize;
	}
}

.cta-newsletter {
	&.text-center {
		.input-group {
			max-width: 570px;
			margin-left: auto;
			margin-right: auto;
		}
	}

	.cta-icon {
		color: #333;
		display: inline-block;
		font-size: 4.5rem;
		line-height: 1;
		margin-bottom: 1.1rem;
	}

	.title {
		margin-bottom: .6rem;
	}

	.title-desc {
		margin-bottom: 2.4rem;
	}

	.form-control {
		height: 46px;
		padding-top: 1.15rem;
		padding-bottom: 1.15rem;
		border-top-left-radius: .3rem;
		border-bottom-left-radius: .3rem;
		background-color: #fff;
	}

	.btn {
		padding-top: 1.15rem;
		padding-bottom: 1.15rem;
		min-width: 130px;
		border-top-right-radius: .3rem;
		border-bottom-right-radius: .3rem;
	}
}

.footer-middle {
	border-top: none;

	.container {
		position: relative;
		padding-top: 4.2rem;

		&:before {
			content: '';
			display: block;
			height: 1px;
			position: absolute;
			top: 0;
			left: 15px;
			right: 15px;
			background-color: #ebebeb;
		}
	}
}

.footer-2 .footer-middle {
	padding-top: 0;
}

.footer {
	.widget-title {
		font-weight: 600;
	}

	.widget-about {
		p {
			max-width: 500px;
		}
	}

	.widget-about-info {
		a {
			color: $primary-color;
		}
	}
}

@include mq('sm') {
	.banner-big .banner-content {
		left: 4rem;
	}

	.product-big {
		.product-wrap {
			padding-right: 2rem;
			padding-left: 3.5rem;
		}
		.product-body {
			padding-left: 3rem;
		}
	}
}

@include mq('xl') {
	.banner-content {
		left: 4rem;
	}

	.banner-small .banner-content {
		left: 3rem;
	}

	.banner-title {
		font-size: 2.4rem;
	}

	.banner-big .banner-title {
		font-size: 4rem;
	}

	.btn.banner-link {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}