Пустое пространство справа

252

13 июля 2017, 00:35

Есть такой табличный элемент: https://jsfiddle.net/hgfmu6ws/

@import url('https://fonts.googleapis.com/css?family=Open+Sans&subset=cyrillic'); 
@font-face { 
  font-family: NorthwoodHigh; 
  /* Vainglory Font */ 
  src: url(../fonts/NorthwoodHigh.ttf); 
} 
 
@font-face { 
  font-family: roboto; 
  /* Roboto Font */ 
  src: url(../fonts/roboto.ttf); 
} 
 
body { 
  background-image: url(../img/minionsplayingVG.jpg); 
  background-size: 100%; 
  margin: 0; 
  padding: 0; 
} 
 
.her { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  width: 100%; 
  padding-top: 1em; 
  background: rgba(0%, 0%, 0%, 0.8); 
} 
 
@media (min-width:768px) { 
  .her { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    margin-left: 18%; 
    width: 60%; 
    padding: 2em; 
    background: rgba(0%, 0%, 0%, 0.8); 
  } 
} 
 
 
/* Heroes Style */ 
 
.heroes { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-orient: horizontal; 
  -webkit-box-direction: normal; 
  -ms-flex-direction: row; 
  flex-direction: row; 
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap; 
  -webkit-box-pack: center; 
  -ms-flex-pack: center; 
  justify-content: center; 
} 
 
.flipc { 
  -webkit-perspective: 1000; 
  perspective: 1000; 
  display: inline-block; 
  margin: 0 0.5em; 
} 
 
.flipc:hover .flipper { 
  -webkit-transform: rotateY(180deg); 
  transform: rotateY(180deg); 
} 
 
.flipc, 
.front, 
.back { 
  width: 8em; 
  height: 12em; 
  -webkit-clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
  clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
} 
 
.flipper { 
  -webkit-transition: 0.4s; 
  transition: 0.4s; 
  -webkit-transform-style: preserve-3d; 
  transform-style: preserve-3d; 
  position: relative; 
} 
 
.front, 
.back { 
  -webkit-backface-visibility: hidden; 
  backface-visibility: hidden; 
  position: absolute; 
} 
 
.back { 
  -webkit-transform: rotateY(180deg); 
  transform: rotateY(180deg); 
} 
 
.hex { 
  display: inline-block; 
  width: 8em; 
  height: 12em; 
  ; 
  background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(grey)); 
  ; 
  background-image: linear-gradient(to bottom, white 0%, grey 100%); 
  -webkit-box-shadow: inset 10px 50px 100px rgba(0, 0, 0, 0.9); 
  box-shadow: inset 10px 50px 100px rgba(0, 0, 0, 0.9); 
  -webkit-clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
  clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
} 
 
.hexin { 
  position: absolute; 
  top: 2%; 
  left: 2%; 
  width: 96%; 
  height: 96%; 
  background: url(../img/heroes/Backface.jpg); 
  -webkit-clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
  clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
  font-family: NorthwoodHigh; 
  color: aliceblue; 
} 
 
.hexin p { 
  padding: 1em 0.2em; 
  font-size: 1.5em; 
  text-align: center; 
  -webkit-box-pack: center; 
  -ms-flex-pack: center; 
  justify-content: center; 
} 
 
.hexin p img { 
  width: 26%; 
  margin: 10px 4px 0 4px; 
} 
 
.heroname { 
  position: absolute; 
  display: inline; 
  right: 0; 
  padding: 0 5px 0 0; 
  top: 55%; 
  background: rgba(0%, 0%, 0%, 0.7); 
  color: aliceblue; 
  font-size: 1.5em; 
} 
 
 
/* Heroes Style End */ 
 
#hero1 { 
  display: flex; 
  flex-direction: column; 
  width: 100%; 
} 
 
.heroh { 
  background: rgba(0%, 0%, 0%, 0.5); 
  margin: 0.5em 0; 
  border-radius: 6px; 
  font-family: 'Open Sans', sans-serif; 
  font-size: 2em; 
  text-align: center; 
  color: white; 
} 
 
.herocont { 
  font-family: NorthwoodHigh; 
  font-size: 1em; 
  color: aliceblue; 
} 
 
.herocarousel { 
  width: 100%; 
  height: 5.5em; 
  white-space: nowrap; 
  overflow-x: auto; 
  overflow-y: hidden; 
  -webkit-overflow-scrolling: touch; 
  ms-overflow-style: none; 
} 
 
.heroprl { 
  position: relative; 
  display: inline-flex; 
  top: 1%; 
  left: 1%; 
  height: 98%; 
  width: 98%; 
  -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); 
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); 
} 
 
.herocarousel::-webkit-scrollbar { 
  display: none; 
} 
 
.bord { 
  display: inline-flex; 
  background-image: linear-gradient(to bottom, white 0%, grey 100%); 
  height: 5em; 
  width: 5em; 
  margin: 0 -8px 0 0; 
  -webkit-box-shadow: inset 30px 50px 90px rgba(0, 0, 0, 0.9); 
  box-shadow: inset 30px 50px 90px rgba(0, 0, 0, 0.9); 
  -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); 
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); 
} 
 
.bord:hover { 
  transform: translate(0, 6px); 
  /*-webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1); 
        transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);*/ 
} 
 
.heroallw { 
  display: inline-flex; 
  flex-direction: row; 
  justify-content: center; 
  flex-wrap: wrap; 
} 
 
.herow { 
  position: relative; 
  display: inline-block; 
  overflow: hidden; 
  height: 6em; 
  width: 14em; 
  margin: 4px; 
  border: 1px solid blue; 
} 
 
.herowrare { 
  position: relative; 
  display: inline-block; 
  overflow: hidden; 
  height: 6em; 
  width: 100%; 
  margin: 4px; 
  border-radius: 2px; 
} 
 
@media (min-width:500px) { 
  .herowrare { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 14em; 
    margin: 4px; 
    border-radius: 2px; 
  } 
} 
 
.herowepic { 
  position: relative; 
  display: inline-block; 
  overflow: hidden; 
  height: 6em; 
  width: 100%; 
  margin: 4px; 
  border-radius: 2px; 
} 
 
@media (min-width:500px) { 
  .herowepic { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 14em; 
    margin: 4px; 
    border-radius: 2px; 
  } 
} 
 
.herowlegendary { 
  position: relative; 
  display: inline-block; 
  overflow: hidden; 
  height: 6em; 
  width: 100%; 
  margin: 4px; 
  border-radius: 2px; 
} 
 
@media (min-width:500px) { 
  .herowlegendary { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 14em; 
    margin: 4px; 
    border-radius: 2px; 
  } 
} 
 
.herowsele { 
  position: relative; 
  display: inline-block; 
  overflow: hidden; 
  height: 6em; 
  width: 100%; 
  margin: 4px; 
  border-radius: 2px; 
} 
 
@media (min-width:500px) { 
  .herowsele { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 14em; 
    margin: 4px; 
    border-radius: 2px; 
  } 
} 
 
.heroallw img { 
  position: relative; 
  width: 100%; 
} 
 
.herowrare .ImageCaption { 
  font-size: 1em; 
  position: absolute; 
  bottom: 0em; 
  width: 100%; 
  padding: 4px; 
  text-align: center; 
  background: rgba(0%, 40%, 100%, 0.3); 
  color: white; 
} 
 
.herowepic .ImageCaption { 
  font-size: 1em; 
  position: absolute; 
  bottom: 0em; 
  width: 100%; 
  padding: 4px; 
  text-align: center; 
  background: rgba(41%, 0%, 73%, 0.3); 
  color: white; 
} 
 
.herowlegendary .ImageCaption { 
  font-size: 1em; 
  position: absolute; 
  bottom: 0em; 
  width: 100%; 
  padding: 4px; 
  text-align: center; 
  background: rgba(96%, 91%, 4%, 0.3); 
  color: white; 
} 
 
.herowsele .ImageCaption { 
  font-size: 1em; 
  position: absolute; 
  bottom: 0em; 
  width: 100%; 
  padding: 4px; 
  text-align: center; 
  background: rgba(100%, 0%, 0%, 0.3); 
  color: white; 
} 
 
 
/*------------------------------------------*/ 
 
.preutx { 
  position: relative; 
  display: flex; 
  flex-direction: row; 
  justify-content: center; 
  flex-wrap: wrap; 
  background-color: rgba(0%, 0%, 0%, 0.5); 
  padding: 6px; 
  border-radius: 6px; 
} 
 
.presen { 
  display: none; 
} 
 
@media (min-width:1400px) { 
  .presen { 
    display: block; 
    width: 200px; 
    height: 144px; 
    margin-right: 2em; 
  } 
} 
 
.preutx p { 
  font-family: 'Open Sans', sans-serif; 
  color: white; 
  padding: 4px 10px; 
} 
 
.preutx table { 
  font-family: 'Open Sans', sans-serif; 
  color: white; 
} 
 
.preutx table td { 
  background: rgba(53%, 53%, 53%, 0.1); 
  padding: 5px 10px; 
  color: white; 
  font-size: 0.7em; 
  border-radius: 4px; 
} 
 
@media (min-width:500px) { 
  .preutx table td { 
    background: rgba(53%, 53%, 53%, 0.1); 
    padding: 5px 10px; 
    font-size: 1em; 
    color: white; 
    border-radius: 4px; 
  } 
} 
 
.preutx table td:nth-child(2n+2) { 
  background: rgba(53%, 53%, 53%, 0.1); 
  color: white; 
  text-align: center; 
} 
 
.utx { 
  position: relative; 
  display: block; 
  width: 100%; 
  font-family: 'Open Sans', sans-serif; 
  font-size: 0.8em; 
  color: white; 
  margin-left: 1vh; 
} 
 
@media (min-width:500px) { 
  .utx { 
    position: relative; 
    display: block; 
    width: 200px; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 0.8em; 
    color: white; 
    margin-left: 1vh; 
  } 
} 
 
.abl { 
  position: relative; 
  background-color: rgba(10%, 10%, 10%, 0.8); 
  width: 96%; 
  height: 15px; 
  padding: 1%; 
  margin: 0.5em 0; 
} 
 
@media (min-width:500px) { 
  .abl { 
    background-color: rgba(10%, 10%, 10%, 0.8); 
    width: 170px; 
    height: 15px; 
    padding: 5px; 
    margin: 0.5em 0; 
  } 
} 
 
.abl span { 
  display: inline-block; 
  height: 100%; 
} 
 
.ablfl span { 
  background-color: #ba3030; 
} 
 
section { 
  transition-property: all; 
  position: relative; 
  display: flex; 
  opacity: 0; 
  height: 0; 
  width: 100%; 
} 
 
section img { 
  float: left; 
  opacity: 0; 
  height: 6vh; 
  width: 6vh; 
} 
 
input { 
  display: none; 
} 
 
label { 
  display: block; 
  width: 50px; 
  height: 50px; 
  padding: 2px; 
  margin: 2px; 
  background-color: #141414; 
} 
 
label img { 
  position: relative; 
  width: 50px; 
  height: 50px; 
  filter: grayscale(0.9); 
} 
 
label img:hover { 
  filter: grayscale(0); 
} 
 
label:hover { 
  color: #888; 
  cursor: pointer; 
} 
 
input:checked + label img { 
  filter: grayscale(0); 
} 
 
#tab1:checked ~ #content1, 
#tab2:checked ~ #content2, 
#tab3:checked ~ #content3, 
#tab4:checked ~ #content4 { 
  transition-property: all; 
  transition: opacity 0.3s ease-in; 
  display: flex; 
  flex-wrap: wrap; 
  height: auto; 
  margin-top: 4px; 
  font-family: 'Open Sans', sans-serif; 
  color: white; 
  opacity: 1; 
  padding: 1em; 
} 
 
#tab1:checked ~ #content1 img, 
#tab2:checked ~ #content2 img, 
#tab3:checked ~ #content3 img, 
#tab4:checked ~ #content4 img { 
  float: left; 
  opacity: 1; 
  height: 6vh; 
  width: 6vh; 
} 
 
.ch { 
  position: relative; 
  left: 0.4em; 
  display: block; 
  font-size: 1em; 
} 
 
.chl { 
  position: relative; 
  left: 0.6em; 
  top: 0.3em; 
  display: block; 
  font-size: 0.7em; 
} 
 
.chcont { 
  position: relative; 
  display: block; 
  margin-top: 1em; 
} 
 
section table { 
  text-align: center; 
  margin-top: 1em; 
  font-size: 0.4em; 
} 
 
@media (min-width:400px) { 
  section table { 
    text-align: center; 
    margin-top: 1em; 
    font-size: 0.6em; 
  } 
} 
 
@media (min-width:570px) { 
  section table { 
    text-align: center; 
    margin-top: 1em; 
    font-size: 1em; 
  } 
} 
 
section td { 
  background: rgba(53%, 53%, 53%, 0.1); 
  color: white; 
  border-radius: 4px; 
} 
 
section td:nth-child(2n+2) { 
  background: rgba(64%, 64%, 64%, 0.1); 
  color: white; 
} 
 
section td:nth-child(1) { 
  text-align: left; 
} 
 
section td.ss { 
  background: rgba(39%, 37%, 100%, 0.5); 
} 
 
section td.ss2 { 
  background: rgba(100%, 37%, 37%, 0.5); 
} 
 
.updyn { 
  position: absolute; 
  display: block; 
  margin: 3px; 
  padding: 0.4em; 
  right: 6px; 
  border-radius: 4px; 
  background: rgba(35%, 35%, 35%, 0.5); 
  font-size: 0.4em; 
  font-family: 'Open Sans', sans-serif; 
  color: white; 
} 
 
@media (min-width:430px) { 
  .updyn { 
    position: absolute; 
    display: block; 
    margin: 3px; 
    padding: 0.4em; 
    right: 6px; 
    border-radius: 4px; 
    background: rgba(35%, 35%, 35%, 0.5); 
    font-size: 1em; 
    font-family: 'Open Sans', sans-serif; 
    color: white; 
  } 
} 
 
.prebuildh { 
  position: relative; 
  display: inline-flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  background: rgba(0%, 0%, 0%, 0.5); 
  padding: 15px; 
} 
 
.buildh { 
  display: inline-flex; 
  background: rgba(100%, 37%, 37%, 0.5); 
  padding: 6px; 
  margin: 10px; 
  border-radius: 6px; 
} 
 
.prebuildh .buildh img { 
  width: 25px; 
  height: 25px; 
  padding: 0 1px; 
} 
 
@media (min-width:350px) { 
  .prebuildh .buildh img { 
    width: 30px; 
    height: 30px; 
    padding: 0 2px; 
  } 
} 
 
@media (min-width:700px) { 
  .prebuildh .buildh img { 
    width: 50px; 
    height: 50px; 
    padding: 0 5px; 
  } 
} 
 
.buildh2 { 
  display: inline-flex; 
  background: rgba(39%, 37%, 100%, 0.5); 
  padding: 6px; 
  margin: 10px; 
  border-radius: 6px; 
} 
 
.prebuildh .buildh2 img { 
  width: 30px; 
  height: 30px; 
  padding: 0 5px; 
} 
 
@media (min-width:500px) { 
  .prebuildh .buildh2 img { 
    width: 50px; 
    height: 50px; 
    padding: 0 5px; 
  } 
}

<div class="heroh">Способности</div> 
<div class="preutx"> 
  <input id="tab1" type="radio" name="tabs" checked> 
  <label for="tab1"><img src="img/heroes/Ringo/double-down.png"></label> 
  <input id="tab2" type="radio" name="tabs"> 
  <label for="tab2"><img src="img/heroes/Ringo/achilles-shot.png"></label> 
  <input id="tab3" type="radio" name="tabs"> 
  <label for="tab3"><img src="img/heroes/Ringo/twirling-silver.png"></label> 
  <input id="tab4" type="radio" name="tabs"> 
  <label for="tab4"><img src="img/heroes/Ringo/hellfire-brew.png"></label> 
  <!-- Content --> 
  <section id="content1"> 
    <img src="img/heroes/Ringo/double-down.png"> 
    <div> 
      <div class="ch">Double Down (Ва-Банк)</div> 
      <div class="chl">Умение героя</div> 
    </div> 
    <div class="chcont">Следующая базовая атака Ринго после убийства любого противника будет критическим ударом.</div> 
  </section> 
  <section id="content2"> 
    <img src="img/heroes/Ringo/achilles-shot.png"> 
    <div class="updyn">Патч 2.5</div> 
    <div> 
      <div class="ch">Achilles Shot (Ахиллесов выстрел)</div> 
      <div class="chl">A-Skill</div> 
    </div> 
    <div class="chcont">Ринго стреляет в пятку своей цели (или другую нижнюю конечность), замедляя ее и нанося урон. 
      <table> 
        <tr> 
          <td>Характеристики</td> 
          <td>LVL 1</td> 
          <td>LVL 2</td> 
          <td>LVL 3</td> 
          <td>LVL 4</td> 
          <td>LVL 5</td> 
          <td class="ss">% от кристалла</td> 
          <td class="ss2">% от оружия</td> 
        </tr> 
        <tr> 
          <td>Восстановление</td> 
          <td>9</td> 
          <td>8.5</td> 
          <td>8</td> 
          <td>7.5</td> 
          <td>7</td> 
          <td></td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Расход энергии</td> 
          <td>40</td> 
          <td>850</td> 
          <td>60</td> 
          <td>70</td> 
          <td>100</td> 
          <td></td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Урон</td> 
          <td>80</td> 
          <td>125</td> 
          <td>170</td> 
          <td>215</td> 
          <td>350</td> 
          <td class="ss">125%</td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Замедление</td> 
          <td>30%</td> 
          <td>35%</td> 
          <td>40%</td> 
          <td>45%</td> 
          <td>50%</td> 
          <td></td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Длительность замедления</td> 
          <td>1.5</td> 
          <td>1.5</td> 
          <td>1.5</td> 
          <td>1.5</td> 
          <td>2.5</td> 
          <td></td> 
          <td></td> 
        </tr> 
      </table> 
    </div> 
  </section> 
  <section id="content3"> 
    <img src="img/heroes/Ringo/twirling-silver.png"> 
    <div class="updyn">Патч 2.5</div> 
    <div> 
      <div class="ch">Twirling Silver (Серебряный вихрь)</div> 
      <div class="chl">B-Skill</div> 
    </div> 
    <div class="chcont">Ринго ведет сумасшедший огонь по своей цели, значительно увеличивая скорость атаки и перемещения на время действия умения. 
      <p>При активации сбрасывается восстановление базовой атаки.</p> 
      <table> 
        <tr> 
          <td>Характеристики</td> 
          <td>LVL 1</td> 
          <td>LVL 2</td> 
          <td>LVL 3</td> 
          <td>LVL 4</td> 
          <td>LVL 5</td> 
          <td class="ss">% от кристалла</td> 
          <td class="ss2">% от оружия</td> 
        </tr> 
        <tr> 
          <td>Восстановление</td> 
          <td>9</td> 
          <td>9</td> 
          <td>9</td> 
          <td>9</td> 
          <td>9</td> 
          <td></td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Расход энергии</td> 
          <td>50</td> 
          <td>55</td> 
          <td>60</td> 
          <td>65</td> 
          <td>70</td> 
          <td></td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Урон</td> 
          <td>0</td> 
          <td>0</td> 
          <td>0</td> 
          <td>0</td> 
          <td>0</td> 
          <td class="ss">80%</td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Длительность</td> 
          <td>6</td> 
          <td>6</td> 
          <td>6</td> 
          <td>6</td> 
          <td>6</td> 
          <td></td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Скорость атаки</td> 
          <td>15%</td> 
          <td>25%</td> 
          <td>35%</td> 
          <td>45%</td> 
          <td>65%</td> 
          <td></td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Скорость передвижения</td> 
          <td>0.75</td> 
          <td>0.8</td> 
          <td>0.85</td> 
          <td>0.9</td> 
          <td>1</td> 
          <td></td> 
          <td></td> 
        </tr> 
      </table> 
    </div> 
  </section> 
  <section id="content4"> 
    <img src="img/heroes/Ringo/hellfire-brew.png"> 
    <div class="updyn">Патч 2.5</div> 
    <div> 
      <div class="ch">Hellfire Brew (Адское пламя)</div> 
      <div class="chl">C-Skill</div> 
    </div> 
    <div class="chcont">Ринго делает большой глоток из фляги и выдыхает в свою цель спепеляющий огненный шар. При столкновении шар взрывается и воспламеняет жертву, обжигая ее и находящихся рядом врагов на протяжении 7 сек. 
      <table> 
        <tr> 
          <td>Характеристики</td> 
          <td>LVL 1</td> 
          <td>LVL 2</td> 
          <td>LVL 3</td> 
          <td class="ss">% от кристалла</td> 
          <td class="ss2">% от оружия</td> 
        </tr> 
        <tr> 
          <td>Восстановление</td> 
          <td>100</td> 
          <td>85</td> 
          <td>70</td> 
          <td></td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Расход энергии</td> 
          <td>100</td> 
          <td>115</td> 
          <td>130</td> 
          <td></td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Урон</td> 
          <td>250</td> 
          <td>365</td> 
          <td>480</td> 
          <td class="ss">75%</td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Урон от ожога</td> 
          <td>30</td> 
          <td>50</td> 
          <td>70</td> 
          <td></td> 
          <td></td> 
        </tr> 
      </table> 
    </div> 
  </section> 
</div>

При уменьшении размера экрана, справа появляется все больше и больше места, что рушит всю структуру сайта. Не знаю уже что делать. overflow-x: hidden не помогает, да и больше на костыль похоже, чем на решение.

Answer 1

Предположу:

section {
  flex-flow: row wrap;
}

@import url('https://fonts.googleapis.com/css?family=Open+Sans&subset=cyrillic'); 
@font-face { 
    font-family: NorthwoodHigh; /* Vainglory Font */ 
    src: url(../fonts/NorthwoodHigh.ttf); 
   } 
@font-face { 
    font-family: roboto; /* Roboto Font */ 
    src: url(../fonts/roboto.ttf); 
   } 
body { 
    background-image: url(../img/minionsplayingVG.jpg); 
    background-size: 100%; 
    margin: 0; 
    padding: 0; 
} 
.her { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    width: 100%; 
    padding-top: 1em; 
    background: rgba(0%, 0%, 0%, 0.8); 
} 
@media (min-width:768px) { 
    .her { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    margin-left: 18%; 
    width: 60%; 
    padding: 2em; 
    background: rgba(0%, 0%, 0%, 0.8); 
} 
} 
/* Heroes Style */ 
.heroes { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: horizontal; 
    -webkit-box-direction: normal; 
        -ms-flex-direction: row; 
            flex-direction: row; 
    -ms-flex-wrap: wrap; 
        flex-wrap: wrap; 
    -webkit-box-pack: center; 
        -ms-flex-pack: center; 
            justify-content: center; 
} 
.flipc { 
    -webkit-perspective: 1000; 
            perspective: 1000; 
    display: inline-block; 
    margin: 0 0.5em; 
} 
.flipc:hover .flipper { 
    -webkit-transform: rotateY(180deg); 
            transform: rotateY(180deg); 
} 
.flipc, .front, .back { 
    width: 8em; 
    height: 12em; 
    -webkit-clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
            clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
} 
.flipper { 
    -webkit-transition: 0.4s; 
    transition: 0.4s; 
    -webkit-transform-style: preserve-3d; 
            transform-style: preserve-3d; 
    position: relative; 
} 
.front, .back { 
    -webkit-backface-visibility: hidden; 
            backface-visibility: hidden; 
    position: absolute; 
} 
.back { 
    -webkit-transform: rotateY(180deg); 
            transform: rotateY(180deg); 
} 
.hex { 
    display: inline-block; 
    width: 8em; 
    height: 12em;; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(grey));; 
    background-image: linear-gradient(to bottom, white 0%, grey 100%); 
    -webkit-box-shadow: inset 10px 50px 100px rgba(0,0,0,0.9); 
            box-shadow: inset 10px 50px 100px rgba(0,0,0,0.9); 
    -webkit-clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
            clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
} 
.hexin {  
    position: absolute; 
    top: 2%; 
    left: 2%; 
    width: 96%; 
    height: 96%; 
    background: url(../img/heroes/Backface.jpg); 
    -webkit-clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
            clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
    font-family: NorthwoodHigh; 
    color: aliceblue; 
} 
.hexin p { 
    padding: 1em 0.2em; 
    font-size: 1.5em; 
    text-align: center; 
    -webkit-box-pack: center; 
        -ms-flex-pack: center; 
            justify-content: center; 
} 
.hexin p img { 
    width: 26%; 
    margin: 10px 4px 0 4px; 
} 
.heroname { 
    position: absolute; 
    display: inline; 
    right: 0; 
    padding: 0 5px 0 0; 
    top: 55%; 
    background: rgba(0%, 0%, 0%, 0.7); 
    color: aliceblue; 
    font-size: 1.5em; 
} 
/* Heroes Style End */ 
#hero1 { 
    display: flex; 
    flex-direction: column; 
    width: 100%; 
} 
.heroh { 
    background: rgba(0%, 0%, 0%, 0.5); 
    margin: 0.5em 0; 
    border-radius: 6px; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 2em; 
    text-align: center; 
    color: white; 
} 
.herocont { 
    font-family: NorthwoodHigh; 
    font-size: 1em; 
    color: aliceblue;  
} 
.herocarousel { 
    width: 100%; 
    height: 5.5em; 
    white-space: nowrap; 
    overflow-x: auto; 
    overflow-y: hidden; 
    -webkit-overflow-scrolling: touch; 
    ms-overflow-style: none; 
} 
.heroprl { 
    position: relative; 
    display: inline-flex; 
    top: 1%; 
    left: 1%; 
    height: 98%; 
    width: 98%; 
-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); 
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); 
} 
.herocarousel::-webkit-scrollbar { 
    display: none; 
} 
.bord { 
    display: inline-flex; 
    background-image: linear-gradient(to bottom, white 0%, grey 100%); 
    height: 5em; 
    width: 5em; 
    margin: 0 -8px 0 0; 
    -webkit-box-shadow: inset 30px 50px 90px rgba(0,0,0,0.9); 
            box-shadow: inset 30px 50px 90px rgba(0,0,0,0.9); 
-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); 
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); 
} 
.bord:hover { 
        transform: translate(0, 6px); 
        /*-webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1); 
        transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);*/ 
 
} 
.heroallw { 
    display: inline-flex; 
    flex-direction: row; 
    justify-content: center; 
    flex-wrap: wrap; 
} 
.herow { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 14em; 
    margin: 4px; 
    border: 1px solid blue; 
} 
.herowrare { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 100%; 
    margin: 4px; 
    border-radius: 2px; 
} 
@media (min-width:500px) { 
.herowrare { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 14em; 
    margin: 4px; 
    border-radius: 2px; 
}   
} 
.herowepic { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 100%; 
    margin: 4px; 
    border-radius: 2px; 
} 
@media (min-width:500px) { 
.herowepic { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 14em; 
    margin: 4px; 
    border-radius: 2px; 
} 
} 
.herowlegendary { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 100%; 
    margin: 4px; 
    border-radius: 2px; 
} 
@media (min-width:500px) { 
.herowlegendary { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 14em; 
    margin: 4px; 
    border-radius: 2px; 
} 
} 
.herowsele { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 100%; 
    margin: 4px; 
    border-radius: 2px; 
} 
@media (min-width:500px) { 
.herowsele { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 14em; 
    margin: 4px; 
    border-radius: 2px; 
} 
} 
.heroallw img { 
    position: relative; 
    width: 100%; 
} 
.herowrare .ImageCaption { 
	font-size: 1em; 
	position: absolute; 
	bottom: 0em; 
    width: 100%; 
    padding: 4px; 
    text-align: center; 
    background: rgba(0%, 40%, 100%, 0.3); 
    color: white; 
     
} 
.herowepic .ImageCaption { 
	font-size: 1em; 
	position: absolute; 
	bottom: 0em; 
    width: 100%; 
    padding: 4px; 
    text-align: center; 
    background: rgba(41%, 0%, 73%, 0.3); 
    color: white; 
     
} 
.herowlegendary .ImageCaption { 
	font-size: 1em; 
	position: absolute; 
	bottom: 0em; 
    width: 100%; 
    padding: 4px; 
    text-align: center; 
    background: rgba(96%, 91%, 4%, 0.3); 
    color: white; 
     
} 
.herowsele .ImageCaption { 
	font-size: 1em; 
	position: absolute; 
	bottom: 0em; 
    width: 100%; 
    padding: 4px; 
    text-align: center; 
    background: rgba(100%, 0%, 0%, 0.3); 
    color: white; 
     
} 
 
/*------------------------------------------*/ 
.preutx { 
    position: relative; 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    flex-wrap: wrap; 
    background-color: rgba(0%, 0%, 0%, 0.5); 
    padding: 6px; 
    border-radius: 6px; 
} 
.presen { 
    display: none;     
} 
@media (min-width:1400px) { 
    .presen { 
    display: block; 
    width: 200px; 
    height: 144px; 
    margin-right: 2em; 
} 
} 
.preutx p{ 
    font-family: 'Open Sans', sans-serif; 
    color: white; 
    padding: 4px 10px; 
} 
.preutx table { 
    font-family: 'Open Sans', sans-serif; 
    color: white; 
} 
.preutx table td { 
    background: rgba(53%, 53%, 53%, 0.1); 
    padding: 5px 10px; 
    color: white; 
    font-size: 0.7em; 
    border-radius: 4px; 
} 
@media (min-width:500px) { 
    .preutx table td { 
    background: rgba(53%, 53%, 53%, 0.1); 
    padding: 5px 10px; 
    font-size: 1em; 
    color: white; 
    border-radius: 4px; 
} 
} 
.preutx table td:nth-child(2n+2) { 
    background: rgba(53%, 53%, 53%, 0.1); 
    color: white; 
    text-align: center; 
} 
.utx { 
    position: relative; 
    display: block; 
    width: 100%; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 0.8em; 
    color: white; 
    margin-left: 1vh; 
    } 
@media (min-width:500px) { 
    .utx { 
    position: relative; 
    display: block; 
    width: 200px; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 0.8em; 
    color: white; 
    margin-left: 1vh; 
    } 
} 
.abl { 
    position: relative; 
    background-color: rgba(10%, 10%, 10%, 0.8); 
    width: 96%; 
    height: 15px; 
    padding: 1%; 
    margin: 0.5em 0; 
} 
@media (min-width:500px) { 
    .abl { 
    background-color: rgba(10%, 10%, 10%, 0.8); 
    width: 170px; 
    height: 15px; 
    padding: 5px; 
    margin: 0.5em 0; 
} 
} 
.abl span { 
    display: inline-block; 
    height: 100%; 
} 
.ablfl span { 
    background-color: #ba3030; 
} 
section { 
    transition-property: all; 
    position: relative; 
    display: flex; 
    opacity: 0; 
    height: 0; 
    width: 100%;     
} 
section img { 
    float: left; 
    opacity: 0; 
    height: 6vh; 
    width: 6vh; 
} 
input { 
  display: none; 
} 
label { 
    display: block; 
    width: 50px; 
    height: 50px; 
    padding: 2px; 
    margin: 2px; 
    background-color: #141414; 
} 
label img { 
    position: relative; 
    width: 50px; 
    height: 50px; 
    filter: grayscale(0.9); 
    } 
label img:hover { 
    filter: grayscale(0); 
    } 
label:hover { 
    color: #888; 
    cursor: pointer; 
} 
input:checked + label img{ 
  filter: grayscale(0); 
} 
#tab1:checked ~ #content1, 
#tab2:checked ~ #content2, 
#tab3:checked ~ #content3, 
#tab4:checked ~ #content4 { 
    transition-property: all; 
    transition: opacity 0.3s ease-in; 
    display: flex; 
    flex-wrap: wrap; 
    height: auto; 
    margin-top: 4px; 
    font-family: 'Open Sans', sans-serif; 
    color: white; 
    opacity: 1; 
    padding: 1em; 
} 
#tab1:checked ~ #content1 img, 
#tab2:checked ~ #content2 img, 
#tab3:checked ~ #content3 img, 
#tab4:checked ~ #content4 img{ 
    float: left; 
    opacity: 1; 
    height: 6vh; 
    width: 6vh; 
} 
.ch { 
    position: relative; 
    left: 0.4em; 
    display: block; 
    font-size: 1em; 
} 
.chl { 
    position: relative; 
    left: 0.6em; 
    top: 0.3em; 
    display: block; 
    font-size: 0.7em; 
} 
.chcont { 
    position: relative; 
    display: block;  
    margin-top: 1em; 
} 
section table { 
    text-align: center; 
    margin-top: 1em; 
    font-size: 0.4em; 
} 
@media (min-width:400px) { 
    section table { 
    text-align: center; 
    margin-top: 1em; 
    font-size: 0.6em; 
} 
} 
@media (min-width:570px) { 
    section table { 
    text-align: center; 
    margin-top: 1em; 
    font-size: 1em; 
} 
} 
section td { 
    background: rgba(53%, 53%, 53%, 0.1); 
    color: white; 
    border-radius: 4px; 
} 
section td:nth-child(2n+2) { 
    background: rgba(64%, 64%, 64%, 0.1); 
    color: white; 
} 
section td:nth-child(1) { 
    text-align: left; 
} 
section td.ss { 
    background: rgba(39%, 37%, 100%, 0.5); 
} 
section td.ss2 { 
    background: rgba(100%, 37%, 37%, 0.5); 
} 
.updyn { 
    position: absolute; 
    display: block; 
    margin: 3px; 
    padding: 0.4em; 
    right: 6px; 
    border-radius: 4px; 
    background: rgba(35%, 35%, 35%, 0.5); 
    font-size: 0.4em; 
    font-family: 'Open Sans', sans-serif; 
    color: white; 
} 
@media (min-width:430px) { 
        .updyn { 
    position: absolute; 
    display: block; 
    margin: 3px; 
    padding: 0.4em; 
    right: 6px; 
    border-radius: 4px; 
    background: rgba(35%, 35%, 35%, 0.5); 
    font-size: 1em; 
    font-family: 'Open Sans', sans-serif; 
    color: white; 
} 
} 
.prebuildh { 
    position: relative; 
    display: inline-flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    background: rgba(0%, 0%, 0%, 0.5); 
    padding: 15px; 
     
} 
.buildh { 
    display: inline-flex; 
    background: rgba(100%, 37%, 37%, 0.5); 
    padding: 6px; 
    margin: 10px; 
    border-radius: 6px; 
} 
.prebuildh .buildh img { 
    width: 25px; 
    height: 25px; 
    padding: 0 1px; 
} 
@media (min-width:350px) { 
   .prebuildh .buildh img { 
    width: 30px; 
    height: 30px; 
    padding: 0 2px; 
}  
} 
@media (min-width:700px) { 
   .prebuildh .buildh img { 
    width: 50px; 
    height: 50px; 
    padding: 0 5px; 
}  
} 
.buildh2 { 
    display: inline-flex; 
    background: rgba(39%, 37%, 100%, 0.5); 
    padding: 6px; 
    margin: 10px; 
    border-radius: 6px; 
} 
.prebuildh .buildh2 img { 
    width: 30px; 
    height: 30px; 
    padding: 0 5px; 
} 
@media (min-width:500px) { 
   .prebuildh .buildh2 img { 
    width: 50px; 
    height: 50px; 
    padding: 0 5px; 
}  
} 
 
section { 
  flex-flow: row wrap; 
}

<div class="heroh">Способности</div> 
<div class="preutx"> 
<input id="tab1" type="radio" name="tabs" checked> 
<label for="tab1"><img src="img/heroes/Ringo/double-down.png"></label> 
<input id="tab2" type="radio" name="tabs"> 
<label for="tab2"><img src="img/heroes/Ringo/achilles-shot.png"></label> 
<input id="tab3" type="radio" name="tabs"> 
<label for="tab3"><img src="img/heroes/Ringo/twirling-silver.png"></label> 
<input id="tab4" type="radio" name="tabs"> 
<label for="tab4"><img src="img/heroes/Ringo/hellfire-brew.png"></label> 
<!-- Content --> 
 <section id="content1"> 
<img src="img/heroes/Ringo/double-down.png"> 
<div><div class="ch">Double Down (Ва-Банк)</div> 
<div class="chl">Умение героя</div></div> 
<div class="chcont">Следующая базовая атака Ринго после убийства любого противника будет критическим ударом.</div> 
  </section> 
  <section id="content2"> 
<img src="img/heroes/Ringo/achilles-shot.png"><div class="updyn">Патч 2.5</div> 
<div><div class="ch">Achilles Shot (Ахиллесов выстрел)</div> 
<div class="chl">A-Skill</div></div> 
<div class="chcont">Ринго стреляет в пятку своей цели (или другую нижнюю конечность), замедляя ее и нанося урон.<table> 
    <tr> 
        <td>Характеристики</td> 
        <td>LVL 1</td> 
        <td>LVL 2</td> 
        <td>LVL 3</td> 
        <td>LVL 4</td> 
        <td>LVL 5</td> 
        <td class="ss">% от кристалла</td> 
        <td class="ss2">% от оружия</td> 
    </tr> 
    <tr> 
        <td>Восстановление</td> 
        <td>9</td> 
        <td>8.5</td> 
        <td>8</td> 
        <td>7.5</td> 
        <td>7</td> 
        <td></td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Расход энергии</td> 
        <td>40</td> 
        <td>850</td> 
        <td>60</td> 
        <td>70</td> 
        <td>100</td> 
        <td></td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Урон</td> 
        <td>80</td> 
        <td>125</td> 
        <td>170</td> 
        <td>215</td> 
        <td>350</td> 
        <td class="ss">125%</td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Замедление</td> 
        <td>30%</td> 
        <td>35%</td> 
        <td>40%</td> 
        <td>45%</td> 
        <td>50%</td> 
        <td></td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Длительность замедления</td> 
        <td>1.5</td> 
        <td>1.5</td> 
        <td>1.5</td> 
        <td>1.5</td> 
        <td>2.5</td> 
        <td></td> 
        <td></td> 
    </tr> 
</table></div> 
</section> 
<section id="content3"> 
<img src="img/heroes/Ringo/twirling-silver.png"><div class="updyn">Патч 2.5</div> 
<div><div class="ch">Twirling Silver (Серебряный вихрь)</div> 
<div class="chl">B-Skill</div></div> 
<div class="chcont">Ринго ведет сумасшедший огонь по своей цели, значительно увеличивая скорость атаки и перемещения на время действия умения. 
<p>При активации сбрасывается восстановление базовой атаки.</p> 
<table> 
    <tr> 
        <td>Характеристики</td> 
        <td>LVL 1</td> 
        <td>LVL 2</td> 
        <td>LVL 3</td> 
        <td>LVL 4</td> 
        <td>LVL 5</td> 
        <td class="ss">% от кристалла</td> 
        <td class="ss2">% от оружия</td> 
    </tr> 
    <tr> 
        <td>Восстановление</td> 
        <td>9</td> 
        <td>9</td> 
        <td>9</td> 
        <td>9</td> 
        <td>9</td> 
        <td></td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Расход энергии</td> 
        <td>50</td> 
        <td>55</td> 
        <td>60</td> 
        <td>65</td> 
        <td>70</td> 
        <td></td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Урон</td> 
        <td>0</td> 
        <td>0</td> 
        <td>0</td> 
        <td>0</td> 
        <td>0</td> 
        <td class="ss">80%</td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Длительность</td> 
        <td>6</td> 
        <td>6</td> 
        <td>6</td> 
        <td>6</td> 
        <td>6</td> 
        <td></td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Скорость атаки</td> 
        <td>15%</td> 
        <td>25%</td> 
        <td>35%</td> 
        <td>45%</td> 
        <td>65%</td> 
        <td></td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Скорость передвижения</td> 
        <td>0.75</td> 
        <td>0.8</td> 
        <td>0.85</td> 
        <td>0.9</td> 
        <td>1</td> 
        <td></td> 
        <td></td> 
    </tr> 
</table></div> 
</section> 
<section id="content4"> 
<img src="img/heroes/Ringo/hellfire-brew.png"><div class="updyn">Патч 2.5</div> 
<div><div class="ch">Hellfire Brew (Адское пламя)</div> 
<div class="chl">C-Skill</div></div> 
<div class="chcont">Ринго делает большой глоток из фляги и выдыхает в свою цель спепеляющий огненный шар. При столкновении шар взрывается и воспламеняет жертву, обжигая ее и находящихся рядом врагов на протяжении 7 сек. 
<table> 
    <tr> 
        <td>Характеристики</td> 
        <td>LVL 1</td> 
        <td>LVL 2</td> 
        <td>LVL 3</td> 
        <td class="ss">% от кристалла</td> 
        <td class="ss2">% от оружия</td> 
    </tr> 
    <tr> 
        <td>Восстановление</td> 
        <td>100</td> 
        <td>85</td> 
        <td>70</td> 
        <td></td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Расход энергии</td> 
        <td>100</td> 
        <td>115</td> 
        <td>130</td> 
        <td></td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Урон</td> 
        <td>250</td> 
        <td>365</td> 
        <td>480</td> 
        <td class="ss">75%</td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Урон от ожога</td> 
        <td>30</td> 
        <td>50</td> 
        <td>70</td> 
        <td></td> 
        <td></td> 
    </tr> 
</table></div> 
</section> 
    </div>

Как например вариант еще для таблички:

т.е. обернуть таблицу в .table-wrap

и задать

.table-wrap {
  width: 100%;
  overflow-x: hidden;
}

Answer 2

Cделайте для section display: none по умолчанию.

Также не стоит прятать section с помощью установки height: 0 и т.д. height в auto не анимируется, поэтому это тоже бессмысленные стили:

@import url('https://fonts.googleapis.com/css?family=Open+Sans&subset=cyrillic'); 
@font-face { 
  font-family: NorthwoodHigh; 
  /* Vainglory Font */ 
  src: url(../fonts/NorthwoodHigh.ttf); 
} 
 
@font-face { 
  font-family: roboto; 
  /* Roboto Font */ 
  src: url(../fonts/roboto.ttf); 
} 
 
body { 
  background-image: url(../img/minionsplayingVG.jpg); 
  background-size: 100%; 
  margin: 0; 
  padding: 0; 
} 
 
.her { 
  display: flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  width: 100%; 
  padding-top: 1em; 
  background: rgba(0%, 0%, 0%, 0.8); 
} 
 
@media (min-width:768px) { 
  .her { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    margin-left: 18%; 
    width: 60%; 
    padding: 2em; 
    background: rgba(0%, 0%, 0%, 0.8); 
  } 
} 
 
 
/* Heroes Style */ 
 
.heroes { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-orient: horizontal; 
  -webkit-box-direction: normal; 
  -ms-flex-direction: row; 
  flex-direction: row; 
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap; 
  -webkit-box-pack: center; 
  -ms-flex-pack: center; 
  justify-content: center; 
} 
 
.flipc { 
  -webkit-perspective: 1000; 
  perspective: 1000; 
  display: inline-block; 
  margin: 0 0.5em; 
} 
 
.flipc:hover .flipper { 
  -webkit-transform: rotateY(180deg); 
  transform: rotateY(180deg); 
} 
 
.flipc, 
.front, 
.back { 
  width: 8em; 
  height: 12em; 
  -webkit-clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
  clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
} 
 
.flipper { 
  -webkit-transition: 0.4s; 
  transition: 0.4s; 
  -webkit-transform-style: preserve-3d; 
  transform-style: preserve-3d; 
  position: relative; 
} 
 
.front, 
.back { 
  -webkit-backface-visibility: hidden; 
  backface-visibility: hidden; 
  position: absolute; 
} 
 
.back { 
  -webkit-transform: rotateY(180deg); 
  transform: rotateY(180deg); 
} 
 
.hex { 
  display: inline-block; 
  width: 8em; 
  height: 12em; 
  ; 
  background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(grey)); 
  ; 
  background-image: linear-gradient(to bottom, white 0%, grey 100%); 
  -webkit-box-shadow: inset 10px 50px 100px rgba(0, 0, 0, 0.9); 
  box-shadow: inset 10px 50px 100px rgba(0, 0, 0, 0.9); 
  -webkit-clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
  clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
} 
 
.hexin { 
  position: absolute; 
  top: 2%; 
  left: 2%; 
  width: 96%; 
  height: 96%; 
  background: url(../img/heroes/Backface.jpg); 
  -webkit-clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
  clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
  font-family: NorthwoodHigh; 
  color: aliceblue; 
} 
 
.hexin p { 
  padding: 1em 0.2em; 
  font-size: 1.5em; 
  text-align: center; 
  -webkit-box-pack: center; 
  -ms-flex-pack: center; 
  justify-content: center; 
} 
 
.hexin p img { 
  width: 26%; 
  margin: 10px 4px 0 4px; 
} 
 
.heroname { 
  position: absolute; 
  display: inline; 
  right: 0; 
  padding: 0 5px 0 0; 
  top: 55%; 
  background: rgba(0%, 0%, 0%, 0.7); 
  color: aliceblue; 
  font-size: 1.5em; 
} 
 
 
/* Heroes Style End */ 
 
#hero1 { 
  display: flex; 
  flex-direction: column; 
  width: 100%; 
} 
 
.heroh { 
  background: rgba(0%, 0%, 0%, 0.5); 
  margin: 0.5em 0; 
  border-radius: 6px; 
  font-family: 'Open Sans', sans-serif; 
  font-size: 2em; 
  text-align: center; 
  color: white; 
} 
 
.herocont { 
  font-family: NorthwoodHigh; 
  font-size: 1em; 
  color: aliceblue; 
} 
 
.herocarousel { 
  width: 100%; 
  height: 5.5em; 
  white-space: nowrap; 
  overflow-x: auto; 
  overflow-y: hidden; 
  -webkit-overflow-scrolling: touch; 
  ms-overflow-style: none; 
} 
 
.heroprl { 
  position: relative; 
  display: inline-flex; 
  top: 1%; 
  left: 1%; 
  height: 98%; 
  width: 98%; 
  -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); 
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); 
} 
 
.herocarousel::-webkit-scrollbar { 
  display: none; 
} 
 
.bord { 
  display: inline-flex; 
  background-image: linear-gradient(to bottom, white 0%, grey 100%); 
  height: 5em; 
  width: 5em; 
  margin: 0 -8px 0 0; 
  -webkit-box-shadow: inset 30px 50px 90px rgba(0, 0, 0, 0.9); 
  box-shadow: inset 30px 50px 90px rgba(0, 0, 0, 0.9); 
  -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); 
  clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); 
} 
 
.bord:hover { 
  transform: translate(0, 6px); 
  /*-webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1); 
        transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);*/ 
} 
 
.heroallw { 
  display: inline-flex; 
  flex-direction: row; 
  justify-content: center; 
  flex-wrap: wrap; 
} 
 
.herow { 
  position: relative; 
  display: inline-block; 
  overflow: hidden; 
  height: 6em; 
  width: 14em; 
  margin: 4px; 
  border: 1px solid blue; 
} 
 
.herowrare { 
  position: relative; 
  display: inline-block; 
  overflow: hidden; 
  height: 6em; 
  width: 100%; 
  margin: 4px; 
  border-radius: 2px; 
} 
 
@media (min-width:500px) { 
  .herowrare { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 14em; 
    margin: 4px; 
    border-radius: 2px; 
  } 
} 
 
.herowepic { 
  position: relative; 
  display: inline-block; 
  overflow: hidden; 
  height: 6em; 
  width: 100%; 
  margin: 4px; 
  border-radius: 2px; 
} 
 
@media (min-width:500px) { 
  .herowepic { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 14em; 
    margin: 4px; 
    border-radius: 2px; 
  } 
} 
 
.herowlegendary { 
  position: relative; 
  display: inline-block; 
  overflow: hidden; 
  height: 6em; 
  width: 100%; 
  margin: 4px; 
  border-radius: 2px; 
} 
 
@media (min-width:500px) { 
  .herowlegendary { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 14em; 
    margin: 4px; 
    border-radius: 2px; 
  } 
} 
 
.herowsele { 
  position: relative; 
  display: inline-block; 
  overflow: hidden; 
  height: 6em; 
  width: 100%; 
  margin: 4px; 
  border-radius: 2px; 
} 
 
@media (min-width:500px) { 
  .herowsele { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 14em; 
    margin: 4px; 
    border-radius: 2px; 
  } 
} 
 
.heroallw img { 
  position: relative; 
  width: 100%; 
} 
 
.herowrare .ImageCaption { 
  font-size: 1em; 
  position: absolute; 
  bottom: 0em; 
  width: 100%; 
  padding: 4px; 
  text-align: center; 
  background: rgba(0%, 40%, 100%, 0.3); 
  color: white; 
} 
 
.herowepic .ImageCaption { 
  font-size: 1em; 
  position: absolute; 
  bottom: 0em; 
  width: 100%; 
  padding: 4px; 
  text-align: center; 
  background: rgba(41%, 0%, 73%, 0.3); 
  color: white; 
} 
 
.herowlegendary .ImageCaption { 
  font-size: 1em; 
  position: absolute; 
  bottom: 0em; 
  width: 100%; 
  padding: 4px; 
  text-align: center; 
  background: rgba(96%, 91%, 4%, 0.3); 
  color: white; 
} 
 
.herowsele .ImageCaption { 
  font-size: 1em; 
  position: absolute; 
  bottom: 0em; 
  width: 100%; 
  padding: 4px; 
  text-align: center; 
  background: rgba(100%, 0%, 0%, 0.3); 
  color: white; 
} 
 
 
/*------------------------------------------*/ 
 
.preutx { 
  position: relative; 
  display: flex; 
  flex-direction: row; 
  justify-content: center; 
  flex-wrap: wrap; 
  background-color: rgba(0%, 0%, 0%, 0.5); 
  padding: 6px; 
  border-radius: 6px; 
} 
 
.presen { 
  display: none; 
} 
 
@media (min-width:1400px) { 
  .presen { 
    display: block; 
    width: 200px; 
    height: 144px; 
    margin-right: 2em; 
  } 
} 
 
.preutx p { 
  font-family: 'Open Sans', sans-serif; 
  color: white; 
  padding: 4px 10px; 
} 
 
.preutx table { 
  font-family: 'Open Sans', sans-serif; 
  color: white; 
} 
 
.preutx table td { 
  background: rgba(53%, 53%, 53%, 0.1); 
  padding: 5px 10px; 
  color: white; 
  font-size: 0.7em; 
  border-radius: 4px; 
} 
 
@media (min-width:500px) { 
  .preutx table td { 
    background: rgba(53%, 53%, 53%, 0.1); 
    padding: 5px 10px; 
    font-size: 1em; 
    color: white; 
    border-radius: 4px; 
  } 
} 
 
.preutx table td:nth-child(2n+2) { 
  background: rgba(53%, 53%, 53%, 0.1); 
  color: white; 
  text-align: center; 
} 
 
.utx { 
  position: relative; 
  display: block; 
  width: 100%; 
  font-family: 'Open Sans', sans-serif; 
  font-size: 0.8em; 
  color: white; 
  margin-left: 1vh; 
} 
 
@media (min-width:500px) { 
  .utx { 
    position: relative; 
    display: block; 
    width: 200px; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 0.8em; 
    color: white; 
    margin-left: 1vh; 
  } 
} 
 
.abl { 
  position: relative; 
  background-color: rgba(10%, 10%, 10%, 0.8); 
  width: 96%; 
  height: 15px; 
  padding: 1%; 
  margin: 0.5em 0; 
} 
 
@media (min-width:500px) { 
  .abl { 
    background-color: rgba(10%, 10%, 10%, 0.8); 
    width: 170px; 
    height: 15px; 
    padding: 5px; 
    margin: 0.5em 0; 
  } 
} 
 
.abl span { 
  display: inline-block; 
  height: 100%; 
} 
 
.ablfl span { 
  background-color: #ba3030; 
} 
 
section { 
  transition-property: all; 
  position: relative; 
  /* По умолчанию элемент скрыт */ 
  display: none; 
  opacity: 0; 
  width: 100%; 
} 
 
section img { 
  float: left; 
  opacity: 0; 
  height: 6vh; 
  width: 6vh; 
} 
 
input { 
  display: none; 
} 
 
label { 
  display: block; 
  width: 50px; 
  height: 50px; 
  padding: 2px; 
  margin: 2px; 
  background-color: #141414; 
} 
 
label img { 
  position: relative; 
  width: 50px; 
  height: 50px; 
  filter: grayscale(0.9); 
} 
 
label img:hover { 
  filter: grayscale(0); 
} 
 
label:hover { 
  color: #888; 
  cursor: pointer; 
} 
 
input:checked + label img { 
  filter: grayscale(0); 
} 
 
#tab1:checked ~ #content1, 
#tab2:checked ~ #content2, 
#tab3:checked ~ #content3, 
#tab4:checked ~ #content4 { 
  transition-property: all; 
  transition: opacity 0.3s ease-in; 
  display: flex; 
  flex-wrap: wrap; 
  margin-top: 4px; 
  font-family: 'Open Sans', sans-serif; 
  color: white; 
  opacity: 1; 
  padding: 1em; 
} 
 
#tab1:checked ~ #content1 img, 
#tab2:checked ~ #content2 img, 
#tab3:checked ~ #content3 img, 
#tab4:checked ~ #content4 img { 
  float: left; 
  opacity: 1; 
  height: 6vh; 
  width: 6vh; 
} 
 
.ch { 
  position: relative; 
  left: 0.4em; 
  display: block; 
  font-size: 1em; 
} 
 
.chl { 
  position: relative; 
  left: 0.6em; 
  top: 0.3em; 
  display: block; 
  font-size: 0.7em; 
} 
 
.chcont { 
  position: relative; 
  display: block; 
  margin-top: 1em; 
} 
 
section table { 
  text-align: center; 
  margin-top: 1em; 
  font-size: 0.4em; 
} 
 
@media (min-width:400px) { 
  section table { 
    text-align: center; 
    margin-top: 1em; 
    font-size: 0.6em; 
  } 
} 
 
@media (min-width:570px) { 
  section table { 
    text-align: center; 
    margin-top: 1em; 
    font-size: 1em; 
  } 
} 
 
section td { 
  background: rgba(53%, 53%, 53%, 0.1); 
  color: white; 
  border-radius: 4px; 
} 
 
section td:nth-child(2n+2) { 
  background: rgba(64%, 64%, 64%, 0.1); 
  color: white; 
} 
 
section td:nth-child(1) { 
  text-align: left; 
} 
 
section td.ss { 
  background: rgba(39%, 37%, 100%, 0.5); 
} 
 
section td.ss2 { 
  background: rgba(100%, 37%, 37%, 0.5); 
} 
 
.updyn { 
  position: absolute; 
  display: block; 
  margin: 3px; 
  padding: 0.4em; 
  right: 6px; 
  border-radius: 4px; 
  background: rgba(35%, 35%, 35%, 0.5); 
  font-size: 0.4em; 
  font-family: 'Open Sans', sans-serif; 
  color: white; 
} 
 
@media (min-width:430px) { 
  .updyn { 
    position: absolute; 
    display: block; 
    margin: 3px; 
    padding: 0.4em; 
    right: 6px; 
    border-radius: 4px; 
    background: rgba(35%, 35%, 35%, 0.5); 
    font-size: 1em; 
    font-family: 'Open Sans', sans-serif; 
    color: white; 
  } 
} 
 
.prebuildh { 
  position: relative; 
  display: inline-flex; 
  flex-wrap: wrap; 
  justify-content: center; 
  background: rgba(0%, 0%, 0%, 0.5); 
  padding: 15px; 
} 
 
.buildh { 
  display: inline-flex; 
  background: rgba(100%, 37%, 37%, 0.5); 
  padding: 6px; 
  margin: 10px; 
  border-radius: 6px; 
} 
 
.prebuildh .buildh img { 
  width: 25px; 
  height: 25px; 
  padding: 0 1px; 
} 
 
@media (min-width:350px) { 
  .prebuildh .buildh img { 
    width: 30px; 
    height: 30px; 
    padding: 0 2px; 
  } 
} 
 
@media (min-width:700px) { 
  .prebuildh .buildh img { 
    width: 50px; 
    height: 50px; 
    padding: 0 5px; 
  } 
} 
 
.buildh2 { 
  display: inline-flex; 
  background: rgba(39%, 37%, 100%, 0.5); 
  padding: 6px; 
  margin: 10px; 
  border-radius: 6px; 
} 
 
.prebuildh .buildh2 img { 
  width: 30px; 
  height: 30px; 
  padding: 0 5px; 
} 
 
@media (min-width:500px) { 
  .prebuildh .buildh2 img { 
    width: 50px; 
    height: 50px; 
    padding: 0 5px; 
  } 
}

<div class="heroh">Способности</div> 
<div class="preutx"> 
  <input id="tab1" type="radio" name="tabs" checked> 
  <label for="tab1"><img src="img/heroes/Ringo/double-down.png"></label> 
  <input id="tab2" type="radio" name="tabs"> 
  <label for="tab2"><img src="img/heroes/Ringo/achilles-shot.png"></label> 
  <input id="tab3" type="radio" name="tabs"> 
  <label for="tab3"><img src="img/heroes/Ringo/twirling-silver.png"></label> 
  <input id="tab4" type="radio" name="tabs"> 
  <label for="tab4"><img src="img/heroes/Ringo/hellfire-brew.png"></label> 
  <!-- Content --> 
  <section id="content1"> 
    <img src="img/heroes/Ringo/double-down.png"> 
    <div> 
      <div class="ch">Double Down (Ва-Банк)</div> 
      <div class="chl">Умение героя</div> 
    </div> 
    <div class="chcont">Следующая базовая атака Ринго после убийства любого противника будет критическим ударом.</div> 
  </section> 
  <section id="content2"> 
    <img src="img/heroes/Ringo/achilles-shot.png"> 
    <div class="updyn">Патч 2.5</div> 
    <div> 
      <div class="ch">Achilles Shot (Ахиллесов выстрел)</div> 
      <div class="chl">A-Skill</div> 
    </div> 
    <div class="chcont">Ринго стреляет в пятку своей цели (или другую нижнюю конечность), замедляя ее и нанося урон. 
      <table> 
        <tr> 
          <td>Характеристики</td> 
          <td>LVL 1</td> 
          <td>LVL 2</td> 
          <td>LVL 3</td> 
          <td>LVL 4</td> 
          <td>LVL 5</td> 
          <td class="ss">% от кристалла</td> 
          <td class="ss2">% от оружия</td> 
        </tr> 
        <tr> 
          <td>Восстановление</td> 
          <td>9</td> 
          <td>8.5</td> 
          <td>8</td> 
          <td>7.5</td> 
          <td>7</td> 
          <td></td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Расход энергии</td> 
          <td>40</td> 
          <td>850</td> 
          <td>60</td> 
          <td>70</td> 
          <td>100</td> 
          <td></td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Урон</td> 
          <td>80</td> 
          <td>125</td> 
          <td>170</td> 
          <td>215</td> 
          <td>350</td> 
          <td class="ss">125%</td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Замедление</td> 
          <td>30%</td> 
          <td>35%</td> 
          <td>40%</td> 
          <td>45%</td> 
          <td>50%</td> 
          <td></td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Длительность замедления</td> 
          <td>1.5</td> 
          <td>1.5</td> 
          <td>1.5</td> 
          <td>1.5</td> 
          <td>2.5</td> 
          <td></td> 
          <td></td> 
        </tr> 
      </table> 
    </div> 
  </section> 
  <section id="content3"> 
    <img src="img/heroes/Ringo/twirling-silver.png"> 
    <div class="updyn">Патч 2.5</div> 
    <div> 
      <div class="ch">Twirling Silver (Серебряный вихрь)</div> 
      <div class="chl">B-Skill</div> 
    </div> 
    <div class="chcont">Ринго ведет сумасшедший огонь по своей цели, значительно увеличивая скорость атаки и перемещения на время действия умения. 
      <p>При активации сбрасывается восстановление базовой атаки.</p> 
      <table> 
        <tr> 
          <td>Характеристики</td> 
          <td>LVL 1</td> 
          <td>LVL 2</td> 
          <td>LVL 3</td> 
          <td>LVL 4</td> 
          <td>LVL 5</td> 
          <td class="ss">% от кристалла</td> 
          <td class="ss2">% от оружия</td> 
        </tr> 
        <tr> 
          <td>Восстановление</td> 
          <td>9</td> 
          <td>9</td> 
          <td>9</td> 
          <td>9</td> 
          <td>9</td> 
          <td></td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Расход энергии</td> 
          <td>50</td> 
          <td>55</td> 
          <td>60</td> 
          <td>65</td> 
          <td>70</td> 
          <td></td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Урон</td> 
          <td>0</td> 
          <td>0</td> 
          <td>0</td> 
          <td>0</td> 
          <td>0</td> 
          <td class="ss">80%</td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Длительность</td> 
          <td>6</td> 
          <td>6</td> 
          <td>6</td> 
          <td>6</td> 
          <td>6</td> 
          <td></td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Скорость атаки</td> 
          <td>15%</td> 
          <td>25%</td> 
          <td>35%</td> 
          <td>45%</td> 
          <td>65%</td> 
          <td></td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Скорость передвижения</td> 
          <td>0.75</td> 
          <td>0.8</td> 
          <td>0.85</td> 
          <td>0.9</td> 
          <td>1</td> 
          <td></td> 
          <td></td> 
        </tr> 
      </table> 
    </div> 
  </section> 
  <section id="content4"> 
    <img src="img/heroes/Ringo/hellfire-brew.png"> 
    <div class="updyn">Патч 2.5</div> 
    <div> 
      <div class="ch">Hellfire Brew (Адское пламя)</div> 
      <div class="chl">C-Skill</div> 
    </div> 
    <div class="chcont">Ринго делает большой глоток из фляги и выдыхает в свою цель спепеляющий огненный шар. При столкновении шар взрывается и воспламеняет жертву, обжигая ее и находящихся рядом врагов на протяжении 7 сек. 
      <table> 
        <tr> 
          <td>Характеристики</td> 
          <td>LVL 1</td> 
          <td>LVL 2</td> 
          <td>LVL 3</td> 
          <td class="ss">% от кристалла</td> 
          <td class="ss2">% от оружия</td> 
        </tr> 
        <tr> 
          <td>Восстановление</td> 
          <td>100</td> 
          <td>85</td> 
          <td>70</td> 
          <td></td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Расход энергии</td> 
          <td>100</td> 
          <td>115</td> 
          <td>130</td> 
          <td></td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Урон</td> 
          <td>250</td> 
          <td>365</td> 
          <td>480</td> 
          <td class="ss">75%</td> 
          <td></td> 
        </tr> 
        <tr> 
          <td>Урон от ожога</td> 
          <td>30</td> 
          <td>50</td> 
          <td>70</td> 
          <td></td> 
          <td></td> 
        </tr> 
      </table> 
    </div> 
  </section> 
</div>

Answer 3

overflow-x:hidden для body все решил

@import url('https://fonts.googleapis.com/css?family=Open+Sans&subset=cyrillic'); 
@font-face { 
    font-family: NorthwoodHigh; /* Vainglory Font */ 
    src: url(../fonts/NorthwoodHigh.ttf); 
   } 
@font-face { 
    font-family: roboto; /* Roboto Font */ 
    src: url(../fonts/roboto.ttf); 
   } 
body { 
    background-image: url(../img/minionsplayingVG.jpg); 
    background-size: 100%; 
    margin: 0; 
    padding: 0; 
    overflow-x:hidden; 
} 
.her { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    width: 100%; 
    padding-top: 1em; 
    background: rgba(0%, 0%, 0%, 0.8); 
} 
@media (min-width:768px) { 
    .her { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    margin-left: 18%; 
    width: 60%; 
    padding: 2em; 
    background: rgba(0%, 0%, 0%, 0.8); 
} 
} 
/* Heroes Style */ 
.heroes { 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-orient: horizontal; 
    -webkit-box-direction: normal; 
        -ms-flex-direction: row; 
            flex-direction: row; 
    -ms-flex-wrap: wrap; 
        flex-wrap: wrap; 
    -webkit-box-pack: center; 
        -ms-flex-pack: center; 
            justify-content: center; 
} 
.flipc { 
    -webkit-perspective: 1000; 
            perspective: 1000; 
    display: inline-block; 
    margin: 0 0.5em; 
} 
.flipc:hover .flipper { 
    -webkit-transform: rotateY(180deg); 
            transform: rotateY(180deg); 
} 
.flipc, .front, .back { 
    width: 8em; 
    height: 12em; 
    -webkit-clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
            clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
} 
.flipper { 
    -webkit-transition: 0.4s; 
    transition: 0.4s; 
    -webkit-transform-style: preserve-3d; 
            transform-style: preserve-3d; 
    position: relative; 
} 
.front, .back { 
    -webkit-backface-visibility: hidden; 
            backface-visibility: hidden; 
    position: absolute; 
} 
.back { 
    -webkit-transform: rotateY(180deg); 
            transform: rotateY(180deg); 
} 
.hex { 
    display: inline-block; 
    width: 8em; 
    height: 12em;; 
    background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(grey));; 
    background-image: linear-gradient(to bottom, white 0%, grey 100%); 
    -webkit-box-shadow: inset 10px 50px 100px rgba(0,0,0,0.9); 
            box-shadow: inset 10px 50px 100px rgba(0,0,0,0.9); 
    -webkit-clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
            clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
} 
.hexin {  
    position: absolute; 
    top: 2%; 
    left: 2%; 
    width: 96%; 
    height: 96%; 
    background: url(../img/heroes/Backface.jpg); 
    -webkit-clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
            clip-path: polygon(50% 7%, 100% 25%, 100% 75%, 50% 93%, 0% 75%, 0% 25%); 
    font-family: NorthwoodHigh; 
    color: aliceblue; 
} 
.hexin p { 
    padding: 1em 0.2em; 
    font-size: 1.5em; 
    text-align: center; 
    -webkit-box-pack: center; 
        -ms-flex-pack: center; 
            justify-content: center; 
} 
.hexin p img { 
    width: 26%; 
    margin: 10px 4px 0 4px; 
} 
.heroname { 
    position: absolute; 
    display: inline; 
    right: 0; 
    padding: 0 5px 0 0; 
    top: 55%; 
    background: rgba(0%, 0%, 0%, 0.7); 
    color: aliceblue; 
    font-size: 1.5em; 
} 
/* Heroes Style End */ 
#hero1 { 
    display: flex; 
    flex-direction: column; 
    width: 100%; 
} 
.heroh { 
    background: rgba(0%, 0%, 0%, 0.5); 
    margin: 0.5em 0; 
    border-radius: 6px; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 2em; 
    text-align: center; 
    color: white; 
} 
.herocont { 
    font-family: NorthwoodHigh; 
    font-size: 1em; 
    color: aliceblue;  
} 
.herocarousel { 
    width: 100%; 
    height: 5.5em; 
    white-space: nowrap; 
    overflow-x: auto; 
    overflow-y: hidden; 
    -webkit-overflow-scrolling: touch; 
    ms-overflow-style: none; 
} 
.heroprl { 
    position: relative; 
    display: inline-flex; 
    top: 1%; 
    left: 1%; 
    height: 98%; 
    width: 98%; 
-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); 
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); 
} 
.herocarousel::-webkit-scrollbar { 
    display: none; 
} 
.bord { 
    display: inline-flex; 
    background-image: linear-gradient(to bottom, white 0%, grey 100%); 
    height: 5em; 
    width: 5em; 
    margin: 0 -8px 0 0; 
    -webkit-box-shadow: inset 30px 50px 90px rgba(0,0,0,0.9); 
            box-shadow: inset 30px 50px 90px rgba(0,0,0,0.9); 
-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); 
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); 
} 
.bord:hover { 
        transform: translate(0, 6px); 
        /*-webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1); 
        transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);*/ 
 
} 
.heroallw { 
    display: inline-flex; 
    flex-direction: row; 
    justify-content: center; 
    flex-wrap: wrap; 
} 
.herow { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 14em; 
    margin: 4px; 
    border: 1px solid blue; 
} 
.herowrare { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 100%; 
    margin: 4px; 
    border-radius: 2px; 
} 
@media (min-width:500px) { 
.herowrare { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 14em; 
    margin: 4px; 
    border-radius: 2px; 
}   
} 
.herowepic { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 100%; 
    margin: 4px; 
    border-radius: 2px; 
} 
@media (min-width:500px) { 
.herowepic { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 14em; 
    margin: 4px; 
    border-radius: 2px; 
} 
} 
.herowlegendary { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 100%; 
    margin: 4px; 
    border-radius: 2px; 
} 
@media (min-width:500px) { 
.herowlegendary { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 14em; 
    margin: 4px; 
    border-radius: 2px; 
} 
} 
.herowsele { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 100%; 
    margin: 4px; 
    border-radius: 2px; 
} 
@media (min-width:500px) { 
.herowsele { 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
    height: 6em; 
    width: 14em; 
    margin: 4px; 
    border-radius: 2px; 
} 
} 
.heroallw img { 
    position: relative; 
    width: 100%; 
} 
.herowrare .ImageCaption { 
	font-size: 1em; 
	position: absolute; 
	bottom: 0em; 
    width: 100%; 
    padding: 4px; 
    text-align: center; 
    background: rgba(0%, 40%, 100%, 0.3); 
    color: white; 
     
} 
.herowepic .ImageCaption { 
	font-size: 1em; 
	position: absolute; 
	bottom: 0em; 
    width: 100%; 
    padding: 4px; 
    text-align: center; 
    background: rgba(41%, 0%, 73%, 0.3); 
    color: white; 
     
} 
.herowlegendary .ImageCaption { 
	font-size: 1em; 
	position: absolute; 
	bottom: 0em; 
    width: 100%; 
    padding: 4px; 
    text-align: center; 
    background: rgba(96%, 91%, 4%, 0.3); 
    color: white; 
     
} 
.herowsele .ImageCaption { 
	font-size: 1em; 
	position: absolute; 
	bottom: 0em; 
    width: 100%; 
    padding: 4px; 
    text-align: center; 
    background: rgba(100%, 0%, 0%, 0.3); 
    color: white; 
     
} 
 
/*------------------------------------------*/ 
.preutx { 
    position: relative; 
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    flex-wrap: wrap; 
    background-color: rgba(0%, 0%, 0%, 0.5); 
    padding: 6px; 
    border-radius: 6px; 
} 
.presen { 
    display: none;     
} 
@media (min-width:1400px) { 
    .presen { 
    display: block; 
    width: 200px; 
    height: 144px; 
    margin-right: 2em; 
} 
} 
.preutx p{ 
    font-family: 'Open Sans', sans-serif; 
    color: white; 
    padding: 4px 10px; 
} 
.preutx table { 
    font-family: 'Open Sans', sans-serif; 
    color: white; 
} 
.preutx table td { 
    background: rgba(53%, 53%, 53%, 0.1); 
    padding: 5px 10px; 
    color: white; 
    font-size: 0.7em; 
    border-radius: 4px; 
} 
@media (min-width:500px) { 
    .preutx table td { 
    background: rgba(53%, 53%, 53%, 0.1); 
    padding: 5px 10px; 
    font-size: 1em; 
    color: white; 
    border-radius: 4px; 
} 
} 
.preutx table td:nth-child(2n+2) { 
    background: rgba(53%, 53%, 53%, 0.1); 
    color: white; 
    text-align: center; 
} 
.utx { 
    position: relative; 
    display: block; 
    width: 100%; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 0.8em; 
    color: white; 
    margin-left: 1vh; 
    } 
@media (min-width:500px) { 
    .utx { 
    position: relative; 
    display: block; 
    width: 200px; 
    font-family: 'Open Sans', sans-serif; 
    font-size: 0.8em; 
    color: white; 
    margin-left: 1vh; 
    } 
} 
.abl { 
    position: relative; 
    background-color: rgba(10%, 10%, 10%, 0.8); 
    width: 96%; 
    height: 15px; 
    padding: 1%; 
    margin: 0.5em 0; 
} 
@media (min-width:500px) { 
    .abl { 
    background-color: rgba(10%, 10%, 10%, 0.8); 
    width: 170px; 
    height: 15px; 
    padding: 5px; 
    margin: 0.5em 0; 
} 
} 
.abl span { 
    display: inline-block; 
    height: 100%; 
} 
.ablfl span { 
    background-color: #ba3030; 
} 
section { 
    transition-property: all; 
    position: relative; 
    display: flex; 
    opacity: 0; 
    height: 0; 
    width: 100%;     
} 
section img { 
    float: left; 
    opacity: 0; 
    height: 6vh; 
    width: 6vh; 
} 
input { 
  //display: none; 
} 
label { 
    display: block; 
    width: 50px; 
    height: 50px; 
    padding: 2px; 
    margin: 2px; 
    background-color: #141414; 
} 
label img { 
    position: relative; 
    width: 50px; 
    height: 50px; 
    filter: grayscale(0.9); 
    } 
label img:hover { 
    filter: grayscale(0); 
    } 
label:hover { 
    color: #888; 
    cursor: pointer; 
} 
input:checked + label img{ 
  filter: grayscale(0); 
} 
#tab1:checked ~ #content1, 
#tab2:checked ~ #content2, 
#tab3:checked ~ #content3, 
#tab4:checked ~ #content4 { 
    transition-property: all; 
    transition: opacity 0.3s ease-in; 
    display: flex; 
    flex-wrap: wrap; 
    height: auto; 
    margin-top: 4px; 
    font-family: 'Open Sans', sans-serif; 
    color: white; 
    opacity: 1; 
    padding: 1em; 
} 
#tab1:checked ~ #content1 img, 
#tab2:checked ~ #content2 img, 
#tab3:checked ~ #content3 img, 
#tab4:checked ~ #content4 img{ 
    float: left; 
    opacity: 1; 
    height: 6vh; 
    width: 6vh; 
} 
.ch { 
    position: relative; 
    left: 0.4em; 
    display: block; 
    font-size: 1em; 
} 
.chl { 
    position: relative; 
    left: 0.6em; 
    top: 0.3em; 
    display: block; 
    font-size: 0.7em; 
} 
.chcont { 
    position: relative; 
    display: block;  
    margin-top: 1em; 
} 
section table { 
    text-align: center; 
    margin-top: 1em; 
    font-size: 0.4em; 
} 
@media (min-width:400px) { 
    section table { 
    text-align: center; 
    margin-top: 1em; 
    font-size: 0.6em; 
} 
} 
@media (min-width:570px) { 
    section table { 
    text-align: center; 
    margin-top: 1em; 
    font-size: 1em; 
} 
} 
section td { 
    background: rgba(53%, 53%, 53%, 0.1); 
    color: white; 
    border-radius: 4px; 
} 
section td:nth-child(2n+2) { 
    background: rgba(64%, 64%, 64%, 0.1); 
    color: white; 
} 
section td:nth-child(1) { 
    text-align: left; 
} 
section td.ss { 
    background: rgba(39%, 37%, 100%, 0.5); 
} 
section td.ss2 { 
    background: rgba(100%, 37%, 37%, 0.5); 
} 
.updyn { 
    position: absolute; 
    display: block; 
    margin: 3px; 
    padding: 0.4em; 
    right: 6px; 
    border-radius: 4px; 
    background: rgba(35%, 35%, 35%, 0.5); 
    font-size: 0.4em; 
    font-family: 'Open Sans', sans-serif; 
    color: white; 
} 
@media (min-width:430px) { 
        .updyn { 
    position: absolute; 
    display: block; 
    margin: 3px; 
    padding: 0.4em; 
    right: 6px; 
    border-radius: 4px; 
    background: rgba(35%, 35%, 35%, 0.5); 
    font-size: 1em; 
    font-family: 'Open Sans', sans-serif; 
    color: white; 
} 
} 
.prebuildh { 
    position: relative; 
    display: inline-flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    background: rgba(0%, 0%, 0%, 0.5); 
    padding: 15px; 
     
} 
.buildh { 
    display: inline-flex; 
    background: rgba(100%, 37%, 37%, 0.5); 
    padding: 6px; 
    margin: 10px; 
    border-radius: 6px; 
} 
.prebuildh .buildh img { 
    width: 25px; 
    height: 25px; 
    padding: 0 1px; 
} 
@media (min-width:350px) { 
   .prebuildh .buildh img { 
    width: 30px; 
    height: 30px; 
    padding: 0 2px; 
}  
} 
@media (min-width:700px) { 
   .prebuildh .buildh img { 
    width: 50px; 
    height: 50px; 
    padding: 0 5px; 
}  
} 
.buildh2 { 
    display: inline-flex; 
    background: rgba(39%, 37%, 100%, 0.5); 
    padding: 6px; 
    margin: 10px; 
    border-radius: 6px; 
} 
.prebuildh .buildh2 img { 
    width: 30px; 
    height: 30px; 
    padding: 0 5px; 
} 
@media (min-width:500px) { 
   .prebuildh .buildh2 img { 
    width: 50px; 
    height: 50px; 
    padding: 0 5px; 
}  
}

<div class="heroh">Способности</div> 
<div class="preutx"> 
<input id="tab1" type="radio" name="tabs" checked> 
<label for="tab1"><img src="img/heroes/Ringo/double-down.png"></label> 
<input id="tab2" type="radio" name="tabs"> 
<label for="tab2"><img src="img/heroes/Ringo/achilles-shot.png"></label> 
<input id="tab3" type="radio" name="tabs"> 
<label for="tab3"><img src="img/heroes/Ringo/twirling-silver.png"></label> 
<input id="tab4" type="radio" name="tabs"> 
<label for="tab4"><img src="img/heroes/Ringo/hellfire-brew.png"></label> 
<!-- Content --> 
 <section id="content1"> 
<img src="img/heroes/Ringo/double-down.png"> 
<div><div class="ch">Double Down (Ва-Банк)</div> 
<div class="chl">Умение героя</div></div> 
<div class="chcont">Следующая базовая атака Ринго после убийства любого противника будет критическим ударом.</div> 
  </section> 
  <section id="content2"> 
<img src="img/heroes/Ringo/achilles-shot.png"><div class="updyn">Патч 2.5</div> 
<div><div class="ch">Achilles Shot (Ахиллесов выстрел)</div> 
<div class="chl">A-Skill</div></div> 
<div class="chcont">Ринго стреляет в пятку своей цели (или другую нижнюю конечность), замедляя ее и нанося урон.<table> 
    <tr> 
        <td>Характеристики</td> 
        <td>LVL 1</td> 
        <td>LVL 2</td> 
        <td>LVL 3</td> 
        <td>LVL 4</td> 
        <td>LVL 5</td> 
        <td class="ss">% от кристалла</td> 
        <td class="ss2">% от оружия</td> 
    </tr> 
    <tr> 
        <td>Восстановление</td> 
        <td>9</td> 
        <td>8.5</td> 
        <td>8</td> 
        <td>7.5</td> 
        <td>7</td> 
        <td></td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Расход энергии</td> 
        <td>40</td> 
        <td>850</td> 
        <td>60</td> 
        <td>70</td> 
        <td>100</td> 
        <td></td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Урон</td> 
        <td>80</td> 
        <td>125</td> 
        <td>170</td> 
        <td>215</td> 
        <td>350</td> 
        <td class="ss">125%</td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Замедление</td> 
        <td>30%</td> 
        <td>35%</td> 
        <td>40%</td> 
        <td>45%</td> 
        <td>50%</td> 
        <td></td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Длительность замедления</td> 
        <td>1.5</td> 
        <td>1.5</td> 
        <td>1.5</td> 
        <td>1.5</td> 
        <td>2.5</td> 
        <td></td> 
        <td></td> 
    </tr> 
</table></div> 
</section> 
<section id="content3"> 
<img src="img/heroes/Ringo/twirling-silver.png"><div class="updyn">Патч 2.5</div> 
<div><div class="ch">Twirling Silver (Серебряный вихрь)</div> 
<div class="chl">B-Skill</div></div> 
<div class="chcont">Ринго ведет сумасшедший огонь по своей цели, значительно увеличивая скорость атаки и перемещения на время действия умения. 
<p>При активации сбрасывается восстановление базовой атаки.</p> 
<table> 
    <tr> 
        <td>Характеристики</td> 
        <td>LVL 1</td> 
        <td>LVL 2</td> 
        <td>LVL 3</td> 
        <td>LVL 4</td> 
        <td>LVL 5</td> 
        <td class="ss">% от кристалла</td> 
        <td class="ss2">% от оружия</td> 
    </tr> 
    <tr> 
        <td>Восстановление</td> 
        <td>9</td> 
        <td>9</td> 
        <td>9</td> 
        <td>9</td> 
        <td>9</td> 
        <td></td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Расход энергии</td> 
        <td>50</td> 
        <td>55</td> 
        <td>60</td> 
        <td>65</td> 
        <td>70</td> 
        <td></td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Урон</td> 
        <td>0</td> 
        <td>0</td> 
        <td>0</td> 
        <td>0</td> 
        <td>0</td> 
        <td class="ss">80%</td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Длительность</td> 
        <td>6</td> 
        <td>6</td> 
        <td>6</td> 
        <td>6</td> 
        <td>6</td> 
        <td></td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Скорость атаки</td> 
        <td>15%</td> 
        <td>25%</td> 
        <td>35%</td> 
        <td>45%</td> 
        <td>65%</td> 
        <td></td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Скорость передвижения</td> 
        <td>0.75</td> 
        <td>0.8</td> 
        <td>0.85</td> 
        <td>0.9</td> 
        <td>1</td> 
        <td></td> 
        <td></td> 
    </tr> 
</table></div> 
</section> 
<section id="content4"> 
<img src="img/heroes/Ringo/hellfire-brew.png"><div class="updyn">Патч 2.5</div> 
<div><div class="ch">Hellfire Brew (Адское пламя)</div> 
<div class="chl">C-Skill</div></div> 
<div class="chcont">Ринго делает большой глоток из фляги и выдыхает в свою цель спепеляющий огненный шар. При столкновении шар взрывается и воспламеняет жертву, обжигая ее и находящихся рядом врагов на протяжении 7 сек. 
<table> 
    <tr> 
        <td>Характеристики</td> 
        <td>LVL 1</td> 
        <td>LVL 2</td> 
        <td>LVL 3</td> 
        <td class="ss">% от кристалла</td> 
        <td class="ss2">% от оружия</td> 
    </tr> 
    <tr> 
        <td>Восстановление</td> 
        <td>100</td> 
        <td>85</td> 
        <td>70</td> 
        <td></td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Расход энергии</td> 
        <td>100</td> 
        <td>115</td> 
        <td>130</td> 
        <td></td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Урон</td> 
        <td>250</td> 
        <td>365</td> 
        <td>480</td> 
        <td class="ss">75%</td> 
        <td></td> 
    </tr> 
    <tr> 
        <td>Урон от ожога</td> 
        <td>30</td> 
        <td>50</td> 
        <td>70</td> 
        <td></td> 
        <td></td> 
    </tr> 
</table></div> 
</section> 
    </div>