@font-face{
   font-family: Helvetica-Bold; 
   src:URL(fonts/HelveticaLTStd-Bold.otf); 
}
@font-face{
   font-family: Helvetica-Roman; 
   src:URL(fonts/HelveticaLTStd-Roman.otf); 
}
@font-face{
   font-family: Helvetica-Italic; 
   src:URL(fonts/HelveticaLTStd-Obl.otf); 
}

#backgroundimage{background-image: url("/Content/Einsteigen_30x40cm.png");background-size: cover; background-position: 50% 50%;
 }

html{ overflow: scroll !important; }
body::-webkit-scrollbar {
  width: 5x;
}
body {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
  overflow: scroll !important;
}
body::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
body::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG) ;
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}

img{padding: 2px;}



html{height: 100vh; margin: 0px; overflow: hidden;
  --scrollbarBG: #CFD8DC;
  --thumbBG: #90A4AE;}
body{height: 100vh; min-height: 100vh; margin: 0px; padding: 0px;}
h1{font-family: Helvetica-Bold; margin-bottom: 0px; font-weight: 100;}
h2{font-family: Helvetica-Roman; margin-top: 0px; font-weight: 100; font-size: 20px;}
h3{font-family: Helvetica-Bold; margin-bottom: 0px; font-weight: 100; font-size:16pt;}
p{font-family: Helvetica-Roman; font-style: normal; font-weight: 100;}
i{font-family: Helvetica-Italic;  font-style: normal;}
a{text-decoration: none;}




.work-item{margin-bottom: 20px;  }
.flex-container{display:flex; flex-direction: row; height: 100%; width: 100%}
.flex-container-col{display:block}
.navigation-container{min-width: max-content; padding-right: 20px; padding-left: 35px;}
.page-content{min-width: 250px; overflow: auto;width: 100%;}
.menu{margin-right: 12px;}
.twentypercent{width: 30%;}
.eightypercent{width: 70%;}
.page-details{overflow: auto;}
.selected{text-decoration: underline; border-color: white !important; border-width: 0px;}
.selected:active{border-color: white !important; border-width: 0px;}
.selected:link{border-color: white !important; border-width: 0px;}
.selected:visited{border-color: white !important; border-width: 0px;}
.selected:focus{border-color: white !important; border-width: 0px;}
.selected:focus-within{border-color: white !important; border-width: 0px;}
.selected:focus-visible{border-color: white !important; border-width: 0px}


a:active{border-color: white !important; border-width: 0px;}
a:link{border-color: white !important; border-width: 0px;}
a:visited{border-color: white !important; border-width: 0px;}
a:focus{border-color: white !important; border-width: 0px;}
a{border-color: white !important; border-width: 0px;}
a:focus-visible{border-color: white !important; border-width: 0px;}

.padding{ padding-right: 12px; padding-left: 12px;}

.videocontainer {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


a:link {
    color: black;
	transition-duration: 0.5s;
}
a:visited {
    color: black;
} 
a:hover {
    color: gray;
	transition-duration: 0.5s;
}
a:active {
    color: black;
}


@media only screen and (max-width: 800px) {
	#work{display:none;}
	.twentypercent{width: 100%;}
  .eightypercent{width: 100%;}
	
	
}


@media only screen and (max-width: 600px) {
	body{ padding: 16px;}
	.flex-container{display:flex; flex-direction: column; height: auto;}
	.flex-container-col{display:flex; flex-direction: row;  justify-content: flex-start; flex-wrap: wrap}
	.navigation-container{padding: 0;}
	.page-content{padding-left: 5px;padding-right: 5px;}
		.twentypercent{width: 100%;}
  .eightypercent{width: 100%;}
	.page-details{padding-left: 0px;}
	.padding{ padding-right: 0px; padding-left: 0px;}
}