/*!
Theme Name: justiciaAbogados
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: justiciaabogados
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

justiciaAbogados is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* MIO
	 ========================================================================== */

:root {
  --container: 90%; /* Valor por defecto para pantallas muy pequeñas */
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin: 0 auto;
  max-width: var(--container);
}

/* Para pantallas más grandes (ejemplo: tablets) */
@media (min-width: 768px) {
  :root {
    --container: 720px;
    --spacing: 20px;
  }

  imagen-cabecera {
    width: 100%;
    height: auto;
  }
}

/* Para pantallas de escritorio medianas */
@media (min-width: 992px) {
  :root {
    --container: 960px;
    --spacing: 20px;
  }
}

/* Para pantallas de escritorio grandes */
@media (min-width: 1200px) {
  :root {
    --container: 1140px;
    --spacing: 25px;
  }
}

/* Para pantallas de escritorio extra grandes */
@media (min-width: 1400px) {
  :root {
    --container: 1320px;
    --spacing: 25px;
  }
}

.custom-logo {
  max-width: 200px; /* Tamaño máximo en pantallas grandes (ajusta según tu diseño) */
  height: auto; /* Mantiene la proporción de la imagen */
  display: block; /* Ayuda a controlar el espaciado si es necesario */
}

.hero-text {
  font-size: larger;
}

.hero-slogan {
  /* Color del texto: Ya es blanco, lo cual contrasta bien con el rojo */
  font-weight: 700; /* O 'bold'. 700 es un valor numérico común para negrita */

  /* Tamaño de la fuente: Puedes ajustarlo para que tenga más presencia */
  font-size: 1.2em;
  /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); */
  /* Sombra ligera: desplazamiento x, desplazamiento y, radio de desenfoque, color (negro con 50% de opacidad) */

  margin: 5px 10px; /* Ajusta el valor según cuánto espacio necesites */

  text-transform: uppercase; /* Mantiene el texto en mayúsculas */
  text-align: center;
}

.custom-button {
  display: inline-block;
  padding: 8px 5px;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  /* Para los bordes redondeados */
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* Sombra suave */
}

.hero-button {
  cursor: default;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #000000;
  font-family: Garamond;
  padding: 5px;
  /* -webkit-box-shadow: 1px 1px 20px 0 #000000;
  -moz-box-shadow: 1px 1px 20px 0 #000000; */
  box-shadow: 1px 1px 20px 0 #000000;
  /* text-shadow: 0 0 50px #000000; */
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.hero-image {
  display: block;
  max-width: 100%;
  height: auto;
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) calc(100% - 20px),
    rgba(0, 0, 0, 0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) calc(100% - 20px),
    rgba(0, 0, 0, 0) 100%
  );
}

.blogcontainer {
  text-align: center;
  margin: 1rem;
}
.aligncenter {
  text-align: center;
  align-self: center;
}

.bginvisible {
  background-color: transparent;
}

.principal {
  background-color: #b1142e;
  color: #333333;
}
.secondary {
  background-color: #f8f1d4;
  color: #222222;
}

.basis-auto {
  flex-basis: auto;
}

.basis60 {
  flex-basis: 60%;
}

.basis40 {
  flex-basis: 40%;
}

.hero-image-container {
  align-content: center;
}

.contenedor-mapa-direccion {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  gap: 20px;
  padding: 0;
  border-radius: 10px;
}

.mapa {
  width: 100%;
  min-height: 60vh;
}

.mapa-text {
  line-height: 1.4;
  margin: 10px 0px 0px 0px;
  font-size: 17px;
  color: #333333;
}

/* Asegura que las imágenes sean responsivas */
.detail-img {
  max-width: 100%;
  /* La imagen nunca será más ancha que su contenedor */
  height: auto;
  /* Mantiene la proporción de la imagen */
  display: block;
  /* Elimina espacio extra debajo de las imágenes */
}

/* --- Estilos de la Sección Hero --- */
.detail-section {
  /* *** Reemplaza con la ruta de tu imagen *** */
  background-size: cover;
  /* Cubre toda el área de la sección sin distorsionar la imagen */
  background-position: center;
  /* Centra la imagen de fondo */
  background-repeat: no-repeat;
  /* Evita que la imagen se repita */
  color: #fff;
  /* Color del texto (blanco) para que se lea bien sobre la imagen */
  text-align: center;
  /* Centra el texto dentro del hero */
  padding: 80px 20px;
  /* Espaciado interior arriba y abajo */
  position: relative;
  /* Necesario si quieres superponer algo o usar pseudo-elementos */
  min-height: 400px;
  /* Altura mínima para que se vea la imagen, ajusta si necesitas más */

  display: flex;
  align-items: center;
  justify-content: center;

  /* Opcional: Capa semi-transparente oscura sobre la imagen para mejorar la legibilidad del texto */
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    /* Color negro con 50% de opacidad */
    z-index: 1;
    /* Asegura que la capa esté sobre la imagen pero bajo el contenido */
  }
}

.detail-content {
  position: relative;
  /* Coloca el contenido sobre la capa semi-transparente */
  z-index: 2;
  /* Mayor que el z-index de ::before */
  /* Opcional: Text-shadow para que el texto resalte aún más */
  /* text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); */
}

.detail-content h1 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 2.8em;
  /* Tamaño grande para el título principal */
}

.detail-content p {
  margin-top: 0;
  font-size: 1.2em;
  /* Tamaño para el subtítulo */
  max-width: 800px;
  /* Limita el ancho del subtítulo */
  margin-left: auto;
  /* Centra el párrafo con max-width */
  margin-right: auto;
  /* Centra el párrafo con max-width */
}

/* --- Estilos de la Sección de Contenido (Columnas) --- */
.content-section {
  display: flex;
  /* Habilita Flexbox para crear columnas */
  flex-direction: row;
  /* Por defecto en Flexbox, pero lo especificamos (columnas) */
  gap: 40px;
  /* Espacio entre la columna de texto y la de imágenes */
  padding: 40px 20px;
  /* Espaciado interior de la sección */
  max-width: 1200px;
  /* Ancho máximo del contenido para centrarlo */
  margin: 0 auto;
  /* Centra la sección en la página */
  align-items: flex-start;
  /* Alinea las columnas en la parte superior */
  flex-wrap: wrap;
}

.text-column {
  flex: 2;
  /* La columna de texto ocupará 2 partes de 3 (aprox 66%) */
  min-width: 0;
  /* Permite que el contenido dentro de la columna se reduzca si es necesario */
}

.image-column {
  flex: 1;
  /* La columna de imágenes ocupará 1 parte de 3 (aprox 33%) */
  min-width: 0;
  /* Permite que las imágenes se reduzcan */
  display: flex;
  /* Habilita Flexbox dentro de la columna de imágenes si hay varias */
  flex-direction: column;
  /* Apila las imágenes verticalmente si hay varias */
  gap: 20px;
  /* Espacio entre imágenes si hay varias */
}

.text-column,
.image-column {
  flex: none;
  /* Elimina el flex-grow/shrink para que ocupen el ancho completo */
  width: 100%;
  /* Ocupan todo el ancho disponible */
}

.detail-section {
  padding: 60px 15px;
  /* Reduce el padding del hero en móviles */
  min-height: 300px;
  /* Ajusta altura mínima del hero si es necesario */
}

.detail-content h1 {
  font-size: 2em;
  /* Reduce el tamaño del título en móviles */
}

.detail-content p {
  font-size: 1em;
  /* Reduce el tamaño del subtítulo en móviles */
}

.card {
  display: flex;
  flex-direction: column;
  border-radius: 16px 16px 16px 16px;
  width: 272px;
  box-shadow: 2px 7px 13px 0px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  border-color: #000000;
  margin: 20px;
  -webkit-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.card-body {
  background-color: #fffcfc;
  flex-grow: 1;
  padding: 10px;
}

.card:hover {
  /* box-shadow: 2px 7px 30px 0px rgba(0, 0, 0, 0.2); */
  /* transition: all 0.3s ease; */
  /* transform: translateY(-5px) scale(1.02); */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -o-transform: translateY(-10px);
  transform: translateY(-10px);
}

.card-text {
  line-height: 1.4;
  margin: 10px 0px 0px 0px;
  font-size: 17px;
  color: #000000;
}

.card-link {
  color: #b1142e;
  text-decoration: none;
  font-size: 17px;
  font-weight: bold;
}

.text {
  line-height: 1.4;
  margin: 10px 0px 0px 0px;
  font-size: 17px;
}

.card-block {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  transition: all 0.3s ease-out;
  /* margin-bottom: 25px; */
}

.card figure {
  margin: 10px;
}

.image-container {
  display: block;
  width: 100%;
  height: 100%;
}

.image-page {
  border-radius: 5px;
}

.blur-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 1)
  );
}

.sombra-texto {
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
  /* background-color: rgba(0, 0, 0, 0.8); */
  padding: 5px 10px;
  color: #ffffff;
}

.hero {
  position: relative;
  padding: 0;
  color: #fff;
  height: 80vh;
}

.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.separador {
  height: 50px;
  width: 100%;
}

.separador2 {
  height: 30px;
  width: 100%;
}

.separador-body {
  height: 100px;
  width: 100%;
}

.calltoaction {
  background-color: #b1142e;
  width: 100%;
  text-align: center;
  position: relative;
}

.calltoaction2 {
  background-color: #cccccc;
  width: 100%;
  text-align: center;
  position: relative;
  color: #222222;
}

.calltoaction a {
  text-decoration: none;
  color: #ffffff;
  position: relative;
  display: block;
  padding: 50px 10px;
}

.calltoaction2 a {
  text-decoration: none;
  color: #222222;
  position: relative;
  display: block;
  padding: 50px 10px;
  background-color: #b1142e;
}
.calltoaction2 a:visited {
  color: #222222;
}

.calltoaction a:visited {
  color: #ffffff;
}

.calltoaction p {
  margin: 0;
  padding: 0;
  font-size: 24px;
  line-height: 1.4;
}

.calltoaction img {
  width: 30px;
  height: auto;
  top: 5px;
  position: relative;
}

.calltoaction strong {
  font-weight: bold;
}

.section-mapa {
  background-color: #fffffff0;
  height: 60vh;
  width: 100%;
}

.mapa-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.mapa-item {
  flex: 1;
}

.entry-title {
  display: hide;
}

.social-links-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.social-links-principal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-left: auto;
}

.social-links-footer img {
  width: 55px;
  height: 55px;
  /* Tamaño de los iconos */
  transition: transform 0.3s ease;
  /* Transición suave para el efecto hover */
}
.social-links-principal img {
  width: 75px;
  height: 75px;
  /* Tamaño de los iconos */
  transition: transform 0.3s ease;
  /* Transición suave para el efecto hover */
}

.social-links-principal a:hover img {
  transform: scale(1.2);
}

.social-links-footer a:hover img {
  transform: scale(1.2);
}

.hero-flex-container {
  display: flex;
  justify-content: center;
}

.hero-flex-container-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------*/
/* Opcional: Ajustes para pantallas un poco más grandes que móvil pero antes del desktop */
@media (max-width: 992px) {
  .content-section {
    gap: 30px;
    /* Ajusta el espacio entre columnas */
    padding: 30px 15px;
    /* Ajusta el padding */
    max-width: 720px;
  }

  .hero-image-container img {
    max-width: none;
    width: 135%;
  }

  .text-column {
    flex: 1.5;
    /* Puedes ajustar la proporción si prefieres */
  }

  .separador {
    height: 30px;
    width: 100%;
  }
}

@media (max-width: 872px) {
  .hero-image-container img {
    width: 110%;
  }

  .custom-button {
    font-size: 13px;
    padding: 8px 5px;
  }
}

/* --- Adaptación a Pantallas Pequeñas (Responsividad) --- */
@media (max-width: 768px) {
  .content-section {
    flex-direction: column;
    /* En pantallas pequeñas, las columnas se apilan verticalmente */
    gap: 30px;
    /* Ajusta el espacio entre las secciones apiladas */
    max-width: 600px;
  }

  .hero-image-container img {
    width: 115%;
  }

  .hero-text {
    font-size: medium;
  }

  .hero-flex-container {
    justify-content: center;
  }

  .detail-section {
    margin-top: 50px;
  }
}

@media (max-width: 620px) {
  .separador {
    height: 0;
  }

  .hero-image-container img {
    width: 180%;
  }
  .hero-flex-container {
    justify-content: start;
  }

  .hero-content {
    margin-top: 230px;
  }

  .content-section {
    max-width: 450px;
  }

  .separador-body {
    height: 500px;
    width: 100%;
  }
}

@media (max-width: 500px) {
  .hero-content {
    margin-top: 200px;
  }

  .separador-body {
    height: 500px;
    width: 100%;
  }
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
  color: #404040;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
}

p {
  margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 0 1.5em;
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: #eee;
  font-family: "Courier 10 Pitch", courier, monospace;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code,
kbd,
tt,
var {
  font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

mark,
ins {
  background: #fff9c0;
  text-decoration: none;
}

big {
  font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
  background: #fff;
}

hr {
  background-color: #ccc;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

ul,
ol {
  margin: 0 0 1.5em 3em;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt {
  font-weight: 700;
}

dd {
  margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

img {
  height: auto;
  max-width: 100%;
}

figure {
  margin: 1em 0;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

/* Links
--------------------------------------------- */
a {
  color: #4169e1;
}

a:hover,
a:focus,
a:active {
  /* color: #b1142e; */
}

a:focus {
  outline: thin dotted;
}

a:hover,
a:active {
  outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  border: 1px solid;
  border-color: #ccc #ccc #bbb;
  border-radius: 3px;
  background: #e6e6e6;
  color: rgba(0, 0, 0, 0.8);
  line-height: 1;
  padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
  border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
  color: #111;
}

select {
  border: 1px solid #ccc;
}

textarea {
  width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
  display: block;
  /* width: 100%; */
}

.main-navigation ul {
  display: none;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.main-navigation ul ul {
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  float: left;
  position: absolute;
  top: 100%;
  left: -999em;
  z-index: 99999;
}

.main-navigation ul ul ul {
  left: -999em;
  top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
  display: block;
  left: auto;
}

.main-navigation ul ul a {
  width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
  left: auto;
}

.main-navigation li {
  position: relative;
}

.main-navigation a {
  display: block;
  text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
  display: block;
}

@media screen and (min-width: 37.5em) {
  .menu-toggle {
    display: none;
  }

  .main-navigation ul {
    display: flex;
  }
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
  margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
  display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  text-align: end;
  flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
  display: block;
}

.updated:not(.published) {
  display: none;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
  margin: 0 0 1.5em;
}

.widget select {
  max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
  display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

.wp-caption-text {
  text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
  margin-bottom: 1.5em;
  display: grid;
  grid-gap: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  width: 100%;
}

.gallery-columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.gallery-columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
  grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
  grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
  grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
  grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
  grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
  display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
  display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
  outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {
  /*rtl:ignore*/
  float: left;

  /*rtl:ignore*/
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.alignright {
  /*rtl:ignore*/
  float: right;

  /*rtl:ignore*/
  margin-left: 1.5em;
  margin-bottom: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  /* margin-left: auto;
  margin-right: auto; */
  /* margin-bottom: 1em; */
}