@font-face { font-family: MetropolisRegular; src: url("/fonts/Metropolis-Regular.otf") format("opentype"); }
@font-face { font-family: MetropolisBold; src: url("/fonts/Metropolis-Bold.otf") format("opentype"); }
@font-face { font-family: PNRegular; src: url("/fonts/pn/PN-Regular.otf") format("opentype"); }
@font-face { font-family: PNBold; src: url("/fonts/pn/PN-Bold.otf") format("opentype"); }
@font-face { font-family: PNLight; src: url("/fonts/pn/PN-Light.otf") format("opentype"); }
@font-face { font-family: NexaRegular; src: url("/fonts/NexaRegular.otf") format("opentype"); }
@font-face { font-family: NexaBold; src: url("/fonts/NexaBold.otf") format("opentype"); }
@font-face { font-family: NexaLight; src: url("/fonts/NexaLight.otf") format("opentype"); }

html, body { width: 100%; height: 100%; }
body { color: #454955; font: 15px/1.5 MetropolisRegular, NexaRegular, Helvetica, Arial, sans-serif; }
b, th, strong { font-family: MetropolisBold, Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: NexaBold, MetropolisBold, Helvetica, Arial, sans-serif; }

a, a:hover  { color: #39f;  }
.navbar .fa { color: #777; display: none; }
.navbar a.nav-link { color: #eee; }
.navbar .dropdown-menu { margin-top: -1px; }
.steps img { max-height: 72px; }


.grid { background-size: 30px 30px; background-image: linear-gradient(to right, #fafafa 1px, transparent 1px), linear-gradient(to bottom, #fafafa 1px, transparent 1px);}
.bg1 { background-color: #eee;  }
.bg2 { background-color: #E0F5FF; }  /* cyan-ish */
.bg3 { background-color: #ffE0F5; }  /* pinkish */ 
.bg4 { background-color: #e4e4e4; }  /* linen */
.bg5 { background-color: #ecf8f1;  }  /* cotton */
.bg6 { background-color: #c98474;  }  /* cotton */
.bg7 { background-color: #f7f9fb; }
.bg8 { background-color: #CCDDE2; }

.fg1 { color: #2EC4B6; }
/* .fg1 { color: #FF9B42; } */
/* .fg1 { color: #F7A072; } */
/* .fg1 { color: #EDDEA4; } */
/* .fg1 { color: #00A7E1; } */
/* .fg1 { color: #D9E5D6; } */

.dropdown:hover .dropdown-menu { display: block; }
.dropdown-item img { max-width: 32px; max-height: 32px; margin-right: 0.7em; }
.footer li a { color: #aaa; }

.videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; }
.videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.xnavbar {
  background-color:rgb(53, 98, 141) !important;
  background-color:rgb(162, 65,46) !important;
  background-color:rgb(117, 91, 192) !important;
  background-color:rgb(229, 75, 50) !important;
  background-color:rgb(147, 204, 231) !important;
  background-color:rgb(75, 186, 213) !important;
  background-color: #fb0 !important;
}

pre,
code {
  text-shadow: none !important;
  font-size: 14px !important;
  line-height: 130% !important;
  color: #575 !important;
  background: #eee !important;
  font-weight: bolder;
  border-radius: 0.3em;
  white-space: pre !important;
  overflow-y: auto !important;
}

pre {
  padding: 0.6em 1em;
}

pre code { padding: 0; }

code {
  padding: 0.15em 0.5em;
}

.zoomable>input {
  display: none;
}

.zoomable img {
  transition: transform 0.25s ease;
  cursor: zoom-in;
  z-index: 9 !important;
  position: relative;
}

.zoomable input[type=checkbox]:checked~label>img {
  transform: scale(3);
  cursor: zoom-out;
  z-index: 999 !important;
}

.gif, iframe {
  max-width: 100%;
  height: 160px;
  outline: none;
  border: 1px solid #ccc !important;
  outline: none;
}

input:focus, textarea:focus, *:focus {
  outline: none;
  /* border: none !important; */
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}


.kit a[name] {
  position: absolute;
  top: 1em;
  right: 2.5em;
  font-size: 15px !important;
  color: #ccc !important;
  z-index: 999;
  outline: none;
}

.kit a[name] .fa:hover {
  color: #777;
}

.kit .container {
  position: relative;
}