/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

@import url(./magic.min.css);
@import url(./fonts/stylesheet.css);

html{
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    /*height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;*/
    overflow: scroll;
    overflow-x: hidden;
    /*overflow: hidden;*/
    /*height: -webkit-fill-available;*/
    height: 120vh;
    /*height: calc(var(--vh) * 107);
    width: calc(var(--vw) * 100);*/
    -ms-touch-action:pan-y;
    touch-action:pan-y;
}

body{
    /*width: 100vw;
    height: 100vh;
    background-color: #FBC700;
    color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 0;
    padding: 0;
    font-family: "rooney-web", "Roboto","Arial";
    font-size: 1.5rem;
    overflow: hidden;
    position: absolute;
    top: 0;
    */
};

body{
    overflow: hidden;
    margin: 0;
    height: 100vh;
    width: 100vh;
    background-color: #FBC700;
    color: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
        align-items: center;
-webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        font-family: "rooney-web","Roboto","Arial";
        font-size: 1.5rem;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
    }

html.disabled *{
    pointer-events: none;
    -ms-touch-action: none;
    touch-action: none;

}

fullscreen-warning{
    color: white;
    width: 100vw;
    height: 102vh;
    z-index: 9999999999999;
    background-color: #333333;
    position: fixed;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
        justify-content: center;
    background-position: top center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    pointer-events: none;
    }
    
    fullscreen-warning img{
    position: fixed;
    top:50%;
    left: 50%;
    max-width: unset;
    width: auto;
    height:80vh;
    -webkit-transform: translate(-50%,-50%); 
    -ms-transform: translate(-50%,-50%); 
    transform: translate(-50%,-50%);
    }

a{
    color: white;
}

*{
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    -moz-user-select: none;
         user-select: none; /* Standard syntax */
         font-family: "rooney-web","Roboto","Arial";
}

button{
    outline: unset;
    border: unset;
    background-color: unset;
    padding: 10px;
    color: white;
    font-family: "rooney-web", "Roboto","Arial";
    font-size: 1.5rem;
    -webkit-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
    transition: 0.5s all ease-in-out;
    cursor: pointer;
}

button:not(.hide):not(.transparent):hover{
  zoom:1.1;
  -webkit-transition: all 0.7s ease-out;
  -o-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
}

#preloader{
    z-index: 11111111111111;
    background-color: white;
    color: green;
}

#preloader-content h1{
    width: 470px;
    text-align: left;
}

#main{
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
}

.hide{

    display: none !important

}

[fixed],.fixed{
    position: fixed;
}

[absolute],.absolute{
    position: absolute;
}


.alternate.trigger{
    opacity: 0;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.alternate.trigger.active{
    opacity: 1;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.semitransparent.trigger{
    opacity: 1;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.semitransparent.trigger.active{
    opacity: 0.3;
    -webkit-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}





[overscreen],.overscreen{
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    z-index: 11111111;
    background-color: #339966;
    color: white;
}


[group]{
    gap: 3px;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

[center]{

    -webkit-box-align: center;

        -ms-flex-align: center;

            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

}

[center-image],.center-image{
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
}

[zero-margin],.zero-margin{
    margin: 0;
}

[row]{
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
}

[column]{
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}



.transparent{
    opacity: 0;
    pointer-events: none;
    -webkit-transition: 0.5s all ease-in-out;
    -o-transition: 0.5s all ease-in-out;
    transition: 0.5s all ease-in-out;
}


[categoria] {
    width: calc(40% - 3px);
    height: 85px;
    color: black;
    opacity: 0.4;
    margin: auto;
}

*:not(button) {
    text-transform: uppercase;
}

[categoria].selected{
    opacity: 1;
}


[bold],.bold{
    font-weight: bold;
}

[text-center],.text-center{
    text-align: center;
}


#preparetimer{
    font-size: 50px
}

.slider{
    max-width: 100vw;
}


.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 40px;
    line-height: 1;
    opacity: .75;
    color: white;
}

.slick-prev, .slick-next {
    width: 50px;
    height: 50px;
    z-index: 1;
}

.slick-next {
    right: 0px;
}

.slick-prev {
    left: 0px;
}

.slick-slide[column] {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-flow: row;
            flex-flow: row;
}

.slider h3 {
    font-size: 2em;
    margin-right: 7%;
    margin-bottom: 3%;
    margin-top: 1%;
    font-weight: bold;
    text-align: left;
}



#initialrequests{
    background-color: #FBC700;
}

.button{
    cursor: pointer;
}

.blocked{
    pointer-events: none !important;
}
/*ingame*/

#categorias-itens {
    width: 55%;
    margin-bottom: 15px;
    position: absolute;
    right: 5%;
    top: 50%;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-transform: translate(0,-50%);
        -ms-transform: translate(0,-50%);
            transform: translate(0,-50%);
}

#categorias-itens .titulo{
    text-align: right;
    padding: 17px;
    padding-right: 45px;
    background-color: #fbc700;
    color: #4b5621;
    font-size: 1.3rem;
    margin-bottom: 5px;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    border-radius: 20px;
}

.ios-fix .titulo{
    font-size: 20px !important
}

.ending{
        bottom: 48px;
        right: 22px;
        width: 175px;
        
}

#ending{
    width: 100%;
    height: 100%;
    background-image:url(./../../links/media/artes-assets/backgrounds/BG_fim.png) ;
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;   
    -webkit-box-pack: center;   
        -ms-flex-pack: center;   
            justify-content: center;
}

.back {
    top: 27px;
    left: 25px;
    width: 102px;
    z-index: 1;
}

.green-button{
    box-shadow: -7px 12px 0px -2px rgba(0, 104, 55, 1);
    -webkit-box-shadow: -4px 4px 0px 3px rgb(0 104 55);
    background-color: #6fa92e;
    border-radius: 4px;
}

#initialrequests .green-button{
    pointer-events: none;
}

#gamescreen{
    width: 100%;
    height: 100%;
    background-image:url(./../../links/media/artes-assets/backgrounds/BG_Azul.png) ;
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat; 
    background-image: unset;
    background-color: #b8d8ff;  
}

#gamescreen h1{
    
    text-align: center;
    padding: 17px;
    padding-right: 45px;
    background-color: #fbc700;
    color: #4b5621;
    font-size: 32px;
    margin-bottom: 5px;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    border-radius: 20px;

}

#gamescreentextcontainer{
    position: fixed;
    width: 43%;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    text-align: left;
    height: 79%;
    top: 50%;
    left: 4%;
    -webkit-transform: translate(0,-50%);
        -ms-transform: translate(0,-50%);
            transform: translate(0,-50%);
}

#gamescreentextcontainer h1{
    width: 100%;
    text-align: left;
    padding: unset;
    background-color: unset;
    color: #333333;
    margin-bottom: 5px;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
    -webkit-box-sizing: content-box;
            box-sizing: content-box;
    border-radius: 20px;
    font-size: 2.8em;
    margin-top: unset;
    word-wrap: break-word;
    white-space: break-spaces;
}

#gamescreentitle{
    font-size: 1.1rem;
    text-align: left;
    color: #333333;
}

#gamescreenimage{
    margin: auto;
    /* background-color: white; */
    /* border: white 8px solid; */
    border-radius: 10px;
    position: fixed;
    left: 45vw;
    height: 100vh;
    -webkit-animation: rotation 1s infinite ease-in-out;
            animation: rotation 1s infinite ease-in-out;
    -webkit-animation-direction: alternate;
            animation-direction: alternate;
}

h1,h2,h3,h4,h5,h6{
    font-weight: 100;
}

h1{
    font-size: 3rem;
}


#scale-element {
    display: block;
    max-width: 100%;
    /*margin: 1rem auto;*/
    -ms-touch-action: none;
        touch-action: none;
  }

#scale-element img{
    width: 160%;
    margin-top: 9%;
    margin-left: 2%;
}
  
#gesture-area{
    width: 100%;
}

  
  #scale-element.reset {
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: -webkit-transform 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
  }

  .slick-slide img{
    height: 100vh;
    z-index: -1;
}




    body{
        font-size: 12px
    }

    h1{
        font-size: 1.5rem;
    }

    button{
        font-size: 1.2rem;
        text-transform: capitalize;
        font-weight: bold;
    }

    .slider{
        max-width: 100vw;
    }





    #scale-element img{
        -webkit-transform: translate(0%,-10%);
            -ms-transform: translate(0%,-10%);
                transform: translate(0%,-10%);
    }

    #preparetimer{
        font-size: 35px
    }
    
  /*popups*/
  #popupwrong{
    background-color: darkorange;
    width: 100%;
    height: 100%;
    background-image:url(./../../links/media/artes-assets/backgrounds/BG_Rosa.png) ;
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
  }

  #popupcorrect{
    background-color: dodgerblue;
    width: 100%;
    height: 100%;
    background-image:url(./../../links/media/artes-assets/backgrounds/BG_Verde.png) ;
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
  }

#popup h1{

    font-size: 2rem;
    margin-top: -10%;

}

.ios-fix #popup h1{
    font-size: 1.7rem;
}


#proximacarta {
    width: 275px;
}

#abertura{
    width: 100%;
    height: 100%;
    background-image:url(./../../links/media/artes-assets/backgrounds/bg-inicial-overlay.png) ;
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
}

#categorias{
    width: 100vw;
    height: 100vh;
    background-image:url(./../../links/media/artes-assets/backgrounds/bg-categorias.png) ;
    background-size: cover;
    background-position: bottom center;
    background-repeat: no-repeat;
}

[categoria] img{
    width: 100%;
}

#categorias::after {
    content: " ";
    width: 100%;
    height: 100%;
    background-position: 8% bottom;
    background-size: auto 85%;
    background-repeat: no-repeat;
    position: absolute;
    background-image: url(./../../links/media/artes-assets/backgrounds/bg-categorias-overlay.png);
    pointer-events: none;
}

#instrucoes{
    background-color: #FBC700;
}

.flutuar::after {
    content: " ";
    width: 100%;
    height: 100%;
    background-position: center bottom;
    background-size: auto 95%;
    background-repeat: no-repeat;
    position: absolute;
    background-image: url(./../../links/media/artes-assets/backgrounds/bg-inicial.png);
    -webkit-animation: flutuar 7s ease-in-out 0s infinite ease;
    animation: flutuar 7s ease-in-out 0s infinite normal;
}
    
    @-webkit-keyframes flutuar{
    0%{ -webkit-transform:translateY(10px); transform:translateY(10px); }
    50%{ -webkit-transform:translateY(0px); transform:translateY(0px); }
    100%{ -webkit-transform:translateY(10px);transform:translateY(10px); }
    }
    
    @keyframes flutuar{
    0%{ -webkit-transform:translateY(10px); transform:translateY(10px); }
    50%{ -webkit-transform:translateY(0px); transform:translateY(0px); }
    100%{ -webkit-transform:translateY(10px); transform:translateY(10px); }
    }


    #finalize{
        width: 100%;
        height: 100%;
        background-image:url(./../../links/media/artes-assets/backgrounds/bg_finalize.png) ;
        background-size: cover;
        background-position: bottom center;
        background-repeat: no-repeat;
        -ms-touch-action: none;
            touch-action: none;
      }

      #finalize-content{
        top: 0;
        left: 0;
        width: 80vw;
        -webkit-box-pack: space-evenly;
            -ms-flex-pack: space-evenly;
                justify-content: space-evenly;
      
        z-index: 1;
        padding: 5px;
        padding-top: 10px;
    }

    #finalize-content h1{
        color: #D6E765;
        font-size: 2.5rem;
        margin: 0;
    }

    #finalize-content h2 {
        font-size: 1.2rem;
        font-weight: bolder;
    }

    .overlay-white{
        background-color: white !important;
        background-image: unset  !important;
    }

    .slider .slick-arrow.slick-prev {
        left: 10px;
        background: url("./../../links/media/artes-assets/slideback_button.png") 0
          0 / 100% no-repeat;
      }
      .slider .slick-arrow.slick-next {
        right: 10px;
        background: url("./../../links/media/artes-assets/slidenext_button.png") 0 0 / 100% no-repeat;
      }

      .slider .slick-arrow {
        position: absolute;
        top: 50%;
        margin: -20px 0px 0px 0px;
        z-index: 10;
        font-size: 0;
        width: 30px;
        height: 30px;
      }

      .slider .slick-prev::before,.slider .slick-next::before{
          opacity: 0;
      }

      .slider .slick-disabled{
          opacity: 0.3;
      }


      @-webkit-keyframes rotation {
        0% {
          -webkit-transform:  rotate(-5deg);
                  transform:  rotate(-5deg);
        }
        100% {
          -webkit-transform:  rotate(5deg);
                  transform:  rotate(5deg);
        }
      }


      @keyframes rotation {
        0% {
          -webkit-transform: rotate(-5deg);
                  transform: rotate(-5deg);
        }
        100% {
          -webkit-transform: rotate(5deg);
                  transform: rotate(5deg);
        }
      }

      @media (orientation: portrait) {
        #main *{
          display: none;
        }

        fullscreen-warning{
            display: none;
        }

        body{
            background-color: black;
        }

        #main::before {
            content: " ";
            position: fixed;
            height: 100vh;
            width: 100%;
            background-image: url(./../../links/media/artes-assets/phone_turn.png);
            display: block;
            background-size: 80%;
            background-position: center;
            background-repeat: no-repeat;
        }

        #main::after {
            content: "Posicione o celular na horizontal";
            position: fixed;
            height: -webkit-fit-content;
            height: -moz-fit-content;
            height: fit-content;
            width: 100vw;
            display: block;
            background-size: 80%;
            background-position: center;
            background-repeat: no-repeat;
            text-align: center;
            font-size: 1.1rem;
            margin-bottom: 20px;
            bottom: 0;
            color: white;
        }

        .ios-fix #main::after{
            font-size: 12px !important;
        }

      }

@media (min-width: 901px) {

.hide-in-desktop{
display: none !important;
}

fullscreen-warning{
display: none !important;
}
}        

.ios-fix{
    font-size: 11px;
}

.ios-fix h3{
    font-size: 1.7em !important
}