@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400');

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}
img {
	max-width: 100%;
	height: auto;	
}
.intro {
	height: 100%;
	width: 100%;
	margin: auto;
	background-image: url(img/coffee.png);
	display: table;
	top: 0;
	background-size: cover;
}
.intro img {
	opacity: 1.9;
}
.intro .inner {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	max-width: none;
}
.intro .inner {
	color: #c4c1ba;
}
.content {
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 28%;
}
.content h1 {
	font-family: 'Yantramanav', sans-serif;
	font-size: 400%;
	font-weight: 600;
	color: #c4c1ba;
	line-height: 70%;
}
h3 {
	font-family: 'Yantramanav', sans-serif;
	font-size: 200%;
	font-weight: 800;
	color: #c4c1ba;
	line-height: 70%;
}
.btn {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	color: #FFF;
	text-decoration: none;
	padding: 12px 22px;
	background-color: transparent;
	border: 2px solid #856f46;
	border-radius: 9px;
}
.btn:hover {
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	color: #856f46;
	text-decoration: none;
	padding: 12px 22px;
	background-color: transparent;
	border: 2px solid #fff;
	border-radius: 9px;
}
input[type="submit"]{
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	color: #FFF;
	padding: 12px 22px;
	background-color: #856f46;
	border: 2px solid #fff;
	border-radius: 9px;
}
p {
	font-size: 150%;
	line-height: 120%;
	font-family: sans-serif;
	margin: 3%;
}
#container {
	width: 100%;
	background-color: #999;
}
#left-col {
	width: 35%;
	margin-left: 200px;
	margin-top: 15px;
	float: left;
	padding-bottom: 30px;
}
#right-col {
	width: 35%;
	margin-top: 25px;
	float: right;
	margin-right: 200px;
	padding-bottom: 30px;
}
footer {
	background: #856f46;
	width: 100%;
	margin-top: 5%;
	padding: 1% 0;
	overflow: auto;
}
footer p{
	color: #000;
	text-align: center;
}
/*--- Media Queries --*/
@media screen and (max-width: 900px) {
	#container {
		width: 100%;
		margin: 0;
	}
	#left-col {
		width: 100%;
		margin: 0;
	}
	#right-col {
		width: 100%;
		margin: 0;
	}
	.content {
		padding-bottom: 30%;
	}
	.content h1 {
		font-size: 450%;
	}
	.btn {
		font-size: 18px;
		border: 2px solid #856f46;
		border-radius: 9px;
	}
}
@media screen and (max-width: 768px) {
	#container {
		width: 100%;
		margin: 0;
	}
	#left-col {
		width: 100%;
		margin: 0;
	}
	#right-col {
		width: 100%;
		margin: 0;
	}
	.content {
		padding-bottom: 40%;
	}
	.content h1 {
		font-size: 300%;
	}
	.btn {
		font-size: 18px;
		border: 2px solid #856f46;
		border-radius: 9px;
	}
	p {
		font-size: 120%;
		line-height: 100%;
	}
}
@media screen and (max-width: 480px) {
	#container {
		width: 100%;
		margin: 0;
	}
	#left-col {
		width: 100%;
		margin: 0;
	}
	#right-col {
		width: 100%;
		margin: 0;
	}
	.content {
		padding-bottom: 50%;
	}
	.content h1 {
		font-size: 250%;
	}
	.btn {
		font-size: 18px;
		border: 2px solid #856f46;
		border-radius: 9px;
	}
	p {
		font-size: 100%;
		line-height: 100%;
	}
}