/* ------------------------ GENERAL ------------------------ */
.dropDownContent a {
	background-color: rgba(0, 0, 0, 0.7);
}
.liebeTitleGroup {
	width: 100%;
}
.liebeTitleList {
	max-width: 1080px;
	margin: auto;	
/* 	background-color: #000; */
	padding-top: 150px;
	color: #7b7b7b;
}
.liebeTitle {
	display: inline-block;
}
.containerTrailer {
	box-sizing: border-box;
	position: relative;
	background-color: #000000;
	width: 100%;
	padding-bottom: 50px;
	
}
.iframeContainer {
	display: block;
	position: relative;
	top: 0;
	width: 80%;
	max-width: 1200px;
	margin: auto;	
}
.videoClipLiebe {
	display: block;
    width: 100%;
/*     padding-top: 80px; */
	margin-left: auto;
	margin-right: auto;
}
/*
.containerTrailer p {
	color: #7b7b7b;
	font-size: 1em;
	height: 40px;
	max-width: 400px;
	padding-top: 30px;
	margin: auto;
}
*/
.liebeInfo {
	width: 70%;
	max-width: 800px;
	margin: auto;
	padding: 100px 0;
}
.liebeText {
	padding-bottom: 40px;
}
.liebeTitleText, .liebeTitleText2 {
	display: inline-block;
}
.liebeTitleText2 {
	padding-bottom: 20px;
}
.seperator, .seperatorCredits {
	color: #757575;
	font-size: 1.2em;
	padding-left: 10px;
	padding-right: 10px;
}



.credits {
/* 	padding: 30px 0 0 0; */
}
.liebePhotos {
/* 	display: block; */
	margin-left: 5%;
	margin-right: 2%;
}
.photoContainer {
	display: inline-block;
	position: relative;
/* 	width: 250px; */
}
.photoContainer img {
	width: 100%;
	box-sizing: border-box;
}
li {
	list-style: none;
}
.credits h4, .credits p {
	display: inline-block;
	position: relative;
}
.seperatorCredits {
	display: inline-block;
	
}
.ceditsLeft {
	display: inline-block;
	position: relative;
	text-align: right;
}
.ceditsRight {
	display: inline-block;
	position: relative;
}

/* ------------------------ Fun ------------------------ */
/*
.transition1, .transition2, .transition3 {
	display: inline-block;
	position: relative;
}
.transition1 img, .transition2 img, .transition3 img {
	width: 100%;	
	
}
*/

#transition1 {
	width: 250px;
	-webkit-transform: rotate3d(1,1,0,28deg);
	transform: rotate3d(1,1,0,28deg);

	-webkit-transition: width 2s, -webkit-transform 2s; 
	transition: width 2s, transform 2s;
}

.transition1:hover #transition1 {
		-webkit-transform: rotate3d(1,1,1,0deg);
	transform: rotate3d(1,1,1,0deg);

		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
/* 	width: 400px; */

}
/* only complete one, check carefully */
#transition2 {
	width: 250px;
	-webkit-transform: rotate3d(1,1,0,69deg);
	transform: rotate3d(1,1,0,69deg);
	-webkit-transition: width 2s, -webkit-transform 2s; 
	transition: width 2s, transform 2s;
}

.transition2:hover #transition2 {
		-webkit-transform: rotate3d(1,1,1,0deg);
	transform: rotate3d(1,1,1,0deg);

		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
/* 	width: 400px; */
}
#transition3 {
	width: 250px;
	-webkit-transform: rotate3d(1,1,0,110deg);
	transform: rotate3d(1,1,0,110deg);
		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
}

.transition3:hover #transition3 {
		-webkit-transform: rotate3d(1,1,1,0deg);
	transform: rotate3d(1,1,1,0deg);

		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
/* 	width: 400px; */

}


#transition4 {
	width: 250px;
	-webkit-transform: rotate3d(1,0,1,80deg);
	transform: rotate3d(1,0,1,80deg);
		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
}

.transition4:hover #transition4 {
		-webkit-transform: rotate3d(1,1,1,0deg);
	transform: rotate3d(1,1,1,0deg);

		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
/* 	width: 400px; */

}
#transition5 {
	width: 250px;
	-webkit-transform: rotate3d(1,0,1,-67deg);
	transform: rotate3d(1,0,1,-67deg);
		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
}

.transition5:hover #transition5 {
		-webkit-transform: rotate3d(1,1,1,0deg);
	transform: rotate3d(1,1,1,0deg);

		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
/* 	width: 400px; */

}
#transition6 {
	width: 250px;
	-webkit-transform: rotate3d(1,1,1,-87deg);
	transform: rotate3d(1,1,1,-87deg);
		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
}

.transition6:hover #transition6 {
		-webkit-transform: rotate3d(1,1,1,0deg);
	transform: rotate3d(1,1,1,0deg);

		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
/* 	width: 400px; */

}
#transition7 {
	width: 250px;
	-webkit-transform: rotate3d(0,1,1,-107deg);
	transform: rotate3d(0,1,1,-107deg);
		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
}

.transition7:hover #transition7 {
		-webkit-transform: rotate3d(1,1,1,0deg);
	transform: rotate3d(1,1,1,0deg);

		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
/* 	width: 400px; */

}
#transition8 {
	width: 250px;
	-webkit-transform: rotate3d(1,1,1,-137deg);
	transform: rotate3d(1,1,1,-137deg);
		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
}

.transition8:hover #transition8 {
		-webkit-transform: rotate3d(1,1,1,0deg);
	transform: rotate3d(1,1,1,0deg);

		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
/* 	width: 400px; */

}
#transition9 {
	width: 250px;
	-webkit-transform: rotate3d(1,0,1,-87deg);
	transform: rotate3d(1,0,1,-87deg);
		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
}

.transition9:hover #transition9 {
		-webkit-transform: rotate3d(1,1,1,0deg);
	transform: rotate3d(1,1,1,0deg);

		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
/* 	width: 400px; */

}
#transition10 {
	width: 250px;
	-webkit-transform: rotate3d(1,2,1,-67deg);
	transform: rotate3d(1,2,1,-67deg);
		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
}

.transition10:hover #transition10 {
		-webkit-transform: rotate3d(1,1,1,0deg);
	transform: rotate3d(1,1,1,0deg);

		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
/* 	width: 400px; */

}
#transition11 {
	width: 250px;
	-webkit-transform: rotate3d(0,2,1,-87deg);
	transform: rotate3d(0,2,1,-87deg);
		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
}

.transition11:hover #transition11 {
		-webkit-transform: rotate3d(1,1,1,0deg);
	transform: rotate3d(1,1,1,0deg);

		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
/* 	width: 400px; */

}
#transition12 {
	width: 250px;
	-webkit-transform: rotate3d(1,1,1,37deg);
	transform: rotate3d(1,1,1,37deg);
		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
}

.transition12:hover #transition12 {
		-webkit-transform: rotate3d(1,1,1,0deg);
	transform: rotate3d(1,1,1,0deg);

		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
/* 	width: 400px; */

}
#transition13 {
	width: 250px;
	-webkit-transform: rotate3d(1,1,1,-87deg);
	transform: rotate3d(1,1,1,87deg);
		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
}

.transition13:hover #transition13 {
		-webkit-transform: rotate3d(1,1,1,0deg);
	transform: rotate3d(1,1,1,0deg);

		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
/* 	width: 400px; */

}
#transition14 {
	width: 250px;
	-webkit-transform: rotate3d(1,1,1,-87deg);
	transform: rotate3d(1,1,1,-87deg);
		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
}

.transition14:hover #transition14 {
		-webkit-transform: rotate3d(1,1,1,0deg);
	transform: rotate3d(1,1,1,0deg);

		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
/* 	width: 400px; */

}
#transition15 {
	width: 250px;
	-webkit-transform: rotate3d(1,0,1,-87deg);
	transform: rotate3d(1,0,1,-87deg);
		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
}

.transition15:hover #transition15 {
		-webkit-transform: rotate3d(1,1,1,0deg);
	transform: rotate3d(1,1,1,0deg);

		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
/* 	width: 400px; */

}
#transition16 {
	width: 250px;
	-webkit-transform: rotate3d(1,0,1,-127deg);
	transform: rotate3d(1,0,1,-127deg);
		-webkit-transition: width 2s, -webkit-transform 2s;
	transition: width 2s, transform 2s;
}

.transition16:hover #transition16 {
		-webkit-transform: rotate3d(1,1,1,0deg);
	transform: rotate3d(1,1,1,0deg);

		-webkit-transition: width 2s, -webkit-transform 2s;
	transition:  transform 2s;
/* 	width: 400px; */

}

ul:hover #transition1, ul:hover #transition2, ul:hover #transition3, ul:hover #transition4, ul:hover #transition5, ul:hover #transition6, ul:hover #transition7, ul:hover #transition8, ul:hover #transition9, ul:hover #transition10, ul:hover #transition11, ul:hover #transition12, ul:hover #transition13, ul:hover #transition14, ul:hover #transition15, ul:hover #transition16  {
		-webkit-transform: rotate3d(1,1,1,0deg);
	transform: rotate3d(1,1,1,0deg);

		-webkit-transition: -webkit-transform 2s;
	transition: width 2s,transform 2s;
	
}



/* <div onmouseover="rotateYDIV()" id="rotate3D" style="transform: rotateY(180deg);">3D rotate</div> */


@media only screen and (min-width: 1200px) {
.videoClipLiebe {
    padding-top: 40px;	
}	
}
@media only screen and (min-width: 1400px) {
.videoClipLiebe {
    padding-top: 40px;	
}	
}