@charset "UTF-8";



a:link { 
             color: #eeeeee;

} 
a:visited { 
 color: #cccccc;
} 
a:hover { 
 color: #ffffff;
} 
a:active { 
 color: #cccccc;
}



a.main:link { 
             color: #222222;
  text-decoration: none; 
} 
a.main:visited { 
                 color: #222222;
  text-decoration: none; 
} 
a.main:hover { 
                 color: #aa0000;
  text-decoration: none; 
} 
a.main:active { 
                     color: #000000;
  text-decoration: none; 
}





a.headline:link { 
             color: #cccccc;
  text-decoration: none; 
} 
a.headline:visited { 
                 color: #cccccc;
  text-decoration: none; 
} 
a.headline:hover { 
                 color: darkorange;
  text-decoration: none; 
} 
a.headline:active { 
                     color: #bbbbbb;
  text-decoration: none; 
}




a.author:link { 
             color: #666666;
  text-decoration: none; 
} 
a.author:visited { 
                 color: #666666;
  text-decoration: none; 
} 
a.author:hover { 
                 color: darkorange;
  text-decoration: none; 
} 
a.author:active { 
                     color: #cccccc;
  text-decoration: none; 
}



@media screen and (min-width: 1101px) {

h1
{
    font-size: 8vw;
    color: #cccccc;
 color:#cccccc;
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
text-align: center;
    }}


@media screen and (min-width: 901px) and (max-width: 1100px){
h1
{
    font-size: 12vw;
    color: #cccccc;
 color:#cccccc;
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
text-align: center;
    }}




@media screen and (max-width: 900px) {
h1
{
    font-size: 14vw;
    color: #cccccc;
 color:#cccccc;
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
text-align: center;
}

}








p.indexfooter {

color:#aaaaaa;
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.2em;
text-align: center;
     line-height: 100%;
}

.grey
 {
     color: 999999
}


.darkgrey
 {
     color: 555555
         } 




@media screen and (min-width: 1101px) {

.big
{

 color:#666666;
       font-family: "Josefin Sans", sans-serif;
    font-size: 2.5em;
text-align: left;
    line-height: 100%;
}}


@media screen and (min-width: 901px) and (max-width: 1100px){
.big
{

 color:#666666;
       font-family: "Josefin Sans", sans-serif;
    font-size: 2em;
text-align: left;
    line-height: 100%;
}}




@media screen and (max-width: 900px) {
.big
{

 color:#666666;
       font-family: "Josefin Sans", sans-serif;
    font-size: 1.5em;
text-align: left;
    line-height: 100%;
}}






         
a.darkgrey:hover { 
                 color: darkorange;
  text-decoration: none; 

}





img{
width: 100%;
    height= 100%;
}

.imageTitle {
position: relative;
text-align: right;
color: white;
}

.bottom-left {
position: absolute;
bottom: 10px;
left: 15px;
}

.top-left {
position: absolute;
top: 10px;
left: 15px;
}

.top-right {
position: absolute;
top: 10px;
right: 15px;
}

.article-title {
position: absolute;
bottom: 10px;
right: 15px;
}

.centered {
position: absolute;
top: 50%;
left: 50%;
}




@media screen and (min-width: 1501px) {


.title {
    font-size: 9vw;
color:#cccccc;
  font-family: "Josefin Sans", sans-serif;
text-shadow: 8px 8px 8px #222222;

  font-style: normal;
text-align: right;
     line-height: 85%;
    }}



@media screen and  (min-width: 701px) and (max-width: 1500px){


.title {
    font-size: 9vw;
color:#cccccc;
    text-shadow: 4px 4px 5px #222222;
  font-family: "Josefin Sans", sans-serif;
  font-style: normal;
text-align: right;
     line-height: 85%;

    }}




@media screen and (max-width: 700px) {
.title {
    font-size: 9vw;
color:#cccccc;
            text-shadow: 2px 2px 5px #222222;
  font-family: "Josefin Sans", sans-serif;

  font-style: normal;
text-align: right;
     line-height: 85%;
}}



@media screen and (min-width: 1501px) {


h2 {
    font-size: 7vw;
color:#cccccc;
  font-family: "Josefin Sans", sans-serif;
  font-style: normal;
text-align: right;
     line-height: 85%;
    margin: 15px;

}}

@media screen and (min-width: 1101px) and (max-width: 1500px){


h2 {
    font-size: 10vw;
color:#cccccc;
  font-family: "Josefin Sans", sans-serif;
  font-style: normal;
text-align: right;
     line-height: 85%;
    margin:10px;
    }}


@media screen and (min-width: 701px) and (max-width: 1100px){
h2 {
    font-size: 12vw;
color:#cccccc;
  font-family: "Josefin Sans", sans-serif;
  font-style: normal;
text-align: right;
     line-height: 85%;
        margin:7px;
    }}




@media screen and (max-width: 700px) {
h2 {
    font-size: 14vw;
color:#cccccc;
  font-family: "Josefin Sans", sans-serif;
  font-style: normal;
text-align: right;
     line-height: 85%;
    margin:5px;
}}



@media screen and (min-width: 1101px) {


h3 {
    font-size: 4vw;
color:#cccccc;
  font-family: "Josefin Sans", sans-serif;
  font-style: normal;
text-align: right;
     line-height: 85%;
    padding:10px;
margin:10px;
}}


@media screen and (min-width: 701px) and (max-width: 1100px){
h3 {
    font-size: 7vw;
color:#cccccc;
  font-family: "Josefin Sans", sans-serif;
  font-style: normal;
text-align: right;
     line-height: 85%;
    padding:7px;
margin:7px;
}}




@media screen and (max-width: 700px) {
h3 {
    font-size: 9vw;
color:#cccccc;
  font-family: "Josefin Sans", sans-serif;
  font-style: normal;
text-align: right;
     line-height: 85%;
    padding:5px;
margin:5px;
}}





@media screen and (min-width: 1101px) {


h4 {
    font-size: 3vw;
color:#cccccc;
  font-family: "Josefin Sans", sans-serif;
  font-style: normal;
text-align: right;
     line-height: 85%;
    padding:10px;
margin:0;
}}


@media screen and (min-width: 701px) and (max-width: 1100px){
h4 {
    font-size: 4vw;
color:#cccccc;
  font-family: "Josefin Sans", sans-serif;
  font-style: normal;
text-align: right;
     line-height: 85%;
        padding:7px;
    margin:7px;
}}




@media screen and (max-width: 700px) {
h4 {
    font-size: 5vw;
color:#cccccc;
  font-family: "Josefin Sans", sans-serif;
  font-style: normal;
text-align: right;
     line-height: 85%;
    margin:5px;
        padding:5px;
}}








@media screen and (min-width: 1101px) {
  p {
      
      color:#cccccc;
       font-family: "Nunito", sans-serif;
    font-size: 1.5em;
  font-style: normal;
text-align: left;
    line-height: 300%;

  }
}



@media screen and (min-width: 701px) and (max-width: 1100px) {
  p {
      
      color:#cccccc;
       font-family: "Nunito", sans-serif;
    font-size: 1em;

  font-style: normal;
text-align: left;
    line-height: 300%;

  }
}


@media screen and (max-width: 700px) {
   p {
      
            color:#cccccc;
       font-family: "Nunito", sans-serif;
    font-size: 1.2em;

  font-style: normal;
text-align: left;
    line-height: 200%;

  }
}




@media screen and (min-width: 1101px) {
 blockquote {
  display: block;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  margin-left: 4vh;
  margin-right:0;
     
  color:#cccccc;
  font-family: "Nunito", sans-serif;
  font-size: 1.6em;
  font-style:italic;
  text-align: justify;
  line-height: 300%;
}
}
 


@media screen and (min-width: 701px) and (max-width: 1100px) {
 blockquote {
  display: block;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
  margin-left: 4vh;
  margin-right:0;
     
  color:#cccccc;
  font-family: "Nunito", sans-serif;
  font-size: 1em;
  font-style: italic;
  text-align: justify;
  line-height: 300%;
    }}
    


@media screen and (max-width: 700px) {
  blockquote {
  display: block;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  margin-left: 4vh;
  margin-right:0;
     
  color:#cccccc;
  font-family: "Nunito", sans-serif;
  font-size: 1.2em;
  font-style: italic;
  text-align: right;
  line-height: 200%;
    }}  



details > summary {
    padding: 4px;
    width:auto;
        background-color:darkred;
            cursor: pointer;
      font-family: "Nunito", sans-serif;
    font-size: 1.5em;
    color:orange;
        line-height: 120%;
}

details > p {
    
    background-color: #333333;
    padding:4px;
    margin: 0;
}


@media screen and (min-width: 1101px) {
ul li {color:#cccccc;
       font-family: "Nunito", sans-serif;
    font-size: 1.5em;
  font-style: normal;
text-align: left;
    line-height: 200%;

  }
    
ul li li {
      
      color:#cccccc;
       font-family: "Nunito", sans-serif;
    font-size: 1em;
  font-style: normal;
text-align: left;
    line-height: 200%;

  }
    
    
}

@media screen and (min-width: 701px) and (max-width: 1100px) {
  ul > li {
      
      color:#cccccc;
       font-family: "Nunito", sans-serif;
    font-size: 1em;
  font-style: normal;
text-align: left;
    line-height: 200%;

  }
    
    ul li li {
      
      color:#cccccc;
       font-family: "Nunito", sans-serif;
    font-size: 1em;
  font-style: normal;
text-align: left;
    line-height: 200%;

  }
    
}


@media screen and (max-width: 700px) {
ul > li {
      
            color:#cccccc;
       font-family: "Nunito", sans-serif;
    font-size: 1.2em;
  font-style: normal;
text-align: left;
    line-height: 150%;

  }
    
    ul li li {
      
      color:#cccccc;
       font-family: "Nunito", sans-serif;
    font-size: 1em;
  font-style: normal;
text-align: left;
    line-height: 200%;

  }
    
}












div.sticky {
  position: sticky;
  top: 0;
  background-color: #222222;
  border: 0px;
}


@media screen and (min-width: 1101px) { 
    
     div.sticky2 {
  position: sticky;
  top: 7.8vw;
  background-color: #222222;
  border: 0px;
}
       
}


@media screen and (min-width: 701px) and (max-width: 1100px){

     div.sticky2 {
  position: sticky;
  top: 12vw;
  background-color: #222222;
  border: 0px;
}
       }



@media screen and (max-width: 700px){

     div.sticky2 {
  position: sticky;
  top: 14vw;
  background-color: #222222;
  border: 0px;
}
       }



.navicell 
{background:orange;
    border-width: 0;
}


@media screen and (min-width: 901px) {

div.outlinequote {
    padding: 30px;
  outline: 3px solid orange;

    background-color:  #444444;
        
    }}


@media screen and (max-width: 900px) {  

div.outlinequote {
    padding: 10px;
  outline: 2px solid orange;

    background-color:  #444444;
        
    }}



@media screen and (min-width: 901px) {
#desk-table {
    display: inline-table;
}
#phone-table {
    display: none;
}
}



@media screen and (max-width: 900px) {  
    #desk-table {
        display: none;
    }
    #phone-table {
        display: inline-table;
        width: 100%;
    }
}


@media screen and (min-width: 901px) {
#desk-div {
    display: inline;
}
#phone-div {
    display: none;
    visibility: hidden;
}
}



@media screen and (max-width: 900px) {  
    #desk-div {
        display: none;
        visibility: hidden;
    }
    #phone-div {
        display: inline;
        width: 100%;
    }
}




.breadcrumb
{
    color: darkorange;
  font-family: "Josefin Sans", sans-serif;
       font-size:18; 
     text-decoration: none; 
}

.relevant
{color: grey;
  font-family: "Josefin Sans", sans-serif;
    font-size:3vw;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
text-align: left;
        line-height: 100%;


}






@media screen and (min-width: 901px) {
.relevantarticletitle
{color: #cccccc;
  font-family: "Josefin Sans", sans-serif;
    font-size:2.5vw;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
text-align: left;
        line-height: 90%;
}

}


@media screen and (max-width: 900px) {
.relevantarticletitle
{color: #cccccc;
  font-family: "Josefin Sans", sans-serif;
    font-size:8vw;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
text-align: left;
        line-height: 100%;
}

}




@media screen and (min-width: 901px) {
.relevantauthor
{color: #666666;
  font-family: "Josefin Sans", sans-serif;
    font-size:2.5vw;
  font-optical-sizing: auto;

  font-style: normal;
text-align: left;
        line-height: 105%;
}

}


@media screen and (max-width: 900px) {
.relevantauthor
{color: #666666;
  font-family: "Josefin Sans", sans-serif;
    font-size:6vw;
  font-style: normal;
text-align: left;
        line-height: 70%;
}

}







@media screen and (min-width: 701px) {
.teaser {
  font-family: "Nunito", sans-serif;
        font-size:1.1em;
 color:#999999;
  font-weight: <weight>;
  font-style: normal;
text-align: left;
    line-height: 100%;
}

}


@media screen and (max-width: 700px) {
.teaser {
  font-family: "Nunito", sans-serif;
        font-size:1.3em;
 color:#999999;
  font-weight: <weight>;
  font-style: normal;
text-align: left;
    line-height: 80%;
}

}




@media screen and (min-width: 701px) {
.mininavi
{color: #444444;
  font-family: "Josefin Sans", sans-serif;
    font-size:1.4vw;
 
  font-style: normal;
text-align: right;
  line-height: 100%;}
    
    }
    
    
@media screen and (max-width: 700px) {
.mininavi
{color: #444444;
  font-family: "Josefin Sans", sans-serif;
    font-size:0.5vw;
 
  font-style: normal;
text-align: right;
  line-height: 100%;}
    
        }


@media screen and (min-width: 701px) {
.navi
{color: #444444;
  font-family: "Josefin Sans", sans-serif;
    font-size:3vw;

      font-weight: bold;
  font-style: normal;
text-align: center;
  line-height: 150%;
}

}


@media screen and (max-width: 700px) {
.navi
{color: #444444;
  font-family: "Josefin Sans", sans-serif;
    font-size:9vw;

      font-weight: bold;
  font-style: normal;
text-align: center;
  line-height: 150%;
}

}




    
    
    
    


.footer

{color: 999999;
  font-size:21;
      font-style: italic;
  text-align: left;
  line-height: 200%;
          font-weight: bold;
  font-family: "Nunito", sans-serif;}



@media screen and (min-width: 701px) {

div.container {
           clear: both;
    display:flex;
    align-self: center;
    justify-content: center;
    flex-wrap: wrap;

            color: #222222;
            border: 0px;
    width: 80%;
            margin: 10px 10px;

        }

}


@media screen and (max-width: 700px) {
div.container {
    clear: both;
    align-self: center;
    justify-content: center;
    flex-wrap: wrap;

            color: #222222;
            border: 0px;
    width: 100%;
            margin: 10px 10px;

        }

}





@media screen and (min-width: 701px) {

div.clickable {
float:none;
    clear:none;
            color: #cccccc;
            border: 0px solid #cccccc;
            margin: 10px 10px;
            font-size: 2.5vw;
      font-family: "Josefin Sans", sans-serif;
        }

}


@media screen and (max-width: 700px) {
div.clickable {
  float:none;
        clear:none;
            color: #cccccc;
            border: 0px solid #cccccc;
            margin: 10px 10px;
            font-size: 5vw;
      font-family: "Josefin Sans", sans-serif;
        }

}






# -- all of the below are style elements defining how the non-javascript hamburger menu looks and behaves«

nav {
 padding: 0rem 0rem;
 background-color: #222222 ;
 color: #222222;

}


.checkbtn {
 font-size: 2rem;
 color: orange;
  cursor: pointer;
}

.nav-mobile {
 display: none;
}


#check:checked ~ .nav-mobile {
display: block;
}


.nav-mobile {
 position: absolute;
 top: 2rem;
 left: 0;
 background: orange;
 z-index: 1;
 width: 200px;
 font-family: "Josefin Sans", sans-serif;
}
.nav-mobile a {
 color: #333333;
 padding: 1rem 1.5rem;
 display: block;
}


@media only screen and (max-width: 992px) {
 .checkbtn {
 display: block;
  
 font-size: 2rem;
 position: absolute;
 top: 30px;
 left: 40px;
 }
.nav-mobile {
 top: 100px;
 width: 70%;
 }
.nav-mobile a {
 font-size: 2rem;
 padding: 2rem 2rem;
 }
}