/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

html{
	overflow: hidden;
	font-family: sketchnote-text,sans-serif;
	font-weight: 400;
	font-style: normal;
}
body{
    background: -o-radial-gradient(circle, rgba(1,2,4,1) 20%, rgba(19,22,40,1) 35%, rgba(31,41,119,1) 99%);
    background: radial-gradient(circle, rgba(1,2,4,1) 20%, rgba(19,22,40,1) 35%, rgba(31,41,119,1) 99%);
	margin: 0;
	height: 100vh;
	display: -ms-grid;
	display: grid;
	place-items: center;
	overflow: hidden;
    position: relative;
}

preloader{
	position: fixed;
	width: 100vw;
	height: 100vh;
	background-color: black;
	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;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	z-index: 999999999;
}

preloader span{
	color: white;
	font-size: 2rem;
	font-family: sketchnote-text,sans-serif;
	font-weight: 400;
	font-style: normal;
}

intro-popup img[bolacha]{
    position: absolute;
    width: 2000px;
    z-index: 1;
    bottom: 4%;
    z-index: 1;
    left: 50%;
    -webkit-transform: translate(-50%, 5%);
        -ms-transform: translate(-50%, 5%);
            transform: translate(-50%, 5%);
}

intro-popup img[splash]{
	position: absolute;
    top: 0;
    width: 100%;
    min-width: 1242px;
    left: 50%;
    -webkit-transform: translate(-50%,0);
        -ms-transform: translate(-50%,0);
            transform: translate(-50%,0);
}

intro-popup img[iniciar]{
    position: absolute;
    z-index: 11;
    width: 168px;
    bottom: 0;
    -webkit-transform: translate(-50%,-192%);
        -ms-transform: translate(-50%,-192%);
            transform: translate(-50%,-192%);
    left: 50%;
}

ending-popup{
	position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: url(../../links/media/artes-assets/bg.jpg);
    background-position: top center;
    background-size: cover;
    z-index: 111111111;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    color: white;
    text-align: center;
    gap: 5%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

ending-popup img{
	-ms-flex-item-align: center;
	    -ms-grid-row-align: center;
	    align-self: center;
}
ending-popup .ending-text{
	font-size: 2rem;
    line-height: 2.73rem;
    width: 451px;
}

.parabens{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: none;
align-items: center;
justify-content: center;
z-index: 1111111;
background-color: rgba(0,0,0,0.8);
font-size: 3rem;
color: white;
font-family: arial;
transition: all 3s ease-out;
opacity: 0;
}

.parabens.active{
    display: flex !important;
    transition: all 3s ease-out;
}

#popup-ajuda{
    background-color: rgba(0,0,0,0.8);
    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;
    width: 100vw;
    height: 100vh;
    z-index: 111112;
}

.tooltips{
    position: absolute;
    top: -10%;
    left: -2%;
    width: 124%;
    z-index: 1;
	opacity: 1 !important;
}

.criancas{
	bottom: 0%;
	left: 0%;
	width: 20%;
    z-index: 2;
}

.titulo{
    top: 7%;
    right: 9%;
    width: 14%;
    margin-right: 3%;
}

canvas {
	position: absolute;
	z-index: -1;
}
.container {
    /*display: -ms-grid;
    display: grid;
    place-items: center;
    position: relative;
    -webkit-transform: scale(0.7) translate(-50%);
    -ms-transform: scale(0.7) translate(-50%);
    transform: scale(0.7) translate(-50%);
    left: 10%;
    top: 5%;
    z-index: 1;*/
    display: -ms-grid;
    display: flex;
    justify-content: center;
    position: relative;
    -webkit-transform: scale(0.7) translate(-47%);
    -ms-transform: scale(0.7) translate(-47%);
    transform: scale(0.7) translate(-47%);
    left: 6%;
    top: 5%;
    z-index: 1;
    position: relative;
    transition: all 5s linear;
   
}

.container svg{
    opacity: 0.03;
}

.container .diagrama{
    position: absolute;
    left: -3%;
    top: -5%;
}

.container .nave{
    position: absolute;
    offset-path: path("M741.5,238.85c-97.06-20-68-121.46-310.48-212.63C269.38-34.55,115,28.77,44.08,123.71-19.22,208.47-14.26,322.82,84.45,327c76.68,3.26,80.85-33.63,177.56,12.81C363,388.3,277.73,534.93,282,598.41c7.37,109.33,126.7,149.5,246.34,122,169.23-39,171.47-202.79,259.12-235.16C900.82,443.33,963.71,578.4,1097.9,607c166.56,35.48,362.35-194.66,279.87-387.5C1360.91,180.07,1224.29,23,1090.63,38,947.46,54.1,864.88,264.29,741.5,238.85Z");
    motion-offset: 0%;
	offset-distance: 0%;
    -webkit-animation: rotate-clockwise 5s linear infinite;
            animation: rotate-clockwise 5s linear infinite;
    width: 10%;
    left: 0%;
    top: 0%;
    z-index: 1;
	-webkit-transition: all 2s  linear;
	-o-transition: all 2s  linear;
	transition: all 2s  linear;
    -webkit-transform: scale(0.3) translate(0, 90px);
        -ms-transform: scale(0.3) translate(0, 90px);
            transform: scale(0.3) translate(0, 90px);
    opacity: 0.6;
       
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100% auto;
    
}

#nave2:not(.active){
    -webkit-transform: scale(0.3) translate(0, 130px);
    -ms-transform: scale(0.3) translate(0, 130px);
        transform: scale(0.3) translate(0, 130px);
    
}

#nave3:not(.active){
    -webkit-transform: scale(0.3) translate(0,  170px);
    -ms-transform: scale(0.3) translate(0, 170px);
        transform: scale(0.3) translate(0, 170px);

}

#nave4:not(.active){
    -webkit-transform: scale(0.3) translate(0, 210px);
    -ms-transform: scale(0.3) translate(0, 210px);
        transform: scale(0.3) translate(0, 210px);

}

#nave5:not(.active){
    -webkit-transform: scale(0.3) translate(0, 250px);
    -ms-transform: scale(0.3) translate(0, 250px);
        transform: scale(0.3) translate(0, 250px);

}

#nave6:not(.active){
    -webkit-transform: scale(0.3) translate(0, 290px);
    -ms-transform: scale(0.3) translate(0, 290px);
        transform: scale(0.3) translate(0, 290px);

}

#nave1{
    background-image: url(../../links/media/artes-assets/nave1-bg.png);
}

#nave2{
    background-image: url(../../links/media/artes-assets/nave2-bg.png);
}

#nave3{
    background-image: url(../../links/media/artes-assets/nave3-bg.png);
}

#nave4{
    background-image: url(../../links/media/artes-assets/nave4-bg.png);
}

#nave5{
    background-image: url(../../links/media/artes-assets/nave5-bg.png);
}

#nave6{
    background-image: url(../../links/media/artes-assets/nave6-bg.png);
}

.container .flag{
    position: absolute;
    offset-path: path("M741.5,238.85c-97.06-20-68-121.46-310.48-212.63C269.38-34.55,115,28.77,44.08,123.71-19.22,208.47-14.26,322.82,84.45,327c76.68,3.26,80.85-33.63,177.56,12.81C363,388.3,277.73,534.93,282,598.41c7.37,109.33,126.7,149.5,246.34,122,169.23-39,171.47-202.79,259.12-235.16C900.82,443.33,963.71,578.4,1097.9,607c166.56,35.48,362.35-194.66,279.87-387.5C1360.91,180.07,1224.29,23,1090.63,38,947.46,54.1,864.88,264.29,741.5,238.85Z");
    motion-offset: 0%;
    offset-distance: 0.5%;
    offset-rotate: 355deg;
    width: 30px;
    height: 30px;
    left: 0%;
    top: 0%;
    z-index: 1;
    background-image: url(../../links/media/artes-assets/flag.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-animation: fade 2s ease-in-out infinite;
            animation: fade 2s ease-in-out infinite;
}

.container .nave.active {

	opacity: 1;
	-webkit-transform: translate(0,88px)  scale(1.2);
	    -ms-transform: translate(0,88px)  scale(1.2);
	        transform: translate(0,88px)  scale(1.2);
	-webkit-transition: all 2s linear;
	-o-transition: all 2s linear;
	transition: all 2s linear;
    z-index: 3;

}	

.container .nave.animating{
	-webkit-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}

ui{
	color: white;
	position: absolute;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}

@-webkit-keyframes rotate {
	to {
		/*motion-offset: 100%;
		offset-distance: 100%;*/
	}
}

@keyframes rotate {
	to {
		/*motion-offset: 100%;
		offset-distance: 100%;*/
	}
}

@-webkit-keyframes rotate-clockwise {
	to {
	/*motion-offset: 0%;
		offset-distance: 0%;*/
	}
}

@keyframes rotate-clockwise {
	to {
	/*motion-offset: 0%;
		offset-distance: 0%;*/
	}
}

.hide{
	display: none !important;
}

.absolute{
	position: absolute;
}


#frame{
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 1111;
}

img.completed-planet,img.planet {
    position: absolute;
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
    z-index: 1;
}


m-popup{
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.8);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 340px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    z-index: 1000000;
}

m-popup #pop{
    background-image: url(../../links/media/artes-assets/bg_peguntas.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 700px;
    height: fit-content;
    min-height: 388px;
    position: relative;
    -webkit-transition: all 500s ease-in-out;
    -o-transition: all 500s ease-in-out;
    transition: all 500s ease-in-out;
}

.transparent{
    opacity: 0.2;
}

m-popup [fechar]{
	position: absolute;
    right: 0;
    top: 0;
    padding: 13px;
}

m-popup .button-container{
    width: 23%;
    position: absolute;
    right: 2%;
    bottom: 5%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
}

m-popup .button-container img{
	width: 100%;
}

m-popup img[planeta]{
	/*position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translate(-50%,-27%);
        -ms-transform: translate(-50%,-27%);
            transform: translate(-50%,-27%);
    width: 230px;*/
}

m-popup.debuff img[planeta]{

    /* -webkit-transform: translate(-50%,167%); */
    -ms-transform: translate(-50%,167%);
    /* transform: translate(-50%,167%); */
    width: 90%;

}

m-popup.buff img[planeta] {

    /* -webkit-transform: translate(-50%,167%); */
    -ms-transform: translate(-50%,167%);
    /* transform: translate(-50%,167%); */
    width: 90%;

}




m-popup img[estrelas]{
	width: 53% !important;
    margin: 10px;
}

m-popup img[persona]{

    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    width: 73% !important;

}

m-popup img[persona]#persona-1{

    background-image: url(../../links/media/artes-assets/personagem_1-bg.png);

}

m-popup img[persona]#persona-2{

    background-image: url(../../links/media/artes-assets/personagem_2-bg.png);

}

m-popup img[persona]#persona-3{

    background-image: url(../../links/media/artes-assets/personagem_3-bg.png);

}

m-popup img[persona]#persona-4{

    background-image: url(../../links/media/artes-assets/personagem_4-bg.png);

}

m-popup img[persona]#persona-5{

    background-image: url(../../links/media/artes-assets/personagem_5-bg.png);

}

m-popup img[persona]#persona-6{

    background-image: url(../../links/media/artes-assets/personagem_6-bg.png);

}


m-popup .player-container p{

    margin: 0;

}

m-popup .player-container{
    width: 22%;
    text-align: center;
    padding: 4%;
    height: 100%;
    min-height: inherit;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
}

#rescued-planets{
    top: 77%;
    left: 69%;
    color: white;
    width: 80px;
    text-align: center;
    position: absolute;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    color: white;
    font-size: clamp(28px,6vh,4rem);
    margin-top: 8%;
}

intro-popup{
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100vw;
	height: 100vh;
}

intro-popup[intro]{
	background-color: black;
    z-index: 999999998;
}

intro-popup[config]{
	
    z-index: 999999997;
	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;
	background: url(../../links/media/artes-assets/bg.jpg);
    background-position: center;
    background-size: cover;
}

intro-popup[config] .esq{
    width: 29%;
    /* height: 60%; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
    position: relative;
}

intro-popup[config] .dir{
    margin-left: 16px;
}

intro-popup[config] .dir .box{
    width: 200px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: absolute;
}

intro-popup[config] .dir .box-char{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: auto;
    margin-left: 24%;
    position: relative;
}

intro-popup[config] .dir .char{
    height: 378px;
    padding: 0px;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 0 1px;
}

intro-popup[config] .dir .char#char-1{
    background-image: url(../../links/media/artes-assets/personagem_1-bg.png);
}

intro-popup[config] .dir .char#char-2{
    background-image: url(../../links/media/artes-assets/personagem_2-bg.png);
}

intro-popup[config] .dir .char#char-3{
    background-image: url(../../links/media/artes-assets/personagem_3-bg.png);
}

intro-popup[config] .dir .char#char-4{
    background-image: url(../../links/media/artes-assets/personagem_4-bg.png);
}

intro-popup[config] .dir .char#char-5{
    background-image: url(../../links/media/artes-assets/personagem_5-bg.png);
}

intro-popup[config] .dir .char#char-6{
    background-image: url(../../links/media/artes-assets/personagem_6-bg.png);
}

intro-popup[config] .dir .char#char-7{
    background-image: url(../../links/media/artes-assets/personagem_6-bg.png);
}

.arrow{
	margin: 12px;
}

#confirm-selection{
    width: 29%;
    margin: 3%;
    right: -4%;
    position: absolute;
    bottom: 1%;
}

#players-number{
    position: absolute;
    left: 47%;
    height: 50%;
    color: white;
    font-size: 3rem;
    width: 52%;
    text-align: center;
    top: 24%;
}

#player-name{
	position: absolute;
    bottom: -2%;
    right: 26%;
    z-index: 1;
    height: 25px;
    width: 24%;
    color: #662d91;
    border: none;
    background-color: transparent;
}

#top-charname{
    position: absolute;
    top: 1%;
    left: 35%;
    font-size: clamp(1%,0.85rem,1vw);
    text-align: center;
    width: 67%;
    color: black;
    text-transform: uppercase;
    -webkit-margin-before: 5%;
        margin-block-start: 5%;
}

#create-player-name{
    position: absolute;
    bottom: -5%;
    right: 17%;
    width: 45%;
}

#create-player-button{
    position: absolute;
    bottom: -7%;
    width: 48px;
    right: 16%;
}

#voltar-config{
    /* position: absolute; */
    margin-bottom: 4%;
    width: 24%;
}

#start-game-button{
    position: absolute;
    bottom: 5%;
    width: 15%;
    right: 7%;
}

intro-popup #prev-avatar,intro-popup #next-avatar{
	margin: 10px;
    height: 55px;
}



m-popup .player-container img{
	width: 100%;
    margin: 3%;
}

#legenda{
    position: absolute;
    max-width: 365px;
    height: auto;
    padding: 3%;
    bottom: -20%;
    left: -35%;
    font-size: 11px;
    background-image: url(../../links/media/artes-assets/legenda.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

m-popup .question{
    top: 11%;
    position: absolute;
    left: 28%;
    width: 67%;
    height: 81%;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

m-popup.debuff .question{
    -webkit-transform: translate(-39%,-6%);
    -ms-transform: translate(-39%,-6%);
    transform: translate(-39%,-6%);
    top: 8%;
    left: 54%;
    height: 100%;
    justify-content: center;
}

m-popup.buff .question {
    -webkit-transform: translate(-39%,-6%);
    -ms-transform: translate(-39%,-6%);
    transform: translate(-39%,-6%);
    top: 8%;
    left: 54%;
    height: 100%;
    justify-content: center;
}

#enunciado-titulo{
    color: #0071BD;
    text-transform: uppercase;
    font-weight: 100;
}

#enunciado{
    font-size: 20px;
    margin-bottom:10px ;
}

#enunciado .reduzida{
    width: 64%;
}

m-popup .alternativas{
	margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

m-popup .alternativas alternativa, m-popup .alternativas-powerup alternativa{
	width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
	pointer-events: all;
}

.alternativas alternativa{
    
    max-width: 100px;
    padding: 10px;
    line-height: 30px;
    color: white;
    border-radius: 10px;
    justify-content: center;
}

.alternativas::before{
    content: 'A afirmativa acima está';
    flex-basis: 100%;
    margin-bottom: 25px;
    font-size: 20px;
}

.alternativas alternativa[value='0']{
    background-color: green;
}

.alternativas alternativa[value='1']{
    background-color: red;
}

.alternativas-powerup alternativa::before {
    content: url(../../links/media/artes-assets/checkbox.png);
    -webkit-transform: translate(0, -10%) scale(0.8);
        -ms-transform: translate(0, -10%) scale(0.8);
            transform: translate(0, -10%) scale(0.8);
    top: 50%;
}

.alternativas-powerup alternativa.active::before {
    content: url(../../links/media/artes-assets/checkbox_marked.png);
    -webkit-transform: translate(0, -10%) scale(0.8);
        -ms-transform: translate(0, -10%) scale(0.8);
            transform: translate(0, -10%) scale(0.8);
    top: 50%;
}


#player-ui{
    bottom: 0;
    right: 0;
    width: 23%;
	z-index: 111111;
}

#player-ui img[painel-dados]{
	width: 100%;
}

#player-container{
	top: 11%;
    left: 41%;
}

#player-panel{
	position: absolute;
    top: 11%;
    left: 37%;
    width: 38%;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

#player-panel[current-player='1']{
    background-image: url(../../links/media/artes-assets/personagem_painel_1-bg.png);
}

#player-panel[current-player='2']{
    background-image: url(../../links/media/artes-assets/personagem_painel_2-bg.png);
}

#player-panel[current-player='3']{
    background-image: url(../../links/media/artes-assets/personagem_painel_3-bg.png);
}

#player-panel[current-player='4']{
    background-image: url(../../links/media/artes-assets/personagem_painel_4-bg.png);
}

#player-panel[current-player='5']{
    background-image: url(../../links/media/artes-assets/personagem_painel_5-bg.png);
}

#player-panel[current-player='6']{
    background-image: url(../../links/media/artes-assets/personagem_painel_6-bg.png);
}



#dice-container{
    top: 48%;
    position: absolute;
    right: 8%;
    width: 56%;
    height: 17vh;
}

#dice-button{
	position: absolute;
    left: 63%;
}

.dice{
        position: absolute;
        top: 49%;
        left: 54%;
        -webkit-transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        color: white;
        font-size: clamp(28px,6vh,6rem);
        margin-top: 14%;
}

#info{
	top: 0;
    right: 0;
    width: 80px;
    padding: 48px;
	z-index: 1111;
}

.hide{
	display: none;
}

.disabled{
	pointer-events: none;
}

.disabled:not(.container):not(#player-ui){
	pointer-events: none;
	opacity: 0.4;
}

.feedback{
    font-family: antique-olive, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 2.7rem;
    margin-left: 12px;
    margin: auto;
    overflow-wrap: anywhere;
}

.feedback.correct{
	color: #0071bc;
}
.feedback.incorrect{
	color: #ed1c24;
}

.font-2{
	font-family: antique-olive, sans-serif;
	font-weight: 400;
    font-style: normal;
}
.font-2.bold{
	font-family: antique-olive, sans-serif;
	font-weight: 700;
    font-style: normal;
}

.white{
	color: white;
}

.completed-planet{
	-webkit-animation: fade 2s infinite alternate linear;
	        animation: fade 2s infinite alternate linear;
}


.interaction:hover{
    opacity: 0.7;
    cursor: pointer;
}

@-webkit-keyframes rotation {
	from {
	  -webkit-transform: scale(1) rotate(0deg);
	          transform: scale(1) rotate(0deg);
	}
	to {
	  -webkit-transform: scale(1) rotate(359deg);
	          transform: scale(1) rotate(359deg);
	}
  }

@keyframes rotation {
	from {
	  -webkit-transform: scale(1) rotate(0deg);
	          transform: scale(1) rotate(0deg);
	}
	to {
	  -webkit-transform: scale(1) rotate(359deg);
	          transform: scale(1) rotate(359deg);
	}
  }

  @media (max-height: 710px){
    .container {
        
        /*-webkit-transform: scale(0.6) translate(-151%,-20%);
            -ms-transform: scale(0.6) translate(-151%,-20%);
                transform: scale(0.6) translate(-151%,-20%);
                left: 50%;*/

                -webkit-transform: scale(0.6) translate(-43%);
                -ms-transform: scale(0.6) translate(-43%);
                transform: scale(0.6) translate(-43%);
                top: -6%;
                left: 4%;
    }
  }

  @media (max-height: 590px){
    .container {
        /*-webkit-transform: scale(0.5) translate(-138%,-31%);
            -ms-transform: scale(0.5) translate(-138%,-31%);
                transform: scale(0.5) translate(-138%,-31%);
                left: 50%;
                position: absolute;*/
                -webkit-transform: scale(0.5) translate(-52%);
                -ms-transform: scale(0.5) translate(-52%);
                transform: scale(0.5) translate(-52%);
                left: 4%;
                top: -13%;
    }
  }

.nave-overlay.amarela{
    position: absolute;
    z-index: 1;
    bottom: -29%;
    left: 62%;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-animation: naveamarela 24s infinite 10s linear;
            animation: naveamarela 24s infinite 10s linear;
    pointer-events: none;
}

.nave-overlay.azul{
    position: absolute;
    z-index: -1;
    bottom: -34%;
    left: 15%;
    -webkit-transform: rotate(-18deg);
        -ms-transform: rotate(-18deg);
            transform: rotate(-18deg);
    transform: rotate(-18deg);
    -webkit-animation: naveazul 24s infinite 10s linear;
            animation: naveazul 24s infinite 10s linear;
    pointer-events: none;
}

@-webkit-keyframes naveazul {
	0% {
        bottom: -134%;
        left: -20%;
        -webkit-transform: rotate(20deg)  scale(0.3);
                transform: rotate(20deg)  scale(0.3);
	}
	100% {
        bottom: 95%;
        left: 60%;
        -webkit-transform: rotate(20deg)  scale(0.3);
                transform: rotate(20deg)  scale(0.3);
	}
  }

@keyframes naveazul {
	0% {
        bottom: -134%;
        left: -20%;
        -webkit-transform: rotate(20deg)  scale(0.3);
                transform: rotate(20deg)  scale(0.3);
	}
	100% {
        bottom: 95%;
        left: 60%;
        -webkit-transform: rotate(20deg)  scale(0.3);
                transform: rotate(20deg)  scale(0.3);
	}
  }
@-webkit-keyframes naveamarela {
    0% {
        bottom: -50%;
        left: 62%;
        -webkit-transform: rotate(20deg)  scale(0.3);
        transform: rotate(20deg)  scale(0.3);
	}
    100% {
        bottom: 160%;
        left: 89%;
        -webkit-transform: rotate(20deg)   scale(0.3);
                transform: rotate(20deg)   scale(0.3);
    }

  }
@keyframes naveamarela {
    0% {
        bottom: -29%;
        left: 62%;
        -webkit-transform: rotate(20deg)   scale(0.3);
        transform: rotate(20deg) scale(1)  scale(0.3);
	}
    100% {
        bottom: 160%;
        left: 89%;
        -webkit-transform: rotate(20deg)  scale(0.3);
                transform: rotate(20deg)  scale(0.3);
    }
  }

  @-webkit-keyframes fade {
	0% {
        opacity: 1;
	}
	50% {
        opacity: 0.2;
	}
	100% {
        opacity: 1;
	}
  }

  @keyframes fade {
	0% {
        opacity: 1;
	}
	50% {
        opacity: 0.2;
	}
	100% {
        opacity: 1;
	}
  }

  
  @-webkit-keyframes rotateShip {
	0% {
        -webkit-transform: translate(0,88px)  rotate(0deg) scale(1.2);
                transform: translate(0,88px) rotate(0deg) scale(1.2);
	}
	70% {
        -webkit-transform:translate(0,88px)  rotate(1600deg) scale(1.2);
                transform:translate(0,88px)  rotate(1600deg) scale(1.2);
    }
	100% {
        -webkit-transform: translate(0,88px)  rotate(1630deg) scale(1.2);
                transform: translate(0,88px)  rotate(1630deg) scale(1.2);
        opacity: 0;
	}
  }

  
  @keyframes rotateShip {
	0% {
        -webkit-transform: translate(0,88px)  rotate(0deg) scale(1.2);
                transform: translate(0,88px)  rotate(0deg) scale(1.2);
	}
	70% {
        -webkit-transform: translate(0,88px)  rotate(1600deg) scale(1.2);
                transform: translate(0,88px)  rotate(1600deg) scale(1.2);
    }
	100% {
        -webkit-transform: translate(0,88px)  rotate(1630deg) scale(0);
                transform: translate(0,88px)  rotate(1630deg) scale(0);
        opacity: 0;
	}
  }

 .intro-info{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: -webkit-max-content;
    height: -moz-max-content;
    height: max-content;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
  }

  #intro-info-text{
    width: 69%;
    margin-left: 10%;
    position: absolute;
  }

  .pointer{
      position: absolute;
      width: 55px;
      -webkit-animation: fade 3s ease-in-out infinite;
              animation: fade 3s ease-in-out infinite;
  }

  .pointer:hover{
    opacity: 0.7;
}

.config-step{
    position: relative;
    cursor: pointer;
}

.balloon{
    position: absolute;
}
.disabled .balloon{
    opacity: 0;
}

.rotate-ship{
    -webkit-animation: rotateShip 3s ease-in-out !important;
            animation: rotateShip 3s ease-in-out !important;
}

.rotate-ship-reverse{
    animation: rotateShip 3s ease-in-out reverse !important;
}

.transparent{
    opacity: 0.3;
}

.maozinha{
    -webkit-animation: fade 1s ease-in-out infinite;
            animation: fade 1s ease-in-out infinite;
}

.text-center{
    text-align: center;
}

.no-opacity{
    opacity: 0 !important;
}