@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');



#tabs-nav section {
  display: none;
  padding: 20px 0 0;
}

#tabs-nav input {
  display: none;
}

#tabs-nav label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  padding-left: 60px;
  font-size: 18px;
  text-align: center;
  color: #828282;
  border: 1px solid #EAEAEA;
  position: relative;
  width: 23.26%;
}

#tabs-nav label {margin-right: 2%;}

#tabs-nav label.last-child {margin-right: 0;}


#tabs-nav label:before {
  width: 32px; height: 32px;
  content: " ";
  margin-right: 10px;
   position: absolute;
    left: 10px;
    top: 10px;
}

#tabs-nav label[for*='1']:before { background: url(../image/cosmetics.svg); }
#tabs-nav label[for*='2']:before { background: url(../image/cooking.svg); }
#tabs-nav label[for*='3']:before { background: url(../image/washing-machine.svg); }
#tabs-nav label[for*='4']:before { background: url(../image/dish.svg); }

#tabs-nav label:hover[for*='1']:before, #tabs-nav input:checked + label[for*='1']:before {background: url(../image/cosmetics-active.svg);}
#tabs-nav label:hover[for*='2']:before, #tabs-nav input:checked + label[for*='2']:before { background: url(../image/cooking-active.svg); }
#tabs-nav label:hover[for*='3']:before, #tabs-nav input:checked + label[for*='3']:before  { background: url(../image/washing-machine-active.svg); }
#tabs-nav label:hover[for*='4']:before, #tabs-nav input:checked + label[for*='4']:before  { background: url(../image/dish-active.svg); }


#tabs-nav label:hover {
  color: #ffffff;
  cursor: pointer;
  background-color: #D2232A;
  box-shadow: 0px 5px 0px 0px #951316;
  border: none;
  padding: 13px 25px;
}

#tabs-nav input:checked + label {
  color: #ffffff;
  background-color: #D2232A;
  box-shadow: 0px 5px 0px 0px #951316;
  border: none;
  padding: 13px 25px;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
  display: block;
}

@media screen and (max-width: 650px) {
  #tabs-nav label {
    font-size: 0;
  }
  #tabs-nav label:before {
    margin: 0;
    font-size: 18px;
  }
}

@media screen and (max-width: 400px) {
  #tabs-nav label {
    padding: 15px;
  }
}