html {
scroll-behavior: smooth;
}
  body {
    padding: 0;
    margin: 0;
    background-color: #000;
    color: #fff;
    font-family: 'Raleway', sans-serif;
  }
  body::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
}
body::-webkit-scrollbar-thumb {
background-color: #000000;
}

.agendalink {
    margin: 3rem 0;
}

.servicios {
    background-color: #fbfbfb;
}

.servicios h2{
  color: #000;
  font-size: 3rem;
}

.servicios h2::after{
    content: "";
    height: 5px;
    width: 45px;
    background-color: #000;
    position: absolute;
    margin-top: 54px;
    margin-left: -48px;
}

.rowtarjetas{
  margin-top: 2rem;
}


.tarjeta-servicios {
    background-color: #fff;
    border-radius: 15px;
    padding: 19px;
    box-shadow: 0px 5px 7px 0px #33333340;
    color: #000;
    width: 300px;
}

.tarjeta-servicios img{
    width: 118px;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-radius: 75px;
}

.separadortarj {
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 50px;
    height: 5px;
    background-color: #000;
    margin-left: auto;
    margin-right: auto;
}

.tarjeta-servicios .descripcion h4 {
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 1rem;
    color: #3e3d3d;
}

/* .tarjeta-servicios .descripcion h4::after {
  content: "";
  height: 5px;
  width: 45px;
  background-color: #000;
  position: absolute;
  margin-top: 54px;
  margin-left: -48px;
} */





  input.item-form, textarea.item-form {
      width: 100%;
      -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
      -moz-box-sizing: border-box;    /* Firefox, other Gecko */
      box-sizing: border-box;         /* Opera/IE 8+ */
    }
  .overlayvideo {
    background-color: #0000008f;
    position: absolute;
    height: 100vh;
    width: 100%;
    color: #fff;
    display: flex;
    object-position: center;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
  }
  img.logooverlay {
    width: 300px;
    display: flex;
    height: 300px;
  }
  .overlayvideo h3{
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
  }
  .fondovideo {
    width: 100%;
    height: 100vh;
    object-fit: cover;
  }
  .redes {
    color: #fff;
    text-align: center;
    margin-bottom: 3rem;
    margin-top: 3rem;
  }
.casabrava{
  background-color: #000;
}

.no-padding{ 
  padding: 0 !important;
}

.card-donar {
  display: flex;
  background-color: #000;
  background: linear-gradient(253deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 28%, rgba(0,0,0,1) 28%, rgba(0,0,0,1) 100%);
  background-size: 150%;
  margin-bottom: 1rem;
  color: #fff;
  align-items: center;
  transition: .4s;
}

.card-body h4{
  margin-bottom: 1rem;
}

.card-donar:hover{
  background-size: 100%;
}
.card-donar .card-footer{
  background: none;
  border: none;
  font-size: 2rem;
  transition: .2s;
}

.card-donar:hover .card-footer{
  color: #000;
}



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

.boton-pago {
  background-color: #fff;
  padding: .3rem 1rem;
  color: #000;
  font-weight: bold;
  text-transform: uppercase;
  /* background: linear-gradient(0deg, rgba(255,119,3,1) 0%, rgba(255,52,4,1) 100%); */
}


.head-donar {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

.cont-logos-chicos{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.logochico {
  width: 200px;
  /* margin: 0 auto; */
}

img.logomini {
  width: 100px;
}

ul.horarios{
  list-style: none;
  padding-left: 0;
  text-transform: uppercase;
}

  .infocb{
    color: #fff;
    width: 80%;
  }

  .infoagua h1 {
      margin-bottom: 3rem;
  }

  .redes ul {
    padding-left: 0;
  }
  .redes ul li {
    display: inline;
    margin-left: 20px;
    margin-right: 20px;
  }
  .videochico {
    text-align: center;
  }

  /* .col-6{
    width: 50%;
  } */
  .contenedor-mitades{
    width: 100%;
    display: flex;
  }
  .teamimgs{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .flexcc{
    display: flex;
    object-position: center;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
  }
  #equipo{
    background-color: #fbfbfb;
  }
  .infoagua{
    color: #333;
    width: 80%;
  }
  .redesico{
    filter: brightness(0) invert(1);
    width: 50px;
  }
  .contacto{
    height: 100vh;
  }
  /* .mapa{
    height: 100vh;
  } */
  .agendalink a{
    color: #fff;
    text-decoration: none;
    letter-spacing: 3px;
    transition: .4s;
    font-size: 2rem;
  }
  .agendalink a:hover{
    letter-spacing: 2px;
    color: #e2e2e2;
  }
  .formulario{
    width: 75%;
  }
  .segmento-form{
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .item-form {
      max-width: 100%;
      background-color: #000;
      border: 2px solid #fff;
      padding: 10px 8px;
      font-weight: 700;
      border-radius: 3px;
      width: 100%;
      color: #fff;
      transition: .4s;
  }
  ::-webkit-input-placeholder { /* Edge */
    color: #fefefe;
  }

  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #fefefe;
  }
  .item-form:focus {
    background-color: #fff;
    color: #333;
    border-color: #fff;
    outline: #fff;
  }
  .formulario h2 {
    font-size: 3rem;
    text-align: right;
    letter-spacing: 2px;
  }
  .formulario h2::after{
      content: "";
      height: 5px;
      width: 45px;
      background-color: #fff;
      position: absolute;
      margin-top: 54px;
      margin-left: -48px;
  }

.cienvw{
  width: 100%;
}

.cienvhmobil{
  height: 100vh;
}



.formulario h2 {
    margin-bottom: 3rem;
}

.frame-video{
  margin-bottom: 1rem;
}
  /* .infoagua h1::after{
      content: "";
      height: 5px;
      width: 45px;
      background-color: #000;
      position: absolute;
      margin-top: 54px;
      margin-left: -48px;
  } */
  ::placeholder {
    color: #fefefe;
  }

  .tit-site{
    font-family: 'Archivo Black', sans-serif;
    color: #f3b224;
    background-color: #f33088;
    padding: .5rem 1rem;
    margin-top: 1rem;
  }

  .mb-1r{
    margin-bottom: 2rem;
  }

  .cols{
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .tarjeta-rifa {
    display: flex;
    align-items: center;
    background-color: #f33088;
    margin-bottom: 1rem;
    padding: 1rem;
    border: 2px solid #f3b224;
    justify-content: space-between;
    transition: .2s;
  }

  .tarjeta-rifa:hover{
    box-shadow: 0px 0px 9px 0px #f3b224;
  }

  .tarjeta-rifa span{
    font-weight: bold;
    font-size: 1.5rem;
  }

  .rifa {
    background-color: #f33088;
    color: #ffffff;
    padding: .5rem 1rem;
    font-weight: bold;
    border: 2px solid black;
    width: 100%;
    text-align: center;
    font-size: 1.4rem;
  }

  .rifa:active {
    animation: blinker .2s linear infinite;
  }
  
  @keyframes blinker {
    50% {
      opacity: 0.5;
    }
  }

  .col-12.seccion-rifas {
    padding: 0;
    display: flex;
    flex-direction: column;
    margin-bottom: 3rem;
    align-items: flex-start;
    justify-content: center;
  }

  .tit-seccion{
    font-family: 'Archivo Black', sans-serif;
    color: #f3b224;
    background-color: #f33088;
    margin-bottom: 2rem;
    width: max-content;
    padding: .5rem 3rem .5rem 1rem;
  }

  .subtit-seccion{
    color: #f3b224;
    
  }

  .head-seccion{
    margin-bottom: 2rem;
  }
  .contenedor-rifas{
    background-color: #171717;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .contenedor-rifas-dark{
    background-color: #000;
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .card-rifa {
    background-color: white;
    color: black;
    transition: .4s;
    position: relative;
    border-radius: 2px;
  }

  .card-rifa:hover{
    background-color: #f33088;
    color: #f3b224;
  }

  .card-rifa:hover span.numero{
    color: #f3b224;
    top: -40px;
    text-shadow: 10px 16px 8px #3333338a;
    
  }

  .card-rifa span.numero {
    position: absolute;
    color: #f33088;
    right: 10px;
    font-weight: bold;
    font-size: 12rem;
    top: 0px;
    line-height: 6rem;
    transition: .4s;
    font-family: 'Montserrat', sans-serif;
    text-shadow: 0px 0px 0px #333;
  } 

  .card-body-rifa {
    padding: 1rem;
  }

  .card-rifa img{
    max-width: 100%;
    padding: 1rem;
  }
  .video-rifa iframe{
    width: 100%;
    height: auto;
  }

  .tarjeta-rifa button.mercadopago-button {
    background-color: #f3b224 !important;
    color: black !important;
    border-radius: 0 !important;
    font-weight: bold;
  }

  .tarjeta-rifa button.mercadopago-button:hover {
    box-shadow: 2px 2px black;
  }


  @media (min-width: 1200px) {
    .card-donar {
      background: linear-gradient(253deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 20%, rgba(0,0,0,1) 20%, rgba(0,0,0,1) 100%);
      background-size: 130%;
    }
    .video-rifa iframe{
      width: 560px;
      height: 315px;
    }
  }

  @media (min-width: 576px) {
    .paddtopbot {
      padding: 10rem;
    }
    .video-rifa iframe{
      width: 560px;
      height: 315px;
    }
    .cols{
      display: flex;
      flex-direction: column;
      width: 90%;
      
    }
  }

  @media (min-width: 320px) and (max-width: 480px) {
    .infodonar{
      font-size: 40px;
    }
    .reverse-mobile{
      flex-direction: column-reverse;
    }
  }