@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(/Commissioner-Thin.ttf);
}
@font-face {
  font-family: 'Commissioner';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/Commissioner-Black.ttf);
}

* {
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
.htop {
  margin-top:10vmin;
}

@media all and (orientation:portrait) {
  .htop {
    margin-top:calc(50vh - 41vw);
  }

  div.page div.c04{
    width: calc(100% - 32pt);
    height: calc(25% - 32pt);
  }
  div.page div.c03{
    width: calc(100% - 32pt);
    height: calc(33% - 32pt);
  }
  div.page div.c02{
    width: calc(100% - 32pt);
    height: calc(50% - 32pt);
  }
}

@media all and (orientation:landscape) {
  .htop {
    margin-top:11vh;
  }

  div.page div.c04{
    width: calc(25% - 32pt);
    height: calc(100% - 32pt);
  }
  div.page div.c03{
    width: calc(33% - 32pt);
    height: calc(100% - 32pt);
  }
  div.page div.c02{
    width: calc(50% - 32pt);
    height: calc(100% - 32pt);
  }
}

.bottomBar {
  display: block;
  position: relative;
  height: 42pt;
  width: 100%;
  text-align: center;
  margin-bottom: -42pt;
  top: -42pt;
  owerflow: hidden;
}

.bottomBar>a{
  display:inline-block;
  height: 40pt;
  width: 40pt;
  owerflow: hidden;
  text-decoration: none;
  background-color: #000;
  border-radius: 40pt;
}
.bottomBar>a.nextPage{
  background: #ddd url(angle-down-solid.svg) center center/50% no-repeat;
  font-size: 0;
}
.bottomBar>a.firstPage{
  background: #ddd url(angles-up-solid.svg) center center/50% no-repeat;
  font-size: 0;
}
a.page{
  position: relative;
}
div.page{
  position: relative;
  width: calc(100% - 30pt);
  height: calc(100vh - 30pt);
  overflow: hidden;
  font-size: 0;
  padding: 15pt;
}
div.page div.box{
  display: inline-block;
  overflow: hidden;
  margin: 15pt;
  border: 1pt solid rgba(0,0,0,0);
  font-size: 16pt;
}

div.page ul.onec{
  display: inline-block;
  list-style-type: none;
  margin: 15pt;
  border: 5pt solid rgb(255,255,0);
  background-color: rgb(255,255,0);
  outline: 1pt solid rgba(0,0,0,0.3);
  border-radius: 5pt;
  font-size: 16pt;
}

div.page ul.onec::before{
  content: "Информационные базы";
}

div.page ul.onec li{
  padding: 0.2em 4em;
  border: 1pt solid rgba(0,0,0,0.3);
  border-top: none;
  background-color: rgb(220,220,220);
}

div.page ul.onec li:first-child{
  margin-top: 7px;
  border: 1pt solid rgba(0,0,0,0.3);
}

div.page div.border{
  border: 1pt solid rgba(0,0,0,.2);
}

div.page div.c11{
  width: calc(100% - 32pt);
  height: calc(100% - 32pt);
}

div.page div.c21{
  width: calc(50% - 32pt);
  height: calc(100% - 32pt);
}

div.page div.c12{
  width: calc(100% - 32pt);
  height: calc(50% - 32pt);
}

div.page div.c22{
  width: calc(50% - 32pt);
  height: calc(50% - 32pt);
}

@media all and (hover: hover) {
  @keyframes bottomBarUp {
    from {
      top: -21pt;
    }
    to {
      top: -42pt;
    }
  }
  @keyframes bottomBarDown {
    from {
      top: -42pt;
    }
    to {
      top: -21pt;
    }
  }
  .bottomBar {
    animation: bottomBarDown .2s forwards;
  }
  .bottomBar:hover {
    animation: bottomBarUp .2s forwards;
  }
}

.sform input{
    width: calc(100% - 21pt);
    font-size: 18pt;
    padding: 3pt 9pt;
    border-radius: 14pt;
    margin: 3pt 0;
}

.sform button{
    width: calc(100% - 21pt);
    font-size: 18pt;
    padding: 3pt 9pt;
    border-radius: 14pt;
    margin: 3pt 0;
}