/* GOOGLE FONTS */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local("Raleway"), url(http://fonts.gstatic.com/s/raleway/v9/0dTEPzkLWceF7z0koJaX1A.woff2) format("woff2"), url(https://fonts.gstatic.com/s/raleway/v9/bIcY3_3JNqUVRAQQRNVteQ.ttf) format("truetype"); }
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: local("Raleway Bold"), local("Raleway-Bold"), url(http://fonts.gstatic.com/s/raleway/v9/JbtMzqLaYbbbCL9X6EvaI_k_vArhqVIZ0nv9q090hN8.woff2) format("woff2"), url(https://fonts.gstatic.com/s/raleway/v9/JbtMzqLaYbbbCL9X6EvaIy3USBnSvpkopQaUR-2r7iU.ttf) format("truetype"); }
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local("Lato Regular"), local("Lato-Regular"), url(http://fonts.gstatic.com/s/lato/v11/1YwB1sO8YE1Lyjf12WNiUA.woff2) format("woff2"), url(https://fonts.gstatic.com/s/lato/v11/v0SdcGFAl2aezM9Vq_aFTQ.ttf) format("truetype"); }
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local("Lato Bold"), local("Lato-Bold"), url(http://fonts.gstatic.com/s/lato/v11/H2DMvhDLycM56KNuAtbJYA.woff2) format("woff2"), url(https://fonts.gstatic.com/s/lato/v11/DvlFBScY1r-FMtZSYIYoYw.ttf) format("truetype"); }
@font-face {
  font-family: 'Shadows Into Light';
  font-style: normal;
  font-weight: 400;
  src: local("Shadows Into Light"), local("ShadowsIntoLight"), url(http://fonts.gstatic.com/s/shadowsintolight/v6/clhLqOv7MXn459PTh0gXYFK2TSYBz0eNcHnp4YqE4Ts.woff2) format("woff2"), url(https://fonts.gstatic.com/s/shadowsintolight/v6/clhLqOv7MXn459PTh0gXYBayoCksK7A5ZWkzVNukUdQ.ttf) format("truetype"); }
* {
  box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: 'Raleway', sans-serif; }
  body .wrapper {
    /*width: 90%;*/
    margin-left: 135px; }
  body .wrapper-page {
    margin-top: 0; }

.group:after {
  content: " ";
  display: table;
  clear: both; }

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 135px;
  background: #eee;
  /*background: linear-gradient(to bottom, #eeeeee, #a3a3a3, #262626);*/
  height: 100%;
  border-right: 1px solid #262626; }
  .sidebar > .sidebar-nav {
    list-style-type: none;
    margin: 0;
    padding: 0; }
    .sidebar > .sidebar-nav .home-link-white {
      color: white;
      font-weight: 700;
      background: linear-gradient(to bottom, black, #262626); }
      .sidebar > .sidebar-nav .home-link-white:hover {
        background: #262626;
        font-style: normal; }
    .sidebar > .sidebar-nav .home-link-red {
      color: red; }
    .sidebar > .sidebar-nav a {
      text-decoration: none;
      color: #262626;
      font-weight: 400; }
      .sidebar > .sidebar-nav a:hover {
        color: #1080dd;
        font-style: italic;
        font-weight: 700; }
      .sidebar > .sidebar-nav a .selected {
        font-style: italic;
        color: #1080dd; }
      .sidebar > .sidebar-nav a li {
        text-align: center;
        text-transform: uppercase;
        padding: 25px 5px;
        border-bottom: 1px solid #262626; }
        .sidebar > .sidebar-nav a li:hover {
          background: #e9e9e9; }
  .sidebar > .sub-sidebar {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 135px; }
    .sidebar > .sub-sidebar p {
      text-align: center;
      font-size: .7em;
      background: #1080dd;
      color: white;
      margin: 0;
      padding: 10px 0;
      border-right: 1px solid #262626; }
    .sidebar > .sub-sidebar .sub-sidebar-nav {
      list-style-type: none;
      border-bottom: 1px solid #262626;
      margin: 0;
      padding: 0; }
      .sidebar > .sub-sidebar .sub-sidebar-nav a {
        text-decoration: none;
        color: #262626;
        font-size: .8em; }
        .sidebar > .sub-sidebar .sub-sidebar-nav a:hover {
          color: #ffff90;
          font-weight: 700; }
        .sidebar > .sub-sidebar .sub-sidebar-nav a .selected {
          color: #ffff90;
          background: #262626; }
        .sidebar > .sub-sidebar .sub-sidebar-nav a li {
          padding: 10px 5px; }
          .sidebar > .sub-sidebar .sub-sidebar-nav a li:hover {
            background: #262626; }

.banner,
.banner-build,
.banner-gallery,
.banner-order {
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  right: 0; }
  .banner h1,
  .banner-build h1,
  .banner-gallery h1,
  .banner-order h1 {
    font-size: 3em;
    margin: 0;
    padding: 76px;
    color: white;
    text-transform: uppercase;
    text-shadow: 0px 0px 2px black; }

.banner-gallery {
  background: url("../images/box002_1.jpg"); }

.banner-order {
  background: url("../images/order_status.jpg"); }

.banner-build {
  background: url("../images/product_builder.jpg"); }

.banner-store {
  background: url("../images/wisp_store.jpg"); }

header {
  display: none;
  width: 100%;
  position: fixed;
  top: 0;
  margin: 0;
  padding: 0;
  z-index: 1; }
  header .header-content {
    width: 75%;
    margin: 0 auto;
    padding: 0;
    border-bottom: 1px solid #e9e9e9; }
  header .header-title {
    float: left;
    width: 40%; }
    header .header-title > h1 {
      font-size: 2em;
      margin: 0;
      padding: 5px;
      color: #ffffff; }
      header .header-title > h1 a {
        text-decoration: none;
        color: inherit; }
      header .header-title > h1 span {
        color: red; }
    header .header-title .icon {
      margin-top: -18px;
      margin-bottom: -8px; }
      header .header-title .icon button {
        display: none; }
  header .header-nav {
    float: right;
    width: 60%; }
    header .header-nav .nav {
      margin: 0;
      padding: 0;
      text-align: right; }
      header .header-nav .nav > li {
        line-height: 74px;
        padding-left: 10px;
        display: inline-block;
        color: #ffffff;
        text-transform: uppercase;
        font-size: .9em;
        font-weight: 700; }
        header .header-nav .nav > li .selected {
          font-style: italic;
          color: #1080dd; }
        header .header-nav .nav > li > a {
          text-decoration: none;
          color: inherit;
          padding: 20px 5px; }
          header .header-nav .nav > li > a:hover {
            color: #1080dd; }
          header .header-nav .nav > li > a i {
            padding-right: 5px; }

.header-page {
  background: linear-gradient(#3b3b3b, #000000); }
  .header-page .header-content {
    border-bottom: none; }

.photo-container {
  width: 80%;
  margin: 0 auto; }
  .photo-container .photo-form-section {
    width: 100%;
    padding: 5px 0; }
    .photo-container .photo-form-section .title {
      float: left; }
    .photo-container .photo-form-section .form {
      float: right;
      text-align: right; }
      .photo-container .photo-form-section .form input[type=button] {
        background: #25A6E1;
        background: -webkit-linear-gradient(#25A6E1 0%, #188BC0 100%);
        background: -o-linear-gradient(#25A6E1 0%, #188BC0 100%);
        background: linear-gradient(#25A6E1 0%, #188BC0 100%);
        /*filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);*/
        color: #ffffff;
        padding: 1px 8px;
        border: 1px solid #1A87B9;
        border-radius: 5px;
        outline: none;
        margin: 5px 0; }
        .photo-container .photo-form-section .form input[type=button]:hover {
          cursor: pointer;
          background: #1A87B9;
          color: #ffff90; }
        .photo-container .photo-form-section .form input[type=button]:active {
          color: #000000; }
  .photo-container .photo-thumbs-section {
    width: 100%; }
    .photo-container .photo-thumbs-section .photo-thumbs {
      list-style-type: none;
      padding-left: 0; }
      .photo-container .photo-thumbs-section .photo-thumbs li {
        display: inline-block;
        width: 18%;
        margin-right: 5px; }
        .photo-container .photo-thumbs-section .photo-thumbs li > a p {
          margin: 0 0 20px 0;
          padding: 0; }
        .photo-container .photo-thumbs-section .photo-thumbs li > img {
          max-width: 100%;
          max-height: 100%; }

select,
input[type="text"] {
  padding: 5px;
  font-family: "Raleway";
  font-size: 1.125em; }

.status-container p span {
  color: green;
  font-weight: 700; }

#right,
#left {
  position: absolute;
  top: 50%; }
  #right:hover,
  #left:hover {
    opacity: .8;
    filter: alpha(opacity=80); }

#left {
  left: 135px; }

#right {
  right: 0; }

.notice {
  font-size: 1em;
  color: #888888;
  font-style: italic;
  margin: -10px 0 25px 0; }
  .notice > a:hover {
    color: #1080dd; }
  .notice > span {
    font-weight: 700; }

.heading {
  width: 200px;
  text-align: center;
  margin: 35px auto 25px auto; }
  .heading > p {
    color: #262626;
    padding-bottom: 10px;
    font-size: 2em;
    border-bottom: 1px solid #000000; }
  .heading > h1 {
    color: #1080dd;
    font-size: 1em; }

.button {
  padding: 5px;
  background: #1080dd;
  margin: 15px 0;
  font-weight: 700;
  outline: none;
  border: none;
  border-radius: 5px;
  color: #ffffff; }
  .button:hover {
    background: #124191;
    cursor: pointer; }

.tagline {
  margin: 175px 12.5% 0 12.5%;
  width: 75%;
  padding-top: 3px;
  text-align: center; }
  .tagline > h2 {
    color: #ffffff;
    margin: 10px;
    font-size: 52px;
    font-weight: 400;
    font-family: 'Shadows Into Light', cursive; }
  .tagline > h3 {
    color: #ffffff;
    font-weight: 400;
    font-size: 1.175em;
    font-family: 'Lato'; }
  .tagline > a {
    padding: 15px;
    margin: 10px;
    background: #f09609;
    background: -webkit-linear-gradient(to bottom, #f09609, #c07807);
    background: linear-gradient(to bottom, #f09609, #c07807);
    color: #000000;
    font-weight: 700;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block; }
    .tagline > a:hover {
      background: #d88708; }
  .tagline .social-link {
    padding: 5px;
    background: #124191;
    color: #ffffff; }
    .tagline .social-link:hover {
      background: #1080dd; }

.underlay {
  height: 200%;
  width: 200%;
  top: -50%;
  right: -50%;
  position: fixed;
  display: block;
  z-index: -1; }
  .underlay > img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    min-width: 50%;
    min-height: 50%; }

.thumb-container {
  width: 100%;
  margin: 0 auto;
  text-align: center; }
  .thumb-container > .thumbnails {
    width: 90%;
    margin: 0 auto;
    padding: 0;
    text-align: center; }
    .thumb-container > .thumbnails img {
      max-width: 100%;
      max-height: 100%;
      -webkit-filter: gray;
      filter: gray;
      /* IE6-9 */
      filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /></filter></svg>#filter');
      filter: grayscale(1);
      /* Firefox 35+ */
      -webkit-filter: grayscale(1);
      /* Google Chrome, Safari 6+ & Opera 15+ */ }
      .thumb-container > .thumbnails img:hover {
        opacity: .9;
        filter: alpha(opacity=90);
        -webkit-filter: none;
        filter: none;
        -webkit-filter: grayscale(0);
        filter: grayscale(0); }
  .thumb-container img {
    max-width: 100%;
    max-height: 100%; }
  .thumb-container li {
    display: inline-block;
    width: 20%;
    margin: 0 5px; }
  .thumb-container video,
  .thumb-container .feature {
    width: 75%;
    margin-bottom: 25px; }
  .thumb-container #player {
    margin-bottom: 25px;
    height: 400px;
    width: 700px; }

.build-container {
  width: 50%;
  margin: 0 auto; }
  .build-container > h1 {
    color: #1080dd;
    font-size: 1.5em;
    padding-bottom: 10px;
    margin-bottom: 35px;
    border-bottom: 1px solid #000000; }
  .build-container .messageAvail,
  .build-container .messageNA {
    border-radius: 5px;
    padding: 5px;
    background: #F02309;
    color: #ffffff;
    font-weight: 700;
    display: none; }
  .build-container .build-section:last-child {
    margin-bottom: 25px; }
  .build-container .selection,
  .build-container .label {
    float: left; }
  .build-container .label {
    width: 125px;
    color: #888888;
    font-size: 1.125em; }
  .build-container .image-view {
    float: right; }
  .build-container .cost-holder p {
    margin-bottom: -25px;
    font-size: 2em;
    color: green;
    margin-top: -10px; }
    .build-container .cost-holder p > span {
      color: green; }
  .build-container .discounted {
    text-decoration: line-through;
    padding-right: 5px;
    color: #888; }

.status-container {
  width: 50%;
  margin: 0 auto; }
  .status-container > h2 {
    color: #1080dd;
    padding-bottom: 10px;
    margin-bottom: 35px;
    border-bottom: 1px solid #000000; }
  .status-container label {
    display: block;
    font-size: 1.125em; }
  .status-container input {
    padding: 10px;
    margin-left: 0;
    display: block;
    font-family: "Raleway";
    font-size: 16px; }
  .status-container .status,
  .status-container .completion,
  .status-container .buyer,
  .status-container .notes,
  .status-container .tracking {
    font-size: 18px;
    color: #888888; }

.stock-section {
  width: 960px;
  margin: 0 auto;
  text-align: center; }
  .stock-section img {
    max-width: 235px; }
    .stock-section img:hover {
      opacity: .8; }
  .stock-section .listing {
    display: inline-block;
    padding: 15px; }

.contact-banner img {
  width: 100%; }

.contact-section {
  width: 50%;
  margin: auto;
  position: relative; }
  .contact-section > img {
    max-width: 100%; }
  .contact-section > h2 {
    color: #1080dd;
    padding-bottom: 5px;
    margin-bottom: 10px;
    border-bottom: 1px solid #000000; }
  .contact-section > h4 {
    color: #888888; }
  .contact-section > h5 {
    text-indent: 20px;
    margin-top: -10px;
    color: #1080dd; }
    .contact-section > h5 > a {
      color: #000000;
      text-decoration: none; }
      .contact-section > h5 > a:hover {
        text-decoration: underline;
        color: #1080dd; }
  .contact-section > p {
    color: #888888;
    text-indent: 20px;
    padding-left: 10px; }
    .contact-section > p:first-letter {
      font-size: 1.125em;
      font-weight: 700; }
  .contact-section .biopic {
    position: absolute;
    right: 0;
    bottom: 0; }

/*
========== TOOL TIP STYLING ==========
*/
.tooltip {
  display: none;
  position: absolute;
  border: 1px solid #999;
  background-color: #124191;
  border-radius: 5px;
  padding: 5px;
  color: #ffffff;
  font-size: 12px Arial; }

a[data-title]:hover:after {
  content: attr(data-title);
  padding: 1px 8px;
  color: #ffffff;
  font-size: .4em;
  position: absolute;
  left: -250px;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  border: 2px solid #333;
  background: #1080DD; }

@media screen and (max-height: 755px) {
  .sidebar .sidebar-nav a li {
    padding: 10px 5px; }

  .sidebar {
    height: 100%; }

  .sidebar .sub-sidebar {
    position: absolute; }

  .banner h1 {
    padding: 46px; } }
@media screen and (max-height: 580px) {
  .sidebar .sub-sidebar {
    position: relative; } }
@media screen and (max-width: 1200px) {
  .photo-container,
  .build-container {
    width: 100%;
    padding: 0 15px; } }
@media screen and (max-width: 850px) {
  header {
    display: block; }

  .sidebar {
    display: none; }

  body .wrapper {
    width: 100%;
    margin-left: 0; }

  #left {
    left: 0; }

  body .wrapper-page {
    margin-top: 90px; }

  header .header-content {
    width: 90%;
    text-align: center;
    border-bottom: none; }

  header .header-content .header-title .icon img {
    margin-bottom: -10px;
    width: 125px; }

  header .header-content .header-title,
  header .header-content .header-nav {
    width: 100%; }

  header .header-content .header-title button {
    display: inline-block;
    margin-top: -10px; }

  header .header-content .header-nav .nav {
    width: 50%;
    float: left;
    text-align: center;
    height: 0;
    visibility: hidden;
    opacity: 0; }

  header .header-content .header-nav .open {
    height: 250px;
    opacity: 1;
    visibility: visible;
    transition: 1s ease; }

  header .header-content h1 {
    font-size: 1em; }

  header .header-nav .nav li {
    font-size: .9em;
    line-height: 40px;
    padding-left: 0;
    display: block; }

  header .header-nav .nav li a {
    padding: 15px 5px; }

  .photo-container .photo-thumbs-section .photo-thumbs li {
    display: block;
    width: 100%; }

  .photo-container .photo-thumbs-section .photo-thumbs li a p {
    margin-bottom: 20px; }

  .photo-container .photo-form-section .title {
    width: 100%; }

  .photo-container .photo-form-section .form {
    float: left;
    width: 100%;
    text-align: left; }

  .photo-container .photo-form-section .form input {
    margin-top: 0; }

  .inventory-section {
    width: 100%; }

  .contact-section {
    width: 75%; }

  .stock-section {
    width: 500px;
    text-align: center; } }
@media screen and (max-width: 670px) {
  header .header-nav .nav li {
    font-size: .8em; }

  .tagline h2 {
    font-size: 32px; }

  .tagline h3 {
    font-size: 1em; }

  .tagline a {
    padding: 10px; }

  .banner h1 {
    font-size: 2em;
    padding: 25px; }

  #right,
  #left {
    height: 35px;
    width: 35px;
    top: 45%; }

  .status-container,
  .contact-section {
    width: 90%;
    margin-top: 25px; }

  .status-container input {
    padding: 6px; }

  /* This is only being used to make the stock.jpg image fit the mobile view better */
  .underlay img {
    left: -700px; }

  .build-container {
    margin-top: -15px; }

  .build-container .label {
    width: 100%; }

  .build-container .label,
  .build-container .selection {
    font-size: .8em; }

  .build-container .selection {
    width: 50%; }

  .build-container .image-view img {
    width: 60px; }

  .build-container h2 {
    margin: 20px 0; }

  .thumb-container #player {
    height: 200px;
    width: 350px; }

  .stock-section {
    width: 300px; } }

/*# sourceMappingURL=main.css.map */