.clear {
	clear: both;
}

/* =========  Taxonomy  ============= */
.wonder-grid-tax-title {
	margin-bottom: 2.5em;
}
.wonder-grid-tax-title .title {
	margin-bottom: -5px;
}
.wonder-grid-tax-title .desc{
	width: 60%;
	font-size: 15px;
	color: #333;
	line-height: 1.5;
}
.wonder-grid-tax-title.text-align-center{
	text-align: center;
}
.wonder-grid-tax-title.text-align-center .desc{
	margin: auto;
}

/* ============ Grid ================ */
.wonder-grid {
	width: 100%;
	height: auto;
	overflow: hidden;
}
.wonder-grid-container {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
}
.wonder-grid-container .wg-project-item{
	position: relative;
	overflow: hidden;
	margin: 0 2% 2% 0;
	font-size: 12px;
	color: #ccc;
}

.wonder-grid-container.wg-grid-columns-2 .wg-project-item {
	width: calc(100%/2 - 2%);
}
.wonder-grid-container.wg-grid-columns-3 .wg-project-item {
	width: calc(100%/3 - 2%);
}
.wonder-grid-container.wg-grid-columns-4 .wg-project-item {
	width: calc(100%/4 - 2%);
}
.wonder-grid-container.wg-grid-columns-5 .wg-project-item {
	width: calc(100%/5 - 2%);
}

@media(max-width: 767px){
	.wonder-grid-container.wg-grid-columns-2 .wg-project-item,
	.wonder-grid-container.wg-grid-columns-3 .wg-project-item,
	.wonder-grid-container.wg-grid-columns-4 .wg-project-item,
	.wonder-grid-container.wg-grid-columns-5 .wg-project-item {
		width: 100%;
		margin-bottom: 2em;
	}
}

.wonder-grid-container .wg-project-item .project-thumbnail{
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
}
.wonder-grid-container .wg-project-item .project-thumbnail .wg_item_info {
	position: absolute;
	bottom: 15px;
	left: 15px;
	z-index: 5;
}
.wonder-grid-container .wg-project-item .project-thumbnail .wg_item_info a {
	color: #fff;
}
.wonder-grid-container .wg-project-item .project-thumbnail .wg_item_info .wg_title {
	margin-bottom: -4px;
}
.wonder-grid-container .wg-project-item .project-thumbnail .wg_item_info .wg-taxonomy {
	font-size: 12px;
	opacity: 0.8;
}
.wonder-grid-container .wg-project-item .project-thumbnail:after {
	width: 100%;
	height: 100%;
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
	opacity: 0;
}

.wonder-grid-container .wg-project-item.inside .project-thumbnail:after {
	background: linear-gradient(
				to bottom,
				rgba(0,0,0,0) 0%,
				rgba(0,0,0,0.3) 100%
			);
	opacity: 1;
}
.wonder-grid-container .wg-project-item .project-thumbnail:hover:after {
	z-index: 2;
}

.wonder-grid-container .wg-project-item figure {
	margin: 0;
	z-index: 3;
	line-height: 1;
	position: relative;
}
.wonder-grid-container .wg-project-item figure a {
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
	z-index: 4;
}
.wonder-grid-container .wg-project-item img {
	width: 100%;
	height: auto;
	transition: all 0.5s;
}
.wonder-grid-container .wg-project-item .wg_title {
	margin: 15px 0 5px;
	font-size: 16px;
	line-height: 1.2;
}
.wonder-grid-container .wg-project-item .wg_title a {
	color: #000;
}
.wonder-grid-container .wg-project-item .wg_title a:hover {
	color: #999;
}
.wonder-grid-container .wg-project-item .wg-taxonomy {
	color: #999;
	font-size: 12px;
	margin-right: 5px;
}
.wonder-grid-container .wg-project-item .wg-taxonomy.child:after {
	content: '/';
	margin: 0 0 0 5px;
	color: #ccc;
}
.wonder-grid-container .wg-project-item .wg-taxonomy:hover {
	border-bottom: 1px dashed #ccc;
}

/* Blog Container */
.wonder-grid-blog-container .wg-project-item {
	border-bottom: 1px solid #eee;
	padding: 30px 0;
	margin-bottom: 30px;
}
.wonder-grid-blog-container .project-thumbnail{
	width: 100%;
	height: auto;
	overflow: hidden;
	margin-bottom: 30px;
}
.wonder-grid-blog-container .project-thumbnail img {
	width: 100%;
	height: auto;
}
.wonder-grid-blog-container .wg_title {
	font-size: 36px;
	margin-top: 0;
	margin-bottom: 20px;
}
.wonder-grid-blog-container .wg_title a {
	color: #000;
}


/* Filter */
.wg-filter {
	width: 100%;
	height: 40px;
	margin-bottom: 1em;
}
.wg-filter ul {
	margin: 0;
	padding: 0;
}
.wg-filter ul li {
	display: block;
	float: left;
	list-style: none;
	padding: 5px 10px;
	margin-right: 10px;
	margin-bottom: 10px;
}
.wg-filter ul li:hover {
	background: #eee;
}
.wg-filter ul li:last-child {
	margin-right: 0;
}
.wg-filter ul li a {
	color: #000;
}
.wg-filter ul li.wg-filter-active {
	background: #000;
}
.wg-filter ul li.wg-filter-active a {
	color: #fff;
}

/* Pagination */
.wonder-grid-pagenavi{
	width: 100%;
	clear: both;
	margin-top: 2em;
	text-align: center;
}

.wonder-grid[data-infinite="1"] .wonder-grid-pagenavi{
	display: none;
}

.wonder-grid-pagenavi a:not(.next):not(.previous),
.wonder-grid-pagenavi span{
	display: inline-block;
	padding: 10px 20px;
	margin-right: 5px;
}
.wonder-grid-pagenavi a{
	border: 1px solid #ddd;
	color: #000;
}
.wonder-grid-pagenavi a:hover{
	border-color: #000;
	color: #fff;
	background: #000;
}
.wonder-grid-pagenavi a.next{
	padding: 14px;
}
.wonder-grid-pagenavi span.current{
	color: #999;
	border: 1px solid #eee;
}
.wonder-grid-pagenavi .prev span,
.wonder-grid-pagenavi .next span{
	padding: 0;
}

/* =========  Single Post  ============= */
.wonder-grid-tax-title,
.wonder-grid-post,
.wonder-grid-container{
	width: 1140px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.wonder-grid-post {
	margin-top: 3em;
}

.wonder-grid-post.wg-column-full .wonder-grid-text {
	width: 100%;
	border: none;
	float: none;
	padding-right: 0;
}

.wonder-grid-post.wg-column-full .wonder-grid-title {
	margin-bottom: 30px;
}

.wonder-grid-post.wg-column-full .project-thumbnail {
	width: 100%;
	margin-bottom: 30px;
}

.wonder-grid-post.wg-column-full .project-thumbnail img {
	width: 100%;
	height: auto;
}

.wonder-grid-post.wg-columns-2{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.wonder-grid-media{
	width: 60%;
	height: auto;
	position: relative;
	z-index: 9;
	background: #fff;
}

.wonder-grid-media .media-item{
	margin-bottom: 20px;
}

.wg-columns-2 .wonder-grid-media .media-item{
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}

.wonder-grid-media .wg-media iframe {
	width: 100%;
	min-height: 390px;
	height: auto;
}

.wg-column-1 .wonder-grid-media .wg-media iframe {
	min-height: 641px;
}

.wonder-grid-media img.wonder-grid-image {
	max-width: 100%;
	height:auto;
}

.wg-columns-2 .wonder-grid-content {
	width: 35%;
}

.wonder-grid-content .wonder-grid-title {
	margin: 0;
	font-size: 2em;
	font-weight: 600;
}

.wonder-grid-content .wg-meta {
	margin-top: 10px;
	color: #999;
	font-size: 14px;
}
.wonder-grid-content .wg-meta a {
	color: #333;
	margin-left: 5px;
}

.wonder-grid-info {
	margin-left: 0;
	padding-left: 0;
	margin-top: 30px;
	padding-top: 30px;
	font-size: 14px;
	color: #222;
	border-top: 1px solid #eee;
}

.wonder-grid-info li{
	padding: 3px 0;
	list-style: none;
}

.wonder-grid-info li strong{
	width: 150px;
	display: inline-block;
}

.wg-column-1 .wonder-grid-text {
	width: 55%;
	float: left;
	padding-right: 30px;
	border-right: 1px solid #eee;
}

.wg-column-1 .wonder-grid-info {
	width: 35%;
	float: right;
	border-top: 0;
	padding-left: 30px;
}

.wg-column-1 .wonder-grid-media {
	width: 100%;
	margin-top: 50px;
}

/* Slider */
.wg-slider {
	position: relative;
	padding: 0 15px;
}
.wg-column-1 .wg-slider {
	padding: 0;
}
.wg-column-1 .wg-slider .swiper-container-horizontal>.swiper-pagination-bullets,
.wg-column-1 .wg-slider .swiper-pagination-custom,
.wg-column-1 .wg-slider .swiper-pagination-fraction {
	bottom: -65px;
}
.wg-slider .swiper-pagination-bullet-active {
	background: #222;
}
.wg-slider .swiper-button-next,
.wg-slider .swiper-button-prev {
	color: #ddd;
	outline: none;
}
.wg-slider .swiper-button-prev {
	left: -30px;
}
.wg-slider .swiper-button-next {
	right: -30px;
}
.wg-slider .swiper-button-prev:after,
.wg-slider .swiper-container-rtl .swiper-button-next:after,
.wg-slider .swiper-button-next:after,
.wg-slider .swiper-container-rtl .swiper-button-prev:after{
	font-size: 25px;
}

/* =========  Post Navigation  ============= */
.wg-single-post-navi {
  background: #f8f8f8;
  height: auto;
  overflow: hidden;
  margin-top: 15em;
  margin-left: calc( -100vw / 2 + 100% / 2 );
  margin-right: calc( -100vw / 2 + 100% / 2 );
  max-width: 100vw;
}
.wg-single-post-navi .nav-box {
  width: 50%;
  height: 350px;
  overflow: hidden;
  float: left;
  background: #000;
  position: relative;
}
.wg-single-post-navi .nav-box .post-title {
  position: relative;
  z-index: 2;
  font-size: 2em;
  line-height: 1.2;
  color: #fff;
  width: 90%;
  text-align: center;
}
.wg-single-post-navi .nav-box .post-title a {
  margin: 0 30px;
}
.wg-single-post-navi .nav-box .post-thumbnail {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.wg-single-post-navi .nav-box .post-thumbnail img {
  width: 100%;
  height: auto;
  opacity: .7;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: all 0.3s;
}
.wg-single-post-navi .nav-box .post-thumbnail:hover img {
  transform: scale(1.1);
  transition: all 0.3s;
}


/* ============== Animation ============== */
/* Zoom in */
.wg-zoom-in:hover img {
	transform: scale(1.05);
	transition: all 0.5s;
}

/* Shine */
.wg-shine figure::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 5;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
.wg-shine figure:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}

@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}

/* Circle */
.wg-circle figure::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 5;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,255,255,.2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}
.wg-circle figure:hover::before {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}

/* Flashing */
.wg-flash:hover img {
	-webkit-animation: flash 1.5s;
	animation: flash 1.5s;
}
@-webkit-keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}

/* Inner Border */
.wg-inner-border figure::before {
	position: absolute;
	content: '+';
	font-size: 3em;
	width: 50px;
	height: 50px;
	top: 50%;
	left: 50%;
	color: #fff;
	opacity: 0;
	z-index: 5;
	margin: 25px 0 0 -25px;
	transition: margin-top 0.4s;
}

.wg-inner-border figure a::before {
	position: absolute;
	border: 4px solid rgba(255,255,255,.4);
	background: rgba(0,0,0,.1);
	width: 100%;
	height: 99%;
	content: '';
	top: 0;
	left: 0;
	z-index: 1;
	opacity: 0;
	transform: scale(1.2);
	transition: all 0.4s;
}

.wg-inner-border figure:hover::before {
    margin-top: -25px;
	opacity: 1;
	transition: margin-top 0.4s;
}

.wg-inner-border figure:hover a::before {
	transform: scale(0.95);
	opacity: 1;
	transition: all 0.4s;
}

/* Zoom Out */
.wg-zoom-out figure:hover img {
	transform: scale(0.95);
	transition: all 0.4s;
}

/* Brightness */
.wg-brightness figure:hover img {
	filter: brightness(1.3);
}

/* ============== Responsive ===================== */
@media(max-width: 1139px){
	.wonder-grid-tax-title,
	.wonder-grid-post,
	.wonder-grid-container{
		width: 100%;
	}

	.wonder-grid-post {
		width: 90%;
	}
}

@media(max-width: 980px){
	.wg-single-post-navi .nav-box {
		height: 250px;
	}
}

@media(max-width: 767px){
	.wonder-grid-tax-title .desc {
		width: 100%;
	}

	.wonder-grid-media,
	.wonder-grid-content{
		width: 100%;
	}
	.wonder-grid-media{
		order: 2;
	}
	.wonder-grid-content,
	.wg-columns-2 .wonder-grid-content{
		order: 1;
		margin-bottom: 5%;
		width: 100%;
	}
	.wg-column-1 .wonder-grid-info,
	.wg-column-1 .wonder-grid-text {
		width: 100%;
	}
	.wg-column-1 .wonder-grid-text {
		border-right: 0;
		padding-right: 0;
	}
	.wg-column-1 .wonder-grid-info {
		padding-left: 0;
		padding-top: 0;
	}
	.wg-single-post-navi .nav-box {
		height: 150px;
	}
	.wg-single-post-navi .nav-box .post-title {
		font-size: 1em;
	}
}

@media(max-width: 480px){
	.wonder-grid-container.columns-3 .wg-project-item{
		max-height: 300px;
	}
}