Use autoprefixer in css

static/css/hamburger.css

@@ -17,28 +17,22 @@
 #toggle:focus ~ .toggle-container .button-toggle,
 #toggle:checked ~ .toggle-container .button-toggle {
 	-webkit-box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);
-		 -moz-box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);
 					box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);
 }
 
 #toggle:checked ~ .toggle-container .button-toggle:hover,
 #toggle:checked:focus ~ .toggle-container .button-toggle {
 	-webkit-box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1), 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);
-		 -moz-box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1), 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);
 					box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1), 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);
 }
 
 #toggle:checked ~ .toggle-container .button-toggle:before {
 	-webkit-transform: translateY(-50%) rotate(45deg) scale(1);
-			-ms-transform: translateY(-50%) rotate(45deg) scale(1);
-			 -o-transform: translateY(-50%) rotate(45deg) scale(1);
 					transform: translateY(-50%) rotate(45deg) scale(1);
 }
 
 #toggle:checked ~ .toggle-container .button-toggle:after {
 	-webkit-transform: translateY(-50%) rotate(-45deg) scale(1);
-			-ms-transform: translateY(-50%) rotate(-45deg) scale(1);
-			 -o-transform: translateY(-50%) rotate(-45deg) scale(1);
 					transform: translateY(-50%) rotate(-45deg) scale(1);
 }
 
@@ -46,8 +40,6 @@
 	margin-bottom: 100px;
 	pointer-events: auto;
 	-webkit-transform: translate(0px, 50px);
-			-ms-transform: translate(0px, 50px);
-			 -o-transform: translate(0px, 50px);
 					transform: translate(0px, 50px);
 }
 
@@ -62,28 +54,20 @@
 	margin: 0;
 	opacity: 1;
 	-webkit-transform: scaleY(1);
-			-ms-transform: scaleY(1);
-			 -o-transform: scaleY(1);
 					transform: scaleY(1);
 	-webkit-transition: .5s, opacity .1s;
-		 -moz-transition: .5s, opacity .1s;
-			 -o-transition: .5s, opacity .1s;
 					transition: .5s, opacity .1s;
 }
 
 #toggle:checked ~ .nav .nav-item:nth-child(1),
 #toggle:checked ~ .nav .nav-item:nth-child(1):before {
 	-webkit-transition-delay: .15s;
-		 -moz-transition-delay: .15s;
-			 -o-transition-delay: .15s;
 					transition-delay: .15s;
 }
 
 #toggle:checked ~ .nav .nav-item:nth-child(2),
 #toggle:checked ~ .nav .nav-item:nth-child(2):before {
 	-webkit-transition-delay: .01s;
-		 -moz-transition-delay: .01s;
-			 -o-transition-delay: .01s;
 					transition-delay: .01s;
 }
 
@@ -91,16 +75,12 @@
 #toggle:checked ~ .nav .nav-item:nth-child(3),
 #toggle:checked ~ .nav .nav-item:nth-child(3):before {
 	-webkit-transition-delay: .05s;
-		 -moz-transition-delay: .05s;
-			 -o-transition-delay: .05s;
 					transition-delay: .05s;
 }
 
 #toggle:checked ~ .nav .nav-item:nth-child(4),
 #toggle:checked ~ .nav .nav-item:nth-child(4):before {
 	-webkit-transition-delay: 0s;
-		 -moz-transition-delay: 0s;
-			 -o-transition-delay: 0s;
 					transition-delay: 0s;
 }
 
@@ -117,14 +97,11 @@
 	height: 20px;
 	margin: 25px 0;
 	-webkit-box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);	
-		 -moz-box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);	
 					box-shadow: 0 0 0 8px rgba(0, 0, 0, .1), inset 0 0 0 8px rgba(0, 0, 0, .1);	
 	border: none;
 	cursor: pointer;
 	border-radius: 100%;
 	-webkit-transition: .6s;
-		 -moz-transition: .6s;
-			 -o-transition: .6s;
 					transition: .6s;
 }
 /* button X container (toggled) */
@@ -139,22 +116,16 @@
 	background-color: black;
 	border-radius: 5px;
 	-webkit-transition: .5s;
-		 -moz-transition: .5s;
-			 -o-transition: .5s;
 					transition: .5s;
 }
 /* button \ container  */
 .button-toggle:before {
 	-webkit-transform: translateY(-50%) rotate(45deg) scale(0);
-			-ms-transform: translateY(-50%) rotate(45deg) scale(0);
-			 -o-transform: translateY(-50%) rotate(45deg) scale(0);
 					transform: translateY(-50%) rotate(45deg) scale(0);
 }
 /* button / container  */
 .button-toggle:after {
 	-webkit-transform: translateY(-50%) rotate(-45deg) scale(0);
-			-ms-transform: translateY(-50%) rotate(-45deg) scale(0);
-			 -o-transform: translateY(-50%) rotate(-45deg) scale(0);
 					transform: translateY(-50%) rotate(-45deg) scale(0);
 }
 
@@ -164,8 +135,6 @@
 	margin: 25px 0;
 	pointer-events: none;
 	-webkit-transition: .5s;
-		 -moz-transition: .5s;
-			 -o-transition: .5s;
 					transition: .5s;
 }
 
@@ -181,44 +150,32 @@
 	text-transform: uppercase;
 	white-space: nowrap;
 	-webkit-transform: scaleY(.2);
-			-ms-transform: scaleY(.2);
-			 -o-transform: scaleY(.2);
 					transform: scaleY(.2);
 	-webkit-transition: .5s, opacity .1s;
-		 -moz-transition: .5s, opacity .1s;
-			 -o-transition: .5s, opacity .1s;
 					transition: .5s, opacity .1s;
 }
 
 .nav-item:nth-child(1),
 .nav-item:nth-child(1):before {
 	-webkit-transition-delay: 0s;
-		 -moz-transition-delay: 0s;
-			 -o-transition-delay: 0s;
 					transition-delay: 0s;
 }
 
 .nav-item:nth-child(2),
 .nav-item:nth-child(2):before {
 	-webkit-transition-delay: .05s;
-		 -moz-transition-delay: .05s;
-			 -o-transition-delay: .05s;
 					transition-delay: .05s;
 }
 
 .nav-item:nth-child(3),
 .nav-item:nth-child(3):before {
 	-webkit-transition-delay: .1s;
-		 -moz-transition-delay: .1s;
-			 -o-transition-delay: .1s;
 					transition-delay: .1s;
 }
 
 .nav-item:nth-child(4),
 .nav-item:nth-child(4):before {
 	-webkit-transition-delay: .15s;
-		 -moz-transition-delay: .15s;
-			 -o-transition-delay: .15s;
 					transition-delay: .15s;
 }
 
@@ -244,12 +201,8 @@
 	height: 2px;
 	background-color: black;
 	-webkit-transform: translateY(-50%) scaleY(5);
-			-ms-transform: translateY(-50%) scaleY(5);
-			 -o-transform: translateY(-50%) scaleY(5);
 					transform: translateY(-50%) scaleY(5);
 	-webkit-transition: .5s;
-		 -moz-transition: .5s;
-			 -o-transition: .5s;
 					transition: .5s;
 }
 /* .main-layout {

static/css/image-modal.css

@@ -7,6 +7,10 @@
 	border: 0;
 	padding: 0;
 }
+#dialog-image-modal::-webkit-backdrop,
+#dialog-image-modal::-webkit-backdrop {
+	background: #ffffff00;
+}
 #dialog-image-modal::backdrop,
 #dialog-image-modal::-webkit-backdrop {
 	background: #ffffff00;
@@ -30,24 +34,17 @@
 }
 #close-modal {
 	position: absolute;
-	align-self: flex-end;
+	-ms-flex-item-align: end;
+	    align-self: flex-end;
 	width: calc(2.5 * var(--tile-margin));
 	-webkit-transform: translate(50%, -50%);
-			-ms-transform: translate(50%, -50%);
-			 -o-transform: translate(50%, -50%);
 					transform: translate(50%, -50%);
 	-webkit-transition: .3s ease;
-		 -moz-transition: .3s ease;
-			 -o-transition: .3s ease;
 					transition: .3s ease;
 }
 #close-modal:hover {
 	-webkit-transform: translate(50%, -50%) rotate(45deg);
-			-ms-transform: translate(50%, -50%) rotate(45deg);
-			 -o-transform: translate(50%, -50%) rotate(45deg);
 					transform: translate(50%, -50%) rotate(45deg);
 	-webkit-transition: .3s ease;
-		 -moz-transition: .3s ease;
-			 -o-transition: .3s ease;
 					transition: .3s ease;
 }

static/css/main.css

@@ -113,6 +113,8 @@ a.selected, a[href]:hover {
 	color: var(--theme-color);
 }
 div {
+	display: -webkit-box;
+	display: -ms-flexbox;
 	display: flex;
 }
 body {
@@ -127,9 +129,16 @@ body {
 #wide-header {
 	width: calc(100% - 2*(var(--body-margin)));
 	margin: 0;
+	display: -webkit-box;
+	display: -ms-flexbox;
 	display: flex;
-	flex-direction: column;
-	justify-content: flex-end;
+	-webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+	    -ms-flex-direction: column;
+	        flex-direction: column;
+	-webkit-box-pack: end;
+	    -ms-flex-pack: end;
+	        justify-content: flex-end;
 	position: fixed;
 	background-color: var(--bgcolor);
 	height: var(--header-space);
@@ -139,61 +148,128 @@ body {
 .header-box {
 	padding-bottom: calc(2 * var(--tile-margin));
 	overflow: hidden;
+	display: -webkit-box;
+	display: -ms-flexbox;
 	display: flex;
-	flex-direction: row;
-	align-items: flex-end;
-	justify-content: space-between;
-	flex-wrap: wrap;
+	-webkit-box-orient: horizontal;
+	-webkit-box-direction: normal;
+	    -ms-flex-direction: row;
+	        flex-direction: row;
+	-webkit-box-align: end;
+	    -ms-flex-align: end;
+	        align-items: flex-end;
+	-webkit-box-pack: justify;
+	    -ms-flex-pack: justify;
+	        justify-content: space-between;
+	-ms-flex-wrap: wrap;
+	    flex-wrap: wrap;
 	height: var(--header-inner-space);
 }
 .vbox {
+	display: -webkit-box;
+	display: -ms-flexbox;
 	display: flex;
-	flex-direction: column;
-	align-items: center;
+	-webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+	    -ms-flex-direction: column;
+	        flex-direction: column;
+	-webkit-box-align: center;
+	    -ms-flex-align: center;
+	        align-items: center;
 }
 .rbox .vbox {
-	align-items: flex-end;
+	-webkit-box-align: end;
+	    -ms-flex-align: end;
+	        align-items: flex-end;
 }
 .lbox .vbox {
-	align-items: flex-start;
+	-webkit-box-align: start;
+	    -ms-flex-align: start;
+	        align-items: flex-start;
 }
 .hbox {
+	display: -webkit-box;
+	display: -ms-flexbox;
 	display: flex;
-	flex-direction: row;
-	align-items: center;
+	-webkit-box-orient: horizontal;
+	-webkit-box-direction: normal;
+	    -ms-flex-direction: row;
+	        flex-direction: row;
+	-webkit-box-align: center;
+	    -ms-flex-align: center;
+	        align-items: center;
 }
 .lbox {
+	display: -webkit-box;
+	display: -ms-flexbox;
 	display: flex;
-	flex-direction: row;
-	align-items: flex-end;
-	justify-content: flex-start;
+	-webkit-box-orient: horizontal;
+	-webkit-box-direction: normal;
+	    -ms-flex-direction: row;
+	        flex-direction: row;
+	-webkit-box-align: end;
+	    -ms-flex-align: end;
+	        align-items: flex-end;
+	-webkit-box-pack: start;
+	    -ms-flex-pack: start;
+	        justify-content: flex-start;
 }
 .rbox {
+	display: -webkit-box;
+	display: -ms-flexbox;
 	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: flex-end;
+	-webkit-box-orient: horizontal;
+	-webkit-box-direction: normal;
+	    -ms-flex-direction: row;
+	        flex-direction: row;
+	-webkit-box-align: center;
+	    -ms-flex-align: center;
+	        align-items: center;
+	-webkit-box-pack: end;
+	    -ms-flex-pack: end;
+	        justify-content: flex-end;
 }
 .header-subtitle {
+	display: -webkit-box;
+	display: -ms-flexbox;
 	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: flex-end;
-	align-items: center;
+	-webkit-box-orient: horizontal;
+	-webkit-box-direction: normal;
+	    -ms-flex-direction: row;
+	        flex-direction: row;
+	-ms-flex-wrap: wrap;
+	    flex-wrap: wrap;
+	-webkit-box-pack: end;
+	    -ms-flex-pack: end;
+	        justify-content: flex-end;
+	-webkit-box-align: center;
+	    -ms-flex-align: center;
+	        align-items: center;
 	margin-top: 0;
 }
 #alucho-title, #designer-subtitle {
-	flex-wrap: wrap;
+	-ms-flex-wrap: wrap;
+	    flex-wrap: wrap;
 }
 .no-bottom {
 	margin-bottom: 0;
 }
 .header-title {
+	display: -webkit-box;
+	display: -ms-flexbox;
 	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: flex-end;
-	align-items: center;
+	-webkit-box-orient: horizontal;
+	-webkit-box-direction: normal;
+	    -ms-flex-direction: row;
+	        flex-direction: row;
+	-ms-flex-wrap: wrap;
+	    flex-wrap: wrap;
+	-webkit-box-pack: end;
+	    -ms-flex-pack: end;
+	        justify-content: flex-end;
+	-webkit-box-align: center;
+	    -ms-flex-align: center;
+	        align-items: center;
 }
 a.first {
 	margin-left: var(--tile-margin);
@@ -202,21 +278,33 @@ a.last {
 	margin-right: var(--tile-margin);
 }
 main {
+	display: -webkit-box;
+	display: -ms-flexbox;
 	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: flex-start;
+	-webkit-box-orient: horizontal;
+	-webkit-box-direction: normal;
+	    -ms-flex-direction: row;
+	        flex-direction: row;
+	-ms-flex-wrap: wrap;
+	    flex-wrap: wrap;
+	-webkit-box-pack: start;
+	    -ms-flex-pack: start;
+	        justify-content: flex-start;
 	margin-top: calc(var(--header-space) - var(--tile-margin));
 	position: static;
 }
 figure {
 	position: relative;
+	display: -webkit-box;
+	display: -ms-flexbox;
 	display: flex;
 	width: calc(100% / var(--columns) - 2 * var(--tile-margin));
 	margin: var(--tile-margin);
 	overflow: hidden;
 }
 figure img.tile, svg {
+	display: -webkit-box;
+	display: -ms-flexbox;
 	display: flex;
 	width: 100%;
 	height: 100%;
@@ -225,42 +313,51 @@ figure img.tile, svg {
 figure figcaption {
 	font-size: .7em;
 	padding: var(--caption-vmargin) var(--caption-hmargin);
+	display: -webkit-box;
+	display: -ms-flexbox;
 	display: flex;
-	flex-direction: column;
+	-webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+	    -ms-flex-direction: column;
+	        flex-direction: column;
 	position: absolute;
 	background-color: var(--bgcolor);
 	bottom: 0;
 	width: calc(100% - 2 * var(--caption-hmargin));
 	-webkit-transform: translateY(100%);
-			-ms-transform: translateY(100%);
-			 -o-transform: translateY(100%);
 					transform: translateY(100%);
 	-webkit-transition: .3s ease;
-		 -moz-transition: .3s ease;
-			 -o-transition: .3s ease;
 					transition: .3s ease;
 }
 figure:hover figcaption {
 	-webkit-transform: translateY(0);
-			-ms-transform: translateY(0);
-			 -o-transform: translateY(0);
 					transform: translateY(0);
 	-webkit-transition: .3s ease;
-		 -moz-transition: .3s ease;
-			 -o-transition: .3s ease;
 					transition: .3s ease;
 }
 figcaption h1 {
 	margin: 0;
 }
 .caption {
+	display: -webkit-box;
+	display: -ms-flexbox;
 	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
+	-webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+	    -ms-flex-direction: column;
+	        flex-direction: column;
+	-webkit-box-align: start;
+	    -ms-flex-align: start;
+	        align-items: flex-start;
 }
 footer {
+	display: -webkit-box;
+	display: -ms-flexbox;
 	display: flex;
-	flex-direction: column;
+	-webkit-box-orient: vertical;
+	-webkit-box-direction: normal;
+	    -ms-flex-direction: column;
+	        flex-direction: column;
 	margin: 0 var(--tile-margin);
 	height: var(--body-margin);
 	font-size: .7em;
@@ -273,13 +370,23 @@ footer::after {
 }
 .footer-content {
 	height: calc(var(--body-margin) - var(--tile-margin));
+	display: -webkit-box;
+	display: -ms-flexbox;
 	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	justify-content: space-between;
+	-webkit-box-orient: horizontal;
+	-webkit-box-direction: normal;
+	    -ms-flex-direction: row;
+	        flex-direction: row;
+	-ms-flex-wrap: wrap;
+	    flex-wrap: wrap;
+	-webkit-box-pack: justify;
+	    -ms-flex-pack: justify;
+	        justify-content: space-between;
 }
 footer .copyright, footer .social {
-	align-items: center;
+	-webkit-box-align: center;
+	    -ms-flex-align: center;
+	        align-items: center;
 }
 footer a.first {
 	margin-left: 0;