.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%; 
}
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.200000) 0%,rgba(255,255,255,0.200000) 50%, rgba(255,255,255,0.200000) 100%), url('https://www.photopagegen.com/Graphics/Animations/water2.gif');
	background-color: #AABBDD;
font-family:  Verdana, Arial, Helvetica; font-size: 12pt;  color: #ffffff; 
}


/* Polaroid mechanism */
div.polaroid{
	border: 0.625000vw double rgba(140,155,187,0.8);
	padding: 0.812500vw 0.812500vw 0.812500vw 0.812500vw;
	margin: 1.250000vw;
	border-radius: 30px;
	background-color: rgba(153,170,187,0.8);
	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(-4deg); /* IE 9 */
	-webkit - transform: rotate(-4deg); /* Chrome, Safari, Opera */
	transform: rotate(-4deg);
}
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: #eeeeee}
p#p1{font-family:  Verdana, Arial, Helvetica; font-size: 8pt; color: #eeeeee}
--->
/* 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;
	}
}
/* for  large screen */
@media (min-width: 1200px) {
}
/* for really large screen */
@media (min-width: 1700px) {
}
/* ------------ 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); }
}