html
{
	font-size:1em;
}

body
{
/*	min-width: 825px;*/
	background: #f8f9fa;
	color: #000;
	text-align: left;
	font: 1rem verdana, sans-serif;
	padding: 0px;
	margin:0px;
}

h1
{
	text-align: center;
	color: #FFF;
	text-shadow: 5px 5px 10px black;
	font-size: 4em;
	margin-top: 0em;
	margin-left: 0em;
	margin-bottom: 82px;
	padding-top: 10px;
	-khtml-animation: fadein 6s ease-out;
	-webkit-animation: fadein 6s ease-out;
	-moz-animation: fadein 3s ease-out;
	-ms-animation: fadein 3s ease-out;
	-o-animation: fadein 3s ease-out;
    animation: fadein 3s ease-out;
}

@-khtml-keyframes fadein {
    from {
		-khtml-opacity: 0.0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
		-moz-opacity: 0.0;
		opacity: 0.0;
	}
    to   {
		-khtml-opacity: 1.0;		
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: alpha(opacity=100);
		-moz-opacity: 1.0;
		opacity: 1.0;
	}
}

@-webkit-keyframes fadein {
    from {
		-khtml-opacity: 0.0;		
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
		-moz-opacity: 0.0;
		opacity: 0.0;
	}
    to   {
		-khtml-opacity: 1.0;		
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: alpha(opacity=100);
		-moz-opacity: 1.0;
		opacity: 1.0;
	}
}

@-moz-keyframes fadein {
    from {
		-khtml-opacity: 0.0;		
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
		-moz-opacity: 0.0;
		opacity: 0.0;
	}
    to   {
		-khtml-opacity: 1.0;		
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: alpha(opacity=100);
		-moz-opacity: 1.0;
		opacity: 1.0;
	}
}

@-ms-keyframes fadein {
    from {
		-khtml-opacity: 0.0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
		-moz-opacity: 0.0;
		opacity: 0.0;
	}
    to   {
		-khtml-opacity: 1.0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: alpha(opacity=100);
		-moz-opacity: 1.0;
		opacity: 1.0;
	}
}

@-o-keyframes fadein {
    from {
		-khtml-opacity: 0.0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0);
		-moz-opacity: 0.0;
		opacity: 0.0;
	}
    to   {
		-khtml-opacity: 1.0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: alpha(opacity=100);
		-moz-opacity: 1.0;
		opacity: 1.0;
	}
}

h2
{
	color: #4282ce;
	margin-left: 0.2em;
	margin-top: 1.25em;
	margin-bottom: 1.25em;
}

h3
{
	margin-left: 0.6em;
	margin-top: 0em;
	margin-bottom: 1.1em;
	font-size: 1.3rem;
}
h3.right
{
	text-align: right;
}

p
{
	margin-left: 1em;
	margin-top: 0em;
	margin-bottom: 1.0em;
}

div.container1
{
	text-align: justify;
	background: #FFF;
/*	max-width: 1024px;*/
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
}
div.innercontainer
{
	padding-top: 30px;
	padding-right: 10px;
	padding-bottom: 1px;
	padding-left: 10px;
}

div.footer
{
/*	max-width: 1024px;*/
/*	background: #c9dbf7;*/
	background: url(/images/CEOSBanner.jpg) no-repeat 0 0;
    background-size: cover;
    background-position-y: center;
	border-top: solid 10px #4282ce;
	margin-left: auto;
	margin-right: auto;
	padding: 0px 10px 0px 10px;
}

div.footer div
{
	padding: 5px 0;
}

p.no-margin
{
	margin-bottom: 0em;
}

ul
{
	padding-left: 50px;
	margin-top: 0em;
	margin-bottom: 1.0em;
}

img
{
	border: none;
	margin: 10px;
}

h3::after {
	display:block;
	width:100%;
	content:"";
	height: 1px;
	border-width: 0;
	background-image: -khtml-linear-gradient(to right,#4282ce,rgba(255, 255, 255, 0));
	background-image: -webkit-linear-gradient(to right,#4282ce,rgba(255, 255, 255, 0));
	background-image: -moz-linear-gradient(to right,#4282ce,rgba(255, 255, 255, 0));
	background-image: -ms-linear-gradient(to right,#4282ce,rgba(255, 255, 255, 0));
	background-image: -o-linear-gradient(to right,#4282ce,rgba(255, 255, 255, 0));
	background-image: linear-gradient(to right,#4282ce,rgba(255, 255, 255, 0));
}
h3.right::after {
	background-image: -khtml-linear-gradient(to right,rgba(255, 255, 255, 0),#4282ce);
	background-image: -webkit-linear-gradient(to right,rgba(255, 255, 255, 0),#4282ce);
	background-image: -moz-linear-gradient(to right,rgba(255, 255, 255, 0),#4282ce);
	background-image: -ms-linear-gradient(to right,rgba(255, 255, 255, 0),#4282ce);
	background-image: -o-linear-gradient(to right,rgba(255, 255, 255, 0),#4282ce);
	background-image: linear-gradient(to right,rgba(255, 255, 255, 0),#4282ce);
}

hr {
	display:block;
	width:100%;
	height: 1px;
	border-width: 0;
	background-color: #4282ce;
}

div.banner
{
	margin-left: auto;
	margin-right: auto;
	width: 100%;	
/*	max-width: 1024px;*/
	height: 150px;
	background: url(/images/CEOSBanner.jpg) no-repeat 0 0;
	background-position: center;
	background-size: cover;
	border-bottom: solid 10px #4282ce;
}
nav
{
	font-size: large;
	padding-left: 65px;
	width:100%;
/*	max-width: 1024px;*/
}
ul.navbar-nav
{
	display: flex;
	justify-content: space-evenly;
	width: 100%;
	z-index: 1000;
}
.active>.nav-link
{
	color: #4282ce !important;
}
div.menu
{
	display:flex;
	background-color: #f8f9fa;
	top:0;
	position:sticky;
	z-index:2000;
	opacity: 0.95;
	box-shadow: 0 3px 6px rgba(0,0,0,0.25);
}
div.drone
{
	transform-origin: center;
	z-index:999;
	position:relative;
	top: -140px;
	right: 150px;
	margin-left:auto;
	margin-right:10px;
	width: 280px;
	height: 200px;
	background: url(/images/DroneSprite2.png) no-repeat 0 0;
	background-size: 200%;
	-khtml-animation: sprite 0.01s infinite step-start 0s,droneTravel 10s infinite ease-in 0s;
	-webkit-animation: sprite 0.01s infinite step-start 0s,droneTravel 10s infinite ease-in 0s;
	-moz-animation: sprite 0.01s infinite step-start 0s,droneTravel 10s infinite ease-in 0s;
	-ms-animation: sprite 0.01s infinite step-start 0s,droneTravel 10s infinite ease-in 0s;
	-o-animation: sprite 0.01s infinite step-start 0s,droneTravel 10s infinite ease-in 0s;
	animation: sprite 0.01s infinite step-start 0s,droneTravel 10s infinite ease-in 0s;
}

@-khtml-keyframes sprite {
    0% {
		background-position: 0% 0%;
	}
    50% {
		background-position: 100% 0%;
	}
	100% {
		background-position: 0% 0%;
	}
}

@-webkit-keyframes sprite {
    0% {
		background-position: 0% 0%;
	}
    50% {
		background-position: 100% 0%;
	}
	100% {
		background-position: 0% 0%;
	}
}

@-moz-keyframes sprite {
    0% {
		background-position: 0% 0%;
	}
    50% {
		background-position: 100% 0%;
	}
	100% {
		background-position: 0% 0%;
	}
}

@-ms-keyframes sprite {
    0% {
		background-position: 0% 0%;
	}
    50% {
		background-position: 100% 0%;
	}
	100% {
		background-position: 0% 0%;
	}
}

@-o-keyframes sprite {
    0% {
		background-position: 0% 0%;
	}
    50% {
		background-position: 100% 0%;
	}
	100% {
		background-position: 0% 0%;
	}
}

@keyframes sprite {
    0% {
		background-position: 0% 0%;
	}
    50% {
		background-position: 100% 0%;
	}
	100% {
		background-position: 0% 0%;
	}
}

@-khtml-keyframes droneTravel
{
  0% {
    -khtml-animation-timing-function: cubic-bezier(0.63, 0.13, 0.39, 0.38)
  }
  50% {
    top: -140px;
    right: 80px;
	width: 300px;
    -khtml-animation-timing-function: linear;
  }
  75% {
    top: -130px;
    right: 20px;
	width: 335px;
    -khtml-animation-timing-function: cubic-bezier(0.28, 0.27, 0.09, 0.99)
  }  
  100% {
    -khtml-animation-timing-function: ease-in-out;
  }
}

@-webkit-keyframes droneTravel
{
  0% {
    -webkit-animation-timing-function: cubic-bezier(0.63, 0.13, 0.39, 0.38)
  }
  50% {
    top: -140px;
    right: 40px;
	width: 300px;
    -webkit-animation-timing-function: linear;
  }
  75% {
    top: -130px;
    right: 20px;
	width: 335px;
    -webkit-animation-timing-function: cubic-bezier(0.28, 0.27, 0.09, 0.99)
  }  
  100% {
    -webkit-animation-timing-function: ease-in-out;
  }
}

@-moz-keyframes droneTravel
{
  0% {
    -moz-animation-timing-function: cubic-bezier(0.63, 0.13, 0.39, 0.38)
  }
  50% {
    top: -140px;
    right: 40px;
	width: 300px;
    -moz-animation-timing-function: linear;
  }
  75% {
    top: -130px;
    right: 20px;
	width: 335px;
    -moz-animation-timing-function: cubic-bezier(0.28, 0.27, 0.09, 0.99)
  }  
  100% {
    -moz-animation-timing-function: ease-in-out;
  }
}

@-ms-keyframes droneTravel
{
  0% {
    -ms-animation-timing-function: cubic-bezier(0.63, 0.13, 0.39, 0.38)
  }
  50% {
    top: -140px;
    right: 40px;
	width: 300px;
    -ms-animation-timing-function: linear;
  }
  75% {
    top: -130px;
    right: 20px;
	width: 335px;
    -ms-animation-timing-function: cubic-bezier(0.28, 0.27, 0.09, 0.99)
  }  
  100% {
    -ms-animation-timing-function: ease-in-out;
  }
}

@-o-keyframes droneTravel
{
  0% {
    animation-timing-function: cubic-bezier(0.63, 0.13, 0.39, 0.38)
  }
  50% {
    top: -140px;
    right: 40px;
	width: 300px;
    -o-animation-timing-function: linear;
  }
  75% {
    top: -130px;
    right: 20px;
	width: 335px;
    -o-animation-timing-function: cubic-bezier(0.28, 0.27, 0.09, 0.99)
  }  
  100% {
    -o-animation-timing-function: ease-in-out;
  }
}

@keyframes droneTravel
{
  0% {
    animation-timing-function: cubic-bezier(0.63, 0.13, 0.39, 0.38);
    transform: rotate(4deg);
  }
  50% {
    top: -100px;
    right: 40px;
	width: 300px;
    animation-timing-function: linear;
  }
  75% {
    top: -80px;
    right: 20px;
	width: 335px;
    animation-timing-function: cubic-bezier(0.28, 0.27, 0.09, 0.99);
    transform: rotate(-8deg);
  }  
  100% {
    animation-timing-function: ease-in-out;
    transform: rotate(4deg);
  }
}

a.image
{
	vertical-align: top;
}

a.image img
{
	vertical-align: top;
}

a.lngFlag, a.lngFlagActive
{
	text-decoration: none;
	display:inline-block;
	width: 32px;
	height: 23px;
}

a.lngFlag
{
	border: 2px solid transparent;
}

a.lngFlagActive
{
	border: 2px inset #FFF;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

div.languages img
{
	margin: 0px;
	position: relative;
	top: -2px;
}

div.languages
{
	padding-left: 10px;
	margin: auto 0;
	width: 110px;
	height: 23px;
}

div.block
{
	width: 50%;
	margin-right: 5px;
	padding-top: 10px;
	padding-right: 5px;
	-khtml-box-shadow: 5px 5px 5px #bbd2f9;
	-webkit-box-shadow: 5px 5px 5px #bbd2f9;
	-moz-box-shadow: 5px 5px 5px #bbd2f9;
	box-shadow: 5px 5px 5px #bbd2f9;
	border: 1px solid #4c7fbc;
	margin-bottom: 20px;
	background-image: -khtml-linear-gradient(to bottom,#9ac0fe,rgb(241, 241, 241));
	background-image: -webkit-linear-gradient(to bottom,#9ac0fe,rgb(241, 241, 241));
	background-image: -moz-linear-gradient(to bottom,#9ac0fe,rgb(241, 241, 241));
	background-image: -o-linear-gradient(to bottom,#9ac0fe,rgb(241, 241, 241));
	background-image: linear-gradient(to bottom,#9ac0fe,rgb(241, 241, 241));
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

a[href^="mailto:"]:before {
    content: "\2709  ";
}

ol li {
	margin-top: 5px;
}

div#aids {
	width: 280px;
	padding-right: 20px;
}

@media only screen and (max-width: 1140px) {
    div#aids {
        width: 100%;
		padding-right: 0px;
    }
	div#partners {
		width: 100%;
	}
}

ul.actions {
	display: flex;
	flex-direction: column-reverse;
}

ol.publications {
	display: flex;
	flex-direction: column-reverse;
}

@media only screen and (min-width: 1024px) {
	div#droneinfo{
		display: flex;
		justify-content: space-around;
	}
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
	
	a img {
		zoom: 300%;
	}
	div.languages img
	{
		top: -1px;
	}
	div.block {
		width:100%;
/*		padding-right:50px;*/
	}

	div.block a img {
		zoom: 150%;
	}
	div.languages a img {
		zoom: 100%;
	}	
	div.languages {
		zoom: 300%;
	}
	div.footer img, div.footer a img {
		zoom: 200%;
	}
	nav {
		zoom: 300%
	}
	div.banner, div.container1, div.footer
	{
		max-width: 100%;
	}
	div#drone {
		margin-top: 120px;
	}
	img#projectname {
		width: calc(100% - 10px);
		height: auto;
	}
	h1 {
		text-align: right;
		margin-right: 20px;
	}
	h2 {
		font-size: 2.5em;
	}
	h3 {
		font-size: 2.2em;
	}
  .innercontainer ul, .innercontainer ol, p, table {
	  font-size: 4vmin;
	  margin-right:1em;
  }
  ul.actions li ul {
	  font-size:inherit;
	  margin-right: 0;
  }
  ul.actions li img {
	  width: calc(50% - 10px) !important;
  }
  div.ug-theme-default {
	  zoom: 200%;
  }
  
	div#aids {
        width: 100%;
		padding-right: 0px;
    }
	div#partners {
		width: 100%;
	}
	a#homelnk1 {
		display: block !important;
	}
	a#homelnk2 {
		display: none !important;
	}
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
	nav {
		zoom: 150%
	}
	div.block {
		width:50%;
		margin-right: 20px;
	}
	.innercontainer ul, .innercontainer ol, p, table {
/*	  font-size:2em;*/
	  }
	h1 {
/*		font-size: 5.0em;*/
	}
	h2 {
/*		font-size: 4.0em;*/
	}
	h3 {
/*		font-size: 3.0em;*/
	}

  div.ug-theme-default {
	  zoom: 150%;
  }	
}
/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
	div.bigblock {
		display: inline-block !important;
	}
	ul.actions li img {
	  width: calc(80% - 10px) !important;
  }
}