/*
Theme Name: Balloon Aloft Canberra
Theme URI: http://balloonaloftcanberra.com.au
Author: Balloon Aloft Canberra
Author URI: http://www.balloonaloftcanberra.com.au
Description: Balloon Aloft Canberra - Balloon Flights Canberra
Version: 2.7.5
License:
License URI:
*/
/* prevent overflow for these elements */
img, object,
embed, video {
  max-height: 100%;
  max-width: 100%;
}

/*
 * Mailchimp signup
 */
#mc_embed_signup label {
	display: none;
}

/*
 * RIBBON BAR
 */
.post-template-default #masthead,
.page-template-default #masthead,
.page-template-page-transparent-header-php .before-sticky #masthead,
.page-template-page-transparent-header-light-php .before-sticky #masthead {
   height: auto !important;
   background-color: rgba(0, 32, 96, 0.2) !important;
}
/* move_down means sticky menu is on top while page has scrolled */
.post-template-default #masthead.stuck.move_down,
.page-template-default #masthead.stuck.move_down,
.page-template-page-transparent-header-php #masthead.stuck.move_down,
.page-template-page-transparent-header-light-php #masthead.stuck.move_down {
   height: auto !important;
   background-color: rgba(0, 32, 96, 0.9) !important;
}
.page-template-page-transparent-header-light-php #masthead.stuck.move_down .left-links {
   padding-top: 13px;
}

#masthead .row {
   width: 100%;
   max-width: 1080px;
   height: auto;
   max-height: 150px;
   display: flex;
   flex-wrap: wrap; /* I'm tired */
   align-items: center;
   margin: 0 auto;
   padding: 15px;
}
#masthead .ribbon-left {
   max-width: 60%;
   height: 52px;
   padding-right: 40px;
   display: flex;
   justify-content: flex-start;
   align-items: center;
}
#masthead .ribbon-left > a {
   height: 100%;
   width: 177px; /* I'm tired and confused */
}
#masthead .ribbon-right {
   width: 40%;
   padding: 0;
   text-align: right;
   display: flex;
   justify-content: flex-end;
   align-items: center;
}
#masthead .ribbon-right .contact-details {
   display: none;
   font-size: 21px;
   padding-right: 10px;
}
#masthead .ribbon-right .contact-details span {
   color: #EEE;
   font-size: inherit;
   padding: 0 0 2px 0;
}
#masthead .ribbon-right .contact-details span:first-child {
   display: block;
}
#masthead .left-links, #masthead .right-links {
   display: none !important; /* never used */
}
#masthead .ribbon-right .menu-icons .social-icons {
   /* keep social icons invisible until vp reaches 450px wide */
   display: none;
}
#masthead .mobile-menu {
   display: inline-block !important; /* mobile-menu is actually used in all views now */
   height: 50px;
   padding: 0 0 0 7px;
}
#masthead .mobile-menu.show-for-small .icon-menu {
   font-size: 45px;
   line-height: 1.05;
}
#masthead .ribbon-right .menu-icons a {
   display: inline-block;
   vertical-align: middle;
   padding: 0 0 0 5px;
}
#masthead .ribbon-right .menu-icons a:nth-child(2) img {
   /* that damn fuzzy instagram logo from a random Google search (hey I don't own AI) */
   padding-top: 1px;
}

/*
 * RIBBON BAR MEDIA QUERIES
 */
@media only screen and (min-width: 450px) {
   /* show social media icons */
   #masthead .ribbon-right .menu-icons .social-icons {
      display: initial;
   }
   /* increase row width and therefore logo size */
   #masthead .ribbon-left {
      width: 40%;
   }
   #masthead .ribbon-right {
      width: 60%;
   }
}
@media only screen and (min-width: 840px) {
   /* add contact info */
   #masthead .ribbon-right .contact-details {
      display: initial;
   }
   /* increase width of rows so image stays correct size */
   #masthead .ribbon-left {
      width: 30%;
   }
   #masthead .ribbon-right {
      width: 70%;
   }
}
@media only screen and (min-width: 970px) {
   #masthead .ribbon-right .contact-details {
      font-size: 25px;
   }
}
