/*sets background on body for index3 html*/

div#backdrop .col-sm-12#back-image { 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left;
  background-color: #000000;
  background-image: url(/assets/backdrop8.jpg);
  max-width: 100%;
  overflow-x: hidden;

}
@media (min-width:768px) and (max-width:3024px){
div#backdrop .col-sm-12#back-image { 
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
  background-color: #000000;
  background-image: url(/assets/backdrop8.jpg);
  max-width: 100%;
  overflow-x: hidden;
}}

/* enables background-image changes based on how far the user scrollsdown the page */
/*
body {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image:url(/assets/backdrop4.jpeg);
    background-color: #000000;
    max-width: 100%;
}


body.scrolled {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image:url(/assets/backdrop5.jpeg);
    background-color: #000000;
    max-width: 100%;
}

body.scrolled.scroll1 { 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image:url(/assets/backdrop4.jpeg);
    background-color: #000000;
    max-width: 100%;
}

body.scrolled.scroll2 { 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image:url(/assets/backdrop4.jpeg);
    background-color: #000000;
    max-width: 100%;
}
*/