/* Set variables */

:root {
  --qc-font-color-passive: #a1a1a1;
  --qc-font-color-light: #f1f1f1;
  --qc-font-color-dark: #666666;
  --qc-font-color-link: #7fb5b5;
  --qc-color-white: #ffffff;
  --qc-color-black: #000000;
  --qc-font-size-huge-header: 3em;
  --qc-font-size-big-header: 2em;
  --qc-font-size-normal-header: 1.3em;
  --qc-font-size-small-header: 1.03em;
}

@font-face {
  font-family: 'Azonix';
  /*a name to be used later*/
  src: url('Azonix.otf');
  /*URL to font*/
}

#impressum.columns.column h1 {
  font-family: sans-serif;
  text-align: left;
}

h2 {
  text-align: center;
}

/* Overwrite Bulma settings */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: 400;
}

.content h1 {
  text-align: center;
  color: var(--qc-font-color-dark);
}

.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
  color: var(--qc-font-color-dark);
}

.content h1 {
  font-size: var(--qc-font-size-big-header);
  margin-bottom: .9em;
}

.content h1:not(:first-child) {
  margin-top: 1.5em;
}

.content h2 {
  font-size: var(--qc-font-size-normal-header);
  margin-bottom: .5714em;
}

.content h2:not(:first-child) {
  margin-top: 1.1428em;
}

.content h3 {
  font-size: var(--qc-font-size-small-header);
  margin-bottom: .1em;
}

.content h3:not(:first-child) {
  margin-top: 1.1428em;
}

a.anchor {
    display: block;
    position: relative;
    top: -4em;
    visibility: hidden;
}

div#impressum.container div.columns div.column h3 {
  font-size: var(--qc-font-size-small-header);
  margin-bottom: .1em;
  font-weight: 600;
  line-height: 1.125;
  color: var(--qc-font-color-dark);
}

div#impressum.container div.columns div.column h3:not(:first-child) {
  margin-top: 1.1428em;
}

.content ul {
  list-style-type: none;
}

.zoom {
  transition: transform 1s;
  width: 150px;
  /* Animation */
  margin: 0 auto;
}

.zoom:hover {
  transform: scale(2);
  /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}


/* fix for mac */
image {
  align-self: flex-start;

  width: 13px;
  height: 6px;
  padding-top: 10px;
}

.contactimage {
    max-width: 95%;
    max-height: 550px;
    width: auto;
    height: auto;
    display: block;
	margin: 0 auto; 
    border-radius: 6px;	
}

/* Style the header */
.header {
  padding: 10px 26px;
  background: var(--qc-color-white);
  color: var(--qc-color-black);
}

/* figure {
  margin-top:82px;
}*/ 

.stickyTopBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  font-size: 30px;
  padding-left: 3%;
  padding-right: 3%;
  background-color: var(--qc-color-white);
  stroke: var(--qc-color-black);
/*   box-shadow: 0 0 5px 10px #ffffff; */ 
}

.stickyTopBar .column {
  padding-left: 0;
  padding-right: 0;
  padding-top: 22px;
}

.stlogo {

  height: 60px;
  padding-top: 10px;
}

.topleft {
  cursor: pointer;
  text-align: left;
  display: block;
}

.topright {
  cursor: pointer;
  text-align: right;
  float: right;
  stroke: var(--qc-font-color-dark);
}

.column.narrow {
  padding: 0.05em;
}

.column {
  padding: 2em;
}

/* Text in Image */
.centeredCaptionFontContainer h3 {
  	text-align: left;
  font-family: Azonix,
    /* Arial, Helvetica, 'Times New Roman',*/
    sans-serif;
  color: silver;
    font-size: clamp(0.2em, 3cqi, 3em);
}

.centeredCaptionFontContainer h4 {
  color: #2E8B57;
	font-size: clamp(0.1em, 1.5cqi, 2em);
}

.centeredCaption {
  position: absolute;
 /*
  container-type: inline-size;*/
  top: 45%;
  left: 8%;
  width: 84%;
  transform: translate(0%, -50%);
  font-weight: lighter;
}

.centeredCaptionFontContainer {

}

.lightbox {
  background-color: #fafffa;
}

.darkbox {
  background-color: #fbfbfb;
}

.mcqstlogo {
  width: 130px;
  height: 60px;
  padding-top: 10px;
}

/* On click on menu the overlay will cover the screen */
.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  font-size: 2em;
}

.overlay-content {
  font-family: Arial, Helvetica, 'Times New Roman', sans-serif;
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  color: var(--qc-color-white);
  transition: 1.0s;
}

.overlay a:hover,
.overlay a:focus {
  color: #7fb5b5;
  transition: 1.0s;
}

.overlay .closebtn {
  position: absolute;
  stroke: var(--qc-font-color-light);
  top: 0px;
  right: 4.5%;
  font-size: 30px;
}

@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px;
  }

  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

@media screen and (max-height: 450px) {
  .overlay a {
    font-size: 20px;
  }

  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
p {
  text-align:justify;
}


.figureProject p {
  z-index: 45;
  pointer-events: none;
  font-size: 1.6em;
  color: var(--qc-font-color-dark);
  display: block;
  text-align: center;
}

.figureProject {
  overflow: hidden;
}

.bottom-line .columns {
  left: 0;
  width: 100%;
  z-index: 50;
  font-size: 14px;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 15px;
  padding-bottom: 15px;
  color: var(--qc-font-color-dark);
  background-color: var(--qc-color-white);
  margin-left: 0;
  margin-right: 0;
}

.bottom-line a {
  color: var(--qc-font-color-dark);
}

.bottom-line a:hover {
  color: var(--qc-font-color-passive);
}

.bottom-left {
  text-align: right;
}

.bottom-center {
  text-align: center;
}

.bottom-right {
  text-align: left;
}

.copyright {
    display: flex;
    justify-content: space-between;
    left: 0;
    width: 100%;
    z-index: 50;
    font-size: 14px;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 45px;
    padding-bottom: 45px;
    color: var(--qc-font-color-dark);
    background-color: var(--qc-color-white);
    margin-left: 0;
    margin-right: 0;
}

img.contactimage.portrait {
  max-width: 75% !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}