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

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

$primary-color: #cc9966;

@import '../base/headers/header-23';

.menu .megamenu.demo .demo-item {
	&.hidden {
		margin-bottom: 0;
	}
	&.show {
		padding-bottom: 2rem;
	}
}

.container {
	width: 1800px;
	max-width: 100%;
	padding-left: 1rem;
	padding-right: 1rem;
}

.page-container {
	display: flex;
	flex-wrap: wrap;
}

.side-div, .page-content-div {
	padding: 0;
}

.side-div {
	flex: 0 0 calc((100% + 20px) / 6);
	max-width: calc((100% + 20px) / 6);
	height: 100vh;
	z-index: 1001;
}

.page-content-div {
	flex: 0 0 calc((100% + 20px) / 1.2 - 20px);
	max-width: calc((100% + 20px) / 1.2 - 20px);
	z-index: 1;
}
.owl-dots:focus,
.owl-dot:focus {
	outline: none;
}
.intro-slider-container,
.intro-slide {
	height: calc(100vh - 70px);
	background-color: #f5f6f9;
}

.intro {
	.title h3 {
		font-size: 1.3rem;
		font-weight: 300;
		letter-spacing: .1em;
		color: #fff;
		text-transform: uppercase;
	}
	.content h4 {
		font-size: 8rem;
		font-weight: 700;
		font-family: 'Playfair Display';
		letter-spacing: .01em;
		color: #fff;
		text-transform: uppercase;
	}
	.action a {
		font-size: 1.3rem;
		font-weight: 300;
		letter-spacing: .1em;
		color: #fff;
		text-transform: uppercase;
		transition: all .3s;

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

.intro-slide {
	display: flex;
	justify-content: center;
	align-items: center;
	.intro {
		padding: 4.5rem 3.5rem 3.5rem 3.5rem;
		border: .1rem solid #fff;
	}
	.title, .content {
		margin-bottom: 3rem;
	}
	.title, .content, .action {
		text-align: center;
	}
}

.service {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 2.5rem;

	> [class*=col-] {
		display: flex;
	}
}

.icon-box-icon i {
	font-size: 3rem;
	letter-spacing: -.025em;
}
.icon-box-side {
	display: flex;
	justify-content: center;
	.icon-box-title {
		font-size: 1.3rem;
		font-weight: 600;
		letter-spacing: .01em;
		text-transform: uppercase;
		margin-bottom: .3rem;
	}
	.icon-box-icon {
		text-align: left;
		min-width: 5rem;
	}
}
.icon-box-content p {
	font-weight: 300;
	letter-spacing: 0;
	color: #777;
}

.banner {
	background-color: transparent;
}

.products {
	display: flex;
	flex-wrap: wrap;
}

.product {
	overflow: hidden;
}

.new-women {
	position: relative;
	padding-top: 7rem;

	.products {

		padding-right: 0;
		padding-left: 4rem;
	}
	.banner {
		padding-right: 5rem;
	}

	&::before {
		position: absolute;
		content: '';
		left: 1rem;
		right: 1rem;
		height: .1rem;
		top: 0;
		background-color: #ebebeb;
	}
}

.new-men {
	.banner {
		padding-left: 5rem;
	}
	.products {
		padding-left: 0;
		padding-right: 4rem;
	}
}

.banner-lg {
	position: relative;

	.intro {
		position: absolute;
		left: 7.9rem;
		top: 2.5rem;
		.title h3 {
			color: #777;
		}
		.content {
			margin-top: 3.6rem;

			h4 {
				font-size: 4.6rem;
				color: #222;
				text-indent: -.2rem;
				margin-bottom: .6rem;
			}
		}
		.action {
			margin-top: 5.5rem;
			a {
				font-weight: 400;
				color: #222;
				padding: 1.3rem 2rem;
				border: .1rem solid $primary-color;
				i {
					margin-left: 1.5rem;
				}

				&:hover,
				&:focus {
					color: #fff;
					background-color: $primary-color;
				}
			}
		}
	}
}
.testimonials {
	display: flex;
	justify-content: center;
	margin-top: 7rem;
}
.testimonials-content {
	flex: 0 0 40%;
	max-width: 40%;
	text-align: center;

	.quote {
		font-size: 10rem;
		font-weight: 400;
		font-family: 'Montserrat';
		letter-spacing: 0;
		color: #222;
		line-height: 1em;
	}

	.content {
		margin-top: -3rem;
	}

	h4 {
		font-size: 1.8rem;
		font-family: 'Playfair Display';
		color: #222;
		letter-spacing: 0;
	}

	.creater {
		margin-top: 2.5rem;
	}

	p.name {
		letter-spacing: 0;
	}

	p.role {
		font-weight: 300;
		letter-spacing: 0;
		color: #777;
		line-height: 1em;
	}
}

.banner-section {
	display: flex;
	flex-wrap: wrap;

	.intro {
		position: absolute;
		text-align: center;
	}

	.banner-lg {
		margin-bottom: 2rem;
		img {
			min-height: 40rem;
			object-fit: cover;
		}
		.intro {
			left: 13rem;
			top: 22rem;
		}
		.title h3 {
			font-weight: 400;
			color: #fff;
		}
		.content{
			margin-top: 0;
			h4 {
				text-indent: 0;
				color: #fff;
				line-height: 1.3em;
			}
		}
		.action {
			margin-top: 4rem;
			a {
				color: #fff;
			}
		}
		p {
			margin-top: 1.5rem;
			color: #fff;
			letter-spacing: .1em;
			text-transform: uppercase;
		}
	}

	.banner-sm {
		position: relative;
		.intro {
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
		.title h3 {
			font-weight: 400;
			color: #fff;
		}
		.content {
			margin-top: 1.8rem;
			h4 {
				font-size: 2.2rem;
				text-transform: none;
				line-height: 1.4em;
			}
		}
		.action {
			margin-top: 1.6rem;
		}
	}

	> div:nth-child(2) {
		padding-left: 0;
	}

	> div:last-child {
		padding-right: 0;
	}
}

.heading {
	p.heading-cat {
		font-weight: 300;
		letter-spacing: .1em;
		color: #777;
		text-transform: uppercase;
		margin-bottom: 3rem;
	}
	h3.heading-title {
		font-size: 4.6rem;
		font-weight: 700;
		font-family: 'Playfair Display';
		letter-spacing: .01em;
		color: #222;
		text-transform: uppercase;
	}
	margin-top: 9.5rem;
	margin-bottom: 6rem;
	text-align: center;
}


.carousel-with-shadow.owl-simple .owl-nav [class*='owl-']:focus {
	outline: none;
}

.tranding {
	.owl-simple .owl-nav {
		.owl-prev {
			left: 3rem;
		}
		.owl-next {
			right: 3rem;
		}
	}
	.carousel-with-shadow.owl-simple .owl-nav [class*='owl-'] {
	    margin-top: -87px;
	    background-color: #fff;
	    font-size: 2.4rem;
	    color: #333;
	    width: 6rem;
	    height: 6rem;
	}

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

.brands,
.instagram,
.subscribe {
	.heading p.heading-cat {
		font-weight: 400;
	}
	.heading h3.heading-title {
		font-size: 2.2rem;
		text-transform: none;
		line-height: 1.7em;
	}

}

.brands {
	.heading {
		margin-top: 6rem;
		margin-bottom: 4rem;
	}
	.heading p.heading-cat {
		margin-bottom: 2.5rem;
	}
	.brands-content {
	 	flex: 0 0 60%;
	 	max-width: 60%;
	 	display: flex;
	 	flex-wrap: wrap;
	 	margin-left: auto;
	 	margin-right: auto;

	 	> div {
	 		display: flex;
	 		align-items: center;
	 		justify-content: center;
	 	}
	}

	a.brand {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}
}

section.instagram {
	border-top: .1rem solid #ebebeb;
	padding-top: 1rem;
	.heading {
		margin-top: 5rem;
		margin-bottom: 4rem;
	}
	.heading-title {
		margin-bottom: .5rem;
	}

	.instagram-images {
		display: flex;
		flex-wrap: wrap;

		> div {
			padding: 0;
		}
	}
}

.instagram-feed {
	margin-bottom: 0;
}

.subscribe {
	.heading {
		margin-top: 0;
		margin-bottom: 2.2rem;
	}
	.heading h3.heading-title {
		color: #fff;
		margin-bottom: 0;
	}
	.heading p.heading-cat {
		font-weight: 300;
		letter-spacing: .01em;
		text-transform: none;
		margin-bottom: 0;
	}

	form {
		flex: 0 0 calc(40% - 10px);
		max-width: calc(40% - 10px);
		margin-left: auto;
		margin-right: auto;
	}

	.input-group {
		flex-wrap: nowrap;
	}

	input {
		border: .1rem solid #fff;
		border-right-width: 0;
		padding: .95rem 0 .95rem 2.2rem;
		min-width: 0;
		flex: 1 1 auto;

		font-size: 1.3rem;
		font-weight: 500;
		letter-spacing: .01em;
		color: #999;
		background-color: transparent;

		&:focus {
			outline: none;
		}
	}

	.btn-subscribe {
		min-width: 130px;
		color: $primary-color;
		border: .1rem solid #fff;
		border-left-width: 0;
		transition: all .3s;
		text-transform: uppercase;

		font-size: 1.3rem;
		letter-spacing: .1em;

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

.footer {
	background-color: #222;
	padding-top: 7rem;


	.widget-title {
		text-transform: uppercase;
		font-size: 1.3rem;;
		font-weight: 600;
		color: #fff;
	}

	p {
		color: #777;
	}
}

.widget-about p {
	max-width: 36rem;
}

.widget-about-title {
	color: #fff;
}

.footer-bottom {
	margin-top: 8rem;
	position: relative;
	padding-top: 7rem;
	padding-bottom: 5rem;
	flex: 0 0 calc((100% + 20px) * .8 + 20px);
	max-width: calc((100% + 20px) * .8 + 20px);
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-wrap: wrap;
	> div:first-child {
		padding: 0;
	}

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: -3rem;
		right: -3rem;
		height: .1rem;
		background-color: #333;
	}
}

.mmenu-active .mobile-menu-container {
    visibility: visible;
    transform: translateX(100%);
}

@media screen and (max-width: 1400px) {
	.banner-section .banner-lg .intro {
		top: 50%;
		transform: translateY(-50%);
	}
}

@media screen and (min-width: 1200px) {
	.col-xl-8-3col {
	    flex: 0 0 37.5%;
	    max-width: 37.5%;
	}
	.col-xl-8-2col {
	    flex: 0 0 25%;
	    max-width: 25%;
	}
	.col-xl-8-1col {
	    flex: 0 0 12.5%;
	    max-width: 12.5%;
	}
}

@media screen and (max-width: 1200px) {
	
	.subscribe form {
		flex: 0 0 60%;
    	max-width: 60%;
	}
}

@media screen and (max-width: 992px) {
	.icon-box-side {
		justify-content: flex-start;
	}
	.side-div {
		display: none;
	}
	.page-content-div {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.banner-section .banner-lg .intro {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.new-women,
	.new-men {
		display: flex;
		justify-content: center;
	}
	.banner-lg .intro {
		left: 3rem;
	}

}

@media screen and (max-width: 830px) {
	.intro-slide .intro {
		border: none;
	}
}

@media screen and (max-width: 768px) {
	.banner-section > div {
		padding: 0;
		margin-bottom: 2rem;
	}

	.new-women {
		.banner {
			padding-right: 1rem;
		}
		.products {
			padding-left: 0;
		}
	}
	.new-men {
		.banner {
			padding-left: 1rem;
			order: -1;
		}
		.products {
			padding-right: 0;
		}
	}
}

@media screen and (max-width: 575px) {
	.footer-bottom::before {
		left: 0;
		right: 0;
	}
}