.w3-bottom, .w3-top {
  z-index: 3;
  position: fixed;
  width: 100%;
}
.w3-bottom {
  bottom: 0;
}
.w3-container {
  padding: 0.01em 1.6rem;
}
.w3-container:before, .w3-container:after {
  content: "";
  display: table;
  clear: both;
}
.w3-show {
  display: block!important;
}
.w3-top {
  top: 0;
}

/* body */
:root {
  box-sizing: border-box;
  font-size: 62.5%;
  text-size-adjust: none !important;
  -moz-text-size-adjust: none !important;
  -webkit-text-size-adjust: none !important;
}
@font-face {
  font-style: normal;
  font-weight: 300;
  font-family: "Roboto";
  src: url("../fonts/roboto-v29-latin-300-eot.php"); /* IE9 Compat Modes */
  src: local(""),
       url("../fonts/roboto-v29-latin-300-eot.php?#iefix") format("embedded-opentype"), /* IE6-IE8 */
       url("../fonts/roboto-v29-latin-300-woff2.php") format("woff2"), /* Super Modern Browsers */
       url("../fonts/roboto-v29-latin-300-woff.php") format("woff"), /* Modern Browsers */
       url("../fonts/roboto-v29-latin-300-ttf.php") format("truetype"), /* Safari, Android, iOS */
       url("../fonts/roboto-v29-latin-300-svg.php#Roboto") format("svg"); /* Legacy iOS */
  font-display: swap;
}
@font-face {
  font-style: normal;
  font-weight: 400;
  font-family: "Roboto";
  src: url("../fonts/roboto-v29-latin-regular-eot.php"); /* IE9 Compat Modes */
  src: local(""),
       url("../fonts/roboto-v29-latin-regular-eot.php?#iefix") format("embedded-opentype"), /* IE6-IE8 */
       url("../fonts/roboto-v29-latin-regular-woff2.php") format("woff2"), /* Super Modern Browsers */
       url("../fonts/roboto-v29-latin-regular-woff.php") format("woff"), /* Modern Browsers */
       url("../fonts/roboto-v29-latin-regular-ttf.php") format("truetype"), /* Safari, Android, iOS */
       url("../fonts/roboto-v29-latin-regular-svg.php#Roboto") format("svg"); /* Legacy iOS */
  font-display: swap;
}
html, body {
  height: 100% !important;
  width: 100% !important;
  margin: 0;
  border: 0;
  padding: 0;
  background: 0 0;
  outline: 0;
  scroll-behavior: smooth;
}
body {
  display: flex;
  flex-direction: column;
  background: var(--w3-theme-l4-background-color) no-repeat fixed center;
  background-size: cover;
  font: 300 1.5rem/1.75 Roboto, sans-serif !important;
  ms-overflow-style: none;
  scrollbar-width: none;
}
body::-webkit-scrollbar {
  display: none;
}
h1, h2, h3, h4, h5, h6 {
  font-family: Roboto, sans-serif;
  font-weight: 300;
}
h1, h2, h3, h4, h5 {
  border-radius: 0.8rem;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.2rem;
  background-color: var(--w3-theme-l1-background-color) !important;
  color: var(--w3-theme-l1-color) !important;
}
h1 {
  margin: 1.6rem auto 0;
  padding: 1.6rem;
  font-size: 2.4rem;
}
h2 {
  margin: 1.6rem auto;
}
h2, h3 {
  margin: 1.2rem auto;
  padding: 1.2rem;
  font-size: 2.2rem;
}
h2:first-child, h3:first-child {
  margin-top: 0;
}
h4, h5 {
  margin: 0.8rem auto;
  padding: 0.8rem;
  font-size: 2rem;
}
h4:first-child, h5:first-child {
  margin-top: 0;
}
h6 {
  padding: 0.4rem auto;
  font-size: 1.8rem;
}
iframe {
  margin: 0 0 -0.8rem;
  border: none;
  width: 100%;
  ms-overflow-style: none;
  scrollbar-width: none;
}
iframe::-webkit-scrollbar {
  display: none;
}
input {
  background-color: var(--w3-theme-l4-background-color) !important;
  color: var(--w3-theme-l4-color) !important;
}
p {
  margin: 0;
}
progress {
  background-color: var(--w3-theme-background-color) !important;
  color: var(--w3-theme-color) !important;
}
progress[value]::-webkit-progress-bar {
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.25) inset;
  border-radius: 0.2rem;
  background-color: #eee;
}
progress[value]::-webkit-progress-value {
  border-radius: 0.2rem;
  background-image:
    -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.25)),
    background-size: 3.5rem 2rem, 100% 100%, 100% 100%;
  background-image:
    -webkit-linear-gradient(left, var(--w3-theme-l3-background-color), var(--w3-theme-d3-background-color));
}
select {
  background-color: var(--w3-theme-l4-background-color) !important;
  color: var(--w3-theme-l4-color) !important;
}
table {
  margin: auto;
}
td, th {
  padding: 0.8rem !important;
  text-align: center !important;
  font-weight: inherit;
}
td {
  vertical-align: middle !important;
}
th {
  vertical-align: top !important;
}
textarea {
  resize: none;
  overflow: hidden;
  background-color: var(--w3-theme-l4-background-color) !important;
  color: var(--w3-theme-l4-color) !important;
}

/* header */
header {
  box-shadow: 0 0.4rem 1rem 0 rgba(0, 0, 0, 0.2), 0 0.4rem 2rem 0 rgba(0, 0, 0, 0.19);
  background-color: var(--w3-theme-background-color) !important;
  color: var(--w3-theme-color) !important;
}
  /* nav logo */
#nav-logo {
  text-align: center;
}
#nav-logo a {
  display: block !important;
  background-color: transparent !important;
}
#logo {
  height: 15rem;
  width: 24.3333rem;
  padding: 1.5rem;
}
/* main */
#content {
  flex: 1 0 auto;
  width: 100%;
  margin: auto;
  padding-top: 15rem;
}
.button-normal {
  margin: 0.4rem 0.2rem;
  border-radius: 0.8rem;
  background-color: var(--w3-theme-l1-background-color) !important;
  color: var(--w3-theme-l1-color) !important;
}
#go-top-button {
  display: none;
  position: fixed;
  bottom: 5.8rem;
  border-radius: 0.8rem;
  padding: 1.0375rem 1.6rem;
  text-shadow: 0 0 1.8rem #000;
  cursor: pointer;
  color: var(--w3-theme-color) !important;
}
@media (hover:hover) {
#go-top-button:hover {
  box-shadow: 0 0.4rem 1rem 0 rgba(0, 0, 0, 0.2), 0 0.4rem 2rem 0 rgba(0, 0, 0, 0.19);
  background-color: var(--w3-theme-l1-background-color) !important;
  color: var(--w3-theme-l1-color) !important;
}}
#loading-spinner {
  display: none;
  z-index: 4;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow-y: auto;
  ms-overflow-style: none;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
#loading-spinner::-webkit-scrollbar {
  display: none;
}
.loading-spinner::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 10rem;
  width: 10rem;
  margin: auto;
  border: 1rem solid transparent;
  border-radius: 50%;
  border-top-color: var(--w3-theme-background-color);
  content: "";
  animation: loading-spinner 1s ease infinite;
}
@keyframes loading-spinner {
  from {transform: rotate(0turn);}
  to {transform: rotate(1turn);}
}
.no-decor {
  text-decoration: none;
}
.center-h {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.center-h-r {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.center-h-center-v {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.center-v {
  position: absolute;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
}
.center-v-r {
  position: relative;
  top: 50%;
  margin: 0;
  transform: translateY(-50%);
}
  /* card */
.card {
  box-shadow: 0 0.4rem 1rem 0 rgba(0, 0, 0, 0.2), 0 0.4rem 2rem 0 rgba(0, 0, 0, 0.19);
  margin-top: 1.6rem;
  border-radius: 0.8rem;
  padding: 1.6rem;
  background-color: var(--w3-theme-l3-background-color) !important;
  color: var(--w3-theme-l3-color) !important;
}
.card img {
  width: 100%;
  border-radius: 0.8rem;
}
.card p {
  padding: 0.8rem;
}
.disable {
  opacity: 0.5;
  cursor: not-allowed !important;
  pointer-events: none;
}
/* footer */
#footer {
  flex-shrink: 0;
  width: 100%;
  margin: auto;
  padding-top: 1.6rem;
  padding-bottom: 5rem;
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
/* header */
  /* nav logo */
#nav-logo {
  text-align: left;
}
/* main */
#content {
  max-width: 100rem;
}
  /* card */
.iframe {
  margin: 1.6rem auto 0;
  max-width: 80rem;
}
/* footer */
#footer {
  max-width: 100rem;
}
}