/*******************/
/*  / FONT-FACE /  */
/*******************/

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on April 22, 2018 */

@font-face {
    font-family: 'hammerbold';
    src: url('_fonts/hammer-bold-webfont.woff2') format('woff2'),
    url('_fonts/hammer-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'hammerhighlight';
    src: url('_fonts/hammer-highlight-webfont.woff2') format('woff2'),
    url('_fonts/hammer-highlight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/*******************/
/*     / CSS /     */
/*******************/


* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}


body {
	background-color: #e9e9e9;
	overflow-x: hidden;
}

header {
  height: 6vh;
  position: fixed;
  top: 0;
  transition: top 0.2s ease-in-out;
  width: 100%;
  z-index: 99;
}

.wrapper {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	z-index: 2;
}


/*  fixed nav starts */
.nav_sticked {
	position: fixed;
	margin: 0;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	transition: top .6s;
	overflow: hidden;
	z-index: 10;
}

.nav_stroke {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

div .logo_place {
	min-height: 1vh;
	background-color: black;
}

div .burger_place {
	min-height: 1vh;
	background-color: #ff6e00;
}
/*	 fixed nav ends  */



/* HEADER LOGO */
div .logo {
	display: flex;
	justify-content: space-around;
	align-items: center;
	color: white;
	background-color: black;
	font-family: 'hammerbold';
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 200%;
	white-space: nowrap;
}


.no-link {
	text-decoration: none;
	color: white;
}

/* NAV BAR */
nav {
	display: flex;
	justify-content: space-around;
	align-items: center;
	min-height: 6vh;
	/*background-color: #59595f;*/
	background-color: #ff6e00;
	font-family: 'Yantramanav', sans-serif;
}

.nav-links {
	display: flex;
	justify-content: space-around;
	width: 50%;
	flex-wrap: nowrap;
}

.nav-links li {
	list-style: none;
	padding-right: 20px;
	padding-left: 20px;
}

.nav-links {
	color: white;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 200;
}

.topnav-link {
	text-decoration: none;
	color: white;
	font-size: 14px;
	border-bottom: 1px solid transparent;
    padding-bottom: 0.01em;
    transition: border-bottom-color 200ms linear 0s;
}

.topnav-link:hover, .topnav-link.active {
    border-bottom-color: #FFF;
}



/*******************/
/*   BURGER MENU   */
/*******************/


.burger {
	display: none;
	z-index: 100;
}


.burger div {
	width: 20px;
	height: 2px;
	background-color: white;
	margin: 5px;
	transition: all 0.3s ease;
}


/*******************/
/*  SCROLLED MENU  */
/*******************/

/*CUSTOM VARIABLES HERE*/
 
.wrapper {
  transition: transform 0.4s;
}
 
.scroll-down .wrapper {
  transform: translate3d(0, -100%, 0);
}
 
.scroll-up .wrapper {
  transform: none;
}
 
.scroll-up:not(.menu-open) .wrapper {
  background: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.35);
}


/*******************/
/*     SECTION     */
/*******************/


.wrapper1 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	position: relative;
	margin-top: 6vh;
}

.container_content {
	height: 28.50vw;
	/*border-right: 0.5px solid transparent;
    border-bottom: 0.5px solid transparent;*/
    border: 0.18vh solid #dedede;
    border-top: none;
    border-left: none;
}

/* Remove last bottom border */
.container_content:nth-last-child(1) {
	border-bottom: none;
}
.container_content:nth-last-child(2) {
	border-bottom: none;
}



.text_bloc {
	float: left;
	font-family: 'Yantramanav', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0px;
	font-size: 17px;
	white-space: nowrap;
	text-align: left;
	padding-left: 2vh;
	padding-top: 2vh;
}

.title_cover {
	font-size: 2.5vh;
	font-weight: 200;
	font-family:'hammerhighlight';
	letter-spacing: 0.2vw;
	color: white;
}

.title {
	font-size: 2.5vh;
	font-weight: 200;
	font-family:'hammerhighlight';
	letter-spacing: 0.2vw;
	color: white;
}

.text_bloc p {
	color: white;
}

.cover {
	background-image: url(_img/HomePage.jpg);
	max-width: 100%;
	background-size:100% auto;
	background-repeat: no-repeat;
	z-index: 1;
}

.cover_bloc {
	float: left;
	font-family: 'Yantramanav', sans-serif;
	color: white;
	text-transform: uppercase;
	letter-spacing: 0px;
	font-size: 17px;
	white-space: nowrap;
	text-align: left;
	padding-left: 2vh;
	padding-top: 2vh;
}

.eleven {
	background-image: url(_img/live.jpg);
	max-width: 100%;
	background-size:100% auto;
	background-repeat: no-repeat;
	z-index: 6;
}

.ten {
	background-image: url(_img/BKD002_record.jpg);
	max-width: 100%;
	background-size:100% auto;
	background-repeat: no-repeat;
	z-index: 5;
}
.nine {
	background-image: url(_img/BKD003_record.jpg);
	max-width: 100%;
	background-size:100% auto;
	background-repeat: no-repeat;
	z-index: 5;
}
.eight {
	background-image: url(_img/BKD005_sofatalk.jpg);
	max-width: 100%;
	background-size:100% auto;
	background-repeat: no-repeat;
	z-index: 4;
}
.seven {
	background-image: url(_img/BKD001_record.jpg);
	max-width: 100%;
	background-size:100% auto;
	background-repeat: no-repeat;
	z-index: 4;
}
.six {
	background-image: url(_img/record_shelv.jpg);
	max-width: 100%;
	background-size:100% auto;
	background-repeat: no-repeat;
	z-index: 3;
}
.five {
	background-image: url(_img/sofatalk_record.jpg);
	max-width: 100%;
	background-size:100% auto;
	background-repeat: no-repeat;
	z-index: 3;
}.four {
	background-image: url(_img/BKD002_testpress.jpg);
	max-width: 100%;
	background-size:100% auto;
	background-repeat: no-repeat;
	z-index: 2;
}
.three {
	background-image: url(_img/djset.jpg);
	max-width: 100%;
	background-size:100% auto;
	background-repeat: no-repeat;
	z-index: 2;
}
.two {
	background-image: url(_img/BKDGTL_2.2.jpg);
	max-width: 100%;
	background-size:100% auto;
	background-repeat: no-repeat;
	z-index: 1;
}
.one {
	background-image: url(_img/BKDGTL_1.jpg);
	max-width: 100%;
	background-size:100% auto;
	background-repeat: no-repeat;
	z-index: 1;
}

.btn {
}

.btn:hover {
	color: #ff6e00;
	cursor: pointer;
	transition: 200ms linear 10ms;
}


/*******************/
/*     FOOTER      */
/*******************/

footer {
	height: 6vh;
	width: 100%;
	background-color: #e6e6e6;
	border-top: 0.1vh solid white;
}

.wrapper2 {
	display: grid;
	grid-template-columns: 2fr 1fr;
	position: relative;
	justify-content: center;
}


footer ul {
	margin: auto 0 auto 0;
}

.footer-links li {
	list-style: none;
	margin-left: 2vh;
}

ul li {
	display: inline-block;
	font-size: 1.5vh;
	font-family: 'Yantramanav', sans-serif;
	text-transform: uppercase;
}

footer a {
	text-decoration: none;
	color: #4d4d4d;
}

footer p {
	font-family: 'Yantramanav', sans-serif;
	font-size: 1.5vh;
	color: #4d4d4d;
	text-transform: uppercase;
	text-align: right;
	padding-right: 2vh;
	margin: auto 0 auto 0;
	white-space: nowrap;
}

.footer-link {
	color: #4d4d4d;
}

.footer-link:hover {
	color: #ff6e00;
	cursor: pointer;
	transition: 200ms linear 10ms;
}

/*******************/
/*    M E D I A    */
/* ----1024px----- */
/*******************/

@media screen and (max-width: 1024px){
	body {
		overflow-x: hidden;
	}


	div .logo {
		font-size: 200%;
	}

	nav {
	min-height: 8vh;
	}

	.nav-links {
		color: white;
		position: absolute;
		right: 0px;
		height: 100vh;
		top: 8vh;
		/* ! BURGER MENU COLOR ! */
		background-color: #ff6e00;
		display: flex;
		flex-direction: column;
		align-items: center;
		/* ! BURGER MENU SCALE ! */
		width: 50%;
		/* ! BURGER MENU SCALE ! */
		transform: translateX(100%);
		transition: transform 0.5s ease-in;
	}

	/* ! BURGER FIX ! */
	.nav-links {
		display: none;
	}

	.nav-active {
		display: flex;
		transform: translateX(0%);
	}
	/* ! BURGER FIX ! */
	
	.nav-links li {
		opacity: 0;
	}

.topnav-link {
		font-size: 2.5vh;
		border-bottom: 2px solid transparent;
	}

	.burger {
		display: block;
		cursor: pointer;
	}

	.wrapper1 {
	display: grid;
	grid-template-columns: 1fr;
	height: auto;
	margin-top: 8vh;
	}

	.container_content {
	height: 67vw;
	border-right: none;
    border-bottom: 0.8vh solid white;
	}
	.container_content:nth-last-child(2) {
	border-bottom: 0.8vh solid white;
	}

	.text_bloc {
	width: 100%;
	font-family: 'Yantramanav', sans-serif;
	color: black;
	text-transform: uppercase;
	background-color: #e6e6e6;
	letter-spacing: 0px;
	font-size: 17px;
	white-space: nowrap;
	text-align: left;
	padding-left: 1.5vh;
	padding-top: 1vh;
	padding-bottom: 1vh;
	border-bottom: 0.1vh solid #dedede;
	}

	.title {
	font-size: 2.5vh;
	font-family: 'hammerhighlight';
	color: black;
	}

	.text_bloc p {
	color: black;
	}

	/* Remove last bottom border */
	.container_content:last-child {
	border-bottom: none;
	}
	.text_bloc:last-child {
	border-bottom: none;
	}

	.cover {
	position: relative;
	height: 94vh;
	width: auto;
	max-width: 100%;
	background-size: auto auto;
	background-repeat: no-repeat;
	background-position: bottom; 
	}

	.container_content {
	background-position: bottom;
	}

	footer {
		border-top: 0.4vh solid white;
	}
}


/*******************/
/*    M E D I A    */
/* -----768px----- */
/*******************/

@media screen and (max-width: 768px){
	body {
		overflow-x: hidden;
	}

	div .logo {
		font-size: 2.8vh;
	}

	nav {
	min-height: 6vh;
	}

	.nav-links {
		color: white;
		position: absolute;
		right: 0px;
		height: 100vh;
		top: 6vh;
		/* ! BURGER MENU COLOR ! */
		background-color: black;
		/*background-color: #ff6e00;*/
		display: flex;
		flex-direction: column;
		align-items: center;
		/* ! BURGER MENU SCALE ! */
		width: 100%;
		/* ! BURGER MENU SCALE ! */
		transform: translateX(100%);
		transition: transform 0.5s ease-in;
		z-index: 50;
	}

	.nav-links li {
		opacity: 0;
	}

	.topnav-link {
		font-size: 2.5vh;
	}

	.burger {
		display: block;
		cursor: pointer;
	}

	.wrapper1 {
	width: 100%;
	margin-top: 6vh;
	}

	.container_content {
	max-height: 67vw;
	min-height: 57.1vw;
	border-right: none;
    border-bottom: none;
    border-bottom: 0.6vh solid white;
	}

	.text_bloc {
	font-size: 13px;
	border-bottom: 0.5px solid transparent;
	border-color: #FFF;
	}

	.title {
	font-size: 2.2vh;
	font-family: 'hammerhighlight';
	}

	/* Remove last bottom border */
	.container_content:last-child {
	border-bottom: none;
	}
	.text_bloc:last-child {
	border-bottom: none;
	}

	.cover {
	height: 55vh;
	min-height: 47vh;
	background-position: center;
	}

	.footer-links {
	display: flex;
	}

	ul li, footer p {
		font-size: 1.2vh;
	}
}


/*******************/
/*    M E D I A    */
/* -----640px----- */
/*******************/


@media screen and (max-width: 640px){
	body {
		overflow-x: hidden;
	}

	div .logo {
		font-size: 1.8vh;
	}

}

.nav-active {
	transform: translateX(0%);
	}


@keyframes navLinkFade {
	from {
		opacity: 0;
		transform: translateX(50px);
	}
	to {
		opacity: 1;
		transform: translateX(0px);
	}
}

.toggle .line1 {
	transform: rotate(-45deg) translate(-5px, 5px);
}
.toggle .line2 {
	opacity: 0;
	}
.toggle .line3 {
	transform: rotate(45deg) translate(-5px, -5px);
}