@charset "utf-8";

html, body{
	width: 100vw;
    height: 100vh;
    overflow: hidden;
    margin:0;
}
/* MOBILE */
body{
    font-family: 'Montserrat', sans-serif;
    background-color: #7c0a3a;
    background-image: url('../images/clear_bg.jpg?v=0.0');
    background-size: cover;
    background-position: top center;
}

main {
    display:table;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    background-color: #a81a59;
    box-shadow: 0 0 20px 1px #000;
}

section{
    display:table;
	width: 100%;
	height: 100vh;
}

#nick{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
}

/*###########################
  ######### AVISO ############
  ###########################*/

span.aviso{
    display: none;
    position: fixed;
    width: 350px;
    height: auto;
    top: 40vh;
    left: calc(50% - 175px);
    padding-bottom: 21px;
    background: #000000d9;
    border: 1px solid #757575;
    border-radius: 14px;
    box-shadow: 0 0 8px 0 #000000;
    z-index: 150;
}
    span.aviso b{
        display: block;
        color: #FFF;
        text-align: center;
        width: 100%;
        font-size: 30px;
        line-height: 70px;
    }
    span.aviso p{
        display: block;
        color: #FFF;
        text-align: center;
        width: 100%;
        font-size: 18px;
        margin-top: 30px;
    }
/*###########################
  ######### MENU ############
  ###########################*/

	section#login, section#menu, section#pistas, section#carros, section#ranking, section#conquista , section#sobre {
		background-color:#000;
		background-image: url('../images/menu_bg.jpg?v=0.0');
        background-size: cover;
        background-position: top center;
		z-index: 110;
	}

		section#menu span.moedas, section#menu span.recorde{
    		display: block;
    		font-size: 24px;
    		text-align: right;
    		color: #FFF;
    		padding: 5px;
    		padding-right: 5vw;
    		margin-top: 20px;
    		background: linear-gradient(45deg, transparent, black);
    		border-top: 1px solid #757575;
    		border-bottom: 1px solid #757575;
  		}
		section#menu span.moedas{
			margin-top: 230px;
    		padding-right: 47px;
		}
		section#menu img.moedaico{
			float: right;
			width: 29px;
            margin-top: -34px;
			margin-right: 8px;
		}
		section#login a, section#menu a, section#pistas a, section#carros a, section#ranking a, section#conquista a, section#sobre a{
			display: block;
			padding: 8px 0;
			font-size: 25px;
			text-align: center;
			color: #fff;
			text-shadow: 0px 0px 4px #000;
			background: #0000007a;
			background-size: 100%;
			border-radius: 20px;
			border: 1px solid #757575;
			box-shadow: 0px 0px 8px 1px #000;
		}
		section#menu a.btPistas{
			margin-top: 100px;
			margin-left: calc(50% - 128px);
			width: 115px;
			display: inline-block;
		}
		section#menu a.btCarros{
			margin-top: 100px;
			margin-left: 20px;
			width: 115px;
			display: inline-block;
		}
		section#menu a.btSobre{
			position: absolute;
            width: 35px;
            height: 35px;
            line-height: 33px;
            font-size: 16px;
            bottom: 10px;
            right: 10px;
            padding: 0;
            border: 1px solid #FFC107;
            color: #FFEB3B;
		}
		section#menu a.btIniciar{
			position:absolute;
			bottom: 100px;
			left: calc(50% - 102px);
			width: 200px;
		}
		section#menu a.btLogin, section#login a.btLogin{
			position: absolute;
            bottom: 210px;
            left: calc(50% - 102px);
            width: 200px;
            font-size: 20px;
            border: 1px solid #00cef9;
		}
		
		section#menu a.btRanking {
            position: absolute;
            bottom: 100px;
            left: calc(50% - 172px);
            width: 50px;
            border-radius: 15px;
        }
        
        section#menu a.btRanking svg {
            display: block;
            margin: 2px auto;
        }
        
        section#menu a.btConquista {
            position: absolute;
            bottom: 100px;
            left: calc(50% + 118px);
            width: 50px;
            border-radius: 15px;
        }
        
        section#menu a.btConquista svg {
            display: block;
            margin: 2px auto;
        }
		
/*###########################
  ######### LOGIN ############
  ###########################*/
    
    section#login{
		display:none;
        z-index: 110;
	}
	
	section#login a.botao{
		position: absolute;
		display: block;
		left: calc(50% - 102px);
		bottom:150px;
		font-size: 25px;
		text-align: center;
		font-family: arial;
		color: #EEE;
		width: 200px;
		padding: 5px 0;
		background: #0000007a;
	}
	
	section#login input{
	    position: relative;
        width: 280px;
        top: 230px;
        left: calc(50% - 140px);
        display: block;
        color: #eee;
        margin-top: 30px;
        font-size: 26px;
        padding: 5px 10px;
        border: 1px solid #00cef9;
        border-radius: 10px;
        background: #0000007a;
        box-shadow: 0px 0px 8px 1px #000;
	}
	
	section#login input#addNick{ display:none; }
  

/*###########################
  ######### JOGO ############
  ###########################*/

	section#jogo{
        display:none;
        width: 500px;
        height: 100vh;
        /*margin-left: calc(50vw - 250px);*/
	}
		section#jogo div.pista{
			width: 100%;
			height: 100vh;
			background: url('../images/pista1.jpg?v=0.0');
			background-size: 100%;
			background-position-x: center;
			background-repeat-x: no-repeat;
			background-repeat-y: repeat;
		}
		section#jogo div.objEsq, section#jogo div.objDir, section#jogo div.objMeio{
			position: absolute;
            width: 100px;
            height: 110px;
            background-size: 100%;
            background-repeat: no-repeat;
		}
		section#jogo div.objEsq{
			margin-left: 50px;
		}
		section#jogo div.objDir{
			margin-left: 360px;
		}
		section#jogo div.objMeio{
			/*JScript
			margin-left: 90 a 160px;
			margin-left: 240 a 310px;
			*/
		}

		/*Obj FIM*/
		section#jogo div.objFim{
			display: none;
            position: absolute;
            width: 500px;
            height: 100vh;
            left: calc(50vw - 250px);
            background: rgba(0, 0, 0, 0.9);
            z-index: 200;
		}
			section#jogo div.objFim div.objBox{
				background: #000000;
				width: 300px;
				margin: 25vh auto;
				padding: 5%;
				color: #FFF;
				border-radius: 10px;
				border: 1px solid #616161;
				box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.9);
			}
			section#jogo div.objFim div.objBox h1{
				font-size: 56px;
				text-align: center;
				font-family: arial;
				color: #E57373;
				text-shadow: 2px 2px 1px #000, -2px -2px 1px #000;
			}
			section#jogo div.objFim div.objBox h2{
				margin-top: 2vh;
				font-size: 36px;
				text-align: center;
				font-family: arial;
				color: #EEE;
				text-shadow: 2px 2px 1px #000, -2px -2px 1px #000;
			}
			section#jogo div.objFim div.objBox a.botao{
			    display: block;
                margin: 15px auto;
                font-size: 26px;
                text-align: center;
                font-family: arial;
                color: #EEE;
                width: 60%;
                padding: 2%;
                border: 1px solid #999;
                border-radius: 10px;
                background: #212a2f;
			}
			section#jogo div.objFim div.objBox a.btContinuar{
			}
			section#jogo div.objFim div.objBox a.btReiniciar{
			}
			section#jogo div.objFim div.objBox a.btMenuVoltar{
			}


		/*Obj - Placa Start*/
		section#jogo div.objStart{
			position: absolute;
            width: 500px;
            height: 24vw;
            top: -20vh;
            margin-left: 18px;
            background: url('../images/placa-start.png?v=0.0');
            background-size: 100%;
            background-repeat: no-repeat;
            z-index: 10;
		}

		/*Player*/
		section#jogo div.objPlayer{
			position: absolute;
			width: 70px;
            height: 100px;
            top: 75vh;
            margin-left: 145px;
			background-size: 100%;
			background-image: url('../images/player0.png?v=0.0');
			transform: rotate(0deg);
		}
		/*Adversários*/
		section#jogo div.objAdv1, section#jogo div.objAdv2{
			position: absolute;
			width: 70px;
            height: 100px;
            top: 75vh;
            transform: rotate(0deg);
			background-size: 100%;
			background-image: url('../images/carro0.png?v=0.0');
		}
		section#jogo div.objAdv1{
            margin-left: 145px;
		}
		section#jogo div.objAdv2{
			margin-left: 295px;
		}
		/*Distância*/
		section#jogo div.objDist{
			position: absolute;
			top: 10px;
			right: 20px;
			font-family: Verdana;
			font-weight: bold;
			font-size: 30px;
			letter-spacing: 1px;
			color: #EEE;
			text-shadow: 2px 2px 4px #000;
			z-index: 100;
		}

		/*Velocidade*/
		section#jogo div.objVelo{
			position: absolute;
			top: 20px;
			left: 20px;
			font-family: Verdana;
			font-weight: bold;
			font-size: 20px;
			letter-spacing: 1px;
			color: #EEE;
			text-shadow: 2px 2px 4px #000;
			z-index: 100;
		}
		
/*###########################
  ###### PISTAS CARROS ###### 
  ###### RANKING SOBRE ######
  ###########################*/
  
    section#pistas, section#carros, section#ranking, section#conquista, section#sobre{
		display:none;
		z-index: 110;
	}
	
	section#pistas div.lista, section#carros div.lista {
        display: block;
		margin-top: 40px;
        padding-bottom: 40px;
	}
	
	section#pistas div.lista ul li, section#carros div.lista ul li {
		display: inline-block;
		width: 28vw;
		max-width: 124px;
		height: 28vw;
		max-height: 124px;
		margin: 2.4vw;
	}
	
	section#pistas a.botao, section#carros a.botao, section#ranking a.botao, section#conquista a.botao, section#sobre a.botao {
		position: relative;
		display: block;
		left: calc(50% - 102px);
		font-size: 25px;
		text-align: center;
		font-family: arial;
		color: #EEE;
		width: 200px;
		padding: 2vw 0;
		background: #0000007a;
	}

	section#pistas span.moedas, section#carros span.moedas {
		display: block;
		font-size: 24px;
		text-align: right;
		color: #FFF;
		padding: 10px;
        padding-right: 47px;
        margin-top: 200px;
		background: linear-gradient(45deg, transparent 50%, black);
	}
	section#pistas img.moedaico, section#carros img.moedaico {
		float: right;
		width: 29px;
        margin-top: -38px;
		margin-right: 8px;
	}

/*###########################
  ######## PISTAS ###########
  ###########################*/

	section#pistas div.lista ul li {
		box-shadow: 0px 0px 4px 0px #000;
		background-size: 100%;
	}
	
	section#pistas div.lista ul li img {width: 100%;}

/*###########################
  ######## CARROS ###########
  ###########################*/

	section#carros div.lista ul li {
		background-size: auto 100%;
		background-position: center;
		background-repeat: no-repeat;
	}

	section#carros div.lista ul li img {width: 95%;}

/*###########################
  ######## RANKING ##########
  ###########################*/
  
    ul.ranking {
        margin: 125px auto 50px auto;
        text-align: center;
    }
    
    ul.ranking li {
        width: 350px;
        margin: 2px auto;
        padding: 6px 0;
        font-size: 1rem;
        color: #fff;
        border-radius: 50px;
        background-color: #00000099;
    }
    
    ul.ranking li b, ul.ranking li div, ul.ranking li span { display: inline-table; }
    
    ul.ranking li b {
        width: 30px;
        line-height: 30px;
        text-align: center;
        color: #fff;
        border: 0.5px solid #000;
        margin: -2px 10px 0 6px;
        border-radius: 50%;
        background-image: linear-gradient(45deg, #9E9E9E, #607D8B);
    }
    
    ul.ranking li div {
        width: calc(100% - 162px);
    }
    
    ul.ranking li span {
        width: 100px;
        line-height: 30px;
        text-align: center;
        color: #ffffff;
        margin: -2px 6px 0 10px;
        border-radius: 25px;
        background-image: linear-gradient(45deg, #9E9E9E, #607D8B);
    }
    
    ul.ranking li.p1, ul.ranking li.p2, ul.ranking li.p3 {
        display: inline-block;
        width: 100px;
        padding: 0;
        margin: 10px 5px;
        border-radius: 10px;
    }
    
    ul.ranking li.p1 b, ul.ranking li.p2 b, ul.ranking li.p3 b {
        position: absolute;
        width: 40px;
        height: 40px;
        line-height: 40px;
        margin: -20px 0 0 30px;
    }
    
    ul.ranking li.p1 div, ul.ranking li.p2 div, ul.ranking li.p3 div {
        width: 100%;
        margin: 35px 0 15px 0;
    }
    
    ul.ranking li.p1 span, ul.ranking li.p2 span, ul.ranking li.p3 span {
        margin: 0;
        border-radius: 10px;
    }
    
    ul.ranking li.p1 { margin: 0 0 0 110px; }
    ul.ranking li.p1 div { height: 60px; }
    
    ul.ranking li.p2 { margin: 0 110px 0 -208px; }
    ul.ranking li.p2 div { height: 30px; }
    
    ul.ranking li.p1 b svg {
        position: absolute;
        width: 25px;
        margin: -21px 0 0 -8px;
        filter: drop-shadow(1px 1px 1px #000000cc) drop-shadow(-1px -1px 1px #000000cc);
    }

/*###########################
  ####### CONQUISTA #########
  ###########################*/
    
    section#conquista div.lista ul {
        margin: 125px auto 15px auto;
        text-align: center;
    }
    
    section#conquista div.lista ul li {
        display: inline-block;
        width: 110px;
        margin: 10px;
        border-radius: 10px;
        border: 1px solid #3c3c3c;
        background-color: #00000066;
    }
    
    section#conquista div.lista ul li img {
        width: 100%; 
        opacity: 0.5;
    }
    
    section#conquista div.lista ul li small {
        position: absolute;
        width: 50px;
        padding: 6px;
        border: 1px solid #585858;
        border-radius: 5px;
        margin: 39px 0 0 -80px;
        background-color: #ffffffcc;
    }
    
    section#conquista p {
        display: block;
        width: 330px;
        line-height: 20px;
        font-size: 0.8rem;
        text-align: center;
        margin: 0 auto 50px auto;
        background-image: linear-gradient(45deg, transparent, #ffffff, transparent);
    }
    
    section#conquista div.lista ul li.ativo img { opacity: 1; }
    section#conquista div.lista ul li.ativo small {
        width: 60px;
        margin: -1px 0 0 -59px;
        background-color: #FFC10799;
    }

/*###########################
  ######### SOBRE ###########
  ###########################*/

section#sobre{
    background-color:#999;
    background-blend-mode: multiply;
}

section#sobre h1.titulo{
    color: #fff;
    font-size: 20px;
    text-align: center;
    margin-top: 120px;
    padding: 10px 0;
    background-image: linear-gradient(90deg, transparent, #00000066, transparent);
}

section#sobre p{
    color: #fff;
    font-size: 18px;
    padding: 10px;
    margin: 10px 10px 50px 10px;
    text-align: justify;
    letter-spacing: 1px;
    background-image: linear-gradient(0deg, transparent, #00000033, transparent);
}

/*###########################
  ######## RODAPE ###########
  ###########################*/

footer{
	height: 20px;
	background: #CDDC39;
}

@media all and (min-width: 600px) {
     
}