/*TIMELINE*/
.timeline { width: 100%; height: auto; position: relative; padding: 30px 0px 0px 0px; z-index: 10; left: 0px; top: 0px; background-color: #ffffff; }
.timeline .titulo_timeline { display: inline-block; vertical-align: top; width: 100%; height: auto; position: relative; padding: 40px 0px 0px 0px; color: var(--cor-primaria); text-align: left; font-size: 24px; font-family: var(--cor-primaria); font-weight:700; }
.timeline .introducao_timeline { width: 90%; height: auto; position: relative; color: var(--cor-texto-default); font-family: var(--fonte-padrao); font-size: 14px; line-height: 24px; padding: 40px 5%; text-align: justify; text-align-last: left; font-weight:400; }
.timeline ol { width: 100%; height: auto; position: relative; clear: both; text-align: center; padding: 50px 0px 10px 0px; }
.timeline ol li { width: auto; height: auto; display: inline-block; font-size: 10px; font-family: var(--fonte-especial); position: relative;overflow: hidden; color: var(--cor-texto-default); text-align: center; line-height: 20px; margin: 0px 10px; padding: 0px; }
.timeline ol li:hover,
.timeline ol li#ativo { width: auto; border-bottom: 3px solid var(--cor-secundaria); height: auto; display: inline-block; font-size: 10px; font-family: var(--fonte-especial); position: relative;overflow: hidden; color: var(--cor-secundaria); text-align: center; line-height: 20px; margin: 0px 10px; padding: 0px; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }

.registros { width: 100%; height: auto;position: relative; clear: both; }
.registros ul { width: 100%; height: auto; position: relative; clear: both; text-align: center; }
.registros ul li { width: -moz-calc(100% - 80px); width: -webkit-calc(100% - 80px); width: -o-calc(100% - 80px); width: calc(100% - 80px); height: 260px; padding: 0px 40px; display: block; position: relative; clear: both;background-image: url(../imagens/divisor-timeline.png); background-repeat:repeat-y; background-position:center top;  -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; overflow: hidden; }
.registros ul li.dois {  background-color: rgba(255,255,255,0.3); }
.registros ul li .bloco1 { width: 400px; height: 180px; float: left; margin: 40px 0px; font-size: 16px; line-height: 20px; text-align: left; color: var(--cor-primaria); font-weight: 700; font-family: var(--fonte-padrao);-moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.registros ul li .bloco1 p { font-size: 12px; color: var(--cor-texto-default); line-height: 18px; font-family: var(--fonte-padrao); font-weight:400; }
.registros ul li .bloco2 { width: 300px; height: 180px; float: right; margin: 40px 0px; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.registros ul li .bloco2 img { width: 300px; height: 180px; display: block; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; overflow: hidden; }
.registros ul li .bloco2 .qual_ano { width: 300px; height: 180px; display: block; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; overflow: hidden; }
.registros ul li .bloco2 .qual_ano p { width: 300px; height: auto; line-height: 140px; padding-top: 30px; font-size: 15px; color: var(--cor-texto-default); font-family: var(--fonte-padrao); text-align: center; position: absolute; z-index: 10; }
.registros ul li .bloco2 .qual_ano i { font-size: 150px; line-height: 180px; color: var(--cor-texto-default); width: 100%; text-align: center; z-index: 9px; position: relative; }
.registros ul li .bloco3 { width: 400px; height: 180px; float: right; margin: 40px 0px; font-size: 16px; line-height: 20px; text-align: left; color: var(--cor-primaria); font-weight: 700; font-family: var(--fonte-padrao); -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.registros ul li .bloco3 p { font-size: 12px; color: var(--cor-texto-default); line-height: 18px; font-family: var(--fonte-padrao); font-weight:400; }
.registros ul li .bloco4 { width: 300px; height: 180px; float: left; margin: 40px 0px; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; }
.registros ul li .bloco4 img { width: 300px; height: 180px; display: block; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; overflow: hidden; }
.registros ul li .bloco4 .qual_ano { width: 300px; height: 180px; display: block; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; overflow: hidden; }
.registros ul li .bloco4 .qual_ano p { width: 300px; height: auto; line-height: 140px; padding-top: 30px; font-size: 15px; color: var(--cor-texto-default); font-family: var(--fonte-padrao); text-align: center; position: absolute; z-index: 10; }
.registros ul li .bloco4 .qual_ano i { font-size: 150px; line-height: 180px; color: var(--cor-texto-default); width: 100%; text-align: center; z-index: 9px; position: relative; }
.registros ul li .ano { left: 50%; margin: 90px 0px 0px -36px; position: absolute; width: 72px; font-size: 14px;  font-family: var(--fonte-especial); text-align: center; color: #ffffff; line-height: 72px; height: 72px; background-color: var(--cor-secundaria);  overflow: hidden; text-align: center; font-weight:700; letter-spacing:-1px; }
.registros ul li .play { cursor: pointer; margin-top: 0px; top: 40px; width: 300px; height: 180px; z-index: 5; position: absolute;  -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transition: all 0.3s ease;  overflow: hidden; }
.registros ul li .play i { width: 100%; line-height: 180px; color: red; font-size: 72px; }
.registros ul li:hover { background-color: #f4f6f8; }
.registros ul li:hover .bloco1 {  margin-left: 10px; }
.registros ul li:hover .bloco4 {  margin-left: 10px; }
.registros ul li:hover .bloco2 {  margin-right: 10px; }
.registros ul li:hover .bloco3 {  margin-right: 10px; }

@media screen and (max-width: 850px) {
	.timeline { width: 94%; float: none; padding: 0px 3%; position: relative; margin: 0px; }
	.timeline .anos { display: none; }

	.timeline .titulo_timeline { text-align:center; }
	.registros { padding: 80px 0px 0px 0px; }
	.registros ul li { height: auto; padding: 25px 40px;background-color: #f4f6f8; }
	.registros ul li .bloco1 { width: 300px; height: auto; float: none; background-color: #f4f6f8; display: inline-block; margin: 40px 0px 25px 0px; text-align: center; }
	.registros ul li .bloco2 { width: 300px; height: auto; float: none; display: inline-block; margin: 25px 0px; }
	.registros ul li .bloco2 img { width: 300px; height: 180px; float: none; display: inline-block; margin-bottom: 40px; }
	.registros ul li .bloco3 { width: 300px; height: auto; float: none; background-color: #f4f6f8; display: inline-block; margin: 40px 0px 25px 0px; text-align: center; }
	.registros ul li.dois .bloco3 { background-color: #f4f6f8; }
	.registros ul li .bloco4 { width: 300px; height: auto; float: none; display: inline-block; margin: 25px 0px; }
	.registros ul li .bloco4 img { width: 300px; height: 180px; margin-bottom: 40px; }
	.registros ul li .ano { left: 50%; margin:-32px 0px 0px -36px; position: absolute; width: 72px; font-size: 14px; text-align: center; line-height: 50px; height: 50px; overflow: hidden; text-align: center; }
	.registros ul li .play { display: none; }
}