.drawer {width: 300px;background:green;position: fixed;bottom: 0;right: 50px;z-index:1000}

.drawer_content { border-top: 1px dashed #fff;padding: 10px;}
.drawer h4 {margin: 0;padding: 14px;color: #fff;}
.drawer p {margin: 0 0 .5em;color: #fff;}
.drawer .icon {font-family:arial, helvtica, sans-serif;text-decoration:none;display:block ;height: 20px;width: 20px;border-radius: 20px;border: 2px solid #fff;text-align: center;line-height: 0px;position: absolute;right: 12px;top: 12px; color:#fff}
.drawer .icon.minus:after {content: "-"; top:9px;position:relative;}
.drawer .icon.plus:after {content: "+";top:10px;position:relative;}
.drawer .btn {display:inline-block; padding:7px 12px; background:#fff;text-decoration:none;border-radius:3px;color:#666;border:2px solid #fff;}
.drawer .btn:hover {color:green;border:2px solid #333}

.drawer .icon.plus {display:none;}
.drawer.hide .drawer_content {display:none;}
.drawer.hide .icon.minus {display:none;}
.drawer.hide .icon.plus {display:block;}




@media only screen and (min-width: 0px) and (max-width: 479px) {

.drawer {width:100%;right:0;}
 
  .drawer_content {display:none;}
.drawer .icon.plus {display:block;}
  .drawer.show .drawer_content {display:block}
  .drawer.show .icon.plus {display:none;}
  

}