/* Your app styles here */
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on November 5, 2018 */
@font-face {
  font-family: 'superclarendonbold';
  src: url('../fonts/superclarendon-bold-06-webfont.woff2') format('woff2'),
    url('../fonts/superclarendon-bold-06-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'superclarendonregular';
  src: url('../fonts/superclarendon-regular-01-webfont.woff2') format('woff2'),
    url('../fonts/superclarendon-regular-01-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.md body,
.md .item-title a.item-link,
.ios body,
.ios .item-title a.item-link {
  font-family: 'superclarendonregular';
}

.md .list .item-title,
.ios .list .item-title {
  white-space: normal;
}

h2 {
  color: white;
  font-family: 'superclarendonbold';
}

.md .block-title,
.ios .block-title {
  line-height: 1;
  white-space: normal;
}

.md .home.page[data-name=home],
.md .home.page,
.ios .home.page[data-name=home],
.ios .home.page {
  background: #fff !important;
  /* rgb(233,74,53)*/
  overflow-x: scroll;
}

.md .navbar,
.ios .navbar {
  background: rgb(255, 211, 0, 1) !important;
}

.page .page-content {
  background: #fff;
  /*  background: rgba(234,78,77, 0.2) !important; #ea4e4d*/
  /*#151b3f*/
  /* background-color: rgba(21,27,63, 0.2) !important; */
  background-color: rgb(255, 211, 0, 0.2) !important;
}

/*fbc121*/
.md .navbar .right,
.ios .navbar .right {
  padding: 0.8em;
}

#titolo {
  width: 100%;
  max-width: 500px;
}

#cover {
  width: 100%;
  max-width: 300px;
}

.home .row {
  /* position: relative;
    top: -10vw;*/
}

div.tablet-25:nth-child(2n + 1)>div>a>div,
div.tablet-50:nth-child(2n + 1)>div>a>div {
  background: #ff8bb4;
}

div.tablet-25:nth-child(2n)>div>a>div,
div.tablet-50:nth-child(2n)>div>a>div {
  background: #ffd300;
}

div.tablet-25:nth-child(2n)>div>a>div h2,
div.tablet-50:nth-child(2n)>div>a>div h2 {
  color: #fff;
}

/* Left Panel right border when it is visible by breakpoint */
.panel-left.panel-visible-by-breakpoint:before {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 1px;
  background: rgba(0, 0, 0, 0.1);
  content: '';
  z-index: 6000;
}

/* Hide navbar link which opens left panel when it is visible by breakpoint */
.panel-left.panel-visible-by-breakpoint~.view .navbar .panel-open[data-panel="left"] {
  display: none;
}

/*
  Extra borders for main view and left panel for iOS theme when it behaves as panel (before breakpoint size)
*/
.ios .panel-left:not(.panel-visible-by-breakpoint).panel-active~.view-main:before,
.ios .panel-left:not(.panel-visible-by-breakpoint).panel-closing~.view-main:before {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 1px;
  background: rgba(0, 0, 0, 0.1);
  content: '';
  z-index: 6000;
}

.list li {
  overflow: hidden;
}

/* animation for copy link*/
span.linkanimato {
  position: absolute;
  top: -70px;
  right: 21px;
  display: inline-block;
}

span.linkanimato.copiato {
  animation: slide 2s;
}

@keyframes slide {
  0% {
    top: -70px;
  }

  50% {
    top: 0px;
  }

  100% {
    top: -70px;
  }
}

.hide {
  display: none !important;
}

#app>div.view.view-main>div.page.page-current>div.navbar>div>div.left>a>i {
  padding: 0.5em;
}

/*DADI*/
.button.button-fill.colore {
  background: #6c47c3;
}

.dice-content.multiplidi {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 250px;
  min-width: 250px;
  max-width: 250px;
  margin: 2em;
}

.dice-content {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
}

.dice {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transform: rotateY(5deg) rotateX(360deg) rotateZ(15deg);
  animation: infinite ease 0s 2 rotate;
}

.side {
  width: 100%;
  height: 100%;
  background: #ff8bb4;
  border: 2px solid black;
  position: absolute;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8em;
}

/* config facce*/
.side::before {
  content: "";
  width: 20%;
  height: 20%;
  background: black;
  border-radius: 50%;
  text-transform: uppercase;
}

.base {
  width: 100%;
  height: 100%;
  transform: translateY(73px) rotateX(90deg);
  border: 0;
  background: blue;
}

.one {
  transform: translateZ(100px);
}

.two {
  transform: translateX(-100px) rotateY(-90deg);
}

.two::before {
  background: transparent;
  box-shadow:
    #000 -50px -50px 0px 0px,
    #000 50px 50px 0px 0px;
}

.three {
  transform: translateY(100px) rotateX(90deg);
}

.three::before {
  box-shadow:
    #000 -50px 50px 0px 0px,
    #000 50px -50px 0px 0px;
}

.four {
  transform: translateY(-100px) rotateX(90deg);
}

.four::before {
  background: transparent;
  box-shadow:
    #000 -50px 50px 0px 0px,
    #000 -50px -50px 0px 0px,
    #000 50px 50px 0px 0px,
    #000 50px -50px 0px 0px;
}

.five {
  transform: translateX(100px) rotateY(90deg);
}

.five::before {
  box-shadow:
    #000 -50px -50px 0px 0px,
    #000 -50px 50px 0px 0px,
    #000 50px -50px 0px 0px,
    #000 50px 50px 0px 0px;
}

.six {
  transform: translateZ(-100px);
}

.six::before {
  background: transparent;
  box-shadow:
    #000 -50px -50px 0px 0px,
    #000 -50px 0px 0px 0px,
    #000 -50px 50px 0px 0px,
    #000 50px -50px 0px 0px,
    #000 50px 0px 0px 0px,
    #000 50px 50px 0px 0px;
}

/*DADO DUE*/

#dadodue .side {
  width: 100%;
  height: 100%;
  background: rgb(255, 211, 0, 1);
  border: 2px solid black;
  position: absolute;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:3em;
}

#dadodue div::before {
  transform: translate(-150%, 0%);
}

#dadodue .side::before {
  background: transparent;
  width: 20%;
  height: 20%;
  color: black;
  box-shadow: none;
  font-weight: 800;
  margin: 25% auto;
}

#dadodue .one::before {
  content: "MI";
  transform: translate(-175%, 0%);
}

#dadodue .two::before {
  content: "TI";
}

#dadodue .three::before {
  content: "VI";
  transform: rotateX(180deg) translateX(-200%) translateY(-5%);
}

#dadodue .four::before {
  content: "SI";
}

#dadodue .five::before {
  content: "CI";
  transform: translate(-100%, -25%);
}

#dadodue .six::before {
  content: "SI";
  transform: rotateY(190deg) translateX(-164%) translateY(-20%);
}

/*DADO TRE*/
#dadodue .side {
  width: 100%;
  height: 100%;
  background: rgb(255, 211, 0, 1);
  border: 2px solid black;
  position: absolute;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:3em;
}

#dadodue div::before {
  transform: translate(-10%, -5%);
}

#dadodue .side::before {
  background: transparent;
  width: 20%;
  height: 20%;
  color: black;
  box-shadow: none;
  font-weight: 800;
  margin: 25% auto;
}

#dadodue .one::before {
  content: "MI";
  transform: translate(-20%, 0%);
}

#dadodue .two::before {
  content: "TI";
}

#dadodue .three::before {
  content: "VI";
  transform: rotateX(180deg) translateX(-15%) translateY(-5%);
}

#dadodue .four::before {
  content: "SI";
}

#dadodue .five::before {
  content: "CI";
  transform: translate(-10%, -25%);
}

#dadodue .six::before {
  content: "SI";
  transform: rotateY(190deg) translateX(-10%) translateY(-20%);
}

/*DADO TRE*/

#dadotre .side {
  width: 100%;
  height: 100%;
  background: rgb(255, 211, 0, 1);
  border: 2px solid black;
  position: absolute;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#dadotre div::before {
  transform: translate(-15%, 5%);
}

#dadotre .side::before {
  background: transparent;
  width: 20%;
  height: 20%;
  color: black;
  box-shadow: none;
  font-weight: 800;
  margin: 25% auto;
}

#dadotre .one::before {
  content: "IO";
  transform: translate(-15%, 0%);
}

#dadotre .two::before {
  content: "TU";
}

#dadotre .three::before {
  content: "LEI LUI";
  transform: rotateX(180deg) translateX(-10%) translateY(-50%);
}

#dadotre .four::before {
  content: "NOI";
}

#dadotre .five::before {
  content: "VOI";
  transform: translate(-15%, -10%);
}

#dadotre .six::before {
  content: "LORO";
  transform: rotateY(190deg) translateX(-50%) translateY(-5%);
}

/*DADO QUATTRO*/

#dadoquattro .side {
  width: 100%;
  height: 100%;
  background: red;
  border: 2px solid black;
  position: absolute;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#dadoquattro div::before {
  transform: translate(-35%, 5%);
}

#dadoquattro .side::before {
  background: transparent;
  width: 20%;
  height: 20%;
  color: black;
  box-shadow: none;
  font-weight: 800;
  margin: 25% auto;
}

#dadoquattro .one::before {
  content: "MAI";
  transform: translate(-15%, 0%);
}

#dadoquattro .two::before {
  content: "SEMPRE";
  transform: translate(-95%, 5%);
}

#dadoquattro .three::before {
  content: "DI SOLITO";
  transform: rotateY(190deg) translateX(-50%) translateY(-76%);
}

#dadoquattro .four::before {
  content: "MAI";
}

#dadoquattro .five::before {
  content: "SEMPRE";
  transform: translate(-95%, 5%);
}

#dadoquattro .six::before {
  content: "DI SOLITO";
  transform: rotateY(190deg) translateX(-50%) translateY(-76%);
}

/*DADO CINQUE*/

#dadocinque .side {
  width: 100%;
  height: 100%;
  /*background: rgb(255, 211, 0, 1);*/
  background: #ff8bb4;
  border: 2px solid black;
  position: absolute;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#dadocinque div::before {
  transform: translate(-150%, 0%);
}

#dadocinque .side::before {
  background: transparent;
  width: 20%;
  height: 20%;
  color: black;
  box-shadow: none;
  font-weight: 800;
  margin: 25% auto;
}

#dadocinque .one::before {
  content: "svegliarsi";
  transform: translate(-175%, 0%);
}

#dadocinque .two::before {
  content: "vestirsi";
}

#dadocinque .three::before {
  content: "prepararsi";
  transform: rotateX(180deg) translateX(-200%) translateY(-5%);
}

#dadocinque .four::before {
  content: "mettersi";
}

#dadocinque .five::before {
  content: "alzarsi";
  transform: translate(-100%, -25%);
}

#dadocinque .six::before {
  content: "truccarsi";
  transform: rotateY(190deg) translateX(-164%) translateY(-20%);
}

/*/ DADI COMBINATI */

.contentdadi{
  display: flex;
  justify-content: space-evenly;
}

@keyframes rotate0 {
  from {
    transform: rotateY(-360deg) rotateX(-300deg) rotateZ(-315deg);
  }

  to {
    transform: rotateY(5deg) rotateX(360deg) rotateZ(15deg);
    /*  transform: rotateY(360deg) rotateX(30deg) rotateZ(30deg);*/
  }
}

@keyframes rotate1 {
  from {
    transform: rotateY(-360deg) rotateX(-300deg) rotateZ(-315deg);
  }

  to {
    transform: rotateY(100deg) rotateX(11deg) rotateZ(10deg);
    /*  transform: rotateY(360deg) rotateX(30deg) rotateZ(30deg);*/
  }
}

@keyframes rotate2 {
  from {
    transform: rotateY(-360deg) rotateX(-300deg) rotateZ(-315deg);
  }

  to {
    transform: rotateY(5deg) rotateX(83deg) rotateZ(15deg);
    /*  transform: rotateY(360deg) rotateX(30deg) rotateZ(30deg);*/
  }
}

@keyframes rotate3 {
  from {
    transform: rotateY(-360deg) rotateX(-300deg) rotateZ(-315deg);
  }

  to {
    transform: rotateY(10deg) rotateX(-87deg) rotateZ(-6deg);
    /*  4 */
  }
}

@keyframes rotate4 {
  from {
    transform: rotateY(-360deg) rotateX(-300deg) rotateZ(-315deg);
  }

  to {
    transform: rotateY(5deg) rotateX(87deg) rotateZ(95deg);
    /*  transform: rotateY(360deg) rotateX(30deg) rotateZ(30deg);*/
  }
}

@keyframes rotate5 {
  from {
    transform: rotateY(-360deg) rotateX(-300deg) rotateZ(-315deg);
  }

  to {
    transform: rotateY(5deg) rotateX(176deg) rotateZ(94deg);
    /*  transform: rotateY(360deg) rotateX(30deg) rotateZ(30deg);*/
  }
}

/*
 #dadodue {
  top: 2em;
  left: 2em;
}

#dadotre {
  top: 4em;
  left: 4em;
}*/
@media only screen and (max-width: 600px) {
  .dice-content.multiplidi {
    display: flex;
  }
}

/*:::::::::::::::::::::.media Q:::::::::::::::::::*/
@media only screen and (max-width: 600px) {
  div.list div.item-after span:nth-child(1) {
    display: none;
  }
}

@media only screen and (max-width: 600px) {
  .dice-content.multiplidi {
    display: flex;
  }
  .contentdadi{
    display: block;
  }
}