/* HTML5 Boilerplate  */




/*
colors!

cb black: #231F20


 some strange kind of green that Dave found:
1db9a0

an awesome purple-ish color
9a5e6c


this gray is so boring
cccccc


These are some colors for reals:
- blue: 1b3641
- red: d33f27


 these are temporary colors, don't user them ever again:
  - Orange: d33f27
  - Blue: 1b3641


Want to find awesome random colors?
http://twitter.com/hexcolors


Here are some patterns
#design { background: url(../images/patterns/dust.png); }
#development { background: url(../images/patterns/low_contrast_linen.png); }
#responsive { background: url(../images/patterns/light_noise_diagonal.png); }
#contact { background: url(../images/patterns/tiny_grid.png); } 


*/
/*
@font-face {
    font-family: 'ARSMaquetteProBlackRegular';
    src: url('arsmaquettepro/arsmaquettepro-black-webfont.eot');
    src: url('arsmaquettepro/arsmaquettepro-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('arsmaquettepro/arsmaquettepro-black-webfont.woff') format('woff'),
         url('arsmaquettepro/arsmaquettepro-black-webfont.ttf') format('truetype'),
         url('arsmaquettepro/arsmaquettepro-black-webfont.svg#ARSMaquetteProBlackRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
*/
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: "futura-pt", 'Arial Bold', 'Arial-bold', sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; font-family: "futura-pt", 'Arial Bold', 'Arial-bold', sans-serif;  }

/* ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; } */

::-webkit-input-placeholder { color: #fff; }
  :-moz-placeholder { color: #fff;}

a { color: #d33f27; text-decoration: none;  }
a:visited { color: #d33f27; }
a:hover { color: #000; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }

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

label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid {  }
input:invalid, textarea:invalid { background-color: #f0dddd; }

table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }

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


/* global */

h1 { text-align: center; font-size: 40px; margin: 0; }
h2 { text-align: center; font-size: 20px; }
h3 { text-align: center; font-size: 18px; }
p {  }

.fixed { left: 0; top: 0; position: fixed; z-index: 0; }
.orange-stripe { background: url(../images/patterns/orange-stripe.jpg); }
.grayline { width: 222px; height: 1px; border-radius: 1px; border-top: 1px solid #ddd; margin: 5px auto; background: #ccc; }
.logo-bg { background: #000 url(../images/big-logo.png) 50% 50% no-repeat; background-size: contain; }
.double-walter-white-lines { width: 100%; height: 11px; background: url(../images/double_white.jpg) 0 0 repeat-x; padding: 0 0 90px 0; }
  .bottom { margin: 90px 0 0; padding: 0; }

/* buttons */
.circlebutton { width: 32px; height: 32px; background: #cccccc; border-radius: 16px; color: #fff; display: inline-block; text-align: center; line-height: 36px; }
a.circlebutton:hover { color: #fff; background: #1db9a0; }


/* navigation */

#navigation { text-align: right; height: 50px; color: #131313; font-size: 11px; padding: 3% 0 0 0; position: fixed; width: 100%; top: 0; line-height: 40px; z-index: 700;  }
  #navigation #nav_logo { float: left; display: inline; width: 32px; height: 32px; margin: 0 0 0 3%; }
    #navigation #nav_logo img { vertical-align: top; }
  #navigation #top_nav { margin: 0 5px 0 0;}
  #navigation a { color: #131313; text-decoration: none; text-shadow: 0 1px 1px #fff; }
     #navigation a.circlebutton { background: #000; color: #fff; margin: 0 5px 0 0;  }
        #navigation a.circlebutton:hover { background: #fff; color: #231F20; }  
    #navigation a#contact-email { margin: 0 3% 0 0;   }
    
  #to-the-top-top { display: none; }
  

/* top and booms */  

#top { padding: 0; position: fixed; background-attachment: fixed; z-index: 0; }
h1#logo { margin: 0; padding: 0; }
  #front-stripes { z-index: 15; }
  #logo { z-index: 200; width: 100%; height: 100%; }
  #the_logo { font-family: sans-serif; width: 60%; height: 60%; top: 50px; left: 50%; margin: 0 0 0 -30%;  background: url(../images/big-logo.png) 50% 50% no-repeat; background-size: contain; z-index: 301; position: fixed;  }


#top.fixed { top: 0; }


#this-is-the-down-arrow { opacity: 1;
  position: fixed; z-index: 205; bottom: 8%; left: 50%; margin-left: -16px; height: 59px; width: 31px; background: url(../images/scroll.png) 50% 100% no-repeat; 
  animation: arrowd 2s infinite;
    -moz-animation: arrowd 2s infinite; /* Firefox */
    -webkit-animation: arrowd 2s infinite; /* Safari and Chrome */
    -o-animation: arrowd 2s infinite; /* Opera */  
}

  @keyframes arrowd
  {
  0% {opacity: 1;}
  50% {opacity: .5;}
  100% {opacity: 1;}
  }
  
  @-moz-keyframes arrowd
  {
  0% {opacity: 1;}
  50% {opacity: .5;}
  100% {opacity: 1;}
  }
  
  @-webkit-keyframes arrowd
  {
  0% {opacity: 1;}
  50% {opacity: .5;}
  100% {opacity: 1;}
  }
  
  @-o-keyframes arrowd
  {
  0% {opacity: 1;}
  50% {opacity: .5;}
  100% {opacity: 1;}
  }


#booms { width: 100%; height: 100%; }
/* -- these are the booms, here they come */
  .zero { background: url(../images/texture.gif); }
  .one { background-image: url(../images/explode/1.jpg); }
  .two { background-image: url(../images/explode/2.jpg); }
  .three { background-image: url(../images/explode/3.jpg); }
  .four { background-image: url(../images/explode/4.jpg); }
  .five { background-image: url(../images/explode/5.jpg); }
  .six { background-image: url(../images/explode/6.jpg); }
  .seven { background-image: url(../images/explode/7.jpg); }
  .eight { background-image: url(../images/explode/8.jpg); }
  .nine { background-image: url(../images/explode/9.jpg); }
  .ten { background-image: url(../images/explode/10.jpg); }
  .eleven { background-image: url(../images/explode/11.jpg); }
  .twelve { background-image: url(../images/explode/12.jpg); }
  .thirteen { background-image: url(../images/explode/13.jpg); }
  .fourteen { background-image: url(../images/explode/14.jpg); }
  .fifteen { background-image: url(../images/explode/15.jpg); }
  .sixteen { background-image: url(../images/explode/16.jpg); }
  .seventeen { background-image: url(../images/explode/17.jpg); }
  .eighteen { background-image: url(../images/explode/18.jpg); }


.aboom { position: absolute; left: 0; top: 0;  background-position: 50% 50%; background-attachment: fixed; background-size: cover; width: 100%; height: 100%;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  }
  .aboom div { background-size: cover; width: 100%; height: 20% }


/* content */

#all-the-content { position: relative;  background: #fff url(../images/patterns/texture.png); z-index: 405; }

.the-stripes { background: #fff url(../images/patterns/texture.png); width: 100%; height: 100%; }

.the-contents {  width: 100%; padding: 10px 0; margin: 0 auto;  }
  .oh-heres-some-content { width: 1020px; margin: 0 auto; padding: 40px 0; }

  .the-quotes { background: #000; padding: 20px 0; }
  
  .the-box { background: #fff url(../images/patterns/texture.png);  }
  
h1#small-collective-boom-logo { 
    font-size: 14px; 
    text-indent: -9999px; 
    background: url(../images/small-logo.png) 50% 50% no-repeat; height: 27px; width: 273px; overflow: hidden; float: left; display: inline; margin: 0; }
    
/* --- individual content sections */
  #quote1, #quote2, #quote3 { text-align: center; }
  #quote1 { opacity: 0; position: relative; z-index: 202; padding: 109px 0; background: #000;}
    #quote1.logo-bg { background: #000 url(../images/big-logo.png) 50% 50% no-repeat; background-size: 60%; }
    #quote1.fixed { position: fixed; }
    #quote1 h1, #quote2 h1, #quote3 h1 { color: #fff; }
    #quote1 p, #quote2 p, #quote3 p { font-weight: normal; margin: 0; font-size: 25px; line-height: 30px; color: #fff; padding: 0 5%; }
    #quote1 p span, #quote3 p span { font-weight: bold; color: #d33f27; }
    
    
  #about-us { text-align: left; background: url(../images/mushroomcloud.png) 100% 100% no-repeat; background-size: cover; padding: 0; }
    #about-us .oh-heres-some-content { padding: 0; }
    #about-us h1 { color: #d33f27; font-size: 44px; font-weight: bold; text-align: left; line-height: .8em; text-transform: uppercase; }
    #about-us p { font-weight: normal; margin: 15px 0 0; font-size: 18px; color: #000; line-height: 22px; }
    #about-us a { font-weight: bold; }
    
    #about-us-content { padding: 120px 40px; width: 400px; background: rgba(255,255,255,.7); margin: 0 0 0 10%; }
    
  #quote2 {  }
    #quote2 p span { font-weight: bold; }
    #quote2 h3 { margin: 8px 0 0; font-weight: bold; color: #d33f27; font-size: 22px;  }
    
  #info { background: url(../images/pillars-bg.jpg) 50% 50% no-repeat; background-size: cover; padding: 0; overflow: hidden; }
    #info .on { display: block; }
    #info .off { display: none; }
    #info .square-box { width: 50%; height: 50%; float: left; }
    #info .info-text { height: 100%; position: relative; }
      #info .info-text h1 { font-size: 45px; text-align: center; position: absolute; top: 50%; left: 0; width: 100%; margin-top: -30px; text-transform: uppercase; color: #fff; }
    #info .info-more-info { background: rgba(0,0,0,.8); height: 100%; }
      #info .info-more-info h1 { font-size: 35px; color: #fff; text-align: left; margin: 0; padding: 10% 10% 0; }
      #info .info-more-info p { font-size: 16px; color: #fff; text-align: left; margin: 0; padding: 10px 10% 10%; }
      
    #info-together, #info-flourish { padding-bottom: 1px; }
    #info-progress .info-text, #info-flourish .info-text,
      #info-progress .info-more-info, #info-flourish .info-more-info { border-right: 1px solid #fff; }
    #info-together .info-text, #info-flourish .info-text,
      #info-together .info-more-info, #info-flourish .info-more-info { border-top: 1px solid #fff; }
      

    
    
    
  #contact-us { background: url(../images/brain.png) 50% 50% no-repeat; padding: 0; background-size: contain;  }
    #contact-us .oh-heres-some-content { padding: 40px 0 0; }
    #contact-us h1 { font-size: 50px; text-transform: uppercase; text-shadow: 0 5px 2px #fff; line-height: 42px; padding: 60px 0 50px; }
    #contact-us .grayline { margin: 35px auto 5px; }
  
  /* contact form */
    #contact { background: rgba(255,255,255,.9); width: 290px; text-align: center; border: 1px solid #000; border-bottom: 0 none; margin: 0 auto; padding: 25px 0 50px; }
    form#contact-us-or-we-will-contact-you { }
      form#contact-us-or-we-will-contact-you input,
        form#contact-us-or-we-will-contact-you textarea { padding: 6px 5px 6px 22px; border: 1px solid #bbb; margin: 5px 0; color: #fff; font-size: 11px; width: 180px; text-align: left; width: 200px;  }
/*      form#contact-us-or-we-will-contact-you textarea { margin: 3px 0; } */
      form#contact-us-or-we-will-contact-you input[type=submit] { padding: 6px 14px 6px 13px; background: #d33f27; font-size: 14px; box-shadow: 0 5px 0 #f0bcb4; font-weight: bold; text-align: center; width: 230px; text-transform: uppercase; }  
        form#contact-us-or-we-will-contact-you input[type=submit]:active { box-shadow: 0 3px 0 #f0bcb4; margin: 7px 0 3px; }

    form#contact-us-or-we-will-contact-you label.textarea-label { height: 100%; margin-top: 5px; }
    
    .your-business-name { background: #ccc url(../images/form-labels/business.png) 5px 50% no-repeat; }
    .your-name { background: #ccc url(../images/form-labels/contact.png) 5px 50% no-repeat; }
    .your-phone { background: #ccc url(../images/form-labels/phone.png) 5px 50% no-repeat; }
    .your-email { background: #ccc url(../images/form-labels/email.png) 5px 50% no-repeat; }
    .your-message { background: #ccc url(../images/form-labels/message.png) 5px 5px no-repeat; }
    
/*    #submitting { display: none; background: url(../images/submit-explode.gif) 50% 50% no-repeat; z-index: 400; position: relative; } */
    
    
      

  
  
/* footer */  

#footer {   background: #000; text-align: center; }
  #footer p { text-align: center; padding: 25px 0 30px; font-size: 10px; margin: 0 auto; color: #fff; background: #000; font-family: arial; }
  #footer a, #footer span { color: #fff; margin: 0 7px; }




/* responsive */
/* narrow */
@media only screen and (max-width: 640px) {
  #contact-us { background-size: cover;  }
  
  #about-us-content { margin: 0 auto; }

}

/* cell phone */
@media only screen and (max-width: 480px) {

  #booms { width: 100%; height: 700px; background: url(../images/explode/6.jpg) 50% 50% no-repeat; }
  
  #quote1 { display: none; }

  #about-us-content { margin: 0 auto; width: 100%; padding: 10px 0; }
    #about-us-content h1, 
    #about-us-content p { padding: 0 10px; }

}

/* cell phone */
@media only screen and (max-width: 400px) {
  
  #info .info-text h1 { font-size: 20px; }
  
  #footer p {  }

}


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

  #quote1 { padding: 150px 0; }
  

}

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.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; }

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
  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: ""; } 
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } 
  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; }
}