* {
  margin: auto;
  padding: 1px;
  box-sizing: border-box;
  }

img {
max-width: 100%; 
height: auto; 
}

/* Header */

#main{
  overflow: auto;
  margin-top: 25px;
  margin-bottom: 50px;
}

/* Contacts */

#contact{
text-align: center;
font-size: 15px;
font-family: 'Times New Roman';
color: #0000ff;
cursor: pointer;
}


#container_1{
display: flex;
flex-direction:column;
flex-wrap: wrap;
justify-content: space-around;

margin-top: 0px;
margin-right: 25px; 
margin-left: 25px;

}


#container_1 > * {

  height: 55vh;
  position: center;

}

.Image {
width: 100%;
align-items: center;
margin-top: 50px;
margin-bottom: 50px;
}


#Menu{
  color: #0000ff;
  margin-left: 1px;
}

.curriculum{
  color:#0000ff;
}
.hide_default {
  display: none;
}

.display {
  display: block;
}

.item-1{
  margin-top: 80px;
}

.item-2{
  margin-top: 0px;
}

.item-3{
  margin-top: 80px;
}

.item-4{
  margin-top: 80px;
}

.item-6{
  margin-bottom: 80px;
}

.item-5{
  margin-bottom: 80px;
}

.item-7{
  margin-top: 80px;
}

.item-8{
  margin-top: 90px;
}

.item-10{
  margin-top: 30px;
  padding-top: 10px;
  
}

.item-11{
  margin-top: 20px;
  margin-bottom: 20px;
  padding-top: 50px;
}

.item-12{
  padding-top: 50px;
}

.item-15{
  margin-bottom: 150px;
}

.item-14{
  margin-bottom: 80px;
}

.item-16{
  padding-top: 30px;
  margin-bottom: 80px;
}

.item-17{
  padding-top: 30px;
  margin-bottom: 80px;
}

.item-18{
  padding-top: 30px;
  margin-bottom: 80px;
}

.item-19{
  padding-top: 80px;
  margin-bottom: 50px;
}

.item-20{
  padding-top: 30px;
  margin-bottom: 50px;
}

.item-21{
  margin-top: 150px;
}

.item-22{
  margin-bottom: 50px;
  padding-bottom: 50px;
}

/* Slider */

.slider {
  float: left;

  height: 60px;
  background-color: #fff;
  border-top: 1px solid #e6e6e6;
  position: fixed;
  z-index: 10001;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all .3s ease-in-out ;
}


/* Top-Div */

.Top-Div{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-bottom: 10px;

    font-size: 15px;
  }

.nav-bar-column-1 {
  margin-top: 5px;
  margin-bottom: 5px;
  width: 100px;
  margin-left: 5px;
  }

.nav-bar-column-2 {
  margin-top: 5px;
  margin-bottom: 5px;
  width: 100%;
  margin-left: 5px;

  cursor: default;
  }

.nav-bar-column-3 {
  margin-top: 5px;
  margin-bottom: 5px;
  width: 100%;
  margin-left: 5px;

  cursor: default;
}


ul.navBar_2.styleList{
    margin-left: 25px;
    cursor: pointer;
    text-decoration : underline;
  }

ul#projectList{
    margin-left: 5px;
    cursor: pointer;
    

  }

.unicode:before {

align-items: left;
content :normal;
visibility: hidden;
color:#000000;
font-size: 25px;
margin-left: 20px;
margin-right: 20px;
}

/* Middle-Div */

.Middle-Div{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    font-size: 15px;
  }


.active{
  height: 530px;
}

.styleList{
    list-style-type: none;
    cursor: pointer;
    line-height: 25px;
    margin-left: 20px;
    margin-bottom: 20px;
  }

.projectList{
  margin: 5px;
  margin-top: 200px;
  line-height: 25px;
  text-align: left;
  width: 450px;

  }

.firstHidden{
    display: none;
  }

.flexDiv{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  
}

.projectContainer{

  font-size: 15px;
  max-height: 100%;

  margin-top: 10px;
  margin-left: 5px;
  overflow: auto;
  float: right;
  position: static;
}

.Project-Column-1{

  margin-top: 0px;
  margin-bottom: 5px;
  margin-right: 15px;
  width: 100%;
  }


.Project-Column-2{
  border: 0px solid #e6e6e6;
  width: 100%;
  margin-bottom: 150px;
  margin-top: 110px;

  overflow: auto;
  }

  /* Curriculum-Column-1 */


.Curriculum-Column-1{
  margin-top: 0px;
  width: 100%;

  margin-bottom: 5px;
  margin-left: 5px;
  }

.Curriculum-Column-2{
  margin-top: 0px;
  width: 100%;

  margin-bottom: 5px;
  margin-left: 5px;
}

.Curriculum-Column-3{
margin-top: 0px;
width: 100%;

margin-bottom: 5px;
margin-left: 5px;
}

.Curriculum-Column-4{
 margin-top: 0px;
 width: 100%;
 
margin-bottom: 100px;
margin-left: 5px;

}


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


#container_1{
flex-direction: row;

margin-top: 40px;
margin-bottom: 500px;
}


#container_1 > * {

  height: 43vh;
  margin-top: 50px;
  margin-bottom: 50px;

  position: center;

}

#contact{
font-size: 25px;
}

.item{

width: 300px;
height: 300px;
margin: 0px;

}


.Top-Div{
    font-size: 25px;
  }

.Middle-Div{

    font-size: 25px;
    flex-wrap: nowrap;
  }


.nav-bar-column-2 {
  margin-top: 25px;
  margin-bottom: 5px;
  width: 400px;
  margin-left: 5px;

  cursor: default;
  }

.nav-bar-column-3 {
  margin-top: 25px;
  margin-bottom: 5px;
  width: 100%;
  margin-left: 5px;

  cursor: default;
}

.firstHidden{
    display: none;
  }

.unicode:before {

  content :"\2014";
  visibility: hidden;
  font-size: 25px;
  margin-left: 20px;
  margin-right: 20px;
  color: inherit;
}


.unicode:hover:before {
    display: inline;
    visibility: visible; 
}


.active{
  height: 850px;
}


.projectContainer{

  font-size: 25px;
  
}

.Curriculum-Column-4{

  margin-bottom: 150px;
}





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


#contact{

font-size: 15px;
}

.Image {
width: 100%;
margin-bottom: 100px;
}

li{
height: 20px;
}

.slider {

  height: 70px;
}

#container_1{
display: flex;
flex-direction: row;
flex-wrap: wrap;


align-items: center;
justify-content: space-around;

margin-top: 40px;
margin-bottom: 40px;
}

.item{
width: 150px;
height: 250px;
}

.item-4{
  margin-top: 150px;
}

#container_1 > * {

  height: 30vh;
  margin: 2rem;
  
}


.Top-Div{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-bottom: 10px;

    font-size: 15px;
    position: center;
  }


.nav-bar-column-1 {
  margin-top: 25px;
  width: 100px;
  margin-left: 5px;
  
  }

.nav-bar-column-2 {
  margin-top: 25px;
  margin-bottom: 5px;
  width: 400px;
  margin-left: 5px;

  cursor: default;
  }

.nav-bar-column-3 {
  margin-top: 25px;
  margin-bottom: 5px;
  width: 100%;
  margin-left: 5px;

  cursor: default;
}

.active{
  height: 600px;
}


.Middle-Div{
  font-size: 15px;
  flex-direction: row;
  line-height: 15px;

  flex-wrap: nowrap;
}

.nav-bar-column-1-Middle-Div {
 width: 6px;
 margin: 0px;
 
  }


.nav-bar-column-2.list {

    margin-left: 45px;
    width: 300px;
    font-size: 15px;
    margin-right: 70px;
    cursor: default;
  }

.nav-bar-column-3.listProjects {
  margin: 5px;
  width: 700px;
  font-size: 15px;
  line-height: 20px;
  cursor: default;
}


ul.navBar_2.stylist {
    margin-left: 100px;
}


.styleList{  
  line-height: 20px;
  cursor: pointer;
}



.firstHidden{
    display: none;
  }


.unicode:before {

  content :"\2014";
  visibility: hidden;
  font-size: 25px;
  margin-left: 20px;
  margin-right: 20px;
  color: inherit;
}


.unicode:hover:before {
    display: inline;
    visibility: visible; 
}

.projectContainer{

  font-size: 15px;
  overflow: auto;
}


.flexDiv{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin-bottom: 100px;

}

.Curriculum-Column-4{

  margin-bottom: 25px;
}


.Project-Column-1{

  padding-right: 10px;
  margin-top: 0px;
  margin-bottom: 50px;
  margin-left: 5px;
  width: 40%;
  
  
  
  }

.Project-Column-2{
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 10px;
  margin-left: 10px;
  
  border: 0px solid #e6e6e6;
  
  overflow: auto;
  width: 60%;
  height: 100%;
  }
}


}