/* ================================================================================ */
/* MULTIMEDIA */
/* (main.scss) */
/* ================================================================================ */
.media-head .hud {
  display: block;
  clear: both;
  margin-bottom: 1.5em; }
.media-head .media-selector a {
  display: inline-block;
  line-height: 35px;
  background: #d8d8d8;
  color: #656565;
  font-family: 'Napco_1';
  text-transform: uppercase;
  padding: 0 12px; }
  .media-head .media-selector a:hover {
    text-decoration: none;
    background: #e4e4e4; }
  .media-head .media-selector a.active {
    background: black;
    color: white;
    font-weight: 700; }
.media-head .sort-by {
  display: block;
  text-align: right; }
  .media-head .sort-by label {
    display: inline-block;
    line-height: 35px;
    color: #2397db;
    font-family: 'Napco_1';
    text-transform: uppercase;
    padding-right: 6px; }
.media-head .choose {
  display: block;
  clear: both;
  margin-bottom: 2em; }
  .media-head .choose .h3 {
    float: left; }
  .media-head .choose .dropdown {
    float: left;
    min-width: 200px;
    margin: 5px 0 0 20px; }
  .media-head .choose .customSelectInner {
    width: 100% !important; }
@media (max-width: 600px) {
  .media-head .hud {
    margin-bottom: 0; }
  .media-head .sort-by {
    text-align: center; }
  .media-head .media-selector {
    margin-bottom: 1.2em;
    display: block;
    text-align: center; }
  .media-head .choose {
    width: 250px;
    margin: 0 auto;
    display: block;
    margin-bottom: 1.5em; }
    .media-head .choose .h3 {
      text-align: center;
      float: none;
      display: block;
      clear: both; }
    .media-head .choose .dropdown {
      clear: both;
      float: none;
      display: block;
      margin: 0 auto; } }

.media-post .media-thumb {
  position: relative;
  display: block;
  margin-bottom: .5em;
  cursor: pointer; }
.media-post .media-thumb a {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; }
  .media-post .media-thumb a img {
    display: block;
    width: 100%;
    height: auto; }
  .media-post .media-thumb a:after {
    content: '';
    position: absolute;
    height: 28px;
    top: 50%;
    left: 50%;
    margin-top: -14px;
    background: url(../../images/sprite_ui.png) no-repeat;
    display: block;
    text-indent: -9999em;
    z-index: 4;
    opacity: 1;
    -ms-filter: "alpha(opacity=100)";
    -webkit-transition: opacity 500ms ease;
    -moz-transition: opacity 500ms ease;
    -o-transition: opacity 500ms ease;
    transition: opacity 500ms ease; }
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      .media-post .media-thumb a:after {
        background-image: url(../../images/sprite_ui_2x.png) !important;
        -webkit-background-size: 800px 800px;
        background-size: 800px 800px; } }
  .media-post .media-thumb a:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 3;
    -webkit-transition: opacity 500ms ease;
    -moz-transition: opacity 500ms ease;
    -o-transition: opacity 500ms ease;
    transition: opacity 500ms ease; }
.media-post .media-thumb:hover a:before, .media-post .media-thumb:hover a:after {
  opacity: 0;
  -ms-filter: "alpha(opacity=0)"; }
.media-post .media-title {
  display: block;
  clear: both;
  line-height: 1.2em; }

.media-post.type-video .media-thumb a:after {
  width: 28px;
  margin-left: -14px;
  background-position: -241px 0; }

.media-post.type-ss .media-thumb a:after {
  width: 35px;
  margin-left: -17px;
  background-position: -308px 0; }

.media-post.type-audio .media-thumb a:after {
  width: 28px;
  margin-left: -14px;
  background-position: -274px 0; }

.featured-media .media-post .media-thumb a:before {
  width: 70px;
  height: 70px;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1;
  left: 50%;
  margin-left: -35px;
  top: 50%;
  margin-top: -35px; }
@media (max-width: 600px) {
  .featured-media .media-post {
    text-align: center; }
    .featured-media .media-post:first-child {
      margin-bottom: 2em; } }

.media-page .double-line {
  margin: 2.5em 0; }

.media-feed .media-post {
  height: 180px; }
  @media (max-width: 480px) {
    .media-feed .media-post {
      height: 150px; } }
.media-feed .media-title {
  font-size: 1em;
  font-weight: 700; }
.media-feed .line {
  margin: 2em 0; }

.media-detail-top {
  background: white;
  padding-top: 1em;
  display: block; }
  .media-detail-top .search-nav-wrap {
    display: block;
    clear: both;
    margin-bottom: 1.2em; }
  .media-detail-top .back-to-media {
    float: left;
    color: white;
    background: #2397db;
    height: 44px;
    line-height: 44px;
    font-family: 'Napco_1';
    font-weight: 700;
    padding: 0 12px 0 40px;
    font-size: 1.5em;
    position: relative; }
    .media-detail-top .back-to-media:hover {
      background: #d22029;
      text-decoration: none; }
    .media-detail-top .back-to-media:after {
      content: '';
      display: block;
      position: absolute;
      background: url(../../images/sprite_ui.png) no-repeat;
      display: block;
      text-indent: -9999em;
      width: 24px;
      height: 24px;
      background-position: -147px -158px;
      left: 8px;
      top: 50%;
      margin-top: -12px; }
      @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        .media-detail-top .back-to-media:after {
          background-image: url(../../images/sprite_ui_2x.png) !important;
          -webkit-background-size: 800px 800px;
          background-size: 800px 800px; } }
  .media-detail-top .search-block {
    float: right;
    width: 40%;
    clear: none; }
  @media (max-width: 480px) {
    .media-detail-top .back-to-media {
      float: none;
      display: block;
      margin: 0 auto;
      text-align: center;
      margin-bottom: 1em; }
    .media-detail-top .search-block {
      float: none;
      width: auto;
      display: block;
      clear: both; } }

.media-detail-mid {
  background: black;
  padding: 2em 0;
  display: block;
  clear: both;
  color: white; }
  .media-detail-mid .video-wrap {
    display: block;
    clear: both;
    margin-bottom: 1em; }
  .media-detail-mid h1 {
    display: block;
    clear: both;
    margin-bottom: 0.8em; }
  .media-detail-mid .ad-300 {
    display: block;
    clear: both;
    max-width: 300px;
    margin: 0 auto; }
    .media-detail-mid .ad-300.top {
      margin-bottom: 1.5em; }
  @media (max-width: 480px) {
    .media-detail-mid .content-area {
      margin-bottom: 1.2em; } }

.media-detail-bot {
  background: white;
  display: block;
  clear: both;
  padding: 1.5em 0; }