/* GRID */

* {
 box-sizing: border-box; 
}

.example .row, .example .row .column, .example .row .columns { background: #f4f4f4; height: 60px; line-height: 60px; box-sizing: border-box; }
.example .row { margin-bottom: 20px; }
.example .row .column, .example .row .columns { background: #e4e4e4; border: 1px solid #ccc; }
          
@media handheld, only screen and (max-width: 767px) {
  .example .row { height: auto; }
  .example .row .column, .example .row .columns { margin-bottom: 10px; }
  .example .row .column:last-child, .example .row .columns:last-child { margin-bottom: 0; }
}

.is-visible {
    display: block !important
}

.is-hidden {
    display: none !important
}

.row {
    max-width: 91rem;
    margin-right: auto;
    margin-left: auto
}

.row::before,.row::after {
    display: table;
    content: ' '
}

.row::after {
    clear: both
}

.row.collapse>.column,.row.collapse>.columns {
    padding-right: 0;
    padding-left: 0
}

.row .row {
    margin-right: -.625rem;
    margin-left: -.625rem
}

@media print, screen and (min-width: 43.75em) {
    .row .row {
        margin-right:-.9375rem;
        margin-left: -.9375rem
    }
}

@media print, screen and (min-width: 64em) {
    .row .row {
        margin-right:-.9375rem;
        margin-left: -.9375rem
    }
}

.row .row.collapse {
    margin-right: 0;
    margin-left: 0
}

.row.expanded {
    max-width: none
}

.row.expanded .row {
    margin-right: auto;
    margin-left: auto
}

.row:not(.expanded) .row {
    max-width: none
}

.row.gutter-small>.column,.row.gutter-small>.columns {
    padding-right: .625rem;
    padding-left: .625rem
}

.row.gutter-medium>.column,.row.gutter-medium>.columns {
    padding-right: .9375rem;
    padding-left: .9375rem
}

.column,.columns {
    width: 100%;
    float: left;
    padding-right: .625rem;
    padding-left: .625rem
}

@media print, screen and (min-width: 43.75em) {
    .column,.columns {
        padding-right:.9375rem;
        padding-left: .9375rem
    }
}

.column:last-child:not(:first-child),.columns:last-child:not(:first-child) {
    float: right
}

.column.end:last-child:last-child,.end.columns:last-child:last-child {
    float: left
}

.column.row.row,.row.row.columns {
    float: none
}

.row .column.row.row,.row .row.row.columns {
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0
}

.small-1 {
    width: 8.33333%
}

.small-push-1 {
    position: relative;
    left: 8.33333%
}

.small-pull-1 {
    position: relative;
    left: -8.33333%
}

.small-offset-0 {
    margin-left: 0%
}

.small-2 {
    width: 16.66667%
}

.small-push-2 {
    position: relative;
    left: 16.66667%
}

.small-pull-2 {
    position: relative;
    left: -16.66667%
}

.small-offset-1 {
    margin-left: 8.33333%
}

.small-3 {
    width: 25%
}

.small-push-3 {
    position: relative;
    left: 25%
}

.small-pull-3 {
    position: relative;
    left: -25%
}

.small-offset-2 {
    margin-left: 16.66667%
}

.small-4 {
    width: 33.33333%
}

.small-push-4 {
    position: relative;
    left: 33.33333%
}

.small-pull-4 {
    position: relative;
    left: -33.33333%
}

.small-offset-3 {
    margin-left: 25%
}

.small-5 {
    width: 41.66667%
}

.small-push-5 {
    position: relative;
    left: 41.66667%
}

.small-pull-5 {
    position: relative;
    left: -41.66667%
}

.small-offset-4 {
    margin-left: 33.33333%
}

.small-6 {
    width: 50%
}

.small-push-6 {
    position: relative;
    left: 50%
}

.small-pull-6 {
    position: relative;
    left: -50%
}

.small-offset-5 {
    margin-left: 41.66667%
}

.small-7 {
    width: 58.33333%
}

.small-push-7 {
    position: relative;
    left: 58.33333%
}

.small-pull-7 {
    position: relative;
    left: -58.33333%
}

.small-offset-6 {
    margin-left: 50%
}

.small-8 {
    width: 66.66667%
}

.small-push-8 {
    position: relative;
    left: 66.66667%
}

.small-pull-8 {
    position: relative;
    left: -66.66667%
}

.small-offset-7 {
    margin-left: 58.33333%
}

.small-9 {
    width: 75%
}

.small-push-9 {
    position: relative;
    left: 75%
}

.small-pull-9 {
    position: relative;
    left: -75%
}

.small-offset-8 {
    margin-left: 66.66667%
}

.small-10 {
    width: 83.33333%
}

.small-push-10 {
    position: relative;
    left: 83.33333%
}

.small-pull-10 {
    position: relative;
    left: -83.33333%
}

.small-offset-9 {
    margin-left: 75%
}

.small-11 {
    width: 91.66667%
}

.small-push-11 {
    position: relative;
    left: 91.66667%
}

.small-pull-11 {
    position: relative;
    left: -91.66667%
}

.small-offset-10 {
    margin-left: 83.33333%
}

.small-12 {
    width: 100%
}

.small-offset-11 {
    margin-left: 91.66667%
}

.small-up-1>.column,.small-up-1>.columns {
    float: left;
    width: 100%
}

.small-up-1>.column:nth-of-type(1n),.small-up-1>.columns:nth-of-type(1n) {
    clear: none
}

.small-up-1>.column:nth-of-type(1n+1),.small-up-1>.columns:nth-of-type(1n+1) {
    clear: both
}

.small-up-1>.column:last-child,.small-up-1>.columns:last-child {
    float: left
}

.small-up-2>.column,.small-up-2>.columns {
    float: left;
    width: 50%
}

.small-up-2>.column:nth-of-type(1n),.small-up-2>.columns:nth-of-type(1n) {
    clear: none
}

.small-up-2>.column:nth-of-type(2n+1),.small-up-2>.columns:nth-of-type(2n+1) {
    clear: both
}

.small-up-2>.column:last-child,.small-up-2>.columns:last-child {
    float: left
}

.small-up-3>.column,.small-up-3>.columns {
    float: left;
    width: 33.33333%
}

.small-up-3>.column:nth-of-type(1n),.small-up-3>.columns:nth-of-type(1n) {
    clear: none
}

.small-up-3>.column:nth-of-type(3n+1),.small-up-3>.columns:nth-of-type(3n+1) {
    clear: both
}

.small-up-3>.column:last-child,.small-up-3>.columns:last-child {
    float: left
}

.small-up-4>.column,.small-up-4>.columns {
    float: left;
    width: 25%
}

.small-up-4>.column:nth-of-type(1n),.small-up-4>.columns:nth-of-type(1n) {
    clear: none
}

.small-up-4>.column:nth-of-type(4n+1),.small-up-4>.columns:nth-of-type(4n+1) {
    clear: both
}

.small-up-4>.column:last-child,.small-up-4>.columns:last-child {
    float: left
}

.small-up-5>.column,.small-up-5>.columns {
    float: left;
    width: 20%
}

.small-up-5>.column:nth-of-type(1n),.small-up-5>.columns:nth-of-type(1n) {
    clear: none
}

.small-up-5>.column:nth-of-type(5n+1),.small-up-5>.columns:nth-of-type(5n+1) {
    clear: both
}

.small-up-5>.column:last-child,.small-up-5>.columns:last-child {
    float: left
}

.small-up-6>.column,.small-up-6>.columns {
    float: left;
    width: 16.66667%
}

.small-up-6>.column:nth-of-type(1n),.small-up-6>.columns:nth-of-type(1n) {
    clear: none
}

.small-up-6>.column:nth-of-type(6n+1),.small-up-6>.columns:nth-of-type(6n+1) {
    clear: both
}

.small-up-6>.column:last-child,.small-up-6>.columns:last-child {
    float: left
}

.small-up-7>.column,.small-up-7>.columns {
    float: left;
    width: 14.28571%
}

.small-up-7>.column:nth-of-type(1n),.small-up-7>.columns:nth-of-type(1n) {
    clear: none
}

.small-up-7>.column:nth-of-type(7n+1),.small-up-7>.columns:nth-of-type(7n+1) {
    clear: both
}

.small-up-7>.column:last-child,.small-up-7>.columns:last-child {
    float: left
}

.small-up-8>.column,.small-up-8>.columns {
    float: left;
    width: 12.5%
}

.small-up-8>.column:nth-of-type(1n),.small-up-8>.columns:nth-of-type(1n) {
    clear: none
}

.small-up-8>.column:nth-of-type(8n+1),.small-up-8>.columns:nth-of-type(8n+1) {
    clear: both
}

.small-up-8>.column:last-child,.small-up-8>.columns:last-child {
    float: left
}

.small-collapse>.column,.small-collapse>.columns {
    padding-right: 0;
    padding-left: 0
}

.small-collapse .row {
    margin-right: 0;
    margin-left: 0
}

.expanded.row .small-collapse.row {
    margin-right: 0;
    margin-left: 0
}

.small-uncollapse>.column,.small-uncollapse>.columns {
    padding-right: .625rem;
    padding-left: .625rem
}

.small-centered {
    margin-right: auto;
    margin-left: auto
}

.small-centered,.small-centered:last-child:not(:first-child) {
    float: none;
    clear: both
}

.small-uncentered,.small-push-0,.small-pull-0 {
    position: static;
    float: left;
    margin-right: 0;
    margin-left: 0
}

@media print, screen and (min-width: 43.75em) {
    .medium-1 {
        width:8.33333%
    }

    .medium-push-1 {
        position: relative;
        left: 8.33333%
    }

    .medium-pull-1 {
        position: relative;
        left: -8.33333%
    }

    .medium-offset-0 {
        margin-left: 0%
    }

    .medium-2 {
        width: 16.66667%
    }

    .medium-push-2 {
        position: relative;
        left: 16.66667%
    }

    .medium-pull-2 {
        position: relative;
        left: -16.66667%
    }

    .medium-offset-1 {
        margin-left: 8.33333%
    }

    .medium-3 {
        width: 25%
    }

    .medium-push-3 {
        position: relative;
        left: 25%
    }

    .medium-pull-3 {
        position: relative;
        left: -25%
    }

    .medium-offset-2 {
        margin-left: 16.66667%
    }

    .medium-4 {
        width: 33.33333%
    }

    .medium-push-4 {
        position: relative;
        left: 33.33333%
    }

    .medium-pull-4 {
        position: relative;
        left: -33.33333%
    }

    .medium-offset-3 {
        margin-left: 25%
    }

    .medium-5 {
        width: 41.66667%
    }

    .medium-push-5 {
        position: relative;
        left: 41.66667%
    }

    .medium-pull-5 {
        position: relative;
        left: -41.66667%
    }

    .medium-offset-4 {
        margin-left: 33.33333%
    }

    .medium-6 {
        width: 50%
    }

    .medium-push-6 {
        position: relative;
        left: 50%
    }

    .medium-pull-6 {
        position: relative;
        left: -50%
    }

    .medium-offset-5 {
        margin-left: 41.66667%
    }

    .medium-7 {
        width: 58.33333%
    }

    .medium-push-7 {
        position: relative;
        left: 58.33333%
    }

    .medium-pull-7 {
        position: relative;
        left: -58.33333%
    }

    .medium-offset-6 {
        margin-left: 50%
    }

    .medium-8 {
        width: 66.66667%
    }

    .medium-push-8 {
        position: relative;
        left: 66.66667%
    }

    .medium-pull-8 {
        position: relative;
        left: -66.66667%
    }

    .medium-offset-7 {
        margin-left: 58.33333%
    }

    .medium-9 {
        width: 75%
    }

    .medium-push-9 {
        position: relative;
        left: 75%
    }

    .medium-pull-9 {
        position: relative;
        left: -75%
    }

    .medium-offset-8 {
        margin-left: 66.66667%
    }

    .medium-10 {
        width: 83.33333%
    }

    .medium-push-10 {
        position: relative;
        left: 83.33333%
    }

    .medium-pull-10 {
        position: relative;
        left: -83.33333%
    }

    .medium-offset-9 {
        margin-left: 75%
    }

    .medium-11 {
        width: 91.66667%
    }

    .medium-push-11 {
        position: relative;
        left: 91.66667%
    }

    .medium-pull-11 {
        position: relative;
        left: -91.66667%
    }

    .medium-offset-10 {
        margin-left: 83.33333%
    }

    .medium-12 {
        width: 100%
    }

    .medium-offset-11 {
        margin-left: 91.66667%
    }

    .medium-up-1>.column,.medium-up-1>.columns {
        float: left;
        width: 100%
    }

    .medium-up-1>.column:nth-of-type(1n),.medium-up-1>.columns:nth-of-type(1n) {
        clear: none
    }

    .medium-up-1>.column:nth-of-type(1n+1),.medium-up-1>.columns:nth-of-type(1n+1) {
        clear: both
    }

    .medium-up-1>.column:last-child,.medium-up-1>.columns:last-child {
        float: left
    }

    .medium-up-2>.column,.medium-up-2>.columns {
        float: left;
        width: 50%
    }

    .medium-up-2>.column:nth-of-type(1n),.medium-up-2>.columns:nth-of-type(1n) {
        clear: none
    }

    .medium-up-2>.column:nth-of-type(2n+1),.medium-up-2>.columns:nth-of-type(2n+1) {
        clear: both
    }

    .medium-up-2>.column:last-child,.medium-up-2>.columns:last-child {
        float: left
    }

    .medium-up-3>.column,.medium-up-3>.columns {
        float: left;
        width: 33.33333%
    }

    .medium-up-3>.column:nth-of-type(1n),.medium-up-3>.columns:nth-of-type(1n) {
        clear: none
    }

    .medium-up-3>.column:nth-of-type(3n+1),.medium-up-3>.columns:nth-of-type(3n+1) {
        clear: both
    }

    .medium-up-3>.column:last-child,.medium-up-3>.columns:last-child {
        float: left
    }

    .medium-up-4>.column,.medium-up-4>.columns {
        float: left;
        width: 25%
    }

    .medium-up-4>.column:nth-of-type(1n),.medium-up-4>.columns:nth-of-type(1n) {
        clear: none
    }

    .medium-up-4>.column:nth-of-type(4n+1),.medium-up-4>.columns:nth-of-type(4n+1) {
        clear: both
    }

    .medium-up-4>.column:last-child,.medium-up-4>.columns:last-child {
        float: left
    }

    .medium-up-5>.column,.medium-up-5>.columns {
        float: left;
        width: 20%
    }

    .medium-up-5>.column:nth-of-type(1n),.medium-up-5>.columns:nth-of-type(1n) {
        clear: none
    }

    .medium-up-5>.column:nth-of-type(5n+1),.medium-up-5>.columns:nth-of-type(5n+1) {
        clear: both
    }

    .medium-up-5>.column:last-child,.medium-up-5>.columns:last-child {
        float: left
    }

    .medium-up-6>.column,.medium-up-6>.columns {
        float: left;
        width: 16.66667%
    }

    .medium-up-6>.column:nth-of-type(1n),.medium-up-6>.columns:nth-of-type(1n) {
        clear: none
    }

    .medium-up-6>.column:nth-of-type(6n+1),.medium-up-6>.columns:nth-of-type(6n+1) {
        clear: both
    }

    .medium-up-6>.column:last-child,.medium-up-6>.columns:last-child {
        float: left
    }

    .medium-up-7>.column,.medium-up-7>.columns {
        float: left;
        width: 14.28571%
    }

    .medium-up-7>.column:nth-of-type(1n),.medium-up-7>.columns:nth-of-type(1n) {
        clear: none
    }

    .medium-up-7>.column:nth-of-type(7n+1),.medium-up-7>.columns:nth-of-type(7n+1) {
        clear: both
    }

    .medium-up-7>.column:last-child,.medium-up-7>.columns:last-child {
        float: left
    }

    .medium-up-8>.column,.medium-up-8>.columns {
        float: left;
        width: 12.5%
    }

    .medium-up-8>.column:nth-of-type(1n),.medium-up-8>.columns:nth-of-type(1n) {
        clear: none
    }

    .medium-up-8>.column:nth-of-type(8n+1),.medium-up-8>.columns:nth-of-type(8n+1) {
        clear: both
    }

    .medium-up-8>.column:last-child,.medium-up-8>.columns:last-child {
        float: left
    }

    .medium-collapse>.column,.medium-collapse>.columns {
        padding-right: 0;
        padding-left: 0
    }

    .medium-collapse .row {
        margin-right: 0;
        margin-left: 0
    }

    .expanded.row .medium-collapse.row {
        margin-right: 0;
        margin-left: 0
    }

    .medium-uncollapse>.column,.medium-uncollapse>.columns {
        padding-right: .9375rem;
        padding-left: .9375rem
    }

    .medium-centered {
        margin-right: auto;
        margin-left: auto
    }

    .medium-centered,.medium-centered:last-child:not(:first-child) {
        float: none;
        clear: both
    }

    .medium-uncentered,.medium-push-0,.medium-pull-0 {
        position: static;
        float: left;
        margin-right: 0;
        margin-left: 0
    }
}

@media print, screen and (min-width: 64em) {
    .large-1 {
        width:8.33333%
    }

    .large-push-1 {
        position: relative;
        left: 8.33333%
    }

    .large-pull-1 {
        position: relative;
        left: -8.33333%
    }

    .large-offset-0 {
        margin-left: 0%
    }

    .large-2 {
        width: 16.66667%
    }

    .large-push-2 {
        position: relative;
        left: 16.66667%
    }

    .large-pull-2 {
        position: relative;
        left: -16.66667%
    }

    .large-offset-1 {
        margin-left: 8.33333%
    }

    .large-3 {
        width: 25%
    }

    .large-push-3 {
        position: relative;
        left: 25%
    }

    .large-pull-3 {
        position: relative;
        left: -25%
    }

    .large-offset-2 {
        margin-left: 16.66667%
    }

    .large-4 {
        width: 33.33333%
    }

    .large-push-4 {
        position: relative;
        left: 33.33333%
    }

    .large-pull-4 {
        position: relative;
        left: -33.33333%
    }

    .large-offset-3 {
        margin-left: 25%
    }

    .large-5 {
        width: 41.66667%
    }

    .large-push-5 {
        position: relative;
        left: 41.66667%
    }

    .large-pull-5 {
        position: relative;
        left: -41.66667%
    }

    .large-offset-4 {
        margin-left: 33.33333%
    }

    .large-6 {
        width: 50%
    }

    .large-push-6 {
        position: relative;
        left: 50%
    }

    .large-pull-6 {
        position: relative;
        left: -50%
    }

    .large-offset-5 {
        margin-left: 41.66667%
    }

    .large-7 {
        width: 58.33333%
    }

    .large-push-7 {
        position: relative;
        left: 58.33333%
    }

    .large-pull-7 {
        position: relative;
        left: -58.33333%
    }

    .large-offset-6 {
        margin-left: 50%
    }

    .large-8 {
        width: 66.66667%
    }

    .large-push-8 {
        position: relative;
        left: 66.66667%
    }

    .large-pull-8 {
        position: relative;
        left: -66.66667%
    }

    .large-offset-7 {
        margin-left: 58.33333%
    }

    .large-9 {
        width: 75%
    }

    .large-push-9 {
        position: relative;
        left: 75%
    }

    .large-pull-9 {
        position: relative;
        left: -75%
    }

    .large-offset-8 {
        margin-left: 66.66667%
    }

    .large-10 {
        width: 83.33333%
    }

    .large-push-10 {
        position: relative;
        left: 83.33333%
    }

    .large-pull-10 {
        position: relative;
        left: -83.33333%
    }

    .large-offset-9 {
        margin-left: 75%
    }

    .large-11 {
        width: 91.66667%
    }

    .large-push-11 {
        position: relative;
        left: 91.66667%
    }

    .large-pull-11 {
        position: relative;
        left: -91.66667%
    }

    .large-offset-10 {
        margin-left: 83.33333%
    }

    .large-12 {
        width: 100%
    }

    .large-offset-11 {
        margin-left: 91.66667%
    }

    .large-up-1>.column,.large-up-1>.columns {
        float: left;
        width: 100%
    }

    .large-up-1>.column:nth-of-type(1n),.large-up-1>.columns:nth-of-type(1n) {
        clear: none
    }

    .large-up-1>.column:nth-of-type(1n+1),.large-up-1>.columns:nth-of-type(1n+1) {
        clear: both
    }

    .large-up-1>.column:last-child,.large-up-1>.columns:last-child {
        float: left
    }

    .large-up-2>.column,.large-up-2>.columns {
        float: left;
        width: 50%
    }

    .large-up-2>.column:nth-of-type(1n),.large-up-2>.columns:nth-of-type(1n) {
        clear: none
    }

    .large-up-2>.column:nth-of-type(2n+1),.large-up-2>.columns:nth-of-type(2n+1) {
        clear: both
    }

    .large-up-2>.column:last-child,.large-up-2>.columns:last-child {
        float: left
    }

    .large-up-3>.column,.large-up-3>.columns {
        float: left;
        width: 33.33333%
    }

    .large-up-3>.column:nth-of-type(1n),.large-up-3>.columns:nth-of-type(1n) {
        clear: none
    }

    .large-up-3>.column:nth-of-type(3n+1),.large-up-3>.columns:nth-of-type(3n+1) {
        clear: both
    }

    .large-up-3>.column:last-child,.large-up-3>.columns:last-child {
        float: left
    }

    .large-up-4>.column,.large-up-4>.columns {
        float: left;
        width: 25%
    }

    .large-up-4>.column:nth-of-type(1n),.large-up-4>.columns:nth-of-type(1n) {
        clear: none
    }

    .large-up-4>.column:nth-of-type(4n+1),.large-up-4>.columns:nth-of-type(4n+1) {
        clear: both
    }

    .large-up-4>.column:last-child,.large-up-4>.columns:last-child {
        float: left
    }

    .large-up-5>.column,.large-up-5>.columns {
        float: left;
        width: 20%
    }

    .large-up-5>.column:nth-of-type(1n),.large-up-5>.columns:nth-of-type(1n) {
        clear: none
    }

    .large-up-5>.column:nth-of-type(5n+1),.large-up-5>.columns:nth-of-type(5n+1) {
        clear: both
    }

    .large-up-5>.column:last-child,.large-up-5>.columns:last-child {
        float: left
    }

    .large-up-6>.column,.large-up-6>.columns {
        float: left;
        width: 16.66667%
    }

    .large-up-6>.column:nth-of-type(1n),.large-up-6>.columns:nth-of-type(1n) {
        clear: none
    }

    .large-up-6>.column:nth-of-type(6n+1),.large-up-6>.columns:nth-of-type(6n+1) {
        clear: both
    }

    .large-up-6>.column:last-child,.large-up-6>.columns:last-child {
        float: left
    }

    .large-up-7>.column,.large-up-7>.columns {
        float: left;
        width: 14.28571%
    }

    .large-up-7>.column:nth-of-type(1n),.large-up-7>.columns:nth-of-type(1n) {
        clear: none
    }

    .large-up-7>.column:nth-of-type(7n+1),.large-up-7>.columns:nth-of-type(7n+1) {
        clear: both
    }

    .large-up-7>.column:last-child,.large-up-7>.columns:last-child {
        float: left
    }

    .large-up-8>.column,.large-up-8>.columns {
        float: left;
        width: 12.5%
    }

    .large-up-8>.column:nth-of-type(1n),.large-up-8>.columns:nth-of-type(1n) {
        clear: none
    }

    .large-up-8>.column:nth-of-type(8n+1),.large-up-8>.columns:nth-of-type(8n+1) {
        clear: both
    }

    .large-up-8>.column:last-child,.large-up-8>.columns:last-child {
        float: left
    }

    .large-collapse>.column,.large-collapse>.columns {
        padding-right: 0;
        padding-left: 0
    }

    .large-collapse .row {
        margin-right: 0;
        margin-left: 0
    }

    .expanded.row .large-collapse.row {
        margin-right: 0;
        margin-left: 0
    }

    .large-uncollapse>.column,.large-uncollapse>.columns {
        padding-right: .9375rem;
        padding-left: .9375rem
    }

    .large-centered {
        margin-right: auto;
        margin-left: auto
    }

    .large-centered,.large-centered:last-child:not(:first-child) {
        float: none;
        clear: both
    }

    .large-uncentered,.large-push-0,.large-pull-0 {
        position: static;
        float: left;
        margin-right: 0;
        margin-left: 0
    }
}

.column-block {
    margin-bottom: 1.25rem
}

.column-block>:last-child {
    margin-bottom: 0
}

@media print, screen and (min-width: 43.75em) {
    .column-block {
        margin-bottom:1.875rem
    }

    .column-block>:last-child {
        margin-bottom: 0
    }
}






/* BUTTONS */

.cmpnt-submit-pointed {
  cursor: pointer;
  background: #FFF;
  border: none;
  color: #61A534;
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  zoom: 1;
  *display: inline;
  font-weight: bold;
  height: 42px;
  font-size: 18px;
  font-size: 1.8rem;
  padding-left: 10px;
  padding-right: 10px;
  line-height: 42px 1;
  text-align: center;
  position: relative;
  transition: all 100ms ease-in-out; }
  .cmpnt-submit-pointed.green {
    background: #61A534;
    color: #FFF;
    height: 42px; }
    .cmpnt-submit-pointed.green::after {
      border-left-color: #61A534;
      border-width: 21px;
      margin-top: -21px; }
    .cmpnt-submit-pointed.green:hover {
      background: #0C884A;
      transition: all 100ms ease-in-out; }
      .cmpnt-submit-pointed.green:hover::after {
        border-left-color: #0C884A;
        transition: all 100ms ease-in-out; }
  .cmpnt-submit-pointed.red {
    background: #FF1D34;
    color: #FFF;
    height: 42px; }
    .cmpnt-submit-pointed.red::after {
      border-left-color: #FF1D34;
      border-width: 21px;
      margin-top: -21px; }
    .cmpnt-submit-pointed.red:hover {
      background: #cc1225;
      transition: all 100ms ease-in-out; }
      .cmpnt-submit-pointed.red:hover::after {
        border-left-color: #cc1225;
        transition: all 100ms ease-in-out; }
  .cmpnt-submit-pointed.orange {
    background: #F16E22;
    color: #FFF;
    height: 42px; }
    .cmpnt-submit-pointed.orange::after {
      border-left-color: #F16E22;
      border-width: 21px;
      margin-top: -21px; }
    .cmpnt-submit-pointed.orange:hover {
      background: #53297D;
      transition: all 100ms ease-in-out; }
      .cmpnt-submit-pointed.orange:hover::after {
        border-left-color: #53297D;
        transition: all 100ms ease-in-out; }
  .cmpnt-submit-pointed.inline-submit {
    font-size: 16px;
    font-size: 1.6rem;
    height: 40px;
    line-height: 40px;
    position: relative;
    top: -2px; }
    .cmpnt-submit-pointed.inline-submit::after {
      border-width: 20px;
      margin-top: -20px; }
  .cmpnt-submit-pointed:after {
    left: 100%;
    border: 18px solid transparent;
    border-left-color: #FFF;
    border-width: 21px;
    margin-top: -21px;
    content: " ";
    height: 0;
    top: 50%;
    transition: all 100ms ease-in-out;
    width: 0;
    position: absolute; }
  .cmpnt-submit-pointed:hover {
    color: #FFF;
    background: #097dae;
    transition: all 100ms ease-in-out; }
    .cmpnt-submit-pointed:hover:after {
      border-left-color: #097dae;
      transition: all 100ms ease-in-out; }


/* MASTHEAD */

/* START: Header */

body {
    margin: 0;
}

.wrapper {
    margin: 0 auto;
    max-width: 1220px;
    *zoom: 1; }

.wrapper:before, .wrapper:after {
    display: table;
    content: "";
    line-height: 0;
}

.wrapper:after {
    clear: both;
}

.lt-ie8 .wrapper {
    margin: 0 auto;
    width: 1220px;
    *zoom: 1; }

.lt-ie8 .wrapper:before, .lt-ie8 .wrapper:after {
    display: table;
    content: "";
    line-height: 0;
}

.lt-ie8 .wrapper:after {
    clear: both;
}


#PageHeader {
    background: #FFF;
    *zoom:1;margin-bottom: 20px;
    position: relative
}

#PageHeader:before,#PageHeader:after {
    display: table;
    content: "";
    line-height: 0
}

#PageHeader:after {
    clear: both
}

#PageHeader .skip-link {
    display:none
}

@media only screen and (min-width: 768px) {
  
    #PageHeader {
        background: white;
        padding-top:25px
    }

}

#PageHeader .skip-link-top-nav {
    background: #61A534;
    float: right;
    width: 60px;
    height: 60px;
    margin-left: 20px
}

#PageHeader .skip-link-top-nav:after {
    content: "\e005";
    color: #0C884A;
    display: block;
    font-family: "oa-icons";
    font-size: 40px;
    font-size: 4rem;
    -webkit-transition: all 100ms ease-in-out;
    -moz-transition: all 100ms ease-in-out;
    -o-transition: all 100ms ease-in-out;
    transition: all 100ms ease-in-out;
    left: 0;
    position: relative;
    text-align: center;
    top: 3px;
    width: 60px;
    height: 60px
}

@media only screen and (min-width: 768px) { 
  
    #PageHeader .skip-link-top-nav:after {
        display:none
    }
}

#PageHeader .skip-link-top-nav:hover:after,#PageHeader .skip-link-top-nav:active:after,#PageHeader .skip-link-top-nav:focus:after {
    color: #FFF;
    -webkit-transition: all 100ms ease-in-out;
    -moz-transition: all 100ms ease-in-out;
    -o-transition: all 100ms ease-in-out;
    transition: all 100ms ease-in-out
}


svg .fill-white {
    fill: #FFF
}

svg .fill-green {
    fill: #61A534
}

svg .fill-black {
    fill: #000
}

#Logo {
    display: block;
    float: left;
    height: 37px;
    width: 94px;
    margin: 10px 20px 0
}

@media only screen and (min-width: 768px) {
    #Logo {
        height:49px;
        margin: 0px 0 30px 20px;
        width: 120px
    }
}

@media only screen and (min-width: 850px) {
    #Logo {
        height:66px;
        width: 161px
    }
}

@media only screen and (min-width: 1220px) {
    #Logo {
        margin: 0px 20px 30px 0
    }
}

#Logo img,#Logo svg,#Logo svg.ox-horiz {
    width: 100%
}

#Logo svg.ox-horiz {
    fill: #61A534
}

@media only screen and (max-width: 699px) {
    #PageHeader {
        margin:0;
    }

    #PageHeader .skip-link {
        display:block;
    }

    #NavContainer {
        border-bottom: 0 solid rgba(0,0,0,0.8);
        height: 0;
        top: 60px;
        overflow: hidden;
        position: absolute;
        width: 100%;
        z-index: 100
    }

    #NavContainer form {
        margin: 0
    }
}

@media only screen and (min-width: 768px) {  
  
    #NavContainer {
        height:auto !important
    }
}

.primary-nav-wrap {
    *zoom:1
}

.primary-nav-wrap:before,.primary-nav-wrap:after {
    display: table;
    content: "";
    line-height: 0
}

.primary-nav-wrap:after {
    clear: both
}

#PrimaryNav {
    display: flex;
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 1;
    text-align: center;
    *zoom:1
}

#PrimaryNav:before,#PrimaryNav:after {
    display: table;
    content: "";
    line-height: 0
}

#PrimaryNav:after {
    clear: both
}

@media only screen and (min-width: 768px) {
    #PrimaryNav {
        display:flex;
        font-size: 22px;
        font-size: 2.2rem;
        width: 100%
    }

    #PrimaryNav li {
        border-left: 1px solid #FFF;        
        flex: 1;
    }

    #PrimaryNav li:first-child {
        border-left: 0
    }
}


@media only screen and (min-width: 700px) {
  #PrimaryNav li {      
        flex: 1;
    }
}

@media only screen and (max-width: 699px) {
    #PrimaryNav {
      display: block;
    }
}



#PrimaryNav li:first-child a {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none
}

#PrimaryNav a {
    background: #61A534;
    -moz-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.1);
    -webkit-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.1);
    box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.1);
    color: #FFF;
    display: block;
    font-weight: bold;
    padding: 20px;
    text-decoration: none;
    -webkit-transition: background 100ms ease-in-out;
    -moz-transition: background 100ms ease-in-out;
    -o-transition: background 100ms ease-in-out;
    transition: background 100ms ease-in-out
}

#PrimaryNav a.current,#PrimaryNav a:hover,#PrimaryNav a:focus,#PrimaryNav a:active {
    background: #44841a
}

@media only screen and (min-width: 768px) {
    #PrimaryNav a {
      -moz-box-shadow:none;
      -webkit-box-shadow: none;
      box-shadow: none
    }
}

#PrimaryNav .donate {
    background: #F16E22
}

#PrimaryNav .donate.current,#PrimaryNav .donate:hover,#PrimaryNav .donate:focus,#PrimaryNav .donate:active {
    background: #44841a
}

#PrimaryNav .donate.current:after,#PrimaryNav .donate:hover:after,#PrimaryNav .donate:focus:after,#PrimaryNav .donate:active:after {
    -webkit-transition: border 100ms ease-in-out;
    -moz-transition: border 100ms ease-in-out;
    -o-transition: border 100ms ease-in-out;
    transition: border 100ms ease-in-out;
    border-left-color: #44841a
}

@media only screen and (min-width: 768px) {
    #PrimaryNav .donate {
      position:relative;
      -webkit-transition: all 100ms ease-in-out;
      -moz-transition: all 100ms ease-in-out;
      -o-transition: all 100ms ease-in-out;
      transition: all 100ms ease-in-out
    }

    #PrimaryNav .donate:hover .dropdown {
      display: block
    }
}

@media only screen and (min-width: 768px) and (min-width: 1300px) {
    #PrimaryNav .donate:after {
        border:31px solid transparent;
        border-left-color: #F16E22;
        content: " ";
        height: 0;
        position: absolute;
        pointer-events: none;
        right: -62px;
        top: 0%;
        width: 0;
        -webkit-transition: border 100ms ease-in-out;
        -moz-transition: border 100ms ease-in-out;
        -o-transition: border 100ms ease-in-out;
        transition: border 100ms ease-in-out
    }

    #PrimaryNav .donate.current,#PrimaryNav .donate:hover,#PrimaryNav .donate:focus,#PrimaryNav .donate:active {
        background: #44841a
    }

    #PrimaryNav .donate.current:after,#PrimaryNav .donate:hover:after,#PrimaryNav .donate:focus:after,#PrimaryNav .donate:active:after {
        -webkit-transition: border 100ms ease-in-out;
        -moz-transition: border 100ms ease-in-out;
        -o-transition: border 100ms ease-in-out;
        transition: border 100ms ease-in-out;
        border-left-color: #44841a
    }
}

nav ul, nav ol {
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
}


/* END: Header */



/* Pattern strip */

body {
  border-top: 12px solid #44841a;
  border-bottom: 12px solid #44841a;
}



/* HOMEPAGE HERO */

.hero-home {
    background: #ec4631 url('https://oxfamapps.org/styleguide/static/img/patterns/hero-home-bg.gif?1485875867') 0 bottom no-repeat;
    color: #FFF;
    margin-left: auto;
    margin-right: auto;
    max-width: 1560px;
    overflow: hidden
}

@media only screen and (max-width: 480px) {
    .hero-home {
        margin-bottom:0
    }
}

@media only screen and (min-width: 1024px) {
    .hero-home {
        margin-bottom:20px
    }
}

.hero-home-image {
    width: 100%;
    margin: 0;
}

@media only screen and (min-width: 768px) {
    .hero-home-image {
        float:right;
        width: 50%
    }
}

.hero-home-content {
    line-height: 1.2;
    padding: 20px;
    text-align: center
}

.hero-home-content h1 {
    color: #FFF;
    font-family: OxfamHeadline,Arial,sans-serif;
    font-size: 21px;
    font-size: 2.1rem
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .hero-home-content h1 {
        font-size:32px;
        font-size: 3.2rem;
        margin: 0 0 10px;
        line-height: 1.2
    }
}

@media only screen and (min-width: 1024px) {
    .hero-home-content h1 {
        font-size:34px;
        font-size: 3.4rem;
        margin: 0 0 10px;
        line-height: 1.2;
        font-weight: normal
    }
}

@media only screen and (min-width: 1120px) {
    .hero-home-content h1 {
        font-size:37.5px;
        font-size: 3.75rem;
        font-weight: normal
    }
}

@media only screen and (min-width: 1220px) {
    .hero-home-content h1 {
        font-size:40px;
        font-size: 4rem;
        line-height: 1.2
    }
}

@media only screen and (min-width: 1300px) {
    .hero-home-content h1 {
        font-size:40px;
        font-size: 4rem;
        line-height: 1.2
    }
}

@media only screen and (min-width: 1400px) {
    .hero-home-content h1 {
        font-size:50px;
        font-size: 5rem;
        line-height: 1.2
    }
}

.hero-home-content p {
    font-size: 14px;
    font-size: 1.4rem;
    display: none
}

@media only screen and (min-width: 1024px) {
    .hero-home-content p {
        font-size:18px;
        font-size: 1.8rem;
        margin: 0 20px 25px 0;
        display: block
    }
}

@media only screen and (min-width: 1120px) {
    .hero-home-content p {
        margin-right:20px
    }
}

@media only screen and (min-width: 1200px) {
    .hero-home-content p {
        font-size:20px;
        font-size: 2rem;
        margin: 0 0 25px;
        display: block
    }
}

@media only screen and (min-width: 768px) {
    .hero-home-content {
        float:left;
        padding: 40px 5% 20px 6.5%;
        text-align: left;
        width: 50%
    }
}

@media only screen and (min-width: 1120px) {
    .hero-home-content {
        padding:40px 5% 20px 7%
    }
}

@media only screen and (min-width: 1220px) {
    .hero-home-content {
        padding:40px 5% 20px 10%
    }
}

@media only screen and (min-width: 1300px) {
    .hero-home-content {
        padding:40px 5% 20px 12%
    }
}

@media only screen and (min-width: 1400px) {
    .hero-home-content {
        padding:40px 5% 20px 14%
    }
}

.hero-home-content a.cmpnt-submit-pointed {
    color: #F16E22;
    font-weight: bold;
    line-height: 41px;
    padding-right: 10px;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    *zoom:1;*display: inline;
    -webkit-transition: all 100ms ease-in-out;
    -moz-transition: all 100ms ease-in-out;
    -o-transition: all 100ms ease-in-out;
    transition: all 100ms ease-in-out
}

.hero-home-content a.cmpnt-submit-pointed:hover {
    color: #FFF
}



/* Featured items */


.cmpnt-article-list {
    background: #FFF;
    padding: 0 20px
}

@media only screen and (min-width: 600px) {
    .cmpnt-article-list {
        font-size: 0;
        padding: 0 10px 20px
    }
}

@media only screen and (min-width: 600px) {
    .cmpnt-article-list .cmpnt-article-section,
    .cmpnt-article-list .cmpnt-article-date,
    .cmpnt-article-list .cmpnt-article-list-title,
    .cmpnt-article-list .cmpnt-article-list-intro {
        margin-right: 20px;
        margin-left: 20px
    }
}

.cmpnt-article-list-article {
    border-top: 1px solid #EAEADE;
    padding: 20px 0 10px 110px;
    position: relative
}

.cmpnt-article-list-article:first-child {
    border-top: 0
}

@media only screen and (min-width: 600px) {
    .cmpnt-article-list-article {
        background: #EAEADE;
        border: 0;
        border-right: 10px solid #FFF;
        border-left: 10px solid #FFF;
        display: inline-block;
        vertical-align: middle;
        *vertical-align: auto;
        *zoom: 1;
        *display: inline;
        margin-top: 20px;
        padding: 0 0 20px;
        vertical-align: top;
        width: 50%
    }
}

@media only screen and (min-width: 900px) {
    .cmpnt-article-list-article {
        width: 33.3333%
    }
}

@media only screen and (min-width: 600px) {
    .flexbox .cmpnt-article-list {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: flex;
        -webkit-flex-flow: row wrap;
        -moz-flex-flow: row wrap;
        -ms-flex-flow: row wrap;
        -ms-flex-direction: row;
        -ms-flex-wrap: wrap;
        flex-flow: row wrap
    }
}

@media only screen and (min-width: 600px) {
    .flexbox .cmpnt-article-list-article {
        -webkit-flex: 0 0 50% 0 auto;
        -moz-flex: 0 0 50% 0 auto;
        -ms-flex: 0 0 50% 0 auto;
        flex: 0 0 50% 0 auto
    }
}

@media only screen and (min-width: 900px) {
    .flexbox .cmpnt-article-list-article {
        -webkit-flex: 0 0 33.3333% 0 auto;
        -moz-flex: 0 0 33.3333% 0 auto;
        -ms-flex: 0 0 33.3333% 0 auto;
        flex: 0 0 33.3333% 0 auto
    }
}

.cmpnt-article-list-title {
    font-size: 16px;
    font-size: 1.6rem;
    margin-top: 5px;
    margin-bottom: 10px
}

@media only screen and (min-width: 600px) {
    .cmpnt-article-list-title {
        font-size: 18px;
        font-size: 1.8rem
    }
}

.cmpnt-article-list-image {
    left: 0;
    position: absolute;
    top: 20px;
    width: 100px
}

@media only screen and (min-width: 600px) {
    .cmpnt-article-list-image {
        margin-bottom: 20px;
        position: static;
        width: 100%
    }
}

.cmpnt-article-list-intro {
    display: none
}

@media only screen and (min-width: 600px) {
    .cmpnt-article-list-intro {
        display: block;
        font-size: 14px;
        font-size: 1.4rem
    }
}

.cmpnt-fundraiser .cmpnt-article-list-intro {
    display: none
}

@media only screen and (max-width: 599px) {
    .cmpnt-fundraiser .cmpnt-article-list-intro {
        display: block;
        font-size: 14px;
        font-size: 1.4rem
    }
}

@media only screen and (min-width: 600px) {
    .cmpnt-fundraiser .cmpnt-article-list-intro {
        display: block;
        font-size: 14px;
        font-size: 1.4rem
    }
}

.cmpnt-author-bio-content {
    padding: 20px 0 0 140px;
    position: relative
}

@media only screen and (min-width: 500px) {
    .cmpnt-author-bio-content {
        padding-left: 0
    }
}

.cmpnt-author-bio-image {
    left: 0;
    position: absolute;
    top: 20px;
    width: 120px
}

@media only screen and (min-width: 500px) {
    .cmpnt-author-bio-image {
        margin-bottom: 20px;
        position: static;
        width: 100%
    }
}



h1 {
  font-family: OxfamTStar, arial, san-serif;
  font-weight: 900;
}