html {
background-image:url(../img/bg_clouds.jpg);
background-repeat:no-repeat;
background-size:100%;
margin:0;
padding:0;
}
body {
margin:0;
padding:0;
font-family:Alcefun Bold, Arial, sans-serif;
}
.main-container {
position:absolute;
top:0;
left:5%;
width:90%;
min-height:150px;
border:none;
background:rgba(255,255,255,.7);
}
.logo {
position:absolute;
width:15%;
top:2%;
left:3%;
z-index:1001;
}
.header-container {
position:relative;
width:100%;
min-height:65px;
border:none;
background:url('../img/gradient_white_short.png');
background-repeat:repeat-x;
background-size:100% 100%;
background-color:#6699cc;
margin:0 auto;
}
.body-container {
position:relative;
width:80%;
min-height:300px;
margin-top:-15px;
margin-left:auto; margin-right:auto;
margin-bottom:15px;
font-family:Alcefun Bold, Arial, sans-serif;
padding-top:15px;
padding-bottom:15px;
color:#000;
border-bottom:1px solid #000;
border-bottom-left-radius:5px; border-bottom-right-radius:5px;
background-color:#000;
background-image:url('../img/gradient_white-td_xlarge.png');
background-repeat:repeat-x;
background-size:100% 100%;
}
.body-header-container {
position:relative;
margin-top:20px;
width:80%;
min-height:30px;
border-bottom:2px solid rgba(0,0,0,.7);
text-align:center;
background-color:#666;
border-top-left-radius:5px; border-top-right-radius:5px;
border-top:1px solid #fff;
background-image:url('../img/gradient_white_short.png');
background-repeat:repeat-x;
margin-bottom:15px;
padding-top:10px;
margin-left:auto; margin-right:auto;
font-family:Alcefun Bold, Arial, sans-serif;
}
.body-container h1 {
text-align:center;
}
.footer-container {
position:relative;
width:100%;
min-height:80px;
background:#666666;
background-image:url('../img/gradient_white_short.png');
background-repeat:no-repeat;
background-size:100% 100%;
font-size:85%;
}
.menu-container {
position:absolute;
top:10px;
right:2%;
overflow:hidden;
background:url('../img/gradient_white_short.png');
background-repeat:repeat-x;
background-size:100% 100%;
background-color:#999;
}
.menu_inactive {
position:relative;
display:inline-block;
width:140px;
height:100%;
margin-left:0;
margin-right:0;
text-align:center;
padding:5px 0;
border-left:2px solid rgba(0,0,0,.6);
transition:.5s ease;
-webkit-transition:.5s ease;
-moz-transition:.5s ease;
-o-transition:.5s ease;
}
.menu_inactive:hover {
background:#284a92;
color:#fff;
cursor:pointer;
}
.menu_active {
position:relative;
display:inline-block;
width:140px;
height:100%;
margin-left:0;
margin-right:0;
text-align:center;
padding:5px 0;
background-color:#284a92;
color:#fff;
cursor:pointer;
}
ul.ventajas-list {
position:relative;
width:90%;
}
ul.ventajas-list li{
font-family:Alcefun Bold, Arial, sans-serif;
font-size:23px;
text-align:left;
}
.ventaja {
position:relative;
min-height:70px;
padding:10px 20px;
margin:10px 0;
opacity:1;
}
.ventaja_title {
position:relative;
font-family:Alcefun Bold, Arial, sans-serif;
font-size:20px;
font-weight:bold;
font-style:italic;
color:#000;
display:inline;
}
.ventaja_desc {
font-family:Alcefun Bold, Arial, sans-serif;
font-size:20px;
display:inline;
}
.ventaja_img {
width:100px;
height:80px;
border:none;
box-shadow:2px 2px 5px rgba(0,0,0,.5), -2px -2px 5px rgba(0,0,0,.5);
float:left;
margin:0px 10px;
}
input.button {
font-size:105%;
font-weight:bold;
border-radius:5px;
margin:10px 0;
}
#frm_contacto {
width:80%;
margin-left:auto; margin-right:auto;
padding:10px 15px;
box-shadow:2px 2px 2px #000 inset, -2px -2px 2px #000 inset;
}
.small_comment {
font-size:85%;
}
h1.title {
text-align:center;
padding:0 10px;
}
h2.title {
text-align:center;
padding:0 10px;
}
h3.title {
text-align:center;
padding:5px 10px;
border-top:1px solid #fff;
border-bottom:2px solid #000;
border-radius:5px;
width:60%;
margin-top:10px;
}
h3 {
padding:0 10px;
width:80%;
margin:0 auto;
}
#recargas {
width:75%;
margin-left:auto; margin-right:auto;
/*border:1px dotted #f0f;*/
color:#fff;
}
.clientes_login {
position:fixed;
top:10%;
left:15%;
width:70%;
max-height:300px;
background:rgba(0,0,0,.4);
color:#000;
box-shadow:5px 5px 10px rgba(0,0,0,.6), -5px -5px 10px rgba(0,0,0,.6);
z-index:1002;
}
.login-container {
border:none;
width:85%;
margin:20px auto;
background:#D0D0D0;
padding:10px 0;
}
form.login {
margin:10px auto;
width:60%;
font-size:120%;
text-align:center;
}
form.login input {
width:200px;
}
a.go_register {
color:#565656;
text-decoration:underline;
transition:.5s ease;
-webkit-transition:.5s ease;
-moz-transition:.5s ease;
-o-transition:.5s ease;
}
a.go_register:hover {
color:#6C6;
text-decoration:underline;
}
.registro-container {
margin:0 auto;
width:95%;
padding:5px 10px;
box-shadow:2px 2px 3px #000 inset, -2px -2px 3px #000 inset;
}
.registro-long {
width:300px;
margin-bottom:15px;
margin-top:5px;
transition:.5s ease;
-webkit-transition:.5s ease;
-moz-transition:.5s ease;
-o-transition:.5s ease;
}
.registro-long:focus {
background:#ff0;
}
.registro-medium {
width:150px;
margin-bottom:15px;
margin-top:5px;
transition:.5s ease;
-webkit-transition:.5s ease;
-moz-transition:.5s ease;
-o-transition:.5s ease;
}
.registro-medium:focus {
background:#ff0;
}
.registro-short {
width:100px;
margin-bottom:15px;
margin-top:5px;
transition:.5s ease;
-webkit-transition:.5s ease;
-moz-transition:.5s ease;
-o-transition:.5s ease;
}
.registro-short:focus {
background:#ff0;
}
label {
margin-left:10px;
}
table.registro {
}
table.registro th {
background:#999;
padding:5px;
}
table.registro td {
background:#E0E0E0;
padding:5px;
}
.aviso-container {
width:80%;
margin:20px auto;
background:#E0E0E0;
padding:20px 10px;
}
#privacy_policy {
display:none;
opacity:0;
width:80%;
height:90%;
background:rgba(0,0,0,.8);
position:fixed;
top:10%;
left:10%;
overflow:scroll;
}
select {
margin-top:5px;
margin-bottom:15px;
}
/*################################## zona de clientes #################################*/
#accordion {
width:90%;
margin-left:auto; margin-right:auto;
}
#accordion>h3 {
width:90%;
margin-left:auto; margin-right:auto;
}
#accordion>div {
width:85%;
margin-left:auto; margin-right:auto;
background:#3590A7;
background-image:url(../img/gradient_white_large.png);
background-repeat:repeat-x;
background-size:100% 100%;
}
.accesos_rapidos-container {
position:relative;
margin:-20px auto 20px;
min-height:40px;
max-width:100%;
}
.clientes-menu {
margin-top:15px;
margin-left:80%;
padding:5px 0px;
}
.clientes-menu a {
color:#000;
padding:5px 10px;
text-decoration:none;
background:#DBDBDB;
border-radius:5px;
box-shadow:2px 2px 2px rgba(0,0,0,.8);
margin:5px 2px;
transition:.5s ease;
-webkit-transition:.5s ease;
-moz-transition:.5s ease;
-o-transition:.5s ease;
}
.clientes-menu a:hover {
color:#E7E7E7;
background:#929292;
}
.clientes-topic {
width:90%;
height:40px;
margin:0 auto;
background:#DBDBDB;
}
.clientes-topic_title {
width:100%;
text-align:center;
height:20px;
padding:10px 0 10px;
border:solid 3px #A8A8A8;
background:#DBDBDB;
cursor:pointer;
transition:.5s ease;
-webkit-transition:.5s ease;
-moz-transition:.5s ease;
-o-transition:.5s ease;
}
.clientes-topic_title:hover {
background:#9B9B9B;
color:#fff;
}
.clientes-topic_title-active {
background:#9B9B9B;
color:#fff;
}
.clientes-topic_title-icon {
background:url(../img/down.png);
background-size:100%;
background-repeat:no-repeat;
float:right;
width:30px;
height:30px;
margin-right:20px;
}
.horarios-container {
}
.horarios-content {
}
.horarios-title_center {
width:90%;
text-align:center;
background:#1E1E6A;
color:#F00;
padding:10px 15px;
margin:0px auto;
border:3px solid #c6c6c6;
}
.horarios-title_left {
width:90%;
text-align:left;
color:#000;
padding:10px 15px;
margin:0 auto;
}
.horarios-content_center {
text-align:center;
width:90%;
}
/*################################## footer #################################*/
.footer-content {
position:relative;
width:25%;
padding:10px 15px;
font-family:Arial;
border-right:2px solid #999;
display:inline-table;
border-top-right-radius:5px;
border-bottom-right-radius:5px;
margin-top:-30px;
}
.footer-icon_container {
position:relative;
width:25px;
height:25px;
margin-bottom:5px;
background-image:url('http://bit-factory.com.mx/img/mini-vector-icons.png');
border-radius:10px;
}
.home-icon {
background-position:-439px -143px;
}
.phone-icon {
background-position:270px -183px;
}
/*################################### Shadows ###################################*/
#shadow_footer {
width:100%;
}
.shadow-vertical-left {
position:absolute;
height:100%;
width:20px;
left:-20px;
}
.shadow-vertical-right {
position:absolute;
height:100%;
width:20px;
right:-20px;
}
/*################################### Responsive ###################################*/
@media only screen and (min-width: 0px) and (max-width: 349px) {
.shadow-vertical-left {
display:none;
}
.shadow-vertical-right {
display:none;
}
.main-container {
position:absolute;
top:0;
left:0;
width:98%;
margin-left:1%;
}
.logo {
position:relative;
width:40%;
margin-left:30%;
}
.menu-container {
position:relative;
width:100%;
margin:0;
right:0;
}
.menu_inactive {
position:relative;
width:100%;
display:block;
}
.menu_active {
position:relative;
width:100%;
display:block;
}
.body-container {
position:relative;
width:100%;
font-size:85%;
}
.body-header-container {
position:relative;
margin-top:20px;
width:100%;
}
.footer-content {
position:relative;
width:100%;
border:none;
display:block;
margin-top:0;
}
.TB_Wrapper {
margin:0 auto;
box-shadow:none;
width: 98%;
}
.slide {
width: 98%;
}
.ventaja {
}
.ventaja_title {
position:relative;
display:block;
width:100%;
text-align:center;
margin-top:10px;
}
.ventaja_desc {
position:relative;
display:block;
font-size:95%;
border-bottom:1px groove #666;
}
.ventaja_img {
position:relative;
display:block;
width:80%;
height:135px;
margin-left:10%;
margin-bottom:10px;
}
.registro-long {
width:90%;
margin-left:1%;
}
.registro-medium {
width:80%;
margin-left:1%;
}
.registro-container {
width:100%;
padding:5px 0;
}
.clientes_login {
position:fixed;
width:100%;
top:5%;
left:0;
}
.login-container {
width:98%;
margin:10px 1%;
}
form.login {
margin:10px auto;
width:100%;
font-size:95%;
}
#accordion {
width:98%;
margin-left:auto; margin-right:auto;
}
#accordion>h3 {
width:85%;
margin-left:auto; margin-right:auto;
}
#accordion>div {
width:75%;
margin-left:auto; margin-right:auto;
}
.horarios-container {
width:98%;
margin-left:1%;
}
.horarios-title_center {
width:95%;
padding:10px 2px;
}
.horarios-title_left {
width:90%;
text-align:left;
color:#000;
padding:10px 15px;
margin:0 auto;
}
.horarios-content_center {
text-align:center;
width:90%;
}
}
@media only screen and (min-width: 350px) and (max-width: 550px) {
.shadow-vertical-left {
display:none;
}
.shadow-vertical-right {
display:none;
}
.main-container {
position:absolute;
top:0;
left:0;
width:100%;
}
.logo {
position:relative;
width:30%;
margin-left:30%;
}
.menu-container {
position:relative;
width:100%;
margin:0;
right:0;
}
.menu_inactive {
position:relative;
width:100%;
display:block;
border:none;
}
.menu_active {
position:relative;
width:100%;
display:block;
border:none;
}
.body-container {
position:relative;
width:98%;
margin-left:1%;
font-size:85%;
}
.body-header-container {
position:relative;
margin-top:20px;
width:98%;
margin-left:1%;
}
.footer-content {
position:relative;
width:100%;
border:none;
display:block;
margin-top:0;
}
.TB_Wrapper {
margin:0 auto;
box-shadow:none;
max-width: 98%;
}
.ventaja {
position:relative;
display:block;
}
.ventaja_title {
position:relative;
display:block;
width:100%;
text-align:center;
margin-top:10px;
}
.ventaja_desc {
position:relative;
display:block;
font-size:95%;
border-bottom:1px groove #666;
}
.ventaja_img {
position:relative;
display:block;
width:80%;
height:165px;
margin-left:15%;
margin-bottom:10px;
}
.registro-long {
width:70%;
margin-left:1%;
}
.registro-medium {
width:50%;
margin-left:1%;
}
.registro-container {
width:100%;
padding:5px 0;
}
.clientes_login {
position:fixed;
width:100%;
top:0;
left:0;
}
.login-container {
width:98%;
margin:10px 1%;
}
form.login {
margin:10px auto;
width:100%;
font-size:95%;
}
}
@media only screen and (min-width: 551px) and (max-width: 750px) {
.shadow-vertical-left {
display:none;
}
.shadow-vertical-right {
display:none;
}
.main-container {
position:absolute;
top:0;
left:0;
width:100%;
}
.logo {
position:relative;
width:30%;
margin-left:30%;
}
.menu-container {
position:relative;
width:100%;
margin:0;
right:0;
}
.menu_inactive {
position:relative;
width:100%;
display:block;
border:none;
}
.menu_active {
position:relative;
width:100%;
display:block;
border:none;
}
.body-container {
position:relative;
width:100%;
font-size:85%;
}
.body-header-container {
position:relative;
margin-top:20px;
width:100%;
}
.footer-content {
position:relative;
width:100%;
border:none;
display:block;
margin-top:0;
}
.TB_Wrapper {
margin:0 auto;
box-shadow:none;
max-width: 98%;
}
.ventaja {
position:relative;
display:block;
}
.ventaja_title {
position:relative;
display:block;
width:100%;
text-align:center;
margin-top:10px;
}
.ventaja_desc {
position:relative;
display:block;
font-size:95%;
border-bottom:1px groove #666;
}
.ventaja_img {
position:relative;
display:block;
width:80%;
height:165px;
margin-left:15%;
margin-bottom:10px;
}
.registro-long {
width:70%;
margin-left:1%;
}
.registro-medium {
width:50%;
margin-left:1%;
}
.registro-container {
width:100%;
padding:5px 0;
}
.clientes_login {
position:fixed;
width:100%;
top:5%;
left:0;
}
.login-container {
width:98%;
margin:10px 1%;
}
form.login {
margin:10px auto;
width:100%;
font-size:95%;
}
}
@media only screen and (min-width: 751px) and (max-width: 1000px) {
.shadow-vertical-left {
display:none;
}
.shadow-vertical-right {
display:none;
}
.main-container {
position:absolute;
top:0;
left:0;
width:100%;
}
.logo {
position:relative;
width:30%;
margin-left:30%;
}
.menu-container {
position:relative;
width:100%;
margin:0;
right:0;
}
.menu_inactive {
position:relative;
width:100%;
display:block;
border:none;
}
.menu_active {
position:relative;
width:100%;
display:block;
border:none;
}
.body-container {
position:relative;
width:90%;
margin-left:5%;
font-size:85%;
}
.body-header-container {
position:relative;
margin-top:20px;
width:90%;
margin-left:5%;
}
.footer-content {
position:relative;
width:100%;
border:none;
display:block;
margin-top:0;
}
.TB_Wrapper {
margin:0 auto;
box-shadow:none;
max-width: 98%;
}
.ventaja {
position:relative;
display:block;
}
.ventaja_title {
position:relative;
display:block;
width:100%;
text-align:center;
margin-top:10px;
}
.ventaja_desc {
position:relative;
display:block;
font-size:95%;
border-bottom:1px groove #666;
}
.ventaja_img {
position:relative;
display:block;
width:80%;
height:250px;
margin-left:15%;
margin-bottom:10px;
}
}
@media only screen and (min-width: 1001px) and (max-width: 1100px) {
}