.threed{
  font-size: 56px;
  color:rgb(50,50,150);
  text-shadow:1px 1px 2px rgb(40,40,140), 2px 2px 2px rgb(35,35,135),
  4px 4px 2px rgb(30,30,130), 3px 4px 4px rgba(0,0,0,0.2);
}


.alerta {
  color:red;
  text-align: center;
}

.box-threed{
  background-color: rgb(200,50,50);
  width: 300px;
  height: 200px;
  box-shadow: 3px 3px 0px 3px rgb(180,40,40), 3px 4px 4px rgba(0,0,0,0.2);
}

.box-threed:active{
  box-shadow: 2px 2px 0px 2px rgb(180,40,40), 3px 4px 4px rgba(0,0,0,0.2);
}
.card-two, .card-three{
  background: white;
  border-radius:2px;
  width: 400px;
  height: 300px;
  position: relative;
}

.card-two::before, .card-two::after{
  content: "";
  width: 30%;
  height: 10px;
  top:93%;
  left:69%;
  transform: rotate(5deg);
  background-color: transparent;
  z-index: -1;
  position: absolute;
  box-shadow: 0px 15px 10px rgba(0,0,0,0.3);
}
.card-two::before{
  left:1%;
  transform: rotate(-5deg);
}

.card-three::after{
  content: "";
  width: 30%;
  height: 10px;
  top:93%;
  left:69%;
  transform: rotate(5deg);
  background-color: transparent;
  z-index: -1;
  position: absolute;
  box-shadow: 0px 15px 10px rgba(0,0,0,0.3);
}



body{
  background-color: #eee;
  font-family: Roboto, Arial, Helvetica;
}
section{
  display: inline-block;
  margin:5px;
}
.card{
  background: white;
  border-radius:2px;
  width: 500px;
  height: 400px;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.16), 0px 2px 10px rgba(0,0,0,0.12);
  overflow-y: scroll;
  display: inline-block;
}

.card-small{
  background: #C4E7D4;
  border-radius:5px;
  width: 500px;
  height: 200px;
  box-shadow: 0px 2px 5px rgba(0,0,0,0.16), 0px 2px 10px rgba(0,0,0,0.12);
  display: inline-block;
  overflow-y: auto;
  margin-bottom: 4px;
  margin-right: 1px;
  padding: 1px;
}

.card-small div{
  color: #998DA0;
}

.card-small h2 {
  background-color: #B9C0DA;
  color: #63585E;
  height: 50px;
}

.loader {
  width: 30px;
  height: 30px;
  border: 30px solid #f3f3f3;
  margin:5% auto;
  border-left: 30px solid #FF5D00;
  border-right: 30px solid #FF5D00;
  border-radius: 50%;
  animation: spinIT 0.8s linear infinite;
  filter: drop-shadow(0px 0px 8px gray)
}

@keyframes spinIT {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}