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

    body{ font-family: 'Roboto', sans-serif; }

    h1, h2, h3{ font-family: 'Questrial', sans-serif; font-weight: normal; }
    h2, h3{ letter-spacing: 3px; text-transform: uppercase; }
    
    p{ max-width: 900px; }

    @media screen and ( min-width: 600px ){
      h3.section-title{ font-size: 24px; }
    }
  
    @media screen and ( min-width: 1024px ){
      h3{ font-size: 28px; }
      h3.section-title{ font-size: 28px; }

      h4{ font-size: 18px; }
      p{ font-size: 16px; line-height: 24px; }
      li{ font-size: 16px; margin-bottom: 8px; }
    }
    
    @media screen and ( min-width: 1600px ){
      h3.section-title{ font-size: 36px; letter-spacing: 7px; }
    }    

/*  Links/Buttons
    ========================================================================== */
    
    a:link{ color: #111; }
    a:hover{ text-decoration: none; color: #231e60; transition: all 200ms ease-in-out; }
    a:visited{ color: #111; }
    a:active{  }

    .link-action{ font-family: 'Questrial', sans-serif; letter-spacing: 1px; text-transform: uppercase; font-size: smaller; }
    .link-action:hover{ color: #f9913a; }
    a.btn, button.btn, input[type="button"].btn, input[type="submit"].btn{ display: inline-block; font-family: "Questrial", sans-serif; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; padding: 12px 20px; font-size: 11px; border: none; }
    
    a.btn-primary, button.btn-primary, input[type="submit"].btn-primary{ background-color: #111; color: #fff; }
    a.btn-secondary, button.btn-secondary, input[type="submit"].btn-secondary{ background-color: #dedede; color: #000; }

    a.btn-primary:hover, button.btn-primary:hover, input[type="submit"].btn-primary:hover{ background-color: #f9913a; }
    a.btn-secondary:hover, button.btn-secondary:hover, input[type="submit"].btn-secondary:hover{ background-color: #231e60; color: #fff; }

    @media screen and ( min-width: 1024px ){
      a.btn{ padding: 15px 40px; font-size: 13px; letter-spacing: 3px; }
    }

/*  Media
    ========================================================================== */

    img{ height: auto; max-width: 100%; }
    a img{ vertical-align: bottom; }
    figure{ display: inline-block; margin-left: 0; margin-right: 0; }
    figcaption{ display: block; opacity: 0.5; }

    .iframe-holder{ position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden; }
    .iframe-holder iframe{ position: absolute; top:0; left: 0; width: 100%; height: 100%; }


/*  Table
    ========================================================================== */

    table{ border-collapse: collapse; border: 1px solid #ccc; }
    table td{ border: 1px solid #ccc; padding: 10px; }
    table thead td{ background-color: #f4f4f4; font-weight: 700; }

/*  Forms
    ========================================================================== */
    
    form{  }
      form.contact-form label{ position: relative; }
    	/*label > strong{ display: none; font-weight: 600; }*/
    	form.contact-form input[type="text"], form.contact-form input[type="email"], form.contact-form input[type="tel"], form.contact-form input[type="search"], form.contact-form textarea{ width: 100%; max-width:100%; padding: 12px 15px; border: none; border-radius: 0; -webkit-appearance: none; background-color: #eee; color: #555; box-shadow: 0 2px 0 #aaa; }
      form.contact-form input[type="text"]:focus, form.contact-form input[type="email"]:focus, form.contact-form input[type="tel"]:focus, form.contact-form input[type="search"]:focus, form.contact-form textarea:focus{ background-color: #fff; color: #111; box-shadow: 0 2px 0 #fff; }
        ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #888; opacity: 1; }
        ::-moz-placeholder { /* Firefox 19+ */ color: #888; opacity: 1; }
        :-ms-input-placeholder { /* IE 10+ */ color: #888; opacity: 1; }
        :-moz-placeholder { /* Firefox 18- */ color: #888; opacity: 1; }
      form.contact-form input[type="button"], form.contact-form input[type="submit"]{ cursor: pointer; }

      .smithys-dark input[type="text"], .smithys-dark input[type="email"], .smithys-dark input[type="tel"], .smithys-dark input[type="search"], .smithys-dark textarea{ width: 100%; padding: 12px 15px; border: none; border-radius: 0; -webkit-appearance: none; background-color: #353535; color: #dedede; box-shadow: 0 2px 0 #aaa; }
      .smithys-dark input[type="text"]:focus, .smithys-dark input[type="email"]:focus, .smithys-dark input[type="tel"]:focus, .smithys-dark input[type="search"]:focus, .smithys-dark textarea:focus{ background-color: #000; color: #fff; box-shadow: 0 2px 0 #fff; }

    .search-form{ position: relative; }
      .search-form.inline label{ display: inline-block; width: 100%; }
      .search-form.inline .search-field{ border: none; width: 100%; padding: 12px 15px; font-family: 'Questrial', sans-serif; background-color: #fff; box-shadow: none; }
      .search-form.inline .search-field:focus{ color: #000; border-bottom: none; }
      .search-form.inline .search-submit-holder{ }
      .search-form.inline .search-submit-holder:before{ content: "\f002"; font-family: "FontAwesome"; display: block; height: 38px; width: 38px; line-height: 38px; text-align: center; color: #000; position: absolute; top: 0; right: 0; }
          .search-form.inline .search-submit{ display: block; width: 38px; height: 38px; border: none; background: none; text-indent: -9999px; position: absolute; top: 0; right: 0; cursor: pointer; }


      .smithys-dark .search-form.inline .search-field:focus, .smithys-dark .search-form.inline .search-submit-holder:before {color:#fff}
      .smithys-dark input[type="search"] { background-color: #fff; color: #000 }


      form.contact-form .field-holder{ position: relative; }
      form.contact-form .field-holder:before{ display: block; position: absolute; left: 10px; font-family: 'FontAwesome'; font-size: 20px; line-height: 40px; color: #555; z-index: 1; }
        form.contact-form .field-name:before{ content: "\f007"; }
        form.contact-form .field-email:before{ content: "\f0e0"; }
        form.contact-form .field-contact-no:before{ content: "\f095"; }
        form.contact-form .field-message:before{ content: "\f040"; }
        
        form.contact-form input[type="text"], form.contact-form input[type="email"], form.contact-form input[type="tel"], form.contact-form textarea{ text-indent: 20px;  }
        form.contact-form label{ display: none; }
        form.contact-form textarea{ max-height: 153px; }
        form.contact-form input[type="submit"]{ width: 100%; font-size: 16px; }

    @media screen and ( min-width: 600px ){
      .search-form.inline .search-submit-holder:before{ font-size: 16px; }
    }

    @media screen and ( min-width: 768px ){
      .search-form.inline .search-submit-holder:before{ font-size: 18px; }
    }

     @media screen and ( min-width: 1900px ){
      .search-form.inline .search-field{ padding-top: 15px; padding-bottom: 15px; }
      .search-form.inline .search-submit-holder:before{ font-size: 22px; width: 44px; height: 44px; }
        .search-form.inline .search-submit{ width: 44px; height: 44px; }
    }
    
    .field-holder{ text-align: left; margin-bottom: 15px; }

/*  Navigation Menu
    ========================================================================== */

    .menu{ padding-left: 0; margin: 0; }
      .menu li{ list-style-type: none; padding-left: 0; margin: 0; }

/*  Social Menu
    ========================================================================== */

    .social-menu{ }
      .social-menu-item{ display: inline-block; }
        .social-menu-item span{ text-indent: -99999px; display: inline-block; }

/*  Colors
    ========================================================================== */
    
    .smithys-light{ background-color: #ededed; color: #111; }

    .smithys-dark{ color: #fff; }
    .smithys-dark a{ color: #fff; }
    .smithys-dark a:hover{ color: #f9913a; }
    .smithys-dark .btn, .smithys-dark .btn-primary{ background-color: #fff; color: #111; }
    .smithys-dark .btn-secondary{ background-color: #000; color: #fff; }
    .smithys-dark .btn:hover, .smithys-dark .btn-primary:hover{ color: #111; }
    .smithys-dark .btn-secondary:hover{ color: #fff; }

    .smithys-dark.gradient{
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#333333+0,111111+100 */
      background: rgb(17,17,17); /* Old browsers */
      background: -moz-linear-gradient(-45deg, rgba(51,51,51,1) 0%, rgba(17,17,17,1) 100%); /* FF3.6-15 */
      background: -webkit-linear-gradient(-45deg,rgba(51,51,51,1) 0%, rgba(17,17,17,1) 100%); /* Chrome10-25,Safari5.1-6 */
      background: linear-gradient(135deg,rgba(51,51,51,1) 0%, rgba(17,17,17,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#111111',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    }

/*  Product Condition
    ========================================================================== */

    #hero .product-condition,
    span.product-condition { padding: 3px 5px; text-align: center; display: inline-block; background-color: #333; font-family: 'Questrial', sans-serif; letter-spacing: 1px; }
        span.product-condition {color:#fff; margin-top:20px}

        @media screen and ( min-width: 1024px ){
          span.product-condition {margin:0;position: absolute;display: block;top: -20px}
        }