/* -------------------------------- 



Grid



-------------------------------- */

.grid {

    max-width: 80em; /* podia ser 100% */

    list-style: none;

    margin: 30px auto;

    padding: 0;

}



.grid li {

    display: block;

    float: left;

    padding: 7px;

    width: 25%;

    opacity: 0;

    position:relative;

    /*margin:10px;*/

}



.grid li a:before {

    position: absolute;

    content: "";

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    margin: 7px;

    background: rgba(0, 0, 0, 0.5);

    -webkit-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

    opacity: 0;

    visibility: hidden;

}



.grid li a:after {

    position: absolute;

    font-family: 'FontAwesome';

    display: block;

    font-size: 38px;

    text-align: center;

    line-height: 30px;

    color: #FFFFFF;

    top: 50%;

    left: 50%;

    height: 30px;

    width: 30px;

    margin: -15px 0 0 -15px;

    opacity: 0;

    visibility: hidden;

    -webkit-transition: all .2s ease-in-out;

    transition: all .2s ease-in-out;

    -ms-transform: scale(0.8);

    -webkit-transform: scale(0.8);

    transform: scale(0.8);

}



.grid li a:after {

    content: "\f002";

}



.grid li a:hover:before,

.grid li a:hover:after {

    opacity: 1;

    visibility: visible;

}



.grid li a:hover:after {

    -ms-transform: scale(1);

    -webkit-transform: scale(1);

    transform: scale(1);

}



.grid li.shown,

.no-js .grid li,

.no-cssanimations .grid li {

    opacity: 1;

}



.grid li a,

.grid li img {

    outline: none;

    border: none;

    display: block;

    max-width: 100%;

    margin: 0 auto;

}



.grid.effect-3 li.animate {

    -webkit-transform: scale(0.6);

    transform: scale(0.6);

    -webkit-animation: scaleUp 0.65s ease-in-out forwards;

    animation: scaleUp 0.65s ease-in-out forwards;

}



@-webkit-keyframes scaleUp {

    0% { }

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

}



@keyframes scaleUp {

    0% { }

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

}



@media screen and (max-width: 900px) {

    .grid li {

        width: 50%;

    }

}



@media screen and (max-width: 400px) {

    .grid li {

        width: 100%;

    }

}