body{
    background: url(img/backgrounds/ricepaper.png);
}

#collage img{
  height: auto;
  float: left;
  padding: 0;
  margin: 2px;
  -webkit-box-shadow: 10px 10px 10px -10px black;
  -moz-box-shadow: 10px 10px 10px -10px black;
  box-shadow: 10px 10px 10px -10px black;
}

h2{
  text-align: center;
  font-size: x-large;
  padding-bottom: 20px;
}

p{
	text-align: left;
}

#wrapper{
  height: auto;
  margin: 0;
  padding: 0;
  
}

#sideBar{
  padding: 150px 30px 80px 30px;
  background-color: #f6f9fb;
  -webkit-box-shadow: 10px 0 10px -10px black;
  -moz-box-shadow: 10px 0 10px -10px black;
  box-shadow: 10px 0 10px -10px black;
}

#collage{
  height: auto;
  margin-bottom: 40px;
}

#sideBar, #sideBar a{
  color: #657078;
}

#sideBar a:hover{
  color: #547e3d;
}


/* --------------------------------------------- MEDIA QUERIES --------------------------------------------- */

@media (max-width: 770px){
    #sideBar{
      height: auto;
    }

    #collage img{
      width: 99%;
    }

    #sideBar{
      margin-bottom: 5px;
      -webkit-box-shadow: 0px 10px 10px -10px black;
      -moz-box-shadow: 0px 10px 10px -10px black;
      box-shadow: 0px 10px 10px -10px black;
    }
}

@media (min-width: 770px){
  #sideBar{
    position: fixed;
    height: 100%;
    width: 30%;
  }

  #collage{
    margin-left: 30.5%;
  }

  #collage img{
      width: 49%; 
    }
}

@media (min-width: 1000px) {
  #sideBar{
    width: 20%;
  }

  #collage{
  margin-left: 20.5%;
  }

  #collage img{
      width: 49.5%;
    }
}