@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');
@media(min-width: 685px){
ul, li{
  text-align: left;
  padding-left:4em;
}
}

a{
  padding-left: 2em;
  color: #444;
}

body {
  background-color: orange;
  font-family: "Merriweather", serif;
  padding: 5px 5px;
  font-size: 18px;
  margin: 0;
  color: #444;

}

h1 {
  font-family: "Merriweather", serif;
  font-size: 60px;
  text-align: center;
}

h4{
  text-align: left;
  padding-left: 3em;
  font-style: italic;
}

#image1{
  height: 300px;
  width: 300px;
  transform: rotate(90deg);
}

#image2{
  height: 300px;
  width: 300px;
  transform: rotate(90deg);
}

#step4, #step1{
  margin-bottom: 25px;
}

#i1, #i2, #i3, #i4{ display: none;}

.container{
    margin: 0 auto;
    margin-top: 20px;
    position: relative;
    width: 70%;
    height: 0;
    padding-bottom: 38%;
    user-select: none;
    background-color: #1c1c1c;
    border: solid 10px #616161;
    border-radius:10px ; 
  }

  .container .slide_img{
    position: absolute;
    width: 100%;;
    height: 100%;
  }
  .container .slide_img img{
    width: inherit;
    height: inherit;
  }

   .prev, .next{
    width: 12%;
    height: inherit;
    position: absolute;
    top:0; 
    background-color: rgba(88, 88, 88,.2);
    color:rgba(244, 244, 244,.9);
    z-index: 99;
    transition: .45s;
    cursor: pointer;
    text-align: center;
  }

  .next{right:0;}
  .prev{left:0;}

  label span{
    position: absolute;
    font-size: 100pt;
    top: 50%;
    transform: translateY(-50%);
  }

  .prev:hover, .next:hover{
    transition: .3s;
    background-color: rgba(88, 88, 89,.8);
    color: #ffffff; 
  }

.container #nav_slide{
  width: 100%;
  bottom: 12%;
  height: 11px;
  position: absolute;
  text-align: center;
  z-index: 99;
  cursor: default;
}

#nav_slide .dots{
  top: -5px;
  width: 18px;
  height: 18px;
  margin: 0 4px;
  position: relative;
  border-radius: 100%;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.6);
  transition: .4s;
}

#nav_slide .dots:hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.9);
  transition: .25s
}

.slide_img{z-index: -1;}

  #i1:checked ~ #one  ,
  #i2:checked ~ #two  ,
  #i3:checked ~ #three,
  #i4:checked ~ #four 
  {z-index: 9; animation: scroll 1s ease-in-out;}

  #i1:checked  ~  #nav_slide #dot1,
  #i2:checked  ~  #nav_slide #dot2,
  #i3:checked  ~  #nav_slide #dot3,
  #i4:checked  ~  #nav_slide #dot4
  { background-color: rgba(255,255,255,.9);}

@keyframes scroll{
  0%{ opacity:.4;}
  100%{opacity:1;}
}   

/* .yt{
  margin: 0 auto;
  margin-top: 50px;
  position: relative;
  width: 150px;
  height:50px;
  border: outset #2c2c2c 4px;
  border-radius: 10px;
  text-align: center;
  font-size: 30pt;
  transition: .5s;
}

.yt a{
  text-decoration: none;
  color: #4c4c4c;
  transition: .5s;
}

.yt:hover{
  background: #4c4c4c;
  transition: .3s;
}

.yt:hover a{
  color: #fff;
  transition: .3s;
}
 */
@media screen and (max-width: 685px){
  .container{
    border: none;
    width: 100%;
    height: 0;
    padding-bottom: 55%; 
  } 
  
  label span { font-size: 50pt; }
  
  .prev, .next{
    width: 15%;
  } 
  #nav_slide .dots{
    width: 12px;
    height: 12px;
  }
}
@media screen  and(min-width: 970px){
  .me{ display: none;}
}