@font-face {
    font-family: 'Century Gothic';
    src: url('../font/gothic.eot');
    src: local('gothic'), url('../font/gothic.woff') format('woff'), url('../font/gothic.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
}

@font-face {
    font-family: 'Century Gothic';
    src: url('../font/gothicbold.ttf');
    src: local('gothic'), url('../font/gothicbold.woff') format('woff'), url('../font/gothicbold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
}

@font-face {
    font-family: 'iconsO';
    src: url('../font/iconsO.otf');
    src: local('iconsO'), url('../font/iconsO.woff') format('woff'), url('../font/iconsO.ttf') format('truetype');
}

body{
    -webkit-font-smoothing: subpixel-antialiased;
}

.intl-tel-input .flag-dropdown
{
    display: none;
}

.opromoFont.icon
{
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'iconsO';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


.opromo-canasta:before {
    content: "∑";
}

.opromo-buscar:before {
    content: "¬";
}

.opromo-arrow-left:before {
    content: "π";
}

.opromo-arrow-right:before {
    content: "∫";
}

.opromo-arrow-down:before {
    content: "ÿ";
}

.opromo-canasta-agregar:before {
    content: "∏";
}

.opromo-canasta-eliminar:before {
    content: "∏";
}

.ui.orange.buttons .button, .ui.orange.button {
    background-color: #EE7716;
}

.ui.orange.buttons .button:hover, .ui.orange.button:hover {
    background-color: #DC6E15;
}

.ui.blue.buttons .button, .ui.blue.button {
    background-color: #00BCDA;
}

.ui.blue.buttons .button:hover, .ui.blue.button:hover {
    background-color: #00A6C1;
}

.ui.blue.label, .ui.blue.labels .label {
    background-color: #00BCDA !important;
    border-color: #00A6C1 !important;
}

.ui.blue.segment.inverted
{
    background-color: #00BCDA !important;
}

.ui.info.message {
    background-color: #CCF8FF;
    box-shadow: none;
}

.mobile-only {
    display:none !important;
}

.ui.menu, body, .ui.header, .text, h1, h2, h3, h4
{
    font-family: "Century Gothic", "Helvetica Neue",Arial,Helvetica,sans-serif;
}

.ui.modal > .close
{
}

.ui.dimmer.modals
{
    overflow-y: auto;
}

.ui.dimmer.modals .scrolling.modal {
    position: relative !important;
    top: 0 !important;
    left: auto;
}

.bold
{
    font-weight: bold;
}
.text.orange {
    color: #EE7716;
}

.text.blue {
    color: #00BCDA;
}

.section
{
    padding: 30px 0;
}

.colorWhite
{
    color: #ffffff;
}

.textoAzul
{
    color: #00BCDA;
}

.tituloGeneral
{
    padding: 10px 40px;
}

.tituloGeneral.bgBlack
{
    background-color: #000000;
}


.hidden.menu {
    display: none;
}

.center.aligned
{
    text-align: center;
}

.right.aligned
{
    text-align: right;
}

.main.pusher
{
    padding-top: 153px;
}

.banner .letrero
{
    background-color:rgba(0,0,0,0.5);
    color: #fff;
    font-size: 1.2em;
    padding: 0.8em 5%;
    bottom: 0;
    position: absolute;
    width: 100%;
}

.banner .letrero .titulo
{
    font-size: 1.3em;
    margin-bottom: 5px;
}

.banner
{

}

.slideme {
    width: 100%;
    height: 100%;
}


#fixedmenu
{
    background-color: rgba(0,188,218,0.9);
    border-bottom: 2px solid #00BCDA;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(50, 50, 50, 0.8);
    -moz-box-shadow:    0px 3px 5px 0px rgba(50, 50, 50, 0.8);
    box-shadow:         0px 3px 5px 0px rgba(50, 50, 50, 0.8);
    position: fixed;
    z-index: 101;
    margin: 0em;
    width: 100%;
    top: 0px;
    left: 0px;
    right: auto;
    bottom: auto;
}

#fixedmenu .toc.item
{
    display: none;
}

#fixedmenu .item::before
{
    background: none;
    border: 0;
}

#logo
{
    margin: 0 auto;
}

#logomenu
{
    background-color: transparent;
    height: 110px;
    position: relative;
}

#logomenu #menuUsuario
{
    font-size: 0.8em;
    position: absolute;
    right: 0;
}

#barraMenu
{
    background-color: #000000;
    border: 0;
    border-bottom: 2px solid #000000;
    height: 41px;
    margin: 0;
}

#barraMenu .item
{
    color: #ffffff;
}

#barraMenu .item:hover:not(#canasta)
{
    color: #00BCDA;
}

#barraMenu .active.item
{
    border-color: #00BCDA;
    color: #ffffff;
}

#barraMenu #logoBarra
{
    bottom: -20px;
    margin: 0;
    padding: 0;
    position: absolute;
}

#buscador
{
    padding: 5px;
}

#btnProductos
{
    margin-left: 75px;
}

#menuProductos
{
    background-color: rgba(0,0,0,0.9);
    border-left: 3px solid #00BCDA;
    border-radius: 0;
    font-size: 1.05em;
    margin-top: 2px;
}

#menuProductos .ui.header {
    color: #EE7716;
    font-size: 1.05em;
}

#canasta
{
    background-color: #EE7716;
    padding: 9px 15px;
}

.listaProductos
{
    padding: 0 10px;
}

.listaProductos.ui.cards > .card
{
    cursor: pointer;
}

.listaProductos .card .extra.bgAzul
{
    background-color: #00BCDA;
}

.listaProductos .card .button.agregar
{
    background-color: #EE7716;
    padding: 0px 15px;
}

.listaProductos .card .button.agregar:hover
{
    background-color: #E86C08;
}

.ui.modal > .header.blue
{
    background-color: #00BCDA;
    color: #FFFFFF;
}

.ui.modal > .header.orange
{
    background-color: #E86C08;
    color: #FFFFFF;
}

.ui.modal > .actions
{
    background-color: #FFFFFF;
}

#windowDetalle > .actions
{
    background-color: #000000;
    padding: 1rem !important;
}

#windowDetalle #imagenes
{
    width: 50%;
}

#windowDetalle .description
{
    width: 60%;
}

#windowDetalle .ui.header,
#canastaProductos .column .ui.header
{
    margin: 0.7em 0;
    margin-bottom: 0.4em;
}

#windowDetalle hr,
#canastaProductos .column hr
{
    border: 1px solid #545454;
}

#windowDetalle .description p
{
    margin-bottom: 0;
}

.listaColores.ui.horizontal.list > .item
{
    margin-right: 0.5em;
    margin-left: 0;
}

.listaTecnicas.ui.list
{
    margin-bottom: 10px;
}

#galeriaProducto
{
    width: 100%;
    height: 400px;
}


#galeriaProducto img
{
}

#productosCategoria #categoriasHermanas .categoria
{
    color: #000000;
    font-size: 1.2em;
    padding: 0 5px;
}

#productosCategoria #categoriasHermanas .categoria:hover:not(.actual)
{
    border-bottom: 1px solid #E86C08;
}

#productosCategoria #categoriasHermanas .categoria.actual
{
    border-bottom: 1px solid #E86C08;
}

#canastaProductos .item .actions
{
    margin-top: 15px;
}

#canastaProductos .item .cantidad
{
}

#canastaProductos .item .cantidad input
{
    width: 100px;
}

#canastaProductos .item .ui.message
{
}

#canastaProductos .item .buttons
{
    margin-top: 8%;
    text-align: right;
}

#btnCrearCuenta
{
    margin-top: 15px;
}

#clientesLogin > .grid
{
    margin: 0 auto;
    max-width: 450px;
    width: 50%;
}

#footer {
    margin-top: 100px;
    padding: 2em 0em;
}

#footer .column
{
    box-shadow: none;
}

#footer a
{
    color: #FFFFFF;
}

#footer a:hover
{
    text-decoration: underline;
}

#buscarProductos #formFiltros .ui.grid .column
{
    width: 100%;
}

#buscarProductos #btnFiltrosCollapse
{
    cursor: pointer;
    font-size: 20px;
    margin: 0;
    opacity: 0.5;
    position: absolute;
    right: 0.8rem;
    transition: opacity 0.3s ease-out 0s;
}

#buscarProductos #btnFiltrosCollapse:hover
{
    opacity: 1;
}

#windowCotizar #mensajeExito,
#registro #mensajeExito,
#contacto #mensajeExito
{
    background-color: #FFFFFF;
    left: 0;
    padding: 20px;
    padding-top: 70px;
    position: absolute;
    display: none;
    font-size: 1.1em;
    height: 100%;
    text-align: center;
    top: 0;
    width: 100%;
}

#windowCotizar #mensajeExito img,
#contacto #mensajeExito img
{
    margin-bottom: 20px;
    margin-top: 20px;
}

#empresa .info
{
    margin-top: 20px;
    padding-right: 10%;
    font-size: 1.2em;
}

#empresa .bigFirst
{
    color: #00BCDA;
    font-size: 3.5em;
    font-weight: bold;
    float: left;
    height: 50px;
    margin-top: 0.1rem;
}

#registro .info,
#contacto .info
{
    font-size: 1.2em;
}

#registro #registroForm,
#contacto #contactoForm
{
    font-size: 1.1em;
    margin: 0 auto;
    max-width: 800px;
}


@media only screen and (max-width: 991px) {
    .main.pusher
    {

    }

    #empresa .info
    {
        font-size: 1em;
    }

    #empresa .info h2
    {
        font-size: 1.5em;
    }

    #empresa .bigFirst
    {
        font-size: 4em;
        margin-top: 0.5rem;
    }

    #fixedmenu .toc.item
    {
        display: block;
    }

    .listaProductos.ui.cards > .card
    {
        font-size: 0.9em;
    }

    .banner .letrero {
        font-size: 1em;
    }

    .banner .letrero .titulo {
        font-size: 1.2em;
    }

    #registro .info,
    #contacto .info
    {
        font-size: 1.1em;
    }

    #registro #registroForm,
    #contacto #contactoForm
    {
        font-size: 1em;
    }

    .mobile-only {
        display:block !important;
    }

    .desktop-only {
        display:none !important;
    }

    #clientesLogin > .grid
    {
        width: 70%;
    }
}

@media only screen and (max-width: 700px) {
    .main.pusher
    {
        padding-top: 89px;
    }

    #logo img
    {
        margin: 0 auto;
        width: 50%;
    }

    #logomenu
    {
        height: 50px;
    }

    #barraMenu
    {
        font-size: 0.9em;
        height: 37px;
    }

    #bannerPrincipal .pagination
    {
        bottom:40px;
    }

    #buscador
    {
        padding: 4px;
        width: 120px;
    }

    #canasta
    {
        padding: 8px 15px;
    }

    .listaProductos.ui.cards > .card
    {

    }

    .listaProductos.ui.cards > .card .header
    {
        font-size: 1em;
    }

    .banner .letrero
    {
        font-size: 0.8em;
    }

    .banner .letrero .titulo
    {
        font-size: 1em;
    }
    
    #windowDetalle .actions .input
    {
        display: flex;
    }

    #buscarProductos #formFiltros .ui.grid .column
    {
        width: 50%;
    }

    #windowDetalle #imagenes
    {
        width: 100%;
    }

    #clientesLogin > .grid
    {
        max-width: 100%;
        width: 100%;
    }
}