/* Reset
---------------------------------------------------------- */

html,
body,
ul,
ol,
li,
form,
fieldset,
legend,
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 1em;
  margin-bottom: 0.5em;
}

fieldset,
img {
  border: 0;
}

legend {
  color: #000;
}

ul,
ol {
  list-style: none;
}

sup {
  vertical-align: text-top;
}

sub {
  vertical-align: text-bottom;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption,
th,
td {
  text-align: left;
  vertical-align: top;
  font-weight: normal;
}

input,
textarea,
select {
  font-size: 110%;
  line-height: 1.1;
}

abbr,
dfn[title] {
  border-bottom: .1em dotted;
  cursor: help;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

ins {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

hr {
  height: 1px;
  display: block;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 10px 0;
  clear: both;
}

/* Html 5 compatibility
---------------------------------------------------------- */

header,
footer,
section,
aside,
nav,
article,
figure,
hgroup,
audio,
canvas,
datalist,
video {
  display: block !important;
}

/* Basic grid system (or use http://www.1kbgrid.com/)
---------------------------------------------------------- */

.grid {
  clear: both;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.row {
  clear: both;
}

.cols {
  display: flex;
  overflow: hidden;
  float: left;
  flex-wrap: wrap;
  flex-direction: row;
}

.col {
  display: flex;
  overflow: hidden;
  float: left;
  flex-wrap: wrap;
  flex-direction: column;
  margin: 0px 5px;
}

.col75 {
  width: 75%;
  flex-basis: 510px;
  flex-grow: 1;
}

.col66 {
  width: 66%;
  flex-basis: 440px;
  flex-grow: 1;
}

.col50 {
  width: 50%;
  flex-basis: 250px;
  flex-grow: 1;
  flex-shrink: 1;
}

.col33 {
  width: 33%;
  flex-basis: 220px;
  flex-grow: 1;
}

.col25 {
  width: 25%;
  flex-basis: content;
}

.inner-col {
  margin: 0 10px;
}

/*	Utils
---------------------------------------------------------- */

#wrapper,
.wrapper {
  margin: 0 auto;
  max-width: 960px;
  width: 80vw;
}

.hide-me {
  display: block;
  left: -9999px;
  position: absolute;
  visibility: hidden;
}

.clear {
  clear: both;
}

.left {
  float: left;
}

img.left {
  margin-right: 10px;
}

.right {
  float: right;
}

img.right {
  margin-left: 10px;
}

/* New clearfix hack
---------------------------------------------------------- */

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

* html .clearfix {
  height: 1%;
}

/* IE6 */

*:first-child+html .clearfix {
  min-height: 0;
}

/* IE7 */

/* Menu. add hover behaviour with jquery for older browsers
---------------------------------------------------------- */

#menu {
  background-color: #000;
  position: relative;
  z-index: 500;
  margin: 0;
  width: 100%;
  height: 40px;
}

.menu,
.menu ul {
  list-style: none;
  margin: 0;
}

.menu li {
  float: left;
  width: auto;
  position: relative;
  background: url('../images/menu-bullet.png') center right no-repeat;
}

.menu li.last {
  background: none;
}

.menu li a {
  display: inline-block;
  padding: 5px 20px 5px 10px;
  color: #eee;
  text-decoration: none;
  height: 30px;
  line-height: 2.5em;
  font-size: 1.2em;
}

.menu li a:hover,
.menu li a.hover,
.menu li.current>a {
  background: url('../images/menu-indicator.png') center left no-repeat;
}

.menu li.current>a {
  cursor: default;
  text-shadow: 3px 3px 3px rgb(156, 156, 156);
}

.menu li ul {
  display: none;
  position: absolute;
  left: 0px;
  top: 40px;
  border-left: 3px solid #333;
}

.menu li:hover ul,
.menu li.hover ul {
  display: block;
}

.menu li ul li {
  clear: both;
  background: none;
  border-top: 1px solid #333;
  margin: 0;
  padding: 0;
  display: block;
}

.menu li ul li a {
  background: #222 !important;
  font-size: 1em;
  width: 150px;
  border-right: 0;
  height: auto;
  line-height: 1.6em;
}

.menu li ul li a:hover {
  background: #222 !important;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the menu (.icon) */
@media screen and (max-width: 600px) {
  #menu {
    margin: 0;
  }

  .menu li {
    display: none;
    background: #000;
  }

  .menu li.icon {
    float: right;
    display: block;
    text-align: left;
    position: initial;
    background: none;
  }

  .menu li a:hover {
    background: #000;
  }

  .menu li.last {
    display: none;
    background: #000;
  }

  .menu li a:last-child {
    padding-top: 0;
  }
}

/* The "responsive" class is added to the menu with JavaScript when the user clicks on the icon. This class makes the menu look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  #menu.responsive {
    max-height: none;
    margin: 0;

  }

  .menu.responsive li {
    float: none;
    display: block;
  }

  .menu.responsive li ul {
    float: none;
    display: block;
    position: relative;
    left: 20px;
    top: 0;
    max-height: none;
  }

  .menu.responsive li ul li {
    float: none;
    display: block;
    background: none;
  }

  .menu.responsive li.icon {
    position: absolute;
    background: none;
    right: 0;
    top: 0;
  }

  .menu.responsive a {
    /*float: none;*/
    display: block;
    /*text-align: left;*/
  }
}

.icon {
  display: none;
}

.submenu {
  padding-right: 15px;
}

@media screen and (max-width: 600px) {
  .submenu {
    visibility: hidden;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
  }
}

.submenu li.current {
  font-weight: bold;
}

#lang-menu {
  position: absolute;
  top: 10px;
  right: 0;
}

#lang-menu li {
  float: left;
  height: 20px;
  line-height: 20px;
  padding: 0 5px;
  background: #eee;
  margin-left: 5px;
}

/* Headers
-------------------------------------------------------------- */

h1 {
  font-size: 2em;
  line-height: 2em;
  padding: 0.75em 0 0.75em 1.7em;
  font-weight: normal;
  font-family: 'CartoGothicStdBook', Tahoma, "Segoe UI", Segoe, Geneva, sans-serif !important;
  color: #ea7400;
  background: url('../images/triangle.png') center left no-repeat;
}

/* Custom site layout
---------------------------------------------------------- */

#background {
  background: #fff url('../images/bg-bamboo.png') no-repeat;
  background-position: max(calc(calc(100vw - 960px) / 2 - 322px), calc(10vw - 319px)) 0px;
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: -1;

}

#wrapper,
.wrapper {
  background: #fff url('../images/bg-bamboo-trans.png') top left no-repeat;
  border: 1px solid #000;
  border-top: 0;
}

@media screen and (max-width: 500px) {

  #wrapper,
  .wrapper {
    width: 100vw;
    border: 0;
  }
}

#top-bar {
  padding: 10px 0;
}

#top-bar p {
  float: left;
}

.top-menu {
  position: absolute;
  top: 10px;
  right: 10px;
}

.top-menu li {
  float: right;
  padding: 10px;
}

#header {
  height: 130px;
  background: url('../images/header-sun.jpg') no-repeat;
}

.content {
  height: calc(100vh - 52px - 130px - 40px - 54px - 15px);
}

#footer {
  margin: 10px 0 0 10px;
  font-size: 0.6em;
  text-align: left;
  color: #6c6c6c;
}

#footer a {
  color: #474747;
}

#content {
  position: relative;
  z-index: 0;
  padding: 10px;
}

#page-title {
  padding: 10px;
}

#page-title .title {
  font-size: 2.2em;
  line-height: 2.7em;
  display: block;
  font-family: 'CartoGothicStdBook', Tahoma, "Segoe UI", Segoe, Geneva, sans-serif !important;
}

td {
  text-align: right;
  width: 80px;
  border: 1px solid #ffffff;
  background-color: #ff9900;
}

.table-header {
  text-align: center;
  background-color: #99cccc;
  width: 80px;
  height: 30px;
  border: #ffffff 1px solid;
  vertical-align: middle;
}

.form.container {
  display: flex;
  gap: 2rem;
  padding: 1rem;
}

.form.container ol {
  list-style-type: decimal;
  font-weight: bold;
  margin-left: 15px;
}

.form.container ol ol {
  list-style-type: lower-alpha;
  font-weight: normal;
  margin-top: 0;
  margin-left: 30px;
}

.form.container ol ol ol {
  list-style-type: decimal;
  margin-left: 30px;
}

@media (max-width: 768px) {
  .form.container {
      flex-direction: column;
      width: 100%;
  }
}

.form td {
  text-align: unset;
  width: unset;
  border: unset;
  background-color: unset;
}

@media screen and (max-width: 600px) {
  #page-title .title {
    font-size: 1.2em;
    line-height: 1.5em;
  }

  #header {
    width: 100vw;
    aspect-ratio: 96/13;
    height: fit-content;
    background-size: cover;
  }

  .content {
    height: calc(100vh - 48.8px - 49px - 40px - 29px - 15px);
  }

  #footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }
}

#page-title .tagline {
  font-size: 1.7em;
  line-height: 2.2em;
  display: block;
  text-indent: 100px;
  font-family: 'CartoGothicStdBook', Tahoma, "Segoe UI", Segoe, Geneva, sans-serif !important;
}

.teacher-holder {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
}

a.logout {
  position: absolute;
  top: 10px;
  right: 10px;
}

.download-box {
  padding: 10px;
  margin: 10px 0;
  background: #ccc;
}