/* dg */

/* fonts */
@font-face {font-family: 'Marr Sans Web'; src: url('/fonts/MarrSans-RegularItalic-Web.eot'); src: url('/fonts/MarrSans-RegularItalic-Web.eot?#iefix') format('embedded-opentype'), url('/fonts/MarrSans-RegularItalic-Web.woff2') format('woff2'), url('/fonts/MarrSans-RegularItalic-Web.woff') format('woff'); font-weight:  400; font-style:   italic; font-stretch: normal;}


@font-face {font-family: 'Marr Sans Web'; src: url('/fonts/MarrSans-Regular-Web.eot'); src: url('/fonts/MarrSans-Regular-Web.eot?#iefix') format('embedded-opentype'), url('/fonts/MarrSans-Regular-Web.woff2') format('woff2'), url('/fonts/MarrSans-Regular-Web.woff') format('woff'); font-weight:  400; font-style:   normal; font-stretch: normal;}


@font-face {font-family: 'Marr Sans Web'; src: url('/fonts/MarrSans-MediumItalic-Web.eot'); src: url('/fonts/MarrSans-MediumItalic-Web.eot?#iefix') format('embedded-opentype'), url('/fonts/MarrSans-MediumItalic-Web.woff2') format('woff2'), url('/fonts/MarrSans-MediumItalic-Web.woff') format('woff'); font-weight:  500; font-style:   italic; font-stretch: normal;}

@font-face {font-family: 'Marr Sans Web'; src: url('/fonts/MarrSans-Medium-Web.eot'); src: url('/fonts/MarrSans-Medium-Web.eot?#iefix') format('embedded-opentype'), url('/fonts/MarrSans-Medium-Web.woff2') format('woff2'), url('/fonts/MarrSans-Medium-Web.woff') format('woff'); font-weight:  500; font-style:   normal; font-stretch: normal;}

html { height: 100%; }
body { padding: 0; margin: 0 auto; background-color: #222; color: #fff; font-family: 'Marr Sans Web', sans-serif; font-size: 100%; font-size: 16px; font-weight: 400; font-feature-settings: "liga", "kern"; line-height: 1.2; z-index: 0; }

a:link, a:visited { text-decoration: none; color: #fff; transition: color 200ms ease-in; }
h1 { font-size: 1em; font-weight: 500; margin: 0 0 1em 0; }
h3 { font-weight: normal; font-size: 1.5em; }


header { padding: 2em 0 0 0; margin: 0; width: 80%; z-index: 100; position: fixed; left: 10%; font-size: 0.85em; }
#content { width: 80%; margin: 0; padding: 0; margin-left: 10%; padding-top: 8em;  z-index: 5; position: relative; }
#content a:hover { text-decoration: underline; }
#menu { position: absolute; right: 0; top: 2em; margin: 0; padding: 0; }
#menu > li { display: inline-block; margin-right: 1em; text-transform: uppercase; letter-spacing: 0.5px; }
#menu li { list-style: none; }
footer { clear: both; padding-top: 3em; opacity: 0; }

#projects-menu { padding-left: 0; margin: 0; position: absolute; top: 1.25em; }

#screen, #menu-screen { position: fixed; width: 100%; padding: 0; background: none; height: 100%; top: 0; z-index: 0; }
#screen.boxed {background-image: -webkit-linear-gradient(rgba(0,0,0,0.4) 5em, rgba(255,255,255,1) 5em); background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.4) 5em, rgba(255, 255, 255, 1) 5em); visiblity: hidden; transition: visibility 0s, opacity 0.25s ease;  opacity: 0; z-index: 0; }
#screen.boxed.active { visibility: visible; opacity: 1;  }

#menu-screen { z-index: 5; opacity: 0; visibility: hidden; transition: visibility 0.5s, opacity 0.5s ease; background-color: #222; }
#menu-screen.active { opacity: 0.5; visibility: visible; };
#title { margin-top: 0; padding-top: 0; font-weight: normal; font-size: 1em; }
#title a { text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; }

.module { clear: both; width: 50%; }
.modules { position: relative; margin: 0; padding: 0; }
.module h3 { margin: 0 0 .25em 0; transition: padding-left 0.25s ease;}
.module h3 span, .module h3 a { padding: 0 .5em .25em 0; font-weight: normal; text-decoration: none; margin: 0 0 .25em 0; transition: 0.25s ease; }
.module h3:hover a { padding-left: 0.5em; padding-right: 0; cursor: pointer; }
.module h3 a.active { content: ''; padding-left: 0.5em; padding-right: 0; opacity: 1; }
.module h3 a.active::after { content: ' \2192'; }
.module h3 b { font-weight: normal; font-style: normal; }
.module .body { padding: 0 0 1em 1em; margin-bottom: 2em; line-height: 1.5; }
.module .body div { margin: 0 0 1em 0;  padding: 0; }
.module a { text-decoration: underline; transition: padding-left 0.25s ease; }
.module a:hover { padding-left: 0.25em; }
.module .wrapper { display: none; }
.module .wrapper.active { position: absolute; top: 0; left: 50%; width: 45%; display: block; color: #000; padding: 0; margin-bottom: 2em; }
.module.dark a, .module.dark .body { color: #000; }
.module.dark a { opacity: 0.4; }

.work { position: relative; margin:0 auto; max-width: 100%; text-align: center; }
.work img { background-color: #fff; border: #fff 4px solid; margin: 0; }
.work img { border: none; max-height: 550px; }
.work.vertical img { width: 425px; max-height: 70%; }
.info { padding: 0; margin: 0;}
.work .info { padding-top: 1em; }
.work .nav { position: absolute; top: 200px; right: 0; z-index: 5; width: 25px; }
.work .nav a { display: block; width: 100%; height: 45px; background-image: url('/images/next-arrow.png'); background-size: 100% 100%;  }
.work .nav.previous { left: 0; }
.work .nav.previous a { background-image: url('/images/prev-arrow.png'); left: 0;  }
.work .nav span { display: none; }
.work .info p { padding-top: 2em; }
.work .info p a { opacity: 0.8; }

.projects ul { list-style: none; padding: 0; margin: 0; }
.project { display: inline; margin: 0; padding: 0; }
.project a { margin: 0; padding: 0; }
.project img { padding: 1px; cursor: pointer; margin: 0; border: 0; }
.project img:hover { background-color: #fff; }
.projects h3 { margin-bottom: .5em;  }

/* publications */
.book img { margin-bottom: 1em; max-height: 200px; }

/* clipping previews */
.module .preview { padding-left: 1em; }
.module .preview iframe { width: 100%; height: 320px;}

/* clipping content */
.text { background-color: #fff; padding: 1em; }
.text p { padding: 0; margin-top: 0; }

/* cv */
#cv .module, #contact .module { font-size: 1.5em; width: 100%;}
#cv .module .body, #contact .module .body { padding: 0; }

/* contact */
#contact .module { width: 450px; }
#contact .credits { margin-top: 4em; font-size: 0.75em; }

#close-button { display: none; position: absolute; right: 0; top: 0; color: black; font-size: 2em; line-height: 1; margin: 0; padding: 0; cursor: pointer; }
#close-button.active { display: block; }
#close-button:hover { text-decoration: none; }

#menu-toggle { display: none; position: absolute; right: 2em; top: 2em; color: #fff; background: 0; border: 0; }


@media only screen
  and (min-device-width: 768px) {
    header, #content { min-width: 725px; }
}

/* mobile */
@media only screen
  and (max-device-width: 768px) {

    html {font-size: 85%;}

    header { width: 100%; left: 0; position: absolute; }

    #title { padding-left: 10%; }

    nav  {position: absolute; width: 100%; margin: 0; background-color: #fff; top: 5em; left: 0; padding: 0; margin: 0; display: none; overflow-x: hide; }

    #menu {position: relative; top: 0; left: 0; padding: 2em;}

    nav.active {display: block;}
    nav.active #menu li {display: block; padding-bottom: .25em;}

    #menu a {color: #000; font-size: 1.5em;}

    #menu-toggle {display: block;}

    #projects-menu {position: relative; top: 0; padding-left: 1em;}

    #menu-screen, #menu-screen.active { display: none; }

    .module {width: 90%;}
    .module h3 {font-size: 1.25em;}
    .module .wrapper.active {position: relative; left: 0; top: 0; width: 100%;}

    #cv .module, #contact .module {width: 100%; font-size: 1em;}
    .work img { max-width: 75%; }
    .work .next { top: 25%; height: 1em; }
    .work .previous { top: 25%; }
}