codici e tabelle

.tabella2 {width: 100%; border: 2px solid #BEC5AD; overflow: hidden; padding: 2px; margin-top: 5px; opacity: 0.4; font: 10px montserrat; text-transform: uppercase; color: #BEC5AD; box-sizing: border-box}
.imgrole {width: 588px; height: 272px; background-size: cover; float: right; margin-right: 2px}
.imgrole2 {width: 130px; height: 130px; position: absolute; margin-top: 127px; outline: 7px solid #D9A774; margin-left: 10px; border: 4px solid #8C9A7B; z-index: 2; background-size: cover}
.nomestats {font: 11px montserrat; background: #8C9A7B; width: 736px; margin-top: 3px; letter-spacing: 4px; color: #FFF; padding: 5px; text-transform: uppercase; text-align: right}
.rolestats {width: 0; height: 150px; overflow: hidden; padding-top: 7px; position: absolute; margin-top: 10px; margin-left: 103px; opacity: 1; z-index: 1}
.bordo:hover .imgrole2 {transform: rotate(0deg); transition: 1s; width: 120px; height: 120px; margin-left: 16px; border-radius: 100%; margin-top: 133px; outline: 0 solid transparent; border: 4px solid #D9A774}
.bordo:hover .rolestats {width: 142px; margin-left: 8px; transition: 1s; overflow: hidden; position: absolute; margin-top: 10px}
.bordo:hover .rolequote {color: transparent; background: rgb(255, 255, 255, 0.7); transition: 1s; height: 235px}
.rolequote {background: rgb(255, 255, 255); margin-top: 12px; padding: 4px; padding-top: 15px; border-radius: 10; float: left; margin-left: 9px; width: 132px; font: 10px/14px montserrat; letter-spacing: 2px; text-align: center; z-index: 4; opacity: 1; height: 76px; outline: 3px dotted #FFF; outline-offset: 3px; text-transform: uppercase}
.rolestat {background: #FFF; margin-top: 3px; opacity: 0; padding: 2px; text-align: center; font: 10px montserrat; width: 120px!important; text-transform: uppercase; letter-spacing: 1px}
.rolestat a {color: #8C9A7B}
.role .bordo:hover .rolestat {opacity: 1; transition: 1s; width: 105px}
.role .riquadro {width: 730px!important; float: left; color: #8C9A7B; font: 14px arial; height: 100%; box-shadow: 0 0 0; text-align: justify; margin-top: 5px}

.imgrole4 {width: 120px; height: 120px; float: right; border-radius: 100%; border: 3px solid #8C9A7B; margin-top: -72px; margin-right: 10px; position: sticky}
.imgrole3 {width: 200px; height: 364px; float: left; background-size: cover; margin-right: 10px; margin-top: -69px; box-shadow: 4px 4px 0 0 #8C9A7B; z-index: 1; margin-left: -8px}

.rolequote2 {background: #FFF; font: 10px/15px montserrat; height: 44px; letter-spacing: 1px; margin-left: 217px; padding-right: 140px; margin-right: 3px; text-align: center; display: table; text-transform: uppercase; margin-top: 12px; overflow: hidden; outline: 3px dotted #FFF; outline-offset: 3px; z-index: 0}
.tablecit {display: table-cell; vertical-align: middle}
.bordo:hover .tablecit {filter: blur(10px); transition: 2s; color: #D9A774}
.bordo:hover .rolestats2 {opacity: 1; transition: 2s}
.bordo:hover .imgrole4 {transition: 1s; transform: rotate(-45deg); border-radius: 0; height: 80px; width: 80px; margin-top: -57px; margin-right: 28px; margin-bottom: 15px; margin-left: 15px}
.riquadro2 {width: 730px; border: 4px double #666; padding: 4px; margin-left: 2px; margin-bottom: 3px; color: #8C9A7B; font: 14px arial; text-align: justify; margin-top: 11px}
.rolestats2 {width: 450px; height: 60px; background: transparent; position: absolute; margin-top: -41px; margin-left: 220px; opacity: 0}
.rolestat2 {background: #D9A774; color: #000; margin: 2px; width: 126px; float: left; text-align: center; height: 15px; font: 11px/15px arial; letter-spacing: 1px; color: #1C333B}
.rolestat2 a {color: #FFF; font: 11px/15px arial; letter-spacing: 1px}
.role2 .nomestats {text-align: left}