@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");

body {

  margin: 0;

}



.container {

  position: relative;

  height: 100vh;

  font-family: Lora, serif;

  color: white;

}

.container h1 {

  margin: 0;

  font-size: 250%;

  font-weight: 700;

  letter-spacing: 0.2em;

  text-shadow: 0 2px 2px black;

}

.container h3 {

  margin: 0;

  letter-spacing: 0.2em;

  text-shadow: 0 2px 2px black;

}

.container .page-title {

  position: absolute;

  left: 60em;

  top: 2em;

  z-index: 1;

}

.container .slideshow {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}

.container .slideshow .slide {

  position: absolute;

  top: 0;

  left: 0;

  z-index: -1;

  width: 100%;

  height: 100%;

}

.container .slideshow .slide:first-child {

  z-index: 0;

}

.container .slideshow .slide:nth-child(1) {

  background: url("../img1/cnKl1Ykd5rZCVwm.jpg") center/cover no-repeat;

}

.container .slideshow .slide:nth-child(2) {

  background: url("../img1/uXF1Kx7lzELB6wf.jpg") center/cover no-repeat;

}

.container .slideshow .slide:nth-child(3) {

  background: url("../img1/346.jpg") center/cover no-repeat;

}

.container .slideshow .slide:nth-child(4) {

  background: url("../img1/RtVq2wxQYySDb8L.jpg") center/cover no-repeat;

}

.container .slideshow .slide:nth-child(5) {

  background: url("../img1/OF6PzWyrwM31ldi.jpg") center/cover no-repeat;

}

.container .slideshow .slide .slide-title {

  position: absolute;

  top: 40vh;

  left: 2em;

}

.container .bars {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  display: flex;

}

.container .bars .bar {

  flex: 1;

  background: #2c3e50;

  transform: scaleY(0);

  transform-origin: top;

}

.container .nav-dots {

  position: absolute;

  left: 65em;

  margin: auto;

  bottom: 4em;

  z-index: 1;

  display: flex;

  margin: 0;

  list-style-type: none;

}

.container .nav-dots .dot {

  width: 1em;

  height: 1em;

  margin: 1em;

}

.container .nav-dots .dot a {

  position: relative;

  display: block;

  height: 1em;

  line-height: 1em;

}

.container .nav-dots .dot a::before {

  position: absolute;

  content: "";

  width: 100%;

  height: 100%;

  background: rgba(255, 255, 255, 0.4);

  border-radius: 50%;

}

.container .nav-dots .dot a:hover::before {

  background: rgba(255, 255, 255, 0.6);

}

.container .nav-dots .dot a.active::before {

  background: rgba(255, 255, 255, 0.8);

}