:root {
  /* colors */
  --black: #000;
  --white: #fff;
  --light-grey: #cdcdcd;
  --red: #ff0000;
  --red-background: rgb(255,	0,	0, 0.3);
  --cic: rgba(255, 155, 0, 0.9);
  --cic-hover:rgb(235, 142, 2);
  --cic-bright: rgb(160, 60, 0);
  --line-color: rgba(255, 155, 0, 0.8);
  --boc: rgb(255, 255, 255);
  --makara: #897d6e;

  /* dark mode */  
  --dark: #000000;
  --dark2: #1d1102;
  --dark3: #534e4b;
	
  --font-color-dark: #fff;
  --contact-box-dark: #191919;
  --contact-box-dark-hover:#232323;

  /* light mode  */
  --bright: #ffffff;
  --bright2: #c6c0be;
  --bright3: #948b87;

  --font-color-light: #333;
  --contact-box-light: #F5F5F5;
  --contact-box-light-hover: #ebebeb;

  /* label colors */
  --label-neu: #343a40;
  --label-verkauft: rgb(139, 37, 0);
  --label-premium: #fd7e14;

  /* text variables*/

  --ca1: "open_sansitalic";
  
  --m1: "open_sansregular";
  --m2: "open_sansregular";

  --h1: "antonregular";
  --h2: "antonregular";
  --h3: "antonregular";
  --h4: "antonregular";
  --h5: "antonregular";


  --sub1: "saira_condensedregular";
  --sub2: "saira_condensedregular";
  --sub3: "saira_condensedregular";
  --sub4: "saira_condensedregular"; /* just for the footer. sub3 brakes the boxes */

  --bo1: "open_sansregular";
  --bo2: "open_sansregular";
  --bo3: "open_sansregular";
  --bo4: "open_sansregular"; /* this is just for the footer - 14px brakes the boxes */
}

/* installed fonts start ========================================== */

@font-face {
  font-family: "antonregular";
  src: url("../fonts/Anton/anton-regular-webfont.woff2") format("woff2"),
    url("../fonts/Anton/anton-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "open_sansregular";
  src: url("../fonts/Open_Sans/opensans-variablefont_wdthwght-webfont.woff2")
      format("woff2"),
    url("../fonts/Open_Sans/opensans-variablefont_wdthwght-webfont.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "open_sanscondensed_light";
  src: url("opensans-condlight-webfont.woff2") format("woff2"),
    url("opensans-condlight-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "open_sansitalic";
  src: url("../fonts/Open_Sans/opensans-italic-variablefont_wdthwght-webfont.woff2")
      format("woff2"),
    url("../fonts/Open_Sans/opensans-italic-variablefont_wdthwght-webfont.woff")
      format("woff");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "saira_condensedregular";
  src: url("../fonts/Saira_Condensed/sairacondensed-regular-webfont.woff2")
      format("woff2"),
    url("../fonts/Saira_Condensed/sairacondensed-regular-webfont.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;
}

/* installed fonts end ========================================== */

/* .bgc.bright  and .bgc.dark -> the background color for this one needs to be changed directly on the variable. */


.bgc {
  background-color: var(--black)!important;
  color: var(--white) !important;
}

.bgc.dark {
  /* background-color: #0f0f0f !important;  */
  background-color: var(--dark) !important;
  border-color: var(--line-color);
  color: var(--white) !important;
}

.bgc.dark2 {
  /* background-color: #0f0f0f !important;  */
  background-color: var(--dark2) !important;
  border-color: var(--line-color);
  color: var(--white) !important;
}

.bgc.dark3 {
  background-color: var(--dark3) !important;
  border-color: var(--line-color);
  color: var(--white) !important;
}

.bgc.bright {
  /* background-color: #fff !important;  */
  background-color: var(--bright) !important;
  color: var(--black) !important;
  border-color: var(--line-color) !important;
}

.bgc.bright2 {
  /* background-color: #0f0f0f !important;  */
  background-color: var(--bright2) !important;
  color: var(--black) !important;
  border-color: var(--line-color);
}

.bgc.bright3 {
  background-color: var(--bright3) !important;
  color: var(--black) !important;
  border-color: var(--line-color);
}

.cic.dark {
  background-color: var(--black) !important;
  color: var(--line-color) !important;
}

/* this color is just for the header */


/* ends here  ====================  */

.bright a {
  color: var(--black);
}

.dark a {
  color: var(--white);
}

.tc1.dark {
  color: var(--tc1-dark);
}

.tc1.bright {
  color: var(--tc1-bright);
}

/* this is for the lines that separate the layouts*/

.line1Container {
  background-color: var(--bgc-dark) !important;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.line1 {
  width: 80px;
  height: 1px;
  background-color: var(--line-color);
  margin: 80px auto;
}

.line1Container .bright {
  background-color: var(--white) !important;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.line2 {
  height: 2px;
  background-color: var(--line-color);
}

.line1-sidebar {
  width: 80px;
  height: 1px;
  background-color: var(--line-color);
  margin: 40px auto;
}

.boc {
  background-color: rgba(0, 0, 0, 0.8);
}

/* LINKS
============================================= */

a {
  color: rgb(150, 150, 150);
}

a:hover {
  text-decoration: none;
  color: #908270;
}

*[data-toggle="collapse"].show,
.active > *,
a.active,
a:hover,
.m1 a:active,
.m1 a:hover {
  color: var(--cic);
}

/* TEXT
================================================== */

h1 {
  font-size: 60px !important;
  font-family: var(--h1) !important;
  line-height: 100% !important;
  hyphens: none !important;
}

h2 {
  font-size: 40px !important;
  font-family: var(--h2) !important;
  line-height: 100% !important;
  hyphens: none !important;
  color: inherit !important;
}

h3 {
  font-size: 32px !important;
  font-family: var(--h3) !important;
  line-height: 100% !important;
  hyphens: none !important;
}

h4 {
  font-size: 16px !important;
  font-family: var(--h4) !important;
  line-height: 100% !important;
  hyphens: none !important;
  color: inherit !important;
}

h5 {
  font-size: 14px !important;
  font-family: var(--h5) !important;
  line-height: 100% !important;
  hyphens: none !important;
  color: inherit !important;
}

.sub1 {
  font-size: 32px;
  font-family: var(--sub1) !important;
  line-height: 100% !important;
  hyphens: none !important;
  font-weight: bold !important;
}

.sub2 {
  font-size: 26px !important;
  font-family: var(--sub2) !important;
  line-height: 100%!important;
  hyphens: none !important;
  font-weight: bold !important;
}

.sub3 {
  font-size: 20px !important;
  font-family: var(--sub3) !important;
  line-height: 100% !important;
  hyphens: none !important;
  font-weight: bold !important;
}

/* sub4 created just for the footer */
.sub4 {
  font-size: 18px !important;
  font-family: var(--sub4) !important;
  line-height: 100% !important;
  hyphens: none !important;
  font-weight: bold !important;
}

.m1 a {
  color: var(--makara) !important;
}

.m1 {
  font-family: var(--m1) !important;
  font-weight: lighter !important;
  font-size: 16px !important;
}

.m2 {
  font-family: var(--m2) !important;
  font-weight: lighter !important;
  font-size: 14px !important;
}

.ca1 {
  font-family: var(--ca1) !important;
  font-style: italic !important;
  line-height: 100% !important;
  font-size: 12px !important;
}

.bo1 {
  font-family: var(--bo1) !important;
  line-height: 150% !important;
  font-size: 18px !important;
}

.bo2 {
  font-family: var(--bo2) !important;
  line-height: 150% !important;
  font-size: 16px !important;
}

.bo3 {
  font-family: var(--bo3) !important;
  line-height: 150% !important;
  font-size: 14px !important;
}

/* this was created only for the footer / article list on partials - 14px breaks the boxes */
.bo4 {
  font-family: var(--bo4) !important;
  line-height: 150% !important;
  font-size: 12px !important;
}

/* Clamp was not working properly so I created a media querie to properly resize the fonts*/

@media all and (max-width: 1280px) {

  h1 { font-size: 36px !important; } /* 60% of the original size */

  h2 { font-size: 24px !important; } /* 60% of the original size */

  h3 { font-size: 19.2px !important; } /* 60% of the original size */

  /* .sub1 { font-size: 19.2px !important; } */

  .sub1 { font-size: 25px !important; }
}

/* Special black and white them for using opacity  
================================================== */

.background-opacity {
 background-color: rgba(0,0,0,0.8) !important;
 color: #fff;
}

.background-opacity.bright {
  background-color: rgba(255,255,255, 0.8) !important;
  color: #000;
}

/* BUTTONS 
================================================== */

/* other buttons */

.button1.dark {
  background-color: var(--makara) !important;
  color: #fff !important;
}

.button1.bright {
  background-color: var(--makara) !important;
  color: var(--cic) !important;
}

.button2 {
  padding: 2px 5px !important;
  border-top: 1px solid !important;
  border-bottom: 1px solid !important;
  border-right: none !important;
  border-left: none !important;
  cursor: pointer !important;
  border-color: var(--red) !important;
  background-color: var(--black);
  color: #fff;
}

.button2:hover { color: var(--red) !important; }

button.dark {
  color: #fff !important;
  background-color: rgb(25, 25, 25) !important;
}

button.bright {
  color: var(--cic) !important;
  background-color: rgb(25, 25, 25) !important;
}

@media (min-width: 960px) {

  .mobile-only { display: none !important; }
}

/* Necessary to ensure the text inside the button is editable in safari */
[contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

/* change the color of svgs ==================== */

.svg-black-white { fill: white; }

.svg-black-white.bright { fill: black; }

/* this is the shadow bellow the header ==================== */
.shadow-bellow-header {
  margin: 0;
  box-shadow: 3px 1px 4px 4px rgba(0, 0, 0, 0.8) !important;
  z-index: 1 !important;
}

.shadow-bellow-header.bright {
  margin: 0;
  box-shadow: 3px 1px 4px 4px rgba(221, 220, 220, 0.4) !important;
  z-index: 1 !important;
}

/* this was created only for reporter_cover ==================== */

/* only for reporter_cover */ 
.reporter-dark-white {
  /* #d3d3d9 */
background: linear-gradient(180deg, rgba(0,0,0, 0) 20%, #ebebf2 0%) !important;
color: #000 !important;
}

.reporter-dark-white.bright {
background: linear-gradient(180deg, rgba(255,255,255, 0) 20%, #000 0%) !important;
color: #fff !important;
}

@media all and (max-width: 1440px) {	

  .reporter-dark-white {
    background: linear-gradient(180deg, rgba(0,0,0, 0) 15%, #ebebf2 0%) !important;  
  }
  
  .reporter-dark-white.bright {
    background: linear-gradient(180deg, rgba(255,255,255, 0) 15%, #000 0%) !important;
  }  
  }

@media all and (max-width: 1280px) {	

  .reporter-dark-white {
    background: linear-gradient(180deg, rgba(0,0,0, 0) 12%, #ebebf2 0%) !important;  
  }
  
  .reporter-dark-white.bright {
    background: linear-gradient(180deg, rgba(255,255,255, 0) 12%, #000 0%) !important;
  }  
  }

@media all and (max-width: 960px) {	

  .reporter-dark-white {
    background: linear-gradient(180deg, rgba(0,0,0, 0) 8%, #ebebf2 0%) !important;  
  }
  
  .reporter-dark-white.bright {
    background: linear-gradient(180deg, rgba(255,255,255, 0) 8%, #000 0%) !important;
  }  
  }

  @media all and (max-width: 640px) {	

    .reporter-dark-white {
      background: linear-gradient(180deg, rgba(0,0,0, 0) 0%, #ebebf2 0%) !important;  
    }
    
    .reporter-dark-white.bright {
      background: linear-gradient(180deg, rgba(255,255,255, 0) 0%, #000 0%) !important;
    }    
  }

  /* only for the modal - this changes border color around the pop up. it stays here to keep consistency with the colors */

  .modal-content { border: 1px solid var(--cic) !important; }  

  /* bottom corner social contact dark mode ==================== */

  .send-message-info { background-color: var(--contact-box-dark)!important; }  

  .send-message-info.bright { background-color: var(--bgc-light) !important; }

  .bright .contact-item a  { 
    color: var(--font-color-light) !important; 
    background-color: var(--contact-box-light) !important;
  }

  .contact-item a { 
    color: var(--font-color-dark) !important;
    background-color: var(--bgc-dark) !important; 
  } 

  .contact-box { background-color: var(--contact-box-dark) !important; }

  .contact-box.bright { background-color: var(--contact-box-light) !important; }

  .contact-item a:hover { background-color: var(--contact-box-dark-hover) !important; }

  .bright .contact-item a:hover { background-color: var(--contact-box-light-hover) !important; }


  /* coop-label */
  .coop-label {
    position: absolute;
    z-index: 9;
    margin-top: 30px;
    width: 50%;
    font-size: 32px;
    line-height: 32px;
    padding: 0 5px;
    text-transform: uppercase;
  }
  
  .coop-label.keine { display: none; }
  
  .coop-label.neu {
    color: var(--white);
    background-color: var(--label-neu);
    text-align: center;
  }
  
  .coop-label.verkauft {
    color: var(--white);
    background-color: var(--label-verkauft);
    text-align: center;
    font-size: 11px;
    line-height: 2.1;
  }
  
  .coop-label.premium {
    color: var(--white);
    background-color: var(--label-premium);
    text-align: center;
  }