﻿/* #region RESPONSIVE ELEMENTS */
/* exception switches */
.only_on_small {
  display: block;
}
.only_on_large,
.only_on_medium,
.not_on_small {
  display: none !important;
}
.not_on_medium,
.not_on_large {
  display: inline-block !important;
}
/* responsive video embedding - http://avexdesigns.com/responsive-youtube-embed/#sthash.LOsZRDvj.dpuf */
/* In topics/reactions posted in Clubs prior to the release of this site,
   embedded youtube/vimeo videos will have the video class on its iframe.
   Therefor the not-selector is added here. Videos embedded after the release of this site
   will have a wrapper div with class video to be responsive as well. */
.video-left:not(iframe):not(.icon) {
  float: left;
  margin-right: 1em;
}
.video-right:not(iframe):not(.icon) {
  float: right;
  margin-left: 1em;
}
.video-left iframe,
.video-left object,
.video-left embed,
.video-right iframe,
.video-right object,
.video-right embed {
  border: 0;
}
.video:not(iframe):not(.icon) {
  float: none;
  height: 0;
  margin: 1em 0;
  overflow: hidden;
  padding: 30px 0 56.25%;
  position: relative;
}
.video iframe,
.video object,
.video embed {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
@media screen and (max-width: 650px) {
  .video-left:not(iframe):not(.icon),
  .video-right:not(iframe):not(.icon),
  .video:not(iframe):not(.icon) {
    float: none;
    height: 0;
    margin: 1em 0;
    overflow: hidden;
    padding: 30px 0 56.25%;
    position: relative;
  }
  .video-left iframe,
  .video-left object,
  .video-left embed,
  .video-right iframe,
  .video-right object,
  .video-right embed,
  .video iframe,
  .video object,
  .video embed {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
}
/* #endregion */
/* MEDIUM SCREENS */
@media screen and (min-width: 650px) {
  /* #region ^ RESPONSIVE ELEMENTS */
  .only_on_small,
  .only_on_large,
  .not_on_medium {
    display: none !important;
  }
  .only_on_medium,
  .not_on_small {
    display: inline-block !important;
  }
  td.only_on_medium,
  td.not_on_small {
    display: table-cell !important;
  }
  col.not_on_small {
    display: table-column !important;
  }
  /* #endregion */
}
/* LARGE SCREENS */
@media screen and (min-width: 900px) {
  /* #region ^ RESPONSIVE ELEMENTS */
  /* exception switches */
  .only_on_small,
  .only_on_medium,
  .not_on_large {
    display: none !important;
  }
  .only_on_large,
  .not_on_small,
  .not_on_medium {
    display: inline-block !important;
  }
  /* #endregion */
}