/* Maple Web Bold */
	@font-face {
	font-family: 'mapleweb';
	src: url('../fonts/MapleWebBold.eot');
	src: url('../fonts/MapleWebBold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/MapleWebBold.woff2') format('woff2'),
         url('../fonts/MapleWebBold.woff') format('woff');
	font-weight: bold;
	font-style: normal;
	}
	@font-face {
	font-family: 'mapleweb';
	src: url('../fonts/MapleWebRegular.eot');
	src: url('../fonts/MapleWebRegular.eot?#iefix') format('embedded-opentype'),
				 url('../fonts/MapleWebRegular.woff2') format('woff2'),
				 url('../fonts/MapleWebRegular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
	}

	@font-face {
	    font-family: 'ace_lift';
	    src: url('../fonts/ace_lift_bold-webfont.woff2') format('woff2'),
	         url('../fonts/ace_lift_bold-webfont.woff') format('woff');
	    font-weight: bold;
	    font-style: normal;

	}


	@font-face {
	    font-family: 'ace_lift';
	    src: url('../fonts/ace_lift-webfont.woff2') format('woff2'),
	         url('../fonts/ace_lift-webfont.woff') format('woff');
	    font-weight: normal;
	    font-style: normal;

	}

/**
 * main.css
 *
 * 1. General HTML tags
 * 2. Masthead area
 * 3. Main content and sidebar
 * 4. Footer
 * 5. Media queries for responsive layout
 * 6. Accessibility helpers
 *
 */

/*********************************************************************
 * 1. General HTML tags
 *
 */

* {
	box-sizing: border-box;
}
.cadre {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
position: fixed;
top:0px;
left: 0px;

opacity: 0.9;
pointer-events: none;
}
body {
	padding: 20px;
	max-width: 100%;
	margin: 0 auto;
	height: 100%;


}

body, td, input[type=text], textarea {
	font-family: 'mapleweb', serif;
	font-size: 105%;
	line-height: 1.5em;
	color: #3F3F6B;
}

img {
	max-width: 100%;
}

h1 { color: #8fbf2b;
	line-height: 1.2em;
}

h2 {
	font-weight: normal;
	line-height: 1.3em;
	color: pink;

}

h3 {
	padding-top: 1em;
	color: #4583fd;
	font-family: 'ace_lift';
	font-weight: normal;

}

.editable {


	text-align: center;
	font-size: 10px;
	padding-top: 5px;
	padding-bottom: 2px;

	background-color: pink;
	border-radius: 10px;

}

table {
	border-collapse: collapse;
}
table th {
	text-align: left;

	color: #4583fd;
}
table td {
	font-size: 12px;
	width: 50%;
	padding-top: 5px;
	padding-bottom: 5px;


}
tbody tr {

border-bottom: 1px solid pink;

}

.editable a {
	color: white;
border-bottom: 0px;

}

.sharebutton {
	background-color: pink;
	font-family: 'ace_lift';

	padding: 10px 15px 5px 15px;
	font-size: 12px;
	text-transform: uppercase;
	border-radius: 10px;
	letter-spacing: 1px;
	font-weight: bold;
	color:white;
	color: #3F3F6B;

}

.sharebutton:hover {
background-color: #4583fd;


}

.bar {
	text-align: center;
}

.bar a {
font-size: 10px;
}

.credit {
	margin-top: 20px;
font-size: 10px;
opacity: 0.5;
}
.follow {
	background-color: pink;
	border: 0px;
	width: 100%;
	font-family: 'mapleweb';
	font-weight: bold;
	padding: 10px;
	font-size: 1.5vw;
	border-radius: 10px;
	color: #3F3F6B;
margin-top: 5px;
margin-bottom: 5px;

}

.follow:hover {
	background-color: #3F3F6B;
	color: pink;


}

.rss {
	font-family: 'ace_lift';
	background-color: #8fbf2b;
	color: white;
	font-weight: normal;
	padding-top: 15px;
	font-size: 2vw;

}
.buy {

	padding-top: 15px;
	font-size: 1.3vw;
	width: 80%;
}

.parution {

	background-color: #4583fd;
	text-align: center;
	border: 1px solid #4583fd;
	border-radius: 10px;
margin-top: 5px;
margin-bottom: 5px;
padding-bottom: 30px;


}
.parution h1 {
margin: 30px;
	background-color: #4583fd;
	text-align: center;
	color: white;
	line-height: 0.8em;
	font-size: 3vw;
}
.parution p {
color: white;
font-size: 12px;
}
.parution img {
transform: rotate(10deg);
margin-top: -1	0px;
width: 50%;
border-left: 2px solid #3F3F6B;
border-bottom: 2px solid #3F3F6B;

}
.share {
	text-align: center;
margin-bottom: 60px;
margin-top: -13px;
}
a {
	color: #3F3F6B;
	text-decoration: none;
	border-bottom: 1px solid pink;
}
	a:hover,
	.nav a:hover {
		color: #3F3F6B;
		border-color: #3F3F6B;
	}



pre, code {
	background: #eee;
	border: 1px solid #ddd;
}

pre {
	font-size: 14px;
	line-height: 1.4em;
	padding: 1em;
	border-left: 4px solid #ddd;
}

.pagin {
text-align: center;
margin-top: 50px;width: 100%;

    margin-left: -10px;
}

ul {
	-webkit-padding-start: 0px !important;}
.MarkupPagerNav {
width: 100%;
margin-top: 20px;
text-align: center;
        clear: both;

        font-family: 'ace_lift', sans-serif;
}
.MarkupPagerNav li {
	display: inline;
	list-style: none;
	margin: 0;
text-align: center;
}

.MarkupPagerNav li a,
.MarkupPagerNav li.MarkupPagerNavSeparator {
	display: inline;
width: auto;
	padding-top: 6px;
padding-bottom: 4px;
padding-left: 9px;
padding-right: 9px;
	color: #fff;
	background: #8fbf2b;
	margin-right: 3px;
	font-size: 10px;
letter-spacing: 1px;
border-radius: 7px;
	text-transform: uppercase;
	border-bottom: 0px;
}

.MarkupPagerNav li.MarkupPagerNavOn a,
.MarkupPagerNav li a:hover {
	color: #fff;
	background: #3F3F6B;
	text-decoration: none;
}

.MarkupPagerNav li.MarkupPagerNavSeparator {
	display: inline;
	color: #777;
	background: #d2e4ea;
	padding-left: 1px;
	padding-right: 1px;
}


/*********************************************************************
 * 2. Masthead area
 *
 */

 .topnav {

	 	position: fixed;
		margin-left: 1.5%;
		background-color: white;
		margin-top: 2em;
		width: 20%;

 }


.topnav, .topnav li {
	list-style: none;
	padding: 0;

}

.logo {
text-align: center;
		 margin-bottom: 4em;
}

.logo img{
width: 75%;
}

	.topnav li {

		margin-right: 1em;
		margin-bottom: 1em;

		text-align: center;



	}
	.topnav a {
		padding: 0.25em 0.5em;
		text-decoration: none;
		display: block;
		color: pink;
		font-size: 1vn;

	}
	.topnav a:hover {
		color: #4583fd;
	}
	.topnav li.current a {
font-family: 'ace_lift';
	color: #a3bc4b;



	}
	.topnav li.edit a {
		background: none;
	}

	.topnav a {
	border-bottom: 0px;
	}


form.search {
	float: right;
	margin: 0;
	width: 100%;
}
	form.search input {
		margin: 0;
		padding: 0.25em 0.5em;
		border: 0px;
		border-bottom: 1px solid pink;
		width: auto;
		color: pink;
		text-align: center;
	}

.breadcrumbs {
	clear: both;
	padding-top: 1em;
}
	.breadcrumbs span:after {
		content: ">";
		color: #999;
		padding-left: 0.5em;
		padding-right: 0.25em;
	}

/*********************************************************************
 * 3. Main content and sidebar
 *
 */

.post {
	margin-top: 50px;
	border: 2px solid pink;
	padding: 20px;
	padding-top: 30px;
border-radius: 40px;
padding-bottom: 50px;
background-color: white;


}

body::-webkit-scrollbar {
    width: 0.5em;

}

body::-webkit-scrollbar-track {
    background-color: pink;

}

body::-webkit-scrollbar-track:hover {
    background-color: #8fbf2b;

}

body::-webkit-scrollbar-thumb {
  background-color: #3F3F6B;

}

.post h2 {
margin: 0px;
	font-size: 3.9vw;
	font-weight: bold;
	text-align: center;
	line-height: 0.9em;
	margin-top: 10px;

}
.post h2 a {
	border-bottom: 0px;
	color: #a3bc4b;
}

.post h3{
color: pink;
font-family: 'ace_lift';
font-size: 1.4vw;
margin: 0px;
margin-bottom: 60px;
text-align: center;
padding-top: 10px;
font-weight: bold;

}



.container {
  width: 100%;
}
.eye {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  height: 30px;
  width: 30px;
  background: #CCC;
}
.eye:after { /*pupil*/
  position: absolute;
  bottom: 17px;
  right: 10px;
  width: 10px;
  height: 10px;
  background: #000;
  border-radius: 50%;
  content: " ";
}

blockquote {
	color : #4583fd;
	border: 0px;
	text-align: center;
	padding: 0px;
	font-family: 'ace_lift';
	font-style: normal;
	font-size: 30px;
	line-height: 1.4em;
}
.body-container ul {

list-style-type: none;

}
.body-container ul li:before {
content: "→ "; color: pink;


}

.body-container ul{
padding-left: 0px;


}


.body-container ol { padding-left: 0px; counter-reset: item; }
.body-container ol li { display: block; }
.body-container ol li:before {
            content: counter(item) ". ";
            counter-increment: item;
            color: pink;
						margin-left: 0px;

						font-family: 'ace_lift';
						text-align: right;
}

.break img {
	border: 0px;
	width: 100px;

}
.break {
	text-align: center;
}

#main {

	padding-top: 1em;
	margin-top: 0em;
	clear: both;
	margin-left: 25%;

}

#content {
	width: 65%;
	float: left;
	padding-bottom: 2em;
	margin-top: 0px;
	animation-name: slide;
	animation-duration: 0.7s;
	animation-timing-function: ease-out;

}


/* The animation code */
@keyframes slide {
	 from {
		 margin-top: 300px;
		 opacity:0;}
	 to {margin-top: 0px;}
}



.post img {

margin-bottom: 0px;
	border-top: 1px solid pink;
	width: 100%;
	padding: 10px;
	padding-top: 50px;
	padding-bottom: 50px;
}
.archives-abstract {

display: flex;
border-bottom: 1px solid pink;
padding-bottom: 50px;
margin-bottom: 50px;

}

.archives-abstract h1{
margin: 0px;
color: pink;
}

.archives-abstract h1>a {

border-bottom: 0px;
}


.archives-vignette  {
flex-grow: 0;
flex-shrink: 2;
flex-basis: 35%;




}

.archives-vignette img {
	border: 2px solid pink;
	border-radius: 5px;
}
.archives-description {
flex-grow: 1;
margin-left: 20px;

}
.archives-img-gallery {
width: 100%;
}
.archives-img-gallery img {
width: 20%;
margin: 5px;
border: 1px solid black;
}

.archives-description { width: 50%;
}

#sidebar {
	width: 25%;
	padding-left: 3%;
	padding-right: 3%;
	float: left;
	padding-bottom: 2em;
	position: fixed;
	right:0px;



}

.nav {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}
	.nav .nav {
		padding-left: 1.5em;
		list-style: disc;
	}
	.nav li {
		margin: 1em 0;
	}

	.nav-tree li {
		margin-top: 0;
		margin-bottom: 0;
	}

	.nav a {
		font-weight: bold;
	}

	.nav-tree li a {
		color: #777;
	}

	.nav .current > a {
		color: #333;
	}

.align_left {
	/* for images placed in rich text editor */
	float: left;
	margin: 0 1em 0.5em 0;
	position: relative;
	top: 0.5em;
	max-width: 50%;
}

.align_right {
	/* for images placed in rich text editor */
	float: right;
	margin: 0 0 0.5em 1em;
	max-width: 50%;
}

.align_center {
	/* for images placed in rich text editor */
	display: block;
	margin: 1em auto;
	position: relative;
	top: 0.5em;
}

figure {
	display: table;
	width: 1px;
	margin: 1em 0;
}

figure img {
	display: table-row;
	margin-bottom: 0.5em;
}

figure figcaption {
	display: table-row;
	font-size: smaller;
	color: #777;
	line-height: 1.4em;
}

/*********************************************************************
 * 4. Footer
 *
 */

#footer {

bottom: 10px;
float: right;
	font-size: 12px;
}

/*********************************************************************
 * 5. Media queries for responsive layout
 *
 */

@media only screen and (max-width: 767px) {
	/* mobile layout */

	body, td, textarea {
		font-size: 100%;
	}
	#content,
	#sidebar {
		float: none;
		width: 100%;
		padding: 0;
	}
	form.search {
		float: none;
		width: 100%;
	}
	#content {
		width: 100%;
	}
	#sidebar {
		padding-top: 1em;
	}
	.align_left, .align_right, .align_center {
		display: block;
		float: none;
		margin: 1em auto;
		max-width: 100%;
	}
.topnav {

position: relative;
width: 100%;
text-align: center;
}

.topnav li{
display: inline-block;

}


.logo img {
    width: 25%;

}

#main {

    margin-left: 2%;
margin-right: 2%;
}

@media only screen and (min-width: 1200px) {
	/* extra-wide desktop layout */

	body, td, textarea {
		font-size: 115%;
	}
}

/*********************************************************************
 * 6. Accessibility helpers
 *
 */

/* Hide visually, but remain approachable for screenreader */

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	white-space: nowrap;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	border: 0;
}

/* Show bypass link on hover */

.element-focusable:focus {
	clip: auto;
	overflow: visible;
	height: auto;
}

/* Sample styling for bypass link */

.bypass-to-main:focus {
	top: 0;
	left: 0;
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: #333;
	color: #fff;
}