/*!
 * Brickfolio - A jQuery plugin for equally spaced grid layouts
 * @version 0.0.5
 * @link https://github.com/fooplugins/brickfolio
 * @copyright Steven Usher & Brad Vincent 2014
 * @license Released under the GPL license.
 * You are free to use Brickfolio in personal projects as long as this copyright header is left intact.
 */
.brickfolio {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
/*    font-family: sans-serif;	*/
    font-size: 16px;
    margin: 0 auto;
    background: url(data:image/gif;base64,R0lGODlhEAALAPQAAP///wAAANra2tDQ0Orq6gYGBgAAAC4uLoKCgmBgYLq6uiIiIkpKSoqKimRkZL6+viYmJgQEBE5OTubm5tjY2PT09Dg4ONzc3PLy8ra2tqCgoMrKyu7u7gAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCwAAACwAAAAAEAALAAAFLSAgjmRpnqSgCuLKAq5AEIM4zDVw03ve27ifDgfkEYe04kDIDC5zrtYKRa2WQgAh+QQJCwAAACwAAAAAEAALAAAFJGBhGAVgnqhpHIeRvsDawqns0qeN5+y967tYLyicBYE7EYkYAgAh+QQJCwAAACwAAAAAEAALAAAFNiAgjothLOOIJAkiGgxjpGKiKMkbz7SN6zIawJcDwIK9W/HISxGBzdHTuBNOmcJVCyoUlk7CEAAh+QQJCwAAACwAAAAAEAALAAAFNSAgjqQIRRFUAo3jNGIkSdHqPI8Tz3V55zuaDacDyIQ+YrBH+hWPzJFzOQQaeavWi7oqnVIhACH5BAkLAAAALAAAAAAQAAsAAAUyICCOZGme1rJY5kRRk7hI0mJSVUXJtF3iOl7tltsBZsNfUegjAY3I5sgFY55KqdX1GgIAIfkECQsAAAAsAAAAABAACwAABTcgII5kaZ4kcV2EqLJipmnZhWGXaOOitm2aXQ4g7P2Ct2ER4AMul00kj5g0Al8tADY2y6C+4FIIACH5BAkLAAAALAAAAAAQAAsAAAUvICCOZGme5ERRk6iy7qpyHCVStA3gNa/7txxwlwv2isSacYUc+l4tADQGQ1mvpBAAIfkECQsAAAAsAAAAABAACwAABS8gII5kaZ7kRFGTqLLuqnIcJVK0DeA1r/u3HHCXC/aKxJpxhRz6Xi0ANAZDWa+kEAA7AAAAAAAAAAAA) center center no-repeat #fff;
    padding: 40px;
    height: 200px;
    overflow: hidden;
    width: 100%
}

.brickfolio.bf-loaded {
    background: #fff
}

.bf-item {
    display: none;
    background-color: #FFF;
    color: #333;
    -webkit-box-shadow: 0 3px 8px rgba(50,50,50,.5);
    -moz-box-shadow: 0 3px 8px rgba(50,50,50,.5);
    box-shadow: 0 3px 8px rgba(50,50,50,.5);
    width: 250px;
    max-width: 100%
}

.bf-item.bf-loaded {
    display: inline-block
}

.bf-item.blue {
    border: 4px solid #2074ff
}

.bf-item.red {
    border: 4px solid #ff2f25
}

.bf-item.green {
    border: 4px solid #62ff50
}

.bf-item>img {
    display: block;
    margin: 0;
    max-width: 100%;
    height: auto
}

.bf-item>h4 {
    margin: 0;
    padding: 20px;
/*    border-bottom: solid 3px #333	*/
}

.bf-item>p {
    font-size: 11px;
    padding: 0 10px
}

.brickfolio.bf-animated {
    -webkit-transition: height .5s ease;
    transition: height .5s ease
}

.brickfolio.bf-animated .bf-item {
    -webkit-transition: top .5s ease,left .5s ease,opacity .5s ease,height .5s ease;
    transition: top .5s ease,left .5s ease,opacity .5s ease,height .5s ease
}

.brickfolio.bf-animated.bf-loaded .bf-item {
    opacity: 1;
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

.brickfolio.bf-animated.mixed-delay.bf-loaded .bf-item:nth-child(2n) {
    -webkit-animation-delay: .1s;
    animation-delay: .1s
}

.brickfolio.bf-animated.mixed-delay.bf-loaded .bf-item:nth-child(3n) {
    -webkit-animation-delay: .2s;
    animation-delay: .2s
}

.brickfolio.bf-animated.mixed-delay.bf-loaded .bf-item:nth-child(5n) {
    -webkit-animation-delay: .3s;
    animation-delay: .3s
}

.brickfolio.bf-animated.fade-in .bf-item {
    opacity: 0
}

.brickfolio.bf-animated.fade-in.bf-loaded .bf-item {
    -webkit-animation: fade-in .65s ease forwards;
    animation: fade-in .65s ease forwards
}

@-webkit-keyframes fade-in {
    100% {
        opacity: 1
    }
}

@keyframes fade-in {
    100% {
        opacity: 1
    }
}

.brickfolio.bf-animated.slide-up .bf-item {
    opacity: 0
}

.brickfolio.bf-animated.slide-up.bf-loaded .bf-item {
    -webkit-transform: translateY(200px);
    transform: translateY(200px);
    -webkit-animation: slide-up .65s ease forwards;
    animation: slide-up .65s ease forwards
}

@-webkit-keyframes slide-up {
    100% {
        -webkit-transform: translateY(0);
        opacity: 1
    }
}

@keyframes slide-up {
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

.brickfolio.bf-animated.scale-up .bf-item {
    opacity: 0
}

.brickfolio.bf-animated.scale-up.bf-loaded .bf-item {
    -webkit-transform: scale(.6);
    transform: scale(.6);
    -webkit-animation: scale-up .65s ease-in-out forwards;
    animation: scale-up .65s ease-in-out forwards
}

@-webkit-keyframes scale-up {
    100% {
        -webkit-transform: scale(1);
        opacity: 1
    }
}

@keyframes scale-up {
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}

.brickfolio.bf-animated.swing-down {
    -webkit-perspective: 1300px;
    perspective: 1300px
}

.brickfolio.bf-animated.swing-down .bf-item {
    opacity: 0
}

.brickfolio.bf-animated.swing-down.bf-loaded .bf-item {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotateX(-80deg);
    transform: rotateX(-80deg);
    -webkit-animation: swing-down .8s ease-in-out forwards;
    animation: swing-down .8s ease-in-out forwards
}

@-webkit-keyframes swing-down {
    100% {
        -webkit-transform: rotateX(0);
        opacity: 1
    }
}

@keyframes swing-down {
    100% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        opacity: 1
    }
}

.brickfolio.bf-animated.drop {
    -webkit-perspective: 1300px;
    perspective: 1300px
}

.brickfolio.bf-animated.drop .bf-item {
    opacity: 0
}

.brickfolio.bf-animated.drop.bf-loaded .bf-item {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(400px) translateY(300px) rotateX(-90deg);
    transform: translateZ(400px) translateY(300px) rotateX(-90deg);
    -webkit-animation: drop .8s ease-in-out forwards;
    animation: drop .8s ease-in-out forwards
}

@-webkit-keyframes drop {
    100% {
        -webkit-transform: translateZ(0) translateY(0) rotateX(0);
        opacity: 1
    }
}

@keyframes drop {
    100% {
        -webkit-transform: translateZ(0) translateY(0) rotateX(0);
        transform: translateZ(0) translateY(0) rotateX(0);
        opacity: 1
    }
}

.brickfolio.bf-animated.fly {
    -webkit-perspective: 1300px;
    perspective: 1300px
}

.brickfolio.bf-animated.fly .bf-item {
    opacity: 0
}

.brickfolio.bf-animated.fly.bf-loaded .bf-item {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50% -300px;
    transform-origin: 50% 50% -300px;
    -webkit-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    -webkit-animation: fly .8s ease-in-out forwards;
    animation: fly .8s ease-in-out forwards
}

@-webkit-keyframes fly {
    100% {
        -webkit-transform: rotateX(0);
        opacity: 1
    }
}

@keyframes fly {
    100% {
        -webkit-transform: rotateX(0);
        transform: rotateX(0);
        opacity: 1
    }
}

.brickfolio.bf-animated.flip {
    -webkit-perspective: 1300px;
    perspective: 1300px
}

.brickfolio.bf-animated.flip .bf-item {
    opacity: 0
}

.brickfolio.bf-animated.flip.bf-loaded .bf-item {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    -webkit-animation: flip .8s ease-in-out forwards;
    animation: flip .8s ease-in-out forwards;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden
}

@-webkit-keyframes flip {
    100% {
        -webkit-transform: rotateY(0);
        opacity: 1
    }
}

@keyframes flip {
    100% {
        -webkit-transform: rotateY(0);
        transform: rotateY(0);
        opacity: 1
    }
}

.brickfolio.bf-animated.pop-up {
    -webkit-perspective: 1300px;
    perspective: 1300px
}

.brickfolio.bf-animated.pop-up .bf-item {
    opacity: 0
}

.brickfolio.bf-animated.pop-up.bf-loaded .bf-item {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: scale(.4);
    transform: scale(.4);
    -webkit-animation: pop-up .8s ease-in forwards;
    animation: pop-up .8s ease-in forwards
}

@-webkit-keyframes pop-up {
    70% {
        -webkit-transform: scale(1.1);
        opacity: .8;
        -webkit-animation-timing-function: ease-out
    }

    100% {
        -webkit-transform: scale(1);
        opacity: 1
    }
}

@keyframes pop-up {
    70% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        opacity: .8;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }
}