.content { max-width: 1024px; margin: 0 auto; position: relative;  }

body { font-family: 'Asap', sans-serif;  }
p { vertical-align: top; margin: 0; }



header { background: url(/media/paiement/fond.png) repeat-x; padding-top:12px;  }
header h1 { background: url(/media/paiement/logo-titre.png) no-repeat; line-height: 58px; font-size: 1.8em; font-weight: normal; text-transform: uppercase; margin: -2px 0 0 10px; padding-left: 82px; font-family: 'Asap', sans-serif;  }
header .content { border-bottom: 3px solid #f3f3f3; padding-bottom: 28px; }

footer { background: url(/media/paiement/fond-footer.png) repeat-x; padding-top:5px; margin-top: 75px; }
footer h2 { background:#377cdb; color: white; margin: -1px 0 0 10px; font-size: 0.75em; font-weight: normal; text-transform: uppercase; text-align: center; padding: 2px 0; font-family: 'Asap', sans-serif;  }
footer div div div { text-align: right; }

section.section_info { background: #f3f3f3; padding: 10px; border: 2px solid #d6d6d6; margin: 23px 10px 0 10px; font-family: 'Asap', sans-serif; font-size: 0.9em } 
section.section_info p { margin-bottom: 10px; text-overflow: ellipsis; overflow: hidden; }
section.section_info strong { text-transform: uppercase; } 
section.section_info hr { border: none; border-top: 1px solid #919191; height : 1px; clear: both; margin: 20px 0; }
section.section_info img { margin: 0 auto; }

section.section_paiement { margin: 23px 10px 0 10px; font-family: 'Asap', sans-serif;  }
section.section_paiement h2 { background: #3b0d21; color: white; margin: 0; padding: 10px; font-weight: normal; font-size:1.2em; }
section.section_paiement h2 span { display: block; border-top: 1px solid #919191; margin-top: 5px; padding-top: 5px; }
section.section_paiement h2 strong { font-weight: bold; text-transform: uppercase; font-size:1.2em; }
section.section_paiement h2 span strong { font-size: 1em; }
section.section_paiement form { border: 2px solid #c6c6c6; border-top: none; padding: 10px; }
section.section_paiement p { margin: 15px 0; }
section.section_paiement a { color: black; text-decoration:underline; font-size: 0.8em; }

label { width: 30%; display: inline-block; vertical-align:top; font-size: 0.8em; line-height: 2rem; }
.contenu { width: 67%; display: inline-block; }

#p_type_cb label { width: 100%; display: block; font-weight: bold; font-style: italic; font-size: 1.1em; }
#p_type_cb .contenu { vertical-align: middle; padding: 10px 0; width: 90%; width: 100%; line-height:44px; }
#p_type_cb .contenu label { display: inline-block; border: 2px solid transparent; width: auto; cursor: pointer; margin-right: 25px; height:44px; }
#p_type_cb .contenu input:checked+label { border: 2px solid red; }

#p_card_number label { width: 25%;  }
#p_card_number .contenu { width: 72%; }

input, select {
    width: calc( 50% - 5px);
    margin-right:5px;
    border: 1px solid #7e7e7e;
    -webkit-appearance: none;
    border-radius: 0;
    line-height: 2rem; 
    height: 2rem; 
    padding: 0 5px;
}

input#card_number { width: 99%; width:calc(100% - 12px); margin-right: 0; }
input[type=radio] { width: auto; height: 44px; vertical-align: middle; margin: 0 10px; border: none; }
select#card_expiration_date_yy { width: 50%; margin-right:0; }

p.submit { text-align:center; }
section.section_paiement a.annuler { display: inline-block; width:114px; height: 26px; margin-top: -4px; background: url(/media/paiement/fond-bt-annuler.png) no-repeat #909090; border:0; color: white; padding: 11px 0 0 37px; text-transform: uppercase; font-size: 1em; line-height: 1em; text-decoration: none; vertical-align: middle; text-align: left; }
input[type="submit"] { width:151px; height: 37px; background: url(/media/paiement/fond-bt-valider.png) no-repeat #377cdb; border:0; color: white; padding: 0 0 0 23px; line-height: 41px; text-transform: uppercase; font-size: 1em; }

.demo { background: #FF9999; padding: 10px; border: 1px dashed #FF0000; }
.demo a { color: white; }

#ccv_box #fond { background-color: rgba(0,0,0,0.3); position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
#ccv { margin: 0 auto; border: 1px solid #333; padding: 10px; position: absolute; top: 100px; left: 130px; max-width: 337px; background:white; box-shadow: 5px 5px 10px #000; }

@media screen and (max-width: 1024px) {
	pure-u-md-0 { display: none; }
	footer div div div { text-align: center; }
	input[type=radio] { margin: 0 5px; }
}

@media screen and (max-width : 768px) {
	footer h2 { margin: -1px 10px 0 10px; }
	section.section_paiement h2 { font-size:1em; }
}

@media screen and (max-width : 568px) {
	header h1 { line-height:30px; font-size:1.5em; }
	#p_type_cb .contenu { text-align: center; }
	#p_type_cb .contenu label { margin-right: 15px; }
	input[type=radio] { display: none }
	#p_card_number label, #p_card_expiration label, #p_card_cvv label { font-size:0.7em; }
	section.section_paiement a { font-size:0.75em; }
	
	section.section_paiement a.annuler { width:100px; font-size: 0.8em; }
	input[type="submit"] { width:100px; font-size: 0.8em; background-position: -17px 0; }
	
	#ccv { left: 10px; width: 90%; width: calc(100% - 45px); }
}