:root {
    --xs_screen_width: 350px;
    --sm_screen_width: 640px;
    --md_screen_width: 875px;
    --lg_screen_width: 1024px;
    --xl_screen_width: 1224px;
    --xxl_screen_width: 1424px;
    --xxxl_screen_width: 1900px;

    --main_color: #125098;
    --secondary_color: #125D98;
    --secondary_pop: #7FBC42;
    --secondary_font: #FFFFFF;
    --main_midrange: #E7E7E7;
    --main_dark: #C4C4C4;
    --drop_shadow_color: #404040;
    --error_color: #FF0000;
}


body {
    margin: 0px;
}

:root {
    font-size: 15px;
}

#clear {
    clear: both;
}

.show_when_medium {
    display: none;
}

#btn_windsor {
    position: absolute;
    margin: 10px;
    float: left;
    z-index: 100;
}

#btn_debug {
    /*position: absolute; */
    float: right;
}

.fix {
    display: block;
}

#half_size {
    width: 50%;
}

#console_debug {
    position: absolute;
    top: 50px;
    left: 0px;
    width: 30%;
    height: 700px;
    overflow-y: scroll;
    background-color: #FFFFFF;
    box-shadow: 5px 5px 5px #CCCCCC;
    /*to right, down, blur, color*/
}

.communit {
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: normal;
}

.float_left {
    float: left;
    margin: 2%;
    width: 45%;
}

.float_right {
    float: right;
    margin: 2%;
    width: 45%;
}

.div_left {
    /*full screen until big enough to be half */
    float: left;
    width: 100%;
    padding-bottom: 2%;
    padding-top: 2%;
}

.div_right {
    float: right;
    width: 100%;
}

h5 {
    position: fixed;
    top: 0;
    left: 0;
    page-break-after: always;
}

div.row {
    clear: both;
    padding-top: 5px;
}

div.row span.label {
    float: left;
    width: 100px;
    valign: middle;
    text-align: right;
}

div.row span.form_element {
    float: right;
    width: 500px;
    text-align: left;
}

div.1and3 {
    clear: both;
}

div.1left {
    float: left;
    width: 150px;
    text-align: left;
}

div.3right {
    float: right;
    width: 700px;
    text-align: right;
}

.square_space {
    margin: 2% 8%;
}

/* Fluid Layout */
/* Page Columns */
#left_column {
    width: 97%;
    margin: 1%;
    padding: 1%;
    float: left;
    overflow: hidden;
}

#right_column {
    width: 98%;
    padding: 1%;
    background-color: #FFFFFF;
    float: left;
    overflow: auto;
    /* keeps child divs inside their bounds */
}

/* Split Div into right side left side */
#left_div {
    width: 50%;
    float: left;
}

#right_div {
    width: 49%;
    float: right;
}

/* block elements */
/*Have to start with the smallest size then use media screen min-width to go up to the next size */
#block_element {
    /* default 795 and smaller  small Screen - 1 Column counting menu below content*/
    width: 96%;
    padding: 1%;
    display: inline-block;
    vertical-align: top;
    /*float: left;*/
    word-wrap: break-word;
    margin-bottom: 5px;
    /* background-color:#FF0000; */
    /* Helps to show boarders of floating elements */
}

#block_double {
    width: 96%;
    padding: 1%;
    display: inline-block;
    vertical-align: top;
    word-wrap: break-word;
    margin-bottom: 5px;
}

#block_bottom {
    width: 96%;
    padding: 1%;
    display: inline-block;
    vertical-align: top;
    word-wrap: break-word;
    margin-bottom: 5px;
}

.block_thirds {
    width: 100%;
    /* padding: 2%; */
    display: inline-block;
    vertical-align: top;
}

.box_top {
    width: 100%;
    text-align: left;
}

.box_header {
    width: 100%;
    background-color: var(--main_dark);
    font-size: 1.75em;
    padding: .25em;
    color: white;
    text-align: left;
}

.box_1 {
    width: 97%;
    float: left;
    padding: 1%;
}

.box_2 {
    width: 97%;
    float: left;
    padding: 1%;
    font-size: 1.1em;
    text-align: left;
}

.box_3 {
    width: 97%;
    float: left;
    padding: 1%;
    font-size: 1.1em;
    text-align: left;
}

.box_4 {
    width: 97%;
    float: left;
    padding: 1%;
    font-size: 1.1em;
    text-align: center;
}

.box_footer {
    width: 100%;
    align-items: left;
}

.form_label {
    /* width: 98%; */
    padding: .5em .1em .25em 0;
    font-size: 1.1rem;
}

.form_field {
    width: 98%;
    padding: .1em .1em .1em 0;

}

.form_field input {
    width: 100%;
    padding: .1em .1em;
    margin: .1em 0;
    box-sizing: border-box;
    font-size: 1rem;
}

.form_field textarea {
    width: 100%;
    margin-top: .3em;
}

.form_field select {
    padding: .1em .1em;
    margin: .1em 0;
    font-size: 1rem;
}

.form_submit {
    /* width: 98%; */
    padding: .25em;
    font-size: 1rem;
}

.form_error {
    color: var(--error_color);
}

.button {
    font-size: 1rem;
    text-decoration: none;
    color: white;
    background: var(--secondary_color);
    border: 0.0625em solid #FFFFFF;
    border-radius: 1.5em;
    font-weight: bold;
    display: inline-block;
    margin: 0.5em 0 0.5em 0;
    padding: 0.4em 0.8em;
}

.button:hover {
    color: var(--secondary_font);
    background-color: var(--secondary_pop);
    border: 0.0625em solid #ccc;
    cursor: pointer;
}

.tile_header {
    height: 80px;
}

.tile_box {
    width: 100%;
    margin-bottom: 1%;
}

.tile_left {
    width: 100%;
    float: left;
}

.tile_right {
    width: 100%;
    float: right;
}

.tile_quad,
.tile_double_bottom,
.tile_double {
    /* position: relative; */
    width: 97.5%;
    margin: 0.45% 1%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

.tile_quad img,
.tile_double_bottom img,
.tile_double img,
.tile_single img {
    width: 100%;
    align: left;
}

.tile_quad h2,
.tile_double_bottom h2,
.tile_double h2,
.tile_single h2 {
    margin: 0.4em 0.4em 0.2em 0.4em;
}

.tile_quad p,
.tile_double_bottom p,
.tile_double p {}

.tile_single {
    width: 97.5%;
    margin: 1%;
    display: inline-block;
    vertical-align: top;
    text-align: center;
}

.tile_info {
    width: 98%;
    margin: 0.9%;
}

.tile_inside_left {
    width: 98%;
    margin: 1%;
    float: left;
}

.tile_inside_right {
    width: 98%;
    margin: 1%;
    float: right;
}

.message_highlight {
    /* font-weight:bold; */
    font-size: 1.2rem;
    vertical-align: sub;
}

.message_text {
    font-style: italic;
    font-size: 0.8rem;
}

@media print {
    h5 {
        position: static;
    }

    /*For printing contract */
}



@media only screen and (min-width: 350px) {

    .box_2 {
        width: 48%;
    }

    .box_3 {
        width: 48%;
        padding: 10% 1% 1% 1%;
    }

}

@media only screen and (min-width: 640px) {
    :root {
        font-size: 16px;
    }

    .tile_quad {
        position: relative;
    }

    .tile_quad img {
        width: 100%;
        height: auto;
    }

    .tile_quad h2 {
        position: absolute;
        bottom: 6rem;
        left: 0.5rem;
        color: #fff;
        text-shadow: 0.125rem 0.125rem 0.4rem var(--drop_shadow_color);
        margin: 0;
        font-size: 2.3rem;
        left: 1rem;
    }

    .tile_quad p {
        position: absolute;
        bottom: 3.4rem;
        font-size: 1.35rem;
        left: 1.15rem;
        color: #fff;
        text-shadow: 0.125rem 0.125rem 0.4rem var(--drop_shadow_color);
    }

    .tile_quad>.button {
        /*special class to select button */
        position: absolute;
        bottom: 1rem;
        left: 1rem;
        color: #fff;
        border: 0.0625em solid #fff;
        text-shadow: 0.125rem 0.125rem 0.4rem var(--drop_shadow_color);
    }

    .tile_double_bottom,
    .tile_double {
        position: relative;
    }

    .tile_double_bottom h2,
    .tile_double h2 {
        position: absolute;
        font-size: 2.3rem;
        bottom: 3rem;
        color: #fff;
        text-shadow: 0.125rem 0.125rem 0.4rem var(--drop_shadow_color);
        margin: 0;
    }

    .tile_double_bottom h2 {
        right: 1rem;
    }

    .tile_double h2 {
        left: 1rem;
    }

    .tile_double_bottom p,
    .tile_double p {
        position: absolute;
        font-size: 1.35rem;
        bottom: 0.5rem;
        color: #fff;
        text-shadow: 0.125rem 0.125rem 0.4rem var(--drop_shadow_color);
    }

    .tile_double_bottom p {
        right: 1.1rem;
    }

    .tile_double p {
        left: 1.1rem;
    }

    .tile_single {
        width: 47.5%;
    }

    .box_1 {
        /* 2x2 off sized */
        width: 58%;
    }

    .box_2 {
        width: 38%;
    }

    .box_3 {
        width: 38%;
        padding: 1%;
    }

    .box_4 {
        width: 38%;
        text-align: left;
    }

    #block_element {
        width: 47%;
    }

    #block_double {
        width: 47%;
    }

    .block_thirds {
        width: 49%;
        /* padding: 1%; */
    }
}



@media only screen and (min-width: 875px) {

    /* Medium Screen - 3 columns - counting menu as one */
    /*medium screen - 2 columns */
    #left_column {
        width: 21%;
        float: left;
        margin: 0;
    }

    /* Right column floats and leaves 3 % to the right - Left column is in left over space */
    #right_column {
        width: 70%;
        float: right;
        margin-right: 3%;
        /* Needs to stay for thin strip on the right */
    }

    .div_left {
        width: 49%;
        padding-right: 0.5%;
        padding-bottom: 0;
    }

    .div_right {
        width: 49%;
        padding-left: 0.5%;
        padding-top: 2%;
    }

    .show_when_medium {
        display: inline;
    }

    .form_field {
        width: 80%;
    }

    .form_field input {
        width: 80%;
    }

    .form_field textarea {
        width: 80%;
    }
}



@media only screen and (min-width: 1024px) {

    /* Large Screen - 4 Column counting menu as one */
    /*large - three column */
    #left_column {
        width: 17%;
    }

    #right_column {
        width: 74%;
    }

    #block_element {
        width: 30%;
    }

    #block_double {
        width: 60%;
    }

    .tile_left {
        width: 50%;
        float: left;
    }

    .tile_right {
        width: 50%;
        float: right;
    }

    .tile_double_bottom,
    .tile_double {
        /* position: relative; */
        width: 97.5%;
        margin: 0.65% 1%;
        /*was .05% */
    }

    .tile_single {
        /* 100% */
        width: 23.57%;
        margin: 1% 0.1%;
    }

    .tile_inside_left,
    .tile_inside_right {
        width: 47.5%;
    }

    .form_field {
        width: 60%;
    }

    .form_field input {
        width: 60%;
    }

    .form_field textarea {
        width: 60%;
    }

    .box_1 {
        /* 1x4 */
        width: 18%;
    }

    .box_2 {
        width: 28%;
    }

    .box_3 {
        width: 13%;
    }

    .box_4 {
        width: 33%;
    }
}



@media only screen and (min-width: 1224px) {

    /* Large Screen - 4 Column counting menu as one */
    /*extra-large - four column */
    #left_column {
        width: 17%;
    }

    #right_column {
        width: 74%;
    }

    #block_element {
        width: 22%;
    }

    #block_double {
        width: 40%;
    }

    #block_bottom {
        width: 40%;
    }

    .tile_single {
        /* 100% */
        /* width: 23.77%; */
        margin: 0.8% 0.4%;
    }
}



@media only screen and (min-width: 1424px) {

    /* Large Screen - 5 Column counting menu as one */
    /*extra-large - five column */
    #left_column {
        width: 15%;
        /* Needs to stay so left menu works */
    }

    #right_column {
        width: 77%;
        /* Needs to stay so left menu works */
    }

    #block_element {
        width: 17%;
    }

    #block_double {
        width: 34%;
    }

    .tile_single {
        /* 100% */
        /* width: 24%; */
        margin: 0.6% 0.3%;
    }

    .block_thirds {
        width: 32%;
        /* padding: 1%; */
    }

}



@media only screen and (min-width: var(--xxxl_wide)) {
    html {
        /* margin: 0 6%; */
    }

}


.style_blue {
    color: #006699;
}

.style_red {
    color: #FF0000;
}

.style_white {
    color: #FFFFFF;
}

.style8 {
    font-size: 8px;
}

.style9 {
    font-size: 9px;
}

.style10 {
    font-size: 10px;
}

.style10w {
    font-size: 10px;
    color: #FFFFFF;
}

.style11 {
    font-size: 11px;
}

.style12 {
    font-size: 12px;
}

.style14 {
    font-size: 14px;
}

.style14w {
    font-size: 14px;
    color: #FFFFFF;
}

.style14r {
    font-size: 14px;
    color: #FF0000;
}

.style16 {
    font-size: 16px;
}

.style16w {
    font-size: 16px;
    color: #FFFFFF;
}

.style18 {
    font-size: 18px;
}

.style18b {
    font-size: 18px;
    color: #006699;
}

.style18r {
    font-size: 18px;
    color: #FF0000;
}

.style18w {
    font-size: 18px;
    color: #FFFFFF;
}

.style20 {
    font-size: 20px;
}

.style20r {
    font-size: 20px;
    color: #FF0000
}

.style20w {
    font-size: 20px;
    color: #FFFFFF;
}

.style22 {
    font-size: 22px;
}

.style22r {
    font-size: 22px;
    color: #FF0000
}

.style23r {
    font-size: 23px;
    color: #FF0000
}

.style24 {
    font-size: 24px;
}

.style26 {
    font-size: 26px;
}

.style28 {
    font-size: 28px;
}

.style30 {
    font-size: 30px;
}

.style32 {
    font-size: 32px;
}

.style34 {
    font-size: 34px;
}

.style36 {
    font-size: 36px;
}

.style40 {
    font-size: 40px;
}

.style44 {
    font-size: 44px;
}

.style48 {
    font-size: 48px;
}

.box_rotate {
    -webkit-transform: rotate(270deg);
    /* Safari 3.1+, Chrome */
    -moz-transform: rotate(270deg);
    /* Firefox 3.5-15 */
    -ms-transform: rotate(270deg);
    /* IE9+ */
    -o-transform: rotate(270deg);
    /* Opera 10.5-12.00 */
    transform: rotate(270deg);
    /* Firefox 16+, Opera 12.50+ */
}

.box_rotate2 {
    writing-mode: tb-rl;
    filter: flipH() flipV();
}


/* ---- flex tile container ---- */
.flex-tile-container {
    display: flex;
    justify-content: space-around;
}

.tile_single {
    /* max-width: 95%; */
}

@media (max-width: 1200px) {
    .flex-tile-container {
        flex-flow: wrap;
    }

    .flex-tile-container a {
        max-width: 50%;
    }
}

@media (max-width: 768px) {
    .flex-tile-container a {
        max-width: 100%;
    }

    .tile_single {
        /*width: 100%; */
    }
}

/* ---- end flex tile container ---*/