@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
*, *:before, *:after {  margin: 0;  padding: 0;  box-sizing: border-box;}

#producttab{  margin-top:2em;}
#producttab main { min-width: 300px;  max-width:100%;  margin: 0 auto;}
#producttab section {  display: none; padding: 20px; min-height:15em; border: 1px solid #ddd; background:#FFF;}
#producttab input { display: none;}
#producttab label {  display: inline-block; margin: 0 0 -1px; padding: 15px 25px 15px 20px; font-weight: bold; text-align: center; color: #bbb; border: 1px solid transparent;}
#producttab label:before { font-family: fontawesome; font-weight: normal; margin-right: 10px;}
#producttab label[for*='1']:before { content: '\f03a';}
#producttab label[for*='2']:before { content: '\f1c1';}
label:hover { color: #888; cursor: pointer;}
#producttab input:checked + label {color: #333; border: 1px solid #ddd; border-top: 4px solid #cc9f0c; background:#FFF; border-bottom:1px solid #fff;}
#producttab  #tab1:checked ~ #content1,#producttab  #tab2:checked ~ #content2{  display: block;}

@media screen and (max-width: 650px) {
#producttab   label { font-size: 0; }
#producttab   label:before {margin: 0; font-size: 18px; }
}
@media screen and (max-width: 400px) {
#producttab   label {padding: 15px;}
}