/* 
----------------------------------------------
TABLE OF CONTENTS:
----------------------------------------------

01) Services page Globals
02) Section style adjustments
03) Navigation adjustments
04) Responsive Media Queries
  b) Max-width: 768px
  c) Max-width: 1200px
  e) Min-width: 768px
  f) Min-width: 1200px
  g) Min-width: 1440px
*/


/* 
----------------------------------------------
01
Globals 
----------------------------------------------
*/
a.anchor {
  top: -80px;
}

@media screen and (min-width: 768px) {
  a.anchor {
    top: -130px;
  }
}

@media screen and (min-width: 1440px) {
  a.anchor {
    top: -170px;
  }
}

.textHeaderSm {
  margin-bottom: 20px;
}
.textHeaderSm h3{
  margin-bottom: 10px;
}
.preHeaderGrey {
  color: #8e949b;
  font-size: 0.8em;
  text-transform: uppercase;
  margin-bottom: 0;
  letter-spacing: 2px;
}
.orangeHdrBar-sm {
  height: 3px;
  width: 2.6em;
  background-color: #f04a22;
  padding: 0px;
  display: inline-block;
}
.drkBlueHdrBar-sm {
  height: 3px;
  width: 1em;
  background-color: #212e62;
  margin-left: 0.25em;
  display: inline-block;
}

.textWhite h2, .textWhite p{
  color: #ffffff;
}

.textWhite .preHeader{
  color: #EF7A5D;
}

.textWhite .orangeHdrBar, .textWhite .drkBlueHdrBar {
  background-color: #EF7A5D;
}



/* 
----------------------------------------------
02
Section styles 
----------------------------------------------
*/

section#generalServices,
section#electricalInstrumentation,
section#healthSafety{
  padding: 0 0 80px 0;
}

#electricalInstrumentation {
  background-color: #eaecef;
}

#generalServices .sectionImg{
  background: url(../img/photos/hero-general-services.jpg);
}

#electricalInstrumentation .sectionImg{
  background: url(../img/photos/hero-electrical.jpg);
  height: 650px;
}

#healthSafety .sectionImg{
  background: url(../img/photos/hero-health-safety.jpg);
}

section .container{
  margin-top: -450px;
}

section#electricalInstrumentation .container{
  margin-top: -550px;
}

section#healthSafety .infoPanel{
  height: auto;
}

div.promoPara{
  background: #212e62;
  margin: 0px;
  padding: 50px 30px 40px 30px;
  border-top: 10px solid #212e62;
}

div.promoPara p{
  color: #ffffff;
  font-family: "Manrope", sans-serif;
  font-weight: 100;
  font-size: 1.5em;
  font-style: italic;
  line-height: 25px !important;
  letter-spacing: 1px;
  text-align: center;
}




/* 
----------------------------------------------
03
Navigation Adjustments 
----------------------------------------------
*/
.secondNavWrap {
  position: fixed;
  width: 100%;
}





/* 
----------------------------------------------
04
Responsive Media Queries 
----------------------------------------------
*/

/* 
--------------------------
Media Query:
MAX WIDTH: 768px
--------------------------
*/
@media screen and (max-width: 768px) {
  #generalServices {
    padding-top: 50px !important;
  }
  .snMenuItems li:first-of-type {
    font-size: 1em !important;
  }
  .snMenuItems li a {
    font-size: 1em !important;
  }
}

/* 
--------------------------
Media Query:
MAX WIDTH: 1200px
--------------------------
*/
@media screen and (max-width: 1200px) {
  .snMenuItems li:first-of-type {
    font-size: 0.7em;
  }
  .snMenuItems li a {
    padding: 20px 5px !important;
    font-size: 0.9em;
  }
}

/* 
--------------------------
Media Query:
MIN WIDTH: 768px
--------------------------
*/
@media screen and (min-width: 768px) {
  /* fixes second nav adjust */
  .secondNavWrap {
    top: 95px;
  }

  .icon{
    max-width: 60%;
    padding-top: 20px;
  }
  .icon.iconSmall{
    max-width: 50%;
  }
  #generalServices {
    padding-top: 150px !important;
  }
}


/* 
--------------------------
Media Query:
MIN WIDTH: 1200px
--------------------------
*/
@media screen and (min-width: 1200px) {
  .snMenuItems li a {
    padding: 20px 30px !important;
  }
  
}

/* 
--------------------------
Media Query:
MIN WIDTH: 1440px
--------------------------
*/
@media screen and (min-width: 1440px){
  .secondNavWrap {
    top: 128px;
  }
  #generalServices {
    padding-top: 175px !important;
  }
}