/*
FRONT EFOS
Version: 1.0.0
Author: Juan Pablo Grajeda

::  1.0 General Reset & Setup
-------------------------------------------
    1.1 Reset and overrides

::  2.0 Page Structure Settings
-------------------------------------------
    2.1 Page Options
    2.2 Page Loader
    2.3 Header & header elements
    2.4 Sidebar & sidebar elements
    2.4 Sidebar & sidebar elements
    2.5 Content & content elements
    2.6 Footer & footer elements

::  3.0 Component Setting
-------------------------------------------
    3.1 Component - Form Elements
    3.2 Component - Dropdown Menu
    3.3 Component - Tooltip
    3.4 Component - Alert
    3.5 Component - Note Setting
    3.6 Component - Badge & Label Setting
    3.7 Component - Pagination & pager
    3.8 Component - Progress bar
    3.9 Component - Nav Setting
    3.10 Component - Nav Tabs
    3.11 Component - Nav Pills
    3.12 Component - Tab Content
    3.13 Component - Accordion Panel
    3.14 Component - Button
        3.14.1 Component - Button - Default
        3.14.2 Component - Button - White
        3.14.3 Component - Button - Inverse
        3.14.4 Component - Button - Primary
        3.14.5 Component - Button - Success
        3.14.6 Component - Button - Warning
        3.14.7 Component - Button - Danger
        3.14.8 Component - Button - Info
        3.14.8 Component - Button - Total
        3.14.8 Component - Button - Presunto
        3.14.8 Component - Button - Definitivo
        3.14.8 Component - Button - Desvirtuado
        3.14.8 Component - Button - Sentencia Favorable
    3.15 Component - Panel
    3.16.Component - Panel - Panel Expand
    3.17 Component - Panel - Panel loading
    3.18 Component - Modal Setting
    3.19 Component - Media Object
    3.20 Component - Table
    3.21 Component - Well
    3.22 Component - Jumbotron
    3.23 Component - List Group
    3.24 Component - Carousel

*/



/*
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {

/* 3.14 Component - Button */

    .btn-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
        cursor: pointer;
    }

    .btn-efos {
        max-width: 13.5vmax;
        width: 13.5vw;
    }

/*  3.9 Component - Nav Setting */
    .text-button-option {
        border-right: 2px solid #2a71c2;

        width: auto;
        float: left;
        color: #fff;

        position: relative;
        height: 70px;
        line-height: 60px;

        font-family: "Open Sans", sans-serif;

        display: inline-block;

        text-transform: uppercase;

        text-decoration: none;

        background-color: transparent;

        outline: 0;

        transition: all ease-in .2s;
    }

    .text-button-option:hover ,.text-button-option:focus{
        background-color: #234b7d;
        color: white;

    }

    .text-button-option span{
        width: auto;
        height: 60px;
        line-height: 60px;
        float: left;
        margin: 0 8px;

        box-sizing: content-box;
    }

    .text-button-option-obtener {
        width: auto;
        float: left;
        color: #fff;

        position: relative;
        height: 70px;
        line-height: 60px;

        font-family: "Open Sans", sans-serif;

        display: inline-block;

        text-transform: uppercase;

        text-decoration: none;

        background-color: #ed7d31;

        outline: 0;

        transition: all ease-in .2s;

    }

    .text-button-option-obtener span{
        width: auto;
        height: 60px;
        line-height: 60px;
        float: left;
        margin: 0 8px;

        box-sizing: content-box;
    }

    .text-button-option-obtener:hover {
        background-color: #ed7d31;
        color: white;

    }

}

/*
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {

/*  3.9 Component - Nav Setting */
    .text-button-option {
        border-right: 2px solid #2a71c2;

        width: auto;
        float: left;
        color: #fff;

        position: relative;
        height: 70px;
        line-height: 70px;

        /*font-family: "Open Sans", sans-serif;*/

        display: inline-block;

        text-transform: uppercase;

        text-decoration: none;

        background-color: transparent;

        outline: 0;

        transition: all ease-in .2s;

        font-size: 12px;

    }

    .text-button-option:hover ,.text-button-option:focus{
        background-color: #234b7d;
        color: white;

    }

    .text-button-option span{
        width: auto;
        height: 60px;
        line-height: 60px;
        float: left;
        margin: 0 8px;

        box-sizing: content-box;
    }

    .text-button-option-obtener {
        width: auto;
        float: left;
        color: #fff;

        position: relative;
        height: 70px;
        line-height: 70px;

        font-family: "Open Sans", sans-serif;

        display: inline-block;

        text-transform: uppercase;

        text-decoration: none;

        background-color: #ed7d31;

        outline: 0;

        transition: all ease-in .2s;

        font-size: 12px;

    }

    .text-button-option-obtener span{
        width: auto;
        height: 60px;
        line-height: 60px;
        float: left;
        margin: 0 8px;

        box-sizing: content-box;
    }

    .text-button-option-obtener:hover {
        background-color: #ed7d31;
        color: white;

    }


}

/*
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

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

/* 3.14 Component - Button */

    .btn-content {
        justify-content: space-between;
    }

    .btn-efos {
        max-width: 17.5vmax;
        width: 17.5vw;
    }

    .btn-efos > * { margin: 0 5px; }

    .btn-thing{
        font-size: 13px;
        max-width: 26.5vw;
        width: 26.5vw;
    }

    .btn-prov{
        width: calc(100% / 6);
    }

/*  3.9 Component - Nav Setting */
    .text-button-option {
        border-right: 2px solid #2a71c2;

        width: auto;
        float: left;
        color: #fff;

        position: relative;
        height: 55px;
        line-height: 60px;

        font-family: "Open Sans", sans-serif;

        display: inline-block;

        text-transform: uppercase;

        text-decoration: none;

        background-color: transparent;

        outline: 0;

        transition: all ease-in .2s;

        font-size: 10px;

        margin-top: -5px;
    }

    .text-button-option:hover ,.text-button-option:focus{
        background-color: #234b7d;
        color: white;

    }

    .text-button-option span{
        width: auto;
        height: 60px;
        line-height: 60px;
        float: left;
        margin: 0 8px;

        box-sizing: content-box;
    }

    .text-button-option-obtener {
        width: auto;
        float: left;
        color: #fff;

        position: relative;
        height: 55px;
        line-height: 60px;

        font-family: "Open Sans", sans-serif;

        display: inline-block;

        text-transform: uppercase;

        text-decoration: none;

        background-color: #ed7d31;

        outline: 0;

        transition: all ease-in .2s;

        font-size: 10px;

        margin-top: -5px;
    }

    .text-button-option-obtener span{
        width: auto;
        height: 60px;
        line-height: 60px;
        float: left;
        margin: 0 8px;

        box-sizing: content-box;
    }

    .text-button-option-obtener:hover {
        background-color: #ed7d31;
        color: white;

    }

}

/*
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/

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

/* 3.14 Component - Button */

    .btn-content {
        justify-content: space-between;
    }

    .btn-efos {
        max-width: 17.5vmax;
        width: 17.5vw;
    }
    .btn-prov{
        width: calc(100% / 6);
    }
/* 3.14 Component - Button */            /* me quede en que iba a acomodar el tamaño del btnbusqueda para la medida 768-1024*/
/*    .btnBusqueda {*/
/*        width: 45% !important;*/
/*        font-size: 12px !important;*/
/*        margin-top: 2px !important;*/
/*    }*/
/* 2.5 Content & content elements */
/*    div.top-bar {*/
/*        width: 100% !important;*/
/*    }*/
    div.logo {
        width: 108px !important;
    }
    a.faqLittle {
        width: 45px !important;
        height: 50px !important;
        font-size: 12px !important;
        margin-left: 65px !important;
        margin-right: -5px !important;
        margin-top: -2px !important;
    }
    a.messages {
        width: 45px !important;
        height: 50px !important;
        background-size: 22px 17px!important;
        margin-right: -5px !important;
    }
    a.alerts {
        width: 45px !important;
        height: 50px !important;
        background-size: 22px 19px!important;
        margin-right: -5px !important;
    }
    a.user {
        height: 50px !important;
        margin-left: 5px !important;
    }
    #navImageCuenta {
        width: 30px !important;
        height: 30px !important;
    }
    #navNameCuenta {
        display: none !important;
    }
    a.icono-tipo-cuenta {
        width: 45px !important;
        height: 50px !important;
        background-size: 22px 17px!important;
        margin-right: -5px !important;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    a.icono-tipo-cuenta span.image {
        background-size: 30px 30px !important;
        margin-top: 6px !important;
    }
    a.options {
        width: 45px !important;
        height: 50px !important;
        background-size: 22px 17px!important;
        margin-right: -5px !important;
    }
    a.options span.image {
        background-size: 22px 22px !important;
        margin-top: 6px !important;
    }
}
/*
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/

@media (min-width: 481px) and (max-width: 767px) {

/* 3.14 Component - Button */
    .btn-content {
        justify-content: space-between;
    }

    .btn-efos {
        max-width: 25.5vmax;
        width: 25.5vw;
    }

    .btn-thing{
        max-width: 40.5vw;
        width: 40.5vw;
        text-align: center;
    }
    .btn-prov{
        width: calc(100% / 6);
    }
/* 3.14 Component - Button */
/*    .btnBusqueda {*/
/*        width: 48%;*/
/*        font-size: 12px;*/
/*        margin-top: 2px;*/
/*    }*/
/* 2.5 Content & content elements */
    div.logo {
        width: 87px !important;
    }
    a.faqLittle {
        width: 42px !important;
        height: 50px !important;
        font-size: 10px !important;
        margin-left: 65px !important;
        margin-right: -5px !important;
        margin-top: -2px !important;
    }
    a.messages {
        width: 42px !important;
        height: 50px !important;
        background-size: 20px 15px!important;
        margin-right: -5px !important;
    }
    a.alerts {
        width: 42px !important;
        height: 50px !important;
        background-size: 20px 17px!important;
        margin-right: -5px !important;
    }
    a.user {
        display: none !important;
    }
    a.icono-tipo-cuenta {
        width: 42px !important;
        height: 50px !important;
        background-size: 20px 15px!important;
        margin-right: -5px !important;
        padding-left: 0px !important;
    }
    a.icono-tipo-cuenta span.image {
        background-size: 30px 30px !important;
        margin-top: 6px !important;
        margin-left: 4px !important;
    }
    a.options {
        width: 42px !important;
        height: 50px !important;
        background-size: 20px 15px!important;
        margin-right: -5px !important;
    }
    a.options span.image {
        background-size: 20px 20px !important;
        margin-top: 6px !important;
    }
    #btnBusqueda {
        color: #053b71 !important;
        background: #fff !important;
        border-color: #053b71 !important;
        font-size: 14px !important;
        margin-top: 0px !important;
    }

    .contentTitle h1 {
        font-size: 15px !important;
    }
    .contentTitle .total{
        font-size: 15px !important;
        float: none !important;
    }
    .contentTitle2 .total{
        float: none !important;
    }
    .contentTitle .btn-content-h1{
        font-size: 15px !important;
        float: none !important;
    }

/*  3.9 Component - Nav Setting */
    .text-button-option {
        border-right: 2px solid #2a71c2;

        width: auto;
        float: left;
        color: #fff;

        position: relative;
        height: 55px;
        line-height: 60px;

        font-family: "Open Sans", sans-serif;

        display: inline-block;

        text-transform: uppercase;

        text-decoration: none;

        background-color: transparent;

        outline: 0;

        transition: all ease-in .2s;

        font-size: 9px;

        margin-top: -5px;
    }

    .text-button-option:hover ,.text-button-option:focus{
        background-color: #234b7d;
        color: white;

    }

    .text-button-option span{
        width: auto;
        height: 60px;
        line-height: 60px;
        float: left;
        margin: 0 8px;

        box-sizing: content-box;
    }

    .text-button-option-obtener {
        width: auto;
        float: left;
        color: #fff;

        position: relative;
        height: 55px;
        line-height: 60px;

        font-family: "Open Sans", sans-serif;

        display: inline-block;

        text-transform: uppercase;

        text-decoration: none;

        background-color: #ed7d31;

        outline: 0;

        transition: all ease-in .2s;

        font-size: 9px;

        margin-top: -5px;
    }

    .text-button-option-obtener span{
        width: auto;
        height: 60px;
        line-height: 60px;
        float: left;
        margin: 0 8px;

        box-sizing: content-box;
    }

    .text-button-option-obtener:hover {
        background-color: #ed7d31;
        color: white;

    }
}

/*
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/

@media (min-width: 320px) and (max-width: 480px) {

    /* 3.14 Component - Button */
    .btn-content {
        justify-content: space-between;
    }

    .btn-efos {
        max-width: 28.5vmax;
        width: 28.5vw;
    }

    .btn-thing{
        padding: 8px;
        max-width: 100%;
        width: 100%;
        display: block;
        text-align: center;
    }
    .btn-prov{
        width: calc(100% / 6);
    }
/* 2.5 Content & content elements */
    div.logo {
        width: 80px !important;
    }
    a.faqLittle {
        width: 40px !important;
        height: 50px !important;
        font-size: 10px !important;
        margin-left: 65px !important;
        margin-right: -5px !important;
        margin-top: -2px !important;
    }
    a.messages {
        width: 40px !important;
        height: 50px !important;
        background-size: 20px 15px!important;
        margin-right: -5px !important;
    }
    a.alerts {
        width: 40px !important;
        height: 50px !important;
        background-size: 20px 17px!important;
        margin-right: -5px !important;
    }
    a.user {
        display: none !important;
    }
    a.icono-tipo-cuenta {
        width: 40px !important;
        height: 50px !important;
        background-size: 20px 15px!important;
        margin-right: -5px!important;
        padding-left: 0px !important;
    }
    a.icono-tipo-cuenta span.image {
        background-size: 30px 30px !important;
        margin-top: 6px !important;
    }
    a.options {
        width: 40px !important;
        height: 50px !important;
        background-size: 20px 15px!important;
        margin-right: -5px !important;
    }
    a.options span.image {
        background-size: 20px 20px !important;
        margin-top: 6px !important;
    }
    #btnBusqueda {
        color: #053b71 !important;
        background: #fff !important;
        border-color: #053b71 !important;
    }
    .contentTitle h1 {
        font-size: 15px !important;
        line-height: 1.5;
    }
    .contentTitle .total{
        font-size: 15px !important;
        float: none !important;
    }
    .contentTitle2 .total{
        float: none !important;
    }
    .contentTitle .btn-content-h1{
        font-size: 15px !important;
        float: none !important;
    }

/*  3.9 Component - Nav Setting */
    .text-button-option {
        border-right: 2px solid #2a71c2;

        width: auto;
        float: left;
        color: #fff;

        position: relative;
        height: 55px;
        line-height: 60px;

        font-family: "Open Sans", sans-serif;

        display: inline-block;

        text-transform: uppercase;

        text-decoration: none;

        background-color: transparent;

        outline: 0;

        transition: all ease-in .2s;

        font-size: 7px;

        margin-top: -5px;
    }

    .text-button-option:hover ,.text-button-option:focus{
        background-color: #234b7d;
        color: white;

    }

    .text-button-option span{
        width: auto;
        height: 60px;
        line-height: 60px;
        float: left;
        margin: 0 8px;

        box-sizing: content-box;
    }

    .text-button-option-obtener {
        width: auto;
        float: left;
        color: #fff;

        position: relative;
        height: 55px;
        line-height: 60px;

        font-family: "Open Sans", sans-serif;

        display: inline-block;

        text-transform: uppercase;

        text-decoration: none;

        background-color: #ed7d31;

        outline: 0;

        transition: all ease-in .2s;

        font-size: 7px;

        margin-top: -5px;
    }

    .text-button-option-obtener span{
        width: auto;
        height: 60px;
        line-height: 60px;
        float: left;
        margin: 0 8px;

        box-sizing: content-box;
    }

    .text-button-option-obtener:hover {
        background-color: #ed7d31;
        color: white;

    }

}