html, body {
  overflow-x: hidden;
}
body {
  position: relative;
  background-color: #7E9FC6;
}

a {
  color: #242424;
  text-decoration: none;
  border-bottom: solid #cdcdcd 1px;
  transition: border-color cubic-bezier(.4,0,.2,1) .15s;
}

a:hover {
  color: #3c5a88;
}

li {
  margin-bottom: 20px;
}

#pageContainer {
  background-color: #FFFDF8;
  margin-top: 10px;
  padding-bottom: 100px;
  box-shadow: 0px 0px 32px rgba(0, 0, 0, 0.25);
  min-height: 89vh; /* Keep footer small */
}

.pageContainer-mobile {
  /* margin: 0 !important; */
}

.content-mobile {
  padding: 0 20px 0 20px !important;
}

#sidebar {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0.065em;
  color: #4F4F4F;
  padding: 80px 0 0 40px;
  font-weight: 400;
  z-index:100;
}

/* logo */
#logo a {
  display: inline-block;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.3px;
  border-bottom: 3px solid #8A8A8A;
  padding-bottom: 20px;
  margin-bottom: 30px;
  color: #4F4F4F;

  background-color: #283E51;
  background-image: linear-gradient( 135deg, #4B79A1 10%, #283E51 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

#logo-mobile {
  position: relative;
  top: 27px;
  left: 20px;
  margin: 0px 0 140px 0px;

  background-color: #283E51;
  background-image: linear-gradient( 135deg, #4B79A1 10%, #283E51 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

#logo-mobile a {
  text-transform: uppercase;
  text-decoration: none;
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.3px;
  border-bottom: 3px solid #8A8A8A;
  padding-bottom: 17px;
  margin-bottom: 30px;
  color: #4F4F4F;

  background-color: #283E51;
  background-image: linear-gradient( 135deg, #4B79A1 10%, #283E51 100%);
  background-clip: text;
  -webkit-background-clip: text;
}

#logo a:hover, #logo-mobile a:hover {
  color: transparent;
  transition: 400ms ease;
}

.hamburger {
  position: absolute; /* change to fixed if want hamburger to scroll with the page */
  z-index: 300;
  top: 72px;
  right: 30px;
  border: none;
  background: white;
  border-radius: 15%;
  border: 1px solid black;
  cursor: pointer;
  padding: 5px;
  width: 50px;
}

  .bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 2px;
    transition: 0.2s;
  }

  /* Rotate first bar */
  .change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
  }

  /* Fade out the second bar */
  .change .bar2 {
    opacity: 0;
  }

  /* Rotate last bar */
  .change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
  }

  .mobile-menu {
    /* used to toggle mobile menu view */
  }

  .showMenu {
    /* used to toggle mobile menu view */
  }

/* nav active */
#sidebar .active-page {
  font-weight: 400;
  color: #619AF0;
}

.jump-to-top {
  text-decoration: none;
  color: white;
  font-size: 14px;
  display: block;
  height: 40px;
  border: 1px solid white;
  max-width: 200px;
  text-align: center;
  padding: 5px;
  margin: 0 auto;
  margin-bottom: 20px;
  border-radius: 5px;
}

.jump-to-top:hover {
  background-color: rgb(136 176 226);
}

nav {
  text-transform: lowercase;
  min-width: 300px;
}
/* nav anchors */
nav a {
  text-decoration: none;
  color: inherit;
  border: none;
}

nav a:visited {
  text-decoration: none;
  color: inherit;
}

nav a:hover, #sidebar .active-page:hover {
  color: #3c5a88;
}


/* nav spacing/layout */
nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav ul li {
  margin-bottom: 25px;
  margin-top: 5px;
  font-weight: 500;
}

/* second menu indent */
nav ul ul li {
  margin-bottom: 20px;
  margin-left: 20px;
  font-weight: 400;

}

/* third menu indent */
nav ul ul ul li, .force-small-nav {
  margin-bottom: 5px;
  margin-left: 20px;
  color: #949494;
  font-weight: 400;
  font-size: 12px;
}

#content {
  max-width: 860px;
  margin-top: 50px;
  padding-right: 50px;
  padding-left: 50px;

  color:#242424;
  font-family: 'Mulish', sans-serif;
  font-size: 20px;
  font-weight: 400;
  font-style: normal;
  line-height: 31px;
  letter-spacing: 0.8px;
  text-align: justify;

  /* prevent long worlds and URLs going out of the content box */
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
  word-break: break-word;
}

/* needs to be declared after #content */
.wide-content {
  max-width: 1000px !important; 
}

.wide-full-content {
  max-width: 100% !important; 
}


#content p {
  margin: 0px 0 32px 0;
}

img {
  /* margin: 15px 0; */
  /* border-radius: 5px; */
  max-width: 100%;
  /* max-height: 100%; */
}

h1 {
  text-align: left;
  color: #131313;
  font-family: 'Montserrat', sans-serif;
  font-size: 50px;
  line-height: 55px;
  letter-spacing: 1px;
  font-weight: 300;
  text-transform: capitalize;
  margin: 70px 0 45px 0;
  border-bottom: 1px solid #BABABA;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

h2 {
  text-align: left;
  color: #131313;
  font-family: 'Mulish', sans-serif;
  font-size: 35px;
  line-height: 39px;
  letter-spacing: 0px;
  font-weight: 300;
  text-transform: capitalize;
  margin: 60px 0 20px 0;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;
}

h3 {
  text-align: left;
  color: #444444;
  font-family: 'Mulish', sans-serif;
  font-size: 25px;
  line-height: 35px;
  letter-spacing: .9px;
  font-weight: 400;
  /* text-transform: uppercase; */
  margin: 50px 0 10px 0;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

h4 {
  text-align: left;
  color: #2c2c2c;
  font-family: 'Mulish', sans-serif;
  font-size: 16px;
  line-height: 35px;
  letter-spacing: .9px;
  font-weight: 600;
  text-transform: uppercase;
  margin: 20px 0 10px 0;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

h1 + h2, h2 + h3 {
  margin-top: 0;
}

.image-and-caption {
  font-style: italic;
  font-size: 18px;
  text-align: center;
  margin-bottom: 50px; 
}

.Frame {
  width: 100%;
  list-style: none;
	list-style-type: none;
	margin: 0 0 50px 0;
	padding: 0px;
	text-align: center;
	display: inline-block;
	padding: 13px;
	border-width: 10px;
	border-style: solid;
	border-color: #2F2D2D #434040 #4F4C4C #434040;
  /* border-radius: 3px; */
	background: #f5f5f5;
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#E5E4DF), to(#CDCDC6));
	background-image: -webkit-linear-gradient(#E5E4DF, #CDCDC6);
	background-image: -moz-linear-gradient(#E5E4DF, #CDCDC6);
	background-image: -o-linear-gradient(#E5E4DF, #CDCDC6);
	background-image: linear-gradient(#E5E4DF, #CDCDC6);
	box-shadow: inset 0 2px 5px rgba(0,0,0,.6),0 5px 2px rgba(0,0,0,.1), 0 10px 20px rgba(0,0,0,.8);
	position: relative;
	overflow: hidden;
}

.Frame img {
  margin: 0px !important;
	border-width: 2px;
	border-style: solid;
	border-color: #BBBAB4 #C7C7BF #E5E4DF #C7C7BF;
	box-shadow:  0 -1px 1px rgba(0,0,0,.1), 0 1px 1px 1px rgba(255,255,255,.7);
  max-width: 100%;
  max-height: 100%;
}


/* Override the default Material icons padding */
.material-icons {
  margin-right: 10px;
}

/* CSS */
.button {
  align-items: center;
  background: #FFFFFF;
  border: 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  color: #1A202C;
  display: inline-flex;
  font-size: 17px;
  font-weight: 700;
  height: 50px;
  justify-content: center;
  line-height: 14px;
  overflow-wrap: break-word;
  padding: 17px;
  margin: 0 5px 10px 0;
  text-decoration: none;
  width: auto;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button:hover {
  box-shadow: rgba(45, 35, 66, .2) 0 4px 12px;
}

.button:active {
  box-shadow: rgba(45, 35, 66, .2) 0 3px 7px inset;
}

.button-blue {
  background: #4a89dc;
  color: white;
}

.button-blue:hover {
  background: #5d9cec;
}

.button-aqua {
  background: #3bafda;
  color: white;
}

.button-aqua:hover {
  background: #4fc1e9;
}

.button-mint {
  background: #37bc9b;
  color: white;
}

.button-mint:hover {
  background: #48cfad;
}

.button-green {
  background: #8cc152;
  color: white;
}

.button-green:hover {
  background: #a0d468;
}

.button-red {
  background: #da4453;
  color: white;
}

.button-red:hover {
  background: #ed5565;
}

.button-orange {
  background: #fcaf22;
  color: white;
}

.button-orange:hover {
  background: #ffce54;
}

.button-purple {
  background: #967adc;
  color: white;
}

.button-purple:hover {
  background: #ac92ec;
}

.button-pink {
  background: #d770ad;
  color: white;
}

.button-pink:hover {
  background: #ec87c0;
}

.button-grey {
  background: #434a54;
  color: white;
}

.button-grey:hover {
  background: #656d78;
}



button:disabled,
button[disabled]{
  background: #656d78;
  cursor: progress;
  color: white;
}

button:hover:disabled,
button[disabled]{
  background: #656d78;
  cursor: progress;
  box-shadow: none;
}

.orb-button {
  min-width: 210px;
}

.buttons-group {
  text-align: center;
}

/* Mailing list */
#mc_embed_signup { 
  clear:left; 
  font:14px Roboto,Arial,sans-serif;  
  max-width:500px;
}
#mce-success-response, .response {
  color: rgb(24, 197, 62) !important; 
  width: 100% !important;
}

.disclaimer {
  font-size: 14px !important;
}

.badge-warning {
  background-color: rgb(23, 178, 199);
}

#footer {
  font-family: 'Roboto';
  font-style: 200;
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
  letter-spacing: 0.01em;
  color: white;
  margin: 20px 0 20px 0;
}

#footer a, #footer a:visited {
  color: white;
}


/* Code syntax highlighting atom-one-dark theme https://highlightjs.org/ */
pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#333;color:#fff}.hljs-doctag,.hljs-meta-keyword,.hljs-name,.hljs-strong{font-weight:700}.hljs-code,.hljs-emphasis{font-style:italic}.hljs-section,.hljs-tag{color:#62c8f3}.hljs-selector-class,.hljs-selector-id,.hljs-template-variable,.hljs-variable{color:#ade5fc}.hljs-meta-string,.hljs-string{color:#a2fca2}.hljs-attr,.hljs-quote,.hljs-selector-attr{color:#7bd694}.hljs-tag .hljs-attr{color:inherit}.hljs-attribute,.hljs-title,.hljs-type{color:#ffa}.hljs-number,.hljs-symbol{color:#d36363}.hljs-bullet,.hljs-template-tag{color:#b8d8a2}.hljs-built_in,.hljs-keyword,.hljs-literal,.hljs-selector-tag{color:#fcc28c}.hljs-code,.hljs-comment,.hljs-formula{color:#888}.hljs-link,.hljs-regexp,.hljs-selector-pseudo{color:#c6b4f0}.hljs-meta{color:#fc9b9b}.hljs-deletion{background:#fc9b9b;color:#333}.hljs-addition{background:#a2fca2;color:#333}.hljs-subst{color:#fff}.hljs a{color:inherit}.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}.hljs mark{background:#555;color:inherit}

pre code.hljs {
  font-size: 12px;
  margin-bottom: 30px;
  border-radius: 5px;
}



.flex {
  display: flex;
  justify-content: space-between;
 }
 
 .flex-grow {
   flex-grow: 1;
 }
 
 .one {
   border: 1px solid black;
   width: 20px; height: 20px;
 }
 
 .two {
   border: 1px solid black;
   width: 20px; height: 20px;
 }
 
 .three {
   border: 1px solid black;
   width: 20px; height: 20px;
 }

.card {
  max-width: 900px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  margin-bottom: 100px;
  color: rgb(0, 0, 0);
  border: 0;
  border-radius: 8px;
  font-weight: 200;
  display: flex;
  justify-content: space-between;
}

.card-imgs {
  max-width: 200px;
  max-height: 200px;
}

.card-link {
  color: rgb(0, 0, 0);
  border: none;
  font-weight: 700;
}

.card-link:hover {
  /* color: rgb(107, 107, 107); */
  border-bottom: 1px solid white;
  transition: border-color cubic-bezier(.4,0,.2,1) .15s;
}

.card-body {
  /* padding: 50px; */
}

.card h2 {
  /* font-size: 20px; */
  color: rgb(0, 0, 0);
  margin: 0 0 75px 0;
}

.colororb-blurb {
  background: #D1B0AE;
}

.automata-posters-blurb {
  background: #AAB8BC;
}


#profile-pic {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  border-radius: 50%;
  width: 300px;
  margin-bottom: 50px;
}


/** AUTOMATA POSTER STYLES **/

#automata-gallery {
  display: flex;
  flex-wrap: wrap;
}

.automata-gallery-item {
  text-align: right;
  margin-right: 30px;
  margin-bottom: 10px;
  font-size: 16px;
}

.automata-gallery-item-image-container {
  margin-bottom:20px;
}

.automata-gallery-item-image-container-mobile {
  /* padding: 37px 45px; */
}

.automata-gallery-item-image-container img {
  /* width: 250px; */
  /* vertical-align: middle; */
  box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.25);
  width: 250PX;
}

.automata-gallery-item a {
  border: none;
}

.automata-item-text {
  /* float: right; */
  /* line-height: 30px; */
}

.automata-icon {
  /* float: right; */
  /* padding-right: 5px; */
  margin:0;
}

/** COLOR ORBS STYLES **/

  /* Gallery */

  .orb-gallery {
    display: flex;
    flex-wrap: wrap;
  }

  .orb-gallery-item {
    text-align: right;
    margin-right: 40px;
    margin-bottom: 40px;
    font-size: 16px;
    line-height: 19px;
  }

  .orb-gallery-standalone {
    margin: 40px 0 0 0;
  }

  .orb-gallery-standalone .orb-gallery-item {
   margin-right: 0;
  }

  .orb-gallery-item a {
    border: none;
  }

  .orb-gallery-item .material-icons {
    margin: 0;
  }

  .orb-gallery-item-image-container {
    background-color: #222222;
    padding: 75px 90px;
    box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.25);
    border-radius: 7px;
    /* min-width: 350px; */
  }

  .orb-gallery-item-image-container-mobile {
    padding: 37px 45px;
  }

  .orb-gallery-item-image-container img {
    min-width: 225px;
    width:225px;
    vertical-align: middle;
    cursor: pointer;
  }

  .orb-gallery-item-image-container video {
    cursor: pointer;
    min-width: 225px;
    width:225px;
    vertical-align: middle; /* prevents adding 3px height */
    display: none;
  }

  .orb-video-control {
    cursor: pointer;
    float: left;
    padding-right: 10px;
  }

  .orb-item-text {
    float: right;
  }


  /* Designer */
  
    .orb-designer {
      text-align: left;
    }

    .orb-designer h3 {
      margin: 10px 0 10px 0;
      font-size: 20px;
      font-weight: 700;
    }

    .orb-designer label {
      margin-bottom: 20px;
      font-size: 18px;
    }

    .orb-designer p {
      font-size: 18px;
    }

    .orb-canvas {
      background-color: transparent;
      /* min-width: 300px;
      max-width: 300px; */
      /* width: 150px;
      height: 150px; */
    }

    #sketch-holder {
      text-align: center;
      background-color: #222222; /* also defined in sketch.js exportBackgroundColor = "#383838" and in server side generatePlanet.js (mp4 export)*/
      /* width: 100%; */
      /* height: 500px; */
      min-width: 300px;
      min-height: 325px;
      padding: 50px;
      display: flex;
      justify-content: center; /* centers sketch horizontally */
      align-items: center; /* centers sketch vertically */
      border-radius: 5px;
    }

    #sharable-url {
      font-size: 13px;
      line-height: 15px;
      /* background-color: #cbcbcb; */
      border: 1px solid grey;
      color: rgb(0, 0, 0);
      word-break: break-all;
      border-radius: 5px;
      padding: 15px;
    }

    #dna-textarea {
        font-size: 15px;
        letter-spacing: 1px;
        padding: 10px;
        line-height: 1.2;
        border-radius: 5px;
        border: 1px solid rgb(138, 138, 138);
        background-color: #FFFDF8;
        color: #6280b6;
        width: 100%;
        max-width: 100%;
        height: 450px;
        outline: none;
    }

    .IroColorPicker {
      margin-right: 10px;
      cursor: crosshair;
    }

    .IroBox {
      border-radius: 7px !important;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      border: 0 !important;
    }

    .swatch {
      display: inline-block;
      border-radius: 7px;
      width: 60px;
      height: 60px;
      margin-right: 5px;
      cursor: pointer;
      font-size: 2rem;
    }

    .swatch-empty {
      display: inline-block;
      position: relative;
      top: -20px;
      border: 1px dashed rgb(104, 104, 104);
    }

    .swatch-close {
      float: right;
      margin-right: 0.5rem;
      color: red
    }

    .swatch-add {
      float: right;
      margin: 13px 18px 0 0;
      color: rgb(104, 104, 104);
    }

    #colors-and-patterns {
      min-width:360px;
    }

    #patterns, #color-pickers {
      /* display: flex;
      justify-content: space-between;
      max-width: 430px; */

      /* text-align: center; */
    }

    .pattern {
      display: inline-block;
      border: 0;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      margin-right: 10px;
      cursor: pointer;
      font-size: 0rem;
      background: black;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    .pattern-link {
      border: 0;
    }

    .pattern img {
      width:60px;
      height: 60px;
      border-radius: 50%;
      display:inline-block;
      user-drag: none;
      -webkit-user-drag: none;
      user-select: none;
      -moz-user-select: none;
      -webkit-user-select: none;
      -ms-user-select: none;
      pointer-events: none;
      /* box-shadow: inset 0px 0px 10px rgb(0 0 0 / 100%); */
      /* border: 2px solid rgb(255, 255, 255);  */
    }

    .popover {
      background-color: rgb(255, 255, 243);
      width: 400px;
      max-width: 400px;
      box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
      text-align: center;
    }

    .popover-header {
      background-color: rgb(236, 236, 224);
      text-align: center;
      margin: 0;
      padding: 0;
    }

    .pattern-popover {
      background-color: rgb(138, 138, 138);
      display:inline-block;
      margin: 5px;
    }

    .slider-input{
        font-size: 14px;
        letter-spacing: 1px;
        line-height: 1.2px;
        border-radius: 5px;
        border: 1px solid rgb(138, 138, 138);
        /* box-shadow: 1px 1px 1px rgb(112, 112, 112); */
        background-color: #FFFDF8;
        color: #6280b6;
        padding:7px;
        width: 80px;
    }

    .slider-input-wide{
      width: 100%;
      display: inline;
  }

    .slider-min-label {
      float: left;
    }

    .slider-max-label {
      float: right;
    }

    .rangeslider,
    .rangeslider__fill {
        display:block;
        border-radius:10px;
    }

    .rangeslider {
        position:relative;
    }
    .rangeslider:after{
        top:50%;
        left:0;
        right:0;
        content:'';
        width:100%;
        height:5px;
        margin-top:-2.5px;
        border-radius:5px;
        position:absolute;
        background: #c1c1c1;;
    }

    .rangeslider--horizontal{
        width:100%;
        height:28px;
    }

    .rangeslider--vertical{
        width:5px;
        min-height:150px;
        max-height:100%;
    }
    .rangeslider--disabled{
        filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
        opacity:0.4;
    }

    .rangeslider__fill{
        position:absolute;
        background:#81a1dd;
    }
    .rangeslider--horizontal .rangeslider__fill{
        top:0;
        height:100%;
    }
    .rangeslider--vertical .rangeslider__fill{
        bottom:0;
        width:100%;
    }

    .rangeslider__handle{
        top:80%;
        width:12px;
        height:12px;
        cursor:pointer;
        margin-top:-14px;
        background:rgb(33, 18, 116);
        position:absolute;
        border-radius:50%;
        display:inline-block;
    }
    .rangeslider__handle:active{
        background:white;
    }

    .rangeslider__fill,
    .rangeslider__handle{
        z-index:1;
    }
    .rangeslider--horizontal .rangeslider__fill{
        top:50%;
        height:5px;
        margin-top:-2.5px;
    }