LightBox

<div class="row">
  <div class="col-md-4 col-sm-6  pb-30">
    <div class="lightbox-box">
      <div class="dg-imagebox05 img-right-rotate">
        <div class="pic"><img src="/portals/1/pages-images/lightbox-img01.jpg"></div>
        <div class="content">
          <div class="center"><a class="LightBox_image full-link" href="/portals/1/pages-images/imageboxes-img01.jpg" title="Default"></a> <span class="icon fa fa-picture"></span> </div>
        </div>
        <div class="bg bg-black"> </div>
      </div>
      <h3 class="title"> DEFAULT </h3>
    </div>
  </div>
  <div class="col-md-4 col-sm-6  pb-30">
    <div class="lightbox-box">
      <div class="dg-imagebox01">
        <div class="pic"> <img src="/portals/1/pages-images/lightbox-img02.jpg"> </div>
        <a class="LightBox_image full-link" href="/portals/1/pages-images/imageboxes-img02.jpg" title="Our mission"></a>
        <div class="content">
          <div class="center"> <span class="icon fa fa-picture"></span> </div>
        </div>
        <div class="bg border-accent"> </div>
      </div>
      <h3 class="title"> OUR MISSION </h3>
    </div>
  </div>
  <div class="col-md-4 col-sm-6  pb-30">
    <div class="lightbox-box">
      <div class="dg-imagebox10">
        <div class="pic"><img src="/portals/1/pages-images/lightbox-img03.jpg"><a class="LightBox_image full-link" href="/portals/1/pages-images/imageboxes-img03.jpg" title="Design & code"></a> <span class="icon fa fa-picture"></span> </div>
      </div>
      <h3 class="title"> DESIGN & CODE </h3>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-4 col-sm-6  pb-30">
    <div class="lightbox-box">
      <div class="dg-imagebox05 img-right-rotate">
        <div class="pic"><img src="/portals/1/pages-images/lightbox-img04.jpg"></div>
        <a class="LightBox_image_gallery1 full-link" href="/portals/1/pages-images/imageboxes-img04.jpg" title="Image 01"> </a>
        <div class="content">
          <div class="center"> <span class="icon fa fa-picture"></span> </div>
        </div>
        <div class="bg bg-black"> </div>
      </div>
      <h3 class="title">IMAGE 01</h3>
    </div>
  </div>
  <div class="col-md-4 col-sm-6  pb-30">
    <div class="lightbox-box">
      <div class="dg-imagebox05 img-right-rotate">
        <div class="pic"><img src="/portals/1/pages-images/lightbox-img05.jpg"></div>
        <a class="LightBox_image_gallery1 full-link" href="/portals/1/pages-images/imageboxes-img05.jpg" title="Image 02"></a>
        <div class="content">
          <div class="center"> <span class="icon fa fa-picture"></span> </div>
        </div>
        <div class="bg bg-black"> </div>
      </div>
      <h3 class="title">IMAGE 02</h3>
    </div>
  </div>
  <div class="col-md-4 col-sm-6  pb-30">
    <div class="lightbox-box">
      <div class="dg-imagebox05 img-right-rotate">
        <div class="pic"><img src="/portals/1/pages-images/lightbox-img06.jpg"></div>
        <a class="LightBox_image_gallery1 full-link" href="/portals/1/pages-images/imageboxes-img06.jpg" title="Image 03"></a>
        <div class="content">
          <div class="center"> <span class="icon fa fa-picture"></span> </div>
        </div>
        <div class="bg bg-black"> </div>
      </div>
      <h3 class="title">IMAGE 03</h3>
    </div>
  </div>
</div>

<div class="lightbox-box">
  <div class="dg-imagebox05 img-right-rotate">
    <div class="pic"><img src="/portals/1/pages-images/lightbox-img07.jpg"></div>
    <div class="LightBox_image_group"> <a class="full-link" href="/portals/1/pages-images/imageboxes-img07.jpg" title="Image 01"> </a> <a href="/portals/1/pages-images/imageboxes-img01.jpg" title="image 02"> </a> <a href="/portals/1/pages-images/imageboxes-img02.jpg" title="image 03"> </a> </div>
    <div class="content ">
      <div class="center"> <span class="icon fa fa-picture"></span> </div>
    </div>
    <div class="bg bg-black"> </div>
  </div>
  <h3 class="title">Education(3)</h3>
</div>

Video

---

<div class="lightbox-box">
  <div class="dg-imagebox07 img-right-rotate">
    <div class="pic"><img src="/portals/1/pages-images/lightbox-img08.jpg"></div>
    <a class="LightBox_youtube full-link" href="http://www.youtube.com/watch?v=AkcUoA2f-jU"></a>
    <div class="content">
      <div class="center"> <span class="dg-ico-max size-lg color-white"><i class="fa fa-play-circle2"></i></span> </div>
    </div>
    <div class="bg bg-black"> </div>
  </div>
  <h3 class="title">Video</h3>
</div>

<a class="LightBox_youtube dg-btn-1 btn-accent radius-3px" href="http://www.youtube.com/watch?v=AkcUoA2f-jU" title="Open Youtube Video">Open Youtube Video</a>

Vimeo Vidio

---

<a class="LightBox_vimeo dg-btn-1 btn-accent radius-3px" href="https://vimeo.com/181538531" title="Open Vimeo Video">Open Vimeo Video</a>

Google Map

---

<a class="LightBox_gmaps dg-btn-1 btn-accent radius-3px" href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&hl=en&t=v&hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom" title="Open Google Map">Open Google Map</a>

<button class="dg-btn-default radius-3px size-sm" data-target="#bs-example-modal" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal" id="bs-example-modal" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Nam volutpat aliquam sem, in tristique felis luctus consectetur. In molestie quis velit eget manttis. Vivamus libero eronas, euismod bibe ndum vel, aliquet a nunc. Proin viverra eleifend metus, sit amet bibendum orci. sed eget semper odio mauris fermentum porttitor au gu vehicula. Quisque congue velit turpis sit amet interdum quam facilisis iaen.</p>
        <p>Proin venenatis purus a ipsum porttitor, sed cursus libero bibendu nean auctor felis et sagittis egestas.Proin viverra eleifend metus, sit amet bibendum orci. sed eget semper odio mauris fermentum porttitor au gu vehicula. Quisque congue velit turpis sit amet interdum quam facilisis iaen.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Small

---

<button class="dg-btn-default radius-3px size-sm" data-target="#bs-example-modal-sm" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal" id="bs-example-modal-sm" role="dialog" tabindex="-1">
  <div class="modal-dialog  modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Nam volutpat aliquam sem, in tristique felis luctus consectetur. In molestie quis velit eget manttis. Vivamus libero eronas, euismod bibe ndum vel, aliquet a nunc. Proin viverra eleifend metus, sit amet bibendum orci. sed eget semper odio mauris fermentum porttitor au gu vehicula. Quisque congue velit turpis sit amet interdum quam facilisis iaen.</p>
        <p>Proin venenatis purus a ipsum porttitor, sed cursus libero bibendu nean auctor felis et sagittis egestas.Proin viverra eleifend metus, sit amet bibendum orci. sed eget semper odio mauris fermentum porttitor au gu vehicula. Quisque congue velit turpis sit amet interdum quam facilisis iaen.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Large

---

<button class="dg-btn-default radius-3px size-sm" data-target="#bs-example-modal-lg" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal" id="bs-example-modal-lg" role="dialog" tabindex="-1">
  <div class="modal-dialog  modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Nam volutpat aliquam sem, in tristique felis luctus consectetur. In molestie quis velit eget manttis. Vivamus libero eronas, euismod bibe ndum vel, aliquet a nunc. Proin viverra eleifend metus, sit amet bibendum orci. sed eget semper odio mauris fermentum porttitor au gu vehicula. Quisque congue velit turpis sit amet interdum quam facilisis iaen.</p>
        <p>Proin venenatis purus a ipsum porttitor, sed cursus libero bibendu nean auctor felis et sagittis egestas.Proin viverra eleifend metus, sit amet bibendum orci. sed eget semper odio mauris fermentum porttitor au gu vehicula. Quisque congue velit turpis sit amet interdum quam facilisis iaen.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Full Wide

---

<button class="dg-btn-default radius-3px size-sm" data-target="#bs-example-modal-xl" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal" id="bs-example-modal-xl" role="dialog" tabindex="-1">
  <div class="modal-dialog  modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Nam volutpat aliquam sem, in tristique felis luctus consectetur. In molestie quis velit eget manttis. Vivamus libero eronas, euismod bibe ndum vel, aliquet a nunc. Proin viverra eleifend metus, sit amet bibendum orci. sed eget semper odio mauris fermentum porttitor au gu vehicula. Quisque congue velit turpis sit amet interdum quam facilisis iaen.</p>
        <p>Proin venenatis purus a ipsum porttitor, sed cursus libero bibendu nean auctor felis et sagittis egestas.Proin viverra eleifend metus, sit amet bibendum orci. sed eget semper odio mauris fermentum porttitor au gu vehicula. Quisque congue velit turpis sit amet interdum quam facilisis iaen.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

<button class="dg-btn-default radius-3px size-sm" data-target="#bs-header-default" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal" id="bs-header-default" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header ">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 btn-accent radius-3px" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Primary Header

---

<button class="dg-btn-1 btn-primary radius-3px size-sm" data-target="#bs-header-primary" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal" id="bs-header-primary" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-primary">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 btn-primary radius-3px" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Danger Header

---

<button class="dg-btn-1 btn-danger radius-3px size-sm" data-target="#bs-header-danger" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal " id="bs-header-danger" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-danger">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 btn-danger radius-3px" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Success Header

---

<button class="dg-btn-1 btn-success radius-3px size-sm" data-target="#bs-header-success" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal " id="bs-header-success" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-success">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 btn-success radius-3px" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Info Header

---

<button class="dg-btn-1 btn-info radius-3px size-sm" data-target="#bs-header-info" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal " id="bs-header-info" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-info">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-info" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Warning Header

---

<button class="dg-btn-1 btn-warning radius-3px size-sm" data-target="#bs-header-warning" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal " id="bs-header-warning" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-warning">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-warning" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Custom header color

---

<button class="dg-btn-1 btn-denim radius-3px size-sm" data-target="#bs-header-denim" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal " id="bs-header-denim" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-denim">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-denim" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Custom Background color

---

<button class="dg-btn-1 btn-cadetblue radius-3px size-sm" data-target="#bs-bg-cadetblue" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal " id="bs-bg-cadetblue" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content bg-cadetblue">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-close" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

<a class="LightBox_youtube dg-btn-1 btn-accent radius-3px" href="http://www.youtube.com/watch?v=AkcUoA2f-jU" title="Open Youtube Video">Open Youtube Video</a>

Fade In & Scale

---

<a class="LightBox_vimeo dg-btn-1 btn-accent radius-3px" href="https://vimeo.com/181538531" title="Open Vimeo Video">Open Vimeo Video</a>

Fall

---

<button class="btn btn-default" data-target="#bs-example-out" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal modal-slide-out" id="bs-example-out" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Slide From Bottom

---

<button class="btn btn-default" data-target="#bs-example-down" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal modal-slide-down" id="bs-example-down" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Slide From Right

---

<button class="btn btn-default" data-target="#bs-example-right" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal modal-slide-right" id="bs-example-right" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Slide From Left

---

<button class="btn btn-default" data-target="#bs-example-left" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal modal-slide-left" id="bs-example-left" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

From Left

---

<button class="btn btn-default" data-target="#bs-rotate-left" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal modal-rotate-left" id="bs-rotate-left" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

From Right

---

<button class="btn btn-default" data-target="#bs-rotate-right" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal modal-rotate-right" id="bs-rotate-right" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

3D Flip Horizontal

---

<button class="btn btn-default" data-target="#bs-3d-horizontal" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal modal-3d-horizontal" id="bs-3d-horizontal" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

3D Flip Vertical

---

<button class="btn btn-default" data-target="#bs-3d-vertical" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal modal-3d-vertical" id="bs-3d-vertical" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

3D Slit

---

<button class="btn btn-default" data-target="#bs-3d-slit" data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal modal-3d-slit" id="bs-3d-slit" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>

Newspaper

---

<button class="btn btn-default" data-target="#bs-3d-newspaper " data-toggle="modal" type="button">Large Modal</button>
<div aria-hidden="true" class="modal fade dg-modal modal-3d-newspaper " id="bs-3d-newspaper" role="dialog" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Default Modal Title</h4>
      </div>
      <div class="modal-body">
        <p>Content Text</p>
      </div>
      <div class="modal-footer">
        <button class="dg-btn-1 radius-3px btn-accent" data-dismiss="modal" type="button">Close</button>
      </div>
    </div>
  </div>
</div>