html {
  --lightGray:#363a66;
  --gray:#6a6d88;
  --blue:#44d8eb;
  --brightBlue:#3a2ad0;
  --btnBlue:#3a2ad0;
  --darkBlue:#fff;
  --blueGray:#516075;
  --green:#43f6c8;
  --red: red;
  --violet:#6b43f0;
  --turquoise:#44d8eb;
  --borderGray:var(--lightGray);
  --darkerBorderGray:#9b9dbf;
  --bgGray:#eff2f5;
  --bgBlueGray:#ebe9fb;
  --textGray:#9b9dbf;
  --newsletterBg:#1b1f48;
  --white:#fff;
  --black:#000;
  --bodyBg:#080b38;
  --footerBg:#3a2ad0;
  --darkBoxBg:var(--bgGray);
  --darkBg:var(--bodyBg);
  --altBlockBg:#080b38;
  --dropdownBg:#3a2ad0;
  --dropdownFootBg:#2e1fbb;
  --formInputBg:transparent;
  --dropdownText:var(--white);
    --avatar: var(--bodyBg);
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: var(--turquoise);
}

h3 {
    font-weight: 100;
}

.centered-div {
    text-align: center;
}

/* LAYOUT CSS */
.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

#layout {
    padding: 0;
}

.header {
    text-align: center;
    top: auto;
    margin: 3em auto;
}

.sidebar {
    background: var(--bodyBg);
    color: var(--white);
}

.header_top {
    background: var(--bodyBg);
    color: var(--white);
    padding: 0.5em 0;
}

.brand-title-top {
    margin: 0 auto;
    text-transform: uppercase;
    text-align: center;
}

.question {
    margin: 0.5em;
    font-size: 1.2em;
    text-align: center;
    font-weight: bold;
}

.menu-left {
    margin: 1em 0 1em 1em;
    text-align: left;
}

.menu-right {
    margin: 1em 1em 1em 0;
    text-align: right;
}

.description {
    text-transform: uppercase;
    margin: 0.5em;
    color: var(--gray);
    font-size: 1.0em;
    font-weight: 100;
    text-align: center;
}

.radio_clicker {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    font-size: 1.0em;
    font-weight: 100;
    text-align: center;
}

.radio_clicker:hover {
    cursor: pointer;
}

a.pure-button-primary {
    background-color: var(--darkBg);
}

.button-margin {
    margin: 1em 0 1em 0;
}

.style-img {
    margin: 0 1em 0 1em;
}

.result-left {
    margin: 0 0.5em 0 1.5em;
}

.result-right {
    margin: 0 1.5em 0 0.5em;
}

.brand-title,
.brand-tagline {
    margin: 0;
}
.brand-title {
    text-transform: uppercase;
}
.brand-tagline {
    /*font-weight: 300;*/
    color: rgb(176, 202, 219);
}

.intro {
    width: 100%;
    background-color: var(--bgGray);
    border: 0;
    margin-top: 3%;
    padding: 1em 2em 1em 2em;
    color: var(--blueGray);
}

.intro h2 {
    color: var(--black);
}

.intro-description ul {
    list-style-type: none;
}

.intro-description ul li {
    position: relative;
    padding-left: 2em;
    margin: 1em 0;
}

.intro-description ul li::before {
    content: "";
    position: absolute;
    left: 1em;
    top: 50%;
    width: 6px;
    height: 6px;
    background-color: var(--btnBlue);
    transform: translateY(-50%);
}
.message {
    width: 100%;
    background-color: var(--bgGray);
    border: 0;
    padding: 1em 2em 1em 2em;
    color: var(--blueGray);
    margin-bottom: 1em;
}

.message h3{
    font-weight: 1000;
    color: var(--darkBg);
}

.comment {
    color: var(--darkBg);
}

/* Make the navigation 100% width on phones */
#nav {
    width: 100%;
    position: relative;
    text-align: right;
}
/* Show the "Menu" button on phones */
#nav .nav-menu-button {
    display: block;
    top: 0.5em;
    right: 0.5em;
    position: absolute;
}

.pure-menu-link {
    padding: .5em 1em;
    font-size: 130%;
}

/* When "Menu" is clicked, the navbar should be 80% height */
#nav.active {
    height: 80%;
}
.nav-inner {
    display: block;
    margin-top: 1em;
}

/*
 * -- NAV BAR STYLES --
 * Styling the default .pure-menu to look a little more unique.
 */
#nav .pure-menu {
    background: transparent;
    border: none;
    text-align: center;
}
#nav .pure-menu-link:hover,
#nav .pure-menu-link:focus {
    background: rgb(55, 60, 90);
}
#nav .pure-menu-selected {
    background: rgb(55, 60, 90);
}
#nav .pure-menu-link {
    color: var(--white);
}
#nav .pure-menu-heading {
    border-bottom: none;
    font-size:110%;
    color: rgb(75, 113, 151);
}

.content-subhead {
    text-transform: uppercase;
    color: #aaa;
    border-bottom: 1px solid #eee;
    padding: 0.4em 0;
    font-size: 80%;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.content {
    padding: 2em 1em 0;
}

.post {
    padding-bottom: 2em;
}
.post-title {
    font-size: 2em;
    color: #222;
    margin-bottom: 0.2em;
}
.post-button {
    float: left;
    margin-top: 1em;
}
.post-avatar {
    border: 1px solid var(--avatar);
    border-top-color: var(--avatar);
    border-right-color: var(--avatar);
    border-bottom-color: var(--avatar);
    border-left-color: var(--avatar);
    -webkit-border-radius: .75rem;
    -moz-border-radius: .75rem;
    border-radius: 0;
    color: var(--avatar);
    display: inline-block;
    float: right;
    font-weight: 500;
    letter-spacing: 1px;
    margin-left: 1em;
    padding: 1em;
    text-transform: uppercase;
}
.post-description {
    font-family: Georgia, "Cambria", serif;
    color: #444;
    line-height: 1.8em;
}
.post-meta {
    color: #999;
    font-size: 90%;
    margin: 0;
}

.post-category {
    margin: 0 0.1em;
    padding: 0.3em 1em;
    color: #fff;
    background: #999;
    font-size: 80%;
}
    .post-category-design {
        background: #5aba59;
    }
    .post-category-pure {
        background: #4d85d1;
    }
    .post-category-yui {
        background: #8156a7;
    }
    .post-category-js {
        background: #df2d4f;
    }

.post-images {
    margin: 1em 0;
}
.post-image-meta {
    margin-top: -3.5em;
    margin-left: 1em;
    color: #fff;
    text-shadow: 0 1px 1px #333;
}

.footer {
    padding: 1em 0;
}
.footer a {
    color: #ccc;
    font-size: 80%;
}
.footer .pure-menu a:hover,
.footer .pure-menu a:focus {
    background: none;
}

@media (min-width: 48em) {
    .content {
        padding: 2em 3em 0;
        margin-left: 25%;
    }

    .header {
        margin: 40% 2em 0;
        text-align: right;
    }

    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
    }

    .footer {
        text-align: center;
    }

    #nav {
        height: 100%;
    }

    #nav .pure-menu {
        background: transparent;
        border: none;
        text-align: right;
    }

    .pure-menu-link {
        padding: .5em 1em;
        font-size: 100%;
    }
}

.button-success,
.button-error,
.button-warning,
.button-admin{
    /*background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgMzIgMTEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDExIiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGU+LnN0MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8yXyl9PC9zdHlsZT48ZyBzdHlsZT0ib3BhY2l0eTouMzk2MjtlbmFibGUtYmFja2dyb3VuZDpuZXciPjxkZWZzPjxwYXRoIGlkPSJTVkdJRF8xXyIgZD0iTTAgMGgzMnYxMUgweiIvPjwvZGVmcz48Y2xpcFBhdGggaWQ9IlNWR0lEXzJfIj48dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgc3R5bGU9Im92ZXJmbG93OnZpc2libGUiLz48L2NsaXBQYXRoPjxnIGNsYXNzPSJzdDEiPjxkZWZzPjxwYXRoIGlkPSJTVkdJRF8zXyIgZD0iTTUgM2gyN3Y1SDV6Ii8+PC9kZWZzPjxjbGlwUGF0aCBpZD0iU1ZHSURfNF8iPjx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzNfIiBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZSIvPjwvY2xpcFBhdGg+PHBhdGggc3R5bGU9ImNsaXAtcGF0aDp1cmwoI1NWR0lEXzRfKTtmaWxsOm5vbmU7c3Ryb2tlOiNmZmY7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1taXRlcmxpbWl0OjEwIiBkPSJNNS41IDUuNWgyMS40Ii8+PC9nPjxnIGNsYXNzPSJzdDEiPjxkZWZzPjxwYXRoIGlkPSJTVkdJRF81XyIgZD0iTTI5IDhjMS40IDAgMi41LTEuMSAyLjUtMi41UzMwLjQgMyAyOSAzcy0yLjUgMS4xLTIuNSAyLjVTMjcuNSA4IDI5IDh6Ii8+PC9kZWZzPjxjbGlwUGF0aCBpZD0iU1ZHSURfNl8iPjx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzVfIiBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZSIvPjwvY2xpcFBhdGg+PGcgc3R5bGU9ImNsaXAtcGF0aDp1cmwoI1NWR0lEXzZfKSI+PGRlZnM+PHBhdGggaWQ9IlNWR0lEXzdfIiBkPSJNNSAzaDI3djVINXoiLz48L2RlZnM+PGNsaXBQYXRoIGlkPSJTVkdJRF84XyI+PHVzZSB4bGluazpocmVmPSIjU1ZHSURfN18iIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlIi8+PC9jbGlwUGF0aD48ZyBzdHlsZT0iY2xpcC1wYXRoOnVybCgjU1ZHSURfOF8pO2VuYWJsZS1iYWNrZ3JvdW5kOm5ldyI+PGRlZnM+PHBhdGggaWQ9IlNWR0lEXzlfIiBkPSJNMTEtMTJoMzZ2MzVIMTF6Ii8+PC9kZWZzPjxjbGlwUGF0aCBpZD0iU1ZHSURfMTBfIj48dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF85XyIgc3R5bGU9Im92ZXJmbG93OnZpc2libGUiLz48L2NsaXBQYXRoPjxnIHN0eWxlPSJjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMF8pIj48ZGVmcz48cGF0aCBpZD0iU1ZHSURfMTFfIiBkPSJNMjYgM2g2djVoLTZ6Ii8+PC9kZWZzPjxjbGlwUGF0aCBpZD0iU1ZHSURfMTJfIj48dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xMV8iIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlIi8+PC9jbGlwUGF0aD48cGF0aCBzdHlsZT0iY2xpcC1wYXRoOnVybCgjU1ZHSURfMTJfKTtmaWxsOiM0OTRjYTAiIGQ9Ik0yNSAyaDh2N2gtOHoiLz48Y2lyY2xlIGN4PSIyOSIgY3k9IjUuNSIgc3R5bGU9ImNsaXAtcGF0aDp1cmwoI1NWR0lEXzEyXyk7ZmlsbDpub25lO3N0cm9rZTojZmZmO3N0cm9rZS13aWR0aDozO3N0cm9rZS1taXRlcmxpbWl0OjEwIiByPSIyLjUiLz48L2c+PC9nPjwvZz48L2c+PC9nPjwvc3ZnPg==), url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwIiB5PSIwIiB2aWV3Qm94PSIwIDAgMzIgMTEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMyIDExIiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGU+LnN0MXtjbGlwLXBhdGg6dXJsKCNTVkdJRF8yXyl9PC9zdHlsZT48ZyBzdHlsZT0ib3BhY2l0eTouMzk2MjtlbmFibGUtYmFja2dyb3VuZDpuZXciPjxkZWZzPjxwYXRoIGlkPSJTVkdJRF8xXyIgZD0iTTAgMGgzMnYxMUgweiIvPjwvZGVmcz48Y2xpcFBhdGggaWQ9IlNWR0lEXzJfIj48dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgc3R5bGU9Im92ZXJmbG93OnZpc2libGUiLz48L2NsaXBQYXRoPjxnIGNsYXNzPSJzdDEiPjxkZWZzPjxwYXRoIGlkPSJTVkdJRF8zXyIgZD0iTTEgM2gyN3Y1SDF6Ii8+PC9kZWZzPjxjbGlwUGF0aCBpZD0iU1ZHSURfNF8iPjx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzNfIiBzdHlsZT0ib3ZlcmZsb3c6dmlzaWJsZSIvPjwvY2xpcFBhdGg+PHBhdGggc3R5bGU9ImNsaXAtcGF0aDp1cmwoI1NWR0lEXzRfKTtmaWxsOm5vbmU7c3Ryb2tlOiNmZmY7c3Ryb2tlLWxpbmVjYXA6c3F1YXJlO3N0cm9rZS1taXRlcmxpbWl0OjEwIiBkPSJNMjcgNS41SDUuNiIvPjwvZz48ZyBjbGFzcz0ic3QxIj48ZGVmcz48cGF0aCBpZD0iU1ZHSURfNV8iIGQ9Ik0zLjUgOEMyLjEgOCAxIDYuOSAxIDUuNVMyLjEgMyAzLjUgM0M1IDMgNi4xIDQuMSA2LjEgNS41UzUgOCAzLjUgOHoiLz48L2RlZnM+PGNsaXBQYXRoIGlkPSJTVkdJRF82XyI+PHVzZSB4bGluazpocmVmPSIjU1ZHSURfNV8iIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlIi8+PC9jbGlwUGF0aD48ZyBzdHlsZT0iY2xpcC1wYXRoOnVybCgjU1ZHSURfNl8pIj48ZGVmcz48cGF0aCBpZD0iU1ZHSURfN18iIGQ9Ik0xIDNoMjd2NUgxeiIvPjwvZGVmcz48Y2xpcFBhdGggaWQ9IlNWR0lEXzhfIj48dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF83XyIgc3R5bGU9Im92ZXJmbG93OnZpc2libGUiLz48L2NsaXBQYXRoPjxnIHN0eWxlPSJjbGlwLXBhdGg6dXJsKCNTVkdJRF84Xyk7ZW5hYmxlLWJhY2tncm91bmQ6bmV3Ij48ZGVmcz48cGF0aCBpZD0iU1ZHSURfOV8iIGQ9Ik0tMTQtMTJoMzZ2MzVoLTM2eiIvPjwvZGVmcz48Y2xpcFBhdGggaWQ9IlNWR0lEXzEwXyI+PHVzZSB4bGluazpocmVmPSIjU1ZHSURfOV8iIHN0eWxlPSJvdmVyZmxvdzp2aXNpYmxlIi8+PC9jbGlwUGF0aD48ZyBzdHlsZT0iY2xpcC1wYXRoOnVybCgjU1ZHSURfMTBfKSI+PGRlZnM+PHBhdGggaWQ9IlNWR0lEXzExXyIgZD0iTTEgM2g2djVIMXoiLz48L2RlZnM+PGNsaXBQYXRoIGlkPSJTVkdJRF8xMl8iPjx1c2UgeGxpbms6aHJlZj0iI1NWR0lEXzExXyIgc3R5bGU9Im92ZXJmbG93OnZpc2libGUiLz48L2NsaXBQYXRoPjxwYXRoIHN0eWxlPSJjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMl8pO2ZpbGw6IzQ5NGNhMCIgZD0iTTAgMmg4djdIMHoiLz48Y2lyY2xlIGN4PSIzLjUiIGN5PSI1LjUiIHN0eWxlPSJjbGlwLXBhdGg6dXJsKCNTVkdJRF8xMl8pO2ZpbGw6bm9uZTtzdHJva2U6I2ZmZjtzdHJva2Utd2lkdGg6MztzdHJva2UtbWl0ZXJsaW1pdDoxMCIgcj0iMi41Ii8+PC9nPjwvZz48L2c+PC9nPjwvZz48L3N2Zz4=);*/
    /*background-position: left -.5rem center, right -.5rem center;*/
    /*background-repeat: no-repeat, no-repeat;*/
    /*background-size: 1.9rem auto, 1.9rem auto;*/
    box-shadow: 0 10px 20px -5px rgba(var(--btnBlue), .5);
    color: var(--white);
    line-height: 1.5;
    overflow: hidden;
    padding: .85rem 2.5rem;
    text-decoration: none;
}

@media (max-width: 48em) {
  .hide-sm {
    display: none !important;
  }
}

.button-finish {
    background-color: var(--blue);
    text-transform: uppercase;
}

.button-try-again {
    background-color: var(--red);
    text-transform: uppercase;
}

.button-success {
    background-color: var(--violet);
    text-transform: uppercase;
}

.button-error {
    background-color: var(--btnBlue);
    text-transform: uppercase;
}

.button-warning {
    background-color: var(--turquoise);
}

.button-admin {
    background-color: var(--black);
}

.pointer-hover:hover {
    cursor: pointer;
}