.resp-image {
	position: absolute;
	max-width: 90%;
	max-height: 90%;	
  display: block;
  margin-left: auto;
  margin-right: auto;
	vertical-align: middle;
}

div.square-div {
  position: relative;
  border: 1px solid #777777;
  padding: 0px;	
  border-radius: 1%;
}

div.square-div:after {
	content: '';
	display: block;
	margin-top: 100%;
} 

div.square-div.content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #2a2a2a;
}

.max-div-width {
	max-width: 75vh;
}

#other-file-div {
	position: absolute;
	z-index: 10;
  top: 0;
  bottom: 0;
  left: 15px;
  right: 15px;
  margin-left: auto;
  margin-right: auto;

}

.slide {
	opacity: 0;
	transition: opacity 2s ease-in-out;
}

.slide.current {
	opacity: 1;
}

.tab-home-slide {
  position: absolute;
	opacity: 0;
	transition: opacity 2s ease-in-out;
}

.tab-home-slide.current-tab-home {
  position: absolute;
	opacity: 1;
}

.tab-details-slide {
  position: absolute;
	opacity: 0;
	transition: opacity 2s ease-in-out;
}

#other-file-image {
  position: absolute;
}

.tab-details-slide.current-tab-details {
  position: absolute;
	opacity: 1;
}

.tab-files-slide {
  position: absolute;
	opacity: 0;
	transition: opacity 2s ease-in-out;
}

.tab-files-slide.current-tab-files {
  position: absolute;
	opacity: 1;
}

span#slider-prev {
	position: absolute;
	top: 48%;
	left: 10%;
	background-color: rgba(255, 255, 255, 0.7	);
	cursor: pointer;
  border-radius: 70%;
	padding-left: 0px;
	width: 40px;
	height: 40px;
	line-height: 60px;
	text-align: center;
}

span#slider-next {
	position: absolute;
	top: 48%;
	right: 10%;
	background-color: rgba(255, 255, 255, 0.7	);
	cursor: pointer;
  border-radius: 70%;
	padding-right: 0px;
	width: 40px;
	height: 40px;
	line-height: 60px;
	text-align: center;
}

div.slider-buttons {
	padding-left: 0px;
	padding-right: 0px;
	width: 100%;
}

.text-slider-buttons {
	width: 100%;
	text-align: center;
}

.raw-background { background-color: #5a5a5a; }
.final-background { background-color: #2a2a2a; }

.available-size { 
	position: relative; 
	top: 0; 
	left: 0; 
	max-width: 100vh; 
	max-height: 100vh; 
	margin: 0px; 
	padding: 0px; 
	opacity: 0.3;
} 

.picture-in-frame { 
	position: absolute; 
	top: 0px; 
	left: 0px; 
	max-width: 100vh; 
	max-height: 100vh; 
	margin: 0px; 
	padding: 0px; 
	opacity: 0.3;
} 

/**** VERVANGEN BESTAANDE CSS, BETER GESTRUCTUREERD */
/* fonts etc. */

#cds-details h1 {
	font-size: 25px;
	color: #faf8c7;
	text-align: left;
}

#cds-details .tagged-text-picture-data h1 {
	font-size: 20px;
	color: #dddddd;
}

.navigation-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 1s linear;
}

.navigation-hidden {
  visibility: visible;
  opacity: 0;
  transition: visibility 0s 1s, opacity 1s linear;
}

.container-button {
	background-color: #dddddd;
	color: #333333;
	cursor: pointer;
	position: relative;
	width: 130px;
	height: 30px;
	margin-top: 5px; 
	margin-bottom: 5px;
	text-align: center; 
	border-radius: 3px;
	line-height: 27px;
  }

  .container-button:hover {
	background-color: #faf8c7; 
  }
  
  .link-button {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
  }