:root {
	--masthead-width:1600px;
	--content-width: 1200px;
	--inner-width: 900px;
}

* {
    box-sizing: border-box;
}

html, body{width:100%; height: 100%; margin: 0; box-sizing: border-box}
body{font-family: var(--font-body); position: relative; font-size:16px; overflow-x: hidden}

div{box-sizing: border-box; position: relative; box-sizing: border-box}

p{line-height: 1.6; font-size:1.2rem}
p:empty{display:none}
a{color: var(--pink); transition:all 300ms ease}
a:hover{color: #fff !important}

h1, h2{font-family:var(--font-heading); line-height: 1.1; padding: 0; margin: 0 0 15px; font-weight: 500}

h3, h4, h5{font-family:var(--font-sub-heading); line-height: 1.2; padding: 0; margin: 0 0 15px; font-weight: 500}

h1{text-align: center; font-size: 2.2rem; padding: 0; margin: 50px 0;}
h2{font-size: 1.8rem; padding: 0; text-transform: uppercase; }
h3{font-size: 1.4rem; padding: 0; text-transform:uppercase}
h4{font-size: 1.2rem; padding: 0}

hr{max-width: 300px; margin: 40px auto; border-radius: 2px; border:2px solid var(--pink)}

input{box-sizing: border-box}
input[type="text"], input[type="email"], input[type="number"], input[type="password"]{padding:11px; border:1px solid #000} 
input[type=submit]{background: var(--pink); color: #fff; font-size:1rem}
textarea{font-family: var(--font-body); box-sizing: border-box; padding: 10px}

audio{margin: 30px 0}
audio::-webkit-media-controls-panel {
  background-color: var(--pink);
}
audio::-webkit-media-controls-play-button {
  background-color: var(--pink);
  border-radius: 50%;
}

audio::-webkit-media-controls-timeline {
  background-color: var(--pink);
}

.flex{display: flex; justify-content: center; align-items: center; flex-wrap: wrap}

.content{margin: 0 auto; min-height: calc(100vh - 350px); z-index: 1}

#mastheadwrap{width:100%; z-index: 1; padding: 15px 30px; background-color: #000}
#masthead{display: flex; justify-content: center; align-items: center; margin: 0 auto; width:100%; max-width: var(--masthead-width); grid-gap: 30px}
#masthead > div{width:100%}
#masthead > div:first-of-type{max-width:300px}
#masthead > div:first-of-type img{object-fit: contain; object-position: center; width:100%; height: 100%}
#masthead > div:last-of-type{text-align: right}

.center, .centre{text-align: center !important}
.alignright{float:right; max-width: 50%; margin: 10px 0 30px 30px}

#mobnavbutton{width:30px; position: fixed; right:15px; top:20px; transition:all 300ms ease; cursor:pointer; text-align: center; z-index: 3; display: none}
#mobnavbutton > div{margin: 0 auto 5px; transition:all 300ms ease; border:1px solid #fff}

#mobnav{width:100vw; height: 100vh; position:fixed; left:0; top:0; padding-top: 50px; background: #000; color: #fff;  z-index: 2; background-image: url("../img/bg.webp"); background-size: cover; display: none}
#mobnav a{color: #fff; padding: 5px 30px 7px; margin:0 0 5px; text-decoration: none; border:1px solid #fff; background-color: #1e005a; border-top-left-radius:100px; border-bottom-left-radius:100px}
#mobnav ul{list-style: none; padding: 5px 0 5px 10px; margin: 0; display: block; text-align: right}
#mobnav li{display: block; margin: 0}

#mobnav ul ul{display: none}
#mobnav ul > li{cursor: pointer}
#mobnav ul > li > a{display: inline-block; position: relative; font-size:1.6rem; border-bottom:2px solid rgb(0,0,0,0)}
#mobnav ul > li > a::after{top:7px; right:5px; font-size:1.1rem}
#mobnav ul > li > a:hover{color: #fff !important; background: #000 !important}
#mobnav ul ul{position: relative; top:inherit; left: inherit; margin: 0 0 20px}
#mobnav ul ul > li{ max-width: 100% !important; min-width:100% !important}
#mobnav ul ul a{text-align: center; border:0; box-shadow:none; font-size:1.2rem}
#mobnav ul ul a:hover{background-color: #000 !important; color: #fff !important}

.menu-main-menu-container{}
.menu-main-menu-container {text-align: center; margin: 0 auto; padding: 15px}
.menu-main-menu-container > ul{list-style: none; padding: 0; margin: 0; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; grid-gap: 25px}
.menu-main-menu-container > ul > li{display: inline-block; padding: 0; margin:0; position: relative; cursor:pointer}
.menu-main-menu-container > ul > li > a{color: #fff; text-decoration: none; display: block; transition:all 100ms ease-in-out}
.menu-main-menu-container > ul > li > a:hover{color:var(--pink) !important}
.menu-main-menu-container > ul > li > ul{position: absolute; top:60px; left:0; list-style: none; padding: 0; margin:0; border:1px solid #fff; background: #443b71; min-width:200px; display:none}
.menu-main-menu-container > ul > li > ul.submenu-active{display: block}
.menu-main-menu-container > ul > li > ul > li{padding: 0; margin: 0}
.menu-main-menu-container > ul > li > ul > li > a {display: block; padding: 10px; text-decoration: none; text-align: left}

.menu-item-has-children > a {position: relative}
.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    margin-left: 6px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid currentColor;
    vertical-align: middle;
}

.mainnav .current-menu-item a{font-weight:700; border-bottom:2px solid red}


.post-edit-block{text-align: center}
.post-edit-link{text-align:center; font-size:12px; color: #B866FF}

footer{padding: 30px; clear: both; background-color: var(--pink); color: #fff}


#credit{background-color: var(--pink); text-align: center; font-size:0.8rem; padding: 15px 0; color:#fff}
#credit a{color:rgb(255,255,255,0.6)}

.socials{display: flex; justify-content: center; align-items: center; flex-wrap:wrap; grid-gap: 15px}
.socials > div{position: relative; width:40px; height: 40px; border-radius:100px; font-size:1.2rem; display: flex; justify-content: center; align-items: center; color: #fff}
.socials a{color: #FFFFFF}

.video-block{margin: 0 auto; max-width: 900px}
.videowrapper{width:100%; position: relative; padding-bottom: 56%; margin: 0 auto 30px}
.videowrapper iframe{width:100%; height: 100%; position: absolute; top:0; left:0; border:0}

#scrollup{position: fixed; right:0; bottom:100px; font-size:2.4rem; background-color: var(--pink); color: #000; cursor: pointer; transition:all 600ms ease-in-out; width:50px; height: 50px; border-top-left-radius:5px; border-bottom-left-radius:5px; opacity: 1; box-shadow:-1px 1px 3px rgb(0,0,0,0.2)}
#scrollup i{position: absolute; top:7px; left:10px}
#scrollup:hover{color: var(--pink)}
#scrollup.notvisible{right:-60px; opacity: 0; transition:all 600ms ease-in-out}


#modal{position: fixed; width:100vw; height:100vh; max-height: 100vh; z-index: 1000; background: rgb(0,0,0,0.9); display: none; justify-content: center; align-items: center}
#modal > div{background:#fff; box-shadow:1px 1px 15px rgb(0,0,0,0.6); padding: 30px; aspect-ratio:4/3; width:100%; max-width: 900px; position: relative; border-radius:5px}
#modal > div .fas{position: absolute; top:5px; right: 5px; font-size:1.8rem; cursor:pointer; transition:all 300ms ease; color: #000}
#modal > div .fas:hover{opacity: 0.8; transform:rotate(90deg)}
#modal h2{font-size:2rem; text-align: center}


.gallery {
    max-width:1200px;
    margin:0px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 5px;
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition:all 300ms ease-in-out;
    cursor:pointer;
}
.gallery img:hover{
    transform:scale(1.1);
    box-shadow:3px 3px 5px rgb(0,0,0,0.7);
}

.lightbox-img{width:100%; aspect-ratio: 4/3; margin: 0 auto; position: relative; max-height: 100%}
.lightbox-img img{object-fit: contain; object-position: center; width:100%; height: 100% ;border-radius:4px}
.lightbox-caption{width: calc(100% - 20px); text-align: center; padding: 10px; position: absolute; left:10px; bottom: 15px; background: rgb(255,255,255,0.8); border-radius:5px; font-weight:700; color: #000; font-size: 1.4rem}



@media (max-width:900px) {
	.mainnav{display: none}
	.menu-main-menu-container{display: none}
	#mobnavbutton{display: block}
}
@media (max-width:800px) {

}

@media (max-width:700px) {

}

@media (max-width:600px) {
	.content{min-height: inherit}
	.alignright{float:none; max-width:100%; margin: 0 auto 50px; display: block}
}