:root{
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --white: #FFFFFF;
    --black: #000000;
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
}
/* colores para los background */
.bg-primary{background-color: var(--primary);}
.bg-secondary{background-color: var(--secondary);}
.bg-success{background-color: var(--success);}
.bg-info{background-color: var(--info);}
.bg-warning{background-color: var(--warning);}
.bg-danger{background-color: var(--danger);}
.bg-light{background-color: var(--light);}
.bg-dark{background-color: var(--dark);}
.bg-whte{background-color: var(--white);}
.bg-black{background-color: var(--black);}
.bg-blue{background-color: var(--blue);}
.bg-ndgo{background-color: var(--indigo);}
.bg-purple{background-color: var(--purple);}
.bg-pink{background-color: var(--pink);}
.bg-red{background-color: var(--red);}
.bg-orange{background-color: var(--orange);}
.bg-yellow{background-color: var(--yellow);}
.bg-green{background-color: var(--green);}
.bg-teal{background-color: var(--teal);}
.bg-cyan{background-color: var(--cyan);}
/* terminan estlos de los bacgrounds */

/* estlos de los textos */
.text-prmary{color: var(--primary);}
.text-secondary{color: var(--secondary);}
.text-success{color: var(--success);}
.text-info{color: var(--info);}
.text-warning{color: var(--warning);}
.text-danger{color: var(--danger);}
.text-light{color: var(--light);}
.text-dark{color: var(--dark);}
.text-whte{color: var(--white);}
.text-black{color: var(--black);}
.text-blue{color: var(--blue);}
.text-ndgo{color: var(--indigo);}
.text-purple{color: var(--purple);}
.text-pink{color: var(--pink);}
.text-red{color: var(--red);}
.text-orange{color: var(--orange);}
.text-yellow{color: var(--yellow);}
.text-green{color: var(--green);}
.text-teal{color: var(--teal);}
.text-cyan{color: var(--cyan);}
/* terminan estilos de los textos */

/* Alineacion de los textos */
.text-center{text-align: center; margin: 0 auto;}
/* Termina Alineacion de los textos */

/* estlos para la justifcacion */
.justify-between{justify-content: space-between;}
.justify-around{justify-content: space-around;}
.justify-center{justify-content: center;}
.justify-left{justify-content: left;}
.justify-right{justify-content: right;}
/* termnan estilos de justificacion */



/* estlos para los encabezados fuente base 10px */
h1, .h1{font-size: 4rem;}
h2, .h2{font-size: 3.2rem;}
h3, .h3{font-size: 2.8rem;}
h4, .h4{font-size: 2.4rem;}
h5, .h5{font-size: 2rem;}
h6, .h6{font-size: 1.6rem;}
/* terminan estlos de los header */

/* Estilos de listas */
ul{
    width: 90%;
}
li{
    list-style: none;
    font-size: 1.2rem;
    color: var(--light);
    padding: 5px 0;
}
/* Terminan estilos de listas */
/* estlos de flas */
.row{
    /* --gutter-x: 1.5rem;
    --gutter-y: 0; */
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--gutter-y));
    margin-right: calc(-0.5 * var(--gutter-x));
    margin-left: calc(-0.5 * var(--gutter-x));
    /* height: 100%; */
    /* margin: auto; */
}
.container{
    max-width: 100%;
}
/* terminan estilos de filas */

/* estilos para los display */
.d-flex{display: flex;}
/* terminan estilos de los displays */
/* estilos de columnas */
/* .col-auto{
    
} */
.col-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
}
  
.col-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
}
  
.col-3 {
    flex: 0 0 auto;
    width: 25%;
}
  
.col-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
}
  
.col-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
}
  
.col-6 {
    flex: 0 0 auto;
    width: 50%;
}
  
.col-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
}
  
.col-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
}
  
.col-9 {
    flex: 0 0 auto;
    width: 75%;
}
  
.col-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
}
  
.col-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
}
  
.col-12 {
    flex: 0 0 auto;
    width: 100%;
}  
/* terminan estilos de columnas */

.disabled{
    pointer-events: none;
    cursor: default;
    color: #6c757d;
}
/* estilos del body */
body{
    font-size: 62.5%; /* fuente base 10px */
}
/* terminan estilos del body */
/* estilos del header */
header{
    width: 100%;
    height: auto;
    width: 100%;
    min-height: 550px;
    background-image: url("../images/bg-mascotas.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
header::after{
    content: '';
    display: block;
    width: 100%;
    min-height: 550px;
    position: relative;
    top: 0;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
}
header .bg-title{
    position: absolute;
    top: 0;
    z-index: 2;
}
@media (max-width: 767.98px){
    .header{display: block;}
}
header .menu-bar{
    display: flex;
    height: 80px;
    position: relative;
}
header .logo{
    width: 20%;
    height: 80px;
    padding: 5px 10px;
}
header .logo img{
    max-height: 100%;
    vertical-align: top;
}
header .navbar{
    width: 75%;
    height: auto;
}
header .navbar ul{
    width: 100%;
    height: auto;
}
header .navbar ul li{
    height: auto;
    display: inline-block;
    padding: 10px;
}
header .navbar ul li a{
    width: 100%;
    height: auto;
    font-size: .8rem;
    padding: 0 10px;
}
.navbar .bars{
    display: block;
    color: var(--orange);
    font-size: 3rem;
    text-align: right;
    /* width: 30px; */
    margin-right: 15px;
}
@media(min-width: 768px){
    .navbar .bars{
        display: none;
    }
}
.navbar .bars:hover{
    cursor: pointer;
}
.navbar ul{
    display: inline-block;
    list-style: none;
}
.navbar ul li{
    display: inline-block;
    padding: 5px 7px;
    transition: all .2s linear;
}
.navbar ul li:last-child{
    margin-right: 35px;
}
.navbar ul li a{
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.2s linear;
    color: var(--orange);
}
.navbar ul li:hover{
    margin-top: 1px;
}
.navbar ul li a:hover{
    color: var(--dark);
    background-color:  var(--orange);
    padding: 5px 10px;
    margin-top: 1px;
}
@media (max-width: 767.98px){
    .navbar{
        display: block;
    }
    .navbar .logo{
        width: 100%;
        margin: auto;
        text-align: center;
    }
    .navbar #nav{
        width: 100%;
        display: block;
        padding: 10px;
        transition: all .5s linear;
    }
    .show{
        display: none;
        visibility: hidden;
        margin: 0;
        padding: 0;
        height: 0;
        opacity: 0;
    }
    .navbar #nav li{
        width: 100%;
        display: block;
    }
    .navbar ul li:hover{
        background-color: var(--dark);
    }
    .navbar ul li a{
        font-size: 2rem;
    }
    .navbar ul li a:hover{
        color: var(--light);
    }
}

/* termina estilos del header */
header .bg-title .title{
    width: 100%;
    min-height: 450px;
    height: 100%;
    /* margin: 0 auto; */
    /* position: relative;
    top: 0;
    left: 0;
    right: 0; */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* background-color: #dc3545; */
    /* background-color: rgba(253, 126, 20, 0.5); */
}
header .title h1, header .title h2{
    width: 100%;
    margin: auto;
    text-align: center;
    display: inline-block;
    color: var(--light);
}
/* estilos para el main */
.main{
    width: 100%;
    margin: auto;
    /* margin-top: 85px; */
    overflow: hidden;
    background-color: #e3e3e3;
}
@media(max-width: 575.98px){
    .main{margin-top: 160px;}
}
.main .bazar-info{
    display: inline-block;
    width: 100%;
    min-height: 250px;
    height: auto;
    color: var(--light);
    background-color: var(--black);
}
.main .bazar-info .bazar, .main .bazar-info .exponentes{
    display: inline-block;
    width: 100%;
    min-height: 300px;
    height: auto;
    padding-bottom: 60px;
    /* margin: 30px auto; */
    /* background-color: var(--blue); */
    /* margin-top: 60px; */
}
.main .bazar-info .bazar{
    background-color: var(--blue);
}
.main .bazar-info .exponentes{
    background-color: var(--orange);
}
.bazar-info .article-title{
    width: 100%;
    /* padding: 10px; */
    margin: 60px auto;
}
.bazar-info .article-title h2{
    width: 60%;
    margin: auto;
    text-align: center;
    /* margin-top: 60px; */
}
.bazar-info .article-body p{
    width: 98%;
    font-size: 1.8rem;
    text-align: justify;
    margin: 10px auto;
    padding: 5px 0;
}
.main .bazar-info .exponentes .row{
    width: 90%;
    margin: 0 auto;
}
.main .bazar-info .exponentes .card{
    display: inline-block;
    width: 25%;
    height: auto;
    background-color: var(--blue);
    /* color: var(--black); */
    border-radius: 25px;
    padding: 10px;
    padding-bottom: 30px;
}
.main .bazar-info .exponentes .card .card-title{
    width: 100%;
}
.main .bazar-info .exponentes .card .card-title h3{
    margin: auto;
    text-align: center;
    margin-bottom: 20px;
}
.main .bazar-info .exponentes .card .img{
    width: 100%;
    height: 350px;
    overflow: hidden;
    display: flex;
    margin: auto;
    /* background-color: var(--danger); */
}
.main .bazar-info .exponentes .card .img img{
    max-width: 90%;
    height: auto;
    margin: 0 auto;
    /* padding: 5px; */
    /* text-align: center; */
     vertical-align: top;
}
.main .bazar-info .exponentes .card .card-footer .tema-title{
    width: 100%;
    /* margin-top: 30px; */
    /* padding: 10px; */
}
.main .bazar-info .exponentes .card .card-footer .tema-info p{
    width: 90%;
    font-size: 1.8rem;
    text-align: justify;
    margin: auto;
    padding: 5px;
}