/* Left Panel right border when it is visible by breakpoint */
.panel-left.panel-in-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-in-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-in-breakpoint).panel-in~.view-main:before,
.ios .panel-left:not(.panel-in-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;
}

.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: 80vh;
}

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

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

.side::before {
  content: "";
  width: 20%;
  height: 20%;
  background: black;
  border-radius: 50%;
}

.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: yellow;
  border: 2px solid black;
  position: absolute;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#dadodue .side::before {
  background: transparent;
  content: "MI";
  width: 20%;
  height: 20%;
  color: black;
  font-size: 3em;
  box-shadow: none;
  font-weight: 800;
  margin-top: -17px;
}

#dadodue .two::before {
  background: transparent;
  content: "TI";
  width: 20%;
  height: 20%;
  color: black;
  box-shadow: none;
}

#dadodue .three::before {
  background: transparent;
  content: "VI";
  width: 20%;
  height: 20%;
  color: black;
  box-shadow: none;
}

#dadodue .four::before {
  background: transparent;
  content: "SI";
  width: 20%;
  height: 20%;
  color: black;
  box-shadow: none;
}

#dadodue .five::before {
  background: transparent;
  content: "CI";
  width: 20%;
  height: 20%;
  color: black;
  box-shadow: none;
}

#dadodue .six::before {
  background: transparent;
  content: "SI";
  width: 20%;
  height: 20%;
  color: black;
  box-shadow: none;
}

/*finedadodue
 svegliarsi

vestirsi

prepararsi

mettersi

alzarsi

truccarsi*/
/*DADO DUE*/
#dadocinque .side {
  width: 100%;
  height: 100%;
  background: orange;
  border: 2px solid black;
  position: absolute;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#dadocinque .side::before {
  background: transparent;
  content: "svegliarsi";
  width: 20%;
  height: 20%;
  color: black;
  font-size: 3em;
  box-shadow: none;
  font-weight: 800;
  margin-top: -17px;
  transform: translate(-70px);
}

#dadocinque .two::before {
  background: transparent;
  content: "vestirsi";
  width: 20%;
  height: 20%;
  color: black;
  box-shadow: none;
}

#dadocinque .three::before {
  background: transparent;
  content: "prepararsi";
  width: 20%;
  height: 20%;
  color: black;
  box-shadow: none;
}

#dadocinque .four::before {
  background: transparent;
  content: "mettersi";
  width: 20%;
  height: 20%;
  color: black;
  box-shadow: none;
}

#dadocinque .five::before {
  background: transparent;
  content: "alzarsi";
  width: 20%;
  height: 20%;
  color: black;
  box-shadow: none;
}

#dadocinque .six::before {
  background: transparent;
  content: "truccarsi";
  width: 20%;
  height: 20%;
  color: black;
  box-shadow: none;
}

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

  to {
    transform: rotateY(5deg) rotateX(360deg) rotateZ(15deg);
    /*  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;
  }
}