#wrap-question-box {
display: flex;
margin: 5px;
margin-top: 50px;
margin-bottom: 50px;
}
#wrap-questions {
min-width: 300px; max-width: 700px;
text-align: center;
margin: auto;
padding-bottom: 100px; box-shadow: 0 -3em 3em rgb(73 73 73 / 10%), 0.3em 0.3em 1em rgb(73 73 73 / 10%);
border-radius: 0.625rem;
}
.counter-question {
text-align: center;
border-radius: 5px;
margin-top: 7px;
font-size: 26px;
font-weight: bold;
color: #ccc;
margin-left: 15px;
display: flex;
justify-content: left;
}
#query-instrument {
margin-top: 20px;
font-size: 22px;
color: #09caa7;
}
#answer-box {
margin-top: 45px;
font-size: 16px;
}
#answer-box .answer {
cursor: pointer;
width: 100%;
max-width: 400px;
height: 110px;
margin: auto;
margin-top: 20px;
background-color: whitesmoke;
display: flex;
align-items: center;
text-align: justify;
padding: 5px;
padding-left: 15px;
border-radius: 0.5rem;
border: 2px solid #e1e1e1; }
#answer-box #start{
cursor: pointer;
}
#answer-box .answer:hover {
box-shadow: 0 -2px 2px rgb(53 53 53 / 10%), 2px 2px 2px rgb(53 53 53 / 10%);
}
#answer-box .answer img{
margin: 10px;
}
.number-per-all {
margin: auto;
margin-top: 40px;
width: 350px;
text-align: right;
}
.progress-question {
display: block;
width: 80%;
height: 15px;
border: 4px solid #ccc;
border-radius: 5px;
margin: auto;
margin-top: 4px;
}
.progres-percentage {
background-color: #09caa7;
height: 100%;
}
#wrap-result-question-instrument {
display: flex;
justify-content: center;
}
#result-question-instrument { border-radius: 5px; width: 450px;
margin: auto;
font-size: 18px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 10px;
}
.result-persona-img {
min-height: 50px;
font-size: 22px;
}
#result-name-instrument {
font-size: 38px;
}
#result-psychology{
text-align: justify;
margin-top: 10px;
font-size: 16px;
}
#gamification-phone {
margin-top: 50px;
}
#recive-mobile{
font-weight: bold;
}
#gamification-phone input {
height: 40px;
margin-top: 10px;
direction: ltr;
text-align: center;
}
#gamification-phone input[type="submit"]:hover{
background-color: whitesmoke; }
#result-question-instrument #youtube img{
width: 170px !important;
height: 170px !important;
border-radius: 5px;
margin-top: 100px;
}
.gamification-message-youtube{
font-size: 30px;
font-weight: 500;
margin-top: 10px;
}
.gamification-arrow{
margin-top: 30px;
}
.gamification-youtube{
margin:auto;
margin-top: 30px;
}
.gamification-youtube img{
box-shadow: 5px 5px 5px #00000026;
} .tilt-in-fwd-tr {
-webkit-animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes tilt-in-fwd-tr {
0% {
-webkit-transform: rotateY(20deg) rotateX(35deg) translate(100px, -100px) skew(-35deg, 10deg);
transform: rotateY(20deg) rotateX(35deg) translate(100px, -100px) skew(-35deg, 10deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
opacity: 1;
}
}
@keyframes tilt-in-fwd-tr {
0% {
-webkit-transform: rotateY(20deg) rotateX(35deg) translate(100px, -100px) skew(-35deg, 10deg);
transform: rotateY(20deg) rotateX(35deg) translate(100px, -100px) skew(-35deg, 10deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
opacity: 1;
}
}
.slide-in-elliptic-top-fwd {
-webkit-animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-elliptic-top-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}  @-webkit-keyframes slide-in-elliptic-top-fwd {
0% {
-webkit-transform: translateY(-5px) rotateX(-30deg) scale(0);
transform: translateY(-5px) rotateX(-30deg) scale(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 0;
}
100% {
-webkit-transform: translateY(0) rotateX(0) scale(1);
transform: translateY(0) rotateX(0) scale(1);
-webkit-transform-origin: 50% 600px;
transform-origin: 50% 400px;
opacity: 1;
}
}
@keyframes slide-in-elliptic-top-fwd {
0% {
-webkit-transform: translateY(-5px) rotateX(-30deg) scale(0);
transform: translateY(-5px) rotateX(-30deg) scale(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
opacity: 0;
}
100% {
-webkit-transform: translateY(0) rotateX(0) scale(1);
transform: translateY(0) rotateX(0) scale(1);
-webkit-transform-origin: 50% 600px;
transform-origin: 50% 400px;
opacity: 1;
}
}