@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital@0;1&family=Open+Sans:ital@0;1&display=swap');
* {
box-sizing: border-box;
}
/*
@font-face { -> embedding the font makes it ugly 
font-family:Calibri;
src:url("../../assets/font/calibri.ttf");
font-weight:normal;
}*/
body {
margin:0;
padding:0;
background-color:#080F14;
color:white;
font-family: 'Open Sans', 'Noto Sans', sans-serif;
font-size:14px;
overflow:scroll;
}
.deprecated {
display:none;
}
.fas { /* font-awesome.com icon styling */
margin:0 0.5em 0 0;
font-size: 1em;  
text-align: center;
text-decoration: none;
}
.rootbox {
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}
	
 /* HEADER */	
.rootboxheader {
position: -webkit-sticky; /* Safari */
position: sticky;
top:0;
width:100%;
background-color:black;
z-index:16;
}
.bannercontainer {
}
img.banner {
width:100%;height:auto;margin:0;padding:0;
}
img.mainlogo {
display:block;position:absolute;top:0px;left:0px;width:38%;height:auto;	
}
p.maincaption {
display:none;
}

 /* FOOTER */
div.rootboxfooter {
display:block;
position:fixed;
bottom:0;
width:100%;
height:1.5em;
font-size:1em;
background-color:#444449;
color:#777777;
z-index:16;	
}

 /* TOP NAV */
.mainmenu_container {
background-color:#111117;
overflow:hidden;
}
.mainmenu {
overflow:hidden;
}
.mainmenulink {
float:left;
display:block;
color:white;
text-align:center;
padding:0.25em 0.25em;
text-decoration:none;
font-size:1.25em;
}
a.mainmenulink:link, a.mainmenulink:visited , a.mainmenulink:active{
color:white;
}
a.mainmenulink:hover {
margin-left:-1px;
margin-right:-1px;
border-left:1px solid #847156;
border-right:1px solid #847156;
color:#ffcf88;
}
a.mainmenulink_on {
float:left;
display:block;
text-align:center;
padding:0.25em 0.25em;
text-decoration:none;
font-size:1.25em;
color:#ffcf88;
}
a.mainmenulink_disabled {
float:left;
display:block;
text-align:center;
padding:0.25em 0.25em;
text-decoration:none;
font-size:1.25em;
color:#777879;
}

/* When the screen is small (phone), hide all links. Show the link that contains should open and close the topnav (.icon) */
.mainmenu a {
display:none;
}
#smallmenuicon {
float:left;
display:block;
font-weight:bold;
font-size:1.75em;
color:white;
margin-left:1em;
padding:0 1em 0 0;
text-decoration:none;
}
/* add a js class to show main menu links */
.mainmenu.responsive {
position:relative;
}
.mainmenu.responsive a.icon {
position:absolute;
right:0;
top:0;
}
.mainmenu.responsive a {
float:none;
display:block;
text-align:left;
}


 /* PAGE CONTENT */
 
h1 {
font-size:1.5em;
text-align:center;
}
h2 {
font-size:1.5em;
text-align:center;
}
.rootboxcontent {
max-width:100%;
text-align:justify;
padding:2em 2em 2em 2em;
background-color:#202428;
/*background-image: url('assets/bg_.jpg');background-repeat: repeat;*/
}
.rootboxcontent a {
color:#4488FF;
text-decoration:none;
}
.index_intro {
padding:1em;
font-size:1.1em;
text-align:justify;
margin:0 0 3em 0;
}
.title {
}

.myimg{
max-width:100%;
}

.textcontent
{
/*max-width:64em;*/
margin-bottom:2em;
font-size:1.0em;
}
.paper {
color:#BBCCFF;
}
.abstract {
font-size:0.9em;
/*font-style:italic;*/
}

.mediastyle {
border:0px solid black;
}

/* --------- For tablets (portrait) ---------  */
@media only screen and (orientation: portrait) and (max-width: 991.8px) and (min-width: 768px){  /*(min-width: 768px)*/
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
  
	.index_intro {
	border:1px dotted #88CCFF;
	padding-left:2em;
	padding-right:2em;
	width:28em;	
	text-align:justify;
	margin-bottom:3em;
	}	
}

/* --------- For tablets (landscape) ---------  */
@media only screen and (orientation: landscape) and (max-width: 1199.8px) and (min-width:992px){  /*min-width:992px*/
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
  
	img.mainlogo {
	display:block;position:absolute;top:30%;left:2%;width:30%;min-width:280px;height:auto;z-index:5;	
	}
	/* Hide the link that should open and close the topnav on small screens */
	#smallmenuicon {
	display:none;
	}
	a.mainmenulink {
	float:left;
	display:block;
	color:white;
	text-align:center;
	padding:0.1em 3em 0.25em 3em;
	text-decoration:none;
	font-size:1.15em;
	}
	a.mainmenulink:link, a.mainmenulink:visited , a.mainmenulink:active{
	color:white;
	}
	a.mainmenulink:hover {
	color:#ffcf88;
	}
	a.mainmenulink_on {
	float:left;
	font-size:1.25em;
	display:block;
	color:#ffcf88;
	text-align:center;
	padding:0.1em 3em 0.25em 3em;
	text-decoration:none;
	font-size:1.15em;
	}
	a.mainmenulink_disabled {
	float:left;
	display:block;	
	text-align:center;
	padding:0.1em 3em 0.25em 3em;
	text-decoration:none;
	font-size:1.15em;
	color:#777879;
	}
	
	.index_intro {
	/*border:1px dotted #88CCFF;*/
	padding-left:2em;
	padding-right:2em;
	width:33em;
	margin-bottom:3em;
	}
	h1 {
	font-size:2em;
	border-top:none;
	border-bottom:none;
	text-align:left;
	}
	h2 {
	font-size:1.75em;
	text-align:left;
	}	
}

/* --------- For desktop ---------  */
@media only screen and (min-width: 1200px) and (max-width: 1798px) {  
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
  
    img.mainlogo {
	display:block;position:absolute;top:30%;left:2.5%;width:24%;min-width:280px;height:auto;z-index:5;
	}
	p.maincaption {	
	display:inline-block;position:absolute;left:16%;bottom:24%;color:#999999;text-align:center;font-size:15px;z-index:4;
	}
	/* Hide the link that should open and close the topnav on small screens */
	#smallmenuicon {
	display:none;
	}
	a.mainmenulink {
	float:left;
	display:block;
	color:white;
	text-align:center;
	padding:0.1em 3em 0.25em 3em;
	text-decoration:none;
	font-size:1.2em;
	}
	a.mainmenulink:link, a.mainmenulink:visited , a.mainmenulink:active{
	color:white;
	}
	a.mainmenulink:hover {
	color:#ffcf88;
	}
	a.mainmenulink_on {
	float:left;
	font-size:1.25em;
	display:block;
	color:#ffcf88;
	text-align:center;
	padding:0.1em 3em 0.25em 3em;
	text-decoration:none;
	font-size:1.2em;
	}
	a.mainmenulink_disabled {
	float:left;
	display:block;	
	text-align:center;
	padding:0.1em 3em 0.25em 3em;
	text-decoration:none;
	font-size:1.2em;
	color:#777879;
	}

	.index_intro {
	border:1px dotted #556677;
	padding-left:2em;
	padding-right:2em;
	max-width:48em;
	margin-bottom:3em;
	}
	h1 {
	font-size:2em;
	border-top:none;
	border-bottom:none;
	text-align:left;
	}
	h2 {
	font-size:1.75em;
	text-align:left;
	}

	.myimg{
	}	
}

/* --------- For desktop (Hires) ---------  */
@media only screen and (min-width: 1800px) { 

	img.mainlogo {
	display:block;position:absolute;top:14%;left:2%;width:24%;min-width:280px;height:auto;z-index:5;		
	}
	p.maincaption {	
	display:inline-block;position:absolute;left:48%;bottom:25%;color:#999999;text-align:center;font-size:1.1em;z-index:4;
	}
	/* Hide the link that should open and close the topnav on small screens */
	#smallmenuicon {
	display:none;
	}
	a.mainmenulink {
	float:left;
	display:block;
	color:white;
	text-align:center;
	padding:0.1em 3em 0.25em 3em;
	text-decoration:none;
	font-size:1.2em;
	}
	a.mainmenulink:link, a.mainmenulink:visited , a.mainmenulink:active{
	color:white;
	}
	a.mainmenulink:hover {
	color:#ffcf88;
	}
	a.mainmenulink_on {
	float:left;
	font-size:1.25em;
	display:block;
	color:#ffcf88;
	text-align:center;
	padding:0.1em 3em 0.25em 3em;
	text-decoration:none;
	font-size:1.2em;
	}
	a.mainmenulink_disabled {
	float:left;
	display:block;	
	text-align:center;
	padding:0.1em 3em 0.25em 3em;
	text-decoration:none;
	font-size:1.2em;
	color:#777879;
	}

	.centered_page {
	min-width:62%;
	padding-left:19%;
	padding-right:19%;
	}
	
	.index_intro {
	border:1px dotted #556677;
	padding-left:2em;
	padding-right:2em;
	max-width:48em;
	margin-bottom:3em;
	}
	h1 {
	font-size:2em;
	border-top:none;
	border-bottom:none;
	text-align:left;
	}
	h2 {
	font-size:1.75em;
	text-align:left;
	}

	.myimg{
		/*max-width:48em;*/
	}
	
}