//  =================
//      Imports
//  =================

@import '../base/color_variables';      // Color Variables
@import '../base/fonticons';            // Fonticons Variables
@import '../base/urls';                 // URLS Variables
@import '../base/utilities_variables';  // Utilities Variables

.row {
	>.col-md-12 {
		.column {
			padding: $p-0 8px;
			margin: 8px $m-0;
		}
	}
}
.column {
	width: 100%;
	text-align: center;
}
.inline-modal {
	background-color: $color_377;
}
.column-modal {
	width: 25%;
	float: left;
}

/* The Modal (background) */
.modal {
	display: none;
	position: $pos-fix;
	z-index: 1050;
	padding-top: 45px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: $color_377;
}
/* Modal Content */
.modal-content {
	position: $pos-rel;
	background-color: $color_379;
	margin: auto;
	padding: $p-0;
	width: 90%;
	max-width: 1200px;
}
/* The Close Button */
.close {
	color: $white;
	position: $pos-abs;
	top: 18px;
	right: 10px;
	font-size: 35px;
	font-weight: bold;
	opacity: 1;
	&:hover {
		color: $color_299;
		text-decoration: none;
		cursor: pointer;
	}
	&:focus {
		color: $color_299;
		text-decoration: none;
		cursor: pointer;
	}
}
.mySlides {
	display: none;
	cursor: -webkit-zoom-in;
	cursor: zoom-in;
}
.cursor {
	cursor: pointer;
}
/* Next & previous buttons */
.mobile-prev {
	cursor: pointer;
	position: $pos-abs;
	top: 50%;
	width: auto;
	color: $color_375;
	font-weight: bold;
	font-size: 24px;
	border-radius: 0 3px 3px 0;
	-webkit-transition: 0.6s ease;
	transition: 0.6s ease;
	user-select: none;
	-webkit-user-select: none;
}

.mobile-next {
	cursor: pointer;
	position: $pos-abs;
	top: 50%;
	width: auto;
	color: $color_375;
	font-weight: bold;
	font-size: 24px;
	border-radius: 0 3px 3px 0;
	-webkit-transition: 0.6s ease;
	transition: 0.6s ease;
	user-select: none;
	-webkit-user-select: none;
	border-radius: 3px 0 0 3px;
	/* Position the "next button" to the right */
	right: 0;
}
/* Number text (1/3 etc) */
.numbertext {
	color: $color_376;
	font-size: 12px;
	padding: 8px 12px;
	position: $pos-abs;
	top: 0;
}
.caption-container {
	text-align: center;
	background-color: $color_207;
	padding: 14px 16px 7px;
	color: $white;
}
.demo {
	opacity: 0.6;
	&:hover {
		opacity: 1;
	}
}
.active {
	opacity: 1;
}
img.hover-shadow {
	cursor: -webkit-zoom-in;
	cursor: zoom-in;
	-webkit-transition: opacity .4s;
	-moz-transition: opacity .4s;
	-o-transition: opacity .4s;
	-ms-transition: opacity .4s;
	transition: opacity .4s;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	-o-border-radius: 0;
	border-radius: 0;
}
.hover-shadow {
	&:hover {
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}
}
.demo-gallery {
	>ul {
		margin-bottom: $m-0;
		>li {
			float: left;
			margin-bottom: 15px;
			margin-right: $m-0;
			a {
				border: $b-width-3 $solid $color_381;
				border-radius: 3px;
				display: block;
				overflow: hidden;
				position: $pos-rel;
				float: left;
				>img {
					-webkit-transition: -webkit-transform 0.15s ease 0s;
					-moz-transition: -moz-transform 0.15s ease 0s;
					-o-transition: -o-transform 0.15s ease 0s;
					transition: transform 0.15s ease 0s;
					-webkit-transform: scale3d(1, 1, 1);
					transform: scale3d(1, 1, 1);
					height: 100%;
					width: 100%;
				}
				&:hover {
					>img {
						-webkit-transform: scale3d(1.1, 1.1, 1.1);
						transform: scale3d(1.1, 1.1, 1.1);
					}
					.demo-gallery-poster {
						>img {
							opacity: 1;
						}
						background-color: $color_380;
					}
				}
				.demo-gallery-poster {
					background-color: $color_378;
					bottom: 0;
					left: 0;
					position: $pos-abs;
					right: 0;
					top: 0;
					-webkit-transition: background-color 0.15s ease 0s;
					-o-transition: background-color 0.15s ease 0s;
					transition: background-color 0.15s ease 0s;
					>img {
						left: 50%;
						margin-left: -$m-10;
						margin-top: -$m-10;
						opacity: 0;
						position: $pos-abs;
						top: 50%;
						-webkit-transition: opacity 0.3s ease 0s;
						-o-transition: opacity 0.3s ease 0s;
						transition: opacity 0.3s ease 0s;
					}
				}
			}
		}
	}
	.justified-gallery {
		>a {
			>img {
				-webkit-transition: -webkit-transform 0.15s ease 0s;
				-moz-transition: -moz-transform 0.15s ease 0s;
				-o-transition: -o-transform 0.15s ease 0s;
				transition: transform 0.15s ease 0s;
				-webkit-transform: scale3d(1, 1, 1);
				transform: scale3d(1, 1, 1);
				height: 100%;
				width: 100%;
			}
			&:hover {
				>img {
					-webkit-transform: scale3d(1.1, 1.1, 1.1);
					transform: scale3d(1.1, 1.1, 1.1);
				}
				.demo-gallery-poster {
					>img {
						opacity: 1;
					}
					background-color: $color_380;
				}
			}
			.demo-gallery-poster {
				background-color: $color_378;
				bottom: 0;
				left: 0;
				position: $pos-abs;
				right: 0;
				top: 0;
				-webkit-transition: background-color 0.15s ease 0s;
				-o-transition: background-color 0.15s ease 0s;
				transition: background-color 0.15s ease 0s;
				>img {
					left: 50%;
					margin-left: -$m-10;
					margin-top: -$m-10;
					opacity: 0;
					position: $pos-abs;
					top: 50%;
					-webkit-transition: opacity 0.3s ease 0s;
					-o-transition: opacity 0.3s ease 0s;
					transition: opacity 0.3s ease 0s;
				}
			}
		}
	}
	.video {
		.demo-gallery-poster {
			img {
				height: 48px;
				margin-left: -24px;
				margin-top: -24px;
				opacity: 0.8;
				width: 48px;
			}
		}
	}
}
.demo-gallery.dark {
	>ul {
		>li {
			a {
				border: $b-width-3 $solid $color_382;
			}
		}
	}
}
.home {
	.demo-gallery {
		padding-bottom: $p-80;
	}
}
@media screen and (min-width: 600px) and (max-width: 767px) {
	.modal-content {
		position: $pos-rel;
		background-color: $color_379;
		margin: auto;
		padding: 0;
		width: 56%;
		max-width: 1200px;
	}
	.close {
		color: $white;
		position: $pos-abs;
		top: 18px;
		right: 115px;
		font-size: 35px;
		font-weight: bold;
		opacity: 1;
	}
}
@media screen and (min-width: 768px) and (max-width: 849px) {
	.modal-content {
		position: $pos-rel;
		background-color: $color_379;
		margin: auto;
		padding: $p-0;
		width: 56%;
		max-width: 1200px;
	}
	.close {
		color: $white;
		position: $pos-abs;
		top: 18px;
		right: 154px;
		font-size: 35px;
		font-weight: bold;
		opacity: 1;
	}
}
@media screen and (min-width: 850px) and (max-width: 991px) {
	.modal-content {
		position: $pos-rel;
		background-color: $color_379;
		margin: auto;
		padding: $p-0;
		width: 45%;
		max-width: 1200px;
	}
	.close {
		color: $white;
		position: $pos-abs;
		top: 18px;
		right: 210px;
		font-size: 35px;
		font-weight: bold;
		opacity: 1;
	}
}