/*-----------Body-----------*/
html,
body {
    font-family: "Roboto", sans-serif;
    background-color: white;
    max-width: 100%;
    overflow-x: hidden;
    font-size: 100%;
}

/*The styles for this selector allow the navigation and footer to go the full-width of the page, no matter the screen size, while the main content stays a pleasant 900px in width (at maximum)*/
#hoursChange h3 {
    background-color: rgb(128,26,26) !important;
    color: white !important;
    padding: .5rem 0 !important;
    width: 95% !important;
    text-align: center !important;
    margin: rem auto 0 auto !important;
    border: .25rem solid black;
    font-weight: normal;
}

#hoursChange .bold {
    font-weight: bold !important;
}

.headerAndMain {
    max-width: 900px;
    margin: 0 auto;
}

.row {
    /*Without this, the entire page will be off cenetered and looks bad.*/
    margin: 0;
}

/*Container*/
.container-fluid {
    padding: 0;
}

/*-----------Nav-----------*/
nav {
    background-color: #801A1A;
}

.navbar-brand {
    color: white;
    font-family: Parisienne, cursive;
    font-size: 1em;
    letter-spacing: .1em;
    padding: 0;
	margin-left: .5em;
}

.navbar-brand:hover {
    color: white;
    cursor: pointer;
}

#logoAndBars {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    margin: 1rem 0;
}

#navToggleContainer {
    background-color: rgba(255, 255, 255, 0.00);
    border: none;
    line-height: 0;
}

#navToggleContainer:hover {
    cursor: default;
}

.fa-bars {
    font-size: 1.5rem;
    color: white;
}

.fa-bars:hover {
    cursor: pointer;
}

.navbar-nav .nav-item {
    font-family: 'Dancing Script', cursive;
    font-size: 1.1em;
    letter-spacing: .1em;
}

.navbar-nav .nav-item:last-child {
    margin-bottom: 0;
}

.navbar-nav .nav-item:hover {
    font-weight: bold;
}

.navbar-nav .nav-item:active {
    font-weight: bold;
}

.nav-item .nav-link {
    margin-left: .4em;
}

.navbar-nav .active {
    font-weight: bold;
}

.navbar-nav a {
    color: white;
}

.navbar-nav a:hover {
    cursor: pointer;
}

/*-----------Header-----------*/
header div div {
    margin: 1em auto;
    text-align: center;
    font-family: Parisienne, cursive;
}

h1 {
    font-family: Parisienne, cursive;
    font-size: 2em;
    font-weight: bold;
    margin: 0 auto .25em auto;
}

h2 {
    font-family: 'Dancing Script', cursive;
    font-size: 1.625em;
    font-weight: bold;
    text-align: center;
	margin: 0 auto;
}

h3 {
	font-family: 'Dancing Script', cursive;
	font-size: 1.375em;
	font-weight: bold;
    text-align: center;
	margin: 0 auto;
}

header img {
    width: 100%;
}

/*-----------Main-----------*/
main > div:first-child {
    margin-bottom: 1em;
}

main > div:first-child a {
    color: #801A1A;
    text-decoration: underline;
}

#citation {
    text-align: right;
    font-style: italic;
}

/*Cards*/
.card {
    margin-bottom: 2em;
    border: 1.5px solid #661515;
}

.card-body {
    padding: .75em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.card img {
    width: 100%;
}

.card-title {
    font-size: 1.375em;
    font-family: Parisienne, cursive;
    margin-bottom: 0;
    letter-spacing: .2em;
    font-weight: bold;
}

.card-text {
    margin-bottom: .5em;
}

.card .btn {
    background-color: #801A1A;
    color: white;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    -ms-flex-line-pack: end;
        align-content: flex-end;
    margin-top: auto;
}

/*-----------Footer-----------*/
#footer_gt992px {
    display: none;
}

footer {
    background-color: #801A1A;
    color: white;
    padding-top: .5em;
}

/*Contact information*/
.visit_div, .phoneNumber_div, .email_div {
	margin-left: 1em;
}

.contact_footer i {
	margin-right: .25em;
}

.contact_footer a {
	color: white;
	text-decoration: underline;
}

.reservations {
	text-align: center;
	font-weight: bold;
}

/*Social media*/
.socialMedia {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 40%;
    max-width: 120px;
    margin: 1em auto;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}

.facebook_logo {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 75%;
    max-width: 40px;
}

.tripAdvisor_logo {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
    max-width: 55px;
	margin-left: .5em;
}

.socialMedia img {
    width: 100%;
}

.hours {
	text-align: center;
	margin-bottom: 0;
}

div#footer_lt992px hr, div#footer_gt992px  hr {
	width: 95%;
    border: .5px solid white;
	margin: .5em auto;
}
/*Copyright*/
.copyright {
    text-align: center;
    margin-top: 1em;
    margin-bottom: 0;
}

/*-----------Miscellaneous-----------*/
button:focus {
    outline: 0;
}

/*This is here so Dreamweaver will add a breakpoint*/
@media (min-width: 320px) {}


/*This smooths out some portions of the webpage that looked funky on my iPhone SE*/
@media (min-width: 470px) {
    /*-----------Nav-----------*/
	.navbar-brand {
		font-size: 1.25em;	
	}

    /*-----------Main-----------*/
    /*Cards*/
    #card {
        width: 75%;
        margin: 0 auto;
    }

    /*-----------Footer-----------*/
    /*Social media*/
    .socialMedia {
        width: 30%;
    }

.facebook_logo {
    max-width: 45px;
}

.tripAdvisor_logo {
    max-width: 60px;
}


}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
	/*Social media*/
.facebook_logo {
    max-width: 50px;
}

.tripAdvisor_logo {
    max-width: 65px;
}
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {

    /*-----------Nav-----------*/
    .navbar-brand {
        font-size: 1.5em !important;
    }

    .navbar-nav .nav-item {
        font-size: 1.3em;
    }

    /*-----------Main-----------*/
    h1 {
        font-size: 2.5em;
    }

    h2 {
        font-size: 2em;
    }
	
	h3 {
		font-size: 1.5em;
	}

    /*Cards*/
    #card {
        width: 100%;
    }
	
	.card-title {
		font-size: 1.5em;
	}
	
	/*-----------Footer-----------*/
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {

    /*-----------Nav-----------*/
    #navToggleContainer {
        display: none;
    }

    .nav-item .nav-link {
        white-space: nowrap;
        margin-left: 0;
        min-width: 3.5em;
        text-align: center;
    }

    /*-----------Main-----------*/
    h1 {
        font-size: 3em;
    }

    h2 {
        font-size: 2.25em;
    }
	
	h3 {
		font-size: 1.75em;
	}

	/*Cards*/	
	.card-title {
		font-size: 1.75em;
	}
	
    /*-----------Footer-----------*/
    #footer_lt992px {
        display: none;
    }

    #footer_gt992px {
        display: block;
		margin-top: 1em;
    }

	/*The contact information for the div is constructred in such a way that the address is, by and large, in the middle of the footer element.*/
    .contact_footer {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;	
	}
	
	.contact_footer .divider {
		width: 25px;
		text-align: center;
		margin: 0 1em;
	}
	
	/*Giving these two elements a set width allows the middle item to be in the middle of the page.*/
	.contact_footer #call, .contact_footer #email {
		-ms-flex-preferred-size: 200px;
		    flex-basis: 200px;
	}
	
	/*Align the phone number to the right. If it was aligned to the left, or centered, the layout would break.*/
	.contact_footer #call {
		text-align: right;
	}
	
	.contact_footer #visit {
	}
	
	.contact_footer p {
		margin: 0 .5em;
	}
	
	.contact_footer a {
		color: white;
		text-decoration: underline;
	}

    /*Social media*/
	.socialMedia {
		margin-bottom: 1em;
	}
	
    .facebook_logo {
        max-width: 47px;
    }

    .tripAdvisor_logo {
        margin-left: 1em;
        max-width: 70px;
		
    }
	
	/*Copyright message*/
	p.copyright {
		margin-top: .5em;
	}
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {

    /*-----------Nav-----------*/
    .navbarContainer {
        background-color: #801A1A;
		margin: 0 auto;
    }

    .navbar {
        max-width: 1000px;
        margin: 0 auto;
    }

    /*-----------Footer-----------*/
    .footerContainer {
        background-color: #801A1A;
    }

    footer {
        max-width: 1000px;
        margin: 0 auto;
    }
}