/* CSS HEX
    --cultured: #f3f3f3;
    --old-lace: #f5f1e3;
    --light-sky-blue: #83d3ff;
    --blue-green: #4291b4;
    --lapis-lazuli: #366489;
    --ruby: #d81159;
    --spanish-orange: #ec6a00;

     CSS HSL
    --cultured: hsla(0, 0%, 95%, 1);
    --old-lace: hsla(47, 47%, 93%, 1);
    --light-sky-blue: hsla(201, 100%, 76%, 1);
    --blue-green: hsla(198, 46%, 48%, 1);
    --lapis-lazuli: hsla(207, 43%, 37%, 1);
    --ruby: hsla(338, 85%, 46%, 1);
    --spanish-orange: hsla(27, 100%, 46%, 1);

    SCSS RGB
    $cultured: rgba(243, 243, 243, 1);
    $old-lace: rgba(245, 241, 227, 1);
    $light-sky-blue: rgba(131, 211, 255, 1);
    $blue-green: rgba(66, 145, 180, 1);
    $lapis-lazuli: rgba(54, 100, 137, 1);
    $ruby: rgba(216, 17, 89, 1);
    $spanish-orange: rgba(236, 106, 0, 1);

    */
    .patologie {
        z-index: 2;
        min-height: 100vh;
        background-color: rgba(54, 100, 137, 1);
        padding-top: 0;
    }
    .cont {
      position: relative;
      overflow: hidden;
      height: 82vh;
      padding: 1rem 2rem 0 2rem;
    }
    .cont__inner {
      position: relative;
      height: 100%;
    }
    .cont__inner:hover .el__bg:after {
      opacity: 1;
    }

    .el {
      position: absolute;
      left: 0;
      top: 0;
      width: 24.2%;
      height: 100%;
      background: #252525;
      transition: transform 0.6s 0.7s, width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s;
      will-change: transform, width, opacity;
    }
    .el:nth-child(1) {
        background: #f3f3f3;
    }
    .el:nth-child(2) {
        background: #82d3ff;
    }
    .el:nth-child(3) {
        background: #f5f2e3;
    }
    .el:nth-child(4) {
        background: #4290b4;
    }
    .el:not(.s--active) {
      cursor: pointer;
    }
    .el__overflow {
      overflow: hidden;
      position: relative;
      height: 100%;
    }
    .el__inner {
      overflow: hidden;
      position: relative;
      height: 100%;
      transition: transform 1s;
    }
    .cont.s--inactive .el__inner {
      transform: translate3d(0, 100%, 0);
    }
    .el__bg {
      position: relative;
      width: calc(100vw - 140px);
      height: 100%;
      transition: transform 0.6s 0.7s;
      will-change: transform;
    }
    .el__bg:before {
      content: "";
      position: absolute;
      left: -5%;
      top: 5%;
      width: 120%;
      height: 120%;
      background-size: cover;
      background-position: center center;
      transition: transform 1s;
      transform: translate3d(0, 0, 0) scale(1);
    }
    .cont.s--inactive .el__bg:before {
      transform: translate3d(0, -100%, 0) scale(1.2);
    }
    .el.s--active .el__bg:before {
      transition: transform 0.8s;
    }
    .el__bg:after {
      content: "";
      z-index: 1;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      /* background: rgba(0, 0, 0, 0.3); */
      opacity: 0;
      transition: opacity 0.5s;
    }
    .cont.s--el-active .el__bg:after {
      transition: opacity 0.5s 1.4s;
      opacity: 1 !important;
    }
    .el__preview-cont {
      z-index: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 0;
      top: -10px;
      width: 100%;
      height: 100%;
      transition: all 0.5s 0.2s;
    }
    .el:hover .el__preview-cont {
        top:-30px;
    }
    .cont.s--inactive .el__preview-cont {
      opacity: 0;
      transform: translateY(10px);
    }
    .cont.s--el-active .el__preview-cont {
      opacity: 0;
      transform: translateY(30px);
      transition: all 0.5s;
    }
    .el__heading {
        text-align: center;
      color: #f3f3f3;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 28px;
      text-shadow: 3px 3px 3px #366489;
    }
    .el__content {
      z-index: -1;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      padding: 30px;
      opacity: 0;
      pointer-events: none;
      transition: all 0.1s;
    }
    .el.s--active .el__content {
      z-index: 2;
      opacity: 1;
      pointer-events: auto;
      transition: all 0.5s 1.4s;
    }
    .el__text {
      text-transform: uppercase;
      font-size: 40px;
      color: #fff;
    }
    .el__close-btn {
      z-index: -1;
      position: absolute;
      right: 10px;
      top: 10px;
      width: 25px;
      height: 25px;
      opacity: 0;
      pointer-events: none;
      transition: all 0s 0.45s;
      cursor: pointer;
    }
    .el.s--active .el__close-btn {
      z-index: 5;
      opacity: 1;
      pointer-events: auto;
      transition: all 0s 1.4s;
    }
    .el__close-btn:before, .el__close-btn:after {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      height: 4px;
      margin-top: -4px;
      background: #366489;
      opacity: 0;
      transition: opacity 0s;
    }
    .el.s--active .el__close-btn:before, .el.s--active .el__close-btn:after {
      opacity: 1;
    }
    .el__close-btn:before {
      transform: rotate(45deg) translateX(100%);
    }
    .el.s--active .el__close-btn:before {
      transition: all 0.3s 1.4s cubic-bezier(0.72, 0.09, 0.32, 1.57);
      transform: rotate(45deg) translateX(0);
    }
    .el__close-btn:after {
      transform: rotate(-45deg) translateX(100%);
    }
    .el.s--active .el__close-btn:after {
      transition: all 0.3s 1.55s cubic-bezier(0.72, 0.09, 0.32, 1.57);
      transform: rotate(-45deg) translateX(0);
    }
    .el:nth-child(1) {
      transform: translate3d(0%, 0, 0);
      transform-origin: 50% 50%;
    }
    .cont.s--el-active .el:nth-child(1):not(.s--active) {
      transform: scale(0.5) translate3d(0%, 0, 0);
      opacity: 0;
      transition: transform 0.95s, opacity 0.95s;
    }
    .el:nth-child(1) .el__inner {
      transition-delay: 0s;
    }
    .el:nth-child(1) .el__bg {
      transform: translate3d(0%, 0, 0);
    }
    .el:nth-child(1) .el__bg:before {
      transition-delay: 0s;
      background-image: url(../../img/patologie/wave_patologie.png);
    }
    .el:nth-child(2) {
      transform: translate3d(105.2083333333%, 0, 0);
      transform-origin: 155.2083333333% 50%;
    }
    .cont.s--el-active .el:nth-child(2):not(.s--active) {
      transform: scale(0.5) translate3d(105.2083333333%, 0, 0);
      opacity: 0;
      transition: transform 0.95s, opacity 0.95s;
    }
    .el:nth-child(2) .el__inner {
      transition-delay: 0.1s;
    }
    .el:nth-child(2) .el__bg {
      transform: translate3d(-27%, 0, 0);
    }
    .el:nth-child(2) .el__bg:before {
      transition-delay: 0.1s;
      background-image: url(../../img/patologie/wave_patologie.png);
    }
    .el:nth-child(3) {
      transform: translate3d(210.4166666667%, 0, 0);
      transform-origin: 260.4166666667% 50%;
    }
    .cont.s--el-active .el:nth-child(3):not(.s--active) {
      transform: scale(0.5) translate3d(210.4166666667%, 0, 0);
      opacity: 0;
      transition: transform 0.95s, opacity 0.95s;
    }
    .el:nth-child(3) .el__inner {
      transition-delay: 0.2s;
    }
    .el:nth-child(3) .el__bg {
      transform: translate3d(-54%, 0, 0);
    }
    .el:nth-child(3) .el__bg:before {
      transition-delay: 0.2s;
      background-image: url(../../img/patologie/wave_patologie.png);
    }
    .el:nth-child(4) {
      transform: translate3d(315.625%, 0, 0);
      transform-origin: 365.625% 50%;
    }
    .cont.s--el-active .el:nth-child(4):not(.s--active) {
      transform: scale(0.5) translate3d(315.625%, 0, 0);
      opacity: 0;
      transition: transform 0.95s, opacity 0.95s;
    }
    .el:nth-child(4) .el__inner {
      transition-delay: 0.3s;
    }
    .el:nth-child(4) .el__bg {
      transform: translate3d(-81.4%, 0, 0);
    }
    .el:nth-child(4) .el__bg:before {
      transition-delay: 0.3s;
      background-image: url(../../img/patologie/wave_patologie.png);
    }
    .el:nth-child(5) {
      transform: translate3d(420.8333333333%, 0, 0);
      transform-origin: 470.8333333333% 50%;
    }
    .cont.s--el-active .el:nth-child(5):not(.s--active) {
      transform: scale(0.5) translate3d(420.8333333333%, 0, 0);
      opacity: 0;
      transition: transform 0.95s, opacity 0.95s;
    }
    .el:nth-child(5) .el__inner {
      transition-delay: 0.4s;
    }
    .el:nth-child(5) .el__bg {
      transform: translate3d(-76.8%, 0, 0);
    }
    .el:nth-child(5) .el__bg:before {
      transition-delay: 0.4s;
      background-image: url(../../img/patologie/wave_patologie.png);
    }
    .el:hover .el__bg:after {
      opacity: 0;
    }
    .el.s--active {
      z-index: 1;
      width: 100%;
      transform: translate3d(0, 0, 0);
      transition: transform 0.6s, width 0.7s 0.7s, z-index 0s;
    }
    .el.s--active .el__bg {
      transform: translate3d(0, 0, 0);
      transition: transform 0.6s;
    }
    .el.s--active .el__bg:before {
      transition-delay: 0.6s;
      transform: scale(1.1);
    }
    .el_logo {
        z-index: 2;
        position: absolute;
        bottom: 5%;
        left: 50%;
        transform: translateX(-50%);
        width: 15rem;
        height: 15rem;
        border-radius: 300%;
        background-color: rgba(245, 241, 227, 0.6);
        text-align: center;
        vertical-align: middle;
        transition: .5s .2s;
        box-shadow: 3px 3px 3px  rgba(54, 100, 137, 0.7);
    }
    .el_logo svg{
        margin-top: 10%;
        max-width: 35%;
        transition: .5s .2s;
    }
    .el_logo #Livello_caviglia {
        margin-top: 20%;
        max-width: 70%;
        transition: .5s .2s;
    }
    .el_logo #Livello_medicina {
        margin-top: 15%;
        max-width: 50%;
        transition: .5s .2s;
        margin-left: 35%;

    }
    .el_logo #Livello_medicina #zoom {
        opacity: 0;
        transition: .5s .2s;
    }



    /* AVAMPIEDE */
    .el .el_logo svg .st0-avampiede{fill:#D0E9EF;transition: .5s .2s;}
    .el .el_logo svg .st1-avampiede{fill:#366489;transition: .5s .2s;}
    .el .el_logo svg .st2-avampiede{fill-rule:evenodd;clip-rule:evenodd;fill:#366489;transition: .5s .2s;}
    .el .el_logo svg .st3-avampiede{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;transition: .5s .2s;}

    /* RETROPIEDE */
    .el .el_logo svg .st0-retropiede{fill:#D0E9EF;transition: .5s .2s;}
	.el .el_logo svg .st1-retropiede{fill:#366489;transition: .5s .2s;}
	.el .el_logo svg .st2-retropiede{fill-rule:evenodd;clip-rule:evenodd;fill:#366489;transition: .5s .2s;}
	.el .el_logo svg .st3-retropiede{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;transition: .5s .2s;}

    /* CAVIGLIA */
    .el .el_logo svg .st0-caviglia{fill:#D0E9EF;transition: .5s .2s;}
    .el .el_logo svg .st1-caviglia{fill:#366489;transition: .5s .2s;}
    .el .el_logo svg .st2-caviglia{fill:#FFFFFF;transition: .5s .2s;}
    .el .el_logo svg .st3-caviglia{fill:#376586;transition: .5s .2s;}
    .el .el_logo svg .st4-caviglia{fill:none;transition: .5s .2s;}

    /* MEDICINA */
    .el .el_logo svg .st0-medicina{fill:#CAE5EA;}
    .el .el_logo svg .st1-medicina{fill:#DD3131;}
    .el .el_logo svg .st2-medicina{fill:#7197FB;}
    .el .el_logo svg .st3-medicina{fill:#FCF7B6;}
    .el .el_logo svg .st4-medicina{opacity:0.7;fill:#DCDEE2;}
    .el .el_logo svg .st5-medicina{fill:#62DEDC;}
    .el .el_logo svg .st6-medicina{fill:#1ECACF;}
    .el .el_logo svg .st7-medicina{opacity:0.35;fill:#F9F0CD;}
    .el .el_logo svg .st8-medicina{fill:#A3A7C5;}
    .el .el_logo svg .st9-medicina{fill:none;stroke:#0E2929;stroke-width:5.6693;stroke-miterlimit:10;}
    .el .el_logo svg .st10-medicina{fill:none;stroke:#0E2929;stroke-width:1.4173;stroke-miterlimit:10;}
    .el .el_logo svg .st11-medicina{fill:url(#SVGID_1_);}
    .el .el_logo svg .st12-medicina{fill:url(#SVGID_00000018235787490901413610000004275027999363088047_);}
    .el .el_logo svg .st13-medicina{fill:url(#SVGID_00000160190257224927838370000006560716339711047053_);}
    .el .el_logo svg .st14-medicina{fill:url(#SVGID_00000081616139347536425800000011916544282579662247_);}
    .el .el_logo svg .st15-medicina{fill:url(#SVGID_00000123439854276940945300000017315085952813529017_);}
    .el .el_logo svg .st16-medicina{fill:url(#SVGID_00000151545610024892424380000001879974984828426630_);}
    .el .el_logo svg .st17-medicina{fill:url(#SVGID_00000083053346520269354080000014537558516026067086_);}
    .el .el_logo svg .st18-medicina{fill:url(#SVGID_00000092425510661015977130000000190909472576301184_);}
    .el .el_logo svg .st19-medicina{fill:url(#SVGID_00000065042192054878775150000001193832188156431772_);}
    .el .el_logo svg .st20-medicina{fill:url(#SVGID_00000073702108565116546950000008122393603391673219_);}
    .el .el_logo svg .st21-medicina{fill:url(#SVGID_00000110438502030354974660000015246964897220785573_);}
    .el .el_logo svg .st22-medicina{fill:url(#SVGID_00000088846410695683764640000002369357304107185327_);}
    .el .el_logo svg .st23-medicina{fill:url(#SVGID_00000174563704741306427970000008254126258118752671_);}
    .el .el_logo svg .st24-medicina{fill:url(#SVGID_00000079468143331302784870000014298900336072819608_);}
    .el .el_logo svg .st25-medicina{fill:url(#SVGID_00000159440591880086647610000000609978121676500653_);}
    .el .el_logo svg .st26-medicina{fill:url(#SVGID_00000085247831675001206230000010564242507557401490_);}
    .el .el_logo svg .st27-medicina{fill:url(#SVGID_00000073001630149541966710000002569109070837440388_);}
    .el .el_logo svg .st28-medicina{fill:url(#SVGID_00000026874830492857243970000001505384260417512370_);}
    .el .el_logo svg .st29-medicina{fill:url(#SVGID_00000038394889627833506350000014057562117458528152_);}
    .el .el_logo svg .st30-medicina{fill:url(#SVGID_00000152954829699745142100000003282791359053342082_);}
    .el .el_logo svg .st31-medicina{fill:url(#SVGID_00000052786877687128232770000001898940746014436782_);}
    .el .el_logo svg .st32-medicina{fill:url(#SVGID_00000065789715138605739680000002790872758325458346_);}
    .el .el_logo svg .st33-medicina{fill:url(#SVGID_00000093148150210834274960000010389196900423135885_);}
    .el .el_logo svg .st34-medicina{fill:url(#SVGID_00000139254418095124773170000005994302478414737588_);}


    .el .el_logo svg .st1-cover{
        fill:#9EC3FF;
        opacity: 1;
        transition: .5s .2s;
    }
    .el .el_logo svg .st0-med-sport,
    .el .el_logo svg .st1-med-sport{
        fill:#9EC3FF;
        transition: .5s .2s;
    }
    .el .el_logo svg .st2-med-sport,
    .el .el_logo svg .st3-med-sport,
    .el .el_logo svg .st4-med-sport,
    .el .el_logo svg .st5-med-sport,
    .el .el_logo svg .st6-med-sport {
        fill:#898989;
        transition: .5s .2s;
    }




    .el:hover .el_logo {
        transform: translateX(-50%)scale(0.7);
        overflow: visible;
    }
    .el:hover .el_logo svg {
        transform: scale(1.7);
    }
    .el:hover .el_logo svg #avampiede-group #white .st3-avampiede {
        fill:#5e8baac2;
    }
    .el:hover .el_logo svg #retropiede-group #bounce-retro .st3-retropiede {
        fill:#5e8baac2;
    }
    .el:hover .el_logo svg #caviglia-group .st2-caviglia {
        fill:#5e8baac2;
    }
    .el:hover .el_logo #Livello_medicina {
        margin-left: 0;
    }
    .el:hover .el_logo #Livello_medicina #zoom {
        opacity: 1;
    }

    .cont.s--el-active .el_logo {
        opacity: 0;
        display: none;
    }


    .el_logo_bg {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(135,135,135,0.0);
        transition: 0.5s;
    }
    .el:hover .el_logo_bg {
        background-color: rgba(135,135,135,0.3);
    }
    .cont.s--el-active .el_logo_bg {
        opacity: 1;
    }