/* Overrides loaded after the Karma theme CSS. */

/* The theme only styles type=text inputs; the contact form's email field is type=email */
.contact-form input[type='email'] { width: 300px; margin-bottom: 13px; }

/* Tap-to-call line for small screens; on desktop the number is shown in the phone graphic */
.contact-call { display: none; }

/* Small screens: the theme is a fixed 980px layout. Desktop (1004px and up) is untouched. */
@media (max-width: 1003px) {
  body { min-width: 0; -webkit-text-size-adjust: 100%; }
  #wrapper, #main { display: block; }

  /* Fixed 980px containers become fluid with a side gutter */
  .top-block .top-holder, #header .header-area, #main .main-area,
  #footer .footer-area, #footer .footer-wrapper, .info {
    width: auto; max-width: 980px; padding-left: 16px; padding-right: 16px; box-sizing: border-box;
  }
  #content, .content_full_width, .content_blog, .blog_wrap, .single_blog_wrap {
    width: auto !important; float: none; padding-left: 0 !important; margin-left: 0 !important;
  }
  #sidebar { float: none; width: auto; padding: 0; background: none; }
  #content img { max-width: 100%; height: auto; }

  /* Header: logo, then the menu on its own row */
  #header .header-area { padding: 20px 16px; }
  #header .custom-logo { margin-left: 0; }
  #menu-main-nav { float: none; clear: both; display: flex; flex-wrap: wrap; padding-top: 28px; }
  #menu-main-nav li { float: none; padding: 6px 18px 6px 0; }
  #menu-main-nav .navi-description { display: none; }

  /* Home banner: text above image instead of side by side */
  .big-banner .rays, .big-banner #header .header-holder { height: auto !important; }
  .home-banner-wrap { width: auto; height: auto; margin: 24px 0 0; padding: 20px; background: #e6e7e5; }
  .home-banner-wrap ul, .home-banner-wrap li { width: 100%; height: auto; background-image: none; }
  .home-banner-main, .home-banner-sub { position: static; width: auto; height: auto; background: none; }
  .home-banner-sub-content { width: auto; height: auto; margin: 16px 0 0; }
  .home-banner-sub img { max-width: 100%; height: auto; display: block; }
  .big-banner #main .main-area { padding-top: 24px !important; }

  /* Quarter-width thumbnails (home services, portfolio) keep their framed size and wrap */
  .main-holder .one_fourth, .main-holder .one_fourth_last {
    float: none !important; display: inline-block; vertical-align: top;
    width: 208px !important; margin: 0 16px 24px 0 !important;
  }
  .portfolio_layout br.clear { display: none; }

  /* Testimonials: quote mark above the text instead of beside it */
  .main-holder .testimonials blockquote {
    width: 100% !important; box-sizing: border-box; padding: 75px 20px 0 !important;
  }

  /* Blog posts: full width; drop the side bubbles (date, a "0 comments" link, a share link to itself) */
  .post_title, .post_content, .post_footer { float: none; width: auto; }
  .post_content { background: none; min-height: 0; }
  .post_date, .post_comments, .post_share { display: none; }
  .post_thumb, .post_thumb_load { width: auto; height: auto; background: none; }
  .post_thumb img { margin: 0; }
  .comment-content { float: none; width: auto; }
  .comment-text { float: none; width: auto; overflow: hidden; }

  /* 404: the graphic sits above the message instead of beside it */
  .four_error { width: auto; margin: 0; padding: 290px 0 0; background-position: left top; }
  .four_message { width: auto; }

  /* Contact: the phone graphic (which shows the number) is replaced by a tap-to-call line */
  .contact_smartphone { display: none; }
  .contact-call { display: block; font-size: 16px; }
  .contact-form input[type='text'], .contact-form input[type='email'] { max-width: 100%; box-sizing: border-box; }
  .main-holder .contact-form textarea { width: 100%; box-sizing: border-box; }

  #foot_left { display: none; }
  #foot_right { float: none; width: auto; }
}

@media (max-width: 767px) {
  /* Every other column stacks */
  .main-holder [class*="one_"]:not(.one_fourth):not(.one_fourth_last),
  .main-holder [class*="two_"], .main-holder [class*="three_"], #footer [class*="one_"] {
    float: none !important; width: auto !important; margin-right: 0 !important;
  }
  .main-holder .one_fourth, .main-holder .one_fourth_last { display: block; margin: 0 auto 24px !important; }
}