html {
  scroll-behavior: smooth; /* make automated scrolling look smooth */
}


body { /* general styling */
  color: white;
  font-size: 20px; /* main font size in PIXELS, all other font sizes use EM values */
  line-height: 1.6;
  font-family: 'Abel', sans-serif;
  background-color: #000000;
  background-attachment: scroll;
  background-image: url("img/felix-huesken-colorist-koeln-cologne-vienna.jpg");
  background-size: 135%;
  background-position: left top;
  background-repeat: no-repeat;
}

h1, h2 {
  all: inherit;
  display: inline;
  margin: 0;
  padding: 0;
  background-color: hsla(0,0%,0%,0%);
}


a { /* link styling */
  cursor: pointer;
  color: white;
  font-weight: normal;
  text-decoration: none;
  font-style: normal;
  background-color: hsla(0,0%,0%,25%);
}

a:before, a:after {
  content: "\00a0";
}

.lang {
  position: absolute;
  right: 0;
  top: 0;
  width: 2.5em;
  display: block;
  float: right;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  background-color: hsla(0,0%,0%,0%);
  overflow: hidden;

}

.lang a{
    vertical-align: top;
  background-color: hsla(0,0%,0%,0%);
  margin: 0;
  padding: 0;
}

.lang a:before, .lang a:after {
  content: "";
}

.header{ /* header with my name on the top of the page */
  font-size: 1.4em;
  padding: 0px 0px 0px 5px;
  margin: 0.2em 0em 1.2em 0em;
}
.subTitle{
  font-size: 0.7em;
  display: block;
  margin: -0.5em 0em 0em 0em;
}
.subHeader {
  font-size: 0.5em;
}


.main { /* main DIV */
  width: 100%;
  padding: 0px;
  margin: 0px 0px 0px 0px;
  display: flex;
  justify-content: center; /* center all content */
  overflow: show;
}
.submain { /* inner centered DIV, in which all content is placed */
  width: 95%;
  padding: 0px;
  margin: 0px 0px 0px -10px;
  overflow: show;
} 


/* buttons/section headers */
.btn{ /* button styling */
  cursor: pointer;
  text-align: left;
  color: white;
  font-size: 1em;
  font-family: 'Offside', sans-serif;
  border: none;
  border-width: 0px;
  padding: 5px;
  margin: 0.2em 0px 0px 0px;
  width: auto;
  display: block;
}
.collapsible{ /* empty */
}
.collapsible h2{
  width: auto;
}
.collapsible:before { /* Adding a "+" before expanded content sections */
  content: "+ ";
  float: left;
  margin-right: 0.2em;
}
.active:before { /* Adding a "-" before expanded content sections */
  content: "- ";
}
.vita{ /* add some space between the Vita and the content above it */
  width: calc(100% + 10px); /* makes button as wide as the content section below it, just used for VITA at the moment*/
  /*margin: 5em 0em 0em 0em;*/
}
.vitaContainer {
  margin-top: 45vh;
}


/* content sections */
.content { /* Content Sections that collapse/expand */
  width: 100%;
  padding: 0px 5px 0px 5px;
  margin: 0px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-in-out;
}
.content-noColl { /* Content Sections that don't collapse/expand */
  width: 100%;
  padding: 5px;
  margin: 0px;
  display: block;
  overflow: auto;
}
.spVitaBreak {
  font-size: 0.8em;
  opacity: 70%;
  display: block;
}
.content-noColl br {
  display: none;
}
.vitaPosters {
  height: 140px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0px;
  margin: -1em 0em -1em 0em;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}
.vitaPosters::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}
.vitaPosters img{
  height: inherit;
  padding: 0;
  margin-right: 5px;
}
.showreel {
  margin: 0;
}
.imgContent{
  width: 100%;
  margin: 0;
  padding: 0;
  display: block;
}
.imgResolveBaselight{
  width: 80%;
  margin: 0 auto;
  padding: 0;
  display: block;
}
.workshopList br{
  display: none;
}
.smallText {
  font-size: 0.8em;
  opacity: 70%;
}


/* footer with contact information */
.footer {
  z-index: 1000;
  position: fixed;
  left:0;
  right:0;
  bottom: 0;
  height: 2.2em;
  background-image: linear-gradient(to right,rgba(107, 46, 46,80%),rgba(77, 107, 46,100%),rgba(46, 107, 107,100%),rgba(76, 46, 107,100%),rgba(107, 46, 46,80%));
  padding: 5px;
  margin: 0px;
  text-align: center;
}
.footTablet { /*hide tablet/desktop footer by default */
  display: none;
}
.footMobile { /* display mobile footer by default */
  font-size: 1.1em;
  display: block;
}
.glow { /* glow anomation for vCard/contact button */
  animation: glow 5s infinite alternate;
  border-radius: 0.2em;
}
@keyframes glow {
  from {
    box-shadow: 0 0 5px -5px #ffffff;
  }
  to {
    box-shadow: 0 0 5px 5px #ffffff;
  }
}


/* colored backgrounds */
.bg1 {background-color: hsla(36,40%,30%,90%);}
.bg2 {background-color: hsla(72,40%,30%,90%);}
.bg3 {background-color: hsla(108,40%,30%,90%);}
.bg4 {background-color: hsla(144,40%,30%,90%);}
.bg5 {background-color: hsla(180,40%,30%,90%);}
.bg6 {background-color: hsla(216,40%,30%,90%);}
.bg7 {background-color: hsla(252,40%,30%,90%);}
.bg8 {background-color: hsla(288,40%,30%,90%);}
.bg9 {background-color: hsla(324,40%,30%,90%);}
.bg10 {background-color: hsla(360,40%,30%,90%);}
.bg11 {background-color: hsla(0,0%,20%,90%);}
.bg12 {background-color: hsla(30,40%,30%,90%);}



.hiding { /* used for hidden elements*/
  display: none;
}



.video {
    /*position: relative;*/
    /*width: 100%;*/
    aspect-ratio: 16 / 9;
    width: 100%;
    display: inline-block;
    padding: 0px;
    margin: 0;
}

.video--iframe {
    position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video--placeholder {
  width: 100%;
  position: absolute;
}

.video--youtube {
    padding-bottom: 56.23%;
    width: 100%;
    height: 0;
    overflow: hidden;
	position: relative;
    object-fit: cover;
    background-color: black;
}

.youtube--button {
    background: none;
	border: 0;
	cursor: pointer;
	height: 100%;
	left: 0;
	position: absolute;
	text-indent: -9999px;
	top: 0;
	transition: transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
	width: 100%;
}

.youtube--button:before {
    width:100%;
    height:100%;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    background: url(https://www.youtube.com/yt/about/media/images/brand-resources/icons/YouTube-icon_dark.svg) no-repeat center center;
    background-size: 10%; 
}

.youtube--button:hover:before {
    background: url(https://youtube.com/yt/about/media/images/brand-resources/icons/YouTube-icon-full_color.svg) no-repeat center center;
    background-size: 10%; 
}



/* responsive design */

@media only screen and (orientation: landscape) {
  body {font-size: 14px; background-size: 100%;}
  .header {font-size: 1.8em; margin: 0.2em 0em 0.3em 0em;}
  .btn {font-size: 1.4em;}
  .footer {
    font-size: 1.4em;
    background-image: linear-gradient(to right,rgba(107, 46, 46,40%),rgba(77, 107, 46,90%),rgba(46, 107, 107,100%),rgba(76, 46, 107,90%),rgba(107, 46, 46,40%));
  }
}
  

/* on wide displays increase font size and show tablet/desktop footer */
@media only screen and (min-width: 768px) and (orientation: landscape) {
  body {font-size: 21px; background-size: 105%;}
  .header {font-size: 1.4em; margin: 0.2em 0em 1.5em 0em;}
  .btn {font-size: 1em;}
  .vitaContainer {margin: 8em 0em 0em 0em;}
  .submain {width: 70%;}
  .footer {
    font-size: 1em;
    background-image: linear-gradient(to right,rgba(107, 46, 46,20%),rgba(77, 107, 46,80%),rgba(46, 107, 107,100%),rgba(76, 46, 107,80%),rgba(107, 46, 46,20%));
  }
  .footTablet {display: block;}
  .footMobile {display: none;}
  .spVitaBreak {display: inline;}
  .content-noColl br {display: inline;}
  .vitaPosters {height: 180px;}
  .video {width: 49%;}
  .imgResolveBaselight{width: 50%;}
  .workshopList br{display: inline;}
}

@media only screen and (min-width: 768px) and (orientation: portrait) {
  body {font-size: 21px; background-size: 110%;}
  .header {font-size: 1.4em; margin: 0.2em 0em 1.5em 0em;}
  .btn {font-size: 1em;}
  .vitaContainer {margin: 7em 0em 0em 0em;}
  .submain {width: 90%;}
  .footer {
    font-size: 1em;
    background-image: linear-gradient(to right,rgba(107, 46, 46,20%),rgba(77, 107, 46,80%),rgba(46, 107, 107,100%),rgba(76, 46, 107,80%),rgba(107, 46, 46,20%));
  }
  .footTablet {display: block;}
  .footMobile {display: none;}
  .spVitaBreak {display: inline-block;}
  .content-noColl br {display: inline;}
  .vitaPosters {height: 180px;}
  .video {width: 49%;}
  .imgResolveBaselight{width: 50%;}
  .workshopList br{display: inline;}
}