@import url("https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900");

/* ============================================================
   FORMULAIRE DE DON AIM - Combined Stylesheet
   Base layout: style-2 (3 colonnes)
   Amount cards: style-1 (rectangles/cartes)
   Colors: #31b7bc (bleu-vert) / #f36d21 (orange)
   ============================================================ */

/* ----------------------------------------------------------
   UTILITIES
   ---------------------------------------------------------- */
.hide {
	position: absolute !important;
	left: -10000px !important;
	top: -10000px !important;
	display: block !important;
	width: auto !important;
	height: auto !important;
}
.clear { clear: both; }
.nopad {
	padding-left: 0;
	padding-right: 0;
}
.equivalence .visuel { display: none; }
.equivalence .texte p.prix { margin: 0; }
.equivalence .texte p.prix + p { display: none; }
#naissance { display: none; }

/* ----------------------------------------------------------
   SWITCH COMPONENT (from style-1)
   ---------------------------------------------------------- */
.cl-switch .label {
	color: #a8a7a7;
	font-size: 13px;
}
.cl-switch input[type="checkbox"]:checked ~ .label {
	color: #31b7bc;
}
.cl-switch input[type="checkbox"]:checked + .switcher::before {
	background-color: #31b7bc;
}
.cl-switch input[type="checkbox"]:checked + .switcher {
	background-color: #dfe7d6;
}

/* ----------------------------------------------------------
   SIPS FORM (from style-1)
   ---------------------------------------------------------- */
.sipsform input {
	width: 22%;
	padding: 5px;
	background: #fff;
	border: 1px solid #000;
	max-width: 100px;
}
.sipsform input:hover {
	box-shadow: 0 0 5px 1px rgba(0,0,0,0.8);
}

/* ----------------------------------------------------------
   CONTAINER
   ---------------------------------------------------------- */
.container {
	padding-left: 5px;
	padding-right: 5px;
}

/* ----------------------------------------------------------
   CHECKBOX / RADIO SPACING
   ---------------------------------------------------------- */
.checkbox + .checkbox,
.radio + .radio {
	margin-top: 10px;
}

/* ----------------------------------------------------------
   MODALS
   ---------------------------------------------------------- */
.modal-content .modal-header { padding: 0; }
.modal-header .close {
	margin-top: 0;
	background: #31b7bc;
	opacity: 1;
	text-shadow: none;
	color: #fff;
	padding: 0 8px;
	font-size: 39px;
	font-weight: 300;
}
.modal-header .close:hover {
	background: #f36d21;
}
.modal-title {
	margin: 0;
	line-height: 39px;
	height: 39px;
	padding-left: 30px;
	color: #fff;
	background: #000;
	font-size: 14px;
}
.modal-title.white { background: #fff; }
.modal.in .modal-dialog .modal-content {
	border-radius: 10px;
	box-shadow: none;
	border: none;
	width: 100%;
}
.modal.in .modal-dialog .modal-content h2 {
	margin: 0 0 15px;
	color: #000;
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
}
.modal.in .modal-dialog .modal-content .form-group { margin-bottom: 15px; }
.modal.in .modal-dialog .modal-body {
	padding: 12px 30px 24px;
	color: #000000;
	font-size: 13px;
	text-align: center;
}
.modal-dialog { margin: 10px auto; }
#expliCrypto .modal-dialog { max-width: 291px; }
#contact .modal-dialog { max-width: 325px; }
#contact img { margin-top: 10px; }
.modal-dialog .help {
	font-size: 10px;
	margin-bottom: 10px;
}
#espaced .modal-dialog,
#identif .modal-dialog,
#oublimdp .modal-dialog,
#oubliident .modal-dialog {
	max-width: 410px;
}
#espaced .modal-dialog button.valid,
#identif .modal-dialog button.valid,
#oublimdp .modal-dialog button.valid,
#oubliident .modal-dialog button.valid {
	background: #f36d21;
	padding: 4px 15px;
	margin-top: 15px;
	border-radius: 5px;
	cursor: pointer;
	border: none;
	color: #fff;
}
#expliCrypto .modal-dialog img { max-width: 100%; }
a.oubli {
	background: url(../images/puce.jpg) left center no-repeat;
	padding-left: 12px;
	color: #000;
	text-decoration: underline;
	font-size: 10px;
}
.recapitulatif a { color: #000; }

/* ----------------------------------------------------------
   HTML / BODY
   ---------------------------------------------------------- */
html { height: 100%; }
body {
	background: #868889;
	height: 100%;
	font-family: "RobotoDraft", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ----------------------------------------------------------
   HEADER
   ---------------------------------------------------------- */
#header {
	background: #fff;
	height: 138px;
}
#header .identification {
	background: #000;
	margin-right: 5px;
	padding: 0;
	position: absolute;
	right: 0;
}
#header .identification a {
	color: #fff;
	font-size: 9px;
	padding: 6px 12px;
	display: inline-block;
	text-transform: uppercase;
}
#header .identification a:hover {
	background: #31b7bc;
	text-decoration: none;
}
#header .identification a.lang.inactive:hover {
	background: inherit;
	text-decoration: none;
	cursor: initial;
}
#header .identification a.lang.active { opacity: .4; }
#header .identification a.lang.active:hover { opacity: 1; }
#header .hlogo img {
	max-height: 150px;
}
#logo img {
	max-width: 95%;
	background: #fff;
}

/* ----------------------------------------------------------
   FOND / BACKGROUNDS
   ---------------------------------------------------------- */
.fond-couleur {
	background: #31b7bc;
	color: #fff;
}
.paiementErreur .fond-couleur,
.confirmation .fond-couleur {
	color: #000000;
}
.fond { background: #fff; }

/* ----------------------------------------------------------
   ESPACE DONATEUR (from style-2)
   ---------------------------------------------------------- */
.espace-donateur {
	margin-top: 15px;
	padding-left: 0;
	background: #fff;
	padding-right: 0;
}
.espace-donateur > div {
	background: none;
	padding: 20px 34px;
}
.espace-donateur.fond-couleur > div {
	border: 2px solid #FFF;
	background: #31b7bc;
	color: #fff;
}

/* ----------------------------------------------------------
   HIDDEN FIELDS
   ---------------------------------------------------------- */
div.locality-field { display: none; }
div.comment-field { display: none; }
div.count { display: none; }
.coord .comment-field,
.coord .count { display: none; }

/* ----------------------------------------------------------
   LAYOUT: COORD / DON / PAIE
   ---------------------------------------------------------- */
.coord .fond { padding-bottom: 18px; }
.coord,
.don,
.paie {
	padding-left: 0;
	padding-right: 0;
	margin-top: 15px;
}
.paiement {
	padding-left: 0;
	padding-right: 0;
	margin-top: 15px;
}
.paiement .fond { padding-bottom: 18px; }
.paiement-externe {
	padding-left: 0;
	padding-right: 0;
	margin-top: 15px;
}
.paiement-externe .fond { padding-bottom: 18px; }

/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */
.button {
	background: #f36d21;
	color: #fff;
	border: none;
	font-size: 12px;
	padding: 7px 15px;
	cursor: pointer;
	display: inline-block;
	border-radius: 5px;
}
.button:hover {
	background: #31b7bc;
}
.paiement .button {
	background: #f36d21;
	color: #fff;
	border: none;
	font-size: 12px;
	padding: 7px 15px;
	margin-top: 25px;
	cursor: pointer;
	display: inline-block;
	border-radius: 5px;
}
.paiement .button:hover {
	background-color: #31b7bc;
}
.paiement .col-xs-6 {
	text-align: center;
	height: 68px;
}
.paiement .col-xs-6 img {
	max-height: 68px;
	max-width: 100%;
}
.paiement-externe .button { margin-top: 25px; }
.paiement-externe .col-xs-6 {
	text-align: center;
	height: 68px;
}
.paiement-externe .col-xs-6 img {
	max-height: 68px;
	max-width: 100%;
}

/* ----------------------------------------------------------
   HELP BLOCKS
   ---------------------------------------------------------- */
.coord .help-block,
.coord2 .help-block {
	margin-top: 35px;
	margin-bottom: 20px;
	font: normal 10px 'Arial';
	color: #000000;
}
.coord .help-block a,
.coord2 .help-block a {
	color: #000000;
	font: bold 13px 'Arial';
}

/* ----------------------------------------------------------
   FORM CONTROLS
   ---------------------------------------------------------- */
.form-control {
	height: 26px;
	border-radius: 5px;
	border: solid 1px #c1c1c2 !important;
	color: #000000;
	padding-top: 3px;
	padding-bottom: 3px;
}
.form-group.error input.form-control:focus,
input.form-control:focus {
	box-shadow: none;
}
.form-group.error { color: #f11337; }
.error .form-control {
	border: solid 1px #f11337 !important;
	background-color: #f2dede;
}
input.form-control:-ms-input-placeholder { color: #b8b7b7; }
input.form-control::-webkit-input-placeholder { color: #b8b7b7; }
input.form-control::-moz-placeholder { color: #b8b7b7; }
.form-group.error input.form-control:-ms-input-placeholder { color: #f11337; }
.form-group.error input.form-control::-webkit-input-placeholder { color: #f11337; }
.form-group.error input.form-control::-moz-placeholder { color: #f11337; }
.coord select.form-control option,
.coord2 select.form-control option {
	padding-left: 0 !important;
}
.coord textarea.form-control,
.coord2 textarea.form-control {
	height: 148px;
	overflow-y: scroll;
	resize: none;
}
.coord .count,
.coord2 .count {
	font-size: 10px;
	color: #000000;
}
.coord .count span,
.coord2 .count span {
	font-weight: bold;
}
.coord2 {
	padding: 0;
	margin-top: 15px;
}
div.cardType .radio label {
	padding-left: 25px;
}
.legende_Oblig { font-size: 12px; }
.optin { margin-left: -15px; }
.cnil {
	font: 11px Arial;
	color: #a8a7a7;
	text-align: justify;
}

/* ----------------------------------------------------------
   CONFIRMATION / MONTANT
   ---------------------------------------------------------- */
.confirmation .don { padding-left: 0; }
.don .confirmation {
	background: #fff;
	padding: 20px 34px;
}

.don .montant.month {
	background: url(../images/barre_montant.jpg) 83% center no-repeat #31b7bc;
	color: #fff;
	padding: 15px 34px;
}
.don .montant.oneshot {
	background-color: #fff;
	border: 3px #fff solid;
	padding: 5px 18px;
	margin-top: 0;
}
.don .montant.oneshot table,
.don .montant.month table {
	margin-top: 0;
	margin-bottom: 0;
}
.don .montant.oneshot table tr td,
.don .montant.month table tr td {
	border-top: none;
	vertical-align: middle;
	padding: 0;
}
.don .montant.oneshot table tr td.txt,
.don .montant.month table tr td.txt {
	font-size: 1.2em;
	line-height: 1.5em;
	max-width: 200px;
	min-width: 100px;
}
.don .montant.oneshot table tr,
.don .montant.month table tr {
	line-height: 1.5em;
}
.don .montant.oneshot table tr td.txt span,
.don .montant.month table tr td.txt span {
	font-size: 1.6em;
}
.don .montant.oneshot table tr td.chiffre,
.don .montant.month table tr td.chiffre {
	font-size: 4em;
}
.don .montant.oneshot table tr td.chiffre > span,
.don .montant.month table tr td.chiffre > span {
	font-size: 0.7em;
	font-weight: normal;
}
.don .montant.oneshot table tr td.chiffre > span > span,
.don .montant.month table tr td.chiffre > span > span {
	font-size: 0.3em;
	font-weight: normal;
}
.don .montant.oneshot table tr td.text-right,
.don .montant.month table tr td.text-right {
	font-size: 0.7em;
	font-weight: bold;
}

/* ----------------------------------------------------------
   AMOUNT CARDS - GRID LAYOUT (from style-1)
   Card-style amount selection with orange borders
   ---------------------------------------------------------- */
.list-choix-montant {
	display: grid;
	grid-template-columns: 33% 33% 33%;
	gap: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.list-choix-montant .radio {
	float: none;
	width: auto;
	flex: 1 25.33%;
}
.list-choix-montant .radio label .circle { display: none; }
.list-choix-montant .radio label .check { display: none; }
.list-choix-montant .radio,
.list-choix-montant .radio + .radio {
	margin: 0;
}
.don .radio input[type="radio"]:checked ~ .txtMontant {
	background-color: #f36d21;
	color: #fff;
}

/* ----------------------------------------------------------
   CHECKBOX CIRCLE (from style-2)
   ---------------------------------------------------------- */
.checkbox.circle label { color: #000000; }
.optin .checkbox.circle label .ripple {
	margin-top: 5px;
	left: -12px;
}
.optin .checkbox.circle span.check {
	margin-top: 5px;
	margin-left: 5px;
}
.checkbox.circle span.check {
	position: absolute;
	margin-left: 15px;
}

/* ----------------------------------------------------------
   AFFECT SECTION
   ---------------------------------------------------------- */
.affect {
	margin-top: 15px;
	background: rgba(255, 255, 255, 0.4);
	border: solid #FFF 2px;
	padding: 20px 30px;
	border-radius: 10px;
}
.affect h2 {
	margin: 15px 0 10px;
	font-size: 13px;
	text-transform: uppercase;
	font-weight: 600;
}
.affect .radio label {
	padding-left: 35px;
	font-weight: normal;
	color: #000000;
}
.affect .radio label span { top: 5px; }
.affect .radio label .circle {
	border: none;
	height: 10px;
	width: 10px;
	background: #a8a7a7;
}
.affect .radio label .check {
	width: 11px;
	height: 11px;
}
.affect .radio input[type=radio]:checked ~ .check {
	background: #f36d21;
	transform: scale(0.55);
}
.affect .radio input[type=radio]:checked ~ .circle {
	border: solid 3px #f36d21;
}

/* ----------------------------------------------------------
   DON - MON DON SECTION
   ---------------------------------------------------------- */
.don .mondon.paiement,
.paie .mondon.paiement {
	background: #fff;
	margin-top: 0;
	margin-bottom: 15px;
}
.don .mondon,
.paie .mondon {
	background: #fff;
	margin-top: 15px;
	padding: 15px 30px 20px;
}
.don .mondon h2,
.paie .mondon h2 {
	margin: 15px 0 10px;
	font-size: 13px;
	text-transform: uppercase;
	font-weight: 600;
}
.don .mondon .duree {
	background: #f3f4f4;
	color: #000000;
	text-align: center;
	font-size: 12px;
	padding-top: 8px;
	padding-bottom: 7px;
	line-height: 12px;
	cursor: pointer;
	font-weight: 700;
	border: 2px solid #f3f4f4;
	border-radius: 5px;
}
.don .mondon .duree.select {
	background: #fff none repeat scroll 0 0;
	border: none;
	color: #f36d21;
	text-transform: uppercase;
	text-align: left;
	font-size: 13px;
}
.don .mondon .duree div { font-size: 9px; }
.don .mondon h3 {
	font-size: 11px;
	margin: 5px 0;
}
.don .mondon .radio { padding: 0; }
.don .mondon .radio label {
	padding-left: 35px;
	font-weight: normal;
	color: #000000;
}
.don .mondon .checkbox label {
	padding-left: 35px;
	font-weight: 400;
	color: #a8a7a7;
}

/* Amount card style (from style-1): bordered cards for amounts */
.don .mondon .amountOneshotSection .radio label,
.don .mondon .amountPrelSection .radio label {
	font-size: 1.4em;
	border: 2px solid #f36d21;
	padding: 0;
	margin: auto;
	width: 100%;
	text-align: center;
	color: #f36d21;
	border-radius: 8px;
	transition: background-color 0.2s, color 0.2s;
}
.don .mondon .amountOneshotSection .radio label span,
.amountOneshotSection .logo-paiement-cb { display: none }
.amountOneshotSection > div { padding-left: 0px }
.amountOneshotSection > div > img { max-width: 200px }
.don .mondon .amountPrelSection .radio label span {
	top: 9px;
}

/* ----------------------------------------------------------
   DON - RADIO / CHECKBOX
   ---------------------------------------------------------- */
.don .radio label span { top: 5px; }
.paiement .radio label span { top: 10px; }

.don .radio label .circle,
.paiement .radio label .circle {
	border: none;
	height: 10px;
	width: 10px;
	background: #a8a7a7;
}
.don .radio label .check,
.paiement .radio label .check {
	height: 11px;
	width: 11px;
}
.don .radio input[type=radio]:checked ~ .check,
.paiement .radio input[type=radio]:checked ~ .check,
.mondon .radio input[type=radio]:checked ~ .check {
	background: #f36d21;
	transform: scale(0.55);
}
.don .radio input[type=radio]:checked ~ .circle,
.paiement .radio input[type=radio]:checked ~ .circle,
.mondon .radio input[type=radio]:checked ~ .circle {
	border: solid 3px #f36d21;
}
.checkbox input[type=checkbox]:checked ~ .check::before,
.checkbox input[type=radio]:checked ~ .check::before {
	color: #f36d21;
	transform: scale(0.55);
}
.radio input[type="radio"]:checked ~ lib { font-weight: 700; }

/* ----------------------------------------------------------
   DON - LIBRE / EURO / IMPOT / REEL
   ---------------------------------------------------------- */
.don .li input { border-radius: 0; }
.don .libre,
.don .euro {
	font-weight: normal;
	padding: 0;
	line-height: 30px;
	width: auto;
	color: #000000;
}
.don .impot {
	color: #000000;
	font-size: 11px;
}
.don .reel {
	border: 2px solid #f36d21;
	color: #f36d21;
	background: none;
	padding: 5px 10px;
	margin-top: 8px;
	font-size: 12px;
	border-radius: 8px;
}
.don .reel b { font-size: 14px; }

/* ----------------------------------------------------------
   DON - PAYMENT METHODS (CB / PRELEV / PAYPAL / CHEQUE)
   ---------------------------------------------------------- */
.don .mondon.prelev,
.don .mondon.cb {
	position: relative;
	margin-top: 0;
}
.don .mondon.cb h2 {
	display: inline-block;
	vertical-align: middle;
}
.don .mondon.cb .img {
	display: inline-block;
	width: auto;
	float: none;
	vertical-align: middle;
	padding-left: 10px;
}
.don .mondon.cb .clear { display: none; }
img.confiance {
	position: absolute;
	right: 32px;
	top: -32px;
	z-index: 9;
	width: 100px;
}
label.iban {
	text-transform: uppercase;
	font-size: 12px;
	font-weight: normal;
}
input.iban {
	float: left;
	padding: 0;
	margin-right: 0.5%;
	text-align: center;
}
.prelev input { margin-bottom: 7px; }
.don .prelev .button,
.don .cb .button,
.don .paypal .button,
.don .cheque .button,
.don .kwixo .button {
	background: #f36d21;
	color: #fff;
	border: none;
	font-size: 12px;
	padding: 7px 15px;
	margin-top: 7px;
	cursor: pointer;
	display: inline-block;
	border-radius: 5px;
}
.don .prelev .button:hover,
.don .cb .button:hover,
.don .paypal .button:hover,
.don .cheque .button:hover,
.don .kwixo .button:hover {
	background-color: #31b7bc;
}
.don .cb .img { padding: 0; }
.don .cb .img img { max-width: 100%; }
.don .cb label.date {
	font-weight: normal;
	padding: 0;
	width: auto;
	color: #000000;
}
.don .cb select.validite,
.paie .cb select.validite {
	width: 23%;
	padding: 0;
	margin-left: 3px;
	float: left;
}
.paie .cb input.crypto,
.don .cb input.crypto {
	width: 55%;
	float: left;
}
.container .cb input.crypto { width: 90px; }
.paie .cb img.info,
.don .cb img.info {
	float: left;
	margin: 5px 0 0 10px;
	cursor: pointer;
}

/* ----------------------------------------------------------
   IBAN GROUP (from style-2)
   ---------------------------------------------------------- */
.ibanGroup .form-control-wrapper {
	float: left;
	margin-right: 0.5%;
	width: 13.75%;
}

/* ----------------------------------------------------------
   CART CONTENT (from style-2)
   ---------------------------------------------------------- */
.cartContent {
	padding-top: 15px;
	padding-bottom: 15px;
}
img.couverture { width: 100%; max-width: 150px; max-height: 210px; }
div.couverture { padding-left: 0; padding-right: 0; }

/* ----------------------------------------------------------
   HISTORIQUE TABLE
   ---------------------------------------------------------- */
table.historique {
	width: 100%;
	font-size: 13px;
	background-color: rgba(255,255,255,0.95);
}
table.historique th {
	width: 1px;
	padding: 4px;
	box-sizing: border-box;
	vertical-align: top;
}
table.historique td {
	padding: 4px 4px 15px;
	box-sizing: border-box;
}
table.historique caption {
	background-color: rgba(255,255,255,0.95);
	text-align: center;
	font-weight: 700;
	font-size: 16px;
	color: #333;
	border-bottom: 1px solid #ccc;
}
table.historique,
table.historique th {
	text-align: center;
}
tr.impair { background-color: #eeeeee; }
img.typeCarte { width: 60px; }

/* ----------------------------------------------------------
   WRAP / FOOTER
   ---------------------------------------------------------- */
#wrap {
	min-height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: fixed;
}
#wrap > .container {
	overflow: auto;
	padding-bottom: 125px;
}
#footer {
	position: relative;
	clear: both;
	height: 105px;
	margin-top: -105px;
	padding-top: 20px;
	padding-bottom: 20px;
	background: #fff;
}
/* Opera Fix */
body:before {
	content: "";
	height: 100%;
	float: left;
	width: 0;
	margin-top: -32767px;
}
#footer .col-xs-12 { padding: 0; }
#footer a {
	color: #000000;
	font-size: 12px;
}

/* ----------------------------------------------------------
   LOADER
   ---------------------------------------------------------- */
.loader-message {
	font-family: Arial, serif;
	font-weight: normal;
	font-size: 14px;
	color: #000;
	white-space: nowrap;
}

/* ----------------------------------------------------------
   MISC LABELS
   ---------------------------------------------------------- */
#coordPosNumber { width: 2px; display: none; }
label.label-po { display: none; color: #000000; font-weight: normal; margin-bottom: 2px; }
label.label-crypto { display: none; }

/* ----------------------------------------------------------
   ESPACE DONATEUR (from style-2)
   ---------------------------------------------------------- */
#wrap.espaceDo {
	background-image: url("../images/fond_donateur.jpg");
	background-color: #ffefc1;
	min-height: 100%;
}
div.lienEDDon, div.lienEDAbo { text-align: center; padding-bottom: 25px; font-weight: bold; }
div.presAboED { margin-top: 20px; margin-bottom: 20px; }

/* ----------------------------------------------------------
   3 COLONNES LAYOUT (from style-2)
   ---------------------------------------------------------- */
.container.col3 .intro { display: none; }
.container.col3 .coord,
.container.col3 .don,
.container.col3 .paie {
	padding-left: 0;
}
.container.col3 div.titreCol { color: white; text-align: center; }
.container.col3 .affect {
	margin-top: 0;
	margin-bottom: 15px;
}
.module {
	background: white none repeat scroll 0 0;
}
.container.col3 .don {
	float: left;
	padding-left: 0;
}
#header .nav { display: none }

/* ----------------------------------------------------------
   THUMBNAILS (from style-2)
   ---------------------------------------------------------- */
div.titleThumbnails { width: 100%; white-space: unset; }
div.titleThumbnail { display: block; float: left; text-align: center; }
body.reader { margin: 0; padding: 0; overflow: hidden; height: 100vh; width: 100vw; }
div.titleThumbnails_1 div.titleThumbnail,
div.titleThumbnails_2 div.titleThumbnail,
div.titleThumbnails_3 div.titleThumbnail,
div.titleThumbnails_4 div.titleThumbnail {
	width: 100%;
}

/* ----------------------------------------------------------
   INFO SECTIONS (from style-2)
   ---------------------------------------------------------- */
a.lienConfiance { display: none; }
div.info_coord, div.info1 {
	background: #fff none repeat scroll 0 0;
	margin-top: 15px;
	padding-bottom: 15px;
	border-radius: 10px;
}
div.info_coord img, div.info1 img { max-width: 100%; }
.oblig { display: none; }

/* ----------------------------------------------------------
   ERROR MESSAGES
   ---------------------------------------------------------- */
.smaller { font-size: 50%; }
.ui-message-error {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	color: #f11337;
}
.ui-message-error .ui-message-error-icon,
.ui-messages-error .ui-messages-error-icon { display: none; }
.ui-message-error .ui-message-error-summary,
.ui-messages-error .ui-messages-error-summary {
	font-weight: normal;
	margin: 0;
}
.ui-messages-success { background-color: #dff0d8; border-color: #a3d48e; color: #444; }
.ui-messages-error { background-color: #f2dede; border-color: #d59595; color: #444; }
.ui-messages-info,
.ui-messages-warn,
.ui-messages-error,
.ui-messages-fatal,
.ui-messages-success {
	border-width: 2px;
	border-style: solid;
	margin: 10px 0;
	padding: 10px;
	border-radius: 5px;
}


/* ============================================================
   RESPONSIVE - MOBILE FIRST
   ============================================================ */

/* ----------------------------------------------------------
   >= 400px : Thumbnails 2-col
   ---------------------------------------------------------- */
@media (min-width: 400px) {
	div.titleThumbnails_2 div.titleThumbnail,
	div.titleThumbnails_3 div.titleThumbnail,
	div.titleThumbnails_4 div.titleThumbnail {
		width: 49%;
	}
}

/* ----------------------------------------------------------
   >= 449px : Rounded borders on blocks
   ---------------------------------------------------------- */
@media screen and (min-width: 449px) {
	#header .nav { border-radius: 10px; }
	#header .nav a { border-radius: 10px; }
	.don .montant,
	.don .mondon,
	.coord .fond {
		border-radius: 10px;
	}
	.don .mondon.paiement,
	.paie .mondon.paiement,
	.paie .mondon {
		border-radius: 10px;
	}
}

/* ----------------------------------------------------------
   >= 450px - 767px
   ---------------------------------------------------------- */
@media (min-width: 450px) and (max-width: 767px) {
	#header { height: 115px; }
}

/* ----------------------------------------------------------
   >= 540px : Thumbnails 3-col
   ---------------------------------------------------------- */
@media (min-width: 540px) {
	div.titleThumbnails_3 div.titleThumbnail,
	div.titleThumbnails_4 div.titleThumbnail {
		width: 33%;
	}
}

/* ----------------------------------------------------------
   >= 700px : Thumbnails 4-col
   ---------------------------------------------------------- */
@media (min-width: 700px) {
	div.titleThumbnails_4 div.titleThumbnail { width: 24.5%; }
}

/* ----------------------------------------------------------
   >= 768px : Tablet+
   ---------------------------------------------------------- */
@media (min-width: 768px) {
	.don .montant.oneshot {
		padding: 18px;
		margin-top: 0;
	}
	.container { width: 688px; }
	#header {
		height: 125px;
		background-repeat: no-repeat;
		background-position: center;
	}
	#header .identification { margin-right: 50px; }

	.intro {
		color: #fff;
		font-size: 14px;
		font-weight: bold;
		margin-top: 26px;
		margin-bottom: 20px;
		line-height: 22px;
	}
	.intro span { margin-right: 10px; }

	.coord {
		padding-left: 0;
		padding-right: 7.5px;
		float: left;
	}
	.don {
		padding-left: 7.5px;
		padding-right: 0;
		float: right;
	}
	.paiementErreur .don { padding-left: 0; }
	.paie { padding-left: 7.5px; }

	.don .montant table tr td { line-height: 1; }
	.don .montant.month table tr td.txt {
		font-size: 0.75em;
		line-height: 1.5em;
	}
	.don .montant.month table tr td.txt span { font-size: 1.6em; }
	.don .montant.month table tr td.chiffre { font-size: 2.5em; }
	.don .montant.month table tr td.text-right { font-size: 0.7em; }

	#wrap > .container {
		overflow: auto;
		padding-bottom: 105px;
	}
	#footer {
		height: 85px;
		margin-top: -85px;
		padding-top: 15px;
	}
	.modal-dialog { margin: 30px auto; }
	#coordPosNumber { width: 1px; display: none; }

	img.typeCarte { width: 50px; }

	.container.col3 .don { padding-right: 7.5px; }

	.prelev .ibanGroup .form-control-wrapper { width: 24.25%; }
}

/* ----------------------------------------------------------
   >= 992px : Desktop
   ---------------------------------------------------------- */
@media (min-width: 992px) {
	.container { width: 970px !important; }
	#header { height: 150px; }
	#header .nav {
		background: #fff;
		margin-top: 0;
		position: relative;
		padding: 0;
	}
	#header .nav .text-center.select.epingle {
		background-color: #31b7bc;
		color: #fff;
	}
	#header .nav a {
		color: #31b7bc;
		text-transform: uppercase;
		font-size: 16px;
		font-weight: bold;
		padding: 5px 0;
		text-decoration: none;
		border: solid 3px #fff;
	}
	#header .nav .pop a {
		color: inherit;
		text-transform: none;
		font-size: inherit;
		font-weight: 700;
		padding: 0;
		text-decoration: none;
		border: none;
	}
	#header .nav div.title {
		color: #31b7bc;
		text-transform: uppercase;
		font-size: 16px;
		font-weight: bold;
		padding: 5px 0;
		text-decoration: none;
		border: solid 3px #fff;
	}
	#header .hlogo { height: 125px; }

	.coord .help-block { font: normal 13px 'Arial'; }

	.pop {
		display: none !important;
		position: absolute;
		top: 38px;
		background: rgba(0, 0, 0, 0.9);
		padding: 35px;
		color: #fff;
		width: 460px;
		font-size: 12px;
		z-index: 3;
	}
	#coord.pop {
		left: 50%;
		margin-left: -230px;
	}
	#reglement.pop { right: 0; }
	.pop h2 {
		margin: 0;
		text-transform: uppercase;
		font-size: 12px;
		font-weight: bold;
	}
	.pop p { margin-top: 20px; }
	#coordPosNumber { width: 1px; display: none; }

	.container.col3 { width: 970px; }
	div.cardType { margin-left: -20px; }

	.prelev .ibanGroup .form-control-wrapper,
	.ibanGroup .form-control-wrapper {
		width: 13.75%;
	}
	.container.col3 img.confiance {
		right: -14px;
		top: 36px;
	}
	.container.col3 .prelev .ibanGroup .form-control-wrapper {
		width: 14.28%;
		margin-right: auto;
	}
	.container.col3 .cb input.crypto {
		margin-left: 7px;
		padding-left: 6px;
		padding-right: 6px;
		width: 90px;
	}
}

/* ----------------------------------------------------------
   >= 1200px : Large Desktop
   ---------------------------------------------------------- */
@media (min-width: 1200px) {
	.container { width: 1200px !important; }
	.guides { height: 750px; }
	#wrap {
		background-image: url(../images/bg.jpg);
	}
}

/* ----------------------------------------------------------
   768px - 1199px : Tablet Background
   ---------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {
	#wrap {
		background-image: url(../images/bg-2.jpg);
	}
}
@media (min-width: 1200px) {
	#IRBtn{
		width:50%;
	}
	#IFIBtn{
		width:25%;
	}
	#ISBtn{
		width:25%;
	}
}