* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 75vh;
    /* background-color: #fff; */
    /* background-color: #ebf0fa;	 */
    background-color: #f2f2f2;
}


/**** Header ****/

#main-header-right-area {
    display: flex;
}

#menu-btn {
    display: none;
}


/**** Navbar ****/

.navbar {
    width: 250px;
	
	/* height: 82vh; */
	height: 85vh;
	
	background: #f2f2f2;
    position: fixed;
    margin-left: -300px;
    /* background-color: #7952b3; */
    transition: 0.4s;
	z-index: 1;
	
	overflow: auto;
	
	/* scrollbar-width: 12px; */
	scrollbar-width: none;	/* none -> Scrollbar nicht sichtbar */
	/* scrollbar-color: blue orange; */
}

.hidden {
	display: none;
}

.navbar::-webkit-scrollbar {
  /* width: 12px; */
  width: 0px;		/* 0px -> Scrollbar nicht sichtbar */
}

.navbar::-webkit-scrollbar-track {
  /* background: orange; */
}

.navbar::-webkit-scrollbar-thumb {
  /* background-color: blue; */
  /* border-radius: 20px; */
  /* border: 3px solid orange; */ 
}


/**** Container ****/

.my-container {
	transition: 0.4s;
}

.active-nav {
    margin-left: 0px;
}

.active-cont {
    margin-left: 250px;
}


.knowledge_card {
    width:70%;
}


#about_me {
    width:65%;
}

#knowledge {
    width:90%;
}

#experiences {
    width:90%;
}

#customer {
    width:90%;
}

.custom_icon {
    width:60%;
    display:block;
    margin:auto;
}


ul.timeline-3 {
    list-style-type: none;
    position: relative;
  }
  ul.timeline-3:before {
    content: " ";
    background: #d4d9df;
    display: inline-block;
    position: absolute;
    left: 29px;
    width: 2px;
    height: 100%;
    z-index: 400;
  }
  ul.timeline-3 > li {
    margin: 20px 0;
    padding-left: 20px;
  }
  ul.timeline-3 > li:before {
    content: " ";
    background: white;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #22c0e8;
    left: 20px;
    width: 20px;
    height: 20px;
    z-index: 400;
  }


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

    /* Wenn Display < 756px, dann customer icons auf xx% setzen */
    .custom_icon {
        width:40%;
    }
  
  }


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

    /* Wenn Display < 700px, dann Button anzeigen */
    #menu-btn {
        width:25px;
        height:25px;
        fill:white;
        display: inline-block;
    }

    /* Wenn Display < 700px, dann Div mit Menu-Links im Header verstecken */
    #main-header-right-area {
        display: none;
    }
  
  }

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

    /* Wenn Display < 576px, dann customer icons auf xx% setzen */

    .knowledge_card {
        width:100%;
    }

    #about_me {
        width:100%;
    }

    #knowledge {
        width:100%;
    }

    #experiences {
        width:100%;
    }

    #customer {
        width:100%;
    }

    .custom_icon {
        width:50%;
    }
  
  }