@font-face {
  font-family: 'HP Simplified Light';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/HPSimplified_Lt.ttf);
}

@font-face {
  font-family: 'HP Simplified';
  font-style: bold;
  font-weight: 700;
  src: url(../fonts/HPSimplified_Bd.ttf);
}

*{
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1;
  transition: 0.4s;
  scroll-behavior: smooth;
  text-align: left;
  font-family: 'HP Simplified Light', sans-serif;
  font-weight: normal;
  color: #000;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.nobar::-webkit-scrollbar       { width:  0; height: 0; }
::-webkit-scrollbar             { width:  12px; height: 12px; }/* width */
::-webkit-scrollbar-track       { padding: 8px; background: #e6e6e6;} /* Track */
::-webkit-scrollbar-thumb       { background: #000; } /* Handle */
::-webkit-scrollbar-thumb:hover { background: #444; }/* Handle on hover */
h1{ font-size: 180%; font-weight:bold; font-family: 'HP Simplified', sans-serif; }
h2{ font-size: 160%; font-weight:bold; font-family: 'HP Simplified', sans-serif; }
h3{ font-size: 140%; font-weight:bold; font-family: 'HP Simplified', sans-serif; }
h4{ font-size: 120%; font-weight:normal }
p { font-size: 100%; font-weight:normal }
h5{ font-size:  80%; font-weight:normal }
h6{ font-size:  70%; font-weight:normal }
body{ height: 100%; overflow-y: scroll; }
main{ width: 100%; height: auto; margin: auto; }

.L2R,.R2L{ display: flex; }
.L2R{ flex-flow: row wrap; }
.R2L{ flex-flow: row-reverse wrap; }

main.prem header section{ min-height: 105px; padding: 20px 30px; display: flex; }
main.prem header aside{ padding: 21px; display:flex; align-items:center; flex-flow: column; }
main.prem header figure img{ border-radius: 20px; }
main.prem header aside:nth-of-type(1){ min-height: 300px; }
main.prem header aside:nth-of-type(2){ min-height: 130px; background-color:#000; }
main.prem header aside:nth-of-type(2) h3{ color: #FFF; }

main.prem header,
main.prem article{ width: 100%; padding-bottom: 20px; }
main.prem article section:nth-of-type(1) img{ border-radius: 20px; }
main.prem article section:nth-of-type(2){ padding: 40px; }
main.prem article section:nth-of-type(2) h1,
main.prem article section:nth-of-type(2) h2,
main.prem article section:nth-of-type(2) p{ margin-bottom: 20px; }

main.prem article.KSP section{ width: 100%; }

main.prem article#SPEC{ display: flex; flex-flow: row wrap; }
main.prem article#SPEC aside{ width: 100%; padding: 20px;  }
main.prem article#SPEC aside img{ display: block; margin: auto; }
main.prem article#SPEC aside h2,
main.prem article#SPEC aside p{ margin-top: 20px; text-align: center; }

#FICHA section{ padding: 21px 28px; }
#FICHA section h2{ text-align: center; color: #A1A1A1; }

table{ width: 100%; border-spacing: 0; }
.rank th, .rank td{ border-top: 2px solid #A1A1A1; color: #A1A1A1; }
th{ font-size: 150%; border-right: 2px solid #A1A1A1; }
td{ font-size: 120%; }
th,td{ padding: 20px; font-weight: bold; text-align: center; }
tr td:nth-of-type(1):not(.rank td){ border-right: 2px solid #A1A1A1; }

@media only screen and (max-width: 1220px) {
  .desview{ display: none; }
  .mobview{ display: block; }
  main{ max-width: 720px; }
  main.prem article#SPEC aside:nth-of-type(1),
  main.prem article#SPEC aside:nth-of-type(2),
  main.prem article#SPEC aside:nth-of-type(3),
  main.prem article#SPEC aside:nth-of-type(4),
  main.prem article#SPEC aside:nth-of-type(5){ border-top: 1px solid black; }
}
@media only screen and (min-width: 1220px) {
  .desview{ display: block; }
  .mobview{ display: none; }
  main{ max-width: 1220px; }
  main.prem header aside{ padding: 21px 100px;}
  main.prem article.intro section:nth-of-type(1){ max-width: 610px; }
  main.prem article.intro section:nth-of-type(2){ max-width: 610px; }
  main.prem article.KSP section:nth-of-type(1){ max-width: 800px; }
  main.prem article.KSP section:nth-of-type(2){ max-width: 420px; }
  main.prem article#SPEC aside{ max-width: 305px; height: 250px; }
}