/* #Slider
================================================== */

.mt-portfolio-grid-images-section{
  position: relative;
  width: 100%;
  display: block;
  overflow: hidden;
  height: 90vh;
}

/* Case Study Showcase
================================================== */

.mt-portfolio-grid-images-case-study-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: auto;
  margin: 0;
  padding: 0;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  list-style: none;
}
.mt-portfolio-grid-images-case-study-wrapper .mt-portfolio-grid-images-name {
  margin: 0 auto;
  text-align: center;
}
.mt-portfolio-grid-images-case-study-wrapper .mt-portfolio-grid-images-name a {
  position: relative;
  list-style: none;
  margin: 0 auto;
  display: inline-block;
  text-align: center;
  padding: 0;
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 6vh;
  text-decoration: none;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear; 
  text-decoration: none;
} 
.mt-portfolio-grid-images-case-study-wrapper .mt-portfolio-grid-images-name a:hover {
  text-decoration: none;
} 
.mt-portfolio-grid-images-case-study-wrapper .mt-portfolio-grid-images-name.active a {
  color: #fff;
}
.mt-portfolio-grid-images-case-study-wrapper .mt-portfolio-grid-images-name a:before {
  position: absolute;
  content: '';
  left: 50%;
  bottom: 0;
  height: 6px;
  width: 0;
  transform: translateX(-50%);
  background: linear-gradient(45deg, #f19872, #e86c9a);
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear; 
} 
.mt-portfolio-grid-images-case-study-wrapper .mt-portfolio-grid-images-name.active a:before {
  width: 100%;
}
.mt-portfolio-grid-images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin:0;
  z-index:2;
} 
.mt-portfolio-grid-images li {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  list-style:none;
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear; 
} 
.mt-portfolio-grid-images li .mt-portfolio-grid-images-hero{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  list-style:none;
  opacity: 0;
  -webkit-transform: translateY(60px);
  transform: translateY(60px);
  -webkit-transition: all 300ms linear;
  transition: all 300ms linear; 
}
.mt-portfolio-grid-images li.show .mt-portfolio-grid-images-hero {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
} 
.mt-portfolio-grid-images li .mt-portfolio-grid-images-hero a img{
  width: 100%;
  height: auto;
  display: block;
  transform: scale(0.6, 1.7);
  transform-origin: center top;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease; 
}
.mt-portfolio-grid-images li.show .mt-portfolio-grid-images-hero a img{
  transform: scale(1);
}
.mt-portfolio-grid-images li:nth-child(1) .mt-portfolio-grid-images-hero a{
  position: absolute;
  width: 25%;
  top: 12%;
  left: 5%;
  display: block;
}
.mt-portfolio-grid-images li:nth-child(1) .mt-portfolio-grid-images-hero a:nth-child(2){
  width: 25%;
  top: 22%;
  left: 65%;
}
.mt-portfolio-grid-images li:nth-child(1) .mt-portfolio-grid-images-hero a:nth-child(3){
  width: 25%;
  top: 55%;
  left: 85%;
}
.mt-portfolio-grid-images li:nth-child(1) .mt-portfolio-grid-images-hero a:nth-child(4){
  width: 20%;
  top: 44%;
  left: 0%;
}
.mt-portfolio-grid-images li:nth-child(2) .mt-portfolio-grid-images-hero a{
  position: absolute;
  width: 25%;
  top: 7%;
  left: 10%;
  display: block;
}
.mt-portfolio-grid-images li:nth-child(2) .mt-portfolio-grid-images-hero a:nth-child(2){
  width: 25%;
  top: 40%;
  left: 0%;
}
.mt-portfolio-grid-images li:nth-child(2) .mt-portfolio-grid-images-hero a:nth-child(3){
  width: 25%;
  top: 20%;
  left: 72%;
}
.mt-portfolio-grid-images li:nth-child(2) .mt-portfolio-grid-images-hero a:nth-child(4){
  width: 20%;
  top: 74%;
  left: 67%;
}
.mt-portfolio-grid-images li:nth-child(3) .mt-portfolio-grid-images-hero a{
  position: absolute;
  width: 25%;
  top: 9%;
  left: 0%;
  display: block;
}
.mt-portfolio-grid-images li:nth-child(3) .mt-portfolio-grid-images-hero a:nth-child(2){
  width: 25%;
  top:40%;
  left: 5%;
}
.mt-portfolio-grid-images li:nth-child(3) .mt-portfolio-grid-images-hero a:nth-child(3){
  width: 25%;
  top: 11%;
  left: 75%;
}
.mt-portfolio-grid-images li:nth-child(3) .mt-portfolio-grid-images-hero a:nth-child(4){
  width: 20%;
  top: 54%;
  left: 85%;
}
.mt-portfolio-grid-images li:nth-child(4) .mt-portfolio-grid-images-hero a{
  position: absolute;
  width: 25%;
  top: 12%;
  left: 5%;
  display: block;
}
.mt-portfolio-grid-images li:nth-child(4) .mt-portfolio-grid-images-hero a:nth-child(2){
  width: 25%;
  top: 22%;
  left: 65%;
}
.mt-portfolio-grid-images li:nth-child(4) .mt-portfolio-grid-images-hero a:nth-child(3){
  width: 25%;
  top: 55%;
  left: 85%;
}
.mt-portfolio-grid-images li:nth-child(4) .mt-portfolio-grid-images-hero a:nth-child(4){
  width: 20%;
  top: 44%;
  left: 0%;
}
.mt-portfolio-grid-images li:nth-child(5) .mt-portfolio-grid-images-hero a{
  position: absolute;
  width: 25%;
  top: 12%;
  left: 5%;
  display: block;
}
.mt-portfolio-grid-images li:nth-child(5) .mt-portfolio-grid-images-hero a:nth-child(2){
  width: 25%;
  top: 22%;
  left: 65%;
}
.mt-portfolio-grid-images li:nth-child(5) .mt-portfolio-grid-images-hero a:nth-child(3){
  width: 25%;
  top: 55%;
  left: 85%;
}
.mt-portfolio-grid-images li:nth-child(5) .mt-portfolio-grid-images-hero a:nth-child(4){
  width: 20%;
  top: 44%;
  left: 0%;
}
.mt-portfolio-grid-images li:nth-child(6) .mt-portfolio-grid-images-hero a{
  position: absolute;
  width: 25%;
  top: 12%;
  left: 5%;
  display: block;
}
.mt-portfolio-grid-images li:nth-child(6) .mt-portfolio-grid-images-hero a:nth-child(4){
  width: 25%;
  top: 22%;
  left: 65%;
}
.mt-portfolio-grid-images li:nth-child(6) .mt-portfolio-grid-images-hero a:nth-child(5){
  width: 25%;
  top: 55%;
  left: 85%;
}
.mt-portfolio-grid-images li:nth-child(6) .mt-portfolio-grid-images-hero a:nth-child(6){
  width: 20%;
  top: 44%;
  left: 0%;
}

@media only screen and (max-width: 767px) {
  .mt-portfolio-grid-images-section{
    height: 30vh;
  }
}
/* #Media
================================================== */

@media (max-width: 991px) { 
  .mt-portfolio-grid-images li .hero-number-back{
    font-size: 26vw;
  } 
}

@media (max-width: 767px) { 
  .mt-portfolio-grid-images-case-study-wrapper .mt-portfolio-grid-images-name a {
    font-size: 26px;
    letter-spacing: 1px;
    color: #fff;
  }
  .mt-portfolio-grid-images-case-study-wrapper .mt-portfolio-grid-images-name a{
    margin-bottom: 10px;
  }
  .mt-portfolio-grid-images li {
    background: rgba(0,0,0,0.1);
  }
  .mt-portfolio-grid-images li .hero-number-back{
    font-size: 32vw;
  } 
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .mt-portfolio-grid-images-case-study-wrapper .mt-portfolio-grid-images-name a{
    font-size: 3vh;
  }
  .mt-portfolio-grid-images-section {
    height: 50vh;
  }

}
@media (max-width: 580px) { 
  .sivi li:nth-child(1) .mt-portfolio-grid-images-hero a,
  .mt-portfolio-grid-images li:nth-child(2) .mt-portfolio-grid-images-hero a,
  .mt-portfolio-grid-images li:nth-child(3) .mt-portfolio-grid-images-hero a,
  .mt-portfolio-grid-images li:nth-child(4) .mt-portfolio-grid-images-hero a{
    width: calc(100% - 15px);
    top: 50%;
    left: 0px;
    transform: translateY(-50%);
  }
  .mt-portfolio-grid-images li:nth-child(1) .mt-portfolio-grid-images-hero a:nth-child(2),
  .mt-portfolio-grid-images li:nth-child(1) .mt-portfolio-grid-images-hero a:nth-child(3),
  .mt-portfolio-grid-images li:nth-child(1) .mt-portfolio-grid-images-hero a:nth-child(4),
  .mt-portfolio-grid-images li:nth-child(2) .mt-portfolio-grid-images-hero a:nth-child(2),
  .mt-portfolio-grid-images li:nth-child(2) .mt-portfolio-grid-images-hero a:nth-child(3),
  .mt-portfolio-grid-images li:nth-child(2) .mt-portfolio-grid-images-hero a:nth-child(4),
  .mt-portfolio-grid-images li:nth-child(3) .mt-portfolio-grid-images-hero a:nth-child(2),
  .mt-portfolio-grid-images li:nth-child(3) .mt-portfolio-grid-images-hero a:nth-child(3),
  .mt-portfolio-grid-images li:nth-child(3) .mt-portfolio-grid-images-hero a:nth-child(4),
  .mt-portfolio-grid-images li:nth-child(4) .mt-portfolio-grid-images-hero a:nth-child(2),
  .mt-portfolio-grid-images li:nth-child(4) .mt-portfolio-grid-images-hero a:nth-child(3),
  .mt-portfolio-grid-images li:nth-child(4) .mt-portfolio-grid-images-hero a:nth-child(4){
    display: none;
  }
}