/* General For All
––––––––––––––––––––––––––––––––––––––––––––––––––

font-weight: 300;
font-weight: 600;
font-weight: 700;
font-weight: 900;


purple      #7b0058
gray-brown #665161
navy #1c0956
yellow #faf77e
light yellow #f9f6c7
light pink #ea68af
dark pink #f72485
light blue #9ce2d9
blue #4ecdc4
light orange #f2b288
orange #ff9139
*/



body{background-color: #f9f6c7; font-size: 100%;}
img {max-width: 100%; height: 100%;}

nav{
    width: 100%;
    height: 45px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 25px;
    border-bottom: 2px solid #1c0956;
    background-color: #f9f6c7;
    position: relative;
    z-index: 1000;
}


    

.about, .project{
    width: 49.5%;
    height: 45px;
    text-align: center;
    z-index: 3;
    padding-top: 25px;
    
}

.about {
    border-left: 2px solid #1c0956;
}

.about a, .project a{
    font-family: urbane-rounded,sans-serif;
    font-weight: 500;
    font-style: normal;
    text-decoration: none;
    margin-top: 15px;
    color: #1c0956;
    transition: all .3s ease-in;
}

.about a:hover, .project a:hover{
    color:#f72485;
}

#hero{
    width: 100%;
    height: 100%;
   overflow: hidden; 
}

video#bgvideo {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url() no-repeat;
background-size: cover;
overflow: hidden;
}


.arrow { 
    position: absolute; bottom:50px;
    margin: auto;
    width:100%;
    height: 30px;
    transform: translateY(0);
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 750ms ease-in-out;
    -ms-transition: all 750ms ease-in-out;
    -o-transition: all 750ms ease-in-out;
    transition: all 750ms ease-in-out;
  }

.lift {
    transform: translateY(14px);
}


h1{
    font-family: urbane-rounded,sans-serif;
    font-weight: 300;
    font-style: normal;
    line-height: 1.3;
    font-size: 2.5em;
   
}



#welcomebg{
     background: linear-gradient(-45deg, #f9f6c7, #f2b288, #ea68af );
    background-size: 400% 400%;
    animation: gradient 30s ease infinite;
    z-index: 1000;
	 overflow: hidden;
    
}



@keyframes gradient {
   
	0% {
		background-position:  0% 50%;
	}
	50% {
		background-position:  100% 50%;
	}
	100% {
		background-position:  0% 50%;
	}
}

.wel{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow: hidden;
 
}

.welobjects{
    width: 55%;   
}

.welcomestory{
      width: 45%;
    height: 1080px;

}

#welcomeobject{
    width: 100%;
    height: 1900px;
    padding-top: 50px;
    
  
 
}

#welobjectmobile{
    display: none;
    height: 900px;
}



.welcomeh1{
    width: 100%;
    max-width:550px;
    font-weight: 300;
    font-size: 1.5em;
    text-align: left;
    color: #1c0956;
    padding-left: 25px;
   
}

.hm{
    font-weight: 600;
}

button {
    width: 175px;
    height: 40px;
    border-radius: 25px;
    border: none;
    background-color: #1c0956;
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
    margin-top: 35px;
    outline: none;
}

button:hover{
    background-color: #f72485;
}

a{
    text-decoration: none;
}
/* welcomeQR popup */
.buttonwel .welcomepopup {
    visibility: hidden;
    width: 100%;
    height: 250px;
    background-image: url(images/welcomeQRcode_03.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    text-align: center;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -85px;
 
}

/* Popup arrow */
.buttonwel .welcomepopup::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-style: none;
  
}

/* Toggle this class - hide and show the popup */
.buttonwel .show1 {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

.linkwel{
   display: none;
    
}


.birdbg{
    width: 100%;
    background: linear-gradient(45deg, #7b0058, #f72485, #9ce2d9);
    background-size: 400% 400%;
    animation: gradient 35s ease infinite;

 
}

@keyframes gradient {
   
	0% {
		background-position:  0% 50%;
	}
	50% {
		background-position:  100% 50%;
	}
	100% {
		background-position:  0% 50%;
	}
}




.birdimg{
    width: 100%;
    height: 100%;
    background-image: url(images/leftbird_1920.png);
    background-repeat: no-repeat;
    background-size: contain;
    margin-right: 100px;
 
   
  
}


.feeder{
    width: 100%;
     height: 100%;
    background-image:  url(images/feeder_1920.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-top: -3px;
    -webkit-transform-origin: 60% 0;
    transform-origin: 65% 0;
    -webkit-animation: swinging 3s ease-in-out forwards infinite;
    animation: swinging 5s ease-in-out forwards infinite;
  
}

@-webkit-keyframes swinging{
    0%{-webkit-transform: rotate(2deg);}
    50%{-webkit-transform: rotate(-1deg)}
    100%{-webkit-transform: rotate(2deg);}
}
 



.flowers{
    width: 100%;
    height: 100%;
    background-image: url(images/flowers.png);
    background-repeat: no-repeat;
    background-position:bottom;
    background-size: cover;
    padding-bottom: 3px;
  
}

.rightbird{
    width: 100%;
    height: 100%;
    float: right;
    background-image: url(images/rightbirt_1920.png);
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
    position: absolute;
  animation: flight 10s ease-in-out infinite;
  animation: flight 15s ease-in-out infinite;
    overflow: hidden;
}

@keyframes flight {
  0%   {left:0px; top:0px;}

  50%  { left:100px; top:100px;}

  100% {left:0px; top:0px;}
}


.birdh1{
    width: 100%;
    height: auto;
    max-width: 550px;
    padding-top:300px;
    float: left;
    padding-left: 250px;
    text-align: left;
    color: #f9f6c7; 
    margin-left: 100px;
    font-size: 2.8em;
    position: relative;
    
  
}



.hummingbird{
    font-weight: 600;
   
}


#donutbg{
    background: linear-gradient(-45deg, #ea68af, #f9f6c7, #9ce2d9 );
   background-size: 400% 400%;
    animation: gradient 30s ease infinite;
    z-index: 1000;
	 overflow: hidden;
}

@keyframes gradient {
   
	0% {
		background-position:  0% 50%;
	}
	50% {
		background-position:  100% 50%;
	}
	100% {
		background-position:  0% 50%;
	}
}


.donutimg{
    width: 100%;
    height: 1080px;
   background-image: url(images/donuts_1920_03.png);

    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
   
}



.donut{
    width: 100%;
    height: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
   

}

#donutobj{
    width: 50%;
    height: 1400px;
    display: block;
    margin-top: -200px;

 
    
}

#donutobjmobile{
    display: none;
    } 

.donutstory{
    width: 50%;
    max-width: 600px;
    text-align: center;
    color: #1c0956;
    margin-top: -410px;
  
   }

.donuts{
    font-weight: 600;
}

p{
    color: #f72485;
   font-family: urbane-rounded, sans-serif;
    font-weight: 500;
    font-style: normal;
  
}

p:hover{
    color:#1c0956;
}

.linkdonut{
   display: none;
    
}

/* The actual popup */
.buttondonut .donutpopup {
    visibility: hidden;
    width: 100%;
    height: 250px;
    background-image: url(images/donutQRcode.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    margin-left: -85px;
}

/* Popup arrow */
.buttondonut .donutpopup::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border-style: none;
}

.buttondonut .show2{
     visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
   
}

/* Toggle this class - hide and show the popup */
.buttondonut{
     margin: auto;
    margin-top: 25px;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}


.runningbg{
    background: linear-gradient(-45deg, #1c0956, #7b0058, #f72485, #faf77e);
   background-size: 500% 500%;
    animation: gradient 35s ease infinite;
	 overflow: hidden;
}

@keyframes gradient {
   
	0% {
		background-position:  0% 50%;
	}
	50% {
		background-position:  100% 50%;
	}
	100% {
		background-position:  0% 50%;
	}
}

.runimg{
   width: 100%;
  height: 100%;
    background-image: url(images/Shoes_1920.png);
    background-repeat: no-repeat;
    background-position:center bottom;
    background-size: cover;  
}


/*
.rightflowers{
     width: 639px;
    height: 1080px;
    background-image: url(images/rightflowers_03.png);
    background-repeat: no-repeat;
    background-position:right;
    background-size: cover;
    float: right;
   
}
 */ 

.runh1{
    width: 100%;
    max-width: 650px;
    float: right;
    margin-right: 400px;
    margin-top: 250px;
    color: #f9f6c7; 
    font-weight: 300;
    text-align: left;
    z-index: 1000;
}

.run{
    font-weight: 600;
}

.laundrybg{
    background: linear-gradient(-45deg, #4ecdc4, #7b0058, #f72485, #9ce2d9);
   background-size: 500% 500%;
    animation: gradient 30s ease infinite;
	 overflow: hidden;
}

@keyframes gradient {
   
	0% {
		background-position:  0% 50%;
	}
	50% {
		background-position:  100% 50%;
	}
	100% {
		background-position:  0% 50%;
	}
}

.laundryimg{
   width: 100%;
  height: 100%;
    background-image: url(images/Laundry_1920_02.png);
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover; 
}



.laundryh1{
    width:  50%;
    max-width: 850px;
    color: #1c0956;
    float: right;
    margin-top: 200px;
    margin-right: 150px;
    font-size: 1.5em;
    
}

.laundry{
    font-weight: 600;
}

.bubbles{
      width: 100%;
  height: 900px;
    background-image: url(images/bubbles_04.png);
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover; 
    float: left;
    margin-top: -500px;
    margin-left: -100px;
    animation: float 15s ease-in-out infinite;
  

}

@keyframes float {
  50% {
     transform: translate(20px, 30px);
  }

 
}
.bubbles2{
      width: 100%;
    height: 525px;
    background-image: url(images/bubbles_05.png);
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover; 
    margin-left: -455px;
    margin-top: -300px;
    animation: float2 30s ease-in-out infinite;
  

}

@keyframes float2 {
  50% {
     transform: translate(30px, 60px);
  }

 
}
.butterflybg{
     background: linear-gradient(-45deg,  #4ecdc4, #9ce2d9, #f9f6c7, #f72485);
   background-size: 500% 500%;
    animation: gradient 35s ease infinite;
	 overflow: hidden;
}

@keyframes gradient {
   
	0% {
		background-position:  0% 50%;
	}
	50% {
		background-position:  100% 50%;
	}
	100% {
		background-position:  0% 50%;
	}
}



.butterflyimg{
    width: 100%;
    height: 100%;
    background-image: url(images/conservatory.png);
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover; 
}

.butterfly{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
   
   
}

.fly{
    font-weight: 600;
}

#butterflyobject{
   width: 50%;
    height: 1500px;
 
    
}

.butterflystory{
    width: 35%; 
    max-width: 600px;
    text-align: left;
  margin-top: 300px;
     color: #1c0956;
}



/* butterflyQR popup */
.buttonfly .butterflypopup {
    visibility: hidden;
    width: 100%;
    height: 250px;
    background-image: url(images/butterflyQRcode_03.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    position: absolute;
    z-index: 5;
    bottom: 125%;
    left: 50%;
    margin-left: -85px;
 
}

/* Popup arrow */
.buttonfly .butterflypopup::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-style: none;
  
}

.buttonfly  .show3 {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Toggle this class - hide and show the popup */


.linkfly{
   display: none;
    
}

.rainbg{
     background: linear-gradient(-25deg, #f9f6c7,#9ce2d9,#4ecdc4,#1c0956);
    background-size: 400% 400%;
    animation: gradient 35s ease infinite;
	 overflow: hidden;
}

@keyframes gradient {
   
	0% {
		background-position:  0% 50%;
	}
	50% {
		background-position:  100% 50%;
	}
	100% {
		background-position:  0% 50%;
	}
}

.rainimg{
     width: 100%;

    background-image: url(images/rain1920_03.png);
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover; 
    
}

.raingif{
     width:50%;
    height: 320px;
    background-image: url(images/rain.png);
    background-repeat: no-repeat;
    background-position:bottom;
    background-size: cover; 
    margin-top: 300px;
    padding-top: 200px;
    
    
}

.rainstory{
    width: 100%;
    padding-top: 150px;
    color: #1c0956;
  
    
}

.rainh1{
    width: 100%;
    max-width: 800px;
    text-align: center;
    margin: auto;
    
}

.rain{
    font-weight: 600;
}
.form{
    background: linear-gradient(-45deg, #f9f6c7, #f2b288, #ea68af );
    background-size: 400% 400%;
    animation: gradient 30s ease infinite;
    z-index: 1000;
	 overflow: hidden;

     
    
}
.formsec{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;


    
}

.formimgcont{
    width: 100%;
    text-align: center;
}
.cognito{
    width: 100%;

}

.formimg{
    width: 100%;
    max-width: 500px;
}

/*
purple #7b0058
gray-brown #665161
navy #1c0956
yellow #faf77e
light yellow #f9f6c7
light pink #ea68af
dark pink #f72485
light blue #9ce2d9
blue #4ecdc4
light orange #f2b288
orange #ff9139
*/


/* ---------------smaller desk browser/ laptop --------------------------------------*/

@media screen and (min-width: 1025px) and (max-width: 1536px){
    
/*welcome section*/
    
.welobjects{
    width: 55%;   
}

.welcomestory{
      width: 45%;
    height: 1080px;

}

#welcomeobject{
    width: 100%;
    height: 1487px;
    padding-top: 25px;
    
  
 
}


.welcomeh1{
 
    max-width:450px;
    font-size: 1.2em;
 
   
}
 
/*hummingbirds section*/

    
    .birdimg{
        margin-left: -100px;
    }
.rightbird{
    margin-top: 0;
    position: absolute; 
}

.birdh1{
    width: 100%;
    max-width: 400px;
    padding-left: 50px;
    margin-left: 0;
    font-size: 2em;
    margin-top: -100px;
}


/*donut section*/    



.donutimg{
    width: 100%;
    height: 100%;  
}


#donutobj{
    width: 50%;
    height: 2295px;
    display: block;
    margin-top: -208px;

 
    
}

#donutobjmobile{
    display: none;
    } 

.donutstory{
    width: 50%;
    height: 100%;
    max-width: 600px;
    text-align: center;
    color: #1c0956;
    margin-top: -311px;
  
   }


 /*run section*/ 

.runh1{
    max-width: 500px;
    margin-right: 200px;
    font-size: .75em;

}  
  
 /*laundry section*/    
   
 .laundryh1{
    font-size: .8em;
     max-width: 500px;
     margin-top: 200px;
     margin-right: 200px;
}

.bubbles{
    height: 600px;
    margin-top: -350px;
   
 
}
.bubbles2{
    height: 425px;
    margin-left: -350px;
    margin-top: -300px;
}

 /*butterfly section*/   



#butterflyobject{
   width: 50%;
    height: 1002px;
 
    
}

.butterflystory{
    width: 35%;
    height: 100%;
    max-width: 400px;
    text-align: left;
  margin-top: 100px;
    font-size: .85em;
}

/*rain section*/ 

.rainh1{
    max-width: 600px;
    font-size: 1.8em;
}


.rainstory{

    padding-top: 100px;
    
}
    
    .raingif{
     width:65%;
    height: 150px;
      margin-top: 350px;  

    
    
}
    .formimg{
    width: 100%;
    max-width: 300px;
}
    
  
}

/* ---------------Tablet --------------------------------------*/
@media screen and (min-width: 671px) and (max-width: 1024px) {

    .arrow{
    height: 23px;
    padding-bottom: 175px;
        
    }
    #bgvideo{
        display: none;
    }   
#hero{
    width: 100%;
    height: 115%;
    background-color: #f9f6c7;
    background-image: url(images/hmtablet.png);
       background-repeat: no-repeat;
    background-position:center center;
    background-size: cover;
    }


.buttonwel{
  display: none;
}

.linkwel{
   display: block;   
}
    
#welobjectmobile{
    display: block;
}
    
#welcomeobject{
    display:none;}


.wel{
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}
.welobjects{
        width: 100%;
    }   
#welobjectmobile{
        width: 100%;
        height: 413px;
    }

.welcomestory{
      width: 60%;

}

.welcomeh1{
    font-size: 1.2em;
}
    
/*hummingbirds section*/


.birdimg{
    width: 100%;
    height: 65%;
    margin-left: -200px;
}

.flowers{
    width: 100%;
    height: 100%;
    background-image: url(images/flowerstablet.png);
    background-repeat: no-repeat;
    background-position:bottom;
    background-size: cover;
    
 
  
}
    
.feeder{
        height: 150%;
        margin-left: 200px;
    }

.rightbird{
    width: 100%;
    height: 50%;
    float: right;
 

}

 .birdh1{
     max-width: 400px;
        text-align: left;
        margin: auto;
        color: #1c0956;
        z-index: 1000;
     font-size: 2em;
     padding-left: 75px;
     padding-top: 200px;
    }


/*donut section*/    
 .linkdonut{
    display: block; 
     margin: auto;
   margin-top: 25px;
}
    

.buttondonut {
   display:none;
}
    
    
.donutimg{
    width: 100%;
    height: 55%;
    margin-top: 100px;

}

#donutobj{
    width: 65%;
    height: 3500px;
    margin-top: -213px;
    
}

.donutstory{
    width: 100%;
    max-width: 400px;
    height: 100%;
    margin-top: -300px;
    font-size: .8em;
   }

 /*run section tablet*/  
.runimg{
   width: 100%;
  height: 100%;
    background-image: url(images/shoestablet.png);
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
    margin: auto;
}




.runh1{
    width: 100%;
    max-width: 425px;
    height: 100%;
    font-size: .7em;
    margin-right: 26px;
     margin-top: 200px;
    float: right;
}
    
 /*laundry section*/    
    
 .laundryimg{
   width: 100%;
  height: 100%;
    background-image: url(images/laundrytablet.png);
   position: absolute;

}



.laundryh1{
    width:  100%;
    max-width: 600px;
    margin: auto;
    margin-top: 200px;
    text-align: center;
   float: none;
    font-size: .95em;

    
}

.bubbles{
    height: 700px;
    margin-top: -350px;
    margin-left: 200px;
   
 
}
.bubbles2{
    height: 500px;
    margin-left: -100px;
    margin-top: -300px;
}

 /*butterfly section*/   
    

.butterflyimg{
    width: 100%;
    height: 100%;
    background-image: url(images/conservatory%20tablet.png);
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover; 
}

.butterfly{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
   align-items: center;
   
   
}

.fly{
    font-weight: 600;
}

#butterflyobject{
   width: 50%;
    height: 1000px;
    margin-left: -100px; 
    margin-top: 300px;
    
}

.butterflystory{
    width: 100%; 
    height: 100%;
    max-width: 500px;
    text-align: left;
    margin: auto;
    margin-top: -1084px;
    font-size: .75em;

}
    
.buttonfly {
  display: none;

}

    
.linkfly{
     display: block;
    text-align: center;
   
    
}


/*rain section*/ 

.rainh1{
    max-width: 500px;
    font-size: 2em;
}


.rainstory{

    padding-top: 100px;
  
    
}
        
    .raingif{
     width:75%;
    height: 150px;

    
    
} 
    

   
}

/* ---------------Mobile 6SE-------------------------------------- */
@media screen and (min-width: 319px) and (max-width: 374px){

.arrow{
    height: 20px;

    }
    #bgvideo{
        display: none;
    }   
#hero{
    width: 100%;
    background-color: #f9f6c7;
    background-image: url(images/hmbutterfly_02.png);
       background-repeat: no-repeat;
    background-position:center right;
    background-size: cover;

    }
    
    
.buttonwel{
  display:  none;
 
}

.linkwel{
   display: block;
    float: left;
    margin-top: 26px;
}

#welobjectmobile{
    display: block;
}
    
#welcomeobject{
    display:none;}


.wel{
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
 
}
 
#welobjectmobile{
        width: 250%;
        height: 160px;
        margin-left: -130px;
        margin-top: -25px;

    }

.welcomestory{
      width: 100%;
    

}

.welcomeh1{
    max-width: 260px;
    font-size: .8em;
    font-weight: 500;
}
    
.birdimg{
    width: 100%;
    height: 50%;
   margin-top: -331px;
    margin-left: -84px;
}


.feeder{
    width: 100%;
     height: 70%;
    margin-left: -52px;
}

 

.rightbird{
    width: 100%;
    height: 50%;
    margin-top: -354px;
    margin-right: 74px;

}


.flowers{
    width: 100%;
    height: 100%;
    background-image: url(images/flowersbirdmobile.png);
    margin-top: -215px;
  
}


.birdh1{
    width: 100%;
    max-width: 241px;
    text-align: left;
    font-size: 1.2em;
    margin-left: 30px;
    padding-left: 0;
    margin-top: -22px;
    text-align: center;
}



#donutobj{
       display: none;
    }
    
#donutobjmobile{
    display: block;
    width: 75%;
    height: 892px;
    margin-top: -273px;
    margin-left: 21px;
    }   
    
.donut{
   
   }
    

.donutstory{
    margin-top: -337px;
    width: 100%;
    max-width: 300px;
    font-size: .5em;
      text-align: center;
    margin-left: -15px;
}
    
.donutimg{
    width: 100%;
    height:37%;
    margin-top: 27px;
}
    
    /*donut section*/    
 .linkdonut{
     display: block; 
   margin: auto;
     margin-top: 25px;
}
    
/* The actual popup */
.buttondonut {
   display:none;
}
    
.runimg{
    width: 100%;
    background-image: url(images/shoesmobile320.png);
   
}

.runh1{
    width: 100%;
    max-width: 250px;
    font-size: .4em;
     margin-top: 104px;
    color: #1c0956;
      margin-right: 11px;
}
    
    .laundryimg{
   width: 100%;
  height: 100%;
    background-image: url(images/Laundrymobile320.png);
   

}


.laundryh1{
    width:  100%;
    max-width: 247px;
    text-align: center;
    font-size: .5em;
    margin-top: 116px;
    margin-right: 40px;
    
}

.bubbles{
    height: 482px;
    margin-top: -365px;
    margin-left: 41px;
   
 
}
.bubbles2{
    height: 220px;
    margin-left: -18px;
    margin-top: -182px;
}

.butterflyimg{
    width: 100%;
    height: 100%;
    background-image: url(images/conservatorymobile320.png);
 
}

.butterfly{
  
    flex-direction: column;

   
}


#butterflyobject{
   width: 70%;
    height: 480px;
    margin-left: -100px; 
    margin-top: 264px;
    
}

.butterflystory{
    width: 100%; 
    max-width: 234px;
    margin-left: -4px;
    margin-top: -665px;
    font-size: .45em;
 
}

.buttonfly {
  display: none;
 

}

.linkfly{
   display: block;
    margin-top: 16px;

} 
    
    .rainimg{
     width: 100%;
   height: 100%;
    background-image: url(images/rainmobile320.png);
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
    position: absolute;
     
    
}

.raingif{
     width:100%;
    height: 125px; 
    margin-top: 230px;
    
    
}

.rainstory{
width: 100%;
  margin: auto;
    font-size: .75em;
    max-width: 280px;
    margin-top: -4px;
    
}

.rainh1{
    width: 100%;
   max-width: 350px;
    text-align: center;
    font-size: 1.5em;
    margin-top: -84px;
    
}
    
    .raingif{
        margin-top:196px;
    }
    

.cognito{
    width: 100%;
    max-width: 310px;

}

.formimg{
    display: none;
    max-width: 50%;
}

}

/* ---------------Mobile 6/7/8 iphone x-------------------------------------- */
@media screen and (min-width: 375px) and (max-width: 413px){

.arrow{
    height: 23px;
    padding-bottom: 91px;
        
    }
 
#bgvideo{
        display: none;
    }   
#hero{
    width: 100%;
    height: 115%;
    background-color: #f9f6c7;
    background-image: url(images/hmmobile.png);
       background-repeat: no-repeat;
    background-position:center center;
    background-size: cover;
    }
    
.buttonwel{
  display:  none;
 
}

.linkwel{
   display: block;
    float: left;
    margin-top: 26px;
}

#welobjectmobile{
    display: block;
}
    
#welcomeobject{
    display:none;}


.wel{
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    text-align: center;
}
 
#welobjectmobile{
        width: 250%;
        height: 257px;
        margin-left: -150px;
    margin-top: -59px;
    }

.welcomestory{
      width: 100%;
    

}

.welcomeh1{
    max-width: 305px;
    font-size: .95em;
    font-weight: 500;
}
    
    
.birdimg{
    width: 100%;
    height: 50%;
   margin-top: 0px;
    margin-left: -150px;
}


.feeder{
    width: 100%;
     height: 190%;
    margin-left: 100px;
}

 

.rightbird{
    width: 100%;
    height: 50%;
    margin-top: 0px;
    padding-right: 200px;
    margin-left: -200px;
   

}


.flowers{
    width: 100%;
    height: 100%;
    background-image: url(images/flowersbirdmobile.png);
 
  
}



.birdh1{
    width: 100%;
    height: 100%;
    max-width: 241px;
    font-size: 1.2em;
    padding-left: 30px;
    text-align: center;
    z-index: 1000;
     color: #1c0956;
    padding-top: 270px;
    margin: auto;
   
}

  /*donut section*/  
    
#donutobj{
       display: none;
    }
    
#donutobjmobile{
    display: block;
    width: 75%;
    height: 1397px;
    margin-top: -233px;
    margin-left: 37px;
    }   
    
.donutstory{
    margin-top: -330px;
    width: 100%;
    height: 100%;
    max-width: 300px;
    font-size: .5em;
      text-align: center;
    margin-left: 0px;
}
    
.donutimg{
    width: 100%;
    height: 50%;
    margin-top: 55px;
    
}
    
    
 .linkdonut{
     display: block; 
   margin: auto;
     margin-top: 25px;
}
    
.buttondonut {
   display:none;
}
    
.runimg{
    width: 100%;
   background-image: url(images/Shoes375.png);
 
   
}

.runh1{
    width: 100%;
    max-width: 291px;
    font-size: .58em;
     margin-top:93px;
      margin-right: 19px;
    color: #1c0956;
}
 
    .laundryimg{
   width: 100%;
  height: 100%;
    background-image: url(images/Laundry375.png);
   

}


.laundryh1{
    width:  100%;
    max-width: 300px;
    text-align: center;
    font-size: .6em;
    margin-top: 116px;
    margin-right: 40px;
    
}

.bubbles{
    height: 482px;
    margin-top: -365px;
    margin-left: 41px;
   
 
}
.bubbles2{
    height: 220px;
    margin-left: -18px;
    margin-top: -182px;
}

.butterflyimg{
    width: 100%;
    height: 100%;
    background-image: url(images/conservatory375.png);
   
 
}

.butterfly{
  
    flex-direction: column;

   
}


#butterflyobject{
   width: 70%;
    height: 560px;
    margin-left: 48px; 
    margin-top: 210px;
    
}

.butterflystory{
    width: 100%; 
    max-width: 300px;
    margin-left: 71px;
    margin-top: -671px;
    font-size: .6em;
 
}

.buttonfly {
  display: none;
 

}

.linkfly{
   display: block;
    margin-top: 16px;

} 
    
.rainimg{
     width: 100%;
   height: 100%;
    background-image: url(images/rainmobile320.png);
    background-repeat: no-repeat;
    background-position:center;
    background-size: cover;
    position: absolute;
     
    
}

.raingif{
     width:100%;
    height: 125px; 
    margin-top: 225px;
    padding-top: 20px;
    
    
}

.rainstory{
    margin: auto;
 
    
}

.rainh1{
    width: 100%;
   max-width: 350px;
    text-align: center;
    font-size: 1.5em;
    margin-top: -84px;
    
}


.formimgcont{
    width: 100%;
}

    .formimg{
        max-width: 150px;
    }
    
      .formsec{
        max-width: 300px;
        margin: auto;
    }
    
}

/* ---------------Mobile iphone xr/xs max-------------------------------------- */
@media screen and (min-width: 414px) and (max-width: 670px){
 
    .about a, .project a{
   font-size: .8em;
        font-weight: 500;
}

    .arrow{
    height: 23px;
    padding-bottom: 91px;
        
    }
 
#bgvideo{
        display: none;
    }   
#hero{
    width: 100%;
    height: 115%;
    background-color: #f9f6c7;
    background-image: url(images/hmmobile.png);
       background-repeat: no-repeat;
    background-position:center center;
    background-size: cover;
    }
    
    
   .buttonwel{
  display:  none;
 
}

.linkwel{
   display: block;
    float: left;
    margin-top: 26px;
}

#welobjectmobile{
    display: block;
}
    
#welcomeobject{
    display:none;}


.wel{
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    text-align: center;
}
 
#welobjectmobile{
        width: 250%;
        height: 318px;
        margin-left: -160px;
    margin-top: -59px;
    }

.welcomestory{
      width: 100%;
    

}

.welcomeh1{
    max-width: 325px;
    font-size: 1em;
} 
    
.birdimg{
    width: 100%;
    height: 50%;
   margin-top: 0px;
    margin-left: -200px;
}


.feeder{
    width: 100%;
     height: 190%;
    margin-left: 100px;
}

 

.rightbird{
    width: 100%;
    height: 50%;
    margin-top: 0px;
    padding-right: 200px;
    margin-left: -200px;
   

}


.flowers{
    width: 100%;
    height: 100%;
    background-image: url(images/flowersbirdmobile.png);
   
 
  
}


.birdh1{
    width: 100%;
    max-width: 241px;
    font-size: 1.2em;
    padding-left: 0;
    text-align: center;
    z-index: 1000;
     color: #1c0956;
   
}
    
    #donutobj{
       display: none;
    }
    
#donutobjmobile{
    display: block;
    width: 75%;
    height:1568px;
    margin-top: -233px;
    margin-left: 37px;
    }   
    
.buttondonut {
   display:none;
}
    

.donutstory{
    margin-top: -330px;
    width: 100%;
    height: 100%;
    max-width: 300px;
    font-size: .5em;
      text-align: center;
    margin-left: 0px;
}
    
.donutimg{
    width: 100%;
    height: 50%;
    margin-top: 55px;
    
}
    
    
 .linkdonut{
     display: block; 
   margin: auto;
     margin-top: 25px;
}
    
    .runimg{
    width: 100%;
   background-image: url(images/Shoes375.png);
        background-position: bottom center;
 
   
}

.runh1{
    width: 100%;
    max-width: 291px;
    font-size: .58em;
     margin-top:93px;
      margin-right: 19px;
    color: #1c0956;
}
    
        .laundryimg{
   width: 100%;
  height: 100%;
    background-image: url(images/Laundry375.png);
   

}


.laundryh1{
    width:  100%;
    max-width: 300px;
    text-align: center;
    font-size: .6em;
    margin-top: 116px;
    margin-right: 40px;
    
}

.bubbles{
    height: 482px;
    margin-top: -365px;
    margin-left: 41px;
   
 
}
.bubbles2{
    height: 220px;
    margin-left: -18px;
    margin-top: -182px;
}

.butterflyimg{
    width: 100%;
    height: 100%;
    background-image: url(images/conservatory375.png);
   
 
}

.butterfly{
  
    flex-direction: column;

   
}


#butterflyobject{
   width: 70%;
    height: 560px;
    margin-left: 48px; 
    margin-top: 275px;
    
}

.butterflystory{
    width: 100%; 
    max-width: 300px;
    margin-left: 71px;
    margin-top: -733px;
    font-size: .6em;
 
}

.buttonfly {
  display: none;
 

}

.linkfly{
   display: block;
    margin-top: 16px;

} 
    
.rainimg{
     width: 100%;
   height: 100%;
    background-image: url(images/rainmobile320.png);
    background-repeat: no-repeat;
    background-position:top center;
    background-size: cover;
    position: absolute;
     
    
}

.raingif{
     width:100%;
    height: 125px; 
    margin-top: 300px;
    padding-top: 20px;
    
    
}

.rainstory{
    margin: auto;
 
    
}

.rainh1{
    width: 100%;
   max-width: 350px;
    text-align: center;
    font-size: 1.5em;
    margin-top: -84px;
    
}


.formimgcont{
    width: 100%;
}

    .formimg{
        max-width: 150px;
}
    
    .formsec{
        max-width: 325px;
        margin: auto;
    }
  
}