@charset "UTF-8";
/* Ellen Hallie Schiff CSS */
/* ############################################################################################ */
/*	CSS Fonts */
@import url(https://fonts.googleapis.com/css?family=Cantarell:400,400i,700,700i);
@import url(https://fonts.googleapis.com/css?family=Cardo:400,400italic,700|Julius+Sans+One);
/* ############################################################################################ */
/*	CSS Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, main, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0;
    font-size: 100%; /*font:inherit; vertical-align:baseline;*/
    margin: 0;
    padding: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.clear {
    clear: both;
}
.clear:after {
    clear: both;
}
.clear:before, .clear:after {
    display: table;
    line-height: 0;
    content: "";
}
*:focus {
    outline: none;
}
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
/* ############################################################################################ */
/* For odd text size behavior in iPhone 4s */
body {
    -webkit-text-size-adjust: 100%;
    text-rendering: auto;
}
/* Tags */
body, html {
    background-color: #FFF;
    font-family: 'Cardo', serif;
}
p, a {
    font-size: 1em;
    line-height: 1.25em;
    text-decoration: none;
}
a:hover {
    background-color: #CCC;
    color: #000;
}
a:focus {
    background-color: #CCC;
    color: #000;
    outline: thin dotted;
}
navlink:hover {
    background-color: #CCC;
    color: #000;
}
navlink:focus {
    background-color: #CCC;
    color: #000;
    outline: thin dotted;
}
header {
    width: 80%;
}
main {
    margin: 2em 2em 0 0;
}
mobile {
    display: none;
}
mobilemenu {
    display: none;
	z-index: 200;
}
nav {
    display: block;
}
main a {
    text-decoration: none;
    color: #000;
    white-space: nowrap;
}
main a:hover {
    text-decoration: underline;
    color: #000;
}
main p, h1, h2 {
    font-family: 'Cardo', serif;
    color: #000;
}
main p {
    margin-left: 0.9375em;
}
main h1, h2 {
    font-variant: small-caps;
}
main h1 {
    font-size: 1.5em;
    line-height: 1em;
}
main h2 {
    margin-top: 0.625em;
    font-size: 1.125em;
    line-height: 1em;
    font-weight: bold;
}
main h2 span {
    font-size: 0.7em;
    font-weight: normal;
}
video {
    width: 100%;
    height: auto;
}
.videoContainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}
/* Classes */
.wrapper {
    width: 1024px;
    overflow: hidden;
    margin-bottom: 1em;
}
.content {
    margin-top: 1em; /*0.625em;*/
    margin-left: 10em;
}
.center {
    text-align: center;
}
.logoBox {
    margin-top: 2.2em;
    margin-left: 5.625em;
    transition: all 300ms linear;
}
.logoBox p {
    font-family: 'Julius Sans One', sans-serif;
    font-weight: 700;
    font-size: 2.3em;
    line-height: 0.63em;
    color: #000;
    white-space: nowrap;
}
.logoState {
    font-weight: 400;
    font-size: 0.445em;
    margin-left: 0.3em;
}
.navigationBox {
    float: right;
}
.navigationBox p, .navigationBox div, .navigationBox a {
    color: #000;
}
.navigationBox navlink {
    display: inline;
}
.navigationBox a, .navigationBox navlink {
    font-family: Cantarell, 'Julius Sans One', sans-serif;
    font-size: 0.8em;  /* 0.75em; */
    font-weight: 400; /* 700 */
    text-transform: uppercase;
    margin-left: 1.25em;
}
.navigationBox a:hover, .navigationBox navlink:hover {
    color: #000;
}
.catMenu {
    position: relative;
    display: inline;
}
.subMenu {
    display: none;
    z-index: 99;
}
.catMenu:hover>.subMenu {
    display: block;
    position: absolute;
    top: 99%;
    left: 0;
    padding: 0.5em 0;
    background-color: #FFF;
    border: #000 thin solid;
    z-index: 99;
}
.subMenuHover {
    display: block;
    position: absolute;
    top: 99%;
    left: 0;
    padding: 0.5em 0;
    background-color: #FFF;
    border: #000 thin solid;
    z-index: 99;
}
.subMenu .pageLink a {
    display: block;
    width: 11em;
}
.coverBorderBox {
    padding: 0.125em;
    border: #000 solid 0.0625em;
    width: auto;
    height: 29em;/* 35em; */
}
/* Home Slide CSS ###################### */
.spacerbox {
    margin: 3em 0 0 0;
    height: 47em;
    text-align: center;
}
.container {
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    width: auto;
}
.photoSlide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0 auto;
}
.transition {
    transition: opacity 2s linear;
}
.opacityOn {
    opacity: 1;
}
.opacityOff {
    opacity: 0;
}
.fadeIn {
    opacity: 1;
}
.fadeOut {
    opacity: 0;
}
.hide {
    visibility: hidden;
}
/* End Home Slider */
.copyrightBox {
    padding-top: 2em;
    clear: both;
    text-align: center;
}
.copyrightBox p {
    font-size: 0.625em;
    line-height: 0.875em;
    color: #333;
}
.horizontalLine {
    border-bottom: #000 solid 0.0625em;
    margin: 0.625em 0;
}
.horizontalLineLightGray {
    border-bottom: #CCC solid 0.0625em;
}
.stateMobileHide {
    display: block;
}
.logoBoxInterior {
    margin-top: 0.85em;
    margin-left: 1em;
}
.logoBoxInterior p {
    cursor: pointer;
    font-family: 'Julius Sans One', sans-serif;
    font-weight: 700;
    font-size: 1.625em;
    line-height: 0.675em;
    color: #000;
    white-space: nowrap;
}
.logoStateInterior {
    font-weight: 400;
    font-size: 0.46em;
    line-height: 1em;
    margin-left: 0.33em;
}
.bio p, .press p {
    margin-bottom: 1em;
}
.floatLeft {
    float: left;
    padding: 0em 1em 0em 0em;
}
.imageIsolate {
    width: 100%;
    height: auto;
}
.heightBox {
    height: 20em;
}
.content figcaption {
    font-family: 'Julius Sans One', sans-serif;
    font-weight: 400;
    font-size: 0.8em;
    line-height: 1em;
    color: #777;
}
.container figcaption {
    font-family: Cantarell, sans-serif;
    font-weight: 400;
    font-size: 1em;
    line-height: 1em;
    color: #777;
}
.floatWrapper, .portfolio {
    margin: 1em 0;
}
.portfolio p {
    font-size: 13px;
    line-height: 17px;
    margin-left: 0px;
    margin-bottom: 3px;
}
.GallerySlideBox img {
    margin-right: 3em;
    width: 90%;
    height: auto;
}
#route a {
    color: #AAA;
}

/* ############################################################################################ */
/* TABLET */
@media screen and (max-width:1023px) {
.wrapper {
    width: 100%;
}
main p {
    margin-right: 3em;
    transition: margin-right 300ms linear;
}
.navigationBox {
    margin-right: 2em;
}
.horizontalLineLightGray {
    margin-right: 0.8em;
    transition: margin-right 300ms linear;
}
}

/* ############################################################################################ */
/* MOBILE */
@media screen and (max-width:800px) {
main p {
    margin-right: 0em;
}
mobile {
    display: block;
    float: right;
    margin: 2.5em 1em 0;
}
mobilemenu {
    display: block;
    background-color: #FDFDFD;
    position: fixed;
    top: 0;
    right: -45em;
    margin: 0 0 0 2em;
    padding: 0 0 0 0.5em;
    width: 88%;
    overflow-y: scroll;
    height: 100%;
    -webkit-transition: right 300ms linear;
    -moz-transition: right 300ms linear;
    -o-transition: right 300ms linear;
    transition: right 300ms linear;
}
.animateMobileMenu {
    right: 0em;
    -webkit-transition: right 300ms linear;
    -moz-transition: right 300ms linear;
    -o-transition: right 300ms linear;
    transition: right 300ms linear;
}
mobilemenu a {
    display: block;
    font-family: 'Julius Sans One', sans-serif;
    font-size: 1.5em;
    line-height: 2.4em;
    color: #000;
}
.topimg {
    vertical-align: top;
    cursor: pointer;
}
mobilemenu p:nth-child(1) {
    font-family: 'Julius Sans One', sans-serif;
    font-size: 1em;
    line-height: 1.7em;
    text-transform: capitalize;
    color: #FB0;
    cursor: pointer;
}
.mobileicon {
    cursor: pointer;
}
mobilemenu navlink {
    display: block;
    font-family: 'Julius Sans One', sans-serif;
    font-size: 1.5em;
    line-height: 2.4em;
    color: #000;
}
.catMenu {
    display: block;
}
.subMenu {
    display: block;
    padding: 0 0 0 0.5em;
}
.catMenu:hover>.subMenu {
    display: inherit;
    position: relative;
    top: 0;
    left: 0;
    padding: 0 0 0 0.5em;
    border: none;
}
.subMenu .pageLink a {
    display: block;
    width: 100%;
}
nav {
    display: none;
}
.wrapper {
    width: 100%;
}
.logoBox {
    margin-top: 1em;
    margin-left: 1em;
    transition: all 300ms linear;
}
.logoBox p {
    font-size: 1.75em;
    line-height: 0.63em;
    color: #000;
    transition: all 300ms linear;
}
.logoState {
    font-size: 0.445em;
    margin-left: 0.3em;
}
.content {
    margin-left: 1em;
    transition: margin-left 300ms linear;
}
.stateMobileHide {
    display: none;
}
/* Home Slide */
.spacerbox {
    margin: 0;
}
.container {
    margin: 0 auto;
    width: 86%;
}
.photoSlide {
    margin: 0;
}
.coverBorderBox {
    width: 79%; /* 90% */
    height: auto;
}
/* End Home */
}

@media screen and (max-width:525px) {
.logoBox p {
    font-size: 1.6em;
    line-height: 0.63em;
    color: #000;
    transition: all 300ms linear;
}
.logoState {
    font-size: 0.445em;
    margin-left: 0.3em;
}
}
/* 
* SLIDE VIEWER
*/
/* ############################################################################# */
 
.pictureframe {
    position: relative;
    top: 0;
    left: 0;
}
#viewer {
    width: 525px;
}
#viewerplus {
    width: 700px;
}
.pictureframe>p {
    position: absolute;
    bottom: 3em;
    width: 100%;
    background-color: rgba(255,255,255,0.35);
}

@media screen and (min-width:450px) and (max-width:800px) {
#viewer, #viewerplus {
    width: 400px;
    margin-left: 20px;
}
li.pictureframe.lslide > img {
    width: auto;
    max-width: 400px;
    height: 100%;
    max-height: 300px;
}
}

@media screen and (max-width:450px) {
#viewer, #viewerplus {
    width: 300px;
    margin-left: 20px;
}
li.pictureframe.lslide > img {
    width: auto;
    max-width: 300px;
    height: 100%;
    max-height: 200px;
}
}


/* 
* STATEMENT IMAGES
*/
/* ############################################################################# */
 
#stateimage1 > img {
    width: auto;
    max-width: 400px;
    height: 100%;
    max-height: 300px;
    margin-right: 0.5em;
}
#stateimage2 > img {
    width: 100%;
    max-width: 800px;
    height: 100%;
    max-height: 600px;
    margin-right: 0.5em;
}

@media screen and (min-width:450px) and (max-width:1008px) {
#stateimage1 > img {
    width: 100%;
    max-width: 800px;
    height: 100%;
    max-height: 600px;
    margin-right: 0;
}
}

@media screen and (max-width:450px) {
#stateimage1 > img {
    width: 100%;
    max-width: 800px;
    height: 100%;
    max-height: 600px;
    margin-right: 0;
}
}

/* EOF */