/*
@font-face
{
    font-family: "mplus-1c";
    src: url('../fonts/mplus-1c-medium.woff')
         format("woff");
         font-weight: 500;
}

@font-face
{
    font-family: "mplus-1c";
    src: url('../fonts/mplus-1c-regular.woff')
         format("woff");
         font-weight: 400;
}
*/
@font-face {
    font-family: 'Helvetica Neue';
    src: url('fonts/helvetica-neue-bold.woff') format('woff');
    font-weight: bold;
}

@font-face {
    font-family: 'Helvetica Neue Condensed';
    src: url('fonts/helvetica-neue-condensed-bold.woff') format('woff');
    font-weight: bold;
}

@font-face {
    font-family: 'ITC Franklin Gothic Compressed';
    src: url('fonts/itc-franklin-gothic-book-compressed.woff') format('woff');
    font-weight: normal;
}

/* GENERIC STYLES */
	html {
		font-size: 100%;
	}
	body {
		background: #fff;
		margin: 0;
		font-family:  "adobe-caslon-pro";
		font-size: 100%;
		color: #333;
		line-height: 150%;
		-moz-osx-font-smoothing: grayscale;		
	}

	b {
		font-family: "adobe-caslon-pro";
	}
	
	table {
		border-collapse: separate;
		border-spacing: 0;
		width: 100%;
	}

	th {
		background-color:#fff;
		text-align:left;
		font-weight: bold;
		border-bottom: 1px solid #ccc;
	}

	tr th:first-child {
		border-right: 1px solid #ccc;
		border-bottom: none;
	}
	table tr:first-child th:first-child {
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;


	}

	td.total {
		font-family: "adobe-caslon-pro";
	}
	
	td,th {
		font-weight: normal;
		padding: 0.75rem 0.75rem;
		white-space: nowrap;
	}
	
	td {
		border-collapse: collapse;
		text-align:left;
	}
	td.currency {
		text-align:right;
	}
	
	a {
		color: #65787F;
	}

	blockquote.light {
		background-color:white;
		color:#666;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		margin-top: 1.5rem;
		padding: 1.5rem;
	}

	blockquote b {
		font-style: normal;
		display: block;
		text-align: right;
		font-weight: bold;
		font-family: "adobe-caslon-pro";
	}
	
	div.container {
		width: 73.5rem; /*1176;*/
		margin: 0 auto;
	}
	
	h2 {
		font-size: 1.5em;
		margin: 1em 0;
		line-height: 100%;
		color: #1d1d1d;
		font-family: "Helvetica Neue Condensed";
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: .2em;	
	}

.velocity100 {
    border-bottom: .5rem solid #800000;
}
.velocity90 {
    border-bottom: .5rem solid #a00000;
}
.velocity80 {
    border-bottom: .5rem solid #c00000;
}
.velocity70 {
    border-bottom: .5rem solid #d04000;
}
.velocity60 {
    border-bottom: .5rem solid #ff8000;
}
.velocity50 {
    border-bottom: .5rem solid #ffa000;
}
.velocity40 {
    border-bottom: .5rem solid #ffc000;
}
.velocity30 {
    border-bottom: .5rem solid #ffff40;
}
.velocity20 {
    border-bottom: .5rem solid #ffff80;
}
.velocity10 {
    border-bottom: .5rem solid #ffffcc;
}
.velocity0 {
    border-bottom: .5rem solid #FFF;
}


.header-border {
	margin-top: 3em;
	clear:both;
}
p {
	margin: 0 0 1.5em;
}
ol, ul {
	margin: 1.5em 0 0 0;
}
ul li, ol li {
	margin: 0 0 1.5em;
}
ul li {
	margin-left: 0;
	padding-left: 0;
}
ol li {
	list-style: decimal;
}


.style1 {
	color: #5C6E12;
	font-weight: bold;
}
.style2 {
	color: #B1D233;
	font-weight: bold;
}

/* Layout styles */

.argentic-logo {
	font-family: "league-gothic";
	font-size: 1.875em; /* 30 */
	line-height: 1.6em; /* 48 */
	text-transform: uppercase;
	margin: .8em; /* 24 */
}

.clear {
  clear:both
}

.color-seperator {
	height: .25em;
}
.color-seperator div {
	width: 16.66667%;
	height: .25em;
	float: left;
}
.color-seperator .color-1 {
	background-color: #1d1d1d;
}
.color-seperator .color-5 {
	background-color: #406fd4;
}
.color-seperator .color-4 {
	background-color: #52bceb;
}
.color-seperator .color-3 {
	background-color: #40d4ca;
}
.color-seperator .color-2 {
	background-color: #49f7aa;
}
.color-seperator .color-6 {
	background-color: #df4e0b;
}

.hero {
	background-color: #f7f7f7;
	border-bottom: 1px solid #ebebeb;
	height: 15rem; /*260px */
	position:relative;
	margin-bottom: 4.5em; /*72px; */
	padding: 3rem 0; /*48px 0;*/
        display: none;
}
    
.hero:after {
	clear:both;
}

.hero .title h1 {
	color: #333333;
	font-family: "Helvetica Neue";
	font-weight: bold;
	font-size: 3rem;
	line-height: 3rem;
	letter-spacing: -.05em;
	margin: 0;
}

.hero .title h3 {
	color: #666666;
	font-family: "mplus-1c";
	font-weight: 500;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin: 0;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.25rem;
}

.hero .title {
	padding-top: 4.5rem;
	margin-left: 7.5rem;
	width: 21rem;
	float: left;
}

.hero .project {
	width: 36rem;
	float: left;
	padding-top: 3rem;
}
.hero .project h1 {
	font-size: 3rem;
	line-height: 4rem;
	color: #231f20;
	margin: 0 0 .5rem;
	font-weight: normal;
}

.hero .project p {
	font-size: 1.5rem;
	line-height: 2rem;
	color: #231f20;
	letter-spacing: -.025em;
}
.avoid {
	-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}
.two-column {
	-webkit-column-count: 2;
	   -moz-column-count: 2;
	        column-count: 2;  
	-webkit-column-gap: 1.5em; /* Chrome, Safari, Opera */
    -moz-column-gap: 1.5em; /* Firefox */
    column-gap: 1.5em;
}

.main-content {
	margin: 6rem 4.5em 6rem;
}

.version {
	color: #999;

	font-family: "adobe-caslon-pro", sans-serif;
	font-weight: normal;
	font-style: italic;
	font-size: .625rem;
	line-height: 1.5rem;

	position: absolute;
	right: 1rem;
	bottom: .1875rem;
	margin: 0;
}

.footer {
	color: #ccc;
	background-color: #1d1d1d;
}

.footer-row:after {
	clear: both;
}


.footer .argentic-logo {
	color: #fff;
}

.footer-left { 
	padding-top: 0.6851em; /*
		We're trying to push .argentic-logo so that it's 48pixels below the top of the color separator

		CSS grid: 16pixels;
		
		48pixels - 4pixels to account for the height of the color separator = 44pixels
		
		(44/16) = 2.75em ' or 2.75 CSS grid units
		
		2.75em - (.8em * 1.875em) to account for the logo's margin height = 1.25em
		
				 ('line-height * 'font-size - 'line-height) / 2
		1.25em - (1.6em * 1.875em - 1.875)/2 to account for the logo's line-height, but only the top contribution (so we divide by two)

		= 0.6851em;
		*/
	width: 15rem;
	float:left;
}
.footer-center {
	width: 33rem;
	padding-right: 2.9375em;
	float:left;
	border-right: 0.0625em solid #353535;
	min-height: 12rem;
	margin: 3.3125em 0;
}

.footer-center px {
	margin-bottom: 0;
}
.footer-right {
	margin: 3.3125em 0 1.8125em;
	float:left;
}

.footer-right dl {
	margin: 0;
}

.footer-right dt {
	font-family: "ITC Franklin Gothic Compressed";
	font-size: .875em;
	float:left;
	padding-left:2.125rem;
	width: 4.5rem;
	font-weight: normal;
	text-transform: uppercase;
	color: #707070;
	clear: both;
	margin: 0 0 2rem;
	text-align:right;
	letter-spacing: .1em;
}

.footer-right dd {
	margin: 0 0 2rem 1rem;
	float:left;
	font-famliy: "adobe-caslon-pro";
	color: #ccc;
	letter-spacing: -.025em;
}

.footer dd a {
	color: #fff;
}

.copyright {
	font-size: 0.625em;
	color: #999;
	font-family: "Helvetica Neue";
	text-align: center;
	padding-top: 2.4375rem;
	padding-bottom: 2.8125rem;
	border-top: #353535 0.0625em solid;
	clear: both;
	margin: 0 1.5rem;
}

/* Not used in this document

.role-ux, .role-front, .role-back, .role-qa, .role-ops, .role-null {
	display: inline-block;
	line-height: normal;
	width: 40px;
	text-align: center;
	color:white;
	border-radius: 1em;
	padding: 2px 12px;
	font-family: "Helvetica Neue";
	font-stretch: "condensed";
	font-weight: "normal";
	letter-spacing: .1em;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	margin-right: 1em;
}

.role-ux {
	background-color: #52bceb;
}

.role-back {
	background-color: #1d1d1d;
}

.role-front {
	background-color: #406fd4;
}

.role-qa {
	background-color: #df4e0b;
}

.role-ops {
	background-color: #40d4ca;
}

.role-null {
	background-color: #49f7aa;
}

.sprint-targets {
	list-style-type: none;
	padding-left: 0;
}
.sprint-targets li {
	padding-left:0;
}
ul.sprint-description {
    padding:0px 20px;
}*/

h3 , em.highlight {
	color: #406fd4;
	font-style: normal;
	font-family: "adobe-caslon-pro";
}

h3 {
	color: #a00000;
	margin: 1.5em 0;
	font-size: 1em;
	line-height: 2.5em;
}

p.footnote {
	background-color: #fff;
	color: #666;
	font-size: 0.8em;
	line-height: 1.5em;
	display: inline-block;
}

sup.footnote {
	font-size: 0.625em;
	padding: 0 0.125em;
}

th.extend-cell-width {
	width: 100%;
}
@page:left {
	    counter-increment: page;
	    counter-reset: page 1;
	        content: "Page " counter(page) " of " counter(pages);
	}
        .main-content {
            font-size: 100%;
            line-height: 150%;
        }

        #clientList .client {
            width: 40%;
            display:block;
            float: left;
            margin: 2em 2em 0em 0em;
        }

        #clientList .client-name {
            color: #333;
            font-weight: bold;
            display: block;
        }

        #clientList .agency-name {
            color: #999;
            display:block;
        }

@media print {
    li, table {page-break-inside: avoid;}


    body {
    	font-size: 150%; /* 24px*/
    	color:#000 !important;
    	line-height: 150%;
    }

    .main-content {
    	margin: 0 4.5rem 4.5rem;
    }

    #costTable {
    	font-size: 1rem;
    	line-height: 1.5rem;
    }

    h1, h2{
    	color: #000 !important;
    }
    .header-border {
    	margin-top: 2.25em;
    }
    .argentic-logo {
    	margin-top: 0;
    }

    .footer .argentic-logo {
    	font-size: 2.34375em;
    	margin: .54em .8em; /* .54em is magic, I can't figure out the math */
    }
    .footer {
    	font-size: 1.2rem;
    	margin-top: 30em;
    }
	

	.footer-right dt {
		color: #ccc;
		padding-left: 1.75rem;
	}

	.footer-right dd {
		color: #fff;
	}

    .footer-center p {
    	color: #fff;
    }
    .hero {
    	margin-bottom: 4.5rem;
    }
    .hero .title {
    	width: 27rem;
    	margin-left: 4.5rem;
    }


    span.print-adjust-3em {
    	margin-right: 3em;
    }
}