:root {
    /* Colors */
    --white: #fff;
    --darkblue: #011674;
    --darkblue-rgba-40: rgb(1, 22, 116, .4);
    --black: #393d46;
    --black-rgba-80: rgba(57, 61, 70, .8);
    --yellow: #CE0000;
    --lightblue: #4a88d9;
    --lightblue-rgba-15: rgba(74,136,217, .15);
    --gray-3: #9f9f9f;
    --gray-2: #cdcfd1;
    --gray: #f6f7fb;
    --green: #25d366;
    --red: #c42b2b;

    /* Icons sizes */
    --icon-1x: 10px;
    --icon-2x: 20px;
    --icon-3x: 30px;
    --icon-4x: 40px;
    --icon-5x: 50px;
}

html {
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    width: 100% !important;
}

.icon > * {
    margin-top: 30px;
}

.icon-container > * {
    margin-top: 20px;
}

.no-margin-rigth {
    margin-right: 0px !important;
}

.icon-contact > * {
    margin-top: 100px;
}

.icon-mensaje > * {
    margin-top: 100px;
}

.telefono,
.correo,.ubi{
    margin-bottom: -25px;
    margin-top: 10px;
}

.icon-1x {
    width: var(--icon-1x);
    height: var(--icon-1x);
}

.icon-2x {
    width: var(--icon-2x);
    height: var(--icon-2x);
}

.icon-3x {
    width: var(--icon-3x);
    height: var(--icon-3x);
}

.icon-4x {
    width: var(--icon-4x);
    height: var(--icon-4x);
}

.icon-5x {
    width: var(--icon-5x);
    height: var(--icon-5x);
}

.card {
    display: flex;
}

.card .card-thumb {
    flex: 1 1 auto;
}

.card.card-thumb img {
    max-width: 100%;
}

.image-nosotros img{
    max-width: 100%;
}

.card .card-nosotros {
    flex: 1 1 auto;
}

.card .card-nosotros img {
    max-width: 100%;
    margin-top: 25px;
    margin-bottom: -25px;
}

#tab-menu li {
    cursor: pointer;
}

#tab-menu li.is-active {
    background: var(--lightblue);
}

#tab-content > div {
    display: none;
}

.modal {
    display: none;
    position: fixed;
    z-index: 999;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: var(--black-rgba-80);
    background-color: var(--black-rgba-80);
  }

.modal .modal-wrap {
    background: var(--white);
    padding: 15px;
    margin: auto;
    display: block;
    width: 80%;
    max-width: 900px;
    animation-name: zoom;
    animation-duration: 0.6s;
    position: relative;
  }

  .modal .modal-caption {
    margin: auto;
    display: block;
    width: 100%;
    text-align: left;
    color: var(--darkblue);
    padding: 15px 0 0 0;
    background: var(--white);
  }
  .modal .modal-content img {
    width: 100%;
    display: inline-block;
  }

  @keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
  }

  .modal .close {
    position: absolute;
    top: 0px;
    right: 0px;
    color: var(--white);
    font-size: 15px;
    font-weight: bold;
    background: var(--lightblue);
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 1.9;
  }

    .modal .close:hover,
    .modal .close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }

    .paginator-content > div {
        display: none;
    }

    .paginator-menu {
        text-align: center;
   }
    .paginator-menu > div {
        width: 50px;
        height: 50px;
        display: inline-block;
        cursor: pointer;
        margin: 0px 5px 0px 5px;
   }
    .paginator-menu > div span {
        color: var(--black);
        font-family: 'Poppins';
        line-height: 3;
   }
    .paginator-menu .page {
        background: var(--lightblue-rgba-15);
   }
   .paginator-menu .page.is-active {
        background-color: var(--lightblue);
   }
    .paginator-menu .page > span {
        color: var(--lightblue);
   }

   .paginator-menu .page.is-active > span {
    color: var(--white);
   }

   .button-menu{
    z-index: 200;
    width: 40px;
    height: 40px;
    border: none;
    display: none;
    background: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: fixed;
    margin-top: 5px;
  }
  
  .button-menu span{
    width: 37px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: var(--darkblue);
    border-radius: 3px;
    transform-origin: 4px 0px;
    transition: all .2s linear;
    outline: none;
  }

  .button-menu.close span {
    opacity: 1;
    transform: rotate(45deg) translate(0px, 0px);
    background: #ffffff;
  }
  
  .button-menu.close span:nth-child(2) {
    transform: rotate(-45deg) translate(-8px, 5px);
  }
  
  .button-menu.close span:nth-child(3){
    display: none;
  }

  .arrow {
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--white);
    border-left: 2px solid var(--white);
  }

  .arrow.down {
    transform: rotate(225deg);
  }

  .arrow.up {
    transform: rotate(45deg);
  }

  .alert {
    padding: 10px;
    border-radius: 10px;
    color: var(--white);
  }

  .alert.alert-error {
    background-color: var(--red);
  }

@media (max-width: 1024px) {
    
}

/* tablet */
@media (max-width: 768px) {
    .row > div {
        width: 100%;
    }

    .button-menu{
        display: flex;
        justify-content: flex-end;
        align-items: stretch;
      }
}

/* mobile */
@media (max-width: 500px) {
    .paginator-menu > div {
        width: 30px;
        height: 30px;
    }

    .paginator-menu > div span {
        line-height: 2;
    }
}