section.container-fluid {
    padding: 0px;
    min-width: 1280px;
}
#body{
	overflow: auto;
}
#qr.inactive,#qr-2.inactive{
	-webkit-filter: brightness(0) invert(1);
	filter: brightness(0) invert(1);
}
/*page1*/
#page1{
	padding: 0px;
	height: 1150px;
	overflow: hidden;
}
#page1 h1{
	font-weight: 400;
}
#page1 div{
	position: relative;
}
#page1 div.heading{
	position: absolute;
	top: 190px;
	left: 50%;
	transform: translate(-50%, 0%);
	color: #FFFFFF;
}
#page1 div.heading p.app-logo{
	position: relative;
	animation-name: imgFadein;
	animation-duration: 1s;
}
#page1 div.heading h1, #page1 div.heading p:last-child{
	margin-top: 20px;
	font-size: 40px;
	position: relative;
	animation-name: headerFadein;
	animation-duration: 1s;
}
#page1 div.heading p.download{
	animation: none;
	animation: headerFadein 1s forwards;
}
#page1 #qr-large{
	border:2px #EDEEF0 solid;
	border-radius:3px;
	margin-top:9px;
	padding:5px;
	width:150px;
	position: absolute;
	top: 50px;
	right: -48px;
	background :#FFFFFF;
	display: none;
	animation: none !important;
}
#page1 #qr-large p{
	font-size: 14px;
	margin-bottom: 0px;
	animation: unset;
}
#page1 #qr-large .app-icon{
	position: absolute;
	top: 60px;
	left: 50%;
	transform: translateX(-50%);
}
#page1 #qr-large.active{
	display: block;
}
@keyframes imgFadein {
    from {top:-100px;opacity:0}
    to {top:0px;opacity:1}
}
@keyframes headerFadein {
    from {opacity:0}
    to {opacity:1}
}
/*page2*/
#page2{
	background: #FFFFFF;
	padding: 0px;
	min-width :1280px;
	position: relative;
}
#page2 h1{
	margin: 10px 0px 20px 0px;
}
#page2:not(.inactive)::before{
	content: '';
	position: absolute;
	background-image: url('../../img/product/brainastic/map.png');
	background-size: cover;
	top: 0;
	right: 0;
	bottom: 0;
    left: 0;
	width: 100%;
    height: 648px;
	animation: fade-slide-up-1 1s forwards;
}
#page2.inactive .row.control-width{
	opacity: 0;
}
#page2:not(.inactive) .row.control-width{
	opacity: 1;
	position: relative;
	animation: fade-slide-up-2 1s forwards;
}
@keyframes fade-slide-up-1 {
  0% {
    opacity: 0;
    transform: translateY(8rem);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fade-slide-up-2 {
  0% {
    opacity: 0;
    transform: translateY(4rem);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
#cat-box{
	padding: 50px 0px;
}
#cat-box h2{
	font-weight: 600;
}
#cat-box p{
	font-size: 16px;
}
#page2 img{
	width: 60px;
	margin-top: 20px;
}
/*page3*/
#info{
	position: relative;
	height :760px;
}
#info h1{
	font-weight: 400;
}
#info .carousel-caption{
	animation-name: page1fadein;
	animation-duration: 1s;
}
.carousel{
	position: relative;
	padding: 0px;
}
#indicators{
	position: absolute;
	top: 50%;
	left: 1140px;
	width: 70px;
	transform: translateY(-50%);
	z-index: 2;
}
.carousel-indicators{
    width: 10px;
    margin: 0px;
	position: static;
}
.carousel-indicators li{
	background-color: rgba(158,158,158, 0.3);
    border: 0px solid;
	display: block;
	margin-bottom: 10px;
	width: 8px;
	height: 8px;
}
.carousel-indicators .active {
	background-color: rgba(158,158,158, 1);
	margin-bottom: 10px;
	width: 10px;
	height: 10px;
}
.carousel-inner .item{
	height: 760px;
	overflow: hidden;
}
.carousel-fade .carousel-inner .item {
  //transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
  z-index: 2;
}
#page3{
	background: #F5F6F8;
}
.scroll-page{
	background: #F5F6F8;
	position: relative;
}
.scroll-page .background{
	position: absolute;
	left: 0px;
	top: 50%;
	transform: translateY(-50%);
}
.scroll-page .background img{
	position: relative;
	width: 50%;
	left: 120px;
}
.scroll-page #scroll-1.active.left{
	opacity: 1;
}
.scroll-page #scroll-1.active.left .scroll-element{
	opacity: 0;
}
.scroll-page #scroll-1.prev.right .background img:first-child{
	animation: backgroundfadein1 1s forwards;
}
.scroll-page #scroll-1.active.left .background img:first-child{
	animation: backgroundfadeout1 1s forwards;
}
.scroll-page .background img:last-child{
	position: absolute;
	top: 0px;
	left: 120px;
}
.scroll-page #scroll-1.prev.right .background img:last-child{
	animation: backgroundfadein2 1s forwards;
}
.scroll-page #scroll-1.active.left .background img:last-child{
	animation: backgroundfadeout2 1s forwards;
}
@keyframes backgroundfadein1 {
    from { opacity: 0; top: 20px}
    to   { opacity: 1; top: 0px}
}
@keyframes backgroundfadein2 {
    from { opacity: 0; top: 30px}
    to   { opacity: 1; top: 0px}
}
@keyframes backgroundfadeout1 {
    from { opacity: 1; top: 0px}
    to   { opacity: 0; top: -20px}
}
@keyframes backgroundfadeout2 {
    from { opacity: 1; top: 0px}
    to   { opacity: 0; top: -30px}
}
.scroll-page div.iphone{
	position: absolute;
	top: 230px;
    left: 40px;
}
.scroll-page div.iphone div{
	position: relative;
}
.scroll-page div.desktop{
	position: relative;
}
.scroll-page .next.left h1, .scroll-page .next.left p, .scroll-page .next.left video, .scroll-page .next.left img.ipad,
.scroll-page .prev.right h1, .scroll-page .prev.right p, .scroll-page .prev.right video, .scroll-page .prev.right img.ipad{
	animation: fadein 1s forwards;
}
.scroll-page .next.left div.iphone div, .scroll-page .next.left div.desktop,
.scroll-page .prev.right div.iphone div, .scroll-page .prev.right div.desktop{
	animation: devicefadein 1s;
}
.scroll-page #scroll-4.active.left{
	opacity: 1;
}
.scroll-page #scroll-4.active.left h1, .scroll-page #scroll-4.active.left p{
	opacity: 0;
}
.scroll-page .active.left img{
	animation: fadeout 1s forwards;
}
@keyframes fadeout{
	from {opacity:1;}
	to {opacity:0;}
}
.scroll-page .active.left .fadeout, .scroll-page .active.left .iphone div{
	animation: ipadfadeout 1s forwards;
}
@keyframes ipadfadeout{
	from {transform: translateY(0px); opacity: 1}
	to {transform: translateY(-20px); opacity: 0}
}
.scroll-element{
	width: 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes devicefadein {
    from { opacity: 0; top: 20px;}
    to   { opacity: 1; top: 0px;}
}
.fadeout{
	position: relative;
}
#page3 .col-xs-7{
	margin-left: 65px;
	position: relative;
}
#page3 .col-xs-4{
	position: absolute;
	top: 50%;
	left: 780px;
	transform: translateY(-50%);
}
/*page 4*/
#page4{
	height: 300px;
	padding: 0px;
	min-width :1280px;
	padding-bottom: 60px;
	background: #EFF0F2;
}
#page4 .control-width{
	position: relative;
}
#page4 p:last-child{
	margin-top: 40px;
}
#page4 #qr-large-2{
	border:2px #EDEEF0 solid;
	border-radius:3px;
	margin-top:9px;
	padding:5px;
	width:150px;
	position: absolute;
	top: 164px;
	right: 389px;
	background :#FFFFFF;
	display: none;
	animation: none !important;
}
#page4 #qr-large-2 p{
	font-size: 14px;
	margin-bottom: 0px;
	animation: unset;
}
#page4 #qr-large-2 .app-icon{
	position: absolute;
	top: 60px;
	left: 50%;
	transform: translateX(-50%);
}
#page4 #qr-large-2.active{
	display: block;
}
@keyframes imgFadein {
    from {top:-100px;opacity:0}
    to {top:0px;opacity:1}
}
#page6{
	background: #FFFFFF;
	padding: 30px 0px;
}