/*LOGIN*/
.login{ padding:50px 0; background-color:#f2f2f2; overflow:hidden;}
.login .form{ overflow:hidden;}
.login .logo{ display:none;}
.login h1{font-size:25px; margin:0 30px 0 15px; padding-top:10px; font-family: 'Oswald', sans-serif; font-weight:300; float:left;}
.login .user{  margin-right:30px; float:left;}
.login .user input{width:285px; padding:11px 8px 11px 40px; background-position:10px center; background-image:url(../img/login/ico-user.gif); background-repeat:no-repeat; border:1px solid #9a999e; background-color:#fff;}
.login .password{ margin-right:30px; float:left; text-align:right;}
.login .password input{width:285px; padding:11px 8px 11px 40px; margin-bottom:3px; background-position:10px center; background-image:url(../img/login/ico-pass.gif); background-repeat:no-repeat; border:1px solid #9a999e; background-color:#fff;}
.login .password a{ font-size:14px; text-decoration:underline; color:#000;}
.login .password a:hover{color:#7bc143;}
.login .boton{ font-size:14px; float:left; text-align:right; }
.login .boton .btn{ padding:0; margin-bottom:6px;}
.login .boton a{width:270px; font-size:20px; padding:8px 15px; font-weight:500; background-color:#000; color:#FFF; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; border:none; display:inline-block;}
.login .boton a:hover{background-color:#7bc143;}

.login .boton .entrarAPB{width:270px; font-size:20px; padding:8px 15px; font-weight:500; background-color:#000; color:#FFF; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; border:none; display:inline-block;}
.login .boton .entrarAPB:hover{background-color:#7bc143;}


.login .no-cuenta{font-size:16px; font-weight:400; padding:20px 0 0; margin-top:30px; border-top:1px solid #dedede; float:none; clear:both; text-align:center;}
.login .no-cuenta a{  font-weight:900; text-decoration:underline; color:#000;}
.login .no-cuenta a:hover{color:#7bc143;}

/*MODAL RECUPERAR CONTRASEÑA*/
#recuperar-pass{}
#recuperar-pass .modal-header img{ width:150px; height:auto;}
#recuperar-pass .modal-body{ padding:0;}
#recuperar-pass .titulo{font-size:30px; margin-bottom:5px; font-family: 'Oswald', sans-serif; font-weight:300; text-align:center;}
#recuperar-pass .subtil{ font-size:18px; font-weight:500; text-align:center;}
#recuperar-pass .modif-pass{padding:30px 15px; text-align:center;}
#recuperar-pass .modif-pass p{font-size:16px; text-align:center;}
#recuperar-pass .modif-pass input{width:80%; padding:11px 8px 11px 11px; border:1px solid #9a999e; background-color:#fff;}

#recuperar-pass .modif-pass a{ width:150px; margin:20px auto; font-size:20px; padding:8px 25px; font-weight:500; background-color:#000; color:#FFF; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; border:none; display:block; text-align:center;}
#recuperar-pass .modif-pass a:hover{background-color:#7bc143;}

#recuperar-pass .modif-pass .botonModifPass{ width:150px; margin:20px auto; font-size:20px; padding:8px 25px; font-weight:500; background-color:#000; color:#FFF; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; border:none; display:block; text-align:center;}
#recuperar-pass .modif-pass .botonModifPass:hover{background-color:#7bc143;}

#recuperar-pass .gracias{padding:40px 15px; text-align:center;}
#recuperar-pass .gracias div{font-size:35px; margin-bottom:5px; font-family: 'Oswald', sans-serif; color:#7bc143; font-weight:400; text-align:center;}

/*CAROUSEL*/
.carousel-login{ margin-bottom:80px; border-bottom:1px solid #f2f2f2;}
.carousel-login .carousel-item{ padding:70px 0 0 20px; height:430px; background-size:contain; background-position:right center; background-repeat:no-repeat;}
.carousel-login .carousel-item div{ font-size:45px; margin-bottom:20px; font-family: 'Oswald', sans-serif; font-weight:300; color:#7bc143;}
.carousel-login .carousel-item div strong{ font-weight:400;}
.carousel-login .carousel-item p{ font-size:28px; width:40%; color:#486e2d;}
.carousel-login .carousel-item p strong{ font-weight:500;}
.carousel-control-next{ width:35px; right:-50px; opacity:1;}
.carousel-control-prev{ width:35px; left:-50px; opacity:1;}
.carousel-login .slide1{ background-image:url(../img/login/img-slider-1.jpg);}
.carousel-login .slide2{ background-image:url(../img/login/img-slider-2.jpg);}
.carousel-login .slide3{ background-image:url(../img/login/img-slider-3.jpg);}
.carousel-login .slide4{ background-image:url(../img/login/img-slider-4.jpg);}

/*HEADER 1. PERSONALIZADA*/
header .container{ position:relative;}
header .logo-apb{ position:absolute; top:10px; left:0;}
header .logo-apb img{ width:220px; height:auto;}
header .navbar{ display:none;}

/*FOOTER 1. PERSONALIZADA*/
footer .logo-hb-pie{ display:none;}
footer .logo-apb-pie{ display:none;}

/*HEADER 2. SIN PERSONALIZAR*/
header.sin-perso{ overflow:hidden;}
header.sin-perso .logo-apb{ position:relative; float:left;}
header.sin-perso .logo{ float:right;}
header.sin-perso .datos-distri-top{ display:none;}

/* FORMULARIO 2. SIN PERSO*/
.formulario.sin-perso{ display:none;}

/* FOOTER 2. SIN PERSO*/
footer.sin-perso .nombre-telefono, footer.sin-perso .redes, footer.sin-perso .nav, footer.sin-perso .politica, footer.sin-perso .apb-pie, footer.sin-perso .logo-pie{ display:none;}
footer.sin-perso .logo-hb-pie{display:block; float:left;}
footer.sin-perso .logo-apb-pie{display:block; float:right;}


@media (min-width: 992px) and (max-width: 1199.98px) {

/*LOGIN*/
.login h1{ margin:0 30px 0 10px;}
.login .user input{width:240px;}
.login .password input{width:240px;}
.login .boton a{width:200px;}
.login .boton .entrarAPB{width:200px;}

/*CAROUSEL*/
.carousel-login{ margin-bottom:70px;}
.carousel-login .carousel-item{ padding:60px 0 0 30px; height:380px;}
.carousel-login .carousel-item div{ font-size:35px; margin-bottom:20px;}
.carousel-login .carousel-item p{ font-size:22px; width:40%; color:#486e2d;}
.carousel-control-next{ width:32px; right:-20px;}
.carousel-control-prev{ width:32px; left:-20px;}

/*HEADER 1. PERSONALIZADA*/
header .logo-apb{ position:absolute; top:5px; left:0;}
header .logo-apb img{ width:160px; height:auto;}

}


@media (min-width: 768px) and (max-width: 991.98px) {

/*LOGIN*/
.login{ padding:20px 0 40px;}
.login h1{display:none;}
.login .logo{ display:block; text-align:center; margin-bottom:30px;}
.login .logo img{width:160px; height:auto;}
.login .user{  margin:0 20px 0 5px;}
.login .user input{width:220px; padding:9px 8px 9px 40px;}
.login .password{ margin-right:20px;}
.login .password input{width:220px; padding:9px 8px 9px 40px; margin-bottom:3px;}
.login .password a{ font-size:13px;}
.login .boton{ font-size:13px;}
.login .boton .btn{margin-bottom:8px;}
.login .boton a{width:190px; font-size:18px; padding:8px 15px;}

.login .boton .entrarAPB{width:190px; font-size:18px; padding:8px 15px;}

.login .no-cuenta{font-size:15px; padding:20px 0 0; margin-top:30px;}

/*CAROUSEL*/
.carousel-login{ margin-bottom:60px;}
.carousel-login .carousel-item{ padding:60px 0 0 30px; height:380px; background-position:430% center;}
.carousel-login .carousel-item div{ width:50%; font-size:30px; margin-bottom:20px;}
.carousel-login .carousel-item div span.planes{display:block;}
.carousel-login .carousel-item div br.planes-br{ display:none;}
.carousel-login .carousel-item p{ font-size:18px; width:40%; color:#486e2d;}
.carousel-control-next{ width:28px; right:-30px;}
.carousel-control-prev{ width:28px; left:-30px;}

/*HEADER 1. PERSONALIZADA*/
header .logo-apb{display:none;}

/*HEADER 2. SIN PERSONALIZAR*/
header.sin-perso .logo-apb{display:block; position:relative; float:left;}
header.sin-perso .logo-apb img{width:143px; height:auto;}

/*LOGIN 2. SIN PERSO*/
.login.sin-perso { padding:40px 0;}
.login.sin-perso .logo{ display:none;}

/* FOOTER 2. SIN PERSO*/
footer.sin-perso .logo-hb-pie img{ width:180px; height:auto;}
footer.sin-perso .logo-apb-pie img{width:180px; height:auto;}


}


@media (min-width: 576px) and (max-width: 767.98px) { 
/*LOGIN*/
.login{ padding:30px 0 40px;}
.login h1{display:none;}
.login .logo{ display:block; text-align:center; margin-bottom:30px;}
.login .logo img{width:160px; height:auto;}
.login .user{width:80%;  margin:0 auto 20px; float:none; text-align:center;}
.login .user input{width:100%; padding:9px 8px 9px 40px;}
.login .password{width:80%; margin:0 auto 20px; float:none; text-align:right;}
.login .password input{width:100%; padding:9px 8px 9px 40px; margin-bottom:3px;}
.login .password a{ font-size:13px;}
.login .boton{ width:250px; margin:0 auto; font-size:13px; float:none; text-align:center; position:relative;}
.login .boton .btn{margin:30px 0 0;}
.login .boton a{width:250px; font-size:18px; padding:8px 15px;}

.login .boton .entrarAPB{width:250px; font-size:18px; padding:8px 15px;}

.login .boton .recuerdame{ position:absolute; top:0; left:0;}
.login .no-cuenta{font-size:15px; padding:20px 0 0; margin-top:30px;}

/*MODAL RECUPERAR CONTRASEÑA*/
#recuperar-pass{}
#recuperar-pass .modal-header img{ width:150px; height:auto;}
#recuperar-pass .modal-body{ padding:0;}
#recuperar-pass .titulo{font-size:25px; margin-bottom:3px;}
#recuperar-pass .subtil{ font-size:16px; }
#recuperar-pass .modif-pass{padding:25px 15px;}
#recuperar-pass .modif-pass p{font-size:14px; margin-bottom:8px;}
#recuperar-pass .modif-pass input{width:80%; padding:11px 8px 11px 11px;}

#recuperar-pass .modif-pass a{ width:150px; margin:20px auto; font-size:18px; padding:8px 25px;}
#recuperar-pass .modif-pass .botonModifPass{ width:150px; margin:20px auto; font-size:18px; padding:8px 25px;}

#recuperar-pass .gracias{padding:40px 15px;}
#recuperar-pass .gracias div{font-size:30px; margin-bottom:5px; }
#recuperar-pass .gracias p{font-size:16px;}

/*CAROUSEL*/
.carousel-login{ margin-bottom:30px;}
.carousel-login .carousel-item{ padding:50px 0 0 20px; height:292px; background-position:55px center;}
.carousel-login .carousel-item div{ width:50%; font-size:23px; margin-bottom:20px;}
.carousel-login .carousel-item div span.planes{display:block;}
.carousel-login .carousel-item div br.planes-br{ display:none;}
.carousel-login .carousel-item p{ font-size:17px; width:45%;}
.carousel-control-next{ width:25px; right:-30px;}
.carousel-control-prev{ width:25px; left:-30px;}

/*HEADER 1. PERSONALIZADA*/
header .logo-apb{display:none;}

/*HEADER 2. SIN PERSONALIZAR*/
header.sin-perso{ overflow:hidden;}
header.sin-perso .logo-apb{display:none;}
header.sin-perso .logo{ margin:15px 0 15px; float:none; text-align:center; padding:0;}
header.sin-perso .datos-distri-top{ display:none;}

/*LOGIN 2. CAMBIO DE PÒSICIÓN LOGIN Y CAROULSEL*/
.login.sin-perso{ position:absolute; top:391px; width:100%;}

/* FOOTER 2. SIN PERSO*/
footer.sin-perso{ margin-top:472px;}
footer.sin-perso .logo-hb-pie img{ width:140px; height:auto;}
footer.sin-perso .logo-apb-pie img{width:140px; height:auto;}

}


@media (max-width: 575.98px) { 

/*LOGIN*/
.login{ padding:30px 0 40px;}
.login h1{display:none;}
.login .logo{ display:block; text-align:center; margin-bottom:20px;}
.login .logo img{width:160px; height:auto;}
.login .user{width:290px;  margin:0 auto 20px; float:none; text-align:center;}
.login .user input{width:290px; padding:9px 8px 9px 40px;}
.login .password{width:290px; margin:0 auto 20px; float:none; text-align:right;}
.login .password input{width:290px; padding:9px 8px 9px 40px; margin-bottom:3px;}
.login .password a{ font-size:13px;}
.login .boton{ width:290px; margin:0 auto; font-size:13px; float:none; text-align:center; position:relative;}
.login .boton .btn{margin:30px 0 0;}

.login .boton a{width:290px; font-size:18px; padding:8px 15px;}
.login .boton .entrarAPB{width:290px; font-size:18px; padding:8px 15px;}

.login .boton .recuerdame{ position:absolute; top:0; left:0;}
.login .no-cuenta{ width:290px; font-size:15px; padding:20px 0 0; margin:30px auto 0;}
.login .no-cuenta span{ display:block;}

/*MODAL RECUPERAR CONTRASEÑA*/
#recuperar-pass{}
#recuperar-pass .modal-header img{ width:150px; height:auto;}
#recuperar-pass .modal-body{ padding:0;}
#recuperar-pass .titulo{font-size:25px; margin-bottom:3px;}
#recuperar-pass .subtil{ font-size:16px; }
#recuperar-pass .modif-pass{padding:25px 15px;}
#recuperar-pass .modif-pass p{font-size:14px; margin-bottom:8px;}
#recuperar-pass .modif-pass input{width:80%; padding:11px 8px 11px 11px;}

#recuperar-pass .modif-pass a{ width:150px; margin:20px auto; font-size:18px; padding:8px 25px;}
#recuperar-pass .modif-pass .botonModifPass{ width:150px; margin:20px auto; font-size:18px; padding:8px 25px;}

#recuperar-pass .gracias{padding:40px 15px;}
#recuperar-pass .gracias div{font-size:30px; margin-bottom:5px; }
#recuperar-pass .gracias p{font-size:16px;}


/*CAROUSEL*/
.carousel-login{ margin-bottom:20px;}
.carousel-login .carousel-item{ padding:10px 0 0 10px; height:180px; background-size:cover; background-position:30px center;}
.carousel-login .carousel-item.slide3{ background-position:40px 0;}
.carousel-login .carousel-item div{ width:64%; font-size:17px; margin-bottom:5px;}
.carousel-login .carousel-item div span.planes{display:block;}
.carousel-login .carousel-item div br.planes-br{ display:none;}
.carousel-login .carousel-item p{ font-size:13px; width:53%;}
.carousel-control-next{ width:15px; right:-10px;}
.carousel-control-prev{ width:15px; left:-10px;}

/*HEADER 1. PERSONALIZADA*/
header .logo-apb{display:none;}

/*HEADER 2. SIN PERSONALIZAR*/
header.sin-perso{ overflow:hidden;}
header.sin-perso .logo-apb{display:none;}
header.sin-perso .logo{ margin:9px 0 8px; float:none; text-align:center; padding:0;}
header.sin-perso .datos-distri-top{ display:none;}

/*LOGIN 2. CAMBIO DE PÒSICIÓN LOGIN Y CAROULSEL*/
.login.sin-perso{ position:absolute; top:279px; width:100%;}


/* FOOTER 2. SIN PERSO*/
footer.sin-perso{ margin-top:484px;}
footer.sin-perso .logo-hb-pie img{ width:120px; height:auto;}
footer.sin-perso .logo-apb-pie img{width:120px; height:auto;}


}