﻿:root {
    --white: #fff;
    --yellow: #ffc940;
    --green: #00e4a2;
    --red: #ff4040;
    --circle: 50%;
    --sloppy: url(https://static.parastorage.com/services/editor-elements/dist/media/sloppyframe.d6793e19.png);
    --darkblue: #01203a;
    --purple: #7121ea;
    --mainback: var(--darkblue);
    --black: #000;
    --blue: blue;
    --UVMGreen: rgb(0,114,81);
    --SBCCRed: #FF4040;
    --USFGreen: rgb(0,114,81);
    --FoothillRed: #FF4040;
    --ArizonaBlue: #074478;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--mainback);
    color: var(--white);
}

.darkbluebg {
    background: var(--darkblue);
}

.yellowbg {
    background: var(--yellow);
}

.redbg {
    background: var(--red);
}
.whitebg {
    background: var(--white);
}

.nav-link, .nav-link:hover, .nav-link:active, .nav-link:visited {
    color: var(--white);
}

.black {
    color: var(--black);
}

.white {
    color: var(--white);
}

.yellow {
    color: var(--yellow);
}

.red {
    color: var(--red);
}

.darkblue {
    color: var(--darkblue);
}

.title {
    color: var(--yellow);
    font-size: 4em;
    letter-spacing: 0.15em;
    line-height: 1em;
}

.titletext {
    color: var(--white);
    font-size: 1.5em;
    line-height: 1.8em;
}

.subtitle {
    color: var(--yellow);
    font-size: 2em;
    letter-spacing: normal;
}

.heading {
    color: var(--green);
    font-size: 1.25em;
    letter-spacing: normal;
}

.headingtext {
    color: var(--white);
    font-size: 1.2em;
}

.redbox {
    color: var(--white);
    background: var(--red);
    cursor: pointer;
    border: 1px solid var(--red);
    padding: 10px 20px;
}

.imgRound {
    border-radius: var(--circle);
}

.imgSloppy {
    padding: 9px;
    background: var(--sloppy) top left no-repeat, var(--sloppy) bottom right no-repeat;
}

.department-ul {
    list-style: none;
    padding: 0;
}

    .department-ul li {
        color: var(--white);
        font-size: 1.2em;
        cursor: pointer;
    }

    .department-ul li:hover {
        background: var(--red);
    }

.btn-pill {
    font-size: 0.9em;
    background-color: var(--purple);
    border: none;
    color: var(--white);
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 16px;
    transition: background-color 0.2s;
}

    .btn-pill:hover {
        background-color: rgb(1,32,58, 0.75);
        color: var(--white);
        text-decoration: none;
    }

.btn-pill-big {
    font-size: 1.8em;
    background-color: var(--purple);
    border: none;
    color: var(--white);
    padding: 10px 16px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 16px;
}

a.clear {
}

a.clear:hover {
    text-decoration: none;
    color: inherit;
}

.ellipsis {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.blogcover {
    width: 454px;
    height: 341px;
}

.blogcontributorround {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.blogpostcontent::first-letter {
    font-size: 200%;
    color: #000;
}

button.clear, input[type="submit"].clear, input[type="reset"].clear {
    background: none;
    color: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

.dropshadow {
    text-shadow: 2px 2px 4px #000000;
}

.formbar-valid {
    background: var(--black);
    width: 100%;
    height: 4px;
}

.formbar-focus {
    background: var(--blue);
    width: 100%;
    height: 2px;
}

.formbar-invalid {
    background: var(--red);
    width: 100%;
    height: 4px;
}

a.footernav, a.footernav:hover {
    color: var(--yellow);
    text-decoration: underline;
    font-size: 1.3rem;
}

.grow {
    transition: all .3s ease-in-out;
}

    .grow:hover {
        transform: scale(1.1);
    }

.storyimg-big {
    width: 100%;
    max-width:728px;
}

.storyimg {
    width: 100%;
    max-width: 413px;
}


.uvmgreen {
    color: var(--UVMGreen);
}

.uvmgreenbg {
    background: var(--UVMGreen);
}

.sbccred {
    color: var(--SBCCRed);
}

.sbccredbg {
    background: var(--SBCCRed);
}

.usfgreen {
    color: var(--USFGreen);
}

.usfgreenbg {
    background: var(--USFGreen);
}

.foothillred {
    color: var(--FoothillRed);
}

.foothillredbg {
    background: var(--FoothillRed);
}

.arizonablue {
    color: var(--ArizonaBlue);
}

.arizonabluebg {
    background: var(--ArizonaBlue);
}

.storyblock {
    padding: 30px 10%;
}

.storyseparator {
    margin-top: 1px;
}

.storysubmit {
    font-size: 3rem;
}

.storysubmitname {
    font-size: 1.5rem;
}

.storyquestion {
    font-weight: bold;
    font-size: 1.3rem;
}

a.career, a.career:hover {
    color: var(--yellow);
    text-decoration: underline;
    font-size: 1.3rem;
}

.updatechangestop {
    padding: 20px 5px;
    border-radius: 30px 0 20px 0;
    border: 2px solid var(--purple);
    font-size: 1.2rem;
}

.demo-form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 0;
}

.demo-form-control-textarea {
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 0;
}

.valid.modified:not([type=checkbox]) {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    o/utline: 1px solid #26b050;
}

.valid.modified:not([type=checkbox]) {
    ou/tline: 1px solid #26b050;
}