/******************************************************************************
 *                               CSS Reset
 */

body, div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, table, tr, td, label, img {
    margin: 0px;
    padding: 0px;
}

a {
    color: inherit;
    text-decoration: none;
}

div, svg, img {
    display: block;
}


/******************************************************************************
 *                                 Utilities
 */

.clear {
    clear: both;
}


/******************************************************************************
 *                        Default background and font faces
 */

body {
    background-color: #ffffff;
    font-family: 'Source Sans Pro', sans-serif;

    /* We need the following for #content { min-height: 80% } to work */
    position: absolute;
    width: 100%;
    height: 100%;
}

body.auth {
    background-color: #0b52ac;
    background-image: url("background.jpg");
}

pre, code {
    font-family: 'Source Code Pro', monospace;
    font-size: 85%;
}

pre > code {
    font-size: inherit;
}


/******************************************************************************
 *                            Default button style
 */

.button {
    display: table;
    cursor: pointer;
}

.button a {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}


/******************************************************************************
 *                             Default form style
 */

input,
select,
textarea {
    /* Includes padding and border as part of input's computed size. Without
     * this, the input would overflow when specifying width = 100%. See:
     * https://stackoverflow.com/questions/16907518
     * https://www.w3schools.com/css/css3_box-sizing.asp
     *
     * In fact, I may want to apply this to all elements.
     */
    box-sizing: border-box;

    display: block;
    width: 100%;
    height: 40px;
    margin: 6px 0px;
    padding: 0px 10px; /* horizontal space between field border and text */

    border: 1px solid #bbb;
    border-radius: 5px;
    outline: none; /* remove additional border when in focus */
}

input,
select,
textarea,
.EasyMDEContainer .CodeMirror {
    background-color: #fff;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #111;
}

.EasyMDEContainer .editor-toolbar {
    border-top: 1px solid #bbb;
    border-left: 1px solid #bbb;
    border-right: 1px solid #bbb;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.EasyMDEContainer .CodeMirror {
    padding: 10px;
    border: 1px solid #bbb;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* Remove superfluous padding added by EasyMDE: this ensures a pixel-perfect
 * equality when switching between editor and preview without formatting */
.EasyMDEContainer .CodeMirror .CodeMirror-lines,
.EasyMDEContainer .CodeMirror pre.CodeMirror-line,
.EasyMDEContainer .CodeMirror pre.CodeMirror-line-like {
    padding: 0px;
}

.EasyMDEContainer .editor-preview {
    background-color: #fff;
}

input:first-child {
    margin-top: 0px;
}

input:last-child {
    margin-bottom: 0px;
}

input[type=submit] {
    height: 40px;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 25px;
    width: auto;
    border: none;

    background-color: #e0364c;
    font-family: 'Paytone One', sans-serif;
    font-weight: 400;
    font-size: 14px;
    color: white;

    cursor: pointer;
}

input[type=checkbox] {
    float: left;
    margin: 20px 0px 0px 0px;
    height: 16px;
    width: 16px;
}

.checkbox {
    overflow: hidden; /* hide the real checkbox */
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; /* prevents accidental text select when toggling checkbox */
}

label.checkbox {
    margin: 0px;
    padding: 0px;
}

.checkbox input[type=checkbox] {
    /* hide the real checkbox */
    position: absolute;
    left: -999em;
}

.checkbox .checkbox-icon:after,
.checkbox .checkbox-text {
    float: left;
    margin: 5px 0px;
}

.checkbox input[type=checkbox] + .checkbox-icon:after {
    width: 30px;
    font-family: 'FontAwesome';
    content: '\f0c8'; /* fa-square */
    padding-top: 1px; /* fine-tune vertical alignment */
    padding-left: 2px; /* avoid cropping antialiasing due to hidden overflow */
}

.checkbox input[type=checkbox]:checked + .checkbox-icon:after {
    content: '\f14a'; /* fa-check-square */
}

.checkbox .checkbox-text {
    width: calc(100% - 32px); /* 32px = icon width + padding-left */
}

.auth .content-box p.checkbox-text,
.content-box form p.checkbox-text {
    float: left;
    width: calc(100% - 32px);  /* 32px = checkbox width (16) + checkbox-text left margin (12) + safety margin (Firefox doesn't honor checkbox width) */
    margin: 15px 0px 0px 12px; /* 15px = same as checkbox - 5px for manual alignment */
    font-size: 16px;
    line-height: 1.6;
}

label {
    display: block;
    margin: 20px 0px 6px 0px;
    font-size: 16px;
    font-weight: 600;
    color: #252525;
}

label.has-forgot-password {
    float: left;
}

a.forgot-password {
    display: block;
    float: right;
    margin: 24px 0px 6px 0px;
    font-size: 12px;
}

.content-box form p.input-description {
    margin: 6px 0px;
    font-size: 12px;
    line-height: 1.4;
    color: #636363;
}

textarea {
   height: 100px;
   resize: vertical;
   padding-top: 10px;
   padding-bottom: 10px;
}

/* Honey-pot anti-spam measure. See:
 *
 *   https://serverfault.com/questions/31575
 *
 * Note that we use something a little more sophisticated than just
 * "display: none", in the hope that it also tricks smarter bots that
 * detect which fields are completely invisible.
 */
.youshallnotpass {
    display: block;
    position: absolute;
    z-index: -1;
    width: 10px;
    height: 10px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
}


/******************************************************************************
 *                                    Navbar
 */

#navbar {
    position: fixed;
    z-index: 10;
    overflow: visible;
    width: 100%;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

#navbar .navbar-main {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    position: relative; /* for menus to be absolute */
    width: 100%;
}

#navbar .background {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
}

#navbar,
#navbar-offset,
#navbar .navbar-links {
    height: 60px;
}

#navbar .navbar-more-options-button,
#navbar .navbar-title,
#navbar .navbar-login-button,
#navbar .navbar-account-button {
    height: 60px;
    line-height: 60px;
}

#navbar .navbar-home-button {
    height: 60px;
    width: 100px;
}

#navbar .navbar-more-options-button {
    height: 60px;
    width: 140px;
}

#navbar .navbar-link {
    height: 56px; /* 60px - border-top/bottom */
    line-height: 56px;
}

#navbar .navbar-more-options-menu.on,
#navbar .navbar-account-menu.on {
    top: 60px;
}

/* Note: we reduce the navbar height at 1100px (so that split-screen window on
 * FHD monitor, or mobile device held horizontally, have smaller navbar), but
 * hide the links and show the "More Options" button only starting at 600px, that
 * is for mobile device held vertically).
 */
@media screen and (max-width: 1100px) {
    #navbar,
    #navbar-offset,
    #navbar .navbar-links {
        height: 45px;
    }

    #navbar .navbar-more-options-button,
    #navbar .navbar-title,
    #navbar .navbar-login-button,
    #navbar .navbar-account-button {
        height: 45px;
        line-height: 45px;
    }

    #navbar .navbar-home-button {
        height: 45px;
        width: 75px;
    }

    #navbar .navbar-more-options-button {
        height: 45px;
        width: 105px;
    }

    #navbar .navbar-link {
        height: 41px; /* 45px - border-top/bottom */
        line-height: 41px;
    }

    #navbar .navbar-more-options-menu.on,
    #navbar .navbar-account-menu.on {
        top: 45px;
    }
}

#navbar .navbar-more-options-button,
#navbar .navbar-title,
#navbar .navbar-home-button,
#navbar .navbar-links,
#navbar .navbar-link,
#navbar .navbar-login-button,
#navbar .navbar-account-button {
    margin: 0;
    padding: 0;
}

#navbar .navbar-more-options-button { display: none; }
#navbar .navbar-title               { display: none; }
#navbar .navbar-home-button         { display: block; }
#navbar .navbar-links               { display: flex; flex-direction: row; flex-wrap: nowrap; }
#navbar .navbar-login-button        { display: block; }
#navbar .navbar-account-button      { display: block; }

@media screen and (max-width: 600px) {
    #navbar .navbar-more-options-button { display: block; }
    #navbar .navbar-title               { display: block; }
    #navbar .navbar-home-button         { display: none; }
    #navbar .navbar-links               { display: none; }
}

#navbar .navbar-more-options-button { flex-grow: 0; }
#navbar .navbar-title               { flex-grow: 1; }
#navbar .navbar-home-button         { flex-grow: 0; }
#navbar .navbar-links               { flex-grow: 1; }
#navbar .navbar-link                { flex-grow: 1; }
#navbar .navbar-login-button        { flex-grow: 0; }
#navbar .navbar-account-button      { flex-grow: 0; }

#navbar .navbar-links {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

#navbar .navbar-title,
#navbar .navbar-link,
#navbar .navbar-login-button,
#navbar .navbar-account-button {
    white-space: nowrap;
}

#navbar .navbar-more-options-button,
#navbar .navbar-home-button,
#navbar .navbar-login-button,
#navbar .navbar-account-button,
#navbar .navbar-link {
    user-select: none;
    cursor: pointer;
}

#navbar .navbar-home-button,
#navbar .navbar-more-options-button {
    background-image: url("vgcsoftware-navbar-logo.png");
    background-position: right center;
    background-repeat: no-repeat;
    background-size: contain;
}

#navbar .navbar-login-button .fa-sign-in {
    position: relative;
    top: 2px;
    padding-left: 10px;
}

@media screen and (max-width: 1100px) {
    #navbar .navbar-login-button .fa-sign-in {
        top: 1px;
        padding-left: 7px;
    }
}

#navbar .navbar-more-options-button {
    font-size: 21px;
    font-weight: 400;
    color: #404040;
}

#navbar .navbar-more-options-button i {
    padding-left: 10px;
    font-size: 21px;
    font-weight: 400;
    color: #404040;
}

#navbar .navbar-link,
#navbar .navbar-login-button,
#navbar .navbar-account-button {
    padding-left: 20px;
    padding-right: 20px;
}

#navbar .navbar-title,
#navbar .navbar-link,
#navbar .navbar-login-button,
#navbar .navbar-account-button {
    font-size: 18px;
    font-weight: 600;
    color: #252525;
}

@media screen and (max-width: 1100px) {
    #navbar .navbar-link,
    #navbar .navbar-login-button,
    #navbar .navbar-account-button {
        padding-left: 10px;
        padding-right: 10px;
    }

    #navbar .navbar-title,
    #navbar .navbar-link,
    #navbar .navbar-login-button,
    #navbar .navbar-account-button {
        font-size: 14px;
    }
}

@media screen and (max-width: 600px) {
    #navbar .navbar-title,
    #navbar .navbar-link,
    #navbar .navbar-login-button,
    #navbar .navbar-account-button {
        font-size: 12px;
    }
}

#navbar .navbar-account-button .arrow-down {
    display: inline-block;
    width: 0;
    height: 0;
    margin: 0px 0px 2px 10px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #252525;
}

#navbar .navbar-title,
#navbar .navbar-link {
    text-align: center;
}

#navbar .navbar-link {
    border-top-style: solid;
    border-top-width: 2px;
    border-top-color: transparent;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-bottom-color: transparent;
}

@media (hover: hover) {
    #navbar .navbar-more-options-button:hover i,
    #navbar .navbar-login-button:hover,
    #navbar .navbar-account-button:hover,
    #navbar .navbar-link:hover {
        color: #0b52ac;
    }

    #navbar .navbar-link:hover {
        border-bottom-color: #0b52ac;
    }
}

#navbar .navbar-more-options-button.on i,
#navbar .navbar-account-button.on,
#navbar .navbar-link.on {
    color: #0b52ac;
}

#navbar .navbar-link.on {
    border-bottom-color: #0b52ac;
}

/* Icons to the left of link/title names */
#navbar .navbar-title i,
#navbar .navbar-more-options-menu .menu-item i,
#navbar .navbar-link i {
    padding-right: 10px;
}


/******************************************************************************
 *                          Navbar Dropdown Menu
 */

#navbar .navbar-more-options-menu,
#navbar .navbar-account-menu {
    position: absolute;
    z-index: -2;
    width: 100%;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    border-bottom: solid 1px #eee;
    padding: 5px 0px;
}

#navbar .navbar-account-menu {
    width: auto;
    right: 20px;
}

@media screen and (max-width: 1100px) {
    #navbar .navbar-account-menu {
        right: 0px;
    }
}

#navbar .navbar-more-options-menu,
#navbar .navbar-account-menu {
    transition: top 0.3s ease;
    top: -250px;
}

#navbar .navbar-more-options-menu .menu-item,
#navbar .navbar-account-menu .menu-item {
    display: table;
    width: 100%;
    height: 50px;
}

#navbar .navbar-more-options-menu .menu-item form,
#navbar .navbar-more-options-menu .menu-item a,
#navbar .navbar-account-menu .menu-item form,
#navbar .navbar-account-menu .menu-item a {
    display: table-cell;
    width: 100%;
    height: 100%;
}

#navbar .navbar-more-options-menu .menu-item a,
#navbar .navbar-more-options-menu .menu-item input,
#navbar .navbar-account-menu .menu-item a,
#navbar .navbar-account-menu .menu-item input {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0px 25px;
    background: none;
    border-radius: 0;

    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: #222;

    cursor: pointer;
    text-align: left;
    vertical-align: middle;
}

@media screen and (max-width: 1100px) {
    #navbar .navbar-more-options-menu .menu-item,
    #navbar .navbar-account-menu .menu-item {
        height: 38px;
    }

    #navbar .navbar-more-options-menu .menu-item a,
    #navbar .navbar-more-options-menu .menu-item input,
    #navbar .navbar-account-menu .menu-item a,
    #navbar .navbar-account-menu .menu-item input {
        font-size: 14px;
    }
}

@media screen and (max-width: 600px) {
    #navbar .navbar-more-options-menu .menu-item,
    #navbar .navbar-account-menu .menu-item {
        height: 30px;
    }

    #navbar .navbar-more-options-menu .menu-item a,
    #navbar .navbar-more-options-menu .menu-item input,
    #navbar .navbar-account-menu .menu-item a,
    #navbar .navbar-account-menu .menu-item input {
        font-size: 12px;
    }
}

@media (hover: hover) {
    #navbar .navbar-more-options-menu .menu-item a:hover,
    #navbar .navbar-more-options-menu .menu-item input:hover,
    #navbar .navbar-account-menu .menu-item a:hover,
    #navbar .navbar-account-menu .menu-item input:hover {
        background-color: #e8e8e8;
    }
}


/******************************************************************************
 *                                    Subnavbar
 */

#subnavbar {
    position: relative;
    z-index: 9;
    overflow: visible;
    width: 100%;
}

#subnavbar .desktop-center {
    position: relative;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

#subnavbar {
    height: 45px;
}

#subnavbar-offset {
    display: none;
}

#subnavbar .subnavbar-menu {
   position: absolute;
   z-index: -2;
}


/******************************************************************************
 *                              Subnavbar Menu
 */

#subnavbar .subnavbar-menu-button {
    display: block;
    width: calc(100% - 40px); /* 40px = padding */
    padding: 0px 20px;
    height: 45px;
    line-height: 45px;

    background-color: #fff;
    border-bottom: solid 1px #ddd;

    font-family: 'Paytone One', sans-serif;
    font-weight: 400;
    font-size: 1.0em;
    color: #0b52ac;
    cursor: pointer;
    user-select: none;
}

#subnavbar .subnavbar-menu-button.on {
    color: #0b52ac;
}

@media (hover: hover) {
    #subnavbar .subnavbar-menu-button:hover {
        color: #0b52ac;
    }
}

#subnavbar .subnavbar-menu-button .arrow-down {
    display: inline-block;
    width: 0;
    height: 0;
    margin: 0px 0px 2px 10px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #0b52ac;
}

#subnavbar .subnavbar-menu-button.on .arrow-down {
    border-top-color: #0b52ac;
}

@media (hover: hover) {
    #subnavbar .subnavbar-menu-button:hover .arrow-down {
        border-top-color: #0b52ac;
    }
}

#subnavbar .subnavbar-menu {
    width: 100%;
    top: 44px;
    right: 0px;
    background-color: #fff;
    box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.2);
    border-bottom: solid 1px #eee;
    padding: 5px 0px;
}

#subnavbar .subnavbar-menu {
    transition: top 0.3s ease;
    top: -150px;
}

#subnavbar .subnavbar-menu.on {
    top: 44px;
}

#subnavbar .subnavbar-menu .menu-item {
    display: table;
    width: 100%;
    height: 40px;
}

#subnavbar .subnavbar-menu .menu-item form,
#subnavbar .subnavbar-menu .menu-item a {
    display: table-cell;
    width: 100%;
    height: 100%;
}

#subnavbar .subnavbar-menu .menu-item a,
#subnavbar .subnavbar-menu .menu-item input {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0px 25px;
    background: none;
    border-radius: 0;

    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
    font-size: 1.0em;
    color: #222;

    cursor: pointer;
    text-align: left;
    vertical-align: middle;
}

@media (hover: hover) {
    #subnavbar .subnavbar-menu .menu-item a:hover,
    #subnavbar .subnavbar-menu .menu-item input:hover {
        background-color: #e8e8e8;
    }
}


/******************************************************************************
 *                                 Signup widget
 */

#signup-widget {
    display: block;
    margin: 40px auto 0px auto;
    max-width: 560px;  /* same margin as <p> when screen width = 600px + eps */
    height: 230px;     /* fixed height to prevent pushing down next section when error message shown */
    overflow: hidden;  /* prevent widening page during overflowing animation */
}

#signup-widget .signup {
    width: 100%;
}

#signup-widget .signup form {
    display: block;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

#signup-widget .checkbox {
    margin-left: 20px;
    margin-right: 20px;
}

#signup-widget .signup-email-box {
    position: relative; /* so that .spinner can be absolute */
    margin-top: 20px;
}

#signup-widget .signup input[type=submit] {
    float: right;
    width: 160px;
    height: 50px;
    margin: 0px 20px 0px 0px;
    padding: 0px;
    border-radius: 0px 5px 5px 0px;
    font-size: 20px;
}

@media screen and (max-width: 600px) {
    #signup-widget .signup input[type=submit] {
        width: 120px;
        height: 40px;
        font-size: 16px;
    }
}

@media screen and (max-width: 450px) {
    #signup-widget .signup input[type=submit] {
        width: 100px;
        height: 35px;
        font-size: 14px;
    }
}

@media (hover: hover) {
    #signup-widget .signup input[type=submit]:hover {
        background-color: #e04d5e;
    }
}

#signup-widget .signup input[type=email],
#signup-widget .signup input[type=email]:focus {
    float: right;
    width: calc(100% - 200px); /* 200px = signup button (160) + left/right margins (20+20) */
    height: 50px;
    margin: 0px 0px 0px 20px;
    border-radius: 5px 0px 0px 5px;
    background-color: white;
    border-color: white;
    color: #222;
    font-size: 20px;
}

@media screen and (max-width: 600px) {
    #signup-widget .signup input[type=email],
    #signup-widget .signup input[type=email]:focus {
        width: calc(100% - 160px);
        height: 40px;
        font-size: 16px;
    }
}

@media screen and (max-width: 450px) {
    #signup-widget .signup input[type=email],
    #signup-widget .signup input[type=email]:focus {
        width: calc(100% - 140px);
        height: 35px;
        font-size: 14px;
    }
}

#signup-widget .signup input[type=email]::placeholder {
    color: #bbb;
}

#signup-widget .message-success {
    display: block;
    text-align: center;
}

#signup-widget .message-error p {
    display: block;
    float: left;
    margin: 0px;
    padding: 5px 0px 0px 4px;
}

#signup-widget .message-error svg {
    display: block;
    float: left;
    width: 22px;
    height: 22px;
    margin: 10px 8px 0px 20px;
}

@media screen and (max-width: 600px) {
    #signup-widget .message-error svg {
        width: 18px;
        height: 18px;
        margin: 9px 5px 0px 20px;
    }
}

#signup-widget .message-success p,
#signup-widget .message-error p {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: white;
}

.lightgrey #signup-widget .message-success p,
.lightgrey #signup-widget .message-error p {
    color: #252525;
}

@media screen and (max-width: 600px) {
    #signup-widget .message-success p,
    #signup-widget .message-error p {
        font-size: 16px;
    }
}

#signup-widget .message-success p {
    padding-top: 60px;
}

#signup-widget .message-success p .message-note,
#signup-widget .message-error p .message-note {
    display: block;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    font-size: 18px;
    color: #a7c3e0;
}

.lightgrey #signup-widget .message-success p .message-note,
.lightgrey #signup-widget .message-error p .message-note {
    color: #0b52ac;
}

@media screen and (max-width: 600px) {
    #signup-widget .message-success p .message-note,
    #signup-widget .message-error p .message-note {
        font-size: 14px;
    }
}

#signup-widget .message-success p .message-note a,
#signup-widget .message-error p .message-note a {
    font-weight: 300;
    text-decoration: underline;
    color: inherit;
}

/* Animation */

#signup-widget .signup input[type=submit].go {
    animation-name: signup-widget-submit-go-keyframes;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

@keyframes signup-widget-submit-go-keyframes {
    0%   { border-radius: 0px 5px 5px 0px; }
    99%  { border-radius: 0px 5px 5px 0px; }
    100% { border-radius: 5px 5px 5px 5px; }
}

#signup-widget .signup .spinner {
    position: absolute;
    top: 10px;
    right: 90px;
    width: 30px;
    height: 30px;
}

@media screen and (max-width: 600px) {
    #signup-widget .signup .spinner {
        top: 7px;
        right: 65px;
        height: 25px;
        width: 25px;
    }
}

@media screen and (max-width: 450px) {
    #signup-widget .signup .spinner {
        top: 6px;
        right: 60px;
        height: 22px;
        width: 22px;
    }
}

#signup-widget .signup input[type=email].go {
    animation-name: signup-widget-email-go-keyframes;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

@media screen and (max-width: 600px) {
    #signup-widget .signup input[type=email].go {
        animation-name: signup-widget-email-go-keyframes-medium;
    }
}

@media screen and (max-width: 450px) {
    #signup-widget .signup input[type=email].go {
        animation-name: signup-widget-email-go-keyframes-small;
    }
}

@keyframes signup-widget-email-go-keyframes {
    0% {
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 20px;
        width: calc(100% - 200px);
        border-width: 1px;
    }
    30% {
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 0px;
        width: calc(100% - 180px);
        border-width: 1px;
    }
    99% {
        padding-left: 0px;
        padding-right: 0px;
        margin-left: 0px;
        width: 0px;
        border-width: 1px;
    }
    100% {
        padding-left: 0px;
        padding-right: 0px;
        margin-left: 0px;
        width: 0px;
        border-width: 0px;
    }
}

@keyframes signup-widget-email-go-keyframes-medium {
    0% {
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 20px;
        width: calc(100% - 160px);
        border-width: 1px;
    }
    30% {
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 0px;
        width: calc(100% - 140px);
        border-width: 1px;
    }
    99% {
        padding-left: 0px;
        padding-right: 0px;
        margin-left: 0px;
        width: 0px;
        border-width: 1px;
    }
    100% {
        padding-left: 0px;
        padding-right: 0px;
        margin-left: 0px;
        width: 0px;
        border-width: 0px;
    }
}

@keyframes signup-widget-email-go-keyframes-small {
    0% {
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 20px;
        width: calc(100% - 140px);
        border-width: 1px;
    }
    30% {
        padding-left: 10px;
        padding-right: 10px;
        margin-left: 0px;
        width: calc(100% - 120px);
        border-width: 1px;
    }
    99% {
        padding-left: 0px;
        padding-right: 0px;
        margin-left: 0px;
        width: 0px;
        border-width: 1px;
    }
    100% {
        padding-left: 0px;
        padding-right: 0px;
        margin-left: 0px;
        width: 0px;
        border-width: 0px;
    }
}

#signup-widget .signup input[type=submit].go2 {
    animation-name: signup-widget-submit-go2-keyframes;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

@media screen and (max-width: 600px) {
    #signup-widget .signup input[type=submit].go2 {
        animation-name: signup-widget-submit-go2-keyframes-medium;
    }
}

@media screen and (max-width: 450px) {
    #signup-widget .signup input[type=submit].go2 {
        animation-name: signup-widget-submit-go2-keyframes-small;
    }
}

@keyframes signup-widget-submit-go2-keyframes {
    0%   {
        width: 160px;
        height: 50px;
        margin: 0px 20px 0px 0px;
        border-radius: 5px;
    }
    30%   {
        width: 70px;
        height: 70px;
        margin: -10px 65px 0px 0px;
        border-radius: 35px;
    }
    100%   {
        width: 0px;
        height: 0px;
        margin: 25px 100px 0px 0px;
        border-radius: 0px;
    }
}

@keyframes signup-widget-submit-go2-keyframes-medium {
    0%   {
        width: 120px;
        height: 40px;
        margin: 0px 20px 0px 0px;
        border-radius: 5px;
    }
    30%   {
        width: 60px;
        height: 60px;
        margin: -10px 50px 0px 0px;
        border-radius: 30px;
    }
    100%   {
        width: 0px;
        height: 0px;
        margin: 20px 80px 0px 0px;
        border-radius: 0px;
    }
}

@keyframes signup-widget-submit-go2-keyframes-small {
    0%   {
        width: 100px;
        height: 35px;
        margin: 0px 20px 0px 0px;
        border-radius: 5px;
    }
    30%   {
        width: 54px;
        height: 54px;
        margin: -10px 43px 0px 0px;
        border-radius: 27px;
    }
    100%   {
        width: 0px;
        height: 0px;
        margin: 17px 70px 0px 0px;
        border-radius: 0px;
    }
}

#signup-widget .message-success.go {
    position: relative;
    animation-name: signup-widget-message-success-go-keyframes;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
}

@keyframes signup-widget-message-success-go-keyframes {
    0%   { left: 10px; opacity: 0; }
    100% { left:  0px; opacity: 1; }
}

#signup-widget .message-error.go {
    position: relative;
    animation-name: signup-widget-message-error-go-keyframes;
    animation-duration: 0.4s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

@keyframes signup-widget-message-error-go-keyframes {
    0%   { left:  4px; }
    20%  { left: -4px; }
    40%  { left:  4px; }
    60%  { left: -4px; }
    80%  { left:  4px; }
    100% { left:  0px; }
}


/******************************************************************************
 *                         Content boxes layout
 */

#content {
    width: 100%;
}

.auth #content {
    overflow: visible; /* Let .content-box{box-shadow} overflow into footer */
}

.content-box {
    overflow: visible;
    margin: 0 auto;
    padding: 80px 0px 80px 0px;
}

@media screen and (max-width: 600px) {
    .content-box {
        padding: 40px 0px 40px 0px;
    }
}

/* Ensure that footer starts low enough in short pages.
 */
.stretch-vertically {
    min-height: calc(100vh - 300px);
}

.auth .content-box {
    margin: 30px auto;
    padding: 30px;
    max-width: 390px;
}

.auth .content-box:last-child {
    margin-bottom: 10px;
}

.content-box p,
.content-box h2,
.content-box h3,
.content-box h4,
.content-box ul,
.content-box ol,
.content-box form,
.content-box .box,
.content-box div.note,
.content-box div.quote,
.content-box table,
.content-box > pre,
.content-box > img,
.content-box .row {
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
}

.content-box p img {
    max-width: 100%;
    max-height: 650px;
    margin-left: auto;
    margin-right: auto;
}

/* Switch from auto margin to fixed margin when screen size makes the two equal:
 *
 *   980px = content-max-width + 2 * min-margin
 *         = 900px + 2 * 40px;
 */
@media screen and (max-width: 980px) {
    .content-box p,
    .content-box h2,
    .content-box h3,
    .content-box h4,
    .content-box ul,
    .content-box ol,
    .content-box form,
    .content-box .box,
    .content-box div.note,
    .content-box div.quote,
    .content-box > pre,
    .content-box .row {
        margin-left: 40px;
        margin-right: 40px;
    }

    .content-box > img {
        width: calc(100% - 80px);
        margin-left: 40px;
        margin-right: 40px;
    }
}

@media screen and (max-width: 600px) {
    .content-box p,
    .content-box h2,
    .content-box h3,
    .content-box h4,
    .content-box ul,
    .content-box ol,
    .content-box form,
    .content-box .box,
    .content-box div.note,
    .content-box div.quote,
    .content-box > pre,
    .content-box .row {
        margin-left: 20px;
        margin-right: 20px;
    }

    .content-box > img {
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
    }
}

.content-box p {
    margin-top: 20px;
    margin-bottom: 20px;
}

@media screen and (max-width: 600px) {
    .content-box p {
        margin-top: 16px;
        margin-bottom: 16px;
    }
}

.content-box p:first-child {
    margin-top: 0px;
}

.content-box p:last-child {
    margin-bottom: 0px;
}

.auth .content-box p {
    margin: 20px 0px;
}

.auth .content-box p:first-child {
    margin-top: 0px;
}

.auth .content-box p:last-child {
    margin-bottom: 0px;
}

.content-box p.center {
    text-align: center;
}

.content-box h2 {
    margin-top: 40px;
    margin-bottom: 30px;
}

@media screen and (max-width: 600px) {
    .content-box h2 {
        margin-top: 30px;
        margin-bottom: 24px;
    }
}

.content-box h2:first-child {
    margin-top: -10px;
}

.auth .content-box h2 {
    margin: 20px 0px 0px 0px;
    text-align: center;
}

.content-box h3 {
    margin-top: 30px;
    margin-bottom: 24px;
}

@media screen and (max-width: 600px) {
    .content-box h3 {
        margin-top: 24px;
        margin-bottom: 20px;
    }
}

.content-box h3:first-child {
    margin-top: 0px;
}

.content-box h4 {
    margin-top: 24px;
    margin-bottom: 20px;
}

@media screen and (max-width: 600px) {
    .content-box h4 {
        margin-top: 20px;
        margin-bottom: 16px;
    }
}

.content-box ul,
.content-box ol {
    margin-top: 16px;
    margin-bottom: 16px;
}

.content-box li {
    margin-top: 16px;
    margin-bottom: 16px;
    margin-left: 30px;
}

@media screen and (max-width: 600px) {
    .content-box li {
        margin-left: 20px;
    }
}

.content-box ul ul,
.content-box ul ol,
.content-box ol ul,
.content-box ol ol,
.content-box li {
    margin-right: 0px
}

.content-box form {
    margin-top: 20px;
    margin-bottom: 20px;
}

.auth .content-box form {
    margin: 20px 0px;
}

.auth .content-box form:last-child {
    margin-bottom: 0px;
}

.content-box form .submit-spinner-container {
    display: inline-block; /* inherit width of children instead of parent */
    position: relative; /* spinner is absolute */
    margin: 25px 0px 5px 0px;
}

.content-box form .submit-spinner-container input[type=submit] {
    margin: 0;
    padding-left: 40px;
    padding-right: 40px;
}

.content-box form .submit-spinner-container .spinner {
    display: none;
    position: absolute;
    top: 10px;
    left: 10px;
}

.content-box form.waiting .submit-spinner-container .spinner {
    display: inline-block;
}

.content-box table {
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.content-box .table-overflow {
    overflow: auto;
}

.content-box td,
.content-box th {
    text-align: left;
    vertical-align: top;
    padding: 10px 15px 0px 0px;
    word-wrap: break-word;
}

.content-box td:last-child,
.content-box th:last-child {
    padding-right: 0px;
}

/* We use a table to left-align each h3 title after its title numbering.
 *
 * Code:
 *     <h3><table><tr>
 *       <td>4.</td>
 *       <td>Utilisation illégale ou frauduleuse de Comptes de Membre</td>
 *     </tr></table></h3>
 *
 * Result:
 *     4. Utilisation illegale ou frauduleuse
 *        de Comptes de Membre
 */

.legal .content-box table {
    margin-left: 0px;
    margin-right: 0px;
    padding-left: 0px;
    padding-right: 0px;
    border-spacing: 0px;
}

.legal .content-box td {
    padding: 0px 0px 0px 10px;
    text-align: left;
    vertical-align: top;
}

.legal .content-box td:first-child {
    padding-left: 0px;
}


/******************************************************************************
 *                   Content box colors, borders, and text style
 */

.content-box {
    background-color: #fff;
}

.content-box.blue {
    background-color: #0b52ac;
}

.content-box.hero-blue {
    background-color: #0b52ac;
    background-image: url(background.jpg);
}

.content-box.white {
    background-color: #fff;
}

.content-box.white + .content-box.white {
    background-image: linear-gradient(to bottom, #f3f3f3 0px, #ffffff 250px);
}

.content-box.lightgrey {
    background-color: #eeeeee;
}

.content-box.lightgrey + .content-box.lightgrey {
    background-image: linear-gradient(to bottom, #eaeaea 0px, #f3f3f3 250px);
}

.content-box.midgrey {
    background-color: #dadada;
}

.auth .content-box {
    background-color: white;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

.content-box,
.content-box .checkbox { /* .checkbox style overrides label style */
    font-weight: 400;
    font-size: 20px;
    line-height: 1.6;
    color: #252525;
}

@media screen and (max-width: 1100px) {
    .content-box,
    .content-box .checkbox {
        font-size: 18px;
    }
}

@media screen and (max-width: 600px) {
    .content-box,
    .content-box .checkbox {
        font-size: 16px;
    }
}

.auth .content-box {
    font-size: 16px; /* same font-size for all devices */
}

.content-box table {
    font-size: 16px;
}

.content-box th {
    font-weight: 600;
}

@media screen and (max-width: 1100px) {
    .content-box table {
        font-size: 14px;
    }
}

@media screen and (max-width: 600px) {
    .content-box table {
        font-size: 12px;
    }
}

.content-box a {
    font-weight: 600;
    color: #0b52ac;
}

.content-box h2 {
    font-family: 'Paytone One', sans-serif;
    font-weight: 400;
    font-size: 38px;
    color: #353535;
}

@media screen and (max-width: 1100px) {
    .content-box h2 {
        font-size: 30px;
    }
}

@media screen and (max-width: 600px) {
    .content-box h2 {
        font-size: 24px;
    }
}

.auth .content-box h2 {
    font-size: 26px; /* same font-size for all devices */
}

.content-box h3 {
    font-family: 'Paytone One', sans-serif;
    font-weight: 400;
    font-size: 24px;
    color: #353535;
}

@media screen and (max-width: 1100px) {
    .content-box h3 {
        font-size: 22px;
    }
}

@media screen and (max-width: 600px) {
    .content-box h3 {
        font-size: 20px;
    }
}

.content-box h4 {
    font-weight: 600;
    font-size: 20px;
    color: #353535;
}

@media screen and (max-width: 1100px) {
    .content-box h4 {
        font-size: 18px;
    }
}

@media screen and (max-width: 600px) {
    .content-box h4 {
        font-size: 16px;
    }
}

.content-box ul,
.content-box ul ul,
.content-box ol ul {
    list-style-type: disc;
}

.content-box ol {
    list-style-type: decimal;
}

.content-box ul ol,
.content-box ol ol {
    list-style-type: lower-alpha;
}


/******************************************************************************
 *                     Discord
 */

.content-box.discord {
    background-color: #202225;
}

.content-box.discord p {
    color: #ffffff;
}

.content-box.discord h2 {
    color: #ffffff;
}

.content-box.discord p.discord-button {
    text-shadow: none;
    text-align: center;
    font-size: 36px;
    margin-top: 40px;
    margin-bottom: 30px;
}

@media screen and (max-width: 600px) {
    .content-box.discord p.discord-button {
        font-size: 22px;
    }
}

.content-box p.discord-button a {
    font-family: 'Paytone One', sans-serif;
    font-weight: 400;
    color: #dcddde;
    background-color: #36393f;
    border-radius: 5px;
    padding: 10px 40px;
}

@media (hover: hover) {
    .content-box p.discord-button a:hover {
        background-color: #7289da;
        color: #ffffff;
    }
}


/******************************************************************************
 *                     Partners & support
 */

.content-box.partners .row {
    display: flex;
    max-width: 900px;
    margin-top: 40px;
}

.content-box.partners .column {
    flex: 33.33%;
    padding: 30px;
}

@media screen and (max-width: 900px) {
    .content-box.partners .column {
        padding: 10px;
    }
}

/******************************************************************************
 *                     Signup section
 */

.content-box.content-box-signup {
    background-color: #0b52ac;
}

.content-box.content-box-signup p,
.content-box.content-box-signup h2,
.content-box.content-box-signup label {
    color: #ffffff;
}

@media (hover: hover) {
    .content-box.content-box-signup label.checkbox:hover .checkbox-icon {
        text-shadow: 0px 0px 2px #ffffff;
    }
}


/******************************************************************************
 *                                  Error
 */

.content-box p.error {
    position: relative;
    color: #d42020;
    font-weight: 400;
    font-size: 14px;
    background-color: #ffd1d1;
    border-radius: 3px;
    border: 1px solid #ff9d9d;
    padding: 5px 10px;
    margin: 12px 0px;
}

.content-box p.error:after,
.content-box p.error:before {
    content: '';
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-top: 0;
    margin-left: -10px;
    margin-top: -10px;
}

.content-box p.error:after {
    left: 20px;
    border-width: 10px;
    border-bottom-color: #ffd1d1;
}

.content-box p.error:before {
    left: 19px;
    border-width: 11px;
    top: -1px;
    border-bottom-color: #ff9d9d;
}


/******************************************************************************
 *                               Pricing
 */

.content-box .pricing {
    display: block;
    box-sizing: border-box;
    overflow: auto;
    width: 90%;
    max-width: 800px;
    margin: 40px auto;
    padding: 0px;
}

.content-box .pricing .row {
    display: block;
    box-sizing: border-box;
    overflow: auto;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

.content-box .pricing .col {
    display: block;
    box-sizing: border-box;
    float: left;
    overflow: auto;
    margin: 0px;
    padding: 0px;
}

.content-box .pricing .row.product-type .col {
    min-height: 1px; /* prevent first column from having a zero height: without
                        this, the second column ignores the width of the first
                        column, and starts at the very left of the table. */
}

.content-box .pricing .row.license-type .col {
    min-height: 50px;
    line-height: 50px;
}

.content-box .pricing .row.product-type .col,
.content-box .pricing .row.license-type .col {
    width: 35%;
    margin-left: 0%;
}

.content-box .pricing .row.product-type .col:first-child,
.content-box .pricing .row.license-type .col:first-child {
    width: 27%;
    margin-left: 3%;
}

.content-box .pricing .row.license-category h4,
.content-box .pricing .row.license-category p {
    display: block;
    box-sizing: border-box;
    float: left;
    overflow: auto;
    width: 100%;
    padding: 0px;
    margin-left: 0px;
    margin-right: 0px;
}

.content-box .pricing .row.license-type {
    background: #fff;
    border-radius: 5px;
    margin-bottom: 10px;
}

.content-box .pricing .app-name img {
    display: block;
    width: 80%;
    max-width: 100px;
    margin-left: auto;
    margin-right: auto;
}

.content-box .pricing .app-name p {
    margin: 0px 0px 10px 0px;
    padding: 0px;
    font-family: 'Paytone One', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.6;
    text-align: center;
    color: #252525;
}

@media screen and (max-width: 600px) {
    .content-box .pricing .app-name p {
        font-size: 16px;
    }
}

@media screen and (max-width: 450px) {
    .content-box .pricing .app-name img {
        width: 60%;
    }
    .content-box .pricing .app-name p {
        font-size: 12px;
    }
}

@media screen and (max-width: 380px) {
    .content-box .pricing .app-name p {
        font-size: 10px;
    }
}

.content-box .pricing .row.license-category h4 {
    font-weight: 600;
    font-size: 20px;
    text-align: left;
    color: #252525;
    margin-top: 20px;
    margin-bottom: 0px;
}

.content-box .pricing .row.license-category-first h4 {
    margin-top: 0px;
}

@media screen and (max-width: 600px) {
    .content-box .pricing .row.license-category h4 {
        font-size: 16px;
    }
}

@media screen and (max-width: 450px) {
    .content-box .pricing .row.license-category h4 {
        font-size: 14px;
    }
}

.content-box .pricing .row.license-category p {
    font-weight: 400;
    font-style: italic;
    font-size: 16px;
    text-align: left;
    color: #565656;
    padding: 0px;
    margin-top: 5px;
    margin-bottom: 5px;
}

@media screen and (max-width: 600px) {
    .content-box .pricing .row.license-category p {
        font-size: 14px;
    }
}

@media screen and (max-width: 450px) {
    .content-box .pricing .row.license-category p {
        font-size: 12px;
    }
}

.content-box .pricing .price-type {
    font-weight: 600;
    font-size: 16px;
    text-align: left;
    color: #565656;
}

@media screen and (max-width: 600px) {
    .content-box .pricing .price-type {
        font-size: 14px;
    }
}

@media screen and (max-width: 450px) {
    .content-box .pricing .price-type {
        font-size: 12px;
    }
}

.content-box .pricing .price {
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    color: #406fab;
}

@media screen and (max-width: 600px) {
    .content-box .pricing .price {
        font-size: 16px;
    }
}

@media screen and (max-width: 450px) {
    .content-box .pricing .price {
        font-size: 14px;
    }
}


/******************************************************************************
 *                              Users Table
 */

.content-box .email {
    max-width: 16em;
}

.content-box .public-name {
    max-width: 12em;
}

.content-box .isnt-activated {
    color: #bbb;
}

.content-box .is-activated {
    /* normal color */
}

.content-box .is-suspended {
    color: #ff8600;
}

.content-box .is-deleted {
    color: #f11;
}


/******************************************************************************
 *             Notes, quotes, messages, code blocks, and other boxes
 */

/* The idea is to use the class .box for all box-like inserts in the middle of a
 * paragraph / sections. It is currently only used for the "rewards" boxes in the
 * dashboard: for historical reasons license keys and alpha versions use the class
 * .note instead. For future refactoring, we can find them with:
 *
 *     grep -r "note" .
 *
 * The class .quote is currently only used in /legal/terms, for the "droits de
 * retractation" template letter. We can find it with:
 *
 *     grep -r "quote" .
 *
 * The class .message apply to all afaxified forms. It is only used to style the
 * answer of the request, not the form validations errors, which are styled
 * differently (see ".content-box p.error"). You can find them with.
 *
 *     grep -r "ajaxify" .
 *
 * Note that we need to match "div.quote", rather than just ".quote", otherwise
 * it conflicts with easyMDE's quote button.
 */
.content-box .box,
.content-box .note,
.content-box div.quote,
.content-box .message,
.content-box pre:not(.CodeMirror-line) {
    box-sizing: border-box;
    position: relative;
    overflow: auto;
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 5px 20px;
    border-radius: 8px;
    box-shadow: 1px 1px 5px -2px #ddd;
    background-color: #fff;
}

@media screen and (max-width: 600px) {
    .content-box .box,
    .content-box .note,
    .content-box div.quote,
    .content-box .message {
        padding: 5px 12px;
    }
}

.content-box .box p,
.content-box .note p,
.content-box div.quote p,
.content-box .message p,
.content-box .box ul,
.content-box .note ul,
.content-box div.quote ul,
.content-box .message ul {
    margin: 12px 0px;
}

.content-box .box p,
.content-box .note p,
.content-box div.quote p,
.content-box .message p, {
    font-size: 16px;
    font-weight: 400;
}

@media screen and (max-width: 600px) {
    .content-box .box p,
    .content-box .note p,
    .content-box div.quote p,
    .content-box .message p {
        font-size: 14px;
    }
}

.content-box pre:not(.CodeMirror-line),
.content-box code:not(pre > code) {
    box-shadow: none;
    background-color: rgba(0, 0, 0, 0.05);
}

.EasyMDEContainer .CodeMirror .cm-comment {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 0px;
    display: inline-block; /* ensures background spans the full line height */
}

.content-box code:not(pre > code) {
    padding: 0.2em 0.4em;
    border-radius: 5px;
}

.content-box .message {
    box-shadow: none;
    display: none;
}

.content-box .message.success,
.content-box .message.error {
    display: block;
}

.content-box .message.success {
    background-color: #e0f4e0;
}

.content-box .message.error {
    background-color: #ffebeb;
}

.content-box.lightgrey .message.success,
.content-box.lightgrey .message.error {
    background-color: #fff;
}

.content-box .message.error {
    background-color: #ffebeb;
}

.content-box .message.success p {
    color: #28712c;
}

.content-box.lightgrey .message.success p {
    color: inherit;
}

.content-box .message.error p {
    color: #e0364c;
}

.content-box .box .box-icon {
    position: absolute;
    left: 20px;
    top: 16px;
    width: 40px;
}

.content-box .box.with-icon {
    padding-left: 80px;
}

.content-box .box h3 {
    margin: 10px 0px 10px 0px;
    font-size: 16px;
    color: #444;
}

.content-box .box p {
    margin: 10px 0px 10px 0px;
    font-size: 16px;
    color: #666;
}

@media screen and (max-width: 1100px) {
    .content-box .box .box-icon {
        left: 17px;
        width: 34px;
    }

    .content-box .box.with-icon {
        padding-left: 68px;
    }

    .content-box .box h3 {
        font-size: 14px;
    }

    .content-box .box p {
        font-size: 14px;
    }
}

@media screen and (max-width: 600px) {
    .content-box .box .box-icon {
        left: 15px;
        width: 30px;
    }

    .content-box .box.with-icon {
        padding-left: 60px;
    }

    .content-box .box h3 {
        font-size: 14px;
    }

    .content-box .box p {
        font-size: 14px;
    }
}

/******************************************************************************
 *                               Auth homepage link
 */

.auth a.homepage-link {
    position: relative; /* make it appear on top of next sibling instead of below */
    display: block;
    width: 80px;
    height: 80px;
    margin: 20px auto -70px auto;
    background-image: url("auth-logo.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/******************************************************************************
 *                                  Content box titles
 */

.content-box h2 {
    position: relative;
}

.content-box h2 i,
.content-box h2 img.title-image {
    position: absolute;
}

.content-box h2 i {
    top: -10px;
    font-size: 2em;
    color: #406fab;
}

@media screen and (max-width: 600px) {
    .content-box h2 i {
        top: -4px;
        font-size: 1.8em;
    }
}

.content-box h2 i + span,
.content-box h2 img.title-image + span {
    margin-left: 105px; /* indent first line */
    display: block;     /* indent other lines */
}

.content-box h2 i.extra-margin + span,
.content-box h2 img.extra-margin.title-image + span {
    margin-left: 120px; /* indent first line */
    display: block;     /* indent other lines */
}

@media screen and (max-width: 600px) {
    .content-box h2 i + span,
    .content-box h2 img.title-image + span {
        margin-left: 60px;
    }

    .content-box h2 i.extra-margin + span,
    .content-box h2 img.extra-margin.title-image + span {
        margin-left: 70px; /* indent first line */
        display: block;     /* indent other lines */
    }

    .content-box h2 img.title-image.circle-crop + span {
        margin-left: 75px;
    }
}

.content-box h2 img.title-image.circle-crop {
    top: -16px;
    height: 80px;
    border-radius: 50%;
}

@media screen and (max-width: 600px) {
    .content-box h2 img.title-image.circle-crop {
        top: -14px;
        height: 60px;
    }
}

.content-box.discord h2 img.title-image {
    top: 0px;
    left: 0px;
    height: 60px;
}

@media screen and (max-width: 600px) {
    .content-box.discord h2 img.title-image {
        top: 0px;
        left: 0px;
        height: 40px;
    }

    .content-box.discord h2 img.title-image + span {
        margin-left: 65px;
    }
}

.content-box.content-box-signup h2 img.title-image {
    top: 0px;
    left: -50px;
    height: 57px;
}

@media screen and (max-width: 600px) {
    .content-box.content-box-signup h2 img.title-image {
        top: 0px;
        left: -32px;
        height: 38px;
    }

    .content-box.content-box-signup h2 img.title-image + span {
        margin-left: 75px;
    }
}

.content-box h2 i.fa-heart {
    color: #e0364c;
}


/******************************************************************************
 *                              Content box other media
 */

#content .hero-img {
    display: block;
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 800px;
    margin: 0px;
    padding: 0px;
}

@media screen and (max-width: 600px) {
    #content .hero-img {
        height: 400px;
    }
}

/* We want a video that is horizontally centered with custom colors on the
 * left/right margins, respect the 16:9 aspect ratio, and have a given max-width.
 * Somehow, I couldn't find how to do this without adding three layers of
 * wrapping HTML markup. Duh. Oh well, it's ugly but it works. Please let me
 * know if you have a better way.
 */

.wrap-video-1 {
    width: 100%;
    background-color: #000;
}

.wrap-video-2 {
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
    background-color: black;
}

.hero-video .wrap-video-2 {
    max-width: 1500px;
}

.wrap-video-3 {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 56%;
}

.wrap-video-3 .spinner {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    padding: 28% 0%;
}

.wrap-video-3 iframe {
    /* Note: there may be tiny black borders appearing due to aspect ratio numerical errors.
       This is not a problem anymore due to using black borders anyway.
       If you want to get rid of these, you can use:
         top: -1%;
         top: -1%;
         width: 102%;
         height: 102%;
       Unfortunately, the overflow wasn't properly hidden on Chromium, causing
       really bad flickers */
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    visibility: hidden;
}

.wrap-video-3 iframe.loaded {
    visibility: visible;
    animation-name: video-loaded-keyframes;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes video-loaded-keyframes {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* If Javascript disabled, display link to Youtube instead of embedded iframe */
       .wrap-video-3 iframe { display: block; }
       .wrap-video-3 p      { display: none; }
.no-js .wrap-video-3 iframe { display: none; }
.no-js .wrap-video-3 p      { display: block;
    color: white;
    text-align: center;
    margin-top: -20px; /* These two properties keep the text */
    padding-top: 28%;  /* approximately centered vertically */
}
.no-js .wrap-video-3 {
    background-color: black;
}

.content-box .wrap-image-1 {
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;

    margin-top: 30px;
    margin-bottom: 30px;
}

.content-box .wrap-image-2 {
    margin-left: 20px;
    margin-right: 20px;
}

.content-box .wrap-image-2 img {
    width: 100%;
}

#header-boxes {
    width: 90%;
    max-width: 600px;
    margin: 50px auto;
}

.header-box {
    width: 50%;
}

.header-box img {
    width: 65%;
    max-width: 126px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.header-box p {
    margin: 10px 0px;
    font-family: 'Paytone One', sans-serif;
    font-weight: 400;
    font-size: 24px;
    text-align: center;
    color: #fff;
}

@media screen and (max-width: 600px) {
    .header-box p {
        font-size: 18px;
    }
}

@media screen and (max-width: 380px) {
    .header-box p {
        font-size: 16px;
    }
}

#header-vgc-illustration-box {
    float:left;
}

#header-vgc-animation-box {
    float: right;
}


/******************************************************************************
 *                                  Donate box
 */

.donation-widget {
    overflow: auto;
}

.donation-carousel {
    overflow: auto;
}

.donation-tiers {
    /* Note: the intent is to have "overflow: auto", but there was an
       unexpected vertical scrollbar appearing on Chromium, Ubuntu 14.04,
       allowing to scroll ~1px down. It might be a floating point error.
       Using overflow: hidden fixes that. */
    overflow: hidden;
    margin: 0 auto;
    text-align: center;
}

@media screen and (max-width: 1460px) {
    .donation-tiers {
        max-width: 800px; /* 2 rows on medium screens */
    }
}

.donation-tier {
    overflow: auto;
    display: inline-block;
    text-align: left;
    margin: 8px 10px;
    padding-bottom: 20px;
    border: solid 1px #bbb;
    border-radius: 5px;
    background: #fff;
    width: 220px;
}

a.donation-carousel-control {
    display: none;
}

/* Enable swiping on small screens */
@media screen and (max-width: 600px) {

    .donation-carousel {
        overflow: hidden;
    }

    .donation-tiers {
        overflow: visible;
        text-align: left;
        white-space: nowrap;
        transition: transform 0.2s;
        transform: translate(0px); /* <- set in app.js */
    }

    .donation-tiers.swiping {
        transition: transform 0s;
    }

    .donation-tier {
        white-space: normal;
    }

    a.donation-carousel-control {
        display: block;
        cursor: pointer;
        width: 50px;
        height: 50px;
        margin-top: -10px;
    }

    a.donation-carousel-control.end {
        display: none;
    }

    a.donation-carousel-control svg {
        display: block;
        fill: #565656;
        stroke: none;
        width: 30px;
        height: 7px;
        margin: 20px 10px;
    }

    a.donation-carousel-control.right {
        float: right;
    }

    a.donation-carousel-control.left {
        float: left;
    }
}

.content-box .donation-tier h3 {
    font-size: 18px;
    margin: 20px 0px 20px 0px;
    text-align: center;
}

.content-box .donation-tier img {
    display: block;
    margin: 0px auto;
    width: 200px;
}

.donation-tier ul {
    margin: 10px 0px 0px 35px;
    min-height: 100px;
}

.donation-tier li {
    font-size: 14px;
    margin: 0px;
}

.donation-tier p.credit {
    font-size: 12px;
    margin: 0px 0px 0px 20px;
}

.donation-tier hr {
    border: none;
    border-top: solid 1px #aaa;
    margin: 20px 0px;
}

.donation-tier .button {
    margin: 10px auto 0px auto;
}

.donation-tier .button a {
    width: 190px;
    height: 35px;
    border: 1px solid #e0364c;
    border-radius: 5px;
    background-color: #e0364c;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

@media (hover: hover) {
    .donation-tier .button a:hover {
        background-color: #e6465b;
    }
}

.donation-tier .button.paypal a {
    border: solid 1px #0b52ac;
    background: none;
    color: #0b52ac;
    font-weight: 400;
}

@media (hover: hover) {
    .donation-tier .button.paypal a:hover {
        border-color: #3d8bec;
        color: #3d8bec;
    }
}

.donation-tier p.donation-precision {
    color: #555;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
    margin: 2px 0px;
}

.donation-tier p.donation-or {
    overflow: hidden;
    margin: 0;
    text-align: center;
    font-size: 14px;
    font-weight: 300;
}

.donation-tier p.donation-or:before,
.donation-tier p.donation-or:after {
    background-color: #aaa;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}

.donation-tier p.donation-or:before {
    right: 0.5em;
    margin-left: -50%;
}

.donation-tier p.donation-or:after {
    left: 0.5em;
    margin-right: -50%;
}

/* Smaller widths and fonts on small screens */

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

    .donation-tier {
        width: 180px;
    }

    .content-box .donation-tier h3 {
        font-size: 15px;
        margin: 15px 0px 8px 0px;
    }

    .content-box .donation-tier img {
        width: 100%;
    }

    .donation-tier ul {
        margin: 0px 0px 0px 30px;
        min-height: 90px;
    }

    .donation-tier li {
        font-size: 12px;
    }

    .donation-tier p.credit {
        font-size: 10px;
        margin: 0px 0px 0px 15px;
    }

    .donation-tier .button a {
        width: 155px;
        height: 26px;
        font-size: 12px;
    }

    .donation-tier p.donation-precision {
        font-size: 10px;
    }
}


/******************************************************************************
 *                                    Footer
 */

#footer {
    overflow: auto;
    width: 100%;
    padding: 10px 0px;

    background-color: #202223;

    color: #d8dbde;
    font-size: 14px;
    font-weight: 400;
}

#footer .desktop-center {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

#footer a {
    font-weight: 600;
}

#footer div.footer-block {
    overflow: auto;
    margin: 15px;
}

#footer div.left {
    float: left;
}

#footer div.right {
    float: right;
}

@media screen and (max-width: 620px) {
    #footer div.footer-block {
        float: none;
    }
}

#footer div.donate {
    width: 260px;
}

#footer div.social {
    width: 285px;
}

#footer div.terms {
    width: 270px;
}

#footer ul {
    overflow: auto;
    list-style:none;
    list-style-type: none;
}

#footer li {
    display: block;
    float: left;
    margin: 10px 10px;
}

#footer ul.link-logo-list li:first-child {
    margin-right: 0;
    text-align: left;
}

#footer ul.link-logo-list li:first-child span {
    font-size: 11px;
}

#footer .social ul.link-logo-list li:first-child {
    width: 110px;
}

#footer .donate ul.link-logo-list li:first-child {
    width: 70px;
}

#footer ul.link-logo-list a {
    display: block;
}

#footer ul.link-logo-list svg {
    width: 20px;
    height: 20px;
    fill: #d8dbde;
}

@media (hover: hover) {
    #footer a:hover {
        color: #0b52ac;
    }

    #footer a:hover svg {
        fill: #0b52ac;
    }
}

#footer ul.link-logo-list svg.patreon-logo {
    margin-top: -2px;
    width: 68px;
    height: 24px;
}

#footer ul.link-logo-list svg.tipeee-logo {
    margin-top: -2px;
    width: 64px;
    height: 24px;
}

#footer ul.link-logo-list svg.paypal-logo {
    margin-top: -2px;
    width: 95px;
    height: 24px;
}

#footer ul.link-logo-list svg.youtube-logo {
    width: 90px;
    height: 20px;
}

#footer ul.link-logo-list svg.discord-logo {
    margin-left: -6px;
    margin-top: -8px;
    margin-bottom: -8px;
    width: 112px;
    height: 40px;
}

#footer ul.link-logo-list svg.github-logo {
    margin-top: -2px;
    width: 90px;
    height: 24px;
}

/* centered horizontal menu based on:
 *     https://matthewjamestaylor.com/css-centred-menus
 */
#footer-auth {
    position: relative;
    float: left;
    overflow: hidden; /* otherwise scrollbars may appear due to the left:50% trick */
    width: 100%;
}

#footer-auth ul {
    position: relative;
    clear: left;
    float: left;
    left: 50%;

    list-style:none;
    text-align:center;
}

#footer-auth li {
    position: relative;
    display: block;
    float: left;
    right: 50%;

    margin: 10px 10px;

    color: #fff;
    font-size: 14px;
    font-weight: 400;
    text-shadow: 1px 1px 0px #103e79;
}

#footer-auth li:first-child {
    margin-left: 0px;
}

#footer-auth li:last-child {
    margin-right: 0px;
}

#footer-auth a {
    font-weight: 600;
}


/******************************************************************************
 *                                    Spinner
 */

.spinner {
    display: inline-block;
    height: 20px;
    width: 20px;
    /* Note: size must be an even number, otherwise on some browsers the rotation
       center is not exactly the center which makes the animation look weird */

    animation-name: spinner-keyframes;
    animation-duration: 0.4s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
}

@keyframes spinner-keyframes {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/******************************************************************************
 *                                License Keys
 */

.content-box .license-key {
    overflow: hidden; /* the svg's rotation makes its bounding box overflow */
}

.content-box .license-key svg {
    float: left;
    width: 35px;
    margin: 10px 20px 10px 8px;
    transform: rotate(-25deg);
}

.content-box .license-key .license-key-product {
    margin: 10px 0px 10px 0px;
    font-size: 16px;
    color: #444;
}

.content-box .license-key .license-key-code {
    margin: 10px 0px 10px 0px;
    font-family: 'Source Code Pro', monospace;
    font-weight: 400;
    font-size: 12px;
    color: #666;
}

@media screen and (max-width: 600px) {
    .content-box .license-key {
        max-width: 300px;
    }

    .content-box .license-key svg {
        width: 30px;
    }

    .content-box .license-key .license-key-product {
        font-size: 14px;
    }

    .content-box .license-key .license-key-code {
        font-size: 11px;
    }
}


/******************************************************************************
 *                                Releases
 */

.content-box .release .release-files {
    overflow: auto;
    list-style: none;
    list-style-type: none;
}

.content-box .release .release-files {
    margin-top: 10px;
    margin-bottom: 10px;
}

.content-box .release .release-files li {
    display: block;
    float: left;
    margin: 0px 20px 0px 0px;
    text-align: center;
}

.content-box .release .release-files li a {
    display: block;
}

.content-box .release .release-files li a svg {
    width: 25px;
    height: 25px;
    fill: #d8dbde;
    margin-left: auto;
    margin-right: auto;
}

.content-box .release .release-files li p {
    margin: 2px 0px 0px 0px;
    font-size: 9px;
    color: #00adef;
}

.content-box .release .release-files li p.lock {
    color: #cccccc;
}


/******************************************************************************
 *                                News
 */

.content-box.content-box-news-entries {
    padding-top: 20px;
    padding-bottom: 20px;
}

@media screen and (max-width: 1060px) {
    .content-box.content-box-news-entries {
        padding-top: 0px;
        padding-bottom: 20px;
    }
}

.content-box .news-entries {
    overflow: auto;
    padding-left: calc(50% - 780px);
    padding-right: calc(50% - 780px);
}

@media screen and (max-width: 1580px) {
    .content-box .news-entries {
        padding-left: calc(50% - 520px);
        padding-right: calc(50% - 520px);
    }
}

@media screen and (max-width: 1060px) {
    .content-box .news-entries {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.content-box .news-entry {
    display: block;
    box-sizing: border-box;
    overflow: hidden;
    width: 480px;
    height: 360px; /* fine-tuned to show two lines of title */
    float: left;
    border: none;
    border-radius: 8px;
    box-shadow: 1px 1px 5px -2px #ddd;
    background-color: #ffffff;
    margin: 20px;
    user-select: none;
}

@media (hover: hover) {
    .content-box .news-entry:not(.locked):hover {
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    }
}

@media screen and (max-width: 1060px) {
    .content-box .news-entry {
        float: none;
        height: auto;
        width: auto;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
}

.content-box .news-entry .news-preview-image-container {
    overflow: hidden; /* prevents blur from overflowing below */
}

.content-box .news-entry .news-preview-image,
.content-box .news-entry .news-how-to-unlock {
    display: block;
    width: 480px;
    height: 270px;
}

.content-box .news-entry .news-preview-image {
    background-size: cover;
    background-position: center;
    border-bottom: solid 1px #e2e2e2;
}

.content-box .news-entry .news-how-to-unlock {
    position: absolute;
    z-index: 1;
}

.content-box .news-entry .news-how-to-unlock p {
    font-weight: 600;
    font-size: 22px;
    color: #ffffff;
    text-align: center;
    margin: 0px;
    padding: 0px;
    padding-bottom: 5px;
}

.content-box .news-entry .news-how-to-unlock p i {
    font-size: 70px;
    padding-top: 50px;
}

.content-box .news-entry .news-how-to-unlock .button {
    margin-left: auto;
    margin-right: auto;
}

.content-box .news-entry .news-how-to-unlock .button a {
    background-color: #e0364c;
    color: #ffffff;
    font-weight: 600;
    font-size: 16px;
    border-radius: 5px;
    padding: 10px 20px;
}

@media (hover: hover) {
    .content-box .news-entry .news-how-to-unlock .button a:hover {
        background-color: #e6465b;
    }
}

@media screen and (max-width: 520px) {
    .content-box .news-entry .news-how-to-unlock p {
        font-size: 18px;
    }

    .content-box .news-entry .news-how-to-unlock p i {
        font-size: 50px;
        padding-top: calc(25% - 60px);
    }

    .content-box .news-entry .news-how-to-unlock .button a {
        font-size: 14px;
    }
}

.content-box .news-entry.locked .news-preview-image {
    transform: scale(1.3); /* prevents blur vignetting */
    filter: blur(10px) brightness(0.8);
}

.content-box .news-entry .news-date,
.content-box .news-entry .news-lock-info {
    margin: 10px 10px 0px 10px;
    font-weight: 600;
    font-size: 12px;
}

.content-box .news-entry .news-date {
    float: left;
    color: #999;
}

.content-box .news-entry .news-lock-info {
    float: right;
    color: green;
}

.content-box .news-entry.locked .news-lock-info {
    color: #e0364c;
}

.content-box .news-entry .news-lock-info i {
    margin-right: 10px;
}

.content-box .news-entry .news-title {
    margin: 0px 10px 10px 10px;
    font-family: 'Paytone One', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #444;
}

@media screen and (max-width: 520px) {
    .content-box .news-entry .news-preview-image,
    .content-box .news-entry .news-how-to-unlock {
        width: 100%;
        height: auto;
        padding-bottom: 56.25%; /* 16:9 */
    }

    .content-box .news-entry .news-date {
        font-size: 11px;
    }

    .content-box .news-entry .news-title {
        font-size: 14px;
    }
}

.content-box .button.load-more {
    position: relative; /* so that <i> and .spinner can be absolute */
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 20px;
}

@media screen and (max-width: 520px) {
    .content-box .button.load-more {
        margin-top: 10px;
        margin-bottom: 20px;
    }
}

.content-box .button.load-more.no-more {
    display: none;
}

.content-box .button.load-more a {
    color: #0b52ac;
    font-weight: 600;
    font-size: 16px;
    border-radius: 5px;
    padding: 10px 0px;
}

.content-box .button.load-more a span {
    margin-left: 40px;
}

.content-box .button.load-more a i,
.content-box .button.load-more .spinner {
    position: absolute; /* prevent affecting span position during i/svg switch */
}

.content-box .button.load-more a i {
    font-size: 20px;
    top: 10px;
    left: 10px;
}

.content-box .button.load-more .spinner {
    top: 10px;
    left: 5px;
}

/* We use an SVG spinner because font-based spinners tend to wobble, see:
 *   https://github.com/FortAwesome/Font-Awesome/issues/671
 * The SVG has to be defined inline (not via <use xlink:href="..." />),
 * otherwise we can't apply CSS on top of it, e.g., set its stroke color.
 */
.content-box .button.load-more .spinner svg {
    display: none;
    stroke-linecap: butt;
    fill: none;
    stroke: #0b52ac;
}

.content-box .button.load-more.loading a i {
    display: none;
}

.content-box .button.load-more.loading .spinner svg {
    display: block;
}


/******************************************************************************
 *                            Markdown editor
 */

/* Note: see also "Default form style" section for generic styling, as well as
 * the "Notes, quotes, messages, code blocks, and other boxes" section.
 */

/* Do not color-highlight HTML tags: coloring them is confusing
 * because the color highlighting is sometimes wrong. See:
 * https://github.com/Ionaru/easy-markdown-editor/issues/234
 */
.EasyMDEContainer .CodeMirror .cm-tag,
.EasyMDEContainer .CodeMirror .cm-attribute,
.EasyMDEContainer .CodeMirror .cm-string {
    color: inherit;
}