/*  7.37. VEHICLE GALLERY FULL

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

.media-gallery .col-md-3{

    padding: 0;

    list-style: none;

}



.gallery-item-container{

    position: relative;

    overflow: hidden;

}



.gallery-item-container .gallery-item{

    width: 100%;

    height: 100%;

    overflow: hidden;

    cursor: pointer;

    z-index: 1;
    padding: 10px;

}



.gallery-item-container .gallery-item img{

    width: 100%;

    height: auto;

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

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

    -moz-transition: all 2s ease-in-out 0s;

    -o-transition: all 2s ease-in-out 0s;



    transform: scale(1);

    -webkit-transform: scale(1);

    -moz-transform: scale(1);

    -ms-transform: scale(1);

}



.gallery-item-container .hover-mask-container{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    background-color: rgba(49, 57, 63, 0.5);



    transition: all 0.2s ease 0s;

    -webkit-transition: all 0.2s ease 0s;

    -moz-transition: all 0.2s ease 0s;

    -o-transition: all 0.2s ease 0s;

}



.gallery-item-container .gallery-item:hover .hover-mask-container{

    opacity: 1;

}



.gallery-item-container figcaption{

    position: absolute;

    width: 100%;

    top: 40px;

}



.gallery-item-container figcaption h1,

.gallery-item-container figcaption h2,

.gallery-item-container figcaption h3,

.gallery-item-container figcaption h4,

.gallery-item-container figcaption h5{

    text-align: center;

    text-transform: uppercase;

    color: #fff;

    position: relative;

    padding-bottom: 15px;

    margin-bottom: 0;

}



.gallery-item-container figcaption h1:after,

.gallery-item-container figcaption h2:after,

.gallery-item-container figcaption h3:after,

.gallery-item-container figcaption h4:after,

.gallery-item-container figcaption h5:after{

    position: absolute;

    content: "";

    display: block;

    width: 40px;

    height: 3px;  

    left: 50%;

    bottom: 0;

    margin-left: -20px;

}



.hover-mask-container .hover-zoom, 

.hover-mask-container .hover-link{

    position: absolute;

    bottom: 50%;

    left: 50%;



    width: 50px;

    height: 50px;



    margin-bottom: -25px;

    margin-left: -25px;



    transform: translate(0, 50%);

    -webkit-transform: translate(0, 50%);

    -moz-transform: translate(0, 50%);

    -ms-transform: translate(0, 50%);



    transition: all 0.2s ease 0s;

    -webkit-transition: all 0.2s ease 0s;

    -moz-transition: all 0.2s ease 0s;

    -o-transition: all 0.2s ease 0s;



    border: 2px solid;

    border-radius: 50%;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

}



.hover-mask-container .hover-link {

    margin-left: -60px;

}



.with-link.hover-mask-container .hover-zoom {

    margin-left: 0;

}



.hover-mask-container .hover-zoom a, 

.hover-mask-container .hover-link a{

    display: table-cell;

    vertical-align: middle;

    text-align: center;

    color: #fff;

    font-size: 18px;



    width: 50px;

    height: 50px;

}



.gallery-item-container .gallery-item:hover .hover-zoom, 

.gallery-item-container .gallery-item:hover .hover-link{

    transform: translate(0,0);

    -webkit-transform: translate(0, 0);

    -moz-transform: translate(0, 0);

    -ms-transform: translate(0, 0);

}



.gallery-item-container .gallery-item:hover img{

    transform: scale(1.3);

    -webkit-transform: scale(1.3);

    -moz-transform: scale(1.3);

    -ms-transform: scale(1.3);

}



/*  VEHICLE GALLERY GRID

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

.media-gallery .col-md-4{

    padding: 0;

    list-style: none;

}



.col-md-4 .gallery-item-container figcaption{

    top: 20px;

}

@media only screen and (min-width: 320px) and (max-width: 479px){

    .media-gallery li{

        margin-bottom: 0 !important;

    }

}

@media only screen and (min-width: 480px) and (max-width: 767px){

    .media-gallery li{

        margin-bottom: 0 !important;

    }

}

@media only screen and (min-width: 768px) and (max-width: 991px){

    .media-gallery li{

        margin-bottom: 0 !important;

        /* width: 50%; */

        float: left;

    }

}

@media only screen and (min-width: 992px) and (max-width: 1999px){

    .media-gallery li{

        /* width: 50%; */

    }

}