/* L */

@media only screen and ( min-width: 1024px ) {

html, body {
		scroll-behavior: smooth;
		background-color: transparent; /* #fffff4 */
		
}

#header {
		position: fixed;
		margin-left: 26px; /*30px**/
		top: 23px; /*30px*/
		font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 70pt; /* 80 70 60 */
		background-color: transparent;
}

#header2 {
		position: fixed;
		right: 34px;
		top: 37px; /*41*/
		font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 24pt; /*18*/
		background-color: transparent;
}

#header3 {
		position: fixed;
		right: 34px;
		bottom: 30px; /*41*/
		font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 9pt; /*24*/
		background-color: transparent;
}

#page {
		margin: 0 auto;
        max-width: 70%;
	    /*height: 2000px;*/
        /*position: relative;*/
        min-height: 100%;
        margin-top: 0px;
		background-color: transparent;
}

#menuToggle {
		transform: translate(-110%, 0);
}

.nav {
		max-width: 650px;
		font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 24pt;
		margin-left: auto;
    	margin-right: auto;      
		margin-bottom: 100px; /* 80px 150px 0px */
		background-color: transparent;
}
	
.division {
		padding-top: 5px;
        padding-bottom: 20px;
        background-color: transparent;
}

img {
		max-width: 1000px; /* 100% */
	    max-height: auto;
		display: block;			   
		margin-left: auto;
    	margin-right: auto;    
}

.image {
		max-width: 1000px; 
	    max-height: auto;
		display: block;			   
		margin-left: auto;
    	margin-right: auto;
}

.slider {     
        max-width: 1000px; 
	    max-height: auto;
		display: block;			   
		margin-left: auto;
    	margin-right: auto;
		background-color: ;
}

.caption {     
        font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 8pt;
        line-height: 2em;
		margin-left: 0px;;
}
	
.text {		 
	  	max-width: 650px;
		display: block; 	
		text-align: justify;  /*left*/
		margin-left: auto;
    	margin-right: auto;
        margin-bottom: 120px;
		margin-top: 0px;
        font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 12pt; /* 10pt */
        line-height: 1.4em;
		hyphens: auto;
		columns: 1;
		column-gap: 20px; /* 30px */
		background-color:  ;
}

.text_intro {		 
	  	max-width: 600px;
		display: block; 	
		text-align: left;  /*left*/
		margin-left: auto;
    	margin-right: auto;
        margin-bottom: 40px;
        font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 12pt;
        line-height: 1.4em;
}

.text_about {		 
	  	max-width: 600px;
		display: block; 	
		text-align: justify;  /*left*/
		margin-left: auto;
    	margin-right: auto;
        margin-bottom: 10px;
        font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 12pt; /* 12pt */
        line-height: 1.4em;
		hyphens: auto;
}

.text_legal {
		max-width: 650px;
		display: block;
		text-align: justify;  /*left*/		
		margin-left: auto;
    	margin-right: auto;
		margin-top: 50px; /* 47px */
		margin-bottom: 40px;
        font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 10pt;
		line-height: 1.4em;
		hyphens: auto;
}

.text_workshop_1sp {
		max-width: 1000px;
		display: block;
		text-align: justify;  /*left*/		
		margin-left: auto;
    	margin-right: auto;
		margin-top: 40px; /* 47px */
		margin-bottom: 20px;
        font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 12pt;
		line-height: 1.4em;
		hyphens: auto;
}

.text_workshop_2sp {
		max-width: 1000px;
		column-count: 2;
		column-gap: 30px;
		display: block;
		text-align: justify;  /*left*/		
		margin-left: auto;
    	margin-right: auto;
		margin-top: 10px; /* 47px */
		margin-bottom: 20px;
        font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 12pt;
		line-height: 1.4em;
		hyphens: auto;
}

table {
		text-align: left;  /* justify */
		margin-top: 100px;
		margin-bottom: 100px; /* 400 */
} 
	
th {
		font-weight: normal;
}

h {
	   	font-weight: bold;
}

hr {	
		border: 0px;
		border-top: 1px;
		border-style: solid; /* dashed */
		color: black; /* #FF00FF */
		display: block;			   
		margin-left: auto;
    	margin-right: auto;
		margin-top: 0px; /* 20 50 30 */
		margin-bottom: 50px; /* 80 50 100 */
        max-width: 1000px;      
}



a {color: black; text-decoration: line-through 0.08em;} /* 0.15em 0.08em */ /* 0.06em   0.11em */
a:link {color: black;}
a:hover {text-decoration:none;}
a:visited {color: black;}

a.extern {color: black; text-decoration: none; border-bottom: solid 1px;}
a.extern:link {color: black;}
a.extern:hover {text-decoration: none; border-bottom: none;}
a.extern:active {text-decoration: none; border-bottom: none;}
a.extern:visited {color: black;}

a.intern {color: black; text-decoration: none;}
a.intern:link {color: black;}
a.intern:hover {text-decoration: none; border-bottom: none;}
a.intern:active {text-decoration: none; border-bottom: none;}
a.intern:visited {color: black;}

a.button {
	/*display: float; /* block */
	float: left;
	width: 289px; /* 264px */
	margin: 1px;
	text-align: center;
	color: white; /* #FF00FF */
	text-decoration: none; 
	background-color: black; /* #f5f5f5  #ffffe6  #ffe6ff  #F0F0F0  #fffff4 */
	font-size: 12pt;  
	line-height : 10px;
	padding: 16px;
	border: 1px solid black ;
	border-radius: 10px; /* 24px */
	}	
a.button:link {color: white;}
a.button:hover {color: black; background-color: white; border: 1px solid black;} 
a.button:active {text-decoration: none; }





/* aufklappender Text...*/
			
			
			details {
				margin-top: 0px;
			}
			
			summary {
				margin-bottom: 30px;
			}
			
			details > summary {
				display: flex; /* flex */
				justify-content: center	; /* flex-start flex-end center space-between */
				width: 650px; 
				cursor: pointer;
				outline: 0;
				background-color: ;
				
				/* transform: translate(0px,-20px); */
				
			}
			
			details > summary::after {
				content: 'text';
				font-size: 12pt; /* 10 */
				color: black;
				text-decoration: underline;
				/* transform: translate(10px,-30px); */
				
			}
			
			details > summary::-webkit-details-marker {
				display: none;
			}





/* ab hier für sss...*/

.sss {
	    height: 0;
	    margin: 0; 
	    padding: 0;
	    position: relative;
	    display: block;
	    overflow: hidden;
        margin-bottom: 0px;
}

.ssslide {
	    width: 100%;
	    margin: 0;
	    padding: 0;
	    position: absolute;
	    top: 0;
	    left: 0;
	    display: none;
	    overflow: hidden;
}

.ssslide img {
	    max-width: 100%;
	    height: auto;
	    margin: 0;
	    padding: 0;
	    position: relative;
	    display: block;
}

.sssnext, .sssprev {
	    width: 50%; /* 25px */
	    height: 96%;
	    margin: 0;
	    position: absolute;
	    top: 0;	
}

.sssprev {
	    left: 0%;
		opacity: 0;
		transition: .2s ease-in-out opacity;
}

.sssnext {
	    right: 0%;
		opacity: 0;
		transition: .2s ease-in-out opacity;
}

.sssprev:hover {
	    cursor: url('content/arrow_l_b.png'), default; /* pointer */
		/* background: url('content/arrow_l_b.png') no-repeat;
		background-position: 0% 47%;
		opacity: 1; */
	
}

.sssnext:hover {
	    cursor: url('content/arrow_r_b.png'), default; /* pointer */
		/* background: url('content/arrow_r_b.png') no-repeat;
		background-position: 100% 47%;
		opacity: 1; */
}


}








/* M */

@media only screen and ( min-width: 768px ) and ( max-width: 1023px ) {
	
	html, body {
		scroll-behavior: smooth;
		background-color: transparent; /* #fffff4 */
		font-family: 'UniversLTPro-55Roman', sans-serif;
	}

	#header {	
		position: fixed;
		margin-left: 22px;
		top: 50px;
		font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 120pt;
		background-color: transparent;
	}
	
	#header2 {
		position: fixed;
		right: 34px;
		top: 37px;
		font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 0pt;
		background-color: transparent;
	}

	#header3 {
		position: fixed;
		right: 34px;
		bottom: 30px;
		font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 0pt;
		background-color: transparent;
	}
	
	#page {
		margin: 0 auto;
		margin-left: 36px;
		margin-right: 36px;
        min-height: 100%;
        margin-top: 0px;
		background-color: transparent;
	}

	img {
		max-width: 1000px;
	    max-height: auto;
		display: block;			   
		margin-left: auto;
    	margin-right: auto;   
	}
	
	.slider {     
        max-width: 1000px;
	    max-height: auto;
		display: block;			   
		margin-left: auto;
    	margin-right: auto;  
}

	.image {
		max-width: 1000px;
	    max-height: auto;
		display: block;			   
		margin-left: auto;
    	margin-right: auto;  
	}
	
	.caption {     
        font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 20pt;
        line-height: 2em;
	}
	
	.text {		 
	  	max-width: 100%;
		display: block; 	
		text-align: left;
		margin-left: auto;
    	margin-right: auto;
        margin-bottom: 50px;
        font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 30pt; /* 24pt */	
        line-height: 1.4em;
	}
	
	.text_legal {
		max-width: 100%;
		display: block;
		text-align: left;	
		margin-left: auto;
    	margin-right: auto;
		margin-top: 460px;
		margin-bottom: 40px;
        font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 24pt;
		line-height: 1.4em;		
	}
	
	.text_workshop_1sp {
		max-width: 1000px;
		display: block;
		text-align: justify;  /*left*/		
		margin-left: auto;
    	margin-right: auto;
		margin-top: 90px; /* 47px */
		margin-bottom: 40px;
        font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 40pt;
		line-height: 1.4em;
		hyphens: auto;
}

.text_workshop_2sp {
		max-width: 1000px;
		column-count: 1;
		column-gap: 30px;
		display: block;
		text-align: left;  /*left*/		
		margin-left: auto;
    	margin-right: auto;
		margin-top: 30px; /* 47px */
		margin-bottom: 40px;
        font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 30pt;
		line-height: 1.4em;
		hyphens: auto;
}

	hr {	
		border: 0px;
		border-top: 1px;
		border-style: dashed; /* dashed solid */
		color: black; /* #FF00FF */
		display: block;			   
		margin-left: auto;
    	margin-right: auto;
		margin-top: 30px;
		margin-bottom: 100px;
        max-width: 1000px;      
	}

.nav {
		font-size: 40pt; /* 60pt  dashed */
		max-width: 200px;
		margin-left: 0px;
    	margin-right: auto;
		margin-bottom: 80px;
		color: black; /* #3232F0 */
		background-color: transparent;
}

.division {
		padding-top: 380px;
        padding-bottom: 20px;
        background-color: transparent;
}

table {
		text-align: left;  /* justify */
		margin-top: 100px;
		margin-bottom: 100px;
}

tr {
		height: 150%; /* 130px */
}

th {
		font-weight: normal;
}

#spalte1 		{ width: 200px; }




a 	{
	color: #3232F0; 
	text-decoration: line-through 0.11em;
	text-decoration-line: line-through 0.11em;
	-webkit-text-decoration: line-through;
	}
a:link {color: black;}
a:hover {text-decoration: none;}
a:visited {color: black;}

a.extern {color: black; text-decoration: none; border-bottom: solid 1px;}
a.extern:link {color: black;}
a.extern:hover {text-decoration: none; border-bottom: none;}
a.extern:active {text-decoration: none; border-bottom: none;}
a.extern:visited {color: black;}

a.intern {color: black; text-decoration: none;}
a.intern:link {color: black;}
a.intern:hover {text-decoration: none; border-bottom: none;}
a.intern:active {text-decoration: none; border-bottom: none;}
a.intern:visited {color: black;}

a.button {
	max-width: 100%;
	height: auto;
	display: block;			   
	margin-left: auto;
    margin-right: auto; 
	margin-bottom: 20px;
	text-align: center;
	color: white; /* #FF00FF */
	text-decoration: none; 
	background-color: black; /* #f5f5f5  #ffffe6  #ffe6ff  #F0F0F0  #fffff4 */
	font-size: 30pt;  
	line-height : 70px;
	padding: 16px;
	border: 1px solid black ;
	border-radius: 30px; /* 24px */
	}	
a.button:link {color: white;}
a.button:hover {color: black; background-color: white; border: 1px solid black;} 
a.button:active {text-decoration: none; }





/* aufklappender Text...*/
			
			details > summary {
				display: flex;
				justify-content: center; /* space-between */
				cursor: pointer;
				outline: 0;
			}
			
			summary {
				margin-bottom: 30px;
			}
			
			details > summary::after {
				content: 'text';
				font-size: 25pt;
				color: black;
				text-decoration: underline;
				transform: translate(0px,-50px);
			}
			
			details > summary::-webkit-details-marker {
				display: none;
			}






.sss {
	    height: 0;
	    margin: 0; 
	    padding: 0;
	    position: relative;
	    display: block;
	    overflow: hidden;
        margin-bottom: 20px;
}

.ssslide {
	    width: 100%;
	    margin: 0;
	    padding: 0;
	    position: absolute;
	    top: 0;
	    left: 0;
	    display: none;
	    overflow: hidden;
}

.ssslide img {
	    max-width: 100%;
	    height: auto;
	    margin: 0;
	    padding: 0;
	    position: relative;
	    display: block;
}

.sssnext, .sssprev {
	    width: 50%; /* 25px */
	    height: 100%;
	    margin: 0;
	    position: absolute;
	    top: 0;
		
}

.sssprev {
	    left: 1%;
		opacity: 0;
		transition: .2s ease-in-out opacity;
}

.sssnext {
	    right: 1%;
		opacity: 0;
		transition: .2s ease-in-out opacity;
}

.sssprev:hover {
	    cursor: url('content/arrow_l_b.png'), default; /* pointer */
		/* background: url('content/arrow_l_b.png') no-repeat;
		background-position: 0% 47%;
		opacity: 1; */
	
}

.sssnext:hover {
	    cursor: url('content/arrow_r_b.png'), default; /* pointer */
		/* background: url('content/arrow_r_b.png') no-repeat;
		background-position: 100% 47%;
		opacity: 1; */
}





/* ab hier für Hamburger Navigation Menu...*/



#menuToggle
{
  display: block;
  position: fixed;
  top: 90px;
  right: 45px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{


}

#menuToggle a > .active {
  text-decoration: none;
}

#menuToggle input
{
  display: block;
  width: 80px;
  height: 60px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 60px;
  height: 6px;
  margin-bottom: 12px;
  position: relative;
  background: black;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px; 
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: black;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#menu
{
  position: fixed;
  right: 60px;
  top: 160px;
  background: transparent;
  list-style-type: none;
  -webkit-font-smoothing: antialiased; 
  transform-origin: 0% 0%;
  transform: translate(120%, 0); 
  transition: transform 0.1s cubic-bezier(0.77,0.2,0.05,1.0); */
  /* transition: opacity 0.5s; */
}

#menu li
{
  padding: 10px 0;
  font-size: 36pt;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  /* opacity: 1; */
  transform: none; 
}






}






/* S */

@media only screen and ( max-width: 767px ) {

		html, body {
		scroll-behavior: smooth;
		background-color: transparent; /* #fffff4 */
		font-family: 'UniversLTPro-55Roman', sans-serif;
	}

	#header {	
		position: fixed;
		margin-left: 24px;
		top: 50px;
		font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 120pt;
		background-color: transparent;
	}
	
	#header2 {
		position: fixed;
		right: 34px;
		top: 37px;
		font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 0pt;
		background-color: transparent;
	}

	#header3 {
		position: fixed;
		right: 34px;
		bottom: 30px;
		font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 0pt;
		background-color: transparent;
	}
	
	#page {
		margin: 0 auto;
		margin-left: 36px;
		margin-right: 36px;
        min-height: 100%;
        margin-top: 0px;
		background-color: transparent;
	}

	img {
		max-width: 1000px;
	    max-height: auto;
		display: block;			   
		margin-left: auto;
    	margin-right: auto;     
	}

	.image {
		max-width: 1000px;
	    max-height: auto;
		display: block;			   
		margin-left: auto;
    	margin-right: auto;  
	}
	
	.slider {     
        max-width: 1000px;
	    max-height: auto;
		display: block;			   
		margin-left: auto;
    	margin-right: auto;  
}
	
	.caption {     
        font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 18pt;
        line-height: 2em;
	}
	
	.text {		 
	  	max-width: 100%;
		display: block; 	
		text-align: left;
		margin-left: auto;
    	margin-right: auto;
        margin-bottom: 50px;
        font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 30pt; /* 24pt */
        line-height: 1.4em;
	}
	
	.text_legal {
		max-width: 100%;
		display: block;
		text-align: justify;	
		margin-left: auto;
    	margin-right: auto;
		margin-top: 50px;
		margin-bottom: 40px;
        font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 8pt;
		line-height: 1.4em;		
	}
	
.text_workshop_1sp {
		max-width: 1000px;
		display: block;
		text-align: justify;  /*left*/		
		margin-left: auto;
    	margin-right: auto;
		margin-top: 90px; /* 47px */
		margin-bottom: 40px;
        font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 40pt;
		line-height: 1.4em;
		hyphens: auto;
}

.text_workshop_2sp {
		max-width: 1000px;
		column-count: 1;
		column-gap: 30px;
		display: block;
		text-align: left;  /*left*/		
		margin-left: auto;
    	margin-right: auto;
		margin-top: 30px; /* 47px */
		margin-bottom: 40px;
        font-family: 'UniversLTPro-55Roman', sans-serif;
		font-size: 30pt;
		line-height: 1.4em;
		hyphens: auto;
}

	hr {	
		border: 0px;
		border-top: 1px;
		border-style: solid; /* dashed */
		color: black; /* #FF00FF */
		display: block;			   
		margin-left: auto;
    	margin-right: auto;
		margin-top: 30px;
		margin-bottom: 100px;
        max-width: 1000px;      
	}

.nav {
		font-size: 50pt; /* dashed */
		max-width: 200px;
		margin-left: 0px;
    	margin-right: auto;
		margin-bottom: 80px;
		background-color: transparent;
}

.division {
		padding-top: 380px;
        padding-bottom: 20px;
        background-color: transparent;
}

table {
		text-align: left;  /* justify */
		margin-top: 100px;
		margin-bottom: 300px;
}

th {
		font-weight: normal;
}

#spalte1 		{ width: 160px; }




a 	{
	color: black; 
	/* text-decoration: line-through 0.11em;  0.11em */
	/* text-decoration-line: line-through 0.11em; */
	-webkit-text-decoration: line-through;
	}
a:link {color: black;}
a:hover {text-decoration:none;}
a:visited {color: black;}

a.extern {color: black; text-decoration: none; border-bottom: solid 1px;}
a.extern:link {color: black;}
a.extern:hover {text-decoration: none; border-bottom: none;}
a.extern:active {text-decoration: none; border-bottom: none;}
a.extern:visited {color: black;}

a.intern {color: black; text-decoration: none;}
a.intern:link {color: black;}
a.intern:hover {text-decoration: none; border-bottom: none;}
a.intern:active {text-decoration: none; border-bottom: none;}
a.intern:visited {color: black;}

a.button {
	max-width: 100%;
	height: auto;
	display: block;			   
	margin-left: auto;
    margin-right: auto; 
	margin-bottom: 20px;
	text-align: center;
	color: white; /* #FF00FF */
	text-decoration: none; 
	background-color: black; /* #f5f5f5  #ffffe6  #ffe6ff  #F0F0F0  #fffff4 */
	font-size: 24pt;  
	line-height : 70px;
	padding: 16px;
	border: 1px solid black ;
	border-radius: 30px; /* 24px */
	}	
a.button:link {color: white;}
a.button:hover {color: black; background-color: white; border: 1px solid black;} 
a.button:active {text-decoration: none; }




/* aufklappender Text...*/
			
			details > summary {
				display: flex;
				justify-content: space-between;
				cursor: pointer;
				outline: 0;
			}
			
			details > summary::after {
				content: 'text';
				font-size: 30pt;
				color: black;
				text-decoration: underline;
				/* transform: translate(0px,45px); */		
			}
			
			details > summary::-webkit-details-marker {
				display: none;
			}







.sss {
	    height: 0;
	    margin: 0; 
	    padding: 0;
	    position: relative;
	    display: block;
	    overflow: hidden;
        margin-bottom: 20px;
}

.ssslide {
	    width: 100%;
	    margin: 0;
	    padding: 0;
	    position: absolute;
	    top: 0;
	    left: 0;
	    display: none;
	    overflow: hidden;
}

.ssslide img {
	    max-width: 100%;
	    height: auto;
	    margin: 0;
	    padding: 0;
	    position: relative;
	    display: block;
}

.sssnext, .sssprev {
	    width: 50%; /* 25px */
	    height: 100%;
	    margin: 0;
	    position: absolute;
	    top: 0;
		
}

.sssprev {
	    left: 1%;
		opacity: 0;
		transition: .2s ease-in-out opacity;
}

.sssnext {
	    right: 1%;
		opacity: 0;
		transition: .2s ease-in-out opacity;
}

.sssprev:hover {
	    cursor: url('content/arrow_l_b.png'), default; /* pointer */
		/* background: url('content/arrow_l_b.png') no-repeat;
		background-position: 0% 47%;
		opacity: 1; */
	
}

.sssnext:hover {
	    cursor: url('content/arrow_r_b.png'), default; /* pointer */
		/* background: url('content/arrow_r_b.png') no-repeat;
		background-position: 100% 47%;
		opacity: 1; */
}





/* ab hier für Hamburger Navigation Menu...*/



#menuToggle
{
  display: block;
  position: fixed;
  top: 90px;
  right: 45px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{


}

#menuToggle a > .active {
  text-decoration: none;
}

#menuToggle input
{
  display: block;
  width: 80px;
  height: 60px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 60px;
  height: 6px;
  margin-bottom: 12px;
  position: relative;
  background: black;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 4px 0px; 
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: black;
}

#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#menu
{
  position: fixed;
  right: 60px;
  top: 140px;
  background: transparent;
  list-style-type: none;
  -webkit-font-smoothing: antialiased; 
  transform-origin: 0% 0%;
  transform: translate(150%, 0); 
  transition: transform 0.2s cubic-bezier(0.77,0.2,0.05,1.0); */
  /* transition: opacity 0.5s; */
}

#menu li
{
  padding: 10px 0;
  font-size: 36pt;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  /* opacity: 1; */
  transform: none; 
}





}