html { position: relative; min-height: 100%; } body { margin-bottom: 0px; padding-top:10px; padding-bottom: 0px; color: #fff; background-color:#1A7AC5; /*background: rgba(24,188,156,.9);*/ } #conjure { background-image: url("../img/conjure_logo.png"); width:200px; height:50px; background-size: 200px 25px; background-repeat: no-repeat; } #projet { background-color:#1A7AC5; } .nouvelle { width:100%; height:100%; margin-left: auto; margin-right: auto; padding:0; } .light-font { color:fff; } footer { margin: 50px 0; } /* Custom page CSS -------------------------------------------------- */ /* Not required for template or sticky footer method. */ .avatar { width: 250px; height: 250px; max-width: 250px; max-height: 250px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 5px solid rgba(255,255,255,0.5); } #membre .list-item .list-link { display: block; position: relative; margin: 0 auto; max-width: 250px; } #membre .list-item .list-link .caption { position: absolute; width: 100%; height: 100%; opacity: 0; background: rgba(24,188,156,.9); -webkit-transition: all ease .5s; -moz-transition: all ease .5s; transition: all ease .5s; } #membre .list-item .list-link .caption .caption-content { position: absolute; top: 50%; width: 100%; height: 20px; margin-top: -12px; text-align: center; font-size: 10px; color: #fff; } #membre .list-item .list-link .caption .caption-content h3 { font-size: 15px; color: #fff; } #membre .list-item .list-link .caption{ -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } #membre .list-item .list-link .caption:hover { opacity: 1; } #projet * { z-index: 2; } @media(min-width:767px) { #projet .list-item { margin: 0 0 30px; } } }