@import url(https://fonts.googleapis.com/css?family=Quicksand:300,600);
@import url(https://fonts.googleapis.com/css?family=Raleway:300,600);

/* flex box */

body, html {
  background: url("../images/footprints.jpg");
  margin:0;
  font-family:Quicksand;
  }


  h4 {
    font-family: "Quicksand", sans-serif;
    font-weight: bolder;
    font-size: 1.5rem;
    }

  h3 {
    font-family: "Quicksand", sans-serif;
    font-weight: bolder;
    font-size: 1.5rem;
    text-align: center;
    }

    p {
      font-family: Arial, sans-serif;
      font-size: 1rem;
      }

/* selected link */
a:active {
  color: #C71585;
}

.container {
  display: grid;
  width: 70%;
  margin-left: 15%;
  margin-right: 15%;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.grid {
background-color: #444;
color: #fff;
padding: 25px;
font-size: 3rem;
}
.header {
grid-column: 1 / 5;
grid-row: 1 / 2;
background-color: #C71585;	
}
.sidebar {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.content {
grid-column: 2 / 5;
grid-row: 2 / 3;
padding: 0;
}
.content2 {
  grid-column: 2 / 5;
  grid-row: 2 / 3;
  padding: 0;
  background-image: url('../images/posie_sm.jpg') no-repeat;
  display: block;
  width: 100%; /* Width of new image */
  height: 100%; /* Height of new image */
  }
.extra {
grid-column: 1 / 3;
grid-row: 3 / 4;
}
.extra2 {
grid-column: 3 / 5;
grid-row: 3 / 4;
}
.footer {
grid-column: 1 / 5;
grid-row: 4 / 5;
background-color: #C71585;	
display: flex;
justify-content: center;
} 

@media (max-width: 768px) {
  h3 {
    font-family: "Quicksand", sans-serif;
    font-weight: bolder;
    font-size: 1rem;
    text-align: center;
    }
  h4 {
      font-family: "Quicksand", sans-serif;
      font-weight: bolder;
      font-size: 1rem;
      }
  .container {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    margin-left: 0%;
    margin-right: 0%;
    grid-column-gap: 2px;
    grid-row-gap: 2px;
  }
  .header {
    grid-column: 1;
    grid-row: 1;
    background-color: #C71585;	
    }
  .content {
    grid-column: 1;
    grid-row: 2;
  }
  .sidebar {
    grid-column: 1;
    grid-row: 3;
    }
  .extra {
    grid-column: 1;
    grid-row: 4;
    }
    .extra2 {
    grid-column: 1;
    grid-row: 5;
    }
  .footer {
    grid-column: 1;
    grid-row: 6;
    background-color: #C71585;	
    display: flex;
    justify-content: center;
    } 
}

/* slideshow styles */
.slideshow-container {
  position: relative;
  height: 100%;
  width: 100%;
  background-color: black;
  overflow: hidden;
}

figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  /*animation*/

  animation: slideShow 48s linear infinite 0s;
  -o-animation: slideShow 48s linear infinite 0s;
  -moz-animation: slideShow 48s linear infinite 0s;
  -webkit-animation: slideShow 48s linear infinite 0s;
}

.slide-1 {
  opacity: 1;
  background: url("../images/lexie_box.jpg") no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
}

.slide-2 {
  animation-delay: 6s;
  -o-animation-delay: 6s;
  background: url("../images/lion_posie.jpg") no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
}

.slide-3 {
  animation-delay: 12s;
  -webkit-animation-delay: 12s;
  background: url("../images/ninja.jpg") no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
}

.slide-4 {
  animation-delay: 18s;
  -webkit-animation-delay: 18s;
  background: url("../images/parker.jpg") no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
}

.slide-5 {
  animation-delay: 24s;
  -webkit-animation-delay: 24s;
  background: url("../images/baby_kiko.jpg") no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
}

.slide-6 {
  animation-delay: 30s;
  -webkit-animation-delay: 30s;
  background: url("../images/robocat.jpg") no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
}

.slide-7 {
  animation-delay: 36s;
  -webkit-animation-delay: 36s;
  background: url("../images/baby_doodle.jpg") no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
}

.slide-8 {
  animation-delay: 42s;
  -webkit-animation-delay: 42s;
  background: url("../images/baby_snickers.jpg") no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
}
/* keyframes*/

@keyframes slideShow {
  0% {
    opacity: 0;
    transform: scale(1);
    -ms-transform: scale(1);
  }
  5% {
    opacity: 1;
  }
  15% {
  opacity: 1;
  }
  25% {
  opacity: 0;
  }
  35% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  55% {
  opacity: 0;
  }
  65% {
  opacity: 0;
  transform: scale(1.1);
  -ms-transform: scale(1.1);
  }
  100% {
  opacity: 0;
  transform: scale(1);
  -ms-transformm: scale(1);
  }
}

@-webkit-keyframes slideShow {
  0% {
    opacity: 0;
    -webkit-transform: scale(1);
  }
  5% {
    opacity: 1;
  }
  15% {
  opacity: 1;
  }
  25% {
  opacity: 0;
  }
  35% {
    opacity: 0;
  }
  45% {
    opacity: 0;
  }
  55% {
  opacity: 0;
  }
  65% {
  opacity: 0;
  -webkit-transform: scale(1.1);

  }
  100% {
  opacity: 0;
  -webkit-transformm: scale(1);
  }
}

@media (min-width: 40em) {
  .grid {
      grid-template-columns: 1fr;
  }

  header,
  content,
  sidebar,
  extra,
  extra2,
  footer {
      grid-column: 1;
  }
}