/* CSS Document */
#nav { position: absolute; top: 50px; left: 50px;  }
#page { min-height: 100vh; display: flex; flex-direction: column; }
#footer { margin-top: auto; }

.menu { position: absolute; top: 0; left: 0; width: 100%; background-color: #f7f7f7; border-bottom-left-radius: 50% 15px; border-bottom-right-radius: 50% 15px; }
.fixed .menu { position: fixed; z-index: 100; }
.menu h3 { line-height: 48px; }
.close { display: block; position: absolute; top: 15px; right: 15px; width: 32px; height: 32px; }
.close:before,
.close:after {  content: ''; display: block; position: absolute; width: 32px; height: 2px; transform: rotate(45deg); background: #000; margin-top: 16px; }
.close:after { transform: rotate(-45deg); }
#intro { color: #fff; text-shadow: 1px 1px 5px #000; }
#intro svg { fill: #fff; }
#intro .date { line-height: 24px; }
#intro h1 a { color: #fff; text-decoration: none; }
#intro .count { opacity: 0.8; }
.h2bh1 { background-color: #000; color: #fff; padding: 5px 10px; display: inline-block; }

.photos-container { display: flex; align-items: flex-start; }
.photos-container .column { width: calc(33.3% - 10px); display : inline-block; margin: 0 10px 10px 0; flex: 1 auto; }
.photos-container .column:last-child { margin-right: 0; }
.photos-container > div > * { display: block; margin: 0 0 10px 0; color: #333; text-decoration: none; }
.photos-container img { min-width: 100%; }
.photos-container figure { display: block; }
.photos-container .actions { opacity: 0; position: absolute; top: 5px; left: 5px; z-index: 10; }
.photos-container .actions button { display: inline-block; margin: 0 5px 5px 0; padding:0; border: 1px solid #000; width: 24px; height: 24px; outline: none; background-color: #fff; border-radius: 2px; }

.photos-container .photo-wrapper { position:relative; border-radius: 2px; box-shadow: 0 0 5px #ccc; overflow: hidden; }
.photos-container .photo-wrapper:hover .actions { opacity: 1; }

.categories { margin: 0; padding: 0; }
.categories li { display: inline-block; margin: 5px 5px 0 0; }
.categories li a { display: inline-block; background: #fff; color: #000; padding: 5px 10px; text-decoration: none; text-shadow: none; transition: all 0.5s; }
.categories li a:hover { background: #000; color: #fff; }

#page article { min-height: 20vh; }

#footer { background-color: #000; border-top-left-radius: 50% 25px; border-top-right-radius: 50% 25px; color: #fff; padding: 30px 0; border-top: 10px solid #fff;}
#footer svg { fill: #fff; }
#footer::selection { background-color: #fff; color: #000; }
#footer a { text-decoration: none; color: #fff; }

/* Catégories */
#header header a { color: #fff; text-decoration: none; }
#header header { color: #fff; }
.blog-item { background-color: #fff; box-shadow: 0 0 10px #ccc; padding: 1rem; position: relative; margin-bottom: 2rem; }
.blog-title { margin: .5rem 0 .5rem 0; }
.blog-title a { color: #111; text-decoration: none; font-size: 1.2rem; display: block; }
.blog-date { color: #666; font-style: italic; }
.blog-cat { margin: 0; display: inline-block; padding: .2rem .8rem; background: #111; color: #fff; font-size: .8rem; border-radius: .8rem; }
.blog-more { display: inline-block; padding: 0; border: 1px solid; text-decoration: none; background: #111; color: #fff; font-weight: bold; width: 32px; height: 32px; line-height: 30px; position: absolute; right: 24px; bottom: -16px; border-radius: 3px; text-align: center; transition: 1s all; }
.blog-more:hover { border-radius: 50%; }

@media (max-width:680px){
	.photos-container > * { width: calc(50% - 10px); }
}

@media (max-width:480px){
	#header { padding: 0 0 30px 0; }
	#header > div {  display: flex; flex-direction: column; }
	#nav { order: 0; position: relative; top: auto; left: auto; margin-top: 1rem; }
	.fixed #nav { margin-top: 0; }
	#intro { order: 3; }
}