@font-face {
  font-family: 'FormaDJR Micro-Regular';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/FormaDJRMicro-Regular.ttf);
}

@font-face {
  font-family: 'FormaDJR Display-Regular';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/FormaDJRDisplay-Regular.ttf);
}

*{
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  line-height: 1;
  transition: 0.4s;
  scroll-behavior: smooth;
  text-align: left;
  font-family: 'FormaDJR Micro-Regular', 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: 300%; font-weight:normal; font-family: 'FormaDJR Display-Regular', sans-serif; }
h2{ font-size: 250%; font-weight:normal; font-family: 'FormaDJR Display-Regular', sans-serif; }
h3{ font-size: 220%; font-weight:normal }
h4{ font-size: 180%; font-weight:normal }
p { font-size: 150%; font-weight:normal }
h5{ font-size: 100%; font-weight:normal }
h6{ font-size:  80%; font-weight:normal }

body{ height: 100%; overflow-y: scroll; }
img{display: block;}
main{ width: 100%; height: auto; margin: auto; }
article.row, article.row section, article.row section aside{ width: 100%; }
article.row{ margin-bottom: 30px; }
article.col5050, article.col4060, article.col3070{ display: flex; align-content: flex-start; align-items: flex-start; }
article.col5050 section{ max-width: 610px; }
article.row section aside{ padding: 28px; }

#MOTTO section{ display: flex; }
#SPECS h3{ margin-bottom: 28px; }

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

.test{ border: 2px dashed red; }
.tline{border-top: 1px solid #000;}
table{ border-spacing: 0; table-layout: fixed; }
table *{ word-wrap: break-word; }
th{ font-size: 150%; }
td{ font-size: 120%; }
th,td{ padding: 24px; border-bottom: 1px solid black; }

@media only screen and (max-width: 1220px) {
  main{ max-width: 720px; } .DESview{ display: none; }
  article.col5050 section{ max-width: 720px; }
  #MOTTO section{ flex-flow: column; }
}
@media only screen and (min-width: 1220px) {
  main{ max-width: 1220px; } .MOBview{ display: none; }
  article.col5050 section{ max-width: calc(1220px - 50%); }
  article.col4060 section:nth-of-type(1){ max-width: calc(1220px - 60%) }
  article.col4060 section:nth-of-type(2){ max-width: calc(1220px - 40%) }
  article.col3070 section:nth-of-type(1){ max-width: calc(1220px - 70%) }
  article.col3070 section:nth-of-type(2){ max-width: calc(1220px - 30%) }
  h1{ font-size: 450%;}
  h2{ font-size: 350%;}
  #MOTTO section img{ max-width: 300px; }
  #SPECS section:nth-of-type(1){ border-right: 1px solid #000; }
  #SPECS section:nth-of-type(3){ border-top: 1px solid #000; border-right: 1px solid #000; }
  #SPECS section:nth-of-type(4){ border-top: 1px solid #000; }
}