Update Shepar-photography1.css

Shepar-photography1.css

@@ -1,7 +1,8 @@
+
 /*Main Menu*/
 .main{
     max-width: 100%;
-    padding-bottom: 20px;
+    padding:20px 120px;
 }
 
 .nav {
@@ -28,34 +29,40 @@
     color: black;
     padding: 20px 20px;
     display: inline-block;
+
 }
 
 .link-nav {
     text-decoration: none;
     color: black;
     padding: 20px 20px;
+    font-family: sans-serif;
+    font-size: 25px;
 }
 
 .nav-button{
     width: 28px;
     height: 28px;
-    display:none;
+    display:block;
 }
 
-.title-shepar{
+.mutual-title{
     font-family: lucida handwriting;
     padding: 40px 50px;
     display:inline-block;
 }
+
 /*Project section*/
 .flex-container{
     display:flex;
     justify-content: center;
     flex-direction: row;
+    max-width: 100%;
+    margin: 0;
 }
 .flex-item{
 
-    padding: 20px 20px;
+    padding: 20px 40px;
     margin: 0;
 }
 .link-flex{
@@ -74,12 +81,15 @@ a:hover{
     bottom: 20px;
     left: 20px;
 }
+
 /*Footer*/ 
 
 .footer{
     text-align: center;
 }
-/*Common features between pages*/
+
+
+/*COMMON FEATURES BETWEEN PAGES*/
 a:hover{
     color:lightgrey;
 }
@@ -97,7 +107,111 @@ a:hover{
 .home-button>a:hover{
     color:lightgrey;
 }
+.project-flex-container{
+    display: flex;
+    flex-direction: row;
+    padding:30px 40px;
+    margin:0;
+    justify-content: center;
+
+}
+.project-title-item{
+    margin:0;
+    padding: 50px 100px;
+    font-size: 26px;
+    justify-content: center;
+}
+.project-picture-1, .project-picture-2 {
+    padding: 20px 20px;
+    margin:0 30px;
+}
+.project-picture-single{
+    text-align: center;
+    margin: 40px 30px;
+    padding: 30px;
+    background-color: ;
+}
+.nav-projectbt-container{
+    display: flex;
+    margin:0;
+    justify-content: center;
+    padding: 0 30px;
+    max-width: 100%;
+}
+.nav-projectbt-item{
+    font-size: 35px;
+    margin:0;  
+}
+.nav-projectbt-item>a{
+    text-decoration: none;
+    color: black;
+}
+.nav-projectbt-item>a:hover{
+color:lightgrey;
+
+}
+.left{
+  justify-content: left;
+  padding:45px 500px 45px 90px;
+}
+.right{
+    text-align: right;
+    padding:45px 90px 45px 500px;
+}
 
+.nav-overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0,0,0,0.3);
+    display: none;
+    animation: fadeIn linear 0.5s;
+}
+.nav-mobile{
+position:fixed;
+top:0;
+right:0;
+bottom: 0;
+width: 320px;
+max-width: 100%;
+background-color: #fff;
+transform: translateX(200%);
+transition: transform linear 0.2s;
+}
+
+.nav-mobile-container{
+margin-top: 24px;
+list-style-type: none;
+}
+
+.nav-mobile-link{
+display: block;
+text-decoration: none;
+font-size: 25px;
+padding: 8px 0;
+color: black;
+}
+
+.nav-mobile-close{
+    width: 20px;
+    height: 20px;
+    color:black;
+    position: absolute;
+    top: 16px;
+    right: 16px;
+}
+.nav-input{
+    display: none;
+}
+.nav-input:checked ~ .nav-overlay{
+    display: block;
+
+}
+.nav-input:checked ~ .nav-mobile{
+  transform: translateX(0%);
+}
 
 /*About page*/
 
@@ -110,7 +224,7 @@ a:hover{
     display: flex;
     justify-content: center;
     flex-direction: row;
-    flex: 60% 40%;
+    flex: 50% 50%;
 }
 .about-flex-container-item{
     margin:0;
@@ -143,7 +257,7 @@ a:hover{
 }
 /*Mobile - (IphoneX)*/
 @media only screen and (min-width : 320px) and (max-width:767px) {
-    .flex-container, .about-flex-container{
+    .flex-container, .about-flex-container, .project-flex-container{
         flex-direction: column;
     }
     .nav-button{
@@ -153,4 +267,11 @@ a:hover{
         display: none;
     }
     }
-
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}