@charset "UTF-8";

html.chm-modal-opened,
body.chm-modal-opened {
   overflow: hidden!important;
}

.chm-wrapper {
   width: 100%;
   height: 100%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 99999;
   outline: 0!important;
   -webkit-backface-visibility: hidden;
   display: none;
}

   .chm-outer-frame {
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.6);
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
   }

      .chm-inner-frame {
         width: 100%;
         height: 100%;
         text-align: center;
         padding: 40px 35px;
         cursor: zoom-out;
         position: absolute;
         top: 0;
         left: 0;
         z-index: 1001;
         overflow-y: scroll;
         -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }

         .chm-inner-frame:before {
            height: 100%;
            content: '';
            display: inline-block;
            vertical-align: middle;
         }

         /* CHM CONTENT */
         .chm-content {
            position: relative;
            display: inline-block;
            margin: 0 auto;
            text-align: left;
            vertical-align: middle;
            z-index: 1005;
            cursor: pointer;
         }

         /* CONTENT VIDEO STYLING */
         .chm-content-container .chm-content .chm-content-frame {
            max-width: 680px;
            background: #ffffff;
            border-radius: 8px;
            padding: 0.5em 1em;
            box-shadow: 0 4px 8px rgba(0,0,0,0.4);
         }

         /* IFRAME VIDEO STYLING */
         .chm-video-container .chm-content {
            width: 100%;
            height: 100%;
         }

            .chm-video-container .chm-content .chm-content-frame {
               width: 100%;
               height: 100%;
               margin: 0 auto;
               text-align: center;
            }

            .chm-video-wrapper {
               width: 100%;
               height: 100%;
               display: table;
            }

               .chm-video-wrapper .chm-video-container {
                  width: 100%;
                  height: 100%;
                  min-height: 380px;
                  display: table-cell;
                  vertical-align: middle;
               }

               @media only screen and (max-width: 736px){
                  .chm-video-wrapper .chm-video-container {
                     height: 100%;
                     max-height: 280px;
                     min-height: inherit;
                  }
               }

         .chm-image-container .chm-content {
            max-width: 100%;
         }

            .chm-image-container .chm-content:after {
               content: '';
               position: absolute;
               left: 0;
               top: 40px;
               bottom: 40px;
               display: block;
               right: 0;
               width: auto;
               height: auto;
               z-index: -1;
               box-shadow: 0 0 8px rgba(0,0,0,.6);
               background: #444;
            }

            /* CHM IMAGES */
            .chm-image-container .chm-content img {
               width: auto;
               max-width: 100%;
               height: auto;
               /*max-height: 100%;*/
               display: block;
               padding: 40px 0;
               margin: 0 auto;
               line-height: 0;
               -webkit-box-sizing: border-box;
               -moz-box-sizing: border-box;
               box-sizing: border-box;
            }

            .chm-sentinel-image {
               visibility: hidden;
            }

            /* CHM GROUPED IMAGES > IMAGE */
            .chm-grouped-images img:first-child.active,
            .chm-grouped-images img.active {
               display: inline-block!important;
            }

            .chm-grouped-images .chm-sentinel-image {
               visibility: hidden;
            }

            .chm-grouped-images img {
               position: absolute;
               top: 0;
               left: 0;
               display: none!important;
            }

            /* PREV / NEXT CONTROLS */
            .chm-control {
               width: 40px;
               height: 100%;
               position: absolute;
               top: 0;
               left: 6px;
               display: none;
               z-index: 1005;
            }

            .chm-control span {
               width: 36px;
               position: absolute;
               font-size: 30px;
               color: #ffffff;
               text-shadow: 0 2px 0 #000000, 0 4px 6px #000000;
               top: 50%;
               left: 0;
               margin-top: -18px;
            }

            .chm-control.next {
               left: auto;
               right: 6px;
               text-align: right;
            }

            /* CHM IFRAME */
            .chm-iframe {
               width: 100%;
               height: 100%;
               max-width: 680px;
               max-height: 380px;
               box-shadow: 0 4px 28px #000000;
            }

   /* CLOSE BUTTON */
   .chm-close-button {
      width: 42px;
      height: 42px;
      font-size: 28px;
      color: #ffffff;
      line-height: 35px;
      text-align: center;
      top: 10px;
      right: 27px;
      position: fixed;
      background: rgba(0,0,0,0.8);
      z-index: 1001;
      cursor: zoom-out;
      border: 2px solid #ffffff;
      border-radius: 50%;
   }

   .test-zone {
      width: 400px;
      height: 400px;
      background: #f7f7f7;
      position: relative;
   }

   .test-inner {
      width: 36px;
      height: 36px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -18px;
      background: #a7a7a7;
      z-index: 99;
   }