h1 {padding: 100px 0; font-weight: 400; text-align: center;}
p {margin: 0 0 20px; line-height: 1.5;}

.main {margin: 0 auto; min-width: 320px;}
.content {background: inherit; color: #373737;}
.content > div {display: none; padding: 20px 25px 5px;}

input {display: none;}
label {display: inline-block; padding: 15px 24px; font-weight: 600; text-align: center; color:black;}
label:hover {color: grey; cursor: pointer;}
input:checked + label {background: #00aae3; color: #fff;}
input:checked + label > h3{background: #00aae3; color: #fff;}
#tab1:checked ~ .content #content1,
#tab2:checked ~ .content #content2,
#tab3:checked ~ .content #content3,
#tab4:checked ~ .content #content4 {
  display: block;
}

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