:root {	--text_time: 30s ease-in-out infinite normal;
		--photo_time: 6s;
		--rotaY: 1;
		--rotaX: 20deg;
		--rotaZ: 20deg; }

@keyframes trans_cap {
	 25% { transform: translateX(-15%); }	
	 75% { transform: translateX( 15%); }
	  to { transform: translateX(0); }  }

@keyframes trans_descrip {
	 25% { transform: translateY(-40%); }	
	 75% { transform: translateY( 40%); }
	  to { transform: translateY(0); } 	}
	 	 
@keyframes rotaForward {
    0% { transform: rotateZ(0) rotateX(0) rotateY(0); }
   10% { transform: rotateZ(calc(var(--rotaZ) * 0.1)) rotateX(calc(var(--rotaX) * 0.1)) rotateY(calc(var(--rotaY) * 1.30 * 180deg)); }
   20% { transform: rotateZ(calc(var(--rotaZ) * 0.2)) rotateX(calc(var(--rotaX) * 0.2)) rotateY(calc(var(--rotaY) * 0.75 * 180deg)); }
   30% { transform: rotateZ(calc(var(--rotaZ) * 0.3)) rotateX(calc(var(--rotaX) * 0.3)) rotateY(calc(var(--rotaY) * 1.20 * 180deg)); }
   40% { transform: rotateZ(calc(var(--rotaZ) * 0.4)) rotateX(calc(var(--rotaX) * 0.4)) rotateY(calc(var(--rotaY) * 0.85 * 180deg)); }
   50% { transform: rotateZ(calc(var(--rotaZ) * 0.5)) rotateX(calc(var(--rotaX) * 0.5)) rotateY(calc(var(--rotaY) * 1.10 * 180deg)); }
   60% { transform: rotateZ(calc(var(--rotaZ) * 0.6)) rotateX(calc(var(--rotaX) * 0.6)) rotateY(calc(var(--rotaY) * 0.93 * 180deg)); }
   70% { transform: rotateZ(calc(var(--rotaZ) * 0.7)) rotateX(calc(var(--rotaX) * 0.7)) rotateY(calc(var(--rotaY) * 1.05 * 180deg)); }
   80% { transform: rotateZ(calc(var(--rotaZ) * 0.8)) rotateX(calc(var(--rotaX) * 0.8)) rotateY(calc(var(--rotaY) * 0.97 * 180deg)); }
   90% { transform: rotateZ(calc(var(--rotaZ) * 0.9)) rotateX(calc(var(--rotaX) * 0.9)) rotateY(calc(var(--rotaY) * 1.02 * 180deg)); }
  100% { transform: rotateZ(var(--rotaZ)) rotateX(var(--rotaX)) rotateY(calc(var(--rotaY,1) * 180deg)); }  }

@keyframes rotaRevers {
    0% { transform: rotateZ(var(--rotaZ)) rotateX(var(--rotaX)) rotateY(calc(var(--rotaY,1) * 180deg)); }
   10% { transform: rotateZ(calc(var(--rotaZ) * 0.9)) rotateX(calc(var(--rotaX) * 0.9)) rotateY(calc(var(--rotaY) * (-0.30) * 180deg));}
   20% { transform: rotateZ(calc(var(--rotaZ) * 0.8)) rotateX(calc(var(--rotaX) * 0.8)) rotateY(calc(var(--rotaY) *   0.25  * 180deg));}
   30% { transform: rotateZ(calc(var(--rotaZ) * 0.7)) rotateX(calc(var(--rotaX) * 0.7)) rotateY(calc(var(--rotaY) * (-0.20) * 180deg));}
   40% { transform: rotateZ(calc(var(--rotaZ) * 0.6)) rotateX(calc(var(--rotaX) * 0.6)) rotateY(calc(var(--rotaY) *   0.15  * 180deg));}
   50% { transform: rotateZ(calc(var(--rotaZ) * 0.5)) rotateX(calc(var(--rotaX) * 0.5)) rotateY(calc(var(--rotaY) * (-0.10) * 180deg));}
   60% { transform: rotateZ(calc(var(--rotaZ) * 0.4)) rotateX(calc(var(--rotaX) * 0.4)) rotateY(calc(var(--rotaY) *   0.07  * 180deg));}
   70% { transform: rotateZ(calc(var(--rotaZ) * 0.3)) rotateX(calc(var(--rotaX) * 0.3)) rotateY(calc(var(--rotaY) * (-0.05) * 180deg));}
   80% { transform: rotateZ(calc(var(--rotaZ) * 0.2)) rotateX(calc(var(--rotaX) * 0.2)) rotateY(calc(var(--rotaY) *   0.03  * 180deg));}
   90% { transform: rotateZ(calc(var(--rotaZ) * 0.1)) rotateX(calc(var(--rotaX) * 0.1)) rotateY(calc(var(--rotaY) * (-0.02) * 180deg));}
  100% { transform: rotateX(0) rotateZ(0) rotateY(0); }  }
 
#polaroid_wrapper {
	position: relative;
	width: 100%; 
	height: 100%;  }
 
html, body, .fullscreen {
    width: 100%;
    height: 100%; }

.photo {
    position: absolute;
    cursor: pointer;
    transition: var(--photo_time); }

.side {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; }

.side-back {
	display: table; 
	animation: rotaForward 6s ease-in-out forwards;

	& div {	display: table-cell;
			vertical-align: middle;
			background-blend-mode: overlay;
			background: url("../images/Background/back-8.png"), #F5F5F5BB;
			background-size: 20%;
			background-repeat: repeat;
			background-position: center;  }
			
	& p {	text-align: center;	
			padding: 30px;
			color: #006400;
			font-family: Great Vibes, Arial, sans-serif;
			font-weight: 400;
			font-style: normal;
			font-size: calc(1vw + 1vh);	
			animation: trans_descrip var(--text_time);  } }  /* side-back */

.photo.flipped .side-front {
   	animation: rotaForward var(--photo_time) ease-in-out forwards; }

.photo.flipped .side-back {
    animation: rotaRevers  var(--photo_time) ease-in-out forwards; } 

.side-front {
	display: table;
    animation: rotaRevers var(--photo_time) ease-in-out forwards;
figure {
    width: 300px;
    position: absolute;
    padding: 30px;
    margin: 0 auto;
    text-align: center;
    background-blend-mode: overlay;
	background: url("../images/Background/back-8.png"), #F5F5F5BB;
	background-size: 20%;
	background-repeat: repeat;
	background-position: center; 
  & img {
		width: 100%;
		margin: 0 auto;
		margin-bottom: 15px; }   
  & figcaption {
		text-align: center;
		font-family: Great Vibes, cursive;
		font-weight: 400;
		font-style: normal;
		color: #006400;   
		font-size: calc(2vw + 2vh);
		animation: trans_cap var(--text_time); } } }   /* figure side-front */

.navbar {
    position: sticky;
	display: flex;
    justify-content: center;
    bottom: 0;
	margin: 0 auto;
	background-color: transparent;
    z-index: 999; }

button {
    background-color: #00320080;
    padding: 0 20px;
	margin: 0 10px;
	text-align: center;
	font-family: Great Vibes, Arial, sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: calc(2.5vw + 2.5vh);
    color: #00FFFF;
    border: 1px solid black;
	border-radius: 0;
	cursor: pointer;
    transition: 1s cubic-bezier(0.5, -0.8, 0.5, 1.5); 
  &:hover { background-color: #003200;
			color: #FF0000;
			transform: translateY(-10px) scale(1.3); }  }