html, body {
	margin: 0;
	padding: 0;
	font: normal 14px Tahoma,Arial, Helvetica,Sans-serif;
	color: #333;
background:url(https://thomas-daveluy.fr/scripts/pictures/background.png) #fff;
}
@font-face{
    font-family: "Snippet";
    src: url("https://thomas-daveluy.fr/scripts/Snippet-Regular.ttf");
font-display: swap;
}

img{border:none;}
a{
text-decoration:none;
color:#666;
}
a:hover{
color:#000;
	text-shadow:0 0 1px #999;
}

a.media-link img{
	box-shadow: 0 0 4px #999 !important;
	transition:box-shadow 0.25s !important;
}
a.media-link:hover img{
	box-shadow: 0 0 5px #111 !important;
}

h1, h2, h3, h4, h5, h6{
	font-family:Snippet, tahoma, arial,helvetica,sans-serif;
}

#page, header{
	border-left:1px solid #ccc;
	width:960px;
	padding:0 20px;
	margin-left:calc(50% - 670px);
}
header, footer{
	margin-bottom:25px;
	font-family:Snippet, tahoma, arial,helvetica,sans-serif;
	font-size:20px;
	color:#999;
	margin-top : 30px;
	margin-bottom:50px;
	padding:0;
	border:none;
	margin-left:calc(50% - 700px);
}
header h1{
	font-weight:normal;
	margin:0;
	font-size:50px;
}
header a{color: #a585ff;}
header p{
	margin:5px 01px
}

header{
	top:-100px;
	transition:all 0.25s;
	z-index:3000;
	height:80px;
	padding-bottom:0px;
}



nav{
	position:fixed;
	right:0;
	top:0;
	bottom:0;
	padding:20px;
	width:280px;
	background:#fefefe;
	box-shadow:0 0 10px #ccc;
	font-family:Snippet, tahoma, arial,helvetica,sans-serif;
	overflow-y:auto;
	overflow-x:hidden;
}
nav #menu-mobile{display: none;}
nav ul#nav{
	padding:0;
	list-style:none;
	width:266px;
	margin:0 0 0 -7px;
	padding:0 13px 13px;
	transition:margin 0.25s;
	border-bottom:1px solid #ccc;
}
nav ul#expo{
	padding-left:15px;
}
nav ul#expo li{
	clear:both;
	margin-bottom:10px;
}
nav ul#expo li img{
	float:left;
	padding-top:1px;
	margin:0 5px 5px 0
}

.scroll nav ul#nav{
	margin-top:105px;
}
nav ul#nav li{
	display:inline-block;
	width:64px;
	height:64px;
	vertical-align:top;
	margin:0px 5px 5px 0;
}
nav ul#nav li:first-child{
	float:left;
	margin:69px 5px 0px 0;
}
nav ul#nav li:nth-child(2){
	width:128px;
}
nav ul#nav li:nth-child(3){
	width:128px;
	height:128px;
}
nav ul#nav li:nth-child(4){
	margin:0;
	margin-top:64px;
}
nav ul#nav a, nav ul#nav form{
	display:block;
	background:#a585ff;
	font-size:15px;
	text-align:right;
	padding-right:5px;
	height:24px;
	padding-top:40px;
	width:59px;
	color:#fff;
	transition:opacity 0.25s;
}
nav ul#nav a:hover{
	opacity:0.7;
}
nav ul#nav li:first-child a{
	background:#ccc;
}
nav ul#nav li:nth-child(3) a{
	padding-top:93px;
	height:35px;
	font-size:24px;
	width:121px;
	padding-right:7px;
	background:#7d5bc3;
}
nav ul#nav li:nth-child(4) a{
	margin-left:0px;
	background:#0283c1;
}
nav ul#nav li{
	overflow:hidden;
}
nav ul#nav form{
	margin-left:64px;
	padding-left:128px;
	width:123px;
	padding-top:0;
	height:64px;
	transition:margin 0.25s, padding 0.25s, background 0.25s;
	background: url(https://thomas-daveluy.fr/scripts/pictures/search.svg) no-repeat 30px 32px #a585ff;
	background-size:28px;
}
nav ul#nav li:hover form{
	background-position:-50px 32px;
}
nav ul#nav form label{
	font-size:14px;
	display:block;
	padding-top:14px;
	padding-bottom:5px;
}
nav ul#nav form input[type=text]{
	width:98px;
	border:none;
	height:24px;
	font-size:20px;
	padding:0 10px;
	display:inline-block;
}
nav ul#nav form input[type=submit]{
	display:none;
}
nav ul#nav li:hover form, nav ul#nav li:focus form, nav ul#nav li form:focus{
	margin-left:0px;
	padding-left:0;
}
nav h2{margin-top:30px;}
nav p{font-size:14px;line-height:18px;display:block;margin-left:60px;}
nav p:before{
	float:left;
	content:"";
	display:block;
	background:url(https://portfolio.thomas-daveluy.fr/public/.carre2_s.jpg) no-repeat center;
	background-size:contain;
	width:50px;
	height:50px;
	margin-left:-60px;
}
nav p a{
	display:inline-block;
	font-size:17px;
	margin-top:10px;
	margin-left:-60px;
}
nav p a:last-child{
	margin-left:10px;
	padding-left:10px;
	margin-top:7px;
	border-left:1px solid #ccc;
}
nav ul#cat{
	padding:0;list-style:none;
	margin-top:-5px;
}
nav ul#cat li{
	display:inline-block;
	font-size:17px;
	margin:0 4px 3px 0;
}
nav ul#cat li a{
	display:block;
	color:#fff;
	background:#ccc;
	padding:1px 10px;
	border-radius:2px;
	transition:background 0.25s;
}
nav ul#cat li a:hover{
	background:#666;
}


#page .post-content{
	overflow:hidden;
}
.scroll #page{
	margin-top:150px;
}
#page .post-info{
	color:#fff;
	background:#ccc;
	display:inline-block;
	vertical-align:top;
	margin-left:-50px;
	margin-bottom:-100px;
	width:60px;
	height:auto;
	max-height:60px;
	text-shadow:0 0 2px #999;
	font-family:Snippet, tahoma, arial,helvetica,sans-serif;
	text-align:center;
	overflow:hidden;
	transition:all 0.4s;
}
#page .post-info:hover{
	height:auto;
	max-height:120px;
}
#page .post-info p{
	margin-bottom:0;
}
#page .post-info .date-d{
	display:block;
	font-size:43px;
	line-height:30px;
	margin-top:-7px;
}
#page .post-info .date-m{
	display:block;
	font-size:20px;
	line-height:30px;
	margin-top:-5px;
}
#page .post-title{
	display:inline-block;
	margin:0 -40px 0 -4px;
	padding:0;
	vertical-align:top;
	width:calc(100% + 28px);
}
#page .post-title h2{
	display:block;
	margin:0 0 5px 0;
	padding-left:15px;
	font-size:34px;
	font-weight:normal;
	border-bottom:1px solid #ccc;
	width:100%;
}
#page .post-title h2 a{
	color: #7d5bc3;
	text-shadow:0 0 2px #ccc;
}
#page .post-title h2 a:hover{
	color: #000;
}
#page .post-title p{
	padding-left:15px;
	margin:0;
}
#page .post-content blockquote{
	font-style:italic;
	font-family:times,times-new-roman, times new roman, serif;
	margin:30px 0 30px 25px;
	font-size:16px;
	position:relative;
	min-height:50px;
}
#page .post-content hr{
	border:none;
	border-top:1px solid #ccc;
	margin:40px 0;
}
#page .post-content blockquote:before, #page .post-content blockquote:after{
	content:"‘‘";
	font-size:100px;
	position:absolute;
	top:20px;
	left:-52px;
	height:0;
	letter-spacing: -8px;
	text-align: left;
	color:#000;
	opacity:0.25;
}
#page .post-content blockquote:before{
	content:"’’";
	left:auto;
	top:auto;
	bottom:-5px;
	right:25px;
	margin:0;
	width:25px;
	z-index:0;
}
#page .post-content, #page .post-excerpt{
	background:#fff;
	width:100%;
	padding:10px 20px 20px;
	border-radius:4px;
	box-shadow:0px 5px 6px #ccc;
	font-size:14px;
	line-height: 20px;
	margin-bottom:120px;
	margin-top:20px;
	color:#111;
}
#page .post-excerpt{
	border-radius:0 0px 4px 4px;
	margin-top:-5px;
	margin-bottom:60px;
	padding-top:25px;
	padding-bottom:25px;
	box-shadow:0px 6px 3px rgba(0,0,0,.05);
	background: linear-gradient(180deg,  rgba(255,255,255,0) 0%, #fff 30%);
	min-height:40px;
}
#page .post-excerpt img{
	float:left;
	margin:0 10px 5px 0;
}
#page .post-content img{
	max-width:100%;
}
#page .post-excerpt .more{
	text-align:center;
	display:inline-block;
	margin-top:10px;
	background:#a585ff;
	padding:3px 15px;
	float:right;
	border-radius:3px;
	color:#fff;
	font-family:Snippet, tahoma,arial,helvetica,sans-serif;
	text-transform: uppercase;
	font-size:16px;
}

#navlinks{
	margin-top:-50px;
	width:100%;
	padding-bottom:30px;
}

#navlinks span a{
	display:inline-block;
	border:1px  solid #ccc;
	padding:2px 15px 2px 10px;
	border-radius:3px;
	height:24px;
	line-height:24px;
	margin-left:25px;
}
#navlinks span:last-child a{
	float:right;
	padding:2px 10px 2px 15px;
}
#navlinks span a:before{content:"◄";margin-right:10px;}
#navlinks span:last-child a:before{content:"";display:none;margin:0;}
#navlinks span:last-child a:after{content:"►";margin-left:10px;}

#navlinks span a:hover{
	background:#eee;
}

#content-info{
	margin-left:-20px;
	margin-bottom:55px;
}
#content-info h2{
	margin:0;
	padding:0;
	height:50px;
	line-height:50px;
	font-size:34px;
}
#content-info h2:before{
	content:"";
	display:inline-block;
	vertical-align:top;
	background: url(https://thomas-daveluy.fr/scripts/pictures/search.svg) no-repeat center #ccc;
	background-size:30px;
	height:50px;
	width:49px;
	font-size:34px;
	line-height:50px;
	margin-right:15px;
}
.dc_archive #content-info h2:before{
	background-image: url(img/archive.svg);
}
.dc_cat #content-info h2:before{
	
	background:  #ccc;
	
}
#content-info p{
	margin-left:65px;
	margin-top:0;
}


footer{
font-size:16px;
	margin-top:50px;
}
footer ul{padding:0;margin:0;list-style:none;}
footer p{margin:0 0 10px;}
footer li{
	display:inline-block;
	border-left:1px solid #ccc;
	margin-left:5px;
	padding-left:8px;
}
footer li:first-child{
	border-left:none;
	margin-left:0;
	padding-left:0;
}


@media screen and (min-width:1440px) {
.scroll header{
	height:auto;
	position:fixed;
	top:0px;
	text-align:right;
	width:auto;
	right:15px;
	margin-top:0;
	padding:15px 0;
	border-bottom:1px solid #ccc;
	background:#fefefe;
}
.scroll header h1{
	font-size:26px;
	padding-top:0px;
}
.scroll header p{
	font-size:16px;
	width:290px;
}
	
}
 @media screen and (max-width:1440px) {
	 nav{
		 right:-280px;
		 transition:right 0.35s;
	 }
	 nav:hover, nav:focus{
		 right:0;
	 }
	 header, #page, .scroll header, .scroll #page{
		 margin-left:auto;
		 margin-right:auto;
		 width:calc(98% - 130px);
		 max-width:960px;
	 }
	 
#page .post-content{max-width:98%;}
	 
	 .scroll nav ul#nav{margin-top:0;}
	 
	 
	footer{
		text-align:center;
		margin-left:0;
		width:calc(100% - 50px);
	}
}





 @media screen and (max-width:600px) {
	 header, .scroll header{top:0;left:0;right:0;margin:15px 0;width:100%;}
	 header h1, .scroll header h1{
		 font-size:34px;
		 text-align:left;
		 border-bottom:1px solid #ccc;
		 margin:0 15px;
		 padding-bottom:12px;
	 }
	 header p, .scroll header p{
		 display:none;
	 }
	 #page, .scroll #page{
		 width:99.5%;
		 padding:0;
		 margin:0;
		 overflow:hidden;
	 }
	 #page .post{background:#fff;}
	 #page .post-info{
		 margin:10px;
	 }
	 #page .post-title{
		 width:calc(100% - 110px);
		 vertical-align:top;
		 margin-top:10px;
	 }
	 #page .post-title h2, #page .post-title p{
		 padding-left:0;
	 }
	 #page .post-content{
		 border-radius:0;
		 width:96%;
		 padding:10px 2%;
		 margin-bottom:80px;
		 margin-top:0;
	 }
	 
	 #page .post-excerpt{
		 width:94%;
		 
	 }
	 #content-info{
	margin-left:10px;
	margin-bottom:55px;
}
nav,nav:hover, nav:focus{right:-320px;}
nav.menu{right:0;}
	 
	 nav #menu-mobile{
	 display:block;
		 position:fixed;
		 top:5px;
		 right:5px;
		 width:60px;
		 padding:0;
		 height:60px;
		 cursor:pointer;
		 opacity:0.5;
		 background:#fff;
		 border-radius:30px;
		 transition: all 0.35s;
		 left:calc(100% - 65px);
	 }
	 nav.menu #menu-mobile{
		 top:-5px;
		 right:320px;
		 left:-10px;
		 width:calc(100% - 330px);
			 border-radius:0;
		 height:100%;
		 padding:10px;
		 opacity:0.9;
		 box-shadow:0 0 10px #ccc inset;
	 }
	 nav #menu-mobile:after, nav #menu-mobile:before{
	 content:"";
		 display:block;
		 position:fixed;
		 margin:10px;
		 margin-top:15px;
		 border-top:5px solid #000;
		 border-bottom:5px solid #000;
		 width:40px;
		 height:19px;
		 transition: all 0.35s;
	 }
	 nav #menu-mobile:before{
	 margin-top:8px;
		 border-top:none;
	 }
	 nav.menu #menu-mobile:after{
		 margin-top:27px;
		 border-bottom:0px solid rgba(0,0,0,0);
		 height:0px;
		 transform:rotate(45deg);
	 }
	 nav.menu #menu-mobile:before{
		 transform:rotate(-45deg);
		 height:0;
		 margin-top:27px;
	 }	 
}