@charset "UTF-8";
/*Color*/
/*Font styling*/
/*Measurement*/
/*Shadow*/
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

a {
  color: #b30000;
  text-decoration: none;
  cursor: pointer; }

a:hover {
  color: #ff0000;
  text-decoration: underline; }

.padding {
  padding: 2%; }

.padding--m {
  padding: 2rem; }

.padding--l {
  padding: 3rem; }

.last-item--end {
  margin-bottom: 0;
  padding-bottom: 0; }

.text--center {
  text-align: center; }

.flex--wrap {
  display: flex;
  flex-wrap: wrap; }

.flex--nowrap {
  display: flex;
  flex-wrap: nowrap; }

.flex--wrap-reverse {
  display: flex;
  flex-wrap: wrap-reverse; }

.flex--center {
  justify-content: center; }

.small_spacer {
  width: 100vw;
  height: 2rem; }

.link_red {
  color: #b30000;
  text-decoration: none; }
  .link_red:hover {
    color: #ff0000;
    text-decoration: underline; }

.p-1 {
  padding: 1rem; }

.p-2 {
  padding: 2rem; }

.d-flex {
  display: flex; }

.justify-content-center {
  justify-content: center; }

.flex-column {
  flex-direction: column; }

.button {
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  padding: .5rem;
  border: 4px solid;
  border-radius: 5px;
  font: normal normal bold 20px arial; }
  .button:hover {
    text-decoration: none; }

.button--slider {
  margin-top: 2rem;
  background-color: #000000;
  color: #ffffff;
  border: none;
  border-radius: 12px; }
  .button--slider:hover {
    color: #b30000;
    background-color: #ffffff;
    border: #ffffff;
    box-shadow: 0 0 4px 4px rgba(179, 0, 0, 0.4); }

.button--buy {
  color: #ffffff;
  border: 4px solid #7d0000;
  border-radius: 5px;
  background: linear-gradient(to bottom, #de0d0d, #8a0505);
  box-shadow: #ff0000 2px 3px 5px 0px;
  text-shadow: #5a0000 1px 2px 1px; }
  .button--buy:hover {
    background-color: #ffffff;
    background: linear-gradient(to bottom, #f53b3bd5, #db0a0a);
    border: 4px solid #ff0000; }

.button--info {
  color: #ffffff;
  border: 4px solid #111160;
  border-radius: 5px;
  background: linear-gradient(to bottom, #3030ff, #111160);
  box-shadow: #3a3aff 5px 6px 14px 0px;
  text-shadow: #0a0a36 1px 2px 1px; }
  .button--info:hover {
    color: #271adf;
    background-color: #ffffff;
    background: linear-gradient(to bottom, #5354c5d5, #171d72);
    border: 4px solid #271adf; }

.button--popup {
  color: #b30000;
  border: 4px solid #b30000;
  background-color: black; }
  .button--popup:hover {
    color: #b30000;
    background-color: white;
    border: 4px solid white; }

html {
  font-size: 16px; }

body {
  font-size: 1em;
  line-height: 1.25;
  font-family: "Libre Baskerville", serif;
  margin-bottom: 0em; }

h1 {
  font-size: 2.375em;
  line-height: 1;
  font-family: "Libre Baskerville", serif;
  margin-bottom: 0em;
  font-weight: bold;
  color: #b30000; }

h2 {
  font-size: 1.75em;
  line-height: 1.28571;
  font-family: "Libre Baskerville", serif;
  margin-bottom: 0em;
  color: #b30000; }

h6 {
  font-size: 1.75em;
  line-height: 1.28571;
  font-family: "Libre Baskerville", serif;
  margin-bottom: 0em;
  padding-bottom: 1rem; }

h3 {
  font-size: 1.5em;
  line-height: 1.25;
  font-family: "Libre Baskerville", serif;
  margin-bottom: 0em;
  color: #b30000; }

p {
  font-size: 1em;
  line-height: 1.5625;
  font-family: "Libre Baskerville", serif;
  margin-bottom: 0em;
  color: #000000; }

/*  apply a natural box layout model to all elements  */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

#hamburgerBtn {
  display: none; }

/* hide the navigation button by default */
@media only screen and (max-width: 64rem) {
  /* Navigation Button */
  body {
    padding-top: 40px; }
  nav {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 2.75rem;
    background-color: #000000;
    /* change the menu color */
    z-index: 99; }
    nav #searchWrapper {
      display: flex; }
      nav #searchWrapper #searchIcon {
        background: url("../northshoresafety/images/magnifyingGlass(19).png");
        background-repeat: no-repeat;
        display: block;
        width: 2rem;
        height: 2.2rem;
        background-position: 1vw;
        border: none;
        cursor: pointer; }
      nav #searchWrapper #search {
        width: 70px; }
  #navButtonWrapper {
    width: 100%;
    height: 3.5rem;
    padding-top: .2rem;
    background-color: #000000;
    border-bottom: 1px solid grey; }
    #navButtonWrapper #hamburgerBtn {
      display: block;
      width: 7rem;
      height: 2.75rem;
      background-image: url("../northshoresafety/images/menuOpenWhite.png");
      background-color: rgba(0, 0, 0, 0.1);
      background-position: 2vw center;
      background-repeat: no-repeat;
      border: 0 none;
      float: left; }
    #navButtonWrapper #hamburgerBtn.open {
      background: url("../northshoresafety/images/menuCloseWhite.png");
      background-position: 2vw center;
      background-repeat: no-repeat; }
    #navButtonWrapper .mobile-logo-wrapper {
      padding-top: .5rem;
      padding-right: .5rem; }
      #navButtonWrapper .mobile-logo-wrapper figure {
        float: right;
        width: 2.5rem;
        margin: 0 auto; }
        #navButtonWrapper .mobile-logo-wrapper figure img {
          width: 100%; }
  /* Navigation Bar*/
  #primaryNav {
    width: 100%;
    height: 0;
    overflow: hidden;
    background-color: #000000;
    /* change the menu color */
    margin: 0;
    padding: 0;
    font-family: "Libre Baskerville", serif;
    font-weight: normal; }
  #primaryNav li.active a {
    color: #ff0000; }
  #primaryNav li a {
    display: block;
    width: 100%;
    padding: .75rem 2vw;
    font-size: 1rem;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15);
    color: white;
    text-decoration: none !important;
    border-top: 1px solid rgba(0, 0, 0, 0.2); }
  #primaryNav li a:hover {
    background-color: rgba(0, 0, 0, 0.5);
    text-decoration: none !important; }
  /* Toggle the navigation bar to expand down  */
  #primaryNav.open {
    height: auto; }
  /* Submenus – optional .parent class indicates dropdowns */
  #primaryNav li a:hover {
    color: #ff0000; }
  #primaryNav li.parent > a:after {
    font-size: .75rem;
    content: "\25BC";
    color: rgba(255, 255, 255, 0.5);
    float: right; }
  #primaryNav li.parent > a:hover {
    background: rgba(0, 0, 0, 0.75); }
  /*hide the sub menu items by default*/
  #primaryNav li ul {
    display: none;
    background: rgba(0, 0, 0, 0.3);
    padding: 0; }
  #primaryNav li ul a {
    border-top: solid 1px rgba(0, 0, 0, 0.2);
    font-size: 12px;
    padding: 10px 10%;
    font-weight: normal; }
  #primaryNav li:hover ul {
    display: block; } }

/* End Mobile Styles */
/* Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

/* apply a natural box layout model to all elements */
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

/* OVERLAY */
#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 12; }
  #overlay .searchWrapper {
    position: fixed;
    top: 20%;
    width: 100%;
    height: 20%; }
    #overlay .searchWrapper form {
      width: 100%;
      position: relative; }
      #overlay .searchWrapper form input {
        padding: 6px;
        border-radius: 10px 0 0 10px;
        padding-left: 1rem;
        float: left;
        font-size: 17px;
        width: 65vw;
        border: none;
        margin-left: 7vw; }
      #overlay .searchWrapper form #submitBtn {
        float: left;
        border-radius: 0 10px 10px 0;
        border: none;
        text-decoration: none;
        color: #ffffff;
        background-color: #b30000;
        font-size: 17px;
        padding: 6px;
        text-align: center;
        cursor: pointer; }
    #overlay .searchWrapper #closeBtn {
      border: none;
      position: absolute;
      font-size: 1rem;
      text-decoration: none;
      color: #ffffff;
      background-color: #b30000;
      border-radius: 10px;
      padding: 0.4rem 0.8rem;
      text-align: center;
      bottom: 0;
      right: 10vw;
      cursor: pointer; }

/* END OVERLAY */
/*   SEARCH DISPLAY */
.item-flex-buffer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; }
  .item-flex-buffer .item__image {
    display: flex;
    justify-content: center; }
    .item-flex-buffer .item__image figure {
      max-width: 15rem; }

#search-entry-footer {
  background-color: rgba(255, 255, 255, 0.6);
  text-align: center; }

#search-entry-header {
  background-color: #333333; }
  #search-entry-header a {
    color: white; }
  #search-entry-header a:hover {
    color: red; }
  #search-entry-header .entry-title {
    font-size: 2rem;
    padding: 1rem; }

/* END SEARCH DISPLAY */
/* POST DISPLAY FROM SEARCH*/
.post-display-flex-buffer {
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around; }
  .post-display-flex-buffer .itemDescription_post {
    padding-bottom: 2rem;
    border: 0.5rem solid black;
    margin: 0.5rem; }
  .post-display-flex-buffer #singlePostWrapper {
    text-align: center;
    background-color: #dadada; }
    .post-display-flex-buffer #singlePostWrapper .single-entry-title {
      color: #000000;
      font-size: 2rem;
      padding-top: 1rem; }
  .post-display-flex-buffer .itemWrapper .btnWrapper {
    padding-top: 1rem;
    display: flex;
    justify-content: space-around; }
    .post-display-flex-buffer .itemWrapper .btnWrapper .button {
      padding: 1rem;
      border: none;
      background-color: #b30000;
      color: #ffffff;
      font-size: 0.8rem;
      border-radius: 8px;
      flex: 0 0 35%;
      font-weight: 700;
      top: 50%;
      text-align: center; }
    .post-display-flex-buffer .itemWrapper .btnWrapper .button:hover {
      background-color: #ffffff;
      border: none;
      color: #b30000;
      box-shadow: 0 0 2px 2px rgba(179, 0, 0, 0.4); }
  .post-display-flex-buffer .itemWrapper figure {
    width: 100%;
    padding: 1rem;
    margin: 0 auto;
    display: flex;
    justify-content: center; }
    .post-display-flex-buffer .itemWrapper figure img {
      width: 15rem; }
  .post-display-flex-buffer .sidebar_post {
    display: none; }

/*   END Search POST Display */
/* HEADER */
header {
  background-color: #000000;
  color: #ffffff;
  padding-top: 1rem; }
  header #headerLogo {
    display: none; }
  header .headerDescription {
    padding: 1rem 0;
    text-align: center; }
    header .headerDescription span {
      color: #ffffff; }
    header .headerDescription a:hover {
      text-decoration: none;
      color: #b30000; }
      header .headerDescription a:hover span {
        color: white; }

/*END HEADER*/
/*MAIN*/
main {
  height: auto;
  background-color: #dadada; }
  main img {
    width: 100%; }
  main h1,
  main h2,
  main h3,
  main h4,
  main h6,
  main p {
    text-align: center; }
  main img {
    width: 100%; }
  main .padding--s {
    padding: 1rem; }

/*HOME PAGE*/
.home-page-wrapper .img-wrapper1 {
  height: 100%;
  margin: 0 auto;
  padding-bottom: 1rem; }
  .home-page-wrapper .img-wrapper1 .picDescription {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0.5rem auto; }
  .home-page-wrapper .img-wrapper1 #img1 {
    background-image: url("../northshoresafety/images/homepage/small/pic1.jpg");
    background-size: cover;
    height: 400px; }
  .home-page-wrapper .img-wrapper1 #img2 {
    background-image: url("../northshoresafety/images/homepage/small/pic2.jpg");
    background-size: cover;
    height: 400px; }

.home-page-wrapper .img-wrapper1:first-child {
  padding-top: 0.1rem; }

.home-page-wrapper .slider {
  max-width: 100%;
  height: 450px;
  position: relative; }
  .home-page-wrapper .slider .sliderDescription {
    position: absolute;
    margin: auto;
    z-index: 4;
    width: 100%;
    height: 100%;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.3); }
  .home-page-wrapper .slider .slider--text {
    flex-direction: column; }
    .home-page-wrapper .slider .slider--text span {
      color: #ffffff; }
  .home-page-wrapper .slider .slider-buffer {
    display: flex;
    justify-content: center; }
  .home-page-wrapper .slider .slide1,
  .home-page-wrapper .slider .slide10,
  .home-page-wrapper .slider .slide2,
  .home-page-wrapper .slider .slide3,
  .home-page-wrapper .slider .slide4,
  .home-page-wrapper .slider .slide5,
  .home-page-wrapper .slider .slide6,
  .home-page-wrapper .slider .slide7,
  .home-page-wrapper .slider .slide8,
  .home-page-wrapper .slider .slide9 {
    position: absolute;
    width: 100%;
    height: 100%; }
  .home-page-wrapper .slider .slide1 {
    background: url("../northshoresafety/images/homepage/small/pic1_small.jpg") no-repeat center;
    background-size: cover;
    animation: fade 15s infinite;
    -webkit-animation: fade 15s infinite; }
  .home-page-wrapper .slider .slide2 {
    background: url("../northshoresafety/images/homepage/small/pic2_small.jpg") no-repeat center;
    background-size: cover;
    animation: fade2 15s infinite;
    -webkit-animation: fade2 15s infinite; }
  .home-page-wrapper .slider .slide3 {
    background: url("../northshoresafety/images/homepage/small/pic3_large.jpg") no-repeat center;
    background-size: cover;
    animation: fade3 15s infinite;
    -webkit-animation: fade3 15s infinite; }
  .home-page-wrapper .slider .slide4 {
    background: url("../northshoresafety/images/homepage/small/pic4_small.jpg") no-repeat center;
    background-size: cover;
    animation: fade4 15s infinite;
    -webkit-animation: fade4 15s infinite; }
  .home-page-wrapper .slider .slide5 {
    background: url("../northshoresafety/images/homepage/small/pic6_small.jpg") no-repeat center;
    background-size: cover;
    animation: fade5 15s infinite;
    -webkit-animation: fade5 15s infinite;
    z-index: 2 !important; }
  .home-page-wrapper .slider .slide6 {
    background: url("../northshoresafety/images/homepage/small/pic5_small.jpg") no-repeat center;
    background-size: cover;
    animation: fade 15s infinite;
    -webkit-animation: fade 15s infinite;
    z-index: 2 !important; }
  .home-page-wrapper .slider .slide7 {
    background: url("../northshoresafety/images/homepage/small/pic7_small.jpg") no-repeat center;
    background-size: cover;
    animation: fade2 15s infinite;
    -webkit-animation: fade2 15s infinite;
    z-index: 2 !important; }
  .home-page-wrapper .slider .slide8 {
    background: url("../northshoresafety/images/homepage/small/pic8_small.jpg") no-repeat center;
    background-size: cover;
    animation: fade3 15s infinite;
    -webkit-animation: fade3 15s infinite;
    z-index: 2 !important; }
  .home-page-wrapper .slider .slide9 {
    background: url("../northshoresafety/images/homepage/small/pic9_small.jpg") no-repeat center;
    background-size: cover;
    animation: fade4 15s infinite;
    -webkit-animation: fade4 15s infinite;
    z-index: 2 !important; }
  .home-page-wrapper .slider .slide10 {
    background: url("../northshoresafety/images/homepage/small/pic10_small.jpg") no-repeat center;
    background-size: cover;
    animation: fade5 15s infinite;
    -webkit-animation: fade5 15s infinite;
    z-index: 2 !important; }

@keyframes fade {
  0% {
    opacity: 1; }
  20% {
    opacity: 0; }
  40% {
    opacity: 0; }
  60% {
    opacity: 0; }
  80% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade2 {
  0% {
    opacity: 0; }
  20% {
    opacity: 1; }
  40% {
    opacity: 0; }
  60% {
    opacity: 0; }
  80% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@keyframes fade3 {
  0% {
    opacity: 0; }
  20% {
    opacity: 0; }
  40% {
    opacity: 1; }
  60% {
    opacity: 0; }
  80% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@keyframes fade4 {
  0% {
    opacity: 0; }
  20% {
    opacity: 0; }
  40% {
    opacity: 0; }
  60% {
    opacity: 1; }
  80% {
    opacity: 0; }
  100% {
    opacity: 0; } }

@keyframes fade5 {
  0% {
    opacity: 0; }
  20% {
    opacity: 0; }
  40% {
    opacity: 0; }
  60% {
    opacity: 0; }
  80% {
    opacity: 1; }
  100% {
    opacity: 0; } }

#test {
  display: none; }

.popup {
  position: fixed;
  display: flex;
  bottom: 0;
  margin-bottom: 5rem;
  justify-content: center;
  z-index: 30;
  width: 100%; }
  .popup .popHolder {
    display: flex;
    max-width: 95%;
    width: 30rem;
    border: white 2px solid;
    border-radius: 5px;
    height: 13rem;
    background-color: black;
    flex-direction: column;
    align-items: center; }
    .popup .popHolder .navigationHolder {
      flex-basis: 10%;
      min-height: 1rem;
      width: 100%;
      display: flex;
      justify-content: flex-end; }
      .popup .popHolder .navigationHolder div {
        margin-right: 1rem; }
        .popup .popHolder .navigationHolder div p {
          color: white; }
    .popup .popHolder .textHolder {
      flex-basis: 45%;
      padding: 1rem;
      width: 30rem;
      color: white;
      text-align: center;
      border-top: white 0.5px solid; }
    .popup .popHolder .buttonHolder {
      flex-basis: 40%; }

.modal-content {
  background: transparent !important;
  border: none !important; }

/*GFCI + ELCI*/
.card-product {
  display: flex;
  flex-direction: column;
  padding: .5rem .5rem;
  margin: 1rem auto;
  border: 0.5rem solid #000000;
  background-color: #cccccc;
  -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.75);
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.75); }
  .card-product--image {
    flex-basis: 20%;
    margin-bottom: 1rem; }
    .card-product--image figure {
      height: 100%;
      width: auto; }
      .card-product--image figure img {
        max-width: 100%;
        max-height: 100%;
        display: block; }
  .card-product--content {
    flex-basis: 60%; }
  .card-product .btnWrapper {
    min-height: 4rem;
    padding-bottom: .5rem;
    flex-basis: 20%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end; }
    .card-product .btnWrapper .btnHolder {
      display: flex;
      justify-content: center;
      flex: 0 0 45%; }

/*END GFCI + ELCI*/
/*NEC COMPLIANCE*/
.nec__compliance,
.nec__code,
.nec__learn {
  margin-top: 1rem;
  margin-bottom: 4rem; }

.nec-key {
  margin-top: 1rem;
  margin-bottom: 4rem;
  display: flex;
  flex: column;
  justify-content: center;
  align-items: center; }

.nec-key__table {
  border: 1px solid #333;
  line-height: 1.3em;
  width: 100%; }
  .nec-key__table th {
    background-color: #333;
    color: #fff;
    border-bottom: 1px solid #fff; }
  .nec-key__table td {
    background-color: #fff;
    text-align: center;
    border-left: 1px solid #333; }
  .nec-key__table tr {
    border-bottom: 1px solid #333; }
  .nec-key__table tr:last-child th {
    border-bottom: 0; }

.nec__photo-wrapper .img__wrapper {
  flex: 0 0 45%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1rem; }
  .nec__photo-wrapper .img__wrapper p,
  .nec__photo-wrapper .img__wrapper h6 {
    text-align: center;
    width: 100%; }
  .nec__photo-wrapper .img__wrapper figure {
    max-width: 20rem; }
    .nec__photo-wrapper .img__wrapper figure img {
      max-height: 25rem; }

.nec__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; }

/*END NEC COMPLIANCE*/
/*ABOUT*/
.about-top,
.about-bottom {
  display: flex;
  flex-wrap: wrap; }
  .about-top span,
  .about-bottom span {
    font-size: 18px;
    font-weight: 700; }

.about-top__item {
  flex: 0 0 100%;
  padding: 1rem 0; }

.about-bottom__item {
  padding: 1rem 0; }

.about--img {
  height: 10rem; }
  .about--img img {
    height: 10rem; }

/*END ABOUT*/
/*TECHNICAL*/
.tech-1 {
  flex: 0 0 100%; }
  .tech-1 span {
    color: black; }
  .tech-1 ul {
    list-style: none;
    line-height: 2rem;
    flex: 0 0 100%; }
    .tech-1 ul li {
      text-align: center; }
  .tech-1 #techLinks {
    flex: 0 0 100%; }
  .tech-1 .manualPhoto {
    flex: 0 0 100%; }

.tech-2 {
  flex: 0 0 100%;
  padding-top: 2rem; }
  .tech-2 a {
    color: #b30000; }
  .tech-2 a:hover {
    color: #ff0000; }
  .tech-2 ul {
    list-style: none;
    padding-left: 5%;
    line-height: 2rem;
    flex: 0 0 100%; }
    .tech-2 ul li a {
      color: #b30000; }
    .tech-2 ul li a:hover {
      color: #ff0000; }

/*END TECHNICAL*/
/*CONTACT*/
.mapWrapper {
  flex: 0 0 100%;
  padding: 2rem 0; }
  .mapWrapper .locationMap {
    width: 100%;
    height: 400px; }

.contactForm {
  flex: 0 0 100%; }
  .contactForm .entry-header {
    display: none; }
  .contactForm .entry-footer {
    display: none; }
  .contactForm input[type="email"],
  .contactForm input[type="tel"],
  .contactForm input[type="text"] {
    width: 100%;
    border-radius: 4px;
    padding: 12px;
    border: 1px solid #ccc;
    font-family: "Libre Baskerville", serif;
    margin: 1.5rem 0; }
  .contactForm textarea {
    width: 100%;
    border-radius: 4px;
    padding: 12px;
    border: 1px solid #ccc;
    font-family: "Libre Baskerville", serif;
    margin: 1.5rem 0;
    height: 10rem; }
  .contactForm .frm_primary_label {
    font-size: 1.5rem;
    padding: 12px 12px 12px 0; }
  .contactForm .frm_screen_reader,
  .contactForm .frm_verify {
    display: none !important; }
  .contactForm .frm_button_submit {
    width: 100%;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
    padding: 14px 23px;
    border: 4px solid #7d0000;
    border-radius: 5px;
    background: linear-gradient(to bottom, #de0d0d, #8a0505);
    box-shadow: #ff0000 2px 3px 5px 0px;
    text-shadow: #5a0000 1px 2px 1px;
    font: normal normal bold 20px arial; }
    .contactForm .frm_button_submit:hover {
      background-color: #ffffff;
      background: linear-gradient(to bottom, #f53b3bd5, #db0a0a);
      border: 4px solid #ff0000; }

/*END CONTACT*/
/*Error 404 / search not found*/
.page-header {
  text-align: center;
  background-color: #dadada;
  padding-bottom: 0; }

.content-noneWrapper form {
  padding: 2rem;
  height: 6rem; }
  .content-noneWrapper form input {
    padding: 6px;
    border-radius: 10px;
    float: left;
    font-size: 17px;
    width: 13rem;
    border: none;
    margin-right: 1rem; }
  .content-noneWrapper form #submitBtn {
    float: left;
    border-radius: 10px;
    border: none;
    text-decoration: none;
    color: #ffffff;
    background-color: #b30000;
    font-size: 17px;
    padding: 6px;
    text-align: center;
    cursor: pointer; }

.content-noneWrapper #submitBtn:hover {
  color: #b30000;
  background-color: #ffffff; }

/*End Error 404/search not found*/
/*Call Us page*/
#callUsWrapper {
  height: 50vh; }
  #callUsWrapper p {
    padding: 2rem 1.1rem; }
    #callUsWrapper p span {
      color: white; }
    #callUsWrapper p span:hover {
      color: #b30000; }
  #callUsWrapper #aboutPhoto {
    margin: 0 auto;
    overflow: hidden; }

/*End Call Us page*/
/* FOOTER */
footer {
  width: 100%;
  background-color: #000000;
  padding: 1rem; }
  footer a {
    color: #ffffff;
    text-decoration: none; }
  footer #footerWrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
    footer #footerWrapper #footerMain {
      flex-basis: 100%; }
      footer #footerWrapper #footerMain p {
        text-align: center;
        color: #ffffff;
        padding: 0.2rem 0;
        font-size: 0.9rem; }
      footer #footerWrapper #footerMain p a {
        color: #ffffff; }
    footer #footerWrapper #footer__advertise {
      border-top: 1px solid white;
      width: 100%;
      align-items: center;
      display: flex;
      flex-direction: column;
      padding-top: 1rem;
      margin-top: 1rem; }
      footer #footerWrapper #footer__advertise #ad__description {
        flex-basis: 100%;
        width: 100%;
        display: flex;
        justify-content: center; }
        footer #footerWrapper #footer__advertise #ad__description p {
          color: white; }
      footer #footerWrapper #footer__advertise #ad__logo {
        flex-basis: 100%; }
        footer #footerWrapper #footer__advertise #ad__logo figure {
          max-width: 2rem; }
          footer #footerWrapper #footer__advertise #ad__logo figure img {
            width: 100%; }

/*Clearfix: Force an Elment not to collapse */
.clearfix:after {
  content: "";
  display: table;
  clear: both; }

@media only screen and (min-width: 35rem) {
  /* HEADER */
  header h1 {
    font-size: 3rem; }
  /* Overlay */
  #overlay .searchWrapper {
    height: 10%; }
    #overlay .searchWrapper form input {
      width: 75vw; }
    #overlay .searchWrapper form #submitBtn {
      width: 10vw;
      margin-right: 5vw; }
    #overlay .searchWrapper #closeBtn {
      margin-right: 5vw;
      width: 10vw; }
  /*  MAIN */
  main p {
    text-align: left; }
  .slider--text {
    margin-top: 5rem; }
  /* GFCI + ELCI */
  .card-product {
    flex-basis: 45%;
    margin: 1rem auto; }
    .card-product figure {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%; }
  /*ABOUT*/
  .about-top__item {
    flex: 0 0 50%;
    padding: 1rem; }
  /*END ABOUT*/
  /* Technical */
  .tech-1 {
    flex: 0 0 55%;
    margin-right: 1rem;
    padding-right: 1rem;
    border-right: 1px solid black; }
    .tech-1 .techLinks {
      flex: 0 0 50%;
      padding: 2rem 0; }
      .tech-1 .techLinks ul li {
        text-align: left; }
        .tech-1 .techLinks ul li span {
          color: #b30000; }
    .tech-1 .manualPhoto {
      padding: 2rem 0;
      height: 20rem;
      display: flex;
      justify-content: center;
      flex: 0 0 50%; }
  .tech-2 {
    padding-top: 2rem;
    flex: 0 0 40%; }
  /*END TECHNICAL*/
  /*Error 404 / search not found*/
  .page-header h1 {
    font-size: 3rem;
    padding: 2rem 0 1rem 0.5rem; }
  .content-noneWrapper p {
    padding-left: 2rem; }
  .content-noneWrapper form input {
    width: 35rem; }
  .content-noneWrapper #aboutPhoto {
    padding: 2rem 0; }
  /*CONTACT*/
  .contact-wrapper {
    display: flex;
    flex-wrap: wrap-reverse; }
  .mapWrapper {
    padding-bottom: 0;
    padding-top: 4rem; }
  /*END CONTACT*/
  /*End Error 404/search not found*/
  /*Call Us page*/
  #callUsWrapper {
    height: 50vh; }
    #callUsWrapper p {
      padding: 3rem; }
  /* End Call Us page*/
  .popup {
    justify-content: flex-end;
    margin-bottom: 2rem; }
    .popup .popHolder {
      margin-right: 2rem; } }

@media only screen and (min-width: 64.0625rem) {
  /*   Overlay -*/
  #overlay .searchWrapper {
    height: 20%; }
    #overlay .searchWrapper input {
      width: 75vw; }
    #overlay .searchWrapper #submitBtn a:hover {
      color: #ff0000;
      background-color: #ffffff;
      box-shadow: 0 0 2px 2px rgba(179, 0, 0, 0.4);
      cursor: pointer; }
    #overlay .searchWrapper #closeBtn a:hover {
      color: #ff0000;
      background-color: #ffffff;
      border: #ffffff;
      box-shadow: 0 0 2px 2px rgba(179, 0, 0, 0.4);
      cursor: pointer; }
  /*   Search POST Display */
  .flexbox5 {
    padding: 8rem; }
    .flexbox5 .entry-header {
      display: flex;
      justify-content: center;
      padding: 2rem 0; }
  /*   END Search POST Display */
  /*  HEADER */
  header {
    padding-top: 3.5rem;
    padding-bottom: 0;
    padding-left: 1.5rem;
    display: flex;
    -webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.75);
    position: relative;
    z-index: 10; }
    header #headerLogo {
      display: block;
      width: 13rem;
      height: 13rem;
      padding-right: 2rem;
      padding-top: 2rem; }
      header #headerLogo figure {
        width: 100%;
        margin: 0 auto; }
        header #headerLogo figure img {
          width: 100%; }
    header .headerDescription {
      padding-top: 2rem;
      text-align: left; }
      header .headerDescription h1 {
        font-size: 4.0625em; }
  /* NAVigation  */
  nav {
    background-color: #000000;
    height: 3.5rem;
    z-index: 999;
    position: fixed !important;
    width: 100% !important;
    border-bottom: 1px solid grey; }
    nav ul {
      margin-left: 2%;
      border-left: 1px solid rgba(0, 0, 0, 0.2); }
    nav ul li {
      float: left; }
    nav ul li a {
      display: block;
      border: none;
      border-right: 1px solid rgba(0, 0, 0, 0.2);
      background: none;
      font-size: 1rem;
      padding: 1.1rem 1.5rem;
      color: white;
      text-decoration: none;
      /*transition*/
      -webkit-transition: background 0.3s linear;
      transition: background 0.3s linear; }
    nav ul li a:first-child {
      padding-left: 0; }
    nav ul li a:hover {
      color: #ff0000;
      text-decoration: none !important; }
    nav ul li.parent a:hover {
      color: #ffffff;
      background-color: #000000;
      cursor: default; }
    nav ul > li.active > a {
      color: #ff0000; }
    nav ul li ul {
      /*rules for the sub menu items*/
      z-index: 99;
      position: absolute;
      background-color: #1a1a1a;
      left: -999em;
      /* pushes the menu way off to the side */
      width: 25rem; }
    nav ul li ul li {
      /* overides the float and line from the parent ul */
      float: none;
      border-right: none;
      border-top: solid 1px rgba(0, 0, 0, 0.2); }
    nav ul li ul li a {
      font-size: 1rem;
      width: 100%;
      padding: 1rem 0; }
    nav ul li ul li a:first-child {
      padding-left: 1.5rem; }
    nav ul li.parent ul li a:hover {
      color: #ff0000;
      cursor: pointer; }
    nav ul li:hover ul {
      /* this displays the menus as drop downs  */
      left: auto;
      margin-left: 0; }
    nav #searchWrapper {
      display: flex;
      float: right;
      padding-right: 1rem; }
      nav #searchWrapper #searchIcon {
        background: url("../northshoresafety/images/magnifyingGlass(25).png");
        background-repeat: no-repeat;
        display: block;
        width: 3rem;
        height: 3rem;
        background-position: 0.5vw center;
        border: none;
        order: 0;
        cursor: pointer; }
      nav #searchWrapper #search {
        width: 70px;
        order: 1; }
  #navButtonWrapper {
    display: none; }
  /* END NAV*/
  /* MAIN */
  main p {
    font-size: 1.125em;
    line-height: 1.38889;
    font-family: "Libre Baskerville", serif;
    margin-bottom: 0em; }
  /*END MAIN*/
  /*HOME*/
  .home-page-wrapper h1 {
    padding-top: 7rem;
    font-size: 4rem; }
  .home-page-wrapper h2 {
    font-size: 2.5em;
    line-height: 3rem; }
  .home-page-wrapper .indexBtn a {
    font-size: 2rem;
    padding: 1rem; }
  .home-page-wrapper .indexBtn a:hover {
    color: #b30000;
    background-color: #ffffff;
    border: #ffffff;
    box-shadow: 0 0 4px 4px rgba(179, 0, 0, 0.4); }
  .home-page-wrapper .img-wrapper1 #img1,
  .home-page-wrapper .img-wrapper1 #img2 {
    height: 700px; }
  .home-page-wrapper .slider {
    max-width: 100%;
    height: 650px !important;
    margin-bottom: 0.3rem;
    padding: 0.3rem 0;
    position: relative;
    z-index: 1; }
    .home-page-wrapper .slider .sliderDescription {
      width: 450px;
      background-color: rgba(0, 0, 0, 0.3); }
    .home-page-wrapper .slider #des1 {
      right: 0; }
    .home-page-wrapper .slider #des2 {
      left: 0; }
    .home-page-wrapper .slider .slide1,
    .home-page-wrapper .slider .slide10,
    .home-page-wrapper .slider .slide2,
    .home-page-wrapper .slider .slide3,
    .home-page-wrapper .slider .slide4,
    .home-page-wrapper .slider .slide5,
    .home-page-wrapper .slider .slide6,
    .home-page-wrapper .slider .slide7,
    .home-page-wrapper .slider .slide8,
    .home-page-wrapper .slider .slide9 {
      position: absolute;
      width: 100%;
      height: 100%; }
    .home-page-wrapper .slider .slide1 {
      background: url("../northshoresafety/images/homepage/large/pic1_large.jpg") no-repeat center;
      background-size: cover;
      animation: fade 40s infinite;
      -webkit-animation: fade 40s infinite; }
    .home-page-wrapper .slider .slide2 {
      background: url("../northshoresafety/images/homepage/large/pic2_large.jpg") no-repeat center;
      background-size: cover;
      animation: fade2 40s infinite;
      -webkit-animation: fade2 40s infinite; }
    .home-page-wrapper .slider .slide3 {
      background: url("../northshoresafety/images/homepage/large/pic3_large.jpg") no-repeat center;
      background-size: cover;
      animation: fade3 40s infinite;
      -webkit-animation: fade3 40s infinite; }
    .home-page-wrapper .slider .slide4 {
      background: url("../northshoresafety/images/homepage/large/pic4_large.jpg") no-repeat center;
      background-size: cover;
      animation: fade4 40s infinite;
      -webkit-animation: fade4 40s infinite; }
    .home-page-wrapper .slider .slide5 {
      background: url("../northshoresafety/images/homepage/large/pic6_large.jpg") no-repeat center;
      background-size: cover;
      animation: fade5 40s infinite;
      -webkit-animation: fade5 40s infinite;
      z-index: 2 !important; }
    .home-page-wrapper .slider .slide6 {
      background: url("../northshoresafety/images/homepage/large/pic5_large.jpg") no-repeat center;
      background-size: cover;
      animation: fade 40s infinite;
      -webkit-animation: fade 40s infinite;
      z-index: 2 !important; }
    .home-page-wrapper .slider .slide7 {
      background: url("../northshoresafety/images/homepage/large/pic7_large.jpg") no-repeat center;
      background-size: cover;
      animation: fade2 40s infinite;
      -webkit-animation: fade2 40s infinite;
      z-index: 2 !important; }
    .home-page-wrapper .slider .slide8 {
      background: url("../northshoresafety/images/homepage/large/pic8_large.jpg") no-repeat center;
      background-size: cover;
      animation: fade3 40s infinite;
      -webkit-animation: fade3 40s infinite;
      z-index: 2 !important; }
    .home-page-wrapper .slider .slide9 {
      background: url("../northshoresafety/images/homepage/large/pic9_large.jpg") no-repeat center;
      background-size: cover;
      animation: fade4 40s infinite;
      -webkit-animation: fade4 40s infinite;
      z-index: 2 !important; }
    .home-page-wrapper .slider .slide10 {
      background: url("../northshoresafety/images/homepage/large/pic10_large.jpg") no-repeat center;
      background-size: cover;
      animation: fade5 40s infinite;
      -webkit-animation: fade5 40s infinite;
      z-index: 2 !important; }
  @keyframes fade {
    0% {
      opacity: 1; }
    20% {
      opacity: 0; }
    40% {
      opacity: 0; }
    60% {
      opacity: 0; }
    80% {
      opacity: 0; }
    100% {
      opacity: 1; } }
  @keyframes fade2 {
    0% {
      opacity: 0; }
    20% {
      opacity: 1; }
    40% {
      opacity: 0; }
    60% {
      opacity: 0; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @keyframes fade3 {
    0% {
      opacity: 0; }
    20% {
      opacity: 0; }
    40% {
      opacity: 1; }
    60% {
      opacity: 0; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @keyframes fade4 {
    0% {
      opacity: 0; }
    20% {
      opacity: 0; }
    40% {
      opacity: 0; }
    60% {
      opacity: 1; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @keyframes fade5 {
    0% {
      opacity: 0; }
    20% {
      opacity: 0; }
    40% {
      opacity: 0; }
    60% {
      opacity: 0; }
    80% {
      opacity: 1; }
    100% {
      opacity: 0; } }
  /*END HOME*/
  /*GFCI + ELCI*/
  .card-product {
    flex-basis: 30%;
    border: 1rem solid #000000;
    display: relative;
    padding: 2rem; }
    .card-product--image {
      flex-basis: 20%; }
      .card-product--image img {
        height: 300px; }
    .card-product--content {
      height: 60%;
      width: 100%; }
    .card-product .btnWrapper {
      flex-basis: 20%; }
      .card-product .btnWrapper .button {
        font-size: 1.5rem; }
  /* END GFCI + ELCI*/
  /*NEC COMPLIANCE*/
  .nec__top {
    display: flex;
    flex-wrap: wrap; }
  .nec__compliance,
  .nec__code {
    flex: 0 0 45%;
    margin: 0 auto; }
    .nec__compliance h6,
    .nec__code h6 {
      height: 6rem; }
  .nec__learn,
  .nec__compliance,
  .nec__code,
  .nec-key {
    margin-bottom: 3rem; }
  .nec-wrapper {
    max-width: 87.5em; }
  .nec__title {
    width: 100%; }
  .nec-key__table {
    border: 1px solid #333;
    line-height: 1.3em; }
    .nec-key__table th {
      background-color: #333;
      padding: 5px;
      color: #fff;
      border-bottom: 1px solid #fff; }
    .nec-key__table td {
      background-color: #fff;
      padding: 10px 5px;
      text-align: center;
      border-left: 1px solid #333; }
    .nec-key__table tr {
      border-bottom: 1px solid #333; }
    .nec-key__table tr:last-child th {
      border-bottom: 0; }
  .nec__photo-wrapper {
    display: flex;
    flex-wrap: nowrap; }
    .nec__photo-wrapper .img__wrapper {
      flex: 0 0 45%;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center; }
      .nec__photo-wrapper .img__wrapper figure {
        max-width: 20rem; }
        .nec__photo-wrapper .img__wrapper figure img {
          max-height: 25rem; }
  #article-wrapper {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center; }
    #article-wrapper figure {
      max-width: 300px;
      height: 395px; }
  /*END NEC COMPLIANCE*/
  /*ABOUT*/
  .about--img {
    height: 20rem; }
    .about--img img {
      height: 20rem; }
  /*TECHNICAL*/
  .tech-1 {
    flex: 0 0 50%;
    margin-right: 4rem;
    padding-right: 4rem; }
    .tech-1 .techLinks {
      flex: 0 0 40%; }
    .tech-1 .manualPhoto {
      flex: 0 0 60%;
      height: 30rem;
      max-width: 20rem; }
  .tech-2 {
    padding: 1rem 1rem 1rem 3rem;
    flex: 0 0 45%; }
  /*CONTACT*/
  .mapWrapper {
    flex: 0 0 50%;
    padding: 0 3rem;
    border-right: 1px solid black; }
  .contactForm {
    flex: 0 0 50%;
    padding: 0 3rem; }
    .contactForm input[type="submit"] {
      width: 9rem;
      float: relative; }
  #contactQuote {
    padding: 2rem 4rem !important; }
  /*END CONTACT*/
  /* Call Us page*/
  #callUsWrapper {
    height: 70vh; }
    #callUsWrapper p {
      padding: 3rem 6rem; }
  /* End Call Us page*/
  /*  FOOTER */
  footer {
    -webkit-box-shadow: 2px -2px 8px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 2px -2px 8px rgba(0, 0, 0, 0.75);
    box-shadow: 2px -2px 8px rgba(0, 0, 0, 0.75); }
    footer #footerWrapper #footerbuffer {
      flex-basis: 15%;
      display: block; }
    footer #footerWrapper #footerMain {
      flex-basis: 70%; }
    footer #footerWrapper #footer__advertise {
      flex-direction: row;
      padding: 0;
      margin: 0;
      border: none;
      flex-basis: 15%;
      display: flex;
      width: 5rem; }
      footer #footerWrapper #footer__advertise #ad__description {
        flex-basis: 80%;
        padding-right: 1rem;
        display: flex;
        justify-content: flex-end; }
      footer #footerWrapper #footer__advertise #ad__logo {
        flex-basis: 30%; }
  /*  END FOOTER */
  .just-content-between {
    justify-content: space-between; } }