@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
    /*  font-family: 'Special Elite', cursive;  */

    .main_menu .titleSvg {
        position: absolute;
        top:10%;
        left: 50%;
        transform: translateX(-50%);
        transition: 0.5s;
        width: 500px;

    }
    .titleSvg .LivpqMTv_0{stroke-dasharray:1661 1663;stroke-dashoffset:1662;animation:LivpqMTv_draw 2900ms ease-in-out 0ms forwards;}
    .titleSvg .LivpqMTv_1{stroke-dasharray:51 53;stroke-dashoffset:52;animation:LivpqMTv_draw 2900ms ease-in-out 7ms forwards;}
    .titleSvg .LivpqMTv_2{stroke-dasharray:1116 1118;stroke-dashoffset:1117;animation:LivpqMTv_draw 2900ms ease-in-out 15ms forwards;}
    .titleSvg .LivpqMTv_3{stroke-dasharray:613 615;stroke-dashoffset:614;animation:LivpqMTv_draw 2900ms ease-in-out 23ms forwards;}
    .titleSvg .LivpqMTv_4{stroke-dasharray:316 318;stroke-dashoffset:317;animation:LivpqMTv_draw 2900ms ease-in-out 30ms forwards;}
    .titleSvg .LivpqMTv_5{stroke-dasharray:433 435;stroke-dashoffset:434;animation:LivpqMTv_draw 2900ms ease-in-out 38ms forwards;}
    .titleSvg .LivpqMTv_6{stroke-dasharray:513 515;stroke-dashoffset:514;animation:LivpqMTv_draw 2900ms ease-in-out 46ms forwards;}
    .titleSvg .LivpqMTv_7{stroke-dasharray:727 729;stroke-dashoffset:728;animation:LivpqMTv_draw 2900ms ease-in-out 53ms forwards;}
    .titleSvg .LivpqMTv_8{stroke-dasharray:289 291;stroke-dashoffset:290;animation:LivpqMTv_draw 2900ms ease-in-out 61ms forwards;}
    .titleSvg .LivpqMTv_9{stroke-dasharray:275 277;stroke-dashoffset:276;animation:LivpqMTv_draw 2900ms ease-in-out 69ms forwards;}
    .titleSvg .LivpqMTv_10{stroke-dasharray:304 306;stroke-dashoffset:305;animation:LivpqMTv_draw 2900ms ease-in-out 76ms forwards;}
    .titleSvg .LivpqMTv_11{stroke-dasharray:305 307;stroke-dashoffset:306;animation:LivpqMTv_draw 2900ms ease-in-out 84ms forwards;}
    .titleSvg .LivpqMTv_12{stroke-dasharray:316 318;stroke-dashoffset:317;animation:LivpqMTv_draw 2900ms ease-in-out 92ms forwards;}
    .titleSvg .LivpqMTv_13{stroke-dasharray:727 729;stroke-dashoffset:728;animation:LivpqMTv_draw 2900ms ease-in-out 100ms forwards;}

    @keyframes LivpqMTv_draw{100%{stroke-dashoffset:0;}}
    @keyframes LivpqMTv_fade{0%{stroke-opacity:1;}94.44444444444444%{stroke-opacity:1;}100%{stroke-opacity:0;}}


    .main_menu .boxContent {
        /* margin-left: 3rem; */
        position: absolute;
        top: 18%;
        left: 50%;
        padding: 2rem;
        transform: translate(-50%, -50%);
        background: rgba( 31, 31, 31, 0.55 );
        box-shadow: 5px 6px 6px rgba(103, 199, 234, 0.37 );
        backdrop-filter: blur( 4.5px );
        -webkit-backdrop-filter: blur( 5.0px );
        border-radius: 15px;
        border: 1px solid rgba(103, 199, 234, 0.18 );

    }

    .main_menu h1 {

      color: #edf3ffff;
      margin: 0;
      /* top: 27%;
      left: 6%;
      transform: translateY(-50%); */
      text-align: center;
      font-size: 4rem;
      text-transform: Uppercase;
      font-family: 'Rubik', sans-serif !important;
      /* position: absolute; */
      background: linear-gradient(to right, #464692, #2364da, #1b0c9e);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .main_menu h1 span {
      font-size: 20px;
      display: block;
    }
    .main_menu h1::before, .main_menu h1::after  {
        content: attr(data-text);
        position: absolute;
        margin-bottom: .5em;
        top: 0;
        left: 0;
        }

     .main_menu h1::before  {
        z-index: -1;
        text-shadow: -0.001em -0.001em 1px rgba(255,255,255,.15)
    }

     .main_menu h1::after {
        z-index: -2;
        text-shadow: 10px 10px 10px rgba(0,0,0,.5), 20px 20px 20px rgba(0,0,0,.4), 30px 30px 30px rgba(0,0,0,.1);
        mix-blend-mode: multiply;
    }
    p, h1, h2, h4, img{
        position: relative;
    }
    .main_menu .personalImg {
        margin-left: auto;
        margin-right: auto;
        position: absolute;
        top: 33%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-height: 20rem;

    }
    .main_menu .personalImg .icon-cards {
      position: relative;
      width: 60vw;
      height: 40vw;
      max-width: 380px;
      max-height: 250px;
      margin: 0;
      color: white;
      perspective: 1000px;
      transform-origin: center;
    }
    .main_menu .personalImg .icon-cards__content {
      position: absolute;
      width: 100%;
      height: 100%;
      transform-origin: center;
      transform-style: preserve-3d;
      transform: translateZ(-30vw) rotateY(0);
      -webkit-animation: carousel 10s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards;
              animation: carousel 10s infinite cubic-bezier(0.77, 0, 0.175, 1) forwards;
    }
    .main_menu .personalImg .icon-cards__content.step-animation {
      -webkit-animation: carousel 8s infinite steps(1) forwards;
              animation: carousel 8s infinite steps(1) forwards;
    }
    .main_menu .personalImg .icon-cards__item {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 60vw;
      height: 40vw;
      max-width: 380px;
      max-height: 250px;
      box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
      border-radius: 6px;
      transform-origin: center;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .main_menu .personalImg .icon-cards__item:nth-child(1) {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      transform: rotateY(0) translateZ(35vw);
    }
    .main_menu .personalImg .icon-cards__item:nth-child(2) {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      transform: rotateY(120deg) translateZ(35vw);
    }
    .main_menu .personalImg .icon-cards__item:nth-child(3) {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      transform: rotateY(240deg) translateZ(35vw);
    }

    @-webkit-keyframes carousel {
      0%, 17.5% {
        transform: translateZ(-35vw) rotateY(0);
      }
      27.5%, 45% {
        transform: translateZ(-35vw) rotateY(-120deg);
      }
      55%, 72.5% {
        transform: translateZ(-35vw) rotateY(-240deg);
      }
      82.5%, 100% {
        transform: translateZ(-35vw) rotateY(-360deg);
      }
    }

    @keyframes carousel {
      0%, 17.5% {
        transform: translateZ(-35vw) rotateY(0);
      }
      27.5%, 45% {
        transform: translateZ(-35vw) rotateY(-120deg);
      }
      55%, 72.5% {
        transform: translateZ(-35vw) rotateY(-240deg);
      }
      82.5%, 100% {
        transform: translateZ(-35vw) rotateY(-360deg);
      }
    }
    /* html,
    body {
      height: 100%;
    }

    body {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background: #110F15;
    } */

    .main_menu .personalImg .checkbox {
        display: none;
      position: relative;
      margin-top: 2rem;
      font-size: 0.9rem;
      font-weight: bold;
      text-transform: uppercase;
      color: #F47956;
      transition: color 0.3s ease;
      -webkit-user-select: none;
         -moz-user-select: none;
          -ms-user-select: none;
              user-select: none;
    }
    .main_menu .personalImg .checkbox:hover {
      color: #F7A95A;
    }
    .main_menu .personalImg .checkbox__checkbox {
      position: relative;
      top: 0;
      width: 1.0625rem;
      height: 1.0625rem;
      background: white;
      border: 1px solid currentColor;
      border-radius: 4px;
      vertical-align: middle;
      transition: background 0.1s ease;
      cursor: pointer;
    }
    .main_menu .personalImg .checkbox__checkbox::after {
      content: "";
      position: absolute;
      top: 1px;
      left: 5px;
      width: 5px;
      height: 11px;
      opacity: 0;
      transform: rotate(45deg) scale(0);
      border-right: 2px solid #fff;
      border-bottom: 2px solid #fff;
      transition: all 0.3s ease;
      transition-delay: 0.15s;
    }
    .main_menu .personalImg .checkbox__label {
      margin-left: 5px;
      vertical-align: middle;
      cursor: pointer;
    }
    .main_menu .personalImg .checkbox > input:checked ~ .checkbox__checkbox {
      border-color: transparent;
      background: #F47956;
      -webkit-animation: jelly 0.6s ease;
              animation: jelly 0.6s ease;
    }
    .main_menu .personalImg .checkbox > input:checked ~ .checkbox__checkbox:after {
      opacity: 1;
      transform: rotate(45deg) scale(1);
    }

    @-webkit-keyframes jelly {
      from {
        transform: scale(1, 1);
      }
      30% {
        transform: scale(1.25, 0.75);
      }
      40% {
        transform: scale(0.75, 1.25);
      }
      50% {
        transform: scale(1.15, 0.85);
      }
      65% {
        transform: scale(0.95, 1.05);
      }
      75% {
        transform: scale(1.05, 0.95);
      }
      to {
        transform: scale(1, 1);
      }
    }

    @keyframes jelly {
      from {
        transform: scale(1, 1);
      }
      30% {
        transform: scale(1.25, 0.75);
      }
      40% {
        transform: scale(0.75, 1.25);
      }
      50% {
        transform: scale(1.15, 0.85);
      }
      65% {
        transform: scale(0.95, 1.05);
      }
      75% {
        transform: scale(1.05, 0.95);
      }
      to {
        transform: scale(1, 1);
      }
    }

    .main_menu .glowBox {
        box-shadow: 5px 6px 6px rgba(103, 199, 234, 0.37 );
        backdrop-filter: blur( 4.5px );
        -webkit-backdrop-filter: blur( 5.0px );
        border-radius: 15px;
        border: 1px solid rgba(103, 199, 234, 0.18 );
    }
    .main_menu .newsBox {
        position:absolute;
        top: 58%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        height: inherit;
    }
    .main_menu .newsBox a {
        width: inherit;
    }

    .main_menu .newsBox .imgBox {
        clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
        margin: 0.5rem;
        background-color: darkgray;
        height: 18rem;
        width: 16rem;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        transition: 0.5s;
    }
    .gradient-border {
        clip-path: polygon(0 25%, 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%);
      --border-width: 5px;
      position: relative;
      display: flex;
      border-radius: var(--border-width);
    }
    .gradient-border::after {
      position: absolute;
      content: "";
      top: calc(-1 * var(--border-width));
      left: calc(-1 * var(--border-width));
      z-index: -1;
      width: calc(100% + var(--border-width) * 2);
      height: calc(100% + var(--border-width) * 2);
      background: linear-gradient(60deg, #5f86f2, #a65ff2, #f25fd0, #f25f61, #f2cb5f, #abf25f, #5ff281, #5ff2f0);
      background-size: 300% 300%;
      background-position: 0 50%;
      border-radius: calc(2 * var(--border-width));
      animation: moveGradient 4s alternate infinite;
    }

    @keyframes moveGradient {
      50% {
        background-position: 100% 50%;
      }
    }

    .main_menu .newsBox .imgRow  {
        transform: translateY(1rem);
        transition: 0.5s;
    }
    .main_menu .newsBox .contentRow  {
        transform: translateY(-1rem);
        transition: 0.5s;
    }
    .main_menu .newsBox:hover .imgRow  {
        transform: translateY(0rem);
    }
    .main_menu .newsBox:hover .imgBox {
        height: 20rem;
        width: 18rem;
    }
    .main_menu .newsBox:hover .contentRow  {
        transform: translateY(0rem);
    }

    .main_menu .newsBox .contentBox a {
        text-decoration: none;
        text-transform: none;
        color: #edf3ffff;
    }
    .main_menu .newsBox .contentBox {
        padding: 2rem 0.5rem 1rem;
        font-family: 'Exo 2', sans-serif;
    }
    .main_menu .newsBox .contentBox h3 {
        text-transform: uppercase;
        font-family: 'Exo 2', sans-serif;
        color: #fff6a9;
        animation: blink 3s infinite;
         -webkit-animation: blink 3s infinite;
    }
    @-webkit-keyframes blink {
        20%,24%,55% {
            color: #111;
            text-shadow: none;
        }

        0%,19%,21%,23%,25%,54%,56%,100% {
            text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
            color: #fff6a9;
        }
    }
    @keyframes blink {
        20%,
        24%,
        55% {
            color: #111;
            text-shadow: none;
        }

        0%,19%,21%,23%,25%,54%,56%,100% {
            text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
            color: #fff6a9;
        }
    }
    .main_menu .ringraziamentiBox  {
        position: absolute;
        top:75%;
        left: 50%;
        transform: translateX(-50%);
        max-width: 50%;
        padding: 0 2rem;
        text-align: right;
        padding: 1rem;
    }
    .main_menu .ringraziamentiBox h3 {
        text-transform: uppercase;
        font-family: 'Exo 2', sans-serif;
        text-align: center;
        color: #edf3ffff;
        margin-top:  0.5rem;
    }

    .main_menu .ringraziamentiBox p {
        text-align: center;
        color: #edf3ffff;

    }


    /* LARGE TABLET / SMALL DESKTOP VIEW MIN 768px MAX 991.98px */
        @media (min-width: 576px) and (max-width: 991.98px) {


        }
    /* TABLET VIEW MIN 576px MAX 768px */
        @media (min-width: 576px) and (max-width: 767.98px) {

         }
     /* MOBILE VIEW MAX 576px */
         @media (max-width: 575.98px) {
             .main_menu .titleSvg {
                 width:300px;
             }
             .main_menu .boxContent {
                 text-align: center;
                 width: 27rem;
             }
             .main_menu .boxContent h1{
                font-size: 2.5rem;
            }
            .main_menu .personalImg {
            }
            .main_menu .newsBox {
                top: 55%;
            }
            .main_menu .newsBox .contentRow{
                min-width: 95vw;
            }
            .main_menu .ringraziamentiBox  {
                min-width: 95vw;
                max-width: 95%;
            }




          }