@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Abel&family=Dancing+Script:wght@700&family=Handlee&display=swap');


body {
    background-color: #fff;
}

header {
    width: 100%;
    padding: 1.041666666666667% 0; /* 10 / 960 */
}

#header-content {
    width: 100%; /* changed from 960px to 100% */
	margin-left: auto; /* margin left-right auto */ 
	margin-right: auto; /* margin left-right auto */  
	position: relative;
}

#header-content img {
    width: 15.625%; /* 150px / 960px */
    height: 15.625%; /* 150px / 960px */
}

nav {
	width: 76.04166666666667%; /* 730 / 960 and adjust as needed*/
	position: relative;
	margin-bottom: 1.875%; /* 18 / 960 */
	right: 0;
    white-space: nowrap;
}

nav ul {
    display: block;
	text-align: center;
	list-style-type: none;
}

nav li {
    display: inline-block;
	font-family: 'Abel', sans-serif;
	font-size: 1.25em; /* 20 / 16 */
	padding: 0 3.125%; /* padding top is 0; padding left-right 30 / 960 */
	text-align: center;
}

nav a:link {
    text-decoration: none;
	color: #732002; 
	padding: 10px 2.083333333333333%; /* padding top; padding left-right 20 / 960 */
}

nav a:hover {
    background-color:#732002; /* change this color */
	color: #888c65;
	padding: 10px 2.083333333333333%; /* padding top; padding left-right 20 / 960 */
    text-decoration: underline;
}

nav a:visited {
    background-color:#fff; /* change this color */
	color: #732002;
	padding: 10px 2.083333333333333%; /* padding top; padding left-right 20 / 960 */
}

#banner { 
    height: 281px;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

h1 {
    font-family: 'Abel', sans-serif;
    font-size: 2.25em; /* 36 / 16 */
    text-align: center;
    padding-bottom: 20px;
}

h1.home, .about-start, .guest {
    font-family: 'Dancing Script', 'san-serif';
    font-size: 3em; /* 48 / 16 */
}

h2 {
    font-family: 'Abel', sans-serif;
    font-size: 1.75em; /* 28 / 16 */
    text-align: center;
}

h3 {
    font-family: 'Abel', sans-serif;
    font-size: 1.25em; /* 22 / 16 */;
    text-align: center;
}

p {
	font-size: 1em; /* 16 / 16 */
	color: #000;
	font-family: 'Abel', sans-serif;
	margin-bottom: 16px;
	line-height: 180%;
    padding-left: 2.083333333333333%; /* 20 / 960 */
    padding-right: 2.083333333333333%; /* 20 / 960 */
}

p.top {
    font-weight: bold;
}

p.history {
    text-align: center;
}

aside {
	width: 31.25%; /* 480 / 960 */
	height: 400px;
	float: right;
	position: relative;
	border: 3px solid #435939;
	padding: 5px;
	text-align: center;
    margin: 20px 100px;
}

aside .promos {
    opacity: 0;
}

section {
    width: 31.25%;/*took out position absolute*/
    height: 500px;
    margin: 5px 100px;
    float: left;
    padding-right: 3.125%; /* 30 / 960 */
}

section .about { /*not using right now */
    width: 150px;
    text-align: center;
}

.uppercase {
    text-transform: uppercase;
}

.monthly {
    height: 225px;
    width: 275px;
}

.monthly:hover {
    opacity: 0.2;
}

#wrapper {
	width: 100%;
	padding: 60px 0;
	background-color: #D0d3d9;
	overflow: hidden;
    margin-top: 50px;
    margin-bottom: -16px;
}

#wrapper-about {
    width: 50%;
    padding: 60px; /* since all the way around, % needed?? */
    background-color: #D0d3d9;
    overflow: hidden;
    margin: 50px auto;
    border-radius: 50%;
    box-shadow: 10px #D0d3d9;
}

#wrapper-test {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #D0d3d9;
    overflow: hidden;
    margin-bottom: 30px;
    padding: 20px; /* since all the way around, % needed?? */
    border-color: #000;
    border-style: double;
    column-count: 3;
    column-gap: 8px;
    margin-top: 5px;
}

.reviews {
    text-align: center;
    font-size: 1em;
    padding: 5px; /* since all the way around, % needed?? */
}

.reviews p {
    font-family: 'Handlee', sans-serif;
}
#contact {
    column-count: 3;
    column-gap: 8px;
    margin-top: 5px;
    max-width: 100%;
    margin: 0 auto;
    background-color: #888c65;
    color: #D0d3d9;
    padding: 40px 0 30px; 
    font-size: 0.75em;
    overflow: hidden;
}

footer h3 {
    text-align:left;
    color: #D0d3d9;
    padding-top: 20px;
}
footer p {
    white-space: nowrap;
    color: #D0d3d9;
    padding-top: 20px;
    text-align: center;
}

/*banner on about page*/

#about-banner {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 40%;
    border-style: solid;
    border-color: #888c65;
    border-width: 20px;   
}

/*banner on testimonials page*/

#review-banner { 
    background-image: url("images/cottages/lakeside/temperance.jpg"); /*img not responsive yet */
    background-size: contain;  
    display: block;
    height: 365px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    max-width: 75%;
    border-style: solid;
    border-color: #888c65;
    border-width: 20px;
    box-shadow: 5px 5px 4px 5px #D0d3d9;   
}

#slideshow-wrapper {
    width: 40%;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#slideshow {
    width: 100%;
	height: 400px; 
	overflow: hidden;
	white-space: nowrap;
    padding-left: auto;
    padding-right: auto;
}

#slideshow-img {
    max-width: auto;
	height: 100%;
	display: inline-block;
}

.circle {
	display: inline-block;
	background-color: lightgrey;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-right: 15px;
}

#circle-nav {
	margin-top: -50px;
	text-align: center;
}

@media only screen and (max-width: 1024px) {
#header-content { 
    display: block;
	width: 100%;
	text-align: center;
    margin-left: auto;
    margin-right: auto;
}

    /*may need to add nav back in*/

#banner { /*img still not responding correctly */
    display: block;
    height: auto;
    max-width: auto;
    overflow: hidden;
}

nav li {
	margin: 0 0.3125%; /* 3 / 960 */
	padding: 20px 1.953125%; /* 20 / 1024 */
    font-size: 1em; /* 16 / 16 */ 
}

h1.home, .about-start, .guest {
    font-size: 1.6875em; /* 24 / 16 */
}

aside {
    width: 80%;
    margin-left: auto;
    margin-right: 10px;
}

section {
    width: 80%;
    }

p {
	    font-size: 1.125em; /* 18 / 16 */
}

@media only all and (max-width: 480px) {


h1.home, .about-start, .guest {
    font-size: 1.25em; /* 20 / 16 */
}

h3 {
    font-size: 1.25em; /* 20 / 16 */
}

p {
	font-size: 0.75em; /* 12 / 16 */
}

nav li {
	margin: 0 0.625%; /* 3 / 480 */
	padding: 20px 4.166666666666667%; /*20 / 480 */
    font-size: 0.75em; /* 12 / 16 */ 
}

}