/* =========================================================
   COMPONENT : MusiclicFolder
   Version : 1.0
   ========================================================= */

.musiclic-folder{
  position:absolute;
  left:50%;
  top:50%;
  width:min(460px,82%);
  min-height:250px;
  transform:translate(-50%,-50%) rotate(-0.6deg);

  background:
    linear-gradient(rgba(255,255,255,.14),rgba(0,0,0,.04)),
    #c9a66b;

  color:#2b2118;
  border-radius:5px 5px 8px 8px;
  box-shadow:0 14px 34px rgba(0,0,0,.38);
  cursor:pointer;

  font-family:Georgia,"Times New Roman",serif;

  animation:musiclicFolderArrive .55s ease both;
}

.musiclic-folder::before{
  content:"";
  position:absolute;
  left:28px;
  top:-24px;
  width:150px;
  height:34px;
  background:#d4b47a;
  border-radius:6px 6px 0 0;
  box-shadow:0 -2px 6px rgba(0,0,0,.12);
}

.musiclic-folder::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:5px 5px 8px 8px;
  pointer-events:none;
  box-shadow:inset 0 0 40px rgba(80,48,20,.22);
}

.musiclic-folder-inner{
  position:relative;
  z-index:1;
  height:100%;
  min-height:250px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:32px;
  text-align:center;
}

.musiclic-folder-label{
  display:block;
  text-transform:uppercase;
  font-size:18px;
  font-weight: bold;
  letter-spacing:.18em;
  opacity:.75;
  color:#6f4f33;
  margin-bottom:18px;
}

.musiclic-folder-title{
  display:block;
  font-size:28px;
  font-weight:normal;
  line-height:1.25;
}

.musiclic-folder-subtitle{
    margin-top:20px;
    font-size:18px;
    opacity:.55;
  font-style:italic;
}

.musiclic-folder:hover{
  transform:translate(-50%,-51%) rotate(-0.6deg);
  box-shadow:0 18px 40px rgba(0,0,0,.42);
}

/* Variantes */
.musiclic-folder.rotate-right{
  transform:translate(-50%,-50%) rotate(0.6deg);
}

.musiclic-folder.rotate-right:hover{
  transform:translate(-50%,-51%) rotate(0.6deg);
}

.musiclic-folder.confidential{
  background:
    linear-gradient(rgba(255,255,255,.12),rgba(0,0,0,.05)),
    #b99055;
}

.musiclic-folder.confidential .musiclic-folder-label::after{
  content:"";
  display:block;
  width:130px;
  height:3px;
  margin:12px auto 0;
  background:rgba(126,30,22,.55);
}

@keyframes musiclicFolderArrive{
  from{
    opacity:0;
    transform:translate(-50%,-42%) rotate(-0.6deg);
  }
  to{
    opacity:1;
    transform:translate(-50%,-50%) rotate(-0.6deg);
  }
}

@media(max-width:768px){
  .musiclic-folder{
    width:82%;
    min-height:210px;
  }

  .musiclic-folder-inner{
    min-height:210px;
    padding:24px;
  }

  .musiclic-folder-title{
    font-size:22px;
  }
}