img.maxwidth { max-width: 100%; height: auto; } img.boxit { border: 1px solid #DADADA; } .boxit { border: 1px solid #DADADA; } p.copyright { color: #fff; font-size: 1.25rem; margin-top: 1rem; } p.social { margin: 1rem; } .social img { margin: 0 0 0 1rem; } p.strong { font-weight: bold; } h1.logo { font-size: 5.0rem; line-height: 1.5; letter-spacing: -.1rem; word-spacing: 0.5rem; font-weight: 900; } blockquote { padding: 1rem 2rem 2rem 2rem; } blockquote p { font-family: "museo-sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; font-weight: 400; font-style: italic; padding: 3rem 0 0 3rem; } blockquote p::before, blockquote p::after { content: "\201C"; font-family: Georgia; font-size: 5rem; margin: -2rem 0 0 -3rem; padding: 0 3rem 0 0; position: absolute; opacity: 0.5; z-index: 3; } blockquote p::after { content: "\201D"; margin: -1.75rem 0 0 0; padding: 0 1rem 0 0; z-index: 3; } cite { font-style: normal; padding: 3rem 0 0 3rem; } .cite { color: #515151; font-size: 1.25rem; } .cite-org { padding-left: 4.7rem; } #logolink { text-decoration: none; color: #fff; } .container { padding: 0 20px; } .container:first-of-type { padding: 20px 20px; } #wrapper { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .homebox { padding: 2rem; } .homebox h3 { color: #fff; } .homequote { margin: 4rem 0 4rem 0; } .homequote blockquote { } .homequote cite { } a.noline { text-decoration: none; } p.screentitle { font-family: "Museo Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.2rem; line-height: 1.8rem; color: #999; margin-bottom: 0; padding-bottom: 0; } .notopmargin { margin-top: 0; padding-top: 0; } .nobottommargin { margin-bottom: 0; padding-bottom: 0; } .nomargin { margin: 0; padding: 0; } .InsetBox { padding: 20px; margin: 20px 0 20px 0; } .InsetEdge { padding: 20px 0 20px 20px; margin: 0; } .TopLine { border-top: 5px solid #d16727; } /* Metrics */ .metric { font-family: "Museo Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 4.5rem; line-height: 1.2; letter-spacing: -.1rem; font-weight: 900; color: #414141; margin: 0; text-align: center; } .metrictext { font-family: "Museo Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #414141; text-align: center; } /* Hero Images */ .hero { margin: 5rem 0rem 3rem 0rem; width: 50%; font-size: 4.2vw; color: #414141; } .aboutheader { background-image: url('../images/about/About_Hero.jpg'); background-repeat: no-repeat; background-position: 62% -5%; background-size: cover; background-color: #000; color: #fff; margin-bottom: 3rem; max-width: 100%; height: 680px; } .speakingheader { background-image: url('../images/speaking/Speaking_Hero.jpg'); background-repeat: no-repeat; background-position: 40% 0%; background-size: cover; background-color: #000; color: #fff; margin-bottom: 3rem; max-width: 100%; height: 300px; } .speakingclose { background-color: #414141; background-image: url("../images/speaking/Speaking_Scottland.jpg"); background-repeat: no-repeat; background-position: 25% 50%; background-size: cover; height: 30rem; padding: 1%; } .contactheader { background-image: url('../images/contact/Contact_Hero.jpg'); background-repeat: no-repeat; background-position: 50% 45%; background-size: cover; background-color: #000; color: #fff; margin-bottom: 3rem; max-width: 100%; height: 300px; text-align: right; } .mentoringheader { background-image: url('../images/mentoring/Mentoring_Hero.jpg'); background-repeat: no-repeat; background-position: 50% 30%; background-size: cover; background-color: #000; color: #fff; margin-bottom: 3rem; max-width: 100%; height: 300px; text-align: right; } .projectsheader { background-image: url('../images/projects/Projects_Hero.jpg'); background-repeat: no-repeat; background-position: 50% 80%; background-size: cover; background-color: #000; color: #fff; margin-bottom: 3rem; max-width: 100%; height: 300px; text-align: right; } .projects_rei_snowreport_header { background-image: url('../images/projects/Projects_REI-SnowReport.jpg'); background-repeat: no-repeat; background-position: 50% 40%; background-size: cover; background-color: #000; color: #fff; margin-bottom: 3rem; max-width: 100%; height: 520px; text-align: right; border-bottom: 5px solid #71593d; } .projects_fandango_checkout_header { background-image: url('../images/projects/Projects_Fandango-checkout-experience.jpg'); background-repeat: no-repeat; background-position: 50% 80%; background-size: cover; background-color: #000; color: #fff; margin-bottom: 3rem; max-width: 100%; height: 520px; text-align: right; border-bottom: 5px solid #ff7300; } .projects_sxsw_redesign_header { background-image: url('../images/projects/Projects_SXSW-Redesign.jpg'); background-repeat: no-repeat; background-position: 50% 80%; background-size: cover; background-color: #000; color: #fff; margin-bottom: 3rem; max-width: 100%; height: 520px; text-align: right; border-bottom: 5px solid #fcc42d; } .projects_channel9_redesign_header { background-image: url('../images/projects/Projects_Microsoft-Channel9.jpg'); background-repeat: no-repeat; background-position: 50% 80%; background-size: cover; background-color: #000; color: #fff; margin-bottom: 3rem; max-width: 100%; height: 520px; text-align: right; border-bottom: 5px solid #e4a000; } .projects_tmobile_b2b_header { background-image: url('../images/projects/Projects_T-Mobile-B2B.jpg'); background-repeat: no-repeat; background-position: 50% 80%; background-size: cover; background-color: #000; color: #fff; margin-bottom: 3rem; max-width: 100%; height: 520px; text-align: right; border-bottom: 5px solid #ed008c; } .projects_target_cartwheel_header { background-image: url('../images/projects/Projects_Target-Cartwheel.jpg'); background-repeat: no-repeat; background-position: 50% 49%; background-size: cover; background-color: #000; color: #fff; margin-bottom: 3rem; max-width: 100%; height: 520px; text-align: right; border-bottom: 5px solid #c00; } .projects_showtime_anytime_header { background-image: url('../images/projects/Projects_Showtime-Anytime.jpg'); background-repeat: no-repeat; background-position: 50% 48%; background-size: cover; background-color: #000; color: #fff; margin-bottom: 3rem; max-width: 100%; height: 520px; text-align: right; border-bottom: 5px solid #af060f; } /* Background Colors */ .bggradient { background: linear-gradient(#414141, #1eaedb); } .bgcolorWhiteRock { background-color: #f1efe2; } .bgcolorLightCyan { background-color: #e1f4fa; } .bgcolorSummerSky { background-color: #1eaedb; } .bgcolorPiper { background-color: #d16727; } .bgcolorProvincialPink { background-color: #f5e0d3; } .bgcolorTundora { background-color: #414141; } .bgcolorLightGray { background-color: #ccc; } .bgcolorWhite { background-color: #fff; } .bgcolorBlack { background-color: #000; } .bgREI { background-color: #71593d; } .bgFandango { background-color: #ff7300; } .bgSXSW { background-color: #fcc42d; } .bgChannel9 { background-color: #e4a000; } .bgShowtime { background-color: #af060f; } .bgTmobile { background-color: #ed008c; } .bgTarget { background-color: #c00; } /* Text Colors */ .piper { color: #d16727; } .white { color: #fff; } .lightgray { color: #ccc; } .REI { color: #71593d; } .Fandango { color: #ff7300; } .SXSW { color: #Fcc42d; } .Channel9 { color: #e4a000; } .Showtime { color: #af060f; } .Tmobile { color: #ed008c; } .Target { color: #c00; } /* Offering */ .offering { padding: 2rem; margin-bottom: 2rem; } /* Projects */ .project { background-color: #414141; background-repeat: no-repeat; height: 28rem; padding: 1%; padding-top: 1%; padding-left: 3%; margin-bottom: 5%; color: #fff; } .bgProject1 { background-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 60%), url("../images/projects/Projects_REI-SnowReport.jpg"); background-position: 50% 40%; background-size: cover; } .bgProject2 { background-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 60%), url("../images/projects/Projects_Fandango-checkout-experience.jpg"); background-position: 50% 80%; background-size: cover; } .bgProject3 { background-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 60%), url("../images/projects/Projects_SXSW-Redesign.jpg"); background-position: center center; background-size: cover; } .bgProject4 { background-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 60%), url("../images/projects/Projects_Microsoft-Channel9.jpg"); background-position: center center; background-size: cover; } .bgProject5 { background-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 60%), url("../images/projects/Projects_T-Mobile-B2B.jpg"); background-position: center center; background-size: cover; } .bgProject6 { background-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 60%), url("../images/projects/Projects_Diversity-Talks-Seattle.jpg"); background-position: center center; background-size: cover; } .bgProject7 { background-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 60%), url("../images/projects/Projects_Showtime-Anytime.jpg"); background-position: 50% 60%; background-size: cover; } .bgProject8 { background-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 60%), url("../images/projects/Projects_T-Mobile-B2B.jpg"); background-position: right center; background-size: cover; } .bgProject9 { background-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 60%), url("../images/projects/Projects_Target-Cartwheel.jpg"); background-position: 50% 55%; background-size: cover; } .bgProject10 { background-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 60%), url("../images/projects/Projects_AWS.jpg"); background-position: 20% 55%; background-size: cover; } .ProjectName { margin: 1rem 1rem 0 0; text-align: left; font-weight: 600; } /* Photos with Notes */ .Sydney_PhotoNote { margin: 26rem 1rem 0 0; text-align: right; font-size: 1.25rem; } .Scottland_PhotoNote { margin: 1rem 1rem 0 0; text-align: right; font-size: 1.25rem; } /* Navigation */ .logo { /* background-image: url(../images/Nick_Finck_logo.png); background-repeat: no-repeat; */ background: linear-gradient(#cbe5ee, #69b0cb, #3899bc, #2f809d); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); color: #fff; text-align: center; position: -webkit-sticky; /* Safari */ position: sticky; float: left; left: 7rem; top: 0; width: 30rem; height: 8rem; /* 121px; */ z-index: 10; } /* Desktop Nav */ .nav { text-align: right; padding-right: 5%; border-top: 5px solid #d16727; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); position: fixed; width: 100%; height: 3.5rem; top: 0px; z-index: 2; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 2rem; word-spacing: 2rem; } .nav a:link { color: #1eaedb; text-decoration: none; } .nav a:visited { color: #1eaedb; text-decoration: none; } .nav a:hover { color: #33c3f0; text-decoration: none; } a.navon { color: #a6a6a6 !important; } /* Mobile Nav */ .monav { line-height: 1.7; font-size: 1.25em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; border-top: 5px solid #d16727; position: fixed; width: 100%; height: 7rem; bottom: 0px; z-index: 1; color: #1eaedb; background-color: #414141; } .monav a { line-height: 1.7; font-size: 1.25em; color: #fff; text-decoration: none; } .monav a:visited { line-height: 1.7; font-size: 1.25em; text-decoration: none; } .monav a:hover { line-height: 1.7; font-size: 1.25em; color: #fff; text-decoration: none; } .monav a:link { line-height: 1.7; font-size: 1.25em; color: #fff; text-decoration: none; } .icon { width: 5.5rem; margin: 1rem; font-size: 1rem; text-align: center; } a.projectnav { color: #666; text-decoration: none; } a:hover.navREI { color: #71593d; } a:hover.navFandango { color: #ff7300; } a:hover.navSXSW { color: #fcc42d; } a:hover.navChannel9 { color: #e4a000; } a:hover.navShowtime { color: #af060f; } a:hover.navTmobile { color: #ed008c; } a:hover.navTarget { color: #c00; } /* Forms */ textarea { height: 175px; } /* Spacing */ blockquote { margin-left: 0; margin-right: 0; }