*,

*::after,

*::before {

  margin: 0;

  padding: 0;

  box-sizing: inherit;

  -webkit-box-sizing: inherit; }



html {

  font-size: 62.5%; }



body {

  font-family: 'Helvetica Neue', 'Arial', sans-serif;

  font-weight: 100;

  line-height: 1.7;

  box-sizing: border-box;

  -webkit-box-sizing: border-box;

}



video::-webkit-media-controls-start-playback-button {

  display: none !important;

}



.video {

  position: fixed;

  width: 100vw;

  height: auto;

  z-index: 0; }

  @media (min-aspect-ratio: 16 / 9) {

    .video {

      width: 100vw;

      height: auto; } }

  @media (max-aspect-ratio: 16 / 9) {

    .video {

      width: auto;

      height: 100vh;

      right: 0;

      bottom: 0;

      min-width: 100vh;

      min-height: 100vh;

      transform: translateX(calc((100% - 100vw) / 2));} }

@media only screen and (max-width: 37.5em) {

  .video-video { display:none;

}

}

main {

  position: fixed;

  background-color: rgba(0, 0, 0, 0.4);

  width: 100%;

  height: 100vh;

  text-align: center;

  z-index: 100; }



.logo-container {

  width: 18rem;

  position: absolute;

  top: 6rem;

  right: 6rem;

  opacity: 0;

  animation: limShow 2s ease-in forwards;

  animation-delay: 6s;

  z-index: 250;

cursor: pointer;}

  @media only screen and (min-width: 112.5em) {

    .logo-container {

      width: 20rem;

      top: 8rem;

      right: 8rem;} }

  @media only screen and (max-width: 56.25em) {

    .logo-container {

      top: 3rem;

      right: 3rem; } }

  @media only screen and (max-width: 37.5em) {

    .logo-container {

      top: 2rem;

      right: 1rem; } }

  .logo-container a {

    text-decoration: none; }

  .logo-container .logo-box {

    position: relative;

    text-align: right; }

    @media only screen and (max-width: 37.5em) {

      .logo-container .logo-box {

        margin: 0 auto; } }

    .logo-container .logo-box img {

      width: 9rem;

      margin-bottom: .5rem; }

      @media only screen and (max-width: 37.5em) {

        .logo-container .logo-box img {

          width: 6rem; } }

    .logo-container .logo-box .logo-typo {

      width: 100%;

      position: absolute;

      top: 47%;

      left: 50%;

      transform: translate(-50%, -50%); }

    .logo-container .logo-box .logo-circle {

      fill: rgba(0, 0, 0, 0.6); }

  .logo-container p {

    font-size:1.1rem;

    line-height:1.5rem;

    font-weight: 300;

    text-align: right;

    color: #fff; }

    @media only screen and (min-width: 112.5em) {

      .logo-container p {

        font-size:1.2rem;} }



.social-box {

  width: 10rem;

  position: fixed;

  bottom: 6rem;

  left: 6rem;

  opacity: 0;

  animation: limShow 2s ease-in forwards;

  animation-delay: 6s;

  z-index: 200; }

  @media only screen and (min-width: 112.5em) {

    .social-box {

      bottom: 8rem;

      left: 8rem; } }

  @media only screen and (max-width: 56.25em) {

    .social-box {

      bottom: 3rem;

      left: 3rem; } }

  @media only screen and (max-width: 37.5em) {

    .social-box {

      bottom: 2rem;

      left: 2rem; } }

  .social-box a {

    width: 100%;

    display: block;

    transition: transform 1s; }

    .social-box a:hover {

      transform: scale(1.05) translateX(0.5rem); }

    .social-box a img {

      width: 20%;

      margin: .6rem 0; }

      @media only screen and (min-width: 112.5em) {

        .social-box a img {

          width: 35%;

          margin: .8rem 0; } }

      @media only screen and (max-width: 37.5em) {

        .social-box a img {

          margin: .4rem 0; } }



.main-detail {

  background-color: #000;

  display: flex;

  flex-wrap: wrap;

  position: relative;

  height: auto; }



.main-spacer {

  flex-basis: 100%;

  height: 32rem; }

  @media only screen and (max-width: 37.5em) {

    .main-spacer {

      height: 22rem; } }



.main-circle {

  width: 2rem;

  height: 2rem;

  position: absolute;

  top: 32rem;

  left: 50%;

  transform: translate(-50%, -50%); }

  @media only screen and (max-width: 37.5em) {

    .main-circle {

      top: 22rem;

      left: 6.5rem; } }



.main-left, .box-border {

  flex-basis: 50%;

  height: 50%; }

  @media only screen and (max-width: 37.5em) {

    .main-left, .box-border {

      flex-basis: 6.5rem; } }

  .main-left h1, .box-border h1 {

    font-weight: bold;

    font-size: 3.8rem;

    color: #fff;

    line-height: 3.8rem;

    margin-top: -2rem;

    padding-left: 3rem;

    max-width: 70%;

    opacity: 0;

    animation: limShow 4s ease forwards;

    animation-delay: 1.8s; }

    @media only screen and (max-width: 37.5em) {

      .main-left h1, .box-border h1 {

        max-width: 90%; } }

  .main-left p, .box-border p {

    font-weight: 300;

    font-size: 1.8rem;

    color: #fff;

    padding-left: 3rem;

    max-width: 70%;

    padding-top: 4rem;

    opacity: 0;

    animation: limShow 4s ease forwards;

    animation-delay: 3s; }

    @media only screen and (max-width: 37.5em) {

      .main-left p, .box-border p {

        max-width: 100%; } }

    .main-left p a, .box-border p a {

      text-decoration: underline;

      color: #fff; }



.box-border {

  border-left: 1px solid #fff;

  text-align: left;

  opacity: 0;

  animation: limShow 4s ease forwards;

  animation-delay: 1s; }

  @media only screen and (max-width: 37.5em) {

    .box-border {

      flex-basis: 70%; } }

  .box-border .map-container {

    width: 30%;

    height: 20rem;

    margin-left: 3rem;

    margin-top: 6rem;

    margin-bottom: 6rem;

    position: relative;

    opacity: 0;

    animation: limShow 4s ease forwards;

    animation-delay: 3.5s; }

    @media only screen and (max-width: 75em) {

      .box-border .map-container {

        width: 50%;

        margin-top: 8rem;

        margin-bottom: 8rem; } }

    @media only screen and (max-width: 56.25em) {

      .box-border .map-container {

        width: 60%; } }

    @media only screen and (min-width: 112.5em) {

      .box-border .map-container {

        margin-top: 12rem;

        margin-bottom: 12rem; } }

    @media only screen and (max-width: 37.5em) {

      .box-border .map-container {

        width: 90%;

        height: 15rem; } }

    .box-border .map-container img {

      position: absolute;

      top: 0;

      left: 0;

      width: 100%; }

    .box-border .map-container:after {

      content: url(../img/padova-mappa-hover.svg);

      position: absolute;

      top: 0;

      left: 0;

      width: 100%;

      z-index: 200;

      opacity: .1;

      transition: opacity 1.5s ease;

      -webkit-transition: opacity 1.5s ease; }

    .box-border .map-container:hover:after {

      opacity: 1; }



.section-white {

  display: flex;

  flex-wrap: wrap;

  position: relative; }

  @media only screen and (max-width: 37.5em) {

    .section-white {

      position: relative; } }

  .section-white .white-left, .section-white .white-right {

    flex-basis: 50.1%;

    text-align: right; }

    @media only screen and (max-width: 37.5em) {

      .section-white .white-left, .section-white .white-right {

        text-align: left;

        padding-left: 3rem; } }

    .section-white .white-left p, .section-white .white-right p {

      font-weight: 300;

      font-size: 1.8rem;

      color: #000;

      padding-right: 3rem;

      width: 70%;

      padding-top: 18rem;

      display: inline-block; }

      @media only screen and (max-width: 37.5em) {

        .section-white .white-left p, .section-white .white-right p {

          width: 100%;

          padding-right: 0;

          display: block; } }

      .section-white .white-left p a, .section-white .white-right p a {

        text-decoration: underline;

        color: #fff; }

  .section-white .white-left {

    border-right: 1px solid #000;

    min-height: 100vh; }

    @media only screen and (min-width: 112.5em) {

      .section-white .white-left {

        height: 80vh; } }

    @media only screen and (max-width: 37.5em) {

      .section-white .white-left {

        flex-basis: 6.5rem;

      min-height: 180vh;} }

    .section-white .white-left .map-white {

      display: inline-block;

      width: 30%;

      height: 25rem;

      margin-right: 3rem;

      margin-top: 6rem;

      margin-bottom: 6rem;

      position: relative; }

      @media only screen and (min-width: 112.5em) {

        .section-white .white-left .map-white {

          margin-top: 12rem;

          margin-bottom: 12rem; } }

      @media only screen and (max-width: 75em) {

        .section-white .white-left .map-white {

          width: 50%;

          margin-top: 8rem;

          margin-bottom: 8rem; } }

      @media only screen and (max-width: 56.25em) {

        .section-white .white-left .map-white {

          width: 60%; } }

      @media only screen and (max-width: 37.5em) {

        .section-white .white-left .map-white {

          display: none; } }

      .section-white .white-left .map-white:after {

        content: url(../img/birmingham-mappa-hover.svg);

        position: absolute;

        top: 0;

        left: 0;

        width: 100%;

        opacity: .1;

        transition: opacity 1.5s ease;

        -webkit-transition: opacity 1.5s ease; }

      .section-white .white-left .map-white:hover:after {

        opacity: 1; }

    @media only screen and (max-width: 37.5em) {

      .section-white .white-left p {

        display: none; } }

    .section-white .white-left img {

      position: absolute;

      top: 0;

      left: 0;

      width: 100%; }



.white-right {

  display: none; }

  @media only screen and (max-width: 37.5em) {

    .white-right {

      display: block; } }

  @media only screen and (max-width: 37.5em) {

    .white-right p {

      display: block;

      width: 100%; }

      .white-right p a {

        display: block;

        color: #000 !important;

        text-decoration: underline; } }

  @media only screen and (max-width: 37.5em) {

    .white-right .map-white {

      display: block;

      width: 70%;

      height: 15rem;

      margin-top: 4rem;

      margin-bottom: 4rem; } }



.scroll {

  width: 0;

  position: fixed;

  bottom: 6rem;

  right: 6rem;

  z-index: 200;

  transform: rotate(-90deg);

  opacity: 0;

  animation: limShow 6s ease-in forwards; }

  @media only screen and (min-width: 112.5em) {

    .scroll {

      bottom: 8rem;

      right: 8rem; } }

  @media only screen and (max-width: 56.25em) {

    .scroll {

      bottom: 3rem;

      right: 3rem; } }

  @media only screen and (max-width: 37.5em) {

    .scroll {

      bottom: 2rem;

      right: 2.5rem; } }

  .scroll p {

    font-size: 1.1rem;

    color: #fff;

    font-weight: 300; }

    @media only screen and (min-width: 112.5em) {

      .scroll p {

        font-size: 1.2rem; } }

    .scroll p span {

      padding-right: 1.5rem;

      font-weight: bold; }



.p-main {

  margin-top: 5rem;

  margin-bottom: 25rem; }

  @media only screen and (max-width: 37.5em) {

    .p-main {

      margin-bottom: 15rem; } }



.about-border {

  height: 40rem; }

  @media only screen and (max-width: 37.5em) {

    .about-border {

      height: 40rem; } }



.arch-container {

  width: 100%;

  z-index: 200;

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

}

  .arch-container .arch, .arch-container .arch-reverse {

    display: flex;

    margin: 0 auto;

    width: 80%;

    flex-wrap: wrap;

    justify-content: space-between;

    margin-bottom: 2rem; }

    @media only screen and (max-width: 37.5em) {

      .arch-container .arch, .arch-container .arch-reverse {

        margin-bottom: 6rem; } }

    .arch-container .arch .arch-img, .arch-container .arch-reverse .arch-img {

      flex-basis: 52%;

      display: flex;

      justify-content: flex-end; }

      .arch-container .arch .arch-img img, .arch-container .arch-reverse .arch-img img {

        width: 22rem;

        height: 22rem; }

        .arch-container .arch .arch-img img:hover, .arch-container .arch-reverse .arch-img img:hover {

          cursor: pointer; }

    .arch-container .arch .arch-paragraph, .arch-container .arch-reverse .arch-paragraph {

      flex-basis: 45%;

      display: flex;

      align-items: start;

      margin-top: 10rem;

      flex-wrap: wrap; }

      @media only screen and (max-width: 37.5em) {

        .arch-container .arch .arch-paragraph, .arch-container .arch-reverse .arch-paragraph {

          flex-basis: 100%;

          margin-top: 2rem;

          margin-left: 4rem;

          max-width: 90%; } }

      .arch-container .arch .arch-paragraph .button-arch, .arch-container .arch-reverse .arch-paragraph .button-arch {

        font-size: 2.8rem;

        font-weight: bold;

        color: #000000;

        background: none;

        border: none;

        transition: all 2s; }

        @media only screen and (max-width: 37.5em) {

          .arch-container .arch .arch-paragraph .button-arch, .arch-container .arch-reverse .arch-paragraph .button-arch {

            text-align: left; } }

        .arch-container .arch .arch-paragraph .button-arch:hover, .arch-container .arch-reverse .arch-paragraph .button-arch:hover {

          text-decoration: underline;

          cursor: pointer; }

        .arch-container .arch .arch-paragraph .button-arch:active, .arch-container .arch .arch-paragraph .button-arch:focus, .arch-container .arch-reverse .arch-paragraph .button-arch:active, .arch-container .arch-reverse .arch-paragraph .button-arch:focus {

          outline: none; }

      .arch-container .arch .arch-paragraph p, .arch-container .arch-reverse .arch-paragraph p {

        font-size: 1.8rem;

        font-weight: 300;

        color: #000000;

        padding-top: 8rem;

        padding-bottom: 8rem; }

        @media only screen and (max-width: 37.5em) {

          .arch-container .arch .arch-paragraph p, .arch-container .arch-reverse .arch-paragraph p {

            padding-top: 4rem;

            padding-bottom: 4rem; } }

  .arch-container .arch-reverse .arch-img {

    justify-content: flex-start; }

  .arch-container .arch-reverse .arch-paragraph {

    justify-content: flex-end; }

    @media only screen and (max-width: 37.5em) {

      .arch-container .arch-reverse .arch-paragraph {

        order: 2;

        justify-content: flex-start; } }

    .arch-container .arch-reverse .arch-paragraph p {

      text-align: right; }

      @media only screen and (max-width: 37.5em) {

        .arch-container .arch-reverse .arch-paragraph p {

          text-align: left; } }



.news-wrapper {

  width: 100%;

  margin-top: -2rem;

  z-index: 200;

  text-align: center; }

  @media only screen and (max-width: 37.5em) {

    .news-wrapper {

      order: 2;

      flex-basis: 80%; } }

  .news-wrapper .news {

    width: 50%;

    margin: 0 auto;

    text-align: left;

    margin-bottom: 7rem; }

    @media only screen and (max-width: 37.5em) {

      .news-wrapper .news {

        margin-left: 3rem;

        margin-right: 3rem;

        width: auto; } }

    .news-wrapper .news img {

      width: 100%;

      transition: transform 1s; }

    .news-wrapper .news h2 {

      font-size: 2.4rem;

      font-weight: bold;

      padding: 1rem 0;

      color: #000000; }

    .news-wrapper .news p {

      color: #000000;

      font-weight: 300;

      font-size: 1.8rem;

      margin-bottom: 1rem; }

    .news-wrapper .news a {

      text-decoration: none; }

      .news-wrapper .news a:hover img {

        transform: scale(1.01); }

      .news-wrapper .news a:hover ~ .a-dettagli {

        transform: translateX(2.5rem); }

    .news-wrapper .news .a-dettagli {

      text-decoration: none;

      color: #000000;

      font-weight: bold;

      font-size: 1.6rem;

      display: block;

      transition: transform 2s; }

      .news-wrapper .news .a-dettagli span {

        padding-right: 1rem; }

      .news-wrapper .news .a-dettagli:hover {

        transform: scale(1.01) translateX(2.5rem); }

    .news-wrapper .news:last-child {

      margin-bottom: 2rem; }

      @media only screen and (max-width: 37.5em) {

        .news-wrapper .news:last-child {

          margin-bottom: 20rem; } }



.news-border {

  flex-basis: 50.1%;

  border-right: 1px solid #000;

  height: 10rem; }

  @media only screen and (max-width: 37.5em) {

    .news-border {

      flex-basis: 6.5rem;

      height: auto; } }



@media only screen and (max-width: 37.5em) {

  .white-news {

    display: flex; } }



.section-white .news-right {

  flex-basis: 49.9%;

  display: block;

  text-align: left; }

  @media only screen and (max-width: 37.5em) {

    .section-white .news-right {

      flex-basis: 70%; } }

  .section-white .news-right p {

    margin-left: 3rem;

    margin-bottom: 10rem; }

    @media only screen and (max-width: 37.5em) {

      .section-white .news-right p {

        margin-left: 0; } }



.progetti-container {

  width: 100%;

  z-index: 200;

  position: absolute;

  top: -2rem; }

  .progetti-container .progetti-wrapper {

    display: flex;

    width: 80%;

    flex-wrap: wrap;

    justify-content: space-between;

    margin: 0 auto; }

    @media only screen and (max-width: 37.5em) {

      .progetti-container .progetti-wrapper {

        width: auto;

        margin-left: 6.5rem; } }

    .progetti-container .progetti-wrapper .progetto {

      flex-basis: 45%;

      margin-bottom: 5rem; }

      @media only screen and (max-width: 37.5em) {

        .progetti-container .progetti-wrapper .progetto {

          flex-basis: 100%;

          padding: 0 3rem; } }

      .progetti-container .progetti-wrapper .progetto img {

        width: 100%;

        transition: transform 1s; }

        .progetti-container .progetti-wrapper .progetto img:hover {

          cursor: pointer; }

      .progetti-container .progetti-wrapper .progetto h2 {

        font-size: 2.4rem; }

      .progetti-container .progetti-wrapper .progetto a {

        text-decoration: none; }

        .progetti-container .progetti-wrapper .progetto a:hover img {

          transform: scale(1.01); }

        .progetti-container .progetti-wrapper .progetto a:hover ~ .a-dettagli {

          transform: translateX(2.5rem); }

      .progetti-container .progetti-wrapper .progetto .a-dettagli {

        text-decoration: none;

        color: #000000;

        font-weight: bold;

        font-size: 1.6rem;

        display: block;

        transition: transform 2s; }

        .progetti-container .progetti-wrapper .progetto .a-dettagli span {

          padding-right: 1rem; }

        .progetti-container .progetti-wrapper .progetto .a-dettagli:hover {

          transform: scale(1.01) translateX(2.5rem); }

      .progetti-container .progetti-wrapper .progetto:last-child {

        margin-bottom: 20rem; }

        @media only screen and (max-width: 37.5em) {

          .progetti-container .progetti-wrapper .progetto:last-child {

            margin-bottom: 16rem; } }



.progetti-left {

  height: 150rem; }



.arrow-back {

  width: 3rem;

  position: absolute;

  top: 6rem;

  left: 6rem;

  opacity: 0;

  animation: limShow 2s ease-in forwards;

  z-index: 200; }

  .arrow-back img {

    width: 100%; }

  @media only screen and (min-width: 112.5em) {

    .arrow-back {

      top: 8rem;

      left: 8rem; } }

  @media only screen and (max-width: 56.25em) {

    .arrow-back {

      top: 3rem;

      left: 3rem; } }

  @media only screen and (max-width: 37.5em) {

    .arrow-back {

      top: 2rem;

      left: 2rem; } }

  .arrow-back a {

    transition: transform 1s;

    display: block;

    width: 100%; }

    .arrow-back a:hover {

      transform: scale(1.05) translateX(-0.5rem); }



.progetti-right {

  margin-top: 55rem;

  position: relative; }

  @media only screen and (max-width: 37.5em) {

    .progetti-right {

      margin-top: 35rem; } }

  .progetti-right p {

    padding-bottom: 20rem; }

    @media only screen and (max-width: 56.25em) {

      .progetti-right p {

        padding-bottom: 15rem; } }

    @media only screen and (max-width: 37.5em) {

      .progetti-right p {

        padding-bottom: 10rem; } }



.gallery-container {

  position: absolute;

  width: 100%;

  top: -2rem;

  z-index: 200; }

  .gallery-container .gallery-cell {

    margin: 0 2.5rem; }

    @media only screen and (max-width: 37.5em) {

      .gallery-container .gallery-cell {

        margin: 0 1.5rem; } }

    .gallery-container .gallery-cell .big {

      height: 60rem; }

      @media only screen and (max-width: 37.5em) {

        .gallery-container .gallery-cell .big {

          height: 35rem; } }

    .gallery-container .gallery-cell .small {

      height: 40rem; }

      @media only screen and (max-width: 37.5em) {

        .gallery-container .gallery-cell .small {

          height: 25rem; } }

  .gallery-container .flickity-slider:first-child {

    margin-left: 20rem; }

    @media only screen and (max-width: 56.25em) {

      .gallery-container .flickity-slider:first-child {

        margin-left: 10rem; } }

    @media only screen and (max-width: 37.5em) {

      .gallery-container .flickity-slider:first-child {

        margin-left: 2.5rem; } }

  .gallery-container .flickity-page-dots {

    display: none; }

  .gallery-container .flickity-prev-next-button {

    top: auto;

    bottom: -12rem;

    right: 20rem;

    background-image: url(../img/arrow-right.png);

    background-repeat: no-repeat;

    background-position: center;

    width: 6rem;

    height: 6rem;

    transition: right 1s; }

    @media only screen and (max-width: 56.25em) {

      .gallery-container .flickity-prev-next-button {

        right: 10rem; } }

    @media only screen and (max-width: 37.5em) {

      .gallery-container .flickity-prev-next-button {

        right: 4rem; } }

    .gallery-container .flickity-prev-next-button:hover {

      right: 19.5rem; }

      @media only screen and (max-width: 56.25em) {

        .gallery-container .flickity-prev-next-button:hover {

          right: 9.5rem; } }

      @media only screen and (max-width: 37.5em) {

        .gallery-container .flickity-prev-next-button:hover {

          right: 4rem; } }

    .gallery-container .flickity-prev-next-button .flickity-button-icon {

      display: none; }



.flickity-prev-next-button.previous.previous {

  display: none; }



.initial-animation {

  width: 35rem;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  animation: fadeOut 0s ease-in-out forwards;

  animation-delay: 8s; }

  @media only screen and (min-width: 112.5em) {

    .initial-animation {

      width: 50rem; } }

  @media only screen and (max-width: 37.5em) {

    .initial-animation {

      width: 25rem; } }

  .initial-animation__svg {

    width: 70%; }

  .initial-animation__lim {

    width: 100%;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    animation: fadeOut 3.5s ease-in-out forwards;

    animation-delay: 4.8s; }



.lim-1 {

  opacity: 0;

  animation: limShow 3s ease-in forwards;

  animation-delay: 2.6s; }



.lim-2 {

  opacity: 0;

  animation: limShow 1.5s ease-in forwards;

  animation-delay: 3s; }



.lim-3 {

  opacity: 0;

  animation: limShow 1.5s ease-in forwards;

  animation-delay: 3.4s; }



.lim-4 {

  opacity: 0;

  animation: limShow 1.5s ease-in forwards;

  animation-delay: 3.9s; }



.lim-5 {

  opacity: 0;

  animation: limShow 1.5s ease-in forwards;

  animation-delay: 4.3s; }



#circle {

  stroke-dasharray: 1000;

  animation: circle 4s ease-in-out , fillOpacity 6s linear forwards;

  transform: rotate(72deg);

  transform-origin: center;

  transition: fillOpacity 2s; }



#line {

  stroke-dasharray: 1000;

  stroke-dashoffset: 1000;

  animation: line 5s linear forwards;

  animation-delay: 3s; }



nav {

  width: 35rem;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%); }

  @media only screen and (min-width: 112.5em) {

    nav {

      width: 50rem; } }

  @media only screen and (max-width: 37.5em) {

    nav {

      width: 25rem; } }

  nav #nav-circle {

    opacity: 0;

    fill: rgba(0, 0, 0, 0.6);

    animation: limShow ease-in forwards;

    animation-delay: 8s; }

  nav #line-1 {

    stroke-dasharray: 1000;

    stroke-dashoffset: 1000;

    animation: line 5s linear forwards;

    animation-delay: 6.8s; }

  nav #line-2 {

    stroke-dasharray: 1000;

    stroke-dashoffset: 1000;

    animation: line 5s linear forwards;

    animation-delay: 9s; }

  nav #line-3 {

    stroke-dasharray: 1000;

    stroke-dashoffset: 1000;

    animation: line 5s linear forwards;

    animation-delay: 9.5s; }

  nav .navigation-container {

    position: relative; }

    nav .navigation-container a {

      color: white;

      text-decoration: none;

      position: absolute;

      font-weight: 300;

      opacity: 0;

      animation: limShow 2s ease forwards;

      transition: transform 1s; }

      nav .navigation-container a:hover {

        transform: translateY(-0.5rem) scale(1.05); }

    nav .navigation-container .nav-progetti {

      font-size: 5rem;

      top: 15rem;

      left: 4rem;

      animation-delay: 10s; }

      @media only screen and (min-width: 112.5em) {

        nav .navigation-container .nav-progetti {

          font-size: 7.4rem;

          top: 21rem;

          left: 5rem; } }

      @media only screen and (max-width: 37.5em) {

        nav .navigation-container .nav-progetti {

          font-size: 3.8rem;

          top: 10rem;

          left: 2rem; } }

    nav .navigation-container .nav-news {

      font-size: 2.2rem;

      top: 8rem;

      right: 6rem;

      animation-delay: 11s; }

      @media only screen and (min-width: 112.5em) {

        nav .navigation-container .nav-news {

          font-size: 3.5rem;

          top: 12rem;

          right: 7rem; } }

      @media only screen and (max-width: 37.5em) {

        nav .navigation-container .nav-news {

          font-size: 1.8rem;

          top: 6rem;

          right: 3.5rem; } }

    nav .navigation-container .nav-chi-siamo {

      font-size: 2.8rem;

      top: 26rem;

      left: 7rem;

      animation-delay: 12s; }

@media only screen and (min-width: 112.5em) {

  nav .navigation-container .nav-chi-siamo {

    font-size: 4.2rem;

    top: 38rem;

    left: 12rem; } }

      @media only screen and (max-width: 37.5em) {

        nav .navigation-container .nav-chi-siamo {

          font-size: 2.2rem;

          top: 19rem;

          left: 5.5rem; } }

    nav .navigation-container .nav-contatti {

      font-size: 2.3rem;

      top: 22.5rem;

      right: 4rem;

      animation-delay: 13s; }

      @media only screen and (min-width: 112.5em) {

        nav .navigation-container .nav-contatti {

          font-size: 3.6rem;

          top: 32rem;

          right: 5.3rem; } }

      @media only screen and (max-width: 37.5em) {

        nav .navigation-container .nav-contatti {

          font-size: 1.9rem;

          top: 16rem;

          right: 2.5rem; } }



.animation-none {

  animation-delay: 0s; }



@keyframes circle {

  from {

    stroke-dashoffset: 1000; }

  to {

    stroke-dashoffset: 0; } }



@keyframes line {

  to {

    stroke-dashoffset: 0; } }



@keyframes limShow {

  to {

    opacity: 1;

    visibility: visible; } }



@keyframes fadeOut {

  to {

    opacity: 0;

    visibility: hidden; } }



@keyframes fillOpacity {

  from {

    fill: none; }

  to {

    fill: rgba(0, 0, 0, 0.6); } }



@keyframes noneOpacity {

  from {

    fill: rgba(0, 0, 0, 0.6); }

  to {

    fill: none; } }



.menu {

 width: 100vw;

  height: 100vh;

  background:black;

  z-index: 250;

  position: absolute;

  display: none;

}



.menu .nav-home {

  color: white;

  font-weight: 300;

  font-size: 4rem;

  text-decoration: none;

  position: absolute;

  top: 6rem;

  left: 6rem;

  transition: transform 1s;

}



.menu .nav-home:hover {

  transform: translateY(-0.5rem) scale(1.05);

}



@media only screen and (min-width: 112.5em) {

  .menu .nav-home {

    top: 8rem;

    left: 8rem; } }

@media only screen and (max-width: 56.25em) {

  .menu .nav-home {

    top: 3rem;

    left: 3rem;

  font-size: 2.5rem;} }

@media only screen and (max-width: 37.5em) {

  .menu .nav-home {

    top: 2rem;

    left: 1rem; } }



nav .navigation-container-static a{

  opacity: 1;

  animation: none;

}



nav .navigation-container .nav-static {

  animation-delay: 0s;

}