:root {
  --text-color: #413e3e;
  --theme-color: #d72710;
  --theme-color-transp: #d72710a1;

  --chili-red: #d72710ff;
  --light-yellow: #f8ffe5ff;
  --emerald: #06d6a0ff;
  --blue-munsell: #1b9aaaff;
  --amber: #ffc43dff;

  --chili-red: #d72710ff;
  --amber: #ffc43dff;
  --raisin-black: #272838ff;
  --french-gray: #ced3dcff;
  --olivine: rgb(91, 151, 92);

  --flax: #ffee93ff;

  --gray-light: rgba(242, 246, 247, 0.871);

  --amber-dark: rgba(166, 119, 11, 0.907);
}

/* ----------------------------------------------
  Basic styles
---------------------------------------------- */

body {
  font-family: "Titillium Web", sans-serif;
  color: var(--text-color);
  font-size: 1.06rem;
}

.theme-color {
  color: var(--theme-color);
}

.theme-text-color {
  color: var(--text-color);
}

::selection {
  color: #fff;
  background: var(--theme-color-transp);
}

a,
p a {
  color: #801f12;
  text-decoration: none;
  -webkit-transition: color 0.2s ease-out;
  -o-transition: color 0.2s ease-out;
  transition: color 0.2s ease-out;
  cursor: pointer;
}

a:hover,
p a:hover {
  color: var(--theme-color);
  /* text-decoration: underline; */
}

.text-justify {
  text-align: justify;
}

blockquote {
  border-left: 5px solid var(--amber);
  padding-left: 1rem;
  margin-left: 2rem;
  margin-right: 2rem;
  font-style: italic;
  font-size: larger;
}

.br-100 {
  border-radius: 100%;
}

/* ----------------------------------------------
  Headers
---------------------------------------------- */

header.masthead .page-title {
  padding-top: 8rem;
  padding-bottom: 2rem;
}

header.masthead.home {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  height: 35rem;
  min-height: 35rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

header.masthead.home h1 {
  text-shadow: rgba(0, 0, 0, 0.66) 3px 3px 5px;
}

header.masthead.home h2 {
  text-shadow: rgba(30, 30, 30, 0.76) 2px 2px 0px;
}

header.masthead.type-2 {
  background-position: center;
  background-size: cover;
  height: 25rem;
  min-height: 25rem;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

header.masthead.type-2.greyrocks {
  background-image: url("../images/jakob-braun-DD0fKMPg8ZA-unsplash.80b81dc947ef.jpg");
}

/* ----------------------------------------------
  Backgrounds
---------------------------------------------- */

.bg-gray {
  background-color: var(--french-gray);
}

.bg-gray-light {
  background-color: var(--gray-light);
}

.bg-dark {
  background-color: var(--raisin-black);
}

.bg-amber {
  background-color: var(--amber);
}

.bg-red {
  background-color: var(--chili-red);
}

.bg-light-yellow {
  background-color: var(--light-yellow);
}

.bg-emerald {
  background-color: var(--emerald);
}

.bg-blue-munsell {
  background-color: var(--blue-munsell);
}

.bg-olivine {
  background-color: var(--olivine);
}

.bg-flax {
  background-color: var(--flax);
}

.parallax {
  background-image: url("../images/alistair-macrobert-4TKFpJPnyU8-unsplash.ac96daecd104.jpg");
  min-height: 500px;
  height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ----------------------------------------------
  Buttons
---------------------------------------------- */

.btn-theme {
  color: white !important;
  background-color: var(--blue-munsell) !important;
}

.btn-amber {
  color: white !important;
  background-color: var(--amber) !important;
}

.btn-amber-dark {
  color: white !important;
  background-color: var(--amber-dark) !important;
}

.btn-outline-blue-munsell {
  color: var(--blue-munsell) !important;
  border-color: var(--blue-munsell) !important;
}

.btn-outline-blue-munsell:hover,
.btn-outline-blue-munsell.active {
  color: white !important;
  background-color: var(--blue-munsell) !important;
}

/* ----------------------------------------------
  Animations
---------------------------------------------- */

.anim-left {
  position: relative;
  animation: animateleft 0.8s;
}
@keyframes animateleft {
  from {
    left: -100px;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}

.anim-bottom {
  position: relative;
  animation: animatebottom 0.8s;
  opacity: 0;
}
@keyframes animatebottom {
  from {
    bottom: -100px;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}

.anim-delay-1s {
  animation-delay: 0.5s;
  animation-fill-mode: forwards;
}

.fade-in {
  animation: fadeIn 1s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* ----------------------------------------------
  Animated underline
  https://stackoverflow.com/a/54616200
---------------------------------------------- */

.anun {
  display: inline-block;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--theme-color-transp) 0 0);
  background-position: 0 100%;
  background-size: 0% 1px;
  background-repeat: no-repeat;
  transition: background-size 0.3s, background-position 0s 0.3s;
}

.anun:hover {
  background-position: 100% 100%;
  background-size: 100% 1px;
}

/* ----------------------------------------------
  Buttons
---------------------------------------------- */

/* ----------------------------------------------
  mainNav
---------------------------------------------- */

#mainNav {
  margin-top: 0;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  transition: background-color 0.2s ease, height 0.4s ease, margin-top 0.2s ease;
  background-color: var(--raisin-black) !important;
}

#mainNav .navbar-logo img {
  height: 4rem;
  transition: height 0.3s ease-in-out;
}

#mainNav.navbar-shrink img {
  height: 3rem;
}

#mainNav .navbar-nav .nav-item .nav-link:after {
  content: "";
  /* position: absolute; */
  width: 0;
  height: 2px;
  display: block;
  margin-top: 5px;
  right: 0;
  background: var(--theme-color);
  transition: width 0.2s ease;
  -webkit-transition: width 0.2s ease;
}

#mainNav .navbar-nav .nav-item .nav-link:hover:after,
#mainNav .navbar-nav .nav-item .nav-link.active:after {
  width: 100%;
  left: 0;
  background: var(--theme-color);
}

#mainNav .navbar-nav .nav-item .nav-link:focus-visible,
#mainNav.navbar-shrink .navbar-nav .nav-item .nav-link:focus-visible,
#mainNav.navbar .dropdown-item:focus-visible {
  outline: 3px solid red;
  outline-offset: 2px;
}

@media (min-width: 992px) {
  #mainNav {
    height: 100px;
    box-shadow: none;
    background-color: transparent !important;
  }

  #mainNav.navbar-shrink {
    height: 70px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    /* background-color: rgba(33, 37, 41, 1) !important; */
    background-color: var(--raisin-black) !important;
  }

  #mainNav .navbar-nav .nav-item .nav-link {
    color: #ffffff;
    position: relative;
    text-decoration: none;
  }

  #mainNav .navbar-nav .nav-item {
    margin-right: 1rem;
  }
}

/* flags - adapted from https://github.com/lipis/flag-icons/blob/main/css/flag-icons.css */
.flag {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
  position: relative;
  display: inline-block;
  width: 1.33333333em;
  line-height: 0.8em;
}

.flag:before {
  content: "\00a0";
}

.flag-gb {
  background-image: url("../images/flags/gb.fcfef6780b36.svg");
}

.flag-it {
  background-image: url("../images/flags/it.1d72a5dec3ac.svg");
}

/* ----------------------------------------------
  Home page
---------------------------------------------- */

.template-homepage .carousel-fade .carousel-item {
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
  filter: brightness(60%);
  transition-duration: 0.9s;
  /* transition-duration: 1.5s;
  transition-property: opacity; */
  animation: home-slides-animation 7s linear infinite;
}

@keyframes home-slides-animation {
  0% {
    transform: translate(0, 0);
  }
  /* 60% {
    transform: translate(20px, -40px) scale(1.08);
  } */
  100% {
    transform: scale(1.1);
  }
}

.overlay {
  background-color: rgba(0, 0, 0, 0.4);
}

.masthead hr {
  border-top: 3px solid #d72710;
  opacity: 0.9;
  width: 6rem;
  margin-left: auto;
  margin-right: auto;
}

.centroms-about {
  transition: transform 0.3s;
}

.centroms-about:hover {
  transform: scale3d(1.02, 1.02, 1);
}

.partner-card {
  /* width: 300px; */
  /* height: 300px; */
  min-height: 250px;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  margin: 0 auto;
  margin-bottom: 2rem;
}

.partner-card img {
  margin-top: 1rem;
  width: 85%;
  /* height: 100%; */
  max-height: 160px;
  object-fit: contain;

  transition: opacity 1s, transform 1s;
}

.partner-card:hover img {
  transform: scale3d(1.1, 1.1, 1);
}

.partner-card .title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 0.5rem;
  text-align: center;
}

#portfolio .portfolio-item {
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
}
#portfolio .portfolio-item .portfolio-link {
  position: relative;
  display: block;
  margin: 0 auto;
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 200, 0, 0.9);
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity ease-in-out 0.25s;
}
#portfolio
  .portfolio-item
  .portfolio-link
  .portfolio-hover
  .portfolio-hover-content {
  font-size: 1.25rem;
  color: white;
}
#portfolio .portfolio-item .portfolio-link:hover .portfolio-hover {
  opacity: 1;
}
#portfolio .portfolio-item .portfolio-caption {
  padding: 1.5rem;
  text-align: center;
  background-color: #fff;
}

/* ----------------------------------------------
  News pages styles
---------------------------------------------- */

.news-date-badge {
  background-color: #1c0a09;
  color: var(--amber);
  opacity: 0.8;
  /* font-family: Raleway; */
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 11px;
}

.pagination .page-item .page-link {
  color: var(--blue-munsell);
}

.pagination .page-item.active .page-link {
  background-color: var(--blue-munsell);
  border-color: var(--blue-munsell);
  color: white;
}

/* ----------------------------------------------
  Footer
---------------------------------------------- */

footer {
  background-color: var(--raisin-black);
}

footer a,
.twbs-ns footer a {
  color: #b2b2b2;
  text-decoration: none;
  transition: color 0.2s ease-out;
}

footer a:hover,
.twbs-ns footer a:hover {
  color: #fff;
}

footer p.copy {
  letter-spacing: 0.2rem;
  font-size: 0.7rem;
  /*color: #6f6d6b;*/
}

@media (min-width: 992px) {
  footer .border-right {
    border-right: 1px dotted #6f6d6b;
  }
}

/* ----------------------------------------------
  Wagtail richtext styles
---------------------------------------------- */

.richtext-section h1,
.richtext-section h2,
.richtext-section h3,
.richtext-section h4,
.richtext-section h5,
.richtext-section h6 {
  font-weight: 400;
}

.richtext-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.richtext-image ~ figcaption {
  font-style: italic;
  font-size: 0.9rem;
}

@media (min-width: 992px) {
  .float-lg-end-captioned-figure-400,
  .float-lg-end-captioned-figure-400 ~ figcaption {
    margin-left: 20px;
    max-width: 400px;
  }
}

@media (min-width: 992px) {
  .float-lg-start-captioned-figure-400,
  .float-lg-start-captioned-figure-400 ~ figcaption {
    margin-right: 20px;
    max-width: 400px;
  }
}

.richtext-image.full-width {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.richtext-image.large {
  width: 100%;
}

.richtext-image-link img {
  /* transition: transform 0.4s ease; */
  border: 1px solid transparent;
}

.richtext-image-link img:hover {
  /* transform: scale(1.04); */
  border: var(--theme-color-transp) 1px solid;
}

/* simple-lightbox dark overlay */
.sl-overlay {
  background: #000 !important;
}