* {
  padding: 0;
  margin: 0;

}
html {
  background-color: #222222;
  max-width: 100vw;
  overflow-x: hidden !important;
}
body {
  background-color: #222222;
  width: 100vw;
  overflow-x: hidden !important;
}
/* Fonts */
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/roboto-regular.woff2') format('woff2');
  font-display: fallback;
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/roboto-italic.woff2') format('woff2');
  font-display: fallback;
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/roboto-light.woff2') format('woff2');
  font-display: fallback;
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/roboto-medium.woff2') format('woff2');
  font-display: fallback;
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto/roboto-bold.woff2') format('woff2');
  font-display: fallback;
  font-weight: 700;
  font-style: normal;
}
h1 {
  font-family: 'Roboto', sans-serif;
  color: #ffffff;
  font-size: 2.4rem;
  font-weight: 900;
}
h2 {
  font-family: 'Roboto', sans-serif;
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 900;
  margin-bottom: 1rem;
}
h3 {
  font-family: 'Roboto', sans-serif;
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 900;
  margin-top: 2rem;
}
p {
  font-family: 'Roboto', sans-serif;
  color: #ffffff;
  font-size: 1rem;
}
.text-center {
  text-align: center;
}
.text-center img {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
img {
  max-width: 100%;
}
#landing-page {
  text-align: center;
  padding-top: 10vh;
  padding-bottom: 10vh;
}
#install-button {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  margin-bottom: 2rem;
  width: fit-content;
  padding: 1rem 2rem;
  background-color: #222222;
  border: 2px solid #c69e60;
  border-radius: 0.5rem;
  color: #c69e60;
  font-weight: bold;
  transition: 500ms;
}
#install-button:hover, #install-button:focus, #install-button:active {
  background-color: #c69e60;
  color: #222222;
  cursor: pointer !important;
  transition: 500ms;
}
#continue-without-downloading {
  font-size: 0.8rem;
  color: #a0a0a0;
  text-decoration: none !important;
  margin-top: 5rem !important;
  display: block;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  transition: 500ms;
}
#continue-without-downloading:hover, #continue-without-downloading:focus, #continue-without-downloading:active {
  color: #ffffff;
  text-decoration: none !important;
  transition: 500ms;
}
.app-screen {
  width: 100vw;
  min-height: 100vh;
  display: block;
  text-align: center;
  padding-top: 10vh;
}
#start-button {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4rem;
  margin-bottom: 2rem;
  width: fit-content;
  padding: 1rem 2rem;
  background-color: #c69e60;
  border: 2px solid #c69e60;
  border-radius: 0.5rem;
  color: #222222;
  font-weight: bold;
  transition: 500ms;
}
#start-button:hover, #start-button:focus, #start-button:active {
  background-color: #222222;
  color: #c69e60;
  cursor: pointer !important;
  transition: 500ms;
}
.continue-btn {
  display: inline-block;
  margin-left: 1rem;
  margin-top: 4rem;
  margin-bottom: 2rem;
  width: fit-content;
  padding: 1rem 2rem;
  background-color: #c69e60;
  border: 2px solid #c69e60;
  border-radius: 0.5rem;
  color: #222222;
  font-weight: bold;
  transition: 500ms;
}
.continue-btn:hover, .continue-btn:focus, .continue-btn:active {
  background-color: #222222;
  color: #c69e60;
  cursor: pointer !important;
  transition: 500ms;
}
.continue-btn i {
  margin-left: 0.5rem;
}
.back-btn {
  display: inline-block;
  margin-right: 1rem;
  margin-top: 4rem;
  margin-bottom: 2rem;
  width: fit-content;
  padding: 1rem 2rem;
  background-color: #222222;
  border: 2px solid #c69e60;
  border-radius: 0.5rem;
  color: #c69e60;
  font-weight: bold;
  transition: 500ms;
}
.back-btn:hover, .back-btn:focus, .back-btn:active {
  background-color: #c69e60;
  color: #222222;
  cursor: pointer !important;
  transition: 500ms;
}
.back-btn i {
  margin-right: 0.5rem;
}
.screen-container {
  position: relative;
  width: 100%;
  height: auto;
}
#app-screen-one {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-one.hide {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-two {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-two.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-external-rendering {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-external-rendering.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-external-rendering-screen-two {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-external-rendering-screen-two.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-external-rendering-screen-three {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-external-rendering-screen-three.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-external-rendering-screen-four {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-external-rendering-screen-four.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-external-rendering-screen-five {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-external-rendering-screen-five.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-external-rendering-screen-six {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-external-rendering-screen-six.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-external-rendering-screen-seven {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-external-rendering-screen-seven.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-external-rendering-screen-eight {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-external-rendering-screen-eight.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-external-wall-insulation {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-external-wall-insulation.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-external-wall-insulation-screen-two {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-external-wall-insulation-screen-two.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-external-wall-insulation-screen-three {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-external-wall-insulation-screen-three.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-external-wall-insulation-screen-four {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-external-wall-insulation-screen-four.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-external-wall-insulation-screen-five {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-external-wall-insulation-screen-five.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-external-wall-insulation-screen-six {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-external-wall-insulation-screen-six.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-external-wall-insulation-screen-seven {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-external-wall-insulation-screen-seven.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-roofing {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-roofing.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-roofing-screen-two {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-roofing-screen-two.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-roofing-screen-three {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-roofing-screen-three.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-roofing-screen-four {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-roofing-screen-four.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-roofing-screen-five {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-roofing-screen-five.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-roofing-screen-six {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-roofing-screen-six.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-roofing-screen-seven {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-roofing-screen-seven.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-roofing-screen-eight {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-roofing-screen-eight.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-roughcasting {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-roughcasting.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-roughcasting-screen-two {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-roughcasting-screen-two.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-roughcasting-screen-three {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-roughcasting-screen-three.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-roughcasting-screen-four {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-roughcasting-screen-four.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-roughcasting-screen-five {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-roughcasting-screen-five.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-roughcasting-screen-six {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-roughcasting-screen-six.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-roughcasting-screen-seven {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-roughcasting-screen-seven.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
#app-screen-roughcasting-screen-eight {
  display: none;
  opacity: 0;
  transform: translateX(100vw);
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  transition: 500ms;
}
#app-screen-roughcasting-screen-eight.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
  transition: 500ms;
}
.app-screen-two-service {
  padding: 1rem;
  margin-bottom: 2rem;
}
.app-screen-two-service:hover {
  cursor: pointer !important;
}
.app-screen-two-service h3 {
  font-family: 'Roboto', sans-serif;
  color: #ffffff;
  font-size: 1.4rem;
  font-weight: 900;
  margin-top: 1rem;
}
.app-screen-two-service img {
  width: 100%;
  height: auto;
}
#accred-logo {
  display: block;
  width: 80%;
  height: auto;
  padding-right: 10%;
  padding-left: 10%;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
@media(max-width: 768px) {
  #accred-logo {
    display: block;
    width: 80%;
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}