/*** Font Styles ***/
.italic {
    font-style: italic;
}

.light {
    font-weight: 300;
}

.normal {
    font-weight: normal;
}

.semibold {
    font-weight: 600;
}

.bold {
    font-weight: bold;
}

.bolder {
    font-weight: bolder;
}

.text-shadow {
    text-shadow: 2px 2px 3px #000000;
}

.text-shadow-soft {
    text-shadow: 0 1px 2px #0000002e;
}

.underline {
    text-decoration: underline;
}

.small {
    font-size: 0.8em;
}

.large {
    font-size: 1.2em;
}

.x-large {
    font-size: 1.4em;
}

.xx-large {
    font-size: 1.4em;
}

.xxx-large {
    font-size: 1.4em;
}

@media screen and (min-width: 1600px) {
    .xx-large {
        font-size: 1.6em;
    }

    .xxx-large {
        font-size: 2.3em;
    }
}

/*** Text Alignment ***/
.left {
    text-align: left;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

/*** Misc Layout ***/
.full-width {
    width: 100%;
}

.full-height {
    height: 100%;
}

.display-block {
    display: block;
}

.display-inline {
    display: inline;
}

.display-none {
    display: none;
}

.float-right {
    float: right;
}

.float-left {
    float: left;
}

.float-none {
    float: none;
}

.box-shadow {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

.box-shadow-inset {
    box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.5);
}

.list-unstyled {
    list-style: none;
}

.overflow-x-auto {
    overflow-x: auto;
}

.cursor-move {
    cursor: move;
}


/*** Colours ***/
.white {
    color: #FFF;
}

.grey {
    color: #333;
}

.light-grey {
    color: #e6e6e6;
}

.gold {
    color: #9B997B;
}

.blue {
    color: #06C;
}

.light-blue {
    color: #00a3e0;
}

.dark-blue {
    color: #1c223c;
}

.navy-blue {
    color: #004a93;
}

.red {
    color: red;
}

.green {
    color: green;
}

.light-green {
    color: #8CB840;
}

.dark-green {
    color: #4a6b2c
}


/*** Background Colours ***/
.bg-dark-grey {
    background-color: #333;
}

.bg-dark-grey-gradient {
    background: radial-gradient(at 60% 250%, #777777, #000);
}

.bg-light-grey {
    background-color: #F1F4F9;
}

.bg-dark-blue {
    background-color: #1c223c;
}

.bg-dark-blue-gradient {
    background: radial-gradient(at 60% 250%, #2d2d6b, #1c223c);
}

.bg-diagonal-light-blue {
    background: linear-gradient(to bottom left, #06c, #00478d);
}

.bg-dark-to-light-blue-gradient {
    background: linear-gradient(to right, #002548, #0066cc);
}

.bg-dark-to-light-green-gradient {
    background: linear-gradient(to bottom left, #799941 0%, #8CB840 50%);
}

.bg-smartscan-blue {
    background-color: #00a3e0;
}

.bg-light-green {
    background-color: #8CB840;
}

.bg-smart-green {
    background-color: #96B716;
}

.bg-light-grey {
    background-color: #F1F4F9;
}

.bg-blue {
    background-color: #06c;
}

.bg-slightly-dark-blue {
    background-color: #005cb5;
}

.bg-red {
    background-color: #ffc1c1;
}

.bg-white {
    background-color: #ffffff;
}

.bg-white-transparent-gradient {
    background: rgba(255, 255, 255, 0.9);
}

/*** Buttons ***/
.button,
a.button {
    border: none;
    border-radius: 0.25em;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-size: 90%;
    font-family: "myriad-pro", Arial, Helvetica, sans-serif;
    margin: 0.25em auto;
    padding: 0.5em 1em;
    text-align: center;
    white-space: nowrap;
}

@media screen and (min-width: 1280px) {
    .button,
    a.button {
        font-size: 110%;
    }
}

.button.white-border,
a.button.white-border {
    background: transparent;
    border: 2px solid #fff;
    color: #FFF;
}

.button.gold-border,
a.button.gold-border {
    border: 2px solid #9b997b;
    color: #9b997b;
}

.button.grey,
a.button.grey {
    color: #333;
    background-color: #f1f4f9;
}

.button.grey-border,
a.button.grey-border {
    color: #333;
    background: transparent;
    border: 2px solid #333;
}

.button.blue-border,
a.button.blue-border {
    background: transparent;
    border: 2px solid #06C;
    color: #06C;
}

.button.dark-blue-border,
a.button.dark-blue-border {
    background: transparent;
    border: 2px solid #1c223c;
    color: #1c223c;
}

.button.light-green-border,
a.button.light-green-border {
    background: transparent;
    border: 2px solid #8cb840;
    color: #8cb840;
}

.button.grey-text,
a.button.grey-text {
    color: #AAA;
}

.button.blue,
a.button.blue {
    background-color: #06C;
    color: #FFF;
}

.button.light-blue,
a.button.light-blue {
    background-color: #00a3e0;
    color: #FFF;
}

.button.red,
a.button.red {
    background-color: #bf0000;
    color: #FFF !important;
}

.button.orange,
a.button.orange {
    background-color: #c4640e;
    color: #FFF !important;
}


.button.green,
a.button.green {
    background-color: green;
    color: #FFF !important;
}

.button.white-border:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.button.gold-border:hover,
a.button.gold-border:hover {
    background-color: #9b997b;
    color: #1c223c;
}

.button.blue-border:hover {
    background-color: rgba(0, 102, 204, 0.2);
}

.button.dark-blue-border:hover {
    background-color: rgba(28, 34, 60, 0.20);
}

.button.light-green-border:hover {
    background-color: rgba(140, 184, 64, 0.2);
}

.button.grey-border:hover {
    background-color: rgba(51, 51, 51, 0.2);
}

.button.blue:hover {
    background-color: #0054a8;
}

.button.light-blue:hover {
    background-color: #008BC3;
}

.button.green:hover {
    background-color: #006600;
}

.button.red:hover {
    background-color: #dd0000;
}

.button img {
    max-height: 1em;
    margin-right: 0.4em;
}

.button.image-only img {
    margin-right: 0;
}

/** Animated ellipsis **/
.animated-ellipsis {
    position: fixed; /*prevents the text from moving when centrally aligned*/
}

.animated-ellipsis:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    -webkit-animation: ellipsis steps(4, end) 1600ms infinite;
    animation: ellipsis steps(4, end) 1600ms infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
    width: 0;
}

@keyframes ellipsis {
    to {
        width: 1.25em;
    }
}

@-webkit-keyframes ellipsis {
    to {
        width: 1.25em;
    }
}

/***** Flex Layout *****/
.flex-container {
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
}

.flex-container.flex-mobile {
    display: flex;
    width: 100%;
}

.flex-grow-1 {
    flex-grow: 1;
}

.flex-grow-33 {
    flex-grow: 33;
}

.flex-center {
    align-items: center;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-container.flex-mobile .flex-1-col {
    box-sizing: border-box;
    width: 8.33%;
}

.flex-container.flex-mobile .flex-2-col {
    box-sizing: border-box;
    width: 16.66%;
}

.flex-container.flex-mobile .flex-3-col {
    box-sizing: border-box;
    width: 25%;
}

.flex-container.flex-mobile .flex-4-col {
    box-sizing: border-box;
    width: 33.33%;
}

.flex-container.flex-mobile .flex-5-col {
    box-sizing: border-box;
    width: 41.66%;
}

.flex-container.flex-mobile .flex-6-col {
    box-sizing: border-box;
    width: 50%;
}

.flex-container.flex-mobile .flex-7-col {
    box-sizing: border-box;
    width: 58.33%;
}

.flex-container.flex-mobile .flex-8-col {
    box-sizing: border-box;
    width: 66.66%;
}

.flex-container.flex-mobile .flex-9-col {
    box-sizing: border-box;
    width: 75%;
}

.flex-container.flex-mobile .flex-10-col {
    box-sizing: border-box;
    width: 83.33%;
}

.flex-container.flex-mobile .flex-11-col {
    box-sizing: border-box;
    width: 91.66%;
}

.flex-container.flex-mobile .flex-12-col {
    box-sizing: border-box;
    width: 100%;
}

@media screen and (min-width: 1280px) {
    .flex-container {
        display: flex;
    }

    .flex-container .flex-1-col {
        box-sizing: border-box;
        width: 8.33%;
    }

    .flex-container .flex-2-col {
        box-sizing: border-box;
        width: 16.66%;
    }

    .flex-container .flex-3-col {
        box-sizing: border-box;
        width: 25%;
    }

    .flex-container .flex-4-col {
        box-sizing: border-box;
        width: 33.33%;
    }

    .flex-container .flex-5-col {
        box-sizing: border-box;
        width: 41.66%;
    }

    .flex-container .flex-6-col {
        box-sizing: border-box;
        width: 50%;
    }

    .flex-container .flex-7-col {
        box-sizing: border-box;
        width: 58.33%;
    }

    .flex-container .flex-8-col {
        box-sizing: border-box;
        width: 66.66%;
    }

    .flex-container .flex-9-col {
        box-sizing: border-box;
        width: 75%;
    }

    .flex-container .flex-10-col {
        box-sizing: border-box;
        width: 83.33%;
    }

    .flex-container .flex-11-col {
        box-sizing: border-box;
        width: 91.66%;
    }

    .flex-container .flex-12-col {
        box-sizing: border-box;
        width: 100%;
    }
}

/***** Padded Boxes (v = Vertical, h = Horizontal) *****/
.h-pad-none {
    padding-left: 0;
    padding-right: 0;
}

.pad-none {
    padding: 0;
}

.pad-v-small,
.b-pad-v-small,
.v-pad-v-small {
    padding-bottom: 0.5em;
}

.pad-v-small,
.t-pad-v-small,
.v-pad-v-small {
    padding-top: 0.5em;
}

.pad-v-small,
.l-pad-v-small,
.h-pad-v-small {
    padding-left: 0.5em;
}

.pad-v-small,
.r-pad-v-small,
.h-pad-v-small {
    padding-right: 0.5em;
}

.pad-small,
.pad-medium,
.b-pad-small,
.v-pad-small,
.b-pad-medium,
.v-pad-medium {
    padding-bottom: 1em;
}

.pad-small,
.pad-medium,
.t-pad-small,
.v-pad-small,
.t-pad-medium,
.v-pad-medium {
    padding-top: 1em;
}

.pad-small,
.pad-medium,
.l-pad-small,
.h-pad-small,
.l-pad-medium,
.h-pad-medium {
    padding-left: 1em;
}

.pad-small,
.pad-medium,
.r-pad-small,
.h-pad-small,
.r-pad-medium,
.h-pad-medium {
    padding-right: 1em;
}

.pad-large,
.t-pad-large,
.v-pad-large {
    padding-top: 2em;
}

.pad-large,
.b-pad-large,
.v-pad-large {
    padding-bottom: 2em;
}

.pad-large,
.l-pad-large,
.h-pad-large {
    padding-left: 2em;
}

.pad-large,
.r-pad-large,
.h-pad-large {
    padding-right: 2em;
}

.pad-x-large,
.t-pad-x-large,
.v-pad-x-large {
    padding-top: 2.5em;
}

.pad-x-large,
.b-pad-x-large,
.v-pad-x-large {
    padding-bottom: 2.5em;
}

.pad-x-large,
.l-pad-x-large,
.h-pad-x-large {
    padding-left: 2.5em;
}

.pad-x-large,
.r-pad-x-large,
.h-pad-x-large {
    padding-right: 2.5em;
}

@media screen and (min-width: 1000px) {
    .pad-medium,
    .b-pad-medium,
    .v-pad-medium {
        padding-bottom: 2em;
    }

    .pad-medium,
    .t-pad-medium,
    .v-pad-medium {
        padding-top: 2em;
    }

    .pad-medium,
    .l-pad-medium,
    .h-pad-medium {
        padding-left: 2em;
    }

    .pad-medium,
    .r-pad-medium,
    .h-pad-medium {
        padding-right: 2em;
    }

    .pad-large,
    .t-pad-large,
    .v-pad-large {
        padding-top: 4em;
    }

    .pad-large,
    .b-pad-large,
    .v-pad-large {
        padding-bottom: 4em;
    }

    .pad-large,
    .l-pad-large,
    .h-pad-large {
        padding-left: 4em;
    }

    .pad-large,
    .r-pad-large,
    .h-pad-large {
        padding-right: 4em;
    }

    .pad-x-large,
    .t-pad-x-large,
    .v-pad-x-large {
        padding-top: 4.5em;
    }

    .pad-x-large,
    .b-pad-x-large,
    .v-pad-x-large {
        padding-bottom: 4.5em;
    }

    .pad-x-large,
    .l-pad-x-large,
    .h-pad-x-large {
        padding-left: 4.5em;
    }

    .pad-x-large,
    .r-pad-x-large,
    .h-pad-x-large {
        padding-right: 4.5em;
    }
}


/***** Margins (v = Vertical, h = Horizontal) *****/
.h-margin-auto {
    margin-left: auto;
    margin-right: auto;
}

.b-margin-none {
    margin-bottom: 0;
}

.h-margin-none {
    margin-left: 0;
    margin-right: 0;
}

.t-margin-none {
    margin-top: 0;
}

.v-margin-none {
    margin-top: 0;
    margin-bottom: 0;
}

.margin-v-small,
.b-margin-v-small,
.v-margin-v-small {
    margin-bottom: 0.5em;
}

.margin-v-small,
.t-margin-v-small,
.v-margin-v-small {
    margin-top: 0.5em;
}

.margin-v-small,
.l-margin-v-small,
.h-margin-v-small {
    margin-left: 0.5em;
}

.margin-v-small,
.r-margin-v-small,
.h-margin-v-small {
    margin-right: 0.5em;
}

.margin-small,
.margin-medium,
.b-margin-small,
.v-margin-small,
.b-margin-medium,
.v-margin-medium {
    margin-bottom: 1em;
}

.margin-small,
.margin-medium,
.t-margin-small,
.v-margin-small,
.t-margin-medium,
.v-margin-medium {
    margin-top: 1em;
}

.margin-small,
.margin-medium,
.l-margin-small,
.h-margin-small,
.l-margin-medium,
.h-margin-medium {
    margin-left: 1em;
}

.margin-small,
.margin-medium,
.r-margin-small,
.h-margin-small,
.r-margin-medium,
.h-margin-medium {
    margin-right: 1em;
}

.margin-large,
.t-margin-large,
.v-margin-large {
    margin-top: 2em;
}

.margin-large,
.b-margin-large,
.v-margin-large {
    margin-bottom: 2em;
}

.margin-large,
.l-margin-large,
.h-margin-large {
    margin-left: 2em;
}

.margin-large,
.r-margin-large,
.h-margin-large {
    margin-right: 2em;
}

@media screen and (min-width: 1000px) {
    .margin-medium,
    .b-margin-medium,
    .v-margin-medium {
        margin-bottom: 2em;
    }

    .margin-medium,
    .t-margin-medium,
    .v-margin-medium {
        margin-top: 2em;
    }

    .margin-medium,
    .l-margin-medium,
    .h-margin-medium {
        margin-left: 2em;
    }

    .margin-medium,
    .r-margin-medium,
    .h-margin-medium {
        margin-right: 2em;
    }

    .margin-large,
    .t-margin-large,
    .v-margin-large {
        margin-top: 4em;
    }

    .margin-large,
    .b-margin-large,
    .v-margin-large {
        margin-bottom: 4em;
    }

    .margin-large,
    .l-margin-large,
    .h-margin-large {
        margin-left: 4em;
    }

    .margin-large,
    .r-margin-large,
    .h-margin-large {
        margin-right: 4em;
    }
}

/*** Legacy Width Layout ***/
.width-box {
    box-sizing: border-box;
    margin: 0 auto;
    width: 88%;
}

.width-box.full-mobile {
    width: 100%;
}

.width-box.dark-grey {
    background-color: #333;
}

.width-box.margin-top {
    margin-top: 1em;
}

.width-box.margin-bottom {
    margin-bottom: 1em;
}


@media screen and (min-width: 770px) {
    .width-box.full-mobile {
        width: 88%;
    }

    .wrapper-padding {
        padding: 4em 0;
    }
}

@media screen and (min-width: 1600px) {
    .width-box.full-mobile,
    .width-box {
        width: 80%;
    }

    .width-box.margin-top {
        margin-top: 2em;
    }

    .width-box.margin-bottom {
        margin-bottom: 2em;
    }

}

@media screen and (min-width: 770px) {
    .width-box.three-column article {
        float: left;
        margin-left: 5%;
        width: 30%;
    }

    .width-box.three-column article.first {
        margin-left: 0;
    }

    .width-box.two-column article {
        float: left;
        margin-left: 4%;
        width: 48%;
    }

    .width-box.two-column article.first {
        margin-left: 0;
    }

    .width-box.inset {
        padding: 0 10%;
        box-sizing: border-box;
    }
}

@media screen and (min-width: 1600px) {
    .width-box.full-mobile,
    .width-box {
        width: 80%;
    }
}

@media screen and (min-width: 2000px) {
    .width-box.full-mobile,
    .width-box {
        width: 60%;
    }
}