/* Import HTML5 boilerplate */
@import url("normalize.css");

/* Import Fancybox CSS */
@import url("jquery.fancybox-1.3.4.css");

/* Fonts */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700);

/* General */
html {
	height: 100%;
}
body {
  font-family: "Open Sans", "Helvetica", sans-serif;
  font-size: 12px;
  line-height: 180%;
  margin: 0;
  padding: 0;
  background: #fff;
  color: #666;
}
  .black {
    background-color: #111;
    color: #ccc;
  }
p a, p a:visited, .black p a, .black p a:visited {
  color: #3B6FB0;
  text-decoration: none;
  font-weight: 600;
}
  p a:hover {
    color: #234775;
  }
    .black p a:hover {
      color: #517ED5;
    }
  p.big {
    font-size: 13px;
  }
a, a:visited, a:hover {
  color: #333;
}
  .black a, .black a:visited, .black a:hover {
    color: #fff;
  }
  h1 a, h1 a:visited, h2 a, h2 a:visited, h3 a, h3 a:visited, h4 a, h4 a:visited {
    color: inherit;
  }
  h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
    color: #333;
  }

/* Header, navigation, logo */
header {
  text-align: center;
  line-height: 100px;
  border-bottom: 1px dotted rgba(0,0,0,0.15);
}
  #slideshow header, .black header {
    position: relative;
    z-index: 10;
    border-bottom: 1px dotted rgba(255,255,255,0.15);
  }
  header nav {
    display: inline-block;
  }
    header nav ul {
    }
      header nav li {
        display: inline-block;
        line-height: 24px;
      }
        header nav a {
          display: inline-block;
          padding: 0 5px;
          margin: 0 20px;
          border: 1px solid rgba(255,255,255,0);
          font-weight: bold;
          text-decoration: none;
          text-transform: uppercase;
          -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
          -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s;
        }
          #slideshow header nav a {
            text-shadow: 0 1px 3px #000;
            color: #fff;
          }
            #slideshow header nav a:hover {
              border-color: rgba(255,255,255,0.15);
            }
          #content header nav a {
            color: #333;
          }
            .black #content header nav a {
              color: #fff;
            }
            #content header nav a:hover, #content header nav a.selected {
              border-color: rgba(0,0,0,0.15);
            }
              .black #content header nav a:hover {
                border-color: rgba(255,255,255,0.15);
              }
            
  header h1 {
    display: inline-block;
    vertical-align: middle;
    margin: 0 30px;
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;
  }
    #slideshow header h1 {
      text-shadow: 0 1px 3px #000;
    }
    header h1 a {
      text-decoration: none;
    }
      #slideshow header h1 a {
        color: #fff;
      }
      #content header h1 a {
        color: #333;
      }
        .black #content header h1 a {
          color: #fff;
        }

/* Slideshow */
#slideshow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  overflow: hidden;
  z-index: 5;
  background: url('../img/slideshow_background.png') repeat;
  -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.6); -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.6); box-shadow: 0px 2px 4px rgba(0,0,0,0.6);
}
  .slideshow_image {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: 6;
  }
  .slideshow_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 7;
    background-color: rgba(0,0,0,0.5);
  }
  .slide_info {
    position: absolute;
    bottom: 10%;
    width: 100%;
    margin: 0 0 170px 0;
    z-index: 10;
    text-align: center;
  }
    .slide_info h2 {
      color: #fff;
      width: 930px;
      margin: 0 auto;
      font-size: 30px;
      line-height: 70px;
      font-weight: 300;
      text-shadow: 0 1px 3px #000;
      text-transform: uppercase;
    }
    .slide_info p {
      width: 930px;
      margin: 0 auto;
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      text-shadow: 0 1px 3px #000;
      line-height: 20px;
    }
  .slide_info_hover {
    position: absolute;
    bottom: 170px;
    display: inline-block;
    opacity: 0;
    z-index: 10;
    color: #fff;
    background-color: rgba(0,0,0,0.4);
    padding: 5px 15px;
    font-size: 11px;
    font-weight: 700;
  }
  .slides {
    overflow: hidden;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 170px;
    line-height: 170px;
    background: url('../img/slides.png') repeat-x;
    z-index: 10;
  }
    .slides ul {
      position: relative;
      left: 0;
      padding: 0 15px;
      margin: 0 auto;
      width: 9999px;
      display: block;
    }
      .slides li {
        position: relative;
        line-height: 0;
        margin: 0 15px;
        display: inline-block;
        -moz-box-shadow: 0 1px 4px #000; -webkit-box-shadow: 0 1px 4px #000; box-shadow: 0 1px 4px #000;
        -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;    
      }
        .slides li:hover {
          -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1);
        }
        .slides li img {
          width: 150px;
          height: 110px;
        }
        .slides li[data-type="video"] a:after {
          content: '';
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: url('../img/video.png') center no-repeat;
        }
        .slides .progress {
          display: block;
          width: 0%;
          height: 3px;
          position: absolute;
          bottom: 0;
          background-color: rgba(255,255,255,0.15);
        }
#content {
  position: relative;
  z-index: 1;
}

/* Typography */
h1, h2, h3, h4 {
  font-weight: 700;
  color: #333;
}
  .black h1, .black h2, .black h3, .black h4 {
    color: #fff;
  }
  h2 {
    font-size: 18px;
    margin-bottom: 20px;
  }
  h3 {
    font-size: 14px;
    margin-bottom: 5px;
    line-height: 30px;
  }
    h3.spaced {
      margin-bottom: 15px;
    }
  h4 {
    color: #999;
    text-transform: uppercase;
    font-size: 11px;
    margin-bottom: 10px;
  }
    .black h4 {
      color: #999;
    }

/* Grid */
.container, section {
  width: 960px;
  padding: 30px 0;
  margin: 0 auto;
}
.full, .one_quarter, .one_third, .one_half, .two_thirds {
  float: left;
  margin: 20px 15px;
}
  .full {
    width: 930px;
  }
  .one_quarter {
    width: 210px;
  }
  .one_third {
    width: 290px;
  }
  .one_half {
    width: 450px;
  }
    .one_half .one_quarter.first {
      margin-left: 0;
    }
    .one_half .one_quarter.last {
      margin-right: 0;
    }
    .one_half .one_quarter.top {
      margin-top: 0;
    }
  .two_thirds {
    width: 610px;
  }

/* Common elements */
hr {
  display: block;
  background: url('../img/hr.png') top center no-repeat;
  height: 10px;
  margin: 5px 0 0 0;
  border: none;
}
  .black hr {
    background: url('../img/hr_black.png') top center no-repeat;
  }

aside {
  text-align: center;
  font-style: italic;
}
  aside img {
    margin-bottom: 10px;
  }
  aside.left {
    float: left;
    margin: 5px 20px 20px 0;
  }
  aside.right {
    float: right;
    margin: 5px 0 20px 20px;
  }

/* Content styles */
.title {
  line-height: 90px;
  border-bottom: 1px dotted rgba(0,0,0,0.15);
}
  .black .title {
    border-bottom: 1px dotted rgba(255,255,255,0.15);
  }
  .title h2 {
    font-weight: 300;
    font-size: 35px;
    text-transform: uppercase;
    margin-top: 0;
    margin-bottom: 0;
  }
  .title nav {
    margin-top: 0;
    margin-bottom: 0;
    text-align: right;
  }
    .title nav li {
      display: inline-block;
      margin-right: 10px;
    }
      .title nav a {
        display: inline-block;
        line-height: 22px;
        color: #666;
        padding: 0 10px;
        font-size: 11px;
        text-transform: uppercase;
        border: 1px solid transparent;
        -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
      }
        .title nav a:hover, .title nav .selected {
          border: 1px solid #eaeaea;
          color: #333;
        }
          .black .title nav a:hover, .black .title nav .selected {
            color: #fff;
            border: 1px solid #333;
          }

.map {
  display: block;
  height: 300px;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5); box-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.contact {
}
  .contact h4 {
    font-size: 9px;
    margin-bottom: 5px;
  }
  .contact p {
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
  }
  .contact hr {
    background: none;
    border-top: 1px dotted #ccc;
    margin: 15px 0;
    height: 1px;
  }
    .black .contact hr {
      border-top: 1px dotted #333;
    }

form {
}
  label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 8px;
  }
  textarea {
    font-family: 'Open Sans', 'Helvetica', sans-serif;
    font-size: 11px;
    background: transparent;
    border: none;
    width: 100%;
    height: 100px;
    line-height: 16px;
    color: inherit;
  }
  input, .textarea {
    font-family: 'Open Sans', 'Helvetica', sans-serif;
    font-size: 11px;
    border: 1px solid #eaeaea;
    background-color: transparent;
    color: inherit;
    margin-bottom: 20px;
  }
    .black input, .black .textarea {
      border: 1px solid #262626;
    }
    input {
      width: 100%;
      height: 30px;
      line-height: 30px;
      padding: 0 10px;
      -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
      -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
    }
      input[type="submit"] {
        width: auto;
        font-weight: 700;
        display: inline-block;
        padding: 0 20px;
        color: #fff;
        background: url('../img/button.png') repeat-x;
        border: none;
      }
    .textarea {
      padding: 10px;
      -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
    }
  .status {
    display: inline-block;
    margin-left: 20px;
    font-size: 11px;
  }
  form .one_quarter {
    margin-top: 0;
    margin-bottom: 0;
  }

.list {
}
  .list li {
    background: url("../img/list.png") no-repeat left center;
    padding-left: 15px;
    line-height: 25px;
  }

.tabs {
}
  .tabs ul {
  }
    .tabs li {
      display: block;
      float: left;
      border: 1px solid #eaeaea;
      border-width: 1px 0 1px 1px;
      margin-bottom: -1px;
      -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
    }
      .black .tabs li {
        border: 1px solid #262626;
      }
      .tabs li:last-child {
        border-right-width: 1px;
      }
      .tabs li:hover {
        color: #333;
      }
        .black .tabs li:hover {
          color: #fff;
        }
      .tabs li.selected {
        color: #333;
        border-bottom: 1px solid #fff;
      }
        .black .tabs li.selected {
          color: #fff;
          border-bottom: 1px solid #111;
        }
      .tabs li a {
        height: 30px;
        line-height: 30px;
        padding: 0 15px;
      }
  .tab {
    border: 1px solid #eaeaea;
    padding: 10px 15px;
    display: none;
    -webkit-border-radius: 0 3px 3px 3px; -moz-border-radius: 0 3px 3px 3px; border-radius: 0 3px 3px 3px;
  }
    .black .tab {
      border: 1px solid #262626;
    }
    .tab.selected {
      display: block;
    }

.testimonials {
}
  .testimonials blockquote {
    margin: 0;
    padding-left : 35px;
    font-family: 'Georgia', serif;
    font-size: 13px;
    font-style: italic;
    background: url('../img/quote_small.png') 0px 5px no-repeat;
  }
    .black .testimonials blockquote {
      background: url('../img/quote_small_black.png') 0px 5px no-repeat;
    }
  .testimonials .author {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    display: block;
    margin: 10px 0 0 35px;
  }

.quote {
}
  .quote blockquote {
    margin: 0 100px;
    padding-left : 60px;
    font-family: 'Georgia', serif;
    font-size: 14px;
    font-style: italic;
    background: url('../img/quote_big.png') 0px 5px no-repeat;
  }
    .black .quote blockquote {
      background: url('../img/quote_big_black.png') 0px 5px no-repeat;
    }

.feature {
  text-align: center;
  padding-bottom: 30px;
  background: url('../img/shadow.png') bottom center no-repeat;
  margin-bottom: 0;
}

.team {
}
  .team li {
    padding: 30px;
    -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
  }
    .team img {
      float: left;
      margin-right: 30px;
      -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5); box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
    .team h3 {
      margin-bottom: 10px;
      display: inline-block;
      line-height: 20px;
    }
    .team .profession {
      line-height: 20px;
      float: right;
      display: inline-block;
      font-family: 'Georgia', serif;
      font-style: italic;
      font-size: 12px;
      margin-bottom: 10px;
    }
    .team p {
      line-height: 20px;
    }
      .team .social {
        margin-top: -5px;
        font-size: 11px;
      }
        .team .social a, .team .social a:visited {
          color: #333;
          font-weight: normal;
        }
          .black .team .social a, .black .team .social a:visited {
            color: #fff;
          }
          .team .social a:hover {
            text-decoration: underline;
          }

.articles {
  padding: 0;
}
article {
  margin: 30px 0;
}
  .meta {
    font-size: 11px;
    line-height: 16px;
    vertical-align: middle;
  }
    .meta a:hover {
      text-decoration: underline;
    }
    .meta .separator {
      margin: 0 10px;
      color: #eaeaea;
    }
      .black .meta .separator {
        color: #262626;
      }
  article .thumb {
    width: 100%;
    display: inline-block;
    margin-bottom: 20px;
  }
    article .thumb img {
      width: 100%;
    }
    article .thumb img {
      -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5); box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
      article .thumb:hover img {
        -moz-box-shadow: 0 1px 6px #000; -webkit-box-shadow: 0 1px 6px #000; box-shadow: 0 1px 6px #000;
      }

.portfolio {
}
  .portfolio hr {
    margin: 10px 0 5px 0;
  }
  .portfolio h3, .portfolio h4 {
    margin-top: 20px;
  }
  .portfolio img {
    width: 100%;
  }
  .portfolio a {
    position: relative;
    display: inline-block;
  }
    .portfolio a img {
      -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5); box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
      .portfolio a:hover img {
        -moz-box-shadow: 0 1px 6px #000; -webkit-box-shadow: 0 1px 6px #000; box-shadow: 0 1px 6px #000;
      }
    .portfolio .caption {
      position: absolute;
      width: 100%;
      display: inline-block;
      padding: 8px;
      background-color: rgba(0,0,0,0.4);
      bottom: 0;
      left: 0;
      color: #fff;
      text-align: center;
      font-size: 11px;
      text-shadow: 0 1px 1px rgba(0,0,0,0.5);
      -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
      -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;
    }
      .portfolio a:hover .caption {
        background-color: rgba(0,0,0,0.9);
      }

.filter {
  padding-bottom: 0;
}
  .filter nav {
    margin-bottom: 0;
  }
    .filter .separator {
      color: #ccc;
      display: inline-block;
      margin: 0 10px;
    }
      .black .filter .separator {
        color: #333;
      }
    .filter a {
      color: #666;
    }
      .filter a:hover, .filter .selected {
        text-decoration: underline;
      }

.pagination {
  text-align: center;
  padding-top: 0;
}
  .pagination a, .pagination a:visited {
    font-weight: bold;
    color: inherit;
    font-size: 11px;
  }
    .pagination a:hover {
      color: #333;
    }
      .black .pagination a:hover {
        color: #fff;
      }
  .pagination img {
    margin: 0 15px;
  }

.comment {
  margin-top: 30px;
}
  .comment:first-child {
    margin-top: 0;
  }
  .comment .picture {
    margin: 2px 20px 20px 0;
    float: left;
    width: auto;
  }
    .comment .picture img {
      -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5); box-shadow: 0 1px 2px rgba(0,0,0,0.5);
    }
  .comment .content {
    float: left;
    width: 530px;
  }
    .comment h4 {
      display: inline-block;
      font-size: 11px;
      line-height: 16px;
      margin-bottom: 10px;
      color: #333;
    }
      .black .comment h4 {
        color: #fff;
      }
    .comment .meta {
      margin-bottom: 10px;
    }
      .comment .meta a:hover {
        text-decoration: underline;
      }
  .comment_reply {
    margin-left: 80px;
  }
    .comment_reply .content {
      width: 450px;
    }