/*! HTML5 Boilerplate v6.0.1 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

img { width: 100%; }
p, a, span, div, li, h1, h2, h3, h4, h5, h6, tr, td, label, input { font-family: 'Raleway', sans-serif; }

body { width: 100%; height: 100%; background-color: #fff; font-family: 'Raleway', sans-serif; overflow-x: hidden; }
.main { padding: 20px; }
    .logo {margin-bottom: 10px;}
    .logo-more { font-size: 16px; margin-bottom: 30px; font-weight: 400; }
    .title { display: inline-block; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 2px solid #f55057; font-size: 32px; font-weight: 600; }
    .person { padding: 14px 0; }
        .coFounder-url { text-decoration: none; color: #000; }
        .coFounder-name { font-weight: 700; font-size: 20px; text-transform: uppercase; margin-bottom: 7px; padding: 5px 20px 5px 0; position: relative; }
        .coFounder-name:after { content: ""; position: absolute; top: 50%; right: 35%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 20px; height: 20px; background: url("../img/instagram.png") no-repeat center center; background-size: contain; }
        .job-name, .email { font-size: 16px; margin-bottom: 10px; }
        .email, .e-mail:visited, .email:link { color: #000; text-decoration: none; }

.main-artwork { display: block; width: 150%; position: absolute; top: 335px; right: -150px; z-index: 50; }

/* ==========================================================================
   Helper classes
   ========================================================================== */

.content-holder{width:100%;max-width:1200px;margin:0 auto;position:relative}
.on-top{position:relative;z-index:100}
.hidden{display:none!important}
.visuallyhidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;-webkit-clip-path:none;clip-path:none;height:auto;margin:0;overflow:visible;position:static;width:auto;white-space:inherit}
.invisible{visibility:hidden}
.clearfix:before,.clearfix:after{content:" ";display:table}
.clearfix:after{clear:both}

/* ==========================================================================
   Media Queries for Responsive Design.
   ========================================================================== */
@media screen and (min-width: 768px) {
    .float-container { overflow: hidden; }
    .pull-left { float: left; }
        .title { padding-bottom: 17px; margin-bottom: 36px; font-size: 48px; }
        .coFounder-name:after { content: ""; position: absolute; top: 50%; right: 20%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 20px; height: 20px; background: url("../img/instagram.png") no-repeat center center; background-size: contain; }
    .pull-right { float: right; max-width: 44%; }
        .logo { padding-right: 20px; margin-bottom: 20px; }
        .logo-more { font-size: 20px; text-align: right; }
    .main-artwork { width: 90%; top: 155px; right: 0px; }
}

@media screen and (min-width: 1200px) {
    .main { padding: 73px 0; }
        .logo { padding-right: 0; }
        .logo-more { float: right; }
        .main-artwork { top: 177px; right: -34px; z-index: 50; width: auto; }

}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,:before,:after{background:transparent!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}
    a,a:visited{text-decoration:underline}
    a[href]:after{content:" (" attr(href) ")"}
    abbr[title]:after{content:" (" attr(title) ")"}
    a[href^="#"]:after,a[href^="javascript:"]:after{content:""}
    pre{white-space:pre-wrap!important}
    pre,blockquote{border:1px solid #999;page-break-inside:avoid}
    thead{display:table-header-group}
    tr,img{page-break-inside:avoid}
    p,h2,h3{orphans:3;widows:3}
    h2,h3{page-break-after:avoid}
}