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

:root {
  --dark-grey: #444444;
  --xlight-grey: #f7f7f7;
  --yellow: #f7b937;
  --black: #24282a;
  --white: #FFFFFF;
  --light-grey: #efefef;
  --nav-height: 100px;
  
}

body { overflow: hidden;}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #efefef;
  /* change if the mask should have another color then white */
  z-index: 2000;
  /* makes sure it stays on top */
}

#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: url(../images/loading.gif);
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  /* is width and height divided by two */
}

body {
	font-family:  "aktiv-grotesk", Arial, open-sans, Calibri, Helvetica, sans-serif;
	color: var(--black);	
	font-weight: 300;
    background: #fff;
    overflow-x: hidden !important;
    font-size: 1.05em;
    
}

html , body {
    width: 100% !important;
    overflow-x: hidden !important;
}


h1 {
    font-family: "aktiv-grotesk-extended", "aktiv-grotesk", Arial, open-sans, Calibri, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.75em;
    color: var(--black);
}

h2 {
    font-family: "aktiv-grotesk-extended", "aktiv-grotesk", Arial, open-sans, Calibri, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.75em;
    color: var(--white);
}

h3 {
    font-family: "aktiv-grotesk-extended", "aktiv-grotesk", Arial, open-sans, Calibri, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.75em;
    color: var(--black);
}

h4 {
    font-family: "aktiv-grotesk-extended", "aktiv-grotesk", Arial, open-sans, Calibri, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.4em;
    color: var(--black);
}

p {
    font-size: 1em;
    line-height: 1.3em;
    
}

.balance {
    text-wrap: balance;
}

.mid-text {
    font-weight: 500;
}

p.text-sm {
    font-size: 0.95em;
}

p.text-lg {
    font-size: 1.5em;
}

.text-light {
    color: var(--white);
}

.highlight {
    color: var(--yellow);
}

p.dark { 
   
    font-weight: 400;
}

p.light {
    color: var(--white);
}

strong { 
font-weight: 700;
}

p.text-lg {
    font-family: "aktiv-grotesk-extended", "aktiv-grotesk", Arial, open-sans, Calibri, Helvetica, sans-serif;
font-weight: 500;
font-size: 0.9em;
}

p.dark strong, p.unit {     
 font-family: "aktiv-grotesk-extended", "aktiv-grotesk", Arial, open-sans, Calibri, Helvetica, sans-serif;
font-weight: 700;
}

p a:link, p a:visited {
    color: var(--yellow);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease-out;
    
}

p.dark a:link, p.dark a:visited {
    color: var(--black);
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease-out;   
}

p a:active, p a:hover {
    color: var(--black);
    text-decoration: none;
    transition: all 0.2s ease-out;
}

p.dark a:active, p.dark a:hover {
    color: var(--white);
    text-decoration: none;
    transition: all 0.2s ease-out;
}

::-moz-selection {
    color: var(--black);
    background: var(--yellow);
}

::selection {
   color: var(--black);
    background: var(--yellow);
}

.bg-yellow ::-moz-selection {
    color: var(--yellow);
    background: var(--black);
}

.bg-yellow ::selection {
    color: var(--yellow);
    background: var(--black);
}

.m-8 {
    margin-block: 7em;
}

.navbar {
    min-height: var(--nav-height);
    background: linear-gradient(0deg, rgba(36,40,42,1) 0%, rgba(22,24,26,1) 100%);
    font-family: "aktiv-grotesk-extended", "aktiv-grotesk", Arial, open-sans, Calibri, Helvetica, sans-serif;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.2em;
}

.nav-link {
    font-family: "aktiv-grotesk-extended", "aktiv-grotesk", Arial, open-sans, Calibri, Helvetica, sans-serif;
    color: var(--white);
    font-weight: 500;
    font-size: 0.9em;
}

.nav-link:hover {
    color: var(--yellow);
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: var(--yellow) !important;
    border-bottom: 3px solid var(--yellow);
}

.splash {
    height: calc(90vh - var(--nav-height));
    height: calc(90svh - var(--nav-height));
    margin-top: var(--nav-height);
}

.secondary-splash { 
    height: 30svh;
    margin-top: var(--nav-height);
}

.headline {
    font-family: "aktiv-grotesk-extended", "aktiv-grotesk", Arial, open-sans, Calibri, Helvetica, sans-serif;
    height: 10vh;
    height: 10svh;
    background: var(--yellow);
    /*background: rgb(247,185,55);
    background: linear-gradient(180deg, rgba(247,185,55,1) 0%, rgba(229,172,54,1) 100%);*/
}

.outline {
    width: calc(100% - 90px);
    height: calc(100% - 90px);
    border: 3px solid var(--yellow);
    -webkit-box-shadow:inset 0 0 15px 0 rgba(255,255,255,.4);
    box-shadow:inset 0 0 15px 0 rgba(255,255,255,.4);
}

.fancy-border {
    position: relative;
}

.fancy-border::before { 
    content: '';
    display: block;
    position: absolute;
    top: 15px;
    left: 15px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--yellow);
    z-index: 1;
    transition: all 0.2s ease-in;
}

.fancy-border::after { 
    content: '';
    display: block;
    position: absolute;
    top: -15px;
    left: -15px;
    width: 100%;
    height: 100%;
    border: 2px solid var(--yellow);
    z-index: 1;
    transition: all 0.2s ease-in;
}

.fancy-border:hover::before {
    left: 10px;
    top: 10px;
    transition: all 0.2s ;
}

.fancy-border:hover::after {
    left: -10px;
    top: -10px;
    transitioN: all 0.2s;
}

.content {
    padding-block: 8em;
}

.split { 
    background: linear-gradient(90deg, rgba(36,40,42,1) 60%, rgba(255,255,255,1) 60%);
}

.split-bldg {
    background: linear-gradient(90deg, rgba(36,40,42,1) 50%, rgba(255,255,255,1) 50%);
}

.split-50 {
    background: linear-gradient(90deg, rgba(36,40,42,1) 50%, rgba(255,255,255,1) 50%);
}

.split-40 {
    background: linear-gradient(90deg, var(--yellow) 30%, rgba(255,255,255,1) 30%);
}

.split-bldg img, .split-50 img { 
    max-width: 95%;
}

.split-reverse { 
    background: linear-gradient(90deg, rgba(255,255,255,1) 60%, rgba(36,40,42,1) 60%);
}



.spec-highlight {
    border-left: 3px solid var(--yellow);   
    padding-left: 10px;
    padding-block: 2px;
    font-family: "aktiv-grotesk-extended", "aktiv-grotesk", Arial, open-sans, Calibri, Helvetica, sans-serif;
    font-weight: 500;
}


ul.spec-bullet {
    padding: 0;
}

ul.spec-bullet li::marker {
    color: var(--yellow);
    font-size: 1.8em;
}

ul.spec-bullet li {
    margin-left: 10px;
}

.bg-light-diagonal {
    background-image: linear-gradient(339deg, rgba(47, 47, 47,0.02) 0%, rgba(47, 47, 47,0.02) 42%,transparent 42%, transparent 99%,rgba(17, 17, 17,0.02) 99%, rgba(17, 17, 17,0.02) 100%),linear-gradient(257deg, rgba(65, 65, 65,0.02) 0%, rgba(65, 65, 65,0.02) 11%,transparent 11%, transparent 92%,rgba(53, 53, 53,0.02) 92%, rgba(53, 53, 53,0.02) 100%),linear-gradient(191deg, rgba(5, 5, 5,0.02) 0%, rgba(5, 5, 5,0.02) 1%,transparent 1%, transparent 45%,rgba(19, 19, 19,0.02) 45%, rgba(19, 19, 19,0.02) 100%),linear-gradient(29deg, rgba(28, 28, 28,0.02) 0%, rgba(28, 28, 28,0.02) 33%,transparent 33%, transparent 40%,rgba(220, 220, 220,0.02) 40%, rgba(220, 220, 220,0.02) 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
}

.bg-light-diagonal-2 {
    background-image: linear-gradient(45deg, transparent 0%, transparent 51%,rgba(130, 130, 130,0.05) 51%, rgba(130, 130, 130,0.05) 71%,transparent 71%, transparent 100%),linear-gradient(0deg, transparent 0%, transparent 69%,rgba(130, 130, 130,0.05) 69%, rgba(130, 130, 130,0.05) 84%,transparent 84%, transparent 100%),linear-gradient(135deg, transparent 0%, transparent 37%,rgba(130, 130, 130,0.05) 37%, rgba(130, 130, 130,0.05) 73%,transparent 73%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
}

.bg-dark-diagonal {
    background-image: linear-gradient(12deg, rgba(193, 193, 193,0.05) 0%, rgba(193, 193, 193,0.05) 2%,rgba(129, 129, 129,0.05) 2%, rgba(129, 129, 129,0.05) 27%,rgba(185, 185, 185,0.05) 27%, rgba(185, 185, 185,0.05) 66%,rgba(83, 83, 83,0.05) 66%, rgba(83, 83, 83,0.05) 100%),linear-gradient(321deg, rgba(240, 240, 240,0.05) 0%, rgba(240, 240, 240,0.05) 13%,rgba(231, 231, 231,0.05) 13%, rgba(231, 231, 231,0.05) 34%,rgba(139, 139, 139,0.05) 34%, rgba(139, 139, 139,0.05) 71%,rgba(112, 112, 112,0.05) 71%, rgba(112, 112, 112,0.05) 100%),linear-gradient(236deg, rgba(189, 189, 189,0.05) 0%, rgba(189, 189, 189,0.05) 47%,rgba(138, 138, 138,0.05) 47%, rgba(138, 138, 138,0.05) 58%,rgba(108, 108, 108,0.05) 58%, rgba(108, 108, 108,0.05) 85%,rgba(143, 143, 143,0.05) 85%, rgba(143, 143, 143,0.05) 100%),linear-gradient(96deg, rgba(53, 53, 53,0.05) 0%, rgba(53, 53, 53,0.05) 53%,rgba(44, 44, 44,0.05) 53%, rgba(44, 44, 44,0.05) 82%,rgba(77, 77, 77,0.05) 82%, rgba(77, 77, 77,0.05) 98%,rgba(8, 8, 8,0.05) 98%, rgba(8, 8, 8,0.05) 100%),linear-gradient(334deg, hsl(247,0%,2%),hsl(247,0%,2%));
}

.yellow-left {
    background: linear-gradient(90deg, var(--yellow) 10%, rgba(255,255,255,1) 10%);
}

.bg-yellow {
    background: var(--yellow);
    /*background: rgb(247,185,55);
    background: linear-gradient(180deg, rgba(247,185,55,1) 0%, rgba(229,172,54,1) 100%);*/
}

.bg-yellow-simple {
    background: var(--yellow);
}

.bg-light {
    background: var(--white);
}

.birtcher {
    background: var(--white);
    border-bottom: 15px solid var(--yellow);
    border-radius: 10px;
    padding: 1em;
}

/* ANIMATED LINES */

.ingress1 { 
    fill: none;
    stroke: rgba(43,182,115,0.7);
    stroke-width: 10px;    
    
    stroke-dasharray: 3300px; 
    stroke-dashoffset: 3300px;

     animation: move 10s linear infinite;     
}

.egress1 { 
    fill: none;
    stroke: rgba(227,61,61,0.7);
    stroke-width: 10px;    
    
    stroke-dasharray: 3300px; 
    stroke-dashoffset: 3300px;

     animation: move 10s linear infinite;     
}

.ingress2 { 
    fill: none;
    stroke: rgba(43,182,115,0.7);
    stroke-width: 10px;    
    
    stroke-dasharray: 650px; 
    stroke-dashoffset: 650px;

     animation: move 4s linear infinite;     
}

.egress2 { 
    fill: none;
     stroke: rgba(227,61,61,0.7);
    stroke-width: 10px;    
    
    stroke-dasharray: 650px; 
    stroke-dashoffset: 650px;

     animation: move 4s linear infinite;     
}

@keyframes move {
    0% {
        opacity: 0
    }
    5% {
        opacity: 1;
    }
    90% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

.footer { 
    background-image: linear-gradient(12deg, rgba(193, 193, 193,0.05) 0%, rgba(193, 193, 193,0.05) 2%,rgba(129, 129, 129,0.05) 2%, rgba(129, 129, 129,0.05) 27%,rgba(185, 185, 185,0.05) 27%, rgba(185, 185, 185,0.05) 66%,rgba(83, 83, 83,0.05) 66%, rgba(83, 83, 83,0.05) 100%),linear-gradient(321deg, rgba(240, 240, 240,0.05) 0%, rgba(240, 240, 240,0.05) 13%,rgba(231, 231, 231,0.05) 13%, rgba(231, 231, 231,0.05) 34%,rgba(139, 139, 139,0.05) 34%, rgba(139, 139, 139,0.05) 71%,rgba(112, 112, 112,0.05) 71%, rgba(112, 112, 112,0.05) 100%),linear-gradient(236deg, rgba(189, 189, 189,0.05) 0%, rgba(189, 189, 189,0.05) 47%,rgba(138, 138, 138,0.05) 47%, rgba(138, 138, 138,0.05) 58%,rgba(108, 108, 108,0.05) 58%, rgba(108, 108, 108,0.05) 85%,rgba(143, 143, 143,0.05) 85%, rgba(143, 143, 143,0.05) 100%),linear-gradient(96deg, rgba(53, 53, 53,0.05) 0%, rgba(53, 53, 53,0.05) 53%,rgba(44, 44, 44,0.05) 53%, rgba(44, 44, 44,0.05) 82%,rgba(77, 77, 77,0.05) 82%, rgba(77, 77, 77,0.05) 98%,rgba(8, 8, 8,0.05) 98%, rgba(8, 8, 8,0.05) 100%),linear-gradient(334deg, hsl(247,0%,2%),hsl(247,0%,2%));
    color: var(--white);
}

.footer p {
    font-size: 0.8em;
}

.btn-primary { 
  color: var(--white); 
  background-color: var(--yellow); 
  border-color: var(--yellow); 
  font-weight: 700;
} 
 
.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary.active, 
.open .dropdown-toggle.btn-primary { 
  color: var(--yellow);
  background-color: var(--black); 
  border-color: var(--black); 
} 
 
.btn-primary:active, 
.btn-primary.active, 
.open .dropdown-toggle.btn-primary { 
  background-image: none; 
} 
 
.btn-primary.disabled, 
.btn-primary[disabled], 
fieldset[disabled] .btn-primary, 
.btn-primary.disabled:hover, 
.btn-primary[disabled]:hover, 
fieldset[disabled] .btn-primary:hover, 
.btn-primary.disabled:focus, 
.btn-primary[disabled]:focus, 
fieldset[disabled] .btn-primary:focus, 
.btn-primary.disabled:active, 
.btn-primary[disabled]:active, 
fieldset[disabled] .btn-primary:active, 
.btn-primary.disabled.active, 
.btn-primary[disabled].active, 
fieldset[disabled] .btn-primary.active { 
  background-color: var(--dark-grey); 
  border-color: var(--dark-grey); 
} 
 
.btn-primary .badge { 
  color: var(--white); 
  background-color: var(--yellow); 
}

.btn-primary-outline { 
  color: var(--white); 
  background-color: transparent; 
  border-color: var(--yellow); 
  font-weight: 700;
  border-radius: 0;
  padding: 11px 15px 10px;
  
} 
 
.btn-primary-outline:hover, 
.btn-primary-outline:focus, 
.btn-primary-outline:active, 
.btn-primary-outline.active, 
.open .dropdown-toggle.btn-primary-outline { 
  color: var(--black);
  background-color: var(--yellow); 
  border-color: var(--yellow); 
  border-radius: 5px;
} 
 
.btn-primary-outline:active, 
.btn-primary-outline.active, 
.open .dropdown-toggle.btn-primary-outline { 
  background-image: none; 
} 
 
.btn-primary-outline.disabled, 
.btn-primary-outline[disabled], 
fieldset[disabled] .btn-primary-outline, 
.btn-primary-outline.disabled:hover, 
.btn-primary-outline[disabled]:hover, 
fieldset[disabled] .btn-primary-outline:hover, 
.btn-primary-outline.disabled:focus, 
.btn-primary-outline[disabled]:focus, 
fieldset[disabled] .btn-primary-outline:focus, 
.btn-primary-outline.disabled:active, 
.btn-primary-outline[disabled]:active, 
fieldset[disabled] .btn-primary-outline:active, 
.btn-primary-outline.disabled.active, 
.btn-primary-outline[disabled].active, 
fieldset[disabled] .btn-primary-outline.active { 
  background-color: var(--dark-grey); 
  border-color: var(--dark-grey); 
} 
 
.btn-primary-outline .badge { 
  color: var(--white); 
  background-color: var(--yellow); 
}

/* MEDIA QUERIES
------------------------*/

/* Small devices (landscape phones, 576px and up)*/
@media (max-width: 576px) { 
    .navbar-brand {
    font-weight: 700;
    font-size: 0.8em;
    width: 50%;
    
    
}

ul.spec-bullet li {
    margin-left: 12px !important;
}

.splash {
    height: calc(85vh - var(--nav-height));
    height: calc(85svh - var(--nav-height));
}

.headline {
    height: 15vh;
    height: 15svh;
}

.headline h1 {
    font-family: "aktiv-grotesk-extended", "aktiv-grotesk", Arial, open-sans, Calibri, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 1.2em;
    color: var(--black);
}

.split-bldg {
    background: linear-gradient(180deg, rgba(36,40,42,1) 36%, rgba(255,255,255,1) 36%);
}

}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 577px) and (max-width: 767px) {
    .split-bldg {
    background: linear-gradient(180deg, rgba(36,40,42,1) 37%, rgba(255,255,255,1) 37%);
}
}

@media (min-width: 768px) and (max-width: 991px) {
    .split-bldg {
    background: linear-gradient(180deg, rgba(36,40,42,1) 43%, rgba(255,255,255,1) 43%);
}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { }

/* Large devices (desktops, 992px and up) */
@media (max-width: 991px) { 

.split-50 {
    background: var(--black);
}

.split {
    background: var(--black);
}

}

/*X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { }