pen/assets/css/pen-thumbnails.css

#main .post-thumbnail {
	position: relative;
	z-index: 100;
}
#main article .mejs-container,
#main article .gallery,
#main article .foogallery-container {
	margin: 0 0 1em;
}
body.blog #main article .gallery-item,
body.home #main article .gallery-item {
	margin: 0;
	padding: 1px;
}
body.blog #main article .gallery-item a,
body.blog #main article .gallery-item div,
body.home #main article .gallery-item a,
body.home #main article .gallery-item div {
	line-height: 0;
}
body.pen_list_masonry #pen_masonry .pen_article_wrapper article .post-thumbnail {
	display: block;
}
body.pen_list_masonry #pen_masonry .pen_article_wrapper article .post-thumbnail img {
	height: auto;
	max-width: 100%;
	width: 100%;
}
body.pen_list_masonry #pen_masonry article .post-thumbnail {
	background: #000;
	box-shadow: 0 5px 5px rgba(0,0,0,0.1) inset;
	line-height: 0;
	float: left;
	margin: 0;
	position: relative;
	overflow: hidden;
	width: 100%;
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_0 .post-thumbnail:before,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_0 .post-thumbnail:after {
	background: -ms-linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%);
	background: linear-gradient(0deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%);
	content: "";
	height: 5px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 10;
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_0 .post-thumbnail:after {
	background: -ms-linear-gradient(90deg,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(0deg,rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
	bottom: 0;
	top: auto;
}
body.pen_list_masonry.pen_list_header_hide #pen_masonry article .post-thumbnail:before,
body.pen_list_masonry #pen_masonry article.pen_list_header_hide .post-thumbnail:before,
body.pen_list_masonry.pen_list_footer_hide.pen_list_summary_hide #pen_masonry article .post-thumbnail:after,
body.pen_list_masonry #pen_masonry article.pen_list_footer_hide.pen_list_summary_hide .post-thumbnail:after {
	display: none;
}
body.pen_list_masonry #pen_masonry article .post-thumbnail img {
	margin: 0;
	height: auto;
	position: relative;
	transition: transform .5s;
	width: 100%;
	z-index: 5;
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_1 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_2 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_3 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_4 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_5 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_6 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_7 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_8 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_9 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_10 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_11 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_12 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_13 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_14 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_15 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_16 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_17 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_18 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_19 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_20 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_21 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_22 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_23 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_24 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_25 .post-thumbnail {
	background: -ms-linear-gradient(180deg,#ff8800 0%,#ffd800 50%,#ff8800 100%);
	background: linear-gradient(90deg,#ff8800 0%,#ffd800 50%,#ff8800 100%);
	padding: 0 0 8px !important;
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_1 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_1 .post-thumbnail img {
	clip-path: polygon(0 0,100% 0,100% calc(100% - 35px),50% 100%,0 calc(100% - 35px));
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_2 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_2 .post-thumbnail img {
	clip-path: polygon(0% 0%,100% 0%,100% calc(100% - 15px),60% calc(100% - 15px),50% 100%,40% calc(100% - 15px),0% calc(100% - 15px));
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_3 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_3 .post-thumbnail img {
	clip-path: polygon(0 0,100% 0,100% calc(100% - 35px),75% 100%,0 calc(100% - 35px));
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_4 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_4 .post-thumbnail img {
	clip-path: polygon(0 0,100% 0,100% calc(100% - 35px),25% 100%,0 calc(100% - 35px));
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_5 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_5 .post-thumbnail img {
	clip-path: polygon(0 0,100% 0,100% calc(100% - 25px),0% 100%);
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_6 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_6 .post-thumbnail img {
	clip-path: polygon(0 0,100% 0,100% 100%,0 calc(100% - 25px));
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_7 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_7 .post-thumbnail img {
	clip-path: polygon(0% 0%,100% 0%,100% calc(100% - 35px),50% calc(100% - 35px),50% calc(100% - 5px),25% calc(100% - 35px),0% calc(100% - 35px));
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_8 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_8 .post-thumbnail img {
	clip-path: polygon(0% 0%,100% 0%,100% calc(100% - 35px),75% calc(100% - 35px),50% 100%,50% calc(100% - 35px),0% calc(100% - 35px));
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_9 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_9 .post-thumbnail img {
	clip-path: polygon(0% 0%,100% 0%,100% calc(100% - 25px),75% calc(100% - 25px),50% 100%,25% calc(100% - 25px),0% calc(100% - 25px));
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_10 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_10 .post-thumbnail img {
	border-radius: 0 0 100% 100% / 50px;
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_11 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_11 .post-thumbnail img {
	clip-path: polygon(0% 0%,100% 0%,100% 100%,87.5% calc(100% - 10px),75% 100%,62.5% calc(100% - 10px),50% 100%,37.5% calc(100% - 10px),25% 100%,12.5% calc(100% - 10px),0 100%);
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_12 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_12 .post-thumbnail img {
	clip-path: polygon(0% 0%,100% 0%,100% calc(100% - 10px),calc(100% - 20px) 100%,calc(100% - 20px) calc(100% - 10px),calc(100% - 40px) 100%,calc(100% - 40px) calc(100% - 10px),calc(100% - 60px) 100%,calc(100% - 60px) calc(100% - 10px),calc(100% - 80px) 100%,calc(100% - 80px) calc(100% - 10px),0% 100%);
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_13 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_13 .post-thumbnail img {
	clip-path: polygon(0% 0%,100% 0%,100% 100%,calc(100% - 20px) calc(100% - 10px),calc(100% - 20px) 100%,calc(100% - 40px) calc(100% - 10px),calc(100% - 40px) 100%,calc(100% - 60px) calc(100% - 10px),calc(100% - 60px) 100%,calc(100% - 80px) calc(100% - 10px),calc(100% - 80px) 100%,0% calc(100% - 10px));
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_14 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_14 .post-thumbnail img {
	clip-path: polygon(0% 0%,100% 0%,100% 100%,75% calc(100% - 20px),0% 100%);
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_15 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_15 .post-thumbnail img {
	clip-path: polygon(0% 0%,100% 0%,100% 100%,25% calc(100% - 20px),0% 100%);
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_16 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_16 .post-thumbnail img {
	clip-path: polygon(0% 0%,100% 0%,100% 100%,calc(100% - 15px) calc(100% - 50px),calc(100% - 30px) calc(100% - 15px),calc(100% - 50px) calc(100% - 30px),calc(100% - 65px) 100%,calc(100% - 80px) calc(100% - 15px),calc(100% - 90px) 100%,0% 100%);
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_17 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_17 .post-thumbnail img {
	clip-path: polygon(0% 0%,100% 0%,100% 100%,calc(100% - 10px) 100%,calc(100% - 25px) calc(100% - 20px),calc(100% - 35px) calc(100% - 5px),calc(100% - 50px) calc(100% - 30px),calc(100% - 60px) calc(100% - 15px),calc(100% - 75px) calc(100% - 40px),0% 100%);
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_18 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_18 .post-thumbnail img {
	clip-path: polygon(0% 0%,100% 0%,100% calc(100% - 20px),calc(100% - 20px) 100%,0% 100%);
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_19 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_19 .post-thumbnail img {
	clip-path: polygon(0% 0%,calc(100% - 20px) 0%,100% 20px,100% 100%,0% 100%);
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_20 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_20 .post-thumbnail img {
	clip-path: polygon(0% 20px,20px 0%,100% 0%,100% 100%,0% 100%);
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_21 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_21 .post-thumbnail img {
	clip-path: polygon(0% calc( 100% - 20px ),0% 0%,100% 0%,100% 100%,20px 100%);
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_22 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_22 .post-thumbnail img {
	clip-path: polygon(0% 0%,100% 0%,100% 100%,75% calc(100% - 10px),70% calc(100% - 30px),25% calc(100% - 30px),20% calc(100% - 10px),0% 100%)
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_23 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_23 .post-thumbnail img {
	clip-path: polygon(0% 0%,100% 0%,100% calc(100% - 30px),75% calc(100% - 20px),70% 100%,30% 100%,25% calc(100% - 20px),0% calc(100% - 30px));
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_24 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_24 .post-thumbnail img {
	clip-path: polygon(0% 0%,100% 0%,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0% calc(100% - 20px));
}
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_25 .post-thumbnail,
body.pen_list_masonry #pen_masonry article.pen_thumbnail_style_25 .post-thumbnail img {
	clip-path: polygon(0% 0%,100% 0%,100% 100%,calc(100% - 20px) calc(100% - 20px),20px calc(100% - 20px),0% 100%);
}
body.pen_list_plain #main article .post-thumbnail {
	display: inline;
	float: right;
}
body.pen_content_thumbnail_right #main article .post-thumbnail,
body.pen_list_thumbnail_right #main article .post-thumbnail {
	display: inline;
	float: right;
	margin: 0 0 2em 1em;
}
body.pen_content_thumbnail_center #main article .post-thumbnail,
body.pen_list_thumbnail_center #main article .post-thumbnail {
	float: left;
	margin: 0 auto 1em;
	text-align: center;
	width: 100%;
}
body.pen_content_thumbnail_left #main article .post-thumbnail,
body.pen_list_thumbnail_left #main article .post-thumbnail {
	display: inline;
	float: left;
	margin: 0 2em 1em 0;
}
#main article.pen_list_thumbnail_right .post-thumbnail {
	display: inline !important;
	float: right !important;
	margin: 0 0 2em 1em !important;
}
#main article.pen_list_thumbnail_center .post-thumbnail {
	float: left !important;
	margin: 0 auto 1em !important;
	text-align: center !important;
	width: 100% !important;
}
#main article.pen_list_thumbnail_left .post-thumbnail {
	display: inline !important;
	float: left !important;
	margin: 0 2em 1em 0 !important;
}
body.page #main article .gallery-item img,
body.page #main article .post-thumbnail img,
body.single #main article .gallery-item img,
body.single #main article .post-thumbnail img,
body.pen_list_plain #main article .post-thumbnail img {
	line-height: 0;
	margin: 0;
}
body.page #main article .gallery-item img,
body.single #main article .gallery-item img,
body.pen_content_thumbnail_frame #main article .post-thumbnail img,
body.pen_list_thumbnail_frame #main article .post-thumbnail img,
#main article.pen_list_thumbnail_frame .post-thumbnail img {
	background: #fff;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	padding: 0.5em;
}
body.pen_thumbnail_frame_dark.page #main article .gallery-item img,
body.pen_thumbnail_frame_dark.single #main article .gallery-item img,
body.pen_thumbnail_frame_dark.pen_content_thumbnail_frame #main article .post-thumbnail img,
body.pen_thumbnail_frame_dark.pen_list_thumbnail_frame #main article .post-thumbnail img,
body.pen_thumbnail_frame_dark #main article.pen_list_thumbnail_frame .post-thumbnail img {
	background: #000;
	box-shadow: 0 0 5px rgba(0,0,0,0.5);
	padding: 0.5em;
}
#main article.pen_list_thumbnail_frame_not .post-thumbnail img {
	background: transparent !important;
	box-shadow: none !important;
	padding: auto !important;
}
body.pen_content_thumbnail_rotate #main article .post-thumbnail img,
body.pen_list_thumbnail_rotate #main article .post-thumbnail img,
#main article.pen_list_thumbnail_rotate .post-thumbnail img {
	margin: -2em 2em 0;
	transform: rotate(2deg);
}
body.pen_list_thumbnail_rotate #main article:nth-child(2n+2) .post-thumbnail img {
	transform: rotate(-2deg);
}
#main article.pen_list_thumbnail_rotate_not .post-thumbnail img {
	margin: auto !important;
	transform: rotate(0deg) !important;
}
body.page #main article .gallery-item:hover img,
body.single #main article .gallery-item:hover img {
	transform: rotate(2deg);
}
@media only screen and (min-width:728px) {
	body.page #main article .gallery-item img,
	body.single #main article .gallery-item img {
		transition: transform .3s;
	}
	body.pen_list_masonry.pen_thumbnail_zoom_in #pen_masonry article:hover .post-thumbnail img,
	body.pen_list_masonry.pen_thumbnail_zoom_out #pen_masonry article .post-thumbnail img {
		transform: scale(1.1,1.1);
	}
	body.pen_list_masonry.pen_thumbnail_zoom_out #pen_masonry article:hover .post-thumbnail img {
		transform: scale(1,1);
	}
}
@media only screen and (max-width:728px) {
	body.pen_list_plain #main article .post-thumbnail {
		text-align: center;
		width: 100%
	}
	body.pen_list_plain #main article .post-thumbnail img {
		margin-left: 0;
		margin-right: 0;
	}
	body.page #main article .gallery,
	body.single #main article .gallery {
		max-width: 100%;
	}
}