html, body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  min-width: 360px;
  position: absolute;
  overflow-x: hidden;
  overflow-y: visible;
}

body {
  font-family: "Verdana", "Georgia","Times New Roman",serif;
  font-weight: normal;
  font-style: normal;
  font-size: 1em;
}

#loader  {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #509AC2;
  z-index: 105;
  height: 100%;
 }

#status  {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 250px;
  margin-left: -100px;
  text-align: center;
  color: #fff;

 }
.status{
  opacity: 0.7;
}
.pre-img{
  background-image: url(../images/bird1.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50px;
  height:50px;
  margin-top:30px;
}

.wrapper{
  background-color: #509ac2;
  background-image: -moz-linear-gradient(top, #509AC2 25%, #8FCBEB 100%);
  background-image: -webkit-linear-gradient(top, #509AC2 25%, #8FCBEB 100%);
  background-image: linear-gradient(to bottom, #509AC2 25%, #8FCBEB 100%);
}

#title{
  background: url(../images/logo.png) no-repeat top center;
  background-size: 200px;
  height: 230px;
  position: relative;
  top: 60px;
  z-index: 12;
}

#moon{
  background: url(../images/moon.png) no-repeat top center;
  background-size: 50px;
  height: 50px;
  position: absolute;
  top: 60px;
  z-index: 100;
  left:50%;
  width:50px;
  margin-left:-200px;
}

nav {
  position: fixed;
  right: 50px;
  z-index: 15;
  bottom: 30%;
}

nav ul {
    list-style: outside none none;
    position: relative;
    padding:0;
}

nav ul li{
  text-align: center;
  padding: 10px 0;
}

nav ul li a{
  color: #fff;
  text-shadow: 0 1px #418bb3;
  padding: 10px 0 10px 10px;
}

nav ul li a:hover, .active{
  color: #FFC2C3;
}

.pos{
  z-index: 10;
  position: absolute;
  left: 50%;
}

#hafirly{
  background: rgba(0, 0, 0, 0) url("../images/hafirly.png") no-repeat scroll center top;
  height: 250px;
  left: 50%;
  margin-left: -85px;
  top: 310px;
  position: fixed;
  width: 180px;
  z-index: 20;
  background-size: 150px;
}

.section{
  height:1650px;
  position: relative;
}

#start{
  background-color: #71b3d6;
}

.cloud{
  width:300%;
  left:-100% !important;
}

.hint{
  color: #fff;
  font-size: 14px;
  left: 50%;
  position: absolute;
  z-index: 10;
  text-align: center;
  opacity:0.5;
}

.scrolldown{
  margin-top: -110px;
  margin-left: -20px;
}

/*quote*/
.quote{
  position:fixed;
  left:50%;
  margin-left:-100px;
  top:150px;
  width:250px;
  z-index: 12;
}

#triggerquote1{
  position: absolute;
  left: 50%;
}

#triggerquote2, #triggerquote3, #triggerquote4{
  position: absolute;
  left: 50%;
  top:300px;
}

/*QUOTE BG*/
.time{
  margin-left: -177px;
  width: 300px;
  top: 200px;
}

.time-img{
  background: url("../images/time.png") no-repeat scroll center top;
  height: 310px;
  background-size: 300px;
}

.place{
  margin-left: -177px;
  width: 300px;
  top: 200px;
}

.place-img{
  background: url("../images/place.png") no-repeat scroll center top;
  height: 360px;
  background-size: 300px;
}

.memory{
  margin-left: -177px;
  width: 300px;
  top: 300px;
}

.memory-img{
  background: url("../images/memory.png") no-repeat scroll center top;
  height: 345px;
  background-size: 300px;
}

.lastsec{
  margin-left: -177px;
  width: 300px;
  top: 300px;
}

.lastsec-img{
  background: url("../images/last.png") no-repeat scroll center top;
  height: 360px;
  background-size: 300px;
}

.quotesec1{
  font-size: 14px;
  z-index: 11;
  color: #fff;
  padding-left:2%;
  white-space: nowrap;
  overflow: hidden;
  margin: 0 0 5px;
}
.sec1-1{padding-left:0px;}
.sec1-2{padding-left:15px;}
.sec1-3{padding-left:45px;}
.sec1-4{padding-left:25px;}
.sec1-6{padding-left:15px;}

.bg-cloud1{
  background: url("../images/bg-cloud1.png");
  height: 178px;
  background-size: 1200px;
}

.bg-cloud2{
  background: url("../images/bg-cloud2.png");
  height: 130px;
  background-size: 600px;
  left: -25% !important;
  top: 60px !important;
}


.cloud-fill{
  background: #509AC2;
  height: 1400px;
  width: 100%;
  top: 175px;
  position: relative;
}

.cloud2-fill{
  background: #58A2C9;
  height: 300px;
  width: 100%;
  top: 110px;
  position: relative;
}

.bird1{
  margin-left: -140px;
  width: 40px;
}

.bird2{
  margin-left: 100px;
  margin-top: 100px;
  width: 25px;
}

.bird1-img{
  background: rgba(0, 0, 0, 0) url("../images/bird1.gif") no-repeat scroll 0 0 / 35px auto;
  height: 60px;
}

.bird2-img{
  background: rgba(0, 0, 0, 0) url("../images/bird2.gif") no-repeat scroll 0 0 / 22px auto;
  height: 60px;
}

.random-particle{
  height: 200px;
  width: 300px;
  margin-left: -160px;
}

/*SECTION 2*/

.date{
  margin-left: -200px;
  margin-top: 100px;
  width: 420px;
}

.date-img{
  background: rgba(0, 0, 0, 0) url("../images/date.png") no-repeat scroll center top;
  height: 85px;
  background-size: 400px;
}

.baling{
  background: url("../images/baling.gif") no-repeat scroll center top;
  background-size: 20px;
  position: absolute;
  top:14px;
  left:-5px;
  width:20px;
  height:55px;
}

.airballoon1{
  margin-left: -80px;
  margin-top: 280px;
  width: 150px;
}

.airballoon2{
  margin-left: 70px;
  margin-top: 320px;
  width: 150px;
}

.airballoon3{
  margin-left: -210px;
  margin-top: 280px;
  width: 150px;
}

.airballoon1-img{
  background: rgba(0, 0, 0, 0) url("../images/airballoon.png") no-repeat scroll center top;
  height: 80px;
  background-size: 143px;
}

.airballoon2-img{
  background: rgba(0, 0, 0, 0) url("../images/airballoon.png") no-repeat scroll center top;
  height: 80px;
  background-size: 100px;
}

.airballoon3-img{
  background: rgba(0, 0, 0, 0) url("../images/airballoon.png") no-repeat scroll center top;
  height: 80px;
  background-size: 70px;
}

/*SECTION 3*/

.address{
  margin-left: -200px;
  margin-top: 30px;
  width: 250px;
}

.address-img{
  background: rgba(0, 0, 0, 0) url("../images/address.png") no-repeat scroll center top;
  height: 150px;
  background-size: 250px;
}

.town{
  margin-left: -45px;
  margin-top: 130px;
  width: 300px;
}

.town-img{
  background: rgba(0, 0, 0, 0) url("../images/town.png") no-repeat scroll center top;
  height: 220px;
  background-size: 300px;
}

.mapbutton{
  background: rgba(0, 0, 0, 0) url("../images/openmap.png") no-repeat scroll center top;
  height: 57px;
  width: 100px;
  position: absolute;
  top: -57px;
  left :115px;
  background-size: 70px;
}

.openmap{
  margin-top: 170px;
  margin-left: -150px;
}

#openmap a:hover .mapbutton{
  background-size: 75px;
}

.town2{
  margin-left: -300px;
  margin-top: 270px;
  width: 350px;
}

.town2-img{
  background: rgba(0, 0, 0, 0) url("../images/town2.png") no-repeat scroll center top;
  height: 100px;
  background-size: 150px;
}

/*==air balloon==*/
.ab1{
  margin-left: -300px;
  margin-top: 150px;
  width: 50px;
}

.ab1-img{
  background: rgba(0, 0, 0, 0) url("../images/ab1.png") no-repeat scroll center top;
  height: 70px;
  background-size: 50px;
}

.ab2{
  margin-left: -350px;
  margin-top: 280px;
  width: 50px;
}

.ab2-img{
  background: rgba(0, 0, 0, 0) url("../images/ab2.png") no-repeat scroll center top;
  height: 50px;
  background-size: 30px;
}

.ab3{
  margin-left: 100px;
  margin-top: 125px;
  width: 50px;
}

.ab3-img{
  background: rgba(0, 0, 0, 0) url("../images/ab3.png") no-repeat scroll center top;
  height: 50px;
  background-size: 30px;
}

.ab4{
  margin-left: 280px;
  margin-top: 220px;
  width: 50px;
}

.ab4-img{
  background: rgba(0, 0, 0, 0) url("../images/ab4.png") no-repeat scroll center top;
  height: 60px;
  background-size: 40px;
}

.ab5{
  margin-left: 120px;
  margin-top: 320px;
  width: 50px;
}

.ab5-img{
  background: rgba(0, 0, 0, 0) url("../images/ab5.png") no-repeat scroll center top;
  height: 70px;
  background-size: 50px;
}

/*SECTION 4*/

.balloongroup{
  margin-left: -175px;
  margin-top: -150px;
  width: 300px;
  z-index: 100;
}

.balloongroup-img{
  background: rgba(0, 0, 0, 0) url("../images/balloongroup.png") no-repeat scroll center top;
  height: 410px;
  background-size: 300px;
}

#trigger{
  position: relative;
  left: 50%;
  height: 10px;
  width: 20px;
}

.balloonsmall{
  margin-left: -450px;
  margin-top: -150px;
  width: 700px;
}

.balloonsmall-img{
  background: rgba(0, 0, 0, 0) url("../images/balloonsmall.png") no-repeat scroll center top;
  height: 300px;
  background-size: 580px;
}

.balloonbig{
  margin-left: -500px;
  margin-top: -35px;
  width: 880px;
}

.balloonbig-img{
  background: rgba(0, 0, 0, 0) url("../images/balloonbig.png") no-repeat scroll center top;
  height: 410px;
  background-size: 850px;
}

.photographer{
  margin-left: 150px;
  margin-top: 200px;
  width: 100px;
}

.photographer-img{
  background: rgba(0, 0, 0, 0) url("../images/photographer.png") no-repeat scroll center top;
  height: 250px;
  background-size: 100px;
}

.blitz-img{
  background: rgba(0, 0, 0, 0) url("../images/blitz.png") no-repeat scroll center top;
  height: 80px;
  background-size: 70px;
  position: relative;
  top:-140px;
  left:-5px;
}

.photo-img{
  background: rgba(0, 0, 0, 0) url("../images/photo.png") no-repeat scroll center top;
  height: 40px;
  background-size: 50px;
  left:15px;
  width:50px;
  top:133px;
}

.opengallery{
  margin-top: 60px;
  margin-left: -25px;
}

.inv{
  z-index:10;
  background: url(../images/inv.png) no-repeat top center;
  background-size: 350px;
  width:350px;
  height: 125px;
  top:100px;
  margin-left: -175px;
}

.section-finish{
  height: 270px;
  position: relative;
}

.love{
  margin-left: -30px;
  width: 20px;
  bottom:10px;
  z-index:20;
}

.love2{
  margin-left: 15px;
  width: 20px;
  bottom:0px;
}

.love-img{
  background: rgba(0, 0, 0, 0) url("../images/love.png") no-repeat scroll 0 0 / 20px auto;
  height: 20px;
}

.love2-img{
  background: rgba(0, 0, 0, 0) url("../images/love.png") no-repeat scroll 0 0 / 15px auto;
  height: 20px;
}

.thanks{
  margin-left: -190px;
  width: 32px;
  bottom:-320px;
}

.thanks-img{
  background: rgba(0, 0, 0, 0) url("../images/thanks.png") no-repeat scroll 0 0 / 30px auto;
  height: 50px;
}
.thanks a:hover .thanks-img{
  background-size:32px;
}
.thankto{
  top:-60px;
  left: 10px;
}
.flower{
  margin-left: -10px;
  width: 30px;
  bottom:-100px;
}

.flower-img{
  background: rgba(0, 0, 0, 0) url("../images/flower.png") no-repeat scroll 0 0 / 30px auto;
  height: 30px;
}

.flower1{
  bottom:-250px;
  margin-left:-140px
}
.flower2{
  bottom:-150px;
  margin-left:-155px
}
.flower3{
  bottom:-100px;
  margin-left:-135px
}
.flower4{
  bottom:-90px;
  margin-left:-75px
}
.flower5{
  bottom:-65px;
  margin-left:20px
}
.flower6{
  bottom:-150px;
  margin-left:40px
}
.flower7{
  bottom:-100px;
  margin-left:100px
}
.flower8{
  bottom:-175px;
  margin-left:100px
}
.flower9{
  bottom:-275px;
  margin-left:105px
}

.land{
  background: rgba(0, 0, 0, 0) url("../images/arch.png") no-repeat scroll center bottom / 420px auto;
  height:325px;
}

footer{
  font-size: 11px;
  color:#fff;
  text-align: center;
  z-index: 9;
  position: relative;
}

footer a{
  text-decoration: none;
  color:#fff;
  opacity:0.7;
}

footer p{
  z-index: 10;
  position: relative;
  top:300px;
}

/*Animation*/
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
    from {background-position:-20% 0;}
    to {background-position:120% 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:-20% 0;}
    to {background-position:120% 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:-20% 0;}
    to {background-position:120% 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position:-20% 0;}
    to {background-position:120% 0;}
}

@keyframes move-cloudsbig-back {
    from {background-position:-30% 0;}
    to {background-position:110% 0;}
}
@-webkit-keyframes move-cloudsbig-back {
    from {background-position:-30% 0;}
    to {background-position:110% 0;}
}
@-moz-keyframes move-cloudsbig-back {
    from {background-position:-30% 0;}
    to {background-position:110% 0;}
}
@-ms-keyframes move-cloudsbig-back {
    from {background-position:-30% 0;}
    to {background-position:110% 0;}
}

#cloud-parallax{
  position: relative;
  z-index: 10;
  top: -80px;
}

.stars, .twinkling, .clouds, .clouds2, .clouds3  {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  display:block;
}

.stars {
  background: #71b3d6 url(../images/bg-star.png) no-repeat top center;
  z-index:0;
  background-size: 100%;
  height:500px;
}

.twinkling{
  background:transparent url(../images/twinkling.png) repeat top center;
  z-index:1;
  height: 250px;
  background-size: 50px;
  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}

.cloud-container{
  height: 800px;
  position: absolute;
  top: 1300px;
  width: 100%;
  z-index: 10;
}

.clouds{
  background:transparent url(../images/clouds.png) no-repeat top center;
  z-index:9;
  background-size: 200px;
  height:100px;
  position: absolute;
  height:100px;
  top:25%;

  -moz-animation:move-clouds-back 80s linear infinite;
  -ms-animation:move-clouds-back 80s linear infinite;
  -o-animation:move-clouds-back 80s linear infinite;
  -webkit-animation:move-clouds-back 80s linear infinite;
  animation:move-clouds-back 80s linear infinite;
}

.clouds2{
  background:transparent url(../images/clouds2.png) no-repeat top center;
  z-index:9;
  background-size: 125px;
  height:100px;
  position: absolute;
  height:100px;
  top:32%;

  -moz-animation:move-cloudsbig-back 100s linear infinite;
  -ms-animation:move-cloudsbig-back 100s linear infinite;
  -o-animation:move-cloudsbig-back 100s linear infinite;
  -webkit-animation:move-cloudsbig-back 100s linear infinite;
  animation:move-cloudsbig-back 100s linear infinite;
}

.clouds3{
  background:transparent url(../images/clouds.png) no-repeat top center;
  z-index:9;
  background-size: 300px;
  height:100px;
  position: absolute;
  height:100px;
  top:38%;

  -moz-animation:move-cloudsbig-back 40s linear infinite;
  -ms-animation:move-cloudsbig-back 40s linear infinite;
  -o-animation:move-cloudsbig-back 40s linear infinite;
  -webkit-animation:move-cloudsbig-back 40s linear infinite;
  animation:move-cloudsbig-back 40s linear infinite;
}

.floating{
    float: left;
    -webkit-animation-name: Floatingx;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: Floating;
    -moz-animation-duration: 3s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    margin-left: 30px;
    margin-top: 5px;

}

@-webkit-keyframes Floatingx{
    from {-webkit-transform:translate(0, 0px);}
    65% {-webkit-transform:translate(0, 15px);}
    to {-webkit-transform: translate(0, -0px);    }
}

@-moz-keyframes Floating{
    from {-moz-transform:translate(0, 0px);}
    65% {-moz-transform:translate(0, 15px);}
    to {-moz-transform: translate(0, -0px);}
}

.floating-bird{
    -webkit-animation-name: FloatingBirdx;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: FloatingBird;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
}

@-webkit-keyframes FloatingBirdx{
    from {-webkit-transform:translate(0, 0px);}
    25% {-webkit-transform:translate(15px, 20px);}
    50% {-webkit-transform:translate(-10px, 30px);}
    75% {-webkit-transform:translate(10px, -5px);}
    to {-webkit-transform: translate(0, -0px);}
}

@-moz-keyframes FloatingBird{
    from {-moz-transform:translate(0, 0px);}
    25% {-moz-transform:translate(15px, 20px);}
    50% {-moz-transform:translate(-10px, 30px);}
    75 {-moz-transform:translate(10px, -5px);}
    to {-moz-transform: translate(0, -0px);}
}

.floating-bird2{
    -webkit-animation-name: FloatingBird2x;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: FloatingBird2;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
}

@-webkit-keyframes FloatingBird2x{
    from {-webkit-transform:translate(0, 0px);}
    35% {-webkit-transform:translate(-15px, 20px);}
    70% {-webkit-transform:translate(10px, 30px);}
    to {-webkit-transform: translate(0, -0px);    }
}

@-moz-keyframes FloatingBird2{
    from {-moz-transform:translate(0, 0px);}
    35% {-moz-transform:translate(-15px, 20px);}
    70% {-moz-transform:translate(10px, 30px);}
    to {-moz-transform: translate(0, -0px);}
}

.hint i{
  -webkit-animation-name: scrollhintx;
  -webkit-animation-duration: 0.5s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-name: scrollhint;
  -moz-animation-duration: 0.5s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease-in-out;
}

@-webkit-keyframes scrollhintx{
    from {-webkit-transform:translate(0, 0px);}
    to {-webkit-transform: translate(0, 3px);    }
}

@-moz-keyframes scrollhint{
    from {-moz-transform:translate(0, 0px);}
    to {-moz-transform: translate(0, 3px);}
}

/*SECTION 2*/

.year{
  background: url("../images/2016.png") no-repeat scroll center top;
  background-size: 60px;
  position: absolute;
  top:20px;
  left:42px;
  width:65px;
  height:30px;
  -webkit-animation-name: yearx;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-name: year;
  -moz-animation-duration: 3s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: ease-in-out;
}

@-webkit-keyframes yearx{
    from {opacity:0;}
    25% {opacity:0.4;}
    60% {opacity:0.1;}
    85% {opacity:0.7;}
    to {opacity:0;}
}

@-moz-keyframes year{
    from {opacity:0;}
    25% {opacity:0.4;}
    60% {opacity:0.1;}
    80% {opacity:0.7;}
    to {opacity:0;}
}

/*SECTION 3*/

.floating-ab{
    -webkit-animation-name: Floatingabx;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: Floatingab;
    -moz-animation-duration: 5s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
}

@-webkit-keyframes Floatingabx{
    from {-webkit-transform:translate(0, 0px);}
    50% {-webkit-transform:translate(0px, 10px);}
    to {-webkit-transform: translate(0, 0px);}
}

@-moz-keyframes Floatingab{
    from {-moz-transform:translate(0, 0px);}
    50% {-moz-transform:translate(0px, 10px);}
    to {-moz-transform: translate(0, 0px);}
}

/*MEDIA QUERY*/

@media only screen and (max-width: 320px) {
  nav{
    right:20px;
    bottom:20%;
  }
  #status{
    margin-left: -120px;
    top:170px;
  }
  #hafirly{
    top:200px;
    background-size:100px;
    height:165px;
    width:105px;
    margin-left:-55px;
  }
  .quote{
    top:80px;
  }
  .scrolldown{
    margin-left:-38px;
    margin-top:-80px;
  }
  #title{
    top: 30px;
    height:100px;
    background-size:150px;
    left:-18px;
  }
  #moon{
    background-size:30px;
    margin-left:-140px;
  }
  .bg-cloud1{
    background-size:320px;
    left: -90% !important;
    height:48px;
  }
  .bg-cloud2{
    background-size:200px;
    left: -95% !important;
    top:10px !important;
  }
  .cloud-fill{
    top:47px;
  }
  .bird1-img{
    background-size: 25px
  }
  .bird1{
    margin-left:-120px;
  }
  .bird2-img{
    background-size: 15px
  }
  .bird2{
    margin-left:50px;
    margin-top:70px;
  }
  .random-particle{
    margin-left: -125px;
    width: 200px;
    height:150px;
  }
  .section{
    height:1330px;
  }
  .section-finish{
    height:200px;
    top:0px;
  }
  .time-img,.place-img,.memory-img,.lastsec-img{
    background-size:200px;
  }
  .date-img{
    background-size:300px;
  }
  .baling{
    background-size: 15px;
    left:45px;
    top:10px;
  }
  .date{
    margin-left:-230px;
    margin-top:75px;
  }
  .clouds{
    background-size: 130px;
  }
  .clouds2{
    background-size: 90px;
  }
  .clouds3{
    background-size: 150px;
  }
  #cloud-parallax{
    top:20px;
  }
  .airballoon1{
    margin-top:220px;
  }
  .stars {
    background-size: 800px;
  }
  .airballoon2{
    margin-left:-10px;
    margin-top:370px;
  }
  .address{
    margin-left:-156px;
  }
  .ab3{
    margin-left: 85px;
  }
  .town{
    margin-left:-118px;
    margin-top: 160px;
  }
  .town-img{
    background-size: 200px;
  }
  .town2-img{
    background-size: 100px;
  }
  .ab5{
    margin-left: 40px;
    margin-top: 260px;
  }
  .mapbutton{
    left:122px;
  }
  .tos-slide{
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .balloongroup,.balloonsmall{
    margin-top:0px;
  }
  .balloongroup-img{
    background-size: 180px;
    height:250px;
  }
  .balloonsmall{
    margin-left:-367px;
    margin-top: 0px;
  }
  .balloonsmall-img{
    background-size: 300px;
  }
  .balloonbig-img{
    background-size: 400px;
  }
  .photographer{
    margin-left:20px;
    margin-top:240px;
  }
  .photographer-img{
    background-size: 50px;
    height:155px;
  }
  .opengallery{
    margin-top:18px;
  }
  .blitz-img{
    background-size: 30px;
    height: 35px;
    top:-95px;
  }
  .photo-img{
    top:0px;
    background-size: 40px;
  }
  .sec1-3{
    padding-left:0px;
  }
  .inv{
    background-size: 260px;
    width:280px;
    top:50px;
    margin-left: -156px;
  }
  .land{
    background-size: 280px;
    height: 215px;
    margin-left: -32px;
  }
  .flower1{
    bottom:-185px;
    margin-left:-112px;
  }
  .flower2{
    bottom:-110px;
    margin-left:-120px;
  }
  .flower3{
    bottom:-70px;
    margin-left:-110px;
  }
  .flower4{
    bottom:-80px;
    margin-left:-75px;
  }
  .flower5{
    bottom:-55px;
    margin-left:0px;
  }
  .flower6{
    bottom:-105px;
    margin-left:20px;
  }
  .flower7{
    bottom:-75px;
    margin-left:45px;
  }
  .flower8{
    bottom:-130px;
    margin-left:50px;
  }
  .flower9{
    bottom:-185px;
    margin-left:45px;
  }
  .thanks{
    bottom:-215px;
    margin-left:-150px;
  }
  footer{
    font-size: 8px;
  }
  footer p{
    top:198px;
  }
}


@media only screen and (min-width: 321px) and (max-width: 400px) {
  nav{
    right:20px;
    bottom:20%;
  }
  #hafirly{
    top:250px;
    background-size:125px;
    height:210px;
    width:120px;
    margin-left:-70px;
  }
  .quote{
    top:140px;
  }
  .scrolldown{
    margin-left:-20px;
    margin-top:-65px;
  }
  #title{
    top: 50px;
    height:140px;
    background-size:170px;
  }
  #moon{
    background-size:40px;
    margin-left:-150px;
  }
  .bg-cloud1{
    background-size:390px;
    left: -90% !important;
    height:75px;
  }
  .bg-cloud2{
    background-size:250px;
    left: -95% !important;
    top:10px !important;
  }
  .cloud-fill{
    top:55px;
  }
  .cloud2-fill{
    top:30px;
  }
  .bird1-img{
    background-size: 25px
  }
  .bird1{
    margin-left:-120px;
    margin-top:40px;
  }
  .bird2-img{
    background-size: 20px
  }
  .bird2{
    margin-left:100px;
    margin-top:120px;
  }
  .random-particle{
    margin-left: -120px;
    margin-top: 75px;
    width: 230px;
    height:200px;
  }
  .section{
    height:1500px;
  }
  .section-finish{
    height:210px;
    top:0px;
  }
  .time-img,.place-img,.memory-img,.lastsec-img{
    background-size:250px;
  }
  .date-img{
    background-size:300px;
  }
  .baling{
    background-size: 15px;
    left:45px;
    top:10px;
  }
  .date{
    margin-left:-200px;
    margin-top:75px;
  }
  .clouds{
    background-size: 130px;
  }
  .clouds2{
    background-size: 90px;
  }
  .clouds3{
    background-size: 150px;
  }
  #cloud-parallax{
    top:40px;
  }
  .airballoon1{
    margin-top:220px;
  }
  .stars {
    background-size: 800px;
  }
  .airballoon2{
    margin-left:25px;
    margin-top:320px;
  }
  .airballoon3{
    margin-left: -175px;
  }
  .address{
    margin-left:-156px;
  }
  .ab3{
    margin-left: 115px;
  }
  .town{
    margin-left:-118px;
    margin-top: 160px;
  }
  .town-img{
    background-size: 220px;
    margin-left: 75px;
  }
  .town2{
    margin-left:-290px;
  }
  .town2-img{
    background-size: 100px;
  }
  .openmap{
    margin-left: -130px;
  }
  .ab5{
    margin-left: 85px;
    margin-top: 320px;
  }
  .mapbutton{
    left:122px;
  }
  .tos-slide{
    padding-left:10px !important;
    padding-right:10px !important;
  }
  .balloongroup,.balloonsmall{
    margin-top:0px;
  }
  .balloongroup{
    margin-left:-145px;
    margin-top:-104px;
    width:280px;
  }
  .balloongroup-img{
    background-size: 220px;
    height:325px;
  }
  .balloonsmall{
    margin-left:-367px;
    margin-top: 0px;
  }
  .balloonsmall-img{
    background-size: 350px;
  }
  .balloonbig-img{
    background-size: 500px;
  }
  .photographer{
    margin-left:60px;
    margin-top:200px;
    z-index:30;
  }
  .opengallery{
    margin-top:75px;
  }
  .photographer-img{
    background-size: 65px;
    height:175px;
  }
  .blitz-img{
    background-size: 40px;
    height: 45px;
    top:-95px;
  }
  .photo-img{
    top:70px;
    background-size: 40px;
  }
  .sec1-3{
    padding-left:0px;
  }
  .inv{
    background-size: 300px;
    width:330px;
    top:20px;
    margin-left:-165px;
  }
  .love{
    bottom:60px;
  }
  .love2{
    bottom:4px;
  }
  .land{
    background-size: 370px;
    height: 290px;
    margin-left: 0px;
  }
  .section-finish{
    height:210px;
  }
  .flower1{
    bottom:-227px;
    margin-left:-130px;
  }
  .flower2{
    bottom:-156px;
    margin-left:-137px;
  }
  .flower3{
    bottom:-84px;
    margin-left:-125px;
  }
  .flower4{
    bottom:-89px;
    margin-left:-82px;
  }
  .flower5{
    bottom:-57px;
    margin-left:30px;
  }
  .flower6{
    bottom:-132px;
    margin-left:42px;
  }
  .flower7{
    bottom:-93px;
    margin-left:93px;
  }
  .flower8{
    bottom:-156px;
    margin-left:96px;
  }
  .flower9{
    bottom:-240px;
    margin-left:80px;
  }
  .thanks{
    bottom:-285px;
    margin-left:-175px;
  }
  footer{
    font-size: 9px;
  }
  footer p{
    top:268px;
  }
}

@media only screen and (min-width: 1366px) and (max-width: 1549px) {
  .cloud{
    left:-90% !important;
  }
  .bg-cloud1{
    background-size: 1285px;
  }
  #cloud-parallax{
    top:-30px;
  }
  #title{
    background-size: 250px;
  }
  #moon{
    margin-left: -250px;
    top:105px;
  }
  #hafirly{
    background-size: 170px;
    height:280px;
    margin-left: -100px;
    top:335px;
  }
  .bird1{
    margin-top:100px;
    margin-left:-160px;
  }
  .bird1-img{
    background-size: 40px;
  }
  .bird2{
    margin-top:200px;
    margin-left:120px;
  }
  .bird2-img{
    background-size: 25px;
  }
  .scrolldown{
    margin-top:-65px;
  }
  .random-particle{
    margin-top:120px;
  }
  .section{
    height:1850px;
  }
  .cloud-fill{
    height:1500px;
  }
  .quote{
    top:250px;
  }
  .inv{
    top:-10px;
  }
  .love{
    bottom: 60px;
  }
  .love2{
    bottom:50px;
  }
}

@media only screen and (min-width: 1550px) and (max-width: 1620px) {
  .cloud{
    left:-90% !important;
  }
  .bg-cloud1{
    background-size: 1285px;
  }
  #cloud-parallax{
    top:-30px;
  }
  #title{
    background-size: 250px;
  }
  #moon{
    margin-left: -250px;
    top:105px;
  }
  #hafirly{
    background-size: 170px;
    height:280px;
    margin-left: -100px;
    top:450px;
  }
  .bird1{
    margin-top:100px;
    margin-left:-160px;
  }
  .bird1-img{
    background-size: 40px;
  }
  .bird2{
    margin-top:200px;
    margin-left:120px;
  }
  .bird2-img{
    background-size: 25px;
  }
  .scrolldown{
    margin-top:-65px;
  }
  .random-particle{
    margin-top:120px;
  }
  .section{
    height:1850px;
  }
  .cloud-fill{
    height:1500px;
  }
  .quote{
    top:250px;
  }
  .inv{
    top:-10px;
  }
  .love{
    bottom: 60px;
  }
  .love2{
    bottom:50px;
  }
}

@media only screen and (min-width: 1621px) and (max-width: 1919px) {
  .cloud{
    left:-80% !important;
  }
  .bg-cloud1{
    background-size: 1285px;
  }
  #cloud-parallax{
    top:-30px;
  }
  #title{
    background-size: 250px;
  }
  #moon{
    margin-left: -250px;
    top:105px;
  }
  #hafirly{
    background-size: 170px;
    height:280px;
    margin-left: -100px;
    top:525px;
  }
  .bird1{
    margin-top:200px;
    margin-left:-160px;
  }
  .bird1-img{
    background-size: 40px;
  }
  .bird2{
    margin-top:300px;
    margin-left:120px;
  }
  .bird2-img{
    background-size: 25px;
  }
  .scrolldown{
    margin-top:80px;
  }
  .balloongroup{
    margin-top:-195px;
  }
  .random-particle{
    margin-top:120px;
  }
  .section{
    height:1850px;
  }
  .cloud-fill{
    height:1500px;
  }
  .quote{
    top:250px;
  }
  .inv{
    top:-100px;
  }
  .love{
    bottom: 60px;
  }
  .love2{
    bottom:50px;
  }
}

@media only screen and (min-width: 1920px) {
  .cloud{
    left:-80% !important;
  }
  .bg-cloud1{
    background-size: 1285px;
  }
  #cloud-parallax{
    top:-30px;
  }
  #title{
    background-size: 250px;
  }
  #moon{
    margin-left: -250px;
    top:105px;
  }
  #hafirly{
    background-size: 170px;
    height:280px;
    margin-left: -100px;
    top:525px;
  }
  .bird1{
    margin-top:200px;
    margin-left:-160px;
  }
  .bird1-img{
    background-size: 40px;
  }
  .bird2{
    margin-top:300px;
    margin-left:120px;
  }
  .bird2-img{
    background-size: 25px;
  }
  .scrolldown{
    margin-top:80px;
  }
  .balloongroup{
    margin-top:-195px;
  }
  .balloongroup-img{
    height:520px;
  }
  .random-particle{
    margin-top:120px;
  }
  .section{
    height:1850px;
  }
  .cloud-fill{
    height:1500px;
  }
  .quote{
    top:250px;
  }
  .inv{
    top:-100px;
  }
  .love{
    bottom: 100px;
  }
  .love2{
    bottom:90px;
  }
}