@charset "utf-8";

#esquerda { position: fixed; width: 20%; height: 100%; top: 0; left: 0; padding: 50px 0 0; background-color: rgb(15, 35, 51); z-index: 15;}
#direita { float: right; width: 76%; min-height: 550px; padding: 50px 0 0; margin: 0 2%;}
#administrador { float: left; width: 80%; min-height: 500px; padding: 70px 10% 0;}

#titulo { float: left; width: 96%; margin: 0 2% 10px;}
#titulo h1 { float: left; width: 100%; margin: 20px 0 0; text-transform: uppercase; font-weight: bold; line-height: 1; font-size: 2em;}
#titulo h2 { float: left; width: 98%; padding: 10px 1% 8px; background-color:rgb(255, 255, 255); font-weight: bold; line-height: 1; font-size: 1.2em; -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%);}
#titulo h3 { float: left; width: 98%; padding: 10px 1% 8px; margin: 10px 0 0; background-color:rgb(255, 255, 255); font-weight: bold; line-height: 1; font-size: 1.2em; -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%);}
#titulo b { float: left; width: 20%; height: 5px; background-color: rgb(27, 117, 187);}
#titulo em { float: left; width: 80%; height: 5px; background-color: rgb(15, 35, 51);}

#texto { float: left; width: 100%;}
#texto h3 { float: left; width: 96%; margin: 10px 2% 0; font-size: 1.1em;}
#texto h4 { float: left; width: 100%; margin: 10px 0 0; text-align: center; font-size: 1.1em;}
#texto h5 { float: left; width: 100%; margin: 10px 0 0; font-size: 1.1em;}
#texto a { font-weight: bold;}
#texto a:hover { color: rgb(0, 180, 255);}

#login { float: left; width: 48%; padding: 100px 0;}
#login .form { float: left; width: 100%; margin: 0 0 20px;}
#login .form .c1 { float: left; width: 100%; margin: 30px 0 0; position: relative;}
#login .form .c2 { float: left; width: 100%; margin: 10px 0 0; text-align: center; position: relative;}
#login .form .informe { float: left; width: 100%; margin: 35px 0 0; text-align: center; font-size: 1.1em;}
#login .form .novasenha { display: none;}
#login .form .nomecampo { float: left; width: 100%; color: rgb(100, 100, 100);}
#login .form .campo { float: left; width: 96%; height: 55px; padding: 1px 2% 0; border: 1px solid rgb(0, 0, 0);}
#login .form .campo:focus { border: 1px solid rgb(0, 180, 255); -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, 20%);}
#login .form .senha { position: absolute; width: 25px; height: 25px; right: 8px; bottom: 16px; z-index: 5; background-position: 50%; background-repeat: no-repeat; cursor: pointer;}
#login .form .senha.mostra { background-image: url('../imagens/senha-mostra.png');}
#login .form .senha.esconde { background-image: url('../imagens/senha-esconde.png');}
#login .form .invalido { border: 1px solid rgb(255, 0, 0);}
#login .form .botao { cursor: pointer; padding: 17px 40px 15px; background-color: rgb(15, 35, 51); text-transform: uppercase; font-weight: bold; color: rgb(255, 255, 255); -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#login .form .botao:hover { background-color: rgb(27, 117, 187);}
#login .tab { float: left; width: 90%; padding: 30px 5% 5%; position: relative; background-color: rgb(255, 255, 255);}
#login .logo { position: absolute; width: 100%; height: 100px; top: -55px; left: 0; z-index: 5; background-image: url('../imagens/login.png'); background-position: 50%; background-repeat: no-repeat;}
#login .codigo { display: none;}
#login .link { float: left; width: 100%; padding: 10px 0; margin: 5px 0 0; border-top: 1px solid rgb(200, 200, 200); border-bottom: 1px solid rgb(200, 200, 200); text-align: center; font-size: 1.2em; color: rgb(100, 100, 100);}
#login .link:hover { color: rgb(15, 35, 51);}

#login.semvideo { width: 100%;}
#login.semvideo .fundo { margin: 0 auto; width: 400px; max-width: 90%;}
#login.comvideo { width: 48%;}
#login.comvideo .fundo { float: right; width: 500px; max-width: 90%;}

#apresenta { float: right; width: 48%; padding: 100px 0;}
#apresenta .fundo { float: left; width: 500px; max-width: 90%;}
#apresenta .detalhes { float: left; width: 100%;}
#apresenta .detalhes h2 { float: left; width: 100%; text-align: center; font-weight: bold; font-size: 2em;}
#apresenta .detalhes h3 { float: left; width: 100%; text-align: center;}
#apresenta .video { float: left; width: 90%; padding: 5%; margin: 10px 0 0; background-color: rgb(255, 255, 255);}
#apresenta .video .iframe { position: relative; width: 100%; padding-bottom: 55%; overflow: hidden;}
#apresenta .video .iframe iframe { position: absolute; width: 100%; height: 100%; top: 0; left: 0;}

#menu { float: left; width: 100%;}
#menu .um { float: left; width: 70%; padding: 28px 15% 25px; border-bottom: 1px solid rgb(0, 0, 0); text-transform: uppercase; font-weight: bold; line-height: 1; color: rgb(255, 255, 255); background-position: 2% 50%; background-repeat: no-repeat;}
#menu .um:hover { background-color: rgb(27, 117, 187);}
#menu .um.ativo { background-color: rgb(27, 117, 187);}
#menu .um.cursos { background-image: url('../imagens/menu-cursos.png');}
#menu .um.mentorias { background-image: url('../imagens/menu-mentorias.png');}
#menu .um.certificados { background-image: url('../imagens/menu-certificados.png');}
#menu .um.perfil { background-image: url('../imagens/menu-perfil.png');}
#menu .um.oportunidades { background-image: url('../imagens/menu-oportunidades.png');}
#menu .submenu { float: left; width: 100%; position: relative;}
#menu .submenu .um { position: relative;}
#menu .submenu .um i { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: none;}
#menu .submenu .seta { position: absolute; width: 18px; height: 18px; top: 25px; right: 10px; background-image: url('../imagens/menu-seta-a.png'); background-position: 50%; background-repeat: no-repeat;}
#menu .submenu .opcoes { position: absolute; width: 80%; top: 0; left: 95%; padding: 0 0 0 7%; display: none;}
#menu .submenu .opcoes .dois { float: left; width: 70%; padding: 27px 15% 25px; border-bottom: 1px solid rgb(0, 0, 0); background-color: rgb(15, 35, 51); background-position: 2% 50%; background-repeat: no-repeat; text-transform: uppercase; font-weight: bold; line-height: 1; color: rgb(255, 255, 255); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;}
#menu .submenu .opcoes .dois:hover { background-color: rgb(27, 117, 187);}
#menu .submenu .opcoes .dois.ativo { background-color: rgb(27, 117, 187);}
#menu .submenu .opcoes .dois.dados { background-image: url('../imagens/menu-dados.png');}
#menu .submenu .opcoes .dois.endereco { background-image: url('../imagens/menu-endereco.png');}
#menu .submenu .opcoes .dois.login { background-image: url('../imagens/menu-login.png');}

#form { float: left; width: 96%; padding: 10px 0 30px; margin: 0 2% 20px; background-color: rgb(255, 255, 255);}
#form .c1 { float: left; width: 96%; margin: 0 0 0 2%;}
#form .c2 { float: left; width: 47%; margin: 0 0 0 2%;}
#form .c3 { float: left; width: 30.7%; margin: 0 0 0 2%;}
#form .nomecampo { float: left; width: 100%; margin: 20px 0 0; color: rgb(100, 100, 100);}
#form .nomecampo em { font-style: normal; color: rgb(255, 0, 0);}
#form .campo { float: left; width: 98%; height: 50px; padding: 1px 1% 0; border: 1px solid rgb(180, 180, 180); font-size: 1em; color: rgb(100, 100, 100);}
#form .campo.nasc { width: 20%; padding: 1px 0 0; text-align: center;}
#form .campo.nasc.meio { margin: 0 1%;}
#form .campo:focus { border: 1px solid rgb(0, 180, 255); -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, 20%);}
#form .escolha { float: left; width: 100%; height: 52px; padding: 0 1%; border: 1px solid rgb(180, 180, 180); font-size: 1em; color: rgb(100, 100, 100);}
#form .escolha:focus { border: 1px solid rgb(0, 180, 255); -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, 20%);}
#form .botao { float: left; padding: 13px 20px; margin: 10px 0 0 2%; background-color: rgb(60, 165, 107); cursor: pointer; text-transform: uppercase; font-weight: bold; font-size: 1.2em; color: rgb(255, 255, 255);}
#form .botao:hover { background-color: rgb(33, 112, 68);}

#alerta { float: left; width: 100%; position: relative; background-color: rgb(255, 210, 112);}
#alerta .msg { float: left; width: 90%; padding: 20px 5% 18px; text-align: center; font-size: 1.1em;}
#alerta .fechar { position: absolute; width: 10px; height: 10px; top: 5px; right: 5px; font-weight: bold; line-height: 1; color: rgb(0, 0, 0, 40%); cursor: pointer;}
#alerta .fechar:hover { color: rgb(0, 0, 0, 60%);}
#alerta .botao { float: left; width: 100%; display: none; padding: 45px 0 20px; background-color: rgb(255, 255, 255); text-align: center;}
#alerta .botao strong { padding: 14px 25px 13px; background-color: rgb(240, 240, 240); border: 1px solid rgb(200, 200, 200); text-transform: uppercase; font-weight: normal; font-size: 1.1em; cursor: pointer; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;}
#alerta .botao strong:hover { background-color: rgb(220, 220, 220); border: 1px solid rgb(180, 180, 180);}
#alerta.login { margin: 25px 0 0; display: none;}
#alerta.matriculas { width: 96%; margin: 0 2% 10px;}
#alerta.perfil { width: 96%; margin: 0 2% 10px;}
#alerta.cursando { margin: 0 0 10px;}
#alerta.mentorando { margin: 4px 0 0; display: none;}
#alerta.oportunidades { width: 96%; margin: 20px 2% 0;}

#loader { position: fixed; width: 100%; height: 100%; display: none; top: 0; left: 0; z-index: 50; background-color: rgba(0,0,0,0.30); background-image: url("../imagens/loader.gif"); background-position: 50%; background-repeat: no-repeat;}

@media only screen and (min-width: 1001px){
  #menu .submenu:hover .um { background-color: rgb(27, 117, 187);}
  #menu .submenu:hover .opcoes { display: block;}
  #menu .submenu:hover .seta { background-image: url('../imagens/menu-seta-b.png');}
}
@media only screen and (max-width: 1000px){
  #esquerda { float: left; width: 100%; height: auto; display: none; position: relative; padding: 0;}
  #direita { float: left; width: 96%; min-height: 400px; padding: 15px 0 0;}
  #administrador { width: 90%; padding: 30px 5% 15px;}

  #menu .um { width: 100%; padding: 27px 0 25px; text-align: center;}
  #menu .submenu .um i.abre { display: block;}
  #menu .submenu .seta { background-image: url('../imagens/menu-seta-c.png');}
  #menu .submenu .opcoes { float: right; width: 90%; position: relative; left: 0; padding: 0;}
  #menu .submenu .opcoes .dois { width: 100%; padding: 27px 0 25px; text-align: center; -webkit-border-radius: 10px; -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius: 10px; -moz-border-radius-topright: 0; -moz-border-radius-bottomright: 0; border-radius: 10px; border-top-right-radius: 0; border-bottom-right-radius: 0;}

  #menu .submenu.ativo .um { background-color: rgb(27, 117, 187);}
  #menu .submenu.ativo .opcoes { display: block;}
  #menu .submenu.ativo .seta { background-image: url('../imagens/menu-seta-c.png');}
}
@media only screen and (max-width: 800px){
  #login { padding: 70px 0 0;}
  #login.comvideo { width: 100%;}
  #login.comvideo .fundo { float: none; margin: 0 auto; width: 400px;}

  #apresenta { float: left; width: 100%; padding: 30px 0;}
  #apresenta .fundo { float: none; margin: 0 auto; width: 400px;}
}
@media only screen and (max-width: 600px){
  #titulo h1 { margin: 10px 0 0; font-size: 1.7em;}
  #titulo h2 { width: 92%; padding: 10px 4% 8px;}

  #form { width: 92%; padding: 10px 2% 30px;}
  #form .c2 { width: 96%;}
  #form .c3 { width: 96%;}
}