body {
  height: 100%;
  background: url('../images/home_bg.jpg') rgb(255, 255, 255);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  font-family: "proxima-nova-soft",sans-serif;
  font-weight: 400;
  font-style: normal;
  color: rgb(238, 238, 238);
}

.aboutbubble {
  display: block;
  position: relative;
  float: left;
  clear: both;
  z-index: 4;
  width: 180px;
  height: 180px;
  margin: -139px 0 0 23.125%;
  border-radius: 90px;
  background: none rgb(95, 75, 62);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left top;
}

.aboutbubble:hover {
  background-image: url('../images/Montessori_029.jpg');
  background-position: center center;
}

.blogbubble {
  display: block;
  position: relative;
  float: left;
  z-index: 8;
  width: 140px;
  height: 140px;
  margin: -104px 0 0 4.43848%;
  border-radius: 70px;
  background: none rgb(95, 75, 62);
  background-size: auto auto;
  background-position: left top;
}

.blogbubble:hover {
  background-image: url('../images/Montessori_005.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.bubblescontainer {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  height:auto;
  min-height:700px;
}

.contactbubble {
  display: block;
  position: relative;
  float: left;
  clear: both;
  z-index: 10;
  width: 150px;
  height: 150px;
  margin: -11px 0 0 9.26921%;
  border-radius: 75px;
  background: none rgb(120, 59, 199);
  background-size: auto auto;
  background-position: left top;
}

.contactbubble:hover {
  background-image: url('../images/After-school-Final.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.feesbubble {
  display: block;
  position: relative;
  float: left;
  z-index: 12;
  width: 100px;
  height: 100px;
  margin: -120px 0 0 20.2246099999%;
  border-radius: 50px;
  background: none rgb(120, 59, 199);
  background-size: auto auto;
  background-position: left top;
}

.feesbubble:hover {
  background-image: url('../images/Baby-Room-Final2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.fonthillbubble {
  display: block;
  position: relative;
  float: left;
  z-index: 2;
  width: 236px;
  height: 236px;
  margin: -156px 0 0 16.04818%;
  border: 1px solid rgb(149, 188, 13);
  border-radius: 118px;
  background-image: url('../images/fonthill-lodge-logo.png');
  background-repeat: no-repeat;
  background-size: auto auto;
  background-position: center center;
}

.gallerybubble {
  display: block;
  position: relative;
  float: left;
  z-index: 6;
  width: 200px;
  height: 200px;
  margin: -31px 0 0 18.82487%;
  border-radius: 100px;
  background: none rgb(149, 188, 13);
  background-size: auto auto;
  background-position: left top;
}

.gallerybubble:hover,
.teambubble:hover {
  background-image: url('../images/baby-room-5.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.locationsbubble {
  display: block;
  position: relative;
  float: left;
  z-index: 1;
  width: 140px;
  height: 140px;
  margin: 31px 0 0 19.05762%;
  border-radius: 70px;
  background: rgb(120, 59, 199);
  background-repeat: no-repeat;
  background-position: center center;
  background-size:cover;
  -webkit-transition: all .2s;
  -moz-transition: all .2s;
  -o-transition: all .2s;
  -ms-transition: all .2s;
  transition: all .2s;
}

.locationsbubble:hover {
  background-image: url('../images/Car-Final-2.jpg');
  background-position: center center;
}

.servicesbubble {
  display: block;
  position: relative;
  float: left;
  z-index: 16;
  width: 140px;
  height: 140px;
  margin: -164px 0 0 38.61654%;
  border-radius: 70px;
  background: none rgb(120, 59, 199);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left top;
}

.servicesbubble:hover {
  background-image: url('../images/Car-Final-2.jpg');
  background-position: center center;
}

.teambubble {
  display: block;
  position: relative;
  float: left;
  clear: both;
  z-index: 18;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background: none rgb(149, 188, 13);
  background-size: auto auto;
  background-position: left top;
}

.testimonialsbubble {
  display: block;
  position: relative;
  float: right;
  z-index: 14;
  width: 170px;
  height: 170px;
  margin: -31px 8.52214% 0 0;
  border-radius: 85px;
  background: none rgb(149, 188, 13);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.testimonialsbubble:hover {
  background-image: url('../images/Baby-Room-Final.jpg');
}

._text {
  float: left;
  width: 84.7058823529%;
  font-size: 24px;
  line-height: 1.38;
  text-align: center;
  color: rgb(238, 238, 238);
}

.aboutbubble ._text {
  margin: 70px 0 0 7.63889%;
}

.contactbubble ._text {
  margin: 58px 0 0 7.63542%;
}

.feesbubble ._text {
  margin: 34px 0 0 7.64063%;
}

.gallerybubble ._text {
  margin: 83px 0 0 7.625%;
}

.blogbubble ._text,
.locationsbubble ._text,
.servicesbubble ._text {
  margin: 52px 0 0 7.64509%;
}

.teambubble ._text {
  margin: 78px 0 0 7.625%;
}

.testimonialsbubble ._text {
  margin: 68px 0 0 7.64706%;
}

@media(max-width: 900px) {
  .bubblescontainer {
    max-width: none;
  }

  .bubblescontainer .aboutbubble {
    position: relative;
    z-index: 4;
    margin-top: -150px;
    margin-left: 37.74132%;
  }

  .bubblescontainer .blogbubble {
    position: relative;
    float: right;
    clear: both;
    z-index: 8;
    margin-top: 16px;
    margin-right: 69.59028%;
    margin-left: 0;
  }

  .bubblescontainer .contactbubble {
    position: relative;
    float: right;
    z-index: 10;
    margin-top: -542px;
    margin-right: 4.58507%;
    margin-left: 0;
  }

  .bubblescontainer .feesbubble {
    position: relative;
    z-index: 12;
    margin-top: -362px;
    margin-left: 7.66667%;
  }

  .bubblescontainer .fonthillbubble {
    position: relative;
    z-index: 2;
    margin-top: -145px;
    margin-left: 14.66146%;
  }

  .bubblescontainer .gallerybubble {
    position: relative;
    clear: both;
    z-index: 6;
    margin-top: -280px;
    margin-left: 61.21528%;
  }

  .bubblescontainer .locationsbubble {
    position: relative;
    z-index: 1;
    margin-top: 15px;
    margin-left: 17.03125%;
  }

  .bubblescontainer .servicesbubble {
    position: relative;
    float: right;
    clear: both;
    z-index: 16;
    margin-top: -320px;
    margin-right: 58.14757%;
    margin-left: 0;
  }

  .bubblescontainer .teambubble {
    position: relative;
    z-index: 18;
    margin-top: 16px;
  }

  .bubblescontainer .testimonialsbubble {
    position: relative;
    z-index: 14;
    margin-top: -70px;
    margin-right: 3.13889%;
  }

  .teambubble ._text {
    margin-top: 78px;
  }
}

@media(max-width: 710px) {
  body {
    font-size: 24px;
  }

  .bubblescontainer {
    margin-top: 20px;
  }

  .bubblescontainer .aboutbubble {
    position: relative;
    z-index: 4;
    margin-top: 0;
    margin-left: 31.53609%;
  }

  .bubblescontainer .blogbubble {
    position: relative;
    clear: none;
    z-index: 8;
    margin-top: -402px;
    margin-right: 4.6500899999%;
  }

  .bubblescontainer .contactbubble {
    position: relative;
    float: left;
    z-index: 10;
    margin-top: -49px;
    margin-right: 0;
    margin-left: 36.8772%;
  }

  .bubblescontainer .feesbubble {
    position: relative;
    clear: both;
    z-index: 12;
    margin-top: -37px;
    margin-left: 14.77773%;
  }

  .bubblescontainer .fonthillbubble {
    position: relative;
    clear: both;
    z-index: 2;
    margin-top: -460px;
    margin-left: 36.875%;
  }

  .bubblescontainer .gallerybubble {
    position: relative;
    z-index: 6;
    margin-top: -482px;
    margin-left: 0;
  }

  .bubblescontainer .locationsbubble {
    position: relative;
    z-index: 1;
    margin-top: 121px;
    margin-left: 14.77773%;
  }

  .bubblescontainer .servicesbubble {
    position: relative;
    clear: none;
    z-index: 16;
    margin-top: -272px;
    margin-right: 4.6500899999%;
  }

  .bubblescontainer .teambubble {
    position: relative;
    clear: none;
    z-index: 18;
    margin-top: 270px;
    margin-left: 9.00088%;
  }

  .bubblescontainer .testimonialsbubble {
    position: relative;
    z-index: 14;
    margin-top: -271px;
    margin-right: 8.03037%;
  }

  .teambubble ._text {
	margin-top: 78px;
  }
}

@media(max-width: 646px) {
  .bubblescontainer .aboutbubble {
    position: relative;
    z-index: 4;
    margin-top: -781px;
    margin-left: 41.88758%;
  }

  .bubblescontainer .blogbubble {
    position: relative;
    z-index: 8;
    margin-top: -362px;
    margin-right: 59.34114%;
  }

  .bubblescontainer .contactbubble {
    position: relative;
    float: right;
    z-index: 10;
    margin-top: -298px;
    margin-right: 23.58988%;
    margin-left: 0;
  }

  .bubblescontainer .feesbubble {
    position: relative;
    clear: none;
    z-index: 12;
    margin-top: -646px;
    margin-left: 76.64474%;
  }

  .bubblescontainer .fonthillbubble {
    position: relative;
    clear: none;
    z-index: 2;
    margin-top: -1104px;
    margin-left: 33.20917%;
  }

  .bubblescontainer .gallerybubble {
    position: relative;
    z-index: 6;
    margin-top: -868px;
    margin-left: 7.37471%;
  }

  .bubblescontainer .locationsbubble {
    position: relative;
    z-index: 1;
    margin-top: 981px;
    margin-left: 31.51848%;
  }

  .bubblescontainer .servicesbubble {
    position: relative;
    z-index: 16;
    margin-top: -525px;
    margin-right: 37.66931%;
  }

  .bubblescontainer .teambubble {
    position: relative;
    clear: both;
    z-index: 18;
    margin-top: -628px;
    margin-left: 3.55312%;
  }

  .bubblescontainer .testimonialsbubble {
    position: relative;
    z-index: 14;
    margin-top: -494px;
    margin-right: 6.4096399999%;
  }

  .teambubble ._text {
    margin-top: 78px;
  }
}

@media(max-width: 520px) {
  body {
    font-size: 24px;
  }

  .bubblescontainer {
    margin-top: 65px;
	margin-bottom: 40px;
  }

  .bubblescontainer .aboutbubble {
    position: relative;
    float: right;
    clear: none;
    z-index: 4;
    margin-top: -1120px;
    margin-right: 8.33534%;
    margin-left: 0;
  }

  .bubblescontainer .blogbubble {
    position: relative;
    float: left;
    clear: both;
    z-index: 8;
    margin-top: -328px;
    margin-right: 0;
    margin-left: 7.94772%;
  }

  .bubblescontainer .contactbubble {
    position: relative;
    clear: none;
    z-index: 10;
    margin-top: -314px;
    margin-right: 7.17849%;
  }

  .bubblescontainer .feesbubble {
    position: relative;
    clear: both;
    z-index: 12;
    margin-top: -37px;
    margin-left: 66.57752%;
  }

  .bubblescontainer .fonthillbubble {
    position: relative;
    float: none;
    z-index: 2;
    margin-top: 17px;
    margin-right: auto;
    margin-left: auto;
  }

  .bubblescontainer .gallerybubble {
    position: relative;
    z-index: 6;
    margin-top: -1003px;
    margin-left: 7.94772%;
  }

  .bubblescontainer .locationsbubble {
    position: relative;
    z-index: 1;
    margin-top: 1233px;
    margin-left: 25.51082%;
  }

  .bubblescontainer .servicesbubble {
    position: relative;
    float: left;
    clear: both;
    z-index: 16;
    margin-top: -602px;
    margin-right: 0;
    margin-left: 4.79868%;
  }

  .bubblescontainer .teambubble {
    position: relative;
    float: right;
    z-index: 18;
    margin-top: -731px;
    margin-right: 13.58774%;
    margin-left: 0;
  }

  .bubblescontainer .testimonialsbubble {
    position: relative;
    z-index: 14;
    margin-top: -516px;
    margin-right: 12.6232%;
  }
}