/********************** HTML Components***********************/

body{
  text-align: center;
  font-family: "Fredoka One", sans-serif;
}


/********************** ID CSS***********************/

#large-cloud1 {
  height: 25%;
  width: 15%;
  position: absolute;
  top: 2%;
  left: 100%;
  animation-duration: 30s;
}

#large-cloud2 {
  height: 25%;
  width: 15%;
  position: absolute;
  top: 10%;
  left: 100%;
  animation-duration: 26s;
}

#large-cloud3 {
  height: 20%;
  width: 12%;
  position: absolute;
  top: 10%;
  left: 100%;
  animation-duration: 35s;
}

#small-cloud1 {
  height: 15%;
  width: 8%;
  position: absolute;
  left: 100%;
  top: 6%;
  animation-duration: 32s;
}

#small-cloud2 {
  height: 15%;
  width: 8%;
  position: absolute;
  left: 100%;
  top: 18%;
  animation-duration: 38s;
}



/********************** Top Container Objects ***********************/

.top-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* Images */
.bkg-img {
  padding: 0;
  margin: 0 auto;
  display: block;
  width: 100%;
}

/* Trampoline Classess */
.trampoline-container{
  position: absolute;
  bottom: 30%;
  left: 68%;
}

.full-trampoline{
  width: 30%;
}

.tarp{
  animation: tarp-move 1.5s linear infinite;
}

.head_body{
  animation: body-move .75s cubic-bezier(.17,.67,.8,1.04) infinite alternate;
}

.right_arm{
  transform-origin: 46% 64%;
  animation: right-arm-move .75s cubic-bezier(.17,.67,.8,1.04) infinite alternate;
}

.left_arm{
  transform-origin: 55% 64%;
  animation: left-arm-move .75s cubic-bezier(.17,.67,.8,1.04) infinite alternate;
}

.left_leg{
  transform-origin: 50% 70%;
  animation: left-leg-move .75s cubic-bezier(.17,.67,.8,1.04) infinite alternate;
}

.right_leg{
  transform-origin: 50% 72%;
  animation: right-leg-move .75s cubic-bezier(.17,.67,.8,1.04) infinite alternate;
}

.trampoline-shadow{
  width: 32%;
  height: auto;
  transform: translate(-98%, 300%);
  z-index: 1;
}

/* Top Container Images */
.southpaw-head-img {
  height: 15%;
  width: 9%;
  position: absolute;
  left: 50.6%;
  bottom: 51.6%;
}

.dog-main {
  width: 35%;
  position: absolute;
  right: 25%;
  top: 35%;
}

.logo-img {
  height: auto;
  width: 24%;
  position: absolute;
  left: 5%;
  top: 5%;
}

.logo-phrase {
  height: 3%;
  width: 24%;
  position: absolute;
  left: 7%;
  top: 46%;
}

.container-inner {
  position: relative;
}

.doghouse-container {
  position: absolute;
  width: 30%;
  height: auto;
  left: 8%;
  bottom: 44%;
}

.doghouse-container .doghouse-img {
  position: absolute;
  width: 100%;
  height: auto;
}

/*
.doghouse-container .label {
  position: absolute;
  width: 32%;
  height: auto;
  transform: translate(15%, -80%);
  opacity: 0;
  transition-property: all;
  transition-duration: .3s;
  transition-timing-function: ease-in-out;
}


.doghouse-container:hover .label {
  opacity: 1;
}*/

.ball-container {
  position: absolute;
  width: 40%;
  height: auto;
  left: 70%;
  bottom: 20%;
}

.ball-container .label {
  position: absolute;
  width: 25%;
  height: auto;
  transform: translate(12%, -105%);
  opacity: 0;
  transition-property: all;
  transition-duration: .3s;
  transition-timing-function: ease-in-out;
}

.ball-container .ball-img {
  position: absolute;
  width: 28%;
  height: auto;
}

.ball-container:hover .label {
  opacity: 1;
}

.weight-container {
  position: absolute;
  width: 25%;
  height: auto;
  left: 5%;
  bottom: 15%;
}

.weight-container .label {
  position: absolute;
  width: 40%;
  height: auto;
  transform: translate(-5%, -105%);
  opacity: 0;
  transition-property: all;
  transition-duration: .3s;
  transition-timing-function: ease-in-out;
}

.weight-container .weight-img {
  position: absolute;
  width: 45%;
  height: auto;
}

.weight-container:hover .label {
  opacity: 1;
}

.banner-container {
  position: absolute;
  width: 18%;
  height: auto;
  right: 1%;
  bottom: 58%;
}

.banner-container .label {
  position: absolute;
  width: 50%;
  height: auto;
  transform: translate(30%, -100%);
  opacity: 0;
  transition-property: all;
  transition-duration: .3s;
  transition-timing-function: ease-in-out;
}

.banner-container .banner-img {
  position: absolute;
  width: 100%;
  height: auto;
}

.banner-container:hover .label {
  opacity: 1;
}

.book-container {
  position: absolute;
  width: 25%;
  height: auto;
  left: 38%;
  bottom: 46%;
}

.book-container .label {
  position: absolute;
  width: 35%;
  height: auto;
  transform: translate(-5%, -105%);
  opacity: 0;
  transition-property: all;
  transition-duration: .3s;
  transition-timing-function: ease-in-out;
}

.book-container .book-img {
  position: absolute;
  width: 32%;
  height: auto;
}

.book-container:hover .label {
  opacity: 1;
}

.trophy-container {
  position: absolute;
  width: 25%;
  height: auto;
  right: 15%;
  bottom: 53%;
}

.trophy-container .label {
  position: absolute;
  width: 35%;
  height: auto;
  transform: translate(-5%, -105%);
  opacity: 0;
  transition-property: all;
  transition-duration: .3s;
  transition-timing-function: ease-in-out;
}

.trophy-container .trophy-img {
  position: absolute;
  width: 32%;
  height: auto;
}

.trophy-container:hover .label {
  opacity: 1;
}


/********************** More Fun Container CSS***********************/
.middle-container {
  position: relative;
  width: 100%;
  height: auto;
  background-color: #FFE169;
  padding: 20px 0 15px;
}

.more-fun-container{
  position: relative;
  height: auto;
  width: 100%;
  height: 10%;
  text-align: center;
}

.more-fun-btn {
  width: 18%;
  height: auto;
  margin-top: 2%;
  margin-bottom: 4%;
  display: inline-block;
}

.fun-btn-box{
  padding: 2%;
  text-align: center;
}

.fun-btn-box p {
  width: 90%;
  max-width: 280px;
  margin-left:auto;
  margin-right:auto;
  color: rgb(224, 123, 21);
}

.fun-btn{
  width: 90%;
  max-width: 280px;
  height: auto;
}

/********************** Standards Container CSS***********************/
.standards-container{
  background-color: #FFCD69;
  width: 100%;
  padding: 2rem 4rem;
}

.standards-components{
  display: flex;
  width: 65%;
  justify-content: center;
  align-items: flex-end;
  margin: 0 auto;
}

.standards-img{
  display: inline-block;
  width: 14%;
}

.standards-dog{
  width: 10rem;
}

.text-container{
  display: inline-block;
  vertical-align: bottom;
  text-align: left;
}

.text-container>h2{
  font-family: 'Luckiest Guy', cursive;
  color: #FF7213;
  font-size: 3.5rem;
  width: 100%;
}

.text-containers .pawsome-accent{
  font-size: 4.0rem;
}

.text-container .nsa-link{
  color: white;
  font-size: 4.0rem;
  text-decoration: none;
}

.nsa-link:hover,
.nsa-link:focus{
  color: blue;
  text-decoration: none;
}