body{
  font-family: 'Maven Pro', sans-serif;

}

h1 {
margin-left: 5vw;
font-size: 10vh;
}
h2{
  margin-left: 5vw;
  font-size: 8vh;
}
h5{
  text-align: center;
  font-size: 3vh;
}
p {
  text-align: justify;
  font-size: 2vh;
}

/*.slider {
  height: 900px;
 text-shadow: 2px 1px 1px black;
}
.slider img {
  filter: grayscale(70%);

}
.slider h2 {
  font-size: 10vh;
}
.slider h1 {
  font-size: 13vh;
}*/

nav{
  padding-left: 5vw;
  padding-right: 5vw;
}
.top {
  min-height: 100vh;
  background-image: url(../pics/rain2.jpg);
  background-repeat: no-repeat;
  background-size: 100vw;
  display: flex;
  justify-content: flex-start;
  align-items: center;

}

.inside {
font-weight: bold;
color: white;
}
.topbutton {
  margin-left: 33%;

}
.med {
  /*color: darkBlue;*/

}
i {
  color: rgb(0, 28, 73);
  opacity: 0.5;
  margin-left: 33%;

}

.boxes {
  display: flex;
  align-items:  flex-start;
  justify-content: space-around;
  padding-left: 10vw;
  padding-right: 10vw;

}
.box {
  width: 20vw;

}
.s1 {
  background-image: url(../pics/catalog2.jpg);
  background-repeat: no-repeat;
  background-size: 100vw;
  background-position: top;
}
.s1 .card {
  width: 40vw;
  margin-top: 40vh;
  margin-left: 30vw;
  padding: 3vh;
  box-shadow:  0px -5px 22px 0px rgba(0,0,0,0.75);
  opacity: 0.8;

}
.s1 .card img {
  width: 20vw;
  margin-left: 40%;
}
.s2 {
  background-image: url(../pics/grandparents-and-babies2.jpg);
  background-repeat: no-repeat;
  background-size: 100vw;
  background-position: top;
}
.s3 {
  background-image: url(../pics/mother-beach.jpg);
  background-repeat: no-repeat;
  background-size: 100vw;
  background-position: top;
}
.s2 .card {
  margin-left: 40vw;
  margin-right: 2vw;
  padding: 2vh;
  box-shadow:  0px -5px 22px 0px rgba(0,0,0,0.75);
  opacity: 0.8;
}
.S2 .card img {
  margin-left: 5vw;
}
.s3 .card {
  margin-left: 2vw;
  margin-right: 40vw;
  padding: 2vh;
  box-shadow:  0px -5px 22px 0px rgba(0,0,0,0.75);
  opacity: 0.8;

}
.s4 {
  background-image: url(../pics/mum_and_girl.jpg);
  background-repeat: no-repeat;
  background-size: 100vw;
  background-position: top;
}
.s4 .card {
  margin-left: 40vw;
  margin-right: 2vw;
  padding: 2vh;
  box-shadow:  0px -5px 22px 0px rgba(0,0,0,0.75);
  opacity: 0.8;
}

.box2 {
  width: 20vw;
  margin: 5vw;

}
.reset-padding-top {
  padding-top: 0px;
}
.half-height {
  height: 50vh;
}
footer {
  height: 50vh;

}
.foot-info {
  margin-top: 10vh;
}
.info {
  margin-left: 20vw;
  margin-right: 20vw;
  margin-top: 5vh;
  border-bottom: 1px solid grey;
}
}
@media only screen  and (max-width : 1024px) and (min-width : 768px) {

h1 { font-size: 7vh;}
h2 {font-size: 5vh;
    color: darkBlue;}

    .boxes {
      flex-wrap: wrap;
        justify-content: space-between;

    }
    .box {
      margin-left: 8vw;
      width: 70vw;
      height: 30vh;

    }
    .box i{
display: none;
  }
 .card {
  min-width: 98vw;
  margin-left: 1vw;
  margin-right: 1vw;
  margin-top: 40vh;
  padding: 3vh;
  box-shadow:  0px -5px 22px 0px rgba(0,0,0,0.75);
  opacity: 0.8;

}
}
@media only screen  and (max-width : 767px) {
  h1 {
    margin-top: 4vh;
    font-size: 7vh;
  color: darkBlue;}
  h2 {font-size: 4vh;
      color: darkBlue;}

      .boxes {
        flex-wrap: wrap;
        justify-content: space-between;

      }
      .box {
        margin-left: 6vw;
        width: 70vw;
        height: 30vh;

      }
      .box i{
  display: none;
    }

.s1 .card {
  width: 100vw;
  margin-left: 0vw;
  margin-right: 0vw;
  margin-top: 20vh;
  padding: 3vh;
  box-shadow:  0px -5px 22px 0px rgba(0,0,0,0.75);
  opacity: 0.8;

}
.s2 {
  background-image: url(../pics/phone6.gif);
  background-repeat: no-repeat;
  background-size: 100vw;
  background-position: top;
}
.s2 .card {
  width: 100vw;
  margin-left: 0vw;
  margin-right: 0vw;
  margin-top: 40vh;
  padding: 3vh;
  box-shadow:  0px -5px 22px 0px rgba(0,0,0,0.75);
  opacity: 0.7;

}
.s2 .card-content {
  min-width: 90vw;

}
.s3 {
  background-image: url(../pics/phone3.gif);
  background-repeat: no-repeat;
  background-size: 100vw;
  background-position: top;
}
.s3 .card {
  width: 100vw;
  margin-left: 0vw;
  margin-right: 0vw;
  margin-top: 40vh;
  padding: 3vh;
  box-shadow:  0px -5px 22px 0px rgba(0,0,0,0.75);
  opacity: 0.7;

}
.s3 .card-content {
  min-width: 90vw;

}
.s4 {
  background-image: url(../pics/phone4.jpg);
  background-repeat: no-repeat;
  background-size: 100vw;
  background-position: top;
}
.s4 .card {
  width: 100vw;
  margin-left: 0vw;
  margin-right: 0vw;
  margin-top: 10vh;
  padding: 3vh;
  box-shadow:  0px -5px 22px 0px rgba(0,0,0,0.75);
  opacity: 0.7;

}
.s4 .card-content {
  min-width: 90vw;

}
.foot-info {
  margin-top: 3vh;
}
.info h3 {
 font-size: 4vh;
}
.info p {
  font-size: 1.9vh;
}
footer li {
  display: inline;
}
footer ul {
  width: 30vw;
  margin: auto;
}
}