:root {
    --theme: rgb(8,8,136);
    --theme-light: rgb(8,8,180);
    --theme-dark: rgb(8,8,100);
    --theme-extra-dark: rgb(8,8,70);
    --theme-grey: rgb(180,180,180);
    --theme-dark-grey: rgb(40,40,40);
    --theme-transparent-light: rgb(8,8,136,.50);

    --blue-transparent-light: rgb(0,0,200,.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;
}

.bi-large
{
    font-size: 3rem;
}

.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.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-size: 96px;
}

@font-face {
    font-family: 'gothic';
    src: url('../fonts/Gothic.ttf') format('truetype');
    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-muted-light
{
    color: #CCCCCC !important;
}

.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;
}

.no-overflow {
    overflow-x: hidden;
}

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

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

.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;
    width: 100%;
    height: 100%
}

.img-container-center img {
    border-radius: 10px !important;
    object-fit: cover;
    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(8,8,180,1) 0%, rgba(8,8,150,1) 50%, rgba(8,8,100,1) 100%);
}

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

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

.bg-primary-transparent-medium {
    background: linear-gradient(90deg, rgba(8,8,131,0.75) 0%, rgba(8,8,100,0.75) 54%, rgba(8,8,34,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);
}

/* STYLES */
.rounded-6
{
    border-radius: 30px !important;
}

/* 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;
}