:root {
  --main-color: #34CBFF;
  --secondary-color: #318AB7;
  --tertiary-color: #31A7E5;
}

/* map sizing */
#map {
	width: 100%;
	height: 100vh;
}

/* style mapbox popup info windows */
#popup {
	position: absolute;
	top: 75px;
	left: 17px;
	right: 0;
	width: 390px;
	z-index: 99999;
}
#popup > div, .similar-item {
	background: #fff;
	padding: 10px;
	border: 2px solid var(--main-color);
}
.info-window-img {
	max-width: 100%;
	height: 185px;
	overflow: hidden;
	border: 1px solid black;
}
.info-window-img img {
	margin-top: -100px;
	max-width: 365px;
}
.similar-item > a > .info-window-img {
	height: 225px;
	border: 1px solid black;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
/* This overwrites the lightbox image height (inline style) */
figure > img.mfp-img { 
	max-height: 500px !important;
}
.place-name {
	margin: 8px 0;
	color: #000;
	font-size: 22px;
}
.cat-name {
	margin: 8px 0;
}
.cat-name a {
	color: var(--secondary-color);
	font-size: 16px;
}
.site-url {
	color: var(--secondary-color);
	word-wrap: break-word;
}
.details-btn {
	font-size: 18px;
	color: #fff;
	background-color: var(--tertiary-color);
	border: none;
	padding: 5px 20px;
	margin: 15px 0;
}
.details-btn-div {
	text-align: center;
}
/* blog post */
body.tpl-post p {
  color: #585858;
  font-family: "Source Sans Pro", Helvetica, sans-serif;
  font-size: 16pt;
  font-weight: 300;
  line-height: 1.75;
}
/* slug display / warning */
.color-red {
	color: red !important;
}
/* Listing */
.headline {
	font-size: 36px;
}

.listing-logo {
	max-width: 260px;
}

.dark-section {
	background-color: #333;
	color: #ffffff;
}

.blue-section {
	background-color: #0059B6;
}

.contact-us {
	color: #007bff;
}

i.fs-5vw {
	font-size: 5vw;
}

img.img-100 {
	width: 100% !important;
}

/* Added by Ian for listing business-phone */
.business-phone a {
	font-size: 1.5rem;
}
/* Added by Ian for create listing slug-display */
#slug-display {
	margin-top: 10px;
    font-size: 1.5rem;
}
/* Added by Ian for create listing hr, faq label, and faq span */
.dark-hr {
	border-top: 1px solid #adadad;
}
.faq label {
	width: 100%;
}

.faq span {
    font-style: normal;
}

/* Added by Ian for show listing FAQ and review sections */
#faq-container, #review-container {
	background-color: #f3f5fa;
}

/* Added by Ian for create listing delete photos text */
.delete_pic span {
    text-decoration: underline;
}
.delete_pic, .delete_existing_pic {
    color: red;
}
.delete_pic:hover, .delete_existing_pic:hover {
	color: rgb(182, 0, 0);
}

/* Added by Ian for adding finger cursor over draggable arrow icons */
.order-arrow {
	cursor: pointer;
}

.listing.similar-item {
	height: 100%;
}

/* Categories */
.card-title {
	text-shadow: 1px 1px 3px black;
}

.flex-site {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.flex-content { 
	flex: 1;
}

/* Media Queries */
@media only screen and (max-width: 785px) {
	#popup {
		left: 0;
		right: 0;
		margin-left: auto; 
		margin-right: auto; 
	}
	i.fs-5vw {
		font-size: 10vw;
	}
}

@media only screen and (max-width: 768px) {
	.headline {
		font-size: 26px;
		margin-top: 20px;
	}
	.similar-item > a > .info-window-img {
		height: 275px;
	}
}

@media only screen and (max-width: 576px) { 
	#popup {
		width: 275px;
	}
	.info-window-img img {
		margin-top: -35px;
		max-width: 250px;
	}
	.listing-logo {
		max-width: 150px;
	}
	.display-4 {
		font-size: 32px;
	}
	.headline {
		font-size: 26px;
		margin-top: 20px;
	}
}

@media only screen and (max-width: 492px) { 
	.mt-n16 {
		margin-top: -16px;
	}
	.mob-text {
		font-size: 20px;
	}
}

@media only screen and (max-width: 290px) {
	i.fs-5vw {
		font-size: 5vw;
	}
}