/*
Theme Name: Mark Deakin Guitar
Author: KTC
Version: 1
*/

/*@font-face {font-family:"Guanine";src: url("font/guanine.otf") format("opentype");}
@font-face {font-family:"Masiku";src: url("font/masiku-regular.ttf") format("truetype");}*/
@font-face {font-family:"Philosopher";src: url("font/Philosopher-Regular.ttf") format("truetype");}
@font-face {font-family:"Antihero";src: url("font/antihero-regular.ttf") format("truetype");}
@font-face {font-family:"Skandar";src: url("font/Skandar.otf") format("opentype");}

::-webkit-scrollbar					{width:10px;height:5px;z-index:2;}
::-webkit-scrollbar-corner,
::-webkit-scrollbar-track			{background-color:#510000;}
::-webkit-scrollbar-thumb			{background:#600;border:1px solid #711;border-radius:10px;}
::-webkit-scrollbar-thumb:hover		{background:#711;}

body,html				{margin:0;padding:0;min-height:100%;background-color:#600;font-family:Roboto,sans-serif;}
header,main,footer		{padding:0;margin:0;color:white;}
.container				{width:960px;margin:0 auto;max-width:100%;padding:20px 30px;box-sizing:border-box;}

header					{background-image:url(img/wood.jpg);background-size:cover;position:fixed;width:100%;overflow:hidden;z-index:20;box-shadow:0 0 10px black;}
#title h1				{font-family:Antihero;font-size:45px;margin:0;font-weight:normal;}
header .container,
header .menu,
header ul li,
#title h1				{transition:all 0.5s;}
header.small #title h1	{font-size:30px;}
#title .tagline			{color:rgba(255,255,255,0.6);}
header .container		{width:95%;}
header.small .container	{padding:5px 30px;}
header nav				{position:relative;}
header a				{text-decoration:none;color:white;}
header ul				{padding:0;margin:0;list-style-type:none;}
header ul li			{display:inline-block;font-size:30px;font-weight:bold;text-transform:uppercase;}
header.small ul li		{font-size:20px;} 
header ul li a			{display:inline-block;padding:15px;transition:background-color 0.2s;font-family:Philosopher;}
header ul li a:hover	{background-color:rgba(255,255,255,0.2);}
header .menu			{position:absolute;right:0;top:50%;margin-top:-33px;font-size:0;}
header.small .menu		{margin-top:-26px;}
@media (max-width:1200px){
	#title h1			{font-size:38px;}
	header ul li		{font-size:26px;}
	header ul li a		{padding:15px 10px;}
	}
@media (max-width:800px){
	header				{text-align:center;}
	header .container	{width:100%;max-width:100%;padding:5px;}
	header .menu		{position:relative;margin:0 auto;font-size:16px;}
	header.small .menu	{margin-top:0px;font-size:16px;}
	header .menu li a	{padding:2px 5px;}
	}
@media (max-width:400px){
	#title h1				{font-size:30px;}
	header.small #title h1	{font-size:22px;}
	header .menu			{font-size:16px;}
	header.small .menu		{font-size:16px;}
	}

main					{background-color:#510000;padding-top:100px;}
section					{text-align:center;padding:100px 0;position:relative;z-index:2;}
section h2				{margin-top:0;font-size:40px;text-transform:uppercase;font-family:Philosopher;}
section .container		{padding:40px;background-color:rgba(200,50,50,0.7);box-shadow:0 0 5px #ff4b4b;border-radius:5px;max-width:96%;}
@media (max-width:400px){
	section .container	{padding:20px;}
	}
	
#home					{padding-top:0;/*height:2500px;*/height:1000px;}
@media (max-width:1200px){#home {height:1500px;}}
@media (max-width:400px){#home {height:1000px;}}
#stage					{width:1066px;height:1081px;margin:0 auto;overflow:hidden;position:fixed;z-index:0;left:50%;top:50%;margin-left:-533px;max-height:calc(100% - 41px);max-width:100%;}
#stage img				{position:absolute;left:0;top:0;height:100%;}
#stage #foreground		{z-index:5;transform-origin:center;}
#stage #mark			{z-index:4;}
#stage #blurred			{z-index:3;}
#stage #mandelbrot		{z-index:2;right:0;left:unset;opacity:0.6;}
#stage #malachite		{z-index:1;}
#markd					{position:fixed;left:50%;opacity:0;}

.background				{position:fixed;top:0;right:50%;;z-index:0;opacity:0;width:750px;overflow:hidden;width:400px;}
.background::after		{content:" ";position:absolute;display:block;left:0;top:0;width:100%;height:100%;box-shadow:10px 0 10px 0px #510000 inset;}
.background.right		{left:50%;right:unset;}
.background.right::after{box-shadow:-10px 0 10px 0px #510000 inset}
@media (max-width:800px){.background {display:none;}}

.md-playlist										{color:#222;font-weight:bold;}
.md-playlist-playing								{background-color:rgba(255,255,255,0.7);border-radius:5px 5px 0 0;padding:20px;position:relative;}
.md-playlist-playing.image							{padding-left:190px;min-height:150px;}
.md-playlist-playing .description					{font-weight:normal;}
.md-playlist-playing h3								{text-shadow:1px 1px 3px rgba(0,0,0,0.3);margin:0;font-size:28px;}
.md-playlist-playing img							{position:absolute;left:20px;top:50%;margin-top:-75px;display:none;border-radius:5px;}
.md-playlist-playing.image img						{display:block;}
.md-playlist-playing audio							{width:100%;}

.md-playlist-tracks									{background-color:rgba(255,255,255,0.4);border-radius:0 0 5px 5px;margin:0;padding:20px;overflow-y:auto;max-height:200px;}
.md-playlist-tracks li								{position:relative;padding:10px 30px;border-radius:5px;transition:all 0.2s;cursor:pointer;text-align:center;height:18px;line-height:18px;list-style-type:none;}
.md-playlist-tracks li.current						{background-color:rgba(255,255,255,0.2);}
.md-playlist-tracks li:hover						{background-color:rgba(255,255,255,0.4);}
.md-playlist-tracks li .number						{float:left;width:0;white-space:nowrap;margin-right:30px;}
.md-playlist-tracks li .number:after				{content:'\25B6\FE0E';margin-left:10px;display:inline-block;vertical-align:middle;height:100%;}
.md-playlist.playing li.current .number:after		{content:'';margin-top:-2px;border:3px solid #333;height:15px;width:3px;border-width:0 5px;}
.md-playlist-tracks li .length						{float:right;font-size:12px;width:0;white-space:nowrap;margin-right:30px;}
.md-playlist-tracks .description					{display:none;}
.md-playlist-tracks::-webkit-scrollbar				{width:10px;height:5px;z-index:2;}
.md-playlist-tracks::-webkit-scrollbar-corner,
.md-playlist-tracks::-webkit-scrollbar-track		{background-color:transparent;}
.md-playlist-tracks::-webkit-scrollbar-thumb		{background:#333;border:none;border-radius:10px;}
.md-playlist-tracks::-webkit-scrollbar-thumb:hover	{background:#444;}

@media (max-width:600px){
	.md-playlist-playing							{padding:10px;}
	.md-playlist-playing.image						{padding-left:10px;min-height:0;}
	.md-playlist-playing img						{position:static;margin:0 auto 10px;}
	.md-playlist-playing h3							{font-size:22px;}
	.md-playlist-tracks								{padding:10px 5px;}
	.md-playlist-tracks li							{padding:10px 5px;font-size:14px;}
	.md-playlist-tracks .number						{font-size:12px;}
	.md-playlist-tracks .number:after				{font-size:16px;margin-left:2px;}
	}

#contact textarea,
#contact [type=text],
#contact [type=email]			{max-width:90%;width:500px;border-radius:4px;border:1px solid #ccc;padding:3px;background-color:rgba(255,255,255,0.95);text-align:center;font-weight:bold;color:#333;font-size:20px;box-shadow:-1px -1px 10px -2px #000 inset;border:none;}
#contact textarea				{text-align:left;font-size:16px;}
#contact [type=submit]			{background-color:#600;color:white;font-weight:bold;border-radius:5px;border:1px solid #933;padding:10px 100px;cursor:pointer;transition:all 0.2s;}
#contact [type=submit]:hover 	{background-color:#711;}
#contact .wpcf7-spinner			{display:block;margin:0 auto;}
#contact .wpcf7-not-valid-tip	{width:300px;margin:4px auto 0;background-color:rgba(255,255,255,0.8);border-radius:8px;padding:3px 0;font-weight:bold;}
#contact .wpcf7-response-output	{border:none;background-color:rgba(255,255,255,0.95);color:#333;font-weight:bold;padding:10px 0;border-radius:6px;}

footer					{text-align:center;position:relative;z-index:3;background-color:#600;}