/*******************************************************
 *					STARTPAGE CSS					   *
 *******************************************************/
 
 
 /*******************************************************
  *		  	      jQuery UI Adjustments				    *
  *******************************************************/

.ui-widget.ui-widget-content.ui-widget-header{
	background: transparent;
	border: none;
}

.ui-widget.ui-widget-content.ui-tabs{
	background:transparent;
	border:none;
}

.ui-tabs{
	padding:0;
}

.ui-tabs .ui-tabs-panel{
	padding:0;
}


.ui-tabs .ui-tabs-nav {
    text-align: center;
    background: transparent;
    border:none;
}

.ui-tabs .ui-tabs-nav .ui-tabs-anchor{
	display:inline-block;
	width:100%;
	height:100%;
	padding-top:10px;
	font-family: "TradeGothicLTCom-BdCn20", Avenir, sans-serif;
	letter-spacing:-0.02em;
	box-sizing:border-box;
	font-size:32px;
	color: #FFFFFF;
	float:none;
}

.ui-tabs .ui-tabs-nav li {
        float: none !important;
        display: inline-block;
        height:60px;
        width:250px;
        margin:0 auto;
		border:none;
		box-sizing:border-box;
}

.ui-tabs .ui-tabs-nav li.li-fragment-highlights{
	background-color: #000000;
}

.ui-tabs .ui-tabs-nav li.li-fragment-trending{
	margin-left: 15px;
	margin-right: 15px;
	background-color: #2C3E50;
}

.choose-license-select-container{
	margin-top:10px;
}

.choose-license-button-container{
	margin-top:15px;
}

/*******************************************************
 *		  	      General Stuff 					   *
 *******************************************************/

span.h2-span a{
	color:#FFFFFF;
	text-decoration: none;
	font-size: 20px;
	opacity: 0.8;
	font-weight:600px;
}

/*******************************************************
 *		  	          Hero Video 					   *
 *******************************************************/

div.home-hero {
  position: relative;
  height: 80vh;
  min-height: 600px;
  width: 100%;
  overflow: hidden;
  background-color: #000000;
  font-family: "TradeGothicLTCom-BdCn20", Avenir, sans-serif;
}

div.home-hero .container {
  position: relative;
  z-index: 2;
  height: 100%;
  padding-left:280px;
  padding-top:200px;
  color: #FFFFFF;
}

div.home-hero .container h1{
	font-size: 80px;
	padding-left:30px;
	padding-right:30px;
	font-family: "TradeGothicLTCom-BdCn20", Avenir, sans-serif;
	letter-spacing: -0.03em;
}
div.home-hero .container div.subtext{
	font-size:27px;
	padding-left:30px;
	padding-right:30px;
}

div.home-hero .container a{
	font-size: 20px;
	color: #FFFFFF;
	text-decoration:none;
	border:none;
	border-radius:28px;
	padding: 15px 50px;
	background-color: #E76908;
	text-transform:uppercase;
	letter-spacing:0.05em;
	border: 2px solid #ffffff;
	transition:0.3s;
}

div.home-hero .container a.musikkatalog{
	border: 2px solid #E32552;
	background-color: #E32552;
	color: #FFFFFF;
	margin-right:20px;
	margin-left: 20px;
	
}

div.home-hero .container a.musikkatalog:hover{
	border: 2px solid #D51946;
	background-color: #D51946;
	padding: 15px 53px;
	margin-right:14px;
	font-size: 21px;
	margin-left:17px;
}

div.home-hero .container a.registrieren{
	background-color: transparent;
	margin-right:20px;
	margin-left: 20px;
}

div.home-hero .container a.registrieren:hover{
	padding: 15px 53px;
	margin-right:14px;
	font-size: 21px;
	margin-left:17px;
}

div.home-hero .buttons{
	margin-top:50px;
	max-width:650px;
	box-sizing:border-box;
	display: inline-block;
}

div.home-hero .button-left{
	float:left;
	width:300px;
	box-sizing:border-box;
}

div.home-hero .button-right{
	float:right;
	width:300px;
	box-sizing:border-box;
}

div.home-hero div.overlay {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    background: black;
    opacity: 0.3;
}

div.home-hero video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

div.home-hero img.poster {
  height: 100vh;
  min-height: 100vh;
  object-fit: cover;
  object-position: bottom right;
  position: absolute;
  top: 0;
  left: 0;
}

/*******************************************************
 *		  	          Track Tabs  					   *
 *******************************************************/

div#track-tabs{
	margin-top:-75px;
	z-index:3;
	background-color:transparent;
	
}

div#track-tabs div#fragment-new div.track-container, .ui-tabs .ui-tabs-nav li.li-fragment-new{
	background-color: #4D7095;
}

div#track-tabs div#fragment-trending div.track-container{
	background-color:#2C3E50;
}

div.track-container{
	background-color: #000000;
	color:#FFFFFF;
	width:100%;
	position:relative;
	padding: 20px 0 0px 0;
	box-sizing:border-box;
	font-family: "TradeGothicLTCom-BdCn20", Avenir, sans-serif;
}

div.track{
	position:relative;
	padding: 25px 5%;
	font-size:20px;
	border-bottom: 1px solid rgba(255, 255, 255, .2);
	display: flex;
	flex-direction:row;
	justify-content:space-around;
	align-items: center;
	flex-wrap: wrap;
}

div.last{
	border-bottom: none;
}

div.track-play-name-container{
	display: flex;
	align-items: center;
}

div.track-play{
	float:left;
	box-sizing:border-box;
	height:100%;
	width:100px;
}

div.track-play img{
	padding-top: 25px;	
}

div.track-name{
	width:300px;
	font-size:30px;
	letter-spacing:-0.02em;
}
div.track-name a{
	color: #FFFFFF;
	text-decoration:none;
}
div.track-beschreibung{
	font-family: "Sohne", Helvetica, Arial, sans-serif;
	width:350px;
	font-size:16px;
	
}
div.track-beschreibung-text{
	opacity:0.9;
}

div.track-author-id{
	font-size:18px;
	opacity:0.6;
	letter-spacing:0;
}

div.track-anzahl-versionen{
	font-size:14px;
	opacity:0.5;
	letter-spacing:0;
}

div.track-dauer{
	font-family: "Sohne", Helvetica, Arial, sans-serif;
	opacity:0.9;
	width: 50px;
	font-size:14px;
}

div.track-functions{
	width:100px;
	text-align:right;
}

div.track-functions img{
	cursor: pointer;
}

div.track-functions img:nth-child(2) {
    padding-left: 10px;
    padding-right:10px; 
}

div.track-functions a{
	text-decoration: none;
}

/*******************************************************
 *	  	          How It Works   					   *
 *******************************************************/
 
 div.list-style-1{
 	background-image:url(/static/images/icon-check.png);
 	background-repeat:no-repeat;
 	background-size:15px;
 	margin-right:10px;
 	background-position:left;
 	padding-left:30px;
 	margin-bottom:15px;
 	line-height:1.4;
 }

div#how_it_works, div#section-swiper-beschallung-container, div#section-faces-of-musicfox-container, div#section-musicfox-stream-container, div#references-gallery-container,
div#flatrates-container, div#section-gemafreie-musik-informationen-container, div#christmas-container
{
	width: 100%;
	overflow:hidden;
	background-color: #171717;
	padding-top:100px;
	padding-left:30px;
	padding-right:30px;
	box-sizing:border-box;
}
div#how_it_works{
	background-color: #E32552;
	background-image: url('/static/images/bg-muster-1.png');
	padding-bottom:100px;
}

div#section-musicfox-stream-container{
	background-image: url('/static/images/bg-muster-1.png');
}

div#christmas-container{
	background: url(/static/images/christmas-market-background.png);
	background-position: center; /* Center the image */
  	background-repeat: no-repeat; /* Do not repeat the image */
  	background-size: cover; /* Resize the background image to cover the entire container */
}

div#references-gallery-box{
	max-width:1360px;
	margin:auto;
	padding-top:50px;
	padding-bottom:15px;
	background-color:black;
	box-sizing:border-box;
}


div#references-gallery{
	background-color:black;
	margin:auto;
}

div#three_steps, div#section-swiper-beschallung, div#section-faces-of-musicfox, div#section-musicfox-stream, div#flatrates, div#christmas, div#references-gallery-head, div#gemafreie-musik-informationen{
	max-width: 1400px;
	margin:auto;
	color:#FFFFFF;	
	overflow:hidden;
	padding-left: 20px;
	padding-right: 20px;
	box-sizing: border-box;
	
}
div.three_steps_image_container a{
	display:block;
	height:100%;
	width:100%;
}

div.step{
	width:33%;
	float:left;
	box-sizing:border-box;
	margin:35px 0;
	color: #FFFFFF;
}

div.step:nth-child(1){
	padding-right:10px;
}

div.step:nth-child(2){
	padding-left:10px;
	padding-right:10px;
}

div.step:nth-child(3){
	padding-left:10px;
}

div.step_desc{
	margin-top:10px;
	margin-bottom:25px;
	opacity: 0.9;
	padding-left:0px;
}

div.step_desc a{
	color:#FFFFFF;
}

div.step img{
	float:none;
}

div.step h2{
	color:#FFFFFF;
}

/*******************************************************
 *	           		Beschallung			   			   *
 *******************************************************/

div#section-swiper-beschallung h2, div#section-swiper-beschallung h3{
	color:#FFFFFF;
}

div#swiper-beschallung {
	width: 100%;
  	height: 460px;
  	margin-top:15px;
}

div#swiper-beschallung .swiper-slide{
	display:flex;
	justify-content: center;
}
div#swiper-beschallung .swiper-slide .beschallung-item{
	position:relative;
	background-color: #000000;
	border-radius: 25px;
	width:250px;
	height:100%;
	overflow:hidden;
	color: #FFFFFF;
	text-align:center;
}

div#swiper-beschallung .swiper-slide .beschallung-item img{
	object-fit: cover;
	object-position:100% 0;
	transition:0.3s;
}

div#swiper-beschallung .swiper-slide .beschallung-item .beschallung-item-image{
	overflow:hidden;
}

div#swiper-beschallung .swiper-slide .beschallung-item img:hover{
	transform: scale(1.05);
}

div#swiper-beschallung .swiper-slide .beschallung-item .beschallung-item-name{
	font-size: 16px;
	padding-top:15px;
	font-weight:500;
	letter-spacing:0.48px;
}

div#swiper-beschallung .swiper-slide .beschallung-item .beschallung-item-name a{
	color: #FFFFFF;
	text-decoration:none;
}

div#swiper-beschallung .swiper-slide .beschallung-item .beschallung-item-desc{
	font-size: 16px;
	padding:7px 10px 10px 10px;
	opacity: 0.6;
	
}
div#swiper-beschallung .swiper-slide .beschallung-item .beschallung-item-price{
	position:absolute;
	width:100%;
	bottom:40px;
	font-size: 18px;
	font-weight:500;
}

div#swiper-beschallung .swiper-slide .beschallung-item .beschallung-item-mwst{
	position:absolute;
	width:100%;
	bottom:20px;
	opacity: 0.6;
	font-size:12px;
}


.gotoBeschallung{
	margin-top:50px;
	margin-bottom:100px;
	text-align: center;
}

/*******************************************************
 *				  Faces Of Musicfox			   		   *
 *******************************************************/


div#section-faces-of-musicfox-container, div#section-musicfox-stream-container {
	overflow:visible;
	background-color: #000000;
	padding-top:50px;
}

div#section-faces-of-musicfox, div#section-musicfox-stream{
	position:relative;
	overflow:visible;
	background-color:#000000;
}

div#faces-of-musicfox-bubble, div#musicfox-stream-bubble{
	display:flex;
	flex-direction: row;
	justify-content:space-between;
	position:relative;
	overflow:visible;
}

#section-faces-of-musicfox h2, #section-musicfox-stream h2{
	font-size:70px;
	margin-bottom:20px;
}

div#faces-bubble-pic{
	height:30px;
	width:50px;
	background-image: url(/static/images/speak-bubble-start.png);
	background-size:contain;
	position:absolute;
	bottom:-29px;
	left:125px;
}

#faces-text, #streaming-text{
	width:40%;
	box-sizing:border-box;
	padding-right:50px;
}

span.span-highlight{
	color: #E32552;
	font-weight: 600;
}

div#faces-of-musicfox-contact-button{
	margin-top:40px;
	padding-bottom:50px;
}

div#faces-pic{
	background-image: url("/static/images/faces-of-musicfox.png");
	background-repeat:no-repeat;
	background-size:550px;
	width:60%;
	background-position: 100% 0;
	transform: translateY(-2%) rotate(-6deg);
}

div#streaming-pic{
	width:60%;
	padding-top:25px;
}

/*******************************************************
 *			       Referenzen		 			  	   *
 *******************************************************/
 
div#references-gallery-container{
	padding-top:150px;
	padding-bottom:100px;
	background-color:#E32552;
	background-image: url('/static/images/bg-muster-1.png');
} 

a.references-link{
	color: #FFFFFF;
}

span.referenzen-musiktitel{
	display:none;
}

div.ug-lightbox span.referenzen-musiktitel{
	display:inline !important;
}

#references-gallery-head{
	margin-top:50px;
}




/*******************************************************
 *			       Flatrates		 			  	   *
 *******************************************************/
 
 div#flatrates-container{
 	padding-top:0px;
 	background-color:#000000;
 }
 
 div#christmas-container{
 	padding-top:0px;
 }
 
 #flatrates, #christmas{
 	margin-top:50px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size:18px;
 }
 
 #flatrates-left{
 	width:30%;
 	padding-bottom:70px;
 	padding-top:50px;
 }
 
 #christmas-left{
 	width:50%;
 	padding-bottom:70px;
 	padding-top:50px;
 }
 
 #flatrates-right{
 	width:69%;
 	background-image:url('/static/images/piano-roland-bw.png');
 	background-position: 100% 100%;
 	background-size:100%;
 	background-repeat:no-repeat;
 }
 
 #christmas-right{
 	width:49%;
 	background-color:transparent;
 	background-image:url('/static/images/christmas-bundle-startpage-2.webp');
 	background-position: 100% 100%;
 	background-size:100%;
 	background-repeat:no-repeat;
 }
 
div#flatrates-left h2, div#christmas-left h2{
 	margin-bottom:30px;
 }

div.flatrate-price{
	font-size: 26px;
	font-weight:500;
	margin-top:40px;
}

 div.flatrate-offer{
 	margin-top:10px;
 }


/*******************************************************
 *	       Informationen: Gemafreie Musik 			   *
 *******************************************************/
 
div#gemafreie-musik-informationen{
 	display:flex;
 	flex-wrap: wrap;
}
 
div.gemafreie-musik-info-block{
 	padding:30px 20px 30px 0px;
 	box-sizing:border-box;
 	width:45%;
}

div.gemafreie-musik-info-block-text{
	opacity:0.9;
}

/*******************************************************
 *				       Kunden  			   			   *
 *******************************************************/


#start_clients{
	padding-top:30px;
	padding-bottom:70px;
	background-color:#000000;
	color:#FFFFFF;
	text-align:center;
	overflow:hidden;
}

.clients_image{
	width:100%;
	margin-top:30px;
	max-width:1500px;
	min-width:1200px;
}


/************************************ 
 *         		@media	            *
 ************************************/
 
@media (max-width: 1600px){
	
	div.track{
		padding:25px 10px;
	}
	
	div.mfplayer .waveform{
		width:400px;
	}
}

@media(max-width: 1400px){
	
	div#faces-text, div#faces-pic, div#streaming-text, div#streaming-pic{
		width:50%;
	}

}


@media(max-width: 1300px){
	
	div.track-beschreibung{
		display:none;
	}

}

@media (max-width: 1250px) {
	
	#flatrates-left, #flatrates-right, #christmas-left, #christmas-right{
		width:50%
	}

	div.home-hero .container{
		padding-top:159px;
		padding-left: 0px;
		margin: 0 auto;
		max-width:800px;
	}
	div.start_information_blocks_text{
		clear:both;
		text-align:center;
		width:auto;
		margin-top:5px;
		padding-left:10px;
	}
	div.start_information_blocks_text h3{
		font-size:20px !important;
		text-align:center;
		margin-top:10px;
	}
	div#start_information h2{
		font-size:25px;
	}
	div.start_information_blocks_image{
		margin:0 auto;
		float:none;
	}
}

@media (max-width: 1150px) {

	div#faces-pic, div#streaming-pic{
		background-size:100%;
		
	}
}


@media (max-width: 1000px) {
	
	div#flatrates-left, div#christmas-left{
		width:100%;
	}
	
	div#flatrates-right, div#christmas-right{
		display:none;
	}
	
	div#faces-text, div#streaming-text{
		padding-right:0;
	}
	
	div#faces-of-musicfox-bubble{
		flex-direction: column-reverse;
	}
	
	div#musicfox-stream-bubble{
		flex-direction: column;
	}
	
	div#faces-text, div#faces-pic, div#streaming-text, div#streaming-pic{
		width:100%;
	}
	
	div#faces-pic{
		height:200px;
		background-position: 0% 30%;
	}
	
	div#streaming-pic{
		height:100%;
	}

	div.track-dauer{
		display:none;
	}
	
	div.track-waveform{
		display:none;
	}
	
	.ui-tabs .ui-tabs-nav li{
		width:150px;
		height: 55px;	
	}
	
	.ui-tabs .ui-tabs-nav .ui-tabs-anchor{
		font-size:25px;
	}
}

@media (max-width: 800px) {

	div#how_it_works, div#section-swiper-beschallung-container, div#section-faces-of-musicfox-container, div#section-musicfox-stream-container, 
	div#references-gallery-container, div#flatrates-container, div#christmas-container, div#section-gemafreie-musik-informationen-container
	{
		padding-top:50px;
	}
	
	div.gemafreie-musik-info-block{
		width:100%;
	}
	
	div.start_information_blocks_text{
		text-align:center;
	}
	div.step{
		width:100%;
		padding-left:0px !important;
	}
	div.step img{
		width:70px;
		height:70px;
	}
	div.start_information_blocks{
		width:100%;
		clear:both;
	}
	div#how_it_works h1{
		font-size:20px;
	}
	div#how_it_works h2{
		font-size:28px;
	}
	
	
	
}

@media (max-width: 650px) {
	
	div#how_it_works, div#section-swiper-beschallung-container, div#section-faces-of-musicfox-container, div#section-musicfox-stream-container, 
	div#references-gallery-container, div#flatrates-container, div#christmas-container, div#section-gemafreie-musik-informationen-container
	{
		padding-left:15px;
		padding-right:15px;
	}

	div.home-hero {
	  min-height: 400px;
	}
	
	div.track-play-name-container{
		width:200px;
	}
	div.track-name{
		font-size:25px;
		padding-left:20px;
	}
	div.track-author-id{
		font-size:16px;
	}

	div.home-hero .container{
		padding-top: 60px;
		text-align: center;
	}
	
	div.home-hero .container h1{
		font-size: 40px;
		margin-bottom:15px;
	}
	
	div.home-hero .container div.subtext{
		font-size:20px;
	}
	
	div.home-hero .button-left, div.home-hero .button-right{
		width:49%;
		
	}
	
	div.home-hero .container a{
		font-size: 18px;
		padding: 5px 15px;
		margin-right:20px;
		margin-left: 20px;
	}

	div.home-hero .container a.musikkatalog:hover{
	padding: 5px 15px;
	margin-right:20px;
	font-size: 18px;
	margin-left:20px;
	}

	div.home-hero .container a.registrieren:hover{
	padding: 5px 15px;
	margin-right:20px;
	font-size: 18px;
	margin-left:0px;
	}
	
	div.home-hero .container a.registrieren{
		margin-left:0px;
	}
	
	.ui-tabs .ui-tabs-nav li{
		width:100px;
		height: 45px;	
	}
	
	.ui-tabs .ui-tabs-nav .ui-tabs-anchor{
		font-size:20px;
	}
	
}

@media (max-width: 550px) {
	div#faces-pic, div#streaming-pic{
		background-size:100%;
	}
}

@media (max-width: 400px) {
	div.home-hero .container a.musikkatalog, div.home-hero .container a.registrieren,
	div.home-hero .container a.musikkatalog:hover, div.home-hero .container a.registrieren:hover{
		font-size:13px;
	}
}