/*
  | lockportinsulation.com -  [ styles-v19.css ]

    Golden Ratio: 1.6180339


     margin ---------  [  outer  outside box     ]
       border -------  [    |    inside box      ]
         padding ----  [    |    around content  ]
           content --  [  inner                  ]

    ---  [ Main ]  ---


  Lockport Insulation, official designer colors

        green  #4e6e32, rgba(78,110,50, 1)
    dark grey  #231f20, rgba(35,31,32, 1)

  green @ 10%  #e0e3dd, rgba(78,110,50, .1);

*/

@font-face {
  font-family: arial;
  font-weight: 400;
  font-style: normal; 
  font-display: swap;
}

html {
  font-size: 17px;
  scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
/*
  font-family: 'Roboto', arial, sans-serif;
  font-family: arial, sans-serif;
*/
  font-family: arial, sans-serif;

}


h3 {
/*
  color: rgba(0,0,0, 1);
*/
  color: rgba(78,110,50, 1);
  font-size: 1.85rem;
/*
  font-size: 1.25rem;
*/
  font-weight: 800;
  padding: 20px 0px 16px 0px;
/*
  text-shadow: 1px 1px 1px rgba(0,0,0, .25);
*/

}

body {
  color: rgba(0,0,0, 1);
/*
  font-size: 1.5em;
  line-height: 1.62em;
*/
  font-size: 1rem;
  line-height: 26px;

  background: #f0f0f0;
  overflow-x: hidden;
}
/*
body.insulation-hero {
  background:
    linear-gradient(to bottom,
      rgba(0,0,0, .75),
      rgba(0,0,0, .275),
      rgba(0,0,0, .275),
      rgba(0,0,0, .275),
      rgba(0,0,0, .275)),
    url("../images/lockport-insulation-living-room-hero.webp");
  background-repeat: no-repeat;
  background-position: center top;

}
body.ice-damming-hero {
  background:
    linear-gradient(to bottom,
      rgba(0,0,0, .75),
      rgba(0,0,0, .275),
      rgba(0,0,0, .275),
      rgba(0,0,0, .275),
      rgba(0,0,0, .275)),
    url("../images/ice-damming-lockport-insulation-hero.webp");
  background-repeat: no-repeat;
  background-position: center top;

}
body.additional-insulation-hero {
  background:
    linear-gradient(to bottom,
      rgba(0,0,0, .75),
      rgba(0,0,0, .275),
      rgba(0,0,0, .275),
      rgba(0,0,0, .275),
      rgba(0,0,0, .275)),
    url("../images/additional-insulation-hero.webp");
  background-repeat: no-repeat;
  background-position: center top;

}

*/

.skip-link {
  color: #ffffff;
  background: #000000;
  display: none;
  position: absolute;
  top: -40px;
  left: 0.5rem;
  padding: 8px;
  z-index: 100;
}
.skip-link:focus {
  top: 0;
}

/* ---  [ Navigation ]  --- */


.navbar {
  background: rgba(0,0,0, 0);

  z-index: 10;

}

.nav-container {
  padding-right: 15px;
  padding-left: 10px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 20px;
/*
  background: black;
*/
/*
  outline: 1px solid lime;
*/


  z-index: 20;



}
.navbar-static-top {
/*
  position: sticky;
  top: 0;
  background: black;
*/
  margin-bottom: 0px;
  border-width: 0px;
  z-index: 1000;
/*
  outline: 1px solid hotpink;
*/
}

/* This controls the background of the top bar of the menu  */
.navbar-default {
/*
  background: rgba(0,0,0, 0);
  outline: 1px solid lime;
*/
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: rgba(0,0,0, 1);
  z-index: 10;
}
.navbar .navbar-collapse {
  text-align: center;
/*
  text-align: left;
*/
  line-height: 1.5;
  z-index: 10;
}
.navbar .navbar-nav {
  display: inline-block;
  float: none;
  float: right;
  padding: 20px 0px 0px 0px;
/*
  border-color: hotpink;
*/
}
.navbar-nav li {
  display: inline-block;
  padding: 10px 5px 10px 5px;
/*
  outline: 1px solid lime;
*/
}
.navbar-nav li a {
  color: rgba(255,255,255, 1) !important;
  font-size: 1rem;
  font-weight: 400;
  padding: 16px 8px 0px 8px;
  text-decoration: none;
/*
  outline: 1px solid dodgerblue;
*/
}
.navbar-nav li a:hover {
  color: rgba(255,255,255, 1) !important;
  font-weight: 400;

  text-decoration: underline;
  text-decoration-color: #ffffff;
/*
  text-decoration-color: red;
*/
  text-underline-offset: 6px;

}
.navbar-nav li.appointment {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  padding: 20px 10px 15px 10px;
  text-decoration: none;
}

/*
.navbar-nav div.appointment {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 600;
  padding: 20px 10px 15px 10px;
  text-decoration: none;
}
*/


.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
  background-color: rgba(255,255,255, 0);
  padding: 14px 8px 14px 6px;
/*
  border: 1px solid #cccccc;
*/
}


.navbar-logo {
  margin-top: -16px;
}

.mobile-head-phone {
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
}

a.phone {
  color: #231f20;
  font-size: 1.15rem;
}

a.menu-phone {
  font-weight: 400;
}
a.menu-phone:hover {
  text-decoration: none !important;
}


.dropdown-menu {
  min-width: 240px;
  padding: 5px;
  margin: 0;
}
.dropdown-menu li {
  display: block;  
  padding: 2px 0;
/*
  outline: 1px solid blue;
*/
}
a.dropdown-menu li a {
  padding: 4px 0;
}

div.dropdown-menu a.dropdown-item {
/*
  background: lime;
*/
  margin-top: 0px;
  padding-top: 4px;
/*
  outline: 1px solid hotpink;
*/
}


/* AI addition */

.dropdown-menu[hidden] {
  display: none;
}




.dropdown {
  position: relative;
  display: inline-block;
  margin-top: -2px;

  z-index: 30;
}

a#dropdownMenuLink.btn.btn-secondary.dropdown-toggle
a#dropdownMenuLink1.btn.btn-secondary.dropdown-toggle,
a#dropdownMenuLink2.btn.btn-secondary.dropdown-toggle {
  background: rgba(0,0,0, .0);
/*
  background: hotpink;
*/
}

.nav .open>a,
.nav .open>a:focus,
.nav .open>a:hover {
    background:  rgba(0,0,0, .0);
    border-color: #337ab7;
}

div.dropdown.open {
  background: rgba(0,0,0, .0);
/*
  background: hotpink;
*/
}

.open>.dropdown-menu {
    display: block;
}

div.dropdown-menu {
  line-height: 1.6em;
  line-height: 2.5em;
  background: rgba(0,0,0, .33);
}

.dropbtn {
  color: white;
  font-size: 1rem;
  content: ""; /* Clears any default content */
  background-color: rgba(0,0,0, 0.0);
  border: none;
  padding: 18px 16px 16px 16px;
}

.dropdown-content {
/*
  background-color: black;

  content: "";
*/
  background-color: rgba(0,0,0, 0.33);
  display: none;
  position: absolute;
  min-width: 240px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0, 0.2);

  z-index: 40;
}

.dropdown-content a {
  color: black;
  text-decoration: none;
  display: block;
  padding: 0px 10px;
/*
  outline: 1px solid hotpink;
*/
}

.dropdown-content a:hover {
  background-color: rgba(0,0,0, 0.99);
}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
  background-color: rgba(0,0,0, 0.0);
}

#mobile-head {
  display: none;
}


/*  Formatting the body ??? */

h3.attic-insulation {
  color: rgba(0,0,0, 1);
  font-size: 1.25rem;
  font-weight: 600;
  padding: 0px 0px 16px 0px;
}


.display-flex {
  display: flex;
  flex-direction: row; /* Side-by-side by default */
  gap: 10px;           /* Optional: space between divs */
}
.font-red {
  color: #b31e26;
  font-family: serif;
}
.no-margin-top {
  margin-top: 0px;
}

.no-padding-top {
  padding-top: 0px;
}

.left-title {
  width: 30%;
/*
  background: #ddd;
*/
  padding: 20px;
/*
  outline: 1px solid hotpink;
*/
}

.right-details {
  width: 70%;
/*
  background: #ccc;
*/
  padding: 20px;
/*
  outline: 1px solid dodgerblue;
*/
}

hr.horizontal-line {
  border: none;
  height: 1.25px;
  background-color: #231f20; /* Dark gray */
}






.float-right {
  float: right;
  margin-left: 15px;
  margin-bottom: 10px;
  margin-top: 20px;
}

.balanced {
  text-wrap: balance;
}

.underline {
  text-decoration: underline;
}

.font-larger {
  font-size: 1.25rem;
}

.larger {
  font-size: 1.1rem;
}

.larger80 {
  font-size: .8rem;
  padding: 0px 4px 0px 0px;
}


ul li.bottom {
  padding-bottom: 10px;
}


span.heading {
/*
  color: #e0e3dd;
*/
  font-size: 1.9rem;
  font-weight: 600;
  font-style: italic;
  line-height: 12px;

/*
  outline: 1px solid hotpink;
*/
}
/*
br.smallheight {
  font-size: 2px;

  outline: 10px solid dodgerblue;

}
*/

/* ---  [ <section images> - Start ]  */

section.module:last-child {
  margin-bottom: 0px;
}

section.module.parallax {
  display: inline-block;
  height: 646px;
  width: 100%;
/*
  width: 100vw;
*/
  background-repeat: no-repeat;
  background-attachment: fixed;

  background-size: cover;
  background-position: 50% 50%;

}

section.module.image-01 {
/*
  background-size: cover;
*/
  background-image: linear-gradient(to bottom, rgba(0,0,0, .85), rgba(0,0,0, .275), rgba(0,0,0, .275), rgba(0,0,0, .275)),
             url("../images/lockport-insulation-living-room-hero.webp");
  background-position: bottom;
}

section.module.image-02 {
  background-image: linear-gradient(to bottom, rgba(78,110,50, 1), rgba(78,110,50, .90), rgba(78,110,50, .90), rgba(78,110,50, .90)),
             url("../images/ice-damming-lockport-insulation-hero.webp");
  background-position: bottom;

}

section.module.image-03 {
  background-image: linear-gradient(to bottom, rgba(78,110,50, 1), rgba(78,110,50, .90), rgba(78,110,50, .90), rgba(78,110,50, .90)),
             url("../images/additional-insulation-hero.webp");
}

section.module.image-04 {
  background-image: linear-gradient(to bottom, rgba(78,110,50, 1), rgba(78,110,50, .90), rgba(78,110,50, .90), rgba(78,110,50, .90)),
             url("../images/attic-insulation-winnipeg-hero.webp");
}

section.module.image-05 {

  background-image: linear-gradient(to bottom, rgba(78,110,50, 1), rgba(78,110,50, .90), rgba(78,110,50, .90), rgba(78,110,50, .90)),
             url("../images/wall-insulation-winnipeg-hero3.webp");
  background-position: bottom;
}

section.module.image-06 {
  background-image: linear-gradient(to bottom, rgba(78,110,50, 1), rgba(78,110,50, .90), rgba(78,110,50, .90), rgba(78,110,50, .90)),
             url("../images/foundation-insulation-by-lockport-insulation.webp");
}

section.module.image-07 {
  background-image: linear-gradient(to bottom, rgba(78,110,50, 1), rgba(78,110,50, .90), rgba(78,110,50, .90), rgba(78,110,50, .90)),
             url("../images/attic-insulation-removal-hero.webp");
}

section.module.image-08 {
  background-image: linear-gradient(to bottom, rgba(78,110,50, 1), rgba(78,110,50, .90), rgba(78,110,50, .90), rgba(78,110,50, .90)),
             url("../images/new-home-insulation-lockport-insulation-hero3.webp");
}

section.module.image-09 {
  background-image: linear-gradient(to bottom, rgba(78,110,50, 1), rgba(78,110,50, .90), rgba(78,110,50, .90), rgba(78,110,50, .90)),
             url("../images/efficiency-manitoba-energy-rebates-lockport-insulation-hero.webp");
}

section.module.image-10 {
  background-image: linear-gradient(to bottom, rgba(78,110,50, 1), rgba(78,110,50, .90), rgba(78,110,50, .90), rgba(78,110,50, .90)),
             url("../images/attic-insulation-lockport-insulation-winnipeg-hero.webp");

}

section.module.image-11 {
  background-image: linear-gradient(to bottom, rgba(78,110,50, 1), rgba(78,110,50, .90), rgba(78,110,50, .90), rgba(78,110,50, .90)),
             url("../images/lockport-insulation-faq-hero.webp");
}


/* ---  [ Styling for "Call-To-Action (CTA)" Widget ]  --- */

.cta-button-bottom {
  color: #ffffff;
  font-weight: 600;
  background-color: #b31e26;
  text-decoration: none;

  -webkit-box-shadow: 0px 15px 10px -10px rgba(119,119,119, .85);
     -moz-box-shadow: 0px 15px 10px -10px rgba(119,119,119, .85);
          box-shadow: 0px 15px 10px -10px rgba(119,119,119, .85);

  padding: 10px 18px 10px 18px;
/*
  border: 2px solid #4e6e32;
  border: 2px solid #ff6400; amazon orange
*/
  border: 2px solid #b31e26;
  border-radius: 11px;
  margin: 0px 4px;
/*
  outline: 1px solid lime;
*/
}

.cta-button-bottom:hover {
  color: #b31e26;
  font-weight: 600;
  background-color: #ffffff;
  border: 2px solid #b31e26;

}


li a.cta-button {
  color: #000000;

/*
  background-color: rgba(0,0,0, .01);
  box-shadow: 0 0 6px rgba(160,160,160, .7);
*/
  padding: 6px 8px 6px 6px;
/*
  border: 2px solid #4e6e32;
  border: 2px solid #ff6400; amazon orange
*/
  border: 2px solid #ffffff;
  border-radius: 11px;
  margin: 0px 4px;
/*
  outline: 1px solid lime;
*/
}
li a.cta-button:hover {
  color: #000000 !important;
  background-color: #ffffff !important;
  text-decoration: none;
}
/*
li a.cta-button::after {
  font-family: FontAwesome;
  content: "\f274";
  color: #ff8000;
  float: left;
  padding-right: 10px;
  font-weight: 500;
  font-size: 115%;
  outline: 1px solid green;
}
*/
li a.cta-button-on-small {

}

p.privacy {
  font-size: .78rem;
  line-height: 1.35;
  padding: 0 0 0 1em;
  border-left: 2px solid red;
  margin: 2em 0 0 1em;
/*
  outline: 1px solid blue;
*/
}

/* ---  [ Start Main Menu ]  --- */

ul#menu {
  background: #40475a none repeat scroll 0 0;
  padding: 6px;
  position: fixed;
/*
  text-shadow: 0 1px 1px rgba(0,0,0, .2);
*/
  width: 100%;
  z-index: 999;
}
.main-menu {
  margin-top: -234px;
}
.main-menu ul li {
  display: inline-block;
  padding: 10px;
}
.main-menu ul li a {
  color: #ffffff;
  font-size: 1.25rem;
  text-decoration: none;

  background: #383e4c none repeat scroll 0 0;

  border: 1px solid #646d7c;
  padding: 5px 20px;
}
/*.main-menu ul li.active a,*/
.main-menu ul li a:focus,
.main-menu ul li a:hover {
  background: #49505f;
}




div.header-content {
/*
  padding: 9em 1em 2em 1em;
*/

  display: flex;
  align-items: center; /* Vertical centering */
  justify-content: center; /* Horizontal centering */

  margin-top: 36px; 
/*
outline: 1px solid hotpink;
*/
}




.header-content h1 {
/*
  font-family: serif;
*/
  color: rgba(255,255,255, 1);

  font-size: 3rem;
  font-weight: 900;
/*
  font-style: italic;
*/
  letter-spacing: 1px;
  text-wrap: balance;
  line-height: 1.5em;
  text-align: center;
/*
  text-shadow: 2px 3px 2px rgba(0,0,0, .9),
*/

/* letter stroke effect */
  text-shadow: 
    -.5px -.5px 0px rgba(0,0,0, .5),
     .5px -.5px 0px rgba(0,0,0, .5),
    -.5px  .5px 0px rgba(0,0,0, .5),
     .5px  .5px 0px rgba(0,0,0, .5);

/*
  background: rgba(78,110,50, .8) none repeat scroll 0 0;
*/
/*
  background: rgba(162,162,162, .75) none repeat scroll 0 0;

  -webkit-box-shadow: inset 0 0 4px rgba(0,0,0, .3);
     -moz-box-shadow: inset 0 0 4px rgba(0,0,0, .3);
          box-shadow: inset 0 0 4px rgba(0,0,0, .3);
*/

  padding: 16px 2% 16px 2%;
/*
  outline: 1px solid blue;
*/
}

.header-content hr {
  border: 0;
  margin: 3em 18em 3em 18em;
}

p.header-company-name {
  color: rgba(78,110,50, 1);
  color: rgba(255,255,255, 1);
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 16px;
  letter-spacing: .5px;
/*
  text-shadow: 3px 4px 3px rgba(0,0,0, .25),

 letter stroke effect
*/
  text-shadow: 
    -.5px -.5px 0px rgba(0,0,0, .45),
     .5px -.5px 0px rgba(0,0,0, .45),
    -.5px  .5px 0px rgba(0,0,0, .45),
     .5px  .5px 0px rgba(0,0,0, .45);

  margin: 20px 0px 10px 0px;
}

.header-h1 {
  margin: 0px 10px;
  padding: 0px 10px;
/*
  outline: 1px solid lime;
*/
}
h1.hero {
  font-size: 4.5rem;
  letter-spacing: 1px;

/*
  outline: 1px solid lime;
*/
}

h2 {
/*
  color: rgba(56,81,116, 1);
*/
  color: rgba(35,31,32, 1) !important;
  font-size: 2rem;
  font-weight: 800;
  padding-top: 16px;
/*
  text-shadow: 1px 1px 1px rgba(0,0,0, .25);
*/
}


h2.hero {
  line-height: 1.33;
  padding-top: 11px;
}

br.herospacing {
  line-height: 30px;
}



p.section-header {
  color: rgba(56,81,116, 1);
  font-size: 2rem;
  font-weight: 800;
}

.smaller-font {
  font-size: .75rem;
}
.smaller-font-90 {
  font-size: 90% !important;
}




/*
.stealth {
  display: none;
}
*/
.stealth {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}



.effect1 {
  display: block;
  background: none;

  -webkit-border-radius: 7px;
     -moz-border-radius: 7px;
          border-radius: 7px;

  -webkit-box-shadow: 0px 10px 10px -10px rgba(0,0,0, .8);
     -moz-box-shadow: 0px 10px 10px -10px rgba(0,0,0, .8);
          box-shadow: 0px 10px 10px -10px rgba(0,0,0, .8);
/*
  margin: 1.5em auto;
*/
}


.cta-insert {
/*
  font-family: "Times New Roman", serif;
  font-style: italic;
*/

  color: rgba(0,0,0, 1) !important;
/*
  text-align: center;
*/
  background-color: rgba(255,255,255, 1);

  background-image: url("../images/lockport-insulation-winnipeg-house-1.svg");
  background-repeat: no-repeat;

  background-position: center; 

  width: 80%;

/*
  width: 400px;
  float: right;
  box-shadow: 0 4px 4px 0 rgba(0,0,0, .3);
*/

  box-shadow: 10px 10px 10px -5px rgba(0,0,0, .3);

  border: 1px solid #4e6e32;
  border-radius: 10px;
  padding: 28px;

  margin: 14px auto 30px auto;
}
p.cta-heading {
  font-family: Georgia;
  font-size: 1.2rem;
  font-weight: 600;
/*
  font-style: italic;
*/
  text-align: center;

  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-thickness: 1px;

  margin-bottom: 24px;
  padding-top: 6px;
}
p.cta-paragraph {
  font-family: Georgia;
  font-size: 1.1rem;
  font-weight: 400;
/*
  font-style: italic;
*/
  line-height: 20px;
}


/* ---  [ Opening ]  --- */

#opening {
  color: #303030;
  font-size: 1.15rem;
  font-weight: 400;
  text-align: left;
  padding: 10px 0px 10px 0px;
/*
  text-shadow: 1px 1px 1px rgba(0,0,0, .125);
*/
}
#opening h2 {
/*
  text-shadow: 2px 2px 3px rgba(0,0,0, .3);
*.
  text-wrap: balance;
  padding: 0 0 0 .3em;
  padding: 10px 0 0 0;
}
#opening h3 {
  font-size: 1.25rem;
  font-weight: 600;
/*
  text-shadow: 1px 1px 1px rgba(0,0,0, .25);
*/
  padding: 20px 0px 0px 0px;
}
#opening h3 a {
  color: rgba(56,81,116, 1);
  font-size: 1rem;
  font-weight: 600;
/*
  text-shadow: 1px 1px 1px rgba(0,0,0, .25);
*/
  padding: 0 0 0 .3em;
/*
  outline: 1px solid red;
*/
}

section.background1 {
  background: #f0f0f0;
}
section.background2 {
/*
  background: rgba(78,110,50, .1);
*/
  background: #e0e3dd;
}
section.background-white {
  background-color: #ffffff;
}

.opening-description-1 {
  margin-top: 15px;
  padding: .61em .61em 0 .61em;
}
.opening-description-2,
.opening-description-2a {
  padding: .61em .61em 0 .61em;
  margin-top: 5px;
}
.opening-description-2a {
  font-weight: 600;
  text-align: left;
}
.opening-description-3 {
  color: #000000;
  font-size: 1.225rem;
  font-weight: 400;
  text-align: center;
  margin-top: 14px;
  padding: .61em .61em 0 .61em;
}
ul.services {
  margin-top: 12px;
}
ol.services {
  text-align: left;
/*
  text-wrap: balance;
*/
  margin-top: -16px;
  margin-bottom: 28px;
}
.feature-text-center {
  margin-top: 12px;
}
a {
  color: #337ab7;
  font-weight: 400;
}
a:hover {
  color: #337ab7;
  font-weight: 400;
}
/*
a:visited {
  color: transparent;
}
*/



img {
  height: auto;
  border: none;
}


p.reference {
  font-style: italic;
  font-size: .88rem;
  line-height: 1.5;
  padding: 0 0 0 1.8rem;
  margin: 32px 0 0 0;
}
sup.bigger {
  color: #ff2600;
  font-size: 300%;
  top: 0.35em;
/*
  text-shadow: 1px 1px 0 #ffffff,
               2px 2px 2px #b0b0b0;
*/
}
/*
.effect1 {
  -webkit-box-shadow: 0 10px 6px -6px #777777;
     -moz-box-shadow: 0 10px 6px -6px #777777;
          box-shadow: 0 10px 6px -6px #777777;
}

.heading-shadow {
  text-shadow: 2px 2px 3px rgba(0,0,0, .25);
}
*/

h1 {
  font-size: 3rem;
  font-size: 1.8rem;
  font-weight: 600;
}
h2.owner {
  font-size: 1.45rem;
  font-weight: 700;
  margin: 1px 0px 16px 0px;
}
p {
/*
  font-size: 1em;
  line-height: 1.62em;
*/
  font-size: 1rem;
  line-height: 26px;

  margin: 0;
  margin-bottom: 1.15em;
/*
*/
}
p.company-address,
p.company-address-name {
  line-height: 16px;
  margin-bottom: 8px;
}
p.company-address-name {
  font-size: 1.1rem;
/*
  letter-spacing: .5px;
*/
  padding-top: 4px;
}

.alternate-font {
/*
  font-family: serif;
  font-size: 1.09rem;
*/
  font-weight: 500;
}


b.darkerblue,
strong.darkerblue {
  color: #1f5f8f;
  font-weight: 700;
}
a:hover {
  text-decoration: none;
}
.video-border-radius {
  border-radius: 7px;
}

.bottom-shadow {
  -webkit-box-shadow: 0px 15px 10px -10px rgba(119,119,119, .85);
     -moz-box-shadow: 0px 15px 10px -10px rgba(119,119,119, .85);
          box-shadow: 0px 15px 10px -10px rgba(119,119,119, .85);
}

.details {
/*
  background-color: pink;
*/
  padding: 2em 0 2em 0;
  float: right;
 }
.details ul {
  margin: 1.2em 0em 0em 0em;
  padding: 0em 0em 0em 0em;
}
.details ul li {
  color: #e0e0e0;
  font-size: 1rem;
  display: inline-block;
  text-decoration: none;
}
.details ul li:nth-child(1) {
  margin-right: 3em;
}
.details ul li a {
  color: #f1f1f1;
  text-decoration: none;
}
/*
a:visited {
  text-decoration: none; 
}
*/
.fa-envelope,
.fa-instagram,
.fa-mobile,
.fa-phone,
.fa-phone-alt {
  font-size: 1.1rem;
/*  line-height: 1.78; */
  margin-right: 16px;
}
.fa-check {
  color: #4e6e32;
  font-weight: 200;
  font-size: 1.125rem;
  padding-right: 12px;
}
.fa-long-arrow-alt-right {
  color: red;
  font-size: 1.9rem;
  margin-right: 10px;
/*
  outline: 1px solid blue;
*/
}
.fa-info-circle {
  color: red;
  font-size: 1.16rem;
  font-weight: 600;
  border-radius: 50%;
  animation: pulse-red 2s infinite;
}
@keyframes pulse-red {
  0% {
    transform: scale(1);
    box-shadow: 0px 0px 0px 0px rgba(255,82,82, .7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0px 0px 0px 10px rgba(255,82,82, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0px 0px 0px 0px rgba(255,82,82, 0);
  }
}

.fa-share,
.fa-facebook,
.fa-facebook-f,
.fa-facebook-square {
  font-size: 1.3rem;
/*
  outline: 1px dashed lime;
*/
}
.facebook-blue {
/*   color: rgba(66,103,178, 1);
  facebook blue does not provide enough contrast with background */
  color: rgba(255,255,255, 1);
  margin-left: 3.5px;
}

.fa-bars {
  color: rgba(255,255,255, 1);
  font-size: 1.2rem;
  padding-top: 0px;
  float: right;
}

.svg-image {
  font-size: 1.2rem;
  margin-top: -10px;
  margin-right: 12px;
/*
  outline: 1px dashed lime;
*/

}

.sub {
  outline: 1px solid blue;
}

.details ul li a:hover {
  color: #ffff00;
  font-weight: 600;
}

hr.greyish {
  background-color: rgba(0,0,0, .075);
  display: block;
  margin: 2.5em 1em 2.5em 1em;
  border: 0;
  height: .09em;
  height: 1px;
}

hr.spacer {
  margin: 3em 0 0 0;
}


img.image-centered {

  box-shadow: 10px 10px 10px -5px rgba(0,0,0, .3);
  box-shadow: 0px 10px 10px -5px rgba(0,0,0, .45);

  box-shadow: 7px 7px 7px -5px rgba(0,0,0, .45);

  border-radius: 5px;
/*
  display: block;

  margin-left: auto;
  margin-right: auto;

  padding: 0px;
*/
}

.feature-content-title {

  padding: 0px 0px 0px 0px;
/*
outline: 1px solid dodgerblue;
*/
}




/* ---  [ End Header CSS ]  --- */

/* ---  [ Start Feature CSS ]  --- */
.form-btn {
  border: 1px solid rgba(0,0,0, .25);
  margin: 0px 6px 0px 6px;
}
/*
.form-btn:hover {
  color: #ffffe0
}
*/


.li-green-text       {      color: rgba(78,110,50, 1); }
/*
.li-green-btn        { background: rgba(78,110,50, 1); }
.li-green-btn:hover  { background: #235905; }
*/
.li-darkgrey-text    {      color: rgba(35,31,32, 1); }

.img-wrapper {
/*
    display: inline-block;
*/
    overflow: hidden;
}
/*
.zoom {
  transition: transform 1s;
  object-fit: contain;
}
.zoom:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1); 
}
*/

.add-line {
  margin-bottom: 1em;
}

div.centeredbottom {
  height: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2.5em 0 1em 0;
}
.col-md-4 {
  padding-right: 5px;
  padding-left: 5px;
}


.image-box {
  position: relative;
  display: inline-block; /* Make the width of box same as image */
  float: left;
  padding: 6px 20px 6px 0px;
}


.feature-content {

  background: #f0f0f0;
  background: #e0e3dd;

  height: auto;
/*
  box-shadow: 10px 10px 10px -5px rgba(0,0,0, .3);
*/
  border-top: 1px solid #4e6e32;


/*
  border-radius: 10px;
  padding-bottom: 40px;
*/
  padding: 20px;

  margin: 0px 5px 0px 5px;

  overflow: hidden;
/*
outline: 1px solid hotpink;
*/
}

.feature-content-2 {
  background: #f0f0f0;
  padding-bottom: 50px;
}


.extra-margin {
  margin: 10px !important;
}
.extra-margin-top {
  margin-top: 32px;
}


.feature-content-description {
  color: #333333;
  font-size: 1.125em;
  text-align: left;
  margin-top: 15px;
  padding: 0px 20px 35px;
}
.feature-content-description-2 {
  color: #333333;
  font-size: 1.15em;
  text-align: left;
  margin-top: 15px;
  padding: 0px 20px 0px;
}
.feature-content-link {
  color: #ffffff;
  font-size: 1rem;
  text-decoration: none;
  border-radius: 5px;
  padding: 8px 24px;
  -webkit-transition: all 0.3s ease;
          transition: all 0.3s ease;
}
.feature-content-link:hover,
.feature-content-link:link,
.feature-content-link:visited {
  color: #ffffff;
  text-decoration: none;
}


a.services {
  font-weight: 600;
  text-decoration: none;
}
a.services:hover {
  font-weight: 700;
  text-decoration: underline;
}


details.first {
  font-size: 1.5rem;
  border-top: 1px solid rgba(35,31,32, 1);
  border-bottom: 1px solid rgba(35,31,32, 1);

}
details {
  font-size: 1.5rem;
/*
  border-top: 1px solid rgba(35,31,32, 1);
*/
  border-bottom: 1px solid rgba(35,31,32, 1);
}

summary {
  padding: .5em 1.3rem;
  list-style: none;
  display: flex;
  justify-content: space-between;  
  transition: height 1s ease;
}

summary::-webkit-details-marker {
  display: none;
}

summary:after {
  content: "\002B";
}

details[open] summary {
  border-bottom: 1px solid #aaaaaa;
  margin-bottom: .5em;
}

details[open] summary:after {
  content: "\00D7";
}

details[open] div {
  padding: .5em 1em;
}

p.answer {
  font-size: .95rem;
  padding: 6px 90px 6px 30px;
/*
outline: 1px solid red;
*/
}


p.services-footer {
  font-size: 1.06rem;
  font-weight: 500;
}


.blue-button {
/*
  background: rgba(143,145,144, 1);
  background: rgba(51,122,183, 1);
*/
  background: rgba(41,95,142, .8);
}
.blue-button:hover {
/*
  background: rgba(143,145,144, .8);
*/
  background: rgba(41,95,142, 1);
}
.expand:hover {
  letter-spacing: .09em;
/*
  color: #f2f2f2;
*/
}

.radius10bottom {
  border-radius: 0px 0px 10px 10px;
}
.radius10 {
  border-radius: 10px 10px 10px 10px;
}
.radius100 {
  border-radius: 100px 100px 100px 100px;
}
/* ---  [ End Feature CSS ]  --- */


/* ---  [ Contact Form ]  --- */

.form-background {
/*
  background: url(../images/white-background.jpg) repeat;
*/
  background: transparent;
  border-radius: 8px;
}
.company-name {
  font-size: 1.4rem !important;
  font-weight: 800;
  }

/*
    Header area at the top of the form
*/
.contact-header {
  display: flex;
/*
  outline: 1px solid hotpink;
*/
}
.contact-left  {
  float: left;
/*
  outline: 1px solid dodgerblue;
*/
}
.contact-right  {
  float: right;
  text-align: left;
  margin: 35px 0px 0px auto;
/*
outline: 1px solid lime;
*/
}
a.lockport-green {
  color: rgba(78,110,50, 1);
  font-weight: 600;
} 
a.lockport-grey {
  color: rgba(35,31,32, 1);
  font-weight: 600;
} 

/*
#form-titlex {
  font-size: 4.12rem;
}
*/

fieldset {
  -webkit-box-shadow: 1px 1px 3px 3px rgba(0,0,0, .05);
     -moz-box-shadow: 1px 1px 3px 3px rgba(0,0,0, .05);
          box-shadow: 1px 1px 3px 3px rgba(0,0,0, .05);

  padding: .35em .625em .75em;
  border: 1px solid #c0c0c0;
  border-radius: 6px;
  margin: 0px 2px;
/*
  outline: 1px dashed lime;
*/
}
#antispam {
  display: none;
}
#field1,
#field2,
#field3,
#field4,
#field5,
#field6,
#field7,
#field8,
#field9,
#field10,
#field11,
#field12,
#field13,
#field14 {
  font-size: 1rem;
  border: 1px solid rgba(78,110,50, .5);
  border-radius: 7px;
}

legend {
  width: auto;
/*
  background: url(../images/white-background.jpg) repeat;
*/
  background: transparent;
  border-bottom: 0px;
}
h2.legend {
  color: red;
  font-weight: 600;
/*
  text-shadow: 1px 2px 2px rgba(0,0,0, .2);
*/
  background: transparent;

/* removes shadow in background on form
 */
/*
  background: url(../images/body-bg2.webp) repeat;
*/
  background-color: #f0f0f0;
}
::placeholder {
  color: grey;
  opacity: .75; /* Firefox */
  font-size: .75rem;
}

div.center {
  display: flex;
  justify-content: center;
  margin: 16px 0 16px 0;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 1rem;
  margin: 0;
}

button,
input {
  line-height: normal;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

textarea {
  overflow: auto;
  vertical-align: top;
  padding-top: 10px !important;
}

#field4 {
  padding-bottom: 0px;
}

.btn-send {
  color: rgba(255,255,255, 1);
  background-color: #008000;
}
.btn-send:hover {
  color: rgba(255,255,255, 1);
  background-color: #006400;
}
.btn-reset {
  color: rgba(255,255,255, 1);
  background-color: #da0000;
}
.btn-reset:hover {
  color: rgba(255,255,255, 1);
  background-color: #b80000;
}

h2.entry-title {
  font-size: 1.6rem;
  font-weight: 700;
}

.alignleft {
  float: left;
  margin: 25px 20px 20px 11px;
}
.alignright {
  float: right;
  margin: 19px 10px 20px 20px;
/*
  outline: 1px solid lime;
*/
}

/* Start Services CSS */
div#service-area-main {
  float: left;
  width: 100%;
  margin-top: -200px;
}
.our-service {
  margin: 75px 0px 85px;
}
.service h2 {
  font-size: 3rem;
  color: rgba(255,255,255, .99);
/*
  text-shadow: 2px  2px 4px rgba(255,255,255, .45),
               0px -2px 4px rgba(255,255,255, .45);
*/
  margin-bottom: 20px;
}
.service > p {
  font-size: 1.125rem;
  color: #000000;
/*
  text-shadow: 2px 2px rgba(255,255,255, .8);
*/
}
/* ---  [ End Services CSS ]  --- */

.img-responsive {
/*
  width: 100%;
  height: auto;

*/
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.img-left {
  margin-left: 0;
  margin-right: auto;
}

.small-padding {
  padding: 0px 0px 4px 16px;
}

/* ---  [ Start Contact Form ]  --- */

.contact-area {
  background:  rgba(255,255,255, .36);

  background:  rgba(78,110,50, .1);



  border: 1px solid rgba(78,110,50, .2);
  border: 1px solid rgba(0,0,0, .175);

  border: 1px solid rgba(78,110,50, .25);

 border-radius: 12px;
  padding: 0px 5% 30px 5%;
  margin-bottom: 24px;


/*
-webkit-box-shadow: inset 0px 0px 4px 0px rgba(0,0,0, .075);
   -moz-box-shadow: inset 0px 0px 4px 0px rgba(0,0,0, .075);
        box-shadow: inset 0px 0px 4px 0px rgba(0,0,0, .075);
*/

-webkit-box-shadow:  0px 0px 10px 0px rgba(255,255,255, .33);
   -moz-box-shadow:  0px 0px 10px 0px rgba(255,255,255, .33);
        box-shadow:  0px 0px 10px 0px rgba(255,255,255, .33);


  box-shadow: 10px 10px 10px -5px rgba(0,0,0, .3);


/*
  box-shadow:  8px 6px 10px rgba(0, 0, 0, 0.3);
*/
/*
  outline: 1px dashed dodgerblue;
*/
}
.contact-area h2 {
  color: rgba(78,110,50, 1);
  font-weight: 900;
  font-size: 1.75rem;
  margin-bottom: 20px;
/*
  text-shadow: 2px 2px 1px #333333,
*/
/* letter stroke effect

  text-shadow: 
    -.5px -.5px 0 rgba(0,0,0, .45),
     .5px -.5px 0 rgba(0,0,0, .45),
    -.5px  .5px 0 rgba(0,0,0, .45),
     .5px  .5px 0 rgba(0,0,0, .45);
 */
}

.contact-area hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid rgba(255,0,0, 1);
  margin: 1em 12%;
/*
  padding: 0 20% 0 20%;
*/
}

div.contact-content {
  color: #000000;
  font-size: 1.1rem;

  margin-bottom: 20px;
  padding: 0px 0px;

/*
  outline: 1px dashed dodgerblue;
*/
}
.contact-content p {
/*
  color: #000000;
*/
  font-size: 1.1rem;

/*
  background: rgba(242,242,242, .6) none repeat scroll 0 0;

  -webkit-box-shadow: inset  20px  20px 60px #bebebe,
                      inset -20px -20px 60px #ffffff;
     -moz-box-shadow: inset  20px  20px 60px #bebebe,
                      inset -20px -20px 60px #ffffff;
          box-shadow: inset  20px  20px 60px #bebebe,
                      inset -20px -20px 60px #ffffff;

  border: 1px solid rgba(0,0,0, .075);
  border-radius: 50px;
  margin-bottom: 20px;
  padding: 20px 15px;
*/

}
.contact-content p strong {
/*
  font-family: serif;
  color: rgba(0,0,0, .75);
*/
  font-size: 1.25rem;
  font-weight: 800;
/*
  font-style: italic;
*/
}

div.contact-summary-list {
  text-align: left;
  margin: 0 5% 0 10%;
/*
outline: red solid 1px;
*/
}

.show-large {
  display: inline-block !important;
}
.hide-small {
  display: none !important;
}


.contact-form-left {
  padding-left: 0;
}
.contact-form-right {
  padding-right: 0;
}
input {
  margin-bottom: 17px;
}

.form-control {
  color: #000000;
  background: rgba(242,242,242, .6);
  height: auto;

  border: none;
  padding: 3px 12px;
}
.form-control:valid {
  background: rgba(255,255,255, 1);
}
.contact-form-center {
  text-align: center;
/*
  outline: 1px dashed lime;
*/
}
.text-centered {
  text-align: center;
}

.form-horizontal .control-label {
  text-align: right;
  padding-top: 0;
  margin-bottom: 0;
}
.help-blockx {
  font-size: .95rem;
  color: #737373;
  color: red;
  font-style: italic;
  display: block;
  margin-top: 5px;
  margin-bottom: 10px;
}
input[type="checkbox"] {
  box-sizing: border-box;
  width: 9%;
}

.contact-content span.owner {
  font-size: 1.15rem;
  font-weight: 700;
  padding: 0;
/*
  outline: 1px solid dodgerblue;
*/
}
.form-group-1 input {
  font-size: 1rem;
  color: #000000;
/*
  background: #262628 none repeat scroll 0 0;
*/
  background: rgba(242,242,242, .4) none repeat scroll 0 0;
  -webkit-transition: all 0.3s ease;
          transition: all 0.3s ease;
  padding: 10px 28px;
  border-radius: 3px;
  margin-top: 0px;
}
.form-group input {
/*
  font-size: 1rem;
*/
  color: #000000;
  background: #262628 none repeat scroll 0 0;
  background: rgba(242,242,242, .4) none repeat scroll 0 0;
  background: #ffffff none repeat scroll 0 0;
  -webkit-transition: all 0.3s ease;
          transition: all 0.3s ease;
/*
  padding: 10px 28px;
*/
  border-radius: 10px;
  margin-top: 20px;
  margin-top: 0;
}


.contact-paragraph {
  text-align: center;
  margin-top: 16px;
  margin-bottom: 16px;
}

.contact-button {
  font-weight: 500;
  font-size: .95rem;
  color: #000000;

  letter-spacing: .25px;

  background-color: rgba(255,255,255, 1);
  text-decoration: none;

  -webkit-border-radius: 50px;
     -moz-border-radius: 50px;
          border-radius: 50px;

  border: 1px solid rgba(78,110,50, 1);
  display: inline-block;
  cursor: pointer;
  margin: 0px 10px 0px 10px;
  padding: 6px 24px;
}
.contact-button:hover {
  color: #ffffff;
  background-color: rgba(78,110,50, 1);

  font-weight: 400;
  text-decoration: none;
}



.button-group {
/*
  padding: 8px 28px;
*/
  margin-top: 18px;

}
.button-group input {
/*  background: #262628 none repeat scroll 0 0; */

  font-size: .95rem;
  color: #ffffff;
  font-weight: 500;
/*
  -webkit-transition: all 0.3s ease;
          transition: all 0.3s ease;
*/
  padding: 8px 28px;
  border-radius: 10px;
  margin-top: 0;
}
/* ---  [ End Contact CSS ] --- */

/* ---  [ Start Footer CSS ] --- */

.footer-content  h1 {
  color: #666666;
  font-size: 2rem;
  font-style: italic;
  margin-bottom: 25px;
  margin-top: 35px;
}
.footer-content  p {
  color: #999999;
  font-style: italic;
  margin-bottom: 30px;
}
.copy {
  font-size: .75rem;
  color: #666666;
  margin-bottom: 30px;
  margin-top: 10px;
}

/* ---  [ Scroll To Top ]  --- */

#scrollUp {
  background-image: url("../img/top.png");
  bottom: 20px;
  right: 20px;
  width: 38px;   /* Width of image */
  height: 38px;  /* Height of image */
}
/* ---  [ End Scroll To Top ]  --- */

.about-section {
  height: 100%;
  padding-top: 20px;
/*
  outline: 3px solid dodgerblue;
*/
}

.services-section {
  height: 100%;

/* adjust height of scroll window */
  padding: 70px 0px 70px 0px;
}
.tm-box {
  background-color: #f2f2f2;
  max-width: 1140px;
  width: 100%;
  margin: auto;
}
.tm-box-description {
  padding: 30px 60px 30px 60px;
}
.tm-box-p {
  margin-bottom: 10px;
  color: rgba(0,0,0, 1);
}
.tm-box-p:last-child {
  margin-bottom: 0;
}



/*  [ text overlayed on an image ]  */
.video-frame {

  position: relative;

  display: inline-block; /* Make the width of box same as image */
  float: right;
  z-index: 100;
}
.video-frame .text{
  font-family: Arial, sans-serif;
  color: #ffffff;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;        
  top: 13%; /* Adjust this value to move the positioned div up and down */
  width: 70%; /* Set the width of the positioned div */
  margin: 0px auto;
  z-index: 999;
}
/*  [ text overlayed on an image ]  */




/*
.overlay {
  min-height: 10vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.overlay h2 {
  background: #000000 none repeat scroll 0 0;
  color: tan;
  font-weight: 600;
  margin: 2rem 3rem 0;
  mix-blend-mode: overlay;
  padding: 5px 15px;
  text-align: right;
}
*/


.contact-section {
  height: 100%;
  padding: 25px 25px 25px 25px;
}
.contact-section .container {
  max-width: 750px;
}

/* https://css-tricks.com/snippets/ */
.form-control::-webkit-input-placeholder {
  color: #000000;
}
.form-control:-moz-placeholder {
  color: #000000;
}
.form-control::-moz-placeholder {
  color: #000000;
}
.form-control:-ms-input-placeholder {
  color: #000000;
}

ul.no-bullets {
  list-style-type: none;
  margin-left: 24px;
  padding: 0;
}

ul.no-bullets-v1 {
  list-style-type: none;
  margin-left: 24px;
  padding: 0;
}
ul.no-bullets-v1 li {
  padding-bottom: 8px;
/*
outline: 1px solid hotpink;
*/
}


ul.two-column {
  column-count: 2;
  column-gap: 20px;
}

/*
ul.with-checkmark {
  list-style: none;
  padding-left: 52px;
}
ul.with-checkmark li:before {
  color: #4e6e32;
  content: "\2714 \0020";
  padding-right: 12px;
  padding-left: 11px;
  font-weight: 600;
  list-style-position: outside;

}
*/



ul.with-checkmark {
  list-style: none;
  list-style-type: "\2714 \0020 \0020 \0020";
  padding-left: 40px;
}
ul.with-checkmark li::marker {
  color: #008000;
  font-weight: 600;
}










ins.justredunderline {
  color: #000000;
  text-decoration: none;
  border-bottom: 1px solid red;
}
ins.justredunderlinebold {
  color: #000000;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid red;
}


/* ---  [ Divider ] --- */

hr.fsgreen {
  display: block;
  height: 3px;
  background: rgba(78,110,50, 1);
  border: 0;
  margin: 0;
}

/*
   ---  ooOoo  ---
*/


.video-container {
  position: relative;
  float: right;
  margin-left: 15px;
  margin-bottom: 15px;

  width: 100%;
  height: 100vh;
  z-index: -1;
}
.video-container video {
  width: 100%;
  height: 100%

}


.video-with-text-overlay {
  height: 700px;
}
.video-with-text-overlay video {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  object-fit: cover;
  z-index: -1;
}

.video {
  width: 500px; /* Adjust as needed */
  width: auto; /* Adjust as needed */
  height: auto;
  object-fit: contain;
}

.overlay {

  position: absolute;

  display: flex;
  top: 0px; /* Adjust as needed */
  left: 0px; /* Adjust as needed */
  background-color: rgba(0,0,0, .5); /* Semi-transparent background */
  color: white;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  padding: 5px;
  border-radius: 5px;
}

#footer {
  color: #ffffff;
  font-size: .75rem;

  background: #383e4c;
  background: #231f20;
  padding: 0 32px 0 32px;

  border-top: 8px solid #231f20;
/*
  border-top: 2px solid;
*/

/*
  border-image: -webkit-linear-gradient(to right, #ff0000, #ff7900, #fff700, #00fd45, #47bdfb, #002af8, #9c29f8);
  border-image:    -moz-linear-gradient(to right, #ff0000, #ff7900, #fff700, #00fd45, #47bdfb, #002af8, #9c29f8);
  border-image:     -ms-linear-gradient(to right, #ff0000, #ff7900, #fff700, #00fd45, #47bdfb, #002af8, #9c29f8);
  border-image:      -o-linear-gradient(to right, #ff0000, #ff7900, #fff700, #00fd45, #47bdfb, #002af8, #9c29f8);
  border-image:         linear-gradient(to right, #ff0000, #ff7900, #fff700, #00fd45, #47bdfb, #002af8, #9c29f8);
  border-image:         linear-gradient(to right, #ff0000, #ff7900, #fff700, #00fd45, #47bdfb, #002af8, #9c29f8);

  outline: 1px solid lime;
*/
}
#footer a {
  color: #ffffff;
  text-decoration: none;
}
#footer p.contact a {
  color: #ffffff;
/*
color:lime;
background-color:red;
*/
  text-decoration: none;
}

.footer-widget {
  font-size: 1rem;
}
.footer-widget .widget-title {
  text-transform: uppercase;
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: center;
  padding: 8px 0;
  border-bottom:  1px solid rgba(255,255,255, .2);
}
.widget-title h2 {
  text-transform: uppercase;
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-align: center;
  padding: 8px 0;
  border-bottom:  1px solid rgba(255,255,255, .2);
}
aside,
footer-widget {
  display: block;
}

#google-maps {
  margin: 22px 0px 0px 0px;
/*
  outline: 1px solid lime;
*/
}
.map-area {
  height: 300px;
  width: auto;
}
.map-area iframe {
  height: 100%;
  width: 100%;
  border: 0px solid #d3d3d3;
  border-radius: 9px;
}


/*  ---  [ Business Hours ]  ---  */

.footer-post-hours {
  margin: 13px 0;
  margin: 13px 16px;
}
.footer-post-hours ul {
  display: table;
  width: 100%;
  
  padding: 0;
  padding-left: 12px;
  margin: 0 !important;
}
.footer-post-hours ul li {
  display: table-row;
  margin: 0;
  padding: 0;
  background: none !important;
}
.footer-post-hours ul li.table-stripe {
  background: rgba(0,0,0, .75) !important;
}
.footer-post-hours ul li .footer-post-label {
  display: table-cell;
  width: 26%;
/*
  padding: 2px 16px 2px 18px;
*/
  padding: 2px 0px 2px 20px;
  text-align: left !important;
}
.footer-post-hours ul li .footer-post-data {
  display: table-cell;
/*
  width: 37%;
*/
  width: 26%;

  padding: 2px 20px 2px 0px;

  text-align: right !important;
}
.footer-padding {
  padding-right: 5px;
  padding-left: 5px;
}

/* ---  [ Closing ]  --- */

#closing {
  color: #ffffff;
/*
  font-size: .85rem;
*/
  font-size: 1rem;
  font-weight: 400;
/*
  background: #383e4c;
*/
  background: #231f20;
  padding: 10px 0px 5px 0px;
/*
  border-top: 1px solid red;
*/
}

.line-center {
  display: inline-block;
  padding: 0px 17px;
  margin-top: 15px;
  margin-bottom: 15px;
  background: #231f20;
}
p.footer1 {
  display: block;

  color: rgba(255,255,255, .8);
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  line-height: 12px;
  position: relative;
  text-shadow: none;
  margin: 3px 0px -8px 0px;
  z-index: 2;
}
p.footer1:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 25px;
  right: 25px;
  border-top: 1px solid rgba(255,255,255, .3);
  z-index: -1;
}

.aligncenter,
div.aligncenter {
  color: #bebebe;
  font-size: 12.5px;
  display: block;
  text-align: center;
  margin: 0px auto 0px auto;
/*
  outline: 1px solid green;
*/
}

.aligncenter a,
div.aligncenter a {
/*
  color: #a9a9a9 !important;
*/
  color: #bebebe !important;
/*
  outline: 1px solid green;
*/
}


.inline-image {
   position: relative;
   top: 0px;
}



/* ---  [ Smooth Scrolling To Top ]  --- */
.bck {
  color: #ffffff;
  background: red;

  text-shadow: 2px 2px 8px rgba(0,0,0, .5);

 -webkit-box-shadow: inset 0px 0px 20px rgba(0,4,68, .25);
    -moz-box-shadow: inset 0px 0px 20px rgba(0,4,68, .25);
         box-shadow: inset 0px 0px 20px rgba(0,4,68, .25);

  position: fixed;
  bottom: 1rem;
  right: 1rem;
  visibility: hidden;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  transition-property: all;
  border: 1px solid rgba(0,0,0, .15);
  border-radius: 50px;
}
.bck:hover {
  color: #ffffff;
  background: green;
}
.bck.bck-on {
  color: #ffffff;
  visibility: visible;
}
.fade {
  opacity: 0;
}
.bck-on.fade {
  opacity: 1;
}
.rightToLeft {
  right : -50px;
}
.bck-on.rightToLeft {
  right: 1rem;
  bottom: 1rem;
}
.bottomToTop {
  bottom: -50px;
}
.bck-on.bottomToTop {
  bottom: 1rem;
}
.bck-leftToRight {
  left: -50px;
}
.bck-on.leftToRight {
  left: 1rem;
}
.topToBottom {
  top: -50px;
}
.bck-on.topToBottom {
  top: 1rem;
}
.scroll-top a {
  color: #ffffff;
}
/* ---  [ //Smooth Scrolling To Top ]  --- */


/* ---  [ Media Queries ]  --- */

@media only screen and (max-width: 1024px) {

  .nav-container {
    padding-right: 0;
    padding-left: 0;

/*
    outline: 1px solid lime;
*/
  }

  .header-content hr {
    margin: 3em 3em 3em 3em;
  }
  .feature-content {
    max-width: 320px;
    margin: 0px auto 30px;
  }
  .about-section {
    width: 100%;
    padding: 20px 1px 0px 1px;
    margin: auto;
 }
}

@media only screen and (max-width: 992px) {

  .header-h1 {
    margin: 0px .5%;
    padding: 0px .5%;
  }

  .header-content h1 {
/*
    font-size: 1.55rem;
    border-radius: 10px;
*/
    padding: 16px 2% 16px 2%;
  }

  .contact-area h2 {
    font-size: 2rem;
    margin-bottom: 30px;
  }
  .contact-content p {
    font-size: 1.1rem;
  }
}


@media only screen and (max-width: 894px) {
  .navbar-nav li {
    padding: 10px 0px 10px 0px;
/*
    outline: 1px solid lime;
*/
  }
  .show-large {
    display: none !important;
  }
  .hide-small {
    display: inline-block !important;
  }

/*
@media (max-width: 600px) {
&*/

  .stacked {
    flex-direction: column; /* Stacks vertically */
  }
  .left-title {
    width: 100%;

    padding: 20px;
/*
    background: #ddd;
    outline: 1px solid hotpink;
*/
  }

  .right-details {
    width: 100%;

    padding: 20px;
/*
    background: #ccc;
    outline: 1px solid dodgerblue;
*/
  }
}


/* ---  [ Tablet Layout: 768px ]  --- */

@media only screen and (max-width: 768px) {
/*
  .container {
    width: 770px;
   }
*/

  section.module.image-01 {
    background-image: linear-gradient(to bottom, rgba(0,0,0, .85), rgba(0,0,0, .275), rgba(0,0,0, .275), rgba(0,0,0, .275)),
               url("../images/lockport-insulation-living-room-mobile-hero.webp");
  }

  .container {
    width: 100%;
  }
  .service > p {
    font-size: 1.1rem;
  }
  .tm-box-description {
    padding: 30px 30px 30px 30px;
  }
  .contact-content p {
    font-size: 1.1rem;
    padding: 0;
  }

  .nav-container {
    margin-bottom: 5px;
/*
    background: black;
    outline: 1px solid lime;
*/
  }

  .navbar .container {
    margin: 0px 10px 0px 10px;
    width: 100%;
/*
    outline: 1px solid green;
*/
  }
  .navbar-nav > li {
    padding: 6px 3px 0px 3px;
  }

  header {
/*
    height: auto;

    display: -webkit-flex;
    display: -ms-flexbox;
    display: -webkit-box;
    display:        flex;
*/
    -webkit-align-items: center;
         -ms-flex-align: center;
      -webkit-box-align: center;
            align-items: center;
       -webkit-box-pack: center;
    -webkit-justify-content: center;
              -ms-flex-pack: center;
            justify-content: center;
    padding: 0;
/*
    margin-top: -8px;
    margin-bottom: -8px;
*/
  }

  p.header-company-name {
    font-size: 2.2rem;
  }

  .navbar-header {
    padding: 0px 0px 0px 0px; 
  }
  .navbar-nav > li {
    display: block;
  }


/* navbar adjustment */

  .navbar .navbar-nav {

    height: 320px;

    width: 100%;
    margin:0;
  }


  .navbar-collapse {
    padding-right: 0px;
    padding-left: 0px;
  }




  .navbar .navbar-collapse {
    text-align: center;
    line-height: 2;
  }


  .navbar-nav > li {
    width: 100%;
    border-bottom: 1px solid #999999;
    padding: 0px;
  }
  .navbar-nav > li:last-child {
    border-bottom: none;
  }
  .navbar-toggle {
    margin-top: 18px;
  }

  #mobile-head {
    color: #ffffff;
/*
    background-color: #000000;
*/
    font-size: 1rem;
    font-weight: 600;
    display: block;
    padding: 0px 1px 14px 13px !important;
  }

/*
  #mobile-head a {
    color: #ffffff;
  }
*/

  #mobile-head span.mobile-first {
    display: inline;
    padding: 0px 1px 0px 6px;
  }
  #mobile-head span.mobile-first a {
    text-decoration: none;
  }
  #mobile-head span.mobile-first a:hover {
    color: lightyellow;
  }

  #mobile-head span.mobile-last {
    color: #ffffff;
    display: inline-block;
    float: right;
    padding: 0px 6px 0px 6px;
    margin-right: 6px;
  }
  #mobile-head span.mobile-last:hover {
    color: #ffffff;
  }
  #mobile-head span.mobile-last a {
    text-decoration: none;
    color: #ffffff;
  }
  #mobile-head span.mobile-last a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: #ffffff;
/*
  text-decoration-color: red;
*/
  text-underline-offset: 6px;
  }

  .col-sm-12 {
    padding-right: 0px !important;
    padding-left: 0px !important;
  }

  section.module.parallax {
    height: 500px;
  }


  div.header-content {
    margin-top: 96px; 
  }

  .header-content h1 {
    font-size: 1.75rem;
    border-radius: 10px;
    padding: 16px 2.5% 16px 2.5%;
  }

  .header-content hr {
    margin: 2em 5em 2em 5em;
/*
    outline: 1px solid blue;
*/
  }

  p.answer {
    padding: 6px 30px 6px 30px;
  }


/*
  ul.with-checkmark {
    list-style: none;
    padding-left: 15px;
  }
*/


  .feature-content-description {
    padding: 0px 0px 35px;
  }
  .feature-content {
    max-width: 360px;
    margin: 0px auto 30px;
  }
  .feature-content-2 {
    max-width: 360px;
    margin: 0px auto 30px;
  }
 
  .tm-box-description {
    padding: 20px 10px 20px 10px;
  }
  .footer-content h4 {
    font-size: 1rem;
  }

  .container {
    margin-left: 0;
    margin-right: 0;
  }

  div.contact-summary-list {
    margin: 0px 5% 0px 5%;
/*
outline: red solid 1px;
*/
  }

  .contact-form-left {
    padding-right: 0px;
  }
  .contact-form-right {
    padding-left: 0px;
  }
  .contact-form-center {
    padding: 0px;
  }
}

@media only screen and (max-width: 768px) {
  .hide-on-small,
  li.hide-on-small {
    display: none;
  }

  h1.hero {
    font-size: 1.75rem;
    font-size: 2.5rem;
    margin-top: -50px;
/*
    outline: 1px solid hotpink;
*/
  }

  div.mobile-top-line {
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255, .65);
  }


  div.mobile-top-menu {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 6px;
    position: relative;
  }
  ul.mobile-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }

  ul.mobile-menu li a {
    color: #ffffff;
  }

  ul.mobile-menu li a:hover {
    color: #ff0000;
  }


  .cta-on-large {
    display: inline;
  }
  .cta-on-small {
    display: none;
  }

}






@media (max-width: 600px) {
  .stacked {
    flex-direction: column; /* Stacks vertically */
  }
  .left-title {
    width: 100%;

    padding: 20px;
/*
    background: #ddd;
    outline: 1px solid hotpink;
*/
  }

  .right-details {
    width: 100%;

    padding: 20px;
/*
    background: #ccc;
    outline: 1px solid dodgerblue;
*/
  }
}



@media only screen and (max-width: 480px) {
/*
  header {
    height: 75vh;
  }
*/
  #opening {
    padding: 60px 0px 10px 0px;
  }
  .contact-section {
    padding: 0px 0px 0px 0px;
  }

  div.contact-summary-list {
    margin: 0px 0px 0px 0px;
  }

/*
  ul.with-checkmark {
    padding-left: 0px;
  }
*/

}

@media only screen and (max-width: 380px) {
  .button-group {
    margin: 0px -14px 0px -14px;
  }


  .navbar-nav li.appointment {
    font-size: 1rem;
    padding: 20px 10px 15px 10px;
  }


  li a.cta-button {
    padding: 6px 8px 6px 6px;
    margin: 0px 4px;
/*
    outline: 1px solid lime;
*/
  }

  .cta-on-large {
    display: none;
  }
  .cta-on-small {
    display: inline;
  }



}