Tab system does not work on mobile

I am creating a mobile site and in a certain part there is a system of tabs. The system is pure css that I found on the internet ... The problem is that when the site is viewed by the cell phone, the tabs do not work right. In iOS for example, neither comes to work .. already in some Androids, works and in others not.

HTML:

<div class="tabs" id="tabs-1">
    <input id="tab-1-1" name="tabs-group-1" type="radio" checked />
    <input id="tab-1-2" name="tabs-group-1" type="radio" />
    <input id="tab-1-3" name="tabs-group-1" type="radio" />

    <label for="tab-1-1">ABA 1</label>
    <label for="tab-1-2">ABA 2</label>
    <label for="tab-1-3">ABA 3</label>

    <!-- Aba 1 -->
    <div class="tab-content">
      CONTEUDO ABA 1
    </div>

    <!-- Aba 2 -->
    <div class="tab-content">
      CONTEUDO ABA 2
    </div>

    <!-- Aba 3 -->
    <div class="tab-content">
      CONTEUDO ABA 3
    </div>

CSS:

.tabs input[type='radio'] { display:none }
.tabs label {
  width:100px; text-align:center; padding:20px 0;
  color:#666666; font-size:2.1em; font-family:'DIN-Light'; background-color:#EEEEEE;
  display:inline-block;
  cursor:pointer;
}
.tab-content { display:none; background-color:#F3F3F3; border-top:6px #FE7B43 solid; width:300px; text-align:center; padding:50px 0; position:relative; }
#tabs-1 :checked + * + * + label { background-color:#FE7B43; color:#FFF; }
#tabs-1 :checked + * + * + * + * + * + .tab-content { display: block }

Online sample .

Does anyone know why this?