:root {
	--primary-color: #007fc2;
	}
	
	.maincontent {
		max-width: 100%;
		margin: 0 auto;
		padding: 0;
		border: none;
	
	}
	   
	
	/*--------------------------------------------------------------
	  innner page hero component
	--------------------------------------------------------------*/
	.hero {
	  position: relative;
	  padding: 100px 0px;
	  background-image: linear-gradient(270deg, rgba(33, 33, 33, 0.8) 0%, rgba(33, 33, 33, 0.95) 100%);
	  background-image: linear-gradient(270deg, rgba(33, 33, 33, 0.8) 0%, rgba(33, 33, 33, 0.95) 100%), url(/imageserver/UserMedia/customhmimp/2022/roof-bg-3.jpg);
	  /*
		commercial flat roof img
		/imageserver/UserMedia/customhmimp/2022/roof-bg-3.jpg
	
	  */
	  /*
		residential shingle img
		/imageserver/Reusable/GAF/CMP/whybg.jpg
	
	  */
	  color: #ffffff;
	  background-size: cover;
	  background-repeat: no-repeat;
	  background-position: top;
	  text-align: center;
	}
	
	.hero-panel {
	  position: relative;
	  color: #fff;
	  max-width: 1090px;
	  margin: 0 auto;
	  text-align: center;
	  z-index: 1;
	  -webkit-animation: fadeIn 1.5s;
	  animation: fadeIn 1.5s;
	}
	
	.h1-hero-heading {
	  font-weight: bold;
	  font-size: 3em;
	}
	
	@-webkit-keyframes fadeIn {
	  0% {
		transform: rotateY(90deg);
		opacity: 0;
	  }
	  100% {
		transform: rotateY(0deg);
		opacity: 1;
	  }
	}
	
	@keyframes fadeIn {
	  0% {
		transform: rotateY(90deg);
		opacity: 0;
	  }
	  100% {
		transform: rotateY(0deg);
		opacity: 1;
	  }
	}
	/*---------------------------
	  header underline component
	-----------------------------*/
	.underline {
	  display: block;
	  position: relative;
	  width: 50%;
	  height: 2px;
	  background: var(--main-color);
	  margin: 25px auto;
	}
	
	.underline:before,
	.underline:after {
	  content: "";
	  position: absolute;
	  width: 50%;
	}
	
	.underline:before {
	  left: 0;
	  top: -5px;
	  border-top: 2px solid var(--main-color);
	}
	
	.underline:after {
	  left: 50%;
	  bottom: -5px;
	  border-bottom: 2px solid var(--main-color);
	}
	
	.underline-color {
	  background: var(--main-color);
	}
	
	.underline-color:before,
	.underline-color:after {
	  border-color: var(--main-color);
	}
	
	/* -------------------------
	  mason gallery component
	-------------------------- */
	.mason-gallery {
	  display: flex;
	  flex-wrap: wrap;
	  margin-top: 80px;
	  margin-left: auto;
	  margin-right: auto;
	  padding: 0;
	  max-width: 1300px;
	  width: 100%;
	  position: relative;
	}
	.mason-gallery h3 {
	  position: absolute;
	  top: -55px;
	}
	.mason-gallery .mason-gallery-item {
	  width: 24%;
	  height: 250px;
	  margin: 0.5%;
	  overflow: hidden;
	}
	.mason-gallery .mason-gallery-item img {
	  margin-top: 8px;
	  vertical-align: middle;
	  width: 100%;
	  transition: all 0.2s ease-in-out;
	}
	.mason-gallery .mason-gallery-item img:hover {
	  filter: drop-shadow(4px 4px 6px gray);
	  transform: scale(1.05);
	}
	
	@media screen and (max-width: 1200px) {
	  .mason-gallery-item {
		flex: 33%;
		max-width: 32%;
	  }
	}
	@media screen and (max-width: 992px) {
	  .mason-gallery-item {
		flex: 50%;
		max-width: 49%;
	  }
	}
	@media screen and (max-width: 600px) {
	  .mason-gallery-item {
		flex: 100%;
		max-width: 100%;
	  }
	}
	/* -----------------
	  slider component
	------------------- */
	.beforeAfterContainer {
	  padding: 0 30px;
	  width: 1000px;
	  max-width: 100%;
	}
	
	.beforeAfterContainer #comparison {
	  width: 100%;
	  height: 80vw;
	  max-height: 520px;
	  margin: 0px auto;
	  padding: 3vh 10px;
	}
	
	.beforeAfterContainer #comparison .before-1 {
        background-image: url("/imageserver/UserMedia/markferguson/Gallery/BeforeAfter/before1.jpg");
	  background-size: cover;
	  position: relative;
	  font-size: 0;
	  width: 100%;
	  height: 100%;
	  margin: 0;
	}

    .beforeAfterContainer #comparison .before-2 {
        background-image: url("/imageserver/UserMedia/markferguson/Gallery/BeforeAfter/before2.jpg");
        background-size: cover;
        position: relative;
        font-size: 0;
        width: 100%;
        height: 100%;
        margin: 0;
      }
	
	.beforeAfterContainer #comparison figure > img {
	  position: relative;
	  width: 100%;
	}
	
	.beforeAfterContainer #comparison #after-1 {
        background-image: url("/imageserver/UserMedia/markferguson/Gallery/BeforeAfter/after1.jpg");
	  background-size: cover;
	  position: absolute;
	  width: 0%;
	  box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
	  overflow: hidden;
	  bottom: 0;
	  height: 100%;
	}

    .beforeAfterContainer #comparison #after-2 {
        background-image: url("/imageserver/UserMedia/markferguson/Gallery/BeforeAfter/after2.jpg");
        background-size: cover;
        position: absolute;
        width: 0%;
        box-shadow: 0 5px 10px -2px rgba(0, 0, 0, 0.3);
        overflow: hidden;
        bottom: 0;
        height: 100%;
      }
	
	input[type=range] {
	  -webkit-appearance: none;
	  -moz-appearance: none;
	  position: relative;
	  top: -2rem;
	  left: -2%;
	  background-color: rgba(255, 255, 255, 0.5);
	  width: 102%;
	  height: 15px;
	}
	
	input[type=range]:focus {
	  outline: none;
	}
	
	input[type=range]:active {
	  outline: none;
	}
	
	input[type=range]::-moz-range-track {
	  -moz-appearance: none;
	  height: 15px;
	  width: 102%;
	  right: 2%;
	  background-color: rgba(255, 255, 255, 0.5);
	  position: relative;
	  outline: none;
	}
	
	input[type=range]::active {
	  border: none;
	  outline: none;
	}
	
	input[type=range]::-webkit-slider-thumb {
	  -webkit-appearance: none;
	  width: 25px;
	  height: 25px;
	  background: #faa716;
	  border-radius: 50%;
	  border: 6px solid #ffffff;
	}
	
	input[type=range]::-moz-range-thumb {
	  -moz-appearance: none;
	  width: 25px;
	  height: 25px;
	  background: #faa716;
	  border: 6px solid #ffffff;
	  border-radius: 50%;
	}
	
	input[type=range]:focus::-webkit-slider-thumb {
	  background: #faa716;
	}
	
	input[type=range]:focus::-moz-range-thumb {
	  background: #faa716;
	}
	
	/* ---------------------
			toggler component
	  ----------------------- */
	.switchContainer {
	  display: flex;
	  justify-content: end;
	}
	
	.switchContainer p {
	  padding: 0 5px;
	}
	
	/* The switch - the box around the slider */
	.switch {
	  position: relative;
	  display: inline-block;
	  width: 60px;
	  height: 34px;
	}
	
	/* Hide default HTML checkbox */
	.switch input {
	  opacity: 0;
	  width: 0;
	  height: 0;
	}
	
	/* The slider */
	.toggler {
	  position: absolute;
	  cursor: pointer;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background-color: #ccc;
	  transition: 0.4s;
	}
	
	.toggler:before {
	  position: absolute;
	  content: "";
	  height: 26px;
	  width: 26px;
	  left: 4px;
	  bottom: 4px;
	  background-color: white;
	  transition: 0.4s;
	}
	
	input:checked + .toggler {
	  background-color: #faa716;
	}
	
	input:focus + .toggler {
	  box-shadow: 0 0 1px #faa716;
	}
	
	input:checked + .toggler:before {
	  transform: translateX(26px);
	}
	
	/* Rounded sliders */
	.toggler.round {
	  border-radius: 34px;
	}
	
	.toggler.round:before {
	  border-radius: 50%;
	}
	
	.flex-container {
	  display: flex;
	  justify-content: center;
	}/*# sourceMappingURL=portfolio.css.map */