/* CSS Document */
:root {
	--member-block-width: 600px;
	--member-shadow: 1px 1px 5px rgb(0,0,0,0.2)
}

#member-wrap{z-index: 1; text-align: center; margin: 106px 0 0 320px; padding:15px 15px 140px 15px; box-sizing: border-box; min-height: calc(100vh - 200px); background-color: var(--cream)}

#member-wrap-short{z-index: 1; text-align: center; margin: 106px 0 0px 0px; padding:15px 15px 15px 15px; box-sizing: border-box; background-color: var(--cream)}

#updatedModal{width:100vw; height: 100vh; position: fixed; top:0; left:0; background-color: rgb(255, 255, 255, 0.95); z-index: 1000; display: flex; justify-content: center; align-items: center; display: none; opacity: 0}
#updatedModal > div{padding: 15px; width:100%; max-width: 900px; text-align: center}

#members-masthead{background: var(--charcoal); color:#FFFFFF; display: flex; justify-content: space-between; align-items: center; z-index: 3; position: fixed; top:0; left:0; width:100vw}
#members-masthead > div{width:100%}
#members-masthead > div:first-of-type{max-width:300px; padding: 10px 30px; height: 100px}
#members-masthead > div:first-of-type img{object-fit: contain; width:100%; height: 100%; object-position: center}
#members-masthead > div:last-of-type{text-align:right; margin-right: 30px}
#members-masthead a{color:#fff; text-decoration: none}

.member-top-nav{list-style: none; padding: 0; margin: 0}
.member-top-nav li{display: inline-block; padding-left: 30px}

.member-edit{display: none}
.edit-button{position:absolute; top:10px; hight:10px; text-decoration:underline; font-size:1rem; position:abaolute; right:10px; top:10px; color: var(--charcoal); cursor:pointer; font-size:1rem}
.edit-button:hover{color:var(--gold)}

.save-button{position:absolute; top:10px; hight:10px; text-decoration:underline; font-size:1rem; position:abaolute; right:10px; top:10px; color: var(--charcoal); cursor:pointer; font-size:1rem}
.save-button:hover{color:var(--gold)}


#maker-profile-tabs{display: flex; justify-content: flex-start; align-items: center; flex-wrap:wrap; font-weight:500; margin: 0 0 30px}
#maker-profile-tabs > div{color: var(--charcoal); padding: 10px; cursor: pointer}
#maker-profile-tabs > div.active{background: var(--stone); cursor: default}

.prof-divider{background: var(--charcoal); padding: 10px 1px !important; margin: 0 10px; border:0; cursor: default}

#craft_desc{border:1px solid var(--charcoal); padding: 10px; width:100%; height: 300px}

.maker-photo-prev-flex{display: flex; justify-content: space-between; align-items: center}
.maker-photo-prev-flex > div{width:100%; max-width: 50%}
.maker-photo-prev-flex > div:last-of-type{border:30px solid #fff; background: var(--stone); padding: 30px; font-size:0.8rem}

.maker-photo-preview{width:100%; padding-bottom: 300px; position: relative; background-color: var(--stone); overflow: hidden}
.maker-photo-preview img{object-fit: cover; object-position: center; width:100%; height: 100%; position: absolute; top:0; left:0}

.lightbulb-icon{background-image: url("../img/svg/light-bulb-black.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; height: 60px; margin: 0 0 15px}



.product-gallery{display: flex; justify-content: flex-start; align-items: center; flex-wrap:wrap}
.product-gallery > div{width:100px; height: 100px; margin: 0 15px 30px 0; box-shadow:0px 0px 3px rgb(0,0,0,0.2)}

.product-gallery > div a img{object-fit: cover; width:100%; height: 100%}

.delete-gall{text-align: center; padding:5px 0 0; font-size:0.6rem}

.gall-add-box{padding: 30px 0}
.gall-add-box label{padding:0 0 10px}

.gall-file-box{padding: 10px; background-color:#f8f8f8; border:1px solid var(--charcoal); margin: 0 0 15px}







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







#MemberMobNav{width:100%; height: 100%; overflow: hidden; position: fixed; top:0; left:0; z-index: 320; background: var(--charcoal); display: none}
#MemberMobNav > div{width:100%; height: 100%; overflow: auto}

#member-mob-menu{margin-top:120px}
#member-mob-menu .mob-button a{display:block; padding:30px 40px; border-bottom:1px solid rgb(0,0,0,0.4); text-decoration: none; color: var(--charcoal); font-size:1.4rem; font-weight:500px; background: var(--stone)}


.gold-mob-button a{background: var(--charcoal) !important; color: var(--gold) !important}
.dark-mob-button a{background: var(--charcoal) !important; color: #fff !important}

#member-mob-menu .mob-button a:after{content: url("../img/svg/circle-arrow-right.svg"); position: absolute; top:20px; right:40px}



.gold-mob-button a:after{content: url("../img/svg/circle-arrow-right-white.svg") !important}
.dark-mob-button a:after{content: url("../img/svg/circle-arrow-right-white.svg") !important}
















/* Floater menu */
#members-menu{position:fixed; top:100px; left:0; z-index: 2; background-color: var(--stone); color: var(--charcoal); width:320px; height: calc(100vh - 104px)}
#members-menu a{color: var(--charcoal); text-decoration: none; font-size:1.2rem; font-weight:500; background-image: url("../img/svg/arrow-right-black.svg"); background-repeat: no-repeat; background-position: center right; background-size: 20px; margin: 5px 0; padding: 10px 5px; display: block}
#members-menu .active a{background: var(--gold)}

#members-menu a:hover{opacity: 0.8}
#members-menu > div{margin: 30px 20px 30px 50px}

#members-menu > div > div{border-bottom:1px solid rgb(0,0,0,0.3)}
#members-menu > div a{display: block}

#members-menu.short-version{height:193px !important; position: absolute; top:100px}

.back-button{background-image: url("../img/svg/arrow-left-black.svg") !important; background-position: center left !important; padding-left: 30px !important}

/* Member blocks */
.block_member_wrap{max-width:var(--member-block-width); margin: 0 auto; text-align: left}
.block_member_wrap h2{font-size:1.4rem; font-weight:700; text-align: left; font-family: "Work Sans", sans-serif !important; padding: 0; margin: 0 0 30px}

.block_member_wrap input[type=checkbox]{width:18px; height: 18px}

.block_member_header{max-width:var(--member-block-width); margin: 30px auto; background-color: #fff; color: var(--charcoal); border-left:15px solid var(--gold); text-align: left; padding: 15px 30px 40px 30px; box-shadow: var(--member-shadow); font-size:1.667; line-height: 2rem}
.block_member_header h1{font-size:2rem; padding: 0 0 15px; margin: 0; font-family: "Playfair Display", serif !important; font-weight:400}


#member-wrap .block_general{max-width:var(--member-block-width); margin: 0px auto 30px; background-color: #fff; color: var(--charcoal); text-align: left; padding: 15px; box-shadow: var(--member-shadow)}
#member-wrap .block_general h3{font-weight: 500; padding: 0; margin: 0 0 15px; font-size:1rem; text-transform: uppercase}

.emailChkFlex{display: flex; justify-content: flex-start; align-items: stretch}
.emailChkFlex > div{width:100%}
.emailChkFlex > div:first-of-type{max-width: 34px; padding-right: 5px}

.member-content-wrap{padding: 30px 15px; max-width: 1000px; margin: 0 auto}

.member-content-filters{display: flex; justify-content: flex-start; align-items: center; max-width: 1000px; margin: 0 auto}
.member-content-filters > div{padding: 0 10px 0 0; margin: 30px 0}
.member-content-filters > div:first-of-type{padding-left: 10px}
.member-content-filters select{min-width: 200px}

/* Footer */
#members-footer{background-color: var(--charcoal); color: #fff; padding: 30px 60px; margin: 0 0 0 auto; z-index: 2; position: fixed; bottom:0; right:0; width:100%}
#members-footer a{color: #fff}
#members-footer > div{display: flex; justify-content: space-between; align-items: center; margin-left: 320px; font-size:0.8rem}
#members-footer > div > div{width:100%}
#members-footer > div > div:last-of-type{text-align: right; max-width: 300px}

@media only screen and (max-width: 1240px) {
	#members-masthead > div:first-of-type{height: 80px}
	#member-wrap{padding: 0px 30px 200px; margin: 0}
	#members-menu{display: none}
	#members-footer{position: relative; bottom: inherit; padding: 10px 15px 30px}
	#members-footer > div{padding:0 !important; margin: 0; flex-direction: column}
	#members-footer > div > div{padding:15px 0; text-align: center !important; max-width: 100% !important}
	.member-top-nav{display: none}
	#MemberMobNavButton{display: block !important}
	#members-masthead{position: relative}
}
@media only screen and (max-width: 800px) {
	.maker-photo-prev-flex{flex-direction: column}
	.maker-photo-prev-flex > div{min-width:100% !important; max-width: 100% !important}
}