﻿/* ---------------------------- */
/*		    Responsive  		*/
/* ---------------------------- */


@media screen and (max-width: 1170px) {
    /*img {max-width: 100%;}*/
    .container {max-width: 100%; }
    
    /*HOME*/
    #s_top h1 {font-size:40px;}
    .txtanim p.t32 {font-size:20px;}
    
    .bloc-type1 {padding:30px;}
    #s_pr .txt {padding:0 15px;}

    /*connecte*/
    .banniere-top .bg {display:none;}
}

@media screen and (max-width: 992px) {
    /*HEADER*/
    header {z-index: 101;}
    .menu-top {background:#003760; position: fixed; top:0; left:-100%; width:100%; height:100%; z-index: 99999; transition:left 350ms ease; padding:35px 15px 0;}
    .hamburger {display:block; position: fixed; top:10px; left:50%; transform: translateX(-50%); z-index: 999999;}
    .menu-active .menu-top {left:0;}
    .menu-active .hamburger {top:0;}
    .menu-top > li > a {text-align: center; padding:12px 16px;}
    .menu-top li > a::before {display:none;}
    .bl--ssmenu {visibility: visible; opacity: 1; position: relative; padding:10px 0;}
    .bl--ssmenu .container {padding-right:10px; padding-left:10px;}
    .bl--ssmenu .container > div:first-child {display:none;}
    .bl--ssmenu .row {margin-right: -5px; margin-left:-5px;}
    .bl--ssmenu .cat.col-6 {padding-right:5px; padding-left:5px; margin-bottom:10px;}
    .bl--ssmenu--txt .cat--link {height:36px;}
    .bl--ssmenu--txt .cat a {font-size: 14px;}

    header {height:70px; padding-top:10px;}
    .tel-top {display:none;}
    header .logo img {width:auto; height:50px;}
    body:not(.home) #global {padding-top:70px;}

    /*HOME*/
    #s_pr .titre-produit {margin-bottom:20px;}
    #s_pr .titre-produit > div:first-child {margin-right:30px;}
    
    /*MARQUE*/
    #s_marque .b_img {margin:30px 0;}
    #s_marque .b_img > div {text-align: center; margin-right: 40px;}

    /*connecte*/
    .bloc-demi .item {max-width: 100%;}
    .bloc-demi .item .img {text-align: center;}
    .bloc-cee {margin-top:80px;}
}

@media screen and (max-width: 768px) {

}

@media screen and (max-width: 767px) {    
    /*FOOTER*/
    footer {padding:30px 0;  background:#052243 url(../img/map-800.png) center center no-repeat; background-size:cover;}
    
    /*HOME*/
    #s_top {padding-top:70px; min-height:600px;}
    #s_top h1 {font-size:30px;}
    .header--list p.t24 {font-size:20px;}
    .list--check {font-size:18px;}
    .list--check li {padding-left:40px; margin-bottom: 20px;}
    .list--check li::before {width:30px; height:30px;}
    
    .item--distri .b_logo, .item--distri h3 {text-align: center;}
    .item--distri img {max-width: 100%; height:auto;}
    .item--distri .txt {margin-left:0;}

    /*connecte*/
    .banniere-top {padding:24px;}
    .bloc-demi .item .img img {max-width: 500px; width:100%; height:auto;}
    .img-fit {height: 250px;}
    
}

@media screen and (max-width: 576px) {
    h1 {font-size:34px;}
    .t32, .titre--4 {font-size:24px;}
    .t24, h3 {font-size:20px;}
    .t18 {font-size:16px;}
    .titre--2 {font-size:20px; padding-left:70px; margin-left:0; margin-bottom:30px;}
    .titre--2::before {width:51px; height:45px;}
    
    .bloc-type1, .bloc-type2 {padding:15px;}
    
    /*HOME*/
    .logo_bt {left:calc(100% - 118px);}
    .logo_vi {right:calc(100% - 180px);}

    #s_pr .titre-produit > div:first-child {margin:0 0 20px;}
    #s_pr .b_btn > div + div {margin:15px 0 0;}
    #s_pr .bloc-type1 {padding:15px 0;}
    #s_pr .bloc-type1.bloc-nopr {padding:15px;}
    
    /*PRODUIT*/
    table {font-size: 14px;}
    table tr td {padding:10px;}
    .b_car .row > div:first-child {margin-bottom:30px;} 
    .produit .list-picto img {/*width:50%; height:auto;*/}

    
    /*FAQ*/
    #b_faq .item {padding-left: 60px;}
    #b_faq .item::before {top:15px; left:15px;}
}

@media screen and (max-width: 480px) {
    .py60 {padding-top:30px; padding-bottom:30px;}
    
    /*HOME*/
    #s_top .titre--1, .ct-txt h1 {font-size:24px;}
    .header--list p.t24, .txtanim p.t32 {font-size:18px;}
    .list--check {font-size:16px;}
    
    /*MARQUE*/
    #s_marque .b_img {margin:30px 0;}
    #s_marque .b_img > div {margin-right: 0;}
    #s_marque .b_img > div.img-decal {margin:0;}
    #s_marque .b_img img {max-width: 100%; height: auto;}

    /**/
    .pos-cee > img {width:180px; height:auto;}
}

@media screen and (max-width: 479px) {

}

@media screen and (max-width: 380px) { 
    .btn {width:100%;}
    
}

@media screen and (max-width: 320px) {
	.btn.btn-pdf {white-space:normal; padding:5px 1rem;}
}

@media screen and (min-width: 1366px) and (max-height: 700px) and (min-height: 600px) {
    #s_top h1 {font-size:45px;}
    #s_top .t32 {font-size:26px;}
}