/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html {
	-webkit-font-smoothing: antialiased;
}

html,
button,
input,
select,
textarea {
    color:black;
}

body {
    font-size:1em;
    line-height:1.4;
}

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

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

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

img {
    vertical-align:middle;
}

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

textarea {
    resize:vertical;
}

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

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


body {
    color:black;    
	background:#ff3333;
	text-align:left;
    font:normal 19px "adobe-garamond-pro", "Hoefler Text", Times, serif;
    text-transform: lowercase;
    line-height:1.7;
}

.android body{
    font:normal 19px "adobe-garamond-pro", Times, serif;
    text-transform: lowercase;
    line-height:1.7;
}

p, pre{
	padding:0.6em 0;
	margin:0 !important;
}

a.mainlinks2 {
	color: #ff5085;
}

a.mainlinks2:hover {
	color: black;
}

a.mainlinks {
	color: gray;
	font-style:italic;
}


a.mainlinksnormal {
	color: black;
}

a.mainlinksnormal:hover {
	color: black;
}


a {
	text-decoration:none;
	color: gray;
}

a:hover {
	text-decoration:none;
	color: black;
}


body, h1, h2{
	font-size:19px;
}

h1, h2, h3{
	margin:0;
	font-weight:bold;
	font-family: Helvetica, Arial, sans-serif;; 
	font-size: 12pt;

}

h3, .caps{
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:1px;
	margin-bottom: 0.6em;
}

.oblique {
	font-style:italic;
}

ul.italic,
span.italic{
	color:black;
}


.italic {
	font-style:italic;
}

.gray {
	color:#741717;
}


ul {
	list-style-type:none;
	padding:0;
	margin:0;
	line-height:1.5;
}

li {
	padding:2px;
	padding-left:0;
}

article{
	padding-bottom:10px;
}

article.hidden{
	display:none;
}

section{
	margin:0;
	padding:0;
}

/* --- */

.bar {
	width:100%;
	height:2px;
	margin: 0 0 10px 0;
	background-color: black;

}

.graybar {
	width:50px;
	height:1px;
	margin: 30px 0 10px 0;


}

.graybar2 {
	width:50px;
	height:1px;
	margin: 30px 0 0 0;
	background-color: black;

}



.graybar3 {
	width:100%;
	height:1px;
	margin: 30px 0 1px 0;
	background-color: #747575;

}

#imgfm {
	width:100%;
	height:90px;
	margin:135px 0 70px 0;
	font-family: "din-condensed-web", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	line-height: 0.9em;
	font-size: 5em;
	position:relative;
	display:block;
	color: black;
}

#virgin {
	width:100%;
	height:90px;
	font-family: "din-condensed-web", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	line-height: 0.9em;
	font-size: 5em;
	margin:135px 0 70px 0;
	position:relative;
	display:block;
	color: black;
}

#hbo {
	width:100%;
	height:160px;
	font-family: "din-condensed-web", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	line-height: 0.9em;
	font-size: 5em;
	margin:90px 0 0 0;
	position:relative;
	display:block;
	color: black;
}


#ted {
	width:100%;
	height:80px;
	font-family: "din-condensed-web", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	line-height: 0.9em;
	font-size: 5em;
	margin:90px 0 0 0;
	position:relative;
	display:block;
	color: black;
}

#eurosport {
	width:100%;
	height:160px;
	font-family: "din-condensed-web", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	line-height: 0.9em;
	font-size: 5em;
	margin:90px 0 0 0;
	position:relative;
	display:block;
	color: black;
}


#oi {
	width:100%;
	height:160px;
	font-family: "din-condensed-web", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	line-height: 0.9em;
	font-size: 5em;
	margin:90px 0 0 0;
	position:relative;
	display:block;
	color: black;
}

/* -- */

#book {
	width:100%;
	height:65px;
	margin:135px 0 9px 0;
	font-family: "din-condensed-web", Helvetica, Arial, sans-serif;
	font-size: 5em;
	line-height: 0.9em;
	text-transform: uppercase;
	color: black;
	position:relative;
	display:block;
}

#book a.rollover {
	display:block;
	width:100%;
	height:237px;
	text-decoration:none;
	background-position:top; 
}

#book a.rollover:hover {
	background-position:bottom;
	cursor:default;
}

#book .displace {
	position:absolute;
	left:-5000px;
}

/* -- */

#columns{
	position:relative;
	padding:0 20px 40px 20px;
}

#columns div.title{
	display:none;
}

#columns .column{
	display:none;
}

#main.bio #column-bio{display:block;}
#main.work #column-work{display:block;}
#main.publications #column-publications{display:block;}

#main.bio #tabs li:nth-child(1) a,
#main.work #tabs li:nth-child(2) a,
#main.publications #tabs li:nth-child(3) a{ color:gray;text-decoration:none;cursor:default; }

/* -- */

#clients{
	overflow:hidden;
	background:#000;
	height: 0;
	line-height:1.5;
	text-align:left;
	color:#991f1f;
	width:100%;
}

/*
.android #clients{
	display:none;
}
*/


#clients a{
	color:#ff3333;
}
#clients a:hover{
	color:white;
}

#clients h2{
	text-align:left;
	font-size: 15px;
	color: #ff3333;
	padding-left:20px;
}

#clients h3{
	text-align:left;
	color:#fff4d9;
	font: 15px Helvetica, Arial, sans-serif;
	font-weight: bold;
	text-transform: lowercase;
	margin-top: 20px;
	margin-bottom: 8px;
}

#clients > div{
	position:relative;
	padding:45px 0 40px 0;
}

.ios #clients div.scroll::-webkit-scrollbar{
	display:none;
}

#clients div.scroll::-webkit-scrollbar {
    height:7px;
}
 
#clients div.scroll::-webkit-scrollbar-track {
    background:#000;
}
 
#clients div.scroll::-webkit-scrollbar-thumb {
    -webkit-border-radius: 7px;
    background:#999;
}

#clients div.clearfix{
	width:3750px;
	padding-left:20px;
}

#clients div.clearfix div{
	font-family: "adobe-garamond-pro", "Hoefler Text", Times, serif;
	width:200px;
	padding-right:50px;
	line-height: 1.4;
	font-size: 16px;
	float:left;
}


#tabs{
	margin:0 20px 0 20px;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 16px;
}

#tabs li{
	float:left;
	width: 30%;
	margin: 0 3% 0 0;
	padding: 11px 0 0 0;
	border-top: 2px solid black;
}

h1{ padding:20px 10px 0 20px; }

#error {

	width: 100%;
	height: 100%;
	text-align: center;
	margin-top: 60px;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */
   
@media only screen and (max-width:759px) {


	body {background:#fff4d9; }
	
	.bar { display:none; }

	.gray {
        color: gray;
    }
	
	#clients > div{
		padding-bottom:1px;
	}

	#clients div.scroll{
		padding-bottom:30px;
		overflow-x:scroll;
 		-webkit-overflow-scrolling:touch;
	}

	#clients {
    color:#fff4d9;
    }

    #clients a {
    color:#ff5085;
    }

    #clients h2 {
    color:#fff4d9;
    }
	
	.android #clients div.scroll,
	.ios #clients div.scroll{
		padding-bottom:20px;
	}

	h1 { padding-top:65px;
		padding-bottom:65px;

	 }

	p {font:normal 22px "adobe-garamond-pro", "Hoefler Text", Times, serif;
    line-height:1.6; }

    .caps {
	font-size: 14px;
	}

	#imgfm {margin-top:55px;
	
	}

	#virgin {
	margin-top:55px;
	
	}

	#book {
	height:66px;
	margin:55px 0 9px 0;
	}

}

@media only screen and (min-width:759px) {

	/* ==========================================================================
   Phone
   ========================================================================== */

	body {background:#fff4d9; }

	a {
	color: gray;
	}

	a.mainlinks {
	color: gray;
	font-style:italic;
	}

	a.mainlinks:hover {
	color: gray;
	}

	a.mainlinks2:hover {
	color: black;
	}

	.gray {
	color:gray;
	}

	#clients{
	color: #fff4d9;
	}

	#clients a{
	color:#ff5085;
	}

	#clients h2{
	color:#fff4d9;
	}
	
	#clients h2{
		padding-left:40px;
	}
	
	#clients div.clearfix{
		width:4500px;
		padding-left:40px;
	}

	#clients div.clearfix div{
		width:250px;
	}

	#book {
	height:66px;
	margin:55px 0 9px 0;
	}

	h1 { padding-top:65px;
		padding-bottom:65px;
		padding-left:40px;

	 }

	#imgfm {margin-top:55px;
	
	}

	#virgin {
	margin-top:55px;
	
	}

	#tabs{ margin:0 20px 0 40px; }
	#columns{ padding:0 40px 40px 40px; }


}


@media only screen and (min-width:760px) {

	/* ==========================================================================
   Tablet
   ========================================================================== */


	body{ 
	font-size:18px; 
	background: #f6b2c6;
	}

	a {
	color: #936b77;
	}
	

	a.mainlinks {
	color: #936b77;
	font-style:italic;
	}

	a.mainlinks2 {
	color: white;
	}

	a.mainlinks:hover {
	color: black;
	}

	a.mainlinks2:hover {
	color: #ff5085;
	}

	.gray {
	color: #936b77;
	}

	#virgin {
	font-size: 4.5em;
	}

	#book {
	font-size: 4.5em;
	height:86px;
	margin:119px 0 9px 0;
	}

	#imgfm {
	font-size: 4.5em;
	}

	#oi {
	font-size: 4.5em;
	}

	#eurosport {
	font-size: 4.5em;
	}

	#ted {
	font-size: 4.5em;
	}

	#hbo {
	font-size: 4.5em;
	}

	#clients{
	color:#f6b2c6;
	}

	#clients a{
	color:#ff5085;
	}

	#clients h2{
	color:#fff4d9;
	}


	h1{ padding:117px 40px 104px 40px; }
	#tabs{ display:none; }

	
	#columns{ padding:0 20px 40px 20px; }
	#columns div.title{ display:block; }
	#columns div.column{ float:left; width:33.3%; display:block; }
	#columns div.content{ padding:10px 20px 40px 20px; }
	
	#clients h2{ padding:50px 40px 30px 40px; }
	#clients > div{ padding:0 0 40px 0; }
	
	#clients div.clearfix{ width:96%; margin:0 auto; padding:0; }
	#clients div.clearfix div{ width:18.6%; margin:0 0.7%; padding:0 0 30px 0; font:13px; min-height:150px; }
	#clients div.clearfix div:nth-child(5n+6) { clear:both; }	
	
	.fixed > div{ position:fixed; bottom:0; } 
	.fixed-top > div{ bottom:auto !important; top:0; }

}   
   
@media only screen and (min-width:1280px) {

/* ==========================================================================
   Desktop
   ========================================================================== */


	#clients div.clearfix div{ width:17%; margin:0 1.5%; font-size:16px; }
	
	body{
		font-size:19px;
		text-align:justify;
		background:#94c4e9;;
	}

	a {
	color:#5a768b;
	}	
	
	.gray {
	color:#5a768b;
	}

	a.mainlinks {
	color:#5a768b;
	}

	a.mainlinks2 {
	color: white;
	}

	a.mainlinks:hover {
	color: black;
	}

	a.mainlinks2:hover {
	color: black;
	}

	#clients{
	color:#5a768b;
	}

	#clients a{
	color:#b1d7f4;
	}

	#clients a:hover{
	color:white;
	}

	#clients h2{
	color:#fff4d9;
	}

	#book {
	height:75px;
	margin:130px 0 9px 0;
	}

	#columns div.content{ padding:10px 30px 40px 30px; }
	#clients h2, h1{ padding-left:50px; }
}   

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {

	#imgfm 		{ background-size:auto 238px; }

}

@media only screen and (min-width:1800px) {

	/* ==========================================================================
   Wide
   ========================================================================== */

	body {
	font-size: 26px;
	background-color: #a4cdec;
	}

	h1, h2 {
	font-size: 23px;
	}

	a.mainlinks2 {
	color: white;
	}

	a.mainlinks:hover {
	color: black;
	}

	a.mainlinks2:hover {
	color: black;
	}

	h3 {
	font-size: 16px;
	letter-spacing:2px;
	}

	.caps {
	font-size: 17px;
	}

	#clients h2{
		padding-left:40px;
	}
	
	#clients div.clearfix{
		width:4500px;
		padding-left:40px;
	}

	#clients div.clearfix div{
		width:250px;
	}

	#virgin {
	height:170px;
	margin:135px 0 70px 0;
	}

	#imgfm {
	height:170px;
	margin:135px 0 70px 0;
	}

	#book {
	height:66px;
	margin:240px 0 70px 0;
	}

	#oi {
	height:170px;
	margin:135px 0 70px 0;
	}

	#eurosport {
	height:170px;
	margin:135px 0 70px 0;
	}

	#ted {
	height:54px;
	margin:135px 0 70px 0;
	}

	#hbo {
	height:170px;
	margin:135px 0 70px 0;
	}


	h1{ padding:240px 40px 240px 80px; }
	#tabs{ display:none; }

	#columns{ padding:0 30px 60px 60px; }
	#columns div.title{ display:block; }
	#columns div.column{ float:left; width:33.3%; display:block; }
	#columns div.content{ padding:10px 60px 40px 20px; }
	
	#clients h2{ padding:50px 40px 30px 60px; font-size: 23px;}
	#clients h3{ font-size: 23px;}
	#clients > div{ padding:0 0 40px 0; }

	
	#clients div.clearfix{ width:96%; margin:0 auto; padding:0;}
	#clients div.clearfix div{ width:18.6%; margin:0 0.7%; padding:0 0 30px 0; font-size:23px; min-height:150px; }
	#clients div.clearfix div:nth-child(5n+6) { clear:both; }	
	
	.fixed > div{ position:fixed; bottom:0; } 
	.fixed-top > div{ bottom:auto !important; top:0; }

}


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

.ir {
    background-color:transparent;
    border:0;
    overflow:hidden;
    *text-indent:-9999px;
}

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

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

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

.invisible {
    visibility:hidden;
}

.clearfix:before,
.clearfix:after {
    content:" ";
    display:table;
}

.clearfix:after {
    clear:both;
}

.clearfix {
    *zoom:1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@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 {
        border:1px solid #999;
        page-break-inside:avoid;
    }

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

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

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

    @page {
        margin:0.5cm;
    }

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

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