@charset "utf-8";
/* CSS Document */

:root{
     --cs-scarlet-rgb: 255, 36, 00;
     --cs-scarlet: #ff2400;
     --cs-gray-500: #adb5bd;
     --cs-lightgrey: #dedede;
     --cs-lightgrey-rgb: 222, 222, 222;
     --cs-red-rgb: 255, 0, 0;
    --cs-blue-rgb: 0, 0, 255;
    --cs-green-rgb: 0, 127, 0;
    --cs-yellow-rgb: 210, 210, 0;
    --cs-purple-rgb: 255, 0, 255;
    --cs-paleblue-rgb: 0, 255, 255;
    --cs-orange-rgb: 255, 127, 0;
    --bs-black-rgb: 0, 0, 0;
    }

#cb-cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 999; border-radius: 0; display: none; }

body::before{
    display: block;
    content: '';
    height: 100px;
}

/*
h1, .h1 {
    font-size: calc(1.375rem + 1.5vw);
    color:  rgba(var(--bs-black-rgb));
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
    
  }
}
*/

h1, .h1 {
  /* Extra small devices (phones, less than 768px) */
  /*font-size: 80px;*/
    
    font-size: calc(1.0rem + 1.5vw);
    color:  rgba(var(--bs-black-rgb));

  /* Small devices (tablets, 768px and up) */
  @media (min-width: 768px) {
     font-size: calc(1.2rem + 1.5vw);
  }

  /* Medium devices (desktops, 992px and up) */
  @media (min-width: 992px) {
     font-size: calc(1.4rem + 1.5vw);
  }

  /* Large devices (large desktops, 1200px and up) */
  @media (min-width: 1200px) {
     font-size: calc(1.6rem + 1.5vw);
  }
}

h2, .h2 {
  font-size: calc(1.325rem + 0.9vw);
  color:  rgba(var(--bs-black-rgb));
}

@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 2rem;
  }
}

h3, .h3 {
  font-size: calc(1.3rem + 0.6vw);
    color:  rgba(var(--bs-black-rgb));
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.75rem;
  }
}

h4, .h4 {
  font-size: calc(1.275rem + 0.3vw);
  color:  rgba(var(--bs-black-rgb));
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.5rem;
  }
}

h5, .h5 {
  font-size: 1.25rem;
  color:  rgba(var(--bs-black-rgb));
}

h6, .h6 {
  font-size: 1rem;
  color:  rgba(var(--bs-black-rgb));
}

/* SCARLET */
.link-scarlet {
  color: #FF2400;
}
.link-scarlet:hover, .link-scarlet:focus {
  color: #000000;
}

.navbar-scarlet .navbar-brand {
  color: #ff2400;
}
.navbar-scarlet .navbar-brand:hover, .navbar-scarlet .navbar-brand:focus {
  color: #ff2400;
}
.navbar-scarlet .navbar-nav .nav-link {
  color: rgba(0, 0, 0, 0.99);
}
.navbar-scarlet .navbar-nav .nav-link:hover, .navbar-scarlet .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.75);
}
.navbar-scarlet .navbar-nav .nav-link.disabled {
  color: rgba(255, 36, 00, 0.25);
}
.navbar-scarlet .navbar-nav .show > .nav-link,
.navbar-scarlet .navbar-nav .nav-link.active {
  color: #fff;
}
.navbar-scarlet .navbar-toggler {
  color: rgba(255, 36, 00,, 0.55);
  border-color: rgba(255, 36, 00, 0.1);
}

.navbar-scarlet .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 36, 00, 0.99%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-notscarlet .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2800, 00, 00, 0.99%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


.navbar-scarlet .navbar-text {
  color: rgba(255, 36, 00, 0.55);
}

.navbar-scarlet .navbar-text a {color: #ff2400;}
.navbar-scarlet .navbar-text a:hover {color: #000;}
.navbar-scarlet .navbar-text a:focus {color: #ff0000;}


.btn-scarlet {
  color: #fff;
  background-color: #ff2400;
  border-color: #0d6efd;
}

button .btn-scarlet{
  color: #fff;
  background-color: #ff2400;
  border-color: #0d6efd;
}

.btn-scarlet:hover {
  color: #fff;
  background-color: #0D98BA;
  border-color: #0a58ca;
}

.btn-check:focus + .btn-scarlet, .btn-scarlet:focus {
  color: #fff;
  background-color: #0b5ed7;
  border-color: #0a58ca;
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}

.btn-check:checked + .btn-scarlet, .btn-check:active + .btn-scarlet, .btn-scarlet:active, .btn-scarlet.active, .show > .btn-scarlet.dropdown-toggle {
  color: #fff;
  background-color: #0a58ca;
  border-color: #0a53be;
}

.btn-check:checked + .btn-scarlet:focus, .btn-check:active + .btn-scarlet:focus, .btn-scarlet:active:focus, .btn-scarlet.active:focus, .show > .btn-scarlet.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}

.btn-scarlet:disabled, .btn-scarlet.disabled {
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.bg-scarlet {
  --cs-bg-opacity: 1;
  background-color: rgba(var(--bs-black-rgb), var(--cs-bg-opacity)) !important;
}

.bg-lightgrey {
  --cs-bg-opacity: 1;
  background-color: rgba(var(--cs-lightgrey-rgb), var(--cs-bg-opacity)) !important;
}

.text-scarlet {
  --cs-text-opacity: 1;
  color: rgba(var(--cs-scarlet-rgb), var(--cs-text-opacity)) !important;
}

.text-c-red {
  --cs-text-opacity: 1;
  color: rgba(var(--cs-red-rgb), var(--cs-text-opacity)) !important;
}

.text-c-green {
  --cs-text-opacity: 1;
  color: rgba(var(--cs-green-rgb), var(--cs-text-opacity)) !important;
}

.text-c-blue {
  --cs-text-opacity: 1;
  color: rgba(var(--cs-blue-rgb), var(--cs-text-opacity)) !important;
}

.text-c-yellow {
  --cs-text-opacity: 1;
  color: rgba(var(--cs-yellow-rgb), var(--cs-text-opacity)) !important;
}

.text-c-paleblue {
  --cs-text-opacity: 1;
  color: rgba(var(--cs-paleblue-rgb), var(--cs-text-opacity)) !important;
}

.text-c-purple {
  --cs-text-opacity: 1;
  color: rgba(var(--cs-purple-rgb), var(--cs-text-opacity)) !important;
}

.text-c-grey {
  --cs-text-opacity: 1;
  color: rgba(var(--cs-grey-rgb), var(--cs-text-opacity)) !important;
}

.text-c-orange {
  --cs-text-opacity: 1;
  color: rgba(var(--cs-orange-rgb), var(--cs-text-opacity)) !important;
}

div .test-border{
    border: 1px;
    
}

.c-dropshadow{
	text-shadow: 1px 1px black;
}

.c-dropshadow-2red{
	text-shadow: 2px 2px red;
}

.c-dropshadow-2black{
	text-shadow: 2px 2px black;
}

.rounded-5 {
  border-radius: 0.5rem !important;
}

.rounded-10 {
  border-radius: 1.0rem !important;
}


.card {
  width: 350px;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border: 1px solid #d2d2dc;
  border-radius: 6px;
  -webkit-box-shadow: 0px 0px 5px 0px rgb(249, 249, 250);
  -moz-box-shadow: 0px 0px 5px 0px rgba(212, 182, 212, 1);
  box-shadow: 0px 0px 5px 0px rgb(161, 163, 164);
}

.cookies a {
  text-decoration: none;
  color: #000;
  margin-top: 8px;
}

.cookies a:hover {
  text-decoration: none;
  color: blue;
  margin-top: 8px;
}

.cookie-consent{
  position: fixed;
bottom: 8px;
left: 20px;
width: 260px;
padding-top: 7px;
height: 83px;
color: #fff;

line-height: 20px;
padding-left: 10px;
padding-right: 10px;
font-size: 14px;
background: #292929;
z-index: 120;
cursor: pointer;
border-radius: 3px;
}

.allow-button{
      height: 20px;
    width: 104px;
    color: #fff;
    font-size: 12px;
    line-height: 10px;
    border-radius: 3px;
    border: 1px solid green;
    background-color: green;
}

.textoverlay{
    background-image: url(../img/cookies.png);
    background-size: cover;
}


.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

#wrapper {
  width: 100%;
  max-width: 1920px; /*actual width of image-- behaves strangely if exceeding this*/
  position: relative;
}

#wrapper img {
  max-width: 100%;
}

#anchor-who {
  /*border: 2px solid red;*/
  height: 40%;
  width: 14%;
  position: absolute;
  left: 4%;
  top: 22.5%;
}

#anchor-where {
  /*border: 2px solid red;*/
  height: 41%;
  width: 14%;
  position: absolute;
  left: 34.5%;
  top: 23.5%;
}

#anchor-how {
  /*border: 2px solid red;*/
  height: 42%;
  width: 14%;
  position: absolute;
  left: 53%;
  top: 22.5%;
}

#anchor-what {
 /*border: 2px solid red;*/
  height: 42%;
  width: 14%;
  position: absolute;
  left: 83.5%;
  top: 23%;
}

#anchor-when {
  /*border: 2px solid red;*/
  height: 42%;
  width: 13%;
  position: absolute;
  left: 20%;
  top: 35%;
}

#anchor-why {
  /*border: 2px solid red;*/
  height: 42%;
  width: 13%;
  position: absolute;
  left: 69%;
  top: 35%;
}

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

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

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

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