/* ---- SITE.CSS ---- Contains the majority of the CSS used to format the main structure of the website. Default formatting is for mobile browsing. Additional media queries in seperate files have been included. */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* -- 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, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }

body { line-height: 1; }

ol, ul { list-style: none; }

strong { font-weight: bold; }

em { font-style: italic; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

:focus { outline: none; }

/* -- HTML5 display-role reset for older browsers -- */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

/* -- Generic styles -- */
body { font-family: 'Work Sans', sans-serif; background-color: #002BC6; font-size: 20px; line-height: 30px; text-align: left; font-weight: 300; }

html, body { width: 100%; height: 100%; }

* { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ }

::selection { background: #8558a8; color: #fff; }

::-moz-selection { background: #8558a8; color: #fff; }

abbr { border-bottom: 1px dotted #545454; }

a abbr { border-bottom: none; }

a { color: #ffffff; text-decoration: none; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }

a:hover { text-decoration: underline; }

.hideme { opacity: 0; }

.ninja { display: none !important; }

.clear { clear: both; }

.sink { clear: both !important; display: block !important; height: 0 !important; line-height: 0 !important; font-size: 0 !important; margin: 0 !important; padding: 0 !important; }

.no-bottom { margin-bottom: 0 !important; padding-bottom: 0 !important; }

.no-top { margin-top: 0 !important; padding-top: 0 !important; }

.no-wrap { white-space: nowrap !important; }

.bold, .strong { font-weight: 500; }

.pull-margin { margin-bottom: -6px !important; }

.push-bottom { padding-bottom: 20px !important; }

.push-bottom-30 { padding-bottom: 30px !important; }

.push-bottom-40 { padding-bottom: 40px !important; }

.push-bottom-50 { padding-bottom: 50px !important; }

.push-top { padding-top: 20px; }

.push-top-30 { padding-top: 30px; }

.push-top-40 { padding-top: 40px; }

.push-top-50 { padding-top: 50px; }

@media (min-width: 766px) { .push-right { padding-right: 30px; } }

@media (min-width: 766px) { .push-left { padding-left: 30px; } }

.large-text { font-size: 14px; line-height: 22px; }

.larger-text { font-size: 16px; line-height: 24px; }

.text-center { text-align: center !important; }

.formatted { font-weight: 200; color: #2D2D2D; font-weight: 400; /* to stop extra padding on p tag, remove if issue */ }

.formatted a { color: #1967DD; }

.formatted h1 { font-size: 38px; color: #000; line-height: 1.1; margin-bottom: 50px; }

.formatted h1.large { margin-bottom: 70px; font-size: 82px; }

.formatted h2 { font-size: 28px; margin-bottom: 30px; font-weight: 600; line-height: 1.1; }

.formatted h2.large { font-size: 38px; color: #000; line-height: 1.1; }

.formatted h2.excerpt { font-family: TimesNewRomanPSMT; font-size: 32px; line-height: 1.2; font-weight: 100; }

.formatted p { margin-bottom: 30px; font-size: 20px; line-height: 1.4; }

.formatted p:last-child { margin-bottom: 10px; }

.formatted blockquote { width: 870px; margin-left: -148px; margin-bottom: 30px; text-align: center; }

.formatted blockquote p { color: #4A4A4A; letter-spacing: -1px !important; font-size: 29px; line-height: 38px; }

.formatted blockquote del { text-decoration: none; display: block; font-size: 24px; margin-top: 15px; }

.formatted h3 { font-size: 14px; letter-spacing: 1px; margin-bottom: 30px; font-weight: 400; line-height: 1.1; }

.formatted h3.large { font-size: 28px; letter-spacing: 0; font-weight: 600; }

.formatted img { /*margin:30px 0;*/ }

.no-mobile { display: none; }

@media (min-width: 480px) { .no-mobile { display: inline; } }

.no-tablet { display: none; }

@media (min-width: 480px) { .no-tablet { display: none; } }

@media (min-width: 960px) { .no-tablet { display: inline; } }

.hideme { opacity: 0; }

.inner { margin: 0 auto; padding: 0 10px; text-align: left; width: 300px; position: relative; }

@media (min-width: 480px) { .inner { width: 460px; } }

@media (min-width: 768px) { .inner { width: 748px; } }

@media (min-width: 960px) { .inner { width: 940px; } }

@media (min-width: 1200px) { .inner { width: 1040px; } }

.padded { padding: 0 0; }

@media (min-width: 480px) { .padded { padding: 0 50px; } }

@media (min-width: 768px) { .padded { padding: 0 60px; } }

@media (min-width: 960px) { .padded { padding: 0 70px; } }

@media (min-width: 768px) { .tight { padding: 0 150px; } }

@media (min-width: 960px) { .tight { padding: 0 220px; } }

.tighter { padding: 0 80px; }

@media (min-width: 768px) { .tighter { padding: 0 240px; } }

@media (min-width: 960px) { .tighter { padding: 0 300px; } }

@media (min-width: 1200px) { .tighter { padding: 0 360px; } }

.block { padding-bottom: 50px; }

.location { color: #A7A7A7; }

.location::before { content: ""; display: inline-block; width: 10px; height: 15px; position: relative; background: url("../img/location.png") center no-repeat; padding-right: 20px; }

.location a { color: #a7a7a7; text-decoration: none; }

ul.bullet { padding-left: 30px; }

ul.bullet li { padding-bottom: 12px; }

ul.bullet li::before { content: "\2022"; color: black; font-weight: bold; display: inline-block; width: 1em; margin-left: -1em; }

/*page structure*/
#nav { width: 100%; position: fixed; z-index: 99; padding-top: 40px; color: #222222; /* When the screen is less than 680 pixels wide, hide all list items. Show the list item that contains the link to open and close the topnav (li.icon) */ }

@media (min-width: 766px) { #nav { padding-top: 80px; } }

#nav .logo { position: absolute; left: 0; }

@media (min-width: 766px) { #nav .logo { float: left; position: static; } }

#nav .logo a { color: #111; font-size: 16px; font-weight: 600; }

#nav .logo a.active { border-bottom: 2px solid #424242; padding-bottom: 6px; }

#nav ul.topnav { display: block; list-style-type: none; margin: 0; padding: 0; /*overflow: hidden;*/ float: right; text-align: right; }

#nav ul.topnav li { float: left; padding: 0 16px; }

#nav ul.topnav li a { display: inline-block; color: #000; text-align: center; text-decoration: none; transition: 0.3s; font-size: 16px; font-weight: 400; }

#nav ul.topnav li a.active { border-bottom: 2px solid #424242; padding-bottom: 6px; }

#nav ul.topnav li a:hover { opacity: 0.4; }

#nav ul.topnav li.icon { display: none; }

@media screen and (max-width: 680px) { #nav ul.topnav { width: 100%; }
  #nav ul.topnav li { display: none; }
  #nav ul.topnav li.icon { float: right; display: inline-block; }
  #nav ul.topnav li.icon a { font-size: 68px; color: #000; }
  #nav ul.topnav li.icon a:hover { border: none; }
  #nav ul.topnav.responsive { position: relative; background-color: #fff; padding-top: 36px; }
  #nav ul.topnav.responsive li { float: none; display: block; padding: 13px 0; border-bottom: 1px solid #000; }
  #nav ul.topnav.responsive li:first-child { border-top: 1px solid #000; }
  #nav ul.topnav.responsive li.icon { position: absolute; right: 0; top: -13px; padding-right: 16px; border: none; }
  #nav ul.topnav.responsive li.icon a { font-size: 68px; }
  #nav ul.topnav.responsive li a { display: block; text-align: center; }
  #nav ul.topnav.responsive li a.active { border-bottom: none; padding-bottom: 0; }
  #nav ul.topnav.responsive li a:hover { text-decoration: none; border: none; color: #5f5f5f; } }

#main-container { border: 20px solid #fff; background-color: #edeef1; min-height: 800px; }

#main-container .main-content { padding-top: 140px; padding-bottom: 60px; }

@media (min-width: 766px) { #main-container .main-content { padding-top: 200px; } }

#subscribe { text-align: center; color: #CDCDCD; }

#subscribe p { margin-bottom: 20px; }

#subscribe .subscription-box { /* MailChimp Form Embed Code - Classic - 12/17/2015 v10.7 */ }

#subscribe .subscription-box #mc_embed_signup form { display: block; position: relative; text-align: left; }

#subscribe .subscription-box #mc_embed_signup h2 { font-weight: bold; padding: 0; margin: 15px 0; font-size: 1.4em; }

#subscribe .subscription-box #mc_embed_signup input { border: 1px solid #ABB0B2; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }

#subscribe .subscription-box #mc_embed_signup input[type=checkbox] { -webkit-appearance: checkbox; }

#subscribe .subscription-box #mc_embed_signup input[type=radio] { -webkit-appearance: radio; }

#subscribe .subscription-box #mc_embed_signup input:focus { border-color: #333; }

#subscribe .subscription-box #mc_embed_signup .button { position: absolute; /* clear: both; */ background-color: #000; border: 0 none; border-radius: 4px; transition: all 0.23s ease-in-out 0s; color: #FFFFFF; cursor: pointer; display: inline-block; font-size: 15px; font-weight: normal; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding: 0 22px; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto; right: 0; width: 25%; z-index: 99; height: 55px; }

#subscribe .subscription-box #mc_embed_signup .mc-field-group input { font-size: 20px; display: block; width: 75%; padding: 15px 0; text-indent: 4%; }

#subscribe .subscription-box #mc_embed_signup .button:hover { background-color: #777; }

#subscribe .subscription-box #mc_embed_signup .small-meta { font-size: 11px; }

#subscribe .subscription-box #mc_embed_signup .nowrap { white-space: nowrap; }

#subscribe .subscription-box #mc_embed_signup .mc-field-group { clear: left; position: relative; width: 100%; padding-bottom: 3%; min-height: 50px; }

#subscribe .subscription-box #mc_embed_signup .size1of2 { clear: none; float: left; display: inline-block; width: 46%; margin-right: 4%; }

#subscribe .subscription-box * html #mc_embed_signup .size1of2 { margin-right: 2%; /* Fix for IE6 double margins. */ }

#subscribe .subscription-box #mc_embed_signup .mc-field-group label { display: block; margin-bottom: 3px; }

#subscribe .subscription-box #mc_embed_signup .mc-field-group select { display: inline-block; width: 99%; padding: 5px 0; margin-bottom: 2px; }

#subscribe .subscription-box #mc_embed_signup .datefield, #subscribe .subscription-box #mc_embed_signup .phonefield-us { padding: 5px 0; }

#subscribe .subscription-box #mc_embed_signup .datefield input, #subscribe .subscription-box #mc_embed_signup .phonefield-us input { display: inline; width: 60px; margin: 0 2px; letter-spacing: 1px; text-align: center; padding: 5px 0 2px 0; }

#subscribe .subscription-box #mc_embed_signup .phonefield-us .phonearea input, #subscribe .subscription-box #mc_embed_signup .phonefield-us .phonedetail1 input { width: 40px; }

#subscribe .subscription-box #mc_embed_signup .datefield .monthfield input, #subscribe .subscription-box #mc_embed_signup .datefield .dayfield input { width: 30px; }

#subscribe .subscription-box #mc_embed_signup .datefield label, #subscribe .subscription-box #mc_embed_signup .phonefield-us label { display: none; }

#subscribe .subscription-box #mc_embed_signup .indicates-required { text-align: right; font-size: 11px; margin-right: 4%; }

#subscribe .subscription-box #mc_embed_signup .asterisk { color: #e85c41; font-size: 150%; font-weight: normal; position: relative; top: 5px; }

#subscribe .subscription-box #mc_embed_signup .clear { clear: both; }

#subscribe .subscription-box #mc_embed_signup .mc-field-group.input-group ul { margin: 0; padding: 5px 0; list-style: none; }

#subscribe .subscription-box #mc_embed_signup .mc-field-group.input-group ul li { display: block; padding: 3px 0; margin: 0; }

#subscribe .subscription-box #mc_embed_signup .mc-field-group.input-group label { display: inline; }

#subscribe .subscription-box #mc_embed_signup .mc-field-group.input-group input { display: inline; width: auto; border: none; }

#subscribe .subscription-box #mc_embed_signup div#mce-responses { float: left; top: -1.4em; padding: 0em .5em 0em .5em; overflow: hidden; width: 90%; margin: 0 5%; clear: both; }

#subscribe .subscription-box #mc_embed_signup div.response { margin: 1em 0; float: left; top: -1.5em; z-index: 1; margin-bottom: 20px; }

#subscribe .subscription-box #mc_embed_signup #mce-error-response { display: none; }

#subscribe .subscription-box #mc_embed_signup #mce-success-response { color: #002bc6; font-weight: 500; display: none; }

#subscribe .subscription-box #mc_embed_signup label.error { display: block; float: none; width: auto; margin-left: 1.05em; text-align: left; padding: .5em 0; }

#subscribe .subscription-box #mc-embedded-subscribe { clear: both; width: auto; display: block; margin: 1em 0 1em 5%; }

#subscribe .subscription-box #mc_embed_signup #num-subscribers { font-size: 1.1em; }

#subscribe .subscription-box #mc_embed_signup #num-subscribers span { padding: .5em; border: 1px solid #ccc; margin-right: .5em; font-weight: bold; }

#subscribe .subscription-box #mc_embed_signup #mc-embedded-subscribe-form div.mce_inline_error { display: inline-block; margin: 2px 0 1em 0; padding: 5px 10px; background-color: rgba(255, 255, 255, 0.85); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 14px; font-weight: normal; z-index: 1; color: #e85c41; }

#subscribe .subscription-box #mc_embed_signup #mc-embedded-subscribe-form input.mce_inline_error { border: 2px solid #e85c41; }

#subscribe p.numbers { font-size: 14px; }

#portfolio-items .project-large { width: 100%; height: 210px; background: #ccc; margin-bottom: 40px; display: block; overflow: hidden; }

@media (min-width: 768px) { #portfolio-items .project-large { height: 310px; } }

@media (min-width: 960px) { #portfolio-items .project-large { height: 410px; } }

#portfolio-items .project-large.studentbeans { background: url("../img/sb-tile.png"); background-size: cover; background-position: center; background-color: #fff; }

@media (min-width: 480px) { #portfolio-items .project-large.studentbeans { background-image: url("../img/studentbeans-banner.jpg"); } }

#portfolio-items .project-small { width: 100%; height: 498px; background: #ccc; display: block; overflow: hidden; margin-bottom: 40px; }

@media (min-width: 480px) { #portfolio-items .project-small { height: 790px; } }

@media (min-width: 768px) { #portfolio-items .project-small { height: 620px; float: left; display: inline; width: 48%; margin-bottom: 0; } }

@media (min-width: 960px) { #portfolio-items .project-small { height: 785px; } }

@media (min-width: 1200px) { #portfolio-items .project-small { height: 865px; } }

#portfolio-items .project-small.left { margin-right: 4%; margin-bottom: 40px; }

#portfolio-items .project-small.sb-1 { background: url("../img/sb-apps-4.png"); background-size: cover; background-position: center; margin-bottom: 100px; }

#portfolio-items .project-small.sb-cms { background: url("../img/sb-cms-2.png"); background-size: cover; background-position: center; }

#portfolio-items .project-small.pfd { background: url("../img/pfd.png"); background-size: cover; background-position: center; }

#portfolio-items .project-small.sb-2 { background: url("../img/sb-verification.png"); background-size: cover; background-position: center; }

#portfolio-items .project-small.sb-explore { background: url("../img/sb-explore.png"); background-size: cover; background-position: center; }

#portfolio-items .project-small.sb-colab { background: url("../img/gateway-tile.png"); background-size: cover; background-position: center; }

#portfolio-items .project-small.blynker { background: url("../img/blynker-3.png"); background-size: cover; background-position: center; }

#portfolio-items .project-small.snapita { background: url("../img/snapita-2.png"); background-size: cover; background-position: center; }

#portfolio-items .project-small.sb-app-reviews { background: url("../img/sb-app-reviews.png"); background-size: cover; background-position: center; }

#portfolio-items .project-small.wanda { background: url("../img/wanda-2.png"); background-size: cover; background-position: center; }

#portfolio-items .project-small.sb-map { background: url("../img/sb-map.png"); background-size: cover; background-position: center; }

#portfolio-items .project-small.trustatrader { background: url("../img/trustatrader.png"); background-size: cover; background-position: center; }

#portfolio-items a .project-info-wrap { height: 100%; background-color: rgba(0, 0, 0, 0); position: relative; cursor: pointer; transition: background-color 0.2s ease; -moz-transition: background-color 0.2s ease; -ms-transition: background-color 0.2s ease; -o-transition: background-color 0.2s ease; -webkit-transition: background-color 0.2s ease; }

#portfolio-items a .project-info-wrap .project-info { color: #fff; font-size: 18px; max-width: 350px; padding: 25px; opacity: 0; position: absolute; bottom: -200px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; }

#portfolio-items a .project-info-wrap .project-info h3 { font-weight: 400; padding-bottom: 10px; font-size: 16px; letter-spacing: 1px; }

#portfolio-items a .project-info-wrap .project-info p span { font-weight: 500; text-transform: uppercase; font-size: 15px; }

#portfolio-items a:hover { text-decoration: none; }

#portfolio-items a:hover .project-info-wrap { background-color: rgba(3, 19, 39, 0.74); }

#portfolio-items a:hover .project-info-wrap .project-info { display: block; opacity: 1; bottom: 0px; }

#more-photo-sets { padding-top: 50px; }

#more-photo-sets ul.photo-posts a { width: 100%; position: relative; text-decoration: none; display: inline-block; margin-bottom: 30px; }

@media (min-width: 768px) { #more-photo-sets ul.photo-posts a { width: calc(50% - 14px); vertical-align: top; } }

#more-photo-sets ul.photo-posts a:first-child { margin-right: 20px; }

#more-photo-sets ul.photo-posts a li .image-container { width: 100%; }

#more-photo-sets ul.photo-posts a li .image-container .image { background-color: #222; position: relative; padding-top: 56.25%; /* 450px/800px = 0.5625 */ background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ }

#more-photo-sets ul.photo-posts a li span.info { display: block; color: #2d2d2d; margin-top: 5px; }

@media (min-width: 768px) { #more-photo-sets ul.photo-posts a li span.info { margin-top: 20px; } }

#more-photo-sets ul.photo-posts a li span.info p.excerpt { font-size: 16px; }

#footer { position: relative; background-color: #fff; min-height: 30px; top: -1px; font-weight: 400; }

#footer .footer-wrap { width: 100%; background: url(../img/footer-bg-760.png) top center repeat-y; display: block; padding: 0; position: absolute; left: 0; width: 100%; z-index: 2; margin-bottom: 10px; }

@media (min-width: 768px) { #footer .footer-wrap { background: url(../img/footer-bg-760.png) top center repeat-y; } }

@media (min-width: 960px) { #footer .footer-wrap { background: url(../img/footer-bg.png) top center repeat-y; } }

#footer .footer-wrap .left-inner { background-color: #002BC6; min-height: 183px; color: #fff; }

@media (min-width: 480px) { #footer .footer-wrap .left-inner { min-height: 300px; float: left; width: 50%; } }

#footer .footer-wrap .left-inner .email { padding-top: 55px; font-size: 16px; letter-spacing: 1.5px; }

#footer .footer-wrap .left-inner .email a { color: #fff; }

#footer .footer-wrap .right-inner { width: 100%; padding-top: 10px; color: #0000F9; font-size: 16px; background-color: #fff; padding: 30px 0; }

@media (min-width: 480px) { #footer .footer-wrap .right-inner { float: left; width: 50%; padding: 0; } }

#footer .footer-wrap .right-inner .column-1 { width: 50%; float: left; padding-left: 40px; letter-spacing: 1.5px; }

#footer .footer-wrap .right-inner .column-1 ul.links li a { color: #0000F9; }

#footer .footer-wrap .right-inner .column-2 { width: 50%; float: left; }

#footer .footer-wrap .right-inner .column-2 .small-logo { background: url("../img/small-logo.png"); background-repeat: no-repeat; background-size: cover; height: 58px; width: 105px; float: right; }

@media (min-width: 480px) { #footer .footer-wrap .right-inner .column-2 .small-logo { background-size: 100%; height: 48px; width: 77px; } }

@media (min-width: 768px) { #footer .footer-wrap .right-inner .column-2 .small-logo { background-size: cover; height: 58px; width: 105px; } }

/* -- Home page -- */
#header { margin: 0 auto; min-height: 500px; }

@media (min-width: 768px) { #header { min-height: 750px; } }

#header .introduction { padding-top: 200px; }

#header .introduction #intro-container { position: relative; z-index: 1; }

#header .introduction #intro-container #intro { padding-top: 45px; color: #002BC6; max-width: 690px; padding-bottom: 170px; }

@media (max-width: 480px) { #header .introduction #intro-container #intro br { display: none; } }

#header .introduction #intro-container #intro h1 { font-weight: 600; font-size: 35px; line-height: 1.3; padding-bottom: 10px; letter-spacing: 2px; text-shadow: 2px 2px 1px #ffffff; }

@media (min-width: 768px) { #header .introduction #intro-container #intro h1 { font-size: 42px; } }

#header .introduction #intro-container #intro h1 span { position: relative; z-index: 2; }

#header .introduction #intro-container #intro h1 span::after { content: ''; display: block; position: absolute; bottom: 3px; left: 0; height: 12px; width: 100%; background: #3692FF; opacity: 0.2; z-index: 1; }

@media (min-width: 768px) { #header .introduction #intro-container::after { content: ''; display: block; position: absolute; top: -22px; right: 0; height: 553px; width: 492px; background: #3692FF; z-index: -99; opacity: 1; background-image: url("../img/chris-weston-2022.jpeg"); background-size: cover; background-position: center; } }

#about { color: #000; font-weight: 400; font-size: 20px; line-height: 1.8; padding: 70px 0 70px 0; }

#about a { color: #0000F9; text-decoration: underline; font-style: italic; }

#about .about-column-1 { width: 100%; float: left; }

@media (min-width: 768px) { #about .about-column-1 { margin-bottom: 30px; } }

@media (min-width: 960px) { #about .about-column-1 { width: 60%; padding-right: 2%; } }

#about .about-column-1 p { margin-bottom: 20px; }

#about .about-column-2 { width: 100%; float: left; padding-right: 2%; margin-bottom: 25px; }

@media (min-width: 768px) { #about .about-column-2 { width: 40%; margin-bottom: 0; } }

@media (min-width: 960px) { #about .about-column-2 { width: 40%; padding-left: 20%; position: relative; bottom: -778px; } }

#about .about-column-2 a { color: #0000f9; font-size: 18px; font-style: normal; text-decoration: none; }

#about h3 { color: #000; font-size: 14px; letter-spacing: 1px; padding-bottom: 20px; font-weight: 400; }

#about .bold { line-height: 1; }

#about .read-more-state { display: none; position: relative; }

#about .read-more-target { opacity: 0; max-height: 0; font-size: 0; transition: .25s ease; }

#about .read-more-state:checked ~ .read-more-wrap .read-more-target { opacity: 1; font-size: inherit; max-height: 999em; }

#about .read-more-state ~ .read-more-trigger:before { content: 'Tell me more'; }

#about .read-more-state:checked ~ .read-more-trigger:before { content: 'Show less'; }

#about .read-more-state ~ .read-more-trigger { position: relative; top: -35px; }

#about .read-more-state:checked ~ .read-more-trigger { position: relative; top: 0; }

#about .read-more-trigger { cursor: pointer; display: inline-block; padding: 0 .5em; color: #666; font-size: .9em; line-height: 2; border: 1px solid #ddd; border-radius: .25em; }

#portfolio { background-color: #fff; padding-bottom: 150px; }

#portfolio h3 { color: #000; font-size: 14px; letter-spacing: 1px; padding-bottom: 50px; font-weight: 400; }

#portfolio .projects { position: relative; padding-top: 100px; }

#portfolio p { color: #000; font-weight: 400; font-size: 20px; line-height: 1.8; margin-bottom: 20px; }

#dribbble { background-color: #fff; padding-bottom: 150px; }

#dribbble h3 { color: #000; font-size: 14px; letter-spacing: 1px; padding-bottom: 50px; font-weight: 400; }

#shots { display: flex; flex-wrap: wrap; max-width: 1080px; margin: auto; }

#shots .shot { position: relative; display: block; width: 25%; background: pink; color: white; text-decoration: none; }

#shots .shot:hover img { opacity: .1; }

#shots .shot:hover .title { opacity: 1; }

#shots .shot .title { position: absolute; width: calc(100% - 2rem); padding: 1rem; opacity: 0; transition: opacity .2s ease-in-out; font-size: 1rem; font-weight: 500; letter-spacing: 1px; }

#shots .shot img { display: block; max-width: 100%; transition: opacity .2s ease-in-out; }

/* -- General Case Study Tempalate -- */
#casestudy #main-container { background-color: #fff; }

#casestudy .main-content { padding-top: 0; }

#casestudy #header { min-height: 0px !important; }

#casestudy #header .hero { padding-top: 88px; padding-bottom: 200px; }

#casestudy #header .hero #intro { padding-top: 83px; color: #fff; }

@media (min-width: 768px) { #casestudy #header .hero #intro .title { width: 700px; font-size: 30px; } }

#casestudy #header .hero #intro h1 { font-size: 60px; line-height: 1.1; padding-bottom: 10px; }

#casestudy #header .hero #intro h2 { font-size: 30px; font-weight: 200; padding-bottom: 35px; }

#casestudy #header .hero #intro .description { font-weight: 200; opacity: 0.8; font-size: 30px; line-height: 1.4; display: inline-block; }

@media (min-width: 768px) { #casestudy #header .hero #intro .description { width: 500px; font-size: 30px; } }

#casestudy #header .hero #intro .roles { font-size: 14px; line-height: 1.6; padding-top: 30px; font-weight: 200; vertical-align: bottom; }

@media (min-width: 768px) { #casestudy #header .hero #intro .roles { text-align: right; padding-top: 0px; float: right; } }

#casestudy #header .hero #intro .roles .lead { font-weight: 500; }

#casestudy #casestudy-content { background-color: #fff; min-height: 600px; position: relative; }

#casestudy #casestudy-content:nth-child(2) { padding-top: 177px; }

@media (min-width: 768px) { #casestudy #casestudy-content:nth-child(2) { padding-top: 327px; } }

#casestudy #casestudy-content .casestudy-hero { position: absolute; width: 300px; top: -140px; background-color: #ccc; left: 0; right: 0; margin-left: auto; margin-right: auto; }

@media (min-width: 480px) { #casestudy #casestudy-content .casestudy-hero { width: 90%; height: 275px; } }

@media (min-width: 768px) { #casestudy #casestudy-content .casestudy-hero { width: 748px; height: 415px; } }

@media (min-width: 960px) { #casestudy #casestudy-content .casestudy-hero { width: 940px; } }

@media (min-width: 1200px) { #casestudy #casestudy-content .casestudy-hero { width: 1040px; } }

#casestudy #casestudy-content .full-width { width: 100%; height: 600px; }

@media (min-width: 480px) { #casestudy #casestudy-content .full-width { width: 100%; } }

@media (min-width: 768px) { #casestudy #casestudy-content .full-width { width: 100%; } }

@media (min-width: 960px) { #casestudy #casestudy-content .full-width { width: 100%; } }

@media (min-width: 1200px) { #casestudy #casestudy-content .full-width { width: 100%; } }

#casestudy #casestudy-content .block { padding-bottom: 50px; }

#casestudy #casestudy-content .quote { font-size: 25px; font-style: italic; font-weight: 100; line-height: 1.4; color: #4A4A4A; padding: 0 80px 50px 80px; text-align: center; margin-top: -30px; }

#casestudy #casestudy-content p.caption { font-size: 13px; position: relative; text-align: center; top: -34px; }

#casestudy #casestudy-content h2 { font-size: 36px; }

#casestudy #casestudy-content h3 { font-size: 28px; letter-spacing: 0; font-weight: 600; }

#casestudy #casestudy-content .split .left { display: block; }

@media (min-width: 768px) and (max-width: 959px) { #casestudy #casestudy-content .split { padding: 0 150px; } }

@media (min-width: 960px) { #casestudy #casestudy-content .split .left { float: left; width: 50%; padding-right: 80px; }
  #casestudy #casestudy-content .split .right { float: left; width: 50%; } }

#casestudy #casestudy-content .faux-full { width: 100%; max-width: 2000px; margin: 0 auto; padding-bottom: 50px; }

#casestudy #casestudy-content .carousel { margin-bottom: 50px; }

#casestudy #casestudy-content .background-black { background: #282929; padding-top: 100px; color: #fff !important; padding-bottom: 50px; }

#casestudy #casestudy-content .breaker { width: 80%; max-width: 1000px; padding-bottom: 50px; margin: 0 auto; }

#casestudy #casestudy-content .background-white { background: #fff; padding-top: 100px; min-height: 500px; padding-bottom: 50px; }

/* -- Specific to 'Designing The Student Beans App' -- */
.content-management-system .casestudy-hero { top: -154px !important; }

@media (min-width: 480px) { .content-management-system .casestudy-hero { height: 275px; } }

@media (min-width: 768px) { .content-management-system .casestudy-hero { height: 440px !important; } }

.grid { box-sizing: border-box; -moz-box-sizing: border-box; /* Firefox */ width: 100%; /*margin:20px 0;*/ text-align: left; display: table; }

.grid > *, .grid *:after, .grid *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.grid:after { content: ""; display: table; clear: both; }

.grid.extra-padding-tb { padding-top: 70px !important; padding-bottom: 70px !important; }

.grid.extra-padding-t { padding-top: 70px !important; }

.grid.extra-padding-b { padding-bottom: 70px !important; }

.grid.faux-full { max-width: 1170px; margin: 0 auto; }

.grid.text-width { max-width: 780px; margin: 0 auto; }

.grid.grid-pad [class*='col-'] { padding-right: 20px; padding-left: 20px; }

.grid.grid-pad [class*='col-']:last-of-type { padding-right: 0; }

.grid.grid-pad [class*='col-']:first-of-type { padding-left: 0; }

@media (max-width: 766px) { .grid.collapse [class*='col-'] { display: block; width: 100%; padding-right: 0; padding-bottom: 25px; }
  .grid.collapse [class*='col-'].spacer { display: none; } }

.grid [class*='col-'] { /*float: left;*/ display: table-cell; vertical-align: bottom; }

.grid [class*='col-'].spacer { height: 0px; margin-top: 64px; margin-bottom: 64px; }

.grid .col-1 { width: 8.3333333%; }

.grid .col-2 { width: 16.6666667%; }

.grid .col-3 { width: 25%; }

.grid .col-4 { width: 33.3333333%; }

.grid .col-5 { width: 41.6666667%; }

.grid .col-6 { width: 50%; }

.grid .col-7 { width: 58.3333333%; }

.grid .col-8 { width: 66.6666667%; }

.grid .col-9 { width: 75%; }

.grid .col-10 { width: 83.3333333%; }

.grid .col-11 { width: 91.6666667%; }

.grid .col-12 { width: 100%; }

/* -- anything specific to general posts -- */
.sharer { margin: 0 auto; width: 80px; }

.sharer a { display: inline-block; width: 30px; height: 30px; }

.sharer a.fb { background: url("../img/fb.png") center no-repeat; margin-right: 10px; }

.sharer a.twitter { background: url("../img/tw.png") center no-repeat; }

/* -- main theme for Play section -- */
#play #main-container { background-color: #fff; }

#play .intro { text-align: center; }

#play .intro p { font-weight: 200; }

#play ul.photo-posts a { width: 100%; position: relative; text-decoration: none; display: inline-block; margin-bottom: 30px; }

@media (min-width: 768px) { #play ul.photo-posts a { width: calc(50% - 14px); vertical-align: top; } }

#play ul.photo-posts a:nth-child(2n) { margin-right: 20px; }

@media (min-width: 768px) { #play ul.photo-posts a:first-child { width: 100%; margin-right: 0; display: block; margin-bottom: 60px; }
  #play ul.photo-posts a:first-child .image-container { width: 100%; }
  #play ul.photo-posts a:first-child .image-container .image { background-color: #333; padding-top: 56.25%; /* 450px/800px = 0.5625 */ background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ }
  #play ul.photo-posts a:first-child .image-container .image::after { content: ""; position: absolute; width: 100%; bottom: 0; height: 200px; background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, black 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, black 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, black 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ }
  #play ul.photo-posts a:first-child span.info { color: #fff; position: absolute; bottom: 20px; left: 20px; } }

#play ul.photo-posts a li .image-container { width: 100%; }

#play ul.photo-posts a li .image-container .image { background-color: #222; position: relative; padding-top: 56.25%; /* 450px/800px = 0.5625 */ background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ }

#play ul.photo-posts a li span.info { display: block; color: #2d2d2d; margin-top: 5px; }

@media (min-width: 768px) { #play ul.photo-posts a li span.info { margin-top: 20px; } }

#play ul.photo-posts a li span.info p.excerpt { font-size: 16px; }

#play .instagram { padding-top: 60px; }

#play .instagram a { color: #000; display: block; text-align: center; width: 100%; text-decoration: underline; }

#play .instagram #instagram-feed { padding-top: 50px; }

#play .instagram #instagram-feed #instafeed { box-sizing: border-box; -moz-box-sizing: border-box; /* Firefox */ }

#play .instagram #instagram-feed #instafeed a { float: left; width: calc(33.3333333% - 20px); margin-right: 20px; margin-top: 20px; }

#play .instagram #instagram-feed #instafeed a img { width: 100%; }

#work #main-container { background-color: #fff; }

#work .intro { text-align: center; }

#work .intro p { font-weight: 200; }

/*# sourceMappingURL=main.css.map */