/* -- Kai Pakotai Cafe --
	Unique styles for homepage, index.html. */

	/* change padding to fit content against the footer */
main.home {
	padding-bottom: 0;
	position: relative;
	overflow: hidden;
}

	/* Make some whitespace */
.contentFlex.home {
	margin-top: 7rem;
}

	/* Make sure we have no purple underlined links */
a {
	text-decoration: none;
	color: black;
}

	/* In-page button design */
.button {
	text-align: center;
	margin: 5rem auto 3rem;
	width: 25rem;
	height: 6rem;
	background-image: url("images/buttonTransparent.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	text-decoration: none;
	color: black;
	position: relative;
}

.button p {
	position: absolute;
	top: 1.1rem;
	left:7.5rem;
	font-size: 2rem;
}

.button p:hover, .button:hover p {
	text-decoration: underline;
}

.button:hover {
	background-image: url("images/buttonOpaque.png");
}

/* position the attribution caption for top image */
.contentLeft {
	position: relative;
}

.caption.home {
	bottom: 9.67rem;
}

/* Style audio bar*/
audio {
	width: 100%;
	margin: 3rem 0;
	border: 3px solid #A18FD1;
}

/* Large fixed image settings */
.background {
	position: relative;
	right: 5vw;
	width: calc(100% + 10vw);
	height: auto;
	padding: 10vw 0;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.background.one {
	background-image: url("images/mochaccino.jpg");
	overflow: hidden;
}

.background.two {
	background-image: url("images/hangi.jpg");
	overflow: hidden;
}

/*Text over large fixed images*/
.floatingText {
	position: relative;
	top: 30%;
	background: rgb(223, 255, 240);
	background: rgba(223, 255, 240, .8);
	width: 60%;
	border: 3px solid #A18FD1;
	margin: auto;
	padding: 1rem 3rem;
}

.floatingText p {
	position: relative;
	z-index: 2;
}

	/*shift the new Kowhaiwhai bars to compensate for padding */
main .kowhaiwhaiBar {
	position: relative;
	right: 5vw;
	width: calc(100% + 10vw);
}

	/* Button design to show on the links over floating text*/
.floatingButton {
	opacity: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
}

.floatingText:hover .floatingButton {
	opacity: 1;
}

.floatingText:hover {
	text-decoration: underline;
	cursor: pointer;
}