@charset "utf-8";

/*=====  AREA : POST  ===============*/

.post {
	width:500px;
	height:496px;
	padding-top:20px;
	position: relative;
	float:left;
	overflow:hidden;
	text-align:center;
}
/*====================*/
.post figure {
	width:100%;
	max-width:472px;
	height:auto;
	max-height:358px;
	margin:0 10px;
	border:1px solid #006666;
	padding:3px;
	position:relative;
	overflow:hidden;
	background-color:#FFF;
	z-index:11;
}
.post figure img {
	display:block;
	width:100%;
	max-width:472px;
	height:auto;
	position:relative;
	z-index:12;
	opacity:1;
	filter:alpha(opacity=100);
	-moz-transition:opacity 0.2s linear;
	-webkit-transition:opacity 0.2s linear;
	-o-transition:opacity 0.2s linear;
	transition:opacity 0.2s linear;
}
.post figure figcaption {
	width:auto;
	max-width:462px;
	height:45px;
	border:1px solid #FFF;
	padding:6px;
	position:absolute;
	left:8px;
	right:8px;
	bottom:0;
	z-index:13;
	opacity:0;
	filter:alpha(opacity=0);
	background-color:#FFF;
	background-color:rgba(255,255,255,0.9);
	box-shadow:0 0 5px rgba(0,0,0,0.6);
	-moz-transition-property: bottom, opacity;
	-webkit-transition-property: bottom, opacity;
	-o-transition-property: bottom, opacity;
	transition-property: bottom, opacity;
	-moz-transition-duration: 0.2s;
	-webkit-transition-duration: 0.2s;
	-o-transition-duration: 0.2s;
	transition-duration: 0.2s;
}
.post figure:hover figcaption {
	bottom:8px;
	opacity:1;
	filter:alpha(opacity=100);
}
.post figure p {
	margin:0;
	font-weight:600;
	color:#333;
}
/*====================*/
.post .details {
	width:100%;
	height:130px;
	position:relative;
	left:0;
	bottom:0;
	z-index:14;
	font-size:.9em;
}
.post .details > section {
	width:100%;
	/*height:380px;*/
	position:absolute;
	left:0;
	top:-10px;
	-moz-transition: top 0.5s linear;
	-webkit-transition: top 0.5s linear;
	-o-transition: top 0.5s linear;
	transition: top 0.5s linear;
}
.post .details > section > * { background-color:#FFF; }
.post .details > section .collapse {
	display:block;
	content:'';
	width:45px;
	height:45px;
	position:absolute;
	left:50%;
	margin-left:-23px;
	top:-13px;
	overflow:hidden;
	text-indent:-9999em;
	background:transparent url(../images/collapse-details.png) no-repeat center top;
	outline:none;
	opacity:0;
	filter:alpha(opacity=0);
	-moz-transition:opacity 0.2s linear;
	-webkit-transition:opacity 0.2s linear;
	-o-transition:opacity 0.2s linear;
	transition:opacity 0.2s linear;
}
.post .details > section .shadow {
	content:'';
	height:10px;
	opacity:0;
	filter:alpha(opacity=0);
	background:transparent url(../images/shadow.png) no-repeat center top;
	-moz-transition: opacity 0.2s linear;
	-webkit-transition: opacity 0.2s linear;
	-o-transition: opacity 0.2s linear;
	transition: opacity 0.2s linear;
}
/*====================*/
.post .details header {
	height:90px;
	padding:20px;
}
.post .details header * { margin:0; }
.post .details header hgroup {
  display: flex;
  flex-direction: column-reverse;
  padding-bottom:7px;
  font-weight: 700;
}
.post .details header h2 {
  color:#006666;
  font-size:2em;
}
.post .details header h3 { font-size:1.2em; }
.post .details header a.expand:link, .post .details header a.expand:visited {
	font-weight:600;
	text-decoration:none;
	color:#757575 !important;
}
.post .details header a.expand:hover {
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	color:#FFF !important;
	background-color:#006666;
}
/*====================*/
.post .details article h3 {
	margin-bottom:0;
	font-weight:400;
	font-style:italic;
	font-size:1.1em;
}
.post .details article h3:first-child {
	margin-top:0;
	font-size:1.3em;
}
.post .details article p { text-align:left; }
.post .details article h3:not(:first-child) + p {
	margin-top:0;
	text-align:center;
}
.post .details a[target="_blank"] { word-wrap:break-word; }


/*====================*/

.post.active > figure img { opacity:0.7; filter:alpha(opacity=70); }
.post.active .details > section { top:-260px; }
.post.active .details > section .collapse,
.post.active .details > section .shadow { opacity:1; filter:alpha(opacity=100); }
.post.active .details > section .collapse:hover { background-position:center bottom; }
.post.active .details header {
	height:auto;
	padding-bottom:0;
}
.post.active .details header p { display:none; }


/*====================*/

.post.long { height:518px; }
.post.long .details { height:160px; }
.post.long .details header { height:120px; }
.post.long.active .details > section { top:-290px; }


/*=====  MEDIA QUERIES  ===============*/

@media all and (min-width: 1824px) {
	.post:nth-of-type(3n+1) { clear:left; }
}
@media all and (min-width: 1324px) and (max-width: 1823px), print {
	.post:nth-of-type(odd) { clear:left; }
}
@media all and (max-width: 500px), print {
	.post { width:100%; height:auto !important; }
	.post figure { width:95%; margin:0 auto; }
	.post figcaption { display:none; }
	.post .details {
		width:90%;
		height:auto !important;
		margin:0 auto;
		bottom:initial;
	}
	.post .details > section {
		height:auto;
		position:relative;
	}
	.post .details header {
		height:auto;
		padding-bottom:0;
	}
	.post .details header p { display:none; }
	/*====================*/
	.post.active > figure img { opacity:1; filter:alpha(opacity=100); }
	.post.active .details > section {
		top:-10px;
		-webkit-transition:none;
		-moz-transition:none;
		-o-transition:none;
		transition:none;
	}
	.post.active .details > section .collapse,
	.post.active .details > section .shadow { visibility:hidden; }
}
@media print {
	.post { width:50%; }
}


/*=====  END OF CODE  ===============*/