@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,300);

html {
  scroll-behavior: smooth;
}

body {
   margin: 0px;
   padding: 0px;
   font-family: 'Open Sans', sans-serif;
   overflow-y: auto;
   overflow-x: hidden;
   background-color: #000000;
}

a {
   color: white;
   text-decoration: none;
}
a:visited {
   color: white;
}

/* ---------------------------------------------------------------------------------------- */

.TopBar {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100vw;
   color: #ffffff;
   background-color: #000000;

   z-index: 250;
}
@media (max-width: 415px)  {
   .TopBar {
      height: 52px;
   }
}

.TopMenu {
   display: inline-block;
   position: relative;
   top: 3px;
   left: 3px;
   font-size: 30px;
   cursor: pointer;
}
.TopMenu img {
   width: 68px;
   height: auto;
}
.TopMenu:hover {
   background-color: #202020;
}

@media (max-width: 1128px)  {
   .TopMenu img {
      width: 52px !important;
   }
}
@media (max-width: 768px)  {
   .TopMenu img {
      width: 40px !important;
   }
}
@media (max-width: 480px)  {
   .TopMenu img {
      width: 28px !important;
   }
}
@media (max-width: 415px)  {
   .TopMenu img {
      width: 44px !important;
   }
}


.TopTitle {
   display: inline-block;
   font-size: 24px;
   width: calc(100% - 162px);

                                 ---width: calc(100% - 210px);
      
   position: relative;
   top: -23px;
   text-align: center;
}
@media (max-width: 1128px)  {
   .TopTitle {
      font-size: 21px;
      width: calc(100% - 114px);
                                 ---width: calc(100% - 176px);
      top: -17px;
   }
}
@media (max-width: 768px)  {
   .TopTitle {
      font-size: 14px;
      width: calc(100% - 90px);
                                 ---width: calc(100% - 148px);
      top: -12px;
   }
}
@media (max-width: 480px)  {
   .TopTitle {
      font-size: 10px;
      width: calc(100% - 66px);
                                 ---width: calc(100% - 104px);
      top: -8px;
   }
}
@media (max-width: 415px)  {
   .TopTitle {
      font-size: 15px;
      width: calc(100% - 117px);
      top: -2px;
      padding: 0px 10px;
   }
}


.TopSearch {
   display: inline-block;
   position: absolute;
   top: 3px;
   right: 15px;
   font-size: 30px;
   cursor: pointer;
}
.TopSearch img {
   width: 68px;
   height: auto;
}
.TopSearch:hover {
   background-color: #202020;
}
@media (max-width: 1128px)  {
   .TopSearch {
      right: 14px;
   }
   .TopSearch img {
      width: 52px !important;
   }
}
@media (max-width: 768px)  {
   .TopSearch {
      right: 13px;
   }
   .TopSearch img {
      width: 40px !important;
   }
}
@media (max-width: 480px)  {
   .TopSearch {
      right: 12px;
   }
   .TopSearch img {
      width: 28px !important;
   }
}
@media (max-width: 415px)  {
   .TopSearch {
      right: 11px;
   }
   .TopSearch img {
      width: 44px !important;
   }
}

                                 #DisplayStyle {
                                    position: absolute;
                                    top: 24px;
                                    right: 92px;
                                    display: inline-block;
                                    width: 60px;
                                    text-align: right;
                                    font-size: 15px;
                                    cursor: pointer
                                 }
                                 @media (max-width: 1128px)  {
                                    #DisplayStyle {
                                       top: 20px;
                                       right: 54px;
                                       width: 57px;
                                       font-size: 13px;
                                    }
                                 }
                                 @media (max-width: 768px)  {
                                    #DisplayStyle {
                                       top: 15px;
                                       right: 39px;
                                       width: 53px;
                                       font-size: 11px;
                                    }
                                 }
                                 @media (max-width: 480px)  {
                                    #DisplayStyle {
                                       top: 13px;
                                       right: 30px;
                                       width: 34px;
                                       font-size: 8px;
                                    }
                                 }
                                 @media (max-width: 415px)  {
                                    #DisplayStyle {
                                       display: none;
                                    }
                                 }



/* ---------------------------------------------------------------------------------------- */

.TileArea {
   display: inline-block;
   width: 100vw;
   margin-top: 75px;
}
@media (max-width: 1128px)  {
   .TileArea {
      margin-top: 58px;
   }
}
@media (max-width: 768px)  {
   .TileArea {
      margin-top: 45px;
   }
}
@media (max-width: 480px)  {
   .TileArea {
      margin-top: 33px;
   }
}
@media (max-width: 415px)  {
   .TileArea {
      margin-top: 52px;
   }
}

.TileItem {
   display: block;
   float: left;
   width: 25vw;
   height: 25vw;
}

.TileBox {
   width: 25vw;
   height: 25vw;
   overflow: hidden;
}

.TileImg {
   width: 100%;
   height: auto;
}

.TileMenu {
   cursor: pointer;
}

.TileTitle {
   display: none;
   /* display: block; */
   position: relative;
   top: calc(-25vw - 48px);   
   max-height: 36px;
   padding: 4px 10px 8px 10px;
   font-size: 26px;
   font-weight: bold;
   color: #ffffffdf;
   background-color: #0a0a0a91;
   transition: all 0.3s ease-in-out;
}
@media (max-width: 1128px)  {
   .TileTitle {
      top: calc(-25vw - 36px);
      font-size: 18px;
   }
}
@media (max-width: 768px)  {
   .TileTitle {
      top: calc(-25vw - 28px);
      font-size: 12px;
   }
}
@media (max-width: 480px)  {
   .TileTitle {
      top: calc(-25vw - 20px);
      font-size: 8px;
   }
}
@media (max-width: 415px)  {
   .TileTitle {
      top: calc(-50vw - 40px);
   }
}



.TileSlider {
   position: relative;
   left: -26vw;
   top: calc( -25vw - 48px );
                              top: -25vw;
   width: 100%;
   height: 5vw;
      /* height: 100%; */
   padding: 10vw 0px;
   text-align: center;
   background: #1b1b1b7a;
   transition: all 0.3s ease;
   cursor: pointer;
}

.TileLink {
   vertical-align: middle;
   text-align: center;
   padding: 10px;
   font-size: 1.90em;
   font-weight: 600;
   color: #ffffff;
   text-decoration: none;
}
@media (max-width: 1128px)  {
   .TileLink {
      font-size: 1.22em;
   }
}
@media (max-width: 768px)  {
   .TileLink {
      font-size: 0.72em;
   }
}
@media (max-width: 480px)  {
   .TileLink {
      font-size: 0.60em;
   }
}
@media (max-width: 415px)  {
   .TileLink {
      font-size: 1.30em;
   }
}


.TileItem:hover .TileSlider {
  left: 0vw;
}
.TileItem:hover .TileTitle {
  top: 0px;
}


/* ---------------------------------------------------------------------------------------- */

.PageDett {
   display: none;
   position: relative;
   top: -25vw;
   left: 0px;
   width: 25vw;
   height: 25vw;
   opacity: 0;
   z-index: 100;
   transition: transform 1s, opacity 0.5s, position 1s, top 1s, left 1s, width 1s, height 1s;
}
.PageDettRotate {
   transform: perspective(100vw) rotateY(180deg);
}

.PageDettArea {
   /* verificare se necessaria */
}

.PageDettArea img {
   width: 100%;
   height: 100%;
}

.PageDettOpen {
   display: block;
   width: 100vw;
   height: 100vw;
   border-top: 1px solid #464646;
   border-bottom: 1px solid #464646;
   opacity: 1;
   transition: transform 1s, opacity 0.5s, position 1s, top 1s, left 1s, width 1s, height 1s;
}

.PageDettOpen1  { transform: translate(    0,     0); height: 200vw; }
.PageDettOpen2  { transform: translate(-25vw,     0); }
.PageDettOpen3  { transform: translate(-50vw,     0); }
.PageDettOpen4  { transform: translate(-75vw,     0); }
.PageDettOpen5  { transform: translate(    0, -25vw); }
.PageDettOpen6  { transform: translate(-25vw, -25vw); }
.PageDettOpen7  { transform: translate(-50vw, -25vw); }
.PageDettOpen8  { transform: translate(-75vw, -25vw); }
.PageDettOpen9  { transform: translate(    0, -50vw); }
.PageDettOpen10 { transform: translate(-25vw, -50vw); }
.PageDettOpen11 { transform: translate(-50vw, -50vw); }
.PageDettOpen12 { transform: translate(-75vw, -50vw); }
.PageDettOpen13 { transform: translate(    0, -75vw); }
.PageDettOpen14 { transform: translate(-25vw, -75vw); }
.PageDettOpen15 { transform: translate(-50vw, -75vw); }
.PageDettOpen16 { transform: translate(-75vw, -75vw); }

.PageDettOpen99 { transform: translate(    0,     0); height: auto; }

.PageDettContacts {
   width: 100vw;
   height: 73vw;
   padding: 20px;
   background-color: white;

   background-image: url("../img/SfondoContatti.webp");
   background-size: cover;
   background-position: center right;
}

.PageDettContactsTitle {
   font-size: 26px;
   font-weight: bold;
   margin-bottom: 28px;
}

.PageDettContactsField {
   width: 50vw;
   padding: 11px 19px;
   margin-bottom: 22px;
   font-family: 'Open Sans', sans-serif;
   font-size: 16px;
   background-color: #ffffffeb;
   border: 1px solid #b2b2b2;
   border-radius: 3px;
}
.PageDettContactsArea {
   width: 75vw;
   height: 25vw;
}

.PageDettContactsButton {
   padding: 11px 51px;
   font-size: 17px;
   font-weight: bold;
   border: none;
   color: #fff !important;
   background-color: #498F80;
   cursor: pointer;
}

@media (max-width: 1128px)  {
   .PageDettContacts {
      height: 72vw;
   }
   .PageDettContactsField {
      margin-bottom: 14px;
   }
}
@media (max-width: 768px)  {
   .PageDettContacts {
      height: 68vw;
   }
   .PageDettContactsTitle {
      font-size: 18px;
      margin-bottom: 8px;
   }
   .PageDettContactsField {
      padding: 4px 19px;
      margin-bottom: 5px;
      font-size: 15px;
   }
   .PageDettContactsButton {
      padding: 8px 42px;
      margin-top: 5px;
   }
}
@media (max-width: 480px)  {
   .PageDettContacts {
      height: 66vw;
   }
   .PageDettContactsTitle {
      font-size: 16px;
      margin-bottom: 8px;
   }
   .PageDettContactsField {
      padding: 3px 9px;
      margin-bottom: 4px;
      font-size: 13px;
   }
   .PageDettContactsButton {
      padding: 4px 34px;
      margin-top: 2px;
      font-size: 15px;
   }
}
@media (max-width: 415px)  {
   .PageDettContacts {
      height: 100vw;
   }
}



/* ---------------------------------------------------------------------------------------- */

.FooterBar {
   padding: 36px 60px 30px 60px;
   font-family: 'Montserrat', sans-serif;
   font-size: 12px;
   color: #ffffff;
   background-color: #0c0c0c;
   clear: both;
   overflow: auto;
}

.FooterBox {
   float: left;
   width: calc( ( 100% / 3 ) - 60px );
}

.FooterBox:not(:first-of-type) {
   margin-left: 90px;
}

.FooterBox div {
   margin: 4px 0;
}
.FooterBox h3 {
   margin: 0 0 14px 0;
   font-size: 16px;
   font-weight: bold;
   border-bottom: 1px solid #878787;
}

.FooterBoxLink {
   cursor: pointer;
}

.Footerlogo {
   width:68px;
   height: auto;
   margin-bottom: 10px;
}


@media (max-width: 1128px)  {
   .FooterBar {
      padding: 39px 48px;
   }
   .FooterBox {
      width: calc( ( 100% / 3 ) - 30px );
   }
   .FooterBox:not(:first-of-type) {
      margin-left: 40px;
   }
   .Footerlogo {
      width:57px;
   }
}
@media (max-width: 768px)  {
   .FooterBar {
      padding: 30px 37px;
   }
   .FooterBox {
      display: block;
      float: none;
      width: 100%;
   }
   .FooterBox:not(:first-of-type) {
      margin-left: unset;
      margin-top: 30px;
   }
   .Footerlogo {
      width:46px;
   }
}
@media (max-width: 480px)  {
   .FooterBar {
      padding: 22px 26px;
   }
   .Footerlogo {
      width:36px;
   }
}
@media (max-width: 415px)  {
   .FooterBar {
      padding: 22px 18px;
   }
   .Footerlogo {
      width:52px;
   }
}


/* ---------------------------------------------------------------------------------------- */

#MenuBar {
   display: inline-block;
   position: absolute;
   top: -25vw;
   left: 25vw;
   width: 75vw;
   height: calc( 25vw - 54px );
   padding: 27px 46px;
   background-color: #000000db;
   transition: all 0.45s ease;
   z-index: 50;
}
.MenuBarVisible {
   top: 75px !important;
}

.MenuItem {
   font-size: 22px;
   font-weight: bold;
   max-width: 26vw;
   color: #d6d6d6;
   margin-bottom: 10px;
   cursor: pointer;
}
.MenuItem:hover {
   color: #FFFFFF;
}

.MenuItemSelected {
   color: #24c124;
}
.MenuItemSelected:hover {
   color: #7fe67f;
}

@media (max-width: 1128px)  {
   #MenuBar {
      padding: 27px 32px;
   }
   .MenuBarVisible {
      top: 58px !important;
   }
   .MenuItem {
      font-size: 15px;
      margin-bottom: 8px;
   }
}
@media (max-width: 768px)  {
   #MenuBar {
      height: calc( 25vw - 16px );
      padding: 8px 20px;
   }
   .MenuBarVisible {
      top: 45px !important;
   }
   .MenuItem {
      font-size: 12px;
      margin-bottom: 4px;
   }
}
@media (max-width: 480px)  {
   #MenuBar {
      height: calc( 25vw - 4px );
      padding: 2px 14px;
   }
   .MenuBarVisible {
      top: 33px !important;
   }
   .MenuItem {
      font-size: 9px;
      margin-bottom: 2px;
   }
}
@media (max-width: 415px)  {
   #MenuBar {
      top: -50vw;
      left: 50vw;
      width: 50vw;
      height: calc( 50vw - 24px );
      padding: 15px 14px;
   }
   .MenuBarVisible {
      top: 46px !important;
   }
   .MenuItem {
      font-size: 12px;
      margin-bottom: 4px;
      max-width: 38vw;
   }
}





/* ---------------------------------------------------------------------------------------- */


@media (max-width: 415px)  {
   .TileItem {
      width: 50vw;
      height: 50vw;
   }

   .TileBox {
      width: 50vw;
      height: 50vw;
   }

   .TileSlider {
      top: -50vw !important;
      left: -50vw;
      width: 50vw;
      height: 50vw;
      padding: 20vw 0px;
   }

   .PageDett {
      top: -50vw;
      left: 0vw;
      width: 50vw;
      height: 50vw;
   }

   .PageDettArea img {
      width: 100vw;
      height: 100vw;
   }

   .PageDettOpen1 .PageDettArea img {
      width: 100vw;
      height: 200vw;
   }

   .PageDettOpen1  { transform: translate(    0, -50vw); }
   .PageDettOpen2  { transform: translate(-50vw,     0); }
   .PageDettOpen3  { transform: translate(    0, -50vw); }
   .PageDettOpen4  { transform: translate(-50vw, -50vw); }
   .PageDettOpen5  { transform: translate(    0,     0); }
   .PageDettOpen6  { transform: translate(-50vw,     0); }
   .PageDettOpen7  { transform: translate(    0, -50vw); }
   .PageDettOpen8  { transform: translate(-50vw, -50vw); }
   .PageDettOpen9  { transform: translate(    0,     0); }
   .PageDettOpen10 { transform: translate(-50vw,     0); }
   .PageDettOpen11 { transform: translate(    0, -50vw); }
   .PageDettOpen12 { transform: translate(-50vw, -50vw); }
   .PageDettOpen13 { transform: translate(    0,     0); }
   .PageDettOpen14 { transform: translate(-50vw,     0); }
   .PageDettOpen15 { transform: translate(    0, -50vw); }
   .PageDettOpen16 { transform: translate(-50vw, -50vw); }

   .PageDettOpen99 { transform: translate(    0, -50vw); }



}