﻿/***** BEGIN RESET *****/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;	
}

ol, ul {
	list-style: none;
}

table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address {  
    display: block;  
} 

/*-------- COLORS --------

*/

/***** END RESET *****/
::-moz-selection {
    background: #000; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BODY STYLES --------*/

body {

}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none;}


hr{border:#000 1px solid;}



.uppercase {
	text-transform: uppercase;
}
.capitalize {
	text-transform: capitalize;
}
.italic {
	font-style: italic;
}
.underline {
	text-decoration: underline;
}
.black {
	color: #131313;
}
.black-bg {
	background-color: #131313;
}
.white {
	color: #fff;
}
.white-bg {
    background-color: #fff;
}
.brown {
	color: #56381E;
}
.brown-bg {
    background-color: #56381E;
}
.biege {
	color: #F7F3ED;
}
.biege-bg {
    background-color: #F7F3ED;
}

.wid98 {
	width: 98%;
	margin: 0 auto;
}
.wid95 {
	width: 95%;
	margin: 0 auto;
}
.wid90 {
	width: 90%;
	margin: 0 auto;
}
.wid85 {
	width: 85%;
	margin: 0 auto;
}
.wid80 {
	width: 80%;
	margin: 0 auto;
}
.wid75 {
	width: 75%;
	margin: 0 auto;
}
.wid70 {
	width: 70%;
	margin: 0 auto;
}


.breadcrumbs {
    display: flex;
    font-size: 15px !important;
    color: #403f3b !important;
    padding: 3% 0 2%;
    flex-wrap: wrap;
    align-items: center;
    letter-spacing: 0.05em;
    gap: 10px;
}
.breadcrumbs a {
    display: inline-block;
    padding: 12px;
    border-radius: 5px;
    border: solid 1px #cbcbcb;
    color: #403f3b;
    font-size: 15px !important;
}



.heading1 {
	font-family: "merriweather", serif;font-size: 75px;line-height: 85px;font-weight: 700;}
h2.subheading {
	font-family: "lato", sans-serif;font-size: 33px;line-height: 40px;font-weight: 400;color: #fff;}
.lg-heading {
	font-family: "merriweather", serif;font-size: 50px;line-height: 60px;font-weight: 700;}
.med-heading {
	font-family: "merriweather", serif;font-size: 23px;line-height: 50px;font-weight: 700;}
.cta-heading {
	font-family: "merriweather", serif;font-size: 30px;line-height: 60px;font-weight: 700;}
.body {
	font-family: "lato", sans-serif;font-size: 16px;line-height: 30px;font-weight: 400;}


.merri-reg {
	font-family: "merriweather", serif;
	font-weight: 400;
	font-style: normal;
}
.lato {
	font-family: "lato", sans-serif;font-weight: 400;
}




a.white-btn {
	font-family: "lato", sans-serif;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 25px;
    color: #fff;
    text-transform: uppercase;
    border: 1px solid #F7F3ED;
    padding: 10px 35px;
	transition: .2s ease-in;
	display: ruby-text;
}
a.white-btn:hover {
	background-color: #F7F3ED;
	color: #56381E;
	transition: .2s ease-in;
}
a.trace-btn {
	font-family: "lato", sans-serif;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 1px;
    line-height: 25px;
    color: #000;
    text-transform: uppercase;
    border: 1px solid #000;
    padding: 10px 35px;
	transition: .2s ease-in;
	display: ruby-text;
}
a.trace-btn:hover {
	background-color: #000;
	color: #fff;
	transition: .2s ease-in;
}

/*--- HEADER STYLES ---------------------*/
header {}

.head-wrap {
	position: relative;
}

.top-bar .wid95 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bar-aside {
    display: flex;
    gap: 50px;
    align-items: center;
    padding: 8px 0;
}
.bar-aside a {
	color: #000;
	font-size: 15px;
	letter-spacing: 1px;
}
.wh-header {
    display: flex;
    align-items: center;
}


.logo-container a{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.logo-background-image {
  position: absolute;
  height: auto;
  z-index: 0;
}

.logo {
  position: relative;
  z-index: 1;
}

/*---BODY--------------------------------*/

body {
	background-color: #F7F3ED;
}

.wrap-hero {
    width:100%;
    height: auto;
    position: relative;
	background-color: #000;
}
.hero-video {
    display: block;
    width: 100%;
    max-height: calc(100vh - 300px);
    overflow: hidden;
    min-height: 370px;
    height: 48vw;
	text-align: right;
}
.hero-video iframe {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    position: relative;
    top:-60px;
}
.hero-overlay {
    display: flex;
    justify-content: flex-start;
    align-items: center;
	background-image: url("../siteart/hero2.0.JPG");
    height: 750px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 25% 20%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    color:#fff;
    text-shadow: 0 0 20px rgba(0,0,0,1);
}
.hero-overlay .container-1 {
    text-align: left;
    position: relative;
    width: 90%;
    margin: 0 auto;
}
.hero-cta-wrap {
	background-image: url("../siteart/brown-edge.png");
    height: 554px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
	margin-top: -188px;
	display: flex;
    align-items: flex-end;
}
.hero-cta-wrap .wid90 {
    display: flex;
	align-items: flex-end;
    justify-content: space-around;
	margin-bottom: 100px;
}
.hero-cta {
    text-align: center;
}
.hero-cta h4 {
    margin-bottom: 20px;
}
.vertical-line {
  border-left: 1px solid #F7F3ED; 
  height: -webkit-fill-available;
  margin: 0 10px;
}

.home-about .marg {
    margin: 100px 0 100px 5vw;
	display: flex;
    align-items: center;
	gap: 50px;
}

/*  PROMO SLIDER  */
/*.promo-slider {width:calc(97.5% - 410px);}*/
.promo-slider {width: 100%;}
.promo-slider .cycle-slideshow {z-index:5; position:relative;  margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.promo-slider .cycle-slideshow img {position:relative; width:100%; margin:0; padding:0;}

.promo-slider .cycle-pager {
	position:absolute; overflow: hidden; z-index:500; bottom:15px; left:20px; width:auto; padding:0 6px 0 15px; text-align:left; background:rgba(15,15,15,0.52);
	-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}
.promo-slider .cycle-pager span {display: inline-block; width:30px; height:58px; font-size:60px; line-height:1; color:#F7F3ED; font-family: arial; cursor: pointer;}
.promo-slider .cycle-pager span.cycle-pager-active {color:#774c29;}
.promo-slider .cycle-pager > * {cursor:pointer;}


.aside {
    flex: 1;
}

.edge-contact {
	background-image: url("../siteart/edge-bott.png");
    height: 283px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
	display: flex;
	align-items: center;
    justify-content: center;
	margin-top: 100px;
}
.edge-contact span {
    font-weight: 400;
}
.edge-contact h3 {
    margin-top: 35px;
	transition: .2s ease-in;
	text-align: center;
	padding: 0 25px;
}
.edge-contact h3 a {
	transition: .2s ease-in;
}
.edge-contact h3 a:hover {
	text-decoration: underline;
	transition: .2s ease-in;
}

.aside p.body {
    padding: 25px 0;
}


.contact-about .marg {
    margin: 100px auto;
    display: flex;
    align-items: center;
    gap: 50px;
    width: 90%;
}

.btns {
    gap: 20px;
    display: flex;
    flex-wrap: wrap;
}

/*--------FORM STYLES--------------------*/




/*-------- FOOTER STYLES ----------------*/

.footer {
	padding: 100px 0;
}
.footer .wid90 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.foot-col div a {
    display: inline-flex;
    align-items: center;
	gap: 25px;
	padding: 10px 0;
}
.foot-col i {
    font-size: 15px;
}
.foot-logo img {
    max-width: 100%;
	padding: 10px;
}


/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/









/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1920px) {
	
}

@media only screen and (max-width: 1536px) {
	
}

@media only screen and (max-width: 1750px) {
}
@media only screen and (max-width: 1440px) {
	.heading1 {
		font-size: 55px;
		line-height: 60px;
		margin-bottom: 20px;
	}
	h2.subheading {
		font-size: 23px;
		line-height: 30px;
	}
	.lg-heading {
		font-size: 35px;
		line-height: 40px;
	}
	.med-heading {
		font-size: 20px;
		line-height: 30px
	}
	.cta-heading {
		font-size: 23px;
		line-height: 30px;
	}
	.hero-cta h4 {
	    margin-top: 20px;
	}
	.promo-slider .cycle-pager span {
		height: 40px;
		font-size: 40px;
		width: 25px;
	}
	.hero-overlay {
		width: 100%;
	}
	.hero-overlay .container-1 {
		text-align: center;
	}
	.hero-video video#bgvideo {
		width: 100%;
	}
	.hero-video {
		filter: brightness(0.8);
	}
}

@media only screen and (max-width: 1350px) {
	.hero-overlay {
		height: 600px;
	}
}
@media only screen and (max-width: 1270px) {
	.top-bar {
		display: none;
	}
	.head-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.logo-background-image {
		display: none;
	}
	.logo-container a{
        position: relative;
        transform: none;
        left: 0;
        padding: 10px 20px;
    }
}

@media only screen and (max-width: 1080px) {
	.hero-overlay .container-1 {
        text-align: center;
    }
    .hero-overlay h1 {
        font-size:6vw;
    }
    .hero-overlay h1 span {
        font-size:5vw;
    }
	.contact-about .marg {
		flex-direction: column;
	}
	.home-about .marg {
		flex-direction: column;
		margin: 100px auto;
		width: 90%;
	}
}

@media only screen and (max-width: 991px) {
	
}
@media only screen and (max-width: 900px) {
	.vertical-line {
		display: none;
	}
}

@media only screen and (max-width: 768px) {
	.hero-video {
        display: none;
    }
    .hero-overlay {
/*        position: static;*/
/*        background-image: url("../siteart/slider/IMG_4375.png");*/
/*        background-repeat: no-repeat;*/
/*        background-size: cover;*/
        background-position: left;
/*		background-color: #000;*/
/*        padding:60px 20px;*/
/*        box-sizing: border-box;*/
		height: 300px;
    }
    .hero-overlay h1 {
        font-size: 30px;
		line-height: 35px;
		margin-bottom: 10px;
    }
	#menu-button {
		line-height: 75px!important;
	}
	h2.subheading {
        font-size: 16px;
        line-height: 20px;
    }
	.hero-cta-wrap .wid90 {
		align-items: center;
		flex-direction: column;
		justify-content: space-between;
		gap: 20px;
		margin-bottom: 0;
	}
	.hero-cta-wrap {
		background-image: url("../siteart/solid-edge-top.png");
		height: 900px;
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
		width: 100%;
		max-width: 100%;
		margin-top: 0;
		display: flex;
		align-items: center;
	}
	.footer .wid90 {
		flex-direction: column-reverse;
		gap:50px;
	}
	a.white-btn, a.trace-btn {
		font-size: 15px;
	}
}
@media only screen and (max-width: 500px) {
	.foot-logo img {
		width: 260px;
	}
	.lg-heading {
        font-size: 25px;
        line-height: 30px;
    }
	.logo {
		max-width: 180px;
	}
	.hero-overlay {
		background-position: center;
	}
}





