*, *:before, *:after {
  box-sizing: border-box;
}
div#ztop-templatewrap {
    min-height: 450px;
}
.zwrapper {
    min-height: 100vh;
}
.zwrapper, div#header {
  background: #f3f3f3;
}

.zheader-section {
  width: 100%;
  display: inline-block;
  margin: 70px auto;
min-height:450px;
}

.zflex-wrap {
  flex-wrap: wrap;
  display: flex;
}

.fadeinup {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transform: translate3d(0px, 100px, 0);
  transform: translate3d(0px, 100px, 0);
  -webkit-transition: opacity 0.75s ease-in, -webkit-transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: opacity 0.75s ease-in, -webkit-transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: opacity 0.75s ease-in, transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: opacity 0.75s ease-in, transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: opacity 0.75s ease-in, transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1), -webkit-transform 0.75s cubic-bezier(0.39, 0.575, 0.565, 1);
}

.zin-view.fadeinup {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-transform: translate3d(0px, 0px, 0);
  transform: translate3d(0px, 0px, 0);
}

.zheader-section .zflex-wrap>div {
  width: 50%;
}

.zheader-section h1 span {
  display: block;
  font-family: 'gilroybold';
}
.zheader-section h1 span:last-child {
  margin-top: 8px;
}
.zheader-section h1 span:first-child {
  font-size: 30px;
  font-family: proxima_nova_rgregular;
}

.zheader-section h1 {
  font-size: 50px;
  padding: 0 50px;
}

.zheader-section .zflex-wrap {
  align-items: center;
}

.ztemplate-item {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  width: calc(100%/3);
}

.ztemplate-item-large {
  width: 50%;
}

div#ztop-templatewrap .ztemplate-item-large {
  width: 100%;
}

.ztemplate-item>div {
  margin: 20px 20px;
  transition: 1s ease;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow .3s ease-in-out;
  box-shadow: -1px 6px 28px rgba(214, 212, 212, 0.24)
}
.ztemplate-item-img span {
  display: none;
}

.ztemplate-item-img span.singlepage {
  display: block;
    position: absolute;
    top: 30px;
    background: #6a7ae3;
    z-index: 999;
    right: 0;
    font-size: 14px;
    padding: 6px 12px;
    color: #fff;
}
.ztemplate-item>div:hover {
  box-shadow:0 16px 32px -16px rgba(0, 0, 0, 0.15);
}

.ztemplate-item>div:hover .ztemplate-item-view {
  
  display: block;
  position: absolute;
  width: auto;
  margin: auto;
  left: 20px;
  right: 20px;
  top: 12px;
  bottom: 0;
}

.ztemplate-item>div:hover .ztemplate-item-detail h4 {
  display: none;
}

.ztemplate-item>div:hover .ztemplate-item-detail {
}

.ztemplate-item-view a {
  display: inline-block;
  font-size: 14px;
  font-family: proxima_novasemibold;
  text-transform: uppercase;
}

.ztemplate-item-view>div {
  width: 49%;
  display: inline-block;
}

.ztemplate-item-view>div:last-child {
  text-align: right;
  padding-left: 20px;
  padding-right: 0;
  float: right;
}

.ztemplate-item-img {
  position: relative;
  height: 360px;
  overflow: hidden;
  margin: 0;
}

.ztemplate-item-img a:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 25%;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(237, 237, 237, 0) 0%, rgba(0, 0, 0, 0.03) 100%);
}
.ztemplate-item-img > a {
  position: relative;
  z-index: 9;
  display: inline-block;
  height:100%;
  cursor: pointer;
}
.ztemplate-item-view {
  display: none;
}

.ztemplate-item-detail h4 {
  font-size: 16px;
  margin-bottom: 0;
  line-height: 1;
}

.ztemplate-item-img img {
  position: relative;
  transition: all 6s;
  -webkit-transition: all 6s;
  -moz-transition: all 6s;
  -ms-transition: all 6s;
  -o-transition: all 6s;
}

.ztemplate-item-detail {
  padding: 18px 20px 18px 20px;
  height: 52px;
  position: relative;
}

.ztemplate-section {
  margin-bottom: 100px;
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: 100%;
}

.more-box {
  display: none !important;
  text-align: center;
  margin-top: 100px;
}

.visible-count, .total-count {
  font-family: proxima_novasemibold;
}

@media only screen and (max-width:1279px) {
  div#ztop-templatewrap .ztemplate-item-large {
    max-width: 600px;
  }
  .zheader-section .zflex-wrap>div {
    width: 100%;
    text-align: center
  }
  .zheader-section h1 {
    font-size: 36px;
    padding: 0 50px;
    margin-bottom: 30px;
  }
  .zheader-section h1 span:last-child {
    max-width: 520px;
    margin: 10px auto;
    font-size: 54px;
  }
  .ztemplate-item-view {
    position: absolute;
    right: 20px;
    top: 11px;
    display: block;
  }
  .ztemplate-item-detail {
    position: relative;
  }
  .ztemplate-item-view>div:first-child {
    display: none;
  }
  .ztemplate-item-view>div:last-child {
    text-align: right;
    padding-left: 20px;
    padding-right: 0;
  
  }
  .ztemplate-item-view>div {
    width: 100%;
  }
  .ztemplate-item-view a {
    font-size: 13px;
  }
  .ztemplate-item-detail h4 {
    text-align: left
  }
  .ztemplate-item>div:hover .ztemplate-item-detail h4 {
    display: block;
  }
  .ztemplate-item>div:hover .ztemplate-item-detail {
    padding: 16px 20px;
  }
 
}

@media only screen and (max-width:991px) {
  .ztemplate-item {
    width: calc(100% / 2)
  }
  .zheader-section h1 span:last-child {
    font-size: 50px;
  }
}

@media only screen and (max-width:600px) {
  .ztemplate-item {
    width: 100%;
  }
  .zheader-section h1 span:last-child {
    font-size: 40px;
  }
  .zheader-section {
    margin-bottom: 0;
  }
  .zheader-section{
    margin-top: 50px;
  }
  .zheader-section h1 span:first-child,
  .zheader-section h1 span:last-child{
    font-size: 28px;
    text-align: left;
    font-family: 'gilroybold';
    display: inline;
  }
  .zheader-section h1{
    padding: 0 20px;
  }
}