/* 
 Theme Name:   sublime-child
 Theme URI:    
 Description:  
 Author:       
 Author URI:   
 Template:     wp-sublime2
 Version:      1.0

 /* == Add your own styles below this line ==
--------------------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 0 !important;
  overflow-x: hidden;
}

/* Media must never be wider than its container */
img,
picture,
video,
canvas,
svg,
iframe,
embed,
object {
  max-width: 100% !important;
}

img,
picture,
video,
canvas,
svg {
  height: auto !important;
}

.wp-caption,
.wp-caption img,
figure,
.gallery,
.gallery-item {
  max-width: 100% !important;
  height: auto !important;
}

.wp-caption {
  width: auto !important;
}

/* Long text/URLs */
p,
li,
a,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: anywhere;
}

/* Forms */
input,
select,
textarea,
button {
  max-width: 100%;
  font: inherit;
}

textarea {
  width: 100%;
}

/* Tables */
table {
  max-width: 100%;
}

/* ---------------------------------------------------------
   TABLET / MOBILE
   Override old fixed-width Sublime theme layout.
--------------------------------------------------------- */

@media screen and (max-width: 900px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /*
     * Old WordPress themes commonly use fixed widths on these
     * wrappers. Force them back inside the viewport.
     */
  #wrapper,
  #page,
  #container,
  #main,
  #header,
  #footer,
  .site,
  .site-wrapper,
  .page-wrapper,
  .container,
  .wrap,
  .inner,
  .site-content,
  .content-wrapper,
  .main-wrapper {
    display: block !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /*
     * Main column + sidebar:
     * stack vertically instead of retaining desktop floats.
     */
  #content,
  #primary,
  #secondary,
  #sidebar,
  .content,
  .content-area,
  .site-main,
  .sidebar,
  .widget-area,
  main,
  aside[role="complementary"] {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Comfortable responsive gutters */
  #wrapper,
  #page,
  #container,
  #main,
  #content,
  #primary,
  #secondary,
  #sidebar,
  .site-content,
  .content-area,
  .site-main,
  .widget-area {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* Avoid doubled padding on nested wrappers where possible */
  #wrapper #container,
  #page #container,
  #main #content,
  #main #sidebar,
  #main #primary,
  #main #secondary {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Old floated images */
  .alignleft,
  .alignright,
  img.alignleft,
  img.alignright,
  .wp-caption.alignleft,
  .wp-caption.alignright {
    display: block !important;
    float: none !important;
    max-width: 100% !important;
    margin: 1em auto !important;
  }

  /* Inline fixed widths in old posts */
  .entry-content [style*="width"],
  .post-content [style*="width"],
  .post [style*="width"],
  article [style*="width"] {
    max-width: 100% !important;
  }

  /* Header/logo */
  #header,
  .site-header,
  header[role="banner"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  #header img,
  .site-header img,
  .site-branding img,
  .custom-logo,
  .logo img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Navigation */
  #access,
  #navigation,
  #nav,
  .main-navigation,
  .site-navigation,
  nav[role="navigation"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  #access ul,
  #navigation ul,
  #nav ul,
  .main-navigation ul,
  .site-navigation ul,
  nav[role="navigation"] ul,
  ul.menu {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    list-style: none;
  }

  #access li,
  #navigation li,
  #nav li,
  .main-navigation li,
  .site-navigation li,
  nav[role="navigation"] li,
  ul.menu > li {
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
  }

  #access a,
  #navigation a,
  #nav a,
  .main-navigation a,
  .site-navigation a,
  nav[role="navigation"] a {
    height: auto !important;
    white-space: normal !important;
  }

  /* Embeds */
  iframe,
  embed,
  object {
    width: 100% !important;
  }
}

/* ---------------------------------------------------------
   PHONES
--------------------------------------------------------- */

@media screen and (max-width: 680px) {
  #wrapper,
  #page,
  #container,
  #main,
  #content,
  #primary,
  #secondary,
  #sidebar,
  .site-content,
  .content-area,
  .site-main,
  .widget-area {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #wrapper #container,
  #page #container,
  #main #content,
  #main #sidebar,
  #main #primary,
  #main #secondary {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body {
    font-size: 16px;
    line-height: 1.6;
  }

  h1,
  .entry-title,
  .post-title {
    font-size: clamp(28px, 9vw, 38px) !important;
    line-height: 1.12 !important;
  }

  h2 {
    font-size: clamp(23px, 7vw, 30px) !important;
    line-height: 1.18 !important;
  }

  h3 {
    font-size: clamp(19px, 6vw, 25px) !important;
    line-height: 1.25 !important;
  }

  /* Stack menu items to prevent wide menus */
  #access ul,
  #navigation ul,
  #nav ul,
  .main-navigation ul,
  .site-navigation ul,
  nav[role="navigation"] ul,
  ul.menu {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #access li,
  #navigation li,
  #nav li,
  .main-navigation li,
  .site-navigation li,
  nav[role="navigation"] li,
  ul.menu > li {
    width: 100% !important;
  }

  #access a,
  #navigation a,
  #nav a,
  .main-navigation a,
  .site-navigation a,
  nav[role="navigation"] a {
    display: block !important;
    width: 100% !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .entry-content table,
  .post-content table,
  article table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="search"],
  input[type="password"],
  select,
  textarea {
    width: 100% !important;
    max-width: 100% !important;
  }

  button,
  input[type="submit"],
  input[type="button"],
  .button,
  .btn {
    min-height: 44px;
    max-width: 100%;
  }
}
/* ============================================================
   YOUINBLOOM - OLD SUBLIME THEME MOBILE FIX
   ============================================================ */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

@media screen and (max-width: 900px) {
  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  /* Force old fixed-width wrappers to become fluid */
  #wrapper,
  #wrap,
  #page,
  #container,
  #main,
  #header,
  #footer,
  #content,
  #primary,
  #secondary,
  #sidebar,
  .wrapper,
  .wrap,
  .page,
  .container,
  .inner,
  .site,
  .site-content,
  .site-main,
  .content,
  .content-area,
  .content-wrapper,
  .main-wrapper,
  .sidebar,
  .widget-area {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    height: auto !important;

    float: none !important;
    clear: both !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Prevent children from stretching their parent */
  #wrapper *,
  #page *,
  #container *,
  #main *,
  #content * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Main article */
  #content,
  #primary,
  .content,
  .content-area,
  .site-main {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Sidebar moves underneath article */
  #sidebar,
  #secondary,
  .sidebar,
  .widget-area {
    padding-left: 16px !important;
    padding-right: 16px !important;
    margin-top: 30px !important;
  }

  /* Images */
  img,
  .wp-post-image,
  .size-full,
  .size-large,
  .wp-caption img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .wp-caption,
  figure {
    width: auto !important;
    max-width: 100% !important;
  }

  /* Remove old floating images */
  .alignleft,
  .alignright,
  img.alignleft,
  img.alignright,
  .wp-caption.alignleft,
  .wp-caption.alignright {
    float: none !important;
    display: block !important;
    margin: 15px auto !important;
  }

  /* Old inline fixed widths */
  [style*="width:"] {
    max-width: 100% !important;
  }

  /* Videos / embeds */
  iframe,
  video,
  embed,
  object {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
  }

  /* Long URLs/text */
  p,
  li,
  a,
  h1,
  h2,
  h3,
  h4 {
    overflow-wrap: anywhere;
    word-wrap: break-word;
  }

  /* Tables */
  table {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto;
  }
}

/* ============================================================
   PHONE
   ============================================================ */

@media screen and (max-width: 680px) {
  #content,
  #primary,
  .content,
  .content-area,
  .site-main,
  #sidebar,
  #secondary,
  .sidebar,
  .widget-area {
    width: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body {
    font-size: 16px !important;
    line-height: 1.6;
  }

  h1,
  .entry-title,
  .post-title {
    font-size: 32px !important;
    line-height: 1.15 !important;
  }

  h2 {
    font-size: 25px !important;
    line-height: 1.2 !important;
  }

  h3 {
    font-size: 21px !important;
    line-height: 1.25 !important;
  }
}
#head-content {
  width: 100% !important;
}
#sitetitle {
  width: 100% !important;
}