/*  styling for resources/modules/research/article/researchbymake.xhtml */

/* counter outside padding from tiles */

#article-researchbymake {
    margin: -2px;
}
.research-by-make-tile-grid {display: inline-block;}
.article-make-tile,
.article-seeall-tile {
    /*box-sizing: border-box;*/
    border: 0;
    outline: 0;
    padding: 2px;
    text-align: center;
    position: relative;
    cursor: pointer;
    height: 75px;
}

.research-by-make-tile-grid .glyphicon {
    font-family: AXLcons;
    position: relative;
    top: 1px;
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
.research-by-make-tile-grid .glyphicon-chevron-down:before {
    content: "\f078";
}
.research-by-make-tile-grid .glyphicon-chevron-up:before {
    content: "\f077";
}

.style-label {
    display: block;
    top: 16%;
    position: relative;
    font-size: 12px;
    text-align: center;
    clear: both;
    color:#6d7782;
}

.research-by-make-tile-grid .columns-2 {
  column-count: 2;
  padding: 0 25px;
  column-gap: 25%;
}

.td_block_atc_research_by_style .style-columns {
  column-count: 2;
  padding: 0
}
.td_block_atc_research_by_style .article-style-tile {
    border: 0;
    outline: 0;
    padding: 2px;
    text-align: center;
    position: relative;
    cursor: pointer;
    height: 68px;
    display: table
}

.atcui-hidden, html .atcui-hidden {
    display: none;
}
.article-seeall-tile .menu-dropdown-arrow {
    width: 12px;
}

.article-seeall-tile {
    background: #ff8f1c content-box;
}

.article-allmakes-tiles {
    padding-top: 16px;
    display: none;
    clear: both;
    width: 100%;
}

.article-make-tile img {
  width:fit-content;
  width: -moz-fit-content;
}

.article-make-img {
    display: block;
    max-height: 100%;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.allBrandsCopy,
.topBrandsCopy {
    display: inline-block;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
}

.allBrandsCopy,
.topBrandsCopy {
    width: 45px;
}

.article-seeall-tile .menu-dropdown-arrow {
    width: 12px;
}

.article-seeall-tile .menu-dropdown-arrow:before {
    font-family: 'icomoon';
    content: "\2193";
}

.article-seeall-tile .topBrandsCopy.menu-dropdown-arrow {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

@media (max-width: 767px) {
    .research-by-make {margin-bottom:20px;}
    .research-by-make-mobile-ul, .research-by-make-mobile-ul-hidden {
        list-style: none;
        column-count: 2;
        overflow:hidden 
    }
    .research-by-make-mobile-ul li, .research-by-make-mobile-ul-hidden li {
        font-size: 18px;
        padding: 6px 0;
        margin:0 5px;
    }
    .research-by-make-mobile input {
      position: absolute;
      opacity: 0;
      z-index: -1;
    }
    .research-by-make .tab-label {
      display: -webkit-box;
      display: flex;
      -webkit-box-pack: justify;
      justify-content: space-between;
      padding: 1em;
      background: #f8f8f8;
      font-weight: bold;
      cursor: pointer;
      margin-top:5px;
      /* Icon */
    }
    .research-by-make .tab-label:hover {
      background: #f8f8f8;
    }
    .research-by-make .tab-label::after {
      content: "\276F";
      width: 1em;
      height: 1em;
      text-align: center;
      -webkit-transition: all 0.35s;
      transition: all 0.35s;
    }
    .research-by-make-mobile input:checked + .tab-label {
      background: #f8f8f8;
    }
    .research-by-make-mobile input:checked + .tab-label::after {
      -webkit-transform: rotate(90deg);
              transform: rotate(90deg);
    }
    .research-by-make-mobile .tab-content {
      max-height: 0;
      color: #414c58;
      background: white;
      -webkit-transition: all 0.35s;
      transition: all 0.35s;
      overflow:hidden;
      display: block
    }
    .research-by-make-mobile input:checked ~ .tab-content {
      max-height: 100vh;
    }
}