* {
  margin: 0;
  padding: 0;
}


html,  body {
  height: 100%;
  overflow: hidden;
}

#container,  .sections,  .section {
  position: relative;
  height: 100%;
}

.section {
  background-color: #000;
  background-size: cover;
  background-position: 50% 50%;
}



#section1 { background-image: url(../images/bg1.jpg); }

#section2 { background-image: url(../images/bg2.jpg); }

#section3 { background-image: url(../images/bg3.jpg); }

#section4 { background-image: url(../images/bg4.jpg); }

#section5 { background-image: url(../images/bg5.jpg); }

#section6 { background-image: url(../images/bg6.jpg); }

#section7 { background-image: url(../images/bg7.jpg); }

#section8 { background-image: url(../images/bg8.jpg); }

#section9 { background-image: url(../images/bg9.jpg); }


.pages {
  position: fixed;
  right: 20px;
  top: 35%;
  list-style: none;
}

.pages li {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  margin: 15px 0 0 7px;
}

.pages li.active {
  margin-left: 0;
  width: 16px;
  height: 16px;
  border: 4px solid #FFFFFF;
  background: #fff;
  margin-left:4px;
}