@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu+Condensed&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  xfont-family: 'Roboto', sans-serif;
  xfont-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-family: 'Ubuntu Condensed', sans-serif;
  xbackground: #222;
  
  background-color: rgb(40, 30, 18);
  xcolor: #fff;
  xline-height: 1.6;
}

h1 {
  font-size: 32px;
}

a {
  color: white;
}

a:hover {
  color: darkgrey;
}

.smallScreen {
  color: white;
  visibility: hidden;
  xpadding-top: 25%;
  height: 0px;
}

.slider {
  position: relative;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.slide.current {
  opacity: 1;
}

.slide .content {
  position: absolute;
  bottom: 30px;
  left: -600px;
  opacity: 0;
  width: 35%;
  background-color: rgba(255, 255, 255, 0.6);
  xcolor: #333;
  padding: 35px;
}

.slide .content h1 {
  margin-bottom: 10px;
}

.current .content {
  opacity: 1;
  transform: translateX(600px);
  transition: all 0.7s ease-in-out 0.3s;
}
button#fullscreen {
  position: absolute;
  xtop: 15px;
  right: 15px;
  bottom: 15px;
  background-color: transparent;
  color:white;
  padding: 2px 3px;
}

button#notFullscreen {
  position: absolute;
  xtop: 15px;
  right: 15px;
  bottom: 15px;
  background-color: transparent;
  color:white;
  padding: 2px 3px;
}

#content {
  display: none;
}
#show:target #content {
  display:block;
}
#show:target #open {
  display: none;
}

.buttons button#next {
  position: absolute;
  top: 40%;
  right: 15px;
  xright: 2%;
}

.buttons button#prev {
  position: absolute;
  top: 40%;
  left: 15px;
}

.buttons button {
  border: 2px solid #777;
  background-color: transparent;
  opacity: 0.5;
  color: #777;
  cursor: pointer;
  padding: 13px 15px;
  border-radius: 50%;
  outline: none;
}

.buttons button:hover {
  border: 2px solid #fff;
  background-color: #333;
  color: #fff;
}

@media (max-width: 890px) {
  .slide .content {
    bottom: -300px;
    left: 0;
    width: 100%;
  }

.slide.current .content {
  transform: translateY(-300px);
}
}

.firstText {
  xpadding-left: 50%;
  xpadding-right: 50%;
  padding-top: 20vh;
  xpadding-bottom: 10%;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
  line-height: 1.5;
	background: url("img/pattern.png"),url('img/30.jpg') no-repeat
  center right/cover;;
}

.secondText {
  padding-left: 22vw;
  padding-right: 22vw;
  padding-top: 10vh;
  padding-bottom: 10%;
  color: white;
}

.narrow {
  padding-left: 30vw;
}

.mainTitle {
  font-size: 90px;
  color: rgba(255, 255, 255, 0.60);
}
.subTitle {
  font-size: 45px;
}

.secMainText {
  font-size: 25px;
  line-height: 1.5;
  margin-bottom: 15px;
}

.mediumSecMainText {
  font-size: 23px;
}
.smallerSecMainText {
  font-size: 21px;
}

.instructions {
  text-align: center;
}
.secMainTitle {
  xfont-size: 35px;
  xline-height: 2;
  margin-bottom: 20px;
}
.subSubTitle {
  margin-top: 10%;
  margin-bottom: 5%;
  xdisplay: flex;
  xalign-self: flex-end;
  xflex-direction: column-reverse;
  font-size: 30px;
}

/* Backgorund Images */

.slide:first-child {
}

.slide:nth-child(2) {
}
.slide:nth-child(3) {
}

.slide:nth-child(4) {
  background: url('img/3.jpg') no-repeat center;
  background-size: 150vh;
  xbackground-color: rgb(40, 30, 18);
}
.slide:nth-child(5) {
}

.slide:nth-child(6) {
  background: url('img/5.jpg') no-repeat center;
  background-size: 150vh;
  xbackground-color: rgb(255, 30, 18);
} 
.slide:nth-child(7)  {
}

.slide:nth-child(8)  {
  background: url('img/7.jpg') no-repeat center;
  background-size: 60vh;
  xbackground-color: rgb(40, 30, 18);
}
.slide:nth-child(9)  {
}

.slide:nth-child(10)  {
  background: url('img/9.jpg') no-repeat center;
  background-size: 145vh;
  xbackground-color: rgb(40, 30, 18);
}

.slide:nth-child(11)  {
}

.slide:nth-child(12)  {
  background: url('img/11.jpg') no-repeat center;
  background-size: 63vh;
  xbackground-color: rgb(40, 30, 18);
}

.slide:nth-child(13)  {
}

.slide:nth-child(14)  {
  background: url('img/15.jpg') no-repeat center;
  background-size: 148vh;
  xbackground-color: rgb(40, 30, 18);
}

.slide:nth-child(15)  {
}

.slide:nth-child(16)  {
  background: url('img/13.jpg') no-repeat center;
  background-size: 147vh;
  xbackground-color: rgb(40, 30, 18);
}

.slide:nth-child(17)  {
  background: url('img/16.jpg') no-repeat center;
  background-size: 148vh;
  xbackground-color: rgb(40, 30, 18);
}


.slide:nth-child(18)  {
  background: url('img/17.jpg') no-repeat center;
  background-size: 148vh;
  xbackground-color: rgb(40, 30, 18);
}

.slide:nth-child(19)  {
}

.slide:nth-child(20)  {
  background: url('img/19.jpg') no-repeat center;
  background-size: 63vh;
  xbackground-color: rgb(40, 30, 18);
}

.slide:nth-child(21)  {
}

.slide:nth-child(22)  {
  background: url('img/21.jpg') no-repeat center;
  background-size: 148vh;
  xbackground-color: rgb(40, 30, 18);
}

.slide:nth-child(23)  {
  background: url('img/22.jpg') no-repeat center;
  background-size: 146vh;
  xbackground-color: rgb(40, 30, 18);
}

.slide:nth-child(24)  {
  background: url('img/23.jpg') no-repeat center;
  background-size: 152vh;
  xbackground-color: rgb(40, 30, 18);
}

.slide:nth-child(25)  {
  background: url('img/24.jpg') no-repeat center;
  background-size: 146vh;
  xbackground-color: rgb(40, 30, 18);
}

.slide:nth-child(26)  {
  background: url('img/25.jpg') no-repeat center;
  background-size: 60vh;
  xbackground-color: rgb(40, 30, 18);
}

.slide:nth-child(27)  {
  background: url('img/26.jpg') no-repeat center;
  background-size: 150vh;
  xbackground-color: rgb(40, 30, 18);
}

.slide:nth-child(28)  {
  background: url('img/27.jpg') no-repeat center;
  background-size: 60vh;
  xbackground-color: rgb(40, 30, 18);
}

.slide:nth-child(29)  {
}

.slide:nth-child(30)  {
  background: url('img/29.jpg') no-repeat center;
  background-size: 148vh;
  xbackground-color: rgb(40, 30, 18);
}

.slide:nth-child(31)  {
  background: url('img/31.jpg') no-repeat center;
  background-size: 146vh;
  xbackground-color: rgb(40, 30, 18);
}
.slide:nth-child(32)  {
  background: url('img/30.jpg') no-repeat center;
  background-size: 129vh;
  xbackground-color: rgb(40, 30, 18);
}

.slide:nth-child(33)  {
}

.slide:nth-child(34)  {
  background: url('img/33.jpg') no-repeat center;
  background-size: 128vh;
  xbackground-color: rgb(40, 30, 18);
}

.slide:nth-child(35)  {
  background: url('img/34.jpg') no-repeat center;
  background-size: 138vh;
  xbackground-color: rgb(40, 30, 18);
}

.slide:nth-child(36)  {
  background: url('img/35.jpg') no-repeat center;
  background-size: 159vh;
  xbackground-color: rgb(40, 30, 18);
}

.slide:nth-child(37)  {
  background: url('img/36.jpg') no-repeat center;
  background-size: 123vh;
  xbackground-color: rgb(40, 30, 18);
}

.slide:nth-child(38)  {
  background: url('img/37.jpg') no-repeat center;
  background-size: 126vh;
  xbackground-color: rgb(40, 30, 18);
}

.slide:nth-child(39)  {
  background: url('img/38.jpg') no-repeat center;
  background-size: 120vh;
  xbackground-color: rgb(40, 30, 18);
}

.slide:nth-child(40)  {
}

.slide:nth-child(41)  {
  background: url('img/40.jpg') no-repeat center;
  background-size: 126vh;
  xbackground-color: rgb(40, 30, 18);
}

.slide:nth-child(42)  {
  background: url('img/41.jpg') no-repeat center;
  background-size: 90vw;
  xbackground-color: rgb(40, 30, 18);
}
@media screen and (max-width: 1199px), screen and (max-height: 940px) {
  .slide {
    visibility: hidden;
    background-size: 1vh;
    background-color: #777;
  }
  .smallScreen {
    visibility:visible;
    text-align: center;
    font-size:large;
    xpadding-top: 10%;
  }
  .buttons {
    visibility: hidden;
  }
}