#navigation *, #navigation *::before, #navigation *::after {
  box-sizing: unset; }

#navigation button {
  box-sizing: border-box; }

.ReactModalPortal .modal-content-close-img {
  padding-top: 0; }

body {
  font-size: 16px;
  line-height: unset; }

/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.button {
  display: inline-block;
  margin: .5em 0;
  border: 0;
  border-radius: .5rem;
  background-color: #4d97ff;
  cursor: pointer;
  padding: 1em 1.25em;
  color: white;
  font-size: .8rem;
  font-weight: bold;
  /* USER BUTTON STATES */
  /* DATA BUTTON STATES */ }
  .button:focus {
    outline: none; }
  .button.white {
    background-color: white;
    color: #4d97ff; }
  .button.pass {
    background-color: #0fbd8c; }
  .button.fail {
    background-color: #ffab1a; }
  .button:disabled {
    box-shadow: none; }
  .button.large {
    border-radius: .25rem;
    font-size: 1rem;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: .75rem 1.25rem .8125rem; }
  .button.icon-right img {
    height: 1.25rem;
    margin-bottom: -.25rem;
    margin-left: .5rem;
    margin-right: -.25rem; }

#navigation *, #navigation *::before, #navigation *::after {
  box-sizing: unset; }

#navigation button {
  box-sizing: border-box; }

.ReactModalPortal .modal-content-close-img {
  padding-top: 0; }

body {
  font-size: 16px;
  line-height: unset; }

/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 768px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.row label {
  font-weight: 500; }

.input {
  transition: all .5s ease;
  margin-bottom: .75rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  background-color: #fafafa;
  padding: 0 1rem;
  height: 3rem;
  color: #575e75;
  font-size: .875rem;
  /* IE10/11-specific style resets */ }
  .input:focus {
    transition: all .5s ease;
    outline: none;
    border: 1px solid #4d97ff; }
  .input.fail {
    border: 1px solid #ffab1a; }
  .input.pass {
    border: 1px solid #0fbd8c; }
  .input::-ms-reveal, .input::-ms-clear {
    display: none; }

/*
 * Styles for the Row component used by formsy-react-components
 * Should be imported for each component that extends one of
 * the formsy-react-components
 */
.row .required-symbol {
  display: none; }

.row label {
  display: inline-block;
  margin-bottom: .75rem; }

.row.no-label label {
  display: none; }

/* allow elements such as validation errors to position relative to this row */
.row-with-tooltip {
  position: relative; }

.row-label {
  margin-bottom: .75rem;
  line-height: 1.7rem; }

.row-inline {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

/* override margin-bottom so placing a label next to a radio button does not
mess up vertical alignment */
.row-inline label {
  margin-bottom: 0; }

#navigation *, #navigation *::before, #navigation *::after {
  box-sizing: unset; }

#navigation button {
  box-sizing: border-box; }

.ReactModalPortal .modal-content-close-img {
  padding-top: 0; }

body {
  font-size: 16px;
  line-height: unset; }

/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 768px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.dropdown {
  display: none;
  position: absolute;
  right: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0 0 5px 5px;
  background-color: #4d97ff;
  padding: 10px;
  min-width: 9rem;
  max-width: 150px;
  overflow: visible;
  color: white;
  font-size: 0.8125rem;
  font-weight: normal; }
  .dropdown.staging {
    background-color: #ffab1a; }
  .dropdown.open {
    display: block; }
  .dropdown a:link, .dropdown a:visited, .dropdown a:active {
    background-color: transparent;
    color: white; }
  .dropdown input {
    margin-bottom: 12px;
    width: calc(100% - 30px); }
  .dropdown label {
    display: block;
    margin-bottom: 5px; }
  .dropdown > li {
    display: block;
    line-height: 30px; }
    .dropdown > li.divider {
      margin-top: 10px;
      border-top: 1px solid rgba(0, 0, 0, 0.1); }
    .dropdown > li a {
      display: block;
      padding: 0 10px; }
      .dropdown > li a:hover {
        background-color: rgba(0, 0, 0, 0.1);
        text-decoration: none; }
  .dropdown.with-arrow {
    margin-top: 14px;
    border-radius: 5px;
    overflow: visible; }
    .dropdown.with-arrow:before {
      display: block;
      position: absolute;
      top: -7px;
      right: 10%;
      -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
              transform: rotate(45deg);
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      border-left: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      background-color: #4d97ff;
      width: 14px;
      height: 14px;
      content: ''; }

.studio-status-icon-spinner {
  /* This class can be used on an icon that should spin.
    It first plays the intro animation, then spins forever. */
  -webkit-animation-name: intro, spin;
          animation-name: intro, spin;
  -webkit-animation-duration: .25s, 1s;
          animation-duration: .25s, 1s;
  -webkit-animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3), cubic-bezier(0.4, 0.1, 0.4, 1);
          animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3), cubic-bezier(0.4, 0.1, 0.4, 1);
  -webkit-animation-delay: 0s, .25s;
          animation-delay: 0s, .25s;
  -webkit-animation-iteration-count: 1, infinite;
          animation-iteration-count: 1, infinite;
  -webkit-animation-direction: normal;
          animation-direction: normal;
  width: 1.4rem;
  /* standard is 1.4 rem but can be overwritten by parent */
  height: 1.4rem;
  -webkit-transform-origin: center;
      -ms-transform-origin: center;
          transform-origin: center; }

@-webkit-keyframes intro {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; } }

@keyframes intro {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 0; }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1; } }

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

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

/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 768px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.flex-row {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center; }
  .flex-row.column {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center; }
  .flex-row.uneven {
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
                -ms-grid-row-align: flex-start;
            align-items: flex-start; }
    .flex-row.uneven .short {
      width: 13.75em; }
    .flex-row.uneven .long {
      width: 38.75em;
      text-align: left; }
  @media only screen and (max-width: 767px) {
    .flex-row {
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column; }
      .flex-row.uneven .short,
      .flex-row.uneven .long {
        margin: auto;
        width: 90%; } }

#navigation *, #navigation *::before, #navigation *::after {
  box-sizing: unset; }

#navigation button {
  box-sizing: border-box; }

.ReactModalPortal .modal-content-close-img {
  padding-top: 0; }

body {
  font-size: 16px;
  line-height: unset; }

/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.login {
  padding: 10px;
  width: 200px;
  line-height: 1.5rem;
  white-space: normal;
  color: white;
  font-size: .8125rem; }
  .login .button {
    padding: .75em; }
  .login .row {
    margin-bottom: 1.25rem; }
  .login .input {
    margin-bottom: 12px;
    width: calc(100% - 30px);
    height: 2.25rem; }
  .login label {
    padding-top: 5px;
    font-weight: bold; }
  .login .spinner {
    margin: 0 .8rem;
    width: 1rem;
    vertical-align: middle; }
  .login .submit-row {
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row; }
  .login .submit-button {
    margin-top: 5px; }
  .login a {
    margin: auto 0;
    color: white; }
    .login a:link, .login a:visited, .login a:active {
      color: white; }
    .login a:hover {
      background-color: transparent; }
  .login .error {
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background-color: #ffab1a;
    padding: .75em 1em; }


#navigation *, #navigation *::before, #navigation *::after {
  box-sizing: unset; }

#navigation button {
  box-sizing: border-box; }

.ReactModalPortal .modal-content-close-img {
  padding-top: 0; }

body {
  font-size: 16px;
  line-height: unset; }

/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 768px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.overflow-hidden {
  /* to avoid double scroll bars this
    gets added to body while modal is open */
  overflow: hidden; }

.modal-content {
  position: relative;
  margin: 3.75rem auto;
  border-radius: 1rem;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
  background-color: white;
  padding: 0;
  width: 48.75rem; }
  .modal-content:focus {
    outline: none; }
  @media only screen and (max-width: 941px) {
    .modal-content {
      margin-top: 0;
      width: 100%;
      overflow: auto; } }
  @media only screen and (max-width: 479px), only screen and (max-height: 479px) {
    .modal-content {
      border-radius: 0;
      box-shadow: none;
      height: 100%; } }

.modal-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 7000;
  background-color: rgba(0, 0, 0, 0.4); }

.modal-content-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  border-radius: 1rem;
  background-color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  text-align: center;
  line-height: 2rem; }

.modal-content-close-img {
  padding-top: 0.5rem; }

/* Close button, Submit button, etc. */
.action-buttons {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 1.125rem .8275rem .9375rem .8275rem;
  line-height: 1.5rem;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap; }
  @media only screen and (max-width: 941px) {
    .action-buttons {
      -webkit-justify-content: center !important;
          -ms-flex-pack: center !important;
              justify-content: center !important;
      -webkit-flex-direction: row !important;
          -ms-flex-direction: row !important;
              flex-direction: row !important; } }

/* setting overall modal to contain overflow looks good, but isn't
compatible with elements (like validation popups) that need to bleed
past modal boundary. This class can be used to force modal button
row to appear to contain overflow. */
.action-buttons-overflow-fix {
  margin-bottom: .9375rem; }

.action-button {
  margin: 0 0 0 .54625rem;
  border-radius: .25rem;
  padding: 6px 1.25rem 14px 1.25rem;
  height: 36px; }

.action-button.close-button {
  border: 1px solid rgba(0, 0, 0, 0.1); }

.action-button-text {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }

.action-button.disabled {
  background-color: rgba(0, 0, 0, 0.2); }

.error-text {
  display: block;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  background-color: #ffab1a;
  padding: 1rem;
  min-height: 1rem;
  overflow: visible;
  color: white; }

.modal-sizes * {
  box-sizing: border-box; }

.modal-sizes {
  margin: 100px auto;
  outline: none;
  padding: 0;
  max-width: 36.25rem;
  /* 580px; */
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none; }
  @media only screen and (min-width: 480px) and (max-width: 767px), only screen and (min-height: 480px) and (max-height: 767px) {
    .modal-sizes {
      margin: 40px auto; } }
  @media only screen and (max-width: 479px), only screen and (max-height: 479px) {
    .modal-sizes {
      margin: 0 auto;
      width: auto; } }
  .modal-sizes .modal-header {
    padding-top: .75rem;
    width: 100%;
    height: 3rem; }
    @media only screen and (max-width: 479px), only screen and (max-height: 479px) {
      .modal-sizes .modal-header {
        border-radius: 0; } }
  .modal-sizes .modal-content {
    font-size: .875rem; }

#navigation *, #navigation *::before, #navigation *::after {
  box-sizing: unset; }

#navigation button {
  box-sizing: border-box; }

.ReactModalPortal .modal-content-close-img {
  padding-top: 0; }

body {
  font-size: 16px;
  line-height: unset; }

/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
#navigation {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
  background-color: #4d97ff;
  width: 100%;
  /* NOTE: Height should match offset settings in main.scss file */
  height: 50px; }
  #navigation.staging {
    background-color: #ffab1a; }
  .ie9 #navigation {
    display: table;
    table-layout: fixed; }
  #navigation .inner > ul {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0;
    padding: 0;
    height: 50px;
    list-style: none;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start; }
    .ie9 #navigation .inner > ul {
      display: table-row; }
    #navigation .inner > ul > li {
      display: inline-block;
      position: relative;
      float: left;
      margin: 0;
      height: 100%;
      -webkit-align-self: flex-start;
          -ms-flex-item-align: start;
              align-self: flex-start; }
      #navigation .inner > ul > li.right {
        float: right;
        margin-left: auto;
        -webkit-align-self: flex-end;
            -ms-flex-item-align: end;
                align-self: flex-end; }
        .ie9 #navigation .inner > ul > li.right {
          float: none; }
        #navigation .inner > ul > li.right a:hover {
          background-color: rgba(0, 0, 0, 0.1); }
      .ie9 #navigation .inner > ul > li {
        display: table-cell;
        float: none;
        height: 50px;
        vertical-align: bottom; }
  #navigation .link > a {
    display: block;
    padding: 13px 15px 4px 15px;
    height: 33px;
    text-decoration: none;
    white-space: nowrap;
    color: white;
    font-size: .85rem;
    font-weight: bold; }
    #navigation .link > a:hover {
      background-color: rgba(0, 0, 0, 0.1); }

/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 768px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.modal-content-iframe {
  border: 0; }

/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 768px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.modal-content.mod-registration {
  width: 38.125rem;
  overflow: hidden; }

.modal-content-iframe.mod-registration {
  width: 38.125rem;
  min-height: 27.375rem; }

.modal-content.recaptcha-open {
  min-height: 500px; }

.modal-content-iframe.recaptcha-open {
  min-height: 500px; }

@media only screen and (max-width: 941px) {
  .modal-content.mod-registration {
    width: 100%;
    overflow: scroll; }
  .modal-content-iframe.mod-registration {
    height: 27.375rem; } }

.registration {
  position: fixed;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 7px;
  background-color: #4d97ff;
  padding: 30px;
  min-width: 9rem;
  max-width: 16.25rem;
  overflow: visible;
  color: white;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.3);
  font-size: .8125rem;
  font-weight: normal;
  left: 50%;
  top: 40%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%); }

.registrationButton {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between; }

.registrationinput {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  margin-bottom: 12px;
  background-color: #fafafa;
  padding: 0 1rem;
  height: 2rem;
  color: #575e75;
  font-size: .875rem; }

.label {
  font-weight: bold; }

#navigation *, #navigation *::before, #navigation *::after {
  box-sizing: unset; }

#navigation button {
  box-sizing: border-box; }

.ReactModalPortal .modal-content-close-img {
  padding-top: 0; }

body {
  font-size: 16px;
  line-height: unset; }

/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 768px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.mod-guide * {
  box-sizing: border-box; }

.mod-guide {
  margin: 100px auto;
  outline: none;
  padding: 0;
  width: 38rem;
  /* 580px; */
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  max-width: 38rem; }

.guide-modal-header {
  border-radius: 1rem 1rem 0 0;
  box-shadow: inset 0 -1px 0 0 #4280d7;
  background-color: #4d97ff;
  padding-top: 0.75rem;
  width: 100%;
  height: 3rem;
  box-sizing: border-box; }

.guide-content-label {
  text-align: center;
  color: white;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: bold; }

.guide-modal-content {
  margin: 1rem auto;
  padding: 0 17px;
  font-size: 0.875rem; }
  .guide-modal-content .instructions {
    line-height: 1.8rem; }
  .guide-modal-content .guide-contain {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }
    .guide-modal-content .guide-contain img {
      width: 100px;
      height: 100px; }
    .guide-modal-content .guide-contain .resume {
      -webkit-flex: 1;
          -ms-flex: 1;
              flex: 1;
      margin-left: 10px;
      font-family: PingFangSC-Regular;
      font-size: 16px;
      color: #585e74; }
    .guide-modal-content .guide-contain .guide-tip {
      color: #999999; }

.mod-guide {
  height: -webkit-fit-content !important;
  height: fit-content !important;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto !important;
  box-shadow: none; }

.action-check {
  -webkit-transform: translateY(3px);
      -ms-transform: translateY(3px);
          transform: translateY(3px); }

.guide-actions {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between; }
  .guide-actions .ant-checkbox-wrapper {
    line-height: 30px;
    color: #999999; }
  .guide-actions .btns {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex: 1;
        -ms-flex: 1;
            flex: 1;
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end; }
    .guide-actions .btns .action-button + .action-button {
      margin-left: 10px; }
    .guide-actions .btns .action-nouse {
      color: #4e97fe;
      background: #fff;
      border: solid 1px #e5e5e5; }

.action-footer {
  margin-top: 0;
  margin-bottom: 0; }

#navigation *, #navigation *::before, #navigation *::after {
  box-sizing: unset; }

#navigation button {
  box-sizing: border-box; }

.ReactModalPortal .modal-content-close-img {
  padding-top: 0; }

body {
  font-size: 16px;
  line-height: unset; }

/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 768px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.account-nav .user-info {
  display: inline-block;
  padding: 14px 15px 4px 15px;
  max-width: 260px;
  height: 33px;
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: white;
  font-size: .8125rem;
  font-weight: normal; }
  .account-nav .user-info .avatar {
    margin-right: 10px;
    border-radius: 3px;
    width: 24px;
    height: 24px;
    vertical-align: middle; }
  .account-nav .user-info:hover {
    background-color: rgba(0, 0, 0, 0.1); }
  .account-nav .user-info.open {
    background-color: rgba(0, 0, 0, 0.1); }
  .account-nav .user-info:after {
    display: inline-block;
    margin-left: 8px;
    background-image: url("/images/dropdown.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50%;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    content: " "; }

.account-nav .dropdown {
  top: 50px;
  padding: 0;
  padding-top: 5px;
  width: 100%;
  box-sizing: border-box; }

@media only screen and (max-width: 479px) {
  .account-nav {
    margin-left: 0; }
    .account-nav .user-info .avatar {
      margin-right: 0; }
    .account-nav .user-info:after {
      display: none; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .account-nav {
    margin-left: 0; }
    .account-nav .user-info .avatar {
      margin-right: 0; }
    .account-nav .user-info:after {
      display: none; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
  .account-nav {
    margin-left: 0; } }

/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 768px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.language-chooser {
  display: inline-block; }
  .language-chooser .select select {
    width: 13.75rem;
    /* 3 columns */ }

.language-icon {
  height: 1.5rem;
  vertical-align: middle; }

.language-caret {
  margin: 0 .125rem; }

.language-select {
  left: 0;
  top: 0;
  position: absolute;
  width: 3rem;
  height: 3rem;
  opacity: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: .875rem;
  color: #575e75;
  background: white; }

.language-select-wrapper {
  position: relative;
  display: inline-block;
  padding: 10px 5px 14px; }
  .language-select-wrapper:hover {
    background-color: rgba(0, 0, 0, 0.1); }

#navigation *, #navigation *::before, #navigation *::after {
  box-sizing: unset; }

#navigation button {
  box-sizing: border-box; }

.ReactModalPortal .modal-content-close-img {
  padding-top: 0; }

body {
  font-size: 16px;
  line-height: unset; }

/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 768px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

#navigation.staging .messages .message-count {
  display: none; }
  #navigation.staging .messages .message-count.show {
    background-color: #4d97ff; }

#navigation .logo {
  margin-right: 10px; }
  #navigation .logo a {
    display: block;
    transition: 0.15s ease all;
    margin: 0 6px 0 0;
    border: 0;
    background-image: url("/images/logo-white.svg");
    background-repeat: no-repeat;
    background-position: center 7px;
    background-size: 100%;
    width: 141px;
    height: 50px;
    -webkit-transform: translateY(-2.7px);
        -ms-transform: translateY(-2.7px);
            transform: translateY(-2.7px); }
    #navigation .logo a:hover {
      transition: 0.15s ease all;
      background-size: 100%; }

#navigation .inner > ul > li.search {
  margin: 0 20px;
  border-right: 0;
  color: white;
  -webkit-flex-grow: 3;
      -ms-flex-positive: 3;
          flex-grow: 3; }
  .ie9 #navigation .inner > ul > li.search {
    width: 100%; }
  #navigation .inner > ul > li.search .form {
    margin: 0; }
  #navigation .inner > ul > li.search .row .help-block {
    display: none; }
  #navigation .inner > ul > li.search .input,
  #navigation .inner > ul > li.search .button {
    display: inline-block;
    margin-top: 5px;
    outline: none;
    border: 0;
    background-color: rgba(0, 0, 0, 0.1);
    height: 14px; }
    #navigation .inner > ul > li.search .input[type='text'],
    #navigation .inner > ul > li.search .button[type='text'] {
      transition: 0.15s ease background-color;
      padding: 0;
      padding-right: 10px;
      padding-left: 40px;
      width: calc(100% - 50px);
      height: 40px;
      color: white;
      font-size: 0.85em; }
      #navigation .inner > ul > li.search .input[type='text']::-webkit-input-placeholder,
      #navigation .inner > ul > li.search .button[type='text']::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.75); }
      #navigation .inner > ul > li.search .input[type='text']:-ms-input-placeholder,
      #navigation .inner > ul > li.search .button[type='text']:-ms-input-placeholder {
        color: rgba(255, 255, 255, 0.75); }
      #navigation .inner > ul > li.search .input[type='text']::placeholder,
      #navigation .inner > ul > li.search .button[type='text']::placeholder {
        color: rgba(255, 255, 255, 0.75); }
      #navigation .inner > ul > li.search .input[type='text']:focus,
      #navigation .inner > ul > li.search .button[type='text']:focus {
        transition: 0.15s ease background-color;
        background-color: rgba(0, 0, 0, 0.2); }
      .ie9 #navigation .inner > ul > li.search .input[type='text'], .ie9
      #navigation .inner > ul > li.search .button[type='text'] {
        width: 70px; }
  #navigation .inner > ul > li.search .btn-search {
    position: absolute;
    box-shadow: none;
    background-color: transparent;
    background-image: url("/images/nav-search-glass.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 14px 14px;
    width: 40px;
    height: 40px; }
    #navigation .inner > ul > li.search .btn-search:hover {
      box-shadow: none; }

#navigation .messages > a,
#navigation .mystuff > a {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 45%;
  padding-right: 10px;
  padding-left: 10px;
  width: 30px;
  overflow: hidden;
  text-indent: 50px;
  white-space: nowrap; }
  #navigation .messages > a:hover,
  #navigation .mystuff > a:hover {
    background-size: 45%; }

#navigation .messages > a {
  background-image: url("/images/icon-message-white.png");
  background-size: 40%; }

#navigation .messages .message-count {
  display: none; }
  #navigation .messages .message-count.show {
    display: block;
    position: absolute;
    top: 0.5rem;
    right: 0.25rem;
    border-radius: 1rem;
    background-color: #ffab1a;
    padding: 0 0.25rem;
    text-indent: 0;
    line-height: 1rem;
    color: white;
    font-size: 0.7rem;
    font-weight: bold; }

#navigation .mystuff > a {
  background-image: url("/images/mystuff.png"); }

@media only screen and (max-width: 479px) {
  #navigation .inner {
    width: 18.75em; }
    #navigation .inner > ul > li.login-item {
      margin-left: 0; }
    #navigation .inner .create,
    #navigation .inner .discuss,
    #navigation .inner .explore,
    #navigation .inner .search,
    #navigation .inner .help,
    #navigation .inner .mystuff,
    #navigation .inner .profile-name {
      display: none; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #navigation .inner {
    width: 28.75em; }
    #navigation .inner > ul > li.login-item {
      margin-left: 0; }
    #navigation .inner .discuss,
    #navigation .inner .explore,
    #navigation .inner .search,
    #navigation .inner .mystuff,
    #navigation .inner .profile-name {
      display: none; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
  #navigation .inner {
    width: 38.75em; }
    #navigation .inner > ul > li.login-item {
      margin-left: 0; }
    #navigation .inner .explore,
    #navigation .inner .search,
    #navigation .inner .mystuff {
      display: none; } }

#navigation *, #navigation *::before, #navigation *::after {
  box-sizing: unset; }

#navigation button {
  box-sizing: border-box; }

.ReactModalPortal .modal-content-close-img {
  padding-top: 0; }

body {
  font-size: 16px;
  line-height: unset; }

/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
#footer {
  display: block;
  background-color: #f2f2f2;
  padding: 10px 0;
  color: #575e75;
  font-size: .85rem; }

#navigation *, #navigation *::before, #navigation *::after {
  box-sizing: unset; }

#navigation button {
  box-sizing: border-box; }

.ReactModalPortal .modal-content-close-img {
  padding-top: 0; }

body {
  font-size: 16px;
  line-height: unset; }

/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 768px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

ol,
ul {
  margin: 0;
  padding: 0; }

#footer {
  position: relative;
  min-height: 150px;
  padding: 48px 0 10px;
  background-color: white; }
  #footer .lists {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between; }
    #footer .lists dl {
      display: inline-block;
      vertical-align: top;
      text-align: left;
      font-size: 0.8rem; }
      #footer .lists dl a {
        color: #888888;
        font-weight: normal; }
      #footer .lists dl a:hover {
        color: unset; }
    #footer .lists dt {
      display: block;
      margin-bottom: 8px; }
    #footer .lists dd {
      display: block;
      margin: 5px 0;
      line-height: 1.2rem; }
      #footer .lists dd a {
        font-weight: 400; }
  #footer .qrcode {
    text-align: center; }
  #footer .copyright {
    display: block;
    width: 100%; }
    #footer .copyright p {
      font-size: 0.7rem; }
  #footer .language-chooser {
    text-align: center; }
  #footer .footer {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between; }
    #footer .footer .footerWrapper {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
              justify-content: space-between; }
      #footer .footer .footerWrapper .col:nth-child(1) {
        padding-right: 6rem; }
      #footer .footer .footerWrapper .col:nth-child(2) {
        padding-right: 6rem; }
      #footer .footer .footerWrapper .col img {
        margin: 0.3rem 0; }
      #footer .footer .footerWrapper .col div {
        padding: 0.3rem 0; }
    #footer .footer .qrcodeWrap {
      position: relative;
      top: -48px;
      right: 80px;
      text-align: center; }
      #footer .footer .qrcodeWrap .org_contain {
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-align-content: center;
            -ms-flex-line-pack: center;
                align-content: center;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        position: absolute;
        top: 0;
        right: 0;
        height: 164px; }
        #footer .footer .qrcodeWrap .org_contain .qrcodeDesc {
          white-space: nowrap; }
        #footer .footer .qrcodeWrap .org_contain .org_logo {
          width: 74px;
          height: 74px;
          margin-bottom: 8px;
          border-radius: 8px;
          box-sizing: content-box; }
          #footer .footer .qrcodeWrap .org_contain .org_logo img {
            border-radius: 8px;
            width: 74px;
            height: 74px; }
    #footer .footer .qrcodeDesc {
      text-align: center; }
      #footer .footer .qrcodeDesc p {
        margin: 0;
        font-size: 14px; }
  #footer a {
    color: #666;
    font-weight: normal; }
  #footer .footer-logo {
    -webkit-transform: translateY(-16px);
        -ms-transform: translateY(-16px);
            transform: translateY(-16px); }

#copyright {
  margin-top: 30px;
  padding: 10px 0 10px;
  color: #666666;
  font-weight: normal; }
  #copyright > a {
    color: #666666;
    font-weight: normal; }

.studentContainer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  /* justify-content: center; */
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  /* align-items: center; */
  /* justify-content: space-between; */
  padding: 60px 0 19px 122px;
  box-sizing: border-box;
  background-color: #ffffff; }
  .studentContainer .footerMsg {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-flex-direction: row;
        -ms-flex-direction: row;
            flex-direction: row;
    margin-bottom: 58px; }
    .studentContainer .footerMsg .gutterList {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: row;
          -ms-flex-direction: row;
              flex-direction: row;
      /* margin-left: 50px; */
      margin-bottom: 0; }
      .studentContainer .footerMsg .gutterList .gutterItem {
        margin-right: 107px;
        padding-bottom: 0 !important;
        list-style: none;
        font-size: 14px; }
        .studentContainer .footerMsg .gutterList .gutterItem > a {
          font-weight: 300;
          color: #666666; }
    .studentContainer .footerMsg .logoWrap {
      -webkit-flex: 0 0 170px;
          -ms-flex: 0 0 170px;
              flex: 0 0 170px;
      width: 170px;
      margin-right: 166px; }
    .studentContainer .footerMsg .gutterWrap {
      -webkit-flex: 3;
          -ms-flex: 3;
              flex: 3; }
  .studentContainer .copyright {
    font-size: 14px;
    color: #666666;
    font-weight: normal; }
    .studentContainer .copyright > a {
      color: #666666;
      font-weight: normal; }

.footerBorder {
  position: absolute;
  bottom: 60px;
  width: 100%;
  left: 0;
  height: 2px;
  background-color: #f8f6f6; }

@media only screen and (max-width: 479px) {
  .footer {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column; }
    .footer .footerWrapper {
      padding: 2rem;
      -webkit-flex-direction: column;
          -ms-flex-direction: column;
              flex-direction: column; }
      .footer .footerWrapper .col {
        text-align: center;
        padding-right: 0 !important; }
  #copyright {
    text-align: center; } }

.crash-container {
  /* UI Primary Colors */
  /* #FF661A */
  /* UI Secondary Colors */
  /* 3.0 colors */
  /* Using www naming convention for now, should be consistent with gui */
  /* #CF63CF Sounds Primary */
  /* modals */
  /* Overlay UI Gray Colors */
  /* Typography Colors */
  /* Down Deep */
  /*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
  /* Media Queries */
  /* Width */
  /*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
  /* Height */
  margin: 3rem auto;
  border: 1px solid #d9d9d9;
  border-radius: 10px;
  background-color: #fcfcfc;
  width: 60%;
  overflow: hidden;
  text-align: center; }
  .crash-container #navigation *, .crash-container #navigation *::before, .crash-container #navigation *::after {
    box-sizing: unset; }
  .crash-container #navigation button {
    box-sizing: border-box; }
  .crash-container .ReactModalPortal .modal-content-close-img {
    padding-top: 0; }
  .crash-container body {
    font-size: 16px;
    line-height: unset; }
  @media only screen and (max-width: 479px) {
    .crash-container #view {
      text-align: center; }
    .crash-container .inner {
      margin: 0 auto;
      width: 100%; } }
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .crash-container #view {
      text-align: center; }
    .crash-container .inner {
      margin: 0 auto;
      width: 480px; } }
  @media only screen and (min-width: 768px) and (max-width: 941px) {
    .crash-container #view {
      text-align: center; }
    .crash-container .inner {
      margin: 0 auto;
      width: 768px; } }
  @media only screen and (min-width: 942px) {
    .crash-container .inner {
      margin: 0 auto;
      width: 942px; } }
  .crash-container img {
    width: 100%; }
  .crash-container .crash-message {
    margin: 2rem; }

#navigation *, #navigation *::before, #navigation *::after {
  box-sizing: unset; }

#navigation button {
  box-sizing: border-box; }

.ReactModalPortal .modal-content-close-img {
  padding-top: 0; }

body {
  font-size: 16px;
  line-height: unset; }

/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.sub-nav {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  padding: 5px 0;
  width: 100%;
  color: white;
  font-size: .8rem;
  font-weight: 500;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap; }
  .sub-nav li {
    display: inline-block;
    margin: 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50px;
    padding: .75em 1.5em;
    text-decoration: none;
    color: white;
    list-style-type: none; }
    .sub-nav li:hover {
      transition: background-color .25s ease;
      border-color: transparent;
      background-color: rgba(0, 0, 0, 0.1); }
    .sub-nav li:active {
      border: 0 solid transparent;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.25);
      background-color: rgba(0, 0, 0, 0.2);
      padding: calc(.75em + 1px) calc(1.5em + 1px); }
    .sub-nav li.description {
      /* clear styling for info element */
      border: 0;
      border-radius: none;
      text-decoration: none; }
      .sub-nav li.description:hover {
        transition: none;
        background-color: transparent; }
      .sub-nav li.description:active {
        border: 0;
        box-shadow: none;
        background-color: transparent; }
  .sub-nav.sub-nav-align-left {
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start; }
    .sub-nav.sub-nav-align-left li:first-child {
      margin-left: 0; }
  .sub-nav.sub-nav-align-right {
    -webkit-justify-content: flex-end;
        -ms-flex-pack: end;
            justify-content: flex-end; }

#navigation *, #navigation *::before, #navigation *::after {
  box-sizing: unset; }

#navigation button {
  box-sizing: border-box; }

.ReactModalPortal .modal-content-close-img {
  padding-top: 0; }

body {
  font-size: 16px;
  line-height: unset; }

/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 768px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.tab-background {
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
  background-color: white;
  width: 100%; }

.tabs {
  background-color: white;
  padding: 0;
  width: 58.75em;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center; }

.tabs li {
  line-height: 15px;
  margin: 0;
  border: 0;
  border-radius: 0;
  width: 8.75em;
  text-align: center;
  color: #575e75; }
  .tabs li.active {
    border-bottom: 3px solid #0fbd8c; }
    .tabs li.active:hover {
      border-bottom: 3px solid #0fbd8c;
      color: #575e75; }
  .tabs li:active {
    box-shadow: none;
    padding: .75em 1.5em; }
  .tabs li:hover {
    border-bottom: 3px solid rgba(0, 0, 0, 0.2); }
  .tabs li .tab-icon {
    display: block;
    margin: 0 auto;
    margin-bottom: 4px;
    width: 24px; }
  .tabs li:hover {
    background-color: white;
    color: #575e75; }

#navigation *, #navigation *::before, #navigation *::after {
  box-sizing: unset; }

#navigation button {
  box-sizing: border-box; }

.ReactModalPortal .modal-content-close-img {
  padding-top: 0; }

body {
  font-size: 16px;
  line-height: unset; }

/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 768px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.title-banner {
  transition: background-image .5s ease, background-color .5s ease;
  margin-bottom: 40px;
  background-color: #0fbd8c;
  background-position: center;
  background-size: cover;
  padding: 20px 0;
  width: 100%; }

.title-banner-h1,
.title-banner-p {
  margin: 0 auto;
  padding: 5px 0;
  text-align: center;
  color: white; }

.title-banner-p {
  max-width: 500px; }

.title-banner-strong {
  font-weight: 700; }

.title-banner.mod-blue-bg {
  background-color: #4d97ff; }
  .title-banner.mod-blue-bg a {
    color: white; }
  .title-banner.mod-blue-bg a.mod-underline {
    text-decoration: underline; }

#navigation *, #navigation *::before, #navigation *::after {
  box-sizing: unset; }

#navigation button {
  box-sizing: border-box; }

.ReactModalPortal .modal-content-close-img {
  padding-top: 0; }

body {
  font-size: 16px;
  line-height: unset; }

/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 768px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

.select label {
  font-weight: 500; }

.select select {
  transition: border .5s ease;
  margin-bottom: .75rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  background: #fafafa url(data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjY0Ij48cGF0aCBkPSJNMjQgMzcuNDNhMS44OCAxLjg4IDAgMCAxLTEuMzMtLjU1bC01LjExLTUuMTFhMS44NyAxLjg3IDAgMCAxIDAtMi42NGMuNzMtLjczIDEyLjE0LS43MyAxMi44NyAwYTEuODcgMS44NyAwIDAgMSAwIDIuNjRsLTUuMTEgNS4xMWExLjg2IDEuODYgMCAwIDEtMS4zMi41NXoiIGZpbGw9IiNiM2IzYjMiLz48cGF0aCBzdHlsZT0iaXNvbGF0aW9uOmlzb2xhdGUiIGZpbGw9IiMyMzFmMjAiIG9wYWNpdHk9Ii4xIiBkPSJNLjAxIDBoMXY2NGgtMXoiLz48L3N2Zz4=) no-repeat right center;
  padding-right: 4rem;
  padding-left: 1rem;
  width: 100%;
  height: 3rem;
  color: #575e75;
  font-size: .875rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
  .select select::-ms-expand {
    display: none; }
  .select select::-ms-value {
    background-color: inherit;
    padding-left: 1rem;
    color: inherit; }
  .select select:focus {
    outline: none;
    border: 1px solid #4d97ff; }
  .select select:-moz-focusring {
    text-shadow: 0 0 0 #575e75;
    color: transparent; }
  .select select:focus, .select select:hover {
    background: #fafafa url(data:image/svg+xml;base64,PHN2ZyBkYXRhLW5hbWU9IkxheWVyIDEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjY0Ij48cGF0aCBzdHlsZT0iaXNvbGF0aW9uOmlzb2xhdGUiIGZpbGw9IiMyMzFmMjAiIG9wYWNpdHk9Ii4xIiBkPSJNLjAxIDBoNDh2NjRoLTQ4eiIvPjxwYXRoIGQ9Ik0yNCAzNy41OGExLjg4IDEuODggMCAwIDEtMS4zMy0uNThsLTUuMTEtNS4xMWExLjg5IDEuODkgMCAwIDEgMC0yLjY1Yy43My0uNzMgMTIuMTQtLjczIDEyLjg3IDBhMS44NyAxLjg3IDAgMCAxIDAgMi42NEwyNS4zMiAzN2ExLjg2IDEuODYgMCAwIDEtMS4zMi41OHoiIGZpbGw9IiNiM2IzYjMiLz48L3N2Zz4=) no-repeat right center; }
  .select select > option {
    background-color: white;
    width: 100%; }

#navigation *, #navigation *::before, #navigation *::after {
  box-sizing: unset; }

#navigation button {
  box-sizing: border-box; }

.ReactModalPortal .modal-content-close-img {
  padding-top: 0; }

body {
  font-size: 16px;
  line-height: unset; }

/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.thumbnail .thumbnail-image {
  display: block; }
  .thumbnail .thumbnail-image img {
    margin-bottom: 2px;
    border: 1px solid #d9d9d9; }

.thumbnail .thumbnail-title,
.thumbnail .thumbnail-creator, .thumbnail .thumbnail-loves, .thumbnail .thumbnail-favorites, .thumbnail .thumbnail-remixes, .thumbnail .thumbnail-views {
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2em;
  white-space: nowrap;
  word-wrap: break-word; }

.thumbnail .thumbnail-title {
  margin-bottom: 1px;
  font-size: .923em;
  font-weight: 800; }
  .thumbnail .thumbnail-title a {
    display: block; }

.thumbnail .thumbnail-creator, .thumbnail .thumbnail-loves, .thumbnail .thumbnail-favorites, .thumbnail .thumbnail-remixes, .thumbnail .thumbnail-views {
  color: #575e75;
  font-size: .8462em; }
  .thumbnail .thumbnail-creator a, .thumbnail .thumbnail-loves a, .thumbnail .thumbnail-favorites a, .thumbnail .thumbnail-remixes a, .thumbnail .thumbnail-views a {
    display: inline; }

.thumbnail .thumbnail-loves,
.thumbnail .thumbnail-favorites,
.thumbnail .thumbnail-remixes,
.thumbnail .thumbnail-views {
  display: inline;
  margin-right: 10px; }
  .thumbnail .thumbnail-loves:before,
  .thumbnail .thumbnail-favorites:before,
  .thumbnail .thumbnail-remixes:before,
  .thumbnail .thumbnail-views:before {
    display: inline-block;
    margin-right: .1rem;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    width: .93rem;
    height: .93rem;
    vertical-align: text-top;
    content: ""; }

.thumbnail .thumbnail-loves:before {
  background-image: url("/svgs/love/love_type-gray.svg"); }

.thumbnail .thumbnail-favorites:before {
  background-image: url("/svgs/favorite/favorite_type-gray.svg"); }

.thumbnail .thumbnail-remixes:before {
  background-image: url("/svgs/remix/remix_type-gray.svg"); }

.thumbnail .thumbnail-views:before {
  background-image: url("/svgs/view/view_type-gray.svg"); }

.thumbnail.project {
  width: 144px; }
  .thumbnail.project .thumbnail-image img {
    width: 144px;
    height: 108px; }

.thumbnail.gallery {
  width: 170px; }
  .thumbnail.gallery img {
    width: 170px;
    height: 100px; }

/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 768px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

#navigation *, #navigation *::before, #navigation *::after {
  box-sizing: unset; }

#navigation button {
  box-sizing: border-box; }

.ReactModalPortal .modal-content-close-img {
  padding-top: 0; }

body {
  font-size: 16px;
  line-height: unset; }

/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
.grid {
  display: inline-block;
  width: 100%; }
  .grid .flex-row {
    margin: 0 auto;
    padding: 12px 0;
    width: 58.75em;
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start; }
  .grid .thumbnail {
    margin: 7px;
    border-radius: 4px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    background-color: white;
    padding-bottom: 4px;
    width: 220px; }
    .grid .thumbnail .thumbnail-image {
      margin: 8px auto;
      width: 204px; }
    .grid .thumbnail .thumbnail-info {
      margin: 0 auto;
      width: 204px; }
      .grid .thumbnail .thumbnail-info .creator-image {
        float: left; }
        .grid .thumbnail .thumbnail-info .creator-image img {
          margin-right: 8px;
          border-radius: 4px;
          width: 32px;
          height: 32px; }
      .grid .thumbnail .thumbnail-info .thumbnail-title {
        float: left;
        max-width: 164px; }
        .grid .thumbnail .thumbnail-info .thumbnail-title .thumbnail-creator a {
          color: #575e75; }
    .grid .thumbnail.project {
      height: 208px; }
      .grid .thumbnail.project .thumbnail-image {
        height: 152px; }
        .grid .thumbnail.project .thumbnail-image img {
          margin: 0 auto;
          border: 0;
          border-radius: 4px;
          width: 204px;
          height: 152px; }
    .grid .thumbnail.gallery {
      height: 208px; }
      .grid .thumbnail.gallery .thumbnail-image {
        height: 152px; }
        .grid .thumbnail.gallery .thumbnail-image img {
          border: 0;
          border-radius: 4px;
          width: 204px;
          height: 152px; }
  .grid.column {
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center; }
  @media only screen and (max-width: 479px) {
    .grid .flex-row {
      width: 18.75em; } }
  @media only screen and (min-width: 480px) and (max-width: 767px) {
    .grid .flex-row {
      width: 28.75em; } }
  @media only screen and (min-width: 768px) and (max-width: 941px) {
    .grid .flex-row {
      width: 43.75em; } }

#navigation *, #navigation *::before, #navigation *::after {
  box-sizing: unset; }

#navigation button {
  box-sizing: border-box; }

.ReactModalPortal .modal-content-close-img {
  padding-top: 0; }

body {
  font-size: 16px;
  line-height: unset; }

/* UI Primary Colors */
/* #FF661A */
/* UI Secondary Colors */
/* 3.0 colors */
/* Using www naming convention for now, should be consistent with gui */
/* #CF63CF Sounds Primary */
/* modals */
/* Overlay UI Gray Colors */
/* Typography Colors */
/* Down Deep */
/*
    Frameless           <http://framelessgrid.com/>
    by Joni Korpi       <http://jonikorpi.com/>
    licensed under CC0  <http://creativecommons.org/publicdomain/zero/1.0/>
*/
/* Media Queries */
/* Width */
/*
* ... small | medium     | intermediate | big ...
* ... medium-and-smaller |
*          ... intermediate-and-smaller |
*/
/* Height */
@media only screen and (max-width: 479px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 100%; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 480px; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
  #view {
    text-align: center; }
  .inner {
    margin: 0 auto;
    width: 768px; } }

@media only screen and (min-width: 942px) {
  .inner {
    margin: 0 auto;
    width: 942px; } }

#view {
  background-color: #f2f2f2;
  padding: 0; }

.outer {
  /* HACK: sort controls are terrible. There's some sort of magic formula for height of formsy components that I can't control. */ }
  .outer .title-banner.masthead {
    margin-bottom: 0;
    background-color: #ffbf00;
    padding: 0; }
    .outer .title-banner.masthead h1 {
      text-align: center;
      color: white;
      font-size: 3rem; }
    .outer .title-banner.masthead p {
      margin: 0;
      width: 28.75em;
      text-align: left;
      color: white; }
      .outer .title-banner.masthead p a {
        border-bottom: 1px solid white;
        color: white; }
  .outer .left-pusher {
    margin-right: auto;
    width: 8.75rem; }
  .outer .tabs {
    width: 58.75rem; }
  .outer .sort-controls {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto;
    border-bottom: 1px solid #d9d9d9;
    padding: 8px 0;
    width: 58.75rem;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between; }
  .outer .sort-mode {
    margin-top: -4px;
    width: 13.75rem; }
    .outer .sort-mode .select select {
      margin-bottom: 0;
      border: 0;
      background-color: transparent;
      height: 32px;
      color: #575e75; }
      .outer .sort-mode .select select:focus, .outer .sort-mode .select select:active {
        background-color: transparent; }
    .outer .sort-mode .select .help-block {
      display: none; }
  .outer .categories {
    -webkit-justify-content: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start; }
    .outer .categories li {
      border: 0;
      background-color: rgba(0, 0, 0, 0.1);
      color: white; }
      .outer .categories li.active {
        opacity: 1;
        background-color: #0fbd8c;
        color: white; }
      .outer .categories li:active {
        padding: .75em 1.5em; }
      .outer .categories li:hover {
        background-color: rgba(0, 0, 0, 0.2); }
  .outer #projectBox {
    background-color: #f2f2f2;
    padding-top: 16px;
    padding-bottom: 32px;
    width: 100%; }
    .outer #projectBox .button {
      display: block;
      margin: 0 auto;
      width: 58.75rem; }

@media only screen and (max-width: 479px) {
  .outer .tabs {
    width: 18.75em; }
  .outer .sort-controls {
    width: 18.75em; }
  .outer #projectBox .button {
    width: 18.75em; } }

@media only screen and (min-width: 480px) and (max-width: 767px) {
  .outer .tabs {
    width: 28.75em; }
  .outer .sort-controls {
    width: 28.75em; }
  .outer #projectBox .button {
    width: 28.75em; } }

@media only screen and (min-width: 768px) and (max-width: 941px) {
  .outer .tabs {
    width: 38.75em; }
  .outer .sort-controls {
    width: 38.75em; }
  .outer #projectBox .grid .flex-row {
    width: 43.75em; }
  .outer #projectBox .button {
    width: 43.75em; } }