* {
    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; background-color: var(--dark-grey); color: #fff}

div{box-sizing: border-box; position: relative}
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.2; 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; line-height: 1.2; padding: 0; margin: 50px 0; text-transform: uppercase; }
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}

input[type=submit]{}

audio{margin: 10px 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);
}

.red{color: red}
.fa-circle-exclamation{color: red !important; cursor: pointer}
.content{margin: 0 auto; min-height: calc(100vh - 350px); z-index: 1}

#mastheadwrap{background: #000; width:100%; z-index: 1; padding: 30px}
#masthead{display: flex; justify-content: center; align-items: center; margin: 0 auto; aspect-ratio:16/4; max-width: 900px}
#masthead > div{height: 100%}
#masthead > div img{object-fit: contain; object-position: center; width:100%; height: 100%}

.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: 7; display: none}
#mobnavbutton > div{margin: 0 auto 5px; transition:all 300ms ease; border:1px solid #fff}

/* Mobile nav */
#mobnav{width:100vw; height: 100vh; position:fixed; left:0; top:0; padding-top: 50px; background: #000; color: #fff;  z-index: 2; display: none}
#mobnav li > a{color:#fff; font-family: var(--font-heading)}
#mobnav ul{list-style: none; padding: 0; display: block; text-align: center; max-width: 350px; margin: 0 auto}
#mobnav ul >li{display: block; margin: 0; padding: 6px}
#mobnav ul > li > a{background: #fff; color: #000; text-transform: uppercase; font-weight:700; display: block; width:100%; padding: 5px; border-radius:4px; box-shadow:5px 5px 0 var(--purple); font-size:1.4rem}
#mobnav ul > li > a:hover{background: var(--pink) !important; color: #fff !important}
.mob-account-button{margin: 0 auto; display: block; max-width: 200px; font-size:1.4rem}


#mobnav ul ul{display: none}
#mobnav ul > li{cursor: pointer}
#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}

/* Main nav */
.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: center; 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 300ms 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{background-color: #14102c !important}
#mainnav .current-menu-item{}


/* Acount nav */
.account-nav{display: flex; justify-content: flex-end; align-items: center; column-gap: 5px}
.account-nav > a{display: block; background: var(--pink); color: #fff; border-radius:40px; padding: 5px 15px; text-decoration: none; font-size:0.8rem}
#ac-nav{position: absolute; top:10px; right:30px; z-index: 10}
#ac-nav-mob{justify-content: center; column-gap: 15px}
#ac-nav-mob a{font-size:1.2rem; padding: 5px 15px 7px}

.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:#333; color:#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; min-height:96vh; max-height: 96vh; overflow: auto}
#modal > div .fas{position: absolute; top:10px; right: 10px; font-size:1.8rem; cursor:pointer; transition:all 300ms ease; color: #fff}
#modal > div .fas:hover{opacity: 0.8; transform:rotate(90deg)}
#modal h2{font-size:2rem; text-align: center}
#modal hr{margin: 10px auto}

#modal label{display: block; color:var(--pink)}
#modal input{width:100%; margin: 4px 0 12px}
#modal input[type=date]{padding: 10px; max-width: 200px}
#modal select{padding: 8px; margin: 0 0 15px}
#modal input[type=submit]{padding: 10px; margin:0 0 30px}
#modal input[type=file]{padding: 10px; max-width: 300px; border:1px solid #666}

.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}

.account-menu{display: flex; justify-content: center; align-items: center; flex-wrap: wrap; grid-gap: 15px; margin: 0 auto 30px}
.account-menu .button{font-size:1.2rem}

.available-event-list{text-align: center; margin: 0 auto 30px; display: flex; align-content: center; align-items: center; grid-gap: 10px; flex-wrap: wrap}
.available-event-list > div{padding: 4px}
.available-event-list > div > a{border:1px solid #666; border-radius:100px; padding: 5px 20px; display: inline-block; text-decoration: none; font-size:1rem}

.available-event-list .fully-booked a{border-color: #333; color: #666 !important}

.dancer-flex{max-width: 800px; margin: 60px auto}

.dancer-flex > div:first-of-type{font-weight:700; margin-bottom: 30px; border:0}

.dancer-flex > div{display: flex; justify-content: space-between; align-items: center; column-gap: 15px; border-bottom:1px solid #666; padding-bottom: 5px; margin-bottom: 5px}
.dancer-flex > div > div{width:100%}
.dancer-flex > div > div:nth-of-type(2){max-width: 120px}
.dancer-flex > div > div:nth-of-type(3){max-width: 160px}
.dancer-flex > div > div:nth-of-type(4){max-width: 90px; text-align: right}


.dash-events-list{max-width: 900px; margin: 60px auto}
.dash-events-list .button{padding:4px 14px !important; font-size:0.9rem}
.dash-events-list > div{display: flex; justify-content: center; align-items: stretch; padding-bottom: 4px; margin-bottom: 4px; grid-gap: 10px;  border-bottom:1px solid #666}
.dash-events-list > div > div{width:100%}
.dash-events-list > div > div span{color: var(--pink); font-size:0.8rem}
.dash-events-list > div > div:nth-of-type(2){max-width:120px; text-align: center}
.dash-events-list > div > div:nth-of-type(3){max-width:260px}
.dash-events-list > div > div:nth-of-type(3) > div{margin-bottom: 15px}
.dash-events-list > div > div:nth-of-type(4){max-width:100px; text-align: center}
.dash-events-list > div > div:nth-of-type(5){max-width:90px; text-align: center}

.dash-events-list > div:first-of-type{margin-bottom: 15px; font-weight:700}
.dash-events-list a{color: #fff}
.dash-events-list a:hover{color: #666666 !important}


.dancer-checkbox-flex{display: flex; justify-content: flex-start; align-items: stretch; flex-wrap:wrap; grid-column-gap: 15px; grid-row-gap: 10px; margin: 10px auto 30px}
.dancer-checkbox-flex > div{width:100%; max-width:250px; display: flex; justify-content: center; align-items: center}
.dancer-checkbox-flex > div > div{width:100%}
.dancer-checkbox-flex > div > div:first-of-type{max-width: 40px}
.dancer-checkbox-flex input[type=checkbox]{width:22px; height: 22px; padding: 0; margin: 0 !important; transform:translate(0, 4px)}

.dance-var-flex{justify-content: center}
.dance-var-flex > div{width:100%; max-width: 50%}

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

}

@media (max-width:700px) {
	.dancer-flex > div{flex-direction: column}
	.dancer-flex > div:first-of-type{display: none}
	.dancer-flex > div > div{text-align: center; max-width: 100%; padding: 0 0 10px}
	
	.dash-events-list > div{flex-direction:column}
	.dash-events-list > div:first-of-type{display: none}
	.dash-events-list > div > div{text-align: center; max-width: 100%; grid-gap: 30px; padding: 10px 0}
}

@media (max-width:600px) {
	#modal > div{height: 100vh; max-height: 100vh}
	form{padding: 0 30px}
	.content{min-height: inherit}
	.alignright{float:none; max-width:100%; margin: 0 auto 50px; display: block}
	#mastheadwrap{padding: 15px}
	#ac-nav{display: none}
	.dance-var-flex{flex-direction: column}
	.dance-var-flex > div{max-width:100%}
	.dash-events-list > div{border:1px solid #666; margin-bottom: 30px}
	.dash-events-list > div > div{max-width:100% !important}
}