/*
 * file_name = inicio__stylesheet.css
 *
 * file_type = CSS stylesheet
 *
 * description = CSS styles used by the main page/welcome page of the Debene.com website. 
 *                
 * descripción = Hoja de estilo usada para la página principal/de bienvenidas del sitio web Debene.com
 * 
 */

/*////////////////////////////////////////////////////////////////////////
//                                                                      //
//                       HOME PAGE                                      //
//                     PAGINA [INICIO]                                  //
//                                                                      //
////////////////////////////////////////////////////////////////////////*/



/*  CSS Styles for automatic slideshow  */
/*  Estilos CSS para presentación automatizada de imagenes deslizantes */


/* Slideshow container */
.slideshow-container 
{
  background: lavender   ;
  /* important: overflow property hides any part of the slide that is outside the frame of view */  
  overflow: hidden         ;
  position: relative       ;
     width: 100%           ;
     min-height: 27.5vw;
}


.slideDiv
{
  margin: 0rem      ;
   width: 100%      ;
}


/* Note: The height of the source images needs to be 267px */  
img.slideImage 
{
  vertical-align: top   ;
           width: 100%  ;
}


/* 
  CSS class used to make slide images invisible
  Clase CSS usada para volver invisibles las imagenes de la presentación
*/
div.slideDivHidden
{
  display: none;  
  transition: all 2s;
}      


.slideDivVisible
{
  /* display: block; */

  /* time it takes for slide to move from its initial to its final position */
  animation-duration: 2.0s;    

  /* used to maintain animation final state, otherwise the image
  goes back to its initial state (i.e. position, opacity, etc.)*/
  animation-fill-mode: forwards; 

  /* slide movement is non-linear, i.e. quick in the beginning and slow at the end */  
  animation-timing-function: ease-out;

  animation-name: slideLeftToRightAnimation; 
  
  /* slide images starts 200 pixels off-screen to the left */
  left: -10rem ; 

  /* necessary for the slide to be displayed in a non-default position
  (i.e. slightly off-screen) */ 
  position: relative ; 
}


/* animation keyframes for newer browsers */
@keyframes slideLeftToRightAnimation
{
  /* slide image 150 pixels from left to right */
  from {left: -10rem    ;}
    to {left: 0px       ;}

  /* as the slide moves into position make it less transparent, 
  i.e. render it totally opaque */  
     80% {opacity: 0.80   ;}
    100% {opacity: 1.00   ;}
}




/* Next & previous buttons to advance to next image or go back to the preceeding one */
/* Botones para avanzar o retroceder las imagenes */
a.prev , 
a.next 
{
  background-color: rgba(255,255,255,0.35)   ;
     border-radius: 0rem 0.3rem 0.3rem 0rem    ;
             color: #BBBBBB                  ;
            cursor: pointer                    ;
         font-size: 2.5rem                     ;
       font-weight: bold                       ;
           padding: 0.5rem 1rem                ;
          position: absolute                   ;
               top: 40%                        ;
        transition: 0.4s ease                  ;
       user-select: none                       ;
             width: auto                       ;
}


/* Position the "next button" horizontally on the right edge of the slide */
a.next 
{
  border-radius: 0px 0.75rem 0.75rem 0px    ;
          right: 0.2rem                     ;
}


/* Position the "previous button" horizontally on the left edge of the slide */
a.prev
{
  border-radius: 0.75rem 0rem 0rem 0.75rem   ;
           left: 0.4rem                      ;
}


/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover 
{
  background: rgba(0,0,0,0.5)   ;
       color: white             ;
}


/* Caption text */
.text 
{
       color: #f2f2f2        ;
   font-size: 1rem             ;
     padding: 0.5rem 0.75rem   ;
    position: absolute         ;
      bottom: 0.5rem           ;
       width: 100%             ;
  text-align: center           ;
}


/* Number text (1/3 etc) */
.numbertext 
{
      color: #f2f2f2        ;
  font-size: 0.75rem          ;
    padding: 0.5rem 0.75rem   ;
   position: absolute         ;
        top: 0rem             ;
}


div.dot_container
{
  /*background-color: green     ; */
            bottom: 0.20rem          ;
           display: inline-block     ;
          position: absolute         ; 
        text-align: center           ; 
              left: 45%              ;
}


/* The dots/bullets/indicators */
.dot 
{
            height: calc(0.15rem + 1vw )         ;
             width: calc(0.15rem + 1vw )         ;
            margin: 0rem 0.15rem                 ;
  background-color: #bbb                       ;
     border-radius: 50%                          ;
           display: inline-block                 ;
        transition: background-color 0.6s ease   ;
}


.active 
{
  background-color: #717171;
}


div.division_buttons_container
{
       background: linear-gradient(to bottom, #7A94D2 20%, lavender 100%);
          display: flex               ; 
        flex-wrap: wrap               ;
           margin: 0px 0px 1rem 0px   ;
  justify-content: center             ;
}


/*
   Buttons at bottom of page for Medical and IT division
   Botones al fondo de la página para las división Médica y la de IT
*/     
a.division_button
{
           border: none                  ;
            color: #6F6F6F             ;
          display: inline-block          ;
             flex: 0 1 40%               ;
        font-size: calc(16px + 0.6vw)    ;
      font-weight: bold                  ;
           /* height: 3.5rem                ; */
      line-height: 3.5rem                ;
          padding: 2rem                  ;
  text-decoration: none                  ;
       transition: all 0.1s              ;
      /* prevent text from wrapping down to the next line; 
         keep all the text in one line */  
      white-space: nowrap                ;
}


a.division_button:focus   , 
a.division_button:hover 
{ 
     background: #b8bc86   ;
  border-radius: 7px         ;
     box-shadow: inset 0px 0px 20px 10px rgba(148, 85, 56, 0.4);
          color: #585858   ;
}