@font-face {
  font-family: "DIN";
  src: url("/fonts/DIN-Light.otf") format("opentype");
  font-size: larger;
}

html,
body {
  background-image: url("/images/Background-Image.jpg");
  overflow-x: hidden;
  margin: 0;
  font-family: "DIN", "Roboto", "Segoe UI", "Segoe UI Webfont", -apple-system,
    "Helvetica Neue", "Lucida Grande", "Roboto", "Ebrima", "Nirmala UI",
    "Gadugi", "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI",
    "Tunga", "Lao UI", "Raavi", "Iskoola Pota", "Latha", "Leelawadee",
    "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic",
    "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue",
    "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti",
    "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
}

/* Loading CSS */

.lds-ring {
  display: inline-block;
  position: relative;
  width: 35px;
  height: 35px;
  display: none;
  margin-left: auto;
  margin-right: auto;
}
.lds-ring section {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  margin: 8px;
  border: 8px solid black;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: black transparent transparent transparent;
}
.lds-ring section:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring section:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring section:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Loading CSS */

.lds-ring-ps {
  display: inline-block;
  position: relative;
  width: 35px;
  height: 35px;
  display: none;
  margin-left: auto;
  margin-right: auto;
}
.lds-ring-ps section {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  margin: 8px;
  border: 8px solid black;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: black transparent transparent transparent;
}
.lds-ring-ps section:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring-ps section:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring-ps section:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring-ps {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Loading CSS */

.lds-ring-sp {
  display: inline-block;
  position: relative;
  width: 35px;
  height: 35px;
  display: none;
  margin-left: auto;
  margin-right: auto;
}
.lds-ring-sp section {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  margin: 8px;
  border: 8px solid black;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: black transparent transparent transparent;
}
.lds-ring-sp section:nth-child(1) {
  animation-delay: -0.45s;
}
.lds-ring-sp section:nth-child(2) {
  animation-delay: -0.3s;
}
.lds-ring-sp section:nth-child(3) {
  animation-delay: -0.15s;
}
@keyframes lds-ring-sp {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@media only screen and (min-width: 1301px) and (max-width: 8000px) {
  .logo {
    width: 4em;
    padding: 1em;
    margin-left: 3em;
    display: inline;
  }

  a {
    color: #00b7ff;
  }

  input {
    display: block;
    font-size: 0.8em;
    width: 26em;
    outline: 0;
    border-width: 0 0 1px;
    padding: 0.5em;
    margin-left: 4.2em;
  }

  select {
    /* Reset Select */
    /* appearance: none; */
    outline: 0;
    border-radius: 0.2em;
    border: solid;
    border-width: 0.1em;
    border-top: 0em;
    border-right: 0em;
    border-left: 0em;
    box-shadow: none;
    font-size: 0.82em;
    /* Personalize */
    flex: 1;
    padding: 0 0.5em;
    color: black;
    background-color: white;
    background-image: none;
    cursor: pointer;
  }
  /* Remove IE arrow */
  select::-ms-expand {
    display: none;
  }
  /* Custom Select wrapper */
  .select {
    position: relative;
    display: flex;
    width: 28em;
    margin-left: auto;
    margin-right: auto;
    height: 2em;
    border-radius: 0.25em;
    overflow: hidden;
  }
  /* Arrow */
  .select::after {
    content: "\25BC";
    font-size: 0.8em;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.5em;
    background-color: white;
    transition: 0.25s all ease;
    pointer-events: none;
  }
  /* Transition */
  .select:hover::after {
    color: black;
  }

  .submit {
    background-color: #034638;
    border: none;
    color: white;
    margin-left: 13.5em;
    margin-top: 1em;
    margin-bottom: 3em;
    width: 13em;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
  }

  .submit:hover {
    cursor: pointer;
  }
}
@media only screen and (min-width: 600px) and (max-width: 1300px) {
  .logo {
    width: 4em;
    padding: 1em;
    margin-left: 3em;
    display: inline;
  }

  a {
    color: #00b7ff;
  }

  input {
    display: block;
    font-size: 0.8em;
    width: 26em;
    outline: 0;
    border-width: 0 0 1px;
    padding: 0.5em;
    margin-left: 4.2em;
  }

  select {
    /* Reset Select */
    /* appearance: none; */
    outline: 0;
    border-radius: 0.2em;
    border: solid;
    border-width: 0.1em;
    border-top: 0em;
    border-right: 0em;
    border-left: 0em;
    box-shadow: none;
    font-size: 0.82em;
    /* Personalize */
    flex: 1;
    padding: 0 0.5em;
    color: black;
    background-color: white;
    background-image: none;
    cursor: pointer;
  }
  /* Remove IE arrow */
  select::-ms-expand {
    display: none;
  }
  /* Custom Select wrapper */
  .select {
    position: relative;
    display: flex;
    width: 20em;
    margin-left: auto;
    margin-right: auto;
    height: 2em;
    border-radius: 0.25em;
    overflow: hidden;
  }
  /* Arrow */
  .select::after {
    content: "\25BC";
    font-size: 0.8em;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.2em;
    background-color: white;
    transition: 0.25s all ease;
    pointer-events: none;
  }
  /* Transition */
  .select:hover::after {
    color: black;
  }

  .submit {
    background-color: #034638;
    border: none;
    color: white;
    margin-left: 13.5em;
    margin-top: 1em;
    margin-bottom: 3em;
    width: 13em;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
  }

  .submit:hover {
    cursor: pointer;
  }
}
@media only screen and (min-width: 251px) and (max-width: 599px) {
  .logo {
    width: 2em;
    padding: 1em;
    margin-left: 0em;
    display: inline;
  }

  a {
    color: #00b7ff;
  }

  input {
    display: block;
    font-size: 0.8em;
    width: 13em;
    outline: 0;
    border-width: 0 0 1px;
    padding: 0.5em;
    margin-left: 2em;
  }

  select {
    /* Reset Select */
    /* appearance: none; */
    outline: 0;
    border-radius: 0.2em;
    border: solid;
    border-width: 0.1em;
    border-top: 0em;
    border-right: 0em;
    border-left: 0em;
    box-shadow: none;
    font-size: 0.82em;
    /* Personalize */
    flex: 1;
    padding: 0 0.5em;
    color: black;
    background-color: white;
    background-image: none;
    cursor: pointer;
  }
  /* Remove IE arrow */
  select::-ms-expand {
    display: none;
  }
  /* Custom Select wrapper */
  .select {
    position: relative;
    display: flex;
    width: 12em;
    margin-left: 1.5em;
    height: 2em;
    border-radius: 0.25em;
    overflow: hidden;
  }
  /* Arrow */
  .select::after {
    content: "\25BC";
    font-size: 0.8em;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.2em;
    background-color: white;
    transition: 0.25s all ease;
    pointer-events: none;
  }
  /* Transition */
  .select:hover::after {
    color: black;
  }

  .submit {
    background-color: #034638;
    border: none;
    color: white;
    margin-left: 5em;
    margin-top: 1em;
    margin-bottom: 3em;
    width: 10em;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
  }

  .submit:hover {
    cursor: pointer;
  }
}
@media only screen and (min-width: 20px) and (max-width: 250px) {
  .logo {
    width: 2em;
    padding: 1em;
    margin-left: 0em;
    display: inline;
  }

  a {
    color: #00b7ff;
  }

  input {
    display: block;
    font-size: 0.8em;
    width: 11em;
    outline: 0;
    border-width: 0 0 1px;
    padding: 0.5em;
    margin-left: 2em;
  }

  select {
    /* Reset Select */
    /* appearance: none; */
    outline: 0;
    border-radius: 0.2em;
    border: solid;
    border-width: 0.1em;
    border-top: 0em;
    border-right: 0em;
    border-left: 0em;
    box-shadow: none;
    font-size: 0.82em;
    /* Personalize */
    flex: 1;
    padding: 0 0.5em;
    color: black;
    background-color: white;
    background-image: none;
    cursor: pointer;
  }
  /* Remove IE arrow */
  select::-ms-expand {
    display: none;
  }
  /* Custom Select wrapper */
  .select {
    position: relative;
    display: flex;
    width: 10em;
    margin-left: 0.8em;
    height: 2em;
    border-radius: 0.25em;
    overflow: hidden;
  }
  /* Arrow */
  .select::after {
    content: "\25BC";
    font-size: 0.8em;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0.2em;
    background-color: white;
    transition: 0.25s all ease;
    pointer-events: none;
  }
  /* Transition */
  .select:hover::after {
    color: black;
  }

  .submit {
    background-color: #034638;
    border: none;
    color: white;
    margin-left: 3em;
    margin-top: 1em;
    margin-bottom: 3em;
    width: 10em;
    padding: 8px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 13px;
  }

  .submit:hover {
    cursor: pointer;
  }
}