.backbutton {
	float: left;
	position: absolute;
	left: 15px;
	top:15px;
}
#swipe-gallery {
	text-align: center;
	padding: 0vw 0vw;
	display: inline-block;
}
.pswp__bg { background: rgba(0, 0, 0, 0.5); }
.PS_thumb {
	vertical-align: top;
	display: inline-block;
	display: inline-table;
	width: 1%;
	text-decoration: none;
}
div.word_wrap{
	  word-break: break-all;
   position: relative;
}
div.description {
   max-width:40%; 
}

/* Map mechanism */
.photo_map {
	text-align: center;
	font-size: 2vw;
	padding: 0 0;
	display: inline-block;
}
.letter {
  position: relative;
	 left: 0px;
	 color: #000000;
	 font-weight: bold;
	 font-family: "Arial";
	 font-size: 11px;
}
.letter2 {
  position: relative;
	 left: -2px;
	 color: #000000;
	 font-weight: bold;
	 font-family: "Arial Narrow";
	 font-size: 10px;
	 font-stretch: ultra-condensed;
}
div.map{
	 position: absolute;
	 left: 5px;
	 top:0px;
}
div.map2{
	 position: absolute;
	 left: 9px;
	 top:0px;
}
.path-select {
  position: absolute;
  z-index: 500;
  font-family: Arial;
  font-size: 16px;
  height: 40px;
  overflow: hidden;
  width: 170px;
  margin-left: 10px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 5px;
 background-color: #eeeeee; 
color: black; 
vertical-align: middle;
font-weight: bold;
text-indent: 10px;
outline: none;
}
.path-select:hover{ 
	background-color: #eeeeff; 
}
#dynamic_map { 
  width: 70vw;
  height: 70vw;
  color: black;
}

/* Download mechanism */
.download{
	 position: absolute;
	 left: 25px;
	 top:3px;
	 border: 0;
	 background: transparent;
}
div.plain {
   position: relative;
}

/* Thumbtack mechanism */
div.thumbtack{
	 position: absolute;
	 left: 0px;
	 right: 0px;
	 margin: auto;
	 top: -1,07142857142857vw;
}


/* Background mechanism */
body {
	background-image: linear-gradient(to bottom, rgba(255,255,255,0.000000) 0%,rgba(255,255,255,0.000000) 50%, rgba(255,255,255,0.000000) 100%), url('https://www.photopagegen.com/Graphics/Backgrounds/wood/wood1.jpg');
	background-color: #E3D3C3;
font-family:  Verdana, Arial, Helvetica; font-size: 12pt;  color: #ffffff; 
}


/* Polaroid mechanism */
div.polaroid{
	border: 0.312500vw solid rgba(190,175,158,1);
	padding: 0.812500vw 0.812500vw 0.812500vw 0.812500vw;
	margin: 1.875000vw;
	border-radius: 30px;
	background-color: rgba(187,187,187,1);
	box-shadow: -10px 10px 20px #202020;
	position: relative;
}
div.rotate0{
	float: left;
	-ms - transform: rotate(0deg); /* IE 9 */
	-webkit - transform: rotate(0deg); /* Chrome, Safari, Opera */
	transform: rotate(0deg);
}
div.rotate_right1{
	float: left;
	-ms - transform: rotate(4deg); /* IE 9 */
	-webkit - transform: rotate(4deg); /* Chrome, Safari, Opera */
	transform: rotate(4deg);
}
div.rotate_right2{
	float: left;
	-ms - transform: rotate(4deg); /* IE 9 */
	-webkit - transform: rotate(4deg); /* Chrome, Safari, Opera */
	transform: rotate(4deg);
}
div.rotate_right3{
	float: left;
	-ms - transform: rotate(3deg); /* IE 9 */
	-webkit - transform: rotate(3deg); /* Chrome, Safari, Opera */
	transform: rotate(3deg);
}
div.rotate_left1{
	float: left;
	-ms - transform: rotate(-2deg); /* IE 9 */
	-webkit - transform: rotate(-2deg); /* Chrome, Safari, Opera */
	transform: rotate(-2deg);
}
div.rotate_left2{
	float: left;
	-ms - transform: rotate(-2deg); /* IE 9 */
	-webkit - transform: rotate(-2deg); /* Chrome, Safari, Opera */
	transform: rotate(-2deg);
}
div.rotate_left3{
	float: left;
	-ms - transform: rotate(-3deg); /* IE 9 */
	-webkit - transform: rotate(-3deg); /* Chrome, Safari, Opera */
	transform: rotate(-3deg);
}
div.rotate_right_panorama{
	float: left;
	-ms - transform: rotate(1deg); /* IE 9 */
	-webkit - transform: rotate(1deg); /* Chrome, Safari, Opera */
	transform: rotate(1deg);
}
div.rotate_left_panorama{
	float: left;
	-ms - transform: rotate(-1deg); /* IE 9 */
	-webkit - transform: rotate(-1deg); /* Chrome, Safari, Opera */
	transform: rotate(-1deg);
}

/* Font mechanism */
<!--  
TD{font-family:  Verdana, Arial, Helvetica; font-size: 10pt; color: #707070}
H1{font-family:  Verdana, Arial, Helvetica; font-size: 28pt; color: #707070}
H2{font-family:  Verdana, Arial, Helvetica; font-size: 20pt; color: #707070}
H3{font-family:  Verdana, Arial, Helvetica; font-size: 12pt; color: #707070}
H6{font-family:  Verdana, Arial, Helvetica; font-size: 10pt; color: #707070}
p{font-family:  Verdana, Arial, Helvetica; font-size: 10pt; color: #eeeeee}
p#p1{font-family:  Verdana, Arial, Helvetica; font-size: 8pt; color: #eeeeee}
--->
/* ------------ tooltips ------------ */
.tooltip {
    position: relative;
    display: inline-block;
}
option:hover {
    background-color: blue;
}
.heart_image {
    text-align: left;
}
.tooltip .likedropdown {
    visibility: hidden;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding-bottom: 15px;
    padding-top: 10px;
    z-index: 1;
    bottom: 110%;
    left: 0%;
    margin-left: -35px;
    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 1s;
}
.tooltip:hover .likedropdown {
    visibility: visible;
    opacity: 1.0;
}
.gemselect {
    position: relative;
    width: 110px;
    top: 50%;
    transform: translateY(-15%);
    -webkit-transform: translateY(-15%);
    font-family: Arial;
    overflow: hidden;
    -webkit-border-radius: 10;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color: #CD5C5C; 
    color: white; 
    vertical-align: middle;
    font-weight: bold;
    text-indent: 5px;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 180px;
    background-color: black;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 5px 10px;
    position: absolute;
    z-index: 1;
    bottom: 110%;
    left: 0%;
    margin-left: -60px;
    margin-bottom: 10px;
    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 2s;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1.0;
}
.tooltip .tooltiptext::after{ 
	 content: "   "; 
	 position: absolute; 
	 top: 100%; /* At the bottom of the tooltip */
	 left: 33%; 
	 margin-left: -5px; 
	 border-width: 10px; 
	 border-style: solid; 
	 border-color: black transparent transparent transparent; 
}
.tooltip_social {
    position: relative;
    display: inline-block;
}
.tooltip_social .tooltiptext_social {
    visibility: hidden;
    white-space: nowrap;
    background-color: black;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 5px 10px;
    position: absolute;
    z-index: 1000;
    top: 30px;
    left: 0%;
    margin-left: 0px;
    margin-bottom: 0px;
    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 2s;
}
.tooltip_social:hover .tooltiptext_social {
    visibility: visible;
    opacity: 1.0;
}
.tooltip_social .tooltiptext_social::after{ 
	 content: "   "; 
	 position: absolute; 
	 bottom: 100%; /* At the bottom of the tooltip */
	 left: 10%; 
	 margin-left: -5px; 
	 border-width: 10px; 
	 border-style: solid; 
	 border-color: transparent transparent black transparent; 
}
@media (max-width: 800px) {
	.path-select {
		display: none;
	}
}
@media (min-width: 800px) {
	.path-select {
		display: inline-block;
	}
}
/* phone looking horizontal */
@media (min-width: 800px) and (max-width: 1200px) {
div.description {
   max-width:60%; 
}
	div.polaroid {
		padding: 0.270833vw;
	}
}
/* phone looking vertical */
@media (max-width: 800px) {
div.description {
   max-width:80%; 
}
	div.polaroid {
		padding: 0vw;
	}
	#dynamic_map {
		width: 90vw;
		height: 90vw;
	}
}
/* for  large screen */
@media (min-width: 1200px) {
	.photo_map {
		font-size: 20px;
	}
	#dynamic_map {
		width: 60vw;
		height: 60vw;
	}
}
/* for really large screen */
@media (min-width: 1700px) {
	#dynamic_map {
		width: 50vw;
		height: 50vw;
	}
}
/* ------------ sprites ------------ */
/* This CSS rule is applied to all img elements directly inside div elements which are
   directly inside the Container div. In other words, it matches the 'img' elements
   inside the Divs which are created in the createAnObject() function.
*/
#spriteContainer > div > img {
     position: fixed;
     height: 13vw;
}
/* on small screens like phones, largen them a little so they can be seen */
@media (max-width: 700px) {
	#spriteContainer > div > img{
		height: 26vw;
	}
}
/* on large screens like wide hi res monitors, shrink them a little so they don't look huge */
@media (min-width: 2000px) {
	#spriteContainer > div > img{ 
		height: 6vw;
	}
}
/* Rotates a sprite from -n to n degrees in 2D space */
@keyframes clockwiseSpin
{
    /* Rotate a sprite by -n degrees in n space at the start of the animation */
    0%   { transform: rotate(-30deg); }
    /*  Rotate a sprite by n degrees in 2D space at the end of the animation */
    100% { transform: rotate(30deg); }
}
/* Flips a sprite and rotates it from n to -n degrees in 2D space */
@keyframes counterclockwiseSpinAndFlip 
{
    /* Flip (don't!) a sprite and rotate it by n degrees in 2D space at the start of the animation */
    0%   { transform:  rotate(30deg); }
    /* Flip a sprite and rotate it by -n degrees in 2D space at the end of the animation */
    100% { transform:   rotate(-30deg); }
}