/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  #box{
    width:35%;
      border: 1px solid rgb(200, 200, 200);
      box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
      background: rgba(200, 200, 200, 0.1);
      border-radius: 4px;
      margin-top:1%;
      margin-left:5%;
  }
  #box2{
    width:40%;
      border: 1px solid rgb(200, 200, 200);
      box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
      background: rgba(200, 200, 200, 0.1);
      border-radius: 4px;
      margin-top:1%;
      height:54%;
        margin-left:10%;
  }

  #box3{
    width:80%;
      border: 1px solid rgb(200, 200, 200);
      box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
      background: rgba(200, 200, 200, 0.1);
      border-radius: 4px;
      margin-top:1%;
        margin-bottom:4%;
      margin-left:10%;
      background-color:white;
      height:36%;

  }

}

/*
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {
  #box{
    width:35%;
      border: 1px solid rgb(200, 200, 200);
      box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
      background: rgba(200, 200, 200, 0.1);
      border-radius: 4px;
      margin-top:1%;
      margin-left:5%;
  }
  #box2{
    width:40%;
      border: 1px solid rgb(200, 200, 200);
      box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
      background: rgba(200, 200, 200, 0.1);
      border-radius: 4px;
      margin-top:1%;
      height:54%;
        margin-left:10%;
  }

  #box3{
    width:80%;
      border: 1px solid rgb(200, 200, 200);
      box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
      background: rgba(200, 200, 200, 0.1);
      border-radius: 4px;
      margin-top:1%;
        margin-bottom:5%;
      margin-left:10%;
      background-color:white;
      height:36%;

  }
}

/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {
  #box{
      border: 1px solid rgb(200, 200, 200);
      box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
      background: rgba(200, 200, 200, 0.1);
      border-radius: 4px;
      margin-top:1%;

      margin-left:0%;
  }
  #box2{
      border: 1px solid rgb(200, 200, 200);
      box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
      background: rgba(200, 200, 200, 0.1);
      border-radius: 4px;
      margin-top:1%;
      width:100%;
      margin-left:0%;
      height:40%;

  }
  #box3{
    width:100%;
      border: 1px solid rgb(200, 200, 200);
      box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
      background: rgba(200, 200, 200, 0.1);
      border-radius: 4px;
      margin-top:1%;
        margin-bottom:4%;
      margin-left:0%;
      background-color:white;
      height:36%;

  }

}

/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  #box{
      border: 1px solid rgb(200, 200, 200);
      box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
      background: rgba(200, 200, 200, 0.1);
      border-radius: 4px;
      margin-top:1%;
      margin-bottom: 8%;
      margin-left:1%;
  }
  #box2{
      border: 1px solid rgb(200, 200, 200);
      box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
      background: rgba(200, 200, 200, 0.1);
      border-radius: 4px;
      margin-top:1%;
      width:98%;
      margin-left:1%;
      height:40%;

  }
  #box3{
    width:50%;
      border: 1px solid rgb(200, 200, 200);
      box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
      background: rgba(200, 200, 200, 0.1);
      border-radius: 4px;
      margin-top:1%;
        margin-bottom:4%;
      margin-left:10%;
      background-color:white;
      height:36%;

  }

}
/*
  ##Device = latops (landscape)
  ##Screen = B/w 1280px
*/

@media (min-width: 1280px) and (max-width:1280px) and (orientation: landscape) {

}

/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 960px to 1024px
*/

@media (min-width: 960px) and (max-width: 960px) and (orientation: landscape) {
  #box{
      border: 1px solid rgb(200, 200, 200);
      box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
      background: rgba(200, 200, 200, 0.1);
      border-radius: 4px;
      margin-top:1%;
      margin-left:20% ;
      width: 80%;
  }

  #box2{
      border: 1px solid rgb(200, 200, 200);
      box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
      background: rgba(200, 200, 200, 0.1);
      border-radius: 4px;
      margin-top:1%;
      margin-left:20% ;
      width: 80%;
  }


  #footer{
    margin-bottom: -180px;
  }

}

/*
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {
  #box{
      border: 1px solid rgb(200, 200, 200);
      box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
      background: rgba(200, 200, 200, 0.1);
      border-radius: 4px;
      margin-top:5%;

      margin-left:0%;
  }
  #box2{
      border: 1px solid rgb(200, 200, 200);
      box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
      background: rgba(200, 200, 200, 0.1);
      border-radius: 4px;
      margin-top:1%;
      width:100%;
      margin-left:0%;
      height:40%;

  }



}

/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {
  #box{
      border: 1px solid rgb(200, 200, 200);
      box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
      background: rgba(200, 200, 200, 0.1);
      border-radius: 4px;
      margin-top:1%;
      margin-left:0%;
  }

  #box2{
      border: 1px solid rgb(200, 200, 200);
      box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
      background: rgba(200, 200, 200, 0.1);
      border-radius: 4px;
      margin-top:1%;
      width:100%;
      margin-left:0%;
      height:40%;
  }




}