/* Reseting MIQ*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
/*    font-family: 'Poppins', sans-serif;*/
    font-family: 'Raleway', sans-serif;
    font-size: .875rem;
}

body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container{
    transform-style: preserve-3d;
}

.container .box{
    position: relative;
    width: 400px;
    height: 320px;
    margin: 20px;
    transform-style: preserve-3d;
    perspective: 1000px;
    cursor: cell;
}

.container .box .body{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: 0.9s ease;
}

.container .box .body .imgContainer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.container .box .body .imgContainer img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.container .box .body .content{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #333;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
}

.container .box:hover .body{
    transform: rotateY(180deg);
}

.container .box .body .content div{
    transform-style: preserve-3d;
    padding: 20px;
    /*background: linear-gradient(45deg, #FE0061,#FFEB3B);*/
    background: linear-gradient(45deg, #ff2424,#375bff);
    transform: translateZ(100px);
}

.container .box .body .content div h3{
    letter-spacing: 1px;
}


/* Paginación */
.table-responsive {
    height:480px;
    margin-bottom: 1px;
}
/*
.footer {
    position: absolute;
    bottom: 0; 
    width: 100%;
    height: 40px; 
    line-height: 0.5; 
    background-color: #f5f5f5;
}
*/
.bg-footer {
    background: #edf0f2;
}

.shadow-top {
    box-shadow: 0 -6px 15px -6px #9e9e9e;
}


/*Fracciones matemáticas*/
.math {
    font-style: italic;
}
.fraction{
    display: inline-block;
    vertical-align: middle; 
    margin: 0 0.2em 0.4ex;
    text-align: center;
}
.fraction > span {
    display: block;
    padding-top: 0.15em;
}
.fraction span.fdn {border-top: thin solid black;}
.fraction span.bar {display: none;}




/**** menu circular ****/

.body {background: #212121}
.input2 {position: absolute; display: none}

* {
  -webkit-touch-callout: block;
  -webkit-user-select: block;
  -moz-user-select: block;
  -ms-user-select: block;
  user-select: block;
}

.menu2 {
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -25px;
  margin-top: -25px;
}

.btn2 {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  position: absolute;
  overflow: hidden;
  cursor: pointer;
}

.material-icons.md-36 { 
    font-size: 60px; color: #03A9F4 
}

.btn2 {
  background: #ECEFF1;
  font-size: 15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  -webkit-transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.btn2:not(:first-child) {
  opacity: 0;
  /*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";*/
  filter: opacity(0);
  z-index: 1;
  
  -webkit-transition: all 0.6s cubic-bezier(.87,-.41,.19,1.44);
  transition: all 0.6s cubic-bezier(.87,-.41,.19,1.44);
}

.btn2:nth-child(2) {top:0px;-webkit-transition-delay: 0s;transition-delay: 0s}
.btn2:nth-child(3) {top:0px;left:0px;-webkit-transition-delay: 0.1s;transition-delay: 0.1s}
.btn2:nth-child(4) {left:0px;;-webkit-transition-delay: 0.2s;;transition-delay: 0.2s}
.btn2:nth-child(5) {top:0px;left:0px;-webkit-transition-delay: 0.3s;transition-delay: 0.3s}
.btn2:nth-child(6) {top:0px;-webkit-transition-delay: 0.4s;transition-delay: 0.4s}
.btn2:nth-child(7) {top:0px;left:0px;-webkit-transition-delay: 0.5s;transition-delay: 0.5s}
.btn2:nth-child(8) {left:0px;-webkit-transition-delay: 0.6s;transition-delay: 0.6s}
.btn2:nth-child(9) {top:0px;left:0px;-webkit-transition-delay: 0.7s;transition-delay: 0.7s}
.btn2:nth-child(10) {left:0px;-webkit-transition-delay: 0.65s;transition-delay: 0.65s}

input#toggle2:checked ~ #show-menu2 .btn2:nth-child(2) {
  top:-150px;opacity:1;filter: opacity(100);
}

input#toggle2:checked ~ #show-menu2 .btn2:nth-child(3) {
  top:-100px;left:100px;opacity:1;filter: opacity(100);
}

input#toggle2:checked ~ #show-menu2 .btn2:nth-child(4) {
  left:150px;opacity:1;filter: opacity(100);
}

input#toggle2:checked ~ #show-menu2 .btn2:nth-child(5) {
  top :100px;left:100px;opacity:1;filter: opacity(100);
}

input#toggle2:checked ~ #show-menu2 .btn2:nth-child(6) {
  top:150px;opacity:1;filter: opacity(100);
}

input#toggle2:checked ~ #show-menu2 .btn2:nth-child(7) {
  top:100px;left:-100px;opacity:1;filter: opacity(100);
}

input#toggle2:checked ~ #show-menu2 .btn2:nth-child(8) {
  left:-150px;opacity:1;filter: opacity(100);
}

input#toggle2:checked ~ #show-menu2 .btn2:nth-child(9) {
  top:-100px;left:-100px;opacity:1;filter: opacity(10);
}

.menuBtn, .closeBtn {
  position: absolute;
  transition: all 0.3s ease;
}

.closeBtn {
  transform: translateY(50px);
  opacity: 0;
}

input#toggle2:checked ~ #show-menu2 .btn2 .menuBtn {
  transform: translateY(-50px);
  opacity: 0;
}

input#toggle2:checked ~ #show-menu2 .btn2 .closeBtn {
  transform: translateY(0px);
  opacity: 1;
}

/** Card carusel  **/
.bodys {
  background-color: #100e17;
  font-family: 'Open Sans', sans-serif;
}

.container2 {
  /*position: absolute;*/
  height: 300px;
  width: 600px;
  top: 60px;
  left: calc(50% - 300px);
  display: flex;
  vertical-align: middle;
}

.card2 {
  display: flex;
  height: 240px;
  width: 200px;
  /*background-color: #26263f;*/
  border-radius: 10px;
  box-shadow: -1rem 0 1rem rgb(114, 114, 114);
/*   margin-left: -50px; */
  transition: 0.4s ease-out;
  position: relative;
  left: 0px;
  margin-bottom: 3em;
}

.card2:not(:first-child) {
    margin-left: -10px;
}

.card2:hover {
  transform: translateY(-20px);
  transition: 0.4s ease-out;
}

.card2:hover ~ .card {
  position: relative;
  left: 50px;
  transition: 0.4s ease-out;
}

.title2 {
  color: white;
  font-weight: 300;
  position: absolute;
  padding: 10px;
  top: 12px;
  font-size: 15px;
}

.bar {
  position: absolute;
  top: 80px;
  left: 20px;
  height: 5px;
  width: 150px;
}

.emptybar {
  background-color: #2e3033;
  width: 100%;
  height: 100%;
}

.filledbar {
  position: absolute;
  top: 0px;
  z-index: 3;
  width: 0px;
  height: 100%;
  background: rgb(0,154,217);
  /*background: linear-gradient(90deg, rgba(0,154,217,1) 0%, rgba(217,147,0,1) 65%, rgba(255,186,0,1) 100%);*/
  background: linear-gradient(90deg, rgba(0,154,217,1) 0%, rgba(217, 0, 0, 0.897) 65%, rgba(0,154,217,1) 100%);
  transition: 0.6s ease-out;
}

.card2:hover .filledbar {
  width: 100%;
  transition: 0.4s ease-out;
}

.circle {
  position: absolute;
  top: 90px;
  left: calc(40% - 60px);
  padding-top: 10px;
  width: 80%;
  text-align: center;
  scroll-behavior: auto;
}

.stroke {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.092);
  /*stroke: white;*/
  stroke-dasharray: 360;
  stroke-dashoffset: 360;
  transition: 0.6s ease-out;
  font-size: 8em;
  /*padding-left: 10px;*/
  text-align: center;
  
}

svg {
  fill: #17141d;
  stroke-width: 2px;
}

.card2:hover .stroke {
  stroke-dashoffset: 100;
  transition: 0.6s ease-out;
  color: #ECEFF1;
  font-size: 9em;
  text-shadow: 2px 2px 10px #333;
}

.card2:hover .title2 {
  font-size: 18px;
  transition: 0.6s ease-out;
  color: white;
  
}

.table tr:hover td {
  background: rgb(209, 209, 209);
  /*color: white;
  transform: scale(1.0);*/
}

select.bs-select-hidden,.selectpicker {
  display:inline;
}

.bg-azul {
  background-color: #1f273b;
}

.bg-limon{
  background-color: #62ff68;
}

.text-light{
  color:rgb(209, 209, 209);
}

.border{
  border: 1px solid;
}

.vertical {
  vertical-align: middle;
}

footer {
  position: fixed; 
  bottom: -60px; 
  left: 0px; 
  right: 0px;
  height: 50px; 

  /** Extra personal styles
  background-color: #03a9f4;*/
  color: gray;
  text-align: right;
  line-height: 35px;
  font-size: smaller;
}

.text-justify{
  text-align: justify;
}