/*

Theme: Maker Network
Author: Andy Braren

*/

/* Reset
-------------------------------------------------- */
*, *:before, *:after {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, main, nav, section, summary {
  display: block;
}

/* Web Fonts
-------------------------------------------------- */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(https://themes.googleusercontent.com/static/fonts/sourcesanspro/v7/ODelI1aHBYDBqgeIAH2zlNHq-FFgoDNV3GTKpHwuvtI.woff) format('woff');
}

@font-face {
  font-family: dyslexic;
  src: url('../fonts/OpenDyslexic3-Regular.ttf');
}

body.dyslexic {
  font-family: dyslexic;
}

/* Site Defaults
  - https://bocoup.com/weblog/text-rendering
  - https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/
  - https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/
-------------------------------------------------- */

html {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
	/*
	line-height: 1.5rem;
	*/
  color: #444;
  
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  
  position: relative;
  margin-top: 53px;
  background-color: var(--theme-bgcolor);
}

.subnav {
  margin-top: 87px;
}

.noscroll {
  /* overflow-y: hidden; Jitters the scrollbar too much */
  /*overflow-y: scroll;*/
  position: fixed;
  width: 100%;
  overflow-y: scroll;
}

body.noscroll > header > .container {
  -webkit-overflow-scrolling: initial; /* Weird iOS Safari bug prevents fixed element from appearing */
}



.visible {
  visibility: visible;
  display: block;
}
.visibleflex {
  visibility: visible !important;
  display: flex !important;
}
.invisible {
  visibility: hidden;
  display: none !important;
}

/* Header
-------------------------------------------------- */
/*
nav {
  flex-direction: column;
  align-items: flex-start;
}
*/
header {
  /*background-color: #62A5F0;*/
  top: 0px;
    /*
    -webkit-animation: cyclecolors linear infinite;
    -webkit-animation-duration: 90s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    */
  position: fixed;
  z-index: 50;
  width: 100%;
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*
  overflow-y: hidden;
  */
  /*box-shadow: 0 2px 4px -1px rgba(0,0,0,0.06),0 4px 5px 0 rgba(0,0,0,0.06),0 1px 10px 0 rgba(0,0,0,0.08);*/
  -ms-overflow-style: -ms-autohiding-scrollbar;
  /*
  -webkit-overflow-scrolling: touch; /* second necessary for scrollbars */
  
    
    /*background-color: rgba(98, 165, 240, 0.85);*/
    background-color: var(--theme-opac1);
    background-image: var(--theme-gradient);
    
    
    border-top: 3px solid var(--theme-main);
}

nav {
  /*
  overflow-y: hidden;
  overflow-x: auto;
  */ /* Safari bug on desktop */
  /*border-bottom: 1px solid #e0e0e0;*/
    box-shadow: inset 0px -1px 0px 0px #e0e0e0;
}

/* Chrome bug, makes nav taller for some reason, not in other browsers */
#navigation { max-height: 64px; }
#subnavigation { max-height: 48px; }

nav .container {
  overflow-x: auto;
}

header.headroom {
  /*transition: background-color 0.2s, color 0.2s;*/
  /*transition: transform 200ms linear, background-color 0.2s, color 0.2s;*/
  transition: transform 200ms linear;
}
header .container {
  display: flex;
  flex: 1;
  flex-flow: row nowrap;
  justify-content: space-between;
  /*
  overflow: visible;
  */
  overflow-x: auto;
  
  /* Hack to make dropdowns appear */
  /* http://stackoverflow.com/a/39554003 */
  /*
  padding-bottom: 200px;
  margin-bottom: -200px;
  */
  /*
  overflow: auto;
  overflow-x: auto;
  */
}


/**
 * Note: I have omitted any vendor-prefixes for clarity.
 * Adding them is left as an exercise for the reader.
 */
.headroom {
    will-change: transform;
    transition: transform 200ms linear;
}
.headroom--pinned {
    transform: translateY(0%);
}
.headroom--unpinned {
    transform: translateY(-100%);
}







/* Grid Layout
-------------------------------------------------- */

.grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  grid-gap: 10px;
}

/* Change the grid size at certain screen widths */
@media (max-width: 600px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .grid { grid-template-columns: repeat(1, 1fr); } }

.grid > * {
  width: auto;
  overflow: hidden;
  max-height: 297px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}


/* Cards & Items
-------------------------------------------------- */
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: -1rem 0 0 -1rem;
  width: 100%;
}
.card {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
  
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /*
  max-width: 24%;
  width: 24%;
  min-width: 23%;
  flex-basis: 23%; Fixes Safari bug for min-width https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items
  */
  /*
  width: 18%;
  min-width: 18%;
  flex-basis: 18%;
  */
  /*
  width: 20%;
  min-width: 20%;
  flex-basis: 20%;
  */
  overflow: hidden;
  /*
  margin: 0px 10px 10px 0px;
  margin: 0 5px 10px 5px;
  margin: 1rem 0 0 1rem;
  */
  border-radius: 2px;
  
  transition: box-shadow .1s ease-in-out;
}

.card.size-sixth {
  width: 15%;
  min-width: 15%;
  flex-basis: 15%;
  max-width: 15%;
}

@media (max-width: 800px) { /* Temp fix for https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items */
  .card {
    /*
    min-width: 150px;
    flex-basis: 150px;
    */
    min-width: 45%;
    flex-basis: 45%;
  }
}

@media (max-width: 400px) {
  .card {
    min-width: 100%;
    flex-basis: 100%;
    margin: initial;
  }
  .cards {
    margin: initial;
  }
}


.makers .card {
  min-width: initial;
  flex-grow: 0;
  width: initial;
}



.card:hover {
  /*box-shadow: 0px 0px 5px #62A5F0;*/
  /*box-shadow: 0px 0px 5px #7B7B7B;*/
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.45);
}
/*
.cards a:hover {
  opacity: 0.90;
}
*/
.card:hover img {
  opacity: 1;
}

.card h3 {
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
  color: #62A5F0;
  letter-spacing: 1px;
}

.events {
  width: 100%;
  overflow: auto;
}


.cards h2 {
  margin-bottom: 0;
  margin-top: .5rem;
}

/*
.cards:after {
  content: "";
  flex: auto;
}
*/

.card img {
  transition: all .1s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  width: 100%;
  height: 100%;
}


.card img {
  /*background-color: white;*/
  /*opacity: .8;*/
}
.card-content {
  padding: 10px;
  max-height: 107px;
}

.card-hero {
  background-color: white;
  position: relative;
}

.card-icon {
  width: 80px;
  height: 80px;
  box-shadow: rgba(0, 0, 0, 0.0470588) 0px 0px 0px 1px;
  position: relative;
  top: -90px;
  left: calc(50% - 40px);
  border-radius: 5px;
  border: 3px solid rgb(255, 255, 255);
  overflow: hidden;
  background: rgb(255, 255, 255);
  transition: box-shadow 0.2s;
  margin-bottom: -80px;
}

.card-iconnew {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  max-height: 75%;
  
  background: rgb(255, 255, 255);
  border-radius: 5px;
  width: initial !important;
  
  display: inline-block;
  padding: 5px;
}


.card-details {
  margin-top: auto;
  padding: 5px 10px;
  background-color: rgb(250, 250, 250);
  display: flex;
  justify-content: space-between;
  border-top: solid 1px rgb(208, 208, 208);
  font-size: .9rem;
  color: grey;
}

.card p {
  font-size: .9rem;
  line-height: 1.4rem;
  margin-top: .3rem;
}

.card h4 {
  margin: 0;
  line-height: 1.2rem;
  font-size: 1rem;
}

.card-join {
  padding: 0.7rem;
  border-radius: 3px;
}

.modals .card-join.highlight {
  background-color: var(--theme-opac2);
}




.makers .card {
  flex-basis: initial;
  margin: .5rem 0 0 .5rem;
}
.cards.makers {
  margin: -.5rem 0 0 -.5rem;
}








/* Images
-------------------------------------------------- */
img {
  outline: 0;
  border: 0;
  max-width: 100%;
  display: block;
  margin-right: auto;
  margin-left: auto;
  transition: opacity 0.2s ease-out;
}

.small {
  max-width: 25%;
  float: right;
  margin: 10px 0 10px 10px;
}

.medium {
  max-width: 50%;
  float: right;
  margin: 10px 0 10px 10px;
}
.ce-element.medium {
  /*
  max-width: 50% !important;
  padding-bottom: 25%;
  height: 0 !important;
  */
  max-width: 50%;
  padding-bottom: 25%;
  height: 0;
}

img.b-lazy {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-height: 100%;
  /*
  opacity: 0;
  */
}
img.b-loaded {
  
  width: initial;
  
  opacity: 1;
}

/* Crude way to ensure figcaptions aren't hidden by removing the calculated padding once loaded by b-lazy */
article figure.b-lazy.b-error {
  padding-top: 0px !important;
}
article figure.b-lazy.b-error img.b-lazy {
  position: initial;
}




article > img {
  margin-top: .5rem;
	margin-bottom: .5rem;
}

@media (max-width: 1000px) {
.large {
	max-width: 100%;
	margin-left: 0;
}
}







.error-image {
  visibility: hidden;
  position: relative;
  height: 2rem;
  max-height: 26px;
}

.error-image:after {
  visibility: visible;
  content: "\02716  The image " attr(alt) " is missing or broken";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  background-color: #ececec;
}



.video-container img.b-loaded {
  width: 100%;
}





/* Links
-------------------------------------------------- */

a, area, button, input, label, select, textarea, [tabindex] {
  touch-action: manipulation;
}

a {
  color: inherit;
  text-decoration: none;
  transition: background .3s, border .3s;
}

.link {
  margin: 0.5rem 0;
  display: flex;
  width: 100%;
  box-shadow: 0 1px 4px rgba(0,0,0,.04),inset 0 0 0 1px rgba(0,0,0,.09);
  max-height: 120px;
}

a.link span {
  color: #444;
}

.link div:nth-child(1) {
  padding: 10px;
  flex: 1;
}

.link div:nth-child(1) {
  display: flex;
  padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.link img {
  max-height: 100%;
}


.link div:nth-child(1) span:nth-child(2) {
    max-height: 40px;
    overflow: hidden;
    color: #666;
    font-size: .9rem;
    line-height: 1.3rem;
}

.link div:nth-child(1) span:nth-child(3) {
    color: #888;
    font-size: .8rem;
}


























/* File Links
 - https://simpleicons.org/
-------------------------------------------------- */

a[class*="file-"] {
	background-size: 15px;
	background-position: center left;
	background-repeat: no-repeat;
	padding-left: 20px;
	display: inline-block;
}

.file-pdf { background-image: url(../../assets/images/file-pdf.svg); }
.file-doc, .file-docx, .file-wpd, .file-wps { background-image: url(../../assets/images/file-doc.svg); }
.file-ppt { background-image: url(../../assets/images/file-ppt.svg); }
.file-csv, .file-xls { background-image: url(../../assets/images/file-xls.svg); }
.file-zip { background-image: url(../../assets/images/file-zip.svg); }
.file-vi { background-image: url(../../assets/images/file-vi.svg); }
.file-img { background-image: url(../../assets/images/file-img.svg);}
.file-rtf { background-image: url(../../assets/images/file-rtf.svg);}
.file-mp3, .file-m4a, .file-wav { background-image: url(../../assets/images/file-mp3.svg);}

/* Page Themes / Colors
-------------------------------------------------- */

/* Theme Colors */

.blue {
  --theme-main: #62A5F0;
  --theme-opac1: rgba(98, 165, 240, 0.85);
  --theme-opac2: rgba(98, 165, 240, 0.10);
  --theme-opac3: rgba(98, 165, 240, 0.05);
  --theme-gradient: linear-gradient(to bottom,rgba(98, 165, 240, 0.85) 0%,rgba(86, 148, 218, 0.85) 100%);
}

.green {
  --theme-main: #5D9A6D;
  --theme-opac1: rgba(93, 154, 109, 0.85);
  --theme-opac2: rgba(93, 154, 109, 0.10);
  --theme-opac3: rgba(93, 154, 109, 0.05);
}

.red {
  --theme-main: #AF5555;
  --theme-opac1: rgba(175, 85, 85, 0.85);
  --theme-opac2: rgba(175, 85, 85, 0.10);
  --theme-opac3: rgba(175, 85, 85, 0.05);
}

.orange {
  --theme-main: #D08536;
  --theme-opac1: rgba(208, 133, 54, 0.85);
  --theme-opac2: rgba(208, 133, 54, 0.10);
  --theme-opac3: rgba(208, 133, 54, 0.05);
}

.purple {
  --theme-main: #9854CA;
  --theme-opac1: rgba(152, 84, 202, 0.85);
  --theme-opac2: rgba(152, 84, 202, 0.10);
  --theme-opac3: rgba(152, 84, 202, 0.05);
}

.gold {
  --theme-main: #CC9933;
  --theme-opac1: rgba(206, 185, 87, 0.85);
  --theme-opac2: rgba(206, 185, 87, 0.10);
  --theme-opac3: rgba(206, 185, 87, 0.05);
}

.silver {
  --theme-main: #909090;
  --theme-opac1: rgba(144, 144, 144, 0.85);
  --theme-opac2: rgba(144, 144, 144, 0.10);
  --theme-opac3: rgba(144, 144, 144, 0.05);
}

.black {
  --theme-main: #252525;
  --theme-opac1: rgba(0, 0, 0, 0.85);
  --theme-opac2: rgba(0, 0, 0, 0.1);
  --theme-opac3: rgba(0, 0, 0, 0.05);
}

.white {
  --theme-main: #62A5F0;
  --theme-opac1: rgba(255, 255, 255, 0.85);
  --theme-opac2: rgba(98, 165, 240, 0.1);
  --theme-opac3: rgba(98, 165, 240, 0.05);
}

body.white { background-color: white; }
.white .menu a { color: #4C4C4C; }
.white .menu-secondary a { color: darkgrey; }
.white #navigation .menu-secondary .login a { color: darkgrey; border-color: darkgrey; }
.white .menu a:hover, .menu-modal:hover { background-color: rgba(0, 0, 0, 0.05); }
.white .logo svg path { fill: #757575; } 


:root {
  --theme-bgcolor: white;
}

.night {
  --theme-bgcolor: #2C2C2C;
}




body {
  
  --theme-opac1: rgba(255, 255, 255, 0.85) !important;
  --theme-opac2: rgba(98, 165, 240, 0.1);
  --theme-opac3: rgba(98, 165, 240, 0.05);
  --theme-gradient: none !important;
}
.menu a { color: #4C4C4C; }
.menu-secondary a { color: #797878; font-weight: 500;}
#navigation .menu-secondary .login a, .button-login { color: darkgrey; border-color: darkgrey; }

.menu > li:hover, .menu li.active > a {
  background-color: rgba(0, 0, 0, 0.05);
}

/* Only change color if the entire thing is one color already */
.logo svg > g:not([fill*='none']) path {
  fill: var(--theme-main);
}
.logo svg > path {
  fill: var(--theme-main);
}

#toggle-toc svg path { fill: #797878; }
.search svg path { fill: #797878; }
#settings-reading svg path { fill: #797878; }




/* Theme definition, with fallback blue colors for IE 8, 9, 11, and Edge */
.button, .cards.makers a {
  background-color: #62A5F0;
  background-color: var(--theme-main);
  transition: background-color 0.2s;
}
h2, h3, .sidebar .heading, .card h4, article a, p a, span a, .sidebar a:hover {
  color: #62A5F0;
  color: var(--theme-main);
}
article > h2 {
  margin-bottom: 1rem;
  margin-top: 2rem;
}

footer .container {
  border-top-color: #62A5F0;
  border-top-color: var(--theme-main);
}




blockquote {
  border-left-color: #62A5F0;
  background-color: rgba(98, 165, 240, 0.05);
  border-left-color: var(--theme-main);
  background-color: var(--theme-opac3);
}
.highlight {
  background-color: var(--theme-opac3);
  box-shadow: 0px 0px 1px rgb(225, 225, 225);
  transition: background-color .4s;
}
.highlight:hover {
  background-color: var(--theme-opac2);
  transition: background-color .4s;
}

.callout {
  padding: 0 1rem;
  margin: 1rem 0;
  border: 1px solid #efef29;
  background: #ffffdc;
}
.callout.warning {
  border-color: #f79d97;
  background-color: #feedec;
}















/* Other things
-------------------------------------------------- */
.main .container {
  display: flex;
  flex-flow: row wrap;
  /*
  width: 100%;
  flex-flow: row wrap;
  align-content: flex-start;
  */
  padding-top: 1rem;
  padding-bottom: 4rem;
}





.logo {
  height: 100%;
  display: flex !important;
  align-items: center;
  padding: 0 8px;
}

.logo svg, .logo img {
  display: block;
  height: 35px;
  max-width: 500px; /* Dumb Safari fix http://stackoverflow.com/questions/24153939/inline-svg-scaling-auto-width */
  width: auto;
}
/*
.logo svg path {
  fill: white;
}
*/
#logo-2 {
  display: none;
}

.logo svg path[stroke="#FFFFFF"], .logo svg path[fill="#FFFFFF"] {
  fill: var(--theme-main);
}

.logo svg mask ~ path {
  fill: white !important;
  stroke: var(--theme-main);
}



@media (max-width: 800px) {
  
  #logo-2 ~ #logo-1 {
    display: none;
  }
  
  #logo-2 {
    display: block;
  }
  
}

/*
.logo svg g {
    -webkit-animation: cyclecolors linear infinite;
    -webkit-animation-duration: 60s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
}
*/

.logo svg g path {
  /*animation: cyclecolors 90s linear infinite;*/
}

@keyframes cyclecolors {
	0%  {fill:var(--theme-main);}
	16% {fill:#5D9A6D;}
	32% {fill:#AF5555;}
	48% {fill:#D08536;}
	64% {fill:#9854CA;}
	96% {fill:#CC9933;}
}





/* Navigation and Menus
-------------------------------------------------- */

nav {
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 3;
  /*padding-right: 15px;*/
}
.menu {
  display: flex;
  justify-content: space-between;
  flex-shrink: 0; /* Mobile Safari */
  align-items: center;
}
.menu a {
  display: block;
}
.menu * {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  touch-action: manipulation;
}
.menu-modal {
  cursor: pointer;
}


.menu .active {
  box-shadow: inset 0px -1px 0px 0px var(--theme-main);
}
.menu li {
  list-style: none;
  /*
  text-transform: uppercase;
  */
  letter-spacing: 1px;
  font-size: 14px;
  font-size: .875rem;
}
.menu > li {
  line-height: 20px;
  position: relative;
  -webkit-flex-shrink: 0; /* Safari */
  flex-shrink: 0;
}
.menu > li:hover {
  cursor: pointer;
}
#navigation .menu > li a {
  padding: .35em 0;
  padding: 15px 13px;
}


#navigation .menu-secondary li {
  font-size: .7rem;
  letter-spacing: initial;
}

.button-login {
  border-width: 1px;
  border-style: solid;
  padding: 8px 10px;
  border-radius: 4px;
  margin: 0 10px 0 15px;
  transition: background-color .3s;
  cursor: pointer;
}
.button-login:hover {
  background-color: rgba(255, 255, 255, 0.10);
}

.menu-secondary > .menu > li > a {
  padding: 10px 15px;
}
#subnavigation .menu li a {
  padding: 7px 10px;
  text-transform: initial;
}
/*
#navigation, #subnavigation {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
#subnavigation {
  -webkit-backdrop-filter: blur(5px);
}
*/



ul.submenu {
  display: none;
}


.menu li ul {
  display: flex;
  position: fixed;
  /*
  background-color: rgba(255, 255, 255, 0.8);
  */
  z-index: 1000;
  
  visibility: hidden;
  opacity: 0;
  
  cursor: auto;
}

/*
li {
  word-wrap: break-word;
}
li a {
  word-break: break-all !important;
}
*/

.subnav .menu li ul {
  transition: opacity .2s, visibility .2s;
}

.newnav .menu > li.hassubnav {
  transition: box-shadow .2s;
}
.newnav .menu > li.hassubnav:not(.active):hover {
  box-shadow: inset 0px -1px 0px 0px #efefef;
}
.menu li ul {
  padding: 0 2rem 2rem 2rem;
  margin-left: -2rem;
}


.backdrop {
  position: absolute;
  top: 0;
  z-index: 1;
  height: 34px;
  width: 200vw;
  padding-left: 50vw;
  margin-left: -50vw;
  margin-top: 50px;
  background-color: rgba(255, 255, 255, 0.8);
  
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s, visibility .2s;
}
.subnav .newnav .menu > li.hassubnav:not(.active):hover ~ .backdrop {
  visibility: visible;
  opacity: 1;
}

/*
.menu li:hover ul {
  visibility: visible;
  opacity: 1;
}
*/

.menu li:not(.active):hover ul,
.editing .subnodes:hover,
.editing .subnodes:active {
  visibility: visible;
  opacity: 1;
}

.menu li ul li {
  box-shadow: inset 0px -1px 0px 0px #e0e0e0;
}
.menu li ul li a {
  padding: 7px 10px !important;
  text-transform: initial;
}
.menu li ul li {
  background-color: white;
  background-color: var(--theme-bgcolor);
  white-space: nowrap;
}

.newnav .menu li ul li:first-child {
  border-left: 1px solid #e0e0e0;
}
.newnav .menu li ul li:last-child {
  border-right: 1px solid #e0e0e0;
}

/*
.editing .newnav li ul,
.editing .newnav .backdrop {
  display: none;
}
*/



.blah {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    /*bottom: 0; Doesn't work in Safari */
    box-shadow: inset 0px -1px 0px 0px #e0e0e0;
    
    overflow-x: auto;
    overflow-y: hidden;
}

.menu-secondary .blah {
  top: 50px;
}
.menu-secondary .blah ul {
  margin-left: auto;
}

.newnav .active ul {
    display: flex;
    /*
    max-width: 1200px;
    margin: 0 auto;
    */
}



.newnav .active li ul {
  display: block;
}

header {
  overflow-y: initial !important;
}



.newnav .menu .blah li a {
    padding: 7px 10px !important;
}
/*
.subnav .newnav {
  padding-bottom: 34px;
}
*/

.nav {
  overflow: visible !important;
}

.missing > a {
    opacity: .5;
    text-decoration: line-through;
}

li .subtitle {
    z-index:-1;
    /* color: #bbc0c4; */
    opacity: .7;
    font-size: .5rem;
    letter-spacing: 0px;
    /* font-size: 16px; */
    /* padding: 2px 0; */
    /*text-transform: uppercase;*/
    /* border-radius: 0 0 2px 2px; */
    line-height: 1;
    position: absolute;
    right: 15px;
    /* right: 0px; */
    top: 32px;
}

/*
.blah .container {
  overflow-x: auto;
}
*/
/*
#navigation {
  overflow-x: auto;
}
*/




.fancy {
position: fixed;
top: 0;
left: 0;
height: 55px;
width: 100%;
z-index: 10;
-webkit-backdrop-filter: blur(3px);
}





.night .menu a {
  color: inherit;
}
.night #navigation .menu-secondary .login a,
.night #navigation .menu-secondary .login button {
  color: inherit;
  border-color: inherit;
}
.night nav {
  border-color: #777777;
}

.menu li {
  transition: background-color .3s;
}


.menu > *:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.night .menu > *:hover {
  background-color: rgba(255, 255, 255, 0.10);
}


.night #settings-reading svg path,
.night .search svg path,
.night #toggle-toc svg path {
  fill: #CACACA;
}

body.night {
  color: #CACACA;
}
.night header {
  background-color: rgba(44, 44, 44, 0.85);
  background-image: none;
  box-shadow: none;
}
/*
.night img, .night .button, .night .cards, .night #navigation, .night #subnavigation, .night h2, .night h3 {
  filter: brightness(0.8);
  -webkit-filter: brightness(0.8);
}
*/

.night img:not([src*="svg"]),
.night .button,
.night .cards,
.night #navigation,
.night #subnavigation,
.night h2,
.night h3,
.night footer .container {
  filter: brightness(0.9);
}

.night .link {
  background-color: #3a3a3a;
}
.night .callout.warning {
  border-color: #903530;
  color: #dc5a53;
  background-color: #3a3a3a;
}

.night .card {
  background-color: #3a3a3a;
  box-shadow: 0 0 1px rgb(255, 255, 255);
}
.night .card-details {
  background-color: #3a3a3a;
  border-top: solid 1px rgb(113, 113, 113);
}

/* Night */
.styleselector, .font-family {
  cursor: pointer;
  /*padding: 8px;*/
}
.styleselector img, #settings-reading img {
  max-height: 18px;
}
#toggle-toc {
  display: none;
}







/* Options
-------------------------------------------------- */


#settings {
  display: none;
  opacity: 0;
  transition: opacity 0.6s;
}

.editing #settings {
  display: block;
  opacity: 1;
  transition: opacity 0.6s;
}




#hero-add {
  display: none;
  /*height: 10vh;*/
  height: 4rem;
  background-color: #ececec;
  cursor: pointer;
}

#hero span {
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.editing #hero-add {
  display: flex;
  justify-content: center;
  align-items: center;
}




#hero.div {
  margin-bottom: 4rem;
}

.editing #hero {
  margin-bottom: initial;
}

h1:empty {
  margin-bottom: initial;
}


/* Reading Settings
-------------------------------------------------- */

/*
#modal-reading, #modal-toc {
  display: block;
  position: fixed;
  
  opacity: 0;
  
  right: 5px;
  margin-top: 5px;
  
  z-index: 100;
  background-color: white;
  
  display: flex;
  flex-direction: column;
  border-radius: 4px;
  box-shadow: 0 50px 100px rgba(50,50,93,.1), 0 15px 35px rgba(50,50,93,.15), 0 5px 15px rgba(0,0,0,.1);
  
  transform: rotate3d(1,1,0,-15deg);
  transform-origin: 100% 0;
  will-change: transform,opacity;
  transition-property: transform,opacity;
  transition-duration: .25s;
  
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

#modal-reading.visible, #modal-toc.visible {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  
  will-change: transform,opacity;
  transform: none;
    transition-property: transform,opacity;
  transition-duration: .25s;
  
}
*/

#settings-reading svg {
  display: block;
  height: 18px;
  max-width: 500px; /* Dumb Safari fix http://stackoverflow.com/questions/24153939/inline-svg-scaling-auto-width */
  width: auto;
}


.font-decrease, .font-reset, .font-increase {
    text-align: center;
    border: 1px solid #c3c3c3;
    margin: 2px;
    border-radius: 10px;
    line-height: 32px !important;
    height: 33px;
    align-self: center;
}

hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(197, 197, 197, 0.75), rgba(0, 0, 0, 0));
}

.night #modal-reading {
  background-color: var(--theme-bgcolor);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.night #modal-toc {
  background-color: var(--theme-bgcolor);
  border: 1px solid rgba(255, 255, 255, 0.3);
}








/* Search Box
-------------------------------------------------- */

.search svg {
  display: block;
  height: 18px;
  max-width: 500px; /* Dumb Safari fix http://stackoverflow.com/questions/24153939/inline-svg-scaling-auto-width */
  width: auto;
  margin: 7px 10px;
  
  position: absolute;
  pointer-events: none;
}

.search {
  float: right;
  min-width: 20px;
  height: 100%;
}

.search-container {
  margin: 9px 0;
}

.search-box:not(:focus) {
  text-indent: -5000px;
}

.search-box {
  /*
  background: url("../../assets/images/menu-search.svg") no-repeat 10px center;
  */
  background: none;
  background-size: 18px;
  transition: width 0.6s ease-in-out, border-radius 0.6s, background 0.6s, box-shadow 0.6s;
  width: 32px !important;
  height: 32px !important;
  border: none !important;
  cursor: pointer;
  border-radius: initial;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  padding: 0 0 0 38px !important;
  border-radius: initial !important;
  margin-top: 1px;
}




#search-submit {
    position: relative;
    left: -5000px;
    display: none;
}
.search-box:focus {
  border: none;
  outline: none;
  box-shadow: none;
  cursor: text;
  width: 240px !important;
  background-color: rgba(255, 255, 255, 0.15);
  padding-right: 5px !important;
}

@media (max-width: 800px) {
  .searching .menu {
    width: 100%;
    flex-grow: 1;
  }
  .searching .menu:not(.menu-secondary),
  .searching #settings-reading {
    display: none;
  }
  .searching .search {
    width: 100% !important;
  }
  .searching .search-box:focus {
    width: 100% !important;
  }
}
















/* Headings
-------------------------------------------------- */
h1 {
  /*font-size: 2rem;*/
  font-size: 1.7rem;
  font-weight: 400;
  margin-bottom: 1rem;
  line-height: initial;
}
h2 {
  font-size: 1.5rem;
  line-height: initial;
  /*
  font-weight: 300;
  */
  font-weight: initial;
  clear: both;
  margin: 0.5rem 0;
  transition: background-color 0.2s, color 0.2s;
}
article h2, article h3 {
  margin: 1rem 0 .5rem 0;
}
article a:hover {
  opacity: 0.95;
  transition: opacity 0.2s;
}
article a {
  transition: opacity 0.2s;
  hyphens: auto;
}
h2 a:hover {
 color: inherit;
}
h3 {
  font-size: 1.3rem;
  line-height: 1.5rem;
  font-weight: 400;
  clear: both;
  transition: background-color 0.2s, color 0.2s;
}
h4 {
  font-size: 1.1rem;
  line-height: 1.3rem;
  font-weight: 500;
  margin: 1rem 0 .5rem 0;
  clear: both;
}
h1 a, h2 a, h3 a, h4 a {
  color: inherit;
  border: 0 !important;
}




/* Article Content
-------------------------------------------------- */

aside, .aside {
  display: block;
  float: right;
  margin-right: -150px;
  width: 22%;
  clear: both;
  margin-right: -25%;
}

/*
article .text > :not(aside) {
  max-width: 75%;
}
*/
/*
.gallery {
  max-width: 75% !important;
}
*/
article .text aside * {
  max-width: 100%;
}

aside figure {
  padding-top: 0px !important;
  margin-bottom: .2rem;
}
aside figure a img {
  position: relative !important;
  
}




/* Main
-------------------------------------------------- */
.main {
  /*
  padding: 1rem 1rem 0 1rem;
  padding: 0 1rem;
  */
  /*
  background-color: white;
  background-color: var(--theme-bgcolor);
  */
  flex: 1;
  z-index: 1;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.main hr {
  height: 2px;
  background-color: #ddd;
  width: 100%;
  max-width: 720px;
  margin-bottom: 2rem;
  margin-top: 1rem;
  margin-right: auto;
  /*float: right;*/
}
.main p, .main > ul, .main > ol, blockquote, .gallery {
  margin: 0.5rem 0;
  word-wrap: break-word;
}
article hr {
  max-width: initial !important;
}
/*
.main ul, .main ol {
  word-wrap: break-word;
  padding-left: 1rem;
}
.main ul {
  list-style: disc outside none;
}
*/
.article ul, .article ol {
  word-wrap: break-word;
  padding-left: 1rem;
}
.article ul {
  list-style: disc outside none;
}
/*
.main a {
  border-bottom: 2px solid #ddd;
}
*/
/*
.main a:hover {
  border-color: #222;
}
*/

blockquote {
  border-left-width: 4px;
  border-left-style: solid;
  padding: .5rem 1rem;
  color: #666;
}

/*
blockquote p {
  margin-bottom: 0px !important;
}
*/


/* Containers
  - Determine the overall width of content areas
-------------------------------------------------- */

.container {
  max-width: 1080px;
  max-width: 1140px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
  /*
  background-color: #ffffff;
  */
}
.boxed .container {
  background-color: var(--theme-bgcolor);
}
.boxed header .container {
  background-color: initial;
}
body.boxed {
  background-color: #f2f2f2;
}


.project {
  display: flex;
  border-bottom: 1px solid #E0E0E0;
  justify-content: space-between;
}

.section {
  margin-bottom: 1rem;
  display: flex;
  flex-flow: column nowrap;
  width: 100%; /* For IE */
}
.subsection, .column {
  display: flex;
  justify-content: space-between;
  
  flex-flow: row wrap;
  /*
  align-items: flex-start;
  -webkit-align-items: flex-start;
  */
}

.subsection > .card-join {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.subsection > div > .button {
  margin-top: auto;
}

.size-quarter.card-join {
      min-width: 220px;
    max-width: 290px;
    flex: 1 1 220px; /* Safari bug */
}

/* Text blocks */
.text ul, .text ol {
  padding-left: 20px;
}
.text > ul, .text > ol {
  margin: 0.5rem auto;
}


/* Ordered (Numbered) Lists */

ol > li > ol {
  list-style-type: lower-alpha;
}



.text:focus {
  outline: none;
}



textarea {
  width: 100%;
  min-height: 300px;
  color: #ffffff !important;
  background-color: #2e3436;
}

.form-container {
  display: none;
}






.project-step-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}



.project-step-images a {
  width: 49%;
  border-bottom: none;
}



.wom {
  padding: 5% 8%;
  background-color: #FAFDFF;
  border: 1px dashed #DFEEFF;
}

.wom h2 {
  color: #444;
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 3.5rem;
  width: 100%;
  text-align: center;
  margin-bottom: .5rem;
}

.wom h3 {
  width: 100%;
  text-align: center;
  margin-bottom: 1rem;
}

/* Temporary
-------------------------------------------------- */

.logo-club figcaption {
  text-align: center;
  margin-top: .4rem;
  font-size: .9rem;
  color: #444;
}

/* Project meta
-------------------------------------------------- */
.meta {
  margin-bottom: 1.5em;
}
.meta li {
  float: left;
  list-style: none;
  margin-right: 2em;
  color: #62A5F0;
}
.meta li b {
  font-weight: 400;
  color: #000;
  padding-right: .25em;
}


































/* Prevent in-page anchors from being hidden by sticky header
https://adactio.com/journal/10877 */
:target:before {
  content: '';
  display: block;
  height: 4rem;
  margin-top: -4rem;
}


/* Makers list
-------------------------------------------------- */

.featured {
  background-color: white;
}

.featuredcontainer {
  width: 100%;
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  background-color: white;
}

.section-makers img {
  border-radius: 50px;
}
.section-makers {
  position: absolute;
  display: flex;
  position: absolute;
  right: 0px;
  bottom: 0px;
}

.maker {
  margin: 10px;
}

.featured > .container {
  position: relative;
}

/*
.cards-makers a, .cards-makers .blah {
  position: relative;
  float: left;
  background-color: var(--theme-main);
}
*/
/*
.cards-makers a {
  min-width: 80px;
  max-width: 108px;
  width: 108px;
  height: 108px;
}
*/
.cards-makers a {
  float: left;
    width: 108px;
    height: 130px;
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    margin: 5px;
  overflow: hidden;
}

.cards-makers .blah {
  min-width: 80px;
  max-width: 108px;
  width: 108px;
  height: 108px;
}

.cards-makers img {
  background-color: var(--theme-main);
}

.cards-makers span {
  display: block;
  margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
.cards-makers a div {
  position: absolute;
  bottom: 0px;
  width: 100%;
  color: white;
  line-height: 22px;
  font-size: .8rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(3px);
  padding: 0 8px;
}
*/




.column {
  align-items: flex-start;
}


/* Clubs
-------------------------------------------------- */

.logo-club img {
  width: 85%;
  transition: transform 0.35s;
  margin-bottom: 2rem;
}
.logo-club img:hover {
  transform: scale(1.05);
}


/* Projects list
-------------------------------------------------- */
.projects {
  list-style: none;
  overflow: auto;
}
.projects li {
  list-style: none;
  float: left;
}
.projects ul:first-child {
  margin-left: 0;
}
.projects h3 {
  font-size: 1rem;
  text-align: center;
}




/* Frend tooltips
  - http://frend.co/components/tooltip/
-------------------------------------------------- */

.fr-tooltip {
  display: block;
  visibility: hidden;
  height: 0;
  width: 0;
}
.fr-tooltip.fr-tooltip--is-ready {
  display: inline-block;
  visibility: visible;
  height: initial;
  width: initial;
}

/*	Container */
.fr-tooltip--is-ready {
	position: relative;
}

/*	Toolip */
.fr-tooltip--is-ready .fr-tooltip-tooltip {
	bottom: 100%;
	position: absolute;
	visibility: hidden;
  background-color: #ffe566;
  border-radius: .25em;
  left: 50%;
  min-width: 260px;
  opacity: 0;
  padding: 5px 10px;
  text-align: center;
  -webkit-transform: translateX(-50%) translateY(0);
  transform: translateX(-50%) translateY(0);
  transition: visibility .15s ease-out,opacity .15s ease-out,-webkit-transform .15s ease-out;
  transition: visibility .15s ease-out,opacity .15s ease-out,transform .15s ease-out;
  transition: visibility .15s ease-out,opacity .15s ease-out,transform .15s ease-out,-webkit-transform .15s ease-out;
}
.fr-tooltip--is-ready .fr-tooltip-tooltip:after {
  border: solid transparent;
  border-color: transparent;
  border-top-color: #ffe566;
  border-width: 8px;
  bottom: -16px;
  content: '';
  height: 0;
  left: 50%;
  margin-left: -8px;
  pointer-events: none;
  position: absolute;
  width: 0;
}
.fr-tooltip--is-ready .fr-tooltip-tooltip[aria-hidden="false"],
.fr-tooltip--is-ready .fr-tooltip-tooltip[aria-hidden="false"],
.fr-tooltip-toggle.js-fr-tooltip-toggle:focus + .fr-tooltip-tooltip {
	visibility: visible;
	opacity: 1;
	transform: translateX(-50%) translateY(-12px);
}

/*	No JS */
.fr-tooltip:not(.fr-tooltip--is-ready) .fr-tooltip-tooltip::before {
	content: " (";
}
.fr-tooltip:not(.fr-tooltip--is-ready) .fr-tooltip-tooltip::after {
	content: ")";
}

/* Gallery
-------------------------------------------------- */
/*
.gallery {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}
.gallery figure {
  margin-bottom: 0px;
  max-width: 100%;
}
.gallery img {
  width: 100%;
}
.gallery figcaption {
  display: none;
}
*/


.pswp__caption__center {
  max-width: 700px !important;
}

.pswp_title {
  font-size: 1.5rem;
  line-height: 1.5rem;
  margin-bottom: .5rem;
}
/*
.pswp__button--share {
  display: none !important;
}
.pswp__share--facebook, .pswp__share--twitter, .pswp__share--pinterest {
  display: none !important;
}
*/
.pswp__share--facebook, .pswp__share--twitter, .pswp__share--pinterest {
  display: none !important;
}

/* Activity
-------------------------------------------------- */
.activity {
  background-color: rgba(247, 251, 255, 1);
  border: 4px dotted rgba(222, 238, 255, 1);
  border-radius: 5px;
  margin: 1rem 0;
}
.activity .toc-container {
  background-color: white;
}

.activity .text {
  padding: 1rem 0rem 0rem 1rem;
}

.activity-solution {
  margin-bottom: 0px;
  width: 100%;
}
.solution {
  width: 100%;
  display: none;
  background-color: rgba(250, 255, 247, 1);
  border: 4px dotted rgba(212, 247, 205, 1);
  margin: 4px;
}

.section.container.upload {
  width: 80%;
}

#solution {
  color: rgb(56, 174, 85);
}


/* Footer
-------------------------------------------------- */
.footer {
  /*
  padding: 5rem 0 1rem;
  */
  font-size: .8em;
  overflow: auto;
  /*
  background-color: white;
  background-color: var(--theme-bgcolor);
  */
}

footer .container {
  border-top-width: 2px;
  border-top-style: solid;
  overflow: auto;
  padding-top: 1.2rem;
  padding-bottom: 1rem;
}

.copyright {
  float: left;
}
.colophon {
  float: right;
}

.footer .copyright, .footer .colophon {
  margin: 0 5px;
}

.size-50.card-space {
  margin-bottom: 1rem;
}
.cardss:after {
  content: initial;
}

/* Form Elements (input, select, email, password)
  - http://codepen.io/sivan/pen/alKwf
  - http://stackoverflow.com/questions/16952526/detect-if-an-input-has-text-in-it-using-css
  - http://stackoverflow.com/questions/3617020/matching-an-empty-input-box-using-css
-------------------------------------------------- */

.login-container, .signup-container {
  max-width: 500px;
  margin: 0 auto;
}

.login-container a {
  font-weight: 300;
  font-size: 14px;
  color: #8a9199;
}




label {
    display: block;
    position: relative;
    height: 1.5rem;
    line-height: 1.5rem;
}

label input {
    float: left;
    width: initial;
    height: 100%;
    margin-right: 10px;
}



form div {
  position: relative;
  width: 100%;
  margin: 5px 0;
  /*
  overflow: hidden;
  text-overflow: ellipsis;
  */
}

form input ~ label,
form select ~ label {
  line-height: initial;
  pointer-events: none;
  position: absolute;
  top: 15px;
  left: 8px;
  color: #909090;
  transform: translate3d(0, 0, 0);
  transition: all 0.2s ease-in-out;
}

form input:valid,
form input:focus,
form input[type="text"]:valid,
form input[type="text"]:focus,
form select:focus {
  padding: 12px 8px 0px;
}

input[required] {
  /*
  background: url("../../assets/images/form-dot.svg") no-repeat top right;
  background: url("../../assets/images/form-dot.svg") no-repeat top -6px right -10px;
  */
}

.icons {
  position: absolute;
  pointer-events: none;
  margin: 0;
  top: 0;  
}

/* Required dot */
input:required  ~ .icons::before,
select:required ~ .icons::before {
  content: '\00B7';
  color: #e32;
  position: absolute;
  right: 0;
  margin: 5px;
  font-size: 40px;
  line-height: 5px;
}

/* Dropdown caret */
select ~ .icons::after {
  content: '\276F';
  color: var(--theme-main);
  transform: rotate(90deg) scale(.8, .6);
  position: absolute;
  right: 0;
  margin: 5px;
  top: 10px;
  font-size: 20px;
}

/* Icons */
.icons svg {
  position: absolute;
  top: 12px;
  left: 12px;
}

/* Space for icons */
form input[name="firstname"] { padding-left: 45px !important; }
form label[for="firstname"] { padding-left: 38px !important; }

form input[type="email"] { padding-left: 45px !important; }
form input[type="email"] + label { padding-left: 38px !important; }



/*
select[required] {
  background: url("../../assets/images/form-dot.svg") no-repeat top right, url("../../assets/images/form-arrow.svg") no-repeat center right 9px, linear-gradient(to right,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 100%) no-repeat center right
}
*/

select {
  -webkit-appearance: none;
  /*
  background: url("../../assets/images/form-arrow.svg") no-repeat center right 9px;
  background: url("../../assets/images/form-arrow.svg") no-repeat center right 9px, linear-gradient(to right,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 1) 100%) no-repeat center right;
    
  background-size: auto, 40px 100%;
    background-size: 10px;
  */
}
/*
select.clicked {
  background: url("../../assets/images/form-arrow.svg") no-repeat top 5px right 5px;
  background-size: 10px;
}
*/
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}



form input + label,
form input:optional + label,
form input[type="text"] + label,
form input[type="text"]:optional + label,
form input[type="email"] + label,
form input[type="email"]:optional + label,
form input[type="number"] + label,
form input[type="number"]:optional + label,
form input[type="password"] + label,
form input[type="password"]:optional + label {
  color: #909090;
}


form input:required:valid + label, form input:focus + label,
form input[type="text"]:required:valid + label, form input[type="text"]:focus + label,
form input[type="text"]:optional.clicked + label, form input[type="text"]:focus + label,
form input[type="email"]:valid + label, form input[type="email"]:focus + label,
form input[type="email"]:optional.clicked + label, form input[type="email"]:focus + label,
form input[type="number"]:valid + label, form input[type="number"]:focus + label,
form input[type="number"]:optional.clicked + label, form input[type="number"]:focus + label,
form input[type="password"]:valid + label, form input[type="password"]:focus + label,
form input[type="password"]:optional.clicked + label, form input[type="password"]:focus + label,
form select:focus + label {
  /*
  color: #62A5F0;
  color: var(--theme-main);
  */
  font-weight: 400;
  font-size: 12px;
  transform: translate3d(0, -10px, 0);
}

form input:focus,
form select:focus {
  border-color: #62A5F0;
  border-color: var(--theme-main);
}

form input:required:valid + label,
form input:optional:valid.clicked + label,
form select.clicked:valid + label {
  color: green;
  color: #909090;
}
/*
form input:required:valid:focus,
form input:optional:valid.clicked:focus {
  border-color: green;
}
*/


form input.clicked + label, form select.clicked + label {
  color: red;
  font-weight: 400;
  font-size: 12px;
  transform: translate3d(0, -10px, 0);
}
form input[type="text"].clicked,
form input[type="email"].clicked,
form input[type="number"].clicked,
form input[type="password"].clicked,
form select.clicked {
    transition: all 0.2s ease-in-out;
    /* padding: 22px 8px 10px; */
    /* padding: 12px 8px 0px; */
}

form select:not(.hasbeenclicked) {
  color: white;
}
form select:focus {
  color: initial;
}



form span {
  font-size: .8rem;
  line-height: initial;
  
  /*
  white-space: nowrap;
  */
}


input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
select {
  display: block;
  width: 100%;
  height: 3rem;
  padding: 16px 8px;
  padding: 12px 8px 0px;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  /*background: rgba(255, 255, 255, 0.97);*/
  color: inherit;
  outline: 0;
  transition: all 0.2s ease-in-out;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
}
/* need to figure this out */
/*
input {
  display: inline;
  width: initial;
  height: initial;
}
*/
input, select {
  color: inherit;
  background-color: var(--theme-bgcolor);
}




form div[role='group'] {
  
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-flow: row wrap;
  
  margin-bottom: 1rem;
}

form div[role='group'] h3 {
  width: 100%;
  /*
  font-size: 1rem;
  color: #94aab0;
  */
}

#usernameurl {
  color: var(--theme-main);
  font-size: inherit;
}


/* Signup form color picket (abandoned)
-------------------------------------------------- */

#colorselector input[type=radio] {
  position: absolute;
  visibility: hidden;
  order: 1;
}

#colorselector input[type=radio]:checked ~ .colorradio {
  filter: drop-shadow(0px 0px 5px var(--theme-main));
  transition: filter .2s;
}

#colorselector {
    display: flex;
    flex-flow: row wrap;
}

#colorselector li {
    color: #AAAAAA;
    display: block;
    min-width: 48px;
    display: flex;
    flex-direction: column;
}

#colorselector label {
    color: #444;
    font-size: .9rem;
    font-weight: 400;
    transform: initial;
    pointer-events: all;
    display: block;
    position: relative;
    left: initial;
    top: initial;
    padding: 30px 0 0;
    text-align: center;
    height: 50px;
    cursor: pointer;
    order: 3;
    z-index: 1;
}

#colorselector .colorradio {
    margin: 0 auto;
    background-color: var(--theme-main);
    border-radius: 100%;
    height: 25px;
    width: 25px;
    margin-bottom: -25px;
    order: 2;
}

#colorselector label:hover + .colorradio {
  filter: drop-shadow(0px 0px 5px var(--theme-main));
  transition: filter .2s;
}

/* Buttons
-------------------------------------------------- */

.button {
  display: block;
  min-width: 150px;
  -webkit-appearance: none;
  color: #FFF;
  border: 0 none;
  cursor: pointer;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  height: 50px;
  line-height: 50px;
  width: initial;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: 0;
  letter-spacing: .4px;
  /*
  transition: opacity .2s;
  */
  transition: opacity .2s, background-color 0.2s, color 0.2s;
  font-size: inherit;
  text-align: center;
  padding: initial !important;
  margin: 0 auto;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.button:hover {
  color: white;
  opacity: 0.8;
  transition: opacity .2s;
}
.button:active {
  opacity: 0.6;
  transition: opacity .2s;
}






.toc-button {
  border: 2px dotted rgba(255, 165, 0, 0.32);
  background-color: rgba(255, 165, 0, 0.12);
  color: rgb(160, 160, 160);
  text-align: center;
  cursor: pointer;
}
#toggle-toc svg {
  display: block;
  height: 18px;
  max-width: 500px; /* Dumb Safari fix http://stackoverflow.com/questions/24153939/inline-svg-scaling-auto-width */
  width: auto;
}


.image-upload-button {
  display: block;
  width: 49%;
  height: 145px;
  line-height: 142px;
  font-size: 50px;
  color: #666;
  border: 1px solid #ccc;
  background: #e7e7e7;
  text-align: center;
}


/*
.button-save-container, .button-edit {
  width: 90%;
}
.button-save input[type=submit], .button-edit {
  height: 2.5rem;
  margin-bottom: 0rem;
}
*/

.button-solution {
  height: 50px;
  width: 50%;
}




button {
  background-color: initial;
  outline: none;
}







.button-edit {
  margin-bottom: 1rem;
}

.button-edit button:nth-child(1) {
  border-radius: 5px 0 0 5px;
}
.button-edit button:nth-child(2) {
  border-radius: 0 5px 5px 0;
}


.dropdown {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1000;
}


.dropdown button:nth-child(1) {
  flex: 4;
}
.dropdown button:nth-child(2) {
  flex: 1;
  border-left: 1px solid white;
  cursor: pointer;
  min-width: 2rem;
}
.dropdown button:nth-child(2):before {
  flex: 1;
  content: '\25BC';
  color: white;
}

/*
.dropdown button:nth-child(2):focus + .dropdown-menu,
button.focused + .dropdown-menu {
  visibility: visible;
    opacity: 1;
    transition: opacity .25s;
}
*/

button:focus + .dropdown-menu,
button.focused + .dropdown-menu {
  visibility: visible;
    opacity: 1;
    transition: opacity .25s;
}

.dropdown-menu {
  position: absolute;
  /*right: 10px;*/
    /*
    top: 105%;
    */
    
    
    
    border-radius: 2px;
  color: #444;
  z-index: 10000;
  background-color: white;
  border: 1px solid #e0e0e0;
  
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s, visibility .25s; /* Learned how to make the transition look good http://www.greywyvern.com/?post=337 */
  cursor: default;
  min-width: 150px;
}



.menu .dropdown-menu {
  position: fixed;
  right: initial;
}
/* In Chrome */
.dropdown-menu {
  top: 105%;
  right: 0;
}

/* In Safari */
@media not all and (min-resolution:.001dpcm) { @media {

  .dropdown-menu {
    transform: translate(-107%, 25%);
    left: 50%;
    transform: translate(227%, 25%);
  }

}}

/*
.menu .dropdown {
  display: block;
  position: relative;
}
.dropdown button {
  position: relative;
}

*/
/*
.menu .dropdown-menu {
  position: fixed;
  right: initial;
  margin-top: 5px;
}
*/

.dropdown-menu li > * {
    display: block;
    padding: 10px;
    line-height: initial;
    cursor: pointer;
    
    transition: background-color .2s;
}

.dropdown-menu li:hover {
  background-color: #f1f1f1;
}

.dropdown-menu li:not(:first-child) {
    border-top: 1px solid #e0e0e0;
}


.dropdown-menu s {
  opacity: .6;
}

























/* Frontend Editing
-------------------------------------------------- */

.editing #hero img:hover {
  opacity: 0.8;
}




/*
.editing #icon img {
  opacity: 0;
}
*/



#icon-add {
  font-size: .8rem;
  text-align: center;
  display: none;
  cursor: pointer;
  transition: opacity .2s;
}
#icon-add:hover {
  opacity: .7;
  transition: opacity .2s;
}
.editing #icon-add {
  display: block;
}




.editing #icon {
  /*background-image: url(https://drewbaren.com/maker/assets/images/icon-add.png);*/
  background-size: contain;
  /*border: 1px solid #d2d2d2;*/
}

#icon img[src*="avatar"] {
  background-color: var(--theme-main);
}

#hero:not(.nohero) ~ .main .sidebar #icon {
  margin-top: -100px;
  border-radius: 5px;
  /*background-color: var(--theme-main);*/
  filter: drop-shadow(5px 0px 0px white) drop-shadow(-5px 0px 0px white) drop-shadow(0px 5px 0px white) drop-shadow(0px -5px 0px white);
}






/*
@keyframes flashed {
  0%   { opacity: 1; }
  50% { opacity: .75; }
  100% { opacity: 1; }
}
*/
@keyframes flash {
  0%   { opacity: 1; }
  25% { opacity: .8; }
  /*
  50% { opacity: 1; }
  75% { opacity: .8; }
  */
  100% { opacity: 1; }
}
.flash {
  animation-name: flash;
  animation-duration: 1.2s;
  animation-timing-function: ease-in-out;
}



.ct-ignition {
  display: none;
}
.ct-widget.ct-toolbox {
  background-color: rgba(233,233,233,0.98) !important;
}

.ct-inspector {
  display: none;
}

.ct-widget.ct-anchored-dialog.ct-widget--active {
    margin-top: -150px;
}


/*
.ct-tool--image, .ct-tool--video, .ct-tool--preformatted {
  display: none;
}
.ct-tool-group:nth-child(4) {
    display: none;
}

.ct-tool--indent, .ct-tool--unindent, .ct-tool--line-break, .ct-tool--align-left, .ct-tool--align-center, .ct-tool--align-right {
  display: none;
}


.ct-anchored-dialog__target-button {
  display: none !important;
}

*/

.tool-file:before {
    color: #464646;
    cursor: pointer;
    float: left;
    height: 32px;
    width: 32px;
    content: "";
    background: url(/assets/images/tool-file.svg) no-repeat;
    background-position: center;
    background-size: 14px;
}










.ct-widget input {
  display: initial;
}

.text-center {
  text-align: center;
}
.text-right {
    text-align: right;
}
.text-left {
    text-align: left;
}

.ct-widget.ct-flash {
  color: rgba(95, 183, 20, 0.9) !important;
}

/* Overriden by the above for some reason */
.ct-widget.ct-flash--no {
  color: rgba(183, 20, 20, 0.9) !important;
}

.ce-element--type-image {
  max-width: 100%; /* Keeps big images within container while being edited */
}
.ce-element--type-image, .ce-element--type-video {
  clear: both;
}
.ce-element--type-video {
  margin: 1rem 0;
}


/*
.ce-element--empty:after {
  height: 0px !important;
  float: left;
}
*/

h1.ce-element--empty:after {
  content: "Add a title";
  font-style: initial;
  cursor: text;
}

.text p:first-child.ce-element--empty:after {
  content: "Write text here";
  font-style: initial;
  cursor: text;
}

.ce-element {
  animation: pulse 1s linear;
}
@keyframes pulse {
  0% {
    background-color: none;
  }
  50% {
    background-color: rgba(243,156,18,0.1);
  }
  100% {
    background-color: none;
  }
}

.ce-element--type-text.ce-element--focused, .ce-element--type-text.ce-element--over, .ce-element--type-image.ce-element--over,
.ce-element--type-list-item-text.ce-element--focused, .ce-element--type-list-item-text.ce-element--over,
.ce-element--type-list.ce-element--over {
  background-color: initial !important;
}
.ce-element--focused.ce-element--type-image {
  background-color: initial !important;
}
.ce-element--dragging.ce-element--type-image {
  background-color: initial !important;
}
.ce-element--focused.ce-element--type-text,
.ce-element--focused.ce-element--type-list,
.ce-element--focused.ce-element--type-image,
.ce-element--dragging.ce-element--type-text,
.ce-element--dragging.ce-element--type-list,
.ce-element--dragging.ce-element--type-image,
.ce-element--over.ce-element--type-text,
.ce-element--over.ce-element--type-list,
.ce-element--over.ce-element--type-image, {
  background-color: initial !important;
}

/* Closer to the correct ratio */
.ce-element.ce-element--type-video {
  width: 100% !important;
  padding-bottom: 56.25% !important;
}


/* Mobile Frontend Editing tweaks
-------------------------------------------------- */
/*
.ct-widget.ct-toolbox {
  position: fixed;
  left: 0 !important;
  bottom: 0;
  height: 50px !important;
  width: 100%;
  margin-bottom:40px;
}

.ct-widget .ct-toolbox__grip {
  display: none;
}

.ct-tool-groups {
  display: flex !important;
  flex-direction: row;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ct-tool-group {
  flex-shrink: 0;
}
*/

/* Editing Bar
-------------------------------------------------- */

#editing-form {
  display: none;
}

.isModified {
  background-color: #F8FFF9;
}
[contenteditable=true] {
 background: #F8FFF9;
 border: 1px dashed #DCDEDC
}

.editing-bar {
  width: 100%;
  height: 40px;
  background-color: #699CD0;
  display: flex;
  justify-content: flex-start;
}
.editing-bar .container {
  width: 100%;
}
.editing-buttons {
  display: flex;
  justify-content: space-between;
}
.buttons-formatting {
  display: flex;
}

.editing-bar button {
    border: 1px solid white;
    background: transparent;
    color: white;
    font-weight: bold;
    padding: 6px 12px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 4px;
    margin: 0;
}

.half {
  width: 50%;
  float: left;
}



/* Modals & Notifications
-------------------------------------------------- */

#modals .container {
  position: relative;
}

#modals {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  z-index: 100;
}
#modals.visible {
	opacity: 1;
	visibility: visible;
}

#modal-backdrop {
  height: 100vh;
}
.noscroll #modal-backdrop {
  background-color: rgba(0, 0, 0, 0.3);
}

.modal {
  visibility: hidden;
  position: absolute;
  transform: translate(50%, 30%);
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
  width: 80%;
  max-width: 550px;
  transition: visibility 0.3s;
  background-color: var(--theme-bgcolor);
}



.modal.visible {
  visibility: visible;
}

.modal-title, .modal-options {
  display: flex;
  justify-content: space-between;
}

.modal-title {
  background-color: rgba(0, 0, 0, 0.05);
  padding-left: 20px;
  border-bottom: 1px solid #e0e0e0;
  cursor: default;
  -webkit-user-select: none;   
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.modal-title h2 {
  line-height: 2.5rem;
}

.modal-title button {
  cursor: pointer;
  padding: 0 20px;
  transition: background-color .2s;
}
.modal-title button:hover {
  background-color: rgba(0, 0, 0, 0.08);
}
.modal-title button:before {
  content: "\02715";
  font-size: 20px;
}

.modal-content {
  padding: 20px;
}

.modal-options button {
  border-radius: 0px;
}

#upload-form {
  display: none;
}
.honey {
  display: none;
}
#button-forgot {
  cursor: pointer;
}

.modal.top {
  top: 55px;

  border-radius: 5px;
  overflow: hidden;
  width: initial;
  max-width: 550px;
  transition: visibility 0.3s;
  transform: initial;
}

.modal.right {
  right: 5px;
}

.modal.left {
  left: 5px;
}

.subnav .modal.top {
  top: 90px;
}

#modal-account {
  top: 55px;
}


ul.list-options {
  cursor: pointer;
  -webkit-user-select: none;   
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

ul.list-options li > * {
  display: block;
  padding: 10px;
  font-size: .8rem;
}

.list-options li {
  transition: background-color .2s;
}
.list-options li:hover {
  background-color: rgba(255, 255, 255, 0.10);
}

.list-options > *:not(:first-child) {
    border-top: 1px solid #e0e0e0;
}


.list-options span, #modal-toc span {
  padding: 0 10px;
  -webkit-tap-highlight-color: transparent;
}







/* WebSocket / myRIO
-------------------------------------------------- */

.LEDs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36px;
}
.LED {
  flex: 1;
  text-align: center;
  color: #A5A5A5;
  background-color: rgb(212, 212, 212);
  border-radius: 5px;
  max-width: 24%;
}

/* Connection */
.websocket button {
  height: 32px;
}
#websocket-connection, #message-form, #communication-receive {
  display: flex;
  justify-content: space-between;
}
.websocket input {
  margin-bottom: 0px;
}

#websocket-panel {
  display: none;
}

.websocket hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.websocket button {
  border-radius: 3px;
  font-size: 0.9rem;
  margin: 0;
}

.websocket button[type="submit"] {
  background: #86b32d;
  box-shadow: 0 4px #6F9229;
}
.websocket button[type="submit"]:hover {
  top: 2px;
  box-shadow: 0 2px #6F9229;
}
.websocket button[type="submit"]:active {
  top: 4px;
  box-shadow: none;
}

#closeBtn, #reconnectBtn {
  display: none;
}
#closeBtn {
  background-color: #D23A3A;
  box-shadow: 0 4px #AD3434;
}
#closeBtn:hover {
  top: 2px;
  box-shadow: 0 2px #AD3434;
}
#closeBtn:active {
  top: 4px;
  box-shadow: none;
}

#communication-send {
  margin-bottom: 1rem;
}

.websocket button:hover {
  opacity: 0.75;
  cursor: pointer;
}





.codeblock {
  display: flex;
}

.codebox {
  float: left;
  background-color: #eee;
  width: 50%;
  overflow: auto;
  padding: 10px;
  margin-bottom: 1.5em;
}
.codebox code {
  /* Styles in here affect the text of the codebox */
  font-size:0.9em;
  /* You could also put all sorts of styling here, like different font, color, underline, etc. for the code. */
}



.codebox.output {
  background-color: black;
}


p code {
  background-color: var(--theme-opac2);
  padding: 0 5px 2px;
  border-radius: 4px;
  position: relative;
  top: -1px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

pre {
  border-left: 2px solid rgb(214, 139, 0);
  background-color: rgba(226, 141, 49, 0.1);
  padding: 15px 20px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre;
}



.hide {
  display: none !important;
}
.show {
  display: block !important;
}

#messages {
  overflow-x: hidden;
  overflow-y: hidden;
  height: 250px;
  background-color: rgb(240, 240, 240);
}



.websocket {
  padding: 1em;
  margin: 1em auto;
  border-top: 5px solid grey;
  box-shadow: 0 2px 10px rgba(0,0,0,0.8);
  background-color: white;
  clear: both;
}

.status-green {
  border-top: 5px solid #69c773;
}

.status-red {
  border-top: 5px solid red;
}

.websocket #status {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.websocket .open {
  color: green;
}

.websocket .closed {
  color: red;
}

.websocket ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
}

.websocket ul li {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #EEE;
}

.websocket ul li:first-child {
  border-top: 1px solid #EEE;
}

.websocket ul li span {
  display: inline-block;
  width: 90px;
  font-weight: bold;
  color: #999;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.websocket .sent {
  background-color: #F7F7F7;
}



.websocket textarea {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #D9D9D9;
  border-radius: 3px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  min-height: 100px;
  margin-bottom: 1rem;
}



/* Maker Profiles
-------------------------------------------------- */

.makerinfo {
  display: flex;
  justify-content: space-between;
}

.info {
  font-size: 0.85rem;
}



.makerimage {
    width: 25%;
}

.makerimage > img {
  cursor: pointer;
  transition: .5s ease;
}

.profiletext {
    width: 70%;
}

.profilesocial {
  height: 30px;
  display: flex;
}

.twitter, .facebook, .linkedin {
  flex-grow: 1;
  height: 100%;
}

.twitter {
  background: url(http://drewbaren.com/assets/images/social-twitter.svg) #00aced center no-repeat;
  background-size: 30%;
}
.facebook {
  background: url(http://drewbaren.com/assets/images/social-facebook.svg) #3b5998 center no-repeat;
  background-size: 30%;
}
.linkedin {
  background: url(http://drewbaren.com/assets/images/social-linkedin.svg) #007bb6 center no-repeat;
  background-size: 30%;
}




.row {
  display: flex;
  justify-content: flex-start;
  flex-flow: row nowrap;
}

.column {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1; /* Mostly fixes Safari mobile weirdness with sidebar */
}


/* Embeds
-------------------------------------------------- */

video {
  display: inline-block;
  width: 100%;
  background-color: black;
  max-height: 50vh;
}
audio {
  display: inline-block;
  width: 100%;
  margin: 0.5rem auto;
}

iframe {
  width: 100%;
  /*
  min-height: 300px;
  */
  border: 0;
}

.video-container {
  position: relative;
  overflow: hidden;
  height: 0;
  background-color: transparent;
  padding-bottom: 56.25%;
  margin: 1rem 0;
}
.video-container iframe {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.videocontainer object {
  width: 100%;
  height: 100%;
  position: absolute;
}

.video-container > video {
  width: 100%;
  height: 100%;
  position: absolute;
  background-size: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.youtube, .vimeo {
  
  padding-bottom: 56.25%;
  background-size: 100% !important;
  background-repeat: no-repeat;
  cursor: pointer;
  
  /*
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  transition: all 200ms ease-out;
  width: 100%;
  height: 100%;
  position: absolute;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  */
}

iframe.visible {
  z-index: 1;
}

.youtube .play {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 100;
  width: 85px;
  height: 60px;
  background-color: rgba(17, 17, 17, 0.80);
  border-radius: 17px;
  filter: alpha(opacity=80);
  transition: all 0.2s ease-out;
  z-index: 0;
}
.youtube:hover .play {
  background-color: rgba(185, 26, 51, 1);
}
.youtube .play:after {
  content: "";
  border-style: solid;
  border-width: 11px 0px 11px 22px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 1);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-35%, -50%);
  -ms-transform: translate(-35%, -50%);
  transform: translate(-35%, -50%);
}

.vimeo .play {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 100;
  width: 85px;
  height: 52px;
  background-color: rgba(17, 17, 17, 0.80);
  border-radius: 5px;
  filter: alpha(opacity=80);
  transition: all 0.2s ease-out;
  z-index: 0;
}
.vimeo:hover .play {
  background-color: rgb(0, 173, 239);
}
.vimeo .play:after {
  content: "";
  border-style: solid;
  border-width: 11px 0px 11px 22px;
  border-color: transparent transparent transparent rgba(255, 255, 255, 1);
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-35%, -50%);
  -ms-transform: translate(-35%, -50%);
  transform: translate(-35%, -50%);
}

/* Alignment and Responsive Components
-------------------------------------------------- */

.center {
  margin: 0 auto;
  text-align: center;
}

/* Homepage Hero Animation
-------------------------------------------------- */

#hero {
  position: relative;
  background-size: cover;
  background-position: center center;
  background-color: white;
  background-color: var(--theme-bgcolor);
  /*
  max-height: 500px;
  */
}

#hero.fullwidth {
  /*
  height: 250px;
  min-height: 15rem;
  height: 40%;
  */
  /*
  height: 50vh;
  min-height: 15rem;
  max-height: 40vh;
  */
  /*
  background-color: black;
  */
  /*
  max-height: 40vh;
  */
}

#hero.video {
  max-height: initial;
}
#hero.video.fullwidth {
  max-width: initial;
  background-color: black;
}


#hero figure img {
  width: 100%;
}


#hero figure {
  margin-bottom: initial;
}
#hero.video figure {
  max-width: 1080px;
  max-width: 1200px;
  margin: 0px auto;
  background-color: black;
}

#hero figure .video-container {
  margin: 0;
}

#hero.fullwidth img {
  object-fit: cover;
  background-size: cover;
  background-position: center center;
  height: 100%;
  width: 100%;
  
  /*max-height: 40vh;*/
  /*
  position: absolute;
  */
  font-family: 'object-fit: cover;'; /* Polyfill for IE/Edge */
  left: 0;
  right: 0;
}

.fullwidth {
  width: 100%;
}
.fullwidth .container {
  max-width: initial;
}

#hero.carousel figure {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 3s ease-in-out;
  -webkit-transition: opacity 3s ease-in-out;
  -moz-transition: opacity 3s ease-in-out;
}

#hero.carousel {
  /*
  height: 20vh;
  */
  height: 25vh;
  max-height: 30vh;
}


#hero figcaption {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  cursor: default;
  -webkit-user-select: none;   
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
  font-size: 5vh;
}

/*
#hero figure {
  display: flex;
  flex-direction: column;
  position: relative;
}
*/

#hero figure span {
  width: 100%;
  color: white;
  margin: 0;
  letter-spacing: 1px;
  text-shadow: 0px 0px 20px #000;
}

#hero.visible {
  opacity: 1;
}

#hero figure:not(:first-child) {
  opacity: 0;
}

figure {
  position: relative;
  /*background-color: rgb(250, 250, 250);*/
  flex-shrink: 0;
}

article figure {
  margin: 0.5rem auto;
  clear: both;
}
#hero figure {
  margin: 0 auto;
}

/*
  Something weird about small screen sizes here, otherwise small images are blown up
figure img {
  width: 100%;
}
*/


@media (min-height: 600px) {
  article > #hero {
    display: none;
  }
}
@media (max-height: 600px) {
  /*
  body > #hero {
    display: none;
  }
  */
}


twitterwidget {
  margin: 0 auto;
}


/* Table of Contents (TOC)
-------------------------------------------------- */

.sticky {
  position: sticky !important;
  position: -webkit-sticky !important;
  position: -moz-sticky;
  position: -o-sticky;
  position: -ms-sticky;
  top: 100px;
}
.menu-secondary.sticky {
  top: 0px;
  background-color: white;
}

.toc-items > * {
  list-style: none;
}

.toc > div > a {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.1s, visibility 0.1s;
}

.toc[style*="position: fixed;"] a {
  visibility: visible;
  opacity: 0.95;
  transition: opacity 0.2s, visibility 0.2s;
}

.toc li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toc > div:first-child {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  width: 100%;
}
.toc > div > a {
  font-size: .9rem;
  white-space: nowrap;
  padding: 0 .5rem 0.2rem .5rem;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}


p {
  line-height: 1.5rem;
}

.toc-items ul {
  padding-left: 10px;
  opacity: .7;
}

.widget li {
  font-size: .8rem;
  line-height: 1.3rem;
}

/*
.toc {
  padding-right: 1rem;
  visibility: hidden;
  opacity: 0;
  width: 100%;
  position: relative;
  opacity: .5;
  color: #8B939C;
  flex-grow: 1;
  -webkit-transition: opacity 0.3s linear;
  -moz-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}

.toc:hover {
  opacity: 1;
}

.toc ul li:nth-child(1), .toc ul li:nth-child(2) {
  list-style: none;
}
*/



.toc-marker {
  position: absolute;
  top: 0px;
  left: -10px;
  padding-left: 10px;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.toc-marker path {
  -webkit-transition: all 0.3s ease;
          transition: all 0.3s ease;
  stroke: #a9a9a9;
  stroke-width: 2;
}


.toc-items {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  max-height: 100%;
  max-height: calc(100vh - 200px);
}
.toc-items li {
  opacity: .8;
}
.toc-items li.visible {
  opacity: 1;
}

/*
.dropdown {
  opacity: .2;
  position: absolute;
  top: 25px;
  -webkit-transition: visibility 0.15s linear,opacity 0.15s linear;
  -moz-transition: visibility 0.15s linear,opacity 0.15s linear;
  transition: visibility 0.15s linear,opacity 0.15s linear;
}

.dropdown.visible {
  visibility: visible;
  opacity: 1;
}
*/
/*
#modal-toc {
  max-height: 65vh;
  width: 65vw;
  max-width: 500px;
}
#modal-toc.visible .toc {
  display: block;
}
*/
#modal-toc .toc-items {
    padding: 0 15px;
}


/* Other stuff
-------------------------------------------------- */
.maker img {
  z-index: auto;
  overflow: visible;
  background: #000;
  position: relative;
  display: block;
  max-width: 100%;
}

.maker img {
  opacity: 1;
  transition: transform 0.35s, box-shadow 0.35s;
}

.maker img:hover {
  transform: scale(1.05);
  box-shadow: 0 1px 10px rgba(0,0,0,0.8);
}

/* Photoswipe button reversal
-------------------------------------------------- */

.pswp__button {
  border-radius: 0;
}
.pswp__button:hover {
  box-shadow: none;
  top: initial;
}
.pswp__button--arrow--right, .pswp__button--arrow--left {
  top: 50% !important;
}
/*
.pswp__button--share {
  display: none !important;
}
*/
.pswp__caption__center {
  text-align: center !important;
}

/* SIDEBAR THE FINAL ONE
-------------------------------------------------- */

.sidebar:not(.rightsidebar) {
  /*margin-right: 2rem;*/
  margin-right: 20px;
  flex-grow: 1;
  width: 18%;
  max-width: 170px;
  max-width: 180px;
  /*
  flex: 1;
  */
  word-wrap: break-word;
}
.sidebar > div {
  margin-bottom: 1rem;
  /*display: block;*/
  flex-shrink: 0;
  /*
  min-width: 100px;
  */
}

.sidebar ul {
  /*list-style-position: inside;*/
  /*padding-left: 20px;*/
  list-style: none;
}

.sidebar .authors, .sidebar .makers {
  white-space: nowrap;
  /*overflow: hidden;*/
  text-overflow: ellipsis;
}
.sidebar .row img {
  align-self: flex-start;
  margin-right: .3rem;
}


#authors a, #groups a {
  position: relative;
}
/*
.editing .sidebar #authors a:before {
  content: "\2630";
  display: block;
  color: #ABABAB;
}
*/

/*
.editing .sidebar #authors a:before {
  content: "\2630";
  position: absolute;
  left: -12px;
  top: 6px;
  height: 50px;
  color: #c3c3c3;
  transform: scale(.5,1);
}
*/

#users .item:first-child .item-delete {
  display: none;
}

.items img[src*="avatar"] {
  background-color: var(--theme-main);
}

.item-delete, .item-confirm {
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 200000000;
  height: 20px;
  width: 15px;
  cursor: pointer;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: center;
  display: none;
}
.item-confirm {
  top: 20px;
}
.item-delete:before {
  content: "\2718";
  color: #ff5858;
}
.item-confirm:before {
  content: "\2714";
  color: green;
}
.item-delete:hover ~ .row {
  color: red;
  transition: color 0.3s;
}
.item-confirm:hover ~ .row {
  color: green;
  transition: color 0.3s;
}
.editing .item-delete, .editing .item-confirm {
  display: block;
}

.editing .item .row {
  cursor: move;
  transition: color 0.3s;
}
#requests .item .row {
  opacity: 0.5;
}

.item {
  position: relative;
}
.item .column span {
  white-space: nowrap;
}




.widget.hidden {
  display: none;
}

.editing .widget.hidden {
  display: initial;
}

.widget form {
  display: none;
}

.editing .widget form {
  display: initial;
}




.sidebar h1 {
  margin-bottom: 0;
  display: block;
}

.sidebar-button {
  border: 2px dotted rgba(0, 81, 255, 0.12);
  background-color: rgba(0, 81, 255, 0.12);
  color: rgb(160, 160, 160);
  text-align: center;
  cursor: pointer;
}
.sidebar h3 {
  font-size: 0.9rem;
  font-weight: 300;
  margin: 0 0 0.2rem 0;
  letter-spacing: 1px;
}
.sidebar .heading {
  display: block;
  /*
  font-size: 0.9rem;
  font-weight: 300;
  */
  letter-spacing: 1px;
}



.sidebar h4 {
  font-size: 1rem;
  margin-bottom: 0px;
}

.sidebar figcaption {
  display: none;
}

.sidebar .makers img {
  object-fit: none;
  align-self: flex-start;
  background-color: var(--theme-main);
}

.sidebar span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .8rem;
  line-height: 1rem;
}
.sidebar .column {
  overflow: hidden;
  display: flex;
  justify-content: center;
  /*
  justify-content: center;
  -webkit-justify-content: center;
  */
}

.sidebar .makers > a {
  display: block;
  max-width: 100%;
}
.makers .column {
  min-width: 0;
}


.sidebar .row.indicator {
  border-left: 3px solid var(--theme-main);
  padding-left: 3px;
}
.sidebar span.indicator {
  color: var(--theme-main);
}



.sidebar .filter {
  font-size: .9rem;
}

.hours img {
  margin-right: auto;
  margin-left: initial;
}

.hours .day, .hours .hour {
  line-height: 1.4rem;
  font-size: .8rem;
}

.sidebar div .row {
  margin-bottom: 0.3rem;
}

.hours .day {
  border: 1px solid #E6E6E6;
  text-align: center;
  width: 50px;
  color: #BDBDBD;
  font-weight: 300;
  letter-spacing: 1px;
}

#currentday .day {
  color: #8E8E8E;
  background-color: #F4FBFF;
}

#currentday .hour {
  font-weight: bold;
}

.hours .hour {
  margin-left: 5px;
  margin-top: 1px;
}
#address {
  display: block;
  font-size: .8rem;
  white-space: pre-wrap;
  margin-top: .3rem;
}
.hours > span {
  /*
  display: inline-block;
  */
  display: block;
  /*
  text-overflow: ellipsis;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 0.3rem;
  */
}


.date {
  /*border: 1px solid #E6E6E6;*/
  /*text-align: center;*/
  /*width: 50px;*/
  color: #316790;
  font-weight: 300;
  /*letter-spacing: 1px;*/
  line-height: 1.4rem;
  font-size: .8rem;
}





/* SIDEBAR WIDGETS
-------------------------------------------------- */

#author-results, #group-results, [data-role="results"] {
  position: absolute;
  background-color: white;
  z-index: 100 !important;
  width: 100%;
}

#author-results li, #group-results li, [data-role="results"] li {
  padding: 5px;
  border: 1px solid #d9d9d9;
  border-width: 0px 1px 1px 1px;
}
#author-results li:hover, #group-results li:hover, [data-role="results"] li:hover {
  background-color: #d9d9d9;
  cursor: pointer;
}

[data-role="results"] {
  width: 180px;
  right: 0px;
}

[data-role="results"] li:first-child {
 border-top: 1px solid #d9d9d9;
}


[data-role="search"] input {
  display: block;
  width: 100%;
  margin-bottom: 5px;
  padding: 0px !important;
  padding-left: 5px;
  text-align: right;
}

[data-role="search"] input:focus {
  outline: none;
}

[data-role="search"] > div {
  margin: initial;
}

[data-role="search"] {
  font-size: 0.9rem;
  flex: 1;
}

/*
.widget .heading {
  flex: 2;
  width: 100%;
}
*/

.widget.categories li:before {
    content: "";
    display: inline-block;
    /* padding: 10px; */
    /* float: left; */
    margin-right: 5px;
    width: 15px;
    height: 15px;
    border-radius: 5px;
    background-color: var(--theme-main);
    vertical-align: middle;
}



















article {
  flex-grow: 5 !important;
  flex: 2;
  position: relative;
  width: 100%;
  margin: 0 auto;
}


.sidebar {
  order: 1;
  flex: 0 0 14rem;
}

.sidebar ~ .content {
  margin-right: auto;
}
/*
.rightsidebar ~ .content {
  max-width: 700px;
}
*/
/*
article {
  max-width: 700px;
  max-width: 720px;
}
*/
/*
article ~ .cards {
  max-width: 700px;
}
*/

.content {
  max-width: 100%;
  flex: 1;
  order: 2;
}

.rightsidebar {
  max-width: 280px;
  order: 3;
}

/*
.sidebar ~ .content .cards, .sidebar ~ .content .cards-makers {
  max-width: 720px;
}
*/
/*
.sidebar ~ .content .cards {
  max-width: 720px;
}
*/


/*
[contenteditable]:empty:before {
  content: attr(placeholder);
  display: block;
  color: #ABABAB;
}
h1:empty:before {
  content: attr(placeholder);
  display: block;
  color: #ABABAB;
}
*/

p:empty:before {
  content: attr(placeholder);
  display: block;
  color: #ABABAB;
}

.p {
  text-align: center;
  font-size: 13px;
  padding-top: 130px;
}






table {
  width: 100%;
  border-collapse: collapse;
  empty-cells: hide;
  margin-bottom: 1rem;
}

.table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

th {
  background: #EDF5FF;
  background-color: var(--theme-opac2);
  text-align: left;
}

th:empty {
  visibility: hidden;
}

td, th {
  border: solid 1px #ccc;
  padding: 6px;
  word-wrap: break-word;
}

/*
tbody th {
  text-align: left;
}
*/

/*
tr:nth-of-type(odd) td {
  background: #F7F7F7;
}
*/




/* Flexbox Grid
-------------------------------------------------- */

/*
.toc-container {
  flex-grow: 1;
  min-width: 180px;
}
*/


.textbox {
  flex: 4;
  word-wrap: break-word;
  max-width: 720px;
}

article .text, article .title {
  max-width: 700px;
}
.text, .title {
  line-height: 1.625rem;
}
.sidebar ~ article {
  margin: initial;
}
/*
.sidebar ~ article .cards {
  max-width: 700px;
}
*/
article h1 {
  /*
  max-width: 700px;
  */
}

.size-85 {
  width: 85%;
  margin: initial;
  margin-left: auto;
}

.size-50 {
  width: 49%;
}
.size-half {
  width: 49%;
}
.size-two-thirds {
  width: 64%;
}
.size-67 {
  width: 64%;
}
.size-one-third {
  width: 32%;
}
.size-33 {
  width: 32%;
  margin-bottom: 2%;
}
.size-third {
  width: 32%;
}

.size-25, .size-quarter {
  width: 24%;
}
.size-20 {
  width: 19%;
}
.size-sixth {
  width: 15%;
}


.card-join h2 {
  margin: 0 0 0.5rem 0;
}


hr.divider {
  max-width: 100%;
  margin-bottom: 3rem;
  margin-top: 2rem;
  height: 1px;
}


figcaption {
  font-size: .9rem;
  text-align: center;
  line-height: initial;
  margin-top: 0.5rem;
}
aside figcaption {
  display: none;
}

.video-container ~ figcaption {
    margin-top: -0.5rem;
}

/*
::-webkit-scrollbar {
  display: none;
}
*/

.scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}








/* Discussion
-------------------------------------------------- */

.discussion {
  max-width: 700px;
    padding-top: 1rem;
    margin-top: 2rem;
    border-top: 1px solid #c1c1c1;
    
  margin-bottom: 20rem;
}

.discussion a.user-avatar {
  background-color: var(--theme-main);
  width: 44px;
  height: 44px;
  border-radius: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.discussion .user-avatar img {
  width: 40px;
  background-color: var(--theme-main);
}

.discussion .user-firstname {
  font-weight: bold;
}

.discussion .user-avatar img {
  border-radius: 20px;
}

.discussion .item .column {
  margin-left: 1rem;
}

.discussion .item .column > div:first-child {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.discussion .item .comment-date, .discussion .item span {
  font-size: .8rem;
}


#add-comment .text {
  width: 100%;
    background: initial;
    border: initial;
}

.discussion hr {
  height: 1px;
  background-color: initial;
  margin: 1.5rem 0;
  margin-left: auto;
  max-width: 644px;
}

[data-role='editor'] {
  
}



#discussion-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

#discussion-sections {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  
}

.discussion .item > div {
  height: 100%;
}
.discussion .item > div:first-child {
  position: relative;
}

.discussion .user-badge {
  position: absolute;
    bottom: -5px;
    right: 0px;
}

/* http://www.w3schools.com/css/css_tooltip.asp */

.user-badge .tooltip {
  
  cursor: default;
  
  opacity: 0;
  transition: opacity .25s;
  
    position: absolute;
    z-index: 1;
    width: 100px;
    text-align: center;
    background-color: #fdfdfd;
    padding: 12px;
    border: 1px solid #dedede;
    border-radius: 3px;
    bottom: 125%;
    left: 50%;
    margin-left: -50px;
}
.user-badge .tooltip:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #dedede transparent transparent transparent;
}
.user-badge > div:hover ~ .tooltip {
  
  opacity: 1;
  transition: opacity .25s;
}



#discussion-sections div {
  display: flex;
  flex-direction: column;
}
#discussion-sections div {
    text-align: center;
    margin: 0 2px;
    padding: 5px 10px;
    border-right: 1px solid #c1c1c1;
    cursor: pointer;
}

#discussion-sections div:last-child {
  border-right: initial;
}

#discussion-sections div span:nth-child(2) {
  font-size: .7rem;
      white-space: nowrap;
    overflow-x: hidden;
}

.discussion .item {
  margin-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.discussion .item:after {
    content: "";
    background: #dedede;
    position: absolute;
    bottom: 0;
    width: 92%;
    right: 0;
    height: 1px;
}

.discussion .item:last-child:after {
  content: initial;
}









@media (max-width: 800px) {
  
  .rightsidebar {
    width: 0%;
  }
  aside {
    margin-right: initial;
    float: initial;
    display: flex;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  #toggle-toc { display: block; }
  
  .main .container {
    flex-direction: column;
  }
  /*
  .size-third {
    width:100%;
  }
  */
  .toc {
    display: none;
  }
  
  .sidebar {
    display: flex;
    max-width: initial;
    width: 100%;
    width: calc(100% + 2rem);
    /*
    margin-left: -1rem;
    */
    
    overflow-x: auto;
    /*
    overflow-y: auto;
    */
    -webkit-overflow-scrolling: touch;
    /*
    max-height: 150px;
    */
    width: 100% !important;
    max-width: initial !important;
    /*
    margin-bottom: 1rem;
    */
  }
  .sidebar .column {
    height: 100%;
  }
  /*
  .sidebar div:first-child {
    margin-left: 1rem;
  }
  */
  .sidebar .widget {
    margin-right: 1rem;
    max-width: 28vw;
    min-width: 12rem;
  }
  .sidebar div {
    /*
    margin-left: 1rem;
    */
    margin-bottom: initial;
    min-width: 150px;
    overflow-y: auto;
    
    -webkit-overflow-scrolling: touch;
  }
  
  .sidebar #icon {
    /*display: none;*/
    margin-top: initial !important;
    max-width: 150px;
  }
  
  .handbook > * {
    flex-basis: 100%;
  }
  /*
  #hero {
    height: 150px;
  }
  */
  /*
  .subsection {
    display: initial;
  }
  */
  /*
  .sidebar div {
    flex-shrink: 0;
    margin-right: 20px;
  }
  */
  
  .sidebar:first-child {
    flex: 1;
  }
  
  
  .sidebar > .card {
    flex: 0 1 auto;
  }
}

@media (max-width: 750px) {

  .sidebar-images {
    display: flex;
    flex: 1;
    flex-flow: row nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .menu-button {
    display: block;
  }
  .size-50 {
    width: 100%;
    margin: 1rem 0;
  }
  .size-half {
    width: 100%;
    margin: 1rem 0;
  }
  .size-25 {
    width: 49%;
    margin: 1rem 0;
  }
  .size-33 {
    width: 100%;
    margin: 1rem 0;
  }
  .size-67 {
    width: 100%;
  }
  
  .text {
    flex: initial;
  }
  .main .container {
    flex-flow: column wrap;
  }

  .listbox {
    max-width: 100%;
  }

  /* Mobile Animations
  http://daneden.github.io/animate.css/
  -------------------------------------------------- */
  .animated {
    -webkit-animation-duration: .5s;
            animation-duration: .5s;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
  }
  
  .fadein {-webkit-animation-name: fadein; animation-name: fadein; animation-duration: 3s;}
  @-webkit-keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  /* Fade in right */
  .fadeinright {-webkit-animation-name: fadeinright; animation-name: fadeinright;}
  @-webkit-keyframes fadeinright {
    0% {opacity: 0; -webkit-transform: translate3d(7%, 0, 0); transform: translate3d(7%, 0, 0);}
    100% {opacity: 1; -webkit-transform: none; transform: none;}
  }
  @keyframes fadeinright {
    0% {opacity: 0; -webkit-transform: translate3d(7%, 0, 0); transform: translate3d(7%, 0, 0);}
    100% {opacity: 1; -webkit-transform: none; transform: none;}
  }
  
  /* Fade in left */
  .fadeinleft {-webkit-animation-name: fadeinleft; animation-name: fadeinleft;}
  @-webkit-keyframes fadeinleft {
    0% {opacity: 0; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-20%, 0, 0);}
    100% {opacity: 1; -webkit-transform: none;transform: none;}
  }
  @keyframes fadeinleft {
    0% {opacity: 0; -webkit-transform: translate3d(-7%, 0, 0); transform: translate3d(-7%, 0, 0);}
    100% {opacity: 1; -webkit-transform: none; transform: none;}
  }

}






/* DRAGULA
-------------------------------------------------- */

.gu-transit {
  opacity: 0.2;
}




/* CALENDAR
-------------------------------------------------- */

#calendar-container {
		margin: 0 auto;
		max-width: 1000px;
	}

#calendar-container #header-row,
#calendar-container #calendar-body {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: space-around;
}

#calendar-container #header-row {
	height: 30px;
	text-align: center;
}

#calendar-container #header-row .day-column {
	text-transform: uppercase;
	line-height: 29px;
	color: #ffffff;
	background-color: #618a9b;
	border-left: 1px solid #FFFFFF;
}

#calendar-container #header-row .day-column:nth-child(2n) {
	background-color: #719db0;
}

#calendar-container #header-row .day-column:first-child {
	border-left: 1px solid #515151;
}

#calendar-container .day-column {
	width: 14.285714286%;
}

#calendar-container #header-row {
	border-top: 1px solid #515151;
	border-right: 1px solid #515151;
}

#calendar-container #calendar-body {
	border-left: 1px solid #ddd;
}

#calendar-container #calendar-body .day-column {
	min-height: 140px;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
}

#calendar-container #calendar-body .day-column.weekend {
	background-color: #efefef;
}

#calendar-container #calendar-body .day-column.today {
	background-color: #bfdbff;
}

#calendar-container #calendar-body .day-column .day-number {
	display: block;
	margin: 2px 0 2px 4px;
	color: #262626;
}

#calendar-container #calendar-body .day-column.not-in-month .day-number {
	color: #7f7f7f;
}

#calendar-container #calendar-body .day-column .cal-event {
  /* Added at the behest of /u/mr_bacon_pants */
  position: relative;
	margin-left: 2px;
	padding-left: 2px;
	margin-bottom: 2px;
	border-radius: 2px;
	color: #ffffff;
	margin-right: 1px;
	background-color: #1b6d85;
	border: 1px solid #16576a;
}

#calendar-container #calendar-body .day-column .cal-event[data-days='2'] {
	width: calc(200% - 2px);
}

#calendar-container #calendar-body .day-column .cal-event[data-days='3'] {
	width: calc(300% - 1px);
}

#calendar-container #calendar-body .day-column .cal-event[data-days='4'] {
	width: calc(400%);
}

#calendar-container #calendar-body .day-column .cal-event[data-days='5'] {
	width: calc(500% + 1px);
}

#calendar-container #calendar-body .day-column .cal-event[data-days='6'] {
	width: calc(600% + 2px);
}

#calendar-container #calendar-body .day-column .cal-event[data-days='7'] {
	width: calc(700% + 3px);
}

/* GUGGENHEIM IMAGE GALLERIES
-------------------------------------------------- */

.guggenheim {
    max-width: 100%;
}
.guggenheim__ratio-container {
    position: relative;
}
.guggenheim__figure,
.guggenheim__link,
.guggenheim__image {
    display: inline-block;
    margin: 0;
    padding: 0;
    text-decoration: none;
    vertical-align: middle;
}

/* Add element level spcificity to prevent interfeerence from ".main figure" from the kirby starterkit, without resorting to !important */
figure.guggenheim__figure {
    position: relative;
    box-sizing: content-box;
    margin-bottom: 0;
}
.guggenheim__figcaption {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.guggenheim__link,
.guggenheim__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.guggenheim__link {
    width:100%;
}
.guggenheim__image {
    height: auto;
    width: 100%;
}

.zoom a {
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    cursor: -webkit-zoom-in;
}

/* DRAGULA
-------------------------------------------------- */
.gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:alpha(opacity=80)}.gu-hide{display:none!important}.gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.gu-transit{opacity:.2;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20)}


/* Site-specific things */
/*
figure a:not([href*="makernetwork\.org"]):hover {
  opacity: initial;
  transition: initial;
}
figure a:not([href*="makernetwork\.org"]):before {
  opacity: 0;
  content: '\021F1';
  transform: scaleX(-1);
  color: white;
  font-size: 5rem;
  z-index: 1;
  position: absolute;
  top: 15px;
  right: 15px;
  transition: all 0.3s ease;
}
figure:hover a:not([href*="makernetwork\.org"]):before {
  opacity: 1;
  top: 5px;
  right: 5px;
  transition: all 0.3s ease;
}
*/