/*COULEURS*/
/*rouge*/
.rouge{color:#C21318;}
.rougeC{color:#E04150;}
/*orangé*/
.orange{color:#DE860E;}
.orangeC{color:#FAE656;}
/*vert*/
.vert{color:#518725;}
.vertC{color:#B7D74B;}
/*bleu*/
.bleu{color:#174190;}
.bleuC{color:#36C4EC;}
.mimicDefault{color:#2576BA;}

html{/*
	background-image: url(/mimiccom/img/bodybackground.png);
	background-repeat: no-repeat;
*/}

body {
	min-height: 100vh;
}

h1.main {

	border: none;
	background-size: contain;
}

h1.client {color:#DE860E;}
h1.blog {color:#518725;}
h1.services {color:#C21318;}

h2{
	color:#E04150;
	font-size: 1.15em;

}

header{
	background-color:rgba(255, 255, 255, 0.9);
	background-image: url(/mimiccom/img/logo.png);
	background-repeat: no-repeat;
	background-size: contain;
	padding-left: 10%;
	text-align: center;
}

header hgroup { color:#2576BA; font-size:6vw; text-shadow: 1px 1px 1px #999;}
header p { color:#666; font-size:4vw; }
article, section p{ margin: 1% 3%; }

footer{
	/*position: absolute;*/
	bottom: 0;
	width: 100%;
	height: 2.5rem;
}

date{ font-size:0.75rem; color:#2576BA; }

#cartes{
	display:flex;
	flex-wrap: wrap;
	justify-content:space-around;
	margin: 1em auto;
	width:96%;
}
.carte{
	background-position: 1% center;
	background-size: 5rem;
	border-radius: 5px;
	width:100%;
	cursor: pointer;
	margin-top: 2.5rem
}

.carte:hover{ cursor: pointer;}
.carte hgroup { min-width:38%; margin-left:6rem; font-size:1.5rem; margin-right:3%; width:80%;}
.carte p { margin-left:6rem; margin-right:1%;}
.services {
	background-image: url(/mimiccom/img/www.png);
	background-repeat: no-repeat;
	border:solid 1px #C21318;
}

.services hgroup { color:#C21318; text-shadow: 1px 1px 1px #FAFAFA ;}
.client {
	background-image: url(/mimiccom/img/client.png);
	background-repeat: no-repeat;
	border:solid 1px #DE860E;
}
.client hgroup { color:#DE860E;}

.blog {
	background-image: url(/mimiccom/img/blog.png);
	background-repeat: no-repeat;
	border:solid 1px #518725;
}
.blog hgroup { color:#518725;}


.bebe {
	background-image: url(/mimiccom/img/marianne.png);
	background-repeat: no-repeat;
	border:solid 1px #174190;
}
.bebe hgroup { color:#174190;}


ul, ol {margin-left: 8%; margin-top: 1rem}
ul {list-style-image: url(/mimiccom/img/bullet.png);}
ul li { margin-bottom: 3%; }

.accordeon {color: #2576BA;}
.carrot {display:inline-block; width:0.5rem; height:0.5rem; background-image: url(/mimiccom/img/bullet.png); background-size:cover;}
.accordeon div{ color: #606060; border:solid 1px #2576BA; border-top:none; border-right:none; border-radius:0px 0px 0px 5px; font-size:0.8rem; width:90%;}
.accordeon div p{ font-size:1.15em; }

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
	h1.main { padding-left:4rem;}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	.carte{
		text-align: center;
		width:42%;
		background-position: center 0.5rem;
	}
	.carte hgroup {
		min-width: initial;
		margin-top: 5.5rem;
		margin-left: initial;
		font-size: 2.5rem;
		margin-right: initial;
		width: initial;
	}
	.carte p { margin: 0.5rem; font-size: 1.25rem;}
	h1.main { padding-left:7rem;}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	html{}
	header{	text-align: left;}
	.carte { background-size: 8rem; margin-top: 2.5rem}
	.carte hgroup {	margin-top: 9.5rem; font-size: 2.25rem; }
	.carte p { font-size: 1.25rem; }
	h1.main {  padding-left:5rem;}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	html{background-size: cover;}
	header hgroup { font-size:3.5vw; }
	header p { font-size:2vw; }
	.carte{	width:22%;  background-size: 8rem;}
	.carte hgroup {	margin-top: 10rem; font-size: 2rem; }
	.carte p { /*font-size: 1.15rem;*/ }
	date{ font-size:1vw; }
	h1.main { padding-left:5rem;}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px){
	html{background-size: cover;}
	header hgroup { font-size:4rem; }
	header p { font-size:2vw; }
	.carte{ background-size: 10rem;}
	.carte hgroup {margin-top: 13rem; font-size: 2rem; }
	.carte p { font-size: 1rem; }
	h1.main { padding-left:5rem;}
}