//COMMON IMPORTS
@import "../config/imports";

h1, h2, h3, h4, h5, h6 {
	font-family: "Oswald", sans-serif;
}

.custom-absolute-y-center {
	position: absolute;
	top: 50%;
	transform: translate3d(0, -50%, 0);
}

.custom-border-color-1 {
	border-color: #31363c !important;
}

.custom-border-color-2 {
	border-color: #44494e !important;
}

.custom-filter-grayscale-1 {
	filter: grayscale(1);
}

@media(min-width: 500px) {
	.custom-ws-nowrap {
		white-space: nowrap !important;
	}
}

@media(max-width: 991px) {
	.custom-remove-left-divider {
		border-left: 0 !important;
	}
}

/* Header */
#header {
	.header-nav-main {
		nav {
			> ul {
				> li {
					> a {
					    font-family: "Oswald", sans-serif;
					    font-weight: 400;
					    font-size: 0.85rem;
					    letter-spacing: 0.5px;
					}
				}
			}
		}
	}

	.header-nav-main-arrows {
		nav {
			> ul {
				> li {
					> a {
						&.dropdown-toggle {
							&:after {
								margin-top: 3px;
							}
						}
					}
				}
			}
		}
	}

	.list {
		> li {
			> a {
				font-family: "Oswald", sans-serif;
			    font-weight: 400;
			    font-size: 0.85rem;
			    letter-spacing: 0.5px;
			    color: $color-dark;
			}
		}
	}
}

@media(min-width: 992px) and (max-width: 1199px) {
	#header {
		.header-nav-main {
			nav {
				> ul {
					> li {
						> a {
							padding: 0 10px !important;
						}
					}
				}
			}
		}
	}
}

/* Custom Section Padding */
@media(min-width: 992px) {
	.custom-section-padding-1 {
	    padding: 10vw 0 !important;
	}
}

/* Custom Product Image Styles */
@media(min-width: 1200px) {
	.custom-product-image-style-1 {
		position: absolute;
		bottom: -37px;
		#{$left}: 0;
		max-width: calc(100% + 140px);
	}
}

@media(min-width: 992px) {
	.custom-product-image-style-2 {
		position: absolute;
	    top: 50%;
	    #{$right}: 0;
	    transform: translate3d(0, -50%, 0);
	    max-width: none;
	    width: 47vw;
	}
}

/* Custom Icons */
.custom-icon-left-arrows,
.custom-icon-right-arrows {
	position: relative;
	width: 13px;
	height: 13px;
	@include if-rtl() {
		transform: rotateY(180deg);
	}
	&:before {
		content: '';
		position: absolute;
		left: -35%;
		top: 50%;
		width: 90%;
		height: 90%;
		border-top: 1px solid $color-dark;
		border-left: 1px solid $color-dark;
		opacity: 0.6;
		transform: translate3d(0, -50%, 0) rotate(-45deg);
	}
	&:after {
		content: '';
		position: absolute;
		right: -35%;
		top: 50%;
		width: 100%;
		height: 100%;
		border-top: 1px solid $color-dark;
		border-left: 1px solid $color-dark;
		transform: translate3d(0, -50%, 0) rotate(-45deg);
	}
}

.custom-icon-right-arrows {
	@include if-ltr() {
		transform: rotateY(180deg);
	}
	@include if-rtl() {
		transform: rotateY(0deg);
	}
}

/* Custom Min Width */
.custom-min-width {
    display: inline-block;
	min-width: 170px;
}

@media (min-width: 992px) and (max-width: 1199px) {
	.custom-min-width {
		min-width: 140px;
	}
}

/* Custom Play Button */
.custom-play-button-1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background: #FFF;
    color: #212529;
    transition: ease transform 300ms;
    font-size: 1.6rem;
	&:hover {
		transform: scale(1.1);
	}	
}

/* Custom List Styles */
.custom-list-style-1 {
	> li {
	    margin: 0 !important;
	    padding-right: 1rem;
	    padding-left: 1rem;
	    border-right: 1px solid #414346;
	    line-height: 1;
		&:last-child {
			border-right: 0;
		}
	}
}

/* Rating Size */
.rating-container {
	font-size: 12px !important;
}

/* Custom SVG Line Animation */
@keyframes customSVGLineAnim {
	from {
		@include if-ltr() {
		    stroke-dasharray: 310;
		    stroke-dashoffset: 170;
		}
	    @include if-rtl() {
			stroke-dasharray: 500;
		    stroke-dashoffset: 500;
	    }
	}

	to {
		@include if-ltr() {
		    stroke-dasharray: 310;
		    stroke-dashoffset: 340;
		}
		@include if-rtl() {
			stroke-dasharray: 500;
		    stroke-dashoffset: 350;
	    }
	}
}

.customSVGLineAnim {
	animation-name: customSVGLineAnim;
}

@keyframes customSVGLineAnimTwo {
	from {
	    stroke-dasharray: 820;
	    stroke-dashoffset: 500;
	}

	to {
	    stroke-dasharray: 1120;
	    stroke-dashoffset: 500;
	}
}

.customSVGLineAnimTwo {
	animation-name: customSVGLineAnimTwo;
}