html, body {
	height: 100%;
	margin: 0;
/*	overflow: hidden; */
}

body {
	background-color: black;
	font-family: "helvetica", "arial", sans-serif;
	color: #ffffffd1;
}

* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

@font-face {
	font-display: swap;
	font-family: Cabin-BoldItalic;
	src: url("fonts/Cabin-BoldItalic.woff2") format('woff2');
	font-style: swap;
}

@font-face {
	font-display: swap;
	font-family: Cabin-SemiBoldItalic;
	src: url("fonts/Cabin-SemiBoldItalic.woff2") format('woff2');
	font-style: swap;
}

div  h1{    
	position: absolute;
	top: 60px;
	left: 60px;
	margin-top: -10px;
	font-size: 4em;
	font-family: Cabin-BoldItalic, "helvetica", "arial", sans-serif;
	text-align: left;
	font-weight: normal;
	font-style: normal;
	color: white;
	z-index: 10;
}

@media screen and (max-width: 800px) {
  div h1 {
    top: 10px;
	left: 50%;
	margin-left: -110px;
	margin-top: 5px;
	font-size: 2em;
  }
}

#title {
	position: fixed;
	top: 10px;
	left: 10px;
	display: inline-block;
	font-size: 1.5em;
	font-family: Cabin-SemiBoldItalic, "helvetica", "arial", sans-serif;
	text-align: left;
	font-weight: normal;
	font-style: normal;
	color: white;
}

.bigMenuDiv {
	position: absolute;
    width: 300px;
    height: 282px;
	top: 20%;
	left: 22px;
	display: inline-block;
	font-size: 1.5em;
	font-family: Cabin-SemiBoldItalic, "helvetica", "arial", sans-serif;
	text-align: left;
	font-weight: normal;
	font-style: normal;
	color: white;
	z-index: 10;
}

.bigMenu {
	font-family: Cabin-SemiBoldItalic, "helvetica", "arial", sans-serif;
	text-align: left;
	font-weight: normal;
	font-style: normal;
	color: white;
	z-index: 10;	
}

li{
	margin: 50px 0;
	padding-bottom: 2px;
	list-style-type: none;
	background-image: url(li-bkgrd6.png);
}

li a{
	text-decoration: none;
	/*color: white;   /* this only worked when I set it to "li a"  vs "a li"  */ 
}

li a:link {
	color: white;
/*	border-bottom: 2px solid red; */
}

li a:visited {
	color: white;
}

li a:hover{
	color: white;
}

#contact{
	position: absolute;;
/*	top: 95%;
	left: 95%; */
	bottom: 10px;
	right: 20px;
	font-family: "helvetica", "arial", sans-serif;
	text-align: left;
	font-size: 0.7em;
	color: white;
}

#contact a{
	text-decoration: none;
	color: white;
}

.flex-container {
	position: absolute;
	display: flex;
    width: 100%;
    padding: 50px;
    box-sizing: border-box;
}

.flexContent {
	flex: 1;
	height: 260px;
	max-width: 800px;
	margin-top: 50px;
}

.flexContent p {
	font-size: 15px;
}

.contact-bgrd {
    background-image: url('contact.jpg');
    background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
    background-size: 100% 50%;
}

/* The tiles are inside of this container. Container defines margins and width.  */
.container {
	position: absolute;
    width: 450px;
    height: 650px;
	top: 50%;
	left: 55%;    
	margin-left: -225px;
	margin-top: -350px;
}

@media screen and (max-width: 1024px) {
  .container {
    display: none;
  }
}

.headMbl {
	position: absolute;
    width: 409px;
    height: 660px;
	top: 48%;
	left: 55%;    
	margin-left: -204px;
	margin-top: -360px;	
}

@media screen and (min-width: 1025px) {
  .headMbl {
    display: none;
  }
}
/* mobile menu-----------------------------------------------------------*/
/* CSS FOR THE TRIGGER. For Header  on <800 pages */
#menuTrigger,
nav {
    display: none;
}

#menuTrigger:checked + nav {
    display: inline-block;
	width: 100%;
}

/* BASIC CSS for mobile navigation menu clickable without JS */

header,
main,
nav {
    padding: 0px;
}

label {
    cursor: pointer;
	position: absolute;
	top: 0px;
    right: 0px;
}

nav {
	background-color: rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid #555;
	height: 100%;
}

ul#mbl-nav {
		list-style-type: none;
		top: 0px;
		line-height: 250%;
}

#mbl-nav li {
		background-image: none;
	/* text-align: center; */
}

a.white {
	color: white;
	font-size: 20px;
	font-family: "helvetica", "arial", sans-serif;
}

/* This is the wrapper for mobile menu. Without it there is a gap at the top. It prevents page undeerneath from moving down */

div#mobile {
	display: block;
	position: absolute;
	width: 100%;
	height: auto;
	top: 0px;
	z-index: 1000;
}


@media screen and (min-width: 800px) {
	div#mobile {
    display: none;
  }
}

@media screen and (max-width: 800px) {
	.menu2 {
    display: none;
  }
}

@media screen and (max-width: 800px) {
	.menu2Last {
    display: none;
  }
}

/* END mobile menu-----------------------------------------------------------*/

/* outer container will define aspect ratio */
.outer {
    position: relative;
    width: 100%;
}

.outer.r3x3 {   /* this is not the intended use of r3x3. See CherryTree proportional resizing  */
    padding-top: 144.444444444%; /* "height" will be 1.44444 times width */
}

/* inner container positioned absolutely and holds content */
.outer .inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* example content */
/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.23, autoprefixer: v9.7.3) */

.flip-tile {      /* is there something different with spacing or dimension of top and bottom rows?  */
	background-color: transparent;  /* new */
    float: left;
    width: 33.333%;
    height: 33.333%;
	-webkit-perspective: 1000px;
	        perspective: 1000px;  /* new */
}

.flip-tile-inner {
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-transition: -webkit-transform 30s;
	transition: -webkit-transform 30s;
	transition: transform 30s;
	transition: transform 30s, -webkit-transform 30s;
	-webkit-transform-style: preserve-3d;
	        transform-style: preserve-3d;
}

.flip-tile:hover .flip-tile-inner {
	-webkit-transform: rotateY(180deg);
	        transform: rotateY(180deg);
	-webkit-transition: -webkit-transform 0.1s;
	transition: -webkit-transform 0.1s;
	transition: transform 0.1s;
	transition: transform 0.1s, -webkit-transform 0.1s;
}

.flip-tile-front, .flip-tile-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	        backface-visibility: hidden;
}

.flip-tile-front {
	background-color: transparent;
	color: black; 
}

.flip-tile-back {
	background-color: transparent;
	color: white;
	-webkit-transform: rotateY(180deg);
	        transform: rotateY(180deg);
}

hr {
	position: absolute;
	bottom: 0px;
	margin: 0px;
	width:100%;
	border: 1px solid red;
}

.topMenu {
	position: absolute;
	top:65px;
	left"
}

.here {
	font-weight: bold;
	
}

.gallery-title {
	display: inline-block;
	font-size:1.5em; 
	color:white;
	margin-top:5px;
	margin-left: 10px;	
	font-family: Cabin-SemiBoldItalic, "helvetica", "arial", sans-serif; 
}

p {
	margin: 0 0 20px;
	font-size: 2em;
}

.deskMenu {
	width: 500px;
	height: 30px;
	font-size: 1em;
	margin: 0px auto;
	margin-top: -20px;
}

a.menu2 {
	margin-right: 40px;
/*	font-size: 1.5em; */
	color: #BBBBBB;
}

a.menu2Last {
/*	font-size: 1.5em; */
	color: #BBBBBB;
}

.underline{
	background-image: url(underline.png);
	background-size: 100% 100%;
}

a {
	color:#22BCB9;
	text-decoration:none;
}

.content {
	color: #bbb;
	font:12px/1.4 "helvetica neue",arial,sans-serif;
	max-width:1000px;
	margin: 40px auto;
}

.galleria-info-description a { 
	color: #bbb;
}

.cred {
	margin-top:20px;
	font-size:11px;
}

.galleria { 
	height: 432px; 
	max-width:1000px;
	z-index:-100;
}

.videoComment {
	width: 360px;
	height: auto;
	margin-top: 30px;
	margin-bottom: -70px;
	margin-right: auto;
	margin-left: auto;
	font-size: 15px;
	font-family: "helvetica", "arial", sans-serif;
	text-align: left;
	font-weight: normal;
	font-style: normal;
	color: #ffffffd1;
}

.ifWrapper {
	width: 100%;
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.ifContainer {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	margin-top: 86px;	
	height: 0; 
	overflow: hidden;
}

.ifContainer iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
} 

.centerImage {
	position: relative;
	width: 250px;
	height: 250px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 80px;
	text-align: center;
	font-size: 15px;
	font-family: "helvetica", "arial", sans-serif;
	font-weight: normal;
	font-style: normal;
	color: #ffffffd1;
}

.calendar {
	position: absolute;
    font-size: 10px;
    z-index: 1;
    text-align: left;
    left: 50%;
    width: 77.60em;
    height: 2.10em;
    margin-left: -38.80em;
	Margin-top: 120px;
}