.cd__main{
     background: linear-gradient(to right, #e0eafc, #cfdef3) !important;
     min-height: 720px;
}
.conbg {
  width: 100%;
  height: 500px;
}
.bg2 {
  z-index: 2;
  position: relative;
  width: 70%;
  margin: 100px auto;
  transform: rotate(10deg);
  background-image: url(../../images/driver-grown-up.jpg);
  background-size: cover;
  background-position: right -50px;
  background-color: lightslategray;
  box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);
}
.bg1 {
  z-index: 3;
  position: relative;
  margin: auto;
  transform: rotate(-5deg);
  background-image: url(../../images/driving.jpg);
  background-size: cover;
  background-position: right -70px;
  background-color: lightslategray;
  box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);
}
.bg {
  z-index: 4;
  position: relative;
  margin: auto;
  transform: rotate(-5deg);
  height: 500px;
  background-image: url(../../images/reversing-driver.jpg);
  background-size: cover;
  background-position: right -50px;
  background-color: lightslategray;
  box-shadow: 5px 5px 3px rgba(0, 0, 0, 0.5);
}
.bg-text {
  width: 100%;
  position: absolute;
  display: inline-block;
  bottom: 0;
  left: 0;
}
.bg-text a {
  margin: 5px;
  float: right;
}

#bg1:target .bg {
  -webkit-animation: ciut 1s forwards;
          animation: ciut 1s forwards;
}
#bg1:target {
  -webkit-animation: fre 0.3s forwards;
          animation: fre 0.3s forwards;
}
#bg2:target .bg1 {
  -webkit-animation: ciut 1s forwards;
          animation: ciut 1s forwards;
}
#bg2:target {
  -webkit-animation: fre1 0.3s forwards;
          animation: fre1 0.3s forwards;
}
#conbg:target .bg2 {
  -webkit-animation: ciut1 1s;
          animation: ciut1 1s;
}
@-webkit-keyframes fre1 {
  0% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes fre1 {
  0% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-webkit-keyframes fre {
  0% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}
@keyframes fre {
  0% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}
@-webkit-keyframes ciut {
  0% {
    opacity: 1;
    transform: rotate(-5deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(360deg) scale(0);
  }
}
@keyframes ciut {
  0% {
    opacity: 1;
    transform: rotate(-5deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: rotate(360deg) scale(0);
  }
}
@-webkit-keyframes ciut1 {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0);
  }
  100% {
    opacity: 1;
    transform: rotate(370deg) scale(1);
  }
}
@keyframes ciut1 {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0);
  }
  100% {
    opacity: 1;
    transform: rotate(370deg) scale(1);
  }
}