#off-bar {padding-top:10px;}
#new-officers {height:26em;position:relative;margin:0 auto;max-width:1500px;width:92%;}
#new-officers:after, #new-officers:before {position:absolute;z-index:1;content:"";bottom:0;top:0;left:0;right:0;background-size:contain;background-repeat:no-repeat;opacity:0.3;}
#new-officers:after {background-position:left bottom;background-image:url(//im.cardiffstudents.com/officers/1516/flourish-left.png);left:50%;margin-left:-50vw;}
#new-officers:before {background-position:right bottom;background-image:url(//im.cardiffstudents.com/officers/1516/flourish-right.png);right:50%;margin-right:-50vw;}
#new-officers > img {display:none;}
#new-officers .sab-officer img {width:100%;opacity:0;vertical-align:bottom;}
#new-officers .sab-officer {position:absolute;top:0;height:100%;overflow:visible;}
#new-officers .sab-officer > div {text-align:center;width:22em;height:100%; background:url(//im.cardiffstudents.com/officers/1819/ph2.png) no-repeat top center;margin-left:-11em;overflow:hidden;}
#new-officers > a:hover .sab-officer > div {width:24em;margin-left:-12em;}
#new-officers.part-time {height:18em;}
#new-officers.part-time:after,#new-officers.part-time:before {display:none;}
#new-officers.part-time .sab-officer > div {width:14em;margin-left:-7em;}
#new-officers.part-time > a:hover .sab-officer > div {width:16em;margin-left:-8em;}

#new-officers #president .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/fadhila1.png);}
#new-officers #vp-welfare .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/Amr1.png);}
#new-officers #vp-sports .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/Georgie1.png);}
#new-officers #vp-education .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/jackie1.png);}
#new-officers #vp-heathpark .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/Jennifer1.png);}
#new-officers #vp-media .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/jake1.png);}
#new-officers #vp-societies .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/Henri1.png);}

#new-officers #president:hover    .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/fadhila2.png);margin-left:-14em;} 
#new-officers #vp-societies:hover .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/Henri2.png);margin-left:-15em;}
#new-officers #vp-sports:hover    .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/Georgie2.png);margin-left:-14.5em;}
#new-officers #vp-education:hover .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/jackie2.png);margin-left:-10.5em;width:25.5em;}
#new-officers #vp-heathpark:hover .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/Jennifer2.png);}
#new-officers #vp-media:hover     .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/jake2.png);margin-left:-14.5em;}
#new-officers #vp-welfare:hover   .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/Amr2.png);margin-left:-13em;}

/* Position */
#new-officers #vp-sports    .sab-officer {left:7%;    z-index:8;}
#new-officers #vp-societies .sab-officer {left:21.7%; z-index:6}
#new-officers #vp-media     .sab-officer {left:36%;   z-index:9;}
#new-officers #president    .sab-officer {left:50%;   z-index:8;}
#new-officers #vp-heathpark .sab-officer {left:64.5%; z-index:7;}
#new-officers #vp-welfare   .sab-officer {left:79%;   z-index:6;} 
#new-officers #vp-education .sab-officer {left:93%;   z-index:5;}


#new-officers .sab-officer.loading > div {background-image:url(//im.cardiffstudents.com/officers/1819/ph2.png)!important;}

#new-officers .tooltip {position:absolute;width:14.28%;bottom:20px;z-index:99;text-align:center;
transition: bottom 0.2s;
-moz-transition: bottom 0.2s;
-webkit-transition: bottom 0.2s;
-o-transition: bottom 0.2s;
}
#new-officers.part-time .tooltip {width:9%;}
#new-officers .tooltip > * {background:rgba(0,0,0,0.9);margin:0 auto;width:130px;}
#new-officers.part-time .tooltip * {width:130px;}
#new-officers .tooltip h5 {color:#fff;border-radius:5px 5px 0 0;padding:7px 5px 4px;font-size:13px;}
#new-officers .tooltip h4 {font-family: 'Flama Book';color:#fff;border-radius:0 0 5px 5px;font-weight:normal;padding:0 5px 9px;font-size:16px;}
#new-officers.part-time .tooltip h4 {font-size:14px;}

#new-officers #president .tooltip * {background:#EA0B73}
#new-officers #vp-sports .tooltip * {background:#E01C24}
#new-officers #vp-education .tooltip * {background:#902A8D;}
#new-officers #vp-welfare .tooltip * {background:#8CC43F}
#new-officers #vp-societies .tooltip * {background:#2EA3DC}
#new-officers #vp-heathpark .tooltip * {background:#F47721}
#new-officers #vp-media .tooltip * {background:#E9CB00;}

#new-officers a:hover .tooltip {bottom:30px;}

#new-officers #pt-bme .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/pt/erin1.png);width:17em;margin-left:-8.5em;}
#new-officers #pt-welsh .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/pt/jacob1.png);}
#new-officers #pt-mat .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/pt/orla1.png);}
#new-officers #pt-ee .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/pt/nia1.png);}
#new-officers #pt-dis .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/pt/dimitra1.png);}
#new-officers #pt-lgbt .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/pt/ph.png);}
#new-officers #pt-pg .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/pt/hannah1.png);}
#new-officers #pt-wom .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/pt/hanin1.png);}
#new-officers #pt-int .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/pt/julia1.png);}
#new-officers #pt-mso .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/pt/ph.png);}

#new-officers #pt-bme:hover .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/pt/erin2.png);width:18em;margin-left:-9em;}
#new-officers #pt-welsh:hover .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/pt/jacob2.png);}
#new-officers #pt-mat:hover .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/pt/orla2.png);}
#new-officers #pt-ee:hover .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/pt/nia2.png);width:18em;margin-left:-9em;}
#new-officers #pt-dis:hover .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/pt/dimitra2.png);}
#new-officers #pt-lgbt:hover .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/pt/ph.png);}
#new-officers #pt-pg:hover .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/pt/hannah2.png);width:20em;margin-left:-13em;}
#new-officers #pt-wom:hover .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/pt/hanin2.png);width:18em;margin-left:-9em;}
#new-officers #pt-int:hover .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/pt/julia2.png);}
#new-officers #pt-mso:hover .sab-officer > div {background-image:url(//im.cardiffstudents.com/officers/1819/pt/ph.png);width:20em;margin-left:-10em;}

#new-officers > a:hover .sab-officer {z-index:50!important};

#new-officers #vp-sports    .tooltip {left:17%;}
#new-officers #vp-societies .tooltip {left:14.1%;}
#new-officers #vp-media     .tooltip {left:28.4%;}
#new-officers #president    .tooltip {left:42.8%;}
#new-officers #vp-heathpark .tooltip {left:57.12%;}
#new-officers #vp-education .tooltip {left:85.68%;}
#new-officers #vp-welfare   .tooltip {left:71.4%;}

#new-officers #pt-bme .sab-officer {left:5%;z-index:11;}
#new-officers #pt-welsh .sab-officer {left:15%;z-index:10;}
#new-officers #pt-mat .sab-officer {left:25%;z-index:9;}
#new-officers #pt-ee .sab-officer {left:35%;z-index:8;}
#new-officers #pt-dis .sab-officer {left:45%;z-index:7;}
#new-officers #pt-lgbt .sab-officer {left:55%;z-index:6;}
#new-officers #pt-pg .sab-officer  {left:65%;z-index:5;}
#new-officers #pt-wom .sab-officer {left:75%;z-index:4;}
#new-officers #pt-int .sab-officer {left:85%;z-index:3;}
#new-officers #pt-mso .sab-officer {left:95%;z-index:2;}

#new-officers #pt-bme .tooltip {left:0%;}
#new-officers #pt-welsh .tooltip {left:10.1%;}
#new-officers #pt-mat .tooltip {left:20.2%;}
#new-officers #pt-ee .tooltip {left:30.3%;}
#new-officers #pt-dis .tooltip {left:40.4%;}
#new-officers #pt-lgbt .tooltip {left:50.5%;}
#new-officers #pt-pg .tooltip {left:60.6%;}
#new-officers #pt-wom .tooltip {left:70.7%;}
#new-officers #pt-int .tooltip {left:80.8%;}
#new-officers #pt-mso .tooltip {left:90.9%;}


@media screen and (min-width:1500px){

#freshers-grey #new-officers {font-size:85%;}
#freshers-grey #new-officers .sab-officer > div {background-size:28em;}
#freshers-grey #new-officers.part-time .sab-officer > div {background-size:25em;}
#freshers-grey #new-officers .tooltip h5 {font-size:11px;}
#freshers-grey #new-officers .tooltip > * {width:115px;}
#freshers-grey #new-officers .tooltip h4 {font-size:14px;}

}

@media screen and (max-width:1500px){

#new-officers {font-size:85%;max-width:1280px;height:26em}
#new-officers .sab-officer > div {background-size:26em;}
#new-officers.part-time  .sab-officer > div {background-size:18em;}
#new-officers .tooltip {bottom:15px;}
#new-officers .tooltip * {width:115px;}
#new-officers .tooltip h5 {padding-top:5px;padding-bottom:3px;font-size:11px;}
#new-officers .tooltip h4 {font-size:14px;}
#new-officers.part-time .tooltip * {width:100%;}

}

@media screen and (max-width:1300px){
#new-officers.part-time .tooltip h4 {font-size:11px;}
}

@media screen and (max-width:1200px){

#new-officers {font-size:70%;}
#new-officers .tooltip * {width:110px;}
#new-officers .tooltip h5 span {display:none;}
#new-officers .tooltip h4 {font-size:13px;}
}

@media screen and (max-width:1100px){

#new-officers .tooltip {bottom:12px;opacity:1;font-size:0.9em;}
#new-officers .tooltip * {width:90px;}
#new-officers .tooltip h4 {font-size:12px;}

}

@media screen and (max-width:980px){

#new-officers.part-time .tooltip * {width:60px;}
#new-officers.part-time .tooltip h4 {min-height:36px;}

#new-officers {font-size:55%;}
#new-officers.part-time {font-size:65%;}

#new-officers .tooltip * {width:70px;}
#new-officers .tooltip span {display:none;}
#new-officers:after, #new-officers:before {display:none;}
#new-officers a:hover .tooltip {bottom:12px;}

}

@media screen and (max-width:760px){

#new-officers {font-size:.9vw;}
#new-officers.part-time {font-size:1vw;}
#new-officers .tooltip {display:none;}

}

#meet_them {position:absolute;left:-200px;top:20px;}
#officers {overflow:auto;}
#officers .sab-officer {float:left;width:126px;margin-left:10px;text-align:center;margin-top:15px;margin-bottom:15px;}
#officers .sab-officer > div {box-shadow:inset 0px -3px 0px rgba(0,0,0,0.3); width:100%; background-size:cover;background-position:center;border:1px solid #ddd;border-bottom:2px solid #ccc;border-radius:4px;box-sizing: border-box;-moz-box-sizing: border-box;}
#officers a:first-child .sab-officer {margin-left:0;}
#officers .sab-officer img {width:100%;opacity:0;margin-bottom:-5px;}
#officers .sab-officer h4 {max-width:110px;margin:0 auto;color:#444;}
#officers .sab-officer h5 {margin:8px 0 5px 0;}
#yourteam > div {background: #444 url(//im.cardiffstudents.com/officers/yourteam.png) no-repeat center;background-size:cover;border:none;}