/*  LOU CAMP LAW  */

/*  COLORS  */
html:root {
    --white: #ffffff;
    --pine: #7FABA7;
    --sage: #B9CFCD;
    --seaweed: #263E43;
}


/*  RESET */
html, body, div, section, header, footer, nav, aside, div,
form, img, input, textarea, button, select, option, label,
small, ul, ol, h1, h2, h3, h4, h5, h6, p, a, li, span {
    box-sizing: border-box;
    display: block;
    margin: 0px;
    padding: 0px;
    position: relative;
}


/*  TEXT  */


/*  Lists */
ul {
    list-style: none;
}
ul > li > a {
    line-height: 2.2em;
}
ul > li > * {
    display: inline-block;
}



/*  MEDIA  */
img {
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%;
}
div.image_container {
    height: 100%;
}

/*  INPUT  */
button {
    border: none;
}
button:focus {
    outline: none;
}


/*  LAYOUT  */
html, body {
    height: 100%;
}
div.inner {
    height: inherit;
}
div.container {
    overflow: hidden;
    padding-top: 81px;
}

/* Column  */
div.column,
*.dynamic,
*.dynamic2 {
/*    height: inherit;*/
}
div.column > div.inner {
    align-items: center;
    display: flex;
    flex-direction: column;
}
*.dynamic > div.inner,
*.dynamic2 > div.inner {
    display: flex;
    flex-direction: column;
}


*.column-to-row > div.inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/*  Row  */
div.row {
    height: inherit;
}
div.row > div.inner {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


/*  VERTICAL DIVIDERS  */
div.vertical {
    height: 0px;
    width: auto;
}
div.vertical.long {
    margin-bottom: 50px;
    margin-top: -50px;
}
div.vertical span {
    background-color: var(--seaweed);
    height: 1px;
    left: calc(50% - 1px);
    position: absolute;
    transform: translateX(-50%) rotate(90deg);
    width: 200px;
    z-index: 98;
}
div.vertical.long span {
    width: 300px;
}

*.mobile {
    display: inline;
}
*.desktop {
    display: none;
}


/* MOBILE -------------------------------------------------------------------- MOBILE */
@media only screen and (min-width: 480px) {
    
}


/* ADJUST -------------------------------------------------------------------- ADJUST */
@media only screen and (min-width: 580px) {
    
}


/* LARGE --------------------------------------------------------------------- LARGE */
@media only screen and (min-width: 768px) {
    *.column-to-row > div.inner {
        flex-direction: row;
    }
    div.vertical.long {
        margin-bottom: 100px;
        margin-top: -100px;
    }
    div.vertical span {
        width: 300px;
    }
    div.vertical.long span {
        width: 500px;
    }
}


/* ADJUST ------------------------------------------------------------------- ADJUST */
@media only screen and (min-width: 1000px) {
    *.dynamic2 > div.inner {
        flex-direction: row;
    }
    *.mobile {
        display: none;
    }
    *.desktop {
        display: inline;
    }
}


/* DESKTOP ----------------------------------------------------------------- DESKTOP */
@media only screen and (min-width: 1300px) {

}

/* OVERSIZED ------------------------------------------------------------- OVERSIZED */
@media only screen and (min-width: 1500px) {

}