/*=====================
RESET
=====================*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, 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;}
audio, canvas, video{display:inline-block; *display:inline; *zoom:1;}
audio:not([controls]){display:none;}
[hidden]{display:none;}
blockquote, q{quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after{content:'';content:none;}
ins{background-color:#ff9;color:#000;text-decoration:none;}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del{text-decoration:line-through;}
abbr[title], dfn[title]{border-bottom:1px dotted;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}
input, select{vertical-align:middle;}


/*=====================
UNIVERSAL
=====================*/

html{font-size:100%;height:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
body{background-color:#1E1E1E;height:100%;font:normal 0.9em/1.3em Bitter, Arial, Helvetica, sans-serif;color:#000;}

/* NORMALIZATION */
input, select, th, td{font-size:1em;}
b, strong{font-weight:bold;}
i, em{font-style:italic;}
a{color:#62700A;text-decoration:underline;}
a:hover{text-decoration:none;}

/* CLEARFIX */
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix {display:inline-block;}
/* Hides from IE-mac \*/
* html .clearfix{height:1%;}
.clearfix{display:block;}
/* End hide from IE-mac */

/* DISPLAY NONES */
.hide{display:none;}
.invisible{visibility:hidden;}

/* SELECTIONS (FROM 'LESS FRAMEWORK') */
::selection     {background: rgb(255,255,158);}
::-moz-selection  {background: rgb(255,255,158);}
img::selection    {background: transparent;}
img::-moz-selection {background: transparent;}
body {-webkit-tap-highlight-color: rgb(255,255,158);}


/*=====================
MAIN
=====================*/

.inner{color:#F6F6F6;margin:0 auto;width:1100px;}

h1, h2, h3{color:#F6F6F6;font:normal 92px/1em "Abril Fatface", sans-serif;letter-spacing:0.04em;margin:0 0 0.33em;text-align:center;text-shadow:0 1px 0 rgba(0,0,0,0.2);}
h2{font-size:34px;text-align:left;}
h3{font-size:22px;margin-bottom:30px;}
h1.title{margin-bottom:0.05em;}
#thumbs{margin:0 auto;width:960px;}
#thumbs a{border:5px solid #000;border-radius:2px;box-shadow:0 1px 0 rgba(0,0,0,0.2);display:block;float:left;height:200px;margin:15px;width:200px;}

figure img{border:5px solid #000;}
.img-right figure, .img-left .text{float:right;margin:0 0 0 1em;}
.img-left figure, .img-right .text{float:left;margin:0 1em 0 0;}

.img-right, .img-left{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;}
.img-right .text, .img-left .text{position:relative;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);transform:translateY(-50%);}
.top-align .text{top:auto;-webkit-transform:translateY(0%);-moz-transform:translateY(0%);transform:translateY(0%);}

.text{text-align:left;width:40%;}
.text.intro{margin:0 auto;width:49%;}
.img-vert .text{width:49%;}
.text p{margin-bottom:1em;}
.text p:last-child{margin-bottom:0;}
.instruct{font-style:italic;margin-top:3em;text-align:center;}

.video{margin-bottom:2em;text-align:center;}
.video iframe{height:auto;margin:1em auto 0;width:90%;}

.video .fluid-width-video-wrapper iframe,
.video .fluid-width-video-wrapper object,
.video .fluid-width-video-wrapper embed{height:90%;left:5%;width:90%;}


/*=====================
NO-FULLPAGE
=====================*/

.no-fullpage, .no-fullpage body{overflow:auto;}
.no-fullpage .inner{padding:3em 0;}
.no-fullpage .video h1{display:none;}

/*=====================
BACKGROUNDS
=====================*/


#section0{background:#1E1E1E url('../images/vertical_cloth.png') repeat;}
#section1{background:#1E1E1E url('../images/dark_wood.png') repeat;}
#section2{background:#1E1E1E url('../images/tweed.png') repeat;}
#section3{background:#1E1E1E url('../images/binding_dark.png') repeat;}
#section4{background:#1E1E1E url('../images/tactile_noise.png') repeat;}
#section5{background:#1E1E1E url('../images/concrete_wall.png') repeat;}
#section6{background:#1E1E1E url('../images/classy_fabric.png') repeat;}
#section7{background:#1E1E1E url('../images/txture.png') repeat;}
#section8{background:#1E1E1E url('../images/dvsup.png') repeat;}
#section9{background:#1E1E1E url('../images/micro_carbon.png') repeat;}

@media and screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (-moz-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) {
  #section0{background-image:url('../images/vertical_cloth_@2X.png');}
  #section1{background-image:url('../images/dark_wood_@2X.png');}
  #section2{background-image:url('../images/tweed_@2X.png');}
  #section3{background-image:url('../images/binding_dark_@2X.png');}
  #section4{background-image:url('../images/tactile_noise_@2X.png');}
  #section5{background-image:url('../images/concrete_wall_@2X.png');}
  #section6{background-image:url('../images/classy_fabric_@2X.png');}
  #section7{background-image:url('../images/txture_@2X.png');}
  #section8{background-image:url('../images/dvsup_@2X.png');}
  #section9{background-image:url('../images/micro_carbon_@2X.png');}
}


/*=====================
  Less Framework 4
  http://lessframework.com
  by Joni Korpi
  License: http://opensource.org/licenses/mit-license.php
=====================*/

/* Too small ----------- */
@media only screen and (max-width : 1100px) {

  .instruct{display:none;}

  #thumbs, .inner{width:100%;}

  .img-right, .img-left{height:auto !important;}

  .img-right figure, .img-left figure{float:none;margin:0 auto;text-align:center;}
  .img-left .text, .img-right .text{float:none;margin:0 auto;top:auto;-webkit-transform:translateY(0%);-moz-transform:translateY(0%);transform:translateY(0%);}

  figure, figure img, iframe{height:auto;max-width:90%;}
  .text, .img-vert .text{width:90%;}

  h2{padding-top:1em;}

  #thumbs{display:table;}
  #thumbs a{border:0;border-radius:0;box-shadow:none;display:inline;float:none;height:auto;margin:0;width:auto;}
  #thumbs img{border:5px solid #000;border-radius:2px;box-shadow:0 1px 0 rgba(0,0,0,0.2);height:200px;margin:15px;width:200px;}

}


/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {

}






/*    Tablet Layout: 768px.
    Gutters: 24px.
    Outer margins: 28px.
    Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {

}



/*    Mobile Layout: 320px.
    Gutters: 24px.
    Outer margins: 34px.
    Inherits styles from: Default Layout.
---------------------------------------------
cols    1     2      3
px      68    160    252    */

@media only screen and (max-width: 767px) {

  h1{font-size:44px;}

  #thumbs{display:none;}

}



/*    Wide Mobile Layout: 480px.
    Gutters: 24px.
    Outer margins: 22px.
    Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (min-width: 480px) and (max-width: 767px) {

}



/*    Mobile Layout: 320px. Slim only (prevents redeclaring). */
@media only screen and (max-width: 480px) {

}


/*=====================
PRINT STYLES
=====================*/

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  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; }
}
