@keyframes load-bar {
  0% {
    left:0%;
	right:100%;
  }
  50%{
	left:0%;
	right:0%;
  }
  100% {
	left:100%;
	right:0%;
  }
}

@keyframes fade-text {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.btn-primary {
	font-family:Gloock, 'Times New Roman', Times, serif;
	font-size:16px;
	line-height:1em;
	padding:13px 23px;
	border-radius:5px;
	display:inline-block;
	margin-right:10px;
	color:#fff;
	text-decoration:none !important;
	background-color:#c04732;
}

.btn-primary:hover {
	color:#fff;
}

.btn-primary.with-arrow:after {
	content:"\f344";
	font-family:dashicons;
	display:inline-block;
	margin-left:7px;
	transition:width 0.3s ease-out;
	width:0px;
	overflow:hidden;
}

.btn-primary.with-arrow:hover:after {
	width:17px;
}

.clusters-container-box {
	width:100%;
	height:600px;
	position:relative;
}

.clusters-container-box .finder-loader {
	display:block;
	width:200px;
	height:200px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-100px;
	margin-left:-100px;
}

.clusters-container-box .finder-loader .spinner {
	display:block;
	width:100%;
	height:4px;
	position:relative;
}

.clusters-container-box .finder-loader .spinner:before {
	content:"";
	display:block;
	position:absolute;
	top:0px;
	bottom:0px;
	left:0%;
	right:100%;
	background-color:#c04732;
	animation-name: load-bar;
  	animation-duration: 1s;
  	animation-iteration-count: infinite;
  	animation-timing-function: ease-in-out;
  	animation-direction: alternate;
}

.clusters-container-box .finder-loader .loading-text {
	display: block;
	margin-top: 12px;
	width: 100%;
	text-align: center;
	font-family: Montserrat, Arial, sans-serif;
	font-weight:700;
	color:#1a1a1a;
	animation-name: fade-text;
  	animation-duration: 1s;
  	animation-iteration-count: infinite;
  	animation-timing-function: ease-in-out;
  	animation-direction: alternate;
}

.clusters-container-box.start-show .finder-loader {
	display:none;
}

.clusters-container-box .cluster-container {
	display: block;
	width: 180px;
	height: 180px;
	position: absolute;
	opacity:0;
	transition:opacity 0.4s ease-out;
	cursor:pointer;
}

.clusters-container-box.start-show .cluster-container {
	opacity:1;
}

.clusters-container-box .cluster-container.cluster-active {
	z-index:100;
	opacity:1;
}

.clusters-container-box .cluster-container .cluster-wrapper {
	width:100%;
	height:180px;
	position:relative;
	transition: transform 0.4s ease-out;
}

/* Zoom in on hover or when active */
.clusters-container-box .cluster-container:hover .cluster-wrapper,
.clusters-container-box .cluster-container.cluster-active .cluster-wrapper {
	transform: scale(1.1);
}

.clusters-container-box .cluster-container .cluster-wrapper .cluster-image-container {
	width:100px;
	position:absolute;
	top:50%;
	left:50%;
	opacity:0;
	transform: translate(-50%, -50%);
	border:4px solid #000;
	background-color:#000;
	border-radius:5px;
}

.clusters-container-box.start-show .cluster-container .cluster-wrapper .cluster-image-container {
	opacity:0.65;
}

.clusters-container-box .cluster-container.cluster-active .cluster-wrapper .cluster-image-container {
	opacity:1;
}

/* Smooth transition for images */
.clusters-container-box .cluster-container .cluster-wrapper .cluster-image-container img {
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:5px;
	opacity:0.65;
}

.clusters-container-box .cluster-container .cluster-wrapper .cluster-title {
	position:absolute;
	top:calc(80% + 20px);
	left:0px;
	right:0px;
	opacity:0;
	transition: opacity 0.4s ease-out, top 0.4s ease-out;
	text-align:center;
}

.clusters-container-box .cluster-container.cluster-active .cluster-wrapper .cluster-title {
	top:calc(100% + 20px);
	opacity:1;
}

.clusters-container-box .cluster-container .cluster-wrapper .cluster-title .cluster-title-text {
	margin:0px;
	padding:0px;
	font-size:18px;
	font-weight:700;
	color:#000;
}

.clusters-container-box .cluster-container .cluster-wrapper .cluster-description {
	display:none;
}

/* Hide modal image source inside wrapper */
.clusters-container-box .cluster-container .cluster-wrapper .cluster-modal-image-src {
	display:none;
}

/* Modal styles */
#cluster-modal {
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: rgba(0,0,0,0.7);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

#cluster-modal-title {
	margin-top: 0;
	margin-bottom: 10px;
	font-size: 32px;
	font-weight: 500;
	text-align:left;
}

#cluster-modal-content {
	background: #fff;
	padding: 20px;
	box-sizing:border-box;
	border-radius: 8px;
	width: 1000px;
	position: relative;
	text-align:center;
}

#cluster-modal-content:after {
	content:"";
	display:block;
	clear:both;
}

#cluster-modal-close {
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 24px;
	font-weight: bold;
	cursor: pointer;
}

.cluster-modal-display {
	display:flex;
	flex-direction:row;
	flex-wrap: nowrap;
	justify-content:flex-start;
}

#cluster-modal-image {
	margin-right:50px;
}

#cluster-modal-image img {
	width:350px;
	height: auto;
	border-radius: 10px;
	margin-bottom: 15px;
}

#cluster-modal-image-caption {
	margin-bottom:10px;
	display:block;
	font-style:italic;
	border-radius:7px;
	line-height:1.4em;
	padding:10px 14px;
	font-size:0.92em;
	color:#5c5a57;
	background-color:#fff7e0;
}

#cluster-modal-image-caption p {
	margin:0px;
}

.cluster-modal-text {
	flex-shrink:7;
}

#cluster-modal-description {
	text-align:left;
	font-size:16px;
	color:#3e3e3e;
}

.cluster-btn-link {
	margin-top:20px;
}