@font-face {
  font-family: Agile;
  src: url(fonts/Agile-Bold.otf);
}

@font-face {
  font-family: Agile;
  src: url(fonts/Agile-Black.otf);
  font-weight:bold;
}

body, html {
	width:100%;
	overflow:auto;
	margin:0px auto; 
	font-family: 'Agile';
}

.text-white {
	color:#ffffff;
}

.text-lblue {
	color:#0084ff;
}

.text-dblue {
	color:#282c91;
}

h1 {
	text-align:center;
	font-weight:bold;
	font-size:60px;
	text-shadow: 1px 1px 2px rgba(64, 64, 64, 1);
	margin-top:145px;
}

.page {
	width:1920px;
	height:1080px;
	position:fixed;
}

#jaarkeuze {
	background-image:url(img/achtergrond_1.png);
	z-index:1;
}


#zeehondenoverzicht {
	background-image:url(img/achtergrond_2.png);
	z-index:2;
	display:none;
}

#zeehond {
	background-image:url(img/achtergrond_3.png);
	z-index:3;
	display:none;
}

#adoptieouder {
	background-image:url(img/achtergrond_4.png);
	z-index:4;
	display:none;
}

#aantalreddingen {
	background-image:url(img/achtergrond_4.png);
	z-index:5;
	display:none;
}

#locatiesreddingen {
	background-image:url(img/achtergrond_4.png);
	z-index:5;
	display:none;
}

#maandreddingvrijlating {
	background-image:url(img/achtergrond_4.png);
	z-index:5;
	display:none;
}

#gewichtreddingvrijlating {
	background-image:url(img/achtergrond_4.png);
	z-index:5;
	display:none;
}

.taalkeuze {
	position:absolute;
	left:1660px;
	width:190px;
	height:120px;
}

.taalkeuze img {
	width:44px;
	height:44px;
	margin-top:38px;
	margin-right:25px;
}

.taalkeuze img.active {
	border:3px solid #ffffff;
	border-radius:22px;
}

.taalkeuze img:last-of-type {
	margin-right:0;
}

.terug {
	position:absolute;
	left:65px;
	top:975px;
	background-image:url(img/pijl@2x.png);
	background-size:contain;
	background-repeat:no-repeat;
	font-size:26px;
	font-weight:bold;
	color:#ffffff;
	padding-left:80px;
	padding-top:11px;
	width:210px;
	height:64px;
}

.adoptieouderContainer {
	position:absolute;
	left:1580px;
	top:700px;
	width:300px;
	height:300px;
	background-image:url(img/adoptie_btn_with_arrow@2x.png);
	background-size:250px 250px;
	background-repeat:no-repeat;
	background-position:25px 50px;
}

.arc {
	color:#ffffff;
	text-align:center;
	font-size:22px;
}

#jaarbuttons {
	position:absolute;
	width:1150px;
	height:700px;
	top:260px;
	left:385px;
	overflow-y:scroll;
}

.yearbutton {
	width:190px;
	height:190px;
	border-radius:95px;
	text-align:center;
	padding-top:55px;
	color:#ffffff;
	margin-right:75px;
	margin-bottom:50px;
	float:left;
	font-size:50px;
}

#statistiekenbuttons {
	position:absolute;
	width:300px;
	height:700px;
	top:260px;
	left:1580px;
}

#statistiekenbuttons button, #statistiekenbuttons button:focus {
	width:290px;
	height:163px;
	border-radius:15px;
	text-align:center;
	color:#000000;
	border:0;
	background-color:#ffffff;
	margin-bottom:15px;
	font-size:21px;
}

#zeehondentabel {
	position:absolute;
	top:270px;
	left:310px;
	width:775px;
	height:575px;
	background-color:#ffffff;
	overflow-y:auto
}

#zeehondentabel table {
	width:760px;
	height:560px;
	font-size:50px;
	font-weight:bold;
}

#zeehondentabel table tr {
	height:40px;
}

#zeehondentabel table tr td {
	padding:20px;
}

#zeehondentabel table tr.even {
	background-color:#e4f1ff;
}

#zeehondentabel table tr:active {
	background-color:#0082ff;
}
#zeehondentabel table tr:active td span{
	color:#ffffff !important;
}

#zeehond h1 {
	text-align:left;
	padding-left:210px;
}

#zeehondinfotabel {
	font-size:24px;
}

#zeehondinfotabel div {
	background-color:rgba(255,255,255,0.5);
	width:660px;
	border-radius:65px;
	height:530px;
}

#zeehondinfotabel div.lefttable {
	position:absolute;
	left:210px;
	top:240px;
}

#zeehondinfotabel div.righttable {
	position:absolute;
	left:920px;
	top:240px;
}

#zeehondinfotabel table {
	color:#282c91;
	height:auto;
	    min-height: 400px;
	margin:65px;
	width:530px;
}


#zeehondinfotabel table tr {
	height:20px;
	border-bottom:2px solid #5fb2fc;
}

#zeehondinfotabel table tr td {
	padding:5px;
}

#adoptieText {
	position:absolute;
	top:270px;
	left:140px;
	width:695px;
	height:575px;
	color:#ffffff;
	font-size:26px;
	text-shadow: 1px 1px 2px rgb(64 64 64);
}

#adoptieImage {
	position:absolute;
	top:190px;
	left:850px;
	
}

#adoptieImage img {
	width:984px;
	height:720px;
}

::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
}

::-webkit-scrollbar
{
	width: 12px;
}

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #555;
}

canvas {
	width:300px; 
	height:300px;
	margin-left:25px;
}

#speciesPieContainer {
	width:350px; 
	height:350px;
	position:absolute;
	left:1100px;
	top:285px;
}

#speciesPieContainer h2 {
	font-size:20px;
	font-weight:bold;
	text-align:center;
	margin-bottom:25px;
}

#survivalPieContainer {
	width:350px; 
	height:350px;
	position:absolute;
	left:1520px;
	top:285px;
}

#survivalPieContainer h2 {
	font-size:20px;
	font-weight:bold;
	text-align:center;
	margin-bottom:25px;
}

.lang {
	display:none;
}

.lang-nl {
	display:inline;
}

#aantalReddingenContainer {
	position:absolute;
	width:80%;
	height:600px;
	top:260px;
	left:10%;
	background-color:#ffffff99;
	padding:25px;
}

#locatiesReddingenContainer {
	position:absolute;
	width:80%;
	height:600px;
	top:260px;
	left:10%;
	background-color:#ffffff99;
	padding:25px;
}

#maandreddingvrijlatingContainer {
	position:absolute;
	width:80%;
	height:600px;
	top:260px;
	left:10%;
	background-color:#ffffff99;
	padding:25px;
}

#gewichtreddingContainer {
	position:absolute;
	width:600px;
	height:600px;
	top:260px;
	left:300px;
}

#gewichtredding {
	width:300px;
	height:300px;
	margin-top:150px;
	margin-left:150px;
	border-radius:150px;
	background-color:#d22db9;
	color:#ffffff;
	text-align:center;
	padding-top:135px;
	font-size:30px;
	margin-bottom:100px;
}

#gewichtvrijlatingContainer {
	position:absolute;
	width:600px;
	height:600px;
	top:260px;
	left:1000px;
}

#gewichtvrijlating {
	width:450px;
	height:450px;
	margin-top:75px;
	margin-left:75px;
	border-radius:225px;
	background-color:#95d744;
	color:#ffffff;
	text-align:center;
	padding-top:210px;
	font-size:30px;
	margin-bottom:25px;
	
}

#gewichtreddingContainer h3, #gewichtvrijlatingContainer h3 {
	text-align:center;
	color:#ffffff;
}