/**
 * v1.0.1 07/12/2023
 * By MM
 */

/********************************************

<RESET CSS (MEYERWEB)>

*********************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

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

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

/********************************************

</RESET CSS (MEYERWEB)>

*********************************************/
/********************************************

<RESET CSS (CUSTOM)>

*********************************************/

a {
  text-decoration: none;
  color: inherit;
}

.reset-button
{
  border: none;
  background: none;
  cursor: pointer;
}

em
{
  font-style: italic;
}

/********************************************

</RESET CSS (CUSTOM)>

*********************************************/
/********************************************

<UTILITY>

*********************************************/

.d-table {
  display: table;
}

.d-block {
  display: block;
}

.d-none
{
	display: none !important;
}

.v-align {
  display: table;
  height: 100%;
  margin: 0 auto;
}

.v-align > .middle {
  display: table-cell;
  vertical-align: middle;
}

.abs-h-centered
{
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

.abs-v-centered
{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.w-100perc
{
  width: 100%;
}

.margin-0-auto
{
  margin: 0 auto;
}

.line-height-0
{
  line-height: 0;
}

.color-1 {
  color: #1a1a1a;
}

.color-3 {
  color: #00ffff;
}

.bckg-color-1 {
  background-color: antiquewhite;
}

.bckg-color-3 {
  background-color: #00ffff;
}

.dull-background
{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

.dull-background.black
{
  background: rgba(0,0,0,0.4);
}

.dull-background.white
{
  background: rgba(255,255,255,0.4);
}

.opac-wrap .black-opac
{
  position: relative;
  z-index: -1;
  opacity: 0.4;
}

.opac-wrap .in-top
{
  z-index: 1;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/********************************************

</UTILITY)>

*********************************************/

/********************************************

<MIXIN>

*********************************************/

html {
  height: 100vh;
}

#navbar-top
{
  position: relative;
  z-index: 10;
}



/********************************************

</MIXIN>

*********************************************/

/**
* <TABLET
*/

@media (max-width: 1024px) {

  /********************************************

  <UTILITY>

  *********************************************/

  .v-align-m {
    display: table;
    height: 100%;
    margin: 0 auto;
  }
  
  .v-align-m > .middle-m {
    display: table-cell;
    vertical-align: middle;
  }

  /********************************************

  <UTILITY>

  *********************************************/

  #embed-iframe
  {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    text-align: center;
  }

  #embed-iframe iframe
  {
    position: relative;
  }

  #navbar-top
  {
    text-align: center;
    padding: 40px 0;
  }

  #embed-iframe iframe
  {
    top: 72px;
  }

  #navbar-top #logo
  {
    width: 350px;
  }

}

@media (max-width: 768px) {


}

/**
* </TABLET
*/

/**
* <MOBILE
*/

@media (max-width: 640px) {

  #navbar-top #logo
  {
    width: 350px;
  }

}

@media (max-width: 560px) {

}

@media (max-width: 480px) {

}

@media (max-width: 400px) {

  #navbar-top #logo
  {
    width: 240px;
  }

}

@media (max-width: 1024px) and (orientation:landscape) {

  html {
    height: 100%;
  }

  #navbar-top
  {
    text-align: left;
    padding: 10px;
  }

  #navbar-top #logo
  {
    width: 160px;
  }

  #embed-iframe iframe
  {
    top: 0;
  }

}

/**
* </MOBILE
*/

/**
* <DESKTOP
*/

@media (min-width: 1025px) {

  header
  {
    height: 6vh;
    padding: 20px 0;
  }

  main
  {
    height: calc(94vh - 60px); /* 40 + 20: 40px = <header> padding, 20px = <main> padding */
    padding-top: 20px;
  }

  #navbar-top #logo
  {
    height: 100%;
  }

  #embed-iframe iframe
  {
    display: block;
    margin: 0 auto;
  }

}

@media (min-width: 1201px) {


}

@media (min-width: 1350px) {


}

@media (min-width: 1500px) {


}

@media (min-width: 1921px) {

}

/**
* </DESKTOP
*/