/* The above code is defining the CSS styles for the body element. */
body {
  font-size: 16px;
  background: #fff;
  font-family: "Roboto";
  overflow-x: hidden;
}

/* The above code is defining CSS styles for an element with the ID "loggin". It sets the font size to
14 pixels, the text color to white (#fff), and the font family to "Roboto". */
#loggin{
  font-size: 14px;
  color: #fff;
  font-family: "Roboto";
}

/* The above code is defining a CSS class called "tex-nav". It sets the font size to 12 pixels, the
font family to "Roboto", and the font weight to 400. */
.tex-nav {
  font-size: 12px;
  font-family: "Roboto";
  font-weight: 400;
}

/* The above code is a CSS rule that is targeting a dropdown element when it is being hovered over. It
is setting the display property of the dropdown menu to "block" and using the "!important" keyword
to override any other conflicting CSS rules. This will make the dropdown menu visible when the
dropdown element is being hovered over. */
.dropdown:hover .dropdown-menu {
  display: block !important;
}

#ejes:hover > .dropdown-menu {
  display: block  !important; 
  right: 310px;
  top: 45px;
}

#ejes > .dropdown-menu {
  display: none  !important; 
}


/* The above code is defining a CSS class called "avisos" and setting its background color to #cbcdcf. */
.avisos {
  background-color: #cbcdcf;
}

/* The above code is defining a CSS rule for a div element with the id "avisos". It sets the background
image of the div to the file located at '/lib/img/home/RJaviso.svg'. The background image is set to
not repeat, cover the entire div, and be positioned at the center of the div. */
div#avisos {
  background-image: url('/lib/img/home/RJaviso.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* The above code is defining a CSS class called "avisos-text". It sets the font family to "Roboto" and
the font size to 12 pixels. */
.avisos-text {
  font-family: "Roboto";
  font-size: 12px;
}

/* The above code is defining CSS styles for an element with the ID "close". It sets the color of the
text to white, sets the width to 3%, sets the cursor to a pointer, sets the display to inline-block,
floats the element to the right, sets padding to 5px on the top and bottom and 5px on the left and
right, sets a border with a width of 3px and color #c2c6c7, and sets the width and height to 20px. */
#close {
  color: white;
  width: 3%;
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 5px 5px;
  border: 3px solid #c2c6c7;
  width: 20px;
  height: 20px;
}

/* The above code is defining a CSS class called "logo". It sets the width of the element with this
class to 420 pixels, the height to 90 pixels, and adds a margin of 12 pixels around the element. */
.logo {
  width: 420px;
  height: 90px;
  margin: 12px;
}

/* The above code is defining a CSS class called "degradado" and applying a linear gradient background
to elements with this class. The gradient starts with the color #0d414e and ends with the color
#165268. */
.degradado {
  background: linear-gradient(#0d414e, #165268);
}

/* The above code is defining a CSS class called ".booor" and applying a border style to it. The border
has a width of 6 pixels and a color of #be431e. */
.booor{
  border: 2px solid #2e5286;
  border-radius: 20px;
}

/* The above code is defining a CSS class called "borderDOF". This class sets a margin of 7 pixels, a
top padding of 20 pixels, a bottom padding of 20 pixels, and a box shadow with a horizontal offset
of 3 pixels, a vertical offset of 3 pixels, a blur radius of 1 pixel, and a color of #0d4b6d. */
.borderDOF{
  margin: 7px;
  padding-top: 20px;
  padding-bottom: 20px;
  box-shadow: 3px 3px 1px #0d4b6d;
}

/* The above code is defining a CSS class called "borderDOF" that will apply certain styles when the
element is hovered over. Specifically, it adds a box shadow with an offset of 3px to the right and
3px down, a blur radius of 1px, and a color of #828383. It also adds a 3px solid border to the top
and left sides of the element, with a color of #828383. */
.borderDOF:hover{
  box-shadow: 3px 3px 1px #828383;
  border-top: 3px solid #828383;
  border-left: 3px solid #828383;
}

/* The above code is defining a CSS class called "buscadores" and setting its display property to
"inline-flex". This class can be applied to HTML elements to make them display as an inline flex
container. */
.buscadores {
  display: inline-flex;
}

/* The above code is defining a CSS class called "buscador__tamano". It sets the width of elements with
this class to 80% and sets the background color to #e9e9ea. */
.buscador__tamano {
  width: 80%;
  background-color: #e9e9ea;
}

/* The above code is defining a CSS class called "buscador__holder". It sets the text alignment to
center, uses the "Roboto" font family, and sets the font size to 14 pixels. */
.buscador__holder{
  text-align: center;
  font-family: "Roboto";
  font-size: 14px;
}

/* The above code is defining a CSS class called "idioma__clima". It sets a border on the right and
left sides of the element with a color of #fafafa. The text color is set to white (#FFFFFF) and the
font size is set to 14 pixels. The font family is set to "Roboto". */
.idioma__clima {
  border-right: 1px solid #fafafa;
  border-left: 1px solid #fafafa;
  color: #FFFFFF;
  font-size: 14px;
  font-family: "Roboto";
}

/* The above code is defining CSS styles for an image element within an element with the class
"idioma__clima". It sets the width of the image to 12 pixels and the height to 15 pixels. */
.idioma__clima img {
  width: 12px;
  height: 15px;
}

/* The above code is targeting the placeholder text of an element with the ID "buscadorizq" in CSS. It
is setting the font family to "Roboto", the color to #828383, and the font size to 18px. */
#buscadorizq::placeholder {
  font-family: "Roboto";
  color: #828383;
  font-size: 18px;
}

/* The above code is defining a CSS class called "tamanobuscador" which sets the height of an element
to 30 pixels and the background color to white. */
.tamanobuscador {
  height: 30px;
  background-color: #FFFFFF;
}

/* The above code is defining a CSS class called "activado". This class is being used to style an
element with a bottom border of 3 pixels solid in the color #c8ccd3, a font size of 16 pixels, and
margins of 2 pixels at the bottom, 10 pixels on the left and right. */
.activado {
  border-bottom: 3px solid #c8ccd3;
  font-size: 16px;
  margin-bottom: 2px;
  margin-left: 10px;
  margin-right: 10px;
  }

/* The above code is defining a CSS class called ".do" and specifying its styles when it is being
hovered over. The styles include changing the text color to white, changing the cursor to a pointer,
adding a 3px solid white border at the bottom, and setting the font size to 16px. */
  .do:hover {
    color: white;
    cursor: pointer;
    border-bottom: 3px solid #ffffff;
    font-size: 16px;
  }

/* The above code is defining a CSS class called "cent". This class sets the width to 100%, the height
to 120px, and the background color to #e1e44e. */
.cent {
  width: 100%;
  height: 120px;
  background: #e1e44e;
}

/* The above code is defining a CSS class called "cents". This class is being used to style an element
with the following properties:
- The text inside the element will be aligned to the right.
- The element will have a border with a width of 5 pixels and a color of #0e414f.
- The element will have a padding of 35 pixels. */
.cents {
  text-align: right;
  border: 5px solid #0e414f;
  padding: 35px;
}

/* The above code is defining a CSS class called "degradadoca". This class sets a background gradient
using the linear-gradient function, with a starting color of #155769 at 70% of the width and an
ending color of #4396b4 at 120% of the width. The class also sets a width of 16rem, height of 28rem,
border-radius of 20px, and text color of aliceblue. */
.degradadoca {
  background: linear-gradient(90deg, #155769 70%, #4396b4 120%);
  width: 16rem;
  height: 28rem;
  border-radius: 20px;
  color: aliceblue;
}

/* The above code is defining a CSS class called ".degradadoca img". This class is being applied to an
image element. */
.degradadoca img {
  padding: 15px;
  border-radius: 30px;
  width: 280px;
  height: 260px;
 object-fit: cover;
}


/* The above code is defining a CSS class called "degradadoca". When an element with this class is
hovered over, it will have a background color that transitions from #babec0 to #a1a6a8 using a
linear gradient. The text color will be set to rgb(7, 9, 10). */
.degradadoca:hover {
  background: linear-gradient(#babec0, #a1a6a8);
  color: rgb(7, 9, 10);
}

/* The above code is defining a CSS class called "dofoot". When an element with this class is hovered
over, it will change the color to rgb(37, 34, 219) and the cursor will change to a pointer. */
.dofoot:hover {
  color: rgb(37, 34, 219);
  cursor: pointer;
}

/* The above code is defining a CSS class called "activadofoot". This class is being used to style text
in a specific way. The text will be displayed in the color #165268, with a font size of 18 pixels,
using the "Roboto" font family. The text will also have an underline, be displayed in italic style,
and have a bold font weight. */
.activadofoot {
  color: #165268;
  font-size: 18px;
  font-family: "Roboto";
  text-decoration: underline;
  font-style: italic;
  font-weight: bold;  
}


/* Dotted red border */
/* The above code is defining a CSS class called "new5" and applying a border style to it. The border
has a width of 5 pixels and a solid line style. The color of the border is set to RGB value (5, 196,
91), which represents a shade of green. */
.new5 {
  border: 5px solid rgb(5, 196, 91);
}

/* The above code is defining a CSS class called "newfoo" and setting the font size to 12 pixels. */
.newfoo {
  font-size: 12px;
}

/* The above code is defining a CSS class called "clima" and setting its height to 20 pixels. */
.clima {
  height: 20px;
}

/* The above code is defining a CSS class called "amburguesa" and setting its background color to
white. */
.amburguesa {
  background-color: white;
}

/* The above code is defining a CSS class called "stickyPro". This class sets the opacity of the
element to 0.6, positions it as sticky, and sets the top position to 10 pixels. The "!important"
declaration ensures that this class takes precedence over any other conflicting styles. */
.stickyPro {
  opacity: 0.6;
  position: sticky !important;
  top: 10px;
}

/* The above code is defining the CSS styles for a sticky container element. It sets the padding and
margin to 0, positions the container fixed to the right side of the screen with a distance of -145px
from the right edge, and 240px from the top edge. The container has a width of 210px and a z-index
of 1100. */
/*resdes sociales*/
.sticky-container {
  padding: 0px;
  margin: 0px;
  position: fixed;
  right: -145px;
  top: 240px;
  width: 210px;
  z-index: 1100;
}

/* The above code is defining a CSS class called "sticky" that is applied to list items (li elements).
The class sets various styles for the list items, including removing the default bullet point,
setting the text color to #efefef, setting the height to 43 pixels, and setting the padding and
margin to 0 pixels. It also adds a transition effect to all properties with a duration of 0.25
seconds and an easing function of ease-in-out. Finally, it sets the cursor to a pointer, indicating
that the list items can be clicked. */
.sticky li {
  list-style-type: none;
  color: #efefef;
  height: 43px;
  padding: 0px;
  margin: 0px 0px 0px 0px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}

/* The above code is defining a CSS rule for a list item element with the class "sticky" when it is
being hovered over. When the list item is hovered over, it will move 10 pixels to the left (negative
margin-left) and have an underline text decoration. */
.sticky li:hover {
  margin-left: -10px;
  text-decoration: underline;
}

/* The above code is defining a CSS rule for the "img" elements that are children of list items within
elements with the class "sticky". The rule sets the "float" property to "left", which means the
images will be aligned to the left within their parent elements. */
.sticky li img {
  float: left;
}

/* The above code is defining CSS styles for the `<p>` elements that are inside `<li>` elements with
the class "sticky". The styles include setting a small padding on the top, no margin, a specific
line height, and a font size of 11 pixels. */
.sticky li p {
  padding-top: 1px;
  margin: 0px;
  line-height: 16px;
  font-size: 11px;
}

/* The above code is defining a CSS rule for a link element (a) that is nested inside a paragraph (p)
element, which is in turn nested inside a list item (li) element with the class "sticky". The rule
sets the text-decoration property to none, removing any underlines or other decorations from the
link, and sets the color property to #2c3539, which is a dark gray color. */
.sticky li p a {
  text-decoration: none;
  color: #2c3539;
}

/* The above code is defining a CSS rule for when a link inside a paragraph element is being hovered
over. It sets the text-decoration property to underline and the color property to rgb(18, 52, 204),
which is a shade of blue. */
.sticky li p a:hover {
  text-decoration: underline;
  color: rgb(18, 52, 204);
}

/*buscador animado*/
/* The above code is defining a CSS class called "input-group". It sets the margin to 25 pixels on the
top and bottom, and sets the position to relative. */
.input-group {
  margin: 25px 0;
  position: relative;
}

/* The above code is defining CSS styles for an input element within an element with the class
"input-group". It sets the width of the input element to 300 pixels, adds padding of 15 pixels, sets
the background color to a semi-transparent white color, sets the text color to black, removes the
default outline and border styles, and sets the font family to "Century Gothic". */
.input-group input {
  width: 300px;
  padding: 15px;
  background-color: ryba(255, 255, 255, 0.5);
  color: #111;
  outline: none;
  border: none;
  font-family: "Century Gothic";
}

/* The above code is defining CSS styles for a label element. */
label {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #111;
  pointer-events: none;
  font-family: "Century Gothic";
}

/* The above code is defining a CSS rule for a label element that contains a span element. The rule
sets the display property of the span element to inline-block, which means it will be displayed as
an inline element but will also have a block-level box model. */
label span {
  display: inline-block;
  transition: transform 0.2s, color 0.3s;
}

/* The above code is a CSS selector that applies styles to a label element's span child when an input
element is focused or when the input element is not empty (i.e., the placeholder is not shown). It
moves the span element up by 38 pixels and changes its color to white. */
input:focus+label span,
input:not(:placeholder-shown)+label span {
  transform: translateY(-38px);
  color: #fff;
}

/*slides show*/
/* Slideshow container */
/* The above code is defining a CSS class called "slideshow-container". It sets the maximum width of
the container to 100 pixels, positions it relative to its normal position, and centers it
horizontally using auto margins. */
.slideshow-container {
  max-width: 100px;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
/* The above code is defining a CSS class called "mySlides" and setting its display property to "none".
This means that any HTML elements with the class "mySlides" will not be displayed on the webpage. */
.mySlides {
  display: none;
}

/* The above code is defining a CSS class called "mySlidess". This class is being used to style
elements with the following properties:
- The elements will not be displayed (display: none).
- The background color will be a semi-transparent black (background-color: rgba(0, 0, 0, 0.8)).
- The elements will have a border with a width of 2 pixels and a color of rgb(241, 243, 241). */
.mySlidess {
  display: none;
  background-color: rgba(0, 0, 0, 0.8);
  border: 2px solid rgb(241, 243, 241);
}

/* Next & previous buttons */
/* The above code is defining CSS styles for elements with the classes "prev" and "next". These styles
include setting the cursor to a pointer, positioning the elements absolutely, setting the top
position to 50%, adjusting the width and padding, setting the text color, font weight, and font
size, adding a transition effect, setting the border radius, and disabling user selection. */
.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 */
/* The above code is defining a CSS class called "next". It sets the "right" property to 0, which means
the element with this class will be positioned at the rightmost edge of its container. It also sets
the "border-radius" property to create rounded corners on the left side of the element, with a
radius of 3 pixels. */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
/* The above code is defining a CSS rule for the hover state of elements with the classes "prev" and
"next". When these elements are hovered over, their background color will change to a
semi-transparent black color (rgba(0, 0, 0, 0.8)). */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* The above code is defining a CSS rule for a class called "dot". When the mouse hovers over an
element with this class, the background color will change to #717171. */
.dot:hover {
  background-color: #717171;
}

/* Slideshow container */
/* The above code is defining a CSS class called "slideshow-container". It sets the maximum width of
the container to 100% of its parent element, positions it relative to its normal position, and
centers it horizontally using auto margins. */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}

/* Caption text no está siendo utilizado*/
/* The above code is defining a CSS class called "text". It sets the color of the text to #f2f2f2 (a
shade of gray), the font size to 15 pixels, and positions the text relative to its normal position
by moving it 25 pixels down. The width of the text is set to 100% of its container, and the text is
aligned to the center. */
.text {
  color: #f2f2f2;
  font-size: 15px;
  position: relative;
  bottom: 25px;
  width: 100%;
  text-align: center;
}

/* The above code is defining a CSS class called "textgp". This class sets the color of the text to
#f2f2f2 (a light gray color), sets the font size to 15 pixels, positions the element relative to its
normal position by moving it 50 pixels down from the bottom, sets the width to 100%, and aligns the
text in the center. */
.textgp {
  color: #f2f2f2;
  font-size: 15px;
  position: relative;
  bottom: 50px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
/* The above code is defining a CSS class called "numbertext". This class is used to style an element
with a yellow background color (#f4fa58), white text color (#f2f2f2), and a font size of 12 pixels.
It also adds padding of 8 pixels on the top and bottom and 12 pixels on the left and right. The
element with this class will be positioned absolutely and placed at the top of its containing
element. */
.numbertext {
  background-color: #f4fa58;
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The above code is defining a CSS class called "transicion". This class is being applied to elements
that are displayed as inline-block. The class also includes a transition property, which specifies
that any changes to the background-color property of the element should be animated over a duration
of 0.5 seconds, using an easing function. */
.transicion {
  display: inline-block;
  transition: background-color 0.5s ease;
}

/* The dots/bullets/indicators */
/* The above code is defining a CSS class called "dot". This class is used to style elements that have
the class "dot" applied to them. */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: rgb(187, 187, 187);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

/* The above code is defining a CSS class called "activee". This class sets the background color to
#3871bb and adds a border radius of 25%. */
.activee {
  background-color: #3871bb;
  border-radius: 25%;
}

/* The above code is defining a CSS class called "responsives" with the following properties:
- The width of the element with this class will be set to 100% of its parent container.
- The height of the element with this class will be set to 600 pixels. */
.responsives {
  width: 100%;
  height: 600px;
}

/* The above code is defining a CSS class called "responsivess". It sets the height of elements with
this class to 450 pixels and sets the background color to white (#ffffff). */
.responsivess {
  height: 450px;
  background-color: #ffffff;
}

/* Fading animation */
/* The above code is defining a CSS animation called "fade". It sets the animation duration to 5
seconds. The animation consists of a keyframe from 0% to 100% where the opacity of the element
remains at 1. In other words, the animation does not change the opacity of the element, so it will
not appear to fade in or out. */
.fade {
  animation-name: fade;
  animation-duration: 5s;
}

@keyframes fade {
  from {
    opacity: 1;
  }

  to {
    opacity: 1;
  }
}

/*Cards de menu*/
/* The above code is defining a CSS class called "cardm". It sets the background color to white, width
to 200 pixels, height to 150 pixels, left position to 10 pixels, padding to 1 pixel, and margin to 5
pixels. It also adds a top margin of 10 pixels. */
.cardm {
  background-color: white;
  width: 200px;
  height: 150px;
  left: 10px;
  padding: 1px;
  margin: 5px;
  margin-top: 10px;
}

/* The above code is defining a CSS rule for the hover state of an element with the class "cardm". When
the element is hovered over, it will have a width of 190px, a box shadow of 3px on the x and y axes
and a blur radius of 1px, and a border radius of 2px. This will give the element a visual effect
when it is hovered over. */
.cardm:hover {
  width: 190px;
  box-shadow: 3px 3px 1px #0d4b6d;
  border-radius: 2px;
}

/* The above code is defining a CSS class called "cardprueba". It sets the margin-top to -22px, padding
to 16px, and border-radius to 50px. This class can be applied to HTML elements to style them
accordingly. */
.cardprueba {
  margin-top: -22px;
  padding: 16px;
  border-radius: 50px;
}

/* The above code is defining a CSS class called "cardgp". This class is being used to style a card
element. The background color of the card is set to white, and it has a width of 200 pixels and a
height of 320 pixels. The card is positioned 100 pixels from the left side of the container. It has
a padding of 4 pixels and a margin of 6 pixels. */
.cardgp {
  background-color: white;
  width: 200px;
  height: 320px;
  left: 100px;
  padding: 4px;
  margin: 6px;
}

/* The above code is defining a CSS class called "cardgpp" and setting its background color to white. */
.cardgpp {
  background-color: white;
}

/* The above code is defining a CSS class called "cardvideo". It sets a box shadow with an offset of
10px horizontally and 10px vertically, a blur radius of 2px, and a color of #0d4b6d. It also sets
the top left border radius to 100px. */
.cardvideo {
  box-shadow: 10px 10px 2px #0d4b6d;
  border-top-left-radius: 100px;
}


/* The above code is defining a CSS class called "borders". This class sets the background color to
#adb5bb, and sets the width to 100% and height to 2px. This class can be applied to HTML elements to
add a background color and create a horizontal line effect. */
.borders {
  background-color: #adb5bb;
  width: 100%;
  height: 2px;
}

/* The above code is defining a CSS class called "cardCOVID19". It sets the height of the element to
100% and positions it relative to its normal position in the document flow. The commented out line
suggests that there may have been a background color defined previously, but it is currently
disabled. */
.cardCOVID19 {
  /*background-color: #c9e4e4;*/
  height: 100%;
  position: relative;
}

/* The above code is defining a CSS rule for a div element with the id "civid19". It sets a background
image for the div using the URL '/lib/fondocov.png'. The background image is set to not repeat,
cover the entire div, and be positioned at the center. */
div#civid19 {
  background-image: url('/lib/fondocov.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* The above code is defining a CSS class called "foot". It sets a border with a width of 2 pixels and
a color of rgb(194, 125, 125), and also sets a left border with a width of 2 pixels and a color of
rgb(104, 218, 104). The background color of the element with this class is set to #b6aeae, and the
height is set to 100%. */
.foot {
  border: 2px solid rgb(194, 125, 125);
  border-left: 2px solid rgb(104, 218, 104);
  background-color: #b6aeae;
  height: 100%;
}

/* The above code is defining a CSS class called "imag". It sets the position of the element to
relative and the width to 100%. The comment "for IE 6" suggests that this code is specifically
targeting Internet Explorer 6, which may require different CSS rules to achieve the desired styling. */
.imag {
  position: relative;
  width: 100%;
  /* for IE 6 */
}

/* The above code is defining a CSS class called ".g". This class is used to apply a box shadow effect
and a border radius of 4 pixels to elements that have this class. It is mentioned in a comment that
this class was used to give a background to COVID-19 images. */
.g {
  /*Esta clase se usaba para darle fondo a las imágenes de COVID-19*/
  box-shadow: 3px 5px 6px gray;
  border-radius: 4px;
}

/* The above code is defining a CSS class called ".gp". It applies a box shadow effect with a
horizontal offset of 3px, a vertical offset of 3px, and a blur radius of 1px. It also sets the
border radius to 2px. */
.gp {
  box-shadow: 3px 3px 1px black;
  border-radius: 2px;
}

/* The above code is defining a CSS class called ".gg". It sets the font size to 28 pixels. The
commented out line is not active and does not affect the styling. */
.gg {
  font-size: 28px;
  /*border-bottom: 3px solid rgb(250, 250, 250);*/
}

/* The above code is defining a CSS class called ".ggc". It sets the font size to 15 pixels and aligns
the text to justify. */
.ggc {
  font-size: 15px;
  text-align: justify;
}

/* The above code is defining a CSS class called "cardcovid". It sets the width of the element to 150
pixels, positions it 100 pixels from the left, adds 5 pixels of padding, and 3 pixels of margin. The
background color is commented out, so it will not be applied. */
.cardcovid {
  /* background-color: white;*/
  width: 150px;
  left: 100px;
  padding: 5px;
  margin: 3px;
}

/* The above code is defining a CSS class called "marcentrar" which is used to center an element
vertically. It achieves this by using the "transform" property with the "translate" function to move
the element 18% of its own height upwards. The "position" property is set to "relative" to ensure
that the element is positioned relative to its normal position. */
.marcentrar {
  position: relative;
  transform: translate(0, 18%);
}

/* The above code is defining a CSS rule for the anchor elements within an element with the ID
"terminos". It sets the color of the anchor text to #f8f8f8, which is a light gray color. */
#terminos a {
  color: #f8f8f8;
}

/* The above code is defining a CSS rule for the element with the ID "headfooter". It sets the
background color of that element to #889097, which is a shade of gray. */
#headfooter {
  background-color: #889097;
}

/* The above code is defining a CSS class called "textfo". It sets the color of the text to a dark gray
(rgb(7, 7, 7)), the font size to 14 pixels, and the font family to "Roboto". */
.textfo {
  color: rgb(7, 7, 7);
  font-size: 14px;
  font-family: "Roboto";
}

/* The above code is defining a CSS rule for the hover state of an element with the class "guiapas".
When the element is hovered over, it will have a border color of #71a154 and a box shadow with a
horizontal offset of 4px, a vertical offset of 4px, a blur radius of 15px, and a color of #0760d4. */
.guiapas:hover {
  border-color: #71a154;
  box-shadow: 4px 4px 15px #0760d4;
}

/* The above code is defining a CSS rule for the element with the ID "watchb" when it is being hovered
over. When the element is hovered over, it will have a background color that transitions from
#135568 to #145268 using a linear gradient. The text color will also be set to white. */
#watchb:hover {
  background: linear-gradient(#135568, #145268);
  color: white;
}

/* The above code is defining a CSS style for an element with the ID "bgb". It sets the background
color to a linear gradient from the color #135568 to #145268, and sets the text color to white. */
#bgb {
  background: linear-gradient(#135568, #145268);
  color: white;
}


/* The above code is defining a CSS class called "borde" that adds a bottom border to an element with a
width of 7 pixels and a color of #135568. It also adds a border radius of 7 pixels to give the
border a rounded appearance. */
.borde {
  border-bottom: 7px solid #135568;
  border-radius: 7px;
}

/* The above code is defining a CSS class called "sombra". When an element with this class is hovered
over, it will have a box shadow effect applied to it. The box shadow will have a horizontal offset
of 2 pixels, a vertical offset of 6 pixels, a blur radius of 15 pixels, and a color of #416594. */
.sombra:hover {
  box-shadow: 2px 6px 15px #416594;
}

/* The above code is defining a CSS class called "cardaero". This class is being used to style a card
element. The background color of the card is set to white, and it has a width of 180 pixels and a
height of 250 pixels. The card also has 5 pixels of padding and a 10 pixel margin. */
.cardaero {
  background-color: white;
  width: 180px;
  height: 250px;
  padding: 5px;
  margin: 10px;
}

/* The above code is defining a CSS class called "cardalinea". This class is being used to style a card
element. The background color of the card is set to white, and it has a width of 120 pixels and a
height of 90 pixels. The card also has 5 pixels of padding and 10 pixels of margin. */
.cardalinea {
  background-color: white;
  width: 120px;
  height: 90px;
  padding: 5px;
  margin: 10px;
}

/* The above code is defining a CSS class called "b" and applying a border-bottom style to it. The
border-bottom style is set to have a thickness of 2 pixels and a solid line style. The color of the
border is set to a shade of red with RGB values of (216, 31, 31). */
.b {
  border-bottom: 2px solid rgb(216, 31, 31);
}

/* The above code is defining a CSS class called "alto" which sets the width of an element to 100% and
the height to 50 pixels. */
.alto {
  width: 100%;
  height: 50px;
}

/* The above code is defining a CSS class called "altofoot". It sets the width of elements with this
class to 100% and the height to 20 pixels. */
.altofoot {
  width: 100%;
  height: 20px;
}

/* The above code is defining a CSS class called "justificar" which sets the text alignment to justify. */
.justificar {
  text-align: justify;
}

/* The above code is defining the CSS styles for a div element with the id "taxi". It sets a background
image for the div using the specified URL. The background image will not repeat and will cover the
entire div. The background image will be positioned at the center of the div. The height of the div
will be set to 100% of the viewport height. */
div#taxi {
  background-image: url('contenido/imagenes/taxi.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100vh;
}

/* The above code is defining a CSS class called "tit-m" and setting the font size to 3em. */
.tit-m {
  font-size: 3em
}

/* The above code is defining CSS styles for two classes, ".c1" and ".c2". These classes have the
following properties:
- "float: left" - This property makes the elements float to the left side of their container.
- "width: 47%" - This property sets the width of the elements to 47% of their container's width.
- "margin: 5px" - This property sets a margin of 5 pixels around the elements.
- "text-align: center" - This property centers the text content of the elements. */
.c1,
.c2 {
  float: left;
  width: 47%;
  margin: 5px;
  text-align: center;
}

/* The above code is using CSS media queries to apply styles to elements with the classes "c1" and "c2"
when the maximum width of the viewport is 600 pixels or less. The styles being applied are floating
the elements to the left and setting their width to 300 pixels. */
@media (max-width: 600px) {
  .c1,
  .c2 {
    float: left;
    width: 300px;
  }
}

/* The above code is defining a CSS class called ".ct". It sets a border with a solid line of 2 pixels
width and a color of rgb(146, 201, 223). It also adds a margin of 5 pixels around the element with
this class. */
.ct {
  border: solid 2px rgb(146, 201, 223);
  margin: 5px;
}

/* The above code is defining a CSS class called "tablas-vuelos". This class is being used to style an
element with centered text alignment and a black border. */
.tablas-vuelos {
  text-align: center;
  border: 1px solid black;
}

/* The above code is defining CSS styles for an element with the ID "btn-lleg". It sets the background
color to #0d414e, the cursor to a pointer, adds a 3px solid border at the bottom with color #010d0f,
and sets the text color to #ffffff. */
#btn-lleg{
  background-color: #0d414e;
  cursor: pointer;
  border-bottom: 3px solid #010d0f;
  color: #ffffff;
}

/* The above code is defining a CSS style for the element with the ID "btn-lleg" when it is being
hovered over. It sets the background color to #426b75, changes the cursor to a pointer, and adds a
3px solid border at the bottom with the color #05090a. */
#btn-lleg:hover{
  background-color: #426b75;
  cursor: pointer;
  border-bottom: 3px solid #05090a;
}

/* The above code is defining CSS styles for an element with the ID "btn-sal". It sets the background
color to #165268, sets the cursor to a pointer, adds a 3px solid border at the bottom with the color
#010d0f, and sets the text color to #ffffff (white). */
#btn-sal{
  background-color: #165268;
  cursor: pointer;
  border-bottom: 3px solid #010d0f;
  color: #ffffff;
}

/* The above code is defining a CSS style for the element with the ID "btn-sal" when it is being
hovered over. It sets the background color to #1b2b30, changes the cursor to a pointer, and adds a
3px solid border at the bottom with the color #589eaf. */
#btn-sal:hover{
  background-color: #1b2b30;
  cursor: pointer;
  border-bottom: 3px solid #589eaf;
}

/* The above code is defining a CSS class called "tit-t" and applying the "text-align: center;"
property to it. This class can be used to center-align text within HTML elements. */
.tit-t {
  text-align: center;
}

/* The above code is defining a CSS rule for the <hr> element. It sets the border style to solid. */
hr {
  border: solid;
}

/* The above code is a CSS media query that targets screens with a maximum width of 600 pixels. It
applies a style to elements with the class "goomap" by setting a negative left margin of 30 pixels.
This is likely used to adjust the positioning of the "goomap" elements on smaller screens. */
@media (max-width: 600px) {
  .goomap {
    margin-left: -30px;
  }
}

/* The above code is defining a CSS class called ".dt". This class sets the font size to 16 pixels, the
color to green, the background color to #f0f3f6, and the font weight to bold. */
.dt {
  font-size: 16px;
  color: green;
  background: #f0f3f6;
  font-weight: bold;
}

/* The above code is defining a CSS class called ".hds" which sets the text color to green and the
background color to a light grayish-blue (#f0f3f6). */
.hds {
  color: green;
  background: #f0f3f6
}

/* The above code is defining a CSS rule for the element with the ID "renta". When the element is
hovered over, it will have a background color of rgb(69, 142, 172), a cursor that changes to a
pointer, and a bottom border of 3 pixels solid #a0c90e. */
#renta:hover {
  background-color: rgb(69, 142, 172);
  cursor: pointer;
  border-bottom: 3px solid #a0c90e;
}

/* The above code is defining a CSS class called ".pas-help img". This class is being used to style
images. The code is setting the padding around the image to 15 pixels, giving the image a border
radius of 30 pixels to make it appear rounded, and setting the width and height of the image to 400
pixels and 250 pixels respectively. */
.pas-help img {
  padding: 15px;
  border-radius: 30px;
  width: 100%;
  height: 100%;
}

/* The above code is defining a CSS class called ".giapas img". This class is being used to style
images. The code is adding padding of 15 pixels around the image, giving it a border radius of 30
pixels to make it appear rounded, and setting the width and height of the image to 270 pixels and
250 pixels respectively. */
.giapas img {
  padding: 15px;
  border-radius: 30px;
  width: 270px;
  height: 250px;
}

/* The above code is defining a CSS class called ".giapas-mascota img". This class is being used to
style images. The code sets the padding around the image to 15 pixels, adds a border-radius of 30
pixels to give the image rounded corners, and sets the width and height of the image to 320 pixels
and 270 pixels respectively. */
.giapas-mascota img {
  padding: 15px;
  border-radius: 30px;
  width: 320px;
  height: 270px;
}

/* The above code is defining a CSS class called "vertientes". It sets the background of elements with
this class to a linear gradient that starts with the color #3094af at 70% of the width and ends with
the color #7dc4dd at 120% of the width. It also sets the text color to aliceblue and adds an
underline to the text. */
.vertientes {
  background: linear-gradient(90deg, #3094af 70%, #7dc4dd 120%);
  color: aliceblue;
  text-decoration: underline;
}

/* The above code is defining a CSS class called "transparencia". When an element with this class is
hovered over, it will change its background color to rgb(69, 142, 172), display a pointer cursor,
and add a 3px solid border at the bottom with the color #1264c2. */
.transparencia:hover {
  background-color: rgb(69, 142, 172);
  cursor: pointer;
  border-bottom: 3px solid #1264c2;
}

/* The above code is defining a CSS class called ".bo". It sets the background color to white (#ffffff)
and the height to 840 pixels. */
.bo {
  background-color: #ffffff;
  height: 840px;
}

/* On smaller screens, decrease text size */
/* The above code is a CSS media query that targets screens with a maximum width of 768 pixels. It
applies the specified styles to elements with the class "bo" when the screen width is within the
specified range. In this case, it sets the height of the elements to 1550 pixels and adds a 7-pixel
solid red border. */
@media only screen and (max-width: 768px) {
  .bo {
    height: 1550px;
    border: 7px solid #ff0000;
  }
}

/* The above code is defining a CSS class called "emano". It sets a border of 7 pixels with a solid
style and a color of #0dcaf0. It also sets the background color to #75dbf0. */
.emano {
  border: 7px solid #0dcaf0;
  background-color: #75dbf0;
}

/* The above code is defining a CSS class called "enlacebg" which sets the background color to #5ff0e4
and adds a 2px solid border with the color #eef145. */
.enlacebg {
  background-color: #5ff0e4;
  border: 2px solid #eef145;
}

/* The above code is defining a CSS class called ".enlacebg" that will apply styles when the element is
being hovered over. The background color will change to #ade776 and a border of 2px solid #cca349
will be added. */
.enlacebg:hover {
  background-color: #ade776;
  border: 2px solid #cca349;
}

/* The above code is defining a CSS class called ".edocu". It sets a border of 7 pixels with a color of
#ffc107 (a shade of yellow) and a background color of #e7d294 (a shade of beige). */
.edocu {
  border: 7px solid #ffc107;
  background-color: #e7d294;
}

/* The above code is defining a CSS class called "consi". It sets a border of 7 pixels with a color of
#6c757d and a background color of #cbe1f7. */
.consi {
  border: 7px solid #6c757d;
  background-color: #cbe1f7;
}

/* The above code is defining a CSS class called "cardntec". It sets the margin-top to 2 pixels,
padding to 4 pixels, and border-radius to 50 pixels. */
.cardntec {
  margin-top: 2px;
  padding: 4px;
  border-radius: 50px;
}

/* The above code is defining a CSS class called "admonarchivo". It sets a border of 2 pixels with a
color of #4033f1 and a background color of #d0e9ee. */
.admonarchivo {
  border: 2px solid #4033f1;
  background-color: #d0e9ee;
}

/* Style the buttons that are used to open and close the accordion panel */
/* The above code is defining the CSS styles for an accordion element. The accordion element has a
background color of #eee, a text color of #444, and a cursor style of pointer. It has padding of 18
pixels, a width of 100%, and text alignment set to left. The element has no border or outline, and
it has a transition duration of 0.4 seconds. */
.accordion {
  background-color: #eee;
  color: #444;
  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) */
/* The above code is defining a CSS rule for the class "accordion" when it is being hovered over. It
sets the background color of the element to #ccc. */
.accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
/* The above code is defining a CSS class called "panel". It sets the padding to 0 on the left and
right sides, sets the background color to white, and hides the element by setting its display
property to "none". It also sets the overflow property to "hidden", which means any content that
exceeds the size of the element will be clipped and not visible. */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

/* The above code is defining a CSS class called ".subseccion". This class is being used to style an
HTML element. */
.subseccion {
  height: fit-content;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  justify-content: center;
  position: relative;
  margin-left: 8%;
  margin-right: 8%;
}

/* The above code is defining CSS styles for an image element with the class "primer". It sets padding,
border radius, width, and height properties for the image. The padding is set to 1rem, the border
radius is set to 30px, the width is set to 22rem, and the height is set to 26rem. */
.primer img {
  padding: 1rem;
  border-radius: 30px;
  width: 22rem;
  height: 26rem;
}

/* The above code is defining CSS styles for images within the "servicios" class. It sets padding
around the image, adds a border-radius of 30px to give it rounded corners, and sets the width and
height of the image to 18rem. */
.servicios img {
  padding: 1rem;
  border-radius: 30px;
  width: 18rem;
  height: 18rem;
}

.servicios:hover{
  border: 2px solid #4bc9da;
  background-color: #d0e9ee;
}

/* The above code is defining a CSS class called "carga". It sets a border with a width of 2 pixels and
a color of #4bc9da. It also sets the background color to #d0e9ee. */
.carga {
  border: 2px solid #4bc9da;
  background-color: #d0e9ee;
}

/* The above code is defining a CSS class called "carga". When an element with this class is hovered
over, it will have a 2px solid border with the color #3f1010 and a background color of #c1dff1. */
.carga:hover {
  border: 2px solid #3f1010;
  background-color: #c1dff1;
}

/* The above code is defining a CSS class called "opacidad". When an element with this class is hovered
over, it will apply a filter to grayscale the element by 80%. */
.opacidad:hover {
  filter: grayscale(80%);
}

/* The above code is a CSS code snippet. It is targeting an element with the class "imagen" and
applying a hover effect to it. When the element is hovered over, the code is setting the opacity of
the element to 0.9, making it slightly transparent. */
.imagen:hover {
  filter: opacity(.9);
}

/* The above code is defining a CSS rule for the class "conte" when it is being hovered over. It
applies a scale transformation to the element, making it slightly larger (1.05 times its original
size) when hovered over. The -webkit-transform property is used for compatibility with webkit-based
browsers (such as Chrome and Safari), while the transform property is used for other browsers. */
.conte:hover {
  -webkit-transform: scale(1.0);
  transform: scale(1.05);
}

/* The above code is defining a CSS class called "conte" and setting the "overflow" property to
"hidden". This means that any content within an HTML element that has the "conte" class will be
clipped and not visible if it exceeds the dimensions of the element. */
.conte {
  overflow: hidden;
}

#eje1{
  background-color: #0d414e;
  color: #ffffff;
}

.capacitacion{
  background-color: #0d414e;
  color: #ffffff;
  width: 500px;
  height: 60px;
}
.autobuses{
  background-color: #1b6d81;
  color: #ffffff;
  width: 100px;
  height: 80px;
}

.vagonetas{
  background-color: #0b5c70;
  color: #ffffff;
  width: 100px;
  height: 80px;
}


.fpejes {
  border-bottom: 6px solid #0d414e;
}

.adquisicionbg {
  background: linear-gradient(90deg, #155769 10%, #4396b4 140%);
  padding: 15px;
  border-radius: 30px;
  height: 240px;
 object-fit: cover;
 color: aliceblue;
}

.adquisicionbg:hover{
  background: linear-gradient(#e7e8e9, #e7e8e9);
  color: rgb(7, 9, 10);
}
.adquisicionbg:hover a{
  background: linear-gradient(#e7e8e9, #e7e8e9);
  color: rgb(7, 9, 10);
}

.adquisicionbg a {
 color: aliceblue;
}