header{
  background-color: #b50000;
  width:100%;
}
.navbar {
    background-color: #b50000;
    width:100%;
    height: 10em;
    margin: auto;
    padding: 0 0 0 0px;
    border: 0 0 0 0px;
  }
.navbar ul {
    text-align: center;
    vertical-align: middle;
    line-height: 10em;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-padding-start: 0px;
  }
  .navbar li {
      display: inline;
      font-size: 1.7em;
      text-align: center;
      padding-right: .5em;
  }
  .navbar a {
    color: white;
    text-transform: uppercase;
    font-family: Arial, sans-serif;
  }
  .navbar a:hover {
    color: black;
    background-color: #b50000;
  }
.header-img {
  height: 10em;
}
.main-image{
  height: 6em;
}
.hero {
  height:8em;
  width: 100%;
  max-width:1200px;
  font-size: 2em;
  text-align: center;
}
.fl-l {float:left;}
.fl-r {float: right;}
.cl-b {clear:both;}

.main-list{
  width:100%;
  max-width:1200px;
  margin:auto;
}
.list-header {
  display:table;
  text-align: center;
  font-size: 1.4em;
  width:100%;
}
.items-list {
  display:table;
  text-align: center;
  font-size: 1.2em;
  width:100%;
}
/*Table header formmating*/
.cellb {display:table-cell; vertical-align: middle; border-top:1px solid; border-bottom: 1px solid; border-left: 1px solid; padding: 5 5 5 5; float:left; height:100px;}
.cellnb {display:table-cell; vertical-align: middle; padding: 5 5 5 5; background-color: #cc0000; color:#ffffff;}

.h-checkbox{width:10%;}
.h-image{width:15%;}
.h-item{width:35%;}
.h-quantR{width:10%;}
.h-quant0{width:10%;}
.h-price{width:20%;}
/*Table Items formatting*/
.checkbox{width:10%;}
.image{width:15%;}
.item{width:35%;}
.quantR{width:10%;}
.quant0{width:10%;}
.price{width:20%;border-right: 1px solid;}

.item-checkbox{font-size: 5em; transform:scale(1.5);}
.item-image{height:100px; width: 100px; display:block; margin:auto;}
.pd-l {padding-left: 4em;}
.pd-r {padding-right: 4em;}
/*GRID DIMMENSIONS*/
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

.button{
  position: relative;
  display: block;
  font-size: 1.5em;
  color: white;
  width: 30%;
  margin:auto;
  height: 50px;
  opacity: 0.8;
  background-color: #cc0000;
}
.button:hover{
  opacity: 1;
  background-color: #b50000;
}
.button-teacher{
  position: relative;
  display: block;
  font-size: 2em;
  width: 25%;
  margin:auto;
  height: 50px;
  opacity: 0.8;
  background-color: gray;
  color: #000000;
}
.donate{
  font-size: 1em;
  background-color: green;
}
.button-teacher:hover{
  opacity: 1;
  background-color: #gray;
}
.actions {display:inline;
margin: auto}