@charset "UTF-8";
/*!
* Título de la Página (https://pagina.com/)
* Copyright 2021-2022 C2 Design Studio
* Todos los derechos reservados - All Rights Reserved (https://c2-ds.com)
*/
/*!
 * Bootstrap v5.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

/*  tipografía */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;500&display=swap');

 body {
    line-height: 1.2;
    font-family: 'Lato', sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
    color: #5c5c77;
    background-color: #ffffff;
  }
  
  p, .paragraph {
    font-weight: 400;
    color: #ffffff;
    font-size: 20px;
    line-height: 1.9;
    font-family: 'Lato', sans-serif;
  }

   a {
    color: #faa525;
    font-size: 20px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
  }

  a:hover {
    color: #fc1a15;
    font-size: 20px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
  }
  
  h1, h2, h3, h4 {
    color: #000;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    line-height: 1.2;
  }

  h1, .h1 {
    font-size: 40px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #faa525 !important;
    line-height: 1.2em;
    text-align: left;
  }
  
  h2, .h2 {
    font-size: 40px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    color: #fff;
    line-height: 1.5em;
  }

  h3, .h3 {
    font-size: 30px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #f58020 !important;
    line-height: 1.2em;
    text-align: left;
  }  

  h5 {
    color: #000;
    font-size: 40px;
    font-family: 'Lato', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
  }

  h6 {
    color: #666;
    font-size: 25px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1;
  }

  /* Small devices (landscape phones, 576px and up) */
  @media (max-width: 575px) {
    p, .p {
      font-size: 20px;
    }
  }
  
  /* Small devices (landscape phones, 576px and up) */
  @media (max-width: 575px) {
    h1, .h1 {
      font-size: 28px;
    }
  }
  
  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) { 
    h1, .h1 {
      font-size: 30px;
    }
  }

  /* Medium devices (tablets, 961px and up) */
  @media (min-width: 961px) { 
    h1, .h1 {
      font-size: 35px;
    }
  }

  h2, .h2 {
    font-size: 40px;
    font-family: 'Lato', sans-serif;
    font-weight: 800;
  }
  
 /* Small devices (landscape phones, 576px and up) */
  @media (max-width: 575px) {
    h2, .h2 {
      font-size: 22px;
    }
  }

  /* Medium devices (tablets, 768px and up) */
  @media (min-width: 768px) { 
    h2, .h2 {
      font-size: 40px;
    }
  }
  
  h3, .h3 {
    font-size: 25px;
  }
  
  @media (max-width: 575px) {
    h3, .h3 {
      font-size: 20px;
    }
  }
  
  h4, .h4 {
    font-size: 20px;
  }
  
  @media (max-width: 575px) {
    h4, .h4 {
      font-size: 18px;
    }
  }
  
  h5, .h5 {
    font-size: 35px;
  }
  
  @media (max-width: 575px) {
    h5, .h5 {
      font-size: 25px;
    }
  }
  
  h6, .h6 {
    font-size: 25px;
  }
  
  @media (max-width: 575px) {
    h6, .h6 {
      font-size: 20px;
    }
  }

.text-secondary {
  font-family: 'Open Sans', sans-serif;
  font-weight: 500;
}

.text-orange {
  color: #faa525 !important;
}

.text-red {
  color: #ee3923 !important;
}

.text-gris {
  color: #a0a2a5 !important;
}

.text-attico {
  color: #0f355a !important;
}

a h2:hover {
  color: #fc1a15 !important;
}
/*  Overlay */

  .bg-primary {
    background: #1a171b !important;
  }
  
  .bg-secondary {
    background: #2d2d2d !important;
  }

  .bg-negro {
    background: #0d0802 !important;
  }

  .bg-rojo {
    background: #fc1a15 !important;
  }

  .bg-attico {
    background: #0f355a !important;
  }

  .bg-image {
    background-image: url("");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    background-repeat: repeat;
  }

  .img-logo {
    max-width: 50%;
    height: auto;
  }

  .img-logo-ralfo {
    max-width: 30%;
    height: auto;
  }

  @media only screen and (max-width: 768px) {
  
    .img-logo {
      max-width: 100%;
      height: auto;
    }
  }
  
  @media only screen and (max-width: 450px) {
  
    .img-logo {
      max-width: 100%;
      height: auto;
    }
  
  }

  @media only screen and (max-width: 768px) {
  
    .img-logo-ralfo {
      max-width: 70% !important;
      height: auto;
    }
  }
  
  @media only screen and (max-width: 961px) {
  
    .img-logo-ralfo {
      max-width: 50% !important;
      height: auto;
    }
  }

  @media only screen and (max-width: 450px) {
  
    .img-logo-ralfo {
      max-width: 100%;
      height: auto;
    }
  }

  @media only screen and (max-width: 961px) {
  
    .img-logo-ralfo {
      max-width: 75%;
      height: auto;
    }
  }

  .text-secondary {
    line-height: .5em;
    font-size: 14px;
    font-weight: 500;

  }

  .border-primary {
    border: 3px solid #ffffff !important;
  }

  @media only screen and (max-width: 768px) {
  
    .border-primary {
      border: 3px solid #ffffff !important;
    }
  }
  
  @media only screen and (max-width: 450px) {
  
    .border-primary {
      border: 2px solid #ffffff !important;
    }
  
  }

  ul {
    list-style: square inside url("/img/bullets.png");
  }
  
  /* Button style */
  .btn {
    padding: 15px 40px;
    border-radius: 0;
    border: 0;
    position: relative;
    z-index: 1;
    transition: .2s ease;
    overflow: hidden;
  }
  .btn-primary {
    background: #f51a16;
    color: #fff;
    border: 1px solid #f51a16;
    font-size: 20px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    line-height: 1.2;
  }

  .btn-primary:hover {
    background: #faa525;
    border: 1px solid #faa525;
    color: #fff;
    font-size: 20px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    line-height: 1.2;
  }

  /*  Icons */

  .fa-facebook-square {
    color: #fff!important;
    font-size: 40px;

  }

  .fa-instagram-square {
    color: #fff!important;
    font-size: 40px;

  }

  @media only screen and (max-width: 768px) {
  
    .fa-facebook-square {
      color: #fff!important;
      font-size: 32px;
  
    }

    .fa-instagram-square {
      color: #fff!important;
      font-size: 32px;
  
    }
  }
  
  @media only screen and (max-width: 450px) {
  
    .fa-facebook-square {
      color: #fff!important;
      font-size: 25px;
  
    }

    .fa-instagram-square {
      color: #fff!important;
      font-size: 25px;
  
    }
  
  }

  .float {
    position:fixed;
    width:60px;
    height:60px;
    bottom:40px;
    right:40px;
    background-color:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:30px;
    box-shadow: 2px 2px 3px #999;
    z-index:100;
  }

  a.float:hover {
    background-color: #fff!important;
    color:#25d366!important;
  }

  .my-float{
    margin-top:16px;
  }

  ul {
    list-style: square inside url("/img/bullets-trans.gif");
    line-height: 2.5em;
  }

  .border-naranja {
    border-style: solid;
    border-width: 0px 0px 0px 11px;
    border-left-color: #FAA525;
    position: relative;
  }

  .border-rojo {
    border-style: solid;
    border-width: 0px 0px 0px 11px;
    border-left-color: #ee3923;
    position: relative;
  }

  .border-blanco {
    border-style: solid;
    border-width: 0px 0px 0px 11px;
    border-left-color: #fff;
    position: relative;
  }  

  .border-attico {
    border-style: solid;
    border-width: 0px 0px 0px 11px;
    border-left-color: #0f355a;
    position: relative;
  }
  
  .lh-half {
    line-height: .5em !important;
  }