* {
  margin: 0;
  padding: 0;
}
a:focus {
  outline: none;
}
html {
  height: 100%;
}
body {
  height: 100%;
}
.body-contain {
  background: rgba(0, 0, 0, 0) url("../images/body-bg.jpg") no-repeat scroll top center / cover ;
  display: inline-block;
  height: 100%;
  overflow: hidden;
}




/*----------------------------------logo-animation----------------------------------------*/
.logo-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.logo img.original-logo  {
  width: 100%;
  -moz-animation: scale 4s ease 0s; 
  -webkit-animation: scale 4s ease 0s;
  -o-animation: scale 4s ease 0s; 
  animation: 4s ease 0s normal none 1 running scale;
  }
@keyframes scale {
from {
    width:0px;
}
to {
    width:100%;
}}
@-moz-keyframes scale { /* Firefox */
from {
    width:0;
}
to {
    width:100%;
}}
@-webkit-keyframes scale { /* Safari and Chrome */
from {
    width:0;
}
to {
    width:100%;
}}
@-o-keyframes scale { /* Opera */
from {
    width:0;
}
to {
    width:100%;
}}




.logo {
  display: inline-block;
  text-align: center;
  width: 100%;
  padding: 1.5% 0 0;
}
.logo .logo-inner {
  display: inline-block;
  width: 16%;
  position: relative;
}
.logo .logo-inner img {
  max-width: 100%;
  height: auto;
}
.logo .logo-inner img.duplicate-logo {
opacity: 0;
}
.menu {
  clear: both;
  padding-top: 5vh;
  text-align: center;
}
.menu-container {
  max-width: 85%;
  margin-left: auto;
  margin-right: auto;
}
.menu-container ul li {
  display: inline-block;
  margin-bottom: 4vh;
  padding: 0 20px;
  width: 29%;
}
.menu-container ul li a {
  background: rgb(180, 29, 141) none repeat scroll 0 0;
  border-radius: 4px;
  color: rgb(255, 255, 255);
  float: left;
  font-family: verdana;
  font-size: 17px;
  padding: 10px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  width: 100%;
  box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.3);
}
.menu-container ul li a:hover {
  opacity: .7;
}
.menu-container ul li a:hover, .menu-container ul li a {
 -webkit-transition: all ease-in-out .4s;
  -moz-transition: all ease-in-out .4s; 
  -o-transition: all ease-in-out .4s;
  -ms-transition: all ease-in-out .4s;
  transition: all ease-in-out .4s; 
}
.mean-container .mean-bar {
  background: #b41d8d none repeat scroll 0 0!important;
  float: right!important;
}
.mean-container .mean-nav {
  background: #b41d8d none repeat scroll 0 0!important;
}
/*-------------------------------------------------cloud-section---------------------------------------------*/
#wrap {
  float: left;
  overflow: hidden;
  padding-top: 17vh;
  position: relative;
  width: 100%;
}
.clouds {
  opacity: 0;
  width: 20%;
}
#wrap img {
  position: absolute;
}
.cloud-1 {
  bottom: 4%;
  left: 0px;
  -webkit-animation: cloud-move 50s linear 2s infinite;
  -moz-animation: cloud-move 50s linear 2s infinite;
  animation: 50s linear 0s alternate none infinite running cloud-move;
  z-index: 19;
}
.cloud-2 {
  top: 0;
  left: 30%;
  -webkit-animation: cloud-move 160s linear 2s infinite;
  -moz-animation: cloud-move 160s linear 2s infinite;
  animation: 160s linear 0s alternate none infinite running cloud-move;
  z-index: 19;
}
.cloud-3 {
  top: 25%;
  right: 25%;
  -webkit-animation: cloud-move 70s linear 2s infinite;
  -moz-animation: cloud-move 70s linear 2s infinite;
  animation: 70s linear 0s alternate none infinite running cloud-move;
  z-index: 19;
}


/*---------------------------------------background-element.................................................*/
/** Cloud-move **/
@-webkit-keyframes cloud-move {
  7%,
  90% { opacity: 1; }
  100% { -webkit-transform: translateX(460px); opacity: 0;}
}
@-moz-keyframes cloud-move {
  7%,
  90% { opacity: 1; }
  100% { -moz-transform: translateX(460px); opacity: 0;}
}
@-o-keyframes cloud-move {
  7%,
  90% { opacity: 1; }
  100% { -o-transform: translateX(460px); opacity: 0;}
}
keyframes cloud-move {
  7%,
  90% { opacity: 1; }
  100% { transform: translateX(460px); opacity: 0;}
}
.animated {
  animation-duration: 2s;
}
/*

.animated {
  animation-duration: 2s;
}
*/
/*--------------------------------------------------------------------end-of----------------------------------*/
.train-track > img {
  max-width: 100%;
}
.right-wall {
  bottom: 0;
  height: 5.7vw;
  position: absolute;
  right: 0;
}
.left-wall {
  bottom: 0;
  height: 5.7vw;
  left: 0;
  position: absolute;
}
.right-wall > img, .left-wall img {
  height: 100%;
  width: auto;
}

.train {
  bottom: 0;
  position: absolute;
}
.city {
  float: left;
  width: 100%;
}

/*--------------------------------train-moving----------------------------------------------------------*/
.train-track {
  float: left;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.train {
  -webkit-animation: train-move 8s linear 4s infinite;
  -moz-animation: train-move 8s linear 4s infinite;
  animation: train-move 10s linear 4s infinite;
  bottom: 0;
  position: absolute;
  left: -54%;
  width: 100%;
}
.train > img {
  margin-bottom: 0.25%;
  width: 54%;
}

/** train-move **/
@-webkit-keyframes train-move {
  100% { -webkit-transform: translateX(170%); }
}
@-moz-keyframes train-move {
  100% { -moz-transform: translateX(170%); }
}
@-o-keyframes train-move {
  100% { -o-transform: translateX(170%); }
}
keyframes train-move {
  100% { transform: translateX(170%); }
}

/*---------------------------------------ballons-----------------------------------------------------*/
.orange-blun {
  right: 15%;
  top: 0;
  width: 50px;
  -webkit-animation: ballon-move 10s linear 2s infinite;
  -moz-animation: ballon-move 10s linear 2s infinite;
  animation: 10s linear 0s alternate none infinite running ballon-move;
  z-index: 12;
}



@-webkit-keyframes ballon-move {
  7%,
  90% { opacity: 1; }
  100% { -webkit-transform: translateX(60px) rotate(10deg); }
}
@-moz-keyframes ballon-move {
  7%,
  90% { opacity: 1; }
  100% { -moz-transform: translateX(60px) rotate(10deg);}
}
@-o-keyframes ballon-move {
  7%,
  90% { opacity: 1; }
  100% { -o-transform: translateX(60px) rotate(10deg);}
}
keyframes ballon-move {
  7%,
  90% { opacity: 1; }
  100% { transform: translateX(60px) rotate(10deg);}
}
.pink-blun {
  left: 15%;
  bottom: 10px;
  width: 40px;
  -webkit-animation: ballonpink-move 20s linear 2s infinite;
  -moz-animation: ballonpink-move 20s linear 2s infinite;
  animation: 20s linear 0s alternate none infinite running ballonpink-move;
  z-index: 12;
}
@-webkit-keyframes ballonpink-move {
  7%,
  90% { opacity: 1; }
  100% { -webkit-transform: translateX(60px) rotate(10deg); }
}
@-moz-keyframes ballonpink-move {
  7%,
  90% { opacity: 1; }
  100% { -moz-transform: translateX(60px) rotate(10deg);}
}
@-o-keyframes ballonpink-move {
  7%,
  90% { opacity: 1; }
  100% { -o-transform: translateX(60px) rotate(10deg);}
}
keyframes ballonpink-move {
  7%,
  90% { opacity: 1; }
  100% { transform: translateX(60px) rotate(10deg);}
}
/*--------------------------------------------bottom-green---------------------------------------------*/
.bottom-green {
  background: rgb(130, 159, 41) none repeat scroll 0 0;
  float: left;
  height: 500px;
  width: 100%;
}


/*-----------------------------responsive-----------------------------------------------*/
@media screen and (max-height: 650px ) and (min-width: 1300px){
  .body-contain {
    min-height: 650px;
  }
  #wrap {
  min-height: 115px;
}

  }


@media screen and (max-height: 700px ) {
  .menu-container ul li a {
  font-size: 15px;
}
}
@media screen and (min-width: 1400px ) {
.menu-container ul li a {
  font-size: 1.3vw;
}

}
@media screen and (min-width: 1600px ) {
  .pink-blun {
  width: 2.35vw;
}
.orange-blun {
  width: 3.3vw;
}
.logo .logo-inner {
  width: 18%;
}
}


@media screen and (min-height: 670px ) and (max-width: 1200px) {
.menu {
  padding-top: 8vh;
}
.logo {
  padding: 5% 0 0;

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

.menu-container ul li {
  width: 33%;
}
.menu-container ul li a {
  font-size: 16px;
}
}

@media screen and (max-width: 991px) {
.logo .logo-inner {
  min-width: 210px;
}
.menu-container ul li {
  max-width: 290px;
  width: 49%;
}
.pink-blun {
  width: 32px;
}
.orange-blun {
  width: 40px;
}

}
@media screen and (max-width: 767px) {
.logo .logo-inner {
  min-width: 200px;
}
.pink-blun {
  width: 5%;
}
.orange-blun {
  width: 7%;
}


.cloud-1 {
  -webkit-animation: cloud-move 15s linear 2s infinite;
  -moz-animation: cloud-move 15s linear 2s infinite;
  animation: 15s linear 0s alternate none infinite running cloud-move;
}
.cloud-2 {
  -webkit-animation: cloud-move 30s linear 2s infinite;
  -moz-animation: cloud-move 30s linear 2s infinite;
  animation: 30s linear 0s alternate none infinite running cloud-move;
}
.cloud-3 {
  -webkit-animation: cloud-move 20s linear 2s infinite;
  -moz-animation: cloud-move 20s linear 2s infinite;
  animation: 20s linear 0s alternate none infinite running cloud-move;
}
@-webkit-keyframes cloud-move {
  7%,
  90% { opacity: 1; }
  100% { -webkit-transform: translateX(70%); opacity: 0;}
}
@-moz-keyframes cloud-move {
  7%,
  90% { opacity: 1; }
  100% { -moz-transform: translateX(70%); opacity: 0;}
}
@-o-keyframes cloud-move {
  7%,
  90% { opacity: 1; }
  100% { -o-transform: translateX(70%); opacity: 0;}
}
keyframes cloud-move {
  7%,
  90% { opacity: 1; }
  100% { transform: translateX(70%); opacity: 0;}
}
.animated {
  animation-duration: 2s;
}

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

.train-track > img {
  margin-left: -5%;
  max-width: 110%;
}
.clouds {
  width: 25%;
}
.menu-container ul li a {
  font-size: 2.4vw;
  padding: 8px;
}

.menu-container ul li {
  padding: 0 10px;
}
}
@media screen and (max-width: 470px) {
  .menu-container ul li {
  max-width: 290px;
  width: 100%;
  margin-bottom: 3vh;
}
.menu-container ul li a {
  font-size: 13px;
}
  }
@media screen and (max-width: 767px) and (max-height: 400px){
.body-contain {
  min-height: 500px;
}
#wrap {
  min-height: 90px;
}
.menu-container ul li a {
  font-size: 12px;
}
}
@media screen and (max-width: 400px) {
.menu-container ul li a {
  font-size: 13px;
}
.menu-container {
  max-width: 92%;
}
.menu-container ul li a {
  padding: 5px;
}
.menu-container ul li {
  padding: 0 5px;
}
.clouds {
  opacity: 0;
  width: 30%;
}
.menu-container ul li {
  margin-bottom: 10px;
}
.menu-container ul li {
  width: 80%;
}
}
@media screen and (max-width: 480px) {
.orange-blun {
  top: 25%;
}
}


@media screen and (max-width: 340px) {
.menu-container ul li a {
  padding: 5px;
}
.menu-container ul li {
  padding: 0 5px;
}
.menu-container {
  max-width: 92%;
}
.menu-container ul li a {
  font-size: 11px;
}
.logo .logo-inner img {
  max-width: 80%;
}
}