#content>.allblocs{
    float: left;
    width: 100%;
    --h_vignette:24vmax;
}

#content>.allblocs>.monbloc{
    float: left;
    height: var(--h_vignette);
    width: var(--h_vignette);
    margin-right: calc((100% - 3*var(--h_vignette))/2);
    margin-bottom: 0px;
}
#content>.allblocs>.monbloc:last-child{margin-right: 0px;margin-bottom: 0px;}

#content>.allblocs>.monbloc>a{
    float: left;
    width: 100%;
    height: 100%;
    text-decoration: none;
    position: relative;
    border: 1px solid #999;

	border-radius: 0px 0px 20px 0px;
	-moz-border-radius: 0px 0px 20px 0px;
	-webkit-border-radius: 0px 0px 20px 0px;

    transition-property: border-color;
    transition-duration: 0.8s;
    transition-timing-function:ease-in-out;
    transition-delay: 0s;
}
#content>.allblocs>.monbloc>a>div:first-child{
    position: absolute;
    top:0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .5;
    z-index: 0;

	border-radius: 0px 0px 20px 0px;
	-moz-border-radius: 0px 0px 20px 0px;
	-webkit-border-radius: 0px 0px 20px 0px;
}
#content>.allblocs>.monbloc>a>div:last-child{
    position: absolute;
    top:0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    box-sizing: border-box;
    padding: 4vmax;
}
#content>.allblocs>.monbloc>a>i{
    position: absolute;
    top:-3vmax;
    left: 3vmax;
    width: 6vmax;
    height: 6vmax;
    line-height: 6vmax;
    font-size: 3vmax;
    color: white;
    background-color: #444;
    text-align: center;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
    box-sizing: border-box;
    border: 1px solid #999;
    z-index: 2;

    transition-property: background-color;
    transition-duration: 0.8s;
    transition-timing-function:ease-in-out;
    transition-delay: 0s;
}
#content>.allblocs>.monbloc>a>div:last-child>h2{
    float: left;
    width: 100%;
    font-size: 2.0vmax;
    line-height: 2.6vmax;
    font-family: 'robotothin';
    color: white;
}

#content>.allblocs>.monbloc>a:hover>i{background-color: tomato;}
#content>.allblocs>.monbloc>a:hover{border-color: tomato;}


@media (min-width: 950px) AND (max-width: 1100px) {

    #content>.allblocs{
        --h_vignette:20vmax;
    }
    #content>.allblocs>.monbloc>a>div:last-child>h2{
        font-size: 1.6vmax;
        line-height: 2vmax;
    }
}
@media (max-width: 950px) {
    
    #content>.allblocs>.monbloc{
        width: 100%;
        height: 15vmax;
        margin-right: 0px;
        margin-bottom: 50px;
    }
    #content>.allblocs>.monbloc>a>i{
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }
}