.toggle-switch-container{display:inline-block;vertical-align:bottom;margin-bottom:5px;}
.switch-container{position:relative;width:250px;height:36px;border:1px solid #CCC;border-radius:5px;display:flex;font-weight:900;font-size:14px;overflow:hidden;}
.switch-option{flex:1;text-align:center;line-height:36px;text-decoration:none;z-index:2;transition:color 0.3s;background:transparent;}
#institutional{color:#1385ca;}
#sportive{color:#4d4d4d;}
.slider{position:absolute;top:0;left:0;width:50%;height:100%;border-radius:5px;transition:left 0.3s, background-color 0.3s;z-index:1;}
.switch-container.active-institutional .slider{left:0;background-color:#1385ca;}
.switch-container.active-institutional #institutional{color:#fff;}
.switch-container.active-institutional #sportive{color:#4d4d4d;}
.switch-container.active-sportive .slider{left:50%;background-color:#4d4d4d;}
.switch-container.active-sportive #sportive{color:#fff;}
.switch-container.active-sportive #institutional{color:#1385ca;}
.switch-container:not(.active-institutional) #institutional:hover ~ .slider{left:0;background-color:#1385ca;}
.switch-container:not(.active-institutional) #institutional:hover{color:#fff;}
.switch-container:not(.active-sportive) #sportive:hover ~ .slider{left:50%;background-color:#4d4d4d;}
.switch-container:not(.active-sportive) #sportive:hover{color:#fff;}
.switch-container.active-institutional:hover #institutional:not(:hover){color:#1385ca;}
.switch-container.active-institutional:hover #sportive:not(:hover){color:#4d4d4d;}
.switch-container.active-sportive:hover #sportive:not(:hover){color:#4d4d4d;}
.switch-container.active-sportive:hover #institutional:not(:hover) {
color: #1385ca;
}