/**
 * gtsai_lens responsive.css
 * Merge of JA Lens layout-mobile.css (<720), layout-mobile-portrait.css (<480),
 * layout-tablet.css (720-985), layout-normal.css (986-1235), layout-wide*.css and layout-hd.css.
 */

/* NORMAL 986-1235: fixed 960 header, full-width wall ---*/
@media only screen and (min-width: 986px) {
  .main { max-width: 1235px; }
  #right .col { width: 100%; }
}

/* WIDE and up: the wall uses the full window ---*/
@media only screen and (min-width: 1236px) {
  #container .main { max-width: none; }
}

@media only screen and (min-width: 1891px) {
  .main { max-width: 1920px; }
}

/* Scrollable menu bar without a visible scrollbar (JA Lens used iScroll) ---*/
@media only screen and (max-width: 985px) {
  #mainnav .menu-inner {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  #mainnav .menu-inner::-webkit-scrollbar { display: none; }
}

/* TABLET 720-985 ---*/
@media only screen and (min-width: 720px) and (max-width: 985px) {
  body {
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
  }

  h1.componentheading,
  .componentheading,
  .content-inner div > h1,
  .content-inner .page-header > h1 {
    font-size: 250%;
    width: 100%;
    margin: -107px auto 50px -20px;
  }

  body.k2-component .componentheading,
  body.k2-component .content-inner .page-header > h1 { margin: -87px auto 30px; }

  body.layoutview .componentheading,
  body.layoutview .content-inner .page-header > h1 {
    margin: -87px auto 10px;
    padding-left: 10px;
  }

  .masonry .item .header h2,
  .masonry .item-timeline .item-inner h2 { font-size: 150%; }

  .main {
    width: auto;
    max-width: 985px;
  }

  #content .content-inner,
  body.bd-home #content .content-inner,
  body.k2-component #content .content-inner { margin: 0 10px 10px; }

  body.layoutview #content .content-inner { margin: 0; }

  body.has-right #content { width: 100%; float: none; }

  #right { width: 100%; float: none; }
  #right .right-inner { margin-right: 0; }

  #header .main { width: 100%; }

  #mainnav .menu-inner {
    width: auto;
    left: 60px;
    right: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }

  #mainnav ul.mod-menu { float: left; white-space: nowrap; }

  #botsl .ja-box { width: 50% !important; }
  #botsl .main-inner1 { margin: 0; }
  #botsl .main-inner1 .ja-box .moduletable { margin: 0 10px 15px; padding-bottom: 10px; }

  #toolbar #search .finder,
  #toolbar #search form { margin-right: 10px; }
  #toolbar .toolbar-inner > ul { margin-right: 10px; }
  #toolbar #search .inputbox,
  #toolbar #search .form-control { width: 180px; }

  .itemView .itemImageBlock img { width: 100% !important; max-width: 100% !important; }

  .container-main ul li { background-position: left 8px; }
}

/* MOBILE <720 ---*/
@media only screen and (max-width: 719px) {
  body {
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
  }

  h1.componentheading,
  .componentheading,
  .content-inner div > h1,
  .content-inner .page-header > h1 {
    font-size: 115%;
    width: 100%;
    margin: -87px auto 60px -20px;
  }

  body.k2-component .componentheading,
  body.k2-component .content-inner .page-header > h1 { margin: -67px auto 40px; }

  body.layoutview .componentheading,
  body.layoutview .content-inner .page-header > h1 {
    margin: -77px auto 20px;
    padding-left: 10px;
  }

  .content-inner div > h2 { font-size: 130%; }

  .masonry .item .header h2 { font-size: 125%; }

  .item-more .item-inner { width: auto !important; }

  body.layout-g .masonry .item-timeline .item-inner { padding: 20px; }

  #right .right-inner { margin: 0; }

  .main { width: 100%; }

  #content .content-inner,
  body.bd-home #content .content-inner,
  body.k2-component #content .content-inner { margin: 0 10px 10px; }

  body.layoutview #content .content-inner { margin: 0; }

  body.has-right #content { width: 100%; float: none; }

  #right { width: 100%; float: none; }

  /* Header: logo bar on top, scrollable menu below ---*/
  #header { height: 120px; }

  #header .main { height: 120px; width: 100%; }

  #logo {
    width: 100%;
    top: 0;
    background: #111;
  }

  #logo h1, #logo h1 a { margin: 0 auto; }

  #mainnav {
    left: 0;
    top: 60px;
    width: 100%;
  }

  #mainnav .menu-inner {
    left: 0;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  #mainnav ul.mod-menu {
    float: left;
    white-space: nowrap;
    display: flex;
  }

  #mainnav ul.mod-menu > li { flex: 0 0 auto; }

  /* submenus drop below the bar, full width */
  #mainnav ul.mod-menu > li.deeper > ul,
  #mainnav ul.mod-menu > li.parent > ul {
    max-width: none;
    width: max-content;
    top: 60px;
    border-color: #333;
  }

  #mainnav ul.mod-menu > li.deeper > ul:before,
  #mainnav ul.mod-menu > li.parent > ul:before { display: none; }

  #mainnav ul.mod-menu ul li a { max-width: none; }

  /* Toolbar ---*/
  #toolbar li { margin: 0; }

  #toolbar .toolbar-inner { width: 150px; }

  #toolbar li#toolbar-layout { display: none; }

  #toolbar li#toolbar-categories {
    margin-left: 0;
    border: 0;
    margin-bottom: 10px;
  }

  #toolbar .toolbar-inner > ul { margin-right: 10px; }

  #toolbar #search .finder,
  #toolbar #search form { margin-right: 10px; }

  #toolbar #search .inputbox,
  #toolbar #search .form-control,
  #toolbar #search .inputbox:focus,
  #toolbar #search .form-control:focus { width: 150px; }

  #toolbar-timeline h4,
  #toolbar-categories h4 {
    border: 0;
    text-indent: -9999em;
    overflow: hidden;
    width: 30px;
    height: 33px;
    padding: 0;
    margin: 0 0 0 10px;
  }

  #toolbar-timeline h4 { background: url(../images/icon-timeline.png) no-repeat top center; }
  #toolbar-categories h4 { background: url(../images/icon-categories.png) no-repeat top center; }

  #toolbar-timeline h4 span,
  #toolbar-categories h4 span { display: none; }

  .popup .moduletable { width: 150px; }

  /* Bottom ---*/
  #content-mass-bottom { padding-bottom: 0; }

  #content-mass-bottom .moduletable,
  #botsl1 .moduletable { margin: 0 10px; }

  #content-mass-bottom .moduletable > h3 { font-size: 250%; }

  #botsl1 { padding-top: 0; }

  #botsl .main-inner1 { margin: 0; }

  #botsl .main-inner1 .ja-box {
    width: 100% !important;
    float: left;
  }

  #botsl .main-inner1 .ja-box .moduletable {
    border-bottom: solid 1px #222;
    margin: 0 10px 15px 10px;
    padding-bottom: 10px;
  }

  .container-main ul li { background-position: left 8px; }

  .itemView h2.itemTitle { font-size: 130%; }

  .itemView .article-info span {
    margin-right: 5px;
    padding-right: 5px;
    font-size: 95%;
  }

  .item-tags ul li { padding: 1px 2px; }

  .com-contact .form-control { max-width: 100%; }
}

/* MOBILE PORTRAIT <480 ---*/
@media only screen and (max-width: 479px) {
  .item-more .item-inner h3,
  .item-more .item-inner button {
    margin: auto;
    word-break: break-word;
    font-size: 92% !important;
    height: auto !important;
    line-height: normal !important;
    padding-top: 20px !important;
    text-align: center;
  }

  body.layout-g .masonry .item-timeline,
  body.layout-l .masonry .item-timeline { height: auto; }

  body.layout-g .masonry .item-timeline .item-inner,
  body.layout-l .masonry .item-timeline .item-inner { padding: 20px; }

  #content .content-inner,
  body.bd-home #content .content-inner,
  body.k2-component #content .content-inner { margin: 0 10px 15px 10px; }

  body.layoutview #content .content-inner { margin: 0; }

  #toolbar #search .inputbox,
  #toolbar #search .form-control,
  #toolbar #search .inputbox:focus,
  #toolbar #search .form-control:focus { width: 70px; }

  /* one column: image tiles keep the tile ratio, year tiles shrink to their text */
  .masonry,
  body.layout-g .masonry {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto;
  }

  body.layout-g .masonry .item .item-inner {
    height: calc(100vw * var(--lens-tile-ratio, 0.5926));
  }

  body.layout-g .masonry .item-timeline .item-inner,
  .item-more .item-inner {
    height: auto;
  }

  .itemView { padding: 15px; }
  .itemView .itemImageBlock { margin: -15px -15px 15px; }
}