html, body{
                font-size: 15px;
                font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
                color:#ece0e0;
                background-color: #080505;
            }

            header{
                display:flex;
                position: fixed;
                top: 0%;
                height: 5%;
                width: 100%;
                font-family: Xtreem;
                font-size: 15px;
                background-color:#640F00;
                color:#E7D7D7;
                z-index: 9999;
            }

            .menu{
              margin-left:auto;
              margin-top: 10px;
            }

            h1{
                font-size: 30px;
                font-family:Georgia, Times, 'Times New Roman', Times, serif;
            }

            h2{
                font-size: 20px;
                font-family:Georgia, Times, 'Times New Roman', Times, serif;
            }

            #straykids{
                padding: 5px;
            }

            .unidades .grupo2 img, .unidades .grupo1{
                float: left;
            }

            .unidades .grupo1 img, .unidades .grupo2{
                float: right;
            }

            .unidades img{
                height:120px;
                width: 120px;
                padding: 10px;
            }

            #members {
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              gap: 20px;
            }
            
            footer{
                background-color:#640F00;
                font-family: Verdana;
                text-align: left;
                font-size: 10px;
                color: #E7D7D7;
                clear: both;

                position: fixed;
                bottom: 0%;
                height: 5%;
                width: 100%;
                z-index: 9999;

                display:flex;
                justify-content:center;
            }

            a{
                color:rgb(231, 215, 215);
                text-decoration: none;
            }

            p{
                text-align: justify;
            }




            
            /*acordeon*/

            /* Style the buttons that are used to open and close the accordion panel */
            .accordion {
              background-color: rgb(123, 7, 7);
              color:#E7D7D7;
              cursor: pointer;
              padding: 18px;
              width: 100%;
              text-align: left;
              border: none;
              outline: none;
              transition: 0.4s;
            }

            /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
            .active, .accordion:hover {
              background-color: rgba(168, 75, 62, 0.829);
            }

            /* Style the accordion panel. Note: hidden by default */
            .panel {
                padding: 0 18px;
                background-color: 080505;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.2s ease-out;
            }



            /*Timeline*/

            /* The actual timeline (the vertical ruler) */
            .timeline {
              position: relative;
              max-width: 1200px;
              margin: 0 auto;
            }

            .timeline *{
                box-sizing: border-box;
            }

            /* The actual timeline (the vertical ruler) */
            .timeline::after {
              content: '';
              position: absolute;
              width: 6px;
              background-color: rgb(132, 20, 20);
              top: 0;
              bottom: 0;
              left: 50%;
              margin-left: -3px;
            }

            /* Container around content */
            .container {
              padding: 10px 40px;
              position: relative;
              background-color: inherit;
              width: 50%;
            }

            /* The circles on the timeline */
            .container::after {
              content: '';
              position: absolute;
              width: 25px;
              height: 25px;
              right: -17px;
              background-color: white;
              border: 4px solid rgb(123, 7, 7);
              top: 15px;
              border-radius: 50%;
              z-index: 1;
            }

            /* Place the container to the left */
            .left {
              left: 0;
            }

            /* Place the container to the right */
            .right {
              left: 50%;
            }

            /* Add arrows to the left container (pointing right) */
            .left::before {
              content: " ";
              height: 0;
              position: absolute;
              top: 22px;
              width: 0;
              z-index: 1;
              right: 30px;
              border: medium solid white;
              border-width: 10px 0 10px 10px;
              border-color: transparent transparent transparent white;
            }

            /* Add arrows to the right container (pointing left) */
            .right::before {
              content: " ";
              height: 0;
              position: absolute;
              top: 22px;
              width: 0;
              z-index: 1;
              left: 30px;
              border: medium solid white;
              border-width: 10px 10px 10px 0;
              border-color: transparent white transparent transparent;
            }

            /* Fix the circle for containers on the right side */
            .right::after {
              left: -16px;
            }

            /* The actual content */
            .content {
              padding: 20px 30px;
              background-color: rgb(123, 7, 7);
              position: relative;
              border-radius: 6px;
            }

            /* Media queries - Responsive timeline on screens less than 600px wide */
            @media screen and (max-width: 600px) {
            /* Place the timelime to the left */
              .timeline::after {
                left: 31px;
              }
          
            /* Full-width containers */
              .container {
                width: 100%;
                padding-left: 70px;
                padding-right: 25px;
              }
          
            /* Make sure that all arrows are pointing leftwards */
              .container::before {
                left: 60px;
                border: medium solid white;
                border-width: 10px 10px 10px 0;
                border-color: transparent white transparent transparent;
              }
          
            /* Make sure all circles are at the same spot */
              .left::after, .right::after {
                left: 15px;
              }
          
            /* Make all right containers behave like the left ones */
              .right {
                left: 0%;
              }
            }



            /*Image Overlay Tittle*/
            * {box-sizing: border-box}

            /* Container needed to position the overlay. Adjust the width as needed */
            .members {
              position: relative;
              width: 50%;
              max-width: 150px;
            }

            /* Make the image to responsive */
            .image {
              display: block;
              width: 150px;
              height: auto;
              padding-left: 15px;
            }

            /* The overlay effect - lays on top of the container and over the image */
            .overlay {
              position: absolute;
              bottom: 0;
              background: rgb(0, 0, 0);
              background: rgba(0, 0, 0, 0.5); /* Black see-through */
              color: #f1f1f1;
              width: 100%;
              transition: .5s ease;
              opacity:0;
              color: white;
              font-size: 20px;
              padding: 20px;
              text-align: center;
            }

            /* When you mouse over the container, fade in the overlay title */
            .members:hover .overlay {
              opacity: 1;
            }



            /*Slide Show Container*/

            * {box-sizing:border-box}

            .slideshow-container {
              max-width: 300px;
              position: relative;
              padding-left: 10px;
            }
            
            /* Hide the images by default */
            .mySlides {
              display: none;
            }
            
            /* Next & previous buttons */
            .prev, .next {
              cursor: pointer;
              position: absolute;
              top: 50%;
              width: auto;
              margin-top: -22px;
              padding: 16px;
              color: white;
              font-weight: bold;
              font-size: 18px;
              transition: 0.6s ease;
              border-radius: 0 3px 3px 0;
              user-select: none;
            }
            
            /* Position the "next button" to the right */
            .next {
              right: 0;
              border-radius: 3px 0 0 3px;
            }
            
            /* On hover, add a black background color with a little bit see-through */
            .prev:hover, .next:hover {
              background-color: rgba(0,0,0,0.8);
            }
            
            /* Caption text */
            .text {
              color: #f2f2f2;
              font-size: 15px;
              padding: 8px 12px;
              position: absolute;
              bottom: 8px;
              width: 100%;
              text-align: center;
            }
            
            /* Number text (1/3 etc) */
            .numbertext {
              color: #f2f2f2;
              font-size: 12px;
              padding: 8px 12px;
              position: absolute;
              top: 0;
            }
            
            .active, .dot:hover {
              background-color: #717171;
            }
            
            /* Fading animation */
            .fade {
              animation-name: fade;
              animation-duration: 1.5s;
            }
            
            @keyframes fade {
              from {opacity: .4}
              to {opacity: 1}
            }


            /*Scroll Pics*/
            div.scrollpics{
            background-color: #333;
            overflow: auto;
            white-space: nowrap;
          }
          
          div.scrollpics a {
            display: inline-block;
            color: white;
            text-align: center;
            padding: 14px;
            text-decoration: none;
          }
          
          div.scrollpics a:hover {
            background-color: #777;
          }



          /*Log In Form*/

          /* Full-width input fields */
          input[type=text], input[type=password] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            box-sizing: border-box;
          }

          /* Set a style for all buttons */
          button {
            background-color: #aa4474;
            color: white;
            width:100%;
            margin: 8px 10px;
            border: none;
            cursor: pointer;
          }

          button:hover {
            opacity: 0.8;
          }

          /* Extra styles for the cancel button */
          .cancelbtn {
            width: auto;
            padding: 10px 18px;
            background-color: #9d2219;
          }

          .logContainer {
            padding: 16px;
          }

          span.psw {
            float: right;
            padding-top: 16px;
          }

          /* The Modal (background) */
          .modal {
            display: none; /* 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 */
            padding-top: 60px;
          }

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

          /* The Close Button (x) */
          .close {
            position: absolute;
            right: 25px;
            top: 0;
            color: #000;
            font-size: 35px;
            font-weight: bold;
          }

          .close:hover,
          .close:focus {
            color: #aa4474;
            cursor: pointer;
          }

          /* Add Zoom Animation */
          .animate {
            -webkit-animation: animatezoom 0.6s;
            animation: animatezoom 0.6s
          }

          @-webkit-keyframes animatezoom {
            from {-webkit-transform: scale(0)} 
            to {-webkit-transform: scale(1)}
          }

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

          /* Change styles for span and cancel button on extra small screens */
          @media screen and (max-width: 300px) {
            span.psw {
               display: block;
               float: none;
            }
            .cancelbtn {
               width: 100%;
            }
          }