clean

assets/css/web.css

@@ -1,8 +1,85 @@
 @media screen{
+
+	/* ---- H E A D E R -----*/
+	header{
+		position: fixed;
+		width: 100%;
+		top:0;
+		left:0;
+		right: 0;
+		padding: 15px;
+		z-index: 1000;
+		background: #FFF;
+	}
+
+	header.row{
+		margin:0;
+	}
+
+	header .mobile__menu_btn {
+	  display: block;
+	  position: absolute;
+	  right: 15px;
+	  top: 15px;
+	  cursor: pointer;
+	  height: 24px;
+	  width: 24px; 
+	}
+
+	header .mobile__menu_btn span {
+	  display: block;
+	  background: #000;
+	  height: 2px;
+	  width: 26px;
+	  position: absolute;
+	  transition: all 0.5s ease;
+	}
+
+	header .mobile__menu_btn span:nth-child(1) { top: 0px; }
+	header .mobile__menu_btn span:nth-child(2) { top: 8px; }
+	header .mobile__menu_btn span:nth-child(3) { top: 16px; }
+	header .mobile__menu_btn .transparent { opacity: 0; }
+
+	header .mobile__menu_btn .rotate-top {
+	  -ms-transform: rotate(45deg);
+	  transform: rotatez(45deg);
+	  -webkit-transform-origin: 0%;
+	  left: 2px; 
+	}
+
+	header .mobile__menu_btn .rotate-bottom {
+	  -ms-transform: rotate(-45deg);
+	  transform: rotatez(-45deg);
+	  -webkit-transform-origin: 15%; 
+	}
+
+	/* ---- M A I N -----*/
 	main{
 		padding-top: 250px;
 		max-width: 42em;
 		margin: auto;
 	}
 
-}
+	/* fade entre les pages */
+	#fade{
+	  opacity: 0;
+	  transition: opacity 1s ease-out;
+	}
+
+	#fade.loaded{
+	  opacity: 1;
+	}
+
+	/* ---- IMAGES GESTION WEB / PRINT --- */
+	.web-image { display: block;}
+	.print-image { display: none;}
+
+
+	/* ---- IMAGES LIGHT BOX ---- */
+	.glightbox-clean .gslide-title{
+		font-family: var(--fontFamily);
+		font-weight: 600;
+		line-height: 1.2;
+	}
+
+}