body {
  background: #eeeeee !important;
}

#data > *:not(.loading) {
    display:none;
}

.loading {
    display:block;
    margin: calc(10%) auto;
    width: calc(5%);
}

h2 {
  font-size:3vw !important;
}

.qimen-container {
  max-width: 1000px;
  margin: auto auto 10%;
  --bcolor: black .3vw solid;
  padding-left: calc(5%);
  font-family: arial;
  text-align: center;
}

.square-container > * {
  box-sizing: border-box;
}

.square-container {
  width: 100%;
  float:right;
  padding-top: calc(9%);
}
  


.square {
  width: 22%;
  float: left;
  position: relative;
  border: var(--bcolor);
  margin: 1%;
  background: white;
  position: relative;
  padding-bottom: calc(21%);
  overflow:hidden;
}

.content {
  width: calc(100%);
  height: calc(100%);
  position: absolute;
  text-align:center;
}

#cell0 .content {
    background: #FF9;
}

.value-label {
  font-size: calc(5vw);
}

.nombre, .DOB {
  font-size: calc(2vw);
}

.square.main{
  width:30%;
  margin:1% 10% 1% 50%;
  overflow: inherit;
}

.guardian-icon {
  position:absolute;
  left: -168%;
  top: -55%;
  width: 151%;
}

.main.square {
  padding-bottom: 20%;
}

.main .heading > h1{
  font-fize: calc(2vw);
}

.main .heading > h1 > div{
  font-size: calc(1.5vw);
}

.heading > h1{
  background: #448;
  margin: 0px !important;
  text-align:center;
  font-size: calc(2.8vw);
  color: white;
}

.heading > h1 > div{
  font-size: calc(1.6vw);
}

.cardinal {
  font-size: calc(8vw);
  text-align:center;
  margin-top: 13%;
}

.element {
    width: 35%;
    display: inline-block;
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 0;
}

.element-container > span {
  font-size: calc(1.6vw + 0px);
  font-family:Arial;
  position:absolute;
  z-index:2;
  color: white;
  text-align:right;
  display:block;
  right: 14%;
  bottom: -2%;
}

.element-container > .yinyang-label {
  position:absolute;
  right:0;
  left: 0;
  bottom:0;
  height: 18%;
  width:100%;
  z-index:0;
}

.element-container > span {
  font-size: calc(2.75vw);
}

.element-container > .darker-overlay {
  position:absolute;
  right:0;
  left: 0;
  bottom:0;
  height: 18%;
  width:100%;
  z-index:1;
  opacity:.4;
}

.chinese-name {
  font-size: calc(6vw);
  text-align:center;
  padding-top:20%;
  margin-left: 8%;
}

.chinese-name+span {
  font-size: calc(3vw + 0px);
  font-family: ui-serif script mt;
  font-style: italic;
  text-align: center;
}

.square:not(.main) .value-label {
  padding-top: calc(20%);
  font-size: calc(3vw) !important;
}

.main .value-label {
  padding-top: 0;
}

.square:nth-child(2) .cardinal:before {
  content: "Espalda hacia:";
  font-size: calc(1.5vw);
  display:block;
  position:absolute;
  top: calc(35%);
  left:0;
  right:0;
}

.watermark {
  position: absolute;
  width:100%;
  bottom:0;
  opacity:.1;
  transform: rotate(-30deg) translate(13%,35%);
  transform-origin: bottom left;
  display:block;
  z-index: 1;
}

.main .watermark {
  transform: none;
}

.footer {
    text-align: center;
    margin: auto;
}

#resetBtn{
    margin: calc(10%) auto;
    display: block;
}

.fluid-width-video-wrapper iframe, .fluid-width-video-wrapper object, .fluid-width-video-wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.fluid-width-video-wrapper {
    width: 100%;
    position: relative;
    padding: 0;
}




@media screen and (min-width: 1000px) {
  .cardinal {
     font-size: 4.5em;
  }
  
  .chinese-name {
  font-size: 4em;
 }

.chinese-name+span {
  font-size: 1.8em;
}
  
  .heading > h1 {
    font-size: 1.8em;
  }
  
  .main .heading > h1 > div, .heading > h1 > div {
    font-size: .5em;
  }
  
  .main .value-label {
    font-size: 3em;
  }
  
  .value-label {
    font-size: 2.5em;
  }

  .square:not(.main) .value-label {
    font-size: 1.5em !important;
  }  
  
  .element-container > span {
    font-size:2em;
  }
  
  .square:nth-child(2) .cardinal:before {
    font-size:.2em;
    margin-top: 0%;
  }
}

#data {
    position: relative;
    min-height: 25vw;
    animation: spinning 2.5s linear infinite;
    z-index:1;
    background:url(../bazi/assets/master_paola_logo_flame.png) 50% 10% / 15% no-repeat
}

@keyframes spinning {
    0% {
        transform: rotateY(0deg) scale(100%)
    }
    25%{
        transform: rotateY(-90deg) scale(85%)
    }
    50% {
        transform: rotateY(-180deg) scale(100%)
    }
    75%{
        transform: rotateY(-90deg) scale(85%)
    }            
    100% {
        transform: rotateY(0deg) scale(100%)
    }
}  

@media print {
    .vidContainer {
        display:none;
    }
}