@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

html, body
{
	height: 100%;
	margin: 0;
}

.tsg-labels
{
	color: red;
}

.tsg-material
{
	font-family: "Material Icons";
}

div.travelstorys
{
	width: 100%;
	height: 100%;

	overflow: hidden;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.tsg-screen
{
	display: none;
}

.tsg-icon-org img
{

	max-height: 50px;
  max-width: 50px;
  height: auto;
  width: auto;
  margin: 0px;
	position: absolute;
  top: calc(50% - 25px);
	left: 8px;

}

.tsg-icon-org{
	display:inline-block;
	height: 50px;
	width: 50px;
	vertical-align: middle;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
	position:absolute;
	top: calc(50% - 25px);
	left: 8px;
}

.tsg-fullscreen
{
	width: 100%;
	height: 100%;

	position: relative;
}

.tsg-background
{
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	z-index: 0;

	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.tsg-background-overlay
{
	position: absolute;
	top; 0;
	left: 0;
	width: 100%;
	height: 100%;

	z-index: 0;
	background-color: rgba(0, 36, 33, 0.91);
}

.tsg-background.tsg-default
{
	/*background-image: url(img/tsg-bg.png);*/
	background: #dfdfdf;
}

.tsg-background.tsg-default-clear
{
	/*background-image: url(img/tsg-bg-clear.png);*/
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f2f2f2+0,e2e2e2+100 */
	background: #f2f2f2; /* Old browsers */
	background: -moz-linear-gradient(top,  #f2f2f2 0%, #e2e2e2 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #f2f2f2 0%,#e2e2e2 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #f2f2f2 0%,#e2e2e2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f2f2', endColorstr='#e2e2e2',GradientType=0 ); /* IE6-9 */

}

.tsg-logo
{
	background-image: url(https://webplugin.travelstorys.com/img/libubble.png);
}

.tsg-loading
{
	background-image: url(img/loading.gif);
}

.tsg-image-view
{
	position: absolute;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

.tsg-progress-view
{
	position: absolute;
}

.tsg-progress-view .tsg-progress-container
{
	position: relative;
	width: 100%;
	height: 100%;
}

.tsg-progress-view .tsg-progress-container .tsg-progress-fill
{
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 1px;
	z-index: 1;
}

.tsg-progress-view .tsg-progress-container .tsg-progress-label
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;

	text-align: center;
	font-weight: 300;
	font-size: 20px;
	z-index: 2;
}

.tsg-scroll-view
{
	position: absolute;
	overflow-x: hidden;
	overflow-y: auto;

	font-size: 0;

	text-align: center;
}

.tsg-transition-container
{
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
}

.tsg-transition-container.tsg-slideup
{
	top: 100%;
	z-index: 999;
}

.tsg-template,
.tsg-hidden
{
	display: none !important;
}

.tsg-discovery-list-item
{
	display: inline-block;
	vertical-align: top;
	width: calc(100% - 20px);
	min-width: 300px;
	max-width: 400px;
	min-height: 150px;

	overflow: hidden;

	position: relative;

	background: white;
	border-radius: 5px;

	box-sizing: border-box;

	margin: 10px;
}

.tsg-discovery-main-image
{
	overflow: hidden;
}

.tsg-discovery-list-item .tsg-discovery-background
{
	width: 100%;
}

.tsg-discovery-list-item .tsg-discovery-title-bar
{
	position: relative;

	width: 100%;
	height: calc(100% / 3);
	padding: 8px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;

	background: rgba(25, 25, 25, 0.6);
	font-family: "Helvetica Neue", "Open Sans", Helvetica, Arial;
	text-align: left;

	z-index: 1;
}

.tsg-discovery-list-item .tsg-discovery-title-bar .tsg-bg
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background-size: cover;
	background-position: center center;
	filter:blur(35px);
	z-index: -1;
}

.tsg-discovery-list-item .tsg-discovery-title-bar .tsg-blur
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background: rgba(255, 255, 255, 0.5);
	z-index: 0;
}

.tsg-discovery-list-item .tsg-discovery-title-bar h1,
.tsg-discovery-list-item .tsg-discovery-title-bar h2,
.tsg-discovery-list-item .tsg-discovery-title-bar h3,
.tsg-discovery-list-item .tsg-discovery-title-bar img,
.tsg-discovery-list-item .tsg-discovery-title-bar span
{
	position: absolute;
	z-index: 1;
}

.tsg-discovery-list-item .tsg-discovery-title-bar h1
{
	font-size: 20px;
	font-weight: 300;
	color: #111;
	margin: 0 0 1px;

	top: 8px;
	left: 6px;

	width: 75%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.tsg-discovery-list-item .tsg-discovery-title-bar h2
{
	font-size: 14px;
	font-weight: 400;
	color: #222;
	margin: 0 0 1px;

	top: 32px;
	left: 6px;

	width: 75%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.tsg-discovery-list-item .tsg-discovery-title-bar h3
{
	font-size: 11px;
	font-weight: 400;
	color: #444;
	margin: 0;

	top: 52px;
	left: 6px;
}

.tsg-discovery-list-item .tsg-discovery-title-bar .tsg-discovery-icon,
.tsg-discovery-list-item .tsg-discovery-title-bar .tsg-discovery-icon2
{
	position: absolute;
	left: 130px;
	bottom: 8px;

	margin-top: 0px;
	width: 32px;
	height: 32px;
}

.tsg-discovery-list-item .tsg-discovery-title-bar .tsg-discovery-icon2
{
	left: 170px;
}

.tsg-discovery-list-item .tsg-discovery-title-bar span
{
	position: absolute;
	left: 6px;
	top: 70px;

	width: 120px;
	text-align: left;

	font-size: 11px;
	color: #111;
}

.tsg-discovery-list-item .tsg-discovery-title-bar span i
{
	margin-right: 6px;
	font-size: 80%;
}

.tsg-discovery-list-item .tsg-discovery-actions
{

}

.tsg-discovery-list-item .tsg-discovery-actions a
{
	display: inline-block;
	background: black;
	border-radius: 100%;
	margin-left: 8px;

	position: absolute;
	bottom: 22px;
	right: 8px;
	z-index: 1;
}

.tsg-discovery-list-item .tsg-discovery-actions a.tsg-discovery-button-full
{
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	background: transparent;
	border-radius: 0;
	display: block;
}

.tsg-discovery-list-item .tsg-discovery-actions a.tsg-discovery-button-full img
{
	display: none;
}

.tsg-discovery-list-item .tsg-discovery-actions img
{
	height: 52px;
	width: 52px;
}

.tsg-discovery-list-item .tsg-discovery-actions a:active img
{
	opacity: 0.7;
}

.tsg-discovery-list-item .tsg-separator
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: white;
}

.tsg-discovery-list-item .tsg-coming-soon
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background: rgba(0, 0, 0, 0.5);
	text-align: center;

	box-sizing: border-box;
	padding: 18% 0 0;
	z-index: 0;

	font-size: 44px;
	font-family: "Pacifico", cursive, sans-serif;
	color: white;
}

.tsg-title-bar
{
	position: absolute;
	top: 0;
	left: 0;

	height: 50px;
	width: 100%;
	background: #f7f7f7;
	z-index: 9;
	border-bottom: 1px solid #777;
}

.tsg-title-bar .tsg-title-bar-container
{
	position: relative;
	width: 100%;
	height: 100%;
}

.tsg-title-bar h1
{
	position: absolute;
	top: 5px;
	left: 50px;

	width: calc(100% - 100px);
	text-align: center;
	font-size: 20px;
	font-weight: 200;
	margin: 0;

	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;

	color: #333;
}

.tsg-title-bar h1.solo
{
	font-weight: 400;
	top: 13px;
}

.tsg-title-bar h1.solo img
{
	height: 26px;
}

.tsg-title-bar h2
{
	position: absolute;
	top: 29px;
	left: 50px;

	width: calc(100% - 100px);
	text-align: center;
	font-size: 13px;
	font-weight: 300;
	margin: 0;

	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;

	color: #333;
}

.tsg-title-bar .tsg-title-bar-left-action a
{
	display: inline-block;
	position: absolute;
	top: 8px;
	left: 8px;

	width: 34px;
	height: 34px;

	z-index: 99;
	font-size: 34px;
	color: #333;
}

.tsg-title-bar .tsg-title-bar-left-action a:nth-child(2)
{
	left: 50px;
}

.tsg-title-bar .tsg-title-bar-right-action a
{
	display: inline-block;
	position: absolute;
	top: 8px;
	right: 8px;

	width: 34px;
	height: 34px;

	z-index: 99;
}

.tsg-title-bar .tsg-title-bar-left-action a img,
.tsg-title-bar .tsg-title-bar-right-action a img
{
	width: 100%;
	height: 100%;
}

.tsg-title-bar .tsg-title-bar-left-action a:active img,
.tsg-title-bar .tsg-title-bar-right-action a:active img,
.tsg-title-bar .tsg-material:active
{
	opacity: 0.5;
}

.tsg-search-bar
{
	position: absolute;
	top: 50px;
	left: 0;

	height: 0;
	overflow: hidden;

	background: #e7e7e7;
	border-bottom: 1px solid #aaa;
	border-bottom-width: 0;

	width: 100%;

	padding: 0 20px;
	box-sizing: border-box;
	z-index: 9;

	-webkit-transition-duration: 0.2s;
	-moz-transition-duration: 0.2s;
	-ms-transition-duration: 0.2s;
	-o-transition-duration: 0.2s;
	transition-duration: 0.2s;

}

.tsg-search-bar.open
{
	padding: 8px 20px;
	height: 50px;

	border-bottom-width: 1px;
}

.tsg-search-bar input
{
	width: calc(100% - 45px);
	height: 100%;

	box-sizing: border-box;
	background: transparent;

	border: 0;
	border-bottom: 2px solid rgba(48, 48, 48, 0.5);

	font-size: 16px;
	font-weight: normal;
	color: #333;
}

.tsg-search-bar input:focus
{
	outline: none;
	border-bottom: 2px solid #333;
}

.tsg-search-bar input::placeholder
{
	color: rgba(48, 48, 48, 0.75);
}

.tsg-search-bar a
{
	display: inline-block;
	vertical-align: middle;
	margin-left: 15px;
}

.tsg-search-bar img
{
	height: 24px;
}

.tsg-location
{
	position: absolute;
	top: -50px;
	left: 15px;

	width: 270px;
	background: #006a31;
	color: white;

	z-index: 8;

	padding: 5px;
	box-sizing: border-box;
	border-radius: 0 0 5px 5px;

	transition-duration: 0.25s;
}

.tsg-location.on
{
	top: 50px;
}

.tsg-location input
{
	font-size: 16px;
	background: rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 5px;

	padding: 5px 8px;
	color: white;
}

.tsg-location input::placeholder
{
	color: #dfdfdf;
}

.tsg-location .tsg-material
{
	font-size: 25px;
	margin-top: 3px;
	margin-right: 6px;
	float: right;
}

.tsg-location .tsg-material:active
{
	opacity: 0.5;
}

.tsg-preview-info
{
	position: absolute;
	bottom: 40px;
	left: 0;

	width: 100%;
	height: 178px;

	background: #f2f2f2;
	border-top: 5px solid #00853d;

	z-index: 9;
}

.tsg-preview-info .tsg-preview-main
{
	position: relative;
	height: 78px;
	width: 100%;
	max-width: 800px;
	margin: auto;
}

.tsg-preview-info .tsg-org
{
	position: absolute;
	top: -42px;
	left: 12px;

	background: #aaa;
	border: 5px solid #00853d;
	border-radius: 10px;

	box-sizing: border-box;
	width: 80px;
	height: 80px;
	overflow: hidden;

	z-index: 1;
}

.tsg-preview-info .tsg-preview-main a.tsg-img,
.tsg-preview-info .tsg-preview-main a.tsg-img2
{
	display: inline-block;

	position: absolute;
	left: 0px;
	top: 0px;
	width: 70px;
	height: 70px;

	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

.tsg-preview-info .tsg-preview-meta
{
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 35px;

	background: rgba(0, 133, 62, 0.5);
}

.tsg-preview-info .tsg-preview-main h1
{
	position: absolute;
	left: 20px;
	top: 32px;
	width: calc(100% - 44px);
	font-size: 20px;
	font-weight: 700;
	color: #00853d;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.tsg-preview-info .tsg-preview-main h2
{
	position: absolute;
	left: 20px;
	top: 56px;
	width: calc(100% - 4px);
	font-size: 15px;
	font-weight: 400;
	color: #111;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tsg-preview-info .tsg-preview-main h3
{
	position: absolute;
	left: 20px;
	top: 74px;
	width: calc(100% - 94px);
	font-size: 13px;
	font-weight: 400;
	color: #333;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tsg-preview-info .tsg-preview-lower
{
	position: relative;
	height: 90px;
	width: 100%;
	max-width: 800px;
	margin: auto;
}

.tsg-preview-info .tsg-preview-lower p
{
	position: absolute;
	left: 20px;
	top: 28px;

	display: table-cell;
	vertical-align: middle;

	margin: 0;
	font-size: 12px;
	font-weight: 300;
	color: #555;

	width: calc(100% - 80px);
	height: 70px;
	text-overflow: ellipsis;
	overflow: hidden;
}

.tsg-preview-info .tsg-preview-lower a.tsg-action
{
	position: absolute;
	bottom: 0px;
	right: 8px;
	width: 48px;
	height: 48px;

	border-radius: 100%;
	background: black;

	z-index: 99;
}

.tsg-preview-info .tsg-preview-lower a.tsg-action img
{
	width: 100%;
	height: 100%;
}

.tsg-preview-info .tsg-preview-lower a.tsg-action:active img
{
	opacity: 0.7;
}

.tsg-track-item,
.tsg-org-item
{
	position: relative;
	width: 100%;
	max-width: 800px;
	height: 100px;
	margin: 10px auto;

	background: #f2f2f2;

	box-sizing: border-box;
	border: 1px solid #cfcfcf;
	border-radius: 10px;
}

.tsg-about-label-item{
	position: relative;
	width: 100%;
	max-width: 800px;
	height: 50px;

	color: #222;

	box-sizing: border-box;
	padding: 0 20px;
	margin: auto;
}

.tsg-about-label-item h1
{
	position: absolute;
	top: calc(50% - 13px);
	left: 8px;
	margin: 0;

	font-size: 26px;
	font-weight: 200;
	text-align: left;
}

.tsg-track-item:active,
.tsg-org-item:active
{
	opacity: 0.7;
}

.tsg-track-item .tsg-icon
{
	position: absolute;
	top: 20px;
	left: 10px;

	font-size: 60px;
	color: white;
}

.tsg-track-item h1,
.tsg-org-item h1
{
	position: absolute;
	top: 17px;
	left: 76px;
	margin: 0;

	font-size: 26px;
	font-weight: 200;
	color: #111;
	text-align: left;

	white-space: nowrap;;
	text-overflow: ellipsis;
	overflow: hidden;
}

.tsg-track-item h2,
.tsg-org-item h2
{
	position: absolute;
	top: 50px;
	left: 76px;
	margin: 0;

	font-size: 15px;
	font-weight: 200;
	color: #333;
	text-align: left;
}

#tsg-tour-map
{
	position: absolute;
	top: 0px;
	left: 0;

	width: 100%;
	height: calc(100% - 10px);
	z-index: 0;
}

#tsg-preview-image1
{
	background-size: contain;
	height:calc(100% - 183px);
}

#tsg-preview-image2
{
	background-size: contain;
	height:calc(100% - 183px);
}

@media all and (min-width: 600px)
{
	.tsg-map-list + .tsg-map#tsg-tour-map
	{
		left: 250px;
		width: calc(100% - 250px);
	}



	.tsg-map-list
	{
		width: 250px;
		position: absolute;
		top: 0px;
		left: 0;

		height: calc(100% - 10px);
		z-index: 0;
		background: rgb(2, 75, 73);

		overflow-y: auto;
		overflow-x: hidden;
		font-size: 0;
	}
}

@media all and (max-width: 599px)
{
	.tsg-map-list
	{
		display: none;
	}

	.tsg-map-list + #tsg-tour-map
	{
		width: 100%;
		left: 0;
	}

	#tsg-preview-image1
	{
		background-size: cover;
	}

	#tsg-preview-image2
	{
		background-size: cover;
	}
}

.tsg-map-list .tsg-map-list-item
{
	height: 40px;
	border-bottom: 1px solid white;
	cursor: pointer;
}

.tsg-map-list .tsg-map-list-item.active
{
	height: 40px;
	border-bottom: 1px solid white;
	cursor: pointer;
	background: #FF4D00 !important;
}

.tsg-map-list .tsg-map-list-item:nth-child(2n)
{
	background: rgba(0, 0, 0, 0.2);
}

.tsg-map-list .tsg-map-list-item:hover
{
	background: rgba(255, 255, 255, 0.2);
}

.tsg-map-list .tsg-map-list-item:last-child
{
	border-bottom: 0;
}

.tsg-map-list-item > div
{
	display: inline-block;
	vertical-align: top;
	height: 100%;
}

.tsg-map-list-item .left
{
	width: 40px;
	padding: 5px;
	box-sizing: border-box;
	text-align: center;

	background: rgba(255, 255, 255, 0.1);
}

.tsg-map-list-item .left img
{
	height: 30px;
	max-width: 30px;
}

.tsg-map-list-item .right
{
	width: calc(100% - 40px);
	padding: 5px;
	box-sizing: border-box;
}

.tsg-map-list-item h1
{
	margin: 0;
	color: white;
	font-size: 15px;
	font-weight: 400;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.tsg-map-list-item h2
{
	margin: 2px 0 0;
	/*color: rgba(200, 255, 255, 0.9);*/
	color: white;
	font-size: 12px;
	font-weight: 400;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.tsg-map-list .tsg-search-sort
{
	position: relative;

	height: 40px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	padding: 10px 6px;
	box-sizing: border-box;
}

.tsg-search-sort > i
{
	position: absolute;
	top: 7px;
	left: 3px;
	font-size: 24px;
	font-style: normal;
	color: white;
}

.tsg-search-sort input
{
	border: 0;
	border-bottom: 1px solid white;
	padding: 0 0 2px 22px;
	color: white;
	font-family: "Roboto", Arial, sans-serif;
	font-size: 16px;
	outline: none;
	background: transparent;

	box-sizing: border-box;
	width: calc(100% - 40px);
}

.tsg-search-sort input::placeholder
{
	color: white;
}

.tsg-search-sort .tsg-toggle-box
{
	position: absolute;
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;

	background: rgba(0, 0, 0, 0.2);
	cursor: pointer;
}

.tsg-toggle-box:hover
{
	background: #007f7b;
}

.tsg-toggle-box i
{
	display: inline-block;
	width: 40px;
	height: 40px;
	box-sizing: border-box;
	text-align: center;

	padding: 5px;
	font-size: 30px;
	color: white;
	font-style: normal;
}

.tsg-toggle-box:not(:hover) .tsg-options
{
	display: none;
}

.tsg-toggle-box .tsg-options
{
	position: absolute;
	top: 40px;
	right: 0;

	background: #f2f2f2;
	padding: 15px 0;
}

.tsg-toggle-box .tsg-options label
{
	display: block;
	padding: 0 8px 5px;
	font-size: 12px;
	color: #777;
}

.tsg-toggle-box .tsg-options a
{
	display: block;
	font-size: 18px;
	color: #222;
	padding: 8px;
	cursor: pointer;

	white-space: nowrap;
}

.tsg-toggle-box .tsg-options a:hover
{
	background: #ccc;
}

.tsg-toggle-box .tsg-options a[selected],
.tsg-toggle-box .tsg-options a[selected]:hover
{
	background: #007f7b;
	color: white;
}

a.tsg-iw
{
	cursor: pointer;
}

a.tsg-iw:hover h3,
a.tsg-iw:hover h2,
a.tsg-iw:hover h1
{
	opacity: 0.5;
}

h1.tsg-iw
{
	margin: 0;
	font-size: 18px;
	font-weight: 200;
	color: #0066d1;
}

h2.tsg-iw
{
	margin: 0;
	font-size: 14px;
	font-weight: 200;
	color: #2992fb;
}

h3.tsg-iw
{
	margin: 0;
	font-size: 12px;
	font-weight: 400;
	color: #00a7ff;
}

.tsg-geotag-image-cycle-view,
.tsg-geotag-street-view
{
	width: 100%;
	height: 40%;

	position: relative;
	top: 50px;
}

.tsg-geotag-image-view
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	background-color: #353535;
}

.tsg-geotag-overlay-play
{
	display: block;
	margin-right: auto;
	margin-left: auto;
	height: 100%;
	width: 100%;
	background-image: url("/img/ic_overlay_play.png");
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

.tsg-caption-view
{
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 3;

	width: 100%;
	box-sizing: border-box;
	-moz-box-sizing: border-box;

	padding: 5px 10px;
	background: rgba(0, 0, 0, 0.5);
	color: white;
	font-size: 11px;
	font-weight: 200;

	text-align: center;

	white-space: pre-wrap;
}

.tsg-geotag-image-cycle-view .tsg-cycle-button
{
	position: absolute;
	left: 24px;
	top: 8px;
	z-index: 4;

	width: 50px;
	height: calc(100% - 16px);
}

.tsg-geotag-image-cycle-view .tsg-cycle-button.tsg-right
{
	right: 8px;
	left: auto;
	text-align: right;
}

.tsg-geotag-image-cycle-view .tsg-cycle-button img
{
	display: table-cell;
	vertical-align: middle;
	height: 100%;
	max-width: 100%;
	max-height: 100%;
	text-align: right;
	cursor: pointer;

}

.tsg-geotag-image-cycle-view .tsg-cycle-button img:hover
{
	opacity: 0.5;
}

.tsg-geotag-cycle-paging
{
	/*background: #2e2e2e;*/
	background: #353535;
	padding: 5px 0;
	text-align: center;
	position: relative;
}

.tsg-geotag-cycle-paging i
{
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 100%;
	background: white;
	opacity: 0.3;
	margin: 0 3px;
}

.tsg-geotag-cycle-paging i.on
{
	opacity: 1;
}

.tsg-geotag-scroll-view
{
	position: relative;
	height: calc(60% - 213px);

	overflow: auto;

	box-sizing: border-box;
	-moz-box-sizing: border-box;
	padding: 8px;
	background: #e2e2e2;
}

.tsg-geotag-scroll-view p
{
	white-space: pre-wrap;
	text-align: left;
	color: white;
	font-size: 16px;
	font-weight: 400;
	line-height: 20px;

	max-width: 550px;
	width: 100%;
	margin: auto;
	color: #111;
}

.tsg-controls
{
	width: 100%;
	height: 50px;
	position: relative;

	/*background: #222;*/
	background: #f2f2f2;
}

.tsg-controls-map
{
	width: 100%;
	height: 50px;
	position: absolute;
	background: #f2f2f2;
	bottom: 40px;
}

.tsg-controls .tsg-controls-play,
.tsg-controls-map .tsg-controls-play
{
	position: absolute;
	top: 8px;
	right: 8px;

	font-size: 34px;
	color: #111;

	cursor: pointer;
}

.tsg-controls .tsg-controls-play:active,
.tsg-controls-map .tsg-controls-play:active
{
	opacity: 0.5;
}

.tsg-controls .tsg-controls-progress,
.tsg-controls-map .tsg-controls-progress
{
	position: absolute;
	top: 20px;
	left: 200px;

	width: calc(100% - 250px);
	height: 10px;

	background: rgba(0, 132, 63, 0.5);
}

.tsg-controls .tsg-controls-progress
{
	left: 20px;
	width: calc(100% - 70px);
}

.tsg-controls .tsg-controls-progress-fill,
.tsg-controls-map .tsg-controls-progress-fill-auto
{
	position: absolute;
	top: 0;
	left: 0;

	width: 0;
	height: 10px;

	background: #00853d;
}

.tsg-controls-map .title-label,
.tsg-controls-map .subtitle-label
{
	position: absolute;
	top: 8px;
	left: 8px;

	width: 170px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

	font-size: 18px;
	color: #111;
}

.tsg-controls-map .subtitle-label
{
	top: 28px;
	font-size: 14px;
	color: #333;
}

.tsg-controls .timecode-label,
.tsg-controls-map .timecode-label
{
	position: absolute;
	bottom: 3px;
	right: 50px;

	font-size: 12px;
	color: #333;
}

.tsg-geotag-audio
{
	position: absolute;
	top: -1000px;
	left: 0;
}

.tsg-cta-a
{
	position: absolute;
	bottom: 0;
	left: 0;

	width: 100%;
	padding-bottom: 12px;

	text-align: center;
}

.tsg-cta-a a
{
	display: inline-block;
	max-width: 40%;
	margin: 0 5px;
}

.tsg-cta-a a img
{
	max-width: 100%;
	height: auto;
	max-height: 50px;
}

.tsg-cta
{
	position: absolute;
	top: 50px;
	left: 0;
	z-index: 9;
	width: 100%;
	height: 45px;

	background-image: url(img/cta-w2.png);
	background-color: rgb(2, 75, 73);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

.tsg-cta.flipped
{
	top: 0;
}

.tsg-title-bar.flipped
{
	top: 0px;
}

.tsg-cta:active
{
	background-color: rgba(0, 38, 37, 1);
}
.tsg-geotag-image-cycle-view,
	.tsg-geotag-cycle-paging,
	.tsg-geotag-scroll-view,
	.tsg-controls
	{
		top: 50px;
	}

.tsg-map-container
{
	position: relative;
	width: 100%;
	height: calc(100% - 75px);
	top: 45px;
}

@media all and (max-width: 600px)
{
	.tsg-cta
	{
		position: absolute;
		top: 50px;
		left: 0;
		z-index: 9;
		width: 100%;
		height: 45px;

		background-image: url(img/cta-w2.png);
		background-color: rgb(2, 75, 73);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
	}

	.tsg-cta:active
	{
		background-color: rgba(0, 38, 37, 1);
	}

	.tsg-geotag-image-cycle-view,
	.tsg-geotag-cycle-paging,
	.tsg-geotag-scroll-view,
	.tsg-controls
	{
		top: 50px;
	}


	.tsg-info.with-list
{
	left: 8px;

}
	.tsg-info.with-list
	{
		left: 8px;
	}
}

@media all and (min-width: 601px)
{
	/*.tsg-cta
	{
		position: absolute;
		top: 5px;
		right: 5px;
		z-index: 9;
		width: 136px;
		height: 40px;

		background-image: url(img/cta.png);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: right center;
	}

	.tsg-cta:active
	{
		opacity: 0.5;
	}*/

	.tsg-info.with-list
{
	left: 258px;
}

	.tsg-toggle-indoor.with-list,
	.tsg-toggle-outdoor.with-list,
	.tsg-indoor-ui-minus.with-list
	{
		left: 258px;
	}

	.tsg-indoor-ui-floor.with-list
	{
		left: 310px;
	}

	.tsg-indoor-ui-plus.with-list
	{
		left: 335px;
	}

}

.tsg-org-cta
{
	position: absolute;
	z-index: 9;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40px;

	/*background: rgb(2, 75, 73);*/
	background: rgba(32, 128, 77, 1);
	color: white;
}

.tsg-org-cta:active
{
	background-color: rgba(0, 38, 37, 1);
}

.tsg-org-cta a
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 40px;
	display: block;

	text-align: center;
	padding: 10px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;

	color: white;
	text-decoration: none;
	font-size: 16px;
	font-weight: 200;
}

.tsg-info
{
	position: fixed;
	bottom: 65px;
	left: 8px;

	width: 32px;
	height: 32px;

	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center center;
}

.tsg-auto-play
{
	position: fixed;
	top: 7px;
	right: 58px;

	width: 32px;
	height: 32px;

	background-color: white;

	border: 2px solid black;
	border-radius: 5px;

	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center center;

	z-index: 10;
}

.tsg-toggle-outdoor,
.tsg-toggle-indoor
{
	position: fixed;
	top: 150px;
	left: 8px;
}

.tsg-indoor-ui-plus
{
	position: fixed;
	height: 36px;
	width: 36px;
	background-image: url("/img/ic_plus.png");

	cursor: pointer;

	top: 200px;
	left: 20px;
}

.tsg-indoor-ui-minus
{
	position: fixed;
	height: 36px;
	width: 36px;
	background-image: url("/img/ic_minus.png");
	cursor: pointer;
	top: 200px;
	left: 8px;
}

.tsg-indoor-ui-floor
{
	position: fixed;

	margin-top: 10px;
	top: 200px;
	left: 8px;
}



.tsg-toggle-outdoor button,
.tsg-toggle-indoor button
{
	-webkit-user-select: all;  /* Chrome 49+ */
-moz-user-select: all;     /* Firefox 43+ */
-ms-user-select: all;      /* No support yet */
user-select: all;          /* Likely future */

padding: 15px 24px;
}

/*
.tsg-info.with-list
{
	left: 258px;
}
*/
.tsg-info:active
{
	opacity: 0.5;
}

.tsg-bhelp
{
	position: absolute;
	bottom: 40px;
	left: 0px;

	width: 100%;
	height: 30px;
	display: block;

	text-align: center;
	padding: 7px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;

	color: white;
	text-decoration: none;
	font-size: 14px;
	font-weight: 200;

	background: #64beba;
}

.tsg-bhelp img
{
	height: 16px;
	margin-right: 10px;

	vertical-align: middle;
}

#tsg-list-map-container
{
	position: absolute;
	top: 50px;
	left: 0;

	height: calc(100% - 90px);
	width: 100%;

	z-index: 99;

	display: none;
}

#tsg-list-map-container #tsg-list-map
{
	width: 100%;
	height: 100%;
}

.lightbox-bg
{
	position: fixed;
	top: 0;
	left: 0;

	background: rgba(0, 0, 0, 0.7);
	width: 100%;
	height: 100%;

	z-index: 999;
}

.lightbox-container
{
	position: absolute;
	top: 0;
	left: 0;

	width: 100%;
	height: 100%;
}

.lightbox
{
	position: relative;
	width: 100%;
	height: 100%;

	text-align: center;
}

.lightbox .inner
{
	display: inline-block;

	position: relative;
	top: calc(15% - 23px);

	padding: 10px;
	background: white;
	border-radius: 5px;

	border: 1px solid #222;
	box-sizing: border-box;
	height: calc(70% + 46px);
}

.lightbox .inner .lightbox-image
{
	height: calc(100% - 46px);
	max-width: 100%;
}

.lightbox .inner img
{
	max-height: 100%;
	max-width: 100%;
}

.lightbox .inner .lightbox-caption
{
	display: inline-block;

	padding-top: 10px;

	font-size: 12px;
	font-family: "HelveticaNeue", Helvetica, sans-serif;
	max-height: 36px;
}

@media all and (min-width: 1000px)
{
	.tsg-mobile
	{
		display: none;
	}
}

@media all and (max-width: 999px)
{
	.tsg-wide
	{
		display: none;
	}
}

.tsg-wide, .tsg-mobile
{
	height:100%;
}

.tsg-table
{
	display: table;
	width:100%;
	height:100%;
	border-collapse: collapse;
}

.tsg-column
{
	display: table-cell;
	width: 50%;
	height: 100%;
	vertical-align: top;
}

.tsg-table .tsg-geotag-image-cycle-view,
.tsg-table .tsg-geotag-street-view
{
	height: calc(100% - 119px)
}

.tsg-table .tsg-geotag-scroll-view
{
	height: calc(100% - 135px);
}

.tsg-mobile .tsg-geotag-scroll-view
{
	height: calc(60% - 163px) !important;
}

.tsg-geotag-street-view
{
	display: none;
}

.tsg-geotag-view-controls
{
	position: absolute;
	top: 65px;
	left: 12px;
	z-index: 999;
	font-size: 0;

	display: none;
}

.tsg-geotag-view-controls.shift
{
	left: 170px;
}

.tsg-geotag-view-controls .tsg-gcontrol
{
	padding: 12px;
	background: #fff;
	color: #888;
	font-size: 16px;

	display: inline-block;
	vertical-align: top;
	border-right: 1px solid #aaa;
	cursor: pointer;
}

.tsg-geotag-view-controls .tsg-gcontrol:not(.active):hover
{
	background: #ddd;
	color: #333;
}

.tsg-geotag-view-controls .tsg-gcontrol.active
{
	background: #fff;
	color: #000;
	font-weight: bold;
	cursor: default;
}

.tsg-geotag-view-controls .tsg-gcontrol:last-child
{
	border-right: 0;
}

.labels
{
	text-shadow: #000000 1px 0 10px;

	color: blue;

}

.tsg-circle-outline-container
{
	position: absolute;
	top: 60%;
	left:0;
	width: 100%;
	height: 120px;
	text-align: center;
}

.tsg-circle-outline-progress
{
	display: inline-block;
	box-sizing: border-box;
}

.tsg-circle-outline-progress circle.track
{
	stroke: #aaa;
	fill: transparent;
	stroke-width: 3;
}

.tsg-circle-outline-progress circle.fill
{
	fill: transparent;
	stroke: #00853d;
	stroke-width: 3;
	stroke-dasharray: 360;
  	stroke-dashoffset: 330;
	transform-origin: center center;

	animation: rotate 1.5s linear infinite;
}

@keyframes rotate
{
	0% {transform: rotateZ(0deg)}
	100% {transform: rotateZ(360deg)}
}