/*

Theme Name: Retablos
Author: Sergey Klisunov

*/


*,
*:after,
*:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 0;
	padding: 0;}

::selection{background:#ff0}
::-moz-selection{background:#ff0}

img::selection{background:transparent}
img::-moz-selection{background:transparent}

@-webkit-viewport	{width:device-width}
@-moz-viewport		{width:device-width}
@-ms-viewport		{width:device-width}
@-o-viewport		{width:device-width}
@viewport			{width:device-width}

body,
header,
nav,
section,
article,
footer {
	display: block;
	position: relative;
	width: 100%;}

header:after,
nav:after,
section:after,
article:after,
footer:after {
	display: block;
	content: '';
	clear: both;}

ul,
ol,
li {list-style-type: none;}


body {
	width: 100%;
	height: 100%;
	background: #fff;
	color: #000;
	position: relative;
	font-family: 'FF Meta W07',sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;}

h1,h2,h3,h4 {line-height: 1;}

p {
	font-size: 1em;
	margin-bottom: 1em;
	text-align: left;
	font-weight: normal;}


@media screen and (min-width: 1px) {body {font-size: 1em;}}
@media screen and (min-width: 640px) {body {font-size: 1.066em;}}
@media screen and (min-width: 720px) {body {font-size: 1.125em;}}
@media screen and (min-width: 1020px) {body {font-size: 1.25em;}}
@media screen and (min-width: 1300px) {body {font-size: 1.378em;}}
@media screen and (min-width: 1600px) {body {font-size: 1.437em;}}

#hamburger {
	background-color: inherit;
	width: 2.75em;
	position: relative;}


.slice {
	background-color: #000;
	height: 2px;
	margin-bottom: .5em;}


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

	header {padding: 1em;}
	
	nav#menu {margin: 0 auto .5em auto;}
	
	#title {position: relative;}

	#title:after {
		content: '';
		display: block;
		clear: both;}
	
	h1 {
		font-size: 2.5em;
		font-family: 'Leitura News W01',serif;
		margin-bottom: .1em;}
	
	h1,
	h1 a {color: #ff1d43;font-weight: bold;}
	
	#quick-menu {
		display: none;
		width: 100%;
		border: 1px solid #000;
		margin-bottom: .5em;}
	
	.nav {
		display: block;
		width: 100%;
		padding: 1.25em;
		border-bottom: 1px solid #000;
		text-align: center;}

	a.nav:hover {
		background: #000;
		color: #fff;}
	
	#search {border-bottom: none !important;}

	#search input {
		border: 0;
		font: 1em 'FF Meta W07',sans-serif;
		height: 1.5em;
		width: 100%;
		text-align: center;
		color: #e60b21;}
		
	#slices {
		position: absolute;
		top: .75em;
		right: 0;
		display: block;}

	.site-info {font-style: italic;}

	.site-info,
	.current-tag,
	.current-term {width: auto;}
	
	.current-tag {margin-top: -1em;}
	
	
	h2 {
		font-size: 1.5em;
		margin-bottom: .15em;}
	
	.description p {font-size: .85em;}
		
}


@media screen and (min-width: 550px) {
	.site-info,
	.current-tag,
	.current-term {width: 60%;}
}

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

	header {padding: 2em 2em 3em 2em;}

	#title:after {clear: none;}
	
	h1 {
		font-size: 3em;
		width: 30%;
		margin: 0;
		float: left;}
	
	#quick-menu {
		display: block !important;
		width: 70%;
		text-align: right;
		position: absolute;
		bottom: .75em;
		right: 0;
		font-size: .85em;
		border: none;}
	
	.nav {
		display: inline-block;
		width: auto;
		padding: 0;
		margin: 0;}
		
	.nav+.nav {margin-left: 1.5em;}

	span.nav {border: none;}

	a.nav {border-bottom: 1px solid #000;}
	a.nav:hover {
		background: #fff;
		color: #ff1d43;
		border-bottom: 1px solid #ff1d43;}
		
	#search input {
		font-size: 1em;
		height: 2em;
		padding: 0 .5em;
		width: 8em;
		border: none;
		text-align: left;}

	#slices {display: none;}
	
	.site-info,
	.current-tag,
	.current-term {width: 33%;}

			
}

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

	header {padding: 2em 3em 3.5em 3em;}
	h1 {font-size: 4em;}
	#quick-menu {font-size: 1em;}
}

@media screen and (min-width: 1600px) {
	
	h1 {font-size: 5em;}
	.nav+.nav {margin-left: 2.5em;}
}

article+article:before {
	display: block;
	content: '';
	//margin: 1em 0;}	

@media screen and (min-width: 1px) {article {margin-bottom: 5em;}}
@media screen and (min-width: 1020px) {article {margin-bottom: 20vh;}}

.page {padding: 0 1em;}

.page h2 {
		font-size: 2em;
		font-weight: bold;
		margin-bottom: .5em;}
		
@media screen and (min-width: 1px) {.page {padding: 0 1em;margin-top: -1em;}}
@media screen and (min-width: 640px) {.page {padding-left: 2em;padding-right: 0;width: 66%;}}
@media screen and (min-width: 1020px) {.page {padding-left: 3em;width: 51%;margin-top: -1.5em;}}
@media screen and (min-width: 1300px) {.page {width: 44%;margin-top: -2em;}}
@media screen and (min-width: 1600px) {.page {width: 33%;}}

.post-edit-link {
	color: #fff;
	display: block;
	width: 100%;
	text-align: center;}


img {
	max-width: 100%;
	min-width: 60%;
	margin: 0 auto;
	height: auto;
	display: block;}

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

	.picture {
		padding: .5em;
		margin-bottom: 1em;}

	.translation,
	.details {padding: .5em 1em;}
	
	.details p {
		font-size: .85em;
		line-height: 1.75em;}
	
	.artist p {margin-bottom: .5em;}

}

@media screen and (min-width: 640px) {
	
	.translation,
	.details {
		margin: 0 auto;
		width: 66%;}
}

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

	.picture {
		width: 55%;
		padding: 0 0 0 2em;
		margin: 0;}

	.translation,
	.details {
		width: 36%;
		margin: 0 0 0 60%;
		padding: 0;}

	.translation p:first-child {margin-top: -7em;}

	.dl {float: right;}	

}

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

	.picture {
		width: 55%;
		padding: 0 0 0 3em;}

	.translation,
	.details {
		width: 32%;
		margin: 0 0 0 61%;}
		
	.page p,
	.translation p {//font-size: 1.063em;}

}

	
.index ul+ul {border-top: none;}

.count {display: none;}

.index ul li {
	display: block;
	width: 100%;
	font-family: 'Leitura News W01','Octava W08',serif;
	position: relative;
	font-size: .875em;
	margin-bottom: .25em;
}

.index ul li a {
	display: inline-block;
}

.index ul li span {
	font-size: .66em;
	color: #777;
}

.sort {margin-bottom: 1.5em;}

@media screen and (min-width: 1px) {.sort {padding: 0 1em;} .index ul {padding: 1em 1em;}}
@media screen and (min-width: 640px) {.sort {padding: 0 2em;} .index ul {padding: 1em 2em;}}
@media screen and (min-width: 1020px) {.sort {padding: 0 3em;} .index ul {padding: 2em 3em;}}

.number:before {content: "\2009  \2009";}

@media screen and (min-width: 1px) {
	.index {margin-top: -1em;}
}

@media screen and (min-width: 320px) {
	
	.index ul {
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;}
}
		

@media screen and (min-width: 1020px) {
	.index {margin-top: -1.5em;}
	.index ul {
		-webkit-column-count: 3;
		-moz-column-count: 3;
		column-count: 3;}
}

@media screen and (min-width: 1400px) {
	.index {margin-top: -2em;}

	.index ul {
		-webkit-column-count: 5;
		-moz-column-count: 5;
		column-count: 5;}
}

#pagination {
	text-align: center;
	display: block;
	margin-bottom: 4em;}

	
.current-page {font-weight: bold;font-size: 1.25em;}

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

	.wp-paginate li {
		display: none;
		font-size: 3em;}

	.next a,
	.prev a {
		display: inline-block;
		width: 100%;
		padding: .2em 0;}

	.next a:hover,
	.prev a:hover {
		background: #000;
		color: #fff;}

	a.page-number:hover {font-size: 1.25em;}
		
	.next,
	.prev {
		display: inline-block !important;
		width: 50%;
		border-top: 1px solid #000;
		border-bottom: 1px solid #000;
		text-align: center;}

	.prev {float: left;}

	.next {
		float:right;
		border-left: 1px solid #000;}
}

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

	.wp-paginate li {font-size: 2em;}

	.next a,
	.prev a {padding: .5em 0;}

}

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

	#pagination {margin-top:-4em;}

	.wp-paginate li {
		display: inline-block;
		width: auto;
		margin: 0 1.25em;
		font-size: 1.25em;}

	.next a,
	.prev a {
		display: block;
		padding: .15em;}

	.next a:hover,
	.prev a:hover {
		background: #fff;
		color: #ff1d43;}
		
	.next,
	.prev {
		display: inline-block !important;
		width: auto;
		float: none;
		border: none;
		text-align: center;}

}

footer {border-top: 1px solid #eee;}

#fecit a {font-style: italic;}

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

	.column {
		display: block;
		margin-bottom: 4em;}

	.column h4 {margin-bottom: 1em;}

	.column ul li {
		margin-bottom: 1.5em;
		font-size: .9em;}

	footer {padding: 3em;}

	#copyright p {
		font-size: .875em;
		line-height: 1.75em;}

	#fecit {text-align: center;}
}


@media screen and (min-width: 640px) {
	
	.columns:after {
		content: '';
		display: block;
		clear: both;}
	
	.column {
		float: left;
		width: 33%;
		padding-right: 2em;}

	.column h4 {margin-bottom: 1em;}

	#copyright {
		width:50%;
		margin: 0 auto;
	}
	
	#fecit {text-align: center;}
}



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

	.columns:after {clear: none;}
		
	.column {
		width: 22%;
		margin-bottom: 0;}

	.column ul li {
		margin-bottom: 1.25em;
		font-size: .875em;}

	#copyright {
		width: 24%;
		margin: 2em 0 0 0;
		float: right;}

	#fecit {text-align: right;}

}


@media screen and (min-width: 1300px) {footer {padding: 4em 3em;}}


a {
	color: #000;
	text-decoration: none;
	cursor: pointer;
	padding-bottom: 1px;
	border-bottom: 1.5px solid;
	-webkit-transition: all 0.333s ease-in-out;}

footer a {//font-weight: 200;}

h1 a {text-decoration: none;}

a:hover {
	color: #ff1d43;
	text-decoration: none;
	-webkit-transition: all 0.333s ease-in-out;}

article a {color: #ff1d43;-webkit-transition: none;}

article a:hover {font-weight: bold;-webkit-transition: none;}

h1 a,
.wp-paginate a {border: none;}