/* ==================== REQUIRED LIBRARIES DO NOT REMOVE ===================== */
/* Including lib.less - this template is intentionally left blank and does not need to be included  on the live server */
/* Including lib.less - this template is intentionally left blank and does not need to be included  on the live server */
/* =========================================================================== */
/*
** MASTHEAD
**
** DESCRIPTION:	
** USAGE:		
** NOTES:
**
*/
#masthead {
  position: relative;
  height: 217px;
  width: 90%;
  max-width: 1200px;
  min-width: 800px;
  margin: 0 auto;
  padding: 12px;
}
#masthead h1 {
  margin: 0.2em 0 0 -0.5em;
  text-indent: -999em;
  width: 332px;
  background: transparent url(/styles/img/global-sprites.png) 0 0 no-repeat;
}
#masthead h1 a {
  width: 332px;
  height: 120px;
  display: block;
  display: block;
}
.bg1 #masthead {
  background: url(/styles/img/masthead-1.jpg) center -25px no-repeat;
}
.bg2 #masthead {
  background: url(/styles/img/masthead-2.jpg) center -25px no-repeat;
}
.bg3 #masthead {
  background: url(/styles/img/masthead-3.jpg) center -25px no-repeat;
}
.bg4 #masthead {
  background: url(/styles/img/masthead-4.jpg) center -25px no-repeat;
}
.bg5 #masthead {
  background: url(/styles/img/masthead-5.jpg) center -25px no-repeat;
}
.bg6 #masthead {
  background: url(/styles/img/masthead-6.jpg) center -25px no-repeat;
}
/*
** 900
**
** DESCRIPTION:	Styles that apply to screens 900 pixels wide and down
** USAGE:		
** NOTES: Typically this means tablets users in portrait mode and desktop users smaller than average screens
**
*/
@media only screen and (max-width: 900px) {
  #masthead {
    width: 97%;
    padding: 1.5%;
    min-width: 0;
  }
  #masthead h1 {
    margin-left: 1.5%;
  }
}
/*
** 480
**
** DESCRIPTION:	Styles that apply to screens 480 and belows pixels wide and down
** USAGE:		
** NOTES: Typically this means mobile phones held in portrait
**
*/
@media only screen and (max-width: 600px) {
  .bg1 #masthead {
    background: none;
  }
  .bg2 #masthead {
    background: none;
  }
  .bg3 #masthead {
    background: none;
  }
  .bg4 #masthead {
    background: none;
  }
  .bg5 #masthead {
    background: none;
  }
  .bg6 #masthead {
    background: none;
  }
  #masthead {
    background: none;
    width: auto;
    overflow: hidden;
  }
  #masthead h1 {
    margin: -0.2em auto 0 auto;
    width: 240px;
    height: 110px;
    background-position: -380px 0;
  }
}