body
{
	margin: auto;
	font-family: Arial, Verdana, "Trebuchet MS", Helvetica, "MS sans serif";
}

.banner
{
	background-color: rgb(50,50,50);
	color: rgb(246,246,246);
}

.corps
{
	width: 1000px;
	margin: auto;
	height: auto;
}

.corps a, .corps-article a
{
	text-decoration: none;
}

.top-banner h1
{
	font-family: "Arial Black", Arial, "Trebuchet MS", Helvetica, "MS sans serif";
	color: rgb(240,160,0);
	font-size: 2.9em;
	text-align: center;
	margin: 0;
	padding: 0.5em 0.5em 0 0.5em;
}

.top-banner h2
{
	font-family: "Arial Black", Arial, "Trebuchet MS", Helvetica, "MS sans serif";
	color: rgb(0,150,200);
	font-size: 2.5em;
	text-align: center;
	margin: 0;
	padding: 0.5em 0.5em 0 0.5em;
}

.top-banner h3
{
	font-family: "Arial Black", Arial, "Trebuchet MS", Helvetica, "MS sans serif";
	color: rgb(240,160,0);
	font-size: 1.5em;
	text-align: center;
	margin: 0;
	padding: 0.5em;
}

.book-presentation
{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.book-image
{
	flex: 1 1 1em;
	padding-left: 0.5em;
}

.book-text
{
	flex: 1 1 10em;
	font-size: 1.3em;
	padding-right: 1.5em;
}

.bouton-enroll-box
{
	width: 450px;
	margin: auto;
}

.bouton-enroll
{
	color: rgb(246,246,246);
	padding: 0.3em 0.2em;
	margin: 0.4em 0;
	text-align: center;
	background-color: rgb(0,100,150);
	background: linear-gradient(rgb(0,170,220), rgb(0,70,120));
	border-radius: 4px;
	font-family: Arial, "Trebuchet MS", Helvetica, "MS sans serif";
	font-size: 2.3em;
	font-weight: bold;
}

.bouton-enroll:hover
{
	background-color: rgb(0,100,150);
	background: linear-gradient(rgb(0,150,200), rgb(0,50,100));
}

.bouton-enroll:active
{
	background-color: rgb(0,100,150);
	background: linear-gradient(rgb(0,150,200), rgb(0,50,100));
	box-shadow: 1px 1px 10px #191970 inset, 0 1px 0 rgba(255, 255, 255, 0.4);
}

.middle-banner h2
{
	font-family: "Arial Black", Arial, "Trebuchet MS", Helvetica, "MS sans serif";
	color: rgb(240,160,0);
	font-size: 3em;
	text-align: center;
	margin: 0;
	padding: 0.5em;
}

.text-banner
{
	font-size: 2em;
	text-align: center;
	font-family: "Arial Black", Arial, "Trebuchet MS", Helvetica, "MS sans serif";
	color: rgb(246,246,246);
	margin: 0 1em;
}

.corps-article
{
	width: 800px;
	margin: auto;
	height: auto;
}

.article
{
	padding: 0 0.2em; 
	font-size: 1.2em;
	text-align: justify;
	color: rgb(40,40,40);
	margin-top: 40px;
}

.article a
{
	color: rgb(102,102,153);
	text-decoration: none;
}

.article a:hover
{
	color: rgb(240,160,0);
	text-decoration: underline;
}

.article h2, .banner-article h2
{
	font-family: "Arial Black", Arial, "Trebuchet MS", Helvetica, "MS sans serif";
	color: rgb(240,160,0);
	font-size: 2.5em;
	text-align: center;
	margin: 0;
}

.banner-article
{
	padding: 0 0.2em; 
	font-size: 1.2em;
	text-align: justify;
	color: rgb(246,246,246);
	margin-top: 40px;
	padding: 0 0.4em;
}

.list li
{
	margin: 0.2em 0;
}

.list-chapters p
{
	margin: 0;
}

.center
{
	text-align: center;
}

/* responsive design  */

@media all and (max-width: 640px)
{
	.corps {width: auto;}
	.top-banner h1, .middle-banner h2 {font-size: 1.8em;}
	.top-banner h2 {font-size: 1.4em;}
	.top-banner h3 {font-size: 1.1em;}
	.book-image	{flex: 1 1 30em; padding: 1em; text-align: center;}
	.book-image img {width: 250px; height: auto;}
	.book-text {flex: 1 1 1em; font-size: 1em; padding: 0 1.5em;}
	.bouton-enroll-box {width: 280px;}
	.bouton-enroll {font-size: 1.6em;}
	.corps-article {width: auto}
	.article {padding: 0 0.4em; font-size: 1em;}
	.text-banner {font-size: 1.2em;}
	.article h2, .banner-article h2 {font-size: 1.8em;}
	.banner-article {font-size: 1em;}
}

@media all and (max-width: 820px) and (min-width: 641px)
{
	.corps {width: 641px; margin-left: auto; margin-right: auto;}
	.top-banner h1, .middle-banner h2 {font-size: 1.85em;}
	.top-banner h2 {font-size: 1.6em;}
	.top-banner h3 {font-size: 1.2em;}
	.book-image {padding-top: 1em;}
	.book-text {font-size: 1em; padding: 0 1.5em;}
	.bouton-enroll-box {width: 380px;}
	.bouton-enroll {font-size: 1.9em;}
	.corps-article {width: 620px}
	.article {padding: 0 0.4em; font-size: 1.1em;}
	.text-banner {font-size: 1.4em;}
	.article h2, .banner-article h2 {font-size: 1.8em;}
}

@media all and (max-width: 999px) and (min-width: 821px)
{
	.corps {width: 821px; margin-left: auto; margin-right: auto;}
	.top-banner h1, .middle-banner h2 {font-size: 2.4em;}
	.top-banner h2 {font-size: 2.1em;}
	.top-banner h3 {font-size: 1.4em;}
	.book-text {font-size: 1.2em; padding: 0 1.5em;}
	.bouton-enroll-box {width: 420px;}
	.bouton-enroll {font-size: 2.1em;}
	.text-banner {font-size: 1.8em;}
	.article h2, .banner-article h2 {font-size: 2em;}
	.article {padding: 0 0.4em;}
}