@import 'https://fonts.googleapis.com/css?family=Ubuntu:300,400,400i,500,700&subset=latin-ext';

@font-face {
	font-family: 'PoliticaXT';
	src: url('https://kultblog.hu/archive/wp-content/themes/kultblog/css/font/politicaxt.eot');
	src:
		url('https://kultblog.hu/archive/wp-content/themes/kultblog/css/font/politicaxt.eot#iefix') format('embedded-opentype'),
		url('https://kultblog.hu/archive/wp-content/themes/kultblog/css/font/politicaxt.woff') format('woff'),
		url('https://kultblog.hu/archive/wp-content/themes/kultblog/css/font/politicaxt.ttf') format('truetype'),
		url('https://kultblog.hu/archive/wp-content/themes/kultblog/css/font/politicaxt.svg#PoliticaXT') format('svg');
	font-weight: normal;
	font-style: normal;
}

* {
	padding:0;
	margin:0;
}

body {
	font-family: 'Ubuntu', helvetica, arial, sans-serif;
	font-size:18px;
	font-weight:300;
	color: #282828;
	background: #f0f0f0;
}

h1, h2, h3 {
	font-family: 'PoliticaXT', helvetica, arial, sans-serif;
	font-weight:500;
}
h1 {
	font-size:40px;
}
h2, h3 {
	font-size:24px;
	margin:30px 0 10px;
}
h3 {
	font-size:20px;
}
ul {
	list-style-type:square;
	margin:0 0 30px;
}
li {
	line-height:28px;
}
p {
	margin-bottom:10px;
	line-height: 24px;
}

.content {
	padding:100px 500px 100px 100px;
	max-width: 1000px;
}

.sidebar {
	width: 400px;
	height: 100%;
	background: #333;
	position: fixed;
	top: 0;
	right: 0;
}
.archive {
	background: url(logo.png) no-repeat center 0;
	width: 200px;
	height: 400px;
	position: relative;
	margin: 0 auto;
	top: 50%;
	margin-top: -200px;
}
.sidebar p {
	color: #fff;
	position: absolute;
	bottom: 80px;
	margin-bottom: 0;
	font-size: 12px;
	text-align: center;
	width: 200px;
}
.sidebar a.button, .sidebar a.button:visited {
	color:#fff;
	text-decoration:none;
	display: block;
	border: 1px solid #fff;
	text-align: center;
	width: 198px;
	line-height: 60px;
	cursor: pointer;
	position: absolute;
	bottom: 110px;
	transition: 0.5s background, 0.5s color;
}
.sidebar a.button:hover {
	background: #fff;
	color: #333;
}
.sidebar .archive .external {
	position: absolute;
	bottom: 0;
	text-align: center;
	width: 200px;
}
.sidebar a.youtube {
	background: url(youtube.png) no-repeat center center;
	width: 85px;
	height: 30px;
	display: inline-block;
	text-indent: -9999px;
	background-size: contain;
}
.sidebar a.mixcloud {
	background: url(mixcloud.png) no-repeat center center;
	width: 85px;
	height: 30px;
	display: inline-block;
	text-indent: -9999px;
	margin-left: 20px;
	background-size: contain;
}

@media only screen and (max-width : 1100px) {

	.content {
		padding: 100px 400px 100px 50px;
	}

	.sidebar {
		width: 350px;
	}

}

@media only screen and (max-width : 800px) {

	.content {
		padding: 180px 40px 40px;
    	background: url(logo-dark.png) no-repeat 40px 40px;
	}

	.sidebar {
		width: auto;
		height: auto;
		background: #333;
		position: static;
	}
	.archive {
		background: url(logo.png) no-repeat center 60px;
		width: auto;
		height: auto;
		position: static;
		margin-top: 0;
		padding-top: 210px;
	}
	.sidebar p {
		position: static;
		width: auto;
		line-height: 36px;
	}
	.sidebar a.button, .sidebar a.button:visited {
		position: static;
		margin: 0 auto;
	}
	.sidebar .archive .external {
		position: static;
		width: auto;
		padding: 40px 0 180px;
	}

}

@media only screen and (max-width : 380px) {

	.content {
		padding: 180px 20px 20px;
    	background: url(logo-dark.png) no-repeat 20px 40px;
	}
	ul {
		margin-left: 20px;
	}

}

@media only screen and (min-width : 1600px) {

	.content {
		width: 70%;
	}

	.sidebar {
		width: 30%;
	}

}

@media only screen and (min-width : 1900px) {

	.content {
		width: 65%;
	}

	.sidebar {
		width: 35%;
	}

}