@charset "UTF-8";
/* DEFAULT */
@media only screen {
  .baby {
    padding: 1px 1vw;
  }
  .baby a {
    text-decoration: none;
  }
  .bg-green p {
    color: #FFFFFF;
    font-size: 1.6em;
  }
  .button-left {
    width: calc(100% - 260px);
  }
  .button-right {
    width: 240px;
  }
  .service, .baby:hover {
    -webkit-box-shadow: 0px 0px 15px 5px rgba(192, 192, 192, 0.8);
    box-shadow: 0px 0px 15px 5px rgba(192, 192, 192, 0.8);
    padding: 1px 1vw;
  }
  .service:hover {
    -webkit-box-shadow: 0px 0px 20px 5px rgba(155, 155, 155, 1);
    box-shadow: 0px 0px 20px 5px rgba(155, 155, 155, 1);
  }
  .service:hover a, .baby:hover a {
    text-decoration: none;
  }
  .service * {
    text-align: center;
  }
  .service-pic {
    height: auto;
    margin: 20px auto 0 auto;
    max-width: 100px;
    width: 30vw;
  }
  #name, #email {
    width: 160px;
  }
  #message {
    width: 350px;
  }
  #submit {
    width: 200px;
  }
  #baby {
    padding-bottom: 3vw;
    padding-top: 1vw;
  }
  #baby-left {
    background: url("../images/baby-feet.webp") no-repeat 100% 0;
    background-size: contain;
    margin: 0 1vw 0 0;
    width: 42vw;
  }
  #baby-right {
    background: url("../images/baby-cuddle.webp") no-repeat 0 0;
    background-size: contain;
    margin: 0 0 0 1vw;
    text-align: right;
    width: 42vw;
  }
  #call1, #call2, #solution {
    padding: 20px 1px;
  }
  #download-left {
    width: 40vw;
  }
  #download-right {
    width: 35vw;
  }
  #float-left {
    float: right;
    height: 250px;
    width: 270px;
  }
  #float-right {
    float: left;
    height: 250px;
    width: 270px;
  }
  #h1 {
    background-color: rgba(255, 255, 255, .5);
    left: 6vw;
    padding: 1vw 2vw;
    position: relative;
    top: 6vw;
    width: 30vw;
  }
  #mission {
    padding-bottom: 3vw;
    padding-top: 3vw;
  }
  #services {
    display: grid;
  }
  .container {
    background-color: #F7F7F7;
    background-image: url("../images/animate1.webp") 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    min-height: 50vw;
    padding-bottom: 30px;
    width: 100%;
    transition: 5s;
    animation-name: animate;
    animation-direction: alternate-reverse;
    animation-duration: 20s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-timing-function: ease-in-out;
  }
  .container2 {
    background-color: #F7F7F7;
    background-image: url("../images/book1a.jpg") 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
    height: 17vw;
    max-height: 424px;
    max-width: 600px;
    width: 25vw;
    transition: 5s;
    animation-name: animate2;
    animation-direction: alternate-reverse;
    animation-duration: 20s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-play-state: running;
    animation-timing-function: ease-in-out;
  }
}
@keyframes animate {
  0% {
    background-image: url("../images/animate1.webp");
  }
  25% {
    background-image: url("../images/animate2.webp");
  }
  50% {
    background-image: url("../images/animate3.webp");
  }
  75% {
    background-image: url("../images/animate4.webp");
  }
  100% {
    background-image: url("../images/animate1.webp");
  }
}
@keyframes animate2 {
  0% {
    background-image: url("../images/book1a.jpg");
  }
  33% {
    background-image: url("../images/book2a.jpg");
  }
  67% {
    background-image: url("../images/book3a.jpg");
  }
  100% {
    background-image: url("../images/book1a.jpg");
  }
}
/* grid3wide */
@media only screen and (min-width: 1101px) {
  #services {
    grid-template-columns: 27.5vw 27.5vw 27.5vw;
    grid-column-gap: 4vw;
    grid-row-gap: 4vw;
    margin: 4vw 1px;
  }
}
/* grid2wide */
@media only screen and (min-width: 501px) and (max-width: 1100px) {
  #h1 {
    top: 1vw;
    width: 60vw;
  }
  #services {
    grid-template-columns: 44vw 44vw;
    grid-column-gap: 2vw;
    grid-row-gap: 2vw;
    margin: 4vw 1px;
  }
}
/* grid1wide */
@media only screen and (max-width: 500px) {
  #services {
    grid-template-columns: 82vw;
    grid-column-gap: 2vw;
    grid-row-gap: 2vw;
    margin: 4vw;
  }
}
/* MEGAPIXEL */
@media only screen and (min-width: 2001px) {
  #baby-left {
    width: 36vw;
  }
  #baby-right {
    width: 36vw;
  }
  #h1 {
    top: 15vw;
    width: 30vw;
  }
  #services {
    grid-template-columns: 25vw 25vw 25vw;
  }
}
/* DESKTOP */
@media only screen and (max-width: 2000px) {}
/* MOBILE */
@media only screen and (max-width: 700px) {
  .button-left, .button-right {
    width: 100%;
  }
  #float-left, #float-right {
    height: 100px;
    width: 100px;
  }
  #h1 {
    top: 1px;
    width: 86vw;
  }
  #name {
    width: 130px;
  }
  #email {
    width: 130px;
  }
  #message {
    width: 280px;
  }
}
/* For download */
@media only screen and (max-width: 900px) {
  .container2 {
    height: 45vw;
    width: 65vw;
  }
  #baby-left, #baby-right {
    margin: 20px auto;
    width: 84vw;
  }
  #download-left, #download-right {
    width: 80vw;
  }
}