// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
    
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

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

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


#wrapper{
	margin: 0;
	padding:0;
}

.jumbotron-fluid{
	background-image: url("images/jb_lattewood.jpg");
	background-size: contain 100%;
	background-repeat: no-repeat;
	background-position: 30% 50%;
	
}

.nav-link{
	font-size: 20px;

}

.nav-link, .nav-link:active, .nav-link:visited {
    color: #dfd9ab;
	text-transform: uppercase;
	
}

.nav-link:hover{
	color: #883E24;
}
.navbar-toggler-icon{
	background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(223, 217, 171, 1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E")
}

.navbar{
	font-family: 'Hind', sans-serif;
	font-weight: 400;
}

.navbar a{
	color: #dfd9ab;
	text-shadow: 1px 1px 3px #202020;
}

.navbar img{
	max-height: 100px;
}

.nav-item{
	margin: 10px;
}

h1, h2, h3, h4, h5, h6{
	font-family: 'Bitter', serif;
}

body, p{
	font-family: 'Hind', sans-serif;
}

.middle {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
    text-align: center;
    color: #DFD9AB;
    font-size: 30px;
    font-family: 'Bitter', serif;
	font-weight: 700;
	text-shadow: 3px 3px 5px #202020;
}

#footer{
	background-color: #883E24;
	color: #DFD9AB;
}

#jumbo-text h1, #jumbo-text p{
	color: #DFD9AB;
	text-shadow: 2px 2px 5px #202020;
}

#info-section a{
	color: #DFD9AB;
	text-decoration: none;
}

.btn{
	background-color: #491000;
	border: 0;
	color: #DFD9AB;
}

.btn:hover{
	background-color: #883E24;
	border: 0;
	text-decoration: none;
	color: #DFD9AB;
}

.btn a{
	color: #DFD9AB;
}

.btn a:hover{
	color: #DFD9AB;
	text-decoration: none;
}

#menu-options{
	background-image: url("images/chalkboard.jpeg");
	background-repeat: no-repeat;
	background-position: center;
}

#menu-options h2, #menu-options p{
	color: #DFD9AB;
}

#contact h1, #contact h2, #menu-section, #info-section{
	color: #491000;
}

#our-story h1, #our-story h2{
	color: #491000;
}