* {
    margin: 0px;
    padding: 0px;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 50%;
  }

.navbar {
	overflow: hidden;
	background-color: #333;
	position: fixed; /* Set the navbar to fixed position */
	top: 0; /* Position the navbar at the top of the page */
	width: 100%; /* Full width */
  }
  
  #myBtn:hover {
	background-color: #555; /* Add a dark-grey background on hover */
  }

#homebtn {
	  width: 100%;
	  background-color: #d60302;
	  color: #f2f2f2;
	  margin-top: 15px;
	  margin-bottom: 35px;
	  font-size: inherit;

  }

  #topBtn.show {
	opacity: 1;
	visibility: visible;
  }

  #divTooltip {
	display: none;
}

#pitch {
	border: solid 10px #060;
  }


    /* ## Typographical Elements 
--------------------------------------------- */

p {
    background-color: transparent;
    color: #333;
    font-family: "Open sans", sans-serif;
	line-height: 1.6;
}

p b {
    color: #d60302;
}

::selection {
	background-color: #333;
    color: #fff;
   
}

a {
    color: #333;
    background-color:#f2f2f2;
	text-decoration: underline
}

a:link {
    background-color: transparent;
    color: #333;
} 

a:visited{
    background-color: #f2f2f2;
    color: #d60302;

}

 a:hover {
    background-color: #333;
    color: #fff;
} 

a:active{
    background-color: #d60302;
    color:#f2f2f2;
}

table {
    /* background-color: #d60302;*/
    color: #f2f2f2;
    border: 5px solid #333;
    border-collapse: collapse;
    table-layout: fixed;
    /* width: 825px; */
    text-align: center;
}

.event_display_table.future-only .in-past {
	display: none;
}


tbody:nth-child(2n+1){
    background-color: #f2f2f2;
    color:#d60302;
    border: 1px solid #333;
}

table caption {
	font-size: small;
	color: white;
	visibility: hidden;
}

td b{
    text-align: center;
}

/* ## Headings
--------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #333;
    background-color: transparent;
	font-family: Montserrat, sans-serif;
}
 
h1 {
    font-size: 4vmin;
    margin: 0;

}

h2 {
    font-size: 3vmin;
}

h3 {
    font-size: 2.5vmin;
}

body {
    color: #333;
    background: #acacac56 url('../images/cl.png') ;
    background-size: auto;    
    background-attachment: fixed;
    background-position: 98% 95%;
    background-repeat: no-repeat;
	font-family: "Open sans";
	font-size: 2vmin;
    line-height: 1.6;
	margin-bottom: -25px;

} 

body#ploeg {
	color: #333;
    background: url('../images/spelers/ploeg.jpg');
    background-size: cover;    
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
	font-family: "Open sans", sans-serif;
	font-size: 2vmin;
	line-height: 1.6;
} 

#container_content {
    border-bottom: 10px solid #ff0000;
	background-color: #d60302;
	margin-bottom: 15px;
    }

#title h1{
    background:#d60302;
    color: #f2f2f2;
    border-bottom: 10px solid #ff0000;
    padding: 10px;
}

article {
	background-color: #f2f2f2;
	color: #333;
   /* border-bottom: 10px solid #ff0000; */
}

footer {
    background-color: #d60302;
    position: fixed;
    bottom: 0;
    width: 99%;
    text-align: right;
    clear: both;
    padding-right: 20px;
}

footer p {
    color: #f2f2f2;
}

footer a {
    color: #f2f2f2;
    background-color: transparent;
    text-decoration: none;
    font-weight: bold;
}
footer a:visited {
    color: #f2f2f2;
    background-color: transparent;
    text-decoration: none;
    font-weight: bold;
}
footer a:hover {
    color: #f2f2f2;
    background-color: transparent;
    text-decoration: none;
    font-weight: bold;
}

/* ## formfields
--------------------------------------------- */

.normal {
	border: 1px solid #999;
	border-radius: 4px;
	
}

.focus {
	width: 70%;
	border: 1px solid #222;
	background-color: #FFFFCC;
	color: #333;
	border-radius: 4px;
}

input.error {
	background-color: #fcc;
	color: #000;
}

.error {
	color: #f00;
	font-weight: bold;
}

input.valid {
	background-color: #99FF00;
}


/* ## Groot scherm
--------------------------------------------- */
@media (min-width: 992px) {

	body,body#ploeg {
		margin-top: 200px;
	}

	body#canvasbody {
		margin-top: 50px;
	}

	#canvastable {
		margin-left: 0px;
		background-color: khaki;
		color: #000;
		width: 800px;
		margin-bottom: 15px;
		border-collapse: collapse;
	}

	article {
		margin-left: 125px;
		padding: 30px 0px 0px 10px;
	}
	#topBtn {
		display: inline-block; /* Hidden by default */
		visibility: hidden;
		position: fixed; /* Fixed/sticky position */
		bottom: 35px; /* Place the button at the bottom of the page */
		margin-left: 965px;
		z-index: 99; /* Make sure it does not overlap */
		border: none; /* Remove borders */
		outline: none; /* Remove outline */
		background-color: #d60302; /* Set a background color */
		color: white; /* Text color */
		cursor: pointer; /* Add a mouse pointer on hover */
		padding: 15px; /* Some padding */
		border-radius: 10px; /* Rounded corners */
		font-size: 18px; /* Increase font size */
		border-bottom: 10px solid #ff0000;
		transition: background-color .3s,opacity .5s, visibility .5s;
		opacity: 0;
		box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
	  }
	  
	  #divTooltip {
		position: absolute;
		top: 350px;
		float: left;
		width: 400px;
		border: 2px solid #999;
		background-color: #FFFFCC;
		color: #333;
		border-radius: 4px;
	}


	  #topBtn:hover {
		box-shadow: 0 12px 16px 10px rgba(0,0,0,0.24), 0 17px 50px 10px rgba(0,0,0,0.19);
	  }


	#homebtn {
		display: none;
	}

	#container {
    max-width: 960px;
    margin: auto;
    padding-bottom : 30px;
	}

	#container_content {
		border-right: 10px solid #ff0000;
		}

	#container_logo {
		position: fixed;
		top: 0;
		width: 100%;
		overflow: hidden;
	}
/*  laat de titel vast staan als je scrollt. Enkel oplossing als je langs logo ook rood maakt (anders is tekst van content zichtbaar bij scrollen)
	header {
		position: fixed;
		top:200px;
		width: 960px;
		overflow: hidden;
	} */
	.topnav {
		display: none;
	}
	
	section h2 {
		color: transparent;
		font-size: 0px; 
	} /*nodig om door validator te geraken zonder opmerking */
	
	section#section_nav {
		font-family: "Open sans", sans-serif;
		font-size: 20px;
		width: 125px;
		float: left ;
		background: #d60302;
		/* border-bottom: 10px solid #ff0000; */
		padding-bottom: 25px;    
	}
	
	section#section_nav li a {
		text-decoration: none;
		background-color:#d60302;
		color: #f2f2f2;
		display: block;
		font-weight: bold;
		text-align: left;
	}
	
	section#section_nav ul {
		list-style-type: none;
		margin-left: 10px;
		 position: fixed;
		overflow: auto;
		height: 100%;
	}
	
	section#section_nav a:visited{
		background-color: transparent;
		color: #f2f2f2;
	
	}
	
	section#section_nav a:hover {
		background-color: #333;
		color: #fff;
	} 
	
	section#section_nav a:active{
		background-color: #d60302;
		color:#f2f2f2;
	}
	
	table{
	margin-left: 125px;
	width: 825px;
	}

	#myButton {
		margin-bottom: 50px;
		background-color: #f2f2f2;
		color: #d60302;
		font-size: 2vmin;
	}

	#headerTable {
		font-size: 3vmin;
		color: #f2f2f2;
		text-align: center;
		margin: 0;
	}
	
	article ul,li {
		margin-left: 10px;
	}
}

/* ## klein scherm
--------------------------------------------- */

@media (max-width: 992px) {

	body,body#ploeg{
		font-size: 1.9vmax;
	}

	#container_logo {
		display: none;
	}

	section#section_nav {
	  display: none;
	}

	section#section_table {
		background-color: #f2f2f2;
	}

	#container_content {
    max-width: 100%;
    margin: auto;
	padding-bottom : 30px;
	border-bottom: 10px solid #ff0000;
	background-color:white;
	}


	article {
		background-color: #f2f2f2;
		color: #333;
	    border: 50px solid white;
		}
	
	table {
		width: 95%;
		margin: 2% 2%;
		background: #d60302;
	}

	#myButton {
		margin-bottom: 50px;
		background-color: #d60302;
		font-size: 3vmin;
	}

	ul {
		padding-left: 5%;
	}

	td {
		border: 2px solid #333;
		padding: 0% 0%;
	}

	/* Style the navigation menu */
.topnav {
	overflow: hidden;
	background-color: #d60302;
	position: relative;
	color: #d60302;
  }
  
  /* Hide the links inside the navigation menu (except for logo/home) */
  .topnav #myLinks {
	display: none;
  }
  
  /* Style navigation menu links */
  .topnav a {
	font-family: "Open sans", sans-serif;
	color: white;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 2.5vmax;
	display: block;
	font-weight: bold;
	text-align: center;
  }
  
  /* Style the hamburger menu */
  .topnav a.icon {
	font-family: "Open sans", sans-serif;	
	background: #d60302;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	padding-right: 50px;
  }
  
  /* Add a grey background color on mouse-over */
  .topnav a:hover {
	background-color: #333333;
	color: white;
  }
  
  /* Style the active link (or home/logo) */
  .topnav a.active {
	background-color: #333;
	color:white;
  }

  #topBtn {
	  display: none;
  }


/* ## Headings
--------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #d60302;
    background-color: transparent;
	font-family: Montserrat, sans-serif;
}

#title h1 {
    color: #f2f2f2;
	margin: 0;
	text-align: center;
}
#headerTable {
	color: #d60302;
	text-align: center;
	padding-top: 5%;
	margin: 0;
}
 
h1 {
    font-size: 4vmax;

}

h2 {
	font-size: 3vmax;
	margin: 3%;
	margin-left:0 ;
}

h3 {
	font-size: 2.5vmax;
	margin: 3%;
	margin-left:0 ;
}

p {
	background-color: #f2f2f2;
	margin-left: 8px;
	margin-right: 8px;
	margin-bottom: 0px;
}

input.inschrijvingKalender {
	height: 45px;
	width: 45px;
}

}