html,
body {
  height: 100%;
}
body {
    position: relative;
}
.color1 {
    color: rgba(32,155,0,1.00);
}
.color2 {
    color:rgba(53,53,53,0.80);
}
.color3 {
    color:rgba(190,0,3,1.00);
}
.barra {
    height: 8px;
    margin: 20px 20px 10px;
}
.b1 {
    background: rgba(32,155,0,1.00);
}
.b2 {
    background: rgba(53,53,53,0.80);
}
.b3 {
    background: rgba(190,0,3,1.00);
}
.carousel-inner {
    height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100)!important;
}
.cuadro-logo {
    position: absolute;
    width: 80%;
    top: 0;
    left: 0;
    z-index: 1000;
}
.cuadro-telefono {
    position: absolute;
    width: 80%;
    bottom: 0;
    right: 0;
    z-index: 1000;
}
.cuadro-mail {
    position: absolute;
    width: 15%;
    top: 15%;
    right: 0;
    z-index: 1000;
}
.cuadro-direccion {
    position: absolute;
    width: 65%;
    bottom: 20%;
    left: 15px;
    z-index: 1000;
}
@media (min-width: 768px) {
    .cuadro-logo, .cuadro-telefono {
        width: 55%;
    }
    .cuadro-mail {
        width: 9%;
    }
    .cuadro-direccion {
        width: 40%;
        bottom: 8%;
    }
}
@media (min-width: 992px) {
    .cuadro-logo, .cuadro-telefono {
        width: 40%;
    }
    .cuadro-mail {
        width: 7%;
    }
    .cuadro-direccion {
        width: 35%;
        bottom: 15px;
    }
}
@media (min-width: 576px) {
  .container, .container-sm {
    max-width: 540px; } }
@media (min-width: 768px) {
  .container, .container-sm, .container-md {
    max-width: 720px; } }
@media (min-width: 992px) {
  .container, .container-sm, .container-md, .container-lg {
    max-width: 960px; } }
@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1140px; } }