/*SLIDER SERVICIOS*/

#sliderServ { background-image: url(../img/back-cybersecurity.webp); background-size: cover; display: flex; justify-content: space-evenly; align-items: center; height: 17rem; text-align: center; }
.sliderTxt { padding: 2rem 1rem; }
.sliderTxt h4 { color: white; padding: 0 0 1rem; font-weight: 500; line-height: 1.3rem; }
#slider li { color: #c8c8c8; font-size: 0.7rem; line-height: 1.1rem; }
#cont_slider { height: 6rem;}

.cardServS { height: 13rem; -webkit-transition: all 0.2s; transition: all 0.2s; position: relative; }
.InCardServS { width: 13rem; height: inherit; background: rgba(255,255,255,.05);
  -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.25);
          box-shadow: 0 0 10px rgba(0,0,0,0.25);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px); border-radius: 8px; }
.circServS { width: 50px; height: 50px; background: radial-gradient(#89f9ff, #00c6ff); border-radius: 50%; position: absolute; animation: move-up6 2s ease-in infinite alternate-reverse; }
.circServS:nth-child(1) { top: -11px; left: -11px; }
.circServS:nth-child(2) { bottom: -11px; right: -11px;
  -webkit-animation-name: move-down1;
          animation-name: move-down1; }
@-webkit-keyframes move-up6 {
  to {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
}
@keyframes move-up6 {
  to {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }
}
@-webkit-keyframes move-down1 {
  to {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
}
@keyframes move-down1 {
  to {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
}

/* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */

/* Small screens 280px */
@media screen and (min-width: 17.5em)
{
  #cont_slider { height: 5rem;}
  .sliderTxt h4 { font-size: 1.1rem; }
  .InCardServS { width: 16rem; }
  .circServS:nth-child(1) { left: 0rem; }
  .circServS:nth-child(2) { right: 0rem; }
  .cardServS { height: 10rem; }
  #slider li { font-size: 0.8rem; }
  .cardServS:hover {
  -webkit-transform: scale(1.04) rotate(1deg);
      -ms-transform: scale(1.04) rotate(1deg);
          transform: scale(1.04) rotate(1deg); }
}

/* Small screens 320px */
@media screen and (min-width: 20em)
{
  .cardServS { height: 11rem; }
}

/* Small screens 360px */
@media screen and (min-width: 22.5em)
{
  .circServS:nth-child(1) { left: -1rem; }
  .circServS:nth-child(2) { right: -1rem; }
}

/* Small screens 393px */
@media screen and (min-width: 24.5625em)
{
  .InCardServS { width: 17rem; }
}

/* Small screens 411px */
@media screen and (min-width: 25.6875em)
{
  .InCardServS { width: 18rem; }
}

/* Small screens 540px */
@media screen and (min-width: 33.75em)
{
  .cardServS { height: 9rem; }
  .InCardServS { width: 24rem; }
  #cont_slider { padding: 0 1rem; }
}

/* Medium screens 600px */
@media screen and (min-width: 37.5em)
{
  #sliderServ { background-position-y: -22rem; height: 23rem; }
  .InCardServS { width: 23rem; }
  #cont_slider { padding: 0; }
  .cardServS { height: 16rem; }
  .sliderTxt h4 { font-size: 1.7rem; padding: 0 0 2rem; line-height: 2.3rem; }
  #slider li { font-size: 1.2rem; line-height: 1.5rem; }
}

/* Medium screens 654px */
@media screen and (min-width: 40.875em)
{
  .InCardServS { width: 29rem; }
  .cardServS { height: 13rem; }
  #cont_slider { padding: 0 1rem; }
}

/* Medium screens 712px */
@media screen and (min-width: 44.5em)
{
  #sliderServ { background-position-y: -28rem; height: 22rem; }
  .InCardServS { width: 32rem; }
  #cont_slider { padding: 0 3rem; }
  #slider li { line-height: 1.7rem; }
}

/* Medium screens 768px */
@media screen and (min-width: 48em)
{
  .cardServS { height: 11rem; }
  #sliderServ { background-position-y: -34rem; height: 20rem; }
  .InCardServS { width: 39rem; }
  #slider li { font-size: 1.2rem; line-height: 1.5rem; }
}

/* Medium screens 850px */
@media screen and (min-width: 53.125em)
{
  #sliderServ { background-position-y: -38rem; }  
}

/* Medium screens 912px */
@media screen and (min-width: 57em)
{
  .cardServS { height: 10rem; }
  #sliderServ { background-position-y: -43rem; }
  .sliderTxt h4 { font-size: 1.2rem; line-height: 1.4rem; }
  #slider li { font-size: 1rem; }
}

/* Medium screens 1000px */
@media screen and (min-width: 62.5em)
{
  #sliderServ { background-position-y: -47rem; }
}

/* Large screens 1024px */
@media screen and (min-width: 64em)
{
  #cont_slider { padding: 0 5rem; }
  #sliderServ { height: 18rem; }
  .InCardServS { width: 35rem; }
  .sliderTxt h4 { font-size: 1.2rem; }
  #slider li { font-size: 0.9rem; line-height: 1.3rem; }
}

/* Large screens 1045px */
@media screen and (min-width: 64em)
{
  #sliderServ { background-position-y: -50rem; }
}

/* Large screens 1100px */
@media screen and (min-width: 68.75em)
{
  #sliderServ { background-position-y: -53rem; }
}

/* Large screens 1150px */
@media screen and (min-width: 71.875em)
{
  #sliderServ { background-position-y: -57rem; }
}

/* Large screens 1200px */
@media screen and (min-width: 75em)
{
  #sliderServ { background-position-y: -60rem; }
}

/* Large screens 1225px */
@media screen and (min-width: 76.5625em)
{
  #sliderServ { background-position-y: -62rem; }
}

/* Large screens 1250px */
@media screen and (min-width: 78.125em)
{
  #sliderServ { background-position-y: -65rem; }
}

/* Large screens 1280px */
@media screen and (min-width: 80em)
{
  .InCardServS { width: inherit; }
  #sliderServ { background-position-y: -23rem; }
  #cont_slider { padding: 0 3.2rem; }
  .cardServS { width: 36rem; height: 10rem; }
  .sliderTxt { padding: 2rem 2rem 0; }
  .sliderTxt h4 { padding: 0 0 1rem; }
  #slider li { font-size: 1.1rem; }
  .circServS { width: 100px; height: 100px; }
  .circServS:nth-child(1) { top: -25px; left: -25px; }
  .circServS:nth-child(2) { bottom: -25px; right: -25px; }
}

/* Large screens 1450px */
@media screen and (min-width: 90.625em)
{
  #sliderServ { background-position-y: -25rem; }
}

/* Large screens 1500px */
@media screen and (min-width: 93.75em)
{
  #sliderServ { background-position-y: -27rem; }
}

/* Large screens 1600px */
@media screen and (min-width: 99.964331em)
{
  #sliderServ { background-position-y: -29rem; }
}

/* Large screens 1650px */
@media screen and (min-width: 103.088216em)
{
  #sliderServ { background-position-y: -31rem; }
}

/* Large screens 1750px */
@media screen and (min-width: 109.375em)
{
  #sliderServ { background-position-y: -33rem; }
  .sliderTxt h4 { font-size: 1.6rem; padding: 0 0 2rem; }
}

/* Large screens 1850px */
@media screen and (min-width: 115.625em)
{
  #sliderServ { background-position-y: -36rem; }
}