body,html{background-color:#102438;color:white;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}.cards{width:100%;height:40vh;cursor:pointer}.cards .card{-webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.2);box-shadow:0px 10px 30px rgba(0, 0, 0, 0.2);width:15vw;height:21vw;position:absolute;-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:left 0.5s,top 0.5s, -webkit-transform 1s;transition:left 0.5s,top 0.5s, -webkit-transform 1s;-o-transition:left 0.5s,top 0.5s, transform 1s;transition:left 0.5s,top 0.5s, transform 1s;transition:left 0.5s,top 0.5s, transform 1s,-webkit-transform 1s;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;top:35%}.cards .card .face{-webkit-backface-visibility:hidden;backface-visibility:hidden;position:absolute;background-color:white;width:100%;height:100%;left:0;top:0;border-radius:5px;overflow:hidden}.cards .card .face.front{-webkit-transform:rotateY(180deg);transform:rotateY(180deg);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;font-size:60px;color:black}.cards .card .face.back{-webkit-box-sizing:border-box;box-sizing:border-box;padding:10px}.cards .card .face.back:before{content:'';display:block;width:100%;height:100%;border:solid 3px #ed4747;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:white;background-image:-webkit-linear-gradient(150deg, transparent 40%, #ed4747 40%, #ed4747 60%, transparent 60%), -webkit-linear-gradient(30deg, transparent 40%, #ed4747 40%, #ed4747 60%, transparent 60%);background-image:-o-linear-gradient(150deg, transparent 40%, #ed4747 40%, #ed4747 60%, transparent 60%), -o-linear-gradient(30deg, transparent 40%, #ed4747 40%, #ed4747 60%, transparent 60%);background-image:linear-gradient(-60deg, transparent 40%, #ed4747 40%, #ed4747 60%, transparent 60%), linear-gradient(60deg, transparent 40%, #ed4747 40%, #ed4747 60%, transparent 60%);background-size:8px 8px}.cards .card.open{-webkit-transform:rotate(0deg) rotateY(180deg);transform:rotate(0deg) rotateY(180deg)}.cards .card[data-order="1"]{left:calc(20% - 7.5vw)}.cards .card[data-order="2"]{left:calc(40% - 7.5vw)}.cards .card[data-order="3"]{left:calc(60% - 7.5vw)}.cards .card[data-order="4"]{left:calc(80% - 7.5vw)}.cards .card:hover{top:30%}.cards.gather .card{top:20%;left:calc(50% - 7.5vw);-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}.cards.gather:hover .card[data-order="1"]{-webkit-transform:rotate(357deg);-ms-transform:rotate(357deg);transform:rotate(357deg)}.cards.gather:hover .card[data-order="2"]{-webkit-transform:rotate(364deg);-ms-transform:rotate(364deg);transform:rotate(364deg)}.cards.gather:hover .card[data-order="3"]{-webkit-transform:rotate(371deg);-ms-transform:rotate(371deg);transform:rotate(371deg)}.cards.gather:hover .card[data-order="4"]{-webkit-transform:rotate(378deg);-ms-transform:rotate(378deg);transform:rotate(378deg)}
/*# sourceMappingURL=style.css.map */