@charset "utf-8";
/* CSS Document */

/*html,body {
			margin:0;
			padding:0;
			height:100%
		}

body {
  background-color: #90DBFF;
  margin: 0;
  height: 100%;
  overflow: hidden;
}*/

h1 {
    font-size: 2.6em;
    line-height: 44px;
    margin: 0 0 32px 0;
}
h1, h2, h3, h4, h5, h6 {
    color: #ff7d01;
    font-weight: 200;
    letter-spacing: -1px;
    margin: 0;
/*    text-align:center;*/
    margin-top:20px;
    
}

h1 {
    font-weight: 600;
    font-family: "Great Vibes";
    text-transform: none;
    font-size: 50px;
    line-height: 75px;
    
}

@media (max-width: 320px) {
    
    h1 {
    font-weight: 400;
    font-family: "Great Vibes";
    text-transform: none;
    font-size: 50px;
    line-height: 50px;
    
}
    
    
    }
    
    
    
    @media (max-width: 360px) {
    
    h1 {
    font-weight: 400;
    font-family: "Great Vibes";
    text-transform: none;
    font-size: 50px;
    line-height: 50px;
    
}
    
    
    }
    
    
    
    @media (max-width: 479px) {
        
      h1 {
    font-weight: 400;
    font-family: "Great Vibes";
    text-transform: none;
    font-size: 50px;
    line-height: 50px;
    
}
      
        
    }
    
    
     @media (max-width: 480px) {
        
      h1 {
    font-weight: 400;
    font-family: "Great Vibes";
    text-transform: none;
    font-size: 50px;
    line-height: 50px;
    
}
      
        
    }
    
    
     @media (max-width: 640px) {
        
      h1 {
    font-weight: 500;
    font-family: "Great Vibes";
    text-transform: none;
    font-size: 60px;
    line-height: 50px;
    
}
      
        
    }


@keyframes breeze {
  0% { transform: translateX(0); opacity: 0.0; }
  10% { opacity: 0.5; }
  100% { transform: translateX(100vw); opacity: 1.0; }
}

@keyframes sway {
  0% { transform: translateX(0px) }
  25% { transform: translateX(8px) }
  75% { transform: translateX(-4px) }
  90% { transform: translateX(5px) }
  100% { transform: translateX(0px) }
}
.content {
  margin: 100px auto 0;
  text-align: center;
}



.tree {
  margin: auto;
  width: 0%;
  position: relative;
}

.leaves {
  position: absolute;
  top: -55px;
  z-index: 0;
  height: 150px;
  width: 150px;
  border-radius: 300px;
  opacity: 0.8;
  animation: sway 5s ease infinite;
}

.tree-one {
  left: -180px;
  top: 70px;
  z-index: 4;
}

.tree-two {
  left: -100px;
  top: -20px;
}

.tree-three {
  left: -60px;
  top: 40px;
  z-index: 2;
}

.green { background-color: #13CE66; }
.light-green { background-color: #AFEFCB; }
.blue-green { background-color: #50E3C2; }
.light-blue-green { background-color: #B2F3E4; }

.trunk {
  position: absolute;
  left: 75px;
  z-index: 1;
  height: 188px;
  width: 0px;
  /*background: url('https://dl.dropboxusercontent.com/u/27290093/tree-trunk.svg') no-repeat center/contain;*/
  border:1px solid #442929;
  
}

.earth {
  z-index: -1;
  position: absolute;
  /*top: 35vh;*/
  height: 40%;
  width: 100%;
  background-color: #0F9F4F;
  bottom:0;
}



/*******************************/
.frame {
    width: 500px;
    height: auto;
    margin: 15% auto 0;
    position: absolute;
    width: 100%;
}

.plane-container {
    width: 200px;
    margin: 0px auto;
    z-index: 3;
}