:root {

    --theme: rgb(135,0,0);
    --theme-light: rgb(220,0,0);
    --theme-dark: rgb(100,0,0);
    --theme-extra-dark: rgb(70,0,0);
    --theme-grey: rgb(180,180,180);
    --theme-dark-grey: rgb(40,40,40);
    --theme-transparent-light: rgb(135,0,0,.50);

    --red-transparent-light: rgb(200,0,0,.15);
    --black-transparent-light: rgb(0,0,0,.35);
    --black-transparent-dark: rgb(0,0,0,.80);

    --text-grey: rgb(80, 80, 80);
}

html {
  font-size: 14px;
}

footer{
    width: 100%;
}

.banner
{
    height: 150px;
}


.banner-video {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    min-height: 60vh;
    max-height: 60vh; /* Limits the height to 25% of the viewport height */
    object-fit: cover; /* Ensures the video covers the area without distortion */
    object-position: bottom 25%; /* Focuses the video on the bottom */
    transform: translateX(-50%);
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }

  .banner{
      height: 200px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  font-family: open-sans
}

/* FONTS */
@font-face {
    font-family: 'open-sans';
    src: url('../fonts/OpenSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-size: 96px;
}

@font-face {
    font-family: 'gothic';
    src: url('../fonts/Gothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-size: 96px;
}

/* FONT STYLES */

.h1-large 
{
    font-size: calc(1.7rem + 1.5vw);
}

.font-large
{
    font-size: 1.5rem !important;
}

.font-gothic {
    font-family: 'gothic' !important;
}

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

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

.text-muted
{
    color: #f9f9f9;
}

.text-footer {
    color:  #c8c8c8 
}

/* ELEMENTS */
.contact-link:hover
{
    color: var(--theme-light) !important;
}

.nav-link {
    color: var(--theme) !important;
}

.nav-link:hover
{
    color: var(--theme-light) !important;
}

.dropdown-item:hover
{
    background-color: var(--theme) !important;
    color: white;
}

.accordion-button, .accordion-button:after, .accordion-button:not(.collapsed):after, .accordion-button:focus
{
    background-image: none;
    background-color: var(--theme) !important;
    color: white !important;
    box-shadow: none !important;
}

a.footer:hover
{
    color: white;
}

/* IMAGES */
.img-container
{
    border-radius: 10px !important;
}

.img-frame-medium {
    width: 20vh;
    height: 20vh;
}

.img-frame-wide {
    width: 100%;
    height: 30vh;
}

.img-frame-section {
    height: 50vh;
}

.img-container img, img-container-medium img {
    border-radius: 10px !important;
    object-fit: cover;
    object-position: bottom right;
    width: 100%;
    height: 100%
}

img.img-greyscale {
    filter: grayscale(100%) contrast(75%);
}

.img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.img-overlay.overlay-black {
    background-color: var(--black-transparent-light);
}

.img-overlay.overlay-black-dark {
    background-color: var(--black-transparent-dark);
}

.img-overlay.overlay-red {
    background-color: var(--red-transparent-light);
}

/* VERTICAL CARDS */
.card-rounded-vertical
{
    border-radius: 25px !important;
}

.card-rounded-vertical img
{
    border-top-left-radius: 25px !important;
    border-top-right-radius: 25px !important;
}

.vertical-card {
    height: 60vh;
}

@media (min-width: 768px) {
    .vertical-card {
        height: 50vh;
    }
}

/* HORIZONTAL CARDS */
.card-rounded-horizontal
{
    border-radius: 25px !important;
}

.btn-theme {
    color: white;
    background-color: var(--theme);
}

.btn-theme:hover
{
    color: white;
    background-color: var(--theme-light);
}

/* BACKGROUNDS */
.bg-theme-primary
{
    background-color: var(--theme);
}

.bg-theme-primary-dark
{
    background-color: var(--theme-dark);
}

.bg-theme-primary-extra-dark
{
    background-color: var(--theme-extra-dark);
}

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

.bg-theme-dark-grey {
    background-color: var(--theme-dark-grey);
}

.bg-theme-primary-gradient {

    background: linear-gradient(90deg, rgba(180,0,0,1) 0%, rgba(150,0,0,1) 50%, rgba(100,0,0,1) 100%);
}

.bg-theme-primary-gradient-reversed {
    background: linear-gradient(270deg, rgba(180,0,0,1) 0%, rgba(150,0,0,1) 50%, rgba(100,0,0,1) 100%);
}

.bg-primary-transparent-light {
    background-color: var(--theme-transparent-light);
}

.bg-primary-transparent-medium {
    background: linear-gradient(90deg, rgba(131,0,0,0.75) 0%, rgba(100,0,0,0.75) 54%, rgba(34,0,0,0.75) 100%);
}

.bg-white-transparent {
    background-color: rgb(255, 255, 255, 0.85);
}

.bg-grey-transparent-light {
    background-color: rgb(50,50,50, 0.50);
}

.bg-dark-transparent {
    background-color: rgb(10,10,10,0.75);
}

/* EFFECTS */
.clickable:hover
{
    cursor: pointer;
}

.hover
{
    transition: ease-in-out .25s;
}

.hover:hover
{
    transform: scale(1.05);
}

.hoverup
{
    transition: ease-in-out .25s;
}

.hoverup:hover
{
    transform: translateY(-2%);
}

@keyframes slideIn {
    from {
        transform: translateY(25%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-in
{
    animation: slideIn .5s ease-out forwards;
}