/* General ------------------------------------------------------------------ */

:root
  {--darkgrey: #808080;
   --green: #bab823;
   --darkgreen: #898836;
	--black: 0, 0, 0;
	--white: 255, 255, 255	}

* {outline: 0;
	box-sizing: border-box}
	
/* Main elements ------------------------------------------------------------ */
	
html 
  {font-size: 62.5%} 

body 
  {font-size: 1.6em;
   line-height: 1.4;
   font-weight: 400;
   font-family: arial;
   color: grey; 
   margin: 0;
   padding: 0;
   height: auto;
	overflow-y: scroll;
	margin-bottom: 40px}

div.wrapper
  {position: absolute;
   width: 1200px;
   max-width: 1200px;
	min-height: 100vh;
   margin-left: -600px;
   left: 50%;
	padding-bottom: 30px} 	
  	
div.image-block
  {position: relative;
   display: flex;
   width: 100%;
   height: 100%;
   overflow: hidden}

div.row
  {clear: both}
	
div.text, div.text-block
  {display: flow-root;
	margin: 0;
   padding: 10px 70px}

div.flyer 
  {float: left;
   width: 45%;
	margin-right: 20px;
   perspective: 4000px}

div.flipflyer 
  {position: absolute;
   top: 0;
	left: 0;
   width: 100%;
   height: 100%;
   transition: transform 1s;
   transform-style: preserve-3d;
   cursor: pointer}

div.flipflyer.is-flipped 
  {transform: rotateY(180deg)}

div.flipflyer-front, div.flipflyer-back
  {position: absolute;
   width: 100%;
   height: 100%;
   backface-visibility: hidden}

div.flipflyer-back 
  {transform: rotateY(180deg)}

div.concert
  {float: left;
   width: 50%}  	
	
@media only screen and (max-width: 1200px) 
{   
   div.wrapper 
     {position: relative; 
      margin: 0 auto;
		width: auto;
      top: auto;
      left: auto} 
}		

@media only screen and (max-width: 820px) 
{
	div.text-block
	  {display: flex;
	   flex-direction: column}

	div.title
	  {order: 1}
	
	div.flyer
     {order: 2;
	   margin-top: 15px;
		width: 75%} 
		
	div.concert
	  {order: 3;
	   width: 100%;
	   margin-bottom: 0}
}

@media only screen and (max-width: 600px) 
{
	div.text, div.text-block 
     {padding: 10px 30px}

	div.flyer
     {width: 100%} 
}	

/* Text elements ------------------------------------------------------------ */

h1{color: var(--green);
	margin: 20px 0;
	font-family: Georgia, 'Times New Roman', Serif;
	font-weight: normal;
	font-size: 2.4em}
	
h1.mid
  {margin-top: 0}	
	
h2{margin: 0}

span.h3
  {font-weight: bold}

p.review
  {padding: 10px 40px 0 40px} 	
  
.alert
  {color: var(--green)}

a.textlink
  {color: var(--green);
	text-decoration: none} 

@media only screen and (max-width: 820px) 
{
	h1{margin-bottom: 0}
}

@media (hover: hover) and (pointer: fine)
{
	a.textlink:hover
     {color: var(--darkgreen);
	   transition: 0.5s} 
}

/* Images ------------------------------------------------------------------- */

img.logo, img.menulogo
  {position: relative;
   width: 250px;
	margin: 20px 0 10px 0}  
	
img.menulogo
  {margin: 30px 0 70px 70px} 

img.header
  {max-height: 100%;
   max-width: 100%;  
   flex: 0 0 100%;
   transition: all 0.5s;
	aspect-ratio: 120 / 58}	

img.flyer
  {width: 100%}
  
@media only screen and (max-width: 820px) 
{
	img.header
	  {aspect-ratio: 3.2 / 2} 
}

@media only screen and (max-width: 600px) 
{
	img.menulogo
	  {margin-left: 30px}
}		  
  
@media only screen and (max-width: 400px) 
{
	img.logo, img.menulogo
	  {width: 200px} 
}	

@media only screen and (max-width: 350px) 
{
	img.logo, img.menulogo
	  {width: 150px} 
}		

/* Menu --------------------------------------------------------------------- */

div.sidenav	
  {height: 100%;
   z-index: 3;
	width: 0px;
	position: fixed;
	top: 0;
	left: 0;
	transition: 0.5s;
   filter: drop-shadow(12px 12px 8px rgba(var(--black), 0.2))}
	
div.sidenav_content	
  {font-family: Georgia, 'Times New Roman', Serif;
   font-size: 1.8em;
   height: 100%;
	background-color: white;
	opacity: 95%;
	overflow-x: hidden;
	clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%)}

.navlink, .navlinkselected 
  {margin: 0 0 15px 75px;
   text-decoration: none;
   color: var(--darkgrey);
   display: block;
   transition: 0.5s}
	
.navlinkselected
  {color: var(--green);
	cursor: default}
	
.navlink:hover
  {color: var(--darkgreen);
	cursor: pointer}	
	
div.navmain
   {}

div.navsub
   {}	
	 
div.openlock, div.openlockselected, div.closedlock, div.closedlockselected
  {z-index: 5; 
   margin: 25px 0 0 75px; 
	width: 35px; 
	height: 42px; 
	transform: rotate(-15deg);
	background-image: url('../Images/icon_OpenLock.gif')}

div.openlockselected
  {background-image: url('../Images/icon_OpenLockSelected.gif')}	
  
div.closedlock
  {background-image: url('../Images/icon_ClosedLock.gif')}	
  
div.closedlockselected
  {background-image: url('../Images/icon_ClosedLockSelected.gif')}

div.openlock:hover, div.closedlock:hover
  {background-position: 35px 0}	  
  
@media only screen and (min-width: 1200px) 
{
   div.sidenav
	  {margin: 0 calc(50% - 600px)}
}		

@media only screen and (max-width: 600px) 
{
	div.sidenav_content
	  {clip-path: polygon(0 0, 80% 0, 50% 100%, 0 100%)}
	
	.navlink, .navlinkselected, 
	div.openlock, div.closedlock,
	div.openlockselected, div.closedlockselected
	  {margin-left: 35px}
}

/* Menu button -------------------------------------------------------------- */

div.menubutton 
  {position: fixed;
   width: 50px;
	height: 50px;
	margin: 60px 80px;
   top: 0px;
   right: 0px;
	z-index: 5;
	box-shadow: 4px 4px 6px rgba(var(--black), 0.09), 
					4px -4px 6px rgba(var(--black), 0.09),
					-4px 4px 6px rgba(var(--black), 0.09), 
					-4px -4px 6px rgba(var(--black), 0.09);
	transform: rotate(-15deg)}  

div.menubutton b 
  {position: fixed;
   background-color: var(--green);
   cursor: pointer;
   height: 50px;
	width: 50px;
   padding: 5px;
	margin: 0;
	transition: 0.5s;
   transition: background-color .5s}

div.menubutton  img
  {max-height: 100%;
   max-width: 100%;  
   flex: 0 0 100%;
   transition: all 0.5s}	

@media only screen and (min-width: 1200px) 
{
   div.menubutton, div.menutbutton b
	  {margin: 50px calc(50% - 520px)}
}	

@media only screen and (max-width: 600px) 
{
	div.menubutton 
     {margin: 60px 40px}
}	

@media only screen and (max-width: 400px) 
{
	div.menubutton 
     {width: 40px;
	   height: 40px;
		margin: 55px 40px}
		
	div.menubutton b
     {width: 40px;
	   height: 40px}
}	

@media only screen and (max-width: 350px) 
{
	div.menubutton 
     {width: 40px;
	   height: 40px;
		margin: 45px 40px}
		
	div.menubutton b
     {width: 40px;
	   height: 40px}
}
	
@media (hover: hover) and (pointer: fine)
{
	div.menubutton b:hover 
	  {background-color: var(--darkgreen)}
}
	
/* Log in form -------------------------------------------------------------- */

#username
  {display: none} 

input
  {font: inherit;
   display: inline-block;
   width: 100%;
   margin: 0;
   padding: 0.6em;
   color: #555555;
   background-color: white;
   border: 1px solid #E8E8E8;
   box-shadow: none;
   box-sizing: border-box;
   line-height: normal}  

input[type="submit"]
  {width: 14.75em;
   background-color: #E8E8E8;
   cursor: pointer}  
	
input[type="submit"]:focus
  {color: white;
   background-color: #00B400} 	

@media (hover: hover) and (pointer: fine)
{	
	input:hover
	  {border-color: #BBBBBB;
		outline: 0}
			
	input[type="submit"]:hover
	  {color: white;
		background-color: var(--green)}  
}