@charset "UTF-8";
/* CSS Document */
html {background-color: #20110D;}


body {
	margin: 0px
}
.lighter {background-color: #AFA6A4;}

h1 {
	font-family: Baskerville, 'Times New Roman', 'serif';
	font-size: 3em;
	color: #FADEB4;
	
}
h2 {
	font-family: Baskerville, 'Times New Roman', 'serif';
	font-size: 2em /*change to ems later*/;
	color: #FADEB4;
}
h3 {
	font-family: Baskerville, 'Times New Roman', 'serif';
	font-size: 1.5em /*change to ems later*/;
	color: #FADEB4;
}
h4 {
	font-family: Baskerville, 'Times New Roman', 'serif';
	font-size: 1.25em /*change to ems later*/;
	color: #FADEB4;
}

img {height: auto}


a {
	text-decoration: none; 
	color: #FADEB4;
}
a.see {color: #062448; text-decoration: underline}
a:hover {text-decoration: underline}
p , li , .cat_title {
	font-family: Oswald;
	color: #FADEB4;
	font-weight: 300;}

.banner {
	background-image: url("images/WH_main_banner.jpg");
	background-size: cover;
	background-position: center top;
	background-position-x: 55%;
	width: 100%;
	height: 580px;
	margin: 0px;
	padding: 0px;
	z-index: 15;
	background-repeat: no-repeat;
}

#chill_background {
	background-image: none;
	background-color: #40322F;
	height: 80%;
}

.color_chill{
	height: 20px;
	width: 20px;
	background-color: #062448;
}


.logo {width: 10%;
	max-width: 90px;
	padding: 20px 0px 20px 20px}

nav {
	text-transform: uppercase;
	font-family: Oswald, san-serif;
	max-width: 420px;
	display: block;
	width: 100%;
	float: right;
	padding-top: 50px
	
}
nav a {
	color: #D99C41
}
nav ul , li{
	display: inline;
}

button.menu_button {display: none}

.valprop {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	height: 70%;
	padding-top: 60px;
	max-width: 600px
}
.valprop h1 , h3 {
	padding: 0px;
	margin-bottom: 10px
}

.valprop h1 {
	font-size: 4em;
	
}
.valprop h3 {
	margin-top: 10px
}
/********************************************************************************/

/********************************************************************************/
.home_cat {
	padding: 30px 45px;
}
#exclusive 
{
	background-color: #6C3011;
}
#chill
{
	background-color: #062448;
}
.cat_title {
	font-size: 20px; 
	font-weight: 100;
	margin-left: auto;
	margin-right: auto;
	padding: 15px 0;
}

.main_section {
	width: 60%;
	justify-content: center;
}
.main_section h3 {max-width: 633px}

.side_section {
	width: 40%;
	justify-content: center;
	
}

.side_h {display: flex; width: auto; margin-bottom: 4%;}
.art_category {
	display: flex;
	justify-content: space-between;
	align-content: flex-start;
	column-gap: 4%;
}

#swap{
	flex-direction: row-reverse;
}
img.main_img {
	width: 100%;
}
.side {
	display: flex;
	margin-bottom: 4%;
}
.side img {
	margin-right: 6%;
	max-height: 175px;
	max-width: 175px;
}
.side_titles {
	margin: 0px 4%
}
.side_titles h4 {margin-top: 0px;margin-bottom: 0px}
/*****************************************************NEW TO SPEAKEASIES**********/
.new_to_speak {
	background-color: #40322F;
	padding: 40px 0px;
	
}

.new_speak_border  {
	width: 70%;
	margin-left: auto;
	margin-right: auto;
	padding: 20px 10px;
	border: 4px solid #D99C41; 
	border-radius: 50px;
	display: flex;
	justify-content: center;
}
#new_desc {
	width: 40%;
    padding: 30px;
	align-content: flex-start;
}

#new_desc h2 {color: #D99C41;}
.new_speak_img {
    width: 45%;
    padding: 30px;
	align-content: center;
}
.new_speak_img img {
	width: 100%;
}
button#tag {
    width: auto;
    font-family: Oswald, sans-serif;
    font-size: 16px;
	font-weight: 500;
    display: inline-block;
    color: #FADEB4;
    border: #FADEB4 2px solid;
	background-color: #40322F;
    border-radius: 12px;
    box-shadow: none;
	padding: 5px 20px;
	margin: 15px 0px;
}

button#tag:hover {
	color: #000000;
	
	background-color: #D99C41;
	border-color: #D99C41
}
/*****************************************************CATEGORY-CHILL**********/
.cat_articles {
	background-color: #AFA6A4;
}
.art_category_pg {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	column-gap: 5%;
}

.cat_articles h3 , .cat_articles h4 , .cat_articles p {
	color: #40322F;
}
.cat_pg{
	padding: 30px 45px 80px 45px;
}

.main_section_cat_pg {
	width: 60%;
	flex-grow: 2;
	padding-right: 8%;
}

.main_section_cat_pg img {width:100%}

.side {width: 40%}

.side_section_cat {
	width: 100%;
	align-content: center;
	text-align: right;
}
.side_section_cat h1 {line-height: 60px; margin: 0;}

.side_section_cat p {margin: 15% 0px 0px 0px;}


.article_list{
	display: flex;
	padding: 30px 45px;
	justify-content: space-between;
    gap: 8%;
}

.art_img {
	width: 38%;
}
.art_img img {width:100%}

.art_side a:hover {text-decoration-color: #062448}


/*****************************************************CONTACT**********/
.contact_wrapper {
	margin-left: auto;
	margin-right: auto;
	padding: 20px 370px 20px 200px;

}
.contact_wrapper img {width: 100%; background-color: #000000;}

.contact {
	color: #20110D;
}
h1.contact {margin-top: 0px; margin-bottom: 0px;
padding: 1em 0px;}

p.contact {margin: 0px; padding-bottom: 3em; }

.map {background-color: rgba(108, 48, 11, 0.8);}
/*****************************************************ARTICLE**********/
.tab {position: fixed; right: 0px; top: 180px; background-color: #062448; padding: 0px 30px;}
#share_tab{top: 250px; background-color: #FADEB4; border: 0.5px #FADEB4 solid; border-radius: 20px 0px 0px 20px; padding: 5px 13px 3px 13px;}
#share_tab img {width: 20px}
#chill_tab p {text-transform: uppercase;}

.article_wrapper {
	margin-left: 10%;
	margin-right: 25%;
	max-width: 830px
}

div.indiv_speak h2 , .indiv_speak h3 , .indiv_speak h4 , .indiv_speak p {
	color: #20110D;
}

.indiv_speak {padding: 8% 0px 10% 0px;}

#bold_p {font-weight: 500; line-height: 150%; font-size: 18px; padding:0px;}

.indiv_speak p {font-weight: 400; line-height: 130%;}

p.caption {font-weight: 300;margin: 5px 0px;}

.indiv_speak img {margin-top: 3%; max-width: 830px;
    width: 100%;
}

.directions {margin: 5% 0px}

p.article {color: #20110D; font-weight: 400; margin: 4% 0px 15%;}
/*****************************************************FOOTER**********/
footer {
	background-color: #20110D;
}

.copy p {
	margin-top: 100px;
    padding-left: 30px;
	width: 50%;
	float: left;
	margin-bottom: 40px;
	font-size: 12px
}

.socials img {
	width: 45px;
	margin: 0px 6px;
}
.socials {
	display: block;
	float: right;
    margin-top: 80px;
    padding-right: 40px;
	margin-bottom: 40px;
}

.socials a:hover {
	text-decoration: none;

}
/*****************************************************Media Q's**********/
@media screen and (min-width: 1300px){
	.side_section_cat {align-content: flex-start;}
	.side_section_cat p {margin-top: 28%}
	.art_img {
    width: 30%;
}
}

@media screen and (max-width: 1088px) {
	.side_section_cat p {margin-top: 7%;}
	.side {width: 45%}
	.main_section_cat_pg {width: 55%; padding-right: 3%}
	
	.art_side h3 {margin-top: 0px}
	.art_side h4 {margin: 1em 0px}
	}

@media screen and (max-width: 1068px) {
	
.main_section {
	width: 100%;}
.side_section {
	width: 100%;margin-top: 10%}
.art_category {
	display: inline-block;}
.home_cat , .new_to_speak {padding: 4% 20%;}

	.new_speak_border {display: inline-block; width: 90%; padding: 8%}
	#new_desc , .new_speak_img {width: 100%; padding: 0px;}
	.new_speak_img {margin: 8% 0%}
	
	.new_speak_border h2 , .new_speak_border h4 , .new_speak_border p , .button {text-align: center}
	button#tag {font-size: 18px; padding: 10px 30px;}
	
}

@media screen and (max-width: 945px) {
	button.menu_button {
		display: block; 
		float: right;
		padding: 4% 4%;
	}
	
	nav.main_nav {display: none}
	
	
	.art_category_pg {display: block;
        margin-left: auto;
        margin-right: auto;
    }
	.main_section_cat_pg , .side {width: 100%}
	.main_section_cat_pg {padding-right: 0px}
	.side p {margin-top: 3%}
	.side h1 {line-height: 40px; margin-top: 2%; font-size: 2em }
	.cat_pg {padding-bottom: 30px}
	.side_section_cat {text-align: center;}
	
	.article_list {display: block}
	.art_img , .art_side {width: 50%; margin-left: auto; margin-right: auto;}
	.art_side {margin-top: 3%; text-align: center}
}

@media screen and (max-width: 700px) {
	    .home_cat {padding: 4% 10%;}
	.side_section {margin-top: 18%}
	.side {margin-bottom: 12%}
	img.logo {width: 15%; padding: 4% 7%;}
	button.menu_button {font-size: 60px}
	
	.art_img , .art_side {width: 70%;}
	.article_wrapper  {margin-right: 17%;}
	
	.tab {padding: 0px 15px}
}

@media screen and (max-width: 600px) { /*when mobile footer happens*/
	img#footer_logo {margin-left: auto; margin-right: auto; display: block; padding: 40px 0px; width: 20%}
	nav {padding-top: 2%; max-width: none;}
	nav ul , li {margin-left: auto; margin-right: auto; float: none; display: block; text-align: center; padding: 5% 0px;}
	.new_to_speak {padding: 8% 10%;}
	.new_speak_border {width: 80%}
	.copy p , .socials {display: block; width: 100%;margin-left: auto;margin-right: auto; padding: 0px; text-align: center;}
	.socials img {margin: 0px 15px}
	
}
@media screen and (max-width: 550px) {
	.valprop {max-width: 418px;
		padding-top: 30px;}
	.valprop h3 {padding-top: 30px}
	
	.art_img , .art_side {width: 85%;}
	.article_list {padding: 30px 28px;}
	
	.article_wrapper {margin-left: 17%; margin-right: 17%}
	h1 {font-size:2.2em}
}

/*****************************************************JQuery**********/