@font-face {
  font-family: 'SometimesTimes';
  src:  url('fonts/SometimesTimes.ttf') format('truetype');
  }
  @font-face {
    font-family: Compacta-Schwarz;
    src: url("fonts/CompactaLTStd-Black.otf") format("opentype");
}
#mobilead{
	display:none;
	background-color:#ADB7C5;width: 100vw;height: 100vh;position: fixed;top: 0px;left: 0px;z-index: 999;
}
html, body {
	width: 100%;
    margin: 0;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    overflow-x: hidden;
}
iframe#iframemayu {
    width: 100vw;
    border: none;
    height: 100vh;
    overflow: scroll;
}
::-webkit-scrollbar {
    display: none;
}
.asterisk2:after {
    content: "*";
    position: absolute;
    left: 2px;
    top: 2px;
    color: white;
    z-index: -1;
    opacity: 0.3;
}
.intro{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 35%;
  height:70%;
  font-family: SometimesTimes;
  font-size: 1.3em;
  overflow: scroll;
  color: #B693FF;

}
/* COLOPHON */
.colo {
      position: absolute;
      color: black;
      border: 0.1vw solid black;
      font-size: 2.5vw;
      text-align: center;
      padding: 1vw;
      bottom: -3%;
      left: 1vw;
      font-family: SometimesTimes;
      background-color: #d5cfe8;
      }
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background-color: #b55D03;;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 1vh;
}
.sidenav a {
  padding: 8px 8px 8px 8px;
  text-decoration: none;
  font-size: 15em;
  color: white;
  display: block;
  transition: 0.3s;
}
.sidenav .closebtn {
  position: absolute;
  top: -0.3em;
  right: 25px;
  font-size: 14em;
  font-family: SometimesTimes;
}
.imprint{
color: white;
text-align: center;
padding: 1em;
font-family: SometimesTimes;
}
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  margin-top: -1.4em;
}
.grid-item {
  margin: 0.2em;
  text-align: center;
}
/* COLOPHON */

.oneopen, .twoopen, .threeopen, .fouropen, .fiveopen, .sixopen, .eightopen, .sevenopen, .nineopen, .tenopen, .elevenopen  {
	position:absolute
}
.lumin{background: #E5E8ED;
	width: 100vw;
    height: 90vh;
    margin-top: 10vh;}
.lumin .back, .lumin .backmenu{display: none;
max-height: 100%}
.lumin .backmenu{    display: none;
    position: absolute;
    top: 20vh;
    left: 40vw;}
#lumiplayer{
	 display: none;
    position: absolute;
	width:40vw;
    top: 20vh;
    right: 5vw;
}
.lumin .backmenu .menuitme{    height: 25px;
    line-height: 25px;
    height: 25px;
    font-family: 'SometimesTimes';
    cursor: pointer;
    font-size: 20px;
    color: #b55d03;
}
.lumin .back{	cursor: pointer;
	    max-height: 100vh;
}
.lumin .front{
	cursor: pointer;
max-height: 100%;
left: 0px;
	    max-height: 100vh;
    position: absolute;}
.twoopen{
	overflow:hidden
}
.lentini0  {
    position: relative;
    height: auto;
    display: flex;
}
.lentinicont {
      display: block;
    width: calc(90vh * 1.5);
    height: 90vh;
    left: calc(calc(100vw - calc(90vh * 1.5)) / 2);
    position: absolute;
}
.lentini00{
	    background: url(CammaratLentini/lentini000.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100vw;
    height: 90vh;
    background-position: center;
    background-color: #181818;
    margin-top: 10vh;
}
.lentini001,.lentini002,.lentini01, .lentini02, .lentini03, .lentini04, .lentini05, .lentini06{
	position: relative;
	display: flex;
}
.lentimg{position: absolute;
}
.lentimg img:hover{
	width: 400px;
}
.lent0a, .lent02a, .lent03a, .lent04a, .lent05a, .lent06a, .lent07a, .lent08a, .lent09a, .lent10a, .lent11a, .lent12a{
	       margin: auto;
    display: none;
    z-index: 999;
    position: relative;
      width: 75vh;
    height: 75vh;
}

.lent0e{
    bottom: 0px;
    position: absolute;

}
.lent0b{
    bottom: 0px;
    position: absolute;
}
.lent0c{
    bottom: 0px;
    position: absolute;
}
.lent0d{
     bottom: 0px;
    position: absolute;
}
.lentimg img {

  width: 100%;
	transition: 1s;
    height: auto;
}
.lenttext{
  font-family: 'Roboto', sans-serif;
    font-size: 7vh;
	color:#b693ff;
	position: absolute;
    /* top: 15vh;
    left: 30vw; */
}.lent0{
  font-family: 'Roboto', sans-serif;
    font-size: 7vh;
	color:#b693ff;
	position: absolute;
	top: 10vh;
	left: 10vh;
	cursor: pointer;
	z-index: 999;

}.lent01{
   font-family: 'Roboto', sans-serif;
    font-size: 5vh;
    color: #444348;
    position: absolute;
    top: 16%;
    left: 13%;
    cursor: pointer;
    z-index: 20;
}
.lent02{
   top: 32%;
    left: 4%;
   font-family: 'Roboto', sans-serif;
    font-size: 5vh;
    color: #444348;
    position: absolute;
    cursor: pointer;
    z-index: 20;
}
.lent03{
      font-family: 'Roboto', sans-serif;
    font-size: 5vh;
    color: #444348;
position: absolute;
    top: 49%;
    left: 22%;
    cursor: pointer;
    z-index: 20;
}
.lent04{
      font-family: 'Roboto', sans-serif;
    font-size: 5vh;
    color: #444348;
       position: absolute;
    top: 67%;
    left: 4%;
    cursor: pointer;
    z-index: 20;
}
.lent05{
      font-family: 'Roboto', sans-serif;
    font-size: 5vh;
    color: #444348;
   position: absolute;
    bottom:6%;
    left: 13%;
    cursor: pointer;
    z-index: 20;
}
.lent06{
     font-family: 'Roboto', sans-serif;
    font-size: 5vh;
    color: #444348;
    position: absolute;
   bottom:5%;
    left: 34%;
    cursor: pointer;
    z-index: 20;
}
.lent07{
     font-family: 'Roboto', sans-serif;
    font-size: 5vh;
    color: #444348;
       position: absolute;
    top: 8vh;
    right: 32vh;
    cursor: pointer;
    z-index: 20;
}
.lent08{
    font-family: 'Roboto', sans-serif;
    font-size: 5vh;
    color: #444348;
       position: absolute;
    top: 26vh;
    right: 19vh;
    cursor: pointer;
    z-index: 20;
}
.lent09{  font-family: 'Roboto', sans-serif;
    font-size: 5vh;
    color: #444348;
    position: absolute;
       top: 45vh;
    right: 32vh;
    cursor: pointer;
    z-index: 20;
}
.lent10{  font-family: 'Roboto', sans-serif;
    font-size: 5vh;
    color: #444348;
    position: absolute;
    top: 45vh;
    right: 6vh;
    cursor: pointer;
    z-index: 20;
}
.lent11{
	  font-family: 'Roboto', sans-serif;
    font-size: 5vh;
    color: #444348;
    position: absolute;
    bottom: 23vh;
    right: 56vh;
    cursor: pointer;
    z-index: 20;

}
.lent12{  font-family: 'Roboto', sans-serif;
    font-size: 5vh;
    color: #444348;
    position: absolute;
    bottom: 23vh;
right: 32vh;
    cursor: pointer;
    z-index: 20;
}
.titlefede{
	position: 	absolute;
	top: 0;
	height: 10vh;
	width: 100vw;
	z-index: 8
}
.asterisk2:after { content: "*"; position: absolute; left: 2px; top: 2px; color: #fff; z-index: -1;}
.asterisk2:hover{cursor:pointer}

.text2ask{
	opacity:0;
	z-index: 0;
	position: fixed;
	right:6vw;
	top:27vh;
	width:300px;
	height:400px;
	transition: 1s;
  overflow: scroll;
  background-color: #ADB7C5;
  box-shadow: 5px 10px 18px #888888;
  padding: 1%;
  font-family: SometimesTimes;
}
.text2ask{
    -webkit-transform: rotate(45deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(45deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(45deg);  /* IE 9 */
    -o-transform: rotate(45deg);  /* Opera 10.50-12.00 */
    transform: rotate(45deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */
}
#image1, #image2{
  position:absolute;
  top:0px;
  left:0px;
}

.prefacecont {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    z-index: 7;
	display: flex;
    align-items: center;
}
.prefacecont p{    font-size: 24px;
    line-height: 30px;}
.oneopen .prefacecont{
	    background: black;
}
.twoopen .prefacecont{
	    background: #b55d03;
}
.threeopen .prefacecont {
    background: #181818;
    z-index: 21;
}
.threeopen .titlefede {
    z-index: 22;
}
.fouropen .prefacecont{
	    background: #adb7c5;
}
.fiveopen .prefacecont{
	    background: #000;
}
.sixopen .prefacecont{
	    background: #ADB7C5;
}
.sevenopen .prefacecont{
	    background: #000;
}
.eightopen .prefacecont{
	    background: #ADB7C5;
}
.nineopen .prefacecont{
	    background: #f2f2f2;
}
.tenopen .prefacecont{
	    background: #E5E8ED;
}
.elevenopen .prefacecont{
	    background: #000;
}
.preface{
width:70%;
position:relative;
left:15%;
}
.column {
  float: left;
  width: 50%;
  padding: 1vh;
  height:40vh;
  overflow: scroll;
  font-family: SometimesTimes;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
#myDIV {
position: fixed;
top: 0;
left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: #6A86F1;
  cursor: pointer;
  align-content: center;
  z-index: 10;
}
#myDIV2{
	position: fixed;
top: 0;
left: 0;
	  width: 100vw;
  height: 100vh;
	background-color: #6A86F1;
	cursor: pointer
}
.cammarataint{
	width: 100vw;
	 height: 90vh;
    margin-top: 10vh;
	    background: #b55d03;
}
.motellaro{
background-color: #ADB7C5;
display: flex;
    height: 90vh;
    margin-top: 10vh;
}
video:active,
video:focus {
    outline: none;
}

.ferraraberti img {
    width: auto;
    height: 100vh;
    z-index: 3;
	left:calc(calc(calc(100vh * -1.77) / 2) + 50vw) !important;
}
.ferrarabertiint{
	width:100vw;
	height: 90vh;
	margin-top:10vh;
	z-index: 4;
	background-image: url("Ferrara+Berti/michelangelo2.png");
	background-size: cover;
}
.motellaroint{
		width: 65vw;
    margin: auto;
webkit-animation: breathing 5s ease-out infinite normal;
    animation: breathing 5s ease-out infinite normal;
}

@-webkit-keyframes breathing {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

  25% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  60% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@keyframes breathing {
  0% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }

  25% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  60% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }

  100% {
    -webkit-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.motellaro img {
    max-width: 100%;
}
.pandemos{
font-size: 20vh;
font-family: Compacta-Schwarz;
position: fixed;
text-align: center;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
color: #B693FF;
}

.rotated {
    -webkit-transform: rotate(45deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(45deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(45deg);  /* IE 9 */
    -o-transform: rotate(45deg);  /* Opera 10.50-12.00 */
    transform: rotate(45deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */
}
.rotated2 {
	z-index: 999;
	opacity:1;
    -webkit-transform: rotate(0deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(0deg);  /* Firefox 3.5-15 */
    -ms-transform: rotate(0deg);  /* IE 9 */
    -o-transform: rotate(0deg);  /* Opera 10.50-12.00 */
    transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera 12.10+ */
	transition: 1s;
}

.asterisk {
  font-family: SometimesTimes;
  color: #B693FF;
  position: fixed;
  top: 21%;
  left: 77%;
    height: 150px;
    width: 150px;
    z-index: 10;
    font-size: 40vh;
	height: 200px;
    transition: all 1s linear;
        -moz-transition: all 1s linear;
        -webkit-transition: all 1s linear;
}
.asterisk:hover {
        transform:  rotate(360deg);
}
.asterisk2{
	height: 200px;
  font-family: SometimesTimes;
  position: fixed;
  z-index: 10;
  top: -2vh;
  left: 80%;
  z-index: 9;
  font-size: 50vh;
  transition: all 1s linear;
      -moz-transition: all 1s linear;
      -webkit-transition: all 1s linear;
}
/* .asterisk2:hover {
        transform:  rotate(360deg) ;
} */

.main {
margin: auto;
}

.row {
	width: 100%;
display: flex;
    line-height: 8.5vh;
 }
 .text_sometimes {
	 font-family: SometimesTimes;
	 font-size: 5.8vh;
 }
 .text_compacta {
  font-family: Compacta-Schwarz;
	font-size: 6.5vh;
 }
.text_compactafede {
    position: relative;
    display: inline-block;
}
 .text_compacta:hover {
   display:hidden;
 }
.title{
  justify-content:center;
  align-content: center;
}
.one{
padding-left: 17%;
}
.two{
padding-left: 32%;
}
.three{
padding-left: 37%;
}
.four{
padding-left: 24%;
}
.five{
padding-left: 36%;
}
.six{
padding-left: 18%;
}
.seven{
padding-left: 42%;
}
.eight{
padding-left: 38%;
}
.nine{
padding-left: 18%;
}
.ten{
padding-left: 30%;
}
.eleven{
padding-left: 20%;
}
.row{
	cursor: pointer;
	background-size:300%;
	background-position-x:0%;
	background-position-y:0%;
}

.final{
	display:none;
	width:100vw;
	height: 100vh;
}
.close{
	    display: inline-block;
    position: relative;
    font-size: 8vh;
    left: 1%;
    font-family: SometimesTimes;
    width: 10vw;
	cursor: pointer
}
.text_compacta{}
 @keyframes mymove {
  from {top: 0px;}
  to {top: 200px;}
}

/* OLI BONZANIGO */
iframe#frameoli {
    width: 100vw;
    border: none;
    height: 90vh;
    margin-top: 10vh;
}
.nineopen{
  font-family: SometimesTimes;
  font-size: 10vh;
  background-color: #adb7c5;
}
/* MARIANNA MARUYAMA */
.sixopen{
  /* font-family: SometimesTimes; */
  /* font-size: 10vh; */
  background-color: #adb7c5;
  position: absolute;
}
mark {
background-color: #B693FF;
color: white;
}
.part0 {
    position: relative;
    left: 20%;
    width: 80%;
}
.italianomm.ita {
    position: absolute;
    top: 20vh;
    left: 65vw;
}
.englishmm.ita {
    position: absolute;
	display: none;
    top: 20vh;
    left: 65vw;
}
.ita{
	cursor: pointer;
  position: relative;
  left: 68%;
  width: 10%;
  padding: 1em;
  background-color: #B693FF;
  color: lightgrey;
  border-radius: 2em 2em 2em 2em;
  font-family: Compacta-Schwarz;
  font-size: 1.5em;
  text-align: center;
}
.ita:hover{
  background-color:  #adb7c5;
  color: #B693FF;
transition: 2s ease-in-out;
}
.part1{
  position: relative;
  left: 10%;
  width: 40%;
  line-height: 1.2em;
  margin-top: 0em;
  text-align: left;
  font-family: Helvetica;
  font-weight: normal;
  font-size: 1.25em;
  color: rgba(0,0,0,1);
  letter-spacing: 0.015em;
}
.part2{
  position: relative;
  left: 40%;
  width: 40%;
  line-height: 1.2em;
  margin-top: 0em;
  text-align: left;
  font-family: Helvetica;
  margin-bottom: 10vh;
  font-weight: normal;
  font-size: 1.25em;
  color: rgba(0,0,0,1);
  letter-spacing: 0.015em;
}
.part3{
  position: relative;
  left: 10%;
  width: 40%;
  line-height: 1.2em;
  margin-top: 0em;
  text-align: left;
  font-family: Helvetica;
  margin-bottom: 10vh;
  font-weight: normal;
  font-size: 1.25em;
  color: rgba(0,0,0,1);
  letter-spacing: 0.015em;
}
.part4{
  position: relative;
  left: 40%;
  width: 40%;
  line-height: 1.2em;
  margin-top: 0em;
  text-align: left;
  font-family: Helvetica;
  margin-bottom: 10vh;
  font-weight: normal;
  font-size: 1.25em;
  color: rgba(0,0,0,1);
  letter-spacing: 0.015em;
}
  .part5{
    position: relative;
    left: 10%;
    width: 40%;
    line-height: 1.2em;
    margin-top: 0em;
    text-align: left;
    font-family: Helvetica;
    margin-bottom: 10vh;
    font-weight: normal;
    font-size: 1.25em;
    color: rgba(0,0,0,1);
    letter-spacing: 0.015em;
}
.compactamarianna{
  font-family:Compacta-Schwarz;font-style:normal;font-weight:normal;font-size:22px;
}
.titleopen{
  font-family: SometimesTimes;
  background-color: #d5cfe8;
}
.editorialtxt {
  font-size: 3vh;
  color: #B55D03;
  width: 50%;
  position: relative;
  left: 20%;
  text-align: center;
  letter-spacing: 0.1em;
  margin-top:0; height:85%; overflow: scroll;
}
/* Lina Issa */
.eightopen{
  font-family: SometimesTimes;
  font-size: 10vh;
  background-color: #ADB7C5;
}
.aplacetohold{
  position: relative; left: 10%; top: 5%; font-size: 30vh; line-height: 25vh; color:#B55D03;
}
.aplacetohold:hover{
  opacity: 0;
transition: 2s ease-in-out;
}

/* Allesandro Librio */
.oneopen{
  font-family: SometimesTimes;
  font-size: 10vh;
  background-color: black;
  padding-bottom: 0;
  position: relative;
}
.collin{
    width: 100vw;
    height: 100vh;
    background: url(pics/eliza_coverphoto.jpg);
    background-repeat: no-repeat;
    background-size: cover;}
.playpause{
  position: absolute;
  bottom: 5%;
  left: 5%;
  z-index: 800;

}
button {
  font-family: SometimesTimes;
  background-color: #D5CFE8;;
  border: none;
  color: black;
  padding: 1em 2em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
button:active,
button:focus {
    outline: none;
    color: #D5CFE8;;
}



.pandemosmobile {
    font-size: 2.8em;
    font-family: Compacta-Schwarz;
    position: fixed;
    text-align: center;
    top: 37%;
    left: 3%;
    color: #B693FF;
}

.asteriskmobile {
    font-family: SometimesTimes;
    color: #B693FF;
    position: fixed;
    top: 36%;
    right: 5%;
    height: 50px;
    width: 40px;
    z-index: 10;
    font-size: 20vh;
    transition: all 1s linear;
    -moz-transition: all 1s linear;
    -webkit-transition: all 1s linear;
}

@media only screen and (max-width: 600px) {
#mobilead{display:block}
}
