:root{
    --gray-100: #FBFCFE;

    --blue-300: #94AAE6;
    --blue-400: #6E87BF;
    --blue-500: #5170B4;
    --blue-600: #2D4270;

    --green-blue:#74C6CF;
    
    --yellow: #FFD119;
    --brown: #66281B;
    --pink: #DD53A7;
    --orange: #EB5A0B;

    --danger: #E25858;
  }

@font-face{
    font-family: Din;
    src: url(../assets/font/DINPro-Medium.otf); 
}
::-webkit-input-placeholder {
    font-family: 'Din', sans-serif;
}
:-moz-placeholder {
    font-family: 'Din', sans-serif;
}
::-moz-placeholder {
    font-family: 'Din', sans-serif;
}
:-ms-input-placeholder {
    font-family: 'Din', sans-serif;
}
body {
    -webkit-font-smoothing: antialiased;
    outline:none;
    height:100%;
    font-size: 1rem;
    font-family: Din ;
    color: var(--gray-100);
}
/* first-page */
.targets-found-feedback {
    display: flex;
    width: 100%;
    color: white;
}
.front {
    background: var(--green-blue);
    position: absolute; 
    width: 100%; 
    height: 100%; 
    margin: auto; 
    display: flex; 
    flex-direction: column;
    align-items: center;
    top: 0; 
    z-index: 5;
}
#logo{    
    position: relative;
    /* max-width: 16rem; */
    width: 50%;
    margin-top: 5rem
}

.dragonballs {
    width: 30px;
}
.dragonballs-grayscale {
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

/* #shopping-selector {
    position: relative;
    margin-top:.5rem;
    width:18rem;  
    height:2.7rem;
    border-radius: 0.75rem;
    font-size: 1rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance:    none;
    border: none;
} */
/* select{
    position: relative;
    padding:0 0.5rem;
    -webkit-appearance: none;
    -moz-appearance:    none;
    border: none;
    background: url(../assets/images/icn_select.svg) 94% /3% no-repeat var(--blue-400);
    color: var(--gray-100);
} */


/* #image-container-first-screen > img:nth-child(1){
    position:absolute;
    transform: translate(-140%, -80%) rotateZ(-10deg);
    width: 13rem;
    height: auto;

}
#image-container-first-screen > img:nth-child(2){
    position:absolute;
    transform: translate(-90%, 270%);
    width: 12rem;
    height: auto;
}
#image-container-first-screen > img:nth-child(3){
    position:absolute;
    transform: translate(130%, 10%);
    width: 3.5rem;
    height: auto;
  
}
#image-container-first-screen > img:nth-child(4){
    position:absolute;
    transform: translate(-210%, 300% );
    width: 8rem;
    height: auto;
    
}
#image-container-first-screen >img:nth-child(5){
    position:absolute;
    transform: translate(80%, 90% );
    width: 10rem;
} */

/* register */
#registerScreen{
    margin: auto; 
    display:flex; 
    flex-direction: column; 
    align-items: center; 
    height: 100%; 
    overflow-y: scroll  
}
.registerScreenImage {
    position: relative;
    margin-top: 10%;
    width: 7rem;
    height: auto;
    margin-bottom:1rem;
}

#registerScreenTextContainer{
    color: var(--gray-100);
    width: 312px;
}

#registerScreenTextContainer label{
    font-size: 1.5rem;
}

#registerScreenTextContainer p{
    font-size: 1.1rem;
}
input::placeholder{
    color: var(--blue-500);
    opacity: 1;
}
.input {
    position: relative;
    margin:.2rem;
    width:19rem;  
    border: none;
    background: var(--gray-100);
    color: var(--blue-500);
    height:3rem;
    border-radius: 0.5rem;
    font-size: 1rem;
}
.select-register {
    position: relative;
    margin:.2rem;
    width:19.2rem;  
    border: none;
    background: var(--gray-100);
    color: var(--blue-500);
    height:3rem;
    border-radius: 0.5rem;
    font-size: 1rem;
}
/* .select-register:nth-child(n+8) {
    background: url(../assets/images/icn_select.svg) 94% /3% no-repeat var(--blue-400);
    font-family: 'Din';
} */
#terms-checkbox {
    background: transparent;
    margin-top:.9rem;
    font-size: 75%;
    font-weight: 600;
    color: var(--gray-100);
    user-select: none;
    display:flex;
    align-items: center;
}
#terms-checkbox > label > a{
    color: inherit;
}

.logoClient{
    width: 10rem;
    margin-bottom: 5%;
}

#feedback {
    color: var(--danger);
    font-size: 80%;
    margin: .75rem auto;
}

/* tutorial */
.tutorials {
    margin:auto;
    display: none;
    flex-direction: column;
    align-items: center;
}

.tutorial-title{
    font-size: 4rem;
    color: var(--orange);
}

.tutorial-image {
    width: 55%;  
    /* border: 6px solid #fff; */
    border-radius: 4px;
}

.tutorial-text-container {
    margin: auto auto 0 auto; 
    text-align: center; 
    padding: 10px; 
    width: 19rem;"
}
.tutorial-subtitle {
    color: var(--gray-100);
    font-size: 1.3rem;
    margin-top: .8rem;
}
.tutorial-text {
    font-size: .9rem;
    /* color: var(--blue-500); */
}
.next-button{
    position: relative;
    margin-top: 7%;
    border-radius: .5rem;
    width:60%;
    height:3rem;
    background:  var(--orange);
    color: var(--gray-100);
    border: 0;
    font-size: 1rem;
    font-weight: 600;
}
/*filtro */
#filterButton{
    position: absolute;
    top: 89%;
    left: 78%;
    z-index: 10;
}
#filterButton img{
    width: 3.5rem;
}
/* steps */
.step-div{
    display: none; 
    flex-direction: column; 
    height: 100%;
    opacity: 0.8;
}
.step-header-div{
    position: absolute;
    z-index: 2;
    display: flex; 
    width: 100%;
    justify-content: space-around;
    background: var(--green-blue);
    height: 10%;"
}
/* .tips{
    position: absolute;
    top: 13%;
    font-size: 1.5rem;
    color: white;
    left: 24%;
    filter: drop-shadow(1px 1px 4px #000);  
} */
#scan{
    position: absolute;
    border: 1px solid #fff;
    width: 67%;
    border-radius: 2px;
    z-index: 0;
    animation: float 6s ease-in-out infinite;
    transform: translateY(22vh);
}
#scan.hidden{
    display:none;
}
@keyframes float{
    0% {
      transform: translatey(22vh);
    }
    50% {
      transform: translatey(50vh);
    }
  }

.step-image-container{
    position:relative;
    display:flex;
    align-items: center;
    justify-content: space-around;
    top: 17%;
}

.step-image {
    position:relative;
    opacity:0.5; 
    max-width: 85%;
    width: 65%;
    top:13%;
}
.step-title-div{
    position:relative;
    display: flex;
    background-color: var(--yellow);
    margin: 57% 0 0 0; 
    padding: 10px 0;
    border-top: 2px solid var(--orange);
    border-bottom: 2px solid var(--orange);
    width: 100%;
}
.step-title{
    position:relative;
    color: var(--orange);
    margin: 0 auto; 
    font-size: .9rem;
    font-weight: bold;
    text-transform: uppercase;
}
/* .step-sub-title{
    position:relative;
    color: white;
    margin: 0 auto; 
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}
.step-title-image{
    position:relative;
    display: flex;
    margin: 0 auto; 
    width: 89%;
} */
.instruction-text {
    display: flex;
    justify-content: space-around;
    width: 100%;
    background: var(--gray-100);
    padding: 13px 2px;
    margin: 71% 0 0 0;
    color: var(--orange);
    font-size: 1.2rem;
    border-top: 4px solid var(--orange);
    border-bottom: 4px solid var(--orange);
}
.step-text-div{
    background:var(--green-blue);
    /* height: 30%; */
    height: auto;
    color: var(--gray-100);
    font-size: 1.2rem;
    text-align: center;
}
}
.image-step-container img:nth-child(1){
    position:absolute;
    transform: translate( 208%, -42% ) rotate(30deg);
    width: 8rem;
    height: auto;
}
.image-step-container img:nth-child(2){
    position:absolute;
    transform: translate(32%, 50% ) rotate(-28deg);
    width: 4rem;
    height: auto;
}
.image-step-container img:nth-child(3){
    position:absolute;
    transform: translate(-19%, 455% );
    z-index: 1;
    width: 8rem;
    height: auto;
}
footer{
    display:flex;
    justify-content: center;
}
/* final page */
.image-final-container img:nth-child(1){
    position:relative;
    width: 20rem;
    height: auto;
    margin-top: 3rem;
}

#congratulations-container {
    position:absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto; 
    /* width: 200px; */
    text-align: center;
    color: var(--gray-100);
} 
#congratulations-container h1{
    font-size: 2rem;
    color: var(--gray-100);
}
#congratulations-container img{
    width: 100%;
    height: auto;
}

#congratulations-container span{
    font-weight: bold;
    font-size: 1.2rem; 
    margin-bottom: 1rem;
}

#congratulations-container p{
    font-size: .7rem;
    margin: 9px;
}
#congratulations-container a {
    text-decoration: none;
    color: var(--gray-100);
}
.image-final-container img:nth-child(2){ 
    position:absolute;
    transform: translate(-520%, 96% ) rotate(-30deg);
    height: auto;
    width: 4rem;
}
.image-final-container img:nth-child(3){
    position:absolute;
    transform: translate(-123%, -69% );
    width: 3rem;
    height: auto;
}
.image-final-container img:nth-child(4){
    position:absolute;
    transform: translate(-287%, 238% ) rotate(-27deg);
    width: 9rem;
    height: auto;
}
.image-final-container img:nth-child(5){
    position:absolute;
    transform: translate(-46%, 116% );
    width: 7rem;
    height: auto;
}
.image-final-container img:nth-child(6){
    position:absolute;
    transform: translate(-115%, 316% );
    width: 14rem;
    height: auto;
}

/* termo */

#terms-container {
    display: flex;
    flex-direction: column;
    margin: auto auto;
    align-items: center;
    text-align: center;
    width:18rem;
    color: var(--blue-600);
}
#terms-container img {
    width: 5rem;
    height: auto;
    margin-top: 1rem;
}
#terms-container h1{
    margin: .3rem auto 0 auto;
    font-size: 1rem;
    color: var(--gray-100);
    z-index:1;
}
#terms-container p{
    /* margin: .1rem auto; */
    width: 20rem;
    font-size: 90%;
}
#image-container-term > img:nth-child(1) {
    position:absolute;
    transform: translate(-62%, 0% ) rotate(296deg);
    width: 7rem;
    height: auto;
} 
#image-container-term > img:nth-child(2) {
    position:absolute;
    transform: translate(206%, -51%) rotate(45deg);
    width: 8rem;
    height: auto;
}

/* @media only screen and (max-height: 700px) {
    .step-text-div {
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        position: relative;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: -webkit-fill-available;
        width: 97%;
        background: rgba(248, 172, 27, 0.9);
        border-radius: 20px 20px 0 0;
        padding: 0 2px;
        margin: auto;
    }
    .step-text-div p {
        padding-top: 10%;
        color: white;
        z-index: 2;
        font-size: 12px;
        text-transform: uppercase;
    }
  } */