/*----------------allgemein------------*/ 

body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:1em; text-align:left}
ul, body {margin:0; padding:0}
main {margin-top:2em}
h1 {margin:2em 0; font-size:1.6em;font-family: Geneva, Tahoma, Verdana, sans-serif;font-weight:500;}
h3 {  font-family: 'Roboto', sans-serif; font-weight:300; font-size:1.1em;color: #EF8400;}
#content {position:relative; top: 3em}
table {margin: 0px auto;border-collapse: collapse;}
tr {height:3em}
 td:nth-child(1){width:50px; text-align:right}
 td:nth-child(2){min-width:400px; padding-left:20px}
  td:nth-child(3){ padding-right:40px}
  #logo1 img, #logo2 img {height:150px}

 .demo-show img { cursor: pointer;}
.rotated, .test {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
}
.img{transition: all 0.5s ease; margin-bottom:-2px}
  
/*---------------------Header------------*/
#container, footer {width:1280px; margin:0px auto; margin-top:1em}
#navitext, nav {margin: 0px auto;width: max-content;}
#logo1 {float:left;  }
#logo2 {float:right;  }
#headertext {text-align:center}
.info {font-style:italic; text-align:center; margin-bottom:2em}



.drop-shadow {
    -webkit-filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.7));
    filter: drop-shadow(5px 5px 3px rgba(0,0,0,0.7));
}


/*----------------------MENU-------------*/

nav li {float:left; list-style-type: none;
margin-right:2em; padding:0.5em}

 
 nav li a {text-transform:uppercase;text-decoration:none; letter-spacing:0.05em;font-family: 'Verdana', sans-serif; font-weight:600
 }
 nav ul ul {display:none}
nav ul li.active ul {display:block}
#navbar ul li {height:1em;  }
.alfabet li {width:0.7em}

.submenu a {text-transform:none; font-weight:normal}

/*-menu thema-*/
.dienst a, .algmeen a, .feest a{font-size:0.9em; text-transform:none; font-weight:normal}
.dienst li, .algmeen li, .feest li {margin-right:0.5em}
#navbar .dienst li.active, #navbar .algmeen li.active, #navbar .feest li.active {box-shadow:none}
h4 {text-align:center}

/*-----------------color----5793c9  dunkel     71BFE5 hell--Orange EF8400-*/
 nav li.active a, nav li a:hover, hr, footer a  {color:#5793c9}
  nav li a  {color:#000000}

  tr:nth-child(odd) {
  background-color: rgb(87, 147, 201, 0.2);
}
tr:nth-child(even) {
  background-color: #ffffff;
}
#content a {color:#2d6faa; text-decoration:none}
#content a.link {color:#5793c9}
#content a:hover {color:#000000}
#navbar li {border:1px solid #ffffff;}
#navbar li.active {border:1px solid #5793c9;box-shadow: 2px 2px #B1D2F0; border-radius:5px}



/* Style for the Play button    color----5793c9  dunkel     71BFE5 hell--Orange EF8400 */
main ul li {list-style:none; height:2em}

.playButton img, .stopButton img{height:1.2em; width:1.5em; }
.playButton, .stopButton {border-radius:8px;

 color: #fff;
  border: none;
   padding: 8px ;
   cursor: pointer;
  outline: none;
  margin-bottom:5px; 
 }
.playButton {
  background-color: #c1c1c1;
  margin-right:10px;
  margin-top:5px
 
}
 

.playButton:focus,
.playButton:active, .playButton:hover {
  background-color: #71BFE5;
}

/* Style for the Stop button */
.stopButton{
  background-color: #c1c1c1;
 
}

.stopButton:focus,
.stopButton:active , .stopButton:hover {
  background-color: #a73b2d;
}


/*----------footer-*/
footer { font-size:0.9em; margin-top:5em;}





/*----------Media screen -------------*/

@media screen and (max-width: 1280px)
{
	#container, footer {width:100%}

	.w3-button {margin-bottom:1em}
}

@media screen and (max-width: 1050px)
{
	#container, footer {margin-left: 2em;width:95%}
	.alphabet button {width:4em; height:4em}
	.numeriek button, .thema button {height:4em}
	nav {max-width:1024px}	 
}

@media screen and (max-width: 900px)
{
	
	  #logo1 img, #logo2 img {height:100px}
	  nav li {margin-right:0.5em}
	  #content  {margin:0 5px}
footer {margin-right:10px}
nav { width:auto}
	
	
}
@media screen and (max-width: 600px)

{	  
footer {width:95%; margin-left:1em}
#container {margin: 0 1em;width:92%}
#headertext {float:left}
h1 {font-size:1.4em}

nav li {margin:0 1em 1em 0}
nav li a {font-size:1em; }
#navitext, nav {margin-left:0em; width:auto}
td {font-size:0.95em}
td:nth-child(1){width:50px; }
 td:nth-child(2){min-width:180px; padding-left:10px}
  td:nth-child(3){ padding-right:10px}



}