:root {
  --viewpoint: 94vh;
  --maincolor: black;
  --secondary: white;
}

/* ––––––––––––––––––––––––––– */
/* P R O J E C T - C O L O R S */
/* ––––––––––––––––––––––––––– */

.style-presentisfemale {
  --maincolor: #fff;
  --secondary: #e60028;
}

.style-bremenvier {
  --maincolor: #E5B000;
  --secondary: #000;  
}

.style-unmuteyourself {
  --maincolor: #753BBD;
  --secondary: #fff;
}

.style-onlineleasing {
  --maincolor: #2F2F2F;
  --secondary: #fff;
}

.style-ba {
  --maincolor: #C7CDDE;
  --secondary: #52769C;
}

.style-tenez {
  --maincolor: #F3F2F0;
  --secondary: #A88D95;
}

.style-ampas {
  --maincolor: #6C0200;
  --secondary: #E5B000;
}

.style-halim {
  --maincolor: #E7DFD7;
  --secondary: #2B5339;
}

.style-eliz {
  --maincolor: #22363B;
  --secondary: #F3F2F0; 
}

.style-hdg { 
  --maincolor: #1A1818;
  --secondary: #e60028;
}

.style-dana {
  --maincolor: #1A1818;
  --secondary: #00FFFF;
}

/* ––––––––––––––––––––––––– */
/* P R O J E C T - F O N T S */
/* ––––––––––––––––––––––––– */

@font-face { 
font-family: "Cormorant"; 
src: url("../fonts/Cormorant/static/Cormorant-Regular.ttf"); 
}

@font-face { 
font-family: "Roboto"; 
src: url("../fonts/Roboto/static/Roboto-Light.ttf"); 
}

/*@font-face { 
font-family: "Clash-Light"; 
src: url("../fonts/Clash/ClashDisplay-Light.ttf"); 
}

@font-face { 
font-family: "Clash-Regular"; 
src: url("../fonts/Clash/ClashDisplay-Regular.ttf"); 
}*/

@font-face {
  font-family: 'Clash';
  src: url('../fonts/Clash/ClashDisplay-Variable.woff2') format('woff2'),
       url('../fonts/Clash/ClashDisplay-Variable.woff') format('woff'),
       url('../fonts/Clash/ClashDisplay-Variable.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}


body {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Clash, serif; /*Zuvor Cormorant*/
  font-weight: 500;
}

a {
  text-decoration: none;
  color: inherit;
}

header {
  font-family: Clash, serif;
  font-weight: 400;
  letter-spacing: 0.05rem;
}

header .fw-name {
  font-family: Clash, serif;
/*  font-weight: 100;
  font-size: 1rem;
  letter-spacing: 0.12rem;
  text-transform: uppercase;
  font-kerning: auto;*/
}

/* ––––––––––––– */
/*  H E A D E R  */
/* ––––––––––––– */

.navbar-expand-lg {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ––––––––––––––– */
/* O V E R V I E W */
/* ––––––––––––––– */

.carousel-centered {
  display: flex;
  justify-content: center; 
  align-items: center;
}

.carousel-centered img {
  height: var(--viewpoint);
  min-width: auto;
}

.card {
  --bs-card-border-radius: 0;
}

.imagezoom {
  overflow: hidden;
}

.card img:hover {
  transform: scale(1.05);
  transition: all 1.0s;
}

.overview-text {
  margin: 20px;
  margin-left: 10px;
}

.overview {
  background-color: var(--maincolor);
  color: var(--secondary);
  border: 0;
}

.designfield .btn {
  margin: 1rem 0.5rem 0.5rem 0;
  padding-left: 20px;
  padding-right: 20px;

  --bs-border-radius: 3rem;
  margin-left: 0;

  --bs-btn-color: var(--secondary);
  --bs-btn-border-color: var(--secondary);
  --bs-btn-hover-color: var(--maincolor);
  --bs-btn-hover-bg: var(--secondary);
  --bs-btn-hover-border-color: var(--secondary);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: var(--maincolor);
  --bs-btn-active-bg: var(--secondary);
  --bs-btn-active-border-color: var(--secondary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--secondary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--secondary);
  --bs-gradient: none;

  letter-spacing: 0.05rem;
  cursor: inherit;
}

/* ––––––––––––––– */
/* P R O J E C T S */
/* ––––––––––––––– */


.project {
  background-color: var(--maincolor);
  color: var(--secondary);
  padding: 0;
  margin: 0;
  padding-top: 55px;
  overflow-x: hidden;
}

.project-description {
  overflow-x: hidden;

  /*margin-bottom: 155px;*/
}

.project-image img {
  padding: 0;
  margin: 0;
}

.project-image video {
  max-width: 100%;
  /*max-height: var(--viewpoint);*/
}

.project-description {
  min-height: var(--viewpoint);
  display: flex;
  flex-direction: column;
  position: relative;
  top: 0;
}

.project-wrapper {
  max-height: var(--viewpoint);
  flex-grow: 1;
  display: flex;
  align-items: center;
  position: relative;
}

.project-text {
  border: 0;
  padding: 3rem 3rem 5rem 0.5rem;
  position: fixed;
  top: 3rem;
  margin: 0;
  max-height: var(--viewpoint);
  overflow-y: auto;
}

.project-description .designfield {
  margin-bottom: 2rem;
}

.display-4 {
  font-weight: 550;
  line-height: 90%
}

.project-description a {
  text-decoration: underline;
  color: inherit;
  padding: 0.2rem 0.25rem 0.1rem 0.25rem;
}

.project-description a:hover {
  text-decoration: none;
  color: var(--maincolor);
  background-color: var(--secondary);
}

.display-topline {
  /*font-style: italic;*/
  font-weight: 300;
  font-size: calc(1.0rem + 0.6vw);
  margin-bottom: 0;
}

.project-description p {
  font-weight: 100;
}

.accordion-button {
  letter-spacing: 0.03rem;
  font-weight: 500;
}

.accordion-button:not(.collapsed) {
  background-color: var(--maincolor);
  color: var(--secondary);

  /*font-weight: 400;*/
  /*text-transform: uppercase;*/
}

.accordion {
  --bs-accordion-color: var(--secondary);
  --bs-accordion-bg: var(--maincolor);
  --bs-accordion-border-color: none;
  --bs-accordion-btn-color: var(--secondary);
  --bs-accordion-btn-bg: var(--maincolor);
  --bs-accordion-active-color: var(--maincolor);
  --bs-accordion-active-bg: var(--secondary);
  --bs-accordion-btn-icon: none;
  --bs-accordion-btn-active-icon: none;

}

/* ––––––––––– */
/* F O O T E R */
/* ––––––––––– */

.footer {
  background-color: var(--secondary);
  color: var(--maincolor);
  padding-top: 1rem;
  padding-bottom: 0.1rem;
  position: relative;
}

.footer a {
  text-decoration: none;
  color: inherit;
  padding: 0.2rem 0.25rem 0.1rem 0.25rem;
}

.footer a:hover {
  color: var(--secondary);
  background-color: var(--maincolor);
}

/* ––––––––––– */
/* M O B I L E */
/* ––––––––––– */

@media (max-width: 991.98px) {
  .section {
    flex-direction: column;
  }
  .project-description {
    padding: 0rem 2rem 0rem 2rem;
  }
  .project-text {
    position: static;
    max-height: none;
    /*overflow: hidden;*/
  }
}