body {
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight: normal;
	line-height: 1;
	margin: 0;
	padding: 0;
    font-size:16px;
}
h1 {
    text-align:center;
}
p {
	color: #252525;
    text-align: center;
	margin: 1em;
	padding: 0;
}



@keyframes animatedBackground {
	from { background-position: 0% 70%; }
	to { background-position: 140% 60%; }
}

.parallax { 
    /* The image used */
    background-image: url("../images/balloon2.jpg");

    /* Set a specific height */
    

    /* Create the parallax scrolling effect */
/*
    background-attachment: fixed;
    background-position: bottom;
    background-repeat: no-repeat;
*/

/*    background-size: cover;*/
    
    
   
/*	width: 100%; */
	height: 100%; 
	background-repeat: no-repeat;
    background-position: -500px 0px;

	animation: animatedBackground 45s linear 1;

}

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

    .parallax {
        background-image:none;
    }
}

a{
    color: white;
    font-size:1.5em;
    text-decoration: underline;
	font-family: 'Open Sans Condensed', sans-serif;
}

a:link {
    color: #c62828;
}

a:visited {
    color: #c62828;
}

a:hover {
    color: purple;
}

a:active {
    color: #c62828;
}

 img {
	border: 0;
	display: block;
	margin: auto;
	padding: 0;
	width: 100%;
}

#footer {
	background: #c6e6f9;
	margin: 0;

}
#footer div {
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
    text-align: center;
}
#footer div p {
	color: #fff;
	margin: 0 auto 2em auto;
	padding: 0;
    font-size: 3em:
}



      ul {
          padding:0 0 0 0;
          margin:0 0 5px 0;
      }
      ul li {
          list-style-type: none;
          margin-bottom:10px;
      }

    .text {
      /*font-family: 'Bree Serif';*/
      color:#666;
      font-size:11px;
      margin-bottom:10px;
      padding:12px;
      background:#fff;
      font-family: 'Open Sans Condensed', sans-serif;
        
}

      .row h1 {
          font-size:50px;
          text-align: center;
          margin-top:5px;
	      font-family: 'Open Sans Condensed', sans-serif;
      }

      .row a {
         color: #f60;
         text-decoration: underline;
      }

      .row p {
        text-align: center;
      }

.what {
    max-width: 800px;
    text-align: center;
    margin:auto;
    margin-bottom:2em;
    padding:1em;
    background-color:#696969;
    color:white;
}

.what p {
    text-align:left;
    color:white;
}

.video {
    max-width: 800px;
    text-align: left;
    margin:auto;
    margin-bottom:2em;
    padding:1em;
    background-color:#696969;
    color:white;
}

.video p {
    text-align:center;
    color:white;
}
.video a {
    color: deepskyblue;
}

.video a:hover {
    color: white;
}

.video h1 {
    margin-bottom: 0;
}

.what h2 {
    text-align:left;
    color:white;
}

.line {
    max-width: 800px;
    text-align: left;
    margin:auto;
    margin-bottom:2em;
    padding:1em;
    background-color:#696969;
    color:white;
}

.line p {
    text-align:left;
    color:white;
}

.line h2 {
    text-align:left;
    color:white;
}
.line a {
    color: deepskyblue;
}

.line a:hover {
    color: white;
}



body {
  margin: 0;
  padding: 0;
  background: #d8e0fb;
}
 
.nav ul {
  list-style: none;
  background-color: #f4f4f4;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav li {
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1em;
  font-weight: bold;
  line-height: 30px;
  height: 40px;
  border-bottom: 1px solid #fff;
}
 
.nav a {
  text-decoration: none;
  color: #e6382f;
  display: block;
  transition: .3s background-color;
}
 
.nav a:hover {
  background-color: #e6382f;
  color: white;
}
 
.nav a.active {
  background-color: #f4f4f4;
  color: #1a7ea8;
  cursor: default;
}
 
@media screen and (min-width: 910px) {
  .nav li {
    width: 160px;
    border-bottom: none;
    height: 30px;
    font-size: 0.7em;
    line-height: 40px;
  }
 
  /* Option 1 - Display Inline */
  .nav li {
    display: inline-block;
    margin-right: -4px;
  }
 
  /* Options 2 - Float
  .nav li {
    float: left;
  }
  .nav ul {
    overflow: auto;
    width: 600px;
    margin: 0 auto;
  }
  .nav {
    background-color: #444;
  }
  */
}



/* home page Ulao title enlarge  */
@keyframes animateWidth {
  from {width: 20%;}
  to {width: 60%;}
}

.testAnimate {
  width: 30%;
  animation: animateWidth 2s ease-in-out forwards ;
  
 
}

/* home page Ulao subhead fade in  */

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

.subHead {
	opacity: 0;
	animation: fadeIn 2s forwards;
	animation-delay: 2s;
	width:59%;
	margin-top:5px;

}


/* home page body background changes */

@keyframes backChange {
	from { background-color: #d8e0fb; }
	to { background-color: #202442; }
}



.homeContainer {


  animation: backChange 20s forwards;

}


@keyframes sunOut {
  0% {background-position: 0% 0%, 105% 0%;}
  100% {background-position: -150% 0%, 220% 0%;}
}

.sunCloud {
  background-image: url("../images/sun.png"), url("../images/cloud.png");
  background-size: 30%, 20%;
  background-repeat: no-repeat, no-repeat;
  background-position: 0% 0%, 105% 0%;
  animation: sunOut 20s forwards;
  padding-top: 10px;
}


@keyframes starsUp {
  0% {background-position: 95% 250%, 5% -50%, 10% 300%, 85% -80%, 40% 400%, 15% 250%, 30% 250%, 80% 300%, 85% 280%, 90% 400%, 97% 400%;}
  15% {background-position: 95% 5%, 5% 10%, 10% 0%, 75% 20%, 40% 20%, 5% 30%, 30% 20%, 80% 20%, 85% 30%, 90% 10%, 97% 10%;}
  100% {background-position: 95% 8%, 5% 25%, 10% 11%, 75% 22%, 40% 45%, 5% 40%, 30% 50%, 80% 55%, 85% 45%, 90% 55%, 97% 16%;}
}

.starsContainer {
  background-image: url("../images/star1.png"), url("../images/star2.png"), url("../images/star3.png"), url("../images/star4.png"), url("../images/star5.png"), url("../images/star1.png"), url("../images/star2.png"), url("../images/star3.png"), url("../images/star4.png"), url("../images/star5.png");
  background-size: 4%, 3%, 6%, 2%, 4%, 3%, 3%, 3%, 4%, 3%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 95% 250%, 5% -50%, 10% 300%, 85% -80%;
  animation: starsUp 15s forwards 3s;
}



/* planeBanner animation */

@keyframes animatedPlane {
	0% { background-position: 160% 0 }
	100% { background-position: -200% 0 }
}


.plane { 
	margin-top: 10px;
  padding-top: 20em;
    /* The image used */

	
}


@keyframes rotateFire {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-10deg);}
  100% { transform: rotate(0deg);}
}

.fireAnimate {
  width: 45%;
  opacity: 0;
  animation: fadeIn 2s forwards 2s;
  
}

@keyframes jaws {
  0% { background-position: -140% 70%; }
  80% { background-position: 5% 70% ;}

  100% {background-position: 9% 70%;}
}

.fire {
    background-image: url("../images/jaws.png");
    background-size: 27%;
    background-repeat: no-repeat;
    background-position: -150% 80%;
    animation: jaws 10s alternate infinite 20s;
  

}

@keyframes peopleMove {
  0% {background-position: 30% 74%, 38% 90%, 66% 81%, 76% 28%, 84% 4%;}
  100% {background-position: 31% 75%, 40% 90%, 65% 80%, 76% 30%, 85% 5%;}
}

.people {
   padding-top: 5em;
  opacity: 0;
  background-image: url("../images/personLeftA.png"), url("../images/personLeftB.png"), url("../images/personLeft2.png"), url("../images/personLeft1.png"), url("../images/couple.png"), url("../images/guitarGirl.png"), url("../images/lamp.png");
  background-size: 7%, 8%, 8%, 7%, 15%, 15%, 8%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 10% 41%, 20% 72%, 30% 77%, 40% 70%, 65% 73%, 85% 73%, 95% 53%;
  animation: fadeIn 2s forwards 2s;
}


.personCenter {
  width: 7%;
}

.homeText {
    width: 100%;
    background-color: #b41e36;

    margin-top: 2em;
    margin-bottom: 3em;

    padding-top:6em;
    padding-bottom:6em;
    color:white;
}

.homeText p {
  padding: 2em;
    margin:auto;
   text-align: center;
  max-width: 800px;
  color: white;
  font-size: 24px;
}

.pully {
  max-width: 40%;
}