﻿.display-none {
    display: none;
}

html {
    height: 100%;
}

body {
    background-color: var(--background-color);
    min-height: 100%;
}

#body {
    flex-grow: 1;
}

.row-no-padding .columns:first-child {
    padding-left: 0;
}

.row-no-padding .columns:last-child {
    padding-right: 0;
}

.root-form {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.padded-row > .columns:first-child {
    padding-left: 0;
}

.padded-row > .columns:last-child {
    padding-right: 0;
}

.grid-x {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}

.nowrap {
    flex-wrap: nowrap;
}

.cell {
    flex-basis: 0;
    padding: 0.4875rem;
}

.cell:first-child {
    padding-left: 0.975rem;
}

.cell:last-child {
    padding-right: 0.975rem;
}

.columns .cell:first-child, .cell .cell:first-child {
    padding-left: 0;
}

.columns .cell:last-child, .cell .cell:last-child {
    padding-right: 0;
}

.align-self-stretch {
    align-self: stretch;
}

.align-items-stretch {
    align-items: stretch;
}

.row-x-large {
    max-width: var(--breakpoint-x-large);
    margin-left: auto;
    margin-right: auto;
}

.small-grow-9 { flex-grow: 9; }
.small-grow-8 { flex-grow: 8; }
.small-grow-7 { flex-grow: 7; }
.small-grow-6 { flex-grow: 6; }
.small-grow-5 { flex-grow: 5; }
.small-grow-4 { flex-grow: 4; }
.small-grow-3 { flex-grow: 3; }
.small-grow-2 { flex-grow: 2; }
.small-grow-1 { flex-grow: 1; }

@media only screen and (max-width: 40em), only screen and (width: 40em) {
    .small-grow-row {
        flex-basis: 100%;
    }

    .cell.small-grow-row {
        padding-left: 0.975rem;
        padding-right: 0.975rem;
    }
}

@media only screen and (min-width: 40em) {
    .medium-grow-1 { flex-grow: 1; }
    .medium-grow-2 { flex-grow: 2; }
    .medium-grow-4 { flex-grow: 4; }
    .medium-grow-8 { flex-grow: 8; }
}

/* below mid-medium */
@media only screen and (max-width: 51.9375rem) {
    .show-for-mid-medium { display: none; }
}

/* mid-medium */
@media only screen and (min-width: 52rem) {
    .mid-medium-12 { width: 100%; }
    .mid-medium-9 { width: 75%; }
    .mid-medium-8 { width: 66.67%; }
    .mid-medium-6 { width: 50%; }
    .mid-medium-4 { width: 33.33%; }
    .mid-medium-3 { width: 25%; }
    .mid-medium-2 { width: 18.33%; }

    .mid-medium-grow-8 { flex-grow: 8; }
    .mid-medium-grow-7 { flex-grow: 7; }
    .mid-medium-grow-6 { flex-grow: 6; }
    .mid-medium-grow-5 { flex-grow: 5; }
    .mid-medium-grow-1 { flex-grow: 1; }

    .hide-for-mid-medium { display: none; }
}

/* large */
@media only screen and (max-width: 64rem){
    .large-up {
        display: none;
    }
}
@media only screen and (min-width: 64rem) {
    .large-down {
        display: none;
    }
    .large-12 { width: 100%; }
    .large-9 { width: 75%; }
    .large-8 { width: 66.67%; }
    .large-6 { width: 50%; }
    .large-4 { width: 33.33%; }
    .large-3 { width: 25%; }
    .large-2 { width: 18.33%; }
}


.no-basis {
    flex-basis: 0;
}

.background-cover {
    background-size: cover;
    background-position: center;
}



.text-align-right {
    text-align: right;
}

/* BODY ROW */
.body-row {
    width: 100%;
}

.body-row-large {
    min-height: var(--body-row-large-height);
}

.body-row-image-background {
    background-size: cover;
    background-position: center;
}

.body-row-header {
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 0.5rem solid var(--ucla-gold);
    padding-bottom: 0.60rem;
    line-height: 1;
    margin-bottom: 0.75rem;
    font-size: var(--font-size-xx-large);
}

.body-row-header.no-border {
    border-bottom: none;
    padding-bottom: 0;
}

.body-content {
    padding-top: var(--home-row-content-margin);
}

.background-parallax {
    transition: background-position 0.1s ease;
}

.pad-bottom {
    padding-bottom: var(--home-row-content-margin);
}

.padded-row {
    padding-left: 1rem;
    padding-right: 1rem;
}

.full-row {
    width: 100%;
}