/* panels */

.block {
	display: block;
}

.inline {
	display: inline;
}

.inline-block {
	display: inline-block;
}

.hidebox {
	display: none;
}

.center {
	display: table;
	margin: 0px auto;
}

.full-width {
	width: 100%;
}

.full-height {
	height: 100%;
}

.full-box {
	width: 100%;
	height: 100%;
}

.fixed-image-width {
	width: 300px;
}

.truncate {
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
}

.clip {
	overflow: hidden;
}

.noclip {
	overflow: inherit;
}

.col-container {
	display: table;
	width: 100%;
}

.col-cell {
	display: table-cell;
}

.col-cell-50 {
	width: 50%;
}

.sticky-header thead th {
    position: sticky;
    top: 0px;
    background-color: white;
}

/* position elements */

.pos-rel {
	position: relative;
}

.pos-abs-a {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.pos-abs-t {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

.pos-abs-l {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
}

.pos-abs-r {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
}

.pos-abs-tl {
	position: absolute;
	top: 0;
	left: 0;
}

.pos-abs-tr {
	position: absolute;
	top: 0;
	right: 0;
}

.pos-abs-lc {
	position: absolute;
	top: 50%;
	left: 0;
}

.pos-abs-rc {
	position: absolute;
	top: 50%;
	right: 0;
}

.pos-abs-b {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

.pos-abs-bl {
	position: absolute;
	bottom: 0;
	left: 0;
}

.pos-abs-br {
	position: absolute;
	bottom: 0;
	right: 0;
}

/* margins adding spacing */

.mtl {
	margin-top: 30px;
}

.mbl {
	margin-bottom: 30px;
}

.mll {
	margin-left: 30px;
}

.mrl {
	margin-right: 30px;
}

.mtm {
	margin-top: 15px;
}

.mbm {
	margin-bottom: 15px;
}

.mlm {
	margin-left: 15px;
}

.mrm {
	margin-right: 15px;
}

.mts {
	margin-top: 8px;
}

.mbs {
	margin-bottom: 8px;
}

.mls {
	margin-left: 8px;
}

.mrs {
	margin-right: 8px;
}

.mtt {
	margin-top: 4px;
}

.mbt {
	margin-bottom: 4px;
}

.mlt {
	margin-left: 4px;
}

.mrt {
	margin-right: 4px;
}

.mtz {
	margin-top: 0;
}

.mbz {
	margin-bottom: 0;
}

.mlz {
	margin-left: 0;
}

.mrz {
	margin-right: 0;
}

/* padding for adding spacing */

.ptl {
	padding-top: 30px;
}

.pbl {
	padding-bottom: 30px;
}

.pll {
	padding-left: 30px;
}

.prl {
	padding-right: 30px;
}

.ptm {
	padding-top: 15px;
}

.pbm {
	padding-bottom: 15px;
}

.plm {
	padding-left: 15px;
}

.prm {
	padding-right: 15px;
}

.pts {
	padding-top: 8px;
}

.pbs {
	padding-bottom: 8px;
}

.pls {
	padding-left: 8px;
}

.prs {
	padding-right: 8px;
}

.ptt {
	padding-top: 4px;
}

.pbt {
	padding-bottom: 4px;
}

.plt {
	padding-left: 4px;
}

.prt {
	padding-right: 4px;
}

.ptz {
	padding-top: 0;
}

.pbz {
	padding-bottom: 0;
}

.plz {
	padding-left: 0;
}

.prz {
	padding-right: 0;
}

/* alignment */

.vat {
	vertical-align: top;
}

.vam {
	vertical-align: middle;
}

.vab {
	vertical-align: bottom;
}

#position-box {
	border: 1px solid #f58220;
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
}

/* Fallback label for placeholder */

.placeholder-label {
	display: none;
}

.no-placeholder .placeholder-label {
	display: inline-block;
}

/* fixed size buttons */

.social-button {
	min-width: 220px;
}

.circle-button {
	color: red;
	background-color: white;
	background-color: rgba(255, 255, 255, 0.8);
	font-size: 18px;
    border-radius: 50%;
	display: inline-block;
	width: 36px;
	height: 36px;
	text-align: center;
	padding-top: 5px;
}

.circle-button:hover, .circle-button:focus {
	background-color: white;
}

.border-button {
	border-style: solid;
	border-width: 1px;
	border-color: #ccc;
	padding: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px
}

a.border-button {
	text-decoration: none;
}

.border-button:hover, .border-button:focus {
	border-color: #aaa;
}

.action-button {
	min-width: 180px;
}

.small-action-button {
	min-width: 140px;
}

.hint-button {
	width: 110px;
	padding: 4px 2px;
	margin: 3px;
}

.mobile .hint-button {
	margin: 5px 3px;
}

.hint-button i {
	font-size: 28px;
}

.filter-button {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	color: #444;
	background-color: #ddd;
	width: 99px;
	height: 40px;
	padding-top: 8px;
	border: 1px solid #ccc;
	margin-bottom: 2px;
}

a.action-selected, a.action-selected:hover, a.action-selected:focus {
	background-color: #2f7386;
	color: white;
}

.guide-button {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0;
	border-radius: 38px 0 0 0;
	font-size: 16px;
	padding-top: 11px;
	padding-left: 9px;
	width: 38px;
	height: 38px;
	background: #c3c3c3;
	color: white;
}

.guide-button:focus, .guide-button:hover {
	background: #aaa;
	color: white;
}

.guide-button.primary, .guide-button-small.primary  {
	background: #2f7386;
	color: white;
}

.guide-button.primary:focus, .guide-button.primary:hover, .guide-button-small.primary:focus, .guide-button-small.primary:hover {
	background: #1b424d;
}

.guide-button.leuketip {
	background: #f58220;
	color: white;
	padding-top: 12px;
	padding-left: 8px;
	font-size: 14px;
}

.guide-button.leuketip:focus, .guide-button.leuketip:hover {
	background: #ea6d20;
}

#city-spots-panel .spot-tile .guide-button, #guide-spots-panel .spot-tile .guide-button, .spot-tile .guide-button {
	margin-right: 15px;
}

.guide-button-small {
	padding-top: 10px;
	padding-left: 8px;
	border-radius: 34px 0 0 0;
	width: 34px;
	height: 34px;
}

.guide-button-small.leuketip {
	padding-top: 10px;
	padding-left: 8px;
}

#check-spot-panel {
	margin-bottom: 150px;
}

#check-spot-panel .info-panel {
	min-height: 645px;
	background-color: #f5f5f5;
}

#check-spot-panel .panel-heading {
	background-color: #f58220;
	color: white;
	border-color: #f58220;
}

#check-spot-panel .panel-default {
    border: none;
}

#check-spot-panel .panel-body {
	background-color: #f5f5f5;
}

#check-spot-panel .tab-content {
	background-color: white;
	padding: 15px;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

#check-spot-panel .toggle.btn-xs {
	min-width: 40px;
}

#check-spot-panel .nav>li.disabled>a {
	color: #bbb;
}

/* carousel styling */

.slider-popup .carousel-control {
	padding-top: 80px;
	text-shadow: none;
}

.slider-popup .carousel-control.left, .slider-popup .carousel-control.right {
	background-image:none !important;
	filter:none !important;
}

.slider-popup a.carousel-control {
	color: #2f7386;
	opacity: 1.0;
}

.slider-popup a.carousel-control:hover, .slider-popup a.carousel-control:focus {
	color: #1b424d;
}

.slider-popup ol.carousel-indicators {
    margin-bottom: 0;
}

.slider-popup .carousel-indicators li {
	border-color: #2f7386;
	width: 14px;
    height: 14px;
    margin: 0 4px;
}

.slider-popup .carousel-indicators .active {
	background-color: #2f7386;
	width: 14px;
    height: 14px;
}

@media (max-width: 767px) {
	.slider-popup .carousel-indicators li {
		width: 18px;
	    height: 18px;
	}

	.slider-popup .carousel-indicators .active {
		width: 18px;
	    height: 18px;
	}
}

/* text styling */

.mobile .select-cities .dropdown-menu {
	font-size: 18px;
}

.mobile .navbar .dropdown-menu {
	font-size: 18px;
}

.mobile .action-button, .mobile .small-action-button {
	font-size: 18px;
}

.mobile .spot-action-button {
	font-size: 14px;
}

h1.photo-banner-title-large {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 5.0em;
	font-weight: bold;
	color: white;
}

h1.photo-banner-title, h2.photo-banner-title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 4.0em;
	font-weight: bold;
	color: white;
}

h2.tile-title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 2.7em;
	font-weight: bold;
	color: white;
}

h4.tile-title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	color: white;
}

@media (max-width: 767px) {
	h1.photo-banner-title-large {
		font-size: 4.0em;
	}

	h1.photo-banner-title, h2.photo-banner-title {
		font-size: 3.0em;
	}
}

@media (max-width: 359px) {
	h1.photo-banner-title-large {
		font-size: 3.5em;
	}

	h1.photo-banner-title, h2.photo-banner-title {
		font-size: 2.5em;
	}
}

.photo-text, .photo-text:hover, .photo-text:focus {
	color: white;
	text-decoration: none;
}

.photo-icon, a.photo-icon {
	color: white;
}

.circle-icon {
	display: inline-block;
	width: 32px;
	height: 32px;
	line-height: 32px;
	background-color: #ccc;
	color: white;
	border-radius: 50%;
	font-size: 18px;
	text-align: center;
}

.small-icon {
	font-size: 12px;
}

.missing-photos-panel {
	padding-top: 90px;
}

.missing-photos-panel .type-icon {
	font-size: 72px;
	color: #aaa;
}

.spot-banner-nav {
	font-size: 28px;
	padding-top: 136px
}

.page-title .type-icon {
	font-size: 28px;
	vertical-align: text-bottom;
	margin-bottom: 5px;
}

.spot-title .type-icon {
	font-size: 16px;
	margin-right: 2px;
	margin-top: 2px;
	vertical-align: text-top;
}

.about-icon {
	display: inline-block;
	width: 102px;
	height: 102px;
	line-height: 102px;
	/* background-color: #2f7386 */
	color: #2f7386;
	border-radius: 50%;
	font-size: 56px;
	text-align: center;
	margin-top: 28px;
}

.no-pointer {
	pointer-events: none;
}

.page-title {
	margin-top: 0px;
	margin-bottom: 0px;
 }

.spot-title {
	font-size: 16px;
	margin-top: 0;
	margin-bottom: 0;
	line-height: 20px;
 }

/* rounded corners */

.rcal {
	border-radius: 16px;
	-moz-border-radius: 16px;
	-webkit-border-radius: 16px;
	-o-border-radius: 16px;
}

.rcam {
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-o-border-radius: 8px;
}

.rcas {
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	-o-border-radius: 4px;
}

.rctl {
	border-top-left-radius: 16px;
	-moz-border-top-left-radius: 16px;
	-webkit-border-top-left-radius: 16px;
	-o-border-top-left-radius: 16px;
	border-top-right-radius: 16px;
	-moz-border-top-right-radius: 16px;
	-webkit-border-top-right-radius: 16px;
	-o-border-top-right-radius: 16px;
}

.rctm {
	border-top-left-radius: 8px;
	-moz-border-top-left-radius: 8px;
	-webkit-border-top-left-radius: 8px;
	-o-border-top-left-radius: 8px;
	border-top-right-radius: 8px;
	-moz-border-top-right-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-o-border-top-right-radius: 8px;
}

.rcts {
	border-top-left-radius: 4px;
	-moz-border-top-left-radius: 4px;
	-webkit-border-top-left-radius: 4px;
	-o-border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	-moz-border-top-right-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-o-border-top-right-radius: 4px;
}

/* borders */

.ba {
	border: 1px solid #ddd;
}

.bbn {
	border-bottom: none;
}

.bt {
	border-top: 1px solid #ddd;
}

.bb {
	border-bottom: 1px solid #ddd;
}

/* Always reserve space for scrollbar otherwise the layout jumps to the right */
/* text size adjust is used to prevent larger font size in landscape mode on iPhone */
html {
	/* XXX -webkit-overflow-scrolling: touch; */
	height: 100%;
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
	overflow-y: scroll;
	background-color: white;
}

/* required to prevent delay in affix on ipad/iphone, see http://stackoverflow.com/questions/20772451/fixed-position-delayed-on-ios */
.fix-deplayed-position {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

/* setting for correct width of content in iframe on iphone/ipad/safari */

.iframe-body {
	width: 1px;
	min-width: 100%;
	*width: 100%;
	padding-top: 0;
	min-height: 700px; /* larger than popup, scrollbar used, prevent scrolling page below */
}

.modal-body {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}


#map-popup .modal-body, #spot-popup .modal-body {
	height: 500px;
}

#spot-popup iframe {
	width: 100%;
	height: 98%;
	border: none;
}

.button-box {
	width: 238px;
}

@media (min-width: 768px) {
	.row-eq-height {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}

	.button-box {
		width: 478px;
	}
}

@media (max-width: 767px) {
	.text-xs-center {
		text-align: center;
	} 

	.xs-center {
		display: table;
		margin: 0px auto;
	} 
}

@media (min-width: 1200px) {

	.button-box {
		width: 956px;
	}
}

.navbar-brand {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 15px;
	padding-right: 15px;
}

.navbar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
	margin-left: 0px;
}

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
	max-height: 480px;
}

/* scroll top button */

#scroll-top {
	position: fixed;
	right: 15px;
	bottom: 15px;
	cursor: pointer;
	width: 40px;
	height: 40px;
	background-color: #f58220;
	color: white;
	font-size: 20px;
	z-index: 1025;
	padding-top: 5px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	margin-bottom: -55px;
	-webkit-transition: margin-bottom 0.5s ease;
	-moz-transition: margin-bottom 0.5s ease;
	-o-transition: margin-bottom 0.5s ease;
	transition: margin-bottom 0.5s ease;
}

#scroll-top.show-scroll-top {
	margin-bottom: 0;
}

/* Extra margin at bottom on iphone, otherwise iphone toolbar is displayed first instead of scroll-up */
.iphone #scroll-top {
	bottom: 32px;
	margin-bottom: -87px;
}

.iphone #scroll-top.show-scroll-top {
	margin-bottom: 0;
}

#scroll-top:focus, #scroll-top:hover {
	background-color:#ea6d20;
}

/* share buttons */

.share-button {
	display: inline-block;
	cursor: pointer;
	width: 40px;
	height: 40px;
	font-size: 20px;
	margin-right: 8px;
	padding-top: 5px;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px
}

/* styling of different panels */

.jumbotron {
	margin-bottom: 0;
}

.guide-title-panel {
	background-color: white;
	margin-top: 9%;
	width: 78%;
	height: 28%;
	border-top-right-radius: 10px;
	-moz-border-top-right-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-o-border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	-moz-border-bottom-right-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-o-border-bottom-right-radius: 10px;
}

.guide-title {
	padding-top: 2%;
	padding-left: 0;
	width: 100%;
}

.guide-title p {
	color: #f58220;
	border-bottom: 2px solid #ccc;
	margin-top: 0;
	margin-bottom: 0;
	margin-right: 10%;
	padding-left: 6%;
	padding-top: 1%;
	font-size: 13px;
}

.guide-title h3 {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 1%;
	padding-bottom: 0;
	padding-left: 6%;
	font-size: 24px;
	font-weight: bold;
}

.guide-title h4 {
	color: #aaa;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 1%;
	padding-bottom: 0;
	padding-left: 6%;
	margin-right: 2%;
	font-size: 11px;
}

.guide-footer-panel {
	background-color: #f58220;
	color: white;
	font-size: 10px;
	padding-left: 6px;
	padding-right: 6px;
	margin-bottom: 4%;
	height: 7%;
}

.guide-footer-panel div {
	vertical-align: middle;
}

.guide-footer-panel img {
	height: 13px;
}

.photo-banner {
	min-height: 500px;
	width: 100%;
	background-position: center;
	background-size: cover;
}

.photo-banner-padding {
	padding-top: 4%;
	padding-bottom: 3%;
}

.city-photo-banner-padding {
	padding-top: 7%;
	padding-bottom: 3%;
}

.photo-banner-overlay {
	min-height: 500px;
	width: 100%;
	background: rgba(0,0,0,0.3);
}

.special-streets-banner {
	height: 300px;
	width: 100%;
	background-position: center;
	background-image: url('../images/banner/special-streets.jpg?version=19.4.1');
	background-size: cover;
}

.spot-offer-banner {
	height: 433px;
	width: 100%;
	background-position: center;
	background-image: url('../images/banner/spot-offer.jpg?version=19.4.1');
	background-size: cover;
}

.city-lover-banner {
	height: 300px;
	width: 100%;
	background-position: center;
	background-image: url('../images/banner/city-lover-bg.jpg?version=19.4.1');
	background-size: cover;
}

.guide-use {
	background-position: center bottom;
	background-image: url('../images/info/guide-use.png?version=19.4.1');
	background-repeat: no-repeat;
}

.first-guide {
	background-position: center bottom;
	background-image: url('../images/info/first-guide.png?version=19.4.1');
	background-repeat: no-repeat;
}

.good-start {
	background-position: center bottom;
	background-image: url('../images/info/good-start.png?version=19.4.1');
	background-repeat: no-repeat;
}

.guide-shadow {
	-moz-box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	-webkit-box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	box-shadow: 0 10px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}

.new-spot-start {
	background-position: center bottom 16px;
	background-image: url('../images/info/new-spot-start.png?version=19.4.1');
	background-repeat: no-repeat;
}

.new-spot-ready {
	background-position: center bottom 16px;
	background-image: url('../images/info/new-spot-ready.png?version=19.4.1');
	background-repeat: no-repeat;
}

.photo-overlay {
	background: rgba(0,0,0,0.4);
}

.city-shop-bg {
	background-position: center;
	background-image: url('../images/bg/city-shop-info.jpg?version=19.4.1');
	background-size: cover;
}

.city-eat-bg {
	background-position: center;
	background-image: url('../images/bg/city-eat-info.jpg?version=19.4.1');
	background-size: cover;
}

.city-see-bg {
	background-position: center;
	background-image: url('../images/bg/city-see-info.jpg?version=19.4.1');
	background-size: cover;
}

.city-act-bg {
	background-position: center;
	background-image: url('../images/bg/city-act-info.jpg?version=19.4.1');
	background-size: cover;
}

.city-sleep-bg {
	background-position: center;
	background-image: url('../images/bg/city-sleep-info.jpg?version=19.4.1');
	background-size: cover;
}

.city-discover-bg {
	background-position: left;
	background-image: url('../images/bg/city-discover.jpg?version=19.4.1');
	background-size: cover;
}

.guide-download-bg {
	background-position: center bottom;
	background-image: url('../images/info/guide-download.png?version=19.4.1');
	background-repeat: no-repeat;
}

@media (max-width: 359px) {
	#home-banner {
		background-image: url('../images/banner/xxs/home.jpg?version=19.4.1');
	}

	#concept-banner {
		background-image: url('../images/banner/xxs/concept.jpg?version=19.4.1');
	}

	#entrepreneur-banner {
		background-image: url('../images/banner/xxs/entrepreneur.jpg?version=19.4.1');
	}

	#guide-banner {
		background-image: url('../images/banner/xxs/user-guide.jpg?version=19.4.1');
	}

	#user-cities-panel {
		background-image: url('../images/banner/xxs/home.jpg?version=19.4.1');
	}
}

@media (min-width: 360px) {
	#home-banner {
		background-image: url('../images/banner/xs/home.jpg?version=19.4.1');
	}

	#concept-banner {
		background-image: url('../images/banner/xs/concept.jpg?version=19.4.1');
	}

	#entrepreneur-banner {
		background-image: url('../images/banner/xs/entrepreneur.jpg?version=19.4.1');
	}

	#guide-banner {
		background-image: url('../images/banner/xs/user-guide.jpg?version=19.4.1');
	}

	#user-cities-panel {
		background-image: url('../images/banner/xs/home.jpg?version=19.4.1');
	}
}

@media (min-width: 768px) {
	#home-banner {
		background-image: url('../images/banner/sm/home.jpg?version=19.4.1');
	}

	#concept-banner {
		background-image: url('../images/banner/sm/concept.jpg?version=19.4.1');
	}

	#entrepreneur-banner {
		background-image: url('../images/banner/sm/entrepreneur.jpg?version=19.4.1');
	}

	#guide-banner {
		background-image: url('../images/banner/sm/user-guide.jpg?version=19.4.1');
	}

	#user-cities-panel {
		background-image: url('../images/banner/sm/home.jpg?version=19.4.1');
	}
}

@media (min-width: 992px) {
	#home-banner {
		background-image: url('../images/banner/md/home.jpg?version=19.4.1');
	}

	#concept-banner {
		background-image: url('../images/banner/md/concept.jpg?version=19.4.1');
	}

	#entrepreneur-banner {
		background-image: url('../images/banner/md/entrepreneur.jpg?version=19.4.1');
	}

	#guide-banner {
		background-image: url('../images/banner/md/user-guide.jpg?version=19.4.1');
	}

	#user-cities-panel {
		background-image: url('../images/banner/md/home.jpg?version=19.4.1');
	}
}

@media (min-width: 1200px) {
	#home-banner {
		background-image: url('../images/banner/lg/home.jpg?version=19.4.1');
	}

	#concept-banner {
		background-image: url('../images/banner/lg/concept.jpg?version=19.4.1');
	}

	#entrepreneur-banner {
		background-image: url('../images/banner/lg/entrepreneur.jpg?version=19.4.1');
	}

	#guide-banner {
		background-image: url('../images/banner/lg/user-guide.jpg?version=19.4.1');
	}

	#user-cities-panel {
		background-image: url('../images/banner/lg/home.jpg?version=19.4.1');
	}
}

#city-banner {
	background-color: #ddd;
	background-image: url('../images/banner/coming-soon?version=19.4.1');
}

.about-panel {
	background-color: #efefef;
}


a.hint, .hint {
	font-weight: bold;
}

.home-panel {
	width: 280px;
}

@media (max-width: 767px) {
	.home-panel {
		width: 240px;
	}
}

.hint-panel {
	display: table;
	width: 280px;
	margin: 0px auto;
	text-align: center;
}

@media (max-width: 991px) {
	.hint-panel {
		width: 210px;
	}
}

@media (max-width: 767px) {
	.hint-panel {
		width: 240px;
	}
}

.bg-light-green {
	background-color: #689fae;
	color: white;
}

.bg-dark-green {
	background-color: #2f7386;
	color: white;
}

.bg-light-grey {
	background-color: #efefef;
}

.bg-dark-grey {
	background-color: #ddd;
}

.bg-marker-green {
	background-color: #2f7386;
	background-image: url('../images/pattern/marker-outline-green.png?version=19.4.1');
	color: white;
}

.bg-marker-grey {
	background-color: #8c8c8c;
	background-image: url('../images/pattern/marker-outline-light.png?version=19.4.1');
	color: white;
}

.bg-marker-green .photo-tile {
	border: none;
}

.bg-marker-green .blog-part-description a, .bg-marker-grey .blog-part-description a {
	color: white;
	text-decoration: underline;
}

.bg-marker-green .blog-part-description a:hover, .bg-marker-green .blog-part-description a:focus, .bg-marker-grey .blog-part-description a:hover, .bg-marker-grey .blog-part-description a:focus {
	color: #ddd;
	text-decoration: underline;
}

.bg-marker-green .photo-tile, .bg-marker-grey .photo-tile {
	border: none;
}

.leuketip-panel {
	color: white;
	background-color: #f58220;
}

.leuketip-panel a {
	color: #f58220;
	background-color: white;
	margin-top: 2px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 6px;
	padding-right: 6px;
	display: inline-block;
}

.leuketip-panel a:hover, .leuketip-panel a:focus {
	color: #f58220;
}

#city-title {
	padding-top: 5%;
	height: 100%;
}

#city-description {
	padding-top: 3%;
	height: 100%;
}

.spot-banner {
	background-color: #efefef;
	height: 300px;
	border-bottom: 1px solid #efefef;
}

#spot-guide-panel {
	background-color: #efefef;
}

#favorite-spot-panel {
	background-color: #2f7386;
	color: white;
}

#partners-panel {
	background-color: #efefef;
}

#spot-info {
	background-color: white;
}

.city-details-popup .nav-tabs > li > a {
	min-width: 50px;
	text-align: center;
}

#user-banner {
	background-color: white;
}

#user-info-tabs .nav-tabs {
    border: none;
}

#user-info-tabs .nav-tabs > li > a {
    border: none;
}

#user-info-tabs .nav-tabs > li.active > a {
    background-color: #efefef;
    border: none;
    border-bottom: solid 1px #efefef;
}

#user-info-tabs .nav-tabs > li > a:hover {
    border-bottom: solid 1px #ddd;
}

#user-info-tabs .nav-tabs > li.active > a:hover {
    border-bottom: solid 1px #efefef;
}

#user-city-trips {
	background-color: #efefef;
}

#user-activity {
	background-color: #efefef;
}

#user-newsletter-panel > div {
	background-color: #2f7386;
	color: white;
	padding: 10px;
}

#user-newsletter-panel h4 {
	margin-top: 0;
	line-height: 140%;
}

#user-register-panel > div {
	background-color: #efefef;
	padding: 10px;
}

#user-register-panel h4 {
	line-height: 140%;
}
    
#guides-panel {
	background-color: #efefef;
}

#guide-city-panel {
	background-color: #8C8C8C;
	color: white;
}

#user-guides-panel {
	background-color: #efefef;
}

#city-guides-panel {
	background-color: white;
}

#city-guides-panel.no-user-guides {
	background-color: #efefef;
}

#spots-search-popup .search-panel {
	width: 100%;
}

#spots-search-popup .search-panel .panel-default {
	margin-bottom: 4px;
}

#spots-search-popup .select-all-heading, #spots-search-popup .select-guide-heading {
	padding: 0;
}

#spots-search-popup .select-all-heading .select-all, #spots-search-popup .select-guide-heading .select-guide {
	border: none;
}

#spots-search-popup .select-all-heading .select-all .badge, #spots-search-popup .select-guide-heading .select-guide .badge {
    background-color: #777;
}

#spots-search-popup .select-all-heading .select-all.active .badge, #spots-search-popup .select-guide-heading .select-guide.active .badge {
	background-color: white;
}

.panel-default>.panel-heading {
	border-bottom: none;
}

.flash-icon {
	-webkit-animation-name: flash-icon-frames;
	-webkit-animation-duration: 0.8s;
	-webkit-animation-iteration-count: 1;
	
	animation-name: flash-icon-frames;
	animation-duration: 0.8s;
	animation-iteration-count: 1;
}

@-webkit-keyframes flash-icon-frames {
	0% {
    	transform: scale(1);
	}
	50% {
   	 	transform: scale(1.5);
	}
	100% {
    	transform: scale(1);
	}
}

@keyframes flash-icon-frames {
	0% {
    	transform: scale(1);
	}
	50% {
    	transform: scale(1.5);
	}
	100% {
    	transform: scale(1);
	}
}

.flash-button {
	-webkit-animation-name: flash-button-frames;
	-webkit-animation-duration: 0.8s;
	-webkit-animation-iteration-count: 1;
	
	animation-name: flash-button-frames;
	animation-duration: 0.8s;
	animation-iteration-count: 1;
}

@-webkit-keyframes flash-button-frames {
	0% {
    	background-color: default;
	}
	50% {
    	background-color: #f54720;
	}
	100% {
    	background-color: default;
	}
}

@keyframes flash-button-frames {
	0% {
    	background-color: default;
	}
	50% {
    	background-color: #f54720;
	}
	100% {
    	background-color: default;
	}
}

.large-heart {
    color: #f58220;
    font-size: 0;
    margin-top: 130px;
    z-index: 100;
}

.heart-animation {
    font-size: 48px;
	-webkit-transition: font-size 0.8s ease-out;
	-moz-transition: font-size 0.8s ease-out;
	-o-transition: font-size 0.8s ease-out;
	transition: font-size 0.8s ease-out;
}

#guide-suggestions-panel {
	background-color: white;
}

#media-banner {
	background-color: white;
}

#users-banner {
	background-color: white;
}

#users-panel {
	background-color: white;
}

#spots-banner {
	background-color: white;
}

#spots-panel {
	background-color: white;
}

#concept-panel {
	background-color: white;
}

#cooperate-panel {
	background-color: #c6e0f7;
}

.discover-panel {
	color: white;
	width: 100%;
	background-position: center;
	background-size: cover;
	min-height: 500px;
}

#about-leuketip {
	background-color: #efefef;
	background-image: url('../images/banner/about-leuketip.jpg?version=19.4.1');
	background-position: center;
	background-size: cover;
	height: 525px;
}

.empty-ad-panel {
	background-color: #541d6b;
	color: white;
}

#tools-footer-panel {
	background-color: #8C8C8C;
	background-image: url('../images/pattern/marker-outline-light.png?version=19.4.1');
	color: white;
}

#footer-panel {
	background-color: #2f7386;
	color: white;
	padding-bottom: 40px;
}

#footer-panel a {
	color: white;
}

#improve-spot-panel {
	background-color: #efefef;
}

#admin-panel table tr.available td {
	border-top: none;
	padding-top: 0;
}

#admin-photos-panel {
	background-color: #efefef;
}

#home-guide-panel {
	background-color: #efefef;
}

#cities-banner {
	background-color: white;
}

#cities-panel {
	background-color: #efefef;
}

#city-spots-panel {
	background-color: #efefef;
	padding-top: 0;
}

#hint-details-panel {
	background-color: #efefef;
}

.bg-light-grey .blog-spots-panel .spot-tile {
	background-color: white;
	border: none;
}

.license {
	padding-top: 16px;
	padding-left: 16px;
	padding-right: 4px;
	padding-bottom: 4px;
	color: #aaa;
	font-size: 16px;
	cursor: help;
}

.license:hover, .license:focus {
	color: #f58220;
}

.tile-city-name {
	top: 50%;
	margin-top: -23px;
}

.tile-city-subtitle {
	top: 50%;
	margin-top: 30px;
}

.tile-new-city-icon, .tile-new-guide-icon {
	top: 45%;
	font-size: 72px;
	margin-top: -36px;
	color: #efefef;
}

#spot-map-panel {
	height: 300px;
}

#map .mapboxgl-popup-content {
	padding: 0;
}

.map-popup-banner {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: grey;
	width: 100%;
	padding-bottom: 60%;
	width: 221px;
}

.map-popup-description {
	width: 221px;
}

#map-popup .modal-body, #spot-popup .modal-body {
	padding: 0;
}

#map-popup .modal-title {
    margin-left: 25%;
    margin-right: 25%;
}

/* mapbox marker */

.spot-icon  {
	color: white;
	width: 28px;
	height: 40px;
	position: absolute;
	display: block;
	text-align: center;
}

.icon-pin {
	width: 24px;
	height: 24px;
	border-radius: 50% 50% 50% 0;
	position: absolute;
	transform: rotate(-45deg);
	left: 50%;
	top: 50%;
	margin: -19px 0 0 -12px;
}

.icon-pin-inner {
	width: 22px;
	height: 22px;
	border-radius: 50% 50% 50% 0;
	position: absolute;
	transform: rotate(-45deg);
	left: 50%;
	top: 50%;
	margin: -18px 0 0 -11px;
}

.icon-symbol {
	position: absolute;
	width: 100%;
	font-size: 10px;
	margin-top: 3px;
}

.icon-shadow {
	background: url('../images/bg/marker-shadow.png') no-repeat 0 0;
	position: absolute;
	width: 100%;
	height: 14px;
	bottom: 0;
}

/* highlight images within link */

.nohandheld .city-tile a:hover img, .nohandheld .city-tile a:focus img {
	filter: alpha(opacity=90);
	-khtml-opacity: 0.9;
	-moz-opacity: 0.9;
	opacity: 0.9;
}

/* Show indicator for next photo */

.photo-indicator {
	top: 50%;
	margin-top: -7px;
	visibility: hidden;
	pointer-events: none;
}

.handheld .photo-indicator {
	visibility: visible;
}

.nohandheld .photo-box:hover .photo-indicator, .nohandheld .photo-box:focus .photo-indicator {
	visibility: visible;
}

.btn-map {
	width: 34px;
	padding: 5px 5px;
	margin-bottom: 2px;
	z-index: 10;
}

.icon-box {
	display: inline-box;
	width: 1.5em;
	text-align: center;
}

.photo-tile {
	border: 1px #efefef solid;
}

.photo-text-box {
    background-color: rgb(0, 0, 0); /* Fallback */
    background-color: rgba(0, 0, 0, 0.3);
}

.spot-tile {
	background-color: white;
	margin-bottom: 30px;
}

.spot-tile-special {
	background-color: white;
	color: #888;
	margin-bottom: 30px;
}

.guide-tile {
	margin-left: 60px;
	margin-right: 60px;
	margin-bottom: 30px;
}

.guide-title-box {
	margin-top: 20px;
	margin-left: -60px;
	margin-right: -60px;
}

.spot-text-box, .guide-title-box, .city-guide-box {
	overflow-y: hidden;
}

.user-info-box {
	background-color: #ddd;
}

.user-info-wrapper {
	height: 50px;
	overflow: hidden;
}

.user-info-bar {
	display: table;
}

.user-info-avatar {
	display: table-cell;
	width: 36px;
}

.avatar-image {
	display: inline-block;
	overflow: hidden;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	vertical-align: middle;
	line-height: 36px;
  	border: 1px solid #ddd;
}

.avatar-image img.portrait {
	width: 36px;
	vertical-align: top;
}

.avatar-image img.landscape {
	height: 36px;
	vertical-align: top;
	text-align: center;
}

.avatar-image-large {
	display: inline-block;
	overflow: hidden;
	border-radius: 50%;
	width: 148px;
	height: 148px;
	vertical-align: middle;
	line-height: 148px;
  	border: 1px solid #ddd;
}

.avatar-image-large img.portrait {
	width: 148px;
	vertical-align: top;
}

.avatar-image-large img.landscape {
	height: 148px;
	vertical-align: top;
	text-align: center;
}

.user-info-name {
	display: table-cell;
	vertical-align: middle;
	line-height: 1.1;
}

.user-info-name .small {
	font-size: 75%;
}

.user-info-actions {
	display: table-cell;
	width: 40px;
	vertical-align: middle;
}

.embed-responsive {
	background-color: #ddd
}

.embed-responsive-leuketip {
	padding-bottom: 71.4%;
}

.embed-responsive-banner {
	padding-bottom: 35.2%;
}

.embed-responsive-guide {
	padding-bottom: 140%;
}

.embed-responsive-square {
	padding-bottom: 100%;
}

.embed-responsive-help {
	padding-bottom: 56.6%;
}

/* show next photo using animation */

.next-photo .top-img {
	transition: opacity 0.4s ease-in-out;
	-moz-transition: opacity 0.4s ease-in-out;
	-webkit-transition: opacity 0.4s ease-in-out;
	-o-transition: opacity 0.4s ease-in-out;
	-ms-transitionn: opacity 0.4s ease-in-out;
}

.info-box {
	background-color: #ddd;
}

#check-spot-panel .info-panel .panel-body {
    overflow-y: hidden;
}

.bg-cover {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #444;
}

.bg-cover .info-panel {
	-moz-box-shadow: inset 0 0 #000, 0 5px 10px -4px #000;
	-webkit-box-shadow: inset 0 0 #000, 0 5px 10px -4px #000;
	box-shadow: inset 0 0 #000, 0 5px 10px -4px #000;
}

.cover-direction {
	background-image: url('../images/bg/cover-direction.jpg?version=19.4.1');
}

.cover-login {
	background-image: url('../images/bg/cover-login.jpg?version=19.4.1');
}

.cover-register {
	background-image: url('../images/bg/cover-register.jpg?version=19.4.1');
}

.cover-newsletter {
	background-image: url('../images/bg/cover-newsletter.jpg?version=19.4.1');
}

.cover-key {
	background-image: url('../images/bg/cover-key.jpg?version=19.4.1');
}

.cover-old {
	background-image: url('../images/bg/cover-old.jpg?version=19.4.1');
}

.cover-city {
	background-image: url('../images/bg/cover-city.jpg?version=19.4.1');
}

.cover-garden {
	background-image: url('../images/bg/cover-garden.jpg?version=19.4.1');
}

.cover-showroom {
	background-image: url('../images/bg/cover-showroom.jpg?version=19.4.1');
}

.cover-info {
	background-image: url('../images/bg/cover-info.jpg?version=19.4.1');
}

.cover-work {
	background-image: url('../images/bg/cover-work.jpg?version=19.4.1');
}

.visible-xxs {
	display: none !important;
}

@media (max-width: 359px) {
	.hidden-xxs {
		display: none !important;
	}

	.visible-xxs {
		display: inline-block !important;
	}

	.name-box {
		max-width: 120px;
	}
}

@media (max-width: 767px) {

	#spot-info h1 {
		font-size: 28px;
	}

	#spot-info .page-title .type-icon {
		font-size: 24px;
	}

	.guide-title p {
		font-size: 13px;
		font-size: 3.5vw;
	}

	.guide-title h3 {
		font-size: 24px;
		font-size: 6.5vw;
	}

	.guide-title h4	{
		font-size: 11px;
		font-size: 2.7vw;
	}

	.guide-footer p {
		font-size: 11px;
		font-size: 3vw;
	}

	.spot-banner {
		height: 220px;
	}

	.spot-banner .missing-photos-panel {
		padding-top: 48px;
	}
	
	.spot-tile .missing-photos-panel {
		padding-top: 72px;
	}
	
	.spot-banner .spot-banner-nav {
		padding-top: 96px
	}

	.city-text-box, .guide-title-box {
		height: auto;
	}
	
	.spot-text-box {
		min-height: 32px
	}

	.nav > li >a {
		padding: 10px 8px;
	}

	.navbar-default .navbar-toggle {
		margin-left: 8px;
	}

	.name-box {
		max-width: 160px;
	}
	
	.city-tile-standard {
		height: auto;
	}
		
	.city-tile-large {
		height: auto;
	}
	
	.spot-tile-standard {
		height: auto;
	}
	
	.spot-tile-basic {
		height: auto;
	}
}

@media (min-width: 768px) {
	.spot-text-box { /* 4 lines */
		height: 5.6em;
	}

	.guide-title-box, .city-text-box { /* 2 lines */
		height: 2.2em;
	}
	
	.guide-title p {
		font-size: 12px;
	}

	.guide-title h3 {
		font-size: 23px;
	}

	.guide-title h4 {
		font-size: 10px;
	}

	.guide-footer p {
		font-size: 11px;
	}

	#spot-info {
		min-height: 350px;
	}

	.navigation-button {
		width: 93px;
	}

	.name-box {
		max-width: 220px;
	}
	
	.city-tile-standard {
		height: 246px;
	}
	
	.city-tile-large {
		height: 307px;
	}
	
	.spot-tile-standard {
		height: 399px;
	}
		
	.spot-tile-basic {
		height: 153px;
	}
	
	.spot-tile .missing-photos-panel {
		padding-top: 64px;
	}
}

@media screen and (max-width: 991px){
    .columns {
		height: 19.4em;
        overflow-y: scroll;
        overflow-x: hidden;
    }
}

@media (min-width: 992px) {
    .columns {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
        width: 300px;
    }

    .spot-text-box { /* 5 lines */
		height: 6.8em;
	}

	.guide-title-box, .city-text-box { /* 3 lines */
		height: 3.4em;
	}
	
	.guide-title p {
		font-size: 9px;
	}

	.guide-title h3 {
		font-size: 17px;
	}

	.guide-title h4 {
		font-size: 8px;
	}

	.guide-footer p {
		font-size: 11px;
	}

	.name-box {
		max-width: 320px;
	}
	
	.city-tile-standard {
		height: 209px;
	}

	.city-tile-large {
		height: 287px;
	}
	
	.spot-tile-standard {
		height: 380px;
	}
	
	.spot-tile-basic {
		height: 170px;
	}

	.spot-tile .missing-photos-panel {
		padding-top: 44px;
	}
}

@media (min-width: 1200px) {
    .columns {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
        width: 450px;
    }

    .spot-text-box { /* 4 lines */
		height: 5.6em;
	}

	.guide-title-box, city-text-box { /* 2 lines */
		height: 2.2em;
	}
	
	.guide-title p {
		font-size: 13px;
	}

	.guide-title h3 {
		font-size: 24px;
	}

	.guide-title h4 {
		font-size: 11px;
	}

	.guide-footer p {
		font-size: 11px;
	}
	
	.city-tile-standard {
		height: 257px;
	}
	
	.city-tile-large {
		height: 335px;
	}
	
	.spot-tile-standard {
		height: 409px;
	}
	
	.spot-tile-basic {
		height: 153px;
	}

	.spot-tile .missing-photos-panel {
		padding-top: 72px;
	}
}

.guide-example {
	width: 173px;
}

.guide-example .guide-title {
	padding-top: 4px;
	padding-left: 0px;
	padding-right: 8px;
	width: 100%;
}

.guide-example .guide-title p {
	font-size: 12px;
}

.guide-example .guide-title h3 {
	margin-top: 8px;
	font-size: 18px;
}

.guide-example .guide-title, .guide-example .guide-title:hover, .guide-example .guide-title:focus {
	color: #333;
}

/* File upload */

.upload-box img {
  width: 220px;
}

/* scrollbar styling */

::-webkit-scrollbar {
	width: 12px;
}

::-webkit-scrollbar-track {
	background-color: #eaeaea;
	border-left: 1px solid #ccc;
}

::-webkit-scrollbar-thumb {
	background-color: #ccc;
}

::-webkit-scrollbar-thumb:hover {
	background-color: #aaa;
}

/* input field styling */
/* XXX
input[type="text"], input[type="email"], input[type="search"], input[type="password"] {
	-webkit-appearance: caret;
	-moz-appearance: caret;
}
*/

/* prevent zoom-in input fields on iphone, font size must be at least 16px */
.iphone .no-zoom {
	font-size: 16px;
}

#spottags span {
	display: inline-block;
	width: 110px;
}

#spottags span label {
	padding-left: 6px;
}

/* XXX needed?
.tags {
	color: #aaa;
}
*/

#cities span {
	display: inline-block;
	width: 110px;
}

#cities span label {
	padding-left: 6px;
}

#pages span {
	display: inline-block;
	width: 110px;
}

#pages span label {
	padding-left: 6px;
}

#citytabs span {
	display: inline-block;
	width: 125px;
}

#citytabs span label {
	padding-left: 6px;
}

.tabs {
	color: #aaa;
}

/* ie scrollbar see http://codemug.com/html/custom-scrollbars-using-css/ */
body {
    scrollbar-face-color: #ccc;
}

/* Firebox styling scrollbar? use nanoScrollerJS? */

/* need fixed size to prevent zoom on mobile devices */
/* XXX
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] {
.handheld select:focus, .handheld textarea:focus, .handheld input:focus {
.handheld select, .handheld textarea, .handheld input {
*/

/* Bug: Open modal is shifting body content to the left - https://github.com/twbs/bootstrap/issues/9855 */
/* Prevent mousewheel events using javascript
body.modal-open {
	overflow-y: scroll !important;
}
 */

/* XXX still possible to move page below modal when multiple popups are opened, prevent touchmove events?
html.handheld body.modal-open {
	overflow-y: hidden !important;
}
 */
body.modal-open {
	padding-right: 0 !important;
}

.modal {
	padding-left: 0 !important;
}

/* Check overscroll-behavior to prevent scroll page below modal popup - currently not supported by many browsers */
/* https://developers.google.com/web/updates/2017/11/overscroll-behavior */
/* https://ebidel.github.io/demos/chatbox.html */
/* https://caniuse.com/#feat=css-overscroll-behavior */
body {
	overscroll-behavior-y: contain;
}

/*
 * Different Bootstrap styles compared to default distribution.
 * Use Customize: create default - create leuketip - compare bootstrap.css files - keep differences in this
 */
a {
  color: #2f7386;
}
a:hover, a:focus {
  color: #1b424d;
}
.text-primary {
  color: #2f7386;
}
a.text-primary:hover {
  color: #225360;
}
.bg-primary {
  background-color: #2f7386;
}
a.bg-primary:hover {
  background-color: #225360;
}
.btn-primary {
  background-color: #2f7386;
  border-color: #286373;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-color: #225360;
  border-color: #183c46;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: #2f7386;
  border-color: #286373;
}
.btn-primary .badge {
  color: #2f7386;
}
.btn-link {
  color: #2f7386;
}
.btn-link:hover,
.btn-link:focus {
  color: #1b424d;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background-color: #2f7386;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  border-color: #2f7386;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  background-color: #2f7386;
}
.pagination > li > a,
.pagination > li > span {
  color: #2f7386;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  color: #1b424d;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: #2f7386;
  border-color: #2f7386;
}
.label-primary {
  background-color: #2f7386;
}
.label-primary[href]:hover,
.label-primary[href]:focus {
  background-color: #225360;
}
.list-group-item.active > .badge,
.nav-pills > .active > a > .badge {
  color: #2f7386;
}
a.thumbnail:hover,
a.thumbnail:focus,
a.thumbnail.active {
  border-color: #2f7386;
}
.progress-bar {
  background-color: #2f7386;
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background-color: #2f7386;
  border-color: #2f7386;
}
.list-group-item.active .list-group-item-text,
.list-group-item.active:hover .list-group-item-text,
.list-group-item.active:focus .list-group-item-text {
  color: #a2d1df;
}
.panel-primary {
  border-color: #2f7386;
}
.panel-primary > .panel-heading {
  background-color: #2f7386;
  border-color: #2f7386;
}
.panel-primary > .panel-heading + .panel-collapse > .panel-body {
  border-top-color: #2f7386;
}
.panel-primary > .panel-heading .badge {
  color: #2f7386;
}
.panel-primary > .panel-footer + .panel-collapse > .panel-body {
  border-bottom-color: #2f7386;
}

a.btn-dark1 {
	background-color: #2e4267;
	color: white;
}

a.btn-dark1:hover, a.btn-dark1:focus {
	background-color: #4867a1;
	color: white;
	text-decoration: none;
}

a.btn-grey {
	background-color: #efefef;
	color: #333;
}

a.btn-grey:hover, a.btn-grey:focus {
	background-color: #efefef;
	color: #333;
	text-decoration: none;
}

a.btn-white {
	background-color: white;
	color: #333;
}

a.btn-white:hover, a.btn-white:focus {
	background-color: #eee;
	color: #333;
	text-decoration: none;
}

a.btn-black {
	background-color: #333;
	color: white;
}

a.btn-black:hover, a.btn-black:focus {
	background-color: #666;
	color: white;
	text-decoration: none;
}

.btn-outline {
	border: 2px solid white;
}

a.btn-outline, a.link-white {
	color: white;
}

a.btn-outline:hover, a.btn-outline:focus, a.link-white:hover, a.link-white:focus {
	color: #ccc;
	text-decoration: none;
}

/* LeukeTip button with orange color
 * http://twitterbootstrap3buttons.w3masters.nl/?color=%23f58220
 * http://getbootstrap.com/customize/
 * http://blog.koalite.com/bbg/
 */
.btn-leuketip {
  background-color: #f58220;
  border-color: #f58220;
  color: #fff;
}
.btn-leuketip:hover,
.btn-leuketip:focus,
.btn-leuketip:active,
.btn-leuketip.active {
  background-color: #ea6d20;
  border-color: #d8690a;
  color: #fff;
}
.btn-leuketip.disabled:hover,
.btn-leuketip.disabled:focus,
.btn-leuketip.disabled:active,
.btn-leuketip.disabled.active,
.btn-leuketip[disabled]:hover,
.btn-leuketip[disabled]:focus,
.btn-leuketip[disabled]:active,
.btn-leuketip[disabled].active,
fieldset[disabled] .btn-leuketip:hover,
fieldset[disabled] .btn-leuketip:focus,
fieldset[disabled] .btn-leuketip:active,
fieldset[disabled] .btn-leuketip.active {
  background-color: #f58220;
  border-color: #f58220;
  color: #fff;
}

#menubar.navbar {
	border-radius: 0;
    margin-bottom: 0;
    border: none;
}

#menubar .dropdown-menu {
	border-top-left-radius: 0;
	-moz-border-top-left-radius: 0;
	-webkit-border-top-left-radius: 0;
	-o-border-top-left-radius: 0;
	border-top-right-radius: 0;
	-moz-border-top-right-radius: 0;
	-webkit-border-top-right-radius: 0;
	-o-border-top-right-radius: 0;
	margin: 0;
}

.nav-wrapper, .spot-nav-wrapper {
    min-height: 50px;
}

/* city navigation bar */

#city-navheader {
	background-color: white;
}

#city-navbar {
    height: 50px;
	position: relative;
    z-index: 50;
    border: none;
	-moz-box-shadow: 0 5px 10px 0 rgba(0,0,0,.1);
	-webkit-box-shadow: 0 5px 10px 0 rgba(0,0,0,.1);
    box-shadow: 0 5px 10px 0 rgba(0,0,0,.1);
    background-color: white;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

#city-navbar.affix {
	position: fixed;
	top: 0;
    width: 100%;
}

#city-navbar li a {
	color: #2f7386;
}

#city-navbar li a:hover, #city-navbar li a:focus {
	background-color: #eee;
	color: #1b424d;
}

#city-navbar li.active {
	background-color: #2f7386;
}

#city-navbar li.active a {
	color: white;
}

#city-navbar li.active a:hover, #city-navbar li.active a:focus {
	background-color: #1b424d;
}

#city-navbar li.details {
	background-color: #ccc;
}

#city-navbar li.details a {
	color: #333;
}

#city-navbar li.details a:hover, #city-navbar li.details a:focus {
	background-color: #bbb;
}

#city-navbar .my-guide-button {
	color: white;
	background-color: #f58220;
	margin-top: 6px;
	padding: 8px 12px;
}

#city-navbar .my-guide-button:hover, #city-navbar .my-guide-button:focus {
	background-color: #ea6d20;
	text-decoration: none;
}

/* large city-navbar */

#city-menu {
	height: 50px;
	margin-right: 130px;
	padding-left: 0;
}

#city-menu li {
	height: 50px;
	list-style: none;
	float: left;
}

#city-menu li a {
	height: 50px;
	padding: 16px 12px;
	display: block;
	text-decoration: none;
}

#city-menu ul li.more {
	width: 3em;
	text-align: center;
	display: none;
}

#city-menu li.more.open #overflow {
	visibility: visible;
}

#overflow {
    background-color: white;
	visibility: hidden;
}

#overflow li {
	float: none;
}

#overflow li a {
	white-space: nowrap;
    color: #2f7386;
}

#overflow li a:hover {
	background-color: #eee;
}

/* mobile city-navbar */

.city-navmenu {
    z-index: 100;
}

.half-width {
	width: 50%;
	padding-left: 6px;
	padding-right: 6px;
}

.mobile #city-navbar .btn {
	margin-top: 6px;
	width: 100%;
	text-align: center;
}

.mobile #city-navbar .dropdown-menu {
	margin-left: 6px;
}

.mobile #city-navbar .dropdown-menu li {
	padding-top: 8px;
	padding-bottom: 8px;
}

.mobile #city-navbar .dropdown-menu li.divider {
	padding-top: 0;
	padding-bottom: 0;
	margin: 0;
}

.mobile #city-navbar .btn-primary.details {
	color: #333;
    background-color: #ddd;
    border-color: #ccc;
}

#city-navbar #search-dropdown.open {
	background-color: #eee;
}

#search-input {
	width: 280px;
	border: 1px solid #ddd;
}

/* spots navigation bar */

#spots-navbar {
    height: 50px;
	position: relative;
	background-color: white;
   	border-radius: 0;
    margin-bottom: 0;
    z-index: 40;
}

#spots-navbar.affix {
	position: fixed;
	top: 50px;
    width: 100%;
	background-color: #2f7386;
    -moz-transition: background-color 0.4s linear;
    -webkit-transition: background-color 0.4s linear;
    -o-transition: background-color 0.4s linear;
    transition: background-color 0.4s linear;
}

#spots-navbar.affix #show-map, #spots-navbar.affix #search-spots {
	color: white;
}

.nomobile #spots-navbar.affix #spots-filterbar a {
	color: white;
}

.nomobile #spots-navbar.affix #spots-filterbar a.active {
	color: #fda050;
}

#spots-navbar li {
	height: 50px;
	list-style: none;
	float: left;
}

#spots-navbar a:hover, #spots-navbar a:focus {
	color: #f58220;
	text-decoration: none;
}

.mobile #spots-navbar .dropdown-menu li {
	float: none;
}

.mobile #spots-navbar .dropdown-menu li a {
	padding-top: 16px;
	padding-bottom: 16px;
}

#spots-navbar .dropdown-menu a.active {
	background-color: #2f7386;
	color: white;
}

#spots-navbar .tagbar a.active {
	color: #f58220;
}

.spots-navmenu {
    z-index: 100;
}

#spot-navbar {
    height: 50px;
	position: relative;
	background-color: white;
   	border-radius: 0;
    margin-bottom: 0;
    z-index: 40;
}

#spot-navbar.affix {
	position: fixed;
    width: 100%;
	background-color: #efefef;
	border-bottom: 1px solid #ddd;
    -moz-transition: background-color 0.4s linear;
    -webkit-transition: background-color 0.4s linear;
    -o-transition: background-color 0.4s linear;
    transition: background-color 0.4s linear;
}

#spot-navbar.affix div {
	border-bottom: none;
}

#spot-navbar.affix {
	top: 50px;
}

.spot-details-buttonbar {
	width: 160px;
}

/* LeukeTip navbar with orange color
 * http://work.smarchal.com/twbscolor/
 */
 .navbar-default {
  background-color: #f58220;
  border-color: #ea6d20;
}
.navbar-default .navbar-brand {
  color: #ffffff;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
  color: #ffffff;
}
.navbar-default .navbar-text {
  color: #ffffff;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-header > ul > li > a {
  color: #ffffff;
  padding-top: 15px;
  padding-bottom: 15px;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-header > ul > li > a:hover, .navbar-default .navbar-header > ul > li > a:focus {
  color: #ffffff;
  background-color: #ea6d20; /* also use different background for hover in menubar */
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-header > ul > .active > a, .navbar-default .navbar-header > ul > .active > a:hover, .navbar-default .navbar-header > ul > .active > a:focus {
  color: #ffffff;
  background-color: #ea6d20;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-header > ul > .open > a, .navbar-default .navbar-header > ul > .open > a:hover, .navbar-default .navbar-header > ul > .open > a:focus {
  color: #ffffff;
  background-color: #ea6d20;
}
.navbar-default .navbar-toggle {
  border: none;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color: #f58220;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ffffff;
}
.navbar-default .navbar-link {
  color: #ffffff;
}
.navbar-default .navbar-link:hover, .navbar-default .navbar-link:focus {
  color: #ffffff;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff;
    background-color: #ea6d20;
  }
}

/*!
 * Social Buttons for Twitter Bootstrap v1.0.0
 * http://adamneumann.co/bootstrap-social-buttons/
 *
 * Copyright 2013 Adam Neumann
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 */
.btn-facebook {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #2b4b90;
	*background-color: #133783;
	background-repeat: repeat-x;
	border-color: #133783 #133783 #091b40;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3b5998', endColorstr='#ff133783', GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-facebook:hover,
.btn-facebook:focus,
.btn-facebook:active,
.btn-facebook.active,
.btn-facebook.disabled,
.btn-facebook[disabled] {
	color: #ffffff;
	background-color: #133783;
	*background-color: #102e6d;
}

.btn-facebook:active,
.btn-facebook.active {
	background-color: #0d2456 \9;
}

.btn-twitter {
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #1c95d0;
	*background-color: #0271bf;
	background-repeat: repeat-x;
	border-color: #0271bf #0271bf #014473;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2daddc', endColorstr='#ff0271bf', GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-twitter:hover,
.btn-twitter:focus,
.btn-twitter:active,
.btn-twitter.active,
.btn-twitter.disabled,
.btn-twitter[disabled] {
	color: #ffffff;
	background-color: #0271bf;
	*background-color: #0262a6;
}

.btn-twitter:active,
.btn-twitter.active {
	background-color: #01538d \9;
}

/* Social media button */

ul.social {
	padding: 5px;
}

ul.social li {
	margin: 5px;
	list-style: none outside none;
	display: inline-block;
}

.social i {
	width: 40px;
	height: 40px;
	color: #FFF;
	background-color: #888;
	font-size: 22px;
	text-align: center;
	padding-top: 12px;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	-o-border-radius: 50%;
	transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-webkit-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
}

.social-white i {
	background-color: white;
	color: #666;
}

.social i:hover {
	color: #FFF;
	text-decoration: none;
	transition: all ease 0.3s;
	-moz-transition: all ease 0.3s;
	-webkit-transition: all ease 0.3s;
	-o-transition: all ease 0.3s;
	-ms-transition: all ease 0.3s;
}

.social .fa-leuketip:hover {
	background: #f58220;
}

.social .fa-facebook:hover {
	background: #4060A5;
}

.social .fa-twitter:hover {
	background: #00ABE3;
}

.social .fa-instagram:hover {
	background: #375989;
}

.social .fa-pinterest:hover {
	background: #cb2027;
}

.social .fa-google-plus:hover {
	background: #e64522;
}

.social .fa-envelope:hover {
	background: #f58220;
}

/* Autocomplete jQuery plugin */
.autocomplete-suggestions {
	border: 1px solid #ddd;
	background: #fff;
	color: #888;
	overflow: auto;
}

.autocomplete-suggestion {
	padding: 4px 5px;
	white-space: nowrap;
	overflow: hidden;
}

.autocomplete-selected {
	background: #f0f0f0;
}

.autocomplete-suggestions b {
	color: #2f7386;
}

.autocomplete-group {
	padding: 2px 5px;
}

.autocomplete-group strong {
	display: block;
	border-bottom: 1px solid #000;
}

/* print styles - hide links in print */
@media print {
	a:link:after, a:visited:after {
		display: none;
		content: "";
	}
}

/* hint background colors */

.hint-tile h2 {
	color: #333;
}

.bg-leuketip h2, .bg-primary h2 {
	color: white;
}

.bg-leuketip {
	background-color: #f58220;
}

.bg-primary {
	background-color: #2f7386;
}

.bg-light1 {
	background-color: #e3fdf9;
}

.bg-light2 {
	background-color: #cddff7;
}

.bg-light3 {
	background-color: #f9d8e9;
}

.bg-grey {
	background-color: #efefef;
}

.bg-white {
	background-color: white;
	border-color: white;
}

/* colors */

.white {
	color: white;
}

.leuketip {
	color: #f58220;
}

.primary {
	color: #2f7386;
}

.admin {
	color: #b73333;
}

.error {
	color: #f58220;
}

.missing, .disabled, .skipped { /* show disabled state */
	color: #ccc;
}

.ready {
	color: #0e990e;
}

.drag {
	background-color: #bbb !important;
}

.share {
	color: #27b8e4;
}

/* colors for statistics values to high or too low */

a.too-high {
	color: red;
}

a.high {
	color: orange;
}

a.low {
	color: blue;
}

/* colors for status */

.unknown {
	color: #f58220;
}

.check, .upload {
	color: #f58220;
}

.accept {
	color: #3bb733;
}

.postpone {
	color: #E49B2B;
}

.reject {
	color: #b73333;
}

span.attribution a {
	color: white;
}

/* finetuning alignment of popup windows */

.modal-header .close {
    margin-top: 0;
}

#map-popup .modal-header .close {
    margin-top: 1px;
}

.bootbox .modal-header .close {
    margin-top: -4px;
    padding-right: 0px;
}

.bootbox .modal-dialog .modal-body .close {
    padding-right: 0px;
}

/* XXX full page dialog
.modal {
  position: fixed;
  top: 43px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.modal-dialog {
  position: fixed;
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}

.modal-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid #3c7dcf;
  border-radius: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: red;
}
 */

 /*
 	Modal popup bug, background and navbar shifting left and right
 	https://github.com/twbs/bootstrap/issues/14040
 	https://github.com/twbs/bootstrap/issues/15229
 	http://stackoverflow.com/questions/19288546/how-can-i-prevent-body-scrollbar-and-shifting-when-twitter-bootstrap-modal-dialo
 */
 body {
	padding-right: 0 !important;
}
#main-nav {
	padding-right: 0 !important;
}