/* CSS Document */
:root {
	--outer-width: 1200px;
	--inner-width: 900px;
	--red: #FA0B39;
}

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

html{width:100%; height: 100%; margin: 0}
body{width:100%; height: 100%; margin: 0; font-size:16px; background-color: var(--cream); overflow-x: hidden;}
body{background: #fff; color:var(--charcoal); box-sizing: border-box; font-family: "Work Sans", sans-serif;}
body.noscroll{overflow: hidden}

/* HTML */
div{box-sizing: border-box; position: relative; background-repeat: no-repeat; background-position: center; background-size: cover}
a{color:var(--charcoal)}
h1{font-family: "Work Sans", sans-serif; font-weight:800; font-size:4rem; line-height: 4rem}
h2{font-family: "Playfair Display", serif; font-weight:500; font-size:3rem; padding: 0; margin: 10px 0 30px}
h3{font-weight:400}

p{line-height: 1.8rem}
textarea{font-family: "Work Sans", sans-serif}

a{transition:all 300ms ease}
section{width:100%; margin: 0; padding: 0; display: block}


/* Forms */
label{display:block; font-weight:500}
input[type=email], input[type=number], input[type=password], input[type=text]{padding:10px; border:1px solid var(--charcoal); background: #fff;  margin: 4px 0 30px; width:100%; font-size:16px}
input[type=date]{padding:10px; border:1px solid var(--charcoal); background: #fff;  margin: 4px 0 30px; font-size:16px}
input, select, textarea{box-sizing: border-box; background-color: #fff}
select{padding: 6px 15px !important; border:1px solid var(--charcoal); background-color:#fff; font-size:1rem; overflow: hidden; max-width: 100%;  border-radius:0 !important}
select option:checked {background-color: var(--gold) !important}
input::placeholder{font-size: 1rem; color: #666}
textarea{font-size:16px; font-family: "Work Sans", sans-serif;}

img.alignright, div.alignright, picture.alignright{float:right; margin: 0 0 30px 50px}
img.alignleft, div.alignleft{float:left; margin: 0 30px 30px 0}
img[align=right]{float:right; margin: 0 0 30px 30px}


/* Generic */
.uppercase{text-transform: uppercase}
.italic{font-style: italic}
.bold{font-weight:800}
.center{text-align:center}

/* Nav */
#menu-my-header{list-style:none; padding: 0; margin: 0; overflow: visible!important}
#menu-my-header > li{display:inline-block; padding: 0; margin-left: 40px; position: relative; cursor: pointer}
#menu-my-header > li > a{display: inline-block; padding: 5px 0; text-align: right}
#menu-my-header > li > a:hover{color:var(--gold)}
#menu-my-header > li:hover .sub-menu{display: block}
#menu-my-header ul{margin-left: 15px}
#menu-my-header .sub-menu{background:var(--cream); color: var(--charcoal); position: absolute; top:29px; right:0; list-style: none; padding: 0; margin: 0; min-width:200px; display:none; box-shadow:1px 1px 3px rgb(0,0,0,0.3)}
#menu-my-header .sub-menu a{padding: 10px 15px; display: block; color: var(--charcoal)}
#menu-my-header .sub-menu li:last-of-type a{border:0}
#menu-my-header .sub-menu a:hover{background-color: var(--gold); color:var(--charcoal)}
#menu-my-header .menu-item-has-children > a:after{content: ''; display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid var(--gold); margin-left: 6px; margin-bottom: 3px;}
#menu-my-header > .current_page_item{border-bottom:2px solid var(--gold)}
#menu-my-header > .current_page_item > a{color: var(--gold)}
#menu-my-header .sub-menu .current_page_item{background: var(--gold)}
#menu-my-header .sub-menu .current_page_item a:hover{}



/* Mob nav button */
#mobNavButton{position: absolute; top:45px; right:45px; width:30px; cursor: pointer; z-index: 20; transition:all 300ms ease-in-out; display: none}
#mobNavButton > div{margin:0 0 8px; border:2px solid #fff; transition:all 300ms ease-in-out}
#mobNavButton:hover > div{border-color: var(--gold)}

/* Mob nav*/
#mobnav{position:fixed; top:0; left:0; width:100%; height: 100%; background:var(--charcoal); z-index: 30; padding: 125px 0 0; margin: 0; overflow: hidden; display: none}
#mobnav > div{max-height: 100%; overflow: auto}


#mob-mh{display: flex; justify-content: space-between; align-items: center; background: var(--charcoal); color: #fff; border-bottom:1px solid #666; position: fixed; top:0; left:0; z-index: 1001; width:100%}
#mob-mh > div{padding: 30px 10px; width:100%}
#mob-mh > div:first-of-type{padding-left: 15px; text-align: left}
#mob-mh > div:first-of-type img{height:60px; max-height: 60px; min-height: 60px}
#mob-mh > div:last-of-type{font-size:40px; padding-right: 70px; max-width: 80px}
#mob-mh > div:last-of-type i{cursor: pointer; transition: all 300ms ease-in-out}
#mob-mh > div:last-of-type i:hover{color: var(--gold)}


.mob-menu{list-style: none; padding: 0; margin: 0}
.mob-menu a{text-decoration: none; display: block; padding: 25px 15px 25px 45px; border-bottom:1px solid #666; cursor: pointer; font-size:1.4rem; background: var(--charcoal); color: #fff}
.mob-menu > li{display: block}
.mob-menu > li > ul{display: none}
.mob-menu > li:last-of-type a {color: var(--gold)}
.mob-menu > li:nth-last-child(2) a{color: var(--gold)}

.mob-menu .menu-item-has-children{position: relative}
.mob-menu .menu-item-has-children > a:after{content: url("../img/svg/circle-arrow-down-white.svg"); display: block; position: absolute; right:30px; top:14px; width:50px; height: 50px; background-size: contain; transform:all 200ms ease-in-out}

.mob-menu .active{background: var(--stone); color: var(--charcoal)}
.mob-menu .active:after{filter: invert(100%); transform:rotate(180deg)}

.mob-menu .sub-menu{list-style: none; margin:0; padding: 0}
.mob-menu .sub-menu a{background: var(--cream); color: var(--charcoal)}

/* Masthead */

/* Footer */


@media only screen and (max-width: 1200px) {

}
@media only screen and (max-width: 1000px) {

}
@media only screen and (max-width: 900px) {

}
@media only screen and (max-width: 800px) {

}
@media only screen and (max-width: 700px) {

}
@media only screen and (max-width: 600px) {

}
@media only screen and (max-width: 400px) {
	
}