*{
  margin:0;
  padding:0;
}

body{
  overflow-y:hidden;
}

#all_slides{
    position:relative;
    height:100vh;
    padding:0px;
    margin:0px;
    list-style-type:none;
}

.slide{
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    opacity:0;
    z-index:1;
    -webkit-transition:opacity 1s;
    -moz-transition:opacity 1s;
    -o-transition:opacity 1s;
    transition:opacity 1s;
}

.active{
    opacity:1;
    z-index:2;
}


.controls{
    display:none;
}

.slide{
    font-size:40px;
    padding:40px;
    box-sizing:border-box;
    background:#000;
    color:#000;
    background-size:cover;
}

.slide:nth-of-type(1){
  background-image:url('../../img/1.jpg');
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
}


.slide:nth-of-type(2){
  background-image:url('../../img/2.jpg');
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat
}


.slide:nth-of-type(3){
  background-image:url('../../img/3.jpg');
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat
}

.slide:nth-of-type(4){
  background-image:url('../../img/4.jpg');
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat
}

.slide:nth-of-type(5){
  background-image:url('../../img/5.jpg');
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
}


.slide:nth-of-type(6){
  background-image:url('../../img/6.jpg');
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat
}


.slide:nth-of-type(7){
  background-image:url('../../img/7.jpg');
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat
}

.slide:nth-of-type(8){
  background-image:url('../../img/8.jpg');
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat
}

.slide:nth-of-type(9){
  background-image:url('../../img/9.jpg');
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
}


.slide:nth-of-type(10){
  background-image:url('../../img/10.jpg');
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat
}


.slide:nth-of-type(11){
  background-image:url('../../img/11.jpg');
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat
}

.slide:nth-of-type(12){
   background-image:url('../../img/12.jpg');
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat
}

.slide:nth-of-type(13){
  background-image:url('../../img/13.jpg');
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat
}

.slide:nth-of-type(14){
  background-image:url('../../img/14.jpg');
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat;
}


.slide:nth-of-type(15){
  background-image:url('../../img/15.jpg');
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat
}


.slide:nth-of-type(16){
  background-image:url('../../img/16.jpg');
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat
}

.slide:nth-of-type(17){
   background-image:url('../../img/17.jpg');
  background-size:cover;
  background-position:50% 50%;
  background-repeat:no-repeat
}


.controls{
  display:inline-block;
  position:relative;
  top:1rem;
  right:.5rem;
  border:none;
  outline:none;
  font-size:20px;
  cursor:pointer;
  border:0;
  
  background:gold;
  width:3rem;
  height:3rem;
  margin-left:.5rem;
}

.controls:hover,
.controls:focus{
  background:#000;
  color:#000;
}

.container2{
  position:relative;
}

.buttons{
  position:absolute;
  right:.5rem;
  top:80%;
  left:35%;
  z-index:10;
  border:0;
  margin-right:.5rem;
}


.fancy{
  display:flex;
  justify-content:center;
  align-items:center;
  position:absolute;
  bottom:0;
  left:-2rem;
  width:9rem;
  height:2rem;
  background:gold;
  color:#000;
  z-index:3;
  transform:rotate(-45deg);
  border-radius:0;
}
.container 
{
	position:inherit;
	margin-left:75%;
	margin-top:75%;
	width:55%;
	max-width:1000px;
  	min-width:450px;
	height:auto;
	box-shadow:0 0 20px rgba(0,0,0,0.1);
	z-index:100000;
	}
 
.content2 
{
	position:relative;
	max-width:945px;
  	min-width:400px;
	width:100%;
	opacity:0.9;
	z-index:1000;
	box-shadow:0 0 20px rgba(0,0,0,0.1);
	height:auto;
	border:0;
	 
}

.responsive {
  	width:100%;
	max-width:945px;
  	min-width:100px;
  	height:auto;
	
 }