/* daniels cooler shit 01.02.17 */
.tagline .site-branding > a > img {
 max-width: 100% !important;
 height: auto !important;
 max-height: 100%;
}

/* Top bar formatting - change BG + Text color and alignment to make contact info more visible*/

#top-bar {
    background: #04b4c8;
    clear: both;
    position: relative;
    width: 100%;
}

#top-bar .top-bar-text span a {
    color: #ffffff;
    display: inline-block;
    text-decoration: none;
}

/* ---------- home page boxes ---------- */
.white_box.panel-widget-style {
  padding: 30px 30px 30px 30px;
  background-color: #ffffff;
  min-height: 300px;
}

.white_box.panel-grid-cell .widget-title {
	color:#04b4c8;
}

/* for mobile phones home page, products, dLED on location */
 @media only screen and (max-width: 768px) {
	.white_box.panel-widget-style {
    min-height: auto;
    margin-top:-25px;
    margin-bottom: -25px;
   }
}

/* ----- home page - change titles to turquoise ---------- */
#pgc-1871-1-1-0 .widget-title {
  color: #04b4c8;
}
#pgc-1871-1-2-0 .widget-title {
  color: #04b4c8;
}
#pgc-1871-1-1-1 .widget-title {
  color: #04b4c8;
}
#pgc-1871-1-2-1 .widget-title {
  color: #04b4c8;
}

#pgc-774-1-0 .widget-title {
  color: #04b4c8;
}
#pgc-774-1-1 .widget-title {
  color: #04b4c8;
}

#pgc-774-1-2 .widget-title {
  color: #04b4c8;
}


/* all other pages - change titles to white (without this default is dark grey) */
.panel-grid-cell .widget-title {
  color: #ffffff;
}


/* products page - tall color boxes with white text */
.color_box_tall.panel-widget-style {
  padding: 20px;
  color: white;
  min-height: 600px;
}

/* products page - medium size color boxes for bullet point feature lists. 
Make mobile version or else replace height in tall box class */
.color_box_medium.panel-widget-style {
  padding: 20px;
  color: white;
  min-height: 600px;
}

/* for mobile phones */ 
@media only screen and (max-width: 768px) {
    .color_box_tall.panel-widget-style {
  	min-height: auto;
  }
 }

/* dLED on location - color boxes for texts, variable height -
This height is for the 1st box, 2nd box height is defined in attributes on the page */
.color_box_bold_var_height.panel-widget-style {
  padding: 35px;
  color: white;
  font-weight: 700;
  font-size: 1.5em;
  min-height:376.85px;
}

/* for mobile phones */ 
@media only screen and (max-width: 768px) {
	.color_box_bold_var_height.panel-widget-style {
    min-height: auto;
   }
}

/* quality page - semi-transparent color boxes */
.color_box_overlay.panel-widget-style {
  padding: 20px;
  background-color: rgba(241, 247, 247, 0.8);
  color: #184ad1;
  min-height: 280px;
}

.quality_overlay {
  padding: 20px;
  background-color: rgba(241, 247, 247, 0.8);
  min-height: 280px;
}
.responsive-menu .main-navigation.toggled ul > li[class*=children] ul li ul li ul li ul li ul li ul li a
/* instructions landing page - pale boxes for text + graphics */
.dark_title .widget-title {
  color:#5A5D60;
}

.turq_title .widget-title {
  color:#04b4c8;
}

.center_title .widget-title {
  text-align:center;
}

.pale_background {
  background-color:#ffffff;
  margin-bottom:10px;
}

/* about us page (or other pages) - color box for text, height defined in attributes on page */
.color_box.panel-widget-style {
  padding: 30px;
  color: white;
}

/* formatting for energy cost calculator - deactivated since it was making all h2 and h3 headers blue!!!! */

#fbuilder .fform h2 {font-size:32px; color: #184AD1 }
#fbuilder .fform span {font-size:16px; }


/* format input fields */
.cff-number-field input[type=number] {
background-color: #fff;
color: #5a5d60;
text-align: center;
max-width: 150px;
}

/* format the dropdown field for shelf width */
.cff-dropdown-field select {
background-color: #fff;
color: #5a5d60;
text-align: center;
border-color:#edeeef;
max-width: 150px;
}

/* format result field to make more prominent*/
.cff-calculated-field input[type=text] {
color: #6484dd;
font-weight: bold;
font-size: 1.3em;
text-align: center;
background-color:#fff;
border-color: #04b4c8;
border-width: 2px;
}

/*format container for energy cost calculator - more padding for desktop, less for mobile */
.energy_cost_div {
padding: 60px;
}

@media only screen and (max-width: 768px) {
.energy_cost_div {
padding: 20px;
   }

}

/* formatting contact form 7 - same code in child theme but doesn't work in all browsers */
.wpcf7 .wpcf7-mail-sent-ok {
    background: #fff;
    border: 0;
    border-top: 1px solid #04b4c8;
    border-bottom: 1px solid  #04b4c8;
    color: #04b4c8;
    float: left;
    margin-top: 1.78em;
}

/* center images on mobile phones */ 
@media only screen and (max-width: 768px) {
  .alignleft, .alignright {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
  }
}