body{
  background: #ff00ff;
}

.bgdiv{
  overflow: hidden;
}

.list{
  float: left;
  margin: 5px;
}

.title{
  text-align: center;
  margin:auto;
}

.thr{
  height: 5px;
  width: 90%;
  background-color: #ffff00;
  border: 0;
  color: #ff00ff;
  margin: 25 auto;
}

hr{
  height: 5px;
  width: 90%;
  background-color: #550055;
  border: 0;
  color: #ff00ff;
  margin: 25 auto;
}

@media screen and (orientation: landscape) {
  .box{
    position: relative;
    width: 30%;
    float: left;
    margin: 5px;
    left: 3.3%;
  }
}

@media screen and (orientation: portrait) {
  .box{
    position: relative;
    width: 45%;
    float: left;
    margin: 5px;
    left: 2.5%;
  }
}