MediaWiki:Pivot.css

/* Custom colors - top bar*/
.tab-bar {
    background: #FF00AA;
}
.subheader {
  background: #517398;
  color: #fff;
  text-align: center;
  padding: .5em;
}
#mw-normal-catlinks a.new {
  color: #000037;
}

.sidebar {
    background: #FF00AA !important;
}

@sidebar {
  background-color: pink;
}

#page-content {
 background-color: pink;
}

.fancytree ul {
    background: none;
    border: none;
    font-size: 12px;
}
ul.fancytree-container {
    outline: 0;
    border: none;
    overflow: hidden;
}
.fancytree p {
    display: none;
}
span.fancytree-title {
    cursor: default;
}
span.fancytree-title a {
    color: black;
}



@media (max-width: 810px) {
  .responsive-table {
    width: 100%;
display: grid;
    margin: 0;
  }
  .responsive-table table {
    width: 100%;
  }
  .responsive-table table td {
    width: auto;
    display: block;
    text-align: left;
    box-sizing: border-box;
    border-bottom: 1px solid #4682B4;
    padding: 8px;
    font-size: 12px;
  }
  .responsive-table table td:last-child {
    border-bottom: none;
  }
}


.info-ficha {
  margin-left: 10px;
}

/* MOVIE CARD */

.caratula {
  position: relative;
 /* width: 190px;*/
  background-color: #000;
  bottom: 100%;
  z-index: 1;
  max-width: 180px;
  box-shadow: 1px 4px 10px rgb(0 0 0);
  border: #7f7d7d9e;
  border-style: hidden;
  margin-right: 10px !important;
  border-width: 2px !important;
  border-style: groove;
margin-bottom: 10px;
}

.titulo {
line-height: 21px;
  color: white !important;
  background-color: black;
  font: menu;
  text-align: center;
}


#grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: 5px;
}

#grid>div {
  text-align: center;
}



/* .flip-card-container */
.flip-card-container {
--white-1: hsl(0, 0%, 90%);
--white-2: hsl(0, 0%, 80%);
--dark: hsl(var(--hue), 25%, 10%);
--grey: hsl(0, 0%, 50%);

width: 120px;
height: 150px;

margin: 14px;
margin-bottom: 35px;
perspective: 1000px;
}

/* .flip-card */
.flip-card {
width: inherit;
height: inherit;

position: relative;
transform-style: preserve-3d;
transition: .6s .1s;
}

/* hover and focus-within states */
.flip-card-container:hover .flip-card,
.flip-card-container:focus-within .flip-card {
transform: rotateY(180deg);
}

/* .card-... */
.card-front,
.card-back {
width: 100%;
height: 100%;
border-radius: 24px;

background: var(--dark);
position: absolute;
top: 0;
left: 0;
overflow: hidden;

backface-visibility: hidden;

display: flex;
justify-content: center;
align-items: center;
}

/* .card-front */
.card-front {
transform: rotateY(0deg);
z-index: 2;
}

/* .card-back */
.card-back {
transform: rotateY(180deg);
z-index: 1;
background:rgba(0,0,0,1	);
  opacity:0.8;
backface-visibility: hidden;
}



/* figure */
figure {
z-index: -1;
}

/* figure, .img-bg */
figure,
.img-bg {
position: absolute;
/*  top: 0; */
left: 0;

width: 100%;
height: 100%;
}

/* img */
.frontal {
height: 100%;
width: 100%;
border-radius: 24px;
border-width: 2px !important;
border-style: inset;
box-shadow: 10px 4px 10px rgb(0 0 0);
border-color: rgba(0, 0, 0, 0.8);
}

.trasera {
  height: 100%;
  width: 100%;
  border-radius: 24px;
  border-width: 2px !important;
  border-style: inset;
  box-shadow: 10px 4px 10px rgb(0 0 0);
  border-color: rgba(0, 0, 0, 0.8);
  }


/* figcaption */
figcaption {
display: block;

width: auto;
margin-top: 12%;
padding: 8px 22px;

font-weight: bold;
line-height: 1.6;
letter-spacing: 2px;
word-spacing: 6px;
text-align: right;

position: absolute;
top: 0;
right: 12px;

color: var(--white-1);
background: hsla(var(--hue), 25%, 10%, .5);
}

/* .img-bg */
.img-bg {
background: hsla(var(--hue), 25%, 10%, .5);
}

.card-front .img-bg {
clip-path: polygon(0 20%, 100% 40%, 100% 100%, 0 100%);
}

.card-front .img-bg::before {
content: "";

position: absolute;
top: 34%;
left: 50%;
transform: translate(-50%, -50%) rotate(18deg);

width: 100%;
height: 6px;
border: 1px solid var(--primary);
border-left-color: transparent;
border-right-color: transparent;

transition: .1s;
}

.card-back .img-bg {
/*clip-path: polygon(0 0, 100% 0, 100% 80%, 0 60%);*/
background-color: #000000ab !important;
}

/* hover state */
.flip-card-container:hover .card-front .img-bg::before {
width: 6px;
border-left-color: var(--primary);
border-right-color: var(--primary);
}

/* button */
button {
font-family: inherit;
font-weight: bold;
color: var(--white-1);

letter-spacing: 2px;

padding: 9px 20px;
border: 1px solid var(--grey);
border-radius: 1000px;
background: transparent;
transition: .3s;

cursor: pointer;
}

button:hover,
button:focus {
color: var(--primary);
background: hsla(var(--hue), 25%, 10%, .2);
border-color: currentColor;
}

button:active {
transform: translate(2px);
}

/* .design-container */
.design-container {
--tr: 90;
--op: .5;

width: 100%;
height: 100%;

background: transparent;
position: absolute;
top: 0;
left: 0;

pointer-events: none;
}

/* .design */
.design {
display: block;

background: var(--grey);
position: absolute;

opacity: var(--op);
transition: .3s;
}

.design--1,
.design--2,
.design--3,
.design--4 {
width: 1px;
height: 100%;
}

.design--1,
.design--2 {
top: 0;
transform: translateY(calc((var(--tr) - (var(--tr) * 2)) * 1%))
}

.design--1 {
left: 20%;
}

.design--2 {
left: 80%;
}

.design--3,
.design--4 {
bottom: 0;
transform: translateY(calc((var(--tr) + (var(--tr) - var(--tr))) * 1%))
}

.design--3 {
left: 24%;
}

.design--4 {
left: 76%;
}

.design--5,
.design--6,
.design--7,
.design--8 {
width: 100%;
height: 1px;
}

.design--5,
.design--6 {
left: 0;
transform: translateX(calc((var(--tr) - (var(--tr) * 2)) * 1%));
}

.design--5 {
top: 41%;
}

.design--6 {
top: 59%;
}

.design--7,
.design--8 {
right: 0;
transform: translateX(calc((var(--tr) + (var(--tr) - var(--tr))) * 1%))
}

.design--7 {
top: 44%;
}

.design--8 {
top: 56%;
}

/* states */
button:hover+.design-container,
button:active+.design-container,
button:focus+.design-container {
--tr: 20;
--op: .7;
}




/****/


.movie_card {
  position: relative;
  display: block;
  width: 152px;
  height: 175px;  
  margin-top: 40px;
  overflow: hidden;
  border-radius: 10px;
  transition: all 0.4s;
}
.movie_card:hover {
  transform: scale(1.02);
  transition: all 0.4s;
}
.movie_card .info_section {
  position: relative;
  width: 100%;
  height: 100%;
  background-blend-mode: multiply;
  z-index: 2;
  border-radius: 10px;
}
.movie_card .info_section .movie_header {
  position: relative;
  padding: 25px;
  height: 40%;
}
.movie_card .info_section .movie_header h1 {
  color: #fff;
  font-weight: 400;
}
.movie_card .info_section .movie_header h4 {
  color: #9ac7fa;
  font-weight: 400;
}
.movie_card .info_section .movie_header .minutes {
  display: inline-block;
  margin-top: 10px;
  color: #fff;
  padding: 5px;
  font-weight: 200;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.13);
}
.movie_card .info_section .movie_header .type {
  display: inline-block;
  color: #cee4fd;
  margin-left: 10px;
}
.movie_card .info_section .movie_header .locandina {
  position: relative;
  float: left;
  margin-right: 20px;
  height: 120px;
  width: 152px;
  box-shadow: 0 0 20px -10px rgba(0, 0, 0, 0.5);
}
.movie_card .info_section .movie_desc {
  padding: 25px;
  height: 50%;
}
.movie_card .info_section .movie_desc .text {
  color: #cfd6e1;
}
.movie_card .info_section .movie_social {
  height: 10%;
  padding-left: 15px;
  padding-bottom: 20px;
}
.movie_card .info_section .movie_social ul {
  list-style: none;
  padding: 0;
}
.movie_card .info_section .movie_social ul li {
  display: inline-block;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.3s;
  transition-delay: 0.15s;
  margin: 0 10px;
}
.movie_card .info_section .movie_social ul li:hover {
  transition: color 0.3s;
  color: rgba(255, 255, 255, 0.8);
}
.movie_card .info_section .movie_social ul li i {
  font-size: 19px;
  cursor: pointer;
}
.movie_card .blur_back {
  position: absolute;
  top: 0;
  z-index: 1;
  height: 100%;
  right: 0;
  background-size: cover;
  border-radius: 11px;
  top: 0px;
  position: absolute !important;
  left: 16px;
}
.movie_fondo {
  position: absolute;
  top: 0px;
  left: 30px;
}
@media screen and (min-width: 768px) {
  .movie_header {
    width: 100%;
  }

  .movie_desc {
    margin-top: 10px;
    width: 90%;
  }

  .info_section {
    background: linear-gradient(to right, #0d0d0c 50%, transparent 100%);
  }

  .blur_back {
    width: 80%;
    background-position: -100% 10% !important;
  }
}
@media screen and (max-width: 768px) {
  .movie_card {
    width: 95%;
    margin: 20px auto;
    min-height: 350px;
    height: auto;
  }

  .blur_back {
    width: 100%;
    background-position: 50% 50% !important;
  }

  .movie_header {
    width: 100%;
    margin-top: 85px;
  }

  .movie_desc {
    width: 100%;
  }

  .info_section {
    background: linear-gradient(to top, #141413 50%, transparent 100%);
    display: inline-grid;
  }
}
#bright {
 /* box-shadow: 0px 0px 150px -45px rgba(255, 51, 0, 0.5);*/
}
#bright:hover {
  box-shadow: 0px 0px 120px -55px rgba(255, 51, 0, 0.5);
}

.bright_back {
  background: url("https://occ-0-2433-448.1.nflxso.net/art/cd5c9/3e192edf2027c536e25bb5d3b6ac93ced77cd5c9.jpg");
}

#tomb {
  box-shadow: 0px 0px 150px -45px rgba(19, 160, 134, 0.6);
}
#tomb:hover {
  box-shadow: 0px 0px 120px -55px rgba(19, 160, 134, 0.6);
}

.tomb_back {
  background: url("https://fsmedia.imgix.net/cd/c9/5e/ba/4817/4d9a/93f0/c776ec32ecbc/lara-crofts-neck-looks-unnatural-in-the-new-poster-for-tomb-raider.png");
}

#ave {
  box-shadow: 0px 0px 150px -45px rgba(199, 147, 75, 0.7);
  margin-bottom: 200px;
}
#ave:hover {
  box-shadow: 0px 0px 120px -55px rgba(199, 147, 75, 0.7);
}

.ave_back {
  background: url("https://www.gannett-cdn.com/-mm-/c03fd140debe8ad4c05cf81a5cad7ad61a12ce52/c=0-1580-2985-3266&r=x803&c=1600x800/local/-/media/2017/06/09/USATODAY/USATODAY/636326272873599176-Black-Panther-Teaser.jpg");
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* número de líneas que se mostrarán antes de los puntos suspensivos */
  -webkit-box-orient: vertical;
}
.profile {
  transform: rotate(-2.5deg) skewx(5deg);
  box-shadow: -35px 35px 50px rgba(0,0,0,1);
  position: absolute;
  width: 99px;
  height: 131px;
  background-color: #fff;
  bottom: 20%;
  left: 20%;
  z-index: 1;
  max-width: 100px;
  opacity: 1;
  box-shadow: -5px -5px 80px rgba(0,0,0,1);
  border: #152732;
    border-top-color: rgb(21, 39, 50);
    border-top-style: none;
    border-top-width: medium;
    border-right-color: rgb(21, 39, 50);
    border-right-style: none;
    border-right-width: medium;
    border-bottom-style: none;
    border-left-style: none;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  border-style: outset;
    border-top-style: outset;
    border-right-style: outset;
  border-right: aliceblue;
  border-top: aliceblue;
}

.alm_container {
  display: flex;
  flex-wrap: wrap;
}

.alm_element {
  width: calc(50% - 10px);
  margin: 5px;
  background-color: #eee;
   box-sizing: border-box;
}

@media (max-width: 700px) {
  .alm_element {
    width: 100%;
  }
}


.grid_anuario {
  display: flex;
  flex-wrap: wrap;
  margin-left: 20px;
  padding-bottom: 20px;
}

.movie_card {
  width: 200px;
  margin-bottom: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .movie_card {
    width: 100%;
  }
}



.divTable {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  border: 0px hidden #dddddd;
}

.divTableBody {
  display: table-row-group;
}

.divTableRow {
  display: table-row;
}

.divTableCell {
  display: table-cell;
  padding: 10px;
  vertical-align: middle;
  border: 0px solid #dddddd;
  text-align: left;
}

@media screen and (max-width: 600px) {
  .divTableCell {
      display: block;
      width: 100%;
      text-align: left;
      border: 0;
  }

  .divTableCell:before {
      content: attr(data-label);
      font-weight: bold;
      display: inline-block;
      width: 35%;
  }

  .divTableRow:after {
      clear: both;
      display: table;
      content: "";
  }
}



/* Search Input
#MySearchInput 
{
  position: relative;
  display: inline-block; 
  width: 18%;
  
  text-align: center;
  justify-content: center;
  
  border: none;
  outline: none;
  background: #161617;
  border-bottom: 0.1px solid #494949a1;
  box-shadow: 0 4px 3px -4px #151515;
  outline: none;
  color: var(--brand-color);
  font-family: 'Heebo', sans-serif;
  font-weight: 500;
  font-size: 12px;
  z-index: 28;

  transition: all 0.6s ease-in-out;
}
  
#MySearchInput:focus
{
/*width: 65%;*
width: 92%;
border: none;
outline:none;

color:#fff;
font-weight: 400;
font-family: "Open Sans", Arial, Verdana;
background-image: radial-gradient(circle, #303030 0%, #141414 100%);

transition: all 0.4s ease-in-out; 
}

/*placeholder - normal*
#MySearchInput::placeholder
{
color:#cfcfcf;
}
/*placeholder - focus*
#MySearchInput:focus::placeholder
{
color:#fff;
}
/*===========*/