/* PlanktonID styles */

/* --------------------------------
Styles for all pages, default layout
--------------------------------*/

.navbar {
  background-repeat: no-repeat;
  border-bottom: 1px solid #178acc;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
  border-radius: 0px;
}

.navbar-default {
  background-color: #3f4a59;
  border-color: #3f4a59;
}
.navbar-default .navbar-left > a > img {
  width: 10%;
}
.navbar-default .navbar-left,
.navbar-default .navbar-left:hover,
.navbar-default .navbar-left:focus,
.navbar-default .navbar-nav > li > a {
  color: #fff;
  padding-left: 0px;
}
.navbar-default .navbar-left {
  margin-right: 5px;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #fff;
  background-color: #000000;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #178acc;
}

.navbar-default .navbar-toggle {
  border-color: #178acc;
}

.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
}
.navbar-default .navbar-left {
  margin: 5px;
  padding: 0px; /* firefox bug fix */
}
.navbar-default .navbar-left > img {
  padding: 5px; /* firefox bug fix */
  -o-object-fit: contain;
  object-fit: contain;
}

.lang_button {
  height: 20px;
  width: 20px;
}

.dropdown-menu {
  background-color: #3f4a59;
}
.dropdown-menu li a {
  color: #fff;
}

body {
  text-align: left;
  margin-left: 0%;
  font-family: "gill-sans", verdana, helvetica, arial, sans-serif;
  background-color: rgb(245, 245, 248);
  padding-top: 7vw;
}

@media (max-width: 979px) {
  body {
    padding-top: 7vw;
  }
}
h1 {
  text-align: left;
  color: white !important;
  background-color: #3f4a59;
  margin-top: 3vw;
  margin-left: 5vw;
  margin-bottom: 3vw;
  border-radius: 0.2vw;
  font-family: "Comic Sans MS";
}
h2 {
  text-align: right;
  /*margin-left: 45vw;*/
  margin-right: 10vw;
  color: rgb(10, 10, 10);
  margin-bottom: 3vw;
  font-family: "Comic Sans MS";
}
h3 {
  text-align: center;
  margin-left: 12vw;
  /*color: white !important;);*/
  /*background-color: #3f4a59;*/
  margin-right: 12vw;
  /*border-radius: 0.2vw;*/
  border-bottom: 0.2vw solid #3f4a59;
  padding: 1vw;
  font-family: "Comic Sans MS";
}

p {
  color: rgb(20, 20, 20);
  width: 90vw;
  margin-left: 5%;
  margin-right: 5%;
}

a.fancybox img {
  border: none;
  box-shadow: 0 0.05vw 0.5vw rgba(0, 0, 0, 0.6);
}

/* add an external link symbol to all links that contain // */
a[href*="//"]::after
{
  content: url(http://upload.wikimedia.org/wikipedia/commons/6/64/Icon_External_Link.png);
  margin: 0 0 0 5px;
}

.footer {
  position: fixed;
  margin-top: 1vw;
  bottom: 0%;
  width: 100%;
  height: 2vw;
  border-top: 0.1vw solid #3f4a59;
  background-color: #3f4a59;
  color: #fff;
  padding-left: 5vw;
  font-size: 1.2vw;
}
.footer a {
  padding-left: 5vw;
  color: #fff;
  font-size: 1.2vw;
}

.caption p {
  text-wrap: break;
  width: 100%;
  font-size: 1vw;
  padding-right: 1vw;
}

.images .caption p {
  margin-top: -1.3vw;
}

.thumbnail img {
  max-width: 100%;
  max-height: 90%;
}

table {
  width: 100%;
  margin-bottom: 2vw;
  margin-top: 0.8vw;
}
th {
  padding-left: 0.5vw;
  font-size: 1.1vw;
}

td {
  padding-left: 0.1vw;
  text-align: right;
  font-size: 1.1vw;
}

.warning_browser {
  width: 20vw;
  position: relative;
  float: middle;
  text-align: center;
}

.warning_browser strong {
  color: red;
}

quick-form {
  width: 10%;
}
body {
  padding-top: 5vw;
}
@media (max-width: 979px) {
  body {
    padding-top: 5vw;
  }
}

.sep {
  text-align: center;
  color: green;
}

/* text block on the right hand side of most pages*/
.textright {
  width: 65vw;
  position: relative;
  float: right;
  padding: 1vw;
  padding-left: 0.5vw;
  margin-left: 1vw;
  margin-right: 1vw;
  margin-bottom: 1vw;
  margin-top: -2vw;
}
.textright p {
  width: 55vw;
  margin-left: 5vw;
}

/* Style the submit buttons*/
.submit {
  position: relative;
  float: left;
  margin-left: 1vw;
  margin-top: 0.5vw;
  background-color: #3f4a59;
  color: #fff;
  width: 15vw;
  height: 3vw;
  font-size: 2.5vmin;
  border-radius: 0.5vw;
  font-size: 1.2em;
}

.btn {
  background-color: #3f4a59 !important;
  color: #fff;
  margin-left: 40vw;
  margin-bottom: 2vw;
}

/* image appearance for images that appear as a block on the left hand side of most pages*/

.images {
  width: 30vw;
  position: relative;
  float: left;
  padding: 1.5vw;
  overflow: hidden;
}
.images img {
  width: 100%;
  position: relative;
  float: middle;
  padding: 1vw;
}

.page_header h1 {
  margin-bottom: 3vw;
  margin-right: 5vw;
  text-align: center;
  padding: 1vw;
}

/* add an empty div to create space on the bottom of the page*/
.empty_ {
  height: 5vw;
  position: relative;
}

/* styles for flash messages*/
.alert {
  position: absolute;
  width: 60vw;
  margin-left: 15vw;
}

.alert.alert-warning.alert-dismissible {
  z-index: 1;
}

div table {
  margin-bottom: 1vw;
}

.listgroup-item-text {
  margin-top: 0.2vw;
  margin-bottom: 0.2vw;
  font-size: 0.8vw;
}

.collapse {
  color: #3f4a59;
}

/* --------------------------------
   --------------------------------
specific styles for individual or multiple pages
   --------------------------------*/

/* -- /register --
styles for login forms*/
.logform {
  width: 20vw;
  margin-left: 5vw;
}

/* -- /classes --
this defines the appearance of the plankton wheel */
.circle-container {
  position: relative;
  width: 30vw;
  height: 30vw;
  padding: 0vw;
  /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
  border: solid 5vw;
  border-radius: 50%;
  margin: 1.75vw auto 0;
  margin-top: 10vw;
  margin-bottom: 15vw;
}
.circle-container li {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8vw;
  height: 8vw;
  margin: -4vw;
}
.circle-container img {
  display: block;
  width: 8vw;
  height: 8vw;
  border-radius: 0.5vw;
  border: 0.2vw solid #3f4a59;
}

.images_with_info h4 {
  position: absolute;
  margin-left: 0vw;
  margin-top: -10vw;
  border-bottom: 0.2vw solid #3f4a59;
}

.center {
  transform: translate(0vw);
}
.deg0 {
  transform: rotate(0deg) translate(15vw) rotate(-0deg);
}
.deg45 {
  transform: rotate(45deg) translate(15vw) rotate(-45deg);
}
.deg90 {
  transform: rotate(90deg) translate(15vw) rotate(-90deg);
}
.deg135 {
  transform: rotate(135deg) translate(15vw) rotate(-135deg);
}
.deg180 {
  transform: rotate(180deg) translate(15vw) rotate(-180deg);
}
.deg225 {
  transform: rotate(225deg) translate(15vw) rotate(-225deg);
}
.deg270 {
  transform: rotate(270deg) translate(15vw) rotate(-270deg);
}
.deg315 {
  transform: rotate(315deg) translate(15vw) rotate(-315deg);
}

.images_with_info {
  position: relative;
  float: middle;
  margin-left: 15vw;
  width: 40vw;
}

.textright.rightright {
  border: 0.2vw solid #3f4a59;
  border-radius: 0.5vw;
  width: 25vw;
  text-wrap: break;
  margin-right: 3vw;
}
.textright.rightright p {
  width: 100%;
  margin-left: 0;
}

.textright h4 {
  text-align: right;
  position: relative;
  float: right;
  margin-right: 3vw;
  margin-left: 40vw;
  border-bottom: 0.15vw solid #3f4a59;
  display: inline-block;
}

.images_with_info .collapse {
  cursor: pointer;
  display: block;
  background: none;
}
.images_with_info .collapse + input {
  display: none; /* hide the checkboxes */
}
.images_with_info .collapse + input + div {
  display: none;
}
.images_with_info .collapse + input:checked + div {
  display: block;
}

.deg0lab {
  transform: rotate(310deg) translate(14vw) rotate(-310deg);
  width: 13vw;
  font-size: 1.1vw;
}
.deg45lab {
  transform: rotate(315deg) translate(14vw) rotate(-315deg);
  width: 13vw;
  font-size: 1.1vw;
}
.deg90lab {
  transform: rotate(330deg) translate(10vw) rotate(-330deg);
  width: 20vw;
  font-size: 1.1vw;
}
.deg135lab {
  transform: rotate(210deg) translate(16vw) rotate(-210deg);
  width: 13vw;
  font-size: 1.1vw;
}
.deg180lab {
  transform: rotate(210deg) translate(16vw) rotate(-210deg);
  width: 13vw;
  font-size: 1.1vw;
}
.deg225lab {
  transform: rotate(215deg) translate(20vw) rotate(-215deg);
  width: 16vw;
  font-size: 1.1vw;
}
.deg270lab {
  transform: rotate(260deg) translate(18vw) rotate(-260deg);
  width: 20vw;
  font-size: 1.1vw;
}
.deg315lab {
  transform: rotate(305deg) translate(15vw) rotate(-305deg);
  width: 13vw;
  font-size: 1.1vw;
}

.caption.dlab {
  width: 8vw;
  border-radius: 1vw;
  background-color: #fff;
  padding: 0;
}

/* Settings for other categories (in square) */
.container.rs {
  border: solid 4vw;
  border-radius: 50%;
  margin: 1.75vw auto 0;
  margin-top: 10vw;
  margin-bottom: 15vw;
  width: 20vw;
  height: 20vw;
}

.container.rs li {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8vw;
  height: 8vw;
  margin: -4vw;
}
.container.rs img {
  display: block;
  width: 8vw;
  height: 8vw;
  border-radius: 0.5vw;
  border: 0.2vw solid #3f4a59;
}

.container.rs h4 {
  position: absolute;
  margin-left: -20vw;
  margin-top: -5vw;
  border-bottom: 0.2vw solid #3f4a59;
}

.container.rs .center {
  transform: rotate(270deg) translate(-12.5vw) rotate(-270deg);
}
.square1 {
  transform: rotate(0deg) translate(0vw) rotate(-0deg);
}
.square2 {
  transform: rotate(60deg) translate(20vw) rotate(-60deg);
}
.square3 {
  transform: rotate(120deg) translate(20vw) rotate(-120deg);
}
.square4 {
  transform: rotate(135deg) translate(16vw) rotate(-135deg);
}

.label1 {
  transform: rotate(310deg) translate(14vw) rotate(-310deg);
  width: 13vw;
  font-size: 1.1vw;
}
.label2 {
  transform: rotate(315deg) translate(14vw) rotate(-315deg);
  width: 13vw;
  font-size: 1.1vw;
}
.label3 {
  transform: rotate(150deg) translate(0.5vw) rotate(-150deg);
  width: 20vw;
  font-size: 1.1vw;
}
.label4 {
  transform: rotate(210deg) translate(16vw) rotate(-210deg);
  width: 13vw;
  font-size: 1.1vw;
}

/* -- category pages --*/
.Group_texts img {
  padding: 0.2vw;
}
.Group_texts {
  margin-top: 2vw;
}

.Group_texts .row {
  width: 70vw;
  height: 20vw;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2vw;
}

.Group_texts .thumbnail {
  height: 20vw;
  width: 18vw;
  object-fit: contain;
}

.Group_texts img.fancybox {
  max-height: 90%;
  max-width: 100%;
}
.Steckbrief {
  background-color: #fff;
  border: 0.2vw solid #3f4a59;
  border-radius: 0.5vw;
  margin-left: 10vw;
  margin-top: 0.5vw;
  margin-bottom: 1vw;
  margin-right: 10vw;
  /*width: 70vw;*/
  overflow: expand;
}

.Steckbrief p {
  width: 100%;
  word-wrap: keep-all;
}

.UVP_images {
  margin-top: 5vw;
  margin-left: auto;
  margin-right: auto;
  width: 90vw;
  height: 12vw;
  background-color: #3f4a59;
}

.UVP_images .container {
  position: absolute;
  margin-left: 2vw;
  margin-right: 2vw;
  margin-top: 1vw;
  width: 85vw;
  height: 12vw;
}

.UVP_images .container-top {
  position: absolute;
  margin-left: 2vw;
  margin-right: 2vw;
  margin-top: 0.5vw;
  width: 85vw;
  height: 12vw;
}

.UVP_images .container-top .tl {
  position: absolute;
  color: #fff;
  text-align: left;
  width: 20vw;
  margin-top: 0.5vw;
}

.UVP_images .container-top .tr {
  position: absolute;
  color: #fff;
  text-align: right;
  width: 20vw;
  margin-top: 0.5vw;
  margin-left: 60vw;
}

.UVP_images .container .im {
  position: relative;
  float: left;
  width: 10vw;
  height: 10vw;
  padding: 0.5vw;
}

.UVP_images .im img {
  width: 100%;
  height: 100%;
}

.UVP_images .bar img {
  width: 100%;
  height: 100%;
}

/* style the return button on category pages*/
.return {
  margin-left: auto;
  margin-right: auto;
  width: 20vw;
}

/* -- /Data -- */

.textright .user_results img {
  width: 60%;
  margin-left: 5vw;
  margin-top: 1vw;
}

.textright .map {
  position: relative;
  float: left;
  width: 50%;
  margin-left: 5vw;
  margin-bottom: 5vw;
}

.textright .map img {
  width: 100%;
}

.textright .map .stats_images.all_proj {
  position: relative;
  float: left;
  margin-left: 0vw;
  margin-top: 5vw;
  width: 100%;
  border: 1px solid black;
}

/* also for /Profile_advanced */
.Project_progress {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2vw;
  margin-top: 45vw;
  width: 80vw;
  border: 0.2vw solid #3f4a59;
  border-radius: 0.5vw;
  overflow: hidden;
}
.Project_progress .user_results {
  padding: 2vw;
}

.Project_progress .user_results .fancybox img {
  position: relative;
  float: left;
  width: 90%;
  height: 90%;
  overflow: hidden;
  margin: 1vw;
}

.Project_progress .col-md-4 {
  width: 40%;
  margin-left: 5vw;
}

.Project_progress h3 {
  margin-bottom: 0;
}

/* -- home -- */
.textright.home p {
  margin-left: 1vw;
}

.home_panel {
  position: relative;
  margin-bottom: 1vw;
  height: 28vmax;
  /*border: 1px solid black;*/
  clear: both;
  /*overflow: expand;*/
}

.home_panel .textright {
  margin-top: 0vw;
}

.news {
  position: relative;
  float: left;
  width: 25vw;
  height: 25vw;
  border: 0.2vw solid #3f4a59;
  border-radius: 0.5vw;
  margin-left: 5vw;
  margin-top: 1vw;
  overflow: scroll;
}

.news h2 {
  margin-left: 1vw;
  margin-bottom: 1vw;
}
.news p {
  font-size: 1.2vw;
  width: 90%;
  text-wrap: break;
}
.news img {
  position: relative;
  float: left;
  margin-left: 0.5vw;
  margin-right: 0.5vw;
  max-width: 30%;
  max-height: 30%;
  border: 0.1vw solid green;
}

/* do not show the external link symbol in the news panel*/
.news a[href*="//"]::after
{
  content: None;
  margin: 0 0 0 5px;
}

.welcome_logo {
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  background-color: #3f4a59;
  width: 40vw;
  border-radius: 0.5vw;
}

.welcome_logo img {
  width: 100%;
  height: 100%;
}

.welcome_fotos {
  overflow: hidden;
  position: relative;
  margin-top: 2vw;
}
.welcome_fotos section {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  padding: 1vw;
  float: middle;
  width: 70vw;
  padding-top: 0;
}
.welcome_fotos section div {
  background-color: #000;
  float: left;
  height: 20vw;
  margin: 1%;
  width: 20vw;
  overflow: hidden;
  border: 1px solid #3f4a59;
}
.Foto_block h4 {
  color: #fff;
  text-align: center;
  font-size: 1.2em;
}
@media (max-width: 600px) {
  .Foto_block h4 {
    color: #fff;
    text-align: center;
    font-size: 0.8em;
  }
}
.welcome_fotos section div img {
  width: 20vw;
}

/* -- /Funktion --
defines the width of the textright div, which is different to the other pages because the images on the left are larger */
#quality_check.textright {
  position: relative;
  float: right;
  padding: 1vw;
  height: 40vw;
  width: 50vw;
  margin-left: 0;
  margin-right: 1vw;
}

#quality_check.textright p {
  width: 100%;
  margin: 0;
}

#qc.images {
  position: relative;
  float: left;
  width: 40vw;
  border: 0.3vw solid #3f4a59;
  border-radius: 0.2vw;
  margin-left: 5vw;
}

.U img {
  margin-left: 5vw;
  padding: 0.5vw;
  width: 18vw;
  margin-bottom: 5vw;
}

/* -- /Links -- */
div.row.links {
  width: 95vw;
  margin-left: 5vw;
  padding: 1vw;
}
div.row.links .thumbnail {
  width: 20vw;
  height: 12vw;
}

/* -- /Kontakt -- */
div.row.contact {
  width: 70vw;
  margin-left: 5vw;
}

/* -- results, data, profile_advanced,... --
defines how the images are aligned*/
.urt {
  position: relative;
  /*border: 1px solid black;*/
  height: 37vw;
}

.urt .urtt {
  width: 40%;
  height: 5vw;
  position: relative;
  float: left;
  margin-left: 5vw;
  margin-top: 2vw;
}
.urt .urtt p {
  margin-left: 2vw;
}

.urb {
  position: relative;
  margin-top: 1vw;
  /*border: 1px solid black;*/
  height: 32vw;
  margin-bottom: 1vw;
}

.stats_images.all_proj {
  position: relative;
  float: left;
  margin-left: 5vw;
  width: 40%;
  border: 1px solid black;
}

.stats_images.all_proj .bar img {
  width: 100%;
}

/* -- /results -- */

.result_images {
  overflow: hidden;
  padding-bottom: 4vw;
  border: 0.2vw solid #3f4a59;
  border-radius: 0.5vw;
  width: 60vw;
  margin-left: 5vw;
  margin-right: 0vw;
  object-fit: contain;
  position: relative;
  float: left;
  margin-top: 1vw;
}

.result_images section {
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  width: 60vw;
  padding-top: 0;
  object-fit: contain;
}
.result_images section img {
  position: relative;
  float: left;
  height: 10vw;
  margin: 2%;
  width: 10vw;
  overflow: hidden;
  -webkit-background-clip: padding-box; /* for Safari */
  background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

.result_images .eval {
  position: relative;
  float: left;
  width: 5vw;
  height: 10vw;
  margin: 1%;
  border: 1px solid black;
}

.result_images .eval p {
  position: absolute;
}

.auswertung {
  position: relative;
  float: right;
  padding: 2vw;
  /*border: 1px solid black;*/
  margin-right: 5vw;
}

.auswertung .ev {
  position: relative;
  float: left;
  margin-left: 0vw;
  width: 35vw;
  overflow: expand;
}

.auswertung .ev .thumbnail {
  height: 100%;
}

.auswertung .ev .thumbnail img {
  height: 100%;
  position: relative;
}

.auswertung .urt {
  height: 20vw;
  overflow: expand;
}

.auswertung .textright {
  width: 50vw;
}

.auswertung .textright p {
  width: 50vw;
  margin-right: 5vw;
  padding-right: 5vw;
}

.resultspanel {
  position: relative;
  float: left;
  margin-top: 0vw;
  margin-bottom: 3vw;
  padding-bottom: 2vw;
  border-bottom: 0.1vw dashed black;
}

.resultschapter {
  position: relative;
  float: left;
  margin-top: 3vw;
}

.resultschapter p {
  position: relative;
  float: left;
  width: 80vw;
}

.resultschapter .resultsimages {
  position: relative;
  float: left;
  width: 80vw;
  left: 2vw;
}

.resultschapter .resultsimages .thumbnail {
  position: relative;
  float: left;
  width: 25vw;
  left: 2vw;
}

/* -- /profile -- */
/* styles of the badge presentation*/
.badge_gallery {
  position: relative;
  float: right;
  width: 50vw;
  overflow: hide;
  margin-right: 10vw;
  margin-bottom: 5vw;
}

.badge_gallery.textright p {
  margin-right: -5vw;
  position: relative;
  float: right;
}

.badge_gallery section {
  width: 100%;
  height: 20vw;
  overflow: expand;
  object: contain;
}
.badge_gallery .col-md-4 {
  height: 12vw;
  width: 12vw;
  border: 1px solid black;
  padding: 0.1vw;
}

.badge_gallery .col-md-4 .thumbnail {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.badge_gallery .col-md-4 img {
  width: 100%;
  height: 100%;
  background-color: None;
}
.badge_large img {
  height: 30vw;
  margin-left: 5vw;
  position: relative;
  float: left;
}

.badge_text {
  position: relative;
  float: left;
  margin-top: 5vw;
}
.Profile_overview {
  width: 60vw;
  position: relative;
  float: left;
  padding: 0;
  top: -5vw;
  right: 5vw;
  margin-left: 5vw;
}
.Profile_overview .Project_progress {
  margin-top: 0vw;
  margin-left: 0vw;
  margin-right: 0vw;
  width: 100%;
  padding: 0;
  object: contain;
}

/* wrapper box for the progress bar in sorting_results, profile etc */
.box {
  width: 90%;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2vw;
  border: 0.3vw solid #3f4a59;
}
.box .sort_images h4 {
  margin-left: 2vw;
}

/* -- /sorting, /sorting_results, /sorting_results_new, /sorting_results_home */

.sort_images {
  overflow: hidden;
  padding-bottom: 4vw;
}
.sort_images section {
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  float: middle;
  width: 50vw;
  padding-top: 0;
}
.sort_images section div {
  background: #000;
  float: left;
  height: 10vw;
  margin: 1%;
  width: 10vw;
  overflow: hidden;
  border: 1px solid #3f4a59;
}
.sort_images p {
  padding: 3vw;
  margin-right: 5vw;
  width: 62vw;
  margin-bottom: 0;
  padding-bottom: 1vw;
}

.sort_images h4 {
  border: none;
  width: 50vw;
  text-align: left;
}
.stats_bar h4 {
  border: none;
  width: 20vw;
  text-align: left;
}
.examples h4 {
  border: none;
  width: 5vw;
  text-align: left;
}
.sort_images input[type="checkbox"] {
  display: none;
}

.sort_images label {
  border: 1px solid #fff;
  padding: 0;
  position: relative;
  margin: 0px;
  cursor: pointer;
  height: 100%;
  width: 100%;
}

.sort_images label:before {
  background-color: white;
  color: white;
  content: " ";
  display: block;
  border-radius: 50%;
  border: 1px solid grey;
  position: absolute;
  top: -5px;
  left: -5px;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 28px;
  transition-duration: 0.4s;
  transform: scale(0);
}

.sort_images label img {
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
/* .sort_images label:hover {
  border: 3px solid #255083;
}*/

/*.sort_images section div:hover {*/
/* transform: scale(1.5); */
/* z-index: 1;*/
/* }*/

.sort_images :checked + label {
  border: 5px solid #255083;
}

.stats {
  position: relative;
  float: left;
  padding: 20px;
  border: 1px solid #3f4a59;
  margin-top: +7vw;
  margin-left: 1vw;
  width: 20%;
}
.examples {
  position: relative;
  float: right;
  width: 15vw;
  height: 15vw;
  margin-right: 1vw;
  padding: 20px;
  text-align: center;
  margin-top: -4vw;
}
#test_sorting .examples {
  position: relative;
  float: right;
  width: 15vw;
  height: 15vw;
  margin-right: 1vw;
  padding: 20px;
  text-align: center;
  margin-top: -1vw;
}

.examples h3 {
  text-align: center;
  color: white !important;
  background-color: #3f4a59;
  float: left;
  margin-left: 0.5vw;
}

.examples section div {
  float: right;
  height: 10vw;
  margin: 1%;
  width: 10vw;
  overflow: hidden;
  border: 1px solid #3f4a59;
}

.examples section div img {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.examples section div:hover {
  z-index: 1;
}
.all {
  position: relative;
  margin-bottom: 3vw;
}

.finish {
  margin-top: 1vw;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 5vw;
  width: 60%;
  position: relative;
}
.nomore {
  position: relative;
  float: left;
  margin-right: 8vw;
  margin-top: 1vw;
}

.nomore a {
  margin-right: 2vw;
}

.nomore input[type="checkbox"] {
  display: inline;
}
.nomore label {
  border: None;
  padding: 0;
  position: relative;
  margin: 0px;
  cursor: pointer;
  height: 100%;
  width: 100%;
}

.nomore label:before {
  background-color: None;
  color: None;
  content: " ";
  display: inline;
  border: None;
  position: relative;
  top: 0px;
  left: 0px;
  width: 25px;
  height: 25px;
}
.nomore :checked + label {
  border: None;
}
.done .collapse {
  cursor: pointer;
  display: block;
  background: #cdf;
}
.done .collapse + input {
  display: none; /* hide the checkboxes */
}
.done .collapse + input + div {
  display: none;
}
.done .collapse + input:checked + div {
  display: block;
}
.feedback {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.sort_images section div img {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.stats_bar {
  position: relative;
  float: left;
  width: 20vw;
  height: 25%;
  border: 1px solid black;
  margin-left: 1vw;
  margin-top: +8vw;
}
.stats_bar h4 {
  text-align: center;
}
.stats_bar p {
  font-size: 1.3vw;
  word-break: break-all;
}

.overall_stats {
  width: 18vw;
  position: relative;
}

.overall_stats p {
  font-size: 1.3vw;
  width: 100%;
  word-break: keep-all;
}

/*@media (max-width: 700px) {
  .stats_bar p {
  font-size: 0.8em;
  word-break:break-all;
  }
}*/
.stats_images {
  position: relative;
  float: middle;
  margin-left: 5%;
  width: 90%;
  height: 40%;
  padding-top: 1vw;
}
.bar img {
  width: 102%;
  padding: -1%;
  margin: 0;
}
.box {
  border: 0.1vw solid black;
  border-radius: 0.2vw;
}
.prog {
  background-color: #3f4a59;
}

.panel.panel-default {
  border: None;
}

.examples section .group_ident {
  position: relative;
  float: right;
  margin-bottom: 1vw;
  margin-top: 1vw;
  width: 20vw;
  height: 8vw;
  border: 0.1vw solid #3f4a59;
  border-radius: 0.5vw;
}
.examples section .group_ident p {
  width: 17vw;
  overflow: break;
  text-align: left;
  font-size: 1.1vw;
}

.images .stats_bar {
  margin-top: 0vw;
}

.break_ {
  padding: 0.1vw;
  margin-top: 1vw;
  margin-bottom: 3vw;
}

.break_ p {
  margin-top: 0vw;
  padding: 0;
  height: 0.05vw;
}

.stats_images table {
  margin-bottom: 2vw;
}

.badges_sorting section {
  position: relative;
  float: left;
  width: 48vw;
  height: 12vw;
  overflow: expand;
  object: contain;
  margin-left: -7vw;
}
.badges_sorting .col-md-4 {
  height: 10vw;
  width: 10vw;
  border: 1px solid black;
  padding: 0;
}

.badges_sorting .col-md-4 img {
  width: 100%;
  height: 100%;
  background-color: None;
}

.btn.btn-default.explain_btn {
  overflow: expand;
  width: 30vw;
  margin-left: 2vw;
  margin-bottom: 2vw;
  background-color: #fff !important;
  color: #3f4a59;
}

.ex_b {
  position: relative;
  float: left;
}

/* New styles for https://planktonid.geomar.de/de/Daten */

* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

.image-row {
  margin-bottom: 2rem;
}

/* Clearfix (clear floats) */
.image-row::after {
  content: "";
  clear: both;
  display: table;
}

.progress-content {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2vw;
  width: 80vw;
  border: 0.2vw solid #3f4a59;
  border-radius: 0.5vw;
  overflow: hidden;
}
.progress-content .user_results {
  padding: 2vw;
}

.progress-content .user_results .fancybox img {
  position: relative;
  float: left;
  width: 90%;
  height: 90%;
  overflow: hidden;
  margin: 1vw;
}

.progress-content .col-md-4 {
  width: 40%;
  margin-left: 5vw;
}

.progress-content h3 {
  margin-bottom: 0;
}

.progress-page-header {
  text-align: center;
  margin-bottom: 2rem;
}

.progress-page-header h2 {
  text-align: center;
  margin: 0;
}

.progress-content p {
  width: 90%;
  margin: auto;
}