// Set the variable defaults in case they are missing in the template
$base-title-color: #4d4d4d !default;

.g-places {
	.image-bottom {
		margin-bottom: -($content-margin + $content-padding + $section-padding);
		@include breakpoint(mobile-only) {
			margin-bottom: 0;
		}
	}
	img {
		width: 100%;
	}
	.g-places-container {
		position: relative;
	}
	.g-places-item-toggle {
		border: 4px solid rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		cursor: pointer;
		box-shadow: 0 20px 17px rgba(0, 0, 0, 0.5);
		span {
			border-radius: 50%;
			width: 30px;
			height: 30px;
			line-height: 30px;
			text-align: center;
			background: $accent-color-1;
			color: #ffffff;
			@include transition(all 0.2s);
		}
		&:hover {
			span {
				background: lighten($accent-color-1, 8%);
			}
		}
	}
	.g-places-item {
		position: absolute;
		@include breakpoint(mobile-only) {
			display: none !important;
		}
	}
	.g-places-item-content {
		background: #ffffff;
		border: none;
		border-radius: 3px;
		padding: 20px;
		color: $base-text-color !important;
		strong {
			color: $base-text-color !important;
		}
	}
	.uk-dropdown, .uk-dropdown-blank {
		z-index: 999;
		box-shadow: 0 0 30px rgba(0,0,0,0.2);
		margin-top: -10px;
		width: 320px;
		&:before {
			content: '';
			position: absolute;
			width: 30px;
			height: 30px;
			left: 50%;
			margin-left: -15px;
			bottom: -3px;
			border-radius: 2px;
			background: #ffffff;
			box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
			@include transform(rotate(45deg));
		}
	}
	.g-places-title {
		margin: 0;
		a {
			color: $base-title-color;
			&:hover {
				color: $accent-color-1;
			}
		}
	}
	.g-places-desc {
		margin-top: 10px;
	}
	.g-places-special {
		font-style: italic;
		float: left;
		@include breakpoint(small-mobile-range)  {
			float: none;
		}
		@include breakpoint(tablet-range) {
			float: none;
		}
		i {
			margin-right: 5px;
		}
	}
	.g-places-link {
		float: right;
		font-style: italic;
		i {
			margin-left: 10px;
		}
		@include breakpoint(small-mobile-range) {
			float: none;
			margin-top: 5px;
		}
		@include breakpoint(tablet-range) {
			float: none;
			margin-top: 5px;
		}
	}
	.no-special {
		.g-places-link {
			float: none;
		}
	}
	.no-link {
		.g-places-special {
			float: none;
		}
	}
	.g-bottom-info {
		margin-top: 15px;
	}

	.g-places-slideset {
		display: none !important;
		margin-top: 40px;
		&.particle-image-bottom {
			margin-top: 0;
		}
		@include breakpoint(mobile-only) {
			display: block !important;
		}
		.uk-slider-container {
			padding: 25px;
			margin: -25px;
		}
		.g-places-item-mobile {
			box-shadow: 0 0 30px rgba(0,0,0,0.2);
		}
		.uk-dotnav > .uk-active > * {
			background: $accent-color-1 !important;
		}
	}
	&.light-nav {
		.uk-dotnav > * > * {
			background: rgba(255,255,255,0.15);
			&:hover {
				background: rgba(255,255,255,0.4);
			}
		}
	}
}