@charset "UTF-8";
/* CSS Document */

/* ---------   Colours   -------- */
/* Black  = #363636;
   Grey   = #CDCDCD;
   Orange = #FF5B34; */





/* ---------   Fonts   -------- */

@font-face {
    font-family: 'brownregular';
    src: url('../fonts/brown-regular-webfont.woff2') format('woff2'),
         url('../fonts/brown-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}




/* ---------   Text   -------- */

body {
  font-family: 'brownregular';
  font-size: 18px;
  line-height: 30px;
  color: #363636;
}
p {
  margin-bottom: 20px;
  color: #363636;
}
::selection {
  background: #CDCDCD;
}
a {
  text-decoration: none;
  color: #CDCDCD;
}
a:hover {
  color: #FF5B34;
  text-decoration: underline;
}
.large {
  font-size: 45px;
  line-height: 42px;
  color: #FF5B34;
  margin-top: 10px;
}
ul {
  -webkit-padding-start: 0px;
  /*  list-style: none;  */
  margin-left: 0;
  padding-left: 0;
  color: #CDCDCD;
}
li {
    list-style-position: outside;
}






/* --------- Structure -------- */
.header {
  padding-top: 64px;
  padding-bottom: 32px;
}
/*.footer {
  margin-top: 150px;
  padding-bottom: 0px;
  color: #CDCDCD;
  text-align: left;
}*/
.footer a {
  text-decoration: underline;
}


/* PIN FOOTER TO BOTTOM */
.main {
  position: relative;
  min-height: 88vh;
  padding-bottom: 100px; /* Should be equal to the height of your footer */
}
.footer-pin {
  position: absolute;
  bottom: 0px;
}








/* --------- Swticher -------- */

.grey-bg {
  background-color: #ECECEC;
}
.switcher {
  height: 64px;
}
.button {
  padding-top: 15px;
  color: #363636;
}
.button-active {
  height: 64px;
  text-align: center;
  background-color: white;
}
.button-inactive {
  height: 64px;
  text-align: center;
}
.button-inactive:hover {
  height: 64px;
  text-align: center;
  background-color: #F6F6F6;
}






/* --------- Instructions -------- */

.note {
  z-index: 100;
  position: fixed;
  left: -25px;
  top: 49%;
  transform: rotate(-90deg);
  width: 195px;
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer */
  -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
  -webkit-user-select: none; /* Chrome, Safari, and Opera */
  -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}
.noteClickToCopy {
  z-index: 100;
  position: fixed;
  right: -10px;
  top: 48%;
  transform: rotate(90deg);
  width: 145px;
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer */
  -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
  -webkit-user-select: none; /* Chrome, Safari, and Opera */
  -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}
.noteEnterToConvert {
  z-index: 100;
  position: fixed;
  right: -25px;
  top: 49%;
  transform: rotate(90deg);
  width: 195px;
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer */
  -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
  -webkit-user-select: none; /* Chrome, Safari, and Opera */
  -webkit-touch-callout: none; /* Disable Android and iOS callouts*/
  color: #CDCDCD;
}
/*.key {
  border-style: solid;
  border-width: 2px;
  border-color: #363636;
  border-radius: 5px;
  padding: 0px 6px 0px 6px;
  margin-left: 8px;
  margin-right: 8px;
  float: left;
  position: relative;
  top: -2px;
  color: #363636;
}
.key p {
  margin: 0px;
  padding-bottom: 0px;
}*/
.key {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: #CDCDCD;
  margin-left: 8px;
  margin-right: 8px;
  float: left;
  position: relative;
  top: -2px;
  color: #CDCDCD;
}
.key p, .note p, .noteClickToCopy p  {
  color: #CDCDCD;
}