*{
box-sizing:border-box;
}
  /* mobile phones*/
  [class*="col-"]{
     width:100%;  
  }
  
@media only screen and (min-width:600px){
   /*Tablets*/
   .col-s-1{width:8.33%;}
   .col-s-2{width:16.66%;}
   .col-s-3{width:25%;}
   .col-s-4{width:33.33%;}
   .col-s-5{width:41.66%;}
   .col-s-6{width:50%}
   .col-s-7{width:58.33%;}
   .col-s-8{width:66.66%;}
   .col-s-9{width:75%;}
   .col-s-10{width:83.33%;}
   .col-s-11{width:91.66%}
   .col-s-12{width:100%}
}  
  
  
@media only screen and (min-width:768px){
  /*desk-top */
.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%}
}

[class*="col-"]{
   float:left;
   padding:15px;
   /*border:1px solid red;*/
}

.row::after{
   content:"";
   clear:both;
   display:table;
   }
   
html {
   font-family:"Lucida Sans",sans-serif;
   }

.header{
   background-color:#9933cc;
   color:#ffffff;
   padding:15px;
   }

.menu ul{
  list-style-type:none;
  margin:0;
  padding:0;
  }

.menu li{
  padding:8px;
  margin-bottom:7px;
  background-color:#33b5e5;
  color:#ffffff;
  box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  }

.menu li:hover{
  background-color:#0099cc;
  }   
  
  
.add_btn{
   background-color:#00BB00;
   border-radius:5px;
   width:60%;
}