.img-logo { background-image: url(../img/banner_02.gif); }
.wrapper-pyramid { margin: 5vh auto 0; } .pyramid { float: left; shape-outside:polygon(310px 0px, 130px 405px, 558px 405px); padding-right:60px; width: 500px; height:400px; }
.zone { cursor: pointer; padding:40px 0; margin: 0 auto; text-align:center; color: black; background-blend-mode:darken; transition: 0.5s; }
.zone:nth-child(1){ background:rgba(69, 114, 196, 0.4); width: 25%; clip-path:url("#part1"); clip-path:polygon(50% 0%,100% 100%, 0% 100%); -webkit-clip-path:polygon(50% 0%,100% 100%, 0% 100%); }
.zone:nth-child(2){ background: rgba(69, 114, 196, 0.6); width: 50%; clip-path:url("#part2"); clip-path:polygon(25% 0%,75% 0, 100% 100%,0% 100%); -webkit-clip-path:polygon(25% 0%,75% 0, 100% 100%,0% 100%); }
.zone:nth-child(3){ width: 75%; background:rgba(69, 114, 196, 0.8); clip-path:url("#part3"); clip-path:polygon(16.5% 0, 83% 0, 100% 100%,0% 100%); -webkit-clip-path:polygon(16.5% 0, 83% 0, 100% 100%,0% 100%); }
.zone:nth-child(4){ background:rgba(69, 114, 196, 1); width: 100%; clip-path:url("#part4"); clip-path:polygon(12.5% 0, 0%,87.5% 0, 100% 100%,0% 100%); -webkit-clip-path:polygon(12.5% 0,87.5% 0, 100% 100%,0% 100%); }
.zone:hover { background-color: rgba(0,0,0,0.1); color: #000; }
.img-status { display: block; height: 24px; margin: 0 auto; width: auto; }