@import url('normalize.css');
@import url('../webfonts/miso.css');

* {
   -webkit-tap-highlight-color: #00C2E3; /* PANTONE 311C */
}

a {
   color: #00A7D4; /* PANTONE 312C */
   text-decoration: none;
   -webkit-transition: color 0.3s;
   -moz-transition: color  0.3s;
   transition: color  0.3s;
}

a:visited {
   color: #0092C7; /* PANTONE 313C */
}

a:hover,
a:focus {
   color: #00C2E3; /* PANTONE 311C */
   text-decoration: underline;
   -webkit-transition-duration: 0.1s;
   -moz-transition-duration: 0.1s;
   transition-duration: 0.1s;
}

a:active {
   position: relative;
   top: 1px;
}

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  background: #fff;
}

.container {
   margin: 0 10px;
}

.visuallyhidden {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
   margin: -1px;
   overflow: hidden; /* Prevent any content overflow */
   padding: 0;
   position: absolute; /* Remove from the flow of the document */
   width: 1px;
}

/* === Cookie bar ======================================================== */

.message-cookies {
   background: #FCF8E3 url(../images/message_grid.png) center top;
}

.message .container {
   overflow: auto;
   padding: 1.5rem 0;
}

.message-cookies p {
   margin: 0;
   float: left;
}

.message-cookies .message-buttons {
   float: right;
}

.message-cookies .btn-primary {
   margin: -6px 12px;
   display: inline-block;
   padding: 6px;
   border: 1px solid #C09853;
   background: #fff;
   position: relative;
}

/* === Typography ======================================================= */

body {
    font-size: 1.0625rem;
    line-height: 1.5rem;
}

p,
ul,
ol,
dl {
    margin: 0 0 1.5rem;
}

h1,
.huge {
   font-size: 4.5rem;
   line-height: 4.5rem;
}

small,
aside
.small {
   font-size: 0.6875rem;
}

h1 {
   margin: 0;
}

.large {
   font-size: 2.8125rem;
   line-height: 3.0000rem;
   margin: 3rem 0 0;
}

h2,
.big {
   font-size: 1.75rem;
   line-height: 3rem;
   margin: 1.5rem 0 0;
}


/* === Colors ============================================================ */

body,
.header a,
.header a:visited {
   color: #444;
}

.header a:hover,
.header a:focus {
   text-decoration: none;
}

.header {
   background: url('../images/grid.png') center bottom;
   font-family: 'Miso-bold';
   font-weight: normal;
   padding: 24px 0;
   z-index: 10;
   position: relative;
}
.header.no-grid {
   background: none;
}

.header h1 {
   line-height: 72px;
   margin: 0;
   padding: 0;
   letter-spacing: 0;
   text-transform: lowercase;
   font-weight: 400;
   font-size: 40px;
   text-transform: uppercase;
   text-align: center;
}

.header h1 b {
   font-weight: 400;
   font-family: 'Miso';
}

.header nav {
   font-size: 30px;
   text-align: center;
   padding: 0;
   font-family: 'Miso-Light';
   margin: 0 -10px;
}
.header nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
}
.header nav li {
   display: inline-block;
   margin: 0 10px;
   text-transform: uppercase;
}

.header nav a.active {
   font-family: 'Miso';
}

.header a {
   -webkit-transition: 0.6s ease-in-out color;
   -moz-transition: 0.6s ease-in-out color;
   -ms-transition: 0.6s ease-in-out color;
   -o-transition: 0.6s ease-in-out color;
   transition: 0.6s ease-in-out color;
}

.header.dark a {
   color: #fff;
   text-shadow: 0 1px 0 rgba(0,0,0,.2), 0 1px 1px rgba(0,0,0,.2);
}


/* === Footer ============================================================ */

.page-footer {
   border-top: 1px solid #ddd;
   padding: 23px 0 48px;
}

.page-footer p {
   margin: 0;
}

.page-footer small {
   font-size: 1rem;
   color: #ccc;
}


.page-footer .social {
   margin: 0;
   float: right;
   color: #aaa;
}


/* === Carousel (Twitter Bootstrap) ====================================== */

.carousel {
   position: relative;
   margin-bottom: 18px;
   line-height: 1;
}

.carousel-inner {
   overflow: hidden;
   width: 100%;
   position: relative;
}

.carousel .item {
   display: none;
   position: relative;
   -webkit-transition: 0.6s ease-in-out left;
   -moz-transition: 0.6s ease-in-out left;
   -ms-transition: 0.6s ease-in-out left;
   -o-transition: 0.6s ease-in-out left;
   transition: 0.6s ease-in-out left;
}

.carousel .active,
.carousel .next,
.carousel .prev {
  display: block;
}
.carousel .active {
  left: 0;
}
.carousel .next,
.carousel .prev {
  position: absolute;
  top: 0;
  width: 100%;
}
.carousel .next {
  left: 100%;
}
.carousel .prev {
  left: -100%;
}
.carousel .next.left,
.carousel .prev.right {
  left: 0;
}
.carousel .active.left {
  left: -100%;
}
.carousel .active.right {
  left: 100%;
}
.carousel-control {
  position: absolute;
  top: 40%;
  left: 15px;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  font-size: 60px;
  font-weight: 100;
  line-height: 30px;
  color: #ffffff;
  text-align: center;
  background: #222222;
  border: 3px solid #ffffff;
  -webkit-border-radius: 23px;
  -moz-border-radius: 23px;
  border-radius: 23px;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.carousel-control.right {
  left: auto;
  right: 15px;
}
.carousel-control:hover {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.9;
  filter: alpha(opacity=90);
}
.carousel-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 15px 5px;
  background: #333333;
  background: rgba(0, 0, 0, 0.75);
}
.carousel-caption h4,
.carousel-caption p {
  color: #ffffff;
}

.carousel .item {-webkit-transition: opacity .6s; -moz-transition: opacity .6s; -ms-transition: opacity .6s; -o-transition: opacity .6s; transition: opacity .6s;}
.carousel .active.left {left:0;opacity:0;z-index:2;}
.carousel .next {left:0;opacity:1;z-index:1;}

/* === Showcase ========================================================== */
.showcase {
   margin: -144px 0 0;
}

.showcase .project.dark {
   color: #fff;
}

.showcase .project {
   padding: 144px 0 48px;
   background: #fff center top;
}

.showcase .tags {
   padding: 2px 0;
   margin: 0;
   list-style: none;
   position: relative;
}

.showcase .tags li {
   display: inline;
}
.showcase .tags .project-tag {
   display: inline-block;
   background: #404040;
   text-transform: uppercase;
   line-height: 20px;
   padding: 0 4px;
   border-radius: 2px;
   font-weight: 500;
   color: #fff;
}

.showcase .dark .project-tag {
   background: #fff;
   color: #333;
}

.showcase header {
   height: 13.5rem;
   position: relative;
}

.showcase header h1 {
   position: absolute;
   bottom: 0;
   letter-spacing: -0.05em;
}

.showcase header a {
   color: inherit;
}

.showcase p {
   margin: 0;
   height: 3rem;
}

/* === Portfolio ========================================================= */
#portfolio {
   margin: 12px -10px;
   overflow: auto;
}

#portfolio .project,
#portfolio .project span {
   display: block;
   width: 300px;
   height: 168px;
   background-position: center;
}

#portfolio .project {
   border-radius: 4px;
   overflow: hidden;
   float: left;
   margin: 12px 10px;
}

#portfolio .project span {
   background-color: #ddd;
   -webkit-transition: background-color 0.3s;
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
}

#portfolio .project:hover span,
#portfolio .project:focus span {
   background-color: transparent;
   -webkit-transition: background-color 0.1s;
}



/* === Error ============================================================= */
body.error {
   background: #DC241F; /* Pantone 485c */
   color: #fff;
}

body.error .header a,
body.error footer * {
   color: #fff;
}



b.hide {
   color:transparent;
}


/* === Project page ====================================================== */

.project-header {
   margin: -144px 0 0;
   padding: 144px 0 0;
   background: url('header@1x.png') center bottom;
}

.project-page .container {
   overflow: auto;
}

.project-description {
   margin: 24px 0;
}

.project-page a {
   color: inherit;
   font-weight: bold;
}

.project-gallery img {
   margin: 12px 0;
   width: 100%;
   height: auto;
}

.project-gallery {
   margin: 12px 0;
}

.project-page h2 {
   font-size: 1.0625rem;
   line-height: 1.5rem;
   margin: 3rem 0 0;
   text-transform: uppercase;
   letter-spacing: 2px;
}

.project-page .project-visit {
   padding: 11px;
   margin: 24px 0;
   border-top: 1px solid #444;
   border-bottom: 1px solid #444;
   display: block;
   text-align: center;
}

#tweets {
   background: #EBF9FF url('../images/grid_transparent.png') center top;
   border-top: 1px solid #EBF9FF;
   margin: 23px 0 24px;
   padding: 24px 0;
}

#tweets .tweet-text {
   margin: 0;
}


/* === Blog post ===---=================================================== */

article code,
article pre {
   background-color: #ddd;
   font-family: Menlo, 'Lucida Console', Consolas, monospace;
   font-size: 15px;
}

article code {
   padding: 2px 4px;
}

article pre {
   padding: 12px;
   border-radius: 4px;
}

article pre code {
   padding: 0;
   background: none;
}

@media screen and (min-width: 660px) {
   .header h1 {
      float: left;
      text-align: left;
   }

   .header nav {
      padding: 24px 0;
      text-align: right;
   }

   .container {
      width: 620px;
      margin-left: auto;
     margin-right: auto;
      padding: 0 10px;
   }


   .showcase {
      margin-top: -120px;
   }

   .showcase .project {
      padding-top: 120px;
   }

   .project-header {
      margin: -120px 0 0;
      padding: 120px 0 0;
   }

   .project-description {
      width: 300px;
      float: left;
   }

   .project-gallery {
      overflow: auto;
      width: 320px;
      margin: 12px -20px 12px 310px;
   }

   .project-gallery img {
      width: 300px;
      margin: 12px 10px;
      float: left;
   }
}

@media screen and (min-width: 980px) {
   .container {
      width: 940px;
   }

   .project-gallery {
      width: 640px;
   }

   article {
      margin: 0 160px;
   }

   article pre {
      margin: 1em -80px 1em;
   }
}

.raster {
   background: url('../images/grid_repeat.png');
}