@charset "utf-8";

#cursando { float: left; width: 100%; padding: 50px 0 0;}
#cursando .fundo { position: fixed; width: 35%; height: 100%; top: 0; left: 0; z-index: -10; background-color: rgb(15, 35, 51);}
#cursando .esquerda { float: left; width: 35%;}
#cursando .direita { float: right; width: 65%; min-height: 600px;}

#cursando .grade { float: left; width: 100%; position: relative; z-index: 5; background-color: rgb(15, 35, 51);}
#cursando .grade .nun { position: absolute; width: 30px; top: 18px; left: 10px; padding: 15px 0; background-color: rgb(255, 255, 255, 20%); text-align: center; font-weight: bold; font-style: normal; font-size: 1em; line-height: 0; color: rgb(255, 255, 255, 50%); -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#cursando .grade .modulo { float: left; width: 100%; position: relative; padding: 27px 0 25px; border-bottom: 1px solid rgb(9, 15, 20); cursor: pointer; background-position: 97% 50%; background-repeat: no-repeat;}
#cursando .grade .modulo b { float: left; margin: 0 30px 0 50px; text-transform: uppercase; line-height: 1; color: rgb(255, 255, 255);}
#cursando .grade .modulo i { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#cursando .grade .modulo i.fecha { display: none;}
#cursando .grade .modulo.ok { background-image: url('../imagens/ok.png');}
#cursando .grade .modulo.ok .nun { background-color: rgb(47, 160, 104); color: rgb(255, 255, 255);}
#cursando .grade .modulo:hover { background-color: rgb(52, 68, 74);}
#cursando .grade .submenu { float: left; width: 100%;}
#cursando .grade .submenu .opcoes { float: right; width: 90%; display: none;}
#cursando .grade .submenu .opcoes .aula { float: left; width: 100%; cursor: not-allowed; position: relative; padding: 27px 0 25px; border-bottom: 1px solid rgb(9, 15, 20); background-color: rgb(64, 86, 95); background-position: 97% 50%; background-repeat: no-repeat; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
#cursando .grade .submenu .opcoes .aula b { float: left; margin: 0 35px 0 50px; font-weight: normal; line-height: 1; font-size: 1.1em; color: rgb(255, 255, 255);}
#cursando .grade .submenu .opcoes .aula:hover { background-color: rgb(30, 82, 101);}
#cursando .grade .submenu .opcoes .aula.ativo { background-color: rgb(30, 82, 101);}
#cursando .grade .submenu .opcoes .aula.ok { background-image: url('../imagens/ok.png');}
#cursando .grade .submenu .opcoes .aula.ok .nun { background-color: rgb(47, 160, 104); color: rgb(255, 255, 255);}
#cursando .grade .submenu .opcoes .aula.pointer { cursor: pointer;}
#cursando .grade .submenu.ativo .modulo { background-color: rgb(52, 68, 74);}
#cursando .grade .avaliacao { float: left; width: 100%; cursor: not-allowed; position: relative; padding: 27px 0 25px; border-bottom: 1px solid rgb(9, 15, 20); background-color: rgb(64, 86, 95); background-position: 97% 50%; background-repeat: no-repeat; background-position: 97% 50%; background-repeat: no-repeat; -webkit-border-top-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-bottomleft: 10px; border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
#cursando .grade .avaliacao b { float: left; margin: 0 0 0 50px; text-transform: uppercase; line-height: 1; color: rgb(255, 255, 255);}
#cursando .grade .avaliacao em { position: absolute; width: 30px; height: 30px; top: 18px; left: 10px; background-image: url('../imagens/avaliacao.png'); background-position: 50%; background-repeat: no-repeat;}
#cursando .grade .avaliacao:hover { background-color: rgb(30, 82, 101);}
#cursando .grade .avaliacao.ok { background-image: url('../imagens/ok.png');}
#cursando .grade .avaliacao.lock { background-image: url('../imagens/lock.png');}
#cursando .grade .avaliacao.ativo { background-color: rgb(30, 82, 101);}
#cursando .grade .avaliacao.pointer { cursor: pointer;}

#cursando .exibiaula { float: left; width: 92%; margin: 10px 4% 20px;}
#cursando .exibiaula .nome { float: left; width: 98%; padding: 10px 1% 8px; background-color:rgb(255, 255, 255);}
#cursando .exibiaula .nome .modulo { float: left; font-size: 1.2em;}
#cursando .exibiaula .nome .modulo strong { float: left; width: 24px; padding: 13px 0 11px; background-color: rgb(15, 35, 51); text-align: center; font-style: normal; line-height: 0; font-size: 0.9em; color: rgb(200, 200, 200); -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#cursando .exibiaula .nome .modulo b { float: left; margin: 2px 0 0 5px; font-weight: normal;}
#cursando .exibiaula .nome .aula { float: left; margin: 0 0 0 20px; font-size: 1.2em;}
#cursando .exibiaula .nome .aula strong { float: left; width: 24px; padding: 13px 0 11px; background-color: rgb(15, 35, 51); text-align: center; font-style: normal; line-height: 0; font-size: 0.9em; color: rgb(200, 200, 200); -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#cursando .exibiaula .nome .aula b { float: left; margin: 2px 0 0 5px;}
#cursando .exibiaula .video { float: left; width: 100%; margin: 8px 0 10px;}
#cursando .exibiaula .video .iframe { position: relative; width: 100%; padding-bottom: 55%; overflow: hidden;}
#cursando .exibiaula .video .iframe iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#cursando .exibiaula .apostilas { float: left; width: 100%; margin: 0 0 10px;}
#cursando .exibiaula .apostilas .tab { float: left; width: 18%; margin: 0 1%;}
#cursando .exibiaula .apostilas .tab strong { float: left; width: 100%; padding: 8px 0 5px; background-color: rgb(200, 200, 200); background-image: url('../imagens/pdf.png'); background-position: 5px 50%; background-repeat: no-repeat; text-transform: uppercase; text-align: center; font-size: 0.9em; color: rgb(33, 45, 49); -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px;}
#cursando .exibiaula .apostilas .tab b { float: left; width: 100%; padding: 10px 0 8px; background-color: rgb(33, 45, 49); text-align: center; color: rgb(200, 200, 200); -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;}
#cursando .exibiaula .apostilas .tab:hover strong { background-color: rgb(150, 150, 150);}
#cursando .exibiaula .apostilas .tab:hover b { background-color: rgb(15, 35, 51);}
#cursando .exibiaula .texto { float: left; width: 98%; margin: 0 1%; font-size: 1.2em;}
#cursando .exibiaula .texto h1 { font-weight: bold;}
#cursando .exibiaula .texto h2 { font-weight: bold;}
#cursando .exibiaula .texto h3 { font-weight: bold;}
#cursando .exibiaula .texto li { float: left; width: 100%; margin: 5px 0 0;}
#cursando .exibiaula .texto a { color: rgb(0, 119, 255);}
#cursando .exibiaula .texto a:hover { text-decoration: underline;}
#cursando .exibiaula .texto strong { text-transform: uppercase;}
#cursando .exibiaula .texto img { max-width: 100%;}
#cursando .exibiaula .texto iframe { max-width: 100%;}
#cursando .exibiaula .proxima { float: left; width: 94%; padding: 20px 3%; background-color: rgb(47, 160, 104); text-align: center;}
#cursando .exibiaula .proxima h3 { float: left; width: 100%; margin: 10px 0 0; font-size: 1.1em;}
#cursando .exibiaula .proxima input { padding: 15px 23px 13px 40px; cursor: pointer; background-color: rgb(17, 49, 29); background-image: url('../imagens/ok.png'); background-position: 15px 52%; background-repeat: no-repeat; text-transform: uppercase; font-weight: bold; font-size: 1.2em; color: rgb(47, 160, 104); -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#cursando .exibiaula .proxima input:hover { background-color: rgb(9, 15, 20);}

#cursando .exibiavaliacao { float: left; width: 92%; margin: 10px 4% 20px;}
#cursando .exibiavaliacao .pergunta { float: left; width: 100%; margin: 10px 0 0;}
#cursando .exibiavaliacao .pergunta .nome { float: left; width: 100%; position: relative;}
#cursando .exibiavaliacao .pergunta .nome em { position: absolute; width: 40px; padding: 21px 0 19px; background-color: rgb(71, 101, 112); text-align: center; font-weight: bold; font-style: normal; line-height: 0; font-size: 1.5em; color: rgb(255, 255, 255); -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#cursando .exibiavaliacao .pergunta .nome b { float: left; margin: 10px 0 0 50px; font-size: 1.3em;}
#cursando .exibiavaliacao .pergunta .alternativas { float: right; width: 94%; margin: 10px 0 0;}
#cursando .exibiavaliacao .pergunta .alternativas .marque { float: left; width: 100%;}
#cursando .exibiavaliacao .pergunta .alternativas .marque .radio { display: none;}
#cursando .exibiavaliacao .pergunta .alternativas .marque .radio + label { float: left; width: 96%; padding: 15px 2% 13px; margin: 2px 0; background-color: rgb(255, 255, 255); font-size: 1.1em; cursor: pointer; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; -webkit-box-shadow: 0 0 12px 0 rgb(0 0 0 / 20%); -moz-box-shadow: 0 0 12px 0 rgb(0 0 0 / 20%); box-shadow: 0 0 12px 0 rgb(0 0 0 / 10%);}
#cursando .exibiavaliacao .pergunta .alternativas .marque .radio:checked + label { background-color: rgb(71, 101, 112); color: rgb(255, 255, 255);}
#cursando .exibiavaliacao .pergunta .proxima { float: left; padding: 17px 35px 15px; margin: 10px 0 0 6%; background-color: rgb(47, 160, 104); cursor: pointer; font-size: 1.3em; color: rgb(255, 255, 255); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;}
#cursando .exibiavaliacao .pergunta .proxima:hover { background-color: rgb(37, 134, 86);}
#cursando .exibiavaliacao .passos { float: right; width: 94%; margin: 15px 0 0;}
#cursando .exibiavaliacao .passos strong { float: left; width: 100%; margin: 3px 0 0; text-transform: uppercase; font-weight: normal; font-size: 1.2em;}
#cursando .exibiavaliacao .passos strong i { font-style: normal; font-size: 0.8em;}
#cursando .exibiavaliacao .passos strong b { float: left; width: 40px; padding: 22px 0 18px; background-color: rgb(200, 200, 200); text-align: center; line-height: 0;}
#cursando .exibiavaliacao .passos strong em { float: left; width: 40px; padding: 22px 0 18px; background-color: rgb(255, 255, 255); text-align: center; font-style: normal; line-height: 0; font-size: 0.8em; -webkit-box-shadow: 0 0 7px 0 rgb(0 0 0 / 10%); -moz-box-shadow: 0 0 12px 0 rgb(0, 0, 0, 10%); box-shadow: 0 0 12px 0 rgb(0 0 0 / 10%);}
#cursando .exibiavaliacao .resultados { float: left; width: 100%;}
#cursando .exibiavaliacao .resultados .tab { float: left; width: 96%; position: relative; padding: 2%; margin: 0 0 10px; background-color: rgb(255, 255, 255);}
#cursando .exibiavaliacao .resultados .tab .novamente { float: left; width: 100%;}
#cursando .exibiavaliacao .resultados .tab .novamente .botao { float: left; width: 100%; padding: 10px 0 8px; margin: 0 0 5px; background-color: rgb(47, 160, 104); cursor: pointer; text-align: center; font-size: 1.1em; color: rgb(255, 255, 255); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px;}
#cursando .exibiavaliacao .resultados .tab .novamente .botao:hover { background-color: rgb(37, 134, 86);}
#cursando .exibiavaliacao .resultados .tab .nota { float: left; width: 100%;}
#cursando .exibiavaliacao .resultados .tab .nota strong { float: left; width: 100%; padding: 5px 0 2px; background-color: rgb(200, 200, 200); text-align: center; font-size: 2em; line-height: 1; color: rgb(33, 45, 49); -webkit-border-top-left-radius: 7px; -webkit-border-top-right-radius: 7px; -moz-border-radius-topleft: 7px; -moz-border-radius-topright: 7px; border-top-left-radius: 7px; border-top-right-radius: 7px;}
#cursando .exibiavaliacao .resultados .tab .nota b { float: left; width: 100%; padding: 5px 0 3px; background-color: rgb(33, 45, 49); text-align: center; color: rgb(200, 200, 200);}
#cursando .exibiavaliacao .resultados .tab .nota em { float: left; width: 100%; padding: 7px 0 5px; background-color: rgb(200, 200, 200); text-align: center; font-weight: bold; font-style: normal; color: rgb(33, 45, 49);}
#cursando .exibiavaliacao .resultados .tab .nota em.alta { background-color: rgb(37, 134, 86); color: rgb(255, 255, 255);}
#cursando .exibiavaliacao .resultados .tab .nota em.baixa { background-color: rgb(209, 37, 65); color: rgb(255, 255, 255);}
#cursando .exibiavaliacao .resultados .tab .codigo { position: absolute; top: 5px; left: 2%; padding: 5px 8px 3px; background-color: rgb(0, 180, 255); font-weight: bold; color: rgb(255, 255, 255); -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#cursando .exibiavaliacao .resultados .tab .detalhes { float: left; width: 99.8%; margin: 5px 0 0; border: 1px solid rgb(200, 200, 200); border-bottom: 0;}
#cursando .exibiavaliacao .resultados .tab .detalhes h4 { float: left; width: 100%; border-bottom: 1px solid rgb(200, 200, 200);}
#cursando .exibiavaliacao .resultados .tab .detalhes h4 strong { float: left; width: 30%; padding: 10px 2% 8px; border-right: 1px solid rgb(200, 200, 200); font-weight: normal;}
#cursando .exibiavaliacao .resultados .tab .detalhes h4 b { float: left; width: 46%; padding: 10px 2% 8px;}

#cursando .exibiapostila { float: left; width: 100%;}
#cursando .exibiapostila .pdf { float: left; width: 100%;}
#cursando .exibiapostila .pdf .embed { position: absolute; width: 100%; height: 100%; overflow: hidden;}
#cursando .exibiapostila .pdf .embed embed { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#cursando .exibiapostila .nome { float: left; width: 100%; height: 50px; position: relative; z-index: 20; background-color: rgb(52, 68, 74);}
#cursando .exibiapostila .nome h3 { float: left; width: 100%; margin: 22px 0 0; text-align: center; text-transform: uppercase; line-height: 1; color: rgb(170, 170, 170);}

#cursando .certificado { float: left; width: 92%; margin: 10px 4% 20px;}
#cursando .certificado .nome { float: left; width: 100%; margin: 50px 0 0;}
#cursando .certificado .nome h2 { float: left; width: 100%; text-align: center; font-weight: bold; font-size: 3em;}
#cursando .certificado .nome h3 { float: left; width: 100%; margin: 10px 0 0; text-align: center; font-size: 1.5em;}
#cursando .certificado .opcoes { float: left; width: 100%; padding: 40px 0 0; text-align: center;}
#cursando .certificado .opcoes .botao { padding: 15px 23px 13px 40px; cursor: pointer; background-color: rgb(47, 160, 104); background-image: url('../imagens/ok-branco.png'); background-position: 15px 52%; background-repeat: no-repeat; text-transform: uppercase; font-weight: bold; font-size: 1.2em; color: rgb(255, 255, 255); -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#cursando .certificado .opcoes .botao:hover { background-color: rgb(37, 134, 86);}

#cursando .retornar { float: left; width: 96%; padding: 10px 2% 8px; margin: 0 0 5px; background-color: rgb(255, 196, 162); text-align: center; font-size: 1.2em;}
#cursando .retornar:hover { background-color: rgb(238, 177, 142);}

@media only screen and (max-width: 1000px){
  #cursando { padding: 0;}
  #cursando .fundo { display: none;}
  #cursando .esquerda { width: 100%; display: none;}
  #cursando .direita { width: 100%; min-height: 400px;}
  #cursando .grade .nun { left: 2%;}
  #cursando .grade .modulo b { width: 70%; margin: 0 15%; text-align: center;}
  #cursando .grade .submenu .opcoes .aula b { width: 70%; margin: 0 15%; text-align: center;}
  #cursando .grade .avaliacao em { left: 2%;}
  #cursando .grade .avaliacao b { width: 70%; margin: 0 15%; text-align: center;}

  #cursando .exibiaula { width: 92%; margin: 10px 4% 20px;}
  #cursando .exibiavaliacao { width: 92%; margin: 10px 4% 20px;}
}
@media only screen and (max-width: 700px){
  #cursando .exibiaula .apostilas .tab { width: 98%; margin: 0 1% 5px;}
  #cursando .exibiaula .apostilas .tab strong { width: 50%; padding: 10px 0 8px; font-size: 1em; -webkit-border-top-left-radius: 0; -webkit-border-top-right-radius: 0; -moz-border-radius-topleft: 0; -moz-border-radius-topright: 0; border-top-left-radius: 0; border-top-right-radius: 0;}
  #cursando .exibiaula .apostilas .tab b { width: 50%; padding: 10px 0 8px; -webkit-border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-radius-bottomright: 0; -moz-border-radius-bottomleft: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0;}
}
@media only screen and (max-width: 600px){
  #cursando .exibiaula .nome .modulo { font-size: 1em;}
  #cursando .exibiaula .nome .aula { font-size: 1em;}

  #cursando .exibiavaliacao .resultados .tab { width: 88%; padding: 4%;}

  #cursando .certificado .nome h2 { font-size: 2em;}
  #cursando .certificado .nome h3 { font-size: 1.1em;}
}