/* CSS Document */

/* Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html and modified by Diego Quintana: http://diegoquintana.com
	-------------------------------------------------------------- */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	font-weight: inherit;
}

ol,
ul {
	list-style: none;
}

blockquote {
	quotes: none;
}

blockquote:before,
blockquote:after {
	content: '';
	content: none;
}

del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
	text-decoration: none;
	outline: none;
	cursor: pointer;
	transition-property: width, height, color, opacity, background, border;
	transition-duration: 0.2s;
	transition-timing-function: ease-out;
}

a img {
	border: none;
}

object {
	cursor: pointer;
}

.clear {
	display: block;
	clear: both;
	width: 100%;
	height: 0;
	zoom: 1;
}

img {
	max-width: 100%;
}

.color1,
.color1-hover:hover,
a {
	/* color: #cabb95; */
	color: #0c0c0c;
}

.color2,
.color2-hover:hover,
a:hover,
blockquote,
.back a {
	color: #a29061;
}

/* Color del texto al seleccionar con el mouse */

::selection {
	background: rgba(26, 26, 26, 0.99);
	color: #fff;
}

html {
	font-size: 62.5%;
	--fw-normal: 500;
	--fw-bold: 700;
}

@font-face {
	font-family: 'Neue Montreal';
	font-weight: var(--fw-normal);
	font-style: normal;
	src: url('https://cdn.diegoquintana.com/fonts/PPNeueMontreal-Medium.woff2')
			format('woff2'),
		url('https://cdn.diegoquintana.com/fonts/PPNeueMontreal-Medium.woff')
			format('woff'),
		url('https://cdn.diegoquintana.com/fonts/PPNeueMontreal-Medium.otf')
			format('opentype'),
		url('https://cdn.diegoquintana.com/fonts/PPNeueMontreal-Medium.ttf')
			format('truetype');
}
@font-face {
	font-family: 'Neue Montreal';
	font-weight: var(--fw-bold);
	font-style: normal;
	src: url('https://cdn.diegoquintana.com/fonts/PPNeueMontreal-Bold.woff2')
			format('woff2'),
		url('https://cdn.diegoquintana.com/fonts/PPNeueMontreal-Bold.woff')
			format('woff'),
		url('https://cdn.diegoquintana.com/fonts/PPNeueMontreal-Bold.otf')
			format('opentype'),
		url('https://cdn.diegoquintana.com/fonts/PPNeueMontreal-Bold.ttf')
			format('truetype');
}

body {
	font-size: 1.2rem;
	color: #0c0c0c;
	background: #fafafa;
	text-rendering: geometricPrecision;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-feature-settings: 'liga' 1;
	text-rendering: geometricPrecision;
	font-family: 'Neue Montreal', 'Instrument Sans', system-ui, -apple-system,
		BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
		'Open Sans', 'Helvetica Neue', sans-serif;
	line-height: 1;
	font-weight: var(--fw-normal);
	text-transform: uppercase;
}

* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

@keyframes girologo {
	0%,
	100% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(120deg);
	}
	99.99% {
		transform: rotate(120deg);
	}
}

#loader {
	display: block;
	position: fixed;
	width: 10rem;
	height: 10rem;
	text-align: center;
	right: calc(50% - 5rem);
	bottom: calc(50% - 5rem);
	background: 50% 50% no-repeat;
	background-size: contain;
	border-radius: 5rem;
	transition: all 0.5s ease-out, z-index 0s 0.5s;
	z-index: 0;
	background-image: url(https://cdn.diegoquintana.com/img/iso.svg);
	animation: girologo infinite;
	animation-duration: 1s;
}

#cargadores {
	transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1), z-index 0s 0.5s;
	transform: scale(1.2);
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: -2;
	opacity: 0;
	pointer-events: none;
	background: rgba(255, 255, 255, 0.5);
}

.loading #cargadores {
	transform: scale(1);
	z-index: 90;
	transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1), z-index 0s;
	pointer-events: auto;
	opacity: 1;
}

.loading #loader {
	visibility: visible;
	z-index: 91;
	transition: all 0.5s ease-out, z-index 0s;
}

#logo {
	display: none;
	width: 6rem;
	margin: 0 auto 1.5rem;
}

#logo img {
	display: block;
	width: 100%;
}

#wrapper {
	padding: 0 3rem;
}

header {
	position: relative;
	z-index: 99;
	padding: 6rem 0;
	text-align: center;
}

header li {
	display: inline-block;
	margin: 0 0 0 4px;
}

header .back {
	margin-right: 1rem;
}

header li a {
	display: block;
	padding: 4px;
}

.post {
	box-sizing: border-box;
	padding: 0 3rem 6rem;
}

.post_in {
	position: relative;
}

.like_and_reblog_buttons {
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	z-index: 20;
}

.post_in:hover .like_and_reblog_buttons {
	opacity: 1;
}

.like_and_reblog_buttons li {
	display: block;
	margin-bottom: 1px;
	background: #fafafa;
	padding: 0.6rem;
	height: 15px;
}

.post_single .like_and_reblog_buttons {
	position: static;
	margin-top: 2rem;
	opacity: 1;
}

.post_single .like_and_reblog_buttons li {
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 0;
	margin-right: 1px;
	background: transparent;
}

.post a,
.post .img {
	display: block;
	width: 100%;
}

.post_single {
	padding: 0 3rem 6rem;
	text-align: center;
}

.post_single .img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.post_single .post_in {
	display: inline-block;
	text-align: left;
}

.caption {
	font-size: 130%;
	margin-top: 3rem;
}

.quote {
	padding: 3rem;
	box-sizing: border-box;
	background: #fff;
}

.quote blockquote {
	font-size: 180%;
	text-align: center;
	font-weight: var(--fw-bold);
}

.quote blockquote em,
.quote blockquote i {
	font-style: normal;
}

.quote .source {
	text-align: left;
	margin-top: 2rem;
}

.quote .source a {
	display: inline;
}

.post-photoset a + a,
.post-photoset .img + .img {
	margin-top: 1px;
}

.post a:hover .img {
	opacity: 0.75;
}

/*
.cssfilters .post a:hover .img {
	opacity: 1;
	filter: grayscale(1);
}
*/

@media all and (max-width: 650px) {
	#wrapper {
		padding: 0 1.5rem;
	}

	header {
		padding: 3rem 0;
	}

	.post,
	.post_single {
		padding: 0 1.5rem 3rem;
	}

	.caption {
		margin-top: 1.5rem;
	}

	.quote {
		padding: 2rem;
	}

	.quote .source {
		margin-top: 1.4rem;
	}
}

@media all and (max-width: 900px) {
	.post {
		width: 100%;
	}
}

@media all and (min-width: 651px) and (max-width: 900px) {
	.post {
		width: 50%;
	}

	.post-quote {
		width: 100%;
		font-size: 250%;
	}
}

@media all and (min-width: 901px) {
	.post:nth-of-type(8n + 1) .quote blockquote {
		font-size: 250%;
	}
}

@media all and (min-width: 901px) and (max-width: 1280px) {
	.post {
		width: 33.3333%;
	}

	.post:nth-of-type(8n + 1) {
		width: 66.6666%;
	}
}

@media all and (min-width: 1281px) and (max-width: 1920px) {
	.post {
		width: 25%;
	}

	.post:nth-of-type(8n + 1) {
		width: 50%;
	}
}

/* @media all and (min-width: 1601px) and (max-width: 1920px) {
	.post {
		width: 20%;
	}

	.post:nth-of-type(8n + 1) {
		width: 40%;
	}
} */

@media all and (min-width: 1921px) {
	.post {
		width: 560px;
	}
}