/**************/
/*** LAYOUT ***/
/**************/

/* Feed container */
#sb_instagram {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#sb_instagram:after{
  content: "";
  display: table;
  clear: both;
}

/*********************/
/*** STYLE OPTIONS ***/
/*********************/
#sb_instagram.sbi_fixed_height{
  overflow: hidden;
  overflow-y: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#sb_instagram #sbi_images{
  width: 100%;
  float: left;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Items */
#sb_instagram #sbi_images .sbi_item{
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: top;
  zoom: 1;
  *display: inline;

  padding: inherit !important;
  margin: 0 !important;
  text-decoration: none;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Cols */
#sb_instagram.sbi_col_1 #sbi_images .sbi_item{ width: 100%; }
#sb_instagram.sbi_col_2 #sbi_images .sbi_item{ width: 50%; }
#sb_instagram.sbi_col_3 #sbi_images .sbi_item{ width: 33.33%; }
#sb_instagram.sbi_col_4 #sbi_images .sbi_item{ width: 25%; }
#sb_instagram.sbi_col_5 #sbi_images .sbi_item{ width: 20%; }
#sb_instagram.sbi_col_6 #sbi_images .sbi_item{ width: 16.66%; }
#sb_instagram.sbi_col_7 #sbi_images .sbi_item{ width: 14.28%; }
#sb_instagram.sbi_col_8 #sbi_images .sbi_item{ width: 12.5%; }
#sb_instagram.sbi_col_9 #sbi_images .sbi_item{ width: 11.11%; }
#sb_instagram.sbi_col_10 #sbi_images .sbi_item{ width: 10%; }

/* Photos */
#sb_instagram .sbi_photo_wrap{
  position: relative;
}
#sb_instagram .sbi_photo{
  display: block;
}
#sb_instagram img{
  display: block;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}
#sb_instagram .sbi_link{
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  width: 100%;
  padding: 0;
  background: #333;
  background: rgba(0,0,0,0.8);
  text-align: center;
  color: #fff;
  font-size: 12px;
  line-height: 1.1;
}
#sb_instagram .sbi_link_area{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
#sb_instagram .sbi_link a{
  padding: 0;
  text-decoration: none;
  color: #ddd;
  color: rgba(255,255,255,0.7);
  line-height: 1.1;

  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: top;
  zoom: 1;
  *display: inline;
}
#sb_instagram .sbi_link a:hover,
#sb_instagram .sbi_link a:active{
  color: #fff;
}
#sb_instagram .sbi_link .sbi_lightbox_link{
  display: block;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;

  margin-top: -24px;
  margin-left: -21px;
  padding: 0;
  font-size: 49px;
  font-style: normal !important;
}
#sb_instagram .sbi_type_video .sbi_lightbox_link{
  display: none;
}
#sb_instagram .sbi_link .sbi_playbtn{
  display: none !important;
}
#sb_instagram .sbi_type_video .sbi_link .sbi_playbtn{
  display: block !important;
  z-index: 2;
  font-size: 48px;
  padding: 0;
  margin-top: -28px;
  text-shadow: none;
  color: inherit;
}

#sb_instagram .sbi_link .sbi_instagram_link{
  /*float: right;*/
  font-size: 30px;
  position: absolute;
  z-index: 100;
  bottom: 0;
  right: 2px;
  padding: 8px;
}
#sb_instagram .sbi_link a:hover,
#sb_instagram .sbi_link a:focus{
  text-decoration: underline;
}

/* Date */
#sb_instagram .sbi_username,
#sb_instagram .sbi_date{
  position: absolute;
  width: 98%;
  text-align: center;
  padding: 1% !important;
  margin: 0 !important;
  font-size: 12px;
  color: #ddd;
  color: rgba(255,255,255,0.8);
}
#sb_instagram .sbi_username{
  top: 0;
}
#sb_instagram .sbi_username a{
  padding: 10px;
  position: relative;
  z-index: 2;
  -ms-word-break: break-all;
     word-break: break-all;
     word-break: break-word;
-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}
#sb_instagram .sbi_date{
  bottom: 10px;
}

/* Medium */
#sb_instagram.sbi_medium .sbi_username a{
  font-size: 11px;
}
#sb_instagram.sbi_medium .sbi_lightbox_link,
#sb_instagram.sbi_medium .sbi_instagram_link,
#sb_instagram.sbi_medium .sbi_playbtn{
  font-size: 23px;
  margin-top: -12px;
  margin-left: -10px;
}
#sb_instagram.sbi_medium .sbi_instagram_link{
  margin: 0;
  padding: 6px;
}
#sb_instagram.sbi_medium .sbi_date{
  bottom: 7px;
  font-size: 11px;
}
#sb_instagram.sbi_medium .sbi_playbtn{
  margin-left: -9px;
}
#sb_instagram.sbi_medium .sbi_type_video .sbi_link .sbi_playbtn{
  font-size: 23px;
  margin-top: -14px;
  margin-left: -9px;
}

/* Small */
#sb_instagram.sbi_small .sbi_username a{
  padding: 3px 2px;
  font-size: 10px;
  line-height: 1;
}
#sb_instagram.sbi_small .sbi_lightbox_link,
#sb_instagram.sbi_small .sbi_instagram_link,
#sb_instagram.sbi_small .sbi_playbtn{
  font-size: 18px;
  margin-top: -9px;
  margin-left: -7px;
}
#sb_instagram.sbi_small .sbi_instagram_link{
  margin: 0;
  padding: 3px;
}
#sb_instagram.sbi_small .sbi_date{
  bottom: 3px;
  font-size: 10px;
}
#sb_instagram.sbi_small .sbi_type_video .sbi_playbtn{
  margin-top: -9px;
  margin-left: -7px;
  font-size: 18px;
}
#sb_instagram.sbi_small .sbi_type_video .sbi_link .sbi_playbtn{
  margin-top: -10px;
}

/* Post info */
#sb_instagram .sbi_info{
  width: 100%;
  float: left;
  clear: both;
  background: #fff;
  background: rgba(255,255,255,0.5);
  text-decoration: none;
  color: #666;
  text-align: center;
}
#sb_instagram .sbi_info p{
  width: 100%;
  clear: both;
  padding: 5px !important;
  margin: 0 !important;
  line-height: 1.2;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#sb_instagram .sbi_expand{
  display: none;
}

/* Meta */
#sb_instagram .sbi_meta{
  line-height: 1.1;
  padding: 0 0 8px 0;
}
#sb_instagram .sbi_meta span{
  margin: 0 5px !important;
  font-size: 12px;
}
#sb_instagram .sbi_meta i{
  margin-right: 5px !important;
  font-size: 14px;
}

/* Button */
#sb_instagram #sbi_load{
  display: none;
  float: left;
  clear: both;
  width: 100%;
  text-align: center;
}
#sb_instagram #sbi_load a{
  display: -moz-inline-stack;
  display: inline-block;
  vertical-align: top;
  zoom: 1;
  *display: inline;

  padding: 4px 14px;
  margin: 0 auto;
  background: #333;
  color: #eee;
  border: none;
  color: #fff;
  text-decoration: none;
  font-size: 13px;

  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#sb_instagram #sbi_load a:hover{
  background: #666;
}


/* VIDEO */
.sbi_video{
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
.sbi_video_lightbox .sbi_video{
  display: block;
}
#sbi_lightbox.sbi_video_lightbox .sbi_lb-image{
  display: none !important;
  /* Show photo in IE7 as doesn't support video */
  *display: block !important;
}
/* Video play button */
.sbi_playbtn{
  display: none !important;
}
.sbi_type_video .sbi_playbtn{
  display: block !important;
  position: absolute;
  /*z-index: 10;*/
  top: 50%;
  left: 50%;

  margin-top: -24px;
  margin-left: -19px;
  padding: 0;
  font-size: 48px;
  color: #fff;
  color: rgba(255,255,255,0.9);
  font-style: normal !important;
  text-shadow: 0 0 8px rgba(0,0,0,0.8);
}


/* Media queries */
@media all and (max-width: 680px){
  /* Make 3-6 cols into 2 col */
  #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_6 #sbi_images .sbi_item{
    width: 50%;
  }
  /* Make 7-10 cols into 4 col */
  #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
    width: 25%;
  }
}
@media all and (max-width: 480px){
  /* Make all cols into 1 col */
  #sb_instagram.sbi_col_3 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_4 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_5 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_6 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_7 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_8 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_9 #sbi_images .sbi_item,
  #sb_instagram.sbi_col_10 #sbi_images .sbi_item{
    width: 100%;
  }
}


/* Lightbox */
/* Preload images */
body:after {
  content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);
  display: none;
}
.sbi_lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}
.sbi_lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}
.sbi_lightbox .sbi_lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
.sbi_lightbox a img {
  border: none;
}
.sbi_lb-outerContainer {
  position: relative;
  background-color: white;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
.sbi_lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}
.sbi_lb-container {
  padding: 4px;
}
.sbi_lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}
.sbi_lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../img/loading.gif) no-repeat;
}
.sbi_lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}
.sbi_lb-container > .nav {
  left: 0;
}
.sbi_lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}
.sbi_lb-prev, .sbi_lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}
.sbi_lb-nav a.sbi_lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(../img/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}
.sbi_lb-nav a.sbi_lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
.sbi_lb-nav a.sbi_lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(../img/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}
.sbi_lb-nav a.sbi_lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
.sbi_lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.sbi_lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}
.sbi_lb-data {
  padding: 0 4px;
  color: #ccc;
}
.sbi_lb-data .sbi_lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}
.sbi_lb-data .sbi_lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}
.sbi_lb-data .sbi_lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}
.sbi_lb-data .sbi_lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../img/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}
.sbi_lb-data .sbi_lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/* Lightbox video - must go after lighbox CSS */
/* Leave a gap at the bottom of the nav for video controls */
.sbi_lb-nav {
  height: auto;
  bottom: 40px;
}
/* Remove 4px padding from lightbox container so video lines up */
.sbi_lb-container{
  padding: 0;
}