/* I'm too lazy to clean this up, sorry internet. */

@import url("../fonts/fonts.css");
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab|Pathway+Gothic+One|Radley:400italic|Open+Sans+Condensed:300,700|Lora|Open+Sans);

/* Reset*/

html, body { height: 100%; }
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
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%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
::-moz-selection {color: #fff; background: #000; }
::selection { color: #fff; background: #000; }
em { font-style:italic; }

/* General */

.spacer { height:140px; }
body, html { margin:0; padding:0; font-family:'Open Sans'; background-color:#fff;background-repeat:no-repeat; background-size:cover; background-attachment: fixed; }
a, a:visited { color:#000; text-decoration: none; }
a:hover { color:#5b5b5b; }
.amp { font-family:'Radley'; font-style:italic; }
.center { margin:0 auto; text-align:center; display:block; }
p { margin-bottom:10px; line-height:1.5em; }
p a, p a:visited { background:#000; color:#fff; padding:0px 4px; }
p a:hover { color:#000; background:#f0f0f0;}
.lb-caption p { font-weight: normal; margin: 0; line-height: 1.3em; }
.lb-caption a, .lb-caption a:visited { font-weight:normal; line-height:1.6em; color:#fff; }
.row { width: 100%; margin-left: auto; margin-right: auto; margin-top: 0; margin-bottom: 0; max-width: 62.5rem; }
.row:before, .row:after { content: " "; display: table; }
.row:after { clear: both; }
.row.collapse > .column,  .row.collapse > .columns { padding-left: 0; padding-right: 0; }
.row.collapse .row { margin-left: 0; margin-right: 0; }
.row .row { width: auto; margin-left: -0.9375rem; margin-right: -0.9375rem; margin-top: 0; margin-bottom: 0; max-width: none; }
.row .row:before, .row .row:after { content: " "; display: table; }
.row .row:after { clear: both; }
.row .row.collapse { width: auto; margin: 0; max-width: none; }
.row .row.collapse:before, .row .row.collapse:after { content: " "; display: table; }
.row .row.collapse:after { clear: both; }
.column, .columns { padding-left: 0.9375rem; padding-right: 0.9375rem; width: 100%; float: left; }
 [class*="column"] + [class*="column"]:last-child {
 float: right;
}
 [class*="column"] + [class*="column"].end {
 float: left;
}

/* Header */

header.header { padding: 10px; position:fixed; width:100%; height: 145px; z-index: 999; background-image: url(../img/header.png); background-repeat: repeat-x; text-align: center; background-position: bottom; color: #fff; }
header ul { margin:0; font-weight:bold; }
header ul li { list-style-type: none; margin: 0; line-height: 3em; top: 0; display: block; vertical-align: top; font-family:'open sans condensed'; text-transform:uppercase; font-size:1em; letter-spacing: 1px; }

/* Splash it like it's 1998 */

.front h1 { font-family: 'wc_mano_negra_btabold'; font-size: 3em; margin: 0; font-weight: normal; text-transform:uppercase; background:none; }
.front h2 { font-family: 'open sans condensed'; font-weight: normal; text-transform: uppercase; letter-spacing: 2px; margin-top: -5px; }
#splash { background:#000; }
.front a, .front a:visited, .front { color:#fff; }
.splash { position:absolute; z-index:500; height:100%; min-height:500px; width:100%; background-image:url(../img/splash.png); background-repeat:no-repeat; background-position:center center; background-size:contain; }
.welcome { display: block; position: fixed !important; z-index: 12 !important; width: 100% !important; height: 40% !important; top: 0; }
.adapt { position: absolute !important; }
.adapt > img { width: 100%; height: 100%; }
.front { height: 100%; left: 0; overflow: hidden; width: 100%; z-index: 100; }
.front .sequential { left: 0; }
.front > div { height: 100%; min-height: 500px; position: absolute; top: 0; width: 33.3333%; z-index: 1; overflow: hidden; }
.front > div > .block { float: left; position: absolute; width: 400px; height: 400px; left: calc(50% - 200px); top: calc(50% - 150px); z-index: 99999; }
.front > div > .block > span { display: block; height: 50px; left: 0; position: absolute; text-indent: -9999px; top: 181px; width: 303px; }
.blockbg { float: left; width: 100%; height: 100%; }
#sequential { background-image:url('../img/seq.png'); background-repeat:no-repeat; background-position: center center; background-size:contain; }
#illustration { background-image:url('../img/illu.png'); background-repeat:no-repeat; background-position: center center; background-size:contain; }
#web { background-image:url('../img/des.png'); background-repeat:no-repeat; background-position: center center; background-size:contain; }
.front > div > img { position: absolute; z-index: 1; min-width:100%; min-height:100%; }
.front > div > span.mask { background-repeat:repeat; background-image:url(../img/mask.png); background-color:rgb(20,20,20); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 99; opacity:0.3; }
.front .illustration { left: 33.3333%; }
.front .web { left: 66.6666%; }
.front hgroup { position: relative; z-index:700; top: 47%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); line-height:100%; text-align:center; }
.logo { display:none; float:left; height:60px; }
.home a:hover { text-shadow:none; }

/* Portfolio */

#projects { margin: 0 auto; }
#container { margin: 0 auto; }
.item { float: left; margin: 0px; margin-bottom:10px; overflow:hidden; width:215px; height:140px; background:#000; }
.item img { max-width:100%; }
.projects { width:290px; height:100px; }
#filters { text-align:center; margin-bottom: 15px; }
.item:hover { background-image:url('../img/zoom.png'); background-position:center center; background-size:35px 35px; background-repeat:no-repeat; filter: url(../filters.svg#grayscale); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ -webkit-animation: grayscale-anim .3s ease-in; cursor:pointer; }
.item.projects { background-image:none; }
.item:hover img { opacity:.2; }
.item .title { position: absolute; width: 100%; text-align: center; display: none; height: 100%; top: 0; left: 0; }
.item:hover .title { display:table; z-index:11; }
.item .hgroup { margin: auto; display: table-cell; vertical-align: middle; padding: 0 10%; height: 100%; color: #fff; margin: 0; }
.item h1 { color: #fff; font-size: 20px; line-height: 20px; font-family: 'open sans condensed'; text-transform: uppercase; background:none; letter-spacing: 1px; margin:0; }
.item h2 { font-size:12px; color:#b9b9b9; }
.item h3 { font-size:.7em; color:#b9b9b9; }
.item h4 { font-size:12px; color:#e2e2e2; font-style:italic; }
span.note { display:block; }
span.year::before { content:', '; }
.info { font-family:'Roboto Slab'; text-align: center; margin:10px; line-height:1.2em;}
.scope {font-family: 'Roboto Slab';
padding: 10px 10px;
font-size: 1em;}

/* About */

.container { border-width: 30px; -webkit-border-image:url(../img/content.png) 30 repeat stretch; -moz-border-image:url(../img/content.png) 30 repeat stretch; border-image:url(../img/content.png) 30 repeat stretch; padding: 0px; font-size:.9em; max-width: 62.5rem; margin: 0 auto; }
.content { background:#fff; }
.content img { max-width:100%; }
section.project { text-align:center; }
.about h1 { font-family: 'open sans condensed'; font-size: 3em; margin: 0; font-weight: normal; text-transform:uppercase; }
#portfolio { margin:0 auto; }
h1 { font-family: 'Roboto Slab'; font-weight: normal; text-transform: uppercase; letter-spacing: 2px; text-align:center; padding: 0px 15px; background-image: url(../img/headingb.png); background-repeat: no-repeat; background-size: 100% 50px; line-height: 50px; font-size: 1.2em; margin: 0px 0px 10px -14px; color: #fff; }
.row { line-height:1.2em; }
.row h2 { font-family: 'Roboto Slab'; font-weight: normal; text-transform: uppercase; letter-spacing: 0; padding: 0px 15px; background-image: url(../img/heading.png); background-repeat: no-repeat; background-size: 100% 50px; line-height: 50px; font-size: 1.2em; margin: 0px 0px 10px -14px; color: #000; }
button { padding: 0px 15px; background-image: url(../img/heading.png); background-repeat: no-repeat; background-size: 100% 50px; border: 0 none; line-height: 50px; background-color: transparent; font-family: 'Roboto Slab'; font-size:1em; cursor:pointer; }
button.is-checked { color:#fff; background-image: url(../img/headingb.png); }
button:focus { outline: 0 none; }
.row h3 { font-weight: normal; margin-bottom: 10px; color: #939393; font-size: .9em; }
.about span { font-style:italic; }

/* Services */

.row ul { margin-bottom:10px; line-height:1.5em; }

/* Responsive */

@media only screen and (max-width : 1000px) {
.front h1 { font-size:2.5em; }
.front h2 { font-size:1.2em; }
.mark { display:none; }
.front > div { position: relative; top: 0; min-height:250px; height: 250px; width:100%; z-index: 1; overflow: hidden; }
.front .illustration { left:0; }
.front .web { left:0; }
.front { left: 0; /* min-width: 960px; */ overflow: hidden; width: 100%; z-index: 100; }
header ul li { padding: 0 5px 0 5px; line-height:30px; }
.front > div > .block { top: calc(50% - 200px); }
header.header { height:155px; position:relative; padding:0; }
.logo { display:inline; float:none; }
.splash { display:none; }
.about section { padding-top:0px; }
.spacer { height:0px; }
}

 @media only screen {
.column,  .columns { position: relative; padding-left: 0.9375rem; padding-right: 0.9375rem; float: left; }
.small-1 { width: 8.33333%; }
.small-2 { width: 16.66667%; }
.small-3 { width: 25%; }
.small-4 { width: 33.33333%; }
.small-5 { width: 41.66667%; }
.small-6 { width: 50%; }
.small-7 { width: 58.33333%; }
.small-8 { width: 66.66667%; }
.small-9 { width: 75%; }
.small-10 { width: 83.33333%; }
.small-11 { width: 91.66667%; }
.small-12 { width: 100%; }
}
@media only screen and (min-width: 64.063em) {
.column,  .columns { position: relative; padding-left: 0.9375rem; padding-right: 0.9375rem; float: left; }
.large-1 { width: 8.33333%; }
.large-2 { width: 16.66667%; }
.large-3 { width: 25%; }
.large-4 { width: 33.33333%; }
.large-5 { width: 41.66667%; }
.large-6 { width: 50%; }
.large-7 { width: 58.33333%; }
.large-8 { width: 66.66667%; }
.large-9 { width: 75%; }
.large-10 { width: 83.33333%; }
.large-11 { width: 91.66667%; }
.large-12 { width: 100%; }
}
.row { *zoom:1
}
.row:after { content:""; display:table; clear:both }
.column { margin-bottom:1.5rem }
@media (min-width: 40rem) {
.column {
float:left;
margin:0;
padding-left:1rem;
padding-right:1rem
}
.column.full {
width:100%
}
.column.two-thirds {
width:66.7%
}
.column.half {
width:50%
}
.column.third {
width:33.3%
}
.column.fourth {
width:24.95%
}
.column.flow-opposite {
float:right
}
}