/* 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: .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: .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: .2vw solid #3f4a59;
    border-radius: .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: .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: .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: .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: .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: .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: .2vw solid #3f4a59;
  border-radius: .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;
}