:root{
   --MAINCOLOR: #535C66;
   --HIGHLIGHTCOLOR: #b9cfe5;
   --BACKGROUND:rgba(185,207,229,0.2);
   --WHITE: #FFF;
   --BLACK: #000;
   --RED: #58122b;
   --FONT: #3C4359;
}

body {
    font-family: 'Raleway', sans-serif;
    color: var(--FONT);
    background: var(--BACKGROUND);
}

h1 {
    font-family: 'Ubuntu', sans-serif;
    color: var(--RED);
    font-size: 40px;
    padding-top: 10%;
    padding-left: 5%;
}

h2 {
    font-family: 'Ubuntu', sans-serif;
    font-size: 30px;
    color: var(--RED);
    text-align: center;
}

h5 {
    font-family: 'Ubuntu', sans-serif;
    color: var(--RED);
}

a {
    color: var(--RED);
}

a:hover {
    color: var(--RED);
}

 hr {
    width: 50%;
    align-content: center;
    border: 1px solid var(--RED);
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 5 ; /* Stay on top */
  left: 0;
  background-color: var(--RED);
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s;

}
.sidenav a{
    color: var(--BLACK);
    transition: 0.3s;
}


.sidenav ul {
    background: var(--RED);
    padding-top: 15px;
    padding-bottom: 15px;
    list-style-type: none;
}

.sidenav ul li {
    padding-top: 15px;
    font-size: 20px;
}

.sidenav ul li a:hover {
    font-size: 20px;
    font-weight: 900;
    text-decoration: none;
}

.sidenav ul li a {
    color: var(--WHITE);
}

#nav_kontakt {
    padding-top: 50px;
}

/*media screen 2560px*/

/*@media screen and (max-width: 1000px){
    section#sc-01 {background-size: contain !important; height: 50vh !important;}
    #social_media_container {text-align: right !important; padding-top: 30% !important;}
}*/
#nav_section {
    width: 5%;
    background-color: var(--RED);
    min-height: 5400px;
    float:left;
    overflow-x: scroll;
}

#nav_section:hover > .sidenav {width: 200px; min-height: 500px;} 

#nav_ham{
    padding: 20%;
    margin: 2%;
}









#content {
  width:95%; 
  float: right;
  padding-bottom: 60px;
}

section {
    display: block;
    width:95%;
    padding-top: 5%;
}

section#sc-01 {
    background: url(../img/Christel_Goldbach.svg) no-repeat center;
    background-size: cover;
    width: 100%;
    height: 90vh;
    position: relative;
    opacity: 1.0;
}

#sc-02-content {
    padding-left: 10%;
    padding-right: 5%;
    padding-top: 1%;
    opacity: 1.0;
    column-count: 2;
    column-gap: 5%;
    text-align: left;
}

#sc-03-content {
    padding-left: 10%;
    padding-right: 5%;
    padding-top: 1%;
    opacity: 1.0;
    column-count: 2;
    column-gap: 5%;
    text-align: left;
}

#sc-04-content {
    padding-left: 10%;
    padding-right: 5%;
    padding-top: 1%;
    opacity: 1.0;
}

#description_ref {
    padding-bottom: 5%;
    column-count: 2;
    column-gap: 5%;
    text-align: left;
}


#ref_list_content{
    display: flex;
    
    padding-top: 2%;
}

#ref_text{
    padding-left: 2%;
}

#sc-05-content {
    padding-left: 15%;
    padding-right: 10%;
    padding-top: 1%;
    text-align: center;
}

#sc-06-content {
    padding-left: 10%;
    padding-right: 5%;
    padding-top: 1%;
    opacity: 1.0;
    column-count: 2;
    column-gap: 5%;
    text-align: left;
}

#sc-07-content {
    padding-left: 10%;
    padding-right: 5%;
    padding-top: 1%;
    opacity: 1.0;
    column-count: 2;
    column-gap: 5%;
    text-align: left;
}
#pdf_links{
    padding-left: 10%;
    padding-top: 2%;
}

/*#title_sections {
    background-image:linear-gradient(to right, #58122b, rgba(185,207,229,0.2));
    width: 100%;
    height: 5%;
    text-align: left;
    padding: 2%;
    padding-left:5%;*/
}

#title_sections {
    width: 100%;
    height: 5%;
    padding: 2%;
    padding-left:5%;
    color: var(--RED);
    text-align: left;
   
}


#ref {
    width: 100%;
    text-align: center;
}


.img_resp {
    width: 20%;
    height: 20%;
    text-align: center;
    flex-shrink: 0;
}


#social_media_container {
    text-align: right;
    padding-right: 2%;
    padding-top: 20%;
}

.logos_links {
    height: 1.5%; 
    width: 1.5%;    
}

.responsive {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 480px) {
    h1{font-size: 20px; padding-top: 5% ; padding-left: 25%;}
    #nav_section {width: 15%; min-height: 8000px; position: fixed; overflow-x: hidden;z-index: 9999;} 
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
    section#sc-01 {background-size: contain; height: 50vh ;}
    .logos_links{height: 3%; width: 3%;}
    #social_media_container {text-align: center; padding-top: 75%;}
    #content {width: 84%;}
    #sc-02-content{column-count: 1; text-align: left;}
    #sc-03-content{column-count: 1; text-align: left;}
    #description_ref{column-count: 1; text-align: left;}
    #ref_list_content{display: block;}
    .img_resp{width: 70%; height: 70%; padding-bottom: 5%;}
    #sc-06-content{column-count: 1; text-align: left;}
    #sc-07-content{column-count: 1; text-align: left;}
    #ref{text-align: center; width: 95%;}
       
}
@media screen and (min-width: 2560px) {
    #description_ref{column-count: 2; text-align: left;}
    #ref_list_content{display: flex;}
    .img_resp{width: 20%; height: 20%; padding-bottom: 5%;}
}

@media screen and (min-width: 3500px) {
    #description_ref{column-count: 2; text-align: left;}
    #ref_list_content{display: flex;}
    .img_resp{width: 15% ; height: 15% ; padding-bottom: 5% ;}
}