@import url("https://fonts.googleapis.com/css?family=Barlow|Chathura|Noto+Sans");
.trl-bg-left {
  position: absolute;
  content: '';
  width: 65%;
  height: 100%;
  left: -25%;
  top: 0;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  overflow: hidden;
  z-index: 4; }

.trl-bg-left-bg {
  background-image: url("../img/bg-grey.jpg");
  background-color: #999;
  background-size: cover;
  display: block;
  width: 120%;
  height: 120%;
  /** unskew **/
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg); }

.trl_wrap {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  background: #f3f3f3;
  padding-top: 170px; }

.trl_wrap > .inner {
  position: relative;
  z-index: 10;
  height: 100%;
  width: 100%; }

.trl-block-stage {
  position: relative;
  display: inline-block;
  float: left;
  width: 50%;
  height: 100%;
  overflow: hidden;
  padding: 0 20px;
  text-align: center; }

.trl-actor {
  position: relative;
  top: 50%;
  transform: translateY(-50%); }

.trl-actor img {
  max-width: 100%; }

.trl-block-content-r {
  display: inline-block;
  position: relative;
  float: left;
  width: 50%;
  height: 100%;
  overflow: hidden;
  padding-bottom: 40px; }

.trl-block-content-r > .inner {
  /*opacity: 0;*/
  position: relative;
  background: none;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  padding: 20px;
  padding-top: 0;
  padding-bottom: 60px; }

.trl-block-content-r:before,
.trl-block-content-r:after {
  z-index: 40;
  content: '';
  position: absolute;
  pointer-events: none;
  margin-left: -30px;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0; }

.trl-block-content-r:before {
  display: none;
  bottom: 0; }

.trl-block-content-r:after {
  top: 0;
  box-shadow: inset 0 20px 20px #f3f3f3;
  display: none; }

.trl-actor-icon > img {
  width: 100%; }

.trl-arrows {
  position: relative;
  margin-bottom: 15px;
  margin: 15px; }

.trl-stage-loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
  background: #fff; }

.trl-block-gallery {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  z-index: 99; }

.trl-block-gallery:before {
  display: none;
  position: absolute;
  content: '';
  background: #FFF;
  background-image: url("../../frontend/img/bg-grey.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 50%;
  width: 100%;
  height: 100%;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  box-shadow: 6px 0 6px -6px #BBB; }

.trl-block-gallery > .inner {
  display: inline-block;
  /*background: #333;*/
  width: 100%;
  height: 450px;
  position: relative;
  top: 50%;
  transform: translateY(-50%); }

.trl-g-item {
  display: block;
  margin-bottom: 14px; }

.trl-g-item img {
  width: 90%; }

/**** Tireology - MOBILE **/
@media (max-width: 960px) {
  .trl_wrap {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    background: #f3f3f3;
    padding-top: 0; }

  .trl-block-gallery {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99; }

  .trl-block-gallery > .inner {
    display: block;
    width: auto;
    height: auto;
    position: relative;
    top: 0;
    transform: none; }

  .trl-block-gallery:before {
    display: none; }

  .trl-g-item {
    display: block;
    width: 100%;
    margin-bottom: 14px;
    text-align: center; }

  .trl-g-item img {
    width: 150px;
    margin: 0 auto; }

  /************** **/
  .trl-bg-left-bg {
    display: none; }

  .trl-block-stage {
    display: block;
    height: 100%;
    overflow: hidden;
    text-align: center;
    position: absolute;
    padding: 30 20px;
    height: 300px;
    float: none;
    width: 100%;
    overflow: display;
    top: 30px; }

  .trl-actor {
    position: relative;
    top: 0;
    transform: none; }

  .trl-actor img {
    max-width: 100%;
    max-height: 250px; }

  .trl-block-content-r {
    display: block;
    position: relative;
    float: none;
    width: 100%;
    height: auto;
    overflow: display;
    padding-bottom: 0; }

  .trl-block-content-r > .inner {
    position: relative;
    background: none;
    width: 100%;
    height: auto;
    overflow-y: auto;
    margin-top: 300px;
    padding: 0 15px 100px 15px; }

  .trl-arrows {
    position: absolute;
    bottom: 0; }
    .trl-arrows .btn-main {
      padding: 10px 10px; }
      .trl-arrows .btn-main span {
        color: #FFF;
        font-size: 1em;
        font-weight: 400; }

  .trl-actor-icon {
    text-align: right; }

  .trl-actor-icon img {
    width: 120px; }

  .trl-actor-body img {
    max-width: 100%; } }

/*# sourceMappingURL=tireology.css.map */