/*
font-family: myriad-pro-semi-condensed, sans-serif;
font-family: myriad-pro-condensed, sans-serif; 
font-family: myriad-pro, sans-serif; 
font-family: myriad-pro-semiextended, sans-serif; 
*/

/* ==========================================================================   Base styles: opinionated defaults   ================================== */
::-moz-selection {  background: #cccccc;  text-shadow: none; }
::selection {  background: #999999;  text-shadow: none; }
hr {  display: block;  height: 1px;  border: 0;  border-top: 1px solid #ccc;  margin: 1em 0;  padding: 0; }
audio,canvas,iframe,img,svg,video {  vertical-align: middle;}
fieldset {  border: 0;  margin: 0;  padding: 0;}
textarea { resize: vertical;}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

* { box-sizing:border-box; }

html, body {
  overflow-x: hidden; 
}

html {
  color: #000;
  font-size: 20px;
  line-height: 1.4;
  scroll-behavior: smooth;
  font-family:"myriad-pro";
  font-weight:300;
  font-variant-numeric: proportional-nums;

  --navheight:4.5rem;

  --cigruen:hsl(75, 55%, 55%);
  --ciorange:hsl(25, 90%, 55%);
  --ciblau:hsl(200 70% 65%);

  --cidunkelgruen:hsl(75, 15%, 12%);
  --cidunkelorange:hsl(25, 20%, 10%);
  --cidunkelblau:hsl(200 20% 11%);

  --ciweiss:hsl(0, 0%, 100%);
  --cihellgrau:hsl(200, 5%, 85%);
  --cigrau:hsl(200, 5%, 60%); 
  --cidunkelgrau:hsl(200, 5%, 30%);
  --cischwarzgrau:hsl(200, 5%, 15%);
  --cischwarz:hsl(0, 0%, 0%);
  --cischwarz50:hsla(0, 0%, 0%,0.5);

  --maxwidth: 1600px;  /* für row und neu auch für grid */

}
 
body {
  background-color:#000;
  --pagecolor:var(--ciblau);
}

body.index   { --pagecolor:var(--ciblau); }
body.restorative { --pagecolor:var(--cigruen); }
body.innovation { --pagecolor:var(--ciblau); }
body.milling { --pagecolor:var(--ciorange); }
body.download { --pagecolor:var(--cigrau); }


/* Mikroformate */
/* Mikroformate */
/* Mikroformate */

.bg-orange     { background-color: var(--ciorange); }
.bg-blau       { background-color: var(--ciblau);   }
.bg-gruen      { background-color: var(--cigruen);  }
.bg-pagecolor  { background-color: var(--pagecolor);  }
.bg-pink  { background-color: fuchsia !important;  }

.bg-weiss      { background-color: var(--ciweiss);  }
.bg-hellgrau   { background-color: var(--cihellgrau); }
.bg-grau       { background-color: var(--cigrau); }
.bg-dunkelgrau { background-color: var(--cidunkelgrau); }
.bg-schwarzgrau { background-color: var(--cischwarzgrau); }
.bg-schwarz    { background-color: var(--cischwarz); }
.bg-schwarz-50    { background-color: var(--cischwarz50); }
.bg-pagecolor  { background-color: var(--pagecolor) !important; }    /* farbe von body-pagecolor übernehmen */

.bg-img        { background-color: var(--cidunkelgrau); background-size:cover; }
.bg-welt       { background-image:url('../img/bg-welt.jpg'); }


.t-left      { text-align:left; }
.t-right     { text-align:right; }
.t-center    { text-align:center; }
.t-justify   { text-align:justify; }

@media (max-width:1023px) {
  .t-m-left  { text-align:left;  }
  .t-m-right  { text-align:right;  }
  .t-m-center  { text-align:center;  }
  .t-m-justify { text-align:justify; }
}
@media (max-width:767px) {
  .t-s-left  { text-align:left;  }
  .t-s-right  { text-align:right;  }
  .t-s-center  { text-align:center;  }
  .t-s-justify { text-align:justify; }
}

.t-90 { font-size:90%; }
.t-80 { font-size:80%; }
.t-70 { font-size:70%; }
.t-60 { font-size:60%; }

.t-weiss      { color:var(--ciweiss) !important; }
.t-hellgrau   { color:var(--cihellgrau) !important; }
.t-grau       { color:var(--cigrau) !important; }
.t-dunkelgrau { color:var(--cidunkelgrau) !important; }
.t-schwarz    { color:var(--cischwarz) !important; }
.t-pink    { color:fuchsia !important; }
  
.t-gruen      { color: var(--cigruen) !important; }
.t-orange     { color: var(--ciorange) !important; }
.t-blau       { color: var(--ciblau) !important; } 
.t-pagecolor  { color: var(--pagecolor) !important; }    /* farbe von body-pagecolor übernehmen */
 
.t-schatten-schwarz {
  text-shadow:0 1px 10px var(--cischwarz50), 0 0 3px var(--cischwarz);
}


.t-bold     { font-weight:600; }
.t-medium     { font-weight:500; }

.t-normalcase  { text-transform:initial; }
.t-lowercase  { text-transform:lowercase; }
.t-uppercase  { text-transform:uppercase; letter-spacing:0.075em; }
.t-balance    { text-wrap: balance; }
.t-nobalance  { text-wrap: wrap; }

.bt-1 { border-top: 1px solid var(--ciweiss); }
.bt-2 { border-top: 2px solid var(--ciweiss); }
.bt-3 { border-top: 3px solid var(--ciweiss); } 

.bb-1 { border-bottom: 1px solid var(--ciweiss); }
.bb-2 { border-bottom: 2px solid var(--ciweiss); }
.bb-3 { border-bottom: 3px solid var(--ciweiss); }

.bl-1 { border-left: 1px solid var(--ciweiss); }
.bl-2 { border-left: 2px solid var(--ciweiss); }
.bl-3 { border-left: 3px solid var(--ciweiss); } 

.br-1 { border-right: 1px solid var(--ciweiss); }
.br-2 { border-right: 2px solid var(--ciweiss); }
.br-3 { border-right: 3px solid var(--ciweiss); } 

@media (max-width:767px) {
  .bt-s-1 { border-top: 1px solid var(--ciweiss); }
  .bt-s-2 { border-top: 2px solid var(--ciweiss); }
  .bt-s-3 { border-top: 3px solid var(--ciweiss); } 

  .bb-s-1 { border-bottom: 1px solid var(--ciweiss); }
  .bb-s-2 { border-bottom: 2px solid var(--ciweiss); }
  .bb-s-3 { border-bottom: 3px solid var(--ciweiss); }

  .bl-s-1 { border-left: 1px solid var(--ciweiss); }
  .bl-s-2 { border-left: 2px solid var(--ciweiss); }
  .bl-s-3 { border-left: 3px solid var(--ciweiss); } 

  .br-s-1 { border-right: 1px solid var(--ciweiss); }
  .br-s-2 { border-right: 2px solid var(--ciweiss); }
  .br-s-3 { border-right: 3px solid var(--ciweiss); } 
}



.b-pagecolor { border-color: var(--pagecolor); }


/* Typografie */
/* Typografie */
/* Typografie */

p, ul > li, td {
  font-size:clamp(0.7rem,2vw,1rem);
}

p, ul > li {
  margin-top:0rem;
  margin-bottom:0rem;
  /*text-wrap: balance;*/
  color:var(--ciweiss);
  text-wrap:pretty;
}
.bg-weiss p,
.bg-weiss ul > li {
  color:var(--cischwarz);
}

ul {
  list-style-type:none;
  margin:0;
  padding:0;
}
ul li {
}

a {  
  color:var(--ciweiss);
  text-decoration:none;
  border-bottom:1px solid var(--cigrau);
}
.bg-weiss a, .bg-hellgrau a, .bg-grau a {
  color:var(--cischwarz);
}
nav a, 
footer a {
  display:block;
  border-bottom:none;
  color:var(--cihellgrau);
}
footer a {
  width:fit-content;
  text-decoration:underline; 
  text-underline-offset:0em;
  text-underline-position: under;
}
footer a:hover {
  color:var(--ciweiss);
}

h1, h2, h3, h4, h5, h6 {
  font-weight:600;
  margin:0 0 0 0;
  color: var(--ciweiss);
  text-wrap: balance;
  line-height:1.1; 
}

h1    { font-size:clamp(1.33rem,5vw,5rem); color:var(--pagecolor); letter-spacing:0.025em; }
h2    { color:var(--pagecolor); letter-spacing:0.025em; }

@media (max-width:767px) {
  .headlinegroup h1 { padding-left:9vw; padding-right:2vw; }
  .headlinegroup h2 { }
}

.bg-pagecolor h1 { color:var(--cidunkelgrau); } 
.bg-pagecolor h2 { color:var(--ciweiss); }
.bg-pagecolor h3 { color:var(--cidunkelgrau); }
.bg-pagecolor h4 { color:var(--cidunkelgrau); }

.bg-weiss h3 { color:var(--cidunkelgrau); }
.bg-weiss h4 { color:var(--cidunkelgrau); }


.color-override-gruen h2 {  color:var(--cigruen);  }
.color-override-orange h2 { color:var(--ciorange); }
.color-override-blau h2 {   color:var(--ciblau);   }



h2    { font-size:clamp(1.33rem, 3vw,    2.33rem); }
h3    { font-size:clamp(1.20rem, 2.75vw, 2.33rem); }
h4    { font-size:clamp(1.10rem, 2.25vw, 1.5rem ); }
h5    { font-size:clamp(1.05rem, 1.85vw, 1.25rem); }

.privacy h2 { font-size:2rem; }
.privacy h3 { font-size:1.5rem; }
.privacy h4 { font-size:1.2rem; }

.h0   {  
  font-size:clamp(2.5rem,7vw,6rem);
  /*display: grid;*/
  line-height: 1;
  font-weight: 800;
  margin-top: -0.15em;
  color:var(--pagecolor);
}
.h0 .h0-small,
h1 .h1-small {
  display:inline-block;
  font-size:40%;
  font-size:clamp(1.75rem,40%,40%);
  font-weight:600;
}

.h-1   {  
  font-family:"myriad-pro-semi-condensed";
  font-size:clamp(6rem,15vw,18rem);
  color:var(--ciweiss);
  opacity:0.3;
  display: grid;
  line-height: 0.8;
  font-weight:800;
}


.headlinegroup {  /* kombi aus h1 und h2, für Animation von beiden gemeinsam*/
  display:grid;
  place-content:center center;
  text-transform:uppercase;
  font-style:italic;
}

.headlinegroup h2 {
  transform:translateX(min(5vw, 80px));
}

.headlinegroup h1 {
  display:grid;
  place-items:center;
}


strong {
  font-weight:bolder;
  color:var(--pagecolor);
}
.bg-pagecolor strong {
  color:var(--ciweiss);
}

@font-face {
font-family:"myriad-pro-semi-condensed";
font-display:block;font-style:normal;font-weight:700;font-stretch:normal;
font-size-adjust:cap-height;
}

.textgroup {
  display:grid;
  height: 100%;
  place-content: center;
  font-kerning: normal;

  text-shadow: 0 3px 15px rgba(0,0,0,0.7);
  
  text-transform:uppercase;
  line-height:0.9;
  font-family:"myriad-pro-semi-condensed";
  letter-spacing:0.2em;
  font-weight:700;
  font-style:italic;
}


.textgroup .text1, 
.textgroup .text3 { 
  color:white; 
  font-size:clamp(1.15rem,3.333vw,4rem); 
  font-weight:600; 
}
.textgroup .text1 {  
  margin-left:2em; 
}
.textgroup .text2 {  
  color:var(--pagecolor); 
  font-size:clamp(2.5rem,10vw,12rem);
  margin-top:-0.5vw; 
}
.textgroup .text3 {  
  margin-right:2em; 
  text-align:right; 
}

 













blockquote {
  font-size:clamp(0.9rem, 2.3vw, 1.75rem);
  line-height:1.2;
  text-wrap: balance;
  color:#fff; 
  text-shadow:0 5px 12px rgba(0,0,0,0.3);
  margin:1rem 1rem 0 max(7vw,2.5rem); 
  padding:0;
  position:relative;
}
blockquote:before {
  content:"„";
  font-size:500%;
  color:var(--ci2);
  font-weight:500;
  position:absolute;

  line-height:0;
  top:-2rem;
  left:min(-5vw,-2.33rem);
}
blockquote.noquote:before {
  content:"";
}

cite {
  font-size:clamp(0.8rem, 1.66vw, 1.33rem);
  color:#fff;
  margin:1rem 1rem 1rem max(7vw,2.5rem); 
  padding:0;
}

.speechbubble {
  background-color:var(--pagecolor);
  color:var(--ciweiss);
  padding:0.666em; padding-top:0.5em;
  border-radius:0.666em;
  position:relative;
  width:fit-content;

  margin-bottom:1.5em;
}

.speechbubble::after {
  content:"";
  position:absolute;
  left:1em; 
  bottom:-1em;
  width:1em;
  height:1em;
  background-image:conic-gradient(at 100% 100%, transparent 0deg, transparent 315deg, var(--pagecolor) 315deg, var(--pagecolor) 350deg, transparent 350deg );
}






.factsandfigures .col {
  border-left:2px solid #fff;
}
.factsandfigures .col:first-child {
  border-left:none;
}
@media (max-width:767px) {
  .factsandfigures .col { border-left:none; }
}

.factsandfigures .big { 
  font-style:italic;
  font-size:clamp(1.7rem, 2.5vw, 2.3rem);
  color:var(--ci1hell);
  font-weight:500;
}
.factsandfigures .big img { 
  max-width:40%;
  margin:0 auto;
}

.factsandfigures .medium { 
  font-style:italic;
  font-size:clamp(1.2rem, 1.66vw, 1.4rem);
  color:#fff;
  font-weight:500;
  margin-top:-0.33em;
  margin-bottom:0.33em;
}
.factsandfigures .small { 
  color:#fff;
  margin-top:auto;
  font-size:clamp(0.7rem,2vw,1rem);
}



table {}
table {
  width:100%;
  table-layout:fixed;
  border-spacing:0px;
  border-collapse: collapse;
  color:var(--ciweiss);
}
table.download {
  //background-color:var(--ciweiss);
  //color:var(--cischwarz);
}

table tr {
  border-bottom:1px solid var(--cidunkelgrau);
}

table th, 
table td {
  text-align:left;
  vertical-align:top;
  padding:0.5rem 1rem;
  text-wrap:balance;
}

table.download td {
  width:3rem;
}
table.download td:first-child {
  width:auto;
  padding-left:0;
}

table.download td a {
  font-weight:400;
  text-decoration: none;
  border-bottom:none;
}
  
table.download td a:hover {
  font-weight:600;
}




/*** UI ***/
/*** UI ***/
/*** UI ***/

a.button, 
input.button, 
button {
  display:block;
  width:fit-content;
  min-width:200px;
  padding:0.5em 1em;

  border:2px solid var(--ciweiss);
  background-color: transparent;
  text-align:center;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-weight:500;
}
#CookiebotWidget button,
button.CookiebotWidget-logo { min-width:auto; }

.grid a.button {
  min-width:auto;
}

.button-100 {
  width:100% !important;
}

a.button.color-override-gruen,
input.button.color-override-gruen,
button.color-override-gruen {
  border:2px solid var(--cigruen);
  color: var(--cigruen);
}
a.button.color-override-blau,
input.button.color-override-blau,
button.color-override-blau {
  border:2px solid var(--ciblau);
  color: var(--ciblau);
}
a.button.color-override-orange,
input.button.color-override-orange,
button.color-override-orange {
  border:2px solid var(--ciorange);
  color: var(--ciorange);
}



input.button, 
button {
  border:none;
}

@keyframes anibutton {
  0%    { transform:scaleX(1)   scaleY(1)      ; background-color:transparent; }
  50%   { transform:scaleX(1.05) scaleY(0.8)     ; }
  100%  { transform:scaleX(1.1) scaleY(1.1)    ; background-color:rgba(255,255,255,0.1); }
}
@keyframes anibuttonlow {
  0%    { transform:scaleX(1)   scaleY(1)      ; background-color:transparent; }
  50%   { transform:scaleX(1.02) scaleY(0.9)     ; }
  100%  { transform:scaleX(1.04) scaleY(1.04)    ; background-color:rgba(255,255,255,0.1); }
}

a.button:hover, 
input.button:hover, 
button:hover {
  animation:anibutton 0.33s 1 ease-in-out;
  animation-fill-mode: forwards;
}

a.button.animation-low:hover, 
input.button.animation-low:hover, 
button.animation-low:hover {
  animation:anibuttonlow 0.33s 1 ease-in-out;
  animation-fill-mode: forwards;
}
 
a.button.animation-stop:hover, 
input.button.animation-stop:hover, 
button.animation-stop:hover {
  animation:none;
  animation-fill-mode: none;
}




.form-float { 
  display:grid;
  grid-template-rows:1fr;
  grid-tempalte-columns:1fr;
}

.form-float > label,
.form-float > input,
.form-float > textarea {
  grid-row: 1 / -1;
  grid-column: 1 / -1;
}

input, textarea {
  border:0px solid transparent;
  background-color:var(--cihellgrau);
  padding:0.5rem 1rem;
  margin-bottom:0.5rem;
  font-weight:300;
}

input:focus, textarea:focus {
  outline:none;
  box-shadow:none;
}

textarea {
  padding:1.25rem 1rem;
}

input[type="text"], 
input[type="email"], 
textarea {
    width:100%;
}
 
input[type="text"], 
input[type="email"] {
  height:3.5rem;
}

.form-float label {

  height:3.5rem;
  padding:0.5rem 1rem;
  width:fit-content;
  position:relative;
  z-index:2;
  pointer-events:none;

  display:grid;
  place-items:center left;
  font-style:italic;
  opacity:0.5;

  transition:all 0.15s ease-in-out;
  transform-origin: top left;
}

.form-float input:focus ~ label,
.form-float input:not(:placeholder-shown) ~ label,
.form-float textarea:focus ~ label,
.form-float textarea:not(:placeholder-shown) ~ label {
  transform: scale(0.65);
  padding:0 calc( 1 / 0.65 * 1rem ) !important;
  height:2rem;

}


.form-check {
  display:grid;
  grid-template-columns: auto 1fr;
  grid-gap:0.5rem;
}

.form-check label {
  cursor:pointer;
}


input[type="checkbox"], input[type="radio"] {
    width:1rem;
    height:1rem;
    border:1px solid var(--cidunkelgrau);
}








input, textarea {
  border:0px solid transparent;
  background-color:var(--cihellgrau);
  padding:0.5rem 1rem;
  margin-bottom:0.66666rem;
  font-weight:300;
}

textarea {
  padding:1.25rem 1rem;
}

input[type="text"], textarea {
    width:100%;
}

input[type="checkbox"], input[type="radio"] {
    width:1rem;
    height:1rem;
    border:1px solid var(--cidunkelgrau);
}

/* formularbuttons am ende der seite */
.bg-weiss .button {
  color:var(--ciweiss);
  border:1px solid var(--ciweiss);
  background-color:var(--pagecolor);
  font-weight:400;
  cursor:pointer;
  transition:all 0.25s ease-in-out;
}

.bg-weiss .button:hover {
  color:var(--pagecolor);
  border-color:var(--pagecolor);
  background-color:var(--ciweiss);
  font-weight:400;
  transform:scale(1.05);
}


.social-icons { display:flex; gap:0.25rem; }
.social-icons a { border:none; }
.social-icons a img {
  width:1.25rem;
}




/* startbereich */
/* startbereich */
/* startbereich */

.startgroup {
  display:grid;
  grid-template: 1fr / 1fr;
  place-items:center center;
  overflow:hidden;
}
.startgroup img {
  grid-column: 1 / -1;
  grid-row:    1 / -1;
}

.startlogo {
  grid-column: 1 / -1;
  grid-row:    1 / -1;

  z-index:100;
  place-self: center;

  width: 86vw;
  max-width:800px;
  height: auto;
  aspect-ratio:1000 / 269; 

  backdrop-filter:blur(2px) brightness(0.7) contrast(1);
}












/* Team */
/* Team */
/* Team */
.team-slide {
  height: 100% !important;
  width: 100%;
  display:grid;
  grid-template: auto auto auto / 1fr;
  place-items:start center;
  opacity:0.25;
  transition:opacity 0.5s ease;
}
.team-slide.swiper-slide-prev,
.team-slide.swiper-slide-next {
  opacity:0.75;
}
.team-slide.swiper-slide-active {
  opacity:1;
}
@media (max-width:1365px) {
  .team-slide.swiper-slide-prev,
  .team-slide.swiper-slide-next {
    opacity:0.25;
  }
}

.team-slide > * {
  grid-column: 1 / -1;
  text-align:center;
  font-size:clamp(0.9rem,2vw,1rem);
  line-height: 1.2;
  transition:all 0.5s ease-in-out;
}

.team-slide img {
  width:100%;
  height:auto;
  object-fit:cover;
  aspect-ratio: 1;
  overflow: hidden;
  grid-row: 1 / 2;
}

.team-slide .werte {
  grid-row: 1 / 2; z-index:10;
  margin:0.5rem 0 0 0;  
  place-self:center;
  font-style: italic; 
  color:white; 
  text-shadow:0 1px 2px rgba(0,0,0,1), 0 1px 4px rgba(0,0,0,1), 0 5px 10px rgba(0,0,0,0.85);
  opacity:0;
}

.team-slide h3 {
  grid-row: 2 / 3;
  color:var(--ci2);
  opacity:0;
  margin:0.75rem 0 0 0;

}

.team-slide h4 {
  grid-row: 3 / 4;
  opacity:0;
  margin:0.25rem 0 0 0;
}

@media (max-width:767px) {
  .team-slide {
    grid-template: auto auto auto auto / 1fr;
  }
  .team-slide .werte {  grid-row: 2 / 3; margin: 0.5rem 0; }
  .team-slide h3 {      grid-row: 3 / 4; margin: 0.00rem 0 0 0; }
  .team-slide h4 {      grid-row: 4 / 5; margin: 0.00rem 0 0 0; }
}

.team-slide.swiper-slide-active h3,
.team-slide.swiper-slide-active h4,
.team-slide.swiper-slide-active .werte {
  opacity:1;
}



.teamtext {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  padding:1rem;
  position:relative;

  place-self: start center;
  width: 100%;
  aspect-ratio: 1;
}

.teamtext .gross {
  font-size:clamp(1rem, 2.5vw, 2rem);
  line-height:1.2;
  color:#fff; 
}

.teamtext .klein {
  margin-top:1rem;
}




/* bgvideos headervideos */

/*** original, so funktioniert es, aber nicht gut für mobile ***/
/*
.videobox {
  position: fixed;
  z-index:-1;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}
.bgvideo {
  width: 100vw;
  height: 100vh;
  object-fit:cover;
}
*/

.videobox {
  position: fixed;
  z-index:-1;
  top:0px;
  left:0px;

  width: 100vw;
  max-height: 100vh;
  overflow:hidden;
}

.bgvideo {
  width: 100vw;
  height: 100vh;
  object-fit:cover;
}

.bgvideocanvas {
  width: 100vw;
  height: auto;
  //aspect-ratio:1/1;
  //object-fit:cover;
  //border:1px solid red;
}

 
@media (max-width:767px) {

  .headertextgroup {
  }
  .headertextgroup .gridstack {
    width:100vw !important;
    min-height:auto !important;
    max-height:auto !important;
  }

}




/* Lightbox Stage */
/* Lightbox Stage */
/* Lightbox Stage */

#stage {
  position:fixed;
  top:0; bottom:0; left:0; right:0; z-index:1000;
  background-color:rgba(0,0,0,0.75);
  backdrop-filter:blur(4px);

  display:grid; 
  opacity:0; /*wegen jquery show muss das hier auf grid sein damit show/hide passt. beim Start verstecken über opacity*/
  grid-template: 1fr / 1fr;
  place-items:center;
}

.closestage {
  position:absolute;
  top:calc( var(--navheight) + 1rem );
  top:1rem;
  right:1rem;

  width: clamp(2.5rem,5vw,3.25rem);
  height: clamp(2.5rem,5vw,3.25rem);
  font-size: clamp(1.75rem,4vw,2.25rem);
  padding-bottom: clamp(0.2rem,0.4vw,0.225rem);
  line-height: 1;

  background-color:var(--ci2);
  border-radius:50%;
  color:black;

  display:grid;
  place-items:center center;
 
  transition:all 0.25s ease-in-out;
}
.closestage:hover {
  transform:scale(1.1);
}
.closestage:after {
  content:"×";
}

.innerstage {
  width:96%;
  margin-top:1.2rem; 
  max-width:133vh;    /* experiment ohne fixes aspect-ratio und overflow-hidden. hält die Bühne im Viewport und verkleinert notfalls die Breite. */
  height:auto;
  /*max-height:80vh;*/  /* noch experimenteller. für mobile*/
  background:white;
  overflow:hidden;    /* wieder komischer grid-bug der inhalte nicht zentriert wenn overflow nicht verboten ist? */
 }

.innerstage .projektbilderslider {
  aspect-ratio:16 / 9;                /* wenn defekt, dann wieder einschalten */
  width:100%;
  overflow:hidden;

  display:grid;
  grid-template: 1fr / 1fr;
}

.innerstage .projektbilderslider .swiper1 {
  width:100%; 
  height:auto; 
  aspect-ratio:16 / 9;                /* wenn defekt, dann wieder einschalten */

  grid-row: 1 / -1;
  grid-column: 1 / -1;
      min-height: 100%;  /* chrome/edge machen sonst höhe 0 ... auch bei height:auto oder height:100% */
}

.innerstage .swiper-slide {
  aspect-ratio: 16 / 9;
  overflow:hidden;
  display:flex;
  gap:calc(2px);
}

.innerstage .swiper-slide picture {
  height:100%;
  width: 100%;
  flex-grow:1;

  display: grid;
  display: block; /*grid geht nicht mit object-fit in chrome?*/
  grid-template: 1fr / 1fr;
  place-items: center center;

}

@media (max-width:767px) {
  .innerstage .swiper-slide {
    aspect-ratio: 4 / 4;
    flex-direction:column;
  }
  .innerstage .projektbilderslider .swiper1 {
    aspect-ratio: 4 / 4; 
  }
  .innerstage .projektbilderslider {
    aspect-ratio: 4 / 4; 
  }

  .innerstage .swiper-slide .contain {
    object-fit:cover;
  }
  .innerstage .swiper-slide picture {
    /*height:50%;*/
  }
}


.swiper-button-next, 
.swiper-button-prev {
  color:white;
  text-shadow:0 0 5px rgba(0,0,0,0.25),0 0 2px rgba(0,0,0,0.5);
  height: 100%;
  top: 0;
  margin: 0;
  width:10%;
  justify-content:flex-start;
}
.swiper-button-next {
  justify-content: flex-end;
}

.swiper-button-next img,
.swiper-button-prev img {
  width:100%;
  max-width:3rem;
  aspect-ratio: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.33)) brightness(10);
  opacity:0.85;
}

.swiper-button-next.swiper-button-next-team img,
.swiper-button-prev.swiper-button-prev-team img {
  width:100% !important;
  filter:none;
  opacity:1;
}
 
.swiper-button-next::after {
  content:"";
}
.swiper-button-prev::after {
  content:"";
}

.projektbilderslider .swiper-slide {
  background-color:#f7f7f7;
  background-color:#000000;
}

.swiper-button-next-team, 
.swiper-button-prev-team {
  position:unset !important;
  height:unset !important;
  justify-content:center;
}
.swiper-button-next-team:after, 
.swiper-button-prev-team:after {
  content:"" !important;
}

.innerstage .projektbeschreibung {
  width:100%;
  overflow:hidden;
}
.innerstage .projektbeschreibung h4 {
  text-align:right;
  margin-bottom:0;
}

@media (max-width:767px) {
  .innerstage .projektbeschreibung h4 {
    text-align:center;
  }
}

.innerstage .projektbeschreibung p {
  margin:0;
  font-size:0.8rem;
}













/* NAV Sonderformate */
/* NAV Sonderformate */
/* NAV Sonderformate */

.navsection {
  position: fixed;
  top: 0;
  width:100%;
  background-color:rgba(0,0,0,1);
  backdrop-filter:blur(4px);
  z-index:200;
}


nav {
    min-height: var(--navheight);
    padding:1rem 0;
}
nav a.logo {
  color:white;
  font-weight:800;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
nav a.logo img {
  height: 100%;
  width: 100px;
  margin:10% 0 -10% 0;  /*zfxlogo-optik*/ 
}
nav a.logo2 img {
  height: calc( var(--navheight) - 2rem * 1.7 );
  height: 66%;
  width: 100px;
  margin:0;  /*zfxlogo-optik*/  
}

@media (max-width:767px) {
  nav a.logo img {
    width:70%;
  }
}

ul.menu {
  list-style-type: none;
  /*overflow: hidden;*/
  padding: 0;
  margin: 0;
  height:100%;
  display:flex;
  gap:clamp(1rem,4vw,4rem);
  align-items:stretch;
  font-family:myriad-pro-semi-condensed, sans-serif;
}
.menumobile {
    display:none;
}
@media (max-width:1279px) {
  ul.menu {
    display:none;
  }
  .menumobile {
    display:block;
  }
}
ul.menu li {
  display: block;
  text-align:center;
  font-size:clamp(1rem, 1vw, 1.3rem) !important;
  line-height:1.2;
}
ul.menu a {
  display: block;
  height:100%;
  font-weight:500;
  text-transform:uppercase; letter-spacing:0.1em;
  color: white;
  text-decoration: none;
  transition:all 0.25s ease;

  display:flex;
  align-items:center;
}
ul.menu a:hover {
 transform:scale(1.1);
}

ul.menu li.aktiv a {
  font-weight:800;
  color:var(--pagecolor);
}

ul.menu li.aktiv.restorative a { color:var(--cigruen); }
ul.menu li.aktiv.milling a { color:var(--ciorange); }
ul.menu li.aktiv.innovation a { color:var(--ciblau); }
ul.menu li.aktiv.download a { color:var(--ciweiss); }




/* dropdowns (in menu.php verwendet - hier prototyp, in k4webdev dann abstrahiert!*/

  .lngselector, .navselector {
    color:var(--ciweiss);
    position:relative;
    z-index:100;
    line-height:2rem;
    cursor:pointer;
    width:fit-content;
    margin-left:auto;
    margin-right:auto;
  }
  .navselector {
    width:100%;
    border:none;
  }

  
  .lngselector .lngpill,
  .navselector .lngpill {
    outline:1px solid var(--ciweiss);
    background-color:var(--cischwarz);
    border-radius:1rem;
    padding:0 15px;
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
  }

  .lngselector .lnglist,
  .navselector .lnglist {
    background-color:var(--cischwarz);
    color:var(--ciweiss);

    position:absolute; 
    top:1rem;
    line-height:1.75rem;
    padding-top:1rem;
    left:0;
    z-index:1;
    height:0; 
    width:calc(100%);
    overflow:hidden;
    transition:all 0.25s ease-in-out;
    border-radius: 0 0 1rem 1rem;
    outline:1px solid var(--ciweiss);
  }

  .navselector .lngpill {
    border:none;
    border-radius:0;
    justify-content:center;
    font-weight:900;
    outline:none;
  }
  .navselector .lnglist {
    outline:none;
  }

  .lngselector .lnglist li a,
  .navselector .lnglist li a {
    padding:0 15px;
    font-size:1rem !important;
    display:flex;
    justify-content:center;
        text-transform:uppercase;
  }
  .lngselector .lnglist li:hover a,
  .navselector .lnglist li:hover a {
    font-weight:600;
  }

  .lngselector:hover .lnglist {
    height:10rem;
    overflow:hidden;

  }

  .navselector:hover .lnglist {
    height:10.25rem;
    overflow:hidden;
  }






























.flyin {
  width:clamp(350px, 40vw, 800px) !important;
  border:2px solid var(--pagecolor); border-right-width:0px;
  background-color:var(--cidunkelgrau);
  border-radius:5px 0 0 5px;
  /*backdrop-filter:blur(10px);
  box-shadow:0 2px 25px -15px var(--ciweiss);*/
}

.color-override-gruen .flyin {  border-color:var(--cigruen);  background-color:var(--cidunkelgruen); }
.color-override-orange .flyin { border-color:var(--ciorange); background-color:var(--cidunkelorange);}
.color-override-blau .flyin {   border-color:var(--ciblau);   background-color:var(--cidunkelblau);}




/* Footer */
/* Footer */
/* Footer */

footer {
    border-top:2px solid #fff;
    background-color:rgba(0,0,0,0.7);
    backdrop-filter:blur(4px);
    color:var(--ciweiss);
}

.partner footer {
      min-height:320px;  /* seltesamer bug auf partner-seite, versteh ich nicht */
}

 








a.mehranzeigen {
  color:#fff; 
  text-decoration:none;
  font-style:italic;

  display:inline-flex;    /* innen flex, außen inline */
  flex-direction:column;
  align-items:center;

  transition:all 0.25s ease-in-out;
}

a.mehranzeigen.quer {
  flex-direction:row;
  gap:0.5rem;
}

@media (max-width:579px) {
  a.mehranzeigen.quer {
    flex-direction:column;
    gap:0rem;
  }
}


a.mehranzeigen img {
  width:clamp(70px, 4vw, 80px);
}


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


















/* Layout */
/* Layout */
/* Layout */

section {
  display:grid;  /* experimentell ... erlaubt es, bei sections mit gesetzter Höhe die Rows vertikal auszurichten ohne margin-auto etc. - ist das gut? */
  align-content:space-evenly;
  scroll-margin:var(--navheight);
}

.row {
  --gapratio: 0.02;
  --colgap: min(calc(100vw * var(--gapratio)), calc(var(--maxwidth) * var(--gapratio)) );
  margin-left:auto;
  margin-right:auto;
  width:96%;
  max-width:var(--maxwidth);
  display:flex;
  flex-wrap:wrap;  
  /*xxxgap: var(--colgap);*/  /* gap und flexwrap und %-Breiten sind keine Freunde. also padding auf die cols ... */
}
.row-gap-0 { --gapratio:0.00; }
.row-gap-05 { --gapratio:0.005; }
.row-gap-1 { --gapratio:0.01; }
.row-gap-2 { --gapratio:0.02; }
.row-gap-4 { --gapratio:0.04; }

.row-fullheight { height:100%; }

.row-fullwidth, .row-100  { width:100%; max-width:none; }
.row-96         { width:96%; max-width:none;  }
.row-90         { width:90%; max-width:none;  }
.row-80         { width:80%; max-width:none;  }
.row-70         { width:70%; max-width:none;  }
.row-60         { width:60%; max-width:none;  }
.row-50         { width:50%; max-width:none;  }

.nowrap         { flex-wrap: nowrap; }
.wrap           { flex-wrap: wrap; }
.nogap          { gap:0; }
/*.nogap          { gap:2rem; }*/

@media (max-width:767px) {
  .row-s-90      { width:90%; max-width:none; }
  .row-s-96      { width:96%; max-width:none; }
  .s-wrap         { flex-wrap:wrap; gap:0; }          /* skizze für gap und wrap wenn responsive-umbruch. durchdenken und ausarbeiten! */
}

@media (max-width:1023px) {
  .row-m-90      { width:90%; max-width:none; }
  .row-m-96      { width:96%; max-width:none; }
  .m-wrap         { flex-wrap:wrap; gap:0; }          /* skizze für gap und wrap wenn responsive-umbruch. durchdenken und ausarbeiten! */
}
@media (max-width:1279px) {
  .row-l-90      { width:90%; max-width:none; }
  .row-l-96      { width:96%; max-width:none; }
  .l-wrap         { flex-wrap:wrap; gap:0; }          /* skizze für gap und wrap wenn responsive-umbruch. durchdenken und ausarbeiten! */
}



.row            { align-items:stretch; }            /* default */   /* die Inhalte von rows (das sollten cols sein) innerhalb der row ausrichten */
.row.V-top      { align-items:flex-start; }         
.row.V-center   { align-items:center; }
.row.V-bottom   { align-items:flex-end; }
.row.V-stretch  { align-items:stretch; }

.row            { justify-content:space-between; }  /* default */ 
.row.H-left     { justify-content:flex-start; }
.row.H-center   { justify-content:center; }
.row.H-right    { justify-content:flex-end; }



.grid {
  --repeat:4;
  max-width:var(--maxwidth);
  width:96%;
  margin-left:auto; 
  margin-right:auto;
  display:grid;
  grid-template-columns:repeat(var(--repeat),1fr);
  grid-template-rows:auto;
  grid-gap:1rem;
  place-items:stretch;
}

.grid-fullwidth, .grid-100  { width:100%; max-width:none; }
.grid-90         { width:90%; max-width:none;  }
.grid-80         { width:80%; max-width:none;  }
.grid-70         { width:70%; max-width:none;  }
.grid-60         { width:60%; max-width:none;  }
.grid-50         { width:50%; max-width:none;  }

.grid-outergap-05 { padding-left: 0.5rem; padding-right:0.5rem; }
.grid-outergap-1  { padding-left: 1rem;   padding-right:1rem; }
.grid-outergap-2  { padding-left: 2rem;   padding-right:2rem; }
.grid-outergap-3  { padding-left: 3rem;   padding-right:3rem; }

.grid-gap-05 { grid-gap:0.5rem; }
.grid-gap-1 { grid-gap:1rem; }
.grid-gap-2 { grid-gap:2rem; }

.grid-col-1 { --repeat:1; }
.grid-col-2 { --repeat:2; }
.grid-col-3 { --repeat:3; }
.grid-col-4 { --repeat:4; }
.grid-col-5 { --repeat:5; }
.grid-col-6 { --repeat:6; }
.grid-col-7 { --repeat:7; }
.grid-col-8 { --repeat:8; }
.grid-col-9 { --repeat:9; }
.grid-col-10 { --repeat:10; }
.grid-col-11 { --repeat:11; }
.grid-col-12 { --repeat:12; }

.grid > .col { width:100%; padding:0; }

@media (max-width:1023px) {
  .grid-m-gap-05 { grid-gap:0.5rem; }
  .grid-m-gap-1 { grid-gap:1rem; }
  .grid-m-gap-2 { grid-gap:2rem; }

  .grid-m-col-1 { --repeat:1; }
  .grid-m-col-2 { --repeat:2; }
  .grid-m-col-3 { --repeat:3; }
  .grid-m-col-4 { --repeat:4; }
  .grid-m-col-5 { --repeat:5; }
  .grid-m-col-6 { --repeat:6; }
  .grid-m-col-7 { --repeat:7; }
  .grid-m-col-8 { --repeat:8; }
  .grid-m-col-9 { --repeat:9; }
  .grid-m-col-10 { --repeat:10; }
  .grid-m-col-11 { --repeat:11; }
  .grid-m-col-12 { --repeat:12; }

}


@media (max-width:767px) {
  .grid-s-gap-05 { grid-gap:0.5rem; }
  .grid-s-gap-1 { grid-gap:1rem; }
  .grid-s-gap-2 { grid-gap:2rem; }

  .grid-s-col-1 { --repeat:1; }
  .grid-s-col-2 { --repeat:2; }
  .grid-s-col-3 { --repeat:3; }
  .grid-s-col-4 { --repeat:4; }
  .grid-s-col-5 { --repeat:5; }
  .grid-s-col-6 { --repeat:6; }
  .grid-s-col-7 { --repeat:7; }
  .grid-s-col-8 { --repeat:8; }
  .grid-s-col-9 { --repeat:9; }
  .grid-s-col-10 { --repeat:10; }
  .grid-s-col-11 { --repeat:11; }
  .grid-s-col-12 { --repeat:12; }

  .grid-outergap-s-1 {
    padding-left: 1rem;   padding-right:1rem;
  }
  .grid-outergap-s-05 {
    padding-left: 0.5rem;   padding-right:0.5rem;
  }
  .grid-outergap-s-0 {
    padding-left: 0rem;   padding-right:0rem;
  }

}



/* geht nicht. neu denken.*/
.grid.subgrid {
    grid-template-rows:repeat(9,auto);
} 
.grid.subgrid > .col {
  grid-row: span 9;

  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:subgrid;
  row-gap: 0;
}








.col {
  /*flex-shrink:1;*/  /* reduziert die Breite in % von col-50, sodass die Row eine GAP haben kann. hat nichts mit dem Flex INNERHALB der col zu tun! */
  display:flex;
  flex-direction:column;
  width:auto;
  padding:0 var(--colgap);
} /* die inhalte von rows sind cols */

.col-5 {  width:5%   !important; }
.col-10 {  width:10%  !important; }
.col-15 {  width:15%  !important; }
.col-20 {  width:20%  !important; }
.col-25 {  width:25%  !important; }
.col-30 {  width:30%  !important; }
.col-33 {  width:calc(100% / 3)  !important; }
.col-40 {  width:40%  !important; }
.col-45 {  width:45%  !important; }
.col-50 {  width:50%  !important; }
.col-60 {  width:60%  !important; }
.col-66 {  width:calc(100% / 3 * 2)  !important; }
.col-70 {  width:70%  !important; }
.col-75 {  width:75%  !important; }
.col-80 {  width:80%  !important; }
.col-90 {  width:90%  !important; }
.col-100 {  width:100%  !important; }

@media (max-width:1365px) {
.col-xl-5 {  width:5%   !important; }
.col-xl-10 {  width:10%  !important; }
.col-xl-15 {  width:15%  !important; }
.col-xl-20 {  width:20%  !important; }
.col-xl-25 {  width:25%  !important; }
.col-xl-30 {  width:30%  !important; }
.col-xl-33 {  width:calc(100% / 3)  !important; }
.col-xl-40 {  width:40%  !important; }
.col-xl-50 {  width:50%  !important; }
.col-xl-60 {  width:60%  !important; }
.col-xl-66 {  width:calc(100% / 3 * 2)  !important; }
.col-xl-70 {  width:70%  !important; }
.col-xl-75 {  width:75%  !important; }
.col-xl-80 {  width:80%  !important; }
.col-xl-90 {  width:90%  !important; }
.col-xl-100 {  width:100%  !important; }
}
@media (max-width:1279px) {
.col-l-5 {  width:5%   !important; }
.col-l-10 {  width:10%  !important; }
.col-l-15 {  width:15%  !important; }
.col-l-20 {  width:20%  !important; }
.col-l-25 {  width:25%  !important; }
.col-l-30 {  width:30%  !important; }
.col-l-33 {  width:calc(100% / 3)  !important; }
.col-l-40 {  width:40%  !important; }
.col-l-50 {  width:50%  !important; }
.col-l-60 {  width:60%  !important; }
.col-l-66 {  width:calc(100% / 3 * 2)  !important; }
.col-l-70 {  width:70%  !important; }
.col-l-75 {  width:75%  !important; }
.col-l-80 {  width:80%  !important; }
.col-l-90 {  width:90%  !important; }
.col-l-100 {  width:100%  !important; }
}
@media (max-width:1023px) {
.col-m-5 {  width:5%   !important; }
.col-m-10 {  width:10%  !important; }
.col-m-15 {  width:15%  !important; }
.col-m-20 {  width:20%  !important; }
.col-m-25 {  width:25%  !important; }
.col-m-30 {  width:30%  !important; }
.col-m-33 {  width:calc(100% / 3)  !important; }
.col-m-40 {  width:40%  !important; }
.col-m-50 {  width:50%  !important; }
.col-m-60 {  width:60%  !important; }
.col-m-66 {  width:calc(100% / 3 * 2)  !important; }
.col-m-70 {  width:70%  !important; }
.col-m-75 {  width:75%  !important; }
.col-m-80 {  width:80%  !important; }
.col-m-90 {  width:90%  !important; }
.col-m-100 {  width:100%  !important; }
}
@media (max-width:767px) {
.col-s-auto {  width:auto   !important; }
.col-s-5 {  width:5%   !important; }
.col-s-10 {  width:10%  !important; }
.col-s-15 {  width:15%  !important; }
.col-s-20 {  width:20%  !important; }
.col-s-25 {  width:25%  !important; }
.col-s-30 {  width:30%  !important; }
.col-s-33 {  width:calc(100% / 3)  !important; }
.col-s-40 {  width:40%  !important; }
.col-s-50 {  width:50%  !important; }
.col-s-55 {  width:55%  !important; } 
.col-s-60 {  width:60%  !important; }
.col-s-66 {  width:calc(100% / 3 * 2)  !important; }
.col-s-70 {  width:70%  !important; }
.col-s-75 {  width:75%  !important; }
.col-s-80 {  width:80%  !important; }
.col-s-90 {  width:90%  !important; }
.col-s-100 {  width:100%  !important; }
}
@media (max-width:479px) {
.col-xs-5 {  width:5%   !important; }
.col-xs-10 {  width:10%  !important; }
.col-xs-15 {  width:15%  !important; }
.col-xs-20 {  width:20%  !important; }
.col-xs-25 {  width:25%  !important; }
.col-xs-30 {  width:30%  !important; }
.col-xs-33 {  width:calc(100% / 3)  !important; }
.col-xs-40 {  width:40%  !important; }
.col-xs-50 {  width:50%  !important; }
.col-xs-55 {  width:55%  !important; } 
.col-xs-60 {  width:60%  !important; }
.col-xs-66 {  width:calc(100% / 3 * 2)  !important; }
.col-xs-70 {  width:70%  !important; }
.col-xs-75 {  width:75%  !important; }
.col-xs-80 {  width:80%  !important; }
.col-xs-90 {  width:90%  !important; }
.col-xs-100 {  width:100%  !important; }
}


.col            { justify-content:flex-start; }
.col.V-top      { justify-content:flex-start;    }             /* die inhalte von cols (sollten texte etc. sein) innerhalb der col ausrichten */
.col.V-center   { justify-content:center; }
.col.V-bottom   { justify-content:flex-end; }
.col.V-spacebetween   { justify-content:space-between; }
.col.V-spacearound   { justify-content:space-around; }
.col.V-spaceevenly   { justify-content:space-evenly; }

.col            { align-items:stretch; }
.col.H-left     { align-items:flex-start;    }
.col.H-center   { align-items:center; }
.col.H-right    { align-items:flex-end; }
.col.H-stretch  { align-items:stretch; }
.col.H-spacebetween  { align-items:space-between; }

@media (max-width:767px) {  /* -s */
  .col.V-s-top      { justify-content:flex-start;    }         
  .col.V-s-center   { justify-content:center; }
  .col.V-s-bottom   { justify-content:flex-end; }
  .col.V-s-spacebetween   { justify-content:space-between; }
  .col.H-s-left     { align-items:left;    }
  .col.H-s-center   { align-items:center; }
  .col.H-s-right    { align-items:right; }
  .col.H-s-stretch  { align-items:stretch; }
}

.pushl-5  { margin-left:5%; }
.pushl-10 { margin-left:10%; }


@media (max-width:767px) {

  .row-s-column { flex-direction:column; }   

  .row-s-reverse { flex-direction:column-reverse; }   /*warum das column-reverse sein muss, verstehen wir nicht. eigentlich haben wir rows die wrappen. */
  .order-s-1 { order:1; }
  .order-s-2 { order:2; }
  .order-s-3 { order:3; }
  .order-s-4 { order:4; }
  .order-s-5 { order:5; }
  .order-s-6 { order:6; }
}





.gridstack {
  display:grid;
  grid-template: 1fr / 1fr;
  max-height:calc(100vh - var(--navheight));
  overflow:hidden;  /*edge chrome lassen bild sonst entkommen? */

  min-height:60vh;  /* für hannes-zitat, vielleicht ist das hier zu allgemein? */
}

.gridstack > * {
  grid-column:  1 / -1;
  grid-row:     1 / -1;
  width: 100%;
  height: 100%;
}


.doubleimg {
  display:grid;
  grid-template: 1fr / 1fr;
  overflow:visible;
}

.doubleimg > * {
  grid-column:  1 / -1;
  grid-row:     1 / -1;
  width: 100%;
  height: auto;

  display:grid;
  place-items:end end;  /* quickfix für den einen anwendungsfall ... wenn öfter verwendet, muss das flexibler sein */
}



/*bilder in boxen platzieren*/
img, picture, video, svg {
  width:100%;
  height:auto;
  display:block;
}
.cover {  /* bilder in box einpassen ohne ränder. nützlich bei gridstack, aber auch sonst*/
  width:100%;
  height:100%;
  object-fit: cover;
  overflow: hidden;   /* nötig für images die in grid-zellen gecovert werden sollen? komisches verhalten */
  object-position:50% 50%;
}
.contain {  /* bilder in box einpassen, mit ränder (ganzes Bild immer sichtbar, aber so groß wie möglich*/
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:50% 50%;
}













/* layout overrides */

.p-0       { padding: 0rem !important; }
.p-05       { padding: 0.5rem !important; }
.p-1       { padding: 1rem !important; }
.p-2       { padding: 2rem !important; }
.p-3       { padding: 3rem !important; }
.p-4       { padding: 4rem !important; }

.p-2vw     { padding: 2vw !important; }

.pt-0       { padding-top: 0rem !important; }
.pt-05       { padding-top: 0.5rem !important; }
.pt-1       { padding-top: 1rem !important; }
.pt-2       { padding-top: 2rem !important; }
.pt-3       { padding-top: 3rem !important; }
.pt-4       { padding-top: 4rem !important; }
.pt-5       { padding-top: 5rem !important; }
.pt-1nav    { padding-top: var(--navheight); }
.pt-2nav    { padding-top: calc(2 * var(--navheight)); }



.pb-0       { padding-bottom: 0rem !important; }
.pb-05       { padding-bottom: 0.5rem !important; }
.pb-1       { padding-bottom: 1rem !important; }
.pb-2       { padding-bottom: 2rem !important; }
.pb-3       { padding-bottom: 3rem !important; }
.pb-4       { padding-bottom: 4rem !important; }
.pb-5       { padding-bottom: 5rem !important; }

.pl-0       { padding-left: 0rem !important; }
.pl-05      { padding-left: 0.5rem !important; }
.pl-1       { padding-left: 1rem !important; }
.pl-2       { padding-left: 2rem !important; }
.pl-3       { padding-left: 3rem !important; }
.pl-4       { padding-left: 4rem !important; }
.pl-5       { padding-left: 5rem !important; }

.pl-0p       { padding-left: 0% !important; }
.pl-5p       { padding-left: 5% !important; }
.pl-10p       { padding-left: 10% !important; }
.pl-20p       { padding-left: 20% !important; }
.pl-30p       { padding-left: 30% !important; }
.pl-40p       { padding-left: 40% !important; } 
.pl-50p       { padding-left: 50% !important; }
.pl-60p       { padding-left: 60% !important; }
.pl-70p       { padding-left: 70% !important; }

.pl-1vw     { padding-left: 1vw !important; }
.pl-2vw     { padding-left: 2vw !important; }
.pl-3vw     { padding-left: 3vw !important; }
.pl-4vw     { padding-left: 4vw !important; }
.pl-5vw     { padding-left: 5vw !important; }


.pr-0       { padding-right: 0rem !important; }
.pr-05       { padding-right: 0.5rem !important; }
.pr-1       { padding-right: 1rem !important; }
.pr-2       { padding-right: 2rem !important; }
.pr-3       { padding-right: 3rem !important; }
.pr-4       { padding-right: 4rem !important; }
.pr-5       { padding-right: 5rem !important; }

.pr-0p       { padding-right: 0% !important; }
.pr-5p       { padding-right: 5% !important; }
.pr-10p       { padding-right: 10% !important; }
.pr-20p       { padding-right: 20% !important; }
.pr-30p       { padding-right: 30% !important; }
.pr-40p       { padding-right: 40% !important; }
.pr-50p       { padding-right: 50% !important; }
.pr-60p       { padding-right: 60% !important; }
.pr-70p       { padding-right: 70% !important; }

.pr-1vw     { padding-right: 1vw !important; }
.pr-2vw     { padding-right: 2vw !important; }
.pr-3vw     { padding-right: 3vw !important; }
.pr-4vw     { padding-right: 4vw !important; }
.pr-5vw     { padding-right: 5vw !important; }


@media (max-width:767px) {
.p-s-0       { padding: 0rem 0rem 0rem 0rem !important; }
.p-s-1       { padding: 1rem 1rem 1rem 1rem !important; }
.p-s-2       { padding: 2rem 2rem 2rem 2rem !important; }
.p-s-3       { padding: 3rem 3rem 3rem 3rem !important; }
.p-s-4       { padding: 4rem 4rem 4rem 4rem !important; }

.pt-s-0       { padding-top: 0rem !important; }
.pt-s-05       { padding-top: 0.5rem !important; }

.pb-s-0       { padding-bottom: 0rem !important; }
.pb-s-05       { padding-bottom: 0.5rem !important; }

.pr-s-0       { padding-right: 0rem !important; }

}

 

.mt--6       { margin-top: -6rem !important; }
.mt--5       { margin-top: -5rem !important; }
.mt--4       { margin-top: -4rem !important; }
.mt--3       { margin-top: -3rem !important; }
.mt--2       { margin-top: -2rem !important; }
.mt--1       { margin-top: -1rem !important; }
.mt--05       { margin-top: -0.5rem !important; }
.mt-05       { margin-top: 0.5rem !important; }
.mt-0       { margin-top: 0rem !important; }
.mt-1       { margin-top: 1rem !important; }
.mt-2       { margin-top: 2rem !important; }
.mt-3       { margin-top: 3rem !important; }
.mt-4       { margin-top: 4rem !important; }
.mt-5       { margin-top: 5rem !important; }
.mt-6       { margin-top: 6rem !important; }
.mt-7       { margin-top: 7rem !important; }
.mt-8       { margin-top: 8rem !important; }
.mt-9       { margin-top: 9rem !important; }
.mt-10       { margin-top: 10rem !important; }

.mt-auto    { margin-top: auto !important; }

.mt-1nav    { margin-top: var(--navheight); }
.mt-2nav    { margin-top: calc(2 * var(--navheight)); }
.mt--1nav   { margin-top: calc(-1 * var(--navheight)); }
.mt--2nav   { margin-top: calc(-2 * var(--navheight)); }
.mt--3nav   { margin-top: calc(-3 * var(--navheight)); }

@media (max-width:1023px) {
  .mt-m-0      { margin-top: 0rem !important; }
  .mt-m-05      { margin-top: 0.5rem !important; }
  .mt-m-1       { margin-top: 1rem !important; }
  .mt-m-2       { margin-top: 2rem !important; }
  .mt-m-3       { margin-top: 3rem !important; }
  .mt-m-4       { margin-top: 4rem !important; }
}

@media (max-width:767px) {
  .mt-s-0      { margin-top: 0rem !important; }
  .mt-s-05      { margin-top: 0.5rem !important; }
  .mt-s-1       { margin-top: 1rem !important; }
  .mt-s-2       { margin-top: 2rem !important; }
  .mt-s-3       { margin-top: 3rem !important; }
  .mt-s-4       { margin-top: 4rem !important; }
}


.mb-0       { margin-bottom: 0rem !important; }
.mb-05       { margin-bottom: 0.5rem !important; }
.mb-1       { margin-bottom: 1rem !important; }
.mb-2       { margin-bottom: 2rem !important; }
.mb-3       { margin-bottom: 3rem !important; }
.mb-4       { margin-bottom: 4rem !important; }
.mb-5       { margin-bottom: 5rem !important; }
.mb-6       { margin-bottom: 6rem !important; }
.mb-7       { margin-bottom: 7rem !important; }
.mb-8       { margin-bottom: 8rem !important; }

.mb-auto    { margin-bottom: auto !important; }


.mb-1nav    { margin-bottom: var(--navheight); }
.mb-2nav    { margin-bottom: calc(2 * var(--navheight)); }
.mb--1nav   { margin-bottom: calc(-1 * var(--navheight)); }
.mb--2nav   { margin-bottom: calc(-2 * var(--navheight)); }
.mb--3nav   { margin-bottom: calc(-3 * var(--navheight)); }

@media (max-width:1023px) {
  .mb-m-0       { margin-bottom: 0rem !important; }
  .mb-m-1       { margin-bottom: 1rem !important; }
  .mb-m-2       { margin-bottom: 2rem !important; }
  .mb-m-3       { margin-bottom: 3rem !important; }
  .mb-m-4       { margin-bottom: 4rem !important; }
}
@media (max-width:767px) {
  .mb-s-0       { margin-bottom: 0rem !important; }
  .mb-s-1       { margin-bottom: 1rem !important; }
  .mb-s-2       { margin-bottom: 2rem !important; }
  .mb-s-3       { margin-bottom: 3rem !important; }
  .mb-s-4       { margin-bottom: 4rem !important; }
}

.ml-auto       { margin-left: auto !important; }
.ml-noauto     { margin-left: inherit !important; }

.ml-0       { margin-left: 0rem !important; }
.ml-025       { margin-left: 0.25rem !important; }
.ml-05       { margin-left: 0.5rem !important; }
.ml-1       { margin-left: 1rem !important; }
.ml-2       { margin-left: 2rem !important; }
.ml-3       { margin-left: 3rem !important; }
.ml-4       { margin-left: 4rem !important; }
.ml-5       { margin-left: 5rem !important; }

.ml-5p      { margin-left: 5% !important; }
.ml-10p     { margin-left: 10% !important; }
.ml-20p     { margin-left: 20% !important; }
.ml-30p     { margin-left: 30% !important; }
.ml-40p     { margin-left: 40% !important; }


.mr-auto       { margin-right: auto !important; }
.mr-noauto     { margin-right: inherit !important; }

.mr-0       { margin-right: 0rem !important; }
.mr-1       { margin-right: 1rem !important; }
.mr-2       { margin-right: 2rem !important; }
.mr-3       { margin-right: 3rem !important; }
.mr-4       { margin-right: 4rem !important; }
.mr-5       { margin-right: 5rem !important; }

.mr-5p      { margin-right: 5% !important; }
.mr-10p     { margin-right: 10% !important; }
.mr-20p     { margin-right: 20% !important; }
.mr-30p     { margin-right: 30% !important; }
.mr-40p     { margin-right: 40% !important; }

@media (max-width:1279px) {
    .ml-l-noauto     { margin-left: inherit !important; }
    .ml-l-0          { margin-left: 0rem !important; }
}

@media (max-width:1023px) {
    .ml-m-noauto     { margin-left: inherit !important; }
    .ml-m-0          { margin-left: 0rem !important; }
}

@media (max-width:767px) {
  .ml-s-auto    { margin-left: auto !important; }
  .ml-s-noauto     { margin-left: inherit !important; }


  .ml-s-0       { margin-left: 0rem !important; }
  .ml-s-1       { margin-left: 1rem !important; }
  .ml-s-2       { margin-left: 2rem !important; }
  .ml-s-3       { margin-left: 3rem !important; }
  .ml-s-4       { margin-left: 4rem !important; }
  .ml-s-5       { margin-left: 5rem !important; }

  .ml-s-5p      { margin-left: 5% !important; }
  .ml-s-10p     { margin-left: 10% !important; }
  .ml-s-20p     { margin-left: 20% !important; }
  .ml-s-30p     { margin-left: 30% !important; }
  .ml-s-40p     { margin-left: 40% !important; }

  .mr-s-auto       { margin-right: auto !important; }

  .mr-s-0       { margin-right: 0rem !important; }
  .mr-s-1       { margin-right: 1rem !important; }
  .mr-s-2       { margin-right: 2rem !important; }
  .mr-s-3       { margin-right: 3rem !important; }
  .mr-s-4       { margin-right: 4rem !important; }
  .mr-s-5       { margin-right: 5rem !important; }

  .mr-s-5p      { margin-right: 5% !important; }
  .mr-s-10p     { margin-right: 10% !important; }
  .mr-s-20p     { margin-right: 20% !important; }
  .mr-s-30p     { margin-right: 30% !important; }
  .mr-s-40p     { margin-right: 40% !important; }
}

.hide { display: none; }
.block { display: block; }

@media (max-width:1023px) {
  .m-hide     { display:none; }
  .m-block    { display:block; }
}
@media (max-width:767px) {
  .s-hide     { display:none; }
  .s-block    { display:block; }
}


/* add-on styling */

.border-1 {
  border:1px solid var(--pagecolor);
}