/* For Smartphone */
@media only screen and (max-width: 430px){
    .gallery.grid figure img {
        margin: auto;
        display: block;
        width: 100%;
        height: auto;
    }
    .portfolio.grid article figure img {
        display: block;
        height: auto;
        margin: auto;
    }
    .video-style{
        margin: auto;
        width: 100%;
        height: 100%;
    }
     #myVideo-pc{
        display: none;
    }
}
  
  /* For Desktop */
@media only screen and (min-width: 430px){
    .gallery.grid figure img {
        margin: auto;
        display: block;
        /* width: 100%; */
        height: 270px;
    }
    .portfolio.grid article figure img {
        display: block;
        height: 270px;
        margin: auto;
    }
    .video-style{
        width: 100%;
        margin: auto;
        height: 255px;
    }
    #myVideo-mobile{
        display: none;
    }
}


.gallery.grid.three-columns figure {
    padding-bottom: 0px !important;
}
body{
    line-height: 0px;
}



.text-center{
    text-align: center;
}
.no-pro-found-img{
    width: 200px;
    margin: auto;
    display: block;
}
.sorry-text{
    text-align: center !important;
}
.project-desc{
    /* padding-bottom: 3em; */
    padding-top: 2em;
}

.home-title{
    font-family: 'effra';
    position: relative;
    display: block;
    font-size: 14px;
    line-height: 24px;
    margin: 0;
    letter-spacing: 4px;
    text-transform: uppercase;
    z-index: 2;
    padding-bottom: 15px;
    /*padding-top: 40px;*/
}
.articles-wrapper{
    padding-top: 20px;
}











.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out; 
	-moz-transition: all 0.15s ease-out; 
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}











.cta {
    padding-top: 20px;
    border: none;
    background: none;
    cursor: pointer;
  }
  
  .cta span {
    padding-bottom: 7px;
    letter-spacing: 3px;
    font-size: 10px;
    padding-right: 15px;
    text-transform: uppercase;
  }
  
  .cta svg {
    transform: translateX(-8px);
    transition: all 0.3s ease;
  }
  
  .cta:hover svg {
    transform: translateX(0);
  }
  
  .cta:active svg {
    transform: scale(0.9);
  }
  
  .hover-underline-animation {
    position: relative;
    color: black;
    padding-bottom: 20px;
  }
  
  .hover-underline-animation:after {
    content: "";
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #000000;
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
  }
  
  .cta:hover .hover-underline-animation:after {
    transform: scaleX(1);
    transform-origin: bottom left;
  }