/**
 * Forms
 */

/* All elements */
.field { margin-bottom: 15px; position:relative; }
.field label { display: inline-block; margin:0; }

.field [data-validate-for] { display:none; font-size:10px; line-height:10px; position:absolute; right:0; bottom:-1.2em; }
.field [data-validate-for].visible { display:block; }

/* Textfields & textareas */
.field.textfield input,
.field.textarea textarea { display: block; width: 100%; padding: 10px; border: 1px solid #ccc; }

/* Checkbox & Radio */
.field.checkbox,
.field.radio { line-height: 20px; }
.field.checkbox input,
.field.radio input { width:20px; height:20px; float:left; margin-right:10px; }
.field.checkbox label,
.field.radio label { position:relative; margin-bottom: 0; cursor: pointer; }

.field.checkbox span:before,
.field.radio span:before { content:''; position:absolute; left:0; top:0; width:20px; height:20px; border:1px solid #ccc; background:#fff; }

.field.checkbox span:after,
.field.radio span:after { content:''; position:absolute; left:3px; top:3px; width: 14px; height:14px; background:#ccc; opacity:0; transition:all 0.5s ease 0s; }

.field.checkbox input:checked+span:after,
.field.radio input:checked+span:after { opacity: 1; }

.field.checkbox .message:before,
.field.checkbox .message:after,
.field.radio .message:before,
.field.radio .message:after { content:none; }

.field.checkbox span:before,
.field.checkbox span:after { border-radius: 0; }

.field.radio span:before,
.field.radio span:after { border-radius: 50%; }

/* Select */
.field.select select { display:block; width:100%; padding:10px; border:1px solid #ccc; }

/* Select2 */
.field.select2 .select2-selection { border-radius:0; border:1px solid #ccc; height:46px; }
.field.select2 .select2-selection__rendered { line-height:46px; }
.field.select2 .select2-selection__arrow { height:46px; }

/* Addresses */
.field.address .ap-input { height:auto; line-height:auto; border-radius:0; }
.field.address .ap-dropdown-menu { color:#000; }

/* Captcha */
.field.captcha { display:flex; justify-content:center; }

/**
 * Navigation
 **/
 
/* Frontend editor */
.ct-widget.ct-ignition { position:fixed; left:auto; top:auto; right:20px; bottom:20px; z-index:10000; transition:all 0.5s ease 0s; }
.ct-widget.ct-ignition .ct-ignition__button { position:static; margin-top:10px;}

.ce-element { outline:2px dashed rgba(243, 156, 18, 0.5); }
.ce-element--focused, .ce-element:focus { outline:2px dashed rgba(243, 156, 18, 1); }

/**
 * Maintenance
 **/
 
.maintenance { display:flex; align-items:center; justify-content:center; min-height:100vh; text-align:center; background:#004759 url(../themes/abotest/assets/img/maintenance.jpg) no-repeat left top; background-size:cover; color:#fff; }
.maintenance:before { content:''; position:absolute; left:0; top:0; width:100%; height:100%; z-index:2; }
.maintenance .container { position:relative; z-index:3; visibility:hidden; }
.maintenance .code { font-size:120px; font-weight:300; }
.maintenance h1 { font-weight:500; font-size:40px; text-transform:uppercase; display:flex; flex-direction:column; justify-content:center; align-items:center; }    
.maintenance h1:after { content:''; display:block; width:50px; height:3px; background:#fff; margin:30px 0; }
.maintenance .btn { color:#fff; background:transparent; border:2px solid #fff; border-radius:99px; padding:10px 15px; text-transform:uppercase; margin:20px 10px 0 10px; display:inline-block; font-size:13px; transition:all 0.5s ease 0s; }
.maintenance .btn:hover { text-decoration:none; background:#fff; color:#333; }

/**
 * Legal
 **/
.legal { margin:60px 0; }
.legal h1 { font-size:4rem; margin:0 0 1em 0; }
.legal h2 { font-size:3rem; margin:1em 0; }
.legal h3 { font-size:2.5rem; margin:1em 0; }
.legal h4 { font-size:2rem; margin:1em 0; }
.legal h5 { font-size:1.5rem; margin:1em 0; }
.legal table { width:100%; margin:2em 0; }
.legal table th,
.legal table td { padding:1em; border:1px solid rgba(0,0,0,0.25); }
/**
 * General Elements
 **/

body { font-family:'proxima-nova', sans-serif; font-size:18px; font-weight:400; }
:focus { outline:none; }

/* Titles */
h1 { text-align:center; font-size:60px; text-transform:uppercase; font-weight:800; color:#e20613; margin:20px 0; }
h2 { font-size:34px; font-weight:800; text-align:center; margin-bottom:30px; }
h3 { }
h4 { }
h5 { }
h6 { }

/* Links */
a { color:#e20613; }
a:visited { }
a:hover { text-decoration:none; }
a:focus { text-decoration:none; }

/* Utility */
.hide { display:none; }

/* Images */
img { max-width:100%; height:auto; }
img[data-sizes="auto"] { display: block; width: 100%; }

/* Form */
.loading:before, .loading:after { content:none; }
.alert { padding:10px;border-radius:5px; margin:15px 0; }
.alert.success { color:#155724; background:#d4edda; border:1px solid #c3e6cb; }
.alert.warning { color:#856404; background:#fff3cd; border:1px solid #ffeeba; }
.alert.danger { color:#a94442; background:#f2dede; border:1px solid #ebcccc; }
.alert.info { color:#0c5460; background:#d1ecf1; border:1px solid #bee5eb; }
.alert.error { color:#a94442; background:#f2dede; border:1px solid #ebccd1; }

.swiper-wrapper { box-sizing:border-box; }

/* Stripe */


/* Buttons */
.btn {  border:none; background:none; color:#fff; font-weight:800; font-size:18px; padding:15px 50px; display:inline-block; position:relative; overflow:hidden; cursor:pointer; }
.btn:before { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); background:#e20613; border-radius:100%; width:0; z-index:-1; height:0; transition:all 0.5s ease 0s; }
.btn:after { content:''; width:100%; height:100%; background:#000; position:absolute; left:0; top:0; z-index:-2; }
.btn:hover { color:#fff; }
.btn:hover:before { width:400px; height:400px; }

/* table */
table { width:100%; margin:20px 0; }
table th, table td { padding:10px; }
table tbody tr { border-top:1px solid #e3e3e3; }

/* Forms */
.field [data-validate-for] { font-size:12px; color:#e20613; }

.field.required label:after { content:' *'; color:#e20613; }

.field.checkbox span:after, .field.radio span:after { background:#e20613; }

.inline .field { margin-bottom:30px; }
.inline .field.textfield { position:relative; }
.inline .field.textfield label { position:absolute; left:15px; top:50%; transform:translateY(-50%); transition:all 0.3s ease 0s; }
.inline .field.textfield input { padding:20px 15px 5px 15px; }
.inline .field.textfield.active label,
.inline .field.textfield.filled label { left:15px; top:5px; transform:translateY(0); font-size:12px; color:#777; }

.inline .field.textarea { position:relative; }
.inline .field.textarea label { position:absolute; left:15px; top:15px; transition:all 0.3s ease 0s; }
.inline .field.textarea textarea { padding:25px 15px 15px 15px; min-height:300px; }
.inline .field.textarea.active label,
.inline .field.textarea.filled label { left:15px; top:5px; transform:translateY(0); font-size:12px; color:#777; }

.field.submit { text-align:center; margin-top:30px; }

/* Header */
#header {  border-top:2px solid #e20613;}
#header .hamburger { display:none; padding:0; }
#header .container { padding:30px 0; }
#header .upper { margin-bottom:0; text-transform:uppercase; font-weight:700; margin-bottom:10px; }
#header .row { align-items:flex-end; }
#header .logos { display:flex; flex-direction:row; justify-content: flex-start; align-items:center; }
#header .logos img { display:inline-block; max-width:200px; }
#header .logos .lpb { border-right:1px solid #000; padding-right:15px; margin-right:15px; }
#header .menu { display:flex; flex-direction:column; align-items:flex-end; justify-content: flex-end; text-transform:uppercase; font-size:16px; font-weight:600; }
#header .menu ul { list-style:none; margin:0; padding:0; }
#header .menu ul li { display:inline-block; margin-left:30px; }
#header .menu ul li a { color:#000000; }
#header .menu ul li a i { margin-right:10px; }

#overlay { position:fixed; left:0; top:0; width:100%; height:100%; pointer-events:none; background:#e20613; color:#fff; opacity:0; transition:all 0.5s ease 0s; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; }
#overlay ul { margin:0; padding:0; list-style:none;}
#overlay ul li { margin:10px 0; }
#overlay ul li a { color:#fff; text-transform:uppercase; font-size:20px; }
#overlay ul li i { display:none; }
#overlay .hamburger { display:inline-block; position:absolute; right:20px; top:20px; }
#overlay .hamburger.is-active .hamburger-inner, 
#overlay .hamburger.is-active .hamburger-inner:after, 
#overlay .hamburger.is-active .hamburger-inner:before { background:#fff; }
body.open #overlay { opacity:1; pointer-events:auto; }

#main {  }
#main header { text-align:left; margin-bottom:80px;  }

/* Footer */
#footer { background:#e20613; padding:60px 0; margin-top:100px; color:#fff; }
#footer .logos img { margin-bottom:15px; }
#footer p { margin:0; }
#footer a { color:#fff; }
#footer .logos img { display:inline-block; max-width:150px; margin-right:15px; }
#footer .cards { text-align:right; }
#footer .cards img { max-width:250px; }
#footer .menu ul { margin:40px 0; font-size:16px; list-style:none; padding:0; }
#footer .menu li { margin:5px 0; }

.intro { margin:50px 0; text-align:center; }

.slider img { min-height:250px; object-fit:cover; width:100%; }

.separator { text-align:center; margin:40px 0; color:#e20613; font-size:40px; position:relative; }
.separator:before { content:''; position:absolute; width:100%; height:1px; left:0; top:50%; background:#e3e3e3; z-index:-1; }
.separator i { background:#fff; padding:0 50px; }
 
.miniform { max-width:550px; margin:0 auto; }

.legal h1 { text-align:left; font-size:36px; }
.legal h2 { text-align:left; font-size:30px; }
.legal h3 { text-align:left; font-size:26px; }
.legal h4 { text-align:left; font-size:22px; }
.legal h5 { text-align:left; font-size:18px; }
.legal table { width:100%; margin:30px 0; }
.legal table th,
.legal table td { padding:15px; border:1px solid #ddd; }


/* Abonnement */

#subscribe .field.textfield { margin-bottom:30px; }

#subscribe .radio { margin-bottom:0; height:100%; }
#subscribe .radio span:before,
#subscribe .radio span:after { content:none; }
#subscribe .radio label { position:relative; display:flex; flex-direction:column; height:100%; padding:50px 100px; align-items:center; min-height:380px; justify-content:center; text-align:center; background:#efefef; font-weight:800; color:#000; font-size:34px; line-height:1.2em; overflow:hidden; }
#subscribe .radio label:after { content:''; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:0; height:0; background:#e20613; border-radius:100%; z-index:1; transition:all 0.7s ease 0s; opacity:0;  }
#subscribe .radio label span { position:relative; z-index:2; }
#subscribe .radio input { display:none; }
#subscribe .radio.selected label { color:#fff; }
#subscribe .radio.selected label:after { width:800px; height:800px; opacity:1; }

#subscribe .contacted { text-align:center; }

#subscribe .demande { text-align:center; margin-top:20px; }

#subscribe .user .inner { background:#efefef; padding:40px; }
#subscribe .user h3 { text-transform:uppercase; color:#e20613; font-size:16px; }
#subscribe .user h4 { white-space:nowrap; }
#subscribe .user p { margin-bottom:0; }
#subscribe .user .row { align-items:center; }
#subscribe .user .icon { flex-grow:0; }
#subscribe .user .infos { flex-grow:0; border-right:1px solid #ccc; padding-right:30px; }
#subscribe .user .infos p { white-space:nowrap; }
#subscribe .user .abonnements { padding-left:30px; }
#subscribe .user .label { font-weight:600; }
#subscribe .user .icon i { font-size:100px; color:#c9c9c9; }

#subscribe .produits .radio span { display:block;  text-indent:-9999px; }
#subscribe .produits .radio.lpb span { background:url(../themes/abotest/assets/img/btn-lpb.png) no-repeat left top; width:424px; height:118px; margin:auto; }
#subscribe .produits .radio.lpp span { background:url(../themes/abotest/assets/img/btn-lpp.png) no-repeat left top; width:438px; height:118px; margin:auto; }
#subscribe .produits .radio.lpb.selected span { background-position:left bottom; }
#subscribe .produits .radio.lpp.selected span { background-position:left bottom; }
#subscribe .produits .radio.disabled { opacity:0.5; }
#subscribe .produits .radio label { padding:0; }

#subscribe .duree .radio span { display:block; }
#subscribe .duree .radio .number { font-size:80px; display:block; margin-bottom:10px;}
#subscribe .duree .radio .price { display:block; font-weight:500; font-size:22px; margin-top:30px; }

#subscribe .adresses { padding-bottom:30px; }
#subscribe .adresses .wrapper { position:relative; }
#subscribe .adresses .billing,
#subscribe .adresses .shipping { transition:all 0.5s ease 0s; position:absolute; left:50%; transform:translateX(-50%); width:50%; }
#subscribe .adresses .billing { z-index:2; }
#subscribe .adresses .shipping { opacity:0; visibility:hidden; z-index:1; }
#subscribe .adresses.separate .billing { left:0; transform:translateX(0);  padding-right:15px; }
#subscribe .adresses.separate .shipping { right:0; transform:translateX(0); visibility:visible; opacity:1; padding-left:15px;  }
#subscribe .adresses .copy { text-align:center; margin-top:20px; }

#subscribe .paiement { position:relative; }
#subscribe .paiement .wrapper { max-width:550px; margin:0 auto; }
#subscribe .paiement .miniform { margin-top:50px; max-width:none; padding:50px; background:#eee; border-radius:30px; opacity:0; transition:all 0.5s ease 0s; pointer-events:none; }
#subscribe .paiement .miniform.show { opacity:1; pointer-events:auto; }
#subscribe .paiement .miniform h3 { text-align:center; }
#subscribe .paiement .miniform .message { font-size:12px; color:#e20613; }
#subscribe .paiement .miniform .btn { background:#000; }
#subscribe .paiement .StripeElement { padding:20px; border: 1px solid rgba(0, 0, 0, 0.15); background:#fff; }
#subscribe .paiement .message { text-align:center !important; width:100%; }
#subscribe .paiement .secure { text-align:center; }
#subscribe .paiement .secure img { max-width:250px; }
#subscribe .paiement .cgv { text-align:center; }

#subscribe .paiement #card-errors { display:block; position:static; text-align:left !important; line-height:1.2em; margin-top:5px; }

#subscribe .success { text-align:center; }
#subscribe .success .fa-check-circle { color:#4CAF50; font-size:80px; margin-bottom:40px; }

.oc-loading .paiement:before { content:''; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,0.8); z-index:10; }

/* Mon compte */
#compte .informations { margin-bottom:50px; }
#compte .informations .block { background:#f4f4f4; padding:50px; }
#compte .informations .block .adresse { margin-bottom:50px; }
#compte .informations .link { text-align:right; }
#compte .informations .link a { color:#000; display:inline-block; margin:10px 0; font-weight:600; margin-left:30px; }
#compte .informations .description { font-size:14px; color:#aaa; }

#compte .abonnements .reabo { font-size:14px; border:none; }
#compte .abonnements .reabo i { color:#e20613; }
#compte .abonnements .reabo span { color:#e20613; }

#compte .add { text-align:center; }
#compte .add .btn {  }

#contact .captcha { display:flex; align-items:center; justify-content:center; margin:30px 0; }
/**
 * Large devices (desktops, less than 1200px)
 **/
@media (max-width: 1199px) {
  h1 { font-size:60px ;}
  #subscribe .radio label { min-height:300px; }
}

/**
 * Medium devices (tablets, less than 992px)
 **/
@media (max-width: 991px) {
  h1 { font-size:40px ;}
  h2 { font-size:28px; }
  #header .logos img { max-width:150px; }
  
  #subscribe .products .step1 .radio.lpb span,
  #subscribe .products .step1 .radio.lpp span { width:212px; height:59px; background-size:212px 118px; padding:0; }
  #subscribe .radio label { padding:50px; }

}

/**
 * Small devices (landscape phones, less than 768px)
 **/
@media (max-width: 767px) {
  h1 { font-size:30px ;}
  h2 { font-size:24px; }
  

  #header .hamburger { display:inline-block; }
  #header .menu ul { display:none; }
  #subscribe .radio label { min-height:200px; font-size:28px; padding:0; }
  #subscribe .user .user-info { padding:50px; }
  #subscribe .user .user-info i { font-size:80px; }
  
  #subscribe .products .step2 .radio .number { font-size:60px; }
  #subscribe .products .step2 .radio .price { margin-top:15px; }
  
  #subscribe .separator { margin:20px 0; }
  
  #subscribe .addresses { padding-bottom:0; }
  #subscribe .addresses .billing { display:none; }
  #subscribe .addresses.separate .billing { display:block; padding-left:0; }
  #subscribe .addresses.separate .shipping { padding-right:0; }
  #subscribe .addresses .shipping, #subscribe .addresses .billing { width:100%; position:static; left:0; transform:none; }
  #subscribe .addresses .wrapper { height:auto !important; }
  
  #footer { text-align:center; }
  #footer .cards { text-align:center; margin:15px 0; }
  
}

/**
 * Extra small devices (portrait phones, less than 544px)
 **/
@media (max-width: 575px) {
  h2 { font-size:20px; }
  #subscribe .radio label { min-height:150px; font-size:20px; padding:20px 30px; }
  #subscribe .products .step1 .radio.lpb span,
  #subscribe .products .step1 .radio.lpp span { width:106px; height:29.5px; background-size:106px 59px; padding:0; }
  
  .field label { font-size:14px; }
  #header .logos img { max-width:120px; }
}