@font-face {
  font-family: 'EuclidMono-Vanguard-WebXL';
  src: url('../fonts/EuclidMono-Vanguard-WebXL.eot');
  src: url('../fonts/EuclidMono-Vanguard-WebXL.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
h1, h2, h3, h4, h5, h6 {
  font-family: EuclidMono-Vanguard-WebXL !important;
}



@font-face {
  font-family: 'EuclidMono-Vanguard-WebXL';
  src: url('../fonts/EuclidMono-Vanguard-WebXL.eot');
  src: url('../fonts/EuclidMono-Vanguard-WebXL.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
nav a {
  font-family: EuclidMono-Vanguard-WebXL;
}



@font-face {
  font-family: 'WorkSans-Regular';
  src: url('../fonts/WorkSans-Regular.eot');
  src: url('../fonts/WorkSans-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


/* Das Layout - Angaben die Bootstrap überschreiben! */
/* Eigene CSS-Deklarationen */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: WorkSans-Regular !important;
  background: #fff;
  font-size: 18px;
  color: #000;
  margin: 0;
  padding: 0;
  /*overflow:hidden;*/
}
    section.smart {
      display:none;
    }
    section.desc {
      display:block;
    }

    /* Hamburger */
    #smart-hamburger {
      cursor: pointer;
      position: fixed;
      z-index: 1000;
      padding-left: 0.5rem;
      padding-right: 0;
      margin-top: -0.25rem;
      right: 1rem;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      transform-origin: top right;
      top: 12px;
      user-select: none; 
    }
    #smart-hamburger.active {
      background-color: transparent;
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      transform: rotate(-90deg);
      right: calc(1rem + 21px);
    }
    #desc-hamburger {
      cursor: pointer;
      position: fixed;
      z-index: 1000;
      padding-left: 0.5rem;
      padding-right: 0;
      margin-top: -0.25rem;
      right: 1rem;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      transform-origin: top right;
      top: 12px;
      user-select: none; 
    }
    #desc-hamburger.active {
      background-color: transparent;
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      transform: rotate(-90deg);
      right: calc(1rem + 26px);
    }

    div.line {
      width: 35px;
      height: 1px;
      margin: 6px 0;
      -webkit-transition: all 0.3s ease-in-out;
      -moz-transition: all 0.3s ease-in-out;
      -ms-transition: all 0.3s ease-in-out;
      -o-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out;
      background-color: #000;
    }

    /* Navigation */
    .startnav {
      position:fixed;
      top:14px;
      left:calc( 50% - 20px);
      background-color:transparent;
      padding-left:14px;
    }
    .startnav li {
      display:inline-block;
      padding-left:15px;
    }
    .startnav a {
      color:#fff;
      text-decoration: none;
      display: block;
      height:30px;
      /*text-shadow: -1px -1px 5px rgba(0, 0, 0, 1);*/
      text-shadow: -2px -2px 4px #000, 2px 2px 4px #000;
    }
    .startnav a:hover {
      color:#fff;
      text-decoration: none;
      border-bottom:1px solid #fff;
    }
    #smartnav {
      display:none;
    }
    #descnav {
      /*position: fixed;
      top: 4px;
      right: 10px;
      z-index: 999;
      background-color: #fff;
      width: 100%;
      left: calc(50% + 15px);*/
      display:flex;
      justify-content: end;
      padding-right:55px;
      padding-top:12px;
    }
    #smartnav {
      position: static;
      background-color: #fff;
      width: 100%;
      padding-left:15px;
      padding-top:0px;
      
    }
    /*nav.top ul {
      padding-left:0;
    }*/
    #descnav ul li {
      display: inline-block;
      padding-right: 20px;
    }
    #descnav ul li a {
      display: block;
      height:30px;
    }
    #smartnav ul {
      float: right;
      width: calc(100% + 115px);
      margin-bottom:0!important;
    }
    #smartnav ul.smartsub {
      /*border-bottom:1px solid #000;*/
      box-shadow:0px 2px 3px -2px rgba(0,0,0,0.3);
      padding-bottom:15px;
    }
    #smartnav ul li {
      display:block;
      padding-right:8px;
    }
    #smartnav ul li a {
      display:block;
      text-align:right;
    }
    #smartnav ul.sub {
      margin-top:15px;
    }
    nav a {
      hyphens: none;
    }
    nav.top ul li a {
      font-family: EuclidMono-Vanguard-WebXL;
      color:#000;
      text-decoration: none;
    }
    /*nav.top ul li.current, nav.top ul li a:hover, a:hover, a:focus {
      text-decoration: none!important;
      border-bottom:1px solid #f00;
    }*/
    nav.top ul li.current a, nav.top ul li a:hover, a:hover, a:focus {
      text-decoration: none!important;
      border-bottom:1px solid #000;
    }
    nav.sub ul {
      list-style-type: none;
      padding:0;
    }
    nav.sub ul li {
      display:inline-block;
      padding-right:15px;
    }
    nav.sub ul li a {
      color:#000;
      width:100%;
    }
    ul.sub.descsub {
      display:none;

    }
    ul.descsub {
      margin-top:12px;
    }
    ul.descsub li {
      /*float:right;*/
    }
/* Interna-Navigation
------------------------------------------- */
.rightnav.col-sm-2 {
  padding-top:0px;
  height: 100vh;
}
nav#internanav li {
  list-style-type: none;
}
ul.sub li {
  padding-left:2px;
}
ul.smartsubsub {
  display:none;
  padding-left: 10px;
}
li.current.dropdown > ul.smartsubsub,
li.section.dropdown > ul.smartsubsub {
  display:block!important;
}
li.current a {
  border-bottom:1px solid #000;
}

/* LINK ICONS - shows type of file
  ------------------------------------ */
/*a[href$=".pdf"],
a[href$=".PDF"],
a.pdf {
    padding: 2px;
    padding-left: 20px;
    background: url(../public/images/icons/page_white_acrobat.png) no-repeat left center;
  }
a[href$=".docx"],
a[href$=".DOCX"],
a.docx {
    padding: 2px;
    padding-left: 20px;
    background: url(../public/images/icons/page_word.png) no-repeat left center;
  }
a[href$=".xlsx"],
a[href$=".XLSX"],
a.xlsx {
    padding: 2px;
    padding-left: 20px;
    background: url(../public/images/icons/page_excel.png) no-repeat left center;
  }
a[href$=".zip"],
a[href$=".ZIP"],
a.zip {
    padding: 2px;
    padding-left: 20px;
    background: url(../public/images/icons/page_white_zip.png) no-repeat left center;
  }*/

/* Header + Logo
-------------------------------------------- */
    
header {
  position:fixed;
  top:0;
  background-color:#fff;
  z-index:99;
  width:100%;
}
section.smart {


}
.logo img {
  max-width: 425px;
  padding-top: 62px;
  padding-left:25px;
  padding-bottom:0;
}
.leftcontent a:hover, .smartlogo a:hover, #smartnav a {
  text-decoration: none;
  border-bottom: 0 solid transparent;
}
.smartlogo {
  width:calc(100% - 62px);
  padding:15px;
  max-width:375px;

}
.white {
  position:absolute;
  top:5px;
  left:0;
  width:50%;
  height:96vh;
  background-color:#fff;
  z-index:900;
}
.desclogo {
  position: absolute;
  top: 159px;
  width: 360px;
  max-width: 360px;
  right: 20px;
  background-color: transparent;
}
.desclogo img {
  width: 100%;
}

/* Article, Content */

h1, h2, h3, h4 {
    padding-bottom:24px;
}
.h1, h1 {
  font-size: 52px;
  letter-spacing: -4px;
}
.container {
    margin-top:120px;
}
article {
  padding-top:0px;
  text-align:left;
  padding-left:0px;
  max-width: 480px;   
  /*hyphens: auto; */ 
}
article ul {
  padding-left: 18px;
}
article ul li {
  padding-bottom: 1em;
}
.intrapage img.jontekfoundation {
  margin-top: -20px;
}
div.intranav {
  position: absolute;
  top:111px;
  left:52px;
  /*padding-top: 80px;
  padding-right: 190px;*/
}
div.intranav a:hover {
  border-bottom: 1px solid #000;
}
/* WYSIWYG EDITOR ALIGNMENT CLASSES
-------------------------------------------- */
.left, .text-left {
text-align: left
}
.center, .text-center {
text-align: center
}
.right, .text-right {
text-align: right
}
.justify, .justify-text {
text-align: justify;
hyphens: auto;
}
/* LINK-Kontur
-------------------------------------------- */
a {
    outline:0!important;
    text-decoration:none!important;
    color:#000;
}
a:hover {
    text-decoration:none;
    color:#000;
    border-bottom:1px solid #000;
    outline-offset: -4px;
    outline:0!important;
}
a:focus {
  outline-offset: -4px;
}
article a {
    text-decoration:none;
    color:#000;
    border-bottom:1px solid #000;
}
/*article a img {
    text-decoration:none;
    color:transparent;
    border-bottom:1px solid red;
}

/* IMAGES
-------------------------------------------- */
img {
height: auto; /* resets the image height so that it maintains its aspect ratio when width is set */
/*background: transparent url(../images/ajax-loader.gif) no-repeat center center;*/
width:100%;
}
img.left {
float: left;
max-width: 50%;
margin: 5px 20px 0px 0;
}
img.right {
float: right;
max-width: 50%; /* Responsive width */
margin: 5px 0 0px 20px;
}

img.leftAlone {
    /*margin-right: 100%;
    margin-bottom: 0;*/
    clear: both;
}
img.center {
float: none;
margin-left: auto;
margin-right: auto;
display: block;
margin-bottom: 0;
clear: both;
}
.captionImage {
max-width: 100%;
}
div.svgcontainer img {
background:none;
}
/* SVG */
img[src$=".svg"] {
    background:none;
}
/* Jontek Logo */
.leftcontent.col-sm-6 {
  display: flex;
  justify-content: end;
  padding-right: 15%;
}
img.jontekfoundation {
    max-width: 382px;
    margin-top: 107px;
}


/* Content
-------------------------------------------------*/
.contentcontainer {
    min-height: 500px;
}

@media only screen and (min-width : 1098px) {
  #descnav {
    display: flex;
    justify-content: start;
    padding-right: auto;
    padding-top: 12px;
    padding-left: calc( 50% + 19px);
  }
}
@media only screen and (max-width : 1200px) {
  /* Jontek Logo */
  .leftcontent.col-sm-6 {
    display: flex;
    justify-content: end;
    padding-right: 10%;
  }
  img.jontekfoundation {
      max-width: 382px;
      margin-top: 107px;
  }


}

@media only screen and (max-width : 990px) {
  
  /* Jontek Logo */
  .leftcontent.col-sm-6 {
    display: flex;
    justify-content: end;
    padding-right: 25px;
  }
  img.jontekfoundation {
      max-width: 382px;
      margin-top: 107px;
  }
  .startnav {
    position:fixed;
    top:14px;
    left:auto;
    right:25px;
    background-color:transparent;
    padding-left:14px;
  }
  div.intranav {
  position: absolute;
  padding-top: 80px;
  padding-right: 150px;
}

}
@media only screen and (max-width : 769px) {
  body {
    overflow-x:hidden;
  }
    section.smart {
      display:block;
    }
    section.desc {
      display:none;
    }
    section.smarttab {
    	display:block;
    }
    .leftcontent {
      display:none;
    }
    article {
      padding-top:120px;
      text-align:left;
      padding-left:0px;
      padding-right:15px;
      max-width: auto;  
      max-width: 560px;    
    }
    section.spaceanim {
	  margin: 0;
	  padding: 0;
	  background-color: #010216;
	  background: url(../anim/himmel3344.jpg) no-repeat center center fixed;
	  -webkit-background-size: cover;
	  width: 100vw;
	  height: 100vh;
	  animation: none;
	  overflow:hidden;
	}

}
@media only screen and (max-width : 620px) {

}
@media only screen and (max-width : 480px) {

}
@media only screen and (max-width : 375px) {

}


/*==========  Non-Mobile First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {


}


/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
 
    
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

	img.jontekfoundation {
	  width: 80%;
	  max-width:300px;
	  margin-top: 10px;
	}

  
}

/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {



}

/* Custom, iPhone Retina */ 
@media only screen and (max-width : 360px) {
  

}


@media print {
    * { 
        color:#000;
        background-color:transparent;
    }

    nav, header, .chaptertop, footer div.right a.social, div.sharecontent {
        display:none;
    }
    .modal.in .modal-dialog {
        background-color: #fff;
    }
}