@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
*{padding: 0;margin: 0;}
html,body{height: 100%;}
body{font-family: 'Open Sans', sans-serif;}
.wrapper{height: 100%;
    background: url(../Images/soon-bg.jpg) no-repeat fixed;
    background-position: 50%;
    background-size: cover;
    position: fixed;
    top: 0;
    z-index: 10;width: 100%;padding: 120px 0}

.soon-logo{margin: 0 auto 50px auto;}
.soon-logo img{margin:  0 auto}
.download-store {text-align: center}
.download-store ul.list-inline li{margin-right: 15px;margin-left: 15px}
.body-text .text-first{    color: #fff;    font-weight: 400;    font-size: 18px;    margin-top: 75px;    width: 100%;    line-height: 24px;}
.body-text .second-text{color: #fff;font-weight: 400;font-size: 16px;margin-top: 30px;}
.body-text .email{color: #000;font-weight: 600;font-size: 16px;}
.body-text .stay-tuned{font-size: 62px;font-weight: 700;color: #fff;margin: 40px 0}
/*Animation*/
.walking {
    overflow: hidden;
 position: relative;
}
.walking:after{
  position: absolute;
  content: '';
  width: 100%;height: 1px;
  background: #000;
  left: 0;
    bottom: 31px;
}
#walk-container {
    display: inline-block;
    position: relative;
    width: 20%;
    padding-bottom: 30%; 
    vertical-align: middle; 
}
#walk-container > div {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../Images/walk-sequence.svg');
    background-repeat: no-repeat;
}
    
    #walk-container > div {
    background-size: 800%;
}
    @keyframes walkanim {
  to { background-position: 100% 0; }
}
    
    #walk-container > div {
    animation: walkanim 3s infinite;
      transition: ease;
}
    
    #walk-container > div {
    animation: walkanim 2s infinite steps(7);
      transition: ease;
}
    
    @keyframes stroll {
  from { transform: translateX(-100%); }
  to { transform: translateX(500%); }
}
#walk-container {
  animation: stroll 60s linear infinite;
  transition: ease;
}

.carousel
{
    min-height: 427px;
}

@media screen and (max-width:1200px){
  .walking:after{
    bottom: 24px;
  }

    .carousel
    {
        min-height: 440px;
    }
    .body-text .stay-tuned
    {
        font-size: 42px;
    }
}

@media screen and (max-width:992px){
  .wrapper{padding: 30px 0}
  .soon-logo img{
        max-width: 160px;
  }
  .walking:after{
    bottom: 42px;
  }
  .body-text .text-first{
    width: 100%;
    margin-top: 30px;
    height: 48px;
  }
  .body-text .stay-tuned{
    margin: 20px 0;
  }
  .wrapper{overflow-x: auto}
    .carousel
    {
        min-height: 280px;
    }
}

@media screen and (max-width:767px){
  .body-text .text-first{
    width: 100%;
    margin-top: 25px;
    height: auto
  }
  .body-text .stay-tuned{font-size: 26px;font-weight: 700;}
  .walking:after{
    bottom: 24px;
  }
  .soon-logo{margin: 0 auto 25px auto;}
  .wrapper{overflow-x: auto}

    .carousel
    {
        min-height: 450px;
    }
}