/*fonts*/
   
   @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200;300;400;500&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Inter&family=Zen+Kaku+Gothic+New&display=swap');
   @font-face {
       font-family: 'ClashDisplay-Variable';
       src: url('../css/fonts/ClashDisplay-Variable.woff2') format('woff2'), url('../css/fonts/ClashDisplay-Variable.woff') format('woff'), url('../css/fonts/ClashDisplay-Variable.ttf') format('truetype');
       font-weight: 200 700;
       font-display: swap;
       font-style: normal;
   }
   
   * {
       margin: 0;
       padding: 0;
       /*
    border-style: dotted;
    border-width: 0.5px;
    border-color: aqua;
    */
   }
   
   body {
       background: url("../images/noisebl.png");
       background-position: center center;
       background-repeat: repeat;
       box-sizing: border-box;
       overflow-x: hidden;
       height: 100vh;
       width: 100vw;
       font-family: 'Noto Sans JP', sans-serif;
       -webkit-font-smoothing: antialiased;
       font-size: calc(11px + 0.390625vw);
       color: snow;
   }
   
   p {
       font-size: 0.97rem;
       font-weight: 300;
       line-height: 32px;
   }
   
   .leftline {
       border-style: solid;
       border-width: 0.01px;
       height: 100%;
       border-top: none;
       border-bottom: none;
       border-right: none;
       position: absolute;
       margin-left: 120px;
       width: 50%;
   }
   /*/// Stylespat*/
   /*Menus*/
   
   .menulnk {
       position: relative;
       z-index: 9;
       color: rgb(255, 255, 255);
       text-decoration: none;
   }
   
   .menulnk {
       position: relative;
       z-index: 9;
       color: rgb(255, 255, 255);
       text-decoration: none;
       &:hover {
           &:before {
               transform: scaleX(1);
               transform-origin: left;
           }
       }
       &:before {
           content: "";
           position: absolute;
           z-index: -1;
           inset: -5px;
           background: rgb(241, 241, 241);
           transform: scaleX(0);
           transform-origin: right;
           transition: transform 0.5s ease-in-out;
       }
   }
   
   .menulnk:hover {
       color: black;
   }
   
   #normmenu {
       position: fixed;
       padding-top: 10%;
       padding-left: 0.8%;
       transition: 0.3s linear;
       z-index: 5;
   }
   
   .hidmn {
       display: none;
   }
   
   #normmenu li {
       padding-bottom: 15px;
   }
   /*Sections*/
   
   .titlesection {
       border-bottom: rgb(167, 167, 167);
       border-width: 0.25px;
       border-style: solid;
       border-top: none;
       border-left: none;
       border-right: none;
       height: 621px;
       width: 100%;
   }
   
   .uptitcont {
       display: grid;
       grid-template-columns: repeat(26, 1fr);
       column-gap: 2px;
       margin: 0px auto;
       margin-top: 42px;
       height: 50px;
   }
   
   .uptitcont p {
       font-size: 1rem;
   }
   
   .uptitcont a {
       font-size: 1rem;
   }
   
   .uptitle1 {
       display: grid;
       grid-column-start: 9;
       grid-column-end: 9;
       justify-items: center;
   }
   
   .uptitle2 {
       display: grid;
       grid-column-start: 11;
       grid-column-end: 13;
       justify-items: left;
   }
   
   .uptitle2 p {
       color: rgb(100, 100, 100);
   }
   
   .uptitline {
       display: grid;
       grid-column-start: 10;
       grid-column-end: 10;
   }
   
   .uplinesvg {
       margin-left: 10px;
       margin-top: 18px;
   }
   
   .gridtitle {
       display: grid;
       grid-template-columns: repeat(24, 1fr);
       column-gap: 2px;
       margin: 0px auto;
       grid-template-rows: min-content;
       height: 275px;
   }
   
   .gridsubtitle {
       padding-left: 160px;
       width: 60%;
   }
   
   .gridsubtitle h4 {
       font-size: 1rem;
   }
   
   .clashtit {
       font-family: 'ClashDisplay-Variable';
       display: grid;
       grid-column-start: 3;
       grid-column-end: 22;
   }
   
   .clashtit h1 {
       font-size: 12rem;
       font-weight: 500;
   }
   
   .decomoji {
       margin-top: 23%;
       opacity: 20%;
       position: absolute;
       margin-left: 0.1%;
       overflow: hidden;
       z-index: 3;
       width: 100vw;
   }
   
   .decomoji svg {
       width: 108%;
       margin-left: -20px;
   }
   /* /// MainGrid  ///  */
   
   .maingrid {
       display: grid;
       grid-template-columns: repeat(20, 1fr);
       column-gap: 2px;
       max-width: 1600px;
       margin: 0px auto;
       grid-template-rows: min-content;
   }
   
   .sysbck {
       display: block;
       position: relative;
   }
   /* LOGO */
   
   .logmark {
       border-radius: 50%;
       display: block;
       position: fixed;
       z-index: 4;
       width: 6rem;
       height: 6rem;
       margin-left: -8%;
       margin-top: 1%;
   }
   
   .conttgrid {
       display: grid;
       grid-template-columns: repeat(16, 1fr);
       margin: 0px auto;
       grid-template-rows: min-content;
   }
   /*//////////////mae styles/////////////////////////////*/
   
   .grid-container {
       display: grid;
       grid-template-columns: 45% 50%;
       column-gap: 50px;
       padding-bottom: 3rem;
       padding-top: 3rem;
   }
   
   .centertext {
       text-align: center;
   }
   
   .separator {
       padding-top: 3rem;
       padding-bottom: 3rem;
   }
   
   .menudivider {
       display: none;
       border-left: 0.5px solid whitesmoke;
       height: 100%;
       left: 40rem;
       position: fixed;
       z-index: 3;
   }
   
   #newstitt {
       position: relative;
       top: 10%;
       display: block;
   }
   
   .titleholder {
       display: grid;
       justify-content: center;
       padding-bottom: 10%;
   }
   
   .titlemaru {
       padding: 1rem;
   }
   
   .titlemaru h1 {
       font-size: calc(20px + 0.390625vw);
       font-weight: 600;
   }
   
   .titlemaru h3 {
       font-size: calc(16px + 0.390625vw);
       font-weight: 400;
   }
   /*
   
   ul {
       list-style-type: disc;
       list-style-position: inside;
       padding: 1%;
   }
   */
   
   ol {
       width: 100%;
       padding-left: 5%;
   }
   
   ol li {
       padding-bottom: 5%;
   }
   
   .spacer {
       padding-bottom: 10%;
   }
   
   .tablesimp {
       display: grid;
       justify-items: center;
   }
   
   table {
       border-collapse: collapse;
       width: 95%;
   }
   
   table,
   td,
   th {
       border: 1px solid #ff9445;
       font-weight: 200;
   }
   
   th,
   td {
       padding: 15px;
       text-align: center;
   }
   /* Section texts */
   
   .textitv {
       padding-bottom: 10%;
   }
   /*   /////  top and bottom bars   /////   */
   
   .hidmenubottom {
       position: fixed;
       background-color: snow;
       background-attachment: fixed;
       top: 95%;
       height: 6rem;
       width: 100%;
       z-index: 2;
   }
   /* hidden class*/
   
   .hidd {
       display: none;
   }
   
   .hidden {
       display: none;
   }
   /*meterbar*/
   
   .meterbarct {
       display: none;
       position: fixed;
       top: 65%;
       left: 95%;
       width: 0.5rem;
       height: 25%;
       border-style: solid;
       border-color: whitesmoke;
       border-width: 0.01rem;
       z-index: 4;
       rotate: 180;
   }
   
   .meterinner {
       height: 0%;
       background: linear-gradient(0deg, rgba(255, 148, 69, 1) 0%, rgba(255, 207, 172, 1) 57%, rgba(255, 148, 69, 1) 100%);
       width: 0.4rem;
       z-index: 3;
   }
   /* Responsive fast grid (simp pages)  */
   
   .toptittle {
       padding-top: 20vh;
       /*padding-bottom: 10vh;*/
   }
   
   .gridcontainer1 {
       display: grid;
       position: relative;
       height: auto;
       margin-left: 6%;
       z-index: 5;
   }
   
   .gridbox {
       display: grid;
       grid-column-start: 2;
       grid-column-end: 13;
       margin-bottom: -3%;
   }
   
   .gridcontpro {
       grid-column: 1 / -1;
       display: grid;
       grid-template-columns: repeat(20, 1fr);
       column-gap: 2px;
       max-width: 1600px;
       margin: 0px auto;
       width: 100%;
       min-height: calc(100vh - 100px);
       padding-top: 200px;
       align-content: center;
       padding-bottom: 40px;
   }
   
   .gridsectioncont {
       max-width: 1600px;
       margin: 0px auto;
       display: grid;
       grid-template-columns: repeat(20, 1fr);
       column-gap: 2px;
       padding-bottom: 80px;
   }
   
   .innergrid {
       display: grid;
       grid-template-columns: repeat(20, 1fr);
       column-gap: 2px;
       grid-column: 1 / -1;
   }
   
   .textblockgrid {
       grid-column: 2 / -2;
       display: grid;
       grid-template-columns: 7fr 10fr 1fr;
       color: rgb(135, 135, 135);
       opacity: 1;
       margin-top: 40px;
   }
   
   .textp {
       margin: 0px;
       padding: 0px;
       font-size: 16px;
       line-height: 150%;
       font-weight: 400;
       grid-column: 2 / auto;
   }
   
   .systextsq {
       position: relative;
       display: grid;
       z-index: 2;
       grid-template-columns: repeat(50, 1fr);
       column-gap: 2px;
       margin: 0px auto;
       grid-template-rows: min-content;
       padding-bottom: 10rem;
   }
   
   .selmenu {
       display: grid;
       position: relative;
       grid-template-columns: repeat(50, 1fr);
       column-gap: 2px;
       margin: 0px auto;
       grid-template-rows: min-content;
       padding-top: 5%;
   }
   
   .selmenbutt1 {
       display: grid;
       position: relative;
       grid-column-start: 11;
       grid-column-end: 16;
       border-width: 1px;
       border-style: solid;
       height: 50px;
       align-items: center;
       justify-content: center;
       justify-items: center;
       text-align: center;
   }
   
   .selmenbutt1:hover {
       background-color: snow;
       color: #1b1b1b;
   }
   
   .selmenbutt2 {
       display: grid;
       position: relative;
       grid-column-start: 18;
       grid-column-end: 23;
       border-width: 1px;
       border-style: solid;
       height: 50px;
       align-items: center;
       justify-content: center;
       justify-items: center;
       text-align: center;
   }
   
   .selmenbutt2:hover {
       background-color: snow;
       color: #1b1b1b;
   }
   
   .selmenbutt3 {
       display: grid;
       position: relative;
       grid-column-start: 25;
       grid-column-end: 30;
       border-width: 1px;
       border-style: solid;
       height: 50px;
       align-items: center;
       justify-content: center;
       justify-items: center;
       text-align: center;
   }
   
   .selmenbutt3:hover {
       background-color: snow;
       color: #1b1b1b;
   }
   
   .selmenbutt4 {
       display: grid;
       position: relative;
       grid-column-start: 32;
       grid-column-end: 37;
       border-width: 1px;
       border-style: solid;
       height: 50px;
       align-items: center;
       justify-content: center;
       justify-items: center;
       text-align: center;
   }
   
   .selmenbutt4:hover {
       background-color: snow;
       color: #1b1b1b;
   }
   
   .selmenbutt5 {
       display: grid;
       position: relative;
       grid-column-start: 39;
       grid-column-end: 44;
       border-width: 1px;
       border-style: solid;
       height: 50px;
       align-items: center;
       justify-content: center;
   }
   
   .selmenbutt5:hover {
       background-color: snow;
       color: #1b1b1b;
   }
   
   .selmcub {
       cursor: pointer;
       font-size: 1rem;
       margin-right: 13px;
   }
   
   .gridcontainerbutt {
       position: relative;
       display: grid;
       grid-template-columns: repeat(1, 1fr);
       gap: 1rem;
       padding: 1rem;
       justify-content: start;
       align-items: center;
       justify-items: start;
   }
   
   .button {
       background-color: #0c7b93;
       border: none;
       color: snow;
       border-radius: 15%;
       padding: 8px 11px;
       text-align: center;
       text-decoration: none;
       display: inline-block;
       font-size: 16px;
       margin: 4px 2px;
       cursor: pointer;
   }
   
   .gridbox2 {
       display: grid;
       grid-column-start: 6;
       grid-column-end: 12;
       justify-content: end;
   }
   
   .gridbox3 {
       display: grid;
       grid-column-start: 1;
       grid-column-end: 12;
   }
   
   .gridboxrad {
       display: grid;
       grid-column-start: 1;
       grid-column-end: 4;
   }
   
   .gridtitcent {
       justify-content: center;
       display: grid;
       grid-column-start: 2;
       grid-column-end: 12;
   }
   
   .simplist {
       padding-top: 3.5vh;
       padding-bottom: 8vh;
   }
   
   .simplist li {
       font-size: calc(11px + 0.390625vw);
   }
   
   .rowgrid {
       position: relative;
       display: grid;
       grid-template-columns: 50% 50%;
   }
   
   #paginator {
       display: block;
       position: relative;
       padding-top: 35%;
       padding-bottom: 10%;
   }
   
   .pagevertlines {
       border-width: 0.25px;
       display: block;
       position: relative;
       height: 144px;
       border-top: none;
       border-bottom: none;
       width: 80%;
       left: 10%;
       top: -103%;
   }
   
   .hidmenubottom {
       border-top: 0.5px solid #0c7b93;
       position: fixed;
       background-color: snow;
       background-attachment: fixed;
       top: 95%;
       height: 6rem;
       width: 100vw;
       z-index: 2;
   }
   
   .centerelement {
       padding-top: 5px;
       display: grid;
       justify-content: center;
   }
   /* BLOG CARDS */
   
   .cards-container {
       display: grid;
       row-gap: 5%;
       column-gap: 5%;
       justify-content: left;
       padding-top: 0%;
       padding-bottom: 20%;
       padding-left: 3%;
       padding-right: 3%;
       z-index: 2;
   }
   
   .cardscont_nw {
       display: grid;
       position: relative;
       grid-template-columns: repeat(20, 1fr);
       row-gap: 5%;
       column-gap: 1%;
       justify-content: left;
       padding-top: 6%;
       padding-bottom: 3%;
       z-index: 2;
   }
   
   .cardsline {
       display: grid;
       position: relative;
       height: 10%;
       border-top: solid;
       border-width: 0.25px;
       border-left: none;
       border-right: none;
       border-bottom: none;
       margin-bottom: -1%;
       margin-right: 14%;
       margin-left: 14%;
   }
   
   .crossline {
       display: grid;
       position: relative;
       height: 10%;
       border-top: solid;
       border-width: 0.25px;
       border-left: none;
       border-right: none;
       border-bottom: none;
       margin-left: 0.3%;
   }
   
   .cardblock {
       padding-left: 2%;
       padding-right: 2%;
       padding-bottom: 5%;
   }
   
   .cardscol {
       width: 100%;
       text-decoration: none;
   }
   
   .cardscol a {
       text-decoration: none;
   }
   
   .card-title {
       padding-top: 2%;
       padding-bottom: 2%;
       padding-right: 2%;
       color: #61a7bd;
   }
   
   .card-text {
       display: grid;
       position: relative;
       grid-column-start: 4;
       grid-column-end: 14;
       justify-content: start;
   }
   
   .card-date {
       color: snow;
       align-items: center;
       display: grid;
       position: relative;
       grid-column-start: 4;
       grid-column-end: 4;
   }
   
   .cardcatecol {
       display: grid;
       position: relative;
       grid-column-start: 5;
       grid-column-end: 5;
       grid-row-start: 1;
   }
   
   .cardcate {
       color: snow;
       border-style: solid;
       border-width: 1px;
       padding-top: 0.2rem;
       padding-bottom: 0.2rem;
       padding-left: 0.3rem;
       padding-right: 0.3rem;
       width: fit-content;
   }
   
   .cardcate p {
       font-size: 0.8rem;
   }
   
   .card-cat {
       padding-top: 1rem;
   }
   
   .card-link {
       padding-bottom: 1%;
       padding-right: 5%;
       float: right;
   }
   
   .card-link a {
       color: #0c7b93;
   }
   
   .cardscol h3 {
       font-size: 1.4rem;
       font-weight: 500;
   }
   
   .cardscol a {
       color: #4c5152;
   }
   
   .cardsimg {
       float: right;
       padding-bottom: 1rem;
   }
   
   .cardsimg img {
       width: 80px;
       height: 80px;
       object-fit: cover;
       border-radius: 1rem;
   }
   
   .newscards {
       display: block;
       position: relative;
       padding-top: 20%;
   }
   /*  /// //  button paginator  */
   
   .buttonpagin {
       padding-left: 5%;
   }
   
   .buttonpag {
       color: whitesmoke;
       background-color: #61a7bd;
       border-radius: 5px;
       padding: 10px 15px;
   }
   /*  ///  newsblock /// */
   
   #newsblock {
       display: block;
       position: initial;
       padding-bottom: 10%;
       margin-top: 50%;
   }
   
   .textblockimg {
       width: 100%;
       padding-left: 2%;
       padding-right: 2%;
       padding-bottom: 10%;
   }
   
   .textblock {
       padding-top: 10%;
       background-color: whitesmoke;
       padding-bottom: 5%;
       padding-left: 2%;
       padding-right: 2%;
       border-radius: 10px;
   }
   
   .textblock p {
       color: rgb(14, 14, 14);
   }
   
   .textblock li {
       color: rgb(14, 14, 14);
   }
   
   .textblock h1 {
       color: rgb(14, 14, 14);
   }
   
   .textblock h2 {
       color: rgb(14, 14, 14);
   }
   
   .textblock h3 {
       color: rgb(14, 14, 14);
   }
   
   .textblock h4 {
       color: rgb(14, 14, 14);
   }
   
   .mainimage {
       padding-top: 5%;
       padding-bottom: 15%;
       padding-left: 5%;
       padding-right: 5%;
   }
   /* /// newsblockend /// */
   /* /// buttonback  /// */
   
   #buttonback {
       display: inline-block;
       top: 50%;
       position: relative;
       width: 100%;
       padding-left: 5%;
       padding-right: 5%;
   }
   
   .buttonpos {
       padding-left: 15%;
       z-index: 3;
   }
   
   @media screen and (min-width:375px) {
       #menu__toggle:checked~.menu__box {
           left: 32vw !important;
       }
   }
   
   @media screen and (min-width:400px) {
       #menu__toggle:checked~.menu__box {
           left: 39vw !important;
       }
   }
   
   @media screen and (min-width:435px) {
       #menu__toggle:checked~.menu__box {
           left: 44vw !important;
       }
       .mainimage {
           padding-bottom: 15%;
           padding-top: 15%;
       }
   }
   
   @media screen and (min-width:450px) {
       #menu__toggle:checked~.menu__box {
           left: 45vw !important;
       }
   }
   
   @media screen and (min-width:485px) {
       #menu__toggle:checked~.menu__box {
           left: 50vw !important;
       }
   }
   
   @media screen and (min-width:500px) {
       #menu__toggle:checked~.menu__box {
           left: 52vw !important;
       }
   }
   
   @media screen and (min-width:550px) {
       #menu__toggle:checked~.menu__box {
           left: 56vw !important;
       }
   }
   
   @media screen and (min-width:568px) {
       .textitv {
           padding-bottom: 5%;
       }
       .spacer {
           padding-bottom: 3%;
       }
   }
   
   @media screen and (min-width:600px) {
       #menu__toggle:checked~.menu__box {
           left: 60vw !important;
       }
   }
   
   @media screen and (min-width:650px) {
       #menu__toggle:checked~.menu__box {
           left: 52vw !important;
       }
   }
   
   @media screen and (min-width:700px) {
       #menu__toggle:checked~.menu__box {
           left: 65vw !important;
       }
   }
   
   @media screen and (min-width:768px) {
       h3 {
           font-size: 2em;
           font-weight: 400;
       }
       .hidmenu {
           top: 0rem;
           height: 6rem;
       }
       .hidmenupolk {
           height: 6rem;
       }
       .hamburger-menu {
           display: grid;
           align-content: center;
           justify-content: center;
           align-items: center;
           justify-items: center;
           border-radius: 100%;
           position: fixed;
           top: 2%;
           right: 5%;
           padding: 2% 6%;
           width: 40px;
           right: 2.5rem;
           z-index: 3;
       }
       .meterbarct {
           display: block;
       }
       .menu__btn>span::before {
           content: '';
           top: -10px;
       }
       .menu__btn>span::after {
           content: '';
           top: 10px;
       }
       #menu__toggle:checked~.menu__box {
           left: 53vw !important;
       }
       .menu__box {
           width: 23rem;
           /*resp*/
           height: 100%;
           margin: 0;
           padding: 80px 0;
           padding-bottom: 10px;
           text-align: center;
           justify-content: center;
           z-index: 3;
       }
       .menu__btn>span,
       .menu__btn>span::before,
       .menu__btn>span::after {
           width: 2.5rem;
           height: 0.25rem;
       }
       .hambmenuind {
           padding-top: 50%;
       }
       .texttitle {
           width: 70%;
           padding-bottom: 7%;
       }
       #newstitt {
           top: 18%;
       }
       .rowgrid {
           justify-items: end;
       }
       .menudivider {
           display: block;
           height: 100%;
           left: 85%;
       }
       .spacer {
           padding-bottom: 5%;
       }
       .cards-container {
           padding-right: 20%;
       }
       .newscards {
           top: 0%;
           padding-top: 30%;
       }
       #newsblock {
           top: 20%;
       }
       #buttonback {
           top: 30%;
       }
       .mainimage {
           padding-right: 20%;
           padding-top: 5%;
           margin-top: -5%;
           padding-right: 20%;
           padding-left: 0%;
       }
       .textblock {
           width: 80%;
           padding-top: 5%;
       }
   }
   
   @media screen and (min-width:800px) {
       #menu__toggle:checked~.menu__box {
           left: 39vw !important;
       }
   }
   
   @media screen and (min-width:812px) {
       .menudivider {
           left: 85%;
       }
   }
   
   @media screen and (min-width:834px) {
       #menu__toggle:checked~.menu__box {
           left: 41vw !important;
       }
       .menudivider {
           left: 85%;
       }
   }
   
   @media screen and (min-width:850px) {
       #menu__toggle:checked~.menu__box {
           left: 41.5vw !important;
       }
   }
   
   @media screen and (min-width:900px) {
       #menu__toggle:checked~.menu__box {
           left: 44vw !important;
       }
   }
   
   @media screen and (min-width:924px) {
       #menu__toggle:checked~.menu__box {
           left: 45vw !important;
       }
   }
   
   @media screen and (min-width:950px) {
       #menu__toggle:checked~.menu__box {
           left: 46.3vw !important;
       }
   }
   
   @media screen and (min-width:1024px) {
       h1 {
           font-size: 50px;
       }
       .newscards {
           top: 0%;
           padding-top: 5%;
       }
       .cards-container {
           padding-top: 5%;
           padding-bottom: 5%;
       }
       .titleholder h3 {
           font-size: 1.7em;
       }
       .hidmenu {
           top: 0rem;
           height: 7.5rem;
       }
       .hidmenupolk {
           height: 7.5rem;
       }
       .menu__box {
           top: 0;
           width: 23rem;
           /*resp*/
           height: 100%;
           margin: 0;
           padding: 80px 0;
           list-style: none;
           background-color: #161f38e7;
           transition-duration: .25s;
           text-align: center;
           z-index: 1;
       }
       .hamburger-menu {
           display: none;
       }
       .texttitle {
           padding-bottom: 5%;
       }
       #normalnav {
           display: block;
           left: 30%;
       }
       .gridcontainerbutt {
           position: fixed;
           display: grid;
           grid-template-columns: repeat(1, 1fr);
           gap: 1rem;
           padding: 1rem;
           justify-content: start;
           align-items: center;
           justify-items: start;
           top: 25rem;
       }
       .buttonpagin {
           padding-left: 20%;
       }
       #newsblock {
           margin-top: 20%;
       }
   }
   
   @media screen and (min-width: 1112px) {
       #normalnav {
           left: 35%;
       }
   }
   
   @media screen and (min-width:1280px) {
       .newscards {
           top: 0%;
           padding-top: 10%;
       }
       .cards-container {
           padding-top: 10%;
           padding-bottom: 10%;
           padding-top: 0%;
       }
       .gridcontainerbutt {
           top: 26rem;
       }
   }
   
   @media screen and (min-width: 1366px) {
       #normalnav {
           left: 43%;
       }
       .texttitle {
           width: 65%;
       }
       .textblock {
           width: 65%;
       }
       .gridcontainerbutt {
           top: 26rem;
       }
   }
   
   @media screen and (min-width: 1440px) {
       #normalnav {
           left: 45%;
       }
       .texttitle {
           padding-bottom: 5%;
       }
       ol li {
           padding-bottom: 3%;
       }
       .textblock {
           width: 82%;
           padding-top: 3%;
       }
       .mainimage {
           padding-right: 20%;
           padding-top: 5%;
           margin-top: 0%;
           padding-right: 20%;
           padding-left: 0%;
       }
   }
   
   @media screen and (min-width: 1680px) {
       .cards-container {
           padding-top: 10%;
           padding-bottom: 0%;
           width: 80%;
       }
       .titleholder h3 {
           font-size: 1.7em;
       }
       #normalnav {
           left: 50%;
       }
       .card-link {
           padding-bottom: 0%;
           padding-right: 0%;
           float: left;
           padding-left: 10%;
       }
   }
   
   @media screen and (min-width:2560px) {
       .card-title {
           font-size: 2em;
       }
       #newsblock {
           top: 20%;
           width: 80%;
       }
       .titleholder h3 {
           font-size: 3.7em;
       }
   }
   /* Datatables interface*/
   
   #getactive_users_paginate ul {
       list-style: none;
       float: center;
       border-top: solid;
       border-width: 0.25px;
       border-right: none;
       border-left: none;
       padding-bottom: 3%;
       padding-top: 3%;
       display: flex;
       justify-content: center;
   }
   
   #getactive_users_paginate ul li {
       list-style: none;
       float: left;
       color: snow;
       border-radius: 73px;
       padding: 3px 14px;
       margin: 0 0.2vw;
       cursor: pointer;
   }
   /*Button paginate*/
   
   .active {
       color: rgb(31, 31, 31)!important;
       background-color: snow;
   }
   
   .pagination {
       display: block;
       position: relative;
       margin-left: 0.2%;
       width: 99.5%;
       margin-left: 10%;
       left: 0.25%;
   }
   
   .page-item {
       display: block;
       position: relative;
   }
   
   .previous {
       color: rgb(31, 31, 31)!important;
       background-color: snow;
       display: block;
       position: absolute;
       right: 93%;
   }
   
   .next {
       color: rgb(31, 31, 31)!important;
       background-color: snow;
       display: block;
       position: absolute;
       left: 93%;
   }
   
   .sorting_asc {
       cursor: none;
       visibility: hidden;
   }
   
   table#getactive_users_paginate,
   td,
   th {
       border: 0;
   }
   
   table#getactive_users_paginate,
   td,
   th {
       border: 0;
   }
   
   table#getactive_users {
       border: 0;
   }
   
   table#getactive_users thead tr th {
       text-indent: -10000px;
   }
   
   .fxd-width {
       height: 20vh;
   }
   
   input[name='radiosel'] {
       visibility: hidden;
   }
   
   .join_us_c {
       margin: 5vh 7vw;
   }
   /* The navigation menu */
   
   .subnav {
       float: left;
       overflow: hidden;
   }
   
   .subnav .subnavbtn {
       font-size: 16px;
       border: none;
       outline: none;
       color: white;
       padding: 14px 16px;
       background-color: inherit;
       font-family: inherit;
       margin: 0;
   }
   
   .subnav-content {
       display: none;
       position: absolute;
       left: 300px;
       width: 100%;
       z-index: 1;
       top: 50px;
   }
   
   .subnav-content a {
       float: left;
       color: white;
       text-decoration: none;
   }
   
   .subnav:hover .subnav-content {
       display: block;
   }
   
   .sub-hd:hover .sub-nv {
       display: block;
   }
   
   .sub-nv {
       list-style: none;
       display: none;
   }
   
   .sub-nv li a {
       /*padding: 10px 0;*/
       color: whitesmoke;
   }
   
   .hlsquaregrid {
       position: relative;
       display: grid;
       grid-template-columns: 17% 17% 17%;
       justify-items: center;
   }
   
   @media only screen and (min-width: 1280px) .hltext {
       padding-top: 46%;
   }
   
   @media only screen and (min-width: 1024px) .hltext {
       padding-top: 68%;
   }
   
   @media only screen and (min-width: 1024px) .hltext {
       padding-top: 19%;
   }
   
   @media only screen and (min-width: 768px) .hltext {
       padding-top: 100%;
       text-align: center;
   }
   
   .hltext {
       text-align: center;
       width: 90%;
       margin-left: auto;
       margin-right: auto;
   }
   
   @media only screen and (min-width: 1280px) .hlsquaregrid {
       padding-top: 10%;
   }
   
   @media only screen and (min-width: 1024px) .hlsquaregrid {
       padding-top: 10%;
   }
   
   @media only screen and (min-width: 820px) .hlsquaregrid {
       padding-top: 20%;
       justify-items: center;
   }
   
   @media only screen and (min-width: 768px) {
       .hlsquaregrid {
           position: relative;
           display: grid;
           grid-template-columns: 10% 10% 10%;
           justify-items: center;
           /*gap: 6%;*/
           justify-content: center;
       }
   }
   
   @media only screen and (max-width: 768px) {
       .hlsquaregrid {
           position: relative;
           display: grid;
           grid-template-columns: 28% 26% 28%;
           justify-items: center;
           /*gap: 6%;*/
           justify-content: center;
       }
   }
   
   @media only screen and (min-width: 425px) {
       .hlsquaregrid {
           padding-left: 2.5%;
           padding-right: 2.5%;
       }
   }
   
   .hlsquare {
       border: solid #1080aa;
       border-width: 0.1rem;
       border-radius: 1rem;
       padding: 1rem;
       box-shadow: 0 0 12px 1px #1080aa;
   }
   
   .sectionhlght {
       padding-top: 25vh;
   }
   
   .lowr-pd {
       padding-top: 5vh;
   }
   
   .set-grad {
       border: 1px solid #bfb4b4;
       padding: 10px 10px;
       box-shadow: 5px 10px 8px #dbd3d3;
       margin: 0 2vw;
   }
   
   .jb-btn {
       padding: .375rem .75rem !important;
   }
   
   .rem-grid {
       justify-content: normal;
   }
   
   .jb-tbl {
       border: 0;
   }
   
   .fst-col {
       border-top: 1px solid #ff9445;
       border-bottom: 1px solid #ff9445;
   }
   
   .rst-col {
       border-bottom: 1px solid #ff9445;
   }
   
   .fst-col th,
   .fst-col td,
   .rst-col th,
   .rst-col td {
       text-align: left;
   }
   
   .fst-col th,
   .rst-col th {
       width: 16vw;
   }