html, body {

}

body {
  margin: 0;
  padding: 0;
  font-family: HelveticaNeue, sans-serif;
}

#mainWrapper{
  height: 100%;
}

#contWrapper{
  min-height: 100%;
  position: relative;
}

.section{
  overflow: hidden;
}
.section .secContMain{
  height: 95vh;
  width: 100%;
  margin: 0 auto;
}




.section1 .secContMain{
  background: url("../images/back.jpg") no-repeat center;
  background-size: cover;
  /*height: 800px;*/
}
.section .secContMain .secCont{
  margin: 0 auto;
  width: 1500px;
  height: 100%;
  box-sizing: border-box;
  position: relative;
}


#homePage{
  font-family: helveticaneuethin;
}

.secCont .description{
  position: relative;
}
.secCont .description .descTitle{
  font-size: 40px;
}
.secCont .description .desc{
  line-height: 22px;
}
.header{
  position: fixed;
  background: rgba(255, 255, 255, 0.2);
  padding: 20px 0;
  width: 100%;

  box-sizing: border-box;
  color: #ffffff;
  font-family: HelveticaNeueBold;
  font-size: 18px;
  z-index: 100;
}
.header .header-content{
  width: 1500px;
  margin: 0 auto;
  /*display: flex;*/
  /*justify-content: space-between;*/
  /*align-items: center;*/
}
.header .logo{
  font-family: metaBoldItalic;
  /*color: #DA4444;*/
  font-size: 30px;
}
.header .note{
  /*letter-spacing: 5px;*/
  /*color: #DA4444;*/
}


.changiCab{
  position: relative;
  height: 100%;
  width: 750px;
  margin: 0 auto;
}
.changiCab .app{
  width: 39%;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translate3d(0,120%,0);
  opacity: 0;
}
.changiCab .app img{
  width: 100%;
  height: auto;
  display: block;
}
.changiCab .description{
  width: 52%;
  position: absolute;
  right: 0;
  bottom: 26%;
  color: #ffffff;
  transform: translate3d(0,40px,0);
  opacity: 0;
}
.changiCab .description .descTitle{
  margin-bottom: 15px;
}
.changiCab.onView .app{
  transform: translate3d(0,0,0);
  opacity: 1;
  transition: transform 400ms;
}
.changiCab.onView .description {
  transform: translate3d(0,0,0);
  opacity: 1;
  transition: all 400ms;
  transition-delay: 300ms;
}




.viewCase{
  background: #ffffff;
  color: #6f728c;
  font-size: 17px;
  line-height: 20px;
  padding: 15px 0;
  text-align: center;
  width: 200px;
}
.viewCase.red{
  background: #d31629;
  color: #ffffff;
}

.section2 {

}
.section2 .secCont{
  padding-top: 110px;
}
.section2 .description{
  transform: translate3d(140px,40px,0);
  opacity: 0;
}
.section2 .changiLap{
  width: 60%;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate3d(0,120%,0);
  opacity: 0;
}
.section2 .changiLap img{
  width: 100%;
  height: auto;
  display: block;
}
.section2 .changiphone{
  bottom: 0;
  position: absolute;
  right: 49%;
  width: 19.2%;
  transform: translate3d(0,120%,0);
  opacity: 0;
}
.section2 .changiphone img{
  width: 100%;
  height: auto;
  display: block;
}

.section2.onView .description{
  transform: translate3d(140px,0,0);
  opacity: 1;
  transition: all 400ms;
  transition-delay: 100ms;
}
.section2.onView .changiLap{
  opacity: 1;
  transform: translate3d(0,0,0);
  transition: transform 400ms;
  transition-delay: 400ms;
}
.section2.onView .changiphone{
  opacity: 1;
  transform: translate3d(0,0,0);
  transition: transform 400ms;
  transition-delay: 700ms;
}



.section3{

}
.section3 .secCont{
  padding-top: 110px;
}
.section3 .description{
  text-align: center;
  transform: translate3d(0,40px,0);
  opacity: 0;
}
.section3 .description .viewCase{
  display: inline-block;
}
.section3 .necAllApps{
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 56%;
  transform: translate3d(0,120%,0);
  opacity: 0;
  /*z-index: 5;*/
}
.section3 .necAllApps img{
  width: 100%;
  height: auto;
  display: block;
}
.section3 .necOverview{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 47%;
  transform: translate3d(0,120%,0);
  opacity: 0;
  /*z-index: 10;*/
}
.section3 .necOverview img{
  width: 100%;
  height: auto;
  display: block;
}

.section3.onView .description{
  transform: translate3d(0,0,0);
  opacity: 1;
  transition: all 400ms;
  transition-delay: 100ms;
}
.section3.onView .necAllApps{
  opacity: 1;
  transform: translate3d(0,0,0);
  transition: transform 400ms;
  transition-delay: 400ms;
}
.section3.onView .necOverview{
  opacity: 1;
  transform: translate3d(0,0,0);
  transition: transform 400ms;
  transition-delay: 700ms;
}






.section4{
  color: #ffffff;
}
.section4 .watchDetails{
  position: absolute;
  top: 50%;
  transform: translate(0px, -50%);
  width: 100%;
}
.section4 .description{
  margin-bottom: 70px;
  text-align: center;
  transform: translate3d(0,40px,0);
  opacity: 0;
}
.section4 .description .viewCase{
  display: inline-block;
}
.section4 .watchImages{
    text-align: center;
}
.section4 .watchImages .time{
  width: 15%;
  position: relative;
  transform: scale(0);
  opacity: 0;
}
.section4 .watchImages .watch{
  width: 17%;
  margin: 0 40px;
  position: relative;
  transform: rotate3d(0,1,0,90deg);
  opacity: 0;
}
.section4 .watchImages .phone{
  width: 11%;
  position: relative;
  transform: translate3d(0,60px,0);
  opacity: 0;
}
.section4 .watchImages .time img,
.section4 .watchImages .watch img,
.section4 .watchImages .phone img{
  width: 100%;
  height: auto;
  display: block;
}
.section4.onView .description{
  transform: translate3d(0,0,0);
  opacity: 1;
  transition: all 400ms;
  transition-delay: 100ms;
}


.section4.onView .description{
  transform: translate3d(0,0,0);
  opacity: 1;
  transition: all 400ms;
  transition-delay: 100ms;
}
.section4.onView .watchImages .watch{
  opacity: 1;
  transform: rotate3d(0,1,0,0deg);
  transition: transform 400ms;
  transition-delay: 400ms;
}
.section4.onView .watchImages .time{
  opacity: 1;
  transform: scale(1);
  transition: transform 400ms;
  transition-delay: 700ms;
}
.section4.onView .watchImages .phone{
  opacity: 1;
  transform: translate3d(0,0,0);
  transition: all 400ms;
  transition-delay: 1000ms;
}




.section5{
  color: #ffffff;
}
.section5 .secCont{
  padding:220px 200px 0 200px;
}
.section5 .description{
  text-align: right;
  transform: translate3d(0,40px,0);
  opacity: 0;
}
.section5 .description .viewCase{
  display: inline-block;
}
.section5 .intel1,
.section5 .intel2,
.section5 .intel3{
  bottom: 0;
  left: 14%;
  position: absolute;
  width: 20%;
  z-index: 20;
  transform: translate3d(0,120%,0);
  opacity: 0;
}
.section5 .intel2{
  left: 28%;
  z-index: 10;
}
.section5 .intel3{
  left: 51%;
}
.section5 .intel1 img,
.section5 .intel2 img,
.section5 .intel3 img{
  width: 100%;
  height: auto;
  display: block;
}

.section5.onView .description{
  transform: translate3d(0,0,0);
  opacity: 1;
  transition: all 400ms;
  transition-delay: 100ms;
}
.section5.onView .intel3{
  opacity: 1;
  transform: translate3d(0,0,0);
  transition: transform 400ms;
  transition-delay: 400ms;
}
.section5.onView .intel2{
  opacity: 1;
  transform: translate3d(0,0,0);
  transition: transform 400ms;
  transition-delay: 600ms;
}
.section5.onView .intel1{
  opacity: 1;
  transform: translate3d(0,0,0);
  transition: transform 400ms;
  transition-delay: 900ms;
}





.section6 .secContMain{
  height: 400px;
  padding-top: 150px;
}
.address{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: #ffffff;
  width: 1200px;
  margin: 0 auto;
  line-height: 20px;
}