body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  font-family: 'Kanit', sans-serif; }

*, *:before, *:after {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent; }

a {
  text-decoration: none; }

ul {
  margin: 0;
  padding: 0;
  list-style-type: none; }

li {
  display: inline-block;
  margin: 0;
  padding: 0; }

:focus {
  outline: none; }

#videos {
  /**
   * Container
   */
  /**
   * Play icon
   */
  /**
   * Video
   */
  /**
   * Thumbnails
   */
  /**
   * BG
   */ }
  @media (min-width: 660px) {
    #videos .container {
      overflow: hidden;
      padding: 40px 20px;
      height: 100%;
      width: 100%;
      position: absolute; }
      #videos .container .container-inner {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        width: 100%; } }
  @media (max-width: 659px) {
    #videos .container {
      padding: 20px 16px; } }
  #videos .poster:before, #videos .poster:after,
  #videos .thumbnail:before,
  #videos .thumbnail:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: url(../media/videos/play.png);
    background-size: 100% auto; }
    @media (max-width: 659px) {
      #videos .poster:before, #videos .poster:after,
      #videos .thumbnail:before,
      #videos .thumbnail:after {
        margin-left: -50px;
        margin-top: -50px;
        width: 100px;
        height: 100px; } }
    @media (min-width: 660px) {
      #videos .poster:before, #videos .poster:after,
      #videos .thumbnail:before,
      #videos .thumbnail:after {
        margin-left: -70px;
        margin-top: -70px;
        width: 140px;
        height: 140px; } }
  #videos .poster:before,
  #videos .thumbnail:before {
    transition: opacity 500ms; }
  #videos .poster:after,
  #videos .thumbnail:after {
    transition: opacity 500ms;
    opacity: 0;
    background-position: left bottom; }
  .no-touchevents #videos .poster:hover:after,
  .touchevents #videos .poster:active:after, .no-touchevents
  #videos .thumbnail:hover:after,
  .touchevents
  #videos .thumbnail:active:after {
    opacity: 1; }
  .no-touchevents #videos .poster:hover:before,
  .touchevents #videos .poster:active:before, .no-touchevents
  #videos .thumbnail:hover:before,
  .touchevents
  #videos .thumbnail:active:before {
    opacity: 0; }
  #videos .video {
    position: relative; }
    #videos .video .embed {
      position: relative;
      margin: 0 auto; }
    #videos .video .poster {
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: calc(100% + 4px);
      height: calc(100% + 4px);
      -webkit-transform: translate(-2px, -2px);
          -ms-transform: translate(-2px, -2px);
              transform: translate(-2px, -2px);
      background-size: cover;
      background-position: center center;
      z-index: 10; }
    #videos .video.has-clicked .poster {
      display: none; }
    @media (max-width: 659px) {
      #videos .video {
        display: none;
        background-color: #000;
        position: fixed;
        z-index: 10;
        top: 85px;
        left: 0;
        width: 100%;
        height: calc(100% - 85px); }
        #videos .video .poster {
          display: none !important; }
        #videos .video .prop {
          padding-top: 56.25%; }
        #videos .video .embed {
          top: 50%;
          left: 50%;
          position: absolute;
          -webkit-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%); }
          #videos .video .embed iframe {
            width: 100%;
            height: 100%; }
        #videos .video .close {
          background: url(../media/global/close.png) no-repeat;
          background-size: 100% auto;
          width: 20px;
          height: 20px;
          position: absolute;
          top: 10px;
          right: 10px; }
          .no-touchevents #videos .video .close:hover,
          .touchevents #videos .video .close:active {
            background-position: bottom left; } }
    @media (min-width: 660px) {
      #videos .video {
        display: block !important;
        opacity: 1 !important; }
        #videos .video .embed iframe {
          width: 100%;
          height: 100%; }
        #videos .video .poster:before, #videos .video .poster:after {
          margin-left: -70px;
          margin-top: -70px;
          width: 140px;
          height: 140px; } }
  #videos .thumbnails {
    display: none;
    font-size: 0;
    position: relative;
    z-index: 1;
    padding-top: 20px;
    text-align: center;
    margin: 0 -10px; }
    #videos .thumbnails a {
      color: #FFF;
      font-weight: 800; }
    #videos .thumbnails li {
      padding: 0 10px;
      vertical-align: top;
      font-size: 16px; }
    #videos .thumbnails img {
      display: block;
      position: relative;
      z-index: -2; }
    #videos .thumbnails .thumbnail {
      border: solid 4px #f7ca2c;
      position: relative;
      margin-bottom: 4px; }
    #videos .thumbnails .title {
      font-size: 0.875em;
      margin-top: 3px; }
    @media (max-width: 659px) {
      #videos .thumbnails li {
        margin-bottom: 20px;
        width: 100%; }
      #videos .thumbnails img {
        width: 100%;
        height: auto; } }
    @media (min-width: 660px) {
      #videos .thumbnails .title {
        width: 136px;
        margin: 0 auto; }
      #videos .thumbnails .thumbnails {
        height: 175px; }
      #videos .thumbnails img {
        width: 132px;
        height: 70px; }
      #videos .thumbnails li.active .thumbnail,
      .no-touchevents #videos .thumbnails li:hover .thumbnail,
      .touchevents #videos .thumbnails li:active .thumbnail {
        border: solid 4px #FFF; }
      #videos .thumbnails .thumbnail:before {
        content: "";
        width: 30px;
        height: 30px;
        position: absolute;
        background: url(../media/videos/play.png) no-repeat top left;
        background-size: cover;
        left: 5px;
        top: 5px;
        margin: 0;
        z-index: -1; }
      #videos .thumbnails .thumbnail:after {
        display: none; } }
  @media (min-width: 660px) {
    #videos .page-inner {
      background: url(../media/videos/bg.jpg) center top no-repeat;
      background-size: cover; } }
  @media (max-width: 659px) {
    #videos .page-inner {
      background: #000 url(../media/videos/bg-mobile.jpg) center top no-repeat;
      background-size: 100% auto; } }
/*# sourceMappingURL=videos.css.map */