@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
@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;
}

/*html, body {
  height: 100vh;
}

body {
  display:flex;
  align-items:left ;
  justify-content: center;
  padding: 0px;
  font: 14px/1.5 'Open Sans',sans-serif;
  color: #345;
  background: #f0f2f4;
}

p:not(:last-child) {
  margin: 0 0 20px;
}*/

main {
    /*max-width: 800px;*/
    /*padding: 40px;*/
    border: 0px solid rgba(0, 0, 0, 0.2);
    background: #fff;
    /*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);*/
}

mysection {
    display: none;
    padding: 20px 0 0;
    border-top: 1px solid #abc;
}

input {
    display: none;
}

label {
    display: inline-block;
    margin: 0 0 -1px;
    padding: 15px 25px;
    font-weight: 600;
    text-align: center;
    color: #fff;
    border: 1px solid transparent;
    background-color: #0C2340;
    font-size: 16px;
}

    label:before {
        font-family: fontawesome;
        font-weight: normal;
        margin-right: 10px;
    }

    /*
label[for*='1']:before {
  content: '\f1cb';
}

label[for*='2']:before {
  content: '\f17d';
}

label[for*='3']:before {
  content: '\f16c';
}

label[for*='4']:before {
  content: '\f171';
}
*/

    label:hover {
        color: #fff;
        cursor: pointer;
        background-color: #EE2737;
    }

input:checked + label {
    color: #fff;
    border: 1px solid #abc;
    /*border-top: 2px solid #0af;*/
    border-bottom: 1px solid #fff;
    background-color: #EE2737;
}

#tabadu1:checked ~ #content1,
#tabadu2:checked ~ #content2,
#tabadu3:checked ~ #content3,
#tabadu4:checked ~ #content4 {
    display: block;
}

@media screen and (max-width: 800px) {
    label {
        font-size: 14px;
    }

        label:before {
            margin: 0;
            font-size: 18px;
        }
}

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