#myVideo {right: 0; bottom: 0; min-width: 100%; min-height: 100%; z-index: 900; margin-top: 0px;}
.bgvid{width: 100%; overflow: hidden; margin-top: -100px;}
#myVideomob {right: 0; bottom: 0; min-width: 100%; min-height: 100vh; z-index: 900; margin-top: 0px;}
.textura {width: 100%; height: calc(100vh + 100px); position: absolute; padding: 200px 10% 100px; display: flex; justify-content: center; align-items: center; z-index: 1000;}
.textura .conteudo{width: 100%;}
.textura .conteudo .selo{max-width: 90%; height: auto;}
.textura .conteudo ul{font-family: 'fontes/broken_consoleregular'; list-style: none; margin-left: -50px;}
.textura .conteudo ul li {color: #fff; font-size: 173%; margin: 15px 0px; transition: .3s; padding-left: 45px; line-height: 120%;}
.textura .conteudo ul li:hover{background: url(images/trilha/u.png) no-repeat top left;}
.textura .conteudo ul li a{color:  #fff;}
.textura .conteudo ul li:hover a{color:  #ff8e14;}
.trilha .iniciar{background: rgb(0,4,20); background: url(images/trilha/estrelas.png) center top 100px no-repeat, url(images/trilha/blocos.png) bottom right no-repeat, url(images/trilha/blocos-1.png) bottom left 10% no-repeat, url(images/trilha/chamine.png) bottom left 40% no-repeat, linear-gradient(180deg, rgba(0,4,20,1) 0%, rgba(0,78,123,1) 95%); background-size: 85% auto, 450px auto, 250px auto, 200px auto; padding: 150px 10% 180px; margin-top: -10px;}
.trilha .iniciar .tv {background: url(images/trilha/tv.png) no-repeat center top; width: 100%; height: 1200px; background-size: 90% auto; padding: 15% 19%;}
.trilha .iniciar .tv .selo{max-width: 80%; width: max-content; display: block; margin: 140px auto 50px; height: auto;}
.trilha .iniciar .tv .modulos{padding: 80px 80px; color: #fff; font-family: 'fontes/broken_consoleregular'; font-size: 150%; transition: .3s;}
.trilha .iniciar .tv .modulos .modulo {text-align: center; padding: 0px 0px 5px; margin: 0; width: max-content; cursor: pointer;}
.trilha .iniciar .tv .modulos .modulo:hover{border-bottom: solid 2px #fff;}
.trilha .apresentacao{padding: 100px 10% 150px;}
.trilha .apresentacao .head{color:  #ff8e14; font-family: 'fontes/broken_consoleregular'; font-size: 250%; margin-bottom: 20px;}
.trilha .apresentacao .descricao p{color:  #fff; font-family: 'Montserrat', sans-serif; font-size: 120%; line-height: 180%; margin: 15px 0px}
.trilha .ead{color: #fff; background: url(images/trilha/bg-terra.png) no-repeat top -200px center, url(images/trilha/tocha.png) right 6% top 30% no-repeat, url(images/trilha/tocha.png) left 3%  top 60% no-repeat, url(images/trilha/parede.png) bottom 0px center no-repeat, #923f00; background-size: 100%, 250px auto, 250px auto; padding: 0px 0px 100px;}
.trilha .ead .grama{width: 100%; height: auto;}
.trilha .ead .conteudo{padding: 150px 20% 0;}
.trilha .ead .head{color:  #fff; font-family: 'fontes/broken_consoleregular'; font-size: 250%; margin-bottom: 20px;}
.trilha .ead .descricao p{color:  #fff; font-family: 'Montserrat', sans-serif; font-size: 120%; line-height: 180%; margin: 15px 0px}
.trilha .unigame{width: 1242px; height: 800px; margin: 60px auto 0;position: relative; }
.trilha .unigame .score {color:  #fff; font-family: 'fontes/broken_consoleregular'; font-size: 180%; padding-top: 5px; text-align: center; }
.trilha .unigame .stage {bottom: 0; left: 0; height: 720px; margin: auto; position: absolute; right: 0; top: 100px; z-index: 2; background: #222; background: radial-gradient(#333, #111); background-position: center center; background-repeat: no-repeat; background-size: cover; color: #fff; font: 100%/1.5 sans-serif; overflow: hidden;}
.trilha .unigame .tile {background: rgba(0, 0, 0, 0.15); position: absolute; transition-property: background, box-shadow, opacity, transform ; transform: translateZ(0); transition-duration: 3000ms; }
.trilha .unigame .tile:before {bottom: 0; content: ''; height: 0; left: 0; margin: auto; opacity: 0; position: absolute; right: 0; top: 0; width: 0; transition: opacity 300ms; }
.trilha .unigame .tile.path:before {opacity: 1; }
.trilha .unigame .tile.up:before {border-bottom: 4px inset rgba(255, 255, 255, 0.15); border-left: 4px solid transparent; border-right: 4px solid transparent; }
.trilha .unigame .tile.down:before {border-top: 4px inset rgba(255, 255, 255, 0.15); border-left: 4px solid transparent; border-right: 4px solid transparent; }
.trilha .unigame .tile.left:before {border-right: 4px inset rgba(255, 255, 255, 0.15); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.trilha .unigame .tile.right:before {border-left: 4px inset rgba(255, 255, 255, 0.15); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.trilha .unigame .tile.pressed {background: rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6); transition-duration: 0ms; }
.trilha .ead .sub{color:  #fff; font-family: 'fontes/broken_consoleregular'; font-size: 150%; margin: 100px 0 0px; text-align: center;}
.trilha .chao {width: 100%; height: 115px; background: url(images/trilha/chao.png) repeat-x; background-size: contain;}
.trilha .modal{background: #00275d85; backdrop-filter: blur(13px);}
.trilha .modal-content{background: transparent; border: 0; color: #fff;}
.trilha .modal-header{border: 0; padding: 0 0 10px; font-weight: 600; font-size: 130%; font-family: 'Montserrat', sans-serif; color: #ff8e14}
.trilha .modal-header h5{margin: 0; font-family: 'fontes/broken_consoleregular'; color:  #fff; font-size: 150%;}
.trilha .modal-title{font-weight: 700;}
.trilha .modal-body{padding: 0px; line-height: 180%;}
.trilha .modal-body a{background: #ff8e14; padding: 3px 15px; display: block; width: max-content; border-radius: 8px; margin-top: 10px; color: #fff; transition: .3s}
.trilha .modal-body a:hover{background: #fff; color: #ff8e14;}
.trilha .close:not(:disabled):not(.disabled) {cursor: pointer;font-family: 'fontes/broken_consoleregular'; background: #ff8e14; opacity: 1; width: 50px; height: 50px;font-size: 150%; line-height: 60px; padding: 0; color: #fff; border-radius: 50%; margin-top: 0; position: absolute; right: -65px; top: 0; text-shadow: none; transition: .3s}
.trilha .close:not(:disabled):not(.disabled):hover{opacity: 1; color: #ffff; background: #ff8e14;}
.trilha .close:not(:disabled):not(.disabled):hover, .trilha .close:not(:disabled):not(.disabled):focus{opacity: 1}
.trilha  button:focus{outline: none; border: 0;}

@font-face {font-family: 'fontes/broken_consoleregular'; src: url('fontes/broken_console_regular-webfont.woff2') format('woff2'), url('fontes/broken_console_regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }

@media screen and (max-width: 1500px) {
#myVideo{width: 100%;}	
.textura .conteudo ul li{font-size: 130%;}
.textura .conteudo ul li:hover {background-size: auto 80%;}
.textura .conteudo ul li{padding-left: 30px;}
.trilha .iniciar .tv{padding: 15% 19% 0; height: 800px;}
.trilha .iniciar .tv .selo{margin: 80px auto 50px;}
.trilha .iniciar .tv .moeda, .trilha .iniciar .tv .vidas{height: 35px; width: auto;}
.trilha .iniciar .tv .modulos{padding: 25px; font-size: 120%;}
.trilha .apresentacao .descricao p{font-size: 100%;}
.trilha .ead .descricao p{font-size: 100%;}
.trilha .ead .grama{margin-top: -2px;}
.trilha .ead .sub{margin-top: 60px;}
.trilha .unigame {width: 1242px; height: 580px; margin: 60px auto 0;}
}

@media (max-width: 900px){
.trilha .unigame .tile.up:before, .trilha .unigame .tile.down:before, .trilha .unigame .tile.left:before, .trilha .unigame .tile.right:before {border-width: 3px; }
.trilha .unigame {width: 0; height: 0; margin: 0; display: none;}
.textura .conteudo ul .unimage-menu{display: none}
.textura {width: 100%; height: calc(75vh + 100px); position: absolute; padding: 120px 10% 100px; display: flex; justify-content: center; z-index: 1000; align-items: flex-start;}
#myVideo {width: 150%; height: 80vh; background-size: cover; align-items: center; float: unset; margin: 150px 0 -104px -80px; display: block; object-fit: scale-down;}
.textura .conteudo .selo {max-width: 100%; height: auto; display: block; margin: 0 auto 20px;}
.textura .conteudo ul {font-family: 'fontes/broken_consoleregular'; list-style: none; margin-left: -26px;}
.textura .conteudo .selo {max-width: 90%; height: auto; display: block; margin: 0 auto 19px 0;}
.bgvid{background: #000;}
.trilha .iniciar {background: rgb(0,4,20); background: url(./images/trilha/estrelas.png) center top 50px no-repeat, url(./images/trilha/blocos.png) bottom right no-repeat, url(./images/trilha/blocos-1.png) bottom left 6% no-repeat, url(./images/trilha/chamine.png) bottom left 40% no-repeat, linear-gradient(180deg, rgba(0,4,20,1) 0%, rgba(0,78,123,1) 95%); background-size: 99% auto, 290px auto, 140px auto, 117px auto; padding: 115px 7% 130px; } 
.trilha .iniciar .tv {padding: 17% 13% 0; height: 580px; background-size: 110% auto;}
.trilha .iniciar .tv .moeda, .trilha .iniciar .tv .vidas {height: 30px; width: auto;}
.trilha .iniciar .tv .selo {margin: 60px auto 15px;}
.trilha .iniciar .tv .modulos .modulo {text-align: center; padding: 10px 0px; margin: 0; width: unset; cursor: pointer;}
.trilha .apresentacao {padding: 70px 5% 50px;}
.trilha .ead .sub{display: none;}
.trilha .ead .conteudo {padding: 85px 12% 0;}
.trilha .ead {color: #fff; background: url(./images/trilha/bg-terra.png) no-repeat top -200px center, url(./images/trilha/tocha.png) right -9% top -7% no-repeat, url(./images/trilha/tocha.png) left -19% top 66% no-repeat, url(./images/trilha/parede.png) bottom -133px center no-repeat, #923f00; background-size: 100%, 250px auto, 250px auto; padding: 0px 0px 90px; }
}
@media (max-width: 500px){
.trilha .unigame .tile.up:before, .trilha .unigame .tile.down:before, .trilha .unigame .tile.left:before, .trilha .unigame .tile.right:before {border-width: 2px; }
.textura .conteudo .selo {max-width: 100%;}
#myVideo {width: 187%; height: 75vh; background-size: cover; align-items: center; float: unset; margin: 150px 0 -74px -63px; display: block; object-fit: scale-down}
.textura .conteudo ul li {font-size: 109%;}
.trilha .iniciar .tv .moeda, .trilha .iniciar .tv .vidas {height: 20px; width: auto;}
.trilha .iniciar .tv .selo {margin: 33px auto 15px; max-width: 65%;}
.trilha .iniciar .tv .modulos {padding: 0px 0; font-size: 100%;}
.trilha .iniciar .tv .modulos .modulo{padding: 5px 0px;}
.trilha .iniciar .tv {padding: 17% 13% 0; height: 320px;}
.trilha .apresentacao {padding: 35px 5% 50px;}
.trilha .apresentacao .head{font-size: 220%;}
.trilha .iniciar {background: rgb(0,4,20); background: url(./images/trilha/estrelas.png) center top 50px no-repeat, url(./images/trilha/blocos.png) bottom right no-repeat, url(./images/trilha/blocos-1.png) bottom left -15% no-repeat, url(./images/trilha/chamine.png) bottom left 31% no-repeat, linear-gradient(180deg, rgba(0,4,20,1) 0%, rgba(0,78,123,1) 95%); background-size: 99% auto, 185px auto, 95px auto, 74px auto; padding: 115px 7% 56px; }
.trilha .ead .conteudo {padding: 80px 12% 0;}
.trilha .ead {color: #fff; background: url(./images/trilha/bg-terra.png) no-repeat top -200px center, url(./images/trilha/tocha.png) right -27% top -5% no-repeat, url(images/trilha/tocha.png) left -30% bottom 1% no-repeat, url(./images/trilha/parede.png) bottom -42px center no-repeat, #923f00; background-size: 100%, 200px auto, 166px auto; padding: 0px 0px 37px; }
.trilha .chao {width: 100%; height: 80px; background: url(./images/trilha/chao.png) repeat-x; background-size: cover;}
.trilha .close:not(:disabled):not(.disabled){right: 27px; top: -80px;}
.trilha .modal-dialog{margin:  15px;}
.trilha .ead .grama {margin-top: -7px;}
}