.top {
    background-color: #FF5B88;
    height: 38px;
}
/*BUSCADOR*/

.dropdown-menu {
    right: 0% !important;
    left: -200% !important;
    background-color: #787950 !important;
}
#dropdown1 {}
input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid #FF608A!important;
    -webkit-box-shadow: 0 1px 0 0 #FF608A!important;
    box-shadow: 0 1px 0 0 #FF608A!important;
}
.dropdown-content {
    background-color: #fafafa!important;
    margin: 0;
    display: none;
    min-width: 100px;
    overflow-y: auto;
    opacity: 0;
    position: absolute;
    right: 0%!important;
    left: 43%!important;
    width: 300px!important;
    height: 265px;
    top: 0;
    z-index: 9999;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
header #buscador {
    float: right;
}
header #buscador input[type=search] {
    margin: 0px;
    width: 141px!important;
    height: 24px;
    color: black;
    cursor: pointer;
    background-color: #FFFFFF;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
    border-bottom: 0px;
    border-radius: 5px;
    margin-right: 10px;
}
/* FIN BUSCADOR */

header .list-top {
    margin: 0px -98px;
    margin-right: -18px;
}
header .li-icondistribuidor {
    position: relative;
    right: 90px;
    top: 5px;
    background-color: transparent;
    border-radius: 0px;
    float: right;
    height: 26px;
    width: 62px;
    line-height: 10px;
    display: flex;
    justify-content: center;
    /* horizontal*/
    align-items: center;
    /*vertical*/
    border-right: 1px solid #ffffff;
}
header .li-distribuidor a {
    color: #FFFFFF;
    font-size: 16px;
}
header .li-distribuidor {
    position: relative;
    right: 48px;
    border-radius: 0px;
    float: right;
    height: 35px;
    width: 245px;
    font-family: 'Asap';
    font-weight: 600;
    display: flex;
    justify-content: center;
    /* horizontal*/
    align-items: center;
    /*vertical*/
}
header .li-presupuesto a {
    font-family: arial;
    color: #DDDDDD;
    font-size: 15px;
}
header .li-presupuesto {
    background-color: transparent;
    border-radius: 0px;
    float: right;
    height: 35px;
    width: 243px;
    display: flex;
    justify-content: center;
    /* horizontal*/
    align-items: center;
    /*vertical*/
    border-right: 2px solid #777777;
    border-left: 2px solid #777777;
}
header .li-redes a {
    font-family: arial;
    color: #DDDDDD;
    font-size: 16px;
    margin: 0px 11px;
}
header .li-redes {
    background-color: transparent;
    border-radius: 0px;
    float: left;
    color: white;
    position: relative;
    top: 4px;
    left: -30px;
    height: 35px;
    width: 145px;
    display: flex;
    justify-content: center;
    /* horizontal*/
    align-items: center;
    /*vertical*/
}
header .numero {
    position: relative;
    bottom: 0px;
    left: 5px;
}
header .li-red {
    background-color: transparent;
    border-radius: 0px;
    list-style: none;
    float: right;
    height: 37px;
    width: 35px;
    margin-right: -22px;
    display: flex;
    justify-content: center;
    /* horizontal*/
    align-items: center;
    /*vertical*/
}
header .principal {
    height: 190px!important;
    background-color: white;
    font-family: 'Asap';
}
nav ul a {
    color: #7D0045!important;
    font-size: 16px!important;
    font-family: 'Asap';
    margin: 0 12px;
    padding: 0!important;
}
nav .brand-logo {
    top: 58px;
    height: 113px!important;
    left: 47.5%!important;
}
nav ul a:hover {
    background-color: transparent!important;
    font-family: 'Asap';
    margin: 0 12px;
    padding: 0!important;
    border-bottom: 3px solid #7D0045 !important;
}
.activo {
    background-color: transparent!important;
    font-family: 'Asap';
    border-bottom: 3px solid #7D0045 !important;
}
nav .item-left a {
    color: #7D0045!important;
    font-size: 16px!important;
    font-family: arial;
    margin: 0 22px;
    padding: 0!important;
}
nav .item-left a:hover {
    color: #7D0045!important;
    font-size: 16px!important;
    font-family: arial;
    margin: 0 22px;
    padding: 0!important;
}
nav .item-left {
    position: relative;
    top: 77px;
    left: 19px;
    width: 468px;
    font-size: 18px;
    font-family: 'Asap';
    font-weight: 600;
    line-height: 46px;
}
nav .item-right {
    position: relative;
    top: 77px;
    right: 28px;
    font-size: 18px;
    word-spacing: 0px;
    font-family: 'Asap';
    font-weight: 600;
    line-height: 46px;
}
nav ul li {
    margin: 0px 5px;
}
.colorboton {
    background-color: #7D0045!important;
}
.colorboton input {
    color: white;
    font-family: 'Lato';
    font-weight: bold;
}
nav .sidenav-trigger {
    color: #FF5B88!important;
}
/* lupita para buscador en movil*/

#mobile_search {
    display: none;
    width: 45px;
    /*ancho por defecto*/
    background: #ededed url(/parpen/img/lupaa.png) no-repeat 9px center;
    /*icono lupa*/
    padding: 9px 10px 9px 32px;
    border-radius: 15em;
    -webkit-transition: all .5s;
    /* transición de .5seg a todos los elementos para chrome*/
    -moz-transition: all .5s;
    /* transición de .5seg a todos los elementos para mozilla*/
    -o-transition: all .5s;
    /* transición de .5seg a todos los elementos para ophera*/
    transition: all .5s;
    /* transición de .5seg a todos los elementos*/
    outline: none;
    /* ocultar el fucos automático de los input */
}
#mobile_search:focus {
    width: 130px;
    /*tamaño del boton buscar al hacer click*/
    padding-left: 32px;
    /*espacio entre el icono lupa y el placeholder*/
    color: #000;
    background-color: #FFF;
}

/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<  990 px <<<<<<*/
@media only screen and (max-width: 990px) {
    #mobile_search {
        display: inline;
        width: 0px;
        /*ancho por defecto*/
        background: #FFF url(/parpen/img/lupa.png) no-repeat 9px center;
        /*icono lupa*/
            position: relative;
        left: 113%;
        padding: 9px 43% 9px 32px;
        border-radius: 15em;
        -webkit-transition: all .5s;
        /* transición de .5seg a todos los elementos para chrome*/
        -moz-transition: all .5s;
        /* transición de .5seg a todos los elementos para mozilla*/
        -o-transition: all .5s;
        /* transición de .5seg a todos los elementos para ophera*/
        transition: all .5s;
        /* transición de .5seg a todos los elementos*/
        outline: none;
        /* ocultar el fucos automático de los input */
        border-bottom: 1px solid #FFF;
    }

#mobile_search:focus {
    margin-top: 138%;
    height: 5px;
    width: 655%;
    padding-left: 42px;
    margin-right: 42px;
    color: #FF5F8A;
    background: none;
    background-color: #fafafa;
    border-left: 1px solid;
    border-right: 1px solid;
    border-top: 1px solid;
    border-bottom: 1px solid #FF5F8A!important;
    position: relative;
    /* right: 33%; */
    left: -607%;
    border-radius: 6px;
}

    nav i, nav [class^="mdi-"], nav [class*="mdi-"], nav i.material-icons {
    font-size: 40px!important;
}

nav .sidenav-trigger {
    float: left;
    position: relative;
    /*z-index: 1;*/
    height: 56px;
    margin: 36px 0 0 0%!important;
}
}
/* FIN lupita para buscador en movil*/

/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<  1180 px <<<<<<*/
@media only screen and (max-width: 1180px) {

    header .principal img {
            height: 120%;
    margin-top: 20%;
    }

    nav .brand-logo {
        top: 15px;
    }

    header .principal {
        height:190px!important;
    }
nav .item-left a {
    color: #7D0045!important;
    font-size: 16px!important;
    font-family: arial;
    margin: 0 10px;
    padding: 0!important;
}

nav ul a {
    color: #7D0045!important;
    font-size: 16px!important;
    font-family: 'Asap';
    margin: 0 1px;
    padding: 0!important;
}


}


/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<  1000 px <<<<<<*/
@media only screen and (max-width: 1000px) {

    .productomovil a {
    font-family: 'lato'!important;
    font-weight: bold!important;
    color: #595959!important;
}

    .top {
        display: none;
    }
    .filtro_categorias {
    -webkit-box-shadow: none;
    width: 100%!important;
    position: relative!important;
    top: 30%!important;
    left: 0%!important;
}
    header .principal img {
        height: 75%;
        margin-top: 0%;
    }

    nav .brand-logo {
        top: 15px;
    }

    header .principal {
        height: 130px!important;
    }

    .lupa{
    right: 116%;
    position: relative;
        margin-top: 65%;
    width: 51px;

    }
    .lupa:focus{
            left: 12%;
        position: relative;
        margin-top: 153%;
    }

    #mobile_search {
        display: inline;
        width: 0px;
        /*ancho por defecto*/
        background: #FFF url(/parpen/img/lupa.png) no-repeat 9px center;
        /*icono lupa*/
            position: relative;
        left: 113%;
        padding: 9px 43% 9px 32px;
        border-radius: 15em;
        -webkit-transition: all .5s;
        /* transición de .5seg a todos los elementos para chrome*/
        -moz-transition: all .5s;
        /* transición de .5seg a todos los elementos para mozilla*/
        -o-transition: all .5s;
        /* transición de .5seg a todos los elementos para ophera*/
        transition: all .5s;
        /* transición de .5seg a todos los elementos*/
        outline: none;
        /* ocultar el fucos automático de los input */
        border-bottom: 1px solid #FFF;
    }

    #mobile_search:focus {
    margin-top: 138%;
    height: 5px;
    width: 437%;
    padding-left: 42px;
    margin-right: 42px;
    color: #FF5F8A;
    background: none;
    background-color: #fafafa;
    border-left: 1px solid;
    border-right: 1px solid;
    border-top: 1px solid;
    border-bottom: 1px solid #FF5F8A!important;
    position: relative;
    /* right: 33%; */
    left: -406%;
    border-radius: 6px;
}

    .catemovil{
        background-color: #FAFAFA!important;   
        text-transform: uppercase!important;
        font-family: 'lato'!important;
        font-weight: bold!important;
        color: #FF5F8A!important;
        border-style: solid!important;
        border-width: 0px 0px 1px 0px!important;
        padding-left: 4%!important;
    }
    .catemovil:hover{
        background-color: #FF5F8A!important;   
        text-transform: uppercase!important;
        font-family: 'lato'!important;
        font-weight: bold!important;
        color: #FAFAFA!important;
        border-style: solid!important;
        border-width: 0px 0px 1px 0px!important;
        padding-left: 4%!important;
    }
    .subcatemovil{
        background-color: #FAFAFA!important;   
        text-transform: uppercase;
        font-family: 'lato'!important;
        font-weight: bold!important;
        color: #FF5F8A!important;
        border-style: solid!important;
        border-width: 0px 0px 1px 0px!important;
        padding-left: 8%!important;
    }

    .subcatemovil:hover{
        background-color: #FF5F8A!important;   
        font-weight: bold!important;
        color: #FAFAFA!important;
        text-transform: uppercase;
        font-family: 'lato';
        color: #FAFAFA;
        border-style: solid;
        border-width: 0px 0px 1px 0px;
        padding-left: 8%;
    }

    .productomovil{
        text-transform: uppercase;
        font-family: 'lato';
        font-weight: bold;
        border-style: solid!important;
        border-width: 0px 0px 1px 0px!important;
        padding-left: 0%!important;
    }

    .productomovil a{
        padding-left: 4%!important;
        padding-right: 0%!important;
    }

    .principalmovil{
    color: #595959!important;
    font-size: 16px!important;
    font-family: 'Asap';
    border-style: solid!important;
    border-width: 0px 0px 0px 0px!important;
    }

    .sidenav li>a>i, .sidenav li>a>[class^="mdi-"], .sidenav li>a li>a>[class*="mdi-"], .sidenav li>a>i.material-icons {
        float: left;
        height: 48px;
        line-height: 48px;
        width: 24px;
        margin-left: 10px;
        color: #FF5F8A!important;
    }
}


/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<  767 px <<<<<<*/
@media only screen and (max-width: 767px) {
    .top {
        display: none;
    }
    header .principal img {
        height: 75%;
        margin-top: 0%;
    }
    .filtro_categorias {
    -webkit-box-shadow: none;
       width: 100%!important;
    position: relative;
    top: 30%!important;
    left: 0%!important;
}

    nav .brand-logo {
        top: 15px;
    }

    header .principal {
        height: 130px!important;
    }

    .lupa{
    right: 116%;
    position: relative;
        margin-top: 65%;
    width: 51px;

    }
    .lupa:focus{
            left: 12%;
        position: relative;
        margin-top: 153%;
    }

    #mobile_search {
        display: inline;
        width: 0px;
        /*ancho por defecto*/
        background: #FFF url(/parpen/img/lupa.png) no-repeat 9px center;
        /*icono lupa*/
            position: relative;
        left: 113%;
        padding: 9px 43% 9px 32px;
        border-radius: 15em;
        -webkit-transition: all .5s;
        /* transición de .5seg a todos los elementos para chrome*/
        -moz-transition: all .5s;
        /* transición de .5seg a todos los elementos para mozilla*/
        -o-transition: all .5s;
        /* transición de .5seg a todos los elementos para ophera*/
        transition: all .5s;
        /* transición de .5seg a todos los elementos*/
        outline: none;
        /* ocultar el fucos automático de los input */
        border-bottom: 1px solid #FFF;
    }

    #mobile_search:focus {
    margin-top: 138%;
    height: 5px;
    width: 437%;
    padding-left: 42px;
    margin-right: 42px;
    color: #FF5F8A;
    background: none;
    background-color: #fafafa;
    border-left: 1px solid;
    border-right: 1px solid;
    border-top: 1px solid;
    border-bottom: 1px solid #FF5F8A!important;
    position: relative;
    /* right: 33%; */
    left: -406%;
    border-radius: 6px;
}

    .catemovil{
        background-color: #FAFAFA!important;   
        text-transform: uppercase!important;
        font-family: 'lato'!important;
        font-weight: bold!important;
        color: #FF5F8A!important;
        border-style: solid!important;
        border-width: 0px 0px 1px 0px!important;
        padding-left: 4%!important;
        border-bottom-color: #FF5F8A!important;

    }
    .catemovil:hover{
        background-color: #FF5F8A!important;   
        text-transform: uppercase!important;
        font-family: 'lato'!important;
        font-weight: bold!important;
        color: #FAFAFA!important;
        border-style: solid!important;
        border-width: 0px 0px 1px 0px!important;
        padding-left: 4%!important;
    }
    .subcatemovil{
        background-color: #FAFAFA!important;   
        text-transform: uppercase;
        font-family: 'lato'!important;
        font-weight: bold!important;
        color: #595959!important;
        border-style: solid!important;
        border-width: 0px 0px 1px 0px!important;
        padding-left: 8%!important;
    }

    .subcatemovil:hover{
        background-color: #FF5F8A!important;   
        font-weight: bold!important;
        color: #FAFAFA!important;
        text-transform: uppercase;
        font-family: 'lato';
        color: #FAFAFA;
        border-style: solid;
        border-width: 0px 0px 1px 0px;
        padding-left: 8%;
    }

    .productomovil{
        text-transform: uppercase;
        font-family: 'lato';
        font-weight: bold;
        border-style: solid!important;
        border-width: 0px 0px 1px 0px!important;
        padding-left: 0%!important;
    }

    .productomovil a{
        padding-left: 4%!important;
        padding-right: 0%!important;
        font-family: 'lato'!important;
        font-weight: bold!important;
        color: #595959!important;
    }

    .principalmovil{
    color: #595959!important;
    font-size: 16px!important;
    font-family: 'Asap';
    border-style: solid!important;
    border-width: 0px 0px 0px 0px!important;
    }

    .sidenav li>a>i, .sidenav li>a>[class^="mdi-"], .sidenav li>a li>a>[class*="mdi-"], .sidenav li>a>i.material-icons {
        float: left;
        height: 48px;
        line-height: 48px;
        width: 24px;
        margin-left: 10px;
        color: #FF5F8A!important;
    }
}


/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<  600 px <<<<<<*/
@media only screen and (max-width: 600px) {
#mobile_search:focus {
        width: 305%;
    background: none;
    left: -509%;
    border-radius: 6px;
}
header .principal img {
    margin-top: 0%;
    }
}

/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<  500 px <<<<<<*/
@media only screen and (max-width: 500px) {
#mobile_search:focus {
        width: 305%;
    background: none;
        left: -382%;
    border-radius: 6px;
}
header .principal img {
    margin-top: 0%;
    }
}

/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<  400 px <<<<<<*/
@media only screen and (max-width: 400px) { 
#mobile_search:focus {
    left: -387%!important;
    width: 424%;    
}
}
@media only screen and (max-width: 350px) {
#mobile_search:focus {
    left: -355%!important;
    width: 424%;    
}
header .principal img {
    margin-top: 0%;
    }
}
/* <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<  300 px <<<<<<*/
@media only screen and (max-width: 300px) {
#mobile_search:focus {
        width: 305%;
    background: none;
    left: -253%;
    border-radius: 6px;
}
header .principal img {
    margin-top: 0%;
    }
}

.logoside img {
        height: 85px!important;
    margin-top: 4%;
}
img.responsive-img, video.responsive-video {
    max-width: 100%;
    height: auto;
}

@media only screen and (max-width: 993px){
    header .principal{
        overflow: hidden;
    }

    .lupa{
        overflow: hidden;
    }
}