@charset "UTF-8";
.mgl_instagram_gallery {
  overflow: hidden;
  font-size: 14px; }
  .mgl_instagram_gallery a {
    border: none; }

.mgl_instagram_gallery_content {
  position: relative;
  transition: opacity 1s;
  overflow: hidden; }
  .mgl_instagram_gallery_content .mgl_instagram_photo {
    position: relative;
    width: 25%;
    float: left;
    overflow: hidden;
    display: block;
    border: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box; }
    .mgl_instagram_gallery_content .mgl_instagram_photo span {
      display: block; }
  .mgl_instagram_gallery_content .mgl_instagram_mask {
    width: 100%;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    overflow: hidden;
    box-sizing: border-box; }
  .mgl_instagram_gallery_content .mgl_instagram_user {
    font-weight: bold; }
  .mgl_instagram_gallery_content .mgl_instagram_avatar img {
    display: block;
    width: 100%;
    height: auto; }
  .mgl_instagram_gallery_content .mgl_instagram_info {
    box-sizing: border-box;
    -moz-box-sizing: border-box; }
  .mgl_instagram_gallery_content .mgl_instagram_text {
    display: block;
    clear: both; }
  .mgl_instagram_gallery_content .mgl_instagram_photo_container {
    position: relative;
    display: block;
    height: 0;
    padding-bottom: 100%;
    background: rgba(0, 0, 0, 0.1); }
  .mgl_instagram_gallery_content .mgl_instagram_image {
    display: block;
    width: 100%;
    box-shadow: none; }

.mgl_instagram_pagination {
  clear: both;
  overflow: hidden;
  border-width: 1px 0;
  margin: 10px 0 20px;
  padding: 0 10px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; }
  .mgl_instagram_pagination a {
    border: none;
    text-decoration: none; }
  .mgl_instagram_pagination .mgl_instagram_pagination_item {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1; }
  .mgl_instagram_pagination .mgl_instagram_pagination_next {
    text-align: right;
    float: right; }
    .mgl_instagram_pagination .mgl_instagram_pagination_next:after {
      content: "\2192";
      margin-left: 5px; }
  .mgl_instagram_pagination .mgl_instagram_pagination_prev {
    text-align: left;
    float: left; }
    .mgl_instagram_pagination .mgl_instagram_pagination_prev:before {
      content: "\2190";
      margin-right: 5px; }
  .mgl_instagram_pagination.mgl_instagram_skin_default {
    margin: 10px 10px 20px; }
  .mgl_instagram_pagination.mgl_instagram_skin_dark {
    border-width: 0; }
    .mgl_instagram_pagination.mgl_instagram_skin_dark .mgl_instagram_pagination_next {
      font-weight: bold; }
  .mgl_instagram_pagination.mgl_instagram_skin_elegant {
    border-style: dotted; }
    .mgl_instagram_pagination.mgl_instagram_skin_elegant .mgl_instagram_pagination_next {
      color: #333;
      font-weight: bold;
      text-transform: uppercase; }

.mgl_instagram_spinner {
  margin: 100px auto 0;
  width: 70px;
  text-align: center;
  position: absolute;
  top: 50%;
  margin-top: -9px;
  left: 50%;
  margin-left: -35px; }

.mgl_instagram_spinner > div {
  width: 18px;
  height: 18px;
  background-color: rgba(50, 50, 50, 0.7);
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both; }

.mgl_instagram_spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s; }

.mgl_instagram_spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s; }

@-webkit-keyframes bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0); }
  40% {
    -webkit-transform: scale(1); } }

@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0);
    -webkit-transform: scale(0); }
  40% {
    transform: scale(1);
    -webkit-transform: scale(1); } }

@font-face {
  font-family: 'mgl_instagram_gallery';
  src: url("../font/mgl_instagram_gallery.eot?49880101");
  src: url("../font/mgl_instagram_gallery.eot?49880101#iefix") format("embedded-opentype"), url("../font/mgl_instagram_gallery.woff?49880101") format("woff"), url("../font/mgl_instagram_gallery.ttf?49880101") format("truetype"), url("../font/mgl_instagram_gallery.svg?49880101#mgl_instagram_gallery") format("svg");
  font-weight: normal;
  font-style: normal; }

.mgl_instagram_photo_container [class^="mgl_instagram_icon-"]:before, .mgl_instagram_photo_container [class*=" mgl_instagram_icon-"]:before {
  font-family: "mgl_instagram_gallery";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em; }

.mgl_instagram_icon-heart:before {
  content: '\e800'; }

/* '' */
.mgl_instagram_icon-comment:before {
  content: '\e801'; }

/* '' */
.mgl_instagram_lightbox.mfp-bg {
  opacity: 0;
  transition: all 0.5s ease-out; }

.mgl_instagram_lightbox.mfp-bg.mfp-ready {
  opacity: 0.8; }

.mgl_instagram_lightbox.mfp-bg.mfp-removing {
  opacity: 0; }

.mgl_instagram_lightbox.mfp-wrap .mfp-content {
  opacity: 0;
  margin-top: -1200px;
  transition: all 0.5s ease-out; }

.mgl_instagram_lightbox.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
  margin-top: 0; }

.mgl_instagram_lightbox.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
  margin-top: -1200px; }

.mgl_instagram_video {
  width: 612px;
  padding: 40px 0;
  display: block; }

.mgl_instagram_video video {
  min-height: 612px;
  visibility: visible;
  display: block;
  margin: 0; }

.mfp-title {
  display: none; }

@media (max-width: 700px) {
  .mgl_instagram_video {
    width: 100%; }
  .mgl_instagram_video video {
    min-height: 0; } }

/* Firefox fix for flash player */
.mgl_instagram_video.mgl_firefox .vjs-tech {
  height: 612px; }

/* Table */
.mgl_instagram_table {
  width: 100%; }
  .mgl_instagram_table td, .mgl_instagram_table th {
    padding: 10px;
    text-align: left; }
  .mgl_instagram_table th {
    font-weight: bold; }
  .mgl_instagram_table tbody tr td {
    background-color: #fff;
    border-top: 1px solid #eee; }
  .mgl_instagram_table tbody tr:nth-child(2n+1) td {
    background-color: #f7f7f7; }

.mgl_instagram_gallery__rtl {
  direction: rtl;
  unicode-bidi: embed; }
  .mgl_instagram_gallery__rtl .mgl_instagram_photo {
    float: right; }
  .mgl_instagram_gallery__rtl .mgl_instagram_pagination_next {
    float: left; }
    .mgl_instagram_gallery__rtl .mgl_instagram_pagination_next:after {
      content: "\2190";
      margin-right: 5px; }
  .mgl_instagram_gallery__rtl .mgl_instagram_pagination_prev {
    float: right; }
    .mgl_instagram_gallery__rtl .mgl_instagram_pagination_prev:before {
      content: "\2192";
      margin-left: 5px; }

.mfp-rtl .mfp-close {
  text-align: left !important; }

.mfp-rtl .mfp-arrow {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg); }

.mfp-rtl .mfp-arrow-right {
  left: 0;
  right: auto; }

.mfp-rtl .mfp-arrow-left {
  right: 0;
  left: auto; }

.mfp-rtl .mfp-title {
  text-align: right;
  padding-right: 0;
  padding-left: 36px; }

.mfp-rtl .mfp-counter {
  right: auto;
  left: 0; }

.mgl_instagram_template_default {
  color: #a5a7aa; }
  .mgl_instagram_template_default .mgl_instagram_photo {
    padding: 10px; }
    .mgl_instagram_template_default .mgl_instagram_photo .mgl_instagram_photo_container {
      overflow: hidden;
      border-radius: 3px;
      border: 1px solid #edeeee;
      position: relative; }
    .mgl_instagram_template_default .mgl_instagram_photo .mgl_instagram_user {
      top: 0;
      left: 0;
      width: 100%;
      overflow: hidden;
      display: -webkit-flex !important;
      display: -ms-flexbox !important;
      display: flex !important;
      -webkit-align-items: center;
      -ms-flex-align: center;
      align-items: center;
      color: #125688;
      border-bottom: 1px solid #edeeee;
      -webkit-transform: translateY(-100%);
      transform: translateY(-100%); }
    .mgl_instagram_template_default .mgl_instagram_photo .mgl_instagram_user, .mgl_instagram_template_default .mgl_instagram_photo .mgl_instagram_info {
      transition: -webkit-transform 0.5s;
      transition: transform 0.5s;
      background-color: #fff;
      padding: 10px; }
    .mgl_instagram_template_default .mgl_instagram_photo .mgl_instagram_avatar {
      float: left;
      width: 10%;
      overflow: hidden;
      border-radius: 50%;
      margin-right: 10px; }
      .mgl_instagram_template_default .mgl_instagram_photo .mgl_instagram_avatar img {
        width: 100%; }
    .mgl_instagram_template_default .mgl_instagram_photo .mgl_instagram_mask {
      color: #a5a7aa;
      top: 0;
      height: 100%;
      width: 100%; }
      .mgl_instagram_template_default .mgl_instagram_photo .mgl_instagram_mask .mgl_instagram_info {
        position: absolute;
        bottom: 0;
        width: 100%;
        max-height: 40%;
        border-top: 1px solid #edeeee;
        -webkit-transform: translateY(100%);
        transform: translateY(100%); }
        .mgl_instagram_template_default .mgl_instagram_photo .mgl_instagram_mask .mgl_instagram_info .mgl_instagram_likes, .mgl_instagram_template_default .mgl_instagram_photo .mgl_instagram_mask .mgl_instagram_info .mgl_instagram_comments {
          display: inline;
          font-weight: bold;
          color: #125688; }
          .mgl_instagram_template_default .mgl_instagram_photo .mgl_instagram_mask .mgl_instagram_info .mgl_instagram_likes i, .mgl_instagram_template_default .mgl_instagram_photo .mgl_instagram_mask .mgl_instagram_info .mgl_instagram_comments i {
            display: none; }
          .mgl_instagram_template_default .mgl_instagram_photo .mgl_instagram_mask .mgl_instagram_info .mgl_instagram_likes span, .mgl_instagram_template_default .mgl_instagram_photo .mgl_instagram_mask .mgl_instagram_info .mgl_instagram_comments span {
            display: inline; }
    .mgl_instagram_template_default .mgl_instagram_photo:hover .mgl_instagram_mask .mgl_instagram_user, .mgl_instagram_template_default .mgl_instagram_photo:hover .mgl_instagram_mask .mgl_instagram_info {
      -webkit-transform: translateY(0);
      transform: translateY(0); }
  .mgl_instagram_template_default.mgl_instagram_pagination a {
    border: 1px solid #edeeee;
    padding: 10px;
    background-color: #fff;
    border-radius: 3px;
    color: #125688;
    font-weight: bold; }

/* Basic */
.mgl_instagram_template_basic .mgl_instagram_photo {
  padding: 10px; }
  .mgl_instagram_template_basic .mgl_instagram_photo .mgl_instagram_mask {
    display: none; }

/* Instagram */
.mgl_instagram_template_instagram .mgl_instagram_photo {
  padding: 10px; }
  .mgl_instagram_template_instagram .mgl_instagram_photo:hover .mgl_instagram_mask {
    bottom: -2.2em;
    top: -2.2em;
    opacity: 1; }
  .mgl_instagram_template_instagram .mgl_instagram_photo .mgl_instagram_mask {
    color: #999;
    top: 0;
    bottom: 0;
    z-index: 0;
    opacity: 0;
    transition: top 0.5s, bottom 0.5s, opacity 0.5s;
    text-align: center; }
  .mgl_instagram_template_instagram .mgl_instagram_photo .mgl_instagram_avatar, .mgl_instagram_template_instagram .mgl_instagram_photo .mgl_instagram_text {
    display: none; }
  .mgl_instagram_template_instagram .mgl_instagram_photo .mgl_instagram_info {
    display: block;
    text-align: center; }
  .mgl_instagram_template_instagram .mgl_instagram_photo .mgl_instagram_counts {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    text-align: center;
    font-size: .9em;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }
    .mgl_instagram_template_instagram .mgl_instagram_photo .mgl_instagram_counts > span {
      -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
      flex-grow: 1; }
    .mgl_instagram_template_instagram .mgl_instagram_photo .mgl_instagram_counts .mgl_number {
      display: inline-block; }
    .mgl_instagram_template_instagram .mgl_instagram_photo .mgl_instagram_counts .mgl_text {
      display: none; }
  .mgl_instagram_template_instagram .mgl_instagram_photo .mgl_instagram_photo_container {
    padding: 5px 5px 97% 5px;
    margin: 20px 0;
    position: relative;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 5px rgba(0, 0, 0, 0.2);
    background-color: #fff; }
    .mgl_instagram_template_instagram .mgl_instagram_photo .mgl_instagram_photo_container .mgl_instagram_image {
      z-index: 1;
      position: relative; }

.mgl_instagram_template_dark .mgl_instagram_photo:hover .mgl_instagram_mask {
  opacity: 1; }
  .mgl_instagram_template_dark .mgl_instagram_photo:hover .mgl_instagram_mask .mgl_instagram_user {
    margin-top: 0; }

.mgl_instagram_template_dark .mgl_instagram_photo .mgl_instagram_mask {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  height: 100%;
  transition: opacity 0.5s;
  text-align: center;
  padding: 10px;
  opacity: 0; }

.mgl_instagram_template_dark .mgl_instagram_photo .mgl_instagram_avatar {
  padding-top: 20%;
  width: 30%;
  margin: 0 auto;
  transition: margin-top 0.3s ease-out 0.1s;
  display: block;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); }
  .mgl_instagram_template_dark .mgl_instagram_photo .mgl_instagram_avatar img {
    border-radius: 50%; }

.mgl_instagram_template_dark .mgl_instagram_photo .mgl_instagram_text {
  display: none; }

.mgl_instagram_template_dark .mgl_instagram_photo .mgl_instagram_user {
  display: block;
  text-align: center;
  font-weight: bold;
  margin-top: 120%;
  transition: margin-top 0.3s ease-out 0.2s; }

.mgl_instagram_template_dark .mgl_instagram_photo .mgl_instagram_info {
  display: block; }

.mgl_instagram_template_dark .mgl_instagram_photo .mgl_instagram_counts {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  text-align: center; }
  .mgl_instagram_template_dark .mgl_instagram_photo .mgl_instagram_counts > span {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1; }
  .mgl_instagram_template_dark .mgl_instagram_photo .mgl_instagram_counts .mgl_text {
    display: none; }

.mgl_instagram_template_elegant .mgl_instagram_photo {
  padding: 10px; }
  .mgl_instagram_template_elegant .mgl_instagram_photo:hover .mgl_instagram_mask {
    opacity: 1; }

.mgl_instagram_template_elegant .mgl_instagram_mask {
  color: #333;
  background-color: #F7F7F7;
  height: 100%;
  transition: opacity 1s;
  opacity: 0;
  padding: 15%; }
  .mgl_instagram_template_elegant .mgl_instagram_mask .mgl_instagram_avatar {
    display: none; }
  .mgl_instagram_template_elegant .mgl_instagram_mask .mgl_instagram_text {
    display: none; }
  .mgl_instagram_template_elegant .mgl_instagram_mask .mgl_instagram_user {
    display: block;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.2em;
    border-bottom: 1px dotted #BBBBBB;
    padding: 10% 0; }
  .mgl_instagram_template_elegant .mgl_instagram_mask .mgl_instagram_counts {
    display: block;
    padding-top: 10%;
    text-align: center;
    font-size: 0.8em;
    text-transform: uppercase;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }
    .mgl_instagram_template_elegant .mgl_instagram_mask .mgl_instagram_counts > span {
      -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
      flex-grow: 1; }
    .mgl_instagram_template_elegant .mgl_instagram_mask .mgl_instagram_counts .mgl_number, .mgl_instagram_template_elegant .mgl_instagram_mask .mgl_instagram_counts .mgl_text {
      display: inline-block; }
    .mgl_instagram_template_elegant .mgl_instagram_mask .mgl_instagram_counts .mgl_instagram_icon {
      display: none; }

.mgl_instagram_template_darkslide .mgl_instagram_photo {
  overflow: hidden; }
  .mgl_instagram_template_darkslide .mgl_instagram_photo:hover .mgl_instagram_mask {
    margin-left: 0; }
  .mgl_instagram_template_darkslide .mgl_instagram_photo:hover .mgl_instagram_photo_container .mgl_instagram_image {
    margin-left: 100%; }

.mgl_instagram_template_darkslide .mgl_instagram_mask {
  color: #fff;
  background-color: black;
  height: 100%;
  margin-left: -100%;
  transition: margin 0.5s;
  font-size: 0.8em;
  text-align: center; }
  .mgl_instagram_template_darkslide .mgl_instagram_mask .mgl_instagram_avatar {
    padding-top: 20%;
    width: 30%;
    margin: auto;
    transition: margin 0.5s;
    display: block;
    overflow: hidden; }
    .mgl_instagram_template_darkslide .mgl_instagram_mask .mgl_instagram_avatar img {
      border-radius: 50%; }
  .mgl_instagram_template_darkslide .mgl_instagram_mask .mgl_instagram_text {
    display: none; }
  .mgl_instagram_template_darkslide .mgl_instagram_mask .mgl_instagram_info .mgl_instagram_user {
    display: block;
    text-align: center;
    font-weight: bold; }
  .mgl_instagram_template_darkslide .mgl_instagram_mask .mgl_instagram_info .mgl_instagram_likes {
    display: block;
    text-align: center; }
  .mgl_instagram_template_darkslide .mgl_instagram_mask .mgl_instagram_counts {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center; }
    .mgl_instagram_template_darkslide .mgl_instagram_mask .mgl_instagram_counts > span {
      -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
      flex-grow: 1; }
    .mgl_instagram_template_darkslide .mgl_instagram_mask .mgl_instagram_counts .mgl_text {
      display: none; }

.mgl_instagram_template_darkslide .mgl_instagram_image {
  margin-left: 0;
  transition: margin 0.5s; }

.mgl_instagram_template_whiteslide .mgl_instagram_photo {
  overflow: hidden; }
  .mgl_instagram_template_whiteslide .mgl_instagram_photo:hover .mgl_instagram_mask {
    margin-left: 0; }
  .mgl_instagram_template_whiteslide .mgl_instagram_photo:hover .mgl_instagram_photo_container .mgl_instagram_image {
    margin-left: -100%; }

.mgl_instagram_template_whiteslide .mgl_instagram_mask {
  color: #666;
  background-color: white;
  height: 100%;
  margin-left: 100%;
  transition: margin 0.5s;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.1) inset !important;
  font-size: 0.8em;
  text-align: center; }
  .mgl_instagram_template_whiteslide .mgl_instagram_mask .mgl_instagram_avatar {
    padding-top: 20%;
    width: 30%;
    margin: auto;
    transition: margin 0.5s;
    display: block;
    overflow: hidden; }
    .mgl_instagram_template_whiteslide .mgl_instagram_mask .mgl_instagram_avatar img {
      border-radius: 50%; }
  .mgl_instagram_template_whiteslide .mgl_instagram_mask .mgl_instagram_text {
    display: none; }
  .mgl_instagram_template_whiteslide .mgl_instagram_mask .mgl_instagram_info .mgl_instagram_user {
    display: block;
    text-align: center;
    font-weight: bold; }
  .mgl_instagram_template_whiteslide .mgl_instagram_mask .mgl_instagram_info .mgl_instagram_likes {
    display: block;
    text-align: center; }
  .mgl_instagram_template_whiteslide .mgl_instagram_mask .mgl_instagram_counts {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    text-align: center; }
    .mgl_instagram_template_whiteslide .mgl_instagram_mask .mgl_instagram_counts > span {
      -webkit-flex-grow: 1;
      -ms-flex-positive: 1;
      flex-grow: 1; }
    .mgl_instagram_template_whiteslide .mgl_instagram_mask .mgl_instagram_counts .mgl_text {
      display: none; }

.mgl_instagram_template_whiteslide .mgl_instagram_image {
  margin-left: 0;
  transition: margin 0.5s; }

.mgl_instagram_gallery.cols1 .mgl_instagram_photo {
  width: 100%; }

.mgl_instagram_gallery.cols2 .mgl_instagram_photo {
  width: 50%; }

.mgl_instagram_gallery.cols3 .mgl_instagram_photo {
  width: 33.33333%; }

.mgl_instagram_gallery.cols4 .mgl_instagram_photo {
  width: 25%; }

.mgl_instagram_gallery.cols5 .mgl_instagram_photo {
  width: 20%; }

.mgl_instagram_gallery.cols6 .mgl_instagram_photo {
  width: 16.66667%; }

.mgl_instagram_gallery.cols7 .mgl_instagram_photo {
  width: 14.28571%; }

.mgl_instagram_gallery.cols8 .mgl_instagram_photo {
  width: 12.5%; }

.mgl_instagram_gallery.cols9 .mgl_instagram_photo {
  width: 11.11111%; }

.mgl_instagram_gallery.cols10 .mgl_instagram_photo {
  width: 10%; }

.mgl_instagram_gallery.cols11 .mgl_instagram_photo {
  width: 9.09091%; }

.mgl_instagram_gallery.cols12 .mgl_instagram_photo {
  width: 8.33333%; }

@media (max-width: 782px) {
  .mgl_instagram_gallery_responsive.cols5 .mgl_instagram_photo {
    width: 25% !important; }
  .mgl_instagram_gallery_responsive.cols6 .mgl_instagram_photo {
    width: 25% !important; }
  .mgl_instagram_gallery_responsive.cols7 .mgl_instagram_photo {
    width: 25% !important; }
  .mgl_instagram_gallery_responsive.cols8 .mgl_instagram_photo {
    width: 25% !important; }
  .mgl_instagram_gallery_responsive.cols9 .mgl_instagram_photo {
    width: 25% !important; }
  .mgl_instagram_gallery_responsive.cols10 .mgl_instagram_photo {
    width: 25% !important; }
  .mgl_instagram_gallery_responsive.cols11 .mgl_instagram_photo {
    width: 25% !important; }
  .mgl_instagram_gallery_responsive.cols12 .mgl_instagram_photo {
    width: 25% !important; } }

@media (max-width: 600px) {
  .mgl_instagram_gallery_responsive.cols4 .mgl_instagram_photo {
    width: 33.3% !important; }
  .mgl_instagram_gallery_responsive.cols5 .mgl_instagram_photo {
    width: 33.3% !important; }
  .mgl_instagram_gallery_responsive.cols6 .mgl_instagram_photo {
    width: 33.3% !important; }
  .mgl_instagram_gallery_responsive.cols7 .mgl_instagram_photo {
    width: 33.3% !important; }
  .mgl_instagram_gallery_responsive.cols8 .mgl_instagram_photo {
    width: 33.3% !important; }
  .mgl_instagram_gallery_responsive.cols9 .mgl_instagram_photo {
    width: 33.3% !important; }
  .mgl_instagram_gallery_responsive.cols10 .mgl_instagram_photo {
    width: 33.3% !important; }
  .mgl_instagram_gallery_responsive.cols11 .mgl_instagram_photo {
    width: 33.3% !important; }
  .mgl_instagram_gallery_responsive.cols12 .mgl_instagram_photo {
    width: 33.3% !important; } }

@media (max-width: 380px) {
  .mgl_instagram_gallery_responsive.cols2 .mgl_instagram_photo {
    width: 50% !important; }
  .mgl_instagram_gallery_responsive.cols3 .mgl_instagram_photo {
    width: 50% !important; }
  .mgl_instagram_gallery_responsive.cols4 .mgl_instagram_photo {
    width: 50% !important; }
  .mgl_instagram_gallery_responsive.cols5 .mgl_instagram_photo {
    width: 50% !important; }
  .mgl_instagram_gallery_responsive.cols6 .mgl_instagram_photo {
    width: 50% !important; }
  .mgl_instagram_gallery_responsive.cols7 .mgl_instagram_photo {
    width: 50% !important; }
  .mgl_instagram_gallery_responsive.cols8 .mgl_instagram_photo {
    width: 50% !important; }
  .mgl_instagram_gallery_responsive.cols9 .mgl_instagram_photo {
    width: 50% !important; }
  .mgl_instagram_gallery_responsive.cols10 .mgl_instagram_photo {
    width: 50% !important; }
  .mgl_instagram_gallery_responsive.cols11 .mgl_instagram_photo {
    width: 50% !important; }
  .mgl_instagram_gallery_responsive.cols12 .mgl_instagram_photo {
    width: 50% !important; } }

.mgl-instagram-card {
  font-size: 14px;
  box-sizing: border-box;
  overflow: hidden; }
  .mgl-instagram-card * {
    box-sizing: border-box; }
  .mgl-instagram-card a {
    color: #3f729b; }
  .mgl-instagram-card__header {
    text-align: center;
    padding: 10px;
    background: #3f729b url("../images/bg_instagram.jpg") center;
    background-size: cover;
    color: #fff;
    text-transform: uppercase; }
    .mgl-instagram-card__header__title {
      background: url("../images/mgl_instagram_glyph.png") no-repeat center left;
      background-size: 16px 16px;
      padding-left: 32px; }
  .mgl-instagram-card__container {
    background-color: #fff;
    border: 1px solid #ddd; }
  .mgl-instagram-card__avatar {
    width: 25%;
    float: left;
    border: 1px solid #ddd;
    border-radius: 50%;
    overflow: hidden; }
    .mgl-instagram-card__avatar img {
      display: block;
      width: 100%; }
  .mgl-instagram-card__bio {
    width: 75%;
    float: left;
    padding-left: 15px; }
    .mgl-instagram-card__bio__name {
      color: #444;
      font-weight: bold; }
  .mgl-instagram-card__row {
    border-top: 1px solid #ddd;
    padding: 15px; }
    .mgl-instagram-card__row:first-child {
      border-top: none; }
    .mgl-instagram-card__row:after {
      content: "";
      clear: both;
      display: block; }
  .mgl-instagram-card__counts {
    margin: 0;
    padding: 0;
    display: table;
    width: 100%; }
    .mgl-instagram-card__counts li {
      display: table-cell;
      width: 33.33%;
      text-align: center; }
      .mgl-instagram-card__counts li span {
        color: #444;
        font-size: 2rem; }
      .mgl-instagram-card__counts li small {
        display: block;
        text-align: center; }

/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10002;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
  filter: alpha(opacity=80); }

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10003;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; }

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  box-sizing: border-box; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 10005; }

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: auto !important;
  cursor: auto; }

.mfp-ajax-cur {
  cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
  cursor: auto; }

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.mfp-loading.mfp-figure {
  display: none; }

.mfp-hide {
  display: none !important; }

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 10004; }
  .mfp-preloader a {
    color: #CCC; }
    .mfp-preloader a:hover {
      color: #FFF; }

.mfp-s-ready .mfp-preloader {
  display: none; }

.mfp-s-error .mfp-content {
  display: none; }

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 10006;
  box-shadow: none; }

button::-moz-focus-inner {
  padding: 0;
  border: 0; }

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  filter: alpha(opacity=65);
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace; }
  .mfp-close:hover,
  .mfp-close:focus {
    opacity: 1;
    filter: alpha(opacity=100); }
  .mfp-close:active {
    top: 1px; }

.mfp-close-btn-in .mfp-close {
  color: #ccc; }

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%; }

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap; }

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  filter: alpha(opacity=65);
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent; }
  .mfp-arrow:active {
    margin-top: -54px; }
  .mfp-arrow:hover,
  .mfp-arrow:focus {
    opacity: 1;
    filter: alpha(opacity=100); }
  .mfp-arrow:before,
  .mfp-arrow:after,
  .mfp-arrow .mfp-b,
  .mfp-arrow .mfp-a {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent; }
  .mfp-arrow:after,
  .mfp-arrow .mfp-a {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px; }
  .mfp-arrow:before,
  .mfp-arrow .mfp-b {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7; }

.mfp-arrow-left {
  left: 0; }
  .mfp-arrow-left:after,
  .mfp-arrow-left .mfp-a {
    border-right: 17px solid #FFF;
    margin-left: 31px; }
  .mfp-arrow-left:before,
  .mfp-arrow-left .mfp-b {
    margin-left: 25px;
    border-right: 27px solid #3F3F3F; }

.mfp-arrow-right {
  right: 0; }
  .mfp-arrow-right:after,
  .mfp-arrow-right .mfp-a {
    border-left: 17px solid #FFF;
    margin-left: 39px; }
  .mfp-arrow-right:before,
  .mfp-arrow-right .mfp-b {
    border-left: 27px solid #3F3F3F; }

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px; }
  .mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; }
  .mfp-iframe-holder .mfp-close {
    top: -40px; }

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%; }
  .mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000; }

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure {
  line-height: 0; }
  .mfp-figure: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, 0.6);
    background: #444; }
  .mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px; }
  .mfp-figure figure {
    margin: 0; }

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto; }

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px; }

.mfp-image-holder .mfp-content {
  max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0; }
  .mfp-img-mobile img.mfp-img {
    padding: 0; }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0; }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px; }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    box-sizing: border-box; }
    .mfp-img-mobile .mfp-bottom-bar:empty {
      padding: 0; }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px; }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0; } }

@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75); }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0; }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%; }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px; } }

.mfp-ie7 .mfp-img {
  padding: 0; }

.mfp-ie7 .mfp-bottom-bar {
  width: 600px;
  left: 50%;
  margin-left: -300px;
  margin-top: 5px;
  padding-bottom: 5px; }

.mfp-ie7 .mfp-container {
  padding: 0; }

.mfp-ie7 .mfp-content {
  padding-top: 44px; }

.mfp-ie7 .mfp-close {
  top: 0;
  right: 0;
  padding-top: 0; }

/*!
Video.js Default Styles (http://videojs.com)
Version 4.1.0
*/
/*
REQUIRED STYLES (be careful overriding)
================================================================================ */
/* When loading the player, the video tag is replaced with a DIV,
   that will hold the video tag or object tag for other playback methods.
   The div contains the video playback element (Flash or HTML5) and controls, and sets the width and height of the video.

   ** If you want to add some kind of border/padding (e.g. a frame), or special positioning, use another containing element.
   Otherwise you risk messing up control positioning and full window mode. **
*/
.video-js {
  position: relative;
  padding: 0;
  /* Start with 10px for base font size so other dimensions can be em based and easily calculable. */
  font-size: 10px;
  /* Allow poster to be vertially aligned. */
  vertical-align: middle;
  /*  display: table-cell; */
  /*This works in Safari but not Firefox.*/
  /* Turn off user selection (text highlighting) by default.
     The majority of player components will not be text blocks.
     Text areas will need to turn user selection back on. */
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  -o-user-select: none;
  user-select: none; }

/* Playback technology elements expand to the width/height of the containing div.
    <video> or <object> */
.video-js .vjs-tech {
  top: 0;
  left: 0;
  width: 100%; }

/* Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when checking fullScreenEnabled. */
.video-js:-moz-full-screen {
  position: absolute; }

/* Fullscreen Styles */
body.vjs-full-window {
  padding: 0;
  margin: 0;
  height: 100%;
  overflow-y: auto;
  /* Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html */ }

.video-js.vjs-fullscreen {
  position: fixed;
  overflow: hidden;
  z-index: 1000;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
  _position: absolute;
  /* IE6 Full-window (underscore hack) */ }

.video-js:-webkit-full-screen {
  width: 100% !important;
  height: 100% !important; }

.video-js.vjs-fullscreen video {
  width: auto !important;
  height: 100% !important;
  margin: 0 auto !important;
  display: block; }

/* Poster Styles */
.vjs-poster {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  cursor: pointer;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%; }

.vjs-poster img {
  display: block;
  margin: 0 auto;
  max-height: 100%;
  padding: 0;
  width: 100%; }

/* Text Track Styles */
/* Overall track holder for both captions and subtitles */
.video-js .vjs-text-track-display {
  text-align: center;
  position: absolute;
  bottom: 4em;
  left: 1em;
  /* Leave padding on left and right */
  right: 1em;
  font-family: Arial, sans-serif; }

/* Individual tracks */
.video-js .vjs-text-track {
  display: none;
  font-size: 1.4em;
  text-align: center;
  margin-bottom: 0.1em;
  /* Transparent black background, or fallback to all black (oldIE) */
  background: black;
  background: rgba(0, 0, 0, 0.5); }

.video-js .vjs-subtitles {
  color: #fff; }

/* Subtitles are white */
.video-js .vjs-captions {
  color: #fc6; }

/* Captions are yellow */
.vjs-tt-cue {
  display: block; }

/* Fading sytles, used to fade control bar. */
.vjs-fade-in {
  display: block !important;
  visibility: visible;
  /* Needed to make sure things hide in older browsers too. */
  opacity: 1;
  transition: visibility 0.1s, opacity 0.1s; }

.vjs-fade-out {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  transition: visibility 1.5s, opacity 1.5s;
  /* Wait a moment before fading out the control bar */
  transition-delay: 2s; }

/* Hide disabled or unsupported controls */
.vjs-default-skin .vjs-hidden {
  display: none; }

.vjs-lock-showing {
  display: block !important;
  opacity: 1;
  visibility: visible; }

/* DEFAULT SKIN (override in another file to create new skins)
================================================================================
Instead of editing this file, I recommend creating your own skin CSS file to be included after this file,
so you can upgrade to newer versions easier. You can remove all these styles by removing the 'vjs-default-skin' class from the tag. */
/* Base UI Component Classes
-------------------------------------------------------------------------------- */
@font-face {
  font-family: 'VideoJS';
  src: url("font/vjs.eot");
  src: url("font/vjs.eot?#iefix") format("embedded-opentype"), url("font/vjs.woff") format("woff"), url("font/vjs.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

.vjs-default-skin {
  color: #4090db; }

/* Slider - used for Volume bar and Seek bar */
.vjs-default-skin .vjs-slider {
  outline: 0;
  /* Replace browser focus hightlight with handle highlight */
  position: relative;
  cursor: pointer;
  padding: 0;
  background: #323232;
  /* IE8- Fallback */
  background: rgba(100, 100, 100, 0.5); }

.vjs-default-skin .vjs-slider:focus {
  background: #464646;
  /* IE8- Fallback */
  background: rgba(100, 100, 100, 0.7);
  box-shadow: 0 0 2em white; }

.vjs-default-skin .vjs-slider-handle {
  position: absolute;
  /* Needed for IE6 */
  left: 0;
  top: 0; }

.vjs-default-skin .vjs-slider-handle:before {
  /*content: "\f111";*/
  /* Circle icon = f111 */
  content: "\e009";
  /* Square icon */
  font-family: VideoJS;
  font-size: 1em;
  line-height: 1;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  /* Rotate the square icon to make a diamond */
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); }

/* Control Bar
-------------------------------------------------------------------------------- */
/* The default control bar. Created by controls.js */
.vjs-default-skin .vjs-control-bar {
  display: none;
  /* Start hidden */
  position: absolute;
  /* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
  bottom: 0;
  /* 100% width of player div */
  left: 0;
  right: 0;
  /* Controls are absolutely position, so no padding necessary */
  padding: 0;
  margin: 0;
  /* Height includes any margin you want above or below control items */
  height: 3.0em;
  /* Slight blue so it can be seen more easily on black. */
  background-color: rgba(255, 255, 255, 0.6);
  /* Default font settings */
  font-style: normal;
  font-weight: normal;
  font-family: Arial, sans-serif; }

/* General styles for individual controls. */
.vjs-default-skin .vjs-control {
  outline: none;
  position: relative;
  float: left;
  text-align: center;
  margin: 0;
  padding: 0;
  height: 3.0em;
  width: 4em; }

/* FontAwsome button icons */
.vjs-default-skin .vjs-control:before {
  font-family: VideoJS;
  font-size: 1.5em;
  line-height: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center; }

/* Replacement for focus outline */
.vjs-default-skin .vjs-control:focus:before,
.vjs-default-skin .vjs-control:hover:before {
  text-shadow: 0em 0em 1em white; }

.vjs-default-skin .vjs-control:focus {
  /*  outline: 0; */
  /* keyboard-only users cannot see the focus on several of the UI elements when this is set to 0 */ }

/* Hide control text visually, but have it available for screenreaders: h5bp.com/v */
.vjs-default-skin .vjs-control-text {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

/* Play/Pause
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-play-control {
  width: 5em;
  cursor: pointer; }

.vjs-default-skin .vjs-play-control:before {
  content: "\e001";
  /* Play Icon */ }

.vjs-default-skin.vjs-playing .vjs-play-control:before {
  content: "\e002";
  /* Pause Icon */ }

/* Rewind
-------------------------------------------------------------------------------- */
/*.vjs-default-skin .vjs-rewind-control { width: 5em; cursor: pointer !important; }
.vjs-default-skin .vjs-rewind-control div { width: 19px; height: 16px; background: url('video-js.png'); margin: 0.5em auto 0; }
*/
/* Volume/Mute
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-mute-control,
.vjs-default-skin .vjs-volume-menu-button {
  cursor: pointer;
  float: right; }

.vjs-default-skin .vjs-mute-control:before,
.vjs-default-skin .vjs-volume-menu-button:before {
  content: "\e006";
  /* Full volume */ }

.vjs-default-skin .vjs-mute-control.vjs-vol-0:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-0:before {
  content: "\e003";
  /* No volume */ }

.vjs-default-skin .vjs-mute-control.vjs-vol-1:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-1:before {
  content: "\e004";
  /* Half volume */ }

.vjs-default-skin .vjs-mute-control.vjs-vol-2:before,
.vjs-default-skin .vjs-volume-menu-button.vjs-vol-2:before {
  content: "\e005";
  /* Full volume */ }

.vjs-default-skin .vjs-volume-control {
  width: 5em;
  float: right; }

.vjs-default-skin .vjs-volume-bar {
  width: 5em;
  height: 0.6em;
  margin: 1.1em auto 0; }

.vjs-default-skin .vjs-volume-menu-button .vjs-menu-content {
  height: 2.9em; }

.vjs-default-skin .vjs-volume-level {
  position: absolute;
  top: 0;
  left: 0;
  height: 0.5em;
  background-color: #66A8CC; }

.vjs-default-skin .vjs-volume-bar .vjs-volume-handle {
  width: 0.5em;
  height: 0.5em; }

.vjs-default-skin .vjs-volume-handle:before {
  font-size: 0.9em;
  top: -0.2em;
  left: -0.2em;
  width: 1em;
  height: 1em; }

.vjs-default-skin .vjs-volume-menu-button .vjs-menu .vjs-menu-content {
  width: 6em;
  left: -4em; }

/*.vjs-default-skin .vjs-menu-button .vjs-volume-control {
  height: 1.5em;
}*/
/* Progress
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-progress-control {
  position: absolute;
  left: 0;
  right: 0;
  width: auto;
  font-size: 0.3em;
  height: 1em;
  /* Set above the rest of the controls. */
  top: -1em;
  /* Shrink the bar slower than it grows. */
  transition: top 0.4s, height 0.4s, font-size 0.4s, -webkit-transform 0.4s;
  transition: top 0.4s, height 0.4s, font-size 0.4s, transform 0.4s; }
  .vjs-default-skin .vjs-progress-control .vjs-seek-handle {
    display: none; }

/* On hover, make the progress bar grow to something that's more clickable.
    This simply changes the overall font for the progress bar, and this
    updates both the em-based widths and heights, as wells as the icon font */
.vjs-default-skin:hover .vjs-progress-control {
  font-size: .9em;
  /* Even though we're not changing the top/height, we need to include them in
      the transition so they're handled correctly. */
  transition: top 0.2s, height 0.2s, font-size 0.2s, -webkit-transform 0.2s;
  transition: top 0.2s, height 0.2s, font-size 0.2s, transform 0.2s; }

/* Box containing play and load progresses. Also acts as seek scrubber. */
.vjs-default-skin .vjs-progress-holder {
  /* Placement within the progress control item */
  height: 100%; }

/* Progress Bars */
.vjs-default-skin .vjs-progress-holder .vjs-play-progress,
.vjs-default-skin .vjs-progress-holder .vjs-load-progress {
  position: absolute;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  /* Needed for IE6 */
  left: 0;
  top: 0; }

.vjs-default-skin .vjs-play-progress {
  /*
    Using a data URI to create the white diagonal lines with a transparent
      background. Surprising works in IE8.
      Created using http://www.patternify.com
    Changing the first color value will change the bar color.
    Also using a paralax effect to make the lines move backwards.
      The -50% left position makes that happen.
  */
  background-color: #4090db; }

.vjs-default-skin .vjs-load-progress {
  background: #646464;
  /* IE8- Fallback */
  background: rgba(125, 125, 125, 0.1); }

.vjs-default-skin .vjs-seek-handle {
  width: 1.5em;
  height: 100%; }

.vjs-default-skin .vjs-seek-handle:before {
  padding-top: 0.1em;
  /* Minor adjustment */ }

/* Time Display
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-time-controls {
  font-size: 1em;
  /* Align vertically by making the line height the same as the control bar */
  line-height: 3em; }

.vjs-default-skin .vjs-current-time {
  float: left; }

.vjs-default-skin .vjs-duration {
  float: left; }

/* Remaining time is in the HTML, but not included in default design */
.vjs-default-skin .vjs-remaining-time {
  display: none;
  float: left; }

.vjs-time-divider {
  float: left;
  line-height: 3em; }

/* Fullscreen
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-fullscreen-control {
  width: 3.8em;
  cursor: pointer;
  float: right; }

.vjs-default-skin .vjs-fullscreen-control:before {
  content: "\e000";
  /* Enter full screen */ }

.vjs-default-skin.vjs-fullscreen .vjs-fullscreen-control:before {
  content: "\e00b";
  /* Exit full screen */ }

/* Big Play Button (at start)
---------------------------------------------------------*/
.vjs-default-skin .vjs-big-play-button {
  display: block;
  z-index: 2;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8.0em;
  height: 8.0em;
  margin: -4em 0 0 -4em;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  opacity: 1;
  /* Need a slightly gray bg so it can be seen on black backgrounds */
  border: 4px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
  text-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  transition: border 0.4s, box-shadow 0.4s, -webkit-transform 0.4s;
  transition: border 0.4s, box-shadow 0.4s, transform 0.4s; }

.vjs-default-skin:hover .vjs-big-play-button,
.vjs-default-skin .vjs-big-play-button:focus {
  outline: 0;
  border-color: rgba(255, 255, 255, 0.9);
  transition: border 0s, box-shadow 0s, -webkit-transform 0s;
  transition: border 0s, box-shadow 0s, transform 0s; }

.vjs-default-skin .vjs-big-play-button:before {
  content: "\e001";
  /* Play icon */
  font-family: VideoJS;
  font-size: 3em;
  line-height: 2.5;
  text-align: center;
  /* Needed for IE8 */
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.7); }

.vjs-default-skin .vjs-big-play-button:hover:before,
.vjs-default-skin .vjs-big-play-button:hover:focus {
  color: #fff; }

/* Loading Spinner
---------------------------------------------------------*/
.vjs-loading-spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 5em;
  line-height: 1;
  width: 1em;
  height: 1em;
  margin-left: -0.5em;
  margin-top: -0.5em;
  opacity: 0.75;
  -webkit-animation: spin 1.5s infinite linear;
  animation: spin 1.5s infinite linear; }

.vjs-default-skin .vjs-loading-spinner:before {
  content: "\e00a";
  /* Loading spinner icon */
  font-family: VideoJS;
  position: absolute;
  width: 1em;
  height: 1em;
  text-align: center;
  text-shadow: 0em 0em 0.1em #000; }

/* Add a gradient to the spinner by overlaying another copy.
   Text gradient plus a text shadow doesn't work
   and `background-clip: text` only works in Webkit. */
.vjs-default-skin .vjs-loading-spinner:after {
  content: "\e00a";
  /* Loading spinner icon */
  font-family: VideoJS;
  position: absolute;
  width: 1em;
  height: 1em;
  text-align: center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; }

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(359deg); } }

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg); } }

/* Menu Buttons (Captions/Subtitles/etc.)
-------------------------------------------------------------------------------- */
.vjs-default-skin .vjs-menu-button {
  float: right;
  cursor: pointer; }

.vjs-default-skin .vjs-menu {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0em;
  /* (Width of vjs-menu - width of button) / 2 */
  width: 0em;
  height: 0em;
  margin-bottom: 3em;
  border-left: 2em solid transparent;
  border-right: 2em solid transparent;
  border-top: 1.55em solid black;
  /* Same top as ul bottom */
  border-top-color: rgba(7, 40, 50, 0.5);
  /* Same as ul background */ }

/* Button Pop-up Menu */
.vjs-default-skin .vjs-menu-button .vjs-menu .vjs-menu-content {
  display: block;
  padding: 0;
  margin: 0;
  position: absolute;
  width: 10em;
  bottom: 1.5em;
  /* Same bottom as vjs-menu border-top */
  max-height: 15em;
  overflow: auto;
  left: -5em;
  /* Width of menu - width of button / 2 */
  background-color: black;
  background-color: rgba(7, 40, 50, 0.7);
  box-shadow: -0.2em -0.2em 0.3em rgba(255, 255, 255, 0.2); }

/*.vjs-default-skin .vjs-menu-button:focus ul,*/
/* This is not needed because keyboard accessibility for the caption button is not handled with the focus any more. */
.vjs-default-skin .vjs-menu-button:hover .vjs-menu {
  display: block; }

.vjs-default-skin .vjs-menu-button ul li {
  list-style: none;
  margin: 0;
  padding: 0.3em 0 0.3em 0;
  line-height: 1.4em;
  font-size: 1.2em;
  font-weight: normal;
  text-align: center;
  text-transform: lowercase; }

.vjs-default-skin .vjs-menu-button ul li.vjs-selected {
  background-color: #000; }

.vjs-default-skin .vjs-menu-button ul li:focus,
.vjs-default-skin .vjs-menu-button ul li:hover,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:focus,
.vjs-default-skin .vjs-menu-button ul li.vjs-selected:hover {
  background-color: white;
  background-color: rgba(255, 255, 255, 0.75);
  color: #111;
  outline: 0;
  box-shadow: 0 0 1em white; }

.vjs-default-skin .vjs-menu-button ul li.vjs-menu-title {
  text-align: center;
  text-transform: uppercase;
  font-size: 1em;
  line-height: 2em;
  padding: 0;
  margin: 0 0 0.3em 0;
  font-weight: bold;
  cursor: default; }

/* Subtitles Button */
.vjs-default-skin .vjs-subtitles-button:before {
  content: "\e00c"; }

/* There's unfortunately no CC button in FontAwesome, so we need
    to use another font. Please +1 the fontawesome request.
    https://github.com/FortAwesome/Font-Awesome/issues/968 */
.vjs-default-skin .vjs-captions-button:before {
  content: "\e008"; }

/* Replacement for focus outline */
.vjs-default-skin .vjs-captions-button:focus .vjs-control-content:before,
.vjs-default-skin .vjs-captions-button:hover .vjs-control-content:before {
  box-shadow: 0 0 1em white; }