@font-face {
     font-family: 'Poppins';
     src: url('../../fonts/Poppins-Regular.eot');
     src: url('../../fonts/Poppins-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/Poppins-Regular.woff2') format('woff2'), url('../fonts/Poppins-Regular.woff') format('woff'), url('../fonts/Poppins-Regular.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
}
 @font-face {
     font-family: 'Poppins';
     src: url('../../fonts/Poppins-Medium.eot');
     src: url('../../fonts/Poppins-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/Poppins-Medium.woff2') format('woff2'), url('../fonts/Poppins-Medium.woff') format('woff'), url('../fonts/Poppins-Medium.ttf') format('truetype');
     font-weight: 500;
     font-style: normal;
}

img {
  max-width: 100%;
}

.cd-image-container {
  position: relative;
  width:100%;
  margin: 0em auto;
  height: 100vh;
    overflow: hidden;
}
.cd-image-container .main-img {
  display: block;
  object-fit: cover;
    object-position: bottom;
    height: 100vh;
    width: 100%;
}

.cd-image-label {
  position: absolute;
  top: 0;
  right: 0;
  color: #ffffff;
  /*padding: 1em;*/
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  opacity: 0;
  -webkit-transform: translateY(20px);
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -o-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0.3s 0.7s;
  -moz-transition: -moz-transform 0.3s 0.7s, opacity 0.3s 0.7s;
  transition: transform 0.3s 0.7s, opacity 0.3s 0.7s;
}
.cd-image-label.is-hidden {
  visibility: hidden; 
}
.is-visible .cd-image-label {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
   transform: translate(-50%,-50%);
  left: unset;
  right: 12%;
  top: 37%; text-align: center;
}
span.cd-handle span {
    transform: translate(-50%,-50%);
    color: #fff;
    font-size: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
}
span.cd-handle h3 {
    font-weight: normal;
    font-family: 'Poppins';
    letter-spacing: 1px; text-transform: uppercase;
    font-size: 0.976em;
    transform: translate(-50%,-50%);
    color: #fff;
    position: absolute;
    top: 140%;
    left: 50%;
    }
.cd-resize-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  overflow: hidden;
  /* Force Hardware Acceleration in WebKit */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cd-resize-img .modified-img{
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  height: 100%;object-fit:cover;
  width: 100%; object-position: 2% 100%;
  max-width: none;
}
.cd-resize-img .cd-image-label {
  transform: translate(-50%,-50%);
  left: 50%;
  right: unset;
  top:37%; text-align: center;letter-spacing: 5px;
}
.cd-resize-img .cd-image-label h2,.is-visible .cd-image-label h2{
      font-weight: normal;
    font-family: 'Poppins';
    letter-spacing: 5px;
    font-size: 0.976em;
    color: #ffffff;
}
h2.bl-txt {
    position: relative;
    top: 35px;
}
h2.bl-txt2 {
    position: relative;
    left: 15px;
}
.cd-image-label  a{
  color: #fff;
}
.cd-image-label span{
  letter-spacing: 0px;
    font-family: 'Geomanist';
    font-weight: 500;
font-size:4em; text-transform: uppercase;
display: block; line-height: 70px;
}
a.view-web
{
color: #fff; border: 1px solid #ffffffa8; padding: 10px 20px;
font-family: 'Poppins'; font-weight: 500;
font-size: 0.611em; letter-spacing: 2px; text-transform: uppercase;
display: block; width: fit-content;
display: flex;
    margin: 10px auto 0;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}
a.view-web:hover{
  background: #333; color: #fff;

}
.is-visible .cd-resize-img {
  width: 50%;border-right: 4px solid #fff;
  /* bounce in animation of the modified image */
  -webkit-animation: cd-bounce-in 0.7s;
  -moz-animation: cd-bounce-in 0.7s;
  animation: cd-bounce-in 0.7s;
}


@-webkit-keyframes cd-bounce-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
@-moz-keyframes cd-bounce-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
@keyframes cd-bounce-in {
  0% {
    width: 0;
  }
  60% {
    width: 55%;
  }
  100% {
    width: 50%;
  }
}
.cd-handle {
  position: absolute;
      height: 200px;
    width: 200px;
  /* center the element */
  
      transform: translate(-50%,-50%) !important;
      left: 50%;
  top: 50%;
 /* margin-left: -22px;
  margin-top: -22px;*/
  border-radius: 50%;
  cursor: move;
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0) scale(0);
  -moz-transform: translate3d(0, 0, 0) scale(0);
  -ms-transform: translate3d(0, 0, 0) scale(0);
  -o-transform: translate3d(0, 0, 0) scale(0);
  transform: translate3d(0, 0, 0) scale(0);
}
.cd-handle.draggable {
  /* change background color when element is active */
}
.is-visible .cd-handle {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  -moz-transform: translate3d(0, 0, 0) scale(1);
  -ms-transform: translate3d(0, 0, 0) scale(1);
  -o-transform: translate3d(0, 0, 0) scale(1);
  transform: translate3d(0, 0, 0) scale(1);
  -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s;
  -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s;
  transition: transform 0.3s 0.7s, opacity 0s 0.7s;

}

footer {
  padding: 2rem;
}

footer p {
  font-size: 90%;
  font-weight: 300;
  text-align: center;
}