/* Fonts used throughout the site */
@import url('https://fonts.googleapis.com/css?family=Dekko|Kalam|Marcellus|Marcellus+SC|Quando|Rancho|Roboto');

/* Dekko, Kalam, Marcellus, Qunado for headers; Rancho for captions, Roboto for body */

/* Basic spacing section */
body {
	margin: 0;
	padding: 0;
	font-family: 'Roboto', sans-serif;
	background: linear-gradient(#6eb7fc, #c88572);
	background: #6eb7fc;
	background: -webkit-linear-gradient(#6eb7fc, #c88572);
	background: -o-linear-gradient(#6eb7fc, #c88572);
	background: -moz-linear-gradient(#6eb7fc, #c88572);
	background: linear-gradient(#6eb7fc, #c88572);
}

#container {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

.divide {
	width: 90%;
	height: 1px;
	background-color: black;
	margin: 2px auto;
} /* line to divide sections */

.subtitle {
	margin-bottom: 0px;
} /* For headers that have a subtitle */

.firstH1 {
	margin-top: 2px;
	margin-bottom: 2px;
}

.rowWrap {
	display: flex;
	flex-flow: row wrap;

	} /* For when I need a row-wrap container */

.textCenter {
	text-align: center;
}
/* Basic style end */

/* Header and Main Menu style */
#site-head {
	width: 100%;
}

.topbar {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.logo h1, h3 {
	margin: 0px;
	padding: 0px;
	font-family: 'Quando', serif;
	text-shadow: 2px 2px #f68564;

}

.logo h3{
	font-size: 14px;
}

.motto {
	font-family: 'Quando', serif;
	font-size: 14px;
	text-shadow: 1px 1px white;
}

.main-menu{
	width: 100%;
	margin-top: 0px;
	margin-bottom: 0px;
	font-family: 'Marcellus SC', serif;
	font-size: 18px;
	font-weight: bolder;
	background-color: white;
	background-image: url(../images/driftwood.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	padding: 1px 0;
}

.menus {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	list-style: none;
	align-items: center;
}

.menus a{
	text-decoration: none;
	color: black;
}

.menus li {
	text-align: center;
}

.menu-smaller {
	font-size: 14px;
}
/* End Header */

/* Main section start (common to all pages) */
#site-main {
	width: 100%;
	margin: initial;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.9);
}

#site-main h1 {
	font-family: 'Marcellus', serif;
}

#site-main p {
	font-size: 1.125em;
	margin: 0.6em 0px;
}

.butt {
	display: inline-block;
	background-color: blue;
	padding: 0.5em;
	margin: 0.75em;
	color: white;
	font-family: 'arial', sans-serif;
	border-radius: 7px;
	text-decoration: none;
}

.butt:hover {
	cursor: pointer;
}

.butt a {
	color: white;
}
/* Common Main end */

/* Inde Page style start */
#front_photo {

}

.front-para {
	width: 60%;
}

/* Photo page style start */
.photos-page {
	position: relative;
}

.slider-container {
	position: relative;
	display: block;
	height: 540px;
    width: 640px;
}

.slider {
    height: 540px;
    width: 640px;
    padding: 0px;
    margin: 0px auto;
    list-style-type: none;
    z-index: 1;
}

.slide {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 640px;
    height: 540px;
    opacity: 0;
    z-index: 2;

    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
} /* Puts all the slides in the same place and creates a transition effect on switch */

.showing {
    opacity: 1;
    z-index: 5;
}

.slide img {
	width: 640px;
	height: 480px;
	cursor: zoom-in;
}

.caption {
	display: block;
	height: 60px;
	width: 640px;
	text-align: center;
}

.left-arrow {
	position: absolute;
	left: 10px;
	top: 40%;
	z-index: 10;
	height: 50px;
	width: 30px;
	background-image: url(../images/left_arrow.svg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.8;
	cursor: pointer;
}

.right-arrow {
	position: absolute;
	right: 10px;
	top: 40%;
	z-index: 10;
	height: 50px;
	width: 30px;
	background-image: url(../images/right_arrow.svg);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.8;
	cursor: pointer;
}

.loading {
	height: 540px;
	width: 640px;
	z-index: 50;
	position: absolute;
	top: 0px;
	left: 0px;
	opacity: 1.0;
	background: white;
	transition: opacity 1000ms;
	display: flex;
	justify-content: center;
	align-items: center;
}

.loadingImg {
	transform: rotateZ(0deg);
	/*transition: transform 250ms;*/
	animation-name: loadAnim;
	animation-duration: 750ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes loadAnim {
	0% { transform: rotateZ(0deg); }
	50% { transform: rotateZ(180deg); }
	100% { transform: rotateZ(360deg); }
}
/* Photos page end */

/* Rates Page Style */
#rates {
	display: none;
	background-color: #ccffff;
	border: 1px solid black;
	flex-flow: column;
	align-items: center;
	padding: 0px 5px;
}

#ratesTab {
	font-family: 'arial', sans-serif;
	background-color: #80ffff
	border: 1px solid black;
	margin: 0px auto 5px auto;
}

#ratesTab td {
	padding: 0.25em 1em;
	text-align: center;
}

#ratesHide {
	margin: 0.75em auto;
	align-self: center;
}

#rentalIMG {
	width: 75%;
}

#amenities {
	display: none;
	background-color: #ccffff;
	border: 1px solid black;
	flex-flow: column;
	align-items: center;
	padding: 0px 10px;
}
/* End of Rates page style section */

/* Booking (calendar) page style start */

.calendar-table {
	margin-bottom: 10px;
	border: 3px outset #b37700;
	background-color: #ffeecc;
	border-radius: 5px;
}

.calendar-header-day {
	background-color: white;
}

.calendar-table td {
	width: 4em;
	margin: 0px;
	text-align: center;
	border: 1px solid black;
	border-radius: 3px;
}

.avail {
	background-color: #80ff80;
}

.halfy {
	background-color: #ffff66;
}

.taken {
	background-color: #ff6666;
}

#formContain {
	position: absolute;
	right: 3em;
	bottom: 5vh;
	z-index: 3;
	background-color: white;
}
/* Booking page end */

/* Contact page style starts here */
.contact {
display: initial;
align-items: initial;
}

.threehundred {
	width: 300px;
}

.sixhundred {
	width: 600px;
}

.ainline {
	display: inline;
}

.pinky {
	background-color: #ffccff;
	color: black;
	text-decoration: none;
	border: 2px solid #ff80ff;
}

.pinky a {
	text-decoration: none;
	color: black;
}

/* Contact page ends here */

/* Maps page style starts here */
#mapButtDiv {
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	text-align: center;
	border: 3px dashed black;
	border-radius: 5px;
	padding-top: 3px;
}

#map01 {
	display: initial;
}

#map02 {
	display: none;
}

#map03 {
	display: none;
}

#map04 {
	display: none;
}

#em01 {
	display: initial;
}

#em02 {
	display: none;
}

#em03 {
	display: none;
}

#em04 {
	display: none;
}
/* Maps section end */

/* Links page style start */

#flexContain {
	width: 100%;
	display: flex;
}

.Llist {
	list-style: none;
}

.fifty {
	width: 48%;
	padding: 0 2em;
}

/* Links page style end */

/* Footer section start (common to all pages) */
#site-foot {
	width: 100%;
	text-align: center;
}

.copy {
	width: 100%;
	font-size: 10px;
	background-color: #d9d9d9;
	padding: .5em 0;
}
/* Footer section end */

/* Class to let me hide things */
.hidden {
	display: none;
}

/* Special background for Calendar admin page */
.cal-admin {
	background-color: #ffccff;
}