.button {
    display: inline-block;
    margin: .5em 0;
    border: 0;
    border-radius: .5rem;
    background-color: rgb(52%,36%,84%);
    cursor: pointer;
    padding: 1em 1.25em;
    color: #fff;
    font-size: .8rem;
    font-weight: bold
}

.button:focus {
    outline: none
}

.button.white {
    background-color: #fff;
    color: rgb(52%,36%,84%)
}

.button.pass {
    background-color: hsl(144,45%,36%)
}

.button.fail {
    background-color: rgb(100%,67%,10%)
}

.button:disabled {
    box-shadow: none
}

.button.transparent {
    background-color: rgba(0,0,0,0)
}

.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: -0.25rem;
    margin-left: .5rem;
    margin-right: -0.25rem
}

.forms-close-button {
    padding: 0;
    position: absolute;
    top: .5rem;
    right: .5rem;
    border-radius: 1rem;
    background-color: rgba(0,0,0,.1);
    cursor: pointer;
    width: 2rem;
    height: 2rem;
    text-align: center;
    line-height: 2rem
}

.forms-close-button img {
    padding-top: .5rem
}

@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,.1);
    border-radius: 5px;
    background-color: hsl(0,0%,98%);
    padding: 0 1rem;
    height: 3rem;
    color: rgb(34%,37%,46%);
    font-size: .875rem
}

.input:focus {
    transition: all .5s ease;
    outline: none;
    border: 1px solid rgb(52%,36%,84%)
}

.input.fail {
    border: 1px solid #c40
}

.input.pass {
    border: 1px solid hsl(144,45%,36%)
}

.input::-ms-reveal,.input::-ms-clear {
    display: none
}

.row .required-symbol {
    display: none
}

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

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

.row-with-tooltip {
    position: relative
}

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

.row-inline {
    display: flex
}

.row-inline label {
    margin-bottom: 0
}

@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,.1);
    border-radius: 0 0 5px 5px;
    background-color: rgb(52%,36%,84%);
    padding: 10px;
    min-width: 9rem;
    max-width: 16.25rem;
    overflow: visible;
    color: #fff;
    font-size: .8125rem;
    font-weight: normal
}

.dropdown.open {
    display: block
}

.dropdown a:link,.dropdown a:visited,.dropdown a:active {
    background-color: rgba(0,0,0,0);
    color: #fff
}

.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,.1)
}

.dropdown>li a {
    display: block;
    padding: 0 10px
}

.dropdown>li a:hover {
    background-color: rgba(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%;
    transform: rotate(45deg);
    border-top: 1px solid rgba(0,0,0,.1);
    border-left: 1px solid rgba(0,0,0,.1);
    border-radius: 5px;
    background-color: rgb(52%,36%,84%);
    width: 14px;
    height: 14px;
    content: ""
}

.studio-status-icon-spinner {
    animation-name: intro,spin;
    animation-duration: .25s,1s;
    animation-timing-function: cubic-bezier(0.3, -3, 0.6, 3),cubic-bezier(0.4, 0.1, 0.4, 1);
    animation-delay: 0s,.25s;
    animation-iteration-count: 1,infinite;
    animation-direction: normal;
    width: 1.4rem;
    height: 1.4rem;
    transform-origin: center
}

@keyframes intro {
    0% {
        transform: scale(0);
        opacity: 0
    }

    100% {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    100% {
        transform: rotate(359deg)
    }
}

@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: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center
}

.flex-row.column {
    flex-direction: column;
    justify-content: center
}

.flex-row.uneven {
    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 {
        flex-direction:column
    }

    .flex-row.uneven .short,.flex-row.uneven .long {
        margin: auto;
        width: 90%
    }
}

.login {
    padding: 10px;
    width: 200px;
    line-height: 1.5rem;
    white-space: normal;
    color: #fff;
    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 {
    justify-content: space-between;
    flex-direction: row
}

.login .submit-button {
    margin-top: 5px
}

.login a {
    margin: auto 0;
    color: #fff
}

.login a:link,.login a:visited,.login a:active {
    color: #fff
}

.login a:hover {
    background-color: rgba(0,0,0,0)
}

.login .error {
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 5px;
    background-color: rgb(100%,67%,10%);
    padding: .75em 1em
}

@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 {
    overflow: hidden
}

.modal-content {
    position: relative;
    margin: 3.75rem auto;
    border-radius: 1rem;
    box-shadow: 0 0 0 4px rgba(255,255,255,.15);
    background-color: #fff;
    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: 510;
    background-color: hsla(215,100%,65%,.7)
}

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

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

.action-buttons {
    display: flex;
    margin: 1.125rem .8275rem .9375rem .8275rem;
    line-height: 1.5rem;
    justify-content: flex-end !important;
    align-items: flex-start;
    flex-wrap: nowrap
}

@media only screen and (max-width : 941px) {
    .action-buttons {
        justify-content:center !important;
        flex-direction: row !important
    }
}

.action-buttons-overflow-fix {
    margin-bottom: .9375rem
}

.action-buttons.action-buttons-no-inset {
    margin-left: 0;
    margin-right: 0
}

.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,.1)
}

.action-button-text {
    display: flex
}

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

.error-text {
    display: block;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 5px;
    background-color: rgb(100%,67%,10%);
    padding: 1rem;
    min-height: 1rem;
    overflow: visible;
    color: #fff
}

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

.modal-sizes {
    margin: 100px auto;
    outline: none;
    padding: 0;
    max-width: 36.25rem;
    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 {
    display: block;
    position: fixed;
    top: 1%;
    left: 2.5%;
    z-index: 10;
    border-bottom: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 0 3px rgba(0,0,0,.25);
    background-color: rgb(52%,36%,84%);
    width: 95%;
    height: 50px;
    padding: 0%;
    box-shadow: 0 10px 20px rgba(0,0,0,0.7);
    border-radius: 50px;
}
body {
    background-color: white;
}

.ie9 #navigation {
    display: table;
    table-layout: fixed
}

#navigation .inner>ul {
    display: flex;
    margin: 0;
    padding: 0;
    height: 50px;
    list-style: none;
    flex-wrap: nowrap;
    flex-direction: row;
    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%;
    align-self: flex-start
}

#navigation .inner>ul>li.right {
    float: right;
    margin-left: auto;
    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,.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: #fff;
    font-size: .85rem;
    font-weight: bold
}

#navigation .link>a:hover {
    background-color: rgba(0,0,0,.1)
}

@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
}

@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
    }
}

.avatar-wrapper {
    --avatar-size: 1.5rem;
    --frame-size: 0;
    display: inline-flex;
    width: var(--avatar-size)
}

.avatar {
    width: var(--avatar-size);
    height: var(--avatar-size)
}

div.avatar-wrapper.avatar-badge-wrapper img.avatar.avatar-badge {
    border: calc(var(--avatar-size)*.042) solid hsl(37,96%,55%);
    box-sizing: border-box;
    border-radius: 17%;
    box-shadow: none
}

.avatar-badge-wrapper {
    display: inline-flex;
    width: var(--avatar-size);
    height: calc(var(--avatar-size) + var(--frame-size));
    align-items: flex-end;
    background: url("/svgs/membership/cat-ears.svg") no-repeat top;
    background-size: contain
}

@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-flex;
    padding: 10px 15px 4px 15px;
    max-width: 260px;
    height: 33px;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
    font-size: .8125rem;
    font-weight: normal;
    align-items: center
}

.account-nav .user-info .avatar {
    border-radius: 3px;
    vertical-align: middle
}

.account-nav .user-info .avatar-wrapper {
    margin-right: 10px;
    --avatar-size: 24px;
    --frame-size: 7px
}

.account-nav .user-info:hover {
    background-color: rgba(0,0,0,.1)
}

.account-nav .user-info.open {
    background-color: rgba(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
    }
}

@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 .logo {
    margin-right: 10px
}

#navigation .logo a {
    display: block;
    transition: .15s ease all;
    margin: 0 6px 0 0;
    border: 0;
    background-image: url("/images/logo_sm.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 95%;
    width: 81px;
    height: 50px
}

#navigation .logo a:hover {
    transition: .15s ease all;
    background-size: 100%
}

#navigation .inner>ul>li.search {
    margin: 0 20px;
    border-right: 0;
    color: #fff;
    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,.1);
    height: 14px
}

#navigation .inner>ul>li.search .input[type=text],#navigation .inner>ul>li.search .button[type=text] {
    transition: .15s ease background-color;
    padding: 0;
    padding-right: 10px;
    padding-left: 40px;
    width: calc(100% - 50px);
    height: 40px;
    color: #fff;
    font-size: .85em
}

#navigation .inner>ul>li.search .input[type=text]::placeholder,#navigation .inner>ul>li.search .button[type=text]::placeholder {
    color: rgba(255,255,255,.75)
}

#navigation .inner>ul>li.search .input[type=text]:focus,#navigation .inner>ul>li.search .button[type=text]:focus {
    transition: .15s ease background-color;
    background-color: rgba(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: rgba(0,0,0,0);
    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: 50%
}

#navigation .messages>a {
    background-image: url("/images/nav-notifications.png")
}

#navigation .messages .message-count {
    display: none
}

#navigation .messages .message-count.show {
    display: block;
    position: absolute;
    top: .5rem;
    right: .25rem;
    border-radius: 1rem;
    background-color: rgb(100%,67%,10%);
    padding: 0 .25rem;
    text-indent: 0;
    line-height: 1rem;
    color: #fff;
    font-size: .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
    }
}

#footer {
    display: block;
    background-color: hsl(0,0%,95%);
    padding: 10px 0;
    color: rgb(34%,37%,46%);
    font-size: .85rem
}

@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,.1);
    border-radius: 5px;
    background: hsl(0,0%,98%) url("/svgs/forms/caret.svg") no-repeat right center;
    padding-right: 4rem;
    padding-left: 1rem;
    width: 100%;
    height: 3rem;
    color: rgb(34%,37%,46%);
    font-size: .875rem;
    appearance: none;
    -webkit-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 rgb(52%,36%,84%)
}

.select select:-moz-focusring {
    text-shadow: 0 0 0 rgb(34%,37%,46%);
    color: rgba(0,0,0,0)
}

.select select:focus,.select select:hover {
    background: hsl(0,0%,98%) url("/svgs/forms/caret-hover.svg") no-repeat right center
}

.select select>option {
    background-color: #fff;
    width: 100%
}

@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 .select select {
    width: 13.75rem
}

@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
    }
}

#footer .lists {
    display: flex;
    text-align: center;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between
}

#footer .lists dl {
    display: inline-block;
    vertical-align: top;
    text-align: left;
    font-size: .8rem
}

#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 .copyright {
    display: block;
    width: 100%;
    text-align: center
}

#footer .copyright p {
    font-size: .7rem
}

#footer .language-chooser {
    text-align: center
}

@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
    }
}

.crash-container {
    margin: 3rem auto;
    border: 1px solid hsl(0,0%,85%);
    border-radius: 10px;
    background-color: hsl(0,0%,99%);
    width: 60%;
    overflow: hidden;
    text-align: center
}

.crash-container img {
    width: 100%
}

.crash-container .crash-message {
    margin: 2rem
}

@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: hsl(144,45%,36%);
    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: #fff
}

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

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

.title-banner.mod-blue-bg {
    background-color: hsl(215,100%,65%)
}

.title-banner.mod-blue-bg a {
    color: #fff
}

.title-banner.mod-blue-bg a.mod-underline {
    text-decoration: underline
}

@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
    }
}

.privacy-aside {
    position: sticky
}

.privacy-banner {
    display: flex;
    z-index: 8;
    background-color: hsl(260,46%,54%);
    padding: 0;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    margin-bottom: -50px;
    margin-top: 50px
}

.privacy-banner .privacy-banner-container {
    display: flex;
    margin: .375rem auto;
    align-items: center
}

.privacy-banner .privacy-banner-container .lightbulb-icon {
    margin: .6875rem;
    width: 1.75rem;
    height: 1.75rem
}

.privacy-banner .privacy-banner-container .privacy-banner-centered {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center
}

.privacy-banner .privacy-banner-container .privacy-banner-text {
    text-align: left;
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    margin-right: 1rem;
    max-width: 70vw
}

.privacy-banner .privacy-close-button {
    right: 1rem;
    top: auto
}

.privacy-banner a {
    color: #fff;
    text-decoration: underline
}

@media only screen and (max-width: 640px) {
    .privacy-banner .privacy-banner-container .privacy-banner-centered {
        flex-wrap:wrap
    }

    .privacy-banner .privacy-banner-container .lightbulb-icon {
        padding-bottom: 2rem
    }

    .privacy-banner .privacy-banner-container {
        margin-left: 0;
        margin-bottom: 1rem
    }

    .privacy-banner .donate-close-button {
        top: 1rem
    }
}

.modal-title {
    box-sizing: border-box;
    text-align: center;
    color: #fff;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1rem;
    font-weight: bold
}

@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-inner-content {
    box-sizing: border-box;
    display: flex;
    border-radius: 0;
    flex-direction: column
}

.tos-step-next-button-wrapper {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.tos-step-next-button-wrapper .tos-step-next-button {
    display: flex;
    height: 2.75rem;
    padding: .75rem 1rem;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    border-radius: .25rem;
    background-color: hsl(163,85%,40%);
    border: none;
    width: 100%
}

.tos-step-next-button-wrapper .tos-step-next-button .tos-step-next-button-text {
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    display: flex;
    gap: 8px
}

.tos-step-next-button-wrapper .tos-step-next-button:hover {
    background-color: hsl(163,85%,35%)
}

.tos-step-next-button-wrapper .tos-step-next-button:active {
    background-color: hsl(163,86%,30%)
}

.tos-step-next-button-wrapper .tos-step-error {
    color: #c40;
    font-size: .9rem
}

.tos-modal .progression {
    width: 100%
}

.tos-modal .tos-step-top-bar {
    display: flex;
    height: 3rem;
    padding: .75rem;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    align-self: stretch;
    background: hsl(163,85%,40%);
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem
}

.tos-modal .tos-step-inner-content {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 2rem 1rem 2rem;
    gap: 1.5rem
}

.tos-modal .tos-step-inner-content .tos-step-info-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem
}

.tos-modal .tos-step-inner-content .tos-step-info-wrapper .tos-step-title {
    color: rgb(34%,37%,46%);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem
}

.tos-modal .tos-step-inner-content .tos-step-info-wrapper .tos-step-description-container {
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.tos-modal .tos-step-inner-content .tos-step-info-wrapper .tos-step-description {
    color: rgb(34%,37%,46%);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem
}

.tos-modal .tos-step-inner-content .validation-message {
    display: inline-flex;
    margin-bottom: .75rem;
    color: #c40;
    font-size: .9rem;
    background: none;
    border: none;
    padding: 0;
    font-weight: 400
}

.tos-modal .tos-step-inner-content .tos-checkbox label {
    display: grid;
    grid-template-columns: 2rem auto;
    line-height: 1.5rem;
    font-weight: 400
}

.tos-modal .tos-step-inner-content .tos-checkbox label input {
    margin-top: .2rem
}

.tos-modal .tos-step-inner-content a.link {
    color: hsl(163,85%,40%);
    text-decoration-line: underline;
    text-decoration-style: solid;
    font-weight: 400
}

.profile-completion-step-content {
    display: flex;
    flex-direction: column;
    gap: .75rem
}

.profile-completion-step-content .date-of-birth-section,.profile-completion-step-content .location-section {
    font-weight: 700
}

.profile-completion-step-content .section-label {
    font-size: .875rem;
    line-height: 1.25rem
}

.profile-completion-step-content .country-select label,.profile-completion-step-content .state-select label,.profile-completion-step-content .month-select label,.profile-completion-step-content .year-select label {
    display: none
}

.profile-completion-step-content .country-select,.profile-completion-step-content .state-select,.profile-completion-step-content .month-select,.profile-completion-step-content .year-select {
    background-color: #fff
}

.profile-completion-step-content .date-of-birth-section,.profile-completion-step-content .location-section {
    display: flex;
    flex-direction: column;
    gap: .25rem
}

.profile-completion-step-content .date-of-birth-section .section-selectors {
    display: flex;
    gap: 1rem
}

.profile-completion-step-content .date-of-birth-section .section-selectors .month-select,.profile-completion-step-content .date-of-birth-section .section-selectors .year-select {
    flex: 1 0 0
}


@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 .checkbox label {
    font-weight: 300
}

.row .checkbox input[type=checkbox] {
    display: block;
    float: left;
    margin-right: 1rem;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 3px;
    width: 1.25rem;
    height: 1.25rem;
    appearance: none
}

.row .checkbox input[type=checkbox]:checked,.row .checkbox input[type=checkbox]:focus {
    transition: all .5s ease;
    outline: none;
    box-shadow: 0 0 0 .25rem rgba(0,0,0,.2)
}

.row .checkbox input[type=checkbox]:checked {
    background-color: hsl(215,100%,65%);
    text-align: center;
    text-indent: .125rem;
    line-height: 1.25rem;
    font-size: .75rem
}

.row .checkbox input[type=checkbox]:checked:after {
    color: #fff;
    content: "✔"
}

.confirmation-section {
    display: flex;
    flex-direction: column;
    gap: 1.25rem
}

.confirmation-section .parent-email-input .input {
    width: 100%;
    background-color: #fff
}

.tos-step-description .description-paragraph {
    margin-top: 0;
    margin-bottom: .75rem;
    line-height: 1.5rem
}

.tos-step-description .description-paragraph:last-child {
    margin-bottom: 0
}

.tos-modal {
    display: flex;
    margin: auto;
    width: min(29rem,100vw);
    border-radius: .5rem;
    flex-direction: column;
    align-items: flex-start
}

.modal-overlay {
    background: rgba(0,0,0,.75);
    align-content: center
}

.modal-inner-content {
    gap: 1.5rem
}

.page #view.blocking-view {
    background-color: #fff;
    padding: 0
}

.parental-consent-form .page-inner-content {
    display: flex;
    flex-direction: column;
    margin: auto;
    padding: 2rem 0 2.5rem 0;
    width: min(60rem,80%);
    align-items: flex-start
}

.parental-consent-form .page-inner-content .page-title {
    color: rgb(34%,37%,46%);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 2rem;
    margin-bottom: .75rem
}

.parental-consent-form .page-inner-content .page-description {
    color: rgb(34%,37%,46%);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    margin-bottom: 1.5rem;
    text-align: start
}

.parental-consent-form .page-inner-content .page-description a {
    color: hsl(163,85%,40%);
    font-weight: 400;
    text-decoration: underline
}

.parental-consent-form .page-inner-content .page-description .description-paragraph {
    margin-top: 0;
    margin-bottom: .75rem
}

.parental-consent-form .page-inner-content .page-description .description-paragraph:last-child {
    margin-bottom: 0
}

.parental-consent-form .parent-email-input {
    text-align: start
}

.parental-consent-form .parent-email-input .input {
    width: 22.5rem;
    background-color: #fff
}

.parental-consent-form .request-consent-button {
    width: 16rem;
    margin-top: .25rem
}

.parental-consent-form .request-consent-button.dark {
    background: hsl(163,86%,30%)
}

.parental-consent-form .request-consent-error {
    text-align: start;
    width: 21.5rem;
    line-height: 1.25rem
}

.parental-consent-form .validation-message {
    display: flex;
    color: #c40;
    font-size: .9rem;
    margin-bottom: .5rem
}

@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-button {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .3rem
}

.navigation-button .left-arrow {
    padding-right: 4px
}

@media only screen and (max-width : 479px) {
    .navigation-button .left-arrow {
        padding:0px
    }
}

.navigation-button .right-arrow {
    padding-left: 4px
}

@media only screen and (max-width : 479px) {
    .navigation-button .right-arrow {
        padding:0px
    }
}

.navigation {
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 40px
}

.navigation .hidden {
    visibility: hidden
}

.navigation .dotRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 244px;
    min-width: 0px;
    padding: 0px 5px
}

.navigation .dot {
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #d9d9d9;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center
}

.navigation .active {
    border: solid 2px #4280d9;
    background-color: #4c97fe;
    margin-top: -2px
}

@media only screen and (max-width : 479px) {
    .navigation .navText {
        display:none
    }
}

.navigation .buttonPlaceholder {
    width: 20px
}

@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
    }
}

.col {
    display: flex;
    flex-direction: column !important
}

.onboarding {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
    line-height: 1.8rem;
    font-size: 1.1rem
}

.onboarding h1 {
    line-height: 3rem;
    font-size: 2rem;
    margin-bottom: 20px
}

.onboarding button {
    padding: .3em .9em
}

.onboarding .content {
    flex: 1;
    display: flex;
    max-width: 1000px;
    padding: auto;
    margin: auto
}

@media only screen and (max-width : 767px) {
    .onboarding .content {
        flex-direction:column
    }
}

.onboarding .image-content {
    display: flex;
    position: relative;
    flex: 4;
    justify-content: center;
    align-items: center
}

@media only screen and (max-width : 767px) {
    .onboarding .image-content {
        flex:12;
        order: 1;
        align-items: flex-end
    }
}

@media only screen and (max-width : 767px) {
    .onboarding .image-content img {
        width:300px;
        height: 300px
    }
}

.onboarding .image-inner-content {
    position: relative
}

.onboarding .text-content {
    flex: 8;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding: 40px
}

@media only screen and (max-width : 767px) {
    .onboarding .text-content {
        flex:12;
        order: 2;
        padding-top: 0px;
        justify-content: flex-start
    }
}

.security-avatar {
    position: absolute;
    border-radius: 100%;
    width: 65px;
    height: 65px;
    top: 172px;
    left: 149px
}

@media only screen and (max-width : 767px) {
    .security-avatar {
        width:60px !important;
        height: 60px !important;
        top: 140.5px;
        left: 121.5px
    }
}

.student-deactivation-banner {
    display: flex;
    position: relative;
    top: 50px;
    background: rgb(100%,88%,28%);
    padding: 1rem 0;
    width: 100%;
    justify-content: center;
    margin: 0
}

.student-deactivation-banner .student-deactivation-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem
}

@media only screen and (min-width: 942px) {
    .student-deactivation-banner .student-deactivation-container {
        width:58.875rem
    }
}

@media only screen and (min-width: 768px)and (max-width: 941px) {
    .student-deactivation-banner .student-deactivation-container {
        width:48rem
    }
}

@media only screen and (min-width: 480px)and (max-width: 767px) {
    .student-deactivation-banner .student-deactivation-container {
        width:30rem
    }
}

@media only screen and (max-width: 479px) {
    .student-deactivation-banner .student-deactivation-container {
        max-width:calc(100% - 1rem)
    }
}

.student-deactivation-banner .student-deactivation-container .student-deactivation-content {
    display: flex;
    flex-direction: column;
    gap: .25rem
}

.student-deactivation-banner .student-deactivation-container .student-deactivation-content .student-deactivation-title {
    color: #000;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.625rem
}

.student-deactivation-banner .student-deactivation-container .student-deactivation-content .student-deactivation-description {
    color: #000;
    font-size: 1rem;
    line-height: 1.5rem;
    margin: 0
}

.student-deactivation-banner .student-deactivation-container .student-deactivation-content .student-deactivation-description a {
    color: #000;
    font-weight: 400;
    text-decoration-line: underline;
    text-underline-position: from-font
}

.student-deactivation-banner .student-deactivation-container .student-deactivation-close-button {
    display: flex;
    padding: .4rem;
    margin: 0;
    background: none;
    background-image: url("/svgs/banners/button-shadow.svg");
    background-repeat: no-repeat;
    background-position: center
}

.admin-panel {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    border: 1px solid hsl(0,0%,95%);
    box-shadow: 0 2px 5px rgba(0,0,0,.25);
    background-color: hsl(0,0%,95%);
    padding: 1rem;
    width: 230px;
    height: 100%;
    overflow: scroll;
    text-shadow: none
}

.admin-panel.collapsed {
    width: 10px
}

.admin-panel .toggle {
    float: right;
    cursor: pointer
}

.admin-panel .button-row {
    display: flex;
    font-size: small;
    align-items: center;
    justify-content: space-between
}

.admin-panel .button-row .button {
    padding: .5rem 1rem
}

.admin-panel .button-row .button.inprogress {
    background-color: hsl(0,0%,70%);
    color: rgb(34%,37%,46%)
}

@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
    }
}

.box {
    display: inline-block;
    border: 1.5px solid #bcbcbc;
    border-radius: 30px 30px 30px 30px;
    background-color: #ffffff;
    width: 100%;
}

@media only screen and (max-width : 479px) {
    .box {
        width:18.75em
    }

    .box .box-header h4,.box .box-header h5 {
        line-height: .9rem;
        font-size: .9rem
    }
}

@media only screen and (min-width : 480px)and (max-width : 767px) {
    .box {
        width:28.75em
    }

    .box .box-header h4,.box .box-header h5 {
        line-height: 1rem;
        font-size: 1rem
    }
}

@media only screen and (min-width : 768px)and (max-width : 941px) {
    .box {
        width:38.75em
    }

    .box .box-header h4,.box .box-header h5 {
        line-height: 1.1rem;
        font-size: 1.1rem
    }
}

@media only screen and (min-width : 942px) {
    .box {
        width:58.75em;
    }

    .box .box-header h4,.box .box-header h5 {
        line-height: 1.1rem;
        font-size: 1.1rem
    }
}

.box .box-header {
    display: block;
    clear: both;
    margin: 0;
    border-top: 0px solid #ffffff;
    border-bottom: 0px solid hsl(0deg 0% 100%);
    border-radius: 30px 30px 0px 0;
    background-color: hsl(260.16deg 59.8% 60%);
    padding: 8px 20px;
    height: 20px;
    overflow: hidden;
    color: white;
}
h1 h2 h3 h4 {
    color: white;
}

.box .box-header h4,.box .box-header h5 {
    display: inline-block;
    float: left
}

.box .box-header h5 {
    margin: 0;
    padding-left: 5px;
    text-transform: none;
    letter-spacing: normal;
    font-weight: normal
}

.box .box-header p {
    display: inline-block;
    float: right;
    margin: 1px 0 0 0;
    padding: 0;
    font-size: .85rem
}

.box .box-content {
    display: block;
    clear: both;
    background-color: #fff;
    padding: 8px 20px
}

.box .empty {
    margin-top: 20px
}

.thumbnail {
    position: relative
}

.thumbnail .thumbnail-image {
    display: block
}

.thumbnail .thumbnail-image img {
    margin-bottom: 2px;
    border: 1px solid hsl(0,0%,85%)
}

.thumbnail .thumbnail-title,.thumbnail .thumbnail-creator,.thumbnail .thumbnail-loves,.thumbnail .thumbnail-favorites,.thumbnail .thumbnail-remixes,.thumbnail .thumbnail-views {
    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;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.thumbnail .thumbnail-creator,.thumbnail .thumbnail-loves,.thumbnail .thumbnail-favorites,.thumbnail .thumbnail-remixes,.thumbnail .thumbnail-views {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgb(34%,37%,46%);
    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
}

.thumbnail-remove-button {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #fff;
    border: 1px solid hsl(0,0%,85%);
    color: rgb(34%,37%,46%);
    font-size: 12px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2
}

.thumbnail-remove-button:hover {
    background: hsl(0,0%,85%)
}

.membership-label-container {
    display: inline-flex;
    padding: .125rem .3125rem;
    justify-content: center;
    align-items: center;
    border-radius: 1.125rem;
    background: rgb(52%,36%,84%);
    margin-left: .25rem;
    vertical-align: middle;
    transform: translateY(-0.05rem)
}

.membership-label-text {
    color: #fff;
    font-size: .5rem;
    font-weight: 500;
    line-height: normal
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0
}

.slick-list:focus {
    outline: none
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand
}

.slick-slider .slick-track,.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
}

.slick-track {
    position: relative;
    left: 0;
    top: 0;
    display: block;
    margin-left: auto;
    margin-right: auto
}

.slick-track:before,.slick-track:after {
    content: "";
    display: table
}

.slick-track:after {
    clear: both
}

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    float: left;
    height: 100%;
    min-height: 1px
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid rgba(0,0,0,0)
}

.slick-arrow.slick-hidden {
    display: none
}


.slick-loading .slick-list {
    background: #fff url("./ajax-loader.gif") center center no-repeat
}

@font-face {
    font-family: "slick";
    src: url("./fonts/slick.eot");
    src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"),url("./fonts/slick.woff") format("woff"),url("./fonts/slick.ttf") format("truetype"),url("./fonts/slick.svg#slick") format("svg");
    font-weight: normal;
    font-style: normal
}

.slick-prev,.slick-next {
    position: absolute;
    display: block;
    height: 20px;
    width: 20px;
    line-height: 0px;
    font-size: 0px;
    cursor: pointer;
    background: rgba(0,0,0,0);
    color: rgba(0,0,0,0);
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    padding: 0;
    border: none;
    outline: none
}

.slick-prev:hover,.slick-prev:focus,.slick-next:hover,.slick-next:focus {
    outline: none;
    background: rgba(0,0,0,0);
    color: rgba(0,0,0,0)
}

.slick-prev:hover:before,.slick-prev:focus:before,.slick-next:hover:before,.slick-next:focus:before {
    opacity: 1
}

.slick-prev.slick-disabled:before,.slick-next.slick-disabled:before {
    opacity: .25
}

.slick-prev:before,.slick-next:before {
    font-family: "slick";
    font-size: 20px;
    line-height: 1;
    color: #fff;
    opacity: .75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.slick-prev {
    left: -25px
}

[dir=rtl] .slick-prev {
    left: auto;
    right: -25px
}

.slick-prev:before {
    content: "←"
}

[dir=rtl] .slick-prev:before {
    content: "→"
}

.slick-next {
    right: -25px
}

[dir=rtl] .slick-next {
    left: -25px;
    right: auto
}

.slick-next:before {
    content: "→"
}

[dir=rtl] .slick-next:before {
    content: "←"
}

.slick-dotted.slick-slider {
    margin-bottom: 30px
}

.slick-dots {
    position: absolute;
    bottom: -25px;
    list-style: none;
    display: block;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 100%
}

.slick-dots li {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer
}

.slick-dots li button {
    border: 0;
    background: rgba(0,0,0,0);
    display: block;
    height: 20px;
    width: 20px;
    outline: none;
    line-height: 0px;
    font-size: 0px;
    color: rgba(0,0,0,0);
    padding: 5px;
    cursor: pointer
}

.slick-dots li button:hover,.slick-dots li button:focus {
    outline: none
}

.slick-dots li button:hover:before,.slick-dots li button:focus:before {
    opacity: 1
}

.slick-dots li button:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "•";
    width: 20px;
    height: 20px;
    font-family: "slick";
    font-size: 6px;
    line-height: 20px;
    text-align: center;
    color: #000;
    opacity: .25;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.slick-dots li.slick-active button:before {
    color: #000;
    opacity: .75
}

.carousel {
    margin-bottom: 0;
    padding: 12px 45px
}

.box-content .carousel {
    padding: 12px 25px
}

.carousel .slick-next,.carousel .slick-prev {
    margin-top: -20px;
    width: 40px;
    height: 40px
}

.carousel .slick-next:before,.carousel .slick-prev:before {
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 70%;
    width: 40px;
    height: 40px;
    font-size: 40px;
    content: ""
}

.carousel .slick-next.slick-disabled:before,.carousel .slick-prev.slick-disabled:before {
    opacity: 1
}

.carousel .slick-prev {
    left: 0
}

.carousel .slick-prev:before {
    background-image: url("/svgs/carousel/prev_ui-dark-gray.svg")
}

.carousel .slick-prev:before:hover {
    background-image: url("/svgs/carousel/prev_ui-blue.svg");
    background-size: 90%
}

.box-content .carousel .slick-prev {
    left: -20px
}

.carousel .slick-next {
    right: 0
}

.carousel .slick-next:before {
    background-image: url("/svgs/carousel/next_ui-dark-gray.svg")
}

.carousel .slick-next:before:hover {
    background-image: url("/svgs/carousel/next_ui-blue.svg");
    background-size: 90%
}

.box-content .carousel .slick-next {
    right: -20px
}

.carousel .slick-slide {
    padding-right: 30px
}

.banner {
    position: sticky;
    top: 50px;
    z-index: 9;
    box-shadow: 0 1px 1px hsl(0,0%,70%);
    background-color: rgb(100%,67%,10%);
    width: 100%;
    overflow: hidden;
    text-align: center;
    line-height: 50px
}

.banner,.banner a {
    color: #fff
}

.banner a {
    text-decoration: underline
}

.banner .close {
    float: right;
    margin-top: 12.5px;
    border-radius: 12.5px;
    background-color: rgba(0,0,0,.25);
    width: 25px;
    height: 25px;
    text-decoration: none;
    text-shadow: none;
    line-height: 25px;
    color: #fff;
    font-weight: normal
}

.banner.warning {
    background-color: #c40
}

@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
    }
}

.email-confirmation-modal {
    border-radius: 4px;
    overflow: hidden;
    max-width: 500px
}

.email-confirmation-modal h1 {
    font-size: 2rem;
    line-height: 2.5rem
}

.email-confirmation-modal .modal-content-close {
    top: 5px;
    right: 5px
}

.email-confirmation-modal .modal-main-content {
    display: flex
}

.email-confirmation-modal .modal-text-content {
    margin-top: 30px;
    margin-bottom: 30px;
    margin-right: 20px;
    margin-left: 20px
}

.email-confirmation-modal .modal-image {
    margin-left: -70px
}

.email-confirmation-modal .top-close-bar {
    height: 44px;
    background-color: #0ebd8c
}

.email-confirmation-modal .guide-footer {
    text-align: center;
    border-top: 1px solid rgba(77,151,255,.15);
    padding: 20px
}

@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
    }
}

.video-player {
    border: .25rem solid rgba(0,0,0,.15);
    border-radius: .75rem;
    height: 225px;
    overflow: hidden
}

@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
    }
}

.intro-banner {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0;
    justify-content: space-between;
    background-color: #fff
}

.intro-banner .intro-container {
    min-height: 24rem;
    justify-content: space-between;
    background-color: rgb(52%,36%,84%);
    background-size: 624px 325px;
    background-repeat: no-repeat;
    background-position: right;
    background-image: url("/svgs/intro/background-cropped.svg")
}

.intro-banner .intro-content {
    flex: 1;
    justify-content: center;
    align-items: flex-start;
    margin-left: 5%;
    min-height: 20rem
}

.intro-banner .intro-video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 29rem
}

.intro-banner .intro-video-container .intro-video {
    margin-right: 4rem
}

.intro-banner .intro-video-container .video-image {
    position: relative;
    cursor: pointer;
    margin-right: 4rem
}

.intro-banner .intro-video-container .video-image .watch-button {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    border-radius: 4px;
    background-color: rgba(0,0,0,.15);
    box-shadow: 0 0 0 4px rgba(0,0,0,.15);
    color: #fff;
    padding: .625rem .75rem;
    font-size: 1rem
}

.intro-banner .intro-video-container:after {
    display: block;
    position: absolute;
    bottom: .75rem;
    right: 10%;
    background-image: url("/svgs/intro/hat-block.svg");
    background-repeat: no-repeat;
    width: 122px;
    height: 81px;
    content: ""
}

.intro-banner .intro-header {
    margin-bottom: .75rem;
    font-size: 2rem;
    color: #fff;
    line-height: 1.5em
}

.intro-banner .intro-button {
    border-radius: 4px;
    background-color: #fff;
    color: rgb(52%,36%,84%);
    padding: .625rem .75rem;
    font-size: 1rem;
    margin-right: .75rem
}

.intro-banner .intro-button.create-button:before {
    display: inline-block;
    margin-right: .5rem;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url("/svgs/intro/create.svg");
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: -0.35rem;
    content: ""
}

.intro-banner .intro-button.join-button:before {
    display: inline-block;
    margin-right: .5rem;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    background-image: url("/svgs/intro/join.svg");
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: -0.35rem;
    content: ""
}

.intro-banner .intro-subnav {
    justify-content: center;
    background-color: hsla(215,100%,65%,.1)
}

.intro-banner .intro-subnav .subnav-button {
    margin: .625rem .5rem;
    padding: .5rem 1.5rem;
    border-radius: 1.5rem
}

@media only screen and (min-width: 900px)and (max-width: 1023px) {
    .intro-banner .intro-header {
        max-width:22rem;
        text-align: left
    }
}

@media only screen and (min-width: 480px)and (max-width: 899px) {
    .intro-banner {
        justify-content:flex-start
    }

    .intro-banner .intro-header {
        margin-top: 1.75rem;
        font-size: 1.5rem
    }

    .intro-banner .intro-container {
        flex-direction: column;
        background-position: bottom 32px right 50%;
        background-size: 40rem;
        background-image: url("/svgs/intro/background.svg")
    }

    .intro-banner .intro-container .intro-content {
        align-items: center;
        min-height: 8rem;
        margin: 0
    }

    .intro-banner .intro-video-container {
        flex: 0 0 24rem
    }

    .intro-banner .intro-video-container .video-image,.intro-banner .intro-video-container .video-player {
        margin: 0
    }

    .intro-banner .intro-video-container:after {
        display: none
    }
}

@media only screen and (max-width : 767px) {
    .intro-buttons,.intro-subnav {
        flex-direction:row
    }
}

@media only screen and (max-width: 479px) {
    .intro-banner .intro-container {
        background-image:none
    }

    .intro-banner .intro-container .intro-content.column {
        margin: auto 5%;
        align-items: center
    }

    .intro-banner .intro-container .intro-header {
        font-size: 1.5rem
    }

    .intro-banner .intro-container .intro-video-container {
        display: none
    }
}

.news ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none
}

.news li {
    display: block;
    clear: both;
    margin: 0;
    padding: 12px 0;
    min-height: 53px
}

.news li a {
    display: flex;
    text-decoration: none;
    flex-wrap: nowrap;
    flex-direction: row
}

.news li a:hover {
    text-decoration: none
}

.news li img {
    margin-right: 12px;
    width: initial
}

.news li h4 {
    display: block;
    color: rgb(52%,36%,84%);
    font-size: .85rem
}

.news li p {
    display: block;
    margin: 0;
    padding: 0;
    line-height: normal;
    color: rgb(34%,37%,46%);
    font-size: .85rem
}

.news li:nth-child(even) {
    border-top: 1px solid hsl(0,0%,85%);
    border-bottom: 1px solid hsl(0,0%,85%)
}

@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
    }
}

.teacher-banner {
    background-color: #96f;
    min-height: 65px
}

.teacher-banner.title-banner {
    transition: none;
    margin-bottom: 0;
    text-align: left
}

.teacher-banner.title-banner h3,.teacher-banner.title-banner p {
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: left
}

.teacher-banner h3 {
    color: #fff
}

.teacher-banner .flex-row.inner {
    justify-content: space-between
}

.teacher-banner .button {
    margin-left: 10px;
    background-color: #fff;
    padding: 13px 20px;
    color: rgb(52%,36%,84%)
}

.welcome .box-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1 1 100%;
    padding: 0
}

.welcome .box-content .welcome-banner {
    width: 100%;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem;
    text-align: center;
    color: hsl(194,73%,36%);
    background-color: hsl(195,63%,86%);
    padding: .625rem 0
}

.welcome .box-content .welcome-options {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.5rem 0
}

.welcome .box-content .welcome-options .welcome-option-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    width: 10rem;
    height: 13rem;
    border: 1px solid hsl(215,50%,90%);
    border-radius: 20px;
    text-align: center
}

@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
    }
}

.social-message {
    margin: 0;
    border-bottom: 1px solid hsl(0,0%,85%);
    padding: 1rem;
    list-style-type: none
}

.social-message-icon {
    opacity: .25
}

.social-message.mod-unread {
    background-color: hsla(215,100%,65%,.1)
}

.social-message.mod-unread .social-message-icon {
    opacity: 1
}

.flex-row.mod-social-message {
    justify-content: space-between;
    align-items: flex-start
}

.social-message-content {
    display: flex;
    max-width: 38.75rem;
    text-align: left;
    align-items: flex-start
}

.social-message-icon {
    margin: .2rem 1rem 0 0;
    min-width: 1.25rem
}

a.social-messages-profile-link {
    color: rgb(34%,37%,46%)
}

a.social-messages-profile-link:hover {
    color: rgb(52%,36%,84%)
}

.flex-row.mod-comment-message {
    justify-content: flex-start
}

.comment-text {
    margin-left: 1.5rem
}

@media only screen and (max-width : 479px) {
    .social-message {
        text-align:left
    }

    .social-message-date {
        align-self: flex-end
    }

    .social-message-content {
        max-width: 100%
    }
}

@media only screen and (min-width : 480px)and (max-width : 767px) {
    .social-message {
        text-align:left
    }

    .social-message-date {
        align-self: flex-end
    }

    .social-message-content {
        max-width: 100%
    }
}

@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
    }
}

.donate-banner {
    display: flex;
    position: sticky;
    z-index: 8;
    background-color: hsl(144,45%,26%);
    padding: 0;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    margin-bottom: 0px
}

.donate-banner .donate-container {
    display: flex;
    margin: .375rem auto;
    align-items: center
}

.donate-banner .donate-container .donate-icon {
    margin: .6875rem;
    width: 1.75rem;
    height: 1.75rem
}

.donate-banner .donate-container .donate-central-items {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center
}

.donate-banner .donate-container .donate-text {
    text-align: left;
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    margin-right: 1rem;
    max-width: 70vw
}

.donate-banner .donate-container .donate-button {
    margin: 0 7rem 0 .5rem;
    border-radius: 1.25rem;
    background-color: #fff;
    color: hsl(144,45%,26%);
    padding: 0 1.75rem;
    height: 2.25rem;
    text-decoration: none;
    line-height: .875rem;
    font-size: 1rem;
    font-weight: bold
}

.donate-banner .donate-close-button {
    right: 1rem;
    top: auto
}

.donate-banner a {
    color: #fff;
    text-decoration: underline
}

@media only screen and (max-width: 640px) {
    .donate-banner .donate-container .donate-central-items {
        flex-wrap:wrap
    }

    .donate-banner .donate-container .donate-icon {
        padding-bottom: 2rem
    }

    .donate-banner .donate-container .donate-button {
        margin-left: 0;
        margin-bottom: 1rem
    }

    .donate-banner .donate-close-button {
        top: 1rem
    }
}

@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
    }
}

.hoc-banner {
    display: flex;
    position: relative;
    background-color: hsl(144,45%,36%);
    background-image: url("/images/hoc/bg-pattern.png");
    background-size: cover;
    padding: 0;
    height: 25rem;
    overflow: hidden;
    justify-content: center
}

.hoc-banner.mod-middle-banner {
    background-color: hsl(300,53%,60%)
}

.hoc-banner .hoc-container {
    margin: auto;
    width: 942px;
    height: 25rem;
    justify-content: flex-start
}

.hoc-banner .hoc-container .hoc-title-container {
    margin: 1.5rem 0;
    width: 100%;
    justify-content: space-between
}

.hoc-banner .hoc-banner-images {
    display: flex;
    width: 942px;
    justify-content: space-between
}

.hoc-banner .hoc-banner-image {
    border: 2px solid hsl(144,45%,36%);
    border-radius: 16px;
    background-color: #fff;
    width: 18.75em;
    height: 244px;
    overflow: hidden;
    box-sizing: border-box;
    justify-content: flex-start
}

.hoc-banner .hoc-banner-image.mod-middle-image {
    border: 2px solid hsl(300,53%,60%)
}

.hoc-banner .hoc-banner-image img {
    width: 18.75em;
    height: 10.3749999938em;
    object-fit: cover
}

.hoc-banner .hoc-banner-image .hoc-image-text {
    margin: auto auto;
    color: rgb(52%,36%,84%);
    font-size: 1rem;
    font-weight: bold
}

.hoc-banner .hoc-header {
    color: #fff
}

.hoc-banner .hoc-header {
    font-size: 2rem
}

.hoc-banner .hoc-more-activities {
    border-radius: 10px;
    background-color: #fff;
    padding: .5rem 1rem .75rem 1rem;
    color: rgb(52%,36%,84%);
    font-size: .75rem;
    font-weight: bold
}

.hoc-banner .hoc-more-activities img {
    margin-right: .25rem;
    width: 20px;
    height: 20px;
    vertical-align: text-bottom
}

@media only screen and (min-width: 768px)and (max-width: 942px) {
    .hoc-banner {
        height:23.5rem
    }

    .hoc-banner .hoc-container {
        bottom: 4rem;
        width: 38.75em
    }

    .hoc-banner .hoc-banner-images {
        width: 38.75em
    }

    .hoc-banner .hoc-banner-image {
        width: 18.75em
    }

    .hoc-hideable {
        display: none
    }
}

@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
    }
}

.feature-banner {
    display: flex;
    position: relative;
    background-color: hsl(144,45%,36%);
    background-image: url("/images/hoc/bg-pattern.png");
    background-size: cover;
    padding: 0;
    overflow: hidden;
    justify-content: center
}

.feature-banner .feature-container {
    margin: auto;
    width: 942px;
    justify-content: flex-start
}

.feature-banner .feature-container .feature-title-container {
    margin: 1.5rem 0;
    width: 100%;
    justify-content: space-between
}

.feature-banner .feature-banner-images {
    display: flex;
    width: 942px;
    justify-content: space-around;
    margin-bottom: 3rem
}

.feature-banner .feature-banner-image {
    border: 2px solid hsl(144,45%,36%);
    border-radius: 16px;
    background-color: #fff;
    width: 38.75em;
    height: 280px;
    overflow: hidden;
    box-sizing: border-box;
    justify-content: flex-start
}

.feature-banner .feature-banner-image img {
    width: 38.75em;
    height: 205px;
    object-fit: cover
}

.feature-banner .feature-banner-image .feature-image-text {
    margin: auto auto;
    color: rgb(52%,36%,84%);
    font-size: 1rem;
    font-weight: bold
}

.feature-banner .feature-header {
    color: #fff;
    font-size: 2rem
}

.feature-banner .feature-learn-more {
    border-radius: 10px;
    background-color: #fff;
    padding: .75rem 1rem;
    color: rgb(52%,36%,84%);
    font-size: .75rem;
    font-weight: bold
}

@media only screen and (min-width: 768px)and (max-width: 942px) {
    .feature-banner .feature-container {
        width:38.75em
    }

    .feature-banner .feature-banner-images {
        width: 38.75em
    }

    .feature-banner .feature-banner-image {
        width: 38.75em
    }

    .feature-hideable {
        display: none
    }
}

@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 {
    padding: 0
}

.inner.mod-splash {
    margin-top: 20px
}

.splash .splash-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between
}

.ie9 .splash .splash-header {
    display: table;
    margin: 0 -20px 20px -20px;
    min-width: 100%;
    border-spacing: 20px 0
}

.splash .splash-header .box {
    display: inline-block;
    width: calc(60% - 20px);
}

.ie9 .splash .splash-header .box {
    display: table-cell;
    vertical-align: top
}

.splash .splash-header .box.welcome {
    display: flex;
    flex-direction: column
}

.splash .splash-header .news {
    width: 40%
}

.splash .splash-header .news img {
    flex-shrink: 0
}

.splash .box {
    margin-bottom: 20px;
}

.splash-admin-panel dl {
    list-style: none
}

.splash-admin-panel dl dt {
    margin: 2rem 0 1rem 0;
    border-bottom: 1px solid hsl(0deg 0% 100%);
    font-size: large;
    font-weight: 700
}

.splash-admin-panel dl dd {
    margin-left: 0
}

.splash-admin-panel ul {
    padding: 0
}

.splash-admin-panel ul li {
    margin: 0;
    list-style: none
}

.modal-content.mod-confirmation {
    width: 31.25rem
}

.modal-content-iframe.mod-confirmation {
    border-radius: 1rem;
    width: 31.25rem;
    min-height: 20.625rem
}

.activity-ul {
    margin: 0;
    padding: 0
}

.activity-li {
    display: flex;
    margin: .75rem 0;
    list-style: none;
    align-items: center
}

.flex-row.mod-social-message {
    line-height: 1.25rem;
    flex-direction: column
}

.social-message {
    border: 0;
    padding: 0;
    overflow-wrap: anywhere;
    word-break: break-word
}

.activity-img {
    vertical-align: middle
}

.activity-li .avatar-wrapper {
    margin-right: .825rem;
    --avatar-size: 2rem;
    --frame-size: 0.57rem
}

.social-message-content {
    font-size: .9rem
}

.social-message-date {
    color: hsl(0,0%,70%);
    font-size: .65rem
}

@media only screen and (max-width : 479px) {
    .splash .splash-header {
        flex-wrap:wrap;
        justify-content: center
    }

    .splash .splash-header .box {
        width: 18.75em
    }

    .modal-content.mod-confirmation {
        width: 100%;
        overflow: scroll
    }

    .modal-content-iframe.mod-confirmation {
        border-radius: 0
    }
}

@media only screen and (min-width : 480px)and (max-width : 767px) {
    .splash .splash-header {
        flex-wrap:wrap;
        justify-content: center
    }

    .splash .splash-header .box {
        width: 28.75em
    }

    .modal-content.mod-confirmation {
        width: 100%;
        overflow: scroll
    }

    .modal-content-iframe.mod-confirmation {
        border-radius: 0;
        width: 639px
    }
}

@media only screen and (min-width : 768px)and (max-width : 941px) {
    .splash .splash-header {
        margin:0 auto;
        width: 38.75em
    }
}