/* 
    Created on : February 2016
    Author     : RICHE Vincent
*/

@import url("commons.css");

#page #content .item {
    display: inline-block;
    margin: 6% 2% 4% 2%;
    width: auto;
    height: auto;
}

#page #content .item div {
    display: block;
    width: 12.5vw;
    height: 12.5vw;
    border: 2px solid var(--main2-color);
    border-radius: 50%;
    transition: all .2s ease-in-out;
    overflow: hidden;
}

#page #content .item div a {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    text-decoration: none;
}

#page #content .item p {
    display: inline-block;
    margin: 2% 0 0 0;
    width: 100%;
    color: var(--main-hypertext-color);
    text-transform: uppercase;
    text-align: center;
    font-size: 1.1vw;
    font-family: "Stylized Text";
}

#page #content .item div a img {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    object-fit: cover;
    transition: transform .5s ease;
}

#page #content .item div:hover {
    transform: translateY(-2px);
    transition: translate3d(0px, -15px, 0px);
    box-shadow: 0 7px 17px -2px var(--main-text-color);
}

#page #content .item p:hover {
    color: var(--main1-color);
}

#page #content .item div a img:hover {
    -ms-transform: scale(1.25);
    -webkit-transform: scale(1.25);
    transform: scale(1.25);
}