﻿@CHARSET "utf-8";

/* PREPARATION RESPONSIVE */

/* PC */
@media all and (min-width:781px) {
	#bandeau .menu-wrapper  {display:block !important; height:30px !important;}
    #bandeau-mobile {display:none;}
}

@media all and (max-width:1260px) {

    /* Bandeau */
	#bandeau .global {padding:0px 10px;}
    
	
    
	.iframe-responsive-wrapper {position: relative;}
	#centre .iframe-responsive-wrapper .iframe-ratio {   display: block;    width: 97%;   height: auto;}
	.iframe-responsive-wrapper iframe{position: absolute;top: 0;left: 0;width: 97% !important; height: 97% !important;}
	#accueil-mosaiques .accueil-mosaique:first-child , #accueil-mosaiques .accueil-mosaique:nth-child(3), #accueil-mosaiques .accueil-mosaique:nth-child(4),#accueil-mosaiques .accueil-mosaique:nth-child(5),#accueil-mosaiques .accueil-mosaique:nth-child(6), #accueil-mosaiques .accueil-mosaique {padding:20px 20px; !important;}
	
    video {width:100%; height:auto;}
   .submit input:hover, input.submit:hover {background:#000000; color:#ffffff;  border:1px solid #fff;}
 }

@media all and (max-width:1170px) {

	#bandeau.sm #menu .menu-element {margin-left: 25px;}
	#menu{padding-top: 20px; !important;}
	
			#bandeau .menu-wrapper { float: none;}
	}

@media all and (max-width:1065px) {

			#bandeau .menu-wrapper { float: right;}
		#bandeau #menu {padding-top: 20px;text-align:center;}
		#bandeau.sm #menu {padding-top: 5px;}
		#bandeau.sm #menu .menu-element {margin-left:5px;}
	}

@media all and (max-width:1090px) {

    /* Bandeau */
    #bandeau .titre {}
    #bandeau.sm .menu-wrapper {}
    

    /* Menu */
    #centre .global {padding:15px 20px;}

	
    #parallax-window-9 .global .cadreinfos .info {margin-left:2%; }
	
}
@media all and (max-width:990px) {

	#bandeau #logo {margin-left:0;}
	
	#bandeau #menu {text-align:center;}
	#bandeau #menu .menu-element {margin-left:30px;}
	#bandeau.sm #menu {height:30px; padding:0;}
	#bandeau.sm #menu .menu-element > a > span, 
	#bandeau.sm #menu .menu-element > span {height:30px;}
}

@media all and (max-width:956px) {
    #parallax-window-9 .global .cadreinfos .info {width:24%; }
}	

@media all and (max-width:910px) {
	
    .global {padding:0 20px;}
	#bandeau #menu .menu-element {margin-left: 15px;}
        
    #centre .global {padding:15px 20px;}
    #pied .col {margin:0 5px 10px;}
    
    #centre #parallax-window-9 .cadreinfos {text-align:left;}
    #centre #parallax-window-9 .cadreinfos .tel {border:none; padding-right:0; margin-left:62px;}

}
@media all and (max-width:840px) {
	
	#bandeau #menu .menu-element {margin-left:15px;}
	    
}

@media all and (max-width:810px) {
    
    #bandeau.sm #menu .menu-element {margin-left:10px;}
     
    .global {padding:0 10px;}
        
    #centre .global {padding:15px 10px;}
    
    #pied .col {margin:0 5px 10px; min-width:100%;}

}


/* Tablette */
@media all and (max-width:780px) {

    body {width:100%; font-size:16px;}
    #centre img{ display: inherit;margin:0px}
	#centre table {padding:0; border-spacing : 0; border-collapse : collapse;}
    #centre table td {display: inline-block; width:100%;padding:0;}
	#centre table td img { margin: 0 auto;}

    #global {min-width:inherit; margin:0 auto; width:auto; padding-top:0px;}


    /* Droite */
    #droite {display:none;}

    /* Gauche */
    #gauche {display:none;}

    /* Centre */
    #centre {width:auto; margin:0; padding-top:0px;}
    #centre .global .contenu-wrapper {padding-top:0px;}

    /* Fil d'ariane */
    #ariane {display:none;}

    /* Contenu */
    #centre img {max-width:100%; height:auto; width:auto;}
	
	

	
    /* Formulaire */
    input.bouton {height:38px;}
    #centre .input-text,
    #centre input {width:97%;height:30px;}
    #centre .submit input, 
    #centre input.submit,
    #centre .bouton, 
    #centre #contenu a.bouton {height:35px;}
    #centre select {height:30px; }
    #centre textarea,
    #centre textarea {width:97% !important; }
    #centre .form140 {float:none; text-align:left;}
	.cadreinfos > span {padding:0;}

    #centre .submit { margin-left:0;}

    /* Menu mobile */

    /* Bandeau */
	#bandeau {position: relative;left: unset;top: unset; height:auto; border-bottom:0;}
	#bandeau #bandeau-conteneur .global {padding:0;}
	#bandeau-contact {margin:0; height:auto; min-height:85px;}
		
	/* Menu mobile */
    #bandeau-mobile { min-width:inherit; width:100%;  min-height:15px;height:inherit;  background:#ffffff; }
    
	#bandeau-mobile .menu-icon {padding: 5px 0px 0px 0px;}
	#bandeau-mobile .menu-icon a.enseigne {color: #fff; display: block; float: right; padding-right: 15px; text-decoration:none;}
   
   
    #bandeau-mobile #bandeau-mobile-icones {margin:5px 15px 0;width:auto;min-width:435px; float:right; clear:both; }

	#bandeau-mobile-telephone {position:relative; padding:0 5px; float:right; color:#fff; background: #39373a; width:auto; min-width:190px; height:34px; margin-left:40px; font-size:22px; font-weight:700;  display: flex; flex-direction: column;justify-content: center; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -khtml-border-radius: 3px;  }

	#bandeau-mobile-telephone span.fa-stack {width:34px; height:34px; margin:0px; padding:0px; line-height:34px; position:absolute; top:0px; left:0px; }
	#bandeau-mobile-telephone i.fa-circle {font-size: 29px;}
	#bandeau-mobile-telephone i.fa-phone {color:#39373a; font-size: 23px;}
	#bandeau-mobile-telephone .numero {margin-left:32px; letter-spacing:1px;}
	#bandeau-mobile-telephone a,#bandeau-mobile-telephone a:visited, #bandeau-mobile-telephone a:hover {text-decoration:none; color:#fff;}
	
	/* Adresse de contact */
	#bandeau-mobile-mail {position:relative; float:right; padding:0 5px 0 6px; margin-left:40px; height:35px; border-radius: 16px; -moz-border-radius: 16px; -webkit-border-radius: 16px; -khtml-border-radius: 16px;   -moz-box-shadow: 0px 0px 2px #BCBCBC; -webkit-box-shadow: 0px 0px 2px #BCBCBC;  box-shadow: 0px 0px 2px #BCBCBC;}
	#bandeau-mobile-mail a,
	#bandeau-mobile-mail a:visited,
	#bandeau-mobile-mail:hover a {text-decoration:none;}
	#bandeau-mobile-mail i.fa-envelope-o {color:#39373a;height: 34px; font-size: 25px; display: flex;flex-direction: column;justify-content: center; }
	#bandeau-mobile-mail:hover {background:#39373a;}
	#bandeau-mobile-mail:hover .fa-envelope-o {color:#fff;}

	
	/* bas */
	#bandeau-mobile-bas {position: relative; z-index: 45; clear:both; background:#ffffff; border-bottom:5px solid #ae0011;  cursor:pointer; }
	#bandeau-mobile-bas > span {line-height: 45px; padding:5px 0px 2px 10px; display: block; font-size: 26px;  width: auto; height: 40px; text-transform: uppercase; text-align: center; color: black; text-decoration: none;}
	#bandeau-mobile-bas i {display:block; float:left; fcolor:#fff; font-size:38px;}
	
   
	
    /* Menu mobile */
	
	#bandeau .menu-wrapper {width:100%; background:#ffffff; padding:5px 0; display:none; z-index:100 ;border-bottom:1px solid #ccc;}
	#bandeau #menu #menu-conteneur {float:none;}
	#bandeau #menu {height:auto; padding:0;}
	#bandeau #menu-conteneur {padding-bottom:0px; text-align:left;}
	#bandeau #menu-conteneur .global {padding:0;}
	
	#bandeau #menu .menu-element {margin:0px 0 5px; padding:5px 7px 0; display:block; color:#01153a; font-size:16px;}
	#bandeau #menu .menu-element > a > span, 
	#bandeau #menu .menu-element > a:visited > span, 
	#bandeau #menu .menu-element > span {height:auto; padding:0px; padding-top:10px; text-align:left;display:block; border-top: 1px solid #eceaea; color:#01153a; font-size:16px; font-weight: 100; font-family:'Roboto'; text-transform:none;}
	#bandeau #menu .menu-element:first-child > a > span,
    #bandeau #menu .menu-element:first-child > span { padding-top:0px;border-top: none;}
    
    #bandeau #menu .menu-element.selected > span,
    #bandeau #menu .menu-element.selected > a > span,
    #bandeau #menu .menu-element.selected > a:visited > span,
    #bandeau #menu .menu-element:hover > span,
    #bandeau #menu .menu-element:hover > a > span,
  	#bandeau #menu .menu-element:hover > a:visited > span {border:none; color:#ae0011; font-weight: 100; }
         
	#bandeau #menu .smenu-conteneur {border-bottom:none; width:calc(100% - 40px); padding:0 20px; display:block !important; position:relative; left:0; top:0; background:none; min-height: 0; }
	
    #bandeau #menu .smenu-conteneur .global {padding: 0 !important;} 
	#bandeau #menu .smenu-centre {border:none; margin:0; width:auto;}
	#bandeau #menu .ssmenu-conteneur-images {display:none !important;}
	#bandeau #menu .smenu-centre-menus {float:none; width:auto;}
	#bandeau #menu .smenu-conteneur .smenu-element {display:block; width:auto; margin:6px 0; line-height:17px;}
	#bandeau #menu .smenu-element > a > span, 
	#bandeau #menu .smenu-element > span {padding:0px; display:block !important; border:none;width:auto; text-decoration:none; font-size:0.85em; text-transform: none;  text-align:left; color:#01153a; }
	#bandeau #menu .smenu-element > a > span::before,
	#bandeau #menu .smenu-element > span::before {content:""; display:none;}
	#bandeau #menu .smenu-element.selected > span,
   	#bandeau #menu .smenu-element.selected > a > span,
   	#bandeau #menu .smenu-element.selected > a:visited > span,
   	#bandeau #menu .smenu-element:hover > span,
   	#bandeau #menu .smenu-element:hover > a > span,
    #bandeau #menu .smenu-element:hover > a:visited > span {text-decoration:none; color:#ae0011;}

    #bandeau #menu .ssmenu-element {}
    #bandeau #menu .ssmenu-element a,
    #bandeau #menu .ssmenu-element a:visited {font-size:0.8em; text-decoration:none; padding-left:7px;}
	#bandeau #menu .ssmenu-element a:hover {text-decoration:underline;}
    

    #centre table {float:none !important; margin:5px auto; border:none !important; width:100% !important;}
    
    #centre #parallax-window-1 h1 {font-size:35px !important;}
    
    #parallax-window-3 table {float:none !important; margin:5px auto; border:none !important; width:100% !important; text-align:center;}
	#centre #parallax-window-3 td {padding:0;}
	

    #centre #parallax-window-9 .global .cadreinfos {height:auto; padding:0px;}
    #centre #parallax-window-9 .global .cadreinfos .info {float: none; margin: 0 auto; padding-left: 40px; width: auto;}
   
    #centre #parallax-window-9 .cadreinfos .tel {margin-left:15px; display:block;}
    #centre #parallax-window-9 .cadreinfos .adresse{margin-left:15px; display:block; width: 650px !important;} 
    
    #centre #parallax-window-9 .cadreinfos .adresse{max-width: 650px;}

    #centre #parallax-window-9 table tr td, #centre #parallax-window-9 table tr td:last-child {text-align:left; }
    
    #centre p {margin-left:10px;}
}

@media all and (max-width: 615px) {  	
	#renseignement-titre {display:block;}
	#renseignement-titre::after {display:none;}
	#renseignement-contenu {margin-left:0; display:block;}
	#renseignement-telephone {width:calc(100% - 75px);}	
}

@media all and (max-width: 605px) {
	
	#gabarit-gauche-image,
	#gabarit-droite-image {width:220px; margin:0px auto 10px; float:none;}
	#accueil-mosaiques .accueil-mosaique:first-child, #accueil-mosaiques .accueil-mosaique:nth-child(3),#accueil-mosaiques .accueil-mosaique:nth-child(4),#accueil-mosaiques .accueil-mosaique:nth-child(5), #accueil-mosaiques .accueil-mosaique:nth-child(6), #accueil-mosaiques .accueil-mosaique {padding: 27px 0};
}


@media all and (max-width:480px) {
    #centre img {}
    #bandeau-mobile #bandeau-menu {float:left;}
	#bandeau-icones{margin-top:0px !important;}
	#bandeau-telephone{margin: auto;}
    #parallax-window-1 p {margin:0;}

    #back-to-top {width:55px; height:58px;}
    #back-to-top i {width:55px; line-height:50px;}
    
    
    
	#centre h1 {margin:10px 0 10px 0px;}
	#centre h2 {margin:10px 0 20px 5px;}
	#centre h3 {margin-left:10px;}
	#centre p {margin-left:10px;}
	#centre ul {margin-left:0px;}	
	#centre #parallax-window-1 h1 {font-size:28px !important;}
	
}

/* Smartphone */
@media all and (max-width:435px) {	
	#bandeau #logo{margin-top: 5px;}
    #centre {padding-top:0px;}
    
    #bandeau-mobile #bandeau-mobile-icones {min-width:unset; width:210px; float:none; margin:0 auto;}
    #bandeau-mobile #bandeau-mobile-mail {width: 26px; margin: 5px auto; float:none;}
    #bandeau-mobile #bandeau-mobile-telephone {margin: 0 auto; float:none;}
    
    
	#centre #parallax-window-9 .cadreinfos .adresse .adressecomplete{font-size: 20px;}
}

@media all and (max-width:385px) {

	#accueil-mosaiques .accueil-mosaique {max-width:280px; }
	#accueil-mosaiques .accueil-mosaique img {width:100%; height:auto;}
	
	#centre img {float:none !important;    margin: 10px auto !important;}
	
	#centre #gabarit-gauche-image img,
	#centre #gabarit-droite-image img {margin:0 !important;}
}

@media all and (max-width:320px) {	

}
