css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <header class="cf">
  <h1><a href="//codepen.io/atelierbram/pen/puwLy">image gallery &middot; overlay</a></h1>
  <h2><small class="small">on click - with (modified)</small> <a href="//www.jacklmoore.com/colorbox">colorbox <small class="small"> &middot; jQuery plugin ✚ pagination</small></a></h2>
</header>

<section class="image-wrap cf clear" id="image-wrap">
  <a href="#test1Content" class="group-cbox1 inline" title="Lorem ipsum 1"><img alt="" src="//placehold.it/128x128/" class="shadow"></a>
  <a href="#test2Content" class="group-cbox1 inline" title="Lorem ipsum 2"><img alt="" src="//placehold.it/128x128/" class="shadow"></a>
  <a href="#test3Content" class="group-cbox1 inline" title="Lorem ipsum 3"><img alt="" src="//placehold.it/128x128/" class="shadow"></a>
  <a href="#test4Content" class="group-cbox1 inline" title="Lorem ipsum 4"><img alt="" src="//placehold.it/128x128/" class="shadow"></a>
  <a href="#test5Content" class="group-cbox1 inline" title="Lorem ipsum 5"><img alt="" src="//placehold.it/128x128/" class="shadow"></a>
  <a href="#test6Content" class="group-cbox1 inline" title="Lorem ipsum 6"><img alt="" src="//placehold.it/128x128/" class="shadow"></a>
  <a href="#test7Content" class="group-cbox1 inline" title="Lorem ipsum 7"><img alt="" src="//placehold.it/128x128/" class="shadow"></a>
  <a href="#test8Content" class="group-cbox1 inline" title="Lorem ipsum 8"><img alt="" src="//placehold.it/128x128/" class="shadow"></a>
  <a href="#test9Content" class="group-cbox1 inline" title="Lorem ipsum 9"><img alt="" src="//placehold.it/128x128/" class="shadow"></a>
  <a href="#test10Content" class="group-cbox1 inline" title="Lorem ipsum 10"><img alt="" src="//placehold.it/128x128/" class="shadow"></a>
  <a href="#test11Content" class="group-cbox1 inline" title="Lorem ipsum 11"><img alt="" src="//placehold.it/128x128/" class="shadow"></a>
  <a href="#test12Content" class="group-cbox1 inline" title="Lorem ipsum 12"><img alt="" src="//placehold.it/128x128/" class="shadow"></a>
  <a href="#test13Content" class="group-cbox1 inline" title="Lorem ipsum 13"><img alt="" src="//placehold.it/128x128/" class="shadow"></a>
  <a href="#test14Content" class="group-cbox1 inline" title="Lorem ipsum 14"><img alt="" src="//placehold.it/128x128/" class="shadow"></a>
  <a href="#test15Content" class="group-cbox1 inline" title="Lorem ipsum 15"><img alt="" src="//placehold.it/128x128/" class="shadow"></a>

  <div style='display:none'>
    <div id="test1Content" class="inner-overlay-box">
      <div class="media">
        <a href="#" class="img">
          <img alt="" src="//placehold.it/384x256/" class="img-inner-window" /></a>

        <div class="hd"><h3>Image 1</h3></div>
        <div class="bd">
          <p class="p-inner-window">Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi.</p> </div>
      </div>
    </div>
  </div>

  <div style='display:none'>
    <div id="test2Content" class="inner-overlay-box">
      <div class="media">
        <a href="#" class="img">
          <img alt="" src="//placehold.it/384x256/" class="img-inner-window" /></a>

        <div class="hd"><h3>Image 2</h3></div>
        <div class="bd">
          <p class="p-inner-window">Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi.</p> </div>
      </div>
    </div>
  </div>

  <div style='display:none'>
    <div id="test3Content" class="inner-overlay-box">
      <div class="media">
        <a href="#" class="img">
          <img alt="" src="//placehold.it/384x256/" class="img-inner-window" /></a>

        <div class="hd"><h3>Image 3</h3></div>
        <div class="bd">
          <p class="p-inner-window">Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi.</p> </div>
      </div>
    </div>
  </div>

  <div style='display:none'>
    <div id="test4Content" class="inner-overlay-box">
      <div class="media">
        <a href="#" class="img">
          <img alt="" src="//placehold.it/384x256/" class="img-inner-window" /></a>

        <div class="hd"><h3>Image 4</h3></div>
        <div class="bd">
          <p class="p-inner-window">Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi.</p> </div>
      </div>
    </div>
  </div>

  <div style='display:none'>
    <div id="test5Content" class="inner-overlay-box">
      <div class="media">
        <a href="#" class="img">
          <img alt="" src="//placehold.it/384x256/" class="img-inner-window" /></a>
        <div class="hd"><h3>Image 5</h3></div>
        <div class="bd">
          <p class="p-inner-window">Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi.</p> </div>
      </div>
    </div>
  </div>

  <div style='display:none'>
    <div id="test6Content" class="inner-overlay-box">
      <div class="media">
        <a href="#" class="img">
          <img alt="" src="//placehold.it/384x256/" class="img-inner-window" /></a>

        <div class="hd"><h3>Image 6</h3></div>
        <div class="bd">
          <p class="p-inner-window">Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi.</p> </div>
      </div>
    </div>
  </div>

  <div style='display:none'>
    <div id="test7Content" class="inner-overlay-box">
      <div class="media">
        <a href="#" class="img">
          <img alt="" src="//placehold.it/384x256/" class="img-inner-window" /></a>

        <div class="hd"><h3>Image 7</h3></div>
        <div class="bd">
          <p class="p-inner-window">Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi.</p> </div>
      </div>
    </div>
  </div>

  <div style='display:none'>
    <div id="test8Content" class="inner-overlay-box">
      <div class="media">
        <a href="#" class="img">
          <img alt="" src="//placehold.it/384x256/" class="img-inner-window" /></a>
        <div class="hd"><h3>Image 8</h3></div>
        <div class="bd">
          <p class="p-inner-window">Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi.</p> </div>
      </div>
    </div>
  </div>

  <div style='display:none'>
    <div id="test9Content" class="inner-overlay-box">

      <div class="media">
        <a href="#" class="img">
          <img alt="" src="//placehold.it/384x256/" class="img-inner-window" /></a>

        <div class="hd"><h3>Image 9</h3></div>
        <div class="bd">
          <p class="p-inner-window">Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi.</p> </div>
      </div>
    </div>
  </div>

  <div style='display:none'>
    <div id="test10Content" class="inner-overlay-box">

      <div class="media">
        <a href="#" class="img">
          <img alt="" src="//placehold.it/384x256/" class="img-inner-window" /></a>

        <div class="hd"><h3>Image 10</h3></div>
        <div class="bd">
          <p class="p-inner-window">Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi.</p> </div>

      </div>
    </div>
  </div>

  <div style='display:none'>
    <div id="test11Content" class="inner-overlay-box">

      <div class="media">
        <a href="#" class="img">
          <img alt="" src="//placehold.it/384x256/" class="img-inner-window" /></a>

        <div class="hd"><h3>Image 11</h3></div>
        <div class="bd">
          <p class="p-inner-window">Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi.</p> </div>
      </div>
    </div>
  </div>

  <div style='display:none'>
    <div id="test12Content" class="inner-overlay-box">

      <div class="media">
        <a href="#" class="img">
          <img alt="" src="//placehold.it/384x256/" class="img-inner-window" /></a>

        <div class="hd"><h3>Image 12</h3></div>
        <div class="bd">
          <p class="p-inner-window">Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi.</p>
        </div>
      </div>
    </div>
  </div>

  <div style='display:none'>
    <div id="test13Content" class="inner-overlay-box">

      <div class="media">
        <a href="#" class="img">
          <img alt="" src="//placehold.it/384x256/" class="img-inner-window" /></a>

        <div class="hd"><h3>Image 13</h3></div>
        <div class="bd">
          <p class="p-inner-window">Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi.</p>
        </div>
      </div>
    </div>
  </div>

  <div style='display:none'>
    <div id="test14Content" class="inner-overlay-box">

      <div class="media">
        <a href="#" class="img">
          <img alt="" src="//placehold.it/384x256/" class="img-inner-window" /></a>

        <div class="hd"><h3>Image 14</h3></div>
        <div class="bd">
          <p class="p-inner-window">Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi.</p>
        </div>
      </div>
    </div>
  </div>

  <div style='display:none'>
    <div id="test15Content" class="inner-overlay-box">

      <div class="media">
        <a href="#" class="img">
          <img alt="" src="//placehold.it/384x256/" class="img-inner-window" /></a>

        <div class="hd"><h3>Image 15</h3></div>
        <div class="bd">
          <p class="p-inner-window">Consequat ea Investigationes in enim congue. Option velit volutpat quod blandit ex. Congue parum praesent aliquam nam clari. Qui praesent quam sollemnes id vulputate. In imperdiet diam at sequitur et. Minim delenit in dolor dolore typi.</p>
        </div>
      </div>
    </div>
  </div>

</section>

<footer class="cf">
  <span class="note grid-unit">
    On mobile, please check out <a href="//bramdeh.home.xs4all.nl/playground/ui-patterns/colorbox-gallery/index-external.html">a copy of this demo</a>. <br class="clear" />( Due to Codepen's iFrame - there's a top-margin issue with this thing here &hellip; )</span>
  <ul>
    <li><a href="//codepen.io/atelierbram/pen/puwLy">Codepen made with &hellip;</a></li>
    <li><a href="//www.jacklmoore.com/colorbox">jQuery- colorbox plugin</a></li>

  </ul>
</footer>
            
          
!
            
              * { 
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: top; 
  /* outline: 1px dotted salmon; */
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; 
} 
body {
  font: 100%/1.375 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", AvenirNext-Regular, Corbel, "Segoe Ui", "Trebuchet MS", "DejaVu Sans", Verdana, sans-serif; 
  width: auto;
  padding-bottom: 1em;
  color: #333;
  background-color: #fff;
} 
body[style] {
  margin: 0 !important;
}
body,
footer {
  overflow: auto;
}
footer ul {
  list-style: none; 
} 
header,
section h3 {
  text-transform: uppercase;
}  
header {
  height: 138px;
}  
header,
footer {
  background-color: khaki;
}
section h3 {
  font-size: 1.25em;
}  

h1,
h2,
h3 {
  font-family: "Lucida Grande", "Lucida Sans", AvenirNextCondensed-DemiBold, Corbel, "Segoe Ui", "Trebuchet MS", "DejaVu Sans", sans-serif; 
}

h1,
h2,
h3,
p {
  margin: 0 5%;
} 
h2 {
  margin-bottom: 1em;
}
p {
  padding: .5em 0; 
}
a {
  color: darkslateblue; 
  text-decoration: none;
}

header,
footer {
  clear: both; 
  text-align: center;
} 
footer {
  margin: 2rem auto;
}
header a,
footer a {
  float: left;
  padding: .25em 0;
}
header a {
  width: 100%;
}
footer a {
  width: 50%;;
}

.small {
  font-size: .75em; 
  line-height: 1.85;
  display: inline-block; 
} 
.note {
  width: 95%;
  padding: .5em 2.5%;
  border-bottom: 1px dashed darkkhaki;
}
footer .note a { width: auto; float: none; }
/* images */
img { 
  max-width: 100%; 
}
.shadow { 
  display: block; 
}
.image-wrap  {
  position: relative;
  /* min-width: 100%; */
  max-width: 100%;
  margin: 1em auto 0;
  background-color: #444;
  padding-bottom: 1rem; 
  overflow: hidden;
}

.image-wrap > a {
  float: left; 
  margin: 1em 0 0 1em;
  margin: 1rem 0 0 1rem;
  outline: 1px solid #333;
}

/* layout */ 
.media { 
  margin-top: 2em;
}

.media .img { 
  margin-left: 1em;
}
.hd h3 {
  margin-top: 1em;
}

/* layout helpers */ 
.grid-unit { 
  float: left;
}
.grid-unit--right { 
  float: right;
}

.cf:before,
.cf:after {
  content: " "; 
  display: table;
}

.cf:after,
.clear {
  clear: both;
}

.inner-overlay-box {
  color: #eee; 
}
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
 */
  #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
  #cboxOverlay{position:fixed; width:100%; height:100%;}
  #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
  #cboxContent{position:relative;}
  #cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
  #cboxTitle{margin:0;}
  #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
  #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
  .cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
  .cboxIframe{width:100%; height:100%; display:block; border:0;}
  #colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

  /* 
  User Style:
  Change the following styles to modify the appearance of ColorBox.  They are
  ordered & tabbed in a way that represents the nesting of the generated HTML.
   */
  #cboxOverlay{ /* background:url(../img/ui/overlay.png) repeat 0 0; */}
  #colorbox{background-color: #444;background-color: rgba(0,0,0,.75);}
  #colorbox[style] { /* top: 0 !important;  top: 0; bottom: 0; left: 0; right: 0; */ } 
  #cboxTopLeft{width:21px; height:21px; /*background:url(../img/ui/controls.png) no-repeat -101px 0 */;}  
  #cboxTopRight{width:21px; height:21px; /*background:url(../img/ui/controls.png) no-repeat -130px 0 */;}  
  #cboxBottomLeft{width:21px; height:21px; /*background:url(../img/ui/controls.png) no-repeat -101px -29px */;}  
  #cboxBottomRight{width:21px; height:21px; /*background:url(../img/ui/controls.png) no-repeat -130px -29px */;}  
  #cboxMiddleLeft{width:21px; /*background:url(../img/ui/controls.png) left top repeat-y */;}  
  #cboxMiddleRight{width:21px; /*background:url(../img/ui/controls.png) right top repeat-y */;}  
  #cboxTopCenter{height:21px; /*background:url(../img/ui/border.png) 0 0 repeat-x */;}  
  #cboxBottomCenter{height:21px; /*background:url(../img/ui/border.png) 0 -29px repeat-x */;}  
  #cboxContent{/*background:#fff;*/ overflow:hidden;}
  .cboxIframe{background:#fff;}
  #cboxError{padding:50px; border:1px solid #ccc;}
  #cboxLoadedContent{margin-bottom:28px;}
  #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
  #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
  #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
  #cboxPrevious,
  #cboxNext,
  #cboxClose { 
    background-image: url("https://lh3.googleusercontent.com/-aopYh60FBPw/URLYWU5Py3I/AAAAAAAAAVs/y8J7RIrgToM/s800/controls-custom.png"); 
  background-repeat: no-repeat; }
  #cboxPrevious{position:absolute; bottom:0; left:0; background-position: 0 0; width:25px; height:25px; text-indent:-9999px;}
  #cboxPrevious:hover{background-position: 0 -25px;}
  #cboxNext{position:absolute; bottom:0; left:27px; background-position: -25px 0; width:25px; height:25px; text-indent:-9999px;}
  #cboxNext:hover{background-position: -25px -25px;}
  #cboxLoadingOverlay{/*background:url(../img/ui/loading_background.png) no-repeat center center;*/}
  #cboxLoadingGraphic{/*background:url(../img/ui/loading.gif) no-repeat center center;*/}
  #cboxClose{position:absolute; bottom:0; right:0; background-position: -50px 0; width:25px; height:25px; text-indent:-9999px;}
  #cboxClose:hover{background-position:-50px -25px;}


  @media only screen and (max-width: 480px) { 
  
    header {
      height: 220px;
    }
    .image-wrap { 
      margin-top: 0; 
    } 
  
    .media .img img { 
      max-width: 288px;
    }

    .p-inner-window,
    .hd h3 {
      margin-right: 25em;
      margin-left: 2.5%;
    }

    .image-wrap {
      overflow: hidden;
    }

    #colorbox,
    #cboxWrapper,
    #cboxContent,
    #cboxLoadedContent {
      min-height: 1200px;
    }

    #cboxTitle,
    #cboxCurrent,
    #cboxSlideshow,
    #cboxPrevious,
    #cboxNext, 
    #cboxLoadingOverlay,
    #cboxLoadingGraphic, 
    #cboxClose {
      top: 0; 
      bottom: auto;
    }

    #cboxTitle {
      margin-top: 100%;
      margin-left: 2.5%;
      text-align: left; 
    }

    #cboxClose { 
      right: auto;
      left: 0;
      margin-left: 40%;
    }
  
  /* can be removed, is here now because of Codepen's iFrame */
   #colorbox[style] {
      top: 220px !important;
    }
  }

  @media only screen and (min-width: 481px) and (max-width: 574px) { 
  
    header {
      height: 150px;
    }
    .image-wrap { 
      margin-top: 0; 
    } 
  
    .hd h3,
    .p-inner-window {
      margin-right: 18em;
      margin-left: 2.5%;
    }
    .p-inner-window {
      margin-bottom: 3em;
    }

    #colorbox,
    #cboxWrapper,
    #cboxContent,
    #cboxLoadedContent {
      min-height: 592px;
      min-height: 736px;
    }

    #cboxTitle,
    #cboxCurrent,
    #cboxSlideshow,
    #cboxPrevious,
    #cboxNext, 
    #cboxLoadingOverlay,
    #cboxLoadingGraphic, 
    #cboxClose {
      top: 0; 
      bottom: auto;
    }

    #cboxTitle {
      margin-top: 92.5%;
      margin-left: 2.5%;
      text-align: left; 
    }

    #cboxClose { 
      right: auto;
      left: 0;
      margin-left: 54%;
    }
  
    /* can be removed, is here now because of Codepen's iFrame */
   #colorbox[style] {
      top: 150px !important;
    }

  }


  @media only screen and (min-width: 575px) and (max-width: 719px) { 
    .p-inner-window {
      margin: 0 20em 0 2.5%;
    }

    .image-wrap {
      overflow: hidden;
    } 

    .hd h3,
    .p-inner-window {
      margin-right: 18em;
      margin-left: 2.5%;
    }
    .p-inner-window {
      margin-bottom: 3em;
    }

    #colorbox,
    #cboxWrapper,
    #cboxContent,
    #cboxLoadedContent {
      min-height: 592px;
      min-height: 736px;
    }

    #cboxTitle,
    #cboxCurrent,
    #cboxSlideshow,
    #cboxPrevious,
    #cboxNext, 
    #cboxLoadingOverlay,
    #cboxLoadingGraphic, 
    #cboxClose {
      top: 0; 
      bottom: auto;
    }

    #cboxTitle {
      margin-top: 73%;
      margin-left: 2.5%;
      text-align: left; 
    }

    #cboxClose { 
      right: auto;
      left: 0;
      margin-left: 54%;
    }

    /* can be removed, is here now because of Codepen's iFrame */
   #colorbox[style] {
      top: 154px !important;
    }

  }

  @media only screen and (min-width: 720px) { 

    .image-wrap {
      overflow: visible;
    }
    .image-wrap,
    footer {
      width: 46em; /* 736px */ 
      margin: 1em auto 1em;
    }

    .media,
    .bd,
    .ft,
    .hd { overflow:hidden; }

    .media .img { 
      float:left;
      margin-left: 1em;
    }
    .media .img img { 
      display:block; 
    } 

    #cboxClose { 
      margin-bottom: 380px;
    }
  
    /* can be removed, is here now because of Codepen's iFrame */
  #colorbox[style] {
top: 154px !important;
}
  
    #colorbox {
      /* margin-top: -33px; */
    }

  }
 
            
          
!
            
              /*!
	jQuery ColorBox v1.3.34 - 2013-02-04
	(c) 2013 Jack Moore - jacklmoore.com/colorbox
	license: https://www.opensource.org/licenses/mit-license.php
   * modified for the purpose of having an overlay in a smaller window.
 */

(function ($, document, window) {
	var
	// Default settings object.
	// See http://jacklmoore.com/colorbox for details.
	defaults = {
		transition: "elastic",
		speed: 300,
		width: false,
		initialWidth: "600",
		innerWidth: false,
		maxWidth: false,
		height: false,
		initialHeight: "450",
		innerHeight: false,
		maxHeight: false,
		scalePhotos: true,
		scrolling: true,
		inline: false,
		html: false,
		iframe: false,
		fastIframe: true,
		photo: false,
		href: false,
		title: false,
		rel: false,
		opacity: 0.9,
		preloading: true,
		className: false,
		
		// alternate image paths for high-res displays
		retinaImage: false,
		retinaUrl: false,
		retinaSuffix: '@2x.$1',

		// internationalization
		current: "image {current} of {total}",
		previous: "previous",
		next: "next",
		close: "close",
		xhrError: "This content failed to load.",
		imgError: "This image failed to load.",

		open: false,
		returnFocus: true,
		reposition: true,
		loop: true,
		slideshow: false,
		slideshowAuto: true,
		slideshowSpeed: 2500,
		slideshowStart: "start slideshow",
		slideshowStop: "stop slideshow",
		photoRegex: /\.(gif|png|jp(e|g|eg)|bmp|ico)((#|\?).*)?$/i,

		onOpen: false,
		onLoad: false,
		onComplete: false,
		onCleanup: false,
		onClosed: false,
		overlayClose: true,
		escKey: true,
		arrowKey: true,
		top: false,
		bottom: false,
		left: false,
		right: false,
		fixed: false,
		data: undefined
	},
	
	// Abstracting the HTML and event identifiers for easy rebranding
	colorbox = 'colorbox',
	prefix = 'cbox',
	boxElement = prefix + 'Element',
	
	// Events
	event_open = prefix + '_open',
	event_load = prefix + '_load',
	event_complete = prefix + '_complete',
	event_cleanup = prefix + '_cleanup',
	event_closed = prefix + '_closed',
	event_purge = prefix + '_purge',
	
	// Special Handling for IE
	isIE = !$.support.leadingWhitespace, // IE6 to IE8
	isIE6 = isIE && !window.XMLHttpRequest, // IE6
	event_ie6 = prefix + '_IE6',

	// Cached jQuery Object Variables
	$overlay,
	$box,
	$wrap,
	$content,
	$topBorder,
	$leftBorder,
	$rightBorder,
	$bottomBorder,
	$related,
	$window,
	$loaded,
	$loadingBay,
	$loadingOverlay,
	$title,
	$current,
	$slideshow,
	$next,
	$prev,
	$close,
	$groupControls,
	$events = $({}),
	
	// Variables for cached values or use across multiple functions
	settings,
	interfaceHeight,
	interfaceWidth,
	loadedHeight,
	loadedWidth,
	element,
	index,
	photo,
	open,
	active,
	closing,
	loadingTimer,
	publicMethod,
	div = "div",
	className,
	init;

	// ****************
	// HELPER FUNCTIONS
	// ****************
	
	// Convience function for creating new jQuery objects
	function $tag(tag, id, css) {
		var element = document.createElement(tag);

		if (id) {
			element.id = prefix + id;
		}

		if (css) {
			element.style.cssText = css;
		}

		return $(element);
	}

	// Determine the next and previous members in a group.
	function getIndex(increment) {
		var
		max = $related.length,
		newIndex = (index + increment) % max;
		
		return (newIndex < 0) ? max + newIndex : newIndex;
	}

	// Convert '%' and 'px' values to integers
	function setSize(size, dimension) {
		return Math.round((/%/.test(size) ? ((dimension === 'x' ? $window.width() : $window.height()) / 100) : 1) * parseInt(size, 10));
	}
	
	// Checks an href to see if it is a photo.
	// There is a force photo option (photo: true) for hrefs that cannot be matched by the regex.
	function isImage(url) {
		return settings.photo || settings.photoRegex.test(url);
	}

	function retinaUrl(url) {
		return settings.retinaUrl && window.devicePixelRatio > 1 ? url.replace(settings.photoRegex, settings.retinaSuffix) : url;
	}

	// Assigns function results to their respective properties
	function makeSettings() {
		var i,
			data = $.data(element, colorbox);
		
		if (data == null) {
			settings = $.extend({}, defaults);
			if (console && console.log) {
				console.log('Error: cboxElement missing settings object');
			}
		} else {
			settings = $.extend({}, data);
		}
		
		for (i in settings) {
			if ($.isFunction(settings[i]) && i.slice(0, 2) !== 'on') { // checks to make sure the function isn't one of the callbacks, they will be handled at the appropriate time.
				settings[i] = settings[i].call(element);
			}
		}
		
		settings.rel = settings.rel || element.rel || $(element).data('rel') || 'nofollow';
		settings.href = settings.href || $(element).attr('href');
		settings.title = settings.title || element.title;
		
		if (typeof settings.href === "string") {
			settings.href = $.trim(settings.href);
		}
	}

	function trigger(event, callback) {
		// for external use
		$(document).trigger(event);

		// for internal use
		$events.trigger(event);

		if ($.isFunction(callback)) {
			callback.call(element);
		}
	}

	// Slideshow functionality
	function slideshow() {
		var
		timeOut,
		className = prefix + "Slideshow_",
		click = "click." + prefix,
		clear,
		set,
		start,
		stop;
		
		if (settings.slideshow && $related[1]) {
			clear = function () {
				clearTimeout(timeOut);
			};

			set = function () {
				if (settings.loop || $related[index + 1]) {
					timeOut = setTimeout(publicMethod.next, settings.slideshowSpeed);
				}
			};

			start = function () {
				$slideshow
					.html(settings.slideshowStop)
					.unbind(click)
					.one(click, stop);

				$events
					.bind(event_complete, set)
					.bind(event_load, clear)
					.bind(event_cleanup, stop);

				$box.removeClass(className + "off").addClass(className + "on");
			};
			
			stop = function () {
				clear();
				
				$events
					.unbind(event_complete, set)
					.unbind(event_load, clear)
					.unbind(event_cleanup, stop);
				
				$slideshow
					.html(settings.slideshowStart)
					.unbind(click)
					.one(click, function () {
						publicMethod.next();
						start();
					});

				$box.removeClass(className + "on").addClass(className + "off");
			};
			
			if (settings.slideshowAuto) {
				start();
			} else {
				stop();
			}
		} else {
			$box.removeClass(className + "off " + className + "on");
		}
	}

	function launch(target) {
		if (!closing) {
			
			element = target;
			
			makeSettings();
			
			$related = $(element);
			
			index = 0;
			
			if (settings.rel !== 'nofollow') {
				$related = $('.' + boxElement).filter(function () {
					var data = $.data(this, colorbox),
						relRelated;

					if (data) {
						relRelated =  $(this).data('rel') || data.rel || this.rel;
					}
					
					return (relRelated === settings.rel);
				});
				index = $related.index(element);
				
				// Check direct calls to ColorBox.
				if (index === -1) {
					$related = $related.add(element);
					index = $related.length - 1;
				}
			}
			
			if (!open) {
				open = active = true; // Prevents the page-change action from queuing up if the visitor holds down the left or right keys.
				
				// Show colorbox so the sizes can be calculated in older versions of jQuery
				$box.css({visibility:'hidden', display:'block'});
				
				$loaded = $tag(div, 'LoadedContent', 'width:0; height:0; overflow:hidden').appendTo($content);

				// Cache values needed for size calculations
				interfaceHeight = $topBorder.height() + $bottomBorder.height() + $content.outerHeight(true) - $content.height();//Subtraction needed for IE6
				interfaceWidth = $leftBorder.width() + $rightBorder.width() + $content.outerWidth(true) - $content.width();
				loadedHeight = $loaded.outerHeight(true);
				loadedWidth = $loaded.outerWidth(true);

				if (settings.returnFocus) {
					$(element).blur();
					$events.one(event_closed, function () {
						$(element).focus();
					});
				}
				
				$overlay.css({
					opacity: parseFloat(settings.opacity),
					cursor: settings.overlayClose ? "pointer" : "auto",
					visibility: 'visible'
				}).show();
				
				// Opens inital empty ColorBox prior to content being loaded.
				settings.w = setSize(settings.initialWidth, 'x');
				settings.h = setSize(settings.initialHeight, 'y');
				publicMethod.position();

				if (isIE6) {
					$window.bind('resize.' + event_ie6 + ' scroll.' + event_ie6, function () {
						$overlay.css({width: $window.width(), height: $window.height(), top: $window.scrollTop(), left: $window.scrollLeft()});
					}).trigger('resize.' + event_ie6);
				}
				
				slideshow();

				trigger(event_open, settings.onOpen);
				
				$groupControls.add($title).hide();
				
				$close.html(settings.close).show();
			}
			
			publicMethod.load(true);
		}
	}

	// ColorBox's markup needs to be added to the DOM prior to being called
	// so that the browser will go ahead and load the CSS background images.
	function appendHTML() {
		if (!$box && document.body) {
			init = false;

			$window = $(window);
			$box = $tag(div).attr({id: colorbox, 'class': isIE ? prefix + (isIE6 ? 'IE6' : 'IE') : ''}).hide();
			$overlay = $tag(div, "Overlay", isIE6 ? 'position:absolute' : '').hide();
			$loadingOverlay = $tag(div, "LoadingOverlay").add($tag(div, "LoadingGraphic"));
			$wrap = $tag(div, "Wrapper");
			$content = $tag(div, "Content").append(
				$title = $tag(div, "Title"),
				$current = $tag(div, "Current"),
				$next = $tag(div, "Next"),
				$prev = $tag(div, "Previous"),
				$slideshow = $tag(div, "Slideshow"),
				$close = $tag(div, "Close")
			);
			
			$wrap.append( // The 3x3 Grid that makes up ColorBox
				$tag(div).append(
					$tag(div, "TopLeft"),
					$topBorder = $tag(div, "TopCenter"),
					$tag(div, "TopRight")
				),
				$tag(div, false, 'clear:left').append(
					$leftBorder = $tag(div, "MiddleLeft"),
					$content,
					$rightBorder = $tag(div, "MiddleRight")
				),
				$tag(div, false, 'clear:left').append(
					$tag(div, "BottomLeft"),
					$bottomBorder = $tag(div, "BottomCenter"),
					$tag(div, "BottomRight")
				)
			).find('div div').css({'float': 'left'});
			
			$loadingBay = $tag(div, false, 'position:absolute; width:9999px; visibility:hidden; display:none');
			
			$groupControls = $next.add($prev).add($current).add($slideshow);

			$(document.body).append($overlay, $box.append($wrap, $loadingBay));
		}
	}

	// Add ColorBox's event bindings
	function addBindings() {
		function clickHandler(e) {
			// ignore non-left-mouse-clicks and clicks modified with ctrl / command, shift, or alt.
			// See: http://jacklmoore.com/notes/click-events/
			if (!(e.which > 1 || e.shiftKey || e.altKey || e.metaKey)) {
				e.preventDefault();
				launch(this);
			}
		}

		if ($box) {
			if (!init) {
				init = true;

				// Anonymous functions here keep the public method from being cached, thereby allowing them to be redefined on the fly.
				$next.click(function () {
					publicMethod.next();
				});
				$prev.click(function () {
					publicMethod.prev();
				});
				$close.click(function () {
					publicMethod.close();
				});
				$overlay.click(function () {
					if (settings.overlayClose) {
						publicMethod.close();
					}
				});
				
				// Key Bindings
				$(document).bind('keydown.' + prefix, function (e) {
					var key = e.keyCode;
					if (open && settings.escKey && key === 27) {
						e.preventDefault();
						publicMethod.close();
					}
					if (open && settings.arrowKey && $related[1]) {
						if (key === 37) {
							e.preventDefault();
							$prev.click();
						} else if (key === 39) {
							e.preventDefault();
							$next.click();
						}
					}
				});

				if ($.isFunction($.fn.on)) {
					$(document).on('click.'+prefix, '.'+boxElement, clickHandler);
				} else { // For jQuery 1.3.x -> 1.6.x
					$('.'+boxElement).live('click.'+prefix, clickHandler);
				}
			}
			return true;
		}
		return false;
	}

	// Don't do anything if ColorBox already exists.
	if ($.colorbox) {
		return;
	}

	// Append the HTML when the DOM loads
	$(appendHTML);


	// ****************
	// PUBLIC FUNCTIONS
	// Usage format: $.fn.colorbox.close();
	// Usage from within an iframe: parent.$.fn.colorbox.close();
	// ****************
	
	publicMethod = $.fn[colorbox] = $[colorbox] = function (options, callback) {
		var $this = this;
		
		options = options || {};
		
		appendHTML();

		if (addBindings()) {
			if ($.isFunction($this)) { // assume a call to $.colorbox
				$this = $('<a/>');
				options.open = true;
			} else if (!$this[0]) { // colorbox being applied to empty collection
				return $this;
			}
			
			if (callback) {
				options.onComplete = callback;
			}
			
			$this.each(function () {
				$.data(this, colorbox, $.extend({}, $.data(this, colorbox) || defaults, options));
			}).addClass(boxElement);
			
			if (($.isFunction(options.open) && options.open.call($this)) || options.open) {
				launch($this[0]);
			}
		}
		
		return $this;
	};

	publicMethod.position = function (speed, loadedCallback) {
		var
		css,
		top = 0,
		left = 0,
		offset = $box.offset(),
		scrollTop,
		scrollLeft;
		
		$window.unbind('resize.' + prefix);

		// remove the modal so that it doesn't influence the document width/height
		$box.css({top: -9e4, left: -9e4});

		scrollTop = $window.scrollTop();
		scrollLeft = $window.scrollLeft();

		if (settings.fixed && !isIE6) {
			offset.top -= scrollTop;
			offset.left -= scrollLeft;
			$box.css({position: 'fixed'});
		} else {
			top = scrollTop;
			left = scrollLeft;
			$box.css({position: 'absolute'});
		}

		// keeps the top and left positions within the browser's viewport.
		if (settings.right !== false) {
			left += Math.max($window.width() - settings.w - loadedWidth - interfaceWidth - setSize(settings.right, 'x'), 0);
		} else if (settings.left !== false) {
			left += setSize(settings.left, 'x');
		} else {
			left += Math.round(Math.max($window.width() - settings.w - loadedWidth - interfaceWidth, 0) / 2);
		}
		
		if (settings.bottom !== false) {
			top += Math.max($window.height() - settings.h - loadedHeight - interfaceHeight - setSize(settings.bottom, 'y'), 0);
		} else if (settings.top !== false) {
			top += setSize(settings.top, 'y');
		} else {
			top += Math.round(Math.max($window.height() - settings.h - loadedHeight - interfaceHeight, 0) / 2);
		}

		$box.css({top: offset.top, left: offset.left, visibility:'visible'});

		// setting the speed to 0 to reduce the delay between same-sized content.
		speed = ($box.width() === settings.w + loadedWidth && $box.height() === settings.h + loadedHeight) ? 0 : speed || 0;
		
		// this gives the wrapper plenty of breathing room so it's floated contents can move around smoothly,
		// but it has to be shrank down around the size of div#colorbox when it's done.  If not,
		// it can invoke an obscure IE bug when using iframes.
		$wrap[0].style.width = $wrap[0].style.height = "9999px";
		
		function modalDimensions(that) {
			$topBorder[0].style.width = $bottomBorder[0].style.width = $content[0].style.width = (parseInt(that.style.width,10) - interfaceWidth)+'px';
			$content[0].style.height = $leftBorder[0].style.height = $rightBorder[0].style.height = (parseInt(that.style.height,10) - interfaceHeight)+'px';
		}

		css = {width: settings.w + loadedWidth + interfaceWidth, height: settings.h + loadedHeight + interfaceHeight, top: top, left: left};

		if(speed===0){ // temporary workaround to side-step jQuery-UI 1.8 bug (https://bugs.jquery.com/ticket/12273)
			$box.css(css);
		}
		$box.dequeue().animate(css, {
			duration: speed,
			complete: function () {
				modalDimensions(this);
				
				active = false;
				
				// shrink the wrapper down to exactly the size of colorbox to avoid a bug in IE's iframe implementation.
				$wrap[0].style.width = (settings.w + loadedWidth + interfaceWidth) + "px";
				$wrap[0].style.height = (settings.h + loadedHeight + interfaceHeight) + "px";
				
				if (settings.reposition) {
					setTimeout(function () {  // small delay before binding onresize due to an IE8 bug.
						$window.bind('resize.' + prefix, publicMethod.position);
					}, 1);
				}

				if (loadedCallback) {
					loadedCallback();
				}
			},
			step: function () {
				modalDimensions(this);
			}
		});
	};

	publicMethod.resize = function (options) {
		if (open) {
			options = options || {};
			
			if (options.width) {
				settings.w = setSize(options.width, 'x') - loadedWidth - interfaceWidth;
			}
			if (options.innerWidth) {
				settings.w = setSize(options.innerWidth, 'x');
			}
			$loaded.css({width: settings.w});
			
			if (options.height) {
				settings.h = setSize(options.height, 'y') - loadedHeight - interfaceHeight;
			}
			if (options.innerHeight) {
				settings.h = setSize(options.innerHeight, 'y');
			}
			if (!options.innerHeight && !options.height) {
				$loaded.css({height: "auto"});
				settings.h = $loaded.height();
			}
			$loaded.css({height: settings.h});
			
			publicMethod.position(settings.transition === "none" ? 0 : settings.speed);
		}
	};

	publicMethod.prep = function (object) {
		if (!open) {
			return;
		}
		
		var callback, speed = settings.transition === "none" ? 0 : settings.speed;
		
		$loaded.empty().remove(); // Using empty first may prevent some IE7 issues.

		$loaded = $tag(div, 'LoadedContent').append(object);
		
		function getWidth() {
			settings.w = settings.w || $loaded.width();
			settings.w = settings.mw && settings.mw < settings.w ? settings.mw : settings.w;
			return settings.w;
		}
		function getHeight() {
			settings.h = settings.h || $loaded.height();
			settings.h = settings.mh && settings.mh < settings.h ? settings.mh : settings.h;
			return settings.h;
		}
		
		$loaded.hide()
		.appendTo($loadingBay.show())// content has to be appended to the DOM for accurate size calculations.
		.css({width: getWidth(), overflow: settings.scrolling ? 'auto' : 'hidden'})
		.css({height: getHeight()})// sets the height independently from the width in case the new width influences the value of height.
		.prependTo($content);
		
		$loadingBay.hide();
		
		// floating the IMG removes the bottom line-height and fixed a problem where IE miscalculates the width of the parent element as 100% of the document width.
		
		$(photo).css({'float': 'none'});

		callback = function () {
			var total = $related.length,
				iframe,
				frameBorder = 'frameBorder',
				allowTransparency = 'allowTransparency',
				complete;
			
			if (!open) {
				return;
			}
			
			function removeFilter() {
				if (isIE) {
					$box[0].style.removeAttribute('filter');
				}
			}
			
			complete = function () {
				clearTimeout(loadingTimer);
				$loadingOverlay.remove();
				trigger(event_complete, settings.onComplete);
			};
			
			if (isIE) {
				//This fadeIn helps the bicubic resampling to kick-in.
				if (photo) {
					$loaded.fadeIn(100);
				}
			}
			
			$title.html(settings.title).add($loaded).show();
			
			if (total > 1) { // handle grouping
				if (typeof settings.current === "string") {
					$current.html(settings.current.replace('{current}', index + 1).replace('{total}', total)).show();
				}
				
				$next[(settings.loop || index < total - 1) ? "show" : "hide"]().html(settings.next);
				$prev[(settings.loop || index) ? "show" : "hide"]().html(settings.previous);
				
				if (settings.slideshow) {
					$slideshow.show();
				}
				
				// Preloads images within a rel group
				if (settings.preloading) {
					$.each([getIndex(-1), getIndex(1)], function(){
						var src,
							img,
							i = $related[this],
							data = $.data(i, colorbox);

						if (data && data.href) {
							src = data.href;
							if ($.isFunction(src)) {
								src = src.call(i);
							}
						} else {
							src = $(i).attr('href');
						}

						if (src && (isImage(src) || data.photo)) {
							img = new Image();
							img.src = src;
						}
					});
				}
			} else {
				$groupControls.hide();
			}
			
			if (settings.iframe) {
				iframe = $tag('iframe')[0];
				
				if (frameBorder in iframe) {
					iframe[frameBorder] = 0;
				}
				
				if (allowTransparency in iframe) {
					iframe[allowTransparency] = "true";
				}

				if (!settings.scrolling) {
					iframe.scrolling = "no";
				}
				
				$(iframe)
					.attr({
						src: settings.href,
						name: (new Date()).getTime(), // give the iframe a unique name to prevent caching
						'class': prefix + 'Iframe',
						allowFullScreen : true, // allow HTML5 video to go fullscreen
						webkitAllowFullScreen : true,
						mozallowfullscreen : true
					})
					.one('load', complete)
					.appendTo($loaded);
				
				$events.one(event_purge, function () {
					iframe.src = "//about:blank";
				});

				if (settings.fastIframe) {
					$(iframe).trigger('load');
				}
			} else {
				complete();
			}
			
			if (settings.transition === 'fade') {
				$box.fadeTo(speed, 1, removeFilter);
			} else {
				removeFilter();
			}
		};
		
		if (settings.transition === 'fade') {
			$box.fadeTo(speed, 0, function () {
				publicMethod.position(0, callback);
			});
		} else {
			publicMethod.position(speed, callback);
		}
	};

	publicMethod.load = function (launched) {
		var href, setResize, prep = publicMethod.prep, $inline;
		
		active = true;
		
		photo = false;
		
		element = $related[index];
		
		if (!launched) {
			makeSettings();
		}

		if (className) {
			$box.add($overlay).removeClass(className);
		}
		if (settings.className) {
			$box.add($overlay).addClass(settings.className);
		}
		className = settings.className;
		
		trigger(event_purge);
		
		trigger(event_load, settings.onLoad);
		
		settings.h = settings.height ?
				setSize(settings.height, 'y') - loadedHeight - interfaceHeight :
				settings.innerHeight && setSize(settings.innerHeight, 'y');
		
		settings.w = settings.width ?
				setSize(settings.width, 'x') - loadedWidth - interfaceWidth :
				settings.innerWidth && setSize(settings.innerWidth, 'x');
		
		// Sets the minimum dimensions for use in image scaling
		settings.mw = settings.w;
		settings.mh = settings.h;
		
		// Re-evaluate the minimum width and height based on maxWidth and maxHeight values.
		// If the width or height exceed the maxWidth or maxHeight, use the maximum values instead.
		if (settings.maxWidth) {
			settings.mw = setSize(settings.maxWidth, 'x') - loadedWidth - interfaceWidth;
			settings.mw = settings.w && settings.w < settings.mw ? settings.w : settings.mw;
		}
		if (settings.maxHeight) {
			settings.mh = setSize(settings.maxHeight, 'y') - loadedHeight - interfaceHeight;
			settings.mh = settings.h && settings.h < settings.mh ? settings.h : settings.mh;
		}
		
		href = settings.href;
		
		loadingTimer = setTimeout(function () {
			$loadingOverlay.appendTo($content);
		}, 100);
		
		if (settings.inline) {
			// Inserts an empty placeholder where inline content is being pulled from.
			// An event is bound to put inline content back when ColorBox closes or loads new content.
			$inline = $tag(div).hide().insertBefore($(href)[0]);

			$events.one(event_purge, function () {
				$inline.replaceWith($loaded.children());
			});

			prep($(href));
		} else if (settings.iframe) {
			// IFrame element won't be added to the DOM until it is ready to be displayed,
			// to avoid problems with DOM-ready JS that might be trying to run in that iframe.
			prep(" ");
		} else if (settings.html) {
			prep(settings.html);
		} else if (isImage(href)) {

			href = retinaUrl(href);

			$(photo = new Image())
			.addClass(prefix + 'Photo')
			.bind('error',function () {
				settings.title = false;
				prep($tag(div, 'Error').html(settings.imgError));
			})
			.one('load', function () {
				var percent;

				if (settings.retinaImage && window.devicePixelRatio > 1) {
					photo.height = photo.height / window.devicePixelRatio;
					photo.width = photo.width / window.devicePixelRatio;
				}

				if (settings.scalePhotos) {
					setResize = function () {
						photo.height -= photo.height * percent;
						photo.width -= photo.width * percent;
					};
					if (settings.mw && photo.width > settings.mw) {
						percent = (photo.width - settings.mw) / photo.width;
						setResize();
					}
					if (settings.mh && photo.height > settings.mh) {
						percent = (photo.height - settings.mh) / photo.height;
						setResize();
					}
				}
				
				if (settings.h) {
					photo.style.marginTop = Math.max(settings.mh - photo.height, 0) / 2 + 'px';
				}
				
				if ($related[1] && (settings.loop || $related[index + 1])) {
					photo.style.cursor = 'pointer';
					photo.onclick = function () {
						publicMethod.next();
					};
				}
				
				if (isIE) {
					photo.style.msInterpolationMode = 'bicubic';
				}
				
				setTimeout(function () { // A pause because Chrome will sometimes report a 0 by 0 size otherwise.
					prep(photo);
				}, 1);
			});
			
			setTimeout(function () { // A pause because Opera 10.6+ will sometimes not run the onload function otherwise.
				photo.src = href;
			}, 1);
		} else if (href) {
			$loadingBay.load(href, settings.data, function (data, status) {
				prep(status === 'error' ? $tag(div, 'Error').html(settings.xhrError) : $(this).contents());
			});
		}
	};
		
	// Navigates to the next page/image in a set.
	publicMethod.next = function () {
		if (!active && $related[1] && (settings.loop || $related[index + 1])) {
			index = getIndex(1);
			publicMethod.load();
		}
	};
	
	publicMethod.prev = function () {
		if (!active && $related[1] && (settings.loop || index)) {
			index = getIndex(-1);
			publicMethod.load();
		}
	};

	// Note: to use this within an iframe use the following format: parent.$.fn.colorbox.close();
	publicMethod.close = function () {
		if (open && !closing) {
			
			closing = true;
			
			open = false;
			
			trigger(event_cleanup, settings.onCleanup);
			
			$window.unbind('.' + prefix + ' .' + event_ie6);
			
			$overlay.fadeTo(200, 0);
			
			$box.stop().fadeTo(300, 0, function () {
			
				$box.add($overlay).css({'opacity': 1, cursor: 'auto'}).hide();
				
				trigger(event_purge);
				
				$loaded.empty().remove(); // Using empty first may prevent some IE7 issues.
				
				setTimeout(function () {
					closing = false;
					trigger(event_closed, settings.onClosed);
				}, 1);
			});
		}
	};

	// Removes changes ColorBox made to the document, but does not remove the plugin
	// from jQuery.
	publicMethod.remove = function () {
		$([]).add($box).add($overlay).remove();
		$box = null;
		$('.' + boxElement)
			.removeData(colorbox)
			.removeClass(boxElement);

		$(document).unbind('click.'+prefix);
	};

	// A method for fetching the current element ColorBox is referencing.
	// returns a jQuery object.
	publicMethod.element = function () {
		return $(element);
	};

	publicMethod.settings = defaults;

}(jQuery, document, window));

$(function(){

$(".group-cbox1").colorbox({rel:'group-cbox1', transition:"none", width:"736px", height:"448px"});

$(".inline").colorbox({inline:true, width:"736px"});

});



 
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console