/* ************ COLORS*********************************************
 	sky blue	#87CEEB	(135,206,235)
	maroon		#800000	(128,0,0)
	AMBER 		#FFBF00 (255, 191, 0)
	
	
	Gold #FEB42F (254,180,47)
	red  #9E142B (158,20,43)
	
	/* background-color: #062F4F; 
	/* background-color: #882601; 
	/* background-color: #813772; 
	/* background-color: #76323F; 
	/* background-color: #233237; 
	/* background-color: #E24E42; 
	/* background-color: #00BFFF; 
**************************************************************** */

/* ****************************************************************
GENERAL 
**************************************************************** */
*{
	outline: none;
}

.wrap{
	width:90%;
	max-width: 1200px;
	margin: 0 auto;	
}

.off-canvas-wrapper{
	background-color: #9E142B;
}

/* ****************************************************************
NAV - MOBILE
**************************************************************** */
.nav-mobile{
	
}
#mobile-menu{
	background-color: #9E142B;
	padding: 10px;	
}
#mobile-menu li{
	list-style: none;
}
#mobile-menu a{
	font-weight: bold;
	color: rgba(254,180,47,0.8);
	line-height:3;
}
#mobile-menu a:hover{
	color: rgba(254,180,47,1);
}
.title-bar{
	height: 60px;
	padding-top:17px;
	background: repeating-linear-gradient(
	  90deg,
	  #9E142B,
	  #9E142B 40px,
	  #800000 40px,
	  #800000 80px
	);
	border-bottom: 5px solid #FEB42F;
}
.title-bar img{
	height: 25px;
}

.title-bar-title{
	color: rgba(135,206,235,0.9);
	font-family: 'Dancing Script', cursive;
}

.js-off-canvas-exit{
	background: rgba(0,0,0,0.5);
}

button.menu-icon:after {
    background-color: rgba(135,206,235,1);
    box-shadow: 0 7px 0 rgba(135,206,235,1), 0 14px 0 rgba(135,206,235,1);
}

/* ****************************************************************
NAV - DESKTOP
**************************************************************** */
.nav-desktop{
	background: repeating-linear-gradient(
	  90deg,
	  #9E142B,
	  #9E142B 85px,
	  #800000 85px,
	  #800000 170px
	);
	border-bottom: 7px solid #FEB42F;
	height: 110px;	
	padding:0;
}

.site-logo{
	color: rgba(135,206,235,0.8);
	font-family: 'Dancing Script', cursive;
	font-size:3.6em;
	line-height: 110px;
}

.nav-desktop .menu-desktop{
	line-height: 110px;
	background-color:transparent;
}

.nav-desktop .menu-desktop a{
	/* display: inline-block;	 */
	line-height: 110px;
	padding-top:0;
	padding-bottom:0;
	color:rgba(135,206,235,0.9);
}

.nav-desktop .menu-desktop a:hover{
	background-color:rgba(255,255,255,0.2);
}

.nav-desktop .menu-desktop-dropdown{
	line-height: 30px;
	background-color:#9E142B;
}

.nav-desktop .menu-desktop-dropdown a{
	line-height: 30px;
	padding-top:0;
	padding-bottom:0;
	color:rgba(135,206,235,0.9);
}

.nav-desktop .dropdown.menu > li.is-dropdown-submenu-parent > a::after{
	border-color: rgba(135,206,235,0.7) transparent transparent;	
}    

/* ***************************************************************
HERO
**************************************************************** */
.hero{
	background-color: rgba(135,206,235,0.7);
	padding: 35px 0;
}
.images-div{
	text-align: center;
}
.images-div img{
	padding:1px;
	border:5px solid #9E142B;
	background-color:rgba(135,206,235,0.7);
}
.hero h1,
.hero p {
	color: rgba(158,20,43,0.8);
	width: 100%;
}
.sponsor-img{
	/* max-width:256px;
	max-height:192px; */
}
.sponsor-title{
	color: rgba(158,20,43,0.7);
	font-size: 0.9em;
	font-weight: bold;
}
.sponsor-txt{
	color: rgba(158,20,43,0.7);
	font-size: 0.9em;
}

/* ****************************************************************
MAIN
**************************************************************** */
.main{
	background-color: rgba(135,206,235,0.7);
	padding: 60px 0px 20px 0px;
}
.main h1,
.main h2,
.main p {
	color: rgba(158,20,43,0.8);
}
.main h2 span{
	font-size: 0.3em;
    opacity: 0.9;
    float: right;
    margin-right: 15px;
    margin-top: 3em;
}
.main p{
	width: 80%;
}
.main hr{
	border-bottom: 3px solid #9E142B;
	margin: 1rem auto;
}
.accordion-title{
	color: rgba(158,20,43,0.9);
	font-weight:bold;
	background-color: rgba(254,180,47,0.7);
}
.accordion-title:hover, .accordion-title:focus{
	background-color: rgba(254,180,47,0.7);
	color: rgba(158,20,43,0.9);
}
.accordion-nieuws,
.accordion-nieuws td{
	color: rgba(135,206,235,0.9);
	background-color: #9E142B;
}
.accordion-nieuws td{
	white-space:nowrap;	
}
.accordion-nieuws td{
	padding: 0 5px 0 0;
}
.accordion-nieuws table{
	margin-bottom: 0rem;
	border: 0px;
}
.main .accordion-content {
	font-size:0.8em;
}
.main .accordion-content span{
	color: rgba(135,206,235,1);
	font-weight:bold;
	margin-left: 2em;
}
.main .accordion-content .highlight{
	color: rgba(135,206,235,1);
	font-weight:bold;
}
#wedstrijden td,
#doelpuntenmakers td,
#doelpunten td{
	padding: .5rem .225rem .625rem;
}

#doelpuntenmakers{
	line-height: 1;
}

#uitslagen_wrapper{
	padding-top:35px;
}
#kalender_wrapper{
	padding-top:35px;
}
#kalender,
#uitslagen,
#spelers{
	width: 100%;
}
#statStartDatum,
#statEindDatum{
	text-align:center;
}
.main table{
	border: 3px solid #9E142B;
	margin-top: 0.5em;
}
.main div.dataTables_wrapper div.dataTables_filter input{
	width: 150px !important;
}
.main div.dataTables_wrapper div.dataTables_length select{
	width: 60px;
}
.main .pagination a, .pagination button{
	color: rgba(158,20,43,0.8);
}
.main .pagination a:hover, .pagination button:hover{
	background: rgba(254,180,47,0.7);
}
.main .pagination li {
    display:inline-block;
	font-size: 1.5rem;
}
.main .velden{
	width: 60%;
	padding-bottom: 20px;
	padding-top: 20px;
}
.main .velden .button{
	width: 208px;
	margin: 15px 12px;
	color: #9E142B;
	background-color: rgba(254,180,47,0.5);
	border: 1px solid #999;
}
.main .velden .button:hover{
	background-color: rgba(254,180,47,1);
	border: 1px solid #666;
}
.reveal{
	background-color: rgba(254,180,47,0.8);
	padding: 0.5em;
	top: 120px;
}
.reveal .close-button{
	color: rgba(135,206,235,1);
	right: .8rem;
	font-size : 1em;
}
.mapcontainer {
    background-color: rgba(158,20,43,0.8);
    padding: 1em;
}
#map_canvas{
	width:100%; 
	height:300px;
}
.infowindow {
	width: 170px;
	height: 60px;
	line-height: 20px;
	color: rgba(158,20,43,0.9);
}

td.details-control {
    background: url('../images/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('../images/details_close.png') no-repeat center center;
}
tr.group{
	 background-color: rgb(158,20,43) !important;
	 color:rgba(135, 206, 235, 0.8);
}
tr.group td{
	 text-align:center;
}

ul.seizoenen {
	list-style-type: none;
    float: left;
    position: relative;
    margin-right: 15px;
	margin-bottom: 0px;
}

#doelpuntenmakers_filter{
	float:left;
	padding-bottom: 10px;
}

/* ****************************************************************
FOOTER
**************************************************************** */
.footer{
	background-color: #9E142B;
	padding: 0px 0px 30px 0px;
	font-size: 12px;
}

.footer h4 {
	color: rgba(135,206,235,0.8);
	font-size: 1.3em;
}

.footer hr {
	border-color: rgba(135,206,235,0.8);
	margin: 10px 0;
}

.footer a {
	display: block;
	color: rgba(135,206,235,0.7);
	font-size: 0.8em;
}

.footer a span{
	font-weight: bold;
	color: rgba(135,206,235,0.4);
}

.footer a:hover {
	color: rgba(135,206,235,0.9);
}

.footer-push{
	background: repeating-linear-gradient(
				 0deg,
				  #9E142B,
				  #9E142B 5px,
				  rgba(135,206,235,0.7) 30px,
				  rgba(135,206,235,0.7) 90px
				);
	/* background-color: rgba(135,206,235,0.7); */
	height:25px;
}
.footer-column{
	padding-top: 15px;
}

/* ****************************************************************
MEDIA QUERY
**************************************************************** */

/* Small only */
@media screen and (max-width: 39.9374em) {
	.nav-desktop{
		display:none;
	}
	.site-logo{
	font-size:1.4em;
	}
	/* table.stack tr, table.stack th, table.stack td{
		display: table-row;
	} */
	.clear-top{
		height: 40px;
	}
	.main{
		padding: 20px 0px;
	}	
	.sponsor-img{
		padding-top:10px;
	}
	#uitslagen_wrapper{
		padding-top:10px;
	}
	#kalender_wrapper{
		padding-top:10px;
	}	
	.reveal{
		min-height: auto;
		height: auto;
	}
}

/* Medium and up */
@media screen and (min-width: 39.9375em) {
	.nav-mobile{
		display:none;
	}	
	/* table.stack tr, table.stack th, table.stack td{
		display: table-row;
	} */
	.clear-top{
		height: 40px;
	}
	.main .velden{
		width: 65%;
		padding-bottom: 60px;
		padding-top: 20px;
	}
}

/* Medium only */
@media screen and (min-width: 39.9375em) and (max-width: 63.9375em) {
	.site-logo{
	font-size:2.2em;
	}
	.nav-desktop .menu-desktop a{
		padding: 0 0.5em;
	}
}

/* Large and up */
@media screen and (min-width: 64em) {
	.main .velden{
		width: 60%;
		padding-bottom: 60px;
		padding-top: 20px;
	}	
}

/* Large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {	
	.accordion-nieuws  table.stack td {
		display: block; }			
	.wrap{
		width:95%;
	}	
	/* .column, .columns { */
    /* padding-left: .2375rem; */
    /* padding-right: .2375rem; */
	/* } */
}

@media screen and (max-width: 63.9375em) {
  table.stack thead {
    display: table-header-group; }
  table.stack tfoot {
    display:  table-footer-group; }
  table.stack tr{
	  display:table-row;
  }
  table.stack th,
  table.stack td {
    display: table-cell;	}
  table.stack td {
    border-top: 0; } 
}

@media screen and (max-width: 35em) {
  table.stack thead {
    display: none; }
  table.stack tfoot {
    display: none; }
  table.stack tr,
  table.stack th,
  table.stack td {
    display: block; }
  table.stack td {
    border-top: 0; } 
	
#uitslagen table tbody th, table tbody td {
    padding: 0.1rem 0.625rem 0.1rem;
}}

@media (max-width: 800px){
	.hero h1,
	.hero p{
		width: 100%;
	}
@media (max-width: 745px){
		table {
		border-collapse: separate;
		}
		html {
		font-size:85%;
		}
		body{
		line-height: 2;
		}
		#uitslagen table tbody th, table tbody td {
			padding: 0.1rem 0.625rem 0.1rem;
		}
		table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before, table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
			top: 5px !important;
			left: 4px;
			height: 14px;
			width: 14px;
			display: block;
			position: absolute;
			color: white;
			border: 2px solid white;
			border-radius: 14px;
			box-shadow: 0 0 3px #444;
			box-sizing: content-box;
			text-align: center;
			text-indent: 0 !important;
			font-family: 'Courier New', Courier, monospace;
			line-height: 12px !important;
			content: '+';
			background-color: #008CBA;
		}
	}		
@media (max-width: 464px){
		html {
		font-size:85%;
		}
		body{
		line-height: 2;
		}
	}
}