@charset "utf-8";


/*Slider 1*/
.container1 { 
 height: 500px;
 margin: 1vw auto;
 max-height: 500px;
 max-width: 500px;
 overflow: hidden;
 width: 100%;
}
.container1 figure { 
 background-image: url("../ConcreteCoatingInstaller/ConcreteCoatingsBeforeAfter/ConcreteCoatingA1.jpg");
 background-size: cover;
 font-size: 0;
 height: 100%;
 margin: 0; 
 position: relative;
 width: 100%; 
}
#compare1 {
 background-image: url("../ConcreteCoatingInstaller/ConcreteCoatingsBeforeAfter/ConcreteCoatingB1.jpg");
 background-size: cover;
 bottom: 0;
 border-right: 5px solid rgba(247,148,29,0.7);
 box-shadow: 10px 0 15px -13px #000;
 height: 100%;
 max-width: 98.6%;
 min-width: 0.6%;
 overflow: visible;
 position: absolute;
 width: 50%; 
}
.compare1-animation{
 animation: first 2s 1 normal ease-in-out 0.1s; 
 -webkit-animation: first 2s 1 normal ease-in-out 0.1s; 
}
input#baslider1 {
 -moz-appearance: none;
 -webkit-appearance: none;
 border: none; 
 background: transparent;
 cursor: col-resize;
 height: 100vw;
 left: 0;
 margin: 0;
 outline: none; 
 padding: 0;
 position: relative;
 top: -100vw;
 width: 100%;
}
input#baslider1::-moz-range-track { 
 background: transparent; 
}
input#baslider1::-ms-track {
 border: none; 
 background-color: transparent;
 height: 100vw; 
 left: 0; 
 outline: none; 
 position: relative;
 top: -100vw; 
 width: 100%;
 margin: 0;
 padding: 0;
 cursor: col-resize;
 color:transparent;
}
input#baslider1::-ms-fill-lower {
 background-color:transparent;
}
input#baslider1::-webkit-slider-thumb {
 -webkit-appearance:none;
 height: 100vw;
 width: 0.5%;
 opacity: 0;
}
input#baslider1::-moz-range-thumb {
 -moz-appearance: none;
 height: 100vw;
 width: 0.5%;
 opacity: 0;
}   
input#baslider1::-ms-thumb {
 height: 100vw;
 width: 0.5%; 
 opacity:0;
}
input#baslider1::-ms-tooltip {
 display:none;
}
#compare1::before {
 background: url(../Graphics/comparisionarrows.png) no-repeat scroll 0 center transparent;
 background-size:contain;
 content: " ";
 float: right;
 height: 100%;
 margin-right: -34px;
 position: relative;
 top:0;
 width: 64px;
}


/*Slider 2*/
.container2 { 
 height: 500px;
 margin: 1vw auto;
 max-height: 500px;
 max-width: 500px;
 overflow: hidden;
 width: 100%;
}
.container2 figure { 
 background-image: url("../ConcreteCoatingInstaller/ConcreteCoatingsBeforeAfter/ConcreteCoatingA2.jpg");
 background-size: cover;
 font-size: 0;
 height: 100%;
 margin: 0; 
 position: relative;
 width: 100%; 
}
#compare2 {
 background-image: url("../ConcreteCoatingInstaller/ConcreteCoatingsBeforeAfter/ConcreteCoatingB2.jpg");
 background-size: cover;
 bottom: 0;
 border-right: 5px solid rgba(247,148,29,0.7);
 box-shadow: 10px 0 15px -13px #000;
 height: 100%;
 max-width: 98.6%;
 min-width: 0.6%;
 overflow: visible;
 position: absolute;
 width: 50%; 
}
.compare2-animation{
 animation: first 2s 1 normal ease-in-out 0.1s; 
 -webkit-animation: first 2s 1 normal ease-in-out 0.1s; 
}
input#baslider2 {
 -moz-appearance: none;
 -webkit-appearance: none;
 border: none; 
 background: transparent;
 cursor: col-resize;
 height: 100vw;
 left: 0;
 margin: 0;
 outline: none; 
 padding: 0;
 position: relative;
 top: -100vw;
 width: 100%;
}
input#baslider2::-moz-range-track { 
 background: transparent; 
}
input#baslider2::-ms-track {
 border: none; 
 background-color: transparent;
 height: 100vw; 
 left: 0; 
 outline: none; 
 position: relative;
 top: -100vw; 
 width: 100%;
 margin: 0;
 padding: 0;
 cursor: col-resize;
 color:transparent;
}
input#baslider2::-ms-fill-lower {
 background-color:transparent;
}
input#baslider2::-webkit-slider-thumb {
 -webkit-appearance:none;
 height: 100vw;
 width: 0.5%;
 opacity: 0;
}
input#baslider2::-moz-range-thumb {
 -moz-appearance: none;
 height: 100vw;
 width: 0.5%;
 opacity: 0;
}   
input#baslider2::-ms-thumb {
 height: 100vw;
 width: 0.5%; 
 opacity:0;
}
input#baslider2::-ms-tooltip {
 display:none;
}
#compare2::before {
 background: url(../Graphics/comparisionarrows.png) no-repeat scroll 0 center transparent;
 background-size:contain;
 content: " ";
 float: right;
 height: 100%;
 margin-right: -34px;
 position: relative;
 top:0;
 width: 64px;
}

/*Slider 3*/
.container3 { 
 height: 500px;
 margin: 1vw auto;
 max-height: 500px;
 max-width: 500px;
 overflow: hidden;
 width: 100%;
}
.container3 figure { 
 background-image: url("../ConcreteCoatingInstaller/ConcreteCoatingsBeforeAfter/ConcreteCoatingA3.jpg");
 background-size: cover;
 font-size: 0;
 height: 100%;
 margin: 0; 
 position: relative;
 width: 100%; 
}
#compare3 {
 background-image: url("../ConcreteCoatingInstaller/ConcreteCoatingsBeforeAfter/ConcreteCoatingB3.jpg");
 background-size: cover;
 bottom: 0;
 border-right: 5px solid rgba(247,148,29,0.7);
 box-shadow: 10px 0 15px -13px #000;
 height: 100%;
 max-width: 98.6%;
 min-width: 0.6%;
 overflow: visible;
 position: absolute;
 width: 50%; 
}
.compare3-animation{
 animation: first 2s 1 normal ease-in-out 0.1s; 
 -webkit-animation: first 2s 1 normal ease-in-out 0.1s; 
}
input#baslider3 {
 -moz-appearance: none;
 -webkit-appearance: none;
 border: none; 
 background: transparent;
 cursor: col-resize;
 height: 100vw;
 left: 0;
 margin: 0;
 outline: none; 
 padding: 0;
 position: relative;
 top: -100vw;
 width: 100%;
}
input#baslider3::-moz-range-track { 
 background: transparent; 
}
input#baslider3::-ms-track {
 border: none; 
 background-color: transparent;
 height: 100vw; 
 left: 0; 
 outline: none; 
 position: relative;
 top: -100vw; 
 width: 100%;
 margin: 0;
 padding: 0;
 cursor: col-resize;
 color:transparent;
}
input#baslider3::-ms-fill-lower {
 background-color:transparent;
}
input#baslider3::-webkit-slider-thumb {
 -webkit-appearance:none;
 height: 100vw;
 width: 0.5%;
 opacity: 0;
}
input#baslider3::-moz-range-thumb {
 -moz-appearance: none;
 height: 100vw;
 width: 0.5%;
 opacity: 0;
}   
input#baslider3::-ms-thumb {
 height: 100vw;
 width: 0.5%; 
 opacity:0;
}
input#baslider3::-ms-tooltip {
 display:none;
}
#compare3::before {
 background: url(../Graphics/comparisionarrows.png) no-repeat scroll 0 center transparent;
 background-size:contain;
 content: " ";
 float: right;
 height: 100%;
 margin-right: -34px;
 position: relative;
 top:0;
 width: 64px;
}


/*Slider 4*/
.container4 { 
 height: 500px;
 margin: 1vw auto;
 max-height: 500px;
 max-width: 500px;
 overflow: hidden;
 width: 100%;
}
.container4 figure { 
 background-image: url("../ConcreteCoatingInstaller/ConcreteCoatingsBeforeAfter/ConcreteCoatingA4.jpg");
 background-size: cover;
 font-size: 0;
 height: 100%;
 margin: 0; 
 position: relative;
 width: 100%; 
}
#compare4 {
 background-image: url("../ConcreteCoatingInstaller/ConcreteCoatingsBeforeAfter/ConcreteCoatingB4.jpg");
 background-size: cover;
 bottom: 0;
 border-right: 5px solid rgba(247,148,29,0.7);
 box-shadow: 10px 0 15px -13px #000;
 height: 100%;
 max-width: 98.6%;
 min-width: 0.6%;
 overflow: visible;
 position: absolute;
 width: 50%; 
}
.compare4-animation{
 animation: first 2s 1 normal ease-in-out 0.1s; 
 -webkit-animation: first 2s 1 normal ease-in-out 0.1s; 
}
input#baslider4 {
 -moz-appearance: none;
 -webkit-appearance: none;
 border: none; 
 background: transparent;
 cursor: col-resize;
 height: 100vw;
 left: 0;
 margin: 0;
 outline: none; 
 padding: 0;
 position: relative;
 top: -100vw;
 width: 100%;
}
input#baslider4::-moz-range-track { 
 background: transparent; 
}
input#baslider4::-ms-track {
 border: none; 
 background-color: transparent;
 height: 100vw; 
 left: 0; 
 outline: none; 
 position: relative;
 top: -100vw; 
 width: 100%;
 margin: 0;
 padding: 0;
 cursor: col-resize;
 color:transparent;
}
input#baslider4::-ms-fill-lower {
 background-color:transparent;
}
input#baslider4::-webkit-slider-thumb {
 -webkit-appearance:none;
 height: 100vw;
 width: 0.5%;
 opacity: 0;
}
input#baslider4::-moz-range-thumb {
 -moz-appearance: none;
 height: 100vw;
 width: 0.5%;
 opacity: 0;
}   
input#baslider4::-ms-thumb {
 height: 100vw;
 width: 0.5%; 
 opacity:0;
}
input#baslider4::-ms-tooltip {
 display:none;
}
#compare4::before {
 background: url(../Graphics/comparisionarrows.png) no-repeat scroll 0 center transparent;
 background-size:contain;
 content: " ";
 float: right;
 height: 100%;
 margin-right: -34px;
 position: relative;
 top:0;
 width: 64px;
}

/*Slider 5*/
.container5 { 
 height: 500px;
 margin: 1vw auto;
 max-height: 500px;
 max-width: 500px;
 overflow: hidden;
 width: 100%;
}
.container5 figure { 
 background-image: url("../ConcreteCoatingInstaller/ConcreteCoatingsBeforeAfter/ConcreteCoatingA5.jpg");
 background-size: cover;
 font-size: 0;
 height: 100%;
 margin: 0; 
 position: relative;
 width: 100%; 
}
#compare5 {
 background-image: url("../ConcreteCoatingInstaller/ConcreteCoatingsBeforeAfter/ConcreteCoatingB5.jpg");
 background-size: cover;
 bottom: 0;
 border-right: 5px solid rgba(247,148,29,0.7);
 box-shadow: 10px 0 15px -13px #000;
 height: 100%;
 max-width: 98.6%;
 min-width: 0.6%;
 overflow: visible;
 position: absolute;
 width: 50%; 
}
.compare5-animation{
 animation: first 2s 1 normal ease-in-out 0.1s; 
 -webkit-animation: first 2s 1 normal ease-in-out 0.1s; 
}
input#baslider5 {
 -moz-appearance: none;
 -webkit-appearance: none;
 border: none; 
 background: transparent;
 cursor: col-resize;
 height: 100vw;
 left: 0;
 margin: 0;
 outline: none; 
 padding: 0;
 position: relative;
 top: -100vw;
 width: 100%;
}
input#baslider5::-moz-range-track { 
 background: transparent; 
}
input#baslider5::-ms-track {
 border: none; 
 background-color: transparent;
 height: 100vw; 
 left: 0; 
 outline: none; 
 position: relative;
 top: -100vw; 
 width: 100%;
 margin: 0;
 padding: 0;
 cursor: col-resize;
 color:transparent;
}
input#baslider5::-ms-fill-lower {
 background-color:transparent;
}
input#baslider5::-webkit-slider-thumb {
 -webkit-appearance:none;
 height: 100vw;
 width: 0.5%;
 opacity: 0;
}
input#baslider5::-moz-range-thumb {
 -moz-appearance: none;
 height: 100vw;
 width: 0.5%;
 opacity: 0;
}   
input#baslider5::-ms-thumb {
 height: 100vw;
 width: 0.5%; 
 opacity:0;
}
input#baslider5::-ms-tooltip {
 display:none;
}
#compare5::before {
 background: url(../Graphics/comparisionarrows.png) no-repeat scroll 0 center transparent;
 background-size:contain;
 content: " ";
 float: right;
 height: 100%;
 margin-right: -34px;
 position: relative;
 top:0;
 width: 64px;
}

/*Slider 6*/
.container6 { 
 height: 500px;
 margin: 1vw auto;
 max-height: 500px;
 max-width: 500px;
 overflow: hidden;
 width: 100%;
}
.container6 figure { 
 background-image: url("../ConcreteCoatingInstaller/ConcreteCoatingsBeforeAfter/ConcreteCoatingA6.jpg");
 background-size: cover;
 font-size: 0;
 height: 100%;
 margin: 0; 
 position: relative;
 width: 100%; 
}
#compare6 {
 background-image: url("../ConcreteCoatingInstaller/ConcreteCoatingsBeforeAfter/ConcreteCoatingB6.jpg");
 background-size: cover;
 bottom: 0;
 border-right: 5px solid rgba(247,148,29,0.7);
 box-shadow: 10px 0 15px -13px #000;
 height: 100%;
 max-width: 98.6%;
 min-width: 0.6%;
 overflow: visible;
 position: absolute;
 width: 50%; 
}
.compare6-animation{
 animation: first 2s 1 normal ease-in-out 0.1s; 
 -webkit-animation: first 2s 1 normal ease-in-out 0.1s; 
}
input#baslider6 {
 -moz-appearance: none;
 -webkit-appearance: none;
 border: none; 
 background: transparent;
 cursor: col-resize;
 height: 100vw;
 left: 0;
 margin: 0;
 outline: none; 
 padding: 0;
 position: relative;
 top: -100vw;
 width: 100%;
}
input#baslider6::-moz-range-track { 
 background: transparent; 
}
input#baslider6::-ms-track {
 border: none; 
 background-color: transparent;
 height: 100vw; 
 left: 0; 
 outline: none; 
 position: relative;
 top: -100vw; 
 width: 100%;
 margin: 0;
 padding: 0;
 cursor: col-resize;
 color:transparent;
}
input#baslider6::-ms-fill-lower {
 background-color:transparent;
}
input#baslider6::-webkit-slider-thumb {
 -webkit-appearance:none;
 height: 100vw;
 width: 0.5%;
 opacity: 0;
}
input#baslider6::-moz-range-thumb {
 -moz-appearance: none;
 height: 100vw;
 width: 0.5%;
 opacity: 0;
}   
input#baslider6::-ms-thumb {
 height: 100vw;
 width: 0.5%; 
 opacity:0;
}
input#baslider6::-ms-tooltip {
 display:none;
}
#compare6::before {
 background: url(../Graphics/comparisionarrows.png) no-repeat scroll 0 center transparent;
 background-size:contain;
 content: " ";
 float: right;
 height: 100%;
 margin-right: -34px;
 position: relative;
 top:0;
 width: 64px;
}


/*Slider 7*/
.container7 { 
 height: 500px;
 margin: 1vw auto;
 max-height: 500px;
 max-width: 500px;
 overflow: hidden;
 width: 100%;
}
.container7 figure { 
 background-image: url("../ConcreteCoatingInstaller/ConcreteCoatingsBeforeAfter/ConcreteCoatingA7.jpg");
 background-size: cover;
 font-size: 0;
 height: 100%;
 margin: 0; 
 position: relative;
 width: 100%; 
}
#compare7 {
 background-image: url("../ConcreteCoatingInstaller/ConcreteCoatingsBeforeAfter/ConcreteCoatingB7.jpg");
 background-size: cover;
 bottom: 0;
 border-right: 5px solid rgba(247,148,29,0.7);
 box-shadow: 10px 0 15px -13px #000;
 height: 100%;
 max-width: 98.6%;
 min-width: 0.6%;
 overflow: visible;
 position: absolute;
 width: 50%;
}
.compare7-animation{
 animation: first 2s 1 normal ease-in-out 0.1s; 
 -webkit-animation: first 2s 1 normal ease-in-out 0.1s; 
}
input#baslider7 {
 -moz-appearance: none;
 -webkit-appearance: none;
 border: none; 
 background: transparent;
 cursor: col-resize;
 height: 100vw;
 left: 0;
 margin: 0;
 outline: none; 
 padding: 0;
 position: relative;
 top: -100vw;
 width: 100%;
}
input#baslider7::-moz-range-track { 
 background: transparent; 
}
input#baslider7::-ms-track {
 border: none; 
 background-color: transparent;
 height: 100vw; 
 left: 0; 
 outline: none; 
 position: relative;
 top: -100vw; 
 width: 100%;
 margin: 0;
 padding: 0;
 cursor: col-resize;
 color:transparent;
}
input#baslider7::-ms-fill-lower {
 background-color:transparent;
}
input#baslider7::-webkit-slider-thumb {
 -webkit-appearance:none;
 height: 100vw;
 width: 0.5%;
 opacity: 0;
}
input#baslider7::-moz-range-thumb {
 -moz-appearance: none;
 height: 100vw;
 width: 0.5%;
 opacity: 0;
}   
input#baslider7::-ms-thumb {
 height: 100vw;
 width: 0.5%; 
 opacity:0;
}
input#baslider7::-ms-tooltip {
 display:none;
}
#compare7::before {
 background: url(../Graphics/comparisionarrows.png) no-repeat scroll 0 center transparent;
 background-size:contain;
 content: " ";
 float: right;
 height: 100%;
 margin-right: -34px;
 position: relative;
 top:0;
 width: 64px;
}


/*Slider 8*/
.container8 { 
 height: 500px;
 margin: 1vw auto;
 max-height: 500px;
 max-width: 500px;
 overflow: hidden;
 width: 100%;
}
.container8 figure { 
 background-image: url("../ConcreteCoatingInstaller/ConcreteCoatingsBeforeAfter/ConcreteCoatingA8.jpg");
 background-size: cover;
 font-size: 0;
 height: 100%;
 margin: 0; 
 position: relative;
 width: 100%; 
}
#compare8 {
 background-image: url("../ConcreteCoatingInstaller/ConcreteCoatingsBeforeAfter/ConcreteCoatingB8.jpg");
 background-size: cover;
 bottom: 0;
 border-right: 5px solid rgba(247,148,29,0.7);
 box-shadow: 10px 0 15px -13px #000;
 height: 100%;
 max-width: 98.6%;
 min-width: 0.6%;
 overflow: visible;
 position: absolute;
 width: 50%;  
}
.compare8-animation {
 animation: first 2s 1 normal ease-in-out 0.1s; 
 -webkit-animation: first 2s 1 normal ease-in-out 0.1s; 
}
input#baslider8 {
 -moz-appearance: none;
 -webkit-appearance: none;
 border: none; 
 background: transparent;
 cursor: col-resize;
 height: 100vw;
 left: 0;
 margin: 0;
 outline: none; 
 padding: 0;
 position: relative;
 top: -100vw;
 width: 100%;
}
input#baslider8::-moz-range-track { 
 background: transparent; 
}
input#baslider8::-ms-track {
 border: none; 
 background-color: transparent;
 height: 100vw; 
 left: 0; 
 outline: none; 
 position: relative;
 top: -100vw; 
 width: 100%;
 margin: 0;
 padding: 0;
 cursor: col-resize;
 color:transparent;
}
input#baslider8::-ms-fill-lower {
 background-color:transparent;
}
input#baslider8::-webkit-slider-thumb {
 -webkit-appearance:none;
 height: 100vw;
 width: 0.5%;
 opacity: 0;
}
input#baslider8::-moz-range-thumb {
 -moz-appearance: none;
 height: 100vw;
 width: 0.5%;
 opacity: 0;
}   
input#baslider8::-ms-thumb {
 height: 100vw;
 width: 0.5%; 
 opacity:0;
}
input#baslider8::-ms-tooltip {
 display:none;
}
#compare8::before {
 background: url(../Graphics/comparisionarrows.png) no-repeat scroll 0 center transparent;
 background-size:contain;
 content: " ";
 float: right;
 height: 100%;
 margin-right: -34px;
 position: relative;
 top:0;
 width: 64px;
}




@keyframes first {
  0% {width: 0%; }
  50% {width: 80%; }
  100% {width: 50%; }
}
@-webkit-keyframes first {
  0% {width: 0%; }
  50% {width: 80%; }
  100% {width: 50%; }
}