/*==================================
====================================
stormvision Styles =================
====================================
====================================*/
:root {
/* Corporate colors, themes, fonts etc. */
  --sv-col-white: #ffffff;
  --sv-col-black: #000000;
  --sv-col-gold: #B09436;
  --sv-col-blue: #36648b;
  --sv-col-red: #BA0C2A;
  --sv-col-silver: #9EA0A2;
  --sv-col-lightred: #D41C30;
  --sv-col-lightsilver: #C4C6C8;
  --sv-col-darkred: #700C20;
  --sv-col-darksilver: #54585C;
  --sv-col-mediumred: #8E0C26;
  --sv-col-mediumsilver: #767A7C;
}

.sv-bg-red { background-color: var(--sv-col-red); text-transform: none; }
.sv-bg-blue { background-color: var(--sv-col-blue); text-transform: none; }
.sv-bg-silver { background-color: var(--sv-col-silver); text-transform: none; }
.sv-bg-lightsilver { background-color: var(--sv-col-lightsilver); text-transform: none; }
.sv-bg-darksilver { background-color: var(--sv-col-darksilver); text-transform: none; }
.sv-bg-white { background-color: var(--sv-col-white); text-transform: none; }
.sv-bg-black { background-color: var(--sv-col-black); text-transform: none; }

.sv-bor-red { border-color: var(--sv-col-red) !important; border: 1px solid !important; }

.sv-col-red { color: var(--sv-col-red) !important; text-transform: none; }
.sv-col-blue { color: var(--sv-col-blue) !important; text-transform: none; }
.sv-col-silver { color: var(--sv-col-silver); text-transform: none; }
.sv-col-lightsilver { color: var(--sv-col-lightsilver); text-transform: none; }
.sv-col-darksilver { color: var(--sv-col-darksilver); text-transform: none; }
.sv-col-white { color: var(--sv-col-white); text-transform: none; }
.sv-col-black { color: var(--sv-col-black); text-transform: none; }

.sv-button-silver {
  background-color: var(--sv-col-silver) !important;
  color: var(--sv-col-black) !important;
  text-transform: uppercase;
  text-decoration: none !important;
  font-weight: bold !important; 
  border-radius: 0px;
  margin-top: 12px;
  margin-bottom: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.sv-button-red {
  background-color: var(--sv-col-red) !important;
  color: var(--sv-col-black) !important;
  text-transform: uppercase;
  text-decoration: none !important;
  font-weight: bold !important; 
  border-radius: 0px;
  margin-top: 12px;
  margin-bottom: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.sv-nav-red { color: var(--sv-col-red) !important; }
.sv-nav-red:visited { color: var(--sv-col-red) !important; }
.sv-nav-red:hover { color: var(--sv-col-red) !important; }
.sv-nav-red:active { color: var(--sv-col-red) !important; }

.sv-nav-silver { color: var(--sv-col-silver) !important; }
.sv-nav-silver:visited { color: var(--sv-col-silver) !important; }
.sv-nav-silver:hover { color: var(--sv-col-silver) !important; }
.sv-nav-silver:active { color: var(--sv-col-silver) !important; }

.sv-button-silver:visited { background-color: var(--sv-col-silver) !important; color: var(--sv-col-white) !important; }
.sv-button-silver:hover { background-color: var(--sv-col-white) !important; color: var(--sv-col-silver) !important; }
.sv-button-silver:active { background-color: var(--sv-col-white) !important; color: var(--sv-col-silver) !important; }

.sv-button-red:visited { background-color: var(--sv-col-red) !important; color: var(--sv-col-black) !important; }
.sv-button-red:hover { background-color: var(--sv-col-white) !important; color: var(--sv-col-darksilver) !important; }
.sv-button-red:active { background-color: var(--sv-col-white) !important; color: var(--sv-col-darksilver) !important; }

a:link { color: var(--sv-col-red); text-decoration: none;}
a:visited { color: var(--sv-col-red); text-decoration: none;}
a:hover { color: var(--sv-col-white); text-decoration: underline;}
a:active { color: var(--sv-col-red); text-decoration: underline;}

/* Navigation element styles */
.navitem {
  position: relative;
  width: 100%;
  height: 8vh;
  border-radius: var(--ub-border-radius);
  background-color: var(--ub-col-darksilver);
  opacity: 0.75;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
.navitem:hover {
  background-color: var(--ub-col-darkred);
  opacity: 1.00;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
.navitem-small {
  position: relative;
  width: 100%;
  height: 6vh;
  border-radius: var(--ub-border-radius);
  background-color: var(--ub-col-darksilver);
  opacity: 0.75;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
.navitem-small:hover {
  background-color: var(--ub-col-darkred);
  opacity: 1.00;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
.navicon {
  color: var(--ub-col-white);
  font-size: 4vh;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-style: normal;
  font-weight: bold;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
}
.navicon-small {
  color: var(--ub-col-white);
  font-size: 3vh;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-style: normal;
  font-weight: bold;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
}
.relative-div {
  position: relative;
}
.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.border-button {
  border-color: var(--ub-col-lightsilver-transparent);
  border-width: 2px;
}
.border-button:hover {
  border-color: var(--ub-col-lightsilver);
}

img.huechange {
  -webkit-filter: hue-rotate(333deg);
          filter: hue-rotate(333deg);
}

.md .item-input-padding-margin {
  padding-left: 0px;
  padding-right: 0px;
  margin-right: -16px;
}

.pb-fill {
  padding-bottom: 35vh !important;
}

.accordion-item .item-link .item-inner::after {
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  height: 0px;
}

ul li {
  margin-bottom: 1vw;
}

ul li::marker {
  content: "•  ";
  color: var(--sv-col-red) !important;
}

hr {
  border-color: var(--sv-col-red) !important;
  border: 1px solid;
  border-bottom: 0px;
  opacity: 1 !important;
}

.sv-section {
  scroll-margin-top: 10px;  
}

.sv-container {
  border-color: var(--sv-col-red) !important;
  border: 1px solid;
  padding: 0;
  margin-top: 3vw;
  margin-bottom: 3vw;
  position: relative;
  container-type: inline-size;
}
.sv-container-borderless {
  padding: 0;
  margin-top: 3vw;
  margin-bottom: 3vw;
  position: relative;
  container-type: inline-size;
}

.sv-text-area {
  padding: 5cqw;
}

.sv-image-headline {
  font-family: 'lufga-semibold';
  font-size: 5cqw !important;
  letter-spacing: 0.2em;
  line-height: 1.2;
  padding: 5cqw;
  position: absolute;
  left: 0px;
  top: 0px;
}
.sv-headline {
  font-family: 'lufga-semibold';
  font-size: 5cqw !important;
  letter-spacing: 0.2em;
  line-height: 1.2;
  padding: 5cqw;
}
.sv-headline-small {
  font-family: 'lufga-semibold';
  font-size: 4cqw !important;
  letter-spacing: 0.15em;
  line-height: 1.2;
  padding: 5cqw;
}

/* Screensize-based styles */

@media screen and (max-width: 550px) {
  .sv-subline { font-size: 12px !important; line-height: 1.5; font-family: 'lufga-light'; text-transform: uppercase; }
  .sv-text-big { font-size: 18px !important; line-height: 1.5; font-family: 'lufga-light'; }
  .sv-text { font-size: 16px !important; line-height: 1.5; font-family: 'lufga-light'; }
  .sv-text-medium { font-size: 14px !important; line-height: 1.5; font-family: 'lufga-light'; }
  .sv-text-small { font-size: 12px !important; line-height: 1.5; font-family: 'lufga-light'; }
  .sv-navbar-title { font-size: 20px !important; line-height: 1.5; font-family: 'lufga-semibold'; }
  .sv-text-big-bold, .sv-title-big { font-size: 18px !important; line-height: 1.5; font-family: 'lufga-semibold'; }
  .sv-text-bold, .sv-title { font-size: 16px !important; line-height: 1.5; font-family: 'lufga-semibold'; }
  .sv-text-medium-bold, .sv-title-medium { font-size: 14px !important; line-height: 1.5; font-family: 'lufga-semibold'; }
  .sv-text-small-bold, .sv-title-small { font-size: 12px !important; line-height: 1.5; font-family: 'lufga-semibold'; }
}
@media screen and (min-width: 551px) {
  .sv-subline { font-size: 18px !important; line-height: 1.5; font-family: 'lufga-light'; text-transform: uppercase; }
  .sv-text-big { font-size: 26px !important; line-height: 1.5; font-family: 'lufga-light'; }
  .sv-text { font-size: 24px !important; line-height: 1.5; font-family: 'lufga-light'; }
  .sv-text-medium { font-size: 22px !important; line-height: 1.5; font-family: 'lufga-light'; }
  .sv-text-small { font-size: 20px !important; line-height: 1.5; font-family: 'lufga-light'; }
  .sv-navbar-title { font-size: 28px !important; line-height: 1.5; font-family: 'lufga-semibold'; }
  .sv-text-big-bold, .sv-title-big { font-size: 26px !important; line-height: 1.5; font-family: 'lufga-semibold'; }
  .sv-text-bold, .sv-title { font-size: 24px !important; line-height: 1.5; font-family: 'lufga-semibold'; }
  .sv-text-medium-bold, .sv-title-medium { font-size: 22px !important; line-height: 1.5; font-family: 'lufga-semibold'; }
  .sv-text-small-bold, .sv-title-small { font-size: 20px !important; line-height: 1.5; font-family: 'lufga-semibold'; }
}