/*! 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);
  --other:#93B050;
  --languages:#75D0FF;
  --frameworks:#A36F92;
  --platforms:#FF5671;
  --interests:#FA9343;
  --following: #D0C9B9;
  --following: rgba(128,128,128,.6);
}

.hidden{
  display: none;
}

body {
      font-family: sans-serif;
      text-align: center;
      font-size: calc(8px + .8vw);
      -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);
}
    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.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(.home) div.about,
	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 .interests{
      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.languages button{
      box-shadow: 0 0 .2em rgba(119, 221, 255, 1);
      background: none;
    }
    div.searchLinks div.languages button:hover,
    div.searchLinks div.languages button:focus{
      box-shadow: 0 0 .6em rgba(119, 221, 255, 1);
    }
    div.searchLinks div.languages 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.frameworks button{
      box-shadow: 0 0 .2em rgba(127, 55, 104, .8);
      background: none;
    }
    div.searchLinks div.frameworks button:hover,
    div.searchLinks div.frameworks button:focus{
      box-shadow: 0 0 .6em rgba(127, 55, 104, .8);
    }
    div.searchLinks div.frameworks button.selected{
      background: rgba(127, 55, 104, .8);
      box-shadow: 0 0 0 .1em rgba(127, 55, 104, .8);
    }

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

    div.searchLinks div.other button{
      box-shadow: 0 0 .2em rgba(128, 128, 128, 1);
      background: none;
    }
    div.searchLinks div.other button:hover,
    div.searchLinks div.other button:focus{
      box-shadow: 0 0 .6em rgba(128, 128, 128, 1);
    }
    div.searchLinks div.other 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{;
      padding: 50px 0 0;
      min-height: calc(100vh - 50px);
    }

    div.about{
      padding: 0;
      box-sizing: border-box;
      width: 100%;
      text-align: justify;
      margin: calc(50px + 1.25em) auto 0;
      top: -50px;
      left: 0;
      min-height: 100vh;
    }

    div.about form#aboutFilter{
      display: none;
    }

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

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

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

    div.about .topics > div.filter {
      display: none;
    }

    div.about .topics.filtered > div{
      width: 100%;
    }

    div.about .topics > div.interests{
      clear: both;
      margin: 2px 0 0;
      width: 100%;
    }

    div.about .topics div.other{
      width: 100%;
    }

    div.about .topics:not(.filtered) div.filter ~ div.other{
      width: 33.2%;
    }

    span.topics div h2{
        font-size: 1em;
        line-height: 1em;
        margin: 0 0 .4em;
    }

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

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

    div.about div ul:not(.showAll) li.nonfavorites{
      font-size: 0;
      opacity: 0;
      display: none;
    }

    div.about 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(--other);
      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=languages],
    #suggestionsModal .metadata a.filter[data-category=languages],
    span.topics div.languages ul li,
    ol#developers ul.topics li[data-category=languages],
    ul.info ul.resources a.filter[data-category=languages],
    ol#resources ul.topics li[data-category=languages]{
      background-color: var(--languages);
    }

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

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

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

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

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

    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(--other);
    }

    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.languages ul li.selected span.badge,
    span.topics div.frameworks ul li.selected span.badge,
    span.topics div.platforms ul li.selected span.badge,
    span.topics div.interests ul li.selected span.badge{
      border: 2px solid var(--txt1);
      padding: 0;
    }

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

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

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

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

    span.topics div li .handle{
      width: .9em;
      padding: .55em .4em;
      margin: -.5em -.35em -.25em -.95em;
      cursor: move;
      opacity: .3;
      display: none;
    }

    span.topics div li.selected .handle{
      display: inline-block;
    }

    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:hoverdiv.about button:focus, div.about 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.about 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.custom > img.sort{
        visibility: hidden;
        margin-right: -.9em;
    }

    .sortButton.custom > img.order{
        margin-right: .55em;
    }

    .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-radious: 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 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: 0 0 0 .45em;
      box-sizing: border-box;
      position: absolute;
      top: 5.25em;
      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.about 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: 3.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.selected{
  border: 2px solid var(--txt1);
}

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

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

ol#resources > li{
  margin: .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:hover{
  box-shadow: var(--shadow1)
}

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

ol#resources > li .date{
  color: #999;
  font-weight: 100;
  position: absolute;
  bottom: .75em;
  right: 1em;
  text-align: right;
  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.selected,
ol#resources  ul.topics li.selected,
ol#resources  ul.developers li.selected{
  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.selected.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{
  display: none;
}

ol#developers ul.topics{
  width: calc(99% - 4.5em);
  font-size: .875em;
  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: .5em;
  opacity: .9;
}

ol#developers > :not(.selected) ul.topics li:not(.selected):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(.selected){
  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.selected img{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #75D0FF;
  box-shadow: 0 0 0 2px var(--txt1);
}

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

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

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

body.filtersOpen form#topicsFilter,
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#topicsFilter::-webkit-scrollbar,
body.filtersOpen form#resourcesFilter::-webkit-scrollbar,
body.filtersOpen form#developersFilter::-webkit-scrollbar {
  display: none;
}

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

form#topicsFilter 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#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#resourcesFilter div > br, form#developersFilter div > br{
  display: none;
}

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

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

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

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

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

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

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

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

div.developersInfo {
  display: none;
}

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

div.options{
  margin: 1em;
  text-align: left;
  height: 4em;
}

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 .clear, div.options .clearAll, button.sortInfo{
  padding: 0 .5em;
  margin: 0 0 0 .25em;
  background: var(--secondary);
  cursor: pointer;
  line-height: 1.5em;
}

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

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: 16px;
}

#editResource label, #settings label {
  margin: 0 0 1.75em;
  display: block;
  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(90% - 6em);
  box-sizing: border-box;
  margin: 0 0 1em;
}

#editResource label span.required{
    font-size: .75em;
    opacity: .5;
}

#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;
}

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], .interests input[type=checkbox], .developers input[type=checkbox]{
  display: inline;
  width: auto;
  margin-right: .25em;
}

#resourcesFilter label,
#developersFilter label,
#topicsFilter label,
.topics label, .interests label, div.front ul.topics li{
  width: auto;
  margin: .25em .25em .25em 0;
  padding: .3em .6em .2em;
  background:none;
  border-radius: .5em;
  color: black;
  border: 1px solid var(--secondary);
  display: inline-block;
}

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

form#developersFilter .all:not(.collapsed) label.nonfavorites,
form#developersFilter :not(.collapsed) label.nonfavorites.selected,
form#resourcesFilter .all:not(.collapsed) label.nonfavorites,
form#resourcesFilter :not(.collapsed) label.nonfavorites.checked{
  display: inline-block;
}

form#developersFilter label.nonfavorites,
form#resourcesFilter label.nonfavorites{
  display: none;
}

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

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(90% - 80px);
  clear: both;
  margin: -.5em 0 .75em;
}

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,
form#resourcesFilter div.personal input,
form#resourcesFilter div.age 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#resourcesFilter div.personal label{
  background: url('../img/star.svg') no-repeat 0 0;
  background-size: 1.5em;
  box-sizing: border-box;
  margin: .5em 0 0;
  padding: 0 .25em .25em 1.65em;
  border: none;
  text-align: left;
  font-size: .75em;
  border-radius: 0;
}

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

form#resourcesFilter div.personal {
  margin: 0 .25em 1em .25em;
}

div.sort{
  font-size: .8em;
  box-sizing:border-box;
  margin:  .15em 2.5em 1.5em .25em;
}

div.sort label{
  border: none;
  padding: .5em;
  margin: 0;
  min-width: 1em;
  text-align: center;
  cursor: pointer;
}


div.sort label.checked,
#resourcesFilter 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#resourcesFilter div.personal label.saved.checked{
  background-image: url('../img/star2.svg');
}

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

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

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

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


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

form#resourcesFilter 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 .interests 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.about div ul li.selected{
        border: 2px solid #fff;
    }

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

    body.filtersOpen form#topicsFilter,
    body.filtersOpen form#resourcesFilter,
    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.1em;
  }

  span.topics div h2{
    margin-left: 2vh;
  }

  div.about .topics div ul li{
    box-sizing: border-box;
    width: 29.5%;
    vertical-align: middle;
  }

  div.about .topics div ul li.longName{
    white-space: normal;
    line-height: 1.2em;
  }

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

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

  span.topics div:not(.other):not(.interests) ul li{
    width: 92%;
  }

  div.about div ul li .handle{
    float: left;
    height: 1.25em;
    margin-left: -.8em;
    margin-right: -.5em;
    margin-top: -.125em;
  }

  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.about 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.3em;
      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 .5em;
        width: 90vw;
    }

    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.filtersOpen{
        margin-left: 0;
    }

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

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

    form#resourcesFilter 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{
      width: calc(1000% - 3em);
      margin: 0 0 0 3em;
    }

    ol#resources ul.topics{
      text-align: left;
      margin: 1em 5em 0 0;
      width: 100%;
    }
}
@media only screen and (min-width: 500px) and (max-width: 899px) {
    div.sort input{
      display:none;
    }
    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);
    }


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

    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.shortcuts button{
    font-size: 1.1em;
  }

  div.options{
    font-size: .9em;
  }
}
@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;
  }
  div.about span.topics{
      font-size: 18px;
  }

  form#developersFilter,
  form#resourcesFilter,
  ol#resources{
      font-size: 17px;
  }

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

  body.filtersOpen form#topicsFilter,
  body.filtersOpen form#resourcesFilter,
  body.filtersOpen form#developersFilter{
    width: 485px;
  }

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