/*
 * HTML5 Boilerplate
 *
 * 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.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #444;
}

body {
	background: #222;
    font-size: 0.9em;
    line-height: 1.1;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    text-rendering: optimizeLegibility;
}
form input, form textarea, header h1 a small { font-family: 'Open Sans', Helvetica, Arial, sans-serif; text-rendering: optimizeLegibility; }

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #f60;
    text-shadow: none;
}

::selection {
    background: #f60;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 2em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
    font-size: 11px;
        max-width: 100%;
        height: auto;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}



/* ==========================================================================
   Typekit
   ========================================================================== */
   
   h1, h2, h3, h4, nav, .caveat, .work-thumbs li div a, .social, .nav, blockquote, a.launch-btn, ul.resume strong, cite strong, aside ul li a.em, aside ul li a.tw, aside ul li a.ph, form input[type="submit"], strong { font-family: 'Lora', Helvetica; font-weight: bold; -webkit-font-smoothing: antialiased; }

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
   
   
   a:link, a:visited { color: #f60; -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; -ms-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; }
   a:hover, a:active, a:focus { color: #f30; }
   
   h1 { font-size: 34px; line-height: 1.4; color: #333; line-height: 1.2; }
   h2 { font-size: 28px; line-height: 1.3; color: #111; font-weight: 700; }
   h3 { font-size: 21px; line-height: 1.3; color: #333; padding: 0; margin: 0; }
   h4 { font-size: 18px; line-height: 1.3; padding: 0; margin:1em 0 0 0; color: #444; font-weight: 700; }
   h5 { margin: 0; margin: 0; color: #999; }
   
   p { margin: 1em 0 2em 0; }
   p a { display: inline-block; }
   
   strong { font-weight: 600; }
   
   ul li { line-height: inherit; padding-top: 4px; padding-bottom: 4px; }
   
header { text-align: center; }
header h1 { font-size: 28px; width: 100%; line-height: 20px; padding: 0; margin: 0; }
header h1 a { padding: 20px 0 10px 0; height: 40px; display: block; height: 100%; background: url(../img/home-link.png) 0 -100px no-repeat; background-size: 50px 80px; }
header h1 a:link, header h1 a:visited { color: #fff; text-decoration: none; }
header h1 a:hover, header h1 a:active { background-position: 0 0; background-color: #111; }
header h1 a small { color: #999; font-size: 35%; text-transform: uppercase; font-weight: 100; letter-spacing: 0.3em; line-height: 30px; white-space: nowrap; margin:0; display: block; }

article {
	background: #fff;
	-webkit-box-shadow:  0px 0px 50px 0px rgba(0,0,0,0.7);
        	box-shadow:  0px 0px 50px 0px rgba(0,0,0,0.7);
}
nav ul, 
.work-thumbs,
aside ul { list-style: none; padding: 0; margin: 0; }

nav { clear: both; }
nav ul li { width: 50%; float: left; font-size: 21px; font-weight: 700; display: block; padding: 0; }
nav ul li a { display: block; line-height: 70px; padding: 0; text-decoration: none; }
nav ul li a:hover { color: #fff; background: #f60; }

.main-column {  }
.dude-wrap { padding: 20px; background: #fff; font-size: 1.2em; line-height: 1.7; }
.dude-wrap ul { padding: 0 0 0 2em; }
.dude-wrap ul li { padding: 3px 0; }
aside { padding: 20px 5%; margin: 0 auto;  }
aside p { font-size: 1em; line-height: 1.8; font-weight: normal; }
aside ul { margin-top: 15px; }
aside ul li { padding: 0; }
aside ul li a, aside ul li a:link { color: #666; padding: 8px 6%; display: block; text-decoration: none; font-size: 90%; }
aside ul li a:visited { color: #555; }
aside ul li a:hover { color: #333; background: #ccc; }
aside ul li a.em, aside ul li a.tw, aside ul li a.ph { height: 32px; line-height: 32px; padding: 0 0 0 18%; font-size: 115%; background-image: url(../img/footer-sprite.png); background-repeat: no-repeat; background-size: 32px 96px; color: #333; }
aside ul li a.tw { background-position: 3% 0; }
aside ul li a.em { background-position: 3% -32px; }
aside ul li a.ph { background-position: 3% -64px; }
aside hr { border-color: #ccc; }

.home { background: #333; }
.work-thumbs { margin: 0; line-height: 1.5; color: #666; 
    display: grid;
	grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(48%, 1fr) );
    padding: 10px;
    max-width: 1600px;
    margin: 0 auto;
}
.work-thumbs .box {
	position: relative;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0px 1px 0px rgba(0,0,0,0.08);
    transition: 0.25s all ease-in-out;
	}
.work-thumbs .box img { width: 100%; height: auto; transition: 0.55s all ease-in-out; }
.work-thumbs .box div { padding: 10px; font-size: 12px; transition: 0.25s all ease-in-out; }
.work-thumbs .box div a { text-decoration: none; }
.work-thumbs .box div h3 { font-size: 18px; }
.work-thumbs .box:hover { box-shadow: 0px 4px 20px rgba(0,0,0,0.16); margin: -10px; box-shadow:inset 0 0 40px 10px rgba(255,255,255,1.0); }
.work-thumbs .box:hover div { padding-right: 20px; padding-left: 20px; }
.work-thumbs .box:hover img { opacity: 0.1; }
.work-thumbs .box img.logo { opacity: 0; transition: 0.25s all ease-in-out; position: absolute; width: 50%; margin: auto; top:25%; left: 25%; right: 25%; }
.work-thumbs .box:hover img.logo { opacity: 1; box-shadow: none; }

.work-thumbs .box:nth-child(1) {
        grid-column: 1 / 3;
        grid-row: 1 / 3;
    }
.work-thumbs .box:nth-child(1) h3 { font-size: 200%; }
.work-bottom { background: #eee; }
.work-bottom .work-thumbs .box:nth-child(1) {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        }

.logos { background: #fff; padding: 20px 0 0 0; }
.logos .work-thumbs li { text-align: center; padding: 0; background: none; }
.logos .work-thumbs li img { width: 75%; margin: 10px auto; opacity: .7; mix-blend-mode: luminosity; transition: all .3s; }
.logos .work-thumbs li:hover img { opacity: 1; mix-blend-mode: normal; }
.logos h2 { padding: 10px 1%; color: #333; }


.presentations_grid { margin: 0; line-height: 1.5; color: #666; 
    display: grid;
	grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(98%, 1fr) );
    padding: 0px;
    max-width: 1600px;
    margin: 0 auto;
}
.presentations_grid .box {
	position: relative;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    font-size: 80%
	}
.presentations_grid .box .btn_download { display: block; color: #333; float: none; margin: 10px 0; }

footer { padding: 5% 5% 10% 5%; color: #444; line-height: 20px; }
footer small { color: #666; }
footer a:link, footer a:visited { color: #888; }
footer a:hover, footer a:active, footer a:focus { color: #f60; }

.social { text-align: left; color: #666; font-size:14px; padding-bottom: 5%; white-space: nowrap; }

.social a.tw, .social a.em, .social a.ph { width: 64px; height: 64px; display: inline-block; -webkit-border-radius: 100px; border-radius: 100px; text-indent:-9999px; overflow: hidden; padding: 0; margin: 0 2% 0 0; line-height: 64px; background: #121212 url(../img/footer-sprite.png) no-repeat;
-webkit-box-shadow: 0px 1px 0px 0px #333;
box-shadow: 0px 1px 0px 0px #333;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
 }
.social a.tw:hover, .social a.em:hover, .social a.ph:hover { background-color: #f60;
 -moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
  }
.social a.tw { background-position: 0 0; }
.social a.em { background-position: 0 -64px; }
.social a.ph { background-position: 0 -128px; }
.social a.ph-txt { text-decoration: none; }

.round-img { max-width:100%; margin: 0 0 10px 0; font-size: 11px; color: #999;
-webkit-border-radius: 500px;
border-radius: 500px; }

blockquote { padding: 0.5em 5%; margin: 2em 0; clear: both; background: #eee; color: #666; border: 1px solid #ddd; border-bottom-color: #ccc; }
blockquote p { margin: 1.5em 0; }
blockquote strong { font-size: 150%; color: #333; font-weight: normal; line-height: 1; }
cite { display: block; font-style: normal; margin-top: -2.5em; padding: 10px 0 20px 0; font-size: 85%; line-height: 1.7; background: url(../img/content/cite-arrow.png) 10% top no-repeat; }
cite img { float:left; margin:0 10px 20px 0; }
cite strong { font-size: 115%; }
.one-fourth cite { line-height: 1.3; background-position: 78px top; }
blockquote, cite img { -webkit-border-radius: 3px; border-radius: 3px; }

ul.resume { list-style: none; padding: 0; margin: 0; }
ul.resume strong { font-weight: 600; color: #333; }
ul.resume li { padding: 20px 0; border-top: 1px solid #ddd; }
ul.resume li:first-child { border: none; }
ul.resume li h5 { display: block; line-height: 30px; }
ul.resume li h3 { line-height: 30px; font-style: normal; }
ul.resume li h3 small { font-weight: 600; color: #999; white-space: nowrap; }
ul.resume li h3 a { color: #333; text-decoration: none; }

.work-display { }
.work-wrap { background: #fff; padding: 20px 5% 80px 5%; color: #555; font-size: 1.2em; line-height: 1.6; color: #666; }
.work-wrap img { display: block; margin: 10px auto; height: auto; }
.work-wrap a img:hover { }
.work-caption { display: block; max-width: 800px; color: #777; padding: 0 20px 60px 20px; margin: 0 auto; text-align: center; }
.work-caption small { color: #999; display: block; }

.work-display aside { line-height: 1.8; color: #444; }
.work-display aside h1 { margin: 0; }
.work-display aside img { display: block; max-width: 50%; margin: 0 auto; }
.work-display aside p, .work-display aside strong { color: #666; }
.work-display aside h5 { font-size: 1em; font-weight: normal; padding-top: 1em; margin-top: 1em; }
.work-display aside ul { list-style: disc; margin: 1em; padding: 0 0 0 2em; color: #666; }
.work-display aside ul li { border: none; padding: 0; }
.work-display aside ul li a { display: inline; margin: 0; padding: 0; text-decoration: underline; color: #f60; }
.work-display aside ul li a:hover { background: none; color: #f30; }

a.launch-btn, form input[type="submit"] {
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
    font-size: 16px;
    font-weight: 600;
    height:40px;
    line-height:40px;
    padding:0 20px;
    display: inline-block;
    color: #fff;
    background-color: #f60;
    border: 1px solid #f30;
    border-bottom-color: #e20;
    border-radius: 4px;
    box-shadow: 0px 2px rgba(0,0,0,.15);
     }
     
a.btn_download { display: block; white-space: nowrap; text-decoration: none; color: #666; padding: 0 20px; line-height: 40px; border: 1px solid #ddd; border-radius: 4px; box-shadow: 0px 2px 0px rgba(0,0,0,0.08); display: inline-block; transition: 0.25s ease-in-out; padding-left: 40px; background: url(../img/doc.svg); background-position: 12px center; background-size: 24px 24px; background-repeat: no-repeat; }
a.btn_download:hover { background-color: #f6f6f6; }

a.icon { width: 24px; height: 24px; padding: 12px; margin-right: 12px; display: inline-block; text-align: center; vertical-align: middle; border-radius: 48px; transition: all .25s ease-in-out; background-color: none; }
a.icon path { fill: #999; transition: all .45s ease-out; }
a.icon:hover path { fill: #fff; }
a.twitter:hover { background-color: #1da1f2; }
a.instagram:hover { background-color: #c32aa3; }
a.linkedin:hover { background-color: #007bb5; }
a.email:hover { background-color: #c00; }

a...main-btn:hover, a.launch-btn:active, a.launch-btn:focus, form input[type="submit"]:hover, form input[type="submit"]:active, form input[type="submit"]:focus { background: #f30; }

aside a.launch-btn { margin: .5em 0; }


.associates { background: #eee; color: #333; padding: 0 1% 2em 2%;  }
.associates h4 { color: #333; }
.associates ul { padding: 0; margin:10px 0; list-style: none;  }
.associates ul li { padding: 5px 0; }
.associates a { }


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


/* GRID STYLES */
.one-ninth,
.one-seventh,
.one-sixth,
.one-fifth,
.one-fourth,
.one-third,
.one-half,
.two-ninths,
.two-sevenths,
.two-fifths,
.two-thirds,
.three-fourths,
.three-fifths,
.three-sevenths,
.four-ninths,
.four-fifths,
.four-sevenths,
.five-ninths,
.five-sixths,
.five-sevenths,
.six-sevenths,
.seven-ninths,
.eight-ninths { float: left; position: relative; }

.one-ninth { width: 11.1111%; }
.one-seventh { width:14.2857%; }
.one-sixth { width:16.666667%; }
.one-fifth { width: 20%; }
.one-fourth { width: 25%; }
.one-third { width:33.333333%;}
.one-half { width:50%;}
.two-ninths { width: 22.2222%; }
.two-sevenths { width:28.5714%; }
.two-fifths { width:40%; }
.two-thirds { width:66.666667%;}
.three-fifths { width:60%; }
.three-sevenths { width:42.85714%; }
.three-fourths { width: 75%; }
.four-fifths { width: 80%; }
.four-sevenths { width:57.1428%; }
.four-ninths { width:44.4444%; }
.five-sevenths { width:71.42857%; }
.five-ninths { width:55.5556%; }
.five-sixths { width:83.333335%;}
.six-sevenths { width:85.71428%; }
.seven-ninths { width:77.7777%; }
.eight-ninths { width:88.8888%; }




.padding { padding: 10px; }
.padding-x { padding: 0 10px !important;}
.padding-y { padding: 10px 0 !important; }


.center-me { text-align:center !important; }
.right-me { text-align:right !important; }
.left-me { text-align:left !important; }
.float-right { float:right; margin: 0 0 20px 3%; display:inline-block; font-weight:normal; }
.float-left { float:left; margin: 0 3% 20px 0; display:inline-block; font-weight:normal; }
.float-stack { margin:0 0 10px 0; } /* stacks floated elements */




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

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}


/*
	 Organic Tabs
	 by Chris Coyier
	 http://css-tricks.com
*/

/* Generic Utility */
.hide { position: absolute; top: -9999px; left: -9999px; }


/* Specific to example one */


.dude-wrap ul.nav { overflow: hidden; margin:0 -5.8% 30px -12%; padding: 20px 9% 0 12%; list-style: none; display: block;  line-height: 50px; font-size: 16px;
	background: #ffffff; /* Old browsers */
	background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%), linear-gradient(to bottom,  #ffffff 0%,#eeeeee 100%); /* W3C */
}
.dude-wrap ul.nav li { float: left; margin: 0; padding: 0; width: 33%; }
.dude-wrap ul.nav li:first-child { }
.dude-wrap ul.nav li a { display: block; padding:0 5px; margin: 0; color: #f60; text-align: center; border: 0; text-decoration: none; font-weight: 600;
text-shadow:none; background: url(../img/nav-divide.gif) left no-repeat;
-webkit-border-radius: 3px 3px 0px 0px;
        border-radius: 3px 3px 0px 0px;
         }
.dude-wrap ul.nav li:first-child a { background: none; }
.dude-wrap ul.nav li a:hover { background: #f60; color: #fff;  }
.dude-wrap ul.nav li a.current { background: #fff; color: #333;
        box-shadow:  0px 1px 8px 0px #ddd;
}
.dude-tabs { padding-bottom: 3em; }

abbr[title="and"]{ border:none; font-family:Baskerville, Palatino, "Book Antiqua"; font-style:italic; font-weight:400; text-decoration:none; }

form { display: block; margin: 1em 0 2em 0; }
form label { width: 23%; margin-right: 2%; float: left; text-align: right; padding: 5px 0; }
form input, form textarea { width: 74%; float: left; margin-bottom: 10px; text-indent: 2%; border: 1px solid #ddd; border-top-color: #ccc; background: #f8f8f8; color: #999; }
input { padding:0; line-height: 32px; }
textarea { padding: 5px 0; }
form input:hover, form textarea:hover { background: #f3f3f3; color: #444; }
form input:focus, form textarea:focus { background: #fff; border-color: #99f; }
form input[type="submit"] { width: 25%; float: left; text-indent: 0; padding:0; text-align: center; }
.required { color: #f60; font-weight: bold; }

    
	/* // tidy up the bottom // */
    .home .work-thumbs .box:nth-child(12) { display: none; }
    .home .work-thumbs .box:nth-child(13) { display: none; }
    .home .work-thumbs .box:nth-child(14) { display: none; }
    .home .work-thumbs .box:nth-child(15) { display: none; }
    .home .work-thumbs .box:nth-child(16) { display: none; }
    .home .work-thumbs .box:nth-child(17) { display: none; }
    .home .work-thumbs .box:nth-child(18) { display: none; }
    .home .work-thumbs .box:nth-child(19) { display: none; }
    .home .work-thumbs .box:nth-child(20) { display: none; }
    
    
    

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
   
@media only screen and (max-width:480px) {
	.break { width: 100%; clear: both; float: none; margin: 0; }
	.break .one-sixth { width: 50%; }
	form label, form input, form textarea { width: 100%; float: none; }
}

@media only screen and (min-width:480px) {
    /* Style adjustments for larger than mobile */
	
	header h1 { float: left; width: 60%; height: 60px; line-height: 30px; align:left; }
	header h1 a { text-align: left; padding: 30px 0 20px 2.5em;  }
	header h1 a small { display: inline-block; margin-left: 10px;  }
	nav { float: left; width: 40%; clear: none; }
	nav ul li a { line-height: 80px; padding: 10px 0 10px 0; }
	.social { float: right; }
	.dude-wrap { padding: 20px 10% 40px 10%; max-width: 1000px;
		 margin: 0 auto; }
	.dude-wrap ul.nav { overflow: hidden; margin:0 -5.8% 30px -12%; padding: 20px 9% 0 12%; }
	aside { max-width: 1000px; }
	aside ul { margin: 10px 0 20px 0; }
	.work-display aside img { float: right; margin: 0 0 1em 4em; }
	.three-fourths blockquote { margin-right: 5%; }
	ul.resume li { padding: 20px 5% 20px 20%; }
	ul.resume li h5 { margin-left: -20%; margin-right: 0; display: inline-block; width: 18%; float: left; line-height: 30px; }
	
		
	.work-thumbs {
		grid-gap: 20px;
	    grid-template-columns: repeat(auto-fill, minmax(33%, 1fr) );
	    padding: 20px;
	    }
	.work-thumbs .box div { padding: 20px; }
	.work-thumbs .box:hover div { padding-right: 30px; padding-left: 30px; }
	.work-thumbs .box div h3 { font-size: 21px; }
    .presentations_grid { 
    	grid-template-columns: repeat(auto-fill, minmax(48%, 1fr) );
	}
	
}

@media only screen and (min-width:760px) {
    /* Style adjustments for tablet */
	
    a.btn_download { float: right; margin-top: -40px; }
    		
	.work-thumbs {
	    grid-template-columns: repeat(auto-fill, minmax(24%, 1fr) );
	}
	
	/* // tidy up the bottom // */
    .home .work-thumbs .box:nth-child(12) { display: block; }
    .home .work-thumbs .box:nth-child(13) { display: none; }
    .home .work-thumbs .box:nth-child(14) { display: none; }
    .home .work-thumbs .box:nth-child(15) { display: none; }
    .home .work-thumbs .box:nth-child(16) { display: none; }
    .home .work-thumbs .box:nth-child(17) { display: none; }
    .home .work-thumbs .box:nth-child(18) { display: none; }
    .home .work-thumbs .box:nth-child(19) { display: none; }
    .home .work-thumbs .box:nth-child(20) { display: none; }
    
    .presentations_grid { 
    	grid-template-columns: repeat(auto-fill, minmax(30%, 1fr) );
	}

}


@media only screen and (min-width:1100px) {
    /* Style adjustments for desktop */
    		
	.work-thumbs {
	    grid-template-columns: repeat(auto-fill, minmax(19%, 1fr) );
	    padding-bottom: 40px;
	}
	
	/* // tidy up the bottom // */
    .home .work-thumbs .box:nth-child(12) { display: block; }
    .home .work-thumbs .box:nth-child(13) { display: block; }
    .home .work-thumbs .box:nth-child(14) { display: block; }
    .home .work-thumbs .box:nth-child(15) { display: none; }
    .home .work-thumbs .box:nth-child(16) { display: none; }
    .home .work-thumbs .box:nth-child(17) { display: none; }
    .home .work-thumbs .box:nth-child(18) { display: none; }
    .home .work-thumbs .box:nth-child(19) { display: none; }
    .home .work-thumbs .box:nth-child(20) { display: none; }
    
	.work-thumbs .box:nth-child(8) {
        grid-column: 4 / 6;
        grid-row: 3 / 5;
    }
	.work-thumbs .box:nth-child(1) div h3, .work-thumbs .box:nth-child(8) div h3 { font-size: 32px; }
	
	.work-bottom .work-thumbs .box:nth-child(8) {
        grid-column: 3 / 4;
        grid-row: 2 / 3;
        }
	.work-bottom .work-thumbs .box:nth-child(1) div h3, .work-bottom .work-thumbs .box:nth-child(8) div h3 { font-size: 18px; }
	
	.presentations_grid { 
	    grid-template-columns: repeat(auto-fill, minmax(22%, 1fr) );
    	grid-gap: 40px;
	}

}

@media only screen and (min-width:1600px) {
    /* Style adjustments for large desktop */
	
    
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        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) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
        height: auto;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}