@font-face {
    font-family: 'quicksandregular';
    src: url('quicksand-regular-webfont.eot');
    src: url('quicksand-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('quicksand-regular-webfont.woff') format('woff'),
         url('quicksand-regular-webfont.ttf') format('truetype'),
         url('quicksand-regular-webfont.svg#quicksandregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
  background-color: #b2e4fa;
}

@keyframes logo
{
0%   {top:0px; transform:rotate(0deg);}
50%  {top:20px; transform:rotate(5deg);}
100% {top:0px; transform:rotate(0deg);}
}

@-webkit-keyframes logo /* Safari and Chrome */
{
0%   {top:0px; -webkit-transform:rotate(0deg);}
50%  {top:20px;-webkit-transform:rotate(5deg);}
100% {top:0px; -webkit-transform:rotate(0deg);}
}

@keyframes cloud2
{
0%   {top:0px; left:0px; transform:rotate(0deg);}
50%  {top:0px; left:40px; transform:rotate(0deg);}
100% {top:0px; left:0px; transform:rotate(0deg);}
}

@-webkit-keyframes cloud2 /* Safari and Chrome */
{
0%   {top:0px; left:0px; -webkit-transform:rotate(0deg);}
50%  {top:0px; left:40px; -webkit-transform:rotate(0deg);}
100% {top:0px; left:0px; -webkit-transform:rotate(0deg);}
}

@keyframes cloud2
{
0%   {top:0px; transform:rotate(0deg);}
50%  {top:20px; transform:rotate(5deg);}
100% {top:0px; transform:rotate(0deg);}
}

@-webkit-keyframes cloudgo /* Safari and Chrome */
{
0%   {left:0px;  opacity:100;}
100% {left:-100%;  opacity:0;}
}

@keyframes cloudgo
{
0%   {left:0px; opacity:100;}
100% {left:-100%; opacity:0;}
}

@-webkit-keyframes cloudback /* Safari and Chrome */
{
0%   {left:-100%;  opacity:0;}
100% {left:0px;  opacity:100;}
}

@keyframes cloudback
{
0%   {left:-100%;  opacity:0;}
100% {left:0px;  opacity:100;}
}

@-webkit-keyframes cloudgo2 /* Safari and Chrome */
{
0%   {opacity:100;}
100% {opacity:0;}
}

@keyframes cloudgo2
{
0%   {opacity:100;}
100% {opacity:0;}
}

@-webkit-keyframes cloudback2 /* Safari and Chrome */
{
0%   {opacity:0;}
100% {opacity:100;}
}

@keyframes cloudback2
{
0%   {opacity:0;}
100% {opacity:100;}
}

@-webkit-keyframes cloudgo3 /* Safari and Chrome */
{
0%   {opacity:0;}
100% {opacity:100;}
}

@keyframes cloudgo3
{
0%   {opacity:0;}
100% {opacity:100;}
}

@-webkit-keyframes cloudgo4 /* Safari and Chrome */
{
0%   {background-color}
100% {background-color:#a2c1c3;}
}

@keyframes cloudgo4
{
0%   {background-color}
100% {background-color:#a2c1c3;}
}

@-webkit-keyframes cloudgo5 /* Safari and Chrome */
{
0%   {background-color}
100% {background-color:#b2e4fa;}
}

@keyframes cloudgo5
{
0%   {background-color}
100% {background-color:#b2e4fa;}
}

@-webkit-keyframes cloudgo6 /* Safari and Chrome */
{
0%   {background-color}
100% {background-color:#adb4d6;}
}

@keyframes cloudgo6
{
0%   {background-color}
100% {background-color:#adb4d6;}
}

@-webkit-keyframes cloudgo7 /* Safari and Chrome */
{
0%   {background-color}
100% {background-color:#85cdf7;}
}

@keyframes cloudgo7
{
0%   {background-color}
100% {background-color:#85cdf7;}
}

@-webkit-keyframes leaves /* Safari and Chrome */
{
0%   {left:0px; top:0px;  opacity:0;}
20%  {left: 50px; top: 50px; opacity:100;}
40%  {left: 0px; top: 100px; }
60%  {left: -50px; top: 150px; }
80%  {left: 0px; top: 200px; opacity:100;}
100% {left: 50px; top: 250px;  opacity:0;}
}

@keyframes leaves
{
0%   {left:0px; top:0px;  opacity:0;}
20%  {left: 50px; top: 50px; opacity:100;}
40%  {left: 0px; top: 100px; }
60%  {left: -50px; top: 150px; }
80%  {left: 0px; top: 200px; opacity:100;}
100% {left: 50px; top: 250px;  opacity:0;}
}

@-webkit-keyframes rabbit /* Safari and Chrome */
{
0%   {left: 65%; bottom: -50px;}
25%   {left: 70%; bottom: 90px;}
50% {left: 75%; bottom: -50px;}
75%   {left: 70%; bottom: 90px;}
100%   {left: 65%; bottom: -50px;}
}

@keyframes rabbit
{
0%   {left: 65%; bottom: -50px;}
25%   {left: 70%; bottom: 90px;}
50% {left: 75%; bottom: -50px;}
75%   {left: 70%; bottom: 90px;}
100%   {left: 65%; bottom: -50px;}
}

.winterback {
    margin-left:-1%;
    margin-top:-1%;
    position:fixed;
    width: 105%;
    height: 105%;
    background-color: #adb4d6;
}    

.shopback {
    margin-left:-1%;
    margin-top:-1%;
    position:fixed;
    width: 105%;
    height: 105%;
    background-color: #85cdf7;
}   

.homeback {
    margin-left:-1%;
    margin-top:-1%;
    position:fixed;
    width: 105%;
    height: 105%;
    background-color: #b2e4fa;
}  

.springback {
    margin-left:-1%;
    margin-top:-1%;
    position:fixed;
    width: 105%;
    height: 105%;
    background-color: #85cdf7;
}   

.autumnback {
    margin-left:-1%;
    margin-top:-1%;
    position:fixed;
    width: 105%;
    height: 105%;
    background-color: #a2c1c3;
} 

.autumn {
    display:none;
}

.winter {
    display:none;
}

.wintersm {
    display:none;
}

.shopsm {
    display:none;
}

.springsm {
    display:none;
}

.autumnsm {
    display:none;
}

.spring {
    display:none;
}

.shop {
    display:none;
}

.hills {
  width: 100%;
  position:fixed;
  min-width: 600px;
  max-width: 950px;
  bottom: 0px;
}

.textbox1 {
    position:absolute;
    width: 45%;
    height: 200%;
    left:45%;
    top: 30%;
    overflow:auto;
    font-family: quicksandregular;
    font-size: 30px;
    color: #ecfefd;
}

.textbox1sm {
    position:absolute;
    width: 55%;
    height: 200%;
    left:45%;
    top: 30%;
    overflow:auto;
    font-family: quicksandregular;
    font-size: 27px;
    color: #ecfefd;
}

.leaf {
    position:fixed;
    width:40px;
    margin-top: 30%;
    margin-left: 60%;
    display:none;
        animation:leaves 7s;
  animation-iteration-count: 99999;
  -webkit-animation:leaves 7s; /* Safari and Chrome */
  -webkit-animation-iteration-count: 99999;
}

.leaf2 {
    position:fixed;
    width:40px;
    margin-top: 35%;
    margin-left: 30%;
    display:none;
        animation:leaves 10s;
  animation-iteration-count: 99999;
  -webkit-animation:leaves 10s; /* Safari and Chrome */
  -webkit-animation-iteration-count: 99999;
}

.leaf3 {
    position:fixed;
    width:40px;
    margin-top: 40%;
    margin-left: 15%;
    display:none;
        animation:leaves 8s;
  animation-iteration-count: 99999;
  -webkit-animation:leaves 8s; /* Safari and Chrome */
  -webkit-animation-iteration-count: 99999;
}

.leaf4 {
    position:fixed;
    width:40px;
    margin-top: 40%;
    margin-left:80%;
    display:none;
        animation:leaves 12s;
  animation-iteration-count: 99999;
  -webkit-animation:leaves 12s; /* Safari and Chrome */
  -webkit-animation-iteration-count: 99999;
}
    
.snow {
    position:fixed;
    width:40px;
    margin-top: 30%;
    margin-left: 60%;
    display:none;
        animation:leaves 7s;
  animation-iteration-count: 99999;
  -webkit-animation:leaves 7s; /* Safari and Chrome */
  -webkit-animation-iteration-count: 99999;
}

.snow2 {
    position:fixed;
    width:40px;
    margin-top: 35%;
    margin-left: 30%;
    display:none;
        animation:leaves 10s;
  animation-iteration-count: 99999;
  -webkit-animation:leaves 10s; /* Safari and Chrome */
  -webkit-animation-iteration-count: 99999;
}

.snow3 {
    position:fixed;
    width:40px;
    margin-top: 40%;
    margin-left: 15%;
    display:none;
        animation:leaves 8s;
  animation-iteration-count: 99999;
  -webkit-animation:leaves 8s; /* Safari and Chrome */
  -webkit-animation-iteration-count: 99999;
}

.snow4 {
    position:fixed;
    width:40px;
    margin-top: 40%;
    margin-left:80%;
    display:none;
        animation:leaves 12s;
  animation-iteration-count: 99999;
  -webkit-animation:leaves 12s; /* Safari and Chrome */
  -webkit-animation-iteration-count: 99999;
}

.cloud2 {
  width:15%;
  position:fixed;
  margin-top:100px;
  margin-left:10%;
  max-width: 160px;
  min-width: 140px;
    animation:cloud2 20s;
  animation-iteration-count: 99999;
  -webkit-animation:cloud2 20s; /* Safari and Chrome */
  -webkit-animation-iteration-count: 99999;
}

.cloud3 {
  width:15%;
  position:fixed;
  margin-top:300px;
  margin-left:75%;
  max-width: 160px;
  min-width: 140px;
    animation:cloud2 12s;
  animation-iteration-count: 99999;
  -webkit-animation:cloud2 12s; /* Safari and Chrome */
  -webkit-animation-iteration-count: 99999;
}


.clouds {
  width: 102%;
  position: fixed;
  min-width: 600px;
  max-width: 950px;
  top: 0px;
}

.sign {
  width: 40%;
  max-width: 400px;
  min-width: 400px;
  position:fixed;
  bottom: 20px;
}

.rabbit {
  width: 5%;
    display:none;
  max-width: 80px;
  min-width: 50px;
  position:fixed;
    animation:rabbit 8s;
  animation-iteration-count: 99999;
  -webkit-animation:rabbit 8s; /* Safari and Chrome */
  -webkit-animation-iteration-count: 99999;
}

.rabbit2 {
  width: 5%;
    display:none;
  max-width: 80px;
  min-width: 50px;
    margin-left:-35%;
  position:fixed;
    animation:rabbit 10s;
  animation-iteration-count: 99999;
  -webkit-animation:rabbit 10s; /* Safari and Chrome */
  -webkit-animation-iteration-count: 99999;
}

.tree {
  width: 20%;
  max-width: 180px;
  min-width: 100px;
  position:fixed;
  bottom: 50px;
    margin-left: 70%;
}

.logo {
  position:fixed;
  width: 50%;
  margin-left: 45%;
  max-width: 450px;
  min-width: 350px;
  animation:logo 5s;
  animation-iteration-count: 99999;
  -webkit-animation:logo 5s; /* Safari and Chrome */
  -webkit-animation-iteration-count: 99999;
}

.hillsm {
  width: 102%;
    display:none;
  position:fixed;
  max-width: 950px;
  bottom: 0px;
    margin-left: -2%;
}

.cloudsm {
  width: 102%;
    display:none;
  position: fixed;
    margin-left: -2%;
  max-width: 950px;
  top: 0px;
}

.signsm {
  width: 40%;
    display:none;
  max-width: 400px;
  position:fixed;
  bottom: 20px;
}

.logosm {
  position:fixed;
    display:none;
  width: 50%;
  right: 20px;
  max-width: 450px;
  min-width: 250px;
  animation:logo 5s;
  animation-iteration-count: 99999;
  -webkit-animation:logo 5s; /* Safari and Chrome */
  -webkit-animation-iteration-count: 99999;
}

@media screen and (min-width: 950px) {
  
.hills {
  margin-left:50%;
  left:-450px;
}
  
  .sign {
  margin-left:50%;
  left:-500px;
}
  
  .clouds {
  margin-left:50%;
  left:-450px;
}

.logo {
        margin-right:50%;
  right:-450px;
}

.tree {
  margin-left:50%;
  left:250px;
}

.rabbit {
    margin-left: -10%;
  
} 
}

@media screen and (max-width: 700px){
    
.hills {
    display:none;
}
    
.sign {
    display:none;
}
    
.clouds {
    display:none;
}
    
.logo {
    display:none;
}
    
.cloud2 {
    display:none;
}
    
.snow {
        margin-top:80%;
    }
    
.snow2 {
        margin-top:80%;
    }
    
.snow3 {
        margin-top:80%;
    }
    
.snow4 {
        margin-top:80%;
    }
    
.leaf {
        margin-top:80%;
    }
    
.leaf2 {
        margin-top:80%;
    }
    
.leaf3 {
        margin-top:80%;
    }
    
.leaf4 {
        margin-top:80%;
    }
    
.cloud3 {
    display:none;
}
    
.hillsm {
    display:block;
}
    
.signsm {
    width:200px;
    display:block;
    z-index: 2;
}
    
.cloudsm {
    display:block;
}
    
.logosm {
    display:block;
}
    
.wintersm {
    display:none;
    opacity:0;
}
    
.shopsm {
    display:none;
    opacity:0;
}
    
.autumnsm {
    display:none;
    opacity:0;
}
    
.springsm {
    display:none;
    opacity:0;
}
    
.tree {
  width: 30%;
        display:none;
  max-width: 300px;
  min-width: 100px;
  position:fixed;
  bottom: 50px;
    margin-left: 74%;
}
}