@font-face {
	font-family: CooperHewitt-L;
	src: url(CooperHewitt-Light.otf);
}

@font-face {
	font-family: OpenSans;
	src: url(OpenSans-Light.ttf);
}

@media only screen and (max-width: 950px) {
	.nav_icon { display: block;	}
	.nav_text { display: none;	}

	#header { position: fixed; }
	.header_text { display: none; }
}

@media only screen and (min-width: 950px) {
	.nav_icon { display: inline-block; margin-right: .5em; }
	.nav_text { display: inline-block; }

	.header_text { display: inline-block; }
}

:root {
	--theme-color: #0094FF; /*#1A9AD3*/
	--theme-opposite-color: #FF5900;
}

body {
	width: 100%;
	margin: 0;
	padding: 0;
	font-family: OpenSans, Calibri, sans-serif;
	font-size: 1em;
	color: #FFF;
	background: #4C4C4C url(../images/background.jpg) fixed no-repeat;
	background-size: cover;
}

a:link, a:visited {
	color: var(--theme-color);
	text-decoration: none;

	-o-transition: .3s;
	-moz-transition: .3s;
	-webkit-transition: .3s;
	transition: .3s;
}

a:hover, a:active {
	color: var(--theme-opposite-color);
}

p {
	margin: 0;
}

/* FONT SIZE CLASSES */
.font_size_15em { font-size: 1.5em; }
.font_size_14em { font-size: 1.4em; }
.font_size_13em { font-size: 1.3em; }
.font_size_12em { font-size: 1.2em; }
.font_size_11em { font-size: 1.1em; }
.font_size_10em { font-size: 1em; }
.font_size_09em { font-size: .9em; }
.font_size_08em { font-size: .8em; }
.font_size_07em { font-size: .7em; }
.font_size_06em { font-size: .6em; }
.font_size_05em { font-size: .5em; }

/* FONT COLORS */
.text-black { color: #000; }
.text-white { color: #FFF; }
.text-gray { color: #999999; }
.text-faded-black8 { color: rgba(0,0,0,.8); }
.text-faded-black { color: rgba(0,0,0,.5); }
.text-faded-white { color: rgba(255,255,255,.5); }
.text-faded-white3 { color: rgba(255,255,255,.3); }
.text-theme { color: var(--theme-color); }
.text-theme-opposite { color: var(--theme-opposite-color); }

/* TEXT ALIGNMENT */
.text-align-left { text-align: left; }
.text-align-center { text-align: center; }
.text-align-right { text-align: right; }

/* MARGINS */
.margin-top-05em { margin-top: .5em; }
.margin-top-1em { margin-top: 1em; }
.margin-top-15em { margin-top: 1.5em; }
.margin-top-2em { margin-top: 2em; }

.margin-right-05em { margin-right: .5em; }
.margin-right-1em { margin-right: 1em; }
.margin-right-15em { margin-right: 1.5em; }
.margin-right-2em { margin-right: 2em; }

.margin-bottom-05em { margin-bottom: .5em; }
.margin-bottom-1em { margin-bottom: 1em; }
.margin-bottom-15em { margin-bottom: 1.5em; }
.margin-bottom-2em { margin-bottom: 2em; }

.margin-left-05em { margin-left: .5em; }
.margin-left-1em { margin-left: 1em; }
.margin-left-15em { margin-left: 1.5em; }
.margin-left-2em { margin-left: 2em; }

/* TYPOGRAPHY */
.typo-uppercase { text-transform: uppercase; }
.typo-lowercase { text-transform: lowercase; }
.typo-capitalize { text-transform: capitalize; }

.typo-italic { font-style: italic; }

/* HOVER EFFECTS */
.hover-theme:hover { background: var(--theme-color); color: #FFF; }
.hover-theme-opposite:hover { background: var(--theme-opposite-color); color: #FFF; }
.hover-green:hover {background: rgba(0,180,0,1); color: #FFF; }

/* HEADERS */
h1 {
	font-family: CooperHewitt-L, Calibri, sans-serif;
	color: #FFF;
	font-weight: normal;
	text-align: center;
}

h2 {
	font-family: CooperHewitt-L, Calibri, sans-serif;
	color: #FFF;
	font-weight: normal;
	text-align: center;
}

h5 {
	font-family: CooperHewitt-L, Calibri, sans-serif;
	color: #FFF;
	font-weight: normal;
	text-align: center;
}

								/* CONTAINER */

#container {
	max-width: 100vw;
	overflow: hidden;
}

								/* HEADER */

#header {
	width: 100%;
	background: #191919;
	font-family: OpenSans, Calibri, sans-serif;
	display: flex;
	flex-wrap: wrap;
}

#header .header_text  {
	font-family: CooperHewitt-L, Calibri, sans-serif;
	font-size: 1.3em;
	padding-top: .8em;
	padding-bottom: .8em;
	text-align: right;
	margin-right: 2em;
	flex-grow: 1;
	margin-left: auto;
}

#header .header_text a:link, #header .header_text a:visited { color: #FFF; text-decoration: none; }
#header .header_text a:hover, #header .header_text a:active { color: var(--theme-opposite-color); text-decoration: none; }

								/* MENU */

#menu {
	min-width: 70%;
	max-width: 100%;
	text-align: center;
	display: inline-block;
	flex-grow: 1;
}

#menu a:link, #menu a:visited {
	display: block;
	color: rgba(255,255,255,.7);
	font-family: CooperHewitt-L, Calibri, sans-serif;
	font-weight: normal;
	text-decoration: none;
	font-size: 1em;
	padding-top: 1.25em;
	padding-bottom: 1.25em;
	
	-o-transition: .3s;
	-moz-transition: .3s;
	-webkit-transition: .3s;
	transition: .3s;
}

#menu a:hover, #menu a:active {
	background: rgba(255,255,255,0.3);
}

#menu i {
	transition: 1.2s;
}

#menu a:hover i {
	color: var(--theme-opposite-color);
	transform: rotate(360deg);
}

#menu ul {
	display: flex;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#menu li {
	flex: 1 1 auto;
	min-width: 0;
}

#menu .help {
	background: rgba(255,0,0,0.4);
	
	-o-transition: .5s;
	-moz-transition: .5s;
	-webkit-transition: .5s;
	transition: .5s;
}

#menu .help:hover, #menu .help:active {	background: #B72222; }
#menu .help a:link, #menu .help a:visited {	color: #FFF; }
#menu .help a:hover, #menu .help a:active {	background: #B72222; }

/* SUBMENU */
#submenu {
	width: 100%;
	text-align: center;
	font-family: CooperHewitt-L, Calibri, sans-serif;
	font-weight: normal;
	text-decoration: none;
	font-size: .8em;
	background: rgba(0,0,0,.5);
}

#submenu .text {
	width: 100%;
	padding-top: .8em;
	padding-bottom: .8em;
}

#submenu .text ul {
	display: flex;
	list-style-type: none;
	padding: 0;
	margin: 0;
}

#submenu .text li {
	flex: 1 1 0;
}


								/* CONTENT */

#content {
	padding-top: .3em;
	padding-bottom: 1em;
	margin: 0;
	text-align: center;
}

#content h1 {
	padding: .3em .5em .3em .5em;
	margin-top: 1em;
}

#content h2 {
	padding: .3em .5em .3em .5em;
	font-size: 1.4em;
}

#container_50p { margin: auto auto; min-width: 50%; max-width: 900px; }
.base_tile_black { background: rgba(0,0,0,.2); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); }
.base_tile_white { background: rgba(255,255,255,.9); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); }

#container_25p { margin: auto auto; margin-top: 20px; min-width: 25%; max-width: 900px; }
.base_tile_black { background: rgba(0,0,0,.2); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); }
.base_tile_white { background: rgba(255,255,255,.9); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); }

.link_button a:link, .link_button a:visited {
	padding: .4em .7em;
	background: var(--theme-color);
	color: #FFF;
	border-radius: .3em;
}

.link_button a:hover, .link_button a:active {
	background: #FFF;
	color: var(--theme-color);
}

/* LANDING PAGE */
#home_tiles {
	width: 100%;
	display: flex;
	align-items: stretch;
	justify-content: center;
}

#home_tiles a:link, #home_tiles a:visited { color: #FFF; display: block; }
#home_tiles div:hover a:link, #home_tiles div:hover a:visited { color: var(--theme-color); }

#home_tiles div {
	min-width: 6em;
	padding: 1.5em 1em 1em 1em;
	
	-o-transition: .3s;
	-moz-transition: .3s;
	-webkit-transition: .3s;
	transition: .3s;
}

#home_tiles div:hover {
	background: rgba(255,255,255,.9);
	color: #191919;
}

#home_tiles div:nth-child(2) {
	margin-left: .7em;
}

#home_tiles .live_scores {
	width: 20%;
	display: inline-block;
}

#home_tiles .uitslagen {
	width: 20%;
	display: inline-block;
}

/* LOGIN LINK */
#index_login {
	color: #FFF;
	width: 19em;
	margin: auto auto;
	margin-top: 5em;
}

#index_login .text {
	padding: .5em 0em;
	background: rgba(0,0,0,.3);
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	
	-o-transition: .3s;
	-moz-transition: .3s;
	-webkit-transition: .3s;
	transition: .3s;
}

#index_login i { margin-left: 3em; }

#index_login a:link, #index_login a:visited { color: #FFF; }
#index_login a:hover, #index_login a:active { color: var(--theme-color); }

#index_login .text:hover { background: rgba(255,255,255,.9); color: #191919; }
#index_login .text:hover a:link, #index_login .text:hover a:visited { color: #191919; }
#index_login .text:hover a:hover, #index_login .text:hover a:active { color: var(--theme-color); }

/* LOGGED IN LANDING */

#loggedin_landing {
	
}

.loggedin_wedstrijden {
	padding: .7em .8em;
	text-align: left;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;

	-o-transition: .3s;
	-moz-transition: .3s;
	-webkit-transition: .3s;
	transition: .3s;
}

.loggedin_wedstrijden:hover {
	background: #F5F5A7;
	color: #000;
}

.loggedin_wedstrijden .wedstrijd_datum {
	display: inline-block;
	margin-right: 3em;
	max-width: 8em;
}

.loggedin_wedstrijden .wedstrijd_naam {
	flex-grow: 1;
	min-width: 50%;
}

.loggedin_wedstrijden .wedstrijd_buttons {
	text-align: right;
}

.loggedin_wedstrijden .wedstrijd_buttons i {
	margin-left: .8em;
}

.base_tile_black .wedstrijd_buttons a:link, .base_tile_black .wedstrijd_buttons a:visited { color: rgba(255,255,255,.6); }
.base_tile_black:hover .wedstrijd_buttons a:link, .base_tile_black:hover .wedstrijd_buttons a:visited { color: var(--theme-color); }
.base_tile_black:hover .wedstrijd_buttons a:hover, .base_tile_black:hover .wedstrijd_buttons a:active { color: var(--theme-opposite-color); }

/* BUTTONS */
.url {
	color: var(--theme-color);
	cursor: pointer;

	-o-transition: .3s;
	-moz-transition: .3s;
	-webkit-transition: .3s;
	transition: .3s;
}

.url:hover, .url:active {
	color: var(--theme-opposite-color);
}

.btn {
	font-family: OpenSans, Calibri, sans-serif;
	padding: .4em 1em;
	border-radius: .3em;
	border: none;
	cursor: pointer;
	margin-top: 1em;

	-o-transition: .3s;
	-moz-transition: .3s;
	-webkit-transition: .3s;
	transition: .3s;
}

.btn-theme {
	background: var(--theme-color);
	color: #FFF;
}

.btn-theme:hover {
	background: #FCFCFC;
	color: var(--theme-color);
}

.btn-theme-sec {
	background: #EFEFEF;
	color: #000;
}

.btn-theme-sec:hover {
	background: #3B3B3B;
	color: #EFEFEF;
}

.btn-theme-opposite {
	background: var(--theme-opposite-color);
	color: #FFF;
}

.btn-theme-opposite:hover {
	background: #FFF;
	color: var(--theme-opposite-color);
}

/* OVERVIEW ROW */
.overview_row {
	padding: .7em .8em;
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: space-between;

	-o-transition: .3s;
	-moz-transition: .3s;
	-webkit-transition: .3s;
	transition: .3s;
}

.overview_row:not(:first-child) {
	margin-top: 1em;
}

.overview_row > span {
	flex-grow: 1;
	flex-basis: 0;
}

.overview_row:hover {
	background: #F5F5A7;
}

/* NOTIFICATIONS */
.alert {
	display: block;
	width: 50%;
	padding: .5em 1em;
	color: rgba(0,0,0,.7);
	border-radius: 5px;
	margin: auto auto .5em auto;
}

.alert-primary { background: #CCE5FF; border: 1px solid #B8DAFF; }
.alert-secondary { background: #E2E3E5;	border: 1px solid #D6D8DB; }
.alert-success { background: #D4EDDA; border: 1px solid #C3E6CB; }
.alert-danger {	background: #F8D7DA; border: 1px solid #F5C6CB; }
.alert-warning { background: #FFF3CD; border: 1px solid #FFEEBA; }

.form-error-message {
	background: #F8D7DA;
}