@charset "UTF-8";

/***************************/
/***************************/
/********** STYLE **********/
/***************************/
/***************************/

* {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-o-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
}
html {
	font-size:100%;
}
html,
input,
textarea,
select,
button {
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}
body {
	font-size:1.5rem;
	text-align:center;
	color:gold;
	margin:2px 0 0 4px;
	background:url(../images/violet_007.jpg) repeat bottom center fixed;
	border: solid 1rem lime;
}
h1, h2, h3, h4, h5, h6 {
	font-family:fantasy;
	color:maroon;
}
h1 {
	font-size:3rem;
	font-family:cursive;
	color:gold;
}
h2 {
	display:inline-block;
	background:aquamarine;
}
h3 {
	display:inline-block;
	font-size:1.5rem;
}
p {
	padding:0 0 1rem 0;
}
a {
	color:blue;
}
.hidden {
	position:absolute;
	font-size:0 !important;
	padding:0 !important;
}
.img-responsive {
	display:block;
	height:auto;
	max-width:100%;
	margin:auto;
}

/********** @MEDIA **********/

@media screen and (max-device-width:320px) {
	body {
		-webkit-text-size-adjust:none;
	}
}

/*******************************/
/*******************************/
/********** STRUCTURE **********/
/*******************************/
/*******************************/

header {
	margin:2rem;
	font-size:2rem;
	color:lime;
}
header > * {
	display:inline-block;
}
footer {
	height:60rem;
}
main {
	border:solid 1rem red;
	background:navajowhite;
}
section {
	background:black;
}
table {
	border:ridge fuchsia 1rem;
}
table td {
	border:groove fuchsia .125rem;
	background:turquoise;
}

/********** SECTIONS **********/

#introduction table {
	text-align:left;
}
#presentation h3 {
	color:greenyellow;
}
#avantages {
	text-align:right;
}
#form {
	background:red;
}
#tools {
	background:indigo;
}
#web {
	
}
#book {
	color:deepskyblue;
	background:url(../images/beige035.gif);
}
#book h2 {
	background:url(../images/stock-photo-gold-frame-for-painting-or-picture-on-white-background-gold-frame-photo-isolated-525155203.jpg);
	background-size:75%;
}
#book li {
	background:white;
}

/********** @MEDIA **********/

@media (min-width:0px) {
	
}
@media (min-width:1000px) {
	body {
		padding:4rem;
	}
	main {
		padding:4rem;
	}
}

/*****************************/
/*****************************/
/********** COLUMNS **********/
/*****************************/
/*****************************/

.columns {
	text-align:justify;
	text-justify:distribute; /* IE9 */
	font-size:0;
	line-height:0;
}
.columns:after {
	content:'';
	display:inline-block;
	width:100%;
}
.columns li {
	vertical-align:top;
	text-align:left;
	font-size:.813rem;
	line-height:normal;
}

/********** @MEDIA **********/

@media (min-width:0px) {
	.columns li {
		display:block;
	}
}
@media (min-width:760px) {
	.two.columns li,
	.four.columns li {
		width:50%;
		display:inline-block;
		padding:0 0 0 1rem;
	}
	.two.columns li:first-child,
	.four.columns li:first-child,
	.four.columns li:nth-child(3) {
		padding:0;
	}
}
@media (min-width:1000px) {
	.three.columns li {
		display:inline-block;
		width:33.33%; /* fallback */
		width:calc((100% / 3));
		padding:0 0 0 1rem;
	}
	.four.columns li,
	.four.columns li:nth-child(3) {
		width:25%;
		padding:0 0 0 1rem;
	}
	.three.columns li:first-child {
		padding:0;
	}
}
@media (min-width:1400px) {
	.two.columns li,
	.three.columns li,
	.four.columns li,
	.four.columns li:nth-child(3) {
		padding:0 0 0 2rem;
	}
}

/***************************/
/***************************/
/********** ERROR **********/
/***************************/
/***************************/

#alert {
	position:fixed;
	z-index:10;
	top:0;
	right:0;
	bottom:0;
	left:0;
	display:none;
}
#alert.active {
	display:block;
}
#alert #tooltip {
	position:fixed;
	z-index:100;
	top:40%;
	left:50%;
	width:240px;
	margin-left:-120px;
	text-align:center;
	background:white;
}
#alert #tooltip .content .message {
	display:inline-block;
}
#alert.error .button {
	display:inline-block;
}
#alert.loading .button {
	display:none;
}