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

/*
* Typography
*/
.custom-font-secondary {
	font-family: "Lora", serif !important;
}

h1, h2, h3 {
	font-family: "Lora", serif;
}

.custom-big-font-size-1 {
	font-size: 3.5rem;
}

@media(min-width: 576px) {
	.custom-big-font-size-1 {
		font-size: 5.5rem;
	}	
}

/*
* Spacement
*/
@media(min-width: 992px) {
	.custom-negative-margin-top-1 {
		margin-top: -360px;
	}
}

@media(max-width: 575px) {
	.pl-xs-1 {
		padding-left: .25rem !important;
	}
}

/*
* Border
*/
.custom-border-radius-1 {
	border-radius: 7px !important;
}

/*
* Buttons
*/
.custom-btn-style-1 {
	position: relative;
    border-radius: 7px;
    padding: 10px 20px;
	transition: ease transform 300ms;
	> span {
		position: relative;
		z-index: 1;
	}
	&:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: inherit;
		opacity: 0.4;
		border-radius: inherit;
		transform: translate3d(5px, 5px, 0);
		transition: ease transform 300ms;
		z-index: 0;
	}
	&:hover {
		transform: translate3d(2.5px, 2.5px, 0);
		&:before {
			transform: translate3d(0, 0, 0);
		}
	}
}

/*
* Overlay
*/
.overlay {
	&:before {
		background: #2C2C2C;
	}
}

/*
* Custom Line
*/
.custom-line {
	width: 50px;
	border-bottom: 2px solid #CCC;
}

/*
* Custom Divider Size
*/
.custom-divider-size-1 {
	height: 3px;
}

/*
* Header
*/
@media(min-width: 992px) {
	#header {
		.header-nav-main {
			nav {
				> ul {
					> li {
						> a {
							font-size: 16px;
						}
					}
				}
			}
		}
	}
}

@media(min-width: 992px) and (max-width: 1199px) {
	#header {
		.header-nav-main {
			nav {
				> ul {
					> li {
						> a {
							font-size: 14px;
						}
					}
				}
			}
		}
	}
}

/*
* Testimonials
*/
.custom-testimonial-style-1 {
	&.testimonial-with-quotes {
		blockquote {
			&:before,
			&:after {
				font-family: "Lora", sans-serif;
				font-weight: bold;
				font-size: 2.5rem;
				color: #212121;
				top: 10px;
			}
		}

		&.custom-testimonial-style-1-quote-big {
			blockquote {
				&:before,
				&:after {
					font-size: 4rem;
					top: -6px;
				}
			}
		}
	}
}

/*
* Custom Menu Item
*/
.custom-menu-item {
	.custom-menu-item-details {
		display: flex;
		justify-content: space-between;
		position: relative;
		.custom-menu-item-title {
			position: relative;
			padding-bottom: 10px;
		}
		.custom-menu-item-price {
			position: relative;
			top: -5px;
			strong {
				font-size: 1.3rem;
				> span {
					font-size: 0.6em;
				}
			}
		}
		.custom-menu-item-line {
			position: absolute;
			width: 100%;
			bottom: 0;
			border-bottom: dashed 1px #777;
		}
	}

	.custom-menu-item-desc {
		position: relative;
		margin-top: 5px;
	}

	& + .custom-menu-item {
		margin-top: 25px;
	}
}

/*
* Blog Post Date
*/
.custom-date-style-1 {
	position: relative;
	border-radius: 7px;
	transition: ease transform 300ms;
	&:before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: inherit;
		background: inherit;
		opacity: 0.7;
		transform: translate3d(5px, 5px, 0);
		transition: ease transform 300ms;
		z-index: 0;
	}
	> span {
		> span {
			font-size: 0.5em;
		    letter-spacing: 3px;
		}
	}
}

/*
* Custom Link Effects
*/
.custom-link-hover-effects {
	&:hover {
		.custom-date-style-1 {
			transform: translate3d(2.5px, 2.5px, 0);
			&:before {
				transform: translate3d(0, 0, 0);
			}
		}
	}
}

/*
* Breadcrumb
*/
.breadcrumb {
	> li + li:before {
		opacity: 0.8;
	    font-size: 0.8em;
	    padding: 0 13px 0 7px;
	}
}

/*
* Footer
*/
#footer {
	background: #2c2c2c;
	p, span, li, a:not(.btn):not(.no-footer-css) {
		color: #969696;
	}
	.footer-copyright {
		background: #2c2c2c;
	}
}