@charset "utf-8";

#oportunidades { float: left; width: 96%; margin: 0 2%;}
#oportunidades .subtitulo { float: left; width: 100%;}
#oportunidades .subtitulo h2 { float: left; width: 100%; padding: 7px 0 5px; margin: 15px 0 5px; background-color: rgb(15, 35, 51); text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1.2em; color: rgb(255, 255, 255); -webkit-border-radius: 10px; -webkit-border-bottom-right-radius: 2px; -webkit-border-bottom-left-radius: 2px; -moz-border-radius: 10px; -moz-border-radius-bottomright: 2px; -moz-border-radius-bottomleft: 2px; border-radius: 10px; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px;}
#oportunidades .tab { float: left; width: 96%; padding: 2%; margin: 0 0 15px; background-color: rgb(255, 255, 255);}
#oportunidades .tab .imagem { float: left; width: 30%; position: relative;}
#oportunidades .tab .imagem .img { float: left; max-width: 100%;}
#oportunidades .tab .youtube { float: left; width: 30%; position: relative;}
#oportunidades .tab .youtube .iframe { position: relative; z-index: 1; width: 100%; padding: 0 0 55%; overflow: hidden;}
#oportunidades .tab .youtube .iframe iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
#oportunidades .tab .descricao { float: right; width: 68%;}
#oportunidades .tab .descricao h3 { float: left; width: 100%; padding: 0 0 5px; border-bottom: 1px solid rgb(200, 200, 200); line-height: 1.2; font-weight: bold; font-size: 1.5em;}
#oportunidades .tab .descricao h4 { float: left; width: 100%; padding: 8px 0; border-bottom: 1px solid rgb(200, 200, 200); font-size: 1em; color: rgb(100, 100, 100);}
#oportunidades .tab .descricao a { float: left; padding: 9px 15px 8px; margin: 10px 0 0; background-color: rgb(47, 160, 104); font-size: 1.2em; color: rgb(255, 255, 255);}
#oportunidades .tab .descricao a:hover { background-color: rgb(37, 134, 86);}
#oportunidades .tab .descricao form { float: left; width: 100%;}
#oportunidades .tab .descricao form input { float: left; padding: 9px 15px 8px; margin: 10px 0 0; background-color: rgb(47, 160, 104); font-size: 1.2em; color: rgb(255, 255, 255); cursor: pointer;}
#oportunidades .tab .descricao form input:hover { background-color: rgb(37, 134, 86);}

#matriculas { float: left; width: 96%; margin: 0 2%;}
#matriculas .tab { float: left; width: 96%; padding: 2%; margin: 0 0 15px; background-color: rgb(255, 255, 255);}
#matriculas .tab .imagem { float: left; width: 30%; position: relative;}
#matriculas .tab .imagem .img { float: left; max-width: 100%;}
#matriculas .tab .imagem .form { position: absolute; top: 4px; right: 4px;}
#matriculas .tab .imagem .form .cancelar { float: left; width: 20px; height: 20px; background-color: rgb(200, 200, 200); color: rgb(100, 100, 100); cursor: pointer; line-height: 1; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#matriculas .tab .imagem .form .cancelar:hover { background-color: rgb(170, 170, 170);}
#matriculas .tab .descricao { float: right; width: 68%;}
#matriculas .tab .descricao h3 { float: left; width: 100%; padding: 0 0 5px; border-bottom: 1px solid rgb(200, 200, 200); line-height: 1.2; font-weight: bold; font-size: 1.5em;}
#matriculas .tab .descricao h4 { float: left; width: 100%; padding: 10px 0 8px; border-bottom: 1px solid rgb(200, 200, 200); line-height: 1; font-size: 1em; color: rgb(100, 100, 100);}
#matriculas .tab .progresso { float: left; width: 100%; height: 20px; position: relative; margin: 10px 0 0; background-color: rgb(200, 200, 200);}
#matriculas .tab .progresso b { position: absolute; height: 100%; top: 0; left: 0; background-color: rgb(45, 239, 143)}
#matriculas .tab .progresso b em { position: absolute; top: 2px; right: 4px; font-weight: normal; font-style: normal; font-size: 0.9em;}
#matriculas .tab .opcoes { float: left; width: 100%; padding: 10px 0 0;}
#matriculas .tab .opcoes .botao { float: left; width: 100%; padding: 15px 0 12px; text-transform: uppercase; text-align: center; font-weight: bold; font-size: 1.2em; color: rgb(255, 255, 255);}
#matriculas .tab .opcoes .botao.aulas { background-color: rgb(64, 86, 95);}
#matriculas .tab .opcoes .botao.aulas:hover { background-color: rgb(52, 68, 74);}
#matriculas .tab .opcoes .botao.pagamento { background-color: rgb(47, 160, 104);}
#matriculas .tab .opcoes .botao.pagamento:hover  { background-color: rgb(37, 134, 86);}

#certificados { float: left; width: 96%; margin: 0 2%;}
#certificados .tab { float: left; width: 96%; padding: 15px 2% 13px; margin: 0 0 5px; background-color: rgb(255, 255, 255);}
#certificados .tab .nome { float: left; margin: 7px 0 0;}
#certificados .tab .nome b { color: rgb(101, 89, 191);}
#certificados .tab .nome em { color: rgb(222, 114, 0); font-style: normal;}
#certificados .tab .nome strong.s1 { color: rgb(71, 101, 112);}
#certificados .tab .nome strong.s2 { color: rgb(47, 160, 104);}
#certificados .tab .nome strong.s3 { color: rgb(0, 180, 255);}
#certificados .tab .botao { float: right; padding: 10px 20px 7px; text-transform: uppercase; font-weight: bold; line-height: 1; font-size: 1em; color: rgb(255, 255, 255); -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#certificados .tab .botao.embreve { background-color: rgb(101, 89, 191);}
#certificados .tab .botao.pagamento { background-color: rgb(47, 160, 104);}
#certificados .tab .botao.pagamento:hover { background-color: rgb(15, 35, 51);}
#certificados .tab .botao.imprimir { background-color: rgb(47, 160, 104);}
#certificados .tab .botao.imprimir:hover { background-color: rgb(15, 35, 51);}

@media only screen and (max-width: 600px){
  #oportunidades .tab { width: 90%; padding: 5%;}
  #oportunidades .tab .imagem { width: 100%;}
  #oportunidades .tab .youtube { width: 100%;}
  #oportunidades .tab .descricao { float: left; width: 100%; margin: 15px 0 0;}
  #oportunidades .tab .descricao h3 { line-height: 1.1em;}

  #matriculas .tab .imagem { width: 100%;}
  #matriculas .tab .descricao { float: left; width: 100%;}

  #certificados .tab { width: 92%; padding: 15px 4% 13px;}
  #certificados .tab .nome { width: 100%; margin: 0;}
  #certificados .tab .botao { float: left; width: 100%; padding: 5px 0 3px; margin: 10px 0 0; text-align: center;}
}