diff --git a/css/projects.css b/css/projects.css
index ca2d74a..c784afb 100644
--- a/css/projects.css
+++ b/css/projects.css
@@ -78,6 +78,89 @@ h1, h2, h3, h4, h5 {
     }
 }
 
+/* header
+=================== */
+@media only screen and (min-width: 1000px) {
+    header {
+       z-index: 1;
+	   position: absolute;                          /*verursacht das verschrobene menü auf der projects seite*/
+	   top: 0px;
+	   width: 100%;
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    .nav li {
+        margin-left: 2px !important;
+        margin-right: 2px !important;
+        width: 20vw;
+    }
+}
+@media only screen and (min-width: 501px) and (max-width: 999px) {
+    .nav li {
+        margin-left: 2px !important;
+        margin-right: 2px !important;
+        width: 100px;
+    }
+}
+@media only screen and (min-width: 1000px) {
+    .nav li {
+        width: 100px;
+    }
+}
+header {
+    background: rgba(0,0,0,0.4);
+    font-family: 'IM Fell English SC';
+	margin: 0px;                                                 /*Der Versuch den header auf projects zu reparieren: margin: 1rem 0,0 klappt aber nicht so*/
+}
+
+@media only screen and (min-width: 1000px) {
+    div#project_margin {
+        margin-top: 250px;
+    }
+    video {
+        margin-top: 230px;
+    }
+}
+
+.nav ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+}
+
+.nav li {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 1em;
+    height: 20px;
+    text-align: center;
+}
+
+.nav a {
+    font-weight: 900;
+    text-decoration: none;
+    /*! padding: 0.5em; */
+    color: white;
+    font-size: 14pt;
+    /*! font-weight: bold; */
+}
+
+
+.nav a:hover {
+    color: #ddd;
+    font-size: 16pt;
+    /*! font-weight: bold; */
+}
+
+.logo {
+    margin-top: 0.5rem;
+}
+
 /* Collection */
 
 div.collection_container {
@@ -150,3 +233,107 @@ div.collection div.col-desc {
     transform: translate(-50%, -50%);
     text-align: center;
 }
+
+/* Images Instagram */
+
+.images {
+    filter: grayscale(100%);
+    transition: height 0.5s ease-out, filter 0.3s ease 0.5s, width 0.3s ease-out;
+    height: 200px;
+    width: 200px;
+    cursor:pointer;
+    margin-left: 5px;
+    margin-right: 5px;
+    margin-bottom: 5px;
+}
+
+.images:hover {
+    -webkit-filter: grayscale(0%);
+    filter: grayscale(0%);
+    transition: filter 0.8s ease-out;
+}
+
+/* buttons */                            /* Noch ordnen */
+
+.button {
+    display: inline-block;
+    font-size: 1.15rem;
+    text-decoration: none;
+    text-transform: uppercase;
+    border-width: 2px;
+    border-style: solid;
+    padding: 0.5em 1.75em;
+}
+
+@media (min-width: 60rem) {
+    .button {
+        font-size: 1.5rem;
+    }
+}
+
+.button.active {
+    background-color: #ffffff;
+    color: #232323;
+  }
+
+.button-small {
+    font-size: 0.7rem;
+    font-weight: 700;
+}
+
+.button-accent {
+    color: #ffffff;
+    border-color: #ffffff;
+    cursor:pointer;
+    background: rgba(0,0,0,0.4);
+    box-shadow: 0px 0px 15px 5px #fff;
+}
+
+.button-accent-projects {
+    color: #ffffff;
+    border-color: #ffffff;
+    cursor:pointer;
+    background: rgba(0,0,0,0.4);
+    /*box-shadow: 0px 0px 15px 5px #fff;*/
+}
+
+.button-accent:hover,
+.button-accent:focus {
+    background: #fff;
+    color: #232323;
+}
+
+.button-dark {
+    color: #232323;
+    border-color: #232323;
+}
+
+.button-dark:hover,
+.button-dark:focus {
+    background: #232323;
+    color: #ffffff;
+}
+
+.btn {
+    /* border: none;
+    outline: none;
+    padding: 12px 16px; */
+    background-color: white;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 1.15rem;
+    text-decoration: none;
+    text-transform: uppercase;
+    border-width: 2px;
+    border-style: solid;
+    padding: 0.5em 1.75em;
+  }
+
+  .btn:hover {
+    background-color: #ddd;
+  }
+
+  .btn.active {
+    background-color: #666;
+    color: white;
+  }
diff --git a/css/styles.css b/css/styles.css
index df064df..a13d093 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -9,23 +9,6 @@ img {
     max-width: 100%;
 }
 
-.images {
-    filter: grayscale(100%);
-    transition: height 0.5s ease-out, filter 0.3s ease 0.5s, width 0.3s ease-out;
-    height: 200px;
-    width: 200px;
-    cursor:pointer;
-    margin-left: 5px;
-    margin-right: 5px;
-    margin-bottom: 5px;
-}
-
-.images:hover {
-    -webkit-filter: grayscale(0%);
-    filter: grayscale(0%);
-    transition: filter 0.8s ease-out;
-}
-
 .container {
     margin: 0 auto;
 }
@@ -105,179 +88,12 @@ p:last-of-type {
     }
 }
 
-/* buttons */
-
-.button {
-    display: inline-block;
-    font-size: 1.15rem;
-    text-decoration: none;
-    text-transform: uppercase;
-    border-width: 2px;
-    border-style: solid;
-    padding: 0.5em 1.75em;
-}
-
-@media (min-width: 60rem) {
-    .button {
-        font-size: 1.5rem;
-    }
-}
-
-.button.active {
-    background-color: #ffffff;
-    color: #232323;
-  }
-
-.button-small {
-    font-size: 0.7rem;
-    font-weight: 700;
-}
-
-.button-accent {
-    color: #ffffff;
-    border-color: #ffffff;
-    cursor:pointer;
-    background: rgba(0,0,0,0.4);
-    box-shadow: 0px 0px 15px 5px #fff;
-}
-
-.button-accent-projects {
-    color: #ffffff;
-    border-color: #ffffff;
-    cursor:pointer;
-    background: rgba(0,0,0,0.4);
-    /*box-shadow: 0px 0px 15px 5px #fff;*/
-}
-
-.button-accent:hover,
-.button-accent:focus {
-    background: #fff;
-    color: #232323;
-}
-
-.button-dark {
-    color: #232323;
-    border-color: #232323;
-}
-
-.button-dark:hover,
-.button-dark:focus {
-    background: #232323;
-    color: #ffffff;
-}
-
-.btn {
-    /* border: none;
-    outline: none;
-    padding: 12px 16px; */
-    background-color: white;
-    cursor: pointer;
-    display: inline-block;
-    font-size: 1.15rem;
-    text-decoration: none;
-    text-transform: uppercase;
-    border-width: 2px;
-    border-style: solid;
-    padding: 0.5em 1.75em;
-  }
-
-  .btn:hover {
-    background-color: #ddd;
-  }
-
-  .btn.active {
-    background-color: #666;
-    color: white;
-  }
-
 /* Parallax
 =================== */                              /* Das sollte wohl mal DAS werden https://www.w3schools.com/howto/howto_css_parallax.asp */
 
 .parallax--bg {
     width: auto;
 }
-/* header
-=================== */
-@media only screen and (min-width: 1000px) {
-    header {
-       z-index: 1;
-	   position: absolute;                          /*verursacht das verschrobene menü auf der projects seite*/
-	   top: 0px;
-	   width: 100%;
-    }
-}
-
-@media only screen and (max-width: 500px) {
-    .nav li {
-        margin-left: 2px !important;
-        margin-right: 2px !important;
-        width: 20vw;
-    }
-}
-@media only screen and (min-width: 501px) and (max-width: 999px) {
-    .nav li {
-        margin-left: 2px !important;
-        margin-right: 2px !important;
-        width: 100px;
-    }
-}
-@media only screen and (min-width: 1000px) {
-    .nav li {
-        width: 100px;
-    }
-}
-header {
-    background: rgba(0,0,0,0.4);
-    font-family: 'IM Fell English SC';
-	margin: 0px;                                                 /*Der Versuch den header auf projects zu reparieren: margin: 1rem 0,0 klappt aber nicht so*/
-}
-
-@media only screen and (min-width: 1000px) {
-    div#project_margin {
-        margin-top: 250px;
-    }
-    video {
-        margin-top: 230px;
-    }
-}
-
-.nav ul {
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    display: flex;
-    justify-content: center;
-    width: 100%;
-}
-
-.nav li {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 1em;
-    height: 20px;
-    text-align: center;
-}
-
-.nav a {
-    font-weight: 900;
-    text-decoration: none;
-    /*! padding: 0.5em; */
-    color: white;
-    font-size: 14pt;
-    /*! font-weight: bold; */
-}
-
-
-.nav a:hover {
-    color: #ddd;
-    font-size: 16pt;
-    /*! font-weight: bold; */
-}
-
-.logo {
-    margin-top: 0.5rem;
-}
 
 /* hero-home
 =================== */
diff --git a/images/logo_button/Header_logo.png b/images/logo_button/Header_logo.png
new file mode 100644
index 0000000..3511f49
Binary files /dev/null and b/images/logo_button/Header_logo.png differ
diff --git a/images/logo_button/header_logo_ivory.png b/images/logo_button/header_logo_ivory.png
new file mode 100644
index 0000000..a801d5c
Binary files /dev/null and b/images/logo_button/header_logo_ivory.png differ
diff --git a/images/logo_button/logo_black.png b/images/logo_button/logo_black.png
new file mode 100644
index 0000000..a4eb26d
Binary files /dev/null and b/images/logo_button/logo_black.png differ