#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;
}
div.map_title{
	 position: absolute;
	 left: 5px;
	 top: 2px;
}
.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;
}

/* Like mechanism */
.click-trigger{
	 position: absolute;
	 left: 45px;
	 top:3px;
	 border: 0;
	 background: transparent;
	 z-index: 1000;
}
.click-count{
  color: white;
	 position: absolute;
	 left: 67px;
	 top:3px;
	 z-index: 1000;
}
.gem-pos-1{
	 position: absolute;
	 right: -40px;
	 top: -40px;
	 border: 0;
	 background: transparent;
}
.gem-pos-2{
	 position: absolute;
	 right: -40px;
	 top: 60px;
	 border: 0;
	 background: transparent;
}
.gem-pos-3{
	 position: absolute;
	 right: -40px;
	 top: 140px;
	 border: 0;
	 background: transparent;
}
.gem-pos-4{
	 position: absolute;
	 right: -40px;
	 top: 235px;
	 border: 0;
	 background: transparent;
}
.gem-pos-5{
	 position: absolute;
	 right: 60px;
	 top: -40px;
	 border: 0;
	 background: transparent;
}
.gem-pos-6{
	 position: absolute;
	 right: 140px;
	 top: -40px;
	 border: 0;
	 background: transparent;
}
.gem-text-1{
	 position: absolute;
	 left: 50%;
	 top: 43%;
	 font-size: 10px;
	 color: #606060;
	 transform: translate(-50%, -50%);
}
.gem-text-2{
	 position: absolute;
	 left: 40%;
	 top: 67%;
	 font-size: 10px;
	 color: #ffffff;
	 transform: translate(-50%, -50%);
}
.gem-text-3{
	 position: absolute;
	 left: 40%;
	 top: 67%;
	 font-size: 10px;
	 color: #ffffff;
	 transform: translate(-50%, -50%);
}
.gem-text-6{
	 position: absolute;
	 left: 48%;
	 top: 25%;
	 font-size: 10px;
	 color: #606060;
	 transform: translate(-50%, -50%);
}
.gem-text-5{
	 position: absolute;
	 left: 50%;
	 top: 20%;
	 font-size: 10px;
	 color: #404040;
	 transform: translate(-50%, -50%);
}
.gem-text-4{
	 position: absolute;
	 left: 40%;
	 top: 72%;
	 font-size: 10px;
	 color: #ffffff;
	 transform: translate(-50%, -50%);
}

/* Title page likes and comments */
.like-icon{
	 position: absolute;
	 left: 2.5vw;
	 bottom: -2vw;
	 border: 0;
	 background: transparent;
}
.like-count{
  color: white;
	 position: absolute;
	 left: 4.5vw;
	 bottom: -1.7vw;
	 font-size: 1vw;
}
.comment-icon{
	 position: absolute;
	 left: 6.5vw;
	 bottom: -2vw;
	 border: 0;
	 background: transparent;
}
.comment-count{
  color: white;
	 position: absolute;
	 left: 8.5vw;
	 bottom: -1.7vw;
	 font-size: 1vw;
}

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


/* Background mechanism */
body {
	background-color: #AABBDD;
font-family:  Verdana, Arial, Helvetica; font-size: 12pt;  color: #404040; 
}

#snow{
background: none;
background-image: url('https://www.photopagegen.com/Graphics/Animations/snow/snow1.png'), url('https://www.photopagegen.com/Graphics/Animations/snow/snow2.png'), url('https://www.photopagegen.com/Graphics/Animations/snow/snow3.png');
min-height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index:-1000;
-webkit-animation: snow 10s linear infinite;
-moz-animation: snow 10s linear infinite;
-ms-animation: snow 10s linear infinite;
animation: snow 10s linear infinite;
}
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}



/* Polaroid mechanism */
div.polaroid{
	margin: 1.875000vw;
	position: relative;
}
div.polaroid_title{
	margin: 1.875000vw;
	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(5deg); /* IE 9 */
	-webkit - transform: rotate(5deg); /* Chrome, Safari, Opera */
	transform: rotate(5deg);
}
div.rotate_right3{
	float: left;
	-ms - transform: rotate(6deg); /* IE 9 */
	-webkit - transform: rotate(6deg); /* Chrome, Safari, Opera */
	transform: rotate(6deg);
}
div.rotate_left1{
	float: left;
	-ms - transform: rotate(-6deg); /* IE 9 */
	-webkit - transform: rotate(-6deg); /* Chrome, Safari, Opera */
	transform: rotate(-6deg);
}
div.rotate_left2{
	float: left;
	-ms - transform: rotate(-4deg); /* IE 9 */
	-webkit - transform: rotate(-4deg); /* Chrome, Safari, Opera */
	transform: rotate(-4deg);
}
div.rotate_left3{
	float: left;
	-ms - transform: rotate(-4deg); /* IE 9 */
	-webkit - transform: rotate(-4deg); /* Chrome, Safari, Opera */
	transform: rotate(-4deg);
}
div.rotate_right_panorama{
	float: left;
	-ms - transform: rotate(2deg); /* IE 9 */
	-webkit - transform: rotate(2deg); /* Chrome, Safari, Opera */
	transform: rotate(2deg);
}
div.rotate_left_panorama{
	float: left;
	-ms - transform: rotate(-2deg); /* IE 9 */
	-webkit - transform: rotate(-2deg); /* Chrome, Safari, Opera */
	transform: rotate(-2deg);
}
div.albumborder{
  box-shadow:         8px 8px 8px rgba(0,0,0,.55);
	position: relative;
}
.albumborder:before{
	border: 1px solid rgba(170, 170, 170, 1);
	background: #e3e3e3;
	content: ""; 
	width: 100%; 
	height: 100%; 
	position: absolute; 
	left: 0;
  top: 0; z-index: -10;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -moz-box-shadow:    2px 2px 2px rgba(0,0,0,.45);
  -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.45);
  box-shadow:         10px 10px 10px rgba(32,32,32,.75);
}
.albumborder:after{
	border: 1px solid rgba(170, 170, 170, 1);
	background: #e3e3e3;
	content: ""; 
	width: 100%; 
	height: 100%; 
	position: absolute; 
	left: 0;
  top: 0; z-index: -10;
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  -moz-box-shadow:    5px 5px 5px rgba(0,0,0,.45);
  -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,.45);
  box-shadow:         5px 5px 5px rgba(0,0,0,.45);
}

/* 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: #909090}
p#p1{font-family:  Verdana, Arial, Helvetica; font-size: 8pt; color: #909090}
--->
@import "https://fonts.googleapis.com/css?family=Raleway";
* { box-sizing: border-box; }
#contact { 
  -webkit-user-select: none; /* Chrome/Safari */ 
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
  margin: 4em auto;
  width: 100px; 
  height: 30px; 
  line-height: 30px;
  background: teal;
  color: white;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  border: 1px solid white;
}
#contact:hover { background: #666; }
#contact:active { background: #444; }
#contactForm { 
  display: none;
  color: black;
  border: 6px solid salmon; 
  padding: 2em;
  width: 400px;
  text-align: center;
  background: #fff;
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
}
.formBtn { 
  width: 100px;
  display: inline-block;
  background: teal;
  color: #fff;
  font-weight: 100;
  font-size: 1.2em;
  border: none;
  height: 30px;
}


.signin_img{
  display: inline-block;
  vertical-align: middle;
}
.signin_name {
  display: inline-block;
  vertical-align: middle;
}
#loginusername {
	display: inline;
	padding: 8px;
	border-radius: 20px;
	font-weight: bold;
}
#administrator {
	display: none;
	padding: 8px;
	color: #ff4040;
	font-weight: bold;
	font-style: italic;
}
#logs {
	float: right;
}
/* ------------ 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: 0.8;
}
.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.000000vw;
	}
}
/* 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;
	}
}
/* phone looking horizontal */
@media (max-width: 1200px) {
	.gem_icon {
		width: 75px;
	}
}
/* phone looking vertical */
@media (max-width: 800px) {
	.gem_icon {
		width: 50px;
	}
	.gem-pos-1 {
		top: -30px;
	}
	.gem-pos-2 {
		top: 10px;
	}
	.gem-pos-3 {
		top: 45px;
	}
	.gem-pos-4 {
		top: 85px;
	}
	.gem-pos-5 {
		top: 125px;
	}
	.gem-pos-6 {
		top: 170px;
	}
.gemselect {
    width: 50px;
	}
}
/* ------------ 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: 25vw;
}
/* on small screens like phones, largen them a little so they can be seen */
@media (max-width: 700px) {
	#spriteContainer > div > img{
		height: 50vw;
	}
}
/* 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: 12vw;
	}
}
/* 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); }
}