*,
*:after,
*:before 
    {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    padding:0;
    margin:0
    }

.clearfix:before,
.clearfix:after
    {
    content:" ";
    display:table
    }
.clearfix:after{clear:both}
.clearfix{*zoom:1}
.og-grid
{
    list-style:none;
    padding:20px 0;
    margin:0 auto;
    text-align:left;    /* changed from center vt  */
    width:90%           /* changed from 100% - width of the grid vt  */
    }
.og-grid li
{
    display:inline-block;
    margin:10px 5px 0 5px;
    vertical-align:top
    }
.og-grid li.hidden{display:none}
.og-grid li>a,
.og-grid li>a img
{
    border:0;
    outline:0;
    display:block;
    position:relative
    }
.og-pointer
{
    top:auto;
    border:solid transparent;
    content:" ";
    height:0;
    width:0;
    position:relative;
    pointer-events:none;
    border-bottom-color:#222;
    border-width:15px;
    left:50%;
    margin:-20px 0 0 -15px
    }
.og-expander
{
    position:absolute;
    background:#222;
    color:#d6d6d6;
    top:auto;
    left:0;
    width:150%;         /* size of expander itself (gray area) - changed from 100% vt */
    margin-top:0;
    text-align:left;
    height:0;
    overflow:hidden
    }
.og-expander-inner
{
    padding:75px 30px;  /* changed from 30px default to 75px height; this controls padding between photo and frame */
    height:100%
    }
.og-close
{
    position:absolute;
    width:40px;
    height:40px;
    top:10px;
    right:10px;
    cursor:pointer
    }
.og-close::before,
.og-close::after
{
    content:'';
    position:absolute;
    width:100%;
    top:50%;
    height:1px;
    background:#888;
    -webkit-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    transform:rotate(45deg)
    }
.og-close::after
{
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    transform:rotate(-45deg)
    }
.og-close:hover::before,
.og-close:hover::after{background:#333}
.og-fullimg,
.og-details
{
    width:100%;      /* adjust image location in expander vt 50% default */
    float:left;
    height: 100%;   /* adjust image location in expander vt 100% default */
    overflow:hidden;
    position:relative
    }
.og-details .infosep
{
    border-bottom:1px solid #121212;
    box-shadow:0 1px #2a2a2a;
    margin:15px 0
    }
.og-details{padding:0 20px}
.og-fullimg{text-align:center}
.og-fullimg img
{
    display:inline-block;
    max-height:100%;
    max-width:100%
    }
.og-details h3
{
    font-weight:300;
    font-size:36px;
    margin-top:0;
    margin-bottom:10px
    }
.og-details p
{
    font-weight:400;
    font-size:15px;
    line-height:22px;
    color:#999;
    padding-bottom:20px
    }
.og-details iframe
{
    max-width:400px;
    max-height:250px;
    margin-bottom:0
    }
.og-details a.link-button
{
    font-size:11px;
    padding:8px 10px;
    background-color:#454545;
    background:-moz-linear-gradient(top,#303030 0,#262626);
    background:-webkit-gradient(linear,left top,left bottom,from(#303030),to(#262626));
    -moz-border-radius:1px;
    -webkit-border-radius:1px;
    border-radius:1px;
    border:1px solid #141414;
    text-shadow:0 -1px 0 rgba(41,41,41,0.7),0 1px 0 rgba(3,3,3,0.3);
    white-space:normal;
    word-wrap:normal;
    color:#9f9f9f !important;
    cursor:pointer !important;
    font-size:11px;
    font-weight:bold;
    text-align:center;
    text-shadow:0 -1px 0 rgba(0,0,0,.5);
    white-space:normal;
    margin-left:10px
    }
.og-details a.first{margin-left:0}
.og-details a:hover
{
    background-color:#606060;
    background:-moz-linear-gradient(top,#454545 454545%,#303030);
    background:-webkit-gradient(linear,left top,left bottom,from(#454545),to(#303030))
    }
.og-loading
{
    width:20px;
    height:20px;
    border-radius:50%;
    background:#ddd;
    box-shadow:0 0 1px #ccc,15px 30px 1px #ccc,-15px 30px 1px #ccc;position:absolute;top:50%;
    left:50%;
    margin:-25px 0 0 -25px;
    -webkit-animation:loader .5s infinite ease-in-out both;
    -moz-animation:loader .5s infinite ease-in-out both;
    animation:loader .5s infinite ease-in-out both}@-webkit-keyframes loader{0{background:#ddd}33%{background:#ccc;box-shadow:0 0 1px #ccc,15px 30px 1px #ccc,-15px 30px 1px #ddd}66%{background:#ccc;box-shadow:0 0 1px #ccc,15px 30px 1px #ddd,-15px 30px 1px #ccc}}@-moz-keyframes loader{0{background:#ddd}33%{background:#ccc;box-shadow:0 0 1px #ccc,15px 30px 1px #ccc,-15px 30px 1px #ddd}66%{background:#ccc;box-shadow:0 0 1px #ccc,15px 30px 1px #ddd,-15px 30px 1px #ccc}}@keyframes loader{0{background:#ddd}33%{background:#ccc;box-shadow:0 0 1px #ccc,15px 30px 1px #ccc,-15px 30px 1px #ddd}66%{background:#ccc;box-shadow:0 0 1px #ccc,15px 30px 1px #ddd,-15px 30px 1px #ccc}
    }
.wagwep-container{overflow:hidden}
.wagwep-container ul#portfolio-filter
{
    float:left;
    font-size:16px;
    list-style:none;
    padding:10px 0;
    width:100%;
    border-bottom:1px solid #ddd
    }
.wagwep-container ul#portfolio-filter li
{
    float:left;
    line-height:16px;
    margin:0;
    padding:10px
    }
.wagwep-container ul#portfolio-filter li:last-child
{
    border-right:0;
    margin-right:0;
    padding-right:0
    }
.wagwep-container ul#portfolio-filter a
{
    color:#444444;
    text-decoration:none;
    border:0;
    background:0;
    margin:0 10px 10px 0;
    padding:6px 12px;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px
    }
.wagwep-container ul#portfolio-filter li.current a,ul#portfolio-filter a:hover
{
    text-decoration:none;
    background:#eee;
    color:#222
    }
.wagwep-container ul#portfolio-filter li.current a
{
    color:#333;
    font-weight:bold;
    background:#666;
    color:#fff
    }
.clearfix:before,.clearfix:after{content:" ";display:table}
.clearfix:after{clear:both}
.clearfix{*zoom:1}
.elastislide-list{list-style-type:none;display:none}
.no-js .elastislide-list{display:block}
.elastislide-carousel ul li{min-width:20px}
.elastislide-wrapper
{
    position:relative;
    background-color:#313131;
    margin:0 auto;
    min-height:60px;
    box-shadow:inset 0 0 10px #000;
    -moz-box-shadow:inset 0 0 10px #000;
    -webkit-box-shadow:inset 0 0 10px #000
    }
.elastislide-wrapper.elastislide-loading
{
    background-image:url(../images/loading.gif);
    background-repeat:no-repeat;
    background-position:center center
    }
.elastislide-horizontal{padding:10px 40px}
.elastislide-vertical{padding:40px 10px}
.elastislide-carousel{overflow:hidden;position:relative}
.elastislide-carousel ul
{
    position:relative;
    display:block;
    list-style-type:none;
    padding:0;
    margin:0;
    -webkit-backface-visibility:hidden;
    -webkit-transform:translateX(0);
    -moz-transform:translateX(0);
    -ms-transform:translateX(0);
    -o-transform:translateX(0);
    transform:translateX(0)
    }
.elastislide-horizontal ul{white-space:nowrap}
.elastislide-carousel ul li{margin:0;-webkit-backface-visibility:hidden}
.elastislide-horizontal ul li{height:100%;display:inline-block}
.elastislide-vertical ul li{display:block}
.elastislide-carousel ul li a{display:inline-block;width:100%;padding:0}
.elastislide-carousel ul li a img{display:block;border:2px solid #313131;max-width:100%}
.elastislide-carousel ul li a img.selected{border:2px solid #999}
.elastislide-wrapper nav span
{
    position:absolute;
    background:#1b1b1b url(../images/nav.png) no-repeat 4px 3px;
    width:23px;
    height:23px;
    border-radius:50%;
    text-indent:-9000px;
    cursor:pointer;
    opacity:.8
    }
.elastislide-wrapper nav span:hover{opacity:1.0}
.elastislide-horizontal nav span{top:50%;left:10px;margin-top:-11px}
.elastislide-vertical nav span
{
    top:10px;
    left:50%;
    margin-left:-11px;
    background-position:-17px 5px
    }
.elastislide-horizontal nav span.elastislide-next
{
    right:10px;
    left:auto;
    background-position:4px -17px
    }
.elastislide-vertical nav span.elastislide-next
{
    bottom:10px;
    top:auto;
    background-position:-17px -18px
    }
.og-grid li a{overflow:hidden}
.og-grid li a.unhoverdir{overflow:visible}
.og-grid li a figure
{
    position:absolute;
    background:#333;
    background:rgba(48,48,48,0.7);
    width:100%;
    height:100%
    }
.og-grid li a figure span
{
    display:none;      /* default controls text in thumbnail block vt */
    padding:10px 0;
    margin:40px 20px 20px 20px;
    text-transform:uppercase;
    font-weight:normal;
    color:rgba(255,255,255,0.9);
    text-shadow:1px 1px 1px rgba(0,0,0,0.2);
    border-bottom:0px solid rgba(255,255,255,0.5) /* underline in thumbnail for text 1px defailt vt */
    }
.og-grid.effect-opacity li.animate
{
    -webkit-animation:fadeIn .65s ease forwards;
    -moz-animation:fadeIn .65s ease forwards;
    animation:fadeIn .65s ease forwards}@-webkit-keyframes fadeIn{to{opacity:1}}@-moz-keyframes fadeIn{to{opacity:1}}@keyframes fadeIn{to{opacity:1}
    }
.og-grid.effect-moveup li.animate
{
    -webkit-transform:translateY(200px);
    -moz-transform:translateY(200px);
    transform:translateY(200px);
    -webkit-animation:moveUp .65s ease forwards;
    -moz-animation:moveUp .65s ease forwards;
    animation:moveUp .65s ease forwards}@-webkit-keyframes moveUp{to{-webkit-transform:translateY(0);opacity:1}}@-moz-keyframes moveUp{to{-moz-transform:translateY(0);opacity:1}}@keyframes moveUp{to{transform:translateY(0);opacity:1}
    }
.og-grid.effect-scaleup li.animate
{
    -webkit-transform:scale(0.6);
    -moz-transform:scale(0.6);
    transform:scale(0.6);
    -webkit-animation:scaleUp .65s ease-in-out forwards;
    -moz-animation:scaleUp .65s ease-in-out forwards;
    animation:scaleUp .65s ease-in-out forwards}@-webkit-keyframes scaleUp{to{-webkit-transform:scale(1);opacity:1}}@-moz-keyframes scaleUp{to{-moz-transform:scale(1);opacity:1}}@keyframes scaleUp{to{transform:scale(1);opacity:1}
    }
.og-grid.effect-fallperspective
{
    -webkit-perspective:1300px;
    -moz-perspective:1300px;
    perspective:1300px
    }
.og-grid.effect-fallperspective li.animate
{
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -webkit-transform:translateZ(400px) translateY(300px) rotateX(-90deg);
    -moz-transform:translateZ(400px) translateY(300px) rotateX(-90deg);
    transform:translateZ(400px) translateY(300px) rotateX(-90deg);
    -webkit-animation:fallPerspective .8s ease-in-out forwards;
    -moz-animation:fallPerspective .8s ease-in-out forwards;
    animation:fallPerspective .8s ease-in-out forwards}@-webkit-keyframes fallPerspective{100%{-webkit-transform:translateZ(0) translateY(0) rotateX(0);opacity:1}}@-moz-keyframes fallPerspective{100%{-moz-transform:translateZ(0) translateY(0) rotateX(0);opacity:1}}@keyframes fallPerspective{100%{transform:translateZ(0) translateY(0) rotateX(0);opacity:1}
    }
.og-grid.effect-fly
{
    -webkit-perspective:1300px;
    -moz-perspective:1300px;
    perspective:1300px
    }
.og-grid.effect-fly li.animate
{
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -webkit-transform-origin:50% 50% -300px;
    -moz-transform-origin:50% 50% -300px;
    transform-origin:50% 50% -300px;
    -webkit-transform:rotateX(-180deg);
    -moz-transform:rotateX(-180deg);
    transform:rotateX(-180deg);
    -webkit-animation:fly .8s ease-in-out forwards;
    -moz-animation:fly .8s ease-in-out forwards;
    animation:fly .8s ease-in-out forwards}@-webkit-keyframes fly{100%{-webkit-transform:rotateX(0);opacity:1}}@-moz-keyframes fly{100%{-moz-transform:rotateX(0);opacity:1}}@keyframes fly{100%{transform:rotateX(0);opacity:1}
    }
.og-grid.effect-flip
{
    -webkit-perspective:1300px;
    -moz-perspective:1300px;
    perspective:1300px
    }
.og-grid.effect-flip li.animate
{
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    transform-origin:0 0;
    -webkit-transform:rotateX(-80deg);
    -moz-transform:rotateX(-80deg);
    transform:rotateX(-80deg);
    -webkit-animation:flip .8s ease-in-out forwards;
    -moz-animation:flip .8s ease-in-out forwards;
    animation:flip .8s ease-in-out forwards}@-webkit-keyframes flip{100%{-webkit-transform:rotateX(0);opacity:1}}@-moz-keyframes flip{100%{-moz-transform:rotateX(0);opacity:1}}@keyframes flip{100%{transform:rotateX(0);opacity:1}
    }
.og-grid.effect-helix
{
    -webkit-perspective:1300px;
    -moz-perspective:1300px;
    perspective:1300px
    }
.og-grid.effect-helix li.animate
{
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-animation:helix .8s ease-in-out forwards;
    -moz-animation:helix .8s ease-in-out forwards;
    animation:helix .8s ease-in-out forwards}@-webkit-keyframes helix{100%{-webkit-transform:rotateY(0);opacity:1}}@-moz-keyframes helix{100%{-moz-transform:rotateY(0);opacity:1}}@keyframes helix{100%{transform:rotateY(0);opacity:1}
    }
.og-grid.effect-popup
{
    -webkit-perspective:1300px;
    -moz-perspective:1300px;
    perspective:1300px
    }
.og-grid.effect-popup li.animate
{
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    transform-style:preserve-3d;
    -webkit-transform:scale(0.4);
    -moz-transform:scale(0.4);
    transform:scale(0.4);
    -webkit-animation:popUp .8s ease-in forwards;
    -moz-animation:popUp .8s ease-in forwards;
    animation:popUp .8s ease-in forwards}@-webkit-keyframes popUp{70%{-webkit-transform:scale(1.1);opacity:.8;-webkit-animation-timing-function:ease-out}100%{-webkit-transform:scale(1);opacity:1}}@-moz-keyframes popUp{70%{-moz-transform:scale(1.1);opacity:.8;-moz-animation-timing-function:ease-out}100%{-moz-transform:scale(1);opacity:1}}@keyframes popUp{70%{transform:scale(1.1);opacity:.8;animation-timing-function:ease-out}100%{transform:scale(1);opacity:1}
    }
nav#porfolio-nav{width:100%;position:relative}
nav#porfolio-nav ul{padding:0;margin:0 auto}
nav#porfolio-nav li{display:inline;float:left}
nav#porfolio-nav li a
{
    border-right:1px solid #576979;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box
    }
nav#porfolio-nav li:last-child a{border-right:0}@media screen and (max-width:600px)
{
    nav#porfolio-nav{height:auto}
    nav#porfolio-nav ul{width:100%;display:block;height:auto}
    nav#porfolio-nav li{width:50%;float:left;position:relative}
    nav#porfolio-nav li a{border-bottom:1px solid #576979;border-right:1px solid #576979}
    nav#porfolio-nav a{text-align:left;width:100%;text-indent:25px}
    }
@media only screen and (max-width :480px)
{
    nav#porfolio-nav{border-bottom:0}
    nav#porfolio-nav ul{height:auto}
    .og-expander h3{font-size:18px}
    .og-expander p{font-size:12px}
    .og-expander a{font-size:11px}
    .og-expander-inner{padding:10px}
    .og-grid .sep{display:none}
    .og-fullimg{height:30%;width:100%}
    .og-details{width:100%;margin-top:5px}
    .og-details h3{font-size:18px;margin-bottom:0}
    .og-details p{padding-bottom:10px}
    .og-details .infosep{margin:10px 0}
    .elastislide-wrapper{max-width:300px}
    }
@media only screen and (max-width :320px)
{
    nav#porfolio-nav li{display:block;float:none;width:100%}
    nav#porfolio-nav li a{border-bottom:1px solid #576979}
    .og-details h3{font-size:18px;margin-bottom:0}
    .og-details p{padding-bottom:10px}
    .og-details .infosep{margin:10px 0}
    }
@media(min-width:1200px)
{
    .og-expander h3{font-size:0px} /* adjust title in expander here default 35px vt */
    .og-expander p{font-size:0px}  /* adjust title in expander here default 13px vt */
    .og-expander a{font-size:0px}  /* adjust title in expander here default 12px vt */
    }
@media(min-width:768px) and (max-width:979px)
{
    .og-expander h3{font-size:32px}
    .og-expander p{font-size:12px}
    .og-expander a{font-size:11px}
    .og-grid .sep{margin:20px 10px;height:80%}
    }
@media(max-width:767px)
{
    .og-expander h3{font-size:20px}
    .og-expander p{font-size:12px}
    .og-expander a{font-size:11px}
    .og-grid .sep{display:none}
    .og-fullimg{height:40%;width:100%}
    .og-details{width:100%;margin-top:5px}
    .og-details p{padding-bottom:10px}
    .og-details .infosep{margin:12px 0}
    .elastislide-wrapper{max-width:300px;padding-bottom:5px}
    }