/* Arcoiris Theme - custom.css */

/* ----------------------------------------------------------------
                          Global 
   ---------------------------------------------------------------- */

:root {
  font-size: 100%;
  box-sizing: border-box;
  --hue: 210;
}

* {
  &,
  &::before,
  &::after {
    box-sizing: inherit;
  }
}

html {
  min-height: 100vh;
  min-height: 100lvh;
}

body, html {
  margin: 0;
  padding: 0;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  /* margin-top: 1rem; */
}

h1, .h1, h2, .h2, h3, .h3 {
  font-family: 'Roboto Condensed', sans-serif;
  text-shadow: 4px 4px 6px #000000b2;
}

h4, .h4, h5, .h5, h6, .h6 {
  font-family: 'Montserrat', sans-serif;
  text-shadow: 3px 3px 3px #000000b2;
}

img {
  /* max-width: 100%; */
  vertical-align: middle;
}

p {
  margin: 0;
  &:not(:last-child) {
    margin-bottom: 1em;
  }
}

a:hover {
  transition-duration: 0.5s;
}

a:hover:not(a.card,a.btn,a.nav-link) {
  font-weight: bolder;
}

.content {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Change min height of content for tablets and mobiles */
@media only screen and (max-device-width: 680px) {
  .content {
    min-height: 130vh;
    min-height: 130dvh;
  }
}

.bg-content {
  background: rgb(0, 0, 0);/* Fallback color */
  background: rgba(0, 0, 0, 0.5);/* Black background with opacity */
}

.bg-blue    { background: rgb(140, 161, 255); }
.bg-green   { background: rgb(156, 255, 141); }
.bg-red     { background: rgb(255, 142, 142); }
.bg-dark-red { background: rgb(157, 46, 46); }
.bg-orange  { background: rgb(255, 136, 62); }
.bg-yellow  { background: rgb(255, 253, 138); }

/* custom heights */
.h-110 { min-height: 110dvh; }
.h-120 { min-height: 120dvh; }
.h-130 { min-height: 130dvh; }
.h-140 { min-height: 140dvh; }
.h-150 { min-height: 150dvh; }

.text-shadow {
  text-shadow: 5px 5px 6px #000000;
}

/* ----------------------------------------------------------------
                      GRAV classes override
   ---------------------------------------------------------------- */

.notices {
  padding: 10px 15px 15px 15px;
}


/* ----------------------------------------------------------------
                      Navbar with language selector
   ---------------------------------------------------------------- */


/* Handle menu when expanded on mobiles */
#topNavbar.navbar-expanded > ul > li > button {
  display: none;
}

#topNavbar.navbar-expanded > ul > li > ul {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: end;
}

#topNavbar.navbar-expanded > ul > li > ul > li > a,
#topNavbar.navbar-expanded #languageSelector > li > a {
  padding: 0.65em;
}

#topNavbar.navbar-expanded #languageSelector {
  margin-top: 1em;
  background-color: transparent;
} 

#subNavbar.navbar-expanded > a,
#modNavbar.navbar-expanded > a {
  text-align: center;
  text-transform: uppercase;
  border-bottom: 2px;
}

#subNavbar.navbar-expanded .dropdown-toggle::after,
#modNavbar.navbar-expanded .dropdown-toggle::after {
    display:none;
}


/* First page padding (when navbar visible) */
.pt-navbar {
  padding-top: 66px;
}


#mainNavbar {
  transition-duration: 1s;
  transition-timing-function: linear;
  background: var(--bs-dark);
  padding: 0;
}

#topNavbar {
  transition-duration: 0.62s;
  transition-timing-function: linear;
}

#mainNavbar.navbar-transparency, #modNavbar.navbar-transparency {
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.3);
}

.navbar-unset-transparency {
  background: var(--bs-dark) !important;
}

/* Alternative without java script but only for newer browsers */
/* .navbar:not(:has(.navbar-toggler.collapsed)) {
  background: rgb(255, 1, 1) !important;
} */

/* Logo */
.navbar-brand {
  /* font-family:"Georgia","Times New Roman",serif;
  font-style: italic; */
  /* font-size: 1.2rem; */
  max-width: 150px;
  padding: 0;
  margin: 0;
}

.navbar-brand > img {
  width: 200px;
  padding: 2px;
}

.navbar-collapse.collapsing {
  transition-property: height, visibility;
}

/* BEGIN: navbar toggler with icon animation */
.navbar-toggler {
	border: none !important;
}

.navbar-toggler:active, .navbar-toggler:focus, .navbar-toggler:hover {
  box-shadow: none;
  outline: none;
}

.navbar-toggler-icon {
  position: relative;
  background-image: none!important;
  background-color: var(--bs-gray-800);
  height: 3px;
  width: 25px;
  margin: 10px 0;
  transition: all 0.35s ease-out;
  transform-origin: center;
}

.navbar-toggler-icon::before {
  position: relative;
  display: block;
  background-color: var(--bs-gray-800);
  height: 3px;
  content: "";
  top: -7px;
  transition: all 0.15s ease-out;
  transform-origin: center;
}

.navbar-toggler-icon::after {
  position: relative;
  display: block;
  background-color: var(--bs-gray-800);
  height: 3px;
  content: "";
  top: 4px;
  transition: all 0.35s ease-out;
  transform-origin: center;
}

.navbar-dark .navbar-toggler-icon,
.navbar-dark .navbar-toggler-icon::before,
.navbar-dark .navbar-toggler-icon::after {
  background-color: var(--bs-gray-100);
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
  transform: rotate(45deg);
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon::before {
  opacity: 0;
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon::after {
  transform: rotate(-90deg) translateX(7px) ;
} 
/* END: navbar toggler icon animation */

/* Back / Back-to-top buttons */
#btn-back-to-top, #btn-back {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

#btn-back-to-top {
  position: fixed;
  z-index: 1;
  bottom: 20px;
  right: 20px;
}

#btn-back {
  position: fixed;
  z-index: 1;
  bottom: 85px;
  right: 20px;
}

#btn-back-to-top:hover, #btn-back:hover {
    transform: scale(1.05);
}


/* Language selector */
.languagswitcher span.ci {
   mask-size: 40px;
   --webkit-mask-size: 40px;
   width: 40px;
   height: 40px;
}


/* ----------------------------------------------------------------
                            Blocks
   ---------------------------------------------------------------- */

.contact a:hover {
  transform: scale(1.15);
}

/* ----------------------------------------------------------------
                            Features
   ---------------------------------------------------------------- */

.feature-badge {
  padding: 0.5em 0.8em 0.5em 0.8em;
  font-weight: normal;
  font-size: 1rem;
}

.feature-badge #feature-title {
  font-weight: bolder;
}

.feature-badge #feature-text {
  line-height: normal;
}

/* ----------------------------------------------------------------
            Parallax fixed background image cover
            size: cover
   ---------------------------------------------------------------- */

.parallax-bg-image {
  background-attachment: fixed;
  background-color: hsl(var(--hue) 10% 10%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -moz-background-size: cover; 
  -webkit-background-size: cover;  
  -o-background-size: cover;
  min-height: 100dvh;
  padding: 2em;  
}

/* ----------------------------------------------------------------
                      Carousel (bootstrap)
   ---------------------------------------------------------------- */

   .carousel {
    z-index: 0;
  }
  
  #carouselSlider > div.carousel-inner.overflow-visible > div.carousel-item.active > img:hover {
    cursor: zoom-in;
  }
  

/* ----------------------------------------------------------------
                      Photo Gallery styles (glightbox)
    ---------------------------------------------------------------- */
  
.gallery {
  /* max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1.5em;
  padding-right: 1.5em;
  padding-left: 1.5em; */
}  

.glightbox-clean .gslide-title {
  margin-bottom: 0px !important;
  margin-top: 1em !important;
}

  .gallery-content {
  background: rgb(0, 0, 0);/* Fallback color */
  background: rgba(0, 0, 0, 0.5);/* Black background with opacity */
}

/* glightbox overrides */
button.gclose.gbtn, button.gnext.gbtn, button.gprev.gbtn {
  box-shadow: none !important;
}

.gallery .card-body {
  h4 { font-size: 0.9rem; }
  p { font-size: 0.8rem; }
}    

/* ----------------------------------------------------------------
                    Masonry
  ---------------------------------------------------------------- */  


.masonry {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  /* grid-row-gap: 1; */
  grid-auto-rows: 0;
}

.masonry-content {
  overflow: hidden;
}

.masonry-brick {
  color: #2f3640;
  /* background-color: #f5f6fa; */
  transition: opacity .25s ease-in-out;
}

.masonry-brick:hover {
  opacity: .75;
}

.masonry-title, .masonry-description {
  margin: 0;
}

.masonry-title {
  font-weight: 700;
  font-size: 1.1rem;
  padding: 1rem 1.5rem;
}

.masonry-description {
  padding: 1.5rem;
  font-size: .75rem;
  border-top: 1px solid #eee;
  color: #666;
}  

/* .masonry {
  display: grid;
  justify-content: center;
  align-items: center;
} */

/* .masonry {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  grid-auto-rows: 0;
}

/* clear fix */
/* .masonry:after {
  content: '';
  display: block;
  clear: both;
} */

/* .masonry-sizer,
.masonry-item {
   width: 20rem;
   /* margin: 5px; */
} */

/* .masonry-item img {
  display: block;
  max-width: 100%;
} */

  /* ----------------------------------------------------------------
                        Cards
     ---------------------------------------------------------------- */
  
.card {
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
    transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
    cursor: pointer;
  }
  
  .card-body {
    padding: 0px 0.5em 0.5em 0.5em; 
  }
  
  .card:hover{
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  }


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

#footer {
  font-size: 90%;
  color: hsl(var(--hue) 10% 85%);

  .footer-title {
    color: hsl(var(--hue) 10% 95%);
    font-size: 1.5rem;
    font-family: Georgia,Times,"Times New Roman",serif;
  }

  table tbody tr td {
    color: hsl(var(--hue) 10% 85%);
  }
}

.footer-bg-image {
  position: relative;
  overflow: hidden;
  background-attachment: fixed;
  background-color: hsl(var(--hue) 10% 10%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -moz-background-size: cover; 
  -webkit-background-size: cover;  
  -o-background-size: cover;
}

.copyright {
  color: whitesmoke;
}