/* Reset */
*{margin:0;padding:0;}

/* Slider */
#slider{
	width: 100%;
	height: 40vw;
	position: relative;
	overflow: hidden;
	z-index: 25;
}
@keyframes load{
  from{left:-100%;}
  to{left:0;}
}
.slides{
	width: 400%;
	height: 100%;
	position: relative;
	-webkit-animation: slide 30s infinite;
	-moz-animation: slide 30s infinite;
	animation: slide 30s infinite;
	overflow: hidden;
}
.slider{
  width:25%;
  height:100%;
  float:left;
  position:relative;
  z-index:1;
  overflow:hidden;
}
.slide img{
  width:100%;
  height:100%;
  overflow: hidden;
}
.slide img{
  width:100%;
  height:100%;
  overflow: hidden;
}
.image{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.image img{
  width:100%;
  height:100%;
  overflow: hidden;
}




/* Contents */
.content1{
  width:100%;
  height:100%;
  position:absolute;
  overflow:hidden;
}
.content-img1{
	width: 100%;
	float: left;
	position: relative;
	-webkit-animation: content-a 7.5s infinite;
	-moz-animation: content-a 7.5s infinite;
	animation: content-a 7.5s infinite;
	height: 100%;
	z-index: 0;
	background-image: url(../images/cleaning-woman1.png);
	background-position: 31% bottom;
	background-size: 43% auto;
	background-repeat: no-repeat;
	bottom: 0%;
}
@-webkit-keyframes content-a{
  0%{left:-100%;}
  10%{left:-9%;}
  15%{left:-10%;}
  30%{left:-10%;}
  40%{left:-10%;}
  50%{left:-10%;}
  60%{left:-10%;}
  70%{left:-100%;}
  80%{left:-100%;}
  90%{left:-100%;}
  100%{left:-100%;}
}
@-moz-keyframes content-a{
  0%{left:-100%;}
  10%{left:-9%;}
  15%{left:-10%;}
  30%{left:-10%;}
  40%{left:-10%;}
  50%{left:-10%;}
  60%{left:-10%;}
  70%{left:-100%;}
  80%{left:-100%;}
  90%{left:-100%;}
  100%{left:-100%;}
}
@keyframes content-a{
  0%{left:-100%;}
  10%{left:-9%;}
  15%{left:-10%;}
  30%{left:-10%;}
  40%{left:-10%;}
  50%{left:-10%;}
  60%{left:-10%;}
  70%{left:-10%;}
  80%{left:-100%;}
  90%{left:-100%;}
  100%{left:-100%;}
}

.content1-1{
	width: 55%;
	height: 70%;
	position: absolute;
	overflow: hidden;
	right: -7%;
	top: 25%;
}
.content-img1-1{
	width: 100%;
	float: right;
	position: absolute;
	-webkit-animation: content-a1 7.5s infinite;
	-moz-animation: content-a1 7.5s infinite;
	animation: content-a1 7.5s infinite;
	height: 75%;
	top: 15%;
	z-index: 0;
	background-image: url(../images/img1-wording.png);
	background-position: left top;
	background-repeat: no-repeat;
	background-size: 70% auto;
}
@-webkit-keyframes content-a1{
  0%{left:150%;}
  10%{left:2%;}
  15%{left:2%;}
  30%{left:2%;}
  40%{left:2%;}
  50%{left:2%;}
  60%{left:2%;}
  70%{left:2%;}
  80%{left:150%;}
  90%{left:150%;}
  100%{left:150%;}
}
@-moz-keyframes content-a1{
  0%{left:150%;}
  10%{left:2%;}
  15%{left:2%;}
  30%{left:2%;}
  40%{left:2%;}
  50%{left:2%;}
  60%{left:2%;}
  70%{left:2%;}
  80%{left:150%;}
  90%{left:150%;}
  100%{left:150%;}
}
@keyframes content-a1{
  0%{left:150%;}
  10%{left:2%;}
  15%{left:2%;}
  30%{left:2%;}
  40%{left:2%;}
  50%{left:2%;}
  60%{left:2%;}
  70%{left:2%;}
  80%{left:150%;}
  90%{left:150%;}
  100%{left:150%;}
}

.content-button1-1{
	width: 9%;
	height: 7%;
	position: absolute;
	overflow: hidden;
	right: 44%;
	top: 65%;
	border: medium solid rgba(43,169,221,1.00);
	border-radius: 2vw;
	color: #0396b7;
	font-family: open-sans;
	font-style: normal;
	font-weight: 700;
	font-size: 0.9vw;
	text-align: center;
	line-height: 2.6vw;
	cursor: pointer;
	-webkit-animation: content-a21 7.5s infinite;
	-moz-animation: content-a2 7.5s infinite;
	animation: content-a2 7.5s infinite;
	visibility: hidden;
}
.content-button1-1:hover{
	border: medium solid #0396b7;
	border-radius: 2vw;
	color: #FFFFFF;
	font-family: open-sans;
	font-style: normal;
	font-weight: 700;
	font-size: 0.9vw;
	text-align: center;
	line-height: 2.6vw;
	background-color: #0396b7;
	cursor: pointer;
}
@-webkit-keyframes content-a2{
  0%{
	  opacity: 0;
	  margin-top:60px;
	}
  10%{
	  opacity: 0;
	  margin-top:60px;
	}
  15%{
	  opacity: 1;
	  margin-top:-0px;
	}
  30%{
	  opacity: 1;
	  margin-top:-0px;
	}
  40%{
	  opacity: 1;
	  margin-top:-0px;
	}
  50%{
	  opacity: 1;
	  margin-top:-0px;
	}
  60%{
	  opacity: 1;
	  margin-top:-0px;
	}
  70%{
	  opacity: 0;
	  margin-top:-0px;
	}
  80%{
	  opacity: 0;
	  margin-top:-0px;
	}
	
  90%{
	  opacity: 0;
	  margin-top:-0px;
	}
  100%{
	  opacity: 0;
	  margin-top:60px;
	}
}
@-moz-keyframes content-a2{
  0%{
	  opacity: 0;
	  margin-top:60px;
	}
  10%{
	  opacity: 0;
	  margin-top:60px;
	}
  15%{
	  opacity: 1;
	  margin-top:-0px;
	}
  30%{
	  opacity: 1;
	  margin-top:-0px;
	}
  40%{
	  opacity: 1;
	  margin-top:-0px;
	}
  50%{
	  opacity: 1;
	  margin-top:-0px;
	}
  60%{
	  opacity: 1;
	  margin-top:-0px;
	}
  70%{
	  opacity: 0;
	  margin-top:-0px;
	}
  80%{
	  opacity: 0;
	  margin-top:-0px;
	}
	
  90%{
	  opacity: 0;
	  margin-top:-0px;
	}
  100%{
	  opacity: 0;
	  margin-top:60px;
	}
}
@keyframes content-a2{
  0%{
	  opacity: 0;
	  margin-top:60px;
	}
  10%{
	  opacity: 0;
	  margin-top:60px;
	}
  15%{
	  opacity: 1;
	  margin-top:-0px;
	}
  30%{
	  opacity: 1;
	  margin-top:-0px;
	}
  40%{
	  opacity: 1;
	  margin-top:-0px;
	}
  50%{
	  opacity: 1;
	  margin-top:-0px;
	}
  60%{
	  opacity: 1;
	  margin-top:-0px;
	}
  70%{
	  opacity: 0;
	  margin-top:-0px;
	}
  80%{
	  opacity: 0;
	  margin-top:-0px;
	}
	
  90%{
	  opacity: 0;
	  margin-top:-0px;
	}
  100%{
	  opacity: 0;
	  margin-top:60px;
	}
}













.content2{
  width:100%;
  height:100%;
  position:absolute;
  overflow:hidden;
}
.content-img2{
	width: 100%;
	float: left;
	position: relative;
	-webkit-animation: content-b 7.5s infinite;
	-moz-animation: content-b 7.5s infinite;
	animation: content-b 7.5s infinite;
	height: 100%;
	z-index: 0;
	background-image: url(../images/man-cleaning.png);
	background-position: 22% bottom;
	background-size: 35% auto;
	background-repeat: no-repeat;
	bottom: 0%;
}
@-webkit-keyframes content-b{
  0%{left:-100%;}
  10%{left:-9%;}
  15%{left:-10%;}
  30%{left:-10%;}
  40%{left:-10%;}
  50%{left:-10%;}
  60%{left:-10%;}
  70%{left:-100%;}
  80%{left:-100%;}
  90%{left:-100%;}
  100%{left:-100%;}
}
@-moz-keyframes content-b{
  0%{left:-100%;}
  10%{left:-9%;}
  15%{left:-10%;}
  30%{left:-10%;}
  40%{left:-10%;}
  50%{left:-10%;}
  60%{left:-10%;}
  70%{left:-100%;}
  80%{left:-100%;}
  90%{left:-100%;}
  100%{left:-100%;}
}
@keyframes content-b{
  0%{left:-100%;}
  10%{left:-0%;}
  15%{left:-1%;}
  30%{left:-1%;}
  40%{left:-1%;}
  50%{left:-1%;}
  60%{left:-1%;}
  70%{left:-1%;}
  80%{left:-1%;}
  90%{left:-100%;}
  100%{left:-100%;}
}
.content2-1{
	width: 55%;
	height: 70%;
	position: absolute;
	overflow: hidden;
	right: -7%;
	top: 25%;
}
.content-img2-1{
	width: 100%;
	float: right;
	position: absolute;
	-webkit-animation: content-b1 7.5s infinite;
	-moz-animation: content-b1 7.5s infinite;
	animation: content-b1 7.5s infinite;
	height: 75%;
	top: 15%;
	z-index: 0;
	background-image: url(../images/img2-wording.png);
	background-position: left top;
	background-size: 63% auto;
	background-repeat: no-repeat;
}
@-webkit-keyframes content-b1{
  0%{left:150%;}
  10%{left:2%;}
  15%{left:2%;}
  30%{left:2%;}
  40%{left:2%;}
  50%{left:2%;}
  60%{left:2%;}
  70%{left:2%;}
  80%{left:2%;}
  90%{left:150%;}
  100%{left:150%;}
}
@-moz-keyframes content-b1{
  0%{left:150%;}
  10%{left:2%;}
  15%{left:2%;}
  30%{left:2%;}
  40%{left:2%;}
  50%{left:2%;}
  60%{left:2%;}
  70%{left:2%;}
  80%{left:2%;}
  90%{left:150%;}
  100%{left:150%;}
}
@keyframes content-b1{
  0%{left:150%;}
  10%{left:2%;}
  15%{left:2%;}
  30%{left:2%;}
  40%{left:2%;}
  50%{left:2%;}
  60%{left:2%;}
  70%{left:2%;}
  80%{left:2%;}
  90%{left:150%;}
  100%{left:150%;}
}

.content-button2-1{
	width: 9%;
	height: 7%;
	position: absolute;
	overflow: hidden;
	right: 44%;
	top: 65%;
	border: medium solid rgba(43,169,221,1.00);
	border-radius: 2vw;
	color: #0396b7;
	font-family: open-sans;
	font-style: normal;
	font-weight: 700;
	font-size: 0.9vw;
	text-align: center;
	line-height: 2.6vw;
	cursor: pointer;
	-webkit-animation: content-b2 7.5s infinite;
	-moz-animation: content-b2 7.5s infinite;
	animation: content-b2 7.5s infinite;
	visibility: hidden;
}
.content-button2-1:hover{
	border: medium solid #0396b7;
	border-radius: 2vw;
	color: #FFFFFF;
	font-family: open-sans;
	font-style: normal;
	font-weight: 700;
	font-size: 0.9vw;
	text-align: center;
	line-height: 2.6vw;
	background-color: #0396b7;
	cursor: pointer;
}
@-webkit-keyframes content-b2{
  0%{
	  opacity: 0;
	  margin-top:60px;
	}
  10%{
	  opacity: 0;
	  margin-top:60px;
	}
  15%{
	  opacity: 1;
	  margin-top:-0px;
	}
  30%{
	  opacity: 1;
	  margin-top:-0px;
	}
  40%{
	  opacity: 1;
	  margin-top:-0px;
	}
  50%{
	  opacity: 1;
	  margin-top:-0px;
	}
  60%{
	  opacity: 1;
	  margin-top:-0px;
	}
  70%{
	  opacity: 1;
	  margin-top:-0px;
	}
  80%{
	  opacity: 0;
	  margin-top:-0px;
	}
	
  90%{
	  opacity: 0;
	  margin-top:-0px;
	}
  100%{
	  opacity: 0;
	  margin-top:60px;
	}
}
@-moz-keyframes content-b2{
  0%{
	  opacity: 0;
	  margin-top:60px;
	}
  10%{
	  opacity: 0;
	  margin-top:60px;
	}
  15%{
	  opacity: 1;
	  margin-top:-0px;
	}
  30%{
	  opacity: 1;
	  margin-top:-0px;
	}
  40%{
	  opacity: 1;
	  margin-top:-0px;
	}
  50%{
	  opacity: 1;
	  margin-top:-0px;
	}
  60%{
	  opacity: 1;
	  margin-top:-0px;
	}
  70%{
	  opacity: 1;
	  margin-top:-0px;
	}
  80%{
	  opacity: 0;
	  margin-top:-0px;
	}
	
  90%{
	  opacity: 0;
	  margin-top:-0px;
	}
  100%{
	  opacity: 0;
	  margin-top:60px;
	}
}
@keyframes content-b2{
  0%{
	  opacity: 0;
	  margin-top:60px;
	}
  10%{
	  opacity: 0;
	  margin-top:60px;
	}
  15%{
	  opacity: 1;
	  margin-top:-0px;
	}
  30%{
	  opacity: 1;
	  margin-top:-0px;
	}
  40%{
	  opacity: 1;
	  margin-top:-0px;
	}
  50%{
	  opacity: 1;
	  margin-top:-0px;
	}
  60%{
	  opacity: 1;
	  margin-top:-0px;
	}
  70%{
	  opacity: 1;
	  margin-top:-0px;
	}
  80%{
	  opacity: 0;
	  margin-top:-0px;
	}
	
  90%{
	  opacity: 0;
	  margin-top:-0px;
	}
  100%{
	  opacity: 0;
	  margin-top:60px;
	}
}






.content3{
  width:100%;
  height:100%;
  position:absolute;
  overflow:hidden;
}
.content-img3{
	width: 100%;
	float: left;
	position: relative;
	-webkit-animation: content-c 7.5s infinite;
	-moz-animation: content-c 7.5s infinite;
	animation: content-c 7.5s infinite;
	height: 100%;
	z-index: 0;
	background-image: url(../images/cleaning-woman2.png);
	background-position: 30% bottom;
	background-size: 27% auto;
	background-repeat: no-repeat;
	bottom: 0%;
}
@-webkit-keyframes content-c{
  0%{left:-100%;}
  10%{left:-4%;}
  15%{left:-5%;}
  30%{left:-5%;}
  40%{left:-5%;}
  50%{left:-5%;}
  60%{left:-5%;}
  70%{left:-5%;}
  80%{left:-5%;}
  90%{left:-100%;}
  100%{left:-100%;}
}
@-moz-keyframes content-c{
  0%{left:-100%;}
  10%{left:-4%;}
  15%{left:-5%;}
  30%{left:-5%;}
  40%{left:-5%;}
  50%{left:-5%;}
  60%{left:-5%;}
  70%{left:-5%;}
  80%{left:-5%;}
  90%{left:-100%;}
  100%{left:-100%;}
}
@keyframes content-c{
  0%{left:-100%;}
  10%{left:-4%;}
  15%{left:-5%;}
  30%{left:-5%;}
  40%{left:-5%;}
  50%{left:-5%;}
  60%{left:-5%;}
  70%{left:-5%;}
  80%{left:-5%;}
  90%{left:-100%;}
  100%{left:-100%;}
}
.content3-1{
	width: 55%;
	height: 70%;
	position: absolute;
	overflow: hidden;
	right: -5%;
	top: 25%;
}
.content-img3-1{
	width: 100%;
	float: right;
	position: absolute;
	-webkit-animation: content-c1 7.5s infinite;
	-moz-animation: content-c1 7.5s infinite;
	animation: content-c1 7.5s infinite;
	height: 75%;
	top: 15%;
	z-index: 0;
	background-image: url(../images/img3-wording.png);
	background-position: left top;
	background-size: 55% auto;
	background-repeat: no-repeat;
}
@-webkit-keyframes content-c1{
  0%{left:150%;}
  10%{left:2%;}
  15%{left:2%;}
  30%{left:2%;}
  40%{left:2%;}
  50%{left:2%;}
  60%{left:2%;}
  70%{left:2%;}
  80%{left:2%;}
  90%{left:150%;}
  100%{left:150%;}
}
@-moz-keyframes content-c1{
  0%{left:150%;}
  10%{left:2%;}
  15%{left:2%;}
  30%{left:2%;}
  40%{left:2%;}
  50%{left:2%;}
  60%{left:2%;}
  70%{left:2%;}
  80%{left:2%;}
  90%{left:150%;}
  100%{left:150%;}
}
@keyframes content-c1{
  0%{left:150%;}
  10%{left:2%;}
  15%{left:2%;}
  30%{left:2%;}
  40%{left:2%;}
  50%{left:2%;}
  60%{left:2%;}
  70%{left:2%;}
  80%{left:2%;}
  90%{left:150%;}
  100%{left:150%;}
}

.content-button3-1{
	width: 9%;
	height: 7%;
	position: absolute;
	overflow: hidden;
	right: 44%;
	top: 64%;
	border: medium solid rgba(43,169,221,1.00);
	border-radius: 2vw;
	color: #0396b7;
	font-family: open-sans;
	font-style: normal;
	font-weight: 700;
	font-size: 0.9vw;
	text-align: center;
	line-height: 2.6vw;
	cursor: pointer;
	-webkit-animation: content-c2 7.5s infinite;
	-moz-animation: content-c2 7.5s infinite;
	animation: content-c2 7.5s infinite;
	visibility: hidden;
}
.content-button3-1:hover{
	border: medium solid #0396b7;
	border-radius: 2vw;
	color: #FFFFFF;
	font-family: open-sans;
	font-style: normal;
	font-weight: 700;
	font-size: 0.9vw;
	text-align: center;
	line-height: 2.6vw;
	background-color: #0396b7;
	cursor: pointer;
}
@-webkit-keyframes content-c2{
  0%{
	  opacity: 0;
	  margin-top:60px;
	}
  10%{
	  opacity: 0;
	  margin-top:60px;
	}
  15%{
	  opacity: 1;
	  margin-top:-0px;
	}
  30%{
	  opacity: 1;
	  margin-top:-0px;
	}
  40%{
	  opacity: 1;
	  margin-top:-0px;
	}
  50%{
	  opacity: 1;
	  margin-top:-0px;
	}
  60%{
	  opacity: 1;
	  margin-top:-0px;
	}
  70%{
	  opacity: 1;
	  margin-top:-0px;
	}
  80%{
	  opacity: 0;
	  margin-top:-0px;
	}
	
  90%{
	  opacity: 0;
	  margin-top:-0px;
	}
  100%{
	  opacity: 0;
	  margin-top:60px;
	}
}
@-moz-keyframes content-c2{
  0%{
	  opacity: 0;
	  margin-top:60px;
	}
  10%{
	  opacity: 0;
	  margin-top:60px;
	}
  15%{
	  opacity: 1;
	  margin-top:-0px;
	}
  30%{
	  opacity: 1;
	  margin-top:-0px;
	}
  40%{
	  opacity: 1;
	  margin-top:-0px;
	}
  50%{
	  opacity: 1;
	  margin-top:-0px;
	}
  60%{
	  opacity: 1;
	  margin-top:-0px;
	}
  70%{
	  opacity: 1;
	  margin-top:-0px;
	}
  80%{
	  opacity: 0;
	  margin-top:-0px;
	}
	
  90%{
	  opacity: 0;
	  margin-top:-0px;
	}
  100%{
	  opacity: 0;
	  margin-top:60px;
	}
}
@keyframes content-c2{
  0%{
	  opacity: 0;
	  margin-top:60px;
	}
  10%{
	  opacity: 0;
	  margin-top:60px;
	}
  15%{
	  opacity: 1;
	  margin-top:-0px;
	}
  30%{
	  opacity: 1;
	  margin-top:-0px;
	}
  40%{
	  opacity: 1;
	  margin-top:-0px;
	}
  50%{
	  opacity: 1;
	  margin-top:-0px;
	}
  60%{
	  opacity: 1;
	  margin-top:-0px;
	}
  70%{
	  opacity: 1;
	  margin-top:-0px;
	}
  80%{
	  opacity: 0;
	  margin-top:-0px;
	}
	
  90%{
	  opacity: 0;
	  margin-top:-0px;
	}
  100%{
	  opacity: 0;
	  margin-top:60px;
	}
}









.content4{
  width:100%;
  height:100%;
  position:absolute;
  overflow:hidden;
}
.content-img4{
	width: 100%;
	float: left;
	position: relative;
	-webkit-animation: content-d 7.5s infinite;
	-moz-animation: content-d 7.5s infinite;
	animation: content-d 7.5s infinite;
	height: 100%;
	z-index: 0;
	background-image: url(../images/man-cleaning2.png);
	background-position: 29% bottom;
	background-size: 43% auto;
	background-repeat: no-repeat;
	bottom: 0%;
}
@-webkit-keyframes content-d{
  0%{left:-100%;}
  10%{left:-7%;}
  15%{left:-8%;}
  30%{left:-8%;}
  40%{left:-8%;}
  50%{left:-8%;}
  60%{left:-8%;}
  70%{left:-8%;}
  80%{left:-8%;}
  90%{left:-100%;}
  100%{left:-100%;}
}
@-moz-keyframes content-d{
  0%{left:-100%;}
  10%{left:-7%;}
  15%{left:-8%;}
  30%{left:-8%;}
  40%{left:-8%;}
  50%{left:-8%;}
  60%{left:-8%;}
  70%{left:-8%;}
  80%{left:-8%;}
  90%{left:-100%;}
  100%{left:-100%;}
}
@keyframes content-d{
  0%{left:-100%;}
  10%{left:-7%;}
  15%{left:-8%;}
  30%{left:-8%;}
  40%{left:-8%;}
  50%{left:-8%;}
  60%{left:-8%;}
  70%{left:-8%;}
  80%{left:-8%;}
  90%{left:-100%;}
  100%{left:-100%;}
}


.content4-1{
	width: 55%;
	height: 70%;
	position: absolute;
	overflow: hidden;
	right: -7%;
	top: 25%;
}
.content-img4-1{
	width: 100%;
	float: right;
	position: absolute;
	-webkit-animation: content-d1 7.5s infinite;
	-moz-animation: content-d1 7.5s infinite;
	animation: content-d1 7.5s infinite;
	height: 75%;
	top: 15%;
	z-index: 0;
	background-image: url(../images/img4-wording.png);
	background-position: left top;
	background-size: 51% auto;
	background-repeat: no-repeat;
}
@-webkit-keyframes content-d1{
  0%{left:150%;}
  10%{left:2%;}
  15%{left:2%;}
  30%{left:2%;}
  40%{left:2%;}
  50%{left:2%;}
  60%{left:2%;}
  70%{left:2%;}
  80%{left:2%;}
  90%{left:150%;}
  100%{left:150%;}
}
@-moz-keyframes content-d1{
  0%{left:150%;}
  10%{left:2%;}
  15%{left:2%;}
  30%{left:2%;}
  40%{left:2%;}
  50%{left:2%;}
  60%{left:2%;}
  70%{left:2%;}
  80%{left:2%;}
  90%{left:150%;}
  100%{left:150%;}
}
@keyframes content-d1{
  0%{left:150%;}
  10%{left:2%;}
  15%{left:2%;}
  30%{left:2%;}
  40%{left:2%;}
  50%{left:2%;}
  60%{left:2%;}
  70%{left:2%;}
  80%{left:2%;}
  90%{left:150%;}
  100%{left:150%;}
}

.content-button4-1{
	width: 9%;
	height: 7%;
	position: absolute;
	overflow: hidden;
	right: 44%;
	top: 63%;
	border: medium solid rgba(43,169,221,1.00);
	border-radius: 2vw;
	color: #0396b7;
	font-family: open-sans;
	font-style: normal;
	font-weight: 700;
	font-size: 0.9vw;
	text-align: center;
	line-height: 2.6vw;
	cursor: pointer;
	-webkit-animation: content-d2 7.5s infinite;
	-moz-animation: content-d2 7.5s infinite;
	animation: content-d2 7.5s infinite;
	visibility: hidden;
}
.content-button4-1:hover{
	border: medium solid #0396b7;
	border-radius: 2vw;
	color: #FFFFFF;
	font-family: open-sans;
	font-style: normal;
	font-weight: 700;
	font-size: 0.9vw;
	text-align: center;
	line-height: 2.6vw;
	background-color: #0396b7;
	cursor: pointer;
}
@-webkit-keyframes content-d2{
  0%{
	  opacity: 0;
	  margin-top:60px;
	}
  10%{
	  opacity: 0;
	  margin-top:60px;
	}
  15%{
	  opacity: 1;
	  margin-top:-0px;
	}
  30%{
	  opacity: 1;
	  margin-top:-0px;
	}
  40%{
	  opacity: 1;
	  margin-top:-0px;
	}
  50%{
	  opacity: 1;
	  margin-top:-0px;
	}
  60%{
	  opacity: 1;
	  margin-top:-0px;
	}
  70%{
	  opacity: 1;
	  margin-top:-0px;
	}
  80%{
	  opacity: 0;
	  margin-top:-0px;
	}
	
  90%{
	  opacity: 0;
	  margin-top:-0px;
	}
  100%{
	  opacity: 0;
	  margin-top:60px;
	}
}
@-moz-keyframes content-d2{
  0%{
	  opacity: 0;
	  margin-top:60px;
	}
  10%{
	  opacity: 0;
	  margin-top:60px;
	}
  15%{
	  opacity: 1;
	  margin-top:-0px;
	}
  30%{
	  opacity: 1;
	  margin-top:-0px;
	}
  40%{
	  opacity: 1;
	  margin-top:-0px;
	}
  50%{
	  opacity: 1;
	  margin-top:-0px;
	}
  60%{
	  opacity: 1;
	  margin-top:-0px;
	}
  70%{
	  opacity: 1;
	  margin-top:-0px;
	}
  80%{
	  opacity: 0;
	  margin-top:-0px;
	}
	
  90%{
	  opacity: 0;
	  margin-top:-0px;
	}
  100%{
	  opacity: 0;
	  margin-top:60px;
	}
}
@keyframes content-d2{
  0%{
	  opacity: 0;
	  margin-top:60px;
	}
  10%{
	  opacity: 0;
	  margin-top:60px;
	}
  15%{
	  opacity: 1;
	  margin-top:-0px;
	}
  30%{
	  opacity: 1;
	  margin-top:-0px;
	}
  40%{
	  opacity: 1;
	  margin-top:-0px;
	}
  50%{
	  opacity: 1;
	  margin-top:-0px;
	}
  60%{
	  opacity: 1;
	  margin-top:-0px;
	}
  70%{
	  opacity: 1;
	  margin-top:-0px;
	}
  80%{
	  opacity: 0;
	  margin-top:-0px;
	}
	
  90%{
	  opacity: 0;
	  margin-top:-0px;
	}
  100%{
	  opacity: 0;
	  margin-top:60px;
	}
}















/* Switch */
.switch{
	width: 25vw;
	height: 2vw;
	position: absolute;
	bottom: -2%;
	z-index: 99;
	left: 50%;
	display: none;
}
.switch > ul{
  list-style:none;
}
.switch > ul > li{
	width: 0.5vw;
	height: 0.5vw;
	border-radius: 50%;
	background: #333;
	float: left;
	margin-right: 5.6px;
	cursor: pointer;
}
.switch ul{
  overflow:hidden;
}
.on{
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-color: #0396b7;
	position: relative;
	-webkit-animation: on 30s infinite;
	-moz-animation: on 30s infinite;
	animation: on 30s infinite;
}















/* Animation */
@-webkit-keyframes slide{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:-100%;
  }
  46%{
    margin-left:-100%;
  }
  50%{
    margin-left:-200%;
  }
  71%{
    margin-left:-200%;
  }
  75%{
    margin-left:-300%;
  }
  96%{
    margin-left:-300%;
  }
}
@-moz-keyframes slide{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:-100%;
  }
  46%{
    margin-left:-100%;
  }
  50%{
    margin-left:-200%;
  }
  71%{
    margin-left:-200%;
  }
  75%{
    margin-left:-300%;
  }
  96%{
    margin-left:-300%;
  }
}
@keyframes slide{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:-100%;
  }
  46%{
    margin-left:-100%;
  }
  50%{
    margin-left:-200%;
  }
  71%{
    margin-left:-200%;
  }
  75%{
    margin-left:-300%;
  }
  96%{
    margin-left:-300%;
  }
}










@-webkit-keyframes on{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:15px;
  }
  46%{
    margin-left:15px;
  }
  50%{
    margin-left:30px;
  }
  71%{
    margin-left:30px;
  }
  75%{
    margin-left:45px;
  }
  96%{
    margin-left:45px;
  }
}

@-moz-keyframes on{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:15px;
  }
  46%{
    margin-left:15px;
  }
  50%{
    margin-left:30px;
  }
  71%{
    margin-left:30px;
  }
  75%{
    margin-left:45px;
  }
  96%{
    margin-left:45px;
  }
}

@keyframes on{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:15px;
  }
  46%{
    margin-left:15px;
  }
  50%{
    margin-left:30px;
  }
  71%{
    margin-left:30px;
  }
  75%{
    margin-left:45px;
  }
  96%{
    margin-left:45px;
  }
}