/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

:root {
  --bg1: #fff;
  --bg2: rgba(128,128,128,.1);
  --bg3: rgba(255,255,255,.75);
  --wash1: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3));
  --wash2: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7));
  --primary: rgba(255, 221, 85, 1);
  --secondary: rgba(128,128,128, .25);
  --txt1: #000;
  --shadow1: 0 0 .4em 0 rgba(0,0,0,.2);
  --shadow2: 0 0 .2em 0 rgba(0,0,0,.2);
  --category-1:#FA9343;
  --category-2:#75D0FF;
  --category-3:#A36F92;
  --category-4:#FF5671;
  --category-5:#93B050;
  --following: #D0C9B9;
  --following: rgba(128,128,128,.6);
}

.hidden{
  display: none;
}
.error{
  border: 1px solid red;
}

body {
      font-family: sans-serif;
      text-align: center;
      font-size: calc(10px + .4vw);
      -webkit-transition: all 0.5s ease;
      -moz-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
      transition: all 1s ease-in-out;
      background: var(--bg1);
      margin: 0;
      color: var(--txt1);
      text-size-adjust: none;
}
    audio,canvas,iframe,img,svg,video {
      vertical-align: middle;
    }
    input{
        color: var(--txt1);
        background: var(--bg1);
    }

    input[type="submit"], input[type="button"]{
        -webkit-appearance: none;
    }
    ol, ul{
      clear: both;
      list-style: none;
      padding: 0;
      margin: 0;
    }
    h1, h2{
      margin-bottom: .5em;
      text-align: center;
      font-weight: 100;
      font-size: 140%;
      letter-spacing: .15vw;
    }

    div.resourcesComingSoon h1, div.developComingSoon h1{
       font-size: 2em;
       padding: 3em 0;
    }

    h1 a{
      color: var(--txt1);
      text-decoration: none;
    }
    button, a.button, span.button{
      display: inline-block;
      text-decoration: none;
      color: rgba(0,0,0, .8);
      min-width: 1em;
      border-radius: 500px;
      border: none;
      cursor: pointer;
      background: var(--secondary);
    }
    button:disabled, a.button.disabled, input.disabled, input[type="text"]:disabled,
    form#search .navigate li.disabled {
      opacity: .4;
      cursor: default;
    }
    button:not(:disabled):hover, a.button:not(.disabled):hover{
      box-shadow: var(--shadow2);
    }

    a.stealth{
      color: #999;
      text-decoration: none;
    }

    .clear{
      clear: both;
    }

    .button{
      cursor: pointer;
    }

    input:focus, textarea:focus, button:focus, select:focus, a.button:focus{
      outline: none;
      box-shadow: var(--shadow2);
    }

    body > div.header{
      text-align: center;
      z-index: 500;
      background: #333;
      position: fixed;
      width: 100vw;
      top: 0;
    }

    div.preview, div.profile {
      display:none;
    }

    div.header h1{
      background: #fff;
    }

    div.header h1, h1.logo{
      font-size: 1.75em;
      padding: 0;
      margin: 0;
      letter-spacing: 4vw;
      text-align:center;
      padding-left: 4vw;
      line-height: 1.75em;
      height: 1.75em;
      color: #fff;
    }
    h1.logo{
      padding: .75em;
      padding: 0em;
      height: 0;
      font-size: 1em;
      overflow: hidden;
    }
    div.header h1 img{
      height: 1.25em;
      margin-right: 4vw;
    }
    div.preview div.header h1{
      width: calc(60% - 4vw);
      max-width: calc(750px - 4vw);
      padding-top: 2vh;
    }

    div.navigation{
      text-align: left;
      width: 100%;
      margin: 0;
      padding: 0;
      line-height: 50px;
      z-index: 1;
      font-size: calc(10px + .8vw);
    }

    div.navigation a{
        text-align: center;
      display: inline-block;
      text-decoration: none;
      width: calc(33.33% - 17px - .33em);
      padding: 0;
      margin:  0;
      border-radius: 0;
      background: none;
      font-weight: 100;
      cursor: pointer;
      border-radius: 0px;
      color: #ddd;
    }
    div.navigation a span.count{
      padding-left: 1em;
    }

    div.navigation a.search{
      width: 50px;
      background: url('../img/search.svg') no-repeat 50% 50%;
      text-indent: -9999px;
      filter: invert(100%);
      background-size: 1.2em;
    }

    div.navigation a.selected{
      font-weight: 900;
      color: #fff;
    }

    div.searchLinks{
      margin: 0 auto;
      width: 95%;
      max-width: calc(50% + 300px);
	}

	body:not(.developSignup) div.developSignup,
	body:not(.developers) > div.developers,
	body:not(.topics) > div.topics,
	body:not(.search) div.searchLinks.search,
	body:not(.resources) div.resources{
	  display: none;
	}

    div.searchLinks div{
      text-align: justify;
      clear: none;
      padding: 0;
      margin: 0 0 -1em;
    }

    div.searchLinks div:after{
      content: '';
      width: 95%; /* Ensures at least 2 lines, so justification works */
      display: inline-block;
    }

    div.searchLinks button.selected{
      display: inline-block;
    }

    body.developSignup .availability, body.developSignup .category-4{
      display: none;
    }

    div.searchLinks div button.nonfavorites{
      display: none;
    }

    div.searchLinks div button.nonfavorites.selected{
      display: inline-block;
    }

    div.searchLinks div button{
      background: none;
      padding: .6em .5em;
      margin: .75em .1em;
      box-shadow: 0 0 .2em rgba(255, 68, 102, 1);
      min-width: 2em;
      text-align: center;
    }
    div.searchLinks div button:hover, div.searchLinks div button:focus{
      box-shadow: 0 0 .6em rgba(255, 68, 102, 1);
    }
    div.searchLinks div button.selected{
      background: rgba(255, 68, 102, 1);
      box-shadow: 0 0 0 .1em rgba(255, 68, 102, 1);
    }

    div.searchLinks div.category-1 button{
      box-shadow: 0 0 .2em rgba(119, 221, 255, 1);
      background: none;
    }
    div.searchLinks div.category-1 button:hover,
    div.searchLinks div.category-1 button:focus{
      box-shadow: 0 0 .6em rgba(119, 221, 255, 1);
    }
    div.searchLinks div.category-1 button.selected{
      background: rgba(119, 221, 255, 1);
      box-shadow: 0 0 0 .1em rgba(119, 221, 255, 1);
    }

    div.searchLinks div.availability button{
      box-shadow: 0 0 .2em rgba(115, 167, 75, .8);
      background: none;
    }
    div.searchLinks div.availability button:hover, div.searchLinks div.availability button:focus{
      box-shadow: 0 0 .6em rgba(115, 167, 75, .8);
    }
    div.searchLinks div.availability button.selected{
      background: rgba(115, 167, 75, .8);
      box-shadow: 0 0 0 .1em rgba(115, 167, 75, .8);
    }

    div.searchLinks div.category-2 button{
      box-shadow: 0 0 .2em rgba(127, 55, 104, .8);
      background: none;
    }
    div.searchLinks div.category-2 button:hover,
    div.searchLinks div.category-2 button:focus{
      box-shadow: 0 0 .6em rgba(127, 55, 104, .8);
    }
    div.searchLinks div.category-2 button.selected{
      background: rgba(127, 55, 104, .8);
      box-shadow: 0 0 0 .1em rgba(127, 55, 104, .8);
    }

    div.searchLinks div.category-4 button{
      box-shadow: 0 0 .2em rgba(253, 98, 78, 1);
      background: none;
    }
    div.searchLinks div.category-4 button:hover,
    div.searchLinks div.category-4 button:focus{
      box-shadow: 0 0 .6em rgba(253, 98, 78, 1);
    }
    div.searchLinks div.category-4 button.selected{
      background: rgba(253, 98, 78, 1);
      box-shadow: 0 0 0 .1em rgba(253, 98, 78, 1);
    }

    div.searchLinks div.category-5 button{
      box-shadow: 0 0 .2em rgba(128, 128, 128, 1);
      background: none;
    }
    div.searchLinks div.category-5 button:hover,
    div.searchLinks div.category-5 button:focus{
      box-shadow: 0 0 .6em rgba(128, 128, 128, 1);
    }
    div.searchLinks div.category-5 button.selected{
      background: rgba(128, 128, 128, 1);
      box-shadow: 0 0 0 .1em rgba(128, 128, 128, 1);
    }

    div.searchLinks div.developButton, div.searchLinks div.searchButton{
      display: none;
      width: 100%;
      text-align: center;
    }

    body > div.resources, body > div.developers{;
      min-height: calc(100vh - 50px);
    }

    body > div.topics{
      padding: 0;
      box-sizing: border-box;
      width: 100%;
      text-align: justify;
      top: -50px;
      left: 0;
      min-height: 100vh;
    }

    div.topics span.topics{
      width: calc(100% - 6vw);
      margin: 0 3vw 0;
      display: block;
    }

    div.topics.fullPane .topics{
      z-index: -1;
    }

    div.topics .topics > div{
      line-height: 2.4em;
      float: left;
      text-align: left;
      border-radius: 5em;
      margin: 0;
      padding: 0 0 1em;
      z-index: 1;
      width: 99%;
    }

    span.topics div h2{
        font-size: 1.2em;
        line-height: 1em;
        margin: .5em;
        text-align: left;
    }

    span.topics div h2 span{
        display: none;
    }

    div.topics div h2 span{
      font-size: .75em;
    }

    div.topics .topics > div ul li{
        text-align: center;
    }

    div.topics .topics.filtered > div:not(.filtered) {
      display: none;
    }

    div.topics .topics.filtered li:not(.filter){
      display: none;
    }

    div.topics div ul:not(.showNonFavorites) li.nonfavorites{
      display: none;
    }
    div.topics div ul:not(.showFavorites) li.favorites{
      display: none;
    }
    div.topics div ul.showAll li.nonfavorites,
    div.topics div ul.showAll li.favorites{
      display: inline-block;
    }

    div.topics div ul li.favorites{
      min-height: 1em;
      font-size: 1em;
    }

    li.longName br.longName{
      display: none;
    }

    #suggestionsModal h2{
      text-align: center;
      margin-bottom: .5em;
    }

    #suggestionsModal span.plural.hidden{
      display: none;
    }

    #suggestionsModal .metadata a.filter,
    span.topics div ul li,
    ol#developers ul.topics li,
    ol#resources ul.topics li,
    ul.info ul.resources a.filter{
      border-radius: 500px;
      display: inline-block;
      margin: .4em;
      cursor: pointer;
      padding: 10px 1em;
      position: relative;
      white-space: nowrap;
      background-color: var(--category-5);
      box-sizing: border-box;
      color: black;
      border: none;
    }

    span.topics div ul li{
      min-width: 4.1em;
    }

    form#search li.topic:not(.favorites),
    #suggestionsModal .metadata a.filter:not(.favorites),
    span.topics  div ul li:not(.favorites),
    ol#developers ul.topics li:not(.favorites),
    ul.info ul.resources a.filter:not(.favorites),
    ol#resources ul.topics li:not(.favorites){
        background-image: var(--wash2);
    }

    form#search li.topic[data-category=category-1],
    #suggestionsModal .metadata a.filter[data-category=category-1],
    span.topics div.category-1 ul li,
    ol#developers ul.topics li[data-category=category-1],
    ul.info ul.resources a.filter[data-category=category-1],
    ol#resources ul.topics li[data-category=category-1]{
      background-color: var(--category-1);
    }

    form#search li.topic[data-category=category-2],
    #suggestionsModal .metadata a.filter[data-category=category-2],
    span.topics div.category-2 ul li,
    ol#developers ul.topics li[data-category=category-2],
    ul.info ul.resources a.filter[data-category=category-2],
    ol#resources ul.topics li[data-category=category-2]{
      background-color: var(--category-2);
    }

    form#search li.topic[data-category=category-3],
    #suggestionsModal .metadata a.filter[data-category=category-3],
    span.topics div.category-3 ul li,
    ol#developers ul.topics li[data-category=category-3],
    ul.info ul.resources a.filter[data-category=category-3],
    ol#resources ul.topics li[data-category=category-3]{
      background-color: var(--category-3);
    }

    form#search li.topic[data-category=category-4],
    #suggestionsModal .metadata a.filter[data-category=category-4],
    span.topics div.category-4 ul li,
    ol#developers ul.topics li[data-category=category-4],
    ul.info ul.resources a.filter[data-category=category-4],
    ol#resources ul.topics li[data-category=category-4]{
      background-color: var(--category-4);
    }

    form#search li.topic[data-category=category-5],
    #suggestionsModal .metadata a.filter[data-category=category-5],
    ul.info ul.resources a.filter[data-category=category-5]{
      background-color: var(--category-5);
    }

    span.topics div ul li.boxed{
      border: 2px solid var(--txt1);
      margin: calc(.4em - 2px) calc(.1em - 2px);
    }

    div.topics span.shares, div.topics span.name{
      display: none;
    }

    span.topics.new div ul li span.badge.new,
    span.topics.saved div ul li span.badge.saved{
      display: block;
    }

    span.topics div ul li span.badge{
      position: absolute;
      bottom: -.35em;
      right: -.75em;
      border-radius: 500px;
      min-width: 1.5em;
      width: 2em;
      height: 2em;
      line-height: 2.1em;
      font-size: .7em;
      overflow: visible;
      font-weight:  600;
      display: none;
      padding: 0;
      background-color: var(--bg1);
      color: var(--txt1);
      border: 2px solid var(--category-5);
    }

    span.topics div ul li span.badge.saved{
      top: -.35em;
      border: none;
      padding: 2px;
      background: inherit;
      color: black;
    }

    span.topics div ul li.selected span.badge,
    span.topics div.category-1 ul li.selected span.badge,
    span.topics div.category-2 ul li.selected span.badge,
    span.topics div.category-3 ul li.selected span.badge,
    span.topics div.category-4 ul li.selected span.badge{
      border: 2px solid var(--txt1);
      padding: 0;
    }

    span.topics div.category-1 ul li span.badge{
      border-color: var(--category-1);
    }

    span.topics div.category-2 ul li span.badge{
      border-color: var(--category-2);
    }

    span.topics div.category-3 ul li span.badge{
      border-color: var(--category-3);
    }

    span.topics div.category-4 ul li span.badge{
      border-color: var(--category-4);
    }

    span.topics div li .handle{
      width: 1em;
      padding: .55em .4em;
      margin: -.5em 0 -.25em -.5em;
      cursor: move;
      opacity: .3;
    }

    div.scrollTips{
      width: 100%;
      text-align: center;
      margin: 0;
      padding: 0;
      clear: both;
    }

    div.scrollTips span.scrollMore, div.scrollTips span.scrollEdit{
      font-size: 2.5em;
      font-weight: 100;
      color: rgba(0,0,0, .15);
      display: inline-block;
      margin-top: 2em;
    }

    div.developButton{
      font-size: 125%;
    }
    div.developButton a.button{
      background: rgba(255, 221, 85, 1);
      width: 100%;
      padding: .5em 0;
      text-align: center;
      margin: 1em auto 0;
    }
    div.developButton a.button:focus, div.developButton a.button:hover, div.topics button:focus, div.topics button:hover{
      box-shadow: 0 0 1em rgba(255, 221, 85, 1);
    }

    div.top, div.bottom{
      line-height: 1.75em;
      width: 100%;
      float: none;
      text-align: left;
      position: fixed;
      left: 0;
      margin: 0;
      padding: 0;
      z-index: 2000;
      overflow: visible;
      pointer-events: none;
    }

    div.top{
      top: 50px;
      text-align: right;
    }

    div.bottom{
      bottom: 0;
    }

    div.top *, div.bottom *{
      pointer-events: auto;
    }

    div.topics div.top{
      position: fixed;
    }

    body.fullPane div.top{
      display: none;
    }

    .profileButton, .searchButton, .settingsButton,
    .filterButton, .addResourceButton{
        margin: 1em;
        height: 2.75em;
        width: 2.75em;
        line-height: 2.75em;
        border-radius: 1.5em;
        box-sizing: border-box;
        background: #fff;
        box-shadow: var(--shadow1);
        cursor: pointer;
    }

    .filterButton {
        display: inline-block;
        line-height: 1em;
        box-sizing: border-box;
        text-align: left;
        overflow: hidden;
        padding: .5em 0 0 .65em;
        margin-right: 1em;
        z-index: 200;
    }
    .sortButton {
        display: inline-block;
        line-height: 1em;
        box-sizing: border-box;
        text-align: left;
        overflow: hidden;
        padding: .5em 0 0 .5em;
    }
    div.sortOpen .sortButton{
      width: auto;
    }

    .profileButton{
      display: inline-block;
      width: auto;
      height: auto;
      text-align: right;
      box-shadow: none;
      float: right;
      margin-bottom: .75em;

    }

    .profileButton.open{
      margin: -12.0em .5em 0;
      box-shadow: var(--shadow1);
      padding: 0 .5em .25em;
    }

    .profileButton button, .profileButton a.button{
      display: none;
      line-height: 2.5em;
      text-align: left;
      background: var(--secondary);
      border-radius: 1.5em;
      box-sizing: border-box;
      padding: 0 1em;
      width: 8.5em;
      margin: .5em 0;
      font-size: 1em;
    }

    .profileButton.open button, .profileButton.open a.button{
      display: block;
    }

    .profileButton img{
      margin: 0;
      width: 2.75em;
      border-radius: 2em;
      box-shadow: var(--shadow1);
    }

    .profileButton.open img{
      box-shadow: none;

    }

    .filterButton > *{
        width: 1.5em;
        height: 1.5em;
        margin: .2em -.15em .2em -.3em;
        padding: 0;
        display: inline-block;
        box-sizing: border-box;
        vertical-align: bottom;
    }

    .sortButton > span{
        display: none;
        padding: 0;
        vertical-align: middle;
        line-height: 3.75em;
        margin:  -.5em .2em -.3em;
        box-sizing: border-box;
        vertical-align: bottom;
        border-radius: 500px;
        width: 3.75em;
        height: 3.75em;
        text-align: center;
        font-size: .65em;
        background: rgba(200,200,200, .1);
        color: black;
    }

    div.sortOpen .sortButton > span{
        display: inline-block;
    }

    .sortButton > span.selected{
        font-weight: bold;
        background: rgba(200,200,200, .4);
    }


    .filterButton > br{
        display: none;
    }

    .filterButton > span{
        font-size: .6em;
        font-weight: 900;
        text-align: center;
        line-height: 1.75em;
        background: black;
        color: white;
        border-radius: 500px;
        width: auto;
        min-width: 1.75em;
    }

    .filterButton > .filters{
        margin-right: -.65em;
    }

    .filterButton > .close{
        display: none;
        margin: 0;
        padding: 0;
        width: 2.75em;
        line-height: 2.75em;
        height: 2.75em;
        vertical-align: middle;
        font-size: 1em;
        color: black;
        background: none;
    }

    body.filtersOpen .filterButton{
        box-sizing: border-box;
        padding: 0;
        box-shadow: var(--shadow2);
    }

    body.filtersOpen .filterButton:hover{
        box-shadow: var(--shadow2);
    }

    body.filtersOpen .filterButton > .close{
        display: inline-block;
    }
body.filtersOpen .filterButton > *:not(.close):not(.sort):not(.order){
    display: none;
}
body.filtersOpen .filterButton > *:not(.close),
div.sortOpen:not(.filtersOpen) .filterButton > *:not(.close){
    width: 1.75em;
    height: 1.75em;
    line-height: 1.4em;

}
body.filtersOpen .filterButton > .filters{
    display: none;
}
body.filtersOpen .filterButton > .compactFilterCount{
    display: none;
}

    body.filtersOpen .filterButton > .filterCount{
        color: black;
        background: none;
      }

    body:not(.filtersOpen) .sortButton > .order,
    body:not(.filtersOpen) .filterButton > .compactFilterCount{
        margin-left: -.5em;
    }
    body:not(.filtersOpen) .filterButton > .filterCount{
        display: none;
    }

    body .filterButton.saved > .filterCount:before,
    body .filterButton.shared > .filterCount:before,
    body .filterButton.archived > .filterCount:before,
    body .filterButton.saved > .compactFilterCount:before,
    body .filterButton.shared > .compactFilterCount:before,
    body .filterButton.archived > .compactFilterCount:before{
       content: '+';
    }

    div.profile a#update, .logo img{
        line-height: 1em;
        font-size: 2.25em;
        height: 1em;
        float: none;
        position: fixed;
        bottom: .33em;
        right: 2em;
        opacity: .8;
        border: 1px solid rgba(0,0,0,0.2);
        background: rgba(255, 255, 255, 1);
    }

    .logo img{
        border-radius: 500px;
        height: 1.25em;
        background: none;
        right: .5em;
        bottom: .2em;
        border: none;
    }

    div.bottom ul{
      line-height: 1.75em;
      padding: 0;
      text-align: left;
      font-size: 1em;
    }

    div.bottom ul.info > li{
      background: var(--bg1);
      box-shadow: var(--shadow1);
      padding: 1em 4vw .25em;
      border-radius: 0;
      width: 92vw;
      min-height: 17.75em;
      margin: 0;
      z-index: 200;
      overflow: auto;
      text-align: left;
      bottom: 0;
      display: none;
    }

    body.fullPane div.bottom ul.info > li{
      top: 50px;
      position: fixed;
      padding-top: 5.5em;
      padding-bottom: 4.5em;
      z-index: -1;
    }

    body.fullPane ul.info .title{
      top: 50px;
      left: 0;
      position: fixed;
      padding: 1.5em 1em;
      height: 4em;
      box-sizing: border-box;
      background: var(--bg1);
      box-shadow: var(--shadow1);
      z-index: 1000;
    }

    ul.info .title{
      margin: 0;
      padding: .5em 0 0;
      text-align: left;
      width: 100%;
      float: left;
      min-height: 2em;
    }

    ul.info .title button{
      float: right;
      clear: none;
      font-size: 1.5em;
      width: 1.75em;
      line-height: 1.75em;
      padding: 0;
      margin: -.5em 0 .25em .4em;
      height: auto;
      background: none;
      box-shadow: var(--shadow2);
    }

    body:not(.fullPane) ul.info .title button.collapse,
    body.fullPane ul.info .title button.expand,
    body:not(.fullPane) ul.info .title button.collapse,
    body.fullPane ul.info .title button.expand{
      display: none;
    }

    ul.info .title h3{
      margin: 0 0 .25em;
      font-size: 1.75em;
      font-weight:100;
      padding: 0;
      display: inline;
      float: left;
    }

    ul.info .title h3 a{
      margin: -.25em 0 0;
    }

    ul.info .title a{
      margin: 0 0 0 calc(1vw + 1em);
      padding: 0;
      max-width: calc(8em + 5vw);
      background: none;
      border-radius: 0;
    }

    ul.info .title a.secondary{
      max-width: none;
    }

    body:not(.fullPane) ul.info button.developers{
        display: none;
    }

    body:not(.fullPane) ul.info .description,
    body:not(.fullPane) ul.info .description{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: .25em 0 0 0;
        margin: 0;
        display: none;
    }

    body:not(.fullPane) ul.info .description{
    }

    form#search a,
    #suggestionsModal a,
    ul.info a{
      background: var(--bg2);
      border-radius: 500px;
      padding: .5em .75em;
      margin: 0;
      cursor: pointer;
      display: inline-block;
      vertical-align: middle;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: auto;
    }

    form#search a.more{
      font-family: serif;
      font-weight: 900;
      border-radius: 1.5em;
      box-shadow: 0 0 0 .125em var(--txt1);
      padding: 0 .5em 0;
      margin: 1.25em 1.5em 0 .35em;
    }

    ul.info p.description a{
      padding: .75em .75em;
      line-height: 1em;
    }

    /* resources */

    ul.info ul.resources{
      text-align: left;
      float: none;
      clear: none;
      margin: 1em 0;
      overflow: auto;
      border-radius: 0;
      border-radius: 1.5em;
      border-radius: 0;
      padding: 0 .1em 0 0;
      border-bottom: 2px solid #ccc;
      border: none;
    }

    ul.info ul.resources.default{
      clear: both;
      background: none;
      border: none;
      padding: 0;
      margin: 0;
      min-height: 6.5em;
    }

    ul.info ul.resources > li{
      display: block;
      background: none;
      box-shadow: none;
      margin: 0 1em 0 0;
      border-radius: 0px;
      position: relative;
      float: left;
      line-height: 1em;
      width: auto;
      overflow: hidden;
      border-radius: 1.25em;
      padding: .5em;
      box-sizing: border-box;
    }

    ul.info ul.resources:not(.default) > li{
      width: calc(33.3% - 1.85em);
      position: relative;
    }

    .fullPane ul.info ul.resources:not(.default){
      clear: both;
      margin: 0;
    }

    .fullPane ul.info ul.default{
      margin: 2em 0 0;
    }

    .fullPane ul.info > :not(.showSaved) ul.resources:not(.default){
      display: none;
    }

    ul.info ul.resources:not(.default) > li a:not(.more),
    ul.info .title .secondary{
      font-size: .85em;
    }

    ul.info ul.resources:not(.default) > li img{
      padding: .1em .35em 0 .15em;
      height: 1.4em;
      width: 1.4em;
    }

    ul.info ul.resources:not(.default) a.more{
      font-size:.65em;
    }

    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-child(n+3),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-child(n+3){
      margin-right: 0;
    }

    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(2),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(2){
       width: 100%;
       margin: 0;
    }

    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(3),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(3),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(3) ~ li:not(.more),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(3),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(3),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(3) ~ li:not(.more) {
       width: calc(50% - .5em);
    }

    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(3) ~ li:not(.more),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(3) ~ li:not(.more) {
       margin-right: 0;
    }

    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(4),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(4) ~ li:not(.more),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(4),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(4) ~ li:not(.more) {
       width: calc(33.3% - 1.9em);
    }

    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-child(n+4),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-child(n+4){
      display: none;
    }

    body div.bottom ul.info ul.resources:not(.default) > li.more{
      cursor: pointer;
      padding: .75em;
      display: none;
      margin: .25em 0 0 1em;
      width: auto;
    }

    body:not(.fullPane) ul.info ul.resources:not(.default) > li.more:nth-child(n+5),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li.more:nth-child(n+5){
      display: block;
    }

    ul.info ul.resources.default li{
      width: calc(50% - .5em);
      margin: 0 1em 0 0;
      float: left;
      box-sizing: border-box;
    }

    body.fullPane ul.info ul.resources li{
      margin: 0 1em 1em 0;
      width: calc(33% - .5em);
    }

    body.fullPane ul.info ul.resources li:nth-child(3n + 3){
      margin-right: 0;
    }

    body.fullPane ul.info ul.resources.default li{
      width: 100%;
      max-width: none;
    }

    ul.info ul.resources.default li:nth-child(even){
      margin-right: 0;
    }

    #suggestionsModal .resourceContainer > a.filter{
      padding: .5em .55em 0 .2em;
    }

    form#search li.resourceContainer a.url{
      padding: .75em;
    }

    form#search .resourceContainer > a:not(.more),
    #suggestionsModal .resourceContainer > a:not(.more),
    ul.info ul.resources > li > a{
      background: none;
      line-height: 1.2em;
      border-radius: 0;
      width: calc(100% - 7.5em);
      padding: .1em;
      font-size: 1.1em;
    }

    .fullPane ul.info ul.resources:not(.default) > li > a:not(.more){
        margin-right: .5em;
    }

    form#search .resources > li a:not(.more),
    #suggestionsModal .resources > li a:not(.more),
    ul.info ul.resources > li a:not(.more){
      min-height: 2.4em;
      margin-left: .25em;
    }

    ul.info ul.resources > li a b{
      font-weight: 900;
    }

    ul.info ul.resources li .metadata a{
      padding-right: 0;
      min-height: auto;
    }

    ul.info ul.resources.default li a.new{
      font-weight: 900;
    }

    ul.info .resourceNav button,
    span.addResourceButton{
      font-weight: bold;
      display: inline-block;
    }

    span.addResourceButton{
      padding: 0;
      font-size: 1.25em;
      line-height: 2.2em;
      width: 2.25em;
      margin: .75em 0 .75em 1em;
      float: left;
      color: black;
      height: auto;
      text-align: center;
    }

    ul.info .resourceNav button{
      float: none;
    }

    ul.info .resourceNav button.previous{
      display: none;
    }

    a span.path{
      opacity: .5;
    }

    a span.domain{
      font-weight: 900;
    }

    ul.info ul.resources .metadata > span {
      line-height: 2em;
    }

    ul.info ul.resources li a.filter{
      background: none;
      padding: 0;
      margin: 0 .5em 0 0;
    }

    #suggestionsModal a.filter img,
    ul.info ul.resources li a.filter img{
      border-radius: 2em;
      width: 2.25em;
      height: 2.25em;
      padding: 0;
    }

    ul.info ul.resources:not(.default) a{
      padding-left: .25em;
    }

    ul.info ul.resources a.more{
      font-size: .75em;
      float: left;
      padding: 0 0 .45em;
      margin: .15em .5em 0 0;
      text-decoration: none;
      text-align: center;
      display: inline-block;
      min-width: 2.25em;
      max-width: 2.25em;
      color: #000;
      font-weight: bold;
      border-radius: 500px;
      line-height: 1.85em;
      background-color: var(--secondary);
    }

    ul.info ul.resources.default a.more{
      position:absolute;
      bottom: 0.75em;
      left: .95em;
    }

    body.fullPane ul.info li.resourceContainer a.more{
      z-index: 1;
    }

    #suggestionsModal .resourceContainer > a[data-slug],
    ul.info ul.resources img, ol#resources .sidebar img{
      width: 1.75em;
      height: 1.75em;
      padding: .4em .4em 0 .2em;
      float: left;
      cursor: pointer;
    }

    #suggestionsModal a.more{
      float: right;
    }

    ul.info ul.resources.default img,
    ol#resources .sidebar img{
      padding: .5em .55em 0 .2em;
    }

    ul.info ul.resources.default img.saved{
      padding-top:0em;
    }

    ol#resources img.saved{
      top: 0.5em;
      position: absolute;
    }

    ul.info ul.resources.default img.shared,
    ol#resources img.shared{
      position: absolute;
      left: 0.5em;
      bottom: 2.75em;
    }

    ol#resources img.shared{
      left: auto;
      top: 2.5em;
    }

    ol#resources img.suggested{
      position: absolute;
      top: 4.5em;
    }

    ol#resources span.more{
      font-family: serif;
      font-weight: 900;
      border-radius: 1.5em;
      box-shadow: 0 0 0 .125em var(--txt1);
      padding: .2em .65em .2em;
      box-sizing: border-box;
      position: absolute;
      right: 1.5em;
      top: 1.75em;
      cursor: pointer;
    }

    ul.info ul.resources li div.metadata{
      margin: .25em 0 0 3em;
      height: 3em;
    }

    ul.info ul.resources:not(.default) li div.metadata{
      display: none;
    }

    #suggestionsModal a.filter,
    ul.info ul.resources li div.metadata a{
      width:  auto;
      float: none;
      padding: 0;
      margin: .25em .25em 0;
      min-width: 2.5em;
      text-align: center;
    }

    #suggestionsModal .resources li div.metadata a,
    ul.info ul.resources li div.metadata a{
      padding: .25em .5em;
    }

    ul.info div.resourceNav{
      width: 100%;
      float: none;
      height: auto;
      padding: 0;
      text-align: right;
      margin: -.5em 0 .5em;
    }

    body.fullPane ul.info div.resourceNav{
     display:none;
    }

    ul.info div.resourceNav span{
        display: inline;
    }

    ul.info button{
      float: right;
      display:block;
      width: 8.25em;
      clear: right;
      margin: .5em 0 .5em 1em;
      padding: 0 .5em;
      font-size: .75em;
      line-height: 1em;
      height: 3.25em;
      box-sizing: border-box;
      cursor: pointer;
      vertical-align: middle;
    }

    ul.info button.developers{
      margin-bottom: .5em;
    }

    ul.info .toggleSaved{
      padding: 0;
      float: none;
      margin: 2em 0 0;
      display: none;
    }


    ul.info .toggleSaved button{
      display: inline-block;
      float: none;
    }

    .fullPane ul.info .toggleSaved{
      display: block;
    }

    ul.info > :not(.showSaved) .toggleSaved .hide,
    ul.info > .showSaved .toggleSaved .show{
      display: none;
    }

    ul.info p{
      margin: 0 0 2vh;
      line-height: 2.75em;
      clear: left;
      font-size: .8em;
    }

    /* signup & notifiaction form styles */

    body.signup div.edit ul{
      width: 25em;
      max-width: 85%;
      margin: .5em auto 1em;
      list-style: disc outside;
      text-align: left;
    }
    body.signup div.edit ul li{
      margin: .5em 0;
      list-style: disc outside;
    }

    body.signup .thankyou{
      display: none;
    }

    body.signup form{
      width: 95%;
    }

    body.signup form label, form.notification label {
      color: rgba(0,0,0,1);
      border-radius: 500px;
      padding: 0;
      margin: 1em .5em;
      display: block;
      width: calc(100% - 1em);
      text-align: left;
    }

    input,
    body.signup form label input,
    form.notification label input{
      width: calc(100% - 7em);
      margin: 0;
      border-radius: .5em;
      border: 1px solid #ccc;
      padding: .5em 1em;
    }
    form.notification label input[type=checkbox]{
      width: auto;
      margin: 0 .25em 0 0;
    }
    body.signup form button, body.signup form a.button,
    div.searchLinks div form.notification button,
    div.searchLinks div form.notification input[type=submit]{
      border-radius: 500px;
      padding: 1em .5em;
      margin: .5em .5em 0 .5em;
      display: inline-block;
      background: #eee;
      width: calc(50% - 1.25em);
      font-size: 110%;
      line-height: .9em;
      box-shadow: none;
      border: none;
      clear: none;
    }
    body.signup form a.button, div.preview a.button{
      width: calc(50% - 2em);
    }
    body.signup form button.submit,
    div.preview div.thankyou a.button,
    div.searchLinks div form.notification input[type=submit],
    div.topics button.submit{
      background: rgba(255, 221, 85, 1);
    }
    div.preview div.thankyou a#startover.button{
      background: #eee;
    }
    div.searchLinks div form.notification.minimized label.email,
    div.searchLinks div form.notification.minimized input[type=submit]{
      display: none;
    }
    div.searchLinks div form.notification.minimized button{
      width: calc(100% - 2em);
    }



    /* preview styles */
    div.preview div.edit{
      width: 60%;
      max-width: 750px;
      float: left;
      margin: 0 0 calc(30px + 3vh + 1em);
      text-align: center;
    }
    div.preview.full div.edit{
      display: none;
    }

    div.preview div.edit form{
      max-width: 700px;
      margin: 0 auto;
    }

    div.preview .formLinks .hidden{
      display: none;
    }
    div.preview .formLinks label{
      margin: .5em 0 .75em 8px;
      border: 1px solid #ccc;
      display: block;
      border-radius: .5em;
      background-size: 1em 1em;
    }
    div.preview .formLinks input{
      width: calc(100% - 50px);
      border: none;
      margin: 0;
    }

    div.preview .formLinks .sample input{
      color: #ccc;
    }

    div.background{
      height: 100%;
      top: 0;
      padding: 0;
      background-repeat: no-repeat;
      background-size: cover;
      width: 100%;
    }

    div.preview div.background{
      float: left;
      position: fixed;
      min-height: auto;
      width: 36%;
      min-width: calc(97% - 730px);
      margin: 2vh 0 1vh 0;
      right: 4%;
      box-shadow: 2px 2px 2px #CCC;
      border-radius: 1.5vw;
      height: calc(94vh - 36px);
    }
    div.preview.full div.background {
      float: none;
      width: 92%;
      max-width: 1200px;
      margin: 2vh auto;
      position: relative;
      right: 0;
      height: calc(90vh - 45px - 4vw);
    }
    div.preview.signup div.background {
      height: calc(96vh);
    }
    div.profile div.background {
      height: auto;
      min-height: 103;
      border-radius: 0 0 1em 1em;
      border-radius: 0;
      box-shadow: 0 0 .5em;
    }

    div.preview.full div.header h1 {
      width: 100%;
      max-width: 100%;
      margin: 2vh 0 0;
      padding: 0;
    }

    div.preview.full div.front {
      font-size: calc(8px + 1.6vw);
    }
    div.preview.full div.back {
      font-size: calc(8px + 1.2vw);
    }

    div.gradient{
      margin: 0;
      padding: 0 3%;
      overflow: auto;
      overflow-wrap: break-word;
      height: 100%;
    }
    div.preview div.gradient{
      border-radius: 1.5vw;
    }
    div.profile div.gradient{
      height: auto;
      min-height: calc(100vh);
      padding-bottom: 0;
      border-radius: 0 0 1em 1em;
      border-radius: 0;
    }
    div.gradient a{
      color: blue;
      text-decoration: underline
    }

    div.preview input:focus, div.preview textarea:focus,
    div.preview button:focus, div.preview select:focus{
      box-shadow: 0 0 .75em rgba(119, 221, 255, 1);
    }

    div.preview div.save{
      position: fixed;
      width: 100%;
      bottom: 0;
      background: #fff;
      box-shadow: 0 0 5px calc(5px + 1vh) #FFF;
      z-index: 10;
    }
    div.preview div.save #save{
      opacity: .25;
      cursor: default;
    }
    div.preview.save div.save #save{
      opacity: 1;
      cursor: pointer;
    }

    div.preview div.form-group.general span.asterisks{
      display:none;
    }
    div.preview.save div.form-group.general span.asterisks{
      display:inline;
    }
    div.preview.save div.form-group.general a.asterisks{
      display: none;
    }

    div.preview div.save a{
      display: block;
      width: 47%;
      float: left;
      margin: 0 .5% calc(5px + 1vh) 2%;
      z-index: 99;
      height: calc(25px + 2vh);
      line-height: calc(25px + 2vh);
      font-size: 18px;
      background: var(--secondary);
      border-radius: .5em;
    }
    div.preview div.save a#save{
      background: var(--primary);
    }

    div.front, div.back{
      max-width: 1200px;
      margin: auto;
      text-align: left;
      font-size: calc(10px + 2vw);
      clear: left;
    }
    div.back{
      font-size: calc(10px + 1.25vw);
    }

    div.preview div.front{
      font-size: calc(5px + 1vw);
    }
    div.preview div.back{
      font-size: calc(5px + .625vw);
    }
    div.front div.header{
      padding: .5em .75em;
      background: rgba(255,255,255,.5);
      margin: .5em 0;
      text-align: left;
      border: 1px solid rgba(0,0,0,0.1);
    }
    div.preview div.front div.photo:hover,
    div.preview div.front div.header:hover,
    div.preview div.back div.body:hover,
    div.preview div.back div.links li:hover,
    div.preview div.front ul.topics li:hover{
      cursor: pointer;
      box-shadow: 0 0 5px 0 #7DF;
    }
    div.preview .background:hover{
      cursor: pointer;
    }
    div.preview.signup div.front div.photo:hover,
    div.preview.signup div.front div.header:hover,
    div.preview.signup div.back div.body:hover,
    div.preview.signup div.back div.links li:hover,
    div.preview.signup div.front ul.topics li:hover,
    div.preview.signup .background:hover{
      cursor: default;
      box-shadow: none;
    }

    div.front div.header h2{
      font-size: 1.2em;
      font-weight: bold;
      display: inline;
      padding: 0;
    }

    div.front div.header h2 span{
       hyphens: auto;
    }

    div.front div.header h2{
      font-size: 1.2em;
      font-weight: bold;
      display: inline;
      padding: 0;
    }

    div.front div.header span.location{
      font-weight: bold;
      font-size: .8em;
    }

    div.front div.photo{
      width: 30%;
      max-width: 350px;
      float: left;
      position: relative;
      overflow: hidden;
    }

    #developers div.front div.photo{
      max-width: 150px;
      width: calc(30% - 1em);
    }

    div.front div.photo img{
      width: 100%;
    }

    div.front div.photo.photoLoading img{
      z-index: 1;
      filter: blur(.75px);
    }

    div.front div.photo img.spinner{
      display: none;
    }

    div.front div.photo.photoLoading img.spinner{
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      opacity: .5;
      width: 80%;
      padding: 60%;
      filter: blur(0px);
      margin: -50%;
      z-index: 2;
      background: #999;
    }

    div.front ul{
      float: left;
      clear: none;
      width: 68.5%;
      min-width: calc(98.5% - 350px);
      margin-left: 1%;
    }

    div.preview.full div.front ul,
    div.profile div.front ul{
      font-size: 3.5vw;
    }

    div.front ul.fewestest li{
      font-size: 2em;
    }
    div.front ul.fewest li{
      font-size: 1.5em;
    }
    div.front ul.few li{
      font-size: 1.175em;
    }
    div.front ul.many li{
      font-size: .9em;
    }
    div.front ul.most li{
      font-size: .7em;
    }
    div.preview div.front ul.mostest li{
      font-size:.6em;
    }

    div.back div.links li, div.back div.body{
      margin: .65em 0 0;
      padding: .5em 1em;
      overflow: hidden;
      text-overflow: ellipsis;
      border: 1px solid rgba(0,0,0,0.1);
      background: rgba(255, 255, 255, .7);
      float: left;
      width: calc(100% - 2em);
    }

    div.back div.links li{
      width: auto;
      margin-right: .5em;
    }

    div.back div.links li:first-child:last-child{
      width: calc(100% - 2em);
      margin-right: 0;
    }

    div.back div.body{
      background: rgba(255, 255, 255, .8);
      margin-bottom: 1em;
      clear: left;
      opacity: 1;
    }

    div.back div.body h1, div.back div.body h2,
    div.back div.body h3, div.back div.body h4,
    div.back div.body h5, div.back div.body h6,
    label.description div.display h1, label.description div.display h2,
    label.description div.display h3, label.description div.display h4,
    label.description div.display h5, label.description div.display h6{
      margin: 0;
      font-weight: bold;
      font-size: 1em;
      text-align: left;
    }
    div.back div.body h1, label.description div.display h1{
      font-size: 1.2em;
    }
    div.back div.body h2, label.description div.display h2{
      font-size: 1.1em;
    }
    div.back div.body ul, label.description div.display ul{
     list-style: disc;
      margin: 0 0 .5em 1.5em;
    }

form#search ul.profiles li.developer{
  margin: .5em .5em 0 0;
  display: inline-block;
  cursor: pointer;
  border-radius: 2em;
  vertical-align: top;
  background: var(--bg2);
  box-sizing: border-box;
  padding: .5em;
  text-align: left;
}

ol#developers, ol#resources{
 margin: .5em 1em;
 text-align: left;
}

ol#resources{
 margin: 2em 0 4em;
 text-align: center;
}

ol#developers > li, ol#resources > li{
  display: inline-block;
  padding: .5em;
  margin: 1em;
  box-sizing: border-box;
  border-radius: 1.5em;
  vertical-align: top;
  width: calc(100% - 2em);
}

ol#developers > li{
  width: calc(33.3% - 2em);
  cursor: pointer;
  border-radius: 1.5em;
  background: var(--bg2);
}

ol#developers > li.boxed{
  border: 2px solid var(--txt1);
}

ol#developers > li:not(.boxed):hover{
  box-shadow: var(--shadow1);
}

ol#developers > li.following{
  background: var(--following);
}

ol#resources > li{
  margin: 1.5em auto;
  padding:  1em .75em 2em;
  background-size: 1.5em;
  position: relative;
  display: list-item;
  text-align: left;
  max-width: 100%;
}

ol#resources > li > a{
  display: block;
  border-radius: 1em;
}

ol#resources > li > a:not(.more){
  padding: .75em 1em;
  margin: -.5em -.25em .5em 2.5em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
  vertical-align: middle;
  background: var(--bg2);
  line-height: 1.25em;
  height: 2.25em;
}

ol#resources > li > a br{
    clear: none;
}

ol#resources > li > a br::after{
  display: block;
  width: 2em;
}

ol#resources > li > a.more{
    position: absolute;
    top: 0;
    left: 0;
    padding: 7.5em .75em 0 .45em;
    margin: .5em 0;
    min-height: 2em;
    cursor: pointer;
    background-image: url('../img/star.svg'), url('../img/heart.svg'), url('../img/talk.svg');
    background-position: .5em .25em, .5em 2.75em, .5em 5em;
    background-repeat: no-repeat;
    background-size: 1.75em;
}

ol#resources > li.saved:not(.shared):not(.suggestion) > a.more{
    background-image: url('../img/star2.svg'), url('../img/heart.svg'), url('../img/talk.svg');
}

ol#resources > li.shared:not(.saved):not(.suggestion) > a.more{
    background-image: url('../img/star.svg'), url('../img/heart2.svg'), url('../img/talk.svg');
}

ol#resources > li.suggestion:not(.saved):not(.shared) > a.more{
    background-image: url('../img/star.svg'), url('../img/heart.svg'), url('../img/talk2.svg');
}

ol#resources > li.saved.shared:not(.suggestion) > a.more{
    background-image: url('../img/star2.svg'), url('../img/heart2.svg'), url('../img/talk.svg');
}

ol#resources > li.saved.suggestion:not(.shared) > a.more{
    background-image: url('../img/star2.svg'), url('../img/heart.svg'), url('../img/talk2.svg');
}

ol#resources > li.shared.suggestion:not(.saved) > a.more{
    background-image: url('../img/star.svg'), url('../img/heart2.svg'), url('../img/talk2.svg');
}

ol#resources > li.saved.shared.suggestion > a.more{
    background-image: url('../img/star2.svg'), url('../img/heart2.svg'), url('../img/talk2.svg');
}

ol#resources > li > a.more span{
  font-family: serif;
  font-weight: 900;
  border-radius: 1.5em;
  box-shadow: 0 0 0 .125em var(--txt1);
  padding: 0 .5em 0;
  margin: 0 0 0 .35em;
  box-sizing: border-box;
}

ol#resources > li > a:hover{
  box-shadow: var(--shadow1)
}


form#filterForm span.count,
form#developersFilter span.count{
  display: none;
  color: #999;
  font-weight: 100;
  padding-left: .25em;
}

ol#resources > li .date{
  color: #999;
  font-weight: 100;
  position: absolute;
  top:  -1.25em;
  left: .5em;
  text-align: left;
  width: 100%;
  overflow: hidden;
}

ol#resources ul{
  margin-left: 4em;
  min-height: 2em;
  width: calc(50% - 2em);
  display: inline-block;
  vertical-align: top;
}

ol#resources ul.topics{
  text-align: right;
  margin-left: 0;
}

ul.info > li:not(.following) .unfollow,
ul.info > li.following .follow{
  display: none;
}

ol#developers a.developer, ol#developers .close{
  display: none;
}

ol#developers > a.developer{
  font-size: .9em;
  padding-right: .75em;
}

ol#developers ul.topics li.boxed,
ol#resources  ul.topics li.boxed,
ol#resources  ul.developers li.boxed{
  box-shadow: 0 0 0 2px var(--txt1);
}

ol#developers div.front{
  font-size: .95em;
  max-width: none;
}

ol#developers div.front h2{
  padding: 0 .5em 0 0;
  font-weight: 100;
}

ol#developers div.front span.location{
  font-weight: 100;
  padding-right: .5em;
  white-space: nowrap;
}

ol#developers div.front img{
  border-radius: 500px;
}

form#search ul.profiles div.header,
ol#developers > li div.header{
  display: block;
  float: none;
  border: none;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border-radius: 1.5em;
  cursor: pointer;
  color: black;
  background: none;
  float: right;
  width: calc(100% - 3.5em);
}

form#search div.photo{
  float: left;
  overflow: hidden;
  position: relative;
  max-width: 150px;
  margin: .75em 0;
  height: 3em;
  width: 3em;
  border-radius: 900px;
}

form#search h2.name{
  padding-top: .25em;
}

ol#developers > li.boxed.following div.header{
  background-image: url('../img/following.svg');
}

ol#developers > li .front div.photo{
  border-radius: 900px;
  width: 3em;
  height: 3em;
  cursor: pointer;
  margin: .75em 0;
}

ol#developers span.age, ol#developers span.shares{
  display: none;
}

ol#developers ul.topics{
  width: calc(99% - 4.5em);
  font-size: .85em;
  margin: .25em 0 0 .5em;
}

ol#developers ul.topics li{
  padding: .25em;
  margin: 0 .5em .5em 0;
  max-width: calc(100% - .5em);
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: .25em;
  opacity: .85;
}

ol#developers > :not(.boxed) ul.topics li:not(.boxed):not(.favorites):nth-child(n+4){
  display: none;
}

ol#resources ul.topics li{
  padding: .5em .75em;
  margin: 0 .5em .5em 0;
}

ol#resources ul li:hover{
  box-shadow: var(--shadow1);
}

ol#resources ul.developers li{
  margin: .5em .5em 0 0;
  height: 4.5em;
  width: 4.5em;
  display: inline-block;
  cursor: pointer;
  border-radius: 3em;

}

ol#resources ul.developers li:not(.boxed){
  box-shadow: var(--shadow1);
}

ol#resources ul.developers li.suggestion{
  padding: .25em 1.75em .5em .25em;
  margin-right: 0;
  background: url('../img/talk2.svg') no-repeat 100% -.25em;
  background-size: 1.75em;
  border-radius: 50% .5em 50% 50%;
  box-shadow: none;
}

form#search li.developer img,
ol#resources ul.developers li img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

ol#resources ul.developers li.suggestion img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #75D0FF;
}

ol#resources ul.developers li.suggestion.boxed img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #75D0FF;
  box-shadow: 0 0 0 2px var(--txt1);
}

form#topicsFilter, form#filterForm,
form#developersFilter, form#resourcesFilter{
    text-align: left;
    padding: .5em 3em .5em 1.25em;
}

body.filtersOpen > .options,
body.filtersOpen > .filtersOpen {
    width: calc(90% - 8em);
}
body.filtersOpen.topics > .options,
body.filtersOpen.topics > .filtersOpen {
  margin-left: 0;
}

body.filtersOpen div.bottom{
  width: calc(85% - 6em);
}

body.filtersOpen form#topicsFilter,
body.filtersOpen form#filterForm,
body.filtersOpen form#resourcesFilter,
body.filtersOpen form#developersFilter{
    padding: 1.5em 1em 1em 1em;
    position: fixed;
    background: var(--bg1);
    top: 50px;
    right: 0;
    width: calc(15% + 6em);
    box-sizing: border-box;
    height: calc(100% - 50px);
    box-shadow: var(--shadow1);
    overflow-y: scroll;
    overflow-x: auto;
    z-index: 1;
}

body.filtersOpen form#filterForm::-webkit-scrollbar,
body.filtersOpen form#topicsFilter::-webkit-scrollbar,
body.filtersOpen form#resourcesFilter::-webkit-scrollbar,
body.filtersOpen form#developersFilter::-webkit-scrollbar {
  display: none;
}

form#filterForm > div,
form#topicsFilter > div,
form#resourcesFilter > div,
form#developersFilter > div{
    clear: both;
    margin-bottom: .5em;
}

form#filterForm > div > div {
  padding: .25em;
  margin: 0 -.25em;
  border-radius: 1em;
  background: var(--bg2);
}

form#filterForm > div > div > div:nth-child(n+2) {
  padding-top: .5em;
}

form#topicsFilter h2, form#filterForm h2,
form#resourcesFilter h2, form#developersFilter h2{
    font-size: 1.2em;
    margin:  1em 0 .25em;
    text-align: left;
    /* background: #eee; */
    border-radius: 500px;
}

form#topicsFilter .button, form#filterForm .button,
form#resourcesFilter .button, form#developersFilter .button{
    clear: none;
    padding: .5em .75em;
    margin: 0 .25em;
    font-weight: 500;
    border: none;
    background: none;
    font-size: .8em;
}

form#topicsFilter div > br, form#filterForm div > br,
form#resourcesFilter div > br, form#developersFilter div > br{
  display: none;
}

form#FilterForm div.all > br,
form#topicsFilter div.all > br,
form#filterForm div.all > br,
form#developersFilter div.all > br{
  display: block;
  height: 1em;
  content: ' ';
}

form#topicsFilter h2 .button,
form#filterForm h2 .button,
form#developersFilter h2 .button{
    float: right;
    font-size: .7em;
    font-weight: unset;
    letter-spacing: normal;
}

form#topicsFilter h2 .button.clear,
form#filterForm h2 .button.clear,
form#developersFilter h2 .button.clear{
    float: none;
}

#filterForm img.search {
  width: 1.5em;
}

body:not(.filtersOpen) form#filterForm,
body:not(.filtersOpen) form#topicsFilter,
body:not(.filtersOpen) form#filterForm,
body:not(.filtersOpen) form#developersFilter{
    margin-left: -9999px;
    position: fixed;
}

form#filterForm div.topics:not(.all) label.nonfavorites:not(.checked),
form#developersFilter div.topics:not(.all) label.nonfavorites:not(.checked){
  display: none;
}

form#filterForm div.collapsed > *:not(h2),
form#developersFilter div.collapsed > *:not(h2) {
  display: none;
}

form#topicsFilter input[type=checkbox],
form#developersFilter input[type=checkbox],
form#filterForm input[type=checkbox]{
    width: 1em;
}

div.resourcesInfo, div.developersInfo {
  text-align: left;
  margin: 1.25em 4.5em 0 1.25em;
}

div.topicsInfo {
  text-align: justify;
  font-weight: 100;
  margin: 0 0 10px 1.25em;
  display: block;
  line-height: 40px;
}

div.options{
  margin: 1em;
  text-align: left;
  margin-top: 6em;
}

div.developers div.options{
  margin-bottom: 0;
}

div.options *{
  padding: .25em .25em .25em .5em;
  margin:  .25em;
  border-radius: 2em;
  display: inline-block;
  background: var(--bg2);
}

div.options span.more,
div.options .clear, div.options .clearAll, button.sortInfo{
  padding: 0 .5em;
  margin: 0 0 0 .25em;
  background: var(--secondary);
  cursor: pointer;
  line-height: 1.5em;
}

div.options span.more,
button.sortInfo, div.options .clearAll{
  padding: .4em .8em;
  font-size: .85em;
  font-weight: 500;
}

div.options.minimal span:not(.more):nth-child(n+4),
div.options.minimal span.more:nth-child(-n+4){
  display:none;
}

div.options.disabled *{
  display: none;
}

div.shortcuts{
  width: calc(100% - 4em);
  clear: both;
  margin: 1em 0 0 2em;
  text-align: left;
}

.filtersOpen div.shortcuts{
    display: none;
}

div.shortcuts button{
  width: calc(25% - .67em);
  margin: .5em .5em 0 0;
  border-radius: 1em;
  background-image: var(--wash1);
  padding: .5em 0;
  vertical-align: top;
}

div.shortcuts button:last-child{
    margin-right: 0;
}

div.shortcuts button.suggestions{
  background-color:#85E0FF;
}

div.shortcuts button.following{
  background-color: #FA9343;
}

div.shortcuts button.favorites{
  background-color:#FF5671;
}

div.shortcuts button.saved{
  background-color: var(--primary);
}

div.preview div.edit {
  font-size: 14px;
}

div.edit div.form-group{
  display: block;
  width: 92%;
  padding: 0 4% 1em;
  margin: 0;
  text-align: left;
}
div.edit div:after, div.edit label.radius:after,
div.edit label.bgcolor:after,
div.edit label.bgopacity:after{
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}

div.edit div.form-group h2{
  font-size: 1.2em;
  padding: 0 0 .25em;
}

div.edit div.form-group h2 a{
  color: var(--txt1);
  text-decoration: underline
}

div.edit div.form-group span.toggle{
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 4px 8px;
  font-size: .8em;
  /* margin: 0; */
}

div.edit input,
div.edit textarea,
div.edit select,
div.edit button,
#settings input,
#settings select,
#settings textarea {
  width: calc(100% - 20px);
  margin: .25em 0;
  padding:  4px 8px;
  border: 1px solid #ccc;
  border-radius: .5em;
  background: var(--bg1);
  font-size: 14px;
}

#editResource, #settings, #login, #suggestionsModal{
  min-height: 10em;
  max-height: 90vh;
  font-size: 14px;
}

#editResource label, #settings label {
  margin: 0 0 1em;
  display: flow-root;
  position: relative;
  line-height: 1em;
  clear: both;
}

#editResource label.disabled {
  opacity: 40%;
}

#editResource label input,
#editResource label textarea,
#settings label input,
#settings label select,
#settings label textarea {
  display: inline-block;
  float: right;
  width: calc(99% - 5.5em);
  box-sizing: border-box;
  margin: 0 0 .5em;
}

#editResource label span.required{
    font-size: .75em;
    opacity: .5;
    position: absolute;
    left: 0;
    top: 1.5em;
}

#editResource label.description {
  position: relative;
  min-height: 2.6em;
  background: var(--bg2);
  border-radius: .5em;
  padding: 0 .5em;
  box-sizing: border-box;
}

#editResource label.description div.display{
  overflow-y: auto;
  width: 100%;
  height: 100%;
  font-size: 14px;
  line-height: 1.5em;
}

#editResource label.description div.display p{
  margin: .75em 0;
}

#editResource label.description textarea {
  display: none;
}

#editResource label.description a.button {
  height: 1.5em;
  width: 1.5em;
  line-height: 1.5em;
  text-align: center;
  min-width: 1.5em;
  float: right;
  clear: right;
  position: absolute;
  bottom: .2em;
  right: .2em;
  font-size: 130%;
}

#editResource label.description a.button.done {
  position: relative;
  border-radius: .5em;
  display: block;
  padding: 0 .5em;
  line-height: 2em;
  height: 2em;
  width:4em;
  margin: .75em 0 .25em;
  font-size: 90%;
}

#editResource label.description.edit{
    overflow: auto;
}


#editResource label.description:not(.edit) a.button.done,
#editResource label.description.edit a.button.edit {
  display: none;
}

#editResource label.description.edit div.display {
  width: 39%;
  position: absolute;
  line-height: 1.5em;

}

#editResource label.description.edit textarea {
  display: block;
  width: 59%;
  height: 10em;
  box-sizing: border-box;
  line-height: 1.5em;
  float: right;
  margin: 1em 0 0;
  resize: vertical;
  border-radius: .5em;
}

#editResource label.archive {
  background: var(--bg2);
  border-radius: .5em;
  padding: .25em;
  cursor: pointer;
}

#editResource:not(.deleteEnabled) label.archive{
  display: none;
}

#editResource label.archive input{
  width: auto;
  float: left;
  margin: .5em;
}

.modalContainer #suggestionsModal button,
#editResource input[type=button],
#editResource input[type=submit],
#settings button{
  width: calc(50% - .7em);
  margin: 0 0 0 1em;
  box-sizing: border-box;
  display: inline-block;
  cursor: pointer;
}

.modalContainer #suggestionsModal button.done,
#settings button.reset,
#editResource input[type=button].cancel{
    background: var(--secondary);
    margin: 0;
}

#editResource input[type=submit]{
  float: right;
}

#editResource.suggest label:not(.profileSearch){
  display: none;
}

div.edit textarea{
  height: 10em;
  line-height: 1.5em;
  font-size: 16px;
}
div.edit input[type=checkbox],div.edit input[type=radio]{
  display: inline;
  width: auto;
  margin: 0 4px 0 0;
  font-size: 12px;
}
div.edit input#photo{
  font-size: 12px;
  line-height: 22px;
}

div.edit label.radius, div.edit label.bgcolor,
div.edit label.bgopacity, div.edit label.bgimage,
div.edit label.photo, div.edit label.text{
  margin: .25em 0 .25em 8px;
  clear: both;
  width: calc(100% - 8px);
  display: block;
  text-align: left;
}

div.edit div.radius, div.edit div.bgopacity, div.edit .text input,
div.edit input#bgcolor, div.edit input#photo, div.edit select, div.edit button.rotate{
  float: right;
  clear: right;
  width: calc(100% - 175px);
  height: 6px;
  padding: 0;
  margin: 8px 10px;
  padding:  2px 8px;
}

div.edit select, div.edit input#bgcolor, div.edit input#photo,
div.edit .text input, div.edit button.rotate{
  height: 22px;
  width: calc(100% - 157px);
  margin: 0 0 8px;
}

div.edit select{
  width: calc(100% - 141px);
  height: 24px;
}

div.edit button.rotate{
  width: calc(100% - 139px);
  height: 24px;
  font-size: 12px;
}

div.edit input#bgcolor{
  margin-bottom: 0;
}

div.edit input#radius, div.edit input#bgopacity{
  display: none;
}

div.edit label.remotebgimage {
  display: none;
}

div.edit .ui-slider .ui-slider-handle{
  height: 1em;
  top: -.2em;
}

.topics input[type=checkbox], .category-4 input[type=checkbox], .developers input[type=checkbox]{
  display: inline;
  width: auto;
  margin-right: .25em;
}
form#filterForm div.filterSearch label.textSearch{
  width: 75%;
  display: inline-block;
  padding-top:10px;
}

form#filterForm label:not(.clearAll), div.edit .topics label,
.category-4 label, div.front ul.topics li{
  width: auto;
  margin: .25em .25em .25em 0;
  padding: .3em .6em .2em;
  background:none;
  border-radius: .5em;
  color: black;
  display: block;
}

form#filterForm label.order{
  display: inline-block;
  float: left;
}

#filterForm .age label{
  border: none;
  cursor: pointer;
}

form#developersFilter .all:not(.collapsed) label.nonfavorites,
form#developersFilter :not(.collapsed) label.nonfavorites.selected,
form#filterForm .all:not(.collapsed) label.nonfavorites,
form#filterForm :not(.collapsed) label.nonfavorites.checked{
  display: block;
}
.textSearch input[type=reset] {
  width: 2em;
  padding: 0.5em 0.1em;
}

form#DevelopersFilter button.toggle,
form#filterForm button.toggle{
    clear: both;
    width: auto;
    font-size: 12px;
}

#topicsFilter .topics span.count {
  display: none;
}

form#editResource a.url{
  display: block;
  width: 100%;
  margin-bottom: .75em;
  word-break: break-all;
  line-height: 1.25em;
  overflow: hidden;
  text-overflow: ellipsis;
}

form#editResource .topics,
form#editResource .profiles{
  float: right;
  width: calc(99% - 4.5em);
  clear: both;
  margin: .25em 0 0 0;
}

form#editResource div.categories label{
  display: inline-block;
  padding: 0 .5em 0 0;
  border: none;
  width: auto;
  margin: .25em;
  background: rgba(255, 255, 255, .6);
}

form#editResource .topics div{
  display: none;
  line-height: 1em;
}

form#editResource .topics div > *{
  border: none;
  padding: 0 1.25em 0 0;
  display: inline-block;
  height: 1.2em;
  vertical-align: middle;
  border-radius: 0;
}

form#editResource .topics div.match,
form#editResource .topics div.selected,
form#editResource .topics div.default,
form#editResource .topics div.current,
form#editResource .topics div.url{
  display: inline-block;
}

form#editResource label .topics input{
  display: none;
}

form#editResource label .topics label{
  float: none;
  content:"";
  padding: 0 .15em;
  margin: -.05em 0 .05em 0;
  width: 1em;
  background: url('../img/star.svg') no-repeat 0 0;
  background-size: 1em;
  box-shadow: none;
}

form#editResource .profiles > *{
  display: inline-block;
  background: var(--bg2);
  border-radius: 2em;
  padding: .1em .75em;
  margin: .5em .5em 1em 0;
}

form#filterForm div.personal label .count{
  font-size: 1.175em;
}


#filterForm div.age label.checked{
  background: var(--secondary);
}

div.sort input{
  width: 1em;
  vertical-align: middle;
}

form#editResource label .topics input.save:checked + label.save,
form#filterForm div.personal label.saved.checked{
  background-image: url('../img/star2.svg');
}

form#editResource label .topics input.share + label.share,
form#filterForm div.personal label.shared{
  background-image: url('../img/heart.svg');
}

form#editResource label .topics input.share:checked + label.share,
form#filterForm div.personal label.shared.checked{
  background-image: url('../img/heart2.svg');
}

form#filterForm div.personal label.archived{
  background-image: url('../img/archive.svg');
}

form#filterForm div.personal label.archived.checked{
  background-image: url('../img/archive2.svg');
}


form#filterForm div.personal label.suggestion{
  background-image: url('../img/talk.svg');
}

form#filterForm div.personal label.suggestion.checked{
  background-image: url('../img/talk2.svg');
}

form label img.handle{
  width: 12px;
  padding: .2em .4em .2em .6em;
  cursor: move;
}
form .topics label img.handle, form .category-4 label img.handle{
  width: 10px;
  margin: -.3em -.6em -.1em 0em;
}
div.front ul.topics li{
  float: left;
  margin: 0 .2em .3em;
  background: rgba(255,255,255,.6);
}

div.modalContainer{
  text-align: center;
  width: 100%;
  position: fixed;
  background:var(--bg3);
  z-index: 2000;
  cursor: pointer;
  padding: 6em 0;
  display: none;
  top: 0;
  bottom: 0;
}

div.modalContainer form,
div.modalContainer > div {
  background: var(--bg1);
  opacity: 1;
  width: 85vw;
  max-width: 800px;
  padding: 2em;
  border-radius: 1em;
  margin: 0 auto;
  float: none;
  text-align: left;
  line-height: 1.75em;
  overflow-y: auto;
  cursor: auto;
  box-shadow: var(--shadow1);
  position: fixed;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -35%);
  box-sizing: border-box;
}

form#search {
    top: calc(50px + 1em);
    left: 1em;
    transform: none;
    width: calc(100% - 2em);
    max-width: none;
    max-height: calc(100vh - 100px);
}

form#search .results li:not(.match):not(.more):not(.suggestion){
  display: none;
}

form#search .navigate div{
  display: none;
  margin-top: 1em;
  text-align: right;
}

form#search li.topic, form#search .suggest button,
form#search .navigate li, ul.profiles li{
  width: auto;
  padding: .25em .75em;
  display: inline-block;
  margin: 1em .5em 0 0;
  background: var(--bg2);
  font-size: 1em;
  border-radius: 500px;
  cursor: pointer;
}

form#search .navigate li{
  box-sizing: border-box;
  width: calc(33.3% - .75em);
  text-align: center;
  font-size: 1em;
  padding: .75em 0;
  line-height: 1.25em;
  background: var(--secondary);
}

form#search .navigate li span{
  padding-left: .5em;
  color: var(--secondary);
  font-size: .9em;
}

form#search .navigate .developers li{
  width: calc(50% - .75em);
}

form#search .results li.selected{
  border: 2px solid var(--txt1);
}

form#search .suggest button{
  padding: .1em .75em;
  margin: 0;
  background: #eee;
  min-height: 1em;
}

form#search div.suggest{
  padding: .5em 0 0;
  display: none;
}

form#search div.suggest.visible{
  display: block;
}

form#search .results{
  min-height: 1em;
  width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

form#search input[type="submit"]{
  display: none;
}

div.modal span.community_search{
  display: none;
}
div.modal.community_search span.community_search{
  display: inline;
}
div.modal.community_search span.no_community_search{
  display: none;
}

div.modal span.public_search{
  display: none;
}
div.modal.public_search span.public_search{
  display: inline;
}
div.modal.public_search span.no_public_search{
  display: none;
}

div.modalContainer div h1, div.modalContainer div h2{
  text-align: left;
  margin: 0;
  padding: .75em 0 0;
  font-size: 1.5em;
}
div.modalContainer div h1{
  padding: 0;
  font-size: 1.75em;
}
div.modalContainer div h2 img{
  height: 1em;
}

div.modalContainer div a.devLink{
  display: block;
  padding: 0;
}

div.modalContainer div label{
  display: block;
  border-radius: 500px;
  padding: .1em .6em;
}

#suggestionsModal button,
div.modalContainer div button,
div.modalContainer form input[type="button"],
div.modalContainer form input[type="submit"],
div.modalContainer form > button{
  display: block;
  width: 100%;
  padding: .5em 0;
  margin: 2em 0 0 0;
  background-color: var(--primary);
  border: none;
  border-radius: 1.5em;
  font-size: 18px;
  border: none;
}

#login input:not([type="submit"]){
  width: 100%;
  box-sizing: border-box;
  margin: 1.5em 0 .5em;
  font-size: 16px;
}

#editResource input:disabled {
  opacity: .25;
  cursor: default;
}

#editResource.submit input[type="submit"] {
  opacity: 1;
  cursor: pointer;
}

/* Spinner */
div.loading{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: var(--bg3);
  z-index: 5000;
}
div.loading img{
  opacity: 1;
  position: absolute;
  top: calc(50% - 6vh - 6vw);
  left: calc(50% - 6vh - 6vw);
  width: calc(12vh + 12vw);
  height: calc(12vh + 12vw);
  margin: 0;
}
div.loading img, div.photoLoading img.spinner {
  animation:spin 3s linear infinite;
}

@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }



/* Dark mode */
@media (prefers-color-scheme: dark) {

    :root {
      --bg1: #333;
      --bg2: #444;
      --bg3: rgba(0,0,0,.75);
      --txt1: #eee;
      --wash1: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3));
      --wash2: linear-gradient(rgba(50,50,50,.7), rgba(50,50,50,.7));
    }

    body > div:not(.header) a:not(.filter) {
        color: #6cf;
    }
    body .navigation{
        background: #222;
    }
    body .navigation a:not(.selected){
        color: #999;
    }

    body ol#developers > li div.front h2 a{
      color: #eee;
      text-decoration: none;
    }


    body .profileButton, body .searchButton,
    body .settingsButton, body .filterButton,
    body .sortButton, body .addResourceButton{
            background: #999;
        }

    body div.bottom ul.info > li
    {
        background: #444;
    }

    body div.bottom ul.info > li li,
    body ul.info button{
        background: #555;
    }

    body div.topics div ul li.boxed{
        border: 2px solid #fff;
    }

    body ol#developers > li ul.topics li.boxed{
      box-shadow: 0 0 0 2px #fff;
    }

    body.filtersOpen form#topicsFilter,
    body.filtersOpen form#filterForm,
    body.filtersOpen form#developersFilter{
        background: #444;
    }
    form#developersFilter label{
        color: white;
    }
}

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

  .filtersOpen div.bottom{
     display: none;
  }
  div.searchLinks div button{
      font-size: 1.125em;
      padding: .75em .5em;
      margin-right: .5em;
      margin-left: .5em;
  }

  div.developButton a.button{
      padding: .75em 0;
    }
  div.preview div.header h1{
    margin: 0 auto;
    padding-top: .5em;
    width: 92vw;
  }
  div.preview div.edit{
      width: 100%;
      max-width: 100%;
      float: none;
  }
  div.preview div.background,
  div.preview.signup div.background{
      float: none;
      margin: 2% 4%;
      position: relative;
      width: 92%;
      max-width: 92%;
      left: 0;
      height: auto;
  }
  div.preview div.front{
    font-size: calc(10px + .5vw);
  }
  div.preview div.back{
    font-size: calc(10px + .25vw);
  }

  span.topics{
      font-size: 1.2em;
  }

  span.topics div h2{
    margin: .5em;
    font-size: 1.2em;
  }

  div.topics .topics div ul li{
    height: 3em;
    line-height: 2.9em;
    padding: 0 1em;
  }

  li.longName br.longName{
    display: none;
  }

  div.topics .topics div ul li.longName .handle{
    margin-top: -.25em;
  }

  div.topics div ul .handle{
    display: none;
  }

  body.fullPane ul.info .title{
      height: 4.5em;
      min-height: 4.5em;
      padding-top: 1.75em;
  }

  div.bottom ul.info > li {
    min-height: 27.25em;
  }

  ul.info ul.resources.default{
    min-height: 12.75em;
    padding-top: .5em;
  }

  ul.info .title a:nth-child(n+4){
    display: none;
  }

  ul.info .title button{
      font-size: 1.8em;
  }

  ul.info button.fav, ul.info button{
      font-size: .95em;
  }

  ul.info .description{
      font-size: 1em;
      line-height: 3.25em;
    }
  body:not(.fullPane) ul.info .description{
      line-height: 2.5em;
    }


    ul.info ul.resources, ul.info .resourceNav{
       font-size: 1.2em;
       margin-bottom: 0;
    }

    ul.info ul.resources.default li{
       width: 100%;
       max-width: 100%;
       min-width: 100%;
       clear: both;
    }

    body.fullPane ul.info ul.resources:not(.default) > li{
      width: 100%;
      margin-right: 0;
    }

    body:not(.fullPane) ul.info ul.resources:not(.default) > li,
    body:not(.fullPane) ul.info ul.resources:not(.default) > li{
      margin-bottom: 0 ;
    }

    body:not(.fullPane) ul.info ul.resources:not(.default) > li,
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(4),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(3),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(2),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(2) ~ li:not(.more),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(3) ~ li:not(.more),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li,
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(4),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(3),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(2),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(2) ~ li:not(.more),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(3) ~ li:not(.more){
      width: calc(100% - 4.5em);
      max-width: none;
    }

    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(4) ~ li:not(.more),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-child(n+2):not(.more),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(4) ~ li:not(.more),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-child(n+2):not(.more){
      width: calc(100% - 3.7em);
      margin-right: 0;
      max-width: none;
    }

    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-child(n+2),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-child(n+2){
      display: none;
    }

    body:not(.fullPane) ul.info ul.resources:not(.default) > li.more:nth-child(n+4),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li.more:nth-child(n+4){
      display: block;
      margin-top: .3em;
    }

    div.topics div ul li span.badge{
      font-size: .75em;
    }


    div.profile a#update, .logo img{
        font-size: 3.5em;
    }

    .searchButton {
        height: 4em;
        width: 4em;
        line-height: 1em;
    }

    .filterButton, .sortButton{
        font-size: 1.375em;
    }

    span.addResourceButton{
        font-size: 1.7em;
        margin-right: -.75em;
    }

    .filterButton > *{
        width: 1.65em;
    }

    .profileButton{
        border-radius: 2em;
        font-size: 1.35em;
    }

    .profileButton.open{
        margin-left: calc(100vw - 13em);
        margin-block-start: -16.5em;
    }

    .profileButton img{
    }

    .settingsButton{
        height: 4em;
        width: 4em;
        line-height: 3.5em;
    }

    .filterButton > .filterCount{
        font-size: 1.1em;
    }

    form#editResource label.description div.display {
      max-height: 20em;
    }
    form#editResource label.description.edit div.display {
      width: 100%;
      position: relative;
      line-height: 1.75em;
    }
    form#editResource label.description.edit textarea {
      display: block;
      width: 100%;
      height: 10em;
      box-sizing: border-box;
      line-height: 1.5em;
      float: none;
      margin: .25em 0;
    }

    ol#resources > li{
      font-size: 1.1em;
      margin-left: .75em;
      margin-top: 2em;
      padding-bottom: 0;
    }

    ol#resources > li.date{
      max-width: 5em;
    }

    ol#resources > li a{
      white-space: nowrap;
      word-break: break-word;
      line-height: 1.4em;
    }

    ol#developers > li{
      width: 100%;
      margin: 3em 0 0 ;
    }

    ol#developers div.front{
      font-size: 1.25em;
    }

    ol#developers ul.topics li{
      font-size: 1.1em;
    }


    div.modalContainer form,
    div.modalContainer > div{
        padding: 2em .75em;
        width: 90vw;
        transform: none;
        top: 40px;
        left: 5vw;
    }

    form#editResource label .topics {
      width: 100%;
    }

    form#editResource label .topics div{
      line-height: 2em;
      margin-bottom: .5em;
    }

    form#editResource label .topics label{
      background-size: 2em;
      width: 2em;
      height: 2em;
    }
    form#editResource label .topics span{
      padding-bottom: .5em;
    }

    body.filtersOpen div.options,
    body.filtersOpen div.filtersOpen{
        margin-left: 0;
    }

    body.filtersOpen form#topicsFilter,
    body.filtersOpen form#filterForm,
    body.filtersOpen form#developersFilter{
        width: 100%;
        font-size: 1.5em;
        z-index: 1000;
    }
    body.filtersOpen form#topicsFilter,
    body.filtersOpen form#filterForm,
    body.filtersOpen form#developersFilter{
        padding-top: 1em;
    }

    body.filtersOpen div.navigation{
        width: 100%;
        margin-left: 0;
    }

    form#filterForm div:not(.personal):not(.sort) label,
    form#topicsFilter div:not(.sort) label,
    form#developersFilter div:not(.sort) label{
        padding: .5em;
    }

    div.resourcesInfo,
    div.developersInfo{
        font-size: 1.25em;
    }

  div.shortcuts button{
      font-size: .9em;
      padding: 1.5em .25em;
  }



    ol#resources ul{
      margin: 0 0 0 3em;
    }

    ol#resources ul.topics{
      text-align: left;
      margin: 1em 0 0 3em;
      width: 100%;
    }
}
@media only screen and (min-width: 500px) and (max-width: 899px) {
    ul.info ul.resources{
       font-size: 1.1em;
    }

    body.fullPane ul.info ul.resources li{
      width: calc(50% - .5em);
    }

    body.fullPane ul.info ul.resources li:nth-child(3n+3){
      margin-right: 1em;
    }

    body.fullPane ul.info ul.resources li:nth-child(even){
      margin-right: 0;
    }

    body:not(.fullPane) ul.info ul.resources:not(.default) > li,
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(4),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(4) ~ li:not(.more),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li,
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(4),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(4) ~ li:not(.more){
      width: calc(50% - 2.25em);
    }

    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-child(n+2),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-child(n+2){
      margin-right: 0;
    }

    ul.info ul.resources:not(.default) > li:nth-last-child(2),
    ul.info ul.resources:not(.default) > li:nth-last-child(2){
       width: 100%;
       margin: 0;
    }

    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(3),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(3) ~ li:not(.more),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(3),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-last-child(3) ~ li:not(.more) {
       width: calc(50% - .5em);
    }

    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-child(n+3),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li:nth-child(n+3){
      display: none;
    }

    body:not(.fullPane) ul.info ul.resources:not(.default) > li.more:nth-child(n+4),
    body:not(.fullPane) ul.info ul.resources:not(.default) > li.more:nth-child(n+4){
      display: block;
      margin-top: .3em;
    }

    div.profile a#update, .logo img{
        font-size: 2.5em;
    }

    ol#developers > li{
      width: calc(49% - 1.75em);
    }

    body.filtersOpen ol#developers > li{
      width: calc(100% - 1.75em);
    }

    form#editResource label .topics label{
      font-size: 1.45em;
    }
}
@media only screen and (min-width: 900px) {
  div.modalContainer form, div.modalContainer div {
    font-size: 18px;
  }
  form#editResource label.description.edit textarea,
  form#editResource label.description.edit div.display {
    width: 49.5%;
  }
  div.navigation{
      font-size: 18px;
  }
  ul.info > button{
    width: calc(10em + 5vw);
  }
  ul.info button br.compact{
      display: none;
  }

  div.options{
    font-size: .9em;
  }

  div.topics span.topics,
  form#developersFilter,
  form#filterForm,
  ol#resources{
      font-size: 13.6px;
  }
}
@media only screen and (min-width: 1280px) {

  .profileButton, .searchButton, .settingsButton,
  .filterButton, .sortButton{
    font-size: 18.25px;
  }

  span.addResourceButton{
    font-size: 22.8125px;
  }

  div.profile div.front, div.profile div.back{
    width: 1200px;
    font-size: 35.6px;
  }
  div.profile div.back{
    font-size: 29.2px;
  }
  div.preview.full div.front ul,
  div.profile div.front ul{
    font-size: 52.2px;
  }
  div.preview div.header h1{
    font-size: 33px;
    letter-spacing: 50px;
    padding-left: 50px;
  }
  div.preview div.header h1 img{
    height: 1.25em;
    margin-right: 50px;
  }

  body.filtersOpen > div.options,
  body.filtersOpen > div.filtersOpen,
  body.filtersOpen div.bottom{
    width: calc( 100% - 350px);
  }

  body.filtersOpen form#topicsFilter,
  body.filtersOpen form#filterForm,
  body.filtersOpen form#developersFilter{
    width: 350px;
  }

  ul.info > li{
      font-size: 18px;
  }
}
@media only screen and (min-width: 1765px) {
  ol#resources > li{
    margin-top: 2em;
  }
}