body {
    font-family: 'Montserrat', sans-serif;
}

/* MENÚ */

.navbar{
    display: block;
}
.navbar-brand{
    max-width: 50%;
}
#logo-bc{
    max-height: 70px;
    max-width: 100%;
}
.barra-menu{
    background-color: #6A1B31;
    background: linear-gradient(180deg, #64192E 0%, #680C26 17.71%, #720D29 83.33%, #671B31 100%);

}
main{
    margin-top: 140px;
}
.barra-menu .navbar-nav .nav-link.active, .barra-menu .navbar-nav .show>.nav-link, .barra-menu .nav-link {
    color: #FFFFFF;
    background-image: linear-gradient(
        to right,
        #D9C2A0,
        #D9C2A0 50%,
        #FFFFFF 50%
    );
    background-size: 200% 100%;
    background-position: -100%;
    display: inline-block;
    padding: 5px 0;
    position: relative;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease-in-out;
    font-weight: 700;
}
.barra-menu .nav-link:focus, .barra-menu .nav-link:hover, .barra-menu .nav-link.active:focus, .barra-menu .nav-link.active:hover{
    color: #FFFFFF;
    background-position: 0;
}

.barra-menu .nav-link:before{
  content: '';
  background: #D9C2A0; /*#BC955A*/
  display: block;
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 3px;
  transition: all 0.3s ease-in-out;
}
.barra-menu .nav-link:hover::before{
  width: 100%;
}

.barra-menu .navbar-collapse .navbar-nav{
    margin-left: auto;
    margin-right: auto;
}
.barra-menu .navbar-collapse .navbar-nav .nav-item{
    padding: 0px 25px;
}

/* BARRA BLANCA ARRIBA */

.barra-blanca{
    height: 44px;
    background-color: #FFFFFF;
}
#topNav{
    float: right;
    padding: 10px 20px;
}
.guinda{
    color: #6A1B31;
}
.ocre{
    color: #BC955A;
}
#topNav a{
    margin: 0px 6px;
}

/* MENÚ RESPONSIVO */

.navbar-toggler{
    border: 1px solid white;
}
.navbar-toggler:focus{
    box-shadow: unset;
}
.navbar-toggler-icon{
    color: #FFFFFF;
    background-image: url(../img/icono-menu.png);
}
.nav-item a{
    width: 100%;
}
.barra-blanca{
    transition: font-size .4s, height .4s;
}
.barra-blanca a{
    transition: margin .4s;
}
#topNav{
    width: 200px;
    text-align: center;
}

html:not([data-scroll='0']) .barra-blanca{
    //display: none;
    font-size: 0px;
    height: 0px;
}
html:not([data-scroll='0']) .barra-blanca #topNav{
    height: 0px;
    padding: 0px;
}
html:not([data-scroll='0']) .barra-blanca #topNav a{
    margin: 0px 14px;
}

#logo-bc{
    transition: max-height 1s, margin-right 1s;
}
html:not([data-scroll='0']) #logo-bc{
    max-height: 50px;
    margin-right: 46px;
}
main{
    margin-top: 130px;
    transition: margin-top .4s;
}
html:not([data-scroll='0']) main{
    margin-top: 76px;
}


/* estilo de números de atención */
#mainNav .dropdown {

    width: 100% !important;
  
}

/*Seccion del Banner*/
@media only screen and (max-width: 2000px) {
    .banner-trabajo{
        background-image:url(https://bajacalifornia.gob.mx/Recursos/generaTrabajo.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-size: 100% 100%;
        height:520px;
    }

    /*.logo_trabajo {
        position:fixed;
        width:400px;
        margin-left:45%;
        margin-top:3%
    }*/

    .text-atencion{
        /*text-align:center;*/
         /*position: fixed;*/
        color: white;
        margin-left: 15%;
        font-size: 18px;
        font-weight: 600;
        margin-top: 19%;
    }

}

@media only screen and (max-width: 1700px) {
.banner-trabajo{
    background-image:url(https://bajacalifornia.gob.mx/Recursos/generaTrabajo.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: 100% 100%;
    height:400px;
}

/*.logo_trabajo {
    position: fixed;
    width: 400px;
    margin-left: 40%;
    margin-top: 3%;
}*/

    .text-atencion{
        /*text-align:center;*/
         /*position: fixed;*/
        color: white;
        margin-left: 15%;
        font-size: 18px;
        font-weight: 600;
        margin-top: 16%;
    }

}


@media only screen and (max-width: 1400px) {
    .banner-trabajo{
        background-image:url(https://bajacalifornia.gob.mx/Recursos/generaTrabajo.png);
        background-repeat: no-repeat;
         background-size: cover;
        background-size: 100% 100%;
        height:400px;
    }

    /*.logo_trabajo {
        position: fixed;
        width: 400px;
        margin-left: 40%;
        margin-top: 3%;
    }*/

    .text-atencion{
        /*text-align:center;*/
         /*position: fixed;*/
        color: white;
        margin-left: 15%;
        font-size: 18px;
        font-weight:600;
        margin-top: 19%;
    }


}

@media only screen and (max-width: 1200px) {
    .banner-trabajo {
        background-image: url(https://bajacalifornia.gob.mx/Recursos/generaTrabajo.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-size: 100% 100%;
        height: 400px;
    }

   /*.logo_trabajo {
        position: fixed;
        height: 150px;
        margin-left: 40%;
        margin-top: 5%;
    }*/

    .text-atencion {
        /*text-align:center;*/
        /*position: fixed;*/
        color: white;
        margin-left: 15%;
        font-size: 18px;
        font-weight: 600;
        margin-top: 21%;
    }
}

.info-sh div div {
     border: 1px solid #e0e0e0; 
     border-radius:40px; 
     padding:25px 25px 25px 25px;
     box-shadow:  -2px 4px 12px 1px rgb(0 0 0 / 25%);
     width: 95% !important;  
}


.info-sh div div:hover {
    border: 0.1px solid #e0e0e0;
    background-color:#f2f2f2;
    
}
  

  .pt-200{
    padding-top: 200px;
}

  /*Seccion de ¿Que hacemos?*/

.trabajo-hacemos h2 {
    font-size:25px !important;
}

.trabajo-hacemos h3 {
   color: #6A1B31 !important;
    font-size:25px !important;
}

.red_line_min {
    border: 2px solid #BD945C;
    margin: 0 0 12px;
    background-color: #BD945C;
    width: 40px;
}

.ml-auto, .mx-auto {
    margin-left: auto!important;
}
.mr-auto, .mx-auto {
    margin-right: auto!important;
}

.logos_home_servicios_mini {
    width: 120px!important;
    padding-bottom: 10px;
}

.emphasis-blueGreen {
    background-color:#03797f;

}


/*Seccion de atencion*/
.work-process {
    text-align: center;
    position: relative;
}

.process-img {
    /*width: 200px;*/
    margin: 15px auto 0;
    position: relative;
    display: inline-block;
}

.process-img img {
    z-index: 1;
}

.img-responsive, .thumbnail>img, .thumbnail a>img {
    display: block;
    max-width: 100%;
    height: auto;
}
.titulo-ruta {
color:#bd945e;
font-size:2rem;
font-weight:700;
}

span.process-num {
    position: absolute;
    font-size: 60px;
    font-weight: 600;
    opacity: .1;
    left: -40px;
    top: -10px;
}

/*Modulo de Atencion*/
/*Pantalla Grande*/

.box {
  background-color: #6A1B31 !important;
  margin-top: 10px;
  padding: 1% 20px; /* Added a percentage value for top/bottom padding to keep the wrapper inside of the parent */
  
  -webkit-transform: skewY(1deg);
  -moz-transform: skewY(1deg);
  -ms-transform: skewY(1deg);
  -o-transform: skewY(1deg);
  transform: skewY(1deg);
 
}

.atencion{
        /*border-top: 10px solid #6A1B31;*/
       background-image:url(../../Content/img/oficina.jpg);
      height: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
    
}



.atencion-title {
  /*text-align: center;*/
  position: absolute;
  top: 12%;
  left: 25%;
  transform: translate(-50%, -50%); 
 
}

.atencion-title p {
  font-size:2.5rem !important;
 
}

.atencion-title h1{
  font-size:3.5rem !important;
 
}




.atencion-text {
  text-align: center;
  position: absolute;
  top: 52%;
  left: 30%;
  transform: translate(-50%, -50%);
  color: white;
}





.atencion-footer {
  /*text-align: center;*/
  position: absolute;
  top: 85%;
  left: 27%;
  transform: translate(-50%, -50%); 
}

.atencion-footer h2 {
 font-size:2.5rem;
}


.atencion-lineSection {
    border-bottom: 6px solid #bd945e;
    width: 320px;
}


/*Pantalla celular*/
.box-xs {
  background-color: #6A1B31 !important;
  margin-top: 10px;
  padding: 2% 20px; /* Added a percentage value for top/bottom padding to keep the wrapper inside of the parent */
  
  -webkit-transform: skewY(1deg);
  -moz-transform: skewY(1deg);
  -ms-transform: skewY(1deg);
  -o-transform: skewY(1deg);
  transform: skewY(1deg);
 
}

.atencion-xs{
        /*border-top: 10px solid #6A1B31;*/
      background-image:url(../Content/img/oficina.jpg);
      height: 100%;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
    
}


.atencion-text-xs {
  text-align: center;
  position: absolute;
  top: 55%;
  left: 60%;
  transform: translate(-60%, -50%);
  color: white;
}

.atencion-title-xs {
  /*text-align: center;*/
  position: absolute;
  top: 10%;
  left: 55%;
  transform: translate(-50%, -50%); 
}

.atencion-footer-xs {
  /*text-align: center;*/
  position: absolute;
  top:91%;
  left: 60%;
  transform: translate(-50%, -50%); 
}
.atencion-lineSection-xs {
    border-bottom: 10px solid #bd945e;
    width: 220px;
}

/*End seccion de atencion*/

.btn-group-vertical>.btn-group:after, .btn-group-vertical>.btn-group:before, .btn-toolbar:after, .btn-toolbar:before, .clearfix:after, .clearfix:before, .container-fluid:after, .container-fluid:before, .container:after, .container:before, .dl-horizontal dd:after, .dl-horizontal dd:before, .form-horizontal .form-group:after, .form-horizontal .form-group:before, .modal-footer:after, .modal-footer:before, .modal-header:after, .modal-header:before, .nav:after, .nav:before, .navbar-collapse:after, .navbar-collapse:before, .navbar-header:after, .navbar-header:before, .navbar:after, .navbar:before, .pager:after, .pager:before, .panel-body:after, .panel-body:before, .row:after, .row:before {
    display: table;
    content: " ";
}

.btn-group-vertical>.btn-group:after, .btn-toolbar:after, .clearfix:after, .container-fluid:after, .container:after, .dl-horizontal dd:after, .form-horizontal .form-group:after, .modal-footer:after, .modal-header:after, .nav:after, .navbar-collapse:after, .navbar-header:after, .navbar:after, .pager:after, .panel-body:after, .row:after {
    clear: both;
}
.btn-ts {
    background-color: #6a1c32 !important;
    border-radius: 20px !important;
    color: white !important;
    font-weight: 800 !important;
    min-width: 150px!important;
    min-height: 42px!important;
}
.btn-ts:hover {
    background-color: ##6a1c32 !important;
    border-radius: 20px !important;
    color: white !important;
    font-weight: 800 !important;
    min-width: 150px!important;
    min-height: 42px!important;
    font-size: 15.5px !important;
}
#LinkHome {
    color: #606060 !important;
    font-weight: 500 !important;
    text-decoration: none  !important;
}

.boton-verificar{

}
.modal-content{
    padding: 28px;
}
.modal-content .btn-close{
    position: absolute;
    top: 30px;
    right: 30px;
}


/*Footer*/

footer {
    background-color: #3F3F3D !important;
}
footer img {
    width: 160px;
}


.footer-enlaces ul {
    position: relative;
    vertical-align: top;
    top: 0;
    text-align:left;
    height: auto;
    margin: 0 1%;
    list-style: none;
    color:#fefefe;
}

.footer-enlaces li {
    position: relative;
    width: 100%;
    height: auto;
    margin: 10px 0;
}


    .footer-enlaces li a {
        color: #eeecec !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        
    }

    .footer-enlaces li a:hover{ 
        color:#b17a45 !important;
        font-weight:700 !important;
        text-decoration: underline !important;

    }
    

.footer-section {
    position: relative;
    vertical-align: top;
    width: 100%;
    height: 400px;
    background-color: #000;
    overflow: hidden;
    font-family: 'Open Sans', sans-serif;
}

.footer-line {
    position: absolute;
    width: 50px;
    height: 2px;
    background-color: #b17a45;
    margin-bottom: 5px;
}
.footer-line-yellow {
    position: absolute;
    width: 100%;
    height: 6px;
    background-color: #b17a45;
    margin-bottom: 5px;
}



/* estilo tabs */
.nav-link{
    color: #6A0C27;
    font-weight: 500;
}
.nav-link:hover{
    color: #6A0C27;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #6A0C27;
    background-color: transparent;
}
.nav-pills .nav-link.active{
    font-weight: 700;
}
/* estilo input */
.form-control:focus {
    color: #212529;
    background-color: #fff;
    border-color: #D1B594;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(177,122,68,.25);
}
.boton-guardar.disabled {
    background: gray;
    cursor: not-allowed;
}
.titulo-ruta{
    font-size: 1.26rem;
    text-align: center;
}
.work-process{
    text-align: justify;
    font-size: .9rem;
}
.ruta .row>* {
    padding-right: calc(var(--bs-gutter-x) * 1);
    padding-left: calc(var(--bs-gutter-x) * 1);
}
.ruta .row{
    margin-right: calc(-1 * var(--bs-gutter-x));
    margin-left: calc(-1 * var(--bs-gutter-x));
}
.descripcion .nav-link{
    font-size: 18px;
}
.descripcion{
    font-size: 18px;
}

@media (min-width: 768px) {
    .mostrar-movil{
        display: none;
    }
}
@media (max-width: 767px) {
    .mostrar-escritorio{
        display: none;
    }
    .descripcion .nav-pills{
        display: block;
    }
    .descripcion .nav-pills button{
        width: 100%;
    }
    .descripcion .nav-item{
        border-right: none!important;
        border-bottom: 1px solid #CCCCCC;
    }
}