/*------------------------------------------------------------------------------
/*                                 HTML,BODY,DIVBODY     
/*------------------------------------------------------------------------------ */

html { overflow-x:hidden; }

body {
   background-color:white;//#C7C6AA;
   color:black;
   min-width:450px;
}

.panelcolor {
  color:#F0EA79;
  border:solid 2px #103B55;
  background-color:#103B55;
  border-radius:5px;
}

.panelcolor2 {
  color:#F0EA79;
  border:solid 2px #103B55;
  background-color:#040821;
  border-radius:5px;
}

/*------------------------------------------------------------------------------
/*                               HEADER
/*------------------------------------------------------------------------------ */

header {
   background-color:#103B55; 
   margin-bottom:0px;
}

#ilogo {
  border:solid 2px #103B55;
  height:157px;
  margin-top:12px;
  margin-bottom:32px;
}

.logoText {
   background-color:#103B55;
   color:white;
   margin:18px 0px;
}

h1 {
   font-size:44px;
   font-family:Bookman;
   color:white;
}

#h1Main {
   color:yellow;
   font-size:44px;
   margin-top:20px;
   line-height:100%;
}

.pHeader {
   color:#EEE;
   font-size:28px;
   font-family:Arial;
   padding-bottom:10px;
   line-height:120%;
}

.pAlumno {
   display:inline;
   padding:8px;
   font-size:16px;  
   font-weight:bold;
}

#pClaseAlumno {
   background-color:black;
   border-top-left-radius:5px;
   border-bottom-left-radius:5px;
}

#pNombreAlumno {
   background-color:#C7C6AA;
   border-top-right-radius:4px;
   border-bottom-right-radius:4px;
   color:black;
}

#bCerrar {
   font-size:16px;
   font-weight:bold;
   padding-top:5px;
   margin-left:50px;
   margin-top:-3px;   
}

#divMision {
   margin-top:-30px;
   padding-left:10%;
   font-size:18px;
}

#divMisionVision {
   margin-bottom:20px;
}

#divMisionVision .span10 {
   background-color:#333F4F;
   border-radius:7px;
}

#pMision {
   color:orange;
   font-size:32px;
   margin-top:10px;
   margin-bottom:-5px;
}

#pTextoMision {
   font-size:26px;
   color:white;
   line-height:120%;
}

.cedula {
   width:200px;
   margin-right:20px;
   margin-top:20px;
   margin-bottom:10px;
}

#btnCerrarMision {
   font-size:18px;
   margin-top:-10px; 
   width:20%;
}

/*------------------------------------------------------------------------------
/*                                   NAV
/*------------------------------------------------------------------------------ */

/* navmenu se ajusta en "navresponsive" */


/*------------------------------------------------------------------------------
/*                               UBICACION
/*------------------------------------------------------------------------------ */

#divTextUbicacion {
  text-align:center;
  font-size:34px;
}

#pTitulo {
   color:white;
   font-size:48px;
   font-weight:bold;
   margin-top:10px;
   margin-bottom:35px;
}

#pTexto {
   color:yellow;
   margin-bottom:40px;
}

.pp {
   color:white;
  margin-bottom:20px;
}

#mifoto {
   border:solid gray 2px;
   margin-top:55px; 
   width:17.5%;
}

#map {
  border:solid white 5px;
  margin-top:5px;
  height:500px;
}

/*------------------------------------------------------------------------------
/*                              CONTACTANOS
/*------------------------------------------------------------------------------ */

#sectContactanos {
   margin-bottom:10px;
}

#divContactanos {
  background-color:#040821;
  color:orange;
  font-size:18px;
  padding:20px 20px 0px 20px;
  margin-top:5px;
  border:solid 2px gray;	
}

#divInteresados {
  background-color:black; 
  border:solid 2px white;
  border-radius:5px;
  margin-bottom:10px;
}

select {
  background: #EEE;
  border-radius:0.25em;
  color:black;
  font-size:1em;
  padding:0.25em;	
  width:30%;
}

#pInteresados {
  font-size:28px;
  font-family:bookman;
  line-height:110%;
  color:#F7F45D;
}

#fileuploader {
   float:left;
}

#enviarFormulario {
   float:right;
   margin-top:30px;
   margin-right:10px;
}

#btnEnviar,#btnEnviar2 {
   width:280px;
   float:right;
}

.counter {
   margin-right:10px;
   font-size:20px;
   font-weight:bold;
   color:#FED;
   float:right;
}

.warning {
   color:yellow;
}	

.exceeded {
   color:red;
}	

textarea {
   background:#EEE;
   color:black;
   font-size:1em;
   height:168px;
   width:98%;
}


input[type="date"], input[type="email"], input[type="number"], input[type="text"] {
  background: #EEE;
  border-radius:0.25em;
  color:black;
  font-size:1em;
  padding:0.25em;
}

input[type="date"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="text"]:focus {
   background:white;
}

#btnEnviar,#btnEnviar2,#btnEnviar3 {
  background:navy;
  border-radius:0.25em;
  color:white;
  font-size:1.25em;
  padding: 0.35em;
  width:225px;
}

#btnEnviar:hover,#btnEnviar2:hover ,#btnEnviar3:hover{
  background:black;
  border-radius:0 0.25em;
  color:yellow;
  cursor:pointer;
}

#btnEnviar3 {
   margin-bottom:0px;
}


/*------------------------------------------------------------------------------
/*                               FOOTER
/*------------------------------------------------------------------------------ */

footer {
   background-color:#103B55; 
   min-height:160px;
}

#logogray {
  width:90px;
  height:120px;
  margin-top:20px;
  margin-right:10px;
  border:solid 1px navy;
}

#pfooter {
  font-size:small;  
  width:220px;
  margin-top:85px;
  color:white;   
  float:left;
}

#pback {
  font:bold 48px Tahoma;
  margin:50px 0px 20px 55px;
  color:#C7C6AA;
  text-shadow:gray 10px 3px 5px;  /* color derecha abajo difuminado */
  float:left;
}   

#pultact {
   color:silver;
   font-size:16px;
   font-weight:bold;
   display:inline-block;
}

/* **************************************************************** */

#spNombre {
   margin-left:1.8%;
}

#nombre {
   margin-right:12%;
}

#telefono {
   margin-right:13.4%;
}

#spCiudad {
   margin-left:2.5%;
}

#ciudad {
   margin-right:10.5%;
}

/* **************************************************************** */

@media (min-width: 1200px) {
  input{width:35%;margin-top:0.25em;}
  .inpAutentif{width:55%;}
  #divMision{width:55%;margin-left:23%}
  #divNombreVideos .inpVideo{width:90%;font-size:18px;margin-bottom:5px;}
  #spTituloVideo{font-size:32px;}
}

@media (max-width: 1200px) {
   body{background-color:white;}
   input{width:32%}
   .inpAutentif{width:95%;}
   #divMision{width:70%;margin-left:13%}
   #spUsuario{margin-left:0px;}
   .spRegistro{margin-left:0px;}
   #ilogo{margin-top:70px;}
   #bCerrar{margin-top:15px;}
  #btnEnviar,#btnEnviar2{margin-right:10%}
  #btnTerminar{width:20%}
  #divTextUbicacion{font-size:28px;}
  #divNombreVideos .inpVideo{width:90%;font-size:18px;margin-bottom:5px;}
  #spTituloVideo{font-size:32px;}
  #lblOpcion{font-size:12px;}
  #mifoto{width:22%;}
  #spNombre{margin-left:2.0%;}
  #spCiudad{margin-left:3.2%;}
  #nombre{margin-right:7.5%;}
  #telefono{margin-right:8.9%;}
  #ciudad{margin-right:5.1%;}
  select{width:30%;}
  #divIntro{margin-right:2%}
}

@media (max-width: 979px) {
  body{background-color:white;} 
  #divMision{width:90%;margin-left:5%}
  #divTextUbicacion{font-size:22px;}
  #divVideo1{width:100%;margin-bottom:20px;}
  #divVideo2{width:100%;margin-left:1px}
  #sectAutentif{width:100%;margin-bottom:10px;}
  #asideAutentif{width:70%;margin-left:15%}
  #sectChat{width:100%;margin-bottom:10px;}
  #asideChat{width:70%;margin-left:15%}
  #btnEnviar,#btnEnviar2{margin-right:27%}
  .pp{margin-bottom:7px;}
  #carrusel{margin-right:1px;margin-top:1px;margin-bottom:10px;width:100%}
  #noticesection{width:100%;margin-left:0px}
  #mifoto{width:22%;margin-top:50px}
  form{font-size:17px;}
  input{width:32.8%;}
  #divBotones .btn {width:70%;font-size:22px;}
  #divNombreVideos .inpVideo{width:100%;font-size:14px;margin-bottom:5px;}
  #spTituloVideo{font-size:26px;}
  #lblOpcion{display:none}
  #spNombre{margin-left:2.6%;}
  #spCiudad{margin-left:4.0%;}
  #nombre{margin-right:7.0%;}
  #telefono{margin-right:9.0%;}
  #ciudad{margin-right:4.2%;}
  select{width:34.6%;}
  #pfooter{margin-top:20px;}
  #divIntro{margin-right:1%;width:95%}
  #pIntro{font-size:20px}
  }

@media (max-width: 767px) {
  body{background-color:white;}
  body {padding:0px;margin:0px;}
  #navmenu ul{padding:0;margin:0;}
  #navmenu{position:absolute;top:0;}  
  #ilogo{margin-bottom:0px}
  #divBienvenido,#divBienvenidoExams{margin-top:20px;}
  #divBotones .btn {width:70%;font-size:20px;}
  #mainContainer{padding-left:10px;padding-right:10px;}
  #carrusel{margin-right:10px;margin-top:0px;}
  #noticesection{margin-top:20px;margin-bottom:20px;}  
  #btnEnviar,#btnEnviar2{float:none;margin-left:22%;margin-bottom:-20px;}
  #btnTerminar{width:150px;margin-top:-10px;}
  #divNombreVideos .inpVideo{width:70%;font-size:18px;margin-bottom:5px;}
  #spTituloVideo{font-size:32px;}
  #divTextUbicacion{font-size:26px;}
  #divTitVideos{margin-top:10px}
  #divImagen1,#divImagen2{margin-top:10px;}
  #lblOpcion{display:block}
  .pp{margin-bottom:12px;}
  #sectCursosDisponibles a,#sectVideosDisponibles a{margin-left:23%;margin-right:23%;margin-top:20px;}
  div.media-body {width:98%;padding:10px;}
  #mifoto{width:31%;margin-left:35%;margin-top:20px}
  input{width:96%;margin-top:0px;}
  select{width:98%;margin-top:0px;}
  textarea{width:96%;margin-left:0px;}     
  #spNombre,#spCiudad{margin:0;} 
  #pfooter{margin-top:85px;}
  #divMainIntro{margin-top:15px}
  #divIntro{margin-right:1%;width:95%}
  #pIntro{font-size:24px}
}

@media(max-width: 620px) {
   body{background-color:white;}
  .media-body h4,.pnot1{text-align:center;}
  #divBotones .btn {width:80%;font-size:16px;}
  .pnot2{padding-left:5px;}     
  .stt{display:inline;text-align:center;}
  #aMedia{margin:0% 0% 2% 16%;}
  #divMedia{width:100%}
  #aChat{margin:0% 0% 2% 16%;}
  #divChat{width:100%}  
  .media>a{margin-bottom:20px;margin-left:5px;}
  #divTextUbicacion{font-size:22px}
  #mifoto{width:40%;}
  #pIntro{font-size:20px}
  #pInteresados{font-size:20px}
  #btnEnviar,#btnEnviar2{margin-left:18%}
  #btnEnviar3{width:98%}
}

@media (max-width: 450px) {
   body{background-color:white}
}