@charset "utf-8";
/*------------------------------------------------------------------
[Color codes]

Accent colors: #95ACBF;
Background color:#D8E6F2;
Headers, Content color: #575956;
Nav Bar: #334004 ;
Nav Logo, Nav Links: #F2EEEA;
Footer: #334004 

/*------------------------------------------------------------------
[Typography]
    
Main Logo Header: 
	font-family: 'Yeseva One', cursive;
	4vw
Hero Text: 
	font-family: 'Dancing Script', cursive;
	7vw;
Headers: Yeseva One; 3vw;
Nav Links: 
	font-family: 'Open Sans', sans-serif;
	2vw;
Content: Open Sans; 1vw;
Form:  Open Sans; 1vw; 
Footer: Open Sans; 1vw;

/*------------------------------------------------------------------
[Table of Contents]

0. Reset Styles
1. Global Styles
	1.1 Global Nav Styles
	1.2 Global Header Styles
	1.3 Global Content Styles
	1.4 Global Image Styles
	1.5 Global Form Styles
	1.6 Global Footer Styles
	1.7 Global Misc Styles (arranged alphabetically)
2. Mobile Media Query
	2.1 Mobile Nav Styles
	2.2 Mobile Header Styles
	2.3 Mobile Content Styles
	2.4 Mobile Image Styles
	2.5 Mobile Form Styles
	2.6 Mobile Footer Styles
	2.7 Mobile Misc Styles (arranged alphabetically)
3. Tablet Media Query
	3.1 Tablet Nav Styles
	3.2 Tablet Header Styles
	3.3 Tablet Content Styles
	3.4 Tablet Image Styles
	3.5 Tablet Form Styles
	3.6 Tablet Footer Styles
	3.7 Tablet Misc Styles (arranged alphabetically)
4. Desktop Media Query
	4.1 Desktop Nav Styles
	4.2 Desktop Header Styles
	4.3 Desktop Content Styles
	4.4 Desktop Image Styles
	4.5 Desktop Form Styles
	4.6 Desktop Footer Styles
	4.7 Desktop Misc Styles (arranged alphabetically)

/*----------0. Reset Styles ------------------------------------------------------------*/
* 
{
	box-sizing: border-box;
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
}
/*----------1. Global Styles ------------------------------------------------------------*/


/*----------1.1 Global Nav Styles -----------*/

.logo 
{
    display: inline-block;
	font-family: 'Yeseva One', cursive;
    font-size: 20px;
    margin-top: 10px;
    margin-left: 20px;
}
.main-nav 
{
   list-style-type: none;
   display: none;
}

.main-nav li 
{
    text-align: center;
	margin:15px;

}
.navbar 
{
    background: #334004;
    border: 1px solid rgba(0, 0, 0, 0.2);
	font-size: 3vw;
	font-family: 'Open Sans', sans-serif;
    padding-bottom: 10px;
}

.navbar-toggle 
{
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    color: white;
    font-size: 24px;
	font-weight:bold;
	    text-shadow:
			-1px -1px 0 black,
			1px -1px 0 black;
}

.nav-links, .logo 
{
    text-decoration: none;
    color: white;
	text-shadow:
			-1px -1px 0 black,
			1px -1px 0 black;
}

/*----------1.2 Global Header Styles -----------*/ 
.form-heading, .booking-heading
{
	font-family: 'Yeseva One', cursive;
	text-align:center;
	text-shadow:
			-1px -1px 0 #ecf3f9,
			1px -1px 0 #ecf3f9;
}
.heading
{
	font-family: 'Yeseva One', cursive;
	text-align:center;
	text-shadow:
			-1px -1px 0 #ecf3f9,
			1px -1px 0 #ecf3f9;
}

.small-heading
{
	font-family: 'Yeseva One', cursive;
	font-style:italic;
		text-shadow:
			-1px -1px 0 #ecf3f9,
			1px -1px 0 #ecf3f9;
}

.room-card-header
{
	font-family: 'Yeseva One', cursive;
	text-align:center;
}


/*----------1.3 Global Content Styles -----------*/
.divider
{
	background-color:#95ACBF;
	height: 30px;
}
.fine-print
{
	font-style:italic;
	text-align:center;
}
.guest_name
{
	text-align:center;
	font-weight:bold;
}
.rates
{
	font-style:italic;
	font-weight:bold;
	text-align:center;
}

/*----------1.4 Global Image Styles -----------*/
#about-hero-image
{
	background-image:url("side.jpeg");
}

#attractions-hero-image
{
	background-image:url("attractions.jpeg");	
}

#booking-hero-image
{
	background-image:url("case2.jpeg");
}

#booking-submission-hero-image
{
	background-image:url("frontDoor.jpeg");
}

#contact-hero-image
{
	background-image:url("tray.jpeg");
}

#contact-submission-hero-image
{
	background-image:url("kitchen2.jpeg");
}

#index-hero-image
{
	background-image:url("evergreen.jpeg");	
}

#rooms-hero-image
{
	background-image:url("stairway.jpeg");
}

#index-hero-image, #about-hero-image, #contact-hero-image, #attractions-hero-image, #rooms-hero-image, #booking-hero-image, #contact-submission-hero-image, #booking-submission-hero-image
{
	width:100%;
	background-size:cover;
	background-position: center;
}

.member-column 
{
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.member-row::after 
{
  content: "";
  clear: both;
  display: table;
}

.member-of
{
	background-color: white;
}
 .welcome
{
	color: white;
	font-family: 'Yeseva One', cursive;
	font-style: italic;
    text-align: center;
    text-shadow:
			-1px -1px 0 black,
			1px -1px 0 black;
}

/*----------1.5 Global Form Styles -----------*/
.col-25 
{
  float: left;
  width: 25%;
  margin-top: 20px;
}

.col-75 
{
  float: left;
  width: 75%;
  margin-top: 20px;
}
input[type=text], input[type=number],input[type=password], input[type=date], select, textarea 
{
  width: 100%;
  padding: 8px;
  border: 1px solid #56768f;
  border-radius: 4px;
  resize: vertical;
}
.form-container 
{
  border: 2px solid #56768f;
  border-radius: 5px;
  background-color: #ecf3f9;
  display: block;
  margin: 30px auto 30px auto;
  padding: 20px;
  width: 75%;
}

label 
{
  padding: 10px 10px 10px 0;
  display: inline-block;
}

#quote-text
{
	margin-top: 20px;
}

/* Clear floats after the columns */
.row:after 
{
  content: "";
  display: table;
  clear: both;
}

/*----------1.6 Global Footer Styles -----------*/
	
footer
{
	background-color:#334004;
}

.footer-info
{
	color:white;
	text-align:center;
	    text-shadow:
			-1px -1px 0 black,
			1px -1px 0 black;
}

.footer-info-2
{
	color:white;
	display:inline-block;
	text-align:center;
	    text-shadow:
			-1px -1px 0 black,
			1px -1px 0 black;
}
.footer-logo
{
	color:white;
	font-family: 'Yeseva One', cursive;
	text-align:center;
    text-shadow:
			-1px -1px 0 black,
			1px -1px 0 black;	
}

.social-media-container
{
	text-align:center;
	text-shadow:
			-1px -1px 0 black,
			1px -1px 0 black;
	color:white;
}

#phone
{
  color:white;
}

/*----------1.7 Global Misc Styles -----------*/

body
{
	background-color: #D8E6F2;
	font-family:'Open Sans'
}

.room-button, .submit-button
{
  background-color: #56768f;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 4px 2px;
  cursor: pointer;
  	    text-shadow:
			-1px -1px 0 #56768f,
			1px -1px 0 #56768f;
}

/*----------2. Mobile Styles ------------------------------------------------------------*/

@media (max-width:600px)
{
	


/*----------2.1 Mobile Nav Styles -----------*/
.active 
{
   display: block;
}
	
/*----------2.2 Mobile Header Styles -----------*/
.heading
{
	font-size: 5vw;
	margin-top: 20px;
	margin-bottom:10px;
}
.room-card-header
{
	font-size: 4vw;
	margin-top: 20px;
	margin-bottom:10px;	
}	
.small-heading, .form-heading, .booking-heading
{
	font-size: 4vw;
	margin:30px 30px 10px 30px;
	
}
		
/*----------2.3 Mobile Content Styles -----------*/

.arrow-down 
{
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid white;
  display:block;
  margin:auto;
}

.content, .guest, .room-content, .rates, .included
{
	line-height: 30px;
	margin: 10px 30px 10px 30px;
	font-size: 3vw;
}

.fine-print
{
	font-size: 2vw;
	margin: 10px 0px 10px 0px;
}
	
.form-content
{
	line-height: 30px;
	margin: 10px;
	font-size: 3vw;
}
	
.guest
{
	font-style: italic;
	text-align:center;
	margin-bottom:0px;
}
	
.guest-div
{
	background-color:white;
	border-radius:5px;
	margin: 20px 20px 0px 20px;
	padding-bottom:10px;
	padding-top:10px;
}
	
.guest_name
{
	margin-bottom: 50px;
}
	
.included
{
		margin-left:60px;
}
	
/*----------2.4 Mobile Image Styles -----------*/

.about-img
{
	margin-top: 20px;
}

.member-column
{
	width:100%;
}
	
.member-img
{
	width:50%;
	display:block;
	margin:auto;	
}
	

/*This is all the components of the hero image so I am putting in under images*/
#index-hero-image, #about-hero-image, #contact-hero-image, #rooms-hero-image, #attractions-hero-image, #booking-hero-image, #contact-submission-hero-image, #booking-submission-hero-image
{
	height:300px;
}
	

.room-card-img, .about-img
{
	height:250px;
	width: 100%;
}
	
.tablet-desktop-figcap
{
	display:none;
}
.welcome
{
	font-size: 8vw;
	padding-top: 150px;
}
	
/*----------2.5 Mobile Form Styles -----------*/
	
#booking-reset
{
	display:none;
}
	
.col-25, .col-75, input[type=submit] 
{
    width: 100%;
    margin-top: 0;
}
	
.cc-exp-info, #ccv
{
	width:50%;
}

	
.credit-card-icon-container
{
	font-size:6.25vw;
	text-align:center;
}
	
#contact-reset
{
	display:none;
}
	
form
{
	font-size: 3vw;
}
	

	
/*----------2.6 Mobile Footer Styles -----------*/

footer
{
	margin-top:0px;
}
.footer-info,.footer-info-2
{
	font-size:2vw;
	margin-top:10px;
}
	
.footer-info-2
{
	margin-left:10px;
	margin-right:20px;
}
	
.footer-logo
{
	font-size: 20px;
	padding-top:20px;
}

.footer-section
{
	background-color: #252f04;
	height:50px;
	padding-top:10px;
	text-align:center;
}
	
.social-media-container /*just changed*/
{
  width:100%
  font-size: 20px;
	line-height: 70px;
	word-spacing: 30px;
}
	
/*----------2.7 Mobile Misc Styles -----------*/
	
.button-div
{
  display: flex;
   justify-content: center;
  align-items: center;
  height: 75px;
}
	
	
.icon-container-tablet-desktop
{
	display:none

}
	
.icon-container
{
	display:block;
	text-align:center;
	font-size: 4vw;
}
	
#mobile-reset-div
{
  display: flex;
   justify-content: center;
  align-items: center;
  height: 50px;
}
	
#mobile-reset
{
	width:100%;
}
		
.mobile-hr
{
	border: 1px solid #95ACBF;
	margin: 0 20px 20px 20px;
}
	
.room-button
{
  padding: 10px 15px;
  margin:auto;
  font-size: 3vw;
}
	
	
}

/*----------3. Tablet Styles ------------------------------------------------------------*/

@media (min-width:600px) and (max-width:1000px)
{
	
/*----------3.1 Tablet Nav Styles -----------*/
 
 .logo 
{
    margin-top: 0;
		text-shadow:
			-1px -1px 0 black,
			1px -1px 0 black;
}

.logo:hover,.nav-links:hover 
{
   color: rgba(255, 255, 255, 1);
}

.main-nav 
{
    display: flex;
    margin-right: 30px;
    flex-direction: row;
    justify-content: flex-end;
}

.main-nav li 
{
    margin: 0;
}
	
.navbar 
{
   display: flex;
   justify-content: space-between;
   padding-bottom: 0;
   height: 70px;
   align-items: center;
}

.navbar-toggle 
{
    display: none;
}

.nav-links 
{
    margin-left: 30px;
	font-size: 2vw;
		text-shadow:
			-1px -1px 0 black,
			1px -1px 0 black;
	
}

/*----------3.2 Tablet Heading Styles ---------*/
.booking-heading
{
	margin-top:20px;
	margin-bottom:10px;
}
	
.heading
{
	font-size:3vw;
	margin-top: 20px;
}
	
.room-card-header
{
	background-color:#95ACBF;
	font-size: 2vw;
	padding-top:10px;
}
	
.small-heading, .form-heading, .booking-heading
{
	font-size:2.4vw;
	margin-left: 20px;
}
	
/*----------3.3 Tablet Content Styles ---------*/
.arrow-down 
{
	width: 0; 
	height: 0; 
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid white;
	display:block;
	margin:auto;
}
	
.content, .room-content, .rates
{
	line-height: 30px;
	margin: 20px;
	font-size: 1.5vw;	
}
	
.form-content
{
	line-height: 30px;
	margin: 10px;
	font-size: 1.5vw;
	text-align:center;
}
	
.guest-div
{
	background-color:white;
	border-radius:10px;
	padding-bottom:30px;
	margin: 20px 20px 0px 20px;
}
	
.guest_name
{
	margin-bottom: 50px;
}
	
.guest
{
	font-style:italic;
	padding:0px 20px 0px 20px;
	text-align:center;
	line-height:30px;
	
}
	
.included
{
	margin-left: 50px;
	line-height:30px;
	font-size: 1.5vw;
	list-style: disc;
}

	

/*----------3.4 Tablet Image Styles -----------*/
	
	
/*This is all the components of the hero image so I am putting in under images*/
#index-hero-image, #about-hero-image, #contact-hero-image, #rooms-hero-image, #attractions-hero-image, #booking-hero-image, #contact-submission-hero-image, #booking-submission-hero-image
{
	height:300px;
}
	
.about-img
{
	float:right;
	height:250px;
	margin-left:30px;
	width:100%;
}
	
.welcome
{
	font-size: 6vw;
}


.member-img
{
	width:100%;
	height:150px
}
.tablet-desktop-figure
{
  float: right;
  width: 40%;
  margin:30px 30px 0px 30px;
  text-align: center;
  font-style: italic;
  font-size: 1.15vw;
  line-height:25px;
  
}
	
.room-card
{
  background-color:#ecf3f9;
  box-shadow: 18px 29px 19px -16px rgba(51,77,97,1);
  float: left;
  width: 48%;
  margin:10px;
}
	
.room-card:after 
{
  content: "";
  display: table;
  clear: both;
}
	
.room-card-img
{
	height:200px;
	width: 100%;
}
	
.tablet-desktop-figcap
{	
	text-align:center;
}
	
/* Was Using flex box but this isnt supported by IE 10 and earlier??
.room-card
{
  background-color:#ecf3f9;
  flex: 50%;
  margin:20px;
  box-shadow: 18px 29px 19px -16px rgba(51,77,97,1);
}*/
		
.welcome
{
	padding-top: 150px;
}
/*----------3.5 Tablet Form Styles -----------*/

#ccv
{
	width:25%;
}
	
.col-75
{
	width:70%;
}
		
.cc-exp-info
{
	width:25%;
}
		
.credit-card-icon-container
{
	font-size:4vw;
	text-align:center;
	letter-spacing: 0.5em;
}	
	
.fine-print
{
	font-size: 1.25vw;
	margin: 10px 0px 10px 0px;
}
	
label
{
	float: right;
}

	
label, input, select
{
	font-size:1.5vw;
}
	
#mobile-reset-div
{
	display:none;
}
		
.two-col
{
	width:25%;
}
		
.two-col-label
{
	width:15%;
}
	
.two-col-label-text
{
	float:right;
	wdith:25%;
	
}
	
/*----------3.6 Tablet Footer Styles -----------*/
footer
{
	margin-top: 0px;
}
	
.footer-info,.footer-info-2
{
	font-size:1.5vw;
	margin-top:10px;
}
	
.footer-info-2
{
	margin-left:10px;
	margin-right:20px;
}
	
.footer-logo
{
	padding: 20px;
	font-size:2vw;
	text-shadow: 
			-1px -1px 0 black,
			1px -1px 0 black;
}
	
.footer-section
{
	background-color: #252f04;
	height:50px;
	padding-top:10px;
	text-align:center;
}
	
.social-media-container
{
	font-size: 30px;
	line-height: 70px;
	word-spacing: 30px
}
	
.submit-button
{
	margin-left:20px;
}
	
/*----------3.7 Tablet Misc Styles -----------*/
	
.button-div
{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70px;
}
	
.icon-container
{
	text-align: center;
	font-size:18px;
	background-color:#95ACBF;
	padding-bottom:10px;
}
		
#icon-container
{
	background-color:white;
	border-radius:10px;
	font-size:2vw;
	padding-top:10px;	
}
	
.icon-container-tablet-desktop
{
	background-color:#D8E6F2;
	margin-top:10px;
}
	
.room-button
{
	margin: 0px 10px 0px 0px;
	font-size:1.5vw;
}
	
.tablet-desktop-hr
{
	border:1px solid #95ACBF;
	margin:30px;
}
	
.tablet-room-container
{
	display: flex;
}


}

/*----------4. Desktop Styles ------------------------------------------------------------*/
@media (min-width:1000px)
	
	
/*----------4.1 Desktop Nav Styles -----------*/
{
 .logo 
{
    margin-top: 0;
	font-size: 2.5vw;
	text-shadow:
			-1px -1px 0 black,
			1px -1px 0 black;
}

.logo:hover,.nav-links:hover 
{
   color: rgba(255, 255, 255, 1);
}

.main-nav 
{
    display: flex;
    margin-right: 70px;
    flex-direction: row;
    justify-content: flex-end;
}

.main-nav li 
{
    margin: 0;
}
	
.navbar 
{
   display: flex;
   justify-content: space-between;
   padding-bottom: 10px;
   height: 70px;
   align-items: center;
}

.navbar-toggle 
{
    display: none;
}

.nav-links 
{
    margin-left: 50px;
	font-size: 1.75vw;
	text-shadow: 
			-1px -1px 0 black,
			1px -1px 0 black;
}
	
/*----------4.2 Desktop Header Styles -----------*/
.booking-heading
{
	margin-top:40px;
	margin-bottom:20px;
}
	
.form-heading, .booking-heading
{
	font-size:2vw;
	margin-left: 40px;
}
	
 .form-heading
{
	font-size:2vw;
	margin-left:50px;
}
	
.heading
{
	font-size:3vw;
	margin-top: 30px;
	margin-bottom:30px;
}
	
.icon-container
{
	text-align: center;
	font-size:20px;
	background-color:#95ACBF;
	padding-bottom:20px;
}
.room-card-header
{
	background-color:#95ACBF;
	font-size: 2vw;
	padding-top:20px;
}	
.small-heading
{
	font-size:2vw;
	margin-left:70px;
}
	
/*----------4.3 Desktop Content Styles -----------*/
	
.content
{
	font-size: 1.5vw;
	line-height: 50px;
	margin:0px 70px 30px 70px;
}
	
.form-content
{
	line-height: 50px;
	margin: 20px;
	font-size: 1.5vw;
	text-align:left;
}
	
.included
{
	font-size:1.5vw;
	margin-left:80px;
	margin-top:15px;
}
	
.rates
{
	font-size:1.5vw;
}
	
.room-content
{
	font-size: 1.25vw;
	line-height: 40px;
	margin:20px;
}
	
/*----------4.4 Desktop Image Styles -----------*/
	
.about-img
{
	float:right;
	height:350px;
	margin-left:30px;
	width:100%;
}

	
#index-hero-image, #about-hero-image, #contact-hero-image, #rooms-hero-image, #attractions-hero-image, #booking-hero-image, #contact-submission-hero-image, #booking-submission-hero-image	
{
	height:400px;
}
	
.welcome
{
	font-size: 6vw;
}
	
.member-img
{
	display:block;
	margin:auto;
	width:70%;
	height:150px;
}
	
.tablet-desktop-figure
{
  float: right;
  width: 40%;
  margin:30px 30px 0px 30px;
  text-align: center;
  font-style: italic;
  font-size: 1.15vw;
  line-height:30px;
  
}
	
.tablet-desktop-figcap
{	
	text-align:center;
}	
.welcome
{
	padding-top:150px;
}

	
/*----------4.5 Desktop Form Styles -----------*/
	
#ccv
{
	width:25%;
}
	
.col-75
{
	width:70%;
}
			
.cc-exp-info
{
	width:25%;
}
	
.credit-card-icon-container
{
	font-size:4vw;
	text-align:center;
	letter-spacing: 0.5em;
}	
	
.fine-print
{
	font-size:1vw;
	margin-top:20px;
}
	
label
{
	float: right;
}
	
label, select, input
{
	font-size:1.5vw;
}
	
#mobile-reset-div
{
	display:none;
}
	
	
.two-col
{
	width:25%;
}
	
.two-col-label
{
	width:15%;
}
	
.two-col-label-text
{
	float:right;
}
	
/*----------4.6 Desktop Footer Styles -----------*/
footer
{
	margin-top: 0px;
}
	
.footer-info,.footer-info-2
{
	font-size:1vw;
	margin-top:10px;
}
	
.footer-info-2
{
	margin-left:10px;
	margin-right:20px;
}
	
.footer-logo
{
	padding: 20px;
	font-size:1.5vw;
	text-shadow: 
			-1px -1px 0 black,
			1px -1px 0 black;
}
	
.footer-section
{
	background-color: #252f04;
	height:70px;
	padding-top:10px;
	text-align:center;
}
	
.social-media-container
{
	font-size: 25px;
	line-height: 70px;
	word-spacing: 30px
}
	
	
/*----------4.7 Desktop Misc Styles -----------*/
.arrow-down 
{
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid white;
  display:block;
  margin:auto;
}
	
.button-div
{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}
.desktop-room-container
{
	margin-left: 20px;
}

.desktop-room-container:after 
{
  content: "";
  display: table;
  clear: both;
}
	
.guest
{
	font-style: italic;
	text-align:center;
	margin-bottom:0px;
	line-height:40px;
	padding: 0px 20px 10px 20px;
}
	
.guest-div
{
	background-color:white;
	border-radius:10px;
	margin: 50px auto auto auto;
	padding-bottom:10px;
	padding-top:10px;
	width:50%;
}
	
.guest_name
{
	margin-bottom: 50px;
	font-weight:bold;
	text-align:center;
}
	
#icon-container
{
	background-color:white;
	border-radius:10px;
	font-size:2vw;
	padding-top:10px;	
}
	
.icon-container-tablet-desktop
{
	background-color:#D8E6F2;
	margin-top:10px;
	font-size: 30px;
}
	
.room-button
{
  padding: 10px 10px;
  margin:auto;
  font-size: 1.25vw;
}
	
.room-button:hover, .submit-button:hover
{
	background-color:#304150;
	text-shadow: 
			-1px -1px 0 #304150,
			1px -1px 0 #304150;
}
	
.room-card
{
  float: left;
  width: 23%;
  margin: 40px 10px 10px 10px;
  background-color:#ecf3f9;
  box-shadow: 18px 29px 19px -16px rgba(51,77,97,1);
}
			
.room-card-img
{
	width:100%;
	height:200px;
}
		
.submit-button
{
	margin-left:20px;
}

	
.tablet-desktop-hr
{
	border:2px solid #95ACBF;
	margin:40px;
}
	
	
}