/* Autor: Uma Systems y Nunchi */

/*Generales*/
body{background: #fff; padding: 0; margin: 0; overflow-x: hidden;}
.img100{max-width: 100%;} 
.img100h{max-height: 100%;}
:root {--azul: #0c1b24; }
@font-face {font-family: Museo700;  src: url(fonts/Museo_Slab_E.otf);}
@font-face {font-family: Museo500;  src: url(fonts/Museo_Slab_D.otf);}
@font-face {font-family: Museo300;  src: url(fonts/Museo_Slab_C.otf);}
@font-face {font-family: GothamBook;  src: url(fonts/Gotham-Book_2.otf);}
@font-face {font-family: GothamMedium;  src: url(fonts/Gotham-Medium_2.otf);}
.museo300{font-family: Museo300;}
.museo500{font-family: Museo500;}
.museo700{font-family: Museo700;}
.GothamBook{font-family: GothamBook;}
.GothamMedium{font-family: GothamMedium;}
.size1{font-size: 9pt;}/*13*/
.size2{font-size: 11pt;}/*16.96*/
.size3{font-size: 14pt;}/*18*/
.size4{font-size: 18pt;}/*22*/
.size5{font-size: 20pt;}/*25*/

#mainContainer{position: relative; width: 82%; margin: auto; padding-top: 251px;}

/*Login*/
#HeaderLogin{width: 100%; height: 550px; background: var(--azul);} 
#FooterLogin{}
#logoHeaderContainer{width: 500px; margin-left: auto; margin-right: auto; padding-top: 80px}
#logoHeaderContainer img{z-index: 100;}
#loginContainer{background: #fff; width: 540px; margin-top: 0px; height: 580px; position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto;}
#BienvenidoLogin{background: var(--azul); color: #fff; text-align: center; letter-spacing: 7px; padding: 25px; padding-top: 100px;}
#ImagoContainer{width: 72px; height: auto; margin: auto; padding: 30px;}
.loginInput{border-style: solid; border-color: var(--azul); width: 450px; height: 45px; font-size: 14pt; letter-spacing: 5px; padding-left: 15px;}
.inputLoginContainer {width: 100%; text-align: center; padding-top: 10px; padding-bottom: 10px;}   
#LoginButtonContainer{width: 100px; margin: auto; padding-top: 90px; cursor: pointer;}    
#TextoFooterLogin{position: fixed; bottom: 0;  width: 100%; text-align: center; letter-spacing: 5px; padding-bottom: 20px; color: var(--azul)} 

/*Header*/
#MainHeader{width: 100%; height: 250px; position: absolute; z-index: 10; background: var(--azul); left: 0; right: 0; top: 0;}
#HeaderAddress{position: absolute; top: 0; right: 0; padding-top: 55px; padding-right: 50px; color: #fff; text-align: right; letter-spacing: 5px;}
#AddressContacto{margin-top: 15px}
#whatsHeader{margin-top: 5px;}
#ContactanosContainer{ margin-bottom: 5px; }
#ContactanosLabel{background: #fff; color: var(--azul); width: 140px; right: 0; padding-left: 10px; padding-right: 10px;}

/*Footer*/
#MainFooter{position: absolute; width: 100%; height: 120px; background: var(--azul); padding-bottom: 20px; color: #fff; letter-spacing: 5px; left: 0; right: 0; } 
#FooterImagoContainer{text-align: right; padding-right: 50px; height: 50px; margin-top: 35px; margin-bottom: 25px}
.TextoFooterContainer{width: 100%; text-align: right}
.textoFooter1{padding-right: 50px;}


/*logout*/
.TextoLogoutContainer{float: left; width: 50%}
#logoutMainContainer{margin-top: 25px;}
#RegresarContainer{text-align: left;}
#logOutContainer {text-align: right;}
.LogOutButton {max-height: 30px; cursor: pointer}
#logoutContainer::after{clear: float;}


/*Información General usuario*/
#MainInfoContainer{margin-top: 125px;}
#logoInfo{max-width: 55px;}
#ResumenCuentaEncabezadoContainer{letter-spacing: 2px;}
#BenvenidoLabel, #BenvenidoLabel2{letter-spacing: 3px; margin-top: 20px;}
#InfoUser{margin-top: 30px;}

/*Resumen de cuenta*/
#ResumenCuentaEncabezadoContainer{text-align: right; margin-top: 80px;}
#ResumenCuentaImg{margin-top: 5px; margin-bottom: 15px;}

 
/*elementos generales de Tabla*/
table {width: 100%; text-align: center; margin-bottom: 200px;}  
td{height: 50px; text-align: center;}
#letrerosTabla{background: var(--azul); color: #fff; letter-spacing: 5px; padding-top: 25px; padding-bottom: 25px;}
.gris{background: #f2f2f2;} 

/*Tabla cliente*/
.ClienteContrato{width: 15%}
.ClienteStatus{width: 10%}
.ClienteDescripcion{width: 28%}
.ClienteSolicitud{width: 10%}
.ClienteContrato{width: 10%}
.CLientePago{width: 10%}
.ClienteEdoCuenta{width: 17%}
.ClienteHistorial{width: 5%}
.ClienteEdoCuentasub{width: 8.4%}

/*Tabla admin*/
.adminCliente{width: 33%}
.adminTelefono{width: 10%}
.admincorreo{width: 23%}
.adminEditar{width: 10%}
.adminAgregar{width: 11%;}
.adminEliminar{width: 12%}

/*Tabla historial*/
.HistoralContrato{width: 20%}
.HistoralDescripcion{width: 30%}
.HistoralPeriodo{width: 30%}
.HistoralAcciones{width: 20%}

/*formularios*/
#NewUserHeader, #InfoUserHeader{text-align: right;} 
.formRenova{margin-top: 10px;}
#IMGHeaderForm{margin-top: 10px;}
#FormularioNuevoUsuario, #FormularioNuevoBien, #FormularioEditaUsuario{clear: both; margin-bottom: 100px; letter-spacing: 4px;}
.FormRaw{width: 100%; border-top-style: solid; border-right-style: solid; border-left-style: solid;  border-color: #000; border-width: 1px; height: 50px; padding-top: 20px; padding-left: 0px;}
.FormSeparator{float: left;} 
.FormImput{letter-spacing: 4px; border-width: 0;}
.lastRaw{border-bottom-style: solid;  border-color: #000; border-width: 1px;}
.Formbutton{cursor: pointer;}


/*formulario nuevo usuario y editar usuario*/
#FCNombre{ width: 34% }
#FCApellido1{ width: 33% }
#FCApellido2{ width: 32% }
#FCDireccion{ width: 60% }
#FCTelefono{ width: 39% }
#FCCorreo{ width: 40% }
#FCTipoUser{ width: 59% }
#FCPassword{ width: 40% }
#BotonAgregarContainer, #BotonEditarContainer{ width: 59%; text-align: right}

/*formulario Nuevo bien*/
#FBNombre {width: 70%}
#FBContrato {width: 29%}
#FBPagoLabel {width: 25%}
#FBPago {width: 35%}
#BotonAgregarBienContainer {width: 39%; text-align: right;}

/*Formularios para subir archivos*/
#UploadFormContainer{padding: 20px;}


/*Index******/
#indexWrapper{width: 100%; padding-top: 248px;}
.MainContainer{width: 100%;}
#IndexSliderContainer{height: 800px; background: #00c596}
#IndexSliderContainer::after, #ServiciosMosaico::after{clear: both;}
#MiCuentaContainer{width: 20%; }
#MainSlider{width: 80%}
#buttonCuentaContainer{width: 200px; margin: auto; margin-top: 360px; cursor: pointer;} 
#MainInfoContainerIndex{padding-top: 125px; text-align: right;}
.index90{width: 90%; margin: auto;} 

/*Moisaico*/
#ServiciosMosaico{padding-top: 70px; height: 426px;}
.mosaicoSeparator {margin-top: 20px; margin-bottom: 15px;}
.colum1, .colum2, .colum3{width: 32%; text-align: right;}
.colum2{margin-left: 2%; margin-right: 2%}
.greenBackContainer{margin-top: 20px; margin-bottom: 20px}
.greenBackground{background: #00c596; padding: 5px; color: #fff;}

/*Activos*/
#activos{background: var(--azul); color: #fff; margin-top: 100px; letter-spacing: 4px;}
#activos div{ padding: 11px; margin: auto; text-align: center;}
#ActivosImgs{width: 80%; margin: auto; padding-top: 175px; padding-bottom: 175px}
.activosimg{max-width: 49%}

/*Ofertas*/
#GrayContainer{background: url(botones/gray.jpg); background-repeat: repeat; height: 894px;}
#MainInfoContainerIndex2{padding-top: 92px; text-align: right;}
#GrayContainer::after{clear: both;}


/*Slide*/
.mySlides {display: none}
.mainslide {vertical-align: middle;}
.img100s{height: 800px; width: auto;}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}


/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 2s;
  animation-name: fade;
  animation-duration: 2s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}


/*Resolución 1366*********************************************************/
@media screen and (max-width: 1500px) {

/*Generales*/
.img100h{max-width: 70.5%;} 
.size1{font-size: 7pt;}/*13*/
.size2{font-size: 8.21pt;}/*16.96*/
.size3{font-size: 10pt;}/*18*/
.size4{font-size: 12pt;}/*22*/
.size5{font-size: 14pt;}/*25*/
#logoInfo{max-width: 39px;}
#mainContainer{padding-top: 180px;}


/*Login*/
#HeaderLogin{height: 378px;}
#logoHeaderContainer{width: 352.5px; padding-top: 56px;}
#loginContainer{width: 380px; margin-top: 110px; height: 409px;} 
#BienvenidoLogin{padding-top: 70.5} 
.loginInput{width: 317px; height: 32px;}

/*Header*/
#MainHeader{height: 177px;}
#HeaderAddress{padding-top: 31px; padding-right: 36px; letter-spacing: 4px; line-height:13px;}
#AddressContacto{margin-top: 15px}
#whatsHeader{margin-top: 5px;}
#ContactanosContainer{ margin-bottom: 5px; }
#ContactanosLabel{text-align: center; background: #fff; color: var(--azul); width: 140px; right: 0; padding-left: 10px; padding-right: 10px; padding-top: 2px; padding-bottom: 2px;}


/*footer*/
#MainFooter{height: 100px;}
#FooterImagoContainer{margin-top: 27px; margin-bottom: 18px; height: 36px;}
#LogoFooterImg{max-width: 41px;}

/*Elementos tabla*/
#ResumenCuenta{max-width: 18px;}
.AdminCuenta{max-width: 21px;}
#HistorialIMG{max-width: 23px}
.VerButton{max-width: 18px;}
.DescargarButton{max-width: 19px;}
.historialButton{max-width: 15px;}
.EditarAdmin{max-width: 73px;}
.AgregarAdmin{max-width: 130px;}
.EliminarAdmin{max-width: 90px;} 
.UploadButton {max-width: 13px;}

/*botones formularios*/
#AgregarUsuarioButton{max-width: 167px;}
#BotonAgregarBien{max-width: 126px;}
#GuardarUsuarioButton{max-width: 99px;}

/*Index*****/
#indexWrapper{padding-top: 176px;}
#IndexSliderContainer{height: 540px}
#buttonCuentaContainer{width: 141px; margin-top: 254px;}

.img100s{height: 540px;}

/*Moisaico*/
#ServiciosMosaico{padding-top: 49px; height: 300px}
.mosaicoSeparator {margin-top: 14px; margin-bottom: 11px;}
.greenBackContainer{margin-top: 14px; margin-bottom: 14px}
.greenBackground{padding: 3px;}

/*Activos*/
#activos{margin-top: 70px; letter-spacing: 3px;}
#activos div{ padding: 8px; margin: auto; text-align: center;}
#ActivosImgs{width: 80%; margin: auto; padding-top: 123px; padding-bottom: 123px}
.activosimg{max-width: 49%}

/*Ofertas*/
#GrayContainer{background: url(botones/gray.jpg); background-repeat: repeat; height: 630px;}
#MainInfoContainerIndex2{padding-top: 63px;}


    }/*fin 1500px*/

@media screen and (max-width: 1000px) {

#IndexSliderContainer{ height: 200px;}
#MiCuentaContainer{width: 100%;}
#buttonCuentaContainer{margin-top: 90px;}
#MainSlider{width: 100%; margin-top:70px;}
#MainInfoContainerIndex{margin-top: 500px;}
.img100s{width: 100%; height: auto;}

}/*fin 1000*/