.viewer-element body {
    font-family: Roboto, serif;}

.viewer-element .page-content-front {
    width: 1200px !important;}

.viewer-element .wrapper,
.viewer-element .viewer-content,
.viewer-element .checkout-bundle .ck-form-element,
.viewer-element .form-element .form-group label {
    font-size: 16px;    color: #121212;}

.viewer-element a,
.viewer-element .wrapper a,
.viewer-element .viewer-content a {
    font-size: 16x;    color: #365689;}

.viewer-element a:hover,
.viewer-element .wrapper a:hover,
.viewer-element .viewer-content a:hover
.viewer-element a:active,
.viewer-element .wrapper a:active,
.viewer-element .viewer-content a:active,
.viewer-element a:focus,
.viewer-element .wrapper a:focus,
.viewer-element .viewer-content a:focus {
    font-size: 16px;    color: #5387d6;}
.viewer-element h1,
.viewer-element .title-lvl-1 {
    font-size: 40px;    color: #ffffff;}
.viewer-element h2,
.viewer-element .title-lvl-2 {
    font-size: 30px;    color: #365689;}
.viewer-element h3,
.viewer-element .title-lvl-3 {
    font-size: 18px;    color: #121212;}
.viewer-element h4,
.viewer-element .title-lvl-4 {
    font-size: 14px;    color: #777777;}
.viewer-element h5,
.viewer-element .title-lvl-5 {
    font-size: 14px;    color: #777777;}
.viewer-element h6,
.viewer-element .title-lvl-6 {
    font-size: 14px;    color: #777777;}

/* ------------------------
// BUTTONS
 ------------------------ */
.viewer-element .form-button,
.viewer-element .wrapper-front .form-element .btn.btn-primary,
.viewer-element .input-group-btn,
.viewer-element .carousel-caption a.btn,
.viewer-element .article-new .article-new-link,
.viewer-element .outlined-btn.btn,
.viewer-element .btn.btn-primary,
.viewer-element .btn-default-link,
.viewer-element .iframe-preview-menu-btn {
    color: #ffffff;    background-color: #365689;    font-size: 16px;}

.viewer-element .form-button:hover,
.viewer-element .wrapper-front .form-element .btn.btn-primary:hover,
.viewer-element .input-group-btn:hover,
.viewer-element .carousel-caption a.btn:hover,
.viewer-element .article-new .article-new-link:hover,
.viewer-element .outlined-btn.btn:hover,
.viewer-element .btn.btn-primary:hover,
.viewer-element .btn-default-link:hover,
.viewer-element .iframe-preview-menu-btn:hover,
.viewer-element .iframe-preview-menu-btn.is-active {
    background-color: #5387d6;    color: #ffffff;    font-size: 16px;}

/* -----------------------
 CAROUSEL
 ------------------------ */
.viewer-element .carousel-element .swiper-pagination-bullet,
.viewer-element .carousel-indicators li {
    background-color: #365689;
}
.viewer-element .carousel-element .carousel-element-button {
    color: #365689;
}

.viewer-element .carousel-element .swiper-pagination-bullet-active,
.viewer-element .carousel-indicators .active {
    background-color: #5387d6;
}
.viewer-element .page-catalog-details .owl-carousel .owl-prev,
.viewer-element .page-catalog-details .owl-carousel .owl-next,
.viewer-element .page-catalog-details .item-carousel-controls .item-carousel-prev,
.viewer-element .page-catalog-details .item-carousel-controls .item-carousel-next {
    color: #5387d6;
}

/* ------------------------
// COOKIE
  ------------------------ */
.viewer-element body .cc-window.cc-banner {
    color: #121212;    background-color: #edf1f9; }

.viewer-element a.cc-btn.cc-dismiss {
    color: #ffffff;    background-color: #365689;    font-size: 16px ;}

.viewer-element a.cc-btn.cc-dismiss:hover,
.viewer-element a.cc-btn.cc-dismiss:active {
    color: #ffffff;    background-color: #5387d6;    font-size: 16px ;}

/* -----------------------
 BUNDLE - ecommerce
 ----------------------- */
.viewer-element .ck-form-element.ck-form-element--radio a,
.viewer-element .ck-form-element.ck-form-element--checkbox a,
.viewer-element .ck-form-element label sup,
.viewer-element .checkout .checkout-fail .checkout-title,
.viewer-element .checkout-bundle .checkout-pagination a.is-active {
    color: #365689;
}
.viewer-element .ecommercebundle-list.is-loading::after,
.viewer-element .popin-connect .popin-loader::after,
.viewer-element .ecommercebundle-detail.is-loading .ecommercebundle-detail-buy::after,
.viewer-element .checkout-bundle .checkout-loader::after {
    border-top-color: #365689;
}
.viewer-element .ck-form-element.ck-form-element--radio a,
.viewer-element .ck-form-element.ck-form-element--checkbox a {
    border-color: #365689;
}
.viewer-element .noUi-connect,
.viewer-element .ecommercebundle-filters-radio + label::after,
.viewer-element .ck-form-element.ck-form-element--radio input[type=checkbox]:checked + label::before,
.viewer-element .ck-form-element.ck-form-element--radio input[type=radio]:checked + label::before,
.viewer-element .ck-form-element.ck-form-element--checkbox input[type=checkbox]:checked + label::before,
.viewer-element .ck-form-element.ck-form-element--checkbox input[type=radio]:checked + label::before {
    background-color: #365689;
    border-color: #365689;
}
.viewer-element .ecommercebundle-filters-treecat.is-some::after {
    background-color: #365689;
}
.viewer-element .ecommercebundle-filters-treecat.is-all::after,
.viewer-element .ecommercebundle-filters-checkbox + label::after {
    color: #365689;
}

.viewer-element .ecommerce-component .ecommerce-components-connexion-link,
.viewer-element .ecommerce-component .ecommerce-components-cart-link {
    color: #365689;
}
.viewer-element .ecommerce-component [data-header-hassubmenu]::after {
    border-color: #365689 transparent transparent transparent;
}

.viewer-element .ck-flash-message,
.viewer-element .ck-promo .ck-promo-wrapper .ck-promo-valid-btn,
.viewer-element .ck-total .ck-promo-element .ck-promo-valid-btn,
.viewer-element .login .login-btn,
.viewer-element a.ck-btn,
.viewer-element button.ck-btn {
    color: #ffffff;    background-color: #365689;    font-size: 16px;}
.viewer-element .ck-product .ck-product-btn-quantity,
.viewer-element .ecommercebundle-detail .ecommercebundle-detail-quantity-button {
    color: #ffffff;    background-color: #365689;}

.viewer-element .ck-promo .ck-promo-wrapper button:hover,
.viewer-element .ck-promo .ck-promo-wrapper button:focus,
.viewer-element .ck-resume-promo .ck-promo-element button:hover,
.viewer-element .ck-resume-promo .ck-promo-element button:focus,
.viewer-element .ck-total .ck-promo-element button:hover,
.viewer-element .ck-total .ck-promo-element button:focus,
.viewer-element .login .login-btn:hover,
.viewer-element .login .login-btn:focus,
.viewer-element a.ck-btn:hover,
.viewer-element a.ck-btn:focus,
.viewer-element button.ck-btn:hover,
.viewer-element button.ck-btn:focus {
    background-color: #5387d6;    color: #ffffff;    font-size: 16px;}
.viewer-element .ck-product .ck-product-btn-quantity:hover,
.viewer-element .ecommercebundle-detail .ecommercebundle-detail-quantity-button:hover {
    background-color: #5387d6;    color: #ffffff;}

/* ------------------------
// BUNDLE - social network
 ------------------------ */
// social network - mosaic view
.viewer-element .socialnetwork-element .socialnetwork-element-content,
.viewer-element .socialnetwork-element .socialnetwork-element-title {
     font-size: 14px;     color: #777777;}

/* social network - list view */
.viewer-element .socialnetwork-list-loader {
    border-top-color: #365689;
}

.viewer-element .socialnetwork-element .socialnetwork-element-content,
.viewer-element .socialnetwork-element .socialnetwork-element-title {
     font-size: 14px;     color: #777777;}
.viewer-element .socialnetwork-list .socialnetwork-list-button {
     font-size: 16px;      color: #ffffff;         background-color: #365689;
    border-color: #365689;
    }
.viewer-element .socialnetwork-list .socialnetwork-list-button:hover,
.viewer-element .socialnetwork-list .socialnetwork-list-button:focus {
    background-color: #5387d6;
    border-color: #5387d6;
}

/* ------------------------
// ACCORDION
------------------------ */
.viewer-element .accordion_element .panel-title .panel-button {
    font-size: 16px;    color: #365689;}
.viewer-element .accordion_element .panel-title .panel-button:hover {
    color: #5387d6;
}
.viewer-element .accordion_element .panel-body {
    font-size: 16px;    color: #121212;}

/* ------------------------
// NEW HEADER
// NEW HEADER - top header
------------------------ */
/* ------------------------
// NEW HEADER - main header
------------------------ */
    
    
    
    
    
    .viewer-element .header-main .header-main-nav-link {
                    }
    .viewer-element .header-main .header-main-nav-link:focus,
    .viewer-element .header-main .header-main-nav-link:hover,
    .viewer-element .header-main .header-main-nav-link.active {
                    }
                        
.viewer-element body {
            background-position: top center;
}
.pic {margin-top: -100px ;}

.svg path {color: #365689 !important;}
.para {background-attachment: fixed;
height: 766px;}

.viewer-element .form-element .form-group label {
    font-size: 16px;
    color: white !important;
}

.viewer-element .form-button, .viewer-element .wrapper-front .form-element .btn.btn-primary {
color: #ffffff;
    border-color: white;
    background-color: transparent;
    padding: 10px;
    text-transform: uppercase;
}

.viewer-element .form-button, .viewer-element .wrapper-front .form-element .btn.btn-primary:hover {
    border-color: #5387d6;
    background-color: #5387d6;

}

.viewer-element .btn.btn-primary{
  padding: 10px;
    text-transform: uppercase;}

.call-img  {
-moz-box-shadow: 10px 10px 10px 0px #cfcfcf;
-webkit-box-shadow: 10px 10px 10px 0px #cfcfcf;
-o-box-shadow: 10px 10px 10px 0px #cfcfcf;
box-shadow: 10px 10px 10px 0px #cfcfcf;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#cfcfcf, Direction=134, Strength=10);}

.call-img img {margin-left: -100px;}

.bout-zone {margin-top: -219px;
    margin-right: 300px;
    margin-bottom: 125Px;
}

/* -------- écran 110 zoom -------- */ 

 @media all and (min-width: 1309px) and (max-width: 1366px) {
   
   
   .head {margin-left: 0px !important;}
   
  }

/*_________ Responsive tablette PRO _________ */


@media all and (min-width: 1024px) and (max-width: 1308px) {
  
  .head h1 strong span {font-size: 32px !important;}
  .head h1 {font-size: 28px !important;}
  .head {margin-left: 0px !important;}
  
  .log img {width: 90% !important; height: auto !important;}
  
  .form {margin-right: 0px !important;}
  .bout-zone {
    margin-top: -159px !important;}
}



/*_________ Responsive tablette _________ */


@media all and (min-width: 768px) and (max-width: 1023px) {
  
    .para {background-attachment: inherit !important;}
   
  .log img {width: 80% !important; height: auto !important;}
    .head h1 strong span {font-size: 32px !important;}
  .head h1 {font-size: 28px !important;}
  .head {margin-left: 0px !important;}
  .num {margin-left: -30px !important;}
   .log {
    margin-top: 30px !important;}
    .form {margin-right: 0px !important;}
  
 .tab-form {
    margin-top: -30px !important;}
  .pic {
    margin-top: -40px !important;}
  .pic img  {width: 30% !important;
    height: auto !important;}
  .pic p {font-size: 12px !important;}
  .viewer-element h2 {
    font-size: 26px !important;}
  
  .bout-zone {
    margin-top: -145px !important;
    margin-right: 100px !important;}
  
  .foot4 {margin-right: 20px !important;}
 .foot3 {
    margin-right: 100px !important;
    margin-left: 100px !important;}
}

/************ Responsive telephone *************/

@media screen and (max-width: 767px) {
  
     .para {background-attachment: inherit !important;  height: 1366px !important;}
.num {
    margin-left: 10px !important;
    margin-right: 5px !important;}
    .head {margin-left: 0px !important; margin-top: 100px !important;
    margin-bottom: 50px !important;}
  .head h1 {
    font-size: 30px !important;}
      .head h1 strong span {font-size: 26pt !important;}
  .form {padding-right: 20px !important; padding-left: 20px !important; margin-right: 0px !important;}
  .call-img {display: none !important;}
    .viewer-element h2 {
    font-size: 26px !important;}
  
  .titre-ac {text-align: center !important; margin-top: -50px !important; margin-left: 10px !important; 
  margin-right: 10px !important;}
  .text-ac {margin-left: 0px !important; margin-right: 0px !important;}
  
  .tab-form {margin-top: 0px !important;}
  
  .pic {margin-top: 0px !important;}
  
  .bout-zone {display: none !important; }
  
  .remerciement {padding-left: 10px !important; padding-right: 10px !important;}
}