/* 
***********************
::: SECTION : FONTS ::: 
***********************
*/

	@font-face {
		font-family: 'znikomit';
		src: url('./znikomitno25/ZnikomitNo25.otf');
	}	

	@font-face {
		font-family: 'nordica';
		src: url('./nordica/NordicaHairline.otf');
	}	

	@font-face {
		font-family: 'idm_minimal';
		src: url('./idm_minimal/IDM_Minimal.ttf');
	}	


/*
****************************************
::: SECTION : TEXT HEADERS AND LINKS ::: 
****************************************
*/

	h1 {
		margin: 0;
		padding: 0;
		font-family: 'znikomit';
		font-size: 35px;
		font-weight: 600;
		color: #cc0000;
	}

	h2 {
		margin: 0;
		padding: 0;
		font-family: 'nordica';
		font-size: 10px;
		font-weight: 600;
		color: #000000;
	}

	h3 {
		margin: 0;
		padding: 0;
		font-family: 'nordica';
		font-size: 12px;
		font-weight: 600;
		color: #565656;
	}

	h4 {
		margin: 0;
		padding: 0;
		font-family: 'nordica';
		font-size: 18px;
		font-weight: 600;
		color: #565656;
	}

	h5 {
		margin: 0;
		padding: 0;
		font-family: 'nordica';
		font-size: 14px;
		font-weight: 600;
		color: #565656;
	}

	p {
		margin: 0;
		padding: 0;
		color: #565656;
		font-family: 'nordica';
		font-size: 14px;
		line-height: 25px;
		font-weight: 600;
		text-align: left;

	}

	a {
		text-decoration: none;
		color: #565656;
	}

	a:active {
		color: #aaaaaa;
		outline: none;
		-moz-outline-style: none;
	}

	a:focus {
		color: #aaaaaa;
		outline: none;
		-moz-outline-style: none;
	}

/*
***************************
::: SECTION : HTML BODY ::: 
***************************
*/

	html {
		margin: 0;
		padding: 0;
		max-width: 100vw;
		width: 100%;
		background: #ffffff;
	}

	body {
		margin-top: 5%;
		margin-left: auto;
		margin-right: auto;
		padding: 0;
		background: #ffffff;
		width: 90%;
	}

/*
***************************
::: SECTION : OBJECTS ::: 
***************************
*/

/*---> SINGLE BOX */

	.single-box {
		margin: 0;
		padding: 0;
		margin-bottom: 50px;
		display: block;
		margin-left: auto;
		margin-right: auto;
		width: 60vw;
		height: 67vw;
		background: none;
		text-align: center;			
		text-align-first: center;			
		text-align-last: center;			
	}


		.single-box .box-content {
			margin:0;
			padding: 0;
			width: 100%;
			height: 60vw;
			background: #000000;
			overflow: hidden;

		}

		.single-box h3 {
			margin:0;
			margin-top: 1vw;
			padding: 0;
			width: 100%;
			height: 7vw;
			line-height: 3vw;
			background: none;

		}


	.ghost-box {
		margin: 0;
		padding: 0;
		display: inline-block;
		width: 60vw;
		height: 1px;
		background: none;
	}

/*
************************
::: SECTION : HEADER ::: 
************************
*/

	header {
		display: block;
		margin: 0;
		padding: 0;
		width: 100%;
		background: #ffffff;
		overflow: auto;
		height: auto;
	}

/*----------->  PAGE TITLE (LOGO) ** */
		header .page-title {
			display: block;
			margin: 0;
			padding: 0;
			float: left;
			height: 65px;
			width: 70%;
			background: #ffffff;
			text-align: left;
			margin-bottom: 10px;
		}

			header .page-title a h1 {
				line-height: 40px;
			}

				header .page-title a h1:hover {
					color: #330000;
				}

				header .page-title a h1:active {
					color: #ff0000;
				}

			header .page-title a h2 {
				line-height: 25px;
			}


/* ----------> MAIN MENU ** */
		header .menu-button {
			display: block;
			width: 30%;
			float: right;
			height: 65px;
			text-align: right;
		}
		
			header .menu-button img{
				height: 80%;
				margin-left: auto;
				margin-right: auto;
			}

			header .menu-button img:hover {
				opacity: 0.6;
				cursor: pointer;			
			}

		header .main-menu {
			display: none;
			float: right;
			margin: 0;
			padding: 0;
			background: #ffffff;
			text-align: center;
			width: 100%;
			border: 0;
			border-top: 1px solid #000000;
			overflow: auto;
			height: auto;
		}

			header .main-menu ul{
				display: block;
				margin: 0;
				padding: 0;
				width: 100%;
				margin-top: 5px;
				margin-bottom: 5px
				overflow: auto;
				height: auto;

		}


				header .main-menu ul li{
					display: block;
					margin: 0;
					padding: 0;
					list-style: none;
					width: 100%;
					text-align: center;
					border-bottom: 1px solid #a5a5a5;
				}
				header .main-menu ul li:last-child{
					border: 0;
				}

				header .main-menu ul li:hover{
					background: #efefef;
					color: #cc0000;
				}

				header .main-menu ul li h3{
					line-height: 25px;
				}
				header .main-menu ul li:hover h3 a{
					color: #cc0000;
				}


				header .main-menu ul li h3 a:focus{
					color: #ff0000;
					text-decoration: underline;
				}

/*
************************
::: SECTION : FOOTER ::: 
************************
*/

	footer {
		display: block;
		float: left;
		margin: 0;
		margin-top: 15%;
		padding: 0;
		width: 100%;
		background: #ffffff;
		height: 50px;
	}
		footer .card#foot {
			display: block;
			float: right;
			width: 100%;
			border-top: 1px solid #dddddd;
			background: #ffffff;
			text-align: right;
		}
			footer .card#foot h3{
			display: inline-block;
			color: #777777;
			line-height: 30px;
		}

			footer .card#foot h3 a{
				color: #777777;
				padding-right: 25px;

			}

			footer .card#foot h3 a:hover{
				color: #000000;
			}
/*
************************
::: SECTION : PAGE ::: 
************************
*/

	.page-container {
		display: block;
		margin: 0;
		margin-top: 25px;
		padding: 0;
		width: 100%;
		float: left;
	}

		.page-container img#home{
			width: 100%;
		}

	.page-container .card {
		marign: 0;
		padding: 0;
		display: block;
		width: 100%;
		text-align: center;

	}

/* ----> CONTACT PAGE */
	.page-container .card#contact {
		height: 65vh;
		background: url('../images/wudec-london1.jpg') bottom left;
		background-size: 70%;
		background-repeat: no-repeat;
		text-align: center;
	}

		.page-container .card#contact p{
			width: 100%;
			display: block;
			margin: 0;
			margin-top: 10vh;
			padding: 0;
			font-family: 'nordica';
			font-size: 22px;
			font-weight: 200;
			text-align: center;
		}

/* ----> ABOUT PAGE */
	.page-container .card#about-image {
		float: left;
		width: 70%;
		margin-top: 10px;
		margin-left: 15%;	
	}

		.page-container .card#about-image img{
			width: 100%;
		}

	.page-container .card#about {
		float: left;
		width: 95%;
		overflow: auto;
		overflow-x: hidden;
		margin-top: 40px;
	}

		.page-container .card#about p {
			display: block;
			float: left;
			width: calc(100% - 15px);
			margin: 0;
			padding: 0;
		}

/* ----> WEBSITES PAGE */
	.page-container .card#websites_post {
		width: 100%;
		overflow: auto;
		margin-top: 50px;
	}

		.page-container .card#websites_post img{
			margin: 0;
			padding: 0;
			width: 80%;
			margin-left: 10%;
		}

		.page-container .card#websites_post h3{
			width: 100%;
			margin: 0;
			line-height: 20px;
			margin-top: 20px;
			text-align: center;
		}

			.page-container .card#websites_post h3 a:hover{
				color: #cc0000;
			}

		.page-container .card#websites_post p{
			margin: 0;
			padding: 0;
			width: 100%;
			float: left;
			margin-top: 20px;
		}

/* ----> VIDEO PAGE */
	.page-container .card#video_post {
		display: block;
		width: 100%;
		overflow: auto;
		margin-top: 50px;
		text-align: justify;
		text-align-first: justify;
		text-align-last: justify;
	}

		.page-container .card#video_post .single-box#single-video{
			height: 33vw;
		}


		.page-container .card#video_post a .single-box#single-video:hover{
			opacity: 0.7;
		}

		.page-container .card#video_post a .single-box#single-video:active{
			opacity: 0.4;
		}

		.page-container .card#video_post a .single-box#single-video:focus{
			opacity: 0.4;
		}

		.page-container .card#video_post .single-box#single-video .box-content {
			height: 30vw;
			overflow: hidden;
			text-align: center;
		}
		.page-container .card#video_post .single-box#single-video img{
			width: 100%;
		}
		.page-container .card#video_post .single-box#single-video img#oxytocin{
			width: 140%;
			margin-left: -20%;
			margin-top: -10%;
		}

		.page-container .card#video_post .single-box#single-video img#thereweare{
			width: 140%;
			margin-left: -20%;
			margin-top: -10%;
		}
/* ----> ----> SINGLE VIDEO PAGE */
			.page-container video#clip {
				display: block;
				float: left;
				width: 85%;
				height: 100%;

			}

			.page-container .card#video_menu{
				float: left;
				width: 14%;
				margin-left: 1%;
				text-align: left;
			}

				.page-container .card#video_menu h5{
					margin-bottom: 8px;
				}

				.page-container .card#video_menu h5 a:hover{
					color: #cc0000;
				}

	.page-container .card#video_desc {
		width: 100%;
		float: left;
		margin-top: 50px; 
	}

	.page-container .card#video_desc h4 {
		text-align: left;
		font-size: 22px;
		line-height: 30px;
		width: 100%;
		margin-bottom: 40px;
	}

	.page-container .card#video_desc p {
		line-height: 25px;
		margin-top: 20px;
	}


	.page-container .card#video_desc h2 {
		display: block;
		text-align: left;
		font-size: 12px;
		line-height: 30px;
		margin-top: 25px;
		height: 30px;
		width: 100%;
	}

	.page-container .card#video_desc h2 a:hover {
		color: #cc0000;
	}

/* ----> IMAGES PAGE */
	.page-container .card#graphic_works {
		display: block;
		width: 100%;
		margin: 0;
		padding: 0;
		margin-left: auto;		
		margin-right: auto;		
		text-align: left;
		
	}

	.page-container .card#graphic_works a:hover {
		opacity: 0.8;
	}
		.page-container .card#graphic_works .single-box#single-graphic{
			display: block;
			margin: 0;
			margin-bottom: 40px;
			width: 70vw;
			height: 75vw;
			margin-left: calc(50% - 35vw);
		}
			.page-container .card#graphic_works .single-box#single-graphic img{
				width: 100%;
			}

		.page-container .card#graphic_works .single-box#single-graphic .box-content{
			margin:0;
			padding: 0;
			width: 100%;
			height: 70vw;
			background: #000000;
			overflow: hidden;

		}

		.page-container .card#graphic_works .single-box#single-graphic h3{
			margin:0;
			margin-top: 2vw;
			padding: 0;
			width: 100%;
			font-size: 14px;
			height: 5vw;
			line-height: 2vw;
			background: none;

		}

	.page-container .card#gfx {
		display: none;
	}

	.page-container .card#gfx2 {
		display: none;
	}

/* ----> MUSIC PAGE */
	.page-container .card#music_post {
		display: block;
		width: 100%;
		overflow: auto;
		margin-top: 50px;
		text-align: justify;
		text-align-first: justify;
		text-align-last: justify;
	}

		.page-container .card#music_post h4 {
			display: block;
			width: 100%;
			margin-bottom: 50px;
			text-align: left;
			text-align-first: left;
			text-align-last: left;
			border-bottom: 1px solid #888888;
			line-height: 50px;
	
		}


		.page-container .card#music_post .single-box:hover {
			opacity: 0.8;
		}

		.page-container .card#music_post .single-box .box-content img{
				width: 100%;
				height: 100%;
			}

/* ----> NEWS PAGE */

	.page-container .card#news_post:first-child {
		margin-top: 20px;
	}

	.page-container .card#news_post {
		width: 100%;
		overflow: auto;
		margin-top: 0;
		margin-bottom: 50px;
		padding-bottom: 20px;
		text-align: left;		
		
	}

		.page-container .card#news_post h4{
			display: block;
			width: 100%;
			float: left;
			margin-top: 50px;
			text-align: right;
			line-height: 20px;
			height: 20px;
			text-align: left;
			border-bottom: 1px solid #898989;
		}

		.page-container .card#news_post h5{
			line-height: 25px;
			height: 25px;
			display: block;
			width: 100%;
			float: left;
			text-align: right;
		}

		.page-container .card#news_post img{
			margin-top: 30px;
			display: block;
			width: 100%;
			float: left;
			overflow: auto;
		}

		.page-container .card#news_post p{
			margin: 0;
			padding: 0;
			margin-top: 30px;
			display: block;
			width: 100%;
			float: left;
			overflow: auto;
		}	

/* ----> SCORES SINGLE PAGE */
		.page-container .card#scores{
			float: left;
			width: 100%;
		}

			.page-container .card#scores img{
				width: 100%;
				margin-top: 20px;
			}

		.page-container p#scores{
			margin: 0;
			padding: 0;
			width: 100%;
			float: left;
			font-weight: 600;
			margin-top: 20px;

		}

			.page-container p#scores a:hover{
				color: #cc0000;
			}

			.page-container p#scores b{
			font-weight: 900;

			}
/*
*********************
::: SINGLE ALBUM  ::: 
*********************
*/

	.page-container .card#album_cover{
		margin-top: 20px;
		width: 100%;
	}

		.page-container .card#album_cover img{
			width: 100%;
		}

	.page-container .card#album_description{
		margin: 0;
		padding: 0;
		width: 90%;
		float: left;
	}

		.page-container .card#album_description h4{
			text-align: left;
			margin-top: 20px;
		}

		.page-container .card#album_description h5{
			text-align: left;
			margin-top: 40px;
		}

		.page-container .card#album_description h5 a{
			color: #000000;
		}

		.page-container .card#album_description h5 a:hover{
			color: #cc0000;
		}

	.page-container .card#album_listen{
		display: block;
		float: left;
		width: 100%;
		text-align: left;
		margin-top: 50px;
	}

	.page-container .card#album_listen h4{
		margin-bottom: 20px;
	}

	.page-container .card#album_listen .single-track{
		width: 100%;
		margin-bottom: 20px;
		margin-top: 10px;
		height: 60px;
	}
	.page-container .card#album_listen .single-track:hover{
		background: #000000;
	}

	.page-container .card#album_listen .single-track:hover h5{
		color: #ffffff;
	}
	.page-container .card#album_listen .single-track h5{
		float: left;
		display: block;
		width: 100%;
		line-height: 25px;
	}

	.page-container .card#album_listen .single-track audio{
		height: 35px;
		float: right;
		display: block;
		width: 100%;

	}


/*
******************************
::: SINGLE IMAGES GALLERY  ::: 
******************************
*/

	.page-container .card#gallery-thumbnails{
		width: 100%;
		text-align: justify;
		margin-top: 20px;
	}
		.page-container .card#gallery-thumbnails img{
			width: 45%;
			margin-bottom: 20px;
		}

		.page-container .card#gallery-thumbnails .ghost-box#image{
			width: 30%;
		}

	.page-container .card#gallery-description{
		display: block;
		margin: 0;
		margin-top: 50px;
		float: left;
		width: 90%;
		text-align: left;		
	}

		.page-container .card#gallery-description h4{
			margin-bottom: 5px;
		}

		.page-container .card#gallery-description h3{
			margin-bottom: 20px;
			border-bottom: 1px solid #d5d5d5;
		}

		.page-container .card#gallery-description p{
			margin-bottom: 15px;

		}

/*
*********************
::: LICENCE PAGE  ::: 
*********************
*/

	.page-container .card#licence{
		width: 95%;
		float: left;
		text-align: left;
		margin-top: 20px;
	}

	.page-container .card#licence h4{
		margin-bottom: 20px;
		margin-top: 40px;
	}

	.page-container .card#licence p{
		margin-bottom: 20px;

	}


/*
*********************
::: INDEX OF WORKS PAGE  ::: 
*********************
*/

	.page-container .card#index_of_works{
		width: 95%;
		float: left;
		text-align: left;
	}

		.page-container .card#index_of_works h4{
			margin-top: 80px;

		}


		.page-container .card#index_of_works ul{
			margin: 0;
			margin-top: 50px;
			padding: 0;
			list-style: none;
		}

			.page-container .card#index_of_works ul li{
				margin: 0;
				padding: 0;
				margin-bottom: 20px;
				font-family: 'nordica';
				font-size: 12px;
				line-height: 18px;
				font-weight: 600;
				color: #565656;
			}