body{
  background-color: white;
}
* {
  box-sizing: border-box;
}
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@font-face {
  font-family: 'helvetica-bold';
  src: url(/Users/macbookpro/Documents/Miriam15/Font/Helvetica-Font/Helvetica-Bold.ttf);
  
}
@font-face {
 font-family: 'helvetica';
  src: url(/Users/macbookpro/Documents/Miriam15/Font/Helvetica-Font/Helvetica.ttf);
}
/*
@font-face {
    -webkit-font-family: 'Viki';
  src: url(/Users/macbookpro/Documents/Miriam15/NABA/Front-end/fed23miriam/Font/Specimen/Viki-Regular-4.otf);
}
*/

/*
@font-face {
    font-family: 'Viki';
    src: url(/Users/macbookpro/Documents/Miriam15/NABA/Front-end/fed23miriam/Font/Specimen/transfonter.org-20230706-091730/VikiRegular.eot);
    src: url(/Users/macbookpro/Documents/Miriam15/NABA/Front-end/fed23miriam/Font/Specimen/transfonter.org-20230706-091730/VikiRegular.eot?#iefix') format('embedded-opentype'),
        url(/Users/macbookpro/Documents/Miriam15/NABA/Front-end/fed23miriam/Font/Specimen/transfonter.org-20230706-091730/VikiRegular.woff2) format('woff2'),
        url(/Users/macbookpro/Documents/Miriam15/NABA/Front-end/fed23miriam/Font/Specimen/transfonter.org-20230706-091730/VikiRegular.woff) format('woff'),
        url(/Users/macbookpro/Documents/Miriam15/NABA/Front-end/fed23miriam/Font/Specimen/transfonter.org-20230706-091730/VikiRegular.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
}
*/
@font-face {
    font-family: 'Viki';
   src: url('VikiRegular.eot');
   src: local('VikiRegular'),
  url('VikiRegular.eot?#iefix')format('embedded-opentype'),
        url('VikiRegular.woff2')format('woff2'),
        url('VikiRegular.woff')format('woff'),
        url('VikiRegular.ttf')format('truetype');
    font-weight: normal;
    font-style: normal;
}
 

body{
  background-color: white;
  margin: 0;
}

.linee-orizzontali div {
  border-bottom: 1px solid silver;
  height: calc(150px/2);  
}
.linee-orizzontali div:nth-child(even) {
  height: calc(221px/2);
}
.linee-verticali {
  display: flex;
  height: 100vh;
  position: fixed;
  top: 0;
}
.linee-verticali div {
  border-right: 1px solid silver;
  width: 50px;
  height: 100vh;
}
.linee-verticali div.box1 {
  width: calc(222px/2);  
}
.linee-verticali div.box2 {
  /*width: 15.5vw;*/
  width: calc(297px/2);  
}
.moduli {
  /*top: calc(150px/2);
  left: calc(2000px/2);*/
  background-color: orange;
  width: calc(519px/2);
  height: calc(220px/2)
}
.modulidue {
  background-color: mediumpurple;
  height: calc(222px/2);
  width: calc(297px/2)
}
.due {
  position: absolute;
  top: 20%;
  left: 78%;
  /*top: calc(150px/2);
  left: calc(2000px/2);*/
}


.tre {
  position: absolute;
  top: 45%;
  left: 25%;
  transform: rotate(90deg);
  /*top: calc(150px/2);
  left: calc(2000px/2);*/
}

.quattro {
  position: absolute;
  top: 30%;
  left: 7%;
  /*top: calc(150px/2);
  left: calc(2000px/2);*/
}

.cinque {
  position: absolute;
  top: 171%;
  left: 0%;
}
.sei {
  position: absolute;
  top: 70%;
  left: 90%;
}
.sette {
  position: absolute;
  top: 90%;
  left: 0%;
}
.otto {
  position: absolute;
  top: 240%;
  left: 82%;
}


.logo {
  position: fixed;
  top: 5px;
  left: 10px;
  width: 90px;
  height: 80px;
}
.header {
  width: 500pxpx;
  height: 80px;
  border: none;
  position: fixed;
  z-index: 1;
  top: 25px;
  /*left: 395px;*/
  left: 460px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  column-gap: 47px;
  background-color: whitesmoke;
  padding: 4px;
}

.btn {
  font-family: 'helvetica-bold';  
  font-size: 1em;
  text-align: center;
  text-decoration: none;
  border: none;
  background-color: none;
  color: #000000;
  padding: 30px 30px;
  cursor: pointer;
  display: inline-block;
  
}

/*
.btn2 {
  font-family: 'helvetica-bold';  
  font-size: 1em;
  text-align: center;
  border: none;
  background-color: inherit;
  color: #000000;
  padding: 10px 10px;
  cursor: pointer;
  display: inline-block;
  
}
*/

/*
a[ id= "descLink"]:target ~ #btn1 section.btn1 {}
a[ id= "descLink1"]:target ~ #btn2 section.btn2 {}
*/
/*
#concept {
box-sizing: border-box;
*/
/*position: absolute;
left: 610px;
top: 20px;*/
}
.alphabet {
/*position: absolute;
left: 760px;
top: 20px;*/}
.visual {
/*position: absolute;
left: 880px;
top: 20px;*/
}

.btn:hover {
color: orange;
}
.btn2,
.attivo {
color: orange;
}

/*
.btn2:hover {
border-radius: 10%;
border: 1px solid black;
color: orange;
}
*/
 .testo {
  font-family: 'Viki';
  font-size: 5em;
   font-weight: normal;
   font-style: normal;
}
/*.uno{
  position: absolute;
  top: calc(150px/2);
  left: calc(1260px/2);
}*/
.oggetti {
/*
  display: flex;
  column-gap: 300px;
  flex-wrap: wrap;
*/
  position: absolute;
  top: 200px;
  left: 13px;
}
.movete {
  font-family: 'Viki';
  font-size: 20em;
  cursor: pointer;
position: absolute;
  top: 0;
} 
@-webkit-keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
@keyframes hvr-pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}
.hvr-pulse {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  
}
.hvr-pulse:hover, .hvr-pulse:focus, .hvr-pulse:active {
  -webkit-animation-name: hvr-pulse;
  animation-name: hvr-pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  color: mediumpurple;
}
.oggetti #oggettoMobile1 {}
.oggetti #oggettoMobile2 {left: 440px;}
.oggetti #oggettoMobile3 {left: 840px;}
.oggetti #oggettoMobile4 {left: 1240px;}

.testo {
    display: flex;
    position: absolute;
  top: 550px;
  left: 630px;
  /*width: 768px;*/
  width: 500px;
  height: 72px;
  font-family: 'helvetica'; 
  font-size: 1em;
  color: darkgray;
  text-align: justify;
}


.table { 
  display: flex;
  flex-wrap: wrap;
  border: none;
  font-family: 'Viki';
  font-size: 4em;
  max-width: 800px;
  position: absolute;
  /*top: 742px;*/
  top: 927px;
  left: 258px;
}
.cella {
  border: 1px solid orange;
  box-sizing: border-box;
  flex: 0 0 16%;
  padding: 10px 10px;
  text-align: center;
  cursor: pointer;
   background-color: whitesmoke;

  /*margin-right: calc(100% - (16% + 6)/ 4);
  margin-bottom: calc(100% - (16%+6)/ 4);*/ 
}

.cella-a {
  border: 1px solid orange;
  box-sizing: border-box; 
  padding: 10px 10px;
  text-align: center;
  cursor: pointer;
   background: whitesmoke;
}

.cella2-A {
  border: 1px solid mediumpurple;
  box-sizing: border-box; 
  padding: 10px 10px;
  text-align: center;
  cursor: pointer;
   background: whitesmoke;
}
/*.cellap {
  border: 1px solid mediumpurple;
  padding: 20px;
  font-family: 'Viki';
  font-size: 5em;
  box-sizing: border-box;
  display: none;
  background-color: whitesmoke;
  position: relative;
  left: -50px;
    pointer-events: none;
}*/

.cella-a:hover  {
  display: block; 
  background-position: 50% ;
  font-size: 5em;
  font-family: 'Viki';
}

.cella2-A:hover  {
  display: block; 
  background-position: 50% ;
  font-size: 5em;
  font-family: 'Viki';
}

@keyframes up-bump {
  0% { padding-top: 2em; }
  50% { padding-top: 1.5em; }
  100% { padding-top: 2em; }
}
@keyframes down-bump {
  0% { padding-top: 2em; }
  50% { padding-top: 2.5em; }
  100% { padding-top: 2em; }
}
/*.cella: hover + .cellap {
  border: 1px solid mediumpurple;
  box-sizing: border-box;
  padding: 10px 10px;
  font-size: 3em;
} /*non funziona*/

.table2 {
  display: flex;
  flex-wrap: wrap;
  border: none;
  font-family: 'Viki';
  font-size: 4em;
  max-width: 800px;
  position: absolute;
  /*top: 742px;*/
  top: 1482px;
  left: 519px;;
}
.cella2 {
  border: 1px solid mediumpurple;
  box-sizing: border-box;
  flex: 0 0 16%;
  padding: 10px 10px;
  text-align: center;
  cursor: pointer;
  background-color: whitesmoke;
}

/*
.carosello {
  position: absolute;
  top: 2040px;
  left: 260px;
  box-sizing: border-box;
  border: 5px solid orange;
  overflow-x: scroll;

}
*/

.fox {
  position: absolute;
  top:2100px;
  left: 100px;
  width: 600px;
  height: 400px;
  box-sizing: border-box;
  border: 3px solid mediumpurple;
}

.slider-container {
    width: 770px;
    height: 500px;
    background-color: whitesmoke;
   position: absolute;
  top: 2600px;
  left: 500px;
/*    text-align: center;*/
    overflow: hidden;
  box-sizing: border-box;
  border: 3px solid orange;
}

.image-container {
/*
    width: 770px;
    height: 500px;
*/
    width: 2400px;
    height: 500px;
/*    clear: both;*/
    position: relative;
   
    -webkit-transition: left 2s;
    -moz-transition: left 2s;
    -o-transition: left 2s;
    transition: left 2s;
}

#slider-image-1:target~.image-container
{
   left: 0px;
  display: block;
}
#slider-image-2:target~.image-container
{
   left: -780px;
  display: block;
}
#slider-image-3:target~.image-container
{
   left: -1540px;
  display: block;
}
.button-container
{
	position: relative;
	top: -40px;
  left: 50%
}
.slider-change{
	display: inline-block;
	height: 10px;
	width: 10px;
	border-radius: 5px;
	background-color: orange;
}
.slider-image1{
  width: 770px;
  height: 500px;
}
.slider-image2{
  width: 770px;
  height: 500px;
}
.slider-image3{
  width: 770px;
  height: 500px;
}

.footer {
 font-family: 'helvetica'; 
  font-size: 1em;
  color: darkgray;
  text-align: center;
  position: absolute;
  bottom:end;
  left:362px;
}

/*
.photo1 {
  position: absolute;
  top: 2040px;
  left: 260px;
  box-sizing: border-box;
  border: 5px solid orange;

}

.photo2 {
  position: absolute;
  top: 2040px;
  left: 260px;
  box-sizing: border-box;
  border: 5px solid orange;
}
*/


/*
@media screen and (max-width: 480px) {
  .testo {
    position: absolute;
  top: 550px;
  left: 630px;
  width: 8px;
  height: 72px;
    font-family: 'helvetica'; 
    font-size: 1em;
  color: darkgray;
  text-align: justify;

  }
}*/

/*
togliere sottolineatura

text-decoration



*/
html {
  scroll-behavior: smooth;}