/*

font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Montserrat', sans-serif;


@media (min-width: 992px) and (max-width: 1199px)  {}
@media (min-width: 768px) and (max-width: 991px)  {}
@media (min-width: 576px) and (max-width: 767px)  {}
@media (max-width: 575px) {}
@media (min-width: 451px) and (max-width: 767px)  {}
@media (max-width: 450px) {}

*/






/*******************************************************************************************************/
/*                                                                                                     */
/*      BASE                                                                                           */
/*                                                                                                     */
/*******************************************************************************************************/


html {
	overflow-x:hidden;
	padding: 0 !important;
	margin:0px !important;
}

body {padding:0; font-size:14px;}

a:hover,
a:active, 
a:focus {outline:none;}
*:focus {outline: none;}

.slick-slide {display: none; float: left; height: 100%; min-height: 1px; margin:auto;}

.btn-form {color: #fff; background-color: #de6126; width:125px;}
.btn-form:hover,
.btn-form:focus,
.btn-form.focus,
.btn-form:active,
.btn-form.active,
.open > .dropdown-toggle.btn-form {color: #fff; background-color: #337ab7; text-decoration:none;}

.btn-theme {color: #fff; border:2px solid #FFF; background-color: transparent; width:125px;}
.btn-theme:hover,
.btn-theme:focus,
.btn-theme.focus,
.btn-theme:active,
.btn-theme.active,
.open > .dropdown-toggle.btn-theme {color: #fff; background-color: #111; text-decoration:none;}

.tooltip {z-index: 999;}
.tooltip.in {filter: alpha(opacity=100); opacity: 1;}
.tooltip.bottom {padding: 11px 0 0 10px; margin-top: 6px;}
.tooltip.top {padding: 14px 0; margin-top: -25px;}
.tooltip-inner {padding: 6px 24px; color: #fff; text-align: center; text-decoration: none; border-radius: 3px;}
.tooltip-arrow {position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid;}
.tooltip.bottom .tooltip-arrow {top: -3px; left: 50%; margin-left: 20px; border-width: 0 5px 5px; border-bottom-color: #000;}
.tooltip.top .tooltip-arrow {bottom: 5px; left: 50%; margin-left: -5px; border-width: 5px 5px 0; border-top-color: #000;}


/*
a.anchor {
    display: block;
    position: relative;
    top: 300px;
    visibility: hidden;
}
*/


.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.T10 {padding-top:10px;}
.T20 {padding-top:20px;}
.T30 {padding-top:30px;}
.T40 {padding-top:40px;}
.T50 {padding-top:50px;}
.T60 {padding-top:60px;}
.T70 {padding-top:70px;}
.B10 {padding-bottom:10px;}
.B20 {padding-bottom:20px;}
.B30 {padding-bottom:30px;}
.B40 {padding-bottom:40px;}
.B50 {padding-bottom:50px;}
.B60 {padding-bottom:60px;}

@font-face {font-family: 'slick'; font-weight: normal; font-style: normal; src: url('fonts/slick.eot'); src: url('fonts/slick.eot?#iefix') format('embedded-opentype'), url('fonts/slick.woff') format('woff'), url('fonts/slick.ttf') format('truetype'), url('fonts/slick.svg#slick') format('svg');}


@media (max-width: 767px) {
	.tooltip {visibility: hidden;}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	body {cursor:pointer;}
	.tooltip {visibility: hidden;}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	body {cursor:pointer;}
	.tooltip {visibility: hidden;}
}

@media only screen and (max-device-width: 414px) and (max-device-height: 736px) {
	body {cursor:pointer;}
	.tooltip {visibility: hidden;}
}



	a#details {display: block; position: relative; top: -100px; visibility: hidden;}





/*******************************************************************************************************/
/*                                                                                                     */
/*      MENU                                                                                           */
/*                                                                                                     */
/*******************************************************************************************************/


.section-menu {position:fixed; top:0px; left:0; width:100%; height:80px; background-color:#000; border-bottom:#ddd 1px solid; z-index:1000;}
.section-menu.shadow {box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);}  

.section-menu .TMSO {padding-top:5px;}
.section-menu .TMSO .logo {float: left; margin-right: 20px; padding-top: 2px;}
.section-menu .TMSO .logo img {height:65px;}
.section-menu .TMSO .contact {font-size:1.5rem; font-weight:bold; color: #fff; padding-top: 20px;}
.section-menu .contact-xs {display: none;}

.section-menu .nav {float:right; height:80px;}

.section-menu .dashboard {padding: 0;}
.section-menu .dashboard .hamburger {background-color:#bf1e2e; width: 75px; height: 79px;  display: flex; align-items: center; justify-content: center;}
.section-menu .dashboard .hamburger .fa {font-size:30px; color: #fff;}

@media (min-width: 576px) and (max-width: 767px)  {
	.section-menu .TMSO .logo {float: left; margin-right: 15px; padding-top: 5px;}
	.section-menu .TMSO .logo img {height:55px;}
	.section-menu .TMSO .contact {font-size:1.25rem; font-weight:bold; color: #fff; padding-top: 20px;}
}

@media (min-width: 400px) and (max-width: 575px)  {
	.section-menu .TMSO .logo {float: left; margin-right: 12px; padding-top: 12px;}
	.section-menu .TMSO .logo img {height:45px;}
	.section-menu .TMSO .contact {font-size:0.9rem; font-weight:bold; color: #fff; padding-top: 26px;}
}

@media (max-width: 399px)  {
	.section-menu .TMSO .logo {float: left; margin-right: 12px; padding-top: 18px;}
	.section-menu .TMSO .logo img {height:35px;}
	.section-menu .TMSO .contact {font-size:0.75rem; font-weight:bold; color: #fff; padding-top: 28px;}
}



/*******************************************************************************************************/
/*                                                                                                     */
/*      HOMEPAGE                                                                                       */
/*                                                                                                     */
/*******************************************************************************************************/


#homepage .intro {height:100vh; overflow:hidden; background-image:url(/assets/00_images/home-top-inverse.webp); background-size:cover; background-repeat:no-repeat; background-position:center; text-align:center;}
#homepage .intro .box {position:absolute; bottom:120px; text-align:left; width:100%; padding: 15px 15px 10px 75px; --animate-duration: 3s;}
#homepage .intro .box h1 {font-size:4.25rem; font-weight:bold; line-height: 3.95rem; font-family: 'Montserrat', sans-serif; text-transform:uppercase; color: rgba(255, 255, 255, 1.0); background-color: rgba(32, 123, 224, 0.5); padding: 20px;}
#homepage .intro .box h2 {font-size:3.00rem; font-weight:bold; font-style: italic; font-family: 'Open Sans Condensed', sans-serif; line-height: 2rem; padding: 20px;}
#homepage .intro .box h2 a {color:#ffcc33; text-decoration: none;}

#homepage .intro .suite {position:absolute; bottom:1rem; padding-left: 115px; xleft:50%; xtransform: translate(-50%, -50%);}
#homepage .intro .suite .fa {font-size:3.00rem; line-height:0; color:#fff;}
#homepage .intro .suite.animate__animated.animate__bounce {--animate-duration: 4s;}

#homepage a#explorez {display: block; position: relative; top: -75px; visibility: hidden;}

#homepage .arguments {background-color: #000; background-image:url(/assets/00_images/waves.png); background-repeat: repeat-x; border-bottom:1px solid #fff; border-top:1px solid #fff; padding: 30px 0; color: #fff; display: flex; align-items: center; justify-content: center; min-height: 350px;}
#homepage .arguments .image {text-align: center; display: flex; align-items: center; justify-content: center;}
#homepage .arguments .image img {width: 150px;}
#homepage .arguments .texte {padding: 0;}
#homepage .arguments .texte h2 {font-size: 50px; font-family: 'Open Sans Condensed', sans-serif; color: #ccc;}
#homepage .arguments .texte h2 .important {color: #fff;}
#homepage .arguments .texte h4 {font-size: 18px; font-style: italic;}
#homepage .arguments .texte .detail {padding: 20px 0 30px 0; color: #ccc;}
#homepage .arguments .texte .fleche {text-align: right; padding-right: 35px;}
#homepage .arguments .texte .fleche .fa {font-size: 25px; color: #bf1e2e;}

#homepage .theme {height:700px; background-size:cover; background-repeat:no-repeat; background-position:center 60px; background-attachment:fixed;}

#homepage .theme.avantages {background-image:url(/assets/00_images/home-avantages.webp);}
#homepage .theme.produits {background-image:url(/assets/00_images/home-types.webp);}
#homepage .theme.installation {background-image:url(/assets/00_images/home-installation.webp);}
#homepage .theme.projets {background-image:url(/assets/00_images/home-projets.webp);}

#homepage .theme .description {padding: 30px 50px;}
#homepage .theme .description h3 {text-align:left; font-size:90px; color:#fff; font-weight:bold; font-family: 'Montserrat', sans-serif; margin-bottom: 0; opacity:0.85;}
#homepage .theme .description .resume {font-family: 'Open Sans Condensed', sans-serif; font-size:36px; line-height:46px; color:#fff; width: 500px;}
#homepage .theme .description .bouton {margin-top:50px;}
#homepage .theme .description .bouton .btn {font-family: 'Open Sans Condensed', sans-serif; font-size:15px; font-weight:bold; color:#fff;}



@media (min-width: 992px) and (max-width: 1199px)  {
	#homepage .arguments {padding: 30px 0; min-height: 325px;}
	#homepage .arguments .image img {width: 150px;}
}

@media (min-width: 768px) and (max-width: 991px)  {
	#homepage .arguments {padding: 30px 0; min-height: 300px;}
	#homepage .arguments .image {text-align: left;}
	#homepage .arguments .image img {width: 125px;}
}

@media (min-width: 576px) and (max-width: 767px)  {
	#homepage .intro {height:100vh; xbackground-position:top left;}
	#homepage .theme a#details {top: 0px;}
	
	#homepage .arguments {padding: 40px 0; min-height:inherit; height:auto; display: inherit; background-position: center;}
	#homepage .arguments .image {text-align: center; display: inherit;}
	#homepage .arguments .image img {width: 90px;}
	#homepage .arguments .texte h2 {font-size: 40px; text-align: center; padding-top: 15px;}
	#homepage .arguments .texte h4 {font-size: 18px; text-align: center; padding: 20px 15px 15px 15px;}
	#homepage .arguments .texte h4 .fa {font-size: 21px;}
	#homepage .arguments .texte .detail {padding: 20px 20px 10px 20px; text-align: justify;}
	#homepage .arguments .texte .fleche {text-align: center; padding:0;}
	#homepage .arguments .texte .fleche .fa {font-size: 35px;}
	
	#homepage .theme {height:700px; background-size:cover; background-repeat:no-repeat; background-position:center 60px; background-attachment:fixed; display: flex; align-items: center; justify-content: center;}
	#homepage .theme .description {padding: 30px 50px;}
	#homepage .theme .description h3 {text-align:center; font-size:66px;}
	#homepage .theme .description .resume {text-align:center; font-size:36px; line-height:46px; width:auto;}
	#homepage .theme .description .bouton {text-align: center;}
}

@media (min-width: 576px) and (max-width: 767px)  {
}

@media (max-width: 575px) {
	#homepage .intro {height:100vh; xbackground-position:top left;}
	#homepage .intro .suite .part2 .fa {font-size:50px;}
	#homepage .theme a#details {top: 0px;}
	
	#homepage .arguments {padding: 40px 15px; min-height:inherit; height:auto; display: inherit; background-position: center;}
	#homepage .arguments .image {text-align: center; display: inherit;}
	#homepage .arguments .image img {width: 75px;}
	#homepage .arguments .texte {padding: 15px;}
	#homepage .arguments .texte h2 {font-size: 40px; text-align: center; padding: 0px 15px 0 15px;}
	#homepage .arguments .texte h4 {font-size: 18px; text-align: center; padding: 20px 15px 15px 15px;}
	#homepage .arguments .texte h4 .fa {font-size: 21px;}
	#homepage .arguments .texte .detail {padding: 20px 40px 10px 40px; text-align: center;}
	#homepage .arguments .texte .fleche {text-align: center; padding:0;}
	#homepage .arguments .texte .fleche .fa {font-size: 35px;}

	#homepage .theme {height:700px; background-size: auto ; background-position:center top; background-attachment: inherit; display: flex; align-items: center; justify-content: center;}
	#homepage .theme .description {padding: 30px 50px;}
	#homepage .theme .description h3 {text-align:center; font-size:20px;}
	#homepage .theme .description .resume {text-align:center; font-size:36px; line-height:46px; width:auto;}
	#homepage .theme .description .bouton {text-align: center;}
}


/* Éléments entête */

@media (min-width: 768px) and (max-width: 991px)  {
	#homepage .intro .box {bottom:4.75rem; padding: 15px 15px 10px 50px;}
	#homepage .intro .box h1 {font-size:3.40rem; line-height: 3.20rem; padding: 20px; margin-bottom: 0.50rem}
	#homepage .intro .box h2 {font-size:2.40rem; line-height: 2rem; padding: 10px 20px 20px 20px;}
	#homepage .intro .suite {bottom:1rem; padding-left: 90px;}
	#homepage .intro .suite .fa {font-size:2.75rem;}
}

@media (min-width: 700px) and (max-width: 767px)  {
	#homepage .intro .box {bottom:3.60rem; padding: 15px 15px 10px 45px;}
	#homepage .intro .box h1 {font-size:3.00rem; line-height: 3.00rem; padding: 20px; margin-bottom: 0.50rem}
	#homepage .intro .box h2 {font-size:2.40rem; line-height: 2rem; padding: 10px 20px 20px 20px;}
	#homepage .intro .suite {bottom:1rem; padding-left: 80px;}
	#homepage .intro .suite .fa {font-size:2.25rem;}
}

@media (min-width: 600px) and (max-width: 699px)  {
	#homepage .intro .box {bottom:3.40rem; padding: 15px 15px 10px 40px;}
	#homepage .intro .box h1 {font-size:2.70rem; line-height: 2.70rem; padding: 20px; margin-bottom: 0.40rem}
	#homepage .intro .box h2 {font-size:2.40rem; line-height: 2rem; padding: 10px 20px 20px 20px;}
	#homepage .intro .suite {bottom:1rem; padding-left: 80px;}
	#homepage .intro .suite .fa {font-size:2.00rem;}
}

@media (min-width: 500px) and (max-width: 599px)  {
	#homepage .intro .box {bottom:3.40rem; padding: 15px 15px 10px 40px;}
	#homepage .intro .box h1 {font-size:2.70rem; line-height: 2.70rem; padding: 20px; margin-bottom: 0.35rem}
	#homepage .intro .box h2 {font-size:2.40rem; line-height: 2rem; padding: 10px 20px 20px 20px;}
	#homepage .intro .suite {bottom:1rem; padding-left: 80px;}
	#homepage .intro .suite .fa {font-size:2.00rem;}
}

@media (min-width: 400px) and (max-width: 499px)  {
	#homepage .intro .box {bottom:3.25rem; padding: 15px 15px 10px 0px;}
	#homepage .intro .box h1 {font-size:2.70rem; line-height: 2.70rem; padding: 20px; margin-bottom: 0.30rem}
	#homepage .intro .box h2 {font-size:2.40rem; line-height: 2rem; padding: 10px 20px 20px 20px;}
	#homepage .intro .suite {bottom:1rem; padding-left: 40px;}
	#homepage .intro .suite .fa {font-size:2.00rem;}
}

@media (min-width: 350px) and (max-width: 399px)  {
	#homepage .intro .box {bottom:3.25rem; padding: 15px 15px 10px 15px;}
	#homepage .intro .box h1 {font-size:2.25rem; line-height: 2.50rem; padding: 20px; margin-bottom: 0.25rem}
	#homepage .intro .box h2 {font-size:1.80rem; line-height: 2rem; padding: 10px 20px 20px 20px;}
	#homepage .intro .suite {bottom:1rem; padding-left: 50px;}
	#homepage .intro .suite .fa {font-size:1.80rem;}
}

@media (max-width: 349px)  {
	#homepage .intro .box {bottom:3.25rem; padding: 15px 15px 10px 15px;}
	#homepage .intro .box h1 {font-size:2.25rem; line-height: 2.50rem; padding: 20px; margin-bottom: 0.25rem}
	#homepage .intro .box h2 {font-size:1.80rem; line-height: 2rem; padding: 10px 20px 20px 20px;}
	#homepage .intro .suite {bottom:1rem; padding-left: 50px;}
	#homepage .intro .suite .fa {font-size:1.80rem;}
}

/* Éléments entête */




@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	#homepage .theme {height:700px; background-size: auto ; background-position:center top; background-attachment: inherit; display: flex; align-items: center; justify-content: center;}
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	#homepage .theme {height:700px; background-size: auto ; background-position:center top; background-attachment: inherit; display: flex; align-items: center; justify-content: center;}
}





/*******************************************************************************************************/
/*                                                                                                     */
/*      PAGES                                                                                          */
/*                                                                                                     */
/*******************************************************************************************************/


#page .entete {margin-top:65px; background-size:cover; background-repeat:no-repeat; background-position:center 50%; height: 450px;}

#page .entete .intro {display: flex; align-items: center; justify-content: center; height: 450px;}
#page .entete .intro .box {text-align:center; width:100%; padding: 15px 15px 10px 15px; xborder:2px solid #FFF; xborder-radius:5px; background-color: rgba(32, 123, 224, 0.5); margin:auto;}
#page .entete .intro .box h2 {text-align:center; font-size:1.75rem; font-weight:bold; font-family: 'Montserrat', sans-serif; text-transform:uppercase; color: rgba(255, 255, 255, 1.0);}
#page .entete .intro .box h3 {text-align:center; font-size:1.05rem; font-weight: bold; line-height: 1.75rem; color: rgba(255, 255, 255, 1.0); margin: auto; width:60%;}


/* Images entêtes */
#page .entete {background-image: url(/assets/00_images/entete1.jpg);}

#page.une-toiture-metallique .entete,
#page.a-metal-roof .entete {background-image:url(/assets/00_images/entetes/entete-commercial-5.jpg);}

#page.installation .entete {background-image:url(/assets/00_images/entetes/entete-ardoise.jpg);}

#page.projets.ancestral .entete,
#page.projects.ancestral .entete {background-image:url(/upload/extra/produits-ancestral.webp);}

#page.projets.ardoise .entete,
#page.projects.slate .entete {background-image:url(/upload/extra/produits-ardoise.webp);}

#page.projets.californien .entete,
#page.projects.californian .entete {background-image:url(/upload/extra/produits-californien.webp);}

#page.projets.commercial .entete,
#page.projects.commercial .entete {background-image:url(/upload/extra/produits-commercial.webp);}

#page.a-propos-de-nous .entete,
#page.about-us .entete {background-image:url(/assets/00_images/entetes/entete-californien.jpg);}
/* Images entêtes */


#page .contenu {min-height: 500px; margin-top: 25px; padding-bottom: 50px;}
#page .ariane {font-size:12px; margin-bottom: 25px; padding-left:3px;}
#page .contenu h4 {display: inline-block; color:#fff; background-color: #207BE0; font-size: 1.2rem; margin-bottom:0px; margin-top: 20px; padding: 5px 10px; border-radius: 5px; text-transform: uppercase;}
#page .contenu h1 {color:#207BE0; border-bottom: #207BE0 thin solid; margin-top:5px; margin-bottom:5px; font-size: 2.5rem;}
#page .contenu .texte {text-align:justify; font-size: 1rem;}
#page .contenu .texte h3 {color:#DF1A1D; padding-top: 30px; padding-bottom: 5px; margin-bottom: 5px; border-bottom: #DF1A1D thin dotted;}
#page .contenu .texte h4 {color:#000; padding: 5px 10px 10px 0; background-color:#fff;}
#page .contenu .texte p img {padding-bottom: 10px; width: 700px;}
#page .contenu .texte .redirection {font-size: 13px; font-weight: bold;}
#page .contenu .texte .redirection a {color: #bf1e2e;}
#page .contenu .texte .redirection .fa {color: #207BE0; margin-right: 5px;}
#page .contenu .texte .first {margin-top: 30px;}
#page .contenu .texte .important {color:#DF1A1D}
#page .contenu .texte .legende {color:#DF1A1D; text-align: center; font-size: 13px; font-weight: bold;}
#page .contenu .texte ul {}
#page .contenu .texte ul li {padding-bottom: 10px;}
#page .contenu .texte ul li b {color:#207BE0;}

#page .contenu .texte .images-groupe {text-align: center; margin: 40px auto;}
#page .contenu .texte .images-groupe img {width:100%; padding: 5px; border-radius: 100%;}

#page .contenu .texte .images-remplacement {text-align: left;}
#page .contenu .texte .images-remplacement img {width:235px; margin-right: 15px;}
#page .contenu .texte .images-couts {text-align: center;}
#page .contenu .texte .images-couts img {width:100%; padding: 10px;}

#page .contenu .texte .rondelle {width:75px; height:75px; border-radius: 100%;}
#page .contenu .texte .rondelle.blue_gray {background-color:#333366;}
#page .contenu .texte .rondelle.brun_moka {background-color:#330000;}
#page .contenu .texte .rondelle.colonial_red {background-color:#660000;}
#page .contenu .texte .rondelle.slate_gray {background-color:#333333;}
#page .contenu .texte .rondelle.brun_chocolat {background-color:#330000;}
#page .contenu .texte .rondelle.jungle_green {background-color:#003300;}
#page .contenu .texte .rondelle.terra_cotta {background-color:#993300;}
#page .contenu .texte .rondelle.noir {background-color:#000000;}


#page .contenu .projets {margin-top: 50px; margin-left:-50px; text-align: center;}
#page .contenu .projets ul {text-align: center;}
#page .contenu .projets ul li {padding: 5px 25px; display: inline-block; vertical-align:top; list-style:none;}
#page .contenu .projets ul li img {width: 200px;}


#page .contenu .formulaire {margin-top: 30px; margin-left:-25px;}



@media (min-width: 1500px) {
}
	
@media (min-width: 1200px) and (max-width: 1499px)  {
}
	
@media (min-width: 992px) and (max-width: 1199px)  {
	#page .entete .intro .box h3 {width: 70%;}
	#page .contenu .texte h3 {}
	#page .contenu .texte p img {width: 600px;}
	#page .contenu .texte .images-remplacement img {width:210px; margin-right: 10px;}
	#page .contenu .projets ul li {padding: 5px 15px;}
	#page .contenu .projets ul li img {width: 200px;}
}
	
@media (min-width: 768px) and (max-width: 991px)  {
	#page .entete .intro .box h3 {width: 80%;}
	#page .contenu .texte h3 {}
	#page .contenu .texte p img {width: 500px;}
	#page .contenu .texte .images-remplacement img {width:155px; margin-right: 10px;}
	#page .contenu .projets ul li {padding: 5px 15px;}
	#page .contenu .projets ul li img {width: 200px;}
}
	
@media (min-width: 576px) and (max-width: 767px)  {
	#page .entete .intro .box {background-color: rgba(32, 123, 224, 0.55);}
	#page .entete .intro .box h2 {font-size:1.40rem;}
	#page .entete .intro .box h3 {font-size:0.95rem; line-height: 1.55rem; width: 90%;}
	#page .contenu h4 {font-size: 0.9rem; margin-top:0px; margin-left: 15px;}
	#page .contenu h1 {font-size: 2.0rem; margin-left: 15px;}
	#page .contenu .texte {text-align:left; padding: 15px;}
	#page .contenu .texte h3 {}
	#page .contenu .texte p img {width: 400px;}
	#page .contenu .texte .images-remplacement {text-align: center;}
	#page .contenu .texte .images-remplacement img {width:200px; margin: 10px 10px 0 0;}
	#page .contenu .projets ul li {padding: 5px 10px;}
	#page .contenu .projets ul li img {width: 150px;}
}
@media (max-width: 575px) {
	#page .entete .intro .box {background-color: rgba(32, 123, 224, 0.6);}
	#page .entete .intro .box h2 {font-size:1.30rem;}
	#page .entete .intro .box h3 {font-size:0.90rem; line-height: 1.45rem; width: 100%;}
	#page .contenu h4 {font-size: 0.75rem; margin-top:0px; margin-left: 15px;}
	#page .contenu h1 {font-size: 2.0rem; margin-left: 15px;}
	#page .contenu .texte {text-align:left; padding: 15px;}
	#page .contenu .texte h3 {width: 100%;}
	#page .contenu .texte p img {width: 100%;}
	#page .contenu .texte .images-remplacement {text-align: center;}
	#page .contenu .texte .images-remplacement img {width:45%; margin: 5px;}
	#page .contenu .projets ul li {padding: 5px 10px;}
	#page .contenu .projets ul li img {width: 150px;}
}

@media (min-width: 401px) and (max-width: 575px)  {
	#page.ecoresponsabilite .intro h2 {font-size:2.0rem; margin:80px auto 15px auto; width:100%;}
}

@media (max-width: 400px) {
	#page.ecoresponsabilite .intro h2 {font-size:1.7rem; margin:80px auto 15px auto; width:100%;}
}







/*******************************************************************************************************/
/*                                                                                                     */
/*      FOOTER                                                                                         */
/*                                                                                                     */
/*******************************************************************************************************/


footer {height:auto; min-height:450px; padding:25px 0 25px 0; background-color:#000; border-top:#FFF 3px solid;}

footer .logo {text-align: center; padding: 25px;}
footer .logo img {width:250px;}
footer .telephone {text-align: center; color: #fff; font-size: 1.85rem; font-weight: bold;}
footer .contact {text-align: center; color: #fff; font-size: 1.0rem; font-weight: bold; padding: 15px 150px 50px 150px;}

footer .carte {padding-top: 2px;}
footer .carte img {width:100%; border-radius: 7px;}

footer .formulaire {margin-bottom: 30px;}
footer .formulaire .control-label {color: #ddd; font-weight: bold; padding-bottom: 5px;}
footer .formulaire .form-control::placeholder {color:#007bff;}

footer .garanties {border-top:#bbb 1px solid; padding-top: 25px; margin-top: 25px; text-align: center;}
footer .garanties .cent {}
footer .garanties .cent img {width:75px; margin: auto 10px;}
footer .garanties .cinquante {}
footer .garanties .cinquante img {width:70px; margin: auto 10px;}


@media (min-width: 992px) and (max-width: 1199px) {
	footer .contact {font-size: 1.0rem; padding: 15px 55px 50px 55px;}
}

@media (min-width: 768px) and (max-width: 991px) {
	footer .contact {font-size: 1.0rem; padding: 15px 75px 50px 75px;}
	footer .carte {padding: 0px 15px 45px 15px;}
}

@media (max-width: 767px) {
	footer {height:auto; min-height:250px;}
	footer .contact {text-align: center; color: #fff; font-size: 1.0rem; font-weight: bold; padding: 15px 25px 50px 25px;}
	footer .carte {padding: 0px 15px 45px 15px;}
}







/*******************************************************************************************************/
/*                                                                                                     */
/*      MODAL                                                                                          */
/*                                                                                                     */
/*******************************************************************************************************/


.modal-backdrop {background-color: #000;}
.modal-backdrop.in {filter: alpha(opacity=90); opacity: .9;}
.modal-open[style] {overflow: visible; padding-right: 0px !important;}
.modal-header .close {padding:5px 15px 15px 15px;}

@media (min-width: 576px) {
	.modal-dialog {max-width: inherit;}
}

@media (min-width: 768px) {
	.modal-open[style] {overflow: visible; padding-right: 0px !important;}
	.modal-dialog {position: relative; margin: 0px auto;}
}

@media (max-width: 767px) {
	.modal-backdrop {background-color: #111;}
	.modal-backdrop.in {filter: alpha(opacity=80); opacity: .8;}
}


/*********************************************************************************/
/*   Modal - Sidebar                                                             */
/*********************************************************************************/

#sidebar.modal .modal-dialog {position: fixed; margin: auto; width: auto; height: 100%; z-index: 1001;}
#sidebar.modal.fade .modal-dialog {transform: translate(100%, 0px); right:0; margin-right:-15px;}
#sidebar.modal.show .modal-dialog {transform: none;}
#sidebar .modal-content {height: 100%; overflow-y: auto; border-left:1px solid #fff; border-radius: 0px;}
#sidebar .modal-body {text-align:left; padding: 15px 15px 15px 0px;}
#sidebar .modal-body {background-color: #222; height:100%; width: 400px; margin:auto; font-family:'Poppins', sans-serif;}
#sidebar .modal-body .close {color: #F60; padding: 10px 0 0 15px; text-shadow:none; opacity:1; float: left;}

#sidebar .modal-body .liens {text-align:left; margin-top:45px; padding:10px 15px;}
#sidebar .modal-body .liens dl {margin-bottom: 35px;}
#sidebar .modal-body .liens dt,
#sidebar .modal-body .liens .solo {padding: 15px 10px 15px 0px; font-size:18px; font-family: Arial, Helvetica, sans-serif; color: #fff; font-weight: bold; border-top:#777 solid 1px; cursor: pointer; text-align:left;}
#sidebar .modal-body .liens dt a,
#sidebar .modal-body .liens .solo a {cursor: pointer; color: #fff; text-decoration:none; padding: 15px 10px 15px 0px; }
#sidebar .modal-body .liens dt:hover,
#sidebar .modal-body .liens .solo a:hover {cursor: pointer; color: #F60; text-decoration:none; padding: 15px 10px 15px 0px; }
#sidebar .modal-body .liens dt .fa {font-size:18px; margin-right:15px;}

#sidebar .modal-body .liens dd {text-align:left; font-size:16px; padding-left:15px;}
#sidebar .modal-body .liens dd a {color: #fff; font-size:16px; font-weight: bold;}
#sidebar .modal-body .liens dd a:hover {color:#bbb; text-decoration: none;}
#sidebar .modal-body .liens dd li::before {display: inline-block; content: "\2022"; color: #F60; font-size:18px; font-weight: bold;  width: 15px; vertical-align:middle; margin-left:-20px;}

@media (min-width: 400px) and (max-width: 575px)  {
	#sidebar.modal .modal-dialog {width: 400px;}
}

@media (max-width: 399px)  {
	#sidebar.modal .modal-dialog {width: 300px;}
}



/*********************************************************************************/
/*   Modal - Vidéos                                                              */
/*********************************************************************************/

/*

.modal {z-index:9999}

#modalvideo1.modal.fade.videos .modal-dialog {
  -webkit-transition: -webkit-transform 1.9s ease-out;
       -o-transition:      -o-transform 1.9s ease-out;
          transition:         transform 1.9s ease-out;
  -webkit-transform: translate(0, 0%);
      -ms-transform: translate(0, 0%);
       -o-transform: translate(0, 0%);
          transform: translate(0, 0%);
}

#modalvideo1.modal.in.videos .modal-dialog {
  -webkit-transform: translate(0, 0%);
      -ms-transform: translate(0, 0%);
       -o-transform: translate(0, 0%);
          transform: translate(0, 0%);
}
#modalvideo1.modal.fade.videos .modal-dialog {max-width: inherit; margin: 0;}
#modalvideo1.modal.fade.videos .modal-body {max-width: inherit; height: 99vh; padding: 0;}

.retractable-H {background-color: #ccc; padding: 0; width: 100%; max-height: 99vh; overflow: hidden; transition: 0.9s ease-out;}

*/