div.portfolio-site-thumbnail .content-area .single-item .image-section:after, div.portfolio-site-thumbnail .content-area .single-item .image-section img { 
    transition: all ease-in-out .2s;
}
div.portfolio-site-thumbnail .content-area .single-item .image-section:before {
    content: "";
    background: url('data:image/svg+xml,<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.90345 2.86212L9.92072 1.13621L1.86421 1.04199H1.85557C1.62539 1.04782 1.40669 1.14376 1.24651 1.30917C1.08633 1.47458 0.997474 1.69625 0.999044 1.9265L1.08034 9.98623L2.7934 9.97059L2.7333 4.01251L9.81437 11.0939L11.0257 9.8828L3.94465 2.80216L9.90345 2.86212Z" fill="white" stroke="white" stroke-width="0.7"/><path d="M33.2069 26.1642L33.267 32.1231L26.186 25.042L24.9746 26.2533L32.0557 33.3344L26.0968 33.2742L26.0795 35.0001L34.1361 35.0944H34.1448C34.3749 35.0885 34.5936 34.9926 34.7538 34.8272C34.914 34.6618 35.0028 34.4401 35.0013 34.2099L34.92 26.1501L33.2069 26.1642Z" fill="white" stroke="white" stroke-width="0.7"/><path d="M34.136 1.06645L26.0795 1.14768L26.0968 2.86073L32.0557 2.80056L24.9746 9.88163L26.186 11.093L33.267 4.01191L33.2069 9.97078L34.92 9.98806L35.0013 1.93154C35.0024 1.81762 34.9808 1.70461 34.9378 1.59914C34.8947 1.49366 34.831 1.39784 34.7505 1.31728C34.6699 1.23672 34.5741 1.17304 34.4686 1.12997C34.3631 1.0869 34.2501 1.0653 34.1362 1.06645H34.136Z" fill="white" stroke="white" stroke-width="0.7"/><path d="M9.81426 25.042L2.73319 32.1231L2.79329 26.1642L1.08023 26.1469L0.999072 34.2034C0.996631 34.4374 1.08679 34.6629 1.24989 34.8306C1.40923 34.9948 1.62682 35.0895 1.85553 35.0944H1.86417L9.92068 35.0001L9.90341 33.2807L3.94453 33.3378L11.0256 26.2551L9.81426 25.042Z" fill="white" stroke="white" stroke-width="0.7"/></svg>');
    width: 35px;
    height: 35px;
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    z-index: 1;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center; 
  visibility:hidden;
  opacity:0;
    transition: all ease-in-out .2s;
}
.portfolio-site-thumbnail .content-area .single-item:hover .image-section:before {
    transform: translate(-50%, -50%) scale(1);
    visibility:visible;
  opacity:1;
}
 .portfolio-site-thumbnail .content-area .single-item:hover .image-section img {
    transform: scale(1.02); 
}
 


/* site popup design */
.wc-site-popup.popup.anim-fade-zoom {
     left: 50%;
    top: 50%;
    transform-origin: 0 0;
    z-index:99999;
    padding: 0;
}
.wc-site-popup.popup.anim-fade-zoom {
    transform-origin: center  center !important;
    min-width: auto;
}
.wc-site-popup.popup {
    border: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
}
.wc-site-popup.popup  .header {
    background: transparent;
    border: none;
    position: relative;
    height: 0;
    padding: 0;
}
.wc-site-popup.popup  .header .popup-title {
    display: none;
}
.wc-site-popup.popup .close-icon {
    position: absolute;
    top: 28px;
    right: 30px;
    background: rgba(255, 255, 255, 0.12) url(https://www.webcommander.com/template/e27cf56f/images/close-button.svg) no-repeat center;
    width: 18px;
    height: 18px;
    filter: unset;
    padding: 12px;
    border-radius: 100px;
    z-index: 1;
}
.wc-site-popup.popup .close-icon:hover{
    background: rgba(255, 255, 255, 0.22) url(https://www.webcommander.com/template/e27cf56f/images/close-button.svg) no-repeat center;
}
.wc-site-popup.popup .close-icon:after {
    color: #fff;
    font-size: 15px;
    display: none;
}
.wc-site-popup.popup .content {
    padding:0;
    background-color: #ffffff;
    border-radius: 0;
}
.wc-site-popup.popup .content figure{
    padding:0;
    margin:0;
}
@media screen and (max-width: 767px){

.wc-site-popup.popup .close-icon {
  top: 15px;
  right: 40px;
}
}
/* End site popup design */
/*************************************************************************/
































.webcommander-portfolio-popup {
  width: 100vw;
  height: 100vh;
}
.wc-portfolio-box {
  display: flex;
  background: rgba(240, 240, 240, 1)
}
.wc-portfolio-left {
  width: auto;
  flex: 1 1 auto;
}
.wc-portfolio-right {
  width: 500px;
  flex: 0 0 500px;
  max-width: 500px;
  background: rgba(255, 255, 255, 1);
  padding: 69px 56px;
}

.portfolio-top .portfolio-name {
  font-family: Lexend;
font-size: 30px;
font-weight: 600;
line-height: 42px;
letter-spacing: -0.04em;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
.portfolio-top .portfolio-url {
  border-bottom: 1px solid #000;
  display: inline-block;
  padding: 15px 0 3px;
  margin-bottom: 30px
}

.portfolio-top .portfolio-url a {
  font-family: Lexend;
font-size: 16px;
font-weight: 500;
line-height: 20px;
text-align: left;
  text-decoration:none;
  position: relative;
 padding-right:25px;
 color:#000;
}
.portfolio-top .portfolio-url > a:after {
  content: "";
  position: absolute ;
  right: 0;
  top: 5px;
  background: url(/template/e27cf56f/images/link-arrow.svg) no-repeat top;
  width: 20px;
  height: 18px;  
}
.portfolio-top .portfolio-url:hover a, .portfolio-top .portfolio-url a:hover  {
  color: #008DF2;
}
.portfolio-top .portfolio-url:hover{
    border-bottom: 1px solid #008DF2;
}
.portfolio-top .portfolio-url:hover a:after{
  background-position-y: -17px
}
.portfolio-bottom>a {
  margin-bottom: 20px;
  display: inline-block
}

.portfolio-top .portfolio-describe li{
  padding:0;
  margin: 15px 0
}
.portfolio-top .portfolio-describe li:before{
  display: none;
}
.portfolio-top .portfolio-describe li b {
  font-family: Inter;
font-size: 15px;
font-weight: 500;
line-height: 25px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
  color: #666;
min-width: 110px;
  display: inline-block
}
.portfolio-top .portfolio-describe li strong {
  font-family: Inter;
font-size: 15px;
font-weight: 500;
line-height: 25px;
text-align: left;
color: rgba(0, 0, 0, 1);
}

.portfolio-thumbnail {
  margin: 0 auto;
  display: block;
  text-align: center;
  height: 100vh;
  overflow-y: scroll;
  padding: 80px 50px;
}
.wc-portfolio-right{
  position: relative;
}
.portfolio-bottom{
  background: linear-gradient(210.23deg, #FFFAF3 29.2%, #EEF2FE 77.67%);
    padding:50px;
  position: absolute;
  left: 0;
  bottom: 0;
}
.portfolio-bottom p{
  font-family: Lexend;
font-size: 16px;
font-weight: 500;
line-height: 25px;
letter-spacing: -0.03em;
text-align: left;
}
.portfolio-bottom a.button-popup {
  max-width: 146px;
  margin: 0;
  display: block;
  padding: 10px 5px;
  color: #fff;
  text-align: center;
  font-weight: 600;
  line-height: 18px;
  height: 40px;
  -webkit-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  text-decoration: none;
  background: #008DF2;
  width: 100%;
  border-radius: 50px;
}

.portfolio-bottom a.button-popup:hover{
  background: #000;
  text-decoration: none;
}

@media screen and (max-width: 1300px){
.portfolio-bottom {
    padding:40px 50px;
}

.portfolio-thumbnail img {
    width: 100%;
}
  .wc-portfolio-right {
  width: 370px;
  flex: 0 0 370px;
  max-width: 370px;
  padding: 60px 50px;
}
}
@media screen and (max-width: 1200px){
.portfolio-bottom {
    padding:35px 30px;
}
.portfolio-top .portfolio-describe li b{
  display:block

}
.portfolio-thumbnail img {
    width: 100%;
}
  .wc-portfolio-right {
  width: 300px;
  flex: 0 0 300px;
  max-width: 300px;
  padding: 60px 30px;
}
}
@media screen and (max-width: 991px){
.portfolio-bottom {
    padding:30px 25px;
}
.wc-portfolio-box .wc-portfolio-right {
  padding: 60px 25px;
}
  .portfolio-top .portfolio-name {
font-size: 28px;
line-height: 36px;
  }
  .portfolio-top .portfolio-url {
    padding: 5px 0 3px;
    margin-bottom: 20px;
    height:32px
}
  .portfolio-top .portfolio-url a {
    font-size: 15px;
}
}
@media screen and (max-width: 767px){
div.wc-portfolio-box {
    display:block;
    position: relative;
} 
  .wc-portfolio-box .wc-portfolio-right {
      width: 100%;
      display:block;
      position:absolute;
      left:0;
      bottom:0;
      max-width: 100%;
      padding: 20px;
}
.wc-portfolio-left {
    width: 100%;
    display:block;
}.portfolio-bottom{
  display:none;
}
 .portfolio-top .portfolio-describe li{
          margin: 0 0 5px;
        }
 .portfolio-top .portfolio-describe li b {
        display: inline-block;
    }
.portfolio-top .portfolio-url {
        padding: 5px 0 3px;
        margin-bottom: 15px;
    }
.portfolio-thumbnail {
  padding: 20px 20px 260px;
}

}