/*
Theme Name: wekamedia
Author: Rohrohh
Version: 1.0
*/

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXX POLICE XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

@font-face {
	font-family: "YoungSerif";
	src: url("../fonts/webfonts/YoungSerif-Regular.woff2") format("woff2"),
	url("../fonts/webfonts/YoungSerif-Regular.woff") format("woff");
}

.thin {
	font-weight: 100;
}

.light {
	font-weight: 300;
}

.regular {
	font-weight: 400;
}

.medium {
	font-weight: 500;
}

.white {
	color: white;
}

.black {
	background-color: black;
}

.yellow {
	background-color: yellow;
}

.red {
	background-color: red;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXX DEBUT GLOBAL XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

* {
	box-sizing: border-box;
}

*:focus {
	outline: none;
}

html {
	font-size: 62.5%;
	height: 100%;
}

body {
	font-size :1.6rem;
	margin: 0 auto;
	font-family: 'Roboto', sans-serif;

}

#pageTelechargement {
	height: calc(100% - 70px);
}

figure {
	margin: 0;
}

a:visited {
	text-decoration: none;
}

a:focus {
	text-decoration: none;
}

#homePage a:hover {
	text-decoration: none ! important;
	color: white;
}

.lienImgWebConf {
	transition: color 0.5s ease-in-out;
	color: #0063ac;
}

.lienImgWebConf:hover {
	transition: color 0.5s ease-in-out;
	color: #444444;
}


.hoverArticle article,
.lienImgWebConf,
.titreInfoWebConf,
.extraitWebConf,
.hoverArticle article img,
.hoverArticle article p,
.hoverArticle article .lienArticle > div,
.hoverArticle article .lienArticle > p {
	transition: background-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}



/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXX FIN GLOBAL - DEBUT MAIN XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX HEADER XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

.logoHeader img {
	width: 100px;
}

#conatainerheader {
	width: 100%;
	z-index: 3;
	position: fixed; /* Set the navbar to fixed position */
	top: 0;
	background-color: white;
}

header ul {
	display: inline-block;
	list-style: none;
	float: right;
	padding-top: 1.5rem;
	padding-left: 0;
}

header ul li a {
	font-size: 1rem;
	color: #eb7b61;
	font-family: 'YoungSerif', sans-serif;
	border: solid 1px rgba(68, 68, 68, .3);
	border-radius: 5px;
	padding: 0.3rem;
	transition: border 0.5s ease-in-out;

}



header ul li a:hover {
	border: solid 1px #ec6c0c;
	transition: border 0.5s ease-in-out;
	color: #eb7b61;
	text-decoration: none;
}

header ul li a:visited {
	color: #eb7b61;
}

#lienContact:focus, #lienContact:active {
	color: #eb7b61 ! important;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX EN TETE XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

#enTete {
	background-image: linear-gradient(to right, #0061aa 0%, white 130%);
}

h1 {
	padding-top: 2rem;
}

h1, h1 + p + a {
	font-family: 'YoungSerif', sans-serif;
}

h1, h1 + p, h1 + p + a {
	color: white;
}

h1 + p {
	padding-bottom: 3rem;
}

h1 + p + a {
	background-color: #eb7b61;
	padding: 1rem 2rem 1rem 2rem;
	border-radius: 5px;
	transition: background-color 0.5s ease-in-out;
}

h1 + p + a:hover {
	background-color: #444444;
	transition: background-color 0.5s ease-in-out;
}

h1 + p + a:visited {
	color: white;
}

#enTete div > img {
	padding-top: 5rem;
	padding-bottom: 3rem;
	width: 100%;
}

#reseauxSociaux {
	text-align: right;
	padding-bottom: 2rem;
	padding-right: 2rem;
}

#reseauxSociaux a {
	padding-left: 3rem;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXX VRAC XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX PARTIE BLANCHE XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

.blanc {
	background-color: white;
	padding-top: 2.5rem;
}

.blanc h2, .blanc p {
	color: #0063ac;
}

.blanc h2 {
	margin: 0;
	font-size: 2.2rem;
	padding-bottom: 2rem;
}

.blanc p {
	font-size: 1.4rem;
	padding-bottom: 2rem;
}

.blanc img {
	opacity: 0.2;
	width: 100%;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX PARTIE ORANGE XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

#articleOrange {
	display: none;
}

.melon {
	background-color:#eb7b61;
}



#partieOrange {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem;
	color: #231655;
}

#illustrationOrange {
	text-align: center;
}

#texteOrange {
	font-size: 1.4rem;
}

#articleOrange, #iconeMobile {
	text-align: center;
	padding-top: 2rem;
	font-size: 1.4rem;
}

#iconeMobile {
	padding-left: 0;
	padding-right: 0;
}

#articleOrange img, #iconeMobile img {
	height:20px;
	margin-bottom: 1rem;
}

#articleGaucheOrange, #articleDroiteOrange {
	padding: 0;
}

#articleOrange article, #iconeMobile article {
	padding-bottom: 2rem;
}

#articleOrange .white, #iconeMobile .white {
	margin: 0;
}

#texteBasOrange {
	text-align: center;
}

#texteBasOrange .white {
	font-size: 2rem;
}

#texteBasOrange .white + p {
	font-size: 1.4rem;
}



/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX PARTIE GRISE XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
.relative {
	position: relative;
}
.absolute {
	position: absolute;
}
.padding-left-10 {
	padding-left: 10px;
}
.padding-top-10 {
	padding-top: 10px;
}
.inline-block {
	display: inline-block;
}
.letter-spacing-1 {
	letter-spacing: 1px;
}
.color-white {
	color: #ffffff;
}
.line-height-24 {
	line-height: 24px;
}
.font-size-12 {
	font-size: 12px;
}
.padding-5 {
	padding: 5px;
}
.opacity {
	background: #323132;
	opacity: 0.8;
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 75px;
	right: 0;
}
.descriptif-partenaire {
	position: absolute;
	bottom: 5px;
	width: 96%;
}
.descriptif-partenaire img {
	max-height: 50px;
	width: auto;
	float: right;
	display: inline-block;
	background: #ffffff;
	margin-left: 10px;
}
.descriptif-partenaire > div > div {
	text-align: right;
}
.descriptif-partenaire span {
	display: inline-block;
	color: #ffffff;
	line-height: 13px;
}
.fa-youtube.absolute {
	left: calc(50% - 24px);
	top: calc(50% - 60px);
}
.fa-caret-right.absolute {
	left: calc(50% - 3px);
	top: calc(50% - 56px);
}
.color-fd1817 {
	color: #fd1817;
}
.font-size-40 {
	font-size: 40px;
}
.font-size-48 {
	font-size: 48px;
}
.infoWebConf {

	opacity: none;

}

.infoWebConf i {
	color: white;
	padding-top: 1.5rem;
	padding-left: 1.5rem;
	padding-bottom: 3rem;
}
.infoWebConf {
	position: absolute;
	display: none;

}
/*#touteLesWebConf {
	display: none;
}*/

#griseEntier {
	text-align: center;

}

#enTeteGrise {
	text-align: left;
}

#grise {
	padding-left: 0;
	padding-right: 0;
}
.gris {
	background-color: #444444;
	padding-top: 2.5rem;
	color: white;
}

.gris h2 {
	margin: 0;
	font-size: 2.2rem;
	padding-bottom: 2rem;
}

.gris h3 {
	font-family: 'YoungSerif', sans-serif;
	font-size: 1.8rem;
	padding-bottom: 2rem;
}

/*.gris a img {
	width: 100%;
}*/

.gris article {
	padding-bottom: 0;
}

.gris p {
	font-size: 1.4rem;
}

.webConference {
	padding-left: 0;
	padding-right: 0;
	margin-bottom: 20px;
}

/*.webConference img {
	padding-bottom: 0.5rem;
}*/

.webConference article {

	margin-bottom: 2rem;}

#lienWebConf {
	text-align: center;
	padding-top: 2rem;
	padding-bottom: 5rem;
	padding-left: 0;
	padding-right: 0;
}

#lienWebConf a {
	font-family: 'YoungSerif', sans-serif;
	background-color: #eb7b61;
	padding: 0.5rem;
	border-radius: 5px;
	color: white;
	font-size: 1.4rem;
	transition: background-color 0.5s ease-in-out;
}

#lienWebConf a:hover {
	background-color: #444444;
	transition: background-color 0.5s ease-in-out;
}
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXX FIN VRAC XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX SOLUTIONS XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/


#solution {
	background-color: #f8f8f9;
	text-align: center;
	color: #444444;
}



#solution a {
	margin: 0 auto;
	background-color: #eb7b61;
	font-size: 1.4rem;
	color: white;
	width: 100%;
	padding-top: 1rem;
	padding-bottom: 1rem;
	border-radius: 5px;
	display: block;
	margin-top: 2rem;
	margin-bottom: 3rem;
	transition: background-color 0.5s ease-in-out;
}

#solution a:hover {
	background-color: #444444;
	transition: background-color 0.5s ease-in-out;
	text-decoration: none;
}

#offre {
	margin: 0 auto;
	text-align: center;
}

#solution article {
	margin-bottom: 2rem;
	width: 100%;

}

#solution h2 {
	font-family: 'YoungSerif', sans-serif;
	font-size: 1.8rem;
	line-height: 2rem;
	padding: 3rem 0 3rem 0;
}

#solution h2 + p {
	font-size: 1.6rem;
	padding-bottom: 3rem;
}

#solution h3 {
	font-size: 3rem;
}

#solution h3 + p {
	border-bottom: 1px solid #eb7b61;
	padding-bottom: 2rem;
}

#solution h3, #solution h3 + p {
	color: #eb7b61;
}

#solution h3 + p + p {
	font-size: 1.5rem;
	padding-top: 2rem;
	padding-bottom: 2rem;
}


#solution article {
	background-color: white;
	box-shadow: 0 10px 40px 0 rgba(68, 68, 68, 0.12);
}

#solution a {
	font-family: 'YoungSerif', sans-serif;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX LIENS XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

#lien {
	padding-top: 3rem;
}
#liensWeka a {
	text-decoration: underline;
}
#liensWeka a:hover {
	color: #eb7b61 ! important;
	text-decoration: underline;
}

#lien h3 + p {

	padding-bottom: 2rem;
}

#lien h3 {
	margin: 0;
	color: #eb7b61;
	font-size: 1.8rem;
	line-height: 2.5rem;
	padding-bottom: 2rem;
}

#liensWeka, #liensWeka a {
	color: #eb7b61;
}

#decouverte a, #aide a {
	font-family: 'YoungSerif', sans-serif;
	color: white;
	background-color: #eb7b61;
	padding: 1rem 2rem 1rem 2rem;
	border-radius: 10px;
	transition: background-color 0.5s ease-in-out;
}

#decouverte a:hover, #aide a:hover {
	background-color: #444444;
	transition: background-color 0.5s ease-in-out;
}

#decouverte, #aide {
	padding-top: 3rem;
}

#contact {
	margin-bottom: 3rem;
}

#liensWeka, #decouverte {
	border-bottom: 1px solid #c2c2c2;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXX FIN MAIN - DEBUT FOOTER XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/


footer {
	background-color: #444444;
	font-size: 1.3rem;
}

footer, footer i {
	color: white;
}

#p1footer {
	padding-top: 2rem;
}
#p1footer a img {
	margin-bottom: 3px;
	margin-left: 1rem;
}
footer i {
	padding-left: 1rem;
}

#lienFooter1 {
	color: white;

}

#lienFooter2 {
	color: black;
}

#datack {
	padding-bottom: 2rem;
}

#lienFooter2:hover, #lienFooter1:hover {
	text-decoration: none;
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXX FIN FOOTER XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXX AUTRES PAGES XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX PAGE FORMULAIRE XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

.autrePage, input {
	background-color: #f8f8f9;
}

#formulaireValide {
	height: 100%;
}

#formulairePage h1, #formulairePage p, #mentionPage h1, #mentionPage p {
	color: black;
}

#formulairePage h1, #mentionPage h1 {
	padding-top: 5rem;
	margin-bottom: 0.5rem;
}

#formulairePage p, #mentionPage p {
	font-size: 1.6rem;
}

#formulairePage #sousTitreFormulaire {
	font-size: 1.8rem;
}

#form-content {
	font-size: 1.4rem;
}

#form-content label {
	font-weight: 300;
}

#form-content span {
	background-color: #f8f8f9;
}

.btn-bleu {
	text-align: center;
}

.p-coordonnees + p {
	width: 100%;
}

#lienTelechargement {

	text-align: center;

}
#lienTelechargement a {
	transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out;
}

#lienTelechargement a:hover {
	text-decoration: none;
	background-color: #444444;;
	border : 1px solid #444444;;
	transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out;;

}

#fondPage h1, #fondPage h1 + p  {
	color: black;
}

#containerPage {
	padding-bottom: 2rem;
}

.p-coordonnees {
	padding-top: 1rem;
}

#di-contact p {
	margin-top: 1rem;
	clear: both;
}

input[type=text] {
	border : none;
	border-bottom: 1px solid black;
}

textarea {
	height: 124px;
	resize: none;
	width: 100%;
	background-color: #f8f8f9;
}

label {
	display: inline-block;
	width: 100%;
	text-align: left;
}

select, input {
	width: 100%;
}





input[type=submit] {
	margin-bottom: 1rem;
	font-family: 'YoungSerif', sans-serif;
	padding: 0.5rem;
	background-color:#eb7b61;
	border: 1px solid #eb7b61;
	border-radius: 5px;
	color: white;
}

#lienTelechargement a {
	font-family: 'YoungSerif', sans-serif;
	padding: 0.5rem;
	background-color:#eb7b61;
	border: 1px solid #eb7b61;
	border-radius: 5px;
	color: white;
}

.optin label, .checkbox label {
	width: 100%;
	text-align: left;
	display: inline;
	margin-left: 10px;
}

.optin input[type="checkbox"], .checkbox input[type="checkbox"] {
	width: 10px;
	margin-left: 5px;
}

/*.checkbox span {
	margin-left: 30px;
}*/

.input-checkbox {
	padding-left: 0.5rem;
}

#hebergement {
	padding-bottom: 2rem;
}

#city-mdm-list {
	width: 100%;
	padding : 0;
	border: 1px solid #DDDDDD;
	background: #ffffff;
	list-style: none;
	z-index: 1;
}
#city-mdm-list li {
	list-style: none;
	padding: 5px 0 6px 6px;
}

#ui-id-1{height:300px;overflow:scroll}
#ui-id-1 li{border-top:1px solid #ccc;position:relative}
#ui-id-1 li:first-child{border-top:none}
#ui-id-1 li:hover{background:#ccc}
#ui-id-1 li .ui-menu-item-wrapper{padding:3px .4em;margin:0;font-size:16px}
#ui-id-1 li .ui-menu-item-wrapper.siren-rs{font-family:Roboto-bold;padding-right:88px;display:inline-block}
#ui-id-1 li .ui-menu-item-wrapper.siren-select{position:absolute;top:0;right:0;color:#005ea8;display:inline-block;font-family:Roboto-light;font-size:14px}
#ui-id-1 li .ui-menu-item-wrapper.siren-enseigne{color:#005ea8}#ui-id-1 li .ui-menu-item-wrapper .siren-cp-ville,#ui-id-1 li .ui-menu-item-wrapper.siren-address{font-family:Roboto-light;display:inline-block}
#ui-id-1 li .ui-menu-item-wrapper.ui-state-active{border:none;background:0 0;color:inherit}
/*XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
XXXXXXXXXXXXXXXXXXXXXXXXXXXX FIN PAGES - DEBUT MEDIA QUERIES XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/


@media all and (min-width: 400px) {

	/*#touteLesWebConf img, #touteLesWebConfMobile img {
        width: 70%;
    }*/
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX 540 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/



@media all and (min-width: 540px) {

	header ul li a {
		font-size: 1.2rem;
	}

	#enTete div > img {
		width: 90%;
	}
	/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX PARTIE BLANCHE XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
	.blanc h2, #griseEntier h2 {
		font-size: 2.4rem;
	}

	.blanc p, #texteOrange {
		font-size: 1.6rem;
	}

	/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX PARTIE ORANGE XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

	#enTeteOrange p {
		font-size: 1.8rem;
	}
	#articleGaucheOrange {
		padding-top: 2rem;
		padding-bottom: 2rem;
		margin-bottom: 2rem;
	}

	#articleDroiteOrange {
		padding-top: 2rem;
		padding-bottom: 2rem;
		border-left: 1px solid white;
	}
	#articleOrange {

		font-size: 1.5rem;
	}
	#articleOrange img {
		height:22px;
	}

	#texteBasOrange .white + p {
		font-size: 1.6rem;
	}

	#illustrationOrange {
		text-align: center;
		display: none;
	}



	/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX PARTIE GRISE XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

	#griseEntier {
		text-align: center;


	}



	/*#touteLesWebConf img, #touteLesWebConfMobile img {
        width: 55%;
    }*/

	.webConference2 p {
		display: inline-block;
		width: 50%;
	}

	#enTeteGrise {
		text-align: left;
	}


	.gris h2 {
		font-size: 2.4rem;
	}
	#lienWebConf a {
		font-size: 1.6rem;
	}

	/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX 600 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

}

@media all and (min-width: 600px) {
	#enTete div > img {
		width: 70%;
	}

	/*	.gris img {
        width: 60%;
    }*/

	#articleOrange, #iconeMobile {
		font-size: 1.6rem;
	}

}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX 650 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

@media all and (min-width: 650px) {

	/*	.gris img {
        width: 50%;
    }*/

	#articleOrange, #iconeMobile {
		font-size: 1.7rem;
	}

	#articleOrange img, #iconeMobile img {
		height:24px;
	}

}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX 700 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

@media all and (min-width: 700px) {

	/*	.gris img {
        width: 40%;
    }*/
	#articleOrange, #iconeMobile {
		font-size: 1.8rem;
	}
	#articleOrange img, #iconeMobile img {
		height:26px;
	}
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX 768 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

@media all and (min-width: 768px) {

	#articleOrange {
		display: block;
	}

	#iconeMobile {
		display: none;
	}

	#enTete {

		padding-top: 5rem;
	}
	.logoHeader img {
		width: 140px;
	}

	header ul {
		padding-top: 2rem;
	}

	header ul li a {
		font-size: 1.5rem;
		border-radius: 5px;
		padding: 0.5rem;
	}


	#enTete {
		background-image: linear-gradient(to right, #0061aa 0%, white 90%);
	}

	#enTete div > img {
		width: 50%;
	}
	h1 {
		font-size: 5rem;
		width: 70%;
	}
	h1 + p {
		width: 80%;
	}


	/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX PARTIE BLANCHE XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/



	/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX PARTIE GRISE XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/



	.webConference {
		text-align: center;
	}

	/*#touteLesWebConf img, #touteLesWebConfMobile img {
        width: 60%;
    }*/

	.webConference2 p {
		display: inline-block;
		width: 60%;
	}

	/*.gris img {
        width: 50%;
    }*/

	#solution h2 {
		font-size: 2rem;
	}



	#solution h2 + p {
		font-size: 1.8rem;
	}


	#solution h3 {
		padding-top: 2rem;
		font-size: 3.5rem;
	}
	#solution h3 + p + p {
		font-size: 1.7rem;
		padding-top: 2rem;
		padding-bottom: 1.5rem;
	}

	#solution a {
		width: 50%;
		font-size: 1.6rem;
	}

	footer {
		font-size: 1.6rem;
	}

	#p1footer {
		padding-top: 2rem;

	}

	#p2footer {
		padding-bottom: 2rem;
	}

	#p1footer a {
		padding-left: 3rem;
	}

	#di-contact p {
		margin-top: 2rem;
		clear: both;
	}

	input[type=text] {
		border : none;
		border-bottom: 1px solid black;
	}

	textarea {
		height: 124px;
		resize: none;
		width: 458px;
		background-color: #f8f8f9;
	}

	label {
		display: inline-block;
		width: 160px;
		text-align: right;
	}

	select, input {
		width: 458px;
	}

	.demande {
		display: flex;
	}

	.demande textarea {
		margin-left: 0.5rem;
	}

	input[type=submit] {
		margin-bottom: 1rem;
		font-family: 'YoungSerif', sans-serif;
		padding: 0.5rem;
		background-color:#eb7b61;
		border: 1px solid #eb7b61;
		border-radius: 5px;
		color: white;
		margin-top: 2rem;
		margin-bottom: 4rem;
		transition: border 0.5s ease-in-out, background-color 0.5s ease-in-out;
	}

	input[type=submit]:hover {
		transition: border 0.5s ease-in-out, background-color 0.5s ease-in-out;
		background-color:#444444;
		border: 1px solid #444444;
	}

	.optin label, .checkbox label {
		width: 100%;
		text-align: left;
		display: inline;
		margin-left: 30px;
	}

	.optin input[type="checkbox"], .checkbox input[type="checkbox"] {
		width: 10px;
		margin-left: 20px;
	}

	/*.checkbox span {
        margin-left: 30px;
    }*/

	.input-checkbox {
		padding-left: 0.5rem;
	}
	#formulairePage #sousTitreFormulaire {
		font-size: 2.1rem;
	}

}




/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX 992 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/


@media all and (min-width: 992px) {


	#enTete {

		padding-top: 8rem;
	}

	#hoverArticle {
		position: relative;
	}


	/*#touteLesWebConf {
        display: block;
    }

    #touteLesWebConfMobile {
        display: none;
    }*/

	.extraitWebConf {
		padding-left: 1.5rem;
		padding-right: 2.5rem;
	}
	.titreInfoWebConf {
		padding-left: 1.5rem;
		padding-bottom: 1rem;
		padding-right: 2.5rem;
	}

	header ul {
		padding-top: 4rem;
	}

	header ul li a {
		font-size: 2rem;
	}

	h1 {
		font-size: 6rem;
		margin: 0;
		padding-bottom: 3rem;
		padding-top: 8rem;
		width: 100%;
	}
	h1 + p {
		font-size: 2rem;
		line-height: 3rem;
		padding-bottom: 3rem;
		width: 100%;
	}

	h1 + p + a {
		font-size: 2rem;
	}

	#enTete div > img {
		width: 100%;
	}

	.logoHeader img {
		height: 97px;
		width: auto;
	}



	/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX PARTIE BLANCHE XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/


	.blanc h2, #griseEntier h2 {
		font-size: 4rem;
		line-height: 5.2rem;
	}

	.blanc p {
		font-size: 2.4rem;
		line-height: 3.8rem;
		padding-left: 5rem;
	}
	/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX PARTIE ORANGE XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/



	#illustrationOrange {
		text-align: left;
		display: block;
	}
	#illustrationOrange img {
		width: 100%;
	}
	#enTeteOrange p {
		font-size: 2.4rem;
		line-height: 3.5rem;
		padding-bottom: 3rem;
	}

	#texteOrange {
		font-size: 1.7rem;
	}


	#articleOrange {
		font-size: 2rem;
		padding-bottom: 2rem;
	}

	#articleGaucheOrange {

		padding-top: 1rem;
		padding-bottom: 0.5rem;

	}

	#articleDroiteOrange {
		padding-top: 1rem;
		padding-bottom: 0.5rem;
	}

	#texteBasOrange .white + p {
		font-size: 1.8rem;
	}

	/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX PARTIE GRISE XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/
	#griseEntier {
		padding-left: 4rem;
	}
	#grise {
		margin-left: 0;
	}

	#grise {
		width: 100%;
	}

	/*#touteLesWebConf img {
        width: 100%;
    }*/

	.gris h2 {
		font-size: 5.2rem;
	}

	.gris h3 {
		padding-bottom: 4rem;
	}

	#touteLesWebConf #croix {
		width: 35%;
		padding-top: 4rem;
		padding-bottom: 4rem;
	}

	.webConference {
		text-align: left;

	}

	.webConference article {
		margin-bottom: 2rem;
	}

	.webConference article p {
		font-size: 2rem;
	}

	/*.webConference img {
        margin-bottom: 1.2rem;
    }*/



	/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX SOLUTIONS XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

	article {
		margin: 0 auto;
	}
	#solution h2 {
		font-size: 2.4rem;
		padding-top: 6rem;
		padding-bottom: 3rem;
		line-height: 3rem;
	}

	#solution h2 + p {
		font-size: 2rem;
		line-height: 3rem;
		padding-bottom: 4rem;
	}

	#solution article {
		width: 31%;
	}




	#articleCentre {
		margin-left: 2rem;
		margin-right: 2rem;
	}

	#offre1 {
		margin-left: 2rem;
	}

	#solution h3 {
		font-size: 4rem;
		padding-top: 4rem;
		margin: 0;
	}

	#solution h3 + p {
		font-size: 2rem;
		border-bottom: 1px solid #eb7b61;
		padding-bottom: 3rem;
	}

	#solution h3 + p + p {
		font-size: 1.8rem;
		line-height: 2.8rem;
		padding-top: 3rem;
		padding-bottom: 6rem;
		min-height: 202px;
	}

	#solution a {
		margin: 0 auto;
		margin-top: 6rem;
		margin-bottom: 6rem;
		font-size: 2rem;
		background-color: #eb7b61;
		color: white;
		padding-top: 1rem;
		padding-bottom: 1rem;
		border-radius: 10px;
		display: block;
	}

	#solution article:visited h3, #solution article:visited p, #solution article:visited {
		color: white;
		text-decoration: none;
	}

	#solution article:hover h3, #solution article:hover p, #solution article:hover {
		color: white;
		background-color: #eb7b61;
	}

	#solution article:hover h3 + p {
		border-bottom: 1px solid white;
	}

	#logos {
		padding-top: 6rem;
		padding-bottom: 8rem;
	}



	#partenaire h2 {
		text-align: left;
	}

	#partenaire img {
		height: 80px;
		width: auto;
	}



	#logos div {
		padding-bottom: 6rem;
	}
	#lien {
		padding-top: 5rem;
	}


	#liensWeka p {
		font-size: 1.5rem;
		line-height: 2.5rem;
	}
	#liensWeka a {

		font-size: 2.4rem;
		line-height: 2.5rem;
	}

	#lien h3 {
		padding-bottom: 1rem;
	}

	#lien h3 + p {
		font-size: 1.5rem;
		line-height: 2.5rem;
		padding-bottom: 2rem;
	}

	#lien h3 {
		padding-bottom: 1rem;
		font-size: 2.2rem;

	}

	#decouverte {
		padding-bottom: 7rem;
		margin-bottom: 3rem;
	}

	#decouverte, #aide {
		padding-top: 0;
	}

	#liensWeka, #aide, #decouverte {
		padding-left: 3rem;
	}

	#liensWeka, #decouverte {
		border-right: 1px solid #c2c2c2;
		border-bottom: none;
	}

	footer {
		font-size: 1.6rem;
	}
	#p1footer, #p2footer {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	#p1footer a {
		padding-left: 3rem;
	}
	#p2footer {
		text-align: right;
	}
	#essai {
		margin: 0 auto;
		background-color: #444444;
	}

	#formulairePage h1, #mentionPage h1 {
		padding-top: 12rem;
		margin-bottom: 0.5rem;
		padding-bottom: 0rem;
	}

	#formulairePage p {
		font-size: 2rem;
	}

	#formulairePage #sousTitreFormulaire {
		font-size: 2.5rem;
	}

	#mentionPage p {
		font-size: 1.8rem;
	}

	#form-content {
		font-size: 1.8rem;
	}

	#lienTelechargement {
		/*	padding-top: 29rem;
            padding-bottom: 29rem;*/
		text-align: center;
		font-size: 2rem;

	}

	label {
		width: 260px;

	}

	#hebergement {
		padding-bottom: 3rem;
	}

	#city-mdm-list {
		width: 458px;
	}

}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX 1000 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

@media all and (min-width: 1000px) {

	#grise {
		width: 90%;
	}
}

@media all and (min-width: 1050px) {

	#texteOrange {
		font-size: 1.8rem;
	}

	#grise {
		width: 85%;
	}
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX 1100 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

@media all and (min-width: 1100px) {
	#grise {
		width: 78%;
	}

}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX 1200 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

@media all and (min-width: 1200px) {
	#grise {
		width: 94%;
	}
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX 1250 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

@media all and (min-width: 1250px) {
	#grise {
		width: 89%;
	}
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX 1300 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

@media all and (min-width: 1300px) {
	/*#illustrationOrange {
        height: 120px;
        width: auto;
    }*/
	.titreInfoWebConf {
		padding-bottom: 1.8rem;
	}

	#texteOrange p {
		font-size: 1.9rem;
		padding-bottom: 2rem;
	}

	#grise {
		width: 85%;
	}
	/*
    #illustrationVrac {
        padding-left: 14rem;
    }*/
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX 1350 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

@media all and (min-width: 1350px) {
	#grise {
		width: 79%;
	}
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX 1400 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

@media all and (min-width: 1400px) {
	#grise {
		width: 65%;
	}
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX 1500 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

@media all and (min-width: 1500px) {
	#illustrationVrac, #orangeVrac {
		padding-left: 8rem;
	}
	/*.gris img {
        width: 60%;
    }*/
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX 1600 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/

@media all and (min-width: 1600px) {
	#illustrationVrac, #orangeVrac {
		padding-left: 14rem;
	}

	#grise {
		width: 50%;
	}
}

/*XXXXXXXXXXXXXXXXXXXXXXXXXXXX 1800 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX*/


@media all and (min-width: 1800px) {
	#illustrationVrac, #orangeVrac {
		padding-left: 18rem;
	}


}