* ,*::before,*::after{
	font-weight: normal;
	color:var(--color);
	box-sizing:border-box;
}
body { 
	background: var(--bgpic);
	padding:0 0 20px 0;
	font-family: var(--font);
	margin:0;
	text-shadow: 0.2rem 0.2rem 0.2rem var(--bg);
}

#container { 	

margin: 0 10em ;border:0; padding:0; position:relative;}
#wrapper {

}

.record {text-align:left;



}


#copyright {
  font-size: .8rem;
  bottom: 2px;
  position: relative;
  display: block;
  text-align: center;
  padding: 1rem;
}
#copyright::before{content:"\A9  ";}
#copyright::after{content:var(--copyright);}

.fld-Title {font-size:1.5rem;}

.alert {color:red;}




/*Menu icon hidden on small screens because links are already visible*/
a#menu {display:none;}




/*THIS IS ACTIVE WHEN YOU TAP*/
.myactive {
	background-color:var(--panel2);
	background:var(--panel2);
	color:var(--color);
}





img {max-width:100%;}



/* CALENDAR STUFF*/
.calendarDetails {font-size:1.1rem; }
.dCalendar {display:none;}
.dDate {font-weight:bold;}
.dTitle{padding-top:10px;font-weight:bold;font-size:1.3rem;}
.dTime{}
.dVenue{}
.dAddress {}
.details a{ text-decoration:none;}
.dDesc{}



/*ANIMATION*/
@keyframes createBox {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}


@-webkit-keyframes slide {
    0% {top: 0%; left: 0%;}
    50% {top: 80%; left 50%;}
    100% {top: 0%; left: 90%;}
}



/*DROPDOWN*/
.dropdown {
	position: relative;
	display: inline-block;
}
.dropdown-content {
	display: none;
	position: absolute;
	/*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	*/
	z-index: 1;
	min-width: 80px;
	background-color:var(--panel);
	border:var(--border);
	border-radius:5px;
}
.dropdown-content a {
	padding: 1px 1px;
	text-decoration: none;
	display: block;
	min-width:90px;
	white-space:nowrap;
}
.dropdown-content a:hover {
	background-color:var(--bg);
}
.dropdown:hover .dropdown-content {
	display: block;
}
.dropdown:hover .dropbtn {
	background-color:var(--bg);
}


dt {background:var(--panel2);}


/**----NAVIGATION----*/
#navBar {text-transform:uppercase;font-size:1.2rem;}
#navBar:target  {font-size:2rem;}
#navBar:target {
  background-repeat:no-repeat;
  background-color: var(--bg);  
width: 100vw;
  display: grid;
  grid-template-columns: 1fr ;
  grid-auto-rows: min-content ;
  grid-gap: 0px;
  padding: 0px;
  border: none;
  border-bottom: none;
  box-shadow: none;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  overflow: hidden;
  z-index:90;
margin:0px;
  left: 500px;

  -webkit-animation: slideIn 1s forwards;
  -moz-animation: slideIn 1s forwards;
  animation: slideIn 1s forwards;

}


#navBar a.nav {
position:relative;
}
a.nav::before {

content:'';
position:absolute;
width:100%;
height:100%;
left:0;
border-bottom:.1rem solid var(--highlight);
transform: scale(0,1);
transition: transform ease-out 350ms;
}

a.nav:hover::before {
transform:scale(1,1);
}




/*FONTS*/


td,p {
	vertical-align:top;
}
a {	color:var(--color);}
a:hover,i:hover,a:focus,i:focus  {
color:var(--highlight) ;
transition: color 300ms ease-in; 
cursor:pointer;}
a:active, i:active {	color:var(--highlight);}















#navBar a , #photoNav a {
	border:none;
	display:inline-block;
	cursor:pointer;
	text-decoration:none;
	text-transform:uppercase;
	text-align:center;
	padding:0px .5vmax;
	margin:2px 2px;
	animation: createBox .25s;
}






#bio:target,#video:target,#calendar:target ,#booking:target ,#projects:target 
,#splash:target ,#pay:target ,#display:target {
	display:block;
	margin-top:10px;
}

/* FIXED MENU AND LOGIN BUTTONS*/

a#loginStatus{
	right:8px;
}
a#menu{
	left:3px;
}

a#menu, a#loginStatus {
	z-index:101;
	top:2px;
position:absolute;
}



.bannerR {position:absolute;right:0px;top:0px;}

/*END LOGIN BUTTONS*/




/*SOCIAL MEDIA BUTTONS*/
#socialMedia {
	float:none;
	clear:both;
	display:block;
	margin:30px 1px;
}
 #socialMedia a:hover {
	opacity:0.8;
	background: var(--highlight);
	color:var(--color);
}
#socialMedia a{
	background-image:url(/337/images/social.png);
	background-size:cover;
	background-repeat:no-repeat;
	background-color:transparent;
	height:60px;
	width:60px;
	position:relative;
	display:inline-block;
	padding:0px;
}
#socialMedia a.facebook {
	background-position:5px 0px;
}
#socialMedia a.instagram {
	background-position:-104px 0px;
}
#socialMedia a.twitter {
	background-position:-48px 0px;
}
#socialMedia a.youtube {
	background-position:-159px 0px;
}

#banner{
	position: -webkit-sticky;
	position: sticky;
	z-index:80;
	height:50px;
	width:100%;
	top:-50px;
	left:0px;
	margin-top:0;
}
.caption,.author ,.readMore{
	font-size:.8rem;
	font-style:italic;

}
.author::before {
	content:'by ';
	margin-left:20px;
}
.round,.circle {
	border-radius:50%;
	border:var(--border);
}

#natural {
	background:none;
	position:fixed;
	left:0px;
	bottom:5px;
	z-index:90;
}


.reflect{
	border:inset 1px #aaa;
	-webkit-box-reflect:below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.7, transparent), to(var(--color)));
	margin-right:10px;
	margin-bottom:100px;
}
.center,.video ,#navBar,#socialMedia {
	text-align:center;
}

i 
 {
 transition: background-color 1s ease;
}


.details, .event {
border:var(--border);
width:100%;
box-shadow:var(--shadow);

}


.event {
  background:var(--bannerpic);
  cursor: pointer;
  position: relative;
  min-width: 300px;
  max-width:100%;
  background-size:cover;
  background-repeat:no-repeat;
  height:20vmax;
  object-fit: cover;
  object-position: 0 0;
  z-index: 50;
  transition: background-color 1s ease;
  border-bottom: none;
  border-radius: var(--rad) var(--rad) 0  0;

}

.sssssevdent::after ,

.event::before {
  position: absolute;
  font-size: 1rem;
  opacity: .4;
background-color:var(--highlight);
width:100%;height:100%;
  border-radius: var(--rad) var(--rad) 0  0;
}


.date {
  font-size: 5vmax;
  afont-family: 'Notable';
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 89;
}

.index,.topleft {
  font-size: 3vmax;
  font-family: var(--font1),'Notable', courier;
  position: absolute;
  top: 0px;
  left: 0px;
 z-index: 189;
}

.band ,.topright{
  font-size: 3vmax;
  font-family: var(--font1),'Notable', courier;
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 89;
}
.venue {
  font-size: 5vmax;
  font-family: var(--font1);
  background: var(--panel2);
  background: rgba(50,50,50,.3);
  padding: 0px;
  position: absolute;
  display: grid;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: 0px;
  height: 100%;
  width: 100%;
  transition: background-color 1s ease;
  box-shadow:none;
  border-radius: var(--rad) var(--rad) 0  0;
overflow:hidden;
/*
text-shadow: 0 0 0.1rem var(--bg), 0 0 0.1rem var(--bg), 0 0 .1rem var(--bg);
   -webkit-text-stroke: 1px var(--bg);
   text-shadow:
       3px 3px 1 var(--bg),
     -1px -1px 1 var(--bg),  
      1px -1px 1 var(--bg),
      -1px 1px 1 var(--bg),
       1px 1px 1 var(--bg);

*/




	}

.details {
	padding-bottom:1rem;
  border-top: none;
  border-radius: 0 0 var(--rad)  var(--rad);
  font-family: var(--font1);
  font-size: 1.2rem;
  position: relative;
  top: 0px;
  height: auto;
  margin-top: 0;
  margin-bottom:3vh;
  background-color: var(--bg);
  z-index: 50;
  text-align:left;
/*animation: createBox .25s;*/
  min-height:5vmax;
}


@-webkit-keyframes slideIn {
  0% {
    transform: translateX(-100vw);
  }
  100% {
    transform: translateX(0);
  }
}



.back {margin:2rem;}



#Blog .band ,#Products .band,#Calendar .date {
 font-size:2.5rem;
 }
#Blog .fieldname {
display:none;
}

/*
.dTix:before { content:"Get Tickets";}*/

.dTix {float:right;padding:5px;border:outset 1px;text-transform:uppercase;}
.dTx {padding:5px 0px;}




.record {display:block;clear:both;}

.detailImage {
max-height:200px;
  max-width: 200px;
  float: left;
  margin-right: 15px;
}

#menuWrap {
  text-align: center;
padding-bottom:10px;}


#navBar:target a {
	text-align: right;
	font-size: 7vh;
}

















iframe
{
width:100%;
height:50vmax;
	}




img.gallery {
	width:100%;
	margin-bottom:25%;
}


/*////PHOTOS PAGE/////*/
.photoTile {text-align:center;}
.largePhoto {
	padding-top:2rem;
	border-top:outset 1px;
}
.photoTitle {
	text-align:center;
	}
.photoCaption {
	font-style:italic;
}
.largePhoto img {max-width:100%;}

/*/////END PHOTOS/////*/


.proTip {
	font-size:.7rem;
	text-align:center;
	background:var(--highlight);
	color:var(--color);
	padding:5px;
	margin:25px 0px;
}


.show {
  display: block;
}

.hidden {
  display: none;
}



/*PHOTOS PAGE*/

.thumbGrid{
  display: grid;
  grid-gap: 0;
  background: var(--panel2);
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.aphotoCaption {display:none;}

.thumbGrid .record  h2 {
	font-size:.8rem;font-weight:normal;text-align:center;
}

.tile {
  position:relative;
  border: var(--border);
  height: 0;
  padding-bottom: 60%;
  border-radius:var(--rad);
  overflow:hidden;
}
.thumbGrid .tile img  {
object-fit:contain;
}


.tile .btn-delete {
position:absolute;
top:0;
left:0;
background:red;
color:#fff;
opacity:.4;
transition: opacity 1s;
}
.tile .btn-delete i {color:white;}

.tile .btn-delete:hover {
color:#fff;
opacity:1;
transition:opacity 1s;
}

#mkfolder { background:transparent; color:var(--color);}

/*PHOTOS PAGE*/














/*----------------BEGIN IOS---------------*/
/*//////////////////IOS///////////////////////////////////////////*/
/*===========iphone 678=========================##=and (max-device-width:667px)=====*/

@media only screen and (min-width : 300px) and (max-width : 667px) {

  body {
	font-size:1.1rem;
    padding-top: 46px;margin:0;
}
.thumbGrid {  grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
}
#container  {margin:0 0 ;}

.tile {padding-bottom:0;height:100%;}


  #menuWrap {
    display: block;
    width: 100vw;
    height: 45px;
    background: var(--bgpic);

    position: fixed;
    top:0px;
    margin: 0px;
    z-index:55;
    text-align: center;
    font-size: 1.5rem;
box-shadow:var(--shadow); 

 }
  .xdetailImage {
    min-width: 100%;
    float: left;
    margin-right: 15px;
   margin-top: 1rem;
    margin-bottom: 1rem;
    border-radius: .5rem;
 max-width:20vmax;
  }
.details, .event {
  width:99%;
}


  a#menu:hover,a#menu:active,#fontUp:hover,#fontDown:hover,i:hover {
    background: var(--panel2);
  }

.textarea ,#video,#bio {
		padding:1px;
	}
#navBar {
        position: fixed;
	display:none;
        transform: translate3d(-150vw, 0, 0);
        transition: transform .3s cubic-bezier(0, .52, 0, 1);
        width:100vw;
	height:100vh;
	}
#navBar:target {
	top: 0;
        left: 0;   
        width: 100vw;
        height: 100vh;
	z-index:299;
        transform: translate3d(0vw, 0, 0);
       }

	
a#menu , a#loginStatus {
	display:block;
	z-index:101;
}
dd {
		font-size:1.1rem;
		top:50px;
	}


}

/* covers landscape iphone 6*/
@media only screen and (min-width : 500px) {

 #navBar:target { 
	grid-auto-rows:auto;}

}
/*END iPhones*/

/*==========ipad MINI=====================================*/
@media only screen and (min-width : 668px)and (max-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) {
	.no {
		font-size:1.4rem;
	}
	#navBar>a , #photoNav>a,.dropdown>a {
		min-width:55px;
	}

#container {margin:0 0 ;}
}
/*END 667-1024*/

/* =================LARGER THAN 1024==================================*/
@media (min-width:1024px) {
.thumbGrid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));


}

	#navBar>a , #photoNav>a,.dropdown>a {
		min-width:70px;
	}

}

/*END 1024*/
/*END IOS MEDIA QUERIES*/
	


.fade-out {
  animation: fadeOut ease 8s;
  -webkit-animation: fadeOut ease 8s;
  -moz-animation: fadeOut ease 8s;
  -o-animation: fadeOut ease 8s;
  -ms-animation: fadeOut ease 8s;
}
@keyframes fadeOut {
  0% {
    opacity:1;
    z-index:999;
  }
  100% {
    opacity:0;
    z-index:0;
  }
}

@-moz-keyframes fadeOut {
  0% {
    opacity:1;
    z-index:999;
  }
  100% {
    opacity:0;
    z-index:0;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity:1;
    z-index:999;
  }
  100% {
    opacity:0;
    z-index:0;
  }
}

@-o-keyframes fadeOut {
  0% {
    opacity:1;
    z-index:999;
  }
  100% {
    opacity:0;
    z-index:0;
  }
}

@-ms-keyframes fadeOut {
  0% {
    opacity:1;
    z-index:999;
  }
  100% {
    opacity:0;
    z-index:0;
}
}



.fade-in {
  animation: fadeIn ease 10s;
  -webkit-animation: fadeIn ease 10s;
  -moz-animation: fadeIn ease 10s;
  -o-animation: fadeIn ease 10s;
  -ms-animation: fadeIn ease 10s;
}
@keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-moz-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-o-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

@-ms-keyframes fadeIn {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
}
}







/*

.artsplace {
	background-image:url('../images/venues/ArtsPlace.jpg'); 
}
.theburl, .burl {
	background-image:url('../images/venues/theburl.jpg'); 
}

.gd {
  background-image: url('https://leeowen.com/337/images/WallOfSound.jpg');
  background-position: center 75%;
        background-size:150%;
}

.gs {
	background-image:url('../images/venues/SundayFractalWeb.jpg');
	background-position:center center; 
}

.heritagehilltheater,.heritagehillstheater {
	background-image:url('../images/venues/heritagehillstheater.jpg'); 
}
.headliners, .headlinersmusichall {
	background-image:url('../images/venues/headliners.jpg'); 
}

.mastermusiciansfestival {
	background-image:url('../images/venues/MMF.jpg'); 
}


.poppymountainroad {
	background-image:url('../images/venues/poppymountainroad.png');
}
.zanzabar, .zanzibar {
	background-image:url('../images/venues/zanzabar.jpg');
}
*/







@-webkit-keyframes fadeinout {
  0%{ opacity: 0;z-index:999; }
  10% { opacity: 1;z-index:999; }
  90% { opacity: 1;z-index:999; }
100% { opacity: 0; z-index:0;visibility:hidden;}

}

@keyframes fadeinout {

  0%{ opacity: 0;z-index:999; }
  10% { opacity: 1;z-index:999; }
  90% { opacity: 1;z-index:999; }
100% { opacity: 0; z-index:0; visibility:hidden;}


}


.infofade {
  background:var(--color);
  color:var(--bg);
  border:1px outset;
  border-radius:var(--rad);
text-shadow:1px 1px 1px #ccc;
padding:1rem;
position:absolute;
top:30%;
left:50%;
transform: translate(-50%, -50%);
z-index:999;
   -webkit-animation: fadeinout 1.5s linear forwards;
    animation: fadeinout 1.5s linear forwards;
font-family: Arial, Helvetica, sans-serif;
width:80vw;
}

.infowrap {
content:'';
position:fixed;
height:100vh;
width:100vw;
top:0;
left:0;
background: rgba(50,50,50,.9);

  z-index:999;
   -webkit-animation: fadeinout 1.7s linear forwards;
    animation: fadeinout 1.7s linear forwards;
padding:0px;margin:0px;
}



.center a.btn {padding:4px 10px;margin:3px;}

.btn-small {font-size:.6em;}