.sphenon html { font-family: 'CMU Sans Serif'; }
.sphenon code, .sphenon kbd, .sphenon pre, .sphenon samp { font-family: 'CMU Typewriter Text', monospace, monospace; }
.sphenon body { font-family: 'CMU Sans Serif', "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.sphenon code, .sphenon kbd, .sphenon pre, .sphenon samp { font-family: 'CMU Typewriter Text', Menlo, Monaco, Consolas, "Courier New", monospace; }
.sphenon .tooltip { font-family: 'CMU Sans Serif', "Helvetica Neue", Helvetica, Arial, sans-serif; }
.sphenon .popover { font-family: 'CMU Sans Serif', "Helvetica Neue", Helvetica, Arial, sans-serif; }
.sphenon .carousel-control .icon-prev,
.sphenon .carousel-control .icon-next { font-family: 'CMU Sans Serif', serif; }
.sphenon h1, .sphenon h2, .sphenon h3, .sphenon h4, .sphenon h5, .sphenon h6 { font-family: 'CMU Bright', "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; }
.sphenon .navbar-custom { font-family: 'CMU Sans Serif', "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.sphenon .btn { font-family: 'CMU Sans Serif', "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; }

#sphenonlogo img { font-weight:normal; padding-right:20px; }
@media (max-width: 768px) {
  #sphenonlogo img { width: 70%; }
}

#impress p {
  text-align: left;
}

#mission b { font-weight: normal; color: #BFDE10; }
#mission ul { margin: 0 0 25px; font-size: 18px; line-height: 1.5; }
#mission @media (min-width: 768px) { ul { margin: 0 0 35px; font-size: 20px; line-height: 1.6; } }

.history h3 { text-align: left; color: #B0B0B0; }
.history .event { white-space: nowrap; }
.history .date { font-family: 'CMU Bright'; vertical-align: top; font-size:200%; display: inline-block; width: 10ex; text-align: left; }
.history .description { display: inline-block; white-space: normal; text-align: left; vertical-align: top; width: 90%; }

@media (max-width: 768px) {
  .history .event { white-space: normal; }
  .history .date { display: block; }
  .history .description { display: block; }
}

.history .part-1 { text-align: left; }
.history .part-1 h3 { border-bottom: 1px solid #0000FF; }
.history .part-1 .date { color:#0000FF; }

.history .part-2 { text-align: left; }
.history .part-2 h3 { border-bottom: 1px solid #00C0FF; }
.history .part-2 .date { color:#00C0FF; }

.history .part-3 { text-align: left; }
.history .part-3 h3 { border-bottom: 1px solid #00FFC0; }
.history .part-3 .date { color:#00FFC0; }

.history .part-4 { text-align: left; }
.history .part-4 h3 { border-bottom: 1px solid #BFDE10; }
.history .part-4 .date { color:#BFDE10; }

#team .row h2 {
  font-weight: normal;
  margin: 0 0 0 0;
}

@keyframes flash {
   0% { opacity: 0.0; }

  2% { opacity: 1.0; }
   5% { opacity: 0.9; }
  10% { opacity: 0.7; }
  15% { opacity: 0.5; }
  20% { opacity: 0.3; }
  30% { opacity: 0.1; }
  35% { opacity: 0.0; }
 100% { opacity: 0.0; }
}

@keyframes colors {
   0% { color: rgba(  0,   0, 255, 0.2); }
  25% { color: rgba(  0, 255, 255, 0.2); }
  50% { color: rgba(  0, 255,   0, 0.2); }
  75% { color: rgba(  0, 255, 255, 0.2); }
 100% { color: rgba(  0,   0, 255, 0.2); }
}

.effect {
  position: fixed;
  left: 20%;
  top: 10%;
  z-Index:10;
  font-size: 2vw;
  color: rgba(0, 255, 255, 0.2);
  animation: flash 12s infinite, colors 40s infinite;
}

.light-bg {
  width: 100%;
}

.container-light, .light-bg {
  background: #FFFFFF;
  color: #000000;
}

span.fairy            { color:#BFDE10; font-weight:bold; font-style: normal; }
span.loom             { color:#908100; font-weight:bold; font-style: normal; }
span.board1           { color:#B89C00; font-weight:bold; font-style: normal; }
span.board2           { color:#827200; font-weight:bold; font-style: normal; }

span.fairyloom1       { color:#BFDE10; font-weight:bold; font-style: normal; }
span.fairyloom2       { color:#908100; font-weight:bold; font-style: normal; }
span.businessboard1   { color:#B89C00; font-weight:bold; font-style: normal; }
span.businessboard2   { color:#827200; font-weight:bold; font-style: normal; }
span.lorescroll1      { color:#50676F; font-weight:bold; font-style: normal; }
span.lorescroll2      { color:#D4C682; font-weight:bold; font-style: normal; }
span.lorescript1      { color:#50676F; font-weight:bold; font-style: normal; }
span.lorescript2      { color:#D4C682; font-weight:bold; font-style: normal; }
span.EMOS1            { color:#649DB4; font-weight:bold; font-style: normal; }
span.EMOS2            { color:#000000; font-weight:bold; font-style: normal; }
span.EMOS3            { color:#63AD8B; font-weight:bold; font-style: normal; }
span.applicationloom1 { color:#5792AA; font-weight:bold; font-style: normal; }
span.applicationloom2 { color:#358A63; font-weight:bold; font-style: normal; }
span.codingcookbook1  { color:#50676F; font-weight:bold; font-style: normal; }
span.codingcookbook2  { color:#D4C682; font-weight:bold; font-style: normal; }

.light-bg .btn-default {
  color: #333333;
  background-color: #ffffff;
  border-color: #cccccc;
}

.light-bg .btn-default:hover,
.light-bg .btn-default:focus {
  outline: none;
  color: #333333;
  background-color: #e6e6e6;
  border-color: #8c8c8c;
}

.sphenon .img-circle {
  border-radius: 0;
}

.sphenon #team .img-circle {
  border-radius: 50%;
}

.theexception {
  width: 140px;
  height: 140px;
  oversize: visible;
  position: relative;
  vertical-align: middle;
  text-align: center;
  display: inline-block;
}

.theexception img {
  position:absolute;
  left: 0px;
  bottom: 0px;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  height: 500px;
  margin-bottom: 60px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 500px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 20px;
  text-align: center;
}
.marketing .row h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-right: 10px;
  margin-left: 10px;
}

/* Featurettes
------------------------- */

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 768px) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 992px) {
  .featurette-heading {
    margin-top: 120px;
  }
}