@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:#040A09;
color:0xAAAAAF;
font-family: 'Open Sans', 'Noto Sans', sans-serif;
font-size:15px;
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%;
height:8em;
background-color:black;
z-index:16;

}
.bannercontainer {
text-align:center;display:block;position:relative;width:100%;height:100%;margin:0;padding:0;
background-image: url('../../assets/BEAT_RUNNER__site_banner-dim.jpg');
background-clip: padding-box;
}
img.banner {
/*display:block;position:relative;*/
width:100%;margin:0;padding-bottom:1em;padding-top:1em;opacity:0.68;
}
img.mainlogo {
/*top:0%;left:10%;width:auto;height:100%;z-index:5;*/
width:19%;top:0%;
}
p.maincaption {
display:none;
}

 /* FOOTER */
div.rootboxfooter {
display:block;
position:fixed;
bottom:0;
width:100%;
height:2em;
font-size:1em;
background-color:#282C2F;
color:#666666;
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.5em;
}
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:#CDcf88;
}
a.mainmenulink_on {
float:left;
display:block;
text-align:center;
padding:0.25em 0.25em;
text-decoration:none;
font-size:1.25em;
color:#Cfcf88;
}
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.25em;
text-align:center;
}
.rootboxcontent {
display:block;position:relative;
max-width:100%;
padding-bottom:0em;
background-image: url('../../assets/big_bg.jpg');background-repeat:repeat;
}
.rootboxcontent a {
color:#4488FF;
text-decoration:none;
}
.index_intro {
padding:1em;
padding-bottom:3em;
font-size:1.0em;
margin-top:1em;
margin-bottom:1em;
background-color:#00000077;color:#778F9F;
border:1px dotted #223344;
}
.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%;}
  
	.rootboxheader {
	height:12em;
	}
	
	.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%;}
  
	.rootboxheader {
	height:12em;
	}
	
	/* 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;
	}
		
	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%;}
  
	.rootboxheader {
	height:16em;
	}
	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;
	}

	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) { 

	body {
		margin-left: 19%;
		margin-right: 19%;
		background-color: #101010;
	}
	.rootboxheader {
	height:24em;
	}
	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.0em;
	}
	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;
	}

	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;*/
	}
	
	.index_intro {
		text-align:center;
	}	
}