#main_container.wait, #main_container .page.wait { min-height: 250px; }

@font-face {
	font-family: "AbadiMT";
	src: url("fonts/Roboto-Regular.ttf");
}
@font-face {
	font-family: "AbadiMT-ExtraLight";
	src: url("fonts/Roboto-Light.ttf");
}

@keyframes fadeInAnimation_left {
	0% {
    transform: translateX(-10%);
    opacity: 0;
	}
	100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes fadeInAnimation_right {
	0% {
    transform: translateX(10%);
    opacity: 0;
	}
	100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes fadeInAnimation_up {
	0% {
    transform: translateY(10%);
    opacity: 0;
	}
	100% {
    transform: translateY(0%);
    opacity: 1;
  }
}
html { scroll-behavior: smooth; }
body { font-family: "AbadiMT-ExtraLight";
    background-color: #FAFAFA;
    color: #202C3A;
margin: 0;
    padding: 0;	}
header {
	position: fixed; top: 0; left: 0; right: 0;
	background-color: #FAFAFA; background-image: url('img/insilicare.png'); background-repeat: no-repeat; background-size: 150px auto; background-position: 20px 20px;
	padding: 10px; text-align: right;
	box-shadow: 0 4px 10px rgba(32, 44, 58, 0.3);
}
header > div { display: inline-block; vertical-align: top; padding-right: 16px;}

header > nav { display: inline-block; position:relative;}

header nav a:hover { color: #007EA7;}

/* Hide the menu items by default on small screens */
header > nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

header > nav ul li {
  display: inline-block;
  border-radius: 8px;
}

header > nav ul li a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  background-color: #FAFAFA;
  border-radius: 0 0 8px 8px;
  color: #202C3A;
  line-height: 36px; 
}

/* Add a hamburger button for mobile screens */
.menu-toggle {
  display: none;
  background-color: #FAFAFA;
  color: #007EA7;
  width:100px;
  padding:10px;
  cursor: pointer;
  text-align:center;
  line-height: 36px;
}

a.none {color:#202C3A; outline: none; text-decoration: none;}
a.none:visited {color:#202C3A;}
a.none:hover {border-bottom: 0px solid;}

a.light {color:#FAFAFA; font-size:16px; border-bottom: 1px solid; outline:none;text-decoration: none;}
a.light:visited {color:#FAFAFA; font-size:16px;}
a.light:hover {border-bottom: 0px solid; font-size:16px;}

main { 	position: fixed; top: 68px; bottom: 120px; left: 0; right: 0; 
		background-color: #FAFAFA; color: #202C3A; overflow: auto; padding: 0px; }

p { text-align:justify;}
p.center {text-align:center;}
p.small {text-align:center; font-size:16px;}
p.medium {width:50%; display:inline-block;}
b{font-weight: bold;}
li {
	list-style: none;	
}

li::marker {
  color: #007EA7;
}
div.container_left { background-image:url('img/bg.png');  background-repeat: no-repeat; background-size: auto;
			display: inline-block; vertical-align: top; width:100%; min-height: 350px;
			color: #FAFAFA; background-color: #202C3A;
			animation: fadeInAnimation_left ease 1s; animation-iteration-count: 1; animation-fill-mode: forwards;}

div.content_left { padding:32px; min-width: 400px; max-width:60%}
div.content_center { display: inline-block; text-align: center; padding:32px; min-width: 400px; max-width:100%;}

div.container_right { background-image:url('img/comp.png');  background-repeat: no-repeat; background-size: auto 115%;
	display: inline-block; vertical-align: top; min-height: 350px; width:100%; text-align:right;
					background-color: #FAFAFA; 
					animation: fadeInAnimation_right ease 1s; animation-iteration-count: 1; animation-fill-mode: forwards;}

div.content_right { display: inline-block; padding:32px; min-width: 400px; max-width:60%; float:right; background-color: #FAFAFAEE;
}
div.container_right_blank {
	display: inline-block; vertical-align: top; min-height: 350px; width:100%; text-align:right;
					background-color: #FAFAFA; 
					animation: fadeInAnimation_right ease 1s; animation-iteration-count: 1; animation-fill-mode: forwards;}
div.container_left_blank {
			display: inline-block; vertical-align: top; width:100%; min-height: 350px;
			color: #FAFAFA; background-color: #202C3A;
			animation: fadeInAnimation_left ease 1s; animation-iteration-count: 1; animation-fill-mode: forwards;}
			
div.container_left_gluco {
			background-image:url('img/toolbox.svg');  background-repeat: no-repeat; background-size: contain; background-position:right center;
			display: inline-block; vertical-align: top; width:100%; min-height: 350px;
			color: #FAFAFA; background-color: #202C3A;
			animation: fadeInAnimation_left ease 1s; animation-iteration-count: 1; animation-fill-mode: forwards;}

div.container_left_adv {
			display: inline-block; vertical-align: top; width:100%; min-height: 350px;
			color: #FAFAFA; background-color: #202C3A; text-align:center;
			animation: fadeInAnimation_up ease 1s; animation-iteration-count: 1; animation-fill-mode: forwards;}
			
div.container_left_fern { background-image:url('img/fern.svg');  background-repeat: no-repeat; background-size: auto; background-position:right center;
display: inline-block; vertical-align: top; width:100%; min-height: 350px;
color: #FAFAFA; background-color: #202C3A; text-align:center;
animation: fadeInAnimation_left ease 1s; animation-iteration-count: 1; animation-fill-mode: forwards;}

div.container_right_info { background-image:none;  background-repeat: no-repeat; background-size: auto 75%; background-position:32px center;
	display: inline-block; vertical-align: top; min-height: 350px; width:100%; text-align:right;
					background-color: #FAFAFA;
animation: fadeInAnimation_right ease 1s; animation-iteration-count: 1; animation-fill-mode: forwards;					}

div.container_right_tool {
	background-image:url('img/comp2.png');  background-repeat: no-repeat; background-size: 35%; background-position:32px center;
	display: inline-block; vertical-align: top; min-height: 500px; width:100%; text-align:right;
					background-color: #FAFAFA; 
					animation: fadeInAnimation_right ease 1s; animation-iteration-count: 1; animation-fill-mode: forwards;}

div.container_right_world {
	background-image:url('img/world.png');  background-repeat: no-repeat; background-size: contain; background-position:32px center;
	display: inline-block; vertical-align: top; min-height: 300px; width:100%; text-align:right;
					 background-color: #FAFAFA; 
					animation: fadeInAnimation_right ease 1s; animation-iteration-count: 1; animation-fill-mode: forwards;}

.tiles { display: inline-block; overflow: hidden; transition: transform 0.5s;
margin:-32px 16px 48px 16px; padding:16px; background-color:#FAFAFA;color: #202C3A; box-shadow: 0px 4px 10px #202C3A40; border: 0px solid #202C3A; border-radius:32px; width:20%; max-width:250px; min-width:250px; min-height:310px; text-align:center;}

.tiles:hover {transform: scale(1.1);}

div.container_contact {
			display: inline-block; vertical-align: top; width:100%; min-height: 350px;
			color: #202C3A; background-color: #FAFAFA; text-align:center;
			animation: fadeInAnimation_up ease 1s; animation-iteration-count: 1; animation-fill-mode: forwards;}
.circle { transition: transform 0.5s; display: inline-block; overflow: hidden; font-size:16px;
margin:-16px 16px 32px 16px; padding:16px; background-color:#FAFAFA; box-shadow: 0px 4px 10px #202C3A40; border: 100% solid #202C3A; border-radius:32px; width:40%; max-width:250px; min-width:160px; text-align:center;}
.circle:hover {transform: scale(1.1);}
.highlight {color:#007EA7;}
			
h2 { font-family: "AbadiMT"; text-align: center; font-weight: 500; font-size: 20px; border-bottom: 1px solid #007EA7; max-width:100%;}
h3 { font-family: "AbadiMT"; text-align: center; color:#007EA7 ;font-weight: 500; font-size: 20px; padding:16px; margin:0;}
.tiny {font-size:12px;}

hr { height: 1px; border: 0; border-top: 1px solid #FAFAFA; }


h1 { font-family: "AbadiMT";  text-align: center; font-weight: 500; font-size: 24px; min-width: 300px; border-bottom: 1px solid #007EA7; padding: 4px 8px; }

input[type=text] { width:100%; max-width:250px; margin: 12px; padding:12px; box-sizing: border-box; font-family: "AbadiMT"; font-size: 16px; box-shadow: 2px 2px 3px #202C3A; border: 1px solid #202C3A; border-radius: 5px;}
input[type=text]:focus {box-shadow: 3px 3px 3px #007EA7; border: 1px solid #007EA7; outline: none;}

input[type=submit] { width:100px; margin:6px; padding:6px; font-family: "AbadiMT"; font-size: 16px;}

footer { 
	position: fixed; bottom: 0; left: 0; right: 0; 
	background-color: #202C3A; overflow: auto;
	color: #FAFAFA; text-align: right; font-family: "AbadiMT-ExtraLight", serif; padding: 10px 32px 10px 0px;
	border-top: 0px solid #FAFAFA;
	box-shadow: 0 -4px 10px rgba(32, 44, 58, 0.3);
	}
	
footer > div { display: inline-block; font-size: 12px; width:60%; min-width:456px;}

.round {border-radius:32px;}