body {
 
    overflow:hidden;
    height:100%;
    margin:0;
    padding:0px;
}

#container {
 
}


div {
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}


#item, #item1, #item2, #item3, #item4, #item5, #item6, #item7, #item8, #item9, #item10, #item11, #item12, #item13 {
  width: 225px;
  height: 225px;
	float:left;
}


.zoomItem, .zoomItem1, .zoomItem2, .zoomItem3, .zoomItem4, .zoomItem5, .zoomItem6, .zoomItem7, .zoomItem8, .zoomItem9, .zoomItem10, .zoomItem11, .zoomItem12, .zoomItem13 {
	position: absolute;
  animation: fadeIn linear 1s;
  -webkit-animation: fadeIn linear 1s;
  -moz-animation: fadeIn linear 1s;
  -o-animation: fadeIn linear 1s;
  -ms-animation: fadeIn linear 1s;
}
@keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-moz-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-o-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}

@-ms-keyframes fadeIn {
  0% {opacity:0;}
  100% {opacity:1;}
}
.BornHS__Wrapper.buttons-digitals {
    position: relative;
}

@font-face {
	font-family: 'SansaPro-Bold';
	src: url('fonts/SansaPro-Bold.eot');
	src: local('☺'), url('fonts/SansaPro-Bold.woff') format('woff'), url('fonts/SansaPro-Bold.ttf') format('truetype'), url('fonts/SansaPro-Bold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'SansaPro-Normal';
	src: url('fonts/SansaPro-Normal.eot');
	src: local('☺'), url('fonts/SansaPro-Normal.woff') format('woff'), url('fonts/SansaPro-Normal.ttf') format('truetype'), url('fonts/SansaPro-Normal.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

    h1, h2, h3, h4, h5, h6{
        margin: 0px;
        padding: 0px;
        font-family: 'SansaPro-Bold';
    
    }
     ul, li, p, a{
        font-family: 'SansaPro-Normal';
     }
    a {
        text-decoration: none;
    }
    body {
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }
    .digital-ecosystem {
        overflow: hidden;
    }
     .digtal-eco-main {
      background-image: url(assets/Main-Slide.svg);
        height: 100%;
        background-position: bottom center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100% !important;
        position: relative;
        overflow: hidden;
        /* background-size: 100% auto; */
        background-position: bottom;
        background-attachment: fixed;
    } 
    .digtal-eco-main figure {
        margin: 0px !important;
        padding: 0px !important;
    }

    label.BornHS__Label:hover .hov-button{
     display: block;

    }
    .BornHS__Wrapper .BornHS__Input + .BornHS__Label img:hover {
      opacity: 0;
      z-index: -1;
  }
  .BornHS__Wrapper .BornHS__Input + .BornHS__Label:hover img {
   opacity: 0;
   z-index: -1;
      }
    
    .hov-button {
        font-size: 15px;
        line-height: 22px;
        text-align: center;
        color: #ffffff;
        background-color: #293896;
        padding: 10px 25px;
        border-radius: 20px;
      position: relative;
        top: 15px;
        left: -20px;
        font-family: 'SansaPro-Normal';
        font-weight: 400;
        z-index: 2;
       display: none;
       animation: scale-display .2s;

    }
    @keyframes scale-display {
      0% {
        opacity: 0;
        transform: scale(0);
        -webkit-transform: scale(0);
      }
    
      100% {
        opacity: 1;
        transform: scale(1);
        -webkit-transform: scale(1);
      }
    }

    .img-close {
      width: 16%;
      position: absolute;
      right: -55%;
      top: -5px;
      cursor: pointer;
      z-index: 9;
      display: none !important;
  }
    /* hotspot points css start*/




  .BornHS__Wrapper .BornHS__Input {
    height: 0;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    text-indent: -9999px;
    width: 0;
    z-index: -1;
  }
  .BornHS__Wrapper .BornHS__Input + .BornHS__Label {
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    transition: all 300ms ease !important;


 
  }
  .BornHS__Wrapper .BornHS__Input + .BornHS__Label img {
    width: 60px;
    position: absolute;
    z-index: 3;
    transition: all 300ms ease  !important;
}

 

  .BornHS__Modal__Input.button-purple .BornHS__Label{
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
  }

  @media (min-width: 768px) {
    .BornHS__Wrapper .BornHS__Input + .BornHS__Label {
      width: fit-content !important;
    }
  }

 
  .BornHS__Wrapper.BornHS__Blur .BornHS__Input {
    display: none;
  }
  .BornHS__Wrapper.BornHS__Blur .BornHS__Input + .BornHS__Label {
    opacity: 0.5;
    pointer-events: none;
  }
  .BornHS__Wrapper.BornHS__Blur .BornHS__Input:checked {
    display: inline-block;
  }
  .BornHS__Wrapper.BornHS__Blur .BornHS__Input:checked + .BornHS__Label {
    opacity: 1;
    pointer-events: auto;
  }
  .BornHS__Modal {
    bottom: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 1;
  }
  
  @media (max-width: 768px) {
    .BornHS__Wrapper .BornHS__Modal__Content {
      bottom: auto !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%) !important;
    }
  
    .BornHS__Wrapper .BornHS__Modal__Content .BornHS__Close:before, .BornHS__Wrapper .BornHS__Modal__Content .BornHS__Close:after {
      background: #fff;
      content: "";
      cursor: pointer;
      display: block;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
    }

  }
  
  /* hotspot points css end*/


/* .openbutton {
  height: 100%; 
  width: 100%;
  position: absolute;
}
.button-container {
  height: 100%;
  width: 100%;
} */
.buttonmain {
  position: absolute;
}
.buttonmain2 {
  display: flex;
  margin: 0 20px;
}

.buttonmain3 {
  display: flex;
  justify-content: space-between;
  margin: 0 20px 60px;
}


.buttonbg-cover {
  background-size: 0px 0px;
  height: 100%;
  margin-bottom: 12px;
  width: 100%;
}


.close-ups {
  pointer-events: none;
}

.close-ups,
.close-up {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.close-up {
  opacity: 0;
  pointer-events: none;
  transition: transform 1100ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 350ms 400ms cubic-bezier(0, 0, 0.2, 1);
}
.close-up{
  z-index: 10;
  transform: translateX(var(--delta-x)) translateY(var(--delta-y)) scale(0.1);
  background-size: cover;
    background-repeat: no-repeat;
}
.svg_animation{
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: contain;
  z-index: 5;
}

.svg_animation object {
  position: absolute;
  width: 515px;
  left: -65%;
  right: unset;
  top: -17%;
}
.close-ups.active,
.close-up.active {
  pointer-events: all;
  opacity: 1;
  transform: scale(1);
  z-index: 9;
}

.close-up-cover {
  left: 10%;
  position: absolute;
  top: 10%;
}
.main-title {
  position: absolute;
  top: 4%;
  z-index: 1;
  text-align: center;
	font-family: 'SansaPro-Bold';
  line-height: 42px;
  font-size: 34px;
  color: #E0523C;
}
/***** New CSS Code****/

.box-hov {
  background-color: #ffffff;
  width: 300px;
  height: fit-content;
  border-color: transparent;
  box-shadow: rgb(214 214 214 / 83%) 2px 2px 5px 2px;
  -webkit-box-shadow: rgb(214 214 214 / 83%) 2px 2px 5px 2px;
  -moz-box-shadow: rgba(214, 214, 214, 0.83) 2px 2px 5px 2px;
  box-shadow: 0 19px 38px rgb(0 0 0 / 30%), 0 15px 12px rgb(0 0 0 / 22%);
  box-shadow: 1px 1px 3px 3px rgb(0 0 0 / 10%);
  border-radius: 16px;
  transform-origin: 61% 152% 0px;
  transform: translate(1px, 1px);
  position: absolute;
  bottom: 40.73%;
  left: 9.01%;

  padding: 50px 40px;
  z-index: 10;
  text-align: left;
  margin-left: 51px;
  /* transform: translate(0, 140%); */
  transition: 0.01s ease-in;
  transform: scale(0.28);
  transition-duration: .2s, 1s;
  transition-timing-function: linear, ease-in;
  transition-delay: 0s, 1s;
}
.box-hov p {
  font-size: 16px !important;
  line-height: 26px !important;
  padding: 0px !important;
  margin:0px!important;
  color:#333232
}
.box-hov h3 {
  text-align: left;
  line-height: 40px;
  letter-spacing: 0px;
  font-weight: 700;
  font-size: 30px;
  padding-bottom: 15px;
  color:#E1523D
}
.animate {
  min-height: 10em;
  overflow: hidden;
  position: absolute; 
  bottom: 45.4%;
}
.click-for.one .animate {
   animation: 1s autoplay1 1 forwards;  
}
.click-for.two .animate {
  animation: 1s autoplay2 1 forwards;  
}

.click-for.two .box-hov {
  transform-origin: 61% 152% 0px;
}

.click-for.three .animate {
  animation: 1s autoplay3 1 forwards;  
}

.click-for.three .box-hov {
  transform-origin: -68% 152% 0px;
}

.click-for.four .animate {
  animation: 1s autoplay4 1 forwards;  
}

.click-for.four .box-hov {
  transform-origin: 61% 152% 0px;
}

.click-for.five .animate {
  animation: 1s autoplay5 1 forwards;  
}

.click-for.five .box-hov {
  transform-origin: 61% 152% 0px;
}

.click-for.six .animate {
  animation: 1s autoplay6 1 forwards;  
}

.click-for.six .box-hov {
  transform-origin: 61% 152% 0px;
}

.click-for.seven .animate {
  animation: 1s autoplay7 1 forwards;  
}

.click-for.seven .box-hov {
  transform-origin: 61% 152% 0px;
}

.click-for.eight .animate {
  animation: 1s autoplay8 1 forwards;  
}

.click-for.eight .box-hov {
  transform-origin: 61% 152% 0px;
}

.click-for.nine .animate {
  animation: 1s autoplay9 1 forwards;  
}

.click-for.nine .box-hov {
  transform-origin: -68% 152% 0px;
}

.click-for.ten .animate {
  animation: 1s autoplay10 1 forwards;  
}

.click-for.ten .box-hov {
  transform-origin: -68% 152% 0px;
}

.click-for.eleven .animate {
  animation: 1s autoplay11 1 forwards;  
}

.click-for.eleven .box-hov {
  transform-origin: 61% 152% 0px;
}

.click-for.twelve .animate {
  animation: 1s autoplay12 1 forwards;  
}

.click-for.twelve .box-hov {
  transform-origin: -68% 152% 0px;
}

.click-for.thirteen .animate {
  animation: 1s autoplay13 1 forwards;  
}

.click-for.thirteen .box-hov {
  transform-origin: -68% 152% 0px;
}

.click-for.fourteen .animate {
  animation: 1s autoplay14 1 forwards;  
}

.click-for.fourteen .box-hov {
  transform-origin: -68% 152% 0px;
}
@keyframes autoplay1 {
  10% {
    transform-origin: 61% 152% 0px;
}
  100% {  
    transform-origin: 61% 132% 0px;
}
}

@keyframes autoplay2 {
  10% {
    transform-origin: 61% 152% 0px;
}
  100% {  
    transform-origin: 61% 132% 0px;
}
}
@keyframes autoplay3 {
  10% {
    transform-origin: -68% 152% 0px;
}
  100% {  
    transform-origin: -68% 132% 0px;
}
}

@keyframes autoplay4 {
  10% {
    transform-origin: 61% 152% 0px;
}
  100% {  
    transform-origin: 61% 132% 0px;
}
}

@keyframes autoplay5 {
  10% {
    transform-origin: 61% 152% 0px;
}
  100% {  
    transform-origin: 61% 132% 0px;
}
}
@keyframes autoplay6 {
  10% {
    transform-origin: 61% 152% 0px;
}
  100% {  
    transform-origin: 61% 132% 0px;
}
}
@keyframes autoplay7 {
  10% {
    transform-origin: 61% 152% 0px;
}
  100% {  
    transform-origin: 61% 132% 0px;
}
}

@keyframes autoplay8 {
  10% {
    transform-origin: 61% 152% 0px;
}
  100% {  
    transform-origin: 61% 132% 0px;
}
}

@keyframes autoplay9 {
  10% {
    transform-origin: -68% 152% 0px;
}
  100% {  
    transform-origin: -68% 132% 0px;
}
}

@keyframes autoplay10 {
  10% {
    transform-origin: -68% 152% 0px;
}
  100% {  
    transform-origin: -68% 130% 0px;
}
}

@keyframes autoplay11 {
  10% {
    transform-origin: 61% 152% 0px;
}
  100% {  
    transform-origin: 61% 132% 0px;
}
}


@keyframes autoplay12 {
  10% {
    transform-origin: -68% 152% 0px;
}
  100% {  
    transform-origin: -68% 132% 0px;
}
} 

@keyframes autoplay13 {
  10% {
    transform-origin: -68% 152% 0px;
  }
  100% {  
    transform-origin: -68% 132% 0px;
  }
} 

@keyframes autoplay14 {
  10% {
    transform-origin: -68% 152% 0px;
  }
  100% {  
    transform-origin: -68% 132% 0px;
  }
} 
.back-btn{
  padding-top:20px;

}
.back-btn a.img-close {
  width: 40% !important;
  position: unset !important;
  font-size: 18px;
  line-height: 28px;
  color: #E1523D;
  font-weight: 600;
  border-bottom: 1px solid;
  cursor: pointer;
  z-index: 2;
  padding-top: 20px;
}

.box-hov {
  display: none;
}
/* 
.button-purple.one  .box-hov, .button-purple.two  .box-hov, .button-purple.four  .box-hov, .button-purple.five .box-hov, .button-purple.six  .box-hov,.button-purple.seven  .box-hov,
.button-purple.eight  .box-hov,.button-purple.eleven  .box-hov {
  right: 2%;
  left:unset;
} */

/* .cont-type {
  text-align: center;
  position: relative;
  justify-content: center;
  width: 100%;
  height: 100%;
  display: flex;
}
.main-title.text {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #E0523C;
  animation: blink-caret 0.6s step-end infinite, type 8s steps(67, end);
  
}

@keyframes blink-caret {
  0%, 100% {border-color: transparent;}
  50% {border-color: #E0523C;}
}

@keyframes type {
  0% {width: 0%;}
  100% {width: 68%;}
} */
/* .cont-type {
  text-align: center;
  position: relative;
  justify-content: center;
  width: 100%;
  height: 100%;
  display: flex;
}
.main-title.text {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #E0523C;
  animation: blink-caret 0.6s step-end infinite, type 8s steps(67, end);
  
}

@keyframes blink-caret {
  0%, 100% {border-color: transparent;}
  50% {border-color: #E0523C;}
}

@keyframes type {
  0% {width: 0%;}
  100% {width: 68%;}
} */

.type-wrap {
  text-align: left;
  margin: 0 auto;
  width: 65%;
}