@import url('https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500|Marcellus');

::-webkit-scrollbar { 
    display: none; 
}

body
  {
  background-color: #000;
  scroll-behavior: smooth;
}

html {
  width: 100vw;
}

*,
:after,
:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

section {
  height: 100vh;
  width: 100%;
  display: table; 
}

.desc {
  top: 100vh;
  width: 100%;
}

.table {
  height: 100vh;
  width: 100%;
}

.title {
  position: absolute;
  z-index: 50;
  top: 43vh;
  width: 99vw;
  text-align: center;
}

.title h1 {
  color: white;
  font-family: Marcellus;
  font-size: 70px;
  font-weight: 300;
}

.title p {
  color: white;
  font-family: Roboto;
  font-size: 18px;
  font-weight: 100;
}

.title p a {
  color: #fff;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}

.title p a:hover {
  opacity: .9;
  text-shadow: 0px 0px 10px white, 0 0 5px white;
}

.imgbg {
  position: absolute;
  z-index: 0;
  top: -10vh;
  left: 0vw;
  width: 100vw;
}

.desctext {
  position: absolute;
  top: 107vh;
  left: 20vw;
}

.desctext p {
  color: #fff;
  width: 60vw;
  font-family: Roboto;
  font-size: 14px;
  font-weight: 300;
}

.desctext a {
  color: #fff;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
}

.desctext p a:hover {
  opacity: .9;
  text-shadow: 0px 0px 10px white, 0 0 5px white;
}

.marc {
  font-family: Marcellus;
}


.quotestats {
  position: absolute;
  top: 260vh;
  left: 55vw;
}

.quotestats p {
  color: #fff;
  width: 40vw;
  font-family: Roboto;
  font-size: 30px;
  font-weight: 300;
  text-shadow: 0px 0px 5px black, 0 0 2px black;
}


.statmlav {
  position: absolute;
  top: 308vh;
  left: 10vw;
}

.statmlav img {
  width: 80vw;
}

.quotechart {
  position: absolute;
  top: 305vh;
  left: 55vw;
}

.quotechart p {
  color: #fff;
  width: 40vw;
  font-family: Roboto;
  font-size: 30px;
  font-weight: 300;
  text-shadow: 0px 0px 5px black, 0 0 2px black;
}



.urhomecollage {
  position: absolute;
  top: 398vh;
  left: 15vw;
}

.urhomecollage img {
  width: 37vw;
}

.quotecollage {
  position: absolute;
  top: 420vh;
  left: 50vw;
}

.quotecollage p {
  color: #fff;
  width: 40vw;
  font-family: Roboto;
  font-size: 30px;
  font-weight: 300;
  text-shadow: 0px 0px 5px black, 0 0 2px black;
}



.cloudpoint {
  position: absolute;
  top: 510vh;
  right: 3vw;
}

.cloudpoint img {
  width: 50vw;
}

.urhomeplan {
  position: absolute;
  top: 515vh;
  left: 3vw;
}

.urhomeplan img {
  width: 40vw;
}

.quoteform {
  position: absolute;
  top: 550vh;
  left: 50vw;
}

.quoteform p {
  color: #fff;
  width: 40vw;
  font-family: Roboto;
  font-size: 30px;
  font-weight: 300;
  text-shadow: 0px 0px 5px black, 0 0 2px black;
}





.abouttext {
  position: absolute;
  top: 645vh;
  left: 20vw;
}

.abouttext p {
  color: #fff;
  width: 60vw;
  font-family: Roboto;
  font-size: 17px;
  font-weight: 200;
  text-align: center;
}

.abouttext p a {
  color: #fff;
  font-weight: 400;
}

.abouttext p a:hover {
  opacity: .9;
  text-shadow: 0px 0px 10px white, 0 0 5px white;
}

.images {
  top: 220vh;
}

.scroll-down {
  opacity: 1;
  -webkit-transition: all 1s ease-in 1s;
  transition: all 1s ease-in 1s;
  cursor: pointer;
}

.scroll-down {
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  border: 0px solid #FFF;
  background-size: 14px auto;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 5s infinite 5s;
  animation: bounce 5s infinite 5s;
  -webkit-transition: all 5s ease-in;
  transition: all 5s ease-in;
  transform: scale(1)
}

.scroll-down:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 1px solid white;
    border-width: 0px 0 1px 1px;
}

.scroll-down2 {
  opacity: 1;
  -webkit-transition: all 1s ease-in 1s;
  transition: all 1s ease-in 1s;
  cursor: pointer;
}

.scroll-down2 {
  position: absolute;
  top: 191vh;
  left: 50%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  border: 0px solid #FFF;
  background-size: 14px auto;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 5s infinite 5s;
  animation: bounce 5s infinite 5s;
  -webkit-transition: all 5s ease-in;
  transition: all 5s ease-in;
  transform: scale(1)
}

.scroll-down2:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 1px solid white;
    border-width: 0px 0 1px 1px;
}

.scroll-down3 {
  opacity: 1;
  -webkit-transition: all 1s ease-in 1s;
  transition: all 1s ease-in 1s;
  cursor: pointer;
}

.scroll-down3 {
  position: absolute;
  top: 291vh;
  left: 50%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  border: 0px solid #FFF;
  background-size: 14px auto;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 5s infinite 5s;
  animation: bounce 5s infinite 5s;
  -webkit-transition: all 5s ease-in;
  transition: all 5s ease-in;
  transform: scale(1)
}

.scroll-down3:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 1px solid white;
    border-width: 0px 0 1px 1px;
}

.scroll-down4 {
  opacity: 1;
  -webkit-transition: all 1s ease-in 1s;
  transition: all 1s ease-in 1s;
  cursor: pointer;
}

.scroll-down4 {
  position: absolute;
  top: 391vh;
  left: 50%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  border: 0px solid #FFF;
  background-size: 14px auto;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 5s infinite 5s;
  animation: bounce 5s infinite 5s;
  -webkit-transition: all 5s ease-in;
  transition: all 5s ease-in;
  transform: scale(1)
}

.scroll-down4:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 1px solid white;
    border-width: 0px 0 1px 1px;
}

.scroll-down5 {
  opacity: 1;
  -webkit-transition: all 5s ease-in 5s;
  transition: all 5s ease-in 5s;
  cursor: pointer;
}

.scroll-down5 {
  position: absolute;
  top: 491vh;
  left: 50%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  border: 0px solid #FFF;
  background-size: 14px auto;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 5s infinite 5s;
  animation: bounce 5s infinite 5s;
  -webkit-transition: all 5s ease-in;
  transition: all 5s ease-in;
  transform: scale(1)
}

.scroll-down5:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 1px solid white;
    border-width: 0px 0 1px 1px;
}

.scroll-down6 {
  opacity: 1;
  -webkit-transition: all 5s ease-in 5s;
  transition: all 5s ease-in 5s;
  cursor: pointer;
}

.scroll-down6 {
  position: absolute;
  top: 591vh;
  left: 50%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  border: 0px solid #FFF;
  background-size: 14px auto;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 5s infinite 5s;
  animation: bounce 5s infinite 5s;
  -webkit-transition: all 5s ease-in;
  transition: all 5s ease-in;
  transform: scale(1)
}

.scroll-down6:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 1px solid white;
    border-width: 0px 0 1px 1px;
}

.scroll-down7 {
  opacity: 1;
  -webkit-transition: all 3s ease-in 3s;
  transition: all 3s ease-in 3s;
  cursor: pointer;

}

.scroll-down7 {
  position: absolute;
  top: 680vh;
  left: 50%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  border: 0px solid #FFF;
  background-size: 14px auto;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 5s infinite 5s;
  animation: bounce 5s infinite 5s;
  -webkit-transition: all 5s ease-in;
  transition: all 5s ease-in;
  transform: scale(1);

}

.scroll-down7:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(135deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 1px solid white;
    border-width: 0px 0 1px 1px;
}

@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}

#text-display { 
z-index: 1000000;
position: fixed;
bottom: 10vh;
width: 90vw;
left: 50%;
-webkit-transform: translateX(0%) ;
-moz-transform: translateX(-50%) ;
transform: translateX(-50%) ;     
font-size: 20px;
line-height: 20px;
font-family: Roboto;
font-weight: 300;
letter-spacing: .1px;
text-transform: lowercase;
text-align: center;
color:  #fff400;
text-shadow: 2px 2px #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}