@charset "utf-8";

/* Home Page layout styles
 * Created by: RYC
 * Project: Penang Hot Air Balloon Fiesta
 */

/* header */
/**********/
.header {
  width: 100%;
  padding: 5px 0 5px 250px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}

.header .logo {
  width: 226px;
  height: 200px;
  float: left;
  background-position: right top;
}

.header .logo-black {
  background-image: url('../images/header/logo-hab-black.png');
  background-size: 200px;
  background-repeat: no-repeat;
  /*background-position: left top;*/
}

.header .logo-white {
  background-image: url('../images/header/logo-hab-white.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  /*background-position: left top;*/
}

.header .logo-popup {
  background-image: url('../images/header/logo-hab-popup-2018.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  /*background-position: left top;*/
}

.header .logo-thepath {
  background-image: url('../images/header/logo-hab-thepath-2018.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  /*background-position: left top;*/
}

.header .topnavi {
  min-width: 250px;
  margin: 15px 0px 0px 30px;
  float: left;
}

.header .topnavi-black,
.header .topnavi-black a,
.header .topnavi-black a:active,
.header .topnavi-black a:hover,
.header .topnavi-black a:visited {
  color: #000000;
  font-weight: bold;
  text-decoration: none;
}

.header .topnavi-white,
.header .topnavi-white a,
.header .topnavi-white a:active,
.header .topnavi-white a:hover,
.header .topnavi-white a:visited {
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
}

.header .topnavi .col-left {
  float: left;
}

.header .topnavi .col-right {
  margin-left: 50px;
  float: right;
}

.header .topnavi .col-left ul li {
  padding: 3px 0 4px 0;
}

.header .topnavi .col-left ul li img {
  height: 25px;
}

.header .topnavi .col-right ul li {
  padding: 3px 0 4px 0;
}

.header .topnavi .col-right ul li img {
  height: 28px;
}

.header .topnavi .icon-mini {
  width: 30px;
  height: 30px;
  background-image: url('../images/header/icon-mini.png');
  background-size: 30px 30px;
  background-repeat: no-repeat;
  background-position: left top;
}

.header .socialmedia {
  margin-top: 10px;
  float: right;
}

.header .socialmedia ul li {
  float: left;
}

.header-mobile {
  width: 100%;
  padding: 5px 0 5px 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.header-mobile .logo-mobile {
  width: 100%;
}

.header-mobile .logo-mobile img {
  /*margin: 0 auto;*/
  /*max-width: 270px;*/
  display: block;
  max-width: 133px;
  width: 36%;
  /*margin: 11px 0 0 12px;*/
}

.header-mobile .logo-mobile{
  width: 163px;
  height: 125px;
  background-repeat: no-repeat;
  background-position: right bottom;
}

.header-mobile .logo-white{
  background-size: 100% auto;
  background-image: url('../images/header/logo-hab-mobile-white.png');
  width: 163px;
  height: 135px;
}
.header-mobile .logo-popup{
  background-size: 100% auto;
  background-image: url('../images/header/logo-hab-popup-2018.png');
  width: 163px;
  height: 125px;
}
.header-mobile .logo-thepath{
  background-size: 100% auto;
  background-image: url('../images/header/logo-hab-thepath-2018.png');
  width: 163px;
  height: 125px;
}

.mobile-menu-container {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0 15px 0 0;
  /*
  margin: 0 5px 0 0;
  */
}


/* page content */
/****************/
.page-content {

}


/* footer */
/**********/
.footer-home {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
}

.footer-home-mobile {
  z-index: 99;
}

.footer {
  width: 100%;
  padding: 0px 0;
  background-color: #ffffff;
}

.footer .copyright {
  /*margin-top: 20px;*/
  margin: 23px 0 10px 0;
  font-size: 11px;
  color: #ec297b;
  text-align: left;

  padding-left: 20px;
}

.footer .copyright > div {
  display: inline-block;
  text-align: left;
  margin: 0 10px;
}

.footer .sponsor-logos img {
  height: auto;
  padding: 10px 40px 10px 0;
  max-width: 100%;
}

.footer .copyright-mobile {
  /*margin-top: 5px;*/
  margin: 5px 0 10px 0;
  font-size: 11px;
  line-height: 14px;
  color: #ec297b;
}

.footer .sponsor-logos-mobile img {
  max-width: 100%;
  height: auto;
  padding: 10px 0;
}


@media (max-width: 768px) and (orientation : landscape) {
  .header-mobile .logo-mobile img {
    max-width: 120px;
  }
}



/* - landscape phone to portrait tablet */
@media (max-width: 750px) {



}

/* - landscape phone to portrait tablet */
@media (max-width: 750px) {



}

/* - landscape phones and down */
@media only screen and (max-width: 480px) {



}

/* - portrait phones and down */
@media only screen and (max-width: 360px) {



}