@media only screen and (max-width: 1200px) {
    
  .flower{
    height: 20vw;
    width:10vw;
    opacity: 0;
  }
  .smalllove, .thanks, .kisses, .hands, .fire, .butnf,  .hand, .fright,.lastplz{
    display: none;
    }


 .middle{
  left: -7%;
}

.cloud1{
  height: 50vh;
  width: 50vw;
  left: 15%;
  top: 60%;
  background-size: auto 100%;

  
}
.cloud2{
  height: 50vh;
  width: 50vw;
  left: 75%;
  top: 60%;
  background-size: auto 100%;
}
.fleft3{
  height: 20vh;
  width:35vw;
  top: 21%;
    left: -6%;
    background-size:auto 100%  ;
}
.fleft2{
  height: 20vh;
  width:35vw;
  top: 57%;
    left: 70%;
    background-size:auto 100%  ;
}
.love2{
  height: 15vh;
  width: 15vw; 
  left: 5%;
}
.clickinfo{
  left:32%;
  }

  .rosestop{
    left:34%;
    
  }
  .rosescolor{
    top: -10%;
  }
  .happy{
    top: 1%;
    left: 90%;
  }
  .bun{
    top: 65%;
    
  }
 
  .sun{
    left:-10%
  }
  .fish{
    top: 22%;
    height: 5vh;
    width: 10vw; 
    left: 83%;
  }
  .bells{
    top: 15%;
    left: 13%;
  }
  .lots{
    left: 23%;
    top: 15%;
  }
  .small{
    left: 13%;
    top: 10%;
  }
  .welcome{
    left: 20%;
  }
  .sparkles{
    top: 10%;
    left: 90%;
  }
  .amore2{
    top: 23%;
  }
  .angel{
    top: 6%;
    left: 85%;
    height: 25vh;
    width: 14vw; 
  }

}


@media only screen and (max-width: 1100px) {


  .middle{
    left: -10%;
  }
.welcome{
  left: 19%;
}
  .cloud1{
    left: 15%;
  }
  .cloud2{
    left: 82%;
  }
.bun{
  display: none;
}
.church{
  left: 80%;
}
.sister, .ontop{
  left: 40%;
}
.cross2{
  height: 11vh;
  width: 21vw; 
  top: 27%;
  left: 33%;
}
.bells{
  height: 22vh;
  width: 18vw; 
}
.rosescolor{
 
  top: -10%;
}

}
@media only screen and (max-width: 1000px) {
  .middle{
    left: -15%;
  }
  
  .cloud2{
    left: 86%;
    top: 63%;
  }
  .cloud1{
    top: 63%;
  }
  .rosescolor{
 
    top: -10%;
  }
}

@media only screen and (max-width: 900px) {

.middle{
  width: 60vw;
  left: -10%;
  
}
.rainbow{
  width: 95vw;
  z-index: 1;
}
.sister, .ontop{
  left: 50%;
  top: 38%;
}
.day{
  top: 20%;
}
.clickinfo{
  left: 50%;
  width: 80vw;
  top: 67%;
}
.point{
  height: 20vh;
  width: 15vw; 
  background-size: 100% auto;
  left: 7%;
  top: 72%;
}
.rosestop{
  width: 60vw;
  left: 50%;
}
.cloud2{
  left:140%
}
.sun{
  left:-15%;
}
.saves{
  height: 25vh;
  width: 25vw; 
  top: 40%;
  left: 76%;
  z-index: 1;
}
.fleft3{
  height: 15vh;
  width:30vw;
  top: 21%;
    left: -6%;
    
}
.fleft2{
  height: 15vh;
  width:30vw;
  top: 57%;
    left: 75%;
    
}
.pigonrose{
  height: 10vh;
    width: 15vh; 
    top: 5%;
}
.sun{
  height: 15vh;
    width: 15vh; 
    background-size:  auto 100%;
    left: 0;
}
.lots{
  top: 15%;
  z-index: 1;
  width: 70vw;
  left: 13%;
}
.sunny{
  z-index: 0;
}
.bells{
  display: none;
}
.small{
  display: none;
}
.amore2{
  z-index: 1;
}
.love2{
  z-index: 1;
}
.rosescolor{
 
  top: -10%;
}
.welcome{
  width: 80vw;
  left: 10%;
}
.cross2{
  top: 20%;
  left: 25%;
}
.fleft, .swan, .unicorn, .fish, .love, .amore2{
  display: none;
}
.sunny{
  z-index: 0;
}
.bible{
  height: 20vh;
  width: 20vw; 
  background-size: 100% auto ;
  z-index: 1;
  left: 76%;
}
}



@media only screen and (max-width: 800px) {
  .middle{
    top: 2%;
  }
  .cloud1{
    top: 60%;
    left:17%;
  }
  .cloud2{
    top: 60%;
    left:127%;
  }
  .angel{
    top: 8%;
    left: 80%;
    height: 30vh;
    width: 19vw; 
  }
  .saves{
    left: 75%;
  }
  .flower1{
    left: 35%;
  }
  .flower2{
    left: 45%;
  }
  .flower3{
    left: 55%;
  }
  .sheep{
    display: none;
  }
  .love2{
    display: none;
  }
}

@media only screen and (max-width: 700px){
.middle{
  top:4%;
  
}
.sister, .ontop{
  left: 50%;
  top: 36%;
  height: 28vh;
}
.cloud1, .cloud2{
  top: 55%;
}
.clickinfo{
  top: 63%;
}
.rosestop{
  top: 57%;
}
.welcome{
  top: 5%;
  left: 8%;
  width: 85vw;
}
.lots{
  left:15%
}
}
@media only screen and (max-width: 650px){
  .middle{
    top:4%;
   
  }
  .sister, .ontop{
    left: 50%;
    top: 33%;
    height: 30vh;
    width: 50vh;
    background-size: 100% auto;
  }
  
  .rosestop{
  height: 10vh;
  width: 50vw;
  left: 58%;
  top: 53%;
  }
  .clickinfo{
    top: 58%;
    height: 15vh;
  }
  .cloud1{
    height: 40vh;
    width: 40vw;
    top:53%;
  }
  .cloud2{
    top:53%;
    height: 40vh;
    width: 40vw;
  }
}
@media only screen and (max-width: 600px){
  .middle{
    top:3%;
  }
  .sister, .ontop{
    left: 52%;
    top: 30%;
    height: 25vh;
    width: 45vh;
  }
  .clickinfo{
    top: 50%;
    left: 50%;
   
  
  }
  .rosestop{
    top: 45%;
    }
    .cloud2, .cloud1{
      top:48%;
      height: 37vh;
      width: 37vw;
    }
}

@media only screen and (max-width: 550px){
  .sister, .ontop{
    left: 55%;
    top: 35%;
    height: 20vh;
    width: 35vh;
  }
  .rainbow{
    top: 20%;
  }
  .unicorn{
    display: block;
  }
  .cloud2, .cloud1{
    top:48%;
    height: 35vh;
    width: 40vw;
    background-size: 100% auto;
  }
  .cloud2{
    left: 124%;
  }
  .welcome{
    top: 8%;
    left: -1%;
    width: 103vw;
  }
  .lots{
    width: 95vw;
    left: 2%;
  }
  .fleft3{
    height: 25vh;
    width:35vw;
    top: 21%;
      left: -6%;
      background-size:100% auto  ;
  }
  .fleft2{
    height: 25vh;
    width:35vw;
    top: 60%;
      left: 80%;
      background-size:100% auto ;
  }
  .rock{
    top: 60%;
  }
  .point{
    top: 56%;
  }
  .bible{
    top: 20%;
  }
  .saves{
    top: 34%;
  }
  .lovsu{
    top: 70%;
    width: 30vw;
  }
  .clickinfo{
    top: 51%;
    left: 50%;
    height: 12vh;
  
  }
  .rosestop{
    top: 47%;
    width: 62vw;
    height: 8vh;
    left: 49%;
    
    
    }
}


@media only screen and (max-width: 500px){
  .sister, .ontop{
    left: 52%;
    top: 30%;
    height: 20vh;
    width: 40vh;
    
  }
  .clickinfo{
    top: 50%;
    left: 50%;
  
  }
  .rosestop{
    top: 46%;
    }
    .cloud1{
      height: 35vh;
      width: 35vw;
      top:45%;
    }
    .cloud2{
      height: 35vh;
      width: 35vw;
      top:45%;
    }
  .fleft2, .fleft3{
    width:35vw;
  }
  .rock{
    top: 60%;
  }
  .point{
    top: 56%;
  }
  .bible{
    top: 20%;
  }
  .saves{
    top: 34%;
  }
  .lovsu{
    top: 70%;
    width: 30vw;
  }
  .sun{
    left: -20%;
    top: 2%;
    display: block;
  }
 
  .star{
    height: 15vh;
    width: 10vw; 
    top: 43%;
    left: 16%;
    display: block;
    z-index: 3;
  }
  .bells{
    width: 15vw;
    height:25vh;
    left: -8%;
    top: 7%;
    background-size: 100% 40% ;
    display: block;
   }
   .cross2{
    height: 9vh;
    width: 15vw; 
    top: 20%;
    left: 35%;
  }
  .wings{
    z-index: 1;
    width: 20vw;
    top: 30%;
    left: 76%;
  }
  .saves{
    width: 30vw;
    left: 63%;
  }
  
  .sunny{
    display: block;
    left: 50%;
   top: 50%;
    
  }
  .amore2{
    height: 10vh;
    width: 10vh;
    top: 18%;
    left: 58%;
    display: block;
   }
   .love2{
     display: block;
   }
   .but{
     top: 60%;
     left: 38%;
     width: 18vw;
     height: 15vh;
     background-size: 100% 100%;
   }
   .pigonrose{
     top: 0;
   }
   .rosescolor{
     width: 20vw;
     left: 30%;
     top: -10%;
     
   }
   .happy{
     left: 60%;
   }
   .sheep{
     display: block;
     width: 20vw;
     left: 10%;
     top: 86%;
     z-index: 5;
   }
   .sparkles{
     left: 77%;
     width: 60vw;
   }
   .loves{
     display: block;
   }

   @keyframes run{
    0% {
        transform: translateX(75vw) translateY(51vh)  rotatez(180deg);
    }
    49.009% {
      transform: translateX(15vw) translateY(51vh) rotateZ(180deg);
    }
    50% {
        transform: translateX(15vw) translateY(51vh) scaleX(-1) rotatez(180deg);
    }
    99.009% {
      transform: translateX(75vw) translateY(51vh) scaleX(-1) rotatez(180deg);
  }
    100% {
      transform: translateX(75vw) translateY(51vh) scaleX(1) rotatez(180deg);
  }

   }
   .fire{
     display: block;
     width: 80vw;
     left: 5%;
     mix-blend-mode: screen;
   }
   .love{
     display: block;
     top: 60%;
     width: 40vw;
   }
   .flower1, .flower2, .flower3{
     height: 20vh;
     width: 23vw;
     bottom: 6%; 
     z-index: 1;
   }
   .flower1{
     left: 20%;
    
   }
   .sun{
     left: -40%;
     width: 50vw;
     height: 15vh;
     background-size: 180% 100%;
   }
   .flower2{
    left: 40%;
    bottom: 10%;
    z-index: 1;
  }
  .flower3{
    left: 60%;
  }
  .rock{
    width: 45vw;
  }
  .lovsu{
    left: 60%;
    top: 66%;
  }
  .angel{
   height: 30vh;
   width: 30vw;
   left: 70%;
   top: 0;
   
  }
  .rosescolor{
    width: 30vw;
    height: 30vh;
    top: -10%;
    background-size: 100% 100%;
  }
}






@media only screen and (max-width: 300px) {
  
   

 

  .welcome{
    width: 100vw;
    background-size: 110% 50%;
    left: 1%;
    top: 5%;
    
  }
  .lots{
    width: 90vw;
    background-size: 100% 30%;
    left: 5%;
    top: 15%;
  }
  .pigonrose{
    height: 5vh;
    width: 5vh;
    top: 4%;
  }
  
  .loves{
    height: 25vh;
    width: 35vw;
    left: 60%;
    top: 20%;
    background-size: contain;
  }
  .fleft3{
    height: 25vh;
    width:35vw;
    top: 21%;
      left: -6%;
      background-size:100% auto  ;
  }
  .fleft2{
    height: 25vh;
    width:35vw;
    top: 60%;
      left: 80%;
      background-size:100% auto ;
  }
  .love{
    height: 15vh;
    width: 35vw;
    left: 7%;
    top: 68%;
    background-size: contain;
    opacity: 0;
  }
  .rock{
    height: 20vh;
    width: 35vw;
    left: 20%;
    top: 60%;
    background-size: 100% auto;
  }
  .church{
    height: 20vh;
    width: 35vw;
    top: 70%;
    left: 70%;
    background-size: 100% auto;
  }
  .middle{
    top: -3%;
  }
  .rainbow{
    width: 90vw;
    height: 47vh;
    left: 5%;
    top: 27%;
    background-size: 100% auto;
   }
   .bells{
    width: 15vw;
    height:25vh;
    left: 15%;
    top: 7%;
    background-size: 100% 40% ;
   }
   .smalllove, .thanks, .kisses, .hands, .fire, .butnf, .fleft, .hand, .fright, .bun{
   display: none;
   }
   .rosescolor{
    height: 15vh;
    width: 10vw; 
    background-size: 100% auto;
    top: -10%;
   }
   .happy{
    height: 5vh;
    width: 10vw; 
    left: 55%;
    top: 1%;
   }
   .sheep{
     left: 5%;
     top: 83%;
     z-index: 5;
   }

  
   
   .point{
    height: 20vh;
    width: 15vw;
    top: 53%;
    left: 1%;
   }
   .love2{
    height: 10vh;
    width: 8vh;
    left: 3%;
    top: 73%;
    display: none;
   }
   .day{
    height: 15vh;
    width: 20vw; 
    top: 18%;
   }
   .bible{
    height: 15vh;
    width: 15vw; 
    top: 30%;
    
   }
   .fish{
    height: 10vh;
    width: 15vw; 
    left: 83%;
    top: 20%;
    background-size: 100% auto ;
   }


   .sunny{
    height: 15vh;
    width: 15vh; 
    top: 2%;
    left: 80%;
    z-index: 1;
   }
   .angel{
    height: 34vh;
    width: 22vw; 
    top: 17%;
    left: 65%;
   }
   .lovsu{
    height: 20vh;
    width: 25vw; 
    top: 61%;
    left: 60%;
    background-size: 100% 60%;
    z-index: 1;
   }
  .sister {
    height: 20vh;
    width: 50vw;
    left: 25%;
    top: 39vh;
    background-size: 100% auto;
  }
  .ontop{
    height: 20vh;
    width: 50vw;
    left: 25%;
    top: 39vh;
    background-size: 100% auto;
  }
  .grass{
    width: 100vw;
    height: 50vh;
    background-size: auto 100% ;
    z-index: 3;
    bottom: -4%;
  }
  .but{
    top: 55%;
    height: 15vh;
    width: 20vw; 
  }
  .saves{
    height: 25vh;
    width: 25vw; 
  }
  .sparkles{
    height: 20vh;
    width: 25vw;
    top: 25%;
    background-size: 100% auto  ;
  }
  .small{
    height: 10vh;
    width: 10vw; 
    top: 22%;
    left: 5%;
  }
  


  .cloud1{
    height: 20vh;
    width: 30vw;
    left: 0;
    top: 51%;
    background-size: cover;
  
    
  }
  .cloud2{
    height: 20vh;
    width: 30vw;
    left: 70%;
    top: 51%;
    background-size: cover;
  }
  
  .flower{
    height: 20vw;
    width:10vw;
    opacity: 0;
  }
  .trust{
    height: 20vh;
    width: 20vw;
  }

  .flower1{
    height: 20vh;
    width: 15vh;
    left: 12%;
    bottom:6%
  }
  .flower2{
    height: 20vh;
    width: 15vh;
    left: 38%;
    bottom:8%;
    z-index: 7;
  }
  .flower3{
    height: 20vh;
    width: 15vh;
    left: 62%;
    bottom:5%
  }
 

  .swan{
    height: 50vh;
    width: 50vw; 
    left:-10%;
    bottom: 5%;
    background-size: 500%;
    
  }
  .rosestop{
    height: 7vh;
    width: 70vw;
    left: 15%;
    top: 50%;
  }

  .clickinfo{
    width: 99vw;
    height: 13vh;
    left: 0;
    top: 51vh;
    background-position:center ;
    }



}