@import url('https://fonts.googleapis.com/css?family=Oswald&display=swap');

/* =============================== */
/* CSS RESET
/* =============================== */
*{
	box-sizing:border-box; 					
	margin:0;
	padding:0;
}
	
/* =============================== */
/* STANDARD DEFINITIONEN
/* =============================== */

	nav {
		width:100%;
		font-size: 1rem;
		font-family: 'Oswald', Helvetica, sans-serif;
		text-transform: uppercase;
		text-decoration: none;
		max-width:1340px;
		margin: 3rem auto;
	}

	nav a:link{
		color:#FFCF00;
	}
		
	nav a:visited{
		color:#FFCF00;
	}
		
	nav a:hover{
		color:#F9B233;
	}

	a{
		text-decoration: none;
	}
	
	nav a:link{
		color:#FFCF00;
	}
		
	nav a:visited{
		color:#FFCF00;
	}
		
	nav a:hover{
		color:#F9B233;
	}

/*	nav ul{
		list-style-type: none;
		display: flex;
		flex-direction: row;
		justify-content:space-around;
		width:100%;
		max-width:1217px;
		margin:0 auto;
	} */

	nav ul{
		display: flex;
		flex-direction: row;
		justify-content:space-around;
		width:100%;
		max-width:1217px;
		margin:0 auto;
	}

	nav li{
		list-style-type: none;
	} 

	#mobile_logo{
		display: none;
	}

	#mobile_navRahmen{
		display: none;
	}

	#dropdown{
		position:relative;
	}

	nav #submenu{
		position:absolute;
		top:1.5rem;
		z-index:3;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: left;
		padding:0.5rem 1rem 0.5rem 0rem;
		width:auto;
	}

	#dropdown2{
		position:relative;
	}

	nav #submenu2{
		position:absolute;
		top:1.5rem;
		z-index:3;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: left;
		padding:0.5rem 1rem 0.5rem 0rem;
		width:auto;
	}

	#headerLogoChlyklass img{
		width: 50%;
		margin: 0rem auto;
		margin-top: 10rem;
	}

	#headerLogoDN img{
		width: 50%;
		margin: 0rem auto;
		margin-bottom: 10rem;
	}

	#headerSocial a{
		color:#FFCF00;
		font-size: 2rem;
		margin: 2rem;
		margin-bottom: 4rem;
	}

	#headerSocial a:hover{
		color:#F9B233;
	}

	body{
		font-family: 'Oswald', Helvetica, sans-serif;
		text-align: center;
		line-height:1.7em;
		color: white;
		background: black;
	}

	h1, h2, h3{
		text-transform: uppercase;
		letter-spacing: 0.15rem;
	}

	h2{
		color:#FFCF00;
		margin-top: 8rem;
		margin-bottom: 0.75rem;
	}

	h3{
		margin: 0rem auto;
		margin-bottom: 2rem;
	}

	.margin-bottom{
		margin-bottom: 1rem;
	}

	div.text{
		max-width: 600px;
		margin: auto;
		text-align: center;
	}

	a{
		color:#FFCF00;
	}

/* =============================== */
/* LIVE
/* =============================== */
	#live{
		line-height: 2rem;
	}

	#live a{
		text-decoration: none;
	}

	#live a:link{
		color:#FFCF00;
	}
		
	#live a:visited{
		color:#FFCF00;
	}
		
	#live a:hover{
		color:#F9B233;
	}

	

/* =============================== */
/* MUSIC
/* =============================== */
	#music{
		margin: 0rem auto;
	}

	#musicFlex{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-content: center;
	}

	#cover img{
		width: 30vw;
		height: 30vw;
		border: 1px solid white;
		margin: 1rem;
	}

	#tracks img{
		width: 30vw;
		height: 30vw;
		margin: 1rem;
	}
	
/* =============================== */
/* VIDEO
/* =============================== */
/*	video#bgvid {									
		position: fixed;
		background-repeat: no-repeat;
		right: 0; 
		bottom: 0;
		margin: 0rem auto;
		min-height: 100%; 
		width: 80vw; 
		height: 40vw; 
		z-index: -100;
		background-size: cover;
		background-position:center;
	}	*/

/*	#videoButtons{
		z-index: 100;
		font-size: 1.5rem;
		color: #FFCF00;
	} */

/*	#videoButtons i{
		margin: 1rem;
	} */

	iframe{
		margin: 1rem;
	}

/* =============================== */
/* RELEASES
/* =============================== */
	#releasesGrid{
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 0 auto;
	}

	.releaseBox{
		margin: 2rem 1rem;
	}

	.releaseBox img{
		width: 15vw;
		height: 15vw;
	}

	.releaseTitel a{
		text-decoration: none;
		font-family: 'Oswald', Helvetica, sans-serif;
		text-transform: uppercase;
		color: white;
		padding: 0.5rem;
	}

	.releaseTitel a:hover{
		color:#F9B233;
	}

/* =============================== */
/* CREW
/* =============================== */
	#crew{
		margin: 0rem auto;
		padding-bottom: 1rem;
	}

	#crew a{
		text-decoration: none;
		font-family: 'Oswald', Helvetica, sans-serif;
		text-transform: uppercase;
		color: white;
		padding: 0.5rem;
	}

	#crew a:hover{
		color: #F9B233;
	}

	.dropdownBox {
		color: white;
		width: 50%;
		margin: 1rem auto;
		padding-bottom: 1rem;
		border-bottom: 1px solid white;
	}

	.dropdownBox img{
		width: 30vw;
		height: auto;
		margin: 0rem auto;
	}

	.crewMember a{
		text-decoration: none;
		font-family: 'Oswald', Helvetica, sans-serif;
		text-transform: uppercase;
		color: black;
	}

/* =============================== */
/* SHOP
/* =============================== */
	#shop a{
		text-decoration: none;
	}

	#shop a:hover{
		color:#F9B233;
	}

	#shopGrid{
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin: 0 auto;
	}

	#shopGrid img{
		width: 10vw;
		height: 15vw;
		margin: 1rem;
	}
/* =============================== */
/* FOOTER (CONTACT)
/* =============================== */

	#caret-up{
		margin: 0rem auto;
		margin-top: 3rem;
	}

	#contactGrid{
		background-color: #FFCF00;			
		display: flex;
		flex-direction: row;
		margin: 1rem auto;
		justify-content: center;
		align-items: center;
	}

	#contactGrid a{
		text-transform: none;
		text-decoration: none;
		font-family: 'Oswald', Helvetica, sans-serif;
	}

	#contactGrid a:link{
		color:white;
	}
		
	#contactGrid a:visited{
		color:white;
	}
		
	#contactGrid a:hover{
		color:#F9B233;
	}
	
	#contact-left{
		flex-direction: row;
		text-align: left;
		padding: 3rem 7rem;
	}

	#contact-middle{
		flex-direction: column;
		text-align: left;
		line-height:1.7em;
		padding: 3rem;
	}

	#contact-right{
		flex-direction: column;
		text-align: left;
		padding: 3rem 7rem;
	}

	#mobile_contactGrid{
		display: none;
	}

	.fa-caret-up{
		font-size: 4rem;
		color: white;
	}

/* COPYRIGHT  */
	#copyright{
		margin: 1rem auto;
	}

	#copyright a{
		text-decoration: none;
		font-family: 'Oswald', Helvetica, sans-serif;
		font-weight: normal;
		text-transform: uppercase;
		color: white;
	}

	#copyright a:hover{
		color:#F9B233;
	}

/* IMPRESSUM  */
/*	#impressum{
		line-height: 2rem;
		font-weight: normal;
	}

	#impressum a{
		text-decoration: none;
	}
		
	#impressum a:link{
		color: white;
	}
	
	#impressum a:visited{
		color:white;
	}

	#impressum a:hover{
		color:#F9B233;
	}

	#impressum img{
		width: 15%;
		height: auto;
	}*/

	
/* =============================== */
/* RESPONSIVE
/* =============================== */	
	@media screen and (max-width:1024px){
		
	#contact-left{
		padding: 3rem 2rem;
	}

	#contact-middle{
		
	}

	#contact-right{
		padding: 3rem 2rem;
	}
	}

	@media screen and (max-width:960px) {
	
	#navigation{
		display: none;
	}
	
	#mobile_navRahmen{
		position: relative;
		display:flex;
	}	
		
	#mobile_navigation img{
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 1rem auto;
		width: 40%;
		height: auto;
	}	
	
	#mobile_navigation{								/* Hamburger-Nav */
		display: flex;
        flex-direction: column;
		justify-content: center;
		position:fixed;
		align-items: center;
		margin: 0 auto;
		background: white;
		height: 100vh;
		width: 100vw;
		z-index: 99;
	}
		
	#mobile_social{
		flex-direction: row;
	}
		
	#mobile_social i{
		margin: 0.5rem;
	}
		
	.mobile_menu{
		font-size: 1.5rem;
		margin-bottom: 0.75rem;
	}	
		
	.mobile_submenu{
		font-size: 1rem;
		margin-bottom: 0.75rem;
	}	
	
	#hamburger{												
		position: fixed;
		z-index: 1000; 
		right: 3rem;
		top: 3rem;
		color:#FFCF00;
		cursor: pointer;
	}
	
	#hamburgerbutton{
		font-size:2rem;
	}
		
	#crewGrid, #shopGrid, #releasesGrid, #musicFlex{
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		margin: 0 auto;
		justify-content: center;
		padding: 0rem;
	}

	#headerSocial a{
		font-size: 1.5rem;
		margin: 1rem;
	}
		
	#cover img{
		width: 50vw;
		height: 50vw;
		border: 1px solid white;
		margin: 1rem;
	}

	#tracks img{
		width: 50vw;
		height: 50vw;
		margin: 1rem;
	}

	iframe{
		width: 70%;
		height: auto;
	}
		
	.releaseBox{
		margin: 2rem 1rem 2rem 1rem;
	}
		
	.releaseBox img{
		width: 40vw;
		height: 40vw;
	}
		
	.dropdownBox img{
		width: 40vw;
		height: auto;
		margin: 2rem auto;
	}
		
	#shopGrid img{
		width: 40vw;
		height: auto;
		margin: 1rem;
	}	
		
	#contactGrid{
		display: none;
	}
		
	#mobile_contactGrid{
		display: block;		
		background-color: #FFCF00;						/*anthrazit #343031; */
		padding: 1rem;
		margin-bottom: 1rem;
	}

	#mobile_contactGrid a{
		text-decoration: none;
		font-family: 'Oswald', Helvetica, sans-serif;
		text-transform: none;
	}

	#mobile_contactGrid a:link{
		color:white;
	}
		
	#mobile_contactGrid a:visited{
		color:white;
	}
		
	#mobile_contactGrid a:hover{
		color:#F9B233;
	}

	#mobile_contactGrid i{
		margin: 0rem 1rem;
	}
		
	#impressum img{
		width: 40%;
		height: auto;
	}
		
		
		
	}