*,*: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:center;
    width:100%
}
.og-grid li{
    display:inline-block;
    margin:10px 5px 14px 14px;
    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:100%;
    margin-top:0;
    text-align:left;
    height:0;
    overflow:hidden
}
.og-expander-inner{
    padding:30px 30px;
    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:50%;
    float:left;
    height: 100%;
    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:block;
    padding:10px 0;
    margin:34% 20%;
    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:1px solid rgba(255,255,255,0.5)
}
.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:35px
    }
    .og-expander p{
        font-size:13px
    }
    .og-expander a{
        font-size:12px
    }
}
@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
    }
}