/* --------------------------------------------------------- COMÚN --------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */

body{font-family:'Roboto',Calibri,Arial,Helvetica,Verdana,sans-serif;height: 100vh;margin: 0 auto;padding: 0px;background-color: white;}


footer {
  background-color: black;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  color: white;
}


/* --------------------------------------------------------- MÓVIL --------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */

@media (max-device-width:768px) {

.bodyIndex{background: url('../img/fondo-movil.jpg') no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}

tr th a{color:#00bcec;font-weight:normal;font-size:10px;}

html{width:100%;}

.divLogo{display:flex;align-items:center;justify-content:center;margin-top:5px;}
.divEncabezado{float:left;width:100%;border-bottom:dashed 2px lightgray;}
.divUsuario{margin-top:30px;float:left;}
.divBuscador{float:left;width:100%;}
.divImputaciones{margin-top:10px;float:left;}
.divElemento{float:left;}
.divReferencia{float:left;}

.etiError {width:99%;font-size:14px;margin-bottom:5px;margin-top:5px;float:left;margin-left:5px;color:red;}
.etiUsuario {width:99%;font-size:14px;margin-top:20px;margin-bottom:5px;float:left;margin-left:5px;color:black;}
.etiParte {width:99%;font-size:14px;margin-top:10px;float:left;margin-left:5px;color:orange;font-weight:bold;}
.etiComentario {width:99%;font-size:14px;margin-bottom:5px;float:left;margin-left:5px;color:black;}
.etiTitulo {width:99%;font-size:14px;margin-top:10px;float:left;margin-left:5px;color:black;}

.textBuscador{float:left;height:40px;margin-left:10%;border-radius:4px;border:1px solid gray;}

.btnBuscador{width:35px;float:left;margin-top:7px;}

.imgLogo{max-width:50%;}
.logoIndex{visibility:hidden;}


.linkComprar {text-decoration: none;margin-left:10px;text-align: center;color: white;width: 30%;border-radius: 4px;border: none;padding: 6px;background-color: #00bcec;}
.linkComprar:hover {color:white;background-color: #878787;text-decoration: none;}


.dropColores,.dropTallas {width: 80%;height: 30px;float: left;font-size: 12px;margin-top:10px;margin-left:10%; border-radius:4px;}
.dropColoresArticulo,.dropTallasArticulo {width: 80%;height: 30px;float: left;font-size: 14px;padding:5px;border-radius:4px;margin-left:10%;margin-top:10px;}

.panelFiltros {border: 1px solid #00bcec;border-radius:4px;margin-left:5%;width:90%;margin-top:60px;padding: 1px 0px 10px 10px;height: 140px;}
.panelFiltros2 {width:100%;margin-top:0px;height:30px;margin-top:100px}
.panelCuenta {width:100%;margin-top:20px;}
.panelMiCuenta {width:90%;margin-left:10%;}
.panelB2B {width: 97%;margin-left:2%;margin-bottom:20px;}
.panelObservaciones {margin-top: 40px;margin-left:2%;width: 96%;}
.panelResumen {float:left;width: 80%;padding: 10px;margin-top: 30px;margin-left: 10%;color: #333;font-weight: bold !important;font-size: 14px;text-align: right;border: 1px solid #CECDCB;border-radius:4px;}
.panelPantalla {width:90%;margin-left:5%;}
.panelAvanzado {position: relative;width:100%;height:500px;background-color:white;top:-10px;}

.gridB2B {width: 98%;border: none;margin-left:1%;margin-right:1%;background-color: white;}
.gridB2B td, th, tr {border-top: none;border-left: none;border-right: none;text-align: left;font-size:10px;text-decoration:none;}
.gridB2B th {font-weight: bold;text-decoration:none;}
.gridB2B tr {height: 40px;text-decoration:none;}

}


/* --------------------------------------------------------- PC ------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */


@media (min-device-width:769px) {

.bodyIndex{background: url('../img/fondo-login.jpg') no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}

tr th a{color:#00bcec;font-weight:normal;font-size:16px;}
    
.imagenLogo{padding:10px;}
.imagenSlider{width:100%;}
.imagenCarrito {margin-top: -2px;float: right;}

.imgN {height: 30px;margin-left: 165px;}
.imgD {height: 30px;margin-left: 165px;}
.imgND {height: 30px;margin-left: 70px;}
.imgArticulo {max-height: 240px;display:block;margin:auto;width:auto;max-width: 240px;}
.imgBoton {float:right;height:25px;width:25px;margin-top: -2px;margin-left: 5px;}
.imgArticuloFicha {float: left;height: auto;width: 95%;min-width: 350px;max-width:700px; margin-bottom: 10px;}
.imgPDF{float: left;margin-top: -29px;padding: 15px;}

.divItemRepeaterArticulos {height: 600px;border-bottom:1px solid lightgray;margin-bottom:20px;float:left;width:250px;margin:5px;}
.divRepeaterArticulos{margin-left:2%;float:left;width:98%;}
.divAncho{width:100%;}
.divImagenRepeater{width:100%;height:250px;position:relative;}
.divCompra {margin-top:200px;margin-left:4%;width:92%;}
.divLinkAvanzado{}
.divPie{width:100%; float:left; background-color:#353535;margin-top:100px;}
.divBuscador{width:200px;top:36px;right:10px;position:absolute;}
.divFiltros {margin: 6px 5px 0 0;width:100%;float:left;}
.divBotonFiltrar {float:left;margin-right:10px;margin-top:10px;}
.divRadio{}
.divCuentaIzquierda {width: 38%;float: left;}
.divCuentaDerecha {width: 38%;float: left;}
.divElementoCuenta {float: left;width: 100%;min-width:220px; margin: 4px;}
.divFlechas {position: fixed;right: 10px;background-color: white;padding: 3px;border-radius: 5px;z-index: 100;}
.divBotones {float: left;width: 58.8%; margin-left:10.5%;margin-top:20px;margin-bottom:20px;}
.divBotonDerecha {float: right; width:auto;}
.divBotonIzquierda {float: left;width:auto;}
.divFichaArticulo{float:left;width:50%;}
.divImagenFicha{float:left;width:90%;margin-left:5%;}
.divFlechasImagen{float:left;margin-left:40%;}
.divDescripcionCorta{float:left;width:80%;margin-left:5%;text-align:center;}
.divDesplegable{height:40px;float:left;width:100%;}
.divComprarArticulo {float: left;margin: 10px 0 0 0;width:100%;}
.divGesDocArticulo {float: left;margin: 20px 0 0 0;width:100%;}
.divCabeceraPedido {margin-left:5%;float: left;width:95%;}
.divCamposBusqueda {height: 250px;float: left; text-align: right;margin-top:10px;}
.divBotonBusquedaAvanzada {position: absolute;margin: 205px 0 0 293px;}
.divBotonCerrarBusquedaAvanzada {position: absolute;margin:5px 0 0 450px;}
.divTitulo {position: absolute;margin:-20px 10px 0px 0px;width:100%;}

.claseArticulos {float: left;padding: 10px;width: 300px;height: 550px;margin: 30px 0px 30px 20px;}

.etiDescripcion {float: left;margin-top: 10px;font-size:15px; width: 100%;text-decoration: none;text-align: center;height: 45px;padding: 5px;color: #00bcec;font-weight: bold;border-radius: 5px;}
.etiDescripcionArticulo {float: left;margin-top: 10px;font-size:20px; width: 100%;text-decoration: none;text-align: left;height: 45px;padding: 5px;color: #00bcec;font-weight: bold;border-radius: 5px;}
.etiDescripcion2Articulo {float: left;margin-top: 10px;font-size:16px; width: 100%;text-decoration: none;text-align: left;height: 30px;padding: 5px;color: black;border-radius: 5px;}
.etiDescripcionCorta {color: grey;text-align: center;font-size: 14px;}
.etiCodigo {float: left;margin-top:18px;font-size:13px;width: 100%;text-decoration: none;text-align: center;color: black;}
.etiCodigoArticulo {float: left;font-size:16px; width: 100%;text-decoration: none;text-align: left;height: 30px;padding: 5px;color: black;border-radius: 5px;}
.etiCaracteristicas {float: left;font-size:14px; width: 100%;text-decoration: none;text-align: left;height: auto;padding: 5px;color: black;border-radius: 5px;}
.etiPrecio {float: left;font-size:18px;font-weight: bold;width: 100%;text-align: center;margin-top: 10px;margin-bottom:10px;color: #00bcec;height:25px;}
.etiPrecioArticulo {float: left;font-size:20px;font-weight: bold;width: 100%;text-align: left;padding:5px;color: #00bcec;height:50px;margin-top:10px;}
.etiStockDisponible {font-size:14px;color: orange;float: left;width: 100%;text-align: center;}    
.etiStockNoDisponible {font-size:14px;color: orange;float: left;width: 100%;text-align: center;}
.etiStockArticuloDisponible {color: orange;font-weight: bold;text-align: left;padding:5px;height:30px;float: left;width: 100%;}
.etiStockArticuloNoDisponible {color: orange;font-weight: bold;text-align: left;padding:5px;height:30px;float: left;width: 100%;}
.etiFiltros {margin-right: 10px;float:left;width:100%;margin-top:5px;}
.etiTitulo {width:90%;height:30px;color:#00bcec;font-size:18px;margin-left:5%;margin-bottom:20px;float:left;}
.etiTotalPedido {font-size: 17px;margin-top: 10px;}
.etiBoton {color: #00bcec;text-decoration: none;font-size: 14px;}
.etiError {color: #00bcec;font-size: 14px;float: left;width: 100%;margin-top:20px;margin-bottom:20px;text-align:center;}
.etiCabeceraDocumento {color: #00bcec;font-size:14px;width: 90%;float: left;margin: 0px 0px 20px 0px;}
.etiBuscador {float: left;width: 100%;font-size: 15px;margin-top: 15px;margin-left: 20px;margin-bottom:10px;}
.etiBienvenida {width:90%;height:30px;color:#00bcec;font-size:16px;margin-left:5%;margin-top:100px;float:left;}
.etiCabecera {width:90%;height:30px;color:gray;font-size:26px;margin-left:5%;margin-bottom:20px;float:left;}
.etiMigas {font-size: 14px;height: 30px;padding: 5px;position: absolute;margin-top: -47px;width: auto;color: gray;left: 26px;z-index: 100;}   

.textUnidades {border: 1px solid #00bcec;padding: 1px 5px 1px 5px;height: 32px;border-radius: 4px;width: 50px;margin-left:40px;float:left;margin-top: 10px;}
.textUnidadesCarrito{text-align:left;padding:0;background-color:white;color:#00bcec;font-weight:bold;height:20px;width:50px;}
.textUnidadesArticulo {border: 1px solid #00bcec;padding: 1px 5px 1px 5px;height: 32px;border-radius: 4px;width: 50px;float:left;margin-left:5px;margin-top: 10px;}
.textFechas {width:120px;margin-right:10px;margin-top:10px; border-radius:4px;float:left;border:1px solid gray;}
.textCuenta {background-color:white;color:black;width:240px;height:40px;border-radius:4px;}
.textCuentaReadOnly {background-color: lightgray;color:black;width: 240px;height:40px;border-radius:4px;}
.textObservaciones {font-size: 12px;border: 1px solid lightgrey;border-radius: 4px;height: 40px;width: 90.5%;float: left;padding:5px;}
.textBuscador{Width:200px;Height:30px;margin:3px;border-radius:4px;}
.textBusqueda {font-size: 12px;border: 1px solid lightgrey;background-color: white;height: 20px;border-radius: 4px;}

.linkComprar {text-decoration: none;margin-left:10px;text-align: center;color: white;width: 100px;border-radius: 4px;border: none;padding: 6px;background-color: #00bcec;float:left;margin-top: 10px;}
.linkComprar:hover {color:white;background-color: #878787;text-decoration: none;margin-top: 10px;}

.TBbuscar{content:"";width:0px;height:0px;border:none;}
.BTNbuscar{content:"";width:0px;height:0px;border:none;}

.dropColores,.dropTallas {width: 200px;height: 20px;float: left;font-size: 11px;margin:8px 0 0 20px;border-radius:4px;}
.dropColoresArticulo,.dropTallasArticulo {width: 240px;height: 30px;float: left;font-size: 14px;padding:5px;border-radius:4px;margin-left:5px;}

.divisorArticulo {border-bottom: solid 1px gray;float:left;margin-left:5%; width:100%;}
.divisorCorporativo{border-top:1px solid #00bcec;width:100%;margin-bottom:50px;margin-top:-21px;}
.lineaSuperior {background-color:#00bcec;height: 5px;width: 100%;}

.panelFiltros {border: 1px solid #00bcec;border-radius:4px;margin-left:5%;width:550px;margin-top:60px;padding: 1px 0px 10px 10px;height: 110px;min-width: 500px;}
.panelFiltros2 {width: 200px;float: right;margin-top: -47px;}
.panelCuenta {width:50%;margin-bottom:20px;margin-top:50px;margin-left:50px;}
.panelMiCuenta {width:90%;margin-left:8%;}
.panelB2B {width: 60%;margin-left:10%;margin-bottom:20px;}
.panelObservaciones {margin-top: 40px;margin-left:10.5%;width: 65%;}
.panelResumen {float:left;width: 58.8%;padding: 10px;margin-top: 30px;margin-left: 10.5%;color: #333;font-weight: bold !important;font-size: 14px;text-align: right;border: 1px solid #CECDCB;border-radius:4px;}
.panelPantalla {width:90%;margin-left:5%;}
.panelAvanzado {position: absolute;top: 95px;left: 20px;width: 500px;background-color: white;border-radius: 4px;height: 273px;border: 1px solid gray;}
.panelPuntos{width: 60%;margin-top: 120px;margin-left: 5%;margin-bottom: 20px;}
.panelFidelizacion{width: 100%;margin-top: 40px;margin-bottom: 40px;height:120px;}

.gridB2B {width: 98%;border: none;margin-left:1%;margin-right:1%;min-width: 700px;}
.gridB2B td, th, tr {border-top: none;border-left: none;border-right: none;text-align: left;}
.gridB2B th {font-weight: bold;}
.gridB2B tr {height: 40px;}
   
/* Menú */

.mega-dropdown {position: static !important;}
.mega-dropdown-menu {padding: 20px 0px;width: 100%;box-shadow: none;-webkit-box-shadow: none;}
.mega-dropdown-menu > li > ul {padding: 0;margin: 0;}        
.mega-dropdown-menu > li > ul > li {list-style: none;}
.mega-dropdown-menu > li > ul > li > a {display: block;color: #222;padding: 3px 5px;}
.mega-dropdown-menu > li ul > li > a:hover,.mega-dropdown-menu > li ul > li > a:focus {text-decoration: none;}
.mega-dropdown-menu .dropdown-header {font-size: 15px;color: #00bcec;padding: 5px 60px 5px 0px;line-height: 30px;}
.mega-dropdown-menu .dropdown-header2 {font-size: 13px;color: black;padding: 5px 40px 5px 5px;line-height: 20px;}
.mega-dropdown-menu .dropdown-header3 {font-size: 11px;color: gray;padding: 5px 30px 5px 10px;line-height: 15px;}
.mega-dropdown-menu .dropdown-header4 {font-size: 10px;color: #00bcec;padding: 5px 30px 5px 15px;line-height: 15px;}
.mega-dropdown-menu .dropdown-header5 {font-size: 10px;color: black;padding: 5px 30px 5px 20px;line-height: 15px;}
.carousel-control {width: 30px;height: 30px;top: -35px;}
.left.carousel-control {right: 30px;left: inherit;}    
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right {font-size: 12px;background-color: #fff;line-height: 30px;text-shadow: none;color: #333;border: 1px solid #ddd;}
.itemMenu {color: #00bcec;}

}


/* --------------------------------------------------------- LOGIN --------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------------------------------------------------- */

input[type=button], input[type=submit], input[type=reset] {
        background-color: #ffa91b;
        border: none;
        color: white;
        padding: 15px 80px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        text-transform: uppercase;
        font-size: 13px;
        -webkit-box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
        box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
        -webkit-border-radius: 5px 5px 5px 5px;
        border-radius: 5px 5px 5px 5px;
        margin: 5px 20px 40px 20px;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

        input[type=button]:hover, input[type=submit]:hover, input[type=reset]:hover {
            background-color: #0473b8;
        }

        input[type=button]:active, input[type=submit]:active, input[type=reset]:active {
            -moz-transform: scale(0.95);
            -webkit-transform: scale(0.95);
            -o-transform: scale(0.95);
            -ms-transform: scale(0.95);
            transform: scale(0.95);
        }

    input[type=text], input[type=password] {
        background-color: #f6f6f6;
        border: none;
        color: #0d0d0d;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 5px;
        width:70%;
        border: 2px solid #f6f6f6;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        -webkit-border-radius: 5px 5px 5px 5px;
        border-radius: 5px 5px 5px 5px;
    }

        input[type=text]:focus {
            background-color: #fff;
            border-bottom: 2px solid #ffa91b;
        }

        input[type=text]:placeholder {
            color: #cccccc;
        }


     .wrapper {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        min-height: 100%;
        padding: 20px;
    }
    .wrapperSituacion {
        align-items: center;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        min-height: 100%;
        padding: 20px;
    }
    #formContent {
        -webkit-border-radius: 10px 10px 10px 10px;
        border-radius: 10px 10px 10px 10px;       
        padding: 30px;
        width: 90%;
        max-width: 450px;
        position: relative;
        padding: 0px;
       
       
        text-align: center;
    }
  
      /* TABS */
    h2.inactive {
        color: #cccccc;
    }
    h2.active {
        color: #0d0d0d;
        border-bottom: 2px solid #5fbae9;
    }
       
    /* Simple CSS3 Fade-in-down Animation */
    .fadeInDown {
        -webkit-animation-name: fadeInDown;
        animation-name: fadeInDown;
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    @-webkit-keyframes fadeInDown {
        0% {
                opacity: 0;
                -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0);
            }
        100% {
                opacity: 1;
                -webkit-transform: none;
                transform: none;
            }
    }

    @keyframes fadeInDown {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
        }

        100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
    }  
    @-webkit-keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }
    @-moz-keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }
    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .fadeIn {
        opacity: 0;
        -webkit-animation: fadeIn ease-in 1;
        -moz-animation: fadeIn ease-in 1;
        animation: fadeIn ease-in 1;
        -webkit-animation-fill-mode: forwards;
        -moz-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
        -webkit-animation-duration: 1s;
        -moz-animation-duration: 1s;
        animation-duration: 1s;
    }
    .fadeIn.first {
            -webkit-animation-delay: 0.4s;
            -moz-animation-delay: 0.4s;
            animation-delay: 0.4s;
        }
    .fadeIn.second {
            -webkit-animation-delay: 0.6s;
            -moz-animation-delay: 0.6s;
            animation-delay: 0.6s;
        }
    .fadeIn.third {
            -webkit-animation-delay: 0.8s;
            -moz-animation-delay: 0.8s;
            animation-delay: 0.8s;
        }
    .fadeIn.fourth {
            -webkit-animation-delay: 1s;
            -moz-animation-delay: 1s;
            animation-delay: 1s;
        }

    .underlineHover:after {
        display: block;
        left: 0;
        bottom: -10px;
        width: 0;
        height: 2px;
        background-color: #56baed;
        content: "";
        transition: width 0.2s;
    }
    .underlineHover:hover {
        color: #0d0d0d;
    }
    .underlineHover:hover:after {
            width: 100%;
        }
       
    *:focus {
        outline: none;
    }
    #icon {
        width: 50%;
        padding: 10px 10px 10px 10px;
    }