@font-face {
			font-family: 'Oswald';
			src: url('/templates/fonts/Oswald-Regular.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
		}
		@font-face {
			font-family: 'Oswald Light';
			src: url('/templates/fonts/Oswald-Light.ttf') format('truetype');
			font-weight: light;
			font-style: normal;
		}
		@font-face {
			font-family: 'Oswald';
			src: url('/templates/fonts/Oswald-Bold.ttf') format('truetype');
			font-weight: bold;
			font-style: normal;
		}
		@font-face {
			font-family: 'Roboto Condensed';
			src: url('/templates/fonts/RobotoCondensed-Regular.ttf') format('truetype');
			font-weight: 400;
			font-style: normal;
		}
		@font-face {
			font-family: 'Roboto Condensed';
			src: url('/templates/fonts/RobotoCondensed-Light.ttf') format('truetype');
			font-weight: 300;
			font-style: normal;
		}
		@font-face {
			font-family: 'Roboto Condensed';
			src: url('/templates/fonts/RobotoCondensed-Bold.ttf') format('truetype');
			font-weight: 700;
			font-style: normal;
		}

		@font-face {
			font-family: 'Roboto';
			src: url('/templates/fonts/Roboto-Regular.ttf') format('truetype');
			font-weight: 400;
			font-style: normal;
		}
		@font-face {
			font-family: 'Roboto Thin';
			src: url('/templates/fonts/Roboto-Thin.ttf') format('truetype');
			font-weight: 100;
			font-style: normal;
		}
		@font-face {
			font-family: 'Roboto Light';
			src: url('/templates/fonts/Roboto-Thin.ttf') format('truetype');
			font-weight: 300;
			font-style: normal;
		}
		@font-face {
			font-family: 'Roboto Bold';
			src: url('/templates/fonts/Roboto-Bold.ttf') format('truetype');
			font-weight: 700;
			font-style: normal;
		}

		html {overflow-y: scroll;}

		body {line-height:1.62;}

		main p, main span, main label, main b, main strong, main input, main textarea, main select, main option {
			font-family: Roboto;
			color: #333333;
		}
		main b, main strong {font-family: Roboto Bold}

		main ul, main ol {padding:15px;}
		
		.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {line-height:1.62;}

		h1, h2, h3, h4 {
			font-family: Oswald;
			color: #333333
		}

		h5 {
			font-family: Oswald Light !important;
			font-weight: 200 !important;
		}

		#dynnav {font-family: 'Oswald';}
		#dynnav ul ul {font-family: 'Oswald Light';}

		.row {align-items: flex-start;}	/* safari fix for stretched images */

		header {
			background: rgb(2,0,36);
			background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(21,49,86,1) 35%, rgba(21,49,86,1) 100%);
		}

		footer {
			margin-top: 8rem;
		}

		.date-icon {border:none;min-width:11%;height:100px;transform: rotate(-3deg);float:left;box-shadow: 3px 3px rgb(0 0 0 / 20%);}
		.date-icon-dayName, .date-icon-monthName {background-color:#b93b3b;color:white;height:25%;}
		.date-icon-dayName {font-size:0.8em;line-height:2.5em;border-radius:4px 4px 0 0;border:solid 1px #b93b3b;}
		.date-icon-dayInt {font-size:2.6em;font-weight:bold;background-color:white;height:50%;line-height:normal;padding:0;}
		.date-icon-monthName {font-size:1em;border:solid 1px #b93b3b;border-radius:0 0 1px 4px;
			background: linear-gradient(133deg, rgba(185,59,59,1) 0%, rgba(185,59,59,1) 88%, rgba(124,52,52,1) 100%)}

		/* --- C O M P O N E N T S --------------------------------------------	*/
		.picture-component {
			margin-bottom: 30px;
		}
		
		.jumbotron {
			background: grey no-repeat scroll center top / cover;
			padding-top: 2.8rem;
			padding-bottom: 2.8rem;
			min-height: 104px;
		}
		
		.jumbotron h1{
		}

		.newsfeedbox {
			background: rgb(0,0,0);
			background: linear-gradient(170deg, rgba(0,0,0,1) 0%, rgba(68,68,68,1) 40%, rgba(34,34,34,1) 42%, rgba(17,17,17,1) 50%, rgba(0,0,0,1) 100%);
			background-position:bottom left;
			color:#e8e8e8;
			border-radius:6px;
			border:solid 2px #000000;
		}

		.newsfeedbox a {color:#eeeeee;font-size:1.4rem;}
		.newsfeedbox .newsItemHeader {margin-bottom:0.15em;}
		.newsfeedbox .feedsource {padding:0px 4px 0px 1px;margin:0 0.5rem 0 -1px;background-color:rgba(255,255,255,0.9);border:1px solid #ffffff;border-radius:2px;color:#333333;}
		.newsfeedbox .feeddate {color:#888888;}

		.list-link-title {font-size:1.5em;font-weight:100;}
		.list-link-year {text-decoration:underline;}
		.list-link-desc {display:inline-block;}
		.list-link-icon-pdf {font-size:1.4em;color:red;}
		.list-link-icon-ext {font-size:1.4em;color:#007bff;}


		/* --- M E D I A   S P E C I F I C   S E T T I N G S ------------------	*/
			@media (max-width: 300px) {
				.jumbotron {display:none;}
			}
			
			/* --- 576 and wider --------------------------------------------------	*/
			@media (min-width: 576px) {
				.jumbotron {
					min-height: 171px;
					padding-top: 3.3rem;
					padding-bottom: 3.3rem;
				}
			}

			/* --- 768 and wider --------------------------------------------------	*/
			@media (min-width: 768px) {
				.jumbotron {
					min-height: 230px;
				}
			}

			/* --- 992 and wider ------------------------------------------------- */
			@media (min-width: 992px) {
				
			}

			/* --- 960 and wider ------------------------------------------------- */
			@media (min-width: 960px){
				.jumbotron {min-height: 300px;}
				header {height:213px;}
				
				nav {height:8em;}
				.container {max-width: 800px;}
				.navbox {position:relative;text-align:center;}
				#dynnav ul, #dynnav ul ul {list-style-type:none;padding:0;}
				
				#dynnav li, #dynnav li ul li {display:inline;}
				
				#dynnav ul li ul {
					position:absolute;top:2em;
					background: #0D2B4D;
					height:1.65em;
					display:flex;flex-wrap: nowrap;justify-content:center;align-items:flex-end;
				}
				
				#dynnav ul li a {color:#333333;}
				#dynnav ul li ul li a {color:white;}

				#dynnav .menu-link span {display:inline-block;padding:0 1em;}
				#dynnav .sel > a span {background:#0D2B4D;color:white;padding:0.2em 1em 0.4em 1em;}
				#dynnav ul ul .sel > a span {padding:0 1em;text-decoration:underline;}

				#menutoggle, #menutogglebtn {display:none;}
				#bglogo {position:absolute;left:-30%;z-index:-1;}
			}

			/* --- smaller than 960 (folding menu) ------------------------------------------------- */
			@media (max-width: 959px){
				nav {height:auto;}
				#dynnav {max-height: 0;overflow: hidden;transition: max-height 0.6s ease-in;}
				#dynnav ul {list-style-image: url('/images/mindark_list_style_10.png');}
				#dynnav ul ul {list-style-image: url('/images/mindark_list_style_10_grey.png');}
				#dynnav li, #dynnav li ul li {line-height:200%;}
				
				#dynnav .menu-link {color:#333333;}
				#dynnav .sel > a span {background:#dddddd;padding:0 1em 0 0.2em;}
				#dynnav ul ul .sel > a span {background:none;text-decoration:underline;}
				
				#bglogo {display:none;}
				#menutoggle {padding:0 2px;font-size:2.5rem;color:#666;margin:0;}
				#menutogglebtn {opacity:0;}
				#menutogglebtn:checked ~ #dynnav {max-height: 500px;}
			}

			/* --- CARDS ---------- */

			.card-columns {
				column-gap: 3.25rem;
			}

			.cards-blue-gradient {
				background: #1f9bba; /* Old browsers */
				background: -moz-linear-gradient(-45deg, #1f9bba 0%, #24aca9 100%); /* FF3.6-15 */
				background: -webkit-linear-gradient(-45deg, #1f9bba 0%,#24aca9 100%); /* Chrome10-25,Safari5.1-6 */
				background: linear-gradient(135deg, #1f9bba 0%,#24aca9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
				filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f9bba', endColorstr='#24aca9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
			}

			.mb-325 {
				margin-bottom: 3.25rem !important;
			}

			.card-title-ja{
				font-size: 2.5rem;
			}

			@media (max-width: 575px) {
				.card-columns {
					-webkit-column-count: 1;
	  				-moz-column-count: 1;
					column-count: 1 !important;
				}
			}

			@media (min-width: 576px) and (max-width: 767px) {
				.card-columns {
					-webkit-column-count: 2;
	  				-moz-column-count: 2;
					column-count: 2 !important;
				}
			}

			@media (min-width: 768px) and (max-width: 991px) {
				.card-columns {
					-webkit-column-count: 2 !important;
	  				-moz-column-count: 2 !important;
					column-count: 2 !important;
				}
			}

			@media (min-width: 992px) and (max-width: 1199px) {
				.card-columns {
					-webkit-column-count: 3;
	  				-moz-column-count: 3;
					column-count: 3 !important;
				}
			}

			@media (min-width: 1200px) {
				.card-columns {
					-webkit-column-count: 3;
	  				-moz-column-count: 3;
					column-count: 3 !important;
				}
			}
		/* --- E N D   O F   M S T --------------------------------------------	*/