html {
    font-size: 14px;
}
@media screen and (min-width: 1150px) {
    html {
        font-size: 15px;
    }
}
@media screen and (min-width: 1275px) {
    html {
        font-size: 16px;
    }
}

body {
    background: #fff;
    height: 100%;
    font-family: 'Roboto', sans-serif;
    margin: 0;
}
/* FONT */
h1, .h1  {
    font-size: 1.8rem;
    font-weight: 500;
    font-family: 'Raleway', sans-serif;
}
h2, .h2 {
    font-size: 1.6rem;
    font-weight: 500;
    font-family: 'Raleway', sans-serif;
}
h3, .h3 {
    font-size: 1.4rem;
    font-weight: 500;
    font-family: 'Raleway', sans-serif;
}
h4, .h4 {
    font-size: 1.2rem;
    font-weight: 400;
    font-family: 'Raleway', sans-serif;
}
p, .p {
    font-size: 1rem;
    line-height: 1.5;
}
a {
    text-decoration: none;
    color: #0F4C5C;
}
a:hover, a:focus {
    color: #003c4c;
}
.text_center {
    text-align: center;
}
.text_right {
    text-align: right;
}
.text_125 {
    font-size: 1.25rem;
}
.text_100 {
    font-size: 1rem;
}
.text_75 {
    font-size: .75rem;
}
.text_50 {
    font-size: .5rem;
}
.text_weight_100 {
    font-weight: 100;
}
.text_weight_200 {
    font-weight: 200;
}
.text_weight_300 {
    font-weight: 300;
}
.text_weight_400 {
    font-weight: 400;
}
#nav_links > a {
    margin-left: 1rem;
    font-size: 1.2rem;
}
/* !----------------- LAYOUT ------------------------- */
.app_container {
    padding: 4rem;
    /* background: url("../images/index_background.jpg") no-repeat scroll center center;
    background-size: cover; */
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../images/index_background.jpg") no-repeat scroll center center;
    background-size: cover;
}
.app_container > div {
    background: #fff;
}
.flex {
    display: flex;
}
/* COLUMNS */
.columns > .col {
    margin-left: 1rem;
    margin-right: 1rem;
}
/* COLUMN ALIGNMENT */
.align_center {
    align-items: center;
}
.align_start {
    align-items: flex-start;
}
.align_end {
    align-items: flex-end;
}
.align_items_end {
    align-items: flex-end;
}
.justify_content_end {
    justify-content: flex-end;
}
/* laptops and up */
@media only screen and (min-width: 768px) {
    .columns {
        display: flex;
    }
    .columns_justify_between {
        justify-content: space-between;
    }
    .columns_space_around {
        justify-content: space-around;
    }
    /* COLUMN WIDTHS */
    .columns_2 > .col {
        width: 50%;
    }
    .columns_3 > .col {
        width: 33.333%;
    }
    .columns_4 > .col {
        width: 25%;
    }
    .columns_25_75 > .col:first-child {
        width: 25%;
    }
    .columns_25_75 > .col:last-child {
        width: 75%;
    }
    .columns_30_70 > .col:first-child {
        width: 30%;
    }
    .columns_30_70 > .col:last-child {
        width: 70%;
    }
    .columns_40_60 > .col:first-child {
        width: 40%;
    }
    .columns_40_60 > .col:last-child {
        width: 60%;
    }
}
/* PADDING */
.padding_tb_1 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
.padding_lr_1 {
    padding-left: 1rem;
    padding-right: 1rem;
}
.padding_tb_2 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.padding_lr_2 {
    padding-left: 2rem;
    padding-right: 2rem;
}
.padding_tb_3 {
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.padding_lr_3 {
    padding-left: 3rem;
    padding-right: 3rem;
}
.padding_tb_4 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.padding_lr_4 {
    padding-left: 4rem;
    padding-right: 4rem;
}
.padding_tb_0 {
    padding-top: 0;
    padding-bottom: 0;
}
.padding_lr_0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* MARGIN */
.margin_tb_1 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.margin_lr_1 {
    margin-left: 1rem;
    margin-right: 1rem;
}
.margin_tb_2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.margin_lr_2 {
    margin-left: 2rem;
    margin-right: 2rem;
}
.margin_tb_3 {
    margin-top: 3rem;
    margin-bottom: 3rem;
}
.margin_lr_3 {
    margin-left: 3rem;
    margin-right: 3rem;
}
.margin_tb_0 {
    margin-top: 0;
    margin-bottom: 0;
}
.margin_lr_0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.margin_l_0 {
    margin-left: 0 !important;
}
/* !----------------- COMPONENTS ------------------------- */
/* MAIN NAV */
#main_nav {
    border-bottom: 1px solid #5F0F40;
}
/* FOOTER */
footer {
    background: #fff;
}
/* LOGO */
.logo {
    height: 2em;
    display: inline-block;
    margin-right: 1em;
}

/* COLORS */
.bg_white {
    background: #fff;
}
.text_gray {
    color: #5e5e5e !important;
}
.text_red {
    color: #ff0000 !important;
}
.text_purple {
    color: #5F0F40 !important;
}
.text_yellow {
    color: #FB8B24 !important;
}
.text_orange {
    color: #E36414 !important;
}
.text_blue {
    color: #0F4C5C !important;
}
.text_light_blue {
    color: #2f7283 !important;
}

/* MOBILE FRIENDLY IS FUN IN TRADITIONAL CSS */
@media screen and (min-width: 1150px) {

}
@media screen and (min-width: 1275px) {

}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .media_large_hide {
        display: none;
    }
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
}
/* Extra small devices (phones, 768px and down) */
@media only screen and (max-width: 768px) {
    .app_container {
        padding: 2rem;
    }
    .media_small_hide {
        display: none;
    }
    .media_large_hide {
        display: block;
    }
    .columns {
        display: block;
    }
}