/* -------------------------------- 

Primary style

-------------------------------- */
*,
*::after,
*::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body.overflow-hidden { overflow: hidden !important; }
ul, ol { list-style: none }
a { text-decoration: none; color: #333333 }
.clear { clear: both; }
img { vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic; }
button, input, select, textarea { font-size: 100%; vertical-align: middle; outline: none; }
textarea { resize: none }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; -moz-appearance: button }
button::-moz-focus-inner,
input::-moz-focus-inner { padding: 0; border: 0 }
table { border-collapse: collapse; border-spacing: 0 }
fieldset,
a:hover { text-decoration: none; }
ul, li { list-style-type: none; }
em, i { font-style: normal; color: #FFFFFF; }
.nobg { background: none !important; }
.nobr { border-bottom: none !important; }
.ma_le { margin-left: 0 !important; }
.row_box { height: auto; width: 950px; }
.ove_hi { overflow: hidden; }
.ove_vi { overflow: visible; }
.ove_au { overflow: auto; }
.rela { position: relative; top: 0; left: 0; }
.abso { position: absolute; }
.fb { font-weight: 700; }
.ali_l { text-align: left; }
.ali_r { text-align: right; }
.ali_c { text-align: center; }
.flt_l { float: left; }
.flt_r { float: right; }

/*导航*/
a { outline: none; list-style: none; text-decoration: none; }
:focus { outline: 0; }
.nav .in { width: 1150px; margin: 0 auto; zoom: 1; height: 79px; position: relative; }
.logo { display: block; float: left; margin-top: 10px; }
.nav .rtnv { padding: 29px 0 0 0; zoom: 1; text-align: right; float: right; width: 633px; }
.nav .rtnv li { float: left }
.nav .rtnv a { font: 16px/21px "Microsoft Yahei"; color: #D1AD5F; padding: 0 23px 10px 23px; position: relative; }
.nav .rtnv a:hover,
.nav .rtnv .active a { color: #FFFFFF }
.template-content { width: 100%; padding: 50px 0 10px 0; }
.tem-title { color: #D1AD5F; display: inline-block; height: 79px; line-height: 78px; font-size: 20px; padding-left: 20px; }
.tem-title:before { content: ""; display: inline-block; background: #D1AD5F; width: 1px; height: 45px; vertical-align: middle; margin-right: 20px; }

/*内容布局*/
#info { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #FCF8E3; border: 1px solid #FBEED5; width: 95%; max-width: 900px; margin: 0 auto 40px auto; font-size: 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
#info .info-wrapper { padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
#info a { color: #C09853; text-decoration: none; }
#info p { margin: 5px 0 0 0; }
.template .container { position: relative; margin-left: auto; margin-right: auto; padding-top: 18px; padding-bottom: 1%; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; }
#filters { margin: 0 1% 15px; padding: 0; list-style: none; }
#filters li { float: left; }
#filters li span { display: block; padding: 10px 15px; text-decoration: none; color: #666666; cursor: pointer; }
#filters li span.active { background: #CDB993; color: #FFFFFF; }
.portfoliolist { overflow: hidden; }
.portfoliolist .portfolio { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 31.2%; margin: 1%; padding-bottom: 4.4%; display: none; float: left;    /*overflow:hidden;*/ position: relative; margin-bottom: 45px !important; animation-duration: 1s; }
.portfoliolist .portfolio:after { content: ""; display: block; position: absolute; bottom: 0; width: 100.1%; background-image: url(../img/abg-d.png); background-position: top center; background-repeat: no-repeat; background-size: 106.3%; height: 50px; }
.portfolio-wrapper { overflow: hidden; position: relative !important; background: #666666; cursor: pointer; }
.portfolio .bg-img { background-repeat: no-repeat; height: 100%; width: 100%; position: relative; display: block; background-size: 100%; }
.portfolio img { height: 100%; width: 100%; position: relative; }
.portfolio .label { position: absolute; width: 100%; height: 40px; bottom: -40px; }
.portfolio .label-bg { background: #E95A44; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.portfolio .label-text { color: #FFFFFF; position: relative; z-index: 500; padding: 5px 8px; }
.portfolio .text-category { display: block; font-size: 9px; }

/* #Tablet (Portrait) */
@media only screen and (min-width:768px) and (max-width:959px) {
    .container { width: 768px; }
}

/*  #Mobile (Portrait) - Note: Design for a width of 320px */

/* #Mobile (Landscape) - Note: Design for a width of 480px */
@media only screen and (min-width:480px) and (max-width:767px) {
    .container { width: 70%; }
    #ads { display: none; }
}

/* #Clearing */

/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix:before,
.clearfix:after,
.row:before,
.row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.row:after,
.clearfix:after { clear: both; }
.row,
.clearfix { zoom: 1; }
.clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.cd-section { padding: 0; text-align: center; }
.cd-section p { margin: 2em 0; line-height: 1.6; color: #FFFFFF; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media only screen and (min-width:768px) {
    .cd-section { padding: 0; }
    .cd-section p { font-size: 1.8rem; line-height: 2; }
}
@media only screen and (min-width:1170px) {
    .cd-section { padding: 0; }
}
.cd-modal { position: fixed; top: 0; left: 0; z-index: 2; width: 100%; height: 100%; visibility: hidden; opacity: 0; pointer-events: none; -webkit-transition: visibility 0s 0.3s, opacity 0.3s 0s, z-index 0s 0.3s; -moz-transition: visibility 0s 0.3s, opacity 0.3s 0s, z-index 0s 0.3s; transition: visibility 0s 0.3s, opacity 0.3s 0s, z-index 0s 0.3s; }
.cd-modal::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 60px; pointer-events: none; background: transparent; background: -webkit-linear-gradient(bottom, #212121, rgba(52, 56, 60, 0)); background: linear-gradient(to top, #212121, rgba(52, 56, 60, 0)); }
.cd-modal .cd-modal-content { height: 100%; width: 100%; padding: 3em 5%; text-align: left; overflow-y: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.cd-modal p { color: #FFFFFF; line-height: 1.6; margin: 2em 0; }
.modal-is-visible .cd-modal { z-index: 1; visibility: visible; opacity: 1; pointer-events: auto; -webkit-transition: visibility 0s 0s, opacity 0.3s 0s, z-index 0s 0s; -moz-transition: visibility 0s 0s, opacity 0.3s 0s, z-index 0s 0s; transition: visibility 0s 0s, opacity 0.3s 0s, z-index 0s 0s; }
.modal-is-visible .cd-modal .cd-modal-content { -webkit-overflow-scrolling: touch; }
.cd-modal-action { position: relative; padding: 23% 0; z-index: 7; border-top-left-radius: 10px; border-top-right-radius: 10px; background-color: rgba(0, 0, 0, 0); -webkit-transition: background-color 0.2s 0s; -moz-transition: background-color 0.2s 0s; transition: background-color 0.2s 0s; }
@media only screen and (max-width:1150px) {
    .container { position: relative; width: 100%; }
    .nav .in { width: 100%; }
}
@media only screen and (max-width:960px) {
    .cd-modal-action { padding: 23% 0; }
}
@media only screen and (max-width:768px) {
    .container { width: 100%; }
    .portfoliolist .portfolio { width: 48%; margin: 1%; padding-bottom: 6.9%; }
    .portfoliolist .portfolio:after { background-size: 106.9%; }
    #ads { display: none; }
    .cd-modal-action .btn { height: 3.5em !important; line-height: 3.5em !important; }
    .pswp__caption { width: 100% !important; }
}
@media only screen and (max-width:590px) {
    .portfoliolist .portfolio { width: 48%; margin: 1%; padding-bottom: 8.8%; }
    .cd-modal-action .btn { height: 3em !important; line-height: 3em !important; }
}
@media only screen and (max-width:490px) {
    .portfoliolist .portfolio { width: 48%; margin: 1%; padding-bottom: 11.2%; }
    .cd-modal-action .btn { height: 2.6em !important; line-height: 2.6em !important; }
}
@media only screen and (max-width:452px) {
    .portfoliolist .portfolio { width: 98%; margin: 1%; padding-bottom: 12.7% !important; }
    .cd-modal-action { padding: 25.3% 0; }
    .portfoliolist .portfolio:after { background-size: 106.9%; }
}
@media only screen and (max-width:414px) {
    .cd-modal-action { padding: 24.8% 0 !important; }
    .portfoliolist .portfolio { padding-bottom: 13.2% !important; }
    .portfoliolist .portfolio:after { width: 100.1%; }
    .cd-modal-action .btn { height: 2.7em !important; line-height: 2.7em !important; }
}
@media only screen and (min-width:1170px) {
    .cd-modal .cd-modal-content { padding: 6em 20%; }
    .cd-modal p { font-size: 2rem; line-height: 2; }
}
@media only screen and (min-width:768px) {
    /*.cd-modal .cd-modal-content { padding: 4em 10%; }*/
    .cd-modal-close { top: 70px; }
}
.cd-modal-action .btn,
.cd-modal-action .cd-modal-bg { display: inline-block; height: 3.5em; background-color: rgba(35, 35, 35, 0.96); }
.cd-modal-action .btn { background-color: #CDB993; }
.cd-modal-action .btn { width: 4em; border-radius: 0; color: #FFFFFF; padding: 0 !important; line-height: 3.5em; white-space: nowrap; font-weight: 700; opacity: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: opacity .3s 0s, color 0.2s 0.3s, width 0.3s 0s; -moz-transition: opacity .3s 0s, color 0.2s 0.3s, width 0.3s 0s; transition: opacity .3s 0s, color 0.2s 0.3s, width 0.3s 0s; }
.cd-section { background-position: top center; background-size: 100%; border-color: rgb(220, 220, 220); -webkit-transition: all 0.3s 0s; -moz-transition: all 0.3s 0s; transition: 0.3s 0s; }
.portfolio .bg-diy { position: absolute; z-index: 1; top: 0; background-color: #000000; padding: 15px; width: 100%; height: 81.6%; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.portfolio .bg-diy:before { content: ""; width: 100%; height: 100%; background-image: url(../img/abg-t.png); background-repeat: no-repeat; background-position: top right; position: absolute; top: 0; right: 0; z-index: 1; }
.portfolio .bg-img { -webkit-transition: transform 0.3s 0s; -moz-transition: transform 0.3s 0s; transition: transform 0.3s 0s; }
.portfoliolist .portfolio:hover .bg-img { -webkit-transform: scale(1.08, 1.14); -moz-transform: scale(1.08, 1.14); transform: scale(1.08, 1.14); border-top-left-radius: 5px; border-top-right-radius: 5px; }
.portfolio:hover .cd-section > .cd-modal-action { background-color: rgba(0, 0, 0, .8); }
.portfolio:hover .cd-section > .cd-modal-action > .btn { opacity: 1; width: 8.5em; }
.cd-section > .cd-modal-action > .btn.to-circle { opacity: 1; width: 8.5em; }
.cd-modal-action .btn.to-circle { width: 0 !important; color: transparent; padding: 0; border: 0; -webkit-transition: color 0.2s 0s, width 0.5s 0.2s; -moz-transition: color 0.2s 0s, width 0.5s 0.2s; transition: color 0.2s 0s, width 0.5s 0.2s; }
.cd-modal-action .cd-modal-bg { position: absolute; z-index: 1; left: 50%; width: 3.5em; border-radius: 0; opacity: 0; visibility: hidden; transform: translateZ(0) translateX(-2em); -webkit-transition: visibility 0s 0.5s; -moz-transition: visibility 0s 0.5s; transition: visibility 0s 0.5s; }
.cd-modal-action .cd-modal-bg.is-visible.velocity-animating { width: 3em; height: 2em; }
.cd-modal-action .cd-modal-bg.is-visible { opacity: 1; visibility: visible; width: 100%; height: 100%; }
.cd-modal-close { position: fixed; z-index: 1; top: 8%; right: 5%; height: 50px; width: 50px; border-radius: 50%; background: rgba(0, 0, 0, 0.3) url(../img/cd-icon-close.svg) no-repeat center center;    /* image replacement */ overflow: hidden; text-indent: 100%; white-space: nowrap; visibility: hidden; opacity: 0; transform: translateZ(0) scale(0); -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s; -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s; transition: transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s; }
.no-touch .cd-modal-close:hover { background-color: rgba(0, 0, 0, 0.5); }
.modal-is-visible .cd-modal-close { visibility: visible; opacity: 1; -webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s; -moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s; transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
.tem-title-b { width: 100%; position: absolute; text-align: center; bottom: -7%; }
.tem-title-b .tem-t-r { }
.tem-title-b .tem-t-r i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-left: 4px; }

/*图片查看皮肤*/
.demo-gallery a { display: inline-block; position: relative; }
.demo-gallery a:after { content: "Click to Enlarge"; border-radius: 10px; display: block; opacity: 0; text-align: center; background: rgba(0, 0, 0, .5); color: #FFFFFF; line-height: 26px; padding: 10px 20px; position: fixed; top: calc(40% - 13px); left: calc(50% - 50px); -webkit-transition: opacity 0.3s 0s; -moz-transition: opacity 0.3s 0s; transition: opacity 0.3s 0s; }
.demo-gallery a:hover:after { opacity: 1; }
.subpage { padding: 10px 5px; }
.pswp__button { width: 44px; height: 44px; position: relative; background: none; cursor: pointer; overflow: visible; -webkit-appearance: none; display: block; border: 0; padding: 0; margin: 0; float: right; opacity: 0.75; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; -webkit-box-shadow: none; box-shadow: none; }
.pswp__button:focus,
.pswp__button:hover { opacity: 1; }
.pswp__button:active { outline: none; opacity: 0.9; }
.pswp__button::-moz-focus-inner { padding: 0; border: 0; }
.pswp__ui--over-close .pswp__button--close { opacity: 1; }
.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before { background: url(../img/default-skin.png) 0 0 no-repeat; background-size: 264px 88px; width: 44px; height: 44px; }
@media (-webkit-min-device-pixel-ratio:1.1), (-webkit-min-device-pixel-ratio:1.09375), (min-resolution:105dpi), (min-resolution:1.1dppx) {
    .pswp--svg .pswp__button,
    .pswp--svg .pswp__button--arrow--left:before,
    .pswp--svg .pswp__button--arrow--right:before { background-image: url(../img/default-skin.svg); }
    .pswp--svg .pswp__button--arrow--left,
    .pswp--svg .pswp__button--arrow--right { background: none; }
}
.pswp__button--close { background-position: 0 -44px; }
.pswp__button--share { background-position: -44px -44px; }
.pswp__button--fs { display: none; }
.pswp--supports-fs .pswp__button--fs { display: block; }
.pswp--fs .pswp__button--fs { background-position: -44px 0; }
.pswp__button--zoom { display: none; background-position: -88px 0; }
.pswp--zoom-allowed .pswp__button--zoom { display: block; }
.pswp--zoomed-in .pswp__button--zoom { background-position: -132px 0; }
.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right { visibility: hidden; }
.pswp__button--arrow--left,
.pswp__button--arrow--right { background: none; top: 50%; margin-top: -50px; width: 70px; height: 100px; position: absolute; }
.pswp__button--arrow--left { left: 0; }
.pswp__button--arrow--right { right: 0; }
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before { content: ''; top: 35px; background-color: rgba(0, 0, 0, 0.3); height: 30px; width: 32px; position: absolute; }
.pswp__button--arrow--left:before { left: 6px; background-position: -138px -44px; }
.pswp__button--arrow--right:before { right: 6px; background-position: -94px -44px; }
.pswp__counter,
.pswp__share-modal { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.pswp__share-modal { display: block; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; top: 0; left: 0; padding: 10px; position: absolute; z-index: 1600; opacity: 0; -webkit-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; -webkit-backface-visibility: hidden; will-change: opacity; }
.pswp__share-modal--hidden { display: none; }
.pswp__share-tooltip { z-index: 1620; position: absolute; background: #FFFFFF; top: 56px; border-radius: 2px; display: block; width: auto; right: 44px; -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25); -webkit-transform: translateY(6px); -ms-transform: translateY(6px); transform: translateY(6px); -webkit-transition: -webkit-transform 0.25s; transition: transform 0.25s; -webkit-backface-visibility: hidden; will-change: transform; }
.pswp__share-tooltip a { display: block; padding: 8px 12px; color: #000000; text-decoration: none; font-size: 14px; line-height: 18px; }
.pswp__share-tooltip a:hover { text-decoration: none; color: #000000; }
.pswp__share-tooltip a:first-child {    /* round corners on the first/last list item */
border-radius: 2px 2px 0 0; }
.pswp__share-tooltip a:last-child { border-radius: 0 0 2px 2px; }
.pswp__share-modal--fade-in { opacity: 1; }
.pswp__share-modal--fade-in .pswp__share-tooltip { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }

/* increase size of share links on touch devices */
.pswp--touch .pswp__share-tooltip a { padding: 16px 12px; }
a.pswp__share--facebook:before { content: ''; display: block; width: 0; height: 0; position: absolute; top: -12px; right: 15px; border: 6px solid transparent; border-bottom-color: #FFFFFF; pointer-events: none; }
a.pswp__share--facebook:hover { background: #3E5C9A; color: #FFFFFF; }
a.pswp__share--facebook:hover:before { border-bottom-color: #3E5C9A; }
a.pswp__share--twitter:hover { background: #55ACEE; color: #FFFFFF; }
a.pswp__share--pinterest:hover { background: #CCCCCC; color: #CE272D; }
a.pswp__share--download:hover { background: #DDDDDD; }

/* 3. Index indicator ("1 of X" counter) */
.pswp__counter { position: absolute; left: 0; top: 0; height: 44px; font-size: 13px; line-height: 44px; color: #FFFFFF; opacity: 0.75; padding: 0 10px; }

/* 4. Caption */
.pswp__caption { position: absolute; left: 0; bottom: 0; z-index: 10; width: calc(100% - 18px); min-height: 44px; }
.pswp__caption small { font-size: 11px; color: #BBBBBB; }
.pswp__caption__center { text-align: left; width: 76%; margin: 20px auto 0px auto; font-size: 13px; padding: 10px 10px 40px 10px; line-height: 20px; color: #CCCCCC; }
.pswp__caption__center .pswp-title { font-size: 34px; line-height: 50px; height: 50px; display: block; vertical-align: middle; margin-bottom: 10px; }
.pswp__caption__center .pswp-text { display: block; font-size: 14px; }
.pswp__caption__center .pswp-text b { font-weight: 600; }
.pswp__caption--empty { display: none; }

/* Fake caption element, used to calculate height of next/prev image */
.pswp__caption--fake { visibility: hidden; }

/*
    5. Loading indicator (preloader)
    You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
 */
.pswp__preloader { width: 44px; height: 44px; position: absolute; top: 0; left: 50%; margin-left: -22px; opacity: 0; -webkit-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; will-change: opacity; direction: ltr; }
.pswp__preloader__icn { width: 20px; height: 20px; margin: 12px; }
.pswp__preloader--active { opacity: 1; }
.pswp--css_animation .pswp__preloader--active { opacity: 1; }
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn { -webkit-animation: clockwise 500ms linear infinite; animation: clockwise 500ms linear infinite; }
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut { -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }
.pswp--css_animation .pswp__preloader__icn { background: none; opacity: 0.75; width: 14px; height: 14px; position: absolute; left: 15px; top: 15px; margin: 0; }
.pswp--css_animation .pswp__preloader__cut {    /*
                  The idea of animating inner circle is based on Polymer ("material") loading indicator
                   by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
              */
position: relative; width: 7px; height: 14px; overflow: hidden; }
.pswp--css_animation .pswp__preloader__donut { -webkit-box-sizing: border-box; box-sizing: border-box; width: 14px; height: 14px; border: 2px solid #FFFFFF; border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; position: absolute; top: 0; left: 0; background: none; margin: 0; }
@media screen and (max-width:1024px) {
    .pswp__preloader { position: relative; left: auto; top: auto; margin: 0; float: right; }
}
@-webkit-keyframes clockwise {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes clockwise {
    0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes donut-rotate {
    0% { -webkit-transform: rotate(0); transform: rotate(0); }
    50% { -webkit-transform: rotate(-140deg); transform: rotate(-140deg); }
    100% { -webkit-transform: rotate(0); transform: rotate(0); }
}
@keyframes donut-rotate {
    0% { -webkit-transform: rotate(0); transform: rotate(0); }
    50% { -webkit-transform: rotate(-140deg); transform: rotate(-140deg); }
    100% { -webkit-transform: rotate(0); transform: rotate(0); }
}

/* 6. Additional styles */

/* root element of UI */
.pswp__ui { -webkit-font-smoothing: initial; visibility: visible; opacity: 1; z-index: 1550; }

/* top black bar with buttons and "1 of X" indicator */
.pswp__top-bar { position: absolute; left: 0; top: 0; height: 44px; width: 100%; }
.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right { -webkit-backface-visibility: hidden; will-change: opacity; -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right { visibility: visible; }
.pswp__top-bar,
.pswp__caption { background-color: rgba(0, 0, 0, 0.8); }

/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption { background-color: rgba(0, 0, 0, 0.3); }

/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
.pswp__ui--idle .pswp__top-bar { opacity: 0; }
.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right { opacity: 0; }

/*
    pswp__ui--hidden class is added when controls are hidden
    e.g. when user taps to toggle visibility of controls
*/
.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {    /* Force paint & create composition layer for controls. */ opacity: 0.001; }

/* pswp__ui--one-slide class is added when there is just one item in gallery */
.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter { display: none; }
.pswp__element--disabled { display: none !important; }
.pswp--minimal--dark .pswp__top-bar { background: none; }
.template .template-block-04 { background: none !important; }
.template .template-block-05 .block05-button { z-index: 0 !important; }
.header-bg { z-index: 9 !important; }
.template-phone .template-block-04 { padding-bottom: 0 !important; }
.portfoliolist.p-show .portfolio { display: inline-block; opacity: 1; }
.serv-t-c { padding: 30px 0 30px 0; }
body.cases .template-content .pageList { width: 100%; padding: 50px 0; text-align: center; line-height: 30px; }
body.cases .template-content .pageList ul { display: inline-block; margin: 0 0 10px; text-align: center; vertical-align: top; }
body.cases .template-content .pageList ul li { display: inline-block; }
body.cases .template-content .pageList ul li a { display: inline-block; line-height: 20px; padding: 0 12px; color: #aaa; font-size: 18px; }
body.cases .template-content .pageList ul li a:hover { color: #da110e; }
body.cases .template-content .pageList ul li.active a { color: #da110e; }
body.cases .template-content .pageList ul li a:after { content: ""; display: inline-block; width: 0; height: 1px; margin: 10px 0 0 10px; background: #898989; vertical-align: top; transition: width .3s; }
body.cases .template-content .pageList ul li.active a:after { width: 80px; }
body.cases .template-content .pageList .toggle-button { display: inline-block; height: 30px; margin: 0 0 10px; padding: 2px 0 0; vertical-align: top; }
body.cases .template-content .pageList .toggle-button a { display: inline-block; width: 11px; height: 21px; margin: 0 15px; }
body.cases .template-content .pageList .toggle-button a.btn-prev { background: url("../img/btn-prev.png") no-repeat center; }
body.cases .template-content .pageList .toggle-button a.btn-next { background: url("../img/btn-next.png") no-repeat center; }
@media only screen and (max-width:620px) {
    body.cases .template-content .pageList ul { width: 100%; }
    body.cases .template-content .pageList span { display: none; }
}