/***********************
DEFAULT HTML ELEMENTS */

html {height: 100%;}

body{
	font-family: Play, Verdana, sans-serif;
	font-size: 16px;
	/*letter-spacing: 0.035em;*/
	letter-spacing: 0.3px;
	color: #646464;	}

header, main, footer {
	display:block;
	float:none;
	width: 100%;
	height:auto;
	text-align:center;
	border:0px solid black;}

header {position: relative;}

footer	{
	padding-bottom: 10px;
	background-color:#197508;
	}

a	{	
	color:#197508;
	text-decoration: none;
	}
/*a:hover {
	padding-bottom:1px;
	border-bottom:2px solid #2037A8;}*/

form * {
	font-family: Play, Verdana, sans-serif;
	font-size: 1rem; }

/*--- FORM ---*/
input[type=text],
select,
textarea {
	background-color: #D7D7D7;
	border: 1px solid #B4B4B4;
	padding: 5px 8px;
	border-radius: 3px;	}

input[type=text]:focus,
select:focus,
textarea:focus {
	background-color: #C2EEAC;
    border: 1px solid #7EDC50;
	box-shadow: 0 0 8px 2px #9B9B9B; }

input[type=submit],
input[type=reset],
Button {
    background-color: #FA7C00;
    border: 1px solid #B05700;
    color: white;
	font-size: 1.2rem;
	text-shadow: 1px 1px 0px black;
    padding: 6px 15px;
    cursor: pointer;
	letter-spacing:0.6px;
	text-align:center;
	border-radius: 3px;	}

input[type=submit]:hover,
input[type=reset ]:hover,
Button:hover {
    background-color: #46951F;
    border-color: #224810;
    box-shadow:	0px 0px 8px 3px #7D7D7D;}

input[type=CheckBox] { display: none; /* hide the default checkbox */	}
/* DEFAULT HTML ELEMENTS
***********************/


/*********
BRANDING
--- BASED ON LOGO -----
GREEN #29B226
ORANGE #FA7C00
DARK GREEN #197508
LIGHT GRREN #BDEA69
GOLDEN #BCFF18
---- RELATIVE -----
ORANGE #EE9F33
YELLOW #E9EC32
RAF #29A4C2
BLUE #2770B5
the scientific investigation of life
*/

.fc1 {color: #29B226; }	/* GREEN */
.fc2 {color: #197508; }	/* DARK GREEN */
.fc3 {color: #BDEA69; }	/* LIGHT GRREN */
.fc4 {color: #FA7C00; }	/* ORANGE */

.bc1 {background-color: #29B226; }	/* GREEN */
.bc2 {background-color: #197508; }	/* DARK GREEN */
.bc3 {background-color: #BDEA69; }	/* LIGHT GRREN */
.bc4 {background-color: #FA7C00; }	/* ORANGE */
/* BRANDING
************/


/*********
HEADER   */
#logoBar-container {
	display: inline-block;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height:auto;
	background-color: rgba(250, 250, 250, 0.8);
	border-bottom:0px solid #FA7C00;
	z-index:980;
	/*transition: 0.7s ease;*/
	/*border: 0px dotted red;*/
	}

#logoBar {
	display: block;
	float:none;
	width: 85%;
	margin:0px auto;
	/*height: 0;*/
	/*padding:0px;*/
	/*z-index:998;*/
	border: 0px solid black;
	}

#logo {
	display: inline-block;
	float: left;
	font-size:0px;
	margin-left:50px;
	padding:7px 0px;
	/*background-color: white;*/
	border: 0px solid black;
    }

#logo img {
	display: inline-block;
	height:60px;
	}

/* bottom line */
#header-line {
	display: block;
	height:10px;
	margin:0px auto;
	background-color: #FA7C00;
	border-top:1px solid white;
	/*width:100%;*/
	/*padding:0px;*/
	}


/**************
MENU
*/
header nav [id^=drop] { display: none; }
header nav .toggle0 { display: none;}

header nav {
	display: inline-block;	
	position: relative;
	float:right;
	top:42px;
	margin-right: 30px;
	border:0px solid black;
	}

header nav:after {
	content: "";
	display: table;
	clear: both; }

header nav ul {
	float: right;
	list-style: none;
	position: relative;	}

header nav ul li {
	display: inline-block;
	float: left;
	border:0px dotted white;
	}

header nav ul li a {
	display: block;
	padding: 6px 13px 5px 13px;
	color: #29B226;
	text-shadow: 1px 1px 0px black;
	font-size: 1.20rem;
	letter-spacing: 0.08rem;
	font-weight:bold;
	}

header nav ul li a:hover {
	color: white;
	background-color: #FA7C00;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	}

/*	MENU
========*/



/*******************
SLIDESHOW / CAROUSEL
*/
#mss-container {
	display: block;
	font-size:0px;	}

.mss-slides {
	display: inline-block;
	z-index:490;
	overflow: hidden;	}

.mss-slides-inner {
	display: inline-block;
	z-index:490;
	overflow: hidden;
	text-align:center;	}

.mss-slidePhoto {
	display: inline-block;
	width:100%;
	margin:0px auto;
	border:0px solid black;	}

.mss-fadeInOut {
	-webkit-animation:	mss-FadeInOutFrames 8s linear 1 forwards;
	-moz-animation:		mss-FadeInOutFrames 8s linear 1 forwards;
	-ms-animation:		mss-FadeInOutFrames 8s linear 1 forwards;
	-o-animation:		mss-FadeInOutFrames 8s linear 1 forwards;
	animation:			mss-FadeInOutFrames 8s linear 1 forwards;
	}

@-webkit-keyframes mss-FadeInOutFrames {
	0% {opacity: 0;}
    20% {opacity: 1;}
    40% {opacity: 1;}
    85% {opacity: 1;transform: scale(1.07);}
    100% { opacity: 0 }
	}

@-moz-keyframes mss-FadeInOutFrames {
	0% {opacity: 0;}
    20% {opacity: 1;}
    40% {opacity: 1;}
    85% {opacity: 1;transform: scale(1.07);}
    100% { opacity: 0 }
	}

@-ms-keyframes mss-FadeInOutFrames {
	0% {opacity: 0;}
    20% {opacity: 1;}
    40% {opacity: 1;}
    85% {opacity: 1;transform: scale(1.07);}
    100% { opacity: 0 }
	}

@-o-keyframes mss-FadeInOutFrames {
	0% {opacity: 0;}
    20% {opacity: 1;}
    40% {opacity: 1;}
    85% {opacity: 1;transform: scale(1.07);}
    100% { opacity: 0 }
	}

@keyframes mss-FadeInOutFrames {
	0% {opacity: 0;}
    20% {opacity: 1;}
    40% {opacity: 1;}
    85% {opacity: 1;transform: scale(1.07);}
    100% { opacity: 0 }
  	}

/* Next & previous buttons */
.mss-prevPhoto,
.mss-nextPhoto {
	cursor: pointer;
	position: absolute;
	top: 50%;
	padding: 15px 18px;
	color: white;
	background-color:black;
	opacity:0.5;
	font-weight: bold;
	font-size: 1.8rem;
	border:1px solid white;
	z-index:900;
	transition: 0.7s ease;	}

/* Position the "next button" to the right */
.mss-prevPhoto {
	left: 0;
	border-radius: 0 5px 5px 0;
	border-left-width: 0px;	}

.mss-nextPhoto {
	right: 0;
	border-radius: 5px 0 0 5px;
	border-right-width: 0px;}

/* On hover, add a black background color with a little bit see-through */
.mss-prevPhoto:hover,
.mss-nextPhoto:hover { opacity:1; }

/* The dots/bullets/indicators */
#mss-dots {
	display: inline-block;
	position: absolute;
	bottom: 6px;
	left:0px;
	right:0px;
	margin: 0px auto;
	z-index:900;
	border: 0px solid white;
	}

.mss-dot {
	display: inline-block;
	cursor:pointer;
	height: 18px;
	width: 18px;
	margin: 0px 7px;
	background-color: grey;
	border-radius: 50%;
	border:1px solid white;
	transition: background-color 0.6s ease;
	}

.mss-dot:last-child {margin-right: 0px;}

.active, .mss-dot:hover {
	background-color: #7DFF43;
	border:1px solid black;
	}
/* SLIDESHOW
============*/



/**************
CONTAINERS   */
.cont {
	display:inline-block;
	width:85%;
	padding-left:12px;
	padding-right:12px;
	margin:0px auto;
	border:0px solid black;	}

.LBox {
	display: inline-block;
	float: left;
	border:0px dotted white;}

.RBox {
	display: inline-block;
	float: right;
	border:0px dotted white;}
/* CONTAINERS 
**************/



/***********
FOOTER    */
footer #foot-container {
	display:inline-block;
	width: 85%;
	padding:0px 20px;
	margin:10px auto;
	}

footer #foot-left,
footer #foot-right {
	display: inline-block;
	}

footer #foot-left {
	float:left;
	text-align:left;}

footer #foot-right {
	float: right;
	text-align:right;}

footer #privacyPolicy,
footer #developedBy  {font-size:0.9rem;}

footer HR {
    display:block;
    border: 0;
    height: 1px;
    -webkit-background-image:linear-gradient(to right, rgba(0, 107, 164, 0), rgba(255, 255, 255, 1), rgba(0, 107, 164, 0));
    -moz-background-image:	linear-gradient(to right, rgba(0, 107, 164, 0), rgba(255, 255, 255, 1), rgba(0, 107, 164, 0));
    -ms-background-image:	linear-gradient(to right, rgba(0, 107, 164, 0), rgba(255, 255, 255, 1), rgba(0, 107, 164, 0));
    -o-background-image:	linear-gradient(to right, rgba(0, 107, 164, 0), rgba(255, 255, 255, 1), rgba(0, 107, 164, 0));
    background-image:		linear-gradient(to right, rgba(0, 107, 164, 0), rgba(255, 255, 255, 1), rgba(0, 107, 164, 0));
	}

/*  FOOTER END
==============*/


/*=========
LINKS    */

a.text {color:#238C0A;}
a.text:hover {
	padding-bottom:1px;
	border-bottom:2px solid #238C0A; }

.ondark { color: white	}
a.ondark:hover {
	color: #FFDE02;
	border-bottom:2px solid #FFDE02; }

/* LINKS
=========*/



/*=======
 LISTS */
   
.ulist,
.olist {
	text-align:justify;
	list-style-position: inside;
	border:0px solid blue;
	}

.olist {list-style-type: decimal;}

.ulist li {	margin-bottom: 3px;	}

.ulist li::before {
	display: inline-block;
	content: "•";
	color: #29B226;
	width: 0.75em;
  	}

/*.ulist {list-style-type: circle;}*/
/*.ulist li:last-child, .olist li:last-child {margin-bottom:0px;}*/
/* LISTS
***********/


/***********
ANIMATIONS 
****/
.zoom {
	overflow: hidden;
	-webkit-transition: transform 0.6s;
	-moz-transition: transform 0.6s;
	-ms-transition: transform 0.6s;
	-o-transition: transform 0.6s;
	transition: transform 0.6s;
	}

.zoom:hover {
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-o-transform: scale(1.05);
	transform: scale(1.05);
	}
/* ANIMATIONS
*************/



/*********
FORMS	*/
/* style the artificial checkbox */
label.myCheckBox span {
	display: inline-block;
	position: relative;
	height: 20px;
	width: 20px;
	background-color: #E6E6E6;
	border: 1px solid #B4B4B4;
	padding: 5px 8px;
	border-radius: 5px;	}

label.myCheckBox span:hover {
	background-color: #EBFFD7;
    border: 1px solid #B8F67C;
	box-shadow: 0 0 8px 2px #9B9B9B;
	}

/* style its checked state.with a ticked icon */
label.myCheckBox [type=checkbox]:checked + span:before {
	content: '\2714';
	position: absolute;
	top: -3px;
	left: 2px;	}
/* CHECKBOX END */

.error {color:#DE2B08;}
/* FORMS
*************/


/******************
RECORD LISTS (RL) */
div.RL {
	overflow-x:auto;
	margin-top:50px; }

div.RL table {
	max-width:95%;
	border-spacing:2px 0px;
	margin:0px auto;}

div.RL td {
	padding: 9px 10px;
	border-radius: 5px;
	border: 1px solid white;}

div.RL tr.RLtitle td {
	color:white;
	background-color: #1190D8;
	border-color: #0B5C8A;
	text-shadow: 1px 1px 0px black;
	letter-spacing: 1px; }

div.RL tr.RLdataEven:nth-child(2n) td,
div.RL tr.RLdataOdd:nth-child(2n+1) td {
 	background-color: white;
	border-color: white;}

div.RL tr.RLdataEven:nth-child(2n+1) td,
div.RL tr.RLdataOdd:nth-child(2n) td {
 	background-color: #E1E1E1;
	border-color: #E8E8E8; }

div.RL tr.RLdataEven:hover td,
div.RL tr.RLdataOdd:hover  td {
	background-color: #C8E2FA;
	border-color: #54A3EC;
	text-shadow: 1px 1px 0px white;	}

div.RL tr.RLdataEvenNoLink:nth-child(2n) td,
div.RL tr.RLdataOddNoLink:nth-child(2n+1) td {
 	background-color: white;
	border-color: white;}

div.RL tr.RLdataEvenNoLink:nth-child(2n+1) td,
div.RL tr.RLdataOddNoLink:nth-child(2n) td {
 	background-color: #E1E1E1;
	border-color: #E8E8E8; }

/* RECORD LISTS (RL)
*********************/


/************
VARIOUS  */
.page-title {
	font-family: Vollkorn, Verdana, sans-serif;
	font-weight: bold;
	font-size: 1.7rem;
	text-align:left;
	letter-spacing:0.1rem;
	text-shadow: 1px 1px 1px black;
	border:0px solid black;
	}

HR.ora,
HR.gre {
    display: block;
    border: 0;
    height: 3px;}

HR.ora {background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(250, 124, 0, 1), rgba(255, 255, 255, 0)); }
HR.gre {background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(41, 178, 38, 1), rgba(255, 255, 255, 0)); }

.pgraph {
	margin-bottom:8px;
	text-align: justify;
	line-height: 130%;	}

.pgraph:last-child {margin-bottom:0px;}

.txtcols {columns: 2 auto;}

/* Titles in privacy-policy */ 
.TextTitleU,
.TextTitle {
	color:#197508;
	/*
	margin:30px 0px 5px 0px;
	font-weight:bold;
	text-align:left;
	*/
	}

.TextTitleU {
	border-bottom: 2px solid #197508;
	padding-bottom: 2px;}

.PageText-Links-Title {
	display: inline-block;
	float:left;
	padding-bottom:3px; 
	border-bottom:2px solid #DB060A; 
	margin-top:10px;	}

.PageText-Link {
	display:block;
	margin-top:7px;	}
/* VARIOUS
**************/


/**************
MESSAGE
*/
.messbox {
	max-width:500px;
	width:90%;
	background-color: #EBF5D5;
	border: 3px solid #29B226;
	border-radius: 5px;
	padding: 15px 30px;
	margin:50px auto 200px auto;	}
/* MESSAGE
**************/



/**************************************
			M E D I A
**************************************/


/*==================*/
@media all and (max-width: 1240px) {

#logoBar, .cont {width: 100%;}

.homenews {width: 100%;}

footer #foot-container {
	width: 100%;
	padding:10px 20px;
	}
}

/****** menu change ******
@media all and (max-width: 1200px) {

	div.pgraph {
		text-align: left;
		line-height: 130%;
	}
}
*/


/* logo bar to the edge */
@media all and (max-width: 1060px) {

.page-title {font-size: 1.5rem;}

.pgraph, .ulist, .olist {
	text-align: left;
	/*line-height: 130%;*/
}

#logo {margin-left:10px;}

header nav {
	top:47px;
	margin-right:0px;
	}
header nav ul li a {
	padding: 5px 8px 4px 8px;
	font-size: 1.0rem;
	letter-spacing: 0.06rem;
	}
}

/* logo height 50 */
@media all and (max-width: 900px) {

	.page-title {font-size: 1.3rem;}

	#logo {padding:7px 0px;}
	#logo img {height:50px;}
	
	header nav {top:38px;}
	header nav ul li a {
		padding: 4px 5px 3x 5px;
		font-size: 0.9rem;
		letter-spacing: 0.05rem;
		}
	
	.txtcols {columns: 1 auto;}
	.pgraph {
		text-align: justify;
		/*line-height: 130%;*/
	}
}


/****** logo height 40 ******/
@media all and (max-width: 730px) {

/*#logo img {height:40px;}*/

header nav {top:40px;}
header nav ul li a {
	/*padding: 3px 5px 2px 5px;*/
	font-size: 0.8rem;
	}


/****** logo height 40 ******/
@media all and (max-width: 700px) {

.page-title {font-size: 1.2rem;}
.cont {
	padding-left:8px;
	padding-right:8px;
	}

.pgraph {
	text-align: left;
	/*line-height: 130%;*/
}

/*----------------*/
.mss-slides {
	height:250px;
	overflow-x: hidden;
	}

.mss-slides-inner {
	height:125px;
	overflow-x: hidden;
	}

.mss-slidePhoto {
	width:auto;
	overflow-x: hidden;
	height:100%;
	}

.mss-prevPhoto,
.mss-nextPhoto {
	padding: 7px 10px;
	font-size: 1.3rem;
	opacity:0.3;
	}
/*----------------*/
footer {padding-bottom:0px;}

#foot-left .table:first-child .row:first-child div { padding-bottom:2px}
#foot-left .table:ntΩh-child(2) .row div { padding-bottom:2px}
/*----------------*/
#header-line { height:5px; }
header nav {right:0px;}			
header nav .menu {display: none}
header nav .toggle0 {

	display: inline-block;
	position:absolute;

	bottom:-20px;
	right:20px;
	
	background-color: #FA7C00;
	color: #fff;

	padding: 5px 14px;
	font-size: 1.3rem;
	font-weight:bolder;
	text-shadow: 1px 1px 0px black;
	border:1px outset;	}

header nav .toggle0:hover {
	color: white;
	background-color: #46951F;
	cursor: pointer;}

header nav [id=drop]:checked + ul {
	display: block;
	position:absolute;
	float:right;
	top:20px;
	right:20px;
	z-index:511;
	width:180px;
	border:1px solid #75DA52;
	background-color:#C2EEAC;
	text-align:left;	}
	
header nav ul li {
	display: block;
	width: 100%;
	padding:0;
	margin:0;
	border-bottom:1px solid #75DA52;}

header nav ul li:last-child {border-bottom-width: 0;}

/*header nav ul li.menu-lang {display:none}*/

header nav ul li a {
	font-size: 1.1rem;
	margin-left:0px;
	padding:9px 15px;
	color:#197508;
	text-shadow:1px 1px white;
	border-width:0px;
	border-radius: 0px;}
	
header nav ul li a:hover {
	background-color: #29B226;
	color:white;
	text-shadow:1px 1px black;
	border-radius: 0px;	}
}

/****** menu change ******/
@media all and (max-width: 500px) {
#btn2Top {
	bottom: 25px;
	right: 10px;}
.mss-dot {
	height: 15px;
	width: 15px;}
footer {font-size:90%}
footer #foot-container {padding:0px 10px;}
}

/****** menu change ******/
@media all and (max-width: 400px) {
footer #foot-right { display: none; }
.pgraph {line-height: 115%;}
}