@import url('https://fonts.googleapis.com/css2?family=Sirin+Stencil&family=Unlock&display=swap');

* {padding: 0; margin: 0; box-sizing: border-box;}
html {height: 100vh;}
body {font-weight: 300; font-size: 16px; line-height: 1.4em; background-color: #fff;}
body.modal-open #juego{
    -webkit-filter: blur(11px);
    -moz-filter: blur(11px);
    -o-filter: blur(11px);
    -ms-filter: blur(11px);
    filter: blur(11px);
}
body.modal-open #carrera{
    -webkit-filter: blur(11px);
    -moz-filter: blur(11px);
    -o-filter: blur(11px);
    -ms-filter: blur(11px);
    filter: blur(11px);
}
body.modal-open footer{
    -webkit-filter: blur(11px);
    -moz-filter: blur(11px);
    -o-filter: blur(11px);
    -ms-filter: blur(11px);
    filter: blur(11px);
}
#clock_container {width: 100%; box-sizing: border-box; text-align:left; margin-top: 12em; padding-left: 20em; margin-right: -3em;}
.modal{font-family: 'Unlock', cursive;}
.time {box-sizing: border-box; display:inline-block; width: 280px; height: 300px; margin-left: auto; margin-right: auto; position: relative;}
.block {width: 70px; height: 12px; background-color: black; position: absolute;}
.block:before {content:' '; border:6px solid transparent; width: 0; height: 0; border-right:6px solid black; display:block; margin-left: -12px;}
.block:after {
    content:' ';
    border:6px solid transparent;
    width: 0;
    height: 0;
    border-left:6px solid black;
    display:block;
    margin-left: 70px;
    margin-top: -12px;
}
.b1.tens {left: 50px; top: 50px;}
.b2.tens {transform: rotateZ(90deg); left: 8px; top: 93px;}
.b3.tens {transform: rotateZ(90deg); left: 8px; top: 177px;}
.b4.tens {left: 50px; top: 219px;}
.b5.tens {transform: rotateZ(90deg); left:92px; top: 177px;}
.b6.tens {transform: rotateZ(90deg); left:92px; top: 93px;}
.b7.tens {top: 135px; left: 50px; display:none;}
.b1 {left: 170px; top: 50px;}
.b2 {transform: rotateZ(90deg); left: 128px; top: 93px;}
.b3 {transform: rotateZ(90deg); left: 128px; top: 177px;}
.b4 {left: 170px; top: 219px;}
.b5 {transform: rotateZ(90deg); left:212px; top: 177px;}
.b6 {transform: rotateZ(90deg); left:212px; top: 93px;}
.b7 {top: 135px; left: 170px; display:none;}
button {display:inline-block; width: 200px; height: 45px; border-radius:5px; font-size: 30px; line-height:40px; color:#fff;}
.container{margin-top: 3em;}
.animation {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.pageTitle sup {font-size: .6em; color: #333;}
.cardContainer {
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  padding-left: 1%;
  padding-top: 1%;
}
.cardContainer02 {
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  padding-left: 1%;
  padding-top: 1%;
}
.cardContainer03 {
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  padding-left: 1%;
  padding-top: 1%;
}
.cardContainer04 {
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease;
  -webkit-perspective: 800px;
  -moz-perspective: 800px;
  -o-perspective: 800px;
  perspective: 800px;
  padding-left: 1%;
  padding-top: 1%;
}
.card {
    width: 80%;
    height: 150px;
    cursor: pointer;
    -webkit-transition: -webkit-transform 0.6s;
    -moz-transition: -moz-transform 0.6s;
    -o-transition: -o-transform 0.6s;
    transition: transform 0.6s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.card.flipped {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}
.card .front, .card .back {
    border-radius: 5px; 
    display: block;
    height: 100%;
    width: 100%;
    line-height: 60px;
    text-align: center;
    font-size: 4em;
    position: absolute;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    box-shadow: 3px 5px 20px 2px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 2px 5px rgba(0, 0, 0, 0.26);
}
.card .back {width: 100%; padding-left: 3%; padding-right: 3%; font-size: 16px; text-align: left; line-height: 25px;}
.card .back {
    background: #03446A;
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}
.card .front {background-image: url(img/SignoPreg.png); background-position: center;}
.cardContainer:first-child .card .back {background-image: url(img/Circulos.png); background-position: center;} /*background: dodgerblue;*/
.cardContainer:nth-child(2) .card .back {background-image: url(img/Conos.png); background-position: center;}  /*background: darkorange;*/
.cardContainer:nth-child(3) .card .back {background-image: url(img/Cubos.png); background-position: center;}  /*background: darkgreen;*/
.cardContainer:nth-child(4) .card .back {background-image: url(img/Pill.png); background-position: center;}  /*background: darkred;*/
.cardContainer02:first-child .card .back {background-image: url(img/Pill.png); background-position: center;}  /*background: darkred;*/
.cardContainer02:nth-child(2) .card .back {background-image: url(img/Cubos.png); background-position: center;}  /*background: darkgreen;*/
.cardContainer02:nth-child(3) .card .back {background-image: url(img/Conos.png); background-position: center;}  /*background: darkorange;*/
.cardContainer02:nth-child(4) .card .back {background-image: url(img/Circulos.png); background-position: center;}  /*background: dodgerblue;*/
.cardContainer03:first-child .card .back {background-image: url(img/Piramide.png); background-position: center;}  /*background: chocolate;*/
.cardContainer03:nth-child(2) .card .back {background-image: url(img/Platonic.png); background-position: center;}  /*background: darkmagenta;*/
.cardContainer03:nth-child(3) .card .back {background-image: url(img/Torus.png); background-position: center;}  /*background: deeppink;*/
.cardContainer03:nth-child(4) .card .back {background-image: url(img/Tubos.png); background-position: center;}  /*background: cyan;*/
.cardContainer04:first-child .card .back {background-image: url(img/Tubos.png); background-position: center;}  /*background: cyan;*/
.cardContainer04:nth-child(2) .card .back {background-image: url(img/Torus.png); background-position: center;}  /*background: deeppink;*/
.cardContainer04:nth-child(3) .card .back {background-image: url(img/Platonic.png); background-position: center;}  /*background: darkmagenta;*/
.cardContainer04:nth-child(4) .card .back {background-image: url(img/Piramide.png); background-position: center;}  /*background: chocolate;*/
h3.cardTitle {line-height: 1.2em; margin-top: 8%; font-weight: 600;}
footer span, #carrera {font-family: 'Sirin Stencil', cursive; font-size: 30px; font-weight: bold;}
#carrera{margin-top: 1em;}