/* CONTENT FLOW
   ------------
01. MAIN CONTAINERS       0018
02. FEATURE               0223
03. MAIN MENU             0341
04. BOXES                 0483
05. BOXES TWO             0619
06. BOXES ONE             0661
07. PROCESS STEP          0868
08. CONTACT PAGE          1100
09. DISTRO INFO           1269
10. ARCHIEVES             1376
11. SPECIAL EFFECTS       1410
12. UNKNOWN               1472
*/

/* MAIN CONTAINERS */
html
  {width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-size: 62.5%;
  box-sizing: border-box;}
body
  {background-color: #000000;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  width: 100%;
  height: 100vh;
  min-height: 100%;
  padding: 0;
  margin: 0;}
#container_main
  {box-sizing: border-box;
  background: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url('/static/images/backgrounds/gnu.jpeg');
  background-size: cover;
  background-position: 50% 0%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  font-size: 0;
  position: relative;
  width: 100%;
  min-height: 100vh;}
header
  {box-sizing: border-box;
  position: fixed;
  width: 100%;
  height: 80px;
  z-index: 20;
  top: 0;
  margin: 0;
  padding: 0;
  font-size: 0;
  background-color: #1D2125;
  border-width: 1px;
  border-top-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-color: #976262;
  border-style: solid;}
.header-container
  {box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: inline-block;
  margin: 0;
  padding: 0;
  font-size: 0;}
.header-container-left
  {box-sizing: border-box;
  /*background-color: green;*/
  width: 660px;
  height: 100%;
  display: inline-flex;
  float: left;
  margin: 0;
  padding: 0;
  padding-left: 2%;
  font-size: 0;}
.header-container-left img
  {box-sizing: border-box;
  width: 60px;
  height: 60px;
  opacity: 0.8;
  margin: 0;
  margin-top: 10px;
  padding: 0;
  font-size: 0;}
header h1
  {box-sizing: border-box;
  width: auto;
  height: auto;
  font-size: 40px;
  font-size: 4.0rem;
  font-family: 'gruppo';
  margin: 0;
  margin-top: auto;
  margin-bottom: auto;
  padding: 0;
  padding-left: 1%;
  color: #C8BDBD;}
.header-container-right
  {box-sizing: border-box;
  background-color: #1D2125;
  /*background-color: blue;*/
  justify-content: right;
  width: 900px;
  height: 100%;
  display: inline-flex;
  float: right;
  margin: 0;
  padding-top: 25px;
  padding-right: 2%;
  font-size: 0;}
.header-container-right a
  {box-sizing: border-box;
  background-color: rgb(61, 89, 116, 0.5);
  display: block;
  width: auto;
  height: 30px;
  text-decoration: none;
  margin: 0;
  margin-right: 15px;
  padding: 15px;
  padding-top: 5px;
  font-family: 'play', Arial;
  font-size: 16px;
  font-size: 1.6rem;
  color: #B1A9A9;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  border-color: #8DA0B3;
  transition-duration: .2s;}
.header-container-right a:hover
  {opacity: 1.0;
   color: #FFFFFF;
   background-color: rgb(61, 89, 116, 0.9);
   border-color: #E0E0E0;}
.header-archieves-right
  {box-sizing: border-box;
  background-color: #1D2125;
  /*background-color: blue;*/
  justify-content: right;
  width: 440px;
  height: 100%;
  display: inline-flex;
  float: right;
  margin: 0;
  padding-top: 25px;
  padding-right: 1%;
  font-size: 0;}
.header-archieves-right a
  {box-sizing: border-box;
  background-color: rgb(61, 89, 116, 0.5);
  display: block;
  width: auto;
  height: 30px;
  text-decoration: none;
  margin: 0;
  margin-right: 15px;
  padding: 15px;
  padding-top: 5px;
  font-family: 'play';
  font-size: 16px;
  font-size: 1.6rem;
  color: #B1A9A9;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;
  border-color: #8DA0B3;
  transition-duration: .2s;}
.header-archieves-right a:hover
  {opacity: 1.0;
  color: #FFFFFF;
  background-color: rgb(61, 89, 116, 0.9);
  border-color: #E0E0E0;}
.container
  {box-sizing: border-box;
  width: 100%;
  height: auto;
  padding-top: 80px;
  padding-bottom: 80px;
  margin: 0;
  overflow: hidden;}
footer
  {box-sizing: border-box;
  position: absolute;
  background-color: #1D2125;
  text-align: center;
  clear: both;
  height: 80px;
  width: 100%;
  bottom: 0;
  margin: 0;
  padding: 0;
  padding-top: 33px;
  border-width: 1px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-color: #976262;
  border-style: solid;
  color: #E0E0E0;}
footer a
  {text-decoration: none;}
footer h4
  {box-sizing: border-box;
  font-family: 'gruppo';
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-size: 1.4rem;
  color: #E0E0E0;}



/* FEATURE */
.feature
  {box-sizing: border-box;
  background: url('/static/images/backgrounds/abstract-tri.png');
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 102vh;
  position: relative;
  display: flex;
  flex-direction: column;
  border-style: solid;
  border-color: grey;
  border-width: 1px;
  border-top-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  margin: 0;
  padding: 0;
  padding-top: 80px;
  font-size: 0;}
.feature-center
  {box-sizing: border-box;
  width: 100%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  padding: 2%;}
.feature-center img
  {width: 12%;
  opacity: .6;
  margin-left: 44%;
  margin-top: 5%;
  border-style: solid;
  border-width: 2px;
  border-color: #E0E0E0;
  border-radius: 50%;
  transition-duration: .2s;}
.feature-center h4
  {box-sizing: border-box;
   width: 100%;
   text-align: center;
   margin: 0;
   margin-top: 1%;
   padding: 0;
   color: #D2ACAC;
   font-family: marck-script;
   font-size: 30px;
   font-size: 3.0rem;}
.dual-buttons
  {box-sizing: border-box;
   width: 30%;
   display: inline-block;
   margin: 0;
   margin-left: 35%;
   padding: 1%;
   font-size: 0;}
.dual-buttons a
  {text-decoration: none;
   width: 100%;}
.dual-buttons h5
  {box-sizing: border-box;
  background-color: rgb(162, 132, 132, 0.5);
  box-shadow: 0px 2px 2px black;
  text-align: center;
  width: 94%;
  height: auto;
  margin: 0;
  margin-left: 3%;
  padding: 4%;
  border-radius: 5px;
  border-style: solid;
  border-top-color: #CCCCCC;
  border-left-color: #CCCCCC;
  border-bottom-color: #333333;
  border-right-color: #333333;
  border-width: 1px;
  font-family: 'gruppo';
  font-size: 20px;
  font-size: 2rem;
  color: #B1A9A9;
  font-weight: bolder;
  transition-duration: 0.2s;}
.dual-buttons h5:hover
  {box-shadow: 0px 1px 1px black;
  background-color: rgb(97, 142, 97, 0.8);
  border-bottom-color: #E0E0E0;
  border-right-color: #E0E0E0;
  color: #FFFFFF;}
.dual-buttons-left
  {box-sizing: border-box;
   width: 50%;
   display: block;
   float: left;
   margin: 0;
   padding: 1%;
   font-size: 0;}
.dual-buttons-right
  {box-sizing: border-box;
   width: 50%;
   display: block;
   float: right;
   margin: 0;
   padding: 1%;
   font-size: 0;}
.down-arrow
  {box-sizing: border-box;
  width: 100%;
  margin: 0;
  position: absolute;
  bottom: 25px;
  padding: 0;
  text-align: center;
  font-size: 0;}
.down-arrow img
  {box-sizing: border-box;
   height: 40px;
   margin: 0;
   padding: 0;
   font-size: 0;}



/* MAIN MENU */
.main-menu
  {box-sizing: border-box;
  display: block;
  width: 100%;
  min-height: 100vh;
  background: url('/static/images/backgrounds/gnu-flute.png');
  background-size: cover;
  background-position: 50% 0%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  margin: 0;
  padding: 2%;
  padding-top: 1%;
  font-size: 0;}
.main-menu h2
  {box-sizing: border-box;
  background-color: orange;
  display: block;
  text-decoration: underline;
  margin: 0;
  padding: 0;
  font-family: 'marck-script';
  font-size: 40px;
  font-size: 4.0rem;
  color: #E0E0E0;}
.main-menu-items
  {box-sizing: border-box;
  display: inline-block;
  width: 80%;
  height: auto;
  margin: 0;
  margin-top: 0;
  padding: 0;
  font-size: 0;}
.main-menu-items-left
  {box-sizing: border-box;
  border-radius: 10px;
  display: block;
  float: left;
  width: auto;
  margin: 0;
  padding: 0;
  padding-top: 50px;
  font-size: 0;}
.main-menu-items-left a
  {text-decoration: none;}
.main-menu-items-left h5
  {box-sizing: border-box;
  background-color: rgb(117, 120, 88, 0.6);
  border-radius: 10px;
  box-shadow: 0px 2px 2px black;
  margin: 0;
  padding: 16px;
  border-style: solid;
  border-width: 2px;
  border-bottom-width: 1px;
  border-right-width: 1px;
  border-color: #E0E0E0;
  font-family: 'gruppo';
  font-size: 20px;
  font-size: 2rem;
  color: #B1A9A9;
  transition-duration: 0.1s;}
.main-menu-items-left h5:hover
  {box-shadow: 0px 1px 1px black;
  background-color: rgb(97, 142, 97, 0.8);
  color: #FFFFFF;}
.main-menu-items-right
  {box-sizing: border-box;
  display: block;
  float: right;
  width: 90%;
  margin: 0;
  padding: 2%;
  font-size: 0;}
.main-menu-items h3
  {box-sizing: border-box;
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  text-decoration: underline;
  font-family: 'orbitron';
  font-size: 22px;
  font-size: 2.2rem;
  color: #C14242;}
.main-menu-items p
  {box-sizing: border-box;
  width: 90%;
  margin: 0;
  padding: 0;
  padding-top: 1%;
  font-family: 'gruppo';
  font-size: 18px;
  font-size: 2rem;
  font-weight: bold;
  color: #C8ABAB;}
.sub-page-links
  {box-sizing: border-box;
  width: 100%;
  display: block;
  margin: 0;
  margin-top: 1%;
  padding: 0;
  font-size: 0;}
.sub-page-links a
  {box-sizing: border-box;
  text-decoration: none;
  width: auto;
  margin: 0;
  padding: 0;
  font-size: 0;}
.sub-page-links h6
  {box-sizing: border-box;
  width: 300px;
  background-color: rgb(71, 104, 138, 0.4);
  border-radius: 5px;
  border-width: 1px;
  border-color: grey;
  box-shadow: 1px 1px #2068B0;
  text-align: left;
  margin: 0;
  margin-top: 1%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  color: #47688A;
  color: #489EF3;
  font-weight: bolder;
  font-family: 'gruppo';
  font-size: 20px;
  font-size: 2.0rem;
  transition-duration: 0.2s;}
.sub-page-links h6:hover
  {background-color: rgb(63, 127, 191, 0.6);
  box-shadow: 0px 0px #2068B0;
  color: #FFFFFF;}
.sub-page-links p
  {padding-top: 0.5%;}



/* BOXES */
.box
  {box-sizing: border-box;
  background-color: #1D2125;
  box-shadow: 5px 5px 5px #000000;
  border-radius: 10px;
  display: block;
  width: 100%;
  margin: 0;
  margin-top: 5%;
  padding: 0;
  font-size: 0;
  transition-duration: .2s;}
.box:hover
  {box-shadow: 3px 3px 3px #000000;}
.box h3
  {background-color: rgb(59, 71, 82, 0.4);
  width: 80%;
  height: auto;
  margin-left: 10%;
  margin-top: 0;
  padding: 1%;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  text-align: center;
  text-decoration-line: underline;
  font-family: 'orbitron';
  border-style: solid;
  border-width: 1px;
  border-color: #58636E;
  border-top-width: 0px;
  box-shadow: 3px 3px 3px #000000;
  font-size: 22px;
  font-size: 2.2rem;
  color: #D2D6D1;}
.box h4
  {box-sizing: border-box;
  display: inline-block;
  background-color: rgb(0, 0, 0, 0.3);
  font-family: 'gruppo';
  width: auto;
  margin: 0;
  padding: 1%;
  border-radius: 15px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  font-size: 23px;
  font-size: 2.3rem;
  color: #3F7FBF;}
.box h5
  {box-sizing: border-box;
  background-color: rgb(176, 103, 103, 0.5);
  text-align: center;
  font-family: 'bai-jamjuree', sans-serif;
  display: block;
  width: 100%;
  margin: 0;
  margin-top: 5%;
  padding: 0;
  padding-top: 1%;
  padding-bottom: 1%;
  border-style: solid;
  border-width: 2px;
  border-color: #B27A7A;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  font-size: 16px;
  font-size: 1.6rem;
  color: #A59B9B;
  transition-duration: .2s;}
.box h5:hover
  {background-color: rgb(176, 103, 103, 0.6);
  color: #FFFFFF;}
.box h6
  {box-sizing: border-box;
  width: 100%;
  height: auto;
  color: #C8ABAB;
  margin: 0;
  margin-top: 5%;
  padding: 0;
  text-align: center;
  font-family: 'gruppo', cursive;
  font-size: 20px;
  font-size: 2rem;}
.box p
  {box-sizing: border-box;
  width: 94%;
  height: auto;
  color: #B1A9A9;
  margin: 0;
  margin-top: 2%;
  margin-left: 2%;
  padding: 0;
  text-align: left;
  font-family: 'bai-jamjuree', cursive;
  font-size: 20px;
  font-size: 2.0rem;}
.box a
  {width: 100%;
   text-decoration: none;}
.box dl
  {box-sizing: border-box;
  display: block;
  width: 80%;
  margin: 0;
  margin-top: 1%;
  margin-left: 2%;
  padding: 0;}
.box dt
  {box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  padding-bottom: 5px;
  color: #C14242;
  font-family: 'gruppo', cursive;
  text-decoration: underline;
  font-weight: bolder;
  font-size: 22px;
  font-size: 2.2rem;}
.box dd
  {box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #E0E0E0;
  font-family: 'bai-jamjuree';
  font-size: 20px;
  font-size: 2rem;}
.box-title
  {box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-size: 0;}
.box-title h4
  {box-sizing: border-box;
  display: inline-block;
  background-color: rgb(0, 0, 0, 0.3);
  font-family: 'gruppo';
  width: auto;
  margin: 0;
  margin-top: 1%;
  padding: 2%;
  border-radius: 15px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  font-size: 23px;
  font-size: 2.3rem;
  color: #3F7FBF;}


  /* BOXES TWO */
.boxes-two
  {box-sizing: border-box;
  display: inline-block;
  width: 90%;
  height: auto;
  margin: 0;
  margin-left: 5%;
  margin-top: 5%;
  padding: 0;
  font-size: 0;}
.boxes-two p
  {text-align: center;
   color: #C8ABAB;
   margin-top: 2%;}
.boxes-two img
  {width: 20%;
  opacity: .6;
  margin-left: 40%;
  margin-top: 5%;
  background-color: #FFFFFF;
  border-style: solid;
  border-width: 2px;
  border-color: #E0E0E0;
  border-radius: 50%;
  box-shadow: 2px 2px 2px #000000;
  transition-duration: .2s;}
.boxes-two img:hover
  {opacity: .8;}
.left-box
  {display: block;
  width: 48%;
  float: left;
  margin: 0;
  font-size: 0;}
.right-box
  {width: 48%;
  float: right;
  margin: 0;
  font-size: 0;}



/* BOXES ONE */
.boxes-one
  {box-sizing: border-box;
  display: block;
  width: 90%;
  height: auto;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5%;
  padding: 0;
  font-size: 0;}
.language
  {box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0;}
.language h3
  {box-sizing: border-box;
  background-color: rgb(0, 0, 0, 0.7);
  width: auto;
  opacity: 0.4;
  margin: 0;
  padding: 2%;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-right-width: 0px;
  border-radius: 0;
  color: #86AB99;
  font-size: 40px;
  font-size: 4rem;
  text-decoration: none;
  text-align: center;
  box-shadow: 3px 3px 0px #000000;
  transition-duration: 1.0s;}
.dialog-with-picture
  {box-sizing: border-box;
  width: 80%;
  height: auto;
  display: inline-block;
  margin: 0;
  margin-left: 10%;
  margin-top: 5%;
  padding: 0;
  padding-top: 2%;
  padding-bottom: 2%;
  font-size: 0;}
.dialog-with-picture-left
  {box-sizing: border-box;
  width: 16%;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  font-size: 0;}
.dialog-with-picture-left img
  {box-sizing: border-box;
  width: 100%;}
.dialog-with-picture-right
  {box-sizing: border-box;
  text-align: right;
  width: 80%;
  display: block;
  float: right;
  margin: 0;
  padding: 0;
  font-size: 0;}
.dialog-with-picture-right p
  {box-sizing: border-box;
  background-color: transparent;
  width: 100%;
  height: auto;
  color: #B1A9A9;
  margin: 0;
  padding: 0;
  text-align: left;
  font-family: 'bai-jamjuree', cursive;
  font-size: 20px;
  font-size: 2.0rem;}
.dialog-with-picture-right ul
  {box-sizing: border-box;
  width:  60%;
  display: block;
  margin: 0;
  margin-top: 2%;
  padding: 1%;
  padding-left: 1%;
  font-size: 0;}
.dialog-with-picture-right li
  {box-sizing: border-box;
  background-color: rgb(0, 0, 0, 0.4);
  width: 100%;
  display: block;
  margin: 0;
  margin-top: 1%;
  padding: 2%;
  border-radius: 5px;
  text-align: left;
  font-family: gruppo;
  font-size: 22px;
  font-size: 2.2rem;
  font-weight: bold;
  color: #BFBF3F;
  transition-duration: 0.2s;}
.dialog-with-picture-right li:hover
  {background-color: rgb(104, 140, 69, 0.8);
  color: #E0E0E0;}
.dialog-with-picture-right table
  {box-sizing: border-box;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  font-size: 0;}
.dialog-with-picture-right tr
  {box-sizing: border-box;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  font-size: 0;}
.dialog-with-picture-right th
  {box-sizing: border-box;
  background-color: rgb(75, 113, 75, 0.3);
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  padding: 1%;
  color: #E0E0E0;
  text-align: left;
  font-family: michroma;
  font-size: 17px;
  font-size: 1.7rem;}
.dialog-with-picture-right td
  {box-sizing: border-box;
  background-color: rgb(63, 127, 191, 0.3);
  height: auto;
  margin: 0;
  padding: 0;
  padding: 1%;
  color: #E0E0E0;
  text-align: left;
  font-family: bai-jamjuree;
  font-size: 18px;
  font-size: 1.8rem;}
.dialog-with-picture-right video
  {border-radius: 10px;
  height: 140px;
  margin: 0;
  padding: 0;
  font-size: 0;}
.general-info
  {box-sizing: border-box;
    text-align: left;
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  font-size: 0;}
.general-info h3
  {all: initial;
  box-sizing: border-box;
  text-decoration: underline;
  display: block;
  width: 80%;
  margin: 0;
  padding: 0;
  text-align: left;
  color: #8697AB;
  font-family: orbitron;
  font-size: 24px;
  font-size: 2.4rem;}
.general-info p
  {all: initial;
  box-sizing: border-box;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  padding-top: 1%;
  padding-bottom: 2%;
  color: #B1A9A9;
  font-family: bai-jamjuree;
  font-size: 20px;
  font-size: 2.0rem;}
.general-info ul
  {box-sizing: border-box;
  list-style-type: circle;
  width: 100%;
  margin: 0;
  padding: 1%;
  padding-top: 0;
  padding-left: 2%;
  font-size: 0;}
.general-info li
  {box-sizing: border-box;
  width: 100%;
  display: block;
  margin: 0;
  padding: 1%;
  padding-top: 0;
  color: #B1A9A9;
  display: list-item;
  font-family: bai-jamjuree;
  font-size: 20px;
  font-size: 2.0rem;}
.general-info a
  {text-decoration: none;
   color: #8697AB;
   transition-duration: 0.2s;}

.four-boxes
  {box-sizing: border-box;
  display: inline-block;
  /*background-color: grey;*/
  width: 100%;
  margin: 0;
  padding: 1%;
  font-size: 0;}
.four-boxes img
  {box-sizing: border-box;
  border-radius: 5px;
  border-style: solid;
  border-width: 1px;
  border-color: grey;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0;
  transition-duration: 0.3s;}
.four-boxes img:hover
  {border-color: orange;}
.four-boxes h5
  {all: unset;
  box-sizing: border-box;
  text-align: center;
  display: block;
  width: 100%;
  margin: 0;
  padding: 2%;
  font-size: 20px;
  font-size: 2.0rem;
  font-family: bai-jamjuree;
  color: #e0e0e0;}
.four-boxes h5:hover
  {all: unset;}


.four-boxes h6
  {all: unset;
  box-sizing: border-box;
  background-color: #60815B;
  border-radius: 5px;
  text-align: center;
  display: block;
  width: 100%;
  margin: 0;
  border-style: solid;
  border-width: 2px;
  border-color: #4E5E4B;
  padding: 2%;
  font-size: 20px;
  font-size: 2.0rem;
  font-family: bai-jamjuree;
  color: #e0e0e0;
  transition-duration: 0.2s;}
.four-boxes h6:hover
  {background-color: #3C6137;}
.four-boxes a
  {text-decoration: none;
   width: auto;
   color: #E0E0E0;}
.four-boxes-left
  {box-sizing: border-box;
  display: inline-block;
  float: left;
  width: 50%;
  margin: 0;
  padding: 1%;
  font-size: 0;}
.four-boxes-right
  {box-sizing: border-box;
  display: inline-block;
  float: right;
  width: 50%;
  margin: 0;
  padding: 1%;
  font-size: 0;}
.two-boxes-left
  {box-sizing: border-box;
  display: block;
  float: left;
  width: 50%;
  margin: 0;
  padding: 1%;
  font-size: 0;}
.two-boxes-right
  {box-sizing: border-box;
  display: block;
  /*background-color: red;*/
  float: right;
  width: 50%;
  margin: 0;
  padding: 1%;
  font-size: 0;}
.download-button
  {box-sizing: border-box;
  /*background-color: grey;*/
  width: 80%;
  margin: 0;
  margin-left: 10%;
  padding: 0;
  font-size: 0;}

/* PROCESS STEP */
.process-step
  {box-sizing: border-box;
  display: inline-block;
  width: 70%;
  background-color: rgb(0, 0, 0, 0.4);
  border-radius: 5px;
  margin: 0;
  margin-top: 2%;
  margin-left: 2%;
  padding: 1%;
  font-size: 0;
  transition-duration: 0.2s;}
.process-step table
  {box-sizing: border-box;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  font-size: 0;}
.process-step tr
  {box-sizing: border-box;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  font-size: 0;}
.process-step th
  {box-sizing: border-box;
  background-color: rgb(75, 113, 75, 0.3);
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  padding: 1%;
  color: #E0E0E0;
  text-align: left;
  font-family: michroma;
  font-size: 17px;
  font-size: 1.7rem;}
.process-step td
  {box-sizing: border-box;
  background-color: rgb(63, 127, 191, 0.3);
  height: auto;
  margin: 0;
  padding: 0;
  padding: 1%;
  color: #E0E0E0;
  font-family: bai-jamjuree;
  font-size: 18px;
  font-size: 1.8rem;}
.process-step:hover
  {background-color: rgb(0, 0, 0, 0.4);}
.process-step img
  {box-sizing: border-box;
  background-color: rgb(0, 0, 0, 0.1);
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0;}
.process-step-top
  {box-sizing: border-box;
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0;}
.process-step-top-left
  {box-sizing: border-box;
  float: left;
  width: 16%;
  height: auto;
  height: auto;
  display: inline-block;
  margin: 0;
  padding: 1%;
  font-size: 0;}
.process-step-top-left h3
  {box-sizing: border-box;
  background-color: rgb(63, 127, 191, 0.4);
  border-width: 0px;
  text-align: center;
  display: block;
  margin: 0;
  padding: 20px;
  font-family: orbitron;
  box-shadow: none;
  border-radius: 5px;
  border-style: solid;
  border-width: 2px;
  border-color: #3A5672;
  font-size: 40px;
  font-size: 4.0rem;}
.process-step-top-right
  {box-sizing: border-box;
  float: right;
  width: 84%;
  height: auto;
  display: block;
  margin: 0;
  padding: 1%;
  font-size: 0;}
.process-step-top-right h4
  {box-sizing: border-box;
  background-color: transparent;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  color: #C14242;
  font-family: gruppo;
  font-style: italic;
  font-weight: bolder;
  text-decoration: underline;
  font-size: 24px;
  font-size: 2.4rem;}
.process-step-top-right h5
  {box-sizing: border-box;
  background-color: transparent;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  margin-top: 2%;
  padding: 0;
  color: #3F7FBF;
  border-width: 0px;
  text-align: left;
  font-family: bai-jamjuree;
  font-style: italic;
  font-size: 20px;
  font-size: 2rem;}
.process-step-top-right p
  {box-sizing: border-box;
  width: 100%;
  color: #B1A9A9;
  margin: 0;
  margin-top: 1%;
  padding: 0;
  text-align: left;
  font-family: 'bai-jamjuree', cursive;
  font-size: 20px;
  font-size: 1.8rem;}
.process-step-top-right img
  {box-sizing: border-box;
  width: 60%;
  margin: 0;
  margin-top: 2%;
  padding: 0;
  font-size: 0;}
.process-step-top-right video
  {border-radius: 10px;
  height: 140px;
  margin: 0;
  margin-top: 2%;
  padding: 0;
  font-size: 0;}
.process-step-top-right ul
  {box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  padding-left: 2%;
  font-size: 0;}
.process-step-top-right li
  {box-sizing: border-box;
  width: auto;
  margin: 0;
  margin-left: 1%;
  padding: 1%;
  font-family: 'gruppo';
  color: #3F7FBF;
  font-size: 20px;
  font-size: 2rem;}
.process-step-top-right a
  {text-decoration: underline;
   color: #3F7FBF;}
.process-step-bottom
  {box-sizing: border-box;
  display: block;
  width: 100%;
  overflow: scroll;
  margin: 0;
  margin-top: 2%;
  padding: 1%;
  font-size: 0;}
.process-step-bottom p
  {width: 100%;
   color: #C8ABAB;
   padding: 0;
   margin: 0;}
.run-command
  {box-sizing: border-box;
  width: 100%;
  margin: 0;
  margin-top: 1%;
  padding: 1%;
  overflow: scroll;
  white-space:nowrap;
  background-color: #1A2127;
  color: #E0E0E0;
  opacity: .7;
  border-style: solid;
  border-color: #525B54;
  border-radius: 4px;
  border-width: 1px;
  font-size: 18px;
  font-size: 1.8rem;
  font-family: 'prompt';
  transition-duration: .2s;}
.run-command h6
  {box-sizing: border-box;
  text-align: left;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #E0E0E0;
  font-family: play;
  font-style: italic;
  font-size: 18px;
  font-size: 1.8rem;}
pre
  {box-sizing: border-box;
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  font-size: 18px;
  font-size: 1.8rem;
  font-family: 'prompt';
  transition-duration: .2s;}



/* CONTACT PAGE */
.contact-info
  {box-sizing: border-box;
  width: 100%;
  display: inline-block;
  height: auto;
  margin: 0;
  padding: 5%;
  padding-top: 7%;
  padding-bottom: 0;
  font-size: 0;}
/* CONTACT INFO */
.contact-info-left
  {box-sizing: border-box;
  width: 50%;
  height: auto;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  padding-top: 2%;
  font-size: 0;}
.contact-info-left h3
  {width: 100%;
  margin: 0;
  font-size: 20px;
  font-size: 2rem;
  font-family: 'gruppo';
  text-decoration: underline;
  color: #8E4747;}
.contact-info-left a
  {display: block;
  text-decoration: none;
  font-family: 'michroma', sans-serif;
  color: #E0E0E0;
  width: auto;
  margin: 0;
  padding: 0;
  padding-top: 2%;
  padding-bottom: 2%;
  font-size: 16px;
  font-size: 1.6rem;}
.contact-info-phone
  {box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.5);
  border-style: solid;
  border-color: #7D9589;
  border-width: 1px;
  border-radius: 10px;
  display: block;
  width: 70%;
  margin: 0;
  padding: 3%;
  font-size: 0;}
.contact-info-email
  {box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.5);
  border-style: solid;
  border-color: #7D9589;
  border-width: 1px;
  border-radius: 10px;
  display: block;
  width: 70%;
  margin: 0;
  margin-top: 5%;
  padding: 3%;
  font-size: 0;}
/* CONTACT FORM */
.contact-info-right
  {box-sizing: border-box;
  width: 50%;
  height: auto;
  display: block;
  float: right;
  margin: 0;
  padding: 0;
  font-size: 0;}
.form-container
  {box-sizing: border-box;
  width: 100%;
  border-radius: 3px;
  color: #ffffff;
  font-size: 16px;
  font-size: 1.6rem;
  font-family: 'Play', sans-serif;
  margin: 0;
  padding: 0;
  font-size: 0;}
.form-container legend
  {color: #E0E0E0;
  background-color: #5D4646;
  width: 50%;
  text-align: center;
  margin-left: 25%;
  padding: 1%;
  border-radius: 7px;
  border-style: solid;
  border-width: 1px;
  border-color: #E0E0E0;
  font-size: 20px;
  font-size: 2rem;
  font-family: 'play';}
.form-container form
  {box-sizing: border-box;
  width: 100%;
  border-radius: 2px;}
.form-container fieldset
  {box-sizing: border-box;
  background-color: rgb(0,0,0,0.7);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center center;
  border-radius: 10px;
  border-color: #7D9589;}
.form-fields
  {padding: 1%;}
.form-fields label
  {color: #2973AC;
  text-decoration: underline;
  font-family: 'play';
  font-size: 16px;
  font-size: 1.6rem;}
.form-fields input
  {box-sizing: border-box;
  background-color: #3E4C5F;
  width: 100%;
  margin-bottom: 2%;
  padding: 1.5%;
  border-radius: 4px;
  border-width: 1px;
  font-size: 18px;
  font-size: 1.8rem;
  font-family: 'play';
  color: #E0E0E0;}
.form-fields input:hover
  {background-color: #23384C;}
.form-fields textarea
  {box-sizing: border-box;
  width: 100%;
  background-color: #3E4C5F;
  opacity: .7;
  min-height: 80px;
  max-width: 100%;
  padding: 1.5%;
  border-radius: 4px;
  font-size: 18px;
  font-size: 1.8rem;
  font-family: 'play';
  color: #E0E0E0;}
.form-fields textarea:hover
  {background-color: #23384C;}
.form-fields button
  {color: #E0E0E0;
   padding: 2%;
   width: 100%;
   margin-top: 3%;
   font-size: 16px;
   font-size: 1.6rem;
   font-family: 'orbitron';
   border-radius: 5px;
   border-width: 1px;
   transition-duration: .3s;
   background-color: rgb(97, 131, 100, 0.6);}
.form-fields button:hover
  {background-color: #628868;
  transition-duration: 0.2s;}



/* DISTRO INFORMATION */
.distro-info
  {box-sizing: border-box;
  background-color: rgb(0, 0, 0, 0.2);
  width: 96%;
  height: auto;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  margin-top: 2%;
  margin-left: 2%;
  border-radius: 5px;
  padding: 1%;
  font-size: 0;
  transition-duration: 0.2s;}
.distro-info:hover
  {background-color: rgb(0, 0, 0, 0.4);}
.distro-info-left
  {box-sizing: border-box;
  width: 8%;
  height: auto;
  display: block;
  margin: 0;
  margin-top: auto;
  margin-bottom: auto;
  font-size: 0;}
.distro-info-left img
  {box-sizing: border-box;
  width: 100%;
  opacity: 0.7;
  display: block;
  margin: 0;
  padding: 1%;
  padding-bottom: 5%;
  font-size: 0;
  transition-duration: 0.2s;}
.distro-info-left img:hover
  {opacity: 1.0;}
.distro-info-left h6
  {box-sizing: border-box;
  width: 100%;
  display: block;
  color: #D2D6D1;
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: 'gruppo', cursive;
  font-size: 20px;
  font-size: 2rem;}
.distro-info-right
  {box-sizing: border-box;
  width: 92%;
  height: auto;
  display: inline-flex;
  justify-content: center;
  margin: 0;
  padding: 1%;
  padding-right: 0;
  font-size: 0;}
.distro-info-right-description
  {box-sizing: border-box;
  width: 78%;
  display: block;
  margin: 0;
  padding: 1%;
  font-size: 0;}
.distro-info-right-description p
  {box-sizing: border-box;
  background-color: transparent;
  width: 100%;
  color: #C8ABAB;
  margin: 0;
  padding: 0;
  text-align: left;
  font-family: 'bai-jamjuree', cursive;
  font-size: 20px;
  font-size: 2.0rem;}
.distro-info-right-website
  {box-sizing: border-box;
  width: 18%;
  height: auto;
  display: block;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 2%;
  padding: 1%;
  font-size: 0;}
.distro-info-right-website button
  {box-sizing: border-box;
  background-color: green;
  border-radius: 5px;
  opacity: 0.7;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 5%;
  font-family: 'play';
  font-size: 16px;
  font-size: 1.6rem;
  color: #E0E0E0;
  transition-duration: 0.2s;}
.distro-info-right-website button:hover
  {opacity: 1.0;
  color: #FFFFFF;}



/* ARCHIEVES */
.media-items
  {box-sizing: border-box;
  display: inline-block;
  width: 90%;
  margin: 0;
  margin-top: 2%;
  margin-left: 5%;
  padding: 0;
  font-size: 0;}
.media-items video
  {border-radius: 10px;
  height: 140px;}
.media-items audio
  {height: auto;}
.media-items h6
  {box-sizing: border-box;
  color: #C8ABAB;
  text-align: left;
  font-family: 'gruppo';
  margin: 0;
  margin-left: 4%;
  padding: 0;
  padding-top: 62px;
  font-size: 20px;
  font-size: 2.0rem;}
.media-item
  {box-sizing: border-box;
  display: inline-flex;
  width: 50%;
  margin: 0;
  padding: 0;
  font-size: 0;}



/* SPECIAL EFFECTS */
/*SPANS*/
.current-page
{color: 47E33F;}
/*SPACERS*/
.spacer-page-bottom
{box-sizing: border-box;
width: 100%;
margin: 0;
padding: 5%;
font-size: 0;}
.spacer-box-bottom
{box-sizing: border-box;
width: 100%;
margin: 0;
padding: 4%;
font-size: 0;}
.spacer-box-bottom-small
{box-sizing: border-box;
width: 100%;
margin: 0;
padding: 2%;
font-size: 0;}
.spacer-section
{box-sizing: border-box;
width: 100%;
margin: 0;
padding: 2%;
font-size: 0;}
.spacer-section-small
{box-sizing: border-box;
width: 100%;
margin: 0;
padding: 1%;
font-size: 0;}
.spacer-section-bottom
{box-sizing: border-box;
width: 100%;
margin: 0;
padding: 2%;
font-size: 0;}
.variable-spacer
{box-sizing: border-box;
width: 100%;
margin: 0;
padding: 1%;
font-size: 0;}
/* HIGHLIGHTS */
.highlight-01
{color: green;
font-style: italic;}
.highlight-02
{color: grey;
font-style: italic;}
.highlight-yellow
{color: #9F9F69;}
.highlight-red
{color: #990000;}
.highlight-03
{color: #BFBF3F;
font-style: italic;}
.highlight-04
{color: #5684B3;
 font-weight: bolder;}
.highlight-05
{color: #9B6969;
font-weight: bolder;}
.highlight-06
{color: #8D5858;}
.highlight-07
{color: #42605d;
 font-weight: bold;}
.highlight-08
{color: orange;}


/* UNKNOWN */
.sub-page li
  {color: #3F7FBF;
  padding-left: 2%;}
.sub-topic-page li
  {color: #3FBF7F;
  padding-left: 2%;}
.sub-step-page li
  {color: #C14242;
  padding-left: 2%;}
.topic-title
{box-sizing: border-box;
width: 100%;
height: auto;
color: #C14242;
margin: 0;
padding: 0;
text-align: center;
font-family: 'gruppo', cursive;
font-weight: bolder;
font-size: 22px;
font-size: 2.2rem;}