* {
  box-sizing: border-box;
}
body, html {
  height: 100%;
}

body {
  background-color: White;
  font-family: Verdana, sans-serif;
  font-size: 100%;
}

#Hero {

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e1ffff+0,e1ffff+7,e1ffff+12,fdffff+12,e6f8fd+30,c8eefb+54,bee4f8+75,b1d8f5+100;Blue+Pipe+%232 */
  background: #e1ffff; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #e1ffff 0%, #e1ffff 7%, #e1ffff 12%, #fdffff 12%, #e6f8fd 30%, #c8eefb 54%, #bee4f8 75%, #b1d8f5 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ffff', endColorstr='#b1d8f5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  font-family: Georgia, serif;
  height: 100vh;
  text-align: center;
}

#HeroTitle {
  font-size: 10vw;
  padding: 1vh 1vw;
  margin: 1vh 1vw;
}


#HeroTitle2 {
  text-shadow: 2px 2px 8px indigo;
  font-size: 10vw;
  padding: 1vh 1vw;
  margin: 1vh 1vw;
}


#HeroSubtitle {
  color: indigo;
  font-size: 6vw;
  padding: 1vh 1vw;
  margin: 1vh 1vw;
}


.HeroBlurb {
  color: indigo;
  font-size: 1.5vw;
  padding: 1vh 1vw;
  margin: 1vh 1vw;
}

#NavBar {

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffa84c+0,ff7b0d+100;Orange+3D */
  background: #ffa84c; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #ffa84c 0%, #ff7b0d 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #ffa84c 0%,#ff7b0d 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #ffa84c 0%,#ff7b0d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  border: 1px solid White;
  height: 6vh;
  color: White;
}

#NavBar button {

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,f1f1f1+50,e1e1e1+51,f6f6f6+100;White+Gloss+%231 */
  background: #ffffff; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  color: black;
  border-style: outset;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  font-size: 100%;
  height: 4vh;
  padding: 1vh 1vw;
  margin: 1vh 1vw;
}

#Admin {
  float: right;
}

#Desktop {
  background-color: Blue;
  height: 80vh;
  display: block;
  padding: 0px;
  margin: 0px;
}

#Mobile {
  background-color: Green;
  height: 80vh;
  display: none;
  padding: 0px;
  margin: 0px;
}

#Footer {

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#959595+0,0d0d0d+46,010101+50,0a0a0a+53,4e4e4e+76,383838+87,1b1b1b+100;Black+Gloss+Pipe */
  background: #959595; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  color: white;
  height: 12vh;
  text-align: center;
  padding: 2% 0 0 0;
}

#Info {
  color: #aaa;
  float: left;
  margin-left: 5%;
  font-family:  "Times New Roman", Times, serif;
  font-size: 140%;
  font-weight: bold;
}

#PopUp {

  display: none;
  position: fixed;
  z-index: 1;
  left: 25%;
  top: 25%;
  width: 50%;
  height: 50%;
  overflow: auto;

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#959595+0,0d0d0d+46,010101+50,0a0a0a+53,4e4e4e+76,383838+87,1b1b1b+100;Black+Gloss+Pipe */
  background: #959595; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  color: white;
  text-align: center;
  padding: 0 0 0 0;
  border: 1px solid black;
}

#PopUpContent {

  margin: 1% auto;
  padding: 1%;
  width: 95%;
  height: 95%;
}

#PopUpClose {

  float: right;
  font-size: 120%;
  font-weight: bold;
}

.infoText1 {

  float: left;
  font-size: 100%;
  text-align: right;
  width: 20%;
}

.infoText2 {

  float: right;
  font-size: 100%;
  font-weight: bold;
  text-align: left;
  width: 80%;
}

.infoText3 {

  float: left;
  font-size: 90%;
  font-weight: bold;
  text-align: left;
  width: 100%;
}

.content {
  height: 100%;
  width: 100%;
  display: inline-block;
  float: left;
  padding: 0px;
  margin: 0px;
  /*position: relative;*/
}

.side {

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e1ffff+0,e1ffff+7,e1ffff+12,fdffff+12,e6f8fd+30,c8eefb+54,bee4f8+75,b1d8f5+100;Blue+Pipe+%232 */
  background: #e1ffff; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #e1ffff 0%, #e1ffff 7%, #e1ffff 12%, #fdffff 12%, #e6f8fd 30%, #c8eefb 54%, #bee4f8 75%, #b1d8f5 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ffff', endColorstr='#b1d8f5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  color: Black;
  height: 100%;
  width: 20%;
  display: inline-block;
  float: left;
  padding: 0px;
  margin: 0px;
}

.panel {

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fcfff4+0,e9e9ce+100;Wax+3D+%232 */
  background: #fcfff4; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #fcfff4 0%, #e9e9ce 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #fcfff4 0%,#e9e9ce 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #fcfff4 0%,#e9e9ce 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  color: Black;
  height: 100%;
  width: 80%;
  display: inline-block;
  float: left;
  padding: 0px;
  margin: 0px;
}

.mobile {

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fcfff4+0,e9e9ce+100;Wax+3D+%232 */
  background: #fcfff4; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #fcfff4 0%, #e9e9ce 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #fcfff4 0%,#e9e9ce 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #fcfff4 0%,#e9e9ce 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e9e9ce',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  color: black;
  height: 100%;
  width: 100%;
  display: inline-block;
  float: left;
  position: absolute;
  padding: 0px;
  margin: 0px;
  overflow: auto;
}


#aboutSide {
  overflow: auto;
  padding: 1% 2% 2% 2%;
}

#aboutSide .aboutText {
  text-align: justify;
  line-height: 130%;
  font-size: 90%;
}

#aboutPanel {
  overflow: auto;
  padding: 1.8% 2% 2% 2%;
}

#aboutPanel .authorImage {
  height: 50%;
  margin: 0 0 2% 2%;
  border: 1px solid black;
  float: right;
  display: inline;
}

#aboutPanel .authorText {
  margin: 0 0 1% 0;
  text-align: justify;
  line-height: 130%;
  font-size: 90%;
}

#aboutMobile {
  background-color: Violet;
  overflow: auto;
  padding: 2% 2% 2% 2%;
}

#aboutMobile .aboutText {

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e1ffff+0,e1ffff+7,e1ffff+12,fdffff+12,e6f8fd+30,c8eefb+54,bee4f8+75,b1d8f5+100;Blue+Pipe+%232 */
  background: #e1ffff; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #e1ffff 0%, #e1ffff 7%, #e1ffff 12%, #fdffff 12%, #e6f8fd 30%, #c8eefb 54%, #bee4f8 75%, #b1d8f5 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ffff', endColorstr='#b1d8f5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  color: Black;
  text-align: justify;
  line-height: 130%;
  font-size: 90%;
}

#aboutMobile .authorImage {
  height: 50%;
  margin: auto;
  border: 1px solid Blue;
  float: none;
  display: block;
}

#aboutMobile .authorText {
  color: Black;
  margin: 2% 0 2% 0;
  text-align: justify;
  line-height: 130%;
  font-size: 90%;
}

#overviewSide {
  overflow: auto;
  padding: 1% 0.25% 1% 0.25%;
}

#overviewSide .overviewHeader {
  background-color: inherit;
  border: none;
  text-align: right;
  padding: 0 0 0 0;
  margin: 0 0 2% 0;
  width: 95%;
  line-height: 130%;
  font-size: 120%;
  display: block;
}

#overviewPanel {
  overflow: auto;
  padding: 5% 5% 1% 5%;
}

#overviewPanel .overviewText {
  display: none;
}

#overviewPanel .overviewHeading {
  border: none;
  text-align: left;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  width: 100%;
  height: 10%;
  line-height: 100%;
  font-size: 150%;
  font-style: normal;
  font-weight: bold;
}

#overviewPanel .overviewBrief {
  color: Blue;
  border: none;
  text-align: justify;
  padding: 0 0 0 0;
  margin: 0 0 2% 0;
  width: 100%;
  height: 10%;
  line-height: 140%;
  font-size: 100%;
  font-style: italic;
  font-weight: normal;
}

#overviewPanel .overviewParagraph {
  border: none;
  text-align: justify;
  padding: 0 5% 0 5%;
  margin: 1% 0 1% 0;
  width: 100%;
  line-height: 140%;
  font-size: 90%;
  font-style: normal;
  font-weight: normal;
}

#overviewPanel .overviewSummary {
  color: Green;
  border: none;
  text-align: justify;
  padding: 0 0 0 0;
  margin: 2% 0 1% 0;
  width: 100%;
  height: 10%;
  line-height: 140%;
  font-size: 100%;
  font-style: italic;
  font-weight: bold;
}

#overviewMobile {
  overflow: auto;
  padding: 2% 2% 2% 2%;
}

#overviewMobile .overviewText {
  display: none;
}

#overviewMobile .overviewHeader {

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e1ffff+0,e1ffff+7,e1ffff+12,fdffff+12,e6f8fd+30,c8eefb+54,bee4f8+75,b1d8f5+100;Blue+Pipe+%232 */
  background: #e1ffff; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #e1ffff 0%, #e1ffff 7%, #e1ffff 12%, #fdffff 12%, #e6f8fd 30%, #c8eefb 54%, #bee4f8 75%, #b1d8f5 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ffff', endColorstr='#b1d8f5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  border: 1px solid yellow;
  text-align: center;
  padding: 0 0 1% 0;
  margin: 1% auto 1% auto;
  width: 95%;
  height: 8%;
  line-height: 120%;
  font-size: 120%;
  display: block;
}

#overviewMobile .overviewHeading {
  border: none;
  text-align: justify;
  padding: 0 0 0 0;
  margin: 2% auto 2% auto;
  width: 90%;
  line-height: 120%;
  font-size: 120%;
  font-style: normal;
  font-weight: bold;
}

#overviewMobile .overviewBrief {
  color: Blue;
  border: none;
  text-align: justify;
  padding: 0 0 0 0;
  margin: 2% auto 2% auto;
  width: 90%;
  line-height: 120%;
  font-size: 100%;
  font-style: italic;
  font-weight: normal;
}

#overviewMobile .overviewParagraph {
  border: none;
  text-align: justify;
  padding: 0 0 0 0;
  margin: 4% auto 4% auto;
  width: 85%;
  line-height: 120%;
  font-size: 90%;
  font-style: normal;
  font-weight: normal;
}

#overviewMobile .overviewSummary {
  color: Green;
  border: none;
  text-align: justify;
  padding: 0 0 0 0;
  margin: 2% auto 5% auto;
  width: 90%;
  line-height: 120%;
  font-size: 100%;
  font-style: italic;
  font-weight: bold;
}

#glossarySide {
  overflow: auto;
  padding: 1% 0.25% 1% 0.25%;
}

#glossarySide .glossaryHeader {
  background-color: inherit;
  border: none;
  text-align: right;
  padding: 0 0 0 0;
  margin: 0 0 0.25% 0;
  width: 95%;
  line-height: 100%;
  font-size: 80%;
  display: block;
}

#glossaryPanel {
  overflow: auto;
  padding: 5% 5% 1% 5%;
}

#glossaryPanel .glossaryText {
  display: none;
}

#glossaryPanel .glossaryHeading {
  border: none;
  text-align: left;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  width: 100%;
  height: 10%;
  line-height: 100%;
  font-size: 150%;
  font-style: normal;
  font-weight: bold;
}

#glossaryPanel .glossaryBrief {
  color: Blue;
  border: none;
  text-align: justify;
  padding: 0 0 0 0;
  margin: 0 0 2% 0;
  width: 100%;
  height: 10%;
  line-height: 150%;
  font-size: 100%;
  font-style: italic;
  font-weight: normal;
}

#glossaryPanel .glossaryParagraph {
  border: none;
  text-align: justify;
  padding: 0 5% 0 5%;
  margin: 1% 0 1% 0;
  width: 100%;
  line-height: 140%;
  font-size: 90%;
  font-style: normal;
  font-weight: normal;
}

#glossaryMobile {
  overflow: auto;
  padding: 2% 2% 2% 2%;
}

#glossaryMobile .glossaryText {
  display: none;
}

#glossaryMobile .glossaryHeader {

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e1ffff+0,e1ffff+7,e1ffff+12,fdffff+12,e6f8fd+30,c8eefb+54,bee4f8+75,b1d8f5+100;Blue+Pipe+%232 */
  background: #e1ffff; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #e1ffff 0%, #e1ffff 7%, #e1ffff 12%, #fdffff 12%, #e6f8fd 30%, #c8eefb 54%, #bee4f8 75%, #b1d8f5 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ffff', endColorstr='#b1d8f5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  border: 1px solid yellow;
  text-align: center;
  padding: 0 0 1% 0;
  margin: 1% auto 1% auto;
  width: 95%;
  height: 8%;
  line-height: 100%;
  font-size: 100%;
  display: block;
}

#glossaryMobile .glossaryHeading {
  border: none;
  text-align: justify;
  padding: 0 0 0 0;
  margin: 2% auto 2% auto;
  width: 90%;
  line-height: 120%;
  font-size: 120%;
  font-style: normal;
  font-weight: bold;
}

#glossaryMobile .glossaryBrief {
  color: Blue;
  border: none;
  text-align: justify;
  padding: 0 0 0 0;
  margin: 2% auto 2% auto;
  width: 90%;
  line-height: 120%;
  font-size: 100%;
  font-style: italic;
  font-weight: normal;
}

#glossaryMobile .glossaryParagraph {
  border: none;
  text-align: justify;
  padding: 0 0 0 0;
  margin: 4% auto 4% auto;
  width: 85%;
  line-height: 120%;
  font-size: 90%;
  font-style: normal;
  font-weight: normal;
}

#roadmapSide {
  overflow: auto;
  padding: 1% 2% 2% 2%;
}

#roadmapSide .roadmapText {
  color: black;
}

#roadmapSide .roadmapParagraph {
  text-align: justify;
  line-height: 120%;
  font-size: 100%;
}

#roadmapPanel {
  overflow: auto;
  padding: 2% 2% 2% 2%;
}

#roadmapPanel .roadmapImage {
  height: 85%;
  margin: 0 auto 2% auto;
  border: 1px solid black;
  display: block;
}

#roadmapPanel .roadmapLegend {
  border: none;
  text-align: left;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  width: 100%;
  height: 10%;
  line-height: 100%;
  font-size: 130%;
  font-style: normal;
  font-weight: bold;
}

#roadmapMobile {
  overflow: auto;
  padding: 2% 2% 2% 2%;
}

#roadmapMobile .roadmapText {
  color: Black;
}

#roadmapMobile .roadmapParagraph {

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e1ffff+0,e1ffff+7,e1ffff+12,fdffff+12,e6f8fd+30,c8eefb+54,bee4f8+75,b1d8f5+100;Blue+Pipe+%232 */
  background: #e1ffff; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #e1ffff 0%, #e1ffff 7%, #e1ffff 12%, #fdffff 12%, #e6f8fd 30%, #c8eefb 54%, #bee4f8 75%, #b1d8f5 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ffff', endColorstr='#b1d8f5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  text-align: justify;
  width: 90%;
  margin: 2% auto 5% auto;
  line-height: 150%;
  font-size: 100%;
}

#roadmapMobile .roadmapImage {
  width: 90%;
  margin: 2% auto 5% auto;
  border: 1px solid Blue;
  display: block;
}

#roadmapMobile .roadmapLegend {
  border: none;
  text-align: justify;
  padding: 0 0 0 0;
  margin: 2% auto 2% auto;
  width: 90%;
  line-height: 120%;
  font-size: 100%;
  font-style: normal;
  font-weight: bold;
}

#resourcesSide {
  overflow: auto;
  padding: 1% 0.25% 1% 0.25%;
}

#resourcesSide .resourcesHeader {
  background-color: inherit;
  border: none;
  text-align: right;
  padding: 0 0 0 0;
  margin: 0 0 1% 0;
  width: 95%;
  line-height: 140%;
  font-size: 120%;
  display: block;
}

#resourcesPanel {
  overflow: auto;
  padding: 5% 5% 1% 5%;
}


#resourcesPanel .resourcesText {
  display: none;
}

#resourcesPanel .resourcesTags {

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffa84c+0,ff7b0d+100;Orange+3D */
  background: #ffa84c; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #ffa84c 0%, #ff7b0d 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #ffa84c 0%,#ff7b0d 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #ffa84c 0%,#ff7b0d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  border: 1px solid black;
  border-radius: 20px;
  text-align: center;
  padding: 0 1% 0 1%;
  margin: 0 1% 2% 1%;
  float: left;
  line-height: 140%;
  font-size: 70%;
  font-style: normal;
  font-weight: normal;
}

#resourcesPanel .resourcesName {
  border: none;
  clear: both;
  text-align: left;
  padding: 0 0 0 0;
  margin: 5% 0 5% 0;
  line-height: 120%;
  font-size: 150%;
  font-style: normal;
  font-weight: bold;
}

#resourcesPanel .resourcesLink {
  color: Blue;
  border: none;
  text-align: left;
  padding: 0 0 0 0;
  margin: 5% 0 5% 0;
  line-height: 130%;
  font-size: 100%;
  font-style: normal;
  font-weight: normal;
}

#resourcesPanel .resourcesScreenshot {
  height: 50%;
  margin: 0 0 2% 2%;
  border: 1px solid black;
  float: right;
}

#resourcesPanel .resourcesSummary {
  color: Green;
  border: none;
  text-align: justify;
  padding: 0 0 0 0;
  margin: 2% 0 1% 0;
  width: 100%;
  height: 10%;
  line-height: 130%;
  font-size: 100%;
  font-style: italic;
  font-weight: bold;
}

#resourcesPanel .resourcesParagraph {
  border: none;
  text-align: justify;
  padding: 0 0 0 0;
  margin: 1% 0 1% 0;
  width: 100%;
  line-height: 130%;
  font-size: 90%;
  font-style: normal;
  font-weight: normal;
}

#resourcesMobile {
  overflow: auto;
  padding: 2% 2% 2% 2%;
}

#resourcesMobile .resourcesText {
  display: none;
}

#resourcesMobile .resourcesHeader {

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e1ffff+0,e1ffff+7,e1ffff+12,fdffff+12,e6f8fd+30,c8eefb+54,bee4f8+75,b1d8f5+100;Blue+Pipe+%232 */
  background: #e1ffff; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #e1ffff 0%, #e1ffff 7%, #e1ffff 12%, #fdffff 12%, #e6f8fd 30%, #c8eefb 54%, #bee4f8 75%, #b1d8f5 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ffff', endColorstr='#b1d8f5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  border: 1px solid yellow;
  text-align: center;
  padding: 0 0 1% 0;
  margin: 1% auto 1% auto;
  width: 95%;
  height: 8%;
  line-height: 140%;
  font-size: 110%;
  display: block;
}

#resourcesMobile .resourcesTags {

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffa84c+0,ff7b0d+100;Orange+3D */
  background: #ffa84c; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #ffa84c 0%, #ff7b0d 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #ffa84c 0%,#ff7b0d 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #ffa84c 0%,#ff7b0d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  border: 1px solid black;
  border-radius: 20px;
  text-align: center;
  padding: 0 1% 0 1%;
  margin: 0 1% 2% 1%;
  float: left;
  line-height: 130%;
  font-size: 70%;
  font-style: normal;
  font-weight: normal;

}

#resourcesMobile .resourcesName {
  border: none;
  text-align: justify;
  padding: 0 0 0 0;
  margin: 2% auto 2% auto;
  width: 90%;
  line-height: 120%;
  font-size: 120%;
  font-style: normal;
  font-weight: bold;
}

#resourcesMobile .resourcesLink {
  color: Blue;
  border: none;
  text-align: justify;
  padding: 0 0 0 0;
  margin: 4% auto 4% auto;
  width: 85%;
  line-height: 120%;
  font-size: 100%;
  font-style: normal;
  font-weight: normal;
}

#resourcesMobile .resourcesScreenshot {
  width: 90%;
  margin: 2% auto 5% auto;
  border: 1px solid Blue;
  display: block;
}

#resourcesMobile .resourcesSummary {
  color: Green;
  border: none;
  text-align: justify;
  padding: 0 0 0 0;
  margin: 2% auto 5% auto;
  width: 90%;
  line-height: 120%;
  font-size: 100%;
  font-style: italic;
  font-weight: bold;
}

#resourcesMobile .resourcesParagraph {
  border: none;
  text-align: justify;
  padding: 0 0 0 0;
  margin: 4% auto 4% auto;
  width: 85%;
  line-height: 120%;
  font-size: 90%;
  font-style: normal;
  font-weight: normal;
}


#BTSSide {
  overflow: auto;
  padding: 1% 0.25% 1% 0.25%;
}

#BTSSide .BTSHeader {
  background-color: inherit;
  border: none;
  text-align: right;
  padding: 0 0 0 0;
  margin: 0 0 0.25% 0;
  width: 95%;
  line-height: 100%;
  font-size: 80%;
  display: block;
}

#BTSPanel {
  overflow: auto;
  padding: 5% 5% 1% 5%;
}

#BTSPanel .BTSText {
  display: none;
}

#BTSPanel .BTSSection {
  border: none;
  text-align: left;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  width: 100%;
  height: 10%;
  line-height: 100%;
  font-size: 150%;
  font-style: normal;
  font-weight: bold;
}
#BTSPanel .BTSTitle {
  border: none;
  text-align: left;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  width: 100%;
  height: 10%;
  line-height: 100%;
  font-size: 150%;
  font-style: normal;
  font-weight: bold;
}
#BTSPanel .BTSSubtitle {
  border: none;
  text-align: left;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  width: 100%;
  height: 10%;
  line-height: 100%;
  font-size: 150%;
  font-style: normal;
  font-weight: bold;
}

#BTSPanel .BTSPage {
  color: Blue;
  border: none;
  text-align: justify;
  padding: 0 0 0 0;
  margin: 0 0 2% 0;
  width: 100%;
  height: 10%;
  line-height: 150%;
  font-size: 100%;
  font-style: italic;
  font-weight: normal;
}

#BTSMobile {
  overflow: auto;
  padding: 2% 2% 2% 2%;
}

#BTSMobile .BTSText {
  display: none;
}

#BTSMobile .BTSHeader {

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e1ffff+0,e1ffff+7,e1ffff+12,fdffff+12,e6f8fd+30,c8eefb+54,bee4f8+75,b1d8f5+100;Blue+Pipe+%232 */
  background: #e1ffff; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  #e1ffff 0%, #e1ffff 7%, #e1ffff 12%, #fdffff 12%, #e6f8fd 30%, #c8eefb 54%, #bee4f8 75%, #b1d8f5 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  #e1ffff 0%,#e1ffff 7%,#e1ffff 12%,#fdffff 12%,#e6f8fd 30%,#c8eefb 54%,#bee4f8 75%,#b1d8f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1ffff', endColorstr='#b1d8f5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  border: 1px solid yellow;
  text-align: center;
  padding: 0 0 1% 0;
  margin: 1% auto 1% auto;
  width: 95%;
  height: 8%;
  line-height: 100%;
  font-size: 100%;
  display: block;
}

#BTSMobile .BTSSection {
  border: none;
  text-align: justify;
  padding: 0 0 0 0;
  margin: 2% auto 2% auto;
  width: 90%;
  line-height: 120%;
  font-size: 120%;
  font-style: normal;
  font-weight: bold;
}

#BTSMobile .BTSTitle {
  border: none;
  text-align: justify;
  padding: 0 0 0 0;
  margin: 2% auto 2% auto;
  width: 90%;
  line-height: 120%;
  font-size: 120%;
  font-style: normal;
  font-weight: bold;
}
#BTSMobile .BTSSubtitle {
  border: none;
  text-align: justify;
  padding: 0 0 0 0;
  margin: 2% auto 2% auto;
  width: 90%;
  line-height: 120%;
  font-size: 120%;
  font-style: normal;
  font-weight: bold;
}

#BTSMobile .BTSPage {
  color: Blue;
  border: none;
  text-align: justify;
  padding: 0 0 0 0;
  margin: 2% auto 2% auto;
  width: 90%;
  line-height: 120%;
  font-size: 100%;
  font-style: italic;
  font-weight: normal;
}


@media screen and (max-width: 900px){
#Desktop {display: none;}
#Mobile {display: block;}
#NavBar {height: 12vh;}
#Footer {height: 6vh;}
}