/* Kole */
/* #wrapper { display:none; width: 1050px; margin: 0 auto; } */
/* @media only screen and (max-width: 1200px) {
  #wrapper { width: 100%; }
} */
/* @media only screen and (max-width: 979px) {
  #wrapper { width: 524px; }
}

@media only screen and (max-width: 790px) {
  #wrapper { width: 524px; }
}

@media only screen and (max-width: 550px) {
  #wrapper { width: 330px; }
}

@media only screen and (max-width: 330px) {
  #wrapper { width: 262px; }
} */

.mineral-89 .button-group { margin-bottom: 20px; }

.mineral-89 .button-group .cta-container{
  display: inline;
}

.mineral-89 .title-main h2 {
  font-size: 41px;
  font-weight: bold;
  line-height: 1.25;
}

/* Card Flip */
.mineral-89 .card { color: inherit; cursor: pointer; margin: 0rem; position: relative; display: inline-block; height: 100%; }

.front,
.back          { display: flex; align-items: center; justify-content: center; background-position: center; background-size: cover; text-align: center; position: relative; top: 0; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform-style: preserve-3d; transition: ease-in-out 600ms; }

.mineral-89 .front            { background-size: cover; font-size: 1.618rem; font-weight: 600; color: #fff; overflow: hidden; }
.mineral-89 .front:before     { display: block; content: ''; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, #1a9be6, #1a57e6); opacity: .25; z-index: -1; }
.mineral-89 .card:hover .front { transform: rotateY(180deg); }
.mineral-89 .card:nth-child(even):hover .front { transform: rotateY(-180deg); }

.mineral-89 .back { background: #d4e5f5; transform: rotateY(-180deg); padding: 0 2em; position: absolute; font-size: 14px; height: 100%; align-content: center; justify-content: center;}
.mineral-89 .back p   { color: #1c213f; }
/* .mineral-89 .back p span{ font-size: 13px; font-weight: normal;} */


.mineral-89 .back .button { margin-top: 15px; }
.mineral-89 .back .button.has-bg{ background-color: transparent; padding-right: 21px;}
/* .mineral-89 .back .button:before { box-shadow: 0 0 10px 10px rgba(26, 87, 230, 0.25); background-color: rgba(26, 87, 230, 0.25); } */
.mineral-89 .card:hover .back { transform: rotateY(0deg); }
.mineral-89 .card .back .label                { font-size: 13px; font-weight: bold; transform: rotateY(-180deg); }
.mineral-89 .card:hover .back .label          { transform: rotateY(0deg); }
.mineral-89 .card:nth-child(even) .back { transform: rotateY(180deg); }
.mineral-89 .card:nth-child(even) .back .button { background: linear-gradient(135deg, #e61a80, #e61a3c); }
.mineral-89 .card:nth-child(even) .back .button:before { box-shadow: 0 0 10px 10px rgba(230, 26, 60, 0.25); background-color: rgba(230, 26, 60, 0.25); }
.mineral-89 .card:nth-child(even):hover .back { transform: rotateY(0deg); }

.mineral-89 .button { 
  /* font: inherit; */
  transform: translateZ(40px);
  padding: 10px 20px;
  transform-style: preserve-3d; 
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative;
}

/*
.mineral-89 .button:before { transition: 300ms ease; position: absolute; display: block; content: ''; transform: translateZ(-40px); -webkit-backface-visibility: hidden; backface-visibility: hidden;  left: 10px; top: 16px; }
.mineral-89 .button:hover {
  transform: translateZ(55px);
}
.mineral-89 .button:hover:before {
  transform: translateZ(-55px);
}
.mineral-89 .button:active {
  transform: translateZ(20px);
}
.mineral-89 .button:active:before {
  transform: translateZ(-20px);
  top: 12px;
} */
.mineral-89 .button .btn-bg::before   {  }
.mineral-89 .title-main { position: absolute; color: #2a3059; font-size: 17px; padding: 25px; }
.mineral-89 .title-main h2  { font-size: 41px; }
.mineral-89 .featured   { width: 1170px; margin: -70px; margin-bottom: 20px; }
.mineral-89 .featured img   { width: 100%; margin: 0; }

@media only screen and (max-width: 1200px) {
  .mineral-89 .featured { width: 100%; margin: 0 0 30px; }
}

@media only screen and (max-width: 979px) {
  .mineral-89 .featured { width: 560px; margin: -25px; margin-bottom: 30px; }
}

@media only screen and (max-width: 550px) {
  .mineral-89 .title-main{ top: 25%; }
  .mineral-89 .featured { width: 100%; margin: 0;  }
  .mineral-89 .title-main h2  { font-size: 20px; }
  .mineral-89 .title-main p { font-size: 14px; }
  .mineral-89 .button-group { margin-top: 15px; }
}

/* .mineral-89 .button-group .button.is-checked .btn-bg::before { background: #19F; }  */

/* element-item
------------------------- */

.element-item {
  position: relative;
  float: left;
  margin: 2px;
  max-width: 253px;
}

.element-item > * {
  margin: 0;
  padding: 0;
}

.element-item .name {
  position: absolute;

  left: 10px;
  top: 60px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8em;
  font-weight: normal;
}

.element-item .symbol {
  position: absolute;
  left: 10px;
  top: 0px;
  font-size: 2.8em;
  font-weight: bold;
  color: white;
}

.element-item .number {
  position: absolute;
  right: 8px;
  top: 5px;
}

.element-item .weight {
  position: absolute;
  left: 10px;
  top: 76px;
  font-size: 0.8em;
}

@media only screen and (max-width: 990px) {

  .mineral-89 .card{
    position: absolute;
    top: 0;
    left: 0;
  }

  .mineral-89 .front,
  .mineral-89 .back{
    height: 100%;
  }

  .mineral-89 .cta-container .button{
    width: 49.3%;
    margin-bottom: 5px;
    line-height: 20px;
    padding: 10px 30px;
  }
  .mineral-89 .cta-container .button[data-filter=""]{
    width: 100%;
    margin-bottom: 5px;
  }
  .element-item {
    width: 48%;
    min-height: 200px;
  }

  .mineral-89 .back{
    padding: 0px 10px;
  }
  .mineral-89 .back .button{
    padding: 10px;
    font-size: 10px;
    width: 100%;
  }

  .mineral-89 .back .button span{
    font-size: 11px;
  }

  .mineral-89 .back .button.has-bg{
    padding: 10px;
  }
  

  .mineral-89 .front img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
}