body{font-family: 'hind_siliguri_lightregular'; color: #222;}

.card-text, #about-timeline .dis-div{font-family: 'hind_siliguri_lightregular'; }
a, a:hover{color: inherit;}
.cleafix{ clear: both;}

.media-body{ line-height: 1.3;}

a.hamburger{ display: none; vertical-align: middle; position: relative; padding: 0 0 5px;}
a.hamburger:after{ content: ""; position: absolute; left: 0; width: 100%; height: 1px; bottom: 2px; background: #000;}

.vheader{ width: 100%; float: left; position: absolute; left: 0; top: 0; z-index: 100; transition: all .35s ease 0s;-moz-transition: all .35s ease 0s;-webkit-transition: all .35s ease 0s;}
.vheader .slogo{ display: none; position: absolute; left: 12%; top: 15px;}
.vheader .slogo a{ width: 100%; float: left;}
.vheader .slogo img{ height: 100%;width: 22%}
.vheader.sticky{ position: fixed;}

/* .vheader.sticky .logo{ display: none;}
.vheader.sticky .slogo{ display: block;} */

#footer .subs-div form .fotm-div{ position: relative;}
p.e{ color: #f01414 !important; margin-bottom: 0;  font-size: 12px; font-family: 'hind_siliguri_lightregular';position: absolute;}
#footer .subs-div p.e{ position: absolute; left:0;  top:100%; font-size: 11px;}
a.bg-light:focus, a.bg-light:hover, button.bg-light:focus, button.bg-light:hover { background-color: inherit !important;}
#mainBanner{ background-position: left center; height: 100vh;}
.banner-content{ left: 13%;}
.chair-add, .floor-add{ width: 30px; height: 30px; position: relative;}
#mainBanner .clock-add img, #mainBanner .frame-add img, #mainBanner .chair-add img, #mainBanner .floor-add img, #mainBanner .table-add img{ width: 100%; position: relative; z-index: 2;}
.clock-add .tooltiptext:after, .frame-add .tooltiptext:after, .chair-add .tooltiptext:after, .floor-add .tooltiptext:after, .table-add .tooltiptext:after{ display: none;}

#mainBanner img.particle{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 200%; opacity: 0; transition: all .35s ease 0s;-moz-transition: all .35s ease 0s;-webkit-transition: all .35s ease 0s; z-index: 1;}

.clock-add .tooltiptext, .frame-add .tooltiptext, .chair-add .tooltiptext, .floor-add .tooltiptext, .table-add .tooltiptext{ margin-left: 0; bottom: 0; left: calc(100% - 25px); background-color: #fff; color: #000; visibility: visible; opacity: 1; transition: all .35s ease 0s;-moz-transition: all .35s ease 0s;-webkit-transition: all .35s ease 0s;}
.chair-add:hover .tooltiptext{ max-width: 150px;  opacity: 1; overflow: hidden; z-index: 2;}
.floor-add:hover .tooltiptext{ max-width: 150px;  opacity: 1; overflow: hidden;}
.tooltiptext span{ width: 120px; float: left;}

#mainBanner .chair-add:hover img.particle{ opacity: 1;}
#mainBanner .floor-add:hover img.particle{ opacity: 1;}

#mainBanner button{transition: all .35s ease 0s;-moz-transition: all .35s ease 0s;-webkit-transition: all .35s ease 0s;}
#carbonDesign .slick-slider .slick-center button.under-line{ padding: 7px 30px !important;}
#carbonDesign .slick-slider .slick-center button.under-line:after{ left: 50%; transform: translateX(-50%); bottom: 7px; width: 56%;}
.btn{transition: all .35s ease 0s !important;-moz-transition: all .35s ease 0s !important;-webkit-transition: all .35s ease 0s !important;}
#mainBanner canvas { width: 100%;}
#mainBanner{ overflow: hidden;}
#carbonDesign { overflow: hidden; background: rgba(255,255,255,1); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 23%, rgba(241,241,241,1) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(23%, rgba(255,255,255,1)), color-stop(100%, rgba(241,241,241,1))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 23%, rgba(241,241,241,1) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 23%, rgba(241,241,241,1) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 23%, rgba(241,241,241,1) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 23%, rgba(241,241,241,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f1f1f1', GradientType=0 );}

#carbonDesign canvas { position: absolute; bottom: 20%; left: 0; z-index: 1;}
#carbonDesign canvas:first-child{ display: none;}
#carbonDesign .container{ position: relative; z-index: 2;}
#savePlanet canvas { position: absolute; left: 0; z-index: 0; background: transparent !important;}
.bgOverlayLighrGreen { float: left; width: 100%; height: 100%; position: absolute; left: 100%; top: 0; background: #fff; z-index: 4;}
.bgOverlayGray { float: left; width: 100%; height: 100%; position: absolute; left: 100%; top: 0; background: #f0f0f0; z-index: 4;}
.oh{ overflow: hidden;}
#carbonFocused .we-r-focus-bg{ background-size: cover !important; position: relative; overflow: hidden; height: 90vh; align-items: flex-end; transition: all .35s ease 0s;-moz-transition: all .35s ease 0s;-webkit-transition: all .35s ease 0s;}
#carbonFocused .media{ margin: 0; width: 100%; position: relative; z-index: 1; height: 50%; float: left; padding-bottom: 100px; transition: all .35s ease 0s;-moz-transition: all .35s ease 0s;-webkit-transition: all .35s ease 0s;}
#carbonFocused .focusOverlay{ background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

#savePlanet .card{ overflow: hidden;}

.slideItem{ width: 33.3%; float: left;}

#product__slider{ width: 95% !important;}
.product__slider-main{ margin-bottom: 0;}
.product__slider-main .slick-slide .slide { position: relative; overflow: hidden;}
.product__slider-thmb { width: calc(15% - 10px) !important;}
.product__slider-thmb .slick-slide .slide { overflow: hidden; position: relative;}

.desktop button{box-shadow: 6.344px 2.958px 4px 0px rgba(0, 0, 0, 0.22);}
.desktop a.orderNow{box-shadow: 6.344px 2.958px 4px 0px rgba(0, 0, 0, 0.22);}

#make-product{ width: 100%; float: left; background:#fff url(../images/videoBg.jpg) no-repeat left center; background-size: contain;}

.animBx{ width: 140px; height: auto; display: inline-block;     padding: 15px 10px 15px 15px; position: relative;}
.animBx span{position: relative; z-index: 1; font-size: 14px; color: #000; font-family: 'hind_siliguriregular'; letter-spacing: 0.5px; text-transform: uppercase; width: 100%; float: left;  line-height: 1.1;}
.animBx strong{ font-size: 15px; color: #000; font-family: 'hind_siliguribold'; letter-spacing: 0.5px; width: 21%;
  float: left;
  line-height: 1.1;
  /* position: absolute; */
  right: 0;
  top: 40px;
  overflow: hidden;
  display: inline-block;}

  .animBx span abbr.lower{text-transform: none!important;}
.animBx h1{ position: relative; z-index: 1; /*font-size: 102px;*/ font-size: 65px; margin: 0; padding: 0; color: #000; font-family: 'hind_siliguribold'; line-height: 0.9; letter-spacing: 0.5px; text-transform: uppercase; width: 100%; float: left;}/*---ishwar-24-2-21---*/

.animBx::before, .animBx::after { box-sizing: inherit; content: ''; position: absolute; width: 100%; height: 100%;}
.animBx::before, .animBx::after { border: 2px solid transparent; width: 0; height: 0;}
.animBx::before { top: 0; left: 0;}
.animBx::after { bottom: 0; right: 0;}
.animBx.active::before, .animBx.active::after { width: 100%; height: 100%;}
.animBx.active::before { border-top-color: #000; border-right-color: #000; transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;}
.animBx.active::after { border-bottom-color: #000; border-left-color: #000; transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;}


#product__slider_top .animBx{ position: absolute; left: 10%; }

#top-banner-sect{ height: 95vh;}

.iframee{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; display: none;}

.nav-item{ position: relative;}

.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link{ color: #000;}
.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover{ color: #000;}

.navbar-expand-md .navbar-nav .dropdown-menu li{ padding: 10px; border-bottom: 1px solid #eee; letter-spacing: 0.5px;}
.navbar-expand-md .navbar-nav .dropdown-menu li:first-child{ padding-top: 0; }
.navbar-expand-md .navbar-nav .dropdown-menu li:last-child{ padding-bottom: 0; border: none;}

.navbar{ background: #fff;}

#slid-1 .po-2 .position-relative, #slid-2 .po-2 .position-relative{box-shadow: 0px 3px 23.22px 3.78px rgba(0, 0, 0, 0.15);}

#savePlanetparticle
{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
  justify-content: center;
  align-items: center; 
}

.design-series{ overflow: hidden;}

#heaader {
  margin: 60px 0 0;
}

.btnOverlay{ width: 100%; height: 100%; border-radius: 50%; background-color: rgba(0, 0, 0, 0.6); position: absolute; left: 0; top: 0;}

a.btnNav {position: absolute;top: 100%;font-size: 30px;line-height: 1.1;}
a.btnNav.btnPrevArrow {top: auto;bottom: 100%;}

a.btnNav1{position: absolute;top: 100%;font-size: 30px;line-height: 1.1;}
a.btnNav1.btnPrevArrow1 {top: auto;bottom: 100%;}

.success-message{ display: none; font-size: 14px; color: #6ea922; padding: 15px 0 0; width: 100%; float: left;  font-family: 'hind_siliguribold';  letter-spacing: 0.5px;}
.error-message{ display: none; font-size: 14px; color: #b7212f; padding: 15px 0 0; width: 100%; float: left;  font-family: 'hind_siliguribold';  letter-spacing: 0.5px;}

.multiple-items button{position: relative; overflow: hidden;}
.multiple-items button:before{position: absolute; left: 0; top: 0; width: 0; height: 100%; background: #000; content: "";transition: all .45s ease 0s;}
.multiple-items button:hover:before{width: 100%;}
.multiple-items button:hover span{color: #fff;}
.multiple-items button span{ position: relative;}

#heaader{ position: relative;}
#heaader:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 70px; background: url(../images/mobile-curve.png) no-repeat center top; display: none;}


@media only screen and (min-width:1601px) and (max-width:1750px)  {

  #savePlanet canvas {
  
  }
    }
  
    @media only screen and (min-width:1751px)   {
  
  #savePlanet canvas {
      
  }
    }
  
  
  @media only screen and (min-width:1201px) and (max-width:1600px)  {
    #team #founder-div .wrap-1{ width: 85%; margin: 0px auto;}
  #savePlanet canvas {
      
  }
    }
  
  @media only screen and (min-width:768px) and (max-width:1200px)  {
    #savePlanet canvas {
      
  }
  
  }
  
  @media only screen and (min-width:577px) and (max-width:767px)  {
  #savePlanet canvas {
      
  }
  
  }
  
  
  @media only screen  and  (max-width:340px)  {
  
  
  #savePlanet .card {
      /* width: 320px; */
      /* height: 320px; */
      left: -33% !important
  }
  
  }
  
  @media only screen and  (min-width:341px)  and  (max-width:380px)  {
  
  
  #savePlanet .card {
      /* width: 320px; */
      /* height: 320px; */
      left: -22% !important
  }
  
  }
  
  @media only screen and  (min-width:381px)  and  (max-width:440px)  {
  
  
  #savePlanet .card {
      /* width: 320px; */
      /* height: 320px; */
      left: -15% !important
  }
  
  }
  
  @media only screen and  (min-width:441px)  and  (max-width:500px)  {
  
  #savePlanet .card {
      /* width: 320px; */
      /* height: 320px; */
      left: -4% !important
  }
  
  }

  @media only screen and  (max-width:1400px)  {
    #mainBanner .banner-content p{ font-size: 20px;}
    #mainBanner .banner-content h1{ font-size: 52px;}
    #mainBanner button span.img-div{ width: 35px; height: 35px;}
    #mainBanner button:after{ left: 50px; bottom: 7px;}
    #carbonDesign h5{ font-size: 16px;}
    #carbonDesign .carbon-design-subtitle.inView:before, #carbonDesign .carbon-design-subtitle.inView:after{ width: 60px;  }
    #carbonDesign h3{ font-size: 24px;}
    #carbonDesign p{ font-size: 15px; width: 100%; margin: 0px auto;}
    .slide_two{ width: 160px; height: 160px;}
    .slide_one{ width: 75%;}
    #carbonDesign h3.protitle3{ font-size: 18px;}
    .protitle{ font-size: 24px;}

    #carbonFocused .w-25{ width: 90px !important;}
    .h5, h5 { font-size: 1.10rem;}
    #carbonFocused .media span{ font-size: 14px;}

    

    #team #founder-div .up-text img{ width: 70%;}
    #team #founder-div .wrap-2{ margin: 65px 0 0 20%;}
    #team #founder-div .wrap-2 .founder-text{ padding: 30px 30px 30px 17%;}
    #team #team-div2 .img-dis-div{ width: 80%;}
    #team #team-div .head-text h2{ margin-bottom: 50px;}
    #team #team-div2 .head-text h2{ margin-bottom: 50px;}
    #team #team-div .img-dis-div .box{ width: 25%;}

    .navbar-dark .navbar-nav .nav-link{ font-size: 14px;}

    .round-div{ width: 400px; height: 400px;}


    .banner-bg .text-div .imgInfo ul.child li.childList p.sub {font-size: 11px;}/*---ishwar-24-2-21---*/
  }

  @media only screen and  (max-width:1300px)  {
    #slid-1 .series1 .bg .bg-div-text{ padding-left: 5%;}
    #slid-2 .series2 .bg .bg-div-text{ padding-right: 5%;}
    #slid-1 .wraper{ margin: 0 0 0 50px;}
    #slid-2 .wraper{ margin: 0 60px 0 0;}

    #slid-2 .tabContainer-new .buttonContainer-new button span:before{ width: 70px;}
    .save-planet-content h2 { font-size: 40px }
    .save-planet-content p { font-size: 26px; padding-bottom: 0px !important; padding-top: 0px !important; margin: 0 !important; }
    .save-planet-content button { margin: 15px 0 0 0 !important; }

    #slid-1 .po-div-img img { max-width: 100%;  margin: 0 0 0 25px;}

    #slid-1 .po-1{width: 170px;}
    #slid-1 .po-2{width: 170px;}

    #slid-2 .po-1{ width: 170px;}
    #slid-2 .po-2{ width: 170px;}

    .product__slider-thmb_top{ background-size: 167% auto; background-position: center right -126px;}
    #product__slider_top .animBx{ left: 5%;}

    .about-bg-text-div .big-text{ margin-bottom: 10px;}

    .about-bg-text-div p {letter-spacing: 0.5px; line-height: 1.3; }

    .Architectural-Intervention .background {background-size: 90% auto; background-position: bottom left 81%;}

    .vheader .slogo {left: 12%; top: 14px;}
    .vheader .slogo img {width: 23%;}


  }

  @media only screen and  (max-width:1200px)  {
  .round-div{ width: 350px; height: 350px;}
  }

 
  @media only screen and  (max-width:1024px)  {
    #make-product .container-modi-left p{ width: 100%;}
    #carbonFocused .media{ height: auto;}

    #carbonDesign .slideItem{ width: 25%;}
    #carbonDesign .slideItem.slick-center{ width: 50%;}

    #about-timeline .slider:before{ display: none;}
  }

  @media only screen and  (max-width:768px)  {
    #make-product{ background: none;}
    #slid-1 .tabContainer .buttonContainer button span:before, #slid-1 .tabContainer .buttonContainer button.activee span:after, #slid-2 .tabContainer-new .buttonContainer-new button span:before, #slid-2 .tabContainer-new .buttonContainer-new button span:after{ display: none;}

    #carbonFocused .we-r-focus-bg{ height: auto;}

    #product__slider .product__slider-thmb { display: block !important; width: 100% !important;  float: left;}
    .product__slider-thmb .slick-slide div{ width: 100%; float: left;}
    #product__slider{ flex-direction: column;}
    a.hamburger{ display: inline-block;}

    .about-head { margin: 10% 3% 3% 3%; }

    .about-what-we-do .card{ border-radius: 10px; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 46px 0px rgba(0, 0, 0, 0.11); margin: 15px 0; overflow: hidden;}

    #about-timeline .slick-center .cl .dis-div .discpri-div2{ left: 45px;}
    #about-timeline .slick-center .cl .dis-div .discpri-div3{ left: 80px;}

    #team #founder-div .wrap-2{ margin: 0px auto;}
    #team #founder-div .wrap-2 .founder-text{ padding: 15px;}
    #team #founder-div .wrap-2 .founder-text .down-text h2{ margin-bottom: 20px;}

    #team #team-div .img-dis-div .box{ width: 80%;}

    #team #team-div .img-dis-div .box .img-div h3, #team #team-div .img-dis-div .box .img-div h4{ display: block;}
    #team #team-div .img-dis-div .box .text-div h3, #team #team-div .img-dis-div .box .text-div h4{ display: none;}

    #team #team-div .img-dis-div .box .text-div{ padding: 0 10px 0;}

    #team #team-div{ margin-top: 40px;}
    #team #team-div .head-text h2{ margin-bottom: 40px;}
    #team #team-div2{ margin: 20px 0;}

    #team #team-div2 .head-text h2{ margin-bottom: 40px;}

    .vheader .slogo{ left: 5%; top: 18px;}
    .navbar.navbar-dark { padding: 1rem;}

    .navbar-expand-md .navbar-nav .dropdown-menu{ position: static !important; margin: 0 auto !important; border: none; padding: 0; background: #f6f6f6; padding: 10px 0;}
    .navbar-expand-md .navbar-nav .dropdown-menu li:last-child{ display: block !important; margin-top: 0 !important;}

    .navbar-light { padding: 0;}

    #carbonFocused .media{ height: auto;}

    #return-to-top{ display: block;}

    a.btnNav.btnPrevArrow,a.btnNav1.btnPrevArrow1 { top: auto;  bottom: auto;  left: -40px; }
    a.btnNav.btnNextArrow,a.btnNav1.btnNextArrow1 { top: auto;  bottom: auto;  right: -40px; }
    a.btnNav .fa-chevron-up:before, a.btnNav1 .fa-chevron-up:before{content: "\f053";}
    a.btnNav .fa-chevron-down:before, a.btnNav1 .fa-chevron-down:before{content: "\f054";}

    #mainBanner{ height: 80vh;}
    .media-body { line-height: 1.1;}

    #blog #blog-div .wrap{ margin-bottom: 50px;}

    .vlog-header-div{ display: none;}

    #heaader:after { display: block;}
    .head-text-div2{ display: none;}
  }
  
  @media only screen and  (max-width:800px)  {
  .logo {left: 6%; width: 30%; right: 71%;top: 20px;}
  .vheader .slogo {left: 6%; top: 20px; width: 38%;}
  .vheader .slogo img {
    width: 100%;
}
  }



  @media only screen and  (max-width:640px)  {
    #mainBanner{background-image: url(../images/index/banner-bg-v2_mobile.jpg);}
    .banner-content{ left: 5%;}
    #mainBanner .banner-content p{ font-size: 16px;}
    #mainBanner .banner-content h1{ font-size: 42px;}

    #carbonDesign { padding: 1em 0; }
    #carbonDesign p{ width: 100%;}
    #carbonDesign h5{ margin-bottom: 20px;}
    #carbonFocused{padding: 2em 5% 11% 5%;}
    #carbonFocused .head-text-div h2{ padding: 15px 0 30px 0;}
    .vheader .slogo img {width: 100%;}
  }
  
  @media only screen and  (max-width:576px)  {
    #savePlanet {min-height: 600px;}
    #footer .subs-div{ padding: 30px 15px 60px;}
    #enquirePopup #inquery .main-title-text{ font-size: 22px; margin-bottom: 15px;}
    .navbar .icon{ width: 60px;}
    #navbarSupportedContent ul li:last-child{ display: none;}

    #product__slider_top{ height: 75%;}
    #product-disc #top-banner-sect .grid-wraper .box1{ align-items: flex-start;}
    #product-disc #top-banner-sect .grid-wraper .box2{ padding: 0;}

    .animBx{ width: 100px;}
    .animBx span{ font-size: 12px;}
    .animBx h1{ font-size: 70px;}

    .banner-bg{ height: calc(100vh - 95px);}

    #slid-1 .wraper{ margin: 0;}

    #slid-1 .po-1, #slid-2 .po-1 { width: 130px;  }
    #slid-1 .po-2, #slid-2 .po-2 { width: 130px;  }

    #slid-1 .series1 .bg .bg-div-slider .slider-img-disk, #slid-2 .series2 .bg .bg-div-slider .slider-img-disk{ margin-top: 0; margin-bottom: 0;}

    #slid-1 .po-in-div, #slid-2 .po-in-div{ align-items: flex-start; justify-content: center;}

    #slid-1 .po-div-img, #slid-2 .po-div-img {  margin-left: 25px;  margin-bottom: 0;  margin-top: 50px; }

    #slid-1 .po-in-div, #slid-2 .po-in-div {  height: 350px;  margin-top: 50px;}


    #slid-2 .wraper { margin: 0; }

    #slid-2 .tabContainer-new .buttonContainer-new{ padding: 40px 0;}

    #product-speci ul.ul-color li.li-color-inner{ margin-right: 5px;}

    #about .head-text-div2, .head-text-div2{ display: block; bottom: 15%;}

    #heaader{ margin: 50px 0 0;}

    #blog #blog-div .wrap { grid-template-columns: 1fr;}

    .round-div {  width: 280px; height: 280px; }

    #carbonDesign .ccproinner .slide_two{ width: 80px; height: 80px;}
    .slide_one{ width: 90%;}
    #carbonDesign h3.protitle3{ font-size: 12px;}

    #slid-1 .po-1, #slid-2 .po-1{margin-right: 15%;}

    #footer .subs-div .text-div{ align-items: flex-start;}
    #footer .subs-div img{ width: 40px; padding-bottom: 0; padding-top: 20px;}
    #footer .subs-div h3{ font-size: 16px;}
    #footer .subs-div p{ font-size: 14px;}

    .cl{ min-height: 500px;}
    .about-wearein .card-body {  padding: 0px 1.5rem 2.5rem; }
    .about-wearein .card-img-top{ margin: 0 1rem 1rem;}

    #blog-inner #blog-inner-div2 h3{ font-size: 1.4rem;}
  }

  @media only screen and  (max-width:450px)  {
    .round-div { width: 230px; height: 230px;}
    a.hamburger{ font-size: 15px;}
    #slid-1 .tabContainer .buttonContainer {height: 210px !important;}
    .animBx strong {font-size: 12px;top: 33px;}
    #carbonDesign .slideItem.slick-center{ width: 100% !important;}/*--edit by ishwar---*/
    #about .head-text-div2, .head-text-div2 { bottom: 28%;}/*--edit by ishwar---*/
  }
  
  @media only screen and  (max-width:320px)  {
    #product-speci ul.ul-color li.li-color-inner {margin-right: 3px;}
    #product-speci ul.ul-color li.li-color-inner:after {height: 15px;  width: 15px;}
    .about-content .about-text-bold h4 {font-size: 12px;}

  }

  

  
  #bannercanvas {
     -webkit-animation: slide-right 12s ease-in 2s both;
            animation: slide-right 12s ease-in 2s both;
  }
  
  
  
  @-webkit-keyframes slide-right {
    0% {
              margin-left: -70%;
    }
    100% {
              margin-left: -50%;
    }
  }
  @keyframes slide-right {
    0% {
              margin-left: -70%;
    }
    100% {
              margin-left: -50%;
    }
  }