@font-face {
  font-family: 'Orbitron';
  src: url('../fonts/Orbitron-Regular.woff');
}
 
*{
  font-family: 'Nunito Sans';
}


html { font-family: 'Nunito Sans'; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ }


:root {
    --C1: #D4D4D4;
    --C2: #707070;
    --C3: #27386B;
    --C4: #4469AF;
    --C5: #4C82BD;
    --C6: #5A9CC0;
    /*
    --tam-azul: #0064A7;
    --tam-verde: #97C93D;
    --tam-celeste: #43B4E4;
    --tam-gris: #636466;
    --tam-rojo: #ff8080;
    --text-area: #EAEAEA;
    --pardo-anaranjado: #A65E2E;
    --marron-tierra: #4E3B31;
    --marron: #6C3B2A;
    --black: #495057;
    --blue: #0064A7;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #0064A7;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
    */
}

/* BASE */
.d-i{  display: inline;  }
.d-ib{  display: inline-block;  }

.bw-1{ border-width:1px !important; }
.bw-2{ border-width:2px !important; }
.bw-3{ border-width:3px !important; }
.bw-4{ border-width:4px !important; }
.bw-5{ border-width:5px !important; }
.bw-6{ border-width:6px !important; }
.bw-7{ border-width:7px !important; }
.bw-8{ border-width:8px !important; }
.bw-9{ border-width:9px !important; }
.bw-10{ border-width:10px !important; }
.bw-11{ border-width:11px !important; }
.bw-12{ border-width:12px !important; }
.bw-13{ border-width:13px !important; }
.bw-14{ border-width:14px !important; }
.bw-15{ border-width:15px !important; }

.w-10 { width: 10% !important; }
.w-12 { width: 12% !important; }
.w-15 { width: 15% !important; }
.w-20 { width: 20% !important; }
.w-30 { width: 30% !important; }
.w-40 { width: 40% !important; }
.w-45 { width: 45% !important; }
.w-60 { width: 60% !important; }
.w-70 { width: 70% !important; }
.w-80 { width: 80% !important; }
.w-85 { width: 85% !important; }
.w-88 { width: 88% !important; }
.w-90 { width: 90% !important; }


/* background */
.bg-C1{ background-color: var(--C1) !important; }
.bg-C2{ background-color: var(--C2) !important; }
.bg-C3{ background-color: var(--C3) !important; }
.bg-C4{ background-color: var(--C4) !important; }
.bg-C5{ background-color: var(--C5) !important; }
.bg-C6{ background-color: var(--C6) !important; }

/* color */
.text-C1{ color: var(--C1) !important; }
.text-C2{ color: var(--C2) !important; }
.text-C3{ color: var(--C3) !important; }
.text-C4{ color: var(--C4) !important; }
.text-C5{ color: var(--C5) !important; }
.text-C6{ color: var(--C6) !important; }

/* ------------------------------------------- */
/* .pb{ padding: 60px 100px; } */
.p-bloque{
    padding-top: 60px;
    padding-bottom: 60px;
}
.subtitle{  color: var(--C6);  }
.icon-blue{ color: var(--C4); font-size: 60px; }
/* ------------------------------------  ------------------------------------ */


.navbar{

}

#bloque-1  #menu-nav{
    transform: translate(0, calc(35%) );
}
    #bloque-1  #menu-nav > p {
        /* background-color: var(--C1)    !important; */
        /* height: 200px; */
        font-size: 20px;
       /* font-family: 'Novecentowide-Light', sans-serif;
        /*margin-left: auto !important;
        margin-right: auto !important;*/
    }

#bloque-2 {
    /* background: url('/StarforMX/img/25060.jpg'), var(--C3)    !important; */
    background-image: url("/PaginaWeb/img/25060.jpg");
    height: 800px;

    background-repeat: no-repeat;
    /* background-size: auto; */
    background-size: 100%;
    /* background-position: right top; */
    background-attachment: fixed;
}
    #bloque-2 > section{
        background-color: var(--C3);
        opacity: 0.38;
        height: 800px;
    }

#bloque-3 {
    background-color: var(--C3);
    /* height: 800px; */
}
    #bloque-3  #img-QuienesSomos > img{
        background-color: var(--C3);
        opacity: 0.70;
        /* height: 800px; */
    }

#bloque-4  p.title{
    color: var(--C4);
    font-size: 30px;
}
    #bloque-4  #Servicios-icons{
        background-color: white;
        position:absolute;
        left: 50%; /* position the left edge of the element at the middle of the parent */
        transform: translate(-50%, -50%);
    }



        #bloque-5 {
            background-color: var(--C5);
            height: 800px;
        }

        #bloque-6 {
            background-color: var(--C6);
            height: 800px;
        }

/* ------------------------------------  ------------------------------------ */

.center-v{
    /* position:absolute; */
    /*
    background-color: white;
    left: 50%;
    */

    /* transform: translate(0, calc(50% - 10px) ); */
    transform: translate(0, calc(35%) );

    /* transform: translate(0, 50%); */
    /* transform: translate(-50%, -50%); */
}




.eye{
    background-color: white;
    position:absolute;
    /* height:200px; */
    /* width:200px; */
    /* top: 0px;
    left : 0px; */
    /* z-index: 1; */

    /* margin-left: auto;
    margin-right: auto; */
    /* left: 0;
    right: 0; */
    /* text-align: center; */

    /* top: 50%;  position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */
    transform: translate(-50%, -50%); /* This is a shorthand of*/
}

/*.heaven2{
    position:absolute;
    height:300px;
    width:300px;
    z-index: -1;
}*/

#bloque-ImgenReunion {
    /* background: url('/StarforMX/img/25060.jpg'), var(--C3)    !important; */
    background-image: url("/img/PaginaWeb/25060.jpg");
    height: 800px;

    background-repeat: no-repeat;
    /* background-size: auto; */
    background-size: 100%;
    /* background-position: right top; */
    background-attachment: fixed;
}
#bloque-ImgenReunion > section{
    background-color: var(--C3);
    opacity: 0.38;
    height: 800px;
}

/* --------------------------------------- */

#bloque-QuienesSomos {
    padding-top: 50px;
    padding-bottom: 50px;
    background: rgb(39,56,107);
    background: linear-gradient(180deg, rgba(39,56,107,1) 57%, rgba(76,130,189,1) 100%);
    /* background-color: var(--C3); */
    /* height: 800px; */
}
    #bloque-QuienesSomos  #img-QuienesSomos > img{
        background-color: var(--C3);
        opacity: 0.70;
        /* height: 800px; */
    }


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

#bloque-QuienesSomos  li{
    font-size: 2vw;
}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

#bloque-QuienesSomos  li{
    font-size: 3vw;
}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {

#bloque-QuienesSomos  li{
    font-size: 1.5vw;
}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {

#bloque-QuienesSomos  li{
    font-size: 1.2vw;
}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

#bloque-QuienesSomos  li{
    font-size: 1.2vw;
}
}


/* --------------------------------------- */

#bloque-4  p.title{
    color: var(--C4);
    font-size: 30px;
}
    #bloque-4  #Servicios-icons{
        background-color: white;
        position:absolute;
        left: 50%; /* position the left edge of the element at the middle of the parent */
        transform: translate(-50%, -50%);
    }



        #bloque-5 {
            background-color: var(--C5);
            height: 800px;
        }

        #bloque-6 {
            background-color: var(--C6);
            height: 800px;
        }

/* ------------------------------------  ------------------------------------ */

.center-v{
    /* position:absolute; */
    /*
    background-color: white;
    left: 50%;
    */

    /* transform: translate(0, calc(50% - 10px) ); */
    transform: translate(0, calc(35%) );

    /* transform: translate(0, 50%); */
    /* transform: translate(-50%, -50%); */
}




.eye{
    background-color: white;
    position:absolute;
    /* height:200px; */
    /* width:200px; */
    /* top: 0px;
    left : 0px; */
    /* z-index: 1; */

    /* margin-left: auto;
    margin-right: auto; */
    /* left: 0;
    right: 0; */
    /* text-align: center; */

    /* top: 50%;  position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */
    transform: translate(-50%, -50%); /* This is a shorthand of*/
}

html, body {height: 100%;}
body {display: flex; flex-direction: column; background:url('/img/old-wall.png');}
.content {flex: 1 0 auto; padding: 20px;}

.footer {
  left: 0;
  bottom: 0;
  width: 100%;
  color: #123066;
  text-align: center;
  background-color: rgb(255, 255, 255);
}
.link-footer{
  color: #123066;
}
.link-footer:hover{
  color: #0c50ce;
}

.header-link:hover{
    color:#4469af !important;
}

.bloque-login{
    padding-top: 30px;
    padding-bottom: 30px;
}
.authentication-form{
    padding: 20px;
}
.card{
    padding: 20px;
}




.btn {
    height: 35px;
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }


  .btn:hover {
    color: #212529;
    text-decoration: none;
  }

  .btn:focus, .btn.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  }

  .btn.disabled, .btn:disabled {
    opacity: 0.65;
  }

  a.btn.disabled,
  fieldset:disabled a.btn {
    pointer-events: none;
  }

  .btn-primary {
    color: #fff;
    background-color: rgb(0,141,228);
    border-color: rgb(0,141,228);
  }


  .preguntaTest{
    font-weight: 200  !important;
    font-size: 1.3rem;

}

.cuadro_test{ border-color: rgba(0, 0, 0, 0.125); border-style: solid; border-width: 5px; border-radius: 4px; padding: 15px; }

.btn_test {
    height: 50px;
    display: inline-block;
    font-weight: 400;
    color: #212529;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1.3rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


  .btn_test:hover {
    color: #212529;
    text-decoration: none;
  }

  .btn_test:focus, .btn_test.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  }

  .btn_test.disabled, .btn_test:disabled {
    opacity: 0.65;
  }

  a.btn_test.disabled,
  fieldset:disabled a.btn_test {
    pointer-events: none;
  }



  #hero {

    height:80vh;
    width:100%;
    display:flex;
    align-items:center;
    justify-content: center;
}



#hero::after {
width:100%;
height:100%;
content: '';
position:absolute;
z-index:10;
left:0;
background:rgba(0,0,0,0.3)
}


#hero video {
width:100%;
height:100%;
position:absolute;
left:0;
z-index:5;
object-fit:cover;
font-family:'object-fit: cover';
}


#hero .texture {
width:100%;
height:100%;
position:absolute;
left:0;
z-index:15;
background-color: rgba(0, 0, 0, 0.431);

}


#hero .caption {

position:relative;
z-index:20;
text-align:center;
color:#ffffff;

}

#hero .caption q{
  font-size:1.3rem;
  margin:0;
  font-weight: 600;
}


#hero .caption h1 {

text-transform: uppercase;
font-size:2em;
font-family: 'Oswald', sans-serif;
margin-bottom:0.5rem;
}

#hero .caption h2 {
font-weight:400;
font-size:1.5rem;
margin:0;
font-family: 'PT Sans', sans-serif;
}




@media screen and (min-width:768px)
{
#hero .caption h1 {
    font-size:2.5rem;
}

#hero .caption h2 {
    font-size:1.75rem;
}
}




@media screen and (min-width:992px)
{
#hero .caption h1 {
    font-size:3rem;
}

#hero .caption h2 {
    font-size:2rem;
}
}



@media screen and (min-width:1200px)
{
#hero .caption h1 {
    font-size:4rem;
}

#hero .caption h2 {
    font-size:2.5rem;
}
}

.PW-titulos{
    color: white;
    font-size: calc(18pt + 0.15vw);
    align-items: center;
    font-weight: 600;
}

.titulo-azul{
    color: #27386B !important;
}


.card-gradient{
    border-color: #B2B2B2;
    border-style: none;
    margin-top: 20px;
    margin-right: 10px;
    border-radius: 30px;
    padding: 20px;

    background-image: -moz-linear-gradient(131deg, #0D4092 0%, #1B73B3 99%);
    background-image: -webkit-linear-gradient(131deg, #0D4092 0%, #1B73B3 99%);
    background-image: -ms-linear-gradient(131deg, #0D4092 0%, #1B73B3 99%);
    box-shadow: 0px 12px 20px 0px rgba(2, 86, 143, 0.986);


}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .card-gradient p{
        color: white;
        text-align: center;
        font-size: 3vw;
    }

    .card-gradient i{
        color: white;
        text-align: center;
        font-size: 3.5rem;
    }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .card-gradient p{
        color: white;
        text-align: center;
        font-size: 3vw;
    }

    .card-gradient i{
        color: white;
        text-align: center;
        font-size: 3.5rem;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .card-gradient p{
        color: white;
        text-align: center;
        font-size: 2vw;
    }
    .card-gradient i{
        color: white;
        text-align: center;
        font-size: 3.5rem;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .card-gradient p{
        color: white;
        text-align: center;
        font-size: 1.2vw;
    }
    .card-gradient i{
        color: white;
        text-align: center;
        font-size: 3.5rem;
    }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .card-gradient p{
        color: white;
        text-align: center;
        font-size: 1.2vw;
    }
    .card-gradient i{
        color: white;
        text-align: center;
        font-size: 3.5rem;
    }
}





.card-gradient:hover{

    background-image: -moz-linear-gradient(131deg, #1B73B3 0%,  #0D4092 99%);
    background-image: -webkit-linear-gradient(131deg, #1B73B3 0%,  #0D4092 99%);
    background-image: -ms-linear-gradient(131deg, #1B73B3 0%,  #0D4092 99%);

}

.bloque-servicios{
    background: rgb(76,130,189);
    background: linear-gradient(180deg, rgba(76,130,189,1) 57%, rgba(255,255,255,1) 100%);

}


/* line 248, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
.custom-animation {
    backface-visibility: hidden;
    animation: jumping 9s ease-in-out 2s infinite alternate;
    animation-delay: 1s;
    transition: all .9s ease 5s;
    user-select: none;
  }

  /* line 256, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
  .custom-animation2 {
    backface-visibility: hidden;
    animation: jumping2 9s ease-in-out 2s infinite alternate;
    animation-delay: 1s;
    transition: all 1s ease 3s;
    user-select: none;
  }

  /* line 264, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
  .custom-animation3 {
    backface-visibility: hidden;
    animation: jumping3 9s ease-in-out 2s infinite alternate;
    animation-delay: 1s;
    transition: all 7s ease 2s;
    user-select: none;
  }

  /* line 272, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
  .custom-animation4 {
    backface-visibility: hidden;
    animation: jumping4 9s ease-in-out 2s infinite alternate;
    animation-delay: 1s;
    transition: all 8s ease 4s;
    user-select: none;
  }

  /* line 280, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
  .custom-animation10 {
    backface-visibility: hidden;
    animation: jumping10 9s ease-in-out 2s infinite alternate;
    animation-delay: 1s;
    transition: all 8s ease 4s;
    user-select: none;
  }

  /* line 288, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
  .custom-animation11 {
    backface-visibility: hidden;
    animation: jumping11 9s ease-in-out 2s infinite alternate;
    animation-delay: 1s;
    transition: all 8s ease 4s;
    user-select: none;
  }

  @keyframes jumping {
    0% {
      transform: translateY(0px) translateX(0) rotate(0) scale(1);
      opacity: .8;
    }
    25% {
      transform: translateY(-10px) translateX(-10px) rotate(20deg) scale(0.8);
      opacity: .9;
    }
    50% {
      transform: translateY(-15px) translateX(-15px) rotate(10deg) scale(0.9);
      opacity: .8;
    }
    75% {
      transform: translateY(-20px) translateX(-20px) rotate(20deg) scale(0.75);
      opacity: .6;
    }
    85% {
      transform: translateY(-25px) translateX(-25px) rotate(20deg) scale(0.9);
      opacity: .7;
    }
    100% {
      transform: translateY(-15px) translateX(-15px) rotate(0) scale(0.95);
      opacity: .85;
    }
  }

  @keyframes jumping2 {
    0% {
      transform: translateY(0px) translateX(0) rotate(0) scale(1);
      opacity: .5;
    }
    25% {
      transform: translateY(-30px) translateX(10px) rotate(20deg) scale(0.8);
      opacity: .8;
    }
    50% {
      transform: translateY(15px) translateX(-15px) rotate(10deg) scale(0.7);
      opacity: .8;
    }
    75% {
      transform: translateY(30px) translateX(20px) rotate(20deg) scale(0.75);
      opacity: .7;
    }
    100% {
      transform: translateY(-15px) translateX(15px) rotate(0) scale(0.75);
      opacity: .9;
    }
  }

  @keyframes jumping3 {
    0% {
      transform: translateY(10px) translateX(0) rotate(0) scale(1);
      opacity: .9;
    }
    20% {
      transform: translateY(20px) translateX(10px) rotate(-20deg) scale(0.8);
      opacity: .8;
    }
    40% {
      transform: translateY(15px) translateX(-15px) rotate(10deg) scale(0.75);
      opacity: .8;
    }
    40% {
      transform: translateY(-15px) translateX(-25px) rotate(10deg) scale(0.5);
      opacity: 1;
    }
    80% {
      transform: translateY(-30px) translateX(20px) rotate(-20deg) scale(0.75);
      opacity: .6;
    }
    100% {
      transform: translateY(15px) translateX(15px) rotate(0) scale(0.95);
      opacity: .7;
    }
  }

  @keyframes jumping4 {
    0% {
      transform: translateY(-30px) translateX(20px) rotate(0) scale(1.2);
      opacity: .7;
    }
    25% {
      transform: translateY(-20px) translateX(10px) rotate(50deg) scale(0.6);
      opacity: .8;
    }
    50% {
      transform: translateY(15px) translateX(-15px) rotate(20deg) scale(0.5);
      opacity: .9;
    }
    75% {
      transform: translateY(30px) translateX(20px) rotate(50deg) scale(0.75);
      opacity: .7;
    }
    100% {
      transform: translateY(-15px) translateX(15px) rotate(0) scale(0.5);
      opacity: .9;
    }
  }

  @keyframes jumping10 {
    0% {
      transform: rotate(180deg);
      display: block;
    }
    100% {
      transform: rotate(30deg);
      display: block;
    }
  }

  @keyframes jumping11 {
    0% {
      transform: rotate(180deg) translate(-20px, 20px);
      display: block;
    }
    100% {
      transform: rotate(30deg) translate(0px, 0px);
      display: block;
    }
  }

  /* line 420, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
  .hero-app-1 {
    position: absolute;
    left: 4%;
    top: 10%;
  }

  @media (max-width: 576px) {
    /* line 420, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
    .hero-app-1 {
      display: none;
    }
  }

  @media only screen and (min-width: 576px) and (max-width: 767px) {
    /* line 420, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
    .hero-app-1 {
      padding: 8px 25px;
    }
  }

  @media only screen and (min-width: 768px) and (max-width: 991px) {
    /* line 420, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
    .hero-app-1 {
      padding: 10px 25px;
    }
  }

  @media only screen and (min-width: 992px) and (max-width: 1200px) {
    /* line 420, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
    .hero-app-1 {
      padding: 10px 25px;
    }
  }

  /* line 438, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
  .hero-app-2 {
    position: absolute;
    left: 5%;
    bottom: 35%;
  }

  @media (max-width: 576px) {
    /* line 438, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
    .hero-app-2 {
      bottom: 5%;
    }
  }

  @media only screen and (min-width: 576px) and (max-width: 767px) {
    /* line 438, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
    .hero-app-2 {
      bottom: 20%;
    }
  }

  @media only screen and (min-width: 768px) and (max-width: 991px) {
    /* line 438, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
    .hero-app-2 {
      padding: 10px 25px;
    }
  }

  @media only screen and (min-width: 992px) and (max-width: 1200px) {
    /* line 438, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
    .hero-app-2 {
      padding: 10px 25px;
    }
  }

  /* line 456, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
  .hero-app-3 {
    position: absolute;
    top: 20%;
    left: 25%;
  }

  @media (max-width: 576px) {
    /* line 456, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
    .hero-app-3 {
      left: 5%;
    }
  }

  /* line 474, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
  .hero-app-4 {
    position: absolute;
    bottom: 20%;
    left: 50%;
  }

  /* line 480, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
  .hero-app-5 {
    position: absolute;
    bottom: 40%;
    left: 50%;
  }

  /* line 486, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
  .hero-app-6 {
    position: absolute;
    right: 5%;
    top: 40%;
  }

  /* line 492, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
  .hero-app-7 {
    position: absolute;
    top: 13%;
    left: 51%;
  }

  @media only screen and (min-width: 576px) and (max-width: 767px) {
    /* line 492, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
    .hero-app-7 {
      top: 5%;
      left: 73%;
    }
  }

  @media only screen and (min-width: 768px) and (max-width: 991px) {
    /* line 492, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
    .hero-app-7 {
      padding: 10px 25px;
    }
  }

  @media only screen and (min-width: 992px) and (max-width: 1200px) {
    /* line 492, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
    .hero-app-7 {
      padding: 10px 25px;
    }
  }

  /* line 511, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
  .hero-app-8 {
    position: absolute;
    left: 68%;
    top: 60%;
  }

  @media (max-width: 576px) {
    /* line 511, E:/167 Bizcon Business/Bizcon_html/sass/_common.scss */
    .hero-app-8 {
      top: 80%;
    }
  }

  .top-banner-section {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 450px;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    align-content: center;
    justify-content: center;


  }

  .banner-image-div {
    grid-area: 1 / 1 / 2 / 2;
  }
  .banner-overlay-div {
    grid-area: 1 / 1 / 2 / 2;
  }
  .banner-text-div {
    grid-area: 1 / 1 / 2 / 2;
  }

  .banner-image {
    display: grid;
    min-width: 450px;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


  .banner-overlay-div {
    display: grid;
    max-width: 100%;
    background: black;
    background: linear-gradient(
      60deg,
      rgba(0, 0, 0, 0.7777485994397759) 30%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .banner-text-div {
    display: grid;
    align-items: center;
    margin-left: auto;
    margin-right: auto;

  }

  .banner-h1-text {
    font-size: calc(30pt + 0.15vw);
    letter-spacing: 0.05em;
    font-weight: bolder;
    text-transform: uppercase;
    color: white;
  }

  .banner-body-text {
    font-size: calc(20pt + 0.15vw);
    margin-top: 0.5em;
    color: white;
    text-decoration: none;


  }

  .banner-btn {
    margin-top: 1em;
  }

.card-servicios{
    background-color: white;
    box-shadow: 0px 12px 20px 0px rgba(156, 156, 156, 0.986);
    padding: 20px;
    border-radius: 50px;
}

.card-servicios span{
    font-size: calc(18pt + 0.15vw);
    align-items: center;
    color: #27386B;
    font-weight: 600;

}

.card-servicios p{
    font-size: calc(10pt + 0.15vw);
}
.card-servicios li{
    font-size: calc(10pt + 0.15vw);
}

.img-quienSomos{
    background-image: url('/PaginaWeb/img/QuienesSomos/nosotros.jpg');
    object-fit: cover;
    background-position:center;
background-repeat:no-repeat;
}
.seccion-quienesSomos p{
    font-size: calc(10pt + 0.15vw);
}
.seccion-quienesSomos li{
    font-size: calc(10pt + 0.15vw);
}

.seccion-quienesSomos .fa-li{
    font-size: calc(10pt + 0.15vw);
}

/*
a {
    color: #000;
    text-decoration: none;
  }

  .underline {
    background-repeat: repeat-x;
  }

  .underline--stars {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/star.svg");
    background-position: 0 1.06em;
    background-size: 10px 9px;
    background-color: red;
    color: #f2f3f8;
  }

  .underline--emoji {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/heart.png");
    background-position: 0 1.06em;
    background-size: 15px 9px;
    color: #e8665f;
  }

  .underline--bacon {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78779/bacon.svg");
    background-position: 0 1.06em;
    background-size: 28px 9px;
    color: #9e4446;
  }
*/

.img-tecnologia{
    padding: 25px;
  transition: transform .2s; /* Animation */
  margin: 0 auto;

}

.img-tecnologia:hover{
    transform: scale(1.2);
}

.bg-card-header{
  background-color: rgb(0,160,227) !important;
}

.video-index{
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
}




.test {
  position: relative;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.test:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  background: rgba(0, 0, 0, 0.418);
}
.text {
  font-family: Arial;
  font-size: 2.6em;
  color: white;
  text-shadow: 0.1em 0.1em 0.5em rgba(0,0,0,0.5);
  margin: 0;
  position: absolute;
}

.btn-buscar{
  min-height: 35px;
}

.card_hover:hover{
  transform: translate(0, -20px);
  box-shadow: 0px 15px 20px 0px rgba(0, 0, 0, 0.5)
}

.card-deck {
  
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: .5rem;
}

.card-deck .card{
  margin-left: 0px;
  
}

/*data-box*/


.databox1:hover { 
  box-shadow: 0 .4rem .8rem rgba(8, 246, 67, 0.545)!important;
  transform: translate(0, -10px);   
  cursor: pointer;
}
.databox2:hover{ 
  box-shadow: 0 .4rem .8rem rgba(252, 23, 23, 0.545)!important;
  transform: translate(0, -10px);
  cursor: pointer;
}
.databox3:hover {
   box-shadow: 0 .4rem .8rem rgba(0, 123, 255, 0.545)!important;  
   transform: translate(0, -10px); 
   cursor: pointer;
}
.databox4:hover { 
  box-shadow: 0 .4rem .8rem rgba(96, 41, 10, 0.545)!important;
  transform: translate(0, -10px); 
  cursor: pointer;
}
.databox5:hover { 
  box-shadow: 0 .4rem .8rem rgba(234, 244, 55, 0.545)!important;
  transform: translate(0, -10px);
  cursor: pointer;
}
.databox6:hover { 
  box-shadow: 0 .4rem .8rem rgba(69, 66, 64, 0.545)!important;
  transform: translate(0, -10px);
  cursor: pointer;
}

.databox7:hover { 
  box-shadow: 0 .4rem .8rem #21c07e!important;
  transform: translate(0, -10px);
  cursor: pointer;
}

.databox8:hover { 
  box-shadow: 0 .4rem .8rem rgba(49, 65, 61, 0.545)!important;
  transform: translate(0, -10px);
  cursor: pointer;
}



.databox1, .databox2, .databox3, .databox4, .databox5, .databox6, .databox7,.databox8 {
  background-image: url(public/img/Agua.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius:0px;border:none;
  width: 150px;
  height:120px;
  margin-bottom: 10px;
  text-align:center;
  transition: transform ease 300ms;
  
  color: black;
}

.databox1 { background-image: url(../img/databox/databox_solucionado.png); overflow: hidden !important;}
.databox2 { background-image: url(../img/databox/databox_pendientes.png); }
.databox3 { background-image: url(../img/databox/databox_agua.png); }
.databox4 { background-image: url(../img/databox/databox_pavimentacion.png); }
.databox5 { background-image: url(../img/databox/databox_alumbrado.png); }
.databox6 { background-image: url(../img/databox/databox_transporte.png); }
.databox7 { background-image: url(../img/databox/databox_parques.png); }
.databox8 { background-image: url(../img/databox/databox_basura.png); }

.databox1 .cifra_titulo1, .databox1 .cifra_titulo2, .databox1 .cifra_titulo3 { color:#503D16; }
.databox2 .cifra_titulo1, .databox2 .cifra_titulo2, .databox2 .cifra_titulo3 { color:#1B4745; }
.databox3 .cifra_titulo1, .databox3 .cifra_titulo2, .databox3 .cifra_titulo3 { color:#204251; }
.databox4 .cifra_titulo1, .databox4 .cifra_titulo2, .databox4 .cifra_titulo3 { color:#661E23; }
.databox5 .cifra_titulo1, .databox5 .cifra_titulo2, .databox5 .cifra_titulo3 { color:#263D4A; }
.databox6 .cifra_titulo1, .databox6 .cifra_titulo2, .databox6 .cifra_titulo3 { color:#215654; }
.databox7 .cifra_titulo1, .databox7 .cifra_titulo2, .databox7 .cifra_titulo3 { color:#215654; }
.databox8 .cifra_titulo1, .databox8 .cifra_titulo2, .databox8 .cifra_titulo3 { color:#215654; }

.cifra_titulo1, .cifra_titulo2, .cifra_titulo3, .cifra, .cifra_bajada   {color:#FFFFFF !important; font-size: 1rem;}
.cifra_titulo { font-family: "OswaldRegular",sans-serif !important; color:#FFFFFF; padding:10px 20px;   }
.cifra_metadata {
  overflow: hidden;
    font-family: "OswaldRegular",sans-serif !important;
    color:#FFFFFF;
    font-size:14px;
    padding-left: 30px;
    margin-top: -50px;
    transform: rotate(-25deg);
    
    /* Safari */
    -webkit-transform: rotate(-25deg);

    /* Firefox */
    -moz-transform: rotate(-25deg);

    /* IE */
    -ms-transform: rotate(-25deg);

    /* Opera */
    -o-transform: rotate(-25deg);
    position: absolute;
}
.cifra_anho { margin-bottom:20px; padding:0px 50px 0px 35px;  font-size:18px; }
.cifra_titulo_bg {
  /* background: rgba(0, 0, 0, 0.827); */
  height:30px;
  z-index:1;
}


.cifra_titulo3 { 
  font-size:18px;
  z-index: 2 !important;
  color:rgb(255, 255, 255) !important;
  text-transform:uppercase;
  top: -5px;
  border:1px none red;
  width:100%;
  margin-bottom: 2px;
}



.cifra_titulo_bg_5 { background-color:white; opacity: 0.6; height:55px;  z-index:1;  }
.cifra_titulo1, .cifra_titulo2 { margin-top:10px; color:#222; text-transform:uppercase; position: absolute; top: -5px; border:1px none red; width:100%; z-index:2; padding:0px 20px 0px 5px; color: white; }
.cifra_titulo2 {  padding:0px 30px 0px 25px; }

.cifra_anho { font-family: "SourceSansRegular",sans-serif !important; font-size:24px; text-transform:none; line-height:1em; margin-top:-30px; border:1px none red; padding:0px 3px; color: white; ;margin-right: 80px }
.cifra { font-family: "SourceSansSemibold",sans-serif !important; font-size:35px; margin-top:-5px;margin-right: 80px; }
.cifra_bajada { font-family: "SourceSansRegular",sans-serif !important; font-size:14px; text-transform:none; line-height:1em; margin-top:-5px; border:1px none red; padding:0px 3px;  }
.cifra_bajada2 { font-family: "SourceSansRegular",sans-serif !important; font-size:12px;text-transform:none; }

/* .cifra, .cifra_anho, .cifra_bajada, .cifra_bajada2,.cifra_titulo3 { text-shadow: 1px 1px #444444; } */

.icono_databox { 
  font-size:22px; text-transform:none;
  line-height:1em;
  margin-top:-50px;
  margin-left: 70px;
  border:1px none red;
  padding:0px 3px;
  color: white; 
  overflow: hidden;
}


.overlay-databox1{
  background-color: #316f31;
  height: 100%;
}

.overlay-databox2{
  background-color: #d1052a;
  height: 100%;
}

.overlay-databox3{
  background-color: #84b6f4;
  height: 100%;
}

.overlay-databox4{
  background-color: #ab7545;
  height: 100%;
}

.overlay-databox5{
  background-color: #dfa83a;
  height: 100%;
}

.overlay-databox6{
  background-color: rgba(69, 66, 64, 1);
  height: 100%;
}

.overlay-databox7{
  background-color: #119a61;
  height: 100%;
}

.overlay-databox8{
  background-color: #9b9b9b;
  height: 100%;
}



.data_deck{
  flex-flow: row wrap;
  display:flex;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 0.5rem;
  justify-content: center;
  align-items: center;
}

/*******CSS POSTS*******/


  
  .profile-widget {
    position: relative;
  }
  .profile-widget .image-container {
    background-size: cover;
    background-position: center;
    padding: 190px 0 10px;
  }
  .profile-widget .image-container .profile-background {
    width: 100%;
    height: auto;
  }
  .profile-widget .image-container .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto -60px;
    display: block;
  }
  .profile-widget .details {
    padding: 50px 15px 15px;
    text-align: center;
  }
  /* End Component: Profile Widget */
  /********************************************************************
  *********************************************************************
  *********************************************************************/
  /* Component: Mini Profile Widget */
  .mini-profile-widget .image-container .avatar {
    width: 180px;
    height: 180px;
    display: block;
    margin: 0 auto;
    border-radius: 50%;
    background: white;
    padding: 4px;
    border: 1px solid #dddddd;
  }
  .mini-profile-widget .details {
    text-align: center;
  }
  
  .img-circle{
    border-radius: 50%;
  }
  
  /* Component: Panel */
  .panel {
    border-radius: 0;
    margin-bottom: 30px;
    background-color: white;
  }
  .panel.solid-color {
    color: white;
  }
  .panel .panel-heading {
    border-radius: 0;
    position: relative;
  }
  .panel .panel-heading > .controls {
    position: absolute;
    right: 10px;
    top: 12px;
  }
  .panel .panel-heading > .controls .nav.nav-pills {
    margin: -8px 0 0 0;
  }
  .panel .panel-heading > .controls .nav.nav-pills li a {
    padding: 5px 8px;
  }
  .panel .panel-heading .clickable {
    margin-top: 0px;
    font-size: 12px;
    cursor: pointer;
  }
  .panel .panel-heading.no-heading-border {
    border-bottom-color: transparent;
  }
  .panel .panel-heading .left {
    float: left;
  }
  .panel .panel-heading .right {
    float: right;
  }
  .panel .panel-title {
    font-size: 16px;
    line-height: 20px;
  }
  .panel .panel-title.panel-title-sm {
    font-size: 18px;
    line-height: 28px;
  }
  .panel .panel-title.panel-title-lg {
    font-size: 24px;
    line-height: 34px;
  }
  .panel .panel-body {
    font-size: 13px;
  }
  .panel .panel-body > .body-section {
    margin: 0px 0px 20px;
  }
  .panel .panel-body > .body-section > .section-heading {
    margin: 0px 0px 5px;
    font-weight: bold;
  }
  .panel .panel-body > .body-section > .section-content {
    margin: 0px 0px 10px;
  }
  .panel-white {
    border: 1px solid #dddddd;
  }
  .panel-white > .panel-heading {
    color: #333;
    background-color: #fff;
    border-color: #ddd;
  }
  .panel-white > .panel-footer {
    background-color: #fff;
    border-color: #ddd;
  }
  .panel-primary {
    border: 1px solid #dddddd;
  }
  .panel-purple {
    border: 1px solid #dddddd;
  }
  .panel-purple > .panel-heading {
    color: #fff;
    background-color: #8e44ad;
    border: none;
  }
  .panel-purple > .panel-heading .panel-title a:hover {
    color: #f0f0f0;
  }
  .panel-light-purple {
    border: 1px solid #dddddd;
  }
  .panel-light-purple > .panel-heading {
    color: #fff;
    background-color: #9b59b6;
    border: none;
  }
  .panel-light-purple > .panel-heading .panel-title a:hover {
    color: #f0f0f0;
  }
  .panel-blue,
  .panel-info {
    border: 1px solid #dddddd;
  }
  .panel-blue > .panel-heading,
  .panel-info > .panel-heading {
    color: #fff;
    background-color: #2980b9;
    border: none;
  }
  .panel-blue > .panel-heading .panel-title a:hover,
  .panel-info > .panel-heading .panel-title a:hover {
    color: #f0f0f0;
  }
  .panel-light-blue {
    border: 1px solid #dddddd;
  }
  .panel-light-blue > .panel-heading {
    color: #fff;
    background-color: #3498db;
    border: none;
  }
  .panel-light-blue > .panel-heading .panel-title a:hover {
    color: #f0f0f0;
  }
  .panel-green,
  .panel-success {
    border: 1px solid #dddddd;
  }
  .panel-green > .panel-heading,
  .panel-success > .panel-heading {
    color: #fff;
    background-color: #27ae60;
    border: none;
  }
  .panel-green > .panel-heading .panel-title a:hover,
  .panel-success > .panel-heading .panel-title a:hover {
    color: #f0f0f0;
  }
  .panel-light-green {
    border: 1px solid #dddddd;
  }
  .panel-light-green > .panel-heading {
    color: #fff;
    background-color: #2ecc71;
    border: none;
  }
  .panel-light-green > .panel-heading .panel-title a:hover {
    color: #f0f0f0;
  }
  .panel-orange,
  .panel-warning {
    border: 1px solid #dddddd;
  }
  .panel-orange > .panel-heading,
  .panel-warning > .panel-heading {
    color: #fff;
    background-color: #e82c0c;
    border: none;
  }
  .panel-orange > .panel-heading .panel-title a:hover,
  .panel-warning > .panel-heading .panel-title a:hover {
    color: #f0f0f0;
  }
  .panel-light-orange {
    border: 1px solid #dddddd;
  }
  .panel-light-orange > .panel-heading {
    color: #fff;
    background-color: #ff530d;
    border: none;
  }
  .panel-light-orange > .panel-heading .panel-title a:hover {
    color: #f0f0f0;
  }
  .panel-red,
  .panel-danger {
    border: 1px solid #dddddd;
  }
  .panel-red > .panel-heading,
  .panel-danger > .panel-heading {
    color: #fff;
    background-color: #d40d12;
    border: none;
  }
  .panel-red > .panel-heading .panel-title a:hover,
  .panel-danger > .panel-heading .panel-title a:hover {
    color: #f0f0f0;
  }
  .panel-light-red {
    border: 1px solid #dddddd;
  }
  .panel-light-red > .panel-heading {
    color: #fff;
    background-color: #ff1d23;
    border: none;
  }
  .panel-light-red > .panel-heading .panel-title a:hover {
    color: #f0f0f0;
  }
  .panel-pink {
    border: 1px solid #dddddd;
  }
  .panel-pink > .panel-heading {
    color: #fff;
    background-color: #fe31ab;
    border: none;
  }
  .panel-pink > .panel-heading .panel-title a:hover {
    color: #f0f0f0;
  }
  .panel-light-pink {
    border: 1px solid #dddddd;
  }
  .panel-light-pink > .panel-heading {
    color: #fff;
    background-color: #fd32c0;
    border: none;
  }
  .panel-light-pink > .panel-heading .panel-title a:hover {
    color: #f0f0f0;
  }
  .panel-group .panel {
    border-radius: 0;
  }
  .panel-group .panel + .panel {
    margin-top: 0;
    border-top: 0;
  }
  
  /* Component: Posts */
  .post .post-heading {
    height: 95px;
    padding: 20px 15px;
  }
  .post .post-heading .avatar {
    width: 60px;
    height: 60px;
    display: block;
    margin-right: 15px;
  }
  .post .post-heading .meta .title {
    margin-bottom: 0;
  }
  .post .post-heading .meta .title a {
    color: black;
  }
  .post .post-heading .meta .title a:hover {
    color: #aaaaaa;
  }
  .post .post-heading .meta .time {
    margin-top: 8px;
    color: #999;
  }
  .post .post-image .image {
    width: 100%;
    height: auto;
  }
  .post .post-description {
    padding: 15px;
  }
  .post .post-description p {
    font-size: 14px;
  }
  .post .post-description .stats {
    margin-top: 20px;
  }
  .post .post-description .stats .stat-item {
    display: inline-block;
    margin-right: 15px;
  }
  .post .post-description .stats .stat-item .icon {
    margin-right: 8px;
  }
  .post .post-footer {
    border-top: 1px solid #ddd;
    padding: 15px;
  }
  .post .post-footer .input-group-addon a {
    color: #454545;
  }
  .post .post-footer .comments-list {
    padding: 0;
    margin-top: 20px;
    list-style-type: none;
  }
  .post .post-footer .comments-list .comment {
    display: block;
    width: 100%;
    margin: 20px 0;
  }
  .post .post-footer .comments-list .comment .avatar {
    width: 35px;
    height: 35px;
  }
  .post .post-footer .comments-list .comment .comment-heading {
    display: block;
    width: 100%;
  }
  .post .post-footer .comments-list .comment .comment-heading .user {
    font-size: 14px;
    font-weight: bold;
    display: inline;
    margin-top: 0;
    margin-right: 10px;
  }
  .post .post-footer .comments-list .comment .comment-heading .time {
    font-size: 12px;
    color: #aaa;
    margin-top: 0;
    display: inline;
  }
  .post .post-footer .comments-list .comment .comment-body {
    margin-left: 50px;
  }
  .post .post-footer .comments-list .comment > .comments-list {
    margin-left: 50px;
  }
  
  .fluid-width-video-wrapper {
      width: 100%;
      position: relative;
      padding: 0;
  }
  
  .fluid-width-video-wrapper iframe, .fluid-width-video-wrapper object, .fluid-width-video-wrapper embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }
.text-rojo{
  color: red;;
}

.bg-azul{
  background-color: #123066 !important;
}

.btn-primary{
  color: #212529;
    background-color: #7cc;
    border-color: #5bc2c2
}
.nav-link{
  font-size: 1.1rem;
}

.tags {
  list-style: none;
  margin: 0;
  overflow: hidden; 
  padding: 0;
}

.tags li {
  float: left; 
}

.tag {
  background: crimson;
  border-radius: 3px 0 0 3px;
  color: #ffffff;
  display: inline-block;
  height: 26px;
  line-height: 26px;
  padding: 0 20px 0 23px;
  position: relative;
  margin: 0 10px 10px 0;
  text-decoration: none;
  -webkit-transition: color 0.2s;
}

.tag::before {
  background: #fff;
  border-radius: 10px;
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
  content: '';
  height: 6px;
  left: 10px;
  position: absolute;
  width: 6px;
  top: 10px;
}

.tag::after {
  background: #fff;
  border-bottom: 13px solid transparent;
  border-left: 10px solid crimson;
  border-top: 13px solid transparent;
  content: '';
  position: absolute;
  right: 0;
  top: 0;
}

.tag:hover {
  background-color: rgb(224, 88, 115);
  color: white;
}

.tag:hover::after {
   border-left-color: rgb(224, 88, 115); 
}

.link{
  color: #2f69d6;
}
.link:hover{
  color: #0743b3;
}


.navbar-light{
  background-color: #ffffff;
}

.body-content{
  margin-top: 117px;
}

@media (max-width: 992px) {
    
  .navbar-collapse.collapsing .navbar-nav {
      display: block;
      position: fixed;
      top: 0;
      bottom: 0;
      left: -50%;
      transition: all 0.2s ease;
  }

  

  .navbar-collapse.show .navbar-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    flex-direction: column;
    height: auto;
    width: 50%;
    transition: left 0.35s ease;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    background-color: white;
    z-index: 99999;
  }

  .nav-item:first{
    padding-top: 15px;
    padding-left: 15px;
  }

  .nav-item{
    padding-left: 15px;
  }
  .navbar-nav{
    padding-top: 0px;
  }
  
  .nav-item:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 1px; 
    top: 100%;
    left: 0;
    display: block 
  }
  .nav-line{
    display: block !important;
    padding-left: 0px !important;
  }

}
.nav-line{
  display: none;
}

.icono-footer{
  font-size: 6vw;
}

.btn-reportar {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 15px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: crimson;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;

  transition: transform ease 500ms;
}

.btn-reportar:hover {
  background-color: rgb(209, 80, 106);
  color: white;
  transform: translate(0, -10px);
}




.button--sticky {
  position: sticky;
  bottom: 0;
  z-index: 1055;
}

.btn-crear-reportar {
  display: block;
  position: sticky;
  bottom: 20px;
  z-index: 500;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: crimson;
  color: white;
  padding: 10px;
  border-radius: 4px;
  width: 180px;
  transition: transform ease 500ms;
  text-align: center;
}




.btn-crear-reportar:hover {
  background-color: rgb(209, 80, 106);
  color: white;
  transform: translate(0, -10px);
}


.btn-volver-arriba{
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 9999;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: rgb(6, 4, 109);
  color: white;
  cursor: pointer;
  text-align: center;
  width: 50px;
  padding: 15px;
  border-radius: 4px;

  transition: transform ease 500ms;
}


.btn-volver-arriba:hover {
  background-color:  rgb(58, 57, 105);
  color: white;
  transform: translate(0, -10px);
}