/* 
Theme Name: Hello Elementor Child
Theme URI: #
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/*Shreeji Photography*/
.clear{clear:both;}
.ehf-header #masthead{background-color: transparent; position: sticky; top: 0; left: 0;}
.ehf-header #masthead.sticky-header{background-color: rgba(255,255,255, 1); box-shadow: 0 0 20px rgba(0,0,0,0.1);}

.shreeji-photography-section1-animation-text .cd-headline.slide .cd-words-wrapper {vertical-align: middle !important;margin-top: -20px;}
.shreeji-photography-section1-animation-text .cd-intro { margin:0 auto !important;}
.shreeji-photography-menu-page-left-menu .hfe-nav-menu li a { justify-content: normal !important; text-align:left !important;overflow: hidden;background: linear-gradient(to right,#000000,#000000 50%,#ffffff 50%);background-clip: text;-webkit-background-clip: text;    -webkit-text-fill-color: transparent;background-size: 200% 100%;background-position: 100%;transition: background-position 1575ms ease; text-decoration: none;}
.shreeji-photography-menu-page-left-menu .hfe-nav-menu li a:hover {background-position: 0 100%;}
.shreeji-photography-menu-page-right-btn .elementor-button-icon {opacity:0;}
.shreeji-photography-menu-page-right-btn .elementor-button-link:hover .elementor-button-icon { opacity:1;}
.shreeji-photography-top-header-nev .menu-overlay{overflow:hidden;}
.shreeji-photography-top-header-nev .menu-overlay .content-type-saved_page{width: 100%;}

/* About Page */
.shrj-testimonial-card-holder p{
	font-size:17px;
}

.shrj-testimonial-holder {
  grid-column-gap: 50px;
  grid-row-gap: 16px;
  grid-template-rows: auto;
  grid-template-columns: 1.25fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  padding-bottom: 20%;
}

.shrj-testimonial-container {
  width: 100%;
}

.shrj-testimonial-card-holder {
  grid-row-gap: 40px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}

.shrj-testimonial-card {
  grid-row-gap: 14px;
  background-color: #fff;
  flex-direction: column;
  padding: 20px 40px;
  display: flex;
  position: -webkit-sticky;
  position: sticky;
  top: 20%;
  box-shadow: 0 0 24px rgba(0, 0, 0, .09);
}

.shrj-testimonial-card.shrj-02 {
  top: 30%;
}

.shrj-testimonial-card.shrj-03 {
  top: 40%;
}

.shrj-testimonial-card.shrj-04 {
  position: relative;
  top: auto;
}

.shrj-testimonal-heading, .shrj-testimonal-heading h1{
  font-size: 30px;
  font-weight: 600;
}

.shrj-testimonal-wrapper {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.shrj-testimonal-heading-holder {
  flex: none;
  position: -webkit-sticky;
  position: sticky;
  top: 20%;
}

.prnt{display:none; visibility:hidden;}

.shrj-right-icon-1{position:relative !important; left:12px !important;}
.shrj-right-icon-2{position:relative !important; left:12px !important;}
.abtact img{position: sticky; top: 20%;}


@media screen and (max-width: 479px) {
  .shrj-testimonial-holder {
    padding-left: 17px;
  }

  .shrj-testimonial-card {
    padding: 17px;
  }

  .shrj-testimonal-heading, .shrj-testimonal-heading h1 {
    font-size: 20px;
  }
}
/* About Page */

/* Home Hero Section */
.shrj-hero {
  padding: 0;
}

.shrj-subheading {
  font-size: 14px;
  color: #444;
}

.shrj-title {
  font-size: 42px;
  font-weight: 600;
  margin-top: 10px;
}

.shrj-highlight-wrap {
  display: flex;
  justify-content: center;
  margin: 30px 0 0 0;
}

.shrj-highlight-circle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 80%;
  max-width: 100%;
  background: #fff;
  border-radius: 50px;
  padding: 0 35px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

.shrj-left-logo {
  width: 50px;
  height: 62px;
  object-fit: contain;
}

.shrj-main-link {
  text-decoration: none;
  color: inherit;
  flex: 1;
  text-align:center;
}

.shrj-main-text {
  font-weight: 600;
  font-size: 50px;
  background: linear-gradient(90deg, #c413d4, #ff0000);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background 0.3s ease;
}

.ehr{
	display:block;
	text-align:center;
	font-family: "Poppins", Sans-serif;
  	font-size: 50px;
  	font-weight: 300;
  	color: #282828;	
}

.shrj-right-icon {
  width: 55px;
  height: 75px;
  object-fit: contain;
  position:relative;
  left:-5px;
}

.shrj-services {
  display: flex;
  justify-content: center;
  gap: 0px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.shrj-services button:nth-of-type(1){ position:relative; left:55px;}
.shrj-services button:nth-of-type(3){ position:relative; left:-55px;}

.shrj-service {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0.6;
  padding:0px;
}

.shrj-services button:hover{color:#fe002b;}

.shrj-service.active,
.shrj-service:hover {
  opacity: 1;
}

.shrj-service img {
  width: 45%;
  height: auto;
}

.shrj-service p {
  margin-top: 10px;
  font-weight: 500;
  font-size:22px;
  line-height:22px;
  color:#282828;
}

.shrj-fade-out {
  opacity: 0;
  transition: opacity 0.18s ease-out;
}

.shrj-fade-in {
  opacity: 1;
  transition: opacity 0.35s ease-in;
}

@media (max-width: 600px) {
  .shrj-title { font-size: 28px; }
  .shrj-main-text { font-size: 22px; }
  .shrj-highlight-circle { width: 100%; }
  .shrj-service img { width: 60px; height: 45px; }
}
/* Home Here Section */


.footerlinks { color:#ffffff;}
.footerlinks:hover { color:#e94444;}
.shreeji-photography-slider-middle .skt-slider-content { width:100% !important; position:relative !important; z-index:8;}
.shreeji-photography-slider-middle .skt-slider-slide::after { content:''; width:100%; height:100%; background:rgba(0,0,0,0.4);position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: 5;}
.shreeji-photography-slider-middle .skt-slider-slide { position:relative !important;}
.shreeji-photography-slider-middle .skt-slider-button { position:relative !important;}
.shreeji-photography-section2 { position:relative !important;}
.shreeji-photography-section2-our-title { position:absolute !important; top:7%; left:50%; transform:translateX(-50%); z-index:9; width:100%;}
.shreeji-photography-contact-img .elementor-widget-container::before {content: '';width: 100%;height: 100%;position: absolute;top: 20px;left: -88px;background: url(images/contact-img-before.png);background-repeat: no-repeat;z-index: -1;}
.shreeji-photography-contact-img .elementor-widget-container::after {content: '';width: 100%;height: 54px;position: absolute;bottom: -80px;left:50%; transform:translateX(-50%);background: url(images/contact-img-after.png);background-repeat: no-repeat;z-index: -1; background-size:100%;}
.shreeji-photography-contact-img .elementor-widget-container { position:relative !important;}
.wmis_image_link{pointer-events: none !important;}
.wmis_main_container { width:97% !important; margin:0 auto !important; text-align:center;}
.wmis_articles a img { width: auto !important;}
.wmis_articles { background:none !important; border:none !important;}
body.page{background-color:#f7f8fd;}
.shreeji-photography-toggle .elementor-tab-title { text-align:center !important; position:relative !important;}
.shreeji-photography-toggle .elementor-toggle-icon { position:absolute; right:70px; font-size:20px;top: 50%;
transform: translateY(-50%);}
.shreeji-photography-toggle .elementor-tab-content { text-align:center !important;}
.shreeji-photography-menu-page-right-inner{display:flex;}
	
.shreeji-icon{}
.shreeji-logo{position: relative; left: 0; transition: all 0.3s;}
.shreeji-logo-out{left: -50px; opacity: 0; visibility: hidden; z-index: -1;}

.shreeji-photography-toggle .elementor-tab-title:hover .elementor-toggle-icon { color:#E94444 !important;}
.shreeji-photography-toggle .elementor-tab-title:hover .elementor-toggle-title { color:#E94444 !important;}
.skt-slider-next { right:70px !important;}
.skt-slider-prev { left:70px !important;}
.shreeji-photography-section1-animation-text .cd-words-wrapper { width:auto !important;}

.shreeji-photography-menu-page-left-menu .hfe-nav-menu li:nth-child(5) a{ font-size:30px !important;}
.shreeji-photography-menu-page-left-menu .hfe-nav-menu li:nth-child(6) a{ font-size:30px !important;}
.shreeji-photography-menu-page-left-menu .hfe-nav-menu li:nth-child(7) a{ font-size:30px !important;}

.gallery-list.gallery-style-1 .gallery-list-content .post-hover-content,
.gallery-list.gallery-style-3 .gallery-list-content .post-hover-content{top: 0; left: 0; transform: none; height: 100%; width: 100%;}
.gallery-list .meta-search-icon{display: block; position: absolute; height: 100%; width: 100%; left: 0; top: 0;}
.gallery-list .meta-search-icon a{position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 100% !important;
  width: 100%;
  height: 100%;
  transform: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;}
  
  .shreeji-photography-section1-inner-img .elementor-widget-container img {filter: grayscale(100%);transition: all 0.7s ease-in-out;cursor: pointer;}
  .shreeji-photography-section1-inner-img .elementor-widget-container img:hover {filter: grayscale(0%);transition: all 0.7s ease-in-out;}

@media(max-width: 479px){
	.shreeji-photography-menu-page-left { padding:15px !important; margin-bottom:-30px; --align-self: start !important;}
	.shreeji-photography-menu-page-right { padding:15px !important;--align-self: start !important;}
	.shreeji-photography-menu-page-left .e-con-inner { padding:0 30px !important;}
	.shreeji-photography-menu-page-right .e-con-inner { padding:30px !important;}
	.shreeji-photography-menu-page-right-btn .elementor-widget-container { margin:20px 0 !important;}
	.shreeji-photography-toggle { width:100% !important;}
	.shreeji-photography-toggle .elementor-toggle-icon {right: 40px;}
	.shreeji-photography-section1-animation-text .cd-words-wrapper { text-align:center !important;}
	.skt-slider-next { right:10px !important;}
    .skt-slider-prev { left:10px !important;}
	.shrj-highlight-circle{ padding:5px 30px;}
	.shrj-left-logo, .shrj-right-icon{width:35px; height:auto; display:none;}
	.shrj-services{gap:0px; margin-top:0px; padding-top:20px;}
	.shrj-services p{line-height:18px; font-size:16px;}
	.shrj-service{/*display:block;*/ width:30%; padding:15px 0;}
	.shrj-service img { width: 60px; height: 45px; }
	.ehr{font-size:26px; font-weight:300; padding-top:10px;}
	.shrj-services button:nth-of-type(1){ position:relative; left:0;}
	.shrj-services button:nth-of-type(3){ position:relative; left:0;}
	.shrj-highlight-wrap{margin:0px;}
}

@media (min-width: 480px) and (max-width: 767px) {
	.shreeji-photography-menu-page-left { padding:15px !important; margin-bottom:-25px; --align-self: start !important;}
	.shreeji-photography-menu-page-right { padding:15px !important;--align-self: start !important;}
	.shreeji-photography-menu-page-left .e-con-inner { padding:0 30px !important;}
	.shreeji-photography-menu-page-right .e-con-inner { padding:30px !important;}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.shreeji-photography-menu-page-left { padding:15px !important; margin-bottom:-170px; --align-self: start !important;}
	.shreeji-photography-menu-page-right { padding:15px !important;--align-self: start !important;}
	.shreeji-photography-menu-page-left .e-con-inner { padding:0 30px !important;}
	.shreeji-photography-menu-page-right .e-con-inner { padding:30px !important;}
	.shreeji-photography-toggle { width:100% !important;}
	.shreeji-photography-toggle .elementor-toggle-icon { right:140px;}
	.shreeji-photography-contact-img .elementor-widget-container::before { height:90% !important;}
	.shreeji-photography-menu-page-left .e-con-inner {padding: 0 0px !important;}
	.shreeji-photography-menu-page-right-inner .e-con-inner { display:block !important; padding-left:0 !important; padding-top:25px !important;}
	.shreeji-photography-menu-page-left-mobilemenu .elementor-icon-list-items li:nth-child(5) a{ font-size:30px !important;}
	.shreeji-photography-menu-page-left-mobilemenu .elementor-icon-list-items li:nth-child(6) a{ font-size:30px !important;}
	.shreeji-photography-menu-page-left-mobilemenu .elementor-icon-list-items li:nth-child(7) a{ font-size:30px !important;}
	.shreeji-photography-menu-page-right-btn .elementor-widget-container { margin-top:0 !important;}
	
	.shrj-highlight-circle{ padding:10px 30px;}
	.shrj-left-logo, .shrj-right-icon{width:55px; height:auto;}
	.shrj-main-text{font-size:38px;}
	.shrj-highlight-wrap{margin:0;}
	.shrj-highlight-circle{width:95%;}
	
	.shrj-services{gap:0; margin-top:0px;}
	.shrj-services p{line-height:22px; font-size:22px;}
	.shrj-service img{width: 45%; height: auto;}
	.ehr{padding-bottom:20px; font-size:42px;}
	.shrj-testimonal-heading, .shrj-testimonal-heading h1{font-size: 20px;}
	.shrj-testimonial-card{padding:20px 30px; grid-row-gap:0px;}
	.shrj-01{margin-bottom:45px;}	
}
@media (min-width: 1024px) and (max-width: 1191px) {
	.shreeji-photography-toggle .elementor-toggle-icon { right:20px;}
	.shreeji-photography-menu-page-left { padding:15px !important; margin-bottom:-170px; --align-self: start !important;}
	.shreeji-photography-menu-page-right { padding:15px !important;--align-self: start !important;}
	.shreeji-photography-menu-page-left .e-con-inner { padding:0 30px !important;}
	.shreeji-photography-menu-page-right .e-con-inner { padding:30px !important;}
	.shreeji-photography-toggle { width:100% !important;}
	.shreeji-photography-menu-page-right-inner .e-con-inner { display:block !important; padding-left:0 !important; padding-top:0 !important;}
	.shreeji-photography-menu-page-left-mobilemenu .elementor-icon-list-items li:nth-child(5) a{ font-size:30px !important;}
	.shreeji-photography-menu-page-left-mobilemenu .elementor-icon-list-items li:nth-child(6) a{ font-size:30px !important;}
	.shreeji-photography-menu-page-left-mobilemenu .elementor-icon-list-items li:nth-child(7) a{ font-size:30px !important;}
}


/* Homepage Slider */

.project-label {
  display:block;
  position:absolute;
  -ms-backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  top:80px;
  left:50%;
  transform:translate(-50%,-50%);
  -moz-transform:translate(-50%,-50%);
  -webkit-transform:translate(-50%,-50%);
  -o-transform:translate(-50%,-50%);
  -ms-transform:translate(-50%,-50%)
}
.project-label h6 {
  color:#fff;
  font-family: "Poppins", Sans-serif;
  font-size: 42px;
  font-weight: 600
}

.portfolio {
  padding:0
}
.view-portfolio-btn {
  left:0;
  right:0;
  margin:auto
}
.view-portfolio-btn .elementor-align-icon-right {
  width:0;
  transition:0.2s;
  overflow:hidden
}
.view-portfolio-btn .elementor-align-icon-right svg {
  width:36px;
  padding-left:5px
}
.view-portfolio-btn:hover .elementor-align-icon-right {
  width:38px;
  transition:0.2s
}
.red-overlay {
  position:absolute;
  width:100%;
  height:100%;
  left:0;
  top:0;
  background: #000;
  z-index:-1
}
.portfolio-wrapper {
  overflow:hidden;
  width:100%;
  padding: 9% 8%;
  margin:0;
  height:100%;
  position:relative
}

@media only screen and (min-width:1024px) {
  .portfolio-wrapper .portfolio li {
    font-size:5.25em;
    display:flex;
    align-items:center
  }
  .portfolio-wrapper .portfolio li a {
    font-size: 90px;
    font-family: "Poppins", Sans-serif;
  }
  .portfolio-wrapper .portfolio li .portfolio-mask-wrap {
    line-height:1.2em
  }
  .portfolio-wrapper .portfolio li .portfolio-mask,
  .portfolio-wrapper .portfolio li .portfolio-mask-wrap,
  .portfolio-wrapper .portfolio li .portfolio-mask>span {
    height:220px
  }
}
@media only screen and (max-width:1023px) {
  .portfolio-wrapper {
    overflow:hidden;
    width:100%;
    padding:0%;
    margin:0;
    height:auto;
    position:relative
  }
  .portfolio-wrapper>.hp-footer {
    display:none
  }
  .portfolio-wrapper>.hp-footer h6 {
    transition:all 350ms cubic-bezier(.77,0,.175,1);
    -webkit-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -moz-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -o-transition:all 350ms cubic-bezier(.77,0,.175,1)
  }
  .portfolio-wrapper li {
    transition:all 350ms cubic-bezier(.77,0,.175,1);
    -webkit-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -moz-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -o-transition:all 350ms cubic-bezier(.77,0,.175,1);
    text-align:center;
    position:relative;
    overflow:hidden;
    font-size:3em;
    padding:15vh 0
  }
  .portfolio-wrapper .portfolio-mask-wrap {
    width:100%;
    z-index:150;
    margin:0;
    padding:0
  }
  .portfolio-wrapper .portfolio-mask {
    display:block;
    height:auto
  }
  .portfolio-wrapper .portfolio-item.in-middle .portfolio-item-img img {
    transform:scale(1.05);
    -moz-transform:scale(1.05);
    -webkit-transform:scale(1.05);
    -o-transform:scale(1.05);
    -ms-transform:scale(1.05)
  }
  .portfolio-wrapper a {
    transition:all 350ms cubic-bezier(.77,0,.175,1);
    -webkit-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -moz-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -o-transition:all 350ms cubic-bezier(.77,0,.175,1);
    font-family: "Poppins", Sans-serif;
    text-align:center;
    display:inline-block;
    position:relative;
    color:#fff;
    font-weight: 700;
    line-height:1.3em
  }
  .portfolio-wrapper a:before {
    content:"";
    transition:all 350ms cubic-bezier(.77,0,.175,1);
    -webkit-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -moz-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -o-transition:all 350ms cubic-bezier(.77,0,.175,1);
    transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    -webkit-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    transform-origin:50% 50%;
    display:block;
    position:absolute;
    background-color:#fff;
    width:3px;
    height:15px;
    top:50%;
    right:-1em
  }
  .portfolio-wrapper a:after {
    content:"";
    transition:all 350ms cubic-bezier(.77,0,.175,1);
    -webkit-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -moz-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -o-transition:all 350ms cubic-bezier(.77,0,.175,1);
    transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    -webkit-transform:rotate(-45deg);
    -o-transform:rotate(-45deg);
    -ms-transform:rotate(-45deg);
    -webkit-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    transform-origin:50% 50%;
    display:block;
    position:absolute;
    background-color:#fff;
    width:3px;
    height:15px;
    top:46%;
    right:-1em
  }
  .portfolio-wrapper .portfolio-item-img {
    transition:all 350ms cubic-bezier(.77,0,.175,1);
    -webkit-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -moz-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -o-transition:all 350ms cubic-bezier(.77,0,.175,1);
    position:absolute;
    top:0%;
    left:0%;
    height:100%;
    width:100%;
    z-index:-1;
    background-color:#253069
  }
  .portfolio-wrapper .portfolio-item-img img {
    transition:all 350ms cubic-bezier(.77,0,.175,1);
    -webkit-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -moz-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -o-transition:all 350ms cubic-bezier(.77,0,.175,1);
    transform:scale(1);
    -moz-transform:scale(1);
    -webkit-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1);
    height:100%;
    opacity:.75;
    -o-object-fit:cover;
    object-fit:cover
  }
}
@media only screen and (max-width:47.9em) {
  .portfolio-wrapper li {
    font-size:2em;
    line-height:2em
  }
  .portfolio-wrapper a:before {
    top:49%
  }
  .portfolio-wrapper a:after {
    top: 45%;
  }
}
@media only screen and (min-width:64em) {
  .portfolio-wrapper li {
    position:relative
  }
  .portfolio-wrapper li:before {
    display:none
  }
  .portfolio-wrapper:before {
    content:"";
    transition:all 500ms cubic-bezier(.77,0,.175,1);
    -webkit-transition:all 500ms cubic-bezier(.77,0,.175,1);
    -moz-transition:all 500ms cubic-bezier(.77,0,.175,1);
    -o-transition:all 500ms cubic-bezier(.77,0,.175,1);
    display:block;
    position:absolute;
    top:0;
    left:50%;
    right:0;
    bottom:0;
    background-color: #000;
    z-index:-1
  }
  .portfolio-wrapper>.hp-footer {
    height:2em;
    width:100%;
    overflow:hidden;
    font-size:.8em;
    position:fixed;
    transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -webkit-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    font-weight:600;
    -webkit-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;
    bottom:60px;
    left:66px
  }
  .portfolio-wrapper>.hp-footer h6 {
    line-height:2rem;
    margin:0;
    padding:0;
    transition:all 500ms cubic-bezier(.77,0,.175,1);
    -webkit-transition:all 500ms cubic-bezier(.77,0,.175,1);
    -moz-transition:all 500ms cubic-bezier(.77,0,.175,1);
    -o-transition:all 500ms cubic-bezier(.77,0,.175,1)
  }
  .portfolio-wrapper>.hp-footer .project-caption {
    position:absolute;
    font-weight:600;
    top:0;
    transform:translateY(100%);
    -moz-transform:translateY(100%);
    -webkit-transform:translateY(100%);
    -o-transform:translateY(100%);
    -ms-transform:translateY(100%);
    left:0;
    color:#fff
  }
  .portfolio-wrapper>.hp-footer .project-caption.hovered {
    top:0%
  }
  .portfolio-wrapper.selected:before {
    left:0
  }
  .portfolio-wrapper.selected>.hp-footer h6.copyright {
    transform:translate(0,-100%);
    -moz-transform:translate(0,-100%);
    -webkit-transform:translate(0,-100%);
    -o-transform:translate(0,-100%);
    -ms-transform:translate(0,-100%)
  }
  .portfolio-wrapper.selected>.hp-footer .project-caption.hovered {
    transform:translateY(0);
    -moz-transform:translateY(0);
    -webkit-transform:translateY(0);
    -o-transform:translateY(0);
    -ms-transform:translateY(0)
  }
  .portfolio-wrapper li {
    transition:all 350ms cubic-bezier(.77,0,.175,1);
    -webkit-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -moz-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -o-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -webkit-transition-delay:0.15s;
    -moz-transition-delay:0.15s;
    -o-transition-delay:0.15s;
    -ms-transition-delay:0.15s;
    transition-delay:0.15s;
    height:85px;
    position:relative;
    line-height:1.2em;
    font-size:2.5em
  }
  .portfolio-wrapper li:nth-child(2) {
    -webkit-transition-delay:0.15s;
    -moz-transition-delay:0.15s;
    -o-transition-delay:0.15s;
    -ms-transition-delay:0.15s;
    transition-delay:0.15s
  }
  .portfolio-wrapper li:nth-child(3) {
    -webkit-transition-delay:0.125s;
    -moz-transition-delay:0.125s;
    -o-transition-delay:0.125s;
    -ms-transition-delay:0.125s;
    transition-delay:0.125s
  }
  .portfolio-wrapper li:nth-child(4) {
    -webkit-transition-delay:0.1s;
    -moz-transition-delay:0.1s;
    -o-transition-delay:0.1s;
    -ms-transition-delay:0.1s;
    transition-delay:0.1s
  }
  .portfolio-wrapper li:nth-child(5) {
    -webkit-transition-delay:0.075s;
    -moz-transition-delay:0.075s;
    -o-transition-delay:0.075s;
    -ms-transition-delay:0.075s;
    transition-delay:0.075s
  }
  .portfolio-wrapper li.active:hover .portfolio-mask {
    transform:translateX(0%);
    -moz-transform:translateX(0%);
    -webkit-transform:translateX(0%);
    -o-transform:translateX(0%);
    -ms-transform:translateX(0%);
    transition:all 400ms cubic-bezier(.77,0,.175,1);
    -webkit-transition:all 400ms cubic-bezier(.77,0,.175,1);
    -moz-transition:all 400ms cubic-bezier(.77,0,.175,1);
    -o-transition:all 400ms cubic-bezier(.77,0,.175,1)
  }
  .portfolio-wrapper li.active:hover .portfolio-mask>span {
    transform:translateX(0%);
    -moz-transform:translateX(0%);
    -webkit-transform:translateX(0%);
    -o-transform:translateX(0%);
    -ms-transform:translateX(0%)
  }
  .portfolio-wrapper li.active:before {
    bottom:0;
    opacity:1
  }
  .portfolio-wrapper li .active:nth-of-type(8):before {
    bottom:5%
  }
  .portfolio-wrapper .fake-link:before {
    content:attr(data-mask-link);
    color:#fff;
    opacity:.5
  }
  .portfolio-wrapper a {
    transition:all 350ms cubic-bezier(.77,0,.175,1);
    -webkit-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -moz-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -o-transition:all 350ms cubic-bezier(.77,0,.175,1);
    font-family:"Montserrat","Open Sans",sans-serif;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    display:block;
    width:100%;
    overflow:hidden;
    line-height:1.25em;
    color:rgba(37,48,105,.15);
    font-weight:800
  }
  .portfolio-wrapper a:before {
    content:"";
    transition:all 350ms cubic-bezier(.77,0,.175,1);
    -webkit-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -moz-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -o-transition:all 350ms cubic-bezier(.77,0,.175,1);
    transform:rotate(90deg) translate(0%,40%);
    -moz-transform:rotate(90deg) translate(0%,40%);
    -webkit-transform:rotate(90deg) translate(0%,40%);
    -o-transform:rotate(90deg) translate(0%,40%);
    -ms-transform:rotate(90deg) translate(0%,40%);
    -webkit-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    transform-origin:50% 50%;
    display:block;
    position:absolute;
    background-color:#fff;
    width:4px;
    height:20px;
    text-align:center;
    top:50%;
    right:0em;
    opacity:0
  }
  .portfolio-wrapper a:after {
    content:"";
    transition:all 350ms cubic-bezier(.77,0,.175,1);
    -webkit-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -moz-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -o-transition:all 350ms cubic-bezier(.77,0,.175,1);
    transform:rotate(-90deg) translate(0%,-40%);
    -moz-transform:rotate(-90deg) translate(0%,-40%);
    -webkit-transform:rotate(-90deg) translate(0%,-40%);
    -o-transform:rotate(-90deg) translate(0%,-40%);
    -ms-transform:rotate(-90deg) translate(0%,-40%);
    -webkit-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    transform-origin:50% 50%;
    display:block;
    position:absolute;
    background-color:#fff;
    width:4px;
    height:20px;
    text-align:center;
    top:50%;
    right:0em;
    opacity:0
  }
  .portfolio-wrapper .portfolio-mask,
  .portfolio-wrapper .portfolio-mask>span {
    height:85px
  }
  .portfolio-wrapper .portfolio-mask-wrap {
    position:absolute;
    overflow:hidden;
    left:50%;
    transform:translate(-50%,0%);
    -moz-transform:translate(-50%,0%);
    -webkit-transform:translate(-50%,0%);
    -o-transform:translate(-50%,0%);
    -ms-transform:translate(-50%,0%);
    height:85px;
    transition:all 350ms cubic-bezier(.77,0,.175,1);
    -webkit-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -moz-transition:all 350ms cubic-bezier(.77,0,.175,1);
    -o-transition:all 350ms cubic-bezier(.77,0,.175,1)
  }
  .portfolio-wrapper .portfolio-mask {
    position:absolute;
    overflow:hidden;
    width:100%;
    height:85px;
    transform:translateX(0%);
    -moz-transform:translateX(0%);
    -webkit-transform:translateX(0%);
    -o-transform:translateX(0%);
    -ms-transform:translateX(0%);
    transition:all 400ms cubic-bezier(.77,0,.175,1);
    -webkit-transition:all 400ms cubic-bezier(.77,0,.175,1);
    -moz-transition:all 400ms cubic-bezier(.77,0,.175,1);
    -o-transition:all 400ms cubic-bezier(.77,0,.175,1)
  }
  .portfolio-wrapper .portfolio-mask>span {
    position:absolute;
    color:#fff;
    transform:translateX(0%);
    -moz-transform:translateX(0%);
    -webkit-transform:translateX(0%);
    -o-transform:translateX(0%);
    -ms-transform:translateX(0%);
    transition:all 400ms cubic-bezier(.77,0,.175,1);
    -webkit-transition:all 400ms cubic-bezier(.77,0,.175,1);
    -moz-transition:all 400ms cubic-bezier(.77,0,.175,1);
    -o-transition:all 400ms cubic-bezier(.77,0,.175,1);
    display:inline-block;
    font-weight:800
  }
  .portfolio-wrapper .portfolio {
    overflow:hidden
  }
  .portfolio-wrapper .portfolio.entered {
    overflow:visible
  }
  .portfolio-wrapper .portfolio.entered .project-label .portfolio-mask {
    transform:translateX(0%);
    -moz-transform:translateX(0%);
    -webkit-transform:translateX(0%);
    -o-transform:translateX(0%);
    -ms-transform:translateX(0%)
  }
  .portfolio-wrapper .portfolio.entered .project-label .portfolio-mask>span {
    transform:translateX(0%);
    -moz-transform:translateX(0%);
    -webkit-transform:translateX(0%);
    -o-transform:translateX(0%);
    -ms-transform:translateX(0%)
  }
  .portfolio-wrapper .portfolio-item.active a:after,
  .portfolio-wrapper .portfolio-item.active a:before {
    right:-.5em;
    opacity:1
  }
  .portfolio-wrapper .portfolio-item.active a:before {
    transform:rotate(45deg) translate(0%,40%);
    -moz-transform:rotate(45deg) translate(0%,40%);
    -webkit-transform:rotate(45deg) translate(0%,40%);
    -o-transform:rotate(45deg) translate(0%,40%);
    -ms-transform:rotate(45deg) translate(0%,40%)
  }
  .portfolio-wrapper .portfolio-item.active a:after {
    transform:rotate(-45deg) translate(0%,-40%);
    -moz-transform:rotate(-45deg) translate(0%,-40%);
    -webkit-transform:rotate(-45deg) translate(0%,-40%);
    -o-transform:rotate(-45deg) translate(0%,-40%);
    -ms-transform:rotate(-45deg) translate(0%,-40%)
  }
  .portfolio-wrapper .portfolio-item.active .portfolio-item-img.show {
    transition:all 0.55s cubic-bezier(.25,.46,.45,.94);
    -webkit-transition:all 0.55s cubic-bezier(.25,.46,.45,.94);
    -moz-transition:all 0.55s cubic-bezier(.25,.46,.45,.94);
    -o-transition:all 0.55s cubic-bezier(.25,.46,.45,.94);
    transform:translate(-50%,0) scale(1.03);
    -moz-transform:translate(-50%,0) scale(1.03);
    -webkit-transform:translate(-50%,0) scale(1.03);
    -o-transform:translate(-50%,0) scale(1.03);
    -ms-transform:translate(-50%,0) scale(1.03);
    -webkit-transition-delay:0.2s;
    -moz-transition-delay:0.2s;
    -o-transition-delay:0.2s;
    -ms-transition-delay:0.2s;
    transition-delay:0.2s;
    top:0;
    opacity:1
  }
  .portfolio-wrapper .portfolio-item.active .portfolio-mask-wrap {
    overflow:visible
  }
  .portfolio-wrapper.selected .portfolio-item .portfolio-mask {
    transform:translateX(101%);
    -moz-transform:translateX(101%);
    -webkit-transform:translateX(101%);
    -o-transform:translateX(101%);
    -ms-transform:translateX(101%)
  }
  .portfolio-wrapper.selected .portfolio-item .portfolio-mask>span {
    transform:translateX(-101%);
    -moz-transform:translateX(-101%);
    -webkit-transform:translateX(-101%);
    -o-transform:translateX(-101%);
    -ms-transform:translateX(-101%)
  }
  .portfolio-wrapper.selected .portfolio-item .portfolio-item-img {
    transition:all 0.4s cubic-bezier(.25,.46,.45,.94);
    -webkit-transition:all 0.4s cubic-bezier(.25,.46,.45,.94);
    -moz-transition:all 0.4s cubic-bezier(.25,.46,.45,.94);
    -o-transition:all 0.4s cubic-bezier(.25,.46,.45,.94);
    transform:translate(-50%,0) scale(1);
    -moz-transform:translate(-50%,0) scale(1);
    -webkit-transform:translate(-50%,0) scale(1);
    -o-transform:translate(-50%,0) scale(1);
    -ms-transform:translate(-50%,0) scale(1);
    -webkit-transition-delay:0s;
    -moz-transition-delay:0s;
    -o-transition-delay:0s;
    -ms-transition-delay:0s;
    transition-delay:0s;
    top:0;
    opacity:0
  }
  .portfolio-wrapper.selected .portfolio-item.active .portfolio-mask {
    transform:translateX(0%);
    -moz-transform:translateX(0%);
    -webkit-transform:translateX(0%);
    -o-transform:translateX(0%);
    -ms-transform:translateX(0%)
  }
  .portfolio-wrapper.selected .portfolio-item.active .portfolio-mask>span {
    transform:translateX(0%);
    -moz-transform:translateX(0%);
    -webkit-transform:translateX(0%);
    -o-transform:translateX(0%);
    -ms-transform:translateX(0%)
  }
  .portfolio-wrapper.selected .portfolio-item a {
    color:rgba(0,0,0,.2)
  }
  .portfolio-wrapper .portfolio-item-img {
    transition:all 0.2s cubic-bezier(.25,.46,.45,.94);
    -webkit-transition:all 0.2s cubic-bezier(.25,.46,.45,.94);
    -moz-transition:all 0.2s cubic-bezier(.25,.46,.45,.94);
    -o-transition:all 0.2s cubic-bezier(.25,.46,.45,.94);
    transform:translate(-50%,0) scale(1);
    -moz-transform:translate(-50%,0) scale(1);
    -webkit-transform:translate(-50%,0) scale(1);
    -o-transform:translate(-50%,0) scale(1);
    -ms-transform:translate(-50%,0) scale(1);
    -webkit-transition-delay:0s;
    -moz-transition-delay:0s;
    -o-transition-delay:0s;
    -ms-transition-delay:0s;
    transition-delay:0s;
    -webkit-transform-origin:50% 50%;
    -ms-transform-origin:50% 50%;
    transform-origin:50% 50%;
    position:fixed;
    opacity:0;
    line-height:0;
    top:0%;
    left:50%;
    height:100%;
    width:100%;
    z-index:-1
  }
  .portfolio-wrapper .portfolio-item-img img {
    height:100%;
    opacity:.75;
    -o-object-fit:cover;
    object-fit:cover
  }
  .portfolio-wrapper li {
    height:140px
  }
  .portfolio-wrapper .portfolio-mask,
  .portfolio-wrapper .portfolio-mask-wrap,
  .portfolio-wrapper .portfolio-mask>span {
    height:140px
  }
}
@media only screen and (min-width:75em) {
  .portfolio-wrapper {
    width:100%;
    margin:0
  }
  .portfolio-wrapper li {
    height:220px;
    font-size:6.666em
  }
  .portfolio-wrapper a {
    line-height:220px
  }
  .portfolio-wrapper .portfolio-mask,
  .portfolio-wrapper .portfolio-mask-wrap,
  .portfolio-wrapper .portfolio-mask>span {
    height:220px
  }
}
@media only screen and (min-width:1921px) {
  .portfolio-wrapper {
    width:100%;
    margin:0
  }
  .portfolio-wrapper li {
    height:250px
  }
  .portfolio-wrapper .portfolio-mask,
  .portfolio-wrapper .portfolio-mask-wrap,
  .portfolio-wrapper .portfolio-mask>span {
    height:250px
  }
}

@media(max-width: 1199px){
    .project-label h6{font-size: 28px;}
    .portfolio-wrapper .portfolio li a{font-size: 60px; line-height: 220px;}
}

@media(max-width: 1023px){
    .project-label{top: 60px;}
    .project-label h6{font-size: 20px;}
    .portfolio-wrapper .portfolio li a{font-size: 40px;}
}

@media(max-width: 767px){
    .project-label h6{font-size: 16px;}
    .portfolio-wrapper .portfolio li a{font-size: 28px;}
}