/* =============================================================================
   Angelina Margolis Portfolio - Stylesheet
   Converted from LESS to modern CSS
   Original design by Ben Margolis (sixpearls.com) & Emily
   ========================================================================== */

/* === Custom Properties (from LESS variables) === */
:root {
  --gray-background: #4D4D4D;
  --dark-green: #338000;
  --light-green: #00898f;
  --purple: #800066;
  --magenta: #AA0044;
  --primary: #800066;
  --secondary-a: #00898f;
  --secondary-b: #338000;
  --complementary: #AA0044;
  --text-color: #ffffff;
  --footer-height: 6em;
  --grid-width: 960px;
}

/* === Font Faces === */
@font-face {
  font-family: "ExistenceFont";
  src: url("../fonts/Existence-Light-webfont.eot");
  src: url("../fonts/Existence-Light-webfont.eot?#iefix") format("embedded-opentype"),
       url("../fonts/Existence-Light-webfont.woff") format("woff"),
       url("../fonts/Existence-Light-webfont.ttf") format("truetype"),
       url("../fonts/Existence-Light-webfont.svg#ExistenceFont") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "LandliebeFont";
  src: url("../fonts/Landliebe-webfont.eot");
  src: url("../fonts/Landliebe-webfont.eot?#iefix") format("embedded-opentype"),
       url("../fonts/Landliebe-webfont.woff") format("woff"),
       url("../fonts/Landliebe-webfont.ttf") format("truetype"),
       url("../fonts/Landliebe-webfont.svg#LandliebeFont") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* === Normalize (HTML5 Boilerplate) === */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; }

::selection { background: var(--primary); color: #fff; text-shadow: none; }

a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 0; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 0; padding: 0; }
dd { margin: 0; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:invalid, textarea:invalid { background-color: #f0dddd; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

/* === Grid / Body === */
body {
  width: 100%;
}
body::before, body::after { content: ""; display: table; }
body::after { clear: both; }

/* === Vertical Rhythm === */
body {
  font-size: 100%;
  line-height: 1.6;
}

h1 {
  margin-top: 0; margin-bottom: 0;
  font-size: 3em;
  padding-top: 0.8em; padding-bottom: 0.8em;
}
h2, article header h2, article h1 {
  margin-top: 0; margin-bottom: 0;
  font-size: 2em;
  padding-top: 0.4em; padding-bottom: 0.4em;
}
h3, article header h3, article h2 {
  margin-top: 0; margin-bottom: 0;
  font-size: 1.5em;
  padding-top: 0.44em; padding-bottom: 0.44em;
}
h4, article header h4, article h3 {
  margin-top: 0; margin-bottom: 0;
  font-size: 1.25em;
}
p {
  margin-top: 0; margin-bottom: 0;
  font-size: 1em;
  padding-top: 0.6em; padding-bottom: 0.6em;
}
blockquote, h5, h6, iframe, label, pre, address, td, th, ul, ol, dl, dd, hr, table {
  margin-top: 0; margin-bottom: 0;
  font-size: 1em;
  padding-top: 1.6em; padding-bottom: 1.6em;
}
small {
  margin-top: 0; margin-bottom: 0;
  font-size: 0.75em;
  padding-top: 2.4em; padding-bottom: 2.4em;
}

/* === Helper Classes === */
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.invisible { visibility: hidden; }
.clearfix::before, .clearfix::after { content: ""; display: table; }
.clearfix::after { clear: both; }

.scale {
  display: block; position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

/* === Grayscale to Color Hover Effect === */
.grayscale-hover {
  filter: grayscale(100%);
  transition: filter 0.25s ease-in-out;
}
.grayscale-hover:hover {
  filter: none;
}

/* === Primary Styles === */
body {
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  color: var(--text-color);
  background-color: var(--gray-background);
}

#header-container > header, #main, #footer-container > footer {
  max-width: var(--grid-width);
  margin-left: auto; margin-right: auto;
}

#header-container header {
  text-align: center;
}
#header-container header h1#title {
  text-align: center;
  margin-top: 0; margin-bottom: 0;
  font-size: 4em;
  padding-top: 0.2em; padding-bottom: 0px;
  font-family: "LandliebeFont";
}
#header-container header h1#title a {
  text-decoration: none;
}
#header-container header h2#subtitle {
  text-align: center;
  text-transform: uppercase;
  font-family: "ExistenceFont";
  padding-top: 0;
}

h2, h3, h4, h5 {
  font-family: "ExistenceFont";
}

#footer-container {
  text-align: center;
}

/* === Article Typography === */
figure {
  position: relative; text-align: center;
}
figure.left { margin-left: 0; float: left; }
figure.right { margin-right: 0; float: right; }
figure blockquote { padding-bottom: 0; }
figure blockquote p { padding-top: 1.2em; padding-bottom: 1.2em; }
figure blockquote::before, figure blockquote::after {
  display: block; height: 0; font-size: 400%;
  font-style: normal; font-family: Georgia, "Times New Roman", serif;
  color: rgba(255, 255, 255, 0.8); position: absolute;
}
figure blockquote::before { content: "\201C"; top: 0; left: -0.0625em; }
figure blockquote::after { content: "\201D"; bottom: 1.25em; right: 0; }
figure figcaption { text-align: right; margin: 0.5em; }

/* === Main Container === */
#main-container > #main {
  padding-top: 1em;
}
#main-container > #main > article {
  width: 100%;
  padding-bottom: 25.6px;
  position: relative;
  overflow: hidden;
}
#main-container > #main > article > header {
  padding-top: 0.4em; padding-bottom: 0.4em;
  position: relative;
  display: inline; float: left;
  width: 97.917%; margin-left: 1.042%; margin-right: 1.042%;
}
#main-container > #main > article > header a {
  text-decoration: none;
}
#main-container > #main > article nav {
  font-size: 1em; width: 100%;
  display: inline-block; margin: 1em;
}
#main-container > #main > article nav a { display: inline-block; }
#main-container > #main > article nav a.next { float: left; position: relative; left: 1em; }
#main-container > #main > article nav a.previous { float: right; position: relative; right: 1em; }

/* === Homepage & Category Grid === */
body.home ul#homepage,
body.projectcategory ul#project_list {
  padding-top: 0;
}
body.home ul#homepage::before, body.home ul#homepage::after,
body.projectcategory ul#project_list::before, body.projectcategory ul#project_list::after {
  content: ""; display: table;
}
body.home ul#homepage::after,
body.projectcategory ul#project_list::after {
  clear: both;
}

body.home ul#homepage li,
body.projectcategory ul#project_list li {
  display: inline; float: left;
  width: 22.917%; margin-left: 1.042%; margin-right: 1.042%;
  position: relative; margin-bottom: 1em;
}
body.home ul#homepage li::before,
body.projectcategory ul#project_list li::before {
  content: ""; display: block; padding-top: 100%;
}

body.home ul#homepage li.image a,
body.projectcategory ul#project_list li.image a {
  text-align: center; background: black; padding: 0;
}
body.home ul#homepage li.image a::before,
body.projectcategory ul#project_list li.image a::before {
  content: ""; display: inline-block; height: 100%; vertical-align: middle;
}
body.home ul#homepage li.image a img,
body.projectcategory ul#project_list li.image a img {
  max-height: 100%; width: auto;
  margin-left: -100%; margin-right: -100%;
  filter: grayscale(100%);
  transition: filter 0.25s ease-in-out;
}
body.home ul#homepage li.image a img:hover,
body.projectcategory ul#project_list li.image a img:hover {
  filter: none;
}

body.home ul#homepage li#contact { background-color: var(--purple); }
body.home ul#homepage li#resume { background-color: var(--dark-green); }
body.home ul#homepage li#news { background-color: var(--magenta); }
body.home ul#homepage li#portfolio { background-color: var(--light-green); }

body.home ul#homepage li a,
body.projectcategory ul#project_list li a {
  overflow: hidden;
  display: block; position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  color: var(--text-color);
  padding-left: 0.5em; padding-right: 0.5em;
  font-family: "ExistenceFont";
  text-transform: uppercase;
  margin-top: 0; margin-bottom: 0;
  font-size: 0.75em;
  word-wrap: break-word;
  text-decoration: none;
}

/* === Category List === */
ul.category_list {
  list-style-type: none;
}
ul.category_list li > a, ul.category_list li > a:visited {
  text-decoration: none;
}
ul.category_list li ul.project_list {
  padding: 0; list-style-type: none; margin-left: 1em;
}
ul.category_list li ul.project_list li a {
  font-style: italic;
}

/* === Contact Form === */
form#contact-form > ul {
  list-style-type: none; width: 100%;
}
form#contact-form > ul li {
  padding-top: 0.8em; padding-bottom: 0.8em; width: 100%;
}
form#contact-form > ul li > ul.errorlist {
  list-style-type: none; padding: 0;
  display: inline; float: right; font-weight: bold;
}
form#contact-form > ul li > ul.errorlist li {
  background-color: var(--complementary); padding: 0;
}
form#contact-form > ul li label {
  width: 100%; display: block;
  padding-top: 0.4em; padding-bottom: 0.1em;
}
form#contact-form > ul li span.helptext {
  display: block; margin-top: 0; margin-bottom: 0;
  font-size: 0.75em; color: var(--secondary-a);
}
form#contact-form > ul li input[type="submit"] {
  background-color: var(--secondary-a); color: var(--text-color);
  border: none; padding: 1em;
  margin-left: auto; margin-right: auto; display: block;
}
form#contact-form > ul li input[type="submit"]:hover {
  background-color: var(--primary);
}
form#contact-form > ul li input[type="text"],
form#contact-form > ul li input[type="email"],
form#contact-form > ul li textarea {
  width: 100%; border: none; padding: 0.5em;
  box-sizing: border-box;
}

/* === Portfolio Project & Category Headers === */
body.project article header a,
body.projectcategory article header a {
  font-family: "ExistenceFont";
  margin-top: 0; margin-bottom: 0;
  font-size: 1.25em;
}
body.project article header h1,
body.projectcategory article header h1 {
  padding: 0;
}

/* === Project Detail === */
body.project dl#metafields {
  display: inline; float: left;
  width: 97.917%; margin-left: 1.042%; margin-right: 1.042%;
  overflow: hidden; padding-top: 0.6em;
}
body.project dl#metafields dt, body.project dl#metafields dd {
  float: left; display: inline-block; padding-top: 0.25em;
}
body.project dl#metafields dt { clear: left; }
body.project dl#metafields dt::after { content: ": "; }
body.project dl#metafields dd { clear: right; padding-bottom: 0; margin-left: 0.25em; }

body.project div#description {
  display: inline; float: left;
  width: 97.917%; margin-left: 1.042%; margin-right: 1.042%;
}

body.project div#thumbs {
  display: inline; float: left;
  width: 22.917%; margin-left: 1.042%; margin-right: 1.042%;
}
body.project div#thumbs ul {
  padding: 0; list-style-type: none;
}
body.project div#thumbs ul li {
  width: 100%; position: relative; overflow: hidden;
  margin-bottom: 0.25em;
}
body.project div#thumbs ul li::before {
  content: ""; display: block; padding-top: 60%;
}
body.project div#thumbs ul li a {
  display: block; position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  text-align: center; cursor: pointer;
}
body.project div#thumbs ul li a::before {
  content: ""; display: inline-block;
  height: 100%; vertical-align: middle;
}
body.project div#thumbs ul li a img {
  display: inline-block; vertical-align: middle;
  margin-left: auto; margin-right: auto;
  filter: grayscale(100%);
  transition: filter 0.25s ease-in-out;
}
body.project div#thumbs ul li a img:hover {
  filter: none;
}
body.project div#thumbs ul li a.landscape img {
  width: 100%; height: auto;
}
body.project div#thumbs ul li a.portrait img {
  height: 100%; width: auto;
}
body.project div#thumbs ul li.selected img {
  filter: none;
}

body.project div#controls div.nav-controls { overflow: hidden; }
body.project div#controls div.nav-controls a.prev { float: left; }
body.project div#controls div.nav-controls a.next { float: right; }
body.project div#controls div.ss-controls { text-align: center; }

body.project div#slideshow {
  display: inline; float: left;
  width: 72.917%; margin-left: 1.042%; margin-right: 1.042%;
  position: relative;
}
body.project div#slideshow::before {
  content: ""; display: block; padding-top: 75%;
}
body.project div#slideshow .slide-container {
  display: block; position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
body.project div#slideshow .slide-container .slide-inner {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background-color: black; overflow: hidden;
}
body.project div#slideshow .slide-container .slide-inner img {
  max-width: 100%; max-height: 100%;
}
body.project div#slideshow .slide-container .slide-inner img.landscape {
  width: 100%; height: auto; max-height: 100%;
}
body.project div#slideshow .slide-container .slide-inner img.portrait {
  height: 100%; width: auto; max-width: 100%;
}

body.project div#description,
body.project div#caption,
body.project dl#metafields {
  display: inline; float: left;
  width: 72.917%; margin-left: 1.042%; margin-right: 1.042%;
}
body.project div#caption { position: relative; }
body.project div#caption > span.image-caption { display: block; }

/* === Links (global override) === */
a, a:visited { color: var(--text-color); }
a:hover { color: #bfbfbf; }

/* === Mobile: Menu === */
nav ul { display: none; }
nav select { margin: 1em; }

/* === Mobile: Footer === */
#footer-container footer {
  position: relative; top: 60%;
}

/* === Rich Text Content === */
.rich-text p { text-align: justify; }
.rich-text img.richtext-image {
  margin-top: 0.5em; margin-bottom: 0.5em; height: auto;
}
.rich-text img.richtext-image.left {
  display: inline; float: left;
  width: 31.25%; margin-left: 1.042%; margin-right: 1.042%;
}
.rich-text img.richtext-image.right {
  display: inline; float: right;
  width: 31.25%; margin-left: 1.042%; margin-right: 1.042%;
}
.rich-text img.richtext-image.full-width,
.rich-text img.richtext-image.fullwidth {
  display: inline; float: left;
  width: 97.917%; margin-left: 1.042%; margin-right: 1.042%;
}

/* === Flat Footer === */
html { height: 100%; }
html body { position: relative; min-height: 100%; }
html body #main-container { padding-bottom: var(--footer-height); }
html body #footer-container {
  height: var(--footer-height); width: 100%;
  position: absolute; bottom: 0px;
}

/* === Responsive Video === */
.responsive-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.responsive-video iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* === Tables === */
table { width: 100%; border-collapse: collapse; margin-bottom: 76.8px; }
table, th, table tr td { border-top: 1px solid var(--primary); border-bottom: 1px solid var(--primary); }
thead th { background-color: var(--primary); color: #fff; font-weight: bold; border: #fff 1px solid; }
th { font-weight: bold; color: var(--primary); }

/* === Blog Post List === */
#post-list {
  list-style: none; list-style-image: none; padding: 0;
}
#post-list li { border-bottom: 1px solid #918E8F; }
#post-list li:last-child { border-bottom: none; }
#post-list li header { overflow: visible; }
#post-list li header > img { float: left; padding: 1em; }
#post-list li header .post-title { padding-bottom: 0px; padding-top: 1.6em; padding-bottom: 1.6em; }
#post-list li header cite.date { top: 0; right: 1em; padding-top: 0.8em; padding-bottom: 0.8em; }
#post-list li a, #post-list li a:visited {
  overflow: hidden; position: relative;
  padding-left: 1em; padding-right: 1em;
  padding-top: 1.6em; padding-bottom: 1.6em;
  color: var(--text-color); text-decoration: none;
  display: block;
}
#post-list li a:hover { background-color: var(--secondary-a); }

/* === Media Queries === */
@media only screen and (min-device-width: 530px) {
  body.home ul#homepage li a {
    margin-top: 0; margin-bottom: 0; font-size: 1.25em;
  }
}

@media only screen and (max-width: 400px) {
  h2#subtitle { width: 250px; margin: 0 auto; }
}

@media only screen and (min-width: 720px) {
  body.home ul#homepage {
    width: 720px; margin-left: auto; margin-right: auto;
  }
  body.home ul#homepage::before, body.home ul#homepage::after {
    content: ""; display: table;
  }
  body.home ul#homepage::after { clear: both; }
  body.home ul#homepage li a {
    margin-top: 0; margin-bottom: 0; font-size: 1.6em;
  }
}

@media only screen and (min-width: 960px) {
  #main article {
    margin: 0 auto; display: block; float: none;
  }
  #main article header cite.date {
    position: absolute; right: 0; bottom: 2em;
  }

  body.projectcategory ul#project_list {
    /* clearfix */
  }
  body.projectcategory ul#project_list::before,
  body.projectcategory ul#project_list::after { content: ""; display: table; }
  body.projectcategory ul#project_list::after { clear: both; }
  body.projectcategory ul#project_list li {
    display: inline; float: left;
    width: 220px; margin-left: 10px; margin-right: 10px;
  }

  ul.category_list > li {
    display: inline-table; float: none;
    padding-bottom: 1.4em;
  }

  body.project div#thumbs {
    display: inline; float: left;
    width: 220px; margin-left: 10px; margin-right: 10px;
  }
  body.project div#thumbs ul { overflow: hidden; }
  body.project div#thumbs ul li {
    display: inline; float: left;
    width: 100px; margin-left: 10px; margin-right: 10px;
  }
  body.project div#thumbs ul li:nth-child(odd) { margin-left: 0; }
  body.project div#thumbs ul li:nth-child(even) { margin-right: 0; }

  body.project div#description,
  body.project dl#metafields,
  body.project div#caption {
    display: inline; float: left;
    width: 700px; margin-left: 10px; margin-right: 10px;
    margin-left: 250px;
  }

  body.project div#controls div.nav-controls {
    display: inline; float: left;
    width: 700px; margin-left: 10px; margin-right: 10px;
    margin-left: 250px;
  }
  body.project div#controls div.ss-controls {
    display: inline; float: left;
    width: 700px; margin-left: 10px; margin-right: 10px;
    margin-left: 250px;
  }

  body.website.contactpage form#contact-form,
  body.contactpage form#contact-form {
    display: inline; float: left;
    width: 460px; margin-left: 10px; margin-right: 10px;
    margin-left: 250px;
  }
  body.contactpage form#contact-form ul { padding: 0; }

  /* Desktop Menu */
  header nav {
    display: block; margin-left: auto; margin-right: auto;
  }
  header nav ul {
    display: inline-block;
  }
  header nav ul li {
    display: inline-block;
    padding-left: 1em; padding-right: 1em;
  }
  header nav ul li a {
    display: block; text-align: center; text-decoration: none;
    margin-top: 0; margin-bottom: 0; font-size: 1em;
  }
  header nav ul li a, header nav ul li a:visited {
    color: var(--secondary-a);
  }
  header nav ul li a:hover {
    color: #bfbfbf;
  }
  header nav ul li.selected a {
    color: #bfbfbf;
  }

  /* Submenus */
  nav select { display: none; }
  nav ul li { position: relative; }
  nav ul li.selected a { text-decoration: none; }
  nav ul li ul { display: none; position: absolute; left: 0; top: 1em; }
  nav ul li:hover ul, nav ul li.over ul { display: block; }

  /* Blog post rich text alignment */
  body.blogpost .rich-text p { text-align: left; }

  .rich-text p { text-align: justify; }
  .rich-text img.richtext-image { width: auto !important; }
  .rich-text img.richtext-image.left { margin-left: 0; }
  .rich-text img.richtext-image.right { margin-right: 0; }
  .rich-text img.richtext-image.full-width,
  .rich-text img.richtext-image.fullwidth { margin-left: 0; margin-right: 0; }
}

/* === Print Styles === */
@media print {
  * { background: transparent !important; color: black !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; }
  a, a:visited { text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; }
  abbr[title]::after { content: " (" attr(title) ")"; }
  a[href^="javascript:"]::after, a[href^="#"]::after { content: ""; }
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}