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

/********* CSS RESETS **********/

img {
	max-width:100%;
}

h1, h2, h3, p, ul, ol {
	margin: 0;
	padding: 0;
}

ul, ol {
	list-style-type: none;
}

a {
	text-decoration:none;
}

/********* End CSS Reset *********/

#container {
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	color: #303032;
	line-height: 1.5em;
}

img {
	display: block;
}

main a:hover {
	opacity:.7;
}

/********* Buttons Styles *********/

#myBtn {
  	display: none; 
  	position: fixed; 
  	bottom: 30px; 
  	right: 5px; 
  	z-index: 99; 
  	border: none; 
  	outline: none;
  	background-color:#f1f1f1; 
  	cursor: pointer;
  	padding: 7px 10px; 
  	border-radius: 30px;
  	font-size: 1.3em;
	color: hsla(24,65%,33%,0.80);
}

#myBtn:hover {
  	background-color: #89491D;
	color: #ffffff;
	font-weight: 700;
}

/********* Header Styles *********/

header {
	position: relative;
	background-image: url("Images/header600.jpg");
	background-attachment: scroll;
    background-repeat: no-repeat;
    background-size: contain;
	-webkit-background-size: contain;
  	-moz-background-size: contain;
  	-o-background-size: contain;
	background-position: center top;
	padding-top: 69.4%;
}

header a {
	color: #ffffff;
}

#title {
	position: absolute;
	width: 100%;
	top:27%;
	left: 0;
	text-align: center;
}

#title h1 {
	font-size: 7vw;
	color: #ffffff;
	line-height: .7em;
	margin-bottom: 1em;
}

#title h1 span {
	font-size: .5em;
	color: #ffffff;
	font-family: 'Amiri', serif;
	font-weight: 700;
	font-style: italic;
}

#title p a {
	color: #ffffff;
	display: block;	
	font-size: 2.5vw;
	box-sizing:border-box;
	width: 30%;
	border: solid 1px #ffffff;
	border-radius: 15px;
	margin: auto;
	text-align: center;
	display: block;
	padding: 1em;
	box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.2);
	white-space: nowrap;
	box-sizing: border-box;
}

#title p a:hover {
	white-space: nowrap;
	opacity:.7;
	
	font-size: 2.45vw;
	width: 29%;
}

/********* Navigation Styles *********/

#navigation {
	position: absolute;
  	width: 100%;
	z-index:3;
	top:3%;
}

#navigation ul {
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#navigation li a {
  	display: block;
  	padding: 3px;
}

#navigation .menu {
  	max-height: 0;
  	transition: max-height 0.2s ease-out;
	background-color: transparent;
}

#navigation .menu-icon {
	cursor: pointer;
	display: inline-block;
	float: right;
	padding: 20px 15px 0 0;
	position: relative;
	user-select: none;
}

#navigation .menu-icon .navicon {
	background: #fff;
	display: block;
	height: 2px;
	position: relative;
	transition: background 0.2s ease-out;
  	width: 22px;
}

#navigation .menu-icon .navicon:hover {
	opacity: .7;
}

#navigation .menu-icon .navicon:before,
#navigation .menu-icon .navicon:after {
  	background: #fff;
  	content: "";
  	display: block;
  	height: 100%;
  	position: absolute;
  	transition: all 0.2s ease-out;
  	width: 100%;
}

#navigation .menu-icon .navicon:before {
  	top: 5px;
}

#navigation .menu-icon .navicon:after {
  	top: -5px;
}

#navigation li a {
	padding-right: 30px;
	text-align: right;
	background-color: hsla(24,58%,20%,0.80);
}

#navigation li a:hover {
	background-color: hsla(24,65%,33%,0.80);
}

#navigation .menu-btn {
  	display: none;
}

#navigation .menu-btn:checked ~ .menu {
  	max-height: 240px;
}

#navigation .menu-btn:checked ~ .menu-icon .navicon {
  	background: transparent;
}

#navigation .menu-btn:checked ~ .menu-icon .navicon:before {
  	transform: rotate(-45deg);
}

#navigation .menu-btn:checked ~ .menu-icon .navicon:after {
  	transform: rotate(45deg);
}

#navigation .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
#navigation .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  	top: 0;
}

/********* Background Images Styles *********/

#aboutImage, #menuImage, #contactImage  {
	height: 70vh;
	background-size: cover;
	background-attachment: scroll;
    background-repeat: no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
}

#aboutImage h1, #menuImage h1, #contactImage h1 {
	font-family: 'Amiri', serif;
	font-weight: 700;
	font-size: 2em;
	line-height: 1em;
	font-style: italic;
	color: #ffffff;
	text-align: center;
}

#aboutImage {
	background-image: url("Images/aboutcoffeeshop600.jpg");    
	background-position: center;
}

#menuImage {
	background-image: url("Images/coffeecup600.jpg");
	background-position: center;
}

#contactImage {
	background-image: url("Images/coffeeshop600.jpg");
	background-position: top;
}

/********* #Main Styles *********/

#container {
	margin: auto;
}

#main {
	background-color: #eaeaea;
	font-size: 1em;
}

#main h2 {
	padding: 1.5em 0;
	color: #89491D;
}

#main h3 {
	padding: 1.2em 0 0.3em 0;
}

#main a {
	color: #89491D;
}

.coffee {
	color: #89491D;
}

.lounge {
	color: #502D16;
}

/********* #About Styles *********/

#about {
	padding: 2em 2em 4em 2em;
}

#about h2 {
	color: #502D16;
	text-align: center;
}

#about span {
	font-weight: 700;
}

#about p {
	padding-bottom: 1.3em;
}

#about a {
	white-space: nowrap;
}

#about p a, #menu p a, #coffeehouse article:first-of-type p a {
	display: block;
	font-size: .8em;
	background-color: #89491D;
	color: #ffffff;
	border-radius: 15px;
	width: 60%;
	text-align: center;
	padding: 1em 0;
	margin: auto;
	box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, .2);
	white-space: nowrap;
	box-sizing: border-box;
}

#about p a:hover, #menu p a:hover, #coffeehouse article:first-of-type p a:hover {
	background-color: hsla(24,65%,33%,0.90);
	white-space: nowrap;
}

.aboutcontent {
    background-color: #ffffff;
	box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.1);
	padding: 2em 2em 1em 2em;
}

.aboutcontent ul {
	padding: 0  0 1.3em 1.3em ;
}

.aboutcontent ul li::before {
	content: "\2022";
	color: #89491D;
	font-weight: 700;
	font-size: 1.4em;
	display: inline-block; 
	width: 1em; 
	/*padding-right:1em;*/
}

/********* #Menu Styles *********/

#menu {
	padding: 2em 2em 4em 2em;	
}

#menu h2 {
	text-align: center;
}

.box {
	background-color: #fff; 
	border-radius: 17px 17px 15px 15px;
	box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.1);
	margin-bottom: 3em;
	display: block;
	border: 1px solid #d6d6d6;
  	transition: 0.2s all;
}

.box img {
	width:100%;
	border-radius: 15px 15px 0 0;
}

.box h3 {
	color: #502D16;
}

.box div {
	padding: 0 1.5em 2em 1.5em;
}

.box p {
	color: #303032;
}

.boxwrap:hover .box {
  	filter: blur(1px);
  	opacity: 0.5;
  	transform: scale(0.98);
  	box-shadow: none;
	font-weight: 400;	
}

.boxwrap:hover .box:hover {
  	transform: scale(1);
  	filter: blur(0px);
  	opacity: 1;
  	box-shadow: 0 8px 10px 0px rgba(0, 0, 0, 0.125);
	border-radius: 17px 17px 15px 15px;
}

/********* #Coffeehouse Styles *********/

#coffeehouse {
	padding: 2em 0 4em 0;
}

#coffeehouse article:first-of-type p {
	padding: 0 1em 2em 2em;
	margin: auto;
}

#coffeehouse h2 {
	text-align: center;
	color: #502D16;
}

.visitshop {
	text-align: center;
}

#gallerybox {
	background-color: #ffffff;	
	box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.1);
	padding: 1em;
	margin-bottom: 3em;
}

#coffeehouse article:last-of-type {
	padding:0 2em 0 2em;
}

/********* #Mapaddress Styles *********/

.map {
	position: relative;
  	width: 100%;
	height: 100%;
}

.map img {
	border-radius: 10px;
	width: 100%;
	height: auto;
}

.overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
	transition: .3s ease;
  	background-color: hsla(24,65%,33%,0.40);
	border-radius: 10px;
	transform: scale(0);
  	transition: .3s ease;
}

.map:hover .overlay {
	transform: scale(1);
}

#mapaddress .text a {
  	color: white;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	-webkit-transform: translate(-50%, -50%);
  	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
  	text-align: center;
 }

.h2two {
	display: none;
}

/********* #Contactus Styles *********/

#contactus {
	padding: 2em 2em 4em 2em;
}

#contactus h2 {
	padding: 1.5em 0 0.3em 0;
	text-align: center;
}

#contactus .icon-bar a {
	padding-right: 1em;
}

/*#contactus .far:hover, .footer .far:hover {
	font-weight: 700;
}*/

.callus, .emailus, .followus, #contactus .form {
	display: flex;
	align-items: baseline;
}
	
.callus h3, .emailus h3, .followus h3, .form h3, .followus .icon-bar {
	white-space: nowrap;
}
	
.callus p, .emailus p, .followus .icon-bar, #contactus .form .newsletter {
	padding-left: .5em;
}

/********* Form Styles *********/

.newsletter {
	font-size: .7em;
	white-space: nowrap;
	width:70%;
}

.newsletter input {
	box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.1);
}

.newsletter input[type="text"] {
	margin-right: -5px;
	width: 70%;
	padding: 0.97em;
	border-radius: 7px 0 0 7px;
	border: solid .5px #D7D7D7;
	border-right: none;
}

.newsletter input[type="submit"] {
	background-color: #89491D;
	color: #ffffff;
	padding: 1em 0;
	border: none;
	border-radius: 0 7px 7px 0;
	width:30%;
}

.newsletter input[type="submit"]:hover {
	
	background-color: hsla(24,65%,33%,0.70);
}

/********* Footer Styles *********/

footer {
	background-color: #D1D1D1;
	padding: 3.5em 2em 2em 2em;
	line-height: 2em;
}

footer a {
	color:#89491D;
}

footer a:hover {
	opacity: .7;
}

.footer .icon-bar {
	text-align: center;
	padding-bottom: 2em;
}

.footer .icon-bar a {
	font-size: 1.2em;
	padding-right: 1.5em;
}

.footer .icon-bar a:last-of-type {
	padding-right: 0;
}

.footercontent {
	width:75%;
	margin: auto;
}

.footer .newsletter {
	width: 100%;
}

.newsletter input[type="text"] {
	width: 70%;
}

.newsletter input[type="submit"] {
	width:30%;
}

.footer h2 {
	padding-bottom: .6em;
}

.footer article {
	padding-bottom: 2em;
}

.footer article .fas {
	padding-right: .5em;
}

.copyright {
	padding-top: 4em;
	font-size: .7em;
	color: #969696;
	text-align: center;
}

/********* Media Querry Styles *********/


@media (min-width: 600px) {
	
	header {
		background-image: url("Images/header1200.jpg");
		
	}

	#navigation .menu-icon {
		padding: 28px 20px 0 0;
	}
	
	#aboutImage {
		background-image: url("Images/aboutcoffeeshop1200.jpg");
		background-attachment: fixed;
	}
	
	#contactImage {
		background-image: url("Images/coffeeshop1200.jpg");
		background-attachment: fixed;
	}
	
	#menuImage {
		background-image: url("Images/coffeecup1200.jpg");
		background-attachment: fixed;
	}
	
	#title h1 {
		margin-bottom: 1.1em;
	}
	
	.aboutcontent { 
		padding: 3em 3em 3em 3em;
		max-width: 700px;
		margin: auto;
	}
	
	#about p a, #menu p a, #coffeehouse article:first-of-type p a {
		width: 50%;
	}

	.boxwrap {
	  	display: flex;
/*		overflow: hidden;
*/		justify-content: center;
	}
	
	.box {
		flex:1;
		margin-right:1em;
	}
	
	.box:last-of-type {
		margin-right: 0;
	}
	
	#mapaddress {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding-top: 1.5em;
	}
	
	#mapaddress h3:first-of-type {
		padding-top: 1.5em;
	}
	
	.address {
		
		padding-left: 2em;
		width: auto;
		display: inline;
	}

	.map {
		flex: 1;
		max-width: 460px;
	}
	
	.h2two {
		display: inline;
	}
	
	.h2one {
		display: none;
	}
	
	.address div {
		padding-top: 1.5em;
	}
	
	#contactbox {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 2em;
	}
	
	#contactbox .form {
		width: 100%;
	}
	
	.newsletter input[type="text"] {
		padding: 1em;
	}
	
	.followus {
		display: inline;
	}
	
	.followus .icon-bar {
		padding:1.5em 0 0 0;
	}

	.footer .newsletter {
		width: 80%;
	}

	.newsletter input[type="text"] {
		width: 70%;
	}

	.newsletter input[type="submit"] {
		width:30%;
	}

	/********* Footer Styles *********/

	.footercontent {
		width: 80%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.hours h2 {
		padding-top:0;
	}

	.footercontent .form {
		width: 100%;
	}
}

@media (min-width: 870px) {
	header{
		background-image: url("Images/header1400.jpg");
		background-attachment: fixed;
		background-size: cover;
		-webkit-background-size: cover;
 		-moz-background-size: cover;
  		-o-background-size: cover;
	}
	
	#aboutImage, #menuImage, #contactImage  {
		background-attachment: fixed;
	}
}

@media (min-width: 960px) {
	
	#myBtn {
		right: 15px; 
		font-size: 1.7em;
	}
	
	#aboutImage, #menuImage, #contactImage  {
		height: 100vh;
	}
	
	#navigation {
		top:5%;
	}

	#navigation .logo {
		width: 60px;
		height: 43px;
	}
	
	#navigation .logo:hover {
		width: 65px;
		height: 46px;
	}

	#navigation li {
		float: left;
	}

 	#navigation li a {
	 	padding: 25px 25px 20px 25px;
		font-size: 1.3em;
		background-color: transparent;
  	}
	
	#navigation li a:hover {
		border-radius: 15px;
		background-color: hsla(24,65%,33%,0.50);
	}

 	#navigation .menu {
		clear: none;
		float: right;
		max-height: none;
  	}

 	#navigation .menu-icon {
		display: none;
  	}
	
	#about p a, #menu p a, #coffeehouse article:first-of-type p a {
		width: 35%;
	}
	
	.aboutcontent { 
		max-width: 900px;
	}

	#main {
		font-size: 1.2em;
	}
	
	#about, #menu, #location, #contactus {
		max-width: 960px;
		margin: auto;
	}
	
	#contactbox {
		padding: 0 5em;
	}
	
	#gallerybox {
		padding: 1.5em;
	}
	
	.location, .hours, .footercontent .form {
	   flex: 1;
	}
	
	.footercontent {
		width: 95%;
	}
	
	.address {
		padding-right: 4em;
	}
	
	.form h2 {
		padding-top:0;
	}
	
	.footer .newsletter {
		width: 100%;
	}

	.scroll-down {
		position: absolute;
		left: 48%;
		bottom: 20%;
		display: block;
		text-align: center;
		font-size: 3em;
		z-index: 100;
		text-decoration: none;
		text-shadow: 0;
	  	width: 1em;
	  	height: 1em;
	  	border-bottom: 5px solid #fff;
	  	border-right: 5px solid #fff;
	  	z-index: 9;
	  	-webkit-transform: translate(-50%, 0%) rotate(45deg);
	  	-moz-transform: translate(-50%, 0%) rotate(45deg);
	  	transform: translate(-50%, 0%) rotate(45deg);
		-webkit-animation: fade_move_down 4s ease-in-out infinite;
		-moz-animation:    fade_move_down 4s ease-in-out infinite;
		animation:         fade_move_down 4s ease-in-out infinite;
	}

	/*animated scroll arrow animation*/
	@-webkit-keyframes fade_move_down {
		0%   { -webkit-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
		50%  { opacity: 1;  }
		100% { -webkit-transform:translate(0,10px) rotate(45deg); opacity: 0; }
	}
	
	@-moz-keyframes fade_move_down {
	  	0%   { -moz-transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
	  	50%  { opacity: 1;  }
	  	100% { -moz-transform:translate(0,10px) rotate(45deg); opacity: 0; }
	}
	
	@keyframes fade_move_down {
	  	0%   { transform:translate(0,-10px) rotate(45deg); opacity: 0;  }
	  	50%  { opacity: 1;  }
	  	100% { transform:translate(0,10px) rotate(45deg); opacity: 0; }
	}

}

@media (min-width: 1200px) {

	header {
		background-image: url("Images/header2000.jpg");
		/*padding-top: 480px;*/
	}
	
	#aboutImage h1, #menuImage h1, #contactImage h1 {
		font-size: 3em;
	}
	 
	
	#navigation .logo {
		width: 65px;
		height: 46px;
		padding: 10px 0 0 30px;
	}
	
	#navigation .logo:hover {
		width: 70px;
		height: 50px;
	}
	
	#aboutImage {
		background-image: url("Images/aboutcoffeeshop2000.jpg");
	}
	
	#contactImage {
		background-image: url("Images/coffeeshop2000.jpg");
	}
	
	#menuImage {
		background-image: url("Images/coffeecup2000.jpg");
	}
	
	#coffeehouse article:first-of-type p a {
		width: 20%;
	}
	#about, #menu, #location, #contactus, .visitshop {
		max-width: 1200px;
		margin: auto;
	}
	
	.footercontent {
		width:100%;
		max-width: 1400px;
	}
	
}