/*!
 * 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;
    padding-top: 40px;
    height: 200px;
    overflow: hidden;
    width: 100%;
}

.brickfolio.bf-loaded {
    background-color: transparent;
}

.bf-item {
    display: none;
    width: 30%;
    max-width: 100%;
    padding: 0 !important;
}

@media screen and (max-width:767px) {
    .bf-item {
        display: none;
        width: 90%;
        max-width: 100%;
        padding: 0 !important;
    }
}

.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: 10px;
    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
    }
}