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

//CONFIG
$font-secondary: "PT Sans", sans-serif;

$custom-font-size-1: 1.8em;
$custom-font-size-2: 3em;

//DEMO BASE
@import "demo-photography-base";

/*
* Demo Photography 3
*/
html.photography-demo-3 {
	&.safari .body {
		overflow: inherit;
	}

	&.side-header .main .container,
	&.side-header #footer .container {
    	@media(min-width: 992px) {
	    	max-width: 1140px;
    	}
    }

    &.side-header #main {
    	position: relative;
    	z-index: 999;
    }
    
    @media(min-width: 992px) and (max-width: 1200px) {
	    // Sticky Wrapper
	    .sticky-wrapper {
	    	z-index: 1000 !important;
	    }

	    &.side-header {
	    	#header.side-header {
	    		z-index: 1000 !important;
	    	}
	    }
    }


	// Headings
	h1, h2, h3, h4, h5, h6, a, p, span {
		font-family: $font-secondary;
	}

	#main {
		@media(min-width: 992px) {
			height: 100vh;
			min-height: 100vh;
		}
		transition: ease opacity 300ms;

		&.no-height {
			height: auto;
		}

		&.calc-height {
			height: calc(100vh - 86px);
			min-height: 0;

			@media (max-width: 991px) {
				height: auto !important;
			}
		}
	}

	@media(max-width: 767px) {
		#main {
			height: calc(100vh - 80px);
			min-height: calc(100vh - 80px);
		}
	}

	// Slider
	.tp-caption-photo-label {
		font-size: 18px !important;
		text-transform: uppercase !important;
		padding-bottom: 0;
		text-shadow: none;
	}

	.tp-caption-main-custom {
		text-transform: uppercase !important;
		font-size: $custom-font-size-2 !important;
	}

	.tp-caption-sub-custom {
		text-transform: uppercase !important;
		font-size: 22px !important;
		margin-top: -30px !important;
		opacity: 0.5 !important;
	}

	// Rev Slider Arrows
	.tparrows {
		&:hover {
			background: #FFF !important;
		}
	}

	// List
	.list {

		&.list-icons {

			&.list-icons-style-2 {
				li {
					&, a:first-child {
						> .fa:first-child,
						> .icons:first-child {
							border-color: transparent;
							background: transparent;
						}
					}
				}
			}

		}
	}

	// Demo 3 Owl Carousel Arrows
	.owl-carousel {
		.owl-nav {
			button.owl-prev, button.owl-next {
				height: 55px !important;
				line-height: 25px !important;
				opacity: 0.7;

				&:before {
					font-weight: bold;
				}

				&:hover {
					background-color: var(--light) !important;
					color: #000 !important;
					opacity: 1;
				}
			}
		}
	}

	// Demo 3 Custom Portfolio Arrows
	.custom-portfolio-navigation {
		.prev, .next {
			height: 55px !important;
			line-height: 25px !important;
			opacity: 0.7;

			&:before {
				top: 16px !important;
				font-weight: bold !important;
				font-size: 11px;
				left: 10px !important;
			}

			&:hover {
				background-color: var(--light) !important;
				color: #000 !important;
				opacity: 1;
			}
		}
	}	

	// Stripes - Demo 3
	.portfolio-stripes.portfolio-stripes-style-3 {
		.owl-stage {
			&:hover {
				.thumb-info {
					.thumb-info-wrapper {
						&:after {
							opacity: 1;
						}
					}
				}
			}
		}

		.owl-item {
			.portfolio-item {
				.thumb-info {
					&:hover {
						.thumb-info-wrapper {
							&:after {
								opacity: 0;
							}

							.thumb-info-title {
								bottom: 0;
								left: 0;
								right: 0;
								transform: translateY(0);
							}
						}
					}

					.thumb-info-wrapper {
						height: 100vh;

						&:before {
							content: none;
						}

						.thumb-info-title {
							width: 100%;
							max-width: 100%;
							left: 0;
							right: 0;
							background: var(--light);
							bottom: 0;
							font-size: 19px;
							padding: 20px;
							letter-spacing: 0;
							line-height: 1.3;
							text-shadow: none;
							text-transform: uppercase;
							transform: translateY(100%);
							transition: ease transform 300ms;

							.thumb-info-subtitle {
								display: block;
								text-transform: none;
								font-size: 13px;
								color: #9C9C9C;
							}
						}
					}
				}
			}
		}
	}

	// Custom Demo 3 Thumb Info 
	.portfolio-vertical-item, .horizontal-scroll-item, .portfolio-detail-image-item, .portfolio-grid-item {
		&:hover {
			box-shadow: none !important;
		}
		.thumb-info {
			&:hover {
				.thumb-info-wrapper {
					&:after {
						opacity: 0 !important;
					}

					&:before {
						bottom: -41px;
					}

					.thumb-info-title {
						bottom: 0;
						left: 0;
					}
				}
			}

			.thumb-info-wrapper {
				&:after {
					opacity: 0;
				}
				
				.thumb-info-plus {
					display: none;
				}

				.thumb-info-title {
					font-size: 19px;
					color: #1e1e1e;
					background: var(--light);
					left: 0;
					bottom: -50%;
					letter-spacing: 0;
					line-height: 1.3;
					text-align: $left !important;
					text-shadow: none;
					padding: 20px;
					text-transform: uppercase;
					width: 100%;
					max-width: none;
					opacity: 1;
					font-weight: 700 !important;
					transform: none;

					.thumb-info-sub-title {
						display: block;
						opacity: 1;
						color: #9C9C9C;
						font-size: 13px;
						text-transform: none;
						transform: none;
					}
				}
			}
		}
	}

	// Thumb Info Items Hover Effect
	#portfolioVertical, #horizontalScrollBox .content, .portfolio-list, #portfolioGrid {
		&:hover {
			li {
				.thumb-info-wrapper {
					&:after {
						opacity: 1;
					}
				}
			}
		}
	}

	// Custom Demo 3 Portfolio Detail item
	.portfolio-detail-item {
		box-shadow: none !important;
		&:hover {
			.item-image-wrapper {
				&:after {
					opacity: 0 !important;
				}
			}
		}

		.item-image-wrapper {
			position: relative;
			min-height: 283px;
			max-width: 360px;
			overflow: hidden;
			box-shadow: none;

			&:after {
				content: '';
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(36, 46, 57, 0.5);
				width: 100%;
				height: 100%;
				opacity: 0;
				z-index: 2;
				transition: ease opacity 300ms;
			}
		}

		.sub-item-description {
			background: #fff none repeat scroll 0 0;
			bottom: -100%;
			height: auto;
			padding: 25px 0 0;
			text-align: left;
			top: auto;

			&:before {
				content: none;
			}

			h5 {
				bottom: 0;
				color: #1e1e1e;
				font-size: 14px;
				font-weight: 700 !important;
				letter-spacing: 0;
				position: relative;
			}
		}

		&:hover {
			.sub-item-description {
				bottom: 0;
			}
		}
	}

	.thumb-info-icons.position-style-2 {
		z-index: 4;
	}

	// Portfolio Detail Items Hover Effect
	#portfolioDetailLoadMoreWrapper {
		&:hover {
			li {
				.item-image-wrapper {
					&:after {
						opacity: 1;
					}
				}
			}
		}
	}

	// Custom Portfolio Parallax Demo 3
	.portfolio-parallax-demo-3 {
		overflow: hidden;

		&:hover {
			&:before {
				opacity: 0 !important;
			}

			.thumb-info-title {
				bottom: 0;
				left: 0;
				right: 0;
			}
		}

		&:before {
			opacity: 0;
			background: rgba(10, 12, 36, 0.5);
		}

		.thumb-info-title {
			font-size: 19px;
			color: #1e1e1e;
			background: var(--light);
			left: 0;
			right: 0;
			bottom: -80%;
			letter-spacing: 0;
			line-height: 1.3;
			text-align: $left !important;
			text-shadow: none;
			padding: 20px;
			text-transform: uppercase;
			width: 100%;
			max-width: none;
			opacity: 1;
			transform: none;
			transition: ease bottom 300ms;

			.thumb-info-sub-title {
				display: block;
				opacity: 1;
				color: #9C9C9C;
				font-size: 13px;
				text-transform: none;
				transform: none;
			}
		}
	}

	// Parallax item Hover Effect
	#main {
		&:hover {
			.portfolio-parallax-demo-3 {
				&:before {
					opacity: 1;
				}
			}
		}
	}

	// Horizontal Scroll Box Demo 3
	#horizontalScrollBox {
		height: calc(100vh - 100px);

		.custom-portfolio-navigation {
			width: calc(100vw - 255px);
		}

		.content {
			li {
				.horizontal-scroll-item {
					.thumb-info {
						.thumb-info-wrapper {
							img {
								height: calc(100vh - 146px);

								@media (max-width: 991px) {
									height: auto !important;
								}
							}
						}
					}
				}
			}
		}
	}

	// Section Title
	.section-title {
		h1 {
			text-transform: uppercase !important;
		}
	}

	// Forms
	.form {

		.form-control {
			font-size: 13px;
			height: 40px;
		}

		textarea.form-control {
			height: auto;
		}

		input[type="submit"] {
			border-radius: 25px;
			border-width: 0;
			font-size: 13px;
			padding: 10px 20px;
		}

	}

	// Blog
	.blog-bg {
		background: var(--light);
	}

	.our-blog-item:hover:not(.blog-post) {
		box-shadow: none;
	}
}