/* dm-sans-regular - latin */
/* dm-sans-regular - latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/dm-sans-v11-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/dm-sans-v11-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/dm-sans-v11-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/dm-sans-v11-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/dm-sans-v11-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/dm-sans-v11-latin-regular.svg#DMSans') format('svg'); /* Legacy iOS */
}
body{font-family: "DM Sans",sans-serif;}
#container{display: flex; align-items: flex-start;}
#menu {
  position: fixed;
  display: none;
  cursor: pointer;
  right:0;
  top: 0;
  background-color: #FFF;
}

#close {
  position: fixed;
  right: 0;
  display: none;
  z-index: 200;
  top: 0;
  cursor: pointer;
  background-color: #FFF;
}

#top{
  cursor: pointer;
  background-color: #FFF;
  text-align: right;
}
#menu img, #close img{height:20px; width:20px; padding: 10px;}
#top img{height:40px; width:40px; padding: 10px;}
#navigation{
  flex: 1;
  padding-right: 50px;
  position: sticky;
  max-height: 100vh;
  overflow-x: auto;
  top: 0;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

#navigation::-webkit-scrollbar {
  display: none;
}

h1{
  color: #f26f2b;
  font-size: 2em;
  margin: 10px 40px;
  }
    .subtitle{
      margin: 20px 40px;

    }

h2{color:#f26f2b!important;}
h3{color:#844a80}
a{color:#f26f2b;}
hr{border-top:1px solid #844a80;}

#navigation ul{    list-style: none;}


#navigation li{padding: 10px; background-color:#282220;     margin: 1px 0 0 0;}
#navigation li a{color:#FFF; text-decoration: none;}
#navigation li.on{background-color: #f26f2b;}
#navigation li.on a{font-weight: bold; color: #000;}

#navigation ul.secondLevel{padding:0;}
#navigation ul.secondLevel li{ padding: 10px 30px; background-color: #844a80; margin:0;}
#navigation ul.secondLevel li:first-of-type {padding-top:15px;}
#navigation ul.secondLevel li:last-of-type {padding-bottom:15px;}

#navigation ul.thirdLevel{padding:0; }
#navigation ul.thirdLevel li{ padding-left: 50px; background-color: #844a80; font-size: .8em; line-height: 1em; margin:0;}

#content{     flex: 2; padding-right: 50px;}
#content h2{cursor: pointer;}
/*#content h2::after{content: "\25BC"; float: right; margin-right: 10px;}
#content h2.open::after{content: "\25b2"; float: right; margin-right: 10px;}*/
.subContentMenu{    background-color: #e1e1e1; padding: 20px; margin:10px 0;}
.subContent{    background-color: #e1e1e1; padding: 20px;}

@media only screen and (max-width: 900px) {
  #menu{display: block;}
  #navigation{
    position: fixed;
    top: 0;
    background-color: #fff;
    flex: none;
    padding: 0;
    display: none;
    width: calc(100% - 20px);
    margin: 0;
    min-height: 100%;
  }
  #navigation ul{padding:0;}
  #navigation li {width: calc(100% - 60px);}
  #container{display: block; flex:none; padding-left: 10px;}
  #content{padding:0;}
  h1, .subtitle{margin-left:10px; margin-right:10px;}
  #navigation ul.secondLevel{display: none;}
}