/*Interface*/
  .panel .panel-body {padding: 0;}
  .news-image {
      background-image: url(../img/background.jpg);
      margin-top: -130px;}
  .security-image {
      background-image: url(../img/background-seguridad.jpg);
      margin-top: 0px;
    }

  .caption-title { margin-bottom: 0; }
  .caption-title .logo {
    display: inline-block;
    margin-right: 0rem;
    vertical-align: middle;
    margin-top: -5px;

    border: 14px solid transparent;
    border-color: transparent rgba(0,0,0,.15) rgba(0,0,0,.3);
    background-color: #00acac;
    width: 28px;
    height: 28px;
    font-size: 0;
    margin-right: 10px;
    border-radius: 6px;
  }

/*Slider*/
  .slider-container {
    background: linear-gradient(
      149deg,
      rgb(247, 0, 255) 0%,
      rgb(255, 145, 0) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .slider {
    width: 100%;
    max-width: 600px;
    height: 400px;
    margin: 20px;
    text-align: center;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
  }

  .slides {
    display: flex;
    overflow-x: scroll;
    position: relative;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
  }

  .slide:nth-of-type(even) {
    background-color: rgb(250, 246, 212);
  }

  .slide {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 100%;
    height: 400px;
    scroll-snap-align: center;
    margin-right: 0px;
    box-sizing: border-box;
    background: white;
    transform-origin: center center;
    transform: scale(1);
  }

  .slide__text {
    font-size: 40px;
    font-weight: bold;
    font-family: sans-serif;
  }

  .slide a {
    background: none;
    border: none;
  }

  a.slide__prev,
  .slider::before {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    left: 5%;
  }

  a.slide__next,
  .slider::after {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    right: 5%;
  }

  .slider::before,
  .slider::after,
  .slide__prev,
  .slide__next {
    position: absolute;
    top: 48%;
    width: 35px;
    height: 35px;
    border: solid black;
    border-width: 0 4px 4px 0;
    padding: 3px;
    box-sizing: border-box;
  }

  .slider::before,
  .slider::after {
    content: "";
    z-index: 1;
    background: none;
    pointer-events: none;
  }

  .slider__nav {
    box-sizing: border-box;
    position: absolute;
    bottom: 5%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    text-align: center;
  }

  .slider__navlink {
    display: inline-block;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: black;
    margin: 0 10px 0 10px;
  }

/*Hide/show*/
  .spoiler {
      display: none;
  }

  .trigger.close {
      display: none;
  }

  .trigger.open:target {
      display: none;
  }

  .trigger.open:target + .trigger.close {
      display: inline;
  }

  .trigger.open:target + .trigger.close {    
      display: block;
  }

/* Modal */
  .modal {
    display: hidden; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }

  /* Modal Content/Box */
    .modalContent {
      background-color: #fefefe;
      margin: 15% auto; /* 15% from the top and centered */
      padding: 20px;
      border: 1px solid #888;
      width: 80%; /* Could be more or less, depending on screen size */

      position: relative;
      animation: animatetop 0.8s;
      box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 19%);
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
      animation-name: animatetop;
      animation-duration: 0.4s
    }
      /* Add Animation */
        @keyframes animatetop {
          from {top: -300px; opacity: 0}
          to {top: 0; opacity: 1}
        }

    .modalContent header {
      padding: 2px 16px;
      background-color: #00acac;
      color: white;
      position: relative;
      margin-bottom: 1rem;
    }
      .modalContent header h2 {
        line-height: 1.5;
        margin: 0;
      }
      .modalContent p {
        font-size: larger;
        margin: 0;}
      .modalContent p:last-child { font-size: small;}

    /* The Close Button */
      .btnclose {
        color: #fff;
        font-size: 28px;
        font-weight: bold;
        right: 6px;
        top: 6px;
        position: absolute;
        padding: 0 8px;
        line-height: 1;
      }

      .btnclose:hover,
      .btnclose:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
      }


// Media Queries

  @media only screen and (max-width:768px) {

    .modalContent { width: 40% !important;}
  }

  @media only screen and (min-width:900px) {

    .modalContent { width: 35% !important;}
  }