#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:60%; 
}

/* Map mechanism */
.photo_map {
	text-align: center;
	padding: 0 0;
	display: inline-block;
}
.path-select {
  position: absolute;
  top: 65px;
  left: 45%;
  z-index: 500;
  font-family: Arial;
  font-size: 16px;
  height: 40px;
  overflow: hidden;
  width: 175px;
  -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: 5px;
	 top:5px;
	 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-color: #202020;
font-family:  Verdana, Arial, Helvetica; font-size: 12pt;  color: #404040; 
}

#snow{
background: none;
background-image: url('http://www.photopagegen.com/Graphics/Animations/snow/snow1.png'), url('http://www.photopagegen.com/Graphics/Animations/snow/snow2.png'), url('http://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{
	border: 0.625000vw double rgba(40,40,40,1);
	padding: 0.812500vw 0.812500vw 0.812500vw 0.812500vw;
	margin: 1.250000vw;
	border-radius: 30px;
	background-color: rgba(51,51,51,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(6deg); /* IE 9 */
	-webkit - transform: rotate(6deg); /* Chrome, Safari, Opera */
	transform: rotate(6deg);
}
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(6deg); /* IE 9 */
	-webkit - transform: rotate(6deg); /* Chrome, Safari, Opera */
	transform: rotate(6deg);
}
div.rotate_left1{
	float: left;
	-ms - transform: rotate(-5deg); /* IE 9 */
	-webkit - transform: rotate(-5deg); /* Chrome, Safari, Opera */
	transform: rotate(-5deg);
}
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(-6deg); /* IE 9 */
	-webkit - transform: rotate(-6deg); /* Chrome, Safari, Opera */
	transform: rotate(-6deg);
}
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);
}

/* 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: #505050}
p#p1{font-family:  Verdana, Arial, Helvetica; font-size: 8pt; color: #505050}
--->
/* ------------ tooltips ------------ */
.tooltip {
    position: relative;
    display: inline-block;
}
.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: 1;
    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; 
}
/* phone looking horizontal */
@media (min-width: 800px) and (max-width: 1200px) {
	div.polaroid {
		padding: 0.270833vw;
	}
}
/* phone looking vertical */
@media (max-width: 800px) {
	div.polaroid {
		padding: 0vw;
	}
}
/* ------------ 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: 8vw;
}
/* on small screens like phones, largen them a little so they can be seen */
@media (max-width: 700px) {
	#spriteContainer > div > img{
		height: 16vw;
	}
}
/* 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: 4vw;
	}
}
/* 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); }
}