/**
 *	Base styling for Matrix Group Branding Area jQuery Plugin
 *	Author:
 *		Matrix Group International	<http://matrixgroup.net>
 *		Roger Vandawalker <rvandawalker@matrixgroup.net>, @rjv
 *	Version: 1.0
 *
 */
.mtx-branding {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  background: #ccc; }
  .mtx-branding .slides-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .mtx-branding .slides-container .slide {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
      .mtx-branding .slides-container .slide .slide-background {
        z-index: 10;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; }
      .mtx-branding .slides-container .slide .slide-thumbnail {
        display: none; }
      .mtx-branding .slides-container .slide .slide-content {
        z-index: 20;
        position: absolute;
        bottom: 0;
        padding: 2% 3%;
        background: black;
        background: rgba(0, 0, 0, 0.6);
        box-sizing: border-box;
        width: 100%;
        color: #fff;
        font-size: 100%; }
  .mtx-branding .slide-indicators {
    position: absolute;
    top: 0;
    right: 0;
    list-style: none;
    margin: .4em .2em 0 0;
    padding: 0;
    z-index: 30; }
    .mtx-branding .slide-indicators li {
      float: left;
      margin-right: .2em; }
      .mtx-branding .slide-indicators li a {
        display: block;
        padding: 0 .4em;
        background: rgba(0, 0, 0, 0.6);
        text-decoration: none;
        color: #fff;
        border-radius: 10px;
        border: 1px solid rgba(0, 0, 0, 0.7);
        font-size: .7em;
        text-indent: -99999px;
        width: 5px; }
      .mtx-branding .slide-indicators li.current a {
        background: #fff;
        color: #000; }
  .mtx-branding .prev,
  .mtx-branding .next {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    bottom: 50%;
    overflow: hidden;
    background: white;
    background: rgba(255, 255, 255, 0.5);
    color: #000;
    padding: .5% 2%;
    text-decoration: none;
    font-weight: bold;
    font-size: 115%;
    z-index: 25;
    -moz-background-clip: border;
    -webkit-background-clip: border;
    background-clip: border-box;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out; }
    .mtx-branding .prev:hover,
    .mtx-branding .next:hover {
      background: #f0f0f0;
      background: rgba(255, 255, 255, 0.8); }
  .mtx-branding .next {
    right: 0; }
  .mtx-branding:hover {
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out; }
    .mtx-branding:hover .prev,
    .mtx-branding:hover .next {
      opacity: 1; }

.slide-thumbnails {
  width: 100%;
  max-height: 5.8em;
  overflow-y: hidden;
  overflow-x: auto;
  padding: .4em 0;
  margin-top: .5em;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.1); }
  .slide-thumbnails > div {
    width: 20000em;
    height: 4em;
    position: relative; }
  .slide-thumbnails img {
    height: 4em;
    margin-left: .5em;
    box-sizing: border-box;
    opacity: .6;
    cursor: pointer; }
    .slide-thumbnails img.current {
      opacity: 1;
      outline: 0.1em solid rgba(0, 0, 0, 0.9); }