body {
   /*background-color: #fcfcfc;*/
   color: #333;
}

/*****************************/



/* Materialize: sticky footer */
body {
   display: flex;
   min-height: 100vh;
   flex-direction: column;
   background-color: #333 !important;
}

main {
   flex: 1 0 auto;
   background-color: #f8f8f8 !important;
   background-color: #fff !important;
   color: #555;
   padding-bottom: 20px;
    font-size: 16px;
}

footer.page-footer {
   margin-top: 0;
}

footer.page-footer .footer-copyright {
   line-height: 1.7em;
   height: auto;
}

footer.page-footer .footer-copyright .container {
   margin-top: 0.7em;
   margin-bottom: 0.7em;
}

footer.page-footer .footer-copyright span {
   display: inline-block;
}


/* Materialize adjustments */

.icon-block {
   padding: 0 15px;
}
.icon-block .material-icons {
   font-size: inherit;
}

.card .card-action {
  border-top: 1px solid rgba(255,222,0,1);
}

.imagebox {
    width: 400px;
    max-width: 100%;
    height: auto;
    margin: auto;
}

.imagebox img {
    text-align: center;
    width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 300;
    color: #aaa;
}

td {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 6px;
    padding-right: 6px;
}

h1 { font-size: 44px;}
h2 { font-size: 36px;}
h3 { font-size: 30px;}
h4 { font-size: 26px;}
h5 { font-size: 22px;}
h6 { font-size: 18px;}

#page ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 1em;
}

#page ul > li {
    font-size: 16px;
    list-style: none;
    padding-left: 2em;
    text-indent: -.7em;
    line-height: 1.7em;
}

#page ul > li:before {
    /*content: "■ ";*/
    content: "▪  ";
    /*color: #ffff00;*/

    color: #dcc500;
   /*color: #78734b;   */
    padding-right: .3em;
}

main a, main a:visited {
    /* color: #555; */
    text-decoration: underline;
}

main a:hover {
    /*color: #ffff00;*/
    color: #dcc500;
    text-decoration: underline;
}

.carousel a, .carousel a:visited,
.dark a, .dark a:visited {
  color: #fff;
}

.carousel a:hover {
    color: #ffff00;
}


code {
    font-size: 14px;
    color: #817417;
    font-weight: bold;
}

pre.plaincode {
    font-size: 14px;
    color: #817417 !important;
    background-color: rgba(255, 222, 0, .6);
    border-radius: 3px;
    margin-left: 2em;
    padding: 8px 8px 8px 20px;
}

pre.plaincode > code {
    font-weight: normal;
    background-color: transparent !important;
    padding: 0 !important;
}

.highlight-code {
    padding: 8px 12px 8px 20px;
    font-size: 13px;
    width: 100%;
    margin-left: 0em;
    background-color:  #EAEAEA;
    border-radius: 3px;
}

.headerlink {
    opacity: 0;
}

.headerlink:hover {
    transition: all 0.1s ease-in-out;
    opacity: 1;
    text-decoration: none;
}

blockquote {
    border-left: 4px solid #ffff00 !important;
}

/*
 http://old.driven-by-data.net/about/chromajs/#/0
 */

 nav {
    z-index: 10 !important;
 }

 nav ul a:hover {
    background-color: rgba(255, 222, 0, 0.29);
    color: #E6E5E5;
    transition: all 0.2s ease-in-out;
 }

 .feature-block {
    margin: 8px 8px 39px 8px;
    border-top: solid 3px #ffff00;
    color: #666;
 }

 .feature-block h5 {
    font-weight: 300;
    color: #555;
 }

 .feature-icon {
    margin: 10px;
    font-size: 56px;
    font-weight: 300;
    color: #555;
 }



.frontsubtitle {
    font-size: 28px;
    font-weight: 300;
    margin: 0;

}

.carousel p {
  font-size: 18px;
}

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 200px;
}

.sticky:before,
.sticky:after {
    content: '';
    display: table;
}

.color-0 {
    color: #ffffff !important;
}

.color-1 {
    color: #ffff00 !important;
}
.color-2 {
    color: #c0a80f !important;
}
.color-3 {
    color: #857411 !important;
}
.color-4 {
    color: #4e450e !important;
}
.color-5 {
    color: #1e1a00 !important;
}

.color-6 {
    color: #000000 !important;
}
.color-7 {
    color: #ECDB6C !important;
}

.b-color-0 {
    background-color: #ffffff !important;
}
.b-color-1 {
    background-color: #ffff00 !important;
}
.b-color-2 {
    background-color: #c0a80f !important;
}
.b-color-3 {
    background-color: #857411 !important;
}
.b-color-4 {
    background-color: #4e450e !important;
}
.b-color-5 {
    background-color: #333 !important;
}
.b-color-6 {
    background-color: #000000 !important;
}

.b-color-7 {
    background-color: #aaa !important;
}

.b-color-8 {
    background-color: #999 !important;
}

.b-color-9 {
    background-color: #333 !important;
}

.color-9 {
    color: #0F608C !important;
}

.b-color-10 {
    background-color: #666 !important;
}

.color-11 {
    color: #888 !important;
}


.active, .active a, .new, .btn {
    /* color: rgba(0, 0, 0, .8)  !important; */
    color: #333;
    background-color: #ffff00 !important;
}

.collection-item {
    color: #666  !important;
}

.b-color-1-darken-1 {
    background-color: rgb(255, 222, 0) !important;
}

.symbol {
    color: #4e450e;
    background-color: #ffff00 !important;
    padding: 3px;
}


.nav-wrapper li img {
    width: 12px;
    height: 12px;
    padding: 0;
}

.nav-scroll-top {
    box-shadow: none !important;
    background-color: #333 !important;
    transition: all 0.3s ease-in-out;
}

.nav-scroll-top .brand-logo {
    opacity: 0 !important;
    transition: all 0.3s ease-in-out;
    pointer-events: none;
    cursor: default;
}

.nav-scroll-nontop {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
    background-color: #333 !important;
    transition: all 0.35s ease-in-out;
}

.nav-scroll-nontop .brand-logo {
    opacity: 1 !important;
    transition: all 0.35s ease-in-out;
}

.logo-on {
    opacity: 1 !important;
    transition: all 0.35s ease-in-out;
}

.logo-off {
    opacity: 0 !important;
    transition: all 0.35s ease-in-out;
}

/*
rgb(255, 222, 0)
#ffff00 #c9af29 #958334 #645936 #333333
#ffff00 #c0a80f #857411 #4e450e #1e1a00
*/

/*
 We have a fixed navbar, and to make intra-page header anchors / targets
 not disappear under the top navbar, we offset the anchor target.
 */
a.anchor {
    display: block;
    position: relative;
    top: -90px;
    visibility: hidden;
}

#main a.goto-top {
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1.6em;
    margin-bottom: 2em;
    border-top: solid 1px #999;
    padding-top: 6px;
    text-decoration: underline;
    text-align: center;
}


.centeredText {
   text-align: center;
}

/* want page footer blocks to adjust on mid-sized */

.page-footer .col {
   display: inline-block;
   float: none;
   vertical-align: top;
}

@media only screen and (min-width: 601px) {
   .page-footer .col.m6 {
      width: 49.5%;
   }
}

@media only screen and (min-width: 993px) {
    .page-footer .col.l2 {
        width: 15%;
    }
}


/*****************************
  Landing page formatting
******************************/

.maxWidth {
   max-width: 1100px;
}

.maxWidthWider {
   max-width: 1100px;
}

.inlineBlock {
   display: inline-block;
}

.textLeft {
   text-align: left;
}


/* fork us on github banner */
#github {
   width: 132px;
   height: 132px;
   position: fixed;
   top: 0px;
   right: 0px;
   border: 0;
   transition: all 0.5s;
}

#github {
   background-image: url('../img/gen/github_path.svg');
   filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.5));
   z-index: 1002;/* otherwise the crossbar log overlays this partially and prevents the hover */
}

#github:hover {
   background-image: url('../img/gen/github_path_highlighted.svg');
   -webkit-filter: drop-shadow(0px 0px 15px rgba(0,0,0,0.7));
   filter: svg-drop-shadow;
}


#github.noShow {
   visibility: hidden;
   opacity: 0;
   transition: all 0.5s;
}

main a.dockerLink {

text-decoration: none;

color: #ffff00;
}

main a.dockerLink:visited {

}

main a.dockerLink:hover {

   text-decoration: underline;

   color: #f6de3b;
}

/* carousel formatting*/

.carousel {
    margin-top: 3em;
    height: auto;
}

.carousel h1 {
    text-align: center;
}

.carousel .row {
    visibility: hidden;
    opacity: 0;
    transition: all 0.15s ease-in-out;
}

.carousel .row.shown {
    visibility: visible;
    opacity: 1;
    transition: all 0.15s ease-in-out 0.17s;
}

.carousel .slideContainer {
    position: relative;

}

.carousel .slide {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 22rem;
}

@media (max-width: 600px) {
   .carousel .slide {
      min-height: 34rem;
   }
}

.carousel .slide.shown {
   position: relative;
}



.carousel button {
    border: none;
    background-color: transparent;
}

.carousel li.disabled {
    color: #888;
}

.carousel .navigation {
    text-align: center;
    clear: both;
    margin-bottom: -1.5em;
}

.navigation ul {
    display: inline-block;
}

.navigation ul,
.navigation .material-icons {
    font-size: 24px;
}

/* carousel image size adjustments */
.slide img {
   width: 100%;
   max-width: 23rem;
   display: inline-block;
   min-height: 20rem; /* otherwise IE restricts the image height to that of the text block */
   height: 100%;
}

.slide .col.image  {
   text-align: center;
}

#pubsub_publish_img {
   max-width: 21rem;
}

#carousel_realtime_img {
   max-width: 21rem;
}

#carousel_realtime table {
   font-size: 80%;
}

#carousel_realtime thead {
   font-weight: 500;
}

#carousel_realtime tr {
   line-height: 1em;
}

#carousel_realtime td {

}


/* features formatting */

/*
    We can't have the features in rows, and they can hang due to different
    content heights.
    'inline-block' avoids this, but we need to slightly adjust the widths
    to less than 1/3 and 1/2 respectively.
*/

.inlineCollection .col {
    display: inline-block;
    vertical-align: top;
    float: none;
    margin: 0;
    text-align: left;
}

@media only screen and (min-width: 601px) {
    .inlineCollection .col.m6 {
        width: 49.5%;
    }
}

@media only screen and (min-width: 993px) {
    .inlineCollection .col.l4 {
        width: 32.8%;
    }
}

.inlineCollection .col p {
    /* font-size: 16px; */
    color: #888;
}



/* codebox formatting */



.container .row.codeBox {
    margin-left: 0rem;
    margin-right: 2rem;
    margin-top: 2rem;
 }


/* less margin on narrower screens */
 @media (max-width: 650px) {
   .container .row.codeBox {
      margin-left: 0;
      margin-right: 0;
   }
}

.codeBox li#switch_js {
   min-width: 7em;
}

#page .codeBox li {
    /* font-size: inherit; */
    padding-left: 0;
    line-height: 3em;
    text-indent: 0;
}

#page .codeBox li a {
    vertical-align: bottom;
}

#page .codeBox li:before {
    content: "";
    padding: 0;
}

.codeBox li#switch_python {
   min-width: 2em;
}

.codeBox li#switch_cpp {
   min-width: 4em;
}

.codeBox li#switch_php {
   min-width: 2em;
}



.codeSwitches a {
   text-decoration: none;
}

.codeSwitches a:hover {
   text-decoration: none;
}

.codeBox .indicator {
   display: none;
}


 /* overwrite materialize CSS tab 'active' indicator color */
 .codeBox .tabs .indicator {
    background-color: transparent;
    background-color: #ffff00;
 }

 /*
    We need min height on code containers themselves
    since we don't want things to jump when switching
    the language to show.
    Since the code doesn't line-wrap, we can count on
    one specific language determining the maximum height
    necessary.
 */
 .codeContainer {
    min-height: 35em;
 }

 /*
    min height on the pre so that the scroll bar
    is at the bottom on the container
 */
 .codeContainer pre {
    min-height: 33em;
 }


.codeSwitches {
   border-bottom: 1px solid #bbb;
   background-color: transparent;
}


/* cursorsync formatting */

.boxes {
   display: inline-block;
}

.fullWidth {
    width: 100%;
}

.cursorBoxContainer > div {
   height: 200px;
}

.cursorBox {
   height: 100%;
   /* width: 350px; */
   border: 2px solid #949494;
   border-radius: 3px;
   /* float: left; */
   position: relative;
   /* margin-right: 9px; */
}

.cursor {
   position: absolute;
   height: 16px;
   width: 16px;
   /* border: 1px solid #5D5D5D; */
   /* border-radius: 1px; */
   /* background-color: #ffff00; */
   top: 0;
   left: 0;
}

.connector {
   text-align: center;
   position: relative;
   }

.connectorLine {
   height: 50%;
   width: 110%;
   position: relative;
   left: -5%;
   border-bottom: 3px solid #949494;
}

.connectorInstance {
   position: relative;
   display: inline-block;
   top: -50px;
}

@media (max-width: 993px) {
   .connectorLine {
      height: 100%;
      width: 50%;
      position: relative;
      left: 0;
      border-bottom: none;
      border-right: 3px solid #949494;
   }

   .connectorInstance {
      top: -151px;
   }

   .connectorInstance p {margin-top: 0;background-color: #333;}

}


.connector img {
   /* width: 100px; */
   height: 100px;
   }




/* demoBox formatting */

#demoBox {
   margin-top: 0.2em;
   max-width: 1024px;
   text-align: left;
   display: inline-block;
}

.demos-overview-link {
    text-align: center;

    font-size: 22px;
    padding-top: 0.7em;
}

.demos-overview-link a {
  text-decoration: underline;
}

#demoBox p.direct-demos {
    text-align: center;

    padding-top: 1em;
}

.demos_list {
   list-style: none;
   margin: 0 auto;
   min-height: 100px;
   padding: 0;
}

.demos_list > li {
   width: 280px;
   height: 300px;
   position: relative;
   color: #444;
   margin: 14px 16px 16px;
   padding: 0px;
   display: inline-block;
   vertical-align: top;
}

.demos_list > li.nonDisplay {
   display: none;
}

.demos_list > li > a {
   display: block;
   color: #555;
   border-radius: 3px;
   width: 282px;
   height: 259px;
   margin: 0 auto;
   font-size: 20px;
   text-align: left;
   text-decoration: none;
}


/*
  How it works page formatting
*/

.container.howItWorks {
  max-width: 800px;
}

.imageContainer {
  background-color: #353535;
  border-radius: 2px;
  text-align: center;
  max-width: 600px;
  min-width: 200px;
  width: 90%;
  display: inline-block;
  margin-bottom: 1.7rem;
}

.patternContainer img {
  width: 41%;
  min-width: 200px;
  max-width: 600px;
  margin-left: 5%;
  margin-top: 1rem;
  margin-bottom: 1.2rem;
}

.howItWorks li {
  font-size: inherit;
}

.howItWorks #crossbarOverview {
  max-width: 400px;
}


.howItWorks #supportedLanguages {
  max-width: 300px;
  margin: 0.5rem 0;
}

.howItWorks #polyglotApplications   {
  max-width: 300px;
  margin: 1rem 0;
}

.howItWorks #httpBridge {
  max-width: 400px;
}

.howItWorks #encryptedTransports {
  max-width: 400px;
}

.howItWorks #multiProcess {
  max-width: 400px;
}

.howItWorks #manyClients {
  max-width: 300px;
}


.howItWorks #ccLogo {
  width: 48%;
  max-width: 200px;
  margin-right: 5%;
  vertical-align: top;
  margin-top: 3%;
}

.howItWorks #osiLogo {
  width: 48%;
  max-width: 150px;
  margin: 3% 0;
}

.howItWorks .note {
  font-style: italic;
}

.howItWorks .separator {
  width: 100%;
  border-top: solid 1px #999;
  margin-top: 2.6em;
  margin-bottom: 2.6em;
}


#page.howItWorks .codeBox ul {
  list-style: none;
}

#page.howItWorks .codeBox li {
  font-size: inherit;
  list-style: none;
  padding-left: 0;
  text-indent: 0;
  line-height: 3em;
}

#page.howItWorks .codeBox li:before {

content: none;
}

#page ul.codeSwitches {
  margin-bottom: 0;
}

.codeContainer.connect {
  min-height: 21em;
}

.codeContainer.connect pre {
  min-height: 20em;
}



.codeContainer.subscribe {
  min-height: 12em;
}

.codeContainer.subscribe pre {
  min-height: 11em;
}



.codeContainer.publish {
  min-height: 2em;
}

.codeContainer.publish pre {
  min-height: 1em;
}



.codeContainer.register {
  min-height: 12em;
}

.codeContainer.register pre {
  min-height: 11em;
}



.codeContainer.call {
  min-height: 8em;
}

.codeContainer.call pre {
  min-height: 7em;
}



/* scalability section */

.scalesBox {

}

.scalesBox .scalesHeader {

}

.scalesBox table {
background-color: #EAEAEA;
border-radius: 5px;
padding: 1em 1.5em;/* border-collapse: separate; */}

.scalesBox tbody {
}

.scalesBox th {
text-align: center;
background-color: #B3B3B3;
border-radius: 0;
}

.scalesBox tr {

}

.scalesBox tr:nth-of-type(2n) {
  background-color: gainsboro;
}


.scalesBox tr:nth-of-type(2) td {
  vertical-align: top;
}

.scalesBox .hardware {

}

.scalesBox .connections,
.scalesBox .calls,
.scalesBox .events,
.scalesBox .requests {

}

.scalesBox tr td {
text-align: center;
border-radius: 0;
}

.scalesBox tr td:first-of-type {

vertical-align: middle;

text-align: left;

font-weight: bold;

padding-left: 1em;
}


.scalesBox .connections {

}

.scalesBox .calls {

}

.scalesBox .events {

}

.scalesBox .requests {

}


/* SVG animation (container) styles */

.embeddedSvgAnimation {
   width: 100%;
}


/* widescreen ratio svg * textBox styles */
/* meant for landscape + big enough that the full list is readable*/
.embeddedSvgAnimation {
   width: 100%;
   display: inline-block;
   padding: 3em;
}

.animationTextBox {
   width: 100%;
   display: inline-block;
   padding: 0 0 1em 1em;
   vertical-align: top;
}

.animationTextBox li {
   text-align: left;
   padding: 0.5em 0 0em 0.5em;
   /* border:  1px solid #777; */
   margin: 0 0 -1px 0;
   text-indent: -1.6em;
   padding-left: 2.1em;
}

.animationButtons {
   text-align: center;
}

.animationButtons img {
   width: 24px;
   /*width: 24px;*/
   text-align: center;
   vertical-align: middle;
   }

.animationButtons:disabled {
   opacity: 0.5;
}

.animationExplanations li.highlighted {
   background-color: #ffff00;
   color: #000;
}

.animationTextBox {
   font-size: 1.2vw;
   position: relative;
}

.animationTextBox button {
   /*font-size: 1.4vw;*/
   font-size: 1rem;
}

@media (max-width: 800px) {
   .animationTextBox {
      font-size: 11px;
   }

   .animationTextBox button {
      /*font-size: 11px;*/
   }

   .animationButtons img {
      width: 20px;
   }
}

@media (max-width: 1380px) {

   .animationButtons img {
      /*width: 20px;*/
      width: 2vw;
   }

   button.animationButtons {
      height: 4vw;
      line-height: 4vw;
      padding: 0 2vw;
   }
}

@media (min-width: 1400px) {
   .animationTextBox {
      font-size: 16px;
   }

   .animationTextBox button {
      /*font-size: 16px;*/
   }
}


@media (max-width: 991px) {
   .embeddedSvgAnimation {
      width: 100%;
      display: block;
   }

   .animationTextBox {
      width: 100%;
   }

   .animationTextBox ul {
      display: block;
      columns: 2;
      -webkit-columns: 2;
      -moz-columns: 2;
   }

   .animationTextBox li {
      /*font-size: 1.8vw;*/
      font-size: 16px;
   }

   .animationButtons img {
      width: 32px;
   }

   button.animationButtons {
      height: 48px;
      line-height: 48px;
      padding: 0 1.5em;
   }



}


@media (max-width: 700px) {
   .animationTextBox li {
      font-size: 12px;
   }
}

/* carousel content styles */

.carouselContent .slide {
   width: 50%;
   display: inline-block;
   min-width: 400px;
   vertical-align: top;
   margin-top: 2em;
}


.carouselContent .slide .text {
   padding-right: 2em;
}


@media (max-width: 1250px) {
   .carouselContent .slide {
      width: 100%;
      display: block;
   }
}

.animationTextBoxButtonContainer {
   position: relative;
}

.animationTextBoxButtonContainer .secondRow {
   position: absolute;
   top: 0;
   left: 0;
}

.animationTextBoxButtonContainer button.hidden {
   visibility: hidden;
}

#animation_01_container {
   position: relative;
}

#expandAnimation {
   position: absolute;
   top: 9px;
   right: 2px;
   background-color: transparent;
   border: none;
   opacity: 0.4;
}



/* claims (after biglogo) */
#claims {
   width: 51%;
   margin: 2em auto;
   min-width: 410px;
}

#claims p {

}

#claims .header {
font-size: 140%;
text-align: center;
}


#claims .claim {
text-align: center;
font-size: 121%;
}


@media (min-width: 800px) {
   .claims {
      -webkit-columns: 2;
      -moz-columns: 2;
      columns: 2;
   }

}


.claims p:first-of-type {
   margin-top: 0;
}

strong {
   font-weight: bold;
}


.claims p {

}


.cb_logo img {
   width: 100%;
}


.dark {
   background-color: #333;
   padding: 0.5em 0 1em 0;
   color: #fff;
}

.dark .codeBox .tab a {
}

.codeBox li {
background-color: transparent;
}


.demos_list li img {
border-bottom: 1px solid #A2A2A2;
}


.demos_list li span {
   padding-left: 0.7em;
}


.animationContainer .animationProperContainer {}


.animationContainer {
margin-bottom: 3em;
}


.roundButton {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #eee;
margin: 0 0.4em;
position: relative;
bottom: 4px;
}


/* video box for iframe video embeds which scales with the page */
/* from https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */

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



/* navbar dropdown element */

.contains-dropdown {
   position: relative;
}

.cb-dropdown-content {
   display: none;
   position: absolute;
   width: 240px; /* same as the width of the side-nav - changin this requires adjustments to the side-nav
                     to avoid different line breaks in the two menu modes */
}

.side-nav .cb-dropdown-content {
   position: relative;
   width: 100%;
}

ul:not(.side-nav) li:hover > .cb-dropdown-content,
/*li:hover > .cb-dropdown-content,*/
.side-nav li.tapped .cb-dropdown-content,
.cb-dropdown-content:hover {
   display: block;
}


.cb-dropdown-content li {
   width: 100%;
}

.cb-dropdown-content li a {
   width: 100%;
   color: #fff !important;
}

.cb-dropdown-content li a:hover {
   background-color: rgba(255, 222, 0, 0.29) !important;
   transition: all 0.2s ease-in-out;
   /* color: #333 !important; */
}

@media only screen and (max-width: 1500px) {

   /* repeats the rules for collapsed sidenav from generic */
   /* materialize CSS - just for an earlier break point */

   .hide-on-med-and-down {
      display: none !important;
   }

   nav a.button-collapse {
      display: block;
   }

   nav .brand-logo {
    left: 50%;
    transform: translateX(-50%);
   }

   .side-nav a {
      display: inline-block;
   }

}

#nav ul li.active,
#nav ul li.active a {
    color: #333;
    background-color: #ffff00;
}

#nav i.right {
   margin-left: 0;
}

nav ul li.contains-dropdown a {
   padding-right: 5px;
}

/* sidenav color scheme change styles */
/* add the basics of this to our materialize CSS adjustment */
.side-nav {
   background-color: #666;
   /*width: 240px; /* same as for the submenus in the top-nav */
   /*
      setting above to anything but 240px requires adjustment of materialize CSS for the
      offset for hiding the menu
   */
}

.side-nav a {
   color: #fff;
}

/* we highlight the entire 'li', so overwrite the additional */
/* hover highlighting for the link from materialize */
nav ul a:hover, nav ul li.active,
.side-nav a:hover, .side-nav li.active {
    background-color: transparent;
}


nav {
   z-index: 10 !important;
}

nav ul li:hover,
nav ul li.tapped {
   background-color: rgba(255, 222, 0, 0.29);
   color: #E6E5E5;
   transition: all 0.2s ease-in-out;
}

nav ul li.active a:hover {
  color: #666;
}

.active,
.active a,
.new
.active i {
    color: #333;
    background-color: #ffff00;
}


.active, .active a, .new, .btn {
    /* color: rgba(0, 0, 0, .8)  !important; */
    color: #333 !important;
    background-color: #ffff00 !important;
}


ul.cb-dropdown-content li.active a {
   color: #333 !important;
   background-color: #ffff00 !important;
}


main .initialBlurb a {
   color: #fff;
   text-decoration: none;
}

main .initialBlurb a:hover {
   text-decoration: underline;
}

.initialBlurb #download-button {
   color: #333;
}

.fullWidthImage {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
}

.twothirdsWidthImage {
   width: 66%;
   margin-left: auto;
   margin-right: auto;
}

.halfWidthImage {
   width: 50%;
   margin-left: auto;
   margin-right: auto;
}


.maxWidthImage {
   max-width: 800px;
}

.maxWidthImage.narrow {
   max-width: 400px;
}

.halfWidthImage.maxWidthImage {
   max-width: 400px;
}

img.externalLink {
width: 12px;
height: 12px;
}

.small_company {
   font-size: 80%;
}

#multi_protocol_img {
   width: 100%;
   max-width: 33rem;
   display: inline-block;
   min-height: 20rem;
   height: 100%;
}


.shell {
   font-family: monospace;
   color: #ffff00;
   text-align: center;
   margin-top: 1em;
}

.dockerShell {

margin-top: -1.25em;
}

.commercial {
   background-color: #ffff00;
   padding: 1.2em 0em 1em 0.3em;
   border-radius: 4px 0px 0px 4px;
   text-align: center;
   /*text-align: left;*/
   line-height: 1.8em;
   height: auto;
   display: none;
}

.commercial.narrow {
   text-align: center;
   border-radius: 0;
}

.closeCommercial {
   position: absolute;
   top: 5px;
   right: 5px;
   border: 1px solid #777;
   border-radius: 2px;
   background-color: inherit;
   color: #777;
}

.closeCommercial:hover {
    background-color: #ffde24;
    /*text-decoration: none;*/
    color: #444;
}

@media (max-width: 1000px) {
   .commercial.narrow {
      position: fixed;
      bottom: -1px;
      width: 100%;
      z-index: 10;
      }

   div.commercial.wide {
      display: none;
   }

   .closeCommercial {
      height: 96%;
      right: 2px;
   }
}

@media (min-width: 1001px) {
   .commercial.wide {
      position: fixed;
      right: 0;
      top: 35%;
      width: 8em;
      font-size: 95%;
   }

   div.commercial.narrow {
      display: none;
   }
}

.commercial.shownAtBottom {
    display: block;
}

.commercial.shown {
    display: block;
}

div.commercial a {
   /*text-decoration: none;*/
   /*text-decoration: underline;*/
}

.commercial a:visited {

}

.commercial a:hover {
   color: #444;
}

.docker {
   margin-top: 0em;
}

.landingSocial {

   margin-top: 1.5em;
}

.landingSocial > iframe {
   width: 96px;
}


.nonDisplay {
   display: none;
}

#codeBox.expandable {
   max-height: 0;
   opacity: 0;

   transition: max-height 0.3s ease-in 0.1s, opacity 0.5s;

   overflow: hidden;

}

#codeBox {
   max-height: 1000px;
   opacity: 1;

   transition: max-height 0.3s ease-in 0s, opacity 0.5s ease-in 0.1s;
}


.twoColumn {
   columns: 2;
   /* vertical-align: top; */
}

.twoColumn > p:first-of-type {

margin-top: 0;
}

@media (max-width: 800px) {
   .twoColumn {
      columns: 1;
   }
}

.finalCta .btn-xtra-large {
   margin-top: 0.5em;
   height: 70px;
   line-height: 70px;
   font-size: 29px;
}


/* OSS carousel image stylings */

img.open_clients  {

max-width: 32rem;
}

img.open_router {

max-width: 32rem;
}

img.open_protocol {

max-width: 32rem;
}

.carouselList {

}

.carouselList li {

margin: 1em auto;
}

.frontpageList {

}

.frontpageList li {

list-style-type: disc;

margin-left: 2em;

margin-bottom: 0em;
}


/* leave space so that this is not underneath the header */
.gitter-chat-embed {
    top: 64px;
    z-index: 1003;
}

a.gitter-open-chat-button {

    background-color: #ffff00;
    color: #333 !important;
    border-radius: 1px;
}

a.gitter-open-chat-button:hover {
    background-color: #ffe300;
}

/*
    move chat button above commercial nag screen
    at the bottom of narrow screens
*/
@media(max-width: 1000px) {
    body.commercialShown a.gitter-open-chat-button {
        bottom: 65px;
    }
}



.gitter-open-chat-button {
    z-index: 100;
    position: fixed;
    bottom: 0;
    right: 10px;
    padding: 1em 3em;
    border: 0;
    border-top-left-radius: .5em;
    border-top-right-radius: .5em;
    font-family: sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: all .3s ease;
    background-color: #ffff00;
    color: #333 !important;
    border-radius: 1px;
}