/* reset css */
* { box-sizing:border-box; }
html,
body { margin:0 auto; padding:0; width:100%; max-width:1920px; font-family:'Raleway'; font-size:16px; color:#010101; line-height:normal; font-weight:400; }
body.index { background:url(../img/fundo.png) top center; background-size:cover; overflow-x:hidden; }

header,
main,
section,
div,
article,
aside,
form,
fieldset,
footer { display:block; position:relative; margin:0; padding:0; border:none; }

h1, h2, h3, h4, h5, h6, p { margin:0; padding:0; }
ul, ol { margin:0; padding:20px 0 0 20px; list-style-position:outside; }
img,
figure,
iframe,
embed,
object,
video { display:block; max-width:100%; margin:0; padding:0; border:none; }

input[type=submit],
input[type=button],
input[type=file] { cursor:pointer; }
input,
button,
select,
option,
optgroup,
textarea { display:block; margin:0; padding:0; font-family:'Raleway'; font-size:16px; color:#010101; line-height:normal; font-weight:400; outline:none; border:none; }

a { color:#5b5d62; }

input:focus::-moz-placeholder { opacity:0 !important; }
input:focus:-moz-placeholder { opacity:0 !important; }
input:focus:-ms-input-placeholder { opacity:0 !important; }
input:focus::-webkit-input-placeholder { opacity:0 !important; }

textarea:focus:-moz-placeholder { opacity:0 !important; }
textarea:focus::-moz-placeholder { opacity:0 !important; }
textarea:focus:-ms-input-placeholder { opacity:0 !important; }
textarea:focus::-webkit-input-placeholder { opacity:0 !important; }

:-moz-placeholder { opacity:1 !important; color:#000 !important; }
::-moz-placeholder { opacity:1 !important; color:#000 !important; }
:-ms-input-placeholder { opacity:1 !important; color:#000 !important; }
::-webkit-input-placeholder { opacity:1 !important; color:#000 !important; }

/* entrada */
#entrada { width:92%; max-width:440px; height:auto; padding:25px 0; margin:0 auto; }
#entrada .atracao-gratuita { position:absolute; width:95px; height:95px; top:10px; right:0; background:url(../img/atracao-gratuita.png); background-size:cover; animation:spinner 30s linear 0s infinite; }

#entrada figure { width:auto; height:auto; text-align:center; }
#entrada figure img { max-width:100%; margin:0 auto; }

#entrada .miolo { width:auto; height:auto; text-align:center; margin-top:25px; }
#entrada .miolo h1 { font-size:28px; color:#751417; font-weight:bold; line-height:1; text-transform:uppercase; margin-bottom:15px; }
#entrada .miolo p { font-size:16px; color:#010101; line-height:1.4; margin-bottom:15px; }
#entrada .miolo p:last-child { margin-bottom:0; }

#entrada .fazer-reserva { width:auto; height:auto; text-align:center; margin-top:25px; }
#entrada .fazer-reserva a { display:inline-block; font-size:18px; color:#d5ad7b; line-height:1; font-weight:bold; padding:12px 20px; background:#fff; text-decoration:none; text-transform:uppercase; transition:all 0.3s; }
#entrada .fazer-reserva a:hover { background:#690618; transition:all 0.3s; }

/* agendamento */
#agendamento { width:92%; max-width:440px; height:auto; padding:25px 0; margin:0 auto; }
#agendamento .atracao-gratuita { position:absolute; width:80px; height:80px; top:10px; right:0; background:url(../img/atracao-gratuita.png); background-size:cover; animation:spinner 30s linear 0s infinite; }

#agendamento figure { width:auto; height:auto; text-align:center; }
#agendamento figure img { max-width:100px; margin:0 auto; }

#agendamento .miolo { width:auto; height:auto; background:#fff; text-align:center; margin-top:25px; }
#agendamento .miolo .etapas { display:flex; width:100%; height:auto; }
#agendamento .miolo .etapas span { width:calc(100% / 3); color:#fff; line-height:1; text-decoration:none; padding:10px 10px; background:#f2e6d7; transition:all 0.3s; }
#agendamento .miolo .etapas span:nth-child(2n+0) { background:#ead6bd; }
#agendamento .miolo .etapas span.ativo,
#agendamento .miolo .etapas span:hover { background:#d5ad7b; transition:all 0.3s; }

#agendamento .miolo .etapa-1 { width:auto; height:auto; }
#agendamento .miolo .etapa-1 .centro { width:auto; height:auto; padding:15px; }
#agendamento .miolo .etapa-1 .centro p { font-size:14px; color:#010101; line-height:1.2; text-align:left; }
#agendamento .miolo .etapa-1 .centro .calendario { width:100%; height:auto; margin:15px 0; }
#agendamento .miolo .etapa-1 .centro .calendario .carregando { display:flex; height:45px; justify-content:center; }
#agendamento .miolo .etapa-1 .centro .legendas { display:flex; width:100%; margin-bottom:15px; flex-wrap:wrap; }
#agendamento .miolo .etapa-1 .centro .legendas div { display:flex; width:50%; font-size:10px; text-transform:uppercase; text-align:left; margin-bottom:5px; flex-wrap:wrap; justify-content:flex-start; letter-spacing:0.5px; }
#agendamento .miolo .etapa-1 .centro .legendas div > span { width:11px; height:11px; margin-right:6px; }
#agendamento .miolo .etapa-1 .centro .legendas div.parque-aberto span { background:#d5ad7b }
#agendamento .miolo .etapa-1 .centro .legendas div.data-selecionada span { background:#2b9f28 }
#agendamento .miolo .etapa-1 .centro .legendas div.parque-fechado span { background:#e5e5e5 }
#agendamento .miolo .etapa-1 .centro .legendas div.esgotado span { background:#c2acac }

#agendamento .miolo .etapa-2 { width:auto; height:auto; }
#agendamento .miolo .etapa-2 .centro { width:auto; height:auto; padding:15px; }
#agendamento .miolo .etapa-2 .centro p { font-size:14px; color:#010101; line-height:1.2; text-align:left; }
#agendamento .miolo .etapa-2 .centro .data-selecionada { font-size:20px; color:#640517; font-weight:bold; margin:15px 0 0 0; }
#agendamento .miolo .etapa-2 .horarios { width:100%; height:auto; margin:15px 0; }
#agendamento .miolo .etapa-2 .horarios .carregando { display:flex; height:45px; justify-content:center; }
#agendamento .miolo .etapa-2 .horarios .item { display:flex; width:auto; padding:15px; background:#f7f7f7; flex-wrap:wrap; justify-content:space-between; align-items:center; }
#agendamento .miolo .etapa-2 .horarios .item:nth-child(even) { background:#fbfbfb; }
#agendamento .miolo .etapa-2 .horarios .item label { display:flex; width:62%; font-size:14px; flex-wrap:wrap; justify-content:flex-start; align-items:center; }
#agendamento .miolo .etapa-2 .horarios .item label input { margin-right:5px; }
#agendamento .miolo .etapa-2 .horarios .item label span { display:block; width:100%; font-weight:bold; }
#agendamento .miolo .etapa-2 .horarios .item select { width:90px; font-size:13px; padding:5px; background:#f4efea; }

#agendamento .miolo .etapa-3 { width:auto; height:auto; }
#agendamento .miolo .etapa-3 .centro { width:auto; height:auto; padding:15px; }
#agendamento .miolo .etapa-3 .centro p { font-size:14px; color:#010101; line-height:1.2; text-align:left; }
#agendamento .miolo .etapa-3 .ingressos { width:100%; height:auto; margin:0 0 15px 0; }
#agendamento .miolo .etapa-3 .ingressos .carregando { display:flex; height:45px; justify-content:center; }
#agendamento .miolo .etapa-3 .ingressos h3 { font-size:14px; line-height:1.1; text-align:left; font-weight:normal; padding:15px; background:#eaeaea; }
#agendamento .miolo .etapa-3 .ingressos .ingresso { display:flex; width:auto; padding:15px; background:#f7f7f7; flex-wrap:wrap; justify-content:space-between; }
#agendamento .miolo .etapa-3 .ingressos .ingresso:nth-child(even) { background:#fbfbfb; }
#agendamento .miolo .etapa-3 .ingressos .ingresso input[type=text],
#agendamento .miolo .etapa-3 .ingressos .ingresso select { width:49%; font-size:12px; color:#000; padding:10px; background:none; margin-bottom:10px; border:#eeeef2 1px solid; }
#agendamento .miolo .etapa-3 .ingressos .ingresso input[type=text].erro,
#agendamento .miolo .etapa-3 .ingressos .ingresso select.erro { border:#d00 1px solid; }

#agendamento .miolo .retorno-etapas { display:none; width:100%; font-size:16px; font-weight:bold; margin-bottom:45px; padding:0 15px; }
#agendamento .miolo .retorno-etapas.fundo-erro { color:#d00; }
#agendamento .miolo .retorno-etapas.fundo-sucesso { color:#2b9f28; }

#agendamento .miolo .proximo { display:flex; width:100%; height:auto; flex-wrap:wrap; justify-content:space-between; }
#agendamento .miolo .proximo .trem { width:86%; }
#agendamento .miolo .proximo .trem .trilho { position:absolute; width:100%; height:2px; top:31px; background-color:#333; }
#agendamento .miolo .proximo .trem .trilho > div { position:absolute; width:100%; height:2px; background:url(../img/trilho.png); top:2px; animation:move 1s linear infinite reverse; }

#agendamento .miolo .proximo .trem .carro { width:146px; height:31px; margin-left:5px; background:url(../img/trenzinho.png); background-size:contain; background-repeat:no-repeat; }
#agendamento .miolo .proximo .trem .carro .sobe { position:absolute; width:15px; height:15px; top:-16px; right:7px; background-color:#e5e5e5; border-radius:50%; opacity:0; z-index:1; }
#agendamento .miolo .proximo .trem .carro .bolha { animation:up 2.5s ease-out infinite; }
#agendamento .miolo .proximo .trem .carro .bolha2 { animation:up 1.7s ease-out infinite 1s; }
#agendamento .miolo .proximo .trem .carro .bolha2:before { content:''; position:absolute; width:10px; height:10px; top:10px; left:-5px; background-color:#e5e5e5; border-radius:50%; }

#agendamento .miolo .proximo .trem.etapa-2 .carro { margin-left:22%; }
#agendamento .miolo .proximo .trem.etapa-3 .carro { margin-left:38%; }

#agendamento .miolo .proximo .botao { width:14%; }
#agendamento .miolo .proximo .botao a { display:block; width:100%; font-size:22px; color:#fff; line-height:0.5; font-weight:bold; text-decoration:none; padding:12px 0; background:#65061a; }

/* sucesso */
#sucesso { width:92%; max-width:440px; height:auto; padding:25px 0; margin:0 auto; }
#sucesso .atracao-gratuita { position:absolute; width:80px; height:80px; top:10px; right:0; background:url(../img/atracao-gratuita.png); background-size:cover; animation:spinner 30s linear 0s infinite; }

#sucesso figure { width:auto; height:auto; text-align:center; }
#sucesso figure img { max-width:100px; margin:0 auto; }

#sucesso .miolo { width:auto; height:auto; padding:50px 40px; background:#640211; background-blend-mode:multiply; text-align:center; margin-top:25px; }
#sucesso .miolo h2 { font-size:25px; color:#d5ad7b; line-height:1; text-align:center; font-weight:normal; text-transform:uppercase; margin-bottom:20px; }
#sucesso .miolo p { font-size:18px; color:#fff; line-height:1.2; margin-bottom:15px; }
#sucesso .miolo p a { color:#fff; }
#sucesso .miolo .email-whats { display:flex; width:auto; height:auto; flex-wrap:wrap; justify-content:center; align-items:center; }
#sucesso .miolo .email-whats a { width:auto; height:auto; margin:0 10px; }
#sucesso .miolo .email-whats a img { max-width:100%; height:auto; vertical-align:middle; }

/* -- animacao */
@keyframes spinner {  
	0% { transform:rotate(0deg); }
	100% { transform:rotate(-1turn); }
}
@keyframes move {
	/*
	from { background-position:-45px; }
	to { background-position:45px; }
	*/
	from { background-position:-40px; }
	to { background-position:40px; }
}
@keyframes up {
	0% {
		transform:translateY(0) translateX(0) scale(0.5);
		opacity:1;
	}
	100% {
		transform:translateY(-35px) translateX(-15px) scale(1.5);
		opacity:0.2;
	}
}