@charset "utf-8";
/* CSS Document */

img
{
	margin-left: auto;
	margin-right: auto;
}

/* Screen one */

.item
{
	margin-bottom: 20px;
}

.item img
{
	max-height: 400px;
}

/* Screen two */

#section-2 .overlay
{
	background-color: #6796DA;
}

#section-2 img
{
	display: inline-block;
    margin: 0px 10px 20px 0px;
}

/* Screen three */

.dropdown {
  width: 180px;
  position: absolute;
}

.glyphicon {
  top: -22px;
  z-index: 30;
}

.glyphicon-remove {
  color: #d20000;
}

.glyphicon-ok {
  color: #00a21d;
}

.mark-left {
  left: -30px;
  float: left;
}

.mark-right {
  right: -30px;
  float: right;
}

/* Screen four */

.front-header {
	margin-bottom: 0px;
}

#section-4 .svg-container {
    padding-top: 100%;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
}

#front-eye, #impressum-eye, #masthead-eye, #editors-letter-eye, #key-pages-eye {
	position: absolute;
}

.popover-btn {
	color: #D7635B;
    border: 0px;
    background: none;
}

.popover-btn:hover, .popover-btn:active, .popover-btn:focus {
	color: #6796da;
	border: 0px;
	background: none;
	box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
}

/* Screen five */

.tile {
  cursor: all-scroll;
  height: 750px;
  overflow: hidden;
  position: relative;
}

.photo {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: transform .5s ease-out;
  width: 100%;
}

#section-5 .well
{
	margin-top: 20px;
}

/* General */

.image-container {
  position: relative;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
}

.image-container:hover .overlay {
  opacity: 0.8;
}

.text {
  color: #fff;
  font-size: 32px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.svg-container {
  height: 0;
  padding-top: 80.5%; /* This will need to be adjusted accordingly to the size of your image */
  position: relative;
  width: 100%;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
}

#hint2, #hint4
{
	margin-top: 20px;
}

/* Tablet */
@media(min-width: 768px){

	#section-2 img {
		max-height: 308px;
	}

	.dropdown {
		width: 122px;
	}

	.form-control {
		font-size: 12px;
		height: 28px;
	}

	#dropdown-1 {
		top: 48px;
		left: 32px;
	}

	#dropdown-2 {
		top: 210px;
		left: 32px;
	}

	#dropdown-3 {
		top: 506px;
		left: 21px;
	}

	#dropdown-4 {
		top: 4px;
		left: 436px;
	}

	#dropdown-5 {
		top: 109px;
		left: 577px;
	}

	#dropdown-6 {
		top: 202px;
		left: 577px;
	}

	#front-eye {
		top: 150px;
		left: 360px;
	}

	#impressum-eye {
		top: 130px;
		left: 180px;
	}

	#masthead-eye {
		top: 26px;
		left: 410px;
	}

	#editors-letter-eye {
		top: 85px;
		left: 365px;
	}

	#key-pages-eye {
		top: 475px;
		left: 455px;
	}

	.popover-btn .fa-eye {
		font-size: 60px;
	}
}

/* Desktop */
@media(min-width:992px){

	#section-2 img {
		max-height: 308px;
	}

	.dropdown {
		width: 163px;
	}

	#dropdown-1
	{
		top: 65px;
		left: 36px;
	}

	#dropdown-2 {
		top: 278px;
		left: 35px;
	}

	#dropdown-3 {
		top: 670px;
		left: 22px;
	}

	#dropdown-4 {
		top: 6px;
		left: 570px;
	}

	#dropdown-5 {
		top: 145px;
		left: 755px;
	}

	#dropdown-6 {
		top: 267px;
		left: 755px;
	}

	#front-eye {
		top: 158px;
		left: 444px;
	}

	#impressum-eye {
		top: 182px;
		left: 104px;
	}

	#masthead-eye {
		top: 42px;
		left: 530px;
	}

	#editors-letter-eye {
		top: 112px;
		left: 475px;
	}

	#key-pages-eye {
		top: 628px;
		left: 576px;
	}

	.popover-btn .fa-eye {
		font-size: 80px;
	}
}

/* Large Desktop */
@media(min-width:1200px){

	#section-2 img {
		max-height: 340px;
	}


	.dropdown {
		width: 198px;
	}

	#dropdown-1 {
		top: 80px;
		left: 41px;
	}

	#dropdown-2 {
		top: 340px;
		left: 41px;
	}

	#dropdown-3 {
		top: 819px;
		left: 24px;
	}

	#dropdown-4 {
		top: 9px;
		left: 692px;
	}

	#dropdown-5 {
		top: 178px;
		left: 918px;
	}

	#dropdown-6 {
		top: 328px;
		left: 918px;
	}

	.form-control {
		height: 40px;
	}

	#front-eye {
	top: 227px;
    left: 600px;
	}

	#impressum-eye {
		top: 130px;
		left: 230px;
	}

	#masthead-eye {
		top: 58px;
		left: 668px;
	}

	#editors-letter-eye {
		top: 136px;
		left: 588px;
	}

	#key-pages-eye {
		top: 768px;
		left: 704px;
	}

	.popover-btn .fa-eye {
	font-size: 100px;
	}

}

@media print {

	.dropdown {
		width: 198px;
	}

	#dropdown-1 {
		top: 80px;
		left: 41px;
	}

	#dropdown-2 {
		top: 340px;
		left: 41px;
	}

	#dropdown-3 {
		top: 819px;
		left: 24px;
	}

	#dropdown-4 {
		top: 9px;
		left: 692px;
	}

	#dropdown-5 {
		top: 178px;
		left: 918px;
	}

	#dropdown-6 {
		top: 328px;
		left: 918px;
	}
}